@fluentui/react-tabs 9.12.2 → 9.12.4

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Tue, 26 May 2026 09:33:28 GMT and should not be manually modified.
+<!-- This log was last generated on Tue, 11 Aug 2026 17:16:02 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.12.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.12.4)
+
+Tue, 11 Aug 2026 17:16:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.12.3..@fluentui/react-tabs_v9.12.4)
+
+### Patches
+
+- Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.17 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.12.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.12.3)
+
+Wed, 24 Jun 2026 11:09:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.12.2..@fluentui/react-tabs_v9.12.3)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.18 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
 ## [9.12.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.12.2)
 
-Tue, 26 May 2026 09:33:28 GMT 
+Tue, 26 May 2026 09:39:06 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.12.1..@fluentui/react-tabs_v9.12.2)
 
 ### Patches

package/dist/index.d.cts

@@ -0,0 +1,352 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import { FC } from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { TabsterDOMAttribute } from '@fluentui/react-tabster';
+
+export declare type RegisterTabEventHandler = (data: TabRegisterData) => void;
+
+/**
+ * Render the final JSX of Tab
+ */
+export declare const renderTab_unstable: (state: TabBaseState) => JSXElement;
+
+/**
+ * Render the final JSX of TabList
+ */
+export declare const renderTabList_unstable: (state: TabListBaseState, contextValues: TabListContextValues) => JSXElement;
+
+export declare type SelectTabData = {
+    /**
+     * The value of the selected tab.
+     */
+    value: TabValue;
+};
+
+export declare type SelectTabEvent<E = HTMLElement> = React_2.MouseEvent<E> | React_2.KeyboardEvent<E> | React_2.FocusEvent<E>;
+
+export declare type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;
+
+/**
+ * A tab provides a selectable item in a tab list.
+ */
+export declare const Tab: ForwardRefComponent<TabProps>;
+
+export declare type TabBaseProps = Omit<TabProps, 'contentReservedSpace'>;
+
+export declare type TabBaseState = Omit<TabState, 'appearance' | 'size' | 'contentReservedSpace'>;
+
+export declare const tabClassNames: SlotClassNames<TabSlots>;
+
+declare type TabInternalSlots = TabSlots & {
+    contentReservedSpace?: Slot<'span'>;
+};
+
+/**
+ * A tab list provides single selection from a set of tabs.
+ */
+export declare const TabList: ForwardRefComponent<TabListProps>;
+
+export declare type TabListBaseProps = Omit<TabListProps, 'appearance' | 'size' | 'reserveSelectedTabSpace'>;
+
+export declare type TabListBaseState = Omit<TabListState, 'appearance' | 'size' | 'reserveSelectedTabSpace'>;
+
+export declare const tabListClassNames: SlotClassNames<TabListSlots>;
+
+export declare type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'> & Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
+    /** A callback to allow a tab to register itself with the tab list. */
+    onRegister: RegisterTabEventHandler;
+    /** A callback to allow a tab to unregister itself with the tab list. */
+    onUnregister: RegisterTabEventHandler;
+    /**
+     * A callback to allow a tab to select itself when pressed.
+     */
+    onSelect: SelectTabEventHandler;
+    /**
+     * Gets the registered tab data along with current and previous selected values.
+     */
+    getRegisteredTabs: () => {
+        selectedValue?: TabValue;
+        previousSelectedValue?: TabValue;
+        registeredTabs: Record<string, TabRegisterData>;
+    };
+};
+
+/**
+ * Context values used in rendering TabList.
+ */
+export declare type TabListContextValues = {
+    /**
+     * The context of the tab list available to each tab.
+     */
+    tabList: TabListContextValue;
+};
+
+/**
+ * TabList Props
+ */
+export declare type TabListProps = ComponentProps<TabListSlots> & {
+    /**
+     * A tab list can supports 'transparent' and 'subtle' appearance.
+     *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
+     *- 'transparent': No background and border styling
+     *- 'subtle-circular': Adds background and border styling
+     *- 'filled-circular': Adds background styling
+     *
+     * The appearance affects each of the contained tabs.
+     * @default 'transparent'
+     */
+    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';
+    /**
+     * Tab size may change between unselected and selected states.
+     * The default scenario is a selected tab has bold text.
+     *
+     * When true, this property requests tabs be the same size whether unselected or selected.
+     * @default true
+     */
+    reserveSelectedTabSpace?: boolean;
+    /**
+     * The value of the tab to be selected by default.
+     * Typically useful when the selectedValue is uncontrolled.
+     */
+    defaultSelectedValue?: TabValue;
+    /**
+     * A tab list can be set to disable interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Raised when a tab is selected.
+     */
+    onTabSelect?: SelectTabEventHandler;
+    /**
+     * When true, focusing a tab will select it.
+     * @default false
+     */
+    selectTabOnFocus?: boolean;
+    /**
+     * The value of the currently selected tab.
+     */
+    selectedValue?: TabValue;
+    /**
+     * A tab list can be either 'small', 'medium', or 'large' size.
+     * The size affects each of the contained tabs.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * A tab list can arrange its tabs vertically.
+     * @default false
+     */
+    vertical?: boolean;
+};
+
+export declare const TabListProvider: Provider<TabListContextValue> & FC<ProviderProps<TabListContextValue>>;
+
+export declare type TabListSlots = {
+    /**
+     * The slot associated with the root element of this tab list.
+     */
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering TabList.
+ */
+export declare type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;
+
+/**
+ * Tab Props
+ */
+export declare type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content' | 'value'> & Pick<Partial<TabSlots>, 'content'> & {
+    /**
+     * A tab can be set to disable interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The value that identifies this tab when selected.
+     */
+    value: TabValue;
+};
+
+export declare type TabRegisterData = {
+    /**
+     * The value of the tab.
+     */
+    value: TabValue;
+    /**
+     * The reference to the tab HTML element.
+     */
+    ref: React_2.RefObject<HTMLElement | null>;
+};
+
+export declare const tabReservedSpaceClassNames: {
+    content: string;
+};
+
+export declare type TabSlots = {
+    /**
+     * Root of the component.
+     */
+    root: Slot<'button'>;
+    /**
+     * Icon that renders before the content.
+     */
+    icon?: Slot<'span'>;
+    /**
+     * Component children are placed in this slot
+     * Avoid using the `children` property in this slot in favour of Component children whenever possible.
+     */
+    content: NonNullable<Slot<'span'>>;
+};
+
+/**
+ * State used in rendering Tab
+ */
+export declare type TabState = ComponentState<TabInternalSlots> & Pick<TabProps, 'value'> & Required<Pick<TabProps, 'disabled'>> & {
+    /**
+     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.
+     */
+    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';
+    /**
+     * A tab can have only an icon slot filled and no content.
+     */
+    iconOnly: boolean;
+    /**
+     * If this tab is selected
+     */
+    selected: boolean;
+    /**
+     * When defined, tab content with selected style is rendered hidden to reserve space.
+     * This keeps consistent content size between unselected and selected states.
+     *
+     * @deprecated - use `contentReservedSpace` internal slot instead.
+     */
+    contentReservedSpaceClassName?: string;
+    /**
+     * A tab can be either 'small', 'medium', or 'large' size.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * A tab can arrange its content based on if the tabs in the list are arranged vertically.
+     */
+    vertical: boolean;
+};
+
+/**
+ * Any value that identifies a specific tab.
+ */
+export declare type TabValue = unknown;
+
+/**
+ * Create the state required to render Tab.
+ *
+ * The returned state can be modified with hooks such as useTabStyles_unstable,
+ * before being passed to renderTab_unstable.
+ *
+ * @param props - props from this instance of Tab
+ * @param ref - reference to root HTMLElement of Tab
+ */
+export declare const useTab_unstable: (props: TabProps, ref: React_2.Ref<HTMLElement>) => TabState;
+
+/**
+ * Adds additional styling to the active tab selection indicator to create a sliding animation.
+ */
+export declare const useTabAnimatedIndicatorStyles_unstable: (state: TabState) => TabState;
+
+/**
+ * Create the based state required to render Tab without design specifics and focus attributes.
+ *
+ * @param props - props from this instance of Tab
+ * @param ref - reference to root HTMLElement of Tab
+ */
+export declare const useTabBase_unstable: (props: TabBaseProps, ref: React_2.Ref<HTMLElement>) => TabBaseState;
+
+/**
+ * Applies styles to the Tab button slot based on its current state.
+ *
+ * This hook is typically used internally by `useTabStyles_unstable`. You should
+ * only use it directly if you're creating a custom `Tab` component.
+ *
+ * @param state - The Tab component's current state
+ * @param slot - The button slot of the Tab component
+ * @returns The state object with updated button styles
+ */
+export declare const useTabButtonStyles_unstable: (state: TabState, slot: TabState["root"]) => TabState;
+
+/**
+ * Applies styles to the Tab content slot based on its current state.
+ *
+ * This hook is typically used internally by `useTabStyles_unstable`. You should
+ * only use it directly if you're creating a custom `Tab` component.
+ *
+ * @param state - The Tab component's current state
+ * @returns The state object with updated content styles
+ */
+export declare const useTabContentStyles_unstable: (state: TabState) => TabState;
+
+/**
+ * Applies styles for the Tab indicator based on its current state.
+ *
+ * This hook is typically used internally by `useTabStyles_unstable`. You should
+ * only use it directly if you're creating a custom `Tab` component.
+ *
+ * @param state - The `Tab` component's current state
+ * @returns The state object with updated button styles
+ */
+export declare const useTabIndicatorStyles_unstable: (state: TabState) => TabState;
+
+/**
+ * Create the state required to render TabList.
+ *
+ * The returned state can be modified with hooks such as useTabListStyles_unstable,
+ * before being passed to renderTabList_unstable.
+ *
+ * @param props - props from this instance of TabList
+ * @param ref - reference to root HTMLElement of TabList
+ */
+export declare const useTabList_unstable: (props: TabListProps, ref: React_2.Ref<HTMLElement>) => TabListState;
+
+/**
+ * Hook to get accessibility attributes for TabList component, such as roving tab index.
+ * Based on Tabster's useArrowNavigationGroup.
+ *
+ * @param vertical - whether the TabList is vertical
+ * @returns Tabster DOM attributes
+ */
+export declare const useTabListA11yBehavior_unstable: ({ vertical, }: Pick<TabListBaseState, "vertical">) => TabsterDOMAttribute;
+
+/**
+ * Create the state required to render TabList.
+ *
+ * The returned state can be modified with hooks such as useTabListStyles_unstable,
+ * before being passed to renderTabList_unstable.
+ *
+ * @param props - props from this instance of TabList
+ * @param ref - reference to root HTMLElement of TabList
+ */
+export declare const useTabListBase_unstable: (props: TabListBaseProps, ref: React_2.Ref<HTMLElement>) => TabListBaseState;
+
+export declare const useTabListContext_unstable: <T>(selector: ContextSelector<TabListContextValue, T>) => T;
+
+export declare function useTabListContextValues_unstable(state: TabListState): TabListContextValues;
+
+/**
+ * Apply styling to the TabList slots based on the state
+ */
+export declare const useTabListStyles_unstable: (state: TabListState) => TabListState;
+
+/**
+ * Apply styling to the Tab slots based on the state
+ */
+export declare const useTabStyles_unstable: (state: TabState) => TabState;
+
+export { }

package/lib/Tab.js

@@ -1 +1 @@
-export { Tab, renderTab_unstable, tabClassNames, tabReservedSpaceClassNames, useTabAnimatedIndicatorStyles_unstable, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, useTabStyles_unstable, useTab_unstable, useTabBase_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.js";

package/lib/Tab.js.map

@@ -1 +1 @@
-{"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"}
+{"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,4BAAyB"}

package/lib/TabList.js

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

package/lib/TabList.js.map

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

package/lib/components/Tab/Tab.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useTab_unstable } from './useTab';
-import { renderTab_unstable } from './renderTab';
-import { useTabStyles_unstable } from './useTabStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useTab_unstable } from "./useTab.js";
+import { renderTab_unstable } from "./renderTab.js";
+import { useTabStyles_unstable } from "./useTabStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * A tab provides a selectable item in a tab list.
  */ export const Tab = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;AAG9D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,oBAAqCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,QAAQR,gBAAgBM,OAAOC;IAErCL,sBAAsBM;IAEtBL,4BAA4B,yBAAyBK;IAErD,OAAOP,mBAAmBO;AAC5B,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,cAAW;AAC3C,SAASC,kBAAkB,QAAQ,iBAAc;AACjD,SAASC,qBAAqB,QAAQ,2BAAwB;AAG9D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,oBAAqCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,QAAQR,gBAAgBM,OAAOC;IAErCL,sBAAsBM;IAEtBL,4BAA4B,yBAAyBK;IAErD,OAAOP,mBAAmBO;AAC5B,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}

package/lib/components/Tab/index.js

@@ -1,5 +1,5 @@
-export { Tab } from './Tab';
-export { renderTab_unstable } from './renderTab';
-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';
+export { Tab } from "./Tab.js";
+export { renderTab_unstable } from "./renderTab.js";
+export { useTab_unstable, useTabBase_unstable, useTabA11yBehavior_unstable } from "./useTab.js";
+export { tabClassNames, tabReservedSpaceClassNames, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, useTabStyles_unstable } from "./useTabStyles.styles.js";
+export { useTabAnimatedIndicatorStyles_unstable } from "./useTabAnimatedIndicator.styles.js";

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, 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"}
+{"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,WAAQ;AAE5B,SAASC,kBAAkB,QAAQ,iBAAc;AACjD,SAASC,eAAe,EAAEC,mBAAmB,EAAEC,2BAA2B,QAAQ,cAAW;AAC7F,SACEC,aAAa,EACbC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,QAChB,2BAAwB;AAC/B,SAASC,sCAAsC,QAAQ,sCAAmC"}

package/lib/components/Tab/renderTab.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of Tab
  */ export const renderTab_unstable = (state)=>{

package/lib/components/Tab/useTab.js

@@ -1,8 +1,8 @@
 'use client';
-import * as React from 'react';
-import { useTabsterAttributes } from '@fluentui/react-tabster';
-import { mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from '@fluentui/react-utilities';
-import { useTabListContext_unstable } from '../TabList';
+import * as React from "react";
+import { useTabsterAttributes } from "@fluentui/react-tabster";
+import { mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from "@fluentui/react-utilities";
+import { useTabListContext_unstable } from "../TabList/index.js";
 /**
  * Create the state required to render Tab.
  *

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 { 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      ...focusAttributes,\n      ...state.root,\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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"}
+{"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      ...focusAttributes,\n      ...state.root,\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/Tab/useTabAnimatedIndicator.styles.js

@@ -1,10 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { __styles, mergeClasses } from '@griffel/react';
-import { useTabListContext_unstable } from '../TabList/TabListContext';
-import { tokens } from '@fluentui/react-theme';
-import { useAnimationFrame } from '@fluentui/react-utilities';
+import * as React from "react";
+import { __styles, mergeClasses } from "@griffel/react";
+import { useTabListContext_unstable } from "../TabList/TabListContext.js";
+import { tokens } from "@fluentui/react-theme";
+import { useAnimationFrame } from "@fluentui/react-utilities";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const tabIndicatorCssVars_unstable = {
   offsetVar: '--fui-Tab__indicator--offset',

package/lib/components/Tab/useTabAnimatedIndicator.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","__styles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","Bu93a1u","Bdasjez","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n    offsetVar: '--fui-Tab__indicator--offset',\n    scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        // overflow is required to allow the selection indicator to animate outside the tab area.\n        overflow: 'visible'\n    },\n    animated: {\n        '::after': {\n            transitionProperty: 'transform',\n            transitionDuration: `${tokens.durationSlow}`,\n            transitionTimingFunction: `${tokens.curveDecelerateMax}`\n        },\n        '@media (prefers-reduced-motion: reduce)': {\n            '::after': {\n                transitionProperty: 'none',\n                transitionDuration: '0.01ms'\n            }\n        }\n    },\n    horizontal: {\n        '::after': {\n            transformOrigin: 'left',\n            transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    },\n    vertical: {\n        '::after': {\n            transformOrigin: 'top',\n            transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    }\n});\nconst calculateTabRect = (element)=>{\n    if (element) {\n        var _element_parentElement;\n        const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {\n            x: 0,\n            y: 0,\n            width: 0,\n            height: 0\n        };\n        const tabRect = element.getBoundingClientRect();\n        return {\n            x: tabRect.x - parentRect.x,\n            y: tabRect.y - parentRect.y,\n            width: tabRect.width,\n            height: tabRect.height\n        };\n    }\n    return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n    var _registeredTabs_JSON_stringify;\n    const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n    return element ? calculateTabRect(element) : undefined;\n};\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n    const { disabled, selected, vertical } = state;\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n    const [animationValues, setAnimationValues] = React.useState({\n        offset: 0,\n        scale: 1\n    });\n    const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n    const [requestAnimationFrame] = useAnimationFrame();\n    if (selected) {\n        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n        if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n            if (selectedTabRect && previousSelectedTabRect) {\n                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n                setAnimationValues({\n                    offset,\n                    scale\n                });\n                setLastAnimatedFrom(previousSelectedValue);\n                // Reset the animation values after the animation is complete\n                requestAnimationFrame(()=>setAnimationValues({\n                        offset: 0,\n                        scale: 1\n                    }));\n            }\n        }\n    } else if (isValueDefined(lastAnimatedFrom)) {\n        // need to clear the last animated from so that if this tab is selected again\n        // from the same previous tab as last time, that animation still happens.\n        setLastAnimatedFrom(undefined);\n    }\n    // do not apply any animation if the tab is disabled\n    if (disabled) {\n        return state;\n    }\n    // the animation should only happen as the selection indicator returns to its\n    // original position and not when set at the previous tabs position.\n    const animating = animationValues.offset === 0 && animationValues.scale === 1;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n    const rootCssVars = {\n        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n    };\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.style = {\n        ...rootCssVars,\n        ...state.root.style\n    };\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","__styles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","Bu93a1u","Bdasjez","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["'use client';\nimport * as React from \"react\";\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { useTabListContext_unstable } from \"../TabList/TabListContext.js\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { useAnimationFrame } from \"@fluentui/react-utilities\";\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n    offsetVar: '--fui-Tab__indicator--offset',\n    scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        // overflow is required to allow the selection indicator to animate outside the tab area.\n        overflow: 'visible'\n    },\n    animated: {\n        '::after': {\n            transitionProperty: 'transform',\n            transitionDuration: `${tokens.durationSlow}`,\n            transitionTimingFunction: `${tokens.curveDecelerateMax}`\n        },\n        '@media (prefers-reduced-motion: reduce)': {\n            '::after': {\n                transitionProperty: 'none',\n                transitionDuration: '0.01ms'\n            }\n        }\n    },\n    horizontal: {\n        '::after': {\n            transformOrigin: 'left',\n            transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    },\n    vertical: {\n        '::after': {\n            transformOrigin: 'top',\n            transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    }\n});\nconst calculateTabRect = (element)=>{\n    if (element) {\n        var _element_parentElement;\n        const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {\n            x: 0,\n            y: 0,\n            width: 0,\n            height: 0\n        };\n        const tabRect = element.getBoundingClientRect();\n        return {\n            x: tabRect.x - parentRect.x,\n            y: tabRect.y - parentRect.y,\n            width: tabRect.width,\n            height: tabRect.height\n        };\n    }\n    return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n    var _registeredTabs_JSON_stringify;\n    const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n    return element ? calculateTabRect(element) : undefined;\n};\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n    const { disabled, selected, vertical } = state;\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n    const [animationValues, setAnimationValues] = React.useState({\n        offset: 0,\n        scale: 1\n    });\n    const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n    const [requestAnimationFrame] = useAnimationFrame();\n    if (selected) {\n        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n        if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n            if (selectedTabRect && previousSelectedTabRect) {\n                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n                setAnimationValues({\n                    offset,\n                    scale\n                });\n                setLastAnimatedFrom(previousSelectedValue);\n                // Reset the animation values after the animation is complete\n                requestAnimationFrame(()=>setAnimationValues({\n                        offset: 0,\n                        scale: 1\n                    }));\n            }\n        }\n    } else if (isValueDefined(lastAnimatedFrom)) {\n        // need to clear the last animated from so that if this tab is selected again\n        // from the same previous tab as last time, that animation still happens.\n        setLastAnimatedFrom(undefined);\n    }\n    // do not apply any animation if the tab is disabled\n    if (disabled) {\n        return state;\n    }\n    // the animation should only happen as the selection indicator returns to its\n    // original position and not when set at the previous tabs position.\n    const animating = animationValues.offset === 0 && animationValues.scale === 1;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n    const rootCssVars = {\n        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n    };\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.style = {\n        ...rootCssVars,\n        ...state.root.style\n    };\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Tab/useTabAnimatedIndicator.styles.raw.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { useTabListContext_unstable } from '../TabList/TabListContext';
-import { tokens } from '@fluentui/react-theme';
-import { useAnimationFrame } from '@fluentui/react-utilities';
+import * as React from "react";
+import { makeStyles, mergeClasses } from "@griffel/react";
+import { useTabListContext_unstable } from "../TabList/TabListContext.js";
+import { tokens } from "@fluentui/react-theme";
+import { useAnimationFrame } from "@fluentui/react-utilities";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const tabIndicatorCssVars_unstable = {
     offsetVar: '--fui-Tab__indicator--offset',