@studiometa/js-toolkit 2.12.0 → 3.0.0-alpha.2

package/utils/scrollTo.js

@@ -1,56 +1,110 @@
-import damp from "./math/damp.js";
-function scrollTo(selectorElement, { offset = 0, dampFactor = 0.2 } = {}) {
-  let targetElement = null;
-  if (selectorElement instanceof HTMLElement) {
-    targetElement = selectorElement;
+import { tween } from "./tween.js";
+import { isString, isNumber, isFunction, isDefined } from "./is.js";
+import { lerp } from "./math/index.js";
+const xAxis = Symbol(0);
+const yAxis = Symbol(1);
+const bothAxis = Symbol(2);
+function isHtmlElement(rootElement) {
+  return rootElement instanceof HTMLElement;
+}
+function getCurrentScrollPosition(rootElement) {
+  return {
+    left: isHtmlElement(rootElement) ? rootElement.scrollTop : rootElement.scrollX,
+    top: isHtmlElement(rootElement) ? rootElement.scrollLeft : rootElement.scrollY
+  };
+}
+function getMaxScrollPosition(rootElement) {
+  return {
+    left: isHtmlElement(rootElement) ? rootElement.scrollWidth - rootElement.offsetWidth : document.documentElement.scrollWidth - window.innerWidth,
+    top: isHtmlElement(rootElement) ? rootElement.scrollHeight - rootElement.offsetHeight : document.documentElement.scrollHeight - window.innerHeight
+  };
+}
+function getTargetScrollPosition(initialScrollPosition, maxScrollPosition, target, axis, offset) {
+  let { top, left } = initialScrollPosition;
+  if (target instanceof HTMLElement || isString(target)) {
+    const targetElement = target instanceof HTMLElement ? target : document.querySelector(target);
+    if (!targetElement) {
+      return { top, left };
+    }
+    const sizes = targetElement.getBoundingClientRect();
+    const styles = getComputedStyle(targetElement);
+    const scrollMargin = {
+      left: Number.parseInt(styles.scrollMarginLeft || "0", 10),
+      top: Number.parseInt(styles.scrollMarginTop || "0", 10)
+    };
+    left = sizes.left + initialScrollPosition.left - scrollMargin.left;
+    top = sizes.top + initialScrollPosition.top - scrollMargin.top;
+  } else if (isNumber(target)) {
+    left = target;
+    top = target;
   } else {
-    targetElement = document.querySelector(selectorElement);
-  }
-  if (!targetElement) {
-    return Promise.resolve(window.pageYOffset);
+    left = target.left ?? left;
+    top = target.top ?? top;
   }
-  const sizes = targetElement.getBoundingClientRect();
-  const scrollMargin = getComputedStyle(targetElement).scrollMarginTop || "0";
-  const max = document.documentElement.scrollHeight - window.innerHeight;
-  let scrollTarget = sizes.top + window.pageYOffset - Number.parseInt(scrollMargin, 10) - offset;
-  if (scrollTarget > max) {
-    scrollTarget = max;
+  left -= offset;
+  top -= offset;
+  if (axis !== bothAxis) {
+    if (axis !== xAxis && !isDefined(target.left)) {
+      left = initialScrollPosition.left;
+    }
+    if (axis !== yAxis) {
+      top = initialScrollPosition.top;
+    }
   }
+  return {
+    left: Math.min(left, maxScrollPosition.left),
+    top: Math.min(top, maxScrollPosition.top)
+  };
+}
+function scrollTo(target, { rootElement = window, axis = yAxis, offset = 0, ...tweenOptions } = {}) {
+  const initialScrollPosition = getCurrentScrollPosition(rootElement);
+  const maxScrollPosition = getMaxScrollPosition(rootElement);
+  const targetScrollPosition = getTargetScrollPosition(
+    initialScrollPosition,
+    maxScrollPosition,
+    target,
+    axis,
+    offset
+  );
   return new Promise((resolve) => {
-    let isScrolling = false;
-    let scroll = window.pageYOffset;
-    let dampScroll = window.pageYOffset;
     function eventHandler() {
-      isScrolling = false;
+      tw.pause();
+      stop();
     }
-    function end() {
-      window.removeEventListener("wheel", eventHandler);
-      window.removeEventListener("touchmove", eventHandler);
-      resolve(window.pageYOffset);
+    function stop() {
+      rootElement.removeEventListener("wheel", eventHandler);
+      rootElement.removeEventListener("touchmove", eventHandler);
+      resolve(getCurrentScrollPosition(rootElement));
     }
-    function loop() {
-      if (!isScrolling) {
-        return end();
-      }
-      dampScroll = damp(scroll, dampScroll, dampFactor);
-      window.scrollTo({ top: dampScroll });
-      if (dampScroll === scroll) {
-        isScrolling = false;
+    const tw = tween(
+      (progress) => {
+        rootElement.scrollTo({
+          left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),
+          top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress)
+        });
+      },
+      {
+        smooth: 0.2,
+        ...tweenOptions,
+        onFinish(progress) {
+          if (isFunction(tweenOptions.onFinish)) {
+            tweenOptions.onFinish(progress);
+          }
+          stop();
+        }
       }
-      return requestAnimationFrame(loop);
-    }
-    function start(target) {
-      isScrolling = true;
-      dampScroll = window.pageYOffset;
-      scroll = target;
-      window.addEventListener("wheel", eventHandler, { passive: true });
-      window.addEventListener("touchmove", eventHandler, { passive: true });
-      loop();
-    }
-    start(scrollTarget);
+    );
+    rootElement.addEventListener("wheel", eventHandler, { passive: true });
+    rootElement.addEventListener("touchmove", eventHandler, { passive: true });
+    tw.start();
   });
 }
+scrollTo.axis = {
+  x: xAxis,
+  y: yAxis,
+  both: bothAxis
+};
 export {
-  scrollTo as default
+  scrollTo
 };
 //# sourceMappingURL=scrollTo.js.map

package/utils/scrollTo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/scrollTo.ts"],
-  "sourcesContent": ["import damp from './math/damp.js';\n\n/**\n * Handler for the click event on anchor links\n *\n * @returns {Promise<number>} A promising resolving with the target scroll position.\n */\nexport default function scrollTo(\n  selectorElement: HTMLElement | string,\n  { offset = 0, dampFactor = 0.2 } = {},\n): Promise<number> {\n  let targetElement = null;\n\n  if (selectorElement instanceof HTMLElement) {\n    targetElement = selectorElement;\n  } else {\n    targetElement = document.querySelector(selectorElement);\n  }\n\n  if (!targetElement) {\n    return Promise.resolve(window.pageYOffset);\n  }\n\n  const sizes = targetElement.getBoundingClientRect();\n  const scrollMargin = getComputedStyle(targetElement).scrollMarginTop || '0';\n  const max = document.documentElement.scrollHeight - window.innerHeight;\n  let scrollTarget = sizes.top + window.pageYOffset - Number.parseInt(scrollMargin, 10) - offset;\n\n  // Make sure to not scroll more than the max scroll allowed\n  if (scrollTarget > max) {\n    scrollTarget = max;\n  }\n\n  return new Promise((resolve) => {\n    let isScrolling = false;\n    let scroll = window.pageYOffset;\n    let dampScroll = window.pageYOffset;\n\n    /**\n     * Handler for the wheel event\n     * Is used to cancel the programmatic scroll animation\n     */\n    function eventHandler() {\n      isScrolling = false;\n    }\n\n    /**\n     * Scroll animation end's hook\n     */\n    function end() {\n      window.removeEventListener('wheel', eventHandler);\n      window.removeEventListener('touchmove', eventHandler);\n      resolve(window.pageYOffset);\n    }\n\n    /**\n     * Scroll animation's loop\n     *\n     * @returns {void|number}\n     */\n    function loop() {\n      if (!isScrolling) {\n        return end();\n      }\n\n      dampScroll = damp(scroll, dampScroll, dampFactor);\n      window.scrollTo({ top: dampScroll });\n\n      if (dampScroll === scroll) {\n        isScrolling = false;\n      }\n\n      return requestAnimationFrame(loop);\n    }\n\n    /**\n     * Start the scroll animation\n     *\n     * @param {number} target The target scroll\n     */\n    function start(target) {\n      // Update vars\n      isScrolling = true;\n      dampScroll = window.pageYOffset;\n      scroll = target;\n\n      // Bind wheel event to stop the animation if\n      // the user wants to scroll manually\n      window.addEventListener('wheel', eventHandler, { passive: true });\n      window.addEventListener('touchmove', eventHandler, { passive: true });\n\n      // Init the loop\n      loop();\n    }\n\n    // Start the scroll\n    start(scrollTarget);\n  });\n}\n"],
-  "mappings": "AAAA,OAAO,UAAU;AAOF,SAAR,SACL,iBACA,EAAE,SAAS,GAAG,aAAa,IAAI,IAAI,CAAC,GACnB;AACjB,MAAI,gBAAgB;AAEpB,MAAI,2BAA2B,aAAa;AAC1C,oBAAgB;AAAA,EAClB,OAAO;AACL,oBAAgB,SAAS,cAAc,eAAe;AAAA,EACxD;AAEA,MAAI,CAAC,eAAe;AAClB,WAAO,QAAQ,QAAQ,OAAO,WAAW;AAAA,EAC3C;AAEA,QAAM,QAAQ,cAAc,sBAAsB;AAClD,QAAM,eAAe,iBAAiB,aAAa,EAAE,mBAAmB;AACxE,QAAM,MAAM,SAAS,gBAAgB,eAAe,OAAO;AAC3D,MAAI,eAAe,MAAM,MAAM,OAAO,cAAc,OAAO,SAAS,cAAc,EAAE,IAAI;AAGxF,MAAI,eAAe,KAAK;AACtB,mBAAe;AAAA,EACjB;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,cAAc;AAClB,QAAI,SAAS,OAAO;AACpB,QAAI,aAAa,OAAO;AAMxB,aAAS,eAAe;AACtB,oBAAc;AAAA,IAChB;AAKA,aAAS,MAAM;AACb,aAAO,oBAAoB,SAAS,YAAY;AAChD,aAAO,oBAAoB,aAAa,YAAY;AACpD,cAAQ,OAAO,WAAW;AAAA,IAC5B;AAOA,aAAS,OAAO;AACd,UAAI,CAAC,aAAa;AAChB,eAAO,IAAI;AAAA,MACb;AAEA,mBAAa,KAAK,QAAQ,YAAY,UAAU;AAChD,aAAO,SAAS,EAAE,KAAK,WAAW,CAAC;AAEnC,UAAI,eAAe,QAAQ;AACzB,sBAAc;AAAA,MAChB;AAEA,aAAO,sBAAsB,IAAI;AAAA,IACnC;AAOA,aAAS,MAAM,QAAQ;AAErB,oBAAc;AACd,mBAAa,OAAO;AACpB,eAAS;AAIT,aAAO,iBAAiB,SAAS,cAAc,EAAE,SAAS,KAAK,CAAC;AAChE,aAAO,iBAAiB,aAAa,cAAc,EAAE,SAAS,KAAK,CAAC;AAGpE,WAAK;AAAA,IACP;AAGA,UAAM,YAAY;AAAA,EACpB,CAAC;AACH;",
+  "sourcesContent": ["import { tween } from './tween.js';\nimport type { TweenOptions } from './tween.js';\nimport { isString, isNumber, isFunction, isDefined } from './is.js';\nimport { lerp } from './math/index.js';\n\nexport interface ScrollPosition {\n  left: number;\n  top: number;\n}\n\nexport type ScrollTarget = string | HTMLElement | number | Partial<ScrollPosition>;\n\nexport interface ScrollToOptions extends TweenOptions {\n  /**\n   * Root element that will be scrolled.\n   */\n  rootElement?: HTMLElement | typeof window;\n  /**\n   * Scroll direction.\n   */\n  axis?: (typeof scrollTo.axis)[keyof typeof scrollTo.axis];\n  /**\n   * Distance from the target.\n   */\n  offset?: number;\n}\n\nconst xAxis = Symbol(0);\nconst yAxis = Symbol(1);\nconst bothAxis = Symbol(2);\n\nfunction isHtmlElement(rootElement: ScrollToOptions['rootElement']): rootElement is HTMLElement {\n  return rootElement instanceof HTMLElement;\n}\n\n/**\n * Get the current root element or window scroll position.\n */\nfunction getCurrentScrollPosition(rootElement: ScrollToOptions['rootElement']): ScrollPosition {\n  return {\n    left: isHtmlElement(rootElement) ? rootElement.scrollTop : rootElement.scrollX,\n    top: isHtmlElement(rootElement) ? rootElement.scrollLeft : rootElement.scrollY,\n  };\n}\n\n/**\n * Get the maximum scroll position values.\n */\nfunction getMaxScrollPosition(rootElement?: ScrollToOptions['rootElement']): ScrollPosition {\n  return {\n    left: isHtmlElement(rootElement)\n      ? rootElement.scrollWidth - rootElement.offsetWidth\n      : document.documentElement.scrollWidth - window.innerWidth,\n    top: isHtmlElement(rootElement)\n      ? rootElement.scrollHeight - rootElement.offsetHeight\n      : document.documentElement.scrollHeight - window.innerHeight,\n  };\n}\n\n/**\n * Get the target scroll position.\n */\nfunction getTargetScrollPosition(\n  initialScrollPosition: ScrollPosition,\n  maxScrollPosition: ScrollPosition,\n  target: ScrollTarget,\n  axis: ScrollToOptions['axis'],\n  offset: number,\n): ScrollPosition {\n  let { top, left } = initialScrollPosition;\n\n  if (target instanceof HTMLElement || isString(target)) {\n    const targetElement = target instanceof HTMLElement ? target : document.querySelector(target);\n\n    if (!targetElement) {\n      return { top, left };\n    }\n\n    const sizes = targetElement.getBoundingClientRect();\n    const styles = getComputedStyle(targetElement);\n    const scrollMargin = {\n      left: Number.parseInt(styles.scrollMarginLeft || '0', 10),\n      top: Number.parseInt(styles.scrollMarginTop || '0', 10),\n    };\n\n    // Set the scroll position of the target element.\n    left = sizes.left + initialScrollPosition.left - scrollMargin.left;\n    top = sizes.top + initialScrollPosition.top - scrollMargin.top;\n  } else if (isNumber(target)) {\n    left = target;\n    top = target;\n  } else {\n    left = target.left ?? left;\n    top = target.top ?? top;\n  }\n\n  left -= offset;\n  top -= offset;\n\n  if (axis !== bothAxis) {\n    if (axis !== xAxis && !isDefined((target as Partial<ScrollPosition>).left)) {\n      left = initialScrollPosition.left;\n    }\n\n    if (axis !== yAxis) {\n      top = initialScrollPosition.top;\n    }\n  }\n\n  return {\n    left: Math.min(left, maxScrollPosition.left),\n    top: Math.min(top, maxScrollPosition.top),\n  };\n}\n\n/**\n * Scroll to an element.\n *\n * @returns {Promise<ScrollPosition>} A promising resolving with the scroll position.\n */\nexport function scrollTo(\n  target: string | HTMLElement | number | Partial<ScrollPosition>,\n  { rootElement = window, axis = yAxis, offset = 0, ...tweenOptions }: ScrollToOptions = {},\n): Promise<ScrollPosition> {\n  const initialScrollPosition = getCurrentScrollPosition(rootElement);\n  const maxScrollPosition = getMaxScrollPosition(rootElement);\n  const targetScrollPosition = getTargetScrollPosition(\n    initialScrollPosition,\n    maxScrollPosition,\n    target,\n    axis,\n    offset,\n  );\n\n  return new Promise((resolve) => {\n    function eventHandler() {\n      /* eslint-disable @typescript-eslint/no-use-before-define */\n      tw.pause();\n      stop();\n      /* eslint-enable @typescript-eslint/no-use-before-define */\n    }\n\n    function stop() {\n      rootElement.removeEventListener('wheel', eventHandler);\n      rootElement.removeEventListener('touchmove', eventHandler);\n\n      // Resolve the promise on animation finish.\n      resolve(getCurrentScrollPosition(rootElement));\n    }\n\n    // Setup tween.\n    const tw = tween(\n      (progress) => {\n        rootElement.scrollTo({\n          left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),\n          top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress),\n        });\n      },\n      {\n        smooth: 0.2,\n        ...tweenOptions,\n        onFinish(progress) {\n          if (isFunction(tweenOptions.onFinish)) {\n            tweenOptions.onFinish(progress);\n          }\n\n          stop();\n        },\n      },\n    );\n\n    rootElement.addEventListener('wheel', eventHandler, { passive: true });\n    rootElement.addEventListener('touchmove', eventHandler, { passive: true });\n    tw.start();\n  });\n}\n\nscrollTo.axis = {\n  x: xAxis,\n  y: yAxis,\n  both: bothAxis,\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/utils/{focusTrap.d.ts → trapFocus.d.ts}

@@ -8,16 +8,8 @@ export declare function saveActiveElement(): void;
  * @param {HTMLElement} element The element in which to trap the tabulations.
  * @param {KeyboardEvent} event The keydown or keyup event.
  */
-export declare function trap(element: HTMLElement, event: KeyboardEvent): void;
+export declare function trapFocus(element: HTMLElement, event: KeyboardEvent): void;
 /**
  * Untrap the tab navigation.
  */
-export declare function untrap(): void;
-/**
- * Use a trap/untrap tabs logic.
- */
-export default function useFocusTrap(): {
-    trap: typeof trap;
-    untrap: typeof untrap;
-    saveActiveElement: typeof saveActiveElement;
-};
+export declare function untrapFocus(): void;

package/utils/{focusTrap.js → trapFocus.js}

@@ -17,7 +17,7 @@ let focusedBefore;
 function saveActiveElement() {
   focusedBefore = document.activeElement;
 }
-function trap(element, event) {
+function trapFocus(element, event) {
   if (event.keyCode !== keyCodes.TAB) {
     return;
   }
@@ -43,19 +43,15 @@ function trap(element, event) {
     event.preventDefault();
   }
 }
-function untrap() {
+function untrapFocus() {
   if (focusedBefore && isFunction(focusedBefore.focus)) {
     focusedBefore.focus();
     focusedBefore = null;
   }
 }
-function useFocusTrap() {
-  return { trap, untrap, saveActiveElement };
-}
 export {
-  useFocusTrap as default,
   saveActiveElement,
-  trap,
-  untrap
+  trapFocus,
+  untrapFocus
 };
-//# sourceMappingURL=focusTrap.js.map
+//# sourceMappingURL=trapFocus.js.map

package/utils/trapFocus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/utils/trapFocus.ts"],
+  "sourcesContent": ["import keyCodes from './keyCodes.js';\nimport { isFunction } from './is.js';\n\nconst FOCUSABLE_ELEMENTS = [\n  'a[href]:not([tabindex^=\"-\"]):not([inert])',\n  'area[href]:not([tabindex^=\"-\"]):not([inert])',\n  'input:not([disabled]):not([inert])',\n  'select:not([disabled]):not([inert])',\n  'textarea:not([disabled]):not([inert])',\n  'button:not([disabled]):not([inert])',\n  'iframe:not([tabindex^=\"-\"]):not([inert])',\n  'audio:not([tabindex^=\"-\"]):not([inert])',\n  'video:not([tabindex^=\"-\"]):not([inert])',\n  '[contenteditable]:not([tabindex^=\"-\"]):not([inert])',\n  '[tabindex]:not([tabindex^=\"-\"]):not([inert])',\n];\n\nlet focusedBefore;\n\n/**\n * Save the current active element.\n */\nexport function saveActiveElement() {\n  focusedBefore = document.activeElement;\n}\n\n/**\n * Trap tab navigation inside the given element.\n *\n * @param {HTMLElement} element The element in which to trap the tabulations.\n * @param {KeyboardEvent} event The keydown or keyup event.\n */\nexport function trapFocus(element: HTMLElement, event: KeyboardEvent) {\n  if (event.keyCode !== keyCodes.TAB) {\n    return;\n  }\n\n  // Save the previous focused element\n  if (!focusedBefore) {\n    focusedBefore = document.activeElement;\n  }\n\n  const focusableChildren: HTMLElement[] = Array.from(\n    element.querySelectorAll(FOCUSABLE_ELEMENTS.join(', ')),\n  ) as HTMLElement[];\n  const focusedItemIndex =\n    document.activeElement instanceof HTMLElement\n      ? focusableChildren.indexOf(document.activeElement)\n      : -1;\n\n  if (!focusableChildren.length) {\n    return;\n  }\n\n  if (focusedItemIndex < 0) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n\n  // If the SHIFT key is being pressed while tabbing (moving backwards) and\n  // the currently focused item is the first one, move the focus to the last\n  // focusable item from the dialog element\n  if (event.shiftKey && focusedItemIndex === 0) {\n    focusableChildren.at(-1).focus();\n    event.preventDefault();\n  }\n\n  // If the SHIFT key is not being pressed (moving forwards) and the currently\n  // focused item is the last one, move the focus to the first focusable item\n  // from the dialog element\n  else if (!event.shiftKey && focusedItemIndex === focusableChildren.length - 1) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n}\n\n/**\n * Untrap the tab navigation.\n */\nexport function untrapFocus() {\n  if (focusedBefore && isFunction(focusedBefore.focus)) {\n    focusedBefore.focus();\n    focusedBefore = null;\n  }\n}\n"],
+  "mappings": "AAAA,OAAO,cAAc;AACrB,SAAS,kBAAkB;AAE3B,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAI;AAKG,SAAS,oBAAoB;AAClC,kBAAgB,SAAS;AAC3B;AAQO,SAAS,UAAU,SAAsB,OAAsB;AACpE,MAAI,MAAM,YAAY,SAAS,KAAK;AAClC;AAAA,EACF;AAGA,MAAI,CAAC,eAAe;AAClB,oBAAgB,SAAS;AAAA,EAC3B;AAEA,QAAM,oBAAmC,MAAM;AAAA,IAC7C,QAAQ,iBAAiB,mBAAmB,KAAK,IAAI,CAAC;AAAA,EACxD;AACA,QAAM,mBACJ,SAAS,yBAAyB,cAC9B,kBAAkB,QAAQ,SAAS,aAAa,IAChD;AAEN,MAAI,CAAC,kBAAkB,QAAQ;AAC7B;AAAA,EACF;AAEA,MAAI,mBAAmB,GAAG;AACxB,sBAAkB,CAAC,EAAE,MAAM;AAC3B,UAAM,eAAe;AAAA,EACvB;AAKA,MAAI,MAAM,YAAY,qBAAqB,GAAG;AAC5C,sBAAkB,GAAG,EAAE,EAAE,MAAM;AAC/B,UAAM,eAAe;AAAA,EACvB,WAKS,CAAC,MAAM,YAAY,qBAAqB,kBAAkB,SAAS,GAAG;AAC7E,sBAAkB,CAAC,EAAE,MAAM;AAC3B,UAAM,eAAe;AAAA,EACvB;AACF;AAKO,SAAS,cAAc;AAC5B,MAAI,iBAAiB,WAAW,cAAc,KAAK,GAAG;AACpD,kBAAc,MAAM;AACpB,oBAAgB;AAAA,EAClB;AACF;",
+  "names": []
+}

package/utils/tween.d.ts

@@ -1,12 +1,67 @@
 import type { EasingFunction } from './math/createEases.js';
 export type BezierCurve = [number, number, number, number];
+/**
+ * Controls for a tween.
+ */
+export interface Tween {
+    /**
+     * Start the tween from the beginning.
+     */
+    start: () => void;
+    /**
+     * Finish the tween and set its state to the end.
+     */
+    finish: () => void;
+    /**
+     * Pause the tween.
+     */
+    pause: () => void;
+    /**
+     * Start the tween from the current paused progress.
+     */
+    play: () => void;
+    /**
+     * Set and get the tween's progress.
+     */
+    progress: (progress?: number) => number;
+}
 export interface TweenOptions {
+    /**
+     * The duration, in seconds.
+     * Defaults to `1`.
+     */
     duration?: number;
+    /**
+     * The delay, in seconds.
+     * Defaults to `0`.
+     */
+    delay?: number;
+    /**
+     * The easing function or bezier curve to use.
+     * Defaults to a linear easing function.
+     */
     easing?: EasingFunction | BezierCurve;
+    /**
+     * The smooth factor. Setting this option to `true` or a `number` will disable the `duration` option.
+     */
+    smooth?: true | number;
+    /**
+     * The precision for when to consider the tween finished.
+     * Defaults to `0.0001`.
+     */
     precision?: number;
-    onStart?: () => void;
-    onProgress?: (progress: number, easedProgress: number) => void;
-    onFinish?: (progress: number, easedProgress: number) => void;
+    /**
+     * A callback executed on start.
+     */
+    onStart?: (progress: number) => void;
+    /**
+     * A callback executed each time the progress is updated.
+     */
+    onProgress?: (progress: number) => void;
+    /**
+     * A callback executed when the tween is finished.
+     */
+    onFinish?: (progress: number) => void;
 }
 /**
  * Normalize a easing function with default fallbacks.
@@ -15,10 +70,4 @@ export declare function normalizeEase(ease: EasingFunction | BezierCurve): Easin
 /**
  * Tween from 0 to 1.
  */
-export declare function tween(callback: (progress: number) => unknown, options?: TweenOptions): {
-    start: () => void;
-    finish: () => number;
-    pause: () => void;
-    play: () => void;
-    progress: (newProgress: number) => number;
-};
+export declare function tween(callback: (progress: number) => unknown, options?: TweenOptions): Tween;

package/utils/tween.js

@@ -1,6 +1,6 @@
 import { cubicBezier } from "@motionone/easing";
-import { lerp, map, clamp01 } from "./math/index.js";
-import { isDefined, isArray } from "./is.js";
+import { lerp, map, clamp01, damp, inertiaFinalValue } from "./math/index.js";
+import { isDefined, isArray, isNumber } from "./is.js";
 import { noop, noopValue as linear } from "./noop.js";
 import useRaf from "../services/raf.js";
 let id = 0;
@@ -18,12 +18,16 @@ function tween(callback, options = {}) {
   const raf = useRaf();
   let progressValue = 0;
   let easedProgress = 0;
+  const isSmooth = isDefined(options.smooth) && (isNumber(options.smooth) || options.smooth);
+  const smoothFactor = isNumber(options.smooth) ? options.smooth : 0.1;
   const precision = options.precision ?? DEFAULT_PROGRESS_PRECISION;
   const ease = normalizeEase(options.easing);
+  let delay = options.delay ?? 0;
+  delay *= 1e3;
   let duration = options.duration ?? 1;
   duration *= 1e3;
-  let startTime = performance.now();
-  let endTime = startTime + duration;
+  let startTime = getStartTime();
+  let endTime = getEndTime(startTime);
   const key = `tw-${id}`;
   id += 1;
   const { onStart = noop, onProgress = noop, onFinish = noop } = options;
@@ -33,34 +37,36 @@ function tween(callback, options = {}) {
     raf.remove(key);
   }
   function progress(newProgress) {
-    if (typeof newProgress === "undefined") {
+    if (!isDefined(newProgress)) {
       return easedProgress;
     }
     progressValue = newProgress;
-    easedProgress = ease(progressValue);
+    easedProgress = isSmooth ? damp(progressValue, easedProgress, smoothFactor, precision) : ease(progressValue);
     if (Math.abs(1 - easedProgress) < precision) {
       progressValue = 1;
       easedProgress = 1;
     }
     callback(easedProgress);
-    onProgress(progressValue, easedProgress);
+    onProgress(easedProgress);
     if (easedProgress === 1) {
       pause();
-      requestAnimationFrame(() => onFinish(progressValue, easedProgress));
+      requestAnimationFrame(() => onFinish(easedProgress));
     }
-    return progressValue;
+    return easedProgress;
   }
   function tick(props) {
-    if (!isRunning) {
-      raf.remove(key);
-      return;
-    }
     progress(clamp01(map(props.time, startTime, endTime, 0, 1)));
   }
+  function getStartTime() {
+    return performance.now() + delay;
+  }
+  function getEndTime(time) {
+    return isSmooth ? inertiaFinalValue(time, 1) : time + duration;
+  }
   function start() {
-    onStart();
-    startTime = performance.now();
-    endTime = startTime + duration;
+    onStart(0);
+    startTime = getStartTime();
+    endTime = getEndTime(startTime);
     progressValue = 0;
     easedProgress = 0;
     isRunning = true;
@@ -70,8 +76,8 @@ function tween(callback, options = {}) {
     if (isRunning) {
       return;
     }
-    startTime = performance.now() - lerp(0, duration, progressValue);
-    endTime = startTime + duration;
+    startTime = getStartTime() - lerp(0, duration, progressValue);
+    endTime = getEndTime(startTime);
     isRunning = true;
     raf.add(key, tick);
   }

package/utils/tween.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/tween.ts"],
-  "sourcesContent": ["import { cubicBezier } from '@motionone/easing';\nimport { lerp, map, clamp01 } from './math/index.js';\nimport { isDefined, isArray } from './is.js';\nimport { noop, noopValue as linear } from './noop.js';\nimport useRaf from '../services/raf.js';\nimport type { EasingFunction } from './math/createEases.js';\n\nlet id = 0;\nconst DEFAULT_PROGRESS_PRECISION = 0.0001;\n\nexport type BezierCurve = [number, number, number, number];\n\nexport interface TweenOptions {\n  duration?: number;\n  easing?: EasingFunction | BezierCurve;\n  precision?: number;\n  onStart?: () => void;\n  onProgress?: (progress: number, easedProgress: number) => void;\n  onFinish?: (progress: number, easedProgress: number) => void;\n}\n\n/**\n * Normalize a easing function with default fallbacks.\n */\nexport function normalizeEase(ease: EasingFunction | BezierCurve): EasingFunction {\n  if (!isDefined(ease)) {\n    return linear;\n  }\n\n  if (isArray(ease)) {\n    return cubicBezier(...ease);\n  }\n\n  return ease;\n}\n\n/**\n * Tween from 0 to 1.\n */\nexport function tween(callback: (progress: number) => unknown, options: TweenOptions = {}) {\n  const raf = useRaf();\n\n  let progressValue = 0;\n  let easedProgress = 0;\n\n  const precision = options.precision ?? DEFAULT_PROGRESS_PRECISION;\n  const ease = normalizeEase(options.easing);\n  let duration = options.duration ?? 1;\n  duration *= 1000;\n\n  let startTime = performance.now();\n  let endTime = startTime + duration;\n\n  const key = `tw-${id}`;\n  id += 1;\n\n  const { onStart = noop, onProgress = noop, onFinish = noop } = options;\n  let isRunning = false;\n\n  /**\n   * Pause the animation.\n   */\n  function pause() {\n    isRunning = false;\n    raf.remove(key);\n  }\n\n  /**\n   * Set the progress value.\n   */\n  function progress(newProgress: number) {\n    if (typeof newProgress === 'undefined') {\n      return easedProgress;\n    }\n\n    progressValue = newProgress;\n    easedProgress = ease(progressValue);\n\n    // Stop when reaching precision\n    if (Math.abs(1 - easedProgress) < precision) {\n      progressValue = 1;\n      easedProgress = 1;\n    }\n\n    callback(easedProgress);\n    onProgress(progressValue, easedProgress);\n\n    if (easedProgress === 1) {\n      pause();\n      requestAnimationFrame(() => onFinish(progressValue, easedProgress));\n    }\n\n    return progressValue;\n  }\n\n  /**\n   * Loop for rendering the animation.\n   */\n  function tick(props: { time: number }) {\n    if (!isRunning) {\n      raf.remove(key);\n      return;\n    }\n\n    progress(clamp01(map(props.time, startTime, endTime, 0, 1)));\n  }\n\n  /**\n   * Play the animation.\n   */\n  function start() {\n    onStart();\n    startTime = performance.now();\n    endTime = startTime + duration;\n    progressValue = 0;\n    easedProgress = 0;\n    isRunning = true;\n\n    raf.add(key, tick);\n  }\n\n  /**\n   * Play a paused animation.\n   */\n  function play() {\n    if (isRunning) {\n      return;\n    }\n\n    startTime = performance.now() - lerp(0, duration, progressValue);\n    endTime = startTime + duration;\n    isRunning = true;\n\n    raf.add(key, tick);\n  }\n\n  return {\n    start,\n    finish: () => progress(1),\n    pause,\n    play,\n    progress,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,MAAM,KAAK,eAAe;AACnC,SAAS,WAAW,eAAe;AACnC,SAAS,MAAM,aAAa,cAAc;AAC1C,OAAO,YAAY;AAGnB,IAAI,KAAK;AACT,MAAM,6BAA6B;AAgB5B,SAAS,cAAc,MAAoD;AAChF,MAAI,CAAC,UAAU,IAAI,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,GAAG;AACjB,WAAO,YAAY,GAAG,IAAI;AAAA,EAC5B;AAEA,SAAO;AACT;AAKO,SAAS,MAAM,UAAyC,UAAwB,CAAC,GAAG;AACzF,QAAM,MAAM,OAAO;AAEnB,MAAI,gBAAgB;AACpB,MAAI,gBAAgB;AAEpB,QAAM,YAAY,QAAQ,aAAa;AACvC,QAAM,OAAO,cAAc,QAAQ,MAAM;AACzC,MAAI,WAAW,QAAQ,YAAY;AACnC,cAAY;AAEZ,MAAI,YAAY,YAAY,IAAI;AAChC,MAAI,UAAU,YAAY;AAE1B,QAAM,MAAM,MAAM,EAAE;AACpB,QAAM;AAEN,QAAM,EAAE,UAAU,MAAM,aAAa,MAAM,WAAW,KAAK,IAAI;AAC/D,MAAI,YAAY;AAKhB,WAAS,QAAQ;AACf,gBAAY;AACZ,QAAI,OAAO,GAAG;AAAA,EAChB;AAKA,WAAS,SAAS,aAAqB;AACrC,QAAI,OAAO,gBAAgB,aAAa;AACtC,aAAO;AAAA,IACT;AAEA,oBAAgB;AAChB,oBAAgB,KAAK,aAAa;AAGlC,QAAI,KAAK,IAAI,IAAI,aAAa,IAAI,WAAW;AAC3C,sBAAgB;AAChB,sBAAgB;AAAA,IAClB;AAEA,aAAS,aAAa;AACtB,eAAW,eAAe,aAAa;AAEvC,QAAI,kBAAkB,GAAG;AACvB,YAAM;AACN,4BAAsB,MAAM,SAAS,eAAe,aAAa,CAAC;AAAA,IACpE;AAEA,WAAO;AAAA,EACT;AAKA,WAAS,KAAK,OAAyB;AACrC,QAAI,CAAC,WAAW;AACd,UAAI,OAAO,GAAG;AACd;AAAA,IACF;AAEA,aAAS,QAAQ,IAAI,MAAM,MAAM,WAAW,SAAS,GAAG,CAAC,CAAC,CAAC;AAAA,EAC7D;AAKA,WAAS,QAAQ;AACf,YAAQ;AACR,gBAAY,YAAY,IAAI;AAC5B,cAAU,YAAY;AACtB,oBAAgB;AAChB,oBAAgB;AAChB,gBAAY;AAEZ,QAAI,IAAI,KAAK,IAAI;AAAA,EACnB;AAKA,WAAS,OAAO;AACd,QAAI,WAAW;AACb;AAAA,IACF;AAEA,gBAAY,YAAY,IAAI,IAAI,KAAK,GAAG,UAAU,aAAa;AAC/D,cAAU,YAAY;AACtB,gBAAY;AAEZ,QAAI,IAAI,KAAK,IAAI;AAAA,EACnB;AAEA,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,MAAM,SAAS,CAAC;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { cubicBezier } from '@motionone/easing';\nimport { lerp, map, clamp01, damp, inertiaFinalValue } from './math/index.js';\nimport { isDefined, isArray, isNumber } from './is.js';\nimport { noop, noopValue as linear } from './noop.js';\nimport useRaf from '../services/raf.js';\nimport type { EasingFunction } from './math/createEases.js';\n\nlet id = 0;\nconst DEFAULT_PROGRESS_PRECISION = 0.0001;\n\nexport type BezierCurve = [number, number, number, number];\n\n/**\n * Controls for a tween.\n */\nexport interface Tween {\n  /**\n   * Start the tween from the beginning.\n   */\n  start: () => void;\n  /**\n   * Finish the tween and set its state to the end.\n   */\n  finish: () => void;\n  /**\n   * Pause the tween.\n   */\n  pause: () => void;\n  /**\n   * Start the tween from the current paused progress.\n   */\n  play: () => void;\n  /**\n   * Set and get the tween's progress.\n   */\n  progress: (progress?: number) => number;\n}\n\nexport interface TweenOptions {\n  /**\n   * The duration, in seconds.\n   * Defaults to `1`.\n   */\n  duration?: number;\n  /**\n   * The delay, in seconds.\n   * Defaults to `0`.\n   */\n  delay?: number;\n  /**\n   * The easing function or bezier curve to use.\n   * Defaults to a linear easing function.\n   */\n  easing?: EasingFunction | BezierCurve;\n  /**\n   * The smooth factor. Setting this option to `true` or a `number` will disable the `duration` option.\n   */\n  smooth?: true | number;\n  /**\n   * The precision for when to consider the tween finished.\n   * Defaults to `0.0001`.\n   */\n  precision?: number;\n  /**\n   * A callback executed on start.\n   */\n  onStart?: (progress: number) => void;\n  /**\n   * A callback executed each time the progress is updated.\n   */\n  onProgress?: (progress: number) => void;\n  /**\n   * A callback executed when the tween is finished.\n   */\n  onFinish?: (progress: number) => void;\n}\n\n/**\n * Normalize a easing function with default fallbacks.\n */\nexport function normalizeEase(ease: EasingFunction | BezierCurve): EasingFunction {\n  if (!isDefined(ease)) {\n    return linear;\n  }\n\n  if (isArray(ease)) {\n    return cubicBezier(...ease);\n  }\n\n  return ease;\n}\n\n/**\n * Tween from 0 to 1.\n */\nexport function tween(callback: (progress: number) => unknown, options: TweenOptions = {}): Tween {\n  const raf = useRaf();\n\n  let progressValue = 0;\n  let easedProgress = 0;\n\n  const isSmooth = isDefined(options.smooth) && (isNumber(options.smooth) || options.smooth);\n  const smoothFactor = isNumber(options.smooth) ? options.smooth : 0.1;\n  const precision = options.precision ?? DEFAULT_PROGRESS_PRECISION;\n  const ease = normalizeEase(options.easing);\n\n  let delay = options.delay ?? 0;\n  delay *= 1000;\n  let duration = options.duration ?? 1;\n  duration *= 1000;\n\n  /* eslint-disable @typescript-eslint/no-use-before-define */\n  let startTime = getStartTime();\n  let endTime = getEndTime(startTime);\n  /* eslint-enable @typescript-eslint/no-use-before-define */\n\n  const key = `tw-${id}`;\n  id += 1;\n\n  const { onStart = noop, onProgress = noop, onFinish = noop } = options;\n  let isRunning = false;\n\n  /**\n   * Pause the animation.\n   */\n  function pause() {\n    isRunning = false;\n    raf.remove(key);\n  }\n\n  /**\n   * Set the progress value.\n   */\n  function progress(newProgress: number) {\n    if (!isDefined(newProgress)) {\n      return easedProgress;\n    }\n\n    progressValue = newProgress;\n    easedProgress = isSmooth\n      ? damp(progressValue, easedProgress, smoothFactor, precision)\n      : ease(progressValue);\n\n    // Stop when reaching precision\n    if (Math.abs(1 - easedProgress) < precision) {\n      progressValue = 1;\n      easedProgress = 1;\n    }\n\n    callback(easedProgress);\n    onProgress(easedProgress);\n\n    if (easedProgress === 1) {\n      pause();\n      requestAnimationFrame(() => onFinish(easedProgress));\n    }\n\n    return easedProgress;\n  }\n\n  /**\n   * Loop for rendering the animation.\n   */\n  function tick(props: { time: number }) {\n    progress(clamp01(map(props.time, startTime, endTime, 0, 1)));\n  }\n\n  function getStartTime() {\n    return performance.now() + delay;\n  }\n\n  function getEndTime(time: number) {\n    return isSmooth ? inertiaFinalValue(time, 1) : time + duration;\n  }\n\n  /**\n   * Play the animation.\n   */\n  function start() {\n    onStart(0);\n    startTime = getStartTime();\n    endTime = getEndTime(startTime);\n    progressValue = 0;\n    easedProgress = 0;\n    isRunning = true;\n\n    raf.add(key, tick);\n  }\n\n  /**\n   * Play a paused animation.\n   */\n  function play() {\n    if (isRunning) {\n      return;\n    }\n\n    startTime = getStartTime() - lerp(0, duration, progressValue);\n    endTime = getEndTime(startTime);\n    isRunning = true;\n\n    raf.add(key, tick);\n  }\n\n  return {\n    start,\n    finish: () => progress(1),\n    pause,\n    play,\n    progress,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,MAAM,KAAK,SAAS,MAAM,yBAAyB;AAC5D,SAAS,WAAW,SAAS,gBAAgB;AAC7C,SAAS,MAAM,aAAa,cAAc;AAC1C,OAAO,YAAY;AAGnB,IAAI,KAAK;AACT,MAAM,6BAA6B;AAwE5B,SAAS,cAAc,MAAoD;AAChF,MAAI,CAAC,UAAU,IAAI,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,GAAG;AACjB,WAAO,YAAY,GAAG,IAAI;AAAA,EAC5B;AAEA,SAAO;AACT;AAKO,SAAS,MAAM,UAAyC,UAAwB,CAAC,GAAU;AAChG,QAAM,MAAM,OAAO;AAEnB,MAAI,gBAAgB;AACpB,MAAI,gBAAgB;AAEpB,QAAM,WAAW,UAAU,QAAQ,MAAM,MAAM,SAAS,QAAQ,MAAM,KAAK,QAAQ;AACnF,QAAM,eAAe,SAAS,QAAQ,MAAM,IAAI,QAAQ,SAAS;AACjE,QAAM,YAAY,QAAQ,aAAa;AACvC,QAAM,OAAO,cAAc,QAAQ,MAAM;AAEzC,MAAI,QAAQ,QAAQ,SAAS;AAC7B,WAAS;AACT,MAAI,WAAW,QAAQ,YAAY;AACnC,cAAY;AAGZ,MAAI,YAAY,aAAa;AAC7B,MAAI,UAAU,WAAW,SAAS;AAGlC,QAAM,MAAM,MAAM,EAAE;AACpB,QAAM;AAEN,QAAM,EAAE,UAAU,MAAM,aAAa,MAAM,WAAW,KAAK,IAAI;AAC/D,MAAI,YAAY;AAKhB,WAAS,QAAQ;AACf,gBAAY;AACZ,QAAI,OAAO,GAAG;AAAA,EAChB;AAKA,WAAS,SAAS,aAAqB;AACrC,QAAI,CAAC,UAAU,WAAW,GAAG;AAC3B,aAAO;AAAA,IACT;AAEA,oBAAgB;AAChB,oBAAgB,WACZ,KAAK,eAAe,eAAe,cAAc,SAAS,IAC1D,KAAK,aAAa;AAGtB,QAAI,KAAK,IAAI,IAAI,aAAa,IAAI,WAAW;AAC3C,sBAAgB;AAChB,sBAAgB;AAAA,IAClB;AAEA,aAAS,aAAa;AACtB,eAAW,aAAa;AAExB,QAAI,kBAAkB,GAAG;AACvB,YAAM;AACN,4BAAsB,MAAM,SAAS,aAAa,CAAC;AAAA,IACrD;AAEA,WAAO;AAAA,EACT;AAKA,WAAS,KAAK,OAAyB;AACrC,aAAS,QAAQ,IAAI,MAAM,MAAM,WAAW,SAAS,GAAG,CAAC,CAAC,CAAC;AAAA,EAC7D;AAEA,WAAS,eAAe;AACtB,WAAO,YAAY,IAAI,IAAI;AAAA,EAC7B;AAEA,WAAS,WAAW,MAAc;AAChC,WAAO,WAAW,kBAAkB,MAAM,CAAC,IAAI,OAAO;AAAA,EACxD;AAKA,WAAS,QAAQ;AACf,YAAQ,CAAC;AACT,gBAAY,aAAa;AACzB,cAAU,WAAW,SAAS;AAC9B,oBAAgB;AAChB,oBAAgB;AAChB,gBAAY;AAEZ,QAAI,IAAI,KAAK,IAAI;AAAA,EACnB;AAKA,WAAS,OAAO;AACd,QAAI,WAAW;AACb;AAAA,IACF;AAEA,gBAAY,aAAa,IAAI,KAAK,GAAG,UAAU,aAAa;AAC5D,cAAU,WAAW,SAAS;AAC9B,gBAAY;AAEZ,QAAI,IAAI,KAAK,IAAI;AAAA,EACnB;AAEA,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,MAAM,SAAS,CAAC;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }