@fluentui/react-tabs 9.8.2 → 9.9.0

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Thu, 26 Jun 2025 14:07:54 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.9.0)
+
+Thu, 17 Jul 2025 13:45:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.8.3..@fluentui/react-tabs_v9.9.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
+## [9.8.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.8.3)
+
+Fri, 27 Jun 2025 13:39:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.8.2..@fluentui/react-tabs_v9.8.3)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.25.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
+
 ## [9.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.8.2)
 
-Thu, 26 Jun 2025 14:07:54 GMT 
+Thu, 26 Jun 2025 14:11:55 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.8.1..@fluentui/react-tabs_v9.8.2)
 
 ### Patches

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\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 onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  const focusProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\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 iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const contentReservedSpace: typeof content =\n    content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\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}` as 'true' | 'false'),\n        ...focusProps,\n        ...props,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      }),\n      { elementType: 'button' },\n    ),\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    contentReservedSpace: slot.optional(contentReservedSpace, {\n      renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"names":["React","useTabsterAttributes","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","focusProps","focusable","isDefault","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","iconOnly","Boolean","components","root","role","type","undefined","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\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 onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  const focusProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\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 iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const contentReservedSpace: typeof content =\n    content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\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}` as 'true' | 'false'),\n        ...focusProps,\n        ...props,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      }),\n      { elementType: 'button' },\n    ) as TabState['root'],\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    contentReservedSpace: slot.optional(contentReservedSpace, {\n      renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"names":["React","useTabsterAttributes","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","focusProps","focusable","isDefault","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","iconOnly","Boolean","components","root","role","type","undefined","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/Tab/useTabAnimatedIndicator.styles.raw.js

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { makeStyles, 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',
+    scaleVar: '--fui-Tab__indicator--scale'
+};
+const useActiveIndicatorStyles = makeStyles({
+    base: {
+        // overflow is required to allow the selection indicator to animate outside the tab area.
+        overflow: 'visible'
+    },
+    animated: {
+        '::after': {
+            transitionProperty: 'transform',
+            transitionDuration: `${tokens.durationSlow}`,
+            transitionTimingFunction: `${tokens.curveDecelerateMax}`
+        },
+        '@media (prefers-reduced-motion: reduce)': {
+            '::after': {
+                transitionProperty: 'none',
+                transitionDuration: '0.01ms'
+            }
+        }
+    },
+    horizontal: {
+        '::after': {
+            transformOrigin: 'left',
+            transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))
+    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`
+        }
+    },
+    vertical: {
+        '::after': {
+            transformOrigin: 'top',
+            transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))
+        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`
+        }
+    }
+});
+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 _registeredTabs_JSON_stringify;
+    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;
+    return element ? calculateTabRect(element) : undefined;
+};
+// eslint-disable-next-line eqeqeq
+const isValueDefined = (value)=>value != null;
+/**
+ * Adds additional styling to the active tab selection indicator to create a sliding animation.
+ */ export 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 = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);
+    const [requestAnimationFrame] = useAnimationFrame();
+    if (selected) {
+        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();
+        if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {
+            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
+            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
+            if (selectedTabRect && previousSelectedTabRect) {
+                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);
+                // Reset the animation values after the animation is complete
+                requestAnimationFrame(()=>setAnimationValues({
+                        offset: 0,
+                        scale: 1
+                    }));
+            }
+        }
+    } else if (isValueDefined(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) {
+        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 = 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;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tab/useTabAnimatedIndicator.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\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    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 = isValueDefined(value) ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n  return element ? calculateTabRect(element) : undefined;\n};\n\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value: TabValue) => value != null;\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  const [requestAnimationFrame] = useAnimationFrame();\n\n  if (selected) {\n    const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n\n    if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n      const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n      const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n      if (selectedTabRect && previousSelectedTabRect) {\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        // Reset the animation values after the animation is complete\n        requestAnimationFrame(() => setAnimationValues({ offset: 0, scale: 1 }));\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\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"],"names":["React","makeStyles","mergeClasses","useTabListContext_unstable","tokens","useAnimationFrame","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","overflow","animated","transitionProperty","transitionDuration","durationSlow","transitionTimingFunction","curveDecelerateMax","horizontal","transformOrigin","transform","vertical","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}