@fluentui/react-tabs 9.11.2 → 9.12.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Wed, 25 Feb 2026 13:28:21 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 15:50:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.12.0)
+
+Wed, 01 Apr 2026 15:50:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.11.2..@fluentui/react-tabs_v9.12.0)
+
+### Minor changes
+
+- feat: expose base hooks for Tab and TabList ([PR #35902](https://github.com/microsoft/fluentui/pull/35902) by dmytrokirpa@microsoft.com)
+
 ## [9.11.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.11.2)
 
-Wed, 25 Feb 2026 13:28:21 GMT 
+Wed, 25 Feb 2026 13:32:26 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.11.1..@fluentui/react-tabs_v9.11.2)
 
 ### Patches

package/dist/index.d.ts

@@ -9,18 +9,19 @@ import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
+import { TabsterDOMAttribute } from '@fluentui/react-tabster';
 
 export declare type RegisterTabEventHandler = (data: TabRegisterData) => void;
 
 /**
  * Render the final JSX of Tab
  */
-export declare const renderTab_unstable: (state: TabState) => JSXElement;
+export declare const renderTab_unstable: (state: TabBaseState) => JSXElement;
 
 /**
  * Render the final JSX of TabList
  */
-export declare const renderTabList_unstable: (state: TabListState, contextValues: TabListContextValues) => JSXElement;
+export declare const renderTabList_unstable: (state: TabListBaseState, contextValues: TabListContextValues) => JSXElement;
 
 export declare type SelectTabData = {
     /**
@@ -38,6 +39,10 @@ export declare type SelectTabEventHandler = (event: SelectTabEvent, data: Select
  */
 export declare const Tab: ForwardRefComponent<TabProps>;
 
+declare type TabBaseProps = Omit<TabProps, 'contentReservedSpace'>;
+
+declare type TabBaseState = Omit<TabState, 'appearance' | 'size' | 'contentReservedSpace'>;
+
 export declare const tabClassNames: SlotClassNames<TabSlots>;
 
 declare type TabInternalSlots = TabSlots & {
@@ -49,6 +54,10 @@ declare type TabInternalSlots = TabSlots & {
  */
 export declare const TabList: ForwardRefComponent<TabListProps>;
 
+export declare type TabListBaseProps = Omit<TabListProps, 'appearance' | 'size' | 'reserveSelectedTabSpace'>;
+
+export declare type TabListBaseState = Omit<TabListState, 'appearance' | 'size' | 'reserveSelectedTabSpace'>;
+
 export declare const tabListClassNames: SlotClassNames<TabListSlots>;
 
 export declare type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'> & Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
@@ -253,6 +262,14 @@ export declare const useTab_unstable: (props: TabProps, ref: React_2.Ref<HTMLEle
  */
 export declare const useTabAnimatedIndicatorStyles_unstable: (state: TabState) => TabState;
 
+/**
+ * Create the based state required to render Tab without design specifics and focus attributes.
+ *
+ * @param props - props from this instance of Tab
+ * @param ref - reference to root HTMLElement of Tab
+ */
+export declare const useTabBase_unstable: (props: TabBaseProps, ref: React_2.Ref<HTMLElement>) => TabBaseState;
+
 /**
  * Applies styles to the Tab button slot based on its current state.
  *
@@ -298,6 +315,26 @@ export declare const useTabIndicatorStyles_unstable: (state: TabState) => TabSta
  */
 export declare const useTabList_unstable: (props: TabListProps, ref: React_2.Ref<HTMLElement>) => TabListState;
 
+/**
+ * Hook to get accessibility attributes for TabList component, such as roving tab index.
+ * Based on Tabster's useArrowNavigationGroup.
+ *
+ * @param vertical - whether the TabList is vertical
+ * @returns Tabster DOM attributes
+ */
+export declare const useTabListA11yBehavior_unstable: ({ vertical, }: Pick<TabListBaseState, "vertical">) => TabsterDOMAttribute;
+
+/**
+ * Create the state required to render TabList.
+ *
+ * The returned state can be modified with hooks such as useTabListStyles_unstable,
+ * before being passed to renderTabList_unstable.
+ *
+ * @param props - props from this instance of TabList
+ * @param ref - reference to root HTMLElement of TabList
+ */
+export declare const useTabListBase_unstable: (props: TabListBaseProps, ref: React_2.Ref<HTMLElement>) => TabListBaseState;
+
 export declare const useTabListContext_unstable: <T>(selector: ContextSelector<TabListContextValue, T>) => T;
 
 export declare function useTabListContextValues_unstable(state: TabListState): TabListContextValues;

package/lib/TabList.js

@@ -1 +1 @@
-export { TabList, TabListContext, TabListProvider, renderTabList_unstable, tabListClassNames, useTabListContextValues_unstable, useTabListContext_unstable, useTabListStyles_unstable, useTabList_unstable, useTabListBase_unstable } from './components/TabList/index';
+export { TabList, TabListContext, TabListProvider, renderTabList_unstable, tabListClassNames, useTabListContextValues_unstable, useTabListContext_unstable, useTabListStyles_unstable, useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from './components/TabList/index';

package/lib/TabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TabList.ts"],"sourcesContent":["export type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListBaseProps,\n  TabListProps,\n  TabListSlots,\n  TabListBaseState,\n  TabListState,\n  TabRegisterData,\n} from './components/TabList/index';\nexport {\n  TabList,\n  TabListContext,\n  TabListProvider,\n  renderTabList_unstable,\n  tabListClassNames,\n  useTabListContextValues_unstable,\n  useTabListContext_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n  useTabListBase_unstable,\n} from './components/TabList/index';\n"],"names":["TabList","TabListContext","TabListProvider","renderTabList_unstable","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable","useTabListBase_unstable"],"mappings":"AAcA,SACEA,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,iBAAiB,EACjBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,yBAAyB,EACzBC,mBAAmB,EACnBC,uBAAuB,QAClB,6BAA6B"}
+{"version":3,"sources":["../src/TabList.ts"],"sourcesContent":["export type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListBaseProps,\n  TabListProps,\n  TabListSlots,\n  TabListBaseState,\n  TabListState,\n  TabRegisterData,\n} from './components/TabList/index';\nexport {\n  TabList,\n  TabListContext,\n  TabListProvider,\n  renderTabList_unstable,\n  tabListClassNames,\n  useTabListContextValues_unstable,\n  useTabListContext_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n  useTabListBase_unstable,\n  useTabListA11yBehavior_unstable,\n} from './components/TabList/index';\n"],"names":["TabList","TabListContext","TabListProvider","renderTabList_unstable","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable"],"mappings":"AAcA,SACEA,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,iBAAiB,EACjBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,yBAAyB,EACzBC,mBAAmB,EACnBC,uBAAuB,EACvBC,+BAA+B,QAC1B,6BAA6B"}

package/lib/components/Tab/renderTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/renderTab.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState): JSXElement => {\n  assertSlots<TabInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!state.iconOnly && <state.content />}\n      {state.contentReservedSpace && <state.contentReservedSpace />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTab_unstable","state","root","icon","iconOnly","content","contentReservedSpace"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,kBAAI,KAACF,MAAME,IAAI;YACzB,CAACF,MAAMG,QAAQ,kBAAI,KAACH,MAAMI,OAAO;YACjCJ,MAAMK,oBAAoB,kBAAI,KAACL,MAAMK,oBAAoB;;;AAGhE,EAAE"}
+{"version":3,"sources":["../src/components/Tab/renderTab.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabBaseState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabBaseState): JSXElement => {\n  assertSlots<TabInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!state.iconOnly && <state.content />}\n      {state.contentReservedSpace && <state.contentReservedSpace />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTab_unstable","state","root","icon","iconOnly","content","contentReservedSpace"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,kBAAI,KAACF,MAAME,IAAI;YACzB,CAACF,MAAMG,QAAQ,kBAAI,KAACH,MAAMI,OAAO;YACjCJ,MAAMK,oBAAoB,kBAAI,KAACL,MAAMK,oBAAoB;;;AAGhE,EAAE"}

package/lib/components/TabList/index.js

@@ -1,6 +1,6 @@
 export { TabList } from './TabList';
 export { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';
 export { renderTabList_unstable } from './renderTabList';
-export { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable as useTabListFocusAttributes } from './useTabList';
+export { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from './useTabList';
 export { useTabListContextValues_unstable } from './useTabListContextValues';
 export { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';

package/lib/components/TabList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TabList/index.ts"],"sourcesContent":["export { TabList } from './TabList';\nexport type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListBaseProps,\n  TabListProps,\n  TabListSlots,\n  TabListBaseState,\n  TabListState,\n  TabRegisterData,\n} from './TabList.types';\nexport { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';\nexport { renderTabList_unstable } from './renderTabList';\nexport {\n  useTabList_unstable,\n  useTabListBase_unstable,\n  useTabListA11yBehavior_unstable as useTabListFocusAttributes,\n} from './useTabList';\nexport { useTabListContextValues_unstable } from './useTabListContextValues';\nexport { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';\n"],"names":["TabList","TabListContext","TabListProvider","useTabListContext_unstable","renderTabList_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable","useTabListFocusAttributes","useTabListContextValues_unstable","tabListClassNames","useTabListStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAepC,SAASC,cAAc,EAAEC,eAAe,EAAEC,0BAA0B,QAAQ,mBAAmB;AAC/F,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SACEC,mBAAmB,EACnBC,uBAAuB,EACvBC,mCAAmCC,yBAAyB,QACvD,eAAe;AACtB,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}
+{"version":3,"sources":["../src/components/TabList/index.ts"],"sourcesContent":["export { TabList } from './TabList';\nexport type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListBaseProps,\n  TabListProps,\n  TabListSlots,\n  TabListBaseState,\n  TabListState,\n  TabRegisterData,\n} from './TabList.types';\nexport { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';\nexport { renderTabList_unstable } from './renderTabList';\nexport { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from './useTabList';\nexport { useTabListContextValues_unstable } from './useTabListContextValues';\nexport { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';\n"],"names":["TabList","TabListContext","TabListProvider","useTabListContext_unstable","renderTabList_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable","useTabListContextValues_unstable","tabListClassNames","useTabListStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAepC,SAASC,cAAc,EAAEC,eAAe,EAAEC,0BAA0B,QAAQ,mBAAmB;AAC/F,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,EAAEC,+BAA+B,QAAQ,eAAe;AAC7G,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

package/lib/components/TabList/renderTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TabList/renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues): JSXElement => {\n  assertSlots<TabListSlots>(state);\n\n  return (\n    <state.root>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","TabListProvider","renderTabList_unstable","state","contextValues","root","value","tabList","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DJ,YAA0BG;IAE1B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACJ;YAAgBK,OAAOF,cAAcG,OAAO;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAGzE,EAAE"}
+{"version":3,"sources":["../src/components/TabList/renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabListBaseState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListBaseState, contextValues: TabListContextValues): JSXElement => {\n  assertSlots<TabListSlots>(state);\n\n  return (\n    <state.root>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","TabListProvider","renderTabList_unstable","state","contextValues","root","value","tabList","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAyBC;IAC9DJ,YAA0BG;IAE1B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACJ;YAAgBK,OAAOF,cAAcG,OAAO;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAGzE,EAAE"}

package/lib/components/TabList/useTabList.js

@@ -19,8 +19,8 @@ import { useControllableState, useEventCallback, useMergedRefs, slot } from '@fl
     return {
         ...state,
         root: {
-            ...state.root,
-            ...focusAttributes
+            ...focusAttributes,
+            ...state.root
         },
         appearance,
         reserveSelectedTabSpace,

package/lib/components/TabList/useTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TabList/useTabList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type TabsterDOMAttribute, useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type {\n  TabRegisterData,\n  SelectTabData,\n  SelectTabEvent,\n  TabListBaseProps,\n  TabListBaseState,\n  TabListProps,\n  TabListState,\n} from './TabList.types';\nimport type { TabValue } from '../Tab';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const { appearance = 'transparent', reserveSelectedTabSpace = true, size = 'medium' } = props;\n  const state = useTabListBase_unstable(props, ref);\n  const focusAttributes = useTabListA11yBehavior_unstable({ vertical: state.vertical });\n\n  return {\n    ...state,\n    root: {\n      ...state.root,\n      ...focusAttributes,\n    },\n    appearance,\n    reserveSelectedTabSpace,\n    size,\n  };\n};\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabListBase_unstable = (props: TabListBaseProps, ref: React.Ref<HTMLElement>): TabListBaseState => {\n  const {\n    disabled = false,\n    onTabSelect,\n    selectTabOnFocus = false,\n    vertical = false,\n    selectedValue: controlledSelectedValue,\n    defaultSelectedValue,\n    ...rest\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: controlledSelectedValue,\n    defaultState: defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    const key = JSON.stringify(data.value);\n\n    if (!key && process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(\n        [\n          `[@fluentui/react-tabs] The value \"${data.value}\" cannot be serialized to JSON string.`,\n          'Tab component requires serializable values.',\n          'Please provide a primitive value (string, number, boolean),',\n          `or a plain object/array that doesn't contain functions, symbols, or circular references.`,\n        ].join(' '),\n      );\n    }\n\n    registeredTabs.current[key] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      {\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\n    disabled,\n    selectTabOnFocus,\n    selectedValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    vertical,\n  };\n};\n\n/**\n * Hook to get accessibility attributes for TabList component, such as roving tab index.\n * Based on Tabster's useArrowNavigationGroup.\n *\n * @param vertical - whether the TabList is vertical\n * @returns Tabster DOM attributes\n */\nexport const useTabListA11yBehavior_unstable = ({\n  vertical,\n}: Pick<TabListBaseState, 'vertical'>): TabsterDOMAttribute => {\n  return useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n};\n"],"names":["React","useArrowNavigationGroup","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","size","state","useTabListBase_unstable","focusAttributes","useTabListA11yBehavior_unstable","vertical","root","disabled","onTabSelect","selectTabOnFocus","selectedValue","controlledSelectedValue","defaultSelectedValue","rest","innerRef","useRef","setSelectedValue","defaultState","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","key","JSON","stringify","process","env","NODE_ENV","console","error","join","onUnregister","getRegisteredTabs","useCallback","components","always","role","elementType","circular","axis","memorizeCurrent","unstable_hasDefault"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TabList/useTabList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type TabsterDOMAttribute, useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type {\n  TabRegisterData,\n  SelectTabData,\n  SelectTabEvent,\n  TabListBaseProps,\n  TabListBaseState,\n  TabListProps,\n  TabListState,\n} from './TabList.types';\nimport type { TabValue } from '../Tab';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const { appearance = 'transparent', reserveSelectedTabSpace = true, size = 'medium' } = props;\n  const state = useTabListBase_unstable(props, ref);\n  const focusAttributes = useTabListA11yBehavior_unstable({ vertical: state.vertical });\n\n  return {\n    ...state,\n    root: {\n      ...focusAttributes,\n      ...state.root,\n    },\n    appearance,\n    reserveSelectedTabSpace,\n    size,\n  };\n};\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabListBase_unstable = (props: TabListBaseProps, ref: React.Ref<HTMLElement>): TabListBaseState => {\n  const {\n    disabled = false,\n    onTabSelect,\n    selectTabOnFocus = false,\n    vertical = false,\n    selectedValue: controlledSelectedValue,\n    defaultSelectedValue,\n    ...rest\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: controlledSelectedValue,\n    defaultState: defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    const key = JSON.stringify(data.value);\n\n    if (!key && process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(\n        [\n          `[@fluentui/react-tabs] The value \"${data.value}\" cannot be serialized to JSON string.`,\n          'Tab component requires serializable values.',\n          'Please provide a primitive value (string, number, boolean),',\n          `or a plain object/array that doesn't contain functions, symbols, or circular references.`,\n        ].join(' '),\n      );\n    }\n\n    registeredTabs.current[key] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      {\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\n    disabled,\n    selectTabOnFocus,\n    selectedValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    vertical,\n  };\n};\n\n/**\n * Hook to get accessibility attributes for TabList component, such as roving tab index.\n * Based on Tabster's useArrowNavigationGroup.\n *\n * @param vertical - whether the TabList is vertical\n * @returns Tabster DOM attributes\n */\nexport const useTabListA11yBehavior_unstable = ({\n  vertical,\n}: Pick<TabListBaseState, 'vertical'>): TabsterDOMAttribute => {\n  return useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n};\n"],"names":["React","useArrowNavigationGroup","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","size","state","useTabListBase_unstable","focusAttributes","useTabListA11yBehavior_unstable","vertical","root","disabled","onTabSelect","selectTabOnFocus","selectedValue","controlledSelectedValue","defaultSelectedValue","rest","innerRef","useRef","setSelectedValue","defaultState","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","key","JSON","stringify","process","env","NODE_ENV","console","error","join","onUnregister","getRegisteredTabs","useCallback","components","always","role","elementType","circular","axis","memorizeCurrent","unstable_hasDefault"],"mappings":"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"}

package/lib/index.js

@@ -1,6 +1,2 @@
-export { renderTab_unstable, Tab, tabClassNames, tabReservedSpaceClassNames, useTabAnimatedIndicatorStyles_unstable, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, useTabStyles_unstable, useTab_unstable } from './Tab';
-export { renderTabList_unstable, TabList, TabListProvider, tabListClassNames, useTabListContext_unstable, useTabListContextValues_unstable, useTabListStyles_unstable, useTabList_unstable } from './TabList'; // Experimental APIs - will be uncommented in experimental release
- // export type { TabBaseProps, TabBaseState } from './Tab';
- // export { useTabBase_unstable, useTabA11yBehavior_unstable } from './Tab';
- // export type { TabListBaseProps, TabListBaseState } from './TabList';
- // export { useTabListBase_unstable, useTabListA11yBehavior_unstable } from './TabList';
+export { renderTab_unstable, Tab, tabClassNames, tabReservedSpaceClassNames, useTabAnimatedIndicatorStyles_unstable, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, useTabStyles_unstable, useTab_unstable, useTabBase_unstable } from './Tab';
+export { renderTabList_unstable, TabList, TabListProvider, tabListClassNames, useTabListContext_unstable, useTabListContextValues_unstable, useTabListStyles_unstable, useTabList_unstable, useTabListA11yBehavior_unstable, useTabListBase_unstable } from './TabList';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport {\n  renderTab_unstable,\n  Tab,\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabAnimatedIndicatorStyles_unstable,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n  useTab_unstable,\n} from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  TabListProvider,\n  tabListClassNames,\n  useTabListContext_unstable,\n  useTabListContextValues_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n\n// Experimental APIs - will be uncommented in experimental release\n// export type { TabBaseProps, TabBaseState } from './Tab';\n// export { useTabBase_unstable, useTabA11yBehavior_unstable } from './Tab';\n// export type { TabListBaseProps, TabListBaseState } from './TabList';\n// export { useTabListBase_unstable, useTabListA11yBehavior_unstable } from './TabList';\n"],"names":["renderTab_unstable","Tab","tabClassNames","tabReservedSpaceClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable"],"mappings":"AACA,SACEA,kBAAkB,EAClBC,GAAG,EACHC,aAAa,EACbC,0BAA0B,EAC1BC,sCAAsC,EACtCC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,EACrBC,eAAe,QACV,QAAQ;AAaf,SACEC,sBAAsB,EACtBC,OAAO,EACPC,eAAe,EACfC,iBAAiB,EACjBC,0BAA0B,EAC1BC,gCAAgC,EAChCC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY,CAEnB,kEAAkE;CAClE,2DAA2D;CAC3D,4EAA4E;CAC5E,uEAAuE;CACvE,wFAAwF"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport {\n  renderTab_unstable,\n  Tab,\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabAnimatedIndicatorStyles_unstable,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n  useTab_unstable,\n  useTabBase_unstable,\n} from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n  TabListBaseProps,\n  TabListBaseState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  TabListProvider,\n  tabListClassNames,\n  useTabListContext_unstable,\n  useTabListContextValues_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n  useTabListA11yBehavior_unstable,\n  useTabListBase_unstable,\n} from './TabList';\n"],"names":["renderTab_unstable","Tab","tabClassNames","tabReservedSpaceClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable","useTabBase_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable","useTabListA11yBehavior_unstable","useTabListBase_unstable"],"mappings":"AACA,SACEA,kBAAkB,EAClBC,GAAG,EACHC,aAAa,EACbC,0BAA0B,EAC1BC,sCAAsC,EACtCC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,EACrBC,eAAe,EACfC,mBAAmB,QACd,QAAQ;AAef,SACEC,sBAAsB,EACtBC,OAAO,EACPC,eAAe,EACfC,iBAAiB,EACjBC,0BAA0B,EAC1BC,gCAAgC,EAChCC,yBAAyB,EACzBC,mBAAmB,EACnBC,+BAA+B,EAC/BC,uBAAuB,QAClB,YAAY"}

package/lib-commonjs/TabList.js

@@ -24,6 +24,9 @@ _export(exports, {
     tabListClassNames: function() {
         return _index.tabListClassNames;
     },
+    useTabListA11yBehavior_unstable: function() {
+        return _index.useTabListA11yBehavior_unstable;
+    },
     useTabListBase_unstable: function() {
         return _index.useTabListBase_unstable;
     },

package/lib-commonjs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TabList.ts"],"sourcesContent":["export type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListBaseProps,\n  TabListProps,\n  TabListSlots,\n  TabListBaseState,\n  TabListState,\n  TabRegisterData,\n} from './components/TabList/index';\nexport {\n  TabList,\n  TabListContext,\n  TabListProvider,\n  renderTabList_unstable,\n  tabListClassNames,\n  useTabListContextValues_unstable,\n  useTabListContext_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n  useTabListBase_unstable,\n} from './components/TabList/index';\n"],"names":["TabList","TabListContext","TabListProvider","renderTabList_unstable","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable","useTabListBase_unstable"],"mappings":";;;;;;;;;;;IAeEA;6BAAO;;;eACPC,qBAAc;;;eACdC,sBAAe;;;eACfC,6BAAsB;;;eACtBC,wBAAiB;;2BAKM;eAAvBK;;;eAJAJ,uCAAgC;;;eAChCC,iCAA0B;;6BACD;eAAzBC;;;eACAC,0BAAmB;;;uBAEd,6BAA6B"}
+{"version":3,"sources":["../src/TabList.ts"],"sourcesContent":["export type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListBaseProps,\n  TabListProps,\n  TabListSlots,\n  TabListBaseState,\n  TabListState,\n  TabRegisterData,\n} from './components/TabList/index';\nexport {\n  TabList,\n  TabListContext,\n  TabListProvider,\n  renderTabList_unstable,\n  tabListClassNames,\n  useTabListContextValues_unstable,\n  useTabListContext_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n  useTabListBase_unstable,\n  useTabListA11yBehavior_unstable,\n} from './components/TabList/index';\n"],"names":["TabList","TabListContext","TabListProvider","renderTabList_unstable","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable"],"mappings":";;;;;;;;;;;IAeEA;6BAAO;;;eACPC,qBAAc;;;eACdC,sBAAe;;;eACfC,6BAAsB;;;eACtBC,wBAAiB;;;eAMjBM,sCAA+B;;2BADR;eAAvBD;;;eAJAJ,uCAAgC;;8BACN;eAA1BC;;;eACAC,gCAAyB;;;eACzBC,0BAAmB;;;uBAGd,6BAA6B"}

package/lib-commonjs/components/Tab/renderTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/renderTab.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState): JSXElement => {\n  assertSlots<TabInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!state.iconOnly && <state.content />}\n      {state.contentReservedSpace && <state.contentReservedSpace />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTab_unstable","state","root","icon","iconOnly","content","contentReservedSpace"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,2BAA2B,CAACC;QACjCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,IAAI,EAAA,CAAA;YACzB,CAACF,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMI,OAAO,EAAA,CAAA;YACjCJ,MAAMK,oBAAoB,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,oBAAoB,EAAA,CAAA;;;AAGhE,EAAE"}
+{"version":3,"sources":["../src/components/Tab/renderTab.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabBaseState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabBaseState): JSXElement => {\n  assertSlots<TabInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!state.iconOnly && <state.content />}\n      {state.contentReservedSpace && <state.contentReservedSpace />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTab_unstable","state","root","icon","iconOnly","content","contentReservedSpace"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,2BAA2B,CAACC;QACjCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,IAAI,EAAA,CAAA;YACzB,CAACF,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMI,OAAO,EAAA,CAAA;YACjCJ,MAAMK,oBAAoB,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,oBAAoB,EAAA,CAAA;;;AAGhE,EAAE"}

package/lib-commonjs/components/TabList/index.js

@@ -24,6 +24,9 @@ _export(exports, {
     tabListClassNames: function() {
         return _useTabListStylesstyles.tabListClassNames;
     },
+    useTabListA11yBehavior_unstable: function() {
+        return _useTabList.useTabListA11yBehavior_unstable;
+    },
     useTabListBase_unstable: function() {
         return _useTabList.useTabListBase_unstable;
     },
@@ -33,9 +36,6 @@ _export(exports, {
     useTabListContext_unstable: function() {
         return _TabListContext.useTabListContext_unstable;
     },
-    useTabListFocusAttributes: function() {
-        return _useTabList.useTabListA11yBehavior_unstable;
-    },
     useTabListStyles_unstable: function() {
         return _useTabListStylesstyles.useTabListStyles_unstable;
     },

package/lib-commonjs/components/TabList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TabList/index.ts"],"sourcesContent":["export { TabList } from './TabList';\nexport type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListBaseProps,\n  TabListProps,\n  TabListSlots,\n  TabListBaseState,\n  TabListState,\n  TabRegisterData,\n} from './TabList.types';\nexport { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';\nexport { renderTabList_unstable } from './renderTabList';\nexport {\n  useTabList_unstable,\n  useTabListBase_unstable,\n  useTabListA11yBehavior_unstable as useTabListFocusAttributes,\n} from './useTabList';\nexport { useTabListContextValues_unstable } from './useTabListContextValues';\nexport { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';\n"],"names":["TabList","TabListContext","TabListProvider","useTabListContext_unstable","renderTabList_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable","useTabListFocusAttributes","useTabListContextValues_unstable","tabListClassNames","useTabListStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;+BAAO;;;eAePC,8BAAc;;;eAAEC,+BAAe;;;eAC/BE,qCAAsB;;;eAOtBM,yCAAiB;;;eAJxBJ,mCAAuB;;;eAGhBG,yDAAgC;;;eAPCN,0CAA0B;;IAK/BK,yBAAyB;eAA5DD,2CAAAA;;;eAG0BI,iDAAyB;;IALnDN;8CAAmB;;;yBAlBG,YAAY;gCAewC,mBAAmB;+BACxD,kBAAkB;4BAKlD,eAAe;yCAC2B,4BAA4B;wCAChB,4BAA4B"}
+{"version":3,"sources":["../src/components/TabList/index.ts"],"sourcesContent":["export { TabList } from './TabList';\nexport type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListBaseProps,\n  TabListProps,\n  TabListSlots,\n  TabListBaseState,\n  TabListState,\n  TabRegisterData,\n} from './TabList.types';\nexport { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';\nexport { renderTabList_unstable } from './renderTabList';\nexport { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from './useTabList';\nexport { useTabListContextValues_unstable } from './useTabListContextValues';\nexport { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';\n"],"names":["TabList","TabListContext","TabListProvider","useTabListContext_unstable","renderTabList_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable","useTabListContextValues_unstable","tabListClassNames","useTabListStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;+BAAO;;;eAePC,8BAAc;;;eAAEC,+BAAe;;;eAC/BE,qCAAsB;;;eAGtBK,yCAAiB;;;eAF6BF,2CAA+B;;;eAAxDD,mCAAuB;;;eAC5CE,yDAAgC;;;eAHCL,0CAA0B;;;eAIxCO,iDAAyB;;IAF5CL;8CAAmB;;;yBAjBJ,YAAY;gCAewC,mBAAmB;+BACxD,kBAAkB;4BACqC,eAAe;yCAC5D,4BAA4B;wCAChB,4BAA4B"}

package/lib-commonjs/components/TabList/renderTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TabList/renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues): JSXElement => {\n  assertSlots<TabListSlots>(state);\n\n  return (\n    <state.root>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","TabListProvider","renderTabList_unstable","state","contextValues","root","value","tabList","children"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;gCAGxB,mBAAmB;AAK5C,+BAA+B,CAACC,OAAqBC;QAC1DJ,2BAAAA,EAA0BG;IAE1B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACJ,+BAAAA,EAAAA;YAAgBK,OAAOF,cAAcG,OAAO;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAGzE,EAAE"}
+{"version":3,"sources":["../src/components/TabList/renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabListBaseState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListBaseState, contextValues: TabListContextValues): JSXElement => {\n  assertSlots<TabListSlots>(state);\n\n  return (\n    <state.root>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","TabListProvider","renderTabList_unstable","state","contextValues","root","value","tabList","children"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;gCAGxB,mBAAmB;AAK5C,+BAA+B,CAACC,OAAyBC;QAC9DJ,2BAAAA,EAA0BG;IAE1B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACJ,+BAAAA,EAAAA;YAAgBK,OAAOF,cAAcG,OAAO;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAGzE,EAAE"}

package/lib-commonjs/components/TabList/useTabList.js

@@ -33,8 +33,8 @@ const useTabList_unstable = (props, ref)=>{
     return {
         ...state,
         root: {
-            ...state.root,
-            ...focusAttributes
+            ...focusAttributes,
+            ...state.root
         },
         appearance,
         reserveSelectedTabSpace,

package/lib-commonjs/components/TabList/useTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TabList/useTabList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type TabsterDOMAttribute, useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type {\n  TabRegisterData,\n  SelectTabData,\n  SelectTabEvent,\n  TabListBaseProps,\n  TabListBaseState,\n  TabListProps,\n  TabListState,\n} from './TabList.types';\nimport type { TabValue } from '../Tab';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const { appearance = 'transparent', reserveSelectedTabSpace = true, size = 'medium' } = props;\n  const state = useTabListBase_unstable(props, ref);\n  const focusAttributes = useTabListA11yBehavior_unstable({ vertical: state.vertical });\n\n  return {\n    ...state,\n    root: {\n      ...state.root,\n      ...focusAttributes,\n    },\n    appearance,\n    reserveSelectedTabSpace,\n    size,\n  };\n};\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabListBase_unstable = (props: TabListBaseProps, ref: React.Ref<HTMLElement>): TabListBaseState => {\n  const {\n    disabled = false,\n    onTabSelect,\n    selectTabOnFocus = false,\n    vertical = false,\n    selectedValue: controlledSelectedValue,\n    defaultSelectedValue,\n    ...rest\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: controlledSelectedValue,\n    defaultState: defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    const key = JSON.stringify(data.value);\n\n    if (!key && process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(\n        [\n          `[@fluentui/react-tabs] The value \"${data.value}\" cannot be serialized to JSON string.`,\n          'Tab component requires serializable values.',\n          'Please provide a primitive value (string, number, boolean),',\n          `or a plain object/array that doesn't contain functions, symbols, or circular references.`,\n        ].join(' '),\n      );\n    }\n\n    registeredTabs.current[key] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      {\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\n    disabled,\n    selectTabOnFocus,\n    selectedValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    vertical,\n  };\n};\n\n/**\n * Hook to get accessibility attributes for TabList component, such as roving tab index.\n * Based on Tabster's useArrowNavigationGroup.\n *\n * @param vertical - whether the TabList is vertical\n * @returns Tabster DOM attributes\n */\nexport const useTabListA11yBehavior_unstable = ({\n  vertical,\n}: Pick<TabListBaseState, 'vertical'>): TabsterDOMAttribute => {\n  return useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n};\n"],"names":["React","useArrowNavigationGroup","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","size","state","useTabListBase_unstable","focusAttributes","useTabListA11yBehavior_unstable","vertical","root","disabled","onTabSelect","selectTabOnFocus","selectedValue","controlledSelectedValue","defaultSelectedValue","rest","innerRef","useRef","setSelectedValue","defaultState","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","key","JSON","stringify","process","env","NODE_ENV","console","error","join","onUnregister","getRegisteredTabs","useCallback","components","always","role","elementType","circular","axis","memorizeCurrent","unstable_hasDefault"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TabList/useTabList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type TabsterDOMAttribute, useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type {\n  TabRegisterData,\n  SelectTabData,\n  SelectTabEvent,\n  TabListBaseProps,\n  TabListBaseState,\n  TabListProps,\n  TabListState,\n} from './TabList.types';\nimport type { TabValue } from '../Tab';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const { appearance = 'transparent', reserveSelectedTabSpace = true, size = 'medium' } = props;\n  const state = useTabListBase_unstable(props, ref);\n  const focusAttributes = useTabListA11yBehavior_unstable({ vertical: state.vertical });\n\n  return {\n    ...state,\n    root: {\n      ...focusAttributes,\n      ...state.root,\n    },\n    appearance,\n    reserveSelectedTabSpace,\n    size,\n  };\n};\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabListBase_unstable = (props: TabListBaseProps, ref: React.Ref<HTMLElement>): TabListBaseState => {\n  const {\n    disabled = false,\n    onTabSelect,\n    selectTabOnFocus = false,\n    vertical = false,\n    selectedValue: controlledSelectedValue,\n    defaultSelectedValue,\n    ...rest\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: controlledSelectedValue,\n    defaultState: defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    const key = JSON.stringify(data.value);\n\n    if (!key && process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(\n        [\n          `[@fluentui/react-tabs] The value \"${data.value}\" cannot be serialized to JSON string.`,\n          'Tab component requires serializable values.',\n          'Please provide a primitive value (string, number, boolean),',\n          `or a plain object/array that doesn't contain functions, symbols, or circular references.`,\n        ].join(' '),\n      );\n    }\n\n    registeredTabs.current[key] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      {\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\n    disabled,\n    selectTabOnFocus,\n    selectedValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    vertical,\n  };\n};\n\n/**\n * Hook to get accessibility attributes for TabList component, such as roving tab index.\n * Based on Tabster's useArrowNavigationGroup.\n *\n * @param vertical - whether the TabList is vertical\n * @returns Tabster DOM attributes\n */\nexport const useTabListA11yBehavior_unstable = ({\n  vertical,\n}: Pick<TabListBaseState, 'vertical'>): TabsterDOMAttribute => {\n  return useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n};\n"],"names":["React","useArrowNavigationGroup","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","size","state","useTabListBase_unstable","focusAttributes","useTabListA11yBehavior_unstable","vertical","root","disabled","onTabSelect","selectTabOnFocus","selectedValue","controlledSelectedValue","defaultSelectedValue","rest","innerRef","useRef","setSelectedValue","defaultState","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","key","JSON","stringify","process","env","NODE_ENV","console","error","join","onUnregister","getRegisteredTabs","useCallback","components","always","role","elementType","circular","axis","memorizeCurrent","unstable_hasDefault"],"mappings":"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"}

package/lib-commonjs/index.js

@@ -36,6 +36,9 @@ _export(exports, {
     useTabAnimatedIndicatorStyles_unstable: function() {
         return _Tab.useTabAnimatedIndicatorStyles_unstable;
     },
+    useTabBase_unstable: function() {
+        return _Tab.useTabBase_unstable;
+    },
     useTabButtonStyles_unstable: function() {
         return _Tab.useTabButtonStyles_unstable;
     },
@@ -45,6 +48,12 @@ _export(exports, {
     useTabIndicatorStyles_unstable: function() {
         return _Tab.useTabIndicatorStyles_unstable;
     },
+    useTabListA11yBehavior_unstable: function() {
+        return _TabList.useTabListA11yBehavior_unstable;
+    },
+    useTabListBase_unstable: function() {
+        return _TabList.useTabListBase_unstable;
+    },
     useTabListContextValues_unstable: function() {
         return _TabList.useTabListContextValues_unstable;
     },
@@ -66,8 +75,3 @@ _export(exports, {
 });
 const _Tab = require("./Tab");
 const _TabList = require("./TabList");
- // Experimental APIs - will be uncommented in experimental release
- // export type { TabBaseProps, TabBaseState } from './Tab';
- // export { useTabBase_unstable, useTabA11yBehavior_unstable } from './Tab';
- // export type { TabListBaseProps, TabListBaseState } from './TabList';
- // export { useTabListBase_unstable, useTabListA11yBehavior_unstable } from './TabList';

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport {\n  renderTab_unstable,\n  Tab,\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabAnimatedIndicatorStyles_unstable,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n  useTab_unstable,\n} from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  TabListProvider,\n  tabListClassNames,\n  useTabListContext_unstable,\n  useTabListContextValues_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n\n// Experimental APIs - will be uncommented in experimental release\n// export type { TabBaseProps, TabBaseState } from './Tab';\n// export { useTabBase_unstable, useTabA11yBehavior_unstable } from './Tab';\n// export type { TabListBaseProps, TabListBaseState } from './TabList';\n// export { useTabListBase_unstable, useTabListA11yBehavior_unstable } from './TabList';\n"],"names":["renderTab_unstable","Tab","tabClassNames","tabReservedSpaceClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable"],"mappings":";;;;;;;;;;;IAGEC,GAAG;;;;eAwBHU,gBAAO;;IACPC,eAAe;;;IAFfF;8CAAsB;;;eAxBtBV,uBAAkB;;;eAElBE,kBAAa;;;eAyBbW,0BAAiB;;;eAxBjBV,+BAA0B;;;eAC1BC,2CAAsC;;;eACtCC,gCAA2B;;;eAC3BC,iCAA4B;;;eAC5BC,mCAA8B;;;eAsB9BQ,yCAAgC;;;eADhCD,mCAA0B;;;eAE1BE,kCAAyB;;IACzBC;2CAAmB;;;eAvBnBT,0BAAqB;;;eACrBC,oBAAe;;;qBACV,QAAQ;yBAsBR,YAAY;CAEnB,kEAAkE;CAClE,2DAA2D;CAC3D,4EAA4E;CAC5E,uEAAuE;CACvE,wFAAwF"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport {\n  renderTab_unstable,\n  Tab,\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabAnimatedIndicatorStyles_unstable,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n  useTab_unstable,\n  useTabBase_unstable,\n} from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n  TabListBaseProps,\n  TabListBaseState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  TabListProvider,\n  tabListClassNames,\n  useTabListContext_unstable,\n  useTabListContextValues_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n  useTabListA11yBehavior_unstable,\n  useTabListBase_unstable,\n} from './TabList';\n"],"names":["renderTab_unstable","Tab","tabClassNames","tabReservedSpaceClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable","useTabBase_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable","useTabListA11yBehavior_unstable","useTabListBase_unstable"],"mappings":";;;;;;;;;;;IAGEC,GAAG;;;WA2BI;eAAPW;;IACAC,eAAe;;;;eAFfF,+BAAsB;;;eA3BtBX,uBAAkB;;;eAElBE,kBAAa;;;eA4BbY,0BAAiB;;;eA3BjBX,+BAA0B;;;eAC1BC,2CAAsC;;IAMtCM;uCAAmB;;;eALnBL,gCAA2B;;;eAC3BC,iCAA4B;;;eAC5BC,mCAA8B;;mCA4BC;eAA/BY;;;eACAC,gCAAuB;;;eAJvBJ,yCAAgC;;;eADhCD,mCAA0B;;;eAE1BE,kCAAyB;;;eACzBC,4BAAmB;;IA1BnBV;yCAAqB;;;eACrBC,oBAAe;;;qBAEV,QAAQ;yBA0BR,YAAY"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.11.2",
+  "version": "9.12.0",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",