@vuu-ui/vuu-ui-controls 0.9.2 → 0.10.0

package/cjs/tabstrip/Tabstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    containerStyle,\n    focusVisible,\n    draggedItemIndex,\n    onClickAddTab,\n    interactedTabState,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n          } = child.props;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            editing: interactedTabState?.index === index,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          ),\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      interactedTabState,\n      focusVisible,\n      location,\n    ],\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tabstripCss","useRef","useTabstrip","useId","useMemo","asReactElements","className","createElement","IconButton","jsxs","Fragment","jsx","OverflowContainer"],"mappings":"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"}
+{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    containerStyle,\n    focusVisible,\n    draggedItemIndex,\n    onClickAddTab,\n    interactedTabState,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n          } = child.props;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            editing: interactedTabState?.index === index,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          ),\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      interactedTabState,\n      focusVisible,\n      location,\n    ],\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tabstripCss","useRef","useTabstrip","useId","useMemo","asReactElements","className","createElement","IconButton","jsxs","Fragment","jsx","OverflowContainer"],"mappings":"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"}

package/cjs/tabstrip/tabstrip-dom-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabstrip-dom-utils.js","sources":["../../src/tabstrip/tabstrip-dom-utils.ts"],"sourcesContent":["import { getElementDataIndex } from \"@vuu-ui/vuu-utils\";\n\nconst getIndexOfItem = (container: HTMLElement | null, query: string) => {\n  if (container) {\n    const targetTab = container.querySelector(\n      `[data-index]:has(${query})`,\n    ) as HTMLElement;\n    return getElementDataIndex(targetTab);\n  }\n  return -1;\n};\n\nexport const getIndexOfSelectedTab = (container: HTMLElement | null) =>\n  getIndexOfItem(container, '[aria-selected=\"true\"]');\n\nexport const getIndexOfEditedItem = (container: HTMLElement | null) =>\n  getIndexOfItem(container, \".vuuEditableLabel-editing\");\n"],"names":["getElementDataIndex"],"mappings":";;;;AAEA,MAAM,cAAA,GAAiB,CAAC,SAAA,EAA+B,KAAkB,KAAA;AACvE,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,MAAM,YAAY,SAAU,CAAA,aAAA;AAAA,MAC1B,oBAAoB,KAAK,CAAA,CAAA,CAAA;AAAA,KAC3B,CAAA;AACA,IAAA,OAAOA,6BAAoB,SAAS,CAAA,CAAA;AAAA,GACtC;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,CAAA,CAAA;AAEO,MAAM,qBAAwB,GAAA,CAAC,SACpC,KAAA,cAAA,CAAe,WAAW,wBAAwB,EAAA;AAE7C,MAAM,oBAAuB,GAAA,CAAC,SACnC,KAAA,cAAA,CAAe,WAAW,2BAA2B;;;;;"}
+{"version":3,"file":"tabstrip-dom-utils.js","sources":["../../src/tabstrip/tabstrip-dom-utils.ts"],"sourcesContent":["import { getElementDataIndex } from \"@vuu-ui/vuu-utils\";\n\nconst getIndexOfItem = (container: HTMLElement | null, query: string) => {\n  if (container) {\n    const targetTab = container.querySelector(\n      `[data-index]:has(${query})`,\n    ) as HTMLElement;\n    return getElementDataIndex(targetTab);\n  }\n  return -1;\n};\n\nexport const getIndexOfSelectedTab = (container: HTMLElement | null) =>\n  getIndexOfItem(container, '[aria-selected=\"true\"]');\n\nexport const getIndexOfEditedItem = (container: HTMLElement | null) =>\n  getIndexOfItem(container, \".vuuEditableLabel-editing\");\n"],"names":["getElementDataIndex"],"mappings":";;;;AAEA,MAAM,cAAA,GAAiB,CAAC,SAAA,EAA+B,KAAkB,KAAA;AACvE,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,MAAM,YAAY,SAAU,CAAA,aAAA;AAAA,MAC1B,oBAAoB,KAAK,CAAA,CAAA;AAAA,KAC3B;AACA,IAAA,OAAOA,6BAAoB,SAAS,CAAA;AAAA;AAEtC,EAAO,OAAA,CAAA,CAAA;AACT,CAAA;AAEO,MAAM,qBAAwB,GAAA,CAAC,SACpC,KAAA,cAAA,CAAe,WAAW,wBAAwB;AAE7C,MAAM,oBAAuB,GAAA,CAAC,SACnC,KAAA,cAAA,CAAe,WAAW,2BAA2B;;;;;"}

package/cjs/tabstrip/useAnimatedSelectionThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedSelectionThumb.js","sources":["../../src/tabstrip/useAnimatedSelectionThumb.ts"],"sourcesContent":["import { isValidNumber, MEASURES, orientationType } from \"@vuu-ui/vuu-utils\";\nimport { CSSProperties, RefObject, useCallback, useMemo, useRef } from \"react\";\n\nexport const useAnimatedSelectionThumb = (\n  containerRef: RefObject<HTMLElement>,\n  activeTabIndex: number,\n  orientation: orientationType = \"horizontal\",\n) => {\n  const animationSuspendedRef = useRef(false);\n  const suspendAnimation = useCallback(() => {\n    animationSuspendedRef.current = true;\n  }, []);\n\n  const resumeAnimation = useCallback(() => {\n    animationSuspendedRef.current = false;\n  }, []);\n\n  const onTransitionEnd = useCallback(() => {\n    containerRef.current?.style.setProperty(\"--tab-thumb-transition\", \"none\");\n    containerRef.current?.removeEventListener(\"transitionend\", onTransitionEnd);\n  }, [containerRef]);\n  const lastSelectedRef = useRef(-1);\n  return useMemo(() => {\n    let offset = 0;\n    let size = 0;\n    if (lastSelectedRef.current !== -1) {\n      const oldSelected =\n        containerRef.current?.querySelector(\".vuuTab-selected\");\n      const newSelected = containerRef.current?.querySelector(\n        `[data-index=\"${activeTabIndex}\"] .vuuTab`,\n      );\n      const { positionProp, sizeProp } = MEASURES[orientation];\n      if (oldSelected && newSelected && !animationSuspendedRef.current) {\n        const { [positionProp]: oldPosition, [sizeProp]: oldSize } =\n          oldSelected.getBoundingClientRect();\n        const { [positionProp]: newPosition } =\n          newSelected.getBoundingClientRect();\n        if (\n          isValidNumber(oldPosition) &&\n          isValidNumber(newPosition) &&\n          isValidNumber(oldSize)\n        ) {\n          offset = oldPosition - newPosition;\n          size = oldSize;\n          const speed = orientation === \"horizontal\" ? 1100 : 700;\n          const duration = Math.abs(offset / speed);\n          requestAnimationFrame(() => {\n            containerRef.current?.style.setProperty(\n              \"--tab-thumb-offset\",\n              \"0px\",\n            );\n            containerRef.current?.style.setProperty(\"--tab-thumb-size\", \"100%\");\n            containerRef.current?.style.setProperty(\n              \"--tab-thumb-transition\",\n              `all ${duration}s ease`,\n            );\n            containerRef.current?.addEventListener(\n              \"transitionend\",\n              onTransitionEnd,\n            );\n          });\n        }\n      }\n    }\n    lastSelectedRef.current = activeTabIndex;\n    if (animationSuspendedRef.current) {\n      return {\n        containerStyle: {\n          \"--tab-thumb-offset\": \"0px\",\n          \"--tab-thumb-size\": \"100%\",\n        } as CSSProperties,\n        resumeAnimation,\n        suspendAnimation,\n      };\n    } else {\n      return {\n        containerStyle: {\n          \"--tab-thumb-offset\": `${offset}px`,\n          \"--tab-thumb-size\": size ? `${size}px` : undefined,\n        } as CSSProperties,\n        resumeAnimation,\n        suspendAnimation,\n      };\n    }\n  }, [\n    activeTabIndex,\n    containerRef,\n    orientation,\n    onTransitionEnd,\n    resumeAnimation,\n    suspendAnimation,\n  ]);\n};\n"],"names":["useRef","useCallback","useMemo","MEASURES","isValidNumber"],"mappings":"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"}
+{"version":3,"file":"useAnimatedSelectionThumb.js","sources":["../../src/tabstrip/useAnimatedSelectionThumb.ts"],"sourcesContent":["import { isValidNumber, MEASURES, orientationType } from \"@vuu-ui/vuu-utils\";\nimport { CSSProperties, RefObject, useCallback, useMemo, useRef } from \"react\";\n\nexport const useAnimatedSelectionThumb = (\n  containerRef: RefObject<HTMLElement>,\n  activeTabIndex: number,\n  orientation: orientationType = \"horizontal\",\n) => {\n  const animationSuspendedRef = useRef(false);\n  const suspendAnimation = useCallback(() => {\n    animationSuspendedRef.current = true;\n  }, []);\n\n  const resumeAnimation = useCallback(() => {\n    animationSuspendedRef.current = false;\n  }, []);\n\n  const onTransitionEnd = useCallback(() => {\n    containerRef.current?.style.setProperty(\"--tab-thumb-transition\", \"none\");\n    containerRef.current?.removeEventListener(\"transitionend\", onTransitionEnd);\n  }, [containerRef]);\n  const lastSelectedRef = useRef(-1);\n  return useMemo(() => {\n    let offset = 0;\n    let size = 0;\n    if (lastSelectedRef.current !== -1) {\n      const oldSelected =\n        containerRef.current?.querySelector(\".vuuTab-selected\");\n      const newSelected = containerRef.current?.querySelector(\n        `[data-index=\"${activeTabIndex}\"] .vuuTab`,\n      );\n      const { positionProp, sizeProp } = MEASURES[orientation];\n      if (oldSelected && newSelected && !animationSuspendedRef.current) {\n        const { [positionProp]: oldPosition, [sizeProp]: oldSize } =\n          oldSelected.getBoundingClientRect();\n        const { [positionProp]: newPosition } =\n          newSelected.getBoundingClientRect();\n        if (\n          isValidNumber(oldPosition) &&\n          isValidNumber(newPosition) &&\n          isValidNumber(oldSize)\n        ) {\n          offset = oldPosition - newPosition;\n          size = oldSize;\n          const speed = orientation === \"horizontal\" ? 1100 : 700;\n          const duration = Math.abs(offset / speed);\n          requestAnimationFrame(() => {\n            containerRef.current?.style.setProperty(\n              \"--tab-thumb-offset\",\n              \"0px\",\n            );\n            containerRef.current?.style.setProperty(\"--tab-thumb-size\", \"100%\");\n            containerRef.current?.style.setProperty(\n              \"--tab-thumb-transition\",\n              `all ${duration}s ease`,\n            );\n            containerRef.current?.addEventListener(\n              \"transitionend\",\n              onTransitionEnd,\n            );\n          });\n        }\n      }\n    }\n    lastSelectedRef.current = activeTabIndex;\n    if (animationSuspendedRef.current) {\n      return {\n        containerStyle: {\n          \"--tab-thumb-offset\": \"0px\",\n          \"--tab-thumb-size\": \"100%\",\n        } as CSSProperties,\n        resumeAnimation,\n        suspendAnimation,\n      };\n    } else {\n      return {\n        containerStyle: {\n          \"--tab-thumb-offset\": `${offset}px`,\n          \"--tab-thumb-size\": size ? `${size}px` : undefined,\n        } as CSSProperties,\n        resumeAnimation,\n        suspendAnimation,\n      };\n    }\n  }, [\n    activeTabIndex,\n    containerRef,\n    orientation,\n    onTransitionEnd,\n    resumeAnimation,\n    suspendAnimation,\n  ]);\n};\n"],"names":["useRef","useCallback","useMemo","MEASURES","isValidNumber"],"mappings":"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"}

package/cjs/tabstrip/useKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.js","sources":["../../src/tabstrip/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  dispatchMouseEvent,\n  getElementByDataIndex,\n  getFocusableElement,\n  orientationType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEvent,\n  FocusEventHandler,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowLeft,\n  ArrowRight,\n  Home,\n  End,\n} from \"@vuu-ui/vuu-utils\";\nimport { getIndexOfEditedItem } from \"./tabstrip-dom-utils\";\n\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\nconst isMenuActivationKey = (key: string) => key === ArrowDown;\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 isEditing = (element: HTMLElement | null | undefined) =>\n  element != null && element.classList.contains(\"vuuTab-editing\");\n\nconst isNonWrappedElement = (element: HTMLElement | null | undefined) =>\n  element != null && !element.classList.contains(\"wrapped\");\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n  containerRef: RefObject<HTMLElement>;\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  orientation: orientationType;\n  selectedIndex: number | null;\n}\n\ninterface TabstripNavigationHookResult {\n  containerProps: ContainerNavigationProps;\n  highlightedIdx: number;\n  focusTab: (\n    tabIndex: number,\n    immediateFocus?: boolean,\n    withKeyboard?: boolean,\n    delay?: number,\n  ) => void;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  onClick: (evt: ReactMouseEvent, tabIndex: number) => void;\n  onFocus: (evt: FocusEvent<HTMLElement>) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n  setHighlightedIdx: (highlightedIndex: number) => void;\n}\n\nexport const useKeyboardNavigation = ({\n  containerRef,\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\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    (\n      tabIndex: number,\n      immediateFocus = false,\n      withKeyboard?: boolean,\n      delay = 70,\n    ) => {\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        if (tabIndex !== -1) {\n          const element = getElementByDataIndex(containerRef.current, tabIndex);\n          if (element) {\n            const focusableElement = getFocusableElement(element);\n            if (!isEditing(focusableElement)) {\n              focusableElement?.focus();\n            }\n          }\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, delay);\n      }\n    },\n    [containerRef, 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        const index = getIndexOfEditedItem(containerRef.current);\n        if (index !== -1) {\n          requestAnimationFrame(() => {\n            setHighlightedIdx(index);\n          });\n        } else {\n          setTimeout(() => {\n            // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n            if (focusedRef.current === -1 && selectedTabIndex !== null) {\n              setHighlightedIdx(selectedTabIndex);\n            }\n          }, 200);\n        }\n      }\n    }\n  };\n\n  const getIndexCount = useCallback(\n    () => containerRef.current?.querySelectorAll(`[data-index]`).length ?? 0,\n    [containerRef],\n  );\n\n  const nextFocusableItemIdx = useCallback(\n    (direction: directionType = \"fwd\", idx?: number) => {\n      const indexCount = getIndexCount();\n      const index = typeof idx === \"number\" ? idx : indexCount;\n\n      let nextIdx = nextItemIdx(indexCount, direction, index);\n      const nextDirection =\n        direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n      while (\n        ((nextDirection === \"fwd\" && nextIdx < indexCount) ||\n          (nextDirection === \"bwd\" && nextIdx > 0)) &&\n        !isNonWrappedElement(\n          getElementByDataIndex(containerRef.current, nextIdx),\n        )\n      ) {\n        const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);\n        if (newIdx === nextIdx) {\n          break;\n        } else {\n          nextIdx = newIdx;\n        }\n      }\n      return nextIdx;\n    },\n    [containerRef, getIndexCount],\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 highlightedTabHasMenu = useCallback(() => {\n    const el = getElementByDataIndex(containerRef.current, highlightedIdx);\n    if (el) {\n      return el.querySelector(\".vuuPopupMenu\") != null;\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const activateTabMenu = useCallback(() => {\n    const el = getElementByDataIndex(containerRef.current, highlightedIdx);\n    const menuEl = el?.querySelector(\".vuuPopupMenu\") as HTMLElement;\n    if (menuEl) {\n      dispatchMouseEvent(menuEl, \"click\");\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (getIndexCount() > 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      } else if (isMenuActivationKey(e.key) && highlightedTabHasMenu()) {\n        activateTabMenu();\n      }\n    },\n    [\n      activateTabMenu,\n      getIndexCount,\n      highlightedTabHasMenu,\n      navigateChildItems,\n      orientation,\n    ],\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 = (_: ReactMouseEvent, tabIndex: number) => {\n    setHighlightedIdx(tabIndex);\n  };\n\n  const handleFocus = useCallback(() => {\n    if (!hasFocus) {\n      setHasFocus(true);\n      if (!mouseClickPending.current) {\n        keyboardNavigation.current = true;\n      } else {\n        mouseClickPending.current = false;\n      }\n    }\n  }, [hasFocus]);\n\n  const handleContainerMouseDown = useCallback(() => {\n    if (!hasFocus) {\n      mouseClickPending.current = true;\n    }\n    keyboardNavigation.current = false;\n  }, [hasFocus]);\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".vuuTabstrip\");\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  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    setHighlightedIdx,\n  };\n};\n"],"names":["Home","End","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","useRef","useState","useControlled","useCallback","getElementByDataIndex","getFocusableElement","getIndexOfEditedItem","dispatchMouseEvent"],"mappings":"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"}
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../src/tabstrip/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  dispatchMouseEvent,\n  getElementByDataIndex,\n  getFocusableElement,\n  orientationType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEvent,\n  FocusEventHandler,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowLeft,\n  ArrowRight,\n  Home,\n  End,\n} from \"@vuu-ui/vuu-utils\";\nimport { getIndexOfEditedItem } from \"./tabstrip-dom-utils\";\n\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\nconst isMenuActivationKey = (key: string) => key === ArrowDown;\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 isEditing = (element: HTMLElement | null | undefined) =>\n  element != null && element.classList.contains(\"vuuTab-editing\");\n\nconst isNonWrappedElement = (element: HTMLElement | null | undefined) =>\n  element != null && !element.classList.contains(\"wrapped\");\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n  containerRef: RefObject<HTMLElement>;\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  orientation: orientationType;\n  selectedIndex: number | null;\n}\n\ninterface TabstripNavigationHookResult {\n  containerProps: ContainerNavigationProps;\n  highlightedIdx: number;\n  focusTab: (\n    tabIndex: number,\n    immediateFocus?: boolean,\n    withKeyboard?: boolean,\n    delay?: number,\n  ) => void;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  onClick: (evt: ReactMouseEvent, tabIndex: number) => void;\n  onFocus: (evt: FocusEvent<HTMLElement>) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n  setHighlightedIdx: (highlightedIndex: number) => void;\n}\n\nexport const useKeyboardNavigation = ({\n  containerRef,\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\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    (\n      tabIndex: number,\n      immediateFocus = false,\n      withKeyboard?: boolean,\n      delay = 70,\n    ) => {\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        if (tabIndex !== -1) {\n          const element = getElementByDataIndex(containerRef.current, tabIndex);\n          if (element) {\n            const focusableElement = getFocusableElement(element);\n            if (!isEditing(focusableElement)) {\n              focusableElement?.focus();\n            }\n          }\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, delay);\n      }\n    },\n    [containerRef, 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        const index = getIndexOfEditedItem(containerRef.current);\n        if (index !== -1) {\n          requestAnimationFrame(() => {\n            setHighlightedIdx(index);\n          });\n        } else {\n          setTimeout(() => {\n            // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n            if (focusedRef.current === -1 && selectedTabIndex !== null) {\n              setHighlightedIdx(selectedTabIndex);\n            }\n          }, 200);\n        }\n      }\n    }\n  };\n\n  const getIndexCount = useCallback(\n    () => containerRef.current?.querySelectorAll(`[data-index]`).length ?? 0,\n    [containerRef],\n  );\n\n  const nextFocusableItemIdx = useCallback(\n    (direction: directionType = \"fwd\", idx?: number) => {\n      const indexCount = getIndexCount();\n      const index = typeof idx === \"number\" ? idx : indexCount;\n\n      let nextIdx = nextItemIdx(indexCount, direction, index);\n      const nextDirection =\n        direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n      while (\n        ((nextDirection === \"fwd\" && nextIdx < indexCount) ||\n          (nextDirection === \"bwd\" && nextIdx > 0)) &&\n        !isNonWrappedElement(\n          getElementByDataIndex(containerRef.current, nextIdx),\n        )\n      ) {\n        const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);\n        if (newIdx === nextIdx) {\n          break;\n        } else {\n          nextIdx = newIdx;\n        }\n      }\n      return nextIdx;\n    },\n    [containerRef, getIndexCount],\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 highlightedTabHasMenu = useCallback(() => {\n    const el = getElementByDataIndex(containerRef.current, highlightedIdx);\n    if (el) {\n      return el.querySelector(\".vuuPopupMenu\") != null;\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const activateTabMenu = useCallback(() => {\n    const el = getElementByDataIndex(containerRef.current, highlightedIdx);\n    const menuEl = el?.querySelector(\".vuuPopupMenu\") as HTMLElement;\n    if (menuEl) {\n      dispatchMouseEvent(menuEl, \"click\");\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (getIndexCount() > 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      } else if (isMenuActivationKey(e.key) && highlightedTabHasMenu()) {\n        activateTabMenu();\n      }\n    },\n    [\n      activateTabMenu,\n      getIndexCount,\n      highlightedTabHasMenu,\n      navigateChildItems,\n      orientation,\n    ],\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 = (_: ReactMouseEvent, tabIndex: number) => {\n    setHighlightedIdx(tabIndex);\n  };\n\n  const handleFocus = useCallback(() => {\n    if (!hasFocus) {\n      setHasFocus(true);\n      if (!mouseClickPending.current) {\n        keyboardNavigation.current = true;\n      } else {\n        mouseClickPending.current = false;\n      }\n    }\n  }, [hasFocus]);\n\n  const handleContainerMouseDown = useCallback(() => {\n    if (!hasFocus) {\n      mouseClickPending.current = true;\n    }\n    keyboardNavigation.current = false;\n  }, [hasFocus]);\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".vuuTabstrip\");\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  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    setHighlightedIdx,\n  };\n};\n"],"names":["Home","End","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","useRef","useState","useControlled","useCallback","getElementByDataIndex","getFocusableElement","getIndexOfEditedItem","dispatchMouseEvent"],"mappings":"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"}

package/cjs/tabstrip/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelection.js","sources":["../../src/tabstrip/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { KeyboardEvent, MouseEvent, useCallback } from \"react\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nconst isTabElement = (el: HTMLElement): boolean =>\n  el && el.matches('[class*=\"vuuTab \"]');\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n}: {\n  defaultSelected?: number;\n  highlightedIdx: number;\n  onSelectionChange?: (tabIndex: number) => void;\n  selected?: number;\n}): {\n  activateTab: (tabIndex: number) => void;\n  isControlled: boolean;\n  onClick: (evt: MouseEvent<Element>, tabIndex: number) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n  selected: number;\n} => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? 0,\n    name: \"Tabstrip\",\n    state: \"value\",\n  });\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    []\n  );\n\n  const selectItem = useCallback(\n    (tabIndex: number) => {\n      setSelected(tabIndex);\n      onSelectionChange?.(tabIndex);\n    },\n    [onSelectionChange, setSelected]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const targetElement = e.target as HTMLElement;\n      if (\n        isSelectionEvent(e) &&\n        highlightedIdx !== selected &&\n        isTabElement(targetElement)\n      ) {\n        e.stopPropagation();\n        e.preventDefault();\n        selectItem(highlightedIdx);\n      }\n    },\n    [isSelectionEvent, highlightedIdx, selected, selectItem]\n  );\n\n  const onClick = useCallback(\n    (e: MouseEvent, tabIndex: number) => {\n      if (tabIndex !== selected) {\n        selectItem(tabIndex);\n      }\n    },\n    [selectItem, selected]\n  );\n\n  return {\n    activateTab: selectItem,\n    isControlled,\n    onClick,\n    onKeyDown: handleKeyDown,\n    selected,\n  };\n};\n"],"names":["useControlled","useCallback"],"mappings":";;;;;AAGA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA,CAAA;AAE1C,MAAM,eAAe,CAAC,EAAA,KACpB,EAAM,IAAA,EAAA,CAAG,QAAQ,oBAAoB,CAAA,CAAA;AAGhC,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAU,EAAA,YAAA;AACZ,CAWK,KAAA;AACH,EAAA,MAAM,CAAC,QAAA,EAAU,WAAa,EAAA,YAAY,IAAIA,kBAAc,CAAA;AAAA,IAC1D,UAAY,EAAA,YAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,CAAA;AAAA,IAC5B,IAAM,EAAA,UAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,oBAAqB,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IAC7D,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,QAAqB,KAAA;AACpB,MAAA,WAAA,CAAY,QAAQ,CAAA,CAAA;AACpB,MAAA,iBAAA,GAAoB,QAAQ,CAAA,CAAA;AAAA,KAC9B;AAAA,IACA,CAAC,mBAAmB,WAAW,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,CAAqB,KAAA;AACpB,MAAA,MAAM,gBAAgB,CAAE,CAAA,MAAA,CAAA;AACxB,MAAA,IACE,iBAAiB,CAAC,CAAA,IAClB,mBAAmB,QACnB,IAAA,YAAA,CAAa,aAAa,CAC1B,EAAA;AACA,QAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,QAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AAAA,OAC3B;AAAA,KACF;AAAA,IACA,CAAC,gBAAA,EAAkB,cAAgB,EAAA,QAAA,EAAU,UAAU,CAAA;AAAA,GACzD,CAAA;AAEA,EAAA,MAAM,OAAU,GAAAA,iBAAA;AAAA,IACd,CAAC,GAAe,QAAqB,KAAA;AACnC,MAAA,IAAI,aAAa,QAAU,EAAA;AACzB,QAAA,UAAA,CAAW,QAAQ,CAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,IACA,CAAC,YAAY,QAAQ,CAAA;AAAA,GACvB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,WAAa,EAAA,UAAA;AAAA,IACb,YAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useSelection.js","sources":["../../src/tabstrip/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { KeyboardEvent, MouseEvent, useCallback } from \"react\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nconst isTabElement = (el: HTMLElement): boolean =>\n  el && el.matches('[class*=\"vuuTab \"]');\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n}: {\n  defaultSelected?: number;\n  highlightedIdx: number;\n  onSelectionChange?: (tabIndex: number) => void;\n  selected?: number;\n}): {\n  activateTab: (tabIndex: number) => void;\n  isControlled: boolean;\n  onClick: (evt: MouseEvent<Element>, tabIndex: number) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n  selected: number;\n} => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? 0,\n    name: \"Tabstrip\",\n    state: \"value\",\n  });\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    []\n  );\n\n  const selectItem = useCallback(\n    (tabIndex: number) => {\n      setSelected(tabIndex);\n      onSelectionChange?.(tabIndex);\n    },\n    [onSelectionChange, setSelected]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const targetElement = e.target as HTMLElement;\n      if (\n        isSelectionEvent(e) &&\n        highlightedIdx !== selected &&\n        isTabElement(targetElement)\n      ) {\n        e.stopPropagation();\n        e.preventDefault();\n        selectItem(highlightedIdx);\n      }\n    },\n    [isSelectionEvent, highlightedIdx, selected, selectItem]\n  );\n\n  const onClick = useCallback(\n    (e: MouseEvent, tabIndex: number) => {\n      if (tabIndex !== selected) {\n        selectItem(tabIndex);\n      }\n    },\n    [selectItem, selected]\n  );\n\n  return {\n    activateTab: selectItem,\n    isControlled,\n    onClick,\n    onKeyDown: handleKeyDown,\n    selected,\n  };\n};\n"],"names":["useControlled","useCallback"],"mappings":";;;;;AAGA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA;AAE1C,MAAM,eAAe,CAAC,EAAA,KACpB,EAAM,IAAA,EAAA,CAAG,QAAQ,oBAAoB,CAAA;AAGhC,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAU,EAAA;AACZ,CAWK,KAAA;AACH,EAAA,MAAM,CAAC,QAAA,EAAU,WAAa,EAAA,YAAY,IAAIA,kBAAc,CAAA;AAAA,IAC1D,UAAY,EAAA,YAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,CAAA;AAAA,IAC5B,IAAM,EAAA,UAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,oBAAqB,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IAC7D;AAAC,GACH;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,QAAqB,KAAA;AACpB,MAAA,WAAA,CAAY,QAAQ,CAAA;AACpB,MAAA,iBAAA,GAAoB,QAAQ,CAAA;AAAA,KAC9B;AAAA,IACA,CAAC,mBAAmB,WAAW;AAAA,GACjC;AAEA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,CAAqB,KAAA;AACpB,MAAA,MAAM,gBAAgB,CAAE,CAAA,MAAA;AACxB,MAAA,IACE,iBAAiB,CAAC,CAAA,IAClB,mBAAmB,QACnB,IAAA,YAAA,CAAa,aAAa,CAC1B,EAAA;AACA,QAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,QAAA,CAAA,CAAE,cAAe,EAAA;AACjB,QAAA,UAAA,CAAW,cAAc,CAAA;AAAA;AAC3B,KACF;AAAA,IACA,CAAC,gBAAA,EAAkB,cAAgB,EAAA,QAAA,EAAU,UAAU;AAAA,GACzD;AAEA,EAAA,MAAM,OAAU,GAAAA,iBAAA;AAAA,IACd,CAAC,GAAe,QAAqB,KAAA;AACnC,MAAA,IAAI,aAAa,QAAU,EAAA;AACzB,QAAA,UAAA,CAAW,QAAQ,CAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,GACvB;AAEA,EAAO,OAAA;AAAA,IACL,WAAa,EAAA,UAAA;AAAA,IACb,YAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX;AAAA,GACF;AACF;;;;"}

package/cjs/tabstrip/useTabstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTabstrip.js","sources":["../../src/tabstrip/useTabstrip.ts"],"sourcesContent":["import type { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport type { OverflowItem } from \"@vuu-ui/vuu-ui-controls\";\nimport { orientationType } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { DropOptions, useDragDrop as useDragDrop } from \"../drag-drop\";\nimport { isTabMenuOptions } from \"./TabMenuOptions\";\nimport { getIndexOfSelectedTab } from \"./tabstrip-dom-utils\";\nimport { useAnimatedSelectionThumb } from \"./useAnimatedSelectionThumb\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nexport type ExitEditModeHandler = (\n  originalValue: string,\n  editedValue: string,\n  allowDeactivation: boolean,\n  tabIndex: number,\n) => void;\n\nexport interface TabstripHookProps {\n  activeTabIndex: number;\n  allowDragDrop: boolean;\n  animateSelectionThumb: boolean;\n  containerRef: RefObject<HTMLElement>;\n  onActiveChange?: (tabIndex: number) => void;\n  onAddTab?: () => void;\n  onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;\n  onExitEditMode?: ExitEditModeHandler;\n  onMoveTab?: (fromIndex: number, toIndex: number) => void;\n  orientation: orientationType;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n}\n\nconst editKeys = new Set([\"Enter\", \" \"]);\nconst isEditKey = (key: string) => editKeys.has(key);\n\ntype InteractedTabState = {\n  index: number;\n  state: \"rename\";\n};\n\nexport const useTabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowDragDrop,\n  animateSelectionThumb,\n  containerRef,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation,\n  keyBoardActivation,\n}: TabstripHookProps) => {\n  const lastSelection = useRef(activeTabIndexProp);\n  const [interactedTabState, setInteractedTabState] = useState<\n    InteractedTabState | undefined\n  >();\n\n  const {\n    focusTab: keyboardHookFocusTab,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    keyBoardActivation,\n    orientation,\n    selectedIndex: lastSelection.current,\n  });\n\n  const {\n    activateTab: selectionHookActivateTab,\n    onClick: selectionHookHandleClick,\n    onKeyDown: selectionHookHandleKeyDown,\n    selected: selectionHookSelected,\n  } = useSelection({\n    highlightedIdx,\n    onSelectionChange: onActiveChange,\n    selected: activeTabIndexProp,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const { containerStyle, resumeAnimation, suspendAnimation } =\n    useAnimatedSelectionThumb(\n      containerRef,\n      animateSelectionThumb ? selectionHookSelected : -1,\n      orientation,\n    );\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      const { current: selected } = lastSelection;\n      console.log(\n        `useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`,\n      );\n      onMoveTab?.(fromIndex, toIndex);\n      let nextSelectedTab = -1;\n      if (toIndex !== -1) {\n        if (selected === fromIndex) {\n          nextSelectedTab = toIndex;\n        } else if (fromIndex > selected && toIndex <= selected) {\n          nextSelectedTab = selected + 1;\n        } else if (fromIndex < selected && toIndex >= selected) {\n          nextSelectedTab = selected - 1;\n        }\n        if (nextSelectedTab !== -1) {\n          suspendAnimation();\n          selectionHookActivateTab(nextSelectedTab);\n          requestAnimationFrame(resumeAnimation);\n        }\n        keyboardHookFocusTab(toIndex, false, false, 350);\n      }\n    },\n    [\n      keyboardHookFocusTab,\n      onMoveTab,\n      resumeAnimation,\n      selectionHookActivateTab,\n      suspendAnimation,\n    ],\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `tabstrip-${orientation}`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, editedValue, allowDeactivation, tabIndex) => {\n      setInteractedTabState(undefined);\n      onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);\n      if (!allowDeactivation) {\n        // this indicates that Enter or Esc key has been pressed, hence we\n        // want to make sure keyboardHook treats this as a keyboard event\n        // (and applies focusVisible). The last parameter here does that.\n        keyboardHookFocusTab(tabIndex, false, true);\n      }\n    },\n    [keyboardHookFocusTab, onExitEditMode],\n  );\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>, tabIndex: number) => {\n      // releasing the mouse at end of drag will trigger a click, ignore those\n      // if (!dragDropHook.isDragging) {\n      keyboardHookHandleClick(evt, tabIndex);\n      selectionHookHandleClick(evt, tabIndex);\n      // }\n    },\n    // [dragDropHook.isDragging, keyboardHook, selectionHook]\n    [keyboardHookHandleClick, selectionHookHandleClick],\n  );\n\n  const editTab = useCallback(\n    (tabIndex = highlightedIdx) => {\n      console.log(`set interacted tab state ${tabIndex}`);\n      setInteractedTabState({ index: tabIndex, state: \"rename\" });\n    },\n    [highlightedIdx],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHookHandleKeyDown(evt);\n      }\n      if (!evt.defaultPrevented && isEditKey(evt.key)) {\n        editTab();\n      }\n    },\n    [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown],\n  );\n\n  const handleCloseTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      const newActiveTabIndex =\n        selectedTabIndex > tabIndex\n          ? selectedTabIndex - 1\n          : selectedTabIndex === tabIndex\n            ? 0\n            : selectedTabIndex;\n      suspendAnimation();\n      // containerRef.current?.classList.add(\"vuuTabThumb-noTransition\");\n      onCloseTab?.(tabIndex, newActiveTabIndex);\n      setTimeout(() => {\n        resumeAnimation();\n        // containerRef.current?.classList.remove(\"vuuTabThumb-noTransition\");\n      }, 200);\n      return true;\n    },\n    [containerRef, onCloseTab, resumeAnimation, suspendAnimation],\n  );\n\n  const handleRenameTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      editTab(tabIndex);\n      return true;\n    },\n    [editTab],\n  );\n\n  const handleTabMenuAction = useCallback<MenuActionHandler>(\n    (action) => {\n      if (isTabMenuOptions(action.options)) {\n        switch (action.menuId) {\n          case \"close-tab\":\n            return handleCloseTabFromMenu(action.options.tabIndex);\n          case \"rename-tab\":\n            return handleRenameTabFromMenu(action.options.tabIndex);\n          default:\n            console.log(`tab menu action ${action.menuId}`);\n        }\n      }\n      return false;\n    },\n    [handleCloseTabFromMenu, handleRenameTabFromMenu],\n  );\n\n  //TODO( why do we sometimes see this fired twice  eg following rename)\n  const handleTabMenuClose = useCallback(() => {\n    if (interactedTabState?.index === highlightedIdx) {\n      keyboardHookSetHighlightedIndex(highlightedIdx);\n    } else {\n      keyboardHookFocusTab(highlightedIdx);\n    }\n  }, [\n    highlightedIdx,\n    interactedTabState?.index,\n    keyboardHookFocusTab,\n    keyboardHookSetHighlightedIndex,\n  ]);\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        selectionHookActivateTab(index);\n      }\n    },\n    [selectionHookActivateTab],\n  );\n\n  const navigationProps = {\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  const handleAddTabClick = useCallback(() => {\n    onAddTab?.();\n    requestAnimationFrame(() => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      if (selectedTabIndex !== -1) {\n        keyboardHookFocusTab(selectedTabIndex);\n      }\n    });\n  }, [containerRef, keyboardHookFocusTab, onAddTab]);\n\n  const tabProps = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onExitEditMode: handleExitEditMode,\n    onMenuAction: handleTabMenuAction,\n    onMenuClose: handleTabMenuClose,\n    onMouseDown: dragDropHookHandleMouseDown,\n  };\n\n  return {\n    activeTabIndex: selectionHookSelected,\n    containerProps: {\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    containerStyle,\n    focusVisible: keyboardHook.focusVisible,\n    interactedTabState,\n    navigationProps,\n    onClickAddTab: handleAddTabClick,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":["useRef","useState","useKeyboardNavigation","useSelection","useAnimatedSelectionThumb","useCallback","useDragDrop","getIndexOfSelectedTab","isTabMenuOptions"],"mappings":"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"}
+{"version":3,"file":"useTabstrip.js","sources":["../../src/tabstrip/useTabstrip.ts"],"sourcesContent":["import type { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport type { OverflowItem } from \"@vuu-ui/vuu-ui-controls\";\nimport { orientationType } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { DropOptions, useDragDrop as useDragDrop } from \"../drag-drop\";\nimport { isTabMenuOptions } from \"./TabMenuOptions\";\nimport { getIndexOfSelectedTab } from \"./tabstrip-dom-utils\";\nimport { useAnimatedSelectionThumb } from \"./useAnimatedSelectionThumb\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nexport type ExitEditModeHandler = (\n  originalValue: string,\n  editedValue: string,\n  allowDeactivation: boolean,\n  tabIndex: number,\n) => void;\n\nexport interface TabstripHookProps {\n  activeTabIndex: number;\n  allowDragDrop: boolean;\n  animateSelectionThumb: boolean;\n  containerRef: RefObject<HTMLElement>;\n  onActiveChange?: (tabIndex: number) => void;\n  onAddTab?: () => void;\n  onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;\n  onExitEditMode?: ExitEditModeHandler;\n  onMoveTab?: (fromIndex: number, toIndex: number) => void;\n  orientation: orientationType;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n}\n\nconst editKeys = new Set([\"Enter\", \" \"]);\nconst isEditKey = (key: string) => editKeys.has(key);\n\ntype InteractedTabState = {\n  index: number;\n  state: \"rename\";\n};\n\nexport const useTabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowDragDrop,\n  animateSelectionThumb,\n  containerRef,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation,\n  keyBoardActivation,\n}: TabstripHookProps) => {\n  const lastSelection = useRef(activeTabIndexProp);\n  const [interactedTabState, setInteractedTabState] = useState<\n    InteractedTabState | undefined\n  >();\n\n  const {\n    focusTab: keyboardHookFocusTab,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    keyBoardActivation,\n    orientation,\n    selectedIndex: lastSelection.current,\n  });\n\n  const {\n    activateTab: selectionHookActivateTab,\n    onClick: selectionHookHandleClick,\n    onKeyDown: selectionHookHandleKeyDown,\n    selected: selectionHookSelected,\n  } = useSelection({\n    highlightedIdx,\n    onSelectionChange: onActiveChange,\n    selected: activeTabIndexProp,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const { containerStyle, resumeAnimation, suspendAnimation } =\n    useAnimatedSelectionThumb(\n      containerRef,\n      animateSelectionThumb ? selectionHookSelected : -1,\n      orientation,\n    );\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      const { current: selected } = lastSelection;\n      console.log(\n        `useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`,\n      );\n      onMoveTab?.(fromIndex, toIndex);\n      let nextSelectedTab = -1;\n      if (toIndex !== -1) {\n        if (selected === fromIndex) {\n          nextSelectedTab = toIndex;\n        } else if (fromIndex > selected && toIndex <= selected) {\n          nextSelectedTab = selected + 1;\n        } else if (fromIndex < selected && toIndex >= selected) {\n          nextSelectedTab = selected - 1;\n        }\n        if (nextSelectedTab !== -1) {\n          suspendAnimation();\n          selectionHookActivateTab(nextSelectedTab);\n          requestAnimationFrame(resumeAnimation);\n        }\n        keyboardHookFocusTab(toIndex, false, false, 350);\n      }\n    },\n    [\n      keyboardHookFocusTab,\n      onMoveTab,\n      resumeAnimation,\n      selectionHookActivateTab,\n      suspendAnimation,\n    ],\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `tabstrip-${orientation}`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, editedValue, allowDeactivation, tabIndex) => {\n      setInteractedTabState(undefined);\n      onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);\n      if (!allowDeactivation) {\n        // this indicates that Enter or Esc key has been pressed, hence we\n        // want to make sure keyboardHook treats this as a keyboard event\n        // (and applies focusVisible). The last parameter here does that.\n        keyboardHookFocusTab(tabIndex, false, true);\n      }\n    },\n    [keyboardHookFocusTab, onExitEditMode],\n  );\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>, tabIndex: number) => {\n      // releasing the mouse at end of drag will trigger a click, ignore those\n      // if (!dragDropHook.isDragging) {\n      keyboardHookHandleClick(evt, tabIndex);\n      selectionHookHandleClick(evt, tabIndex);\n      // }\n    },\n    // [dragDropHook.isDragging, keyboardHook, selectionHook]\n    [keyboardHookHandleClick, selectionHookHandleClick],\n  );\n\n  const editTab = useCallback(\n    (tabIndex = highlightedIdx) => {\n      console.log(`set interacted tab state ${tabIndex}`);\n      setInteractedTabState({ index: tabIndex, state: \"rename\" });\n    },\n    [highlightedIdx],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHookHandleKeyDown(evt);\n      }\n      if (!evt.defaultPrevented && isEditKey(evt.key)) {\n        editTab();\n      }\n    },\n    [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown],\n  );\n\n  const handleCloseTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      const newActiveTabIndex =\n        selectedTabIndex > tabIndex\n          ? selectedTabIndex - 1\n          : selectedTabIndex === tabIndex\n            ? 0\n            : selectedTabIndex;\n      suspendAnimation();\n      // containerRef.current?.classList.add(\"vuuTabThumb-noTransition\");\n      onCloseTab?.(tabIndex, newActiveTabIndex);\n      setTimeout(() => {\n        resumeAnimation();\n        // containerRef.current?.classList.remove(\"vuuTabThumb-noTransition\");\n      }, 200);\n      return true;\n    },\n    [containerRef, onCloseTab, resumeAnimation, suspendAnimation],\n  );\n\n  const handleRenameTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      editTab(tabIndex);\n      return true;\n    },\n    [editTab],\n  );\n\n  const handleTabMenuAction = useCallback<MenuActionHandler>(\n    (action) => {\n      if (isTabMenuOptions(action.options)) {\n        switch (action.menuId) {\n          case \"close-tab\":\n            return handleCloseTabFromMenu(action.options.tabIndex);\n          case \"rename-tab\":\n            return handleRenameTabFromMenu(action.options.tabIndex);\n          default:\n            console.log(`tab menu action ${action.menuId}`);\n        }\n      }\n      return false;\n    },\n    [handleCloseTabFromMenu, handleRenameTabFromMenu],\n  );\n\n  //TODO( why do we sometimes see this fired twice  eg following rename)\n  const handleTabMenuClose = useCallback(() => {\n    if (interactedTabState?.index === highlightedIdx) {\n      keyboardHookSetHighlightedIndex(highlightedIdx);\n    } else {\n      keyboardHookFocusTab(highlightedIdx);\n    }\n  }, [\n    highlightedIdx,\n    interactedTabState?.index,\n    keyboardHookFocusTab,\n    keyboardHookSetHighlightedIndex,\n  ]);\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        selectionHookActivateTab(index);\n      }\n    },\n    [selectionHookActivateTab],\n  );\n\n  const navigationProps = {\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  const handleAddTabClick = useCallback(() => {\n    onAddTab?.();\n    requestAnimationFrame(() => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      if (selectedTabIndex !== -1) {\n        keyboardHookFocusTab(selectedTabIndex);\n      }\n    });\n  }, [containerRef, keyboardHookFocusTab, onAddTab]);\n\n  const tabProps = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onExitEditMode: handleExitEditMode,\n    onMenuAction: handleTabMenuAction,\n    onMenuClose: handleTabMenuClose,\n    onMouseDown: dragDropHookHandleMouseDown,\n  };\n\n  return {\n    activeTabIndex: selectionHookSelected,\n    containerProps: {\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    containerStyle,\n    focusVisible: keyboardHook.focusVisible,\n    interactedTabState,\n    navigationProps,\n    onClickAddTab: handleAddTabClick,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":["useRef","useState","useKeyboardNavigation","useSelection","useAnimatedSelectionThumb","useCallback","useDragDrop","getIndexOfSelectedTab","isTabMenuOptions"],"mappings":"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"}

package/cjs/toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { useMemo, useRef } from \"react\";\nimport {\n  OverflowContainer,\n  OverflowContainerProps,\n} from \"../overflow-container\";\nimport { useToolbar } from \"./useToolbar\";\nimport { forwardCallbackProps } from \"../utils\";\n\nimport toolbarCss from \"./Toolbar.css\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n} from \"../common-hooks\";\n\nconst classBase = \"vuuToolbar\";\n\nexport type ActiveItemChangeHandler = (itemIndex: number[]) => void;\n\nexport type NavigationOutOfBoundsHandler = (direction: \"start\" | \"end\") => void;\nexport interface ToolbarProps extends OverflowContainerProps {\n  activeItemIndex?: number[];\n  alignItems?: \"start\" | \"center\" | \"end\";\n  defaultActiveItemIndex?: number[];\n  onActiveChange?: ActiveItemChangeHandler;\n  /**\n   * Indicates that user has used Arrow key navigation to move beyond the\n   * last or before the first item. A higher level component may want to\n   * use this to implement a seamless navigation across components.\n   */\n  onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;\n  selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;\n  showSeparators?: boolean;\n}\n\nexport const Toolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  alignItems = \"start\",\n  defaultActiveItemIndex,\n  children,\n  className,\n  id: idProp,\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation = \"horizontal\",\n  selectionStrategy = \"none\",\n  showSeparators = false,\n  ...props\n}: ToolbarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toolbar\",\n    css: toolbarCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeItemIndex,\n    focusableIdx,\n    focusVisible,\n    itemProps,\n    ...toolbarHook\n  } = useToolbar({\n    activeItemIndex: activeItemIndexProp,\n    defaultActiveItemIndex,\n    containerRef: rootRef,\n    onActiveChange,\n    onNavigateOutOfBounds,\n    orientation,\n    selectionStrategy,\n  });\n\n  const id = useId(idProp);\n\n  const items = useMemo(\n    () =>\n      asReactElements(children).map((child, index) => {\n        const {\n          id: itemId = `${id}-tab-${index}`,\n          className: itemClassName,\n          ...ownProps\n        } = child.props;\n        const selected = activeItemIndex.includes(index);\n        return React.cloneElement(child, {\n          ...forwardCallbackProps(ownProps, itemProps),\n          className: cx(\"vuuToolbarItem\", itemClassName),\n          \"data-overflow-priority\": selected ? \"1\" : undefined,\n          id: itemId,\n          key: index,\n          \"aria-selected\": selected,\n          tabIndex: focusableIdx === index ? 0 : -1,\n        });\n      }),\n    [activeItemIndex, children, focusableIdx, id, itemProps],\n  );\n\n  return (\n    <OverflowContainer\n      {...props}\n      {...toolbarHook.containerProps}\n      className={cx(className, classBase, `${classBase}-${orientation}`, {\n        [`${classBase}-alignCenter`]: alignItems === \"center\",\n        [`${classBase}-alignEnd`]: alignItems === \"end\",\n        [`${classBase}-withSeparators`]: showSeparators,\n      })}\n      {...props}\n      ref={rootRef}\n    >\n      {items}\n    </OverflowContainer>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","toolbarCss","useRef","useToolbar","useId","useMemo","asReactElements","forwardCallbackProps","jsx","OverflowContainer"],"mappings":"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"}
+{"version":3,"file":"Toolbar.js","sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { useMemo, useRef } from \"react\";\nimport {\n  OverflowContainer,\n  OverflowContainerProps,\n} from \"../overflow-container\";\nimport { useToolbar } from \"./useToolbar\";\nimport { forwardCallbackProps } from \"../utils\";\n\nimport toolbarCss from \"./Toolbar.css\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n} from \"../common-hooks\";\n\nconst classBase = \"vuuToolbar\";\n\nexport type ActiveItemChangeHandler = (itemIndex: number[]) => void;\n\nexport type NavigationOutOfBoundsHandler = (direction: \"start\" | \"end\") => void;\nexport interface ToolbarProps extends OverflowContainerProps {\n  activeItemIndex?: number[];\n  alignItems?: \"start\" | \"center\" | \"end\";\n  defaultActiveItemIndex?: number[];\n  onActiveChange?: ActiveItemChangeHandler;\n  /**\n   * Indicates that user has used Arrow key navigation to move beyond the\n   * last or before the first item. A higher level component may want to\n   * use this to implement a seamless navigation across components.\n   */\n  onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;\n  selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;\n  showSeparators?: boolean;\n}\n\nexport const Toolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  alignItems = \"start\",\n  defaultActiveItemIndex,\n  children,\n  className,\n  id: idProp,\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation = \"horizontal\",\n  selectionStrategy = \"none\",\n  showSeparators = false,\n  ...props\n}: ToolbarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toolbar\",\n    css: toolbarCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeItemIndex,\n    focusableIdx,\n    focusVisible,\n    itemProps,\n    ...toolbarHook\n  } = useToolbar({\n    activeItemIndex: activeItemIndexProp,\n    defaultActiveItemIndex,\n    containerRef: rootRef,\n    onActiveChange,\n    onNavigateOutOfBounds,\n    orientation,\n    selectionStrategy,\n  });\n\n  const id = useId(idProp);\n\n  const items = useMemo(\n    () =>\n      asReactElements(children).map((child, index) => {\n        const {\n          id: itemId = `${id}-tab-${index}`,\n          className: itemClassName,\n          ...ownProps\n        } = child.props;\n        const selected = activeItemIndex.includes(index);\n        return React.cloneElement(child, {\n          ...forwardCallbackProps(ownProps, itemProps),\n          className: cx(\"vuuToolbarItem\", itemClassName),\n          \"data-overflow-priority\": selected ? \"1\" : undefined,\n          id: itemId,\n          key: index,\n          \"aria-selected\": selected,\n          tabIndex: focusableIdx === index ? 0 : -1,\n        });\n      }),\n    [activeItemIndex, children, focusableIdx, id, itemProps],\n  );\n\n  return (\n    <OverflowContainer\n      {...props}\n      {...toolbarHook.containerProps}\n      className={cx(className, classBase, `${classBase}-${orientation}`, {\n        [`${classBase}-alignCenter`]: alignItems === \"center\",\n        [`${classBase}-alignEnd`]: alignItems === \"end\",\n        [`${classBase}-withSeparators`]: showSeparators,\n      })}\n      {...props}\n      ref={rootRef}\n    >\n      {items}\n    </OverflowContainer>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","toolbarCss","useRef","useToolbar","useId","useMemo","asReactElements","forwardCallbackProps","jsx","OverflowContainer"],"mappings":"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"}

package/cjs/toolbar/toolbar-dom-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-dom-utils.js","sources":["../../src/toolbar/toolbar-dom-utils.ts"],"sourcesContent":["import { getElementDataIndex } from \"@vuu-ui/vuu-utils\";\n\nexport const getIndexOfItem = (\n  container: HTMLElement | null,\n  query: string,\n) => {\n  if (container) {\n    const targetTab = container.querySelector(\n      `[data-index]:has(${query})`,\n    ) as HTMLElement;\n    return getElementDataIndex(targetTab);\n  }\n  return -1;\n};\n\nexport const getIndexOfSelectedTab = (container: HTMLElement | null) =>\n  getIndexOfItem(container, '[aria-selected=\"true\"]');\n\nexport const getIndexOfEditedItem = (container: HTMLElement | null) =>\n  getIndexOfItem(container, \".vuuEditableLabel-editing\");\n"],"names":["getElementDataIndex"],"mappings":";;;;AAEa,MAAA,cAAA,GAAiB,CAC5B,SAAA,EACA,KACG,KAAA;AACH,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,MAAM,YAAY,SAAU,CAAA,aAAA;AAAA,MAC1B,oBAAoB,KAAK,CAAA,CAAA,CAAA;AAAA,KAC3B,CAAA;AACA,IAAA,OAAOA,6BAAoB,SAAS,CAAA,CAAA;AAAA,GACtC;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,EAAA;AAKO,MAAM,oBAAuB,GAAA,CAAC,SACnC,KAAA,cAAA,CAAe,WAAW,2BAA2B;;;;;"}
+{"version":3,"file":"toolbar-dom-utils.js","sources":["../../src/toolbar/toolbar-dom-utils.ts"],"sourcesContent":["import { getElementDataIndex } from \"@vuu-ui/vuu-utils\";\n\nexport const getIndexOfItem = (\n  container: HTMLElement | null,\n  query: string,\n) => {\n  if (container) {\n    const targetTab = container.querySelector(\n      `[data-index]:has(${query})`,\n    ) as HTMLElement;\n    return getElementDataIndex(targetTab);\n  }\n  return -1;\n};\n\nexport const getIndexOfSelectedTab = (container: HTMLElement | null) =>\n  getIndexOfItem(container, '[aria-selected=\"true\"]');\n\nexport const getIndexOfEditedItem = (container: HTMLElement | null) =>\n  getIndexOfItem(container, \".vuuEditableLabel-editing\");\n"],"names":["getElementDataIndex"],"mappings":";;;;AAEa,MAAA,cAAA,GAAiB,CAC5B,SAAA,EACA,KACG,KAAA;AACH,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,MAAM,YAAY,SAAU,CAAA,aAAA;AAAA,MAC1B,oBAAoB,KAAK,CAAA,CAAA;AAAA,KAC3B;AACA,IAAA,OAAOA,6BAAoB,SAAS,CAAA;AAAA;AAEtC,EAAO,OAAA,CAAA,CAAA;AACT;AAKO,MAAM,oBAAuB,GAAA,CAAC,SACnC,KAAA,cAAA,CAAe,WAAW,2BAA2B;;;;;"}

package/cjs/toolbar/useKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.js","sources":["../../src/toolbar/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  dispatchMouseEvent,\n  getClosest,\n  getElementDataIndex,\n  getFocusableElement,\n  orientationType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEvent,\n  FocusEventHandler,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowLeft,\n  ArrowRight,\n  Home,\n  End,\n} from \"@vuu-ui/vuu-utils\";\nimport { getIndexOfEditedItem } from \"./toolbar-dom-utils\";\nimport { NavigationOutOfBoundsHandler } from \"./Toolbar\";\nimport { PopupCloseCallback } from \"@vuu-ui/vuu-popups\";\n\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 isOverflowIndicator = (el: HTMLElement | null) =>\n  el !== null && el.dataset.index === \"overflow\";\n\nconst itemIsNotFocusable = (\n  container: HTMLElement | null,\n  direction: \"bwd\" | \"fwd\",\n  indexCount: number,\n  nextIdx: number,\n  hasOverflowedItem: boolean,\n) => {\n  if (container) {\n    const withinRangeBwd = direction === \"bwd\" && nextIdx > 0;\n    const withinRangeFwd = direction === \"fwd\" && nextIdx < indexCount;\n    const withinRange = withinRangeBwd || withinRangeFwd;\n    const nextElement = getElementByPosition(container, nextIdx, true);\n    const isOverflowedItem =\n      hasOverflowedItem && !isNonWrappedElement(nextElement);\n    const isHiddenOverflowIndicator =\n      !hasOverflowedItem && isOverflowIndicator(nextElement);\n    hasOverflowedItem && !isNonWrappedElement(nextElement);\n    return withinRange && (isOverflowedItem || isHiddenOverflowIndicator);\n  } else {\n    return false;\n  }\n};\n\nconst isNavigationKey = (\n  key: string,\n  orientation: orientationType = \"horizontal\",\n) => navigation[orientation][key] !== undefined;\n\nconst isMenuActivationKey = (key: string) => key === ArrowDown;\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 isNonWrappedElement = (element: HTMLElement | null) =>\n  element !== null && !element.classList.contains(\"wrapped\");\n\nconst getToolbarItems = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(\"[data-index]\")) as HTMLElement[];\n\nconst getIndexOfOverflowItem = (container: HTMLElement | null) => {\n  if (container === null) {\n    return -1;\n  } else {\n    const targets = getToolbarItems(container);\n    const indexValues = targets.map((el) => el.dataset.index);\n    return indexValues.indexOf(\"overflow\");\n  }\n};\n\n// Get an OverflowItem based on data-index\nconst getElementByPosition = (\n  container: HTMLElement | null,\n  index: number,\n  includeOverflowInd = false,\n) => {\n  if (container !== null) {\n    const targets = getToolbarItems(container);\n    const target = targets[index];\n    if (!includeOverflowInd && isOverflowIndicator(target)) {\n      return null;\n    } else {\n      return target;\n    }\n  }\n  return null;\n};\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface ToolbarNavigationHookProps {\n  containerRef: RefObject<HTMLElement>;\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;\n  orientation: orientationType;\n}\n\ninterface ToolbarNavigationHookResult {\n  containerProps: ContainerNavigationProps;\n  focusableIdx: number;\n  highlightedIdx: number;\n  focusItem: (\n    itemIndex: number,\n    immediateFocus?: boolean,\n    withKeyboard?: boolean,\n    delay?: number,\n  ) => void;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  onClick: (evt: ReactMouseEvent, tabIndex: number) => void;\n  onFocus: (evt: FocusEvent<HTMLElement>) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n  onOverflowMenuClose?: PopupCloseCallback;\n  setHighlightedIdx: (highlightedIndex: number) => void;\n}\n\nexport const useKeyboardNavigation = ({\n  containerRef,\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\n  onNavigateOutOfBounds,\n  orientation,\n}: ToolbarNavigationHookProps): ToolbarNavigationHookResult => {\n  const mouseClickPending = useRef(false);\n  /** tracks the highlighted index */\n  const focusedRef = useRef<number>(-1);\n  const [hasFocus, setHasFocus] = useState(false);\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 focusItem = useCallback(\n    (\n      itemIndex: number,\n      immediateFocus = false,\n      withKeyboard?: boolean,\n      delay = 70,\n    ) => {\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      console.log(`focus item ${itemIndex}`);\n      setHighlightedIdx(itemIndex);\n\n      if (withKeyboard === true && !keyboardNavigation.current) {\n        keyboardNavigation.current = true;\n      }\n\n      const setFocus = () => {\n        const element = getElementByPosition(\n          containerRef.current,\n          itemIndex,\n          true,\n        );\n        if (element) {\n          const focussableElement = getFocusableElement(element);\n          focussableElement?.focus();\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, delay);\n      }\n    },\n    [containerRef, 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 === 0) {\n        // we are tabbing into the focusable item, by default the first\n        // align highlighted index\n        const index = getElementDataIndex(getClosest(e.target, \"index\"));\n        setHighlightedIdx(index);\n      } else 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        const index = getIndexOfEditedItem(containerRef.current);\n        if (index !== -1) {\n          requestAnimationFrame(() => {\n            setHighlightedIdx(index);\n          });\n        }\n      }\n    }\n  };\n\n  const getIndexCount = useCallback(\n    () => containerRef.current?.querySelectorAll(`[data-index]`).length ?? 0,\n    [containerRef],\n  );\n\n  const nextFocusableItemIdx = useCallback(\n    (direction: directionType = \"fwd\", idx?: number) => {\n      const indexCount = getIndexCount();\n      const index = typeof idx === \"number\" ? idx : indexCount;\n\n      let nextIdx = nextItemIdx(indexCount, direction, index);\n      const nextDirection =\n        direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n\n      const hasOverflowedItem =\n        containerRef.current?.querySelector(\n          \".vuuOverflowContainer-wrapContainer-overflowed\",\n        ) != null;\n\n      while (\n        itemIsNotFocusable(\n          containerRef.current,\n          nextDirection,\n          indexCount,\n          nextIdx,\n          hasOverflowedItem,\n        )\n      ) {\n        const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);\n        if (newIdx === nextIdx) {\n          // theres no further index and nextIndex is not focusable\n          // so there are no further focusable items\n          return index;\n        } else {\n          nextIdx = newIdx;\n        }\n      }\n      return nextIdx;\n    },\n    [containerRef, getIndexCount],\n  );\n\n  const navigateChildItems = useCallback(\n    (e: React.KeyboardEvent) => {\n      const direction = navigation[orientation][e.key];\n      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n      console.log(`highlightedIdx = ${highlightedIdx}, nextIdx = ${nextIdx} `);\n      if (nextIdx !== highlightedIdx) {\n        const immediateFocus = true;\n        focusItem(nextIdx, immediateFocus);\n      } else {\n        onNavigateOutOfBounds?.(direction === \"bwd\" ? \"start\" : \"end\");\n      }\n    },\n    [\n      orientation,\n      nextFocusableItemIdx,\n      highlightedIdx,\n      focusItem,\n      onNavigateOutOfBounds,\n    ],\n  );\n\n  const highlightedItemHasMenu = useCallback(() => {\n    const el = getElementByPosition(containerRef.current, highlightedIdx);\n    if (el) {\n      return el.querySelector(\".vuuPopupMenu\") != null;\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const highlightedItemInEditState = useCallback(() => {\n    const el = getElementByPosition(containerRef.current, highlightedIdx);\n    if (el) {\n      return el.querySelector(\".vuuEditableLabel-input\") != null;\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const activateItemMenu = useCallback(() => {\n    const el = getElementByPosition(containerRef.current, highlightedIdx);\n    const menuEl = el?.querySelector(\".vuuPopupMenu\") as HTMLElement;\n    if (menuEl) {\n      dispatchMouseEvent(menuEl, \"click\");\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {\n        e.preventDefault();\n        if (keyboardNavigation.current) {\n          navigateChildItems(e);\n        } else {\n          keyboardNavigation.current = true;\n          navigateChildItems(e);\n        }\n      } else if (\n        isMenuActivationKey(e.key) &&\n        highlightedItemHasMenu() &&\n        !highlightedItemInEditState()\n      ) {\n        activateItemMenu();\n      }\n    },\n    [\n      activateItemMenu,\n      getIndexCount,\n      highlightedItemHasMenu,\n      highlightedItemInEditState,\n      navigateChildItems,\n      orientation,\n    ],\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 = (_: ReactMouseEvent, itemIndex: number) => {\n    setHighlightedIdx(itemIndex);\n  };\n\n  const handleFocus = useCallback(() => {\n    if (!hasFocus) {\n      setHasFocus(true);\n      if (!mouseClickPending.current) {\n        keyboardNavigation.current = true;\n      } else {\n        mouseClickPending.current = false;\n      }\n    }\n  }, [hasFocus]);\n\n  const handleContainerMouseDown = useCallback(() => {\n    if (!hasFocus) {\n      mouseClickPending.current = true;\n    }\n    keyboardNavigation.current = false;\n  }, [hasFocus]);\n\n  const handleOverflowMenuClose = useCallback<PopupCloseCallback>(\n    (closeReason) => {\n      if (closeReason?.type === \"escape\") {\n        const index = getIndexOfOverflowItem(containerRef.current);\n        if (index !== -1) {\n          focusItem(index);\n        }\n      }\n    },\n    [containerRef, focusItem],\n  );\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".vuuToolbar\");\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  return {\n    containerProps,\n    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n    focusIsWithinComponent: hasFocus,\n    highlightedIdx,\n    focusableIdx: 0,\n    focusItem,\n    onClick: handleItemClick,\n    onFocus,\n    onKeyDown: handleKeyDown,\n    onOverflowMenuClose: handleOverflowMenuClose,\n    setHighlightedIdx,\n  };\n};\n"],"names":["Home","End","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","useRef","useState","useControlled","useCallback","getFocusableElement","getElementDataIndex","getClosest","getIndexOfEditedItem","dispatchMouseEvent"],"mappings":";;;;;;;AAiCA,MAAM,UAAa,GAAA;AAAA,EACjB,UAAY,EAAA;AAAA,IACV,CAACA,aAAI,GAAG,OAAA;AAAA,IACR,CAACC,YAAG,GAAG,KAAA;AAAA,IACP,CAACC,kBAAS,GAAG,KAAA;AAAA,IACb,CAACC,mBAAU,GAAG,KAAA;AAAA,GAChB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,CAACH,aAAI,GAAG,OAAA;AAAA,IACR,CAACC,YAAG,GAAG,KAAA;AAAA,IACP,CAACG,gBAAO,GAAG,KAAA;AAAA,IACX,CAACC,kBAAS,GAAG,KAAA;AAAA,GACf;AACF,CAAA,CAAA;AAEA,MAAM,sBAAsB,CAAC,EAAA,KAC3B,OAAO,IAAQ,IAAA,EAAA,CAAG,QAAQ,KAAU,KAAA,UAAA,CAAA;AAEtC,MAAM,qBAAqB,CACzB,SAAA,EACA,SACA,EAAA,UAAA,EACA,SACA,iBACG,KAAA;AACH,EAAA,IAAI,SAAW,EAAA;AACb,IAAM,MAAA,cAAA,GAAiB,SAAc,KAAA,KAAA,IAAS,OAAU,GAAA,CAAA,CAAA;AACxD,IAAM,MAAA,cAAA,GAAiB,SAAc,KAAA,KAAA,IAAS,OAAU,GAAA,UAAA,CAAA;AACxD,IAAA,MAAM,cAAc,cAAkB,IAAA,cAAA,CAAA;AACtC,IAAA,MAAM,WAAc,GAAA,oBAAA,CAAqB,SAAW,EAAA,OAAA,EAAS,IAAI,CAAA,CAAA;AACjE,IAAA,MAAM,gBACJ,GAAA,iBAAA,IAAqB,CAAC,mBAAA,CAAoB,WAAW,CAAA,CAAA;AACvD,IAAA,MAAM,yBACJ,GAAA,CAAC,iBAAqB,IAAA,mBAAA,CAAoB,WAAW,CAAA,CAAA;AACvD,IAAqB,iBAAA,IAAA,CAAC,oBAAoB,WAAW,CAAA,CAAA;AACrD,IAAA,OAAO,gBAAgB,gBAAoB,IAAA,yBAAA,CAAA,CAAA;AAAA,GACtC,MAAA;AACL,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAEA,MAAM,eAAA,GAAkB,CACtB,GACA,EAAA,WAAA,GAA+B,iBAC5B,UAAW,CAAA,WAAW,CAAE,CAAA,GAAG,CAAM,KAAA,KAAA,CAAA,CAAA;AAEtC,MAAM,mBAAA,GAAsB,CAAC,GAAA,KAAgB,GAAQ,KAAAA,kBAAA,CAAA;AAErD,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,mBAAA,GAAsB,CAAC,OAC3B,KAAA,OAAA,KAAY,QAAQ,CAAC,OAAA,CAAQ,SAAU,CAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAE3D,MAAM,eAAA,GAAkB,CAAC,SACvB,KAAA,KAAA,CAAM,KAAK,SAAU,CAAA,gBAAA,CAAiB,cAAc,CAAC,CAAA,CAAA;AAEvD,MAAM,sBAAA,GAAyB,CAAC,SAAkC,KAAA;AAChE,EAAA,IAAI,cAAc,IAAM,EAAA;AACtB,IAAO,OAAA,CAAA,CAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAM,MAAA,OAAA,GAAU,gBAAgB,SAAS,CAAA,CAAA;AACzC,IAAA,MAAM,cAAc,OAAQ,CAAA,GAAA,CAAI,CAAC,EAAO,KAAA,EAAA,CAAG,QAAQ,KAAK,CAAA,CAAA;AACxD,IAAO,OAAA,WAAA,CAAY,QAAQ,UAAU,CAAA,CAAA;AAAA,GACvC;AACF,CAAA,CAAA;AAGA,MAAM,oBAAuB,GAAA,CAC3B,SACA,EAAA,KAAA,EACA,qBAAqB,KAClB,KAAA;AACH,EAAA,IAAI,cAAc,IAAM,EAAA;AACtB,IAAM,MAAA,OAAA,GAAU,gBAAgB,SAAS,CAAA,CAAA;AACzC,IAAM,MAAA,MAAA,GAAS,QAAQ,KAAK,CAAA,CAAA;AAC5B,IAAA,IAAI,CAAC,kBAAA,IAAsB,mBAAoB,CAAA,MAAM,CAAG,EAAA;AACtD,MAAO,OAAA,IAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,MAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,IAAA,CAAA;AACT,CAAA,CAAA;AAoCO,MAAM,wBAAwB,CAAC;AAAA,EACpC,YAAA;AAAA,EACA,qBAAwB,GAAA,CAAA,CAAA;AAAA,EACxB,cAAgB,EAAA,kBAAA;AAAA,EAChB,qBAAA;AAAA,EACA,WAAA;AACF,CAA+D,KAAA;AAC7D,EAAM,MAAA,iBAAA,GAAoBC,aAAO,KAAK,CAAA,CAAA;AAEtC,EAAM,MAAA,UAAA,GAAaA,aAAe,CAAE,CAAA,CAAA,CAAA;AACpC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAC9C,EAAA,MAAM,CAAC,cAAA,EAAgB,kBAAkB,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACzD,UAAY,EAAA,kBAAA;AAAA,IACZ,OAAS,EAAA,qBAAA;AAAA,IACT,IAAM,EAAA,uBAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAA,MAAM,iBAAoB,GAAAC,iBAAA;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,GAAqBH,aAAO,KAAK,CAAA,CAAA;AAEvC,EAAA,MAAM,SAAY,GAAAG,iBAAA;AAAA,IAChB,CACE,SACA,EAAA,cAAA,GAAiB,KACjB,EAAA,YAAA,EACA,QAAQ,EACL,KAAA;AASH,MAAQ,OAAA,CAAA,GAAA,CAAI,CAAc,WAAA,EAAA,SAAS,CAAE,CAAA,CAAA,CAAA;AACrC,MAAA,iBAAA,CAAkB,SAAS,CAAA,CAAA;AAE3B,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,OAAU,GAAA,oBAAA;AAAA,UACd,YAAa,CAAA,OAAA;AAAA,UACb,SAAA;AAAA,UACA,IAAA;AAAA,SACF,CAAA;AACA,QAAA,IAAI,OAAS,EAAA;AACX,UAAM,MAAA,iBAAA,GAAoBC,6BAAoB,OAAO,CAAA,CAAA;AACrD,UAAA,iBAAA,EAAmB,KAAM,EAAA,CAAA;AAAA,SAC3B;AAAA,OACF,CAAA;AACA,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAS,QAAA,EAAA,CAAA;AAAA,OACJ,MAAA;AACL,QAAA,UAAA,CAAW,UAAU,KAAK,CAAA,CAAA;AAAA,OAC5B;AAAA,KACF;AAAA,IACA,CAAC,cAAc,iBAAiB,CAAA;AAAA,GAClC,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,CAAG,EAAA;AAG3B,QAAA,MAAM,QAAQC,4BAAoB,CAAAC,mBAAA,CAAW,CAAE,CAAA,MAAA,EAAQ,OAAO,CAAC,CAAA,CAAA;AAC/D,QAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAAA,OACd,MAAA,IAAA,CAAA,CAAE,MAAO,CAAA,QAAA,KAAa,CAAI,CAAA,EAAA,CAG9B,MAAA;AACL,QAAM,MAAA,KAAA,GAAQC,oCAAqB,CAAA,YAAA,CAAa,OAAO,CAAA,CAAA;AACvD,QAAA,IAAI,UAAU,CAAI,CAAA,EAAA;AAChB,UAAA,qBAAA,CAAsB,MAAM;AAC1B,YAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAAA,WACxB,CAAA,CAAA;AAAA,SACH;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAJ,iBAAA;AAAA,IACpB,MAAM,YAAa,CAAA,OAAA,EAAS,gBAAiB,CAAA,CAAA,YAAA,CAAc,EAAE,MAAU,IAAA,CAAA;AAAA,IACvE,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEA,EAAA,MAAM,oBAAuB,GAAAA,iBAAA;AAAA,IAC3B,CAAC,SAA2B,GAAA,KAAA,EAAO,GAAiB,KAAA;AAClD,MAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AACjC,MAAA,MAAM,KAAQ,GAAA,OAAO,GAAQ,KAAA,QAAA,GAAW,GAAM,GAAA,UAAA,CAAA;AAE9C,MAAA,IAAI,OAAU,GAAA,WAAA,CAAY,UAAY,EAAA,SAAA,EAAW,KAAK,CAAA,CAAA;AACtD,MAAA,MAAM,gBACJ,SAAc,KAAA,OAAA,GAAU,KAAQ,GAAA,SAAA,KAAc,QAAQ,KAAQ,GAAA,SAAA,CAAA;AAEhE,MAAM,MAAA,iBAAA,GACJ,aAAa,OAAS,EAAA,aAAA;AAAA,QACpB,gDAAA;AAAA,OACG,IAAA,IAAA,CAAA;AAEP,MACE,OAAA,kBAAA;AAAA,QACE,YAAa,CAAA,OAAA;AAAA,QACb,aAAA;AAAA,QACA,UAAA;AAAA,QACA,OAAA;AAAA,QACA,iBAAA;AAAA,OAEF,EAAA;AACA,QAAA,MAAM,MAAS,GAAA,WAAA,CAAY,UAAY,EAAA,aAAA,EAAe,OAAO,CAAA,CAAA;AAC7D,QAAA,IAAI,WAAW,OAAS,EAAA;AAGtB,UAAO,OAAA,KAAA,CAAA;AAAA,SACF,MAAA;AACL,UAAU,OAAA,GAAA,MAAA,CAAA;AAAA,SACZ;AAAA,OACF;AACA,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,cAAc,aAAa,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAA,MAAM,kBAAqB,GAAAA,iBAAA;AAAA,IACzB,CAAC,CAA2B,KAAA;AAC1B,MAAA,MAAM,SAAY,GAAA,UAAA,CAAW,WAAW,CAAA,CAAE,EAAE,GAAG,CAAA,CAAA;AAC/C,MAAM,MAAA,OAAA,GAAU,oBAAqB,CAAA,SAAA,EAAW,cAAc,CAAA,CAAA;AAC9D,MAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,iBAAA,EAAoB,cAAc,CAAA,YAAA,EAAe,OAAO,CAAG,CAAA,CAAA,CAAA,CAAA;AACvE,MAAA,IAAI,YAAY,cAAgB,EAAA;AAC9B,QAAA,MAAM,cAAiB,GAAA,IAAA,CAAA;AACvB,QAAA,SAAA,CAAU,SAAS,cAAc,CAAA,CAAA;AAAA,OAC5B,MAAA;AACL,QAAwB,qBAAA,GAAA,SAAA,KAAc,KAAQ,GAAA,OAAA,GAAU,KAAK,CAAA,CAAA;AAAA,OAC/D;AAAA,KACF;AAAA,IACA;AAAA,MACE,WAAA;AAAA,MACA,oBAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,qBAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,sBAAA,GAAyBA,kBAAY,MAAM;AAC/C,IAAA,MAAM,EAAK,GAAA,oBAAA,CAAqB,YAAa,CAAA,OAAA,EAAS,cAAc,CAAA,CAAA;AACpE,IAAA,IAAI,EAAI,EAAA;AACN,MAAO,OAAA,EAAA,CAAG,aAAc,CAAA,eAAe,CAAK,IAAA,IAAA,CAAA;AAAA,KAC9C;AACA,IAAO,OAAA,KAAA,CAAA;AAAA,GACN,EAAA,CAAC,YAAc,EAAA,cAAc,CAAC,CAAA,CAAA;AAEjC,EAAM,MAAA,0BAAA,GAA6BA,kBAAY,MAAM;AACnD,IAAA,MAAM,EAAK,GAAA,oBAAA,CAAqB,YAAa,CAAA,OAAA,EAAS,cAAc,CAAA,CAAA;AACpE,IAAA,IAAI,EAAI,EAAA;AACN,MAAO,OAAA,EAAA,CAAG,aAAc,CAAA,yBAAyB,CAAK,IAAA,IAAA,CAAA;AAAA,KACxD;AACA,IAAO,OAAA,KAAA,CAAA;AAAA,GACN,EAAA,CAAC,YAAc,EAAA,cAAc,CAAC,CAAA,CAAA;AAEjC,EAAM,MAAA,gBAAA,GAAmBA,kBAAY,MAAM;AACzC,IAAA,MAAM,EAAK,GAAA,oBAAA,CAAqB,YAAa,CAAA,OAAA,EAAS,cAAc,CAAA,CAAA;AACpE,IAAM,MAAA,MAAA,GAAS,EAAI,EAAA,aAAA,CAAc,eAAe,CAAA,CAAA;AAChD,IAAA,IAAI,MAAQ,EAAA;AACV,MAAAK,2BAAA,CAAmB,QAAQ,OAAO,CAAA,CAAA;AAAA,KACpC;AACA,IAAO,OAAA,KAAA,CAAA;AAAA,GACN,EAAA,CAAC,YAAc,EAAA,cAAc,CAAC,CAAA,CAAA;AAEjC,EAAA,MAAM,aAAgB,GAAAL,iBAAA;AAAA,IACpB,CAAC,CAAqB,KAAA;AACpB,MAAA,IAAI,eAAkB,GAAA,CAAA,IAAK,gBAAgB,CAAE,CAAA,GAAA,EAAK,WAAW,CAAG,EAAA;AAC9D,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,CAAC,CAAA,CAAA;AAAA,SACtB;AAAA,OACF,MAAA,IACE,oBAAoB,CAAE,CAAA,GAAG,KACzB,sBAAuB,EAAA,IACvB,CAAC,0BAAA,EACD,EAAA;AACA,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA;AAAA,MACE,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,sBAAA;AAAA,MACA,0BAAA;AAAA,MACA,kBAAA;AAAA,MACA,WAAA;AAAA,KACF;AAAA,GACF,CAAA;AAIA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAA,EAAoB,SAAsB,KAAA;AACjE,IAAA,iBAAA,CAAkB,SAAS,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,WAAA,GAAcA,kBAAY,MAAM;AACpC,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,MAAI,IAAA,CAAC,kBAAkB,OAAS,EAAA;AAC9B,QAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA,CAAA;AAAA,OACxB,MAAA;AACL,QAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAAA,OAC9B;AAAA,KACF;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,wBAAA,GAA2BA,kBAAY,MAAM;AACjD,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA,iBAAA,CAAkB,OAAU,GAAA,IAAA,CAAA;AAAA,KAC9B;AACA,IAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA,CAAA;AAAA,GAC/B,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAA,MAAM,uBAA0B,GAAAA,iBAAA;AAAA,IAC9B,CAAC,WAAgB,KAAA;AACf,MAAI,IAAA,WAAA,EAAa,SAAS,QAAU,EAAA;AAClC,QAAM,MAAA,KAAA,GAAQ,sBAAuB,CAAA,YAAA,CAAa,OAAO,CAAA,CAAA;AACzD,QAAA,IAAI,UAAU,CAAI,CAAA,EAAA;AAChB,UAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACjB;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,cAAc,SAAS,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAA;AAAA,IACrB,MAAA,EAAQ,CAAC,CAAkB,KAAA;AACzB,MAAA,MAAM,YAAgB,GAAA,CAAA,CAAE,MAAuB,CAAA,OAAA,CAAQ,aAAa,CAAA,CAAA;AACpE,MAAA,MAAM,aAAa,CAAE,CAAA,aAAA,CAAA;AACrB,MAAA,IAAI,YAAgB,IAAA,CAAC,YAAc,EAAA,QAAA,CAAS,UAAU,CAAG,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,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,YAAc,EAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,OAAS,EAAA,eAAA;AAAA,IACT,OAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,mBAAqB,EAAA,uBAAA;AAAA,IACrB,iBAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../src/toolbar/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  dispatchMouseEvent,\n  getClosest,\n  getElementDataIndex,\n  getFocusableElement,\n  orientationType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEvent,\n  FocusEventHandler,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowLeft,\n  ArrowRight,\n  Home,\n  End,\n} from \"@vuu-ui/vuu-utils\";\nimport { getIndexOfEditedItem } from \"./toolbar-dom-utils\";\nimport { NavigationOutOfBoundsHandler } from \"./Toolbar\";\nimport { PopupCloseCallback } from \"@vuu-ui/vuu-popups\";\n\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 isOverflowIndicator = (el: HTMLElement | null) =>\n  el !== null && el.dataset.index === \"overflow\";\n\nconst itemIsNotFocusable = (\n  container: HTMLElement | null,\n  direction: \"bwd\" | \"fwd\",\n  indexCount: number,\n  nextIdx: number,\n  hasOverflowedItem: boolean,\n) => {\n  if (container) {\n    const withinRangeBwd = direction === \"bwd\" && nextIdx > 0;\n    const withinRangeFwd = direction === \"fwd\" && nextIdx < indexCount;\n    const withinRange = withinRangeBwd || withinRangeFwd;\n    const nextElement = getElementByPosition(container, nextIdx, true);\n    const isOverflowedItem =\n      hasOverflowedItem && !isNonWrappedElement(nextElement);\n    const isHiddenOverflowIndicator =\n      !hasOverflowedItem && isOverflowIndicator(nextElement);\n    hasOverflowedItem && !isNonWrappedElement(nextElement);\n    return withinRange && (isOverflowedItem || isHiddenOverflowIndicator);\n  } else {\n    return false;\n  }\n};\n\nconst isNavigationKey = (\n  key: string,\n  orientation: orientationType = \"horizontal\",\n) => navigation[orientation][key] !== undefined;\n\nconst isMenuActivationKey = (key: string) => key === ArrowDown;\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 isNonWrappedElement = (element: HTMLElement | null) =>\n  element !== null && !element.classList.contains(\"wrapped\");\n\nconst getToolbarItems = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(\"[data-index]\")) as HTMLElement[];\n\nconst getIndexOfOverflowItem = (container: HTMLElement | null) => {\n  if (container === null) {\n    return -1;\n  } else {\n    const targets = getToolbarItems(container);\n    const indexValues = targets.map((el) => el.dataset.index);\n    return indexValues.indexOf(\"overflow\");\n  }\n};\n\n// Get an OverflowItem based on data-index\nconst getElementByPosition = (\n  container: HTMLElement | null,\n  index: number,\n  includeOverflowInd = false,\n) => {\n  if (container !== null) {\n    const targets = getToolbarItems(container);\n    const target = targets[index];\n    if (!includeOverflowInd && isOverflowIndicator(target)) {\n      return null;\n    } else {\n      return target;\n    }\n  }\n  return null;\n};\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface ToolbarNavigationHookProps {\n  containerRef: RefObject<HTMLElement>;\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;\n  orientation: orientationType;\n}\n\ninterface ToolbarNavigationHookResult {\n  containerProps: ContainerNavigationProps;\n  focusableIdx: number;\n  highlightedIdx: number;\n  focusItem: (\n    itemIndex: number,\n    immediateFocus?: boolean,\n    withKeyboard?: boolean,\n    delay?: number,\n  ) => void;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  onClick: (evt: ReactMouseEvent, tabIndex: number) => void;\n  onFocus: (evt: FocusEvent<HTMLElement>) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n  onOverflowMenuClose?: PopupCloseCallback;\n  setHighlightedIdx: (highlightedIndex: number) => void;\n}\n\nexport const useKeyboardNavigation = ({\n  containerRef,\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\n  onNavigateOutOfBounds,\n  orientation,\n}: ToolbarNavigationHookProps): ToolbarNavigationHookResult => {\n  const mouseClickPending = useRef(false);\n  /** tracks the highlighted index */\n  const focusedRef = useRef<number>(-1);\n  const [hasFocus, setHasFocus] = useState(false);\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 focusItem = useCallback(\n    (\n      itemIndex: number,\n      immediateFocus = false,\n      withKeyboard?: boolean,\n      delay = 70,\n    ) => {\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      console.log(`focus item ${itemIndex}`);\n      setHighlightedIdx(itemIndex);\n\n      if (withKeyboard === true && !keyboardNavigation.current) {\n        keyboardNavigation.current = true;\n      }\n\n      const setFocus = () => {\n        const element = getElementByPosition(\n          containerRef.current,\n          itemIndex,\n          true,\n        );\n        if (element) {\n          const focussableElement = getFocusableElement(element);\n          focussableElement?.focus();\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, delay);\n      }\n    },\n    [containerRef, 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 === 0) {\n        // we are tabbing into the focusable item, by default the first\n        // align highlighted index\n        const index = getElementDataIndex(getClosest(e.target, \"index\"));\n        setHighlightedIdx(index);\n      } else 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        const index = getIndexOfEditedItem(containerRef.current);\n        if (index !== -1) {\n          requestAnimationFrame(() => {\n            setHighlightedIdx(index);\n          });\n        }\n      }\n    }\n  };\n\n  const getIndexCount = useCallback(\n    () => containerRef.current?.querySelectorAll(`[data-index]`).length ?? 0,\n    [containerRef],\n  );\n\n  const nextFocusableItemIdx = useCallback(\n    (direction: directionType = \"fwd\", idx?: number) => {\n      const indexCount = getIndexCount();\n      const index = typeof idx === \"number\" ? idx : indexCount;\n\n      let nextIdx = nextItemIdx(indexCount, direction, index);\n      const nextDirection =\n        direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n\n      const hasOverflowedItem =\n        containerRef.current?.querySelector(\n          \".vuuOverflowContainer-wrapContainer-overflowed\",\n        ) != null;\n\n      while (\n        itemIsNotFocusable(\n          containerRef.current,\n          nextDirection,\n          indexCount,\n          nextIdx,\n          hasOverflowedItem,\n        )\n      ) {\n        const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);\n        if (newIdx === nextIdx) {\n          // theres no further index and nextIndex is not focusable\n          // so there are no further focusable items\n          return index;\n        } else {\n          nextIdx = newIdx;\n        }\n      }\n      return nextIdx;\n    },\n    [containerRef, getIndexCount],\n  );\n\n  const navigateChildItems = useCallback(\n    (e: React.KeyboardEvent) => {\n      const direction = navigation[orientation][e.key];\n      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n      console.log(`highlightedIdx = ${highlightedIdx}, nextIdx = ${nextIdx} `);\n      if (nextIdx !== highlightedIdx) {\n        const immediateFocus = true;\n        focusItem(nextIdx, immediateFocus);\n      } else {\n        onNavigateOutOfBounds?.(direction === \"bwd\" ? \"start\" : \"end\");\n      }\n    },\n    [\n      orientation,\n      nextFocusableItemIdx,\n      highlightedIdx,\n      focusItem,\n      onNavigateOutOfBounds,\n    ],\n  );\n\n  const highlightedItemHasMenu = useCallback(() => {\n    const el = getElementByPosition(containerRef.current, highlightedIdx);\n    if (el) {\n      return el.querySelector(\".vuuPopupMenu\") != null;\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const highlightedItemInEditState = useCallback(() => {\n    const el = getElementByPosition(containerRef.current, highlightedIdx);\n    if (el) {\n      return el.querySelector(\".vuuEditableLabel-input\") != null;\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const activateItemMenu = useCallback(() => {\n    const el = getElementByPosition(containerRef.current, highlightedIdx);\n    const menuEl = el?.querySelector(\".vuuPopupMenu\") as HTMLElement;\n    if (menuEl) {\n      dispatchMouseEvent(menuEl, \"click\");\n    }\n    return false;\n  }, [containerRef, highlightedIdx]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {\n        e.preventDefault();\n        if (keyboardNavigation.current) {\n          navigateChildItems(e);\n        } else {\n          keyboardNavigation.current = true;\n          navigateChildItems(e);\n        }\n      } else if (\n        isMenuActivationKey(e.key) &&\n        highlightedItemHasMenu() &&\n        !highlightedItemInEditState()\n      ) {\n        activateItemMenu();\n      }\n    },\n    [\n      activateItemMenu,\n      getIndexCount,\n      highlightedItemHasMenu,\n      highlightedItemInEditState,\n      navigateChildItems,\n      orientation,\n    ],\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 = (_: ReactMouseEvent, itemIndex: number) => {\n    setHighlightedIdx(itemIndex);\n  };\n\n  const handleFocus = useCallback(() => {\n    if (!hasFocus) {\n      setHasFocus(true);\n      if (!mouseClickPending.current) {\n        keyboardNavigation.current = true;\n      } else {\n        mouseClickPending.current = false;\n      }\n    }\n  }, [hasFocus]);\n\n  const handleContainerMouseDown = useCallback(() => {\n    if (!hasFocus) {\n      mouseClickPending.current = true;\n    }\n    keyboardNavigation.current = false;\n  }, [hasFocus]);\n\n  const handleOverflowMenuClose = useCallback<PopupCloseCallback>(\n    (closeReason) => {\n      if (closeReason?.type === \"escape\") {\n        const index = getIndexOfOverflowItem(containerRef.current);\n        if (index !== -1) {\n          focusItem(index);\n        }\n      }\n    },\n    [containerRef, focusItem],\n  );\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".vuuToolbar\");\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  return {\n    containerProps,\n    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n    focusIsWithinComponent: hasFocus,\n    highlightedIdx,\n    focusableIdx: 0,\n    focusItem,\n    onClick: handleItemClick,\n    onFocus,\n    onKeyDown: handleKeyDown,\n    onOverflowMenuClose: handleOverflowMenuClose,\n    setHighlightedIdx,\n  };\n};\n"],"names":["Home","End","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","useRef","useState","useControlled","useCallback","getFocusableElement","getElementDataIndex","getClosest","getIndexOfEditedItem","dispatchMouseEvent"],"mappings":"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"}

package/cjs/toolbar/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelection.js","sources":["../../src/toolbar/useSelection.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useCallback } from \"react\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n  allowMultipleSelection,\n  deselectionIsAllowed,\n  selectionIsDisallowed,\n} from \"../common-hooks\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { getClosestIndexItem, isSelectableElement } from \"@vuu-ui/vuu-utils\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport interface SelectionHookProps {\n  containerRef: RefObject<HTMLElement>;\n  defaultSelected?: number[];\n  highlightedIdx: number;\n  itemQuery: string;\n  onSelectionChange?: (selectedIndices: number[]) => void;\n  selected?: number[];\n  selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection;\n}\n\nexport interface ItemHandlers {\n  onClick?: (e: MouseEvent, itemIndex: number) => void;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n}\n\nconst NO_SELECTION_HANDLERS: ItemHandlers = {};\n\nexport interface SelectionHookResult {\n  activateItem: (tabIndex: number) => void;\n  itemHandlers: ItemHandlers;\n  isControlled: boolean;\n  selected: number[];\n}\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n  selectionStrategy,\n}: SelectionHookProps): SelectionHookResult => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"useSelection\",\n    state: \"selected\",\n  });\n\n  // const isSelectableElement = useMemo(\n  //   () =>\n  //     (el: HTMLElement): boolean =>\n  //       el && el.matches(`[class*=\"${itemQuery} \"]`),\n  //   [itemQuery]\n  // );\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    [],\n  );\n\n  const selectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected = allowMultipleSelection(selectionStrategy, specialKey)\n        ? selected.concat(itemIndex)\n        : [itemIndex];\n\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const deselectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected =\n        selectionStrategy === \"deselectable\" ||\n        (selectionStrategy === \"multiple-special-key\" && !specialKey)\n          ? []\n          : selected.filter((index) => index !== itemIndex);\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isSelectionEvent(e) && isSelectableElement(e.target as HTMLElement)) {\n        if (!selected.includes(highlightedIdx)) {\n          e.stopPropagation();\n          e.preventDefault();\n          selectItem(highlightedIdx, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          e.stopPropagation();\n          e.preventDefault();\n          deselectItem(highlightedIdx, e.shiftKey);\n        }\n      }\n    },\n    [\n      isSelectionEvent,\n      selected,\n      highlightedIdx,\n      selectionStrategy,\n      selectItem,\n      deselectItem,\n    ],\n  );\n\n  const handleClick = useCallback(\n    (e: MouseEvent, itemIndex: number) => {\n      const element = getClosestIndexItem(e.target as HTMLElement);\n      if (isSelectableElement(element)) {\n        if (!selected.includes(itemIndex)) {\n          selectItem(itemIndex, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          deselectItem(itemIndex, e.shiftKey);\n        }\n      }\n    },\n    [deselectItem, selectItem, selected, selectionStrategy],\n  );\n\n  const itemHandlers = selectionIsDisallowed(selectionStrategy)\n    ? NO_SELECTION_HANDLERS\n    : {\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n      };\n\n  return {\n    activateItem: selectItem,\n    itemHandlers,\n    isControlled,\n    selected,\n  };\n};\n"],"names":["useControlled","useCallback","allowMultipleSelection","isSelectableElement","deselectionIsAllowed","getClosestIndexItem","selectionIsDisallowed"],"mappings":"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"}
+{"version":3,"file":"useSelection.js","sources":["../../src/toolbar/useSelection.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useCallback } from \"react\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n  allowMultipleSelection,\n  deselectionIsAllowed,\n  selectionIsDisallowed,\n} from \"../common-hooks\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { getClosestIndexItem, isSelectableElement } from \"@vuu-ui/vuu-utils\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport interface SelectionHookProps {\n  containerRef: RefObject<HTMLElement>;\n  defaultSelected?: number[];\n  highlightedIdx: number;\n  itemQuery: string;\n  onSelectionChange?: (selectedIndices: number[]) => void;\n  selected?: number[];\n  selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection;\n}\n\nexport interface ItemHandlers {\n  onClick?: (e: MouseEvent, itemIndex: number) => void;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n}\n\nconst NO_SELECTION_HANDLERS: ItemHandlers = {};\n\nexport interface SelectionHookResult {\n  activateItem: (tabIndex: number) => void;\n  itemHandlers: ItemHandlers;\n  isControlled: boolean;\n  selected: number[];\n}\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n  selectionStrategy,\n}: SelectionHookProps): SelectionHookResult => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"useSelection\",\n    state: \"selected\",\n  });\n\n  // const isSelectableElement = useMemo(\n  //   () =>\n  //     (el: HTMLElement): boolean =>\n  //       el && el.matches(`[class*=\"${itemQuery} \"]`),\n  //   [itemQuery]\n  // );\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    [],\n  );\n\n  const selectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected = allowMultipleSelection(selectionStrategy, specialKey)\n        ? selected.concat(itemIndex)\n        : [itemIndex];\n\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const deselectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected =\n        selectionStrategy === \"deselectable\" ||\n        (selectionStrategy === \"multiple-special-key\" && !specialKey)\n          ? []\n          : selected.filter((index) => index !== itemIndex);\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isSelectionEvent(e) && isSelectableElement(e.target as HTMLElement)) {\n        if (!selected.includes(highlightedIdx)) {\n          e.stopPropagation();\n          e.preventDefault();\n          selectItem(highlightedIdx, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          e.stopPropagation();\n          e.preventDefault();\n          deselectItem(highlightedIdx, e.shiftKey);\n        }\n      }\n    },\n    [\n      isSelectionEvent,\n      selected,\n      highlightedIdx,\n      selectionStrategy,\n      selectItem,\n      deselectItem,\n    ],\n  );\n\n  const handleClick = useCallback(\n    (e: MouseEvent, itemIndex: number) => {\n      const element = getClosestIndexItem(e.target as HTMLElement);\n      if (isSelectableElement(element)) {\n        if (!selected.includes(itemIndex)) {\n          selectItem(itemIndex, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          deselectItem(itemIndex, e.shiftKey);\n        }\n      }\n    },\n    [deselectItem, selectItem, selected, selectionStrategy],\n  );\n\n  const itemHandlers = selectionIsDisallowed(selectionStrategy)\n    ? NO_SELECTION_HANDLERS\n    : {\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n      };\n\n  return {\n    activateItem: selectItem,\n    itemHandlers,\n    isControlled,\n    selected,\n  };\n};\n"],"names":["useControlled","useCallback","allowMultipleSelection","isSelectableElement","deselectionIsAllowed","getClosestIndexItem","selectionIsDisallowed"],"mappings":"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"}

package/cjs/toolbar/useToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToolbar.js","sources":["../../src/toolbar/useToolbar.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { OverflowItem } from \"../overflow-container\";\nimport { ToolbarProps } from \"./Toolbar\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nexport interface ToolbarHookProps\n  extends Pick<\n      ToolbarProps,\n      | \"activeItemIndex\"\n      | \"defaultActiveItemIndex\"\n      | \"onActiveChange\"\n      | \"onNavigateOutOfBounds\"\n    >,\n    Required<Pick<ToolbarProps, \"orientation\" | \"selectionStrategy\">> {\n  containerRef: RefObject<HTMLElement>;\n  itemQuery?: string;\n}\n\nexport const useToolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  defaultActiveItemIndex,\n  containerRef,\n  itemQuery = \"vuuToolbarItem\",\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation,\n  selectionStrategy,\n}: ToolbarHookProps) => {\n  const lastSelection = useRef(activeItemIndexProp);\n\n  const {\n    focusItem: keyboardHookFocusItem,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    onNavigateOutOfBounds,\n    orientation,\n  });\n\n  const {\n    activateItem: selectionHookActivateItem,\n    itemHandlers: { onClick, onKeyDown },\n    selected: selectionHookSelected,\n  } = useSelection({\n    containerRef,\n    defaultSelected: defaultActiveItemIndex,\n    highlightedIdx,\n    itemQuery,\n    onSelectionChange: onActiveChange,\n    selected: activeItemIndexProp,\n    selectionStrategy,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>) => {\n      const target = evt.target as HTMLElement;\n      const toolbarItem = target.closest(\"[data-index]\") as HTMLElement;\n      if (toolbarItem) {\n        const index = parseInt(toolbarItem.dataset.index ?? \"-1\");\n        if (index !== -1 && isValidNumber(index)) {\n          keyboardHookHandleClick(evt, index);\n          onClick?.(evt, index);\n        }\n      }\n    },\n    [keyboardHookHandleClick, onClick],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        onKeyDown?.(evt);\n      }\n    },\n    [keyboardHookHandleKeyDown, onKeyDown],\n  );\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        //TODO need to be able to reset the overflow-priority without selecting the item\n        selectionHookActivateItem(index);\n        keyboardHookFocusItem(index);\n      }\n    },\n    [keyboardHookFocusItem, selectionHookActivateItem],\n  );\n\n  const itemProps = {\n    onClick: handleClick,\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  return {\n    activeItemIndex: selectionHookSelected,\n    focusableIdx: keyboardHook.focusableIdx,\n    focusVisible: keyboardHook.focusVisible,\n    containerProps: {\n      PopupMenuProps: {\n        onKeyDown: handleKeyDown,\n        onMenuClose: keyboardHook.onOverflowMenuClose,\n      },\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    itemProps,\n  };\n};\n"],"names":["useRef","useKeyboardNavigation","useSelection","useCallback","isValidNumber"],"mappings":"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"}
+{"version":3,"file":"useToolbar.js","sources":["../../src/toolbar/useToolbar.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { OverflowItem } from \"../overflow-container\";\nimport { ToolbarProps } from \"./Toolbar\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nexport interface ToolbarHookProps\n  extends Pick<\n      ToolbarProps,\n      | \"activeItemIndex\"\n      | \"defaultActiveItemIndex\"\n      | \"onActiveChange\"\n      | \"onNavigateOutOfBounds\"\n    >,\n    Required<Pick<ToolbarProps, \"orientation\" | \"selectionStrategy\">> {\n  containerRef: RefObject<HTMLElement>;\n  itemQuery?: string;\n}\n\nexport const useToolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  defaultActiveItemIndex,\n  containerRef,\n  itemQuery = \"vuuToolbarItem\",\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation,\n  selectionStrategy,\n}: ToolbarHookProps) => {\n  const lastSelection = useRef(activeItemIndexProp);\n\n  const {\n    focusItem: keyboardHookFocusItem,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    onNavigateOutOfBounds,\n    orientation,\n  });\n\n  const {\n    activateItem: selectionHookActivateItem,\n    itemHandlers: { onClick, onKeyDown },\n    selected: selectionHookSelected,\n  } = useSelection({\n    containerRef,\n    defaultSelected: defaultActiveItemIndex,\n    highlightedIdx,\n    itemQuery,\n    onSelectionChange: onActiveChange,\n    selected: activeItemIndexProp,\n    selectionStrategy,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>) => {\n      const target = evt.target as HTMLElement;\n      const toolbarItem = target.closest(\"[data-index]\") as HTMLElement;\n      if (toolbarItem) {\n        const index = parseInt(toolbarItem.dataset.index ?? \"-1\");\n        if (index !== -1 && isValidNumber(index)) {\n          keyboardHookHandleClick(evt, index);\n          onClick?.(evt, index);\n        }\n      }\n    },\n    [keyboardHookHandleClick, onClick],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        onKeyDown?.(evt);\n      }\n    },\n    [keyboardHookHandleKeyDown, onKeyDown],\n  );\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        //TODO need to be able to reset the overflow-priority without selecting the item\n        selectionHookActivateItem(index);\n        keyboardHookFocusItem(index);\n      }\n    },\n    [keyboardHookFocusItem, selectionHookActivateItem],\n  );\n\n  const itemProps = {\n    onClick: handleClick,\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  return {\n    activeItemIndex: selectionHookSelected,\n    focusableIdx: keyboardHook.focusableIdx,\n    focusVisible: keyboardHook.focusVisible,\n    containerProps: {\n      PopupMenuProps: {\n        onKeyDown: handleKeyDown,\n        onMenuClose: keyboardHook.onOverflowMenuClose,\n      },\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    itemProps,\n  };\n};\n"],"names":["useRef","useKeyboardNavigation","useSelection","useCallback","isValidNumber"],"mappings":"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"}

package/cjs/utils/escapeRegExp.js.map

@@ -1 +1 @@
-{"version":3,"file":"escapeRegExp.js","sources":["../../src/utils/escapeRegExp.ts"],"sourcesContent":["const regExp = /[.*+?^${}()|[\\]\\\\]/g;\n\nexport function escapeRegExp(string: string): string {\n  return string.replace(regExp, \"\\\\$&\");\n}\n"],"names":[],"mappings":";;AAAA,MAAM,MAAS,GAAA,qBAAA,CAAA;AAER,SAAS,aAAa,MAAwB,EAAA;AACnD,EAAO,OAAA,MAAA,CAAO,OAAQ,CAAA,MAAA,EAAQ,MAAM,CAAA,CAAA;AACtC;;;;"}
+{"version":3,"file":"escapeRegExp.js","sources":["../../src/utils/escapeRegExp.ts"],"sourcesContent":["const regExp = /[.*+?^${}()|[\\]\\\\]/g;\n\nexport function escapeRegExp(string: string): string {\n  return string.replace(regExp, \"\\\\$&\");\n}\n"],"names":[],"mappings":";;AAAA,MAAM,MAAS,GAAA,qBAAA;AAER,SAAS,aAAa,MAAwB,EAAA;AACnD,EAAO,OAAA,MAAA,CAAO,OAAQ,CAAA,MAAA,EAAQ,MAAM,CAAA;AACtC;;;;"}

package/cjs/utils/forwardCallbackProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"forwardCallbackProps.js","sources":["../../src/utils/forwardCallbackProps.ts"],"sourcesContent":["/*\n  When we clone a React element and inject props, if any of these are\n  callback props, make sure original callback props are also invoked.\n\n React.cloneElement(\n    element,\n    forwardCallbackProps(element.props, overrideProps)\n  )\n */\n\ntype Props = Record<string, unknown>;\n\nexport const forwardCallbackProps = <P1 extends Props, P2 extends Props>(\n  ownProps: P1,\n  overrideProps: P2\n): P1 & P2 => {\n  const props = Object.keys(ownProps).reduce<Props>(\n    (map, name) => {\n      const ownProp = ownProps[name];\n      const overrideProp = overrideProps[name];\n      if (typeof ownProp === \"function\" && typeof overrideProp === \"function\") {\n        map[name] = (...args: unknown[]) => {\n          ownProp(...args);\n          overrideProp(...args);\n        };\n      }\n      return map;\n    },\n    { ...overrideProps }\n  );\n\n  return props as P1 & P2;\n};\n"],"names":[],"mappings":";;AAYa,MAAA,oBAAA,GAAuB,CAClC,QAAA,EACA,aACY,KAAA;AACZ,EAAA,MAAM,KAAQ,GAAA,MAAA,CAAO,IAAK,CAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,IAClC,CAAC,KAAK,IAAS,KAAA;AACb,MAAM,MAAA,OAAA,GAAU,SAAS,IAAI,CAAA,CAAA;AAC7B,MAAM,MAAA,YAAA,GAAe,cAAc,IAAI,CAAA,CAAA;AACvC,MAAA,IAAI,OAAO,OAAA,KAAY,UAAc,IAAA,OAAO,iBAAiB,UAAY,EAAA;AACvE,QAAI,GAAA,CAAA,IAAI,CAAI,GAAA,CAAA,GAAI,IAAoB,KAAA;AAClC,UAAA,OAAA,CAAQ,GAAG,IAAI,CAAA,CAAA;AACf,UAAA,YAAA,CAAa,GAAG,IAAI,CAAA,CAAA;AAAA,SACtB,CAAA;AAAA,OACF;AACA,MAAO,OAAA,GAAA,CAAA;AAAA,KACT;AAAA,IACA,EAAE,GAAG,aAAc,EAAA;AAAA,GACrB,CAAA;AAEA,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"forwardCallbackProps.js","sources":["../../src/utils/forwardCallbackProps.ts"],"sourcesContent":["/*\n  When we clone a React element and inject props, if any of these are\n  callback props, make sure original callback props are also invoked.\n\n React.cloneElement(\n    element,\n    forwardCallbackProps(element.props, overrideProps)\n  )\n */\n\ntype Props = Record<string, unknown>;\n\nexport const forwardCallbackProps = <P1 extends Props, P2 extends Props>(\n  ownProps: P1,\n  overrideProps: P2\n): P1 & P2 => {\n  const props = Object.keys(ownProps).reduce<Props>(\n    (map, name) => {\n      const ownProp = ownProps[name];\n      const overrideProp = overrideProps[name];\n      if (typeof ownProp === \"function\" && typeof overrideProp === \"function\") {\n        map[name] = (...args: unknown[]) => {\n          ownProp(...args);\n          overrideProp(...args);\n        };\n      }\n      return map;\n    },\n    { ...overrideProps }\n  );\n\n  return props as P1 & P2;\n};\n"],"names":[],"mappings":";;AAYa,MAAA,oBAAA,GAAuB,CAClC,QAAA,EACA,aACY,KAAA;AACZ,EAAA,MAAM,KAAQ,GAAA,MAAA,CAAO,IAAK,CAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,IAClC,CAAC,KAAK,IAAS,KAAA;AACb,MAAM,MAAA,OAAA,GAAU,SAAS,IAAI,CAAA;AAC7B,MAAM,MAAA,YAAA,GAAe,cAAc,IAAI,CAAA;AACvC,MAAA,IAAI,OAAO,OAAA,KAAY,UAAc,IAAA,OAAO,iBAAiB,UAAY,EAAA;AACvE,QAAI,GAAA,CAAA,IAAI,CAAI,GAAA,CAAA,GAAI,IAAoB,KAAA;AAClC,UAAA,OAAA,CAAQ,GAAG,IAAI,CAAA;AACf,UAAA,YAAA,CAAa,GAAG,IAAI,CAAA;AAAA,SACtB;AAAA;AAEF,MAAO,OAAA,GAAA;AAAA,KACT;AAAA,IACA,EAAE,GAAG,aAAc;AAAA,GACrB;AAEA,EAAO,OAAA,KAAA;AACT;;;;"}

package/cjs/utils/isOverflowElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"isOverflowElement.js","sources":["../../src/utils/isOverflowElement.ts"],"sourcesContent":["// TODO this is very fragile\nexport const isOverflowElement = (element: HTMLElement | null) =>\n  element !== null &&\n  element.dataset.index === \"overflow\" &&\n  element.parentElement !== null &&\n  element.parentElement.classList.contains(\n    \"vuuOverflowContainer-wrapContainer-overflowed\"\n  );\n"],"names":[],"mappings":";;AACO,MAAM,iBAAoB,GAAA,CAAC,OAChC,KAAA,OAAA,KAAY,QACZ,OAAQ,CAAA,OAAA,CAAQ,KAAU,KAAA,UAAA,IAC1B,OAAQ,CAAA,aAAA,KAAkB,IAC1B,IAAA,OAAA,CAAQ,cAAc,SAAU,CAAA,QAAA;AAAA,EAC9B,+CAAA;AACF;;;;"}
+{"version":3,"file":"isOverflowElement.js","sources":["../../src/utils/isOverflowElement.ts"],"sourcesContent":["// TODO this is very fragile\nexport const isOverflowElement = (element: HTMLElement | null) =>\n  element !== null &&\n  element.dataset.index === \"overflow\" &&\n  element.parentElement !== null &&\n  element.parentElement.classList.contains(\n    \"vuuOverflowContainer-wrapContainer-overflowed\"\n  );\n"],"names":[],"mappings":";;AACO,MAAM,iBAAoB,GAAA,CAAC,OAChC,KAAA,OAAA,KAAY,QACZ,OAAQ,CAAA,OAAA,CAAQ,KAAU,KAAA,UAAA,IAC1B,OAAQ,CAAA,aAAA,KAAkB,IAC1B,IAAA,OAAA,CAAQ,cAAc,SAAU,CAAA,QAAA;AAAA,EAC9B;AACF;;;;"}