@umbraco-ui/uui-combobox 1.0.0-rc.3 → 1.1.0

package/lib/index.js

@@ -1,11 +1,11 @@
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
-import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
-import { LitElement, html, css } from 'lit';
-import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 import { UUIComboboxListEvent } from '@umbraco-ui/uui-combobox-list/lib';
-import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { iconRemove } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
+import { LitElement, html, css } from 'lit';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
 class UUIComboboxEvent extends UUIEvent {
 }
@@ -31,7 +31,8 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     this._search = "";
     this._onMouseDown = () => requestAnimationFrame(() => this._input.focus());
     this._onBlur = () => requestAnimationFrame(() => {
-      if (document.activeElement !== this) {
+      var _a;
+      if (!((_a = this.shadowRoot) == null ? void 0 : _a.activeElement)) {
         this._onClose();
       }
     });
@@ -83,6 +84,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       this.value = "";
       this.search = "";
       this._input.value = this._displayValue;
+      this._input.focus();
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
     };
@@ -108,21 +110,20 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     </svg>`;
     };
     this._renderClearButton = () => {
-      return html`<uui-button
-      id="clear-button"
-      class=${this.value || this.search ? "--show" : ""}
-      @click=${this._onClear}
-      @keydown=${this._onClear}
-      label="clear"
-      slot="append"
-      compact
-      style="height: 100%;">
-      <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
-    </uui-button>`;
+      return this.value || this.search ? html`<uui-button
+          id="clear-button"
+          @click=${this._onClear}
+          @keydown=${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">
-      <uui-scroll-container id="scroll-container">
+      <uui-scroll-container tabindex="-1" id="scroll-container">
         <slot></slot>
       </uui-scroll-container>
     </div>`;
@@ -156,6 +157,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     demandCustomElement(this, "uui-button");
     demandCustomElement(this, "uui-combobox-list");
     demandCustomElement(this, "uui-scroll-container");
+    demandCustomElement(this, "uui-popover");
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -231,17 +233,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));
       }
 
-      #clear-button {
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 120ms;
-      }
-
-      #clear-button.--show {
-        pointer-events: auto;
-        opacity: 1;
-      }
-
       #caret {
         margin-right: var(--uui-size-3, 9px);
         display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-combobox",
-  "version": "1.0.0-rc.3",
+  "version": "1.1.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,11 +30,11 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.0.0-rc.3",
-    "@umbraco-ui/uui-button": "1.0.0-rc.3",
-    "@umbraco-ui/uui-combobox-list": "1.0.0-rc.3",
-    "@umbraco-ui/uui-icon": "1.0.0-rc.3",
-    "@umbraco-ui/uui-scroll-container": "1.0.0-rc.3"
+    "@umbraco-ui/uui-base": "1.0.0",
+    "@umbraco-ui/uui-button": "1.0.0",
+    "@umbraco-ui/uui-combobox-list": "1.0.0",
+    "@umbraco-ui/uui-icon": "1.0.0",
+    "@umbraco-ui/uui-scroll-container": "1.0.0"
   },
   "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": "7d643a3d5f7204efbc3aaad83889c2fd5200af73"
+  "gitHead": "6bd054ecff37c2b7ddfe2beed0f83bf29c58501d"
 }