npm - @fluentui/react-tabs - Versions diffs - 9.7.2 → 9.7.4 - Mend

@fluentui/react-tabs 9.7.2 → 9.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-tabs
-This log was last generated on Wed, 19 Mar 2025 15:36:12 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Apr 2025 14:05:34 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.7.4)
+Tue, 01 Apr 2025 14:05:34 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.7.3..@fluentui/react-tabs_v9.7.4)
+### Patches
+- fix: fix active tab indicator animation ([PR #34060](https://github.com/microsoft/fluentui/pull/34060) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-tabster to v9.24.4 ([PR #34129](https://github.com/microsoft/fluentui/pull/34129) by beachball)
+## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.7.3)
+Thu, 27 Mar 2025 21:12:51 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.7.2..@fluentui/react-tabs_v9.7.3)
+### Patches
+- Bump @fluentui/react-context-selector to v9.1.75 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.53 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.23.1 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-tabster to v9.24.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-utilities to v9.18.23 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
 ## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.7.2)
-Wed, 19 Mar 2025 15:36:12 GMT
+Wed, 19 Mar 2025 15:40:42 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.7.1..@fluentui/react-tabs_v9.7.2)
 ### Patches

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { __styles, mergeClasses } from '@griffel/react';
 import { useTabListContext_unstable } from '../TabList/TabListContext';
 import { tokens } from '@fluentui/react-theme';
+import { useAnimationFrame } from '@fluentui/react-utilities';
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const tabIndicatorCssVars_unstable = {
   offsetVar: '--fui-Tab__indicator--offset',
@@ -80,14 +81,7 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
     scale: 1
   });
   const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);
-  React.useEffect(() => {
-    if (isValueDefined(lastAnimatedFrom)) {
-      setAnimationValues({
-        offset: 0,
-        scale: 1
-      });
-    }
-  }, [lastAnimatedFrom]);
+  const [requestAnimationFrame] = useAnimationFrame();
   if (selected) {
     const {
       previousSelectedValue,
@@ -105,6 +99,11 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
           scale
         });
         setLastAnimatedFrom(previousSelectedValue);
+        // Reset the animation values after the animation is complete
+        requestAnimationFrame(() => setAnimationValues({
+          offset: 0,
+          scale: 1
+        }));
       }
     }
   } else if (isValueDefined(lastAnimatedFrom)) {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","__styles","mergeClasses","useTabListContext_unstable","tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n overflow: 'visible'\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms'\n }\n }\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n }\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n }\n }\n});\nconst calculateTabRect = (element)=>{\n if (element) {\n var _element_parentElement;\n const parentRect = ((_element_parentElement = element.parentElement) === null \|\| _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) \|\| {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n const tabRect = element.getBoundingClientRect();\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height\n };\n }\n return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n var _registeredTabs_JSON_stringify;\n const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null \|\| _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n const { disabled, selected, vertical } = state;\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n const [animationValues, setAnimationValues] = React.useState({\n offset: 0,\n scale: 1\n });\n const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n React.useEffect(()=>{\n if (isValueDefined(lastAnimatedFrom)) {\n setAnimationValues({\n offset: 0,\n scale: 1\n });\n }\n }, [\n lastAnimatedFrom\n ]);\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n if (selectedTabRect && previousSelectedTabRect) {\n const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n setAnimationValues({\n offset,\n scale\n });\n setLastAnimatedFrom(previousSelectedValue);\n }\n }\n } else if (isValueDefined(lastAnimatedFrom)) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n };\n state.root.style = {\n ...rootCssVars,\n ...state.root.style\n };\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["React","__styles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","requestAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n overflow: 'visible'\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms'\n }\n }\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n }\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n }\n }\n});\nconst calculateTabRect = (element)=>{\n if (element) {\n var _element_parentElement;\n const parentRect = ((_element_parentElement = element.parentElement) === null \|\| _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) \|\| {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n const tabRect = element.getBoundingClientRect();\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height\n };\n }\n return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n var _registeredTabs_JSON_stringify;\n const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null \|\| _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n const { disabled, selected, vertical } = state;\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n const [animationValues, setAnimationValues] = React.useState({\n offset: 0,\n scale: 1\n });\n const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n const [requestAnimationFrame] = useAnimationFrame();\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n if (selectedTabRect && previousSelectedTabRect) {\n const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n setAnimationValues({\n offset,\n scale\n });\n setLastAnimatedFrom(previousSelectedValue);\n // Reset the animation values after the animation is complete\n requestAnimationFrame(()=>setAnimationValues({\n offset: 0,\n scale: 1\n }));\n }\n }\n } else if (isValueDefined(lastAnimatedFrom)) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n };\n state.root.style = {\n ...rootCssVars,\n ...state.root.style\n };\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _react1 = require("@griffel/react");
 const _TabListContext = require("../TabList/TabListContext");
+const _reactutilities = require("@fluentui/react-utilities");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const tabIndicatorCssVars_unstable = {
     offsetVar: '--fui-Tab__indicator--offset',
@@ -108,16 +109,7 @@ const useTabAnimatedIndicatorStyles_unstable = (state)=>{
         scale: 1
     });
     const getRegisteredTabs = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.getRegisteredTabs);
-    _react.useEffect(()=>{
-        if (isValueDefined(lastAnimatedFrom)) {
-            setAnimationValues({
-                offset: 0,
-                scale: 1
-            });
-        }
-    }, [
-        lastAnimatedFrom
-    ]);
+    const [requestAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
     if (selected) {
         const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();
         if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {
@@ -131,6 +123,11 @@ const useTabAnimatedIndicatorStyles_unstable = (state)=>{
                     scale
                 });
                 setLastAnimatedFrom(previousSelectedValue);
+                // Reset the animation values after the animation is complete
+                requestAnimationFrame(()=>setAnimationValues({
+                        offset: 0,
+                        scale: 1
+                    }));
             }
         }
     } else if (isValueDefined(lastAnimatedFrom)) {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n overflow: 'visible'\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms'\n }\n }\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n }\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n }\n }\n});\nconst calculateTabRect = (element)=>{\n if (element) {\n var _element_parentElement;\n const parentRect = ((_element_parentElement = element.parentElement) === null \|\| _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) \|\| {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n const tabRect = element.getBoundingClientRect();\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height\n };\n }\n return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n var _registeredTabs_JSON_stringify;\n const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null \|\| _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n const { disabled, selected, vertical } = state;\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n const [animationValues, setAnimationValues] = React.useState({\n offset: 0,\n scale: 1\n });\n const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n ~~React.useEffect(()=>{\n if~~ ~~(isValueDefined(lastAnimatedFrom))~~ ~~{\n setAnimationValues~~(~~{\n offset: 0,\n scale: 1\n }~~);\n ~~}\n~~ ~~}, [\n lastAnimatedFrom\n ]);\n~~ if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n if (selectedTabRect && previousSelectedTabRect) {\n const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n setAnimationValues({\n offset,\n scale\n });\n setLastAnimatedFrom(previousSelectedValue);\n }\n }\n } else if (isValueDefined(lastAnimatedFrom)) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n };\n state.root.style = {\n ...rootCssVars,\n ...state.root.style\n };\n return state;\n};\n"],"names":["useTabAnimatedIndicatorStyles_unstable","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","__styles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","React","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","useTabListContext_unstable","ctx","~~useEffect~~","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","mergeClasses","rootCssVars","style"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAsEiBA~~;;;eAAAA;;;;~~iEAtEM~~;wBACkB;gCACE;~~AAE3C~~,gEAAA;AACA,MAAMC,+BAA+B;IACjCC,WAAW;IACXC,UAAU;AACd;AACA,MAAMC,2BAAwB,WAAA,GAAGC,IAAAA,gBAAA,EAAA;IAAAC,MAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,UAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,YAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;IAAA;IAAAC,UAAA;QAAAF,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAiCjC,MAAMC,mBAAoBC,CAAAA;IACtB,IAAIA,SAAS;QACT,IAAIC;QACJ,MAAMC,aAAa,AAAC,CAAA,AAACD,CAAAA,yBAAyBD,QAAQG,aAAa,AAAbA,MAAmB,QAAQF,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBG,qBAAqB,EAAC,KAAM;YAC7KC,GAAG;YACHC,GAAG;YACHC,OAAO;YACPC,QAAQ;QACZ;QACA,MAAMC,UAAUT,QAAQI,qBAAqB;QAC7C,OAAO;YACHC,GAAGI,QAAQJ,CAAC,GAAGH,WAAWG,CAAC;YAC3BC,GAAGG,QAAQH,CAAC,GAAGJ,WAAWI,CAAC;YAC3BC,OAAOE,QAAQF,KAAK;YACpBC,QAAQC,QAAQD,MAAAA;QACpB;IACJ;IACA,OAAOE;AACX;AACA,MAAMC,uBAAuBA,CAACC,gBAAgBC;IAC1C,IAAIC;IACJ,MAAMd,UAAUe,eAAeF,SAAS,AAACC,CAAAA,iCAAiCF,cAAc,CAACI,KAAKC,SAAS,CAACJ,OAAO,AAAD,MAAO,QAAQC,mCAAmC,KAAK,IAAI,KAAK,IAAIA,+BAA+BI,GAAG,CAACC,OAAO,GAAGT;IAC/N,OAAOV,UAAUD,iBAAiBC,WAAWU;AACjD;AACA,kCAAA;AACA,MAAMK,iBAAkBF,CAAAA,QAAQA,SAAS;AAG9B,MAAMrC,yCAA0C4C,CAAAA;IACvD,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAE3B,QAAAA,EAAU,GAAGyB;IACzC,MAAMG,wBAAwB3C;IAC9B,MAAM,CAAC4C,kBAAkBC,oBAAoB,GAAGC,OAAMC,QAAQ;IAC9D,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGH,OAAMC,QAAQ,CAAC;QACzDG,QAAQ;QACRC,OAAO;IACX;IACA,MAAMC,oBAAoBC,IAAAA,0CAA0B,EAAEC,CAAAA,MAAMA,IAAIF,iBAAiB;~~IACjFN~~,~~OAAMS~~,~~SAAS~~,~~CAAC;QACZ~~,~~IAAIpB~~,~~eAAeS~~,~~mBAAmB~~;~~YAClCK~~,~~mBAAmB;gBACfC~~,~~QAAQ;gBACRC,OAAO;YACX;QACJ;IACJ,GAAG;QACCP;KACH;IACD,IAAIF,~~UAAU;QACV,MAAM,~~EAAEc~~,qBAAqB,EAAEC,aAAa,~~EAAEzB~~,cAAAA,EAAgB,GAAGoB;QACjE,IAAIjB,~~eAAeqB~~,~~0BAA0BZ~~,~~qBAAqBY~~,uBAAuB;YACrF,MAAME,~~0BAA0B3B~~,qBAAqBC,~~gBAAgBwB~~;YACrE,MAAMG,~~kBAAkB5B~~,qBAAqBC,~~gBAAgByB~~;YAC7D,IAAIE,mBAAmBD,yBAAyB;gBAC5C,~~MAAMR~~,SAASnC,~~WAAW2C~~,~~wBAAwBhC~~,CAAC,~~GAAGiC~~,~~gBAAgBjC~~,CAAC,~~GAAGgC~~,~~wBAAwBjC~~,CAAC,~~GAAGkC~~,~~gBAAgBlC~~,CAAC;gBACvH,MAAM0B,QAAQpC,~~WAAW2C~~,~~wBAAwB9B~~,MAAM,~~GAAG+B~~,~~gBAAgB/B~~,MAAM,~~GAAG8B,wBAAwB/~~B,KAAK,~~GAAGgC~~,~~gBAAgBhC~~,KAAK;gBACxIsB,mBAAmB;oBACfC;oBACAC;gBACJ;gBACAN,~~oBAAoBW~~;~~YACxB~~;QACJ;IACJ,OAAO,~~IAAIrB~~,eAAeS,mBAAmB;QACzC,6EAAA;QACA,yEAAA;QACAC,oBAAoBf;IACxB;IACA,oDAAA;IACA,IAAIW,UAAU;QACV,OAAOD;IACX;IACA,6EAAA;IACA,oEAAA;IACA,~~MAAMoB~~,~~YAAYZ~~,gBAAgBE,MAAM,KAAK,KAAKF,gBAAgBG,KAAK,KAAK;IAC5EX,~~MAAMqB~~,IAAI,CAACC,SAAS,GAAGC,IAAAA,oBAAY,~~EAACvB~~,~~MAAMqB~~,IAAI,CAACC,SAAS,~~EAAEpB~~,YAAYC,sBAAsBzC,IAAI,EAAEwC,~~YAAYkB~~,~~aAAajB~~,sBAAsBrC,QAAQ,EAAEoC,YAAa3B,CAAAA,WAAW4B,sBAAsB5B,QAAQ,GAAG4B,sBAAsB/B,UAAU,AAAVA;IAC1O,~~MAAMoD~~,cAAc;QAChB,~~CAACnE~~,6BAA6BC,SAAS,CAAA,EAAG,CAAA,EAAGkD,gBAAgBE,MAAM,CAAA,EAAA,CAAI;QACvE,CAACrD,6BAA6BE,QAAQ,CAAA,EAAG,CAAA,EAAGiD,gBAAgBG,KAAK,CAAA,CAAA;IACrE;IACAX,~~MAAMqB~~,IAAI,CAACI,KAAK,GAAG;QACf,GAAGD,WAAW;QACd,~~GAAGxB~~,~~MAAMqB~~,IAAI,CAACI,KAAAA;IAClB;IACA,~~OAAOzB~~;AACX"}
1	+ {"version":3,"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n offsetVar: '--fui-Tab__indicator--offset',\n scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n // overflow is required to allow the selection indicator to animate outside the tab area.\n overflow: 'visible'\n },\n animated: {\n '::after': {\n transitionProperty: 'transform',\n transitionDuration: `${tokens.durationSlow}`,\n transitionTimingFunction: `${tokens.curveDecelerateMax}`\n },\n '@media (prefers-reduced-motion: reduce)': {\n '::after': {\n transitionProperty: 'none',\n transitionDuration: '0.01ms'\n }\n }\n },\n horizontal: {\n '::after': {\n transformOrigin: 'left',\n transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n }\n },\n vertical: {\n '::after': {\n transformOrigin: 'top',\n transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n }\n }\n});\nconst calculateTabRect = (element)=>{\n if (element) {\n var _element_parentElement;\n const parentRect = ((_element_parentElement = element.parentElement) === null \|\| _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) \|\| {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n const tabRect = element.getBoundingClientRect();\n return {\n x: tabRect.x - parentRect.x,\n y: tabRect.y - parentRect.y,\n width: tabRect.width,\n height: tabRect.height\n };\n }\n return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n var _registeredTabs_JSON_stringify;\n const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null \|\| _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n return element ? calculateTabRect(element) : undefined;\n};\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\n/*\n Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n const { disabled, selected, vertical } = state;\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n const [animationValues, setAnimationValues] = React.useState({\n offset: 0,\n scale: 1\n });\n const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n const [requestAnimationFrame] = useAnimationFrame();\n if (selected) {\n const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n if (selectedTabRect && previousSelectedTabRect) {\n const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n setAnimationValues({\n offset,\n scale\n });\n setLastAnimatedFrom(previousSelectedValue);\n // Reset the animation values after the animation is complete\n requestAnimationFrame(()=>setAnimationValues({\n offset: 0,\n scale: 1\n }));\n }\n }\n } else if (isValueDefined(lastAnimatedFrom)) {\n // need to clear the last animated from so that if this tab is selected again\n // from the same previous tab as last time, that animation still happens.\n setLastAnimatedFrom(undefined);\n }\n // do not apply any animation if the tab is disabled\n if (disabled) {\n return state;\n }\n // the animation should only happen as the selection indicator returns to its\n // original position and not when set at the previous tabs position.\n const animating = animationValues.offset === 0 && animationValues.scale === 1;\n state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n const rootCssVars = {\n [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n };\n state.root.style = {\n ...rootCssVars,\n ...state.root.style\n };\n return state;\n};\n"],"names":["useTabAnimatedIndicatorStyles_unstable","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","__styles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","React","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","useTabListContext_unstable","ctx","requestAnimationFrame","useAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","mergeClasses","rootCssVars","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.7.2",
+  "version": "9.7.4",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,12 +18,12 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.74",
-    "@fluentui/react-jsx-runtime": "^9.0.52",
-    "@fluentui/react-shared-contexts": "^9.23.0",
-    "@fluentui/react-tabster": "^9.24.2",
+    "@fluentui/react-context-selector": "^9.1.75",
+    "@fluentui/react-jsx-runtime": "^9.0.53",
+    "@fluentui/react-shared-contexts": "^9.23.1",
+    "@fluentui/react-tabster": "^9.24.4",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.18.22",
+    "@fluentui/react-utilities": "^9.18.23",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },