@studiometa/js-toolkit 2.12.1 → 3.0.0-alpha.10

package/services/scroll.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/scroll.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport debounce from '../utils/debounce.js';\nimport type { ServiceInterface } from './index.js';\n\nexport type ScrollService = ServiceInterface<ScrollServiceProps>;\n\nexport interface ScrollServiceProps {\n  x: number;\n  y: number;\n  changed: { x: boolean; y: boolean };\n  last: { x: number; y: number };\n  delta: { x: number; y: number };\n  progress: { x: number; y: number };\n  max: { x: number; y: number };\n  direction: { x: 'LEFT' | 'RIGHT' | 'NONE'; y: 'UP' | 'DOWN' | 'NONE' };\n}\n\n/**\n * Create scroll service.\n */\nfunction createScrollService(): ScrollService {\n  /**\n   * Update props.\n   */\n  function updateProps(): ScrollServiceProps {\n    const yLast = props.y;\n    const xLast = props.x;\n\n    // Check scroll Y\n    if (window.pageYOffset !== props.y) {\n      props.y = window.pageYOffset;\n    }\n\n    // Check scroll x\n    if (window.pageXOffset !== props.x) {\n      props.x = window.pageXOffset;\n    }\n\n    props.changed.x = props.x !== xLast;\n    props.changed.y = props.y !== yLast;\n    props.last.x = xLast;\n    props.last.y = yLast;\n    props.delta.x = props.x - xLast;\n    props.delta.y = props.y - yLast;\n    props.max.x = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;\n    props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;\n    props.progress.x = props.max.x === 0 ? 1 : props.x / props.max.x;\n    props.progress.y = props.max.y === 0 ? 1 : props.y / props.max.y;\n    /* eslint-disable no-nested-ternary */\n    props.direction.x = props.x > xLast ? 'RIGHT' : props.x < xLast ? 'LEFT' : 'NONE';\n    props.direction.y = props.y > yLast ? 'DOWN' : props.y < yLast ? 'UP' : 'NONE';\n    /* eslint-enable no-nested-ternary */\n\n    return props;\n  }\n\n  const onScrollDebounced = debounce(() => {\n    trigger(updateProps());\n  }, 100);\n\n  /**\n   * Scroll handler.\n   */\n  function onScroll() {\n    trigger(updateProps());\n    onScrollDebounced();\n  }\n\n  const { add, remove, has, props, trigger } = useService({\n    props: {\n      x: window.pageXOffset,\n      y: window.pageYOffset,\n      changed: {\n        x: false,\n        y: false,\n      },\n      last: {\n        x: window.pageXOffset,\n        y: window.pageYOffset,\n      },\n      delta: {\n        x: 0,\n        y: 0,\n      },\n      max: {\n        x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,\n        y: (document.scrollingElement || document.body).scrollHeight - window.innerHeight,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      direction: {\n        x: 'NONE',\n        y: 'NONE',\n      },\n    } as ScrollServiceProps,\n    init() {\n      document.addEventListener('scroll', onScroll, { passive: true, capture: true });\n    },\n    kill() {\n      document.removeEventListener('scroll', onScroll);\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nlet scroll;\n\n/**\n * Use the scroll service.\n *\n * ```js\n * import { useScroll } from '@studiometa/js-toolkit/services';\n * const { add, remove, props } = useScroll();\n * add(key, (props) => {});\n * remove(key);\n * props();\n * ```\n */\nexport default function useScroll(): ScrollService {\n  if (!scroll) {\n    scroll = createScrollService();\n  }\n\n  return scroll;\n}\n"],
-  "mappings": "AACA,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AAmBrB,SAAS,sBAAqC;AAI5C,WAAS,cAAkC;AACzC,UAAM,QAAQ,MAAM;AACpB,UAAM,QAAQ,MAAM;AAGpB,QAAI,OAAO,gBAAgB,MAAM,GAAG;AAClC,YAAM,IAAI,OAAO;AAAA,IACnB;AAGA,QAAI,OAAO,gBAAgB,MAAM,GAAG;AAClC,YAAM,IAAI,OAAO;AAAA,IACnB;AAEA,UAAM,QAAQ,IAAI,MAAM,MAAM;AAC9B,UAAM,QAAQ,IAAI,MAAM,MAAM;AAC9B,UAAM,KAAK,IAAI;AACf,UAAM,KAAK,IAAI;AACf,UAAM,MAAM,IAAI,MAAM,IAAI;AAC1B,UAAM,MAAM,IAAI,MAAM,IAAI;AAC1B,UAAM,IAAI,KAAK,SAAS,oBAAoB,SAAS,MAAM,cAAc,OAAO;AAChF,UAAM,IAAI,KAAK,SAAS,oBAAoB,SAAS,MAAM,eAAe,OAAO;AACjF,UAAM,SAAS,IAAI,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AAC/D,UAAM,SAAS,IAAI,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AAE/D,UAAM,UAAU,IAAI,MAAM,IAAI,QAAQ,UAAU,MAAM,IAAI,QAAQ,SAAS;AAC3E,UAAM,UAAU,IAAI,MAAM,IAAI,QAAQ,SAAS,MAAM,IAAI,QAAQ,OAAO;AAGxE,WAAO;AAAA,EACT;AAEA,QAAM,oBAAoB,SAAS,MAAM;AACvC,YAAQ,YAAY,CAAC;AAAA,EACvB,GAAG,GAAG;AAKN,WAAS,WAAW;AAClB,YAAQ,YAAY,CAAC;AACrB,sBAAkB;AAAA,EACpB;AAEA,QAAM,EAAE,KAAK,QAAQ,KAAK,OAAO,QAAQ,IAAI,WAAW;AAAA,IACtD,OAAO;AAAA,MACL,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,MACV,SAAS;AAAA,QACP,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,MAAM;AAAA,QACJ,GAAG,OAAO;AAAA,QACV,GAAG,OAAO;AAAA,MACZ;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,KAAK;AAAA,QACH,IAAI,SAAS,oBAAoB,SAAS,MAAM,cAAc,OAAO;AAAA,QACrE,IAAI,SAAS,oBAAoB,SAAS,MAAM,eAAe,OAAO;AAAA,MACxE;AAAA,MACA,UAAU;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,WAAW;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,OAAO;AACL,eAAS,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,SAAS,KAAK,CAAC;AAAA,IAChF;AAAA,IACA,OAAO;AACL,eAAS,oBAAoB,UAAU,QAAQ;AAAA,IACjD;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAI;AAaW,SAAR,YAA4C;AACjD,MAAI,CAAC,QAAQ;AACX,aAAS,oBAAoB;AAAA,EAC/B;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport debounce from '../utils/debounce.js';\nimport type { ServiceInterface } from './index.js';\n\nexport type ScrollService = ServiceInterface<ScrollServiceProps>;\n\nexport interface ScrollServiceProps {\n  x: number;\n  y: number;\n  changed: { x: boolean; y: boolean };\n  changedX: boolean;\n  changedY: boolean;\n  last: { x: number; y: number };\n  lastX: number;\n  lastY: number;\n  delta: { x: number; y: number };\n  deltaX: number;\n  deltaY: number;\n  progress: { x: number; y: number };\n  progressX: number;\n  progressY: number;\n  max: { x: number; y: number };\n  maxX: number;\n  maxY: number;\n  direction: { x: 'LEFT' | 'RIGHT' | 'NONE'; y: 'UP' | 'DOWN' | 'NONE' };\n  isUp: boolean;\n  isRight: boolean;\n  isDown: boolean;\n  isLeft: boolean;\n}\n\n/**\n * Create scroll service.\n */\nfunction createScrollService(): ScrollService {\n  /**\n   * Update props.\n   */\n  function updateProps(): ScrollServiceProps {\n    const yLast = props.y;\n    const xLast = props.x;\n\n    // Check scroll Y\n    if (window.scrollY !== props.y) {\n      props.y = window.scrollY;\n    }\n\n    // Check scroll x\n    if (window.scrollX !== props.x) {\n      props.x = window.scrollX;\n    }\n\n    props.changed.x = props.changedX = props.x !== xLast;\n    props.changed.y = props.changedY = props.y !== yLast;\n    props.last.x = props.lastX = xLast;\n    props.last.y = props.lastY = yLast;\n    props.delta.x = props.deltaX = props.x - xLast;\n    props.delta.y = props.deltaY = props.y - yLast;\n    props.max.x = props.maxX = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;\n    props.max.y = props.maxY = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;\n    props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;\n    props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;\n    props.isUp = props.y < yLast;\n    props.isRight = props.x > xLast;\n    props.isDown = props.y > yLast;\n    props.isLeft = props.x < xLast;\n    /* eslint-disable no-nested-ternary */\n    props.direction.x = props.isRight ? 'RIGHT' : props.isLeft ? 'LEFT' : 'NONE';\n    props.direction.y = props.isDown ? 'DOWN' : props.isUp ? 'UP' : 'NONE';\n    /* eslint-enable no-nested-ternary */\n\n    return props;\n  }\n\n  const onScrollDebounced = debounce(() => {\n    trigger(updateProps());\n  }, 100);\n\n  /**\n   * Scroll handler.\n   */\n  function onScroll() {\n    trigger(updateProps());\n    onScrollDebounced();\n  }\n\n  const { add, remove, has, props, trigger } = useService({\n    props: {\n      x: window.scrollX,\n      y: window.scrollY,\n      changed: {\n        x: false,\n        y: false,\n      },\n      changedX: false,\n      changedY: false,\n      last: {\n        x: window.scrollX,\n        y: window.scrollY,\n      },\n      lastX: window.scrollX,\n      lastY: window.scrollY,\n      delta: {\n        x: 0,\n        y: 0,\n      },\n      deltaX: 0,\n      deltaY: 0,\n      max: {\n        x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,\n        y: (document.scrollingElement || document.body).scrollHeight - window.innerHeight,\n      },\n      maxX: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,\n      maxY: (document.scrollingElement || document.body).scrollHeight - window.innerHeight,\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      progressX: 0,\n      progressY: 0,\n      direction: {\n        x: 'NONE',\n        y: 'NONE',\n      },\n      isUp: false,\n      isRight: false,\n      isDown: false,\n      isLeft: false,\n    } as ScrollServiceProps,\n    init() {\n      document.addEventListener('scroll', onScroll, { passive: true, capture: true });\n    },\n    kill() {\n      document.removeEventListener('scroll', onScroll);\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nlet scroll;\n\n/**\n * Use the scroll service.\n *\n * ```js\n * import { useScroll } from '@studiometa/js-toolkit/services';\n * const { add, remove, props } = useScroll();\n * add(key, (props) => {});\n * remove(key);\n * props();\n * ```\n */\nexport default function useScroll(): ScrollService {\n  if (!scroll) {\n    scroll = createScrollService();\n  }\n\n  return scroll;\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AAiCrB,SAAS,sBAAqC;AAI5C,WAAS,cAAkC;AACzC,UAAM,QAAQ,MAAM;AACpB,UAAM,QAAQ,MAAM;AAGpB,QAAI,OAAO,YAAY,MAAM,GAAG;AAC9B,YAAM,IAAI,OAAO;AAAA,IACnB;AAGA,QAAI,OAAO,YAAY,MAAM,GAAG;AAC9B,YAAM,IAAI,OAAO;AAAA,IACnB;AAEA,UAAM,QAAQ,IAAI,MAAM,WAAW,MAAM,MAAM;AAC/C,UAAM,QAAQ,IAAI,MAAM,WAAW,MAAM,MAAM;AAC/C,UAAM,KAAK,IAAI,MAAM,QAAQ;AAC7B,UAAM,KAAK,IAAI,MAAM,QAAQ;AAC7B,UAAM,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI;AACzC,UAAM,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI;AACzC,UAAM,IAAI,IAAI,MAAM,QAAQ,SAAS,oBAAoB,SAAS,MAAM,cAAc,OAAO;AAC7F,UAAM,IAAI,IAAI,MAAM,QAAQ,SAAS,oBAAoB,SAAS,MAAM,eAAe,OAAO;AAC9F,UAAM,SAAS,IAAI,MAAM,YAAY,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AACjF,UAAM,SAAS,IAAI,MAAM,YAAY,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AACjF,UAAM,OAAO,MAAM,IAAI;AACvB,UAAM,UAAU,MAAM,IAAI;AAC1B,UAAM,SAAS,MAAM,IAAI;AACzB,UAAM,SAAS,MAAM,IAAI;AAEzB,UAAM,UAAU,IAAI,MAAM,UAAU,UAAU,MAAM,SAAS,SAAS;AACtE,UAAM,UAAU,IAAI,MAAM,SAAS,SAAS,MAAM,OAAO,OAAO;AAGhE,WAAO;AAAA,EACT;AAEA,QAAM,oBAAoB,SAAS,MAAM;AACvC,YAAQ,YAAY,CAAC;AAAA,EACvB,GAAG,GAAG;AAKN,WAAS,WAAW;AAClB,YAAQ,YAAY,CAAC;AACrB,sBAAkB;AAAA,EACpB;AAEA,QAAM,EAAE,KAAK,QAAQ,KAAK,OAAO,QAAQ,IAAI,WAAW;AAAA,IACtD,OAAO;AAAA,MACL,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,MACV,SAAS;AAAA,QACP,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,QACJ,GAAG,OAAO;AAAA,QACV,GAAG,OAAO;AAAA,MACZ;AAAA,MACA,OAAO,OAAO;AAAA,MACd,OAAO,OAAO;AAAA,MACd,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,KAAK;AAAA,QACH,IAAI,SAAS,oBAAoB,SAAS,MAAM,cAAc,OAAO;AAAA,QACrE,IAAI,SAAS,oBAAoB,SAAS,MAAM,eAAe,OAAO;AAAA,MACxE;AAAA,MACA,OAAO,SAAS,oBAAoB,SAAS,MAAM,cAAc,OAAO;AAAA,MACxE,OAAO,SAAS,oBAAoB,SAAS,MAAM,eAAe,OAAO;AAAA,MACzE,UAAU;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,OAAO;AACL,eAAS,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,SAAS,KAAK,CAAC;AAAA,IAChF;AAAA,IACA,OAAO;AACL,eAAS,oBAAoB,UAAU,QAAQ;AAAA,IACjD;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAI;AAaW,SAAR,YAA4C;AACjD,MAAI,CAAC,QAAQ;AACX,aAAS,oBAAoB;AAAA,EAC/B;AAEA,SAAO;AACT;",
   "names": []
 }

package/utils/SmartQueue.d.ts

@@ -1,5 +1,5 @@
 import { Queue } from './Queue.js';
-import nextTick from './nextTick.js';
+import { nextTick } from './nextTick.js';
 /**
  * Manage tasks in a smart queue.
  * Tasks will be automatically batch-called inside a single event loop

package/utils/SmartQueue.js

@@ -1,5 +1,5 @@
 import { Queue } from "./Queue.js";
-import nextTick from "./nextTick.js";
+import { nextTick } from "./nextTick.js";
 const LONG_TASK_DURATION = 40;
 class SmartQueue extends Queue {
   /**

package/utils/SmartQueue.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/SmartQueue.ts"],
-  "sourcesContent": ["import { Queue } from './Queue.js';\nimport nextTick from './nextTick.js';\n\n/**\n * A task is considered long if it blocks the main thread for more thant 50ms.\n * By using 40ms as a limit, we make the bet that we can avoid long running\n * tasks by dispatching small tasks smartly.\n *\n * @see https://developer.mozilla.org/en-US/docs/Glossary/Long_task\n */\nconst LONG_TASK_DURATION = 40;\n\n/**\n * Manage tasks in a smart queue.\n * Tasks will be automatically batch-called inside a single event loop\n * lasting no more than 50ms, which is considered a long task.\n */\nexport class SmartQueue extends Queue {\n  /**\n   * A function to schedule the next batch.\n   */\n  waiter = nextTick;\n\n  /**\n   * Class constructor.\n   */\n  constructor() {\n    super(Number.POSITIVE_INFINITY, nextTick);\n  }\n\n  /**\n   * Flush current batch.\n   */\n  flush() {\n    this.run(this.tasks);\n    this.isScheduled = false;\n\n    if (this.tasks.length > 0) {\n      this.scheduleFlush();\n    }\n  }\n\n  /**\n   * Run the queue.\n   */\n  run(tasks: Array<(...args: unknown[]) => unknown>) {\n    let task;\n    const start = performance.now();\n    let now = start;\n    // eslint-disable-next-line no-cond-assign\n    while (now - start < LONG_TASK_DURATION && (task = tasks.shift())) {\n      task();\n      now = performance.now();\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,cAAc;AASrB,MAAM,qBAAqB;AAOpB,MAAM,mBAAmB,MAAM;AAAA;AAAA;AAAA;AAAA,EAIpC,SAAS;AAAA;AAAA;AAAA;AAAA,EAKT,cAAc;AACZ,UAAM,OAAO,mBAAmB,QAAQ;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AACN,SAAK,IAAI,KAAK,KAAK;AACnB,SAAK,cAAc;AAEnB,QAAI,KAAK,MAAM,SAAS,GAAG;AACzB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,OAA+C;AACjD,QAAI;AACJ,UAAM,QAAQ,YAAY,IAAI;AAC9B,QAAI,MAAM;AAEV,WAAO,MAAM,QAAQ,uBAAuB,OAAO,MAAM,MAAM,IAAI;AACjE,WAAK;AACL,YAAM,YAAY,IAAI;AAAA,IACxB;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Queue } from './Queue.js';\nimport { nextTick } from './nextTick.js';\n\n/**\n * A task is considered long if it blocks the main thread for more thant 50ms.\n * By using 40ms as a limit, we make the bet that we can avoid long running\n * tasks by dispatching small tasks smartly.\n *\n * @see https://developer.mozilla.org/en-US/docs/Glossary/Long_task\n */\nconst LONG_TASK_DURATION = 40;\n\n/**\n * Manage tasks in a smart queue.\n * Tasks will be automatically batch-called inside a single event loop\n * lasting no more than 50ms, which is considered a long task.\n */\nexport class SmartQueue extends Queue {\n  /**\n   * A function to schedule the next batch.\n   */\n  waiter = nextTick;\n\n  /**\n   * Class constructor.\n   */\n  constructor() {\n    super(Number.POSITIVE_INFINITY, nextTick);\n  }\n\n  /**\n   * Flush current batch.\n   */\n  flush() {\n    this.run(this.tasks);\n    this.isScheduled = false;\n\n    if (this.tasks.length > 0) {\n      this.scheduleFlush();\n    }\n  }\n\n  /**\n   * Run the queue.\n   */\n  run(tasks: Array<(...args: unknown[]) => unknown>) {\n    let task;\n    const start = performance.now();\n    let now = start;\n    // eslint-disable-next-line no-cond-assign\n    while (now - start < LONG_TASK_DURATION && (task = tasks.shift())) {\n      task();\n      now = performance.now();\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,gBAAgB;AASzB,MAAM,qBAAqB;AAOpB,MAAM,mBAAmB,MAAM;AAAA;AAAA;AAAA;AAAA,EAIpC,SAAS;AAAA;AAAA;AAAA;AAAA,EAKT,cAAc;AACZ,UAAM,OAAO,mBAAmB,QAAQ;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AACN,SAAK,IAAI,KAAK,KAAK;AACnB,SAAK,cAAc;AAEnB,QAAI,KAAK,MAAM,SAAS,GAAG;AACzB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,OAA+C;AACjD,QAAI;AACJ,UAAM,QAAQ,YAAY,IAAI;AAC9B,QAAI,MAAM;AAEV,WAAO,MAAM,QAAQ,uBAAuB,OAAO,MAAM,MAAM,IAAI;AACjE,WAAK;AACL,YAAM,YAAY,IAAI;AAAA,IACxB;AAAA,EACF;AACF;",
   "names": []
 }

package/utils/css/animate.d.ts

@@ -1,27 +1,45 @@
 import type { TransformProps } from './transform.js';
 import type { EasingFunction } from '../math/index.js';
-import type { BezierCurve, TweenOptions } from '../tween.js';
+import type { BezierCurve, Tween, TweenOptions } from '../tween.js';
 export type CSSCustomPropertyName = `--${string}`;
-export type Keyframe = TransformProps & {
-    opacity?: number;
-    transformOrigin?: string;
-    easing?: EasingFunction | BezierCurve;
-    offset?: number;
-    [key: CSSCustomPropertyName]: number;
+type KeyframeTransforms<Type> = {
+    [Property in keyof Type]: number | [number, string];
 };
+export type Keyframe = Partial<KeyframeTransforms<TransformProps> & {
+    opacity: number;
+    transformOrigin: string;
+    easing: EasingFunction | BezierCurve;
+    offset: number;
+    [key: CSSCustomPropertyName]: number;
+}>;
 export type NormalizedKeyframe = Keyframe & {
     easing: EasingFunction;
     offset: number;
     vars: string[];
 };
-export type Animate = {
-    start: () => void;
-    pause: () => void;
-    play: () => void;
-    finish: () => void;
-    progress: (value?: number) => number;
-};
+export interface AnimateOptions extends Omit<TweenOptions, 'duration'> {
+    /**
+     * The duration of the tween, in seconds.
+     * When using multiple targets, it can be a function which will be
+     * called with the current target and its index and should return
+     * the duration in seconds for this element.
+     *
+     * Defaults to `1`.
+     */
+    duration?: number | ((target: HTMLElement, index: number) => number);
+    /**
+     * Delay between the start of each target animation, in seconds.
+     * When using multiple targets, it can be a function which will be called
+     * with the current target and its index and should return the delay
+     * in seconds for this element's tween.
+     *
+     * Defaults to `0`.
+     */
+    stagger?: number | ((target: HTMLElement, index: number) => number);
+}
+export type Animate = Tween;
 /**
  * Animate one or more elements.
  */
-export declare function animate(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, keyframes: Keyframe[], options?: TweenOptions): Animate;
+export declare function animate(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, keyframes: Keyframe[], options?: AnimateOptions): Animate;
+export {};

package/utils/css/animate.js

@@ -1,6 +1,6 @@
-import { lerp, map } from "../math/index.js";
+import { clamp01, lerp, map, mean } from "../math/index.js";
 import { isDefined, isFunction, isNumber } from "../is.js";
-import transform, { TRANSFORM_PROPS } from "./transform.js";
+import { transform, TRANSFORM_PROPS } from "./transform.js";
 import { domScheduler as scheduler } from "../scheduler.js";
 import { tween, normalizeEase } from "../tween.js";
 import { eachElements } from "./utils.js";
@@ -70,21 +70,20 @@ function render(element, from, to, progress) {
     }
     let customProperties = false;
     if (isDefined(from.vars) && isDefined(to.vars)) {
-      customProperties = from.vars.map((customPropertyName) => {
-        const customPropertyValue = lerp(
-          from[customPropertyName],
-          to[customPropertyName],
-          stepProgress
-        );
-        return [customPropertyName, customPropertyValue];
-      });
+      customProperties = [];
+      for (const customPropertyName of from.vars) {
+        customProperties.push([
+          customPropertyName,
+          lerp(from[customPropertyName], to[customPropertyName], stepProgress)
+        ]);
+      }
+    }
+    const props = {};
+    for (const name of TRANSFORM_PROPS) {
+      if (isDefined(from[name]) || isDefined(to[name])) {
+        props[name] = transformRenderStrategies[name](element, from[name], to[name], stepProgress);
+      }
     }
-    const props = Object.fromEntries(
-      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [
-        name,
-        transformRenderStrategies[name](element, from[name], to[name], stepProgress)
-      ])
-    );
     scheduler.write(() => {
       if (opacity !== false) {
         element.style.opacity = opacity;
@@ -125,9 +124,9 @@ function singleAnimate(element, keyframes, options = {}) {
   }
   const controls = tween(callback, {
     ...options,
-    onStart() {
+    onStart(progress) {
       if (isFunction(options.onStart)) {
-        options.onStart();
+        options.onStart(progress);
       }
       const runningKeys = running.get(element);
       for (const [runningKey, runningPause] of runningKeys.entries()) {
@@ -141,18 +140,60 @@ function singleAnimate(element, keyframes, options = {}) {
   return controls;
 }
 function animate(elementOrElements, keyframes, options = {}) {
-  const controls = eachElements(
-    elementOrElements,
-    (element) => singleAnimate(element, keyframes, options)
-  );
+  if (elementOrElements instanceof HTMLElement) {
+    return singleAnimate(elementOrElements, keyframes, {
+      ...options,
+      duration: isFunction(options.duration) ? options.duration(elementOrElements, 0) : options.duration
+    });
+  }
+  const stagger = options.stagger ?? 0;
+  const staggerIsFunction = isFunction(stagger);
+  const durationFn = isFunction(options.duration) ? options.duration : null;
+  const progressFn = isFunction(options.onProgress) ? options.onProgress : null;
+  const progresses = [];
+  const timings = [];
+  let duration = 0;
+  let previousTimings = [0, 0, 0];
+  const controls = eachElements(elementOrElements, (element, index) => {
+    const delay = staggerIsFunction ? stagger(element, index) : stagger * index;
+    const itemOptions = { ...options, delay };
+    if (durationFn) {
+      itemOptions.duration = durationFn(element, index);
+    } else if (!isDefined(itemOptions.duration)) {
+      itemOptions.duration = 1;
+    }
+    timings[index] = [itemOptions.duration, delay, itemOptions.duration + delay];
+    if (timings[index][2] > previousTimings[2]) {
+      duration = timings[index][2];
+    }
+    previousTimings = timings[index];
+    progresses[index] = 0;
+    itemOptions.onProgress = (itemProgress) => {
+      progresses[index] = itemProgress;
+      if (progressFn) {
+        progressFn(mean(progresses));
+      }
+    };
+    return singleAnimate(element, keyframes, itemOptions);
+  });
   const delegate = (key) => (
     // eslint-disable-next-line consistent-return
-    (...args) => {
-      if (key === "progress" && args.length === 0) {
-        return controls[0][key]();
+    function delegated() {
+      if (key === "progress") {
+        if (arguments.length === 1) {
+          const newProgress = arguments[0];
+          const newTime = lerp(0, duration, newProgress);
+          for (const [index, control] of controls.entries()) {
+            const controlProgress = clamp01(
+              map(newTime, timings[index][1], timings[index][2], 0, 1)
+            );
+            control.progress(controlProgress);
+          }
+        }
+        return mean(progresses);
       }
       for (const control of controls) {
-        control[key](...args);
+        control[key].call(null, arguments);
       }
     }
   );

package/utils/css/animate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/animate.ts"],
-  "sourcesContent": ["import { lerp, map } from '../math/index.js';\nimport { isDefined, isFunction, isNumber } from '../is.js';\nimport transform, { TRANSFORM_PROPS } from './transform.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\nimport { startsWith } from '../string/index.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, TweenOptions } from '../tween.js';\n\nexport type CSSCustomPropertyName = `--${string}`;\n\nexport type Keyframe = TransformProps & {\n  opacity?: number;\n  transformOrigin?: string;\n  easing?: EasingFunction | BezierCurve;\n  offset?: number;\n  [key: CSSCustomPropertyName]: number;\n};\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n  vars: string[];\n};\n\nexport type Animate = {\n  start: () => void;\n  pause: () => void;\n  play: () => void;\n  finish: () => void;\n  progress: (value?: number) => number;\n};\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value, getSizeRef) => (value * getSizeRef()) / 100,\n  vh: (value) => (value * window.innerHeight) / 100,\n  vw: (value) => (value * window.innerWidth) / 100,\n  vmin: (value) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Get the value from a step property.\n */\nfunction getAnimationStepValue(val: number | [number, string], getSizeRef: () => number): number {\n  if (isNumber(val)) {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], getSizeRef);\n}\n\nconst generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) =>\n  lerp(\n    getAnimationStepValue(\n      fromValue ?? 0,\n      /* istanbul ignore next */\n      () => element[sizeRef],\n    ),\n    getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),\n    progress,\n  );\nconst widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetWidth');\nconst heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetHeight');\n\nconst generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) =>\n  lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);\nconst scaleRenderStrategy = generateLerpRenderStrategy(1);\nconst degreesRenderStrategy = generateLerpRenderStrategy(0);\n\nconst transformRenderStrategies = {\n  x: widthBasedTranslateRenderStrategy,\n  y: heightBasedTranslateRenderStrategy,\n  z: widthBasedTranslateRenderStrategy,\n  scale: scaleRenderStrategy,\n  scaleX: scaleRenderStrategy,\n  scaleY: scaleRenderStrategy,\n  scaleZ: scaleRenderStrategy,\n  skew: degreesRenderStrategy,\n  skewX: degreesRenderStrategy,\n  skewY: degreesRenderStrategy,\n  rotate: degreesRenderStrategy,\n  rotateX: degreesRenderStrategy,\n  rotateY: degreesRenderStrategy,\n  rotateZ: degreesRenderStrategy,\n};\n\n/**\n * Render an element style based on 2 keyframes and a progress value.\n */\nfunction render(\n  element: HTMLElement,\n  from: NormalizedKeyframe,\n  to: NormalizedKeyframe,\n  progress: number,\n) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(() => {\n    let opacity: false | number | string = false;\n    if (isDefined(from.opacity) || isDefined(to.opacity)) {\n      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    let transformOrigin: false | string = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    let customProperties: false | [string, number][] = false;\n    if (isDefined(from.vars) && isDefined(to.vars)) {\n      customProperties = from.vars.map((customPropertyName) => {\n        const customPropertyValue = lerp(\n          from[customPropertyName],\n          to[customPropertyName],\n          stepProgress,\n        );\n        return [customPropertyName, customPropertyValue];\n      });\n    }\n\n    const props = Object.fromEntries(\n      TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => [\n        name,\n        transformRenderStrategies[name](element, from[name], to[name], stepProgress),\n      ]),\n    );\n    scheduler.write(() => {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      if (customProperties !== false) {\n        for (const customProperty of customProperties) {\n          element.style.setProperty(customProperty[0], customProperty[1].toString());\n        }\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * Animate an element.\n */\nfunction singleAnimate(\n  element: HTMLElement,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index): NormalizedKeyframe => ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\n      vars: Object.keys(keyframe).filter((key) => startsWith(key, '--')),\n    }),\n  );\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   */\n  function callback(progress: number) {\n    let toIndex = 0;\n    while (\n      normalizedKeyframes[toIndex] &&\n      normalizedKeyframes[toIndex].offset <= progress &&\n      normalizedKeyframes[toIndex].offset !== 1\n    ) {\n      toIndex += 1;\n    }\n\n    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart() {\n      if (isFunction(options.onStart)) {\n        options.onStart();\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      for (const [runningKey, runningPause] of runningKeys.entries()) {\n        runningPause();\n        runningKeys.delete(runningKey);\n      }\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\n/**\n * Animate one or more elements.\n */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const controls = eachElements(elementOrElements, (element) =>\n    singleAnimate(element, keyframes, options),\n  );\n\n  const delegate =\n    (key) =>\n    // eslint-disable-next-line consistent-return\n    (...args) => {\n      if (key === 'progress' && args.length === 0) {\n        return controls[0][key]();\n      }\n\n      for (const control of controls) {\n        control[key](...args);\n      }\n    };\n\n  return {\n    start: delegate('start'),\n    pause: delegate('pause'),\n    finish: delegate('finish'),\n    play: delegate('play'),\n    progress: delegate('progress'),\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { clamp01, lerp, map, mean } from '../math/index.js';\nimport { isDefined, isFunction, isNumber } from '../is.js';\nimport { transform, TRANSFORM_PROPS } from './transform.js';\nimport { domScheduler as scheduler } from '../scheduler.js';\nimport { tween, normalizeEase } from '../tween.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\nimport { startsWith } from '../string/index.js';\nimport type { TransformProps } from './transform.js';\nimport type { EasingFunction } from '../math/index.js';\nimport type { BezierCurve, Tween, TweenOptions } from '../tween.js';\n\nexport type CSSCustomPropertyName = `--${string}`;\n\ntype KeyframeTransforms<Type> = {\n  [Property in keyof Type]: number | [number, string];\n};\n\nexport type Keyframe = Partial<\n  KeyframeTransforms<TransformProps> & {\n    opacity: number;\n    transformOrigin: string;\n    easing: EasingFunction | BezierCurve;\n    offset: number;\n    [key: CSSCustomPropertyName]: number;\n  }\n>;\n\nexport type NormalizedKeyframe = Keyframe & {\n  easing: EasingFunction;\n  offset: number;\n  vars: string[];\n};\n\nexport interface AnimateOptions extends Omit<TweenOptions, 'duration'> {\n  /**\n   * The duration of the tween, in seconds.\n   * When using multiple targets, it can be a function which will be\n   * called with the current target and its index and should return\n   * the duration in seconds for this element.\n   *\n   * Defaults to `1`.\n   */\n  duration?: number | ((target: HTMLElement, index: number) => number);\n  /**\n   * Delay between the start of each target animation, in seconds.\n   * When using multiple targets, it can be a function which will be called\n   * with the current target and its index and should return the delay\n   * in seconds for this element's tween.\n   *\n   * Defaults to `0`.\n   */\n  stagger?: number | ((target: HTMLElement, index: number) => number);\n}\n\nexport type Animate = Tween;\n\nlet id = 0;\nconst running = new WeakMap();\n\nconst CSSUnitConverter = {\n  '%': (value, getSizeRef) => (value * getSizeRef()) / 100,\n  vh: (value) => (value * window.innerHeight) / 100,\n  vw: (value) => (value * window.innerWidth) / 100,\n  vmin: (value) => (value * Math.min(window.innerWidth, window.innerHeight)) / 100,\n  vmax: (value) => (value * Math.max(window.innerWidth, window.innerHeight)) / 100,\n};\n\n/**\n * Get the value from a step property.\n */\nfunction getAnimationStepValue(val: number | [number, string], getSizeRef: () => number): number {\n  if (isNumber(val)) {\n    return val;\n  }\n\n  if (!val[1] || !CSSUnitConverter[val[1]]) {\n    return val[0];\n  }\n\n  return CSSUnitConverter[val[1]](val[0], getSizeRef);\n}\n\nconst generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) =>\n  lerp(\n    getAnimationStepValue(\n      fromValue ?? 0,\n      /* istanbul ignore next */\n      () => element[sizeRef],\n    ),\n    getAnimationStepValue(toValue ?? 0, () => element[sizeRef]),\n    progress,\n  );\nconst widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetWidth');\nconst heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy('offsetHeight');\n\nconst generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) =>\n  lerp(fromValue ?? defaultValue, toValue ?? defaultValue, progress);\nconst scaleRenderStrategy = generateLerpRenderStrategy(1);\nconst degreesRenderStrategy = generateLerpRenderStrategy(0);\n\nconst transformRenderStrategies = {\n  x: widthBasedTranslateRenderStrategy,\n  y: heightBasedTranslateRenderStrategy,\n  z: widthBasedTranslateRenderStrategy,\n  scale: scaleRenderStrategy,\n  scaleX: scaleRenderStrategy,\n  scaleY: scaleRenderStrategy,\n  scaleZ: scaleRenderStrategy,\n  skew: degreesRenderStrategy,\n  skewX: degreesRenderStrategy,\n  skewY: degreesRenderStrategy,\n  rotate: degreesRenderStrategy,\n  rotateX: degreesRenderStrategy,\n  rotateY: degreesRenderStrategy,\n  rotateZ: degreesRenderStrategy,\n};\n\n/**\n * Render an element style based on 2 keyframes and a progress value.\n */\nfunction render(\n  element: HTMLElement,\n  from: NormalizedKeyframe,\n  to: NormalizedKeyframe,\n  progress: number,\n) {\n  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));\n\n  scheduler.read(() => {\n    let opacity: false | number | string = false;\n    if (isDefined(from.opacity) || isDefined(to.opacity)) {\n      opacity = map(stepProgress, 0, 1, from.opacity ?? 1, to.opacity ?? 1);\n    } else if (element.style.opacity) {\n      opacity = '';\n    }\n\n    let transformOrigin: false | string = false;\n    if (isDefined(to.transformOrigin)) {\n      transformOrigin = to.transformOrigin;\n    } else if (element.style.transformOrigin) {\n      transformOrigin = '';\n    }\n\n    let customProperties: false | [string, number][] = false;\n    if (isDefined(from.vars) && isDefined(to.vars)) {\n      customProperties = [];\n      for (const customPropertyName of from.vars) {\n        customProperties.push([\n          customPropertyName,\n          lerp(from[customPropertyName], to[customPropertyName], stepProgress),\n        ]);\n      }\n    }\n\n    const props = {};\n\n    for (const name of TRANSFORM_PROPS) {\n      if (isDefined(from[name]) || isDefined(to[name])) {\n        props[name] = transformRenderStrategies[name](element, from[name], to[name], stepProgress);\n      }\n    }\n\n    scheduler.write(() => {\n      if (opacity !== false) {\n        // @ts-ignore\n        element.style.opacity = opacity;\n      }\n      if (transformOrigin !== false) {\n        element.style.transformOrigin = transformOrigin;\n      }\n      if (customProperties !== false) {\n        for (const customProperty of customProperties) {\n          element.style.setProperty(customProperty[0], customProperty[1].toString());\n        }\n      }\n      transform(element, props);\n    });\n  });\n}\n\n/**\n * Animate an element.\n */\nfunction singleAnimate(\n  element: HTMLElement,\n  keyframes: Keyframe[],\n  options: TweenOptions = {},\n): Animate {\n  const keyframesCount = keyframes.length - 1;\n  const normalizedKeyframes = keyframes.map(\n    (keyframe, index): NormalizedKeyframe => ({\n      ...keyframe,\n      offset: keyframe.offset ?? index / keyframesCount,\n      easing: normalizeEase(keyframe.easing),\n      vars: Object.keys(keyframe).filter((key) => startsWith(key, '--')),\n    }),\n  );\n\n  if (!running.has(element)) {\n    running.set(element, new Map());\n  }\n\n  const key = `animate-${id}`;\n  id += 1;\n\n  /**\n   * Set the progress value.\n   */\n  function callback(progress: number) {\n    let toIndex = 0;\n    while (\n      normalizedKeyframes[toIndex] &&\n      normalizedKeyframes[toIndex].offset <= progress &&\n      normalizedKeyframes[toIndex].offset !== 1\n    ) {\n      toIndex += 1;\n    }\n\n    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);\n  }\n\n  const controls = tween(callback, {\n    ...options,\n    onStart(progress) {\n      if (isFunction(options.onStart)) {\n        options.onStart(progress);\n      }\n      // Stop running instances\n      const runningKeys = running.get(element);\n      for (const [runningKey, runningPause] of runningKeys.entries()) {\n        runningPause();\n        runningKeys.delete(runningKey);\n      }\n      runningKeys.set(key, controls.pause);\n      running.set(element, runningKeys);\n    },\n  });\n\n  return controls;\n}\n\ntype Duration = number;\ntype Delay = number;\ntype DurationWithDelay = number;\n\n/**\n * Animate one or more elements.\n */\nexport function animate(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  keyframes: Keyframe[],\n  options: AnimateOptions = {},\n): Animate {\n  if (elementOrElements instanceof HTMLElement) {\n    return singleAnimate(elementOrElements, keyframes, {\n      ...options,\n      duration: isFunction(options.duration)\n        ? options.duration(elementOrElements, 0)\n        : options.duration,\n    });\n  }\n\n  const stagger = options.stagger ?? 0;\n  const staggerIsFunction = isFunction(stagger);\n  const durationFn = isFunction(options.duration) ? options.duration : null;\n  const progressFn = isFunction(options.onProgress) ? options.onProgress : null;\n  const progresses: number[] = [];\n  const timings: [Duration, Delay, DurationWithDelay][] = [];\n  let duration = 0;\n  let previousTimings = [0, 0, 0];\n\n  const controls = eachElements(elementOrElements, (element, index) => {\n    const delay = staggerIsFunction ? stagger(element, index) : stagger * index;\n    const itemOptions = { ...options, delay } as TweenOptions;\n\n    if (durationFn) {\n      itemOptions.duration = durationFn(element, index);\n    } else if (!isDefined(itemOptions.duration)) {\n      itemOptions.duration = 1;\n    }\n\n    timings[index] = [itemOptions.duration, delay, itemOptions.duration + delay];\n\n    if (timings[index][2] > previousTimings[2]) {\n      // eslint-disable-next-line prefer-destructuring\n      duration = timings[index][2];\n    }\n\n    previousTimings = timings[index];\n\n    progresses[index] = 0;\n    itemOptions.onProgress = (itemProgress) => {\n      progresses[index] = itemProgress;\n      if (progressFn) {\n        progressFn(mean(progresses));\n      }\n    };\n\n    return singleAnimate(element, keyframes, itemOptions);\n  });\n\n  const delegate = (key) =>\n    // eslint-disable-next-line consistent-return\n    function delegated() {\n      if (key === 'progress') {\n        if (arguments.length === 1) {\n          // eslint-disable-next-line prefer-rest-params\n          const newProgress = arguments[0];\n          const newTime = lerp(0, duration, newProgress);\n          for (const [index, control] of controls.entries()) {\n            const controlProgress = clamp01(\n              map(newTime, timings[index][1], timings[index][2], 0, 1),\n            );\n            control.progress(controlProgress);\n          }\n        }\n\n        return mean(progresses);\n      }\n\n      for (const control of controls) {\n        // eslint-disable-next-line prefer-rest-params\n        control[key].call(null, arguments);\n      }\n    };\n\n  return {\n    start: delegate('start'),\n    pause: delegate('pause'),\n    finish: delegate('finish'),\n    play: delegate('play'),\n    progress: delegate('progress'),\n  };\n}\n"],
+  "mappings": "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",
   "names": ["key"]
 }

package/utils/css/getOffsetSizes.js

@@ -1,7 +1,7 @@
 function getOffsetSizes(element) {
   let parent = element;
-  let x = -window.pageXOffset;
-  let y = -window.pageYOffset;
+  let x = -window.scrollX;
+  let y = -window.scrollY;
   while (parent) {
     x += parent.offsetLeft;
     y += parent.offsetTop;

package/utils/css/getOffsetSizes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/getOffsetSizes.ts"],
-  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport default function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.pageXOffset;\n  let y = -window.pageYOffset;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetHeight;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
+  "sourcesContent": ["/**\n * Get a `DOMRect` like `Object` for an element, without its transforms.\n */\nexport default function getOffsetSizes(element: HTMLElement) {\n  let parent = element;\n  let x = -window.scrollX;\n  let y = -window.scrollY;\n\n  while (parent) {\n    x += parent.offsetLeft;\n    y += parent.offsetTop;\n    // @ts-ignore\n    parent = parent.offsetParent;\n  }\n\n  const width = element.offsetWidth;\n  const height = element.offsetHeight;\n\n  return {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: width + x,\n    bottom: height + y,\n    left: x,\n  };\n}\n"],
   "mappings": "AAGe,SAAR,eAAgC,SAAsB;AAC3D,MAAI,SAAS;AACb,MAAI,IAAI,CAAC,OAAO;AAChB,MAAI,IAAI,CAAC,OAAO;AAEhB,SAAO,QAAQ;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AAEZ,aAAS,OAAO;AAAA,EAClB;AAEA,QAAM,QAAQ,QAAQ;AACtB,QAAM,SAAS,QAAQ;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/utils/css/index.d.ts

@@ -3,5 +3,6 @@ export { add as addClass, remove as removeClass, toggle as toggleClass } from '.
 export { add as addStyle, remove as removeStyle } from './styles.js';
 export { default as getOffsetSizes } from './getOffsetSizes.js';
 export { default as matrix } from './matrix.js';
-export { default as transform } from './transform.js';
+export { transform } from './transform.js';
 export { default as transition } from './transition.js';
+export type { TransformProps } from './transform.js';

package/utils/css/index.js

@@ -3,8 +3,8 @@ import { add, remove, toggle } from "./classes.js";
 import { add as add2, remove as remove2 } from "./styles.js";
 import { default as default2 } from "./getOffsetSizes.js";
 import { default as default3 } from "./matrix.js";
-import { default as default4 } from "./transform.js";
-import { default as default5 } from "./transition.js";
+import { transform } from "./transform.js";
+import { default as default4 } from "./transition.js";
 export {
   add as addClass,
   add2 as addStyle,
@@ -13,7 +13,7 @@ export {
   remove as removeClass,
   remove2 as removeStyle,
   toggle as toggleClass,
-  default4 as transform,
-  default5 as transition
+  transform,
+  default4 as transition
 };
 //# sourceMappingURL=index.js.map

package/utils/css/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/index.ts"],
-  "sourcesContent": ["export * from './animate.js';\nexport { add as addClass, remove as removeClass, toggle as toggleClass } from './classes.js';\nexport { add as addStyle, remove as removeStyle } from './styles.js';\nexport { default as getOffsetSizes } from './getOffsetSizes.js';\nexport { default as matrix } from './matrix.js';\nexport { default as transform } from './transform.js';\nexport { default as transition } from './transition.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,SAAgB,KAAoB,QAAuB,cAAmB;AAC9E,SAAgB,OAAPA,MAA2B,UAAVC,eAA6B;AACvD,SAAoB,WAAXC,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAA6B;",
+  "sourcesContent": ["export * from './animate.js';\nexport { add as addClass, remove as removeClass, toggle as toggleClass } from './classes.js';\nexport { add as addStyle, remove as removeStyle } from './styles.js';\nexport { default as getOffsetSizes } from './getOffsetSizes.js';\nexport { default as matrix } from './matrix.js';\nexport { transform } from './transform.js';\nexport { default as transition } from './transition.js';\nexport type { TransformProps } from './transform.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,SAAgB,KAAoB,QAAuB,cAAmB;AAC9E,SAAgB,OAAPA,MAA2B,UAAVC,eAA6B;AACvD,SAAoB,WAAXC,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAoB,WAAXA,gBAA6B;",
   "names": ["add", "remove", "default"]
 }

package/utils/css/matrix.d.ts

@@ -23,5 +23,5 @@ type MatrixTransform = {
  * // matrix(0.5, 0, 0, 0.5, 0, 0)
  * ```
  */
-export default function matrix(transform: MatrixTransform): string;
+export default function matrix(transform?: MatrixTransform): string;
 export {};

package/utils/css/matrix.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/matrix.ts"],
-  "sourcesContent": ["type MatrixTransform = {\n  scaleX?: number;\n  scaleY?: number;\n  skewX?: number;\n  skewY?: number;\n  translateX?: number;\n  translateY?: number;\n};\n\n/**\n * Format a CSS transform matrix with the given values.\n *\n * @param   {Object} transform\n * @param   {number} [transform.scaleX=1]     The scale on the x axis.\n * @param   {number} [transform.scaleY=1]     The scale on the y axis.\n * @param   {number} [transform.skewX=0]      The skew on the x axis.\n * @param   {number} [transform.skewY=0]      The skew on the y axis.\n * @param   {number} [transform.translateX=0] The translate on the x axis.\n * @param   {number} [transform.translateY=0] The translate on the y axis.\n * @returns {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n */\nexport default function matrix(transform: MatrixTransform): string {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
-  "mappings": "AA0Be,SAAR,OAAwB,WAAoC;AAEjE,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,CAAC,KAAK,UAAU,SAAS,CAAC,KAAK,UAAU,SAAS,CAAC,KACtF,UAAU,UAAU,CACtB,KAAK,UAAU,cAAc,CAAC,KAAK,UAAU,cAAc,CAAC;AAC9D;",
+  "sourcesContent": ["type MatrixTransform = {\n  scaleX?: number;\n  scaleY?: number;\n  skewX?: number;\n  skewY?: number;\n  translateX?: number;\n  translateY?: number;\n};\n\n/**\n * Format a CSS transform matrix with the given values.\n *\n * @param   {Object} transform\n * @param   {number} [transform.scaleX=1]     The scale on the x axis.\n * @param   {number} [transform.scaleY=1]     The scale on the y axis.\n * @param   {number} [transform.skewX=0]      The skew on the x axis.\n * @param   {number} [transform.skewY=0]      The skew on the y axis.\n * @param   {number} [transform.translateX=0] The translate on the x axis.\n * @param   {number} [transform.translateY=0] The translate on the y axis.\n * @returns {string}                           A formatted CSS matrix transform.\n * @example\n * ```js\n * matrix({ scaleX: 0.5, scaleY: 0.5 });\n * // matrix(0.5, 0, 0, 0.5, 0, 0)\n * ```\n */\nexport default function matrix(transform?: MatrixTransform): string {\n  // eslint-disable-next-line no-param-reassign\n  transform = transform || {};\n  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${\n    transform.scaleY ?? 1\n  }, ${transform.translateX ?? 0}, ${transform.translateY ?? 0})`;\n}\n"],
+  "mappings": "AA0Be,SAAR,OAAwB,WAAqC;AAElE,cAAY,aAAa,CAAC;AAC1B,SAAO,UAAU,UAAU,UAAU,CAAC,KAAK,UAAU,SAAS,CAAC,KAAK,UAAU,SAAS,CAAC,KACtF,UAAU,UAAU,CACtB,KAAK,UAAU,cAAc,CAAC,KAAK,UAAU,cAAc,CAAC;AAC9D;",
   "names": []
 }

package/utils/css/transform.d.ts

@@ -18,4 +18,4 @@ export declare const TRANSFORM_PROPS: string[];
 /**
  * Generate a CSS transform.
  */
-export default function transform(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, props: TransformProps): string;
+export declare function transform(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, props: TransformProps): string;

package/utils/css/transform.js

@@ -64,6 +64,6 @@ function transform(elementOrElements, props) {
 }
 export {
   TRANSFORM_PROPS,
-  transform as default
+  transform
 };
 //# sourceMappingURL=transform.js.map

package/utils/css/transform.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/transform.ts"],
-  "sourcesContent": ["import { isDefined } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\nexport type TransformProps = Partial<{\n  x: number;\n  y: number;\n  z: number;\n  rotate: number;\n  rotateX: number;\n  rotateY: number;\n  rotateZ: number;\n  scale: number;\n  scaleX: number;\n  scaleY: number;\n  scaleZ: number;\n  skew: number;\n  skewX: number;\n  skewY: number;\n}>;\n\nexport const TRANSFORM_PROPS = [\n  'x',\n  'y',\n  'z',\n  'rotate',\n  'rotateX',\n  'rotateY',\n  'rotateZ',\n  'scale',\n  'scaleX',\n  'scaleY',\n  'scaleZ',\n  'skew',\n  'skewX',\n  'skewY',\n];\n\n/**\n * Generate a CSS transform.\n */\nexport default function transform(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  props: TransformProps,\n): string {\n  let value = '';\n\n  if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {\n    value += `translate3d(${props.x ?? 0}px, ${props.y ?? 0}px, ${props.z ?? 0}px) `;\n  }\n\n  if (isDefined(props.rotate)) {\n    value += `rotate(${props.rotate}deg) `;\n  } else {\n    if (isDefined(props.rotateX)) {\n      value += `rotateX(${props.rotateX}deg) `;\n    }\n\n    if (isDefined(props.rotateY)) {\n      value += `rotateY(${props.rotateY}deg) `;\n    }\n\n    if (isDefined(props.rotateZ)) {\n      value += `rotateZ(${props.rotateZ}deg) `;\n    }\n  }\n\n  if (isDefined(props.scale)) {\n    value += `scale(${props.scale}) `;\n  } else {\n    if (isDefined(props.scaleX)) {\n      value += `scaleX(${props.scaleX}) `;\n    }\n\n    if (isDefined(props.scaleY)) {\n      value += `scaleY(${props.scaleY}) `;\n    }\n\n    if (isDefined(props.scaleZ)) {\n      value += `scaleZ(${props.scaleZ}) `;\n    }\n  }\n\n  if (isDefined(props.skew)) {\n    value += `skew(${props.skew}deg) `;\n  } else {\n    if (isDefined(props.skewX)) {\n      value += `skewX(${props.skewX}deg) `;\n    }\n\n    if (isDefined(props.skewY)) {\n      value += `skewY(${props.skewY}deg) `;\n    }\n  }\n\n  eachElements(elementOrElements, (element) => {\n    element.style.transform = value;\n  });\n  return value;\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAmBtB,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAKe,SAAR,UACL,mBACA,OACQ;AACR,MAAI,QAAQ;AAEZ,MAAI,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,GAAG;AAClE,aAAS,eAAe,MAAM,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC;AAAA,EAC5E;AAEA,MAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,aAAS,UAAU,MAAM,MAAM;AAAA,EACjC,OAAO;AACL,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,aAAS,SAAS,MAAM,KAAK;AAAA,EAC/B,OAAO;AACL,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,IAAI,GAAG;AACzB,aAAS,QAAQ,MAAM,IAAI;AAAA,EAC7B,OAAO;AACL,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM,KAAK;AAAA,IAC/B;AAEA,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM,KAAK;AAAA,IAC/B;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,YAAY;AAC3C,YAAQ,MAAM,YAAY;AAAA,EAC5B,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["import { isDefined } from '../is.js';\n// eslint-disable-next-line import/extensions\nimport { eachElements } from './utils.js';\n\nexport type TransformProps = Partial<{\n  x: number;\n  y: number;\n  z: number;\n  rotate: number;\n  rotateX: number;\n  rotateY: number;\n  rotateZ: number;\n  scale: number;\n  scaleX: number;\n  scaleY: number;\n  scaleZ: number;\n  skew: number;\n  skewX: number;\n  skewY: number;\n}>;\n\nexport const TRANSFORM_PROPS = [\n  'x',\n  'y',\n  'z',\n  'rotate',\n  'rotateX',\n  'rotateY',\n  'rotateZ',\n  'scale',\n  'scaleX',\n  'scaleY',\n  'scaleZ',\n  'skew',\n  'skewX',\n  'skewY',\n];\n\n/**\n * Generate a CSS transform.\n */\nexport function transform(\n  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,\n  props: TransformProps,\n): string {\n  let value = '';\n\n  if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {\n    value += `translate3d(${props.x ?? 0}px, ${props.y ?? 0}px, ${props.z ?? 0}px) `;\n  }\n\n  if (isDefined(props.rotate)) {\n    value += `rotate(${props.rotate}deg) `;\n  } else {\n    if (isDefined(props.rotateX)) {\n      value += `rotateX(${props.rotateX}deg) `;\n    }\n\n    if (isDefined(props.rotateY)) {\n      value += `rotateY(${props.rotateY}deg) `;\n    }\n\n    if (isDefined(props.rotateZ)) {\n      value += `rotateZ(${props.rotateZ}deg) `;\n    }\n  }\n\n  if (isDefined(props.scale)) {\n    value += `scale(${props.scale}) `;\n  } else {\n    if (isDefined(props.scaleX)) {\n      value += `scaleX(${props.scaleX}) `;\n    }\n\n    if (isDefined(props.scaleY)) {\n      value += `scaleY(${props.scaleY}) `;\n    }\n\n    if (isDefined(props.scaleZ)) {\n      value += `scaleZ(${props.scaleZ}) `;\n    }\n  }\n\n  if (isDefined(props.skew)) {\n    value += `skew(${props.skew}deg) `;\n  } else {\n    if (isDefined(props.skewX)) {\n      value += `skewX(${props.skewX}deg) `;\n    }\n\n    if (isDefined(props.skewY)) {\n      value += `skewY(${props.skewY}deg) `;\n    }\n  }\n\n  eachElements(elementOrElements, (element) => {\n    element.style.transform = value;\n  });\n  return value;\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAmBtB,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAKO,SAAS,UACd,mBACA,OACQ;AACR,MAAI,QAAQ;AAEZ,MAAI,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,GAAG;AAClE,aAAS,eAAe,MAAM,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC;AAAA,EAC5E;AAEA,MAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,aAAS,UAAU,MAAM,MAAM;AAAA,EACjC,OAAO;AACL,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAEA,QAAI,UAAU,MAAM,OAAO,GAAG;AAC5B,eAAS,WAAW,MAAM,OAAO;AAAA,IACnC;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,aAAS,SAAS,MAAM,KAAK;AAAA,EAC/B,OAAO;AACL,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAEA,QAAI,UAAU,MAAM,MAAM,GAAG;AAC3B,eAAS,UAAU,MAAM,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,MAAI,UAAU,MAAM,IAAI,GAAG;AACzB,aAAS,QAAQ,MAAM,IAAI;AAAA,EAC7B,OAAO;AACL,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM,KAAK;AAAA,IAC/B;AAEA,QAAI,UAAU,MAAM,KAAK,GAAG;AAC1B,eAAS,SAAS,MAAM,KAAK;AAAA,IAC/B;AAAA,EACF;AAEA,eAAa,mBAAmB,CAAC,YAAY;AAC3C,YAAQ,MAAM,YAAY;AAAA,EAC5B,CAAC;AACD,SAAO;AACT;",
   "names": []
 }

package/utils/css/utils.d.ts

@@ -1 +1 @@
-export declare function eachElements<S extends Node = Node, T = void>(elementOrElements: S | S[] | NodeListOf<S>, callback: (element: S, index?: number, elements?: S[]) => T): T[];
+export declare function eachElements<S extends Node = Node, T = void>(elementOrElements: S | S[] | NodeListOf<S>, callback: (element: S, index: number, elements: S[]) => T): T[];

package/utils/css/utils.js

@@ -1,6 +1,6 @@
 function eachElements(elementOrElements, callback) {
   if (elementOrElements instanceof Node) {
-    return [callback(elementOrElements)];
+    return [callback(elementOrElements, 0, [elementOrElements])];
   }
   return Array.from(elementOrElements).map(callback);
 }

package/utils/css/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/css/utils.ts"],
-  "sourcesContent": ["export function eachElements<S extends Node = Node, T = void>(\n  elementOrElements: S | S[] | NodeListOf<S>,\n  callback: (element: S, index?: number, elements?: S[]) => T,\n): T[] {\n  if (elementOrElements instanceof Node) {\n    return [callback(elementOrElements)];\n  }\n\n  return Array.from(elementOrElements).map(callback);\n}\n"],
-  "mappings": "AAAO,SAAS,aACd,mBACA,UACK;AACL,MAAI,6BAA6B,MAAM;AACrC,WAAO,CAAC,SAAS,iBAAiB,CAAC;AAAA,EACrC;AAEA,SAAO,MAAM,KAAK,iBAAiB,EAAE,IAAI,QAAQ;AACnD;",
+  "sourcesContent": ["export function eachElements<S extends Node = Node, T = void>(\n  elementOrElements: S | S[] | NodeListOf<S>,\n  callback: (element: S, index: number, elements: S[]) => T,\n): T[] {\n  if (elementOrElements instanceof Node) {\n    return [callback(elementOrElements, 0, [elementOrElements])];\n  }\n\n  return Array.from(elementOrElements).map(callback);\n}\n"],
+  "mappings": "AAAO,SAAS,aACd,mBACA,UACK;AACL,MAAI,6BAA6B,MAAM;AACrC,WAAO,CAAC,SAAS,mBAAmB,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAAA,EAC7D;AAEA,SAAO,MAAM,KAAK,iBAAiB,EAAE,IAAI,QAAQ;AACnD;",
   "names": []
 }

package/utils/index.d.ts

@@ -1,12 +1,12 @@
 export { default as debounce } from './debounce.js';
-export { default as focusTrap } from './focusTrap.js';
+export * from './trapFocus.js';
 export { default as keyCodes } from './keyCodes.js';
 export { default as memoize } from './memoize.js';
 export { nextFrame } from './nextFrame.js';
-export { default as nextTick } from './nextTick.js';
-export { default as nextMicrotask } from './nextMicrotask.js';
+export { nextTick } from './nextTick.js';
+export { nextMicrotask } from './nextMicrotask.js';
 export { default as throttle } from './throttle.js';
-export { default as scrollTo } from './scrollTo.js';
+export { scrollTo } from './scrollTo.js';
 export { default as getComponentResolver } from './getComponentResolver.js';
 export * from './is.js';
 export * from './has.js';
@@ -22,3 +22,5 @@ export { Queue } from './Queue.js';
 export { SmartQueue } from './SmartQueue.js';
 export * from './dom/index.js';
 export * from './wait.js';
+export * from './random.js';
+export * from './memo.js';

package/utils/index.js

@@ -1,13 +1,13 @@
 import { default as default2 } from "./debounce.js";
-import { default as default3 } from "./focusTrap.js";
-import { default as default4 } from "./keyCodes.js";
-import { default as default5 } from "./memoize.js";
+export * from "./trapFocus.js";
+import { default as default3 } from "./keyCodes.js";
+import { default as default4 } from "./memoize.js";
 import { nextFrame } from "./nextFrame.js";
-import { default as default6 } from "./nextTick.js";
-import { default as default7 } from "./nextMicrotask.js";
-import { default as default8 } from "./throttle.js";
-import { default as default9 } from "./scrollTo.js";
-import { default as default10 } from "./getComponentResolver.js";
+import { nextTick } from "./nextTick.js";
+import { nextMicrotask } from "./nextMicrotask.js";
+import { default as default5 } from "./throttle.js";
+import { scrollTo } from "./scrollTo.js";
+import { default as default6 } from "./getComponentResolver.js";
 export * from "./is.js";
 export * from "./has.js";
 export * from "./css/index.js";
@@ -26,22 +26,23 @@ import { Queue } from "./Queue.js";
 import { SmartQueue } from "./SmartQueue.js";
 export * from "./dom/index.js";
 export * from "./wait.js";
+export * from "./random.js";
+export * from "./memo.js";
 export {
   Queue,
   SmartQueue,
   default2 as debounce,
-  default3 as focusTrap,
-  default10 as getComponentResolver,
+  default6 as getComponentResolver,
   push as historyPush,
   replace as historyReplace,
-  default4 as keyCodes,
-  default5 as memoize,
+  default3 as keyCodes,
+  default4 as memoize,
   nextFrame,
-  default7 as nextMicrotask,
-  default6 as nextTick,
+  nextMicrotask,
+  nextTick,
   objectToURLSearchParams,
-  default9 as scrollTo,
-  default8 as throttle,
+  scrollTo,
+  default5 as throttle,
   tween
 };
 //# sourceMappingURL=index.js.map

package/utils/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/index.ts"],
-  "sourcesContent": ["export { default as debounce } from './debounce.js';\nexport { default as focusTrap } from './focusTrap.js';\nexport { default as keyCodes } from './keyCodes.js';\nexport { default as memoize } from './memoize.js';\nexport { nextFrame } from './nextFrame.js';\nexport { default as nextTick } from './nextTick.js';\nexport { default as nextMicrotask } from './nextMicrotask.js';\nexport { default as throttle } from './throttle.js';\nexport { default as scrollTo } from './scrollTo.js';\nexport { default as getComponentResolver } from './getComponentResolver.js';\nexport * from './is.js';\nexport * from './has.js';\n// eslint-disable-next-line import/extensions\nexport * from './css/index.js';\nexport {\n  objectToURLSearchParams,\n  push as historyPush,\n  replace as historyReplace,\n} from './history.js';\nexport * from './collide/index.js';\nexport * from './math/index.js';\nexport * from './string/index.js';\nexport * from './scheduler.js';\nexport * from './noop.js';\nexport { tween } from './tween.js';\nexport { Queue } from './Queue.js';\nexport { SmartQueue } from './SmartQueue.js';\nexport * from './dom/index.js';\nexport * from './wait.js';\n"],
-  "mappings": "AAAA,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAA0B;AACnC,SAAS,iBAAiB;AAC1B,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAAgC;AACzC,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,iBAAuC;AAChD,cAAc;AACd,cAAc;AAEd,cAAc;AACd;AAAA,EACE;AAAA,EACQ;AAAA,EACG;AAAA,OACN;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export { default as debounce } from './debounce.js';\nexport * from './trapFocus.js';\nexport { default as keyCodes } from './keyCodes.js';\nexport { default as memoize } from './memoize.js';\nexport { nextFrame } from './nextFrame.js';\nexport { nextTick } from './nextTick.js';\nexport { nextMicrotask } from './nextMicrotask.js';\nexport { default as throttle } from './throttle.js';\nexport { scrollTo } from './scrollTo.js';\nexport { default as getComponentResolver } from './getComponentResolver.js';\nexport * from './is.js';\nexport * from './has.js';\nexport * from './css/index.js';\nexport {\n  objectToURLSearchParams,\n  push as historyPush,\n  replace as historyReplace,\n} from './history.js';\nexport * from './collide/index.js';\nexport * from './math/index.js';\nexport * from './string/index.js';\nexport * from './scheduler.js';\nexport * from './noop.js';\nexport { tween } from './tween.js';\nexport { Queue } from './Queue.js';\nexport { SmartQueue } from './SmartQueue.js';\nexport * from './dom/index.js';\nexport * from './wait.js';\nexport * from './random.js';\nexport * from './memo.js';\n"],
+  "mappings": "AAAA,SAAoB,WAAXA,gBAA2B;AACpC,cAAc;AACd,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAA0B;AACnC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAoB,WAAXA,gBAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAoB,WAAXA,gBAAuC;AAChD,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,EACQ;AAAA,EACG;AAAA,OACN;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": ["default"]
 }

package/utils/is.d.ts

@@ -1,4 +1,8 @@
 export declare const isDev: boolean;
+/**
+ * Test is the given value is null.
+ */
+export declare const isNull: (value: unknown) => value is null;
 /**
  * Test if the given value is a function.
  */
@@ -24,3 +28,11 @@ export declare const isNumber: (value: unknown) => value is number;
  */
 export declare const isBoolean: (value: unknown) => value is boolean;
 export declare const isArray: (arg: any) => arg is any[];
+/**
+ * Test if a given value is an empty string.
+ */
+export declare const isEmptyString: (value?: unknown) => boolean;
+/**
+ * Test if the given value is empty.
+ */
+export declare const isEmpty: (value?: any) => boolean;