@nectary/components 3.0.0 → 3.1.0

package/lib/cjs/dialog/index.js

@@ -10,6 +10,7 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 (0, _utils.defineCustomElement)('sinch-dialog', class extends _utils.NectaryElement {
   #$dialog;
+  #$dialogContent;
   #$closeButton;
   #$caption;
   #$actionWrapper;
@@ -20,6 +21,7 @@ template.innerHTML = templateHTML;
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$dialog = shadowRoot.querySelector('#dialog');
+    this.#$dialogContent = shadowRoot.querySelector('#content');
     this.#$closeButton = shadowRoot.querySelector('#close');
     this.#$caption = shadowRoot.querySelector('#caption');
     this.#$actionWrapper = shadowRoot.querySelector('#action');
@@ -100,12 +102,16 @@ template.innerHTML = templateHTML;
     return (0, _utils.getRect)(this.#$closeButton);
   }
   #onCancel = e => {
-    e.preventDefault();
+    if (e.cancelable) {
+      e.preventDefault();
+    } else {
+      this.#onCollapse();
+    }
     e.stopPropagation();
-    this.#dispatchCloseEvent('escape');
+    this.#dispatchCloseEvent('escape', e.cancelable);
   };
   #onCloseClick = () => {
-    this.#dispatchCloseEvent('close');
+    this.#dispatchCloseEvent('close', true);
   };
   #onBackdropMouseDown = e => {
     if ((0, _utils.isTargetEqual)(e, this.#$dialog)) {
@@ -113,16 +119,17 @@ template.innerHTML = templateHTML;
       const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
       if (!isInside) {
         e.stopPropagation();
-        this.#dispatchCloseEvent('backdrop');
+        this.#dispatchCloseEvent('backdrop', e.cancelable);
       }
     }
   };
   #onCloseReactHandler = e => {
     (0, _utils.getReactEventHandler)(this, 'on-close')?.(e);
   };
-  #dispatchCloseEvent(detail) {
+  #dispatchCloseEvent(detail, cancelable) {
     this.dispatchEvent(new CustomEvent('-close', {
-      detail
+      detail,
+      cancelable
     }));
   }
   #onExpand() {
@@ -136,6 +143,7 @@ template.innerHTML = templateHTML;
     if (!this.#$dialog.open) {
       return;
     }
+    this.#$dialogContent.scrollTo(0, 0);
     this.#$dialog.close?.();
     (0, _utils2.enableScroll)();
   }

package/lib/cjs/select-menu/index.js

@@ -17,6 +17,7 @@ template.innerHTML = templateHTML;
   #$notFound;
   #controller = null;
   #searchDebounce;
+  #userManagedSearch = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -26,7 +27,7 @@ template.innerHTML = templateHTML;
     this.#$search = shadowRoot.querySelector('#search');
     this.#$searchClear = shadowRoot.querySelector('#search-clear');
     this.#$notFound = shadowRoot.querySelector('#not-found');
-    this.#searchDebounce = (0, _utils.debounceTimeout)(200)(this.#updateSearch);
+    this.#searchDebounce = (0, _utils.debounceTimeout)(200)(this.#updateSearchValue);
   }
   connectedCallback() {
     this.#controller = new AbortController();
@@ -54,7 +55,7 @@ template.innerHTML = templateHTML;
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['value', 'rows', 'multiple', 'search-placeholder'];
+    return ['value', 'rows', 'multiple', 'search-value', 'search-placeholder'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -82,6 +83,13 @@ template.innerHTML = templateHTML;
           (0, _utils.updateAttribute)(this.#$search, 'placeholder', newVal);
           break;
         }
+      case 'search-value':
+        {
+          (0, _utils.updateAttribute)(this.#$search, 'value', newVal);
+          this.#userManagedSearch = true;
+          this.#updateSearchList(newVal !== null ? newVal : '');
+          break;
+        }
     }
   }
   set value(value) {
@@ -115,6 +123,13 @@ template.innerHTML = templateHTML;
   get 'search-placeholder'() {
     return (0, _utils.getAttribute)(this.#$search, 'placeholder', '');
   }
+  set 'search-value'(value) {
+    (0, _utils.updateAttribute)(this, 'search-value', value);
+    this.#userManagedSearch = true;
+  }
+  get 'search-value'() {
+    return (0, _utils.getAttribute)(this, 'search-value', '');
+  }
   get focusable() {
     return true;
   }
@@ -136,35 +151,46 @@ template.innerHTML = templateHTML;
     }
   };
   #onSearchChange = e => {
-    this.#$search.value = e.detail;
-    this.#searchDebounce.fn();
+    if (!this.#userManagedSearch) {
+      this.#$search.value = e.detail;
+      this.#searchDebounce.fn();
+    } else {
+      this.#updateSearchValue(e.detail);
+    }
     (0, _utils.setClass)(this.#$searchClear, 'active', e.detail.length > 0);
   };
   #onSearchClearClick = () => {
-    this.#$search.value = '';
+    if (!this.#userManagedSearch) {
+      this.#$search.value = '';
+      this.#searchDebounce.fn();
+    } else {
+      this.#updateSearchValue('');
+    }
     this.#$search.focus();
-    this.#searchDebounce.fn();
     (0, _utils.setClass)(this.#$searchClear, 'active', false);
   };
-  #updateSearch = () => {
-    const searchValue = this.#$search.value.toLowerCase();
+  #updateSearchValue = newValue => {
+    const searchValue = newValue === undefined ? this.#$search.value.toLowerCase() : newValue;
     const searchChangedEvent = new CustomEvent('-search-change', {
-      detail: searchValue,
+      detail: newValue,
       cancelable: true
     });
     this.dispatchEvent(searchChangedEvent);
     if (!searchChangedEvent.defaultPrevented) {
-      const $options = this.#getOptionElements();
-      let someFound = false;
-      for (const $opt of $options) {
-        const isHidden = searchValue.length > 0 && !$opt.matchesSearch(searchValue);
-        someFound ||= !isHidden;
-        (0, _utils.setClass)($opt, 'hidden', isHidden);
-      }
-      (0, _utils.setClass)(this.#$notFound, 'active', !someFound);
-      this.#selectOption(null);
+      this.#updateSearchList(searchValue);
     }
   };
+  #updateSearchList = searchValue => {
+    const $options = this.#getOptionElements();
+    let someFound = false;
+    for (const $opt of $options) {
+      const isHidden = searchValue.length > 0 && !$opt.matchesSearch(searchValue);
+      someFound ||= !isHidden;
+      (0, _utils.setClass)($opt, 'hidden', isHidden);
+    }
+    (0, _utils.setClass)(this.#$notFound, 'active', !someFound);
+    this.#selectOption(null);
+  };
   #onContextKeyDown = e => {
     this.#handleKeydown(e.detail);
   };

package/lib/cjs/select-menu/types.d.ts

@@ -10,6 +10,8 @@ export type TSinchSelectMenuElement = HTMLElement & {
     searchable: boolean | null;
     /** Text for search bar's placeholder */
     'search-placeholder': string;
+    /** Optionally control search value manually */
+    'search-value': string;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Change value event */
@@ -36,6 +38,8 @@ export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement>
     'aria-label': string;
     /** Change value handler */
     'on-search-change'?: (e: CustomEvent<string>) => void;
+    /** Optionally control search value manually */
+    'search-value'?: string;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/lib/cjs/select-menu-option/index.js

@@ -65,7 +65,7 @@ class SelectMenuOption extends _utils.NectaryElement {
     return (0, _utils.getBooleanAttribute)(this, 'disabled');
   }
   matchesSearch(searchValue) {
-    return this.text.toLowerCase().includes(searchValue);
+    return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }
 }
 exports.SelectMenuOption = SelectMenuOption;

package/lib/esm/dialog/index.js

@@ -8,6 +8,7 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', class extends NectaryElement {
   #$dialog;
+  #$dialogContent;
   #$closeButton;
   #$caption;
   #$actionWrapper;
@@ -18,6 +19,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$dialog = shadowRoot.querySelector('#dialog');
+    this.#$dialogContent = shadowRoot.querySelector('#content');
     this.#$closeButton = shadowRoot.querySelector('#close');
     this.#$caption = shadowRoot.querySelector('#caption');
     this.#$actionWrapper = shadowRoot.querySelector('#action');
@@ -98,12 +100,16 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     return getRect(this.#$closeButton);
   }
   #onCancel = e => {
-    e.preventDefault();
+    if (e.cancelable) {
+      e.preventDefault();
+    } else {
+      this.#onCollapse();
+    }
     e.stopPropagation();
-    this.#dispatchCloseEvent('escape');
+    this.#dispatchCloseEvent('escape', e.cancelable);
   };
   #onCloseClick = () => {
-    this.#dispatchCloseEvent('close');
+    this.#dispatchCloseEvent('close', true);
   };
   #onBackdropMouseDown = e => {
     if (isTargetEqual(e, this.#$dialog)) {
@@ -111,16 +117,17 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
       const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
       if (!isInside) {
         e.stopPropagation();
-        this.#dispatchCloseEvent('backdrop');
+        this.#dispatchCloseEvent('backdrop', e.cancelable);
       }
     }
   };
   #onCloseReactHandler = e => {
     getReactEventHandler(this, 'on-close')?.(e);
   };
-  #dispatchCloseEvent(detail) {
+  #dispatchCloseEvent(detail, cancelable) {
     this.dispatchEvent(new CustomEvent('-close', {
-      detail
+      detail,
+      cancelable
     }));
   }
   #onExpand() {
@@ -134,6 +141,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     if (!this.#$dialog.open) {
       return;
     }
+    this.#$dialogContent.scrollTo(0, 0);
     this.#$dialog.close?.();
     enableScroll();
   }

package/lib/esm/select-menu/index.js

@@ -15,6 +15,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #$notFound;
   #controller = null;
   #searchDebounce;
+  #userManagedSearch = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -24,7 +25,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.#$search = shadowRoot.querySelector('#search');
     this.#$searchClear = shadowRoot.querySelector('#search-clear');
     this.#$notFound = shadowRoot.querySelector('#not-found');
-    this.#searchDebounce = debounceTimeout(200)(this.#updateSearch);
+    this.#searchDebounce = debounceTimeout(200)(this.#updateSearchValue);
   }
   connectedCallback() {
     this.#controller = new AbortController();
@@ -52,7 +53,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['value', 'rows', 'multiple', 'search-placeholder'];
+    return ['value', 'rows', 'multiple', 'search-value', 'search-placeholder'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -80,6 +81,13 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
           updateAttribute(this.#$search, 'placeholder', newVal);
           break;
         }
+      case 'search-value':
+        {
+          updateAttribute(this.#$search, 'value', newVal);
+          this.#userManagedSearch = true;
+          this.#updateSearchList(newVal !== null ? newVal : '');
+          break;
+        }
     }
   }
   set value(value) {
@@ -113,6 +121,13 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   get 'search-placeholder'() {
     return getAttribute(this.#$search, 'placeholder', '');
   }
+  set 'search-value'(value) {
+    updateAttribute(this, 'search-value', value);
+    this.#userManagedSearch = true;
+  }
+  get 'search-value'() {
+    return getAttribute(this, 'search-value', '');
+  }
   get focusable() {
     return true;
   }
@@ -134,35 +149,46 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     }
   };
   #onSearchChange = e => {
-    this.#$search.value = e.detail;
-    this.#searchDebounce.fn();
+    if (!this.#userManagedSearch) {
+      this.#$search.value = e.detail;
+      this.#searchDebounce.fn();
+    } else {
+      this.#updateSearchValue(e.detail);
+    }
     setClass(this.#$searchClear, 'active', e.detail.length > 0);
   };
   #onSearchClearClick = () => {
-    this.#$search.value = '';
+    if (!this.#userManagedSearch) {
+      this.#$search.value = '';
+      this.#searchDebounce.fn();
+    } else {
+      this.#updateSearchValue('');
+    }
     this.#$search.focus();
-    this.#searchDebounce.fn();
     setClass(this.#$searchClear, 'active', false);
   };
-  #updateSearch = () => {
-    const searchValue = this.#$search.value.toLowerCase();
+  #updateSearchValue = newValue => {
+    const searchValue = newValue === undefined ? this.#$search.value.toLowerCase() : newValue;
     const searchChangedEvent = new CustomEvent('-search-change', {
-      detail: searchValue,
+      detail: newValue,
       cancelable: true
     });
     this.dispatchEvent(searchChangedEvent);
     if (!searchChangedEvent.defaultPrevented) {
-      const $options = this.#getOptionElements();
-      let someFound = false;
-      for (const $opt of $options) {
-        const isHidden = searchValue.length > 0 && !$opt.matchesSearch(searchValue);
-        someFound ||= !isHidden;
-        setClass($opt, 'hidden', isHidden);
-      }
-      setClass(this.#$notFound, 'active', !someFound);
-      this.#selectOption(null);
+      this.#updateSearchList(searchValue);
     }
   };
+  #updateSearchList = searchValue => {
+    const $options = this.#getOptionElements();
+    let someFound = false;
+    for (const $opt of $options) {
+      const isHidden = searchValue.length > 0 && !$opt.matchesSearch(searchValue);
+      someFound ||= !isHidden;
+      setClass($opt, 'hidden', isHidden);
+    }
+    setClass(this.#$notFound, 'active', !someFound);
+    this.#selectOption(null);
+  };
   #onContextKeyDown = e => {
     this.#handleKeydown(e.detail);
   };

package/lib/esm/select-menu/types.d.ts

@@ -10,6 +10,8 @@ export type TSinchSelectMenuElement = HTMLElement & {
     searchable: boolean | null;
     /** Text for search bar's placeholder */
     'search-placeholder': string;
+    /** Optionally control search value manually */
+    'search-value': string;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Change value event */
@@ -36,6 +38,8 @@ export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement>
     'aria-label': string;
     /** Change value handler */
     'on-search-change'?: (e: CustomEvent<string>) => void;
+    /** Optionally control search value manually */
+    'search-value'?: string;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/lib/esm/select-menu-option/index.js

@@ -59,7 +59,7 @@ export class SelectMenuOption extends NectaryElement {
     return getBooleanAttribute(this, 'disabled');
   }
   matchesSearch(searchValue) {
-    return this.text.toLowerCase().includes(searchValue);
+    return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }
 }
 defineCustomElement('sinch-select-menu-option', SelectMenuOption);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "files": [
     "lib"
   ],