@vuu-ui/vuu-ui-controls 0.0.26

package/cjs/tabstrip/useKeyboardNavigation.js

@@ -0,0 +1,243 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var tabstripDomUtils = require('./tabstrip-dom-utils.js');
+
+const navigation = {
+  horizontal: {
+    [vuuUtils.Home]: "start",
+    [vuuUtils.End]: "end",
+    [vuuUtils.ArrowLeft]: "bwd",
+    [vuuUtils.ArrowRight]: "fwd"
+  },
+  vertical: {
+    [vuuUtils.Home]: "start",
+    [vuuUtils.End]: "end",
+    [vuuUtils.ArrowUp]: "bwd",
+    [vuuUtils.ArrowDown]: "fwd"
+  }
+};
+const isNavigationKey = (key, orientation = "horizontal") => navigation[orientation][key] !== void 0;
+const isMenuActivationKey = (key) => key === vuuUtils.ArrowDown;
+function nextItemIdx(count, direction, idx) {
+  if (direction === "start") {
+    return 0;
+  } else if (direction === "end") {
+    return count - 1;
+  } else if (direction === "bwd") {
+    if (idx > 0) {
+      return idx - 1;
+    } else {
+      return idx;
+    }
+  } else {
+    if (idx === null) {
+      return 0;
+    } else if (idx === count - 1) {
+      return idx;
+    } else {
+      return idx + 1;
+    }
+  }
+}
+const isNonWrappedElement = (element) => element !== null && !element.classList.contains("wrapped");
+const getElementByPosition = (container, index) => container ? container.querySelector(`[data-index="${index}"]`) : null;
+const useKeyboardNavigation = ({
+  containerRef,
+  defaultHighlightedIdx = -1,
+  highlightedIdx: highlightedIdxProp,
+  keyBoardActivation,
+  orientation,
+  selectedIndex: selectedTabIndex = 0
+}) => {
+  const manualActivation = keyBoardActivation === "manual";
+  const mouseClickPending = React.useRef(false);
+  const focusedRef = React.useRef(-1);
+  const [hasFocus, setHasFocus] = React.useState(false);
+  const [, forceRefresh] = React.useState({});
+  const [highlightedIdx, _setHighlightedIdx] = core.useControlled({
+    controlled: highlightedIdxProp,
+    default: defaultHighlightedIdx,
+    name: "UseKeyboardNavigation"
+  });
+  const setHighlightedIdx = React.useCallback(
+    (value) => {
+      _setHighlightedIdx(focusedRef.current = value);
+    },
+    [_setHighlightedIdx]
+  );
+  const keyboardNavigation = React.useRef(false);
+  const focusTab = React.useCallback(
+    (tabIndex, immediateFocus = false, withKeyboard, delay = 70) => {
+      setHighlightedIdx(tabIndex);
+      if (withKeyboard === true && !keyboardNavigation.current) {
+        keyboardNavigation.current = true;
+      }
+      const setFocus = () => {
+        const element = getElementByPosition(containerRef.current, tabIndex);
+        if (element) {
+          const focussableElement = vuuUtils.getFocusableElement(element);
+          focussableElement?.focus();
+        }
+      };
+      if (immediateFocus) {
+        setFocus();
+      } else {
+        setTimeout(setFocus, delay);
+      }
+    },
+    [containerRef, setHighlightedIdx]
+  );
+  const onFocus = (e) => {
+    if (focusedRef.current === -1) {
+      if (e.target.tabIndex === -1) ; else {
+        const index = tabstripDomUtils.getIndexOfEditedItem(containerRef.current);
+        if (index !== -1) {
+          requestAnimationFrame(() => {
+            setHighlightedIdx(index);
+          });
+        } else {
+          setTimeout(() => {
+            if (focusedRef.current === -1 && selectedTabIndex !== null) {
+              setHighlightedIdx(selectedTabIndex);
+            }
+          }, 200);
+        }
+      }
+    }
+  };
+  const getIndexCount = React.useCallback(
+    () => containerRef.current?.querySelectorAll(`[data-index]`).length ?? 0,
+    [containerRef]
+  );
+  const nextFocusableItemIdx = React.useCallback(
+    (direction = "fwd", idx) => {
+      const indexCount = getIndexCount();
+      const index = typeof idx === "number" ? idx : indexCount;
+      let nextIdx = nextItemIdx(indexCount, direction, index);
+      const nextDirection = direction === "start" ? "fwd" : direction === "end" ? "bwd" : direction;
+      while ((nextDirection === "fwd" && nextIdx < indexCount || nextDirection === "bwd" && nextIdx > 0) && !isNonWrappedElement(
+        getElementByPosition(containerRef.current, nextIdx)
+      )) {
+        const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);
+        if (newIdx === nextIdx) {
+          break;
+        } else {
+          nextIdx = newIdx;
+        }
+      }
+      return nextIdx;
+    },
+    [containerRef, getIndexCount]
+  );
+  const navigateChildItems = React.useCallback(
+    (e, forceFocusVisible = false) => {
+      const direction = navigation[orientation][e.key];
+      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
+      if (nextIdx !== highlightedIdx) {
+        const immediateFocus = true;
+        if (manualActivation) {
+          focusTab(nextIdx, immediateFocus);
+        }
+      } else if (forceFocusVisible) {
+        forceRefresh({});
+      }
+    },
+    [
+      highlightedIdx,
+      manualActivation,
+      nextFocusableItemIdx,
+      focusTab,
+      orientation
+    ]
+  );
+  const highlightedTabHasMenu = React.useCallback(() => {
+    const el = getElementByPosition(containerRef.current, highlightedIdx);
+    if (el) {
+      return el.querySelector(".vuuPopupMenu") != null;
+    }
+    return false;
+  }, [containerRef, highlightedIdx]);
+  const activateTabMenu = React.useCallback(() => {
+    const el = getElementByPosition(containerRef.current, highlightedIdx);
+    const menuEl = el?.querySelector(".vuuPopupMenu");
+    if (menuEl) {
+      vuuUtils.dispatchMouseEvent(menuEl, "click");
+    }
+    return false;
+  }, [containerRef, highlightedIdx]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {
+        e.preventDefault();
+        if (keyboardNavigation.current) {
+          navigateChildItems(e);
+        } else {
+          keyboardNavigation.current = true;
+          navigateChildItems(e, true);
+        }
+      } else if (isMenuActivationKey(e.key) && highlightedTabHasMenu()) {
+        activateTabMenu();
+      }
+    },
+    [
+      activateTabMenu,
+      getIndexCount,
+      highlightedTabHasMenu,
+      navigateChildItems,
+      orientation
+    ]
+  );
+  const handleItemClick = (_, tabIndex) => {
+    setHighlightedIdx(tabIndex);
+  };
+  const handleFocus = React.useCallback(() => {
+    if (!hasFocus) {
+      setHasFocus(true);
+      if (!mouseClickPending.current) {
+        keyboardNavigation.current = true;
+      } else {
+        mouseClickPending.current = false;
+      }
+    }
+  }, [hasFocus]);
+  const handleContainerMouseDown = React.useCallback(() => {
+    if (!hasFocus) {
+      mouseClickPending.current = true;
+    }
+    keyboardNavigation.current = false;
+  }, [hasFocus]);
+  const containerProps = {
+    onBlur: (e) => {
+      const sourceTarget = e.target.closest(".vuuTabstrip");
+      const destTarget = e.relatedTarget;
+      if (sourceTarget && !sourceTarget?.contains(destTarget)) {
+        setHighlightedIdx(-1);
+        setHasFocus(false);
+      }
+    },
+    onMouseDownCapture: handleContainerMouseDown,
+    onFocus: handleFocus,
+    onMouseLeave: () => {
+      keyboardNavigation.current = true;
+      setHighlightedIdx(-1);
+      mouseClickPending.current = false;
+    }
+  };
+  return {
+    containerProps,
+    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,
+    focusIsWithinComponent: hasFocus,
+    highlightedIdx,
+    focusTab,
+    onClick: handleItemClick,
+    onFocus,
+    onKeyDown: handleKeyDown,
+    setHighlightedIdx
+  };
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/cjs/tabstrip/useKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../src/tabstrip/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  dispatchMouseEvent,\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 isNonWrappedElement = (element: HTMLElement | null) =>\n  element !== null && !element.classList.contains(\"wrapped\");\n\nconst getElementByPosition = (container: HTMLElement | null, index: number) =>\n  container\n    ? (container.querySelector(`[data-index=\"${index}\"]`) as HTMLElement)\n    : null;\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n  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        const element = getElementByPosition(containerRef.current, tabIndex);\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 === -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          getElementByPosition(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 = getElementByPosition(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 = 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, 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","getFocusableElement","getIndexOfEditedItem","dispatchMouseEvent"],"mappings":"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"}

package/cjs/tabstrip/useSelection.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var React = require('react');
+
+const defaultSelectionKeys = ["Enter", " "];
+const isTabElement = (el) => el && el.matches('[class*="vuuTab "]');
+const useSelection = ({
+  defaultSelected,
+  highlightedIdx,
+  onSelectionChange,
+  selected: selectedProp
+}) => {
+  const [selected, setSelected, isControlled] = core.useControlled({
+    controlled: selectedProp,
+    default: defaultSelected ?? 0,
+    name: "Tabstrip",
+    state: "value"
+  });
+  const isSelectionEvent = React.useCallback(
+    (evt) => defaultSelectionKeys.includes(evt.key),
+    []
+  );
+  const selectItem = React.useCallback(
+    (tabIndex) => {
+      setSelected(tabIndex);
+      onSelectionChange?.(tabIndex);
+    },
+    [onSelectionChange, setSelected]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      const targetElement = e.target;
+      if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
+        e.stopPropagation();
+        e.preventDefault();
+        selectItem(highlightedIdx);
+      }
+    },
+    [isSelectionEvent, highlightedIdx, selected, selectItem]
+  );
+  const onClick = React.useCallback(
+    (e, tabIndex) => {
+      if (tabIndex !== selected) {
+        selectItem(tabIndex);
+      }
+    },
+    [selectItem, selected]
+  );
+  return {
+    activateTab: selectItem,
+    isControlled,
+    onClick,
+    onKeyDown: handleKeyDown,
+    selected
+  };
+};
+
+exports.useSelection = useSelection;
+//# sourceMappingURL=useSelection.js.map

package/cjs/tabstrip/useSelection.js.map

@@ -0,0 +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;;;;"}

package/cjs/tabstrip/useTabstrip.js

@@ -0,0 +1,261 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+require('../drag-drop/DragDropProvider.js');
+var useDragDrop = require('../drag-drop/useDragDrop.js');
+var TabMenuOptions = require('./TabMenuOptions.js');
+var tabstripDomUtils = require('./tabstrip-dom-utils.js');
+var useAnimatedSelectionThumb = require('./useAnimatedSelectionThumb.js');
+var useKeyboardNavigation = require('./useKeyboardNavigation.js');
+var useSelection = require('./useSelection.js');
+
+const editKeys = /* @__PURE__ */ new Set(["Enter", " "]);
+const isEditKey = (key) => editKeys.has(key);
+const getElementWithIndex = (container, index) => {
+  if (container) {
+    return container.querySelector(`[data-index="${index}"]`);
+  } else {
+    return null;
+  }
+};
+const useTabstrip = ({
+  activeTabIndex: activeTabIndexProp,
+  allowDragDrop,
+  animateSelectionThumb,
+  containerRef,
+  onActiveChange,
+  onAddTab,
+  onCloseTab,
+  onExitEditMode,
+  onMoveTab,
+  orientation,
+  keyBoardActivation
+}) => {
+  const lastSelection = React.useRef(activeTabIndexProp);
+  const {
+    focusTab: keyboardHookFocusTab,
+    highlightedIdx,
+    onClick: keyboardHookHandleClick,
+    onKeyDown: keyboardHookHandleKeyDown,
+    setHighlightedIdx: keyboardHookSetHighlightedIndex,
+    ...keyboardHook
+  } = useKeyboardNavigation.useKeyboardNavigation({
+    containerRef,
+    keyBoardActivation,
+    orientation,
+    selectedIndex: lastSelection.current
+  });
+  const {
+    activateTab: selectionHookActivateTab,
+    onClick: selectionHookHandleClick,
+    onKeyDown: selectionHookHandleKeyDown,
+    selected: selectionHookSelected
+  } = useSelection.useSelection({
+    highlightedIdx,
+    onSelectionChange: onActiveChange,
+    selected: activeTabIndexProp
+  });
+  lastSelection.current = selectionHookSelected;
+  const { containerStyle, resumeAnimation, suspendAnimation } = useAnimatedSelectionThumb.useAnimatedSelectionThumb(
+    containerRef,
+    animateSelectionThumb ? selectionHookSelected : -1,
+    orientation
+  );
+  const handleDrop = React.useCallback(
+    ({ fromIndex, toIndex }) => {
+      const { current: selected } = lastSelection;
+      console.log(
+        `useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`
+      );
+      onMoveTab?.(fromIndex, toIndex);
+      let nextSelectedTab = -1;
+      if (toIndex !== -1) {
+        if (selected === fromIndex) {
+          nextSelectedTab = toIndex;
+        } else if (fromIndex > selected && toIndex <= selected) {
+          nextSelectedTab = selected + 1;
+        } else if (fromIndex < selected && toIndex >= selected) {
+          nextSelectedTab = selected - 1;
+        }
+        if (nextSelectedTab !== -1) {
+          suspendAnimation();
+          selectionHookActivateTab(nextSelectedTab);
+          requestAnimationFrame(resumeAnimation);
+        }
+        keyboardHookFocusTab(toIndex, false, false, 350);
+      }
+    },
+    [
+      keyboardHookFocusTab,
+      onMoveTab,
+      resumeAnimation,
+      selectionHookActivateTab,
+      suspendAnimation
+    ]
+  );
+  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDrop.useDragDrop({
+    allowDragDrop,
+    containerRef,
+    // this is for useDragDropNext
+    draggableClassName: `tabstrip-${orientation}`,
+    // extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".vuuOverflowContainer-item"
+  });
+  const handleExitEditMode = React.useCallback(
+    (originalValue, editedValue, allowDeactivation, tabIndex) => {
+      console.log(
+        `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
+      );
+      onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);
+      if (!allowDeactivation) {
+        keyboardHookFocusTab(tabIndex, false, true);
+      }
+    },
+    [keyboardHookFocusTab, onExitEditMode]
+  );
+  const handleClick = React.useCallback(
+    (evt, tabIndex) => {
+      keyboardHookHandleClick(evt, tabIndex);
+      selectionHookHandleClick(evt, tabIndex);
+    },
+    // [dragDropHook.isDragging, keyboardHook, selectionHook]
+    [keyboardHookHandleClick, selectionHookHandleClick]
+  );
+  const getEditableLabel = React.useCallback(
+    (tabIndex = highlightedIdx) => {
+      const targetEl = getElementWithIndex(containerRef.current, tabIndex);
+      if (targetEl) {
+        return targetEl.querySelector(".vuuEditableLabel");
+      }
+    },
+    [containerRef, highlightedIdx]
+  );
+  const tabInEditMode = React.useCallback(
+    (tabIndex = highlightedIdx) => {
+      const editableLabel = getEditableLabel(tabIndex);
+      if (editableLabel) {
+        return editableLabel.classList.contains("vuuEditableLabel-editing");
+      }
+      return false;
+    },
+    [getEditableLabel, highlightedIdx]
+  );
+  const editTab = React.useCallback(
+    (tabIndex = highlightedIdx) => {
+      const editableLabelEl = getEditableLabel(tabIndex);
+      if (editableLabelEl) {
+        vuuUtils.dispatchMouseEvent(editableLabelEl, "dblclick");
+      }
+    },
+    [getEditableLabel, highlightedIdx]
+  );
+  const handleKeyDown = React.useCallback(
+    (evt) => {
+      keyboardHookHandleKeyDown(evt);
+      if (!evt.defaultPrevented) {
+        selectionHookHandleKeyDown(evt);
+      }
+      if (!evt.defaultPrevented && isEditKey(evt.key)) {
+        editTab();
+      }
+    },
+    [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]
+  );
+  const handleCloseTabFromMenu = React.useCallback(
+    (tabIndex) => {
+      const selectedTabIndex = tabstripDomUtils.getIndexOfSelectedTab(containerRef.current);
+      const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
+      suspendAnimation();
+      onCloseTab?.(tabIndex, newActiveTabIndex);
+      setTimeout(() => {
+        resumeAnimation();
+      }, 200);
+      return true;
+    },
+    [containerRef, onCloseTab, resumeAnimation, suspendAnimation]
+  );
+  const handleRenameTabFromMenu = React.useCallback(
+    (tabIndex) => {
+      editTab(tabIndex);
+      return true;
+    },
+    [editTab]
+  );
+  const handleTabMenuAction = React.useCallback(
+    (action) => {
+      if (TabMenuOptions.isTabMenuOptions(action.options)) {
+        switch (action.menuId) {
+          case "close-tab":
+            return handleCloseTabFromMenu(action.options.tabIndex);
+          case "rename-tab":
+            return handleRenameTabFromMenu(action.options.tabIndex);
+          default:
+            console.log(`tab menu action ${action.menuId}`);
+        }
+      }
+      return false;
+    },
+    [handleCloseTabFromMenu, handleRenameTabFromMenu]
+  );
+  const handleTabMenuClose = React.useCallback(() => {
+    if (!tabInEditMode()) {
+      keyboardHookFocusTab(highlightedIdx);
+    } else {
+      keyboardHookSetHighlightedIndex(highlightedIdx);
+    }
+  }, [
+    highlightedIdx,
+    keyboardHookFocusTab,
+    keyboardHookSetHighlightedIndex,
+    tabInEditMode
+  ]);
+  const onSwitchWrappedItemIntoView = React.useCallback(
+    (item) => {
+      const index = parseInt(item.index);
+      if (!isNaN(index)) {
+        selectionHookActivateTab(index);
+      }
+    },
+    [selectionHookActivateTab]
+  );
+  const navigationProps = {
+    onFocus: keyboardHook.onFocus,
+    onKeyDown: handleKeyDown
+  };
+  const handleAddTabClick = React.useCallback(() => {
+    onAddTab?.();
+    requestAnimationFrame(() => {
+      const selectedTabIndex = tabstripDomUtils.getIndexOfSelectedTab(containerRef.current);
+      if (selectedTabIndex !== -1) {
+        keyboardHookFocusTab(selectedTabIndex);
+      }
+    });
+  }, [containerRef, keyboardHookFocusTab, onAddTab]);
+  const tabProps = {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onExitEditMode: handleExitEditMode,
+    onMenuAction: handleTabMenuAction,
+    onMenuClose: handleTabMenuClose,
+    onMouseDown: dragDropHookHandleMouseDown
+  };
+  return {
+    activeTabIndex: selectionHookSelected,
+    containerStyle,
+    focusVisible: keyboardHook.focusVisible,
+    containerProps: {
+      ...keyboardHook.containerProps,
+      onSwitchWrappedItemIntoView
+    },
+    navigationProps,
+    onClickAddTab: handleAddTabClick,
+    tabProps,
+    ...dragDropHook
+  };
+};
+
+exports.useTabstrip = useTabstrip;
+//# sourceMappingURL=useTabstrip.js.map

package/cjs/tabstrip/useTabstrip.js.map

@@ -0,0 +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 { dispatchMouseEvent, orientationType } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\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\nconst getElementWithIndex = (container: HTMLElement | null, index: number) => {\n  if (container) {\n    return container.querySelector(`[data-index=\"${index}\"]`) as HTMLElement;\n  } else {\n    return null;\n  }\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\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      console.log(\n        `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`\n      );\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 getEditableLabel = useCallback(\n    (tabIndex = highlightedIdx) => {\n      const targetEl = getElementWithIndex(containerRef.current, tabIndex);\n      if (targetEl) {\n        return targetEl.querySelector(\".vuuEditableLabel\") as HTMLElement;\n      }\n    },\n    [containerRef, highlightedIdx]\n  );\n\n  const tabInEditMode = useCallback(\n    (tabIndex = highlightedIdx) => {\n      const editableLabel = getEditableLabel(tabIndex);\n      if (editableLabel) {\n        return editableLabel.classList.contains(\"vuuEditableLabel-editing\");\n      }\n      return false;\n    },\n    [getEditableLabel, highlightedIdx]\n  );\n\n  const editTab = useCallback(\n    (tabIndex = highlightedIdx) => {\n      const editableLabelEl = getEditableLabel(tabIndex);\n      if (editableLabelEl) {\n        dispatchMouseEvent(editableLabelEl, \"dblclick\");\n      }\n    },\n    [getEditableLabel, 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 (!tabInEditMode()) {\n      keyboardHookFocusTab(highlightedIdx);\n    } else {\n      keyboardHookSetHighlightedIndex(highlightedIdx);\n    }\n  }, [\n    highlightedIdx,\n    keyboardHookFocusTab,\n    keyboardHookSetHighlightedIndex,\n    tabInEditMode,\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    containerStyle,\n    focusVisible: keyboardHook.focusVisible,\n    containerProps: {\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    navigationProps,\n    onClickAddTab: handleAddTabClick,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":["useRef","useKeyboardNavigation","useSelection","useAnimatedSelectionThumb","useCallback","useDragDrop","dispatchMouseEvent","getIndexOfSelectedTab","isTabMenuOptions"],"mappings":"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"}

package/cjs/toolbar/Toolbar.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var toolbarCss = ".vuuToolbar {\n    --toolbar-height: var(--vuuToolbar-height, 36px);\n    --toolbar-item-height: var(--vuuToolbarItem-height, 100%);\n    --vuuOverflowContainer-background: var(--vuuToolbar-background);\n    --vuuOverflowContainer-borderColor: var(--vuuToolbar-borderColor);\n    --vuuOverflowContainer-borderStyle: var(--vuuToolbar-borderStyle);\n    --vuuOverflowContainer-borderWidth: var(--vuuToolbar-borderWidth);\n    height: var(--toolbar-height);\n}\n\n.vuuToolbar-alignCenter {\n    --vuuOverflowContainer-justifyContent: center;\n}\n\n.vuuToolbar-alignEnd {\n    --vuuOverflowContainer-justifyContent: flex-end;\n}\n\n/* .vuuToolbarItem {\n    height: var(--toolbar-item-height);\n} */\n\n.vuuToolbar-withSeparators .vuuOverflowContainer-item:not(:first-child):before {\n    content: '';\n    position: absolute;\n    left: calc(-1 * var(--overflow-item-gap));\n    top: calc((var(--toolbar-height) - var(--toolbar-item-height)) /2);\n    width: 1px;\n    /* height: calc(var(--basket-selector-height) - 16px); */\n    height: var(--toolbar-item-height);\n    background-color: var(--vuu-color-gray-05);\n}\n\n\n.vuuToolbarItem.vuuFocusVisible {\n    outline-color: var(--vuuToolbarItem-outlineColor, var(--salt-focused-outlineColor));\n    outline-style: dashed;\n    outline-width: 1px;\n    outline-offset: 0px;\n  }\n\n\n  .vuuToolbarItem:focus,\n  .vuuToolbarItem:focus-visible {\n\n    outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));\n    outline-style: dashed;\n    outline-width: 1px;\n    outline-offset: 0px;\n\n}\n\n\n  ";
+
+module.exports = toolbarCss;
+//# sourceMappingURL=Toolbar.css.js.map

package/cjs/toolbar/Toolbar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}