@nectary/components 0.42.1 → 0.44.0

package/tooltip/index.js

@@ -1,13 +1,13 @@
 import '../text';
 import '../pop';
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap } from '../utils';
-import { TooltipState } from '../utils/animation';
 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';
 const TIP_SIZE = 8;
 const SHOW_DELAY = 1000;
-const HIDE_DELAY = 100;
-const ANIMATION_DURATION = 100;
+const HIDE_DELAY = 0;
+const ANIMATION_DURATION = 50;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tooltip', class extends NectaryElement {
@@ -21,6 +21,8 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   #tooltipState;
   #animation = null;
   #shouldReduceMotion = false;
+  #isConnected = false;
+  #isSubscribed = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -36,35 +38,20 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
       showDelay: SHOW_DELAY,
       hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,
       hideAnimationDuration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
-      onShow: this.#onShow,
-      onHideStart: this.#onHideStart,
-      onHideEnd: this.#onHideEnd
+      onShow: this.#onStateShow,
+      onHideStart: this.#onStateHideStart,
+      onHideEnd: this.#onStateHideEnd
     });
   }
   connectedCallback() {
+    this.#isConnected = true;
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    this.#$pop.addEventListener('-close', this.#onPopClose, {
-      signal
-    });
-    this.#$target.addEventListener('mousedown', this.#onMouseDown, {
-      signal
-    });
-    this.#$target.addEventListener('mouseenter', this.#onMouseEnter, {
-      signal
-    });
-    this.#$target.addEventListener('mouseleave', this.#onMouseLeave, {
-      signal
-    });
-    this.#$contentWrapper.addEventListener('mouseenter', this.#onMouseEnter, {
-      signal
-    });
-    this.#$contentWrapper.addEventListener('mouseleave', this.#onMouseLeave, {
-      signal
-    });
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$pop.addEventListener('-close', this.#onPopClose, options);
     updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+    this.#updateText();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -101,7 +88,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     switch (name) {
       case 'text':
         {
-          this.#$tooltipText.textContent = newVal;
+          this.#updateText();
           break;
         }
       case 'orientation':
@@ -118,19 +105,28 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   }
   #onMouseDown = () => {
     this.#tooltipState.interrupt();
+    this.#unsubscribeScroll();
   };
   #onPopClose = () => {
     this.#tooltipState.destroy();
+    this.#unsubscribeScroll();
   };
   #onMouseEnter = () => {
     this.#tooltipState.show();
+    this.#subscribeScroll();
+    this.#subscribeMouseLeaveEvents();
   };
   #onMouseLeave = e => {
     if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
       this.#tooltipState.hide();
+      this.#unsubscribeScroll();
     }
   };
-  #onShow = () => {
+  #onScroll = () => {
+    this.#tooltipState.destroy();
+    this.#unsubscribeScroll();
+  };
+  #onStateShow = () => {
     updateBooleanAttribute(this.#$pop, 'open', true);
     requestAnimationFrame(this.#updateTipOrientation);
     if (this.#animation !== null) {
@@ -146,14 +142,15 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
       });
     }
   };
-  #onHideStart = () => {
+  #onStateHideStart = () => {
     this.#animation.updatePlaybackRate(-1);
     this.#animation.play();
   };
-  #onHideEnd = () => {
+  #onStateHideEnd = () => {
     this.#animation.finish();
     this.#resetTipOrientation();
     updateBooleanAttribute(this.#$pop, 'open', false);
+    this.#unsubscribeMouseLeaveEvents();
   };
   #resetTipOrientation() {
     this.#$tip.style.top = '';
@@ -180,6 +177,56 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     }
     setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
   };
+  #updateText() {
+    if (!this.#isConnected) {
+      return;
+    }
+    const value = this.text;
+    this.#$tooltipText.textContent = value;
+    if (value.length === 0) {
+      if (this.#isSubscribed) {
+        this.#tooltipState.destroy();
+        this.#unsubscribeMouseEnterEvent();
+        this.#unsubscribeMouseLeaveEvents();
+      }
+      return;
+    }
+    this.#subscribeMouseEnterEvent();
+  }
+  #subscribeMouseEnterEvent() {
+    if (!this.#isConnected || this.#isSubscribed) {
+      return;
+    }
+    this.#$target.addEventListener('mouseenter', this.#onMouseEnter, {
+      signal: this.#controller.signal
+    });
+    this.#isSubscribed = true;
+  }
+  #unsubscribeMouseEnterEvent() {
+    this.#$target.removeEventListener('mouseenter', this.#onMouseEnter);
+    this.#isSubscribed = false;
+  }
+  #subscribeMouseLeaveEvents() {
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$target.addEventListener('mousedown', this.#onMouseDown, options);
+    this.#$target.addEventListener('mouseleave', this.#onMouseLeave, options);
+    this.#$contentWrapper.addEventListener('mouseenter', this.#onMouseEnter, options);
+    this.#$contentWrapper.addEventListener('mouseleave', this.#onMouseLeave, options);
+  }
+  #unsubscribeMouseLeaveEvents() {
+    this.#$target.removeEventListener('mousedown', this.#onMouseDown);
+    this.#$target.removeEventListener('mouseleave', this.#onMouseLeave);
+    this.#$contentWrapper.removeEventListener('mouseenter', this.#onMouseEnter);
+    this.#$contentWrapper.removeEventListener('mouseleave', this.#onMouseLeave);
+  }
+  #subscribeScroll() {
+    window.addEventListener('wheel', this.#onScroll, true);
+  }
+  #unsubscribeScroll() {
+    window.removeEventListener('wheel', this.#onScroll, true);
+  }
   #isOpen() {
     return this.#$pop.hasAttribute('open');
   }

package/utils/csv.d.ts

@@ -0,0 +1,5 @@
+export declare const CSV_DELIMITER = ",";
+export declare const packCsv: (values: string[]) => string;
+export declare const unpackCsv: (csv: string) => string[];
+export declare const updateCsv: (csv: string, value: string, setActive: boolean) => string;
+export declare const getFirstCsvValue: (acc: string) => string | null;

package/utils/csv.js

@@ -0,0 +1,22 @@
+export const CSV_DELIMITER = ',';
+export const packCsv = values => {
+  return values.join(CSV_DELIMITER);
+};
+export const unpackCsv = csv => {
+  return csv.length === 0 ? [] : csv.split(CSV_DELIMITER);
+};
+export const updateCsv = (csv, value, setActive) => {
+  const values = unpackCsv(csv);
+  const index = values.indexOf(value);
+  if (setActive) {
+    if (index < 0) {
+      values.push(value);
+    }
+  } else if (index >= 0) {
+    values.splice(index, 1);
+  }
+  return packCsv(values);
+};
+export const getFirstCsvValue = acc => {
+  return acc.length === 0 ? null : unpackCsv(acc)[0];
+};

package/utils/dom.d.ts

@@ -0,0 +1,30 @@
+export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
+export declare const isAttrTrue: (attrValue: string | null) => boolean;
+export declare const getBooleanAttribute: ($element: Element, attrName: string) => boolean;
+export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
+export declare const updateAttribute: ($element: Element, attrName: string, attrValue: string | number | boolean | null | undefined) => void;
+export declare function getAttribute($element: Element, attrName: string): string | null;
+export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
+export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
+export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
+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 IntegerOptions = {
+    min?: number;
+    max?: number;
+    defaultValue?: number | null;
+    itemSizeMultiplier?: number;
+    itemSpaceBetween?: number;
+};
+export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
+export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;
+export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, options?: IntegerOptions) => void;
+export declare function getIntegerAttribute($element: Element, attrName: string): number | undefined;
+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 getCssVar: (element: Element, variableName: string) => string | null;
+export declare const cloneNode: (el: Element, deep: boolean) => Element;
+export {};

package/utils/dom.js

@@ -0,0 +1,143 @@
+export const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
+  $element.setAttribute(attrName, attrValue === true ? 'true' : 'false');
+};
+export const isAttrTrue = attrValue => {
+  return attrValue === '' || attrValue !== 'false' && attrValue !== null;
+};
+export const getBooleanAttribute = ($element, attrName) => {
+  return isAttrTrue($element.getAttribute(attrName));
+};
+export const updateBooleanAttribute = ($element, attrName, attrValue) => {
+  const currentAttrValue = $element.getAttribute(attrName);
+  if (attrValue === true) {
+    if (!isAttrTrue(currentAttrValue)) {
+      $element.setAttribute(attrName, '');
+    }
+  } else if (currentAttrValue !== null) {
+    $element.removeAttribute(attrName);
+  }
+};
+export const updateAttribute = ($element, attrName, attrValue) => {
+  if (attrValue != null) {
+    $element.setAttribute(attrName, String(attrValue));
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+export function getAttribute($element, attrName) {
+  let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  return $element.getAttribute(attrName) ?? defaultValue;
+}
+export const isLiteralValue = (literals, value) => {
+  return value != null && literals.includes(value);
+};
+export const updateLiteralAttribute = ($element, literals, attrName, attrValue) => {
+  if (isLiteralValue(literals, attrValue)) {
+    $element.setAttribute(attrName, attrValue);
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+export function getLiteralAttribute($element, literals, attrName, defaultValue) {
+  const attrValue = $element.getAttribute(attrName);
+  if (isLiteralValue(literals, attrValue)) {
+    return attrValue;
+  }
+  if (typeof defaultValue === 'undefined') {
+    throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
+  }
+  return defaultValue;
+}
+export const clampNumber = (value, min, max) => {
+  return Math.min(max, Math.max(min, value));
+};
+const DEFAULT_INTEGER_OPTIONS = {
+  itemSizeMultiplier: 1,
+  itemSpaceBetween: 0,
+  defaultValue: null
+};
+const applyRange = (value, _ref) => {
+  let {
+    min,
+    max
+  } = _ref;
+  let result = value;
+  if (min != null) {
+    result = Math.max(min, result);
+  }
+  if (max != null) {
+    result = Math.min(max, result);
+  }
+  return result;
+};
+export const attrValueToInteger = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier = 1,
+    itemSpaceBetween = 0
+  } = options;
+  let intValue = defaultValue;
+  if (value !== null) {
+    const int = parseInt(value);
+    if (Number.isInteger(int)) {
+      intValue = applyRange(int, options);
+    }
+  }
+  if (intValue !== null) {
+    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween;
+  }
+  return null;
+};
+export const attrValueToPixels = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const int = attrValueToInteger(value, options);
+  return int === null ? 'unset' : `${int}px`;
+};
+export const updateIntegerAttribute = function ($element, attrName, attrValue) {
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier: multiplier = 1
+  } = options;
+  let intValue = null;
+  if (typeof attrValue === 'string') {
+    intValue = attrValueToInteger(attrValue, options);
+  } else if (typeof attrValue === 'number') {
+    intValue = applyRange(attrValue, options) * multiplier;
+  } else {
+    intValue = defaultValue;
+  }
+  if (intValue === null) {
+    $element.removeAttribute(attrName);
+  } else {
+    $element.setAttribute(attrName, intValue.toFixed(0));
+  }
+};
+export function getIntegerAttribute($element, attrName, defaultValue) {
+  return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
+}
+export const setClass = (elem, name, isSet) => {
+  isSet ? elem.classList.add(name) : elem.classList.remove(name);
+};
+export const getCssVar = (element, variableName) => {
+  const result = getComputedStyle(element).getPropertyValue(variableName);
+  return result === '' ? null : result;
+};
+export const cloneNode = (el, deep) => {
+  const root = el.getRootNode();
+  if (root !== document && Reflect.has(root, 'createElement')) {
+    const cloned = root.createElement(el.tagName.toLowerCase());
+    for (const attr of el.getAttributeNames()) {
+      cloned.setAttribute(attr, el.getAttribute(attr));
+    }
+    if (deep) {
+      for (let i = 0; i < el.children.length; i++) {
+        const clonedChild = cloneNode(el.children[i], deep);
+        cloned.appendChild(clonedChild);
+      }
+    }
+    return cloned;
+  }
+  return el.cloneNode(deep);
+};

package/utils/element.d.ts

@@ -0,0 +1,12 @@
+export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
+export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
+declare global {
+    interface ShadowRootInit {
+        customElements?: CustomElementRegistry;
+    }
+}
+export declare class NectaryElement extends HTMLElement {
+    attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
+    version: string;
+    get focusable(): boolean;
+}

package/utils/element.js

@@ -0,0 +1,38 @@
+import pkg from '../package.json';
+const nectaryDefinitions = new Map();
+let nectaryRegistry = null;
+export const defineCustomElement = (name, constructor) => {
+  if (nectaryRegistry !== null) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, constructor);
+    }
+    return;
+  }
+  nectaryDefinitions.set(name, constructor);
+};
+export const setNectaryRegistry = registry => {
+  if (nectaryRegistry !== null) {
+    throw new Error('Nectary elements already registered');
+  }
+  nectaryRegistry = registry;
+  for (const [name, ctor] of nectaryDefinitions.entries()) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, ctor);
+    }
+  }
+  nectaryDefinitions.clear();
+};
+export class NectaryElement extends HTMLElement {
+  attachShadow(options) {
+    return super.attachShadow({
+      mode: 'closed',
+      delegatesFocus: false,
+      customElements: nectaryRegistry,
+      ...options
+    });
+  }
+  version = pkg.version;
+  get focusable() {
+    return false;
+  }
+}

package/utils/get-react-event-handler.d.ts

@@ -0,0 +1 @@
+export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;

package/utils/get-react-event-handler.js

@@ -0,0 +1,8 @@
+export const getReactEventHandler = ($element, handlerName) => {
+  for (const key in $element) {
+    if (key.startsWith('__reactProps$')) {
+      return $element[key][handlerName];
+    }
+  }
+  return null;
+};

package/utils/index.d.ts

@@ -1,57 +1,8 @@
-import type { TRect } from '../types';
-export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
-export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
-declare global {
-    interface ShadowRootInit {
-        customElements?: CustomElementRegistry;
-    }
-}
-export declare class NectaryElement extends HTMLElement {
-    attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
-    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;
-export declare const isAttrTrue: (attrValue: string | null) => boolean;
-export declare const getBooleanAttribute: ($element: Element, attrName: string) => boolean;
-export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
-export declare const updateAttribute: ($element: Element, attrName: string, attrValue: string | number | boolean | null | undefined) => void;
-export declare function getAttribute($element: Element, attrName: string): string | null;
-export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
-export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
-export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
-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 IntegerOptions = {
-    min?: number;
-    max?: number;
-    defaultValue?: number | null;
-    itemSizeMultiplier?: number;
-    itemSpaceBetween?: number;
-};
-export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
-export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;
-export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, options?: IntegerOptions) => void;
-export declare function getIntegerAttribute($element: Element, attrName: string): number | undefined;
-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 getCsvSet: (acc: string) => Set<string>;
-export declare const updateCsv: (acc: string, value: string, setActive: boolean) => string;
-export declare const getFirstCsvValue: (acc: string) => string | null;
-export declare const getRect: (el: Element) => TRect;
-export declare const setClass: (elem: Element, name: string, isSet: boolean) => void;
-export declare const getCssVar: (element: Element, variableName: string) => string | null;
-export declare const throttleAnimationFrame: (cb: (...args: any[]) => void) => {
-    fn: (...args: any[]) => void;
-    cancel: () => void;
-};
-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 const rectOverlap: (targetRect: TRect, contentRect: TRect) => boolean;
-export declare const getTargetRect: (slot: HTMLSlotElement) => TRect | null;
-export {};
+export * from './context';
+export * from './csv';
+export * from './dom';
+export * from './element';
+export * from './rect';
+export * from './slot';
+export * from './throttle';
+export * from './get-react-event-handler';