@fluentui/react-tabs 9.3.3 → 9.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/.swcrc +30 -0
  2. package/CHANGELOG.json +85 -1
  3. package/CHANGELOG.md +29 -2
  4. package/lib/Tab.js.map +1 -1
  5. package/lib/TabList.js.map +1 -1
  6. package/lib/components/Tab/Tab.js.map +1 -1
  7. package/lib/components/Tab/Tab.types.js.map +1 -1
  8. package/lib/components/Tab/index.js.map +1 -1
  9. package/lib/components/Tab/renderTab.js +1 -7
  10. package/lib/components/Tab/renderTab.js.map +1 -1
  11. package/lib/components/Tab/useTab.js.map +1 -1
  12. package/lib/components/Tab/useTabAnimatedIndicator.js +4 -4
  13. package/lib/components/Tab/useTabAnimatedIndicator.js.map +1 -1
  14. package/lib/components/Tab/useTabStyles.js +4 -6
  15. package/lib/components/Tab/useTabStyles.js.map +1 -1
  16. package/lib/components/TabList/TabList.js.map +1 -1
  17. package/lib/components/TabList/TabList.types.js +1 -1
  18. package/lib/components/TabList/TabList.types.js.map +1 -1
  19. package/lib/components/TabList/TabListContext.js +3 -6
  20. package/lib/components/TabList/TabListContext.js.map +1 -1
  21. package/lib/components/TabList/index.js.map +1 -1
  22. package/lib/components/TabList/renderTabList.js +1 -3
  23. package/lib/components/TabList/renderTabList.js.map +1 -1
  24. package/lib/components/TabList/useTabList.js.map +1 -1
  25. package/lib/components/TabList/useTabListContextValues.js.map +1 -1
  26. package/lib/components/TabList/useTabListStyles.js.map +1 -1
  27. package/lib/index.js.map +1 -1
  28. package/lib-commonjs/Tab.js +5 -4
  29. package/lib-commonjs/Tab.js.map +1 -1
  30. package/lib-commonjs/TabList.js +5 -4
  31. package/lib-commonjs/TabList.js.map +1 -1
  32. package/lib-commonjs/components/Tab/Tab.js +19 -20
  33. package/lib-commonjs/components/Tab/Tab.js.map +1 -1
  34. package/lib-commonjs/components/Tab/Tab.types.js +3 -2
  35. package/lib-commonjs/components/Tab/Tab.types.js.map +1 -1
  36. package/lib-commonjs/components/Tab/index.js +10 -9
  37. package/lib-commonjs/components/Tab/index.js.map +1 -1
  38. package/lib-commonjs/components/Tab/renderTab.js +16 -25
  39. package/lib-commonjs/components/Tab/renderTab.js.map +1 -1
  40. package/lib-commonjs/components/Tab/useTab.js +76 -82
  41. package/lib-commonjs/components/Tab/useTab.js.map +1 -1
  42. package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js +133 -117
  43. package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js.map +1 -1
  44. package/lib-commonjs/components/Tab/useTabStyles.js +751 -396
  45. package/lib-commonjs/components/Tab/useTabStyles.js.map +1 -1
  46. package/lib-commonjs/components/TabList/TabList.js +21 -22
  47. package/lib-commonjs/components/TabList/TabList.js.map +1 -1
  48. package/lib-commonjs/components/TabList/TabList.types.js +5 -2
  49. package/lib-commonjs/components/TabList/TabList.types.js.map +1 -1
  50. package/lib-commonjs/components/TabList/TabListContext.js +34 -28
  51. package/lib-commonjs/components/TabList/TabListContext.js.map +1 -1
  52. package/lib-commonjs/components/TabList/index.js +11 -10
  53. package/lib-commonjs/components/TabList/index.js.map +1 -1
  54. package/lib-commonjs/components/TabList/renderTabList.js +16 -21
  55. package/lib-commonjs/components/TabList/renderTabList.js.map +1 -1
  56. package/lib-commonjs/components/TabList/useTabList.js +73 -84
  57. package/lib-commonjs/components/TabList/useTabList.js.map +1 -1
  58. package/lib-commonjs/components/TabList/useTabListContextValues.js +23 -32
  59. package/lib-commonjs/components/TabList/useTabListContextValues.js.map +1 -1
  60. package/lib-commonjs/components/TabList/useTabListStyles.js +46 -36
  61. package/lib-commonjs/components/TabList/useTabListStyles.js.map +1 -1
  62. package/lib-commonjs/index.js +27 -84
  63. package/lib-commonjs/index.js.map +1 -1
  64. package/package.json +10 -9
  65. package/lib-amd/Tab.js +0 -6
  66. package/lib-amd/Tab.js.map +0 -1
  67. package/lib-amd/TabList.js +0 -6
  68. package/lib-amd/TabList.js.map +0 -1
  69. package/lib-amd/components/Tab/Tab.js +0 -17
  70. package/lib-amd/components/Tab/Tab.js.map +0 -1
  71. package/lib-amd/components/Tab/Tab.types.js +0 -5
  72. package/lib-amd/components/Tab/Tab.types.js.map +0 -1
  73. package/lib-amd/components/Tab/index.js +0 -11
  74. package/lib-amd/components/Tab/index.js.map +0 -1
  75. package/lib-amd/components/Tab/renderTab.js +0 -17
  76. package/lib-amd/components/Tab/renderTab.js.map +0 -1
  77. package/lib-amd/components/Tab/useTab.js +0 -63
  78. package/lib-amd/components/Tab/useTab.js.map +0 -1
  79. package/lib-amd/components/Tab/useTabAnimatedIndicator.js +0 -112
  80. package/lib-amd/components/Tab/useTabAnimatedIndicator.js.map +0 -1
  81. package/lib-amd/components/Tab/useTabStyles.js +0 -380
  82. package/lib-amd/components/Tab/useTabStyles.js.map +0 -1
  83. package/lib-amd/components/TabList/TabList.js +0 -18
  84. package/lib-amd/components/TabList/TabList.js.map +0 -1
  85. package/lib-amd/components/TabList/TabList.types.js +0 -5
  86. package/lib-amd/components/TabList/TabList.types.js.map +0 -1
  87. package/lib-amd/components/TabList/TabListContext.js +0 -37
  88. package/lib-amd/components/TabList/TabListContext.js.map +0 -1
  89. package/lib-amd/components/TabList/index.js +0 -12
  90. package/lib-amd/components/TabList/index.js.map +0 -1
  91. package/lib-amd/components/TabList/renderTabList.js +0 -15
  92. package/lib-amd/components/TabList/renderTabList.js.map +0 -1
  93. package/lib-amd/components/TabList/useTabList.js +0 -74
  94. package/lib-amd/components/TabList/useTabList.js.map +0 -1
  95. package/lib-amd/components/TabList/useTabListContextValues.js +0 -23
  96. package/lib-amd/components/TabList/useTabListContextValues.js.map +0 -1
  97. package/lib-amd/components/TabList/useTabListStyles.js +0 -39
  98. package/lib-amd/components/TabList/useTabListStyles.js.map +0 -1
  99. package/lib-amd/index.js +0 -19
  100. package/lib-amd/index.js.map +0 -1
@@ -1,37 +0,0 @@
1
- define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useTabListContext_unstable = exports.TabListProvider = exports.TabListContext = void 0;
5
- var tabListContextDefaultValue = {
6
- appearance: 'transparent',
7
- reserveSelectedTabSpace: true,
8
- disabled: false,
9
- selectedValue: undefined,
10
- onRegister: function () {
11
- /* noop */
12
- },
13
- onUnregister: function () {
14
- /* noop */
15
- },
16
- onSelect: function () {
17
- /* noop */
18
- },
19
- getRegisteredTabs: function () {
20
- return {
21
- registeredTabs: {},
22
- };
23
- },
24
- size: 'medium',
25
- vertical: false,
26
- };
27
- exports.TabListContext = react_context_selector_1.createContext(undefined);
28
- exports.TabListProvider = exports.TabListContext.Provider;
29
- var useTabListContext_unstable = function (selector) {
30
- return react_context_selector_1.useContextSelector(exports.TabListContext, function (ctx) {
31
- if (ctx === void 0) { ctx = tabListContextDefaultValue; }
32
- return selector(ctx);
33
- });
34
- };
35
- exports.useTabListContext_unstable = useTabListContext_unstable;
36
- });
37
- //# sourceMappingURL=TabListContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabListContext.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;IAIA,IAAM,0BAA0B,GAAwB;QACtD,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;IAEW,QAAA,cAAc,GAAiC,sCAAa,CACvE,SAAS,CACsB,CAAC;IAErB,QAAA,eAAe,GAAG,sBAAc,CAAC,QAAQ,CAAC;IAChD,IAAM,0BAA0B,GAAG,UAAI,QAAiD;QAC7F,OAAA,2CAAkB,CAAC,sBAAc,EAAE,UAAC,GAAgC;YAAhC,oBAAA,EAAA,gCAAgC;YAAK,OAAA,QAAQ,CAAC,GAAG,CAAC;QAAb,CAAa,CAAC;IAAvF,CAAuF,CAAC;IAD7E,QAAA,0BAA0B,8BACmD","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: 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\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(\n undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"]}
@@ -1,12 +0,0 @@
1
- define(["require", "exports", "tslib", "./TabList", "./TabList.types", "./TabListContext", "./renderTabList", "./useTabList", "./useTabListContextValues", "./useTabListStyles"], function (require, exports, tslib_1, TabList_1, TabList_types_1, TabListContext_1, renderTabList_1, useTabList_1, useTabListContextValues_1, useTabListStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(TabList_1, exports);
5
- tslib_1.__exportStar(TabList_types_1, exports);
6
- tslib_1.__exportStar(TabListContext_1, exports);
7
- tslib_1.__exportStar(renderTabList_1, exports);
8
- tslib_1.__exportStar(useTabList_1, exports);
9
- tslib_1.__exportStar(useTabListContextValues_1, exports);
10
- tslib_1.__exportStar(useTabListStyles_1, exports);
11
- });
12
- //# sourceMappingURL=index.js.map
@@ -1 +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,gDAAiC;IACjC,+CAAgC;IAChC,4CAA6B;IAC7B,yDAA0C;IAC1C,kDAAmC","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './TabListContext';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListContextValues';\nexport * from './useTabListStyles';\n"]}
@@ -1,15 +0,0 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./TabListContext"], function (require, exports, tslib_1, React, react_utilities_1, TabListContext_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.renderTabList_unstable = void 0;
5
- /**
6
- * Render the final JSX of TabList
7
- */
8
- var renderTabList_unstable = function (state, contextValues) {
9
- var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
10
- return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
11
- React.createElement(TabListContext_1.TabListProvider, { value: contextValues.tabList }, state.root.children)));
12
- };
13
- exports.renderTabList_unstable = renderTabList_unstable;
14
- });
15
- //# sourceMappingURL=renderTabList.js.map
@@ -1 +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,gCAAe,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO,IAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAmB,CAC3E,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 { TabListProvider } 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 <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n </slots.root>\n );\n};\n"]}
@@ -1,74 +0,0 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react-tabster", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_tabster_1, react_utilities_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useTabList_unstable = void 0;
5
- /**
6
- * Create the state required to render TabList.
7
- *
8
- * The returned state can be modified with hooks such as useTabListStyles_unstable,
9
- * before being passed to renderTabList_unstable.
10
- *
11
- * @param props - props from this instance of TabList
12
- * @param ref - reference to root HTMLElement of TabList
13
- */
14
- var useTabList_unstable = function (props, ref) {
15
- 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;
16
- var innerRef = React.useRef(null);
17
- var focusAttributes = react_tabster_1.useArrowNavigationGroup({
18
- circular: true,
19
- axis: vertical ? 'vertical' : 'horizontal',
20
- memorizeCurrent: true,
21
- });
22
- var _f = react_utilities_1.useControllableState({
23
- state: props.selectedValue,
24
- defaultState: props.defaultSelectedValue,
25
- initialState: undefined,
26
- }), selectedValue = _f[0], setSelectedValue = _f[1];
27
- // considered usePrevious, but it is sensitive to re-renders
28
- // this could cause the previous to move to current in the case where the tab list re-renders.
29
- // these refs avoid getRegisteredTabs changing when selectedValue changes and causing
30
- // renders for tabs that have not changed.
31
- var currentSelectedValue = React.useRef(undefined);
32
- var previousSelectedValue = React.useRef(undefined);
33
- React.useEffect(function () {
34
- previousSelectedValue.current = currentSelectedValue.current;
35
- currentSelectedValue.current = selectedValue;
36
- }, [selectedValue]);
37
- var onSelect = react_utilities_1.useEventCallback(function (event, data) {
38
- setSelectedValue(data.value);
39
- onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
40
- });
41
- var registeredTabs = React.useRef({});
42
- var onRegister = react_utilities_1.useEventCallback(function (data) {
43
- registeredTabs.current[JSON.stringify(data.value)] = data;
44
- });
45
- var onUnregister = react_utilities_1.useEventCallback(function (data) {
46
- delete registeredTabs.current[JSON.stringify(data.value)];
47
- });
48
- var getRegisteredTabs = React.useCallback(function () {
49
- return {
50
- selectedValue: currentSelectedValue.current,
51
- previousSelectedValue: previousSelectedValue.current,
52
- registeredTabs: registeredTabs.current,
53
- };
54
- }, []);
55
- return {
56
- components: {
57
- root: 'div',
58
- },
59
- root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, innerRef), role: 'tablist' }, focusAttributes), props)),
60
- appearance: appearance,
61
- reserveSelectedTabSpace: reserveSelectedTabSpace,
62
- disabled: disabled,
63
- selectedValue: selectedValue,
64
- size: size,
65
- vertical: vertical,
66
- onRegister: onRegister,
67
- onUnregister: onUnregister,
68
- onSelect: onSelect,
69
- getRegisteredTabs: getRegisteredTabs,
70
- };
71
- };
72
- exports.useTabList_unstable = useTabList_unstable;
73
- });
74
- //# sourceMappingURL=useTabList.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/useTabList.ts"],"names":[],"mappings":";;;;IAWA;;;;;;;;OAQG;IACI,IAAM,mBAAmB,GAAG,UAAC,KAAmB,EAAE,GAA2B;QAEhF,IAAA,KAME,KAAK,WANmB,EAA1B,UAAU,mBAAG,aAAa,KAAA,EAC1B,KAKE,KAAK,wBALuB,EAA9B,uBAAuB,mBAAG,IAAI,KAAA,EAC9B,KAIE,KAAK,SAJS,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,WAAW,GAGT,KAAK,YAHI,EACX,KAEE,KAAK,KAFQ,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,KACE,KAAK,SADS,EAAhB,QAAQ,mBAAG,KAAK,KAAA,CACR;QAEV,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;QAEjD,IAAM,eAAe,GAAG,uCAAuB,CAAC;YAC9C,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;YAC1C,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC;QAEG,IAAA,KAAoC,sCAAoB,CAAC;YAC7D,KAAK,EAAE,KAAK,CAAC,aAAa;YAC1B,YAAY,EAAE,KAAK,CAAC,oBAAoB;YACxC,YAAY,EAAE,SAAS;SACxB,CAAC,EAJK,aAAa,QAAA,EAAE,gBAAgB,QAIpC,CAAC;QAEH,4DAA4D;QAC5D,8FAA8F;QAC9F,qFAAqF;QACrF,0CAA0C;QAC1C,IAAM,oBAAoB,GAAG,KAAK,CAAC,MAAM,CAAuB,SAAS,CAAC,CAAC;QAC3E,IAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAuB,SAAS,CAAC,CAAC;QAE5E,KAAK,CAAC,SAAS,CAAC;YACd,qBAAqB,CAAC,OAAO,GAAG,oBAAoB,CAAC,OAAO,CAAC;YAC7D,oBAAoB,CAAC,OAAO,GAAG,aAAa,CAAC;QAC/C,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;QAEpB,IAAM,QAAQ,GAAG,kCAAgB,CAAC,UAAC,KAAqB,EAAE,IAAmB;YAC3E,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC7B,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,KAAK,EAAE,IAAI,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEH,IAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAkC,EAAE,CAAC,CAAC;QAEzE,IAAM,UAAU,GAAG,kCAAgB,CAAC,UAAC,IAAqB;YACxD,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;QAC5D,CAAC,CAAC,CAAC;QAEH,IAAM,YAAY,GAAG,kCAAgB,CAAC,UAAC,IAAqB;YAC1D,OAAO,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;QAEH,IAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;YAC1C,OAAO;gBACL,aAAa,EAAE,oBAAoB,CAAC,OAAO;gBAC3C,qBAAqB,EAAE,qBAAqB,CAAC,OAAO;gBACpD,cAAc,EAAE,cAAc,CAAC,OAAO;aACvC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YACD,IAAI,EAAE,uCAAqB,CAAC,KAAK,sCAC/B,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,QAAQ,CAAC,EACjC,IAAI,EAAE,SAAS,IACZ,eAAe,GACf,KAAK,EACR;YACF,UAAU,YAAA;YACV,uBAAuB,yBAAA;YACvB,QAAQ,UAAA;YACR,aAAa,eAAA;YACb,IAAI,MAAA;YACJ,QAAQ,UAAA;YACR,UAAU,YAAA;YACV,YAAY,cAAA;YACZ,QAAQ,UAAA;YACR,iBAAiB,mBAAA;SAClB,CAAC;IACJ,CAAC,CAAC;IAhFW,QAAA,mBAAmB,uBAgF9B","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"]}
@@ -1,23 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useTabListContextValues_unstable = void 0;
5
- function useTabListContextValues_unstable(state) {
6
- 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;
7
- var tabList = {
8
- appearance: appearance,
9
- reserveSelectedTabSpace: reserveSelectedTabSpace,
10
- disabled: disabled,
11
- selectedValue: selectedKey,
12
- onSelect: onSelect,
13
- onRegister: onRegister,
14
- onUnregister: onUnregister,
15
- getRegisteredTabs: getRegisteredTabs,
16
- size: size,
17
- vertical: vertical,
18
- };
19
- return { tabList: tabList };
20
- }
21
- exports.useTabListContextValues_unstable = useTabListContextValues_unstable;
22
- });
23
- //# sourceMappingURL=useTabListContextValues.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTabListContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;IAEA,SAAgB,gCAAgC,CAAC,KAAmB;QAEhE,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,4EA4BC","sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues_unstable(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"]}
@@ -1,39 +0,0 @@
1
- define(["require", "exports", "@griffel/react"], function (require, exports, react_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useTabListStyles_unstable = exports.tabListClassNames = void 0;
5
- exports.tabListClassNames = {
6
- root: 'fui-TabList',
7
- };
8
- /**
9
- * Styles for the root slot
10
- */
11
- var useStyles = react_1.makeStyles({
12
- root: {
13
- display: 'flex',
14
- flexDirection: 'row',
15
- flexShrink: 0,
16
- flexWrap: 'nowrap',
17
- position: 'relative',
18
- },
19
- horizontal: {
20
- alignItems: 'stretch',
21
- flexDirection: 'row',
22
- },
23
- vertical: {
24
- alignItems: 'stretch',
25
- flexDirection: 'column',
26
- },
27
- });
28
- /**
29
- * Apply styling to the TabList slots based on the state
30
- */
31
- var useTabListStyles_unstable = function (state) {
32
- var vertical = state.vertical;
33
- var styles = useStyles();
34
- state.root.className = react_1.mergeClasses(exports.tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, state.root.className);
35
- return state;
36
- };
37
- exports.useTabListStyles_unstable = useTabListStyles_unstable;
38
- });
39
- //# sourceMappingURL=useTabListStyles.js.map
@@ -1 +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 DELETED
@@ -1,19 +0,0 @@
1
- define(["require", "exports", "./Tab", "./TabList"], function (require, exports, Tab_1, TabList_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useTabList_unstable = exports.useTabListStyles_unstable = exports.useTabListContextValues_unstable = exports.useTabListContext_unstable = exports.tabListClassNames = exports.TabListProvider = exports.TabList = exports.renderTabList_unstable = exports.useTab_unstable = exports.useTabStyles_unstable = exports.tabClassNames = exports.Tab = exports.renderTab_unstable = void 0;
5
- Object.defineProperty(exports, "renderTab_unstable", { enumerable: true, get: function () { return Tab_1.renderTab_unstable; } });
6
- Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });
7
- Object.defineProperty(exports, "tabClassNames", { enumerable: true, get: function () { return Tab_1.tabClassNames; } });
8
- Object.defineProperty(exports, "useTabStyles_unstable", { enumerable: true, get: function () { return Tab_1.useTabStyles_unstable; } });
9
- Object.defineProperty(exports, "useTab_unstable", { enumerable: true, get: function () { return Tab_1.useTab_unstable; } });
10
- Object.defineProperty(exports, "renderTabList_unstable", { enumerable: true, get: function () { return TabList_1.renderTabList_unstable; } });
11
- Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return TabList_1.TabList; } });
12
- Object.defineProperty(exports, "TabListProvider", { enumerable: true, get: function () { return TabList_1.TabListProvider; } });
13
- Object.defineProperty(exports, "tabListClassNames", { enumerable: true, get: function () { return TabList_1.tabListClassNames; } });
14
- Object.defineProperty(exports, "useTabListContext_unstable", { enumerable: true, get: function () { return TabList_1.useTabListContext_unstable; } });
15
- Object.defineProperty(exports, "useTabListContextValues_unstable", { enumerable: true, get: function () { return TabList_1.useTabListContextValues_unstable; } });
16
- Object.defineProperty(exports, "useTabListStyles_unstable", { enumerable: true, get: function () { return TabList_1.useTabListStyles_unstable; } });
17
- Object.defineProperty(exports, "useTabList_unstable", { enumerable: true, get: function () { return TabList_1.useTabList_unstable; } });
18
- });
19
- //# sourceMappingURL=index.js.map
@@ -1 +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,0GAAA,eAAe,OAAA;IACf,4GAAA,iBAAiB,OAAA;IACjB,qHAAA,0BAA0B,OAAA;IAC1B,2HAAA,gCAAgC,OAAA;IAChC,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 TabListProvider,\n tabListClassNames,\n useTabListContext_unstable,\n useTabListContextValues_unstable,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"]}