@salt-ds/core 1.59.1 → 1.61.0

package/dist-es/tabs/Tab.js

@@ -0,0 +1,209 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { TabContext } from './internal/contexts/TabContext.js';
+import { useTabs } from './internal/contexts/TabsContext.js';
+import { useRenderedTabWidth } from './internal/overflow/useRenderedTabWidth.js';
+import { getIntrinsicMeasuredWidth } from './internal/overflow/widthMeasurement.js';
+import css_248z from './Tab.css.js';
+
+const withBaseName = makePrefixer("saltTab");
+const Tab = forwardRef(
+  function Tab2(props, ref) {
+    const {
+      children,
+      className,
+      disabled: disabledProp,
+      onBlur,
+      onMouseDown,
+      onFocus,
+      onFocusCapture,
+      value,
+      id: idProp,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tab",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      selected,
+      activeTab,
+      renderMode,
+      registerBootstrapTab,
+      setBootstrapTabReady,
+      registerRenderedTab,
+      updateRenderedTab
+    } = useTabs();
+    const disabled = !!disabledProp;
+    const id = useId(idProp);
+    const wasMouseDown = useRef(false);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [hostElement, setHostElement] = useState(null);
+    const markerRef = useRef(null);
+    const tabRootRef = useRef(null);
+    const handleFocusCapture = (event) => {
+      onFocusCapture == null ? void 0 : onFocusCapture(event);
+      if (id) {
+        activeTab.current = { value, id };
+      }
+    };
+    const handleFocus = (event) => {
+      onFocus == null ? void 0 : onFocus(event);
+      setFocused(true);
+      if (!wasMouseDown.current && event.target.getAttribute("role") === "tab") {
+        setFocusVisible(true);
+      }
+      wasMouseDown.current = false;
+    };
+    const handleBlur = (event) => {
+      onBlur == null ? void 0 : onBlur(event);
+      setFocused(false);
+      setFocusVisible(false);
+    };
+    const handleMouseDown = (event) => {
+      onMouseDown == null ? void 0 : onMouseDown(event);
+      if (id) {
+        activeTab.current = { value, id };
+      }
+      wasMouseDown.current = true;
+    };
+    const [actionIds, setActionIds] = useState(() => /* @__PURE__ */ new Set());
+    const registerAction = useCallback((id2) => {
+      setActionIds((old) => {
+        if (old.has(id2)) {
+          return old;
+        }
+        const next = new Set(old);
+        next.add(id2);
+        return next;
+      });
+      return () => {
+        setActionIds((old) => {
+          if (!old.has(id2)) {
+            return old;
+          }
+          const next = new Set(old);
+          next.delete(id2);
+          return next;
+        });
+      };
+    }, []);
+    const actions = useMemo(() => Array.from(actionIds), [actionIds]);
+    const context = useMemo(
+      () => ({
+        tabId: id,
+        selected: selected === value,
+        focused,
+        value,
+        disabled,
+        actions,
+        registerAction
+      }),
+      [id, selected, value, focused, disabled, actions, registerAction]
+    );
+    useIsomorphicLayoutEffect(() => {
+      const doc = targetWindow == null ? void 0 : targetWindow.document;
+      if (!doc) {
+        return;
+      }
+      const host = doc.createElement("div");
+      host.dataset.tabHost = value;
+      host.role = "presentation";
+      host.style.display = "contents";
+      setHostElement(host);
+      return () => {
+        host.remove();
+      };
+    }, [targetWindow, value]);
+    useIsomorphicLayoutEffect(() => {
+      if (renderMode !== "inline") {
+        return;
+      }
+      return registerBootstrapTab(value);
+    }, [registerBootstrapTab, renderMode, value]);
+    useIsomorphicLayoutEffect(() => {
+      setBootstrapTabReady(value, hostElement != null);
+      return () => {
+        setBootstrapTabReady(value, false);
+      };
+    }, [hostElement, setBootstrapTabReady, value]);
+    useIsomorphicLayoutEffect(() => {
+      if (!hostElement || !id) {
+        return;
+      }
+      return registerRenderedTab({
+        host: hostElement,
+        id,
+        marker: markerRef.current,
+        root: tabRootRef.current,
+        trigger: null,
+        value,
+        width: getIntrinsicMeasuredWidth(tabRootRef.current)
+      });
+    }, [hostElement, id, registerRenderedTab, value]);
+    useIsomorphicLayoutEffect(() => {
+      const updates = {
+        marker: markerRef.current,
+        root: tabRootRef.current
+      };
+      if (renderMode === "inline") {
+        updates.width = getIntrinsicMeasuredWidth(tabRootRef.current);
+      }
+      updateRenderedTab(value, updates);
+    }, [renderMode, updateRenderedTab, value]);
+    useRenderedTabWidth({
+      hostElement,
+      renderMode,
+      tabRootRef,
+      targetWindow,
+      updateRenderedTab,
+      value
+    });
+    const handleTabRootRef = useForkRef(tabRootRef, ref);
+    const tabMarkup = /* @__PURE__ */ jsx(TabContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("selected")]: selected === value,
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("focusVisible")]: focusVisible
+          },
+          className
+        ),
+        "data-overflowitem": "true",
+        "data-value": value,
+        ref: handleTabRootRef,
+        onMouseDown: handleMouseDown,
+        onFocusCapture: handleFocusCapture,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        role: "presentation",
+        ...rest,
+        children
+      }
+    ) });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { role: "presentation", "data-tab-marker": "", hidden: true, ref: markerRef }),
+      renderMode === "inline" ? tabMarkup : hostElement ? createPortal(tabMarkup, hostElement) : null
+    ] });
+  }
+);
+
+export { Tab };
+//# sourceMappingURL=Tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { TabContext } from \"./internal/contexts/TabContext\";\nimport { useTabs } from \"./internal/contexts/TabsContext\";\nimport { useRenderedTabWidth } from \"./internal/overflow/useRenderedTabWidth\";\nimport { getIntrinsicMeasuredWidth } from \"./internal/overflow/widthMeasurement\";\nimport tabCss from \"./Tab.css\";\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nexport interface TabProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the tab will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the tab. This must be unique within a `Tabs` instance.\n   */\n  value: string;\n}\n\nexport const Tab = forwardRef<HTMLDivElement, TabProps>(\n  function Tab(props, ref): ReactElement<TabProps> {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      onBlur,\n      onMouseDown,\n      onFocus,\n      onFocusCapture,\n      value,\n      id: idProp,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab\",\n      css: tabCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      activeTab,\n      renderMode,\n      registerBootstrapTab,\n      setBootstrapTabReady,\n      registerRenderedTab,\n      updateRenderedTab,\n    } = useTabs();\n\n    const disabled = !!disabledProp;\n\n    const id = useId(idProp);\n\n    const wasMouseDown = useRef(false);\n    const [focusVisible, setFocusVisible] = useState(false);\n    const [focused, setFocused] = useState(false);\n    const [hostElement, setHostElement] = useState<HTMLDivElement | null>(null);\n    const markerRef = useRef<HTMLSpanElement>(null);\n    const tabRootRef = useRef<HTMLDivElement>(null);\n\n    const handleFocusCapture = (event: FocusEvent<HTMLDivElement>) => {\n      onFocusCapture?.(event);\n      if (id) {\n        activeTab.current = { value, id };\n      }\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n      onFocus?.(event);\n\n      setFocused(true);\n\n      if (\n        !wasMouseDown.current &&\n        event.target.getAttribute(\"role\") === \"tab\"\n      ) {\n        setFocusVisible(true);\n      }\n\n      wasMouseDown.current = false;\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n      setFocusVisible(false);\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n      onMouseDown?.(event);\n      if (id) {\n        activeTab.current = { value, id };\n      }\n      wasMouseDown.current = true;\n    };\n\n    const [actionIds, setActionIds] = useState(() => new Set<string>());\n\n    const registerAction = useCallback((id: string) => {\n      setActionIds((old) => {\n        if (old.has(id)) {\n          return old;\n        }\n\n        const next = new Set(old);\n        next.add(id);\n        return next;\n      });\n\n      return () => {\n        setActionIds((old) => {\n          if (!old.has(id)) {\n            return old;\n          }\n\n          const next = new Set(old);\n          next.delete(id);\n          return next;\n        });\n      };\n    }, []);\n\n    const actions = useMemo(() => Array.from(actionIds), [actionIds]);\n\n    const context = useMemo(\n      () => ({\n        tabId: id,\n        selected: selected === value,\n        focused,\n        value,\n        disabled,\n        actions,\n        registerAction,\n      }),\n      [id, selected, value, focused, disabled, actions, registerAction],\n    );\n\n    useIsomorphicLayoutEffect(() => {\n      const doc = targetWindow?.document;\n      if (!doc) {\n        return;\n      }\n\n      const host = doc.createElement(\"div\");\n      host.dataset.tabHost = value;\n      host.role = \"presentation\";\n      host.style.display = \"contents\";\n      setHostElement(host);\n\n      return () => {\n        host.remove();\n      };\n    }, [targetWindow, value]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (renderMode !== \"inline\") {\n        return;\n      }\n\n      return registerBootstrapTab(value);\n    }, [registerBootstrapTab, renderMode, value]);\n\n    useIsomorphicLayoutEffect(() => {\n      setBootstrapTabReady(value, hostElement != null);\n\n      return () => {\n        setBootstrapTabReady(value, false);\n      };\n    }, [hostElement, setBootstrapTabReady, value]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!hostElement || !id) {\n        return;\n      }\n\n      return registerRenderedTab({\n        host: hostElement,\n        id,\n        marker: markerRef.current,\n        root: tabRootRef.current,\n        trigger: null,\n        value,\n        width: getIntrinsicMeasuredWidth(tabRootRef.current),\n      });\n    }, [hostElement, id, registerRenderedTab, value]);\n\n    useIsomorphicLayoutEffect(() => {\n      const updates = {\n        marker: markerRef.current,\n        root: tabRootRef.current,\n      } as Partial<{\n        host: HTMLDivElement;\n        id: string;\n        marker: HTMLElement | null;\n        root: HTMLElement | null;\n        trigger: HTMLButtonElement | null;\n        width: number;\n      }>;\n\n      if (renderMode === \"inline\") {\n        updates.width = getIntrinsicMeasuredWidth(tabRootRef.current);\n      }\n\n      updateRenderedTab(value, updates);\n    }, [renderMode, updateRenderedTab, value]);\n\n    useRenderedTabWidth({\n      hostElement,\n      renderMode,\n      tabRootRef,\n      targetWindow,\n      updateRenderedTab,\n      value,\n    });\n\n    const handleTabRootRef = useForkRef(tabRootRef, ref);\n\n    const tabMarkup = (\n      <TabContext.Provider value={context}>\n        <div\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"selected\")]: selected === value,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"focusVisible\")]: focusVisible,\n            },\n            className,\n          )}\n          data-overflowitem=\"true\"\n          data-value={value}\n          ref={handleTabRootRef}\n          onMouseDown={handleMouseDown}\n          onFocusCapture={handleFocusCapture}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          role=\"presentation\"\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabContext.Provider>\n    );\n\n    return (\n      <>\n        <span role=\"presentation\" data-tab-marker=\"\" hidden ref={markerRef} />\n        {renderMode === \"inline\"\n          ? tabMarkup\n          : hostElement\n            ? createPortal(tabMarkup, hostElement)\n            : null}\n      </>\n    );\n  },\n);\n"],"names":["Tab","tabCss","id"],"mappings":"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"}

package/dist-es/tabs/TabAction.js

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useTab } from './internal/contexts/TabContext.js';
+import { useTabs } from './internal/contexts/TabsContext.js';
+
+const TabAction = forwardRef(
+  function TabAction2(props, ref) {
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      id: idProp,
+      onFocus,
+      onMouseDown,
+      ...rest
+    } = props;
+    const id = useId(idProp);
+    const { focused, selected, tabId, registerAction, value } = useTab();
+    const { activeTab } = useTabs();
+    useIsomorphicLayoutEffect(() => {
+      if (id) {
+        return registerAction(id);
+      }
+    }, [registerAction, id]);
+    const setActiveTab = () => {
+      if (tabId) {
+        activeTab.current = { id: tabId, value };
+      }
+    };
+    const handleFocus = (event) => {
+      onFocus == null ? void 0 : onFocus(event);
+      setActiveTab();
+    };
+    const handleMouseDown = (event) => {
+      onMouseDown == null ? void 0 : onMouseDown(event);
+      setActiveTab();
+    };
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        id,
+        "aria-labelledby": clsx(ariaLabelledBy, tabId, id),
+        tabIndex: focused || selected ? void 0 : -1,
+        appearance: "transparent",
+        sentiment: "neutral",
+        ref,
+        onFocus: handleFocus,
+        onMouseDown: handleMouseDown,
+        ...rest
+      }
+    );
+  }
+);
+
+export { TabAction };
+//# sourceMappingURL=TabAction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabAction.js","sources":["../src/tabs/TabAction.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type FocusEvent, forwardRef, type MouseEvent } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useTab } from \"./internal/contexts/TabContext\";\nimport { useTabs } from \"./internal/contexts/TabsContext\";\n\nexport interface TabActionProps extends ButtonProps {}\n\nexport const TabAction = forwardRef<HTMLButtonElement, TabActionProps>(\n  function TabAction(props, ref) {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      id: idProp,\n      onFocus,\n      onMouseDown,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const { focused, selected, tabId, registerAction, value } = useTab();\n    const { activeTab } = useTabs();\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        return registerAction(id);\n      }\n    }, [registerAction, id]);\n\n    const setActiveTab = () => {\n      if (tabId) {\n        activeTab.current = { id: tabId, value };\n      }\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      onFocus?.(event);\n      setActiveTab();\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n      onMouseDown?.(event);\n      setActiveTab();\n    };\n\n    return (\n      <Button\n        id={id}\n        aria-labelledby={clsx(ariaLabelledBy, tabId, id)}\n        tabIndex={focused || selected ? undefined : -1}\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n        ref={ref}\n        onFocus={handleFocus}\n        onMouseDown={handleMouseDown}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["TabAction"],"mappings":";;;;;;;;;;;;AASO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CAAU,KAAA,EAAO,GAAA,EAAK;AAC7B,IAAA,MAAM;AAAA,MACJ,iBAAA,EAAmB,cAAA;AAAA,MACnB,EAAA,EAAI,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,OAAO,cAAA,EAAgB,KAAA,KAAU,MAAA,EAAO;AACnE,IAAA,MAAM,EAAE,SAAA,EAAU,GAAI,OAAA,EAAQ;AAE9B,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAA,EAAI;AACN,QAAA,OAAO,eAAe,EAAE,CAAA;AAAA,MAC1B;AAAA,IACF,CAAA,EAAG,CAAC,cAAA,EAAgB,EAAE,CAAC,CAAA;AAEvB,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,SAAA,CAAU,OAAA,GAAU,EAAE,EAAA,EAAI,KAAA,EAAO,KAAA,EAAM;AAAA,MACzC;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,MAAA,YAAA,EAAa;AAAA,IACf,CAAA;AAEA,IAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAyC;AAChE,MAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,KAAA,CAAA;AACd,MAAA,YAAA,EAAa;AAAA,IACf,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,iBAAA,EAAiB,IAAA,CAAK,cAAA,EAAgB,KAAA,EAAO,EAAE,CAAA;AAAA,QAC/C,QAAA,EAAU,OAAA,IAAW,QAAA,GAAW,MAAA,GAAY,EAAA;AAAA,QAC5C,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAU,SAAA;AAAA,QACV,GAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,WAAA,EAAa,eAAA;AAAA,QACZ,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}

package/dist-es/tabs/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/TabBar.css.js.map

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

package/dist-es/tabs/TabBar.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+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/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sources":["../src/tabs/TabBar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\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/TabList.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Component class applied to the root element */\n.saltTabList {\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.saltTabList-center {\n  justify-content: center;\n}\n\n.saltTabList-right {\n  justify-content: flex-end;\n}\n\n.saltTabList-activeColorPrimary {\n  --saltTabList-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabList-activeColorSecondary {\n  --saltTabList-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabList-activeColorTertiary {\n  --saltTabList-activeColor: var(--salt-container-tertiary-background);\n}\n\n.saltTabList-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=TabList.css.js.map

package/dist-es/tabs/TabList.css.js.map

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

package/dist-es/tabs/TabList.js

@@ -0,0 +1,279 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 { useAriaAnnouncer } from '../aria-announcer/useAriaAnnouncer.js';
+import '../aria-announcer/AriaAnnouncerContext.js';
+import '../aria-announcer/AriaAnnouncerProvider.js';
+import { capitalize } from '../utils/capitalize.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { TabListLayoutContext } from './internal/contexts/TabListLayoutContext.js';
+import { TabSlotRegistryContext } from './internal/contexts/TabSlotRegistryContext.js';
+import { useTabs } from './internal/contexts/TabsContext.js';
+import { useFocusWithRetry } from './internal/hooks/useFocusWithRetry.js';
+import { useTabListRecovery } from './internal/hooks/useTabListRecovery.js';
+import { useTabRemovalHandler } from './internal/hooks/useTabRemovalHandler.js';
+import { useTabSelectionFocus } from './internal/hooks/useTabSelectionFocus.js';
+import { TabOverflowList } from './internal/overflow/TabOverflowList.js';
+import { TabSlot } from './internal/overflow/TabSlot.js';
+import { useOverflow } from './internal/overflow/useOverflow.js';
+import { useOverflowLayoutState } from './internal/overflow/useOverflowLayoutState.js';
+import css_248z from './TabList.css.js';
+
+const withBaseName = makePrefixer("saltTabList");
+const MAX_FOCUS_RETRY_ATTEMPTS = 120;
+const TabList = forwardRef(
+  function TabList2(props, ref) {
+    const {
+      appearance = "bordered",
+      activeColor = "primary",
+      children,
+      className,
+      onKeyDown,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tab-list",
+      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
+    } = useTabs();
+    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 { TabList };
+//# sourceMappingURL=TabList.js.map