@ntbjs/react-components 1.1.0-beta.51 → 1.1.0-beta.53

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 (12) hide show
  1. package/{AssetGallery-bbcec975.js → AssetGallery-739e5b24.js} +3 -3
  2. package/{CompactTextInput-59fc62d5.js → CompactTextInput-08cbe4e5.js} +1 -1
  3. package/{MultiSelect-2cbc13b3.js → MultiSelect-e6453833.js} +55 -43
  4. package/{Tabs-70653e98.js → Tabs-371d1fd0.js} +8 -2
  5. package/data/Tabs/index.js +1 -1
  6. package/data/index.js +1 -1
  7. package/inputs/CompactTextInput/index.js +2 -2
  8. package/inputs/MultiSelect/index.js +2 -1
  9. package/inputs/index.js +3 -3
  10. package/package.json +1 -1
  11. package/widgets/AssetGallery/index.js +4 -4
  12. package/widgets/index.js +4 -4
package/{AssetGallery-bbcec975.js → AssetGallery-739e5b24.js} RENAMED
@@ -11,8 +11,8 @@ require('./AutocompleteSelect-45be3cb4.js');
11
11
  require('./Button-dd271c4b.js');
12
12
  require('./Checkbox-012bbd3f.js');
13
13
  require('./CompactStarRating-364ca893.js');
14
- require('./CompactTextInput-59fc62d5.js');
15
- require('./MultiSelect-2cbc13b3.js');
14
+ require('./CompactTextInput-08cbe4e5.js');
15
+ require('./MultiSelect-e6453833.js');
16
16
  require('./Radio-0594409d.js');
17
17
  require('./TextArea-8cffb1e7.js');
18
18
  require('./Switch-cd165c8c.js');
@@ -20,7 +20,7 @@ require('./Alert-3e4f8be1.js');
20
20
  require('./Badge-9bcebe96.js');
21
21
  require('./Popover-11df9750.js');
22
22
  require('./Tab-bd0f3345.js');
23
- require('./Tabs-70653e98.js');
23
+ require('./Tabs-371d1fd0.js');
24
24
  var Tooltip = require('./Tooltip-e4e5e0e5.js');
25
25
  var styled = require('styled-components');
26
26
  var polished = require('polished');
package/{CompactTextInput-59fc62d5.js → CompactTextInput-08cbe4e5.js} RENAMED
@@ -10,7 +10,7 @@ require('./Alert-3e4f8be1.js');
10
10
  require('./Badge-9bcebe96.js');
11
11
  var Popover = require('./Popover-11df9750.js');
12
12
  require('./Tab-bd0f3345.js');
13
- require('./Tabs-70653e98.js');
13
+ require('./Tabs-371d1fd0.js');
14
14
  var Tooltip = require('./Tooltip-e4e5e0e5.js');
15
15
 
16
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
package/{MultiSelect-2cbc13b3.js → MultiSelect-e6453833.js} RENAMED
@@ -2,6 +2,7 @@
2
2
 
3
3
  var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
+ var nanoid = require('nanoid');
5
6
  var styled = require('styled-components');
6
7
  var close = require('./close-ebf2f3cf.js');
7
8
  var Select = require('react-select');
@@ -14,29 +15,32 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
15
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
16
  var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
16
17
 
17
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
18
19
  var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
19
20
  var showMoreHeight = 114;
20
21
  var sharedStyle = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 12px;\n font-weight: 400;\n position: relative;\n"])), function (props) {
21
22
  return props.theme.primaryFontFamily;
22
23
  });
23
- var MultiSelect$1 = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
24
- var CreatableMultiSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
25
- var AsyncCreatableMultiSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
26
- var AsyncMultiSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
27
- var MultiSelectWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n"])));
28
- var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n && {\n align-items: flex-start;\n background: transparent;\n border: none;\n box-shadow: none;\n }\n\n :hover {\n cursor: ", ";\n }\n"])), function (props) {
24
+ var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n"])), function (props) {
25
+ return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
26
+ });
27
+ var MultiSelect$1 = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
28
+ var CreatableMultiSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
29
+ var AsyncCreatableMultiSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
30
+ var AsyncMultiSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
31
+ var MultiSelectWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n"])));
32
+ var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n && {\n align-items: flex-start;\n background: transparent;\n border: none;\n box-shadow: none;\n }\n\n :hover {\n cursor: ", ";\n }\n"])), function (props) {
29
33
  return !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer';
30
34
  });
31
- var ValueContainer = styled__default['default'](Select.components.ValueContainer)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n && {\n align-items: flex-start;\n gap: 8px;\n padding: 0;\n\n max-height: ", " !important;\n\n ", "\n }\n"])), function (props) {
35
+ var ValueContainer = styled__default['default'](Select.components.ValueContainer)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n && {\n align-items: flex-start;\n gap: 8px;\n padding: 0;\n\n max-height: ", " !important;\n\n ", "\n }\n"])), function (props) {
32
36
  return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
33
37
  }, function (props) {
34
- return (props.error || props.warning) && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n border: 1px solid;\n border-radius: 3px;\n padding: 4px;\n\n border-color: ", ";\n "])), function (props) {
38
+ return (props.error || props.warning) && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n border: 1px solid;\n border-radius: 3px;\n padding: 4px;\n\n border-color: ", ";\n "])), function (props) {
35
39
  return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
36
40
  });
37
41
  });
38
- var MultiValueWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n }\n"])));
39
- var MultiValue = styled__default['default'](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n\n ", "\n\n ", "\n\n > div {\n align-items: center;\n display: flex;\n font-size: 12px;\n min-height: 26px;\n\n :first-of-type {\n padding: ", ";\n }\n\n :last-child:not(:only-child) {\n padding: 0 8px 0 5px;\n height: 100%;\n width: fit-content;\n }\n\n :last-child:not(:only-child):hover {\n background-color: ", ";\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n cursor: pointer;\n }\n\n svg {\n stroke: white;\n stroke-width: 2px;\n width: 8px;\n }\n\n :hover {\n cursor: pointer;\n }\n }\n"])), function (props) {
42
+ var MultiValueWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n }\n"])));
43
+ var MultiValue = styled__default['default'](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n\n ", "\n\n ", "\n\n > div {\n align-items: center;\n display: flex;\n font-size: 12px;\n min-height: 26px;\n\n :first-of-type {\n padding: ", ";\n }\n\n :last-child:not(:only-child) {\n padding: 0 8px 0 5px;\n height: 100%;\n width: fit-content;\n }\n\n :last-child:not(:only-child):hover {\n background-color: ", ";\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n cursor: pointer;\n }\n\n svg {\n stroke: white;\n stroke-width: 2px;\n width: 8px;\n }\n\n :hover {\n cursor: pointer;\n }\n }\n"])), function (props) {
40
44
  return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'));
41
45
  }, function (props) {
42
46
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'));
@@ -45,50 +49,51 @@ var MultiValue = styled__default['default'](Select.components.MultiValue).attrs(
45
49
  }, function (props) {
46
50
  return props.theme.getColor('red-500');
47
51
  });
48
- var MultiValueRemove = styled__default['default'](Select.components.MultiValueRemove).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral([""])));
49
- var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n align-self: center;\n font-size: ", ";\n min-width: 150px;\n\n ", "\n\n ", "\n }\n"])), function (props) {
52
+ var MultiValueRemove = styled__default['default'](Select.components.MultiValueRemove).attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral([""])));
53
+ var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n align-self: center;\n font-size: ", ";\n min-width: 150px;\n\n ", "\n\n ", "\n }\n"])), function (props) {
50
54
  return props.$focused ? '14px' : '12px';
51
55
  }, function (props) {
52
56
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
53
57
  }, function (props) {
54
- return !props.$focused && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n :before {\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n content: '", "';\n }\n "])), function (props) {
58
+ return !props.$focused && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n :before {\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n content: '", "';\n }\n "])), function (props) {
55
59
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
56
60
  }, function (props) {
57
61
  return props.edittext;
58
62
  });
59
63
  });
60
- var DropdownMenu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n font-size: 14px;\n\n ", "\n\n ", "\n"])), function (props) {
64
+ var DropdownMenu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n font-size: 14px;\n\n ", "\n\n ", "\n"])), function (props) {
61
65
  return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'));
62
66
  }, function (props) {
63
67
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
64
68
  });
65
- var sharedOptionStyle = styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n\n ", "\n\n :hover {\n cursor: pointer;\n }\n"])), function (props) {
66
- return props.isFocused && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
69
+ var sharedOptionStyle = styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n\n ", "\n\n :hover {\n cursor: pointer;\n }\n"])), function (props) {
70
+ return props.isFocused && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
67
71
  }, function (props) {
68
- return props.isSelected && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
72
+ return props.isSelected && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
69
73
  }, function (props) {
70
- return props.isFocused && props.isSelected && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
74
+ return props.isFocused && props.isSelected && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
71
75
  });
72
- var Option = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedOptionStyle);
73
- var SelectedOption$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n display: flex !important;\n justify-content: space-between;\n"])), sharedOptionStyle);
74
- var DropdownOptionDeleteIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n stroke-width: 1px;\n width: 8px;\n\n ", "\n"])), function (props) {
76
+ var Option = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedOptionStyle);
77
+ var SelectedOption$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n display: flex !important;\n justify-content: space-between;\n"])), sharedOptionStyle);
78
+ var DropdownOptionDeleteIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n stroke-width: 1px;\n width: 8px;\n\n ", "\n"])), function (props) {
75
79
  return props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
76
80
  });
77
- var ShowMoreWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n align-items: end;\n display: flex;\n flex-direction: column;\n height: 100%;\n left: 0;\n position: absolute;\n max-height: ", "px;\n top: 0;\n width: 100%;\n\n ", "\n\n :hover {\n cursor: pointer;\n text-decoration: underline;\n }\n"])), showMoreHeight + 16, function (props) {
81
+ var ShowMoreWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n align-items: end;\n display: flex;\n flex-direction: column;\n height: 100%;\n left: 0;\n position: absolute;\n max-height: ", "px;\n top: 0;\n width: 100%;\n\n ", "\n\n :hover {\n cursor: pointer;\n text-decoration: underline;\n }\n"])), showMoreHeight + 16, function (props) {
78
82
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'));
79
83
  });
80
- var ShowMoreOverlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n align-items: end;\n display: block;\n height: 100%;\n max-height: ", "px;\n left: 0;\n top: 0;\n width: 100%;\n\n ", "\n"])), showMoreHeight, function (props) {
84
+ var ShowMoreOverlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n align-items: end;\n display: block;\n height: 100%;\n max-height: ", "px;\n left: 0;\n top: 0;\n width: 100%;\n\n ", "\n"])), showMoreHeight, function (props) {
81
85
  return props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box');
82
86
  });
83
- var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n width: 100%;\n ", "\n"])), function (props) {
87
+ var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n width: 100%;\n ", "\n"])), function (props) {
84
88
  return props.theme.themeProp('background-color', '#121212', '#fefefe');
85
89
  });
86
- var ErrorMessage = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n font-size: 0.75rem;\n margin-top: 8px;\n padding: 0 12px;\n"])), function (props) {
90
+ var ErrorMessage = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n font-size: 0.75rem;\n margin-top: 8px;\n padding: 0 12px;\n"])), function (props) {
87
91
  return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
88
92
  });
89
93
 
90
94
  var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref, forwardedRef) {
91
- var selectedOptions = _ref.selectedOptions,
95
+ var label = _ref.label,
96
+ selectedOptions = _ref.selectedOptions,
92
97
  availableOptions = _ref.availableOptions,
93
98
  loadOptions = _ref.loadOptions,
94
99
  loadingMessageFunc = _ref.loadingMessageFunc,
@@ -105,27 +110,31 @@ var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref
105
110
  disabled = _ref.disabled,
106
111
  error = _ref.error,
107
112
  warning = _ref.warning,
108
- props = defaultTheme._objectWithoutProperties(_ref, ["selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "disabled", "error", "warning"]);
113
+ props = defaultTheme._objectWithoutProperties(_ref, ["label", "selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "disabled", "error", "warning"]);
109
114
 
110
- var _useState = React.useState(selectedOptions),
111
- _useState2 = defaultTheme._slicedToArray(_useState, 2),
112
- selected = _useState2[0],
113
- setSelected = _useState2[1];
115
+ var _useState = React.useState(nanoid.nanoid()),
116
+ _useState2 = defaultTheme._slicedToArray(_useState, 1),
117
+ uniqueId = _useState2[0];
114
118
 
115
- var _useState3 = React.useState(false),
119
+ var _useState3 = React.useState(selectedOptions),
116
120
  _useState4 = defaultTheme._slicedToArray(_useState3, 2),
117
- focused = _useState4[0],
118
- setFocused = _useState4[1];
121
+ selected = _useState4[0],
122
+ setSelected = _useState4[1];
119
123
 
120
- var _useState5 = React.useState(error || warning ? false : showMore),
124
+ var _useState5 = React.useState(false),
121
125
  _useState6 = defaultTheme._slicedToArray(_useState5, 2),
122
- displayShowMore = _useState6[0],
123
- setDisplayShowMore = _useState6[1];
126
+ focused = _useState6[0],
127
+ setFocused = _useState6[1];
124
128
 
125
- var _useState7 = React.useState(0),
129
+ var _useState7 = React.useState(error || warning ? false : showMore),
126
130
  _useState8 = defaultTheme._slicedToArray(_useState7, 2),
127
- cacheUnique = _useState8[0],
128
- setCacheUnique = _useState8[1];
131
+ displayShowMore = _useState8[0],
132
+ setDisplayShowMore = _useState8[1];
133
+
134
+ var _useState9 = React.useState(0),
135
+ _useState10 = defaultTheme._slicedToArray(_useState9, 2),
136
+ cacheUnique = _useState10[0],
137
+ setCacheUnique = _useState10[1];
129
138
 
130
139
  React.useEffect(function () {
131
140
  setSelected(selectedOptions);
@@ -148,12 +157,14 @@ var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref
148
157
  }, []);
149
158
  var ValueContainer$1 = React.useMemo(function () {
150
159
  var ValueContainerWrapper = function ValueContainerWrapper(innerProps) {
151
- return React__default['default'].createElement(ValueContainer, defaultTheme._extends({
160
+ return React__default['default'].createElement(React__default['default'].Fragment, null, label && React__default['default'].createElement(Label, {
161
+ htmlFor: uniqueId
162
+ }, label), React__default['default'].createElement(ValueContainer, defaultTheme._extends({
152
163
  showMore: displayShowMore,
153
164
  error: error,
154
165
  warning: warning,
155
166
  className: "multi-select-values-container"
156
- }, innerProps));
167
+ }, innerProps)));
157
168
  };
158
169
 
159
170
  ValueContainerWrapper.displayName = 'ValueContainerWrapper';
@@ -302,6 +313,7 @@ var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref
302
313
  }, error ? error : warning));
303
314
  });
304
315
  MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
316
+ label: defaultTheme.PropTypes.string,
305
317
  availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
306
318
  selectedOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
307
319
  loadOptions: defaultTheme.PropTypes.func,
package/{Tabs-70653e98.js → Tabs-371d1fd0.js} RENAMED
@@ -57,11 +57,17 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
57
57
  minHeight = _useState4[0],
58
58
  setMinHeight = _useState4[1];
59
59
 
60
+ var _useState5 = React.useState(),
61
+ _useState6 = defaultTheme._slicedToArray(_useState5, 2),
62
+ firstTab = _useState6[0],
63
+ setFirstTab = _useState6[1];
64
+
60
65
  var contentRef = React.useRef(null);
61
66
  var visibleTabs = [];
62
67
  React.useEffect(function () {
63
68
  if ((visibleTabs === null || visibleTabs === void 0 ? void 0 : visibleTabs.length) > 0) {
64
69
  setActiveTab(visibleTabs[0].key);
70
+ setFirstTab(visibleTabs[0]);
65
71
  }
66
72
  }, [visibleTabs]);
67
73
  React.useEffect(function () {
@@ -69,7 +75,7 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
69
75
  var height = contentRef.current.offsetHeight;
70
76
  setMinHeight(height);
71
77
  }
72
- }, [children]);
78
+ }, [children, firstTab]);
73
79
  var tabs = React.useMemo(function () {
74
80
  var tabs = [];
75
81
 
@@ -122,7 +128,7 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
122
128
  role: "tabpanel",
123
129
  hidden: tab.key !== activeTab,
124
130
  style: {
125
- height: minHeight
131
+ height: minHeight && minHeight
126
132
  }
127
133
  }, tab.content);
128
134
  })));
package/data/Tabs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Tabs = require('../../Tabs-70653e98.js');
3
+ var Tabs = require('../../Tabs-371d1fd0.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/data/index.js CHANGED
@@ -6,7 +6,7 @@ var Alert = require('../Alert-3e4f8be1.js');
6
6
  var Badge = require('../Badge-9bcebe96.js');
7
7
  var Popover = require('../Popover-11df9750.js');
8
8
  var Tab = require('../Tab-bd0f3345.js');
9
- var Tabs = require('../Tabs-70653e98.js');
9
+ var Tabs = require('../Tabs-371d1fd0.js');
10
10
  var Tooltip = require('../Tooltip-e4e5e0e5.js');
11
11
  require('../defaultTheme-50f2b88f.js');
12
12
  require('styled-components');
package/inputs/CompactTextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-59fc62d5.js');
3
+ var CompactTextInput = require('../../CompactTextInput-08cbe4e5.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -14,7 +14,7 @@ require('polished');
14
14
  require('@tippyjs/react');
15
15
  require('../../shift-away-subtle-cfdf1dbe.js');
16
16
  require('../../Tab-bd0f3345.js');
17
- require('../../Tabs-70653e98.js');
17
+ require('../../Tabs-371d1fd0.js');
18
18
  require('../../Tooltip-e4e5e0e5.js');
19
19
 
20
20
 
package/inputs/MultiSelect/index.js CHANGED
@@ -1,9 +1,10 @@
1
1
  'use strict';
2
2
 
3
- var MultiSelect = require('../../MultiSelect-2cbc13b3.js');
3
+ var MultiSelect = require('../../MultiSelect-e6453833.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
+ require('nanoid');
7
8
  require('../../close-ebf2f3cf.js');
8
9
  require('react-select');
9
10
  require('../../react-select-creatable.esm-2f23d6c6.js');
package/inputs/index.js CHANGED
@@ -7,8 +7,8 @@ var AutocompleteSelect = require('../AutocompleteSelect-45be3cb4.js');
7
7
  var Button = require('../Button-dd271c4b.js');
8
8
  var Checkbox = require('../Checkbox-012bbd3f.js');
9
9
  var CompactStarRating = require('../CompactStarRating-364ca893.js');
10
- var CompactTextInput = require('../CompactTextInput-59fc62d5.js');
11
- var MultiSelect = require('../MultiSelect-2cbc13b3.js');
10
+ var CompactTextInput = require('../CompactTextInput-08cbe4e5.js');
11
+ var MultiSelect = require('../MultiSelect-e6453833.js');
12
12
  var Radio = require('../Radio-0594409d.js');
13
13
  var TextArea = require('../TextArea-8cffb1e7.js');
14
14
  var TextInput = require('../TextInput-a1083be3.js');
@@ -33,7 +33,7 @@ require('../edit-note-c47d292e.js');
33
33
  require('../Alert-3e4f8be1.js');
34
34
  require('../Badge-9bcebe96.js');
35
35
  require('../Tab-bd0f3345.js');
36
- require('../Tabs-70653e98.js');
36
+ require('../Tabs-371d1fd0.js');
37
37
  require('../Tooltip-e4e5e0e5.js');
38
38
 
39
39
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.1.0-beta.51",
3
+ "version": "1.1.0-beta.53",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
package/widgets/AssetGallery/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-bbcec975.js');
3
+ var AssetGallery = require('../../AssetGallery-739e5b24.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -26,13 +26,13 @@ require('../../shift-away-subtle-cfdf1dbe.js');
26
26
  require('../../ContextMenu-d088833b.js');
27
27
  require('../../Checkbox-012bbd3f.js');
28
28
  require('../../CompactStarRating-364ca893.js');
29
- require('../../CompactTextInput-59fc62d5.js');
29
+ require('../../CompactTextInput-08cbe4e5.js');
30
30
  require('../../Alert-3e4f8be1.js');
31
31
  require('../../Badge-9bcebe96.js');
32
32
  require('../../Tab-bd0f3345.js');
33
- require('../../Tabs-70653e98.js');
33
+ require('../../Tabs-371d1fd0.js');
34
34
  require('../../Tooltip-e4e5e0e5.js');
35
- require('../../MultiSelect-2cbc13b3.js');
35
+ require('../../MultiSelect-e6453833.js');
36
36
  require('../../Radio-0594409d.js');
37
37
  require('../../TextArea-8cffb1e7.js');
38
38
  require('../../Switch-cd165c8c.js');
package/widgets/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetGallery = require('../AssetGallery-bbcec975.js');
5
+ var AssetGallery = require('../AssetGallery-739e5b24.js');
6
6
  var ContextMenu = require('../ContextMenu-d088833b.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-159b9885.js');
8
8
  var Instructions = require('../Instructions-d8ab91c2.js');
@@ -30,13 +30,13 @@ require('@tippyjs/react');
30
30
  require('../shift-away-subtle-cfdf1dbe.js');
31
31
  require('../Checkbox-012bbd3f.js');
32
32
  require('../CompactStarRating-364ca893.js');
33
- require('../CompactTextInput-59fc62d5.js');
33
+ require('../CompactTextInput-08cbe4e5.js');
34
34
  require('../Alert-3e4f8be1.js');
35
35
  require('../Badge-9bcebe96.js');
36
36
  require('../Tab-bd0f3345.js');
37
- require('../Tabs-70653e98.js');
37
+ require('../Tabs-371d1fd0.js');
38
38
  require('../Tooltip-e4e5e0e5.js');
39
- require('../MultiSelect-2cbc13b3.js');
39
+ require('../MultiSelect-e6453833.js');
40
40
  require('../Radio-0594409d.js');
41
41
  require('../TextArea-8cffb1e7.js');
42
42
  require('../Switch-cd165c8c.js');