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

package/lib/components/TabList/useTabListStyles.js

@@ -0,0 +1,118 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { usePrevious } from '@fluentui/react-utilities';
+import { tabPendingDesignTokens } from '../../tab.constants';
+export const tabListClassName = 'fui-TabList';
+export const tabListSelectionIndicatorName = 'fui-TabList_SelectionIndicator';
+export const indicatorOffsetVar = '--selection-indicator-offset';
+export const indicatorLengthVar = '--selection-indicator-length';
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1063pyq",
+    "qhf8xq": "f10pi13n"
+  },
+  "vertical": {
+    "Beiy3e4": "f1vx9l62"
+  }
+}, {
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f10pi13n{position:relative;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
+});
+/**
+ * Styles for the selection indicator slot when horizontal.
+ */
+
+
+const useHorizontalIndicatorStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bkbwdz4": "f30248y",
+    "frdscb": ["fvxed1z", "f1j2a01o"],
+    "B9nohqn": ["f1j2a01o", "fvxed1z"],
+    "B1dhsta": ["fsamouo", "f1aazreq"],
+    "Bjdmjzx": ["f1aazreq", "fsamouo"],
+    "Bj55yzk": "fw2wsqs",
+    "oqd9ik": "ffdc0f3",
+    "Bs6t6z0": "fqc6z8f",
+    "mpb1vu": "f119hevp",
+    "jc51t6": ["f1uyszuw", "f1xp83vy"],
+    "Hdbjpj": "f11ef69",
+    "Biobvvw": "f1tzy5p2",
+    "Bunff0j": "fs357bs"
+  },
+  "small": {
+    "jc51t6": ["f1w3ykbk", "f1xm0lqg"],
+    "Biobvvw": "f1akpkq3"
+  },
+  "animated": {
+    "wbfbqe": ["fjzde92", "f1xfxhj5"],
+    "mafdb0": "f1fuwhvj"
+  }
+}, {
+  "d": [".f30248y:after{background-color:var(--colorBrandStroke1);}", ".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);}", ".fw2wsqs:after{bottom:0;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f119hevp:after{height:2px;}", ".f1uyszuw:after{left:calc(var(--selection-indicator-offset) + 10px);}", ".f1xp83vy:after{right:calc(var(--selection-indicator-offset) + 10px);}", ".f11ef69:after{position:absolute;}", ".f1tzy5p2:after{width:calc(var(--selection-indicator-length) - (2 * 10px));}", ".fs357bs:after{z-index:1;}", ".f1w3ykbk:after{left:calc(var(--selection-indicator-offset) + 6px);}", ".f1xm0lqg:after{right:calc(var(--selection-indicator-offset) + 6px);}", ".f1akpkq3:after{width:calc(var(--selection-indicator-length) - (2 * 6px));}", ".fjzde92:after{transition-property:left,width;}", ".f1xfxhj5:after{transition-property:right,width;}", ".f1fuwhvj:after{transition-duration:350ms,350ms;}"]
+});
+/**
+ * Styles for the selection indicator slot when vertical.
+ */
+
+
+const useVerticalIndicatorStyles = /*#__PURE__*/__styles({
+  "base": {
+    "B1dvbpk": "fa05st",
+    "px8gyy": ["f16to4m4", "f1ceoihi"],
+    "B5c9fhp": ["f1ceoihi", "f16to4m4"],
+    "Bhe99jt": ["fkibbow", "fnlo9u7"],
+    "B2r1szc": ["fnlo9u7", "fkibbow"],
+    "Bmqnesq": "f170vdtw",
+    "rurcny": "fuzzvh5",
+    "Bbc2r3f": "f13xaayz",
+    "Byque4d": ["f1t0u0az", "fmlx6bj"],
+    "xx9plb": "fxf9f1y",
+    "Bf8kmfk": "fwt37qm",
+    "Bdn98qo": "f15bpuwh",
+    "Bab4cu6": "f1ijlm3k"
+  },
+  "small": {
+    "Bf8kmfk": "f8k0k00",
+    "Bbc2r3f": "fyephjl"
+  },
+  "animated": {
+    "iukgx1": "fcs48rj",
+    "B5szp9g": "f1u309tb"
+  }
+}, {
+  "d": [".fa05st:before{background-color:var(--colorBrandStroke1);}", ".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:\"\";}", ".f13xaayz:before{height:calc(var(--selection-indicator-length) - (2 * 10px));}", ".f1t0u0az:before{left:0;}", ".fmlx6bj:before{right:0;}", ".fxf9f1y:before{position:absolute;}", ".fwt37qm:before{top:calc(var(--selection-indicator-offset) + 10px);}", ".f15bpuwh:before{width:2px;}", ".f1ijlm3k:before{z-index:1;}", ".f8k0k00:before{top:calc(var(--selection-indicator-offset) + 6px);}", ".fyephjl:before{height:calc(var(--selection-indicator-length) - (2 * 6px));}", ".fcs48rj:before{transition-property:top,height;}", ".f1u309tb:before{transition-duration:350ms,350ms;}"]
+});
+/**
+ * Apply styling to the TabList slots based on the state
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+
+export const useTabListStyles_unstable = state => {
+  const {
+    selectedTabRect: selectionIndicatorRect,
+    selectedValue,
+    size,
+    vertical
+  } = state; // only animate when the selected value has changed
+
+  const previousSelectedValue = usePrevious(selectedValue);
+  const shouldAnimate = !!previousSelectedValue && previousSelectedValue !== selectedValue;
+  const styles = useStyles();
+  const horizontalIndicatorStyles = useHorizontalIndicatorStyles();
+  const verticalIndicatorStyles = useVerticalIndicatorStyles();
+  state.root.className = mergeClasses(tabListClassName, styles.root, vertical && styles.vertical, !!selectedValue && (vertical ? verticalIndicatorStyles.base : horizontalIndicatorStyles.base), !!selectedValue && size === 'small' && (vertical ? verticalIndicatorStyles.small : horizontalIndicatorStyles.small), !!selectedValue && shouldAnimate && (vertical ? verticalIndicatorStyles.animated : horizontalIndicatorStyles.animated), state.root.className);
+  const rootCssVars = selectionIndicatorRect ? {
+    [indicatorOffsetVar]: vertical ? `${selectionIndicatorRect.y}px` : `${selectionIndicatorRect.x}px`,
+    [indicatorLengthVar]: vertical ? `${selectionIndicatorRect.height}px` : `${selectionIndicatorRect.width}px`
+  } : {};
+  state.root.style = { ...rootCssVars,
+    ...state.root.style
+  };
+  return state;
+};
+//# sourceMappingURL=useTabListStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/useTabListStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAEA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,WAAT,QAA4B,2BAA5B;AACA,SAAS,sBAAT,QAAuC,qBAAvC;AAEA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AACP,OAAO,MAAM,6BAA6B,GAAG,gCAAtC;AAEP,OAAO,MAAM,kBAAkB,GAAG,8BAA3B;AACP,OAAO,MAAM,kBAAkB,GAAG,8BAA3B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,MAAM,4BAA4B,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAArC;AA6BA;;AAEG;;;AACH,MAAM,0BAA0B,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAnC;AA6BA;;AAEG;AACH;;;AACA,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;AAC7E,QAAM;AAAE,IAAA,eAAe,EAAE,sBAAnB;AAA2C,IAAA,aAA3C;AAA0D,IAAA,IAA1D;AAAgE,IAAA;AAAhE,MAA6E,KAAnF,CAD6E,CAG7E;;AACA,QAAM,qBAAqB,GAAG,WAAW,CAAC,aAAD,CAAzC;AACA,QAAM,aAAa,GAAG,CAAC,CAAC,qBAAF,IAA2B,qBAAqB,KAAK,aAA3E;AAEA,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,QAAM,yBAAyB,GAAG,4BAA4B,EAA9D;AACA,QAAM,uBAAuB,GAAG,0BAA0B,EAA1D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,gBADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,QAAQ,IAAI,MAAM,CAAC,QAHc,EAIjC,CAAC,CAAC,aAAF,KAAoB,QAAQ,GAAG,uBAAuB,CAAC,IAA3B,GAAkC,yBAAyB,CAAC,IAAxF,CAJiC,EAKjC,CAAC,CAAC,aAAF,IAAmB,IAAI,KAAK,OAA5B,KAAwC,QAAQ,GAAG,uBAAuB,CAAC,KAA3B,GAAmC,yBAAyB,CAAC,KAA7G,CALiC,EAMjC,CAAC,CAAC,aAAF,IACE,aADF,KAEG,QAAQ,GAAG,uBAAuB,CAAC,QAA3B,GAAsC,yBAAyB,CAAC,QAF3E,CANiC,EASjC,KAAK,CAAC,IAAN,CAAW,SATsB,CAAnC;AAYA,QAAM,WAAW,GAAG,sBAAsB,GACtC;AACE,KAAC,kBAAD,GAAsB,QAAQ,GAAG,GAAG,sBAAsB,CAAC,CAAC,IAA9B,GAAqC,GAAG,sBAAsB,CAAC,CAAC,IADhG;AAEE,KAAC,kBAAD,GAAsB,QAAQ,GAAG,GAAG,sBAAsB,CAAC,MAAM,IAAnC,GAA0C,GAAG,sBAAsB,CAAC,KAAK;AAFzG,GADsC,GAKtC,EALJ;AAOA,EAAA,KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,WADc;AAEjB,OAAG,KAAK,CAAC,IAAN,CAAW;AAFG,GAAnB;AAKA,SAAO,KAAP;AACD,CApCM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TabListState } from './TabList.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { usePrevious } from '@fluentui/react-utilities';\nimport { tabPendingDesignTokens } from '../../tab.constants';\n\nexport const tabListClassName = 'fui-TabList';\nexport const tabListSelectionIndicatorName = 'fui-TabList_SelectionIndicator';\n\nexport const indicatorOffsetVar = '--selection-indicator-offset';\nexport const indicatorLengthVar = '--selection-indicator-length';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    position: 'relative',\n  },\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Styles for the selection indicator slot when horizontal.\n */\nconst useHorizontalIndicatorStyles = makeStyles({\n  base: {\n    ':after': {\n      backgroundColor: tokens.colorBrandStroke1,\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      bottom: 0,\n      boxSizing: 'border-box',\n      content: '\"\"',\n      height: tabPendingDesignTokens.indicatorThickness,\n      left: `calc(var(${indicatorOffsetVar}) + ${tabPendingDesignTokens.tabPadding.medium})`,\n      position: 'absolute',\n      width: `calc(var(${indicatorLengthVar}) - (2 * ${tabPendingDesignTokens.tabPadding.medium}))`,\n      zIndex: 1,\n    },\n  },\n  small: {\n    ':after': {\n      left: `calc(var(${indicatorOffsetVar}) + ${tabPendingDesignTokens.tabPadding.small})`,\n      width: `calc(var(${indicatorLengthVar}) - (2 * ${tabPendingDesignTokens.tabPadding.small}))`,\n    },\n  },\n  animated: {\n    ':after': {\n      transitionProperty: 'left, width',\n      transitionDuration: `350ms, 350ms`,\n    },\n  },\n});\n\n/**\n * Styles for the selection indicator slot when vertical.\n */\nconst useVerticalIndicatorStyles = makeStyles({\n  base: {\n    ':before': {\n      backgroundColor: tokens.colorBrandStroke1,\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      content: '\"\"',\n      height: `calc(var(${indicatorLengthVar}) - (2 * ${tabPendingDesignTokens.tabPadding.medium}))`,\n      left: '0',\n      position: 'absolute',\n      top: `calc(var(${indicatorOffsetVar}) + ${tabPendingDesignTokens.tabPadding.medium})`,\n      width: tabPendingDesignTokens.indicatorThickness,\n      zIndex: 1,\n    },\n  },\n  small: {\n    ':before': {\n      top: `calc(var(${indicatorOffsetVar}) + ${tabPendingDesignTokens.tabPadding.small})`,\n      height: `calc(var(${indicatorLengthVar}) - (2 * ${tabPendingDesignTokens.tabPadding.small}))`,\n    },\n  },\n  animated: {\n    ':before': {\n      transitionProperty: 'top, height',\n      transitionDuration: `350ms, 350ms`,\n    },\n  },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n  const { selectedTabRect: selectionIndicatorRect, selectedValue, size, vertical } = state;\n\n  // only animate when the selected value has changed\n  const previousSelectedValue = usePrevious(selectedValue);\n  const shouldAnimate = !!previousSelectedValue && previousSelectedValue !== selectedValue;\n\n  const styles = useStyles();\n  const horizontalIndicatorStyles = useHorizontalIndicatorStyles();\n  const verticalIndicatorStyles = useVerticalIndicatorStyles();\n\n  state.root.className = mergeClasses(\n    tabListClassName,\n    styles.root,\n    vertical && styles.vertical,\n    !!selectedValue && (vertical ? verticalIndicatorStyles.base : horizontalIndicatorStyles.base),\n    !!selectedValue && size === 'small' && (vertical ? verticalIndicatorStyles.small : horizontalIndicatorStyles.small),\n    !!selectedValue &&\n      shouldAnimate &&\n      (vertical ? verticalIndicatorStyles.animated : horizontalIndicatorStyles.animated),\n    state.root.className,\n  );\n\n  const rootCssVars = selectionIndicatorRect\n    ? {\n        [indicatorOffsetVar]: vertical ? `${selectionIndicatorRect.y}px` : `${selectionIndicatorRect.x}px`,\n        [indicatorLengthVar]: vertical ? `${selectionIndicatorRect.height}px` : `${selectionIndicatorRect.width}px`,\n      }\n    : {};\n\n  state.root.style = {\n    ...rootCssVars,\n    ...state.root.style,\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.d.ts

@@ -1 +1,2 @@
-export * from './Tabs';
+export * from './Tab';
+export * from './TabList';

package/lib/index.js

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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC","sourcesContent":["export * from './Tabs';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC","sourcesContent":["export * from './Tab';\nexport * from './TabList';\n"]}

package/lib/tab.constants.d.ts

@@ -0,0 +1,15 @@
+export declare const tabPendingDesignTokens: {
+    tabPadding: {
+        medium: string;
+        small: string;
+    };
+    indicatorThickness: string;
+    gap: {
+        medium: string;
+        small: string;
+    };
+    contentPadding: {
+        medium: string;
+        small: string;
+    };
+};

package/lib/tab.constants.js

@@ -0,0 +1,17 @@
+// TODO: These constants should be replaced with design tokens
+export const tabPendingDesignTokens = {
+  tabPadding: {
+    medium: '10px',
+    small: '6px'
+  },
+  indicatorThickness: '2px',
+  gap: {
+    medium: '6px',
+    small: '2px'
+  },
+  contentPadding: {
+    medium: '2px',
+    small: '2px'
+  }
+};
+//# sourceMappingURL=tab.constants.js.map

package/lib/tab.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["tab.constants.ts"],"names":[],"mappings":"AAAA;AACA,OAAO,MAAM,sBAAsB,GAAG;AACpC,EAAA,UAAU,EAAE;AACV,IAAA,MAAM,EAAE,MADE;AAEV,IAAA,KAAK,EAAE;AAFG,GADwB;AAKpC,EAAA,kBAAkB,EAAE,KALgB;AAMpC,EAAA,GAAG,EAAE;AAAE,IAAA,MAAM,EAAE,KAAV;AAAiB,IAAA,KAAK,EAAE;AAAxB,GAN+B;AAOpC,EAAA,cAAc,EAAE;AACd,IAAA,MAAM,EAAE,KADM;AAEd,IAAA,KAAK,EAAE;AAFO;AAPoB,CAA/B","sourcesContent":["// TODO: These constants should be replaced with design tokens\nexport const tabPendingDesignTokens = {\n  tabPadding: {\n    medium: '10px',\n    small: '6px',\n  },\n  indicatorThickness: '2px',\n  gap: { medium: '6px', small: '2px' },\n  contentPadding: {\n    medium: '2px',\n    small: '2px',\n  },\n};\n"],"sourceRoot":"../src/"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.13.0"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib-commonjs/Tab.d.ts

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

package/lib-commonjs/Tab.js

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

package/lib-commonjs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tab.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Tab/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/TabList.d.ts

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

package/lib-commonjs/TabList.js

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

package/lib-commonjs/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TabList.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/TabList/index';\n"],"sourceRoot":"../src/"}

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tab = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useTab_1 = /*#__PURE__*/require("./useTab");
+
+const renderTab_1 = /*#__PURE__*/require("./renderTab");
+
+const useTabStyles_1 = /*#__PURE__*/require("./useTabStyles");
+/**
+ * A tab provides a selectable item in a tab list.
+ */
+
+
+exports.Tab = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const 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-commonjs/components/Tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,GAAA,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChF,QAAM,KAAK,GAAG,QAAA,CAAA,eAAA,CAAgB,KAAhB,EAAuB,GAAvB,CAAd;AAEA,EAAA,cAAA,CAAA,qBAAA,CAAsB,KAAtB;AACA,SAAO,WAAA,CAAA,kBAAA,CAAmB,KAAnB,CAAP;AACD,CALiD,CAArC;AAOb,OAAA,CAAA,GAAA,CAAI,WAAJ,GAAkB,KAAlB","sourcesContent":["import * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"sourceRoot":"../src/"}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,OAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Tab';\nexport * from './Tab.types';\nexport * from './renderTab';\nexport * from './useTab';\nexport * from './useTabStyles';\n"],"sourceRoot":"../src/"}

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

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

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderTab_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of Tab
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+
+const renderTab_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }), React.createElement(slots.content, { ...slotProps.content
+  }));
+};
+
+exports.renderTab_unstable = renderTab_unstable;
+//# sourceMappingURL=renderTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/renderTab.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;AACH;;;AACO,MAAM,kBAAkB,GAAI,KAAD,IAAoB;AACpD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAmB,KAAnB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","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 */\n// eslint-disable-next-line @typescript-eslint/naming-convention\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      <slots.content {...slotProps.content} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

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

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

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTab_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const TabListContext_1 = /*#__PURE__*/require("../TabList/TabListContext");
+
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+/**
+ * Create the state required to render Tab.
+ *
+ * The returned state can be modified with hooks such as useTabStyles_unstable,
+ * before being passed to renderTab_unstable.
+ *
+ * @param props - props from this instance of Tab
+ * @param ref - reference to root HTMLElement of Tab
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+
+const useTab_unstable = (props, ref) => {
+  const {
+    content,
+    icon,
+    value
+  } = props;
+  const {
+    appearance,
+    selected,
+    onRegister,
+    onUnregister,
+    onSelect,
+    size,
+    vertical
+  } = react_context_selector_1.useContextSelector(TabListContext_1.TabListContext, ctx => ({
+    appearance: ctx.appearance,
+    selected: ctx.selectedValue === value,
+    onRegister: ctx.onRegister,
+    onUnregister: ctx.onUnregister,
+    onSelect: ctx.onSelect,
+    size: ctx.size,
+    vertical: !!ctx.vertical
+  }));
+  const onClick = react_utilities_1.useEventCallback(event => onSelect(event, {
+    value
+  }));
+  const innerRef = React.useRef(null);
+  React.useEffect(() => {
+    onRegister({
+      value,
+      ref: innerRef
+    });
+    return () => {
+      onUnregister({
+        value,
+        ref: innerRef
+      });
+    };
+  }, [onRegister, onUnregister, innerRef, value]);
+  return {
+    components: {
+      root: 'div',
+      icon: 'span',
+      content: 'span'
+    },
+    root: react_utilities_1.getNativeElementProps('div', {
+      ref: react_utilities_1.useMergedRefs(ref, innerRef),
+      role: 'tab',
+      tabIndex: 0,
+      ...props,
+      onClick
+    }),
+    icon: react_utilities_1.resolveShorthand(icon),
+    content: react_utilities_1.resolveShorthand(content, {
+      required: true,
+      defaultProps: {
+        children: props.children
+      }
+    }),
+    appearance,
+    selected,
+    size,
+    value,
+    vertical
+  };
+};
+
+exports.useTab_unstable = useTab_unstable;
+//# sourceMappingURL=useTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/useTab.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;AACH;;;AACO,MAAM,eAAe,GAAG,CAAC,KAAD,EAAkB,GAAlB,KAA2D;AACxF,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA,IAAX;AAAiB,IAAA;AAAjB,MAA2B,KAAjC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,QAAd;AAAwB,IAAA,UAAxB;AAAoC,IAAA,YAApC;AAAkD,IAAA,QAAlD;AAA4D,IAAA,IAA5D;AAAkE,IAAA;AAAlE,MAA+E,wBAAA,CAAA,kBAAA,CACnF,gBAAA,CAAA,cADmF,EAEnF,GAAG,KAAK;AACN,IAAA,UAAU,EAAE,GAAG,CAAC,UADV;AAEN,IAAA,QAAQ,EAAE,GAAG,CAAC,aAAJ,KAAsB,KAF1B;AAGN,IAAA,UAAU,EAAE,GAAG,CAAC,UAHV;AAIN,IAAA,YAAY,EAAE,GAAG,CAAC,YAJZ;AAKN,IAAA,QAAQ,EAAE,GAAG,CAAC,QALR;AAMN,IAAA,IAAI,EAAE,GAAG,CAAC,IANJ;AAON,IAAA,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC;AAPV,GAAL,CAFgF,CAArF;AAaA,QAAM,OAAO,GAAG,iBAAA,CAAA,gBAAA,CAAkB,KAAD,IAA2B,QAAQ,CAAC,KAAD,EAAQ;AAAE,IAAA;AAAF,GAAR,CAApD,CAAhB;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAjB;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,UAAU,CAAC;AACT,MAAA,KADS;AAET,MAAA,GAAG,EAAE;AAFI,KAAD,CAAV;AAKA,WAAO,MAAK;AACV,MAAA,YAAY,CAAC;AAAE,QAAA,KAAF;AAAS,QAAA,GAAG,EAAE;AAAd,OAAD,CAAZ;AACD,KAFD;AAGD,GATD,EASG,CAAC,UAAD,EAAa,YAAb,EAA2B,QAA3B,EAAqC,KAArC,CATH;AAWA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,OAAO,EAAE;AAHC,KADP;AAML,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,QAAnB,CAD4B;AAEjC,MAAA,IAAI,EAAE,KAF2B;AAGjC,MAAA,QAAQ,EAAE,CAHuB;AAIjC,SAAG,KAJ8B;AAKjC,MAAA;AALiC,KAA7B,CAND;AAaL,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAbD;AAcL,IAAA,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,OAAjB,EAA0B;AAAE,MAAA,QAAQ,EAAE,IAAZ;AAAkB,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,KAAK,CAAC;AAAlB;AAAhC,KAA1B,CAdJ;AAeL,IAAA,UAfK;AAgBL,IAAA,QAhBK;AAiBL,IAAA,IAjBK;AAkBL,IAAA,KAlBK;AAmBL,IAAA;AAnBK,GAAP;AAqBD,CApDM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","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 */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, icon, value } = props;\n\n  const { appearance, selected, onRegister, onUnregister, onSelect, size, vertical } = useContextSelector(\n    TabListContext,\n    ctx => ({\n      appearance: ctx.appearance,\n      selected: ctx.selectedValue === value,\n      onRegister: ctx.onRegister,\n      onUnregister: ctx.onUnregister,\n      onSelect: ctx.onSelect,\n      size: ctx.size,\n      vertical: !!ctx.vertical,\n    }),\n  );\n\n  const onClick = useEventCallback((event: SelectTabEvent) => onSelect(event, { value }));\n\n  const innerRef = React.useRef<HTMLElement>(null);\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  return {\n    components: {\n      root: 'div',\n      icon: 'span',\n      content: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tab',\n      tabIndex: 0,\n      ...props,\n      onClick,\n    }),\n    icon: resolveShorthand(icon),\n    content: resolveShorthand(content, { required: true, defaultProps: { children: props.children } }),\n    appearance,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,6 @@
+import type { TabState } from './Tab.types';
+export declare const tabClassName = "fui-Tab";
+/**
+ * Apply styling to the Tab slots based on the state
+ */
+export declare const useTabStyles_unstable: (state: TabState) => TabState;