@studiometa/js-toolkit 3.8.2 → 3.9.0-beta.1

package/utils/trapFocus.js.map

@@ -1,7 +0,0 @@
-{
-  "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 * @link https://js-toolkit.studiometa.dev/utils/trapFocus.html\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 * @link https://js-toolkit.studiometa.dev/utils/trapFocus.html\n */\nexport function untrapFocus() {\n  if (focusedBefore && isFunction(focusedBefore.focus)) {\n    focusedBefore.focus();\n    focusedBefore = null;\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,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;AASO,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;AAMO,SAAS,cAAc;AAC5B,MAAI,iBAAiB,WAAW,cAAc,KAAK,GAAG;AACpD,kBAAc,MAAM;AACpB,oBAAgB;AAAA,EAClB;AACF;",
-  "names": []
-}

package/utils/tween.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../packages/js-toolkit/utils/tween.ts"],
-  "sourcesContent": ["import { cubicBezier } from '@motionone/easing';\nimport { lerp, map, clamp01, damp, inertiaFinalValue, spring } from './math/index.js';\nimport { isArray, isNumber } from './is.js';\nimport { noop, noopValue as linear } from './noop.js';\nimport { useRaf } from '../services/RafService.js';\nimport type { EasingFunction } from './math/createEases.js';\n\nlet id = 0;\nconst DEFAULT_PROGRESS_PRECISION = 1 / 1e4;\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   * Enable spring transition. Setting this option to `true` or a `number` will disable the `duration` option.\n   * If `true`, a default stiffness of 0.1 will be used, if a `number` is given, it will be used instead.\n   */\n  spring?: true | number;\n  /**\n   * When spring physics are enabled, use the mass option to make the object heavier or lighter. Defaults to `1`.\n   */\n  mass?: number;\n  /**\n   * The precision for when to consider the tween finished.\n   * Defaults to `0.00001`.\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 (ease === undefined) {\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 * @link https://js-toolkit.studiometa.dev/utils/tween.html\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  let velocity = 0;\n\n  const isSmooth = options.smooth !== undefined && (isNumber(options.smooth) || options.smooth);\n  const isSpring = options.spring !== undefined && (isNumber(options.spring) || options.spring);\n  const stiffness = isNumber(options.spring) ? options.spring : 0.1;\n  const mass = isNumber(options.mass) ? options.mass : 1;\n  const damping = 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 (newProgress === undefined) {\n      return easedProgress;\n    }\n\n    let shouldStop = false;\n\n    progressValue = newProgress;\n    if (isSpring) {\n      [easedProgress, velocity] = spring(\n        progressValue,\n        easedProgress,\n        velocity,\n        stiffness,\n        damping,\n        mass,\n        precision,\n      );\n    } else {\n      easedProgress = isSmooth\n        ? damp(progressValue, easedProgress, damping, precision)\n        : ease(progressValue);\n    }\n\n    // Stop when reaching precision\n    if (Math.abs(1 - easedProgress) < precision) {\n      progressValue = 1;\n      easedProgress = 1;\n      shouldStop = true;\n    }\n\n    callback(easedProgress);\n    onProgress(easedProgress);\n\n    if (shouldStop) {\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": "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",
-  "names": []
-}

package/utils/wait.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../packages/js-toolkit/utils/wait.ts"],
-  "sourcesContent": ["export function wait(delay = 0) {\n  return new Promise((resolve) => {\n    setTimeout(resolve, delay);\n  });\n}\n"],
-  "mappings": "AAAO,SAAS,KAAK,QAAQ,GAAG;AAC9B,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,eAAW,SAAS,KAAK;AAAA,EAC3B,CAAC;AACH;",
-  "names": []
-}