@salt-ds/lab 1.0.0-alpha.88 → 1.0.0-alpha.89

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.89
+
+### Patch Changes
+
+- e131baa: Improved `useEventCallback`'s stability.
+- 7427b2c: - Updated spacing between tree node elements.
+  - Fixed missing gap between node elements.
+  - Fixed node focus indicator outline placement.
+- 39e684a: Fixed incorrect Tooltip positioning and behavior when used with TreeNodeTrigger.
+- b9c81ae: Refactored Tabs to address accessibility issues, known bugs and improve stability.
+- Updated dependencies [e131baa]
+- Updated dependencies [2d2d62b]
+  - @salt-ds/core@1.59.1
+
 ## 1.0.0-alpha.88
 
 ### Patch Changes

package/css/salt-lab.css

@@ -2949,9 +2949,20 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  gap: var(--salt-spacing-100);
   position: relative;
   box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+.saltTabBar-strip {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex: 1 1 auto;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
 }
 .saltTabBar-divider::before {
   content: "";
@@ -2976,8 +2987,8 @@
   min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   gap: var(--salt-spacing-100);
   max-width: 100%;
-  width: 100%;
   min-width: 0;
+  flex: 0 1 auto;
 }
 .saltTabListNext-center {
   justify-content: center;
@@ -2994,8 +3005,15 @@
 .saltTabListNext-activeColorTertiary {
   --saltTabListNext-activeColor: var(--salt-container-tertiary-background);
 }
-.saltTabListNext-overflowWarning {
-  display: none;
+.saltTabListNext-measureContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+  white-space: nowrap;
 }
 
 /* src/tabs-next/TabNext.css */
@@ -3113,10 +3131,10 @@
   overflow: hidden;
   overflow-y: auto;
   position: absolute;
-  z-index: var(--salt-zIndex-flyover);
   box-shadow: var(--salt-overlayable-shadow-popout);
   box-sizing: border-box;
   border-radius: var(--salt-palette-corner, 0);
+  z-index: var(--salt-zIndex-flyover);
 }
 .saltTabOverflow-listContainer {
   display: flex;
@@ -3125,12 +3143,6 @@
   max-height: inherit;
   min-height: inherit;
 }
-.saltTabOverflow-list[data-hidden=true] {
-  opacity: 0;
-  pointer-events: none;
-  width: 1px;
-  height: 1px;
-}
 .saltTabOverflow-list .saltTabNext {
   color: var(--salt-content-primary-foreground);
   background: var(--salt-selectable-background);
@@ -3175,6 +3187,11 @@
   box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
 }
 
+/* src/tabs-next/TabsNext.css */
+.saltTabsNext {
+  min-width: 0;
+}
+
 /* src/toast-group/ToastGroup.css */
 .saltToastGroup {
   width: var(--toastGroup-width);
@@ -3685,6 +3702,9 @@
 
 /* src/tree/Tree.css */
 .saltTree {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
   list-style: none;
   margin: 0;
   padding: 0;
@@ -3708,18 +3728,24 @@
 .saltTreeNode:focus-visible > .saltTreeNodeTrigger,
 .saltTreeNode-focusVisible > .saltTreeNodeTrigger {
   outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
   position: relative;
   z-index: calc(var(--salt-zIndex-default) + 1);
 }
 .saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,
 .saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
   outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
   z-index: calc(var(--salt-zIndex-default) + 1);
 }
 .saltTreeNode-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
   list-style: none;
   margin: 0;
   padding: 0;
+  padding-top: var(--salt-spacing-fixed-100);
 }
 .saltTreeNode-checkbox {
   flex-shrink: 0;
@@ -3727,7 +3753,7 @@
 }
 .saltTreeNode-icon {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   width: var(--salt-size-selectable);
   min-width: var(--salt-size-selectable);
@@ -3741,7 +3767,7 @@
 /* src/tree/TreeNodeExpansionIcon.css */
 .saltTreeNodeExpansionIcon {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   width: var(--salt-size-selectable);
   min-width: var(--salt-size-selectable);
@@ -3786,13 +3812,12 @@
   padding-bottom: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);
   padding-right: var(--salt-spacing-100);
   --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-100));
+  --saltTreeNodeTrigger-iconOffsetY: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);
+  --saltTreeNodeTrigger-directIconInsetX: max(0px, calc((var(--salt-size-selectable) - max(var(--salt-size-icon), 12px)) / 2));
   padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));
   background: var(--salt-selectable-background);
   color: var(--salt-content-primary-foreground);
 }
-[aria-multiselectable=true] .saltTreeNodeTrigger {
-  --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-150));
-}
 .saltTreeNodeTrigger:hover {
   background: var(--salt-selectable-background-hover);
 }
@@ -3802,7 +3827,7 @@
 }
 .saltTreeNode-selected > .saltTreeNodeTrigger {
   background: var(--salt-selectable-background-selected);
-  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);
+  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
   position: relative;
   z-index: var(--salt-zIndex-default);
 }
@@ -3817,17 +3842,20 @@
   background: var(--salt-selectable-background);
   color: var(--salt-content-primary-foreground);
 }
+.saltTreeNodeTrigger > .saltTreeNode-checkbox {
+  margin-block: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
+}
+.saltTreeNodeTrigger > .saltTreeNodeExpansionIcon > .saltTreeNodeExpansionIcon-icon,
+.saltTreeNodeTrigger > .saltTreeNode-icon > .saltIcon {
+  --saltIcon-margin: var(--saltTreeNodeTrigger-iconOffsetY) 0 0 0;
+}
 .saltTreeNodeTrigger > .saltIcon {
-  width: var(--salt-size-selectable);
-  height: var(--salt-size-selectable);
-  min-width: var(--salt-size-selectable);
+  --saltIcon-margin: var(--saltTreeNodeTrigger-iconOffsetY) 0 0 0;
+  box-sizing: content-box;
+  padding-inline: var(--saltTreeNodeTrigger-directIconInsetX);
   flex-shrink: 0;
   color: var(--salt-content-primary-foreground);
 }
-.saltTreeNodeTrigger > .saltTreeNode-checkbox {
-  margin-left: calc(var(--salt-spacing-150) - var(--salt-spacing-100));
-  margin-right: calc(var(--salt-spacing-150) - var(--salt-spacing-100));
-}
 
 /* src/window/ElectronWindow.css */
 .saltWindow {
@@ -4244,4 +4272,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/4ab77bbb-d93c-4e89-bc2e-478a2cbac219.css */
+/* src/133f6296-6356-4cbf-8225-c555b1a7031b.css */

package/dist-cjs/list-deprecated/ListStateContext.js

@@ -2,7 +2,7 @@
 
 var react = require('react');
 
-const ListStateContext = react.createContext();
+const ListStateContext = react.createContext(void 0);
 const useListStateContext = () => {
   const context = react.useContext(ListStateContext);
   if (!context) {

package/dist-cjs/list-deprecated/ListStateContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListStateContext.js","sources":["../src/list-deprecated/ListStateContext.js"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const ListStateContext = createContext();\n\nexport const useListStateContext = () => {\n  const context = useContext(ListStateContext);\n\n  if (!context) {\n    throw new Error(\n      \"useListStateContext must be used inside of a ListStateContext Provider.\",\n    );\n  }\n\n  return context;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;AAEO,MAAM,mBAAmBA,mBAAA;AAEzB,MAAM,sBAAsB,MAAM;AACvC,EAAA,MAAM,OAAA,GAAUC,iBAAW,gBAAgB,CAAA;AAE3C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AAEA,EAAA,OAAO,OAAA;AACT;;;;;"}
+{"version":3,"file":"ListStateContext.js","sources":["../src/list-deprecated/ListStateContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\ninterface ListStateContextValue {\n  state: any;\n  helpers: any;\n}\n\nexport const ListStateContext = createContext<\n  ListStateContextValue | undefined\n>(undefined);\n\nexport const useListStateContext = () => {\n  const context = useContext(ListStateContext);\n\n  if (!context) {\n    throw new Error(\n      \"useListStateContext must be used inside of a ListStateContext Provider.\",\n    );\n  }\n\n  return context;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;AAOO,MAAM,gBAAA,GAAmBA,oBAE9B,MAAS;AAEJ,MAAM,sBAAsB,MAAM;AACvC,EAAA,MAAM,OAAA,GAAUC,iBAAW,gBAAgB,CAAA;AAE3C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AAEA,EAAA,OAAO,OAAA;AACT;;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltTabBar {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  box-sizing: border-box;\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";
+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";
 
 module.exports = css_248z;
 //# sourceMappingURL=TabBar.css.js.map

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

@@ -31,7 +31,7 @@ const TabBar = react.forwardRef(
         ),
         ...rest,
         ref,
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("strip"), children })
       }
     );
   }

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

@@ -1 +1 @@
-{"version":3,"file":"TabBar.js","sources":["../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\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        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabBar","useWindow","useComponentCssInjection","tabBarCss","jsx","clsx"],"mappings":";;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAASC,gBAAA;AAAA,EACpB,SAASC,OAAAA,CAAO,KAAA,EAAO,GAAA,EAAK;AAC1B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAS,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAEzD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;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,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"TabBar.js","sources":["../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\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":["makePrefixer","forwardRef","TabBar","useWindow","useComponentCssInjection","tabBarCss","jsx","clsx"],"mappings":";;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAASC,gBAAA;AAAA,EACpB,SAASC,OAAAA,CAAO,KAAA,EAAO,GAAA,EAAK;AAC1B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAS,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAEzD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;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,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA;AAAA,KACnD;AAAA,EAEJ;AACF;;;;"}

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+const TabListLayoutContext = core.createContext("TabListLayoutContext", null);
+function useTabListLayout() {
+  return react.useContext(TabListLayoutContext);
+}
+
+exports.TabListLayoutContext = TabListLayoutContext;
+exports.useTabListLayout = useTabListLayout;
+//# sourceMappingURL=TabListLayoutContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabListLayoutContext.js","sources":["../src/tabs-next/TabListLayoutContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\nexport type TabSlotLocation = \"hidden\" | \"main\" | \"overflow\";\n\nexport interface TabListLayoutContextValue {\n  getLocation: (value: string) => TabSlotLocation;\n  overflowActiveValue: string | null;\n  setOverflowActiveValue: (value: string | null) => void;\n  moveOverflowFocus: (\n    key: \"ArrowDown\" | \"ArrowUp\" | \"Home\" | \"End\",\n    value: string,\n  ) => boolean;\n}\n\nexport const TabListLayoutContext =\n  createContext<TabListLayoutContextValue | null>(\"TabListLayoutContext\", null);\n\nexport function useTabListLayout() {\n  return useContext(TabListLayoutContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAeO,MAAM,oBAAA,GACXA,kBAAA,CAAgD,sBAAA,EAAwB,IAAI;AAEvE,SAAS,gBAAA,GAAmB;AACjC,EAAA,OAAOC,iBAAW,oBAAoB,CAAA;AACxC;;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Component class applied to the root element */\n.saltTabListNext {\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  width: 100%;\n  min-width: 0;\n}\n\n.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n\n.saltTabListNext-overflowWarning {\n  display: none;\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabListNext {\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.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n\n.saltTabListNext-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";
 
 module.exports = css_248z;
 //# sourceMappingURL=TabListNext.css.js.map

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

@@ -6,19 +6,26 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var react = require('react');
+var useFocusWithRetry = require('./hooks/useFocusWithRetry.js');
 var useOverflow = require('./hooks/useOverflow.js');
-var useRestoreActiveTab = require('./hooks/useRestoreActiveTab.js');
+var useOverflowLayoutState = require('./hooks/useOverflowLayoutState.js');
+var useTabListRecovery = require('./hooks/useTabListRecovery.js');
+var useTabRemovalHandler = require('./hooks/useTabRemovalHandler.js');
+var useTabSelectionFocus = require('./hooks/useTabSelectionFocus.js');
+var TabListLayoutContext = require('./TabListLayoutContext.js');
 var TabListNext$1 = require('./TabListNext.css.js');
 var TabOverflowList = require('./TabOverflowList.js');
+var TabSlot = require('./TabSlot.js');
+var TabSlotRegistryContext = require('./TabSlotRegistryContext.js');
 var TabsNextContext = require('./TabsNextContext.js');
 
 const withBaseName = core.makePrefixer("saltTabListNext");
+const MAX_FOCUS_RETRY_ATTEMPTS = 120;
 const TabListNext = react.forwardRef(
-  function TabstripNext(props, ref) {
+  function TabListNext2(props, ref) {
     const {
       appearance = "bordered",
       activeColor = "primary",
-      "aria-describedby": ariaDescribedBy,
       children,
       className,
       onKeyDown,
@@ -31,61 +38,185 @@ const TabListNext = react.forwardRef(
       window: targetWindow
     });
     const {
+      renderMode,
       selected,
+      setSelected,
+      setBootstrapOverflowReady,
       getNext,
       getPrevious,
       getFirst,
       getLast,
-      items,
+      getIndex,
+      item,
+      itemAt,
       activeTab,
+      selectionFromOverflowValueRef,
       menuOpen,
       setMenuOpen,
-      removedActiveTabRef
+      sortItems,
+      getRemovedItems,
+      getRenderedTab,
+      renderedTabs,
+      removalVersion
     } = TabsNextContext.useTabsNext();
     const tabstripRef = react.useRef(null);
+    const overflowListRef = react.useRef(null);
+    const slotMapRef = react.useRef(/* @__PURE__ */ new Map());
+    const removalRecoveryRafRef = react.useRef(null);
+    const pendingRemovalRecoveryRef = react.useRef(false);
+    const pendingRemovalRecoveryRetriesRef = react.useRef(0);
+    const [slotVersion, setSlotVersion] = react.useState(0);
     const handleRef = core.useForkRef(tabstripRef, ref);
     const overflowButtonRef = react.useRef(null);
-    const [visible, hidden, isMeasuring, realSelectedIndexRef] = useOverflow.useOverflow({
+    const { announce } = core.useAriaAnnouncer();
+    const overflowMenuOpen = renderMode === "portal" ? menuOpen : false;
+    const [visibleValues, hiddenValues, isMeasuring] = useOverflow.useOverflow({
       container: tabstripRef,
-      tabs: items,
-      children,
+      menuOpen: overflowMenuOpen,
       selected,
+      tabs: renderedTabs,
       overflowButton: overflowButtonRef
     });
-    useRestoreActiveTab.useRestoreActiveTab({
-      container: tabstripRef,
-      tabs: items,
-      realSelectedIndex: realSelectedIndexRef,
-      removedActiveTabRef
+    react.useEffect(() => {
+      setBootstrapOverflowReady(
+        renderMode === "inline" && renderedTabs.length > 0 && !isMeasuring
+      );
+    }, [
+      isMeasuring,
+      renderMode,
+      renderedTabs.length,
+      setBootstrapOverflowReady
+    ]);
+    const { resolvedOverflowActiveValue, tabListLayoutContext } = useOverflowLayoutState.useOverflowLayoutState({
+      hiddenValues,
+      menuOpen,
+      overflowMenuOpen,
+      visibleValues
     });
+    const registerSlot = react.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 = react.useMemo(
+      () => ({ registerSlot }),
+      [registerSlot]
+    );
+    const slotAssignments = react.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]);
+    core.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, _c, _d;
+      var _a, _b;
       onKeyDown == null ? void 0 : onKeyDown(event);
+      if (menuOpen) return;
       const actionMap = {
         ArrowRight: getNext,
         ArrowLeft: getPrevious,
         Home: getFirst,
-        End: getLast,
-        ArrowUp: menuOpen ? getPrevious : void 0,
-        ArrowDown: menuOpen ? getNext : void 0
+        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) {
-          (_c = (_b = nextItem.element) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.scrollIntoView({
-            block: "nearest",
-            inline: "nearest"
-          });
-          (_d = nextItem.element) == null ? void 0 : _d.focus({ preventScroll: true });
+          (_b = nextItem.element) == null ? void 0 : _b.focus({ preventScroll: true });
         }
       }
     };
-    const warningId = core.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const getSelectedTabElement = react.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.useFocusWithRetry({
+      maxAttempts: MAX_FOCUS_RETRY_ATTEMPTS,
+      targetWindow
+    });
+    useTabSelectionFocus.useTabSelectionFocus({
+      announce,
+      focusElementWithRetry,
+      getRenderedTab,
+      getSelectedTabElement,
+      menuOpen,
+      resolvedOverflowActiveValue,
+      selected,
+      selectionFromOverflowValueRef,
+      targetWindow
+    });
+    const handleTabRemoval = useTabRemovalHandler.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.useTabListRecovery({
+      removalVersion,
+      targetWindow,
+      tabstripRef,
+      overflowListRef,
+      handleTabRemoval,
+      pendingRemovalRecoveryRef,
+      pendingRemovalRecoveryRetriesRef
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         role: "tablist",
@@ -96,26 +227,41 @@ const TabListNext = react.forwardRef(
           withBaseName(`activeColor${core.capitalize(activeColor)}`),
           className
         ),
-        "data-ismeasuring": isMeasuring ? true : void 0,
+        "data-ismeasuring": renderMode === "portal" && isMeasuring ? true : void 0,
         ref: handleRef,
         onKeyDown: handleKeyDown,
-        "aria-describedby": clsx.clsx(ariaDescribedBy, warningId) || void 0,
         ...rest,
-        children: [
-          !isMeasuring && hidden.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { id: warningId, className: withBaseName("overflowWarning"), children: "Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected" }),
-          visible,
+        children: renderMode === "inline" ? children : /* @__PURE__ */ jsxRuntime.jsx(TabSlotRegistryContext.TabSlotRegistryContext.Provider, { value: slotRegistryContext, children: /* @__PURE__ */ jsxRuntime.jsxs(TabListLayoutContext.TabListLayoutContext.Provider, { value: tabListLayoutContext, children: [
+          children,
+          visibleValues.map((value) => /* @__PURE__ */ jsxRuntime.jsx(TabSlot.TabSlot, { slotId: `main:${value}`, value }, value)),
+          !menuOpen && hiddenValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              role: "presentation",
+              className: withBaseName("measureContainer"),
+              children: hiddenValues.map((value) => /* @__PURE__ */ jsxRuntime.jsx(
+                TabSlot.TabSlot,
+                {
+                  slotId: `measure:${value}`,
+                  value
+                },
+                `measure-${value}`
+              ))
+            }
+          ) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             TabOverflowList.TabOverflowList,
             {
-              isMeasuring,
               buttonRef: overflowButtonRef,
-              tabstripRef,
+              hiddenValues,
               open: menuOpen,
+              order: renderedTabs.length,
               setOpen: setMenuOpen,
-              children: hidden
+              ref: overflowListRef
             }
           )
-        ]
+        ] }) })
       }
     );
   }

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

@@ -1 +1 @@
-{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import { capitalize, makePrefixer, useForkRef, useId } 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  useRef,\n} from \"react\";\nimport { useOverflow } from \"./hooks/useOverflow\";\nimport { useRestoreActiveTab } from \"./hooks/useRestoreActiveTab\";\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      removedActiveTabRef,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring, realSelectedIndexRef] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    useRestoreActiveTab({\n      container: tabstripRef,\n      tabs: items,\n      realSelectedIndex: realSelectedIndexRef,\n      removedActiveTabRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.parentElement?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    const warningId = useId();\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        aria-describedby={clsx(ariaDescribedBy, warningId) || undefined}\n        {...rest}\n      >\n        {!isMeasuring && hidden.length > 0 && (\n          <span id={warningId} className={withBaseName(\"overflowWarning\")}>\n            Note: This tab list includes overflow; tab positions may be\n            inaccurate or change when a tab is selected\n          </span>\n        )}\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tablistNextCss","useTabsNext","useRef","useForkRef","useOverflow","useRestoreActiveTab","useId","jsxs","clsx","capitalize","jsx","TabOverflowList"],"mappings":"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"}
+{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useAriaAnnouncer,\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  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFocusWithRetry } from \"./hooks/useFocusWithRetry\";\nimport { useOverflow } from \"./hooks/useOverflow\";\nimport { useOverflowLayoutState } from \"./hooks/useOverflowLayoutState\";\nimport { useTabListRecovery } from \"./hooks/useTabListRecovery\";\nimport { useTabRemovalHandler } from \"./hooks/useTabRemovalHandler\";\nimport { useTabSelectionFocus } from \"./hooks/useTabSelectionFocus\";\nimport { TabListLayoutContext } from \"./TabListLayoutContext\";\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { TabSlot } from \"./TabSlot\";\nimport { TabSlotRegistryContext } from \"./TabSlotRegistryContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\nconst MAX_FOCUS_RETRY_ATTEMPTS = 120;\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabListNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      renderMode,\n      selected,\n      setSelected,\n      setBootstrapOverflowReady,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      getIndex,\n      item,\n      itemAt,\n      activeTab,\n      selectionFromOverflowValueRef,\n      menuOpen,\n      setMenuOpen,\n      sortItems,\n      getRemovedItems,\n      getRenderedTab,\n      renderedTabs,\n      removalVersion,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const overflowListRef = useRef<HTMLDivElement>(null);\n    const slotMapRef = useRef<Map<string, HTMLDivElement>>(new Map());\n    const removalRecoveryRafRef = useRef<number | null>(null);\n    const pendingRemovalRecoveryRef = useRef(false);\n    const pendingRemovalRecoveryRetriesRef = useRef(0);\n    const [slotVersion, setSlotVersion] = useState(0);\n\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const { announce } = useAriaAnnouncer();\n    const overflowMenuOpen = renderMode === \"portal\" ? menuOpen : false;\n\n    const [visibleValues, hiddenValues, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      menuOpen: overflowMenuOpen,\n      selected,\n      tabs: renderedTabs,\n      overflowButton: overflowButtonRef,\n    });\n\n    useEffect(() => {\n      setBootstrapOverflowReady(\n        renderMode === \"inline\" && renderedTabs.length > 0 && !isMeasuring,\n      );\n    }, [\n      isMeasuring,\n      renderMode,\n      renderedTabs.length,\n      setBootstrapOverflowReady,\n    ]);\n\n    const { resolvedOverflowActiveValue, tabListLayoutContext } =\n      useOverflowLayoutState({\n        hiddenValues,\n        menuOpen,\n        overflowMenuOpen,\n        visibleValues,\n      });\n    const registerSlot = useCallback(\n      (slotId: string, element: HTMLDivElement | null) => {\n        const currentElement = slotMapRef.current.get(slotId) ?? null;\n        if (currentElement === element) {\n          return;\n        }\n\n        if (element) {\n          slotMapRef.current.set(slotId, element);\n        } else {\n          slotMapRef.current.delete(slotId);\n        }\n\n        setSlotVersion((currentVersion) => currentVersion + 1);\n      },\n      [],\n    );\n    const slotRegistryContext = useMemo(\n      () => ({ registerSlot }),\n      [registerSlot],\n    );\n    const slotAssignments = useMemo(() => {\n      const nextAssignments = new Map<string, string>();\n\n      for (const value of visibleValues) {\n        nextAssignments.set(value, `main:${value}`);\n      }\n\n      for (const value of hiddenValues) {\n        nextAssignments.set(\n          value,\n          menuOpen ? `overflow:${value}` : `measure:${value}`,\n        );\n      }\n\n      return {\n        map: nextAssignments,\n        version: slotVersion,\n      };\n    }, [hiddenValues, menuOpen, slotVersion, visibleValues]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (renderMode !== \"portal\") {\n        return;\n      }\n\n      for (const [value, slotId] of slotAssignments.map) {\n        const host = getRenderedTab(value)?.host;\n        const slot = slotMapRef.current.get(slotId);\n\n        if (host && slot && host.parentElement !== slot) {\n          slot.appendChild(host);\n        }\n      }\n    }, [getRenderedTab, renderMode, slotAssignments]);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (menuOpen) return;\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        // Item registration/sorting is raf-driven; flush before keyboard nav to\n        // avoid navigating against stale collection order/registration.\n        sortItems();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          // Scrolling is handled by TabTrigger.\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    const getSelectedTabElement = useCallback(() => {\n      return (\n        tabstripRef.current?.querySelector<HTMLElement>(\n          '[role=\"tab\"][aria-selected=\"true\"]',\n        ) ?? item(activeTab.current?.id)?.element\n      );\n    }, [item, activeTab]);\n    const { focusElementWithRetry } = useFocusWithRetry({\n      maxAttempts: MAX_FOCUS_RETRY_ATTEMPTS,\n      targetWindow,\n    });\n    useTabSelectionFocus({\n      announce,\n      focusElementWithRetry,\n      getRenderedTab,\n      getSelectedTabElement,\n      menuOpen,\n      resolvedOverflowActiveValue,\n      selected,\n      selectionFromOverflowValueRef,\n      targetWindow,\n    });\n\n    const handleTabRemoval = useTabRemovalHandler({\n      activeTab,\n      focusElementWithRetry,\n      getFirst,\n      getIndex,\n      getLast,\n      getRemovedItems,\n      getRenderedTab,\n      getSelectedTabElement,\n      item,\n      itemAt,\n      maxRetryAttempts: MAX_FOCUS_RETRY_ATTEMPTS,\n      menuOpen,\n      overflowButtonRef,\n      overflowListRef,\n      pendingRemovalRecoveryRef,\n      pendingRemovalRecoveryRetriesRef,\n      removalRecoveryRafRef,\n      selected,\n      setSelected,\n      tabstripRef,\n      targetWindow,\n    });\n\n    useTabListRecovery({\n      removalVersion,\n      targetWindow,\n      tabstripRef,\n      overflowListRef,\n      handleTabRemoval,\n      pendingRemovalRecoveryRef,\n      pendingRemovalRecoveryRetriesRef,\n    });\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={\n          renderMode === \"portal\" && isMeasuring ? true : undefined\n        }\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {renderMode === \"inline\" ? (\n          children\n        ) : (\n          <TabSlotRegistryContext.Provider value={slotRegistryContext}>\n            <TabListLayoutContext.Provider value={tabListLayoutContext}>\n              {children}\n              {visibleValues.map((value) => (\n                <TabSlot key={value} slotId={`main:${value}`} value={value} />\n              ))}\n              {!menuOpen && hiddenValues.length > 0 ? (\n                <div\n                  aria-hidden=\"true\"\n                  role=\"presentation\"\n                  className={withBaseName(\"measureContainer\")}\n                >\n                  {hiddenValues.map((value) => (\n                    <TabSlot\n                      key={`measure-${value}`}\n                      slotId={`measure:${value}`}\n                      value={value}\n                    />\n                  ))}\n                </div>\n              ) : null}\n              <TabOverflowList\n                buttonRef={overflowButtonRef}\n                hiddenValues={hiddenValues}\n                open={menuOpen}\n                order={renderedTabs.length}\n                setOpen={setMenuOpen}\n                ref={overflowListRef}\n              />\n            </TabListLayoutContext.Provider>\n          </TabSlotRegistryContext.Provider>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabListNext","useWindow","useComponentCssInjection","tablistNextCss","useTabsNext","useRef","useState","useForkRef","useAriaAnnouncer","useOverflow","useEffect","useOverflowLayoutState","useCallback","useMemo","useIsomorphicLayoutEffect","useFocusWithRetry","useTabSelectionFocus","useTabRemovalHandler","useTabListRecovery","jsx","clsx","capitalize","TabSlotRegistryContext","jsxs","TabListLayoutContext","TabSlot","TabOverflowList"],"mappings":"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"}