@nectary/components 1.2.2 → 1.3.0

package/package.json

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

package/skeleton/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchSkeletonElement, TSinchSkeletonReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-skeleton': TSinchSkeletonReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-skeleton': TSinchSkeletonElement;
+    }
+}

package/skeleton/index.js

@@ -0,0 +1,75 @@
+import { defineCustomElement, getUid, isAttrTrue, NectaryElement, shouldReduceMotion } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-500)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-color-snow-400) 100px,transparent 200px);clip-path:url("#clip")}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+const ANIMATION_DURATION = 2000;
+const BORDER_WIDTH = 1;
+defineCustomElement('sinch-skeleton', class extends NectaryElement {
+  #animation = null;
+  #shimmer;
+  #controller = null;
+  #clip;
+  #borderWidth = 0;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#shimmer = shadowRoot.querySelector('#shimmer');
+    this.#clip = shadowRoot.querySelector('#clip');
+  }
+  connectedCallback() {
+    const id = getUid();
+    this.#shimmer.style.setProperty('clip-path', `url(#${id})`);
+    this.#clip.setAttribute('id', id);
+    this.#controller = new AbortController();
+    if (!shouldReduceMotion()) {
+      this.addEventListener('skeleton-item-data', this.#onSkeletonItemData, {
+        signal: this.#controller.signal
+      });
+      this.#updateAnimation();
+    }
+  }
+  disconnectedCallback() {
+    this.#animation.cancel();
+    this.#animation = null;
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['card'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'card':
+        {
+          this.#borderWidth = isAttrTrue(newVal) ? BORDER_WIDTH : 0;
+          break;
+        }
+    }
+  }
+  #updateAnimation() {
+    const bb = this.getBoundingClientRect();
+    const bgWidth = bb.width * 4;
+    this.#shimmer.style.setProperty('background-size', `${bgWidth}px`);
+    this.#animation = this.#shimmer.animate({
+      backgroundPosition: [`0px`, `${bgWidth}px`]
+    }, {
+      duration: ANIMATION_DURATION,
+      iterations: Infinity
+    });
+  }
+  #onSkeletonItemData = e => {
+    const bb = this.getBoundingClientRect();
+    const data = e.detail;
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.setAttribute('x', (data.x - bb.x - this.#borderWidth).toString());
+    rect.setAttribute('y', (data.y - bb.y - this.#borderWidth).toString());
+    rect.setAttribute('width', data.width.toString());
+    rect.setAttribute('height', data.height.toString());
+    rect.setAttribute('rx', data.radius.toString());
+    this.#clip.appendChild(rect);
+  };
+});

package/skeleton/types.d.ts

@@ -0,0 +1,9 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchSkeletonElement = HTMLElement & {
+    /** Card like container */
+    setAttribute(name: 'card', value: ''): void;
+};
+export type TSinchSkeletonReact = TSinchElementReact<TSinchSkeletonElement> & {
+    /** Card like container */
+    card?: boolean;
+};

package/skeleton/types.js

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

package/skeleton-item/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchSkeletonItemElement, TSinchSkeletonItemReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-skeleton-item': TSinchSkeletonItemReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-skeleton-item': TSinchSkeletonItemElement;
+    }
+}

package/skeleton-item/index.js

@@ -0,0 +1,38 @@
+import { defineCustomElement, getCssVar, NectaryElement, attrValueToInteger, shouldReduceMotion } from '../utils';
+const templateHTML = '<style>:host{display:block;height:var(--sinch-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([size=xs]){height:var(--sinch-size-xs);--sinch-shape-radius:var(--sinch-shape-radius-xs)}:host([size="s"]){height:var(--sinch-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}:host([size="m"]){height:var(--sinch-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([size="l"]){height:var(--sinch-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}#content{height:100%;background-color:var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius)}</style><div id="content"></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-skeleton-item', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    if (!shouldReduceMotion()) {
+      requestAnimationFrame(() => {
+        const {
+          x,
+          y,
+          width,
+          height
+        } = this.getBoundingClientRect();
+        const radiusStr = getCssVar(this, '--sinch-shape-radius') ?? '0';
+        const radius = attrValueToInteger(radiusStr, {
+          min: 0,
+          defaultValue: 0
+        });
+        this.dispatchEvent(new CustomEvent('skeleton-item-data', {
+          bubbles: true,
+          detail: {
+            x,
+            y,
+            width,
+            height,
+            radius
+          }
+        }));
+      });
+    }
+  }
+});

package/skeleton-item/types.d.ts

@@ -0,0 +1,13 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { TSinchSizeEx } from '../utils/size';
+export type TSinchSkeletonItemBoundingBox = TRect & {
+    radius: number;
+};
+export type TSinchSkeletonItemElement = HTMLElement & {
+    /** Size */
+    setAttribute(name: 'size', value: TSinchSizeEx): void;
+};
+export type TSinchSkeletonItemReact = TSinchElementReact<TSinchSkeletonItemElement> & {
+    /** Size */
+    size?: TSinchSizeEx;
+};

package/skeleton-item/types.js

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

package/theme/chip.css

@@ -18,6 +18,8 @@
   --sinch-chip-color-light-violet-fg: var(--sinch-color-violet-700);
   --sinch-chip-color-light-yellow-bg: var(--sinch-color-bolt-200);
   --sinch-chip-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-chip-color-light-red-bg: var(--sinch-color-jasper-200);
+  --sinch-chip-color-light-red-fg: var(--sinch-color-jasper-700);
   --sinch-chip-color-dark-blue-bg: var(--sinch-color-night-700);
   --sinch-chip-color-dark-blue-fg: var(--sinch-color-night-200);
   --sinch-chip-color-dark-brown-bg: var(--sinch-color-mud-700);
@@ -34,6 +36,8 @@
   --sinch-chip-color-dark-violet-fg: var(--sinch-color-violet-200);
   --sinch-chip-color-dark-yellow-bg: var(--sinch-color-bolt-700);
   --sinch-chip-color-dark-yellow-fg: var(--sinch-color-bolt-200);
+  --sinch-chip-color-dark-red-bg: var(--sinch-color-jasper-700);
+  --sinch-chip-color-dark-red-fg: var(--sinch-color-jasper-200);
   --sinch-chip-color-blue-bg: var(--sinch-color-night-400);
   --sinch-chip-color-blue-fg: var(--sinch-color-snow-100);
   --sinch-chip-color-brown-bg: var(--sinch-color-mud-400);
@@ -50,6 +54,8 @@
   --sinch-chip-color-violet-fg: var(--sinch-color-stormy-500);
   --sinch-chip-color-yellow-bg: var(--sinch-color-bolt-400);
   --sinch-chip-color-yellow-fg: var(--sinch-color-stormy-500);
+  --sinch-chip-color-red-bg: var(--sinch-color-jasper-400);
+  --sinch-chip-color-red-fg: var(--sinch-color-stormy-500);
   --sinch-chip-color-celtic-bg: var(--sinch-color-feedback-info-bg);
   --sinch-chip-color-celtic-fg: var(--sinch-color-feedback-info-contrast);
   --sinch-chip-color-olive-bg: var(--sinch-color-feedback-success-bg);

package/theme/tag.css

@@ -18,6 +18,8 @@
   --sinch-tag-color-light-violet-fg: var(--sinch-color-violet-700);
   --sinch-tag-color-light-yellow-bg: var(--sinch-color-bolt-200);
   --sinch-tag-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-tag-color-light-red-bg: var(--sinch-color-jasper-200);
+  --sinch-tag-color-light-red-fg: var(--sinch-color-jasper-700);
   --sinch-tag-color-dark-blue-bg: var(--sinch-color-night-700);
   --sinch-tag-color-dark-blue-fg: var(--sinch-color-night-200);
   --sinch-tag-color-dark-brown-bg: var(--sinch-color-mud-700);
@@ -34,6 +36,8 @@
   --sinch-tag-color-dark-violet-fg: var(--sinch-color-violet-200);
   --sinch-tag-color-dark-yellow-bg: var(--sinch-color-bolt-700);
   --sinch-tag-color-dark-yellow-fg: var(--sinch-color-bolt-200);
+  --sinch-tag-color-dark-red-bg: var(--sinch-color-jasper-700);
+  --sinch-tag-color-dark-red-fg: var(--sinch-color-jasper-200);
   --sinch-tag-color-blue-bg: var(--sinch-color-night-400);
   --sinch-tag-color-blue-fg: var(--sinch-color-snow-100);
   --sinch-tag-color-brown-bg: var(--sinch-color-mud-400);
@@ -50,6 +54,8 @@
   --sinch-tag-color-violet-fg: var(--sinch-color-stormy-500);
   --sinch-tag-color-yellow-bg: var(--sinch-color-bolt-400);
   --sinch-tag-color-yellow-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-red-bg: var(--sinch-color-jasper-400);
+  --sinch-tag-color-red-fg: var(--sinch-color-stormy-500);
   --sinch-tag-color-celtic-bg: var(--sinch-color-feedback-info-bg);
   --sinch-tag-color-celtic-fg: var(--sinch-color-feedback-info-contrast);
   --sinch-tag-color-olive-bg: var(--sinch-color-feedback-success-bg);

package/toast-manager/index.js

@@ -1,6 +1,6 @@
 import '../title';
 import '../text';
-import { cloneNode, defineCustomElement, getRect, NectaryElement } from '../utils';
+import { cloneNode, defineCustomElement, getRect, NectaryElement, shouldReduceMotion } from '../utils';
 const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
@@ -11,7 +11,7 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
   #$slot;
   #$list;
   #map = new WeakMap();
-  #shouldReduceMotion = false;
+  #shouldReduceMotion;
   #animations = new Set();
   constructor() {
     super();
@@ -19,10 +19,10 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$slot = shadowRoot.querySelector('slot');
     this.#$list = shadowRoot.querySelector('#list');
+    this.#shouldReduceMotion = shouldReduceMotion();
   }
   connectedCallback() {
     this.#$slot.addEventListener('slotchange', this.#onSlotChange);
-    this.#shouldReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   }
   disconnectedCallback() {
     this.#$slot.removeEventListener('slotchange', this.#onSlotChange);

package/tooltip/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import '../pop';
-import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler, shouldReduceMotion } from '../utils';
 const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);border-radius:var(--sinch-shape-radius-xs);pointer-events:none;opacity:0}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#text{word-break:break-word;pointer-events:none}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-color-snow-600);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([inverted]:not([inverted=false])) #content{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-text-inverted)}:host([inverted]:not([inverted=false])) #tip{fill:var(--sinch-color-stormy-500)}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 import { TooltipState } from './tooltip-state';
 import { assertOrientation, getPopOrientation, orientationValues } from './utils';
@@ -32,7 +32,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#$contentWrapper = shadowRoot.querySelector('#content-wrapper');
     this.#$tip = shadowRoot.querySelector('#tip');
     this.#$target = shadowRoot.querySelector('#target');
-    this.#shouldReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    this.#shouldReduceMotion = shouldReduceMotion();
     this.#tooltipState = new TooltipState({
       showDelay: SHOW_DELAY,
       hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,

package/utils/dom.d.ts

@@ -29,4 +29,5 @@ 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;
+export declare const shouldReduceMotion: () => boolean;
 export {};

package/utils/dom.js

@@ -152,4 +152,5 @@ export const cloneNode = (el, deep) => {
     return cloned;
   }
   return el.cloneNode(deep);
-};
+};
+export const shouldReduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;

package/utils/index.d.ts

@@ -9,3 +9,4 @@ export * from './debounce';
 export * from './get-react-event-handler';
 export * from './markdown';
 export * from './event-target';
+export * from './uid';

package/utils/index.js

@@ -8,4 +8,5 @@ export * from './throttle';
 export * from './debounce';
 export * from './get-react-event-handler';
 export * from './markdown';
-export * from './event-target';
+export * from './event-target';
+export * from './uid';

package/utils/uid.d.ts

@@ -0,0 +1 @@
+export declare const getUid: () => string;

package/utils/uid.js

@@ -0,0 +1,13 @@
+export const getUid = () => crypto.getRandomValues(new Uint8Array(21)).reduce((id, byte) => {
+  const nextByte = byte & 63;
+  if (nextByte < 36) {
+    return id + nextByte.toString(36);
+  }
+  if (nextByte < 62) {
+    return id + (nextByte - 26).toString(36).toUpperCase();
+  }
+  if (nextByte > 62) {
+    return `${id}-`;
+  }
+  return `${id}_`;
+}, '');