update umb-dropdown to use popover-container

src/Umbraco.Web.UI.Client/src/packages/core/components/dropdown/dropdown.element.ts

@@ -1,51 +1,65 @@
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import {
+	css,
+	html,
+	nothing,
+	customElement,
+	property,
+	PropertyValueMap,
+	query,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { InterfaceColor, InterfaceLook, PopoverContainerPlacement, UUIPopoverContainerElement } from '@umbraco-ui/uui';
 
 // TODO: maybe move this to UI Library.
 @customElement('umb-dropdown')
 export class UmbDropdownElement extends UmbLitElement {
+	@query('#dropdown-popover')
+	popoverContainerElement?: UUIPopoverContainerElement;
 	@property({ type: Boolean, reflect: true })
 	open = false;
 
+	@property()
+	label = '';
+
+	@property()
+	look: InterfaceLook = 'default';
+
+	@property()
+	color: InterfaceColor = 'default';
+
+	@property()
+	placement: PopoverContainerPlacement = 'bottom-start';
+
+	@property({ type: Boolean })
+	compact = false;
+
+	protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+		super.updated(_changedProperties);
+		if (_changedProperties.has('open') && this.popoverContainerElement) {
+			this.open ? this.popoverContainerElement.showPopover() : this.popoverContainerElement.hidePopover();
+		}
+	}
+
 	render() {
 		return html`
-			<uui-popover id="container" .open=${this.open} @close=${() => (this.open = false)}>
-				<slot name="trigger" slot="trigger"></slot>
-				${this.open ? this.#renderDropdown() : nothing}
-			</uui-popover>
+			<uui-button
+				popovertarget="dropdown-popover"
+				.look=${this.look}
+				.color=${this.color}
+				.label=${this.label}
+				.compact=${this.compact}>
+				<slot name="label"></slot>
+			</uui-button>
+			<uui-popover-container id="dropdown-popover">
+				<umb-popover-layout>
+					<slot></slot>
+				</umb-popover-layout>
+			</uui-popover-container>
 		`;
 	}
 
-	#renderDropdown() {
-		return html`
-			<div id="dropdown" slot="popover">
-				<slot name="dropdown"></slot>
-			</div>
-		`;
-	}
-
-	static styles = [
-		UmbTextStyles,
-		css`
-			#container {
-				display: inline-block;
-				width: unset;
-			}
-
-			#dropdown {
-				overflow: hidden;
-				z-index: -1;
-				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
-				border: 1px solid var(--uui-color-border);
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-			}
-		`,
-	];
+	static styles = [UmbTextStyles, css``];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language-root/components/language-root-table-delete-column-layout.element.ts

@@ -1,4 +1,4 @@
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, nothing, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -15,26 +15,15 @@ export class UmbLanguageRootTableDeleteColumnLayoutElement extends UmbLitElement
 		this._isOpen = false;
 	}
 
-	#onClick() {
-		this._isOpen = !this._isOpen;
-	}
-
-	#onClose() {
-		this._isOpen = false;
-	}
-
 	render() {
 		// TODO: we need to use conditionals on each action here. But until we have that in place
 		// we'll just remove all actions on the default language.
 		if (this.value.isDefault) return nothing;
 
 		return html`
-			<umb-dropdown .open="${this._isOpen}" @close=${this.#onClose}>
-				<uui-button label="actions" slot="trigger" compact @click=${this.#onClick}>
-					<uui-symbol-more></uui-symbol-more>
-				</uui-button>
+			<umb-dropdown .open=${this._isOpen} compact>
+				<uui-symbol-more slot="label"></uui-symbol-more>
 				<umb-entity-action-list
-					slot="dropdown"
 					@action-executed=${this.#onActionExecuted}
 					entity-type="language"
 					unique=${ifDefined(this.value.isoCode)}></umb-entity-action-list>