@fluentui/react-tabs 9.3.16 → 9.3.17

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Thu, 25 May 2023 09:57:45 GMT",
+      "date": "Wed, 31 May 2023 06:43:03 GMT",
+      "tag": "@fluentui/react-tabs_v9.3.17",
+      "version": "9.3.17",
+      "comments": {
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
+            "comment": "chore: Update Griffel to v1.5.7."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.22",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.7.5",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.9.2",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 May 2023 10:00:48 GMT",
       "tag": "@fluentui/react-tabs_v9.3.16",
       "version": "9.3.16",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Thu, 25 May 2023 09:57:45 GMT and should not be manually modified.
+This log was last generated on Wed, 31 May 2023 06:43:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.17)
+
+Wed, 31 May 2023 06:43:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.16..@fluentui/react-tabs_v9.3.17)
+
+### Patches
+
+- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-tabster to v9.7.5 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+
 ## [9.3.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.16)
 
-Thu, 25 May 2023 09:57:45 GMT 
+Thu, 25 May 2023 10:00:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.15..@fluentui/react-tabs_v9.3.16)
 
 ### Patches

package/lib/Tab.js

@@ -1,2 +1 @@
 export * from './components/Tab/index';
-//# sourceMappingURL=Tab.js.map

package/lib/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/Tab.ts"],"sourcesContent":["export * from './components/Tab/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["Tab.ts"],"sourcesContent":["export * from './components/Tab/index';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB"}

package/lib/TabList.js

@@ -1,2 +1 @@
 export * from './components/TabList/index';
-//# sourceMappingURL=TabList.js.map

package/lib/TabList.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/TabList.ts"],"sourcesContent":["export * from './components/TabList/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["TabList.ts"],"sourcesContent":["export * from './components/TabList/index';\n"],"names":[],"mappings":"AAAA,cAAc,6BAA6B"}

package/lib/components/Tab/Tab.js

@@ -5,12 +5,10 @@ import { useTabStyles_unstable } from './useTabStyles.styles';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * A tab provides a selectable item in a tab list.
- */
-export const Tab = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useTab_unstable(props, ref);
-  useTabStyles_unstable(state);
-  useCustomStyleHook_unstable('useTabStyles_unstable')(state);
-  return renderTab_unstable(state);
+ */ export const Tab = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTab_unstable(props, ref);
+    useTabStyles_unstable(state);
+    useCustomStyleHook_unstable('useTabStyles_unstable')(state);
+    return renderTab_unstable(state);
 });
 Tab.displayName = 'Tab';
-//# sourceMappingURL=Tab.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,eAAe,QAAQ;AAChC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AAGtC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,GAAA,gBAAqCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjF,MAAMC,KAAA,GAAQR,eAAA,CAAgBM,KAAA,EAAOC,GAAA;EAErCL,qBAAA,CAAsBM,KAAA;EAEtBL,2BAAA,CAA4B,yBAAyBK,KAAA;EAErD,OAAOP,kBAAA,CAAmBO,KAAA;AAC5B;AAEAJ,GAAA,CAAIK,WAAW,GAAG"}
+{"version":3,"sources":["Tab.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;AAG9D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,oBAAqCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjF,MAAMC,QAAQR,gBAAgBM,OAAOC;IAErCL,sBAAsBM;IAEtBL,4BAA4B,yBAAyBK;IAErD,OAAOP,mBAAmBO;AAC5B,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}

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

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=Tab.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"names":[],"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\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"],"mappings":"AAAA"}
+{"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"}

package/lib/components/Tab/index.js

@@ -4,4 +4,3 @@ export * from './renderTab';
 export * from './useTab';
 export * from './useTabStyles.styles';
 export * from './useTabAnimatedIndicator.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Tab/index.ts"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles.styles';\nexport * from './useTabAnimatedIndicator.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles.styles';\nexport * from './useTabAnimatedIndicator.styles';\n"],"names":[],"mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,wBAAwB;AACtC,cAAc,mCAAmC"}

package/lib/components/Tab/renderTab.js

@@ -1,16 +1,11 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } 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
-  }));
+ */ 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
+    }));
 };
-//# sourceMappingURL=renderTab.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderTab_unstable","state","slots","slotProps","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className"],"sources":["../../../src/components/Tab/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"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,kBAAA,GAAsBC,KAAA,IAAoB;EACrD,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAuBE,KAAA;EAEpD,oBACEH,aAbJ,CAaKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,IAAI,iBAAIP,aAdrB,CAcsBI,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,GAC5C,CAACJ,KAAA,CAAMK,QAAQ,iBAAIR,aAf1B,CAe2BI,KAAA,CAAMK,OAAO,EAAKJ,SAAA,CAAUI,OAAO,GACvD,CAACN,KAAA,CAAMO,QAAQ,IAAI,CAACP,KAAA,CAAMK,QAAQ,IAAIL,KAAA,CAAMQ,6BAA6B,KAAKC,SAAA,iBAC7EZ,aAjBR,CAiBSI,KAAA,CAAMK,OAAO;IAAE,GAAGJ,SAAA,CAAUI,OAAO;IAAEI,SAAA,EAAWV,KAAA,CAAMQ;;AAI/D"}
+{"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"}

package/lib/components/Tab/useTab.js

@@ -9,75 +9,72 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
  *
  * @param props - props from this instance of Tab
  * @param ref - reference to root HTMLElement of Tab
- */
-export const useTab_unstable = (props, ref) => {
-  const {
-    content,
-    disabled: tabDisabled = false,
-    icon,
-    onClick,
-    value
-  } = props;
-  const appearance = useTabListContext_unstable(ctx => ctx.appearance);
-  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);
-  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);
-  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);
-  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);
-  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);
-  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);
-  const size = useTabListContext_unstable(ctx => ctx.size);
-  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);
-  const disabled = listDisabled || tabDisabled;
-  const innerRef = React.useRef(null);
-  const onTabClick = useEventCallback(mergeCallbacks(onClick, event => onSelect(event, {
-    value
-  })));
-  React.useEffect(() => {
-    onRegister({
-      value,
-      ref: innerRef
+ */ export const useTab_unstable = (props, ref)=>{
+    const { content , disabled: tabDisabled = false , icon , onClick , value  } = props;
+    const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);
+    const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);
+    const listDisabled = useTabListContext_unstable((ctx)=>ctx.disabled);
+    const selected = useTabListContext_unstable((ctx)=>ctx.selectedValue === value);
+    const onRegister = useTabListContext_unstable((ctx)=>ctx.onRegister);
+    const onUnregister = useTabListContext_unstable((ctx)=>ctx.onUnregister);
+    const onSelect = useTabListContext_unstable((ctx)=>ctx.onSelect);
+    const size = useTabListContext_unstable((ctx)=>ctx.size);
+    const vertical = useTabListContext_unstable((ctx)=>!!ctx.vertical);
+    const disabled = listDisabled || tabDisabled;
+    const innerRef = React.useRef(null);
+    const onTabClick = useEventCallback(mergeCallbacks(onClick, (event)=>onSelect(event, {
+            value
+        })));
+    React.useEffect(()=>{
+        onRegister({
+            value,
+            ref: innerRef
+        });
+        return ()=>{
+            onUnregister({
+                value,
+                ref: innerRef
+            });
+        };
+    }, [
+        onRegister,
+        onUnregister,
+        innerRef,
+        value
+    ]);
+    const iconShorthand = resolveShorthand(icon);
+    const contentShorthand = resolveShorthand(content, {
+        required: true,
+        defaultProps: {
+            children: props.children
+        }
     });
-    return () => {
-      onUnregister({
+    return {
+        components: {
+            root: 'button',
+            icon: 'span',
+            content: 'span'
+        },
+        root: getNativeElementProps('button', {
+            ref: useMergedRefs(ref, innerRef),
+            role: 'tab',
+            type: 'button',
+            // aria-selected undefined indicates it is not selectable
+            // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
+            'aria-selected': disabled ? undefined : `${selected}`,
+            ...props,
+            disabled,
+            onClick: onTabClick
+        }),
+        icon: iconShorthand,
+        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
+        content: contentShorthand,
+        appearance,
+        contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,
+        disabled,
+        selected,
+        size,
         value,
-        ref: innerRef
-      });
+        vertical
     };
-  }, [onRegister, onUnregister, innerRef, value]);
-  const iconShorthand = resolveShorthand(icon);
-  const contentShorthand = resolveShorthand(content, {
-    required: true,
-    defaultProps: {
-      children: props.children
-    }
-  });
-  return {
-    components: {
-      root: 'button',
-      icon: 'span',
-      content: 'span'
-    },
-    root: getNativeElementProps('button', {
-      ref: useMergedRefs(ref, innerRef),
-      role: 'tab',
-      type: 'button',
-      // aria-selected undefined indicates it is not selectable
-      // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
-      'aria-selected': disabled ? undefined : `${selected}`,
-      ...props,
-      disabled,
-      onClick: onTabClick
-    }),
-    icon: iconShorthand,
-    iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
-    content: contentShorthand,
-    appearance,
-    contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,
-    disabled,
-    selected,
-    size,
-    value,
-    vertical
-  };
 };
-//# sourceMappingURL=useTab.js.map

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

@@ -1 +1 @@
-{"version":3,"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"],"sources":["../../../src/components/Tab/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"],"mappings":"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"}
+{"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"}

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":["../../../src/components/Tab/useTabAnimatedIndicator.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\n\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};\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});\n\nconst calculateTabRect = (element: HTMLElement) => {\n  if (element) {\n    const parentRect = element.parentElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };\n    const tabRect = element.getBoundingClientRect();\n\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};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n  const element =\n    value !== undefined && value !== null ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n  return element ? calculateTabRect(element) : undefined;\n};\n\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n  const { disabled, selected, vertical } = state;\n\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n  const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n  const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n  React.useEffect(() => {\n    if (lastAnimatedFrom) {\n      setAnimationValues({ offset: 0, scale: 1 });\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\n    if (\n      selectedTabRect &&\n      previousSelectedTabRect &&\n      previousSelectedValue &&\n      lastAnimatedFrom !== previousSelectedValue\n    ) {\n      const offset = vertical\n        ? previousSelectedTabRect.y - selectedTabRect.y\n        : previousSelectedTabRect.x - selectedTabRect.x;\n\n      const scale = vertical\n        ? previousSelectedTabRect.height / selectedTabRect.height\n        : previousSelectedTabRect.width / selectedTabRect.width;\n\n      setAnimationValues({ offset, scale });\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\n  // do not apply any animation if the tab is disabled\n  if (disabled) {\n    return state;\n  }\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\n  state.root.className = mergeClasses(\n    state.root.className,\n    selected && activeIndicatorStyles.base,\n    selected && animating && activeIndicatorStyles.animated,\n    selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n  );\n\n  const rootCssVars = {\n    [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n    [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n  };\n\n  state.root.style = {\n    ...rootCssVars,\n    ...state.root.style,\n  };\n\n  return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AACrD,SAASC,0BAA0B,QAAQ;AAE3C,SAASC,MAAM,QAAQ;AAEvB;AACA,MAAMC,4BAAA,GAA+B;EACnCC,SAAA,EAAW;EACXC,QAAA,EAAU;AACZ;AAEA,MAAMC,wBAAA,gBAA2BR,QAAA;EAAAS,IAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAF,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EAgCjC;AAEA,MAAMC,gBAAA,GAAoBC,OAAA,IAAyB;EACjD,IAAIA,OAAA,EAAS;QACQC,sBAAA;IAAnB,MAAMC,UAAA,GAAa,EAAAD,sBAAA,GAAAD,OAAA,CAAQG,aAAa,cAArBF,sBAAA,uBAAAA,sBAAA,CAAuBG,qBAAA,OAA2B;MAAEC,CAAA,EAAG;MAAGC,CAAA,EAAG;MAAGC,KAAA,EAAO;MAAGC,MAAA,EAAQ;IAAE;IACvG,MAAMC,OAAA,GAAUT,OAAA,CAAQI,qBAAqB;IAE7C,OAAO;MACLC,CAAA,EAAGI,OAAA,CAAQJ,CAAC,GAAGH,UAAA,CAAWG,CAAC;MAC3BC,CAAA,EAAGG,OAAA,CAAQH,CAAC,GAAGJ,UAAA,CAAWI,CAAC;MAC3BC,KAAA,EAAOE,OAAA,CAAQF,KAAK;MACpBC,MAAA,EAAQC,OAAA,CAAQD;IAClB;EACF;EACA,OAAOE,SAAA;AACT;AAEA,MAAMC,oBAAA,GAAuBA,CAACC,cAAA,EAAiDC,KAAA,KAAqB;MAExDC,8BAAA;EAD1C,MAAMd,OAAA,GACJa,KAAA,KAAUH,SAAA,IAAaG,KAAA,KAAU,IAAI,GAAG,CAAAC,8BAAA,GAAAF,cAAc,CAACG,IAAA,CAAKC,SAAS,CAACH,KAAA,EAAO,cAArCC,8BAAA,uBAAAA,8BAAA,CAAuCG,GAAA,CAAIC,OAAO,GAAGR,SAAS;EACxG,OAAOV,OAAA,GAAUD,gBAAA,CAAiBC,OAAA,IAAWU,SAAS;AACxD;AAEA;;;AAGA,OAAO,MAAMS,sCAAA,GAA0CC,KAAA,IAA8B;EACnF,MAAM;IAAEC,QAAA;IAAUC,QAAA;IAAU1B;EAAQ,CAAE,GAAGwB,KAAA;EAEzC,MAAMG,qBAAA,GAAwBxC,wBAAA;EAC9B,MAAM,CAACyC,gBAAA,EAAkBC,mBAAA,CAAoB,GAAGnD,KAAA,CAAMoD,QAAQ;EAC9D,MAAM,CAACC,eAAA,EAAiBC,kBAAA,CAAmB,GAAGtD,KAAA,CAAMoD,QAAQ,CAAC;IAAEG,MAAA,EAAQ;IAAGC,KAAA,EAAO;EAAE;EACnF,MAAMC,iBAAA,GAAoBrD,0BAAA,CAA2BsD,GAAA,IAAOA,GAAA,CAAID,iBAAiB;EAEjFzD,KAAA,CAAM2D,SAAS,CAAC,MAAM;IACpB,IAAIT,gBAAA,EAAkB;MACpBI,kBAAA,CAAmB;QAAEC,MAAA,EAAQ;QAAGC,KAAA,EAAO;MAAE;IAC3C;EACF,GAAG,CAACN,gBAAA,CAAiB;EAErB,IAAIF,QAAA,EAAU;IACZ,MAAM;MAAEY,qBAAA;MAAuBC,aAAA;MAAevB;IAAc,CAAE,GAAGmB,iBAAA;IACjE,MAAMK,uBAAA,GAA0BzB,oBAAA,CAAqBC,cAAA,EAAgBsB,qBAAA;IACrE,MAAMG,eAAA,GAAkB1B,oBAAA,CAAqBC,cAAA,EAAgBuB,aAAA;IAE7D,IACEE,eAAA,IACAD,uBAAA,IACAF,qBAAA,IACAV,gBAAA,KAAqBU,qBAAA,EACrB;MACA,MAAML,MAAA,GAASjC,QAAA,GACXwC,uBAAA,CAAwB9B,CAAC,GAAG+B,eAAA,CAAgB/B,CAAC,GAC7C8B,uBAAA,CAAwB/B,CAAC,GAAGgC,eAAA,CAAgBhC,CAAC;MAEjD,MAAMyB,KAAA,GAAQlC,QAAA,GACVwC,uBAAA,CAAwB5B,MAAM,GAAG6B,eAAA,CAAgB7B,MAAM,GACvD4B,uBAAA,CAAwB7B,KAAK,GAAG8B,eAAA,CAAgB9B,KAAK;MAEzDqB,kBAAA,CAAmB;QAAEC,MAAA;QAAQC;MAAM;MACnCL,mBAAA,CAAoBS,qBAAA;IACtB;EACF,OAAO,IAAIV,gBAAA,EAAkB;IAC3B;IACA;IACAC,mBAAA,CAAoBf,SAAA;EACtB;EAEA;EACA,IAAIW,QAAA,EAAU;IACZ,OAAOD,KAAA;EACT;EAEA;EACA;EACA,MAAMkB,SAAA,GAAYX,eAAA,CAAgBE,MAAM,KAAK,KAAKF,eAAA,CAAgBG,KAAK,KAAK;EAE5EV,KAAA,CAAMmB,IAAI,CAACC,SAAS,GAAGhE,YAAA,CACrB4C,KAAA,CAAMmB,IAAI,CAACC,SAAS,EACpBlB,QAAA,IAAYC,qBAAA,CAAsBvC,IAAI,EACtCsC,QAAA,IAAYgB,SAAA,IAAaf,qBAAA,CAAsBpC,QAAQ,EACvDmC,QAAA,KAAa1B,QAAA,GAAW2B,qBAAA,CAAsB3B,QAAQ,GAAG2B,qBAAA,CAAsB9B,UAAU,CAAD;EAG1F,MAAMgD,WAAA,GAAc;IAClB,CAAC7D,4BAAA,CAA6BC,SAAS,GAAI,GAAE8C,eAAA,CAAgBE,MAAO,IAAG;IACvE,CAACjD,4BAAA,CAA6BE,QAAQ,GAAI,GAAE6C,eAAA,CAAgBG,KAAM;EACpE;EAEAV,KAAA,CAAMmB,IAAI,CAACG,KAAK,GAAG;IACjB,GAAGD,WAAW;IACd,GAAGrB,KAAA,CAAMmB,IAAI,CAACG;EAChB;EAEA,OAAOtB,KAAA;AACT"}
+{"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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"}

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":["../../../src/components/Tab/useTabStyles.styles.ts"],"sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n  root: 'fui-Tab',\n  icon: 'fui-Tab__icon',\n  content: 'fui-Tab__content',\n};\n\nconst reservedSpaceClassNames = {\n  content: 'fui-Tab__content--reserved-space',\n};\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/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst 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\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\n/**\n * Focus styles for the root slot\n */\nconst 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    {\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\n/** Indicator styles for when pending selection */\nconst 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});\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/**\n * Styles for the icon slot.\n */\nconst 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/**\n * Styles for the content slot (children)\n */\nconst 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/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\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\n  const { appearance, disabled, selected, size, vertical } = state;\n\n  state.root.className = mergeClasses(\n    tabClassNames.root,\n    rootStyles.base,\n    vertical ? rootStyles.vertical : rootStyles.horizontal,\n    size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n    size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n    size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n    focusStyles.base,\n    !disabled && appearance === 'subtle' && rootStyles.subtle,\n    !disabled && appearance === 'transparent' && rootStyles.transparent,\n    !disabled && selected && rootStyles.selected,\n    disabled && rootStyles.disabled,\n\n    // pending indicator (before pseudo element)\n    pendingIndicatorStyles.base,\n    size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n    size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n    size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal),\n    disabled && pendingIndicatorStyles.disabled,\n\n    // active indicator (after pseudo element)\n    selected && activeIndicatorStyles.base,\n    selected && !disabled && activeIndicatorStyles.selected,\n    selected &&\n      size === 'small' &&\n      (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n    selected &&\n      size === 'medium' &&\n      (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n    selected &&\n      size === 'large' &&\n      (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal),\n    selected && disabled && activeIndicatorStyles.disabled,\n\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      tabClassNames.icon,\n      iconStyles.base,\n      iconStyles[size],\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  // This needs to be before state.content.className is updated\n  if (state.contentReservedSpaceClassName !== undefined) {\n    state.contentReservedSpaceClassName = mergeClasses(\n      reservedSpaceClassNames.content,\n      contentStyles.base,\n      size === 'large' ? contentStyles.largeSelected : contentStyles.selected,\n      state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n      contentStyles.placeholder,\n      state.content.className,\n    );\n  }\n\n  state.content.className = mergeClasses(\n    tabClassNames.content,\n    contentStyles.base,\n    size === 'large' && contentStyles.large,\n    selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected),\n    state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n    state.content.className,\n  );\n\n  useTabAnimatedIndicatorStyles_unstable(state);\n\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","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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"}

package/lib/components/TabList/TabList.js

@@ -6,13 +6,11 @@ import { useTabListContextValues_unstable } from './useTabListContextValues';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * A tab list provides single selection from a set of tabs.
- */
-export const TabList = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useTabList_unstable(props, ref);
-  const contextValues = useTabListContextValues_unstable(state);
-  useTabListStyles_unstable(state);
-  useCustomStyleHook_unstable('useTabListStyles_unstable')(state);
-  return renderTabList_unstable(state, contextValues);
+ */ export const TabList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTabList_unstable(props, ref);
+    const contextValues = useTabListContextValues_unstable(state);
+    useTabListStyles_unstable(state);
+    useCustomStyleHook_unstable('useTabListStyles_unstable')(state);
+    return renderTabList_unstable(state, contextValues);
 });
 TabList.displayName = 'TabList';
-//# sourceMappingURL=TabList.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","useCustomStyleHook_unstable","TabList","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/TabList/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles.styles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n  const state = useTabList_unstable(props, ref);\n  const contextValues = useTabListContextValues_unstable(state);\n\n  useTabListStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTabListStyles_unstable')(state);\n\n  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAG1C,SAASC,gCAAgC,QAAQ;AACjD,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,OAAA,gBAA6CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzF,MAAMC,KAAA,GAAQT,mBAAA,CAAoBO,KAAA,EAAOC,GAAA;EACzC,MAAME,aAAA,GAAgBP,gCAAA,CAAiCM,KAAA;EAEvDP,yBAAA,CAA0BO,KAAA;EAE1BL,2BAAA,CAA4B,6BAA6BK,KAAA;EAEzD,OAAOR,sBAAA,CAAuBQ,KAAA,EAAOC,aAAA;AACvC;AAEAL,OAAA,CAAQM,WAAW,GAAG"}
+{"version":3,"sources":["TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles.styles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n  const state = useTabList_unstable(props, ref);\n  const contextValues = useTabListContextValues_unstable(state);\n\n  useTabListStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTabListStyles_unstable')(state);\n\n  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","useCustomStyleHook_unstable","TabList","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,iCAAiCM;IAEvDP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}