@fluentui/react-tabs 9.3.4 → 9.3.5

package/.swcrc

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "externalHelpers": true,
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "target": "es2019"
+  },
+  "minify": false,
+  "sourceMaps": true
+}

package/CHANGELOG.json

@@ -2,7 +2,64 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Thu, 16 Mar 2023 14:33:33 GMT",
+      "date": "Tue, 21 Mar 2023 21:18:20 GMT",
+      "tag": "@fluentui/react-tabs_v9.3.5",
+      "version": "9.3.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
+            "comment": "fix: add node field to package.json exports map."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
+            "comment": "chore: migrate to swc transpilation approach."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.15",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.6.1",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-theme to v9.1.7",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.7.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Mar 2023 14:36:59 GMT",
       "tag": "@fluentui/react-tabs_v9.3.4",
       "version": "9.3.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Thu, 16 Mar 2023 14:33:33 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Mar 2023 21:18:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.5)
+
+Tue, 21 Mar 2023 21:18:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.4..@fluentui/react-tabs_v9.3.5)
+
+### Patches
+
+- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
+- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
+- Bump @fluentui/react-context-selector to v9.1.15 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-tabster to v9.6.1 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+
 ## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.4)
 
-Thu, 16 Mar 2023 14:33:33 GMT 
+Thu, 16 Mar 2023 14:36:59 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.3..@fluentui/react-tabs_v9.3.4)
 
 ### Patches

package/lib/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/Tab.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './components/Tab/index';\n"]}
+{"version":3,"names":[],"sources":["../src/Tab.ts"],"sourcesContent":["export * from './components/Tab/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/TabList.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/TabList/index';\n"]}
+{"version":3,"names":[],"sources":["../src/TabList.ts"],"sourcesContent":["export * from './components/TabList/index';\n"],"mappings":"AAAA,cAAc"}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHooks_unstable","Tab","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\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,YAAYA,KAAA,MAAW;AACvB,SAASC,eAAe,QAAQ;AAChC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AAGtC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,GAAA,gBAAqCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjF,MAAMC,KAAA,GAAQR,eAAA,CAAgBM,KAAA,EAAOC,GAAA;EAErCL,qBAAA,CAAsBM,KAAA;EAEtB,MAAM;IAAEN,qBAAA,EAAuBO;EAAe,CAAE,GAAGN,4BAAA;EACnDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,kBAAA,CAAmBO,KAAA;AAC5B;AAEAJ,GAAA,CAAIM,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/Tab/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles';\nexport * from './useTabAnimatedIndicator';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/Tab/index.ts"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles';\nexport * from './useTabAnimatedIndicator';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Tab/renderTab.js

@@ -8,13 +8,7 @@ export const renderTab_unstable = state => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
-    ...slotProps.icon
-  }), !state.iconOnly && /*#__PURE__*/React.createElement(slots.content, {
-    ...slotProps.content
-  }), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/React.createElement(slots.content, {
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), !state.iconOnly && /*#__PURE__*/React.createElement(slots.content, slotProps.content), !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && /*#__PURE__*/React.createElement(slots.content, {
     ...slotProps.content,
     className: state.contentReservedSpaceClassName
   }));

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["React","getSlots","renderTab_unstable","state","slots","slotProps","createElement","root","icon","iconOnly","content","selected","contentReservedSpaceClassName","undefined","className"],"sources":["../../../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,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,kBAAA,GAAsBC,KAAA,IAAoB;EACrD,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAmBE,KAAA;EAEhD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,IAAI,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,GAC5C,CAACL,KAAA,CAAMM,QAAQ,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,OAAO,EAAKL,SAAA,CAAUK,OAAO,GACvD,CAACP,KAAA,CAAMQ,QAAQ,IAAI,CAACR,KAAA,CAAMM,QAAQ,IAAIN,KAAA,CAAMS,6BAA6B,KAAKC,SAAA,iBAC7Eb,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,OAAO;IAAE,GAAGL,SAAA,CAAUK,OAAO;IAAEI,SAAA,EAAWX,KAAA,CAAMS;;AAI/D"}

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

@@ -1 +1 @@
-{"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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"}
+{"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/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":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ;AAEzF,SAASC,0BAA0B,QAAQ;AAG3C;;;;;;;;;AASA,OAAO,MAAMC,eAAA,GAAkBA,CAACC,KAAA,EAAiBC,GAAA,KAA0C;EACzF,MAAM;IAAEC,OAAA;IAASC,QAAA,EAAUC,WAAA,GAAc,KAAK;IAAEC,IAAA;IAAMC;EAAK,CAAE,GAAGN,KAAA;EAEhE,MAAMO,UAAA,GAAaT,0BAAA,CAA2BU,GAAA,IAAOA,GAAA,CAAID,UAAU;EACnE,MAAME,uBAAA,GAA0BX,0BAAA,CAA2BU,GAAA,IAAOA,GAAA,CAAIC,uBAAuB;EAC7F,MAAMC,YAAA,GAAeZ,0BAAA,CAA2BU,GAAA,IAAOA,GAAA,CAAIL,QAAQ;EACnE,MAAMQ,QAAA,GAAWb,0BAAA,CAA2BU,GAAA,IAAOA,GAAA,CAAII,aAAa,KAAKN,KAAA;EACzE,MAAMO,UAAA,GAAaf,0BAAA,CAA2BU,GAAA,IAAOA,GAAA,CAAIK,UAAU;EACnE,MAAMC,YAAA,GAAehB,0BAAA,CAA2BU,GAAA,IAAOA,GAAA,CAAIM,YAAY;EACvE,MAAMC,QAAA,GAAWjB,0BAAA,CAA2BU,GAAA,IAAOA,GAAA,CAAIO,QAAQ;EAC/D,MAAMC,IAAA,GAAOlB,0BAAA,CAA2BU,GAAA,IAAOA,GAAA,CAAIQ,IAAI;EACvD,MAAMC,QAAA,GAAWnB,0BAAA,CAA2BU,GAAA,IAAO,CAAC,CAACA,GAAA,CAAIS,QAAQ;EACjE,MAAMd,QAAA,GAAWO,YAAA,IAAgBN,WAAA;EAEjC,MAAMc,QAAA,GAAWzB,KAAA,CAAM0B,MAAM,CAAc,IAAI;EAC/C,MAAMC,OAAA,GAAUxB,gBAAA,CAAkByB,KAAA,IAA0BN,QAAA,CAASM,KAAA,EAAO;IAAEf;EAAM;EAEpFb,KAAA,CAAM6B,SAAS,CAAC,MAAM;IACpBT,UAAA,CAAW;MACTP,KAAA;MACAL,GAAA,EAAKiB;IACP;IAEA,OAAO,MAAM;MACXJ,YAAA,CAAa;QAAER,KAAA;QAAOL,GAAA,EAAKiB;MAAS;IACtC;EACF,GAAG,CAACL,UAAA,EAAYC,YAAA,EAAcI,QAAA,EAAUZ,KAAA,CAAM;EAE9C,MAAMiB,aAAA,GAAgB5B,gBAAA,CAAiBU,IAAA;EACvC,MAAMmB,gBAAA,GAAmB7B,gBAAA,CAAiBO,OAAA,EAAS;IAAEuB,QAAA,EAAU,IAAI;IAAEC,YAAA,EAAc;MAAEC,QAAA,EAAU3B,KAAA,CAAM2B;IAAS;EAAE;EAChH,OAAO;IACLC,UAAA,EAAY;MACVC,IAAA,EAAM;MACNxB,IAAA,EAAM;MACNH,OAAA,EAAS;IACX;IACA2B,IAAA,EAAMnC,qBAAA,CAAsB,UAAU;MACpCO,GAAA,EAAKJ,aAAA,CAAcI,GAAA,EAAKiB,QAAA;MACxBY,IAAA,EAAM;MACNC,IAAA,EAAM;MACN;MACA;MACA,iBAAiB5B,QAAA,GAAW6B,SAAA,GAAa,GAAErB,QAAS,EAAC;MACrD,GAAGX,KAAK;MACRG,QAAA;MACAiB;IACF;IACAf,IAAA,EAAMkB,aAAA;IACNU,QAAA,EAAUC,OAAA,CAAQ,CAAAX,aAAA,aAAAA,aAAA,uBAAAA,aAAA,CAAeI,QAAQ,KAAI,CAACH,gBAAA,CAAiBG,QAAQ;IACvEzB,OAAA,EAASsB,gBAAA;IACTjB,UAAA;IACA4B,6BAAA,EAA+B1B,uBAAA,GAA0B,KAAKuB,SAAS;IACvE7B,QAAA;IACAQ,QAAA;IACAK,IAAA;IACAV,KAAA;IACAW;EACF;AACF"}

package/lib/components/Tab/useTabAnimatedIndicator.js

@@ -36,9 +36,9 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
   }]]
 });
 const calculateTabRect = element => {
-  var _a;
   if (element) {
-    const parentRect = ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
+    var _element_parentElement;
+    const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {
       x: 0,
       y: 0,
       width: 0,
@@ -55,8 +55,8 @@ const calculateTabRect = element => {
   return undefined;
 };
 const getRegisteredTabRect = (registeredTabs, value) => {
-  var _a;
-  const element = value !== undefined && value !== null ? (_a = registeredTabs[JSON.stringify(value)]) === null || _a === void 0 ? void 0 : _a.ref.current : undefined;
+  var _registeredTabs_JSON_stringify;
+  const element = value !== undefined && value !== null ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;
   return element ? calculateTabRect(element) : undefined;
 };
 /**

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

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

@@ -18,8 +18,7 @@ const iconClassNames = {
 };
 /**
  * Styles for the root slot
- */
-/* eslint-disable @typescript-eslint/naming-convention */
+ */ /* eslint-disable @typescript-eslint/naming-convention */
 const useRootStyles = /*#__PURE__*/__styles({
   base: {
     Bt984gj: "f122n59",
@@ -138,10 +137,9 @@ const useRootStyles = /*#__PURE__*/__styles({
   h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1mfqf41:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}", ".f149wc3x:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1ck17l:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}", ".ffth601:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}"],
   a: [".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f10aiid4:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}", ".fjioou7:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f42ak0g:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}", ".fhklyu5:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}"]
 });
-/* eslint-enable @typescript-eslint/naming-convention */
-/**
- * Focus styles for the root slot
- */
+/* eslint-enable @typescript-eslint/naming-convention */ /**
+                                                         * Focus styles for the root slot
+                                                         */
 const useFocusStyles = /*#__PURE__*/__styles({
   base: {
     B8q5s1w: "f8hki3x",

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","base","Bt984gj","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","z8tnut","z189sj","Byoj8tv","uwmqm3","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","Bv4n3vi","vqofr","B0uxbk8","Bgqb9hq","amg5m6","zkfqfm","Bkydozb","vzq8l0","Bka2azo","Br4ovkg","csmgbd","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","B3778ie","d9w3h3","Bl18szs","B4j8arr","Bsft5z2","E3zdtr","t2ki1e","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","contentReservedSpaceClassName","undefined"],"sources":["../src/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":"AAEA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAEhE,SAASC,sCAAsC,QAAQ,2BAA2B;AAElF,OAAO,MAAMC,aAAa,GAA6B;EACrDC,IAAI,EAAE,SAAS;EACfC,IAAI,EAAE,eAAe;EACrBC,OAAO,EAAE;CACV;AAED,MAAMC,uBAAuB,GAAG;EAC9BD,OAAO,EAAE;CACV;AAED;AACA;AACA,MAAME,cAAc,GAAG;EACrBC,MAAM,EAAE,iBAAiB;EACzBC,OAAO,EAAE;CACV;AAED;;;AAGA;AACA,MAAMC,aAAa,gBAAGf,QAAA;EAAAgB,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;EAAAE,eAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAL,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,gBAAA;IAAAN,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAG,cAAA;IAAAP,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAI,eAAA;IAAAR,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAK,aAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAM,WAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,QAAA;IAAAV,MAAA;IAAAG,OAAA;IAAAG,MAAA;IAAAlC,OAAA;EAAA;EAAAuC,QAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EAyIpB;AACF;AAEA;;;AAGA,MAAMC,cAAc,gBAAGzE,QAAA;EAAAgB,IAAA;IAAA0D,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;AAAA,EAkBrB;AAEF;AACA,MAAMa,yBAAyB,gBAAGnF,QAAA;EAAAgB,IAAA;IAAAoE,MAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA/B,QAAA;IAAAgB,MAAA;IAAAO,OAAA;EAAA;EAAA7C,eAAA;IAAAsD,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAnD,aAAA;IAAAgD,MAAA;IAAAE,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAApD,gBAAA;IAAA+C,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAjD,cAAA;IAAA8C,MAAA;IAAAE,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAlD,eAAA;IAAA6C,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA/C,aAAA;IAAA4C,MAAA;IAAAE,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAlC,CAAA;EAAAC,CAAA;EAAAkC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAApC,CAAA;AAAA,EA+EhC;AAEF,MAAMqC,wBAAwB,gBAAG3G,QAAA;EAAAgB,IAAA;IAAA4F,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA9C,QAAA;IAAAuC,OAAA;IAAAQ,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAApD,QAAA;IAAAwC,OAAA;EAAA;EAAA9D,eAAA;IAAA2E,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAxE,aAAA;IAAAqE,OAAA;IAAAE,MAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAzE,gBAAA;IAAAoE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAtE,cAAA;IAAAmE,OAAA;IAAAE,MAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAvE,eAAA;IAAAkE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAApE,aAAA;IAAAiE,OAAA;IAAAE,MAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAxD,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAkC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EAqF/B;AAEF;;;AAGA,MAAMqB,aAAa,gBAAG/H,QAAA;EAAAgB,IAAA;IAAAgH,OAAA;IAAAC,MAAA;IAAAhH,OAAA;IAAAc,MAAA;IAAAa,OAAA;IAAAJ,OAAA;IAAAC,OAAA;IAAAyF,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,KAAA;IAAAJ,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAlE,QAAA;IAAA6D,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAA7D,CAAA;AAAA,EAwCpB;AAEF;;;AAGA,MAAMoE,gBAAgB,gBAAG1I,QAAA;EAAAgB,IAAA;IAAAoB,OAAA;IAAAiG,OAAA;IAAAM,OAAA;IAAAtG,OAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAO,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAkB,QAAA;IAAAjC,OAAA;IAAAiG,OAAA;IAAAM,OAAA;IAAAtG,OAAA;EAAA;EAAAoG,KAAA;IAAArG,OAAA;IAAAiG,OAAA;IAAAM,OAAA;IAAAtG,OAAA;EAAA;EAAAuG,aAAA;IAAAxG,OAAA;IAAAiG,OAAA;IAAAM,OAAA;IAAAtG,OAAA;EAAA;EAAAwG,YAAA;IAAAb,OAAA;IAAAC,MAAA;EAAA;EAAAa,UAAA;IAAAd,OAAA;IAAAC,MAAA;EAAA;EAAAc,WAAA;IAAAC,OAAA;EAAA;AAAA;EAAA1E,CAAA;AAAA,EA2BvB;AAEF;;;AAGA,OAAO,MAAM2E,qBAAqB,GAAIC,KAAe,IAAc;EACjE,MAAMC,UAAU,GAAGpI,aAAa,EAAE;EAClC,MAAMqI,WAAW,GAAG3E,cAAc,EAAE;EACpC,MAAM4E,sBAAsB,GAAGlE,yBAAyB,EAAE;EAC1D,MAAMmE,qBAAqB,GAAG3C,wBAAwB,EAAE;EACxD,MAAM4C,UAAU,GAAGxB,aAAa,EAAE;EAClC,MAAMyB,aAAa,GAAGd,gBAAgB,EAAE;EAExC,MAAM;IAAEe,UAAU;IAAErF,QAAQ;IAAEC,QAAQ;IAAEqF,IAAI;IAAE7G;EAAQ,CAAE,GAAGqG,KAAK;EAEhEA,KAAK,CAAC1I,IAAI,CAACmJ,SAAS,GAAG1J,YAAY,CACjCM,aAAa,CAACC,IAAI,EAClB2I,UAAU,CAACnI,IAAI,EACf6B,QAAQ,GAAGsG,UAAU,CAACtG,QAAQ,GAAGsG,UAAU,CAACxG,UAAU,EACtD+G,IAAI,KAAK,OAAO,KAAK7G,QAAQ,GAAGsG,UAAU,CAAC/F,aAAa,GAAG+F,UAAU,CAACrG,eAAe,CAAC,EACtF4G,IAAI,KAAK,QAAQ,KAAK7G,QAAQ,GAAGsG,UAAU,CAAC7F,cAAc,GAAG6F,UAAU,CAAC9F,gBAAgB,CAAC,EACzFqG,IAAI,KAAK,OAAO,KAAK7G,QAAQ,GAAGsG,UAAU,CAAC3F,aAAa,GAAG2F,UAAU,CAAC5F,eAAe,CAAC,EACtF6F,WAAW,CAACpI,IAAI,EAChB,CAACoD,QAAQ,IAAIqF,UAAU,KAAK,QAAQ,IAAIN,UAAU,CAAChF,MAAM,EACzD,CAACC,QAAQ,IAAIqF,UAAU,KAAK,aAAa,IAAIN,UAAU,CAAC1F,WAAW,EACnE,CAACW,QAAQ,IAAIC,QAAQ,IAAI8E,UAAU,CAAC9E,QAAQ,EAC5CD,QAAQ,IAAI+E,UAAU,CAAC/E,QAAQ;EAE/B;EACAiF,sBAAsB,CAACrI,IAAI,EAC3B0I,IAAI,KAAK,OAAO,KAAK7G,QAAQ,GAAGwG,sBAAsB,CAACjG,aAAa,GAAGiG,sBAAsB,CAACvG,eAAe,CAAC,EAC9G4G,IAAI,KAAK,QAAQ,KAAK7G,QAAQ,GAAGwG,sBAAsB,CAAC/F,cAAc,GAAG+F,sBAAsB,CAAChG,gBAAgB,CAAC,EACjHqG,IAAI,KAAK,OAAO,KAAK7G,QAAQ,GAAGwG,sBAAsB,CAAC7F,aAAa,GAAG6F,sBAAsB,CAAC9F,eAAe,CAAC,EAC9Ga,QAAQ,IAAIiF,sBAAsB,CAACjF,QAAQ;EAE3C;EACAC,QAAQ,IAAIiF,qBAAqB,CAACtI,IAAI,EACtCqD,QAAQ,IAAI,CAACD,QAAQ,IAAIkF,qBAAqB,CAACjF,QAAQ,EACvDA,QAAQ,IACNqF,IAAI,KAAK,OAAO,KACf7G,QAAQ,GAAGyG,qBAAqB,CAAClG,aAAa,GAAGkG,qBAAqB,CAACxG,eAAe,CAAC,EAC1FuB,QAAQ,IACNqF,IAAI,KAAK,QAAQ,KAChB7G,QAAQ,GAAGyG,qBAAqB,CAAChG,cAAc,GAAGgG,qBAAqB,CAACjG,gBAAgB,CAAC,EAC5FgB,QAAQ,IACNqF,IAAI,KAAK,OAAO,KACf7G,QAAQ,GAAGyG,qBAAqB,CAAC9F,aAAa,GAAG8F,qBAAqB,CAAC/F,eAAe,CAAC,EAC1Fc,QAAQ,IAAID,QAAQ,IAAIkF,qBAAqB,CAAClF,QAAQ,EAEtD8E,KAAK,CAAC1I,IAAI,CAACmJ,SAAS,CACrB;EAED,IAAIT,KAAK,CAACzI,IAAI,EAAE;IACdyI,KAAK,CAACzI,IAAI,CAACkJ,SAAS,GAAG1J,YAAY,CACjCM,aAAa,CAACE,IAAI,EAClB8I,UAAU,CAACvI,IAAI,EACfuI,UAAU,CAACG,IAAI,CAAC,EAChBrF,QAAQ,IAAIkF,UAAU,CAAClF,QAAQ,EAC/B6E,KAAK,CAACzI,IAAI,CAACkJ,SAAS,CACrB;;EAGH;EACA,IAAIT,KAAK,CAACU,6BAA6B,KAAKC,SAAS,EAAE;IACrDX,KAAK,CAACU,6BAA6B,GAAG3J,YAAY,CAChDU,uBAAuB,CAACD,OAAO,EAC/B8I,aAAa,CAACxI,IAAI,EAClB0I,IAAI,KAAK,OAAO,GAAGF,aAAa,CAACZ,aAAa,GAAGY,aAAa,CAACnF,QAAQ,EACvE6E,KAAK,CAACzI,IAAI,GAAG+I,aAAa,CAACV,UAAU,GAAGU,aAAa,CAACX,YAAY,EAClEW,aAAa,CAACT,WAAW,EACzBG,KAAK,CAACxI,OAAO,CAACiJ,SAAS,CACxB;;EAGHT,KAAK,CAACxI,OAAO,CAACiJ,SAAS,GAAG1J,YAAY,CACpCM,aAAa,CAACG,OAAO,EACrB8I,aAAa,CAACxI,IAAI,EAClB0I,IAAI,KAAK,OAAO,IAAIF,aAAa,CAACf,KAAK,EACvCpE,QAAQ,KAAKqF,IAAI,KAAK,OAAO,GAAGF,aAAa,CAACZ,aAAa,GAAGY,aAAa,CAACnF,QAAQ,CAAC,EACrF6E,KAAK,CAACzI,IAAI,GAAG+I,aAAa,CAACV,UAAU,GAAGU,aAAa,CAACX,YAAY,EAClEK,KAAK,CAACxI,OAAO,CAACiJ,SAAS,CACxB;EAEDrJ,sCAAsC,CAAC4I,KAAK,CAAC;EAE7C,OAAOA,KAAK;AACd,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","base","Bt984gj","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","z8tnut","z189sj","Byoj8tv","uwmqm3","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","Bv4n3vi","vqofr","B0uxbk8","Bgqb9hq","amg5m6","zkfqfm","Bkydozb","vzq8l0","Bka2azo","Br4ovkg","csmgbd","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","B3778ie","d9w3h3","Bl18szs","B4j8arr","Bsft5z2","E3zdtr","t2ki1e","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","contentReservedSpaceClassName","undefined"],"sources":["../../../src/components/Tab/useTabStyles.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.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","useCustomStyleHooks_unstable","TabList","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../../../src/components/TabList/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\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,YAAYA,KAAA,MAAW;AACvB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAG1C,SAASC,gCAAgC,QAAQ;AACjD,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,OAAA,gBAA6CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzF,MAAMC,KAAA,GAAQT,mBAAA,CAAoBO,KAAA,EAAOC,GAAA;EACzC,MAAME,aAAA,GAAgBP,gCAAA,CAAiCM,KAAA;EAEvDP,yBAAA,CAA0BO,KAAA;EAE1B,MAAM;IAAEP,yBAAA,EAA2BS;EAAe,CAAE,GAAGP,4BAAA;EACvDO,eAAA,CAAgBF,KAAA;EAEhB,OAAOR,sBAAA,CAAuBQ,KAAA,EAAOC,aAAA;AACvC;AAEAL,OAAA,CAAQO,WAAW,GAAG"}

package/lib/components/TabList/TabList.types.js

@@ -1,2 +1,2 @@
-export {};
+import * as React from 'react';
 //# sourceMappingURL=TabList.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabList.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/TabList.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n  /**\n   * The value of the tab.\n   */\n  value: TabValue;\n\n  /**\n   * The reference to the tab HTML element.\n   */\n  ref: React.RefObject<HTMLElement>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle';\n\n  /**\n   * Tab size may change between unselected and selected states.\n   * The default scenario is a selected tab has bold text.\n   *\n   * When true, this property requests tabs be the same size whether unselected or selected.\n   * @default true\n   */\n  reserveSelectedTabSpace?: boolean;\n\n  /**\n   * The value of the tab to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   */\n  defaultSelectedValue?: TabValue;\n  /**\n   * A tab list can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Raised when a tab is selected.\n   */\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small', 'medium', or 'large' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectedValue' | 'reserveSelectedTabSpace'> &\n  Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n    /**\n     * Gets the registered tab data along with current and previous selected values.\n     */\n    getRegisteredTabs: () => {\n      selectedValue?: TabValue;\n      previousSelectedValue?: TabValue;\n      registeredTabs: Record<string, TabRegisterData>;\n    };\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n"]}
+{"version":3,"names":["React"],"sources":["../../../src/components/TabList/TabList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n  /**\n   * The value of the tab.\n   */\n  value: TabValue;\n\n  /**\n   * The reference to the tab HTML element.\n   */\n  ref: React.RefObject<HTMLElement>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle';\n\n  /**\n   * Tab size may change between unselected and selected states.\n   * The default scenario is a selected tab has bold text.\n   *\n   * When true, this property requests tabs be the same size whether unselected or selected.\n   * @default true\n   */\n  reserveSelectedTabSpace?: boolean;\n\n  /**\n   * The value of the tab to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   */\n  defaultSelectedValue?: TabValue;\n  /**\n   * A tab list can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Raised when a tab is selected.\n   */\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small', 'medium', or 'large' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectedValue' | 'reserveSelectedTabSpace'> &\n  Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n    /**\n     * Gets the registered tab data along with current and previous selected values.\n     */\n    getRegisteredTabs: () => {\n      selectedValue?: TabValue;\n      previousSelectedValue?: TabValue;\n      registeredTabs: Record<string, TabRegisterData>;\n    };\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/components/TabList/TabListContext.js

@@ -5,14 +5,11 @@ const tabListContextDefaultValue = {
   disabled: false,
   selectedValue: undefined,
   onRegister: () => {
-    /* noop */
-  },
+    /* noop */},
   onUnregister: () => {
-    /* noop */
-  },
+    /* noop */},
   onSelect: () => {
-    /* noop */
-  },
+    /* noop */},
   getRegisteredTabs: () => {
     return {
       registeredTabs: {}

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

@@ -1 +1 @@
-{"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"}
+{"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/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;AAIlD,MAAMC,0BAAA,GAAkD;EACtDC,UAAA,EAAY;EACZC,uBAAA,EAAyB,IAAI;EAC7BC,QAAA,EAAU,KAAK;EACfC,aAAA,EAAeC,SAAA;EACfC,UAAA,EAAYA,CAAA,KAAM;IAChB,WACF;EACAC,YAAA,EAAcA,CAAA,KAAM;IAClB,WACF;EACAC,QAAA,EAAUA,CAAA,KAAM;IACd,WACF;EACAC,iBAAA,EAAmBA,CAAA,KAAM;IACvB,OAAO;MACLC,cAAA,EAAgB,CAAC;IACnB;EACF;EACAC,IAAA,EAAM;EACNC,QAAA,EAAU;AACZ;AAEA,OAAO,MAAMC,cAAA,gBAA+Cf,aAAA,CAC1DO,SAAA;AAGF,OAAO,MAAMS,eAAA,GAAkBD,cAAA,CAAeE,QAAQ;AACtD,OAAO,MAAMC,0BAAA,GAAiCC,QAAA,IAC5ClB,kBAAA,CAAmBc,cAAA,EAAgB,CAACK,GAAA,GAAMlB,0BAA0B,KAAKiB,QAAA,CAASC,GAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabs/src/components/TabList/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './TabListContext';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListContextValues';\nexport * from './useTabListStyles';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/TabList/index.ts"],"sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './TabListContext';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListContextValues';\nexport * from './useTabListStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}