@fluentui/react-tabs 9.10.8 → 9.11.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # 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 17:01:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.11.0)
+
+Thu, 22 Jan 2026 17:01:25 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.10.8..@fluentui/react-tabs_v9.11.0)
+
+### Minor changes
+
+- feat: add base hooks for tabs components ([PR #35638](https://github.com/microsoft/fluentui/pull/35638) by dmytrokirpa@microsoft.com)
+- refactor(react-tabs): separate focus behavior from base hook ([PR #35675](https://github.com/microsoft/fluentui/pull/35675) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) 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/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, 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  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","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,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, 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  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"}

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 as useTabListFocusAttributes } 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 {\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"}

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,6 @@
 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 { 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';

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\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"}

package/lib-commonjs/Tab.js

@@ -24,6 +24,9 @@ _export(exports, {
     useTabAnimatedIndicatorStyles_unstable: function() {
         return _index.useTabAnimatedIndicatorStyles_unstable;
     },
+    useTabBase_unstable: function() {
+        return _index.useTabBase_unstable;
+    },
     useTabButtonStyles_unstable: function() {
         return _index.useTabButtonStyles_unstable;
     },

package/lib-commonjs/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":";;;;;;;;;;;IAEEA;yBAAG;;;eACHC,yBAAkB;;;eAClBC,oBAAa;;;eACbC,iCAA0B;;;eAC1BC,6CAAsC;;;eACtCC,kCAA2B;;;eAC3BC,mCAA4B;;;eAC5BC,qCAA8B;;;eAC9BC,4BAAqB;;;eACrBC,sBAAe;;;uBACV,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  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","useTabBase_unstable"],"mappings":";;;;;;;;;;;IAUEA;yBAAG;;;eACHC,yBAAkB;;;eAClBC,oBAAa;;;eACbC,iCAA0B;;;eAC1BC,6CAAsC;;uBAMnB;eAAnBM;;;eALAL,kCAA2B;;;eAC3BC,mCAA4B;;kCACE;eAA9BC;;;eACAC,4BAAqB;;;eACrBC,sBAAe;;;uBAEV,yBAAyB"}

package/lib-commonjs/TabList.js

@@ -24,6 +24,9 @@ _export(exports, {
     tabListClassNames: function() {
         return _index.tabListClassNames;
     },
+    useTabListBase_unstable: function() {
+        return _index.useTabListBase_unstable;
+    },
     useTabListContextValues_unstable: function() {
         return _index.useTabListContextValues_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  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":";;;;;;;;;;;IAaEA;6BAAO;;;eACPC,qBAAc;;;eACdC,sBAAe;;;eACfC,6BAAsB;;;eACtBC,wBAAiB;;;eACjBC,uCAAgC;;;eAChCC,iCAA0B;;;eAC1BC,gCAAyB;;;eACzBC,0BAAmB;;;uBACd,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} 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"}

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

@@ -1,6 +1,4 @@
-/**
- * State used in rendering Tab
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/lib-commonjs/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":""}

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

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

package/lib-commonjs/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":";;;;;;;;;;;IAASA;uBAAG;;;eAEHC,6BAAkB;;;eAGzBE,iCAAa;;;eACbC,8CAA0B;;IAMnBK;oFAAsC;;;eAL7CJ,+CAA2B;;;eAC3BC,gDAA4B;;;eAC5BC,kDAA8B;;;eAC9BC,yCAAqB;;;eAPdN,uBAAe;;;qBAHJ,QAAQ;2BAEO,cAAc;wBACjB,WAAW;oCAQpC,wBAAwB;+CACwB,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":";;;;;;;;;;;IAASA;uBAAG;;;eAEHC,6BAAkB;;;eAGzBI,iCAAa;;8BACa;eAA1BC;;;eAH6CF,mCAA2B;;0CAS3B;eAAtCO;;;eATiBR,2BAAmB;;+BAIhB;eAA3BI;;IACAC,4BAA4B;;;;eAC5BC,kDAA8B;;;eAC9BC,yCAAqB;;;eAPdR,uBAAe;;;qBAHJ,QAAQ;2BAEO,cAAc;wBACiC,WAAW;oCAQtF,wBAAwB;+CACwB,mCAAmC"}

package/lib-commonjs/components/Tab/useTab.js

@@ -3,9 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useTab_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useTabA11yBehavior_unstable: function() {
+        return useTabA11yBehavior_unstable;
+    },
+    useTabBase_unstable: function() {
+        return useTabBase_unstable;
+    },
+    useTab_unstable: function() {
         return useTab_unstable;
     }
 });
@@ -13,19 +24,51 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacttabster = require("@fluentui/react-tabster");
 const _reactutilities = require("@fluentui/react-utilities");
-const _TabListContext = require("../TabList/TabListContext");
+const _TabList = require("../TabList");
 const useTab_unstable = (props, ref)=>{
-    const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;
-    const appearance = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.appearance);
-    const reserveSelectedTabSpace = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.reserveSelectedTabSpace);
-    const selectTabOnFocus = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.selectTabOnFocus);
-    const listDisabled = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.disabled);
-    const selected = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.selectedValue === value);
-    const onRegister = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.onRegister);
-    const onUnregister = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.onUnregister);
-    const onSelect = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.onSelect);
-    const size = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.size);
-    const vertical = (0, _TabListContext.useTabListContext_unstable)((ctx)=>!!ctx.vertical);
+    const { content } = props;
+    const state = useTabBase_unstable(props, ref);
+    const focusAttributes = useTabA11yBehavior_unstable(state);
+    const appearance = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.appearance);
+    const reserveSelectedTabSpace = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.reserveSelectedTabSpace);
+    const size = (0, _TabList.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' ? (0, _reactutilities.omit)(content, [
+        'ref'
+    ]) : content;
+    return {
+        ...state,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        components: {
+            ...state.components,
+            contentReservedSpace: 'span'
+        },
+        root: {
+            ...state.root,
+            ...focusAttributes
+        },
+        contentReservedSpace: _reactutilities.slot.optional(contentReservedSpace, {
+            renderByDefault: !state.selected && !state.iconOnly && reserveSelectedTabSpace,
+            defaultProps: {
+                children: props.children
+            },
+            elementType: 'span'
+        }),
+        appearance,
+        size
+    };
+};
+const useTabBase_unstable = (props, ref)=>{
+    const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;
+    const selectTabOnFocus = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.selectTabOnFocus);
+    const listDisabled = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.disabled);
+    const selected = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.selectedValue === value);
+    const onRegister = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.onRegister);
+    const onUnregister = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.onUnregister);
+    const onSelect = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.onSelect);
+    const vertical = (0, _TabList.useTabListContext_unstable)((ctx)=>!!ctx.vertical);
     const disabled = listDisabled || tabDisabled;
     const innerRef = _react.useRef(null);
     const onSelectCallback = (event)=>onSelect(event, {
@@ -33,11 +76,6 @@ const useTab_unstable = (props, ref)=>{
         });
     const onTabClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, onSelectCallback));
     const onTabFocus = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onFocus, onSelectCallback));
-    const focusProps = (0, _reacttabster.useTabsterAttributes)({
-        focusable: {
-            isDefault: selected
-        }
-    });
     _react.useEffect(()=>{
         onRegister({
             value,
@@ -64,9 +102,6 @@ const useTab_unstable = (props, ref)=>{
         },
         elementType: 'span'
     });
-    const contentReservedSpace = content && typeof content === 'object' ? (0, _reactutilities.omit)(content, [
-        'ref'
-    ]) : content;
     const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
     return {
         components: {
@@ -75,39 +110,34 @@ const useTab_unstable = (props, ref)=>{
             content: 'span',
             contentReservedSpace: 'span'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.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: _reactutilities.slot.always({
             ref: (0, _reactutilities.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: _reactutilities.slot.optional(contentReservedSpace, {
-            renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,
-            defaultProps: {
-                children: props.children
-            },
-            elementType: 'span'
-        }),
-        appearance,
         disabled,
         selected,
-        size,
         value,
         vertical
     };
 };
+const useTabA11yBehavior_unstable = ({ selected })=>{
+    return (0, _reacttabster.useTabsterAttributes)({
+        focusable: {
+            isDefault: selected
+        }
+    });
+};

package/lib-commonjs/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-commonjs/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":";;;;;iEAAuB,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":";;;;;iEAAuB,QAAQ"}

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

@@ -24,12 +24,18 @@ _export(exports, {
     tabListClassNames: function() {
         return _useTabListStylesstyles.tabListClassNames;
     },
+    useTabListBase_unstable: function() {
+        return _useTabList.useTabListBase_unstable;
+    },
     useTabListContextValues_unstable: function() {
         return _useTabListContextValues.useTabListContextValues_unstable;
     },
     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  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":";;;;;;;;;;;IAASA;+BAAO;;;eAaPC,8BAAc;;;eAAEC,+BAAe;;;eAC/BE,qCAAsB;;IAGtBG,iBAAiB;;;;eADjBD,yDAAgC;;;eAHCH,0CAA0B;;;eAIxCK,iDAAyB;;uBAFzB;eAAnBH;;;yBAfe,YAAY;gCAawC,mBAAmB;+BACxD,kBAAkB;4BACrB,eAAe;yCACF,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 {\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"}

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

@@ -3,9 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useTabList_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useTabListA11yBehavior_unstable: function() {
+        return useTabListA11yBehavior_unstable;
+    },
+    useTabListBase_unstable: function() {
+        return useTabListBase_unstable;
+    },
+    useTabList_unstable: function() {
         return useTabList_unstable;
     }
 });
@@ -14,18 +25,28 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacttabster = require("@fluentui/react-tabster");
 const _reactutilities = require("@fluentui/react-utilities");
 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 = (0, _reacttabster.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
+    };
+};
+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] = (0, _reactutilities.useControllableState)({
-        state: props.selectedValue,
-        defaultState: props.defaultSelectedValue,
+        state: controlledSelectedValue,
+        defaultState: defaultSelectedValue,
         initialState: undefined
     });
     // considered usePrevious, but it is sensitive to re-renders
@@ -72,28 +93,30 @@ const useTabList_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.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: _reactutilities.slot.always({
             ref: (0, _reactutilities.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
     };
 };
+const useTabListA11yBehavior_unstable = ({ vertical })=>{
+    return (0, _reacttabster.useArrowNavigationGroup)({
+        circular: true,
+        axis: vertical ? 'vertical' : 'horizontal',
+        memorizeCurrent: false,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        unstable_hasDefault: true
+    });
+};

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 { 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;;;;;+BAuBaO;;;;;;;iEArBU,QAAQ;8BACS,0BAA0B;gCAO3D,4BAA4B;AAa5B,4BAA4B,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,OAAMkB,MAAM,CAAc;IAE3C,MAAMC,sBAAkBlB,qCAAAA,EAAwB;QAC9CmB,UAAU;QACVC,MAAML,WAAW,aAAa;QAC9BM,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,OAAGtB,oCAAAA,EAAqB;QAC7DuB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB/B,OAAMkB,MAAM,CAAuBY;IAChE,MAAME,wBAAwBhC,OAAMkB,MAAM,CAAuBY;IAEjE9B,OAAMiC,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,eAAW/B,gCAAAA,EAAiB,CAACgC,OAAuBC;QACxDZ,iBAAiBY,KAAKC,KAAK;QAC3BzB,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAcuB,OAAOC;IACvB;IAEA,MAAME,iBAAiBvC,OAAMkB,MAAM,CAAkC,CAAC;IAEtE,MAAMsB,iBAAapC,gCAAAA,EAAiB,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,mBAAe9C,gCAAAA,EAAiB,CAACiC;QACrC,OAAOE,eAAeL,OAAO,CAACQ,KAAKC,SAAS,CAACN,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMa,oBAAoBnD,OAAMoD,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,oBAAAA,CAAKiD,MAAM,KACfrD,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,KAAKJ,iCAAAA,EAAcI,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-commonjs/index.js

@@ -66,3 +66,8 @@ _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"],"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;uCAAe;;;eAFfF,+BAAsB;;;eAxBtBV,uBAAkB;;;eAElBE,kBAAa;;qBAyBI;eAAjBW;;;eAxBAV,+BAA0B;;;eAC1BC,2CAAsC;;;eACtCC,gCAA2B;;;eAC3BC,iCAA4B;;;eAC5BC,mCAA8B;;;eAsB9BQ,yCAAgC;;;eADhCD,mCAA0B;;;eAE1BE,kCAAyB;;;eACzBC,4BAAmB;;;eAvBnBT,0BAAqB;;IACrBC;mCAAe;;;qBACV,QAAQ;yBAsBR,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\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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.10.8",
+  "version": "9.11.0",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -11,19 +11,13 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "*",
-    "@fluentui/scripts-api-extractor": "*"
-  },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.2.13",
-    "@fluentui/react-jsx-runtime": "^9.3.4",
-    "@fluentui/react-shared-contexts": "^9.26.0",
-    "@fluentui/react-tabster": "^9.26.11",
-    "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.26.0",
+    "@fluentui/react-context-selector": "^9.2.14",
+    "@fluentui/react-jsx-runtime": "^9.3.5",
+    "@fluentui/react-shared-contexts": "^9.26.1",
+    "@fluentui/react-tabster": "^9.26.12",
+    "@fluentui/react-theme": "^9.2.1",
+    "@fluentui/react-utilities": "^9.26.1",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },