@salt-ds/lab 1.0.0-alpha.8 → 1.0.0-alpha.81

package/dist-es/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":[],"mappings":";;;AAaO,MAAM,cAAA,GAAiB,aAAA;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,OAAO,WAAW,cAAc,CAAA;AAClC;;;;"}

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

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

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

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

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

@@ -0,0 +1,75 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, useForkRef, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import { tabbable } from 'tabbable';
+import css_248z from './TabNextPanel.css.js';
+import { useTabsNext } from './TabsNextContext.js';
+
+const withBaseName = makePrefixer("saltTabNextPanel");
+const TabNextPanel = forwardRef(
+  function TabNextPanel2(props, ref) {
+    const { className, children, id: idProp, value, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tab-next-panel",
+      css: css_248z,
+      window: targetWindow
+    });
+    const id = useId(idProp);
+    const { registerPanel, getTabId, selected } = useTabsNext();
+    const panelRef = useRef(null);
+    const handleRef = useForkRef(panelRef, ref);
+    useIsomorphicLayoutEffect(() => {
+      if (value && id) {
+        return registerPanel(id, value);
+      }
+    }, [value, id, registerPanel]);
+    const [hasFocusableChildren, setHasFocusableChildren] = useState(false);
+    useEffect(() => {
+      if (!panelRef.current) return;
+      const detectFocusableChildren = () => {
+        requestAnimationFrame(() => {
+          if (!panelRef.current) return;
+          const elements = tabbable(panelRef.current);
+          setHasFocusableChildren(elements.length > 0);
+        });
+      };
+      const observer = new MutationObserver(() => {
+        detectFocusableChildren();
+      });
+      requestAnimationFrame(() => {
+        detectFocusableChildren();
+      });
+      observer.observe(panelRef.current, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
+      return () => {
+        observer.disconnect();
+      };
+    }, []);
+    const hidden = selected !== value;
+    const tabId = getTabId(value);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        id,
+        ref: handleRef,
+        role: "tabpanel",
+        "aria-labelledby": tabId,
+        className: clsx(withBaseName(), className),
+        hidden: hidden || void 0,
+        tabIndex: hidden || hasFocusableChildren ? void 0 : 0,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+export { TabNextPanel };
+//# sourceMappingURL=TabNextPanel.js.map

package/dist-es/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.\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\n    const panelRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(panelRef, ref);\n\n    useIsomorphicLayoutEffect(() => {\n      if (value && id) {\n        return registerPanel(id, value);\n      }\n    }, [value, id, registerPanel]);\n\n    const [hasFocusableChildren, setHasFocusableChildren] = useState(false);\n    useEffect(() => {\n      if (!panelRef.current) return;\n\n      const detectFocusableChildren = () => {\n        requestAnimationFrame(() => {\n          if (!panelRef.current) return;\n          const elements = tabbable(panelRef.current);\n          setHasFocusableChildren(elements.length > 0);\n        });\n      };\n\n      const observer = new MutationObserver(() => {\n        detectFocusableChildren();\n      });\n\n      requestAnimationFrame(() => {\n        detectFocusableChildren();\n      });\n\n      observer.observe(panelRef.current, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n      });\n\n      return () => {\n        observer.disconnect();\n      };\n    }, []);\n\n    const hidden = selected !== value;\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":["TabNextPanel","tabPanelCss"],"mappings":";;;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM,EAAE,WAAW,QAAA,EAAU,EAAA,EAAI,QAAQ,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAC5D,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,aAAA,EAAe,QAAA,EAAU,QAAA,KAAa,WAAA,EAAY;AAE1D,IAAA,MAAM,QAAA,GAAW,OAAuB,IAAI,CAAA;AAC5C,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,QAAA,EAAU,GAAG,CAAA;AAE1C,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,SAAS,EAAA,EAAI;AACf,QAAA,OAAO,aAAA,CAAc,IAAI,KAAK,CAAA;AAAA,MAChC;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,EAAA,EAAI,aAAa,CAAC,CAAA;AAE7B,IAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAI,SAAS,KAAK,CAAA;AACtE,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,SAAS,OAAA,EAAS;AAEvB,MAAA,MAAM,0BAA0B,MAAM;AACpC,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAA,IAAI,CAAC,SAAS,OAAA,EAAS;AACvB,UAAA,MAAM,QAAA,GAAW,QAAA,CAAS,QAAA,CAAS,OAAO,CAAA;AAC1C,UAAA,uBAAA,CAAwB,QAAA,CAAS,SAAS,CAAC,CAAA;AAAA,QAC7C,CAAC,CAAA;AAAA,MACH,CAAA;AAEA,MAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,MAAM;AAC1C,QAAA,uBAAA,EAAwB;AAAA,MAC1B,CAAC,CAAA;AAED,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,uBAAA,EAAwB;AAAA,MAC1B,CAAC,CAAA;AAED,MAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,OAAA,EAAS;AAAA,QACjC,SAAA,EAAW,IAAA;AAAA,QACX,OAAA,EAAS,IAAA;AAAA,QACT,UAAA,EAAY;AAAA,OACb,CAAA;AAED,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,UAAA,EAAW;AAAA,MACtB,CAAA;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,SAAS,QAAA,KAAa,KAAA;AAC5B,IAAA,MAAM,KAAA,GAAQ,SAAS,KAAK,CAAA;AAE5B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,GAAA,EAAK,SAAA;AAAA,QACL,IAAA,EAAK,UAAA;AAAA,QACL,iBAAA,EAAiB,KAAA;AAAA,QACjB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,QAAQ,MAAA,IAAU,MAAA;AAAA,QAClB,QAAA,EAAU,MAAA,IAAU,oBAAA,GAAuB,MAAA,GAAY,CAAA;AAAA,QACtD,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

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

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

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

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

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

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIsomorphicLayoutEffect, useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import { useTabNext } from './TabNextContext.js';
+import css_248z from './TabNextTrigger.css.js';
+import { useTabsNext } from './TabsNextContext.js';
+
+const withBaseName = 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 = forwardRef(function TabNextTrigger2(props, ref) {
+  const { children, onClick, onKeyDown, ...rest } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-tab-next-trigger",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { setSelected, registerTab, getPanelId } = useTabsNext();
+  const { selected, value, focused, disabled, tabId, actions } = useTabNext();
+  const tabRef = useRef(null);
+  const id = tabId;
+  useIsomorphicLayoutEffect(() => {
+    if (value && id && tabRef.current) {
+      return registerTab({ id, value, element: tabRef.current });
+    }
+  }, [value, id, registerTab]);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    setSelected(event, value);
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.key === "Enter" || event.key === " ") {
+      setSelected(event, value);
+    }
+  };
+  const handleRef = useForkRef(tabRef, ref);
+  const panelId = getPanelId(value);
+  const ariaActionsProps = ariaActionSupported ? {
+    "aria-actions": clsx(actions) || void 0
+  } : {};
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      "aria-controls": panelId,
+      ...ariaActionsProps,
+      "aria-description": getAriaDescription(actions.length),
+      tabIndex: focused || selected ? void 0 : -1,
+      role: "tab",
+      type: "button",
+      onClick: !disabled ? handleClick : void 0,
+      onKeyDown: !disabled ? handleKeyDown : void 0,
+      className: withBaseName(),
+      id,
+      ref: handleRef,
+      ...rest,
+      children
+    }
+  );
+});
+
+export { TabNextTrigger };
+//# sourceMappingURL=TabNextTrigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextTrigger.js","sources":["../src/tabs-next/TabNextTrigger.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\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  type KeyboardEvent,\n  type MouseEvent,\n  useRef,\n} from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport tabTriggerCss from \"./TabNextTrigger.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextTriggerProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"id\"> {}\n\nconst withBaseName = makePrefixer(\"saltTabNextTrigger\");\n\nfunction getAriaDescription(count: number) {\n  if (count < 1) {\n    return undefined;\n  }\n\n  if (count === 1) {\n    return \"1 action available\";\n  }\n\n  return `${count} actions available`;\n}\n\nconst ariaActionSupported =\n  typeof HTMLElement !== \"undefined\" && \"ariaActions\" in HTMLElement.prototype;\n\nexport const TabNextTrigger = forwardRef<\n  HTMLButtonElement,\n  TabNextTriggerProps\n>(function TabNextTrigger(props, ref) {\n  const { children, onClick, onKeyDown, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next-trigger\",\n    css: tabTriggerCss,\n    window: targetWindow,\n  });\n\n  const { setSelected, registerTab, getPanelId } = useTabsNext();\n  const { selected, value, focused, disabled, tabId, actions } = useTabNext();\n\n  const tabRef = useRef<HTMLButtonElement>(null);\n\n  const id = tabId;\n\n  useIsomorphicLayoutEffect(() => {\n    if (value && id && tabRef.current) {\n      return registerTab({ id, value, element: tabRef.current });\n    }\n  }, [value, id, registerTab]);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    setSelected(event, value);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      setSelected(event, value);\n    }\n  };\n\n  const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);\n  const panelId = getPanelId(value);\n\n  // Applying aria-actions this way avoid React warnings about unknown props\n  const ariaActionsProps = ariaActionSupported\n    ? {\n        \"aria-actions\": clsx(actions) || undefined,\n      }\n    : {};\n\n  return (\n    <button\n      aria-selected={selected}\n      aria-disabled={disabled}\n      aria-controls={panelId}\n      {...ariaActionsProps}\n      aria-description={getAriaDescription(actions.length)}\n      tabIndex={focused || selected ? undefined : -1}\n      role=\"tab\"\n      type=\"button\"\n      onClick={!disabled ? handleClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n      className={withBaseName()}\n      id={id}\n      ref={handleRef}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["TabNextTrigger","tabTriggerCss"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltTabOverflow {\n  position: relative;\n}\n\n.saltTabOverflow-list {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltTabOverflow-listContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltTabOverflow-list[data-hidden=\"true\"] {\n  opacity: 0;\n  pointer-events: none;\n  /* Avoid causing page to overflow with the hidden elements */\n  width: 1px;\n  height: 1px;\n}\n\n.saltTabOverflow-list .saltTabNext {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  justify-content: flex-start;\n}\n\n@supports selector(:has(*)) {\n  .saltTabListNext:has([data-overflowbutton]) .saltTabOverflow-list .saltTabNext {\n    max-width: unset;\n  }\n}\n\n.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {\n  justify-content: start;\n}\n\n.saltTabOverflow-list .saltTabNext::after {\n  display: none;\n}\n\n.saltTabOverflow-list .saltTabNext[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltTabOverflow-list .saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltTabOverflow-list .saltTabNext:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTabOverflow-list .saltTabNext:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TabOverflowList.css.js.map

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

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

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

@@ -0,0 +1,131 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { offset, size, flip, useInteractions, useDismiss, FloatingTree } from '@floating-ui/react';
+import { makePrefixer, useIcon, useFloatingUI, useForkRef, useId, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef, useRef, useCallback, Children } from 'react';
+import { useFocusOutside } from './hooks/useFocusOutside.js';
+import css_248z from './TabOverflowList.css.js';
+
+const withBaseName = makePrefixer("saltTabOverflow");
+const TabOverflowList = forwardRef(
+  function TabOverflowList2(props, ref) {
+    const {
+      buttonRef,
+      tabstripRef,
+      children,
+      isMeasuring,
+      open,
+      setOpen,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tabs-next-overflow-list",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { OverflowIcon } = useIcon();
+    const { refs, x, y, strategy, context } = useFloatingUI({
+      open,
+      onOpenChange(open2, _, reason) {
+        if (reason === "escape-key") {
+          queueMicrotask(() => {
+            var _a, _b, _c;
+            const allTabs = ((_a = tabstripRef.current) == null ? void 0 : _a.querySelectorAll(
+              '[role="tab"]:not([aria-hidden])'
+            )) ?? [];
+            const numberOfTabsInOverflow = ((_b = listRef.current) == null ? void 0 : _b.querySelectorAll('[role="tab"]').length) ?? 0;
+            (_c = allTabs[allTabs.length - numberOfTabsInOverflow - 1]) == null ? void 0 : _c.focus({
+              preventScroll: true
+            });
+          });
+        }
+        setOpen(open2);
+      },
+      placement: "bottom-start",
+      middleware: [
+        offset(1),
+        size({
+          apply({ elements, availableHeight }) {
+            Object.assign(elements.floating.style, {
+              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`
+            });
+          }
+        }),
+        flip()
+      ]
+    });
+    const { getFloatingProps } = useInteractions([useDismiss(context)]);
+    const rootRef = useRef(null);
+    const handleRootRef = useForkRef(rootRef, ref);
+    const listRef = useRef(null);
+    const handleListRef = useForkRef(listRef, refs.setFloating);
+    const handleFocusOutside = useCallback(() => {
+      setOpen(false);
+    }, [setOpen]);
+    useFocusOutside(
+      rootRef,
+      handleFocusOutside,
+      open,
+      "[data-floating-ui-portal]"
+    );
+    const handleClick = () => {
+      var _a, _b;
+      if (!open) {
+        (_b = (_a = listRef.current) == null ? void 0 : _a.querySelectorAll('[role="tab"]')[0]) == null ? void 0 : _b.focus({ preventScroll: true });
+      } else {
+        setOpen(false);
+      }
+    };
+    const handleFocus = () => {
+      setOpen(true);
+    };
+    const handleButtonRef = useForkRef(
+      buttonRef,
+      refs.setReference
+    );
+    const listId = useId();
+    const childCount = Children.count(children);
+    if (childCount === 0 && !isMeasuring) return null;
+    return /* @__PURE__ */ jsxs("div", { className: withBaseName(), ref: handleRootRef, "data-overflow": true, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "data-overflowbutton": true,
+          tabIndex: -1,
+          appearance: "transparent",
+          sentiment: "neutral",
+          onClick: handleClick,
+          ref: handleButtonRef,
+          "aria-label": `Overflow menu. ${childCount} tabs hidden`,
+          "aria-expanded": open,
+          "aria-controls": listId,
+          "aria-hidden": "true",
+          role: "tab",
+          "aria-haspopup": true,
+          ...rest,
+          children: /* @__PURE__ */ jsx(OverflowIcon, { "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: handleListRef,
+          ...getFloatingProps({
+            onFocus: handleFocus,
+            role: "presentation"
+          }),
+          className: withBaseName("list"),
+          "data-hidden": !open,
+          style: open ? { left: x ?? 0, top: y ?? 0, position: strategy } : void 0,
+          id: listId,
+          children: /* @__PURE__ */ jsx("div", { className: withBaseName("listContainer"), children })
+        }
+      ) })
+    ] });
+  }
+);
+
+export { TabOverflowList };
+//# sourceMappingURL=TabOverflowList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabOverflowList.js","sources":["../src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n  FloatingTree,\n  flip,\n  offset,\n  size,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  Button,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { useFocusOutside } from \"./hooks/useFocusOutside\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n  buttonRef?: Ref<HTMLButtonElement>;\n  tabstripRef: RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  isMeasuring?: boolean;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n  function TabOverflowList(props, ref) {\n    const {\n      buttonRef,\n      tabstripRef,\n      children,\n      isMeasuring,\n      open,\n      setOpen,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabs-next-overflow-list\",\n      css: tabOverflowListCss,\n      window: targetWindow,\n    });\n\n    const { OverflowIcon } = useIcon();\n\n    const { refs, x, y, strategy, context } = useFloatingUI({\n      open: open,\n      onOpenChange(open, _, reason) {\n        if (reason === \"escape-key\") {\n          queueMicrotask(() => {\n            const allTabs =\n              tabstripRef.current?.querySelectorAll<HTMLElement>(\n                '[role=\"tab\"]:not([aria-hidden])',\n              ) ?? [];\n            const numberOfTabsInOverflow =\n              listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')\n                .length ?? 0;\n\n            allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({\n              preventScroll: true,\n            });\n          });\n        }\n\n        setOpen(open);\n      },\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            });\n          },\n        }),\n        flip(),\n      ],\n    });\n\n    const { getFloatingProps } = useInteractions([useDismiss(context)]);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const handleRootRef = useForkRef(rootRef, ref);\n    const listRef = useRef<HTMLDivElement>(null);\n    const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);\n\n    const handleFocusOutside = useCallback(() => {\n      setOpen(false);\n    }, [setOpen]);\n\n    useFocusOutside(\n      rootRef,\n      handleFocusOutside,\n      open,\n      \"[data-floating-ui-portal]\",\n    );\n\n    const handleClick = () => {\n      if (!open) {\n        listRef.current\n          ?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[0]\n          ?.focus({ preventScroll: true });\n      } else {\n        setOpen(false);\n      }\n    };\n\n    const handleFocus = () => {\n      setOpen(true);\n    };\n\n    const handleButtonRef = useForkRef<HTMLButtonElement>(\n      buttonRef,\n      refs.setReference,\n    );\n\n    const listId = useId();\n\n    const childCount = Children.count(children);\n    if (childCount === 0 && !isMeasuring) return null;\n\n    return (\n      <div className={withBaseName()} ref={handleRootRef} data-overflow>\n        <Button\n          data-overflowbutton\n          tabIndex={-1}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleClick}\n          ref={handleButtonRef}\n          aria-label={`Overflow menu. ${childCount} tabs hidden`}\n          aria-expanded={open}\n          aria-controls={listId}\n          aria-hidden=\"true\"\n          role=\"tab\"\n          aria-haspopup\n          {...rest}\n        >\n          <OverflowIcon aria-hidden />\n        </Button>\n        <FloatingTree>\n          <div\n            ref={handleListRef}\n            {...getFloatingProps({\n              onFocus: handleFocus,\n              role: \"presentation\",\n            })}\n            className={withBaseName(\"list\")}\n            data-hidden={!open}\n            style={\n              open\n                ? { left: x ?? 0, top: y ?? 0, position: strategy }\n                : undefined\n            }\n            id={listId}\n          >\n            <div className={withBaseName(\"listContainer\")}>{children}</div>\n          </div>\n        </FloatingTree>\n      </div>\n    );\n  },\n);\n"],"names":["TabOverflowList","tabOverflowListCss","open"],"mappings":"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"}

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

@@ -0,0 +1,127 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useControlled, useEventCallback } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useState, useRef, useCallback, useMemo } from 'react';
+import { useCollection } from './hooks/useCollection.js';
+import { TabsNextContext } from './TabsNextContext.js';
+
+const withBaseName = makePrefixer("saltTabsNext");
+const TabsNext = forwardRef(
+  function TabsNext2(props, ref) {
+    const { className, children, value, defaultValue, onChange, ...rest } = props;
+    const [valueToTabIdMap, setValueToIdMap] = useState({
+      map: /* @__PURE__ */ new Map()
+    });
+    const [valueToPanelIdMap, setValueToPanelIdMap] = useState({
+      map: /* @__PURE__ */ new Map()
+    });
+    const {
+      registerItem,
+      item,
+      getNext,
+      getPrevious,
+      getFirst,
+      getLast,
+      items
+    } = useCollection({ wrap: true });
+    const activeTab = useRef();
+    const removedActiveTabRef = useRef(void 0);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [selected, setSelectedState] = useControlled({
+      controlled: value,
+      default: defaultValue,
+      name: "TabListNext",
+      state: "selected"
+    });
+    const setSelected = useCallback(
+      (event, value2) => {
+        setMenuOpen(false);
+        setSelectedState(value2);
+        onChange == null ? void 0 : onChange(event, value2);
+      },
+      [onChange]
+    );
+    const registerTab = useEventCallback((item2) => {
+      const cleanup = registerItem(item2);
+      setValueToIdMap(({ map }) => {
+        map.set(item2.value, item2.id);
+        return { map };
+      });
+      return () => {
+        var _a;
+        cleanup();
+        setValueToIdMap(({ map }) => {
+          map.delete(item2.value);
+          return { map };
+        });
+        if (((_a = activeTab.current) == null ? void 0 : _a.value) !== item2.value) {
+          return;
+        }
+        removedActiveTabRef.current = item2.value;
+      };
+    });
+    const registerPanel = useCallback((id, value2) => {
+      setValueToPanelIdMap(({ map }) => {
+        map.set(value2, id);
+        return { map };
+      });
+      return () => {
+        setValueToIdMap(({ map }) => {
+          map.delete(value2);
+          return { map };
+        });
+      };
+    }, []);
+    const getPanelId = useCallback(
+      (value2) => {
+        return valueToPanelIdMap.map.get(value2);
+      },
+      [valueToPanelIdMap]
+    );
+    const getTabId = useCallback(
+      (value2) => {
+        return valueToTabIdMap.map.get(value2);
+      },
+      [valueToTabIdMap]
+    );
+    const context = useMemo(
+      () => ({
+        registerTab,
+        registerPanel,
+        getPanelId,
+        getTabId,
+        selected,
+        setSelected,
+        item,
+        getNext,
+        getPrevious,
+        getFirst,
+        getLast,
+        items,
+        activeTab,
+        menuOpen,
+        setMenuOpen,
+        removedActiveTabRef
+      }),
+      [
+        registerPanel,
+        registerTab,
+        getPanelId,
+        getTabId,
+        selected,
+        setSelected,
+        item,
+        getNext,
+        getPrevious,
+        getFirst,
+        getLast,
+        items,
+        menuOpen
+      ]
+    );
+    return /* @__PURE__ */ jsx(TabsNextContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ref, ...rest, children }) });
+  }
+);
+
+export { TabsNext };
+//# sourceMappingURL=TabsNext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsNext.js","sources":["../src/tabs-next/TabsNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useEventCallback } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useCollection } from \"./hooks/useCollection\";\nimport { type Item, TabsNextContext } from \"./TabsNextContext\";\n\nexport interface TabsNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  children?: ReactNode;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: string;\n  /**\n   * Callback fired when the selection changes. The event will be null when selection is moved automatically.\n   */\n  onChange?: (event: SyntheticEvent | null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabsNext\");\n\nexport const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(\n  function TabsNext(props, ref) {\n    const { className, children, value, defaultValue, onChange, ...rest } =\n      props;\n\n    const [valueToTabIdMap, setValueToIdMap] = useState({\n      map: new Map<string, string>(),\n    });\n    const [valueToPanelIdMap, setValueToPanelIdMap] = useState({\n      map: new Map<string, string>(),\n    });\n\n    const {\n      registerItem,\n      item,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n    } = useCollection({ wrap: true });\n\n    const activeTab = useRef<Pick<Item, \"id\" | \"value\">>();\n    const removedActiveTabRef = useRef<string | undefined>(undefined);\n\n    const [menuOpen, setMenuOpen] = useState(false);\n\n    const [selected, setSelectedState] = useControlled({\n      controlled: value,\n      default: defaultValue,\n      name: \"TabListNext\",\n      state: \"selected\",\n    });\n\n    const setSelected = useCallback(\n      (event: SyntheticEvent | null, value: string) => {\n        setMenuOpen(false);\n        setSelectedState(value);\n        onChange?.(event, value);\n      },\n      [onChange],\n    );\n\n    const registerTab = useEventCallback((item: Item) => {\n      const cleanup = registerItem(item);\n      setValueToIdMap(({ map }) => {\n        map.set(item.value, item.id);\n        return { map };\n      });\n\n      return () => {\n        cleanup();\n        setValueToIdMap(({ map }) => {\n          map.delete(item.value);\n          return { map };\n        });\n\n        if (activeTab.current?.value !== item.value) {\n          return;\n        }\n\n        removedActiveTabRef.current = item.value;\n      };\n    });\n\n    const registerPanel = useCallback((id: string, value: string) => {\n      setValueToPanelIdMap(({ map }) => {\n        map.set(value, id);\n        return { map };\n      });\n      return () => {\n        setValueToIdMap(({ map }) => {\n          map.delete(value);\n          return { map };\n        });\n      };\n    }, []);\n\n    const getPanelId = useCallback(\n      (value: string) => {\n        return valueToPanelIdMap.map.get(value);\n      },\n      [valueToPanelIdMap],\n    );\n\n    const getTabId = useCallback(\n      (value: string) => {\n        return valueToTabIdMap.map.get(value);\n      },\n      [valueToTabIdMap],\n    );\n\n    const context = useMemo(\n      () => ({\n        registerTab,\n        registerPanel,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        items,\n        activeTab,\n        menuOpen,\n        setMenuOpen,\n        removedActiveTabRef,\n      }),\n      [\n        registerPanel,\n        registerTab,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        items,\n        menuOpen,\n      ],\n    );\n\n    return (\n      <TabsNextContext.Provider value={context}>\n        <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n          {children}\n        </div>\n      </TabsNextContext.Provider>\n    );\n  },\n);\n"],"names":["TabsNext","value","item"],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const TabsNextContext = createContext(
+  "TabsNextContext",
+  {
+    getFirst: () => null,
+    getLast: () => null,
+    getNext: () => null,
+    getPrevious: () => null,
+    item: () => null,
+    items: [],
+    selected: void 0,
+    registerTab: () => () => void 0,
+    registerPanel: () => () => void 0,
+    getPanelId: () => void 0,
+    getTabId: () => void 0,
+    setSelected: () => void 0,
+    activeTab: { current: void 0 },
+    removedActiveTabRef: { current: void 0 },
+    menuOpen: false,
+    setMenuOpen: () => void 0
+  }
+);
+function useTabsNext() {
+  return useContext(TabsNextContext);
+}
+
+export { TabsNextContext, useTabsNext };
+//# sourceMappingURL=TabsNextContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsNextContext.js","sources":["../src/tabs-next/TabsNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n  type Dispatch,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\nimport type { useCollection } from \"./hooks/useCollection\";\n\nexport interface Item {\n  id: string;\n  value: string;\n  element: HTMLElement;\n}\n\nexport interface TabsNextContextValue\n  extends Omit<ReturnType<typeof useCollection>, \"registerItem\"> {\n  registerTab: (item: Item) => () => void;\n  registerPanel: (id: string, value: string) => () => void;\n  getPanelId: (value: string) => string | undefined;\n  getTabId: (value: string) => string | undefined;\n  selected?: string;\n  setSelected: (event: SyntheticEvent, value: string) => void;\n  activeTab: MutableRefObject<Pick<Item, \"id\" | \"value\"> | undefined>;\n  removedActiveTabRef: MutableRefObject<string | undefined>;\n  menuOpen: boolean;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nexport const TabsNextContext = createContext<TabsNextContextValue>(\n  \"TabsNextContext\",\n  {\n    getFirst: () => null,\n    getLast: () => null,\n    getNext: () => null,\n    getPrevious: () => null,\n    item: () => null,\n    items: [],\n    selected: undefined,\n    registerTab: () => () => undefined,\n    registerPanel: () => () => undefined,\n    getPanelId: () => undefined,\n    getTabId: () => undefined,\n    setSelected: () => undefined,\n    activeTab: { current: undefined },\n    removedActiveTabRef: { current: undefined },\n    menuOpen: false,\n    setMenuOpen: () => undefined,\n  },\n);\n\nexport function useTabsNext() {\n  return useContext(TabsNextContext);\n}\n"],"names":[],"mappings":";;;AA8BO,MAAM,eAAA,GAAkB,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AAAA,IACE,UAAU,MAAM,IAAA;AAAA,IAChB,SAAS,MAAM,IAAA;AAAA,IACf,SAAS,MAAM,IAAA;AAAA,IACf,aAAa,MAAM,IAAA;AAAA,IACnB,MAAM,MAAM,IAAA;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,QAAA,EAAU,MAAA;AAAA,IACV,WAAA,EAAa,MAAM,MAAM,MAAA;AAAA,IACzB,aAAA,EAAe,MAAM,MAAM,MAAA;AAAA,IAC3B,YAAY,MAAM,MAAA;AAAA,IAClB,UAAU,MAAM,MAAA;AAAA,IAChB,aAAa,MAAM,MAAA;AAAA,IACnB,SAAA,EAAW,EAAE,OAAA,EAAS,MAAA,EAAU;AAAA,IAChC,mBAAA,EAAqB,EAAE,OAAA,EAAS,MAAA,EAAU;AAAA,IAC1C,QAAA,EAAU,KAAA;AAAA,IACV,aAAa,MAAM;AAAA;AAEvB;AAEO,SAAS,WAAA,GAAc;AAC5B,EAAA,OAAO,WAAW,eAAe,CAAA;AACnC;;;;"}

package/dist-es/tabs-next/hooks/useCollection.js

@@ -0,0 +1,89 @@
+import { useState, useRef, useCallback } from 'react';
+
+function sortBasedOnDOMPosition(items) {
+  const indexedItems = items.map((item, index) => [index, item]);
+  let orderChanged = false;
+  indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB]) => {
+    const itemAElement = itemA.element;
+    const itemBElement = itemB.element;
+    if (itemAElement === itemBElement) return 0;
+    if (!itemAElement || !itemBElement) return 0;
+    if (itemAElement.compareDocumentPosition(itemBElement) & Node.DOCUMENT_POSITION_FOLLOWING) {
+      if (itemAIndex > itemBIndex) {
+        orderChanged = true;
+      }
+      return -1;
+    }
+    if (itemAIndex < itemBIndex) {
+      orderChanged = true;
+    }
+    return 1;
+  });
+  if (orderChanged) {
+    return indexedItems.map(([_, item]) => item);
+  }
+  return items;
+}
+function useCollection({ wrap }) {
+  const [items, setItems] = useState([]);
+  const itemsRef = useRef([]);
+  const itemMap = useRef(/* @__PURE__ */ new Map());
+  const registerItem = useCallback((item) => {
+    setItems((old) => {
+      const newItems = old.slice();
+      const index = newItems.findIndex(({ id }) => id === item.id);
+      if (index !== -1) {
+        const newItem = { ...newItems[index], ...item };
+        newItems[index] = newItem;
+        itemMap.current.set(item.id, newItem);
+      } else {
+        newItems.push(item);
+        itemMap.current.set(item.id, item);
+      }
+      const value = sortBasedOnDOMPosition(newItems);
+      itemsRef.current = value;
+      return value;
+    });
+    return () => {
+      setItems((old) => {
+        itemMap.current.delete(item.id);
+        return old.filter(({ id }) => id !== item.id);
+      });
+      return itemsRef;
+    };
+  }, []);
+  return {
+    registerItem,
+    item: (id) => {
+      if (!id) return null;
+      let item = itemMap.current.get(id);
+      if (!item) {
+        item = items.find((item2) => item2.id === id);
+        if (item) {
+          itemMap.current.set(item.id, item);
+        }
+      }
+      return item ?? null;
+    },
+    getNext: (current) => {
+      const index = items.findIndex(({ id }) => id === current);
+      const newIndex = (index + 1) % items.length ;
+      return items[newIndex] ?? null;
+    },
+    getPrevious: (current) => {
+      const index = items.findIndex(({ id }) => id === current);
+      const newIndex = (index - 1 + items.length) % items.length ;
+      return items[newIndex] ?? null;
+    },
+    getFirst: () => {
+      return items[0] ?? null;
+    },
+    getLast: () => {
+      return items[items.length - 1] ?? null;
+    },
+    items
+  };
+}
+
+export { useCollection };
+//# sourceMappingURL=useCollection.js.map