@nectary/components 2.9.0 → 2.10.0

package/tooltip/index.js

@@ -0,0 +1,275 @@
+import '../text';
+import '../pop';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler, shouldReduceMotion } from '../utils';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}: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}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);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([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</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 { getPopOrientation, orientationValues, textAlignValues, typeValues } from './utils';
+const TIP_SIZE = 8;
+const SHOW_DELAY_SLOW = 1000;
+const SHOW_DELAY_FAST = 250;
+const HIDE_DELAY = 0;
+const ANIMATION_DURATION = 100;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tooltip', class extends NectaryElement {
+  #$pop;
+  #$tooltipText;
+  #$content;
+  #$contentWrapper;
+  #$tip;
+  #$target;
+  #controller = null;
+  #tooltipState;
+  #animation = null;
+  #shouldReduceMotion = false;
+  #isSubscribed = false;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$pop = shadowRoot.querySelector('#pop');
+    this.#$tooltipText = shadowRoot.querySelector('#text');
+    this.#$content = shadowRoot.querySelector('#content');
+    this.#$contentWrapper = shadowRoot.querySelector('#content-wrapper');
+    this.#$tip = shadowRoot.querySelector('#tip');
+    this.#$target = shadowRoot.querySelector('#target');
+    this.#shouldReduceMotion = shouldReduceMotion();
+    this.#tooltipState = new TooltipState({
+      showDelay: SHOW_DELAY_SLOW,
+      hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,
+      hideAnimationDuration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
+      onShowStart: this.#onStateShowStart,
+      onShowEnd: this.#onStateShowEnd,
+      onHideStart: this.#onStateHideStart,
+      onHideEnd: this.#onStateHideEnd
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$pop.addEventListener('-close', this.#onPopClose, options);
+    this.addEventListener('-show', this.#onShowReactHandler, options);
+    this.addEventListener('-hide', this.#onHideReactHandler, options);
+    updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+    this.#updateText();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#tooltipState.destroy();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['text', 'orientation', 'text-align', 'type', 'aria-label', 'aria-description'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.#updateText();
+          break;
+        }
+      case 'orientation':
+        {
+          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+          if (this.#isOpen()) {
+            this.#resetTipOrientation();
+            this.#updateTipOrientation();
+          }
+          break;
+        }
+      case 'text-align':
+        {
+          updateAttribute(this.#$pop, 'text-align', newVal);
+          break;
+        }
+      case 'type':
+        {
+          this.#tooltipState.updateOptions({
+            showDelay: newVal === 'fast' ? SHOW_DELAY_FAST : SHOW_DELAY_SLOW
+          });
+          break;
+        }
+      case 'aria-label':
+      case 'aria-description':
+        {
+          updateAttribute(this.#$pop, name, newVal);
+          break;
+        }
+    }
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get orientation() {
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'top');
+  }
+  set orientation(value) {
+    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+  }
+  get 'text-align'() {
+    return getLiteralAttribute(this, textAlignValues, 'text-align', 'left');
+  }
+  set 'text-align'(value) {
+    updateLiteralAttribute(this, textAlignValues, 'text-align', value);
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type', 'slow');
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  get footprintRect() {
+    return this.#$pop.footprintRect;
+  }
+  get tooltipRect() {
+    return this.#$pop.popoverRect;
+  }
+  #onMouseDown = () => {
+    this.#tooltipState.destroy();
+  };
+  #onPopClose = () => {
+    this.#tooltipState.destroy();
+  };
+  #onMouseEnter = () => {
+    this.#tooltipState.show();
+  };
+  #onMouseLeave = e => {
+    if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
+      this.#tooltipState.hide();
+    }
+  };
+  #onScroll = () => {
+    this.#tooltipState.destroy();
+  };
+  #onStateShowStart = () => {
+    this.#subscribeScroll();
+    this.#subscribeMouseLeaveEvents();
+  };
+  #onStateShowEnd = () => {
+    this.#dispatchShowEvent();
+    updateBooleanAttribute(this.#$pop, 'open', true);
+    requestAnimationFrame(this.#updateTipOrientation);
+    if (this.#animation !== null) {
+      this.#animation.updatePlaybackRate(1);
+      this.#animation.play();
+    } else {
+      this.#animation = this.#$content.animate({
+        opacity: [0, 1]
+      }, {
+        duration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
+        iterations: 1,
+        fill: 'forwards'
+      });
+    }
+  };
+  #onStateHideStart = () => {
+    this.#animation.updatePlaybackRate(-1);
+    this.#animation.play();
+  };
+  #onStateHideEnd = () => {
+    if (this.#isOpen()) {
+      this.#animation.finish();
+      this.#dispatchHideEvent();
+      updateBooleanAttribute(this.#$pop, 'open', false);
+    }
+    this.#resetTipOrientation();
+    this.#unsubscribeMouseLeaveEvents();
+    this.#unsubscribeScroll();
+  };
+  #resetTipOrientation() {
+    this.#$tip.style.top = '';
+    this.#$tip.style.left = '';
+  }
+  #updateTipOrientation = () => {
+    const orient = this.orientation;
+    const targetRect = this.#$pop.footprintRect;
+    const contentRect = this.#$content.getBoundingClientRect();
+    const diffX = targetRect.x - contentRect.x;
+    const diffY = targetRect.y - contentRect.y;
+    if (orient === 'left' || orient === 'right') {
+      const yPos = Math.max(TIP_SIZE, Math.min(diffY + targetRect.height / 2, contentRect.height - TIP_SIZE));
+      this.#$tip.style.top = `${yPos}px`;
+    } else {
+      let xPos = Math.max(TIP_SIZE, Math.min(diffX + targetRect.width / 2, contentRect.width - TIP_SIZE));
+      if (orient === 'bottom-left' || orient === 'top-left') {
+        xPos = Math.max(xPos, contentRect.width * 0.75);
+      }
+      if (orient === 'bottom-right' || orient === 'top-right') {
+        xPos = Math.min(xPos, contentRect.width * 0.25);
+      }
+      this.#$tip.style.left = `${xPos}px`;
+    }
+    setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
+  };
+  #updateText() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    const text = this.text;
+    this.#$tooltipText.textContent = text;
+    if (text.length === 0) {
+      if (this.#isSubscribed) {
+        this.#tooltipState.destroy();
+        this.#unsubscribeMouseEnterEvent();
+      }
+    } else {
+      this.#subscribeMouseEnterEvent();
+    }
+  }
+  #subscribeMouseEnterEvent() {
+    if (!this.isDomConnected || 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');
+  }
+  #dispatchShowEvent() {
+    this.dispatchEvent(new CustomEvent('-show'));
+  }
+  #dispatchHideEvent() {
+    this.dispatchEvent(new CustomEvent('-hide'));
+  }
+  #onShowReactHandler = () => {
+    getReactEventHandler(this, 'on-show')?.();
+  };
+  #onHideReactHandler = () => {
+    getReactEventHandler(this, 'on-hide')?.();
+  };
+});

package/tooltip/tooltip-state.d.ts

@@ -0,0 +1,19 @@
+type TTooltipStateOptions = {
+    showDelay: number;
+    hideDelay: number;
+    hideAnimationDuration: number;
+    onShowStart(): void;
+    onShowEnd(): void;
+    onHideStart(): void;
+    onHideEnd(): void;
+};
+export declare class TooltipState {
+    #private;
+    constructor(options: TTooltipStateOptions);
+    updateOptions(options: Partial<TTooltipStateOptions>): void;
+    show(): void;
+    hide(): void;
+    interrupt(): void;
+    destroy(): void;
+}
+export {};

package/tooltip/tooltip-state.js

@@ -0,0 +1,126 @@
+export class TooltipState {
+  #timerId = null;
+  #state = 'hide';
+  #options;
+  constructor(options) {
+    this.#options = options;
+  }
+  updateOptions(options) {
+    this.#options = {
+      ...this.#options,
+      ...options
+    };
+  }
+  show() {
+    switch (this.#state) {
+      case 'hide':
+        {
+          this.#switchToHideToShow();
+          break;
+        }
+      case 'show-to-hide':
+        {
+          this.#switchToState('show');
+          break;
+        }
+    }
+  }
+  hide() {
+    switch (this.#state) {
+      case 'hide-to-show':
+        {
+          this.#onHideAnimationEnd();
+          break;
+        }
+      case 'show':
+        {
+          this.#switchToShowToHide();
+          break;
+        }
+    }
+  }
+  interrupt() {
+    switch (this.#state) {
+      case 'hide-to-show':
+        {
+          this.#onHideAnimationEnd();
+          break;
+        }
+      case 'show':
+        {
+          this.#switchToShowToHide(true, false);
+          break;
+        }
+      case 'show-to-hide':
+        {
+          this.#switchToShowToHide(true, false);
+          break;
+        }
+    }
+  }
+  destroy() {
+    switch (this.#state) {
+      case 'hide-to-show':
+        {
+          this.#onHideAnimationEnd();
+          break;
+        }
+      case 'show':
+        {
+          this.#switchToShowToHide(true, true);
+          break;
+        }
+      case 'show-to-hide':
+        {
+          this.#switchToShowToHide(true, true);
+          break;
+        }
+      case 'hide':
+        {
+          this.#onHideAnimationEnd();
+          break;
+        }
+    }
+  }
+  #switchToHideToShow() {
+    this.#switchToState('hide-to-show');
+    this.#options.onShowStart();
+    if (this.#options.showDelay === 0) {
+      this.#onSwitchToShow();
+    } else {
+      this.#timerId = window.setTimeout(this.#onSwitchToShow, this.#options.showDelay);
+    }
+  }
+  #switchToShowToHide(skipDelay, skipHideAnimation) {
+    this.#switchToState('show-to-hide');
+    if (skipDelay === true || this.#options.hideDelay === 0) {
+      this.#onShowToHideEnd(skipHideAnimation);
+    } else {
+      this.#timerId = window.setTimeout(this.#onShowToHideEnd, this.#options.hideDelay);
+    }
+  }
+  #onSwitchToShow = () => {
+    this.#switchToState('show');
+    this.#options.onShowEnd();
+  };
+  #onShowToHideEnd = skipHideAnimation => {
+    this.#switchToState('hide');
+    this.#options.onHideStart();
+    if (skipHideAnimation === true || this.#options.hideAnimationDuration === 0) {
+      this.#onHideAnimationEnd();
+    } else {
+      this.#timerId = window.setTimeout(this.#onHideAnimationEnd, this.#options.hideAnimationDuration);
+    }
+  };
+  #onHideAnimationEnd = () => {
+    this.#switchToState('hide');
+    this.#options.onHideEnd();
+  };
+  #switchToState(nextState) {
+    this.#state = nextState;
+    if (this.#timerId !== null) {
+      clearTimeout(this.#timerId);
+      this.#timerId = null;
+    }
+  }
+}

package/tooltip/types.d.ts

@@ -0,0 +1,42 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type TSinchTooltipTextAlign = 'center' | 'right' | 'left';
+export type TSinchTooltipType = 'slow' | 'fast';
+export type TSinchTooltipElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Orientation, where it *points to* from origin */
+    orientation: TSinchTooltipOrientation;
+    /** Type */
+    type: TSinchTooltipType;
+    /** Text Align */
+    'text-align': TSinchTooltipTextAlign;
+    readonly footprintRect: TRect;
+    readonly tooltipRect: TRect;
+    /** Show event */
+    addEventListener(type: '-show', listener: (e: CustomEvent<void>) => void): void;
+    /** Hide event */
+    addEventListener(type: '-hide', listener: (e: CustomEvent<void>) => void): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Orientation, where it *points to* from origin */
+    setAttribute(name: 'orientation', value: TSinchTooltipOrientation): void;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchTooltipType): void;
+    /** Text Align */
+    setAttribute(name: 'text-align', value: TSinchTooltipTextAlign): void;
+};
+export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
+    /** Text */
+    text: string;
+    /** Orientation, where it *points to* from origin */
+    orientation?: TSinchTooltipOrientation;
+    /** Type */
+    type?: TSinchTooltipType;
+    /** Text Align */
+    'text-align'?: TSinchTooltipTextAlign;
+    /** Show event handler */
+    'on-show'?: (e: CustomEvent<void>) => void;
+    /** Hide event handler */
+    'on-hide'?: (e: CustomEvent<void>) => void;
+};

package/tooltip/types.js

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

package/tooltip/utils.d.ts

@@ -0,0 +1,6 @@
+import type { TSinchTooltipOrientation, TSinchTooltipType, TSinchTooltipTextAlign } from './types';
+import type { TSinchPopOrientation } from '../pop/types';
+export declare const typeValues: readonly TSinchTooltipType[];
+export declare const orientationValues: readonly TSinchTooltipOrientation[];
+export declare const textAlignValues: readonly TSinchTooltipTextAlign[];
+export declare const getPopOrientation: (orientation: TSinchTooltipOrientation) => TSinchPopOrientation;

package/tooltip/utils.js

@@ -0,0 +1,18 @@
+export const typeValues = ['fast', 'slow'];
+export const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
+export const textAlignValues = ['right', 'center', 'left'];
+export const getPopOrientation = orientation => {
+  if (orientation === 'top') {
+    return 'top-center';
+  }
+  if (orientation === 'bottom') {
+    return 'bottom-center';
+  }
+  if (orientation === 'left') {
+    return 'center-left';
+  }
+  if (orientation === 'right') {
+    return 'center-right';
+  }
+  return orientation;
+};

package/utils/context.d.ts

@@ -0,0 +1,20 @@
+export type TContextName = 'visibility' | 'keydown' | 'size';
+export type TContextKeydown = {
+    code: string;
+    preventDefault: () => void;
+};
+export type TContextVisibility = boolean;
+export type TContextSize = string;
+type TContextDataType = {
+    visibility: TContextVisibility;
+    keydown: TContextKeydown;
+    size: TContextSize;
+};
+export declare class Context<T extends TContextName> {
+    #private;
+    constructor($element: Element, name: T);
+    listen(signal: AbortSignal): void;
+    dispatch(contextValue: TContextDataType[T]): void;
+}
+export declare const subscribeContext: <T extends TContextName>($el: Element, name: T, cb: (e: CustomEvent<TContextDataType[T]>) => void, signal: AbortSignal) => void;
+export {};

package/utils/context.js

@@ -0,0 +1,84 @@
+const contextNameToEventMap = {
+  keydown: '-keydown',
+  visibility: '-visibility',
+  size: '-size'
+};
+const shouldPersistContextValue = {
+  keydown: false,
+  visibility: true,
+  size: true
+};
+export class Context {
+  #$root;
+  #listeners = new Set();
+  #name;
+  #isListening = false;
+  #lastContextValue = null;
+  constructor($element, name) {
+    this.#$root = $element;
+    this.#name = name;
+  }
+  listen(signal) {
+    if (this.#isListening) {
+      return;
+    }
+    this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onListenerConnect, {
+      signal
+    });
+    this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onListenerDisconnect, {
+      signal
+    });
+    this.#isListening = true;
+    signal.addEventListener('abort', () => {
+      this.#listeners.clear();
+      this.#isListening = false;
+      this.#lastContextValue = null;
+    }, {
+      once: true
+    });
+  }
+  dispatch(contextValue) {
+    for (const el of this.#listeners) {
+      el.dispatchEvent(new CustomEvent(contextNameToEventMap[this.#name], {
+        detail: contextValue
+      }));
+    }
+    if (shouldPersistContextValue[this.#name]) {
+      this.#lastContextValue = contextValue;
+    }
+  }
+  #onListenerConnect = e => {
+    e.stopPropagation();
+    this.#listeners.add(e.detail);
+    if (this.#lastContextValue !== null) {
+      e.detail.dispatchEvent(new CustomEvent(contextNameToEventMap[this.#name], {
+        detail: this.#lastContextValue
+      }));
+    }
+  };
+  #onListenerDisconnect = e => {
+    e.stopPropagation();
+    this.#listeners.delete(e.detail);
+  };
+}
+export const subscribeContext = ($el, name, cb, signal) => {
+  requestAnimationFrame(() => {
+    $el.dispatchEvent(new CustomEvent(`-context-connect-${name}`, {
+      bubbles: true,
+      composed: true,
+      detail: $el
+    }));
+  });
+  $el.addEventListener(contextNameToEventMap[name], cb, {
+    signal
+  });
+  signal.addEventListener('abort', () => {
+    $el.dispatchEvent(new CustomEvent(`-context-disconnect-${name}`, {
+      bubbles: true,
+      composed: true,
+      detail: $el
+    }));
+  }, {
+    once: true
+  });
+};

package/utils/countries.d.ts

@@ -0,0 +1,6 @@
+export type TSinchCountry = {
+    name: string;
+    phoneCode: string;
+    phoneMask: string | null;
+};
+export declare const countries: Record<string, TSinchCountry>;

package/utils/countries.js

@@ -0,0 +1,2 @@
+import countriesJson from './countries.json';
+export const countries = countriesJson;

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/debounce.d.ts

@@ -0,0 +1,8 @@
+export declare const debounceTimeout: (ms: number) => (cb: () => void) => {
+    fn: () => void;
+    cancel: () => void;
+};
+export declare const debounceAnimationFrame: (cb: () => void) => {
+    fn: () => void;
+    cancel: () => void;
+};

package/utils/debounce.js

@@ -0,0 +1,22 @@
+const createDebounce = (delayFn, cancelFn) => cb => {
+  let id = null;
+  const delayCallback = () => {
+    id = null;
+    cb();
+  };
+  return {
+    fn: () => {
+      if (id !== null) {
+        cancelFn(id);
+      }
+      id = delayFn(delayCallback);
+    },
+    cancel: () => {
+      if (id !== null) {
+        cancelFn(id);
+      }
+    }
+  };
+};
+export const debounceTimeout = ms => createDebounce(cb => globalThis.setTimeout(cb, ms), globalThis.clearTimeout);
+export const debounceAnimationFrame = createDebounce(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);