@salt-ds/lab 1.0.0-alpha.0 → 1.0.0-alpha.2

package/dist-es/packages/lab/src/tabs/useKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/tabs/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  FocusEvent,\n  FocusEventHandler,\n  KeyboardEvent,\n  MouseEvent,\n  MouseEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { OverflowItem } from \"../responsive\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowLeft,\n  ArrowRight,\n  Home,\n  End,\n} from \"../common-hooks\";\n\ntype orientationType = \"horizontal\" | \"vertical\";\ntype directionType = \"bwd\" | \"fwd\" | \"start\" | \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n  horizontal: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowLeft]: \"bwd\",\n    [ArrowRight]: \"fwd\",\n  } as directionMap,\n  vertical: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowUp]: \"bwd\",\n    [ArrowDown]: \"fwd\",\n  } as directionMap,\n};\n\nconst isNavigationKey = (\n  key: string,\n  orientation: orientationType = \"horizontal\"\n) => navigation[orientation][key] !== undefined;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n  if (direction === \"start\") {\n    return 0;\n  } else if (direction === \"end\") {\n    return count - 1;\n  } else if (direction === \"bwd\") {\n    if (idx > 0) {\n      return idx - 1;\n    } else {\n      return idx;\n    }\n  } else {\n    if (idx === null) {\n      return 0;\n    } else if (idx === count - 1) {\n      return idx;\n    } else {\n      return idx + 1;\n    }\n  }\n}\n\nconst isFocusable = (item: OverflowItem) => !item.overflowed;\nconst getFocusableElement = (el: HTMLElement | null) =>\n  el\n    ? el.hasAttribute(\"tabindex\")\n      ? el\n      : (el.querySelector(\"[tabindex]\") as HTMLElement)\n    : null;\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  indexPositions: OverflowItem[];\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  orientation: orientationType;\n  selectedIndex: number;\n}\n\ninterface TabstripNavigationHookResult {\n  containerProps: ContainerNavigationProps;\n  highlightedIdx: number;\n  focusTab: (\n    tabIndex: number,\n    immediateFocus?: boolean,\n    withKeyboard?: boolean\n  ) => void;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  onClick: (evt: MouseEvent, tabIndex: number) => void;\n  onFocus: (evt: FocusEvent<HTMLElement>) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = ({\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\n  indexPositions,\n  keyBoardActivation,\n  orientation,\n  selectedIndex: selectedTabIndex = 0,\n}: TabstripNavigationHookProps): TabstripNavigationHookResult => {\n  const manualActivation = keyBoardActivation === \"manual\";\n  const mouseClickPending = useRef(false);\n  const focusedRef = useRef<number>(-1);\n  const [hasFocus, setHasFocus] = useState(false);\n  const [, forceRefresh] = useState({});\n  const [highlightedIdx, _setHighlightedIdx] = useControlled({\n    controlled: highlightedIdxProp,\n    default: defaultHighlightedIdx,\n    name: \"UseKeyboardNavigation\",\n  });\n\n  const setHighlightedIdx = useCallback(\n    (value: number) => {\n      _setHighlightedIdx((focusedRef.current = value));\n    },\n    [_setHighlightedIdx]\n  );\n\n  const keyboardNavigation = useRef(false);\n\n  const focusTab = useCallback(\n    (tabIndex: number, immediateFocus = false, withKeyboard?: boolean) => {\n      // The timeout is important in two scenarios:\n      // 1) where tab has overflowed and is being selected from overflow menu.\n      // We must not focus it until the overflow mechanism + render has restored\n      // it to the main display.\n      // 2) when we are focussing a new tab\n      // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n      // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n      // styled by css class) focus style will briefly linger on both.\n      setHighlightedIdx(tabIndex);\n\n      if (withKeyboard === true && !keyboardNavigation.current) {\n        keyboardNavigation.current = true;\n      }\n\n      const setFocus = () => {\n        const item = indexPositions.find((i) => i.index === tabIndex);\n\n        if (item) {\n          const focussableElement = getFocusableElement(\n            document.getElementById(item.id)\n          );\n          focussableElement?.focus();\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, 70);\n      }\n    },\n    [indexPositions, setHighlightedIdx]\n  );\n\n  const onFocus = (e: FocusEvent<HTMLElement>) => {\n    // If focus is received by keyboard navigation, item with tabindex 0 will receive\n    // focus. If the item receiving focus has tabindex -1, then focus has been set\n    // programatically. We must respect this and not reset focus to selected tab.\n    if (focusedRef.current === -1) {\n      // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n      // the click event will have set correct value.\n      if (e.target.tabIndex === -1) {\n        // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n        // to revisit this and add code here if we may get focus set programatically in other ways.\n      } else {\n        setTimeout(() => {\n          // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n          if (focusedRef.current === -1) {\n            setHighlightedIdx(selectedTabIndex);\n          }\n        }, 200);\n      }\n    }\n  };\n\n  const nextFocusableItemIdx = useCallback(\n    (\n      direction: directionType = \"fwd\",\n      idx = direction === \"fwd\" ? -1 : indexPositions.length\n    ) => {\n      let nextIdx = nextItemIdx(indexPositions.length, direction, idx);\n      const nextDirection =\n        direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n      while (\n        ((nextDirection === \"fwd\" && nextIdx < indexPositions.length) ||\n          (nextDirection === \"bwd\" && nextIdx > 0)) &&\n        !isFocusable(indexPositions[nextIdx])\n      ) {\n        const newIdx = nextItemIdx(\n          indexPositions.length,\n          nextDirection,\n          nextIdx\n        );\n        if (newIdx === nextIdx) {\n          break;\n        } else {\n          nextIdx = newIdx;\n        }\n      }\n      return nextIdx;\n    },\n    [indexPositions]\n  );\n\n  // forceFocusVisible supports an edge case - first or last Tab are clicked\n  // then Left or Right Arrow keys are pressed, There will be no navigation\n  // but focusVisible must be applied\n  const navigateChildItems = useCallback(\n    (e: React.KeyboardEvent, forceFocusVisible = false) => {\n      const direction = navigation[orientation][e.key];\n      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n      if (nextIdx !== highlightedIdx) {\n        const immediateFocus = true;\n        if (manualActivation) {\n          focusTab(nextIdx, immediateFocus);\n        } else {\n          // activateTab(newTabIndex);\n        }\n      } else if (forceFocusVisible) {\n        forceRefresh({});\n      }\n    },\n    [\n      highlightedIdx,\n      manualActivation,\n      nextFocusableItemIdx,\n      focusTab,\n      orientation,\n    ]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {\n        e.preventDefault();\n        if (keyboardNavigation.current) {\n          navigateChildItems(e);\n        } else {\n          keyboardNavigation.current = true;\n          navigateChildItems(e, true);\n        }\n      }\n    },\n    [indexPositions, navigateChildItems, orientation]\n  );\n\n  // TODO, in common hooks, we use mouse movement to track current highlighted\n  // index, rather than rely on component item reporting it\n  const handleItemClick = (_: MouseEvent, tabIndex: number) => {\n    setHighlightedIdx(tabIndex);\n  };\n\n  const handleFocus = useCallback(\n    (evt: FocusEvent) => {\n      if (!hasFocus) {\n        setHasFocus(true);\n        if (!mouseClickPending.current) {\n          keyboardNavigation.current = true;\n        } else {\n          mouseClickPending.current = false;\n        }\n      }\n    },\n    [hasFocus]\n  );\n\n  const handleContainerMouseDown = useCallback(\n    (evt: MouseEvent) => {\n      if (!hasFocus) {\n        mouseClickPending.current = true;\n      }\n      keyboardNavigation.current = false;\n    },\n    [hasFocus]\n  );\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".saltTabstrip\");\n      const destTarget = e.relatedTarget as HTMLElement;\n      if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n        setHighlightedIdx(-1);\n        setHasFocus(false);\n      }\n    },\n    onMouseDownCapture: handleContainerMouseDown,\n    onFocus: handleFocus,\n    onMouseLeave: () => {\n      keyboardNavigation.current = true;\n      setHighlightedIdx(-1);\n      mouseClickPending.current = false;\n    },\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (hasFocus && selectedTabIndex !== undefined) {\n      focusTab(selectedTabIndex);\n    }\n  }, [focusTab, hasFocus, selectedTabIndex]);\n\n  return {\n    containerProps,\n    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n    focusIsWithinComponent: hasFocus,\n    highlightedIdx,\n    focusTab,\n    onClick: handleItemClick,\n    onFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,UAAa,GAAA;AAAA,EACjB,UAAY,EAAA;AAAA,IACV,CAAC,IAAO,GAAA,OAAA;AAAA,IACR,CAAC,GAAM,GAAA,KAAA;AAAA,IACP,CAAC,SAAY,GAAA,KAAA;AAAA,IACb,CAAC,UAAa,GAAA,KAAA;AAAA,GAChB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,CAAC,IAAO,GAAA,OAAA;AAAA,IACR,CAAC,GAAM,GAAA,KAAA;AAAA,IACP,CAAC,OAAU,GAAA,KAAA;AAAA,IACX,CAAC,SAAY,GAAA,KAAA;AAAA,GACf;AACF,CAAA,CAAA;AAEA,MAAM,kBAAkB,CACtB,GAAA,EACA,cAA+B,YAC5B,KAAA,UAAA,CAAW,aAAa,GAAS,CAAA,KAAA,KAAA,CAAA,CAAA;AAEtC,SAAS,WAAA,CAAY,KAAe,EAAA,SAAA,EAA0B,GAAa,EAAA;AACzE,EAAA,IAAI,cAAc,OAAS,EAAA;AACzB,IAAO,OAAA,CAAA,CAAA;AAAA,GACT,MAAA,IAAW,cAAc,KAAO,EAAA;AAC9B,IAAA,OAAO,KAAQ,GAAA,CAAA,CAAA;AAAA,GACjB,MAAA,IAAW,cAAc,KAAO,EAAA;AAC9B,IAAA,IAAI,MAAM,CAAG,EAAA;AACX,MAAA,OAAO,GAAM,GAAA,CAAA,CAAA;AAAA,KACR,MAAA;AACL,MAAO,OAAA,GAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,MAAO,OAAA,CAAA,CAAA;AAAA,KACT,MAAA,IAAW,GAAQ,KAAA,KAAA,GAAQ,CAAG,EAAA;AAC5B,MAAO,OAAA,GAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAA,OAAO,GAAM,GAAA,CAAA,CAAA;AAAA,KACf;AAAA,GACF;AACF,CAAA;AAEA,MAAM,WAAc,GAAA,CAAC,IAAuB,KAAA,CAAC,IAAK,CAAA,UAAA,CAAA;AAClD,MAAM,mBAAsB,GAAA,CAAC,EAC3B,KAAA,EAAA,GACI,EAAG,CAAA,YAAA,CAAa,UAAU,CAAA,GACxB,EACC,GAAA,EAAA,CAAG,aAAc,CAAA,YAAY,CAChC,GAAA,IAAA,CAAA;AAiCC,MAAM,wBAAwB,CAAC;AAAA,EACpC,qBAAwB,GAAA,CAAA,CAAA;AAAA,EACxB,cAAgB,EAAA,kBAAA;AAAA,EAChB,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAe,gBAAmB,GAAA,CAAA;AACpC,CAAiE,KAAA;AAC/D,EAAA,MAAM,mBAAmB,kBAAuB,KAAA,QAAA,CAAA;AAChD,EAAM,MAAA,iBAAA,GAAoB,OAAO,KAAK,CAAA,CAAA;AACtC,EAAM,MAAA,UAAA,GAAa,OAAe,CAAE,CAAA,CAAA,CAAA;AACpC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC9C,EAAA,MAAM,GAAG,YAAY,CAAI,GAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AACpC,EAAA,MAAM,CAAC,cAAA,EAAgB,kBAAkB,CAAA,GAAI,aAAc,CAAA;AAAA,IACzD,UAAY,EAAA,kBAAA;AAAA,IACZ,OAAS,EAAA,qBAAA;AAAA,IACT,IAAM,EAAA,uBAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,KAAkB,KAAA;AACjB,MAAoB,kBAAA,CAAA,UAAA,CAAW,UAAU,KAAM,CAAA,CAAA;AAAA,KACjD;AAAA,IACA,CAAC,kBAAkB,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqB,OAAO,KAAK,CAAA,CAAA;AAEvC,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,QAAA,EAAkB,cAAiB,GAAA,KAAA,EAAO,YAA2B,KAAA;AASpE,MAAA,iBAAA,CAAkB,QAAQ,CAAA,CAAA;AAE1B,MAAA,IAAI,YAAiB,KAAA,IAAA,IAAQ,CAAC,kBAAA,CAAmB,OAAS,EAAA;AACxD,QAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA,CAAA;AAAA,OAC/B;AAEA,MAAA,MAAM,WAAW,MAAM;AACrB,QAAA,MAAM,OAAO,cAAe,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,UAAU,QAAQ,CAAA,CAAA;AAE5D,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,MAAM,iBAAoB,GAAA,mBAAA;AAAA,YACxB,QAAA,CAAS,cAAe,CAAA,IAAA,CAAK,EAAE,CAAA;AAAA,WACjC,CAAA;AACA,UAAmB,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,KAAA,EAAA,CAAA;AAAA,SACrB;AAAA,OACF,CAAA;AACA,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAS,QAAA,EAAA,CAAA;AAAA,OACJ,MAAA;AACL,QAAA,UAAA,CAAW,UAAU,EAAE,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,IACA,CAAC,gBAAgB,iBAAiB,CAAA;AAAA,GACpC,CAAA;AAEA,EAAM,MAAA,OAAA,GAAU,CAAC,CAA+B,KAAA;AAI9C,IAAI,IAAA,UAAA,CAAW,YAAY,CAAI,CAAA,EAAA;AAG7B,MAAI,IAAA,CAAA,CAAE,MAAO,CAAA,QAAA,KAAa,CAAI,CAAA,EAAA,CAGvB,MAAA;AACL,QAAA,UAAA,CAAW,MAAM;AAEf,UAAI,IAAA,UAAA,CAAW,YAAY,CAAI,CAAA,EAAA;AAC7B,YAAA,iBAAA,CAAkB,gBAAgB,CAAA,CAAA;AAAA,WACpC;AAAA,WACC,GAAG,CAAA,CAAA;AAAA,OACR;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CACE,YAA2B,KAC3B,EAAA,GAAA,GAAM,cAAc,KAAQ,GAAA,CAAA,CAAA,GAAK,eAAe,MAC7C,KAAA;AACH,MAAA,IAAI,OAAU,GAAA,WAAA,CAAY,cAAe,CAAA,MAAA,EAAQ,WAAW,GAAG,CAAA,CAAA;AAC/D,MAAA,MAAM,gBACJ,SAAc,KAAA,OAAA,GAAU,KAAQ,GAAA,SAAA,KAAc,QAAQ,KAAQ,GAAA,SAAA,CAAA;AAChE,MAAA,OAAA,CACI,aAAkB,KAAA,KAAA,IAAS,OAAU,GAAA,cAAA,CAAe,MACnD,IAAA,aAAA,KAAkB,KAAS,IAAA,OAAA,GAAU,CACxC,KAAA,CAAC,WAAY,CAAA,cAAA,CAAe,QAAQ,CACpC,EAAA;AACA,QAAA,MAAM,MAAS,GAAA,WAAA;AAAA,UACb,cAAe,CAAA,MAAA;AAAA,UACf,aAAA;AAAA,UACA,OAAA;AAAA,SACF,CAAA;AACA,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,MAAA;AAAA,SACK,MAAA;AACL,UAAU,OAAA,GAAA,MAAA,CAAA;AAAA,SACZ;AAAA,OACF;AACA,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,cAAc,CAAA;AAAA,GACjB,CAAA;AAKA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,CAAwB,EAAA,iBAAA,GAAoB,KAAU,KAAA;AACrD,MAAM,MAAA,SAAA,GAAY,UAAW,CAAA,WAAA,CAAA,CAAa,CAAE,CAAA,GAAA,CAAA,CAAA;AAC5C,MAAM,MAAA,OAAA,GAAU,oBAAqB,CAAA,SAAA,EAAW,cAAc,CAAA,CAAA;AAC9D,MAAA,IAAI,YAAY,cAAgB,EAAA;AAC9B,QAAA,MAAM,cAAiB,GAAA,IAAA,CAAA;AACvB,QAAA,IAAI,gBAAkB,EAAA;AACpB,UAAA,QAAA,CAAS,SAAS,cAAc,CAAA,CAAA;AAAA,SAGlC;AAAA,iBACS,iBAAmB,EAAA;AAC5B,QAAA,YAAA,CAAa,EAAE,CAAA,CAAA;AAAA,OACjB;AAAA,KACF;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,oBAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAqB,KAAA;AACpB,MAAA,IAAI,eAAe,MAAS,GAAA,CAAA,IAAK,gBAAgB,CAAE,CAAA,GAAA,EAAK,WAAW,CAAG,EAAA;AACpE,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,QAAA,IAAI,mBAAmB,OAAS,EAAA;AAC9B,UAAA,kBAAA,CAAmB,CAAC,CAAA,CAAA;AAAA,SACf,MAAA;AACL,UAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA,CAAA;AAC7B,UAAA,kBAAA,CAAmB,GAAG,IAAI,CAAA,CAAA;AAAA,SAC5B;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,cAAgB,EAAA,kBAAA,EAAoB,WAAW,CAAA;AAAA,GAClD,CAAA;AAIA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAA,EAAe,QAAqB,KAAA;AAC3D,IAAA,iBAAA,CAAkB,QAAQ,CAAA,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAoB,KAAA;AACnB,MAAA,IAAI,CAAC,QAAU,EAAA;AACb,QAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,QAAI,IAAA,CAAC,kBAAkB,OAAS,EAAA;AAC9B,UAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA,CAAA;AAAA,SACxB,MAAA;AACL,UAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAAA,SAC9B;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,MAAM,wBAA2B,GAAA,WAAA;AAAA,IAC/B,CAAC,GAAoB,KAAA;AACnB,MAAA,IAAI,CAAC,QAAU,EAAA;AACb,QAAA,iBAAA,CAAkB,OAAU,GAAA,IAAA,CAAA;AAAA,OAC9B;AACA,MAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA,CAAA;AAAA,KAC/B;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAA;AAAA,IACrB,MAAA,EAAQ,CAAC,CAAkB,KAAA;AACzB,MAAA,MAAM,YAAgB,GAAA,CAAA,CAAE,MAAuB,CAAA,OAAA,CAAQ,eAAe,CAAA,CAAA;AACtE,MAAA,MAAM,aAAa,CAAE,CAAA,aAAA,CAAA;AACrB,MAAA,IAAI,YAAgB,IAAA,EAAC,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,QAAA,CAAS,UAAa,CAAA,CAAA,EAAA;AACvD,QAAA,iBAAA,CAAkB,CAAE,CAAA,CAAA,CAAA;AACpB,QAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,kBAAoB,EAAA,wBAAA;AAAA,IACpB,OAAS,EAAA,WAAA;AAAA,IACT,cAAc,MAAM;AAClB,MAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA,CAAA;AAC7B,MAAA,iBAAA,CAAkB,CAAE,CAAA,CAAA,CAAA;AACpB,MAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAAA,KAC9B;AAAA,GACF,CAAA;AAEA,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,QAAA,IAAY,qBAAqB,KAAW,CAAA,EAAA;AAC9C,MAAA,QAAA,CAAS,gBAAgB,CAAA,CAAA;AAAA,KAC3B;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,QAAA,EAAU,gBAAgB,CAAC,CAAA,CAAA;AAEzC,EAAO,OAAA;AAAA,IACL,cAAA;AAAA,IACA,YAAA,EAAc,kBAAmB,CAAA,OAAA,GAAU,cAAiB,GAAA,CAAA,CAAA;AAAA,IAC5D,sBAAwB,EAAA,QAAA;AAAA,IACxB,cAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA,eAAA;AAAA,IACT,OAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,GACb,CAAA;AACF;;;;"}
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/tabs/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  FocusEvent,\n  FocusEventHandler,\n  KeyboardEvent,\n  MouseEvent,\n  MouseEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { OverflowItem } from \"../responsive\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowLeft,\n  ArrowRight,\n  Home,\n  End,\n} from \"../common-hooks\";\n\ntype orientationType = \"horizontal\" | \"vertical\";\ntype directionType = \"bwd\" | \"fwd\" | \"start\" | \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n  horizontal: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowLeft]: \"bwd\",\n    [ArrowRight]: \"fwd\",\n  } as directionMap,\n  vertical: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowUp]: \"bwd\",\n    [ArrowDown]: \"fwd\",\n  } as directionMap,\n};\n\nconst isNavigationKey = (\n  key: string,\n  orientation: orientationType = \"horizontal\"\n) => navigation[orientation][key] !== undefined;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n  if (direction === \"start\") {\n    return 0;\n  } else if (direction === \"end\") {\n    return count - 1;\n  } else if (direction === \"bwd\") {\n    if (idx > 0) {\n      return idx - 1;\n    } else {\n      return idx;\n    }\n  } else {\n    if (idx === null) {\n      return 0;\n    } else if (idx === count - 1) {\n      return idx;\n    } else {\n      return idx + 1;\n    }\n  }\n}\n\nconst isFocusable = (item: OverflowItem) => !item.overflowed;\nconst getFocusableElement = (el: HTMLElement | null) =>\n  el\n    ? el.hasAttribute(\"tabindex\")\n      ? el\n      : (el.querySelector(\"[tabindex]\") as HTMLElement)\n    : null;\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  indexPositions: OverflowItem[];\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  orientation: orientationType;\n  selectedIndex: number;\n}\n\ninterface TabstripNavigationHookResult {\n  containerProps: ContainerNavigationProps;\n  highlightedIdx: number;\n  focusTab: (\n    tabIndex: number,\n    immediateFocus?: boolean,\n    withKeyboard?: boolean\n  ) => void;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  onClick: (evt: MouseEvent, tabIndex: number) => void;\n  onFocus: (evt: FocusEvent<HTMLElement>) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = ({\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\n  indexPositions,\n  keyBoardActivation,\n  orientation,\n  selectedIndex: selectedTabIndex = 0,\n}: TabstripNavigationHookProps): TabstripNavigationHookResult => {\n  const manualActivation = keyBoardActivation === \"manual\";\n  const mouseClickPending = useRef(false);\n  const focusedRef = useRef<number>(-1);\n  const [hasFocus, setHasFocus] = useState(false);\n  const [, forceRefresh] = useState({});\n  const [highlightedIdx, _setHighlightedIdx] = useControlled({\n    controlled: highlightedIdxProp,\n    default: defaultHighlightedIdx,\n    name: \"UseKeyboardNavigation\",\n  });\n\n  const setHighlightedIdx = useCallback(\n    (value: number) => {\n      _setHighlightedIdx((focusedRef.current = value));\n    },\n    [_setHighlightedIdx]\n  );\n\n  const keyboardNavigation = useRef(false);\n\n  const focusTab = useCallback(\n    (tabIndex: number, immediateFocus = false, withKeyboard?: boolean) => {\n      // The timeout is important in two scenarios:\n      // 1) where tab has overflowed and is being selected from overflow menu.\n      // We must not focus it until the overflow mechanism + render has restored\n      // it to the main display.\n      // 2) when we are focussing a new tab\n      // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n      // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n      // styled by css class) focus style will briefly linger on both.\n      setHighlightedIdx(tabIndex);\n\n      if (withKeyboard === true && !keyboardNavigation.current) {\n        keyboardNavigation.current = true;\n      }\n\n      const setFocus = () => {\n        const item = indexPositions.find((i) => i.index === tabIndex);\n\n        if (item) {\n          const focussableElement = getFocusableElement(\n            document.getElementById(item.id)\n          );\n          focussableElement?.focus();\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, 70);\n      }\n    },\n    [indexPositions, setHighlightedIdx]\n  );\n\n  const onFocus = (e: FocusEvent<HTMLElement>) => {\n    // If focus is received by keyboard navigation, item with tabindex 0 will receive\n    // focus. If the item receiving focus has tabindex -1, then focus has been set\n    // programatically. We must respect this and not reset focus to selected tab.\n    if (focusedRef.current === -1) {\n      // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n      // the click event will have set correct value.\n      if (e.target.tabIndex === -1) {\n        // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n        // to revisit this and add code here if we may get focus set programatically in other ways.\n      } else {\n        setTimeout(() => {\n          // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n          if (focusedRef.current === -1) {\n            setHighlightedIdx(selectedTabIndex);\n          }\n        }, 200);\n      }\n    }\n  };\n\n  const nextFocusableItemIdx = useCallback(\n    (\n      direction: directionType = \"fwd\",\n      idx = direction === \"fwd\" ? -1 : indexPositions.length\n    ) => {\n      let nextIdx = nextItemIdx(indexPositions.length, direction, idx);\n      const nextDirection =\n        direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n      while (\n        ((nextDirection === \"fwd\" && nextIdx < indexPositions.length) ||\n          (nextDirection === \"bwd\" && nextIdx > 0)) &&\n        !isFocusable(indexPositions[nextIdx])\n      ) {\n        const newIdx = nextItemIdx(\n          indexPositions.length,\n          nextDirection,\n          nextIdx\n        );\n        if (newIdx === nextIdx) {\n          break;\n        } else {\n          nextIdx = newIdx;\n        }\n      }\n      return nextIdx;\n    },\n    [indexPositions]\n  );\n\n  // forceFocusVisible supports an edge case - first or last Tab are clicked\n  // then Left or Right Arrow keys are pressed, There will be no navigation\n  // but focusVisible must be applied\n  const navigateChildItems = useCallback(\n    (e: React.KeyboardEvent, forceFocusVisible = false) => {\n      const direction = navigation[orientation][e.key];\n      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n      if (nextIdx !== highlightedIdx) {\n        const immediateFocus = true;\n        if (manualActivation) {\n          focusTab(nextIdx, immediateFocus);\n        } else {\n          // activateTab(newTabIndex);\n        }\n      } else if (forceFocusVisible) {\n        forceRefresh({});\n      }\n    },\n    [\n      highlightedIdx,\n      manualActivation,\n      nextFocusableItemIdx,\n      focusTab,\n      orientation,\n    ]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {\n        e.preventDefault();\n        if (keyboardNavigation.current) {\n          navigateChildItems(e);\n        } else {\n          keyboardNavigation.current = true;\n          navigateChildItems(e, true);\n        }\n      }\n    },\n    [indexPositions, navigateChildItems, orientation]\n  );\n\n  // TODO, in common hooks, we use mouse movement to track current highlighted\n  // index, rather than rely on component item reporting it\n  const handleItemClick = (_: MouseEvent, tabIndex: number) => {\n    setHighlightedIdx(tabIndex);\n  };\n\n  const handleFocus = useCallback(\n    (evt: FocusEvent) => {\n      if (!hasFocus) {\n        setHasFocus(true);\n        if (!mouseClickPending.current) {\n          keyboardNavigation.current = true;\n        } else {\n          mouseClickPending.current = false;\n        }\n      }\n    },\n    [hasFocus]\n  );\n\n  const handleContainerMouseDown = useCallback(\n    (evt: MouseEvent) => {\n      if (!hasFocus) {\n        mouseClickPending.current = true;\n      }\n      keyboardNavigation.current = false;\n    },\n    [hasFocus]\n  );\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".saltTabstrip\");\n      const destTarget = e.relatedTarget as HTMLElement;\n      if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n        setHighlightedIdx(-1);\n        setHasFocus(false);\n      }\n    },\n    onMouseDownCapture: handleContainerMouseDown,\n    onFocus: handleFocus,\n    onMouseLeave: () => {\n      keyboardNavigation.current = true;\n      setHighlightedIdx(-1);\n      mouseClickPending.current = false;\n    },\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (hasFocus && selectedTabIndex !== undefined) {\n      focusTab(selectedTabIndex);\n    }\n  }, [focusTab, hasFocus, selectedTabIndex]);\n\n  return {\n    containerProps,\n    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n    focusIsWithinComponent: hasFocus,\n    highlightedIdx,\n    focusTab,\n    onClick: handleItemClick,\n    onFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/toggle-button/ToggleButton.js

@@ -1,11 +1,8 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useForkRef, Button } from '@salt-ds/core';
-import cx from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, Tooltip, Button } from '@salt-ds/core';
+import { clsx } from 'clsx';
 import { forwardRef, useState, useRef, useContext, useCallback, useEffect } from 'react';
 import { ToggleButtonGroupContext } from './internal/ToggleButtonGroupContext.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContext.js';
-import { useTooltip } from '../tooltip/useTooltip.js';
 import './ToggleButton.css.js';
 
 const withBaseName = makePrefixer("saltToggleButton");
@@ -58,16 +55,16 @@ const ToggleButton = forwardRef(
       }
     };
     const tabIndex = toggled && !disabled ? 0 : -1;
-    const { getTooltipProps, getTriggerProps } = useTooltip({
+    return /* @__PURE__ */ jsx(Tooltip, {
+      content: tooltipText,
       disabled: disableTooltip,
-      placement: orientation === "horizontal" ? "bottom" : "right"
-    });
-    const { ref: triggerRef, ...triggerProps } = getTriggerProps(
-      {
+      placement: orientation === "horizontal" ? "bottom" : "right",
+      children: /* @__PURE__ */ jsx(Button, {
+        ref: handleIconOnlyButton,
         "aria-checked": toggled,
         "aria-label": ariaLabel,
         "aria-posinset": index !== void 0 ? index + 1 : void 0,
-        className: cx(
+        className: clsx(
           withBaseName(),
           withBaseName(orientation),
           {
@@ -87,24 +84,7 @@ const ToggleButton = forwardRef(
         tabIndex: groupContext ? tabIndex : void 0,
         variant,
         ...restProps
-      }
-    );
-    const handleButtonRef = useForkRef(ref, buttonRef);
-    const handleIconOnlyButtonRef = useForkRef(
-      handleIconOnlyButton,
-      handleButtonRef
-    );
-    const handleRef = useForkRef(triggerRef, handleIconOnlyButtonRef);
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx(Tooltip, {
-          ...getTooltipProps({ title: tooltipText })
-        }),
-        /* @__PURE__ */ jsx(Button, {
-          ...triggerProps,
-          ref: handleRef
-        })
-      ]
+      })
     });
   }
 );

package/dist-es/packages/lab/src/toggle-button/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport {\n  forwardRef,\n  SyntheticEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ToggleButtonGroupContext } from \"./internal/ToggleButtonGroupContext\";\nimport { Tooltip, useTooltip } from \"../tooltip\";\n\nimport \"./ToggleButton.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport type ToggleButtonToggleEventHandler = (\n  event: SyntheticEvent<HTMLButtonElement>,\n  toggled: boolean\n) => void;\n\nexport interface ToggleButtonProps extends ButtonProps {\n  \"aria-label\"?: string;\n  \"data-button-index\"?: number;\n  toggled?: boolean;\n  tooltipText?: string;\n  disableTooltip?: boolean;\n  onToggle?: ToggleButtonToggleEventHandler;\n}\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  (props, ref) => {\n    const {\n      \"aria-label\": ariaLabel,\n      className,\n      onToggle,\n      toggled = false,\n      tooltipText = ariaLabel,\n      variant: variantProp = \"primary\",\n      disabled: disabledProp,\n      disableTooltip: disableTooltipProp,\n      focusableWhenDisabled: focusableWhenDisabledProp,\n      \"data-button-index\": index,\n      ...restProps\n    } = props;\n\n    const [iconOnly, setIconOnly] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const groupContext = useContext(ToggleButtonGroupContext);\n\n    const handleIconOnlyButton = useCallback(\n      (button: HTMLButtonElement | null) => {\n        setIconOnly(\n          button?.querySelector(\".saltIcon\") != null &&\n            button?.childElementCount === 1\n        );\n      },\n      [setIconOnly]\n    );\n\n    const {\n      register,\n      unregister,\n      disabled = disabledProp,\n      disableTooltip = disableTooltipProp,\n      focusableWhenDisabled = focusableWhenDisabledProp,\n      orientation = \"horizontal\",\n      variant = variantProp,\n    } = groupContext || {};\n\n    useEffect(() => {\n      if (\n        index !== undefined &&\n        register &&\n        unregister &&\n        (!disabled || focusableWhenDisabled)\n      ) {\n        register(buttonRef.current, index);\n\n        return function cleanup() {\n          unregister(index);\n        };\n      }\n    }, [index, disabled, focusableWhenDisabled, register, unregister]);\n\n    const handleToggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      if (!disabled) {\n        onToggle?.(event, !toggled);\n      }\n    };\n\n    const tabIndex = toggled && !disabled ? 0 : -1;\n\n    const { getTooltipProps, getTriggerProps } = useTooltip({\n      disabled: disableTooltip,\n      placement: orientation === \"horizontal\" ? \"bottom\" : \"right\",\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps<typeof Button>(\n      {\n        \"aria-checked\": toggled,\n        \"aria-label\": ariaLabel,\n        \"aria-posinset\": index !== undefined ? index + 1 : undefined,\n        className: cx(\n          withBaseName(),\n          withBaseName(orientation),\n          {\n            [withBaseName(\"primary\")]: variant === \"primary\",\n            [withBaseName(\"cta\")]: variant === \"cta\",\n            [withBaseName(\"secondary\")]: variant === \"secondary\",\n            [withBaseName(\"toggled\")]: toggled,\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"iconOnly\")]: iconOnly,\n          },\n          className\n        ),\n        onClick: handleToggle,\n        disabled,\n        focusableWhenDisabled,\n        role: groupContext ? \"radio\" : \"checkbox\",\n        tabIndex: groupContext ? tabIndex : undefined,\n        variant,\n        ...restProps,\n      }\n    );\n\n    const handleButtonRef = useForkRef(ref, buttonRef);\n    const handleIconOnlyButtonRef = useForkRef(\n      handleIconOnlyButton,\n      handleButtonRef\n    );\n    const handleRef = useForkRef(triggerRef, handleIconOnlyButtonRef);\n\n    return (\n      <>\n        <Tooltip {...getTooltipProps({ title: tooltipText })} />\n        <Button {...triggerProps} ref={handleRef} />\n      </>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer, Tooltip } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  SyntheticEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ToggleButtonGroupContext } from \"./internal/ToggleButtonGroupContext\";\n\nimport \"./ToggleButton.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport type ToggleButtonToggleEventHandler = (\n  event: SyntheticEvent<HTMLButtonElement>,\n  toggled: boolean\n) => void;\n\nexport interface ToggleButtonProps extends ButtonProps {\n  \"aria-label\"?: string;\n  \"data-button-index\"?: number;\n  toggled?: boolean;\n  tooltipText?: string;\n  disableTooltip?: boolean;\n  onToggle?: ToggleButtonToggleEventHandler;\n}\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  (props, ref) => {\n    const {\n      \"aria-label\": ariaLabel,\n      className,\n      onToggle,\n      toggled = false,\n      tooltipText = ariaLabel,\n      variant: variantProp = \"primary\",\n      disabled: disabledProp,\n      disableTooltip: disableTooltipProp,\n      focusableWhenDisabled: focusableWhenDisabledProp,\n      \"data-button-index\": index,\n      ...restProps\n    } = props;\n\n    const [iconOnly, setIconOnly] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const groupContext = useContext(ToggleButtonGroupContext);\n\n    const handleIconOnlyButton = useCallback(\n      (button: HTMLButtonElement | null) => {\n        setIconOnly(\n          button?.querySelector(\".saltIcon\") != null &&\n            button?.childElementCount === 1\n        );\n      },\n      [setIconOnly]\n    );\n\n    const {\n      register,\n      unregister,\n      disabled = disabledProp,\n      disableTooltip = disableTooltipProp,\n      focusableWhenDisabled = focusableWhenDisabledProp,\n      orientation = \"horizontal\",\n      variant = variantProp,\n    } = groupContext || {};\n\n    useEffect(() => {\n      if (\n        index !== undefined &&\n        register &&\n        unregister &&\n        (!disabled || focusableWhenDisabled)\n      ) {\n        register(buttonRef.current, index);\n\n        return function cleanup() {\n          unregister(index);\n        };\n      }\n    }, [index, disabled, focusableWhenDisabled, register, unregister]);\n\n    const handleToggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      if (!disabled) {\n        onToggle?.(event, !toggled);\n      }\n    };\n\n    const tabIndex = toggled && !disabled ? 0 : -1;\n\n    return (\n      <Tooltip\n        content={tooltipText}\n        disabled={disableTooltip}\n        placement={orientation === \"horizontal\" ? \"bottom\" : \"right\"}\n      >\n        <Button\n          ref={handleIconOnlyButton}\n          aria-checked={toggled}\n          aria-label={ariaLabel}\n          aria-posinset={index !== undefined ? index + 1 : undefined}\n          className={clsx(\n            withBaseName(),\n            withBaseName(orientation),\n            {\n              [withBaseName(\"primary\")]: variant === \"primary\",\n              [withBaseName(\"cta\")]: variant === \"cta\",\n              [withBaseName(\"secondary\")]: variant === \"secondary\",\n              [withBaseName(\"toggled\")]: toggled,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"iconOnly\")]: iconOnly,\n            },\n            className\n          )}\n          onClick={handleToggle}\n          disabled={disabled}\n          focusableWhenDisabled={focusableWhenDisabled}\n          role={groupContext ? \"radio\" : \"checkbox\"}\n          tabIndex={groupContext ? tabIndex : undefined}\n          variant={variant}\n          {...restProps}\n        />\n      </Tooltip>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/toggle-button/ToggleButtonGroup.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, useControlled } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useRef, useState, useCallback, useMemo, Children, cloneElement } from 'react';
 import { ToggleButtonGroupContext } from './internal/ToggleButtonGroupContext.js';
 import './ToggleButtonGroup.css.js';
@@ -109,7 +109,7 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2({
   return /* @__PURE__ */ jsx("div", {
     ...restProps,
     "aria-label": ariaLabel,
-    className: cx(
+    className: clsx(
       withBaseName(),
       withBaseName(orientation),
       {

package/dist-es/packages/lab/src/toggle-button/ToggleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button/ToggleButtonGroup.tsx"],"sourcesContent":["import { ButtonVariant, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport {\n  Children,\n  cloneElement,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Orientation,\n  ToggleButtonGroupContext,\n} from \"./internal/ToggleButtonGroupContext\";\n\nimport \"./ToggleButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport type ToggleButtonGroupChangeEventHandler = (\n  event: SyntheticEvent<HTMLButtonElement>,\n  index: number,\n  toggled: boolean\n) => void;\n\nexport interface ToggleButtonGroupProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  \"aria-label\"?: string;\n  disabled?: boolean;\n  disableTooltip?: boolean;\n  defaultSelectedIndex?: number;\n  focusableWhenDisabled?: boolean;\n  selectedIndex?: number;\n  orientation?: Orientation;\n  variant?: ButtonVariant;\n  width?: number;\n  children: Array<ReactElement>;\n  onChange?: ToggleButtonGroupChangeEventHandler;\n}\n\nconst getNextIndex = (\n  nodes: Array<HTMLButtonElement | undefined>,\n  index: number,\n  increment: number\n) => (index + nodes.length + increment) % nodes.length;\n\nconst getNextActive = (\n  nodes: Array<HTMLButtonElement | undefined>,\n  index: number,\n  increment: number\n) => {\n  let nextIndex = getNextIndex(nodes, index, increment);\n\n  while (nextIndex !== index && !nodes[nextIndex]) {\n    nextIndex = getNextIndex(nodes, nextIndex, increment);\n  }\n\n  return nodes[nextIndex];\n};\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(\n  {\n    \"aria-label\": ariaLabel = \"Toggle options\",\n    children,\n    className,\n    disabled,\n    disableTooltip,\n    defaultSelectedIndex = 0,\n    focusableWhenDisabled,\n    selectedIndex: selectedIndexProp,\n    orientation = \"horizontal\",\n    variant = \"primary\",\n    width,\n    onChange,\n    onFocus,\n    onBlur,\n    ...restProps\n  },\n  ref\n) {\n  const buttonRefs = useRef<Array<HTMLButtonElement | undefined>>([]);\n\n  const [disableFocus, setDisableFocus] = useState(false);\n  const [selectedIndex, setSelectedIndex] = useControlled({\n    controlled: selectedIndexProp,\n    default: defaultSelectedIndex,\n    name: \"ToggleButtonGroup\",\n    state: \"selectedIndex\",\n  });\n\n  const register = useCallback(\n    (node: HTMLButtonElement | null, index: number) => {\n      buttonRefs.current[index] = node || undefined;\n    },\n    []\n  );\n\n  const unregister = useCallback((index: number) => {\n    buttonRefs.current[index] = undefined;\n  }, []);\n\n  // When focus is not on the active button and when you tab out\n  // It should leave the toggle button group\n  // It should not go to active button\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setDisableFocus(true);\n    onFocus?.(event);\n  };\n\n  // When you tab out from toggle button group, it should restore tab index of active button\n  // When you tab back in, focus should go to active button\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setDisableFocus(false);\n    onBlur?.(event);\n  };\n\n  const handleToggle: ToggleButtonGroupChangeEventHandler = (\n    event,\n    index,\n    newValue\n  ) => {\n    if (!newValue) {\n      return;\n    }\n    setSelectedIndex(index);\n    onChange?.(event, index, newValue);\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    index: number\n  ) => {\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n      getNextActive(buttonRefs.current, index, 1)?.focus();\n    }\n\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n      getNextActive(buttonRefs.current, index, -1)?.focus();\n    }\n  };\n\n  const groupContext = useMemo(\n    () => ({\n      disabled,\n      disableFocus,\n      disableTooltip,\n      focusableWhenDisabled,\n      orientation,\n      register,\n      unregister,\n      variant,\n    }),\n    [\n      disabled,\n      disableFocus,\n      disableTooltip,\n      focusableWhenDisabled,\n      orientation,\n      register,\n      unregister,\n      variant,\n    ]\n  );\n\n  const childrenCount = Children.count(children);\n\n  const getToggleButtonItem = (child: ReactElement, index: number) => {\n    return cloneElement(child, {\n      ...child.props,\n      \"data-button-index\": index,\n      \"aria-setsize\": childrenCount + 1,\n      key: `button-${index}`,\n      toggled: selectedIndex === index,\n      onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) =>\n        handleKeyDown(event, index),\n      onToggle: (event: SyntheticEvent<HTMLButtonElement>, newValue: boolean) =>\n        handleToggle(event, index, newValue),\n    });\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-label={ariaLabel}\n      className={cx(\n        withBaseName(),\n        withBaseName(orientation),\n        {\n          [withBaseName(\"cta\")]: variant === \"cta\",\n          [withBaseName(\"secondary\")]: variant === \"secondary\",\n          [withBaseName(\"primary\")]: variant === \"primary\",\n        },\n        className\n      )}\n      ref={ref}\n      role=\"radiogroup\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      // TODO: Make this responsive?\n      style={{ width }}\n    >\n      <ToggleButtonGroupContext.Provider value={groupContext}>\n        {children && children.map(getToggleButtonItem)}\n      </ToggleButtonGroupContext.Provider>\n    </div>\n  );\n});\n"],"names":["ToggleButtonGroup"],"mappings":"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"}
+{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button/ToggleButtonGroup.tsx"],"sourcesContent":["import { ButtonVariant, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  cloneElement,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Orientation,\n  ToggleButtonGroupContext,\n} from \"./internal/ToggleButtonGroupContext\";\n\nimport \"./ToggleButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport type ToggleButtonGroupChangeEventHandler = (\n  event: SyntheticEvent<HTMLButtonElement>,\n  index: number,\n  toggled: boolean\n) => void;\n\nexport interface ToggleButtonGroupProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  \"aria-label\"?: string;\n  disabled?: boolean;\n  disableTooltip?: boolean;\n  defaultSelectedIndex?: number;\n  focusableWhenDisabled?: boolean;\n  selectedIndex?: number;\n  orientation?: Orientation;\n  variant?: ButtonVariant;\n  width?: number;\n  children: Array<ReactElement>;\n  onChange?: ToggleButtonGroupChangeEventHandler;\n}\n\nconst getNextIndex = (\n  nodes: Array<HTMLButtonElement | undefined>,\n  index: number,\n  increment: number\n) => (index + nodes.length + increment) % nodes.length;\n\nconst getNextActive = (\n  nodes: Array<HTMLButtonElement | undefined>,\n  index: number,\n  increment: number\n) => {\n  let nextIndex = getNextIndex(nodes, index, increment);\n\n  while (nextIndex !== index && !nodes[nextIndex]) {\n    nextIndex = getNextIndex(nodes, nextIndex, increment);\n  }\n\n  return nodes[nextIndex];\n};\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(\n  {\n    \"aria-label\": ariaLabel = \"Toggle options\",\n    children,\n    className,\n    disabled,\n    disableTooltip,\n    defaultSelectedIndex = 0,\n    focusableWhenDisabled,\n    selectedIndex: selectedIndexProp,\n    orientation = \"horizontal\",\n    variant = \"primary\",\n    width,\n    onChange,\n    onFocus,\n    onBlur,\n    ...restProps\n  },\n  ref\n) {\n  const buttonRefs = useRef<Array<HTMLButtonElement | undefined>>([]);\n\n  const [disableFocus, setDisableFocus] = useState(false);\n  const [selectedIndex, setSelectedIndex] = useControlled({\n    controlled: selectedIndexProp,\n    default: defaultSelectedIndex,\n    name: \"ToggleButtonGroup\",\n    state: \"selectedIndex\",\n  });\n\n  const register = useCallback(\n    (node: HTMLButtonElement | null, index: number) => {\n      buttonRefs.current[index] = node || undefined;\n    },\n    []\n  );\n\n  const unregister = useCallback((index: number) => {\n    buttonRefs.current[index] = undefined;\n  }, []);\n\n  // When focus is not on the active button and when you tab out\n  // It should leave the toggle button group\n  // It should not go to active button\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setDisableFocus(true);\n    onFocus?.(event);\n  };\n\n  // When you tab out from toggle button group, it should restore tab index of active button\n  // When you tab back in, focus should go to active button\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setDisableFocus(false);\n    onBlur?.(event);\n  };\n\n  const handleToggle: ToggleButtonGroupChangeEventHandler = (\n    event,\n    index,\n    newValue\n  ) => {\n    if (!newValue) {\n      return;\n    }\n    setSelectedIndex(index);\n    onChange?.(event, index, newValue);\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    index: number\n  ) => {\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n      getNextActive(buttonRefs.current, index, 1)?.focus();\n    }\n\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n      getNextActive(buttonRefs.current, index, -1)?.focus();\n    }\n  };\n\n  const groupContext = useMemo(\n    () => ({\n      disabled,\n      disableFocus,\n      disableTooltip,\n      focusableWhenDisabled,\n      orientation,\n      register,\n      unregister,\n      variant,\n    }),\n    [\n      disabled,\n      disableFocus,\n      disableTooltip,\n      focusableWhenDisabled,\n      orientation,\n      register,\n      unregister,\n      variant,\n    ]\n  );\n\n  const childrenCount = Children.count(children);\n\n  const getToggleButtonItem = (child: ReactElement, index: number) => {\n    return cloneElement(child, {\n      ...child.props,\n      \"data-button-index\": index,\n      \"aria-setsize\": childrenCount + 1,\n      key: `button-${index}`,\n      toggled: selectedIndex === index,\n      onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) =>\n        handleKeyDown(event, index),\n      onToggle: (event: SyntheticEvent<HTMLButtonElement>, newValue: boolean) =>\n        handleToggle(event, index, newValue),\n    });\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-label={ariaLabel}\n      className={clsx(\n        withBaseName(),\n        withBaseName(orientation),\n        {\n          [withBaseName(\"cta\")]: variant === \"cta\",\n          [withBaseName(\"secondary\")]: variant === \"secondary\",\n          [withBaseName(\"primary\")]: variant === \"primary\",\n        },\n        className\n      )}\n      ref={ref}\n      role=\"radiogroup\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      // TODO: Make this responsive?\n      style={{ width }}\n    >\n      <ToggleButtonGroupContext.Provider value={groupContext}>\n        {children && children.map(getToggleButtonItem)}\n      </ToggleButtonGroupContext.Provider>\n    </div>\n  );\n});\n"],"names":["ToggleButtonGroup"],"mappings":"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"}

package/dist-es/packages/lab/src/tokenized-input/TokenizedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenizedInput.js","sources":["../src/tokenized-input/TokenizedInput.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { ComponentType, ForwardedRef, forwardRef } from \"react\";\nimport {\n  TokenizedInputBase,\n  TokenizedInputBaseProps,\n} from \"./TokenizedInputBase\";\nimport { useTokenizedInput } from \"./useTokenizedInput\";\nimport { UseTooltipProps } from \"../tooltip\";\n\nimport \"./TokenizedInput.css\";\n\nexport type StringToItem<Item> = (\n  selectedItems: Array<Item>,\n  value: string\n) => Item | null | undefined;\n\nexport type ChangeHandler<Item> = (selectedItems: Item[] | undefined) => void;\n\nexport interface TokenizedInputProps<Item>\n  extends Omit<\n    TokenizedInputBaseProps<Item>,\n    | \"activeIndices\"\n    | \"focused\"\n    | \"highlightedIndex\"\n    | \"helpers\"\n    | \"onRemoveItem\"\n  > {\n  Tooltip?: ComponentType;\n  delimiter?: string | Array<string>;\n  disableAddOnBlur?: boolean;\n  initialSelectedItems?: Array<Item>;\n  onChange?: ChangeHandler<Item>;\n  onCollapse?: () => void;\n  onExpand?: () => void;\n  stringToItem?: StringToItem<Item>;\n  tooltipEnterDelay?: UseTooltipProps[\"enterDelay\"];\n  tooltipLeaveDelay?: UseTooltipProps[\"leaveDelay\"];\n  tooltipPlacement?: UseTooltipProps[\"placement\"];\n}\n\nexport const TokenizedInput = forwardRef(function TokenizedInput<Item>(\n  props: TokenizedInputProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const { inputRef: inputRefProp, ...restProps } = props;\n\n  const { inputRef, helpers, inputProps } = useTokenizedInput(restProps);\n\n  return (\n    <TokenizedInputBase\n      helpers={helpers}\n      inputRef={useForkRef(inputRef, inputRefProp)}\n      ref={ref}\n      {...inputProps}\n    />\n  );\n});\n"],"names":["TokenizedInput"],"mappings":";;;;;;;AAwCO,MAAM,cAAiB,GAAA,UAAA,CAAW,SAASA,eAAAA,CAChD,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,YAAiB,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEjD,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,UAAW,EAAA,GAAI,kBAAkB,SAAS,CAAA,CAAA;AAErE,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IACC,OAAA;AAAA,IACA,QAAA,EAAU,UAAW,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,IAC3C,GAAA;AAAA,IACC,GAAG,UAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"TokenizedInput.js","sources":["../src/tokenized-input/TokenizedInput.tsx"],"sourcesContent":["import { useForkRef, UseTooltipProps } from \"@salt-ds/core\";\nimport { ComponentType, ForwardedRef, forwardRef } from \"react\";\nimport {\n  TokenizedInputBase,\n  TokenizedInputBaseProps,\n} from \"./TokenizedInputBase\";\nimport { useTokenizedInput } from \"./useTokenizedInput\";\n\nimport \"./TokenizedInput.css\";\n\nexport type StringToItem<Item> = (\n  selectedItems: Array<Item>,\n  value: string\n) => Item | null | undefined;\n\nexport type ChangeHandler<Item> = (selectedItems: Item[] | undefined) => void;\n\nexport interface TokenizedInputProps<Item>\n  extends Omit<\n    TokenizedInputBaseProps<Item>,\n    | \"activeIndices\"\n    | \"focused\"\n    | \"highlightedIndex\"\n    | \"helpers\"\n    | \"onRemoveItem\"\n  > {\n  Tooltip?: ComponentType;\n  delimiter?: string | Array<string>;\n  disableAddOnBlur?: boolean;\n  initialSelectedItems?: Array<Item>;\n  onChange?: ChangeHandler<Item>;\n  onCollapse?: () => void;\n  onExpand?: () => void;\n  stringToItem?: StringToItem<Item>;\n  tooltipEnterDelay?: UseTooltipProps[\"enterDelay\"];\n  tooltipLeaveDelay?: UseTooltipProps[\"leaveDelay\"];\n  tooltipPlacement?: UseTooltipProps[\"placement\"];\n}\n\nexport const TokenizedInput = forwardRef(function TokenizedInput<Item>(\n  props: TokenizedInputProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const { inputRef: inputRefProp, ...restProps } = props;\n\n  const { inputRef, helpers, inputProps } = useTokenizedInput(restProps);\n\n  return (\n    <TokenizedInputBase\n      helpers={helpers}\n      inputRef={useForkRef(inputRef, inputRefProp)}\n      ref={ref}\n      {...inputProps}\n    />\n  );\n});\n"],"names":["TokenizedInput"],"mappings":";;;;;;;AAuCO,MAAM,cAAiB,GAAA,UAAA,CAAW,SAASA,eAAAA,CAChD,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,YAAiB,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEjD,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,UAAW,EAAA,GAAI,kBAAkB,SAAS,CAAA,CAAA;AAErE,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IACC,OAAA;AAAA,IACA,QAAA,EAAU,UAAW,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,IAC3C,GAAA;AAAA,IACC,GAAG,UAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/tokenized-input/TokenizedInputBase.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import deepmerge from 'deepmerge';
 import { forwardRef, useRef, useState, useCallback } from 'react';
 import { makePrefixer, useDensity, useId, useIsomorphicLayoutEffect, useForkRef, Button } from '@salt-ds/core';
@@ -179,7 +179,7 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
   } = ExpandButtonProps;
   return /* @__PURE__ */ jsxs("div", {
     ...restProps,
-    className: cx(
+    className: clsx(
       withBaseName(),
       {
         [withBaseName("focused")]: focused,
@@ -217,7 +217,7 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
           }),
           /* @__PURE__ */ jsx(Button, {
             "aria-labelledby": [ariaLabelledBy, inputId, expandButtonId].filter(Boolean).join(" "),
-            className: cx(withBaseName("expandButton"), {
+            className: clsx(withBaseName("expandButton"), {
               [withBaseName("hidden")]: !showExpandButton
             }),
             disabled,
@@ -235,13 +235,9 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
           }),
           /* @__PURE__ */ jsx(Input, {
             ...mergedInputProps,
-            className: cx(
-              withBaseName("input"),
-              withBaseName("inputField"),
-              {
-                [withBaseName("hidden")]: showExpandButton
-              }
-            ),
+            className: clsx(withBaseName("input"), withBaseName("inputField"), {
+              [withBaseName("hidden")]: showExpandButton
+            }),
             disabled,
             id: inputId,
             onBlur: onInputBlur,
@@ -260,7 +256,7 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
         ]
       }),
       /* @__PURE__ */ jsx(Button, {
-        className: cx(withBaseName("clearButton"), {
+        className: clsx(withBaseName("clearButton"), {
           [withBaseName("hidden")]: !expanded || selectedItems.length === 0
         }),
         disabled,

package/dist-es/packages/lab/src/tokenized-input/TokenizedInputBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenizedInputBase.js","sources":["../src/tokenized-input/TokenizedInputBase.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport deepmerge from \"deepmerge\";\nimport {\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  KeyboardEventHandler,\n  ReactElement,\n  ReactEventHandler,\n  Ref,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Button,\n  ButtonProps,\n  makePrefixer,\n  useDensity,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { InputPill } from \"./internal/InputPill\";\nimport { InputRuler } from \"./internal/InputRuler\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { useWidth } from \"./internal/useWidth\";\nimport {\n  TokenizedInputHelpers,\n  TokenizedInputState,\n} from \"./useTokenizedInput\";\nimport { Input, InputProps } from \"../input\";\n\nexport type RemoveItemHandler = (itemIndex: number) => void;\nexport type ItemToString<Item> = (item: Item) => string;\nexport type ExpandButtonProps = Pick<\n  ButtonProps,\n  \"role\" | \"aria-roledescription\" | \"aria-describedby\"\n> & { accessibleText?: string };\n\nexport interface TokenizedInputBaseProps<Item>\n  extends Partial<TokenizedInputState<Item>>,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"onFocus\" | \"onBlur\" | \"onChange\" | \"onKeyUp\" | \"onKeyDown\"\n    > {\n  ExpandButtonProps?: ExpandButtonProps;\n  InputProps?: Pick<InputProps, \"aria-describedby\" | \"inputProps\">;\n  disabled?: boolean;\n  expandButtonRef?: Ref<HTMLButtonElement>;\n  helpers: TokenizedInputHelpers<Item>;\n  inputRef?: Ref<HTMLInputElement>;\n  itemToString?: ItemToString<Item>;\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n  // Can key down on either input or expand button\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onRemoveItem?: RemoveItemHandler;\n  onInputBlur?: FocusEventHandler<HTMLInputElement>;\n  onInputFocus?: FocusEventHandler<HTMLInputElement>;\n  onInputChange?: ChangeEventHandler<HTMLInputElement>;\n  onInputSelect?: ReactEventHandler<HTMLInputElement>;\n  onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  onClear?: ReactEventHandler;\n}\n\nconst INITIAL_INPUT_WIDTH = 5;\nconst withBaseName = makePrefixer(\"saltTokenizedInput\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n  itemCount === 0\n    ? \"no item selected\"\n    : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nconst hasHelpers = (helpers: any) => {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (helpers == null) {\n      console.warn(\n        'TokenizedInputBase is used without helpers. You should pass in \"helpers\" from \"useTokenizedInput\".'\n      );\n    }\n  }\n  return helpers != null;\n};\n\nexport const TokenizedInputBase = forwardRef(function TokenizedInputBase<Item>(\n  props: TokenizedInputBaseProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    InputProps = {},\n    ExpandButtonProps = {},\n    className,\n    activeIndices = [],\n    selectedItems = [],\n    highlightedIndex,\n    value,\n    focused,\n    expanded,\n    disabled,\n    helpers,\n    onFocus,\n    onBlur,\n    onKeyUp,\n    onKeyDown,\n    onRemoveItem,\n    onInputChange,\n    onInputFocus,\n    onInputBlur,\n    onInputSelect,\n    onClear,\n    onClick,\n    inputRef,\n    itemToString = defaultItemToString,\n    id: idProp,\n    expandButtonRef: expandButtonRefProp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const density = useDensity();\n\n  const id = useId(idProp);\n  const inputId = `${id}-input`;\n  const expandButtonId = `${id}-expand-button`;\n  const clearButtonId = `${id}-clear-button`;\n\n  // TODO: Use proper machanism to get variable values from theme in React. Something like below\n  // getComputedStyle(document.documentElement)\n  // .getPropertyValue('--my-variable-name'); // #999999\n  const pillGroupPadding = 16;\n  const lastVisiblePillMargin = 4;\n\n  const pillsRef = useRef<{ [index: number]: number | undefined }>({});\n  const inputRulerRef = useRef<HTMLSpanElement | null>(null);\n  const keydownExpandButton = useRef(false);\n\n  const [expandButtonRef, expandButtonWidth] = useWidth(density);\n  const [clearButtonRef, clearButtonWidth] = useWidth(density);\n  const [inputWidth, setInputWidth] = useState(INITIAL_INPUT_WIDTH);\n  const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);\n  const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);\n\n  const showExpandButton = !expanded && firstHiddenIndex != null;\n\n  const widthOffset =\n    pillGroupPadding +\n    INITIAL_INPUT_WIDTH +\n    (expanded ? clearButtonWidth : expandButtonWidth);\n\n  const containerRef = useResizeObserver<HTMLDivElement>(\n    useCallback(\n      ([{ contentRect }]) => {\n        setPillGroupWidth(contentRect.width - widthOffset);\n      },\n      [widthOffset]\n    )\n  );\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      // When density changes, set hidden index to null so that pills are in their\n      // readonly state before they are measured.\n      setFirstHiddenIndex(null);\n    },\n    [density]\n  );\n\n  // useLayoutEffect because of potential layout change\n  // We want to do that before paint to avoid layout jumps\n  useIsomorphicLayoutEffect(\n    () => {\n      if (expanded) {\n        setFirstHiddenIndex(null);\n      } else if (pillGroupWidth != null) {\n        setFirstHiddenIndex(\n          calcFirstHiddenIndex({\n            containerWidth: pillGroupWidth,\n            pillWidths: Object.values(pillsRef.current).filter(\n              Boolean\n            ) as number[],\n          })\n        );\n      }\n    },\n    // Additional dependency on selectedItems is for the controlled version\n    [expanded, pillGroupWidth, selectedItems]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (expanded && inputRulerRef.current) {\n      const newInputWidth = inputRulerRef.current.scrollWidth;\n      setInputWidth(Math.min(newInputWidth, pillGroupWidth || 0));\n    }\n  }, [expanded, pillGroupWidth, value]);\n\n  const handleExpandButtonKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>\n  ) => {\n    const singleChar = event.key.length === 1;\n    const triggerExpand =\n      [\n        \"CONTROL\",\n        \"META\",\n        \"ENTER\",\n        \"BACKSPACE\",\n        \"ARROWDOWN\",\n        \"ARROWLEFT\",\n        \"ARROWRIGHT\",\n      ].indexOf(event.key.toUpperCase()) !== -1;\n\n    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      helpers.updateExpanded(true);\n      keydownExpandButton.current = true;\n    }\n  };\n\n  const handleInputKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n    // Call keydown again if the initail event has been used to expand the input\n    if (keydownExpandButton.current && \"Enter\" !== event.key) {\n      keydownExpandButton.current = false;\n\n      if (onKeyDown) {\n        onKeyDown(event);\n      }\n    }\n\n    if (onKeyUp) {\n      onKeyUp(event);\n    }\n  };\n\n  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.updateExpanded(true);\n    }\n  };\n\n  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.setFocused(false);\n      helpers.cancelBlur();\n    }\n  };\n\n  const selectedItemIds = selectedItems.map(\n    (_, index) => `${id}-pill-${index}`\n  );\n\n  const inputAriaLabelledBy = disabled\n    ? [ariaLabelledBy, inputId, ...selectedItemIds]\n    : [ariaLabelledBy, inputId];\n\n  const mergedInputProps = deepmerge(\n    {\n      inputProps: {\n        style: {\n          width: inputWidth,\n          minWidth: inputWidth,\n        },\n        \"aria-label\": [ariaLabel, getItemsAriaLabel(selectedItems.length)]\n          .filter(Boolean)\n          .join(\" \"),\n        \"aria-labelledby\": inputAriaLabelledBy.filter(Boolean).join(\" \"),\n        \"aria-activedescendant\":\n          highlightedIndex && highlightedIndex >= 0\n            ? `${id}-pill-${highlightedIndex}`\n            : undefined,\n      },\n    },\n    InputProps\n  );\n\n  const {\n    accessibleText: expandButtonAccessibleText,\n    ...restExpandButtonProps\n  } = ExpandButtonProps;\n\n  return (\n    <div\n      {...restProps}\n      className={classnames(\n        withBaseName(),\n        {\n          [withBaseName(\"focused\")]: focused,\n          [withBaseName(\"expanded\")]: expanded,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      id={id}\n      onClick={onClick}\n      ref={useForkRef(ref, containerRef)}\n    >\n      <span\n        aria-owns={selectedItemIds.join(\" \")}\n        className={withBaseName(\"hidden\")}\n        role=\"listbox\"\n      />\n      <div className={withBaseName(\"pillGroup\")}>\n        {selectedItems.map((item, index) => {\n          const label = itemToString(item);\n\n          return (\n            <InputPill\n              active={activeIndices.indexOf(index) !== -1}\n              disabled={disabled}\n              hidden={showExpandButton && index >= firstHiddenIndex}\n              highlighted={index === highlightedIndex}\n              id={`${id}-pill-${index}`}\n              index={index}\n              key={`${index}-${label}`}\n              label={label}\n              lastVisible={\n                !showExpandButton && index === selectedItems.length - 1\n              }\n              onDelete={expanded ? onRemoveItem : undefined}\n              pillsRef={pillsRef}\n            />\n          );\n        })}\n        <Button\n          aria-labelledby={[ariaLabelledBy, inputId, expandButtonId]\n            .filter(Boolean)\n            .join(\" \")}\n          className={classnames(withBaseName(\"expandButton\"), {\n            [withBaseName(\"hidden\")]: !showExpandButton,\n          })}\n          disabled={disabled}\n          id={expandButtonId}\n          onBlur={onBlur}\n          onClick={handleExpand}\n          onFocus={onFocus}\n          onKeyDown={handleExpandButtonKeyDown}\n          ref={useForkRef(expandButtonRef, expandButtonRefProp)}\n          variant=\"secondary\"\n          {...restExpandButtonProps}\n        >\n          <OverflowMenuIcon\n            aria-label={\n              expandButtonAccessibleText === undefined\n                ? \"expand edit\"\n                : expandButtonAccessibleText\n            }\n          />\n        </Button>\n        <Input\n          {...mergedInputProps}\n          className={classnames(\n            withBaseName(\"input\"),\n            withBaseName(\"inputField\"),\n            {\n              [withBaseName(\"hidden\")]: showExpandButton,\n            }\n          )}\n          disabled={disabled}\n          id={inputId}\n          // TODO: Use multi line input when available\n          // multiline\n          onBlur={onInputBlur}\n          onChange={onInputChange}\n          onFocus={onInputFocus}\n          onKeyDown={onKeyDown}\n          onKeyUp={handleInputKeyUp}\n          onSelect={onInputSelect}\n          renderSuffix={() => <InputRuler ref={inputRulerRef} value={value} />}\n          value={value}\n          ref={inputRef}\n        />\n      </div>\n      <Button\n        className={classnames(withBaseName(\"clearButton\"), {\n          [withBaseName(\"hidden\")]: !expanded || selectedItems.length === 0,\n        })}\n        disabled={disabled}\n        id={clearButtonId}\n        onBlur={onBlur}\n        onClick={onClear}\n        onFocus={handleClearButtonFocus}\n        ref={clearButtonRef}\n        variant=\"secondary\"\n        data-testid=\"clear-button\"\n      >\n        <CloseIcon aria-label=\"clear input\" />\n      </Button>\n    </div>\n  );\n}) as <Item>(\n  p: TokenizedInputBaseProps<Item> & { ref?: ForwardedRef<HTMLDivElement> }\n) => ReactElement<TokenizedInputBaseProps<Item>>;\n"],"names":["TokenizedInputBase","InputProps","classnames"],"mappings":"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"}
+{"version":3,"file":"TokenizedInputBase.js","sources":["../src/tokenized-input/TokenizedInputBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport deepmerge from \"deepmerge\";\nimport {\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  KeyboardEventHandler,\n  ReactElement,\n  ReactEventHandler,\n  Ref,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Button,\n  ButtonProps,\n  makePrefixer,\n  useDensity,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { InputPill } from \"./internal/InputPill\";\nimport { InputRuler } from \"./internal/InputRuler\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { useWidth } from \"./internal/useWidth\";\nimport {\n  TokenizedInputHelpers,\n  TokenizedInputState,\n} from \"./useTokenizedInput\";\nimport { Input, InputProps } from \"../input\";\n\nexport type RemoveItemHandler = (itemIndex: number) => void;\nexport type ItemToString<Item> = (item: Item) => string;\nexport type ExpandButtonProps = Pick<\n  ButtonProps,\n  \"role\" | \"aria-roledescription\" | \"aria-describedby\"\n> & { accessibleText?: string };\n\nexport interface TokenizedInputBaseProps<Item>\n  extends Partial<TokenizedInputState<Item>>,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"onFocus\" | \"onBlur\" | \"onChange\" | \"onKeyUp\" | \"onKeyDown\"\n    > {\n  ExpandButtonProps?: ExpandButtonProps;\n  InputProps?: Pick<InputProps, \"aria-describedby\" | \"inputProps\">;\n  disabled?: boolean;\n  expandButtonRef?: Ref<HTMLButtonElement>;\n  helpers: TokenizedInputHelpers<Item>;\n  inputRef?: Ref<HTMLInputElement>;\n  itemToString?: ItemToString<Item>;\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n  // Can key down on either input or expand button\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onRemoveItem?: RemoveItemHandler;\n  onInputBlur?: FocusEventHandler<HTMLInputElement>;\n  onInputFocus?: FocusEventHandler<HTMLInputElement>;\n  onInputChange?: ChangeEventHandler<HTMLInputElement>;\n  onInputSelect?: ReactEventHandler<HTMLInputElement>;\n  onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  onClear?: ReactEventHandler;\n}\n\nconst INITIAL_INPUT_WIDTH = 5;\nconst withBaseName = makePrefixer(\"saltTokenizedInput\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n  itemCount === 0\n    ? \"no item selected\"\n    : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nconst hasHelpers = (helpers: any) => {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (helpers == null) {\n      console.warn(\n        'TokenizedInputBase is used without helpers. You should pass in \"helpers\" from \"useTokenizedInput\".'\n      );\n    }\n  }\n  return helpers != null;\n};\n\nexport const TokenizedInputBase = forwardRef(function TokenizedInputBase<Item>(\n  props: TokenizedInputBaseProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    InputProps = {},\n    ExpandButtonProps = {},\n    className,\n    activeIndices = [],\n    selectedItems = [],\n    highlightedIndex,\n    value,\n    focused,\n    expanded,\n    disabled,\n    helpers,\n    onFocus,\n    onBlur,\n    onKeyUp,\n    onKeyDown,\n    onRemoveItem,\n    onInputChange,\n    onInputFocus,\n    onInputBlur,\n    onInputSelect,\n    onClear,\n    onClick,\n    inputRef,\n    itemToString = defaultItemToString,\n    id: idProp,\n    expandButtonRef: expandButtonRefProp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const density = useDensity();\n\n  const id = useId(idProp);\n  const inputId = `${id}-input`;\n  const expandButtonId = `${id}-expand-button`;\n  const clearButtonId = `${id}-clear-button`;\n\n  // TODO: Use proper machanism to get variable values from theme in React. Something like below\n  // getComputedStyle(document.documentElement)\n  // .getPropertyValue('--my-variable-name'); // #999999\n  const pillGroupPadding = 16;\n  const lastVisiblePillMargin = 4;\n\n  const pillsRef = useRef<{ [index: number]: number | undefined }>({});\n  const inputRulerRef = useRef<HTMLSpanElement | null>(null);\n  const keydownExpandButton = useRef(false);\n\n  const [expandButtonRef, expandButtonWidth] = useWidth(density);\n  const [clearButtonRef, clearButtonWidth] = useWidth(density);\n  const [inputWidth, setInputWidth] = useState(INITIAL_INPUT_WIDTH);\n  const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);\n  const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);\n\n  const showExpandButton = !expanded && firstHiddenIndex != null;\n\n  const widthOffset =\n    pillGroupPadding +\n    INITIAL_INPUT_WIDTH +\n    (expanded ? clearButtonWidth : expandButtonWidth);\n\n  const containerRef = useResizeObserver<HTMLDivElement>(\n    useCallback(\n      ([{ contentRect }]) => {\n        setPillGroupWidth(contentRect.width - widthOffset);\n      },\n      [widthOffset]\n    )\n  );\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      // When density changes, set hidden index to null so that pills are in their\n      // readonly state before they are measured.\n      setFirstHiddenIndex(null);\n    },\n    [density]\n  );\n\n  // useLayoutEffect because of potential layout change\n  // We want to do that before paint to avoid layout jumps\n  useIsomorphicLayoutEffect(\n    () => {\n      if (expanded) {\n        setFirstHiddenIndex(null);\n      } else if (pillGroupWidth != null) {\n        setFirstHiddenIndex(\n          calcFirstHiddenIndex({\n            containerWidth: pillGroupWidth,\n            pillWidths: Object.values(pillsRef.current).filter(\n              Boolean\n            ) as number[],\n          })\n        );\n      }\n    },\n    // Additional dependency on selectedItems is for the controlled version\n    [expanded, pillGroupWidth, selectedItems]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (expanded && inputRulerRef.current) {\n      const newInputWidth = inputRulerRef.current.scrollWidth;\n      setInputWidth(Math.min(newInputWidth, pillGroupWidth || 0));\n    }\n  }, [expanded, pillGroupWidth, value]);\n\n  const handleExpandButtonKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>\n  ) => {\n    const singleChar = event.key.length === 1;\n    const triggerExpand =\n      [\n        \"CONTROL\",\n        \"META\",\n        \"ENTER\",\n        \"BACKSPACE\",\n        \"ARROWDOWN\",\n        \"ARROWLEFT\",\n        \"ARROWRIGHT\",\n      ].indexOf(event.key.toUpperCase()) !== -1;\n\n    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      helpers.updateExpanded(true);\n      keydownExpandButton.current = true;\n    }\n  };\n\n  const handleInputKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n    // Call keydown again if the initail event has been used to expand the input\n    if (keydownExpandButton.current && \"Enter\" !== event.key) {\n      keydownExpandButton.current = false;\n\n      if (onKeyDown) {\n        onKeyDown(event);\n      }\n    }\n\n    if (onKeyUp) {\n      onKeyUp(event);\n    }\n  };\n\n  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.updateExpanded(true);\n    }\n  };\n\n  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.setFocused(false);\n      helpers.cancelBlur();\n    }\n  };\n\n  const selectedItemIds = selectedItems.map(\n    (_, index) => `${id}-pill-${index}`\n  );\n\n  const inputAriaLabelledBy = disabled\n    ? [ariaLabelledBy, inputId, ...selectedItemIds]\n    : [ariaLabelledBy, inputId];\n\n  const mergedInputProps = deepmerge(\n    {\n      inputProps: {\n        style: {\n          width: inputWidth,\n          minWidth: inputWidth,\n        },\n        \"aria-label\": [ariaLabel, getItemsAriaLabel(selectedItems.length)]\n          .filter(Boolean)\n          .join(\" \"),\n        \"aria-labelledby\": inputAriaLabelledBy.filter(Boolean).join(\" \"),\n        \"aria-activedescendant\":\n          highlightedIndex && highlightedIndex >= 0\n            ? `${id}-pill-${highlightedIndex}`\n            : undefined,\n      },\n    },\n    InputProps\n  );\n\n  const {\n    accessibleText: expandButtonAccessibleText,\n    ...restExpandButtonProps\n  } = ExpandButtonProps;\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focused\")]: focused,\n          [withBaseName(\"expanded\")]: expanded,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      id={id}\n      onClick={onClick}\n      ref={useForkRef(ref, containerRef)}\n    >\n      <span\n        aria-owns={selectedItemIds.join(\" \")}\n        className={withBaseName(\"hidden\")}\n        role=\"listbox\"\n      />\n      <div className={withBaseName(\"pillGroup\")}>\n        {selectedItems.map((item, index) => {\n          const label = itemToString(item);\n\n          return (\n            <InputPill\n              active={activeIndices.indexOf(index) !== -1}\n              disabled={disabled}\n              hidden={showExpandButton && index >= firstHiddenIndex}\n              highlighted={index === highlightedIndex}\n              id={`${id}-pill-${index}`}\n              index={index}\n              key={`${index}-${label}`}\n              label={label}\n              lastVisible={\n                !showExpandButton && index === selectedItems.length - 1\n              }\n              onDelete={expanded ? onRemoveItem : undefined}\n              pillsRef={pillsRef}\n            />\n          );\n        })}\n        <Button\n          aria-labelledby={[ariaLabelledBy, inputId, expandButtonId]\n            .filter(Boolean)\n            .join(\" \")}\n          className={clsx(withBaseName(\"expandButton\"), {\n            [withBaseName(\"hidden\")]: !showExpandButton,\n          })}\n          disabled={disabled}\n          id={expandButtonId}\n          onBlur={onBlur}\n          onClick={handleExpand}\n          onFocus={onFocus}\n          onKeyDown={handleExpandButtonKeyDown}\n          ref={useForkRef(expandButtonRef, expandButtonRefProp)}\n          variant=\"secondary\"\n          {...restExpandButtonProps}\n        >\n          <OverflowMenuIcon\n            aria-label={\n              expandButtonAccessibleText === undefined\n                ? \"expand edit\"\n                : expandButtonAccessibleText\n            }\n          />\n        </Button>\n        <Input\n          {...mergedInputProps}\n          className={clsx(withBaseName(\"input\"), withBaseName(\"inputField\"), {\n            [withBaseName(\"hidden\")]: showExpandButton,\n          })}\n          disabled={disabled}\n          id={inputId}\n          // TODO: Use multi line input when available\n          // multiline\n          onBlur={onInputBlur}\n          onChange={onInputChange}\n          onFocus={onInputFocus}\n          onKeyDown={onKeyDown}\n          onKeyUp={handleInputKeyUp}\n          onSelect={onInputSelect}\n          renderSuffix={() => <InputRuler ref={inputRulerRef} value={value} />}\n          value={value}\n          ref={inputRef}\n        />\n      </div>\n      <Button\n        className={clsx(withBaseName(\"clearButton\"), {\n          [withBaseName(\"hidden\")]: !expanded || selectedItems.length === 0,\n        })}\n        disabled={disabled}\n        id={clearButtonId}\n        onBlur={onBlur}\n        onClick={onClear}\n        onFocus={handleClearButtonFocus}\n        ref={clearButtonRef}\n        variant=\"secondary\"\n        data-testid=\"clear-button\"\n      >\n        <CloseIcon aria-label=\"clear input\" />\n      </Button>\n    </div>\n  );\n}) as <Item>(\n  p: TokenizedInputBaseProps<Item> & { ref?: ForwardedRef<HTMLDivElement> }\n) => ReactElement<TokenizedInputBaseProps<Item>>;\n"],"names":["TokenizedInputBase","InputProps"],"mappings":"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"}

package/dist-es/packages/lab/src/tokenized-input/internal/InputPill.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { memo, useRef } from 'react';
 import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
 import { getWidth } from './useWidth.js';
@@ -39,7 +39,7 @@ const InputPill = memo(function InputPill2(props) {
     onDelete == null ? void 0 : onDelete(index);
   };
   return /* @__PURE__ */ jsx(Pill, {
-    className: cx(
+    className: clsx(
       withBaseName(),
       {
         [withBaseName("pillActive")]: active || highlighted,

package/dist-es/packages/lab/src/tokenized-input/internal/InputPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { memo, MutableRefObject, useRef } from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { getWidth } from \"./useWidth\";\nimport { Pill, PillProps } from \"../../pill\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = Omit<\n  PillProps<\"basic\" | \"closable\">,\n  \"variant\" | \"onDelete\" | \"clickable\"\n> & {\n  /**\n   * An ref object holds pills index map to width.\n   */\n  pillsRef: MutableRefObject<{ [index: number]: number | undefined }>;\n  /**\n   * Index of the pill within Input.\n   */\n  index: number;\n  /**\n   * Whether the pill is the last visible one within Input.\n   */\n  lastVisible?: boolean;\n  /**\n   * Whether the pill is highlighted.\n   */\n  highlighted?: boolean;\n  /**\n   * Whether the pill is active.\n   */\n  active?: boolean;\n  /**\n   * Callback when pill is deleted.\n   */\n  onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n  const {\n    active,\n    className,\n    disabled,\n    hidden,\n    highlighted,\n    index,\n    lastVisible,\n    onDelete,\n    pillsRef,\n    tabIndex: tabIndexProp,\n    ...restProps\n  } = props;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n  const isRemovable = Boolean(onDelete);\n\n  // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n  // We need to collect widths before the calculation\n  useIsomorphicLayoutEffect(() => {\n    if (!isRemovable && pillsRef.current) {\n      pillsRef.current[index] = getWidth(ref.current);\n    }\n  }, [pillsRef, index, isRemovable, lastVisible]);\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      pillsRef.current[index] = undefined;\n    },\n    [pillsRef, index]\n  );\n\n  const handleDelete = () => {\n    onDelete?.(index);\n  };\n\n  return (\n    <Pill\n      className={classnames(\n        withBaseName(),\n        {\n          [withBaseName(\"pillActive\")]: active || highlighted,\n          [withBaseName(\"pillLastVisible\")]: lastVisible,\n          [withBaseName(\"hidden\")]: hidden,\n        },\n        className\n      )}\n      disabled={disabled}\n      onDelete={isRemovable ? handleDelete : undefined}\n      ref={ref}\n      role=\"option\"\n      //  style={useMemo(() => ({ maxWidth }), [maxWidth])}\n      tabIndex={undefined}\n      variant={isRemovable ? \"closable\" : \"basic\"}\n      {...restProps}\n    />\n  );\n});\n"],"names":["InputPill","classnames"],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAgC1C,MAAM,SAAY,GAAA,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACP,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAA8B,IAAI,CAAA,CAAA;AAC9C,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA,CAAA;AAIpC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAAS,QAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AAAA,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAAC,EAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAU,IAAA,WAAA;AAAA,QACxC,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,QACnC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,QAAA,EAAU,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACvC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEL,QAAU,EAAA,KAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,UAAa,GAAA,OAAA;AAAA,IACnC,GAAG,SAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { memo, MutableRefObject, useRef } from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { getWidth } from \"./useWidth\";\nimport { Pill, PillProps } from \"../../pill\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = Omit<\n  PillProps<\"basic\" | \"closable\">,\n  \"variant\" | \"onDelete\" | \"clickable\"\n> & {\n  /**\n   * An ref object holds pills index map to width.\n   */\n  pillsRef: MutableRefObject<{ [index: number]: number | undefined }>;\n  /**\n   * Index of the pill within Input.\n   */\n  index: number;\n  /**\n   * Whether the pill is the last visible one within Input.\n   */\n  lastVisible?: boolean;\n  /**\n   * Whether the pill is highlighted.\n   */\n  highlighted?: boolean;\n  /**\n   * Whether the pill is active.\n   */\n  active?: boolean;\n  /**\n   * Callback when pill is deleted.\n   */\n  onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n  const {\n    active,\n    className,\n    disabled,\n    hidden,\n    highlighted,\n    index,\n    lastVisible,\n    onDelete,\n    pillsRef,\n    tabIndex: tabIndexProp,\n    ...restProps\n  } = props;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n  const isRemovable = Boolean(onDelete);\n\n  // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n  // We need to collect widths before the calculation\n  useIsomorphicLayoutEffect(() => {\n    if (!isRemovable && pillsRef.current) {\n      pillsRef.current[index] = getWidth(ref.current);\n    }\n  }, [pillsRef, index, isRemovable, lastVisible]);\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      pillsRef.current[index] = undefined;\n    },\n    [pillsRef, index]\n  );\n\n  const handleDelete = () => {\n    onDelete?.(index);\n  };\n\n  return (\n    <Pill\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"pillActive\")]: active || highlighted,\n          [withBaseName(\"pillLastVisible\")]: lastVisible,\n          [withBaseName(\"hidden\")]: hidden,\n        },\n        className\n      )}\n      disabled={disabled}\n      onDelete={isRemovable ? handleDelete : undefined}\n      ref={ref}\n      role=\"option\"\n      //  style={useMemo(() => ({ maxWidth }), [maxWidth])}\n      tabIndex={undefined}\n      variant={isRemovable ? \"closable\" : \"basic\"}\n      {...restProps}\n    />\n  );\n});\n"],"names":["InputPill"],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAgC1C,MAAM,SAAY,GAAA,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACP,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAA8B,IAAI,CAAA,CAAA;AAC9C,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA,CAAA;AAIpC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAAS,QAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AAAA,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAU,IAAA,WAAA;AAAA,QACxC,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,QACnC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,QAAA,EAAU,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACvC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEL,QAAU,EAAA,KAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,UAAa,GAAA,OAAA;AAAA,IACnC,GAAG,SAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/tokenized-input/useTokenizedInput.js

@@ -3,6 +3,7 @@ import copy from 'clipboard-copy';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { escapeRegExp } from '../utils/escapeRegExp.js';
 import { useEventCallback } from '../utils/useEventCallback.js';
+import '../utils/useFloatingUI.js';
 import { defaultItemToString } from './internal/defaultItemToString.js';
 import { getCursorPosition } from './internal/getCursorPosition.js';
 import '../form-field-context/FormFieldContext.js';