@fluentui/react-tabs 9.2.4 → 9.3.1

package/CHANGELOG.json

@@ -2,7 +2,81 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Wed, 15 Feb 2023 11:41:24 GMT",
+      "date": "Fri, 10 Mar 2023 07:11:11 GMT",
+      "tag": "@fluentui/react-tabs_v9.3.1",
+      "version": "9.3.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.12",
+            "commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.5.5",
+            "commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.6.2",
+            "commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 08 Mar 2023 17:42:46 GMT",
+      "tag": "@fluentui/react-tabs_v9.3.0",
+      "version": "9.3.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56",
+            "comment": "Fixed missing outline when forced-colors active"
+          }
+        ],
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "af441d629b1b47b0699c6aa9e977388786f5a40e",
+            "comment": "feat: Adding calls to custom style hooks derived from context."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.11",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.5.4",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.6.1",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 15 Feb 2023 11:44:52 GMT",
       "tag": "@fluentui/react-tabs_v9.2.4",
       "version": "9.2.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Wed, 15 Feb 2023 11:41:24 GMT and should not be manually modified.
+This log was last generated on Fri, 10 Mar 2023 07:11:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.1)
+
+Fri, 10 Mar 2023 07:11:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.0..@fluentui/react-tabs_v9.3.1)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.1.12 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
+- Bump @fluentui/react-tabster to v9.5.5 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
+- Bump @fluentui/react-utilities to v9.6.2 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
+
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.0)
+
+Wed, 08 Mar 2023 17:42:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.2.4..@fluentui/react-tabs_v9.3.0)
+
+### Minor changes
+
+- feat: Adding calls to custom style hooks derived from context. ([PR #27077](https://github.com/microsoft/fluentui/pull/27077) by gcox@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.11 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-tabster to v9.5.4 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+
+### Patches
+
+- Fixed missing outline when forced-colors active ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by gcox@microsoft.com)
+
 ## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.2.4)
 
-Wed, 15 Feb 2023 11:41:24 GMT 
+Wed, 15 Feb 2023 11:44:52 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.2.3..@fluentui/react-tabs_v9.2.4)
 
 ### Patches

package/lib/components/Tab/Tab.js

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { useTab_unstable } from './useTab';
 import { renderTab_unstable } from './renderTab';
 import { useTabStyles_unstable } from './useTabStyles';
+import { useCustomStyleHooks_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);
+  const {
+    useTabStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderTab_unstable(state);
 });
 Tab.displayName = 'Tab';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,QAAQ,UAAU;AAC1C,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,qBAAqB,QAAQ,gBAAgB;AAItD;;;AAGA,OAAO,MAAMC,GAAG,gBAAkCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChF,MAAMC,KAAK,GAAGP,eAAe,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEzCJ,qBAAqB,CAACK,KAAK,CAAC;EAC5B,OAAON,kBAAkB,CAACM,KAAK,CAAC;AAClC,CAAC,CAAC;AAEFJ,GAAG,CAACK,WAAW,GAAG,KAAK","names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","Tab","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/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';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"]}
+{"version":3,"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHooks_unstable","Tab","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-tabs/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';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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  const { useTabStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,QAAQ,UAAU;AAC1C,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,qBAAqB,QAAQ,gBAAgB;AAGtD,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,GAAG,gBAAkCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChF,MAAMC,KAAK,GAAGR,eAAe,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEzCL,qBAAqB,CAACM,KAAK,CAAC;EAE5B,MAAM;IAAEN,qBAAqB,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACjFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,kBAAkB,CAACO,KAAK,CAAC;AAClC,CAAC,CAAC;AAEFJ,GAAG,CAACM,WAAW,GAAG,KAAK"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,kBAAkB,GAAIC,KAAe,IAAI;EACpD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAWE,KAAK,CAAC;EAEtD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,IAAI,iBAAIP,oBAACI,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI,EAChD,CAACJ,KAAK,CAACK,QAAQ,iBAAIR,oBAACI,KAAK,CAACK,OAAO;IAAA,GAAKJ,SAAS,CAACI;EAAO,EAAI,EAC3D,CAACN,KAAK,CAACO,QAAQ,IAAI,CAACP,KAAK,CAACK,QAAQ,IAAIL,KAAK,CAACQ,6BAA6B,KAAKC,SAAS,iBACtFZ,oBAACI,KAAK,CAACK,OAAO;IAAA,GAAKJ,SAAS,CAACI,OAAO;IAAEI,SAAS,EAAEV,KAAK,CAACQ;EAA6B,EACrF,CACU;AAEjB,CAAC","names":["React","getSlots","renderTab_unstable","state","slots","slotProps","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/renderTab.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"]}
+{"version":3,"names":["React","getSlots","renderTab_unstable","state","slots","slotProps","createElement","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className"],"sources":["../src/packages/react-components/react-tabs/src/components/Tab/renderTab.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,kBAAkB,GAAIC,KAAe,IAAI;EACpD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAWE,KAAK,CAAC;EAEtD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,IAAI,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,EAChD,CAACL,KAAK,CAACM,QAAQ,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,OAAO;IAAA,GAAKL,SAAS,CAACK;EAAO,EAAI,EAC3D,CAACP,KAAK,CAACQ,QAAQ,IAAI,CAACR,KAAK,CAACM,QAAQ,IAAIN,KAAK,CAACS,6BAA6B,KAAKC,SAAS,iBACtFb,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,OAAO;IAAA,GAAKL,SAAS,CAACK,OAAO;IAAEI,SAAS,EAAEX,KAAK,CAACS;EAA6B,EACrF,CACU;AAEjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","value","appearance","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onClick","event","useEffect","iconShorthand","contentShorthand","required","defaultProps","children","components","root","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } 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, 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 onClick = useEventCallback((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,\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"]}
+{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","value","appearance","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onClick","event","useEffect","iconShorthand","contentShorthand","required","defaultProps","children","components","root","role","type","undefined","iconOnly","Boolean","contentReservedSpaceClassName"],"sources":["../src/packages/react-components/react-tabs/src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } 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, 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 onClick = useEventCallback((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,\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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"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","mergeClasses","shorthands","useTabListContext_unstable","tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","vertical","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","base","animated","horizontal","rootCssVars","style"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.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"]}
+{"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","parentRect","_a","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","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/packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.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":"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"}

package/lib/components/Tab/useTabStyles.js

@@ -144,8 +144,6 @@ const useRootStyles = /*#__PURE__*/__styles({
  */
 const useFocusStyles = /*#__PURE__*/__styles({
   base: {
-    Brovlpu: "ftqa4ok",
-    B486eqv: "f2hkw1w",
     B8q5s1w: "f8hki3x",
     Bci5o5g: ["f1d2448m", "ffh67wi"],
     n8qw10: "f1bjia2o",
@@ -157,8 +155,6 @@ const useFocusStyles = /*#__PURE__*/__styles({
     Bhxq17a: "f1vjpng2"
   }
 }, {
-  f: [".ftqa4ok:focus{outline-style:none;}"],
-  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}", ".f1way5bb[data-fui-focus-visible]{outline-color:transparent;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqa318h[data-fui-focus-visible]{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", ".f1vjpng2[data-fui-focus-visible]{z-index:1;}"]
 });
 /** Indicator styles for when pending selection */

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","useFocusStyles","usePendingIndicatorStyles","useActiveIndicatorStyles","useIconStyles","useContentStyles","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","disabled","selected","size","vertical","className","base","horizontal","smallVertical","smallHorizontal","mediumVertical","mediumHorizontal","largeVertical","largeHorizontal","subtle","transparent","contentReservedSpaceClassName","undefined","largeSelected","iconBefore","noIconBefore","placeholder","large"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/useTabStyles.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';\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    ...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});\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"]}
+{"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/packages/react-components/react-tabs/src/components/Tab/useTabStyles.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';\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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"}

package/lib/components/TabList/TabList.js

@@ -3,6 +3,7 @@ import { useTabList_unstable } from './useTabList';
 import { renderTabList_unstable } from './renderTabList';
 import { useTabListStyles_unstable } from './useTabListStyles';
 import { useTabListContextValues_unstable } from './useTabListContextValues';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * A tab list provides single selection from a set of tabs.
  */
@@ -10,6 +11,10 @@ export const TabList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTabList_unstable(props, ref);
   const contextValues = useTabListContextValues_unstable(state);
   useTabListStyles_unstable(state);
+  const {
+    useTabListStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderTabList_unstable(state, contextValues);
 });
 TabList.displayName = 'TabList';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAG9D,SAASC,gCAAgC,QAAQ,2BAA2B;AAE5E;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGR,mBAAmB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGN,gCAAgC,CAACK,KAAK,CAAC;EAE7DN,yBAAyB,CAACM,KAAK,CAAC;EAChC,OAAOP,sBAAsB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACM,WAAW,GAAG,SAAS","names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","TabList","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/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';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\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  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}
+{"version":3,"names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","useCustomStyleHooks_unstable","TabList","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-tabs/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';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHooks_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  const { useTabListStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAG9D,SAASC,gCAAgC,QAAQ,2BAA2B;AAC5E,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGT,mBAAmB,CAACO,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGP,gCAAgC,CAACM,KAAK,CAAC;EAE7DP,yBAAyB,CAACO,KAAK,CAAC;EAEhC,MAAM;IAAEP,yBAAyB,EAAES;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EACrFO,eAAe,CAACF,KAAK,CAAC;EAEtB,OAAOR,sBAAsB,CAACQ,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACO,WAAW,GAAG,SAAS"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAIpF,MAAMC,0BAA0B,GAAwB;EACtDC,UAAU,EAAE,aAAa;EACzBC,uBAAuB,EAAE,IAAI;EAC7BC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAEC,SAAS;EACxBC,UAAU,EAAE,MAAK;IACf;EAAA,CACD;EACDC,YAAY,EAAE,MAAK;IACjB;EAAA,CACD;EACDC,QAAQ,EAAE,MAAK;IACb;EAAA,CACD;EACDC,iBAAiB,EAAE,MAAK;IACtB,OAAO;MACLC,cAAc,EAAE;KACjB;EACH,CAAC;EACDC,IAAI,EAAE,QAAQ;EACdC,QAAQ,EAAE;CACX;AAED,OAAO,MAAMC,cAAc,gBAAiCf,aAAa,CACvEO,SAAS,CACsB;AAEjC,OAAO,MAAMS,eAAe,GAAGD,cAAc,CAACE,QAAQ;AACtD,OAAO,MAAMC,0BAA0B,GAAOC,QAAiD,IAC7FlB,kBAAkB,CAACc,cAAc,EAAE,CAACK,GAAG,GAAGlB,0BAA0B,KAAKiB,QAAQ,CAACC,GAAG,CAAC,CAAC","names":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n};\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(\n  undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n  useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"]}
+{"version":3,"names":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"sources":["../src/packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n};\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(\n  undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n  useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAIpF,MAAMC,0BAA0B,GAAwB;EACtDC,UAAU,EAAE,aAAa;EACzBC,uBAAuB,EAAE,IAAI;EAC7BC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAEC,SAAS;EACxBC,UAAU,EAAEA,CAAA,KAAK;IACf;EAAA,CACD;EACDC,YAAY,EAAEA,CAAA,KAAK;IACjB;EAAA,CACD;EACDC,QAAQ,EAAEA,CAAA,KAAK;IACb;EAAA,CACD;EACDC,iBAAiB,EAAEA,CAAA,KAAK;IACtB,OAAO;MACLC,cAAc,EAAE;KACjB;EACH,CAAC;EACDC,IAAI,EAAE,QAAQ;EACdC,QAAQ,EAAE;CACX;AAED,OAAO,MAAMC,cAAc,gBAAiCf,aAAa,CACvEO,SAAS,CACsB;AAEjC,OAAO,MAAMS,eAAe,GAAGD,cAAc,CAACE,QAAQ;AACtD,OAAO,MAAMC,0BAA0B,GAAOC,QAAiD,IAC7FlB,kBAAkB,CAACc,cAAc,EAAE,CAACK,GAAG,GAAGlB,0BAA0B,KAAKiB,QAAQ,CAACC,GAAG,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,eAAe,QAAQ,kBAAkB;AAElD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,oBAACM,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BR,oBAACE,eAAe;IAACO,KAAK,EAAEJ,aAAa,CAACK;EAAO,GAAGN,KAAK,CAACI,IAAI,CAACG,QAAQ,CAAmB,CAC3E;AAEjB,CAAC","names":["React","getSlots","TabListProvider","renderTabList_unstable","state","contextValues","slots","slotProps","root","value","tabList","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n  const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"names":["React","getSlots","TabListProvider","renderTabList_unstable","state","contextValues","slots","slotProps","createElement","root","value","tabList","children"],"sources":["../src/packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n  const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,eAAe,QAAQ,kBAAkB;AAElD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAGA,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,KAAA,CAAAQ,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,gBAC5BT,KAAA,CAAAQ,aAAA,CAACN,eAAe;IAACQ,KAAK,EAAEL,aAAa,CAACM;EAAO,GAAGP,KAAK,CAACK,IAAI,CAACG,QAAQ,CAAmB,CAC3E;AAEjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","useArrowNavigationGroup","getNativeElementProps","useControllableState","useEventCallback","useMergedRefs","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","role"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getNativeElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    registeredTabs.current[JSON.stringify(data.value)] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tablist',\n      ...focusAttributes,\n      ...props,\n    }),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"]}
+{"version":3,"names":["React","useArrowNavigationGroup","getNativeElementProps","useControllableState","useEventCallback","useMergedRefs","useTabList_unstable","props","ref","appearance","reserveSelectedTabSpace","disabled","onTabSelect","size","vertical","innerRef","useRef","focusAttributes","circular","axis","memorizeCurrent","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","undefined","currentSelectedValue","previousSelectedValue","useEffect","current","onSelect","event","data","value","registeredTabs","onRegister","JSON","stringify","onUnregister","getRegisteredTabs","useCallback","components","root","role"],"sources":["../src/packages/react-components/react-tabs/src/components/TabList/useTabList.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getNativeElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    registeredTabs.current[JSON.stringify(data.value)] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tablist',\n      ...focusAttributes,\n      ...props,\n    }),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAEA,OAAM,SAAUA,gCAAgC,CAACC,KAAmB;EAClE,MAAM;IACJC,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BC,UAAU;IACVC,YAAY;IACZC,QAAQ;IACRC,iBAAiB;IACjBC,IAAI;IACJC;EAAQ,CACT,GAAGX,KAAK;EAET,MAAMY,OAAO,GAAwB;IACnCX,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BG,QAAQ;IACRF,UAAU;IACVC,YAAY;IACZE,iBAAiB;IACjBC,IAAI;IACJC;GACD;EAED,OAAO;IAAEC;EAAO,CAAE;AACpB","names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues_unstable(state: TabListState): TabListContextValues {\n  const {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    size,\n    vertical,\n  } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"]}
+{"version":3,"names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"sources":["../src/packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues_unstable(state: TabListState): TabListContextValues {\n  const {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    size,\n    vertical,\n  } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"],"mappings":"AAEA,OAAM,SAAUA,gCAAgCA,CAACC,KAAmB;EAClE,MAAM;IACJC,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BC,UAAU;IACVC,YAAY;IACZC,QAAQ;IACRC,iBAAiB;IACjBC,IAAI;IACJC;EAAQ,CACT,GAAGX,KAAK;EAET,MAAMY,OAAO,GAAwB;IACnCX,UAAU;IACVC,uBAAuB;IACvBC,QAAQ;IACRC,aAAa,EAAEC,WAAW;IAC1BG,QAAQ;IACRF,UAAU;IACVC,YAAY;IACZE,iBAAiB;IACjBC,IAAI;IACJC;GACD;EAED,OAAO;IAAEC;EAAO,CAAE;AACpB"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,mBAAqBA,YAAY,QAAQ,gBAAgB;AAGzD,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgBhB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAM;IAAEC;EAAQ,CAAE,GAAGD,KAAK;EAE1B,MAAME,MAAM,GAAGJ,SAAS,EAAE;EAE1BE,KAAK,CAACH,IAAI,CAACM,SAAS,GAAGR,YAAY,CACjCC,iBAAiB,CAACC,IAAI,EACtBK,MAAM,CAACL,IAAI,EACXI,QAAQ,GAAGC,MAAM,CAACD,QAAQ,GAAGC,MAAM,CAACE,UAAU,EAC9CJ,KAAK,CAACH,IAAI,CAACM,SAAS,CACrB;EAED,OAAOH,KAAK;AACd,CAAC","names":["mergeClasses","tabListClassNames","root","useStyles","useTabListStyles_unstable","state","vertical","styles","className","horizontal"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n  root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexShrink: 0,\n    flexWrap: 'nowrap',\n    position: 'relative',\n  },\n  horizontal: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n  },\n  vertical: {\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n  const { vertical } = state;\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    tabListClassNames.root,\n    styles.root,\n    vertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}
+{"version":3,"names":["__styles","mergeClasses","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","d","useTabListStyles_unstable","state","styles","className"],"sources":["../src/packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n  root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexShrink: 0,\n    flexWrap: 'nowrap',\n    position: 'relative',\n  },\n  horizontal: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n  },\n  vertical: {\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n  const { vertical } = state;\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    tabListClassNames.root,\n    styles.root,\n    vertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AACA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AAGzD,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAL,OAAA;EAAA;EAAAM,QAAA;IAAAD,OAAA;IAAAL,OAAA;EAAA;AAAA;EAAAO,CAAA;AAAA,EAgBhB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAM;IAAEH;EAAQ,CAAE,GAAGG,KAAK;EAE1B,MAAMC,MAAM,GAAGZ,SAAS,EAAE;EAE1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGhB,YAAY,CACjCC,iBAAiB,CAACC,IAAI,EACtBa,MAAM,CAACb,IAAI,EACXS,QAAQ,GAAGI,MAAM,CAACJ,QAAQ,GAAGI,MAAM,CAACN,UAAU,EAC9CK,KAAK,CAACZ,IAAI,CAACc,SAAS,CACrB;EAED,OAAOF,KAAK;AACd,CAAC"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,kBAAkB,EAAEC,GAAG,EAAEC,aAAa,EAAEC,qBAAqB,EAAEC,eAAe,QAAQ,OAAO;AAatG,SACEC,sBAAsB,EACtBC,OAAO,EACPC,eAAe,EACfC,iBAAiB,EACjBC,0BAA0B,EAC1BC,gCAAgC,EAChCC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW","names":["renderTab_unstable","Tab","tabClassNames","useTabStyles_unstable","useTab_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  TabListProvider,\n  tabListClassNames,\n  useTabListContext_unstable,\n  useTabListContextValues_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n"]}
+{"version":3,"names":["renderTab_unstable","Tab","tabClassNames","useTabStyles_unstable","useTab_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable"],"sources":["../src/packages/react-components/react-tabs/src/index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  TabListProvider,\n  tabListClassNames,\n  useTabListContext_unstable,\n  useTabListContextValues_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n"],"mappings":"AACA,SAASA,kBAAkB,EAAEC,GAAG,EAAEC,aAAa,EAAEC,qBAAqB,EAAEC,eAAe,QAAQ,OAAO;AAatG,SACEC,sBAAsB,EACtBC,OAAO,EACPC,eAAe,EACfC,iBAAiB,EACjBC,0BAA0B,EAC1BC,gCAAgC,EAChCC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW"}

package/lib-amd/components/Tab/Tab.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "react", "./useTab", "./renderTab", "./useTabStyles"], function (require, exports, React, useTab_1, renderTab_1, useTabStyles_1) {
+define(["require", "exports", "react", "./useTab", "./renderTab", "./useTabStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, useTab_1, renderTab_1, useTabStyles_1, react_shared_contexts_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Tab = void 0;
@@ -8,6 +8,8 @@ define(["require", "exports", "react", "./useTab", "./renderTab", "./useTabStyle
     exports.Tab = React.forwardRef(function (props, ref) {
         var state = useTab_1.useTab_unstable(props, ref);
         useTabStyles_1.useTabStyles_unstable(state);
+        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useTabStyles_unstable;
+        useCustomStyles(state);
         return renderTab_1.renderTab_unstable(state);
     });
     exports.Tab.displayName = 'Tab';

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/Tab.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,GAAG,GAAkC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5E,IAAM,KAAK,GAAG,wBAAe,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE1C,oCAAqB,CAAC,KAAK,CAAC,CAAC;QAC7B,OAAO,8BAAkB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,WAAG,CAAC,WAAW,GAAG,KAAK,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/Tab.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,GAAG,GAAkC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5E,IAAM,KAAK,GAAG,wBAAe,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE1C,oCAAqB,CAAC,KAAK,CAAC,CAAC;QAErB,IAAuB,eAAe,GAAK,oDAA4B,EAAE,sBAAnC,CAAoC;QAClF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,8BAAkB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,WAAG,CAAC,WAAW,GAAG,KAAK,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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  const { useTabStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"]}

package/lib-amd/components/Tab/useTabStyles.js

@@ -134,7 +134,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabste
         // Tab creates a custom focus indicator because the default focus indicator
         // is applied using an ::after pseudo-element on the root. Since the selection
         // indicator uses an ::after pseudo-element on the root, there is a conflict.
-        base: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), { outlineWidth: react_theme_1.tokens.strokeWidthThick, outlineColor: 'transparent', outlineStyle: 'solid', boxShadow: "\n      " + react_theme_1.tokens.shadow4 + ",\n      0 0 0 " + react_theme_1.tokens.strokeWidthThick + " " + react_theme_1.tokens.colorStrokeFocus2 + "\n    ", zIndex: 1 })),
+        base: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), { outlineWidth: react_theme_1.tokens.strokeWidthThick, outlineColor: 'transparent', outlineStyle: 'solid', boxShadow: "\n      " + react_theme_1.tokens.shadow4 + ",\n      0 0 0 " + react_theme_1.tokens.strokeWidthThick + " " + react_theme_1.tokens.colorStrokeFocus2 + "\n    ", zIndex: 1 }), { enableOutline: true }),
     });
     /** Indicator styles for when pending selection */
     var usePendingIndicatorStyles = react_1.makeStyles({