@fluentui/react-tabs 9.3.29 → 9.3.31

package/CHANGELOG.json

@@ -2,7 +2,61 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Wed, 09 Aug 2023 13:11:47 GMT",
+      "date": "Mon, 14 Aug 2023 21:22:02 GMT",
+      "tag": "@fluentui/react-tabs_v9.3.31",
+      "version": "9.3.31",
+      "comments": {
+        "patch": [
+          {
+            "author": "nasirvi@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "b180b6512aa21887ab78d4910503506ab8e35e6b",
+            "comment": "Defer tabs rectangle computation only when previousSelectedValue is defined"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Aug 2023 12:14:25 GMT",
+      "tag": "@fluentui/react-tabs_v9.3.30",
+      "version": "9.3.30",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "c736e39f1e07e013cc4a700eaa6cdcd6ae02127c",
+            "comment": "chore(react-tabs): migrate to new slot API"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.28",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.12.2",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.11.1",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 09 Aug 2023 13:17:06 GMT",
       "tag": "@fluentui/react-tabs_v9.3.29",
       "version": "9.3.29",
       "comments": {
@@ -17,25 +71,25 @@
             "author": "beachball",
             "package": "@fluentui/react-tabs",
             "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
-            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabs",
             "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
-            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabs",
             "comment": "Bump @fluentui/react-tabster to v9.12.1",
-            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabs",
             "comment": "Bump @fluentui/react-theme to v9.1.11",
-            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,21 +1,43 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Wed, 09 Aug 2023 13:11:47 GMT and should not be manually modified.
+This log was last generated on Mon, 14 Aug 2023 21:22:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.31](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.31)
+
+Mon, 14 Aug 2023 21:22:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.30..@fluentui/react-tabs_v9.3.31)
+
+### Patches
+
+- Defer tabs rectangle computation only when previousSelectedValue is defined ([PR #28749](https://github.com/microsoft/fluentui/pull/28749) by nasirvi@microsoft.com)
+
+## [9.3.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.30)
+
+Fri, 11 Aug 2023 12:14:25 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.29..@fluentui/react-tabs_v9.3.30)
+
+### Patches
+
+- chore(react-tabs): migrate to new slot API ([PR #28773](https://github.com/microsoft/fluentui/pull/28773) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-context-selector to v9.1.28 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-tabster to v9.12.2 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-utilities to v9.11.1 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+
 ## [9.3.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.29)
 
-Wed, 09 Aug 2023 13:11:47 GMT 
+Wed, 09 Aug 2023 13:17:06 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.28..@fluentui/react-tabs_v9.3.29)
 
 ### Patches
 
 - chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.7.2 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
-- Bump @fluentui/react-tabster to v9.12.1 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
-- Bump @fluentui/react-theme to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.2 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-tabster to v9.12.1 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
 
 ## [9.3.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.28)
 

package/dist/index.d.ts

@@ -39,6 +39,10 @@ export declare const Tab: ForwardRefComponent<TabProps>;
 
 export declare const tabClassNames: SlotClassNames<TabSlots>;
 
+declare type TabInternalSlots = TabSlots & {
+    contentReservedSpace?: Slot<'span'>;
+};
+
 /**
  * A tab list provides single selection from a set of tabs.
  */
@@ -185,7 +189,7 @@ export declare type TabSlots = {
 /**
  * State used in rendering Tab
  */
-export declare type TabState = ComponentState<TabSlots> & Pick<TabProps, 'value'> & Required<Pick<TabProps, 'disabled'>> & {
+export declare type TabState = ComponentState<TabInternalSlots> & Pick<TabProps, 'value'> & Required<Pick<TabProps, 'disabled'>> & {
     /**
      * A tab supports 'transparent' and 'subtle' appearance.
      */
@@ -201,6 +205,8 @@ export declare type TabState = ComponentState<TabSlots> & Pick<TabProps, 'value'
     /**
      * 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;
     /**

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

@@ -1 +1 @@
-{"version":3,"sources":["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\n/**\n * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & {\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<TabSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent' and 'subtle' appearance.\n     */\n    appearance?: 'transparent' | 'subtle';\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    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":"AAAA,WAuEI"}
+{"version":3,"sources":["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 = ComponentProps<Partial<TabSlots>> & {\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' and 'subtle' appearance.\n     */\n    appearance?: 'transparent' | 'subtle';\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":"AAAA,WA6EI"}

package/lib/components/Tab/renderTab.js

@@ -1,11 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Tab
  */ export const renderTab_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), !state.iconOnly && /*#__PURE__*/ createElement(slots.content, slotProps.content), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/ createElement(slots.content, {
-        ...slotProps.content,
-        className: state.contentReservedSpaceClassName
-    }));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.icon && /*#__PURE__*/ createElement(state.icon, null), !state.iconOnly && /*#__PURE__*/ createElement(state.content, null), state.contentReservedSpace && /*#__PURE__*/ createElement(state.contentReservedSpace, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTab.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TabState, TabSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n  const { slots, slotProps } = getSlotsNext<TabSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {!state.iconOnly && <slots.content {...slotProps.content} />}\n      {!state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && (\n        <slots.content {...slotProps.content} className={state.contentReservedSpaceClassName} />\n      )}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderTab_unstable","state","slots","slotProps","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC,QAAoB;IACrD,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAuBE;IAEpD,qBACE,AAbJ,cAaKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,IAAI,kBAAI,AAdrB,cAcsBH,MAAMG,IAAI,EAAKF,UAAUE,IAAI,GAC5C,CAACJ,MAAMK,QAAQ,kBAAI,AAf1B,cAe2BJ,MAAMK,OAAO,EAAKJ,UAAUI,OAAO,GACvD,CAACN,MAAMO,QAAQ,IAAI,CAACP,MAAMK,QAAQ,IAAIL,MAAMQ,6BAA6B,KAAKC,2BAC7E,AAjBR,cAiBSR,MAAMK,OAAO;QAAE,GAAGJ,UAAUI,OAAO;QAAEI,WAAWV,MAAMQ,6BAA6B;;AAI5F,EAAE"}
+{"version":3,"sources":["renderTab.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TabState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabState) => {\n  assertSlots<TabInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!state.iconOnly && <state.content />}\n      {state.contentReservedSpace && <state.contentReservedSpace />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderTab_unstable","state","root","icon","iconOnly","content","contentReservedSpace"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC,QAAoB;IACrDF,YAA8BE;IAE9B,qBACE,AAbJ,cAaKA,MAAMC,IAAI,QACRD,MAAME,IAAI,kBAAI,AAdrB,cAcsBF,MAAME,IAAI,SACzB,CAACF,MAAMG,QAAQ,kBAAI,AAf1B,cAe2BH,MAAMI,OAAO,SACjCJ,MAAMK,oBAAoB,kBAAI,AAhBrC,cAgBsCL,MAAMK,oBAAoB;AAGhE,EAAE"}

package/lib/components/Tab/useTab.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, mergeCallbacks, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useTabListContext_unstable } from '../TabList/TabListContext';
 /**
  * Create the state required to render Tab.
@@ -42,20 +42,24 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
         innerRef,
         value
     ]);
-    const iconShorthand = resolveShorthand(icon);
-    const contentShorthand = resolveShorthand(content, {
-        required: true,
+    const iconSlot = slot.optional(icon, {
+        elementType: 'span'
+    });
+    const contentSlot = slot.always(content, {
         defaultProps: {
             children: props.children
-        }
+        },
+        elementType: 'span'
     });
+    const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
     return {
         components: {
             root: 'button',
             icon: 'span',
-            content: 'span'
+            content: 'span',
+            contentReservedSpace: 'span'
         },
-        root: getNativeElementProps('button', {
+        root: slot.always(getNativeElementProps('button', {
             ref: useMergedRefs(ref, innerRef),
             role: 'tab',
             type: 'button',
@@ -65,12 +69,20 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
             ...props,
             disabled,
             onClick: onTabClick
+        }), {
+            elementType: 'button'
+        }),
+        icon: iconSlot,
+        iconOnly,
+        content: contentSlot,
+        contentReservedSpace: slot.optional(content, {
+            renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,
+            defaultProps: {
+                children: props.children
+            },
+            elementType: 'span'
         }),
-        icon: iconShorthand,
-        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
-        content: contentShorthand,
         appearance,
-        contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,
         disabled,
         selected,
         size,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  mergeCallbacks,\n  resolveShorthand,\n  useEventCallback,\n  useMergedRefs,\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, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\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 onTabClick = useEventCallback(mergeCallbacks(onClick, (event: SelectTabEvent) => onSelect(event, { value })));\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 iconShorthand = resolveShorthand(icon);\n  const contentShorthand = resolveShorthand(content, { required: true, defaultProps: { children: props.children } });\n  return {\n    components: {\n      root: 'button',\n      icon: 'span',\n      content: 'span',\n    },\n    root: getNativeElementProps('button', {\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}`,\n      ...props,\n      disabled,\n      onClick: onTabClick,\n    }),\n    icon: iconShorthand,\n    iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n    content: contentShorthand,\n    appearance,\n    contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","resolveShorthand","useEventCallback","useMergedRefs","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onTabClick","event","useEffect","iconShorthand","contentShorthand","required","defaultProps","children","components","root","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,cAAc,EACdC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AAEnC,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC,MAA0C;IACzF,MAAM,EAAEC,QAAO,EAAEC,UAAUC,cAAc,KAAK,CAAA,EAAEC,KAAI,EAAEC,QAAO,EAAEC,MAAK,EAAE,GAAGP;IAEzE,MAAMQ,aAAaV,2BAA2BW,CAAAA,MAAOA,IAAID,UAAU;IACnE,MAAME,0BAA0BZ,2BAA2BW,CAAAA,MAAOA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeb,2BAA2BW,CAAAA,MAAOA,IAAIN,QAAQ;IACnE,MAAMS,WAAWd,2BAA2BW,CAAAA,MAAOA,IAAII,aAAa,KAAKN;IACzE,MAAMO,aAAahB,2BAA2BW,CAAAA,MAAOA,IAAIK,UAAU;IACnE,MAAMC,eAAejB,2BAA2BW,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,WAAWlB,2BAA2BW,CAAAA,MAAOA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOnB,2BAA2BW,CAAAA,MAAOA,IAAIQ,IAAI;IACvD,MAAMC,WAAWpB,2BAA2BW,CAAAA,MAAO,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMf,WAAWQ,gBAAgBP;IAEjC,MAAMe,WAAW3B,MAAM4B,MAAM,CAAc,IAAI;IAC/C,MAAMC,aAAazB,iBAAiBF,eAAeY,SAAS,CAACgB,QAA0BN,SAASM,OAAO;YAAEf;QAAM;IAE/Gf,MAAM+B,SAAS,CAAC,IAAM;QACpBT,WAAW;YACTP;YACAN,KAAKkB;QACP;QAEA,OAAO,IAAM;YACXJ,aAAa;gBAAER;gBAAON,KAAKkB;YAAS;QACtC;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUZ;KAAM;IAE9C,MAAMiB,gBAAgB7B,iBAAiBU;IACvC,MAAMoB,mBAAmB9B,iBAAiBO,SAAS;QAAEwB,UAAU,IAAI;QAAEC,cAAc;YAAEC,UAAU5B,MAAM4B,QAAQ;QAAC;IAAE;IAChH,OAAO;QACLC,YAAY;YACVC,MAAM;YACNzB,MAAM;YACNH,SAAS;QACX;QACA4B,MAAMrC,sBAAsB,UAAU;YACpCQ,KAAKJ,cAAcI,KAAKkB;YACxBY,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiB7B,WAAW8B,YAAY,CAAC,EAAErB,SAAS,CAAC;YACrD,GAAGZ,KAAK;YACRG;YACAG,SAASe;QACX;QACAhB,MAAMmB;QACNU,UAAUC,QAAQX,CAAAA,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAeI,QAAQ,AAAD,KAAK,CAACH,iBAAiBG,QAAQ;QACvE1B,SAASuB;QACTjB;QACA4B,+BAA+B1B,0BAA0B,KAAKuB,SAAS;QACvE9B;QACAS;QACAK;QACAV;QACAW;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\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, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\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 onTabClick = useEventCallback(mergeCallbacks(onClick, (event: SelectTabEvent) => onSelect(event, { value })));\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      getNativeElementProps('button', {\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}`,\n        ...props,\n        disabled,\n        onClick: onTabClick,\n      }),\n      { elementType: 'button' },\n    ),\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    contentReservedSpace: slot.optional(content, {\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","getNativeElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onTabClick","event","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","iconOnly","Boolean","components","root","contentReservedSpace","role","type","undefined","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,cAAc,EACdC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAEnC,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC,MAA0C;IACzF,MAAM,EAAEC,QAAO,EAAEC,UAAUC,cAAc,KAAK,CAAA,EAAEC,KAAI,EAAEC,QAAO,EAAEC,MAAK,EAAE,GAAGP;IAEzE,MAAMQ,aAAaV,2BAA2BW,CAAAA,MAAOA,IAAID,UAAU;IACnE,MAAME,0BAA0BZ,2BAA2BW,CAAAA,MAAOA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeb,2BAA2BW,CAAAA,MAAOA,IAAIN,QAAQ;IACnE,MAAMS,WAAWd,2BAA2BW,CAAAA,MAAOA,IAAII,aAAa,KAAKN;IACzE,MAAMO,aAAahB,2BAA2BW,CAAAA,MAAOA,IAAIK,UAAU;IACnE,MAAMC,eAAejB,2BAA2BW,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,WAAWlB,2BAA2BW,CAAAA,MAAOA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOnB,2BAA2BW,CAAAA,MAAOA,IAAIQ,IAAI;IACvD,MAAMC,WAAWpB,2BAA2BW,CAAAA,MAAO,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMf,WAAWQ,gBAAgBP;IAEjC,MAAMe,WAAW3B,MAAM4B,MAAM,CAAc,IAAI;IAC/C,MAAMC,aAAa1B,iBAAiBD,eAAeY,SAAS,CAACgB,QAA0BN,SAASM,OAAO;YAAEf;QAAM;IAE/Gf,MAAM+B,SAAS,CAAC,IAAM;QACpBT,WAAW;YACTP;YACAN,KAAKkB;QACP;QAEA,OAAO,IAAM;YACXJ,aAAa;gBAAER;gBAAON,KAAKkB;YAAS;QACtC;IACF,GAAG;QAACL;QAAYC;QAAcI;QAAUZ;KAAM;IAE9C,MAAMiB,WAAW3B,KAAK4B,QAAQ,CAACpB,MAAM;QAAEqB,aAAa;IAAO;IAC3D,MAAMC,cAAc9B,KAAK+B,MAAM,CAAC1B,SAAS;QACvC2B,cAAc;YAAEC,UAAU9B,MAAM8B,QAAQ;QAAC;QACzCJ,aAAa;IACf;IACA,MAAMK,WAAWC,QAAQR,CAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAUM,QAAQ,AAAD,KAAK,CAACH,YAAYG,QAAQ;IACpE,OAAO;QACLG,YAAY;YAAEC,MAAM;YAAU7B,MAAM;YAAQH,SAAS;YAAQiC,sBAAsB;QAAO;QAC1FD,MAAMrC,KAAK+B,MAAM,CACfnC,sBAAsB,UAAU;YAC9BQ,KAAKL,cAAcK,KAAKkB;YACxBiB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBlC,WAAWmC,YAAY,CAAC,EAAE1B,SAAS,CAAC;YACrD,GAAGZ,KAAK;YACRG;YACAG,SAASe;QACX,IACA;YAAEK,aAAa;QAAS;QAE1BrB,MAAMmB;QACNO;QACA7B,SAASyB;QACTQ,sBAAsBtC,KAAK4B,QAAQ,CAACvB,SAAS;YAC3CqC,iBAAiB,CAAC3B,YAAY,CAACmB,YAAYrB;YAC3CmB,cAAc;gBAAEC,UAAU9B,MAAM8B,QAAQ;YAAC;YACzCJ,aAAa;QACf;QACAlB;QACAL;QACAS;QACAK;QACAV;QACAW;IACF;AACF,EAAE"}

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

@@ -89,16 +89,18 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
       selectedValue,
       registeredTabs
     } = getRegisteredTabs();
-    const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
-    const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
-    if (selectedTabRect && previousSelectedTabRect && previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {
-      const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
-      const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
-      setAnimationValues({
-        offset,
-        scale
-      });
-      setLastAnimatedFrom(previousSelectedValue);
+    if (previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {
+      const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
+      const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
+      if (selectedTabRect && previousSelectedTabRect) {
+        const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
+        const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
+        setAnimationValues({
+          offset,
+          scale
+        });
+        setLastAnimatedFrom(previousSelectedValue);
+      }
     }
   } else if (lastAnimatedFrom) {
     // need to clear the last animated from so that if this tab is selected again

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

@@ -1 +1 @@
-{"version":3,"names":["React","__styles","mergeClasses","shorthands","useTabListContext_unstable","tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\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        ...shorthands.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 = value !== undefined && value !== null ? (_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/**\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    React.useEffect(()=>{\n        if (lastAnimatedFrom) {\n            setAnimationValues({\n                offset: 0,\n                scale: 1\n            });\n        }\n    }, [\n        lastAnimatedFrom\n    ]);\n    if (selected) {\n        const { previousSelectedValue , selectedValue , registeredTabs  } = getRegisteredTabs();\n        const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n        const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n        if (selectedTabRect && previousSelectedTabRect && previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {\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        }\n    } else if (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    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    state.root.style = {\n        ...rootCssVars,\n        ...state.root.style\n    };\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","__styles","mergeClasses","shorthands","useTabListContext_unstable","tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\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        ...shorthands.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 = value !== undefined && value !== null ? (_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/**\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    React.useEffect(()=>{\n        if (lastAnimatedFrom) {\n            setAnimationValues({\n                offset: 0,\n                scale: 1\n            });\n        }\n    }, [\n        lastAnimatedFrom\n    ]);\n    if (selected) {\n        const { previousSelectedValue , selectedValue , registeredTabs  } = getRegisteredTabs();\n        if (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            }\n        }\n    } else if (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    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    state.root.style = {\n        ...rootCssVars,\n        ...state.root.style\n    };\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/Tab/useTabStyles.styles.js

@@ -406,8 +406,12 @@ export const useTabStyles_unstable = state => {
     state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);
   }
   // This needs to be before state.content.className is updated
-  if (state.contentReservedSpaceClassName !== undefined) {
-    state.contentReservedSpaceClassName = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);
+  if (state.contentReservedSpace) {
+    state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);
+    // FIXME: this is a deprecated API
+    // should be removed in the next major version
+    // eslint-disable-next-line deprecation/deprecation
+    state.contentReservedSpaceClassName = state.contentReservedSpace.className;
   }
   state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);
   useTabAnimatedIndicatorStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","base","Bt984gj","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","z8tnut","z189sj","Byoj8tv","uwmqm3","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","Bv4n3vi","vqofr","B0uxbk8","Bgqb9hq","amg5m6","zkfqfm","Bkydozb","vzq8l0","Bka2azo","Br4ovkg","csmgbd","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","B3778ie","d9w3h3","Bl18szs","B4j8arr","Bsft5z2","E3zdtr","t2ki1e","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","contentReservedSpaceClassName","undefined"],"sources":["useTabStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n    root: 'fui-Tab',\n    icon: 'fui-Tab__icon',\n    content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n    content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n    filled: 'fui-Icon-filled',\n    regular: 'fui-Icon-regular'\n};\n/**\n * Styles for the root slot\n */ /* eslint-disable @typescript-eslint/naming-convention */ const useRootStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        ...shorthands.borderColor('none'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ...shorthands.borderWidth(0),\n        cursor: 'pointer',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        fontFamily: tokens.fontFamilyBase,\n        lineHeight: tokens.lineHeightBase300,\n        outlineStyle: 'none',\n        position: 'relative',\n        ...shorthands.overflow('hidden'),\n        textTransform: 'none'\n    },\n    horizontal: {\n        justifyContent: 'center'\n    },\n    vertical: {\n        justifyContent: 'start'\n    },\n    smallHorizontal: {\n        columnGap: tokens.spacingHorizontalXXS,\n        ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge)\n    },\n    smallVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalXXS,\n        ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge)\n    },\n    mediumHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge)\n    },\n    mediumVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge)\n    },\n    largeHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge)\n    },\n    largeVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge)\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        cursor: 'not-allowed'\n    },\n    selected: {\n        '& .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    }\n});\n/* eslint-enable @typescript-eslint/naming-convention */ /**\n * Focus styles for the root slot\n */ const useFocusStyles = makeStyles({\n    // Tab creates a custom focus indicator because the default focus indicator\n    // is applied using an ::after pseudo-element on the root. Since the selection\n    // indicator uses an ::after pseudo-element on the root, there is a conflict.\n    base: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor('transparent'),\n        outlineWidth: tokens.strokeWidthThick,\n        outlineColor: 'transparent',\n        outlineStyle: 'solid',\n        boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n        zIndex: 1\n    }, {\n        enableOutline: true\n    })\n});\n/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = makeStyles({\n    base: {\n        ':hover::before': {\n            backgroundColor: tokens.colorNeutralStroke1Hover,\n            ...shorthands.borderRadius(tokens.borderRadiusCircular),\n            content: '\"\"',\n            position: 'absolute'\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorNeutralStroke1Pressed,\n            ...shorthands.borderRadius(tokens.borderRadiusCircular),\n            content: '\"\"',\n            position: 'absolute'\n        },\n        '@media (forced-colors: active)': {\n            ':hover::before': {\n                backgroundColor: 'Highlight'\n            },\n            ':active::before': {\n                backgroundColor: 'Highlight'\n            }\n        }\n    },\n    disabled: {\n        ':hover::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        }\n    },\n    smallHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalXS,\n            left: 0,\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        '::after': {\n            backgroundColor: tokens.colorTransparentStroke,\n            ...shorthands.borderRadius(tokens.borderRadiusCircular),\n            content: '\"\"',\n            position: 'absolute',\n            zIndex: 1\n        }\n    },\n    selected: {\n        '::after': {\n            backgroundColor: tokens.colorCompoundBrandStroke\n        },\n        ':hover::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokeHover\n        },\n        ':active::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@media (forced-colors: active)': {\n            '::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':hover::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':active::after': {\n                backgroundColor: 'ButtonText'\n            }\n        }\n    },\n    disabled: {\n        '::after': {\n            backgroundColor: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    smallHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalXS,\n            left: '0',\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::after': {\n            bottom: '0',\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\n/**\n * Styles for the icon slot.\n */ const useIconStyles = makeStyles({\n    base: {\n        gridColumnStart: 1,\n        gridRowStart: 1,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        ...shorthands.overflow('hidden'),\n        [`& .${iconClassNames.filled}`]: {\n            display: 'none'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'inline'\n        }\n    },\n    // per design, the small and medium font sizes are the same.\n    // the size prop only affects spacing.\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    medium: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px'\n    },\n    selected: {\n        [`& .${iconClassNames.filled}`]: {\n            display: 'inline'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'none'\n        }\n    }\n});\n/**\n * Styles for the content slot (children)\n */ const useContentStyles = makeStyles({\n    base: {\n        ...typographyStyles.body1,\n        ...shorthands.overflow('hidden'),\n        // content padding is the same for medium & small, horiztonal & vertical\n        ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS)\n    },\n    selected: {\n        ...typographyStyles.body1Strong\n    },\n    large: {\n        ...typographyStyles.body2\n    },\n    largeSelected: {\n        ...typographyStyles.subtitle2\n    },\n    noIconBefore: {\n        gridColumnStart: 1,\n        gridRowStart: 1\n    },\n    iconBefore: {\n        gridColumnStart: 2,\n        gridRowStart: 1\n    },\n    placeholder: {\n        visibility: 'hidden'\n    }\n});\n/**\n * Apply styling to the Tab slots based on the state\n */ export const useTabStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const pendingIndicatorStyles = usePendingIndicatorStyles();\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const contentStyles = useContentStyles();\n    const { appearance , disabled , selected , size , vertical  } = state;\n    state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, // pending indicator (before pseudo element)\n    pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)\n    selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n    }\n    // This needs to be before state.content.className is updated\n    if (state.contentReservedSpaceClassName !== undefined) {\n        state.contentReservedSpaceClassName = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n    }\n    state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n    useTabAnimatedIndicatorStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","base","Bt984gj","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","z8tnut","z189sj","Byoj8tv","uwmqm3","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","Bv4n3vi","vqofr","B0uxbk8","Bgqb9hq","amg5m6","zkfqfm","Bkydozb","vzq8l0","Bka2azo","Br4ovkg","csmgbd","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","B3778ie","d9w3h3","Bl18szs","B4j8arr","Bsft5z2","E3zdtr","t2ki1e","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","contentReservedSpace","contentReservedSpaceClassName"],"sources":["useTabStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n    root: 'fui-Tab',\n    icon: 'fui-Tab__icon',\n    content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n    content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n    filled: 'fui-Icon-filled',\n    regular: 'fui-Icon-regular'\n};\n/**\n * Styles for the root slot\n */ /* eslint-disable @typescript-eslint/naming-convention */ const useRootStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        ...shorthands.borderColor('none'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ...shorthands.borderWidth(0),\n        cursor: 'pointer',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        fontFamily: tokens.fontFamilyBase,\n        lineHeight: tokens.lineHeightBase300,\n        outlineStyle: 'none',\n        position: 'relative',\n        ...shorthands.overflow('hidden'),\n        textTransform: 'none'\n    },\n    horizontal: {\n        justifyContent: 'center'\n    },\n    vertical: {\n        justifyContent: 'start'\n    },\n    smallHorizontal: {\n        columnGap: tokens.spacingHorizontalXXS,\n        ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge)\n    },\n    smallVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalXXS,\n        ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge)\n    },\n    mediumHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge)\n    },\n    mediumVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge)\n    },\n    largeHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge)\n    },\n    largeVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge)\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        cursor: 'not-allowed'\n    },\n    selected: {\n        '& .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    }\n});\n/* eslint-enable @typescript-eslint/naming-convention */ /**\n * Focus styles for the root slot\n */ const useFocusStyles = makeStyles({\n    // Tab creates a custom focus indicator because the default focus indicator\n    // is applied using an ::after pseudo-element on the root. Since the selection\n    // indicator uses an ::after pseudo-element on the root, there is a conflict.\n    base: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor('transparent'),\n        outlineWidth: tokens.strokeWidthThick,\n        outlineColor: 'transparent',\n        outlineStyle: 'solid',\n        boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n        zIndex: 1\n    }, {\n        enableOutline: true\n    })\n});\n/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = makeStyles({\n    base: {\n        ':hover::before': {\n            backgroundColor: tokens.colorNeutralStroke1Hover,\n            ...shorthands.borderRadius(tokens.borderRadiusCircular),\n            content: '\"\"',\n            position: 'absolute'\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorNeutralStroke1Pressed,\n            ...shorthands.borderRadius(tokens.borderRadiusCircular),\n            content: '\"\"',\n            position: 'absolute'\n        },\n        '@media (forced-colors: active)': {\n            ':hover::before': {\n                backgroundColor: 'Highlight'\n            },\n            ':active::before': {\n                backgroundColor: 'Highlight'\n            }\n        }\n    },\n    disabled: {\n        ':hover::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        }\n    },\n    smallHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalXS,\n            left: 0,\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        '::after': {\n            backgroundColor: tokens.colorTransparentStroke,\n            ...shorthands.borderRadius(tokens.borderRadiusCircular),\n            content: '\"\"',\n            position: 'absolute',\n            zIndex: 1\n        }\n    },\n    selected: {\n        '::after': {\n            backgroundColor: tokens.colorCompoundBrandStroke\n        },\n        ':hover::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokeHover\n        },\n        ':active::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@media (forced-colors: active)': {\n            '::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':hover::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':active::after': {\n                backgroundColor: 'ButtonText'\n            }\n        }\n    },\n    disabled: {\n        '::after': {\n            backgroundColor: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    smallHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalXS,\n            left: '0',\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::after': {\n            bottom: '0',\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\n/**\n * Styles for the icon slot.\n */ const useIconStyles = makeStyles({\n    base: {\n        gridColumnStart: 1,\n        gridRowStart: 1,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        ...shorthands.overflow('hidden'),\n        [`& .${iconClassNames.filled}`]: {\n            display: 'none'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'inline'\n        }\n    },\n    // per design, the small and medium font sizes are the same.\n    // the size prop only affects spacing.\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    medium: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px'\n    },\n    selected: {\n        [`& .${iconClassNames.filled}`]: {\n            display: 'inline'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'none'\n        }\n    }\n});\n/**\n * Styles for the content slot (children)\n */ const useContentStyles = makeStyles({\n    base: {\n        ...typographyStyles.body1,\n        ...shorthands.overflow('hidden'),\n        // content padding is the same for medium & small, horiztonal & vertical\n        ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS)\n    },\n    selected: {\n        ...typographyStyles.body1Strong\n    },\n    large: {\n        ...typographyStyles.body2\n    },\n    largeSelected: {\n        ...typographyStyles.subtitle2\n    },\n    noIconBefore: {\n        gridColumnStart: 1,\n        gridRowStart: 1\n    },\n    iconBefore: {\n        gridColumnStart: 2,\n        gridRowStart: 1\n    },\n    placeholder: {\n        visibility: 'hidden'\n    }\n});\n/**\n * Apply styling to the Tab slots based on the state\n */ export const useTabStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const pendingIndicatorStyles = usePendingIndicatorStyles();\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const contentStyles = useContentStyles();\n    const { appearance , disabled , selected , size , vertical  } = state;\n    state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, // pending indicator (before pseudo element)\n    pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)\n    selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n    }\n    // This needs to be before state.content.className is updated\n    if (state.contentReservedSpace) {\n        state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n        // FIXME: this is a deprecated API\n        // should be removed in the next major version\n        // eslint-disable-next-line deprecation/deprecation\n        state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n    }\n    state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n    useTabAnimatedIndicatorStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/TabList/renderTabList.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { TabListProvider } from './TabListContext';
 /**
  * Render the final JSX of TabList
  */ export const renderTabList_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(TabListProvider, {
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(TabListProvider, {
         value: contextValues.tabList
     }, state.root.children));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TabListSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","TabListProvider","renderTabList_unstable","state","contextValues","slots","slotProps","root","value","tabList","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC,gBAAwC;IAClG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA2BG;IAExD,qBACE,AAdJ,cAcKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAfN,cAeON;QAAgBO,OAAOJ,cAAcK,OAAO;OAAGN,MAAMI,IAAI,CAACG,QAAQ;AAGzE,EAAE"}
+{"version":3,"sources":["renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n  assertSlots<TabListSlots>(state);\n\n  return (\n    <state.root>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","TabListProvider","renderTabList_unstable","state","contextValues","root","value","tabList","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC,gBAAwC;IAClGJ,YAA0BG;IAE1B,qBACE,AAdJ,cAcKA,MAAME,IAAI,sBACT,AAfN,cAeOJ;QAAgBK,OAAOF,cAAcG,OAAO;OAAGJ,MAAME,IAAI,CAACG,QAAQ;AAGzE,EAAE"}

package/lib/components/TabList/useTabList.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { getNativeElementProps, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render TabList.
  *
@@ -56,12 +56,14 @@ import { getNativeElementProps, useControllableState, useEventCallback, useMerge
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref: useMergedRefs(ref, innerRef),
             role: 'tablist',
             'aria-orientation': vertical ? 'vertical' : 'horizontal',
             ...focusAttributes,
             ...props
+        }), {
+            elementType: 'div'
         }),
         appearance,
         reserveSelectedTabSpace,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getNativeElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\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    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: 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    registeredTabs.current[JSON.stringify(data.value)] = 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: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tablist',\n      'aria-orientation': vertical ? 'vertical' : 'horizontal',\n      ...focusAttributes,\n      ...props,\n    }),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","getNativeElementProps","useControllableState","useEventCallback","useMergedRefs","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,qBAAqB,EACrBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC,MAA8C;IACrG,MAAM,EACJC,YAAa,cAAa,EAC1BC,yBAA0B,IAAI,CAAA,EAC9BC,UAAW,KAAK,CAAA,EAChBC,YAAW,EACXC,MAAO,SAAQ,EACfC,UAAW,KAAK,CAAA,EACjB,GAAGP;IAEJ,MAAMQ,WAAWf,MAAMgB,MAAM,CAAc,IAAI;IAE/C,MAAMC,kBAAkBhB,wBAAwB;QAC9CiB,UAAU,IAAI;QACdC,MAAML,WAAW,aAAa,YAAY;QAC1CM,iBAAiB,IAAI;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGnB,qBAAqB;QAC7DoB,OAAOhB,MAAMc,aAAa;QAC1BG,cAAcjB,MAAMkB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB5B,MAAMgB,MAAM,CAAuBW;IAChE,MAAME,wBAAwB7B,MAAMgB,MAAM,CAAuBW;IAEjE3B,MAAM8B,SAAS,CAAC,IAAM;QACpBD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW5B,iBAAiB,CAAC6B,OAAuBC,OAAwB;QAChFZ,iBAAiBY,KAAKC,KAAK;QAC3BvB,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAcqB,OAAOC;IACvB;IAEA,MAAME,iBAAiBpC,MAAMgB,MAAM,CAAkC,CAAC;IAEtE,MAAMqB,aAAajC,iBAAiB,CAAC8B,OAA0B;QAC7DE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACvD;IAEA,MAAMM,eAAepC,iBAAiB,CAAC8B,OAA0B;QAC/D,OAAOE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMM,oBAAoBzC,MAAM0C,WAAW,CAAC,IAAM;QAChD,OAAO;YACLrB,eAAeO,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDK,gBAAgBA,eAAeL,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLY,YAAY;YACVC,MAAM;QACR;QACAA,MAAM1C,sBAAsB,OAAO;YACjCM,KAAKH,cAAcG,KAAKO;YACxB8B,MAAM;YACN,oBAAoB/B,WAAW,aAAa,YAAY;YACxD,GAAGG,eAAe;YAClB,GAAGV,KAAK;QACV;QACAE;QACAC;QACAC;QACAU;QACAR;QACAC;QACAuB;QACAG;QACAR;QACAS;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getNativeElementProps,\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    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: 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    registeredTabs.current[JSON.stringify(data.value)] = 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      getNativeElementProps('div', {\n        ref: useMergedRefs(ref, innerRef),\n        role: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...focusAttributes,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","getNativeElementProps","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,qBAAqB,EACrBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC,MAA8C;IACrG,MAAM,EACJC,YAAa,cAAa,EAC1BC,yBAA0B,IAAI,CAAA,EAC9BC,UAAW,KAAK,CAAA,EAChBC,YAAW,EACXC,MAAO,SAAQ,EACfC,UAAW,KAAK,CAAA,EACjB,GAAGP;IAEJ,MAAMQ,WAAWhB,MAAMiB,MAAM,CAAc,IAAI;IAE/C,MAAMC,kBAAkBjB,wBAAwB;QAC9CkB,UAAU,IAAI;QACdC,MAAML,WAAW,aAAa,YAAY;QAC1CM,iBAAiB,IAAI;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGpB,qBAAqB;QAC7DqB,OAAOhB,MAAMc,aAAa;QAC1BG,cAAcjB,MAAMkB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB7B,MAAMiB,MAAM,CAAuBW;IAChE,MAAME,wBAAwB9B,MAAMiB,MAAM,CAAuBW;IAEjE5B,MAAM+B,SAAS,CAAC,IAAM;QACpBD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW7B,iBAAiB,CAAC8B,OAAuBC,OAAwB;QAChFZ,iBAAiBY,KAAKC,KAAK;QAC3BvB,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAcqB,OAAOC;IACvB;IAEA,MAAME,iBAAiBrC,MAAMiB,MAAM,CAAkC,CAAC;IAEtE,MAAMqB,aAAalC,iBAAiB,CAAC+B,OAA0B;QAC7DE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACvD;IAEA,MAAMM,eAAerC,iBAAiB,CAAC+B,OAA0B;QAC/D,OAAOE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMM,oBAAoB1C,MAAM2C,WAAW,CAAC,IAAM;QAChD,OAAO;YACLrB,eAAeO,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDK,gBAAgBA,eAAeL,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvC,KAAKwC,MAAM,CACf5C,sBAAsB,OAAO;YAC3BO,KAAKJ,cAAcI,KAAKO;YACxB+B,MAAM;YACN,oBAAoBhC,WAAW,aAAa,YAAY;YACxD,GAAGG,eAAe;YAClB,GAAGV,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;QAEvBtC;QACAC;QACAC;QACAU;QACAR;QACAC;QACAuB;QACAG;QACAR;QACAS;IACF;AACF,EAAE"}

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

@@ -9,9 +9,6 @@ Object.defineProperty(exports, "renderTab_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderTab_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.icon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.icon, slotProps.icon), !state.iconOnly && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.content, slotProps.content), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.content, {
-        ...slotProps.content,
-        className: state.contentReservedSpaceClassName
-    }));
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.icon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.icon, null), !state.iconOnly && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.content, null), state.contentReservedSpace && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.contentReservedSpace, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTab.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Tab\n */ export const renderTab_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), !state.iconOnly && /*#__PURE__*/ createElement(slots.content, slotProps.content), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/ createElement(slots.content, {\n        ...slotProps.content,\n        className: state.contentReservedSpaceClassName\n    }));\n};\n"],"names":["renderTab_unstable","state","slots","slotProps","getSlotsNext","createElement","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,qBAAqB,CAACC,QAAQ;IAC3C,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,IAAI,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,GAAG,CAACN,MAAMO,QAAQ,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMO,OAAO,EAAEN,UAAUM,OAAO,GAAG,CAACR,MAAMS,QAAQ,IAAI,CAACT,MAAMO,QAAQ,IAAIP,MAAMU,6BAA6B,KAAKC,aAAa,WAAW,GAAGP,IAAAA,8BAAa,EAACH,MAAMO,OAAO,EAAE;QAC1V,GAAGN,UAAUM,OAAO;QACpBI,WAAWZ,MAAMU,6BAA6B;IAClD;AACJ"}
+{"version":3,"sources":["renderTab.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Tab\n */ export const renderTab_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, state.icon && /*#__PURE__*/ createElement(state.icon, null), !state.iconOnly && /*#__PURE__*/ createElement(state.content, null), state.contentReservedSpace && /*#__PURE__*/ createElement(state.contentReservedSpace, null));\n};\n"],"names":["renderTab_unstable","state","assertSlots","createElement","root","icon","iconOnly","content","contentReservedSpace"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,qBAAqB,CAACC,QAAQ;IAC3CC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI,EAAEH,MAAMI,IAAI,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACF,MAAMI,IAAI,EAAE,IAAI,GAAG,CAACJ,MAAMK,QAAQ,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACF,MAAMM,OAAO,EAAE,IAAI,GAAGN,MAAMO,oBAAoB,IAAI,WAAW,GAAGL,IAAAA,8BAAa,EAACF,MAAMO,oBAAoB,EAAE,IAAI;AACrR"}

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

@@ -43,20 +43,24 @@ const useTab_unstable = (props, ref)=>{
         innerRef,
         value
     ]);
-    const iconShorthand = (0, _reactUtilities.resolveShorthand)(icon);
-    const contentShorthand = (0, _reactUtilities.resolveShorthand)(content, {
-        required: true,
+    const iconSlot = _reactUtilities.slot.optional(icon, {
+        elementType: 'span'
+    });
+    const contentSlot = _reactUtilities.slot.always(content, {
         defaultProps: {
             children: props.children
-        }
+        },
+        elementType: 'span'
     });
+    const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
     return {
         components: {
             root: 'button',
             icon: 'span',
-            content: 'span'
+            content: 'span',
+            contentReservedSpace: 'span'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('button', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('button', {
             ref: (0, _reactUtilities.useMergedRefs)(ref, innerRef),
             role: 'tab',
             type: 'button',
@@ -66,12 +70,20 @@ const useTab_unstable = (props, ref)=>{
             ...props,
             disabled,
             onClick: onTabClick
+        }), {
+            elementType: 'button'
+        }),
+        icon: iconSlot,
+        iconOnly,
+        content: contentSlot,
+        contentReservedSpace: _reactUtilities.slot.optional(content, {
+            renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,
+            defaultProps: {
+                children: props.children
+            },
+            elementType: 'span'
         }),
-        icon: iconShorthand,
-        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
-        content: contentShorthand,
         appearance,
-        contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,
         disabled,
         selected,
         size,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\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 */ export const useTab_unstable = (props, ref)=>{\n    const { content , disabled: tabDisabled = false , icon , onClick , value  } = props;\n    const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);\n    const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);\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    const innerRef = React.useRef(null);\n    const onTabClick = useEventCallback(mergeCallbacks(onClick, (event)=>onSelect(event, {\n            value\n        })));\n    React.useEffect(()=>{\n        onRegister({\n            value,\n            ref: innerRef\n        });\n        return ()=>{\n            onUnregister({\n                value,\n                ref: innerRef\n            });\n        };\n    }, [\n        onRegister,\n        onUnregister,\n        innerRef,\n        value\n    ]);\n    const iconShorthand = resolveShorthand(icon);\n    const contentShorthand = resolveShorthand(content, {\n        required: true,\n        defaultProps: {\n            children: props.children\n        }\n    });\n    return {\n        components: {\n            root: 'button',\n            icon: 'span',\n            content: 'span'\n        },\n        root: getNativeElementProps('button', {\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}`,\n            ...props,\n            disabled,\n            onClick: onTabClick\n        }),\n        icon: iconShorthand,\n        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),\n        content: contentShorthand,\n        appearance,\n        contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n        disabled,\n        selected,\n        size,\n        value,\n        vertical\n    };\n};\n"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onTabClick","useEventCallback","mergeCallbacks","event","useEffect","iconShorthand","resolveShorthand","contentShorthand","required","defaultProps","children","components","root","getNativeElementProps","useMergedRefs","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;gCACkF;gCAC9D;AAShC,MAAMA,kBAAkB,CAACC,OAAOC,MAAM;IAC7C,MAAM,EAAEC,QAAO,EAAGC,UAAUC,cAAc,KAAK,CAAA,EAAGC,KAAI,EAAGC,QAAO,EAAGC,MAAK,EAAG,GAAGP;IAC9E,MAAMQ,aAAaC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACnE,MAAMG,0BAA0BF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIP,QAAQ;IACnE,MAAMU,WAAWJ,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAII,aAAa,KAAKP;IACzE,MAAMQ,aAAaN,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIK,UAAU;IACnE,MAAMC,eAAeP,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIM,YAAY;IACvE,MAAMC,WAAWR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOT,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIQ,IAAI;IACvD,MAAMC,WAAWV,IAAAA,0CAA0B,EAAC,CAACC,MAAM,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMhB,WAAWS,gBAAgBR;IACjC,MAAMgB,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,aAAaC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACnB,SAAS,CAACoB,QAAQT,SAASS,OAAO;YAC7EnB;QACJ;IACJc,OAAMM,SAAS,CAAC,IAAI;QAChBZ,WAAW;YACPR;YACAN,KAAKmB;QACT;QACA,OAAO,IAAI;YACPJ,aAAa;gBACTT;gBACAN,KAAKmB;YACT;QACJ;IACJ,GAAG;QACCL;QACAC;QACAI;QACAb;KACH;IACD,MAAMqB,gBAAgBC,IAAAA,gCAAgB,EAACxB;IACvC,MAAMyB,mBAAmBD,IAAAA,gCAAgB,EAAC3B,SAAS;QAC/C6B,UAAU,IAAI;QACdC,cAAc;YACVC,UAAUjC,MAAMiC,QAAQ;QAC5B;IACJ;IACA,OAAO;QACHC,YAAY;YACRC,MAAM;YACN9B,MAAM;YACNH,SAAS;QACb;QACAiC,MAAMC,IAAAA,qCAAqB,EAAC,UAAU;YAClCnC,KAAKoC,IAAAA,6BAAa,EAACpC,KAAKmB;YACxBkB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBpC,WAAWqC,YAAY,CAAC,EAAE3B,SAAS,CAAC;YACrD,GAAGb,KAAK;YACRG;YACAG,SAASiB;QACb;QACAlB,MAAMuB;QACNa,UAAUC,QAAQ,AAACd,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcK,QAAQ,AAAD,KAAM,CAACH,iBAAiBG,QAAQ;QACtI/B,SAAS4B;QACTtB;QACAmC,+BAA+BhC,0BAA0B,KAAK6B,SAAS;QACvErC;QACAU;QACAK;QACAX;QACAY;IACJ;AACJ"}
+{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\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 */ export const useTab_unstable = (props, ref)=>{\n    const { content , disabled: tabDisabled = false , icon , onClick , value  } = props;\n    const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);\n    const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);\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    const innerRef = React.useRef(null);\n    const onTabClick = useEventCallback(mergeCallbacks(onClick, (event)=>onSelect(event, {\n            value\n        })));\n    React.useEffect(()=>{\n        onRegister({\n            value,\n            ref: innerRef\n        });\n        return ()=>{\n            onUnregister({\n                value,\n                ref: innerRef\n            });\n        };\n    }, [\n        onRegister,\n        onUnregister,\n        innerRef,\n        value\n    ]);\n    const iconSlot = slot.optional(icon, {\n        elementType: 'span'\n    });\n    const contentSlot = slot.always(content, {\n        defaultProps: {\n            children: props.children\n        },\n        elementType: 'span'\n    });\n    const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);\n    return {\n        components: {\n            root: 'button',\n            icon: 'span',\n            content: 'span',\n            contentReservedSpace: 'span'\n        },\n        root: slot.always(getNativeElementProps('button', {\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}`,\n            ...props,\n            disabled,\n            onClick: onTabClick\n        }), {\n            elementType: 'button'\n        }),\n        icon: iconSlot,\n        iconOnly,\n        content: contentSlot,\n        contentReservedSpace: slot.optional(content, {\n            renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n            defaultProps: {\n                children: props.children\n            },\n            elementType: 'span'\n        }),\n        appearance,\n        disabled,\n        selected,\n        size,\n        value,\n        vertical\n    };\n};\n"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onTabClick","useEventCallback","mergeCallbacks","event","useEffect","iconSlot","slot","optional","elementType","contentSlot","always","defaultProps","children","iconOnly","Boolean","components","root","contentReservedSpace","getNativeElementProps","useMergedRefs","role","type","undefined","renderByDefault"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;gCACsE;gCAClD;AAShC,MAAMA,kBAAkB,CAACC,OAAOC,MAAM;IAC7C,MAAM,EAAEC,QAAO,EAAGC,UAAUC,cAAc,KAAK,CAAA,EAAGC,KAAI,EAAGC,QAAO,EAAGC,MAAK,EAAG,GAAGP;IAC9E,MAAMQ,aAAaC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACnE,MAAMG,0BAA0BF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIP,QAAQ;IACnE,MAAMU,WAAWJ,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAII,aAAa,KAAKP;IACzE,MAAMQ,aAAaN,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIK,UAAU;IACnE,MAAMC,eAAeP,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIM,YAAY;IACvE,MAAMC,WAAWR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOT,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIQ,IAAI;IACvD,MAAMC,WAAWV,IAAAA,0CAA0B,EAAC,CAACC,MAAM,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMhB,WAAWS,gBAAgBR;IACjC,MAAMgB,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,aAAaC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACnB,SAAS,CAACoB,QAAQT,SAASS,OAAO;YAC7EnB;QACJ;IACJc,OAAMM,SAAS,CAAC,IAAI;QAChBZ,WAAW;YACPR;YACAN,KAAKmB;QACT;QACA,OAAO,IAAI;YACPJ,aAAa;gBACTT;gBACAN,KAAKmB;YACT;QACJ;IACJ,GAAG;QACCL;QACAC;QACAI;QACAb;KACH;IACD,MAAMqB,WAAWC,oBAAI,CAACC,QAAQ,CAACzB,MAAM;QACjC0B,aAAa;IACjB;IACA,MAAMC,cAAcH,oBAAI,CAACI,MAAM,CAAC/B,SAAS;QACrCgC,cAAc;YACVC,UAAUnC,MAAMmC,QAAQ;QAC5B;QACAJ,aAAa;IACjB;IACA,MAAMK,WAAWC,QAAQ,AAACT,CAAAA,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASO,QAAQ,AAAD,KAAM,CAACH,YAAYG,QAAQ;IACzH,OAAO;QACHG,YAAY;YACRC,MAAM;YACNlC,MAAM;YACNH,SAAS;YACTsC,sBAAsB;QAC1B;QACAD,MAAMV,oBAAI,CAACI,MAAM,CAACQ,IAAAA,qCAAqB,EAAC,UAAU;YAC9CxC,KAAKyC,IAAAA,6BAAa,EAACzC,KAAKmB;YACxBuB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBzC,WAAW0C,YAAY,CAAC,EAAEhC,SAAS,CAAC;YACrD,GAAGb,KAAK;YACRG;YACAG,SAASiB;QACb,IAAI;YACAQ,aAAa;QACjB;QACA1B,MAAMuB;QACNQ;QACAlC,SAAS8B;QACTQ,sBAAsBX,oBAAI,CAACC,QAAQ,CAAC5B,SAAS;YACzC4C,iBAAiB,CAACjC,YAAY,CAACuB,YAAYzB;YAC3CuB,cAAc;gBACVC,UAAUnC,MAAMmC,QAAQ;YAC5B;YACAJ,aAAa;QACjB;QACAvB;QACAL;QACAU;QACAK;QACAX;QACAY;IACJ;AACJ"}

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.js

@@ -111,16 +111,18 @@ const useTabAnimatedIndicatorStyles_unstable = (state)=>{
     ]);
     if (selected) {
         const { previousSelectedValue , selectedValue , registeredTabs  } = getRegisteredTabs();
-        const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
-        const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
-        if (selectedTabRect && previousSelectedTabRect && previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {
-            const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
-            const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
-            setAnimationValues({
-                offset,
-                scale
-            });
-            setLastAnimatedFrom(previousSelectedValue);
+        if (previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {
+            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
+            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
+            if (selectedTabRect && previousSelectedTabRect) {
+                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
+                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
+                setAnimationValues({
+                    offset,
+                    scale
+                });
+                setLastAnimatedFrom(previousSelectedValue);
+            }
         }
     } else if (lastAnimatedFrom) {
         // need to clear the last animated from so that if this tab is selected again

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

@@ -1 +1 @@
-{"version":3,"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\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 = /*#__PURE__*/__styles({\n  base: {\n    B68tc82: \"f1mtd64y\",\n    Bmxbyg5: \"f1y7q3j9\"\n  },\n  animated: {\n    Ba2ppi3: \"fhwpy7i\",\n    F2fol1: \"f6zz20j\",\n    B1dyfl9: \"f1ai4sc1\",\n    B0vmy72: \"f9qxlq5\",\n    u9bimw: \"f1aql376\"\n  },\n  horizontal: {\n    sjv3b2: [\"fug4aj8\", \"f1i5xzg7\"],\n    b1kco5: \"f1q7ujh\"\n  },\n  vertical: {\n    sjv3b2: \"f1hqboyk\",\n    b1kco5: \"f1dxupa6\"\n  }\n}, {\n  d: [\".f1mtd64y{overflow-x:visible;}\", \".f1y7q3j9{overflow-y:visible;}\", \".fhwpy7i::after{transition-property:transform;}\", \".f6zz20j::after{transition-duration:var(--durationSlow);}\", \".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}\", \".fug4aj8::after{transform-origin:left;}\", \".f1i5xzg7::after{transform-origin:right;}\", \".f1q7ujh::after{transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}\", \".f1hqboyk::after{transform-origin:top;}\", \".f1dxupa6::after{transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}\"],\n  m: [[\"@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}\", {\n    m: \"(prefers-reduced-motion: reduce)\"\n  }], [\"@media (prefers-reduced-motion: reduce){.f1aql376::after{transition-duration:0.01ms;}}\", {\n    m: \"(prefers-reduced-motion: reduce)\"\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 = value !== undefined && value !== null ? (_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/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = state => {\n  const {\n    disabled,\n    selected,\n    vertical\n  } = 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  React.useEffect(() => {\n    if (lastAnimatedFrom) {\n      setAnimationValues({\n        offset: 0,\n        scale: 1\n      });\n    }\n  }, [lastAnimatedFrom]);\n  if (selected) {\n    const {\n      previousSelectedValue,\n      selectedValue,\n      registeredTabs\n    } = getRegisteredTabs();\n    const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n    const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n    if (selectedTabRect && previousSelectedTabRect && previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {\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    }\n  } else if (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  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  state.root.style = {\n    ...rootCssVars,\n    ...state.root.style\n  };\n  return state;\n};\n//# sourceMappingURL=useTabAnimatedIndicator.styles.js.map"],"names":["useTabAnimatedIndicatorStyles_unstable","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","__styles","base","B68tc82","Bmxbyg5","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","JSON","stringify","ref","current","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","React","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","useTabListContext_unstable","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","mergeClasses","rootCssVars","style"],"mappings":"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"}
+{"version":3,"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\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 = /*#__PURE__*/__styles({\n  base: {\n    B68tc82: \"f1mtd64y\",\n    Bmxbyg5: \"f1y7q3j9\"\n  },\n  animated: {\n    Ba2ppi3: \"fhwpy7i\",\n    F2fol1: \"f6zz20j\",\n    B1dyfl9: \"f1ai4sc1\",\n    B0vmy72: \"f9qxlq5\",\n    u9bimw: \"f1aql376\"\n  },\n  horizontal: {\n    sjv3b2: [\"fug4aj8\", \"f1i5xzg7\"],\n    b1kco5: \"f1q7ujh\"\n  },\n  vertical: {\n    sjv3b2: \"f1hqboyk\",\n    b1kco5: \"f1dxupa6\"\n  }\n}, {\n  d: [\".f1mtd64y{overflow-x:visible;}\", \".f1y7q3j9{overflow-y:visible;}\", \".fhwpy7i::after{transition-property:transform;}\", \".f6zz20j::after{transition-duration:var(--durationSlow);}\", \".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}\", \".fug4aj8::after{transform-origin:left;}\", \".f1i5xzg7::after{transform-origin:right;}\", \".f1q7ujh::after{transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}\", \".f1hqboyk::after{transform-origin:top;}\", \".f1dxupa6::after{transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}\"],\n  m: [[\"@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}\", {\n    m: \"(prefers-reduced-motion: reduce)\"\n  }], [\"@media (prefers-reduced-motion: reduce){.f1aql376::after{transition-duration:0.01ms;}}\", {\n    m: \"(prefers-reduced-motion: reduce)\"\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 = value !== undefined && value !== null ? (_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/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = state => {\n  const {\n    disabled,\n    selected,\n    vertical\n  } = 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  React.useEffect(() => {\n    if (lastAnimatedFrom) {\n      setAnimationValues({\n        offset: 0,\n        scale: 1\n      });\n    }\n  }, [lastAnimatedFrom]);\n  if (selected) {\n    const {\n      previousSelectedValue,\n      selectedValue,\n      registeredTabs\n    } = getRegisteredTabs();\n    if (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      }\n    }\n  } else if (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  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  state.root.style = {\n    ...rootCssVars,\n    ...state.root.style\n  };\n  return state;\n};\n//# sourceMappingURL=useTabAnimatedIndicator.styles.js.map"],"names":["useTabAnimatedIndicatorStyles_unstable","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","__styles","base","B68tc82","Bmxbyg5","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","JSON","stringify","ref","current","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","React","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","useTabListContext_unstable","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","mergeClasses","rootCssVars","style"],"mappings":"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"}

package/lib-commonjs/components/Tab/useTabStyles.styles.js

@@ -769,8 +769,12 @@ const useTabStyles_unstable = (state)=>{
         state.icon.className = (0, _react.mergeClasses)(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);
     }
     // This needs to be before state.content.className is updated
-    if (state.contentReservedSpaceClassName !== undefined) {
-        state.contentReservedSpaceClassName = (0, _react.mergeClasses)(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);
+    if (state.contentReservedSpace) {
+        state.contentReservedSpace.className = (0, _react.mergeClasses)(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);
+        // FIXME: this is a deprecated API
+        // should be removed in the next major version
+        // eslint-disable-next-line deprecation/deprecation
+        state.contentReservedSpaceClassName = state.contentReservedSpace.className;
     }
     state.content.className = (0, _react.mergeClasses)(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);
     (0, _useTabAnimatedIndicatorStyles.useTabAnimatedIndicatorStyles_unstable)(state);

package/lib-commonjs/components/Tab/useTabStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTabStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n  root: 'fui-Tab',\n  icon: 'fui-Tab__icon',\n  content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n  content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n  filled: 'fui-Icon-filled',\n  regular: 'fui-Icon-regular'\n};\n/**\n * Styles for the root slot\n */ /* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    Bt984gj: \"f122n59\",\n    g2u3we: \"fwhevhj\",\n    h3c5rm: [\"f61n433\", \"f1q8l70w\"],\n    B9xav0g: \"fv1dfc8\",\n    zhjwy3: [\"f1q8l70w\", \"f61n433\"],\n    Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n    Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n    B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n    Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n    B4j52fo: \"fre7gi1\",\n    Bekrc4i: [\"f1358rze\", \"f1rvrf73\"],\n    Bn0qgzm: \"fqdk4by\",\n    ibv6hh: [\"f1rvrf73\", \"f1358rze\"],\n    Bceei9c: \"f1k6fduh\",\n    mc9l5x: \"f13qh94s\",\n    Bnnss6s: \"fi64zpg\",\n    Bxotwcr: \"f1u07yai\",\n    Budl1dq: \"frn2hmy\",\n    wkccdc: \"f1olsevy\",\n    Bahqtrf: \"fk6fouc\",\n    Bg96gwp: \"f1i3iumi\",\n    oeaueh: \"f1s6fcnf\",\n    qhf8xq: \"f10pi13n\",\n    B68tc82: \"f1p9o1ba\",\n    Bmxbyg5: \"f1sil6mw\",\n    B9bfxx9: \"f1cxpek8\"\n  },\n  horizontal: {\n    Brf1p80: \"f4d9j23\"\n  },\n  vertical: {\n    Brf1p80: \"f1s9ku6b\"\n  },\n  smallHorizontal: {\n    i8kkvl: \"f14mj54c\",\n    z8tnut: \"fp2oml8\",\n    z189sj: [\"fdw0yi8\", \"fk8j09s\"],\n    Byoj8tv: \"f1tdddsa\",\n    uwmqm3: [\"fk8j09s\", \"fdw0yi8\"]\n  },\n  smallVertical: {\n    i8kkvl: \"f14mj54c\",\n    z8tnut: \"fclwglc\",\n    z189sj: [\"fdw0yi8\", \"fk8j09s\"],\n    Byoj8tv: \"fywfov9\",\n    uwmqm3: [\"fk8j09s\", \"fdw0yi8\"]\n  },\n  mediumHorizontal: {\n    i8kkvl: \"f1rjii52\",\n    z8tnut: \"f5yzyt\",\n    z189sj: [\"f11gcy0p\", \"f1ng84yb\"],\n    Byoj8tv: \"fx3omr\",\n    uwmqm3: [\"f1ng84yb\", \"f11gcy0p\"]\n  },\n  mediumVertical: {\n    i8kkvl: \"f1rjii52\",\n    z8tnut: \"fp2oml8\",\n    z189sj: [\"f11gcy0p\", \"f1ng84yb\"],\n    Byoj8tv: \"f1tdddsa\",\n    uwmqm3: [\"f1ng84yb\", \"f11gcy0p\"]\n  },\n  largeHorizontal: {\n    i8kkvl: \"f1rjii52\",\n    z8tnut: \"fikn0iw\",\n    z189sj: [\"f11gcy0p\", \"f1ng84yb\"],\n    Byoj8tv: \"fdxej3c\",\n    uwmqm3: [\"f1ng84yb\", \"f11gcy0p\"]\n  },\n  largeVertical: {\n    i8kkvl: \"f1rjii52\",\n    z8tnut: \"f1kwiid1\",\n    z189sj: [\"f11gcy0p\", \"f1ng84yb\"],\n    Byoj8tv: \"f5b47ha\",\n    uwmqm3: [\"f1ng84yb\", \"f11gcy0p\"]\n  },\n  transparent: {\n    De3pzq: \"f1c21dwh\",\n    Jwef8y: \"fjxutwb\",\n    ecr2s2: \"fophhak\",\n    Bptxc3x: \"fmmjozx\",\n    B076xvk: \"f1mfqf41\",\n    q9r9w5: \"f10aiid4\",\n    cl4aha: \"fpkze5g\",\n    Bk452zc: \"f149wc3x\",\n    a4hkcw: \"fjioou7\"\n  },\n  subtle: {\n    De3pzq: \"fhovq9v\",\n    Jwef8y: \"f1t94bn6\",\n    ecr2s2: \"f1wfn5kd\",\n    Bptxc3x: \"fmmjozx\",\n    B076xvk: \"f1mfqf41\",\n    q9r9w5: \"f10aiid4\",\n    cl4aha: \"fpkze5g\",\n    Bk452zc: \"f149wc3x\",\n    a4hkcw: \"fjioou7\"\n  },\n  disabled: {\n    De3pzq: \"f1c21dwh\",\n    Bptxc3x: \"fato7r6\",\n    cl4aha: \"fao1bnu\",\n    Bceei9c: \"fdrzuqr\"\n  },\n  selected: {\n    Bptxc3x: \"f1cadz5z\",\n    B076xvk: \"f1ck17l\",\n    q9r9w5: \"f42ak0g\",\n    cl4aha: \"ffplhdr\",\n    Bk452zc: \"ffth601\",\n    a4hkcw: \"fhklyu5\"\n  }\n}, {\n  d: [\".f122n59{align-items:center;}\", \".fwhevhj{border-top-color:none;}\", \".f61n433{border-right-color:none;}\", \".f1q8l70w{border-left-color:none;}\", \".fv1dfc8{border-bottom-color:none;}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".fre7gi1{border-top-width:0;}\", \".f1358rze{border-right-width:0;}\", \".f1rvrf73{border-left-width:0;}\", \".fqdk4by{border-bottom-width:0;}\", \".f1k6fduh{cursor:pointer;}\", \".f13qh94s{display:grid;}\", \".fi64zpg{flex-shrink:0;}\", \".f1u07yai{grid-auto-flow:column;}\", \".frn2hmy{grid-template-columns:auto;}\", \".f1olsevy{grid-template-rows:auto;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".f1s6fcnf{outline-style:none;}\", \".f10pi13n{position:relative;}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".f1cxpek8{text-transform:none;}\", \".f4d9j23{justify-content:center;}\", \".f1s9ku6b{justify-content:start;}\", \".f14mj54c{column-gap:var(--spacingHorizontalXXS);}\", \".fp2oml8{padding-top:var(--spacingVerticalSNudge);}\", \".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}\", \".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}\", \".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}\", \".fclwglc{padding-top:var(--spacingVerticalXXS);}\", \".fywfov9{padding-bottom:var(--spacingVerticalXXS);}\", \".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}\", \".f5yzyt{padding-top:var(--spacingVerticalM);}\", \".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}\", \".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}\", \".fx3omr{padding-bottom:var(--spacingVerticalM);}\", \".fikn0iw{padding-top:var(--spacingVerticalL);}\", \".fdxej3c{padding-bottom:var(--spacingVerticalL);}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}\", \".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}\", \".fhovq9v{background-color:var(--colorSubtleBackground);}\", \".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}\", \".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}\", \".fdrzuqr{cursor:not-allowed;}\", \".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}\", \".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}\"],\n  h: [\".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}\", \".f1mfqf41:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}\", \".f149wc3x:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}\", \".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".f1ck17l:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}\", \".ffth601:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}\"],\n  a: [\".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}\", \".f10aiid4:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}\", \".fjioou7:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}\", \".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f42ak0g:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}\", \".fhklyu5:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}\"]\n});\n/* eslint-enable @typescript-eslint/naming-convention */ /**\n                                                         * Focus styles for the root slot\n                                                         */\nconst useFocusStyles = /*#__PURE__*/__styles({\n  base: {\n    B8q5s1w: \"f8hki3x\",\n    Bci5o5g: [\"f1d2448m\", \"ffh67wi\"],\n    n8qw10: \"f1bjia2o\",\n    Bdrgwmp: [\"ffh67wi\", \"f1d2448m\"],\n    Bn4voq9: \"f1p7hgxw\",\n    Bfpq7zp: \"f1way5bb\",\n    g9k6zt: \"f9znhxp\",\n    j6ew2k: [\"fqa318h\", \"fqa318h\"],\n    Bhxq17a: \"f1vjpng2\"\n  }\n}, {\n  d: [\".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}\", \".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}\", \".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}\", \".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}\", \".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}\", \".f1way5bb[data-fui-focus-visible]{outline-color:transparent;}\", \".f9znhxp[data-fui-focus-visible]{outline-style:solid;}\", \".fqa318h[data-fui-focus-visible]{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}\", \".f1vjpng2[data-fui-focus-visible]{z-index:1;}\"]\n});\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = /*#__PURE__*/__styles({\n  base: {\n    az7l2e: \"fhw179n\",\n    Bv4n3vi: [\"f10y1uxy\", \"f6aiuy0\"],\n    vqofr: [\"f6aiuy0\", \"f10y1uxy\"],\n    B0uxbk8: [\"f1kfpfnu\", \"f1dx5wco\"],\n    Bgqb9hq: [\"f1dx5wco\", \"f1kfpfnu\"],\n    amg5m6: \"f1kmhr4c\",\n    zkfqfm: \"fl1ydde\",\n    Bkydozb: \"f1y7maxz\",\n    vzq8l0: [\"f105swax\", \"fscdmel\"],\n    Bka2azo: [\"fscdmel\", \"f105swax\"],\n    Br4ovkg: [\"f1tkcw1w\", \"f1u11x8o\"],\n    csmgbd: [\"f1u11x8o\", \"f1tkcw1w\"],\n    y36c18: \"f16cxu0\",\n    B1ctymy: \"f1nwgacf\",\n    Bgvrrv0: \"f15ovonk\",\n    ddr6p5: \"fvje46l\"\n  },\n  disabled: {\n    az7l2e: \"f1ut20fw\",\n    Bkydozb: \"fhrzcfn\"\n  },\n  smallHorizontal: {\n    lawp4y: \"fchca7p\",\n    Baz25je: \"f1r53b5e\",\n    Fbdkly: [\"f1s6rxz5\", \"fo35v8s\"],\n    mdwyqc: [\"fo35v8s\", \"f1s6rxz5\"]\n  },\n  smallVertical: {\n    lawp4y: \"fze4zud\",\n    Fbdkly: [\"f1fzr1x6\", \"f1f351id\"],\n    Bciustq: \"fdp32p8\",\n    Ccq8qp: \"f1aij3q\"\n  },\n  mediumHorizontal: {\n    lawp4y: \"fchca7p\",\n    Baz25je: \"f1s2r9ax\",\n    Fbdkly: [\"f1o0nnkk\", \"fxb7rol\"],\n    mdwyqc: [\"fxb7rol\", \"f1o0nnkk\"]\n  },\n  mediumVertical: {\n    lawp4y: \"f17jracn\",\n    Fbdkly: [\"f1fzr1x6\", \"f1f351id\"],\n    Bciustq: \"f117lcb2\",\n    Ccq8qp: \"f1aij3q\"\n  },\n  largeHorizontal: {\n    lawp4y: \"fchca7p\",\n    Baz25je: \"f1s2r9ax\",\n    Fbdkly: [\"f1o0nnkk\", \"fxb7rol\"],\n    mdwyqc: [\"fxb7rol\", \"f1o0nnkk\"]\n  },\n  largeVertical: {\n    lawp4y: \"fel9d3z\",\n    Fbdkly: [\"f1fzr1x6\", \"f1f351id\"],\n    Bciustq: \"f6vqlre\",\n    Ccq8qp: \"f1aij3q\"\n  }\n}, {\n  h: [\".fhw179n:hover::before{background-color:var(--colorNeutralStroke1Hover);}\", \".f10y1uxy:hover::before{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f6aiuy0:hover::before{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1kfpfnu:hover::before{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1dx5wco:hover::before{border-top-left-radius:var(--borderRadiusCircular);}\", \".f1kmhr4c:hover::before{content:\\\"\\\";}\", \".fl1ydde:hover::before{position:absolute;}\", \".f1ut20fw:hover::before{background-color:var(--colorTransparentStroke);}\"],\n  a: [\".f1y7maxz:active::before{background-color:var(--colorNeutralStroke1Pressed);}\", \".f105swax:active::before{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".fscdmel:active::before{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1tkcw1w:active::before{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1u11x8o:active::before{border-top-left-radius:var(--borderRadiusCircular);}\", \".f16cxu0:active::before{content:\\\"\\\";}\", \".f1nwgacf:active::before{position:absolute;}\", \".fhrzcfn:active::before{background-color:var(--colorTransparentStroke);}\"],\n  m: [[\"@media (forced-colors: active){.f15ovonk:hover::before{background-color:Highlight;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fvje46l:active::before{background-color:Highlight;}}\", {\n    m: \"(forced-colors: active)\"\n  }]],\n  d: [\".fchca7p::before{bottom:0;}\", \".f1r53b5e::before{height:var(--strokeWidthThick);}\", \".f1s6rxz5::before{left:var(--spacingHorizontalSNudge);}\", \".fo35v8s::before{right:var(--spacingHorizontalSNudge);}\", \".fze4zud::before{bottom:var(--spacingVerticalXS);}\", \".f1fzr1x6::before{left:0;}\", \".f1f351id::before{right:0;}\", \".fdp32p8::before{top:var(--spacingVerticalXS);}\", \".f1aij3q::before{width:var(--strokeWidthThicker);}\", \".f1s2r9ax::before{height:var(--strokeWidthThicker);}\", \".f1o0nnkk::before{left:var(--spacingHorizontalM);}\", \".fxb7rol::before{right:var(--spacingHorizontalM);}\", \".f17jracn::before{bottom:var(--spacingVerticalS);}\", \".f117lcb2::before{top:var(--spacingVerticalS);}\", \".fel9d3z::before{bottom:var(--spacingVerticalMNudge);}\", \".f6vqlre::before{top:var(--spacingVerticalMNudge);}\"]\n});\nconst useActiveIndicatorStyles = /*#__PURE__*/__styles({\n  base: {\n    Bjyk6c5: \"f1rp0jgh\",\n    B3778ie: [\"fprarqb\", \"f14vs0nd\"],\n    d9w3h3: [\"f14vs0nd\", \"fprarqb\"],\n    Bl18szs: [\"f1gtfqs9\", \"f18zvfd9\"],\n    B4j8arr: [\"f18zvfd9\", \"f1gtfqs9\"],\n    Bsft5z2: \"f13zj6fq\",\n    E3zdtr: \"f1mdlcz9\",\n    t2ki1e: \"ffmd2fr\"\n  },\n  selected: {\n    Bjyk6c5: \"f1ksivud\",\n    Glksuk: \"f1eytvvh\",\n    Blzl0y7: \"fuaa9s\",\n    f7digc: \"fy7ktjt\",\n    Biqphg1: \"f16tp0gf\",\n    Bntoloa: \"fj0yp7j\"\n  },\n  disabled: {\n    Bjyk6c5: \"f13lkzet\"\n  },\n  smallHorizontal: {\n    By385i5: \"fo72kxq\",\n    Dlnsje: \"f9bb2ob\",\n    Eqx8gd: [\"f1q70ajw\", \"f18rbzdx\"],\n    B1piin3: [\"f18rbzdx\", \"f1q70ajw\"]\n  },\n  smallVertical: {\n    By385i5: \"fqbue9b\",\n    Eqx8gd: [\"f1n6gb5g\", \"f15yvnhg\"],\n    bn5sak: \"fk1klkt\",\n    a2br6o: \"f1o25lip\"\n  },\n  mediumHorizontal: {\n    By385i5: \"fo72kxq\",\n    Dlnsje: \"f1vx7lu8\",\n    Eqx8gd: [\"fna7m5n\", \"f1oxpfwv\"],\n    B1piin3: [\"f1oxpfwv\", \"fna7m5n\"]\n  },\n  mediumVertical: {\n    By385i5: \"fipylg0\",\n    Eqx8gd: [\"f1n6gb5g\", \"f15yvnhg\"],\n    bn5sak: \"fqchiol\",\n    a2br6o: \"f1o25lip\"\n  },\n  largeHorizontal: {\n    By385i5: \"fo72kxq\",\n    Dlnsje: \"f1vx7lu8\",\n    Eqx8gd: [\"fna7m5n\", \"f1oxpfwv\"],\n    B1piin3: [\"f1oxpfwv\", \"fna7m5n\"]\n  },\n  largeVertical: {\n    By385i5: \"f1w7dm5g\",\n    Eqx8gd: [\"f1n6gb5g\", \"f15yvnhg\"],\n    bn5sak: \"f1p6em4m\",\n    a2br6o: \"f1o25lip\"\n  }\n}, {\n  d: [\".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}\", \".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}\", \".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}\", \".f13zj6fq::after{content:\\\"\\\";}\", \".f1mdlcz9::after{position:absolute;}\", \".ffmd2fr::after{z-index:1;}\", \".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}\", \".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}\", \".fo72kxq::after{bottom:0;}\", \".f9bb2ob::after{height:var(--strokeWidthThick);}\", \".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}\", \".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}\", \".fqbue9b::after{bottom:var(--spacingVerticalXS);}\", \".f1n6gb5g::after{left:0;}\", \".f15yvnhg::after{right:0;}\", \".fk1klkt::after{top:var(--spacingVerticalXS);}\", \".f1o25lip::after{width:var(--strokeWidthThicker);}\", \".f1vx7lu8::after{height:var(--strokeWidthThicker);}\", \".fna7m5n::after{left:var(--spacingHorizontalM);}\", \".f1oxpfwv::after{right:var(--spacingHorizontalM);}\", \".fipylg0::after{bottom:var(--spacingVerticalS);}\", \".fqchiol::after{top:var(--spacingVerticalS);}\", \".f1w7dm5g::after{bottom:var(--spacingVerticalMNudge);}\", \".f1p6em4m::after{top:var(--spacingVerticalMNudge);}\"],\n  h: [\".f1eytvvh:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}\"],\n  a: [\".fuaa9s:active::after{background-color:var(--colorCompoundBrandStrokePressed);}\"],\n  m: [[\"@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f16tp0gf:hover::after{background-color:ButtonText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fj0yp7j:active::after{background-color:ButtonText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = /*#__PURE__*/__styles({\n  base: {\n    Br312pm: \"fwpfdsa\",\n    Ijaq50: \"f16hsg94\",\n    Bt984gj: \"f122n59\",\n    mc9l5x: \"ftuwxu6\",\n    Brf1p80: \"f4d9j23\",\n    B68tc82: \"f1p9o1ba\",\n    Bmxbyg5: \"f1sil6mw\",\n    D0sxk3: \"f16u1re\",\n    t6yez3: \"f8bsbmo\"\n  },\n  small: {\n    Be2twd7: \"fe5j1ua\",\n    Bqenvij: \"fjamq6b\",\n    a9b677: \"f64fuq3\"\n  },\n  medium: {\n    Be2twd7: \"fe5j1ua\",\n    Bqenvij: \"fjamq6b\",\n    a9b677: \"f64fuq3\"\n  },\n  large: {\n    Be2twd7: \"f1rt2boy\",\n    Bqenvij: \"frvgh55\",\n    a9b677: \"fq4mcun\"\n  },\n  selected: {\n    D0sxk3: \"fxoiby5\",\n    t6yez3: \"f15q0o9g\"\n  }\n}, {\n  d: [\".fwpfdsa{grid-column-start:1;}\", \".f16hsg94{grid-row-start:1;}\", \".f122n59{align-items:center;}\", \".ftuwxu6{display:inline-flex;}\", \".f4d9j23{justify-content:center;}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".f16u1re .fui-Icon-filled{display:none;}\", \".f8bsbmo .fui-Icon-regular{display:inline;}\", \".fe5j1ua{font-size:20px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".f1rt2boy{font-size:24px;}\", \".frvgh55{height:24px;}\", \".fq4mcun{width:24px;}\", \".fxoiby5 .fui-Icon-filled{display:inline;}\", \".f15q0o9g .fui-Icon-regular{display:none;}\"]\n});\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = /*#__PURE__*/__styles({\n  base: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    B68tc82: \"f1p9o1ba\",\n    Bmxbyg5: \"f1sil6mw\",\n    z8tnut: \"fztplxc\",\n    z189sj: [\"ffczdla\", \"fgiv446\"],\n    Byoj8tv: \"f9g1xly\",\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  },\n  selected: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  large: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"faaz57k\"\n  },\n  largeSelected: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  noIconBefore: {\n    Br312pm: \"fwpfdsa\",\n    Ijaq50: \"f16hsg94\"\n  },\n  iconBefore: {\n    Br312pm: \"fd46tj4\",\n    Ijaq50: \"f16hsg94\"\n  },\n  placeholder: {\n    Bcdw1i0: \"fd7fpy0\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".fztplxc{padding-top:var(--spacingVerticalNone);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".f9g1xly{padding-bottom:var(--spacingVerticalNone);}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".faaz57k{line-height:var(--lineHeightBase400);}\", \".fwpfdsa{grid-column-start:1;}\", \".f16hsg94{grid-row-start:1;}\", \".fd46tj4{grid-column-start:2;}\", \".fd7fpy0{visibility:hidden;}\"]\n});\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = state => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n  const pendingIndicatorStyles = usePendingIndicatorStyles();\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const contentStyles = useContentStyles();\n  const {\n    appearance,\n    disabled,\n    selected,\n    size,\n    vertical\n  } = state;\n  state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled,\n  // pending indicator (before pseudo element)\n  pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled,\n  // active indicator (after pseudo element)\n  selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);\n  if (state.icon) {\n    state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n  }\n  // This needs to be before state.content.className is updated\n  if (state.contentReservedSpaceClassName !== undefined) {\n    state.contentReservedSpaceClassName = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n  }\n  state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n  useTabAnimatedIndicatorStyles_unstable(state);\n  return state;\n};\n//# sourceMappingURL=useTabStyles.styles.js.map"],"names":["tabClassNames","useTabStyles_unstable","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","__styles","base","Bt984gj","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","z8tnut","z189sj","Byoj8tv","uwmqm3","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","Bv4n3vi","vqofr","B0uxbk8","Bgqb9hq","amg5m6","zkfqfm","Bkydozb","vzq8l0","Bka2azo","Br4ovkg","csmgbd","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","B3778ie","d9w3h3","Bl18szs","B4j8arr","Bsft5z2","E3zdtr","t2ki1e","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","mergeClasses","contentReservedSpaceClassName","undefined","useTabAnimatedIndicatorStyles_unstable"],"mappings":"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"}
+{"version":3,"sources":["useTabStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n  root: 'fui-Tab',\n  icon: 'fui-Tab__icon',\n  content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n  content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n  filled: 'fui-Icon-filled',\n  regular: 'fui-Icon-regular'\n};\n/**\n * Styles for the root slot\n */ /* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    Bt984gj: \"f122n59\",\n    g2u3we: \"fwhevhj\",\n    h3c5rm: [\"f61n433\", \"f1q8l70w\"],\n    B9xav0g: \"fv1dfc8\",\n    zhjwy3: [\"f1q8l70w\", \"f61n433\"],\n    Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n    Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n    B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n    Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n    B4j52fo: \"fre7gi1\",\n    Bekrc4i: [\"f1358rze\", \"f1rvrf73\"],\n    Bn0qgzm: \"fqdk4by\",\n    ibv6hh: [\"f1rvrf73\", \"f1358rze\"],\n    Bceei9c: \"f1k6fduh\",\n    mc9l5x: \"f13qh94s\",\n    Bnnss6s: \"fi64zpg\",\n    Bxotwcr: \"f1u07yai\",\n    Budl1dq: \"frn2hmy\",\n    wkccdc: \"f1olsevy\",\n    Bahqtrf: \"fk6fouc\",\n    Bg96gwp: \"f1i3iumi\",\n    oeaueh: \"f1s6fcnf\",\n    qhf8xq: \"f10pi13n\",\n    B68tc82: \"f1p9o1ba\",\n    Bmxbyg5: \"f1sil6mw\",\n    B9bfxx9: \"f1cxpek8\"\n  },\n  horizontal: {\n    Brf1p80: \"f4d9j23\"\n  },\n  vertical: {\n    Brf1p80: \"f1s9ku6b\"\n  },\n  smallHorizontal: {\n    i8kkvl: \"f14mj54c\",\n    z8tnut: \"fp2oml8\",\n    z189sj: [\"fdw0yi8\", \"fk8j09s\"],\n    Byoj8tv: \"f1tdddsa\",\n    uwmqm3: [\"fk8j09s\", \"fdw0yi8\"]\n  },\n  smallVertical: {\n    i8kkvl: \"f14mj54c\",\n    z8tnut: \"fclwglc\",\n    z189sj: [\"fdw0yi8\", \"fk8j09s\"],\n    Byoj8tv: \"fywfov9\",\n    uwmqm3: [\"fk8j09s\", \"fdw0yi8\"]\n  },\n  mediumHorizontal: {\n    i8kkvl: \"f1rjii52\",\n    z8tnut: \"f5yzyt\",\n    z189sj: [\"f11gcy0p\", \"f1ng84yb\"],\n    Byoj8tv: \"fx3omr\",\n    uwmqm3: [\"f1ng84yb\", \"f11gcy0p\"]\n  },\n  mediumVertical: {\n    i8kkvl: \"f1rjii52\",\n    z8tnut: \"fp2oml8\",\n    z189sj: [\"f11gcy0p\", \"f1ng84yb\"],\n    Byoj8tv: \"f1tdddsa\",\n    uwmqm3: [\"f1ng84yb\", \"f11gcy0p\"]\n  },\n  largeHorizontal: {\n    i8kkvl: \"f1rjii52\",\n    z8tnut: \"fikn0iw\",\n    z189sj: [\"f11gcy0p\", \"f1ng84yb\"],\n    Byoj8tv: \"fdxej3c\",\n    uwmqm3: [\"f1ng84yb\", \"f11gcy0p\"]\n  },\n  largeVertical: {\n    i8kkvl: \"f1rjii52\",\n    z8tnut: \"f1kwiid1\",\n    z189sj: [\"f11gcy0p\", \"f1ng84yb\"],\n    Byoj8tv: \"f5b47ha\",\n    uwmqm3: [\"f1ng84yb\", \"f11gcy0p\"]\n  },\n  transparent: {\n    De3pzq: \"f1c21dwh\",\n    Jwef8y: \"fjxutwb\",\n    ecr2s2: \"fophhak\",\n    Bptxc3x: \"fmmjozx\",\n    B076xvk: \"f1mfqf41\",\n    q9r9w5: \"f10aiid4\",\n    cl4aha: \"fpkze5g\",\n    Bk452zc: \"f149wc3x\",\n    a4hkcw: \"fjioou7\"\n  },\n  subtle: {\n    De3pzq: \"fhovq9v\",\n    Jwef8y: \"f1t94bn6\",\n    ecr2s2: \"f1wfn5kd\",\n    Bptxc3x: \"fmmjozx\",\n    B076xvk: \"f1mfqf41\",\n    q9r9w5: \"f10aiid4\",\n    cl4aha: \"fpkze5g\",\n    Bk452zc: \"f149wc3x\",\n    a4hkcw: \"fjioou7\"\n  },\n  disabled: {\n    De3pzq: \"f1c21dwh\",\n    Bptxc3x: \"fato7r6\",\n    cl4aha: \"fao1bnu\",\n    Bceei9c: \"fdrzuqr\"\n  },\n  selected: {\n    Bptxc3x: \"f1cadz5z\",\n    B076xvk: \"f1ck17l\",\n    q9r9w5: \"f42ak0g\",\n    cl4aha: \"ffplhdr\",\n    Bk452zc: \"ffth601\",\n    a4hkcw: \"fhklyu5\"\n  }\n}, {\n  d: [\".f122n59{align-items:center;}\", \".fwhevhj{border-top-color:none;}\", \".f61n433{border-right-color:none;}\", \".f1q8l70w{border-left-color:none;}\", \".fv1dfc8{border-bottom-color:none;}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".fre7gi1{border-top-width:0;}\", \".f1358rze{border-right-width:0;}\", \".f1rvrf73{border-left-width:0;}\", \".fqdk4by{border-bottom-width:0;}\", \".f1k6fduh{cursor:pointer;}\", \".f13qh94s{display:grid;}\", \".fi64zpg{flex-shrink:0;}\", \".f1u07yai{grid-auto-flow:column;}\", \".frn2hmy{grid-template-columns:auto;}\", \".f1olsevy{grid-template-rows:auto;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".f1s6fcnf{outline-style:none;}\", \".f10pi13n{position:relative;}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".f1cxpek8{text-transform:none;}\", \".f4d9j23{justify-content:center;}\", \".f1s9ku6b{justify-content:start;}\", \".f14mj54c{column-gap:var(--spacingHorizontalXXS);}\", \".fp2oml8{padding-top:var(--spacingVerticalSNudge);}\", \".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}\", \".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}\", \".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}\", \".fclwglc{padding-top:var(--spacingVerticalXXS);}\", \".fywfov9{padding-bottom:var(--spacingVerticalXXS);}\", \".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}\", \".f5yzyt{padding-top:var(--spacingVerticalM);}\", \".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}\", \".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}\", \".fx3omr{padding-bottom:var(--spacingVerticalM);}\", \".fikn0iw{padding-top:var(--spacingVerticalL);}\", \".fdxej3c{padding-bottom:var(--spacingVerticalL);}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}\", \".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}\", \".fhovq9v{background-color:var(--colorSubtleBackground);}\", \".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}\", \".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}\", \".fdrzuqr{cursor:not-allowed;}\", \".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}\", \".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}\"],\n  h: [\".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}\", \".f1mfqf41:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}\", \".f149wc3x:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}\", \".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".f1ck17l:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}\", \".ffth601:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}\"],\n  a: [\".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}\", \".f10aiid4:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}\", \".fjioou7:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}\", \".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f42ak0g:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}\", \".fhklyu5:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}\"]\n});\n/* eslint-enable @typescript-eslint/naming-convention */ /**\n                                                         * Focus styles for the root slot\n                                                         */\nconst useFocusStyles = /*#__PURE__*/__styles({\n  base: {\n    B8q5s1w: \"f8hki3x\",\n    Bci5o5g: [\"f1d2448m\", \"ffh67wi\"],\n    n8qw10: \"f1bjia2o\",\n    Bdrgwmp: [\"ffh67wi\", \"f1d2448m\"],\n    Bn4voq9: \"f1p7hgxw\",\n    Bfpq7zp: \"f1way5bb\",\n    g9k6zt: \"f9znhxp\",\n    j6ew2k: [\"fqa318h\", \"fqa318h\"],\n    Bhxq17a: \"f1vjpng2\"\n  }\n}, {\n  d: [\".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}\", \".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}\", \".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}\", \".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}\", \".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}\", \".f1way5bb[data-fui-focus-visible]{outline-color:transparent;}\", \".f9znhxp[data-fui-focus-visible]{outline-style:solid;}\", \".fqa318h[data-fui-focus-visible]{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}\", \".f1vjpng2[data-fui-focus-visible]{z-index:1;}\"]\n});\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = /*#__PURE__*/__styles({\n  base: {\n    az7l2e: \"fhw179n\",\n    Bv4n3vi: [\"f10y1uxy\", \"f6aiuy0\"],\n    vqofr: [\"f6aiuy0\", \"f10y1uxy\"],\n    B0uxbk8: [\"f1kfpfnu\", \"f1dx5wco\"],\n    Bgqb9hq: [\"f1dx5wco\", \"f1kfpfnu\"],\n    amg5m6: \"f1kmhr4c\",\n    zkfqfm: \"fl1ydde\",\n    Bkydozb: \"f1y7maxz\",\n    vzq8l0: [\"f105swax\", \"fscdmel\"],\n    Bka2azo: [\"fscdmel\", \"f105swax\"],\n    Br4ovkg: [\"f1tkcw1w\", \"f1u11x8o\"],\n    csmgbd: [\"f1u11x8o\", \"f1tkcw1w\"],\n    y36c18: \"f16cxu0\",\n    B1ctymy: \"f1nwgacf\",\n    Bgvrrv0: \"f15ovonk\",\n    ddr6p5: \"fvje46l\"\n  },\n  disabled: {\n    az7l2e: \"f1ut20fw\",\n    Bkydozb: \"fhrzcfn\"\n  },\n  smallHorizontal: {\n    lawp4y: \"fchca7p\",\n    Baz25je: \"f1r53b5e\",\n    Fbdkly: [\"f1s6rxz5\", \"fo35v8s\"],\n    mdwyqc: [\"fo35v8s\", \"f1s6rxz5\"]\n  },\n  smallVertical: {\n    lawp4y: \"fze4zud\",\n    Fbdkly: [\"f1fzr1x6\", \"f1f351id\"],\n    Bciustq: \"fdp32p8\",\n    Ccq8qp: \"f1aij3q\"\n  },\n  mediumHorizontal: {\n    lawp4y: \"fchca7p\",\n    Baz25je: \"f1s2r9ax\",\n    Fbdkly: [\"f1o0nnkk\", \"fxb7rol\"],\n    mdwyqc: [\"fxb7rol\", \"f1o0nnkk\"]\n  },\n  mediumVertical: {\n    lawp4y: \"f17jracn\",\n    Fbdkly: [\"f1fzr1x6\", \"f1f351id\"],\n    Bciustq: \"f117lcb2\",\n    Ccq8qp: \"f1aij3q\"\n  },\n  largeHorizontal: {\n    lawp4y: \"fchca7p\",\n    Baz25je: \"f1s2r9ax\",\n    Fbdkly: [\"f1o0nnkk\", \"fxb7rol\"],\n    mdwyqc: [\"fxb7rol\", \"f1o0nnkk\"]\n  },\n  largeVertical: {\n    lawp4y: \"fel9d3z\",\n    Fbdkly: [\"f1fzr1x6\", \"f1f351id\"],\n    Bciustq: \"f6vqlre\",\n    Ccq8qp: \"f1aij3q\"\n  }\n}, {\n  h: [\".fhw179n:hover::before{background-color:var(--colorNeutralStroke1Hover);}\", \".f10y1uxy:hover::before{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f6aiuy0:hover::before{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1kfpfnu:hover::before{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1dx5wco:hover::before{border-top-left-radius:var(--borderRadiusCircular);}\", \".f1kmhr4c:hover::before{content:\\\"\\\";}\", \".fl1ydde:hover::before{position:absolute;}\", \".f1ut20fw:hover::before{background-color:var(--colorTransparentStroke);}\"],\n  a: [\".f1y7maxz:active::before{background-color:var(--colorNeutralStroke1Pressed);}\", \".f105swax:active::before{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".fscdmel:active::before{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1tkcw1w:active::before{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1u11x8o:active::before{border-top-left-radius:var(--borderRadiusCircular);}\", \".f16cxu0:active::before{content:\\\"\\\";}\", \".f1nwgacf:active::before{position:absolute;}\", \".fhrzcfn:active::before{background-color:var(--colorTransparentStroke);}\"],\n  m: [[\"@media (forced-colors: active){.f15ovonk:hover::before{background-color:Highlight;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fvje46l:active::before{background-color:Highlight;}}\", {\n    m: \"(forced-colors: active)\"\n  }]],\n  d: [\".fchca7p::before{bottom:0;}\", \".f1r53b5e::before{height:var(--strokeWidthThick);}\", \".f1s6rxz5::before{left:var(--spacingHorizontalSNudge);}\", \".fo35v8s::before{right:var(--spacingHorizontalSNudge);}\", \".fze4zud::before{bottom:var(--spacingVerticalXS);}\", \".f1fzr1x6::before{left:0;}\", \".f1f351id::before{right:0;}\", \".fdp32p8::before{top:var(--spacingVerticalXS);}\", \".f1aij3q::before{width:var(--strokeWidthThicker);}\", \".f1s2r9ax::before{height:var(--strokeWidthThicker);}\", \".f1o0nnkk::before{left:var(--spacingHorizontalM);}\", \".fxb7rol::before{right:var(--spacingHorizontalM);}\", \".f17jracn::before{bottom:var(--spacingVerticalS);}\", \".f117lcb2::before{top:var(--spacingVerticalS);}\", \".fel9d3z::before{bottom:var(--spacingVerticalMNudge);}\", \".f6vqlre::before{top:var(--spacingVerticalMNudge);}\"]\n});\nconst useActiveIndicatorStyles = /*#__PURE__*/__styles({\n  base: {\n    Bjyk6c5: \"f1rp0jgh\",\n    B3778ie: [\"fprarqb\", \"f14vs0nd\"],\n    d9w3h3: [\"f14vs0nd\", \"fprarqb\"],\n    Bl18szs: [\"f1gtfqs9\", \"f18zvfd9\"],\n    B4j8arr: [\"f18zvfd9\", \"f1gtfqs9\"],\n    Bsft5z2: \"f13zj6fq\",\n    E3zdtr: \"f1mdlcz9\",\n    t2ki1e: \"ffmd2fr\"\n  },\n  selected: {\n    Bjyk6c5: \"f1ksivud\",\n    Glksuk: \"f1eytvvh\",\n    Blzl0y7: \"fuaa9s\",\n    f7digc: \"fy7ktjt\",\n    Biqphg1: \"f16tp0gf\",\n    Bntoloa: \"fj0yp7j\"\n  },\n  disabled: {\n    Bjyk6c5: \"f13lkzet\"\n  },\n  smallHorizontal: {\n    By385i5: \"fo72kxq\",\n    Dlnsje: \"f9bb2ob\",\n    Eqx8gd: [\"f1q70ajw\", \"f18rbzdx\"],\n    B1piin3: [\"f18rbzdx\", \"f1q70ajw\"]\n  },\n  smallVertical: {\n    By385i5: \"fqbue9b\",\n    Eqx8gd: [\"f1n6gb5g\", \"f15yvnhg\"],\n    bn5sak: \"fk1klkt\",\n    a2br6o: \"f1o25lip\"\n  },\n  mediumHorizontal: {\n    By385i5: \"fo72kxq\",\n    Dlnsje: \"f1vx7lu8\",\n    Eqx8gd: [\"fna7m5n\", \"f1oxpfwv\"],\n    B1piin3: [\"f1oxpfwv\", \"fna7m5n\"]\n  },\n  mediumVertical: {\n    By385i5: \"fipylg0\",\n    Eqx8gd: [\"f1n6gb5g\", \"f15yvnhg\"],\n    bn5sak: \"fqchiol\",\n    a2br6o: \"f1o25lip\"\n  },\n  largeHorizontal: {\n    By385i5: \"fo72kxq\",\n    Dlnsje: \"f1vx7lu8\",\n    Eqx8gd: [\"fna7m5n\", \"f1oxpfwv\"],\n    B1piin3: [\"f1oxpfwv\", \"fna7m5n\"]\n  },\n  largeVertical: {\n    By385i5: \"f1w7dm5g\",\n    Eqx8gd: [\"f1n6gb5g\", \"f15yvnhg\"],\n    bn5sak: \"f1p6em4m\",\n    a2br6o: \"f1o25lip\"\n  }\n}, {\n  d: [\".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}\", \".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}\", \".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}\", \".f13zj6fq::after{content:\\\"\\\";}\", \".f1mdlcz9::after{position:absolute;}\", \".ffmd2fr::after{z-index:1;}\", \".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}\", \".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}\", \".fo72kxq::after{bottom:0;}\", \".f9bb2ob::after{height:var(--strokeWidthThick);}\", \".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}\", \".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}\", \".fqbue9b::after{bottom:var(--spacingVerticalXS);}\", \".f1n6gb5g::after{left:0;}\", \".f15yvnhg::after{right:0;}\", \".fk1klkt::after{top:var(--spacingVerticalXS);}\", \".f1o25lip::after{width:var(--strokeWidthThicker);}\", \".f1vx7lu8::after{height:var(--strokeWidthThicker);}\", \".fna7m5n::after{left:var(--spacingHorizontalM);}\", \".f1oxpfwv::after{right:var(--spacingHorizontalM);}\", \".fipylg0::after{bottom:var(--spacingVerticalS);}\", \".fqchiol::after{top:var(--spacingVerticalS);}\", \".f1w7dm5g::after{bottom:var(--spacingVerticalMNudge);}\", \".f1p6em4m::after{top:var(--spacingVerticalMNudge);}\"],\n  h: [\".f1eytvvh:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}\"],\n  a: [\".fuaa9s:active::after{background-color:var(--colorCompoundBrandStrokePressed);}\"],\n  m: [[\"@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f16tp0gf:hover::after{background-color:ButtonText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fj0yp7j:active::after{background-color:ButtonText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = /*#__PURE__*/__styles({\n  base: {\n    Br312pm: \"fwpfdsa\",\n    Ijaq50: \"f16hsg94\",\n    Bt984gj: \"f122n59\",\n    mc9l5x: \"ftuwxu6\",\n    Brf1p80: \"f4d9j23\",\n    B68tc82: \"f1p9o1ba\",\n    Bmxbyg5: \"f1sil6mw\",\n    D0sxk3: \"f16u1re\",\n    t6yez3: \"f8bsbmo\"\n  },\n  small: {\n    Be2twd7: \"fe5j1ua\",\n    Bqenvij: \"fjamq6b\",\n    a9b677: \"f64fuq3\"\n  },\n  medium: {\n    Be2twd7: \"fe5j1ua\",\n    Bqenvij: \"fjamq6b\",\n    a9b677: \"f64fuq3\"\n  },\n  large: {\n    Be2twd7: \"f1rt2boy\",\n    Bqenvij: \"frvgh55\",\n    a9b677: \"fq4mcun\"\n  },\n  selected: {\n    D0sxk3: \"fxoiby5\",\n    t6yez3: \"f15q0o9g\"\n  }\n}, {\n  d: [\".fwpfdsa{grid-column-start:1;}\", \".f16hsg94{grid-row-start:1;}\", \".f122n59{align-items:center;}\", \".ftuwxu6{display:inline-flex;}\", \".f4d9j23{justify-content:center;}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".f16u1re .fui-Icon-filled{display:none;}\", \".f8bsbmo .fui-Icon-regular{display:inline;}\", \".fe5j1ua{font-size:20px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".f1rt2boy{font-size:24px;}\", \".frvgh55{height:24px;}\", \".fq4mcun{width:24px;}\", \".fxoiby5 .fui-Icon-filled{display:inline;}\", \".f15q0o9g .fui-Icon-regular{display:none;}\"]\n});\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = /*#__PURE__*/__styles({\n  base: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    B68tc82: \"f1p9o1ba\",\n    Bmxbyg5: \"f1sil6mw\",\n    z8tnut: \"fztplxc\",\n    z189sj: [\"ffczdla\", \"fgiv446\"],\n    Byoj8tv: \"f9g1xly\",\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  },\n  selected: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  large: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"faaz57k\"\n  },\n  largeSelected: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  noIconBefore: {\n    Br312pm: \"fwpfdsa\",\n    Ijaq50: \"f16hsg94\"\n  },\n  iconBefore: {\n    Br312pm: \"fd46tj4\",\n    Ijaq50: \"f16hsg94\"\n  },\n  placeholder: {\n    Bcdw1i0: \"fd7fpy0\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".fztplxc{padding-top:var(--spacingVerticalNone);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".f9g1xly{padding-bottom:var(--spacingVerticalNone);}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".faaz57k{line-height:var(--lineHeightBase400);}\", \".fwpfdsa{grid-column-start:1;}\", \".f16hsg94{grid-row-start:1;}\", \".fd46tj4{grid-column-start:2;}\", \".fd7fpy0{visibility:hidden;}\"]\n});\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = state => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n  const pendingIndicatorStyles = usePendingIndicatorStyles();\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const contentStyles = useContentStyles();\n  const {\n    appearance,\n    disabled,\n    selected,\n    size,\n    vertical\n  } = state;\n  state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled,\n  // pending indicator (before pseudo element)\n  pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled,\n  // active indicator (after pseudo element)\n  selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);\n  if (state.icon) {\n    state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n  }\n  // This needs to be before state.content.className is updated\n  if (state.contentReservedSpace) {\n    state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n    // FIXME: this is a deprecated API\n    // should be removed in the next major version\n    // eslint-disable-next-line deprecation/deprecation\n    state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n  }\n  state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n  useTabAnimatedIndicatorStyles_unstable(state);\n  return state;\n};\n//# sourceMappingURL=useTabStyles.styles.js.map"],"names":["tabClassNames","useTabStyles_unstable","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","__styles","base","Bt984gj","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","z8tnut","z189sj","Byoj8tv","uwmqm3","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","Bv4n3vi","vqofr","B0uxbk8","Bgqb9hq","amg5m6","zkfqfm","Bkydozb","vzq8l0","Bka2azo","Br4ovkg","csmgbd","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","B3778ie","d9w3h3","Bl18szs","B4j8arr","Bsft5z2","E3zdtr","t2ki1e","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","mergeClasses","contentReservedSpace","contentReservedSpaceClassName","useTabAnimatedIndicatorStyles_unstable"],"mappings":"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"}

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

@@ -10,8 +10,8 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _tabListContext = require("./TabListContext");
 const renderTabList_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_tabListContext.TabListProvider, {
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_tabListContext.TabListProvider, {
         value: contextValues.tabList
     }, state.root.children));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTabList.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { TabListProvider } from './TabListContext';\n/**\n * Render the final JSX of TabList\n */ export const renderTabList_unstable = (state, contextValues)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(TabListProvider, {\n        value: contextValues.tabList\n    }, state.root.children));\n};\n"],"names":["renderTabList_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","TabListProvider","value","tabList","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;gCACG;AAGrB,MAAMA,yBAAyB,CAACC,OAAOC,gBAAgB;IAC9D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,+BAAe,EAAE;QACxGC,OAAOP,cAAcQ,OAAO;IAChC,GAAGT,MAAMM,IAAI,CAACI,QAAQ;AAC1B"}
+{"version":3,"sources":["renderTabList.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TabListProvider } from './TabListContext';\n/**\n * Render the final JSX of TabList\n */ export const renderTabList_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(TabListProvider, {\n        value: contextValues.tabList\n    }, state.root.children));\n};\n"],"names":["renderTabList_unstable","state","contextValues","assertSlots","createElement","root","TabListProvider","value","tabList","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;gCACI;AAGrB,MAAMA,yBAAyB,CAACC,OAAOC,gBAAgB;IAC9DC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAE,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,+BAAe,EAAE;QAC9FC,OAAOL,cAAcM,OAAO;IAChC,GAAGP,MAAMI,IAAI,CAACI,QAAQ;AAC1B"}

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

@@ -57,12 +57,14 @@ const useTabList_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref: (0, _reactUtilities.useMergedRefs)(ref, innerRef),
             role: 'tablist',
             'aria-orientation': vertical ? 'vertical' : 'horizontal',
             ...focusAttributes,
             ...props
+        }), {
+            elementType: 'div'
         }),
         appearance,
         reserveSelectedTabSpace,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTabList.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getNativeElementProps, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\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 */ export const useTabList_unstable = (props, ref)=>{\n    const { appearance ='transparent' , reserveSelectedTabSpace =true , disabled =false , onTabSelect , size ='medium' , vertical =false  } = props;\n    const innerRef = React.useRef(null);\n    const focusAttributes = useArrowNavigationGroup({\n        circular: true,\n        axis: vertical ? 'vertical' : 'horizontal',\n        memorizeCurrent: true\n    });\n    const [selectedValue, setSelectedValue] = useControllableState({\n        state: props.selectedValue,\n        defaultState: props.defaultSelectedValue,\n        initialState: undefined\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(undefined);\n    const previousSelectedValue = React.useRef(undefined);\n    React.useEffect(()=>{\n        previousSelectedValue.current = currentSelectedValue.current;\n        currentSelectedValue.current = selectedValue;\n    }, [\n        selectedValue\n    ]);\n    const onSelect = useEventCallback((event, data)=>{\n        setSelectedValue(data.value);\n        onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);\n    });\n    const registeredTabs = React.useRef({});\n    const onRegister = useEventCallback((data)=>{\n        registeredTabs.current[JSON.stringify(data.value)] = data;\n    });\n    const onUnregister = useEventCallback((data)=>{\n        delete registeredTabs.current[JSON.stringify(data.value)];\n    });\n    const getRegisteredTabs = React.useCallback(()=>{\n        return {\n            selectedValue: currentSelectedValue.current,\n            previousSelectedValue: previousSelectedValue.current,\n            registeredTabs: registeredTabs.current\n        };\n    }, []);\n    return {\n        components: {\n            root: 'div'\n        },\n        root: getNativeElementProps('div', {\n            ref: useMergedRefs(ref, innerRef),\n            role: 'tablist',\n            'aria-orientation': vertical ? 'vertical' : 'horizontal',\n            ...focusAttributes,\n            ...props\n        }),\n        appearance,\n        reserveSelectedTabSpace,\n        disabled,\n        selectedValue,\n        size,\n        vertical,\n        onRegister,\n        onUnregister,\n        onSelect,\n        getRegisteredTabs\n    };\n};\n"],"names":["useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","React","useRef","focusAttributes","useArrowNavigationGroup","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","useControllableState","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","useEventCallback","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","getNativeElementProps","useMergedRefs","role"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;8BACiB;gCACqD;AASlF,MAAMA,sBAAsB,CAACC,OAAOC,MAAM;IACjD,MAAM,EAAEC,YAAY,cAAa,EAAGC,yBAAyB,IAAI,CAAA,EAAGC,UAAU,KAAK,CAAA,EAAGC,YAAW,EAAGC,MAAM,SAAQ,EAAGC,UAAU,KAAK,CAAA,EAAG,GAAGP;IAC1I,MAAMQ,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,kBAAkBC,IAAAA,qCAAuB,EAAC;QAC5CC,UAAU,IAAI;QACdC,MAAMP,WAAW,aAAa,YAAY;QAC1CQ,iBAAiB,IAAI;IACzB;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC3DC,OAAOnB,MAAMgB,aAAa;QAC1BI,cAAcpB,MAAMqB,oBAAoB;QACxCC,cAAcC;IAClB;IACA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuBf,OAAMC,MAAM,CAACa;IAC1C,MAAME,wBAAwBhB,OAAMC,MAAM,CAACa;IAC3Cd,OAAMiB,SAAS,CAAC,IAAI;QAChBD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGX;IACnC,GAAG;QACCA;KACH;IACD,MAAMY,WAAWC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QAC7Cd,iBAAiBc,KAAKC,KAAK;QAC3B3B,gBAAgB,IAAI,IAAIA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYyB,OAAOC,KAAK;IACtF;IACA,MAAME,iBAAiBxB,OAAMC,MAAM,CAAC,CAAC;IACrC,MAAMwB,aAAaL,IAAAA,gCAAgB,EAAC,CAACE,OAAO;QACxCE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACzD;IACA,MAAMM,eAAeR,IAAAA,gCAAgB,EAAC,CAACE,OAAO;QAC1C,OAAOE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC7D;IACA,MAAMM,oBAAoB7B,OAAM8B,WAAW,CAAC,IAAI;QAC5C,OAAO;YACHvB,eAAeQ,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDM,gBAAgBA,eAAeN,OAAO;QAC1C;IACJ,GAAG,EAAE;IACL,OAAO;QACHa,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BzC,KAAK0C,IAAAA,6BAAa,EAAC1C,KAAKO;YACxBoC,MAAM;YACN,oBAAoBrC,WAAW,aAAa,YAAY;YACxD,GAAGI,eAAe;YAClB,GAAGX,KAAK;QACZ;QACAE;QACAC;QACAC;QACAY;QACAV;QACAC;QACA2B;QACAG;QACAT;QACAU;IACJ;AACJ"}
+{"version":3,"sources":["useTabList.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getNativeElementProps, useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\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 */ export const useTabList_unstable = (props, ref)=>{\n    const { appearance ='transparent' , reserveSelectedTabSpace =true , disabled =false , onTabSelect , size ='medium' , vertical =false  } = props;\n    const innerRef = React.useRef(null);\n    const focusAttributes = useArrowNavigationGroup({\n        circular: true,\n        axis: vertical ? 'vertical' : 'horizontal',\n        memorizeCurrent: true\n    });\n    const [selectedValue, setSelectedValue] = useControllableState({\n        state: props.selectedValue,\n        defaultState: props.defaultSelectedValue,\n        initialState: undefined\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(undefined);\n    const previousSelectedValue = React.useRef(undefined);\n    React.useEffect(()=>{\n        previousSelectedValue.current = currentSelectedValue.current;\n        currentSelectedValue.current = selectedValue;\n    }, [\n        selectedValue\n    ]);\n    const onSelect = useEventCallback((event, data)=>{\n        setSelectedValue(data.value);\n        onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);\n    });\n    const registeredTabs = React.useRef({});\n    const onRegister = useEventCallback((data)=>{\n        registeredTabs.current[JSON.stringify(data.value)] = data;\n    });\n    const onUnregister = useEventCallback((data)=>{\n        delete registeredTabs.current[JSON.stringify(data.value)];\n    });\n    const getRegisteredTabs = React.useCallback(()=>{\n        return {\n            selectedValue: currentSelectedValue.current,\n            previousSelectedValue: previousSelectedValue.current,\n            registeredTabs: registeredTabs.current\n        };\n    }, []);\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref: useMergedRefs(ref, innerRef),\n            role: 'tablist',\n            'aria-orientation': vertical ? 'vertical' : 'horizontal',\n            ...focusAttributes,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        appearance,\n        reserveSelectedTabSpace,\n        disabled,\n        selectedValue,\n        size,\n        vertical,\n        onRegister,\n        onUnregister,\n        onSelect,\n        getRegisteredTabs\n    };\n};\n"],"names":["useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","React","useRef","focusAttributes","useArrowNavigationGroup","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","useControllableState","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","useEventCallback","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","slot","always","getNativeElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;8BACiB;gCAC2D;AASxF,MAAMA,sBAAsB,CAACC,OAAOC,MAAM;IACjD,MAAM,EAAEC,YAAY,cAAa,EAAGC,yBAAyB,IAAI,CAAA,EAAGC,UAAU,KAAK,CAAA,EAAGC,YAAW,EAAGC,MAAM,SAAQ,EAAGC,UAAU,KAAK,CAAA,EAAG,GAAGP;IAC1I,MAAMQ,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,kBAAkBC,IAAAA,qCAAuB,EAAC;QAC5CC,UAAU,IAAI;QACdC,MAAMP,WAAW,aAAa,YAAY;QAC1CQ,iBAAiB,IAAI;IACzB;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC3DC,OAAOnB,MAAMgB,aAAa;QAC1BI,cAAcpB,MAAMqB,oBAAoB;QACxCC,cAAcC;IAClB;IACA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuBf,OAAMC,MAAM,CAACa;IAC1C,MAAME,wBAAwBhB,OAAMC,MAAM,CAACa;IAC3Cd,OAAMiB,SAAS,CAAC,IAAI;QAChBD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGX;IACnC,GAAG;QACCA;KACH;IACD,MAAMY,WAAWC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QAC7Cd,iBAAiBc,KAAKC,KAAK;QAC3B3B,gBAAgB,IAAI,IAAIA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYyB,OAAOC,KAAK;IACtF;IACA,MAAME,iBAAiBxB,OAAMC,MAAM,CAAC,CAAC;IACrC,MAAMwB,aAAaL,IAAAA,gCAAgB,EAAC,CAACE,OAAO;QACxCE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACzD;IACA,MAAMM,eAAeR,IAAAA,gCAAgB,EAAC,CAACE,OAAO;QAC1C,OAAOE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC7D;IACA,MAAMM,oBAAoB7B,OAAM8B,WAAW,CAAC,IAAI;QAC5C,OAAO;YACHvB,eAAeQ,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDM,gBAAgBA,eAAeN,OAAO;QAC1C;IACJ,GAAG,EAAE;IACL,OAAO;QACHa,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C3C,KAAK4C,IAAAA,6BAAa,EAAC5C,KAAKO;YACxBsC,MAAM;YACN,oBAAoBvC,WAAW,aAAa,YAAY;YACxD,GAAGI,eAAe;YAClB,GAAGX,KAAK;QACZ,IAAI;YACA+C,aAAa;QACjB;QACA7C;QACAC;QACAC;QACAY;QACAV;QACAC;QACA2B;QACAG;QACAT;QACAU;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.3.29",
+  "version": "9.3.31",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,12 +32,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.27",
-    "@fluentui/react-jsx-runtime": "9.0.0-alpha.14",
+    "@fluentui/react-context-selector": "^9.1.28",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.15",
     "@fluentui/react-shared-contexts": "^9.7.2",
-    "@fluentui/react-tabster": "^9.12.1",
+    "@fluentui/react-tabster": "^9.12.2",
     "@fluentui/react-theme": "^9.1.11",
-    "@fluentui/react-utilities": "^9.11.0",
+    "@fluentui/react-utilities": "^9.11.1",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.4.14"
   },