@nectary/components 2.8.6 → 2.8.8

package/accordion/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, getTargetByAttribute } from '../utils';
+import { NectaryElement, defineCustomElement, getAttribute, getBooleanAttribute, getFirstCsvValue, getReactEventHandler, getTargetByAttribute, unpackCsv, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}::slotted(sinch-accordion-item){flex-shrink:1}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/accordion-item/index.d.ts

@@ -1,6 +1,6 @@
 import '../icon';
-import '../title';
 import '../text';
+import '../title';
 import type { TSinchAccordionItemElement, TSinchAccordionItemReact } from './types';
 declare global {
     namespace JSX {

package/accordion-item/index.js

@@ -1,6 +1,6 @@
 import '../icon';
-import '../title';
 import '../text';
+import '../title';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:0 4px 0 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 import { statusValues } from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "2.8.6",
+  "version": "2.8.8",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/select-menu/index.js

@@ -41,6 +41,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.#$search.addEventListener('-change', this.#onSearchChange, options);
     this.#$searchClear.addEventListener('-click', this.#onSearchClearClick, options);
     this.#$optionSlot.addEventListener('slotchange', this.#onOptionSlotChange, options);
+    this.addEventListener('-search-change', this.#onSearchChangeReactHandler, options);
     this.addEventListener('-change', this.#onChangeReactHandler, options);
     subscribeContext(this, 'keydown', this.#onContextKeyDown, this.#controller.signal);
     subscribeContext(this, 'visibility', this.#onContextVisibility, this.#controller.signal);
@@ -52,7 +53,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['value', 'rows', 'multiple'];
+    return ['value', 'rows', 'multiple', 'search-placeholder'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -75,6 +76,11 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
           });
           break;
         }
+      case 'search-placeholder':
+        {
+          updateAttribute(this.#$search, 'placeholder', newVal);
+          break;
+        }
     }
   }
   set value(value) {
@@ -95,6 +101,19 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   get multiple() {
     return getBooleanAttribute(this, 'multiple');
   }
+  set searchable(isSearchable) {
+    updateBooleanAttribute(this, 'searchable', isSearchable);
+  }
+  get searchable() {
+    const searchableAttribute = this.getAttribute('searchable');
+    return searchableAttribute === null ? searchableAttribute : isAttrTrue(searchableAttribute);
+  }
+  set 'search-placeholder'(placeholder) {
+    updateAttribute(this.#$search, 'placeholder', placeholder);
+  }
+  get 'search-placeholder'() {
+    return getAttribute(this.#$search, 'placeholder', '');
+  }
   get focusable() {
     return true;
   }
@@ -128,15 +147,22 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   };
   #updateSearch = () => {
     const searchValue = this.#$search.value.toLowerCase();
-    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);
+    const searchChangedEvent = new CustomEvent('-search-change', {
+      detail: searchValue,
+      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);
     }
-    setClass(this.#$notFound, 'active', !someFound);
-    this.#selectOption(null);
   };
   #onContextKeyDown = e => {
     this.#handleKeydown(e.detail);
@@ -179,7 +205,10 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     }
   }
   #onOptionSlotChange = () => {
-    const isSearchActive = this.#$optionSlot.assignedElements().length >= NUM_ITEMS_SEARCH;
+    const searchable = this.searchable;
+    const options = this.#$optionSlot.assignedElements();
+    const isEnoughOptions = options.length >= NUM_ITEMS_SEARCH;
+    const isSearchActive = isEnoughOptions && searchable !== false || Boolean(searchable);
     if (!isSearchActive) {
       updateAttribute(this.#$search, 'value', null);
     }
@@ -304,4 +333,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
+  #onSearchChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-search-change')?.(e);
+  };
 });

package/select-menu/types.d.ts

@@ -6,8 +6,14 @@ export type TSinchSelectMenuElement = HTMLElement & {
     rows: number | null;
     /** Allows multiple selection */
     multiple: boolean;
+    /** Enforce the search bar appearing, by default it appears above a certain number of options  */
+    searchable: boolean | null;
+    /** Text for search bar's placeholder */
+    'search-placeholder': string;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Change value event */
+    addEventListener(type: '-search-change', listener: (e: CustomEvent<string>) => void): void;
     /** Selected value, CSV when multiple */
     setAttribute(name: 'value', value: string): void;
     /** How many rows to show and scroll the rest */
@@ -22,8 +28,14 @@ export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement>
     rows?: number;
     /** Allows multiple selection */
     multiple?: boolean;
+    /** Enforce the search bar appearing, by default it appears above a certain number of options  */
+    searchable?: boolean | null;
+    /** Text for search bar's placeholder */
+    'search-placeholder'?: string;
     /** Label that is used for a11y */
     'aria-label': string;
     /** Change value handler */
+    'on-search-change'?: (e: CustomEvent<string>) => void;
+    /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/types.d.ts

@@ -1,4 +1,4 @@
-import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react'
+import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react';
 
 export type TSinchElementReact<TElement> =
   Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> &