@fluentui/react-tabs 9.3.35 → 9.3.37

package/lib-commonjs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabList.js"],"sourcesContent":["export * from './components/TabList/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
+{"version":3,"sources":["TabList.js"],"sourcesContent":["export * from './components/TabList/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

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

@@ -4,18 +4,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Tab", {
     enumerable: true,
-    get: ()=>Tab
+    get: function() {
+        return Tab;
+    }
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useTab = require("./useTab");
 const _renderTab = require("./renderTab");
-const _useTabStylesStyles = require("./useTabStyles.styles");
-const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+const _useTabStylesstyles = require("./useTabStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const Tab = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useTab.useTab_unstable)(props, ref);
-    (0, _useTabStylesStyles.useTabStyles_unstable)(state);
-    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useTabStyles_unstable')(state);
+    (0, _useTabStylesstyles.useTabStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTabStyles_unstable')(state);
     return (0, _renderTab.renderTab_unstable)(state);
 });
 Tab.displayName = 'Tab';

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.js"],"sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A tab provides a selectable item in a tab list.\n */ export const Tab = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useTab_unstable(props, ref);\n    useTabStyles_unstable(state);\n    useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n    return renderTab_unstable(state);\n});\nTab.displayName = 'Tab';\n"],"names":["Tab","React","forwardRef","props","ref","state","useTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","renderTab_unstable","displayName"],"mappings":";;;;+BAOiBA;;aAAAA;;;6DAPM;wBACS;2BACG;oCACG;qCACM;AAGjC,MAAMA,MAAM,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IAChE,MAAMC,QAAQC,IAAAA,uBAAe,EAACH,OAAOC;IACrCG,IAAAA,yCAAqB,EAACF;IACtBG,IAAAA,gDAA2B,EAAC,yBAAyBH;IACrD,OAAOI,IAAAA,6BAAkB,EAACJ;AAC9B;AACAL,IAAIU,WAAW,GAAG"}
+{"version":3,"sources":["Tab.js"],"sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A tab provides a selectable item in a tab list.\n */ export const Tab = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useTab_unstable(props, ref);\n    useTabStyles_unstable(state);\n    useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n    return renderTab_unstable(state);\n});\nTab.displayName = 'Tab';\n"],"names":["Tab","React","forwardRef","props","ref","state","useTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","renderTab_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;wBACS;2BACG;oCACG;qCACM;AAGjC,MAAMA,MAAM,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC1D,MAAMC,QAAQC,IAAAA,uBAAe,EAACH,OAAOC;IACrCG,IAAAA,yCAAqB,EAACF;IACtBG,IAAAA,gDAA2B,EAAC,yBAAyBH;IACrD,OAAOI,IAAAA,6BAAkB,EAACJ;AAC9B;AACAL,IAAIU,WAAW,GAAG"}

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./Tab"), exports);
-_exportStar(require("./Tab.types"), exports);
-_exportStar(require("./renderTab"), exports);
-_exportStar(require("./useTab"), exports);
-_exportStar(require("./useTabStyles.styles"), exports);
-_exportStar(require("./useTabAnimatedIndicator.styles"), exports);
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Tab"), exports);
+_export_star._(require("./Tab.types"), exports);
+_export_star._(require("./renderTab"), exports);
+_export_star._(require("./useTab"), exports);
+_export_star._(require("./useTabStyles.styles"), exports);
+_export_star._(require("./useTabAnimatedIndicator.styles"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles.styles';\nexport * from './useTabAnimatedIndicator.styles';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles.styles';\nexport * from './useTabAnimatedIndicator.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA"}

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

@@ -1,14 +1,22 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
 Object.defineProperty(exports, "renderTab_unstable", {
     enumerable: true,
-    get: ()=>renderTab_unstable
+    get: function() {
+        return renderTab_unstable;
+    }
 });
-const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
-const _reactUtilities = require("@fluentui/react-utilities");
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
 const renderTab_unstable = (state)=>{
-    (0, _reactUtilities.assertSlots)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.icon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.icon, null), !state.iconOnly && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.content, null), state.contentReservedSpace && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.contentReservedSpace, null));
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
+            !state.iconOnly && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {}),
+            state.contentReservedSpace && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.contentReservedSpace, {})
+        ]
+    });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTab.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Tab\n */ export const renderTab_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, state.icon && /*#__PURE__*/ createElement(state.icon, null), !state.iconOnly && /*#__PURE__*/ createElement(state.content, null), state.contentReservedSpace && /*#__PURE__*/ createElement(state.contentReservedSpace, null));\n};\n"],"names":["renderTab_unstable","state","assertSlots","createElement","root","icon","iconOnly","content","contentReservedSpace"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,qBAAqB,CAACC,QAAQ;IAC3CC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI,EAAEH,MAAMI,IAAI,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACF,MAAMI,IAAI,EAAE,IAAI,GAAG,CAACJ,MAAMK,QAAQ,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACF,MAAMM,OAAO,EAAE,IAAI,GAAGN,MAAMO,oBAAoB,IAAI,WAAW,GAAGL,IAAAA,8BAAa,EAACF,MAAMO,oBAAoB,EAAE,IAAI;AACrR"}
+{"version":3,"sources":["renderTab.js"],"sourcesContent":["/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Tab\n */ export const renderTab_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsxs(state.root, {\n        children: [\n            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),\n            !state.iconOnly && /*#__PURE__*/ _jsx(state.content, {}),\n            state.contentReservedSpace && /*#__PURE__*/ _jsx(state.contentReservedSpace, {})\n        ]\n    });\n};\n"],"names":["renderTab_unstable","state","assertSlots","_jsxs","root","children","icon","_jsx","iconOnly","content","contentReservedSpace"],"mappings":"AAAA,0BAA0B,GAAG,iDAAiD;;;;+BAI7DA;;;eAAAA;;;4BAJ2G;gCAChG;AAGjB,MAAMA,qBAAqB,CAACC;IACnCC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,gBAAK,EAACF,MAAMG,IAAI,EAAE;QACnCC,UAAU;YACNJ,MAAMK,IAAI,IAAI,WAAW,GAAGC,IAAAA,eAAI,EAACN,MAAMK,IAAI,EAAE,CAAC;YAC9C,CAACL,MAAMO,QAAQ,IAAI,WAAW,GAAGD,IAAAA,eAAI,EAACN,MAAMQ,OAAO,EAAE,CAAC;YACtDR,MAAMS,oBAAoB,IAAI,WAAW,GAAGH,IAAAA,eAAI,EAACN,MAAMS,oBAAoB,EAAE,CAAC;SACjF;IACL;AACJ"}

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

@@ -4,26 +4,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useTab_unstable", {
     enumerable: true,
-    get: ()=>useTab_unstable
+    get: function() {
+        return useTab_unstable;
+    }
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactUtilities = require("@fluentui/react-utilities");
-const _tabListContext = require("../TabList/TabListContext");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _TabListContext = require("../TabList/TabListContext");
 const useTab_unstable = (props, ref)=>{
-    const { content , disabled: tabDisabled = false , icon , onClick , value  } = props;
-    const appearance = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.appearance);
-    const reserveSelectedTabSpace = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.reserveSelectedTabSpace);
-    const listDisabled = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.disabled);
-    const selected = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.selectedValue === value);
-    const onRegister = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.onRegister);
-    const onUnregister = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.onUnregister);
-    const onSelect = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.onSelect);
-    const size = (0, _tabListContext.useTabListContext_unstable)((ctx)=>ctx.size);
-    const vertical = (0, _tabListContext.useTabListContext_unstable)((ctx)=>!!ctx.vertical);
+    var _iconSlot;
+    const { content, disabled: tabDisabled = false, icon, onClick, value } = props;
+    const appearance = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.appearance);
+    const reserveSelectedTabSpace = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.reserveSelectedTabSpace);
+    const listDisabled = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.disabled);
+    const selected = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.selectedValue === value);
+    const onRegister = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.onRegister);
+    const onUnregister = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.onUnregister);
+    const onSelect = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.onSelect);
+    const size = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.size);
+    const vertical = (0, _TabListContext.useTabListContext_unstable)((ctx)=>!!ctx.vertical);
     const disabled = listDisabled || tabDisabled;
     const innerRef = _react.useRef(null);
-    const onTabClick = (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(onClick, (event)=>onSelect(event, {
+    const onTabClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, (event)=>onSelect(event, {
             value
         })));
     _react.useEffect(()=>{
@@ -43,16 +46,16 @@ const useTab_unstable = (props, ref)=>{
         innerRef,
         value
     ]);
-    const iconSlot = _reactUtilities.slot.optional(icon, {
+    const iconSlot = _reactutilities.slot.optional(icon, {
         elementType: 'span'
     });
-    const contentSlot = _reactUtilities.slot.always(content, {
+    const contentSlot = _reactutilities.slot.always(content, {
         defaultProps: {
             children: props.children
         },
         elementType: 'span'
     });
-    const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
+    const iconOnly = Boolean(((_iconSlot = iconSlot) === null || _iconSlot === void 0 ? void 0 : _iconSlot.children) && !contentSlot.children);
     return {
         components: {
             root: 'button',
@@ -60,8 +63,8 @@ const useTab_unstable = (props, ref)=>{
             content: 'span',
             contentReservedSpace: 'span'
         },
-        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('button', {
-            ref: (0, _reactUtilities.useMergedRefs)(ref, innerRef),
+        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('button', {
+            ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
             role: 'tab',
             type: 'button',
             // aria-selected undefined indicates it is not selectable
@@ -76,7 +79,7 @@ const useTab_unstable = (props, ref)=>{
         icon: iconSlot,
         iconOnly,
         content: contentSlot,
-        contentReservedSpace: _reactUtilities.slot.optional(content, {
+        contentReservedSpace: _reactutilities.slot.optional(content, {
             renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,
             defaultProps: {
                 children: props.children

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

@@ -1 +1 @@
-{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\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 */ export const useTab_unstable = (props, ref)=>{\n    const { content , disabled: tabDisabled = false , icon , onClick , value  } = props;\n    const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);\n    const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);\n    const listDisabled = useTabListContext_unstable((ctx)=>ctx.disabled);\n    const selected = useTabListContext_unstable((ctx)=>ctx.selectedValue === value);\n    const onRegister = useTabListContext_unstable((ctx)=>ctx.onRegister);\n    const onUnregister = useTabListContext_unstable((ctx)=>ctx.onUnregister);\n    const onSelect = useTabListContext_unstable((ctx)=>ctx.onSelect);\n    const size = useTabListContext_unstable((ctx)=>ctx.size);\n    const vertical = useTabListContext_unstable((ctx)=>!!ctx.vertical);\n    const disabled = listDisabled || tabDisabled;\n    const innerRef = React.useRef(null);\n    const onTabClick = useEventCallback(mergeCallbacks(onClick, (event)=>onSelect(event, {\n            value\n        })));\n    React.useEffect(()=>{\n        onRegister({\n            value,\n            ref: innerRef\n        });\n        return ()=>{\n            onUnregister({\n                value,\n                ref: innerRef\n            });\n        };\n    }, [\n        onRegister,\n        onUnregister,\n        innerRef,\n        value\n    ]);\n    const iconSlot = slot.optional(icon, {\n        elementType: 'span'\n    });\n    const contentSlot = slot.always(content, {\n        defaultProps: {\n            children: props.children\n        },\n        elementType: 'span'\n    });\n    const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);\n    return {\n        components: {\n            root: 'button',\n            icon: 'span',\n            content: 'span',\n            contentReservedSpace: 'span'\n        },\n        root: slot.always(getNativeElementProps('button', {\n            ref: useMergedRefs(ref, innerRef),\n            role: 'tab',\n            type: 'button',\n            // aria-selected undefined indicates it is not selectable\n            // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n            'aria-selected': disabled ? undefined : `${selected}`,\n            ...props,\n            disabled,\n            onClick: onTabClick\n        }), {\n            elementType: 'button'\n        }),\n        icon: iconSlot,\n        iconOnly,\n        content: contentSlot,\n        contentReservedSpace: slot.optional(content, {\n            renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n            defaultProps: {\n                children: props.children\n            },\n            elementType: 'span'\n        }),\n        appearance,\n        disabled,\n        selected,\n        size,\n        value,\n        vertical\n    };\n};\n"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onTabClick","useEventCallback","mergeCallbacks","event","useEffect","iconSlot","slot","optional","elementType","contentSlot","always","defaultProps","children","iconOnly","Boolean","components","root","contentReservedSpace","getNativeElementProps","useMergedRefs","role","type","undefined","renderByDefault"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;gCACsE;gCAClD;AAShC,MAAMA,kBAAkB,CAACC,OAAOC,MAAM;IAC7C,MAAM,EAAEC,QAAO,EAAGC,UAAUC,cAAc,KAAK,CAAA,EAAGC,KAAI,EAAGC,QAAO,EAAGC,MAAK,EAAG,GAAGP;IAC9E,MAAMQ,aAAaC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACnE,MAAMG,0BAA0BF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIP,QAAQ;IACnE,MAAMU,WAAWJ,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAII,aAAa,KAAKP;IACzE,MAAMQ,aAAaN,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIK,UAAU;IACnE,MAAMC,eAAeP,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIM,YAAY;IACvE,MAAMC,WAAWR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOT,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIQ,IAAI;IACvD,MAAMC,WAAWV,IAAAA,0CAA0B,EAAC,CAACC,MAAM,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMhB,WAAWS,gBAAgBR;IACjC,MAAMgB,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,aAAaC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACnB,SAAS,CAACoB,QAAQT,SAASS,OAAO;YAC7EnB;QACJ;IACJc,OAAMM,SAAS,CAAC,IAAI;QAChBZ,WAAW;YACPR;YACAN,KAAKmB;QACT;QACA,OAAO,IAAI;YACPJ,aAAa;gBACTT;gBACAN,KAAKmB;YACT;QACJ;IACJ,GAAG;QACCL;QACAC;QACAI;QACAb;KACH;IACD,MAAMqB,WAAWC,oBAAI,CAACC,QAAQ,CAACzB,MAAM;QACjC0B,aAAa;IACjB;IACA,MAAMC,cAAcH,oBAAI,CAACI,MAAM,CAAC/B,SAAS;QACrCgC,cAAc;YACVC,UAAUnC,MAAMmC,QAAQ;QAC5B;QACAJ,aAAa;IACjB;IACA,MAAMK,WAAWC,QAAQ,AAACT,CAAAA,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASO,QAAQ,AAAD,KAAM,CAACH,YAAYG,QAAQ;IACzH,OAAO;QACHG,YAAY;YACRC,MAAM;YACNlC,MAAM;YACNH,SAAS;YACTsC,sBAAsB;QAC1B;QACAD,MAAMV,oBAAI,CAACI,MAAM,CAACQ,IAAAA,qCAAqB,EAAC,UAAU;YAC9CxC,KAAKyC,IAAAA,6BAAa,EAACzC,KAAKmB;YACxBuB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBzC,WAAW0C,YAAY,CAAC,EAAEhC,SAAS,CAAC;YACrD,GAAGb,KAAK;YACRG;YACAG,SAASiB;QACb,IAAI;YACAQ,aAAa;QACjB;QACA1B,MAAMuB;QACNQ;QACAlC,SAAS8B;QACTQ,sBAAsBX,oBAAI,CAACC,QAAQ,CAAC5B,SAAS;YACzC4C,iBAAiB,CAACjC,YAAY,CAACuB,YAAYzB;YAC3CuB,cAAc;gBACVC,UAAUnC,MAAMmC,QAAQ;YAC5B;YACAJ,aAAa;QACjB;QACAvB;QACAL;QACAU;QACAK;QACAX;QACAY;IACJ;AACJ"}
+{"version":3,"sources":["useTab.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\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 */ export const useTab_unstable = (props, ref)=>{\n    var _iconSlot;\n    const { content, disabled: tabDisabled = false, icon, onClick, value } = props;\n    const appearance = useTabListContext_unstable((ctx)=>ctx.appearance);\n    const reserveSelectedTabSpace = useTabListContext_unstable((ctx)=>ctx.reserveSelectedTabSpace);\n    const listDisabled = useTabListContext_unstable((ctx)=>ctx.disabled);\n    const selected = useTabListContext_unstable((ctx)=>ctx.selectedValue === value);\n    const onRegister = useTabListContext_unstable((ctx)=>ctx.onRegister);\n    const onUnregister = useTabListContext_unstable((ctx)=>ctx.onUnregister);\n    const onSelect = useTabListContext_unstable((ctx)=>ctx.onSelect);\n    const size = useTabListContext_unstable((ctx)=>ctx.size);\n    const vertical = useTabListContext_unstable((ctx)=>!!ctx.vertical);\n    const disabled = listDisabled || tabDisabled;\n    const innerRef = React.useRef(null);\n    const onTabClick = useEventCallback(mergeCallbacks(onClick, (event)=>onSelect(event, {\n            value\n        })));\n    React.useEffect(()=>{\n        onRegister({\n            value,\n            ref: innerRef\n        });\n        return ()=>{\n            onUnregister({\n                value,\n                ref: innerRef\n            });\n        };\n    }, [\n        onRegister,\n        onUnregister,\n        innerRef,\n        value\n    ]);\n    const iconSlot = slot.optional(icon, {\n        elementType: 'span'\n    });\n    const contentSlot = slot.always(content, {\n        defaultProps: {\n            children: props.children\n        },\n        elementType: 'span'\n    });\n    const iconOnly = Boolean(((_iconSlot = iconSlot) === null || _iconSlot === void 0 ? void 0 : _iconSlot.children) && !contentSlot.children);\n    return {\n        components: {\n            root: 'button',\n            icon: 'span',\n            content: 'span',\n            contentReservedSpace: 'span'\n        },\n        root: slot.always(getNativeElementProps('button', {\n            ref: useMergedRefs(ref, innerRef),\n            role: 'tab',\n            type: 'button',\n            // aria-selected undefined indicates it is not selectable\n            // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n            'aria-selected': disabled ? undefined : `${selected}`,\n            ...props,\n            disabled,\n            onClick: onTabClick\n        }), {\n            elementType: 'button'\n        }),\n        icon: iconSlot,\n        iconOnly,\n        content: contentSlot,\n        contentReservedSpace: slot.optional(content, {\n            renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n            defaultProps: {\n                children: props.children\n            },\n            elementType: 'span'\n        }),\n        appearance,\n        disabled,\n        selected,\n        size,\n        value,\n        vertical\n    };\n};\n"],"names":["useTab_unstable","props","ref","_iconSlot","content","disabled","tabDisabled","icon","onClick","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onTabClick","useEventCallback","mergeCallbacks","event","useEffect","iconSlot","slot","optional","elementType","contentSlot","always","defaultProps","children","iconOnly","Boolean","components","root","contentReservedSpace","getNativeElementProps","useMergedRefs","role","type","undefined","renderByDefault"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACsE;gCAClD;AAShC,MAAMA,kBAAkB,CAACC,OAAOC;IACvC,IAAIC;IACJ,MAAM,EAAEC,OAAO,EAAEC,UAAUC,cAAc,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGR;IACzE,MAAMS,aAAaC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACnE,MAAMG,0BAA0BF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,uBAAuB;IAC7F,MAAMC,eAAeH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIP,QAAQ;IACnE,MAAMU,WAAWJ,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAII,aAAa,KAAKP;IACzE,MAAMQ,aAAaN,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIK,UAAU;IACnE,MAAMC,eAAeP,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIM,YAAY;IACvE,MAAMC,WAAWR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,QAAQ;IAC/D,MAAMC,OAAOT,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIQ,IAAI;IACvD,MAAMC,WAAWV,IAAAA,0CAA0B,EAAC,CAACC,MAAM,CAAC,CAACA,IAAIS,QAAQ;IACjE,MAAMhB,WAAWS,gBAAgBR;IACjC,MAAMgB,WAAWC,OAAMC,MAAM,CAAC;IAC9B,MAAMC,aAAaC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACnB,SAAS,CAACoB,QAAQT,SAASS,OAAO;YAC7EnB;QACJ;IACJc,OAAMM,SAAS,CAAC;QACZZ,WAAW;YACPR;YACAP,KAAKoB;QACT;QACA,OAAO;YACHJ,aAAa;gBACTT;gBACAP,KAAKoB;YACT;QACJ;IACJ,GAAG;QACCL;QACAC;QACAI;QACAb;KACH;IACD,MAAMqB,WAAWC,oBAAI,CAACC,QAAQ,CAACzB,MAAM;QACjC0B,aAAa;IACjB;IACA,MAAMC,cAAcH,oBAAI,CAACI,MAAM,CAAC/B,SAAS;QACrCgC,cAAc;YACVC,UAAUpC,MAAMoC,QAAQ;QAC5B;QACAJ,aAAa;IACjB;IACA,MAAMK,WAAWC,QAAQ,AAAC,CAAA,AAACpC,CAAAA,YAAY2B,QAAO,MAAO,QAAQ3B,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUkC,QAAQ,AAAD,KAAM,CAACH,YAAYG,QAAQ;IACzI,OAAO;QACHG,YAAY;YACRC,MAAM;YACNlC,MAAM;YACNH,SAAS;YACTsC,sBAAsB;QAC1B;QACAD,MAAMV,oBAAI,CAACI,MAAM,CAACQ,IAAAA,qCAAqB,EAAC,UAAU;YAC9CzC,KAAK0C,IAAAA,6BAAa,EAAC1C,KAAKoB;YACxBuB,MAAM;YACNC,MAAM;YACN,yDAAyD;YACzD,iEAAiE;YACjE,iBAAiBzC,WAAW0C,YAAY,CAAC,EAAEhC,SAAS,CAAC;YACrD,GAAGd,KAAK;YACRI;YACAG,SAASiB;QACb,IAAI;YACAQ,aAAa;QACjB;QACA1B,MAAMuB;QACNQ;QACAlC,SAAS8B;QACTQ,sBAAsBX,oBAAI,CAACC,QAAQ,CAAC5B,SAAS;YACzC4C,iBAAiB,CAACjC,YAAY,CAACuB,YAAYzB;YAC3CuB,cAAc;gBACVC,UAAUpC,MAAMoC,QAAQ;YAC5B;YACAJ,aAAa;QACjB;QACAvB;QACAL;QACAU;QACAK;QACAX;QACAY;IACJ;AACJ"}

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

@@ -4,18 +4,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useTabAnimatedIndicatorStyles_unstable", {
     enumerable: true,
-    get: ()=>useTabAnimatedIndicatorStyles_unstable
+    get: function() {
+        return useTabAnimatedIndicatorStyles_unstable;
+    }
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _react1 = require("@griffel/react");
-const _tabListContext = require("../TabList/TabListContext");
+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'
 };
-const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react1["__styles"])({
+const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react1.__styles)({
     base: {
         B68tc82: "f1mtd64y",
         Bmxbyg5: "f1y7q3j9"
@@ -91,14 +93,14 @@ const getRegisteredTabRect = (registeredTabs, value)=>{
     return element ? calculateTabRect(element) : undefined;
 };
 const useTabAnimatedIndicatorStyles_unstable = (state)=>{
-    const { disabled , selected , vertical  } = 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);
+    const getRegisteredTabs = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.getRegisteredTabs);
     _react.useEffect(()=>{
         if (lastAnimatedFrom) {
             setAnimationValues({
@@ -110,7 +112,7 @@ const useTabAnimatedIndicatorStyles_unstable = (state)=>{
         lastAnimatedFrom
     ]);
     if (selected) {
-        const { previousSelectedValue , selectedValue , registeredTabs  } = getRegisteredTabs();
+        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();
         if (previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {
             const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
             const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);

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

@@ -1 +1 @@
-{"version":3,"sources":["useTabAnimatedIndicator.styles.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{transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}\", \".f1hqboyk::after{transform-origin:top;}\", \".f1dxupa6::after{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    if (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 (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.styles.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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"}
+{"version":3,"sources":["useTabAnimatedIndicator.styles.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{transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}\", \".f1hqboyk::after{transform-origin:top;}\", \".f1dxupa6::after{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    if (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 (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.styles.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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"}

package/lib-commonjs/components/Tab/useTabStyles.styles.js

@@ -9,11 +9,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    tabClassNames: ()=>tabClassNames,
-    useTabStyles_unstable: ()=>useTabStyles_unstable
+    tabClassNames: function() {
+        return tabClassNames;
+    },
+    useTabStyles_unstable: function() {
+        return useTabStyles_unstable;
+    }
 });
 const _react = require("@griffel/react");
-const _useTabAnimatedIndicatorStyles = require("./useTabAnimatedIndicator.styles");
+const _useTabAnimatedIndicatorstyles = require("./useTabAnimatedIndicator.styles");
 const tabClassNames = {
     root: 'fui-Tab',
     icon: 'fui-Tab__icon',
@@ -30,7 +34,7 @@ const iconClassNames = {
 };
 /**
  * Styles for the root slot
- */ /* eslint-disable @typescript-eslint/naming-convention */ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
+ */ /* eslint-disable @typescript-eslint/naming-convention */ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
         Bt984gj: "f122n59",
         g2u3we: "fwhevhj",
@@ -278,7 +282,7 @@ const iconClassNames = {
 });
 /* eslint-enable @typescript-eslint/naming-convention */ /**
                                                          * Focus styles for the root slot
-                                                         */ const useFocusStyles = /*#__PURE__*/ (0, _react["__styles"])({
+                                                         */ const useFocusStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
         B8q5s1w: "f8hki3x",
         Bci5o5g: [
@@ -312,7 +316,7 @@ const iconClassNames = {
         ".f1vjpng2[data-fui-focus-visible]{z-index:1;}"
     ]
 });
-/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = /*#__PURE__*/ (0, _react["__styles"])({
+/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
         az7l2e: "fhw179n",
         Bv4n3vi: [
@@ -476,7 +480,7 @@ const iconClassNames = {
         ".f6vqlre::before{top:var(--spacingVerticalMNudge);}"
     ]
 });
-const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react["__styles"])({
+const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
         Bjyk6c5: "f1rp0jgh",
         B3778ie: [
@@ -631,7 +635,7 @@ const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react["__styles"])({
 });
 /**
  * Styles for the icon slot.
- */ const useIconStyles = /*#__PURE__*/ (0, _react["__styles"])({
+ */ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
         Br312pm: "fwpfdsa",
         Ijaq50: "f16hsg94",
@@ -685,7 +689,7 @@ const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react["__styles"])({
 });
 /**
  * Styles for the content slot (children)
- */ const useContentStyles = /*#__PURE__*/ (0, _react["__styles"])({
+ */ const useContentStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
         Bahqtrf: "fk6fouc",
         Be2twd7: "fkhj508",
@@ -761,7 +765,7 @@ const useTabStyles_unstable = (state)=>{
     const activeIndicatorStyles = useActiveIndicatorStyles();
     const iconStyles = useIconStyles();
     const contentStyles = useContentStyles();
-    const { appearance , disabled , selected , size , vertical  } = state;
+    const { appearance, disabled, selected, size, vertical } = state;
     state.root.className = (0, _react.mergeClasses)(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, // pending indicator (before pseudo element)
     pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)
     selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);
@@ -777,6 +781,6 @@ const useTabStyles_unstable = (state)=>{
         state.contentReservedSpaceClassName = state.contentReservedSpace.className;
     }
     state.content.className = (0, _react.mergeClasses)(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);
-    (0, _useTabAnimatedIndicatorStyles.useTabAnimatedIndicatorStyles_unstable)(state);
+    (0, _useTabAnimatedIndicatorstyles.useTabAnimatedIndicatorStyles_unstable)(state);
     return state;
 }; //# sourceMappingURL=useTabStyles.styles.js.map