@fluentui/react-tabs 9.7.1 → 9.7.3

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Tue, 11 Mar 2025 18:54:28 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Mar 2025 21:08:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.7.3)
+
+Thu, 27 Mar 2025 21:08:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.7.2..@fluentui/react-tabs_v9.7.3)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.1.75 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.53 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.23.1 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-tabster to v9.24.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-utilities to v9.18.23 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+
+## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.7.2)
+
+Wed, 19 Mar 2025 15:40:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.7.1..@fluentui/react-tabs_v9.7.2)
+
+### Patches
+
+- fix: use proper type for Tab value prop ([PR #33988](https://github.com/microsoft/fluentui/pull/33988) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.74 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.52 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.23.0 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+- Bump @fluentui/react-tabster to v9.24.2 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+- Bump @fluentui/react-utilities to v9.18.22 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+
 ## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.7.1)
 
-Tue, 11 Mar 2025 18:54:28 GMT 
+Tue, 11 Mar 2025 18:58:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.7.0..@fluentui/react-tabs_v9.7.1)
 
 ### Patches

package/dist/index.d.ts

@@ -155,7 +155,7 @@ export declare type TabListState = ComponentState<Required<TabListSlots>> & TabL
 /**
  * Tab Props
  */
-export declare type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content'> & Pick<Partial<TabSlots>, 'content'> & {
+export declare type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content' | 'value'> & Pick<Partial<TabSlots>, 'content'> & {
     /**
      * A tab can be set to disable interaction.
      * @default false

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

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

package/lib/components/TabList/useTabList.js

@@ -42,7 +42,17 @@ import { getIntrinsicElementProps, useControllableState, useEventCallback, useMe
     });
     const registeredTabs = React.useRef({});
     const onRegister = useEventCallback((data)=>{
-        registeredTabs.current[JSON.stringify(data.value)] = data;
+        const key = JSON.stringify(data.value);
+        if (!key && process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.error([
+                `[@fluentui/react-tabs] The value "${data.value}" cannot be serialized to JSON string.`,
+                'Tab component requires serializable values.',
+                'Please provide a primitive value (string, number, boolean),',
+                `or a plain object/array that doesn't contain functions, symbols, or circular references.`
+            ].join(' '));
+        }
+        registeredTabs.current[key] = data;
     });
     const onUnregister = useEventCallback((data)=>{
         delete registeredTabs.current[JSON.stringify(data.value)];

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    selectTabOnFocus = false,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...focusAttributes,\n        ...props,\n      } as const),\n      { elementType: 'div' },\n    ),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectTabOnFocus,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","selectTabOnFocus","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","unstable_hasDefault","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,wBAAwB,EACxBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,mBAAmB,KAAK,EACxBC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGR;IAEJ,MAAMS,WAAWjB,MAAMkB,MAAM,CAAc;IAE3C,MAAMC,kBAAkBlB,wBAAwB;QAC9CmB,UAAU;QACVC,MAAML,WAAW,aAAa;QAC9BM,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGtB,qBAAqB;QAC7DuB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB/B,MAAMkB,MAAM,CAAuBY;IAChE,MAAME,wBAAwBhC,MAAMkB,MAAM,CAAuBY;IAEjE9B,MAAMiC,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW/B,iBAAiB,CAACgC,OAAuBC;QACxDZ,iBAAiBY,KAAKC,KAAK;QAC3BzB,wBAAAA,kCAAAA,YAAcuB,OAAOC;IACvB;IAEA,MAAME,iBAAiBvC,MAAMkB,MAAM,CAAkC,CAAC;IAEtE,MAAMsB,aAAapC,iBAAiB,CAACiC;QACnCE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACvD;IAEA,MAAMM,eAAevC,iBAAiB,CAACiC;QACrC,OAAOE,eAAeL,OAAO,CAACO,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMM,oBAAoB5C,MAAM6C,WAAW,CAAC;QAC1C,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,MAAMzC,KAAK0C,MAAM,CACf9C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,KAAKJ,cAAcI,KAAKQ;YACxBgC,MAAM;YACN,oBAAoBjC,WAAW,aAAa;YAC5C,GAAGG,eAAe;YAClB,GAAGX,KAAK;QACV,IACA;YAAE0C,aAAa;QAAM;QAEvBxC;QACAC;QACAC;QACAE;QACAU;QACAT;QACAC;QACAwB;QACAG;QACAR;QACAS;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    selectTabOnFocus = false,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    const key = JSON.stringify(data.value);\n\n    if (!key && process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(\n        [\n          `[@fluentui/react-tabs] The value \"${data.value}\" cannot be serialized to JSON string.`,\n          'Tab component requires serializable values.',\n          'Please provide a primitive value (string, number, boolean),',\n          `or a plain object/array that doesn't contain functions, symbols, or circular references.`,\n        ].join(' '),\n      );\n    }\n\n    registeredTabs.current[key] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...focusAttributes,\n        ...props,\n      } as const),\n      { elementType: 'div' },\n    ),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectTabOnFocus,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","useMergedRefs","slot","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","selectTabOnFocus","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","unstable_hasDefault","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","key","JSON","stringify","process","env","NODE_ENV","console","error","join","onUnregister","getRegisteredTabs","useCallback","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,wBAAwB,EACxBC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAInC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,mBAAmB,KAAK,EACxBC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGR;IAEJ,MAAMS,WAAWjB,MAAMkB,MAAM,CAAc;IAE3C,MAAMC,kBAAkBlB,wBAAwB;QAC9CmB,UAAU;QACVC,MAAML,WAAW,aAAa;QAC9BM,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGtB,qBAAqB;QAC7DuB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuB/B,MAAMkB,MAAM,CAAuBY;IAChE,MAAME,wBAAwBhC,MAAMkB,MAAM,CAAuBY;IAEjE9B,MAAMiC,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMW,WAAW/B,iBAAiB,CAACgC,OAAuBC;QACxDZ,iBAAiBY,KAAKC,KAAK;QAC3BzB,wBAAAA,kCAAAA,YAAcuB,OAAOC;IACvB;IAEA,MAAME,iBAAiBvC,MAAMkB,MAAM,CAAkC,CAAC;IAEtE,MAAMsB,aAAapC,iBAAiB,CAACiC;QACnC,MAAMI,MAAMC,KAAKC,SAAS,CAACN,KAAKC,KAAK;QAErC,IAAI,CAACG,OAAOG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACjD,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE,CAAC,kCAAkC,EAAEX,KAAKC,KAAK,CAAC,sCAAsC,CAAC;gBACvF;gBACA;gBACA,CAAC,wFAAwF,CAAC;aAC3F,CAACW,IAAI,CAAC;QAEX;QAEAV,eAAeL,OAAO,CAACO,IAAI,GAAGJ;IAChC;IAEA,MAAMa,eAAe9C,iBAAiB,CAACiC;QACrC,OAAOE,eAAeL,OAAO,CAACQ,KAAKC,SAAS,CAACN,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMa,oBAAoBnD,MAAMoD,WAAW,CAAC;QAC1C,OAAO;YACL5B,eAAeO,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDK,gBAAgBA,eAAeL,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMhD,KAAKiD,MAAM,CACfrD,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,KAAKJ,cAAcI,KAAKQ;YACxBuC,MAAM;YACN,oBAAoBxC,WAAW,aAAa;YAC5C,GAAGG,eAAe;YAClB,GAAGX,KAAK;QACV,IACA;YAAEiD,aAAa;QAAM;QAEvB/C;QACAC;QACAC;QACAE;QACAU;QACAT;QACAC;QACAwB;QACAU;QACAf;QACAgB;IACF;AACF,EAAE"}

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

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

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

@@ -45,7 +45,17 @@ const useTabList_unstable = (props, ref)=>{
     });
     const registeredTabs = _react.useRef({});
     const onRegister = (0, _reactutilities.useEventCallback)((data)=>{
-        registeredTabs.current[JSON.stringify(data.value)] = data;
+        const key = JSON.stringify(data.value);
+        if (!key && process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.error([
+                `[@fluentui/react-tabs] The value "${data.value}" cannot be serialized to JSON string.`,
+                'Tab component requires serializable values.',
+                'Please provide a primitive value (string, number, boolean),',
+                `or a plain object/array that doesn't contain functions, symbols, or circular references.`
+            ].join(' '));
+        }
+        registeredTabs.current[key] = data;
     });
     const onUnregister = (0, _reactutilities.useEventCallback)((data)=>{
         delete registeredTabs.current[JSON.stringify(data.value)];

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    selectTabOnFocus = false,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...focusAttributes,\n        ...props,\n      } as const),\n      { elementType: 'div' },\n    ),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectTabOnFocus,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"names":["useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","selectTabOnFocus","size","vertical","innerRef","React","useRef","focusAttributes","useArrowNavigationGroup","circular","axis","memorizeCurrent","unstable_hasDefault","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","getIntrinsicElementProps","useMergedRefs","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqBaA;;;eAAAA;;;;iEArBU;8BACiB;gCAOjC;AAaA,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,mBAAmB,KAAK,EACxBC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGR;IAEJ,MAAMS,WAAWC,OAAMC,MAAM,CAAc;IAE3C,MAAMC,kBAAkBC,IAAAA,qCAAAA,EAAwB;QAC9CC,UAAU;QACVC,MAAMP,WAAW,aAAa;QAC9BQ,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAAA,EAAqB;QAC7DC,OAAOrB,MAAMkB,aAAa;QAC1BI,cAActB,MAAMuB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuBhB,OAAMC,MAAM,CAAuBc;IAChE,MAAME,wBAAwBjB,OAAMC,MAAM,CAAuBc;IAEjEf,OAAMkB,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGX;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMY,WAAWC,IAAAA,gCAAAA,EAAiB,CAACC,OAAuBC;QACxDd,iBAAiBc,KAAKC,KAAK;QAC3B7B,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAc2B,OAAOC;IACvB;IAEA,MAAME,iBAAiBzB,OAAMC,MAAM,CAAkC,CAAC;IAEtE,MAAMyB,aAAaL,IAAAA,gCAAAA,EAAiB,CAACE;QACnCE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE,GAAGD;IACvD;IAEA,MAAMM,eAAeR,IAAAA,gCAAAA,EAAiB,CAACE;QACrC,OAAOE,eAAeN,OAAO,CAACQ,KAAKC,SAAS,CAACL,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMM,oBAAoB9B,OAAM+B,WAAW,CAAC;QAC1C,OAAO;YACLvB,eAAeQ,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDM,gBAAgBA,eAAeN,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLa,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F7C,KAAK8C,IAAAA,6BAAAA,EAAc9C,KAAKQ;YACxBuC,MAAM;YACN,oBAAoBxC,WAAW,aAAa;YAC5C,GAAGI,eAAe;YAClB,GAAGZ,KAAK;QACV,IACA;YAAEiD,aAAa;QAAM;QAEvB/C;QACAC;QACAC;QACAE;QACAY;QACAX;QACAC;QACA4B;QACAG;QACAT;QACAU;IACF;AACF"}
+{"version":3,"sources":["../src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    selectTabOnFocus = false,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    const key = JSON.stringify(data.value);\n\n    if (!key && process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(\n        [\n          `[@fluentui/react-tabs] The value \"${data.value}\" cannot be serialized to JSON string.`,\n          'Tab component requires serializable values.',\n          'Please provide a primitive value (string, number, boolean),',\n          `or a plain object/array that doesn't contain functions, symbols, or circular references.`,\n        ].join(' '),\n      );\n    }\n\n    registeredTabs.current[key] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'tablist',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...focusAttributes,\n        ...props,\n      } as const),\n      { elementType: 'div' },\n    ),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectTabOnFocus,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"names":["useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","selectTabOnFocus","size","vertical","innerRef","React","useRef","focusAttributes","useArrowNavigationGroup","circular","axis","memorizeCurrent","unstable_hasDefault","selectedValue","setSelectedValue","useControllableState","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","useEventCallback","event","data","value","registeredTabs","onRegister","key","JSON","stringify","process","env","NODE_ENV","console","error","join","onUnregister","getRegisteredTabs","useCallback","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqBaA;;;eAAAA;;;;iEArBU;8BACiB;gCAOjC;AAaA,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,aAAa,aAAa,EAC1BC,0BAA0B,IAAI,EAC9BC,WAAW,KAAK,EAChBC,WAAW,EACXC,mBAAmB,KAAK,EACxBC,OAAO,QAAQ,EACfC,WAAW,KAAK,EACjB,GAAGR;IAEJ,MAAMS,WAAWC,OAAMC,MAAM,CAAc;IAE3C,MAAMC,kBAAkBC,IAAAA,qCAAAA,EAAwB;QAC9CC,UAAU;QACVC,MAAMP,WAAW,aAAa;QAC9BQ,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAAA,EAAqB;QAC7DC,OAAOrB,MAAMkB,aAAa;QAC1BI,cAActB,MAAMuB,oBAAoB;QACxCC,cAAcC;IAChB;IAEA,4DAA4D;IAC5D,8FAA8F;IAC9F,qFAAqF;IACrF,0CAA0C;IAC1C,MAAMC,uBAAuBhB,OAAMC,MAAM,CAAuBc;IAChE,MAAME,wBAAwBjB,OAAMC,MAAM,CAAuBc;IAEjEf,OAAMkB,SAAS,CAAC;QACdD,sBAAsBE,OAAO,GAAGH,qBAAqBG,OAAO;QAC5DH,qBAAqBG,OAAO,GAAGX;IACjC,GAAG;QAACA;KAAc;IAElB,MAAMY,WAAWC,IAAAA,gCAAAA,EAAiB,CAACC,OAAuBC;QACxDd,iBAAiBc,KAAKC,KAAK;QAC3B7B,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAc2B,OAAOC;IACvB;IAEA,MAAME,iBAAiBzB,OAAMC,MAAM,CAAkC,CAAC;IAEtE,MAAMyB,aAAaL,IAAAA,gCAAAA,EAAiB,CAACE;QACnC,MAAMI,MAAMC,KAAKC,SAAS,CAACN,KAAKC,KAAK;QAErC,IAAI,CAACG,OAAOG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACjD,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE,CAAC,kCAAkC,EAAEX,KAAKC,KAAK,CAAC,sCAAsC,CAAC;gBACvF;gBACA;gBACA,CAAC,wFAAwF,CAAC;aAC3F,CAACW,IAAI,CAAC;QAEX;QAEAV,eAAeN,OAAO,CAACQ,IAAI,GAAGJ;IAChC;IAEA,MAAMa,eAAef,IAAAA,gCAAAA,EAAiB,CAACE;QACrC,OAAOE,eAAeN,OAAO,CAACS,KAAKC,SAAS,CAACN,KAAKC,KAAK,EAAE;IAC3D;IAEA,MAAMa,oBAAoBrC,OAAMsC,WAAW,CAAC;QAC1C,OAAO;YACL9B,eAAeQ,qBAAqBG,OAAO;YAC3CF,uBAAuBA,sBAAsBE,OAAO;YACpDM,gBAAgBA,eAAeN,OAAO;QACxC;IACF,GAAG,EAAE;IAEL,OAAO;QACLoB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FpD,KAAKqD,IAAAA,6BAAAA,EAAcrD,KAAKQ;YACxB8C,MAAM;YACN,oBAAoB/C,WAAW,aAAa;YAC5C,GAAGI,eAAe;YAClB,GAAGZ,KAAK;QACV,IACA;YAAEwD,aAAa;QAAM;QAEvBtD;QACAC;QACAC;QACAE;QACAY;QACAX;QACAC;QACA4B;QACAU;QACAhB;QACAiB;IACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.7.1",
+  "version": "9.7.3",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,12 +18,12 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.73",
-    "@fluentui/react-jsx-runtime": "^9.0.51",
-    "@fluentui/react-shared-contexts": "^9.22.0",
-    "@fluentui/react-tabster": "^9.24.1",
+    "@fluentui/react-context-selector": "^9.1.75",
+    "@fluentui/react-jsx-runtime": "^9.0.53",
+    "@fluentui/react-shared-contexts": "^9.23.1",
+    "@fluentui/react-tabster": "^9.24.3",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.18.21",
+    "@fluentui/react-utilities": "^9.18.23",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },