@fluentui/react-tabs 9.3.3 → 9.3.5

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js

@@ -1,133 +1,149 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useTabAnimatedIndicatorStyles_unstable", {
+    enumerable: true,
+    get: ()=>useTabAnimatedIndicatorStyles_unstable
 });
-exports.useTabAnimatedIndicatorStyles_unstable = void 0;
-const React = /*#__PURE__*/require("react");
-const react_1 = /*#__PURE__*/require("@griffel/react");
-const TabListContext_1 = /*#__PURE__*/require("../TabList/TabListContext");
-const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react1 = require("@griffel/react");
+const _tabListContext = require("../TabList/TabListContext");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const tabIndicatorCssVars_unstable = {
-  offsetVar: '--fui-Tab__indicator--offset',
-  scaleVar: '--fui-Tab__indicator--scale'
+    offsetVar: '--fui-Tab__indicator--offset',
+    scaleVar: '--fui-Tab__indicator--scale'
 };
-const useActiveIndicatorStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    B68tc82: "f1mtd64y",
-    Bmxbyg5: "f1y7q3j9"
-  },
-  animated: {
-    Ba2ppi3: "fhwpy7i",
-    F2fol1: "f6zz20j",
-    B1dyfl9: "f1ai4sc1",
-    B0vmy72: "f9qxlq5",
-    u9bimw: "f1aql376"
-  },
-  horizontal: {
-    sjv3b2: ["fug4aj8", "f1i5xzg7"],
-    b1kco5: "f1q7ujh"
-  },
-  vertical: {
-    sjv3b2: "f1hqboyk",
-    b1kco5: "f1dxupa6"
-  }
+const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react1["__styles"])({
+    base: {
+        B68tc82: "f1mtd64y",
+        Bmxbyg5: "f1y7q3j9"
+    },
+    animated: {
+        Ba2ppi3: "fhwpy7i",
+        F2fol1: "f6zz20j",
+        B1dyfl9: "f1ai4sc1",
+        B0vmy72: "f9qxlq5",
+        u9bimw: "f1aql376"
+    },
+    horizontal: {
+        sjv3b2: [
+            "fug4aj8",
+            "f1i5xzg7"
+        ],
+        b1kco5: "f1q7ujh"
+    },
+    vertical: {
+        sjv3b2: "f1hqboyk",
+        b1kco5: "f1dxupa6"
+    }
 }, {
-  d: [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fhwpy7i::after{transition-property:transform;}", ".f6zz20j::after{transition-duration:var(--durationSlow);}", ".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}", ".fug4aj8::after{transform-origin:left;}", ".f1i5xzg7::after{transform-origin:right;}", ".f1q7ujh::after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".f1hqboyk::after{transform-origin:top;}", ".f1dxupa6::after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
-  m: [["@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}", {
-    m: "(prefers-reduced-motion: reduce)"
-  }], ["@media (prefers-reduced-motion: reduce){.f1aql376::after{transition-duration:0.01ms;}}", {
-    m: "(prefers-reduced-motion: reduce)"
-  }]]
+    d: [
+        ".f1mtd64y{overflow-x:visible;}",
+        ".f1y7q3j9{overflow-y:visible;}",
+        ".fhwpy7i::after{transition-property:transform;}",
+        ".f6zz20j::after{transition-duration:var(--durationSlow);}",
+        ".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}",
+        ".fug4aj8::after{transform-origin:left;}",
+        ".f1i5xzg7::after{transform-origin:right;}",
+        ".f1q7ujh::after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}",
+        ".f1hqboyk::after{transform-origin:top;}",
+        ".f1dxupa6::after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"
+    ],
+    m: [
+        [
+            "@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}",
+            {
+                m: "(prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media (prefers-reduced-motion: reduce){.f1aql376::after{transition-duration:0.01ms;}}",
+            {
+                m: "(prefers-reduced-motion: reduce)"
+            }
+        ]
+    ]
 });
-const calculateTabRect = element => {
-  var _a;
-  if (element) {
-    const parentRect = ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    };
-    const tabRect = element.getBoundingClientRect();
-    return {
-      x: tabRect.x - parentRect.x,
-      y: tabRect.y - parentRect.y,
-      width: tabRect.width,
-      height: tabRect.height
-    };
-  }
-  return undefined;
+const calculateTabRect = (element)=>{
+    if (element) {
+        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,
+            height: 0
+        };
+        const tabRect = element.getBoundingClientRect();
+        return {
+            x: tabRect.x - parentRect.x,
+            y: tabRect.y - parentRect.y,
+            width: tabRect.width,
+            height: tabRect.height
+        };
+    }
+    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;
-  return element ? calculateTabRect(element) : undefined;
+const getRegisteredTabRect = (registeredTabs, value)=>{
+    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;
 };
-/**
- * Adds additional styling to the active tab selection indicator to create a sliding animation.
- */
-const useTabAnimatedIndicatorStyles_unstable = state => {
-  const {
-    disabled,
-    selected,
-    vertical
-  } = state;
-  const activeIndicatorStyles = useActiveIndicatorStyles();
-  const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();
-  const [animationValues, setAnimationValues] = React.useState({
-    offset: 0,
-    scale: 1
-  });
-  const getRegisteredTabs = TabListContext_1.useTabListContext_unstable(ctx => ctx.getRegisteredTabs);
-  React.useEffect(() => {
-    if (lastAnimatedFrom) {
-      setAnimationValues({
+const useTabAnimatedIndicatorStyles_unstable = (state)=>{
+    const { disabled , selected , vertical  } = state;
+    const activeIndicatorStyles = useActiveIndicatorStyles();
+    const [lastAnimatedFrom, setLastAnimatedFrom] = _react.useState();
+    const [animationValues, setAnimationValues] = _react.useState({
         offset: 0,
         scale: 1
-      });
+    });
+    const getRegisteredTabs = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.getRegisteredTabs);
+    _react.useEffect(()=>{
+        if (lastAnimatedFrom) {
+            setAnimationValues({
+                offset: 0,
+                scale: 1
+            });
+        }
+    }, [
+        lastAnimatedFrom
+    ]);
+    if (selected) {
+        const { previousSelectedValue , selectedValue , registeredTabs  } = getRegisteredTabs();
+        const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
+        const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
+        if (selectedTabRect && previousSelectedTabRect && previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {
+            const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
+            const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
+            setAnimationValues({
+                offset,
+                scale
+            });
+            setLastAnimatedFrom(previousSelectedValue);
+        }
+    } else if (lastAnimatedFrom) {
+        // need to clear the last animated from so that if this tab is selected again
+        // from the same previous tab as last time, that animation still happens.
+        setLastAnimatedFrom(undefined);
     }
-  }, [lastAnimatedFrom]);
-  if (selected) {
-    const {
-      previousSelectedValue,
-      selectedValue,
-      registeredTabs
-    } = getRegisteredTabs();
-    const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
-    const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
-    if (selectedTabRect && previousSelectedTabRect && previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {
-      const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
-      const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
-      setAnimationValues({
-        offset,
-        scale
-      });
-      setLastAnimatedFrom(previousSelectedValue);
+    // do not apply any animation if the tab is disabled
+    if (disabled) {
+        return state;
     }
-  } else if (lastAnimatedFrom) {
-    // need to clear the last animated from so that if this tab is selected again
-    // from the same previous tab as last time, that animation still happens.
-    setLastAnimatedFrom(undefined);
-  }
-  // do not apply any animation if the tab is disabled
-  if (disabled) {
+    // the animation should only happen as the selection indicator returns to its
+    // original position and not when set at the previous tabs position.
+    const animating = animationValues.offset === 0 && animationValues.scale === 1;
+    state.root.className = (0, _react1.mergeClasses)(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));
+    const rootCssVars = {
+        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,
+        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`
+    };
+    state.root.style = {
+        ...rootCssVars,
+        ...state.root.style
+    };
     return state;
-  }
-  // the animation should only happen as the selection indicator returns to its
-  // original position and not when set at the previous tabs position.
-  const animating = animationValues.offset === 0 && animationValues.scale === 1;
-  state.root.className = react_1.mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));
-  const rootCssVars = {
-    [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,
-    [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`
-  };
-  state.root.style = {
-    ...rootCssVars,
-    ...state.root.style
-  };
-  return state;
-};
-exports.useTabAnimatedIndicatorStyles_unstable = useTabAnimatedIndicatorStyles_unstable;
+}; //# sourceMappingURL=useTabAnimatedIndicator.js.map
+
 //# sourceMappingURL=useTabAnimatedIndicator.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_1","TabListContext_1","react_theme_1","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","__styles","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","useTabListContext_unstable","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","mergeClasses","rootCssVars","style","exports"],"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,"sources":["../../../lib/components/Tab/useTabAnimatedIndicator.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n  offsetVar: '--fui-Tab__indicator--offset',\n  scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = /*#__PURE__*/__styles({\n  base: {\n    B68tc82: \"f1mtd64y\",\n    Bmxbyg5: \"f1y7q3j9\"\n  },\n  animated: {\n    Ba2ppi3: \"fhwpy7i\",\n    F2fol1: \"f6zz20j\",\n    B1dyfl9: \"f1ai4sc1\",\n    B0vmy72: \"f9qxlq5\",\n    u9bimw: \"f1aql376\"\n  },\n  horizontal: {\n    sjv3b2: [\"fug4aj8\", \"f1i5xzg7\"],\n    b1kco5: \"f1q7ujh\"\n  },\n  vertical: {\n    sjv3b2: \"f1hqboyk\",\n    b1kco5: \"f1dxupa6\"\n  }\n}, {\n  d: [\".f1mtd64y{overflow-x:visible;}\", \".f1y7q3j9{overflow-y:visible;}\", \".fhwpy7i::after{transition-property:transform;}\", \".f6zz20j::after{transition-duration:var(--durationSlow);}\", \".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}\", \".fug4aj8::after{transform-origin:left;}\", \".f1i5xzg7::after{transform-origin:right;}\", \".f1q7ujh::after{-webkit-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-moz-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));-ms-transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}\", \".f1hqboyk::after{transform-origin:top;}\", \".f1dxupa6::after{-webkit-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-moz-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));-ms-transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}\"],\n  m: [[\"@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}\", {\n    m: \"(prefers-reduced-motion: reduce)\"\n  }], [\"@media (prefers-reduced-motion: reduce){.f1aql376::after{transition-duration:0.01ms;}}\", {\n    m: \"(prefers-reduced-motion: reduce)\"\n  }]]\n});\nconst calculateTabRect = element => {\n  if (element) {\n    var _element_parentElement;\n    const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {\n      x: 0,\n      y: 0,\n      width: 0,\n      height: 0\n    };\n    const tabRect = element.getBoundingClientRect();\n    return {\n      x: tabRect.x - parentRect.x,\n      y: tabRect.y - parentRect.y,\n      width: tabRect.width,\n      height: tabRect.height\n    };\n  }\n  return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value) => {\n  var _registeredTabs_JSON_stringify;\n  const element = value !== undefined && value !== null ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n  return element ? calculateTabRect(element) : undefined;\n};\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = state => {\n  const {\n    disabled,\n    selected,\n    vertical\n  } = state;\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n  const [animationValues, setAnimationValues] = React.useState({\n    offset: 0,\n    scale: 1\n  });\n  const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n  React.useEffect(() => {\n    if (lastAnimatedFrom) {\n      setAnimationValues({\n        offset: 0,\n        scale: 1\n      });\n    }\n  }, [lastAnimatedFrom]);\n  if (selected) {\n    const {\n      previousSelectedValue,\n      selectedValue,\n      registeredTabs\n    } = getRegisteredTabs();\n    const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n    const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n    if (selectedTabRect && previousSelectedTabRect && previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {\n      const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n      const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n      setAnimationValues({\n        offset,\n        scale\n      });\n      setLastAnimatedFrom(previousSelectedValue);\n    }\n  } else if (lastAnimatedFrom) {\n    // need to clear the last animated from so that if this tab is selected again\n    // from the same previous tab as last time, that animation still happens.\n    setLastAnimatedFrom(undefined);\n  }\n  // do not apply any animation if the tab is disabled\n  if (disabled) {\n    return state;\n  }\n  // the animation should only happen as the selection indicator returns to its\n  // original position and not when set at the previous tabs position.\n  const animating = animationValues.offset === 0 && animationValues.scale === 1;\n  state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n  const rootCssVars = {\n    [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n    [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n  };\n  state.root.style = {\n    ...rootCssVars,\n    ...state.root.style\n  };\n  return state;\n};\n//# sourceMappingURL=useTabAnimatedIndicator.js.map"],"names":["useTabAnimatedIndicatorStyles_unstable","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","__styles","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","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"],"mappings":"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"}