@salt-ds/lab 1.0.0-alpha.53 → 1.0.0-alpha.55

package/dist-types/tabs-next/TabOverflowList.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithoutRef, type Dispatch, type ReactNode, type Ref, type RefObject, type SetStateAction } from "react";
+interface TabOverflowListProps extends ComponentPropsWithoutRef<"button"> {
+    buttonRef?: Ref<HTMLButtonElement>;
+    tabstripRef: RefObject<HTMLDivElement>;
+    children?: ReactNode;
+    isMeasuring?: boolean;
+    open: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+}
+export declare const TabOverflowList: import("react").ForwardRefExoticComponent<TabOverflowListProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/tabs-next/TabsNext.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef, type ReactNode, type SyntheticEvent } from "react";
+export interface TabsNextProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    children?: ReactNode;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string;
+    /**
+     * The value. Use when the component is controlled.
+     */
+    value?: string;
+    /**
+     * Callback fired when the selection changes. The event will be null when selection is moved automatically.
+     */
+    onChange?: (event: SyntheticEvent | null, value: string) => void;
+}
+export declare const TabsNext: import("react").ForwardRefExoticComponent<TabsNextProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/tabs-next/TabsNextContext.d.ts

@@ -0,0 +1,21 @@
+import { type Dispatch, type MutableRefObject, type SetStateAction, type SyntheticEvent } from "react";
+import type { useCollection } from "./hooks/useCollection";
+export interface Item {
+    id: string;
+    value: string;
+    element: HTMLElement;
+}
+export interface TabsNextContextValue extends Omit<ReturnType<typeof useCollection>, "registerItem"> {
+    registerTab: (item: Item) => () => void;
+    registerPanel: (id: string, value: string) => () => void;
+    getPanelId: (value: string) => string | undefined;
+    getTabId: (value: string) => string | undefined;
+    selected?: string;
+    setSelected: (event: SyntheticEvent, value: string) => void;
+    activeTab: MutableRefObject<Pick<Item, "id" | "value"> | undefined>;
+    returnFocus: MutableRefObject<string | undefined>;
+    menuOpen: boolean;
+    setMenuOpen: Dispatch<SetStateAction<boolean>>;
+}
+export declare const TabsNextContext: import("react").Context<TabsNextContextValue>;
+export declare function useTabsNext(): TabsNextContextValue;

package/dist-types/tabs-next/hooks/useCollection.d.ts

@@ -0,0 +1,18 @@
+export interface Item {
+    id: string;
+    element?: HTMLElement | null;
+    value: string;
+}
+interface UseCollectionProps {
+    wrap: boolean;
+}
+export declare function useCollection({ wrap }: UseCollectionProps): {
+    registerItem: (item: Item) => () => import("react").MutableRefObject<Item[]>;
+    item: (id?: string | null | undefined) => Item | null;
+    getNext: (current: string) => Item | null;
+    getPrevious: (current: string) => Item | null;
+    getFirst: () => Item | null;
+    getLast: () => Item | null;
+    items: Item[];
+};
+export {};

package/dist-types/tabs-next/hooks/useFocusOutside.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from "react";
+export declare function useFocusOutside(elementRef: RefObject<HTMLElement>, onFocusOutside: () => void, enabled: boolean, ignore?: string): void;

package/dist-types/tabs-next/hooks/useOverflow.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode, type RefObject } from "react";
+import type { Item } from "./useCollection";
+interface UseOverflowProps {
+    container: RefObject<HTMLElement>;
+    selected?: string;
+    children: ReactNode;
+    tabs: Item[];
+    overflowButton: RefObject<HTMLButtonElement>;
+}
+export declare function useOverflow({ tabs, container, overflowButton, children, selected, }: UseOverflowProps): readonly [(string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], (string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], false] | readonly [(string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], readonly [], true];
+export {};

package/dist-types/tabs-next/index.d.ts

@@ -1,2 +1,7 @@
 export * from "./TabNext";
-export * from "./TabstripNext";
+export * from "./TabListNext";
+export * from "./TabsNext";
+export * from "./TabNextPanel";
+export * from "./TabBar";
+export * from "./TabNextTrigger";
+export * from "./TabNextAction";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.53",
+  "version": "1.0.0-alpha.55",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -12,8 +12,11 @@
   "sideEffects": false,
   "dependencies": {
     "@floating-ui/react": "^0.26.5",
-    "@fluentui/react-overflow": "^9.0.19",
     "@internationalized/date": "^3.5.5",
+    "@salt-ds/core": "^1.37.2",
+    "@salt-ds/icons": "^1.13.0",
+    "@salt-ds/styles": "0.2.1",
+    "@salt-ds/window": "0.1.1",
     "@types/react-window": "^1.8.2",
     "aria-hidden": "^1.1.1",
     "attr-accept": "^2.0.0",
@@ -25,11 +28,8 @@
     "react-color": "^2.19.3",
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
-    "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.37.0",
-    "@salt-ds/styles": "^0.2.1",
-    "@salt-ds/window": "^0.1.1",
-    "@salt-ds/icons": "^1.12.1"
+    "tabbable": "^6.0.0",
+    "tinycolor2": "^1.4.2"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0",
@@ -46,6 +46,7 @@
     "provenance": true
   },
   "scripts": {
+    "build": "yarn node ../../scripts/build.mjs",
     "bundle:css": "yarn node ./scripts/build.mjs"
   },
   "files": [
@@ -53,7 +54,7 @@
     "dist-cjs",
     "dist-es",
     "dist-types",
-    "README.md"
+    "CHANGELOG.md"
   ],
   "module": "dist-es/index.js",
   "typings": "dist-types/index.d.ts"

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

@@ -1,48 +0,0 @@
-'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 reactOverflow = require('@fluentui/react-overflow');
-require('../dropdown/DropdownBase.js');
-require('../dropdown/DropdownButton.js');
-var Dropdown = require('../dropdown/Dropdown.js');
-require('../form-field-context-legacy/FormFieldLegacyContext.js');
-require('../responsive/useResizeObserver.js');
-
-const OverflowMenu = react.forwardRef(
-  function OverflowMenu2(props, forwardedRef) {
-    const { tabs, ...rest } = props;
-    const { ref, overflowCount, isOverflowing } = reactOverflow.useOverflowMenu();
-    const { OverflowIcon } = core.useIcon();
-    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(OverflowIcon, {
-          "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

@@ -1 +0,0 @@
-{"version":3,"file":"OverflowMenu.js","sources":["../src/tabs-next/OverflowMenu.tsx"],"sourcesContent":["import { Button, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { useOverflowContext, useOverflowMenu } from \"@fluentui/react-overflow\";\nimport { Dropdown, type 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 { OverflowIcon } = useIcon();\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            <OverflowIcon 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","useIcon","useForkRef","useOverflowContext","jsx","Dropdown","Button"],"mappings":";;;;;;;;;;;;;;AAeO,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,EAAE,YAAa,EAAA,GAAIC,YAAQ,EAAA,CAAA;AACjC,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,CAAA,YAAA,EAAA;AAAA,UAAa,aAAW,EAAA,IAAA;AAAA,UAAC,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAE,EAAA;AAAA,SAAG,CAAA;AAAA,OAClD,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/TabstripNext.css.js

@@ -1,6 +0,0 @@
-'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

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

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

@@ -1,193 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactOverflow = require('@fluentui/react-overflow');
-var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var clsx = require('clsx');
-var react = require('react');
-var OverflowMenu = require('./OverflowMenu.js');
-var TabNextContext = require('./TabNextContext.js');
-var TabstripNext$1 = require('./TabstripNext.css.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]
-    );
-    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

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

@@ -1 +0,0 @@
-{"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { Overflow } from \"@fluentui/react-overflow\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type ReactNode,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SelectionChangeHandler } from \"../common-hooks\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport { TabsContext } from \"./TabNextContext\";\nimport tabstripCss from \"./TabstripNext.css\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /* Styling active color variant. Defaults to \"primary\". */\n  activeColor?: \"primary\" | \"secondary\";\n  /* Tabs alignment. Defaults to \"left\" */\n  align?: \"left\" | \"center\" | \"right\";\n  /* Value for the uncontrolled version. */\n  value?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* Initial value for the uncontrolled version. */\n  defaultValue?: string;\n  /* The Tabs variant */\n  variant?: \"main\" | \"inline\";\n}\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      activeColor = \"primary\",\n      align = \"left\",\n      children,\n      className,\n      value: valueProp,\n      defaultValue,\n      onChange,\n      onKeyDown,\n      style,\n      variant = \"main\",\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabstrip-next\",\n      css: tabstripCss,\n      window: targetWindow,\n    });\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"TabstripNext\",\n      state: \"selected\",\n    });\n    const [focusable, setFocusableState] = useState<string | undefined>(value);\n    const [overflowOpen, setOverflowOpen] = useState(false);\n\n    const activate = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        const newValue = event.currentTarget.value;\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, { value: newValue });\n        }\n      },\n      [onChange, value],\n    );\n\n    const isActive = useCallback(\n      (id: string | undefined) => {\n        return value === id;\n      },\n      [value],\n    );\n\n    const setFocusable = useCallback((id: string | undefined) => {\n      setFocusableState(id);\n    }, []);\n\n    const isFocusable = useCallback(\n      (id: string | undefined) => {\n        return focusable === id || !focusable;\n      },\n      [focusable],\n    );\n\n    const [tabList, setTabList] = useState<TabValue[]>([]);\n    const registerTab = useCallback((tab: TabValue) => {\n      setTabList((list) => list.concat([tab]));\n    }, []);\n\n    const unregisterTab = useCallback((id: string) => {\n      setTabList((list) => list.filter((item) => item.value !== id));\n    }, []);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (overflowOpen) return;\n\n      const elements: HTMLElement[] = Array.from(\n        tabstripRef.current?.querySelectorAll(\n          `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`,\n        ) ?? [],\n      );\n\n      const currentIndex = elements.findIndex(\n        (element) => element === targetWindow?.document.activeElement,\n      );\n\n      if (currentIndex < 0) return;\n\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          elements[Math.max(0, currentIndex - 1)]?.focus();\n          break;\n        case \"Home\":\n          elements[0]?.focus();\n          break;\n        case \"End\":\n          elements[elements.length - 1]?.focus();\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n      event,\n      item,\n    ) => {\n      if (item) {\n        setValue(item.value);\n        requestAnimationFrame(() => {\n          const element = tabstripRef.current?.querySelector(\n            `[value=\"${item.value}\"]`,\n          );\n          if (element instanceof HTMLElement) {\n            element?.focus();\n          }\n        });\n        if (value !== item.value) {\n          onChange?.(event, { value: item.value });\n        }\n      }\n    };\n\n    const handleOverflowOpenChange = (isOpen: boolean) => {\n      setOverflowOpen(isOpen);\n    };\n\n    const contextValue = useMemo(\n      () => ({\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      }),\n      [\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      ],\n    );\n\n    const tabstripStyle = {\n      \"--tabstripNext-justifyContent\": align,\n      ...style,\n    };\n\n    return (\n      <TabsContext.Provider value={contextValue}>\n        <div className={clsx(withBaseName(\"container\"), withBaseName(variant))}>\n          <Overflow ref={handleRef}>\n            <div\n              role=\"tablist\"\n              className={clsx(\n                withBaseName(),\n                withBaseName(\"horizontal\"),\n                className,\n              )}\n              onKeyDown={handleKeyDown}\n              style={tabstripStyle}\n              {...rest}\n            >\n              {children}\n              <OverflowMenu\n                tabs={tabList}\n                onOpenChange={handleOverflowOpenChange}\n                onSelectionChange={handleOverflowItemClick}\n              />\n            </div>\n          </Overflow>\n        </div>\n      </TabsContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabstripNext","useWindow","useComponentCssInjection","tabstripCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","TabsContext","clsx","Overflow","jsxs","OverflowMenu"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAuB7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,WAAc,GAAA,SAAA;AAAA,MACd,KAAQ,GAAA,MAAA;AAAA,MACR,QAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACP,YAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAU,GAAA,MAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AACJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,WAAA,GAAcC,aAAuB,IAAI,CAAA,CAAA;AAC/C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AAE7C,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,kBAAc,CAAA;AAAA,MACtC,UAAY,EAAA,SAAA;AAAA,MACZ,OAAS,EAAA,YAAA;AAAA,MACT,IAAM,EAAA,cAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AACD,IAAA,MAAM,CAAC,SAAA,EAAW,iBAAiB,CAAA,GAAIC,eAA6B,KAAK,CAAA,CAAA;AACzE,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAEtD,IAAA,MAAM,QAAW,GAAAC,iBAAA;AAAA,MACf,CAAC,KAA6C,KAAA;AAC5C,QAAM,MAAA,QAAA,GAAW,MAAM,aAAc,CAAA,KAAA,CAAA;AACrC,QAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AACjB,QAAA,IAAI,UAAU,QAAU,EAAA;AACtB,UAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAS,EAAA,CAAA,CAAA;AAAA,SACtC;AAAA,OACF;AAAA,MACA,CAAC,UAAU,KAAK,CAAA;AAAA,KAClB,CAAA;AAEA,IAAA,MAAM,QAAW,GAAAA,iBAAA;AAAA,MACf,CAAC,EAA2B,KAAA;AAC1B,QAAA,OAAO,KAAU,KAAA,EAAA,CAAA;AAAA,OACnB;AAAA,MACA,CAAC,KAAK,CAAA;AAAA,KACR,CAAA;AAEA,IAAM,MAAA,YAAA,GAAeA,iBAAY,CAAA,CAAC,EAA2B,KAAA;AAC3D,MAAA,iBAAA,CAAkB,EAAE,CAAA,CAAA;AAAA,KACtB,EAAG,EAAE,CAAA,CAAA;AAEL,IAAA,MAAM,WAAc,GAAAA,iBAAA;AAAA,MAClB,CAAC,EAA2B,KAAA;AAC1B,QAAO,OAAA,SAAA,KAAc,MAAM,CAAC,SAAA,CAAA;AAAA,OAC9B;AAAA,MACA,CAAC,SAAS,CAAA;AAAA,KACZ,CAAA;AAEA,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAD,cAAA,CAAqB,EAAE,CAAA,CAAA;AACrD,IAAM,MAAA,WAAA,GAAcC,iBAAY,CAAA,CAAC,GAAkB,KAAA;AACjD,MAAA,UAAA,CAAW,CAAC,IAAS,KAAA,IAAA,CAAK,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA,CAAA;AAAA,KACzC,EAAG,EAAE,CAAA,CAAA;AAEL,IAAM,MAAA,aAAA,GAAgBA,iBAAY,CAAA,CAAC,EAAe,KAAA;AAChD,MAAW,UAAA,CAAA,CAAC,SAAS,IAAK,CAAA,MAAA,CAAO,CAAC,IAAS,KAAA,IAAA,CAAK,KAAU,KAAA,EAAE,CAAC,CAAA,CAAA;AAAA,KAC/D,EAAG,EAAE,CAAA,CAAA;AAEL,IAAM,MAAA,aAAA,GAAgB,CAAC,KAAyC,KAAA;AApHpE,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAqHM,MAAI,IAAA,YAAA;AAAc,QAAA,OAAA;AAElB,MAAA,MAAM,WAA0B,KAAM,CAAA,IAAA;AAAA,QACpC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,WAAA,CAAY,YAAZ,IAAqB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAA;AAAA,UACnB,CAAA,0DAAA,CAAA;AAAA,SAAA,KADF,YAEK,EAAC;AAAA,OACR,CAAA;AAEA,MAAA,MAAM,eAAe,QAAS,CAAA,SAAA;AAAA,QAC5B,CAAC,OAAA,KAAY,OAAY,MAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAc,QAAS,CAAA,aAAA,CAAA;AAAA,OAClD,CAAA;AAEA,MAAA,IAAI,YAAe,GAAA,CAAA;AAAG,QAAA,OAAA;AAEtB,MAAA,QAAQ,KAAM,CAAA,GAAA;AAAA,QACP,KAAA,WAAA,CAAA;AAAA,QACA,KAAA,YAAA;AACH,UAAA,CAAA,EAAA,GAAA,QAAA,CAAS,KAAK,GAAI,CAAA,YAAA,GAAe,GAAG,QAAS,CAAA,MAAM,OAAnD,IAAuD,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AACvD,UAAA,MAAA;AAAA,QACG,KAAA,SAAA,CAAA;AAAA,QACA,KAAA,WAAA;AACH,UAAA,CAAA,EAAA,GAAA,QAAA,CAAS,KAAK,GAAI,CAAA,CAAA,EAAG,YAAe,GAAA,CAAC,OAArC,IAAyC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AACzC,UAAA,MAAA;AAAA,QACG,KAAA,MAAA;AACH,UAAA,CAAA,EAAA,GAAA,QAAA,CAAS,OAAT,IAAa,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AACb,UAAA,MAAA;AAAA,QACG,KAAA,KAAA;AACH,UAAS,CAAA,EAAA,GAAA,QAAA,CAAA,QAAA,CAAS,MAAS,GAAA,CAAA,CAAA,KAA3B,IAA+B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,OAAA;AAGnC,MAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACd,CAAA;AAEA,IAAM,MAAA,uBAAA,GAA4D,CAChE,KAAA,EACA,IACG,KAAA;AACH,MAAA,IAAI,IAAM,EAAA;AACR,QAAA,QAAA,CAAS,KAAK,KAAK,CAAA,CAAA;AACnB,QAAA,qBAAA,CAAsB,MAAM;AA5JpC,UAAA,IAAA,EAAA,CAAA;AA6JU,UAAM,MAAA,OAAA,GAAA,CAAU,EAAY,GAAA,WAAA,CAAA,OAAA,KAAZ,IAAqB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAA;AAAA,YACnC,WAAW,IAAK,CAAA,KAAA,CAAA,EAAA,CAAA;AAAA,WAAA,CAAA;AAElB,UAAA,IAAI,mBAAmB,WAAa,EAAA;AAClC,YAAS,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,EAAA,CAAA;AAAA,WACX;AAAA,SACD,CAAA,CAAA;AACD,QAAI,IAAA,KAAA,KAAU,KAAK,KAAO,EAAA;AACxB,UAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,EAAE,KAAO,EAAA,IAAA,CAAK,KAAM,EAAA,CAAA,CAAA;AAAA,SACxC;AAAA,OACF;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,wBAAA,GAA2B,CAAC,MAAoB,KAAA;AACpD,MAAA,eAAA,CAAgB,MAAM,CAAA,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,MAAM,YAAe,GAAAC,aAAA;AAAA,MACnB,OAAO;AAAA,QACL,QAAA;AAAA,QACA,QAAA;AAAA,QACA,YAAA;AAAA,QACA,WAAA;AAAA,QACA,WAAA;AAAA,QACA,aAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,OACF,CAAA;AAAA,MACA;AAAA,QACE,QAAA;AAAA,QACA,QAAA;AAAA,QACA,YAAA;AAAA,QACA,WAAA;AAAA,QACA,WAAA;AAAA,QACA,aAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,OACF;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,aAAgB,GAAA;AAAA,MACpB,+BAAiC,EAAA,KAAA;AAAA,MACjC,GAAG,KAAA;AAAA,KACL,CAAA;AAEA,IACE,uBAAAC,cAAA,CAACC,2BAAY,QAAZ,EAAA;AAAA,MAAqB,KAAO,EAAA,YAAA;AAAA,MAC3B,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,WAAWE,wBAAK,CAAA,YAAA,CAAa,WAAW,CAAG,EAAA,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,QACnE,QAAC,kBAAAF,cAAA,CAAAG,sBAAA,EAAA;AAAA,UAAS,GAAK,EAAA,SAAA;AAAA,UACb,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,YACC,IAAK,EAAA,SAAA;AAAA,YACL,SAAW,EAAAF,wBAAA;AAAA,cACT,YAAa,EAAA;AAAA,cACb,aAAa,YAAY,CAAA;AAAA,cACzB,SAAA;AAAA,aACF;AAAA,YACA,SAAW,EAAA,aAAA;AAAA,YACX,KAAO,EAAA,aAAA;AAAA,YACN,GAAG,IAAA;AAAA,YAEH,QAAA,EAAA;AAAA,cAAA,QAAA;AAAA,8BACAF,cAAA,CAAAK,yBAAA,EAAA;AAAA,gBACC,IAAM,EAAA,OAAA;AAAA,gBACN,YAAc,EAAA,wBAAA;AAAA,gBACd,iBAAmB,EAAA,uBAAA;AAAA,eACrB,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"OverflowMenu.js","sources":["../src/tabs-next/OverflowMenu.tsx"],"sourcesContent":["import { Button, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { useOverflowContext, useOverflowMenu } from \"@fluentui/react-overflow\";\nimport { Dropdown, type 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 { OverflowIcon } = useIcon();\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            <OverflowIcon 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":["OverflowMenu"],"mappings":";;;;;;;;;;AAeO,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,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,KAC1B,eAAgC,EAAA,CAAA;AAClC,IAAM,MAAA,EAAE,YAAa,EAAA,GAAI,OAAQ,EAAA,CAAA;AACjC,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,YAAY,CAAA,CAAA;AAC9C,IAAA,MAAM,cAAiB,GAAA,kBAAA;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,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,cAAY,CAAG,EAAA,aAAA,CAAA,UAAA,CAAA;AAAA,MACf,kCACG,GAAA,CAAA,MAAA,EAAA;AAAA,QAAO,YAAW,EAAA,WAAA;AAAA,QAAY,OAAQ,EAAA,WAAA;AAAA,QAAY,IAAK,EAAA,UAAA;AAAA,QACtD,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA;AAAA,UAAa,aAAW,EAAA,IAAA;AAAA,UAAC,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAE,EAAA;AAAA,SAAG,CAAA;AAAA,OAClD,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-es/tabs-next/TabstripNext.css.js

@@ -1,4 +0,0 @@
-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";
-
-export { css_248z as default };
-//# sourceMappingURL=TabstripNext.css.js.map

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

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