@fluentui/react-tabs 1.0.0-beta.99 → 9.0.0-beta.8

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

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabStyles_unstable = exports.tabClassName = void 0;
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const tab_constants_1 = /*#__PURE__*/require("../../tab.constants");
+
+exports.tabClassName = 'fui-Tab';
+/**
+ * Styles for the root slot
+ */
+
+const useRootStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "De3pzq": "flu3bqm",
+    "g2u3we": "fwhevhj",
+    "h3c5rm": ["f61n433", "f1q8l70w"],
+    "B9xav0g": "fv1dfc8",
+    "zhjwy3": ["f1q8l70w", "f61n433"],
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "i8kkvl": "fgfbwa2",
+    "Bceei9c": "f1k6fduh",
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1063pyq",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi",
+    "z8tnut": "f1809wu7",
+    "z189sj": ["f81rol6", "frdkuqy"],
+    "Byoj8tv": "f1fow5ox",
+    "uwmqm3": ["frdkuqy", "f81rol6"],
+    "qhf8xq": "f10pi13n",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw"
+  },
+  "horizontal": {
+    "Bt984gj": "f122n59",
+    "Brf1p80": "f4d9j23"
+  },
+  "vertical": {
+    "Bt984gj": "f122n59",
+    "Brf1p80": "fbhxue7"
+  },
+  "small": {
+    "z8tnut": "f1xp5gbu",
+    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "Byoj8tv": "f1d7kygh",
+    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
+    "i8kkvl": "f16mnhsx"
+  },
+  "subtle": {
+    "Jwef8y": "f1knas48"
+  }
+}, {
+  "d": [".flu3bqm{background-color:none;}", ".fwhevhj{border-top-color:none;}", ".f61n433{border-right-color:none;}", ".f1q8l70w{border-left-color:none;}", ".fv1dfc8{border-bottom-color:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1809wu7{padding-top:10px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1fow5ox{padding-bottom:10px;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}"],
+  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"]
+});
+/**
+ * Focus styles for the root slot
+ */
+
+
+const useFocusStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "B486eqv": "f2hkw1w",
+    "Bnmjwt4": "flfsvnh",
+    "Jopkrh": ["f1781m5e", "flvaaa9"],
+    "hhrs2v": "f50u1b5",
+    "B7jbng7": ["flvaaa9", "f1781m5e"],
+    "B32s92o": "fgeg2qa",
+    "Bh48x57": "f19j8a82",
+    "B5hngm5": "fhcq1yo",
+    "D4py6b": "f1gkya50",
+    "Bgwpjed": "fpt6wn7"
+  }
+}, {
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gkya50:focus{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}"]
+});
+/**
+ * Indicator styles for the root slot when horizontal.
+ */
+
+
+const useHorizontalIndicatorStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "Bkbwdz4": "f1mif8u4",
+    "frdscb": ["fvxed1z", "f1j2a01o"],
+    "B9nohqn": ["f1j2a01o", "fvxed1z"],
+    "B1dhsta": ["fsamouo", "f1aazreq"],
+    "Bjdmjzx": ["f1aazreq", "fsamouo"],
+    "oqd9ik": "ffdc0f3",
+    "Bs6t6z0": "fqc6z8f",
+    "Hdbjpj": "f11ef69",
+    "mpb1vu": "f119hevp",
+    "Bj55yzk": "fw2wsqs",
+    "jc51t6": ["f1l9humg", "f3c5rjh"],
+    "cnmfks": ["f3c5rjh", "f1l9humg"],
+    "Bt86n75": "fg6xmog"
+  },
+  "small": {
+    "jc51t6": ["f1i8k3s6", "fy447wy"],
+    "cnmfks": ["fy447wy", "f1i8k3s6"]
+  }
+}, {
+  "d": [".f1mif8u4:after{background-color:none;}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fsamouo:after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1aazreq:after{border-top-left-radius:var(--borderRadiusMedium);}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f119hevp:after{height:2px;}", ".fw2wsqs:after{bottom:0;}", ".f1l9humg:after{left:10px;}", ".f3c5rjh:after{right:10px;}", ".f1i8k3s6:after{left:6px;}", ".fy447wy:after{right:6px;}"],
+  "h": [".fg6xmog:hover:after{background-color:var(--colorNeutralStroke1);}"]
+});
+/**
+ * Indicator styles for the root slot when vertical.
+ */
+
+
+const useVerticalIndicatorStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "B1dvbpk": "ffgj6zs",
+    "px8gyy": ["f16to4m4", "f1ceoihi"],
+    "B5c9fhp": ["f1ceoihi", "f16to4m4"],
+    "Bhe99jt": ["fkibbow", "fnlo9u7"],
+    "B2r1szc": ["fnlo9u7", "fkibbow"],
+    "Bmqnesq": "f170vdtw",
+    "rurcny": "fuzzvh5",
+    "xx9plb": "fxf9f1y",
+    "Bdn98qo": "f15bpuwh",
+    "Byque4d": ["f1t0u0az", "fmlx6bj"],
+    "Bf8kmfk": "f1bwym7p",
+    "Bj2wrql": "fk3f4e0",
+    "Cgij5x": "fl6lm7t"
+  },
+  "small": {
+    "Bf8kmfk": "fp6nmmp",
+    "Bj2wrql": "f14i0ki9"
+  }
+}, {
+  "d": [".ffgj6zs:before{background-color:none;}", ".f16to4m4:before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1ceoihi:before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fkibbow:before{border-top-right-radius:var(--borderRadiusMedium);}", ".fnlo9u7:before{border-top-left-radius:var(--borderRadiusMedium);}", ".f170vdtw:before{box-sizing:border-box;}", ".fuzzvh5:before{content:\"\";}", ".fxf9f1y:before{position:absolute;}", ".f15bpuwh:before{width:2px;}", ".f1t0u0az:before{left:0;}", ".fmlx6bj:before{right:0;}", ".f1bwym7p:before{top:10px;}", ".fk3f4e0:before{bottom:10px;}", ".fp6nmmp:before{top:6px;}", ".f14i0ki9:before{bottom:6px;}"],
+  "h": [".fl6lm7t:hover:before{background-color:var(--colorNeutralStroke1);}"]
+});
+/**
+ * Styles for the icon slot.
+ */
+
+
+const useIconStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "Bt984gj": "f122n59",
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "f4d9j23"
+  },
+  "small": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  },
+  "medium": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  }
+}, {
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}"]
+});
+/**
+ * Styles for the content slot (children)
+ */
+
+
+const useContentStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "uwmqm3": ["f161knb0", "f12huiiw"],
+    "z189sj": ["f12huiiw", "f161knb0"]
+  },
+  "small": {
+    "uwmqm3": ["f161knb0", "f12huiiw"],
+    "z189sj": ["f12huiiw", "f161knb0"]
+  }
+}, {
+  "d": [".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}"]
+});
+/**
+ * Apply styling to the Tab slots based on the state
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+
+const useTabStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const focusStyles = useFocusStyles();
+  const horizontalIndicatorStyles = useHorizontalIndicatorStyles();
+  const verticalIndicatorStyles = useVerticalIndicatorStyles();
+  const iconStyles = useIconStyles();
+  const contentStyles = useContentStyles();
+  state.root.className = react_1.mergeClasses(exports.tabClassName, rootStyles.base, focusStyles.base, state.size === 'small' && rootStyles.small, state.appearance === 'subtle' && rootStyles.subtle, state.vertical ? verticalIndicatorStyles.base : horizontalIndicatorStyles.base, state.size === 'small' && (state.vertical ? verticalIndicatorStyles.small : horizontalIndicatorStyles.small), state.root.className);
+
+  if (state.icon) {
+    state.icon.className = react_1.mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+  }
+
+  state.content.className = react_1.mergeClasses(contentStyles.base, state.size === 'small' && contentStyles.small, state.content.className);
+  return state;
+};
+
+exports.useTabStyles_unstable = useTabStyles_unstable;
+//# sourceMappingURL=useTabStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { tabPendingDesignTokens } from '../../tab.constants';\n\nexport const tabClassName = 'fui-Tab';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    backgroundColor: 'none',\n    ...shorthands.borderColor('none'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n    columnGap: tabPendingDesignTokens.gap.medium,\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'row',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(tabPendingDesignTokens.tabPadding.medium),\n    position: 'relative',\n    ...shorthands.overflow('hidden'),\n  },\n  horizontal: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  vertical: {\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n  },\n  small: {\n    ...shorthands.padding(tabPendingDesignTokens.tabPadding.small),\n    columnGap: tabPendingDesignTokens.gap.small,\n  },\n  subtle: {\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n  },\n});\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/**\n * Indicator styles for the root slot when horizontal.\n */\nconst useHorizontalIndicatorStyles = makeStyles({\n  base: {\n    ':after': {\n      backgroundColor: 'none',\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      height: tabPendingDesignTokens.indicatorThickness,\n      bottom: '0',\n      left: tabPendingDesignTokens.tabPadding.medium,\n      right: tabPendingDesignTokens.tabPadding.medium,\n    },\n    ':hover': {\n      ':after': {\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n  small: {\n    ':after': {\n      left: tabPendingDesignTokens.tabPadding.small,\n      right: tabPendingDesignTokens.tabPadding.small,\n    },\n  },\n});\n\n/**\n * Indicator styles for the root slot when vertical.\n */\nconst useVerticalIndicatorStyles = makeStyles({\n  base: {\n    ':before': {\n      backgroundColor: 'none',\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      width: tabPendingDesignTokens.indicatorThickness,\n      left: '0',\n      top: tabPendingDesignTokens.tabPadding.medium,\n      bottom: tabPendingDesignTokens.tabPadding.medium,\n    },\n    ':hover': {\n      ':before': {\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n  small: {\n    ':before': {\n      top: tabPendingDesignTokens.tabPadding.small,\n      bottom: tabPendingDesignTokens.tabPadding.small,\n    },\n  },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\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});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n  base: {\n    paddingLeft: tabPendingDesignTokens.contentPadding.medium,\n    paddingRight: tabPendingDesignTokens.contentPadding.medium,\n  },\n  small: {\n    paddingLeft: tabPendingDesignTokens.contentPadding.small,\n    paddingRight: tabPendingDesignTokens.contentPadding.small,\n  },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n  const horizontalIndicatorStyles = useHorizontalIndicatorStyles();\n  const verticalIndicatorStyles = useVerticalIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    tabClassName,\n    rootStyles.base,\n    focusStyles.base,\n    state.size === 'small' && rootStyles.small,\n    state.appearance === 'subtle' && rootStyles.subtle,\n    state.vertical ? verticalIndicatorStyles.base : horizontalIndicatorStyles.base,\n    state.size === 'small' && (state.vertical ? verticalIndicatorStyles.small : horizontalIndicatorStyles.small),\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n  }\n\n  state.content.className = mergeClasses(\n    contentStyles.base,\n    state.size === 'small' && contentStyles.small,\n    state.content.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TabList/TabList.d.ts

@@ -0,0 +1,6 @@
+import type { TabListProps } from './TabList.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * A tab list provides single selection from a set of tabs.
+ */
+export declare const TabList: ForwardRefComponent<TabListProps>;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabList = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useTabList_1 = /*#__PURE__*/require("./useTabList");
+
+const renderTabList_1 = /*#__PURE__*/require("./renderTabList");
+
+const useTabListStyles_1 = /*#__PURE__*/require("./useTabListStyles");
+
+const useTabListContextValues_1 = /*#__PURE__*/require("./useTabListContextValues");
+/**
+ * A tab list provides single selection from a set of tabs.
+ */
+
+
+exports.TabList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTabList_1.useTabList_unstable(props, ref);
+  const 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-commonjs/components/TabList/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/TabList.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxF,QAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;AACA,QAAM,aAAa,GAAG,yBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAtB;AAEA,EAAA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;AACA,SAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CANyD,CAA7C;AAQb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","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"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TabList/TabList.types.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TabValue } from '../Tab/Tab.types';
+export declare type RegisterTabData = {
+    /**
+     * The value of the selected tab.
+     */
+    value: TabValue;
+    ref: React.RefObject<HTMLElement>;
+};
+export declare type RegisterTabEventHandler = (data: RegisterTabData) => void;
+export declare type SelectTabData = {
+    /**
+     * The value of the selected tab.
+     */
+    value: TabValue;
+};
+export declare type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
+export declare type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;
+export declare type TabListSlots = {
+    /**
+     * The slot associated with the root element of this tab list.
+     */
+    root: Slot<'div'>;
+};
+declare type TabListCommons = {
+    /**
+     * A tab list can supports 'transparent' and 'subtle' appearance.
+     *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
+     *- 'transparent': No background and border styling
+     * The appearance affects each of the contained tabs.
+     * @default 'transparent'
+     */
+    appearance?: 'transparent' | 'subtle';
+    /**
+     * Raised when a tab is selected.
+     */
+    onTabSelect?: SelectTabEventHandler;
+    /**
+     * The value of the currently selected tab.
+     */
+    selectedValue?: TabValue;
+    /**
+     * A tab list can be either 'small' or 'medium' size.
+     * The size affects each of the contained tabs.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * A tab list can arrange its tabs vertically.
+     * @default false
+     */
+    vertical?: boolean;
+};
+/**
+ * TabList Props
+ */
+export declare type TabListProps = ComponentProps<TabListSlots> & TabListCommons & {
+    /**
+     * The value of the tab to be selected by default.
+     * Typically useful when the selectedValue is uncontrolled.
+     */
+    defaultSelectedValue?: TabValue;
+};
+export declare type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListCommons, 'appearance' | 'size' | 'vertical'>> & {
+    /** A callback to allow a tab to register itself with the tab list. */
+    onRegister: RegisterTabEventHandler;
+    /** A callback to allow a tab to unregister itself with the tab list. */
+    onUnregister: RegisterTabEventHandler;
+    /**
+     * A callback to allow a tab to select itself when pressed.
+     */
+    onSelect: SelectTabEventHandler;
+};
+/**
+ * Context values used in rendering TabList.
+ */
+export declare type TabListContextValues = {
+    /**
+     * The context of the tab list available to each tab.
+     */
+    tabList: TabListContextValue;
+};
+/**
+ * A bounding rectangle of a tab
+ */
+export declare type TabContentRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * State used in rendering TabList.
+ */
+export declare type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue & {
+    selectedTabRect?: TabContentRect;
+};
+export {};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/TabList/TabListContext.d.ts

@@ -0,0 +1,3 @@
+import type { Context } from '@fluentui/react-context-selector';
+import { TabListContextValue } from './TabList.types';
+export declare const TabListContext: Context<TabListContextValue>;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabListContext = void 0;
+
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+
+exports.TabListContext = /*#__PURE__*/react_context_selector_1.createContext({
+  appearance: 'transparent',
+  selectedValue: undefined,
+  onRegister: () => {
+    /* noop */
+  },
+  onUnregister: () => {
+    /* noop */
+  },
+  onSelect: () => {
+    /* noop */
+  },
+  size: 'medium',
+  vertical: false
+});
+//# sourceMappingURL=TabListContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;AAC7F,EAAA,UAAU,EAAE,aADiF;AAE7F,EAAA,aAAa,EAAE,SAF8E;AAG7F,EAAA,UAAU,EAAE,MAAK;AACf;AACD,GAL4F;AAM7F,EAAA,YAAY,EAAE,MAAK;AACjB;AACD,GAR4F;AAS7F,EAAA,QAAQ,EAAE,MAAK;AACb;AACD,GAX4F;AAY7F,EAAA,IAAI,EAAE,QAZuF;AAa7F,EAAA,QAAQ,EAAE;AAbmF,CAAnC,CAA/C","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n  appearance: 'transparent',\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  size: 'medium',\n  vertical: false,\n});\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TabList/index.d.ts

@@ -0,0 +1,5 @@
+export * from './TabList';
+export * from './TabList.types';
+export * from './renderTabList';
+export * from './useTabList';
+export * from './useTabListStyles';

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./TabList"), exports);
+
+tslib_1.__exportStar(require("./TabList.types"), exports);
+
+tslib_1.__exportStar(require("./renderTabList"), exports);
+
+tslib_1.__exportStar(require("./useTabList"), exports);
+
+tslib_1.__exportStar(require("./useTabListStyles"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TabList/renderTabList.d.ts

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

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderTabList_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const TabListContext_1 = /*#__PURE__*/require("./TabListContext");
+/**
+ * Render the final JSX of TabList
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+
+const renderTabList_unstable = (state, contextValues) => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...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-commonjs/components/TabList/renderTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/renderTabList.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;AACH;;;AACO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;AACjG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAxB,EAAwD,KAAK,CAAC,IAAN,CAAW,QAAnE,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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 */\n// eslint-disable-next-line @typescript-eslint/naming-convention\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"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TabList/useTabList.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { TabListProps, TabListState } from './TabList.types';
+/**
+ * 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
+ */
+export declare const useTabList_unstable: (props: TabListProps, ref: React.Ref<HTMLElement>) => TabListState;

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

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabList_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * 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
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+
+const useTabList_unstable = (props, ref) => {
+  const {
+    appearance = 'transparent',
+    onTabSelect,
+    size = 'medium',
+    vertical = false
+  } = props;
+  const innerRef = React.useRef(null);
+  const focusAttributes = react_tabster_1.useArrowNavigationGroup({
+    circular: true,
+    axis: vertical ? 'vertical' : 'horizontal'
+  });
+  const [selectedValue, setSelectedValue] = react_utilities_1.useControllableState({
+    state: props.selectedValue,
+    defaultState: props.defaultSelectedValue,
+    initialState: undefined
+  });
+  const onSelect = react_utilities_1.useEventCallback((event, data) => {
+    onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
+    setSelectedValue(data.value);
+  }); // provide force recalculation of the selection indicator rectangle
+
+  const [calcRect, setCalcRect] = React.useState(0);
+  const recalcRect = react_utilities_1.useConst(() => () => setCalcRect(value => ++value)); // when this list or any tab resizes, recalculate the selection indicator rectangle
+
+  const resizeObserver = React.useMemo(() => new ResizeObserver(entries => {
+    recalcRect();
+  }), [recalcRect]); // observe this list for resize
+
+  React.useEffect(() => {
+    const currentRef = innerRef.current;
+    currentRef && resizeObserver.observe(currentRef);
+    return () => {
+      currentRef && resizeObserver.unobserve(currentRef);
+    };
+  }, [resizeObserver]); // when tabs register their refs, observe them for resize
+
+  const registeredTabs = React.useRef({});
+  const onRegister = react_utilities_1.useEventCallback(data => {
+    var _a;
+
+    registeredTabs.current[JSON.stringify(data.value)] = data;
+    ((_a = data.ref) === null || _a === void 0 ? void 0 : _a.current) && resizeObserver.observe(data.ref.current);
+    recalcRect();
+  });
+  const onUnregister = react_utilities_1.useEventCallback(data => {
+    var _a;
+
+    delete registeredTabs.current[JSON.stringify(data.value)];
+    ((_a = data.ref) === null || _a === void 0 ? void 0 : _a.current) && resizeObserver.unobserve(data.ref.current);
+    recalcRect();
+  }); // calculate the selection indicator rectangle
+
+  const selectedTabRect = React.useMemo(() => {
+    var _a, _b, _c;
+
+    const listRect = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const tabRef = (_b = registeredTabs.current[JSON.stringify(selectedValue)]) === null || _b === void 0 ? void 0 : _b.ref;
+    const tabRect = (_c = tabRef === null || tabRef === void 0 ? void 0 : tabRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+
+    if (listRect && tabRect) {
+      return {
+        x: tabRect.x - listRect.x,
+        y: tabRect.y - listRect.y,
+        width: tabRect.width,
+        height: tabRect.height
+      };
+    } // calcRect is used to force updates when registered tabs change or resize occurs
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [calcRect, selectedValue]);
+  return {
+    components: {
+      root: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps('div', {
+      ref: react_utilities_1.useMergedRefs(ref, innerRef),
+      role: 'tablist',
+      ...focusAttributes,
+      ...props
+    }),
+    appearance,
+    selectedTabRect,
+    selectedValue,
+    size,
+    vertical,
+    onRegister,
+    onUnregister,
+    onSelect
+  };
+};
+
+exports.useTabList_unstable = useTabList_unstable;
+//# sourceMappingURL=useTabList.js.map