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

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 (224) hide show
  1. package/CHANGELOG.json +259 -1810
  2. package/CHANGELOG.md +74 -733
  3. package/README.md +0 -17
  4. package/Spec.md +433 -0
  5. package/dist/index.d.ts +243 -0
  6. package/lib/Tab.d.ts +1 -0
  7. package/lib/Tab.js +2 -0
  8. package/lib/Tab.js.map +1 -0
  9. package/lib/TabList.d.ts +1 -0
  10. package/lib/TabList.js +2 -0
  11. package/lib/TabList.js.map +1 -0
  12. package/lib/components/Tab/Tab.d.ts +6 -0
  13. package/lib/components/Tab/Tab.js +15 -0
  14. package/lib/components/Tab/Tab.js.map +1 -0
  15. package/lib/components/Tab/Tab.types.d.ts +61 -0
  16. package/lib/components/Tab/Tab.types.js +2 -0
  17. package/lib/components/Tab/Tab.types.js.map +1 -0
  18. package/lib/components/Tab/index.d.ts +6 -0
  19. package/lib/components/Tab/index.js +7 -0
  20. package/lib/components/Tab/index.js.map +1 -0
  21. package/lib/components/Tab/renderTab.d.ts +5 -0
  22. package/lib/components/Tab/renderTab.js +17 -0
  23. package/lib/components/Tab/renderTab.js.map +1 -0
  24. package/lib/components/Tab/useTab.d.ts +12 -0
  25. package/lib/components/Tab/useTab.js +81 -0
  26. package/lib/components/Tab/useTab.js.map +1 -0
  27. package/lib/components/Tab/useTabAnimatedIndicator.d.ts +5 -0
  28. package/lib/components/Tab/useTabAnimatedIndicator.js +134 -0
  29. package/lib/components/Tab/useTabAnimatedIndicator.js.map +1 -0
  30. package/lib/components/Tab/useTabStyles.d.ts +8 -0
  31. package/lib/components/Tab/useTabStyles.js +403 -0
  32. package/lib/components/Tab/useTabStyles.js.map +1 -0
  33. package/lib/components/TabList/TabList.d.ts +6 -0
  34. package/lib/components/TabList/TabList.js +17 -0
  35. package/lib/components/TabList/TabList.js.map +1 -0
  36. package/lib/components/TabList/TabList.types.d.ts +104 -0
  37. package/lib/components/TabList/TabList.types.js +2 -0
  38. package/lib/components/TabList/TabList.types.js.map +1 -0
  39. package/lib/components/TabList/TabListContext.d.ts +3 -0
  40. package/lib/components/TabList/TabListContext.js +23 -0
  41. package/lib/components/TabList/TabListContext.js.map +1 -0
  42. package/lib/components/TabList/index.d.ts +5 -0
  43. package/lib/components/TabList/index.js +6 -0
  44. package/lib/components/TabList/index.js.map +1 -0
  45. package/lib/components/TabList/renderTabList.d.ts +5 -0
  46. package/lib/components/TabList/renderTabList.js +18 -0
  47. package/lib/components/TabList/renderTabList.js.map +1 -0
  48. package/lib/components/TabList/useTabList.d.ts +12 -0
  49. package/lib/components/TabList/useTabList.js +81 -0
  50. package/lib/components/TabList/useTabList.js.map +1 -0
  51. package/lib/components/TabList/useTabListContextValues.d.ts +2 -0
  52. package/lib/components/TabList/useTabListContextValues.js +28 -0
  53. package/lib/components/TabList/useTabListContextValues.js.map +1 -0
  54. package/lib/components/TabList/useTabListStyles.d.ts +8 -0
  55. package/lib/components/TabList/useTabListStyles.js +45 -0
  56. package/lib/components/TabList/useTabListStyles.js.map +1 -0
  57. package/lib/index.d.ts +4 -1
  58. package/lib/index.js +2 -1
  59. package/lib/index.js.map +1 -1
  60. package/lib/tsdoc-metadata.json +1 -1
  61. package/lib-commonjs/Tab.d.ts +1 -0
  62. package/lib-commonjs/Tab.js +10 -0
  63. package/lib-commonjs/Tab.js.map +1 -0
  64. package/lib-commonjs/TabList.d.ts +1 -0
  65. package/lib-commonjs/TabList.js +10 -0
  66. package/lib-commonjs/TabList.js.map +1 -0
  67. package/lib-commonjs/components/Tab/Tab.d.ts +6 -0
  68. package/lib-commonjs/components/Tab/Tab.js +26 -0
  69. package/lib-commonjs/components/Tab/Tab.js.map +1 -0
  70. package/lib-commonjs/components/Tab/Tab.types.d.ts +61 -0
  71. package/lib-commonjs/components/Tab/Tab.types.js +6 -0
  72. package/lib-commonjs/components/Tab/Tab.types.js.map +1 -0
  73. package/lib-commonjs/components/Tab/index.d.ts +6 -0
  74. package/lib-commonjs/components/Tab/index.js +20 -0
  75. package/lib-commonjs/components/Tab/index.js.map +1 -0
  76. package/lib-commonjs/components/Tab/renderTab.d.ts +5 -0
  77. package/lib-commonjs/components/Tab/renderTab.js +28 -0
  78. package/lib-commonjs/components/Tab/renderTab.js.map +1 -0
  79. package/lib-commonjs/components/Tab/useTab.d.ts +12 -0
  80. package/lib-commonjs/components/Tab/useTab.js +94 -0
  81. package/lib-commonjs/components/Tab/useTab.js.map +1 -0
  82. package/lib-commonjs/components/Tab/useTabAnimatedIndicator.d.ts +5 -0
  83. package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js +148 -0
  84. package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js.map +1 -0
  85. package/lib-commonjs/components/Tab/useTabStyles.d.ts +8 -0
  86. package/lib-commonjs/components/Tab/useTabStyles.js +416 -0
  87. package/lib-commonjs/components/Tab/useTabStyles.js.map +1 -0
  88. package/lib-commonjs/components/TabList/TabList.d.ts +6 -0
  89. package/lib-commonjs/components/TabList/TabList.js +29 -0
  90. package/lib-commonjs/components/TabList/TabList.js.map +1 -0
  91. package/lib-commonjs/components/TabList/TabList.types.d.ts +104 -0
  92. package/lib-commonjs/components/TabList/TabList.types.js +6 -0
  93. package/lib-commonjs/components/TabList/TabList.types.js.map +1 -0
  94. package/lib-commonjs/components/TabList/TabListContext.d.ts +3 -0
  95. package/lib-commonjs/components/TabList/TabListContext.js +31 -0
  96. package/lib-commonjs/components/TabList/TabListContext.js.map +1 -0
  97. package/lib-commonjs/components/TabList/index.d.ts +5 -0
  98. package/lib-commonjs/components/TabList/index.js +18 -0
  99. package/lib-commonjs/components/TabList/index.js.map +1 -0
  100. package/lib-commonjs/components/TabList/renderTabList.d.ts +5 -0
  101. package/lib-commonjs/components/TabList/renderTabList.js +30 -0
  102. package/lib-commonjs/components/TabList/renderTabList.js.map +1 -0
  103. package/lib-commonjs/components/TabList/useTabList.d.ts +12 -0
  104. package/lib-commonjs/components/TabList/useTabList.js +93 -0
  105. package/lib-commonjs/components/TabList/useTabList.js.map +1 -0
  106. package/lib-commonjs/components/TabList/useTabListContextValues.d.ts +2 -0
  107. package/lib-commonjs/components/TabList/useTabListContextValues.js +37 -0
  108. package/lib-commonjs/components/TabList/useTabListContextValues.js.map +1 -0
  109. package/lib-commonjs/components/TabList/useTabListStyles.d.ts +8 -0
  110. package/lib-commonjs/components/TabList/useTabListStyles.js +55 -0
  111. package/lib-commonjs/components/TabList/useTabListStyles.js.map +1 -0
  112. package/lib-commonjs/index.d.ts +4 -1
  113. package/lib-commonjs/index.js +83 -3
  114. package/lib-commonjs/index.js.map +1 -1
  115. package/package.json +25 -21
  116. package/config/api-extractor.json +0 -3
  117. package/config/tests.js +0 -14
  118. package/dist/react-tabs.d.ts +0 -197
  119. package/etc/react-tabs.api.md +0 -104
  120. package/just.config.ts +0 -3
  121. package/lib/Tabs.d.ts +0 -1
  122. package/lib/Tabs.js +0 -2
  123. package/lib/Tabs.js.map +0 -1
  124. package/lib/common/isConformant.d.ts +0 -4
  125. package/lib/common/isConformant.js +0 -9
  126. package/lib/common/isConformant.js.map +0 -1
  127. package/lib/components/Tabs/TabItem.d.ts +0 -6
  128. package/lib/components/Tabs/TabItem.js +0 -18
  129. package/lib/components/Tabs/TabItem.js.map +0 -1
  130. package/lib/components/Tabs/TabItem.types.d.ts +0 -61
  131. package/lib/components/Tabs/TabItem.types.js +0 -2
  132. package/lib/components/Tabs/TabItem.types.js.map +0 -1
  133. package/lib/components/Tabs/Tabs.base.d.ts +0 -3
  134. package/lib/components/Tabs/Tabs.base.js +0 -179
  135. package/lib/components/Tabs/Tabs.base.js.map +0 -1
  136. package/lib/components/Tabs/Tabs.d.ts +0 -8
  137. package/lib/components/Tabs/Tabs.js +0 -12
  138. package/lib/components/Tabs/Tabs.js.map +0 -1
  139. package/lib/components/Tabs/Tabs.styles.d.ts +0 -2
  140. package/lib/components/Tabs/Tabs.styles.js +0 -264
  141. package/lib/components/Tabs/Tabs.styles.js.map +0 -1
  142. package/lib/components/Tabs/Tabs.types.d.ts +0 -113
  143. package/lib/components/Tabs/Tabs.types.js +0 -2
  144. package/lib/components/Tabs/Tabs.types.js.map +0 -1
  145. package/lib/components/Tabs/index.d.ts +0 -5
  146. package/lib/components/Tabs/index.js +0 -6
  147. package/lib/components/Tabs/index.js.map +0 -1
  148. package/lib/utilities/observeResize.d.ts +0 -21
  149. package/lib/utilities/observeResize.js +0 -46
  150. package/lib/utilities/observeResize.js.map +0 -1
  151. package/lib/utilities/useOverflow.d.ts +0 -45
  152. package/lib/utilities/useOverflow.js +0 -126
  153. package/lib/utilities/useOverflow.js.map +0 -1
  154. package/lib-amd/Tabs.d.ts +0 -1
  155. package/lib-amd/Tabs.js +0 -6
  156. package/lib-amd/Tabs.js.map +0 -1
  157. package/lib-amd/common/isConformant.d.ts +0 -4
  158. package/lib-amd/common/isConformant.js +0 -14
  159. package/lib-amd/common/isConformant.js.map +0 -1
  160. package/lib-amd/components/Tabs/TabItem.d.ts +0 -6
  161. package/lib-amd/components/Tabs/TabItem.js +0 -20
  162. package/lib-amd/components/Tabs/TabItem.js.map +0 -1
  163. package/lib-amd/components/Tabs/TabItem.types.d.ts +0 -61
  164. package/lib-amd/components/Tabs/TabItem.types.js +0 -5
  165. package/lib-amd/components/Tabs/TabItem.types.js.map +0 -1
  166. package/lib-amd/components/Tabs/Tabs.base.d.ts +0 -3
  167. package/lib-amd/components/Tabs/Tabs.base.js +0 -176
  168. package/lib-amd/components/Tabs/Tabs.base.js.map +0 -1
  169. package/lib-amd/components/Tabs/Tabs.d.ts +0 -8
  170. package/lib-amd/components/Tabs/Tabs.js +0 -14
  171. package/lib-amd/components/Tabs/Tabs.js.map +0 -1
  172. package/lib-amd/components/Tabs/Tabs.styles.d.ts +0 -2
  173. package/lib-amd/components/Tabs/Tabs.styles.js +0 -267
  174. package/lib-amd/components/Tabs/Tabs.styles.js.map +0 -1
  175. package/lib-amd/components/Tabs/Tabs.types.d.ts +0 -113
  176. package/lib-amd/components/Tabs/Tabs.types.js +0 -5
  177. package/lib-amd/components/Tabs/Tabs.types.js.map +0 -1
  178. package/lib-amd/components/Tabs/index.d.ts +0 -5
  179. package/lib-amd/components/Tabs/index.js +0 -11
  180. package/lib-amd/components/Tabs/index.js.map +0 -1
  181. package/lib-amd/index.d.ts +0 -1
  182. package/lib-amd/index.js +0 -6
  183. package/lib-amd/index.js.map +0 -1
  184. package/lib-amd/utilities/observeResize.d.ts +0 -21
  185. package/lib-amd/utilities/observeResize.js +0 -51
  186. package/lib-amd/utilities/observeResize.js.map +0 -1
  187. package/lib-amd/utilities/useOverflow.d.ts +0 -45
  188. package/lib-amd/utilities/useOverflow.js +0 -128
  189. package/lib-amd/utilities/useOverflow.js.map +0 -1
  190. package/lib-commonjs/Tabs.d.ts +0 -1
  191. package/lib-commonjs/Tabs.js +0 -5
  192. package/lib-commonjs/Tabs.js.map +0 -1
  193. package/lib-commonjs/common/isConformant.d.ts +0 -4
  194. package/lib-commonjs/common/isConformant.js +0 -13
  195. package/lib-commonjs/common/isConformant.js.map +0 -1
  196. package/lib-commonjs/components/Tabs/TabItem.d.ts +0 -6
  197. package/lib-commonjs/components/Tabs/TabItem.js +0 -21
  198. package/lib-commonjs/components/Tabs/TabItem.js.map +0 -1
  199. package/lib-commonjs/components/Tabs/TabItem.types.d.ts +0 -61
  200. package/lib-commonjs/components/Tabs/TabItem.types.js +0 -3
  201. package/lib-commonjs/components/Tabs/TabItem.types.js.map +0 -1
  202. package/lib-commonjs/components/Tabs/Tabs.base.d.ts +0 -3
  203. package/lib-commonjs/components/Tabs/Tabs.base.js +0 -182
  204. package/lib-commonjs/components/Tabs/Tabs.base.js.map +0 -1
  205. package/lib-commonjs/components/Tabs/Tabs.d.ts +0 -8
  206. package/lib-commonjs/components/Tabs/Tabs.js +0 -15
  207. package/lib-commonjs/components/Tabs/Tabs.js.map +0 -1
  208. package/lib-commonjs/components/Tabs/Tabs.styles.d.ts +0 -2
  209. package/lib-commonjs/components/Tabs/Tabs.styles.js +0 -268
  210. package/lib-commonjs/components/Tabs/Tabs.styles.js.map +0 -1
  211. package/lib-commonjs/components/Tabs/Tabs.types.d.ts +0 -113
  212. package/lib-commonjs/components/Tabs/Tabs.types.js +0 -3
  213. package/lib-commonjs/components/Tabs/Tabs.types.js.map +0 -1
  214. package/lib-commonjs/components/Tabs/index.d.ts +0 -5
  215. package/lib-commonjs/components/Tabs/index.js +0 -11
  216. package/lib-commonjs/components/Tabs/index.js.map +0 -1
  217. package/lib-commonjs/utilities/observeResize.d.ts +0 -21
  218. package/lib-commonjs/utilities/observeResize.js +0 -50
  219. package/lib-commonjs/utilities/observeResize.js.map +0 -1
  220. package/lib-commonjs/utilities/useOverflow.d.ts +0 -45
  221. package/lib-commonjs/utilities/useOverflow.js +0 -130
  222. package/lib-commonjs/utilities/useOverflow.js.map +0 -1
  223. package/src/components/Tabs/TabItem.types.ts +0 -69
  224. package/src/components/Tabs/Tabs.types.ts +0 -131
@@ -1,5 +1,85 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Tabs"), exports);
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useTabList_unstable = exports.useTabListStyles_unstable = exports.tabListClassNames = exports.tabListClassName = exports.TabList = exports.renderTabList_unstable = exports.useTab_unstable = exports.useTabStyles_unstable = exports.tabClassNames = exports.tabClassName = exports.Tab = exports.renderTab_unstable = void 0;
7
+
8
+ var Tab_1 = /*#__PURE__*/require("./Tab");
9
+
10
+ Object.defineProperty(exports, "renderTab_unstable", {
11
+ enumerable: true,
12
+ get: function () {
13
+ return Tab_1.renderTab_unstable;
14
+ }
15
+ });
16
+ Object.defineProperty(exports, "Tab", {
17
+ enumerable: true,
18
+ get: function () {
19
+ return Tab_1.Tab;
20
+ }
21
+ });
22
+ Object.defineProperty(exports, "tabClassName", {
23
+ enumerable: true,
24
+ get: function () {
25
+ return Tab_1.tabClassName;
26
+ }
27
+ });
28
+ Object.defineProperty(exports, "tabClassNames", {
29
+ enumerable: true,
30
+ get: function () {
31
+ return Tab_1.tabClassNames;
32
+ }
33
+ });
34
+ Object.defineProperty(exports, "useTabStyles_unstable", {
35
+ enumerable: true,
36
+ get: function () {
37
+ return Tab_1.useTabStyles_unstable;
38
+ }
39
+ });
40
+ Object.defineProperty(exports, "useTab_unstable", {
41
+ enumerable: true,
42
+ get: function () {
43
+ return Tab_1.useTab_unstable;
44
+ }
45
+ });
46
+
47
+ var TabList_1 = /*#__PURE__*/require("./TabList");
48
+
49
+ Object.defineProperty(exports, "renderTabList_unstable", {
50
+ enumerable: true,
51
+ get: function () {
52
+ return TabList_1.renderTabList_unstable;
53
+ }
54
+ });
55
+ Object.defineProperty(exports, "TabList", {
56
+ enumerable: true,
57
+ get: function () {
58
+ return TabList_1.TabList;
59
+ }
60
+ });
61
+ Object.defineProperty(exports, "tabListClassName", {
62
+ enumerable: true,
63
+ get: function () {
64
+ return TabList_1.tabListClassName;
65
+ }
66
+ });
67
+ Object.defineProperty(exports, "tabListClassNames", {
68
+ enumerable: true,
69
+ get: function () {
70
+ return TabList_1.tabListClassNames;
71
+ }
72
+ });
73
+ Object.defineProperty(exports, "useTabListStyles_unstable", {
74
+ enumerable: true,
75
+ get: function () {
76
+ return TabList_1.useTabListStyles_unstable;
77
+ }
78
+ });
79
+ Object.defineProperty(exports, "useTabList_unstable", {
80
+ enumerable: true,
81
+ get: function () {
82
+ return TabList_1.useTabList_unstable;
83
+ }
84
+ });
5
85
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,iDAAuB","sourcesContent":["export * from './Tabs';\n"]}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,KAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,KAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,KAAA,CAAA,GAAA;AAAG;AAAH,CAAA;AAAK,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,KAAA,CAAA,YAAA;AAAY;AAAZ,CAAA;AAAc,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,KAAA,CAAA,aAAA;AAAa;AAAb,CAAA;AAAe,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,KAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AAAuB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,KAAA,CAAA,eAAA;AAAe;AAAf,CAAA;;AAatF,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,OAAA;AAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,SAAA,CAAA,mBAAA;AAAmB;AAAnB,CAAA","sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassName, 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 tabListClassName,\n tabListClassNames,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fluentui/react-tabs",
3
- "version": "1.0.0-beta.99",
4
- "description": "Fluent UI React Tabs component",
3
+ "version": "9.0.0-beta.12",
4
+ "description": "Fluent UI React tabs components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
7
  "typings": "lib/index.d.ts",
@@ -17,29 +17,26 @@
17
17
  "code-style": "just-scripts code-style",
18
18
  "just": "just-scripts",
19
19
  "lint": "just-scripts lint",
20
- "start": "just-scripts dev:storybook",
21
- "start-test": "just-scripts jest-watch",
22
- "test": "just-scripts test",
23
- "update-snapshots": "just-scripts jest -u"
20
+ "start": "yarn storybook",
21
+ "test": "jest --passWithNoTests",
22
+ "docs": "api-extractor run --config=config/api-extractor.local.json --local",
23
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-tabs/src && yarn docs",
24
+ "storybook": "node ../../../scripts/storybook/runner",
25
+ "type-check": "tsc -b tsconfig.json"
24
26
  },
25
27
  "devDependencies": {
26
- "@fluentui/eslint-plugin": "^1.3.0",
27
- "@fluentui/react-conformance": "^0.4.0",
28
- "@fluentui/scripts": "^1.0.0",
29
- "@types/enzyme": "3.10.3",
30
- "@types/enzyme-adapter-react-16": "1.0.3",
31
- "@types/react": "16.9.42",
32
- "@types/react-dom": "16.9.10",
33
- "@types/react-test-renderer": "^16.0.0",
34
- "enzyme": "~3.10.0",
35
- "react": "16.8.6",
36
- "react-dom": "16.8.6"
28
+ "@fluentui/eslint-plugin": "*",
29
+ "@fluentui/react-conformance": "*",
30
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.5",
31
+ "@fluentui/react-context-selector": "9.0.0-rc.8",
32
+ "@fluentui/scripts": "^1.0.0"
37
33
  },
38
34
  "dependencies": {
39
- "@fluentui/react": "^8.14.12",
40
- "@fluentui/react-hooks": "^8.2.1",
41
- "@fluentui/style-utilities": "^8.1.1",
42
- "@fluentui/utilities": "^8.1.1",
35
+ "@griffel/react": "1.0.3",
36
+ "@fluentui/react-context-selector": "9.0.0-rc.8",
37
+ "@fluentui/react-tabster": "9.0.0-rc.9",
38
+ "@fluentui/react-theme": "9.0.0-rc.7",
39
+ "@fluentui/react-utilities": "9.0.0-rc.8",
43
40
  "tslib": "^2.1.0"
44
41
  },
45
42
  "peerDependencies": {
@@ -55,5 +52,12 @@
55
52
  "minor",
56
53
  "patch"
57
54
  ]
55
+ },
56
+ "exports": {
57
+ ".": {
58
+ "types": "./lib/index.d.ts",
59
+ "import": "./lib/index.js",
60
+ "require": "./lib-commonjs/index.js"
61
+ }
58
62
  }
59
63
  }
@@ -1,3 +0,0 @@
1
- {
2
- "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json"
3
- }
package/config/tests.js DELETED
@@ -1,14 +0,0 @@
1
- /** Jest test setup file. */
2
-
3
- const { configure } = require('enzyme');
4
- const { initializeIcons } = require('@fluentui/font-icons-mdl2');
5
- const Adapter = require('enzyme-adapter-react-16');
6
- const { resetIds } = require('@fluentui/utilities');
7
-
8
- // Initialize icons.
9
- initializeIcons('');
10
-
11
- // Configure enzyme.
12
- configure({ adapter: new Adapter() });
13
-
14
- resetIds();
@@ -1,197 +0,0 @@
1
- import { IButtonProps } from '@fluentui/react/lib/Button';
2
- import { IKeytipProps } from '@fluentui/react';
3
- import { IRefObject } from '@fluentui/utilities';
4
- import { IRenderFunction } from '@fluentui/utilities';
5
- import { IStyle } from '@fluentui/style-utilities';
6
- import { IStyleFunctionOrObject } from '@fluentui/utilities';
7
- import { ITheme } from '@fluentui/style-utilities';
8
- import * as React_2 from 'react';
9
-
10
- /**
11
- * {@docCategory Tabs}
12
- * Display mode for the tabs
13
- */
14
- export declare type TabFormatType = 'links' | 'tabs';
15
-
16
- export declare class TabItem extends React_2.Component<TabItemProps, {}> {
17
- constructor(props: TabItemProps);
18
- render(): JSX.Element;
19
- }
20
-
21
- /**
22
- * {@docCategory Tabs}
23
- */
24
- export declare interface TabItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
25
- /**
26
- * Gets the component ref.
27
- */
28
- componentRef?: IRefObject<{}>;
29
- /**
30
- * The text displayed of each tab.
31
- */
32
- headerText?: string;
33
- /**
34
- * Props for the header command button. This provides a way to pass in native props, such as data-* and aria-*,
35
- * for each tab element.
36
- */
37
- headerButtonProps?: IButtonProps | {
38
- [key: string]: string | number | boolean;
39
- };
40
- /**
41
- * An required key to uniquely identify a tab item.
42
- *
43
- * Note: The 'key' from react props cannot be used inside component.
44
- */
45
- itemKey?: string;
46
- /**
47
- * The aria label of each tab which will read by screen reader instead of headerText.
48
- *
49
- * Note that unless you have compelling requirements you should not override aria-label.
50
- */
51
- ariaLabel?: string;
52
- /**
53
- * Defines an optional item count displayed in parentheses just after the `headerText`.
54
- *
55
- * Examples: completed (4), Unread (99+)
56
- */
57
- itemCount?: number | string;
58
- /**
59
- * An optional icon to show next to the tab.
60
- */
61
- itemIcon?: string;
62
- /**
63
- * Optional custom renderer for the tab
64
- */
65
- onRenderTab?: IRenderFunction<TabItemProps>;
66
- /**
67
- * Optional keytip for this TabItem
68
- */
69
- keytipProps?: IKeytipProps;
70
- /**
71
- * Defines whether to always render the tab item (regardless of whether it is selected or not).
72
- * Useful if you're rendering content that is expensive to mount.
73
- *
74
- * @defaultvalue false
75
- */
76
- alwaysRender?: boolean;
77
- }
78
-
79
- /**
80
- * The Tabs control and related tabs pattern are used for navigating frequently accessed,
81
- * distinct content categories. Tabs allow for navigation between two or more content
82
- * views and relies on text headers to articulate the different sections of content.
83
- */
84
- export declare const Tabs: React_2.FunctionComponent<TabsProps>;
85
-
86
- export declare const TabsBase: React_2.FunctionComponent<TabsProps>;
87
-
88
- /**
89
- * {@docCategory Tabs}
90
- */
91
- export declare interface TabsImperativeHandle {
92
- /**
93
- * Sets focus to the first tab.
94
- */
95
- focus(): void;
96
- }
97
-
98
- /**
99
- * {@docCategory Tabs}
100
- * Size of the tabs
101
- */
102
- export declare type TabSizeType = 'normal' | 'large';
103
-
104
- /**
105
- * {@docCategory Tabs}
106
- */
107
- export declare interface TabsProps extends React_2.HTMLAttributes<HTMLDivElement>, React_2.RefAttributes<HTMLDivElement> {
108
- /**
109
- * Optional callback to access the TabsImperativeHandle interface. Use this instead of ref for accessing
110
- * the public methods and properties of the component.
111
- */
112
- componentRef?: React_2.RefObject<TabsImperativeHandle>;
113
- /**
114
- * Call to provide customized styling that will layer on top of the variant rules.
115
- */
116
- styles?: IStyleFunctionOrObject<TabsStyleProps, TabsStyles>;
117
- /**
118
- * Theme provided by High-Order Component.
119
- */
120
- theme?: ITheme;
121
- /**
122
- * Additional css class to apply to the Tabs
123
- * @defaultvalue undefined
124
- */
125
- className?: string;
126
- /**
127
- * Default selected TabItem key. Only provide this if the Tabs is an uncontrolled component;
128
- * otherwise, use the `selectedKey` property.
129
- */
130
- defaultSelectedKey?: string;
131
- /**
132
- * Key of the selected tab item. Updating this will override the selected tab state.
133
- * Only provide this if the Tabs is a controlled component where you are maintaining the
134
- * current state; otherwise, use `defaultSelectedKey`.
135
- */
136
- selectedKey?: string | null;
137
- /**
138
- * Callback for when the selected tab item is changed.
139
- */
140
- onTabClick?: (item?: TabItem, ev?: React_2.MouseEvent<HTMLElement>) => void;
141
- /**
142
- * Tab size (normal, large)
143
- */
144
- tabSize?: TabSizeType;
145
- /**
146
- * Tab format (links, tabs)
147
- */
148
- tabFormat?: TabFormatType;
149
- /**
150
- * Overflow behavior when there is not enough room to display all of the tabs
151
- * * none: Tabs will overflow the container and may not be visible
152
- * * menu: Display an overflow menu that contains the tabs that don't fit
153
- *
154
- * @default none
155
- */
156
- overflowBehavior?: 'none' | 'menu';
157
- /**
158
- * Whether to skip rendering the tabpanel with the content of the selected tab.
159
- * Use this prop if you plan to separately render the tab content
160
- * and don't want to leave an empty tabpanel in the page that may confuse Screen Readers.
161
- */
162
- headersOnly?: boolean;
163
- /**
164
- * Callback to customize how IDs are generated for each tab header.
165
- * Useful if you're rendering content outside and need to connect aria-labelledby.
166
- */
167
- getTabId?: (itemKey: string, index: number) => string;
168
- }
169
-
170
- /**
171
- * {@docCategory Tabs}
172
- */
173
- export declare type TabsStyleProps = Required<Pick<TabsProps, 'theme'>> & Pick<TabsProps, 'className'> & {
174
- tabSize?: TabSizeType;
175
- tabFormat?: TabFormatType;
176
- };
177
-
178
- /**
179
- * {@docCategory Tabs}
180
- */
181
- export declare interface TabsStyles {
182
- /**
183
- * Style for the root element.
184
- */
185
- root: IStyle;
186
- tab: IStyle;
187
- tabIsSelected: IStyle;
188
- tabContent: IStyle;
189
- text: IStyle;
190
- count: IStyle;
191
- icon: IStyle;
192
- tabInMenu: IStyle;
193
- overflowMenuButton: IStyle;
194
- itemContainer?: IStyle;
195
- }
196
-
197
- export { }
@@ -1,104 +0,0 @@
1
- ## API Report File for "@fluentui/react-tabs"
2
-
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
-
5
- ```ts
6
-
7
- import { IButtonProps } from '@fluentui/react/lib/Button';
8
- import { IKeytipProps } from '@fluentui/react';
9
- import { IRefObject } from '@fluentui/utilities';
10
- import { IRenderFunction } from '@fluentui/utilities';
11
- import { IStyle } from '@fluentui/style-utilities';
12
- import { IStyleFunctionOrObject } from '@fluentui/utilities';
13
- import { ITheme } from '@fluentui/style-utilities';
14
- import * as React_2 from 'react';
15
-
16
- // @public
17
- export type TabFormatType = 'links' | 'tabs';
18
-
19
- // @public (undocumented)
20
- export class TabItem extends React_2.Component<TabItemProps, {}> {
21
- constructor(props: TabItemProps);
22
- // (undocumented)
23
- render(): JSX.Element;
24
- }
25
-
26
- // @public (undocumented)
27
- export interface TabItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
28
- alwaysRender?: boolean;
29
- ariaLabel?: string;
30
- componentRef?: IRefObject<{}>;
31
- headerButtonProps?: IButtonProps | {
32
- [key: string]: string | number | boolean;
33
- };
34
- headerText?: string;
35
- itemCount?: number | string;
36
- itemIcon?: string;
37
- itemKey?: string;
38
- keytipProps?: IKeytipProps;
39
- onRenderTab?: IRenderFunction<TabItemProps>;
40
- }
41
-
42
- // @public
43
- export const Tabs: React_2.FunctionComponent<TabsProps>;
44
-
45
- // @public (undocumented)
46
- export const TabsBase: React_2.FunctionComponent<TabsProps>;
47
-
48
- // @public (undocumented)
49
- export interface TabsImperativeHandle {
50
- focus(): void;
51
- }
52
-
53
- // @public
54
- export type TabSizeType = 'normal' | 'large';
55
-
56
- // @public (undocumented)
57
- export interface TabsProps extends React_2.HTMLAttributes<HTMLDivElement>, React_2.RefAttributes<HTMLDivElement> {
58
- className?: string;
59
- componentRef?: React_2.RefObject<TabsImperativeHandle>;
60
- defaultSelectedKey?: string;
61
- getTabId?: (itemKey: string, index: number) => string;
62
- headersOnly?: boolean;
63
- onTabClick?: (item?: TabItem, ev?: React_2.MouseEvent<HTMLElement>) => void;
64
- overflowBehavior?: 'none' | 'menu';
65
- selectedKey?: string | null;
66
- styles?: IStyleFunctionOrObject<TabsStyleProps, TabsStyles>;
67
- tabFormat?: TabFormatType;
68
- tabSize?: TabSizeType;
69
- theme?: ITheme;
70
- }
71
-
72
- // @public (undocumented)
73
- export type TabsStyleProps = Required<Pick<TabsProps, 'theme'>> & Pick<TabsProps, 'className'> & {
74
- tabSize?: TabSizeType;
75
- tabFormat?: TabFormatType;
76
- };
77
-
78
- // @public (undocumented)
79
- export interface TabsStyles {
80
- // (undocumented)
81
- count: IStyle;
82
- // (undocumented)
83
- icon: IStyle;
84
- // (undocumented)
85
- itemContainer?: IStyle;
86
- // (undocumented)
87
- overflowMenuButton: IStyle;
88
- root: IStyle;
89
- // (undocumented)
90
- tab: IStyle;
91
- // (undocumented)
92
- tabContent: IStyle;
93
- // (undocumented)
94
- tabInMenu: IStyle;
95
- // (undocumented)
96
- tabIsSelected: IStyle;
97
- // (undocumented)
98
- text: IStyle;
99
- }
100
-
101
-
102
- // (No @packageDocumentation comment for this package)
103
-
104
- ```
package/just.config.ts DELETED
@@ -1,3 +0,0 @@
1
- import { preset } from '@fluentui/scripts';
2
-
3
- preset();
package/lib/Tabs.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './components/Tabs/index';
package/lib/Tabs.js DELETED
@@ -1,2 +0,0 @@
1
- export * from './components/Tabs/index';
2
- //# sourceMappingURL=Tabs.js.map
package/lib/Tabs.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tabs.js","sourceRoot":"../src/","sources":["Tabs.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './components/Tabs/index';\n"]}
@@ -1,4 +0,0 @@
1
- import { IsConformantOptions } from '@fluentui/react-conformance';
2
- export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
3
- componentPath?: string;
4
- }): void;
@@ -1,9 +0,0 @@
1
- import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
2
- export function isConformant(testInfo) {
3
- var defaultOptions = {
4
- disabledTests: ['has-docblock', 'kebab-aria-attributes'],
5
- componentPath: module.parent.filename.replace('.test', ''),
6
- };
7
- baseIsConformant(defaultOptions, testInfo);
8
- }
9
- //# sourceMappingURL=isConformant.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAuB,MAAM,6BAA6B,CAAC;AAEpG,MAAM,UAAU,YAAY,CAC1B,QAAyF;IAEzF,IAAM,cAAc,GAAyC;QAC3D,aAAa,EAAE,CAAC,cAAc,EAAE,uBAAuB,CAAC;QACxD,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n disabledTests: ['has-docblock', 'kebab-aria-attributes'],\n componentPath: module!.parent!.filename.replace('.test', ''),\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
@@ -1,6 +0,0 @@
1
- import * as React from 'react';
2
- import { TabItemProps } from './TabItem.types';
3
- export declare class TabItem extends React.Component<TabItemProps, {}> {
4
- constructor(props: TabItemProps);
5
- render(): JSX.Element;
6
- }
@@ -1,18 +0,0 @@
1
- import { __assign, __extends } from "tslib";
2
- import * as React from 'react';
3
- import { getNativeProps, divProperties, initializeComponentRef } from '@fluentui/utilities';
4
- // const COMPONENT_NAME = 'TabItem';
5
- var TabItem = /** @class */ (function (_super) {
6
- __extends(TabItem, _super);
7
- function TabItem(props) {
8
- var _this = _super.call(this, props) || this;
9
- initializeComponentRef(_this);
10
- return _this;
11
- }
12
- TabItem.prototype.render = function () {
13
- return React.createElement("div", __assign({}, getNativeProps(this.props, divProperties)), this.props.children);
14
- };
15
- return TabItem;
16
- }(React.Component));
17
- export { TabItem };
18
- //# sourceMappingURL=TabItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabItem.js","sourceRoot":"../src/","sources":["components/Tabs/TabItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAG5F,oCAAoC;AAEpC;IAA6B,2BAAiC;IAC5D,iBAAY,KAAmB;QAA/B,YACE,kBAAM,KAAK,CAAC,SAGb;QADC,sBAAsB,CAAC,KAAI,CAAC,CAAC;;IAC/B,CAAC;IAEM,wBAAM,GAAb;QACE,OAAO,wCAAS,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAC;IACzF,CAAC;IACH,cAAC;AAAD,CAAC,AAVD,CAA6B,KAAK,CAAC,SAAS,GAU3C","sourcesContent":["import * as React from 'react';\nimport { getNativeProps, divProperties, initializeComponentRef } from '@fluentui/utilities';\nimport { TabItemProps } from './TabItem.types';\n\n// const COMPONENT_NAME = 'TabItem';\n\nexport class TabItem extends React.Component<TabItemProps, {}> {\n constructor(props: TabItemProps) {\n super(props);\n\n initializeComponentRef(this);\n }\n\n public render(): JSX.Element {\n return <div {...getNativeProps(this.props, divProperties)}>{this.props.children}</div>;\n }\n}\n"]}
@@ -1,61 +0,0 @@
1
- import * as React from 'react';
2
- import { IKeytipProps } from '@fluentui/react';
3
- import { IButtonProps } from '@fluentui/react/lib/Button';
4
- import { IRefObject, IRenderFunction } from '@fluentui/utilities';
5
- /**
6
- * {@docCategory Tabs}
7
- */
8
- export interface TabItemProps extends React.HTMLAttributes<HTMLDivElement> {
9
- /**
10
- * Gets the component ref.
11
- */
12
- componentRef?: IRefObject<{}>;
13
- /**
14
- * The text displayed of each tab.
15
- */
16
- headerText?: string;
17
- /**
18
- * Props for the header command button. This provides a way to pass in native props, such as data-* and aria-*,
19
- * for each tab element.
20
- */
21
- headerButtonProps?: IButtonProps | {
22
- [key: string]: string | number | boolean;
23
- };
24
- /**
25
- * An required key to uniquely identify a tab item.
26
- *
27
- * Note: The 'key' from react props cannot be used inside component.
28
- */
29
- itemKey?: string;
30
- /**
31
- * The aria label of each tab which will read by screen reader instead of headerText.
32
- *
33
- * Note that unless you have compelling requirements you should not override aria-label.
34
- */
35
- ariaLabel?: string;
36
- /**
37
- * Defines an optional item count displayed in parentheses just after the `headerText`.
38
- *
39
- * Examples: completed (4), Unread (99+)
40
- */
41
- itemCount?: number | string;
42
- /**
43
- * An optional icon to show next to the tab.
44
- */
45
- itemIcon?: string;
46
- /**
47
- * Optional custom renderer for the tab
48
- */
49
- onRenderTab?: IRenderFunction<TabItemProps>;
50
- /**
51
- * Optional keytip for this TabItem
52
- */
53
- keytipProps?: IKeytipProps;
54
- /**
55
- * Defines whether to always render the tab item (regardless of whether it is selected or not).
56
- * Useful if you're rendering content that is expensive to mount.
57
- *
58
- * @defaultvalue false
59
- */
60
- alwaysRender?: boolean;
61
- }
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=TabItem.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TabItem.types.js","sourceRoot":"../src/","sources":["components/Tabs/TabItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IKeytipProps } from '@fluentui/react';\nimport { IButtonProps } from '@fluentui/react/lib/Button';\nimport { IRefObject, IRenderFunction } from '@fluentui/utilities';\n\n/**\n * {@docCategory Tabs}\n */\nexport interface TabItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Gets the component ref.\n */\n componentRef?: IRefObject<{}>;\n\n /**\n * The text displayed of each tab.\n */\n headerText?: string;\n\n /**\n * Props for the header command button. This provides a way to pass in native props, such as data-* and aria-*,\n * for each tab element.\n */\n headerButtonProps?: IButtonProps | { [key: string]: string | number | boolean };\n\n /**\n * An required key to uniquely identify a tab item.\n *\n * Note: The 'key' from react props cannot be used inside component.\n */\n itemKey?: string;\n\n /**\n * The aria label of each tab which will read by screen reader instead of headerText.\n *\n * Note that unless you have compelling requirements you should not override aria-label.\n */\n ariaLabel?: string;\n\n /**\n * Defines an optional item count displayed in parentheses just after the `headerText`.\n *\n * Examples: completed (4), Unread (99+)\n */\n itemCount?: number | string;\n\n /**\n * An optional icon to show next to the tab.\n */\n itemIcon?: string;\n\n /**\n * Optional custom renderer for the tab\n */\n onRenderTab?: IRenderFunction<TabItemProps>;\n\n /**\n * Optional keytip for this TabItem\n */\n keytipProps?: IKeytipProps;\n\n /**\n * Defines whether to always render the tab item (regardless of whether it is selected or not).\n * Useful if you're rendering content that is expensive to mount.\n *\n * @defaultvalue false\n */\n alwaysRender?: boolean;\n}\n"]}
@@ -1,3 +0,0 @@
1
- import * as React from 'react';
2
- import { TabsProps } from './index';
3
- export declare const TabsBase: React.FunctionComponent<TabsProps>;