@salt-ds/lab 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist-es/tabs/drag-drop/Draggable.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import { useForkRef } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import { Portal } from '../../portal/Portal.js';
+import css_248z from './Draggable.css.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+
+const makeClassNames = (classNames) => classNames.split(" ").map((className) => `saltDraggable-${className}`);
+const Draggable = forwardRef(function Draggable2({ wrapperClassName, element, rect, scale = 1 }, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-draggable",
+    css: css_248z,
+    window: targetWindow
+  });
+  const callbackRef = useCallback(
+    (el) => {
+      if (el) {
+        el.innerHTML = "";
+        el.appendChild(element);
+        if (scale !== 1) {
+          el.style.transform = `scale(${scale},${scale})`;
+        }
+      }
+    },
+    [element, scale]
+  );
+  const forkedRef = useForkRef(forwardedRef, callbackRef);
+  const { left, top, width, height } = rect;
+  return /* @__PURE__ */ jsx(Portal, {
+    children: /* @__PURE__ */ jsx("div", {
+      className: clsx("saltDraggable", ...makeClassNames(wrapperClassName)),
+      ref: forkedRef,
+      style: { left, top, width, height }
+    })
+  });
+});
+const createDragSpacer = (transitioning) => {
+  const spacer = document.createElement("div");
+  spacer.className = "saltDraggable-spacer";
+  if (transitioning) {
+    spacer.addEventListener("transitionend", () => {
+      transitioning.current = false;
+    });
+  }
+  return spacer;
+};
+
+export { Draggable, createDragSpacer };
+//# sourceMappingURL=Draggable.js.map

package/dist-es/tabs/drag-drop/Draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Draggable.js","sources":["../src/tabs/drag-drop/Draggable.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, MutableRefObject, useCallback } from \"react\";\nimport { Rect } from \"./dragDropTypes\";\nimport { Portal } from \"../../portal\";\n\nimport draggableCss from \"./Draggable.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst makeClassNames = (classNames: string) =>\n  classNames.split(\" \").map((className) => `saltDraggable-${className}`);\nexport const Draggable = forwardRef<\n  HTMLDivElement,\n  { wrapperClassName: string; element: HTMLElement; rect: Rect; scale?: number }\n>(function Draggable(\n  { wrapperClassName, element, rect, scale = 1 },\n  forwardedRef\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-draggable\",\n    css: draggableCss,\n    window: targetWindow,\n  });\n\n  const callbackRef = useCallback(\n    (el: HTMLDivElement) => {\n      if (el) {\n        el.innerHTML = \"\";\n        el.appendChild(element);\n        if (scale !== 1) {\n          el.style.transform = `scale(${scale},${scale})`;\n        }\n      }\n    },\n    [element, scale]\n  );\n  const forkedRef = useForkRef<HTMLDivElement>(forwardedRef, callbackRef);\n\n  const { left, top, width, height } = rect;\n\n  return (\n    <Portal>\n      <div\n        className={clsx(\"saltDraggable\", ...makeClassNames(wrapperClassName))}\n        ref={forkedRef}\n        style={{ left, top, width, height }}\n      />\n    </Portal>\n  );\n});\n\nexport const createDragSpacer = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"saltDraggable-spacer\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n"],"names":["Draggable","draggableCss"],"mappings":";;;;;;;;;AAUA,MAAM,cAAA,GAAiB,CAAC,UAAA,KACtB,UAAW,CAAA,KAAA,CAAM,GAAG,CAAA,CAAE,GAAI,CAAA,CAAC,SAAc,KAAA,CAAA,cAAA,EAAiB,SAAW,CAAA,CAAA,CAAA,CAAA;AAC1D,MAAA,SAAA,GAAY,UAGvB,CAAA,SAASA,UACT,CAAA,EAAE,gBAAkB,EAAA,OAAA,EAAS,IAAM,EAAA,KAAA,GAAQ,CAAE,EAAA,EAC7C,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,EAAuB,KAAA;AACtB,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,EAAA,CAAG,SAAY,GAAA,EAAA,CAAA;AACf,QAAA,EAAA,CAAG,YAAY,OAAO,CAAA,CAAA;AACtB,QAAA,IAAI,UAAU,CAAG,EAAA;AACf,UAAG,EAAA,CAAA,KAAA,CAAM,SAAY,GAAA,CAAA,MAAA,EAAS,KAAS,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAAA,SACzC;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,SAAS,KAAK,CAAA;AAAA,GACjB,CAAA;AACA,EAAM,MAAA,SAAA,GAAY,UAA2B,CAAA,YAAA,EAAc,WAAW,CAAA,CAAA;AAEtE,EAAA,MAAM,EAAE,IAAA,EAAM,GAAK,EAAA,KAAA,EAAO,QAAW,GAAA,IAAA,CAAA;AAErC,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,eAAA,EAAiB,GAAG,cAAA,CAAe,gBAAgB,CAAC,CAAA;AAAA,MACpE,GAAK,EAAA,SAAA;AAAA,MACL,KAAO,EAAA,EAAE,IAAM,EAAA,GAAA,EAAK,OAAO,MAAO,EAAA;AAAA,KACpC,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,gBAAA,GAAmB,CAC9B,aACgB,KAAA;AAChB,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAC3C,EAAA,MAAA,CAAO,SAAY,GAAA,sBAAA,CAAA;AACnB,EAAA,IAAI,aAAe,EAAA;AACjB,IAAO,MAAA,CAAA,gBAAA,CAAiB,iBAAiB,MAAM;AAC7C,MAAA,aAAA,CAAc,OAAU,GAAA,KAAA,CAAA;AAAA,KACzB,CAAA,CAAA;AAAA,GACH;AACA,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

package/dist-es/tabs/useActivationIndicator.js

@@ -0,0 +1,78 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import '@salt-ds/core';
+import 'react/jsx-runtime';
+import { useResizeObserver, WidthOnly } from '../responsive/useResizeObserver.js';
+
+const MEASUREMENTS = {
+  horizontal: {
+    pos: "left",
+    size: "width"
+  },
+  vertical: {
+    pos: "top",
+    size: "height"
+  }
+};
+function useActivationIndicator({
+  rootRef,
+  tabId,
+  orientation
+}) {
+  const [style, setStyle] = useState({
+    left: 0,
+    width: 0
+  });
+  const styleRef = useRef(style);
+  const getTabPos = useCallback(() => {
+    const { pos, size } = MEASUREMENTS[orientation];
+    return [pos, size];
+  }, [orientation]);
+  const createIndicatorStyle = useCallback(
+    (tabElement) => {
+      if (tabElement) {
+        const tabRect = tabElement.getBoundingClientRect();
+        if (rootRef.current && tabRect) {
+          const rootRect = rootRef.current.getBoundingClientRect();
+          const [pos, size] = getTabPos();
+          const { [pos]: existingPos, [size]: existingSize } = styleRef.current;
+          const newPos = tabRect[pos] - rootRect[pos];
+          const newSize = tabRect[size];
+          return {
+            [pos]: newPos,
+            [size]: newSize,
+            hasChanged: newPos !== existingPos || newSize !== existingSize
+          };
+        }
+      }
+      return {};
+    },
+    [orientation, rootRef]
+  );
+  const onResize = useCallback(() => {
+    requestAnimationFrame(() => {
+      if (tabId) {
+        const tabEl = document.getElementById(tabId);
+        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);
+        if (hasChanged) {
+          setStyle(newStyle);
+        }
+      }
+    });
+  }, [createIndicatorStyle, tabId]);
+  useEffect(() => {
+    if (tabId) {
+      setTimeout(() => {
+        const tabEl = document.getElementById(tabId);
+        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);
+        if (hasChanged) {
+          setStyle(styleRef.current = newStyle);
+        }
+      }, 50);
+    }
+  }, [createIndicatorStyle, tabId]);
+  useResizeObserver(rootRef, WidthOnly, onResize);
+  return style;
+}
+
+export { useActivationIndicator };
+//# sourceMappingURL=useActivationIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useActivationIndicator.js","sources":["../src/tabs/useActivationIndicator.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from \"react\";\nimport { orientationType, useResizeObserver, WidthOnly } from \"../responsive\";\n\ntype activationIndicatorStyles = {\n  height?: number;\n  left?: number;\n  top?: number;\n  width?: number;\n  hasChanged?: boolean;\n};\n\nconst MEASUREMENTS = {\n  horizontal: {\n    pos: \"left\" as keyof activationIndicatorStyles,\n    size: \"width\" as keyof activationIndicatorStyles,\n  },\n  vertical: {\n    pos: \"top\" as keyof activationIndicatorStyles,\n    size: \"height\" as keyof activationIndicatorStyles,\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() as any;\n        if (rootRef.current && tabRect) {\n          const rootRect = rootRef.current.getBoundingClientRect() as any;\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    [orientation, rootRef]\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          setStyle((styleRef.current = 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/useKeyboardNavigation.js

@@ -0,0 +1,220 @@
+import { useControlled, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useRef, useState, useCallback } from 'react';
+import '../common-hooks/collectionProvider.js';
+import { Home, End, ArrowLeft, ArrowRight, ArrowUp, ArrowDown } 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;
+  } 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 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) => {
+      _setHighlightedIdx(focusedRef.current = value);
+    },
+    [_setHighlightedIdx]
+  );
+  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;
+        } else {
+          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 = useCallback(
+    (evt) => {
+      if (!hasFocus) {
+        setHasFocus(true);
+        if (!mouseClickPending.current) {
+          keyboardNavigation.current = true;
+        } else {
+          mouseClickPending.current = false;
+        }
+      }
+    },
+    [hasFocus]
+  );
+  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  FocusEvent,\n  FocusEventHandler,\n  KeyboardEvent,\n  MouseEvent,\n  MouseEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { OverflowItem } from \"../responsive\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowLeft,\n  ArrowRight,\n  Home,\n  End,\n} from \"../common-hooks\";\n\ntype orientationType = \"horizontal\" | \"vertical\";\ntype directionType = \"bwd\" | \"fwd\" | \"start\" | \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n  horizontal: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowLeft]: \"bwd\",\n    [ArrowRight]: \"fwd\",\n  } as directionMap,\n  vertical: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowUp]: \"bwd\",\n    [ArrowDown]: \"fwd\",\n  } as directionMap,\n};\n\nconst isNavigationKey = (\n  key: string,\n  orientation: orientationType = \"horizontal\"\n) => navigation[orientation][key] !== undefined;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n  if (direction === \"start\") {\n    return 0;\n  } else if (direction === \"end\") {\n    return count - 1;\n  } else if (direction === \"bwd\") {\n    if (idx > 0) {\n      return idx - 1;\n    } else {\n      return idx;\n    }\n  } else {\n    if (idx === null) {\n      return 0;\n    } else if (idx === count - 1) {\n      return idx;\n    } else {\n      return idx + 1;\n    }\n  }\n}\n\nconst isFocusable = (item: OverflowItem) => !item.overflowed;\nconst getFocusableElement = (el: HTMLElement | null) =>\n  el\n    ? el.hasAttribute(\"tabindex\")\n      ? el\n      : (el.querySelector(\"[tabindex]\") as HTMLElement)\n    : null;\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  indexPositions: OverflowItem[];\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  orientation: orientationType;\n  selectedIndex: number | 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(\n    (value: number) => {\n      _setHighlightedIdx((focusedRef.current = value));\n    },\n    [_setHighlightedIdx]\n  );\n\n  const keyboardNavigation = useRef(false);\n\n  const focusTab = useCallback(\n    (tabIndex: number, immediateFocus = false, withKeyboard?: boolean) => {\n      // The timeout is important in two scenarios:\n      // 1) where tab has overflowed and is being selected from overflow menu.\n      // We must not focus it until the overflow mechanism + render has restored\n      // it to the main display.\n      // 2) when we are focussing a new tab\n      // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n      // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n      // styled by css class) focus style will briefly linger on both.\n      setHighlightedIdx(tabIndex);\n\n      if (withKeyboard === true && !keyboardNavigation.current) {\n        keyboardNavigation.current = true;\n      }\n\n      const setFocus = () => {\n        const item = indexPositions.find((i) => i.index === tabIndex);\n\n        if (item) {\n          const focussableElement = getFocusableElement(\n            document.getElementById(item.id)\n          );\n          focussableElement?.focus();\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, 70);\n      }\n    },\n    [indexPositions, setHighlightedIdx]\n  );\n\n  const onFocus = (e: FocusEvent<HTMLElement>) => {\n    // If focus is received by keyboard navigation, item with tabindex 0 will receive\n    // focus. If the item receiving focus has tabindex -1, then focus has been set\n    // programatically. We must respect this and not reset focus to selected tab.\n    if (focusedRef.current === -1) {\n      // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n      // the click event will have set correct value.\n      if (e.target.tabIndex === -1) {\n        // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n        // to revisit this and add code here if we may get focus set programatically in other ways.\n      } else {\n        setTimeout(() => {\n          // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n          if (focusedRef.current === -1 && 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        } else {\n          nextIdx = newIdx;\n        }\n      }\n      return nextIdx;\n    },\n    [indexPositions]\n  );\n\n  // forceFocusVisible supports an edge case - first or last Tab are clicked\n  // then Left or Right Arrow keys are pressed, There will be no navigation\n  // but focusVisible must be applied\n  const navigateChildItems = useCallback(\n    (e: React.KeyboardEvent, forceFocusVisible = false) => {\n      const direction = navigation[orientation][e.key];\n      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n      if (nextIdx !== highlightedIdx) {\n        const immediateFocus = true;\n        if (manualActivation) {\n          focusTab(nextIdx, immediateFocus);\n        } else {\n          // activateTab(newTabIndex);\n        }\n      } else if (forceFocusVisible) {\n        forceRefresh({});\n      }\n    },\n    [\n      highlightedIdx,\n      manualActivation,\n      nextFocusableItemIdx,\n      focusTab,\n      orientation,\n    ]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {\n        e.preventDefault();\n        if (keyboardNavigation.current) {\n          navigateChildItems(e);\n        } else {\n          keyboardNavigation.current = true;\n          navigateChildItems(e, true);\n        }\n      }\n    },\n    [indexPositions, navigateChildItems, orientation]\n  );\n\n  // TODO, in common hooks, we use mouse movement to track current highlighted\n  // index, rather than rely on component item reporting it\n  const handleItemClick = (_: MouseEvent, tabIndex: number) => {\n    setHighlightedIdx(tabIndex);\n  };\n\n  const handleFocus = useCallback(\n    (evt: FocusEvent) => {\n      if (!hasFocus) {\n        setHasFocus(true);\n        if (!mouseClickPending.current) {\n          keyboardNavigation.current = true;\n        } else {\n          mouseClickPending.current = false;\n        }\n      }\n    },\n    [hasFocus]\n  );\n\n  const handleContainerMouseDown = useCallback(\n    (evt: MouseEvent) => {\n      if (!hasFocus) {\n        mouseClickPending.current = true;\n      }\n      keyboardNavigation.current = false;\n    },\n    [hasFocus]\n  );\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".saltTabstrip\");\n      const destTarget = e.relatedTarget as HTMLElement;\n      if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n        setHighlightedIdx(-1);\n        setHasFocus(false);\n      }\n    },\n    onMouseDownCapture: handleContainerMouseDown,\n    onFocus: handleFocus,\n    onMouseLeave: () => {\n      keyboardNavigation.current = true;\n      setHighlightedIdx(-1);\n      mouseClickPending.current = false;\n    },\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (\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":"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"}

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 { KeyboardEvent, MouseEvent, useCallback } from \"react\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport const isTabElement = (el: HTMLElement): boolean =>\n  el && 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, 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":[],"mappings":";;;AAGA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA,CAAA;AAEnC,MAAM,eAAe,CAAC,EAAA,KAC3B,EAAM,IAAA,EAAA,CAAG,QAAQ,qBAAqB,EAAA;AAGjC,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,IAAI,aAAc,CAAA;AAAA,IAC1D,UAAY,EAAA,YAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,IAAA,GAAA,eAAA,GAAA,CAAA;AAAA,IAC5B,IAAM,EAAA,UAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,oBAAqB,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IAC7D,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,QAAqB,KAAA;AACpB,MAAA,WAAA,CAAY,QAAQ,CAAA,CAAA;AACpB,MAAoB,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,QAAA,CAAA,CAAA;AAAA,KACtB;AAAA,IACA,CAAC,mBAAmB,WAAW,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;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,GAAA,WAAA;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/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, _b;
+  const id = useIdMemo(idProp);
+  const [itemsWithIds] = useItemsWithIds(children, id);
+  const [activeTabIndex, setActiveTabIndex] = useControlled({
+    controlled: activeTabIndexProp,
+    default: defaultActiveTabIndex != null ? defaultActiveTabIndex : 0,
+    name: "useTabs",
+    state: "activeTabIndex"
+  });
+  const handleTabActivated = useCallback(
+    (tabIndex) => {
+      setActiveTabIndex(tabIndex);
+      onActiveChange == null ? void 0 : onActiveChange(tabIndex);
+    },
+    [onActiveChange, setActiveTabIndex]
+  );
+  return {
+    id,
+    onActiveChange: handleTabActivated,
+    activeTabIndex,
+    tabs: itemsWithIds,
+    tabPanel: activeTabIndex === null ? null : (_b = (_a = itemsWithIds[activeTabIndex]) == null ? void 0 : _a.element) != null ? _b : 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 { ReactNode, useCallback } from \"react\";\nimport { 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, setActiveTabIndex]\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,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,cAAA;AACF,CAAqC,KAAA;AA3BrC,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA4BE,EAAM,MAAA,EAAA,GAAK,UAAU,MAAM,CAAA,CAAA;AAC3B,EAAA,MAAM,CAAC,YAAY,CAAI,GAAA,eAAA,CAAgB,UAAU,EAAE,CAAA,CAAA;AAEnD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,aAAc,CAAA;AAAA,IACxD,UAAY,EAAA,kBAAA;AAAA,IACZ,SAAS,qBAAyB,IAAA,IAAA,GAAA,qBAAA,GAAA,CAAA;AAAA,IAClC,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,gBAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,QAAqB,KAAA;AACpB,MAAA,iBAAA,CAAkB,QAAQ,CAAA,CAAA;AAC1B,MAAiB,cAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAA,QAAA,CAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,gBAAgB,iBAAiB,CAAA;AAAA,GACpC,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,EAAA;AAAA,IACA,cAAgB,EAAA,kBAAA;AAAA,IAChB,cAAA;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,IACN,QAAA,EACE,mBAAmB,IACf,GAAA,IAAA,GAAA,CACA,wBAAa,cAAb,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAA8B,YAA9B,IAAyC,GAAA,EAAA,GAAA,IAAA;AAAA,GACjD,CAAA;AACF;;;;"}