@umbraco-ui/uui-combobox 1.6.0-rc.1 → 1.6.0-rc.2

package/custom-elements.json

@@ -192,6 +192,12 @@
           "name": "input-append",
           "description": "append for the uui-input"
         }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-dropdown-width",
+          "description": "overwrite the dropdown width"
+        }
       ]
     }
   ]

package/lib/index.js

@@ -42,83 +42,112 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _comboboxList, _phoneMediaQuery, _onPhoneChange, _updateValue, updateValue_fn, _onMouseDown, _onBlur, _onInput, _onSlotChange, _onChange, _onToggle, _onOpen, _onClose, _onKeyDown, _onClear, _renderInput, _renderClearButton, _renderDropdown;
 let UUIComboboxElement = class extends FormControlMixin(LitElement) {
   constructor() {
     super(...arguments);
-    this.open = false;
+    __privateAdd(this, _updateValue);
     this.closeLabel = "Close";
     this.disabled = false;
+    __privateAdd(this, _comboboxList, void 0);
+    __privateAdd(this, _phoneMediaQuery, void 0);
     this._displayValue = "";
     this._search = "";
     this._isPhone = false;
-    this._onPhoneChange = () => {
-      this._isPhone = this.phoneMediaQuery.matches;
-    };
-    this._onMouseDown = () => requestAnimationFrame(() => this._input.focus());
-    this._onBlur = () => requestAnimationFrame(() => {
+    this._isOpen = false;
+    __privateAdd(this, _onPhoneChange, () => {
+      this._isPhone = __privateGet(this, _phoneMediaQuery).matches;
+    });
+    __privateAdd(this, _onMouseDown, () => requestAnimationFrame(() => this._inputElement.focus()));
+    __privateAdd(this, _onBlur, () => requestAnimationFrame(() => {
       var _a;
       if (!((_a = this.shadowRoot) == null ? void 0 : _a.activeElement)) {
-        this._onClose();
+        __privateGet(this, _onClose).call(this);
       }
-    });
-    this._onInput = (e) => {
+    }));
+    __privateAdd(this, _onInput, (e) => {
       e.preventDefault();
       e.stopImmediatePropagation();
       this.search = e.target.value;
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
-      this._open();
-    };
-    this._onSlotChange = () => {
+      __privateGet(this, _onOpen).call(this);
+    });
+    __privateAdd(this, _onSlotChange, () => {
       var _a;
-      if (this.value && this.value !== ((_a = this._comboboxList) == null ? void 0 : _a.value)) {
-        this._updateValue(this.value);
+      if (this.value && this.value !== ((_a = __privateGet(this, _comboboxList)) == null ? void 0 : _a.value)) {
+        __privateMethod(this, _updateValue, updateValue_fn).call(this, this.value);
       }
-    };
-    this._onChange = () => {
+    });
+    __privateAdd(this, _onChange, () => {
       var _a;
-      this.value = ((_a = this._comboboxList) == null ? void 0 : _a.value) || "";
+      this.value = ((_a = __privateGet(this, _comboboxList)) == null ? void 0 : _a.value) || "";
       this.search = this.value ? this.search : "";
-      this._onClose();
+      __privateGet(this, _onClose).call(this);
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
-    };
-    this._open = () => {
+    });
+    __privateAdd(this, _onToggle, () => {
+      this.open = !this.open;
+    });
+    __privateAdd(this, _onOpen, () => {
       if (this.open)
         return;
       this.open = true;
-    };
-    this._onClose = () => {
+    });
+    __privateAdd(this, _onClose, () => {
       if (!this.open)
         return;
       this.open = false;
       this.search = "";
-      this._input.value = this._displayValue;
+      this._inputElement.value = this._displayValue;
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
-    };
-    this._onKeyDown = (e) => {
+    });
+    __privateAdd(this, _onKeyDown, (e) => {
       if (this.open === false && e.key === "Enter") {
         e.preventDefault();
         e.stopImmediatePropagation();
       }
       if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-        this._open();
+        __privateGet(this, _onOpen).call(this);
       }
       if (e.key === "Escape" || e.key === "Enter") {
-        this._onClose();
+        __privateGet(this, _onClose).call(this);
       }
-    };
-    this._onClear = (e) => {
+    });
+    __privateAdd(this, _onClear, (e) => {
       if (e.key && e.key !== "Enter")
         return;
       e.preventDefault();
       e.stopImmediatePropagation();
       this.value = "";
       this.search = "";
-      this._input.value = this._displayValue;
-      this._input.focus();
+      this._inputElement.value = this._displayValue;
+      this._inputElement.focus();
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
-    };
-    this._renderInput = () => {
+    });
+    __privateAdd(this, _renderInput, () => {
       return html` <uui-input
       slot="trigger"
       id="combobox-input"
@@ -127,45 +156,44 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       .value=${this._displayValue}
       autocomplete="off"
       .disabled=${this.disabled}
-      @click=${this._open}
-      @input=${this._onInput}
-      @keydown=${this._onKeyDown}>
+      popovertarget="combobox-popover"
+      @click=${__privateGet(this, _onToggle)}
+      @input=${__privateGet(this, _onInput)}
+      @keydown=${__privateGet(this, _onKeyDown)}>
       <slot name="input-prepend" slot="prepend"></slot>
-      ${this.disabled ? "" : this._renderClearButton()} ${this._renderCaret()}
+      ${this.disabled ? "" : __privateGet(this, _renderClearButton).call(this)}
+      <div id="expand-symbol-wrapper" slot="append">
+        <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
+      </div>
       <slot name="input-append" slot="append"></slot>
     </uui-input>`;
-    };
-    this._renderCaret = () => {
-      return html`<svg id="caret" slot="append" viewBox="0 0 512 512">
-      <path d="M 255.125 400.35 L 88.193 188.765 H 422.055 Z"></path>
-    </svg>`;
-    };
-    this._renderClearButton = () => {
+    });
+    __privateAdd(this, _renderClearButton, () => {
       return this.value || this.search ? html`<uui-button
           id="clear-button"
-          @click=${this._onClear}
-          @keydown=${this._onClear}
+          @click=${__privateGet(this, _onClear)}
+          @keydown=${__privateGet(this, _onClear)}
           label="clear"
           slot="append"
           compact
           style="height: 100%;">
           <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
         </uui-button>` : "";
-    };
-    this._renderDropdown = () => {
-      return html`<div id="dropdown" slot="popover">
+    });
+    __privateAdd(this, _renderDropdown, () => {
+      return html`<div id="dropdown">
       <uui-scroll-container tabindex="-1" id="scroll-container">
         <slot></slot>
       </uui-scroll-container>
     </div>`;
-    };
+    });
   }
   get value() {
     return this._value;
   }
   set value(newValue) {
     if (typeof newValue === "string") {
-      this._updateValue(newValue);
+      __privateMethod(this, _updateValue, updateValue_fn).call(this, newValue);
     }
     super.value = newValue;
   }
@@ -179,75 +207,112 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     this._search = newValue;
     this.requestUpdate("search", oldValue);
   }
+  get open() {
+    return this._isOpen;
+  }
+  set open(newValue) {
+    const oldValue = newValue;
+    this._isOpen = newValue;
+    const popover = this._comboboxPopoverElement;
+    if (popover) {
+      if (newValue) {
+        const width = this._inputElement.offsetWidth;
+        popover.style.setProperty("--popover-width", `${width}px`);
+        popover.showPopover();
+      } else {
+        popover.hidePopover();
+      }
+    }
+    this.requestUpdate("open", oldValue);
+  }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("blur", this._onBlur);
-    this.addEventListener("mousedown", this._onMouseDown);
-    this.phoneMediaQuery = window.matchMedia("(max-width: 600px)");
-    this._onPhoneChange();
-    this.phoneMediaQuery.addEventListener("change", this._onPhoneChange);
+    this.addEventListener("blur", __privateGet(this, _onBlur));
+    this.addEventListener("mousedown", __privateGet(this, _onMouseDown));
+    __privateSet(this, _phoneMediaQuery, window.matchMedia("(max-width: 600px)"));
+    __privateGet(this, _onPhoneChange).call(this);
+    __privateGet(this, _phoneMediaQuery).addEventListener("change", __privateGet(this, _onPhoneChange));
     demandCustomElement(this, "uui-icon");
     demandCustomElement(this, "uui-input");
     demandCustomElement(this, "uui-button");
     demandCustomElement(this, "uui-combobox-list");
     demandCustomElement(this, "uui-scroll-container");
-    demandCustomElement(this, "uui-popover");
+    demandCustomElement(this, "uui-popover-container");
+    demandCustomElement(this, "uui-symbol-expand");
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("blur", this._onBlur);
-    this.removeEventListener("mousedown", this._onMouseDown);
-    this.phoneMediaQuery.removeEventListener("change", this._onPhoneChange);
+    this.removeEventListener("blur", __privateGet(this, _onBlur));
+    this.removeEventListener("mousedown", __privateGet(this, _onMouseDown));
+    __privateGet(this, _phoneMediaQuery).removeEventListener("change", __privateGet(this, _onPhoneChange));
   }
   async firstUpdated() {
     var _a;
     const list = (_a = this._comboboxListElements) == null ? void 0 : _a[0];
     if (list) {
-      this._comboboxList = list;
-      this._comboboxList.for = this;
-      this._comboboxList.addEventListener(
+      __privateSet(this, _comboboxList, list);
+      __privateGet(this, _comboboxList).for = this;
+      __privateGet(this, _comboboxList).addEventListener(
         UUIComboboxListEvent.CHANGE,
-        this._onChange
+        __privateGet(this, _onChange)
       );
-      this._comboboxList.addEventListener(
+      __privateGet(this, _comboboxList).addEventListener(
         UUIComboboxListEvent.INNER_SLOT_CHANGE,
-        this._onSlotChange
+        __privateGet(this, _onSlotChange)
       );
       await this.updateComplete;
-      this._updateValue(this.value);
-    }
-  }
-  _updateValue(value) {
-    if (this._comboboxList) {
-      this._comboboxList.value = value;
-      requestAnimationFrame(
-        () => this._displayValue = this._comboboxList.displayValue || ""
-      );
+      __privateMethod(this, _updateValue, updateValue_fn).call(this, this.value);
     }
   }
   getFormElement() {
-    return this._input;
+    return this._inputElement;
   }
   render() {
     if (this._isPhone && this.open) {
       return html` <div id="phone-wrapper">
-        <uui-button label="close" look="primary" @click=${this._onClose}>
+        <uui-button label="close" look="primary" @click=${__privateGet(this, _onClose)}>
           ${this.closeLabel}
         </uui-button>
-        ${this._renderInput()} ${this._renderDropdown()}
+        ${__privateGet(this, _renderInput).call(this)} ${__privateGet(this, _renderDropdown).call(this)}
       </div>`;
     } else {
       return html`
-        <uui-popover
-          .open=${this.open}
-          .margin=${-1}
-          @close=${() => this._onClose()}>
-          ${this._renderInput()} ${this._renderDropdown()}
-        </uui-popover>
+        ${__privateGet(this, _renderInput).call(this)}
+        <uui-popover-container
+          id="combobox-popover"
+          popover="manual"
+          placement="bottom-end">
+          ${__privateGet(this, _renderDropdown).call(this)}
+        </uui-popover-container>
       `;
     }
   }
 };
+_comboboxList = new WeakMap();
+_phoneMediaQuery = new WeakMap();
+_onPhoneChange = new WeakMap();
+_updateValue = new WeakSet();
+updateValue_fn = function(value) {
+  if (__privateGet(this, _comboboxList)) {
+    __privateGet(this, _comboboxList).value = value;
+    requestAnimationFrame(
+      () => this._displayValue = __privateGet(this, _comboboxList).displayValue || ""
+    );
+  }
+};
+_onMouseDown = new WeakMap();
+_onBlur = new WeakMap();
+_onInput = new WeakMap();
+_onSlotChange = new WeakMap();
+_onChange = new WeakMap();
+_onToggle = new WeakMap();
+_onOpen = new WeakMap();
+_onClose = new WeakMap();
+_onKeyDown = new WeakMap();
+_onClear = new WeakMap();
+_renderInput = new WeakMap();
+_renderClearButton = new WeakMap();
+_renderDropdown = new WeakMap();
 UUIComboboxElement.styles = [
   css`
       :host {
@@ -259,11 +324,21 @@ UUIComboboxElement.styles = [
         border-radius: var(--uui-size-1,3px);
       }
 
+      #combobox-popover {
+        width: var(--uui-dropdown-width, var(--popover-width, inherit));
+      }
+
       #scroll-container {
         overflow-y: auto;
         width: 100%;
         max-height: var(--uui-combobox-popover-max-height, 500px);
       }
+      #expand-symbol-wrapper {
+        height: 100%;
+        padding-right: var(--uui-size-space-3,9px);
+        display: flex;
+        justify-content: center;
+      }
 
       #dropdown {
         overflow: hidden;
@@ -280,14 +355,6 @@ UUIComboboxElement.styles = [
         box-shadow: var(--uui-shadow-depth-3,0 10px 20px rgba(0,0,0,0.19) , 0 6px 6px rgba(0,0,0,0.23));
       }
 
-      #caret {
-        margin-right: var(--uui-size-3, 9px);
-        display: flex;
-        width: 1.15em;
-        flex-shrink: 0;
-        margin-top: -1px;
-      }
-
       :host([disabled]) #caret {
         fill: var(--uui-color-disabled-contrast,#c4c4c4);
       }
@@ -327,7 +394,7 @@ __decorateClass([
 ], UUIComboboxElement.prototype, "search", 1);
 __decorateClass([
   property({ type: Boolean })
-], UUIComboboxElement.prototype, "open", 2);
+], UUIComboboxElement.prototype, "open", 1);
 __decorateClass([
   property({ type: String })
 ], UUIComboboxElement.prototype, "closeLabel", 2);
@@ -336,7 +403,10 @@ __decorateClass([
 ], UUIComboboxElement.prototype, "disabled", 2);
 __decorateClass([
   query("#combobox-input")
-], UUIComboboxElement.prototype, "_input", 2);
+], UUIComboboxElement.prototype, "_inputElement", 2);
+__decorateClass([
+  query("#combobox-popover")
+], UUIComboboxElement.prototype, "_comboboxPopoverElement", 2);
 __decorateClass([
   queryAssignedElements({
     flatten: true,
@@ -352,6 +422,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], UUIComboboxElement.prototype, "_isPhone", 2);
+__decorateClass([
+  state()
+], UUIComboboxElement.prototype, "_isOpen", 2);
 UUIComboboxElement = __decorateClass([
   defineElement("uui-combobox")
 ], UUIComboboxElement);

package/lib/uui-combobox.element.d.ts

@@ -7,9 +7,11 @@ declare const UUIComboboxElement_base: (new (...args: any[]) => import("@umbraco
  * @slot - for uui-combobox-list-options
  * @slot input-prepend - prepend for the uui-input
  * @slot input-append - append for the uui-input
+ * @cssprop --uui-dropdown-width - overwrite the dropdown width
  * @description - Filterable combobox
  */
 export declare class UUIComboboxElement extends UUIComboboxElement_base {
+    #private;
     get value(): FormDataEntryValue | FormData;
     set value(newValue: FormDataEntryValue | FormData);
     /**
@@ -26,7 +28,8 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
      * @attr
      * @default false
      */
-    open: boolean;
+    get open(): boolean;
+    set open(newValue: boolean);
     /**
      * Specifies the button label for the close button in mobile mode
      * @type { string }
@@ -41,32 +44,17 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
      * @default false
      */
     disabled: boolean;
-    private _input;
+    private _inputElement;
+    private _comboboxPopoverElement?;
     private _comboboxListElements?;
-    private _comboboxList;
-    private phoneMediaQuery;
     private _displayValue;
     private _search;
     private _isPhone;
+    private _isOpen;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): Promise<void>;
-    private _onPhoneChange;
-    private _updateValue;
     protected getFormElement(): HTMLElement | undefined;
-    private _onMouseDown;
-    private _onBlur;
-    private _onInput;
-    private _onSlotChange;
-    private _onChange;
-    private _open;
-    private _onClose;
-    private _onKeyDown;
-    private _onClear;
-    private _renderInput;
-    private _renderCaret;
-    private _renderClearButton;
-    private _renderDropdown;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-combobox",
-  "version": "1.6.0-rc.1",
+  "version": "1.6.0-rc.2",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,11 +30,13 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.6.0-rc.1",
-    "@umbraco-ui/uui-button": "1.6.0-rc.1",
-    "@umbraco-ui/uui-combobox-list": "1.6.0-rc.1",
-    "@umbraco-ui/uui-icon": "1.6.0-rc.1",
-    "@umbraco-ui/uui-scroll-container": "1.6.0-rc.1"
+    "@umbraco-ui/uui-base": "1.6.0-rc.2",
+    "@umbraco-ui/uui-button": "1.6.0-rc.2",
+    "@umbraco-ui/uui-combobox-list": "1.6.0-rc.2",
+    "@umbraco-ui/uui-icon": "1.6.0-rc.2",
+    "@umbraco-ui/uui-popover-container": "1.6.0-rc.2",
+    "@umbraco-ui/uui-scroll-container": "1.6.0-rc.2",
+    "@umbraco-ui/uui-symbol-expand": "1.6.0-rc.2"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -45,5 +47,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-combobox",
-  "gitHead": "9708ccbac569560b716431080c782c5531c66ea5"
+  "gitHead": "5d4eefce4744802ab5bc40055b1a3136f0afc520"
 }