@nectary/components 0.38.0 → 0.40.0

package/action-menu/index.js

@@ -1,295 +1,251 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$optionSlot, _$listbox, _$popover, _onListboxKeyDown, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements, _findSelectedOption, _getEnabledOptionElements, _onClose, _onReactClose;
-
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-
-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"); } }
-
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
-import { orientationValues } from '../popover/utils';
-import '../popover';
-import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{width:100%;--sinch-popover-shape-radius:var(--sinch-shape-radius-s)}#listbox{overflow-y:auto}</style><sinch-popover id="wrapper"><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
+import { isSinchActionMenuOption } from '../action-menu-option/utils';
+import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, NectaryElement, updateBooleanAttribute, 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-action-menu', (_$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$popover = new WeakMap(), _onListboxKeyDown = new WeakMap(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), _findSelectedOption = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _onClose = new WeakMap(), _onReactClose = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-action-menu', class extends NectaryElement {
+  #$optionSlot;
+  #$listbox;
+  #controller = new AbortController();
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
-
-    _classPrivateMethodInitSpec(this, _findSelectedOption);
-
-    _classPrivateMethodInitSpec(this, _getOptionElements);
-
-    _classPrivateMethodInitSpec(this, _selectOption);
-
-    _classPrivateMethodInitSpec(this, _getPrevOption);
-
-    _classPrivateMethodInitSpec(this, _getNextOption);
-
-    _classPrivateMethodInitSpec(this, _getLastOption);
-
-    _classPrivateMethodInitSpec(this, _getFirstOption);
-
-    _classPrivateFieldInitSpec(this, _$optionSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$listbox, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$popover, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onListboxKeyDown, {
-      writable: true,
-      value: e => {
-        switch (e.code) {
-          case 'Enter':
-            {
-              const $opt = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this));
-
-              if ($opt !== null) {
-                e.preventDefault();
-                $opt.click();
-              }
-
-              break;
-            }
-
-          case 'ArrowUp':
-            {
-              e.preventDefault();
-
-              _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this));
-
-              break;
-            }
-
-          case 'ArrowDown':
-            {
-              e.preventDefault();
-
-              _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this));
-
-              break;
-            }
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onClose, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-close'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onReactClose, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'onClose')?.();
-        getReactEventHandler(this, 'on-close')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
-
-    _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
-
-    _classPrivateFieldSet(this, _$popover, shadowRoot.querySelector('sinch-popover'));
+    this.#$optionSlot = shadowRoot.querySelector('slot');
+    this.#$listbox = shadowRoot.querySelector('#listbox');
   }
 
   connectedCallback() {
+    const {
+      signal
+    } = this.#controller;
     this.setAttribute('role', 'listbox');
-    this.addEventListener('-close', _classPrivateFieldGet(this, _onReactClose));
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('-keydown', this.#onContextKeyDown, {
+      signal
+    });
+    this.addEventListener('-visibility', this.#onContextVisibility, {
+      signal
+    });
+    this.addEventListener('keydown', this.#onListboxKeyDown, {
+      signal
+    });
+    this.addEventListener('blur', this.#onListboxBlur, {
+      signal
+    });
+    this.#$listbox.addEventListener('click', this.#onListboxClick, {
+      signal
+    });
+    this.dispatchEvent(new CustomEvent('-context-connect-keydown', {
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-context-connect-visibility', {
+      bubbles: true
+    }));
   }
 
   disconnectedCallback() {
-    this.removeEventListener('-close', _classPrivateFieldGet(this, _onReactClose));
+    this.dispatchEvent(new CustomEvent('-context-disconnect-keydown', {
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-context-disconnect-visibility', {
+      bubbles: true
+    }));
+    this.#controller.abort();
   }
 
   static get observedAttributes() {
-    return ['open', 'orientation', 'maxvisibleitems', 'modal'];
-  }
-
-  get nodeName() {
-    return 'select';
-  }
-
-  set maxVisibleItems(value) {
-    updateIntegerAttribute(this, 'maxvisibleitems', value);
-  }
-
-  get maxVisibleItems() {
-    return getIntegerAttribute(this, 'maxvisibleitems', null);
+    return ['rows'];
   }
 
-  get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-right');
+  set rows(value) {
+    updateIntegerAttribute(this, 'rows', value);
   }
 
-  set orientation(value) {
-    updateLiteralAttribute(this, orientationValues, 'orientation', value);
-  }
-
-  set open(isOpen) {
-    updateBooleanAttribute(this, 'open', isOpen);
-  }
-
-  get open() {
-    return getBooleanAttribute(this, 'open');
-  }
-
-  set modal(isModal) {
-    updateBooleanAttribute(this, 'modal', isModal);
-  }
-
-  get modal() {
-    return getBooleanAttribute(this, 'modal');
-  }
-
-  get dropdownRect() {
-    return _classPrivateFieldGet(this, _$popover).popoverRect;
+  get rows() {
+    return getIntegerAttribute(this, 'rows', null);
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
-      case 'open':
+      case 'rows':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$popover), 'open', newVal);
-
-          if (isAttrTrue(newVal)) {
-            _classPrivateFieldGet(this, _$popover).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+          this.#$listbox.style.maxHeight = attrValueToPixels(newVal, {
+            min: 1,
+            itemSizeMultiplier: ITEM_HEIGHT
+          });
+          break;
+        }
+    }
+  }
 
-            _classPrivateFieldGet(this, _$popover).addEventListener('-close', _classPrivateFieldGet(this, _onClose));
-          } else {
-            _classPrivateFieldGet(this, _$popover).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+  #onListboxBlur = () => {
+    this.#selectOption(null);
+  };
+  #onListboxClick = e => {
+    if (isSinchActionMenuOption(e.target)) {
+      this.#selectOption(e.target);
+    }
+  };
+  #onListboxKeyDown = e => {
+    this.#handleKeydown(e);
+  };
+  #onContextKeyDown = e => {
+    this.#handleKeydown(e.detail);
+  };
+  #onContextVisibility = e => {
+    if (!e.detail) {
+      this.#selectOption(null);
+      this.#$listbox.scrollTo({
+        top: 0,
+        behavior: 'auto'
+      });
+    }
+  };
 
-            _classPrivateFieldGet(this, _$popover).removeEventListener('-close', _classPrivateFieldGet(this, _onClose));
+  #handleKeydown(e) {
+    switch (e.code) {
+      case 'Enter':
+        {
+          const $opt = this.#findSelectedOption();
 
-            _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, null);
+          if ($opt !== null) {
+            e.preventDefault();
+            $opt.click();
           }
 
           break;
         }
 
-      case 'orientation':
+      case 'ArrowUp':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$popover), 'orientation', newVal);
-          break;
-        }
-
-      case 'maxvisibleitems':
-        {
-          if (newVal === '0') {
-            _classPrivateFieldGet(this, _$listbox).style.maxHeight = 'unset';
-          } else {
-            _classPrivateFieldGet(this, _$listbox).style.maxHeight = attrValueToPixels(newVal, {
-              min: 2,
-              multiplier: ITEM_HEIGHT
-            });
-          }
-
+          e.preventDefault();
+          this.#selectOption(this.#getPrevOption());
           break;
         }
 
-      case 'modal':
+      case 'ArrowDown':
         {
-          updateBooleanAttribute(_classPrivateFieldGet(this, _$popover), 'modal', isAttrTrue(newVal));
+          e.preventDefault();
+          this.#selectOption(this.#getNextOption());
           break;
         }
     }
   }
 
-}));
+  #getFirstOption() {
+    const $options = this.#getOptionElements();
 
-function _getFirstOption2() {
-  return _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this)[0] ?? null;
-}
+    for (let i = 0; i < $options.length; i++) {
+      const el = $options[i];
 
-function _getLastOption2() {
-  return _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this).reverse()[0] ?? null;
-}
+      if (!getBooleanAttribute(el, 'disabled')) {
+        return el;
+      }
+    }
 
-function _getNextOption2() {
-  const $options = _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this);
+    return null;
+  }
 
-  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
+  #getLastOption() {
+    const $options = this.#getOptionElements();
 
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    for (let i = $options.length - 1; i >= 0; i--) {
+      const el = $options[i];
 
-  if (currentIndex < 0) {
-    return _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
+      if (!getBooleanAttribute(el, 'disabled')) {
+        return el;
+      }
+    }
+
+    return null;
   }
 
-  return $options[(currentIndex + 1) % $options.length];
-}
+  #getNextOption() {
+    const index = this.#getSelectedOptionIndex();
 
-function _getPrevOption2() {
-  const $options = _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this);
+    if (index !== null) {
+      const $options = this.#getOptionElements();
 
-  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
+      for (let i = 1; i <= $options.length; i++) {
+        const el = $options[(i + index) % $options.length];
 
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+        if (!getBooleanAttribute(el, 'disabled')) {
+          return el;
+        }
+      }
+    }
 
-  if (currentIndex < 0) {
-    return _classPrivateMethodGet(this, _getLastOption, _getLastOption2).call(this);
+    return this.#getFirstOption();
   }
 
-  return $options[(currentIndex - 1 + $options.length) % $options.length];
-}
+  #getPrevOption() {
+    const index = this.#getSelectedOptionIndex();
 
-function _selectOption2($option) {
-  const hasMaxVisibleItems = this.hasAttribute('maxvisibleitems');
+    if (index !== null) {
+      const $options = this.#getOptionElements();
 
-  for (const $op of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
-    const isSelected = $op === $option;
-    updateBooleanAttribute($op, 'data-selected', isSelected);
+      for (let i = 1; i <= $options.length; i++) {
+        const el = $options[(index - i + $options.length) % $options.length];
 
-    if (isSelected && hasMaxVisibleItems) {
-      $op.scrollIntoView?.({
-        block: 'nearest'
-      });
+        if (!getBooleanAttribute(el, 'disabled')) {
+          return el;
+        }
+      }
     }
+
+    return this.#getLastOption();
   }
-}
 
-function _getOptionElements2() {
-  let $elements = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
+  #selectOption($option) {
+    const hasRows = this.hasAttribute('rows');
 
-  if ($elements.length === 1 && $elements[0].tagName === 'SLOT') {
-    $elements = $elements[0].assignedElements();
+    for (const $op of this.#getOptionElements()) {
+      const isSelected = $op === $option;
+      updateBooleanAttribute($op, 'data-selected', isSelected);
+
+      if (isSelected && hasRows) {
+        $op.scrollIntoView?.({
+          block: 'nearest'
+        });
+      }
+    }
   }
 
-  return $elements;
-}
+  #getOptionElements() {
+    return this.#$optionSlot.assignedElements();
+  }
 
-function _findSelectedOption2(elements) {
-  for (const el of elements) {
-    if (getBooleanAttribute(el, 'data-selected')) {
-      return el;
+  #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;
   }
 
-  return null;
-}
+  #findSelectedOption() {
+    const elements = this.#getOptionElements();
+
+    for (const el of elements) {
+      if (getBooleanAttribute(el, 'data-selected')) {
+        return el;
+      }
+    }
+
+    return null;
+  }
 
-function _getEnabledOptionElements2() {
-  return _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this).filter(opt => opt.disabled !== true);
-}
+});

package/action-menu/types.d.ts

@@ -1,23 +1,13 @@
-import type { TSinchPopoverOrientation } from '../popover/types';
-import type { TRect, TSinchElementReact } from '../types';
+import type { TSinchElementReact } from '../types';
 export declare type TSinchActionMenuElement = HTMLElement & {
-    open: boolean;
-    orientation: TSinchPopoverOrientation;
-    maxVisibleItems: number | null;
-    modal: boolean;
-    readonly dropdownRect: TRect;
-    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
-    setAttribute(name: 'open', value: ''): void;
-    setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
-    setAttribute(name: 'maxvisibleitems', value: string): void;
-    setAttribute(name: 'modal', value: boolean): void;
+    /** How many rows to show and scroll the rest */
+    rows: number | null;
+    /** How many rows to show and scroll the rest */
+    setAttribute(name: 'rows', value: string): void;
 };
 export declare type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
-    open: boolean;
-    orientation?: TSinchPopoverOrientation;
-    maxVisibleItems?: number;
-    modal?: boolean;
+    /** How many rows to show and scroll the rest */
+    rows?: number;
+    /** Label that is used for a11y */
     'aria-label': string;
-    onClose?: () => void;
-    'on-close'?: (e: CustomEvent<void>) => void;
 };

package/action-menu-option/index.d.ts

@@ -1,3 +1,4 @@
+import '../text';
 import type { TSinchActionMenuOptionElement, TSinchActionMenuOptionReact } from './types';
 declare global {
     namespace JSX {

package/action-menu-option/index.js

@@ -1,79 +1,40 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$wrapper, _$content, _onClick, _onMouseDown, _onClickReactHandler;
-
-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, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;font:inherit;color:inherit;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}: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;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
+import '../text';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;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-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;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></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$content = new WeakMap(), _onClick = new WeakMap(), _onMouseDown = new WeakMap(), _onClickReactHandler = new WeakMap(), class ActionMenuOption extends NectaryElement {
+defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends NectaryElement {
+  #$wrapper;
+  #$content;
+  #controller = new AbortController();
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$wrapper, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$content, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onClick, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-click'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onMouseDown, {
-      writable: true,
-      value: e => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.click();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onClickReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-click')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$wrapper, shadowRoot.querySelector('#wrapper'));
-
-    _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('#content'));
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    this.#$content = shadowRoot.querySelector('#content');
   }
 
   connectedCallback() {
+    const {
+      signal
+    } = this.#controller;
     this.setAttribute('role', 'option');
-
-    _classPrivateFieldGet(this, _$wrapper).addEventListener('mousedown', _classPrivateFieldGet(this, _onMouseDown));
-
-    this.addEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
-    this.addEventListener('click', _classPrivateFieldGet(this, _onClick));
+    this.#$wrapper.addEventListener('mousedown', this.#onMouseDown, {
+      signal
+    });
+    this.addEventListener('-click', this.#onClickReactHandler, {
+      signal
+    });
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$wrapper).removeEventListener('mousedown', _classPrivateFieldGet(this, _onMouseDown));
-
-    this.removeEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
-    this.removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+    this.#controller.abort();
   }
 
   static get observedAttributes() {
-    return ['text', 'disabled'];
+    return ['text', 'disabled', 'data-selected'];
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
@@ -84,7 +45,7 @@ defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$co
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$content).textContent = newVal;
+          this.#$content.textContent = newVal;
           break;
         }
 
@@ -93,6 +54,19 @@ defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$co
           updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
           break;
         }
+
+      case 'data-selected':
+        {
+          const isDisabled = getBooleanAttribute(this, 'disabled');
+
+          if (isDisabled) {
+            updateBooleanAttribute(this, 'aria-selected', false);
+          } else {
+            updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          }
+
+          break;
+        }
     }
   }
 
@@ -112,4 +86,19 @@ defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$co
     return getBooleanAttribute(this, 'disabled');
   }
 
-}));
+  click() {
+    this.#dispatchClickEvent();
+  }
+
+  #onMouseDown = () => {
+    this.#dispatchClickEvent();
+  };
+
+  #dispatchClickEvent() {
+    this.dispatchEvent(new CustomEvent('-click'));
+  }
+
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
+  };
+});