@nectary/components 0.26.0 → 0.27.0

package/dropdown/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$target, _$optionSlot, _$listbox, _isConnected, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _isOpen, _updateOrientation, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _getEnabledOptionElements, _dispatchChangeEvent, _dispatchCloseEvent, _onCancel, _onCloseReactHandler;
+var _$optionSlot, _$listbox, _$popover, _onListboxClick, _onListboxKeyDown, _onOptionSlotChange, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _findSelectedOption, _getEnabledOptionElements, _dispatchChangeEvent, _onOpen, _onClose, _onReactClose;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,35 +11,24 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
-import dialogPolyfill from 'dialog-polyfill';
-import { isDropdownOptionElement } from '../dropdown-option';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}dialog{outline:0;border:none;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto;contain:content;padding:0;border-radius:4px;cursor:pointer}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}::slotted(*){display:block}</style><div id="wrapper"><div id="target" aria-haspopup="listbox" aria-expanded="false"><slot name="target"></slot></div><dialog id="listbox" tabindex="-1"><slot name="option"></slot></dialog></div>';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}sinch-popover{width:100%}</style><sinch-popover><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
 const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const ITEM_HEIGHT = 40;
-
-const findSelectedOption = elements => {
-  for (const el of elements) {
-    if (el.selected) {
-      return el;
-    }
-  }
-
-  return null;
-};
-
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _isConnected = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _dispatchCloseEvent = new WeakSet(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-dropdown', (_$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$popover = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _findSelectedOption = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _onOpen = new WeakSet(), _onClose = new WeakMap(), _onReactClose = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
+    _classPrivateMethodInitSpec(this, _onOpen);
 
     _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
 
     _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
 
+    _classPrivateMethodInitSpec(this, _findSelectedOption);
+
     _classPrivateMethodInitSpec(this, _getOptionElements);
 
     _classPrivateMethodInitSpec(this, _getOptionWithValue);
@@ -56,19 +45,6 @@ defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot =
 
     _classPrivateMethodInitSpec(this, _onValueChange);
 
-    _classPrivateMethodInitSpec(this, _updateOrientation);
-
-    _classPrivateMethodInitSpec(this, _isOpen);
-
-    _classPrivateMethodInitSpec(this, _onCollapse);
-
-    _classPrivateMethodInitSpec(this, _onExpand);
-
-    _classPrivateFieldInitSpec(this, _$target, {
-      writable: true,
-      value: void 0
-    });
-
     _classPrivateFieldInitSpec(this, _$optionSlot, {
       writable: true,
       value: void 0
@@ -79,26 +55,17 @@ defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot =
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _isConnected, {
+    _classPrivateFieldInitSpec(this, _$popover, {
       writable: true,
-      value: false
+      value: void 0
     });
 
     _classPrivateFieldInitSpec(this, _onListboxClick, {
       writable: true,
       value: e => {
-        const rect = this.dropdownRect;
-        const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
-
-        if (!isInside) {
-          _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
-
-          return;
-        }
-
         const $elem = e.target;
 
-        if ($elem !== _classPrivateFieldGet(this, _$listbox) && isDropdownOptionElement($elem)) {
+        if (!$elem.disabled) {
           e.stopPropagation();
 
           _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $elem);
@@ -106,7 +73,7 @@ defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot =
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onListboxKeyPress, {
+    _classPrivateFieldInitSpec(this, _onListboxKeyDown, {
       writable: true,
       value: e => {
         switch (e.code) {
@@ -115,18 +82,11 @@ defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot =
             {
               e.preventDefault();
 
-              _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, findSelectedOption(_classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this)));
+              _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this)));
 
               break;
             }
-        }
-      }
-    });
 
-    _classPrivateFieldInitSpec(this, _onListboxKeyDown, {
-      writable: true,
-      value: e => {
-        switch (e.code) {
           case 'ArrowUp':
           case 'ArrowLeft':
             {
@@ -157,16 +117,16 @@ defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot =
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onCancel, {
+    _classPrivateFieldInitSpec(this, _onClose, {
       writable: true,
-      value: e => {
-        e.preventDefault();
-
-        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+      value: () => {
+        this.dispatchEvent(new CustomEvent('close', {
+          bubbles: true
+        }));
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
+    _classPrivateFieldInitSpec(this, _onReactClose, {
       writable: true,
       value: () => {
         getReactEventHandler(this, 'onClose')?.();
@@ -176,57 +136,29 @@ defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot =
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
-    _classPrivateFieldSet(this, _$target, shadowRoot.querySelector('#target'));
+    _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
 
     _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
 
-    _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
-
-    dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$listbox));
+    _classPrivateFieldSet(this, _$popover, shadowRoot.querySelector('sinch-popover'));
   }
 
   connectedCallback() {
-    _classPrivateFieldSet(this, _isConnected, true);
-
     this.setAttribute('role', 'listbox');
 
-    _classPrivateFieldGet(this, _$listbox).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
-
-    _classPrivateFieldGet(this, _$listbox).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
-
-    _classPrivateFieldGet(this, _$listbox).addEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
-
     _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
 
-    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
-
-    if (getBooleanAttribute(this, 'open')) {
-      _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-    } else {
-      _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-    }
+    this.addEventListener('close', _classPrivateFieldGet(this, _onReactClose));
   }
 
   disconnectedCallback() {
-    _classPrivateFieldSet(this, _isConnected, false);
-
-    _classPrivateFieldGet(this, _$listbox).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
-
-    _classPrivateFieldGet(this, _$listbox).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
-
-    _classPrivateFieldGet(this, _$listbox).removeEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
-
     _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
 
-    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onReactClose));
   }
 
   static get observedAttributes() {
-    return ['value', 'maxvisibleitems', 'open', 'orientation'];
+    return ['open', 'value', 'orientation', 'maxvisibleitems'];
   }
 
   get nodeName() {
@@ -265,20 +197,38 @@ defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot =
     return getBooleanAttribute(this, 'open');
   }
 
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+
   get dropdownRect() {
-    return getRect(_classPrivateFieldGet(this, _$listbox));
+    return _classPrivateFieldGet(this, _$popover).popoverRect;
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'open':
         {
-          if (_classPrivateFieldGet(this, _isConnected)) {
-            if (isAttrTrue(newVal)) {
-              _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-            } else {
-              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-            }
+          updateAttribute(_classPrivateFieldGet(this, _$popover), 'open', newVal);
+
+          if (isAttrTrue(newVal)) {
+            _classPrivateMethodGet(this, _onOpen, _onOpen2).call(this);
+
+            _classPrivateFieldGet(this, _$popover).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+
+            _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+
+            _classPrivateFieldGet(this, _$popover).addEventListener('close', _classPrivateFieldGet(this, _onClose));
+          } else {
+            _classPrivateFieldGet(this, _$popover).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+
+            _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+
+            _classPrivateFieldGet(this, _$popover).removeEventListener('close', _classPrivateFieldGet(this, _onClose));
           }
 
           break;
@@ -286,10 +236,7 @@ defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot =
 
       case 'orientation':
         {
-          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-            _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
-          }
-
+          updateAttribute(_classPrivateFieldGet(this, _$popover), 'orientation', newVal);
           break;
         }
 
@@ -318,79 +265,22 @@ defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot =
     }
   }
 
-  focus() {}
-
-  blur() {}
-
 }));
 
-function _onExpand2() {
-  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
-
-  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-    _classPrivateFieldGet(this, _$listbox).showModal();
-  }
-
-  _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
-
-  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, this.value) ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
-}
-
-function _onCollapse2() {
-  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
-
-  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-    _classPrivateFieldGet(this, _$listbox).close?.();
-  }
-}
-
-function _isOpen2() {
-  return _classPrivateFieldGet(this, _isConnected) && getBooleanAttribute(_classPrivateFieldGet(this, _$listbox), 'open');
-}
-
-function _updateOrientation2() {
-  _classPrivateFieldGet(this, _$listbox).style.transform = `initial`;
-  _classPrivateFieldGet(this, _$listbox).style.width = `max-content`;
-
-  const buttonRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
-
-  const modalRect = _classPrivateFieldGet(this, _$listbox).getBoundingClientRect();
-
-  const width = Math.max(modalRect.width, buttonRect.width);
-  const widthDiff = Math.max(buttonRect.width - modalRect.width, 0);
-  let leftOffset = 0;
-  let topOffset = 0;
-  const orient = this.orientation;
-
-  if (orient === 'bottom-right' || orient === 'top-right') {
-    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x - modalRect.x + widthDiff * 0.5));
-  }
-
-  if (orient === 'bottom-left' || orient === 'top-left') {
-    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x + buttonRect.width - modalRect.x - modalRect.width - widthDiff * 0.5));
-  }
-
-  if (orient === 'bottom-left' || orient === 'bottom-right') {
-    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y + buttonRect.height - modalRect.y + 8));
-  }
-
-  if (orient === 'top-left' || orient === 'top-right') {
-    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y - modalRect.y - modalRect.height - 8));
-  }
+function _onValueChange2(csv) {
+  if (this.multiple) {
+    const values = getCsvSet(csv);
 
-  _classPrivateFieldGet(this, _$listbox).style.transform = `translateX(${leftOffset}px) translateY(${topOffset}px)`;
-  _classPrivateFieldGet(this, _$listbox).style.width = `${width}px`;
-}
-
-function _onValueChange2(value) {
-  let $checkedOption = null;
-
-  for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
-    const isChecked = $checkedOption === null && $option.disabled !== true && $option.value === value;
-    $option.checked = isChecked;
+    for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
+      const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+      updateBooleanAttribute($option, 'checked', isChecked);
+    }
+  } else {
+    const value = getFirstCsvValue(csv);
 
-    if (isChecked) {
-      $checkedOption = $option;
+    for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
+      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+      updateBooleanAttribute($option, 'checked', isChecked);
     }
   }
 }
@@ -406,7 +296,8 @@ function _getLastOption2() {
 function _getNextOption2() {
   const $options = _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this);
 
-  const $selectedOption = findSelectedOption($options);
+  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
+
   const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
 
   if (currentIndex < 0) {
@@ -419,7 +310,8 @@ function _getNextOption2() {
 function _getPrevOption2() {
   const $options = _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this);
 
-  const $selectedOption = findSelectedOption($options);
+  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
+
   const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
 
   if (currentIndex < 0) {
@@ -434,7 +326,7 @@ function _selectOption2($option) {
     const isSelected = $op === $option;
     $op.selected = isSelected;
 
-    if (isSelected) {
+    if (isSelected && this.maxVisibleItems !== null) {
       $op.scrollIntoView?.({
         block: 'nearest'
       });
@@ -443,6 +335,10 @@ function _selectOption2($option) {
 }
 
 function _getOptionWithValue2(value) {
+  if (value === null) {
+    return null;
+  }
+
   for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
     if ($option.disabled !== true && $option.value === value) {
       return $option;
@@ -459,7 +355,17 @@ function _getOptionElements2() {
     $elements = $elements[0].assignedElements();
   }
 
-  return $elements.filter(isDropdownOptionElement);
+  return $elements;
+}
+
+function _findSelectedOption2(elements) {
+  for (const el of elements) {
+    if (el.selected) {
+      return el;
+    }
+  }
+
+  return null;
 }
 
 function _getEnabledOptionElements2() {
@@ -467,16 +373,28 @@ function _getEnabledOptionElements2() {
 }
 
 function _dispatchChangeEvent2($opt) {
-  if ($opt != null) {
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: $opt.value,
-      bubbles: true
-    }));
+  if ($opt === null) {
+    return;
   }
-}
 
-function _dispatchCloseEvent2() {
-  this.dispatchEvent(new CustomEvent('close', {
+  const value = $opt.value;
+  const result = this.multiple ? updateCsv(this.value, value, !$opt.checked) : value;
+  this.dispatchEvent(new CustomEvent('change', {
+    detail: result,
     bubbles: true
   }));
+}
+
+function _onOpen2() {
+  const $opt = _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, getFirstCsvValue(this.value));
+
+  if ($opt !== null) {
+    _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, $opt);
+
+    $opt.scrollIntoView?.({
+      block: 'nearest'
+    });
+  } else {
+    _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
+  }
 }

package/dropdown-checkbox-option/index.d.ts

@@ -0,0 +1,24 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchDropdownCheckboxOptionElement = HTMLElement & {
+    value: string;
+    text: string;
+    checked: boolean;
+    selected: boolean;
+    disabled: boolean;
+};
+export declare type TSinchDropdownCheckboxOptionReact = TSinchElementReact<TSinchDropdownCheckboxOptionElement> & {
+    value: string;
+    text: string;
+    disabled?: boolean;
+    'aria-label': string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-dropdown-checkbox-option': TSinchDropdownCheckboxOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-dropdown-checkbox-option': TSinchDropdownCheckboxOptionElement;
+    }
+}

package/dropdown-checkbox-option/index.js

@@ -0,0 +1,96 @@
+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 { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:4px 12px 4px 6px;align-items:center;gap:6px;user-select:none;cursor:pointer}#text{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-container{position:relative;width:32px;height:32px}#icon-container::before{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:2px;pointer-events:none;background-color:var(--sinch-color-snow-100);box-shadow:0 0 0 2px var(--sinch-color-stormy-300) inset;transition:background-color .1s linear}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-color-snow-100)}:host([checked]:not([checked=false])) #icon-container::before{background-color:var(--sinch-color-tropical-500);box-shadow:0 0 0 2px var(--sinch-color-tropical-500) inset}:host([checked]:not([checked=false])) #icon-checkmark{opacity:1}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial}:host([disabled]:not([disabled=false])) #icon-container::before{box-shadow:0 0 0 2px var(--sinch-color-stormy-100) inset}@media (prefers-reduced-motion){#icon-checkmark,#icon-container::before{transition:none}}</style><div id="wrapper"><div id="icon-container"><svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z"/></svg></div><span id="text"></span></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-dropdown-checkbox-option', (_$text = new WeakMap(), class extends NectaryElement {
+  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'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'option');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'checked'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'checked':
+        {
+          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+        }
+    }
+  }
+
+  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');
+  }
+
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+
+  set selected(isSelected) {
+    updateBooleanAttribute(this, 'data-selected', isSelected);
+  }
+
+  get selected() {
+    return getBooleanAttribute(this, 'data-selected');
+  }
+
+}));

package/dropdown-radio-option/index.d.ts

@@ -0,0 +1,24 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchDropdownRadioOptionElement = HTMLElement & {
+    value: string;
+    text: string;
+    checked: boolean;
+    selected: boolean;
+    disabled: boolean;
+};
+export declare type TSinchDropdownRadioOptionReact = TSinchElementReact<TSinchDropdownRadioOptionElement> & {
+    value: string;
+    text: string;
+    disabled?: boolean;
+    'aria-label': string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-dropdown-radio-option': TSinchDropdownRadioOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-dropdown-radio-option': TSinchDropdownRadioOptionElement;
+    }
+}