@atlaskit/tabs 16.5.4 → 17.0.0
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.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/components/tab-list.compiled.css +76 -0
- package/dist/cjs/components/tab-list.js +38 -40
- package/dist/cjs/components/tab-panel.js +7 -12
- package/dist/cjs/components/tab.js +9 -9
- package/dist/cjs/components/tabs.compiled.css +10 -0
- package/dist/cjs/components/tabs.js +25 -38
- package/dist/es2019/components/tab-list.compiled.css +76 -0
- package/dist/es2019/components/tab-list.js +20 -36
- package/dist/es2019/components/tab-panel.js +4 -11
- package/dist/es2019/components/tab.js +7 -10
- package/dist/es2019/components/tabs.compiled.css +10 -0
- package/dist/es2019/components/tabs.js +20 -39
- package/dist/esm/components/tab-list.compiled.css +76 -0
- package/dist/esm/components/tab-list.js +34 -38
- package/dist/esm/components/tab-panel.js +4 -11
- package/dist/esm/components/tab.js +7 -10
- package/dist/esm/components/tabs.compiled.css +10 -0
- package/dist/esm/components/tabs.js +20 -39
- package/dist/types/components/tab-list.d.ts +2 -2
- package/dist/types/components/tab-panel.d.ts +2 -2
- package/dist/types/components/tab.d.ts +2 -2
- package/dist/types/components/tabs.d.ts +2 -2
- package/dist/types-ts4.5/components/tab-list.d.ts +2 -2
- package/dist/types-ts4.5/components/tab-panel.d.ts +2 -2
- package/dist/types-ts4.5/components/tab.d.ts +2 -2
- package/dist/types-ts4.5/components/tabs.d.ts +2 -2
- package/package.json +5 -4
- package/dist/cjs/internal/colors.js +0 -20
- package/dist/cjs/internal/styles.js +0 -176
- package/dist/es2019/internal/colors.js +0 -14
- package/dist/es2019/internal/styles.js +0 -166
- package/dist/esm/internal/colors.js +0 -14
- package/dist/esm/internal/styles.js +0 -170
- package/dist/types/internal/colors.d.ts +0 -13
- package/dist/types/internal/styles.d.ts +0 -6
- package/dist/types-ts4.5/internal/colors.d.ts +0 -13
- package/dist/types-ts4.5/internal/styles.d.ts +0 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/tabs
|
|
2
2
|
|
|
3
|
+
## 17.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [#168353](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168353)
|
|
8
|
+
[`cbd859b752028`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cbd859b752028) -
|
|
9
|
+
Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
|
|
10
|
+
the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
|
|
11
|
+
|
|
12
|
+
Please note, in order to use this version of `@atlaskit/tabs`, you will need to ensure that your
|
|
13
|
+
bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in support
|
|
14
|
+
for `.css` imports, so you may not need to do anything. If you are using a different bundler,
|
|
15
|
+
please refer to the documentation for that bundler to understand how to handle `.css` imports.
|
|
16
|
+
|
|
17
|
+
For more information on the migration, please refer to
|
|
18
|
+
[RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
|
|
19
|
+
|
|
3
20
|
## 16.5.4
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
|
|
2
|
+
._13xajb7m [role=tab]{padding:var(--_1xs0znw)}
|
|
3
|
+
._17hygqwt [role=tab]:hover:after{border-radius:var(--ds-border-radius-050,2px)}
|
|
4
|
+
._1jakgqwt [role=tab]:active:after{border-radius:var(--ds-border-radius-050,2px)}
|
|
5
|
+
._1yt4ze3t{padding:var(--ds-space-0,0)}
|
|
6
|
+
._9r9ugqwt [role=tab][aria-selected=true]:after{border-radius:var(--ds-border-radius-050,2px)}
|
|
7
|
+
._rfx3gqwt:before{border-radius:var(--ds-border-radius-050,2px)}
|
|
8
|
+
._1b8d1hjo [role=tab]:active:after{border-block-end:var(--_1nddtxm)}
|
|
9
|
+
._1b8dpl7t [role=tab]:active:after{border-block-end:var(--_1b4y4br)}
|
|
10
|
+
._1lzu1hjo [role=tab]:hover:after{border-block-end:var(--_1nddtxm)}
|
|
11
|
+
._1lzupl7t [role=tab]:hover:after{border-block-end:var(--_1b4y4br)}
|
|
12
|
+
._rsmz8hos [role=tab][aria-selected=true]:after{border-block-end:var(--_1rlpysg)}
|
|
13
|
+
._rsmzmfou [role=tab][aria-selected=true]:after{border-block-end:var(--_hdabma)}._10vzidpf [role=tab]{margin-right:0}
|
|
14
|
+
._140sidpf [role=tab]:hover:after{height:0}
|
|
15
|
+
._15d8b3bt [role=tab]:hover:after{content:""}
|
|
16
|
+
._15plidpf [role=tab]{margin-left:0}
|
|
17
|
+
._166qidpf [role=tab]:hover:after{margin-left:0}
|
|
18
|
+
._16u6b3bt [role=tab]:active:after{content:""}
|
|
19
|
+
._170tidpf [role=tab]:active:after{margin-right:0}
|
|
20
|
+
._1c9uu2gc [role=tab]:active:after{inset-inline-start:var(--ds-space-100,8px)}
|
|
21
|
+
._1cs8stnw:before{position:absolute}
|
|
22
|
+
._1dze1l2s [role=tab]{text-overflow:ellipsis}
|
|
23
|
+
._1e0c1txw{display:flex}
|
|
24
|
+
._1enwidpf:before{inset-inline-end:0}
|
|
25
|
+
._1fkridpf:before{inset-block-end:0}
|
|
26
|
+
._1fud15vq [role=tab]{overflow-y:hidden}
|
|
27
|
+
._1fztidpf [role=tab]:hover:after{inset-block-end:0}
|
|
28
|
+
._1jjcu2gc [role=tab][aria-selected=true]:after{inset-inline-start:var(--ds-space-100,8px)}
|
|
29
|
+
._1ksob3bt [role=tab][aria-selected=true]:after{content:""}
|
|
30
|
+
._1kt9b3bt:before{content:""}
|
|
31
|
+
._1lbou2gc [role=tab]:active:after{inset-inline-end:var(--ds-space-100,8px)}
|
|
32
|
+
._1m0e1kw7 [role=tab][aria-selected=true]:after{width:inherit}
|
|
33
|
+
._1mbxidpf [role=tab][aria-selected=true]:after{margin-right:0}
|
|
34
|
+
._1mmwidpf [role=tab]{margin-bottom:0}
|
|
35
|
+
._1mp41kw7:before{width:inherit}
|
|
36
|
+
._1n121kw7 [role=tab]:active:after{width:inherit}
|
|
37
|
+
._1nvfidpf [role=tab]:active:after{margin-left:0}
|
|
38
|
+
._1olcu2gc [role=tab]:hover:after{inset-inline-start:var(--ds-space-100,8px)}
|
|
39
|
+
._1p9sidpf [role=tab][aria-selected=true]:after{inset-block-end:0}
|
|
40
|
+
._1qa1u2gc [role=tab][aria-selected=true]:after{inset-inline-end:var(--ds-space-100,8px)}
|
|
41
|
+
._1quz1425 [role=tab]{color:var(--_13a5t4u)}
|
|
42
|
+
._1russudh:before{background-color:var(--_lvpq93)}
|
|
43
|
+
._1sglstnw [role=tab][aria-selected=true]:after{position:absolute}
|
|
44
|
+
._1tms1q9c [role=tab]{white-space:nowrap}
|
|
45
|
+
._1xrmidpf [role=tab]:hover:after{margin-right:0}
|
|
46
|
+
._1yk1idpf [role=tab]:active:after{inset-block-end:0}
|
|
47
|
+
._24g71kw7 [role=tab]:hover:after{width:inherit}
|
|
48
|
+
._7hip15vq [role=tab]{overflow-x:hidden}
|
|
49
|
+
._7p9oidpf [role=tab]:active:after{height:0}
|
|
50
|
+
._93pdidpf [role=tab][aria-selected=true]:after{height:0}
|
|
51
|
+
._ahbqx0bf{margin-inline-start:var(--ds-space-negative-100,-8px)}
|
|
52
|
+
._bb0mh2mm [role=tab]{position:relative}
|
|
53
|
+
._bppridpf [role=tab][aria-selected=true]:after{margin-top:0}
|
|
54
|
+
._eid3idpf:before{margin-right:0}
|
|
55
|
+
._fiemln51 [role=tab][aria-selected=true]{color:var(--_1hfkvbo)}
|
|
56
|
+
._fiizidpf [role=tab]:hover:after{margin-top:0}
|
|
57
|
+
._fntnidpf:before{margin-left:0}
|
|
58
|
+
._gpbcidpf [role=tab]{margin-top:0}
|
|
59
|
+
._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
|
|
60
|
+
._kfgt1bk5:before{height:var(--ds-border-width-outline,2px)}
|
|
61
|
+
._kfgte4h9:before{height:var(--ds-border-width,1px)}
|
|
62
|
+
._kn0bidpf [role=tab][aria-selected=true]:after{margin-bottom:0}
|
|
63
|
+
._kqswh2mm{position:relative}
|
|
64
|
+
._lycustnw [role=tab]:hover:after{position:absolute}
|
|
65
|
+
._o2e1stnw [role=tab]:active:after{position:absolute}
|
|
66
|
+
._pascidpf:before{margin-top:0}
|
|
67
|
+
._rzxytlke [role=tab]{cursor:pointer}
|
|
68
|
+
._w9ewidpf [role=tab]:active:after{margin-top:0}
|
|
69
|
+
._wd7eu2gc [role=tab]:hover:after{inset-inline-end:var(--ds-space-100,8px)}
|
|
70
|
+
._wsgdidpf [role=tab][aria-selected=true]:after{margin-left:0}
|
|
71
|
+
._xyihidpf [role=tab]:hover:after{margin-bottom:0}
|
|
72
|
+
._y1g1idpf [role=tab]:active:after{margin-bottom:0}
|
|
73
|
+
._z5wtu2gc:before{inset-inline-start:var(--ds-space-100,8px)}
|
|
74
|
+
._zr3eidpf:before{margin-bottom:0}
|
|
75
|
+
._1oaz1fgx [role=tab]:hover{color:var(--_kkbq40)}
|
|
76
|
+
._1i2072d1 [role=tab]:active{color:var(--_71dbsd)}
|
|
@@ -1,32 +1,24 @@
|
|
|
1
|
+
/* tab-list.tsx generated by @compiled/babel-plugin v0.32.2 */
|
|
1
2
|
"use strict";
|
|
2
3
|
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
6
8
|
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
+
require("./tab-list.compiled.css");
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var React = _react;
|
|
12
|
+
var _runtime = require("@compiled/react/runtime");
|
|
9
13
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
|
+
var _colors = require("@atlaskit/theme/colors");
|
|
10
15
|
var _hooks = require("../hooks");
|
|
11
16
|
var _context = require("../internal/context");
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
|
-
|
|
20
|
-
var baseStyles = (0, _react2.css)({
|
|
21
|
-
display: 'flex',
|
|
22
|
-
padding: "var(--ds-space-0, 0px)",
|
|
23
|
-
position: 'relative'
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
27
|
-
var tabListStyles = (0, _styles.getTabListStyles)();
|
|
28
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
29
|
-
var tabListStylesOld = (0, _styles.getTabListStylesOld)();
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
|
+
var baseStyles = null;
|
|
20
|
+
var tabListStyles = null;
|
|
21
|
+
var tabListStylesOld = null;
|
|
30
22
|
|
|
31
23
|
/**
|
|
32
24
|
* __TabList__
|
|
@@ -88,7 +80,7 @@ var TabList = function TabList(_ref) {
|
|
|
88
80
|
var tab = _ref2.tab,
|
|
89
81
|
isSelected = _ref2.isSelected,
|
|
90
82
|
index = _ref2.index;
|
|
91
|
-
return
|
|
83
|
+
return /*#__PURE__*/React.createElement(_context.TabContext.Provider, {
|
|
92
84
|
value: {
|
|
93
85
|
onClick: function onClick() {
|
|
94
86
|
return onChange(index);
|
|
@@ -105,24 +97,30 @@ var TabList = function TabList(_ref) {
|
|
|
105
97
|
key: index
|
|
106
98
|
}, tab);
|
|
107
99
|
}, [length, onKeyDown, onChange, tabsId]);
|
|
108
|
-
return (
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
//
|
|
112
|
-
|
|
113
|
-
(0,
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
,
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
}
|
|
126
|
-
)
|
|
100
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
101
|
+
role: "tablist",
|
|
102
|
+
ref: ref
|
|
103
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
104
|
+
,
|
|
105
|
+
className: (0, _runtime.ax)(["_1e0c1txw _1yt4ze3t _kqswh2mm", (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _13xajb7m _bb0mh2mm _1quz1425 _rzxytlke _7hip15vq _1fud15vq _1dze1l2s _1tms1q9c _1oaz1fgx _24g71kw7 _140sidpf _fiizidpf _1xrmidpf _xyihidpf _166qidpf _lycustnw _1lzu1hjo _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1i2072d1 _1n121kw7 _7p9oidpf _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _o2e1stnw _1b8d1hjo _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _fiemln51 _1m0e1kw7 _93pdidpf _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _1sglstnw _rsmzmfou _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _1mp41kw7 _kfgte4h9 _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1cs8stnw _1russudh _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc" : "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _13xajb7m _bb0mh2mm _1quz1425 _rzxytlke _7hip15vq _1fud15vq _1dze1l2s _1tms1q9c _1oaz1fgx _24g71kw7 _140sidpf _fiizidpf _1xrmidpf _xyihidpf _166qidpf _lycustnw _1lzupl7t _17hygqwt _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1i2072d1 _1n121kw7 _7p9oidpf _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _o2e1stnw _1b8dpl7t _1jakgqwt _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _fiemln51 _1m0e1kw7 _93pdidpf _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _1sglstnw _rsmz8hos _9r9ugqwt _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _1mp41kw7 _kfgt1bk5 _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1cs8stnw _1russudh _rfx3gqwt _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc"]),
|
|
106
|
+
style: {
|
|
107
|
+
"--_1xs0znw": (0, _runtime.ix)("var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-100, 8px)")),
|
|
108
|
+
"--_13a5t4u": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N500, ")")),
|
|
109
|
+
"--_kkbq40": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.B400, ")")),
|
|
110
|
+
"--_1nddtxm": (0, _runtime.ix)("var(--ds-border-width-indicator, 3px)".concat(" solid ", "var(--ds-border, transparent)")),
|
|
111
|
+
"--_71dbsd": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.B500, ")")),
|
|
112
|
+
"--_1hfkvbo": (0, _runtime.ix)("var(--ds-text-selected, ".concat(_colors.B400, ")")),
|
|
113
|
+
"--_hdabma": (0, _runtime.ix)("var(--ds-border-width-indicator, 3px)".concat(" solid ", "var(--ds-border-selected, ".concat(_colors.B400, ")"))),
|
|
114
|
+
"--_lvpq93": (0, _runtime.ix)("var(--ds-border, ".concat(_colors.N30, ")")),
|
|
115
|
+
"--_1b4y4br": (0, _runtime.ix)("var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border, transparent)")),
|
|
116
|
+
"--_1rlpysg": (0, _runtime.ix)("var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border-selected, ".concat(_colors.B400, ")")))
|
|
117
|
+
}
|
|
118
|
+
}, childrenArray.map(function (child, index) {
|
|
119
|
+
return getTabWithContext({
|
|
120
|
+
tab: child,
|
|
121
|
+
index: index,
|
|
122
|
+
isSelected: index === selected
|
|
123
|
+
});
|
|
124
|
+
}));
|
|
127
125
|
};
|
|
128
126
|
var _default = exports.default = TabList;
|
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.default = void 0;
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
var _react2 = require("@emotion/react");
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
|
|
11
11
|
var _hooks = require("../hooks");
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
* @jsx jsx
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
18
|
-
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
14
|
// Note this is not being memoized as children is an unstable reference
|
|
20
15
|
/**
|
|
21
16
|
* __TabPanel__
|
|
@@ -35,15 +30,15 @@ var TabPanel = function TabPanel(_ref) {
|
|
|
35
30
|
hidden = _useTabPanel.hidden,
|
|
36
31
|
ariaLabelledBy = _useTabPanel['aria-labelledby'],
|
|
37
32
|
tabIndex = _useTabPanel.tabIndex;
|
|
38
|
-
return
|
|
33
|
+
return /*#__PURE__*/_react.default.createElement(_focusRing.default, {
|
|
39
34
|
isInset: true
|
|
40
|
-
},
|
|
35
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
41
36
|
"data-testid": testId,
|
|
42
37
|
role: role,
|
|
43
38
|
id: id,
|
|
44
39
|
hidden: hidden,
|
|
45
40
|
"aria-labelledby": ariaLabelledBy,
|
|
46
41
|
tabIndex: tabIndex
|
|
47
|
-
},
|
|
42
|
+
}, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children)));
|
|
48
43
|
};
|
|
49
44
|
var _default = exports.default = TabPanel;
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.default = void 0;
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
var _react2 = require("@emotion/react");
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
|
|
11
11
|
var _primitives = require("@atlaskit/primitives");
|
|
12
12
|
var _hooks = require("../hooks");
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
15
|
/**
|
|
14
|
-
*
|
|
15
|
-
* @
|
|
16
|
+
* TODO - https://product-fabric.atlassian.net/browse/DSP-21564
|
|
17
|
+
* Will be moved to @atlaskit/primitives/compiled, VRs will be updated.
|
|
16
18
|
*/
|
|
17
19
|
|
|
18
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
|
-
|
|
20
20
|
/**
|
|
21
21
|
* __Tab__
|
|
22
22
|
*
|
|
@@ -39,9 +39,9 @@ var Tab = /*#__PURE__*/(0, _react.forwardRef)(function Tab(_ref, ref) {
|
|
|
39
39
|
onKeyDown = _useTab.onKeyDown,
|
|
40
40
|
role = _useTab.role,
|
|
41
41
|
tabIndex = _useTab.tabIndex;
|
|
42
|
-
return
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement(_focusRing.default, {
|
|
43
43
|
isInset: true
|
|
44
|
-
},
|
|
44
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
45
45
|
"data-testid": testId,
|
|
46
46
|
onClick: onClick,
|
|
47
47
|
id: id,
|
|
@@ -53,7 +53,7 @@ var Tab = /*#__PURE__*/(0, _react.forwardRef)(function Tab(_ref, ref) {
|
|
|
53
53
|
role: role,
|
|
54
54
|
tabIndex: tabIndex,
|
|
55
55
|
ref: ref
|
|
56
|
-
},
|
|
56
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
57
57
|
weight: "medium",
|
|
58
58
|
color: "inherit",
|
|
59
59
|
maxLines: 1
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
._16jlkb7n{flex-grow:1}
|
|
2
|
+
._185bglyw._185bglyw>[hidden]{display:none}
|
|
3
|
+
._18i0kb7n [role=tabpanel]{flex-grow:1}
|
|
4
|
+
._1c3y1txw [role=tabpanel]{display:flex}
|
|
5
|
+
._1e0c1txw{display:flex}
|
|
6
|
+
._1tkeidpf{min-height:0}
|
|
7
|
+
._2lx21bp4{flex-direction:column}
|
|
8
|
+
._ftfaidpf [role=tabpanel]{min-height:0}
|
|
9
|
+
._i0dl1osq{flex-basis:100%}
|
|
10
|
+
._p12f1osq{max-width:100%}
|
|
@@ -1,38 +1,31 @@
|
|
|
1
|
+
/* tabs.tsx generated by @compiled/babel-plugin v0.32.2 */
|
|
1
2
|
"use strict";
|
|
2
3
|
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
6
|
Object.defineProperty(exports, "__esModule", {
|
|
5
7
|
value: true
|
|
6
8
|
});
|
|
7
9
|
exports.default = void 0;
|
|
10
|
+
require("./tabs.compiled.css");
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var React = _react;
|
|
13
|
+
var _runtime = require("@compiled/react/runtime");
|
|
8
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
15
|
var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
|
|
10
16
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
-
var _react = require("react");
|
|
12
|
-
var _react2 = require("@emotion/react");
|
|
13
17
|
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
|
|
14
18
|
var _context = require("../internal/context");
|
|
15
|
-
|
|
19
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
20
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
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; }
|
|
17
|
-
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; }
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
21
|
-
var baseStyles = (0, _react2.css)({
|
|
22
|
-
display: 'flex',
|
|
23
|
-
maxWidth: '100%',
|
|
24
|
-
minHeight: '0%',
|
|
25
|
-
flexBasis: '100%',
|
|
26
|
-
flexDirection: 'column',
|
|
27
|
-
flexGrow: 1
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
31
|
-
var tabsStyles = (0, _styles.getTabsStyles)();
|
|
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; }
|
|
23
|
+
var baseStyles = null;
|
|
24
|
+
var tabsStyles = null;
|
|
32
25
|
var analyticsAttributes = {
|
|
33
26
|
componentName: 'tabs',
|
|
34
27
|
packageName: "@atlaskit/tabs",
|
|
35
|
-
packageVersion: "
|
|
28
|
+
packageVersion: "17.0.0"
|
|
36
29
|
};
|
|
37
30
|
var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
|
|
38
31
|
var tabPanel = _ref.tabPanel,
|
|
@@ -41,7 +34,7 @@ var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
|
|
|
41
34
|
tabsId = _ref.tabsId;
|
|
42
35
|
return (
|
|
43
36
|
// Ensure tabPanel exists in case it has been removed
|
|
44
|
-
tabPanel &&
|
|
37
|
+
tabPanel && /*#__PURE__*/React.createElement(_context.TabPanelContext.Provider, {
|
|
45
38
|
value: {
|
|
46
39
|
role: 'tabpanel',
|
|
47
40
|
id: "".concat(tabsId, "-").concat(index, "-tab"),
|
|
@@ -119,23 +112,17 @@ var Tabs = function Tabs(props) {
|
|
|
119
112
|
tabsId: id
|
|
120
113
|
});
|
|
121
114
|
});
|
|
122
|
-
return (
|
|
123
|
-
|
|
124
|
-
//
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
,
|
|
131
|
-
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
selected: selected,
|
|
135
|
-
onChange: onChangeAnalytics,
|
|
136
|
-
tabsId: id
|
|
137
|
-
}
|
|
138
|
-
}, tabList), (0, _react2.jsx)(_react.Fragment, null, tabPanelsWithContext))
|
|
139
|
-
);
|
|
115
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
116
|
+
"data-testid": testId
|
|
117
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
118
|
+
,
|
|
119
|
+
className: (0, _runtime.ax)(["_1e0c1txw _p12f1osq _1tkeidpf _i0dl1osq _2lx21bp4 _16jlkb7n", "_1c3y1txw _ftfaidpf _18i0kb7n _185bglyw"])
|
|
120
|
+
}, /*#__PURE__*/React.createElement(_context.TabListContext.Provider, {
|
|
121
|
+
value: {
|
|
122
|
+
selected: selected,
|
|
123
|
+
onChange: onChangeAnalytics,
|
|
124
|
+
tabsId: id
|
|
125
|
+
}
|
|
126
|
+
}, tabList), /*#__PURE__*/React.createElement(_react.Fragment, null, tabPanelsWithContext));
|
|
140
127
|
};
|
|
141
128
|
var _default = exports.default = Tabs;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
|
|
2
|
+
._13xael4l [role=tab]{padding:var(--ds-space-075,6px) var(--ds-space-100,8px)}
|
|
3
|
+
._17hygqwt [role=tab]:hover:after{border-radius:var(--ds-border-radius-050,2px)}
|
|
4
|
+
._1jakgqwt [role=tab]:active:after{border-radius:var(--ds-border-radius-050,2px)}
|
|
5
|
+
._1yt4ze3t{padding:var(--ds-space-0,0)}
|
|
6
|
+
._9r9ugqwt [role=tab][aria-selected=true]:after{border-radius:var(--ds-border-radius-050,2px)}
|
|
7
|
+
._rfx3gqwt:before{border-radius:var(--ds-border-radius-050,2px)}
|
|
8
|
+
._1b8d1ec3 [role=tab]:active:after{border-block-end:var(--ds-border-width-indicator,3px) solid var(--ds-border,transparent)}
|
|
9
|
+
._1b8d990c [role=tab]:active:after{border-block-end:var(--ds-border-width-outline,2px) solid var(--ds-border,transparent)}
|
|
10
|
+
._1lzu1ec3 [role=tab]:hover:after{border-block-end:var(--ds-border-width-indicator,3px) solid var(--ds-border,transparent)}
|
|
11
|
+
._1lzu990c [role=tab]:hover:after{border-block-end:var(--ds-border-width-outline,2px) solid var(--ds-border,transparent)}
|
|
12
|
+
._rsmz174y [role=tab][aria-selected=true]:after{border-block-end:var(--ds-border-width-indicator,3px) solid var(--ds-border-selected,#0052cc)}
|
|
13
|
+
._rsmz1gcm [role=tab][aria-selected=true]:after{border-block-end:var(--ds-border-width-outline,2px) solid var(--ds-border-selected,#0052cc)}._10vzidpf [role=tab]{margin-right:0}
|
|
14
|
+
._140sidpf [role=tab]:hover:after{height:0}
|
|
15
|
+
._15d8b3bt [role=tab]:hover:after{content:""}
|
|
16
|
+
._15plidpf [role=tab]{margin-left:0}
|
|
17
|
+
._166qidpf [role=tab]:hover:after{margin-left:0}
|
|
18
|
+
._16u6b3bt [role=tab]:active:after{content:""}
|
|
19
|
+
._170tidpf [role=tab]:active:after{margin-right:0}
|
|
20
|
+
._1c9uu2gc [role=tab]:active:after{inset-inline-start:var(--ds-space-100,8px)}
|
|
21
|
+
._1cs8stnw:before{position:absolute}
|
|
22
|
+
._1dze1l2s [role=tab]{text-overflow:ellipsis}
|
|
23
|
+
._1e0c1txw{display:flex}
|
|
24
|
+
._1enwidpf:before{inset-inline-end:0}
|
|
25
|
+
._1fkridpf:before{inset-block-end:0}
|
|
26
|
+
._1fud15vq [role=tab]{overflow-y:hidden}
|
|
27
|
+
._1fztidpf [role=tab]:hover:after{inset-block-end:0}
|
|
28
|
+
._1jjcu2gc [role=tab][aria-selected=true]:after{inset-inline-start:var(--ds-space-100,8px)}
|
|
29
|
+
._1ksob3bt [role=tab][aria-selected=true]:after{content:""}
|
|
30
|
+
._1kt9b3bt:before{content:""}
|
|
31
|
+
._1lbou2gc [role=tab]:active:after{inset-inline-end:var(--ds-space-100,8px)}
|
|
32
|
+
._1m0e1kw7 [role=tab][aria-selected=true]:after{width:inherit}
|
|
33
|
+
._1mbxidpf [role=tab][aria-selected=true]:after{margin-right:0}
|
|
34
|
+
._1mmwidpf [role=tab]{margin-bottom:0}
|
|
35
|
+
._1mp41kw7:before{width:inherit}
|
|
36
|
+
._1n121kw7 [role=tab]:active:after{width:inherit}
|
|
37
|
+
._1nvfidpf [role=tab]:active:after{margin-left:0}
|
|
38
|
+
._1olcu2gc [role=tab]:hover:after{inset-inline-start:var(--ds-space-100,8px)}
|
|
39
|
+
._1p9sidpf [role=tab][aria-selected=true]:after{inset-block-end:0}
|
|
40
|
+
._1qa1u2gc [role=tab][aria-selected=true]:after{inset-inline-end:var(--ds-space-100,8px)}
|
|
41
|
+
._1quzjjyb [role=tab]{color:var(--ds-text-subtle,#42526e)}
|
|
42
|
+
._1rushloo:before{background-color:var(--ds-border,#ebecf0)}
|
|
43
|
+
._1sglstnw [role=tab][aria-selected=true]:after{position:absolute}
|
|
44
|
+
._1tms1q9c [role=tab]{white-space:nowrap}
|
|
45
|
+
._1xrmidpf [role=tab]:hover:after{margin-right:0}
|
|
46
|
+
._1yk1idpf [role=tab]:active:after{inset-block-end:0}
|
|
47
|
+
._24g71kw7 [role=tab]:hover:after{width:inherit}
|
|
48
|
+
._7hip15vq [role=tab]{overflow-x:hidden}
|
|
49
|
+
._7p9oidpf [role=tab]:active:after{height:0}
|
|
50
|
+
._93pdidpf [role=tab][aria-selected=true]:after{height:0}
|
|
51
|
+
._ahbqx0bf{margin-inline-start:var(--ds-space-negative-100,-8px)}
|
|
52
|
+
._bb0mh2mm [role=tab]{position:relative}
|
|
53
|
+
._bppridpf [role=tab][aria-selected=true]:after{margin-top:0}
|
|
54
|
+
._eid3idpf:before{margin-right:0}
|
|
55
|
+
._fiem1ldt [role=tab][aria-selected=true]{color:var(--ds-text-selected,#0052cc)}
|
|
56
|
+
._fiizidpf [role=tab]:hover:after{margin-top:0}
|
|
57
|
+
._fntnidpf:before{margin-left:0}
|
|
58
|
+
._gpbcidpf [role=tab]{margin-top:0}
|
|
59
|
+
._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
|
|
60
|
+
._kfgt1bk5:before{height:var(--ds-border-width-outline,2px)}
|
|
61
|
+
._kfgte4h9:before{height:var(--ds-border-width,1px)}
|
|
62
|
+
._kn0bidpf [role=tab][aria-selected=true]:after{margin-bottom:0}
|
|
63
|
+
._kqswh2mm{position:relative}
|
|
64
|
+
._lycustnw [role=tab]:hover:after{position:absolute}
|
|
65
|
+
._o2e1stnw [role=tab]:active:after{position:absolute}
|
|
66
|
+
._pascidpf:before{margin-top:0}
|
|
67
|
+
._rzxytlke [role=tab]{cursor:pointer}
|
|
68
|
+
._w9ewidpf [role=tab]:active:after{margin-top:0}
|
|
69
|
+
._wd7eu2gc [role=tab]:hover:after{inset-inline-end:var(--ds-space-100,8px)}
|
|
70
|
+
._wsgdidpf [role=tab][aria-selected=true]:after{margin-left:0}
|
|
71
|
+
._xyihidpf [role=tab]:hover:after{margin-bottom:0}
|
|
72
|
+
._y1g1idpf [role=tab]:active:after{margin-bottom:0}
|
|
73
|
+
._z5wtu2gc:before{inset-inline-start:var(--ds-space-100,8px)}
|
|
74
|
+
._zr3eidpf:before{margin-bottom:0}
|
|
75
|
+
._1oazdud1 [role=tab]:hover{color:var(--ds-text-subtle,#0052cc)}
|
|
76
|
+
._1i201ouy [role=tab]:active{color:var(--ds-text,#0747a6)}
|
|
@@ -1,25 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*
|
|
4
|
-
|
|
1
|
+
/* tab-list.tsx generated by @compiled/babel-plugin v0.32.2 */
|
|
2
|
+
import "./tab-list.compiled.css";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { Children, createRef, useCallback } from 'react';
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { css, jsx } from '@emotion/react';
|
|
9
6
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
+
import { B400, B500, N30, N500 } from '@atlaskit/theme/colors';
|
|
10
8
|
import { useTabList } from '../hooks';
|
|
11
9
|
import { TabContext } from '../internal/context';
|
|
12
|
-
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
padding: "var(--ds-space-0, 0px)",
|
|
16
|
-
position: 'relative'
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
20
|
-
const tabListStyles = getTabListStyles();
|
|
21
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
22
|
-
const tabListStylesOld = getTabListStylesOld();
|
|
10
|
+
const baseStyles = null;
|
|
11
|
+
const tabListStyles = null;
|
|
12
|
+
const tabListStylesOld = null;
|
|
23
13
|
|
|
24
14
|
/**
|
|
25
15
|
* __TabList__
|
|
@@ -83,7 +73,7 @@ const TabList = ({
|
|
|
83
73
|
tab,
|
|
84
74
|
isSelected,
|
|
85
75
|
index
|
|
86
|
-
}) =>
|
|
76
|
+
}) => /*#__PURE__*/React.createElement(TabContext.Provider, {
|
|
87
77
|
value: {
|
|
88
78
|
onClick: () => onChange(index),
|
|
89
79
|
onKeyDown,
|
|
@@ -97,22 +87,16 @@ const TabList = ({
|
|
|
97
87
|
},
|
|
98
88
|
key: index
|
|
99
89
|
}, tab), [length, onKeyDown, onChange, tabsId]);
|
|
100
|
-
return (
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
//
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
}, childrenArray.map((child, index) => getTabWithContext({
|
|
112
|
-
tab: child,
|
|
113
|
-
index,
|
|
114
|
-
isSelected: index === selected
|
|
115
|
-
})))
|
|
116
|
-
);
|
|
90
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
91
|
+
role: "tablist",
|
|
92
|
+
ref: ref
|
|
93
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
94
|
+
,
|
|
95
|
+
className: ax(["_1e0c1txw _1yt4ze3t _kqswh2mm", fg('platform-component-visual-refresh') ? "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _13xael4l _bb0mh2mm _1quzjjyb _rzxytlke _7hip15vq _1fud15vq _1dze1l2s _1tms1q9c _1oazdud1 _24g71kw7 _140sidpf _fiizidpf _1xrmidpf _xyihidpf _166qidpf _lycustnw _1lzu1ec3 _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1i201ouy _1n121kw7 _7p9oidpf _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _o2e1stnw _1b8d1ec3 _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _fiem1ldt _1m0e1kw7 _93pdidpf _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _1sglstnw _rsmz174y _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _1mp41kw7 _kfgte4h9 _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1cs8stnw _1rushloo _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc" : "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _13xael4l _bb0mh2mm _1quzjjyb _rzxytlke _7hip15vq _1fud15vq _1dze1l2s _1tms1q9c _1oazdud1 _24g71kw7 _140sidpf _fiizidpf _1xrmidpf _xyihidpf _166qidpf _lycustnw _1lzu990c _17hygqwt _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1i201ouy _1n121kw7 _7p9oidpf _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _o2e1stnw _1b8d990c _1jakgqwt _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _fiem1ldt _1m0e1kw7 _93pdidpf _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _1sglstnw _rsmz1gcm _9r9ugqwt _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _1mp41kw7 _kfgt1bk5 _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1cs8stnw _1rushloo _rfx3gqwt _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc"])
|
|
96
|
+
}, childrenArray.map((child, index) => getTabWithContext({
|
|
97
|
+
tab: child,
|
|
98
|
+
index,
|
|
99
|
+
isSelected: index === selected
|
|
100
|
+
})));
|
|
117
101
|
};
|
|
118
102
|
export default TabList;
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { Fragment } from 'react';
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { jsx } from '@emotion/react';
|
|
1
|
+
import React, { Fragment } from 'react';
|
|
9
2
|
import FocusRing from '@atlaskit/focus-ring';
|
|
10
3
|
import { useTabPanel } from '../hooks';
|
|
11
4
|
// Note this is not being memoized as children is an unstable reference
|
|
@@ -29,15 +22,15 @@ const TabPanel = ({
|
|
|
29
22
|
'aria-labelledby': ariaLabelledBy,
|
|
30
23
|
tabIndex
|
|
31
24
|
} = useTabPanel();
|
|
32
|
-
return
|
|
25
|
+
return /*#__PURE__*/React.createElement(FocusRing, {
|
|
33
26
|
isInset: true
|
|
34
|
-
},
|
|
27
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
35
28
|
"data-testid": testId,
|
|
36
29
|
role: role,
|
|
37
30
|
id: id,
|
|
38
31
|
hidden: hidden,
|
|
39
32
|
"aria-labelledby": ariaLabelledBy,
|
|
40
33
|
tabIndex: tabIndex
|
|
41
|
-
},
|
|
34
|
+
}, /*#__PURE__*/React.createElement(Fragment, null, children)));
|
|
42
35
|
};
|
|
43
36
|
export default TabPanel;
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import FocusRing from '@atlaskit/focus-ring';
|
|
1
3
|
/**
|
|
2
|
-
*
|
|
3
|
-
* @
|
|
4
|
+
* TODO - https://product-fabric.atlassian.net/browse/DSP-21564
|
|
5
|
+
* Will be moved to @atlaskit/primitives/compiled, VRs will be updated.
|
|
4
6
|
*/
|
|
5
|
-
import { forwardRef } from 'react';
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { jsx } from '@emotion/react';
|
|
9
|
-
import FocusRing from '@atlaskit/focus-ring';
|
|
10
7
|
import { Text } from '@atlaskit/primitives';
|
|
11
8
|
import { useTab } from '../hooks';
|
|
12
9
|
/**
|
|
@@ -33,9 +30,9 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
|
|
|
33
30
|
role,
|
|
34
31
|
tabIndex
|
|
35
32
|
} = useTab();
|
|
36
|
-
return
|
|
33
|
+
return /*#__PURE__*/React.createElement(FocusRing, {
|
|
37
34
|
isInset: true
|
|
38
|
-
},
|
|
35
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
39
36
|
"data-testid": testId,
|
|
40
37
|
onClick: onClick,
|
|
41
38
|
id: id,
|
|
@@ -47,7 +44,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
|
|
|
47
44
|
role: role,
|
|
48
45
|
tabIndex: tabIndex,
|
|
49
46
|
ref: ref
|
|
50
|
-
},
|
|
47
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
51
48
|
weight: "medium",
|
|
52
49
|
color: "inherit",
|
|
53
50
|
maxLines: 1
|