@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.
Files changed (68) hide show
  1. package/.eslintrc +8 -7
  2. package/{ActionButton-b2345555.js → ActionButton-dea072f4.js} +16 -19
  3. package/{Alert-d69a3f95.js → Alert-347a66eb.js} +24 -20
  4. package/{AssetAction-9622c4f9.js → AssetGallery-f24a8bb1.js} +651 -606
  5. package/AssetPreviewTopBar-b64d4665.js +99 -0
  6. package/{Badge-e984e6f5.js → Badge-b5d734ce.js} +49 -28
  7. package/{Button-090fb526.js → Button-211d92ec.js} +85 -94
  8. package/{Checkbox-ad9c9e54.js → Checkbox-b6f6fabf.js} +35 -30
  9. package/{CompactAutocompleteSelect-26949125.js → CompactAutocompleteSelect-15a10abb.js} +114 -82
  10. package/{CompactStarRating-65bf27e5.js → CompactStarRating-821494e0.js} +94 -83
  11. package/{CompactTextInput-60edc635.js → CompactTextInput-ca8a67af.js} +106 -110
  12. package/{ContextMenu-4eb8fdc5.js → ContextMenu-d269f2b4.js} +6 -6
  13. package/{ContextMenuItem-c536b460.js → ContextMenuItem-960e1acf.js} +26 -22
  14. package/{InputGroup-a89a0ea3.js → InputGroup-b5ebae07.js} +6 -6
  15. package/{Instructions-dbd4514c.js → Instructions-6bfa0f6e.js} +81 -97
  16. package/{MultiLevelCheckboxSelect-3d5d5f2c.js → MultiLevelCheckboxSelect-b145322d.js} +164 -102
  17. package/{MultiSelect-cdfe6ffa.js → MultiSelect-b2459602.js} +101 -71
  18. package/{Popover-52d29ca6.js → Popover-ec433aaf.js} +40 -41
  19. package/{Radio-55db4781.js → Radio-2ab61f91.js} +22 -21
  20. package/{SectionSeparator-af8dc1ce.js → SectionSeparator-a28c6af2.js} +6 -6
  21. package/{Switch-04ecd8d0.js → Switch-e3289575.js} +27 -25
  22. package/{Tab-e43241f0.js → Tab-91278790.js} +7 -7
  23. package/{Tabs-cfc08c6b.js → Tabs-2a0f1d84.js} +43 -39
  24. package/{TextArea-44b4d3c4.js → TextArea-8c8757d9.js} +125 -93
  25. package/{TextInput-c3c71881.js → TextInput-4cac4342.js} +50 -48
  26. package/{Tooltip-a68a7e49.js → Tooltip-978b6cdd.js} +13 -13
  27. package/{VerificationStatusIcon-7b0e23fe.js → VerificationStatusIcon-ad0159e3.js} +30 -20
  28. package/{close-1751121a.js → close-ebf2f3cf.js} +12 -8
  29. package/data/Alert/index.js +2 -2
  30. package/data/Badge/index.js +2 -2
  31. package/data/Popover/index.js +3 -3
  32. package/data/Tab/index.js +2 -2
  33. package/data/Tabs/index.js +3 -3
  34. package/data/Tooltip/index.js +3 -3
  35. package/data/index.js +9 -9
  36. package/{defaultTheme-cd01e6c2.js → defaultTheme-44832997.js} +261 -213
  37. package/edit-note-c47d292e.js +41 -0
  38. package/{expand-more-d74e2bd2.js → expand-more-94585605.js} +12 -8
  39. package/inputs/ActionButton/index.js +2 -2
  40. package/inputs/Button/index.js +6 -6
  41. package/inputs/Checkbox/index.js +2 -2
  42. package/inputs/CompactAutocompleteSelect/index.js +13 -13
  43. package/inputs/CompactStarRating/index.js +10 -10
  44. package/inputs/CompactTextInput/index.js +11 -11
  45. package/inputs/MultiSelect/index.js +4 -4
  46. package/inputs/Radio/index.js +2 -2
  47. package/inputs/Switch/index.js +2 -2
  48. package/inputs/TextArea/index.js +11 -11
  49. package/inputs/TextInput/index.js +3 -3
  50. package/inputs/index.js +28 -28
  51. package/layout/InputGroup/index.js +2 -2
  52. package/layout/SectionSeparator/index.js +2 -2
  53. package/layout/index.js +3 -3
  54. package/package.json +1 -2
  55. package/{react-select-creatable.esm-383b1e78.js → react-select-creatable.esm-2f23d6c6.js} +1285 -1414
  56. package/{shift-away-subtle-631cd794.js → shift-away-subtle-22739ae8.js} +1 -1
  57. package/ssr/index.js +3 -1
  58. package/styles/config.scss +2 -2
  59. package/warning-circle-24522402.js +41 -0
  60. package/widgets/AssetGallery/index.js +32 -34
  61. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
  62. package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
  63. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +6 -6
  64. package/widgets/ContextMenu/index.js +2 -2
  65. package/widgets/Instructions/index.js +17 -16
  66. package/widgets/index.js +35 -37
  67. package/AssetPreviewTopBar-b1fe3188.js +0 -104
  68. package/edit-note-cefe2215.js +0 -37
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-cd01e6c2.js');
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["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n\n ", "\n"])), function (props) {
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 _excluded = ["vertical"];
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
- props = defaultTheme._objectWithoutProperties(_ref, _excluded);
25
- return React__default["default"].createElement(SectionSeparator$1, defaultTheme._extends({
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-cd01e6c2.js');
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["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) {
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["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) {
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["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) {
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["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) {
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["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) {
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["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) {
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["default"].forwardRef(function Switch(_ref, forwardedRef) {
47
+ var Switch = React__default['default'].forwardRef(function Switch(_ref, forwardedRef) {
48
48
  var name = _ref.name,
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;
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
- _useState2 = defaultTheme._slicedToArray(_useState, 1),
62
- uniqueId = _useState2[0];
63
- return React__default["default"].createElement(Switch$1, {
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["default"].createElement(SwitchLabel, {
70
+ }, React__default['default'].createElement(SwitchLabel, {
69
71
  htmlFor: uniqueId
70
- }, React__default["default"].createElement("input", {
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["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, {
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-cd01e6c2.js');
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["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) {
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 _excluded = ["children", "hidden"];
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
- hidden = _ref.hidden,
21
- props = defaultTheme._objectWithoutProperties(_ref, _excluded);
19
+ hidden = _ref.hidden,
20
+ props = defaultTheme._objectWithoutProperties(_ref, ["children", "hidden"]);
21
+
22
22
  if (hidden) return null;
23
- return React__default["default"].createElement(Tab$1, defaultTheme._extends({
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-cd01e6c2.js');
3
+ var defaultTheme = require('./defaultTheme-44832997.js');
4
4
  var lodash = require('lodash');
5
5
  var React = require('react');
6
- var Tab = require('./Tab-e43241f0.js');
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, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
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) {
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["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\n margin: 0;\n ", ";\n ", ";\n"])), function (props) {
19
- return !props.customPadding && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n padding: 0;\n "])));
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(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
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["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n"])));
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 _excluded = ["children", "defaultMinHeight", "customPadding"];
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
- defaultMinHeight = _ref.defaultMinHeight,
57
- customPadding = _ref.customPadding,
58
- props = defaultTheme._objectWithoutProperties(_ref, _excluded);
46
+ defaultMinHeight = _ref.defaultMinHeight,
47
+ props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight"]);
48
+
59
49
  var _useState = React.useState(0),
60
- _useState2 = defaultTheme._slicedToArray(_useState, 2),
61
- activeTab = _useState2[0],
62
- setActiveTab = _useState2[1];
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["default"].createElement(Tabs$1, defaultTheme._extends({
108
+ return React__default['default'].createElement(Tabs$1, defaultTheme._extends({
99
109
  ref: forwardedRef
100
110
  }, props, {
101
111
  role: "tablist"
102
- }), React__default["default"].createElement(TabHeaders, {
103
- customPadding: customPadding
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["default"].createElement(TabHeaderBorder, {
115
- customPadding: customPadding
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(defaultMinHeight) ? defaultMinHeight : ''
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;