@atlaskit/tabs 13.3.10 → 13.3.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/__perf__/default.tsx +0 -1
- package/dist/cjs/components/tab-list.js +19 -36
- package/dist/cjs/components/tab-panel.js +2 -10
- package/dist/cjs/components/tab.js +1 -7
- package/dist/cjs/components/tabs.js +32 -53
- package/dist/cjs/hooks.js +0 -14
- package/dist/cjs/index.js +0 -6
- package/dist/cjs/internal/colors.js +0 -8
- package/dist/cjs/internal/context.js +1 -2
- package/dist/cjs/internal/styles.js +6 -21
- package/dist/cjs/internal/utils.js +0 -3
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/tab-list.js +13 -17
- package/dist/es2019/components/tab-panel.js +0 -4
- package/dist/es2019/components/tab.js +0 -2
- package/dist/es2019/components/tabs.js +16 -16
- package/dist/es2019/hooks.js +0 -6
- package/dist/es2019/internal/styles.js +14 -13
- package/dist/es2019/internal/utils.js +0 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/tab-list.js +19 -27
- package/dist/esm/components/tab-panel.js +1 -5
- package/dist/esm/components/tab.js +1 -3
- package/dist/esm/components/tabs.js +32 -39
- package/dist/esm/hooks.js +0 -6
- package/dist/esm/internal/styles.js +6 -12
- package/dist/esm/internal/utils.js +0 -1
- package/dist/esm/version.json +1 -1
- package/package.json +7 -5
package/CHANGELOG.md
CHANGED
package/__perf__/default.tsx
CHANGED
|
@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _react2 = require("@emotion/react");
|
|
11
|
-
|
|
12
9
|
var _dsExplorations = require("@atlaskit/ds-explorations");
|
|
13
|
-
|
|
14
10
|
var _components = require("@atlaskit/theme/components");
|
|
15
|
-
|
|
16
11
|
var _hooks = require("../hooks");
|
|
17
|
-
|
|
18
12
|
var _context = require("../internal/context");
|
|
19
|
-
|
|
20
13
|
var _styles = require("../internal/styles");
|
|
21
|
-
|
|
22
14
|
var _utils = require("../internal/utils");
|
|
23
|
-
|
|
24
15
|
/** @jsx jsx */
|
|
25
16
|
|
|
26
17
|
/**
|
|
@@ -34,69 +25,60 @@ var _utils = require("../internal/utils");
|
|
|
34
25
|
*/
|
|
35
26
|
var TabList = function TabList(props) {
|
|
36
27
|
var children = props.children;
|
|
37
|
-
|
|
38
28
|
var _useGlobalTheme = (0, _components.useGlobalTheme)(),
|
|
39
|
-
|
|
40
|
-
|
|
29
|
+
mode = _useGlobalTheme.mode;
|
|
41
30
|
var _useTabList = (0, _hooks.useTabList)(),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
var ref = /*#__PURE__*/(0, _react.createRef)(); // Don't include any conditional children
|
|
31
|
+
tabsId = _useTabList.tabsId,
|
|
32
|
+
selected = _useTabList.selected,
|
|
33
|
+
onChange = _useTabList.onChange;
|
|
34
|
+
var ref = /*#__PURE__*/(0, _react.createRef)();
|
|
47
35
|
|
|
36
|
+
// Don't include any conditional children
|
|
48
37
|
var childrenArray = _react.Children.toArray(children).filter(Boolean);
|
|
49
|
-
|
|
50
38
|
var length = childrenArray.length;
|
|
51
39
|
var tabListStyles = (0, _react.useMemo)(function () {
|
|
52
40
|
return (0, _styles.getTabListStyles)(mode);
|
|
53
41
|
}, [mode]);
|
|
54
42
|
var selectTabByIndex = (0, _react.useCallback)(function (index) {
|
|
55
43
|
var _ref$current;
|
|
56
|
-
|
|
57
44
|
var newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[id='".concat(tabsId, "-").concat(index, "']"));
|
|
58
|
-
|
|
59
45
|
if (newSelectedNode) {
|
|
60
46
|
newSelectedNode.focus();
|
|
61
47
|
}
|
|
62
|
-
|
|
63
48
|
onChange(index);
|
|
64
49
|
}, [tabsId, ref, onChange]);
|
|
65
50
|
var onKeyDown = (0, _react.useCallback)(function (e) {
|
|
66
51
|
if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(e.key)) {
|
|
67
52
|
return;
|
|
68
|
-
}
|
|
69
|
-
|
|
53
|
+
}
|
|
70
54
|
|
|
55
|
+
// preventing horizontal or vertical scroll
|
|
71
56
|
e.preventDefault();
|
|
72
57
|
var lastTabIndex = length - 1;
|
|
73
|
-
|
|
74
58
|
if (['Home', 'End'].includes(e.key)) {
|
|
75
59
|
var _newSelected = e.key === 'Home' ? 0 : lastTabIndex;
|
|
76
|
-
|
|
77
60
|
selectTabByIndex(_newSelected);
|
|
78
61
|
return;
|
|
79
|
-
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// We use aria-posinset so we don't rely on the selected variable
|
|
80
65
|
// If we used the selected variable this would regenerate each time
|
|
81
66
|
// and create an unstable reference
|
|
82
|
-
|
|
83
|
-
|
|
84
67
|
var selectedIndex = parseInt(e.currentTarget.getAttribute('aria-posinset') || '0') - 1;
|
|
85
68
|
var modifier = e.key === 'ArrowRight' ? 1 : -1;
|
|
86
69
|
var newSelected = selectedIndex + modifier;
|
|
87
|
-
|
|
88
70
|
if (newSelected < 0 || newSelected >= length) {
|
|
89
71
|
// Cycling focus to move from last to first and from first to last
|
|
90
72
|
newSelected = newSelected < 0 ? lastTabIndex : 0;
|
|
91
73
|
}
|
|
92
|
-
|
|
93
74
|
selectTabByIndex(newSelected);
|
|
94
|
-
}, [length, selectTabByIndex]);
|
|
75
|
+
}, [length, selectTabByIndex]);
|
|
95
76
|
|
|
77
|
+
// Memoized so the function isn't recreated each time
|
|
96
78
|
var getTabWithContext = (0, _react.useCallback)(function (_ref) {
|
|
97
79
|
var tab = _ref.tab,
|
|
98
|
-
|
|
99
|
-
|
|
80
|
+
isSelected = _ref.isSelected,
|
|
81
|
+
index = _ref.index;
|
|
100
82
|
return (0, _react2.jsx)(_context.TabContext.Provider, {
|
|
101
83
|
value: {
|
|
102
84
|
onClick: function onClick() {
|
|
@@ -115,7 +97,8 @@ var TabList = function TabList(props) {
|
|
|
115
97
|
key: index
|
|
116
98
|
}, tab);
|
|
117
99
|
}, [length, onKeyDown, onChange, tabsId]);
|
|
118
|
-
return (
|
|
100
|
+
return (
|
|
101
|
+
// Only styles that affect the TabList itself have been applied via primitives.
|
|
119
102
|
// The other styles applied through the CSS prop are there for styling children
|
|
120
103
|
// through inheritance. This is important for custom cases that use the useTab(),
|
|
121
104
|
// which applies accessibility atributes that we use as a styling hook.
|
|
@@ -125,7 +108,8 @@ var TabList = function TabList(props) {
|
|
|
125
108
|
display: "flex",
|
|
126
109
|
position: "relative",
|
|
127
110
|
padding: "space.0",
|
|
128
|
-
ref: ref
|
|
111
|
+
ref: ref
|
|
112
|
+
// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
|
|
129
113
|
,
|
|
130
114
|
css: tabListStyles
|
|
131
115
|
}, childrenArray.map(function (child, index) {
|
|
@@ -137,6 +121,5 @@ var TabList = function TabList(props) {
|
|
|
137
121
|
}))
|
|
138
122
|
);
|
|
139
123
|
};
|
|
140
|
-
|
|
141
124
|
var _default = TabList;
|
|
142
125
|
exports.default = _default;
|
|
@@ -1,25 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _react2 = require("@emotion/react");
|
|
15
|
-
|
|
16
11
|
var _dsExplorations = require("@atlaskit/ds-explorations");
|
|
17
|
-
|
|
18
12
|
var _hooks = require("../hooks");
|
|
19
|
-
|
|
20
13
|
/** @jsx jsx */
|
|
21
|
-
// Note this is not being memoized as children is an unstable reference
|
|
22
14
|
|
|
15
|
+
// Note this is not being memoized as children is an unstable reference
|
|
23
16
|
/**
|
|
24
17
|
* __TabPanel__
|
|
25
18
|
*
|
|
@@ -31,13 +24,12 @@ var _hooks = require("../hooks");
|
|
|
31
24
|
*/
|
|
32
25
|
var TabPanel = function TabPanel(_ref) {
|
|
33
26
|
var children = _ref.children,
|
|
34
|
-
|
|
27
|
+
testId = _ref.testId;
|
|
35
28
|
var tabPanelAttributes = (0, _hooks.useTabPanel)();
|
|
36
29
|
return (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
|
|
37
30
|
testId: testId,
|
|
38
31
|
as: "div"
|
|
39
32
|
}, tabPanelAttributes), (0, _react2.jsx)(_react.Fragment, null, children));
|
|
40
33
|
};
|
|
41
|
-
|
|
42
34
|
var _default = TabPanel;
|
|
43
35
|
exports.default = _default;
|
|
@@ -1,20 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = Tab;
|
|
9
|
-
|
|
10
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
9
|
var _react = require("@emotion/react");
|
|
13
|
-
|
|
14
10
|
var _dsExplorations = require("@atlaskit/ds-explorations");
|
|
15
|
-
|
|
16
11
|
var _hooks = require("../hooks");
|
|
17
|
-
|
|
18
12
|
/** @jsx jsx */
|
|
19
13
|
|
|
20
14
|
/**
|
|
@@ -28,7 +22,7 @@ var _hooks = require("../hooks");
|
|
|
28
22
|
*/
|
|
29
23
|
function Tab(_ref) {
|
|
30
24
|
var children = _ref.children,
|
|
31
|
-
|
|
25
|
+
testId = _ref.testId;
|
|
32
26
|
var tabAttributes = (0, _hooks.useTab)();
|
|
33
27
|
return (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
|
|
34
28
|
as: "div",
|
|
@@ -1,50 +1,35 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
9
|
var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
|
|
13
|
-
|
|
14
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
11
|
var _react = require("react");
|
|
17
|
-
|
|
18
12
|
var _react2 = require("@emotion/react");
|
|
19
|
-
|
|
20
13
|
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
|
|
21
|
-
|
|
22
14
|
var _dsExplorations = require("@atlaskit/ds-explorations");
|
|
23
|
-
|
|
24
15
|
var _components = require("@atlaskit/theme/components");
|
|
25
|
-
|
|
26
16
|
var _context = require("../internal/context");
|
|
27
|
-
|
|
28
17
|
var _styles = require("../internal/styles");
|
|
29
|
-
|
|
30
18
|
var _utils = require("../internal/utils");
|
|
31
|
-
|
|
32
19
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
33
|
-
|
|
34
20
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
35
|
-
|
|
36
21
|
var analyticsAttributes = {
|
|
37
22
|
componentName: 'tabs',
|
|
38
23
|
packageName: "@atlaskit/tabs",
|
|
39
|
-
packageVersion: "13.3.
|
|
24
|
+
packageVersion: "13.3.12"
|
|
40
25
|
};
|
|
41
|
-
|
|
42
26
|
var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
|
|
43
27
|
var tabPanel = _ref.tabPanel,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return (
|
|
28
|
+
index = _ref.index,
|
|
29
|
+
isSelected = _ref.isSelected,
|
|
30
|
+
tabsId = _ref.tabsId;
|
|
31
|
+
return (
|
|
32
|
+
// Ensure tabPanel exists in case it has been removed
|
|
48
33
|
tabPanel && (0, _react2.jsx)(_context.TabPanelContext.Provider, {
|
|
49
34
|
value: {
|
|
50
35
|
role: 'tabpanel',
|
|
@@ -58,6 +43,7 @@ var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
|
|
|
58
43
|
}, tabPanel)
|
|
59
44
|
);
|
|
60
45
|
};
|
|
46
|
+
|
|
61
47
|
/**
|
|
62
48
|
* __Tabs__
|
|
63
49
|
*
|
|
@@ -67,51 +53,42 @@ var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
|
|
|
67
53
|
* - [Code](https://atlassian.design/components/tabs/code)
|
|
68
54
|
* - [Usage](https://atlassian.design/components/tabs/usage)
|
|
69
55
|
*/
|
|
70
|
-
|
|
71
|
-
|
|
72
56
|
var Tabs = function Tabs(props) {
|
|
73
57
|
var _props$shouldUnmountT = props.shouldUnmountTabPanelOnChange,
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
58
|
+
shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
|
|
59
|
+
SelectedType = props.selected,
|
|
60
|
+
defaultSelected = props.defaultSelected,
|
|
61
|
+
onChangeProp = props.onChange,
|
|
62
|
+
id = props.id,
|
|
63
|
+
analyticsContext = props.analyticsContext,
|
|
64
|
+
children = props.children,
|
|
65
|
+
testId = props.testId;
|
|
83
66
|
var _useGlobalTheme = (0, _components.useGlobalTheme)(),
|
|
84
|
-
|
|
85
|
-
|
|
67
|
+
mode = _useGlobalTheme.mode;
|
|
86
68
|
var _useState = (0, _react.useState)(SelectedType || defaultSelected || 0),
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
69
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
70
|
+
selectedState = _useState2[0],
|
|
71
|
+
setSelected = _useState2[1];
|
|
91
72
|
var selected = SelectedType === undefined ? selectedState : SelectedType;
|
|
92
|
-
|
|
93
|
-
|
|
73
|
+
var childrenArray = _react.Children.toArray(children)
|
|
74
|
+
// Don't include any conditional children
|
|
94
75
|
.filter(function (child) {
|
|
95
76
|
return Boolean(child);
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
|
|
77
|
+
});
|
|
78
|
+
// First child should be a tabList followed by tab panels
|
|
99
79
|
var _childrenArray = (0, _toArray2.default)(childrenArray),
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
80
|
+
tabList = _childrenArray[0],
|
|
81
|
+
tabPanels = _childrenArray.slice(1);
|
|
103
82
|
|
|
83
|
+
// Keep track of visited and add to a set
|
|
104
84
|
var visited = (0, _react.useRef)(new Set([selected]));
|
|
105
|
-
|
|
106
85
|
if (!visited.current.has(selected)) {
|
|
107
86
|
visited.current.add(selected);
|
|
108
87
|
}
|
|
109
|
-
|
|
110
88
|
var onChange = (0, _react.useCallback)(function (index, analyticsEvent) {
|
|
111
89
|
if (onChangeProp) {
|
|
112
90
|
onChangeProp(index, analyticsEvent);
|
|
113
91
|
}
|
|
114
|
-
|
|
115
92
|
setSelected(index);
|
|
116
93
|
}, [onChangeProp]);
|
|
117
94
|
var onChangeAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
|
|
@@ -124,7 +101,8 @@ var Tabs = function Tabs(props) {
|
|
|
124
101
|
index: selected,
|
|
125
102
|
isSelected: true,
|
|
126
103
|
tabsId: id
|
|
127
|
-
}) :
|
|
104
|
+
}) :
|
|
105
|
+
// If a panel has already been visited, don't unmount it
|
|
128
106
|
Array.from(visited.current).map(function (tabIndex) {
|
|
129
107
|
return getTabPanelWithContext({
|
|
130
108
|
tabPanel: tabPanels[tabIndex],
|
|
@@ -136,7 +114,8 @@ var Tabs = function Tabs(props) {
|
|
|
136
114
|
var tabsStyles = (0, _react.useMemo)(function () {
|
|
137
115
|
return (0, _styles.getTabsStyles)(mode);
|
|
138
116
|
}, [mode]);
|
|
139
|
-
return (
|
|
117
|
+
return (
|
|
118
|
+
// Only styles that affect the Tabs container itself have been applied via primitives.
|
|
140
119
|
// The other styles applied through the CSS prop are there for styling children
|
|
141
120
|
// through inheritance. This is important for custom cases that use the useTabPanel(),
|
|
142
121
|
// which applies accessibility atributes that we use as a styling hook.
|
|
@@ -150,7 +129,8 @@ var Tabs = function Tabs(props) {
|
|
|
150
129
|
minHeight: '0%',
|
|
151
130
|
flexBasis: '100%',
|
|
152
131
|
flexGrow: 1
|
|
153
|
-
}
|
|
132
|
+
}
|
|
133
|
+
// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
|
|
154
134
|
,
|
|
155
135
|
css: tabsStyles
|
|
156
136
|
}, (0, _react2.jsx)(_context.TabListContext.Provider, {
|
|
@@ -162,6 +142,5 @@ var Tabs = function Tabs(props) {
|
|
|
162
142
|
}, tabList), (0, _react2.jsx)(_react.Fragment, null, tabPanelsWithContext))
|
|
163
143
|
);
|
|
164
144
|
};
|
|
165
|
-
|
|
166
145
|
var _default = Tabs;
|
|
167
146
|
exports.default = _default;
|
package/dist/cjs/hooks.js
CHANGED
|
@@ -4,43 +4,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useTabPanel = exports.useTabList = exports.useTab = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _context = require("./internal/context");
|
|
11
|
-
|
|
12
9
|
var useTab = function useTab() {
|
|
13
10
|
var tabData = (0, _react.useContext)(_context.TabContext);
|
|
14
|
-
|
|
15
11
|
if (tabData == null || typeof tabData === 'undefined') {
|
|
16
12
|
throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
|
|
17
13
|
}
|
|
18
|
-
|
|
19
14
|
return tabData;
|
|
20
15
|
};
|
|
21
|
-
|
|
22
16
|
exports.useTab = useTab;
|
|
23
|
-
|
|
24
17
|
var useTabList = function useTabList() {
|
|
25
18
|
var tabListData = (0, _react.useContext)(_context.TabListContext);
|
|
26
|
-
|
|
27
19
|
if (tabListData === null || typeof tabListData === 'undefined') {
|
|
28
20
|
throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
|
|
29
21
|
}
|
|
30
|
-
|
|
31
22
|
return tabListData;
|
|
32
23
|
};
|
|
33
|
-
|
|
34
24
|
exports.useTabList = useTabList;
|
|
35
|
-
|
|
36
25
|
var useTabPanel = function useTabPanel() {
|
|
37
26
|
var tabPanelData = (0, _react.useContext)(_context.TabPanelContext);
|
|
38
|
-
|
|
39
27
|
if (tabPanelData === null || typeof tabPanelData === 'undefined') {
|
|
40
28
|
throw Error('@atlaskit/tabs: A TabPanel must have a Tabs parent.');
|
|
41
29
|
}
|
|
42
|
-
|
|
43
30
|
return tabPanelData;
|
|
44
31
|
};
|
|
45
|
-
|
|
46
32
|
exports.useTabPanel = useTabPanel;
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -41,13 +40,8 @@ Object.defineProperty(exports, "useTabPanel", {
|
|
|
41
40
|
return _hooks.useTabPanel;
|
|
42
41
|
}
|
|
43
42
|
});
|
|
44
|
-
|
|
45
43
|
var _tabs = _interopRequireDefault(require("./components/tabs"));
|
|
46
|
-
|
|
47
44
|
var _tabPanel = _interopRequireDefault(require("./components/tab-panel"));
|
|
48
|
-
|
|
49
45
|
var _tab = _interopRequireDefault(require("./components/tab"));
|
|
50
|
-
|
|
51
46
|
var _tabList = _interopRequireDefault(require("./components/tab-list"));
|
|
52
|
-
|
|
53
47
|
var _hooks = require("./hooks");
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getTabPanelFocusColor = exports.getTabLineColor = exports.getTabColors = void 0;
|
|
7
|
-
|
|
8
7
|
var _colors = require("@atlaskit/theme/colors");
|
|
9
|
-
|
|
10
8
|
var tabColorMap = {
|
|
11
9
|
light: {
|
|
12
10
|
labelColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
|
|
@@ -23,11 +21,9 @@ var tabColorMap = {
|
|
|
23
21
|
focusBorderColor: "var(--ds-border-focused, ".concat(_colors.B75, ")")
|
|
24
22
|
}
|
|
25
23
|
};
|
|
26
|
-
|
|
27
24
|
var getTabColors = function getTabColors(mode) {
|
|
28
25
|
return tabColorMap[mode];
|
|
29
26
|
};
|
|
30
|
-
|
|
31
27
|
exports.getTabColors = getTabColors;
|
|
32
28
|
var tabLineColorMap = {
|
|
33
29
|
light: {
|
|
@@ -43,19 +39,15 @@ var tabLineColorMap = {
|
|
|
43
39
|
selectedColor: "var(--ds-border-selected, ".concat(_colors.B75, ")")
|
|
44
40
|
}
|
|
45
41
|
};
|
|
46
|
-
|
|
47
42
|
var getTabLineColor = function getTabLineColor(mode) {
|
|
48
43
|
return tabLineColorMap[mode];
|
|
49
44
|
};
|
|
50
|
-
|
|
51
45
|
exports.getTabLineColor = getTabLineColor;
|
|
52
46
|
var tabPanelFocusColorMap = {
|
|
53
47
|
light: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
|
|
54
48
|
dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
|
|
55
49
|
};
|
|
56
|
-
|
|
57
50
|
var getTabPanelFocusColor = function getTabPanelFocusColor(mode) {
|
|
58
51
|
return tabPanelFocusColorMap[mode];
|
|
59
52
|
};
|
|
60
|
-
|
|
61
53
|
exports.getTabPanelFocusColor = getTabPanelFocusColor;
|
|
@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.TabPanelContext = exports.TabListContext = exports.TabContext = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
9
|
+
|
|
11
10
|
var TabContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
12
11
|
exports.TabContext = TabContext;
|
|
13
12
|
var TabListContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
@@ -1,24 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.getTabsStyles = exports.getTabStyles = exports.getTabListStyles = void 0;
|
|
9
|
-
|
|
10
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
9
|
var _react = require("@emotion/react");
|
|
13
|
-
|
|
14
10
|
var _constants = require("@atlaskit/theme/constants");
|
|
15
|
-
|
|
16
11
|
var _colors = require("./colors");
|
|
17
|
-
|
|
18
12
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
|
-
|
|
20
13
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
-
|
|
22
14
|
var borderRadius = (0, _constants.borderRadius)();
|
|
23
15
|
var gridSize = (0, _constants.gridSize)();
|
|
24
16
|
var tabLeftRightPadding = "".concat(gridSize, "px");
|
|
@@ -26,8 +18,9 @@ var tabTopBottomPadding = "".concat(gridSize / 2, "px");
|
|
|
26
18
|
var underlineHeight = '2px';
|
|
27
19
|
var highContrastFocusStyles = {
|
|
28
20
|
outline: '1px solid'
|
|
29
|
-
};
|
|
21
|
+
};
|
|
30
22
|
|
|
23
|
+
// Required so the focus ring is visible in high contrast mode
|
|
31
24
|
var highContrastFocusRing = {
|
|
32
25
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
33
26
|
'&:focus-visible': highContrastFocusStyles,
|
|
@@ -36,7 +29,6 @@ var highContrastFocusRing = {
|
|
|
36
29
|
}
|
|
37
30
|
}
|
|
38
31
|
};
|
|
39
|
-
|
|
40
32
|
var tabFocusStyles = function tabFocusStyles(mode) {
|
|
41
33
|
return {
|
|
42
34
|
boxShadow: "0 0 0 2px ".concat((0, _colors.getTabPanelFocusColor)(mode), " inset"),
|
|
@@ -44,11 +36,9 @@ var tabFocusStyles = function tabFocusStyles(mode) {
|
|
|
44
36
|
outline: 'none'
|
|
45
37
|
};
|
|
46
38
|
};
|
|
47
|
-
|
|
48
39
|
var getTabPanelStyles = function getTabPanelStyles(mode) {
|
|
49
40
|
return _objectSpread({
|
|
50
41
|
flexGrow: 1,
|
|
51
|
-
|
|
52
42
|
/*
|
|
53
43
|
NOTE min-height set to 0% because of Firefox bug
|
|
54
44
|
FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
|
|
@@ -62,9 +52,9 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
|
|
|
62
52
|
}
|
|
63
53
|
}, highContrastFocusRing);
|
|
64
54
|
};
|
|
65
|
-
|
|
66
55
|
var getTabsStyles = function getTabsStyles(mode) {
|
|
67
|
-
return (
|
|
56
|
+
return (
|
|
57
|
+
// eslint-disable-next-line @repo/internal/styles/no-exported-styles
|
|
68
58
|
(0, _react.css)({
|
|
69
59
|
'& [role="tabpanel"]': getTabPanelStyles(mode),
|
|
70
60
|
// The hidden attribute doesn't work on flex elements
|
|
@@ -76,7 +66,6 @@ var getTabsStyles = function getTabsStyles(mode) {
|
|
|
76
66
|
})
|
|
77
67
|
);
|
|
78
68
|
};
|
|
79
|
-
|
|
80
69
|
exports.getTabsStyles = getTabsStyles;
|
|
81
70
|
var tabLineStyles = {
|
|
82
71
|
content: '""',
|
|
@@ -88,9 +77,9 @@ var tabLineStyles = {
|
|
|
88
77
|
left: tabLeftRightPadding,
|
|
89
78
|
right: tabLeftRightPadding
|
|
90
79
|
};
|
|
91
|
-
|
|
92
80
|
var getTabListStyles = function getTabListStyles(mode) {
|
|
93
|
-
return (
|
|
81
|
+
return (
|
|
82
|
+
// eslint-disable-next-line @repo/internal/styles/no-exported-styles
|
|
94
83
|
(0, _react.css)({
|
|
95
84
|
'& [role="tab"]': getTabStyles(mode),
|
|
96
85
|
fontWeight: "var(--ds-font-weight-medium, 500)",
|
|
@@ -102,9 +91,7 @@ var getTabListStyles = function getTabListStyles(mode) {
|
|
|
102
91
|
})
|
|
103
92
|
);
|
|
104
93
|
};
|
|
105
|
-
|
|
106
94
|
exports.getTabListStyles = getTabListStyles;
|
|
107
|
-
|
|
108
95
|
var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
|
|
109
96
|
var colors = (0, _colors.getTabColors)(mode);
|
|
110
97
|
return {
|
|
@@ -117,7 +104,6 @@ var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
|
|
|
117
104
|
}
|
|
118
105
|
};
|
|
119
106
|
};
|
|
120
|
-
|
|
121
107
|
var getTabStyles = function getTabStyles(mode) {
|
|
122
108
|
var colors = (0, _colors.getTabColors)(mode);
|
|
123
109
|
return _objectSpread(_objectSpread({
|
|
@@ -161,5 +147,4 @@ var getTabStyles = function getTabStyles(mode) {
|
|
|
161
147
|
}
|
|
162
148
|
});
|
|
163
149
|
};
|
|
164
|
-
|
|
165
150
|
exports.getTabStyles = getTabStyles;
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.onMouseDownBlur = void 0;
|
|
7
|
-
|
|
8
7
|
// Prevent a focus ring if clicked
|
|
9
8
|
var onMouseDownBlur = function onMouseDownBlur(e) {
|
|
10
9
|
var currentTarget = e.currentTarget;
|
|
@@ -14,11 +13,9 @@ var onMouseDownBlur = function onMouseDownBlur(e) {
|
|
|
14
13
|
currentTarget.focus();
|
|
15
14
|
return;
|
|
16
15
|
}
|
|
17
|
-
|
|
18
16
|
if (!focusedDuringMouseDown && document.body.contains(currentTarget)) {
|
|
19
17
|
currentTarget.blur();
|
|
20
18
|
}
|
|
21
19
|
});
|
|
22
20
|
};
|
|
23
|
-
|
|
24
21
|
exports.onMouseDownBlur = onMouseDownBlur;
|
package/dist/cjs/version.json
CHANGED