@fluentui/react-tabs 1.0.0-beta.98 → 9.0.0-beta.11

package/lib/TabList.d.ts

@@ -0,0 +1 @@
+export * from './components/TabList/index';

package/lib/TabList.js

@@ -0,0 +1,2 @@
+export * from './components/TabList/index';
+//# sourceMappingURL=TabList.js.map

package/lib/TabList.js.map

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

package/lib/components/Tab/Tab.d.ts

@@ -0,0 +1,6 @@
+import type { TabProps } from './Tab.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * A tab provides a selectable item in a tab list.
+ */
+export declare const Tab: ForwardRefComponent<TabProps>;

package/lib/components/Tab/Tab.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useTab_unstable } from './useTab';
+import { renderTab_unstable } from './renderTab';
+import { useTabStyles_unstable } from './useTabStyles';
+/**
+ * A tab provides a selectable item in a tab list.
+ */
+
+export const Tab = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTab_unstable(props, ref);
+  useTabStyles_unstable(state);
+  return renderTab_unstable(state);
+});
+Tab.displayName = 'Tab';
+//# sourceMappingURL=Tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,UAAhC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,GAAG,gBAAkC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChF,QAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AACA,SAAO,kBAAkB,CAAC,KAAD,CAAzB;AACD,CALiD,CAA3C;AAOP,GAAG,CAAC,WAAJ,GAAkB,KAAlB","sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"sourceRoot":"../src/"}

package/lib/components/Tab/Tab.types.d.ts

@@ -0,0 +1,61 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+/**
+ * Any value that identifies a specific tab.
+ */
+export declare type TabValue = unknown;
+export declare type TabSlots = {
+    /**
+     * Root of the component.
+     */
+    root: Slot<'button'>;
+    /**
+     * Icon that renders before the content.
+     */
+    icon?: Slot<'span'>;
+    /**
+     * Component children are placed in this slot
+     * Avoid using the `children` property in this slot in favour of Component children whenever possible.
+     */
+    content: NonNullable<Slot<'span'>>;
+};
+declare type TabCommons = {
+    /**
+     * A tab can be set to disable interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The value that identifies this tab when selected.
+     */
+    value: TabValue;
+};
+/**
+ * Tab Props
+ */
+export declare type TabProps = ComponentProps<Partial<TabSlots>> & TabCommons;
+/**
+ * State used in rendering Tab
+ */
+export declare type TabState = ComponentState<TabSlots> & Omit<TabCommons, 'disabled'> & Required<Pick<TabCommons, 'disabled'>> & {
+    /**
+     * A tab supports 'transparent' and 'subtle' appearance.
+     */
+    appearance?: 'transparent' | 'subtle';
+    /**
+     * A tab can have only an icon slot filled and no content.
+     */
+    iconOnly: boolean;
+    /**
+     * If this tab is selected
+     */
+    selected: boolean;
+    /**
+     * A tab can be either 'small' or 'medium' size.
+     */
+    size: 'small' | 'medium';
+    /**
+     * A tab can arrange its content based on if the tabs in the list are arranged vertically.
+     */
+    vertical: boolean;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tab.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.types.js","sourceRoot":"../src/","sources":["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\ntype TabCommons = {\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 * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & TabCommons;\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabSlots> &\n  Omit<TabCommons, 'disabled'> &\n  Required<Pick<TabCommons, '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     * A tab can be either 'small' or 'medium' size.\n     */\n    size: 'small' | 'medium';\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"]}

package/lib/components/Tab/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Tab';
+export * from './Tab.types';
+export * from './renderTab';
+export * from './useTab';
+export * from './useTabStyles';
+export * from './useTabAnimatedIndicator';

package/lib/components/Tab/index.js

@@ -0,0 +1,7 @@
+export * from './Tab';
+export * from './Tab.types';
+export * from './renderTab';
+export * from './useTab';
+export * from './useTabStyles';
+export * from './useTabAnimatedIndicator';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["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"]}

package/lib/components/Tab/renderTab.d.ts

@@ -0,0 +1,5 @@
+import type { TabState } from './Tab.types';
+/**
+ * Render the final JSX of Tab
+ */
+export declare const renderTab_unstable: (state: TabState) => JSX.Element;

package/lib/components/Tab/renderTab.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Tab
+ */
+
+export const renderTab_unstable = state => {
+  const {
+    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
+  }));
+};
+//# sourceMappingURL=renderTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;AACpD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAW,KAAX,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,CAAC,KAAK,CAAC,QAAP,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAFtB,CADF;AAMD,CATM","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    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Tab/useTab.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { TabProps, TabState } from './Tab.types';
+/**
+ * Create the state required to render Tab.
+ *
+ * The returned state can be modified with hooks such as useTabStyles_unstable,
+ * before being passed to renderTab_unstable.
+ *
+ * @param props - props from this instance of Tab
+ * @param ref - reference to root HTMLElement of Tab
+ */
+export declare const useTab_unstable: (props: TabProps, ref: React.Ref<HTMLElement>) => TabState;

package/lib/components/Tab/useTab.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { TabListContext } from '../TabList/TabListContext';
+import { useContextSelector } from '@fluentui/react-context-selector';
+/**
+ * Create the state required to render Tab.
+ *
+ * The returned state can be modified with hooks such as useTabStyles_unstable,
+ * before being passed to renderTab_unstable.
+ *
+ * @param props - props from this instance of Tab
+ * @param ref - reference to root HTMLElement of Tab
+ */
+
+export const useTab_unstable = (props, ref) => {
+  const {
+    content,
+    disabled: tabDisabled = false,
+    icon,
+    value
+  } = props;
+  const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);
+  const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);
+  const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);
+  const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);
+  const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);
+  const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);
+  const size = useContextSelector(TabListContext, ctx => ctx.size);
+  const vertical = useContextSelector(TabListContext, ctx => !!ctx.vertical);
+  const disabled = listDisabled || tabDisabled;
+  const innerRef = React.useRef(null);
+  const onClick = useEventCallback(event => onSelect(event, {
+    value
+  }));
+  React.useEffect(() => {
+    onRegister({
+      value,
+      ref: innerRef
+    });
+    return () => {
+      onUnregister({
+        value,
+        ref: innerRef
+      });
+    };
+  }, [onRegister, onUnregister, innerRef, value]);
+  const iconShorthand = resolveShorthand(icon);
+  const contentShorthand = resolveShorthand(content, {
+    required: true,
+    defaultProps: {
+      children: props.children
+    }
+  });
+  return {
+    components: {
+      root: 'button',
+      icon: 'span',
+      content: 'span'
+    },
+    root: getNativeElementProps('button', {
+      ref: useMergedRefs(ref, innerRef),
+      role: 'tab',
+      // aria-selected undefined indicates it is not selectable
+      // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
+      'aria-selected': disabled ? undefined : `${selected}`,
+      ...props,
+      disabled,
+      onClick
+    }),
+    icon: iconShorthand,
+    iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
+    content: contentShorthand,
+    appearance,
+    disabled,
+    selected,
+    size,
+    value,
+    vertical
+  };
+};
+//# sourceMappingURL=useTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { TabListContext } from '../TabList/TabListContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\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 = useContextSelector(TabListContext, ctx => ctx.appearance);\n  const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);\n  const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);\n  const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);\n  const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);\n  const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);\n  const size = useContextSelector(TabListContext, ctx => ctx.size);\n  const vertical = useContextSelector(TabListContext, 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      // 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    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Tab/useTabAnimatedIndicator.d.ts

@@ -0,0 +1,5 @@
+import type { TabState } from './Tab.types';
+/**
+ * Adds additional styling to the active tab selection indicator to create a sliding animation.
+ */
+export declare const useTabAnimatedIndicatorStyles_unstable: (state: TabState) => TabState;

package/lib/components/Tab/useTabAnimatedIndicator.js

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { useContextSelector } from '@fluentui/react-context-selector';
+import { TabListContext } from '../TabList/TabListContext';
+import { tokens } from '@fluentui/react-theme'; // eslint-disable-next-line @typescript-eslint/naming-convention
+
+const tabIndicatorCssVars_unstable = {
+  offsetVar: '--fui-Tab__indicator--offset',
+  scaleVar: '--fui-Tab__indicator--scale'
+};
+
+const useActiveIndicatorStyles = /*#__PURE__*/__styles({
+  "base": {
+    "B68tc82": "f1mtd64y",
+    "Bmxbyg5": "f1y7q3j9"
+  },
+  "animated": {
+    "wbfbqe": "fopw4to",
+    "mafdb0": "f1gswng4",
+    "Jgwf15": "fjw9r1k",
+    "Bh4j9q1": "f1cif4e6",
+    "Gk6w4d": "fa42t5a"
+  },
+  "horizontal": {
+    "Blx6ldh": ["f1g89gis", "fcjnwxz"],
+    "xn0juu": "f7m34ad"
+  },
+  "vertical": {
+    "Blx6ldh": "fqfgdei",
+    "xn0juu": "fwvsziq"
+  }
+}, {
+  "d": [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fopw4to:after{transition-property:transform;}", ".f1gswng4:after{transition-duration:var(--durationSlow);}", ".fjw9r1k:after{transition-timing-function:var(--curveDecelerateMax);}", ".f1g89gis:after{transform-origin:left;}", ".fcjnwxz:after{transform-origin:right;}", ".f7m34ad: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));}", ".fqfgdei:after{transform-origin:top;}", ".fwvsziq: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));}"],
+  "t": ["@media (prefers-reduced-motion: reduce){.f1cif4e6:after{transition-property:none;}}", "@media (prefers-reduced-motion: reduce){.fa42t5a:after{transition-duration:0.01ms;}}"]
+});
+
+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 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;
+};
+/**
+ * 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 = useContextSelector(TabListContext, 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);
+  } // 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;
+};
+//# sourceMappingURL=useTabAnimatedIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/useTabAnimatedIndicator.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContext } 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 = useContextSelector(TabListContext, 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"],"sourceRoot":"../src/"}

package/lib/components/Tab/useTabStyles.d.ts

@@ -0,0 +1,8 @@
+import type { TabSlots, TabState } from './Tab.types';
+import { SlotClassNames } from '@fluentui/react-utilities';
+export declare const tabClassNames: SlotClassNames<TabSlots>;
+export declare const tabClassName: string;
+/**
+ * Apply styling to the Tab slots based on the state
+ */
+export declare const useTabStyles_unstable: (state: TabState) => TabState;