@umbraco-ui/uui-combobox 1.0.0-alpha.0 → 1.0.0-rc.2

package/README.md

@@ -1,9 +1,13 @@
 # uui-combobox
 
-![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-combobox?logoColor=%231B264F)
+[![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-combobox?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-combobox)
 
 Umbraco style combo-box component.
 
+### See it in action
+
+Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-combobox)
+
 ## Installation
 
 ### ES imports

package/lib/index.js

@@ -32,7 +32,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     this._onMouseDown = () => requestAnimationFrame(() => this._input.focus());
     this._onBlur = () => requestAnimationFrame(() => {
       if (document.activeElement !== this) {
-        this._close();
+        this._onClose();
       }
     });
     this._onInput = (e) => {
@@ -43,12 +43,11 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       this._open();
     };
     this._onChange = (e) => {
-      var _a, _b;
+      var _a;
       e.stopImmediatePropagation();
       this.value = ((_a = this._comboboxList) == null ? void 0 : _a.value) || "";
-      this._displayValue = ((_b = this._comboboxList) == null ? void 0 : _b.displayValue) || "";
       this.search = this.value ? this.search : "";
-      this._close();
+      this._onClose();
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
     };
     this._open = () => {
@@ -56,14 +55,12 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
         return;
       this.open = true;
     };
-    this._close = () => {
-      var _a;
+    this._onClose = () => {
       if (!this.open)
         return;
       this.open = false;
-      this._displayValue = ((_a = this._comboboxList) == null ? void 0 : _a.displayValue) || "";
-      this._input.value = this._displayValue;
       this.search = "";
+      this._input.value = this._displayValue;
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
     };
     this._onKeyDown = (e) => {
@@ -75,19 +72,18 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
         this._open();
       }
       if (e.key === "Escape" || e.key === "Enter") {
-        this._close();
+        this._onClose();
       }
     };
-    this._clear = (e) => {
+    this._onClear = (e) => {
       if (e.key && e.key !== "Enter")
         return;
       e.preventDefault();
       e.stopImmediatePropagation();
-      this._displayValue = "";
-      this._input.value = this._displayValue;
-      this.search = "";
       this.value = "";
-      this._comboboxList.value = this.value;
+      this.search = "";
+      this._input.value = this._displayValue;
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
     };
     this._renderInput = () => {
@@ -97,7 +93,6 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       label="combobox-input"
       type="text"
       .value=${this._displayValue}
-      .placeholder=${this._displayValue}
       autocomplete="off"
       @click=${this._open}
       @input=${this._onInput}
@@ -116,12 +111,12 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       return html`<uui-button
       id="clear-button"
       class=${this.value || this.search ? "--show" : ""}
-      @click=${this._clear}
-      @keydown=${this._clear}
+      @click=${this._onClear}
+      @keydown=${this._onClear}
       label="clear"
       slot="append"
       compact
-      style="height: 100%; --uui-button-padding-top-factor: 0; --uui-button-padding-bottom-factor: 0;">
+      style="height: 100%;">
       <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
     </uui-button>`;
     };
@@ -137,10 +132,10 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     return this._value;
   }
   set value(newValue) {
-    super.value = newValue;
     if (typeof newValue === "string") {
       this._updateValue(newValue);
     }
+    super.value = newValue;
   }
   get search() {
     return this._search;
@@ -173,7 +168,10 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     if (list) {
       this._comboboxList = list;
       this._comboboxList.for = this;
-      this._comboboxList.addEventListener(UUIComboboxListEvent.CHANGE, this._onChange);
+      this._comboboxList.addEventListener(
+        UUIComboboxListEvent.CHANGE,
+        this._onChange
+      );
       if (typeof this.value === "string") {
         await this.updateComplete;
         this._updateValue(this.value);
@@ -195,7 +193,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       <uui-popover
         .open=${this.open}
         .margin=${-1}
-        @close=${() => this._close()}>
+        @close=${() => this._onClose()}>
         ${this._renderInput()} ${this._renderDropdown()}
       </uui-popover>
     `;

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

@@ -43,9 +43,9 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
     private _onInput;
     private _onChange;
     private _open;
-    private _close;
+    private _onClose;
     private _onKeyDown;
-    private _clear;
+    private _onClear;
     private _renderInput;
     private _renderCaret;
     private _renderClearButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-combobox",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-rc.2",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,11 +30,11 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.0.0-alpha.0",
-    "@umbraco-ui/uui-button": "1.0.0-alpha.0",
-    "@umbraco-ui/uui-combobox-list": "1.0.0-alpha.0",
-    "@umbraco-ui/uui-icon": "1.0.0-alpha.0",
-    "@umbraco-ui/uui-scroll-container": "1.0.0-alpha.0"
+    "@umbraco-ui/uui-base": "1.0.0-rc.2",
+    "@umbraco-ui/uui-button": "1.0.0-rc.2",
+    "@umbraco-ui/uui-combobox-list": "1.0.0-rc.2",
+    "@umbraco-ui/uui-icon": "1.0.0-rc.2",
+    "@umbraco-ui/uui-scroll-container": "1.0.0-rc.2"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-combobox",
-  "gitHead": "7d7608bf2fb63a8a077fcd8f0346dea73584b878"
+  "gitHead": "436dd8d9fff81481feb88f06b461167c98dac91a"
 }