@fluentui/react-tabs 9.1.0 → 9.1.1

package/CHANGELOG.json

@@ -2,7 +2,42 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Fri, 11 Nov 2022 14:53:30 GMT",
+      "date": "Thu, 17 Nov 2022 23:02:46 GMT",
+      "tag": "@fluentui/react-tabs_v9.1.1",
+      "version": "9.1.1",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
+            "comment": "chore: update package scaffold"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.3.1",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-utilities to v9.2.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Nov 2022 14:57:43 GMT",
       "tag": "@fluentui/react-tabs_v9.1.0",
       "version": "9.1.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Fri, 11 Nov 2022 14:53:30 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Nov 2022 23:02:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.1.1)
+
+Thu, 17 Nov 2022 23:02:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.1.0..@fluentui/react-tabs_v9.1.1)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.1.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-tabster to v9.3.1 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.1.0)
 
-Fri, 11 Nov 2022 14:53:30 GMT 
+Fri, 11 Nov 2022 14:57:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.10..@fluentui/react-tabs_v9.1.0)
 
 ### Minor changes

package/lib-amd/Tab.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Tab/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Tab.js.map

package/lib-amd/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tabs/src/Tab.ts"],"names":[],"mappings":";;;IAAA,uCAAuC","sourcesContent":["export * from './components/Tab/index';\n"]}

package/lib-amd/TabList.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TabList/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TabList.js.map

package/lib-amd/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tabs/src/TabList.ts"],"names":[],"mappings":";;;IAAA,uCAA2C","sourcesContent":["export * from './components/TabList/index';\n"]}

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

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useTab", "./renderTab", "./useTabStyles"], function (require, exports, React, useTab_1, renderTab_1, useTabStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Tab = void 0;
+    /**
+     * A tab provides a selectable item in a tab list.
+     */
+    exports.Tab = React.forwardRef(function (props, ref) {
+        var state = useTab_1.useTab_unstable(props, ref);
+        useTabStyles_1.useTabStyles_unstable(state);
+        return renderTab_1.renderTab_unstable(state);
+    });
+    exports.Tab.displayName = 'Tab';
+});
+//# sourceMappingURL=Tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/Tab.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,GAAG,GAAkC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5E,IAAM,KAAK,GAAG,wBAAe,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE1C,oCAAqB,CAAC,KAAK,CAAC,CAAC;QAC7B,OAAO,8BAAkB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,WAAG,CAAC,WAAW,GAAG,KAAK,CAAC","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"]}

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

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Tab.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/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\n/**\n * Tab Props\n */\nexport type TabProps = ComponentProps<Partial<TabSlots>> & {\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 * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, '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     * When defined, tab content with selected style is rendered hidden to reserve space.\n     * This keeps consistent content size between unselected and selected states.\n     */\n    contentReservedSpaceClassName?: string;\n    /**\n     * A tab can be either 'small', 'medium', or 'large' size.\n     */\n    size: 'small' | 'medium' | 'large';\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-amd/components/Tab/index.js

@@ -0,0 +1,11 @@
+define(["require", "exports", "tslib", "./Tab", "./Tab.types", "./renderTab", "./useTab", "./useTabStyles", "./useTabAnimatedIndicator"], function (require, exports, tslib_1, Tab_1, Tab_types_1, renderTab_1, useTab_1, useTabStyles_1, useTabAnimatedIndicator_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Tab_1, exports);
+    tslib_1.__exportStar(Tab_types_1, exports);
+    tslib_1.__exportStar(renderTab_1, exports);
+    tslib_1.__exportStar(useTab_1, exports);
+    tslib_1.__exportStar(useTabStyles_1, exports);
+    tslib_1.__exportStar(useTabAnimatedIndicator_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/index.ts"],"names":[],"mappings":";;;IAAA,qCAAsB;IACtB,2CAA4B;IAC5B,2CAA4B;IAC5B,wCAAyB;IACzB,8CAA+B;IAC/B,yDAA0C","sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles';\nexport * from './useTabAnimatedIndicator';\n"]}

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

@@ -0,0 +1,17 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderTab_unstable = void 0;
+    /**
+     * Render the final JSX of Tab
+     */
+    var renderTab_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
+            !state.iconOnly && React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)),
+            !state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && (React.createElement(slots.content, tslib_1.__assign({}, slotProps.content, { className: state.contentReservedSpaceClassName })))));
+    };
+    exports.renderTab_unstable = renderTab_unstable;
+});
+//# sourceMappingURL=renderTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderTab.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/renderTab.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,kBAAkB,GAAG,UAAC,KAAe;QAC1C,IAAA,KAAuB,0BAAQ,CAAW,KAAK,CAAC,EAA9C,KAAK,WAAA,EAAE,SAAS,eAA8B,CAAC;QAEvD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAChD,CAAC,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;YAC3D,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,6BAA6B,KAAK,SAAS,IAAI,CAC1F,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,IAAE,SAAS,EAAE,KAAK,CAAC,6BAA6B,IAAI,CACzF,CACU,CACd,CAAC;IACJ,CAAC,CAAC;IAZW,QAAA,kBAAkB,sBAY7B","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      {!state.selected && !state.iconOnly && state.contentReservedSpaceClassName !== undefined && (\n        <slots.content {...slotProps.content} className={state.contentReservedSpaceClassName} />\n      )}\n    </slots.root>\n  );\n};\n"]}

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

@@ -0,0 +1,63 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../TabList/TabListContext", "@fluentui/react-context-selector"], function (require, exports, tslib_1, React, react_utilities_1, TabListContext_1, react_context_selector_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTab_unstable = void 0;
+    /**
+     * 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
+     */
+    var useTab_unstable = function (props, ref) {
+        var content = props.content, _a = props.disabled, tabDisabled = _a === void 0 ? false : _a, icon = props.icon, value = props.value;
+        var appearance = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.appearance; });
+        var reserveSelectedTabSpace = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.reserveSelectedTabSpace; });
+        var listDisabled = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.disabled; });
+        var selected = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.selectedValue === value; });
+        var onRegister = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.onRegister; });
+        var onUnregister = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.onUnregister; });
+        var onSelect = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.onSelect; });
+        var size = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.size; });
+        var vertical = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return !!ctx.vertical; });
+        var disabled = listDisabled || tabDisabled;
+        var innerRef = React.useRef(null);
+        var onClick = react_utilities_1.useEventCallback(function (event) { return onSelect(event, { value: value }); });
+        React.useEffect(function () {
+            onRegister({
+                value: value,
+                ref: innerRef,
+            });
+            return function () {
+                onUnregister({ value: value, ref: innerRef });
+            };
+        }, [onRegister, onUnregister, innerRef, value]);
+        var iconShorthand = react_utilities_1.resolveShorthand(icon);
+        var contentShorthand = react_utilities_1.resolveShorthand(content, { required: true, defaultProps: { children: props.children } });
+        return {
+            components: {
+                root: 'button',
+                icon: 'span',
+                content: 'span',
+            },
+            root: react_utilities_1.getNativeElementProps('button', tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, innerRef), role: 'tab', type: 'button', 
+                // 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: disabled, onClick: onClick })),
+            icon: iconShorthand,
+            iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !contentShorthand.children),
+            content: contentShorthand,
+            appearance: appearance,
+            contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,
+            disabled: disabled,
+            selected: selected,
+            size: size,
+            value: value,
+            vertical: vertical,
+        };
+    };
+    exports.useTab_unstable = useTab_unstable;
+});
+//# sourceMappingURL=useTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTab.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/useTab.ts"],"names":[],"mappings":";;;;IAOA;;;;;;;;OAQG;IACI,IAAM,eAAe,GAAG,UAAC,KAAe,EAAE,GAA2B;QAClE,IAAA,OAAO,GAAiD,KAAK,QAAtD,EAAE,KAA+C,KAAK,SAAvB,EAAnB,WAAW,mBAAG,KAAK,KAAA,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAEtE,IAAM,UAAU,GAAG,2CAAkB,CAAC,+BAAc,EAAE,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,UAAU,EAAd,CAAc,CAAC,CAAC;QAC7E,IAAM,uBAAuB,GAAG,2CAAkB,CAAC,+BAAc,EAAE,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,uBAAuB,EAA3B,CAA2B,CAAC,CAAC;QACvG,IAAM,YAAY,GAAG,2CAAkB,CAAC,+BAAc,EAAE,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,QAAQ,EAAZ,CAAY,CAAC,CAAC;QAC7E,IAAM,QAAQ,GAAG,2CAAkB,CAAC,+BAAc,EAAE,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,aAAa,KAAK,KAAK,EAA3B,CAA2B,CAAC,CAAC;QACxF,IAAM,UAAU,GAAG,2CAAkB,CAAC,+BAAc,EAAE,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,UAAU,EAAd,CAAc,CAAC,CAAC;QAC7E,IAAM,YAAY,GAAG,2CAAkB,CAAC,+BAAc,EAAE,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,YAAY,EAAhB,CAAgB,CAAC,CAAC;QACjF,IAAM,QAAQ,GAAG,2CAAkB,CAAC,+BAAc,EAAE,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,QAAQ,EAAZ,CAAY,CAAC,CAAC;QACzE,IAAM,IAAI,GAAG,2CAAkB,CAAC,+BAAc,EAAE,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAR,CAAQ,CAAC,CAAC;QACjE,IAAM,QAAQ,GAAG,2CAAkB,CAAC,+BAAc,EAAE,UAAA,GAAG,IAAI,OAAA,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAd,CAAc,CAAC,CAAC;QAC3E,IAAM,QAAQ,GAAG,YAAY,IAAI,WAAW,CAAC;QAE7C,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;QACjD,IAAM,OAAO,GAAG,kCAAgB,CAAC,UAAC,KAAqB,IAAK,OAAA,QAAQ,CAAC,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,EAA1B,CAA0B,CAAC,CAAC;QAExF,KAAK,CAAC,SAAS,CAAC;YACd,UAAU,CAAC;gBACT,KAAK,OAAA;gBACL,GAAG,EAAE,QAAQ;aACd,CAAC,CAAC;YAEH,OAAO;gBACL,YAAY,CAAC,EAAE,KAAK,OAAA,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;YACzC,CAAC,CAAC;QACJ,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;QAEhD,IAAM,aAAa,GAAG,kCAAgB,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAM,gBAAgB,GAAG,kCAAgB,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACnH,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,MAAM;aAChB;YACD,IAAI,EAAE,uCAAqB,CAAC,QAAQ,sCAClC,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,QAAQ,CAAC,EACjC,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,QAAQ;gBACd,yDAAyD;gBACzD,iEAAiE;gBACjE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAG,QAAU,IAClD,KAAK,KACR,QAAQ,UAAA,EACR,OAAO,SAAA,IACP;YACF,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,KAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;YACxE,OAAO,EAAE,gBAAgB;YACzB,UAAU,YAAA;YACV,6BAA6B,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;YACvE,QAAQ,UAAA;YACR,QAAQ,UAAA;YACR,IAAI,MAAA;YACJ,KAAK,OAAA;YACL,QAAQ,UAAA;SACT,CAAC;IACJ,CAAC,CAAC;IA1DW,QAAA,eAAe,mBA0D1B","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 reserveSelectedTabSpace = useContextSelector(TabListContext, ctx => ctx.reserveSelectedTabSpace);\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      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,\n    }),\n    icon: iconShorthand,\n    iconOnly: Boolean(iconShorthand?.children && !contentShorthand.children),\n    content: contentShorthand,\n    appearance,\n    contentReservedSpaceClassName: reserveSelectedTabSpace ? '' : undefined,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"]}

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

@@ -0,0 +1,112 @@
+define(["require", "exports", "tslib", "react", "@griffel/react", "@fluentui/react-context-selector", "../TabList/TabListContext", "@fluentui/react-theme"], function (require, exports, tslib_1, React, react_1, react_context_selector_1, TabListContext_1, react_theme_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTabAnimatedIndicatorStyles_unstable = void 0;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var tabIndicatorCssVars_unstable = {
+        offsetVar: '--fui-Tab__indicator--offset',
+        scaleVar: '--fui-Tab__indicator--scale',
+    };
+    var useActiveIndicatorStyles = react_1.makeStyles({
+        base: tslib_1.__assign({}, react_1.shorthands.overflow('visible')),
+        animated: {
+            '::after': {
+                transitionProperty: 'transform',
+                transitionDuration: "" + react_theme_1.tokens.durationSlow,
+                transitionTimingFunction: "" + react_theme_1.tokens.curveDecelerateMax,
+            },
+            '@media (prefers-reduced-motion: reduce)': {
+                '::after': {
+                    transitionProperty: 'none',
+                    transitionDuration: '0.01ms',
+                },
+            },
+        },
+        horizontal: {
+            '::after': {
+                transformOrigin: 'left',
+                transform: "translateX(var(" + tabIndicatorCssVars_unstable.offsetVar + "))\n    scaleX(var(" + tabIndicatorCssVars_unstable.scaleVar + "))",
+            },
+        },
+        vertical: {
+            '::after': {
+                transformOrigin: 'top',
+                transform: "translateY(var(" + tabIndicatorCssVars_unstable.offsetVar + "))\n        scaleY(var(" + tabIndicatorCssVars_unstable.scaleVar + "))",
+            },
+        },
+    });
+    var calculateTabRect = function (element) {
+        var _a;
+        if (element) {
+            var parentRect = ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { x: 0, y: 0, width: 0, height: 0 };
+            var tabRect = element.getBoundingClientRect();
+            return {
+                x: tabRect.x - parentRect.x,
+                y: tabRect.y - parentRect.y,
+                width: tabRect.width,
+                height: tabRect.height,
+            };
+        }
+        return undefined;
+    };
+    var getRegisteredTabRect = function (registeredTabs, value) {
+        var _a;
+        var 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.
+     */
+    var useTabAnimatedIndicatorStyles_unstable = function (state) {
+        var _a;
+        var disabled = state.disabled, selected = state.selected, vertical = state.vertical;
+        var activeIndicatorStyles = useActiveIndicatorStyles();
+        var _b = React.useState(), lastAnimatedFrom = _b[0], setLastAnimatedFrom = _b[1];
+        var _c = React.useState({ offset: 0, scale: 1 }), animationValues = _c[0], setAnimationValues = _c[1];
+        var getRegisteredTabs = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, function (ctx) { return ctx.getRegisteredTabs; });
+        React.useEffect(function () {
+            if (lastAnimatedFrom) {
+                setAnimationValues({ offset: 0, scale: 1 });
+            }
+        }, [lastAnimatedFrom]);
+        if (selected) {
+            var _d = getRegisteredTabs(), previousSelectedValue = _d.previousSelectedValue, selectedValue = _d.selectedValue, registeredTabs = _d.registeredTabs;
+            var previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
+            var selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
+            if (selectedTabRect &&
+                previousSelectedTabRect &&
+                previousSelectedValue &&
+                lastAnimatedFrom !== previousSelectedValue) {
+                var offset = vertical
+                    ? previousSelectedTabRect.y - selectedTabRect.y
+                    : previousSelectedTabRect.x - selectedTabRect.x;
+                var scale = vertical
+                    ? previousSelectedTabRect.height / selectedTabRect.height
+                    : previousSelectedTabRect.width / selectedTabRect.width;
+                setAnimationValues({ offset: offset, scale: 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.
+        var animating = animationValues.offset === 0 && animationValues.scale === 1;
+        state.root.className = react_1.mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));
+        var rootCssVars = (_a = {},
+            _a[tabIndicatorCssVars_unstable.offsetVar] = animationValues.offset + "px",
+            _a[tabIndicatorCssVars_unstable.scaleVar] = "" + animationValues.scale,
+            _a);
+        state.root.style = tslib_1.__assign(tslib_1.__assign({}, rootCssVars), state.root.style);
+        return state;
+    };
+    exports.useTabAnimatedIndicatorStyles_unstable = useTabAnimatedIndicatorStyles_unstable;
+});
+//# sourceMappingURL=useTabAnimatedIndicator.js.map

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

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

package/lib-amd/components/Tab/useTabStyles.js

@@ -0,0 +1,380 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabster", "@fluentui/react-theme", "./useTabAnimatedIndicator"], function (require, exports, tslib_1, react_1, react_tabster_1, react_theme_1, useTabAnimatedIndicator_1) {
+    "use strict";
+    var _a, _b;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTabStyles_unstable = exports.tabClassNames = void 0;
+    exports.tabClassNames = {
+        root: 'fui-Tab',
+        icon: 'fui-Tab__icon',
+        content: 'fui-Tab__content',
+    };
+    var reservedSpaceClassNames = {
+        content: 'fui-Tab__content--reserved-space',
+    };
+    // These should match the constants defined in @fluentui/react-icons
+    // This package avoids taking a dependency on the icons package for only the constants.
+    var iconClassNames = {
+        filled: 'fui-Icon-filled',
+        regular: 'fui-Icon-regular',
+    };
+    /**
+     * Styles for the root slot
+     */
+    /* eslint-disable @typescript-eslint/naming-convention */
+    var useRootStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ alignItems: 'center' }, react_1.shorthands.borderColor('none')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), react_1.shorthands.borderWidth(0)), { cursor: 'pointer', display: 'grid', flexShrink: 0, gridAutoFlow: 'column', gridTemplateColumns: 'auto', gridTemplateRows: 'auto', fontFamily: react_theme_1.tokens.fontFamilyBase, lineHeight: react_theme_1.tokens.lineHeightBase300, outlineStyle: 'none', position: 'relative' }), react_1.shorthands.overflow('hidden')), { textTransform: 'none' }),
+        horizontal: {
+            justifyContent: 'center',
+        },
+        vertical: {
+            justifyContent: 'start',
+        },
+        smallHorizontal: tslib_1.__assign({ columnGap: react_theme_1.tokens.spacingHorizontalXXS }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalSNudge, react_theme_1.tokens.spacingHorizontalSNudge)),
+        smallVertical: tslib_1.__assign({ 
+            // horizontal spacing is deliberate. This is the gap between icon and content.
+            columnGap: react_theme_1.tokens.spacingHorizontalXXS }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalXXS, react_theme_1.tokens.spacingHorizontalSNudge)),
+        mediumHorizontal: tslib_1.__assign({ columnGap: react_theme_1.tokens.spacingHorizontalSNudge }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalM, react_theme_1.tokens.spacingHorizontalMNudge)),
+        mediumVertical: tslib_1.__assign({ 
+            // horizontal spacing is deliberate. This is the gap between icon and content.
+            columnGap: react_theme_1.tokens.spacingHorizontalSNudge }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalSNudge, react_theme_1.tokens.spacingHorizontalMNudge)),
+        largeHorizontal: tslib_1.__assign({ columnGap: react_theme_1.tokens.spacingHorizontalSNudge }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalL, react_theme_1.tokens.spacingHorizontalMNudge)),
+        largeVertical: tslib_1.__assign({ 
+            // horizontal spacing is deliberate. This is the gap between icon and content.
+            columnGap: react_theme_1.tokens.spacingHorizontalSNudge }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalMNudge)),
+        transparent: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundHover,
+            },
+            ':active': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed,
+            },
+            '& .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            ':hover .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2Hover,
+            },
+            ':active .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2Pressed,
+            },
+            '& .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            ':hover .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2Hover,
+            },
+            ':active .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2Pressed,
+            },
+        },
+        subtle: {
+            backgroundColor: react_theme_1.tokens.colorSubtleBackground,
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
+            },
+            ':active': {
+                backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
+            },
+            '& .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            ':hover .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2Hover,
+            },
+            ':active .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForeground2Pressed,
+            },
+            '& .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2,
+            },
+            ':hover .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2Hover,
+            },
+            ':active .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground2Pressed,
+            },
+        },
+        disabled: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            '& .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+            '& .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+            cursor: 'not-allowed',
+        },
+        selected: {
+            '& .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorCompoundBrandForeground1,
+            },
+            ':hover .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorCompoundBrandForeground1Hover,
+            },
+            ':active .fui-Tab__icon': {
+                color: react_theme_1.tokens.colorCompoundBrandForeground1Pressed,
+            },
+            '& .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground1,
+            },
+            ':hover .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground1Hover,
+            },
+            ':active .fui-Tab__content': {
+                color: react_theme_1.tokens.colorNeutralForeground1Pressed,
+            },
+        },
+    });
+    /* eslint-enable @typescript-eslint/naming-convention */
+    /**
+     * Focus styles for the root slot
+     */
+    var useFocusStyles = react_1.makeStyles({
+        // Tab creates a custom focus indicator because the default focus indicator
+        // is applied using an ::after pseudo-element on the root. Since the selection
+        // indicator uses an ::after pseudo-element on the root, there is a conflict.
+        base: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), { outlineWidth: react_theme_1.tokens.strokeWidthThick, outlineColor: 'transparent', outlineStyle: 'solid', boxShadow: "\n      " + react_theme_1.tokens.shadow4 + ",\n      0 0 0 " + react_theme_1.tokens.strokeWidthThick + " " + react_theme_1.tokens.colorStrokeFocus2 + "\n    ", zIndex: 1 })),
+    });
+    /** Indicator styles for when pending selection */
+    var usePendingIndicatorStyles = react_1.makeStyles({
+        base: {
+            ':hover::before': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralStroke1Hover }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { content: '""', position: 'absolute' }),
+            ':active::before': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralStroke1Pressed }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { content: '""', position: 'absolute' }),
+            '@media (forced-colors: active)': {
+                ':hover::before': {
+                    backgroundColor: 'Highlight',
+                },
+                ':active::before': {
+                    backgroundColor: 'Highlight',
+                },
+            },
+        },
+        disabled: {
+            ':hover::before': {
+                backgroundColor: react_theme_1.tokens.colorTransparentStroke,
+            },
+            ':active::before': {
+                backgroundColor: react_theme_1.tokens.colorTransparentStroke,
+            },
+        },
+        smallHorizontal: {
+            '::before': {
+                bottom: 0,
+                height: react_theme_1.tokens.strokeWidthThick,
+                left: react_theme_1.tokens.spacingHorizontalSNudge,
+                right: react_theme_1.tokens.spacingHorizontalSNudge,
+            },
+        },
+        smallVertical: {
+            '::before': {
+                bottom: react_theme_1.tokens.spacingVerticalXS,
+                left: 0,
+                top: react_theme_1.tokens.spacingVerticalXS,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+        mediumHorizontal: {
+            '::before': {
+                bottom: 0,
+                height: react_theme_1.tokens.strokeWidthThicker,
+                left: react_theme_1.tokens.spacingHorizontalM,
+                right: react_theme_1.tokens.spacingHorizontalM,
+            },
+        },
+        mediumVertical: {
+            '::before': {
+                bottom: react_theme_1.tokens.spacingVerticalS,
+                left: 0,
+                top: react_theme_1.tokens.spacingVerticalS,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+        largeHorizontal: {
+            '::before': {
+                bottom: 0,
+                height: react_theme_1.tokens.strokeWidthThicker,
+                left: react_theme_1.tokens.spacingHorizontalM,
+                right: react_theme_1.tokens.spacingHorizontalM,
+            },
+        },
+        largeVertical: {
+            '::before': {
+                bottom: react_theme_1.tokens.spacingVerticalMNudge,
+                left: 0,
+                top: react_theme_1.tokens.spacingVerticalMNudge,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+    });
+    var useActiveIndicatorStyles = react_1.makeStyles({
+        base: {
+            '::after': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentStroke }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { content: '""', position: 'absolute', zIndex: 1 }),
+        },
+        selected: {
+            '::after': {
+                backgroundColor: react_theme_1.tokens.colorCompoundBrandStroke,
+            },
+            ':hover::after': {
+                backgroundColor: react_theme_1.tokens.colorCompoundBrandStrokeHover,
+            },
+            ':active::after': {
+                backgroundColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
+            },
+            '@media (forced-colors: active)': {
+                '::after': {
+                    backgroundColor: 'ButtonText',
+                },
+                ':hover::after': {
+                    backgroundColor: 'ButtonText',
+                },
+                ':active::after': {
+                    backgroundColor: 'ButtonText',
+                },
+            },
+        },
+        disabled: {
+            '::after': {
+                backgroundColor: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+        },
+        smallHorizontal: {
+            '::after': {
+                bottom: 0,
+                height: react_theme_1.tokens.strokeWidthThick,
+                left: react_theme_1.tokens.spacingHorizontalSNudge,
+                right: react_theme_1.tokens.spacingHorizontalSNudge,
+            },
+        },
+        smallVertical: {
+            '::after': {
+                bottom: react_theme_1.tokens.spacingVerticalXS,
+                left: '0',
+                top: react_theme_1.tokens.spacingVerticalXS,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+        mediumHorizontal: {
+            '::after': {
+                bottom: '0',
+                height: react_theme_1.tokens.strokeWidthThicker,
+                left: react_theme_1.tokens.spacingHorizontalM,
+                right: react_theme_1.tokens.spacingHorizontalM,
+            },
+        },
+        mediumVertical: {
+            '::after': {
+                bottom: react_theme_1.tokens.spacingVerticalS,
+                left: 0,
+                top: react_theme_1.tokens.spacingVerticalS,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+        largeHorizontal: {
+            '::after': {
+                bottom: 0,
+                height: react_theme_1.tokens.strokeWidthThicker,
+                left: react_theme_1.tokens.spacingHorizontalM,
+                right: react_theme_1.tokens.spacingHorizontalM,
+            },
+        },
+        largeVertical: {
+            '::after': {
+                bottom: react_theme_1.tokens.spacingVerticalMNudge,
+                left: 0,
+                top: react_theme_1.tokens.spacingVerticalMNudge,
+                width: react_theme_1.tokens.strokeWidthThicker,
+            },
+        },
+    });
+    /**
+     * Styles for the icon slot.
+     */
+    var useIconStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign({ gridColumnStart: 1, gridRowStart: 1, alignItems: 'center', display: 'inline-flex', justifyContent: 'center' }, react_1.shorthands.overflow('hidden')), (_a = {}, _a["& ." + iconClassNames.filled] = {
+            display: 'none',
+        }, _a["& ." + iconClassNames.regular] = {
+            display: 'inline',
+        }, _a)),
+        // per design, the small and medium font sizes are the same.
+        // the size prop only affects spacing.
+        small: {
+            fontSize: '20px',
+            height: '20px',
+            width: '20px',
+        },
+        medium: {
+            fontSize: '20px',
+            height: '20px',
+            width: '20px',
+        },
+        large: {
+            fontSize: '24px',
+            height: '24px',
+            width: '24px',
+        },
+        selected: (_b = {},
+            _b["& ." + iconClassNames.filled] = {
+                display: 'inline',
+            },
+            _b["& ." + iconClassNames.regular] = {
+                display: 'none',
+            },
+            _b),
+    });
+    /**
+     * Styles for the content slot (children)
+     */
+    var useContentStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_theme_1.typographyStyles.body1), react_1.shorthands.overflow('hidden')), react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalNone, react_theme_1.tokens.spacingHorizontalXXS)),
+        selected: tslib_1.__assign({}, react_theme_1.typographyStyles.body1Strong),
+        large: tslib_1.__assign({}, react_theme_1.typographyStyles.body2),
+        largeSelected: tslib_1.__assign({}, react_theme_1.typographyStyles.subtitle2),
+        noIconBefore: {
+            gridColumnStart: 1,
+            gridRowStart: 1,
+        },
+        iconBefore: {
+            gridColumnStart: 2,
+            gridRowStart: 1,
+        },
+        placeholder: {
+            visibility: 'hidden',
+        },
+    });
+    /**
+     * Apply styling to the Tab slots based on the state
+     */
+    var useTabStyles_unstable = function (state) {
+        var rootStyles = useRootStyles();
+        var focusStyles = useFocusStyles();
+        var pendingIndicatorStyles = usePendingIndicatorStyles();
+        var activeIndicatorStyles = useActiveIndicatorStyles();
+        var iconStyles = useIconStyles();
+        var contentStyles = useContentStyles();
+        var appearance = state.appearance, disabled = state.disabled, selected = state.selected, size = state.size, vertical = state.vertical;
+        state.root.className = react_1.mergeClasses(exports.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);
+        if (state.icon) {
+            state.icon.className = react_1.mergeClasses(exports.tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);
+        }
+        // This needs to be before state.content.className is updated
+        if (state.contentReservedSpaceClassName !== undefined) {
+            state.contentReservedSpaceClassName = react_1.mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);
+        }
+        state.content.className = react_1.mergeClasses(exports.tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);
+        useTabAnimatedIndicator_1.useTabAnimatedIndicatorStyles_unstable(state);
+        return state;
+    };
+    exports.useTabStyles_unstable = useTabStyles_unstable;
+});
+//# sourceMappingURL=useTabStyles.js.map

package/lib-amd/components/Tab/useTabStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n  root: 'fui-Tab',\n  icon: 'fui-Tab__icon',\n  content: 'fui-Tab__content',\n};\n\nconst reservedSpaceClassNames = {\n  content: 'fui-Tab__content--reserved-space',\n};\n\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n  filled: 'fui-Icon-filled',\n  regular: 'fui-Icon-regular',\n};\n\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    ...shorthands.borderColor('none'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.borderWidth(0),\n    cursor: 'pointer',\n    display: 'grid',\n    flexShrink: 0,\n    gridAutoFlow: 'column',\n    gridTemplateColumns: 'auto',\n    gridTemplateRows: 'auto',\n    fontFamily: tokens.fontFamilyBase,\n    lineHeight: tokens.lineHeightBase300,\n    outlineStyle: 'none',\n    position: 'relative',\n    ...shorthands.overflow('hidden'),\n    textTransform: 'none',\n  },\n  horizontal: {\n    justifyContent: 'center',\n  },\n  vertical: {\n    justifyContent: 'start',\n  },\n  smallHorizontal: {\n    columnGap: tokens.spacingHorizontalXXS,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n  },\n  smallVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalXXS,\n    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n  },\n  mediumHorizontal: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n  },\n  mediumVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n  },\n  largeHorizontal: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge),\n  },\n  largeVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge),\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n    '& .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n    '& .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__icon': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':hover .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active .fui-Tab__content': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    '& .fui-Tab__icon': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n    cursor: 'not-allowed',\n  },\n  selected: {\n    '& .fui-Tab__icon': {\n      color: tokens.colorCompoundBrandForeground1,\n    },\n    ':hover .fui-Tab__icon': {\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active .fui-Tab__icon': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n    '& .fui-Tab__content': {\n      color: tokens.colorNeutralForeground1,\n    },\n    ':hover .fui-Tab__content': {\n      color: tokens.colorNeutralForeground1Hover,\n    },\n    ':active .fui-Tab__content': {\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n  // Tab creates a custom focus indicator because the default focus indicator\n  // is applied using an ::after pseudo-element on the root. Since the selection\n  // indicator uses an ::after pseudo-element on the root, there is a conflict.\n  base: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineWidth: tokens.strokeWidthThick,\n    outlineColor: 'transparent',\n    outlineStyle: 'solid',\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n  base: {\n    ':hover::before': {\n      backgroundColor: tokens.colorNeutralStroke1Hover,\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      content: '\"\"',\n      position: 'absolute',\n    },\n    ':active::before': {\n      backgroundColor: tokens.colorNeutralStroke1Pressed,\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      content: '\"\"',\n      position: 'absolute',\n    },\n    '@media (forced-colors: active)': {\n      ':hover::before': {\n        backgroundColor: 'Highlight',\n      },\n      ':active::before': {\n        backgroundColor: 'Highlight',\n      },\n    },\n  },\n  disabled: {\n    ':hover::before': {\n      backgroundColor: tokens.colorTransparentStroke,\n    },\n    ':active::before': {\n      backgroundColor: tokens.colorTransparentStroke,\n    },\n  },\n  smallHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThick,\n      left: tokens.spacingHorizontalSNudge,\n      right: tokens.spacingHorizontalSNudge,\n    },\n  },\n  smallVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalXS,\n      left: 0,\n      top: tokens.spacingVerticalXS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  mediumHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  mediumVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalS,\n      left: 0,\n      top: tokens.spacingVerticalS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  largeHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  largeVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalMNudge,\n      left: 0,\n      top: tokens.spacingVerticalMNudge,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n  base: {\n    '::after': {\n      backgroundColor: tokens.colorTransparentStroke,\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      content: '\"\"',\n      position: 'absolute',\n      zIndex: 1,\n    },\n  },\n  selected: {\n    '::after': {\n      backgroundColor: tokens.colorCompoundBrandStroke,\n    },\n    ':hover::after': {\n      backgroundColor: tokens.colorCompoundBrandStrokeHover,\n    },\n    ':active::after': {\n      backgroundColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    '@media (forced-colors: active)': {\n      '::after': {\n        backgroundColor: 'ButtonText',\n      },\n      ':hover::after': {\n        backgroundColor: 'ButtonText',\n      },\n      ':active::after': {\n        backgroundColor: 'ButtonText',\n      },\n    },\n  },\n  disabled: {\n    '::after': {\n      backgroundColor: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  smallHorizontal: {\n    '::after': {\n      bottom: 0,\n      height: tokens.strokeWidthThick,\n      left: tokens.spacingHorizontalSNudge,\n      right: tokens.spacingHorizontalSNudge,\n    },\n  },\n  smallVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalXS,\n      left: '0',\n      top: tokens.spacingVerticalXS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  mediumHorizontal: {\n    '::after': {\n      bottom: '0',\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  mediumVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalS,\n      left: 0,\n      top: tokens.spacingVerticalS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  largeHorizontal: {\n    '::after': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  largeVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalMNudge,\n      left: 0,\n      top: tokens.spacingVerticalMNudge,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n  base: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n    [`& .${iconClassNames.filled}`]: {\n      display: 'none',\n    },\n    [`& .${iconClassNames.regular}`]: {\n      display: 'inline',\n    },\n  },\n  // per design, the small and medium font sizes are the same.\n  // the size prop only affects spacing.\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n  selected: {\n    [`& .${iconClassNames.filled}`]: {\n      display: 'inline',\n    },\n    [`& .${iconClassNames.regular}`]: {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n  base: {\n    ...typographyStyles.body1,\n    ...shorthands.overflow('hidden'),\n    // content padding is the same for medium & small, horiztonal & vertical\n    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n  },\n  selected: {\n    ...typographyStyles.body1Strong,\n  },\n  large: {\n    ...typographyStyles.body2,\n  },\n  largeSelected: {\n    ...typographyStyles.subtitle2,\n  },\n  noIconBefore: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n  },\n  iconBefore: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n  },\n  placeholder: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n  const pendingIndicatorStyles = usePendingIndicatorStyles();\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const contentStyles = useContentStyles();\n\n  const { appearance, disabled, selected, size, vertical } = state;\n\n  state.root.className = mergeClasses(\n    tabClassNames.root,\n    rootStyles.base,\n    vertical ? rootStyles.vertical : rootStyles.horizontal,\n    size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n    size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n    size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n    focusStyles.base,\n    !disabled && appearance === 'subtle' && rootStyles.subtle,\n    !disabled && appearance === 'transparent' && rootStyles.transparent,\n    !disabled && selected && rootStyles.selected,\n    disabled && rootStyles.disabled,\n\n    // pending indicator (before pseudo element)\n    pendingIndicatorStyles.base,\n    size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n    size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n    size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal),\n    disabled && pendingIndicatorStyles.disabled,\n\n    // active indicator (after pseudo element)\n    selected && activeIndicatorStyles.base,\n    selected && !disabled && activeIndicatorStyles.selected,\n    selected &&\n      size === 'small' &&\n      (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n    selected &&\n      size === 'medium' &&\n      (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n    selected &&\n      size === 'large' &&\n      (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal),\n    selected && disabled && activeIndicatorStyles.disabled,\n\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      tabClassNames.icon,\n      iconStyles.base,\n      iconStyles[size],\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  // This needs to be before state.content.className is updated\n  if (state.contentReservedSpaceClassName !== undefined) {\n    state.contentReservedSpaceClassName = mergeClasses(\n      reservedSpaceClassNames.content,\n      contentStyles.base,\n      size === 'large' ? contentStyles.largeSelected : contentStyles.selected,\n      state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n      contentStyles.placeholder,\n      state.content.className,\n    );\n  }\n\n  state.content.className = mergeClasses(\n    tabClassNames.content,\n    contentStyles.base,\n    size === 'large' && contentStyles.large,\n    selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected),\n    state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n    state.content.className,\n  );\n\n  useTabAnimatedIndicatorStyles_unstable(state);\n\n  return state;\n};\n"]}

package/lib-amd/components/TabList/TabList.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./useTabList", "./renderTabList", "./useTabListStyles", "./useTabListContextValues"], function (require, exports, React, useTabList_1, renderTabList_1, useTabListStyles_1, useTabListContextValues_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TabList = void 0;
+    /**
+     * A tab list provides single selection from a set of tabs.
+     */
+    exports.TabList = React.forwardRef(function (props, ref) {
+        var state = useTabList_1.useTabList_unstable(props, ref);
+        var contextValues = useTabListContextValues_1.useTabListContextValues(state);
+        useTabListStyles_1.useTabListStyles_unstable(state);
+        return renderTabList_1.renderTabList_unstable(state, contextValues);
+    });
+    exports.TabList.displayName = 'TabList';
+});
+//# sourceMappingURL=TabList.js.map

package/lib-amd/components/TabList/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabList.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,OAAO,GAAsC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC9C,IAAM,aAAa,GAAG,iDAAuB,CAAC,KAAK,CAAC,CAAC;QAErD,4CAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,OAAO,sCAAsB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues } from './useTabListContextValues';\n\n/**\n * A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n  const state = useTabList_unstable(props, ref);\n  const contextValues = useTabListContextValues(state);\n\n  useTabListStyles_unstable(state);\n  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"]}

package/lib-amd/components/TabList/TabList.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=TabList.types.js.map

package/lib-amd/components/TabList/TabList.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabList.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n  /**\n   * The value of the tab.\n   */\n  value: TabValue;\n\n  /**\n   * The reference to the tab HTML element.\n   */\n  ref: React.RefObject<HTMLElement>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle';\n\n  /**\n   * Tab size may change between unselected and selected states.\n   * The default scenario is a selected tab has bold text.\n   *\n   * When true, this property requests tabs be the same size whether unselected or selected.\n   * @default true\n   */\n  reserveSelectedTabSpace?: boolean;\n\n  /**\n   * The value of the tab to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   */\n  defaultSelectedValue?: TabValue;\n  /**\n   * A tab list can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Raised when a tab is selected.\n   */\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small', 'medium', or 'large' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectedValue' | 'reserveSelectedTabSpace'> &\n  Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n    /**\n     * Gets the registered tab data along with current and previous selected values.\n     */\n    getRegisteredTabs: () => {\n      selectedValue?: TabValue;\n      previousSelectedValue?: TabValue;\n      registeredTabs: Record<string, TabRegisterData>;\n    };\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n"]}

package/lib-amd/components/TabList/TabListContext.js

@@ -0,0 +1,29 @@
+define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TabListContext = void 0;
+    // eslint-disable-next-line @fluentui/no-context-default-value
+    exports.TabListContext = react_context_selector_1.createContext({
+        appearance: 'transparent',
+        reserveSelectedTabSpace: true,
+        disabled: false,
+        selectedValue: undefined,
+        onRegister: function () {
+            /* noop */
+        },
+        onUnregister: function () {
+            /* noop */
+        },
+        onSelect: function () {
+            /* noop */
+        },
+        getRegisteredTabs: function () {
+            return {
+                registeredTabs: {},
+            };
+        },
+        size: 'medium',
+        vertical: false,
+    });
+});
+//# sourceMappingURL=TabListContext.js.map

package/lib-amd/components/TabList/TabListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListContext.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;IAIA,8DAA8D;IACjD,QAAA,cAAc,GAAiC,sCAAa,CAAsB;QAC7F,UAAU,EAAE,aAAa;QACzB,uBAAuB,EAAE,IAAI;QAC7B,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,SAAS;QACxB,UAAU,EAAE;YACV,UAAU;QACZ,CAAC;QACD,YAAY,EAAE;YACZ,UAAU;QACZ,CAAC;QACD,QAAQ,EAAE;YACR,UAAU;QACZ,CAAC;QACD,iBAAiB,EAAE;YACjB,OAAO;gBACL,cAAc,EAAE,EAAE;aACnB,CAAC;QACJ,CAAC;QACD,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,KAAK;KAChB,CAAC,CAAC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n});\n"]}

package/lib-amd/components/TabList/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./TabList", "./TabList.types", "./renderTabList", "./useTabList", "./useTabListStyles"], function (require, exports, tslib_1, TabList_1, TabList_types_1, renderTabList_1, useTabList_1, useTabListStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(TabList_1, exports);
+    tslib_1.__exportStar(TabList_types_1, exports);
+    tslib_1.__exportStar(renderTabList_1, exports);
+    tslib_1.__exportStar(useTabList_1, exports);
+    tslib_1.__exportStar(useTabListStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/TabList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,+CAAgC;IAChC,4CAA6B;IAC7B,kDAAmC","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"]}

package/lib-amd/components/TabList/renderTabList.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./TabListContext"], function (require, exports, tslib_1, React, react_utilities_1, TabListContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderTabList_unstable = void 0;
+    /**
+     * Render the final JSX of TabList
+     */
+    var renderTabList_unstable = function (state, contextValues) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(TabListContext_1.TabListContext.Provider, { value: contextValues.tabList }, state.root.children)));
+    };
+    exports.renderTabList_unstable = renderTabList_unstable;
+});
+//# sourceMappingURL=renderTabList.js.map

package/lib-amd/components/TabList/renderTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderTabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB,EAAE,aAAmC;QACvF,IAAA,KAAuB,0BAAQ,CAAe,KAAK,CAAC,EAAlD,KAAK,WAAA,EAAE,SAAS,eAAkC,CAAC;QAE3D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,+BAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO,IAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAA2B,CAC3F,CACd,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,sBAAsB,0BAQjC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListContext } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n  const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TabListContext.Provider value={contextValues.tabList}>{state.root.children}</TabListContext.Provider>\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/TabList/useTabList.js

@@ -0,0 +1,74 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-tabster", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_tabster_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTabList_unstable = void 0;
+    /**
+     * Create the state required to render TabList.
+     *
+     * The returned state can be modified with hooks such as useTabListStyles_unstable,
+     * before being passed to renderTabList_unstable.
+     *
+     * @param props - props from this instance of TabList
+     * @param ref - reference to root HTMLElement of TabList
+     */
+    var useTabList_unstable = function (props, ref) {
+        var _a = props.appearance, appearance = _a === void 0 ? 'transparent' : _a, _b = props.reserveSelectedTabSpace, reserveSelectedTabSpace = _b === void 0 ? true : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, onTabSelect = props.onTabSelect, _d = props.size, size = _d === void 0 ? 'medium' : _d, _e = props.vertical, vertical = _e === void 0 ? false : _e;
+        var innerRef = React.useRef(null);
+        var focusAttributes = react_tabster_1.useArrowNavigationGroup({
+            circular: true,
+            axis: vertical ? 'vertical' : 'horizontal',
+            memorizeCurrent: true,
+        });
+        var _f = react_utilities_1.useControllableState({
+            state: props.selectedValue,
+            defaultState: props.defaultSelectedValue,
+            initialState: undefined,
+        }), selectedValue = _f[0], setSelectedValue = _f[1];
+        // considered usePrevious, but it is sensitive to re-renders
+        // this could cause the previous to move to current in the case where the tab list re-renders.
+        // these refs avoid getRegisteredTabs changing when selectedValue changes and causing
+        // renders for tabs that have not changed.
+        var currentSelectedValue = React.useRef(undefined);
+        var previousSelectedValue = React.useRef(undefined);
+        React.useEffect(function () {
+            previousSelectedValue.current = currentSelectedValue.current;
+            currentSelectedValue.current = selectedValue;
+        }, [selectedValue]);
+        var onSelect = react_utilities_1.useEventCallback(function (event, data) {
+            setSelectedValue(data.value);
+            onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
+        });
+        var registeredTabs = React.useRef({});
+        var onRegister = react_utilities_1.useEventCallback(function (data) {
+            registeredTabs.current[JSON.stringify(data.value)] = data;
+        });
+        var onUnregister = react_utilities_1.useEventCallback(function (data) {
+            delete registeredTabs.current[JSON.stringify(data.value)];
+        });
+        var getRegisteredTabs = React.useCallback(function () {
+            return {
+                selectedValue: currentSelectedValue.current,
+                previousSelectedValue: previousSelectedValue.current,
+                registeredTabs: registeredTabs.current,
+            };
+        }, []);
+        return {
+            components: {
+                root: 'div',
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, innerRef), role: 'tablist' }, focusAttributes), props)),
+            appearance: appearance,
+            reserveSelectedTabSpace: reserveSelectedTabSpace,
+            disabled: disabled,
+            selectedValue: selectedValue,
+            size: size,
+            vertical: vertical,
+            onRegister: onRegister,
+            onUnregister: onUnregister,
+            onSelect: onSelect,
+            getRegisteredTabs: getRegisteredTabs,
+        };
+    };
+    exports.useTabList_unstable = useTabList_unstable;
+});
+//# sourceMappingURL=useTabList.js.map

package/lib-amd/components/TabList/useTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/useTabList.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getNativeElementProps,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const {\n    appearance = 'transparent',\n    reserveSelectedTabSpace = true,\n    disabled = false,\n    onTabSelect,\n    size = 'medium',\n    vertical = false,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: vertical ? 'vertical' : 'horizontal',\n    memorizeCurrent: true,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the tab list re-renders.\n  // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n  // renders for tabs that have not changed.\n  const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n  React.useEffect(() => {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }, [selectedValue]);\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    setSelectedValue(data.value);\n    onTabSelect?.(event, data);\n  });\n\n  const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n  const onRegister = useEventCallback((data: TabRegisterData) => {\n    registeredTabs.current[JSON.stringify(data.value)] = data;\n  });\n\n  const onUnregister = useEventCallback((data: TabRegisterData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n  });\n\n  const getRegisteredTabs = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      registeredTabs: registeredTabs.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tablist',\n      ...focusAttributes,\n      ...props,\n    }),\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"]}

package/lib-amd/components/TabList/useTabListContextValues.js

@@ -0,0 +1,23 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTabListContextValues = void 0;
+    function useTabListContextValues(state) {
+        var appearance = state.appearance, reserveSelectedTabSpace = state.reserveSelectedTabSpace, disabled = state.disabled, selectedKey = state.selectedValue, onRegister = state.onRegister, onUnregister = state.onUnregister, onSelect = state.onSelect, getRegisteredTabs = state.getRegisteredTabs, size = state.size, vertical = state.vertical;
+        var tabList = {
+            appearance: appearance,
+            reserveSelectedTabSpace: reserveSelectedTabSpace,
+            disabled: disabled,
+            selectedValue: selectedKey,
+            onSelect: onSelect,
+            onRegister: onRegister,
+            onUnregister: onUnregister,
+            getRegisteredTabs: getRegisteredTabs,
+            size: size,
+            vertical: vertical,
+        };
+        return { tabList: tabList };
+    }
+    exports.useTabListContextValues = useTabListContextValues;
+});
+//# sourceMappingURL=useTabListContextValues.js.map

package/lib-amd/components/TabList/useTabListContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabListContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;IAEA,SAAgB,uBAAuB,CAAC,KAAmB;QAEvD,IAAA,UAAU,GAUR,KAAK,WAVG,EACV,uBAAuB,GASrB,KAAK,wBATgB,EACvB,QAAQ,GAQN,KAAK,SARC,EACO,WAAW,GAOxB,KAAK,cAPmB,EAC1B,UAAU,GAMR,KAAK,WANG,EACV,YAAY,GAKV,KAAK,aALK,EACZ,QAAQ,GAIN,KAAK,SAJC,EACR,iBAAiB,GAGf,KAAK,kBAHU,EACjB,IAAI,GAEF,KAAK,KAFH,EACJ,QAAQ,GACN,KAAK,SADC,CACA;QAEV,IAAM,OAAO,GAAwB;YACnC,UAAU,YAAA;YACV,uBAAuB,yBAAA;YACvB,QAAQ,UAAA;YACR,aAAa,EAAE,WAAW;YAC1B,QAAQ,UAAA;YACR,UAAU,YAAA;YACV,YAAY,cAAA;YACZ,iBAAiB,mBAAA;YACjB,IAAI,MAAA;YACJ,QAAQ,UAAA;SACT,CAAC;QAEF,OAAO,EAAE,OAAO,SAAA,EAAE,CAAC;IACrB,CAAC;IA5BD,0DA4BC","sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues(state: TabListState): TabListContextValues {\n  const {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    size,\n    vertical,\n  } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"]}

package/lib-amd/components/TabList/useTabListStyles.js

@@ -0,0 +1,39 @@
+define(["require", "exports", "@griffel/react"], function (require, exports, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTabListStyles_unstable = exports.tabListClassNames = void 0;
+    exports.tabListClassNames = {
+        root: 'fui-TabList',
+    };
+    /**
+     * Styles for the root slot
+     */
+    var useStyles = react_1.makeStyles({
+        root: {
+            display: 'flex',
+            flexDirection: 'row',
+            flexShrink: 0,
+            flexWrap: 'nowrap',
+            position: 'relative',
+        },
+        horizontal: {
+            alignItems: 'stretch',
+            flexDirection: 'row',
+        },
+        vertical: {
+            alignItems: 'stretch',
+            flexDirection: 'column',
+        },
+    });
+    /**
+     * Apply styling to the TabList slots based on the state
+     */
+    var useTabListStyles_unstable = function (state) {
+        var vertical = state.vertical;
+        var styles = useStyles();
+        state.root.className = react_1.mergeClasses(exports.tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, state.root.className);
+        return state;
+    };
+    exports.useTabListStyles_unstable = useTabListStyles_unstable;
+});
+//# sourceMappingURL=useTabListStyles.js.map

package/lib-amd/components/TabList/useTabListStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabListStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts"],"names":[],"mappings":";;;;IAIa,QAAA,iBAAiB,GAAiC;QAC7D,IAAI,EAAE,aAAa;KACpB,CAAC;IAEF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,CAAC;YACb,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,UAAU;SACrB;QACD,UAAU,EAAE;YACV,UAAU,EAAE,SAAS;YACrB,aAAa,EAAE,KAAK;SACrB;QACD,QAAQ,EAAE;YACR,UAAU,EAAE,SAAS;YACrB,aAAa,EAAE,QAAQ;SACxB;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAmB;QACnD,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;QAE3B,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAE3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,yBAAiB,CAAC,IAAI,EACtB,MAAM,CAAC,IAAI,EACX,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAC9C,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAbW,QAAA,yBAAyB,6BAapC","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n  root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexShrink: 0,\n    flexWrap: 'nowrap',\n    position: 'relative',\n  },\n  horizontal: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n  },\n  vertical: {\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n  const { vertical } = state;\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    tabListClassNames.root,\n    styles.root,\n    vertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}

package/lib-amd/index.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "./Tab", "./TabList"], function (require, exports, Tab_1, TabList_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTabList_unstable = exports.useTabListStyles_unstable = exports.tabListClassNames = exports.TabList = exports.renderTabList_unstable = exports.useTab_unstable = exports.useTabStyles_unstable = exports.tabClassNames = exports.Tab = exports.renderTab_unstable = void 0;
+    Object.defineProperty(exports, "renderTab_unstable", { enumerable: true, get: function () { return Tab_1.renderTab_unstable; } });
+    Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });
+    Object.defineProperty(exports, "tabClassNames", { enumerable: true, get: function () { return Tab_1.tabClassNames; } });
+    Object.defineProperty(exports, "useTabStyles_unstable", { enumerable: true, get: function () { return Tab_1.useTabStyles_unstable; } });
+    Object.defineProperty(exports, "useTab_unstable", { enumerable: true, get: function () { return Tab_1.useTab_unstable; } });
+    Object.defineProperty(exports, "renderTabList_unstable", { enumerable: true, get: function () { return TabList_1.renderTabList_unstable; } });
+    Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return TabList_1.TabList; } });
+    Object.defineProperty(exports, "tabListClassNames", { enumerable: true, get: function () { return TabList_1.tabListClassNames; } });
+    Object.defineProperty(exports, "useTabListStyles_unstable", { enumerable: true, get: function () { return TabList_1.useTabListStyles_unstable; } });
+    Object.defineProperty(exports, "useTabList_unstable", { enumerable: true, get: function () { return TabList_1.useTabList_unstable; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tabs/src/index.ts"],"names":[],"mappings":";;;;IACS,yGAAA,kBAAkB,OAAA;IAAE,0FAAA,GAAG,OAAA;IAAE,oGAAA,aAAa,OAAA;IAAE,4GAAA,qBAAqB,OAAA;IAAE,sGAAA,eAAe,OAAA;IAcrF,iHAAA,sBAAsB,OAAA;IACtB,kGAAA,OAAO,OAAA;IACP,4GAAA,iBAAiB,OAAA;IACjB,oHAAA,yBAAyB,OAAA;IACzB,8GAAA,mBAAmB,OAAA","sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  tabListClassNames,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,10 +30,10 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.1",
-    "@fluentui/react-tabster": "^9.3.0",
+    "@fluentui/react-context-selector": "^9.1.2",
+    "@fluentui/react-tabster": "^9.3.1",
     "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.1",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },