@revolist/revo-dropdown - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-86f0170b.js');
+const index = require('./index-6d759245.js');
 
@@ -18,3 +18,3 @@ /*
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["revo-dropdown_2.cjs",[[0,"revo-dropdown",{"dataLabel":[1,"data-label"],"value":[1032],"dataId":[1,"data-id"],"autoClose":[4,"auto-close"],"source":[16],"placeholder":[1],"appendTo":[1,"append-to"],"filter":[1],"maxHeight":[2,"max-height"],"hasFilter":[4,"has-filter"],"autocomplete":[4],"autoFocus":[4,"auto-focus"],"currentItem":[32],"isVisible":[32],"doClose":[64],"doOpen":[64],"doChange":[64]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]],[0,"revo-list",{"sourceItems":[16],"isFocused":[4,"is-focused"],"dataLabel":[1,"data-label"],"currentItem":[32],"refresh":[64]},[[4,"keydown","onKey"]]]]]], options);
+  return index.bootstrapLazy([["revo-dropdown_2.cjs",[[0,"revo-dropdown",{"dataLabel":[1,"data-label"],"value":[1032],"currentFilter":[1032,"current-filter"],"dataId":[1,"data-id"],"autoClose":[4,"auto-close"],"source":[16],"placeholder":[1],"appendTo":[1,"append-to"],"filter":[1],"maxHeight":[2,"max-height"],"hasFilter":[4,"has-filter"],"autocomplete":[4],"autoFocus":[4,"auto-focus"],"currentItem":[32],"isVisible":[32],"doClose":[64],"doOpen":[64],"doChange":[64]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]],[0,"revo-list",{"sourceItems":[16],"isFocused":[4,"is-focused"],"dataLabel":[1,"data-label"],"currentItem":[32],"refresh":[64]},[[4,"keydown","onKey"]]]]]], options);
   });
@@ -21,0 +21,0 @@ };

dist/cjs/revo-dropdown_2.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-86f0170b.js');
+const index = require('./index-6d759245.js');
 
@@ -74,5 +74,6 @@ (function closest() {
   filterChange(p.filterValue);
-  return (index.h("input", Object.assign({ class: {
-      'filter-box': true,
-    }, type: "text" }, p, { onClick: e => {
+  if (p.autocomplete) {
+    p.value = p.filterValue;
+  }
+  return (index.h("input", Object.assign({ class: { 'filter-box': true, }, type: "text" }, p, { onClick: e => {
       e.preventDefault();
@@ -103,3 +104,3 @@ p.onClick && p.onClick(e);
     this.uuid = '';
-    this.currentFilter = '';
+    this.isClosing = false;
     this.currentItem = null;
@@ -135,7 +136,10 @@ this.isVisible = false;
    */
-  async doClose() {
-    const event = this.close.emit();
-    if (event.defaultPrevented) {
-      return;
+  async doClose(isDisconnected = false) {
+    if (!isDisconnected) {
+      const event = this.close.emit();
+      if (event.defaultPrevented) {
+        return;
+      }
     }
+    this.isClosing = true;
     this.isVisible = false;
@@ -195,2 +199,7 @@ }
   }
+  componentWillLoad() {
+    if (this.value) {
+      this.currentItem = this.value;
+    }
+  }
   connectedCallback() {
@@ -203,6 +212,5 @@ this.uuid = `${new Date().getTime()}-rvdropdown`;
   disconnectedCallback() {
-    this.doClose();
+    this.doClose(true);
   }
   componentDidRender() {
-    var _a;
     if (this.dropdown && this.appendTo === 'body') {
@@ -219,3 +227,3 @@ document.body.appendChild(this.dropdown);
       if (this.autocomplete) {
-        (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus();
+        setTimeout(() => { var _a; return (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
       }
@@ -233,7 +241,8 @@ }
   renderSelect() {
-    return index.h("input", { type: "text", disabled: true, class: "filter-box", value: (this.currentItem && getItemLabel(this.currentItem, this.dataLabel)) || '' });
+    const val = this.currentItem && getItemLabel(this.currentItem, this.dataLabel) || '';
+    return index.h("input", { type: "text", disabled: true, class: "filter-box", value: val });
   }
   renderAutocomplete() {
     const val = this.currentItem ? getItemLabel(this.currentItem, this.dataLabel) : '';
-    return (index.h(DropdownListFilter, { ref: e => (this.autocompleteInput = e), source: this.source, filter: this.filter, dataLabel: this.dataLabel, value: val, filterValue: this.currentFilter, onKeyDown: e => {
+    return (index.h(DropdownListFilter, { ref: e => (this.autocompleteInput = e), autocomplete: 'true', source: this.source, filter: this.filter, dataLabel: this.dataLabel, value: val, filterValue: this.currentFilter, onKeyDown: e => {
         if (this.isVisible) {
@@ -262,6 +271,6 @@ return;
   showAutoComplete() {
-    if (!this.isVisible) {
-      this.currentFilter = '';
+    if (!this.isVisible && !this.isClosing) {
       this.isVisible = true;
     }
+    this.isClosing = false;
   }
@@ -274,7 +283,15 @@ render() {
     }
-    const props = Object.assign({ [UUID]: this.uuid }, (this.autocomplete ? { ['autocomplete']: true } : undefined));
-    return (index.h(index.Host, Object.assign({}, props, { class: {
+    const props = {
+      [UUID]: this.uuid,
+      class: {
         active: this.isVisible,
         shrink: this.isVisible || !!this.currentItem || !!((_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.value),
-      }, ref: e => (this.element = e), onClick: e => this.selectClick(e) }), index.h("label", null, this.placeholder), index.h("div", { class: "rv-dr-root" }, this.autocomplete ? this.renderAutocomplete() : this.renderSelect(), index.h("span", { class: "actions" }, index.h(ArrowRenderer, null)), index.h("fieldset", null, index.h("legend", null, index.h("span", null, this.placeholder)))), list));
+      },
+      ref: e => (this.element = e),
+      onClick: e => this.selectClick(e)
+    };
+    if (this.autocomplete) {
+      props['autocomplete'] = true;
+    }
+    return (index.h(index.Host, Object.assign({}, props), index.h("label", null, this.placeholder), index.h("div", { class: "rv-dr-root" }, this.autocomplete ? this.renderAutocomplete() : this.renderSelect(), index.h("span", { class: "actions" }, index.h(ArrowRenderer, null)), index.h("fieldset", null, index.h("legend", null, index.h("span", null, this.placeholder)))), list));
   }
@@ -281,0 +298,0 @@ selectClick(e) {

dist/cjs/revo-dropdown.cjs.js

 'use strict';
 
-const index = require('./index-86f0170b.js');
+const index = require('./index-6d759245.js');
 
@@ -18,3 +18,3 @@ /*
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["revo-dropdown_2.cjs",[[0,"revo-dropdown",{"dataLabel":[1,"data-label"],"value":[1032],"dataId":[1,"data-id"],"autoClose":[4,"auto-close"],"source":[16],"placeholder":[1],"appendTo":[1,"append-to"],"filter":[1],"maxHeight":[2,"max-height"],"hasFilter":[4,"has-filter"],"autocomplete":[4],"autoFocus":[4,"auto-focus"],"currentItem":[32],"isVisible":[32],"doClose":[64],"doOpen":[64],"doChange":[64]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]],[0,"revo-list",{"sourceItems":[16],"isFocused":[4,"is-focused"],"dataLabel":[1,"data-label"],"currentItem":[32],"refresh":[64]},[[4,"keydown","onKey"]]]]]], options);
+  return index.bootstrapLazy([["revo-dropdown_2.cjs",[[0,"revo-dropdown",{"dataLabel":[1,"data-label"],"value":[1032],"currentFilter":[1032,"current-filter"],"dataId":[1,"data-id"],"autoClose":[4,"auto-close"],"source":[16],"placeholder":[1],"appendTo":[1,"append-to"],"filter":[1],"maxHeight":[2,"max-height"],"hasFilter":[4,"has-filter"],"autocomplete":[4],"autoFocus":[4,"auto-focus"],"currentItem":[32],"isVisible":[32],"doClose":[64],"doOpen":[64],"doChange":[64]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]],[0,"revo-list",{"sourceItems":[16],"isFocused":[4,"is-focused"],"dataLabel":[1,"data-label"],"currentItem":[32],"refresh":[64]},[[4,"keydown","onKey"]]]]]], options);
 });

dist/collection/components/dropdown/revo-dropdown.js

@@ -10,3 +10,3 @@ import { Component, Prop, h, State, Listen, Event, Method, Watch, Host } from '@stencil/core';
     this.uuid = '';
-    this.currentFilter = '';
+    this.isClosing = false;
     this.currentItem = null;
@@ -42,7 +42,10 @@ this.isVisible = false;
    */
-  async doClose() {
-    const event = this.close.emit();
-    if (event.defaultPrevented) {
-      return;
+  async doClose(isDisconnected = false) {
+    if (!isDisconnected) {
+      const event = this.close.emit();
+      if (event.defaultPrevented) {
+        return;
+      }
     }
+    this.isClosing = true;
     this.isVisible = false;
@@ -102,2 +105,7 @@ }
   }
+  componentWillLoad() {
+    if (this.value) {
+      this.currentItem = this.value;
+    }
+  }
   connectedCallback() {
@@ -110,6 +118,5 @@ this.uuid = `${new Date().getTime()}-rvdropdown`;
   disconnectedCallback() {
-    this.doClose();
+    this.doClose(true);
   }
   componentDidRender() {
-    var _a;
     if (this.dropdown && this.appendTo === 'body') {
@@ -126,3 +133,3 @@ document.body.appendChild(this.dropdown);
       if (this.autocomplete) {
-        (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus();
+        setTimeout(() => { var _a; return (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
       }
@@ -143,7 +150,8 @@ }
   renderSelect() {
-    return h("input", { type: "text", disabled: true, class: "filter-box", value: (this.currentItem && getItemLabel(this.currentItem, this.dataLabel)) || '' });
+    const val = this.currentItem && getItemLabel(this.currentItem, this.dataLabel) || '';
+    return h("input", { type: "text", disabled: true, class: "filter-box", value: val });
   }
   renderAutocomplete() {
     const val = this.currentItem ? getItemLabel(this.currentItem, this.dataLabel) : '';
-    return (h(DropdownListFilter, { ref: e => (this.autocompleteInput = e), source: this.source, filter: this.filter, dataLabel: this.dataLabel, value: val, filterValue: this.currentFilter, onKeyDown: e => {
+    return (h(DropdownListFilter, { ref: e => (this.autocompleteInput = e), autocomplete: 'true', source: this.source, filter: this.filter, dataLabel: this.dataLabel, value: val, filterValue: this.currentFilter, onKeyDown: e => {
         if (this.isVisible) {
@@ -172,6 +180,6 @@ return;
   showAutoComplete() {
-    if (!this.isVisible) {
-      this.currentFilter = '';
+    if (!this.isVisible && !this.isClosing) {
       this.isVisible = true;
     }
+    this.isClosing = false;
   }
@@ -184,7 +192,15 @@ render() {
     }
-    const props = Object.assign({ [UUID]: this.uuid }, (this.autocomplete ? { ['autocomplete']: true } : undefined));
-    return (h(Host, Object.assign({}, props, { class: {
+    const props = {
+      [UUID]: this.uuid,
+      class: {
         active: this.isVisible,
         shrink: this.isVisible || !!this.currentItem || !!((_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.value),
-      }, ref: e => (this.element = e), onClick: e => this.selectClick(e) }),
+      },
+      ref: e => (this.element = e),
+      onClick: e => this.selectClick(e)
+    };
+    if (this.autocomplete) {
+      props['autocomplete'] = true;
+    }
+    return (h(Host, Object.assign({}, props),
       h("label", null, this.placeholder),
@@ -303,2 +319,19 @@ h("div", { class: "rv-dr-root" },
     },
+    "currentFilter": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Filter value"
+      },
+      "attribute": "current-filter",
+      "reflect": false
+    },
     "dataId": {
@@ -537,4 +570,7 @@ "type": "string",
       "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
+        "signature": "(isDisconnected?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
         "references": {
@@ -541,0 +577,0 @@ "Promise": {

dist/collection/components/list/revo-list.filter.js

@@ -41,5 +41,6 @@ import { h } from '@stencil/core';
   filterChange(p.filterValue);
-  return (h("input", Object.assign({ class: {
-      'filter-box': true,
-    }, type: "text" }, p, { onClick: e => {
+  if (p.autocomplete) {
+    p.value = p.filterValue;
+  }
+  return (h("input", Object.assign({ class: { 'filter-box': true, }, type: "text" }, p, { onClick: e => {
       e.preventDefault();
@@ -46,0 +47,0 @@ p.onClick && p.onClick(e);

dist/custom-elements/index.js

@@ -70,5 +70,6 @@ import { h, createEvent, Host, proxyCustomElement } from '@stencil/core/internal/client';
   filterChange(p.filterValue);
-  return (h("input", Object.assign({ class: {
-      'filter-box': true,
-    }, type: "text" }, p, { onClick: e => {
+  if (p.autocomplete) {
+    p.value = p.filterValue;
+  }
+  return (h("input", Object.assign({ class: { 'filter-box': true, }, type: "text" }, p, { onClick: e => {
       e.preventDefault();
@@ -100,3 +101,3 @@ p.onClick && p.onClick(e);
     this.uuid = '';
-    this.currentFilter = '';
+    this.isClosing = false;
     this.currentItem = null;
@@ -132,7 +133,10 @@ this.isVisible = false;
    */
-  async doClose() {
-    const event = this.close.emit();
-    if (event.defaultPrevented) {
-      return;
+  async doClose(isDisconnected = false) {
+    if (!isDisconnected) {
+      const event = this.close.emit();
+      if (event.defaultPrevented) {
+        return;
+      }
     }
+    this.isClosing = true;
     this.isVisible = false;
@@ -192,2 +196,7 @@ }
   }
+  componentWillLoad() {
+    if (this.value) {
+      this.currentItem = this.value;
+    }
+  }
   connectedCallback() {
@@ -200,6 +209,5 @@ this.uuid = `${new Date().getTime()}-rvdropdown`;
   disconnectedCallback() {
-    this.doClose();
+    this.doClose(true);
   }
   componentDidRender() {
-    var _a;
     if (this.dropdown && this.appendTo === 'body') {
@@ -216,3 +224,3 @@ document.body.appendChild(this.dropdown);
       if (this.autocomplete) {
-        (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus();
+        setTimeout(() => { var _a; return (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
       }
@@ -230,7 +238,8 @@ }
   renderSelect() {
-    return h("input", { type: "text", disabled: true, class: "filter-box", value: (this.currentItem && getItemLabel(this.currentItem, this.dataLabel)) || '' });
+    const val = this.currentItem && getItemLabel(this.currentItem, this.dataLabel) || '';
+    return h("input", { type: "text", disabled: true, class: "filter-box", value: val });
   }
   renderAutocomplete() {
     const val = this.currentItem ? getItemLabel(this.currentItem, this.dataLabel) : '';
-    return (h(DropdownListFilter, { ref: e => (this.autocompleteInput = e), source: this.source, filter: this.filter, dataLabel: this.dataLabel, value: val, filterValue: this.currentFilter, onKeyDown: e => {
+    return (h(DropdownListFilter, { ref: e => (this.autocompleteInput = e), autocomplete: 'true', source: this.source, filter: this.filter, dataLabel: this.dataLabel, value: val, filterValue: this.currentFilter, onKeyDown: e => {
         if (this.isVisible) {
@@ -259,6 +268,6 @@ return;
   showAutoComplete() {
-    if (!this.isVisible) {
-      this.currentFilter = '';
+    if (!this.isVisible && !this.isClosing) {
       this.isVisible = true;
     }
+    this.isClosing = false;
   }
@@ -271,7 +280,15 @@ render() {
     }
-    const props = Object.assign({ [UUID]: this.uuid }, (this.autocomplete ? { ['autocomplete']: true } : undefined));
-    return (h(Host, Object.assign({}, props, { class: {
+    const props = {
+      [UUID]: this.uuid,
+      class: {
         active: this.isVisible,
         shrink: this.isVisible || !!this.currentItem || !!((_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.value),
-      }, ref: e => (this.element = e), onClick: e => this.selectClick(e) }), h("label", null, this.placeholder), h("div", { class: "rv-dr-root" }, this.autocomplete ? this.renderAutocomplete() : this.renderSelect(), h("span", { class: "actions" }, h(ArrowRenderer, null)), h("fieldset", null, h("legend", null, h("span", null, this.placeholder)))), list));
+      },
+      ref: e => (this.element = e),
+      onClick: e => this.selectClick(e)
+    };
+    if (this.autocomplete) {
+      props['autocomplete'] = true;
+    }
+    return (h(Host, Object.assign({}, props), h("label", null, this.placeholder), h("div", { class: "rv-dr-root" }, this.autocomplete ? this.renderAutocomplete() : this.renderSelect(), h("span", { class: "actions" }, h(ArrowRenderer, null)), h("fieldset", null, h("legend", null, h("span", null, this.placeholder)))), list));
   }
@@ -416,3 +433,3 @@ selectClick(e) {
 
-const RevoDropdown$1 = /*@__PURE__*/proxyCustomElement(RevoDropdown, [0,"revo-dropdown",{"dataLabel":[1,"data-label"],"value":[1032],"dataId":[1,"data-id"],"autoClose":[4,"auto-close"],"source":[16],"placeholder":[1],"appendTo":[1,"append-to"],"filter":[1],"maxHeight":[2,"max-height"],"hasFilter":[4,"has-filter"],"autocomplete":[4],"autoFocus":[4,"auto-focus"],"currentItem":[32],"isVisible":[32]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]]);
+const RevoDropdown$1 = /*@__PURE__*/proxyCustomElement(RevoDropdown, [0,"revo-dropdown",{"dataLabel":[1,"data-label"],"value":[1032],"currentFilter":[1032,"current-filter"],"dataId":[1,"data-id"],"autoClose":[4,"auto-close"],"source":[16],"placeholder":[1],"appendTo":[1,"append-to"],"filter":[1],"maxHeight":[2,"max-height"],"hasFilter":[4,"has-filter"],"autocomplete":[4],"autoFocus":[4,"auto-focus"],"currentItem":[32],"isVisible":[32]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]]);
 const RevoList = /*@__PURE__*/proxyCustomElement(RevoDropdownList, [0,"revo-list",{"sourceItems":[16],"isFocused":[4,"is-focused"],"dataLabel":[1,"data-label"],"currentItem":[32]},[[4,"keydown","onKey"]]]);
@@ -419,0 +436,0 @@ const defineCustomElements = (opts) => {

dist/esm/loader.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-e7599ce5.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d90c08e5.js';
 
@@ -13,3 +13,3 @@ /*
   return patchEsm().then(() => {
-  return bootstrapLazy([["revo-dropdown_2",[[0,"revo-dropdown",{"dataLabel":[1,"data-label"],"value":[1032],"dataId":[1,"data-id"],"autoClose":[4,"auto-close"],"source":[16],"placeholder":[1],"appendTo":[1,"append-to"],"filter":[1],"maxHeight":[2,"max-height"],"hasFilter":[4,"has-filter"],"autocomplete":[4],"autoFocus":[4,"auto-focus"],"currentItem":[32],"isVisible":[32],"doClose":[64],"doOpen":[64],"doChange":[64]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]],[0,"revo-list",{"sourceItems":[16],"isFocused":[4,"is-focused"],"dataLabel":[1,"data-label"],"currentItem":[32],"refresh":[64]},[[4,"keydown","onKey"]]]]]], options);
+  return bootstrapLazy([["revo-dropdown_2",[[0,"revo-dropdown",{"dataLabel":[1,"data-label"],"value":[1032],"currentFilter":[1032,"current-filter"],"dataId":[1,"data-id"],"autoClose":[4,"auto-close"],"source":[16],"placeholder":[1],"appendTo":[1,"append-to"],"filter":[1],"maxHeight":[2,"max-height"],"hasFilter":[4,"has-filter"],"autocomplete":[4],"autoFocus":[4,"auto-focus"],"currentItem":[32],"isVisible":[32],"doClose":[64],"doOpen":[64],"doChange":[64]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]],[0,"revo-list",{"sourceItems":[16],"isFocused":[4,"is-focused"],"dataLabel":[1,"data-label"],"currentItem":[32],"refresh":[64]},[[4,"keydown","onKey"]]]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/esm/revo-dropdown_2.entry.js

@@ -1,2 +0,2 @@
-import { h, r as registerInstance, c as createEvent, H as Host } from './index-e7599ce5.js';
+import { h, r as registerInstance, c as createEvent, H as Host } from './index-d90c08e5.js';
 
@@ -69,5 +69,6 @@ (function closest() {
   filterChange(p.filterValue);
-  return (h("input", Object.assign({ class: {
-      'filter-box': true,
-    }, type: "text" }, p, { onClick: e => {
+  if (p.autocomplete) {
+    p.value = p.filterValue;
+  }
+  return (h("input", Object.assign({ class: { 'filter-box': true, }, type: "text" }, p, { onClick: e => {
       e.preventDefault();
@@ -98,3 +99,3 @@ p.onClick && p.onClick(e);
     this.uuid = '';
-    this.currentFilter = '';
+    this.isClosing = false;
     this.currentItem = null;
@@ -130,7 +131,10 @@ this.isVisible = false;
    */
-  async doClose() {
-    const event = this.close.emit();
-    if (event.defaultPrevented) {
-      return;
+  async doClose(isDisconnected = false) {
+    if (!isDisconnected) {
+      const event = this.close.emit();
+      if (event.defaultPrevented) {
+        return;
+      }
     }
+    this.isClosing = true;
     this.isVisible = false;
@@ -190,2 +194,7 @@ }
   }
+  componentWillLoad() {
+    if (this.value) {
+      this.currentItem = this.value;
+    }
+  }
   connectedCallback() {
@@ -198,6 +207,5 @@ this.uuid = `${new Date().getTime()}-rvdropdown`;
   disconnectedCallback() {
-    this.doClose();
+    this.doClose(true);
   }
   componentDidRender() {
-    var _a;
     if (this.dropdown && this.appendTo === 'body') {
@@ -214,3 +222,3 @@ document.body.appendChild(this.dropdown);
       if (this.autocomplete) {
-        (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus();
+        setTimeout(() => { var _a; return (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
       }
@@ -228,7 +236,8 @@ }
   renderSelect() {
-    return h("input", { type: "text", disabled: true, class: "filter-box", value: (this.currentItem && getItemLabel(this.currentItem, this.dataLabel)) || '' });
+    const val = this.currentItem && getItemLabel(this.currentItem, this.dataLabel) || '';
+    return h("input", { type: "text", disabled: true, class: "filter-box", value: val });
   }
   renderAutocomplete() {
     const val = this.currentItem ? getItemLabel(this.currentItem, this.dataLabel) : '';
-    return (h(DropdownListFilter, { ref: e => (this.autocompleteInput = e), source: this.source, filter: this.filter, dataLabel: this.dataLabel, value: val, filterValue: this.currentFilter, onKeyDown: e => {
+    return (h(DropdownListFilter, { ref: e => (this.autocompleteInput = e), autocomplete: 'true', source: this.source, filter: this.filter, dataLabel: this.dataLabel, value: val, filterValue: this.currentFilter, onKeyDown: e => {
         if (this.isVisible) {
@@ -257,6 +266,6 @@ return;
   showAutoComplete() {
-    if (!this.isVisible) {
-      this.currentFilter = '';
+    if (!this.isVisible && !this.isClosing) {
       this.isVisible = true;
     }
+    this.isClosing = false;
   }
@@ -269,7 +278,15 @@ render() {
     }
-    const props = Object.assign({ [UUID]: this.uuid }, (this.autocomplete ? { ['autocomplete']: true } : undefined));
-    return (h(Host, Object.assign({}, props, { class: {
+    const props = {
+      [UUID]: this.uuid,
+      class: {
         active: this.isVisible,
         shrink: this.isVisible || !!this.currentItem || !!((_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.value),
-      }, ref: e => (this.element = e), onClick: e => this.selectClick(e) }), h("label", null, this.placeholder), h("div", { class: "rv-dr-root" }, this.autocomplete ? this.renderAutocomplete() : this.renderSelect(), h("span", { class: "actions" }, h(ArrowRenderer, null)), h("fieldset", null, h("legend", null, h("span", null, this.placeholder)))), list));
+      },
+      ref: e => (this.element = e),
+      onClick: e => this.selectClick(e)
+    };
+    if (this.autocomplete) {
+      props['autocomplete'] = true;
+    }
+    return (h(Host, Object.assign({}, props), h("label", null, this.placeholder), h("div", { class: "rv-dr-root" }, this.autocomplete ? this.renderAutocomplete() : this.renderSelect(), h("span", { class: "actions" }, h(ArrowRenderer, null)), h("fieldset", null, h("legend", null, h("span", null, this.placeholder)))), list));
   }
@@ -276,0 +293,0 @@ selectClick(e) {

dist/esm/revo-dropdown.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-e7599ce5.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d90c08e5.js';
 
@@ -16,3 +16,3 @@ /*
 patchBrowser().then(options => {
-  return bootstrapLazy([["revo-dropdown_2",[[0,"revo-dropdown",{"dataLabel":[1,"data-label"],"value":[1032],"dataId":[1,"data-id"],"autoClose":[4,"auto-close"],"source":[16],"placeholder":[1],"appendTo":[1,"append-to"],"filter":[1],"maxHeight":[2,"max-height"],"hasFilter":[4,"has-filter"],"autocomplete":[4],"autoFocus":[4,"auto-focus"],"currentItem":[32],"isVisible":[32],"doClose":[64],"doOpen":[64],"doChange":[64]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]],[0,"revo-list",{"sourceItems":[16],"isFocused":[4,"is-focused"],"dataLabel":[1,"data-label"],"currentItem":[32],"refresh":[64]},[[4,"keydown","onKey"]]]]]], options);
+  return bootstrapLazy([["revo-dropdown_2",[[0,"revo-dropdown",{"dataLabel":[1,"data-label"],"value":[1032],"currentFilter":[1032,"current-filter"],"dataId":[1,"data-id"],"autoClose":[4,"auto-close"],"source":[16],"placeholder":[1],"appendTo":[1,"append-to"],"filter":[1],"maxHeight":[2,"max-height"],"hasFilter":[4,"has-filter"],"autocomplete":[4],"autoFocus":[4,"auto-focus"],"currentItem":[32],"isVisible":[32],"doClose":[64],"doOpen":[64],"doChange":[64]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]],[0,"revo-list",{"sourceItems":[16],"isFocused":[4,"is-focused"],"dataLabel":[1,"data-label"],"currentItem":[32],"refresh":[64]},[[4,"keydown","onKey"]]]]]], options);
 });

dist/revo-dropdown/revo-dropdown.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as o}from"./p-8852c126.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-8aaeb236",[[0,"revo-dropdown",{dataLabel:[1,"data-label"],value:[1032],dataId:[1,"data-id"],autoClose:[4,"auto-close"],source:[16],placeholder:[1],appendTo:[1,"append-to"],filter:[1],maxHeight:[2,"max-height"],hasFilter:[4,"has-filter"],autocomplete:[4],autoFocus:[4,"auto-focus"],currentItem:[32],isVisible:[32],doClose:[64],doOpen:[64],doChange:[64]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]],[0,"revo-list",{sourceItems:[16],isFocused:[4,"is-focused"],dataLabel:[1,"data-label"],currentItem:[32],refresh:[64]},[[4,"keydown","onKey"]]]]]],e)));
+import{p as e,b as o}from"./p-be42af9e.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-489501c9",[[0,"revo-dropdown",{dataLabel:[1,"data-label"],value:[1032],currentFilter:[1032,"current-filter"],dataId:[1,"data-id"],autoClose:[4,"auto-close"],source:[16],placeholder:[1],appendTo:[1,"append-to"],filter:[1],maxHeight:[2,"max-height"],hasFilter:[4,"has-filter"],autocomplete:[4],autoFocus:[4,"auto-focus"],currentItem:[32],isVisible:[32],doClose:[64],doOpen:[64],doChange:[64]},[[5,"mousedown","onMouseUp"],[4,"keydown","onKey"]]],[0,"revo-list",{sourceItems:[16],isFocused:[4,"is-focused"],dataLabel:[1,"data-label"],currentItem:[32],refresh:[64]},[[4,"keydown","onKey"]]]]]],e)));

dist/types/components.d.ts

@@ -21,2 +21,6 @@ /* eslint-disable */
         /**
+          * Filter value
+         */
+        "currentFilter": any;
+        /**
           * Define object mapping for id/value
@@ -36,3 +40,3 @@ */
          */
-        "doClose": () => Promise<void>;
+        "doClose": (isDisconnected?: boolean) => Promise<void>;
         /**
@@ -105,2 +109,6 @@ * Open dropdown
         /**
+          * Filter value
+         */
+        "currentFilter"?: any;
+        /**
           * Define object mapping for id/value
@@ -107,0 +115,0 @@ */

dist/types/components/dropdown/revo-dropdown.d.ts

@@ -8,7 +8,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
   private dropdownInput;
-  autocompleteInput: HTMLInputElement;
+  private autocompleteInput;
   private revoList;
   private uuid;
-  private currentFilter;
   private currentSource?;
+  private isClosing;
   currentItem: any;
@@ -25,2 +25,6 @@ isVisible: boolean;
   /**
+   * Filter value
+   */
+  currentFilter: any;
+  /**
    * Define object mapping for id/value
@@ -71,3 +75,3 @@ */
    */
-  doClose(): Promise<void>;
+  doClose(isDisconnected?: boolean): Promise<void>;
   /**
@@ -85,2 +89,3 @@ * Open dropdown
   onValueChanged(newVal: any): void;
+  componentWillLoad(): void;
   connectedCallback(): void;
@@ -87,0 +92,0 @@ disconnectedCallback(): void;

dist/types/components/list/revo-list.filter.d.ts

@@ -8,2 +8,3 @@ import { JSXBase } from '../../stencil-public-runtime';
   filter?: 'contains' | 'start';
+  autocomplete?: string;
   ref?(e: HTMLInputElement): void;
@@ -10,0 +11,0 @@ onInput?(): void;

package.json

 {
   "name": "@revolist/revo-dropdown",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Minimalistic dropdown with keyboard support and search",
@@ -31,8 +31,6 @@ "main": "dist/index.cjs.js",
   },
-  "dependencies": {
-    "@stencil/core": "^2.0.1",
-    "@stencil/sass": "^1.3.2"
-  },
   "license": "MIT",
   "devDependencies": {
+    "@stencil/core": "^2.0.1",
+    "@stencil/sass": "^1.3.2",
     "husky": "^5.0.0-beta.0",
@@ -39,0 +37,0 @@ "prettier": "^2.1.2",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

503588

increased by0.54%

Dependency count

0

decreased by-100%

Lines of code

12300

increased by0.89%

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Dev dependency count

5

increased by66.67%

Dependency changes

• - Removed@stencil/core@^2.0.1

• - Removed@stencil/sass@^1.3.2

• - Removed@stencil/core@2.22.3(transitive)

• - Removed@stencil/sass@1.5.2(transitive)