@nectary/components 0.40.0 → 0.41.0

package/utils/animation.js

@@ -0,0 +1,142 @@
+export class TooltipState {
+  #timerId = null;
+  #state = 'initial';
+  #options;
+
+  constructor(options) {
+    this.#options = options;
+  }
+
+  show() {
+    switch (this.#state) {
+      case 'initial':
+        {
+          this.#delayShow();
+          break;
+        }
+
+      case 'hide-delay':
+        {
+          this.#cancelStateChange('show');
+          break;
+        }
+
+      case 'hide':
+        {
+          this.#cancelStateChange();
+          this.#onShow();
+          break;
+        }
+    }
+  }
+
+  hide() {
+    switch (this.#state) {
+      case 'show-delay':
+        {
+          this.#cancelStateChange('initial');
+          break;
+        }
+
+      case 'show':
+        {
+          this.#delayHide();
+          break;
+        }
+    }
+  }
+
+  interrupt() {
+    switch (this.#state) {
+      case 'show-delay':
+        {
+          this.#cancelStateChange('initial');
+          break;
+        }
+
+      case 'show':
+        {
+          this.#onHideStart();
+          break;
+        }
+
+      case 'hide-delay':
+        {
+          this.#cancelStateChange();
+          this.#onHideStart();
+          break;
+        }
+    }
+  }
+
+  destroy() {
+    switch (this.#state) {
+      case 'show-delay':
+        {
+          this.#cancelStateChange('initial');
+          break;
+        }
+
+      case 'show':
+        {
+          this.#onHideStart(true);
+          break;
+        }
+
+      case 'hide-delay':
+        {
+          this.#cancelStateChange();
+          this.#onHideStart(true);
+          break;
+        }
+
+      case 'hide':
+        {
+          this.#cancelStateChange();
+          this.#onHideEnd();
+          break;
+        }
+    }
+  }
+
+  #delayShow() {
+    this.#state = 'show-delay';
+    this.#timerId = window.setTimeout(this.#onShow, this.#options.showDelay);
+  }
+
+  #delayHide() {
+    this.#state = 'hide-delay';
+    this.#timerId = window.setTimeout(this.#onHideStart, this.#options.hideDelay);
+  }
+
+  #onShow = () => {
+    this.#state = 'show';
+    this.#options.onShow();
+  };
+  #onHideStart = isImmediate => {
+    this.#state = 'hide';
+    this.#options.onHideStart();
+
+    if (isImmediate === true || this.#options.hideAnimationDuration === 0) {
+      this.#onHideEnd();
+    } else {
+      this.#timerId = window.setTimeout(this.#onHideEnd, this.#options.hideAnimationDuration);
+    }
+  };
+  #onHideEnd = () => {
+    this.#state = 'initial';
+    this.#options.onHideEnd();
+  };
+
+  #cancelStateChange(nextState) {
+    if (nextState != null) {
+      this.#state = nextState;
+    }
+
+    if (this.#timerId !== null) {
+      clearTimeout(this.#timerId);
+      this.#timerId = null;
+    }
+  }
+
+}

package/utils/colors.d.ts

@@ -1,10 +1,5 @@
 export declare const NO_COLOR: "";
-export declare type TSinchColorName = typeof NO_COLOR | 'Blue 10' | 'Blue 20' | 'Blue 30' | 'Blue 40' | 'Blue 50' | 'Green 10' | 'Green 20' | 'Green 30' | 'Yellow 20' | 'Yellow 10' | 'Orange 10' | 'Orange 30' | 'Orange 20' | 'Coral 10' | 'Pink 10' | 'Pink 20' | 'Brown 10' | 'Brown 20' | 'Gray 10' | 'Gray 20' | 'Red 10' | 'Skin tone 0' | 'Skin tone 10' | 'Skin tone 20' | 'Skin tone 30' | 'Skin tone 40' | 'Skin tone 50';
-export declare const colorNameValues: readonly TSinchColorName[];
-declare type TAssertColorName = (value: string | null) => asserts value is TSinchColorName;
-export declare const assertColorNameValue: TAssertColorName;
-export declare const colorMap: Record<TSinchColorName, {
-    value: string;
-    isInverted: boolean;
-}>;
-export {};
+export declare const lightColorNames: string;
+export declare const darkColorNames: string;
+export declare const vibrantColorNames: string;
+export declare const skinToneColorNames: string;

package/utils/colors.js

@@ -1,121 +1,5 @@
 export const NO_COLOR = '';
-export const colorNameValues = [NO_COLOR, 'Blue 10', 'Blue 20', 'Blue 30', 'Blue 40', 'Blue 50', 'Green 10', 'Green 20', 'Green 30', 'Yellow 10', 'Yellow 20', 'Orange 10', 'Orange 20', 'Orange 30', 'Pink 10', 'Pink 20', 'Brown 10', 'Brown 20', 'Gray 10', 'Gray 20', 'Coral 10', 'Red 10', 'Skin tone 0', 'Skin tone 10', 'Skin tone 20', 'Skin tone 30', 'Skin tone 40', 'Skin tone 50'];
-export const assertColorNameValue = value => {
-  if (value === null || !colorNameValues.includes(value)) {
-    throw new Error(`Invalid color name: "${value}"`);
-  }
-};
-export const colorMap = {
-  [NO_COLOR]: {
-    value: NO_COLOR,
-    isInverted: false
-  },
-  'Blue 50': {
-    value: 'night-400',
-    isInverted: true
-  },
-  'Blue 40': {
-    value: 'aqua-400',
-    isInverted: false
-  },
-  'Blue 30': {
-    value: 'aqua-200',
-    isInverted: false
-  },
-  'Blue 20': {
-    value: 'night-200',
-    isInverted: false
-  },
-  'Blue 10': {
-    value: 'informative-200',
-    isInverted: false
-  },
-  'Green 30': {
-    value: 'grass-400',
-    isInverted: false
-  },
-  'Green 20': {
-    value: 'grass-200',
-    isInverted: false
-  },
-  'Green 10': {
-    value: 'success-200',
-    isInverted: false
-  },
-  'Yellow 20': {
-    value: 'bolt-400',
-    isInverted: false
-  },
-  'Yellow 10': {
-    value: 'bolt-200',
-    isInverted: false
-  },
-  'Orange 30': {
-    value: 'orange-400',
-    isInverted: false
-  },
-  'Orange 20': {
-    value: 'orange-200',
-    isInverted: false
-  },
-  'Orange 10': {
-    value: 'warning-200',
-    isInverted: false
-  },
-  'Pink 20': {
-    value: 'candy-400',
-    isInverted: false
-  },
-  'Pink 10': {
-    value: 'candy-200',
-    isInverted: false
-  },
-  'Brown 20': {
-    value: 'mud-400',
-    isInverted: true
-  },
-  'Brown 10': {
-    value: 'mud-200',
-    isInverted: false
-  },
-  'Gray 20': {
-    value: 'dirt-400',
-    isInverted: false
-  },
-  'Gray 10': {
-    value: 'dirt-200',
-    isInverted: false
-  },
-  'Coral 10': {
-    value: 'berry-200',
-    isInverted: false
-  },
-  'Red 10': {
-    value: 'error-200',
-    isInverted: false
-  },
-  'Skin tone 0': {
-    value: 'skin-tone-10',
-    isInverted: false
-  },
-  'Skin tone 10': {
-    value: 'skin-tone-20',
-    isInverted: false
-  },
-  'Skin tone 20': {
-    value: 'skin-tone-30',
-    isInverted: false
-  },
-  'Skin tone 30': {
-    value: 'skin-tone-40',
-    isInverted: false
-  },
-  'Skin tone 40': {
-    value: 'skin-tone-50',
-    isInverted: false
-  },
-  'Skin tone 50': {
-    value: 'skin-tone-60',
-    isInverted: true
-  }
-};
+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 skinToneColorNames = ['skin-tone-0', 'skin-tone-10', 'skin-tone-20', 'skin-tone-30', 'skin-tone-40', 'skin-tone-50'].join(',');

package/utils/context.d.ts

@@ -0,0 +1,15 @@
+export declare type TContextName = 'visibility' | 'keydown';
+export declare type TContextKeyboard = {
+    code: string;
+    preventDefault: () => void;
+};
+export declare type TContextVisibility = boolean;
+export declare class Context {
+    #private;
+    constructor($element: Element, name: TContextName);
+    get elements(): Iterable<Element>;
+    subscribe(): void;
+    unsubscribe(): void;
+}
+export declare const dispatchContextConnectEvent: (el: Element, name: TContextName) => void;
+export declare const dispatchContextDisconnectEvent: (el: Element, name: TContextName) => void;

package/utils/context.js

@@ -0,0 +1,57 @@
+export class Context {
+  #$root;
+  #listeners = new Set();
+  #name;
+  #isSubscribed = false;
+
+  constructor($element, name) {
+    this.#$root = $element;
+    this.#name = name;
+  }
+
+  get elements() {
+    return this.#listeners;
+  }
+
+  subscribe() {
+    if (this.#isSubscribed) {
+      return;
+    }
+
+    this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onConnect);
+    this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
+    this.#isSubscribed = true;
+  }
+
+  unsubscribe() {
+    this.#listeners.clear();
+    this.#$root.removeEventListener(`-context-connect-${this.#name}`, this.#onConnect);
+    this.#$root.removeEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
+    this.#isSubscribed = false;
+  }
+
+  #onConnect = e => {
+    e.stopPropagation();
+    this.#listeners.add(e.detail);
+  };
+  #onDisconnect = e => {
+    e.stopPropagation();
+    this.#listeners.delete(e.detail);
+  };
+}
+export const dispatchContextConnectEvent = (el, name) => {
+  requestAnimationFrame(() => {
+    el.dispatchEvent(new CustomEvent(`-context-connect-${name}`, {
+      bubbles: true,
+      composed: true,
+      detail: el
+    }));
+  });
+};
+export const dispatchContextDisconnectEvent = (el, name) => {
+  el.dispatchEvent(new CustomEvent(`-context-disconnect-${name}`, {
+    bubbles: true,
+    composed: true,
+    detail: el
+  }));
+};

package/utils/index.d.ts

@@ -8,7 +8,8 @@ declare global {
 }
 export declare class NectaryElement extends HTMLElement {
     attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
-    __version: string;
+    version: string;
+    get focusable(): boolean;
 }
 export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
 export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
@@ -47,14 +48,9 @@ export declare const throttleAnimationFrame: (cb: (...args: any[]) => void) => {
     fn: (...args: any[]) => void;
     cancel: () => void;
 };
-export declare const getFirstSlotElement: (root: HTMLSlotElement) => HTMLElement | null;
+export declare const getFirstSlotElement: (root: HTMLSlotElement, isDeep?: boolean) => HTMLElement | null;
+export declare const getFirstFocusableElement: (root: Element) => NectaryElement | null;
 export declare const cloneNode: (el: Element, deep: boolean) => Element;
 export declare const isElementFocused: ($el: Element | null) => boolean;
-export declare class Context {
-    #private;
-    constructor($element: Element, name: string);
-    get elements(): Iterable<Element>;
-    subscribe(): void;
-    unsubscribe(): void;
-}
+export declare const rectOverlap: (targetRect: TRect, contentRect: TRect) => boolean;
 export {};

package/utils/index.js

@@ -37,7 +37,12 @@ export class NectaryElement extends HTMLElement {
     });
   }
 
-  __version = pkg.version;
+  version = pkg.version;
+
+  get focusable() {
+    return false;
+  }
+
 }
 export const getReactEventHandler = ($element, handlerName) => {
   for (const key in $element) {
@@ -260,22 +265,52 @@ const throttle = (delayFn, cancelFn) => cb => {
 };
 
 export const throttleAnimationFrame = throttle(global.requestAnimationFrame, global.cancelAnimationFrame);
-export const getFirstSlotElement = root => {
-  let slot = root;
 
-  while (true) {
-    const el = slot.assignedElements()[0];
+const isSlotElement = el => {
+  return el.tagName === 'SLOT';
+};
 
-    if (el == null) {
-      return null;
-    }
+export const getFirstSlotElement = function (root) {
+  let isDeep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const el = root.assignedElements()[0];
+
+  if (el == null) {
+    return null;
+  }
+
+  if (isDeep && isSlotElement(el)) {
+    return getFirstSlotElement(el, isDeep);
+  }
+
+  return el;
+};
+
+const getChildren = root => {
+  if (isSlotElement(root)) {
+    return root.assignedElements();
+  }
+
+  return Array.from(root.children);
+};
+
+const isFocusable = el => {
+  return el.focusable === true;
+};
 
-    if (el.tagName !== 'SLOT') {
-      return el;
+export const getFirstFocusableElement = root => {
+  for (const child of getChildren(root)) {
+    if (isFocusable(child)) {
+      return child;
     }
 
-    slot = el;
+    const resultEl = getFirstFocusableElement(child);
+
+    if (resultEl !== null) {
+      return resultEl;
+    }
   }
+
+  return null;
 };
 export const cloneNode = (el, deep) => {
   const root = el.getRootNode();
@@ -302,42 +337,6 @@ export const cloneNode = (el, deep) => {
 export const isElementFocused = $el => {
   return $el !== null && $el === $el.getRootNode().activeElement;
 };
-export class Context {
-  #$root;
-  #listeners = new Set();
-  #name;
-  #isSubscribed = false;
-
-  constructor($element, name) {
-    this.#$root = $element;
-    this.#name = name;
-  }
-
-  get elements() {
-    return this.#listeners;
-  }
-
-  subscribe() {
-    if (this.#isSubscribed) {
-      return;
-    }
-
-    this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onConnect);
-    this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
-    this.#isSubscribed = true;
-  }
-
-  unsubscribe() {
-    this.#listeners.clear();
-    this.#$root.removeEventListener(`-context-connect-${this.#name}`, this.#onConnect);
-    this.#$root.removeEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
-    this.#isSubscribed = false;
-  }
-
-  #onConnect = e => {
-    this.#listeners.add(e.target);
-  };
-  #onDisconnect = e => {
-    this.#listeners.delete(e.target);
-  };
-}
+export const rectOverlap = (targetRect, contentRect) => {
+  return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
+};

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

@@ -1,11 +0,0 @@
-import type { TSinchDropdownCheckboxOptionElement, TSinchDropdownCheckboxOptionReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-dropdown-checkbox-option': TSinchDropdownCheckboxOptionReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-dropdown-checkbox-option': TSinchDropdownCheckboxOptionElement;
-    }
-}

package/dropdown-checkbox-option/index.js

@@ -1,74 +0,0 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:4px 10px 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:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-snow-100);border:2px solid var(--sinch-color-stormy-300);transition:background-color .1s linear;box-sizing:border-box}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-color-snow-100)}:host([data-checked]) #icon-container::before{background-color:var(--sinch-color-tropical-500);border-color:var(--sinch-color-tropical-500)}:host([data-checked]) #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{border-color:var(--sinch-color-stormy-100)}@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', class extends NectaryElement {
-  #$text;
-
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    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':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-
-      case 'checked':
-        {
-          updateExplicitBooleanAttribute(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');
-  }
-
-});

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

@@ -1,15 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchDropdownCheckboxOptionElement = HTMLElement & {
-    value: string;
-    text: string;
-    disabled: boolean;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export declare type TSinchDropdownCheckboxOptionReact = TSinchElementReact<TSinchDropdownCheckboxOptionElement> & {
-    value: string;
-    text: string;
-    disabled?: boolean;
-    'aria-label': string;
-};

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

@@ -1,11 +0,0 @@
-import type { TSinchDropdownRadioOptionElement, TSinchDropdownRadioOptionReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-dropdown-radio-option': TSinchDropdownRadioOptionReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-dropdown-radio-option': TSinchDropdownRadioOptionElement;
-    }
-}