@salt-ds/lab 1.0.0-alpha.9 → 1.0.0-alpha.90

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;;;;"}

package/dist-es/tabs/useTabstrip.js

@@ -0,0 +1,214 @@
+import { useRef, useCallback, createElement, useEffect } from 'react';
+import { useDragDrop } from './drag-drop/useDragDrop.js';
+import { Tab } from './Tab.js';
+import { useEditableItem } from './useEditableItem.js';
+import { useKeyboardNavigation } from './useKeyboardNavigation.js';
+import { useSelection } from './useSelection.js';
+
+const useTabstrip = ({
+  activeTabIndex: activeTabIndexProp,
+  allowDragDrop = false,
+  collectionHook,
+  defaultActiveTabIndex,
+  editing: editingProp,
+  idRoot,
+  innerContainerRef,
+  keyBoardActivation,
+  onActiveChange,
+  onCloseTab,
+  onEnterEditMode,
+  onExitEditMode,
+  onMoveTab,
+  orientation,
+  promptForNewTabName
+}) => {
+  const lastSelection = useRef(
+    activeTabIndexProp === null ? null : activeTabIndexProp || defaultActiveTabIndex || 0
+  );
+  const pendingNewTab = useRef(null);
+  const overflowedItems = collectionHook.data.filter((item) => item.overflowed);
+  const keyboardHook = useKeyboardNavigation({
+    indexPositions: collectionHook.data,
+    keyBoardActivation,
+    orientation,
+    selectedIndex: lastSelection.current
+  });
+  const selectionHook = useSelection({
+    defaultSelected: defaultActiveTabIndex,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    onSelectionChange: onActiveChange,
+    selected: activeTabIndexProp
+  });
+  lastSelection.current = selectionHook.selected;
+  const handleDrop = useCallback(
+    (fromIndex, toIndex) => {
+      onMoveTab == null ? void 0 : onMoveTab(fromIndex, toIndex);
+      if (toIndex === -1) ; else {
+        if (selectionHook.selected === null) ; else if (selectionHook.selected === fromIndex) {
+          selectionHook.activateTab(toIndex);
+        } else if (fromIndex > selectionHook.selected && toIndex <= selectionHook.selected) {
+          selectionHook.activateTab(selectionHook.selected + 1);
+        } else if (fromIndex < selectionHook.selected && toIndex >= selectionHook.selected) {
+          selectionHook.activateTab(selectionHook.selected - 1);
+        }
+      }
+    },
+    [onMoveTab, selectionHook]
+  );
+  const dragDropHook = useDragDrop({
+    allowDragDrop,
+    containerRef: innerContainerRef,
+    extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".saltTab"
+  });
+  const editableHook = useEditableItem({
+    editing: editingProp,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    indexPositions: collectionHook.data,
+    onEnterEditMode,
+    onExitEditMode
+  });
+  const handleExitEditMode = useCallback(
+    (originalValue, editedValue, allowDeactivation, tabIndex) => {
+      editableHook.onExitEditMode(
+        originalValue,
+        editedValue,
+        allowDeactivation,
+        tabIndex
+      );
+      if (!allowDeactivation) {
+        keyboardHook.focusTab(tabIndex, false, true);
+      }
+    },
+    [editableHook, keyboardHook]
+  );
+  const handleClick = useCallback(
+    (evt, tabIndex) => {
+      if (!dragDropHook.isDragging) {
+        keyboardHook.onClick(evt, tabIndex);
+        selectionHook.onClick(evt, tabIndex);
+      }
+    },
+    [dragDropHook.isDragging, keyboardHook, selectionHook]
+  );
+  const handleKeyDown = useCallback(
+    (evt) => {
+      keyboardHook.onKeyDown(evt);
+      if (!evt.defaultPrevented) {
+        selectionHook.onKeyDown(evt);
+      }
+      if (!evt.defaultPrevented) {
+        editableHook.onKeyDown(evt);
+      }
+    },
+    [keyboardHook, selectionHook, editableHook]
+  );
+  const navigationProps = {
+    onFocus: keyboardHook.onFocus,
+    onKeyDown: handleKeyDown
+  };
+  const tabProps = {
+    onClick: handleClick,
+    onEnterEditMode: editableHook.onEnterEditMode,
+    onExitEditMode: handleExitEditMode
+  };
+  const addTab = useCallback(
+    // The -1 is to account for the AddTab button - we shouldn't assume this
+    (indexPosition = collectionHook.data.length - 1) => {
+      const tabId = `${idRoot}-${collectionHook.data.length}`;
+      pendingNewTab.current = tabId;
+      const overflowIndicator = collectionHook.data.find(
+        (i) => i.isOverflowIndicator
+      );
+      const newTabs = collectionHook.data.filter(
+        (item) => {
+          var _a;
+          return (_a = item.label) == null ? void 0 : _a.startsWith("New Tab");
+        }
+      );
+      const count = newTabs.length + 1;
+      collectionHook.dispatch({
+        type: "add-child-item",
+        idRoot,
+        element: createElement(Tab, {
+          editable: true,
+          label: `New Tab ${count}`,
+          id: tabId
+        }),
+        indexPosition: overflowIndicator ? indexPosition - 1 : indexPosition
+      });
+    },
+    [collectionHook, idRoot]
+  );
+  const selectNewTab = useCallback(
+    (tabId) => {
+      const tab = collectionHook.data.find((item) => item.id === tabId);
+      if (tab) {
+        selectionHook.activateTab(tab.index);
+        if (promptForNewTabName) {
+          editableHook.setEditing(true);
+        } else {
+          keyboardHook.focusTab(tab.index);
+        }
+      }
+    },
+    [
+      collectionHook.data,
+      editableHook,
+      keyboardHook,
+      promptForNewTabName,
+      selectionHook
+    ]
+  );
+  const closeTab = useCallback(
+    (indexPosition) => {
+      if (!collectionHook.isControlled) {
+        collectionHook.dispatch({
+          type: "remove-item",
+          indexPosition
+        });
+        if (collectionHook.data.length > 1) {
+          if (indexPosition === selectionHook.selected && //TODO need to exclude overflow indicator, addButton
+          indexPosition === collectionHook.data.length - 1) {
+            selectionHook.activateTab(indexPosition - 1);
+          }
+          onCloseTab == null ? void 0 : onCloseTab(indexPosition);
+          if (selectionHook.selected !== null && indexPosition < selectionHook.selected) {
+            selectionHook.activateTab(selectionHook.selected - 1);
+          }
+        }
+      } else {
+        onCloseTab == null ? void 0 : onCloseTab(indexPosition);
+      }
+    },
+    [collectionHook, onCloseTab, selectionHook]
+  );
+  useEffect(() => {
+    if (pendingNewTab.current) {
+      const { current: tabId } = pendingNewTab;
+      pendingNewTab.current = null;
+      selectNewTab(tabId);
+    }
+  }, [collectionHook.data, promptForNewTabName, selectNewTab]);
+  return {
+    activateTab: selectionHook.activateTab,
+    addTab,
+    closeTab,
+    containerProps: keyboardHook.containerProps,
+    controlledSelection: selectionHook.isControlled,
+    editing: editableHook.editing,
+    focusTab: keyboardHook.focusTab,
+    focusIsWithinComponent: keyboardHook.focusIsWithinComponent,
+    focusVisible: keyboardHook.focusVisible,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    activeTabIndex: selectionHook.selected,
+    navigationProps,
+    tabProps,
+    ...dragDropHook
+  };
+};
+
+export { useTabstrip };
+//# sourceMappingURL=useTabstrip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTabstrip.js","sources":["../src/tabs/useTabstrip.ts"],"sourcesContent":["import {\n  createElement,\n  type KeyboardEvent,\n  type MouseEvent,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { OverflowCollectionHookResult } from \"../responsive\";\nimport {\n  type DragHookResult,\n  type dragStrategy,\n  useDragDrop,\n} from \"./drag-drop\";\nimport { Tab } from \"./Tab\";\nimport type {\n  composableTabProps,\n  exitEditHandler,\n  navigationProps,\n  TabDescriptor,\n  TabElement,\n} from \"./TabsTypes\";\nimport {\n  type EditableItemHookResult,\n  type ExitEditModeHandler,\n  useEditableItem,\n} from \"./useEditableItem\";\nimport {\n  type ContainerNavigationProps,\n  useKeyboardNavigation,\n} from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\ninterface tabstripHookProps {\n  activeTabIndex?: number | null;\n  allowDragDrop?: boolean | dragStrategy;\n  collectionHook: OverflowCollectionHookResult;\n  defaultActiveTabIndex?: number;\n  defaultTabs?: TabDescriptor[];\n  editing?: boolean;\n  enableAddTab: boolean;\n  idRoot: string;\n  innerContainerRef: RefObject<HTMLDivElement>;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  onActiveChange?: (tabIndex: number) => void;\n  onCloseTab?: (indexPosition: number) => void;\n  onEnterEditMode?: () => void;\n  onExitEditMode?: ExitEditModeHandler;\n  onMoveTab?: (fromIndex: number, toIndex: number) => void;\n  orientation: \"horizontal\" | \"vertical\";\n  promptForNewTabName?: boolean;\n  tabs?: TabDescriptor[] | TabElement[];\n}\n\ninterface tabstripHookResult\n  extends DragHookResult,\n    Pick<EditableItemHookResult, \"editing\"> {\n  activateTab: (tabIndex: number) => void;\n  activeTabIndex: number | null;\n  addTab: (indexPosition?: number) => void;\n  closeTab: (indexPosition: number) => void;\n  containerProps: ContainerNavigationProps;\n  controlledSelection: boolean;\n  highlightedIdx: number;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  focusTab: (tabIndex: number, immediateFocus?: boolean) => void;\n  navigationProps: navigationProps;\n  tabProps: composableTabProps;\n}\n\nexport const useTabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowDragDrop = false,\n  collectionHook,\n  defaultActiveTabIndex,\n  editing: editingProp,\n  idRoot,\n  innerContainerRef,\n  keyBoardActivation,\n  onActiveChange,\n  onCloseTab,\n  onEnterEditMode,\n  onExitEditMode,\n  onMoveTab,\n  orientation,\n  promptForNewTabName,\n}: tabstripHookProps): tabstripHookResult & DragHookResult => {\n  const lastSelection = useRef(\n    activeTabIndexProp === null\n      ? null\n      : activeTabIndexProp || defaultActiveTabIndex || 0,\n  );\n  const pendingNewTab = useRef<string | null>(null);\n\n  const overflowedItems = collectionHook.data.filter((item) => item.overflowed);\n\n  const keyboardHook = useKeyboardNavigation({\n    indexPositions: collectionHook.data,\n    keyBoardActivation,\n    orientation,\n    selectedIndex: lastSelection.current,\n  });\n\n  const selectionHook = useSelection({\n    defaultSelected: defaultActiveTabIndex,\n    highlightedIdx: keyboardHook.highlightedIdx,\n    onSelectionChange: onActiveChange,\n    selected: activeTabIndexProp,\n  });\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  const handleDrop = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      onMoveTab?.(fromIndex, toIndex);\n      if (toIndex === -1) {\n        // nothing to do\n      } else {\n        if (selectionHook.selected === null) {\n          // do thing\n        } else if (selectionHook.selected === fromIndex) {\n          selectionHook.activateTab(toIndex);\n        } else if (\n          fromIndex > selectionHook.selected &&\n          toIndex <= selectionHook.selected\n        ) {\n          selectionHook.activateTab(selectionHook.selected + 1);\n        } else if (\n          fromIndex < selectionHook.selected &&\n          toIndex >= selectionHook.selected\n        ) {\n          selectionHook.activateTab(selectionHook.selected - 1);\n        }\n      }\n    },\n    [onMoveTab, selectionHook],\n  );\n\n  const dragDropHook = useDragDrop({\n    allowDragDrop,\n    containerRef: innerContainerRef,\n    extendedDropZone: overflowedItems.length > 0,\n    onDrop: handleDrop,\n    orientation: \"horizontal\",\n    itemQuery: \".saltTab\",\n  });\n\n  const editableHook = useEditableItem({\n    editing: editingProp,\n    highlightedIdx: keyboardHook.highlightedIdx,\n    indexPositions: collectionHook.data,\n    onEnterEditMode,\n    onExitEditMode,\n  });\n\n  const handleExitEditMode = useCallback<exitEditHandler>(\n    (originalValue, editedValue, allowDeactivation, tabIndex) => {\n      editableHook.onExitEditMode(\n        originalValue,\n        editedValue,\n        allowDeactivation,\n        tabIndex,\n      );\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        keyboardHook.focusTab(tabIndex, false, true);\n      }\n    },\n    [editableHook, keyboardHook],\n  );\n\n  const handleClick = useCallback(\n    (evt: MouseEvent, tabIndex: number) => {\n      // releasing the mouse at end of drag will trigger a click, ignore those\n      if (!dragDropHook.isDragging) {\n        keyboardHook.onClick(evt, tabIndex);\n        selectionHook.onClick(evt, tabIndex);\n      }\n    },\n    [dragDropHook.isDragging, keyboardHook, selectionHook],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHook.onKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.onKeyDown(evt);\n      }\n      if (!evt.defaultPrevented) {\n        editableHook.onKeyDown(evt);\n      }\n    },\n    [keyboardHook, selectionHook, editableHook],\n  );\n\n  const navigationProps = {\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  const tabProps: composableTabProps = {\n    onClick: handleClick,\n    onEnterEditMode: editableHook.onEnterEditMode,\n    onExitEditMode: handleExitEditMode,\n  };\n\n  const addTab = useCallback(\n    // The -1 is to account for the AddTab button - we shouldn't assume this\n    (indexPosition: number = collectionHook.data.length - 1) => {\n      const tabId = `${idRoot}-${collectionHook.data.length}`;\n      pendingNewTab.current = tabId;\n\n      const overflowIndicator = collectionHook.data.find(\n        (i) => i.isOverflowIndicator,\n      );\n      const newTabs = collectionHook.data.filter((item) =>\n        item.label?.startsWith(\"New Tab\"),\n      );\n      const count = newTabs.length + 1;\n      collectionHook.dispatch({\n        type: \"add-child-item\",\n        idRoot,\n        element: createElement(Tab, {\n          editable: true,\n          label: `New Tab ${count}`,\n          id: tabId,\n        }),\n        indexPosition: overflowIndicator ? indexPosition - 1 : indexPosition,\n      });\n    },\n    [collectionHook, idRoot],\n  );\n\n  const selectNewTab = useCallback(\n    (tabId: string) => {\n      const tab = collectionHook.data.find((item) => item.id === tabId);\n      if (tab) {\n        selectionHook.activateTab(tab.index);\n        if (promptForNewTabName) {\n          // this will take care of focus, which will be set to the editable input\n          editableHook.setEditing(true);\n        } else {\n          keyboardHook.focusTab(tab.index);\n        }\n      }\n    },\n    [\n      collectionHook.data,\n      editableHook,\n      keyboardHook,\n      promptForNewTabName,\n      selectionHook,\n    ],\n  );\n\n  const closeTab = useCallback(\n    (indexPosition: number) => {\n      if (!collectionHook.isControlled) {\n        collectionHook.dispatch({\n          type: \"remove-item\",\n          indexPosition,\n        });\n        if (collectionHook.data.length > 1) {\n          if (\n            indexPosition === selectionHook.selected &&\n            //TODO need to exclude overflow indicator, addButton\n            indexPosition === collectionHook.data.length - 1\n          ) {\n            selectionHook.activateTab(indexPosition - 1);\n          }\n          // does this have to be here ?\n          onCloseTab?.(indexPosition);\n          if (\n            selectionHook.selected !== null &&\n            indexPosition < selectionHook.selected\n          ) {\n            selectionHook.activateTab(selectionHook.selected - 1);\n          }\n        }\n      } else {\n        onCloseTab?.(indexPosition);\n      }\n    },\n    [collectionHook, onCloseTab, selectionHook],\n  );\n\n  useEffect(() => {\n    if (pendingNewTab.current) {\n      const { current: tabId } = pendingNewTab;\n      pendingNewTab.current = null;\n      selectNewTab(tabId);\n    }\n  }, [collectionHook.data, promptForNewTabName, selectNewTab]);\n\n  return {\n    activateTab: selectionHook.activateTab,\n    addTab,\n    closeTab,\n    containerProps: keyboardHook.containerProps,\n    controlledSelection: selectionHook.isControlled,\n    editing: editableHook.editing,\n    focusTab: keyboardHook.focusTab,\n    focusIsWithinComponent: keyboardHook.focusIsWithinComponent,\n    focusVisible: keyboardHook.focusVisible,\n    highlightedIdx: keyboardHook.highlightedIdx,\n    activeTabIndex: selectionHook.selected,\n    navigationProps,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/tabs-next/TabBar.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltTabBar {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  position: relative;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.saltTabBar-strip {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  flex: 1 1 auto;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.saltTabBar-divider::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-fixed-100);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabBar-inset {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TabBar.css.js.map

package/dist-es/tabs-next/TabBar.css.js.map

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

package/dist-es/tabs-next/TabBar.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './TabBar.css.js';
+
+const withBaseName = makePrefixer("saltTabBar");
+const TabBar = forwardRef(
+  function TabBar2(props, ref) {
+    const { className, children, divider, inset, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tab-bar",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("divider")]: divider,
+            [withBaseName("inset")]: inset
+          },
+          className
+        ),
+        ...rest,
+        ref,
+        children: /* @__PURE__ */ jsx("div", { className: withBaseName("strip"), children })
+      }
+    );
+  }
+);
+
+export { TabBar };
+//# sourceMappingURL=TabBar.js.map

package/dist-es/tabs-next/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sources":["../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport tabBarCss from \"./TabBar.css\";\n\nexport interface TabBarProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Styling variant with a bottom separator. Defaults to false\n   */\n  divider?: boolean;\n  /**\n   * Styling variant with left and right padding. Defaults to false\n   */\n  inset?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTabBar\");\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  function TabBar(props, ref) {\n    const { className, children, divider, inset, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-bar\",\n      css: tabBarCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"divider\")]: divider,\n            [withBaseName(\"inset\")]: inset,\n          },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        <div className={withBaseName(\"strip\")}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"names":["TabBar","tabBarCss"],"mappings":";;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,SAASA,OAAAA,CAAO,KAAA,EAAO,GAAA,EAAK;AAC1B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAS,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAEzD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,WAC3B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA;AAAA,KACnD;AAAA,EAEJ;AACF;;;;"}

package/dist-es/tabs-next/TabListLayoutContext.js

@@ -0,0 +1,10 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const TabListLayoutContext = createContext("TabListLayoutContext", null);
+function useTabListLayout() {
+  return useContext(TabListLayoutContext);
+}
+
+export { TabListLayoutContext, useTabListLayout };
+//# sourceMappingURL=TabListLayoutContext.js.map

package/dist-es/tabs-next/TabListLayoutContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListLayoutContext.js","sources":["../src/tabs-next/TabListLayoutContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\nexport type TabSlotLocation = \"hidden\" | \"main\" | \"overflow\";\n\nexport interface TabListLayoutContextValue {\n  getLocation: (value: string) => TabSlotLocation;\n  overflowActiveValue: string | null;\n  setOverflowActiveValue: (value: string | null) => void;\n  moveOverflowFocus: (\n    key: \"ArrowDown\" | \"ArrowUp\" | \"Home\" | \"End\",\n    value: string,\n  ) => boolean;\n}\n\nexport const TabListLayoutContext =\n  createContext<TabListLayoutContextValue | null>(\"TabListLayoutContext\", null);\n\nexport function useTabListLayout() {\n  return useContext(TabListLayoutContext);\n}\n"],"names":[],"mappings":";;;AAeO,MAAM,oBAAA,GACX,aAAA,CAAgD,sBAAA,EAAwB,IAAI;AAEvE,SAAS,gBAAA,GAAmB;AACjC,EAAA,OAAO,WAAW,oBAAoB,CAAA;AACxC;;;;"}

package/dist-es/tabs-next/TabListNext.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Component class applied to the root element */\n.saltTabListNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  gap: var(--salt-spacing-100);\n  max-width: 100%;\n  min-width: 0;\n  flex: 0 1 auto;\n}\n\n.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n\n.saltTabListNext-measureContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 0;\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n  white-space: nowrap;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TabListNext.css.js.map

package/dist-es/tabs-next/TabListNext.css.js.map

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

package/dist-es/tabs-next/TabListNext.js

@@ -0,0 +1,269 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, useAriaAnnouncer, useIsomorphicLayoutEffect, capitalize } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { useFocusWithRetry } from './hooks/useFocusWithRetry.js';
+import { useOverflow } from './hooks/useOverflow.js';
+import { useOverflowLayoutState } from './hooks/useOverflowLayoutState.js';
+import { useTabListRecovery } from './hooks/useTabListRecovery.js';
+import { useTabRemovalHandler } from './hooks/useTabRemovalHandler.js';
+import { useTabSelectionFocus } from './hooks/useTabSelectionFocus.js';
+import { TabListLayoutContext } from './TabListLayoutContext.js';
+import css_248z from './TabListNext.css.js';
+import { TabOverflowList } from './TabOverflowList.js';
+import { TabSlot } from './TabSlot.js';
+import { TabSlotRegistryContext } from './TabSlotRegistryContext.js';
+import { useTabsNext } from './TabsNextContext.js';
+
+const withBaseName = makePrefixer("saltTabListNext");
+const MAX_FOCUS_RETRY_ATTEMPTS = 120;
+const TabListNext = forwardRef(
+  function TabListNext2(props, ref) {
+    const {
+      appearance = "bordered",
+      activeColor = "primary",
+      children,
+      className,
+      onKeyDown,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tablist-next",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      renderMode,
+      selected,
+      setSelected,
+      setBootstrapOverflowReady,
+      getNext,
+      getPrevious,
+      getFirst,
+      getLast,
+      getIndex,
+      item,
+      itemAt,
+      activeTab,
+      selectionFromOverflowValueRef,
+      menuOpen,
+      setMenuOpen,
+      sortItems,
+      getRemovedItems,
+      getRenderedTab,
+      renderedTabs,
+      removalVersion
+    } = useTabsNext();
+    const tabstripRef = useRef(null);
+    const overflowListRef = useRef(null);
+    const slotMapRef = useRef(/* @__PURE__ */ new Map());
+    const removalRecoveryRafRef = useRef(null);
+    const pendingRemovalRecoveryRef = useRef(false);
+    const pendingRemovalRecoveryRetriesRef = useRef(0);
+    const [slotVersion, setSlotVersion] = useState(0);
+    const handleRef = useForkRef(tabstripRef, ref);
+    const overflowButtonRef = useRef(null);
+    const { announce } = useAriaAnnouncer();
+    const overflowMenuOpen = renderMode === "portal" ? menuOpen : false;
+    const [visibleValues, hiddenValues, isMeasuring] = useOverflow({
+      container: tabstripRef,
+      menuOpen: overflowMenuOpen,
+      selected,
+      tabs: renderedTabs,
+      overflowButton: overflowButtonRef
+    });
+    useEffect(() => {
+      setBootstrapOverflowReady(
+        renderMode === "inline" && renderedTabs.length > 0 && !isMeasuring
+      );
+    }, [
+      isMeasuring,
+      renderMode,
+      renderedTabs.length,
+      setBootstrapOverflowReady
+    ]);
+    const { resolvedOverflowActiveValue, tabListLayoutContext } = useOverflowLayoutState({
+      hiddenValues,
+      menuOpen,
+      overflowMenuOpen,
+      visibleValues
+    });
+    const registerSlot = useCallback(
+      (slotId, element) => {
+        const currentElement = slotMapRef.current.get(slotId) ?? null;
+        if (currentElement === element) {
+          return;
+        }
+        if (element) {
+          slotMapRef.current.set(slotId, element);
+        } else {
+          slotMapRef.current.delete(slotId);
+        }
+        setSlotVersion((currentVersion) => currentVersion + 1);
+      },
+      []
+    );
+    const slotRegistryContext = useMemo(
+      () => ({ registerSlot }),
+      [registerSlot]
+    );
+    const slotAssignments = useMemo(() => {
+      const nextAssignments = /* @__PURE__ */ new Map();
+      for (const value of visibleValues) {
+        nextAssignments.set(value, `main:${value}`);
+      }
+      for (const value of hiddenValues) {
+        nextAssignments.set(
+          value,
+          menuOpen ? `overflow:${value}` : `measure:${value}`
+        );
+      }
+      return {
+        map: nextAssignments,
+        version: slotVersion
+      };
+    }, [hiddenValues, menuOpen, slotVersion, visibleValues]);
+    useIsomorphicLayoutEffect(() => {
+      var _a;
+      if (renderMode !== "portal") {
+        return;
+      }
+      for (const [value, slotId] of slotAssignments.map) {
+        const host = (_a = getRenderedTab(value)) == null ? void 0 : _a.host;
+        const slot = slotMapRef.current.get(slotId);
+        if (host && slot && host.parentElement !== slot) {
+          slot.appendChild(host);
+        }
+      }
+    }, [getRenderedTab, renderMode, slotAssignments]);
+    const handleKeyDown = (event) => {
+      var _a, _b;
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      if (menuOpen) return;
+      const actionMap = {
+        ArrowRight: getNext,
+        ArrowLeft: getPrevious,
+        Home: getFirst,
+        End: getLast
+      };
+      const action = actionMap[event.key];
+      if (action) {
+        event.preventDefault();
+        sortItems();
+        const activeTabId = (_a = activeTab.current) == null ? void 0 : _a.id;
+        if (!activeTabId) return;
+        const nextItem = action(activeTabId);
+        if (nextItem) {
+          (_b = nextItem.element) == null ? void 0 : _b.focus({ preventScroll: true });
+        }
+      }
+    };
+    const getSelectedTabElement = useCallback(() => {
+      var _a, _b, _c;
+      return ((_a = tabstripRef.current) == null ? void 0 : _a.querySelector(
+        '[role="tab"][aria-selected="true"]'
+      )) ?? ((_c = item((_b = activeTab.current) == null ? void 0 : _b.id)) == null ? void 0 : _c.element);
+    }, [item, activeTab]);
+    const { focusElementWithRetry } = useFocusWithRetry({
+      maxAttempts: MAX_FOCUS_RETRY_ATTEMPTS,
+      targetWindow
+    });
+    useTabSelectionFocus({
+      announce,
+      focusElementWithRetry,
+      getRenderedTab,
+      getSelectedTabElement,
+      menuOpen,
+      resolvedOverflowActiveValue,
+      selected,
+      selectionFromOverflowValueRef,
+      targetWindow
+    });
+    const handleTabRemoval = useTabRemovalHandler({
+      activeTab,
+      focusElementWithRetry,
+      getFirst,
+      getIndex,
+      getLast,
+      getRemovedItems,
+      getRenderedTab,
+      getSelectedTabElement,
+      item,
+      itemAt,
+      maxRetryAttempts: MAX_FOCUS_RETRY_ATTEMPTS,
+      menuOpen,
+      overflowButtonRef,
+      overflowListRef,
+      pendingRemovalRecoveryRef,
+      pendingRemovalRecoveryRetriesRef,
+      removalRecoveryRafRef,
+      selected,
+      setSelected,
+      tabstripRef,
+      targetWindow
+    });
+    useTabListRecovery({
+      removalVersion,
+      targetWindow,
+      tabstripRef,
+      overflowListRef,
+      handleTabRemoval,
+      pendingRemovalRecoveryRef,
+      pendingRemovalRecoveryRetriesRef
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tablist",
+        className: clsx(
+          withBaseName(),
+          withBaseName(appearance),
+          withBaseName("horizontal"),
+          withBaseName(`activeColor${capitalize(activeColor)}`),
+          className
+        ),
+        "data-ismeasuring": renderMode === "portal" && isMeasuring ? true : void 0,
+        ref: handleRef,
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children: renderMode === "inline" ? children : /* @__PURE__ */ jsx(TabSlotRegistryContext.Provider, { value: slotRegistryContext, children: /* @__PURE__ */ jsxs(TabListLayoutContext.Provider, { value: tabListLayoutContext, children: [
+          children,
+          visibleValues.map((value) => /* @__PURE__ */ jsx(TabSlot, { slotId: `main:${value}`, value }, value)),
+          !menuOpen && hiddenValues.length > 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              role: "presentation",
+              className: withBaseName("measureContainer"),
+              children: hiddenValues.map((value) => /* @__PURE__ */ jsx(
+                TabSlot,
+                {
+                  slotId: `measure:${value}`,
+                  value
+                },
+                `measure-${value}`
+              ))
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            TabOverflowList,
+            {
+              buttonRef: overflowButtonRef,
+              hiddenValues,
+              open: menuOpen,
+              order: renderedTabs.length,
+              setOpen: setMenuOpen,
+              ref: overflowListRef
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+
+export { TabListNext };
+//# sourceMappingURL=TabListNext.js.map