@ntbjs/react-components 1.3.0-rc.59 → 1.3.0-rc.6-patch.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.
- package/.eslintrc +8 -7
- package/{ActionButton-b2345555.js → ActionButton-dea072f4.js} +16 -19
- package/{Alert-d69a3f95.js → Alert-347a66eb.js} +24 -20
- package/{AssetAction-9622c4f9.js → AssetGallery-f24a8bb1.js} +651 -606
- package/AssetPreviewTopBar-b64d4665.js +99 -0
- package/{Badge-e984e6f5.js → Badge-b5d734ce.js} +49 -28
- package/{Button-090fb526.js → Button-211d92ec.js} +85 -94
- package/{Checkbox-ad9c9e54.js → Checkbox-b6f6fabf.js} +35 -30
- package/{CompactAutocompleteSelect-26949125.js → CompactAutocompleteSelect-15a10abb.js} +114 -82
- package/{CompactStarRating-65bf27e5.js → CompactStarRating-821494e0.js} +94 -83
- package/{CompactTextInput-60edc635.js → CompactTextInput-ca8a67af.js} +106 -110
- package/{ContextMenu-4eb8fdc5.js → ContextMenu-d269f2b4.js} +6 -6
- package/{ContextMenuItem-c536b460.js → ContextMenuItem-960e1acf.js} +26 -22
- package/{InputGroup-a89a0ea3.js → InputGroup-b5ebae07.js} +6 -6
- package/{Instructions-dbd4514c.js → Instructions-6bfa0f6e.js} +81 -97
- package/{MultiLevelCheckboxSelect-3d5d5f2c.js → MultiLevelCheckboxSelect-b145322d.js} +164 -102
- package/{MultiSelect-cdfe6ffa.js → MultiSelect-b2459602.js} +101 -71
- package/{Popover-52d29ca6.js → Popover-ec433aaf.js} +40 -41
- package/{Radio-55db4781.js → Radio-2ab61f91.js} +22 -21
- package/{SectionSeparator-af8dc1ce.js → SectionSeparator-a28c6af2.js} +6 -6
- package/{Switch-04ecd8d0.js → Switch-e3289575.js} +27 -25
- package/{Tab-e43241f0.js → Tab-91278790.js} +7 -7
- package/{Tabs-cfc08c6b.js → Tabs-2a0f1d84.js} +43 -39
- package/{TextArea-44b4d3c4.js → TextArea-8c8757d9.js} +125 -93
- package/{TextInput-c3c71881.js → TextInput-4cac4342.js} +50 -48
- package/{Tooltip-a68a7e49.js → Tooltip-978b6cdd.js} +13 -13
- package/{VerificationStatusIcon-7b0e23fe.js → VerificationStatusIcon-ad0159e3.js} +30 -20
- package/{close-1751121a.js → close-ebf2f3cf.js} +12 -8
- package/data/Alert/index.js +2 -2
- package/data/Badge/index.js +2 -2
- package/data/Popover/index.js +3 -3
- package/data/Tab/index.js +2 -2
- package/data/Tabs/index.js +3 -3
- package/data/Tooltip/index.js +3 -3
- package/data/index.js +9 -9
- package/{defaultTheme-cd01e6c2.js → defaultTheme-44832997.js} +261 -213
- package/edit-note-c47d292e.js +41 -0
- package/{expand-more-d74e2bd2.js → expand-more-94585605.js} +12 -8
- package/inputs/ActionButton/index.js +2 -2
- package/inputs/Button/index.js +6 -6
- package/inputs/Checkbox/index.js +2 -2
- package/inputs/CompactAutocompleteSelect/index.js +13 -13
- package/inputs/CompactStarRating/index.js +10 -10
- package/inputs/CompactTextInput/index.js +11 -11
- package/inputs/MultiSelect/index.js +4 -4
- package/inputs/Radio/index.js +2 -2
- package/inputs/Switch/index.js +2 -2
- package/inputs/TextArea/index.js +11 -11
- package/inputs/TextInput/index.js +3 -3
- package/inputs/index.js +28 -28
- package/layout/InputGroup/index.js +2 -2
- package/layout/SectionSeparator/index.js +2 -2
- package/layout/index.js +3 -3
- package/package.json +1 -2
- package/{react-select-creatable.esm-383b1e78.js → react-select-creatable.esm-2f23d6c6.js} +1285 -1414
- package/{shift-away-subtle-631cd794.js → shift-away-subtle-22739ae8.js} +1 -1
- package/ssr/index.js +3 -1
- package/styles/config.scss +2 -2
- package/warning-circle-24522402.js +41 -0
- package/widgets/AssetGallery/index.js +32 -34
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
- package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
- package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +6 -6
- package/widgets/ContextMenu/index.js +2 -2
- package/widgets/Instructions/index.js +17 -16
- package/widgets/index.js +35 -37
- package/AssetPreviewTopBar-b1fe3188.js +0 -104
- package/edit-note-cefe2215.js +0 -37
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-44832997.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
6
|
|
|
@@ -10,7 +10,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
12
|
var _templateObject;
|
|
13
|
-
var SectionSeparator$1 = styled__default[
|
|
13
|
+
var SectionSeparator$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n\n ", "\n"])), function (props) {
|
|
14
14
|
return props.vertical ? '100%' : '1px';
|
|
15
15
|
}, function (props) {
|
|
16
16
|
return props.vertical ? '1px' : '100%';
|
|
@@ -18,11 +18,11 @@ var SectionSeparator$1 = styled__default["default"].div.attrs(defaultTheme.apply
|
|
|
18
18
|
return props.theme.themeProp('background-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));
|
|
19
19
|
});
|
|
20
20
|
|
|
21
|
-
var
|
|
22
|
-
var SectionSeparator = React__default["default"].forwardRef(function SectionSeparator(_ref, forwardedRef) {
|
|
21
|
+
var SectionSeparator = React__default['default'].forwardRef(function SectionSeparator(_ref, forwardedRef) {
|
|
23
22
|
var vertical = _ref.vertical,
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["vertical"]);
|
|
24
|
+
|
|
25
|
+
return React__default['default'].createElement(SectionSeparator$1, defaultTheme._extends({
|
|
26
26
|
vertical: vertical,
|
|
27
27
|
ref: forwardedRef
|
|
28
28
|
}, props));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-44832997.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var polished = require('polished');
|
|
@@ -13,61 +13,63 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
13
|
|
|
14
14
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
15
15
|
var switchButtonSize = '16px';
|
|
16
|
-
var Switch$1 = styled__default[
|
|
16
|
+
var Switch$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n * {\n box-sizing: border-box;\n }\n\n display: flex;\n flex-direction: column;\n\n ", "\n\n ", "\n"])), function (props) {
|
|
17
17
|
return props.readOnly && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n > * {\n pointer-events: none;\n user-select: text;\n }\n "])));
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.disabled && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n * {\n pointer-events: none;\n user-select: text;\n }\n "])));
|
|
20
20
|
});
|
|
21
|
-
var SwitchIndicator = styled__default[
|
|
21
|
+
var SwitchIndicator = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n ", "\n height: ", ";\n width: 32px;\n border-radius: 20px;\n border: 1px solid;\n ", "\n transition: background 200ms;\n"])), function (props) {
|
|
22
22
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'));
|
|
23
23
|
}, polished.math("".concat(switchButtonSize, " + 2px")), function (props) {
|
|
24
24
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-300'));
|
|
25
25
|
});
|
|
26
|
-
var SwitchIndicatorButton = styled__default[
|
|
26
|
+
var SwitchIndicatorButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n ", "\n height: ", ";\n width: ", ";\n border-radius: 50%;\n box-shadow: ", " 0 0px 2px 0px;\n transition: left 200ms;\n"])), function (props) {
|
|
27
27
|
return props.theme.themeProp('background', props.theme.getColor('gray-200'), props.theme.getColor('white'));
|
|
28
28
|
}, switchButtonSize, switchButtonSize, function (props) {
|
|
29
29
|
return props.theme.getColor('gray-500');
|
|
30
30
|
});
|
|
31
|
-
var SwitchIndicatorLabelText = styled__default[
|
|
31
|
+
var SwitchIndicatorLabelText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 18px;\n\n ", ";\n"])), function (props) {
|
|
32
32
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
33
33
|
});
|
|
34
|
-
var SwitchLabel = styled__default[
|
|
34
|
+
var SwitchLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n margin-right: auto;\n cursor: pointer;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n }\n\n &:has(input[type='checkbox']:not(:checked)) {\n ", " {\n left: 0;\n }\n }\n\n &:has(input[type='checkbox']:checked) {\n ", " {\n left: calc(100% - ", ");\n }\n\n ", " {\n background: ", ";\n\n ", "\n }\n }\n\n &:has(input[type='checkbox']:focus-visible) {\n ", " {\n ", "\n }\n }\n"])), SwitchIndicatorButton, SwitchIndicatorButton, switchButtonSize, SwitchIndicator, function (props) {
|
|
35
35
|
return props.theme.getColor('emerald-500');
|
|
36
36
|
}, function (props) {
|
|
37
37
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-300'), 1);
|
|
38
38
|
}, SwitchIndicatorButton, function (props) {
|
|
39
39
|
return props.theme.themeProp('outline', "8px solid ".concat(polished.rgba(props.theme.getColor('emerald-500'), 0.5)), "8px solid ".concat(polished.rgba(props.theme.getColor('emerald-500'), 0.3)), 1);
|
|
40
40
|
});
|
|
41
|
-
var Description = styled__default[
|
|
41
|
+
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n margin: ", " 0 0 0;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n"])), function (props) {
|
|
42
42
|
return props.spaciousDescription ? '16px' : '6px';
|
|
43
43
|
}, function (props) {
|
|
44
44
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
45
45
|
});
|
|
46
46
|
|
|
47
|
-
var Switch = React__default[
|
|
47
|
+
var Switch = React__default['default'].forwardRef(function Switch(_ref, forwardedRef) {
|
|
48
48
|
var name = _ref.name,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
49
|
+
checked = _ref.checked,
|
|
50
|
+
defaultChecked = _ref.defaultChecked,
|
|
51
|
+
label = _ref.label,
|
|
52
|
+
disabled = _ref.disabled,
|
|
53
|
+
readOnly = _ref.readOnly,
|
|
54
|
+
description = _ref.description,
|
|
55
|
+
spaciousDescription = _ref.spaciousDescription,
|
|
56
|
+
className = _ref.className,
|
|
57
|
+
style = _ref.style,
|
|
58
|
+
onChange = _ref.onChange,
|
|
59
|
+
onBlur = _ref.onBlur;
|
|
60
|
+
|
|
60
61
|
var _useState = React.useState(nanoid.nanoid()),
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
63
|
+
uniqueId = _useState2[0];
|
|
64
|
+
|
|
65
|
+
return React__default['default'].createElement(Switch$1, {
|
|
64
66
|
disabled: disabled,
|
|
65
67
|
readOnly: readOnly,
|
|
66
68
|
className: className,
|
|
67
69
|
style: style
|
|
68
|
-
}, React__default[
|
|
70
|
+
}, React__default['default'].createElement(SwitchLabel, {
|
|
69
71
|
htmlFor: uniqueId
|
|
70
|
-
}, React__default[
|
|
72
|
+
}, React__default['default'].createElement("input", {
|
|
71
73
|
ref: forwardedRef,
|
|
72
74
|
checked: checked,
|
|
73
75
|
defaultChecked: defaultChecked,
|
|
@@ -78,7 +80,7 @@ var Switch = React__default["default"].forwardRef(function Switch(_ref, forwarde
|
|
|
78
80
|
type: "checkbox",
|
|
79
81
|
onBlur: onBlur,
|
|
80
82
|
onChange: onChange
|
|
81
|
-
}), React__default[
|
|
83
|
+
}), React__default['default'].createElement(SwitchIndicator, null, React__default['default'].createElement(SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && React__default['default'].createElement(SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
|
|
82
84
|
spaciousDescription: spaciousDescription
|
|
83
85
|
}, description));
|
|
84
86
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-44832997.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
6
|
|
|
@@ -10,17 +10,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
12
|
var _templateObject;
|
|
13
|
-
var Tab$1 = styled__default[
|
|
13
|
+
var Tab$1 = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n border-bottom: 1px solid;\n min-height: 35px;\n"])), function (props) {
|
|
14
14
|
return props.theme.primaryFontFamily;
|
|
15
15
|
});
|
|
16
16
|
|
|
17
|
-
var
|
|
18
|
-
var Tab = React__default["default"].forwardRef(function Tab(_ref, forwardedRef) {
|
|
17
|
+
var Tab = React__default['default'].forwardRef(function Tab(_ref, forwardedRef) {
|
|
19
18
|
var children = _ref.children,
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
hidden = _ref.hidden,
|
|
20
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["children", "hidden"]);
|
|
21
|
+
|
|
22
22
|
if (hidden) return null;
|
|
23
|
-
return React__default[
|
|
23
|
+
return React__default['default'].createElement(Tab$1, defaultTheme._extends({
|
|
24
24
|
ref: forwardedRef
|
|
25
25
|
}, props), children);
|
|
26
26
|
});
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-44832997.js');
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var Tab = require('./Tab-
|
|
6
|
+
var Tab = require('./Tab-91278790.js');
|
|
7
7
|
var styled = require('styled-components');
|
|
8
8
|
|
|
9
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -11,19 +11,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
12
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
13
|
|
|
14
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
15
|
-
var Tabs$1 = styled__default[
|
|
14
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
15
|
+
var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n ", ";\n"])), function (props) {
|
|
16
16
|
return props.backgroundColor && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n background-color: ", ";\n "])), props.backgroundColor);
|
|
17
17
|
});
|
|
18
|
-
var TabHeaders = styled__default[
|
|
19
|
-
|
|
20
|
-
}, function (props) {
|
|
21
|
-
return props.customPadding && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n padding: 0 ", ";\n "])), props.customPadding);
|
|
22
|
-
});
|
|
23
|
-
var TabHeader = styled__default["default"].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-weight: 600;\n font-size: 0.875rem;\n display: flex;\n padding-bottom: 8px;\n letter-spacing: 0.6px;\n cursor: pointer;\n border-bottom: 1px solid;\n border-color: transparent;\n margin-bottom: 1px;\n\n ", ";\n &&:hover:not(:focus) {\n ", ";\n }\n"])), function (props) {
|
|
18
|
+
var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n white-space: nowrap;\n gap: 24px;\n margin: 0;\n padding: 0;\n"])));
|
|
19
|
+
var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-weight: 600;\n font-size: 0.875rem;\n display: flex;\n padding-bottom: 8px;\n letter-spacing: 0.6px;\n cursor: pointer;\n border-bottom: 1px solid;\n border-color: transparent;\n margin-bottom: 1px;\n\n ", ";\n &&:hover:not(:focus) {\n ", ";\n }\n"])), function (props) {
|
|
24
20
|
return props.theme.secondaryFontFamily;
|
|
25
21
|
}, function (props) {
|
|
26
|
-
return props.active && styled.css(
|
|
22
|
+
return props.active && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
27
23
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'));
|
|
28
24
|
});
|
|
29
25
|
}, function (props) {
|
|
@@ -41,43 +37,53 @@ var TabHeader = styled__default["default"].li.attrs(defaultTheme.applyDefaultThe
|
|
|
41
37
|
}
|
|
42
38
|
});
|
|
43
39
|
});
|
|
44
|
-
var TabContent = styled__default[
|
|
45
|
-
var TabHeaderBorder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n border-top: 1px solid;\n\n ", ";\n ", ";\n ", ";\n"])), function (props) {
|
|
40
|
+
var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n border-top: 1px solid;\n margin-top: -2px;\n display: block;\n ", ";\n"])), function (props) {
|
|
46
41
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
|
|
47
|
-
}, function (props) {
|
|
48
|
-
return !props.customPadding && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n margin: -2px 0;\n "])));
|
|
49
|
-
}, function (props) {
|
|
50
|
-
return props.customPadding && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n margin: -2px ", ";\n "])), props.customPadding);
|
|
51
42
|
});
|
|
52
43
|
|
|
53
|
-
var
|
|
54
|
-
var Tabs = React__default["default"].forwardRef(function Tabs(_ref, forwardedRef) {
|
|
44
|
+
var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef) {
|
|
55
45
|
var children = _ref.children,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
46
|
+
defaultMinHeight = _ref.defaultMinHeight,
|
|
47
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight"]);
|
|
48
|
+
|
|
59
49
|
var _useState = React.useState(0),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
50
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
51
|
+
activeTab = _useState2[0],
|
|
52
|
+
setActiveTab = _useState2[1];
|
|
53
|
+
|
|
54
|
+
var _useState3 = React.useState(),
|
|
55
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
56
|
+
defaultHeight = _useState4[0],
|
|
57
|
+
setDefaultHeight = _useState4[1];
|
|
58
|
+
|
|
63
59
|
var contentRef = React.useRef(null);
|
|
60
|
+
React.useEffect(function () {
|
|
61
|
+
setDefaultHeight(defaultMinHeight);
|
|
62
|
+
}, []);
|
|
64
63
|
var tabs = React.useMemo(function () {
|
|
65
64
|
var tabs = [];
|
|
65
|
+
|
|
66
66
|
function extractChildren(children) {
|
|
67
67
|
React.Children.forEach(children, function (child, index) {
|
|
68
68
|
var _child$props2;
|
|
69
|
+
|
|
69
70
|
if (lodash.isNil(child)) {
|
|
70
71
|
return null;
|
|
71
72
|
}
|
|
73
|
+
|
|
72
74
|
if (child.type === React.Fragment) {
|
|
73
75
|
var _child$props;
|
|
76
|
+
|
|
74
77
|
extractChildren((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
|
|
75
78
|
}
|
|
79
|
+
|
|
76
80
|
if ((_child$props2 = child.props) !== null && _child$props2 !== void 0 && _child$props2.hidden) {
|
|
77
81
|
return null;
|
|
78
82
|
}
|
|
83
|
+
|
|
79
84
|
if (child.type === Tab.Tab) {
|
|
80
85
|
var _child$props3, _child$props4;
|
|
86
|
+
|
|
81
87
|
tabs.push({
|
|
82
88
|
key: index,
|
|
83
89
|
trigger: (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.trigger,
|
|
@@ -86,23 +92,25 @@ var Tabs = React__default["default"].forwardRef(function Tabs(_ref, forwardedRef
|
|
|
86
92
|
}
|
|
87
93
|
});
|
|
88
94
|
}
|
|
95
|
+
|
|
89
96
|
extractChildren(children);
|
|
97
|
+
|
|
90
98
|
if (!tabs.some(function (tab) {
|
|
91
99
|
return (tab === null || tab === void 0 ? void 0 : tab.key) === activeTab;
|
|
92
100
|
})) {
|
|
93
101
|
var _tabs$;
|
|
102
|
+
|
|
94
103
|
setActiveTab((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key);
|
|
95
104
|
}
|
|
105
|
+
|
|
96
106
|
return tabs;
|
|
97
107
|
}, [children]);
|
|
98
|
-
return React__default[
|
|
108
|
+
return React__default['default'].createElement(Tabs$1, defaultTheme._extends({
|
|
99
109
|
ref: forwardedRef
|
|
100
110
|
}, props, {
|
|
101
111
|
role: "tablist"
|
|
102
|
-
}), React__default[
|
|
103
|
-
|
|
104
|
-
}, tabs.map(function (tab) {
|
|
105
|
-
return React__default["default"].createElement(TabHeader, {
|
|
112
|
+
}), React__default['default'].createElement(TabHeaders, null, tabs.map(function (tab) {
|
|
113
|
+
return React__default['default'].createElement(TabHeader, {
|
|
106
114
|
key: tab.key,
|
|
107
115
|
hidden: tab.hidden,
|
|
108
116
|
active: tab.key === activeTab,
|
|
@@ -111,29 +119,25 @@ var Tabs = React__default["default"].forwardRef(function Tabs(_ref, forwardedRef
|
|
|
111
119
|
},
|
|
112
120
|
role: "tab"
|
|
113
121
|
}, tab.trigger);
|
|
114
|
-
})), React__default[
|
|
115
|
-
|
|
116
|
-
}), React__default["default"].createElement(TabContent, null, tabs.map(function (tab) {
|
|
117
|
-
return React__default["default"].createElement("div", {
|
|
122
|
+
})), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
|
|
123
|
+
return React__default['default'].createElement("div", {
|
|
118
124
|
ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
|
|
119
125
|
key: tab.key,
|
|
120
126
|
role: "tabpanel",
|
|
121
127
|
hidden: tab.key !== activeTab,
|
|
122
128
|
style: {
|
|
123
|
-
minHeight: !lodash.isEmpty(
|
|
129
|
+
minHeight: !lodash.isEmpty(defaultHeight) ? defaultHeight : ''
|
|
124
130
|
}
|
|
125
131
|
}, tab.content);
|
|
126
132
|
})));
|
|
127
133
|
});
|
|
128
134
|
Tabs.defaultProps = {
|
|
129
|
-
defaultMinHeight: ''
|
|
130
|
-
customPadding: 0
|
|
135
|
+
defaultMinHeight: ''
|
|
131
136
|
};
|
|
132
137
|
Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
133
138
|
children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
|
|
134
139
|
backgroundColor: defaultTheme.PropTypes.string,
|
|
135
|
-
defaultMinHeight: defaultTheme.PropTypes.string
|
|
136
|
-
customPadding: defaultTheme.PropTypes.string
|
|
140
|
+
defaultMinHeight: defaultTheme.PropTypes.string
|
|
137
141
|
} : {};
|
|
138
142
|
|
|
139
143
|
exports.Tabs = Tabs;
|