@nectary/components 0.38.0 → 0.40.0

package/select-menu/index.js

@@ -0,0 +1,346 @@
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
+const ITEM_HEIGHT = 40;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-select-menu', class extends NectaryElement {
+  #$optionSlot;
+  #$listbox;
+  #controller = new AbortController();
+
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$optionSlot = shadowRoot.querySelector('slot');
+    this.#$listbox = shadowRoot.querySelector('#listbox');
+  }
+
+  connectedCallback() {
+    const {
+      signal
+    } = this.#controller;
+    this.setAttribute('role', 'listbox');
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('keydown', this.#onListboxKeyDown, {
+      signal
+    });
+    this.addEventListener('-keydown', this.#onContexKeydown, {
+      signal
+    });
+    this.addEventListener('blur', this.#onListboxBlur, {
+      signal
+    });
+    this.#$listbox.addEventListener('mousedown', this.#onListboxMousedown, {
+      signal
+    });
+    this.#$listbox.addEventListener('click', this.#onListboxClick, {
+      signal
+    });
+    this.#$optionSlot.addEventListener('slotchange', this.#onOptionSlotChange, {
+      signal
+    });
+    this.addEventListener('-change', this.#onChangeReactHandler, {
+      signal
+    });
+    this.addEventListener('-visibility', this.#onContextVisibility, {
+      signal
+    });
+    this.dispatchEvent(new CustomEvent('-context-connect-keydown', {
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-context-connect-visibility', {
+      bubbles: true
+    }));
+  }
+
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.dispatchEvent(new CustomEvent('-context-disconnect-keydown', {
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-context-disconnect-visibility', {
+      bubbles: true
+    }));
+  }
+
+  static get observedAttributes() {
+    return ['value', 'rows', 'multiple'];
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set rows(value) {
+    updateIntegerAttribute(this, 'rows', value);
+  }
+
+  get rows() {
+    return getIntegerAttribute(this, 'rows', null);
+  }
+
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'multiple':
+        {
+          this.#onValueChange(this.value);
+          updateExplicitBooleanAttribute(this, 'aria-multiselectable', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'value':
+        {
+          this.#onValueChange(newVal ?? '');
+          break;
+        }
+
+      case 'rows':
+        {
+          this.#$listbox.style.maxHeight = attrValueToPixels(newVal, {
+            min: 2,
+            itemSizeMultiplier: ITEM_HEIGHT
+          });
+          break;
+        }
+    }
+  }
+
+  #onListboxMousedown = e => {
+    const $elem = e.target;
+
+    if (!getBooleanAttribute($elem, 'disabled')) {
+      this.#dispatchChangeEvent($elem);
+    }
+  };
+  #onListboxBlur = () => {
+    this.#selectOption(null);
+  };
+  #onListboxClick = e => {
+    const $elem = e.target;
+
+    if (!getBooleanAttribute($elem, 'disabled')) {
+      this.#selectOption($elem);
+    }
+  };
+  #onContexKeydown = e => {
+    this.#handleKeydown(e.detail);
+  };
+  #onContextVisibility = e => {
+    if (e.detail) {
+      this.#selectOption(this.#findCheckedOption());
+    } else {
+      this.#selectOption(null);
+    }
+  };
+  #onListboxKeyDown = e => {
+    this.#handleKeydown(e);
+  };
+
+  #handleKeydown(e) {
+    switch (e.code) {
+      case 'Space':
+      case 'Enter':
+        {
+          const $option = this.#findSelectedOption();
+
+          if ($option !== null) {
+            e.preventDefault();
+            this.#dispatchChangeEvent($option);
+          }
+
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          this.#selectOption(this.#getPrevOption());
+          break;
+        }
+
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          this.#selectOption(this.#getNextOption());
+          break;
+        }
+    }
+  }
+
+  #onOptionSlotChange = () => {
+    this.#onValueChange(this.value);
+  };
+
+  #onValueChange(csv) {
+    if (this.multiple) {
+      const values = getCsvSet(csv);
+
+      for (const $option of this.#getOptionElements()) {
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        updateBooleanAttribute($option, 'data-checked', isChecked);
+      }
+    } else {
+      const value = getFirstCsvValue(csv);
+
+      for (const $option of this.#getOptionElements()) {
+        const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+        updateBooleanAttribute($option, 'data-checked', isChecked);
+      }
+    }
+  }
+
+  #getFirstOption() {
+    const $options = this.#getOptionElements();
+
+    for (let i = 0; i < $options.length; i++) {
+      const el = $options[i];
+
+      if (!getBooleanAttribute(el, 'disabled')) {
+        return el;
+      }
+    }
+
+    return null;
+  }
+
+  #getLastOption() {
+    const $options = this.#getOptionElements();
+
+    for (let i = $options.length - 1; i >= 0; i--) {
+      const el = $options[i];
+
+      if (!getBooleanAttribute(el, 'disabled')) {
+        return el;
+      }
+    }
+
+    return null;
+  }
+
+  #getNextOption() {
+    const index = this.#getSelectedOptionIndex();
+
+    if (index !== null) {
+      const $options = this.#getOptionElements();
+
+      for (let i = 1; i <= $options.length; i++) {
+        const el = $options[(i + index) % $options.length];
+
+        if (!getBooleanAttribute(el, 'disabled')) {
+          return el;
+        }
+      }
+    }
+
+    return this.#getFirstOption();
+  }
+
+  #getPrevOption() {
+    const index = this.#getSelectedOptionIndex();
+
+    if (index !== null) {
+      const $options = this.#getOptionElements();
+
+      for (let i = 1; i <= $options.length; i++) {
+        const el = $options[(index - i + $options.length) % $options.length];
+
+        if (!getBooleanAttribute(el, 'disabled')) {
+          return el;
+        }
+      }
+    }
+
+    return this.#getLastOption();
+  }
+
+  #selectOption($option) {
+    const hasRows = this.hasAttribute('rows');
+
+    for (const $op of this.#getOptionElements()) {
+      const isSelected = $op === $option;
+      updateBooleanAttribute($op, 'data-selected', isSelected);
+
+      if (isSelected && hasRows) {
+        $op.scrollIntoView?.({
+          block: 'nearest'
+        });
+      }
+    }
+  }
+
+  #getOptionElements() {
+    return this.#$optionSlot.assignedElements();
+  }
+
+  #getSelectedOptionIndex() {
+    const elements = this.#getOptionElements();
+
+    for (let i = 0; i < elements.length; i++) {
+      const el = elements[i];
+
+      if (!getBooleanAttribute(el, 'disabled') && getBooleanAttribute(el, 'data-selected')) {
+        return i;
+      }
+    }
+
+    return null;
+  }
+
+  #findSelectedOption() {
+    const elements = this.#getOptionElements();
+
+    for (const el of elements) {
+      if (!getBooleanAttribute(el, 'disabled') && getBooleanAttribute(el, 'data-selected')) {
+        return el;
+      }
+    }
+
+    return null;
+  }
+
+  #findCheckedOption() {
+    const elements = this.#getOptionElements();
+    const value = this.multiple ? getFirstCsvValue(this.value) : this.value;
+
+    for (const $el of elements) {
+      if (!getBooleanAttribute($el, 'disabled') && getAttribute($el, 'value') === value) {
+        return $el;
+      }
+    }
+
+    return null;
+  }
+
+  #dispatchChangeEvent($opt) {
+    if ($opt === null) {
+      return;
+    }
+
+    const value = $opt.value;
+    const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($opt, 'data-checked')) : value;
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: result
+    }));
+  }
+
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/select-menu/types.d.ts

@@ -0,0 +1,29 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchSelectMenuElement = HTMLElement & {
+    /** Selected value, CSV when multiple */
+    value: string;
+    /** How many rows to show and scroll the rest */
+    rows: number | null;
+    /** Allows multiple selection */
+    multiple: boolean;
+    /** Change value event */
+    addEventListener(type: '-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 */
+    setAttribute(name: 'rows', value: string): void;
+    /** Allows multiple selection */
+    setAttribute(name: 'multiple', value: ''): void;
+};
+export declare type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement> & {
+    /** Selected value, CSV when multiple */
+    value: string;
+    /** How many rows to show and scroll the rest */
+    rows?: number;
+    /** Allows multiple selection */
+    multiple?: boolean;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/{dropdown-text-option → select-menu-option}/index.d.ts

@@ -1,7 +1,8 @@
 import '../icons/check';
+import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchDropdownTextOptionElement, TSinchDropdownTextOptionReact } from './types';
-export declare class DropdownTextOption extends NectaryElement {
+import type { TSinchSelectMenuOptionElement, TSinchSelectMenuOptionReact } from './types';
+export declare class SelectMenuOption extends NectaryElement {
     #private;
     constructor();
     connectedCallback(): void;
@@ -13,17 +14,14 @@ export declare class DropdownTextOption extends NectaryElement {
     get text(): string;
     set disabled(isDisabled: boolean);
     get disabled(): boolean;
-    set checked(isChecked: boolean);
-    get checked(): boolean;
-    get icon(): Element | null;
 }
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-dropdown-text-option': TSinchDropdownTextOptionReact;
+            'sinch-select-menu-option': TSinchSelectMenuOptionReact;
         }
     }
     interface HTMLElementTagNameMap {
-        'sinch-dropdown-text-option': TSinchDropdownTextOptionElement;
+        'sinch-select-menu-option': TSinchSelectMenuOptionElement;
     }
 }

package/select-menu-option/index.js

@@ -0,0 +1,76 @@
+import '../icons/check';
+import '../text';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex:1}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}#check{display:none;margin-right:-6px}:host([data-checked]) #check{display:block}:host([disabled])>#wrapper{cursor:initial;color:var(--sinch-color-text-disabled);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon-check id="check"></sinch-icon-check></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+export class SelectMenuOption extends NectaryElement {
+  #$content;
+
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$content = shadowRoot.querySelector('#content');
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'option');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'data-checked', 'disabled'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'text':
+        {
+          this.#$content.textContent = newVal;
+          break;
+        }
+
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+}
+defineCustomElement('sinch-select-menu-option', SelectMenuOption);

package/{select-option → select-menu-option}/types.d.ts

@@ -1,25 +1,24 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchSelectOptionElement = HTMLElement & {
+export declare type TSinchSelectMenuOptionElement = HTMLElement & {
     /** Value */
     value: string;
-    /** Text */
+    /** Display text */
     text: string;
-    /** Disabled */
+    /** Disabled state */
     disabled: boolean;
-    readonly icon: Element | null;
     /** Value */
     setAttribute(name: 'value', value: string): void;
-    /** Text */
+    /** Display text */
     setAttribute(name: 'text', value: string): void;
-    /** Disabled */
+    /** Disabled state */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchSelectOptionReact = TSinchElementReact<TSinchSelectOptionElement> & {
+export declare type TSinchSelectMenuOptionReact = TSinchElementReact<TSinchSelectMenuOptionElement> & {
     /** Value */
     value: string;
-    /** Text */
+    /** Display text */
     text: string;
-    /** Disabled */
+    /** Disabled state */
     disabled?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;

package/stop-events/index.js

@@ -1,23 +1,7 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-
-var _stopEvent;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import { defineCustomElement, getCsvSet } from '../utils';
-defineCustomElement('sinch-stop-events', (_stopEvent = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-stop-events', class extends HTMLElement {
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _stopEvent, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-      }
-    });
-
     this.style.display = 'contents';
   }
 
@@ -25,7 +9,7 @@ defineCustomElement('sinch-stop-events', (_stopEvent = new WeakMap(), class exte
     const events = getCsvSet(this.getAttribute('events'));
 
     for (const event of events) {
-      this.addEventListener(event, _classPrivateFieldGet(this, _stopEvent));
+      this.addEventListener(event, this.#stopEvent);
     }
   }
 
@@ -33,8 +17,11 @@ defineCustomElement('sinch-stop-events', (_stopEvent = new WeakMap(), class exte
     const events = getCsvSet(this.getAttribute('events'));
 
     for (const event of events) {
-      this.removeEventListener(event, _classPrivateFieldGet(this, _stopEvent));
+      this.removeEventListener(event, this.#stopEvent);
     }
   }
 
-}));
+  #stopEvent = e => {
+    e.stopPropagation();
+  };
+});

package/table-head-cell/index.js

@@ -1,30 +1,16 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import { alignValues } from '../table-cell/utils';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);vertical-align:middle;--sinch-color-icon:var(--sinch-color-stormy-200)}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);--sinch-icon-button-color:var(--sinch-color-stormy-100)}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200)}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host(:is([text=""],:not([text]))) #text{display:none}:host([fit]:not([fit=false])){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><span id="text"></span><slot name="tooltip"></slot><slot name="right"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-table-head-cell', class extends NectaryElement {
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   connectedCallback() {
@@ -40,7 +26,7 @@ defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class exte
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
     }
@@ -51,7 +37,7 @@ defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class exte
   }
 
   get text() {
-    return getAttribute(this, 'text', null);
+    return getAttribute(this, 'text');
   }
 
   set align(value) {
@@ -70,4 +56,4 @@ defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class exte
     return getBooleanAttribute(this, 'fit');
   }
 
-}));
+});