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

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,213 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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 ReactDOM = require('react-dom');
+var useRenderedTabWidth = require('./hooks/useRenderedTabWidth.js');
+var TabNext$1 = require('./TabNext.css.js');
+var TabNextContext = require('./TabNextContext.js');
+var TabsNextContext = require('./TabsNextContext.js');
+var widthMeasurement = require('./widthMeasurement.js');
+
+const withBaseName = core.makePrefixer("saltTabNext");
+const TabNext = react.forwardRef(
+  function Tab(props, ref) {
+    const {
+      children,
+      className,
+      disabled: disabledProp,
+      onBlur,
+      onMouseDown,
+      onFocus,
+      onFocusCapture,
+      value,
+      id: idProp,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tab-next",
+      css: TabNext$1,
+      window: targetWindow
+    });
+    const {
+      selected,
+      activeTab,
+      renderMode,
+      registerBootstrapTab,
+      setBootstrapTabReady,
+      registerRenderedTab,
+      updateRenderedTab
+    } = TabsNextContext.useTabsNext();
+    const disabled = !!disabledProp;
+    const id = core.useId(idProp);
+    const wasMouseDown = react.useRef(false);
+    const [focusVisible, setFocusVisible] = react.useState(false);
+    const [focused, setFocused] = react.useState(false);
+    const [hostElement, setHostElement] = react.useState(null);
+    const markerRef = react.useRef(null);
+    const tabRootRef = react.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] = react.useState(() => /* @__PURE__ */ new Set());
+    const registerAction = react.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 = react.useMemo(() => Array.from(actionIds), [actionIds]);
+    const context = react.useMemo(
+      () => ({
+        tabId: id,
+        selected: selected === value,
+        focused,
+        value,
+        disabled,
+        actions,
+        registerAction
+      }),
+      [id, selected, value, focused, disabled, actions, registerAction]
+    );
+    core.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]);
+    core.useIsomorphicLayoutEffect(() => {
+      if (renderMode !== "inline") {
+        return;
+      }
+      return registerBootstrapTab(value);
+    }, [registerBootstrapTab, renderMode, value]);
+    core.useIsomorphicLayoutEffect(() => {
+      setBootstrapTabReady(value, hostElement != null);
+      return () => {
+        setBootstrapTabReady(value, false);
+      };
+    }, [hostElement, setBootstrapTabReady, value]);
+    core.useIsomorphicLayoutEffect(() => {
+      if (!hostElement || !id) {
+        return;
+      }
+      return registerRenderedTab({
+        host: hostElement,
+        id,
+        marker: markerRef.current,
+        root: tabRootRef.current,
+        trigger: null,
+        value,
+        width: widthMeasurement.getIntrinsicMeasuredWidth(tabRootRef.current)
+      });
+    }, [hostElement, id, registerRenderedTab, value]);
+    core.useIsomorphicLayoutEffect(() => {
+      const updates = {
+        marker: markerRef.current,
+        root: tabRootRef.current
+      };
+      if (renderMode === "inline") {
+        updates.width = widthMeasurement.getIntrinsicMeasuredWidth(tabRootRef.current);
+      }
+      updateRenderedTab(value, updates);
+    }, [renderMode, updateRenderedTab, value]);
+    useRenderedTabWidth.useRenderedTabWidth({
+      hostElement,
+      renderMode,
+      tabRootRef,
+      targetWindow,
+      updateRenderedTab,
+      value
+    });
+    const handleTabRootRef = core.useForkRef(tabRootRef, ref);
+    const tabMarkup = /* @__PURE__ */ jsxRuntime.jsx(TabNextContext.TabNextContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          role: "presentation",
+          "data-tabnext-marker": "",
+          hidden: true,
+          ref: markerRef
+        }
+      ),
+      renderMode === "inline" ? tabMarkup : hostElement ? ReactDOM.createPortal(tabMarkup, hostElement) : null
+    ] });
+  }
+);
+
+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 {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} 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 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\";\n\nimport { useRenderedTabWidth } from \"./hooks/useRenderedTabWidth\";\nimport tabCss from \"./TabNext.css\";\nimport { TabNextContext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { getIntrinsicMeasuredWidth } from \"./widthMeasurement\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps 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 `TabsNext` instance.\n   */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLDivElement, TabNextProps>(\n  function Tab(props, ref): ReactElement<TabNextProps> {\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-next\",\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    } = useTabsNext();\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      <TabNextContext.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      </TabNextContext.Provider>\n    );\n\n    return (\n      <>\n        <span\n          role=\"presentation\"\n          data-tabnext-marker=\"\"\n          hidden\n          ref={markerRef}\n        />\n        {renderMode === \"inline\"\n          ? tabMarkup\n          : hostElement\n            ? createPortal(tabMarkup, hostElement)\n            : null}\n      </>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tabCss","useTabsNext","useId","useRef","useState","useCallback","id","useMemo","useIsomorphicLayoutEffect","getIntrinsicMeasuredWidth","useRenderedTabWidth","useForkRef","jsx","TabNextContext","clsx","jsxs","Fragment","createPortal"],"mappings":"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"}

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var TabNextContext = require('./TabNextContext.js');
+var TabsNextContext = require('./TabsNextContext.js');
+
+const TabNextAction = react.forwardRef(
+  function TabNextAction2(props, ref) {
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      id: idProp,
+      onFocus,
+      onMouseDown,
+      ...rest
+    } = props;
+    const id = core.useId(idProp);
+    const { focused, selected, tabId, registerAction, value } = TabNextContext.useTabNext();
+    const { activeTab } = TabsNextContext.useTabsNext();
+    core.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__ */ jsxRuntime.jsx(
+      core.Button,
+      {
+        id,
+        "aria-labelledby": clsx.clsx(ariaLabelledBy, tabId, id),
+        tabIndex: focused || selected ? void 0 : -1,
+        appearance: "transparent",
+        sentiment: "neutral",
+        ref,
+        onFocus: handleFocus,
+        onMouseDown: handleMouseDown,
+        ...rest
+      }
+    );
+  }
+);
+
+exports.TabNextAction = TabNextAction;
+//# sourceMappingURL=TabNextAction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextAction.js","sources":["../src/tabs-next/TabNextAction.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type FocusEvent, forwardRef, type MouseEvent } from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextActionProps extends ButtonProps {}\n\nexport const TabNextAction = forwardRef<HTMLButtonElement, TabNextActionProps>(\n  function TabNextAction(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 } = useTabNext();\n    const { activeTab } = useTabsNext();\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":["forwardRef","TabNextAction","useId","useTabNext","useTabsNext","useIsomorphicLayoutEffect","jsx","Button","clsx"],"mappings":";;;;;;;;;AAaO,MAAM,aAAA,GAAgBA,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,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,GAAKC,WAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,OAAO,cAAA,EAAgB,KAAA,KAAUC,yBAAA,EAAW;AACvE,IAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,2BAAA,EAAY;AAElC,IAAAC,8BAAA,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,uBACEC,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,iBAAA,EAAiBC,SAAA,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-cjs/tabs-next/TabNextContext.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+const TabNextContext = core.createContext(
+  "TabNextContext",
+  {
+    focused: false,
+    selected: false,
+    disabled: false,
+    value: "",
+    actions: [],
+    registerAction: () => () => void 0
+  }
+);
+function useTabNext() {
+  return react.useContext(TabNextContext);
+}
+
+exports.TabNextContext = TabNextContext;
+exports.useTabNext = useTabNext;
+//# 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 { useContext } from \"react\";\n\ninterface TabNextContextValue {\n  tabId?: string;\n  focused: boolean;\n  selected: boolean;\n  value: string;\n  disabled: boolean;\n  actions: string[];\n  registerAction: (id: string) => () => void;\n}\n\nexport const TabNextContext = createContext<TabNextContextValue>(\n  \"TabNextContext\",\n  {\n    focused: false,\n    selected: false,\n    disabled: false,\n    value: \"\",\n    actions: [],\n    registerAction: () => () => undefined,\n  },\n);\n\nexport function useTabNext() {\n  return useContext(TabNextContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAaO,MAAM,cAAA,GAAiBA,kBAAA;AAAA,EAC5B,gBAAA;AAAA,EACA;AAAA,IACE,OAAA,EAAS,KAAA;AAAA,IACT,QAAA,EAAU,KAAA;AAAA,IACV,QAAA,EAAU,KAAA;AAAA,IACV,KAAA,EAAO,EAAA;AAAA,IACP,SAAS,EAAC;AAAA,IACV,cAAA,EAAgB,MAAM,MAAM;AAAA;AAEhC;AAEO,SAAS,UAAA,GAAa;AAC3B,EAAA,OAAOC,iBAAW,cAAc,CAAA;AAClC;;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTabNextPanel {\n  height: 100%;\n  width: 100%;\n}\n\n.saltTabNextPanel[hidden] {\n  display: none;\n}\n\n.saltTabNextPanel:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TabNextPanel.css.js.map

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

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

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

@@ -0,0 +1,92 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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 tabbable = require('tabbable');
+var TabNextPanel$1 = require('./TabNextPanel.css.js');
+var TabsNextContext = require('./TabsNextContext.js');
+
+const withBaseName = core.makePrefixer("saltTabNextPanel");
+const TabNextPanel = react.forwardRef(
+  function TabNextPanel2(props, ref) {
+    const { className, children, id: idProp, value, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tab-next-panel",
+      css: TabNextPanel$1,
+      window: targetWindow
+    });
+    const id = core.useId(idProp);
+    const { registerPanel, getTabId, selected } = TabsNextContext.useTabsNext();
+    const hidden = selected !== value;
+    const panelRef = react.useRef(null);
+    const handleRef = core.useForkRef(panelRef, ref);
+    core.useIsomorphicLayoutEffect(() => {
+      if (id) {
+        return registerPanel(id, value);
+      }
+    }, [value, id, registerPanel]);
+    const [hasFocusableChildren, setHasFocusableChildren] = react.useState(false);
+    react.useEffect(() => {
+      const element = panelRef.current;
+      const mutationObserverCtor = targetWindow == null ? void 0 : targetWindow.MutationObserver;
+      if (!element || hidden) return;
+      let rafId = null;
+      const detectFocusableChildren = () => {
+        rafId = null;
+        const elements = tabbable.tabbable(element);
+        const nextHasFocusableChildren = elements.length > 0;
+        setHasFocusableChildren((prev) => {
+          return prev === nextHasFocusableChildren ? prev : nextHasFocusableChildren;
+        });
+      };
+      const scheduleDetectFocusableChildren = () => {
+        if (rafId != null && targetWindow) {
+          targetWindow.cancelAnimationFrame(rafId);
+        }
+        if (!(targetWindow == null ? void 0 : targetWindow.requestAnimationFrame)) {
+          detectFocusableChildren();
+          return;
+        }
+        rafId = targetWindow.requestAnimationFrame(detectFocusableChildren);
+      };
+      const observer = mutationObserverCtor ? new mutationObserverCtor(() => {
+        scheduleDetectFocusableChildren();
+      }) : null;
+      scheduleDetectFocusableChildren();
+      observer == null ? void 0 : observer.observe(element, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
+      return () => {
+        observer == null ? void 0 : observer.disconnect();
+        if (rafId != null && targetWindow) {
+          targetWindow.cancelAnimationFrame(rafId);
+        }
+      };
+    }, [hidden, targetWindow]);
+    const tabId = getTabId(value);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id,
+        ref: handleRef,
+        role: "tabpanel",
+        "aria-labelledby": tabId,
+        className: clsx.clsx(withBaseName(), className),
+        hidden: hidden || void 0,
+        tabIndex: hidden || hasFocusableChildren ? void 0 : 0,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.TabNextPanel = TabNextPanel;
+//# sourceMappingURL=TabNextPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextPanel.js","sources":["../src/tabs-next/TabNextPanel.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} 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  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { tabbable } from \"tabbable\";\nimport tabPanelCss from \"./TabNextPanel.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The value of the panel. This should map to the corresponding tab and must\n   * be unique within a `TabsNext` instance.\n   */\n  value: string;\n}\n\nconst withBaseName = makePrefixer(\"saltTabNextPanel\");\n\nexport const TabNextPanel = forwardRef<HTMLDivElement, TabNextPanelProps>(\n  function TabNextPanel(props, ref) {\n    const { className, children, id: idProp, value, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next-panel\",\n      css: tabPanelCss,\n      window: targetWindow,\n    });\n    const id = useId(idProp);\n    const { registerPanel, getTabId, selected } = useTabsNext();\n    const hidden = selected !== value;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(panelRef, ref);\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        return registerPanel(id, value);\n      }\n    }, [value, id, registerPanel]);\n\n    const [hasFocusableChildren, setHasFocusableChildren] = useState(false);\n    useEffect(() => {\n      const element = panelRef.current;\n      const mutationObserverCtor = (\n        targetWindow as\n          | (Window & { MutationObserver?: typeof MutationObserver })\n          | undefined\n      )?.MutationObserver;\n      if (!element || hidden) return;\n\n      let rafId: number | null = null;\n\n      const detectFocusableChildren = () => {\n        rafId = null;\n        const elements = tabbable(element);\n        const nextHasFocusableChildren = elements.length > 0;\n        setHasFocusableChildren((prev) => {\n          return prev === nextHasFocusableChildren\n            ? prev\n            : nextHasFocusableChildren;\n        });\n      };\n\n      const scheduleDetectFocusableChildren = () => {\n        if (rafId != null && targetWindow) {\n          targetWindow.cancelAnimationFrame(rafId);\n        }\n\n        if (!targetWindow?.requestAnimationFrame) {\n          detectFocusableChildren();\n          return;\n        }\n\n        rafId = targetWindow.requestAnimationFrame(detectFocusableChildren);\n      };\n\n      const observer = mutationObserverCtor\n        ? new mutationObserverCtor(() => {\n            scheduleDetectFocusableChildren();\n          })\n        : null;\n\n      scheduleDetectFocusableChildren();\n\n      observer?.observe(element, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n      });\n\n      return () => {\n        observer?.disconnect();\n        if (rafId != null && targetWindow) {\n          targetWindow.cancelAnimationFrame(rafId);\n        }\n      };\n    }, [hidden, targetWindow]);\n\n    const tabId = getTabId(value);\n\n    return (\n      <div\n        id={id}\n        ref={handleRef}\n        role=\"tabpanel\"\n        aria-labelledby={tabId}\n        className={clsx(withBaseName(), className)}\n        hidden={hidden || undefined}\n        tabIndex={hidden || hasFocusableChildren ? undefined : 0}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabNextPanel","useWindow","useComponentCssInjection","tabPanelCss","useId","useTabsNext","useRef","useForkRef","useIsomorphicLayoutEffect","useState","useEffect","tabbable","jsx","clsx"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTabNextTrigger {\n  all: unset;\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  overflow: hidden;\n}\n\n/* The action should be triggered by clicking anywhere on the tab. */\n.saltTabNextTrigger::before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n}\n\n.saltTabNextTrigger:focus-visible {\n  outline: none;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TabNextTrigger.css.js.map

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

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

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

@@ -0,0 +1,180 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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 TabListLayoutContext = require('./TabListLayoutContext.js');
+var TabNextContext = require('./TabNextContext.js');
+var TabNextTrigger$1 = require('./TabNextTrigger.css.js');
+var TabsNextContext = require('./TabsNextContext.js');
+
+const withBaseName = core.makePrefixer("saltTabNextTrigger");
+function getAriaDescription(count) {
+  if (count < 1) {
+    return void 0;
+  }
+  if (count === 1) {
+    return "1 action available";
+  }
+  return `${count} actions available`;
+}
+const ariaActionSupported = typeof HTMLElement !== "undefined" && "ariaActions" in HTMLElement.prototype;
+const TabNextTrigger = react.forwardRef(function TabNextTrigger2(props, ref) {
+  const { children, onClick, onKeyDown, onFocus, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-tab-next-trigger",
+    css: TabNextTrigger$1,
+    window: targetWindow
+  });
+  const {
+    setSelected,
+    registerTab,
+    updateTab,
+    updateRenderedTab,
+    getRenderedTabOrder,
+    getPanelId,
+    getTabId,
+    selected: selectedValue,
+    activeTab,
+    menuOpen,
+    setMenuOpen
+  } = TabsNextContext.useTabsNext();
+  const { selected, value, focused, disabled, tabId, actions } = TabNextContext.useTabNext();
+  const tabListLayout = TabListLayoutContext.useTabListLayout();
+  const tabRef = react.useRef(null);
+  const location = (tabListLayout == null ? void 0 : tabListLayout.getLocation(value)) ?? "main";
+  const selectionSource = location === "overflow" ? "overflow" : "main";
+  const hidden = location === "hidden";
+  const overflowOpen = location === "overflow" && menuOpen;
+  const renderOrder = getRenderedTabOrder(value);
+  const order = renderOrder >= 0 ? renderOrder : void 0;
+  const initialLocationRef = react.useRef(location);
+  const initialOrderRef = react.useRef(order);
+  const id = tabId;
+  core.useIsomorphicLayoutEffect(() => {
+    if (id && tabRef.current) {
+      const item = {
+        id,
+        value,
+        element: tabRef.current,
+        location: initialLocationRef.current,
+        order: initialOrderRef.current
+      };
+      return registerTab(item);
+    }
+  }, [id, registerTab, value]);
+  core.useIsomorphicLayoutEffect(() => {
+    if (!id) {
+      return;
+    }
+    updateTab(id, {
+      element: tabRef.current,
+      location,
+      order
+    });
+  }, [id, location, order, updateTab]);
+  core.useIsomorphicLayoutEffect(() => {
+    updateRenderedTab(value, {
+      trigger: tabRef.current
+    });
+  }, [updateRenderedTab, value]);
+  core.useIsomorphicLayoutEffect(() => {
+    var _a;
+    if (!overflowOpen || (tabListLayout == null ? void 0 : tabListLayout.overflowActiveValue) !== value) {
+      return;
+    }
+    (_a = tabRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+  }, [overflowOpen, tabListLayout == null ? void 0 : tabListLayout.overflowActiveValue, value]);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    setSelected(event, value, selectionSource);
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (location === "overflow" && event.key === "Tab" && event.shiftKey) {
+      event.preventDefault();
+      setMenuOpen(false);
+      const doc = event.currentTarget.ownerDocument;
+      const overflowTrigger = doc.querySelector(
+        "[data-overflowbutton]"
+      );
+      const scheduleFocus = targetWindow == null ? void 0 : targetWindow.requestAnimationFrame;
+      if (scheduleFocus) {
+        scheduleFocus(() => overflowTrigger == null ? void 0 : overflowTrigger.focus({ preventScroll: true }));
+      } else {
+        queueMicrotask(() => overflowTrigger == null ? void 0 : overflowTrigger.focus({ preventScroll: true }));
+      }
+      return;
+    }
+    if (location === "overflow" && tabListLayout && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End")) {
+      const moved = tabListLayout.moveOverflowFocus(event.key, value);
+      if (moved) {
+        event.preventDefault();
+        return;
+      }
+    }
+    if (disabled) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+      }
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setSelected(event, value, selectionSource);
+    }
+  };
+  const handleFocus = (event) => {
+    var _a;
+    onFocus == null ? void 0 : onFocus(event);
+    if (id) {
+      activeTab.current = { value, id };
+    }
+    if (location === "overflow") {
+      tabListLayout == null ? void 0 : tabListLayout.setOverflowActiveValue(value);
+    }
+    (_a = event.currentTarget.parentElement) == null ? void 0 : _a.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
+  };
+  const handleRef = core.useForkRef(tabRef, ref);
+  const panelId = getPanelId(value);
+  const ariaActionsProps = ariaActionSupported ? {
+    "aria-actions": clsx.clsx(actions) || void 0
+  } : {};
+  const active = location === "overflow" && (tabListLayout == null ? void 0 : tabListLayout.overflowActiveValue) === value;
+  const hasSelectedTab = selectedValue !== void 0 && getTabId(selectedValue) != null;
+  const fallbackTabStop = !hasSelectedTab && location === "main" && order === 0;
+  const isTabStop = !hidden && (focused || selected || active || fallbackTabStop);
+  const shouldHandleKeyDown = location === "overflow" || !disabled;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      "aria-controls": panelId,
+      ...ariaActionsProps,
+      "aria-description": getAriaDescription(actions.length),
+      tabIndex: isTabStop ? 0 : -1,
+      role: "tab",
+      type: "button",
+      onClick: !disabled ? handleClick : void 0,
+      onKeyDown: shouldHandleKeyDown ? handleKeyDown : void 0,
+      onFocus: handleFocus,
+      className: withBaseName(),
+      id,
+      ref: handleRef,
+      "data-value": value,
+      ...rest,
+      children
+    }
+  );
+});
+
+exports.TabNextTrigger = TabNextTrigger;
+//# sourceMappingURL=TabNextTrigger.js.map