@nectary/components 1.2.0 → 1.2.2

package/colors.json

@@ -73,9 +73,9 @@
   "colorCeltic700": "#003B7E",
   "colorCeltic400": "#2071CE",
   "colorCeltic200": "#D5E5F8",
-  "colorJasper700": "#882024",
-  "colorJasper400": "#D13D42",
-  "colorJasper200": "#FBD5D5",
+  "colorJasper700": "#B71C1C",
+  "colorJasper400": "#F44336",
+  "colorJasper200": "#FFCDD2",
   "colorPumpkin700": "#9C2E00",
   "colorPumpkin400": "#F35B1C",
   "colorPumpkin200": "#FFE8D6",

package/package.json

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

package/pop/index.js

@@ -13,7 +13,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #$contentSlot;
   #$targetOpenWrapper;
   #targetActiveElement = null;
-  #controller = null;
+  #controller;
   #keydownContext;
   #visibilityContext;
   #targetStyleValue = null;
@@ -31,10 +31,13 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     this.#resizeThrottle = throttleAnimationFrame(this.#updateOrientation);
     this.#keydownContext = new Context(this.#$contentSlot, 'keydown');
     this.#visibilityContext = new Context(this.#$contentSlot, 'visibility');
+    this.#controller = new AbortController();
   }
   connectedCallback() {
     super.connectedCallback();
-    this.#controller = new AbortController();
+    if (this.#controller === null) {
+      this.#controller = new AbortController();
+    }
     const {
       signal
     } = this.#controller;
@@ -58,6 +61,8 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#controller.abort();
+    this.#controller = null;
+    this.#resizeThrottle.cancel();
     this.#onCollapse();
   }
   static get observedAttributes() {
@@ -102,7 +107,9 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         {
           if (isAttrTrue(newVal)) {
             requestAnimationFrame(() => {
-              this.#onExpand();
+              if (this.isConnected && getBooleanAttribute(this, 'open')) {
+                this.#onExpand();
+              }
             });
           } else {
             this.#onCollapse();
@@ -186,9 +193,11 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
         if (!isElementFocused(this.#targetActiveElement)) {
           requestAnimationFrame(() => {
-            this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
-            this.#targetActiveElement.focus();
-            this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+            if (this.isConnected && this.#isOpen()) {
+              this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
+              this.#targetActiveElement.focus();
+              this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+            }
           });
         }
       }
@@ -196,7 +205,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     disableScroll();
     window.addEventListener('resize', this.#onResize);
     requestAnimationFrame(() => {
-      if (this.#isOpen()) {
+      if (this.isConnected && this.#isOpen()) {
         this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
       }
     });
@@ -238,9 +247,11 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         if (!isElementFocused(this.#targetActiveElement)) {
           const $targetEl = this.#targetActiveElement;
           requestAnimationFrame(() => {
-            this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
-            $targetEl.focus();
-            this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+            if (this.isConnected && !this.#isOpen()) {
+              this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
+              $targetEl.focus();
+              this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+            }
           });
         }
         this.#targetActiveElement = null;

package/select-menu/index.js

@@ -2,10 +2,10 @@ import '../input';
 import '../icon-button';
 import '../icon';
 import '../text';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, getCssVar } from '../utils';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, getCssVar, hasClass } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#not-found{display:none;width:100%;height:30px;align-items:center;justify-content:center;margin-bottom:10px;color:var(--sinch-color-text-muted);pointer-events:none;user-select:none}#not-found.active{display:flex}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon id="icon-search" slot="icon"></sinch-icon></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
-const NUM_ITEMS_SEARCH = 20;
+const NUM_ITEMS_SEARCH = 7;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-menu', class extends NectaryElement {
@@ -29,35 +29,23 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
+    const options = {
+      signal: this.#controller.signal
+    };
     this.setAttribute('role', 'listbox');
     this.setAttribute('tabindex', '0');
-    this.addEventListener('keydown', this.#onListboxKeyDown, {
-      signal
-    });
-    this.addEventListener('blur', this.#onListboxBlur, {
-      signal
-    });
-    this.#$listbox.addEventListener('mousedown', this.#onListboxMousedown, {
-      signal
-    });
-    this.#$listbox.addEventListener('click', this.#onListboxClick, {
-      signal
-    });
-    this.#$search.addEventListener('-change', this.#onSearchChange, {
-      signal
-    });
-    this.#$optionSlot.addEventListener('slotchange', this.#onOptionSlotChange, {
-      signal
-    });
-    this.addEventListener('-change', this.#onChangeReactHandler, {
-      signal
-    });
-    subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
-    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
+    this.addEventListener('keydown', this.#onListboxKeyDown, options);
+    this.addEventListener('focus', this.#onFocus, options);
+    this.addEventListener('blur', this.#onListboxBlur, options);
+    this.#$listbox.addEventListener('mousedown', this.#onListboxMousedown, options);
+    this.#$listbox.addEventListener('click', this.#onListboxClick, options);
+    this.#$search.addEventListener('-change', this.#onSearchChange, options);
+    this.#$optionSlot.addEventListener('slotchange', this.#onOptionSlotChange, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    subscribeContext(this, 'keydown', this.#onContextKeyDown, this.#controller.signal);
+    subscribeContext(this, 'visibility', this.#onContextVisibility, this.#controller.signal);
     updateAttribute(this.#$iconSearch, 'name', getCssVar(this, '--sinch-select-menu-icon-search'));
+    this.#onOptionSlotChange();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -66,24 +54,6 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   static get observedAttributes() {
     return ['value', 'rows', 'multiple'];
   }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-  set rows(value) {
-    updateIntegerAttribute(this, 'rows', value);
-  }
-  get rows() {
-    return getIntegerAttribute(this, 'rows', null);
-  }
-  set multiple(isMultiple) {
-    updateBooleanAttribute(this, 'multiple', isMultiple);
-  }
-  get multiple() {
-    return getBooleanAttribute(this, 'multiple');
-  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
@@ -110,6 +80,33 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
         }
     }
   }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set rows(value) {
+    updateIntegerAttribute(this, 'rows', value);
+  }
+  get rows() {
+    return getIntegerAttribute(this, 'rows', null);
+  }
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+  get focusable() {
+    return true;
+  }
+  #onFocus = () => {
+    const isSearchActive = hasClass(this.#$search, 'active');
+    if (isSearchActive) {
+      this.#$search.focus();
+    }
+  };
   #onListboxMousedown = e => {
     const $elem = e.target;
     if (!getBooleanAttribute($elem, 'disabled')) {
@@ -147,6 +144,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #onContextVisibility = e => {
     if (e.detail) {
       this.#selectOption(this.#findCheckedOption());
+      this.#onFocus();
     } else {
       this.#selectOption(null);
     }
@@ -306,7 +304,4 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-  get focusable() {
-    return true;
-  }
 });

package/theme/color-swatch.css

@@ -18,6 +18,8 @@
   --sinch-color-swatch-color-light-violet-fg: var(--sinch-color-violet-700);
   --sinch-color-swatch-color-light-yellow-bg: var(--sinch-color-bolt-200);
   --sinch-color-swatch-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-color-swatch-color-light-red-bg: var(--sinch-color-jasper-200);
+  --sinch-color-swatch-color-light-red-fg: var(--sinch-color-jasper-700);
   --sinch-color-swatch-color-dark-blue-bg: var(--sinch-color-night-700);
   --sinch-color-swatch-color-dark-blue-fg: var(--sinch-color-night-200);
   --sinch-color-swatch-color-dark-brown-bg: var(--sinch-color-mud-700);
@@ -34,6 +36,8 @@
   --sinch-color-swatch-color-dark-violet-fg: var(--sinch-color-violet-200);
   --sinch-color-swatch-color-dark-yellow-bg: var(--sinch-color-bolt-700);
   --sinch-color-swatch-color-dark-yellow-fg: var(--sinch-color-bolt-200);
+  --sinch-color-swatch-color-dark-red-bg: var(--sinch-color-jasper-700);
+  --sinch-color-swatch-color-dark-red-fg: var(--sinch-color-jasper-200);
   --sinch-color-swatch-color-blue-bg: var(--sinch-color-night-400);
   --sinch-color-swatch-color-blue-fg: var(--sinch-color-snow-100);
   --sinch-color-swatch-color-brown-bg: var(--sinch-color-mud-400);
@@ -50,6 +54,8 @@
   --sinch-color-swatch-color-violet-fg: var(--sinch-color-stormy-500);
   --sinch-color-swatch-color-yellow-bg: var(--sinch-color-bolt-400);
   --sinch-color-swatch-color-yellow-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-red-bg: var(--sinch-color-jasper-400);
+  --sinch-color-swatch-color-red-fg: var(--sinch-color-stormy-500);
   --sinch-color-swatch-color-skin-tone-0-bg: var(--sinch-color-skin-tone-0);
   --sinch-color-swatch-color-skin-tone-0-fg: var(--sinch-color-stormy-500);
   --sinch-color-swatch-color-skin-tone-10-bg: var(--sinch-color-skin-tone-10);

package/theme/colors.js

@@ -1,4 +1,4 @@
-export const lightColorNames = ['light-violet', 'light-blue', 'light-green', 'light-yellow', 'light-orange', 'light-pink', 'light-brown', 'light-gray'].join(',');
-export const darkColorNames = ['dark-violet', 'dark-blue', 'dark-green', 'dark-yellow', 'dark-orange', 'dark-pink', 'dark-brown', 'dark-gray'].join(',');
-export const vibrantColorNames = ['violet', 'blue', 'green', 'yellow', 'orange', 'pink', 'brown', 'gray'].join(',');
+export const lightColorNames = ['light-violet', 'light-blue', 'light-green', 'light-yellow', 'light-orange', 'light-red', 'light-pink', 'light-brown', 'light-gray'].join(',');
+export const darkColorNames = ['dark-violet', 'dark-blue', 'dark-green', 'dark-yellow', 'dark-orange', 'dark-red', 'dark-pink', 'dark-brown', 'dark-gray'].join(',');
+export const vibrantColorNames = ['violet', 'blue', 'green', 'yellow', 'orange', 'red', 'pink', 'brown', 'gray'].join(',');
 export const skinToneColorNames = ['skin-tone-0', 'skin-tone-10', 'skin-tone-20', 'skin-tone-30', 'skin-tone-40', 'skin-tone-50'].join(',');

package/theme/palette.css

@@ -74,9 +74,9 @@
   --sinch-color-celtic-700: #003B7E;
   --sinch-color-celtic-400: #2071CE;
   --sinch-color-celtic-200: #D5E5F8;
-  --sinch-color-jasper-700: #882024;
-  --sinch-color-jasper-400: #D13D42;
-  --sinch-color-jasper-200: #FBD5D5;
+  --sinch-color-jasper-700: #B71C1C;
+  --sinch-color-jasper-400: #F44336;
+  --sinch-color-jasper-200: #FFCDD2;
   --sinch-color-pumpkin-700: #9C2E00;
   --sinch-color-pumpkin-400: #F35B1C;
   --sinch-color-pumpkin-200: #FFE8D6;

package/utils/dom.d.ts

@@ -25,6 +25,7 @@ export declare function getIntegerAttribute($element: Element, attrName: string)
 export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: null): number | null;
 export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: number): number;
 export declare const setClass: (elem: Element, name: string, isSet: boolean) => void;
+export declare const hasClass: (elem: Element, name: string) => boolean;
 export declare const getCssVar: (element: Element, variableName: string) => string | null;
 export declare const getCssVars: (element: Element, variableNames: string[]) => (string | null)[];
 export declare const cloneNode: (el: Element, deep: boolean) => Element;

package/utils/dom.js

@@ -122,6 +122,9 @@ export function getIntegerAttribute($element, attrName, defaultValue) {
 export const setClass = (elem, name, isSet) => {
   isSet ? elem.classList.add(name) : elem.classList.remove(name);
 };
+export const hasClass = (elem, name) => {
+  return elem.classList.contains(name);
+};
 export const getCssVar = (element, variableName) => {
   const result = getComputedStyle(element).getPropertyValue(variableName).trim();
   return result === '' ? null : result;