@atlaskit/tabs 18.3.5 → 19.0.1

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 (63) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/components/tab-list.compiled.css +8 -8
  3. package/dist/cjs/components/tab-list.js +7 -15
  4. package/dist/cjs/components/tab-panel.js +3 -2
  5. package/dist/cjs/components/tab.js +3 -2
  6. package/dist/cjs/components/tabs.js +6 -5
  7. package/dist/cjs/index.js +4 -3
  8. package/dist/cjs/internal/tab-context.js +10 -0
  9. package/dist/cjs/internal/tab-list-context.js +10 -0
  10. package/dist/cjs/internal/tab-panel-context.js +10 -0
  11. package/dist/cjs/use-tab-list.js +19 -0
  12. package/dist/cjs/use-tab-panel.js +19 -0
  13. package/dist/cjs/use-tab.js +19 -0
  14. package/dist/es2019/components/tab-list.compiled.css +8 -8
  15. package/dist/es2019/components/tab-list.js +4 -5
  16. package/dist/es2019/components/tab-panel.js +2 -1
  17. package/dist/es2019/components/tab.js +2 -1
  18. package/dist/es2019/components/tabs.js +4 -3
  19. package/dist/es2019/index.js +2 -1
  20. package/dist/es2019/internal/tab-context.js +3 -0
  21. package/dist/es2019/internal/tab-list-context.js +3 -0
  22. package/dist/es2019/internal/{context.js → tab-panel-context.js} +0 -2
  23. package/dist/es2019/use-tab-list.js +14 -0
  24. package/dist/es2019/use-tab-panel.js +14 -0
  25. package/dist/es2019/use-tab.js +14 -0
  26. package/dist/esm/components/tab-list.compiled.css +8 -8
  27. package/dist/esm/components/tab-list.js +4 -13
  28. package/dist/esm/components/tab-panel.js +2 -1
  29. package/dist/esm/components/tab.js +2 -1
  30. package/dist/esm/components/tabs.js +4 -3
  31. package/dist/esm/index.js +2 -1
  32. package/dist/esm/internal/tab-context.js +3 -0
  33. package/dist/esm/internal/tab-list-context.js +3 -0
  34. package/dist/esm/internal/tab-panel-context.js +3 -0
  35. package/dist/esm/use-tab-list.js +14 -0
  36. package/dist/esm/use-tab-panel.js +14 -0
  37. package/dist/esm/use-tab.js +14 -0
  38. package/dist/types/index.d.ts +2 -1
  39. package/dist/types/internal/tab-context.d.ts +2 -0
  40. package/dist/types/internal/tab-list-context.d.ts +2 -0
  41. package/dist/types/internal/tab-panel-context.d.ts +2 -0
  42. package/dist/types/use-tab-list.d.ts +4 -0
  43. package/dist/types/use-tab-panel.d.ts +4 -0
  44. package/dist/types/use-tab.d.ts +4 -0
  45. package/dist/types-ts4.5/index.d.ts +2 -1
  46. package/dist/types-ts4.5/internal/tab-context.d.ts +2 -0
  47. package/dist/types-ts4.5/internal/tab-list-context.d.ts +2 -0
  48. package/dist/types-ts4.5/internal/tab-panel-context.d.ts +2 -0
  49. package/dist/types-ts4.5/use-tab-list.d.ts +4 -0
  50. package/dist/types-ts4.5/use-tab-panel.d.ts +4 -0
  51. package/dist/types-ts4.5/use-tab.d.ts +4 -0
  52. package/package.json +9 -9
  53. package/tabs.docs.tsx +51 -0
  54. package/dist/cjs/hooks.js +0 -29
  55. package/dist/cjs/internal/context.js +0 -12
  56. package/dist/es2019/hooks.js +0 -23
  57. package/dist/esm/hooks.js +0 -23
  58. package/dist/esm/internal/context.js +0 -5
  59. package/dist/types/hooks.d.ts +0 -3
  60. package/dist/types/internal/context.d.ts +0 -4
  61. package/dist/types-ts4.5/hooks.d.ts +0 -3
  62. package/dist/types-ts4.5/internal/context.d.ts +0 -4
  63. package/hooks/package.json +0 -17
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/tabs
2
2
 
3
+ ## 19.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
8
+ Removes redundant fallback color values via @atlaskit/theme
9
+
10
+ ## 19.0.0
11
+
12
+ ### Major Changes
13
+
14
+ - [`38f89455de21d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38f89455de21d) -
15
+ Removes `@atlaskit/tabs/hooks` entrypoint from public API. Use the hook exports from
16
+ `@atlaskit/tabs` directly.
17
+
18
+ Removes redundant utility files, split-out multi-export modules and restructures internal files.
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies
23
+
3
24
  ## 18.3.5
4
25
 
5
26
  ### Patch Changes
@@ -1,8 +1,8 @@
1
1
 
2
2
  ._qwyt1qi0 [role=tab]{border-radius:var(--ds-radius-medium,6px)}
3
- ._1b8dokkv [role=tab]:active:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,transparent)}
4
- ._1lzuokkv [role=tab]:hover:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,transparent)}
5
- ._rsmz73hj [role=tab][aria-selected=true]:after{border-block-end:var(--_1q7mpl4)}._10vzidpf [role=tab]{margin-right:0}
3
+ ._1b8d1uh4 [role=tab]:active:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
4
+ ._1lzu1uh4 [role=tab]:hover:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
5
+ ._rsmzz0c1 [role=tab][aria-selected=true]:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border-selected,#1868db)}._10vzidpf [role=tab]{margin-right:0}
6
6
  ._140sidpf [role=tab]:hover:after{height:0}
7
7
  ._15d8b3bt [role=tab]:hover:after{content:""}
8
8
  ._15plidpf [role=tab]{margin-left:0}
@@ -33,8 +33,8 @@
33
33
  ._1p9sidpf [role=tab][aria-selected=true]:after{inset-block-end:0}
34
34
  ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
35
35
  ._1qa1u2gc [role=tab][aria-selected=true]:after{inset-inline-end:var(--ds-space-100,8px)}
36
- ._1quz1425 [role=tab]{color:var(--_13a5t4u)}
37
- ._1russudh:before{background-color:var(--_lvpq93)}
36
+ ._1quzazsu [role=tab]{color:var(--ds-text-subtle,#505258)}
37
+ ._1rus1l7x:before{background-color:var(--ds-border,#0b120e24)}
38
38
  ._1sglstnw [role=tab][aria-selected=true]:after{position:absolute}
39
39
  ._1tms1q9c [role=tab]{white-space:nowrap}
40
40
  ._1xrmidpf [role=tab]:hover:after{margin-right:0}
@@ -49,7 +49,7 @@
49
49
  ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
50
50
  ._bppridpf [role=tab][aria-selected=true]:after{margin-top:0}
51
51
  ._eid3idpf:before{margin-right:0}
52
- ._fiemln51 [role=tab][aria-selected=true]{color:var(--_1hfkvbo)}
52
+ ._fiem6x5g [role=tab][aria-selected=true]{color:var(--ds-text-selected,#1868db)}
53
53
  ._fiizidpf [role=tab]:hover:after{margin-top:0}
54
54
  ._fntnidpf:before{margin-left:0}
55
55
  ._gpbcidpf [role=tab]{margin-top:0}
@@ -71,5 +71,5 @@
71
71
  ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
72
72
  ._z5wtu2gc:before{inset-inline-start:var(--ds-space-100,8px)}
73
73
  ._zr3eidpf:before{margin-bottom:0}
74
- ._1oaz1fgx [role=tab]:hover{color:var(--_kkbq40)}
75
- ._1i2072d1 [role=tab]:active{color:var(--_71dbsd)}
74
+ ._1oazazsu [role=tab]:hover{color:var(--ds-text-subtle,#505258)}
75
+ ._1i20i7uo [role=tab]:active{color:var(--ds-text,#292a2e)}
@@ -1,6 +1,7 @@
1
- /* tab-list.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* tab-list.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5
  var _typeof = require("@babel/runtime/helpers/typeof");
5
6
  Object.defineProperty(exports, "__esModule", {
6
7
  value: true
@@ -10,9 +11,8 @@ require("./tab-list.compiled.css");
10
11
  var _react = _interopRequireWildcard(require("react"));
11
12
  var React = _react;
12
13
  var _runtime = require("@compiled/react/runtime");
13
- var _colors = require("@atlaskit/theme/colors");
14
- var _hooks = require("../hooks");
15
- var _context = require("../internal/context");
14
+ var _tabContext = require("../internal/tab-context");
15
+ var _useTabList2 = _interopRequireDefault(require("../use-tab-list"));
16
16
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
17
17
  var baseStyles = null;
18
18
  var tabListStyles = null;
@@ -28,7 +28,7 @@ var tabListStyles = null;
28
28
  */
29
29
  var TabList = function TabList(_ref) {
30
30
  var children = _ref.children;
31
- var _useTabList = (0, _hooks.useTabList)(),
31
+ var _useTabList = (0, _useTabList2.default)(),
32
32
  tabsId = _useTabList.tabsId,
33
33
  selected = _useTabList.selected,
34
34
  onChange = _useTabList.onChange;
@@ -77,7 +77,7 @@ var TabList = function TabList(_ref) {
77
77
  var tab = _ref2.tab,
78
78
  isSelected = _ref2.isSelected,
79
79
  index = _ref2.index;
80
- return /*#__PURE__*/React.createElement(_context.TabContext.Provider, {
80
+ return /*#__PURE__*/React.createElement(_tabContext.TabContext.Provider, {
81
81
  value: {
82
82
  onClick: function onClick() {
83
83
  return onChange(index);
@@ -97,15 +97,7 @@ var TabList = function TabList(_ref) {
97
97
  return /*#__PURE__*/React.createElement("div", {
98
98
  role: "tablist",
99
99
  ref: ref,
100
- className: (0, _runtime.ax)(["_1e0c1txw _kqswh2mm _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _qwyt1qi0 _7hip15vq _1fud15vq _bb0mh2mm _1quz1425 _rzxytlke _1ofh12x7 _pryi12x7 _1a85u2gc _rmpau2gc _1dze1l2s _1tms1q9c _fiizidpf _1xrmidpf _xyihidpf _166qidpf _1lzuokkv _24g71kw7 _140sidpf _lycustnw _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1oaz1fgx _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _1b8dokkv _1n121kw7 _7p9oidpf _o2e1stnw _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _1i2072d1 _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _rsmz73hj _1m0e1kw7 _93pdidpf _1sglstnw _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _fiemln51 _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1mp41kw7 _kfgte4h9 _1cs8stnw _1russudh _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc"]),
101
- style: {
102
- "--_13a5t4u": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N500, ")")),
103
- "--_kkbq40": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.B400, ")")),
104
- "--_71dbsd": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.B500, ")")),
105
- "--_1hfkvbo": (0, _runtime.ix)("var(--ds-text-selected, ".concat(_colors.B400, ")")),
106
- "--_1q7mpl4": (0, _runtime.ix)("var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-selected, ".concat(_colors.B400, ")"))),
107
- "--_lvpq93": (0, _runtime.ix)("var(--ds-border, ".concat(_colors.N30, ")"))
108
- }
100
+ className: (0, _runtime.ax)(["_1e0c1txw _kqswh2mm _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _qwyt1qi0 _7hip15vq _1fud15vq _bb0mh2mm _1quzazsu _rzxytlke _1ofh12x7 _pryi12x7 _1a85u2gc _rmpau2gc _1dze1l2s _1tms1q9c _fiizidpf _1xrmidpf _xyihidpf _166qidpf _1lzu1uh4 _24g71kw7 _140sidpf _lycustnw _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1oazazsu _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _1b8d1uh4 _1n121kw7 _7p9oidpf _o2e1stnw _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _1i20i7uo _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _rsmzz0c1 _1m0e1kw7 _93pdidpf _1sglstnw _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _fiem6x5g _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1mp41kw7 _kfgte4h9 _1cs8stnw _1rus1l7x _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc"])
109
101
  }, childrenArray.map(function (child, index) {
110
102
  return getTabWithContext({
111
103
  tab: child,
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
@@ -7,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
7
8
  exports.default = void 0;
8
9
  var _react = _interopRequireWildcard(require("react"));
9
10
  var _compiled = require("@atlaskit/primitives/compiled");
10
- var _hooks = require("../hooks");
11
+ var _useTabPanel2 = _interopRequireDefault(require("../use-tab-panel"));
11
12
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
12
13
  // Note this is not being memoized as children is an unstable reference
13
14
  /**
@@ -22,7 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
22
23
  var TabPanel = function TabPanel(_ref) {
23
24
  var children = _ref.children,
24
25
  testId = _ref.testId;
25
- var _useTabPanel = (0, _hooks.useTabPanel)(),
26
+ var _useTabPanel = (0, _useTabPanel2.default)(),
26
27
  role = _useTabPanel.role,
27
28
  id = _useTabPanel.id,
28
29
  hidden = _useTabPanel.hidden,
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
@@ -7,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
7
8
  exports.default = void 0;
8
9
  var _react = _interopRequireWildcard(require("react"));
9
10
  var _compiled = require("@atlaskit/primitives/compiled");
10
- var _hooks = require("../hooks");
11
+ var _useTab2 = _interopRequireDefault(require("../use-tab"));
11
12
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
12
13
  /**
13
14
  * __Tab__
@@ -21,7 +22,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
21
22
  var Tab = /*#__PURE__*/(0, _react.forwardRef)(function Tab(_ref, ref) {
22
23
  var children = _ref.children,
23
24
  testId = _ref.testId;
24
- var _useTab = (0, _hooks.useTab)(),
25
+ var _useTab = (0, _useTab2.default)(),
25
26
  onClick = _useTab.onClick,
26
27
  id = _useTab.id,
27
28
  ariaControls = _useTab['aria-controls'],
@@ -1,4 +1,4 @@
1
- /* tabs.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* tabs.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -15,7 +15,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
15
15
  var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
16
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
17
  var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
18
- var _context = require("../internal/context");
18
+ var _tabListContext = require("../internal/tab-list-context");
19
+ var _tabPanelContext = require("../internal/tab-panel-context");
19
20
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
20
21
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
21
22
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -24,7 +25,7 @@ var tabsStyles = null;
24
25
  var analyticsAttributes = {
25
26
  componentName: 'tabs',
26
27
  packageName: "@atlaskit/tabs",
27
- packageVersion: "0.0.0-development"
28
+ packageVersion: "19.0.1"
28
29
  };
29
30
  var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
30
31
  var tabPanel = _ref.tabPanel,
@@ -33,7 +34,7 @@ var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
33
34
  tabsId = _ref.tabsId;
34
35
  return (
35
36
  // Ensure tabPanel exists in case it has been removed
36
- tabPanel && /*#__PURE__*/React.createElement(_context.TabPanelContext.Provider, {
37
+ tabPanel && /*#__PURE__*/React.createElement(_tabPanelContext.TabPanelContext.Provider, {
37
38
  value: {
38
39
  role: 'tabpanel',
39
40
  id: "".concat(tabsId, "-").concat(index, "-tab"),
@@ -114,7 +115,7 @@ var Tabs = function Tabs(props) {
114
115
  return /*#__PURE__*/React.createElement("div", {
115
116
  "data-testid": testId,
116
117
  className: (0, _runtime.ax)(["_1e0c1txw _p12f1osq _1tkeidpf _i0dl1osq _2lx21bp4 _16jlkb7n", "_1c3y1txw _ftfaidpf _18i0kb7n _185bglyw"])
117
- }, /*#__PURE__*/React.createElement(_context.TabListContext.Provider, {
118
+ }, /*#__PURE__*/React.createElement(_tabListContext.TabListContext.Provider, {
118
119
  value: {
119
120
  selected: selected,
120
121
  onChange: onChangeAnalytics,
package/dist/cjs/index.js CHANGED
@@ -31,17 +31,18 @@ Object.defineProperty(exports, "default", {
31
31
  Object.defineProperty(exports, "useTab", {
32
32
  enumerable: true,
33
33
  get: function get() {
34
- return _hooks.useTab;
34
+ return _useTab.default;
35
35
  }
36
36
  });
37
37
  Object.defineProperty(exports, "useTabPanel", {
38
38
  enumerable: true,
39
39
  get: function get() {
40
- return _hooks.useTabPanel;
40
+ return _useTabPanel.default;
41
41
  }
42
42
  });
43
43
  var _tabs = _interopRequireDefault(require("./components/tabs"));
44
44
  var _tabPanel = _interopRequireDefault(require("./components/tab-panel"));
45
45
  var _tab = _interopRequireDefault(require("./components/tab"));
46
46
  var _tabList = _interopRequireDefault(require("./components/tab-list"));
47
- var _hooks = require("./hooks");
47
+ var _useTab = _interopRequireDefault(require("./use-tab"));
48
+ var _useTabPanel = _interopRequireDefault(require("./use-tab-panel"));
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TabContext = void 0;
7
+ var _react = require("react");
8
+ /* eslint-disable @repo/internal/react/require-jsdoc */
9
+
10
+ var TabContext = exports.TabContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TabListContext = void 0;
7
+ var _react = require("react");
8
+ /* eslint-disable @repo/internal/react/require-jsdoc */
9
+
10
+ var TabListContext = exports.TabListContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TabPanelContext = void 0;
7
+ var _react = require("react");
8
+ /* eslint-disable @repo/internal/react/require-jsdoc */
9
+
10
+ var TabPanelContext = exports.TabPanelContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = useTabList;
7
+ var _react = require("react");
8
+ var _tabListContext = require("./internal/tab-list-context");
9
+ // TODO: Fill in the hook {description}.
10
+ /**
11
+ * {description}.
12
+ */
13
+ function useTabList() {
14
+ var tabListData = (0, _react.useContext)(_tabListContext.TabListContext);
15
+ if (tabListData === null || typeof tabListData === 'undefined') {
16
+ throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
17
+ }
18
+ return tabListData;
19
+ }
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = useTabPanel;
7
+ var _react = require("react");
8
+ var _tabPanelContext = require("./internal/tab-panel-context");
9
+ // TODO: Fill in the hook {description}.
10
+ /**
11
+ * {description}.
12
+ */
13
+ function useTabPanel() {
14
+ var tabPanelData = (0, _react.useContext)(_tabPanelContext.TabPanelContext);
15
+ if (tabPanelData === null || typeof tabPanelData === 'undefined') {
16
+ throw Error('@atlaskit/tabs: A TabPanel must have a Tabs parent.');
17
+ }
18
+ return tabPanelData;
19
+ }
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = useTab;
7
+ var _react = require("react");
8
+ var _tabContext = require("./internal/tab-context");
9
+ // TODO: Fill in the hook {description}.
10
+ /**
11
+ * {description}.
12
+ */
13
+ function useTab() {
14
+ var tabData = (0, _react.useContext)(_tabContext.TabContext);
15
+ if (tabData == null || typeof tabData === 'undefined') {
16
+ throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
17
+ }
18
+ return tabData;
19
+ }
@@ -1,8 +1,8 @@
1
1
 
2
2
  ._qwyt1qi0 [role=tab]{border-radius:var(--ds-radius-medium,6px)}
3
- ._1b8dokkv [role=tab]:active:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,transparent)}
4
- ._1lzuokkv [role=tab]:hover:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,transparent)}
5
- ._rsmz5eut [role=tab][aria-selected=true]:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border-selected,#0052cc)}._10vzidpf [role=tab]{margin-right:0}
3
+ ._1b8d1uh4 [role=tab]:active:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
4
+ ._1lzu1uh4 [role=tab]:hover:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
5
+ ._rsmzz0c1 [role=tab][aria-selected=true]:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border-selected,#1868db)}._10vzidpf [role=tab]{margin-right:0}
6
6
  ._140sidpf [role=tab]:hover:after{height:0}
7
7
  ._15d8b3bt [role=tab]:hover:after{content:""}
8
8
  ._15plidpf [role=tab]{margin-left:0}
@@ -33,8 +33,8 @@
33
33
  ._1p9sidpf [role=tab][aria-selected=true]:after{inset-block-end:0}
34
34
  ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
35
35
  ._1qa1u2gc [role=tab][aria-selected=true]:after{inset-inline-end:var(--ds-space-100,8px)}
36
- ._1quzjjyb [role=tab]{color:var(--ds-text-subtle,#42526e)}
37
- ._1rushloo:before{background-color:var(--ds-border,#ebecf0)}
36
+ ._1quzazsu [role=tab]{color:var(--ds-text-subtle,#505258)}
37
+ ._1rus1l7x:before{background-color:var(--ds-border,#0b120e24)}
38
38
  ._1sglstnw [role=tab][aria-selected=true]:after{position:absolute}
39
39
  ._1tms1q9c [role=tab]{white-space:nowrap}
40
40
  ._1xrmidpf [role=tab]:hover:after{margin-right:0}
@@ -49,7 +49,7 @@
49
49
  ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
50
50
  ._bppridpf [role=tab][aria-selected=true]:after{margin-top:0}
51
51
  ._eid3idpf:before{margin-right:0}
52
- ._fiem1ldt [role=tab][aria-selected=true]{color:var(--ds-text-selected,#0052cc)}
52
+ ._fiem6x5g [role=tab][aria-selected=true]{color:var(--ds-text-selected,#1868db)}
53
53
  ._fiizidpf [role=tab]:hover:after{margin-top:0}
54
54
  ._fntnidpf:before{margin-left:0}
55
55
  ._gpbcidpf [role=tab]{margin-top:0}
@@ -71,5 +71,5 @@
71
71
  ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
72
72
  ._z5wtu2gc:before{inset-inline-start:var(--ds-space-100,8px)}
73
73
  ._zr3eidpf:before{margin-bottom:0}
74
- ._1oazdud1 [role=tab]:hover{color:var(--ds-text-subtle,#0052cc)}
75
- ._1i201ouy [role=tab]:active{color:var(--ds-text,#0747a6)}
74
+ ._1oazazsu [role=tab]:hover{color:var(--ds-text-subtle,#505258)}
75
+ ._1i20i7uo [role=tab]:active{color:var(--ds-text,#292a2e)}
@@ -1,11 +1,10 @@
1
- /* tab-list.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* tab-list.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./tab-list.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Children, createRef, useCallback } from 'react';
6
- import { B400, B500, N30, N500 } from '@atlaskit/theme/colors';
7
- import { useTabList } from '../hooks';
8
- import { TabContext } from '../internal/context';
6
+ import { TabContext } from '../internal/tab-context';
7
+ import useTabList from '../use-tab-list';
9
8
  const baseStyles = null;
10
9
  const tabListStyles = null;
11
10
 
@@ -88,7 +87,7 @@ const TabList = ({
88
87
  return /*#__PURE__*/React.createElement("div", {
89
88
  role: "tablist",
90
89
  ref: ref,
91
- className: ax(["_1e0c1txw _kqswh2mm _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _qwyt1qi0 _7hip15vq _1fud15vq _bb0mh2mm _1quzjjyb _rzxytlke _1ofh12x7 _pryi12x7 _1a85u2gc _rmpau2gc _1dze1l2s _1tms1q9c _fiizidpf _1xrmidpf _xyihidpf _166qidpf _1lzuokkv _24g71kw7 _140sidpf _lycustnw _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1oazdud1 _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _1b8dokkv _1n121kw7 _7p9oidpf _o2e1stnw _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _1i201ouy _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _rsmz5eut _1m0e1kw7 _93pdidpf _1sglstnw _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _fiem1ldt _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1mp41kw7 _kfgte4h9 _1cs8stnw _1rushloo _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc"])
90
+ className: ax(["_1e0c1txw _kqswh2mm _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _qwyt1qi0 _7hip15vq _1fud15vq _bb0mh2mm _1quzazsu _rzxytlke _1ofh12x7 _pryi12x7 _1a85u2gc _rmpau2gc _1dze1l2s _1tms1q9c _fiizidpf _1xrmidpf _xyihidpf _166qidpf _1lzu1uh4 _24g71kw7 _140sidpf _lycustnw _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1oazazsu _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _1b8d1uh4 _1n121kw7 _7p9oidpf _o2e1stnw _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _1i20i7uo _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _rsmzz0c1 _1m0e1kw7 _93pdidpf _1sglstnw _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _fiem6x5g _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1mp41kw7 _kfgte4h9 _1cs8stnw _1rus1l7x _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc"])
92
91
  }, childrenArray.map((child, index) => getTabWithContext({
93
92
  tab: child,
94
93
  index,
@@ -1,6 +1,7 @@
1
1
  import React, { Fragment } from 'react';
2
2
  import { Focusable } from '@atlaskit/primitives/compiled';
3
- import { useTabPanel } from '../hooks';
3
+ import useTabPanel from '../use-tab-panel';
4
+
4
5
  // Note this is not being memoized as children is an unstable reference
5
6
  /**
6
7
  * __TabPanel__
@@ -1,6 +1,7 @@
1
1
  import React, { forwardRef } from 'react';
2
2
  import { Focusable, Text } from '@atlaskit/primitives/compiled';
3
- import { useTab } from '../hooks';
3
+ import useTab from '../use-tab';
4
+
4
5
  /**
5
6
  * __Tab__
6
7
  *
@@ -1,16 +1,17 @@
1
- /* tabs.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* tabs.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./tabs.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Children, Fragment, useCallback, useRef, useState } from 'react';
6
6
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
7
- import { TabListContext, TabPanelContext } from '../internal/context';
7
+ import { TabListContext } from '../internal/tab-list-context';
8
+ import { TabPanelContext } from '../internal/tab-panel-context';
8
9
  const baseStyles = null;
9
10
  const tabsStyles = null;
10
11
  const analyticsAttributes = {
11
12
  componentName: 'tabs',
12
13
  packageName: "@atlaskit/tabs",
13
- packageVersion: "0.0.0-development"
14
+ packageVersion: "19.0.1"
14
15
  };
15
16
  const getTabPanelWithContext = ({
16
17
  tabPanel,
@@ -2,4 +2,5 @@ export { default } from './components/tabs';
2
2
  export { default as TabPanel } from './components/tab-panel';
3
3
  export { default as Tab } from './components/tab';
4
4
  export { default as TabList } from './components/tab-list';
5
- export { useTab, useTabPanel } from './hooks';
5
+ export { default as useTab } from './use-tab';
6
+ export { default as useTabPanel } from './use-tab-panel';
@@ -0,0 +1,3 @@
1
+ /* eslint-disable @repo/internal/react/require-jsdoc */
2
+ import { createContext } from 'react';
3
+ export const TabContext = /*#__PURE__*/createContext(null);
@@ -0,0 +1,3 @@
1
+ /* eslint-disable @repo/internal/react/require-jsdoc */
2
+ import { createContext } from 'react';
3
+ export const TabListContext = /*#__PURE__*/createContext(null);
@@ -1,5 +1,3 @@
1
1
  /* eslint-disable @repo/internal/react/require-jsdoc */
2
2
  import { createContext } from 'react';
3
- export const TabContext = /*#__PURE__*/createContext(null);
4
- export const TabListContext = /*#__PURE__*/createContext(null);
5
3
  export const TabPanelContext = /*#__PURE__*/createContext(null);
@@ -0,0 +1,14 @@
1
+ import { useContext } from 'react';
2
+ import { TabListContext } from './internal/tab-list-context';
3
+
4
+ // TODO: Fill in the hook {description}.
5
+ /**
6
+ * {description}.
7
+ */
8
+ export default function useTabList() {
9
+ const tabListData = useContext(TabListContext);
10
+ if (tabListData === null || typeof tabListData === 'undefined') {
11
+ throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
12
+ }
13
+ return tabListData;
14
+ }
@@ -0,0 +1,14 @@
1
+ import { useContext } from 'react';
2
+ import { TabPanelContext } from './internal/tab-panel-context';
3
+
4
+ // TODO: Fill in the hook {description}.
5
+ /**
6
+ * {description}.
7
+ */
8
+ export default function useTabPanel() {
9
+ const tabPanelData = useContext(TabPanelContext);
10
+ if (tabPanelData === null || typeof tabPanelData === 'undefined') {
11
+ throw Error('@atlaskit/tabs: A TabPanel must have a Tabs parent.');
12
+ }
13
+ return tabPanelData;
14
+ }
@@ -0,0 +1,14 @@
1
+ import { useContext } from 'react';
2
+ import { TabContext } from './internal/tab-context';
3
+
4
+ // TODO: Fill in the hook {description}.
5
+ /**
6
+ * {description}.
7
+ */
8
+ export default function useTab() {
9
+ const tabData = useContext(TabContext);
10
+ if (tabData == null || typeof tabData === 'undefined') {
11
+ throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
12
+ }
13
+ return tabData;
14
+ }
@@ -1,8 +1,8 @@
1
1
 
2
2
  ._qwyt1qi0 [role=tab]{border-radius:var(--ds-radius-medium,6px)}
3
- ._1b8dokkv [role=tab]:active:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,transparent)}
4
- ._1lzuokkv [role=tab]:hover:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,transparent)}
5
- ._rsmz73hj [role=tab][aria-selected=true]:after{border-block-end:var(--_1q7mpl4)}._10vzidpf [role=tab]{margin-right:0}
3
+ ._1b8d1uh4 [role=tab]:active:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
4
+ ._1lzu1uh4 [role=tab]:hover:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
5
+ ._rsmzz0c1 [role=tab][aria-selected=true]:after{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border-selected,#1868db)}._10vzidpf [role=tab]{margin-right:0}
6
6
  ._140sidpf [role=tab]:hover:after{height:0}
7
7
  ._15d8b3bt [role=tab]:hover:after{content:""}
8
8
  ._15plidpf [role=tab]{margin-left:0}
@@ -33,8 +33,8 @@
33
33
  ._1p9sidpf [role=tab][aria-selected=true]:after{inset-block-end:0}
34
34
  ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
35
35
  ._1qa1u2gc [role=tab][aria-selected=true]:after{inset-inline-end:var(--ds-space-100,8px)}
36
- ._1quz1425 [role=tab]{color:var(--_13a5t4u)}
37
- ._1russudh:before{background-color:var(--_lvpq93)}
36
+ ._1quzazsu [role=tab]{color:var(--ds-text-subtle,#505258)}
37
+ ._1rus1l7x:before{background-color:var(--ds-border,#0b120e24)}
38
38
  ._1sglstnw [role=tab][aria-selected=true]:after{position:absolute}
39
39
  ._1tms1q9c [role=tab]{white-space:nowrap}
40
40
  ._1xrmidpf [role=tab]:hover:after{margin-right:0}
@@ -49,7 +49,7 @@
49
49
  ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
50
50
  ._bppridpf [role=tab][aria-selected=true]:after{margin-top:0}
51
51
  ._eid3idpf:before{margin-right:0}
52
- ._fiemln51 [role=tab][aria-selected=true]{color:var(--_1hfkvbo)}
52
+ ._fiem6x5g [role=tab][aria-selected=true]{color:var(--ds-text-selected,#1868db)}
53
53
  ._fiizidpf [role=tab]:hover:after{margin-top:0}
54
54
  ._fntnidpf:before{margin-left:0}
55
55
  ._gpbcidpf [role=tab]{margin-top:0}
@@ -71,5 +71,5 @@
71
71
  ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
72
72
  ._z5wtu2gc:before{inset-inline-start:var(--ds-space-100,8px)}
73
73
  ._zr3eidpf:before{margin-bottom:0}
74
- ._1oaz1fgx [role=tab]:hover{color:var(--_kkbq40)}
75
- ._1i2072d1 [role=tab]:active{color:var(--_71dbsd)}
74
+ ._1oazazsu [role=tab]:hover{color:var(--ds-text-subtle,#505258)}
75
+ ._1i20i7uo [role=tab]:active{color:var(--ds-text,#292a2e)}
@@ -1,11 +1,10 @@
1
- /* tab-list.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* tab-list.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./tab-list.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Children, createRef, useCallback } from 'react';
6
- import { B400, B500, N30, N500 } from '@atlaskit/theme/colors';
7
- import { useTabList } from '../hooks';
8
- import { TabContext } from '../internal/context';
6
+ import { TabContext } from '../internal/tab-context';
7
+ import useTabList from '../use-tab-list';
9
8
  var baseStyles = null;
10
9
  var tabListStyles = null;
11
10
 
@@ -89,15 +88,7 @@ var TabList = function TabList(_ref) {
89
88
  return /*#__PURE__*/React.createElement("div", {
90
89
  role: "tablist",
91
90
  ref: ref,
92
- className: ax(["_1e0c1txw _kqswh2mm _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _qwyt1qi0 _7hip15vq _1fud15vq _bb0mh2mm _1quz1425 _rzxytlke _1ofh12x7 _pryi12x7 _1a85u2gc _rmpau2gc _1dze1l2s _1tms1q9c _fiizidpf _1xrmidpf _xyihidpf _166qidpf _1lzuokkv _24g71kw7 _140sidpf _lycustnw _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1oaz1fgx _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _1b8dokkv _1n121kw7 _7p9oidpf _o2e1stnw _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _1i2072d1 _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _rsmz73hj _1m0e1kw7 _93pdidpf _1sglstnw _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _fiemln51 _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1mp41kw7 _kfgte4h9 _1cs8stnw _1russudh _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc"]),
93
- style: {
94
- "--_13a5t4u": ix("var(--ds-text-subtle, ".concat(N500, ")")),
95
- "--_kkbq40": ix("var(--ds-text-subtle, ".concat(B400, ")")),
96
- "--_71dbsd": ix("var(--ds-text, ".concat(B500, ")")),
97
- "--_1hfkvbo": ix("var(--ds-text-selected, ".concat(B400, ")")),
98
- "--_1q7mpl4": ix("var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border-selected, ".concat(B400, ")"))),
99
- "--_lvpq93": ix("var(--ds-border, ".concat(N30, ")"))
100
- }
91
+ className: ax(["_1e0c1txw _kqswh2mm _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _qwyt1qi0 _7hip15vq _1fud15vq _bb0mh2mm _1quzazsu _rzxytlke _1ofh12x7 _pryi12x7 _1a85u2gc _rmpau2gc _1dze1l2s _1tms1q9c _fiizidpf _1xrmidpf _xyihidpf _166qidpf _1lzu1uh4 _24g71kw7 _140sidpf _lycustnw _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1oazazsu _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _1b8d1uh4 _1n121kw7 _7p9oidpf _o2e1stnw _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _1i20i7uo _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _rsmzz0c1 _1m0e1kw7 _93pdidpf _1sglstnw _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _fiem6x5g _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1mp41kw7 _kfgte4h9 _1cs8stnw _1rus1l7x _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc"])
101
92
  }, childrenArray.map(function (child, index) {
102
93
  return getTabWithContext({
103
94
  tab: child,
@@ -1,6 +1,7 @@
1
1
  import React, { Fragment } from 'react';
2
2
  import { Focusable } from '@atlaskit/primitives/compiled';
3
- import { useTabPanel } from '../hooks';
3
+ import useTabPanel from '../use-tab-panel';
4
+
4
5
  // Note this is not being memoized as children is an unstable reference
5
6
  /**
6
7
  * __TabPanel__
@@ -1,6 +1,7 @@
1
1
  import React, { forwardRef } from 'react';
2
2
  import { Focusable, Text } from '@atlaskit/primitives/compiled';
3
- import { useTab } from '../hooks';
3
+ import useTab from '../use-tab';
4
+
4
5
  /**
5
6
  * __Tab__
6
7
  *
@@ -1,4 +1,4 @@
1
- /* tabs.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* tabs.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _toArray from "@babel/runtime/helpers/toArray";
4
4
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -9,13 +9,14 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
9
9
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
10
10
  import { Children, Fragment, useCallback, useRef, useState } from 'react';
11
11
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
12
- import { TabListContext, TabPanelContext } from '../internal/context';
12
+ import { TabListContext } from '../internal/tab-list-context';
13
+ import { TabPanelContext } from '../internal/tab-panel-context';
13
14
  var baseStyles = null;
14
15
  var tabsStyles = null;
15
16
  var analyticsAttributes = {
16
17
  componentName: 'tabs',
17
18
  packageName: "@atlaskit/tabs",
18
- packageVersion: "0.0.0-development"
19
+ packageVersion: "19.0.1"
19
20
  };
20
21
  var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
21
22
  var tabPanel = _ref.tabPanel,
package/dist/esm/index.js CHANGED
@@ -2,4 +2,5 @@ export { default } from './components/tabs';
2
2
  export { default as TabPanel } from './components/tab-panel';
3
3
  export { default as Tab } from './components/tab';
4
4
  export { default as TabList } from './components/tab-list';
5
- export { useTab, useTabPanel } from './hooks';
5
+ export { default as useTab } from './use-tab';
6
+ export { default as useTabPanel } from './use-tab-panel';
@@ -0,0 +1,3 @@
1
+ /* eslint-disable @repo/internal/react/require-jsdoc */
2
+ import { createContext } from 'react';
3
+ export var TabContext = /*#__PURE__*/createContext(null);
@@ -0,0 +1,3 @@
1
+ /* eslint-disable @repo/internal/react/require-jsdoc */
2
+ import { createContext } from 'react';
3
+ export var TabListContext = /*#__PURE__*/createContext(null);
@@ -0,0 +1,3 @@
1
+ /* eslint-disable @repo/internal/react/require-jsdoc */
2
+ import { createContext } from 'react';
3
+ export var TabPanelContext = /*#__PURE__*/createContext(null);
@@ -0,0 +1,14 @@
1
+ import { useContext } from 'react';
2
+ import { TabListContext } from './internal/tab-list-context';
3
+
4
+ // TODO: Fill in the hook {description}.
5
+ /**
6
+ * {description}.
7
+ */
8
+ export default function useTabList() {
9
+ var tabListData = useContext(TabListContext);
10
+ if (tabListData === null || typeof tabListData === 'undefined') {
11
+ throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
12
+ }
13
+ return tabListData;
14
+ }
@@ -0,0 +1,14 @@
1
+ import { useContext } from 'react';
2
+ import { TabPanelContext } from './internal/tab-panel-context';
3
+
4
+ // TODO: Fill in the hook {description}.
5
+ /**
6
+ * {description}.
7
+ */
8
+ export default function useTabPanel() {
9
+ var tabPanelData = useContext(TabPanelContext);
10
+ if (tabPanelData === null || typeof tabPanelData === 'undefined') {
11
+ throw Error('@atlaskit/tabs: A TabPanel must have a Tabs parent.');
12
+ }
13
+ return tabPanelData;
14
+ }
@@ -0,0 +1,14 @@
1
+ import { useContext } from 'react';
2
+ import { TabContext } from './internal/tab-context';
3
+
4
+ // TODO: Fill in the hook {description}.
5
+ /**
6
+ * {description}.
7
+ */
8
+ export default function useTab() {
9
+ var tabData = useContext(TabContext);
10
+ if (tabData == null || typeof tabData === 'undefined') {
11
+ throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
12
+ }
13
+ return tabData;
14
+ }
@@ -3,4 +3,5 @@ export { default as TabPanel } from './components/tab-panel';
3
3
  export { default as Tab } from './components/tab';
4
4
  export { default as TabList } from './components/tab-list';
5
5
  export type { TabProps, TabPanelProps, TabsProps, TabListProps, TabAttributesType, TabListAttributesType, TabPanelAttributesType, TabData, } from './types';
6
- export { useTab, useTabPanel } from './hooks';
6
+ export { default as useTab } from './use-tab';
7
+ export { default as useTabPanel } from './use-tab-panel';
@@ -0,0 +1,2 @@
1
+ import { type TabAttributesType } from '../types';
2
+ export declare const TabContext: import('react').Context<TabAttributesType | null>;
@@ -0,0 +1,2 @@
1
+ import { type TabListAttributesType } from '../types';
2
+ export declare const TabListContext: import('react').Context<TabListAttributesType | null>;
@@ -0,0 +1,2 @@
1
+ import { type TabPanelAttributesType } from '../types';
2
+ export declare const TabPanelContext: import('react').Context<TabPanelAttributesType | null>;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * {description}.
3
+ */
4
+ export default function useTabList(): import('./types').TabListAttributesType;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * {description}.
3
+ */
4
+ export default function useTabPanel(): import('./types').TabPanelAttributesType;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * {description}.
3
+ */
4
+ export default function useTab(): import('./types').TabAttributesType;
@@ -3,4 +3,5 @@ export { default as TabPanel } from './components/tab-panel';
3
3
  export { default as Tab } from './components/tab';
4
4
  export { default as TabList } from './components/tab-list';
5
5
  export type { TabProps, TabPanelProps, TabsProps, TabListProps, TabAttributesType, TabListAttributesType, TabPanelAttributesType, TabData, } from './types';
6
- export { useTab, useTabPanel } from './hooks';
6
+ export { default as useTab } from './use-tab';
7
+ export { default as useTabPanel } from './use-tab-panel';
@@ -0,0 +1,2 @@
1
+ import { type TabAttributesType } from '../types';
2
+ export declare const TabContext: import('react').Context<TabAttributesType | null>;
@@ -0,0 +1,2 @@
1
+ import { type TabListAttributesType } from '../types';
2
+ export declare const TabListContext: import('react').Context<TabListAttributesType | null>;
@@ -0,0 +1,2 @@
1
+ import { type TabPanelAttributesType } from '../types';
2
+ export declare const TabPanelContext: import('react').Context<TabPanelAttributesType | null>;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * {description}.
3
+ */
4
+ export default function useTabList(): import('./types').TabListAttributesType;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * {description}.
3
+ */
4
+ export default function useTabPanel(): import('./types').TabPanelAttributesType;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * {description}.
3
+ */
4
+ export default function useTab(): import('./types').TabAttributesType;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "18.3.5",
3
+ "version": "19.0.1",
4
4
  "description": "Tabs are used to organize content by grouping similar information on the same page.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,13 +32,12 @@
32
32
  }
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/analytics-next": "^11.1.0",
35
+ "@atlaskit/analytics-next": "^11.2.0",
36
36
  "@atlaskit/platform-feature-flags": "^1.1.0",
37
- "@atlaskit/primitives": "^18.0.0",
38
- "@atlaskit/theme": "^22.0.0",
39
- "@atlaskit/tokens": "^11.0.0",
37
+ "@atlaskit/primitives": "^18.1.0",
38
+ "@atlaskit/tokens": "^11.4.0",
40
39
  "@babel/runtime": "^7.0.0",
41
- "@compiled/react": "^0.18.6"
40
+ "@compiled/react": "^0.20.0"
42
41
  },
43
42
  "peerDependencies": {
44
43
  "react": "^18.2.0"
@@ -50,14 +49,15 @@
50
49
  "@af/visual-regression": "workspace:^",
51
50
  "@atlaskit/button": "^23.10.0",
52
51
  "@atlaskit/css": "^0.19.0",
53
- "@atlaskit/docs": "^11.5.0",
54
- "@atlaskit/ds-lib": "^5.3.0",
52
+ "@atlaskit/docs": "^11.7.0",
53
+ "@atlaskit/ds-lib": "^6.0.0",
55
54
  "@atlaskit/link": "^3.3.0",
56
55
  "@atlaskit/section-message": "^8.12.0",
57
56
  "@atlaskit/spinner": "^19.0.0",
58
- "@atlaskit/tooltip": "^20.14.0",
57
+ "@atlaskit/tooltip": "^21.0.0",
59
58
  "@atlaskit/visually-hidden": "^3.0.0",
60
59
  "@atlassian/ssr-tests": "workspace:^",
60
+ "@atlassian/structured-docs-types": "workspace:^",
61
61
  "@testing-library/react": "^16.3.0",
62
62
  "@testing-library/user-event": "^14.4.3",
63
63
  "react-dom": "^18.2.0",
package/tabs.docs.tsx ADDED
@@ -0,0 +1,51 @@
1
+ import path from 'path';
2
+
3
+ import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
4
+
5
+ const documentation: ComponentStructuredContentSource[] = [
6
+ {
7
+ name: 'Tabs',
8
+ description:
9
+ 'Tabs are used to organize content by grouping similar information on the same page.',
10
+ status: 'general-availability',
11
+ import: {
12
+ name: 'Tabs',
13
+ package: '@atlaskit/tabs',
14
+ type: 'default',
15
+ packagePath: path.resolve(__dirname),
16
+ packageJson: require('./package.json'),
17
+ },
18
+ usageGuidelines: [
19
+ 'Use to organize related content on the same page without navigating away',
20
+ 'Use for concise content or content users access regularly',
21
+ 'Limit the number of tabs to avoid overcrowding',
22
+ 'Keep tab labels concise and descriptive',
23
+ 'Use consistent tab ordering and grouping',
24
+ 'Consider responsive behavior for many tabs',
25
+ ],
26
+ contentGuidelines: [
27
+ 'Write clear, descriptive tab labels',
28
+ 'Group related content logically',
29
+ 'Use consistent naming conventions',
30
+ 'Ensure tab content is relevant and complete',
31
+ ],
32
+ accessibilityGuidelines: [
33
+ 'Ensure proper keyboard navigation between tabs',
34
+ 'Use appropriate ARIA attributes for tab panels',
35
+ 'Provide clear focus indicators',
36
+ 'Announce tab changes to screen readers',
37
+ 'Ensure tab content is accessible',
38
+ ],
39
+ examples: [
40
+ {
41
+ name: 'Tabs',
42
+ description: 'Tabs example',
43
+ source: path.resolve(__dirname, './examples/ai/tabs.tsx'),
44
+ },
45
+ ],
46
+ keywords: ['tabs', 'navigation', 'content', 'organization', 'grouping'],
47
+ categories: ['navigation'],
48
+ },
49
+ ];
50
+
51
+ export default documentation;
package/dist/cjs/hooks.js DELETED
@@ -1,29 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useTabPanel = exports.useTabList = exports.useTab = void 0;
7
- var _react = require("react");
8
- var _context = require("./internal/context");
9
- var useTab = exports.useTab = function useTab() {
10
- var tabData = (0, _react.useContext)(_context.TabContext);
11
- if (tabData == null || typeof tabData === 'undefined') {
12
- throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
13
- }
14
- return tabData;
15
- };
16
- var useTabList = exports.useTabList = function useTabList() {
17
- var tabListData = (0, _react.useContext)(_context.TabListContext);
18
- if (tabListData === null || typeof tabListData === 'undefined') {
19
- throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
20
- }
21
- return tabListData;
22
- };
23
- var useTabPanel = exports.useTabPanel = function useTabPanel() {
24
- var tabPanelData = (0, _react.useContext)(_context.TabPanelContext);
25
- if (tabPanelData === null || typeof tabPanelData === 'undefined') {
26
- throw Error('@atlaskit/tabs: A TabPanel must have a Tabs parent.');
27
- }
28
- return tabPanelData;
29
- };
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.TabPanelContext = exports.TabListContext = exports.TabContext = void 0;
7
- var _react = require("react");
8
- /* eslint-disable @repo/internal/react/require-jsdoc */
9
-
10
- var TabContext = exports.TabContext = /*#__PURE__*/(0, _react.createContext)(null);
11
- var TabListContext = exports.TabListContext = /*#__PURE__*/(0, _react.createContext)(null);
12
- var TabPanelContext = exports.TabPanelContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -1,23 +0,0 @@
1
- import { useContext } from 'react';
2
- import { TabContext, TabListContext, TabPanelContext } from './internal/context';
3
- export const useTab = () => {
4
- const tabData = useContext(TabContext);
5
- if (tabData == null || typeof tabData === 'undefined') {
6
- throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
7
- }
8
- return tabData;
9
- };
10
- export const useTabList = () => {
11
- const tabListData = useContext(TabListContext);
12
- if (tabListData === null || typeof tabListData === 'undefined') {
13
- throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
14
- }
15
- return tabListData;
16
- };
17
- export const useTabPanel = () => {
18
- const tabPanelData = useContext(TabPanelContext);
19
- if (tabPanelData === null || typeof tabPanelData === 'undefined') {
20
- throw Error('@atlaskit/tabs: A TabPanel must have a Tabs parent.');
21
- }
22
- return tabPanelData;
23
- };
package/dist/esm/hooks.js DELETED
@@ -1,23 +0,0 @@
1
- import { useContext } from 'react';
2
- import { TabContext, TabListContext, TabPanelContext } from './internal/context';
3
- export var useTab = function useTab() {
4
- var tabData = useContext(TabContext);
5
- if (tabData == null || typeof tabData === 'undefined') {
6
- throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
7
- }
8
- return tabData;
9
- };
10
- export var useTabList = function useTabList() {
11
- var tabListData = useContext(TabListContext);
12
- if (tabListData === null || typeof tabListData === 'undefined') {
13
- throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
14
- }
15
- return tabListData;
16
- };
17
- export var useTabPanel = function useTabPanel() {
18
- var tabPanelData = useContext(TabPanelContext);
19
- if (tabPanelData === null || typeof tabPanelData === 'undefined') {
20
- throw Error('@atlaskit/tabs: A TabPanel must have a Tabs parent.');
21
- }
22
- return tabPanelData;
23
- };
@@ -1,5 +0,0 @@
1
- /* eslint-disable @repo/internal/react/require-jsdoc */
2
- import { createContext } from 'react';
3
- export var TabContext = /*#__PURE__*/createContext(null);
4
- export var TabListContext = /*#__PURE__*/createContext(null);
5
- export var TabPanelContext = /*#__PURE__*/createContext(null);
@@ -1,3 +0,0 @@
1
- export declare const useTab: () => import('./types').TabAttributesType;
2
- export declare const useTabList: () => import('./types').TabListAttributesType;
3
- export declare const useTabPanel: () => import('./types').TabPanelAttributesType;
@@ -1,4 +0,0 @@
1
- import { type TabAttributesType, type TabListAttributesType, type TabPanelAttributesType } from '../types';
2
- export declare const TabContext: import('react').Context<TabAttributesType | null>;
3
- export declare const TabListContext: import('react').Context<TabListAttributesType | null>;
4
- export declare const TabPanelContext: import('react').Context<TabPanelAttributesType | null>;
@@ -1,3 +0,0 @@
1
- export declare const useTab: () => import('./types').TabAttributesType;
2
- export declare const useTabList: () => import('./types').TabListAttributesType;
3
- export declare const useTabPanel: () => import('./types').TabPanelAttributesType;
@@ -1,4 +0,0 @@
1
- import { type TabAttributesType, type TabListAttributesType, type TabPanelAttributesType } from '../types';
2
- export declare const TabContext: import('react').Context<TabAttributesType | null>;
3
- export declare const TabListContext: import('react').Context<TabListAttributesType | null>;
4
- export declare const TabPanelContext: import('react').Context<TabPanelAttributesType | null>;
@@ -1,17 +0,0 @@
1
- {
2
- "name": "@atlaskit/tabs/hooks",
3
- "main": "../dist/cjs/hooks.js",
4
- "module": "../dist/esm/hooks.js",
5
- "module:es2019": "../dist/es2019/hooks.js",
6
- "sideEffects": [
7
- "**/*.compiled.css"
8
- ],
9
- "types": "../dist/types/hooks.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/hooks.d.ts"
14
- ]
15
- }
16
- }
17
- }