@weasel-js/ui 1.7.0 → 1.7.2

package/dist/chunks/useRovingTabIndex-Bp_hYm_h.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRovingTabIndex-Bp_hYm_h.js","names":["firstEnabledIndex","i","items","lastEnabledIndex","nextEnabledIndex","k","from","prevEnabledIndex","useRovingTabIndex","options","rootRef","useRef","tabStopIndex","focusItem","root","itemClassName","index","nextIndex","e","onActivate","onNavigate"],"sources":["../../src/useRovingTabIndex.ts"],"sourcesContent":["import { useRef, type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';\n\n/** The only thing the hook needs to know about a bar's items: which are\n *  skipped by arrow navigation. */\nexport type RovingItem = { disabled?: boolean };\n\n/** Options for {@link useRovingTabIndex}. */\nexport type UseRovingTabIndexOptions = {\n  /** In the same order as the elements carrying `itemClassName`. */\n  items: readonly RovingItem[];\n  /** Class on the focusable element of each item, inside the container the\n   *  returned `rootRef` is attached to. Their DOM order must match `items`. */\n  itemClassName: string;\n  /** Index that carries `tabIndex=0`. Defaults to the first enabled item; a\n   *  radiogroup-style bar passes its selected index so Tab lands on the\n   *  current value. */\n  tabStopIndex?: number;\n  /** Called with the new index as arrow/Home/End focus moves, before focus\n   *  moves. This is where a selection-follows-focus bar commits the value. */\n  onNavigate?: (index: number) => void;\n  /** Space/Enter on the item at `index`. When omitted the keypress is left\n   *  alone, which on a native `<button>` produces an ordinary click. */\n  onActivate?: (index: number) => void;\n};\n\n/**\n * What {@link useRovingTabIndex} returns: a container ref plus the per-item\n * `tabIndex` and `onKeyDown` values to spread onto each item.\n */\nexport type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {\n  /** Attach to the container element that holds the items. */\n  rootRef: RefObject<T | null>;\n  /** `tabIndex` value for the item at `index`. */\n  tabIndexFor: (index: number) => 0 | -1;\n  /** `onKeyDown` for the item at `index`. */\n  onKeyDown: (index: number) => (e: ReactKeyboardEvent<HTMLElement>) => void;\n};\n\nfunction firstEnabledIndex(items: readonly RovingItem[]): number {\n  for (let i = 0; i < items.length; i++) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction lastEnabledIndex(items: readonly RovingItem[]): number {\n  for (let i = items.length - 1; i >= 0; i--) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction nextEnabledIndex(items: readonly RovingItem[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from + k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\nfunction prevEnabledIndex(items: readonly RovingItem[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from - k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\n/**\n * Roving tabindex for a bar of items: one item is in the tab order, and the\n * arrow keys move focus among the rest, skipping disabled ones and wrapping\n * at both ends. Home and End go to the first and last enabled item. Both axes\n * navigate, so the same bar works laid out either way.\n *\n * Backs `ButtonBar`, `OptionsBar`, and `ToggleBar`.\n *\n * **When a bar should not use this.** What decides it is the items, not who\n * owns them. A container of compound controls — a number field, a select, a\n * color field — must leave the arrow keys alone, because those controls edit\n * their own value with them; taking the arrows over would break the control\n * to navigate between controls. `ToolOptionsBar` is that case: it draws its\n * own controls from a tool's schema now rather than taking arbitrary\n * children, and a schema-drawn number field eats arrows exactly as a\n * hand-placed one did, so it keeps plain DOM tab order. A bar whose items are\n * all simple buttons is the case this hook is for.\n *\n * With every item disabled there is no tab stop and the bar drops out of the\n * tab order entirely.\n */\nexport function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(\n  options: UseRovingTabIndexOptions,\n): RovingTabIndex<T> {\n  const { items, itemClassName, onNavigate, onActivate } = options;\n  const rootRef = useRef<T | null>(null);\n\n  const tabStopIndex = options.tabStopIndex ?? firstEnabledIndex(items);\n\n  const focusItem = (index: number): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    const elements = root.querySelectorAll<HTMLElement>(`.${itemClassName}`);\n    elements[index]?.focus();\n  };\n\n  const onKeyDown = (index: number) => (e: ReactKeyboardEvent<HTMLElement>): void => {\n    let nextIndex = -1;\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        nextIndex = prevEnabledIndex(items, index);\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        nextIndex = nextEnabledIndex(items, index);\n        break;\n      case 'Home':\n        nextIndex = firstEnabledIndex(items);\n        break;\n      case 'End':\n        nextIndex = lastEnabledIndex(items);\n        break;\n      case ' ':\n      case 'Enter':\n        if (onActivate) {\n          e.preventDefault();\n          onActivate(index);\n        }\n        return;\n      default:\n        return;\n    }\n    if (nextIndex < 0 || nextIndex === index) return;\n    e.preventDefault();\n    onNavigate?.(nextIndex);\n    focusItem(nextIndex);\n  };\n\n  return {\n    rootRef,\n    tabIndexFor: (index: number) => (index === tabStopIndex ? 0 : -1),\n    onKeyDown,\n  };\n}\n"],"mappings":";;AAsCA,SAASA,EAAkB,GAAsC;CAC/D,KAAK,IAAIC,IAAI,GAAGA,IAAIC,EAAM,QAAQ,KAAK,IAAI,CAACA,EAAMD,EAAE,CAAC,UAAU,OAAOA;CACtE,OAAO;AACT;AAEA,SAASE,EAAiB,GAAsC;CAC9D,KAAK,IAAIF,IAAIC,EAAM,SAAS,GAAGD,KAAK,GAAG,KAAK,IAAI,CAACC,EAAMD,EAAE,CAAC,UAAU,OAAOA;CAC3E,OAAO;AACT;AAEA,SAASG,EAAiB,GAA8B,GAAsB;CAC5E,IAAM,IAAIF,EAAM;CAChB,KAAK,IAAIG,IAAI,GAAGA,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAKC,IAAOD,IAAI,KAAK;EAC3B,IAAI,CAACH,EAAM,EAAE,CAAC,UAAU,OAAO;CACjC;CACA,OAAOI;AACT;AAEA,SAASC,EAAiB,GAA8B,GAAsB;CAC5E,IAAM,IAAIL,EAAM;CAChB,KAAK,IAAIG,IAAI,GAAGA,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAKC,IAAOD,IAAI,KAAK;EAC3B,IAAI,CAACH,EAAM,EAAE,CAAC,UAAU,OAAO;CACjC;CACA,OAAOI;AACT;AAuBA,SAAgBE,EACd,GACmB;CACnB,IAAM,EAAE,UAAO,kBAAe,eAAY,kBAAeC,GACnDC,IAAUC,EAAiB,IAAI,GAE/BC,IAAeH,EAAQ,gBAAgBT,EAAkBE,CAAK,GAE9DW,KAAa,MAAwB;EACzC,IAAMC,IAAOJ,EAAQ;EACrB,AAAKI,KAELA,EADsB,iBAA8B,IAAIC,GACxD,CAAA,CAASC,EAAM,EAAE,MAAM;CACzB;CAmCA,OAAO;EACL;EACA,cAAc,MAAmBA,MAAUJ,IAAe,IAAI;EAC9D,YApCiB,OAAmB,MAA6C;GACjF,IAAIK,IAAY;GAChB,QAAQC,EAAE,KAAV;IACE,KAAK;IACL,KAAK;KACH,IAAYX,EAAiBL,GAAOc,CAAK;KACzC;IACF,KAAK;IACL,KAAK;KACH,IAAYZ,EAAiBF,GAAOc,CAAK;KACzC;IACF,KAAK;KACH,IAAYhB,EAAkBE,CAAK;KACnC;IACF,KAAK;KACH,IAAYC,EAAiBD,CAAK;KAClC;IACF,KAAK;IACL,KAAK;KACH,AAAIiB,MACFD,EAAE,eAAe,GACjBC,EAAWH,CAAK;KAElB;IACF,SACE;GACJ;GACA,AAAIC,IAAY,KAAKA,MAAcD,MACnCE,EAAE,eAAe,GACjBE,IAAaH,CAAS,GACtBJ,EAAUI,CAAS;EACrB;CAMA;AACF"}