@salt-ds/lab 1.0.0-alpha.8 → 1.0.0-alpha.81

package/dist-es/tabs/useActivationIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActivationIndicator.js","sources":["../src/tabs/useActivationIndicator.ts"],"sourcesContent":["import {\n  type RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type orientationType,\n  useResizeObserver,\n  WidthOnly,\n} from \"../responsive\";\n\ntype activationIndicatorStyles = {\n  height?: number;\n  left?: number;\n  top?: number;\n  width?: number;\n  hasChanged?: boolean;\n};\n\nconst MEASUREMENTS: Record<\n  orientationType,\n  { pos: \"left\" | \"top\"; size: \"width\" | \"height\" }\n> = {\n  horizontal: {\n    pos: \"left\",\n    size: \"width\",\n  },\n  vertical: {\n    pos: \"top\",\n    size: \"height\",\n  },\n};\n\n// Overflow can affect tab positions, so we recalculate when it changes\nexport function useActivationIndicator({\n  rootRef,\n  tabId,\n  orientation,\n}: {\n  rootRef: RefObject<HTMLDivElement | null>;\n  tabId?: string | null;\n  orientation: orientationType;\n}): activationIndicatorStyles {\n  const [style, setStyle] = useState<activationIndicatorStyles>({\n    left: 0,\n    width: 0,\n  });\n  // Keep style in a ref, so style is not a dependency for createIndicatorStyle, which in turn\n  // means our useEffect below will re-run only when the tab changes, not after every style change\n  // as well.\n\n  const styleRef = useRef(style);\n\n  const getTabPos = useCallback(() => {\n    const { pos, size } = MEASUREMENTS[orientation];\n    return [pos, size];\n  }, [orientation]);\n\n  const createIndicatorStyle = useCallback(\n    (tabElement: HTMLElement | null): activationIndicatorStyles => {\n      if (tabElement) {\n        const tabRect = tabElement.getBoundingClientRect();\n        if (rootRef.current && tabRect) {\n          const rootRect = rootRef.current.getBoundingClientRect();\n          const [pos, size] = getTabPos();\n          const { [pos]: existingPos, [size]: existingSize } = styleRef.current;\n          const newPos = tabRect[pos] - rootRect[pos];\n          const newSize = tabRect[size];\n\n          return {\n            [pos]: newPos,\n            [size]: newSize,\n            hasChanged: newPos !== existingPos || newSize !== existingSize,\n          };\n        }\n      }\n      return {};\n    },\n    [rootRef, getTabPos],\n  );\n\n  const onResize = useCallback(() => {\n    requestAnimationFrame(() => {\n      if (tabId) {\n        const tabEl = document.getElementById(tabId);\n        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n        if (hasChanged) {\n          setStyle(newStyle);\n        }\n      }\n    });\n  }, [createIndicatorStyle, tabId]);\n\n  useEffect(() => {\n    if (tabId) {\n      // The timeout is employed in case selectedTab has been selected from\n      // overflow menu. In this case, the tab is only restored to visibility\n      // in the render cycle after selection.\n      setTimeout(() => {\n        const tabEl = document.getElementById(tabId);\n        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n        if (hasChanged) {\n          styleRef.current = newStyle;\n          setStyle(newStyle);\n        }\n      }, 50);\n    }\n  }, [createIndicatorStyle, tabId]);\n\n  useResizeObserver(rootRef, WidthOnly, onResize);\n\n  return style;\n}\n"],"names":[],"mappings":"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"}

package/dist-es/tabs/useEditableItem.js

@@ -0,0 +1,55 @@
+import { useControlled } from '@salt-ds/core';
+import { useCallback } from 'react';
+
+const editKeys = /* @__PURE__ */ new Set(["Enter", " "]);
+const isEditKey = (key) => editKeys.has(key);
+const useEditableItem = ({
+  editing: editingProp,
+  highlightedIdx,
+  indexPositions,
+  onEnterEditMode: onEnterEditModeProp,
+  onExitEditMode: onExitEditModeProp
+}) => {
+  const [editing, setEditing] = useControlled({
+    controlled: editingProp,
+    default: false,
+    name: "useEditableItem",
+    state: "editing"
+  });
+  const onEnterEditMode = useCallback(() => {
+    setEditing(true);
+    onEnterEditModeProp == null ? void 0 : onEnterEditModeProp();
+  }, [onEnterEditModeProp]);
+  const onExitEditMode = (originalValue, editedValue, allowDeactivation, tabIndex) => {
+    setEditing(false);
+    console.log("exit edit mode");
+    onExitEditModeProp == null ? void 0 : onExitEditModeProp(
+      originalValue,
+      editedValue,
+      allowDeactivation,
+      tabIndex
+    );
+  };
+  const onKeyDown = useCallback(
+    (evt) => {
+      var _a, _b;
+      console.log(`useEditableItem onKeyDown ${highlightedIdx}`, {
+        editable: (_a = indexPositions[highlightedIdx]) == null ? void 0 : _a.editable
+      });
+      if (isEditKey(evt.key) && ((_b = indexPositions[highlightedIdx]) == null ? void 0 : _b.editable)) {
+        onEnterEditMode();
+      }
+    },
+    [onEnterEditMode, highlightedIdx, indexPositions]
+  );
+  return {
+    editing,
+    onKeyDown,
+    onEnterEditMode,
+    onExitEditMode,
+    setEditing
+  };
+};
+
+export { useEditableItem };
+//# sourceMappingURL=useEditableItem.js.map

package/dist-es/tabs/useEditableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableItem.js","sources":["../src/tabs/useEditableItem.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback } from \"react\";\nimport type { OverflowItem } from \"../responsive\";\n\nconst editKeys = new Set([\"Enter\", \" \"]);\nconst isEditKey = (key: string) => editKeys.has(key);\n\nexport type ExitEditModeHandler = (\n  originalValue: string,\n  editedValue: string,\n  allowDeactivation: boolean,\n  tabIndex: number,\n) => void;\n\nexport interface Editable {\n  editing: boolean;\n  onEnterEditMode: () => void;\n  onExitEditMode: ExitEditModeHandler;\n  setEditing: (value: boolean) => void;\n}\nexport interface EditableItemHookProps extends Partial<Editable> {\n  highlightedIdx: number;\n  indexPositions: OverflowItem[];\n}\n\nexport interface EditableItemHookResult extends Editable {\n  onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useEditableItem = ({\n  editing: editingProp,\n  highlightedIdx,\n  indexPositions,\n  onEnterEditMode: onEnterEditModeProp,\n  onExitEditMode: onExitEditModeProp,\n}: EditableItemHookProps): EditableItemHookResult => {\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: false,\n    name: \"useEditableItem\",\n    state: \"editing\",\n  });\n\n  const onEnterEditMode = useCallback(() => {\n    setEditing(true);\n    onEnterEditModeProp?.();\n  }, [onEnterEditModeProp]);\n\n  const onExitEditMode = (\n    originalValue: string,\n    editedValue: string,\n    allowDeactivation: boolean,\n    tabIndex: number,\n  ) => {\n    setEditing(false);\n    console.log(\"exit edit mode\");\n    onExitEditModeProp?.(\n      originalValue,\n      editedValue,\n      allowDeactivation,\n      tabIndex,\n    );\n  };\n\n  const onKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      console.log(`useEditableItem onKeyDown ${highlightedIdx}`, {\n        editable: indexPositions[highlightedIdx]?.editable,\n      });\n      if (isEditKey(evt.key) && indexPositions[highlightedIdx]?.editable) {\n        onEnterEditMode();\n      }\n    },\n    [onEnterEditMode, highlightedIdx, indexPositions],\n  );\n\n  return {\n    editing,\n    onKeyDown,\n    onEnterEditMode,\n    onExitEditMode,\n    setEditing,\n  };\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,2BAAW,IAAI,GAAA,CAAI,CAAC,OAAA,EAAS,GAAG,CAAC,CAAA;AACvC,MAAM,SAAA,GAAY,CAAC,GAAA,KAAgB,QAAA,CAAS,IAAI,GAAG,CAAA;AAwB5C,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA,EAAS,WAAA;AAAA,EACT,cAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA,EAAiB,mBAAA;AAAA,EACjB,cAAA,EAAgB;AAClB,CAAA,KAAqD;AACnD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,aAAA,CAAc;AAAA,IAC1C,UAAA,EAAY,WAAA;AAAA,IACZ,OAAA,EAAS,KAAA;AAAA,IACT,IAAA,EAAM,iBAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,mBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,mBAAA,EAAA;AAAA,EACF,CAAA,EAAG,CAAC,mBAAmB,CAAC,CAAA;AAExB,EAAA,MAAM,cAAA,GAAiB,CACrB,aAAA,EACA,WAAA,EACA,mBACA,QAAA,KACG;AACH,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA;AAC5B,IAAA,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA;AAAA,MACE,aAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA;AAAA,KAAA;AAAA,EAEJ,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,WAAA;AAAA,IAChB,CAAC,GAAA,KAAuB;AAjE5B,MAAA,IAAA,EAAA,EAAA,EAAA;AAkEM,MAAA,OAAA,CAAQ,GAAA,CAAI,CAAA,0BAAA,EAA6B,cAAc,CAAA,CAAA,EAAI;AAAA,QACzD,QAAA,EAAA,CAAU,EAAA,GAAA,cAAA,CAAe,cAAc,CAAA,KAA7B,IAAA,GAAA,MAAA,GAAA,EAAA,CAAgC;AAAA,OAC3C,CAAA;AACD,MAAA,IAAI,SAAA,CAAU,IAAI,GAAG,CAAA,KAAA,CAAK,oBAAe,cAAc,CAAA,KAA7B,mBAAgC,QAAA,CAAA,EAAU;AAClE,QAAA,eAAA,EAAgB;AAAA,MAClB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,eAAA,EAAiB,cAAA,EAAgB,cAAc;AAAA,GAClD;AAEA,EAAA,OAAO;AAAA,IACL,OAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-es/tabs/useItemsWithIds.js

@@ -0,0 +1,43 @@
+import { useCallback, Children, isValidElement, cloneElement, createElement, useMemo } from 'react';
+import { TabPanel } from './TabPanel.js';
+
+const useItemsWithIds = (children, id = "root") => {
+  const normalizeItems = useCallback(
+    (items) => {
+      const sourceMap2 = {};
+      const tabDescriptors = Children.toArray(items).filter(isValidElement).map((child, index) => {
+        const {
+          "data-label": dataLabel = `Tab ${index + 1}`,
+          enableClose: closeable,
+          label = dataLabel
+        } = child.props;
+        const tabId = `${id}-${index}`;
+        const tabPanelId = `${tabId}-panel`;
+        const props = {
+          "aria-labelledby": tabId,
+          id: tabPanelId,
+          key: tabId
+        };
+        const element = child.type === TabPanel ? cloneElement(child, props) : /* @__PURE__ */ createElement(TabPanel, { ...props, label, key: tabId }, child);
+        const tab = {
+          closeable,
+          element,
+          id: tabId,
+          label
+        };
+        sourceMap2[tabId] = tab;
+        return tab;
+      });
+      return [tabDescriptors, sourceMap2];
+    },
+    [id]
+  );
+  const [sourceWithIds, sourceMap] = useMemo(() => {
+    return normalizeItems(children);
+  }, [normalizeItems, children]);
+  const itemById = useCallback((id2) => sourceMap[id2], [sourceMap]);
+  return [sourceWithIds, itemById];
+};
+
+export { useItemsWithIds };
+//# sourceMappingURL=useItemsWithIds.js.map

package/dist-es/tabs/useItemsWithIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useItemsWithIds.js","sources":["../src/tabs/useItemsWithIds.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { TabPanel } from \"./TabPanel\";\nimport type { TabDescriptor } from \"./TabsTypes\";\n\ntype TabMap = { [key: string]: TabDescriptor };\n\nexport const useItemsWithIds = (\n  children: ReactNode,\n  id = \"root\",\n): [TabDescriptor[], (id: string) => TabDescriptor] => {\n  const normalizeItems = useCallback(\n    (items: ReactNode): [TabDescriptor[], TabMap] => {\n      const sourceMap: TabMap = {};\n      const tabDescriptors: TabDescriptor[] = Children.toArray(items)\n        .filter(isValidElement)\n        .map((child: ReactElement, index: number) => {\n          const {\n            \"data-label\": dataLabel = `Tab ${index + 1}`,\n            enableClose: closeable,\n            label = dataLabel,\n          } = child.props;\n          const tabId = `${id}-${index}`;\n          const tabPanelId = `${tabId}-panel`;\n          const props = {\n            \"aria-labelledby\": tabId,\n            id: tabPanelId,\n            key: tabId,\n          };\n          const element: JSX.Element | undefined =\n            child.type === TabPanel ? (\n              cloneElement(child, props)\n            ) : (\n              <TabPanel {...props} label={label} key={tabId}>\n                {child}\n              </TabPanel>\n            );\n          const tab: TabDescriptor = {\n            closeable,\n            element,\n            id: tabId,\n            label,\n          };\n          sourceMap[tabId] = tab;\n          return tab;\n        });\n      return [tabDescriptors, sourceMap];\n    },\n    [id],\n  );\n\n  const [sourceWithIds, sourceMap] = useMemo(() => {\n    return normalizeItems(children);\n  }, [normalizeItems, children]);\n\n  const itemById = useCallback((id: string) => sourceMap[id], [sourceMap]);\n\n  return [sourceWithIds, itemById];\n};\n"],"names":["sourceMap","id"],"mappings":";;;AAcO,MAAM,eAAA,GAAkB,CAC7B,QAAA,EACA,EAAA,GAAK,MAAA,KACgD;AACrD,EAAA,MAAM,cAAA,GAAiB,WAAA;AAAA,IACrB,CAAC,KAAA,KAAgD;AAC/C,MAAA,MAAMA,aAAoB,EAAC;AAC3B,MAAA,MAAM,cAAA,GAAkC,QAAA,CAAS,OAAA,CAAQ,KAAK,CAAA,CAC3D,MAAA,CAAO,cAAc,CAAA,CACrB,GAAA,CAAI,CAAC,KAAA,EAAqB,KAAA,KAAkB;AAC3C,QAAA,MAAM;AAAA,UACJ,YAAA,EAAc,SAAA,GAAY,CAAA,IAAA,EAAO,KAAA,GAAQ,CAAC,CAAA,CAAA;AAAA,UAC1C,WAAA,EAAa,SAAA;AAAA,UACb,KAAA,GAAQ;AAAA,YACN,KAAA,CAAM,KAAA;AACV,QAAA,MAAM,KAAA,GAAQ,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAC5B,QAAA,MAAM,UAAA,GAAa,GAAG,KAAK,CAAA,MAAA,CAAA;AAC3B,QAAA,MAAM,KAAA,GAAQ;AAAA,UACZ,iBAAA,EAAmB,KAAA;AAAA,UACnB,EAAA,EAAI,UAAA;AAAA,UACJ,GAAA,EAAK;AAAA,SACP;AACA,QAAA,MAAM,OAAA,GACJ,KAAA,CAAM,IAAA,KAAS,QAAA,GACb,aAAa,KAAA,EAAO,KAAK,CAAA,mBAEzB,aAAA,CAAC,YAAU,GAAG,KAAA,EAAO,KAAA,EAAc,GAAA,EAAK,SACrC,KACH,CAAA;AAEJ,QAAA,MAAM,GAAA,GAAqB;AAAA,UACzB,SAAA;AAAA,UACA,OAAA;AAAA,UACA,EAAA,EAAI,KAAA;AAAA,UACJ;AAAA,SACF;AACA,QAAAA,UAAAA,CAAU,KAAK,CAAA,GAAI,GAAA;AACnB,QAAA,OAAO,GAAA;AAAA,MACT,CAAC,CAAA;AACH,MAAA,OAAO,CAAC,gBAAgBA,UAAS,CAAA;AAAA,IACnC,CAAA;AAAA,IACA,CAAC,EAAE;AAAA,GACL;AAEA,EAAA,MAAM,CAAC,aAAA,EAAe,SAAS,CAAA,GAAI,QAAQ,MAAM;AAC/C,IAAA,OAAO,eAAe,QAAQ,CAAA;AAAA,EAChC,CAAA,EAAG,CAAC,cAAA,EAAgB,QAAQ,CAAC,CAAA;AAE7B,EAAA,MAAM,QAAA,GAAW,YAAY,CAACC,GAAAA,KAAe,UAAUA,GAAE,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEvE,EAAA,OAAO,CAAC,eAAe,QAAQ,CAAA;AACjC;;;;"}

package/dist-es/tabs/useKeyboardNavigation.js

@@ -0,0 +1,214 @@
+import { useControlled, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useRef, useState, useCallback } from 'react';
+import '../common-hooks/collectionProvider.js';
+import { ArrowDown, ArrowUp, End, Home, ArrowRight, ArrowLeft } from '../common-hooks/keyUtils.js';
+import 'react/jsx-runtime';
+import '../responsive/useResizeObserver.js';
+
+const navigation = {
+  horizontal: {
+    [Home]: "start",
+    [End]: "end",
+    [ArrowLeft]: "bwd",
+    [ArrowRight]: "fwd"
+  },
+  vertical: {
+    [Home]: "start",
+    [End]: "end",
+    [ArrowUp]: "bwd",
+    [ArrowDown]: "fwd"
+  }
+};
+const isNavigationKey = (key, orientation = "horizontal") => navigation[orientation][key] !== void 0;
+function nextItemIdx(count, direction, idx) {
+  if (direction === "start") {
+    return 0;
+  }
+  if (direction === "end") {
+    return count - 1;
+  }
+  if (direction === "bwd") {
+    if (idx > 0) {
+      return idx - 1;
+    }
+    return idx;
+  }
+  if (idx === null) {
+    return 0;
+  }
+  if (idx === count - 1) {
+    return idx;
+  }
+  return idx + 1;
+}
+const isFocusable = (item) => !item.overflowed;
+const getFocusableElement = (el) => el ? el.hasAttribute("tabindex") ? el : el.querySelector("[tabindex]") : null;
+const useKeyboardNavigation = ({
+  defaultHighlightedIdx = -1,
+  highlightedIdx: highlightedIdxProp,
+  indexPositions,
+  keyBoardActivation,
+  orientation,
+  selectedIndex: selectedTabIndex = 0
+}) => {
+  const manualActivation = keyBoardActivation === "manual";
+  const mouseClickPending = useRef(false);
+  const focusedRef = useRef(-1);
+  const [hasFocus, setHasFocus] = useState(false);
+  const [, forceRefresh] = useState({});
+  const [highlightedIdx, _setHighlightedIdx] = useControlled({
+    controlled: highlightedIdxProp,
+    default: defaultHighlightedIdx,
+    name: "UseKeyboardNavigation"
+  });
+  const setHighlightedIdx = useCallback((value) => {
+    focusedRef.current = value;
+    _setHighlightedIdx(value);
+  }, []);
+  const keyboardNavigation = useRef(false);
+  const focusTab = useCallback(
+    (tabIndex, immediateFocus = false, withKeyboard) => {
+      setHighlightedIdx(tabIndex);
+      if (withKeyboard === true && !keyboardNavigation.current) {
+        keyboardNavigation.current = true;
+      }
+      const setFocus = () => {
+        const item = indexPositions.find((i) => i.index === tabIndex);
+        if (item) {
+          const focussableElement = getFocusableElement(
+            document.getElementById(item.id)
+          );
+          focussableElement == null ? void 0 : focussableElement.focus();
+        }
+      };
+      if (immediateFocus) {
+        setFocus();
+      } else {
+        setTimeout(setFocus, 70);
+      }
+    },
+    [indexPositions, setHighlightedIdx]
+  );
+  const onFocus = (e) => {
+    if (focusedRef.current === -1) {
+      if (e.target.tabIndex === -1) ; else {
+        setTimeout(() => {
+          if (focusedRef.current === -1 && selectedTabIndex !== null) {
+            setHighlightedIdx(selectedTabIndex);
+          }
+        }, 200);
+      }
+    }
+  };
+  const nextFocusableItemIdx = useCallback(
+    (direction = "fwd", idx = direction === "fwd" ? -1 : indexPositions.length) => {
+      let nextIdx = nextItemIdx(indexPositions.length, direction, idx);
+      const nextDirection = direction === "start" ? "fwd" : direction === "end" ? "bwd" : direction;
+      while ((nextDirection === "fwd" && nextIdx < indexPositions.length || nextDirection === "bwd" && nextIdx > 0) && !isFocusable(indexPositions[nextIdx])) {
+        const newIdx = nextItemIdx(
+          indexPositions.length,
+          nextDirection,
+          nextIdx
+        );
+        if (newIdx === nextIdx) {
+          break;
+        }
+        nextIdx = newIdx;
+      }
+      return nextIdx;
+    },
+    [indexPositions]
+  );
+  const navigateChildItems = 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 handleKeyDown = useCallback(
+    (e) => {
+      if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {
+        e.preventDefault();
+        if (keyboardNavigation.current) {
+          navigateChildItems(e);
+        } else {
+          keyboardNavigation.current = true;
+          navigateChildItems(e, true);
+        }
+      }
+    },
+    [indexPositions, navigateChildItems, orientation]
+  );
+  const handleItemClick = (_, tabIndex) => {
+    setHighlightedIdx(tabIndex);
+  };
+  const handleFocus = () => {
+    if (!hasFocus) {
+      setHasFocus(true);
+      if (!mouseClickPending.current) {
+        keyboardNavigation.current = true;
+      } else {
+        mouseClickPending.current = false;
+      }
+    }
+  };
+  const handleContainerMouseDown = useCallback(
+    (evt) => {
+      if (!hasFocus) {
+        mouseClickPending.current = true;
+      }
+      keyboardNavigation.current = false;
+    },
+    [hasFocus]
+  );
+  const containerProps = {
+    onBlur: (e) => {
+      const sourceTarget = e.target.closest(".saltTabstrip");
+      const destTarget = e.relatedTarget;
+      if (sourceTarget && !(sourceTarget == null ? void 0 : sourceTarget.contains(destTarget))) {
+        setHighlightedIdx(-1);
+        setHasFocus(false);
+      }
+    },
+    onMouseDownCapture: handleContainerMouseDown,
+    onFocus: handleFocus,
+    onMouseLeave: () => {
+      keyboardNavigation.current = true;
+      setHighlightedIdx(-1);
+      mouseClickPending.current = false;
+    }
+  };
+  useIsomorphicLayoutEffect(() => {
+    if (hasFocus && selectedTabIndex !== void 0 && selectedTabIndex !== null) {
+      focusTab(selectedTabIndex);
+    }
+  }, [focusTab, hasFocus, selectedTabIndex]);
+  return {
+    containerProps,
+    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,
+    focusIsWithinComponent: hasFocus,
+    highlightedIdx,
+    focusTab,
+    onClick: handleItemClick,
+    onFocus,
+    onKeyDown: handleKeyDown
+  };
+};
+
+export { useKeyboardNavigation };
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist-es/tabs/useKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/tabs/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type FocusEvent,\n  type FocusEventHandler,\n  type KeyboardEvent,\n  type MouseEvent,\n  type MouseEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  End,\n  Home,\n} from \"../common-hooks\";\nimport type { OverflowItem } from \"../responsive\";\n\ntype orientationType = \"horizontal\" | \"vertical\";\ntype directionType = \"bwd\" | \"fwd\" | \"start\" | \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n  horizontal: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowLeft]: \"bwd\",\n    [ArrowRight]: \"fwd\",\n  } as directionMap,\n  vertical: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowUp]: \"bwd\",\n    [ArrowDown]: \"fwd\",\n  } as directionMap,\n};\n\nconst isNavigationKey = (\n  key: string,\n  orientation: orientationType = \"horizontal\",\n) => navigation[orientation][key] !== undefined;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n  if (direction === \"start\") {\n    return 0;\n  }\n  if (direction === \"end\") {\n    return count - 1;\n  }\n  if (direction === \"bwd\") {\n    if (idx > 0) {\n      return idx - 1;\n    }\n    return idx;\n  }\n  if (idx === null) {\n    return 0;\n  }\n  if (idx === count - 1) {\n    return idx;\n  }\n  return idx + 1;\n}\n\nconst isFocusable = (item: OverflowItem) => !item.overflowed;\nconst getFocusableElement = (el: HTMLElement | null) =>\n  el\n    ? el.hasAttribute(\"tabindex\")\n      ? el\n      : (el.querySelector(\"[tabindex]\") as HTMLElement)\n    : null;\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  indexPositions: OverflowItem[];\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  orientation: orientationType;\n  selectedIndex: number | null;\n}\n\ninterface TabstripNavigationHookResult {\n  containerProps: ContainerNavigationProps;\n  highlightedIdx: number;\n  focusTab: (\n    tabIndex: number,\n    immediateFocus?: boolean,\n    withKeyboard?: boolean,\n  ) => void;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  onClick: (evt: MouseEvent, tabIndex: number) => void;\n  onFocus: (evt: FocusEvent<HTMLElement>) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = ({\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\n  indexPositions,\n  keyBoardActivation,\n  orientation,\n  selectedIndex: selectedTabIndex = 0,\n}: TabstripNavigationHookProps): TabstripNavigationHookResult => {\n  const manualActivation = keyBoardActivation === \"manual\";\n  const mouseClickPending = useRef(false);\n  const focusedRef = useRef<number>(-1);\n  const [hasFocus, setHasFocus] = useState(false);\n  const [, forceRefresh] = useState({});\n  const [highlightedIdx, _setHighlightedIdx] = useControlled({\n    controlled: highlightedIdxProp,\n    default: defaultHighlightedIdx,\n    name: \"UseKeyboardNavigation\",\n  });\n\n  const setHighlightedIdx = useCallback((value: number) => {\n    focusedRef.current = value;\n    _setHighlightedIdx(value);\n  }, []);\n\n  const keyboardNavigation = useRef(false);\n\n  const focusTab = useCallback(\n    (tabIndex: number, immediateFocus = false, withKeyboard?: boolean) => {\n      // The timeout is important in two scenarios:\n      // 1) where tab has overflowed and is being selected from overflow menu.\n      // We must not focus it until the overflow mechanism + render has restored\n      // it to the main display.\n      // 2) when we are focussing a new tab\n      // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n      // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n      // styled by css class) focus style will briefly linger on both.\n      setHighlightedIdx(tabIndex);\n\n      if (withKeyboard === true && !keyboardNavigation.current) {\n        keyboardNavigation.current = true;\n      }\n\n      const setFocus = () => {\n        const item = indexPositions.find((i) => i.index === tabIndex);\n\n        if (item) {\n          const focussableElement = getFocusableElement(\n            document.getElementById(item.id),\n          );\n          focussableElement?.focus();\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, 70);\n      }\n    },\n    [indexPositions, setHighlightedIdx],\n  );\n\n  const onFocus = (e: FocusEvent<HTMLElement>) => {\n    // If focus is received by keyboard navigation, item with tabindex 0 will receive\n    // focus. If the item receiving focus has tabindex -1, then focus has been set\n    // programatically. We must respect this and not reset focus to selected tab.\n    if (focusedRef.current === -1) {\n      // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n      // the click event will have set correct value.\n      if (e.target.tabIndex === -1) {\n        // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n        // to revisit this and add code here if we may get focus set programatically in other ways.\n      } else {\n        setTimeout(() => {\n          // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n          if (focusedRef.current === -1 && selectedTabIndex !== null) {\n            setHighlightedIdx(selectedTabIndex);\n          }\n        }, 200);\n      }\n    }\n  };\n\n  const nextFocusableItemIdx = useCallback(\n    (\n      direction: directionType = \"fwd\",\n      idx = direction === \"fwd\" ? -1 : indexPositions.length,\n    ) => {\n      let nextIdx = nextItemIdx(indexPositions.length, direction, idx);\n      const nextDirection =\n        direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n      while (\n        ((nextDirection === \"fwd\" && nextIdx < indexPositions.length) ||\n          (nextDirection === \"bwd\" && nextIdx > 0)) &&\n        !isFocusable(indexPositions[nextIdx])\n      ) {\n        const newIdx = nextItemIdx(\n          indexPositions.length,\n          nextDirection,\n          nextIdx,\n        );\n        if (newIdx === nextIdx) {\n          break;\n        }\n        nextIdx = newIdx;\n      }\n      return nextIdx;\n    },\n    [indexPositions],\n  );\n\n  // forceFocusVisible supports an edge case - first or last Tab are clicked\n  // then Left or Right Arrow keys are pressed, There will be no navigation\n  // but focusVisible must be applied\n  const navigateChildItems = useCallback(\n    (e: KeyboardEvent, forceFocusVisible = false) => {\n      const direction = navigation[orientation][e.key];\n      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n      if (nextIdx !== highlightedIdx) {\n        const immediateFocus = true;\n        if (manualActivation) {\n          focusTab(nextIdx, immediateFocus);\n        } else {\n          // activateTab(newTabIndex);\n        }\n      } else if (forceFocusVisible) {\n        forceRefresh({});\n      }\n    },\n    [\n      highlightedIdx,\n      manualActivation,\n      nextFocusableItemIdx,\n      focusTab,\n      orientation,\n    ],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {\n        e.preventDefault();\n        if (keyboardNavigation.current) {\n          navigateChildItems(e);\n        } else {\n          keyboardNavigation.current = true;\n          navigateChildItems(e, true);\n        }\n      }\n    },\n    [indexPositions, navigateChildItems, orientation],\n  );\n\n  // TODO, in common hooks, we use mouse movement to track current highlighted\n  // index, rather than rely on component item reporting it\n  const handleItemClick = (_: MouseEvent, tabIndex: number) => {\n    setHighlightedIdx(tabIndex);\n  };\n\n  const handleFocus = () => {\n    if (!hasFocus) {\n      setHasFocus(true);\n      if (!mouseClickPending.current) {\n        keyboardNavigation.current = true;\n      } else {\n        mouseClickPending.current = false;\n      }\n    }\n  };\n\n  const handleContainerMouseDown = useCallback(\n    (evt: MouseEvent) => {\n      if (!hasFocus) {\n        mouseClickPending.current = true;\n      }\n      keyboardNavigation.current = false;\n    },\n    [hasFocus],\n  );\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".saltTabstrip\");\n      const destTarget = e.relatedTarget as HTMLElement;\n      if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n        setHighlightedIdx(-1);\n        setHasFocus(false);\n      }\n    },\n    onMouseDownCapture: handleContainerMouseDown,\n    onFocus: handleFocus,\n    onMouseLeave: () => {\n      keyboardNavigation.current = true;\n      setHighlightedIdx(-1);\n      mouseClickPending.current = false;\n    },\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      hasFocus &&\n      selectedTabIndex !== undefined &&\n      selectedTabIndex !== null\n    ) {\n      focusTab(selectedTabIndex);\n    }\n  }, [focusTab, hasFocus, selectedTabIndex]);\n\n  return {\n    containerProps,\n    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n    focusIsWithinComponent: hasFocus,\n    highlightedIdx,\n    focusTab,\n    onClick: handleItemClick,\n    onFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,UAAA,GAAa;AAAA,EACjB,UAAA,EAAY;AAAA,IACV,CAAC,IAAI,GAAG,OAAA;AAAA,IACR,CAAC,GAAG,GAAG,KAAA;AAAA,IACP,CAAC,SAAS,GAAG,KAAA;AAAA,IACb,CAAC,UAAU,GAAG;AAAA,GAChB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,CAAC,IAAI,GAAG,OAAA;AAAA,IACR,CAAC,GAAG,GAAG,KAAA;AAAA,IACP,CAAC,OAAO,GAAG,KAAA;AAAA,IACX,CAAC,SAAS,GAAG;AAAA;AAEjB,CAAA;AAEA,MAAM,eAAA,GAAkB,CACtB,GAAA,EACA,WAAA,GAA+B,iBAC5B,UAAA,CAAW,WAAW,CAAA,CAAE,GAAG,CAAA,KAAM,MAAA;AAEtC,SAAS,WAAA,CAAY,KAAA,EAAe,SAAA,EAA0B,GAAA,EAAa;AACzE,EAAA,IAAI,cAAc,OAAA,EAAS;AACzB,IAAA,OAAO,CAAA;AAAA,EACT;AACA,EAAA,IAAI,cAAc,KAAA,EAAO;AACvB,IAAA,OAAO,KAAA,GAAQ,CAAA;AAAA,EACjB;AACA,EAAA,IAAI,cAAc,KAAA,EAAO;AACvB,IAAA,IAAI,MAAM,CAAA,EAAG;AACX,MAAA,OAAO,GAAA,GAAM,CAAA;AAAA,IACf;AACA,IAAA,OAAO,GAAA;AAAA,EACT;AACA,EAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,IAAA,OAAO,CAAA;AAAA,EACT;AACA,EAAA,IAAI,GAAA,KAAQ,QAAQ,CAAA,EAAG;AACrB,IAAA,OAAO,GAAA;AAAA,EACT;AACA,EAAA,OAAO,GAAA,GAAM,CAAA;AACf;AAEA,MAAM,WAAA,GAAc,CAAC,IAAA,KAAuB,CAAC,IAAA,CAAK,UAAA;AAClD,MAAM,mBAAA,GAAsB,CAAC,EAAA,KAC3B,EAAA,GACI,EAAA,CAAG,YAAA,CAAa,UAAU,CAAA,GACxB,EAAA,GACC,EAAA,CAAG,aAAA,CAAc,YAAY,CAAA,GAChC,IAAA;AAiCC,MAAM,wBAAwB,CAAC;AAAA,EACpC,qBAAA,GAAwB,EAAA;AAAA,EACxB,cAAA,EAAgB,kBAAA;AAAA,EAChB,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAe,gBAAA,GAAmB;AACpC,CAAA,KAAiE;AAC/D,EAAA,MAAM,mBAAmB,kBAAA,KAAuB,QAAA;AAChD,EAAA,MAAM,iBAAA,GAAoB,OAAO,KAAK,CAAA;AACtC,EAAA,MAAM,UAAA,GAAa,OAAe,EAAE,CAAA;AACpC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,GAAG,YAAY,CAAA,GAAI,QAAA,CAAS,EAAE,CAAA;AACpC,EAAA,MAAM,CAAC,cAAA,EAAgB,kBAAkB,CAAA,GAAI,aAAA,CAAc;AAAA,IACzD,UAAA,EAAY,kBAAA;AAAA,IACZ,OAAA,EAAS,qBAAA;AAAA,IACT,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,MAAM,iBAAA,GAAoB,WAAA,CAAY,CAAC,KAAA,KAAkB;AACvD,IAAA,UAAA,CAAW,OAAA,GAAU,KAAA;AACrB,IAAA,kBAAA,CAAmB,KAAK,CAAA;AAAA,EAC1B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,kBAAA,GAAqB,OAAO,KAAK,CAAA;AAEvC,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,QAAA,EAAkB,cAAA,GAAiB,KAAA,EAAO,YAAA,KAA2B;AASpE,MAAA,iBAAA,CAAkB,QAAQ,CAAA;AAE1B,MAAA,IAAI,YAAA,KAAiB,IAAA,IAAQ,CAAC,kBAAA,CAAmB,OAAA,EAAS;AACxD,QAAA,kBAAA,CAAmB,OAAA,GAAU,IAAA;AAAA,MAC/B;AAEA,MAAA,MAAM,WAAW,MAAM;AACrB,QAAA,MAAM,OAAO,cAAA,CAAe,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,UAAU,QAAQ,CAAA;AAE5D,QAAA,IAAI,IAAA,EAAM;AACR,UAAA,MAAM,iBAAA,GAAoB,mBAAA;AAAA,YACxB,QAAA,CAAS,cAAA,CAAe,IAAA,CAAK,EAAE;AAAA,WACjC;AACA,UAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,KAAA,EAAA;AAAA,QACrB;AAAA,MACF,CAAA;AACA,MAAA,IAAI,cAAA,EAAgB;AAClB,QAAA,QAAA,EAAS;AAAA,MACX,CAAA,MAAO;AACL,QAAA,UAAA,CAAW,UAAU,EAAE,CAAA;AAAA,MACzB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,gBAAgB,iBAAiB;AAAA,GACpC;AAEA,EAAA,MAAM,OAAA,GAAU,CAAC,CAAA,KAA+B;AAI9C,IAAA,IAAI,UAAA,CAAW,YAAY,EAAA,EAAI;AAG7B,MAAA,IAAI,CAAA,CAAE,MAAA,CAAO,QAAA,KAAa,EAAA,EAAI,CAG9B,MAAO;AACL,QAAA,UAAA,CAAW,MAAM;AAEf,UAAA,IAAI,UAAA,CAAW,OAAA,KAAY,EAAA,IAAM,gBAAA,KAAqB,IAAA,EAAM;AAC1D,YAAA,iBAAA,CAAkB,gBAAgB,CAAA;AAAA,UACpC;AAAA,QACF,GAAG,GAAG,CAAA;AAAA,MACR;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,oBAAA,GAAuB,WAAA;AAAA,IAC3B,CACE,YAA2B,KAAA,EAC3B,GAAA,GAAM,cAAc,KAAA,GAAQ,EAAA,GAAK,eAAe,MAAA,KAC7C;AACH,MAAA,IAAI,OAAA,GAAU,WAAA,CAAY,cAAA,CAAe,MAAA,EAAQ,WAAW,GAAG,CAAA;AAC/D,MAAA,MAAM,gBACJ,SAAA,KAAc,OAAA,GAAU,KAAA,GAAQ,SAAA,KAAc,QAAQ,KAAA,GAAQ,SAAA;AAChE,MAAA,OAAA,CACI,aAAA,KAAkB,KAAA,IAAS,OAAA,GAAU,cAAA,CAAe,UACnD,aAAA,KAAkB,KAAA,IAAS,OAAA,GAAU,CAAA,KACxC,CAAC,WAAA,CAAY,cAAA,CAAe,OAAO,CAAC,CAAA,EACpC;AACA,QAAA,MAAM,MAAA,GAAS,WAAA;AAAA,UACb,cAAA,CAAe,MAAA;AAAA,UACf,aAAA;AAAA,UACA;AAAA,SACF;AACA,QAAA,IAAI,WAAW,OAAA,EAAS;AACtB,UAAA;AAAA,QACF;AACA,QAAA,OAAA,GAAU,MAAA;AAAA,MACZ;AACA,MAAA,OAAO,OAAA;AAAA,IACT,CAAA;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAKA,EAAA,MAAM,kBAAA,GAAqB,WAAA;AAAA,IACzB,CAAC,CAAA,EAAkB,iBAAA,GAAoB,KAAA,KAAU;AAC/C,MAAA,MAAM,SAAA,GAAY,UAAA,CAAW,WAAW,CAAA,CAAE,EAAE,GAAG,CAAA;AAC/C,MAAA,MAAM,OAAA,GAAU,oBAAA,CAAqB,SAAA,EAAW,cAAc,CAAA;AAC9D,MAAA,IAAI,YAAY,cAAA,EAAgB;AAC9B,QAAA,MAAM,cAAA,GAAiB,IAAA;AACvB,QAAA,IAAI,gBAAA,EAAkB;AACpB,UAAA,QAAA,CAAS,SAAS,cAAc,CAAA;AAAA,QAClC;AAEA,MACF,WAAW,iBAAA,EAAmB;AAC5B,QAAA,YAAA,CAAa,EAAE,CAAA;AAAA,MACjB;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,oBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,CAAA,KAAqB;AACpB,MAAA,IAAI,eAAe,MAAA,GAAS,CAAA,IAAK,gBAAgB,CAAA,CAAE,GAAA,EAAK,WAAW,CAAA,EAAG;AACpE,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,IAAI,mBAAmB,OAAA,EAAS;AAC9B,UAAA,kBAAA,CAAmB,CAAC,CAAA;AAAA,QACtB,CAAA,MAAO;AACL,UAAA,kBAAA,CAAmB,OAAA,GAAU,IAAA;AAC7B,UAAA,kBAAA,CAAmB,GAAG,IAAI,CAAA;AAAA,QAC5B;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,cAAA,EAAgB,kBAAA,EAAoB,WAAW;AAAA,GAClD;AAIA,EAAA,MAAM,eAAA,GAAkB,CAAC,CAAA,EAAe,QAAA,KAAqB;AAC3D,IAAA,iBAAA,CAAkB,QAAQ,CAAA;AAAA,EAC5B,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,IAAI,CAAC,kBAAkB,OAAA,EAAS;AAC9B,QAAA,kBAAA,CAAmB,OAAA,GAAU,IAAA;AAAA,MAC/B,CAAA,MAAO;AACL,QAAA,iBAAA,CAAkB,OAAA,GAAU,KAAA;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,wBAAA,GAA2B,WAAA;AAAA,IAC/B,CAAC,GAAA,KAAoB;AACnB,MAAA,IAAI,CAAC,QAAA,EAAU;AACb,QAAA,iBAAA,CAAkB,OAAA,GAAU,IAAA;AAAA,MAC9B;AACA,MAAA,kBAAA,CAAmB,OAAA,GAAU,KAAA;AAAA,IAC/B,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,cAAA,GAAiB;AAAA,IACrB,MAAA,EAAQ,CAAC,CAAA,KAAkB;AACzB,MAAA,MAAM,YAAA,GAAgB,CAAA,CAAE,MAAA,CAAuB,OAAA,CAAQ,eAAe,CAAA;AACtE,MAAA,MAAM,aAAa,CAAA,CAAE,aAAA;AACrB,MAAA,IAAI,YAAA,IAAgB,EAAC,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,QAAA,CAAS,UAAA,CAAA,CAAA,EAAa;AACvD,QAAA,iBAAA,CAAkB,EAAE,CAAA;AACpB,QAAA,WAAA,CAAY,KAAK,CAAA;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,kBAAA,EAAoB,wBAAA;AAAA,IACpB,OAAA,EAAS,WAAA;AAAA,IACT,cAAc,MAAM;AAClB,MAAA,kBAAA,CAAmB,OAAA,GAAU,IAAA;AAC7B,MAAA,iBAAA,CAAkB,EAAE,CAAA;AACpB,MAAA,iBAAA,CAAkB,OAAA,GAAU,KAAA;AAAA,IAC9B;AAAA,GACF;AAEA,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IACE,QAAA,IACA,gBAAA,KAAqB,MAAA,IACrB,gBAAA,KAAqB,IAAA,EACrB;AACA,MAAA,QAAA,CAAS,gBAAgB,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,QAAA,EAAU,gBAAgB,CAAC,CAAA;AAEzC,EAAA,OAAO;AAAA,IACL,cAAA;AAAA,IACA,YAAA,EAAc,kBAAA,CAAmB,OAAA,GAAU,cAAA,GAAiB,EAAA;AAAA,IAC5D,sBAAA,EAAwB,QAAA;AAAA,IACxB,cAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA,EAAS,eAAA;AAAA,IACT,OAAA;AAAA,IACA,SAAA,EAAW;AAAA,GACb;AACF;;;;"}

package/dist-es/tabs/useSelection.js

@@ -0,0 +1,58 @@
+import { useControlled } from '@salt-ds/core';
+import { useCallback } from 'react';
+
+const defaultSelectionKeys = ["Enter", " "];
+const isTabElement = (el) => el == null ? void 0 : el.matches('[class*="saltTab "]');
+const useSelection = ({
+  defaultSelected,
+  highlightedIdx,
+  onSelectionChange,
+  selected: selectedProp
+}) => {
+  const [selected, setSelected, isControlled] = useControlled({
+    controlled: selectedProp,
+    default: defaultSelected ?? 0,
+    name: "Tabstrip",
+    state: "value"
+  });
+  const isSelectionEvent = useCallback(
+    (evt) => defaultSelectionKeys.includes(evt.key),
+    []
+  );
+  const selectItem = useCallback(
+    (tabIndex) => {
+      setSelected(tabIndex);
+      onSelectionChange == null ? void 0 : onSelectionChange(tabIndex);
+    },
+    [onSelectionChange]
+  );
+  const handleKeyDown = 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 = useCallback(
+    (e, tabIndex) => {
+      if (tabIndex !== selected) {
+        selectItem(tabIndex);
+      }
+    },
+    [selectItem, selected]
+  );
+  return {
+    activateTab: selectItem,
+    isControlled,
+    onClick,
+    onKeyDown: handleKeyDown,
+    selected
+  };
+};
+
+export { isTabElement, useSelection };
+//# sourceMappingURL=useSelection.js.map

package/dist-es/tabs/useSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelection.js","sources":["../src/tabs/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, type MouseEvent, useCallback } from \"react\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport const isTabElement = (el: HTMLElement): boolean =>\n  el?.matches('[class*=\"saltTab \"]');\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 | null;\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 | null;\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],\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":[],"mappings":";;;AAGA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA;AAEnC,MAAM,YAAA,GAAe,CAAC,EAAA,KAC3B,EAAA,IAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAI,OAAA,CAAQ,qBAAA;AAGP,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA,EAAU;AACZ,CAAA,KAWK;AACH,EAAA,MAAM,CAAC,QAAA,EAAU,WAAA,EAAa,YAAY,IAAI,aAAA,CAAc;AAAA,IAC1D,UAAA,EAAY,YAAA;AAAA,IACZ,SAAS,eAAA,IAAmB,CAAA;AAAA,IAC5B,IAAA,EAAM,UAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmB,WAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,oBAAA,CAAqB,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IAC7D;AAAC,GACH;AAEA,EAAA,MAAM,UAAA,GAAa,WAAA;AAAA,IACjB,CAAC,QAAA,KAAqB;AACpB,MAAA,WAAA,CAAY,QAAQ,CAAA;AACpB,MAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,QAAA,CAAA;AAAA,IACtB,CAAA;AAAA,IACA,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,CAAA,KAAqB;AACpB,MAAA,MAAM,gBAAgB,CAAA,CAAE,MAAA;AACxB,MAAA,IACE,iBAAiB,CAAC,CAAA,IAClB,mBAAmB,QAAA,IACnB,YAAA,CAAa,aAAa,CAAA,EAC1B;AACA,QAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,UAAA,CAAW,cAAc,CAAA;AAAA,MAC3B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,gBAAA,EAAkB,cAAA,EAAgB,QAAA,EAAU,UAAU;AAAA,GACzD;AAEA,EAAA,MAAM,OAAA,GAAU,WAAA;AAAA,IACd,CAAC,GAAe,QAAA,KAAqB;AACnC,MAAA,IAAI,aAAa,QAAA,EAAU;AACzB,QAAA,UAAA,CAAW,QAAQ,CAAA;AAAA,MACrB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,GACvB;AAEA,EAAA,OAAO;AAAA,IACL,WAAA,EAAa,UAAA;AAAA,IACb,YAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA,EAAW,aAAA;AAAA,IACX;AAAA,GACF;AACF;;;;"}

package/dist-es/tabs/useTabs.js

@@ -0,0 +1,38 @@
+import { useIdMemo, useControlled } from '@salt-ds/core';
+import { useCallback } from 'react';
+import { useItemsWithIds } from './useItemsWithIds.js';
+
+const useTabs = ({
+  activeTabIndex: activeTabIndexProp,
+  children,
+  defaultActiveTabIndex,
+  id: idProp,
+  onActiveChange
+}) => {
+  var _a;
+  const id = useIdMemo(idProp);
+  const [itemsWithIds] = useItemsWithIds(children, id);
+  const [activeTabIndex, setActiveTabIndex] = useControlled({
+    controlled: activeTabIndexProp,
+    default: defaultActiveTabIndex ?? 0,
+    name: "useTabs",
+    state: "activeTabIndex"
+  });
+  const handleTabActivated = useCallback(
+    (tabIndex) => {
+      setActiveTabIndex(tabIndex);
+      onActiveChange == null ? void 0 : onActiveChange(tabIndex);
+    },
+    [onActiveChange]
+  );
+  return {
+    id,
+    onActiveChange: handleTabActivated,
+    activeTabIndex,
+    tabs: itemsWithIds,
+    tabPanel: activeTabIndex === null ? null : ((_a = itemsWithIds[activeTabIndex]) == null ? void 0 : _a.element) ?? null
+  };
+};
+
+export { useTabs };
+//# sourceMappingURL=useTabs.js.map

package/dist-es/tabs/useTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.js","sources":["../src/tabs/useTabs.ts"],"sourcesContent":["import { useControlled, useIdMemo } from \"@salt-ds/core\";\nimport { type ReactNode, useCallback } from \"react\";\nimport type { TabDescriptor } from \"./TabsTypes\";\nimport { useItemsWithIds } from \"./useItemsWithIds\";\n\nexport interface TabsHookProps {\n  activeTabIndex?: number | null;\n  children: ReactNode;\n  defaultActiveTabIndex?: number;\n  id?: string;\n  onActiveChange?: (tabIndex: number) => void;\n}\n\nexport interface TabsHookResult {\n  activeTabIndex?: number | null;\n  id: string;\n  onActiveChange?: (tabIndex: number) => void;\n  tabPanel?: ReactNode;\n  tabs: TabDescriptor[];\n}\n\nexport const useTabs = ({\n  activeTabIndex: activeTabIndexProp,\n  children,\n  defaultActiveTabIndex,\n  id: idProp,\n  onActiveChange,\n}: TabsHookProps): TabsHookResult => {\n  const id = useIdMemo(idProp);\n  const [itemsWithIds] = useItemsWithIds(children, id);\n\n  const [activeTabIndex, setActiveTabIndex] = useControlled({\n    controlled: activeTabIndexProp,\n    default: defaultActiveTabIndex ?? 0,\n    name: \"useTabs\",\n    state: \"activeTabIndex\",\n  });\n\n  const handleTabActivated = useCallback(\n    (tabIndex: number) => {\n      setActiveTabIndex(tabIndex);\n      onActiveChange?.(tabIndex);\n    },\n    [onActiveChange],\n  );\n\n  return {\n    id,\n    onActiveChange: handleTabActivated,\n    activeTabIndex,\n    tabs: itemsWithIds,\n    tabPanel:\n      activeTabIndex === null\n        ? null\n        : (itemsWithIds[activeTabIndex]?.element ?? null),\n  };\n};\n"],"names":[],"mappings":";;;;AAqBO,MAAM,UAAU,CAAC;AAAA,EACtB,cAAA,EAAgB,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,EAAA,EAAI,MAAA;AAAA,EACJ;AACF,CAAA,KAAqC;AA3BrC,EAAA,IAAA,EAAA;AA4BE,EAAA,MAAM,EAAA,GAAK,UAAU,MAAM,CAAA;AAC3B,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,eAAA,CAAgB,UAAU,EAAE,CAAA;AAEnD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,aAAA,CAAc;AAAA,IACxD,UAAA,EAAY,kBAAA;AAAA,IACZ,SAAS,qBAAA,IAAyB,CAAA;AAAA,IAClC,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,kBAAA,GAAqB,WAAA;AAAA,IACzB,CAAC,QAAA,KAAqB;AACpB,MAAA,iBAAA,CAAkB,QAAQ,CAAA;AAC1B,MAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAiB,QAAA,CAAA;AAAA,IACnB,CAAA;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,OAAO;AAAA,IACL,EAAA;AAAA,IACA,cAAA,EAAgB,kBAAA;AAAA,IAChB,cAAA;AAAA,IACA,IAAA,EAAM,YAAA;AAAA,IACN,QAAA,EACE,mBAAmB,IAAA,GACf,IAAA,GAAA,CAAA,CACC,kBAAa,cAAc,CAAA,KAA3B,mBAA8B,OAAA,KAAW;AAAA,GAClD;AACF;;;;"}