@nectary/components 0.32.0 → 0.34.0

package/popover/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$target, _$dialog, _isConnected, _resizeThrottle, _prevOverflowValue, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _onBackdropClick, _onCancel, _onCloseReactHandler, _dispatchCloseEvent;
+var _$target, _$dialog, _isConnected, _resizeThrottle, _prevOverflowValue, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _updateOrientationModal, _onBackdropMouseDown, _onCancel, _onCloseReactHandler, _onTargetKeydown, _dispatchCloseEvent;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -12,13 +12,13 @@ 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 { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, getCssVar, throttleAnimationFrame } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left:0;margin:0;outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-s);contain:content;padding:0;box-sizing:border-box;max-width:unset;max-height:unset}dialog:not([open]){display:none}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}#target{display:flex;flex-direction:column}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left:0;margin:0;outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-popover-shape-radius,var(--sinch-shape-radius-l));contain:content;padding:0;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1}dialog:not([open]){display:none}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}#target{display:flex;flex-direction:column}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
 import { orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const POPOVER_OFFSET = 4;
-defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _resizeThrottle = new WeakMap(), _prevOverflowValue = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _onResize = new WeakMap(), _updateOrientation = new WeakMap(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _resizeThrottle = new WeakMap(), _prevOverflowValue = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _onResize = new WeakMap(), _updateOrientation = new WeakMap(), _updateOrientationModal = new WeakMap(), _onBackdropMouseDown = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _onTargetKeydown = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -65,7 +65,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
     _classPrivateFieldInitSpec(this, _updateOrientation, {
       writable: true,
       value: () => {
-        _classPrivateFieldGet(this, _$dialog).style.width = 'fit-content';
+        _classPrivateFieldGet(this, _$dialog).style.width = 'max-content';
 
         const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
 
@@ -74,11 +74,43 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
         let leftPos = 0;
         let topPos = 0;
         const orient = this.orientation;
-        const shouldExpandWidthToTarget = getCssVar(this, '--sinch-popover-expand-width') !== null;
-        const largestWidth = Math.max(modalRect.width, targetRect.width);
-        const resultWidth = shouldExpandWidthToTarget ? largestWidth : modalRect.width;
+        const shouldExpandWidthToTarget = orient === 'top' || orient === 'bottom';
+        const resultWidth = shouldExpandWidthToTarget ? Math.max(modalRect.width, targetRect.width) : modalRect.width;
 
-        if (orient === 'bottom-right' || orient === 'top-right') {
+        if (orient === 'bottom-left' || orient === 'top-left') {
+          leftPos = targetRect.width - resultWidth;
+        }
+
+        if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
+          topPos = targetRect.height + POPOVER_OFFSET;
+        }
+
+        if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
+          topPos = -(modalRect.height + POPOVER_OFFSET);
+        }
+
+        _classPrivateFieldGet(this, _$dialog).style.left = `${leftPos}px`;
+        _classPrivateFieldGet(this, _$dialog).style.top = `${topPos}px`;
+        _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _updateOrientationModal, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$dialog).style.width = 'max-content';
+
+        const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
+
+        const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
+
+        let leftPos = 0;
+        let topPos = 0;
+        const orient = this.orientation;
+        const shouldExpandWidthToTarget = orient === 'top' || orient === 'bottom';
+        const resultWidth = shouldExpandWidthToTarget ? Math.max(modalRect.width, targetRect.width) : modalRect.width;
+
+        if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top' || orient === 'bottom') {
           leftPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.x, window.innerWidth - resultWidth - POPOVER_OFFSET));
         }
 
@@ -86,11 +118,11 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
           leftPos = Math.max(POPOVER_OFFSET, targetRect.right - resultWidth);
         }
 
-        if (orient === 'bottom-left' || orient === 'bottom-right') {
+        if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
           topPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.bottom + POPOVER_OFFSET, window.innerHeight - modalRect.height - POPOVER_OFFSET));
         }
 
-        if (orient === 'top-left' || orient === 'top-right') {
+        if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
           topPos = Math.max(POPOVER_OFFSET, targetRect.top - POPOVER_OFFSET - modalRect.height);
         }
 
@@ -100,7 +132,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onBackdropClick, {
+    _classPrivateFieldInitSpec(this, _onBackdropMouseDown, {
       writable: true,
       value: e => {
         if (e.target !== _classPrivateFieldGet(this, _$dialog)) {
@@ -111,8 +143,6 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
         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();
-
           _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
         }
       }
@@ -134,6 +164,22 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onTargetKeydown, {
+      writable: true,
+      value: e => {
+        switch (e.key) {
+          case 'Escape':
+            {
+              e.preventDefault();
+
+              _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -143,7 +189,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldSet(this, _isConnected, false);
 
-    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientation)));
+    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientationModal)));
 
     dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
   }
@@ -153,7 +199,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
+    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropMouseDown));
 
     this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
@@ -169,15 +215,25 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropMouseDown));
 
     this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
+    _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
     _classPrivateFieldSet(this, _isConnected, false);
   }
 
   static get observedAttributes() {
-    return ['open', 'orientation'];
+    return ['modal', 'orientation', 'open'];
+  }
+
+  set modal(isModal) {
+    updateBooleanAttribute(this, 'modal', isModal);
+  }
+
+  get modal() {
+    return getBooleanAttribute(this, 'modal');
   }
 
   set open(isOpen) {
@@ -189,7 +245,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   }
 
   get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-right');
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom');
   }
 
   set orientation(value) {
@@ -201,48 +257,77 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'open':
         {
-          if (_classPrivateFieldGet(this, _isConnected)) {
-            if (isAttrTrue(newVal)) {
-              _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-            } else {
-              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-            }
+          if (isAttrTrue(newVal)) {
+            _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+          } else {
+            _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
           }
 
+          updateBooleanAttribute(this, 'open', isAttrTrue(newVal));
           break;
         }
 
       case 'orientation':
         {
           if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-            _classPrivateFieldGet(this, _updateOrientation).call(this);
+            if (this.modal) {
+              _classPrivateFieldGet(this, _updateOrientationModal).call(this);
+            } else {
+              _classPrivateFieldGet(this, _updateOrientation).call(this);
+            }
           }
 
           break;
         }
+
+      case 'modal':
+        {
+          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+            _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
+            _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+          }
+        }
     }
   }
 
 }));
 
 function _onExpand2() {
-  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+  if (!_classPrivateFieldGet(this, _isConnected) || _classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
     return;
   }
 
-  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+  if (this.modal) {
+    _classPrivateFieldGet(this, _$dialog).style.position = 'fixed';
+
+    _classPrivateFieldGet(this, _$dialog).showModal();
+
+    _classPrivateFieldGet(this, _updateOrientationModal).call(this);
+
+    _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
 
-  _classPrivateFieldGet(this, _$dialog).showModal();
+    _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
 
-  _classPrivateFieldGet(this, _updateOrientation).call(this);
+    document.body.style.overflow = 'hidden';
+    window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
+  } else {
+    this.addEventListener('keydown', _classPrivateFieldGet(this, _onTargetKeydown));
+    _classPrivateFieldGet(this, _$dialog).style.position = 'absolute';
 
-  _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
+    _classPrivateFieldGet(this, _$dialog).setAttribute('open', '');
 
-  document.body.style.overflow = 'hidden';
-  window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
+    _classPrivateFieldGet(this, _updateOrientation).call(this);
+
+    _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+  }
 }
 
 function _onCollapse2() {
@@ -250,17 +335,24 @@ function _onCollapse2() {
     return;
   }
 
+  if (this.modal) {
+    _classPrivateFieldGet(this, _$dialog).close?.();
+  } else {
+    _classPrivateFieldGet(this, _$dialog).removeAttribute('open');
+  }
+
   _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
 
-  _classPrivateFieldGet(this, _$dialog).close?.();
   document.body.style.overflow = _classPrivateFieldGet(this, _prevOverflowValue);
-  window.removeEventListener('resize', _classPrivateFieldGet(this, _onResize));
 
   _classPrivateFieldGet(this, _resizeThrottle).cancel();
+
+  window.removeEventListener('resize', _classPrivateFieldGet(this, _onResize));
+  this.removeEventListener('keydown', _classPrivateFieldGet(this, _onTargetKeydown));
 }
 
 function _isOpen2() {
-  return _classPrivateFieldGet(this, _isConnected) && getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
+  return getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
 }
 
 function _dispatchCloseEvent2() {

package/popover/types.d.ts

@@ -1,17 +1,32 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export declare type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
 export declare type TSinchPopoverElement = HTMLElement & {
+    /** Open/close state */
     open: boolean;
+    /** Orientation, where it *points to* from origin */
     orientation: TSinchPopoverOrientation;
+    /** Modal/non-modal mode */
+    modal: boolean;
     readonly popoverRect: TRect;
+    /** Close event */
     addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    /** Open/close state */
     setAttribute(name: 'open', value: ''): void;
+    /** Orientation, where it *points to* from origin */
     setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
+    /** Modal/non-modal mode */
+    setAttribute(name: 'modal', value: boolean): void;
 };
 export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
+    /** Open/close state */
     open: boolean;
+    /** Orientation, where it *points to* from origin */
     orientation?: TSinchPopoverOrientation;
+    /** Modal/non-modal mode */
+    modal?: boolean;
+    /** Label that is used for a11y */
     'aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchPopoverElement, CustomEvent<void>>) => void;
+    /** Close event handler */
+    onClose?: (event: SyntheticEvent<TSinchPopoverElement, CustomEvent<void>>) => void;
 };

package/popover/utils.js

@@ -1 +1 @@
-export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom', 'top'];

package/select/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import '../dropdown';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative;--sinch-popover-expand-width:1}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);box-sizing:border-box;width:100%;height:48px;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown" modal orientation="bottom"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _$sh = new WeakMap(), _createElement = new WeakSet(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = new WeakMap(), _onDropdownClick = new WeakMap(), _onDropdownClose = new WeakMap(), class extends NectaryElement {

package/select/types.d.ts

@@ -1,33 +1,61 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchSelectElement = HTMLElement & {
+    /** Value that matches one of the options `value` */
     value: string;
+    /** Label */
     label: string;
+    /** Text that appears when it has no value set */
     placeholder: string | null;
+    /** Optional text */
     optionalText: string | null;
-    invalidText: string | null;
+    /** Additional text */
     additionalText: string | null;
-    maxVisibleItems: number | null;
+    /** Invalid text, controls the overall invalid state */
+    invalidText: string | null;
+    /** Disabled */
     disabled: boolean;
+    /** Number of visible at the same time options in the list */
+    maxVisibleItems: number | null;
     readonly dropdownRect: TRect;
+    /** Change value event */
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    /** Value that matches one of the options `value` */
     setAttribute(name: 'value', value: string): void;
+    /** Label */
     setAttribute(name: 'label', value: string): void;
+    /** Text that appears when it has no value set */
     setAttribute(name: 'placeholder', value: string): void;
+    /** Optional text */
     setAttribute(name: 'optionaltext', value: string): void;
+    /** Additional text */
     setAttribute(name: 'additionaltext', value: string): void;
-    setAttribute(name: 'maxvisibleitems', value: string): void;
+    /** Invalid text, controls the overall invalid state */
+    setAttribute(name: 'invalidtext', value: string): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Number of visible at the same time options in the list */
+    setAttribute(name: 'maxvisibleitems', value: string): void;
 };
 export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement> & {
+    /** Value that matches one of the options `value` */
     value: string;
+    /** Label */
     label: string;
+    /** Label that is used for a11y – might be different from `label` */
+    'aria-label': string;
+    /** Text that appears when it has no value set */
     placeholder?: string;
+    /** Optional text */
     optionalText?: string;
-    invalidText?: string;
+    /** Additional text */
     additionalText?: string;
+    /** Invalid text, controls the overall invalid state */
+    invalidText?: string;
+    /** Disabled */
     disabled?: boolean;
+    /** Number of visible at the same time options in the list */
     maxVisibleItems?: number;
-    'aria-label': string;
+    /** Change value handler */
     onChange: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
 };

package/stop-events/index.d.ts

@@ -0,0 +1 @@
+export {};

package/stop-events/index.js

@@ -0,0 +1,40 @@
+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 {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _stopEvent, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+      }
+    });
+
+    this.style.display = 'contents';
+  }
+
+  connectedCallback() {
+    const events = getCsvSet(this.getAttribute('events'));
+
+    for (const event of events) {
+      this.addEventListener(event, _classPrivateFieldGet(this, _stopEvent));
+    }
+  }
+
+  disconnectedCallback() {
+    const events = getCsvSet(this.getAttribute('events'));
+
+    for (const event of events) {
+      this.removeEventListener(event, _classPrivateFieldGet(this, _stopEvent));
+    }
+  }
+
+}));

package/textarea/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _isPendingDk, _onCompositionStart, _onInput;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput;
 
 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, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -40,12 +40,7 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _selectionStart, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _selectionEnd, {
+    _classPrivateFieldInitSpec(this, _cursorPos, {
       writable: true,
       value: null
     });
@@ -62,6 +57,13 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onSelectionChange, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldSet(this, _cursorPos, _classPrivateFieldGet(this, _$input).selectionEnd);
+      }
+    });
+
     _classPrivateFieldInitSpec(this, _onInput, {
       writable: true,
       value: e => {
@@ -72,29 +74,23 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
         const prevValue = this.value;
 
         if (prevValue !== nextValue) {
-          const nextSelectionStart = _classPrivateFieldGet(this, _$input).selectionStart;
-
-          const nextSelectionEnd = _classPrivateFieldGet(this, _$input).selectionEnd;
-
-          const prevSelectionStart = _classPrivateFieldGet(this, _selectionStart);
-
-          const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
-
-          const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
+          const nextCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
 
           if (!_classPrivateFieldGet(this, _isPendingDk)) {
             _classPrivateFieldGet(this, _$input).value = prevValue;
-          }
 
-          _classPrivateFieldSet(this, _isPendingDk, false);
+            const prevCursorPos = _classPrivateFieldGet(this, _cursorPos);
 
-          if (!isPrevCursorEnd) {
-            _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
+            const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
+
+            if (!isPrevCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(prevCursorPos, prevCursorPos);
+            }
           }
 
-          _classPrivateFieldSet(this, _selectionStart, nextSelectionStart);
+          _classPrivateFieldSet(this, _isPendingDk, false);
 
-          _classPrivateFieldSet(this, _selectionEnd, nextSelectionEnd);
+          _classPrivateFieldSet(this, _cursorPos, nextCursorPos);
 
           this.dispatchEvent(new CustomEvent('change', {
             detail: nextValue,
@@ -125,12 +121,20 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
 
     _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
 
     _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
   }
 
   static get observedAttributes() {
@@ -143,12 +147,16 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
         {
           const nextVal = newVal ?? '';
 
-          if (nextVal !== _classPrivateFieldGet(this, _$input).value) {
+          const prevVal = _classPrivateFieldGet(this, _$input).value;
+
+          if (nextVal !== prevVal) {
+            const prevCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
+
+            const isPrevCursorEnd = prevCursorPos === prevVal.length;
             _classPrivateFieldGet(this, _$input).value = nextVal;
-            const isNextCursorEnd = _classPrivateFieldGet(this, _selectionStart) === _classPrivateFieldGet(this, _selectionEnd) && (_classPrivateFieldGet(this, _selectionStart) === null || _classPrivateFieldGet(this, _selectionStart) === nextVal.length);
 
-            if (!isNextCursorEnd) {
-              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _selectionStart), _classPrivateFieldGet(this, _selectionEnd));
+            if (!isPrevCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _cursorPos), _classPrivateFieldGet(this, _cursorPos));
             }
           }
 

package/utils.d.ts

@@ -23,6 +23,7 @@ export declare const updateLiteralAttribute: <T extends readonly string[]>($elem
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number];
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
+export declare const clampNumber: (value: number, min: number, max: number) => number;
 declare type TRange = {
     min?: number;
     max?: number;

package/utils.js

@@ -99,6 +99,9 @@ export function getLiteralAttribute($element, literals, attrName, defaultValue)
 
   return defaultValue;
 }
+export const clampNumber = (value, min, max) => {
+  return Math.min(max, Math.max(min, value));
+};
 
 const applyRange = (value, range) => {
   let result = value;