@fluentui/react-tabs 9.10.8 → 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Wed, 17 Dec 2025 18:06:04 GMT and should not be manually modified.
+This log was last generated on Thu, 22 Jan 2026 16:12:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.72.9-experimental.component-base-hooks.20260122-49fc330360.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
+
+Thu, 22 Jan 2026 16:12:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.10.8..@fluentui/react-tabs_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
+
+### Changes
+
+- Release 9.72.9-experimental.component-base-hooks.20260122-49fc330360 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-context-selector to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
+- Bump @fluentui/react-tabster to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
+- Bump @fluentui/react-theme to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
+- Bump @fluentui/react-utilities to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
+
 ## [9.10.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.10.8)
 
-Wed, 17 Dec 2025 18:06:04 GMT 
+Wed, 17 Dec 2025 18:10:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.10.7..@fluentui/react-tabs_v9.10.8)
 
 ### Patches

package/dist/index.d.ts

@@ -9,6 +9,7 @@ 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;
 
@@ -38,6 +39,10 @@ export declare type SelectTabEventHandler = (event: SelectTabEvent, data: Select
  */
 export declare const Tab: ForwardRefComponent<TabProps>;
 
+export declare type TabBaseProps = Omit<TabProps, 'contentReservedSpace'>;
+
+export 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'>> & {
@@ -248,11 +257,28 @@ export declare type TabValue = unknown;
  */
 export declare const useTab_unstable: (props: TabProps, ref: React_2.Ref<HTMLElement>) => TabState;
 
+/**
+ * Hook to return a11y attributes to a Tab based on selected state.
+ * Should be applied on the button with role="tab".
+ *
+ * @param selected - whether the Tab is selected
+ * @returns Tabster DOM attributes
+ */
+export declare const useTabA11yBehavior_unstable: ({ selected }: Pick<TabBaseState, "selected">) => TabsterDOMAttribute;
+
 /**
  * Adds additional styling to the active tab selection indicator to create a sliding animation.
  */
 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 +324,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/Tab.js

@@ -1 +1 @@
-export { Tab, renderTab_unstable, tabClassNames, tabReservedSpaceClassNames, useTabAnimatedIndicatorStyles_unstable, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, useTabStyles_unstable, useTab_unstable } from './components/Tab/index';
+export { Tab, renderTab_unstable, tabClassNames, tabReservedSpaceClassNames, useTabAnimatedIndicatorStyles_unstable, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, useTabStyles_unstable, useTab_unstable, useTabA11yBehavior_unstable, useTabBase_unstable } from './components/Tab/index';

package/lib/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tab.ts"],"sourcesContent":["export type { TabInternalSlots, TabProps, TabSlots, TabState, TabValue } from './components/Tab/index';\nexport {\n  Tab,\n  renderTab_unstable,\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabAnimatedIndicatorStyles_unstable,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n  useTab_unstable,\n} from './components/Tab/index';\n"],"names":["Tab","renderTab_unstable","tabClassNames","tabReservedSpaceClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable"],"mappings":"AACA,SACEA,GAAG,EACHC,kBAAkB,EAClBC,aAAa,EACbC,0BAA0B,EAC1BC,sCAAsC,EACtCC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,EACrBC,eAAe,QACV,yBAAyB"}
+{"version":3,"sources":["../src/Tab.ts"],"sourcesContent":["export type {\n  TabInternalSlots,\n  TabBaseProps,\n  TabProps,\n  TabSlots,\n  TabBaseState,\n  TabState,\n  TabValue,\n} from './components/Tab/index';\nexport {\n  Tab,\n  renderTab_unstable,\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabAnimatedIndicatorStyles_unstable,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n  useTab_unstable,\n  useTabA11yBehavior_unstable,\n  useTabBase_unstable,\n} from './components/Tab/index';\n"],"names":["Tab","renderTab_unstable","tabClassNames","tabReservedSpaceClassNames","useTabAnimatedIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable","useTabA11yBehavior_unstable","useTabBase_unstable"],"mappings":"AASA,SACEA,GAAG,EACHC,kBAAkB,EAClBC,aAAa,EACbC,0BAA0B,EAC1BC,sCAAsC,EACtCC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,EACrBC,eAAe,EACfC,2BAA2B,EAC3BC,mBAAmB,QACd,yBAAyB"}

package/lib/TabList.js

@@ -1 +1 @@
-export { TabList, TabListContext, TabListProvider, renderTabList_unstable, tabListClassNames, useTabListContextValues_unstable, useTabListContext_unstable, useTabListStyles_unstable, useTabList_unstable } from './components/TabList/index';
+export { TabList, TabListContext, TabListProvider, renderTabList_unstable, tabListClassNames, useTabListContextValues_unstable, useTabListContext_unstable, useTabListStyles_unstable, useTabList_unstable, useTabListA11yBehavior_unstable, useTabListBase_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  TabListProps,\n  TabListSlots,\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} from './components/TabList/index';\n"],"names":["TabList","TabListContext","TabListProvider","renderTabList_unstable","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable"],"mappings":"AAYA,SACEA,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,iBAAiB,EACjBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,yBAAyB,EACzBC,mBAAmB,QACd,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  useTabListA11yBehavior_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","useTabListA11yBehavior_unstable","useTabListBase_unstable"],"mappings":"AAcA,SACEA,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,iBAAiB,EACjBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,yBAAyB,EACzBC,mBAAmB,EACnBC,+BAA+B,EAC/BC,uBAAuB,QAClB,6BAA6B"}

package/lib/components/Tab/Tab.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering Tab
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\nexport type TabInternalSlots = TabSlots & {\n  contentReservedSpace?: Slot<'span'>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content' | 'value'> &\n  Pick<Partial<TabSlots>, 'content'> & {\n    /**\n     * A tab can be set to disable interaction.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * The value that identifies this tab when selected.\n     */\n    value: TabValue;\n  };\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabInternalSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.\n     */\n    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * When defined, tab content with selected style is rendered hidden to reserve space.\n     * This keeps consistent content size between unselected and selected states.\n     *\n     * @deprecated - use `contentReservedSpace` internal slot instead.\n     */\n    contentReservedSpaceClassName?: string;\n    /**\n     * A tab can be either 'small', 'medium', or 'large' size.\n     */\n    size: 'small' | 'medium' | 'large';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n"],"names":[],"mappings":"AA6CA;;CAEC,GACD,WA+BI"}
+{"version":3,"sources":["../src/components/Tab/Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\nexport type TabInternalSlots = TabSlots & {\n  contentReservedSpace?: Slot<'span'>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content' | 'value'> &\n  Pick<Partial<TabSlots>, 'content'> & {\n    /**\n     * A tab can be set to disable interaction.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * The value that identifies this tab when selected.\n     */\n    value: TabValue;\n  };\n\nexport type TabBaseProps = Omit<TabProps, 'contentReservedSpace'>;\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabInternalSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.\n     */\n    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * When defined, tab content with selected style is rendered hidden to reserve space.\n     * This keeps consistent content size between unselected and selected states.\n     *\n     * @deprecated - use `contentReservedSpace` internal slot instead.\n     */\n    contentReservedSpaceClassName?: string;\n    /**\n     * A tab can be either 'small', 'medium', or 'large' size.\n     */\n    size: 'small' | 'medium' | 'large';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n\nexport type TabBaseState = Omit<TabState, 'appearance' | 'size' | 'contentReservedSpace'>;\n"],"names":[],"mappings":"AAmFA,WAA0F"}

package/lib/components/Tab/index.js

@@ -1,5 +1,5 @@
 export { Tab } from './Tab';
 export { renderTab_unstable } from './renderTab';
-export { useTab_unstable } from './useTab';
+export { useTab_unstable, useTabBase_unstable, useTabA11yBehavior_unstable } from './useTab';
 export { tabClassNames, tabReservedSpaceClassNames, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, useTabStyles_unstable } from './useTabStyles.styles';
 export { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/index.ts"],"sourcesContent":["export { Tab } from './Tab';\nexport type { TabInternalSlots, TabProps, TabSlots, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable } from './useTab';\nexport {\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n} from './useTabStyles.styles';\nexport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n"],"names":["Tab","renderTab_unstable","useTab_unstable","tabClassNames","tabReservedSpaceClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,QAAQ;AAE5B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,eAAe,QAAQ,WAAW;AAC3C,SACEC,aAAa,EACbC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,QAChB,wBAAwB;AAC/B,SAASC,sCAAsC,QAAQ,mCAAmC"}
+{"version":3,"sources":["../src/components/Tab/index.ts"],"sourcesContent":["export { Tab } from './Tab';\nexport type { TabInternalSlots, TabBaseProps, TabProps, TabSlots, TabBaseState, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable, useTabBase_unstable, useTabA11yBehavior_unstable } from './useTab';\nexport {\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n} from './useTabStyles.styles';\nexport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n"],"names":["Tab","renderTab_unstable","useTab_unstable","useTabBase_unstable","useTabA11yBehavior_unstable","tabClassNames","tabReservedSpaceClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,QAAQ;AAE5B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,eAAe,EAAEC,mBAAmB,EAAEC,2BAA2B,QAAQ,WAAW;AAC7F,SACEC,aAAa,EACbC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,QAChB,wBAAwB;AAC/B,SAASC,sCAAsC,QAAQ,mCAAmC"}

package/lib/components/Tab/useTab.js

@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useTabsterAttributes } from '@fluentui/react-tabster';
-import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from '@fluentui/react-utilities';
-import { useTabListContext_unstable } from '../TabList/TabListContext';
+import { mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from '@fluentui/react-utilities';
+import { useTabListContext_unstable } from '../TabList';
 /**
  * Create the state required to render Tab.
  *
@@ -12,16 +12,53 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
  * @param props - props from this instance of Tab
  * @param ref - reference to root HTMLElement of Tab
  */ export const useTab_unstable = (props, ref)=>{
-    const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;
+    const { content } = props;
+    const state = useTabBase_unstable(props, ref);
+    const focusAttributes = useTabA11yBehavior_unstable(state);
     const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);
     const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);
+    const size = useTabListContext_unstable((ctx)=>{
+        var _ctx_size;
+        return (_ctx_size = ctx.size) !== null && _ctx_size !== void 0 ? _ctx_size : 'medium';
+    });
+    const contentReservedSpace = content && typeof content === 'object' ? omit(content, [
+        'ref'
+    ]) : content;
+    return {
+        ...state,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        components: {
+            ...state.components,
+            contentReservedSpace: 'span'
+        },
+        root: {
+            ...state.root,
+            ...focusAttributes
+        },
+        contentReservedSpace: slot.optional(contentReservedSpace, {
+            renderByDefault: !state.selected && !state.iconOnly && reserveSelectedTabSpace,
+            defaultProps: {
+                children: props.children
+            },
+            elementType: 'span'
+        }),
+        appearance,
+        size
+    };
+};
+/**
+ * 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 const useTabBase_unstable = (props, ref)=>{
+    const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;
     const selectTabOnFocus = useTabListContext_unstable((ctx)=>ctx.selectTabOnFocus);
     const listDisabled = useTabListContext_unstable((ctx)=>ctx.disabled);
     const selected = useTabListContext_unstable((ctx)=>ctx.selectedValue === value);
     const onRegister = useTabListContext_unstable((ctx)=>ctx.onRegister);
     const onUnregister = useTabListContext_unstable((ctx)=>ctx.onUnregister);
     const onSelect = useTabListContext_unstable((ctx)=>ctx.onSelect);
-    const size = useTabListContext_unstable((ctx)=>ctx.size);
     const vertical = useTabListContext_unstable((ctx)=>!!ctx.vertical);
     const disabled = listDisabled || tabDisabled;
     const innerRef = React.useRef(null);
@@ -30,11 +67,6 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
         });
     const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));
     const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));
-    const focusProps = useTabsterAttributes({
-        focusable: {
-            isDefault: selected
-        }
-    });
     React.useEffect(()=>{
         onRegister({
             value,
@@ -61,9 +93,6 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
         },
         elementType: 'span'
     });
-    const contentReservedSpace = content && typeof content === 'object' ? omit(content, [
-        'ref'
-    ]) : content;
     const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
     return {
         components: {
@@ -72,39 +101,40 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
             content: 'span',
             contentReservedSpace: 'span'
         },
-        root: slot.always(getIntrinsicElementProps('button', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        root: slot.always({
             ref: useMergedRefs(ref, innerRef),
             role: 'tab',
             type: 'button',
             // aria-selected undefined indicates it is not selectable
             // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
             'aria-selected': disabled ? undefined : `${selected}`,
-            ...focusProps,
-            ...props,
+            value,
+            ...rest,
             disabled,
             onClick: onTabClick,
             onFocus: selectTabOnFocus ? onTabFocus : onFocus
-        }), {
+        }, {
             elementType: 'button'
         }),
         icon: iconSlot,
         iconOnly,
         content: contentSlot,
-        contentReservedSpace: slot.optional(contentReservedSpace, {
-            renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,
-            defaultProps: {
-                children: props.children
-            },
-            elementType: 'span'
-        }),
-        appearance,
         disabled,
         selected,
-        size,
         value,
         vertical
     };
 };
+/**
+ * Hook to return a11y attributes to a Tab based on selected state.
+ * Should be applied on the button with role="tab".
+ *
+ * @param selected - whether the Tab is selected
+ * @returns Tabster DOM attributes
+ */ export const useTabA11yBehavior_unstable = ({ selected })=>{
+    return useTabsterAttributes({
+        focusable: {
+            isDefault: selected
+        }
+    });
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const size = useTabListContext_unstable(ctx => ctx.size);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  const focusProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const contentReservedSpace: typeof content =\n    content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n        role: 'tab',\n        type: 'button',\n        // aria-selected undefined indicates it is not selectable\n        // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n        'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),\n        ...focusProps,\n        ...props,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      }),\n      { elementType: 'button' },\n    ) as TabState['root'],\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    contentReservedSpace: slot.optional(contentReservedSpace, {\n      renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"names":["React","useTabsterAttributes","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","focusProps","focusable","isDefault","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","iconOnly","Boolean","components","root","role","type","undefined","renderByDefault"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type TabsterDOMAttribute, useTabsterAttributes } from '@fluentui/react-tabster';\nimport { mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from '@fluentui/react-utilities';\nimport type { TabProps, TabState, TabBaseProps, TabBaseState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList';\nimport type { SelectTabEvent } from '../TabList';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content } = props;\n\n  const state = useTabBase_unstable(props, ref);\n  const focusAttributes = useTabA11yBehavior_unstable(state);\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const size = useTabListContext_unstable(ctx => ctx.size ?? 'medium');\n\n  const contentReservedSpace: typeof content =\n    content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, contentReservedSpace: 'span' },\n    root: {\n      ...state.root,\n      ...focusAttributes,\n    },\n    contentReservedSpace: slot.optional(contentReservedSpace, {\n      renderByDefault: !state.selected && !state.iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    size,\n  };\n};\n\n/**\n * Create the based state required to render Tab without design specifics and focus attributes.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTabBase_unstable = (props: TabBaseProps, ref: React.Ref<HTMLElement>): TabBaseState => {\n  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;\n\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      {\n        ref: useMergedRefs(ref, innerRef),\n        role: 'tab',\n        type: 'button',\n        // aria-selected undefined indicates it is not selectable\n        // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n        'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),\n        value,\n        ...rest,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      },\n      { elementType: 'button' },\n    ) as TabBaseState['root'],\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    disabled,\n    selected,\n    value,\n    vertical,\n  };\n};\n\n/**\n * Hook to return a11y attributes to a Tab based on selected state.\n * Should be applied on the button with role=\"tab\".\n *\n * @param selected - whether the Tab is selected\n * @returns Tabster DOM attributes\n */\nexport const useTabA11yBehavior_unstable = ({ selected }: Pick<TabBaseState, 'selected'>): TabsterDOMAttribute => {\n  return useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n};\n"],"names":["React","useTabsterAttributes","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","state","useTabBase_unstable","focusAttributes","useTabA11yBehavior_unstable","appearance","ctx","reserveSelectedTabSpace","size","contentReservedSpace","components","root","optional","renderByDefault","selected","iconOnly","defaultProps","children","elementType","disabled","tabDisabled","icon","onClick","onFocus","value","rest","selectTabOnFocus","listDisabled","selectedValue","onRegister","onUnregister","onSelect","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","useEffect","iconSlot","contentSlot","always","Boolean","role","type","undefined","focusable","isDefault"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TabList/TabList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n  /**\n   * The value of the tab.\n   */\n  value: TabValue;\n\n  /**\n   * The reference to the tab HTML element.\n   */\n  ref: React.RefObject<HTMLElement | null>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E> | React.FocusEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   *- 'subtle-circular': Adds background and border styling\n   *- 'filled-circular': Adds background styling\n   *\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n  /**\n   * Tab size may change between unselected and selected states.\n   * The default scenario is a selected tab has bold text.\n   *\n   * When true, this property requests tabs be the same size whether unselected or selected.\n   * @default true\n   */\n  reserveSelectedTabSpace?: boolean;\n\n  /**\n   * The value of the tab to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   */\n  defaultSelectedValue?: TabValue;\n\n  /**\n   * A tab list can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Raised when a tab is selected.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * When true, focusing a tab will select it.\n   * @default false\n   */\n  selectTabOnFocus?: boolean;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small', 'medium', or 'large' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type TabListContextValue = Pick<\n  TabListProps,\n  'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'\n> &\n  Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n    /**\n     * Gets the registered tab data along with current and previous selected values.\n     */\n    getRegisteredTabs: () => {\n      selectedValue?: TabValue;\n      previousSelectedValue?: TabValue;\n      registeredTabs: Record<string, TabRegisterData>;\n    };\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/TabList/TabList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n  /**\n   * The value of the tab.\n   */\n  value: TabValue;\n\n  /**\n   * The reference to the tab HTML element.\n   */\n  ref: React.RefObject<HTMLElement | null>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E> | React.FocusEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   *- 'subtle-circular': Adds background and border styling\n   *- 'filled-circular': Adds background styling\n   *\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n  /**\n   * Tab size may change between unselected and selected states.\n   * The default scenario is a selected tab has bold text.\n   *\n   * When true, this property requests tabs be the same size whether unselected or selected.\n   * @default true\n   */\n  reserveSelectedTabSpace?: boolean;\n\n  /**\n   * The value of the tab to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   */\n  defaultSelectedValue?: TabValue;\n\n  /**\n   * A tab list can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Raised when a tab is selected.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * When true, focusing a tab will select it.\n   * @default false\n   */\n  selectTabOnFocus?: boolean;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small', 'medium', or 'large' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type TabListBaseProps = Omit<TabListProps, 'appearance' | 'size' | 'reserveSelectedTabSpace'>;\n\nexport type TabListContextValue = Pick<\n  TabListProps,\n  'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'\n> &\n  Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n    /**\n     * Gets the registered tab data along with current and previous selected values.\n     */\n    getRegisteredTabs: () => {\n      selectedValue?: TabValue;\n      previousSelectedValue?: TabValue;\n      registeredTabs: Record<string, TabRegisterData>;\n    };\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n\nexport type TabListBaseState = Omit<TabListState, 'appearance' | 'size' | 'reserveSelectedTabSpace'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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 } 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  TabListProps,\n  TabListSlots,\n  TabListState,\n  TabRegisterData,\n} from './TabList.types';\nexport { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';\nexport { renderTabList_unstable } from './renderTabList';\nexport { useTabList_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","useTabListContextValues_unstable","tabListClassNames","useTabListStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAapC,SAASC,cAAc,EAAEC,eAAe,EAAEC,0BAA0B,QAAQ,mBAAmB;AAC/F,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,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/useTabList.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { getIntrinsicElementProps, useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render TabList.
  *
@@ -11,18 +11,36 @@ import { getIntrinsicElementProps, useControllableState, useEventCallback, useMe
  * @param props - props from this instance of TabList
  * @param ref - reference to root HTMLElement of TabList
  */ export const useTabList_unstable = (props, ref)=>{
-    const { appearance = 'transparent', reserveSelectedTabSpace = true, disabled = false, onTabSelect, selectTabOnFocus = false, size = 'medium', vertical = false } = props;
-    const innerRef = React.useRef(null);
-    const focusAttributes = useArrowNavigationGroup({
-        circular: true,
-        axis: vertical ? 'vertical' : 'horizontal',
-        memorizeCurrent: false,
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        unstable_hasDefault: true
+    const { appearance = 'transparent', reserveSelectedTabSpace = true, size = 'medium' } = props;
+    const state = useTabListBase_unstable(props, ref);
+    const focusAttributes = useTabListA11yBehavior_unstable({
+        vertical: state.vertical
     });
+    return {
+        ...state,
+        root: {
+            ...state.root,
+            ...focusAttributes
+        },
+        appearance,
+        reserveSelectedTabSpace,
+        size
+    };
+};
+/**
+ * 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 const useTabListBase_unstable = (props, ref)=>{
+    const { disabled = false, onTabSelect, selectTabOnFocus = false, vertical = false, selectedValue: controlledSelectedValue, defaultSelectedValue, ...rest } = props;
+    const innerRef = React.useRef(null);
     const [selectedValue, setSelectedValue] = useControllableState({
-        state: props.selectedValue,
-        defaultState: props.defaultSelectedValue,
+        state: controlledSelectedValue,
+        defaultState: defaultSelectedValue,
         initialState: undefined
     });
     // considered usePrevious, but it is sensitive to re-renders
@@ -69,28 +87,36 @@ import { getIntrinsicElementProps, useControllableState, useEventCallback, useMe
         components: {
             root: 'div'
         },
-        root: slot.always(getIntrinsicElementProps('div', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        root: slot.always({
             ref: useMergedRefs(ref, innerRef),
             role: 'tablist',
             'aria-orientation': vertical ? 'vertical' : 'horizontal',
-            ...focusAttributes,
-            ...props
-        }), {
+            ...rest
+        }, {
             elementType: 'div'
         }),
-        appearance,
-        reserveSelectedTabSpace,
         disabled,
         selectTabOnFocus,
         selectedValue,
-        size,
-        vertical,
         onRegister,
         onUnregister,
         onSelect,
-        getRegisteredTabs
+        getRegisteredTabs,
+        vertical
     };
 };
+/**
+ * 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 const useTabListA11yBehavior_unstable = ({ vertical })=>{
+    return useArrowNavigationGroup({
+        circular: true,
+        axis: vertical ? 'vertical' : 'horizontal',
+        memorizeCurrent: false,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        unstable_hasDefault: true
+    });
+};

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 { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\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 {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    selectTabOnFocus = false,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = 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  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...focusAttributes,\n        ...props,\n      } as const),\n      { elementType: 'div' },\n    ),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectTabOnFocus,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","selectTabOnFocus","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","unstable_hasDefault","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","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","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,wBAAwB,EACxBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,mBAAmB,KAAK,EACxBC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGR;IAEJ,MAAMS,WAAWjB,MAAMkB,MAAM,CAAc;IAE3C,MAAMC,kBAAkBlB,wBAAwB;QAC9CmB,UAAU;QACVC,MAAML,WAAW,aAAa;QAC9BM,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGtB,qBAAqB;QAC7DuB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB/B,MAAMkB,MAAM,CAAuBY;IAChE,MAAME,wBAAwBhC,MAAMkB,MAAM,CAAuBY;IAEjE9B,MAAMiC,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW/B,iBAAiB,CAACgC,OAAuBC;QACxDZ,iBAAiBY,KAAKC,KAAK;QAC3BzB,wBAAAA,kCAAAA,YAAcuB,OAAOC;IACvB;IAEA,MAAME,iBAAiBvC,MAAMkB,MAAM,CAAkC,CAAC;IAEtE,MAAMsB,aAAapC,iBAAiB,CAACiC;QACnC,MAAMI,MAAMC,KAAKC,SAAS,CAACN,KAAKC,KAAK;QAErC,IAAI,CAACG,OAAOG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACjD,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE,CAAC,kCAAkC,EAAEX,KAAKC,KAAK,CAAC,sCAAsC,CAAC;gBACvF;gBACA;gBACA,CAAC,wFAAwF,CAAC;aAC3F,CAACW,IAAI,CAAC;QAEX;QAEAV,eAAeL,OAAO,CAACO,IAAI,GAAGJ;IAChC;IAEA,MAAMa,eAAe9C,iBAAiB,CAACiC;QACrC,OAAOE,eAAeL,OAAO,CAACQ,KAAKC,SAAS,CAACN,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMa,oBAAoBnD,MAAMoD,WAAW,CAAC;QAC1C,OAAO;YACL5B,eAAeO,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDK,gBAAgBA,eAAeL,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMhD,KAAKiD,MAAM,CACfrD,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,KAAKJ,cAAcI,KAAKQ;YACxBuC,MAAM;YACN,oBAAoBxC,WAAW,aAAa;YAC5C,GAAGG,eAAe;YAClB,GAAGX,KAAK;QACV,IACA;YAAEiD,aAAa;QAAM;QAEvB/C;QACAC;QACAC;QACAE;QACAU;QACAT;QACAC;QACAwB;QACAU;QACAf;QACAgB;IACF;AACF,EAAE"}
+{"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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"}

package/lib/index.js

@@ -1,2 +1,4 @@
 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';
+export { useTabBase_unstable, useTabA11yBehavior_unstable } from './Tab';
+export { useTabListBase_unstable, useTabListA11yBehavior_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"],"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"}
+{"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\nexport type { TabBaseProps, TabBaseState } from './Tab';\nexport { useTabBase_unstable, useTabA11yBehavior_unstable } from './Tab';\nexport type { TabListBaseProps, TabListBaseState } from './TabList';\nexport { 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","useTabBase_unstable","useTabA11yBehavior_unstable","useTabListBase_unstable","useTabListA11yBehavior_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;AAInB,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,QAAQ;AAEzE,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,YAAY"}

package/lib-commonjs/Tab.js

@@ -21,9 +21,15 @@ _export(exports, {
     tabReservedSpaceClassNames: function() {
         return _index.tabReservedSpaceClassNames;
     },
+    useTabA11yBehavior_unstable: function() {
+        return _index.useTabA11yBehavior_unstable;
+    },
     useTabAnimatedIndicatorStyles_unstable: function() {
         return _index.useTabAnimatedIndicatorStyles_unstable;
     },
+    useTabBase_unstable: function() {
+        return _index.useTabBase_unstable;
+    },
     useTabButtonStyles_unstable: function() {
         return _index.useTabButtonStyles_unstable;
     },