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

package/dist-cjs/tabs/useTabstrip.js

@@ -0,0 +1,215 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Tab = require('./Tab.js');
+var useKeyboardNavigation = require('./useKeyboardNavigation.js');
+var useDragDrop = require('./drag-drop/useDragDrop.js');
+var useSelection = require('./useSelection.js');
+var useEditableItem = require('./useEditableItem.js');
+
+const useTabstrip = ({
+  activeTabIndex: activeTabIndexProp,
+  allowDragDrop = false,
+  collectionHook,
+  defaultActiveTabIndex,
+  editing: editingProp,
+  idRoot,
+  innerContainerRef,
+  keyBoardActivation,
+  onActiveChange,
+  onCloseTab,
+  onEnterEditMode,
+  onExitEditMode,
+  onMoveTab,
+  orientation,
+  promptForNewTabName
+}) => {
+  const lastSelection = React.useRef(
+    activeTabIndexProp === null ? null : activeTabIndexProp || defaultActiveTabIndex || 0
+  );
+  const pendingNewTab = React.useRef(null);
+  const overflowedItems = collectionHook.data.filter((item) => item.overflowed);
+  const keyboardHook = useKeyboardNavigation.useKeyboardNavigation({
+    indexPositions: collectionHook.data,
+    keyBoardActivation,
+    orientation,
+    selectedIndex: lastSelection.current
+  });
+  const selectionHook = useSelection.useSelection({
+    defaultSelected: defaultActiveTabIndex,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    onSelectionChange: onActiveChange,
+    selected: activeTabIndexProp
+  });
+  lastSelection.current = selectionHook.selected;
+  const handleDrop = React.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.useDragDrop({
+    allowDragDrop,
+    containerRef: innerContainerRef,
+    extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".saltTab"
+  });
+  const editableHook = useEditableItem.useEditableItem({
+    editing: editingProp,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    indexPositions: collectionHook.data,
+    onEnterEditMode,
+    onExitEditMode
+  });
+  const handleExitEditMode = React.useCallback(
+    (originalValue, editedValue, allowDeactivation, tabIndex) => {
+      editableHook.onExitEditMode(
+        originalValue,
+        editedValue,
+        allowDeactivation,
+        tabIndex
+      );
+      if (!allowDeactivation) {
+        keyboardHook.focusTab(tabIndex, false, true);
+      }
+    },
+    [editableHook, keyboardHook]
+  );
+  const handleClick = React.useCallback(
+    (evt, tabIndex) => {
+      if (!dragDropHook.isDragging) {
+        keyboardHook.onClick(evt, tabIndex);
+        selectionHook.onClick(evt, tabIndex);
+      }
+    },
+    [dragDropHook.isDragging, keyboardHook, selectionHook]
+  );
+  const handleKeyDown = React.useCallback(
+    (evt) => {
+      keyboardHook.onKeyDown(evt);
+      if (!evt.defaultPrevented) {
+        selectionHook.onKeyDown(evt);
+      }
+      if (!evt.defaultPrevented) {
+        editableHook.onKeyDown(evt);
+      }
+    },
+    [keyboardHook, selectionHook, editableHook]
+  );
+  const navigationProps2 = {
+    onFocus: keyboardHook.onFocus,
+    onKeyDown: handleKeyDown
+  };
+  const tabProps = {
+    onClick: handleClick,
+    onEnterEditMode: editableHook.onEnterEditMode,
+    onExitEditMode: handleExitEditMode
+  };
+  const addTab = React.useCallback(
+    (indexPosition = collectionHook.data.length - 1) => {
+      const tabId = pendingNewTab.current = `${idRoot}-${collectionHook.data.length}`;
+      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: React.createElement(Tab.Tab, {
+          editable: true,
+          label: `New Tab ${count}`,
+          id: tabId
+        }),
+        indexPosition: overflowIndicator ? indexPosition - 1 : indexPosition
+      });
+    },
+    [collectionHook, idRoot]
+  );
+  const selectNewTab = React.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 = React.useCallback(
+    (indexPosition) => {
+      if (!collectionHook.isControlled) {
+        collectionHook.dispatch({
+          type: "remove-item",
+          indexPosition
+        });
+        if (collectionHook.data.length > 1) {
+          if (indexPosition === selectionHook.selected && 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]
+  );
+  React.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: navigationProps2,
+    tabProps,
+    ...dragDropHook
+  };
+};
+
+exports.useTabstrip = useTabstrip;
+//# sourceMappingURL=useTabstrip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTabstrip.js","sources":["../src/tabs/useTabstrip.ts"],"sourcesContent":["import {\n  createElement,\n  KeyboardEvent,\n  MouseEvent,\n  RefObject,\n  useEffect,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { Tab } from \"./Tab\";\nimport {\n  ContainerNavigationProps,\n  useKeyboardNavigation,\n} from \"./useKeyboardNavigation\";\nimport { dragStrategy, useDragDrop, DragHookResult } from \"./drag-drop\";\nimport { useSelection } from \"./useSelection\";\nimport {\n  ExitEditModeHandler,\n  useEditableItem,\n  EditableItemHookResult,\n} from \"./useEditableItem\";\nimport { OverflowCollectionHookResult } from \"../responsive\";\n\nimport {\n  composableTabProps,\n  exitEditHandler,\n  navigationProps,\n  TabDescriptor,\n  TabElement,\n} from \"./TabsTypes\";\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 =\n        (pendingNewTab.current = `${idRoot}-${collectionHook.data.length}`);\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":["useRef","useKeyboardNavigation","useSelection","useCallback","useDragDrop","useEditableItem","navigationProps","createElement","Tab","useEffect"],"mappings":"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"}

package/dist-cjs/tabs-next/OverflowMenu.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var reactOverflow = require('@fluentui/react-overflow');
+require('../dropdown/DropdownBase.js');
+require('../dropdown/DropdownButton.js');
+var Dropdown = require('../dropdown/Dropdown.js');
+require('../responsive/useResizeObserver.js');
+require('../form-field-context-legacy/FormFieldLegacyContext.js');
+
+const OverflowMenu = React.forwardRef(
+  function OverflowMenu2(props, forwardedRef) {
+    const { tabs, ...rest } = props;
+    const { ref, overflowCount, isOverflowing } = reactOverflow.useOverflowMenu();
+    const handleRef = core.useForkRef(ref, forwardedRef);
+    const itemVisibility = reactOverflow.useOverflowContext(
+      (context) => context.itemVisibility
+    );
+    const tabList = tabs.filter(({ value }) => !itemVisibility[value]);
+    if (!isOverflowing)
+      return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown, {
+      "aria-label": `${overflowCount} more tabs`,
+      triggerComponent: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+        "aria-label": "More tabs",
+        variant: "secondary",
+        role: "combobox",
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.OverflowMenuIcon, {
+          "aria-hidden": true,
+          style: { margin: 0 }
+        })
+      }),
+      width: "auto",
+      ref: handleRef,
+      source: tabList,
+      selected: null,
+      ...rest
+    });
+  }
+);
+
+exports.OverflowMenu = OverflowMenu;
+//# sourceMappingURL=OverflowMenu.js.map

package/dist-cjs/tabs-next/OverflowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowMenu.js","sources":["../src/tabs-next/OverflowMenu.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from \"react\";\nimport { Button, useForkRef } from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\n\nimport { useOverflowContext, useOverflowMenu } from \"@fluentui/react-overflow\";\nimport { Dropdown, DropdownProps } from \"../dropdown\";\n\ntype TabValue = {\n  value: string;\n  label: ReactNode;\n};\n\nexport interface OverflowMenuProps extends DropdownProps<TabValue> {\n  tabs: TabValue[];\n}\n\nexport const OverflowMenu = forwardRef<HTMLDivElement, OverflowMenuProps>(\n  function OverflowMenu(props, forwardedRef) {\n    const { tabs, ...rest } = props;\n    const { ref, overflowCount, isOverflowing } =\n      useOverflowMenu<HTMLDivElement>();\n    const handleRef = useForkRef(ref, forwardedRef);\n    const itemVisibility = useOverflowContext(\n      (context) => context.itemVisibility\n    );\n\n    const tabList = tabs.filter(({ value }) => !itemVisibility[value]);\n\n    if (!isOverflowing) return null;\n\n    return (\n      <Dropdown<TabValue>\n        aria-label={`${overflowCount} more tabs`}\n        triggerComponent={\n          <Button aria-label=\"More tabs\" variant=\"secondary\" role=\"combobox\">\n            <OverflowMenuIcon aria-hidden style={{ margin: 0 }} />\n          </Button>\n        }\n        width=\"auto\"\n        ref={handleRef}\n        source={tabList}\n        selected={null}\n        {...rest}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","OverflowMenu","useOverflowMenu","useForkRef","useOverflowContext","jsx","Dropdown","Button","OverflowMenuIcon"],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAM,YAAe,GAAAA,gBAAA;AAAA,EAC1B,SAASC,aAAa,CAAA,KAAA,EAAO,YAAc,EAAA;AACzC,IAAM,MAAA,EAAE,IAAS,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC1B,IAAA,MAAM,EAAE,GAAA,EAAK,aAAe,EAAA,aAAA,KAC1BC,6BAAgC,EAAA,CAAA;AAClC,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,YAAY,CAAA,CAAA;AAC9C,IAAA,MAAM,cAAiB,GAAAC,gCAAA;AAAA,MACrB,CAAC,YAAY,OAAQ,CAAA,cAAA;AAAA,KACvB,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,KAAK,MAAO,CAAA,CAAC,EAAE,KAAM,EAAA,KAAM,CAAC,cAAA,CAAe,KAAM,CAAA,CAAA,CAAA;AAEjE,IAAA,IAAI,CAAC,aAAA;AAAe,MAAO,OAAA,IAAA,CAAA;AAE3B,IAAA,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,MACC,cAAY,CAAG,EAAA,aAAA,CAAA,UAAA,CAAA;AAAA,MACf,kCACGD,cAAA,CAAAE,WAAA,EAAA;AAAA,QAAO,YAAW,EAAA,WAAA;AAAA,QAAY,OAAQ,EAAA,WAAA;AAAA,QAAY,IAAK,EAAA,UAAA;AAAA,QACtD,QAAC,kBAAAF,cAAA,CAAAG,sBAAA,EAAA;AAAA,UAAiB,aAAW,EAAA,IAAA;AAAA,UAAC,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAE,EAAA;AAAA,SAAG,CAAA;AAAA,OACtD,CAAA;AAAA,MAEF,KAAM,EAAA,MAAA;AAAA,MACN,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA,OAAA;AAAA,MACR,QAAU,EAAA,IAAA;AAAA,MACT,GAAG,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/tabs-next/TabNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext-primary {\n  --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n  --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main::after {\n  top: 0;\n}\n\n.saltTabNext-inline::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n  background: none;\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n  background: var(--tabNext-background-active);\n  border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TabNext.css.js.map

package/dist-cjs/tabs-next/TabNext.css.js.map

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

package/dist-cjs/tabs-next/TabNext.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var React = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var TabNext$1 = require('./TabNext.css.js');
+var clsx = require('clsx');
+var reactOverflow = require('@fluentui/react-overflow');
+var TabNextContext = require('./TabNextContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+
+const withBaseName = core.makePrefixer("saltTabNext");
+const TabNext = React.forwardRef(function Tab(props, ref) {
+  const {
+    children,
+    className,
+    disabled: disabledProp,
+    onClick,
+    onFocus,
+    value,
+    ...rest
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-tab-next",
+    css: TabNext$1,
+    window: targetWindow
+  });
+  const {
+    activeColor,
+    isActive,
+    activate,
+    isFocusable,
+    setFocusable,
+    disabled: tabstripDisabled,
+    unregisterTab,
+    registerTab,
+    variant
+  } = TabNextContext.useTabs();
+  const active = isActive(value);
+  const focusable = isFocusable(value);
+  const disabled = tabstripDisabled || disabledProp;
+  const handleClick = (event) => {
+    activate(event);
+    onClick == null ? void 0 : onClick(event);
+  };
+  const handleFocus = (event) => {
+    setFocusable(value);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  React.useEffect(() => {
+    registerTab({ value, label: children });
+    return () => unregisterTab(value);
+  }, [children, registerTab, unregisterTab, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactOverflow.OverflowItem, {
+    id: value,
+    priority: active ? 2 : 1,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: withBaseName("wrapper"),
+      children: /* @__PURE__ */ jsxRuntime.jsx("button", {
+        className: clsx__default["default"](
+          withBaseName(),
+          withBaseName(variant),
+          withBaseName(activeColor),
+          className
+        ),
+        "data-value": value,
+        "aria-selected": active,
+        disabled,
+        value,
+        ref,
+        role: "tab",
+        onClick: handleClick,
+        onFocus: handleFocus,
+        tabIndex: focusable && !disabled ? 0 : -1,
+        type: "button",
+        ...rest,
+        children
+      })
+    })
+  });
+});
+
+exports.TabNext = TabNext;
+//# sourceMappingURL=TabNext.js.map

package/dist-cjs/tabs-next/TabNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  forwardRef,\n  ReactElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  FocusEvent,\n  useEffect,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabCss from \"./TabNext.css\";\nimport clsx from \"clsx\";\nimport { OverflowItem } from \"@fluentui/react-overflow\";\nimport { useTabs } from \"./TabNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"button\"> {\n  /* Value prop is mandatory and must be unique in order for overflow to work. */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLButtonElement, TabNextProps>(function Tab(\n  props,\n  ref\n): ReactElement<TabNextProps> {\n  const {\n    children,\n    className,\n    disabled: disabledProp,\n    onClick,\n    onFocus,\n    value,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next\",\n    css: tabCss,\n    window: targetWindow,\n  });\n  const {\n    activeColor,\n    isActive,\n    activate,\n    isFocusable,\n    setFocusable,\n    disabled: tabstripDisabled,\n    unregisterTab,\n    registerTab,\n    variant,\n  } = useTabs();\n  const active = isActive(value);\n  const focusable = isFocusable(value);\n  const disabled = tabstripDisabled || disabledProp;\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    activate(event);\n    onClick?.(event);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusable(value);\n    onFocus?.(event);\n  };\n\n  useEffect(() => {\n    registerTab({ value, label: children });\n    return () => unregisterTab(value);\n  }, [children, registerTab, unregisterTab, value]);\n\n  return (\n    <OverflowItem id={value} priority={active ? 2 : 1}>\n      <div className={withBaseName(\"wrapper\")}>\n        <button\n          className={clsx(\n            withBaseName(),\n            withBaseName(variant),\n            withBaseName(activeColor),\n            className\n          )}\n          data-value={value}\n          aria-selected={active}\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          role=\"tab\"\n          onClick={handleClick}\n          onFocus={handleFocus}\n          tabIndex={focusable && !disabled ? 0 : -1}\n          type=\"button\"\n          {...rest}\n        >\n          {children}\n        </button>\n      </div>\n    </OverflowItem>\n  );\n});\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tabCss","useTabs","useEffect","jsx","OverflowItem","clsx"],"mappings":"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"}

package/dist-cjs/tabs-next/TabNextContext.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@salt-ds/core');
+var React = require('react');
+
+const TabsContext = core.createContext("TabsContext", {
+  activeColor: "primary",
+  disabled: false,
+  activate: () => void 0,
+  isActive: () => false,
+  setFocusable: () => void 0,
+  isFocusable: () => false,
+  registerTab: () => void 0,
+  unregisterTab: () => void 0,
+  variant: "main"
+});
+function useTabs() {
+  return React.useContext(TabsContext);
+}
+
+exports.TabsContext = TabsContext;
+exports.useTabs = useTabs;
+//# sourceMappingURL=TabNextContext.js.map

package/dist-cjs/tabs-next/TabNextContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextContext.js","sources":["../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { ReactNode, SyntheticEvent, useContext } from \"react\";\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport interface TabsContextValue {\n  activeColor: \"primary\" | \"secondary\";\n  disabled?: boolean;\n  activate: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isActive: (id: string) => boolean;\n  setFocusable: (id: string) => void;\n  isFocusable: (id: string) => boolean;\n  registerTab: (tab: TabValue) => void;\n  unregisterTab: (id: string) => void;\n  variant: \"main\" | \"inline\";\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n  activeColor: \"primary\",\n  disabled: false,\n  activate: () => undefined,\n  isActive: () => false,\n  setFocusable: () => undefined,\n  isFocusable: () => false,\n  registerTab: () => undefined,\n  unregisterTab: () => undefined,\n  variant: \"main\",\n});\n\nexport function useTabs() {\n  return useContext(TabsContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AAoBa,MAAA,WAAA,GAAcA,mBAAgC,aAAe,EAAA;AAAA,EACxE,WAAa,EAAA,SAAA;AAAA,EACb,QAAU,EAAA,KAAA;AAAA,EACV,UAAU,MAAM,KAAA,CAAA;AAAA,EAChB,UAAU,MAAM,KAAA;AAAA,EAChB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;AAAA,EACrB,OAAS,EAAA,MAAA;AACX,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAOC,iBAAW,WAAW,CAAA,CAAA;AAC/B;;;;;"}

package/dist-cjs/tabs-next/TabstripNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n.saltTabstripNext-container {\n  display: block;\n  width: 100%;\n  height: fit-content;\n  position: relative;\n}\n\n.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  box-sizing: border-box;\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TabstripNext.css.js.map

package/dist-cjs/tabs-next/TabstripNext.css.js.map

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

package/dist-cjs/tabs-next/TabstripNext.js

@@ -0,0 +1,193 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var React = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var reactOverflow = require('@fluentui/react-overflow');
+var OverflowMenu = require('./OverflowMenu.js');
+var TabstripNext$1 = require('./TabstripNext.css.js');
+var TabNextContext = require('./TabNextContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+
+const withBaseName = core.makePrefixer("saltTabstripNext");
+const TabstripNext = React.forwardRef(
+  function TabstripNext2(props, ref) {
+    const {
+      activeColor = "primary",
+      align = "left",
+      children,
+      className,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      onKeyDown,
+      style,
+      variant = "main",
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tabstrip-next",
+      css: TabstripNext$1,
+      window: targetWindow
+    });
+    const tabstripRef = React.useRef(null);
+    const handleRef = core.useForkRef(tabstripRef, ref);
+    const [value, setValue] = core.useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: "TabstripNext",
+      state: "selected"
+    });
+    const [focusable, setFocusableState] = React.useState(value);
+    const [overflowOpen, setOverflowOpen] = React.useState(false);
+    const activate = React.useCallback(
+      (event) => {
+        const newValue = event.currentTarget.value;
+        setValue(newValue);
+        if (value !== newValue) {
+          onChange == null ? void 0 : onChange(event, { value: newValue });
+        }
+      },
+      [onChange, value, setValue]
+    );
+    const isActive = React.useCallback(
+      (id) => {
+        return value === id;
+      },
+      [value]
+    );
+    const setFocusable = React.useCallback((id) => {
+      setFocusableState(id);
+    }, []);
+    const isFocusable = React.useCallback(
+      (id) => {
+        return focusable === id || !focusable;
+      },
+      [focusable]
+    );
+    const [tabList, setTabList] = React.useState([]);
+    const registerTab = React.useCallback((tab) => {
+      setTabList((list) => list.concat([tab]));
+    }, []);
+    const unregisterTab = React.useCallback((id) => {
+      setTabList((list) => list.filter((item) => item.value !== id));
+    }, []);
+    const handleKeyDown = (event) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (overflowOpen)
+        return;
+      const elements = Array.from(
+        (_b = (_a = tabstripRef.current) == null ? void 0 : _a.querySelectorAll(
+          `div:not([data-overflowing]) > [role="tab"]:not([disabled])`
+        )) != null ? _b : []
+      );
+      const currentIndex = elements.findIndex(
+        (element) => element === (targetWindow == null ? void 0 : targetWindow.document.activeElement)
+      );
+      if (currentIndex < 0)
+        return;
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          (_c = elements[Math.min(currentIndex + 1, elements.length)]) == null ? void 0 : _c.focus();
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          (_d = elements[Math.max(0, currentIndex - 1)]) == null ? void 0 : _d.focus();
+          break;
+        case "Home":
+          (_e = elements[0]) == null ? void 0 : _e.focus();
+          break;
+        case "End":
+          (_f = elements[elements.length - 1]) == null ? void 0 : _f.focus();
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleOverflowItemClick = (event, item) => {
+      if (item) {
+        setValue(item.value);
+        requestAnimationFrame(() => {
+          var _a;
+          const element = (_a = tabstripRef.current) == null ? void 0 : _a.querySelector(
+            `[value="${item.value}"]`
+          );
+          if (element instanceof HTMLElement) {
+            element == null ? void 0 : element.focus();
+          }
+        });
+        if (value !== item.value) {
+          onChange == null ? void 0 : onChange(event, { value: item.value });
+        }
+      }
+    };
+    const handleOverflowOpenChange = (isOpen) => {
+      setOverflowOpen(isOpen);
+    };
+    const contextValue = React.useMemo(
+      () => ({
+        activate,
+        isActive,
+        setFocusable,
+        isFocusable,
+        registerTab,
+        unregisterTab,
+        variant,
+        activeColor
+      }),
+      [
+        activate,
+        isActive,
+        setFocusable,
+        isFocusable,
+        registerTab,
+        unregisterTab,
+        variant,
+        activeColor
+      ]
+    );
+    const tabstripStyle = {
+      "--tabstripNext-justifyContent": align,
+      ...style
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(TabNextContext.TabsContext.Provider, {
+      value: contextValue,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: clsx__default["default"](withBaseName("container"), withBaseName(variant)),
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactOverflow.Overflow, {
+          ref: handleRef,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            role: "tablist",
+            className: clsx__default["default"](
+              withBaseName(),
+              withBaseName("horizontal"),
+              className
+            ),
+            onKeyDown: handleKeyDown,
+            style: tabstripStyle,
+            ...rest,
+            children: [
+              children,
+              /* @__PURE__ */ jsxRuntime.jsx(OverflowMenu.OverflowMenu, {
+                tabs: tabList,
+                onOpenChange: handleOverflowOpenChange,
+                onSelectionChange: handleOverflowItemClick
+              })
+            ]
+          })
+        })
+      })
+    });
+  }
+);
+
+exports.TabstripNext = TabstripNext;
+//# sourceMappingURL=TabstripNext.js.map