@ntbjs/react-components 1.2.0-rc.97 → 1.2.0-rc.99
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/{ActionButton-adaadbae.js → ActionButton-46735b89.js} +17 -17
- package/{Alert-b41a748e.js → Alert-13b75102.js} +36 -33
- package/{AssetGallery-3c21105d.js → AssetGallery-094ed34b.js} +595 -442
- package/{AssetPreviewTopBar-ac66b804.js → AssetPreviewTopBar-912c3469.js} +38 -35
- package/{Badge-4a2a9f6b.js → Badge-aec841c8.js} +67 -47
- package/{Button-4c60d2f4.js → Button-49f82b31.js} +77 -66
- package/{Checkbox-84dd9aa1.js → Checkbox-68dc38a8.js} +50 -46
- package/{CompactAutocompleteSelect-bf5e8820.js → CompactAutocompleteSelect-b68618b3.js} +143 -110
- package/{CompactStarRating-017d64cb.js → CompactStarRating-405e4508.js} +105 -90
- package/{CompactTextInput-8132e42d.js → CompactTextInput-0d53acdf.js} +104 -93
- package/{ContextMenu-4427ad11.js → ContextMenu-4ec3d9f3.js} +7 -8
- package/{ContextMenuItem-b5f97001.js → ContextMenuItem-ba2b697e.js} +32 -29
- package/{InputGroup-9d1cd295.js → InputGroup-49fbc423.js} +7 -8
- package/{Instructions-235aa0fc.js → Instructions-b6d3e7bd.js} +111 -97
- package/{MultiLevelCheckboxSelect-4f51a1a2.js → MultiLevelCheckboxSelect-f3de8047.js} +204 -143
- package/{MultiSelect-53089d1e.js → MultiSelect-efd60232.js} +120 -91
- package/{Popover-938e6bfc.js → Popover-569cd272.js} +33 -32
- package/{Radio-1d09e729.js → Radio-32d0513a.js} +33 -33
- package/{SectionSeparator-d9ae38b7.js → SectionSeparator-259a22ed.js} +7 -8
- package/{Switch-15d9a890.js → Switch-4a41585f.js} +40 -39
- package/{Tab-88f77a44.js → Tab-f499ecbc.js} +9 -10
- package/{Tabs-e64ecfaa.js → Tabs-a8c77f71.js} +38 -48
- package/{TextArea-cbe713eb.js → TextArea-a5579cc8.js} +140 -151
- package/{TextInput-b9414cc6.js → TextInput-0d109708.js} +70 -64
- package/{Tooltip-22238771.js → Tooltip-66daf6e3.js} +20 -21
- package/{VerificationStatusIcon-99a54d5d.js → VerificationStatusIcon-6fe95a92.js} +33 -24
- package/{close-1751121a.js → close-ebf2f3cf.js} +12 -8
- package/data/Alert/index.js +2 -3
- package/data/Badge/index.js +2 -3
- package/data/Popover/index.js +3 -4
- package/data/Tab/index.js +2 -3
- package/data/Tabs/index.js +3 -4
- package/data/Tooltip/index.js +3 -4
- package/data/index.js +9 -10
- package/{index-1e234d23.js → defaultTheme-ea44e34a.js} +352 -39
- package/edit-note-c47d292e.js +41 -0
- package/{expand-more-d74e2bd2.js → expand-more-94585605.js} +12 -8
- package/inputs/ActionButton/index.js +2 -3
- package/inputs/Button/index.js +6 -7
- package/inputs/Checkbox/index.js +2 -3
- package/inputs/CompactAutocompleteSelect/index.js +13 -14
- package/inputs/CompactStarRating/index.js +10 -11
- package/inputs/CompactTextInput/index.js +11 -12
- package/inputs/MultiSelect/index.js +4 -5
- package/inputs/Radio/index.js +2 -3
- package/inputs/Switch/index.js +2 -3
- package/inputs/TextArea/index.js +11 -12
- package/inputs/TextInput/index.js +3 -4
- package/inputs/index.js +28 -31
- package/layout/InputGroup/index.js +2 -3
- package/layout/SectionSeparator/index.js +2 -3
- package/layout/index.js +3 -4
- package/package.json +5 -5
- package/{react-select-creatable.esm-31bd2caf.js → react-select-creatable.esm-2f23d6c6.js} +1272 -1470
- package/{shift-away-subtle-c3c2f2b2.js → shift-away-subtle-0bed9a3c.js} +1 -1
- package/ssr/index.js +3 -1
- package/{warning-circle-478e65cc.js → warning-circle-24522402.js} +12 -8
- package/widgets/AssetGallery/index.js +31 -33
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -4
- package/widgets/ContextMenu/ContextMenuItem/index.js +2 -3
- package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +7 -8
- package/widgets/ContextMenu/index.js +2 -3
- package/widgets/Instructions/index.js +17 -18
- package/widgets/index.js +33 -35
- package/CompactAutocompleteSelectAsync-e76bf873.js +0 -28
- package/defaultTheme-8bd3e0b9.js +0 -271
- package/edit-note-cefe2215.js +0 -37
- package/inputs/CompactAutocompleteSelectAsync/index.js +0 -11
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-ea44e34a.js');
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
|
-
var index = require('./index-1e234d23.js');
|
|
7
6
|
var React = require('react');
|
|
8
|
-
require('./Alert-
|
|
9
|
-
require('./Badge-
|
|
10
|
-
require('./Popover-
|
|
11
|
-
require('./Tab-
|
|
12
|
-
require('./Tabs-
|
|
13
|
-
var Tooltip = require('./Tooltip-
|
|
14
|
-
require('./VerificationStatusIcon-
|
|
7
|
+
require('./Alert-13b75102.js');
|
|
8
|
+
require('./Badge-aec841c8.js');
|
|
9
|
+
require('./Popover-569cd272.js');
|
|
10
|
+
require('./Tab-f499ecbc.js');
|
|
11
|
+
require('./Tabs-a8c77f71.js');
|
|
12
|
+
var Tooltip = require('./Tooltip-66daf6e3.js');
|
|
13
|
+
require('./VerificationStatusIcon-6fe95a92.js');
|
|
15
14
|
var styled = require('styled-components');
|
|
16
15
|
var Select = require('react-select');
|
|
17
16
|
var reactSelectAsyncPaginate = require('react-select-async-paginate');
|
|
18
|
-
var reactSelectCreatable_esm = require('./react-select-creatable.esm-
|
|
19
|
-
var close = require('./close-
|
|
20
|
-
var expandMore = require('./expand-more-
|
|
17
|
+
var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js');
|
|
18
|
+
var close = require('./close-ebf2f3cf.js');
|
|
19
|
+
var expandMore = require('./expand-more-94585605.js');
|
|
21
20
|
|
|
22
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
22
|
|
|
@@ -44,44 +43,46 @@ var sharedStyle = styled.css(_templateObject5 || (_templateObject5 = defaultThem
|
|
|
44
43
|
}, function (props) {
|
|
45
44
|
return props.$hasLabel ? '66.66%' : '100%';
|
|
46
45
|
});
|
|
47
|
-
var CompactAutocompleteSelect$1 = styled__default[
|
|
46
|
+
var CompactAutocompleteSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n ", "\n"])), function (props) {
|
|
48
47
|
return props.theme.primaryFontFamily;
|
|
49
48
|
}, function (props) {
|
|
50
49
|
return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
51
50
|
});
|
|
52
|
-
var Label = styled__default[
|
|
53
|
-
return props.theme.themeProp('color', props.theme.getColor('
|
|
51
|
+
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n height: 19px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 2px;\n ", "\n"])), function (props) {
|
|
52
|
+
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
|
|
54
53
|
}, function (props) {
|
|
55
54
|
return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
|
|
56
55
|
});
|
|
57
|
-
var InputContainer = styled__default[
|
|
58
|
-
var SuccessContainer = styled__default[
|
|
56
|
+
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n height: 19px;\n"])));
|
|
57
|
+
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n display: flex;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n margin-right: 5px;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
59
58
|
return props.fadeIn ? 0 : 1;
|
|
60
59
|
}, function (props) {
|
|
61
60
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
62
61
|
}, function (props) {
|
|
63
62
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
64
63
|
});
|
|
65
|
-
var AsyncCreatableAutocompleteSelect = styled__default[
|
|
64
|
+
var AsyncCreatableAutocompleteSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover:not(:focus) {\n ", "\n }\n"])), sharedStyle, function (props) {
|
|
66
65
|
return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
67
66
|
}, function (props) {
|
|
68
67
|
return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
|
|
69
68
|
});
|
|
70
|
-
var AsyncAutocompleteSelect = styled__default[
|
|
69
|
+
var AsyncAutocompleteSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover:not(:focus) {\n ", "\n }\n"])), sharedStyle, function (props) {
|
|
71
70
|
return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
|
|
72
71
|
}, function (props) {
|
|
73
72
|
return props.disabled && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
|
|
74
73
|
});
|
|
75
|
-
var AutocompletSelect = styled__default[
|
|
74
|
+
var AutocompletSelect = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover:not(:focus) {\n ", "\n }\n"])), sharedStyle, function (props) {
|
|
76
75
|
return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
|
|
77
76
|
}, function (props) {
|
|
78
77
|
return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
|
|
79
78
|
});
|
|
80
|
-
var AutocompletCreatableSelect = styled__default[
|
|
79
|
+
var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n"])), sharedStyle, function (props) {
|
|
81
80
|
return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
|
|
82
81
|
});
|
|
83
|
-
var Control = styled__default[
|
|
84
|
-
return props.edit && props.theme.themeProp('background', '
|
|
82
|
+
var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n ", ";\n\n height: 22px;\n min-height: 22px;\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 3px 0 8.7px;\n cursor: pointer;\n border: 1px solid transparent;\n background-color: transparent;\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n ", "\n ", "\n }\n\n & .dropdown-indicator {\n display: none;\n }\n\n &:hover .dropdown-indicator {\n display: flex;\n }\n\n &&:hover {\n border-color: transparent;\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
|
|
83
|
+
return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
|
|
84
|
+
}, function (props) {
|
|
85
|
+
return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
|
|
85
86
|
}, function (props) {
|
|
86
87
|
return props.type && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
|
|
87
88
|
return props.type === 'success' ? fadeIn : fadeOut;
|
|
@@ -109,7 +110,7 @@ var Control = styled__default["default"](Select.components.Control).attrs(defaul
|
|
|
109
110
|
}, function (props) {
|
|
110
111
|
return props.type === 'error' && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
|
|
111
112
|
});
|
|
112
|
-
var Option = styled__default[
|
|
113
|
+
var Option = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n && {\n min-height: 22px;\n height: 22px;\n display: flex;\n align-items: center;\n padding: 6px;\n cursor: pointer;\n padding: 1px 13px;\n ", "\n ", "\n ", "\n ", "\n }\n svg {\n width: 15px;\n margin: 0 9px 0 0;\n }\n a {\n display: flex;\n text-decoration: none;\n color: inherit;\n }\n"])), function (props) {
|
|
113
114
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
114
115
|
}, function (props) {
|
|
115
116
|
return props.isFocused && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
|
|
@@ -118,154 +119,171 @@ var Option = styled__default["default"](Select.components.Option).attrs(defaultT
|
|
|
118
119
|
}, function (props) {
|
|
119
120
|
return props.isFocused && props.isSelected && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
|
|
120
121
|
});
|
|
121
|
-
var Placeholder = styled__default[
|
|
122
|
+
var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", "\n ", ";\n }\n"])), function (props) {
|
|
122
123
|
return (props.type === 'error' || props.type === 'warning') && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
|
|
123
124
|
}, function (props) {
|
|
124
125
|
return (props.type === 'error' || props.type === 'warning') && props.theme.themeProp('opacity', '0.6', '0.6');
|
|
125
126
|
});
|
|
126
|
-
var SingleValue = styled__default[
|
|
127
|
+
var SingleValue = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
|
|
127
128
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
128
129
|
});
|
|
129
|
-
var Input = styled__default[
|
|
130
|
+
var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n && {\n margin: 0;\n padding: 0;\n padding-left: 2px;\n ", "\n }\n"])), function (props) {
|
|
130
131
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
131
132
|
});
|
|
132
|
-
var Menu = styled__default[
|
|
133
|
+
var Menu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
|
|
133
134
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
|
|
134
135
|
});
|
|
135
|
-
var ValueContainer = styled__default[
|
|
136
|
-
var ClearIndicator = styled__default[
|
|
136
|
+
var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n && {\n padding: 0;\n }\n"])));
|
|
137
|
+
var ClearIndicator = styled__default['default'](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n cursor: pointer;\n ", ";\n }\n"])), function (props) {
|
|
137
138
|
return props.isFocused ? 'flex' : 'none';
|
|
138
139
|
}, function (props) {
|
|
139
140
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
140
141
|
});
|
|
141
|
-
var DropdownIndicator = styled__default[
|
|
142
|
+
var DropdownIndicator = styled__default['default'](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n width: 18px;\n margin-left: 2px;\n cursor: pointer;\n margin-top: 1px;\n ", ";\n }\n"])), function (props) {
|
|
142
143
|
return props.isFocused ? 'flex' : 'none';
|
|
143
144
|
}, function (props) {
|
|
144
145
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
145
146
|
});
|
|
146
|
-
var DropdownIndicatorIcon = styled__default[
|
|
147
|
-
var ClearIndicatorIcon = styled__default[
|
|
147
|
+
var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n width: 12px;\n"])));
|
|
148
|
+
var ClearIndicatorIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n width: 8px;\n margin-right: 4px;\n ", ";\n stroke-width: 2px;\n"])), function (props) {
|
|
148
149
|
return props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
149
150
|
});
|
|
150
|
-
var IndicatorSeparator = styled__default[
|
|
151
|
+
var IndicatorSeparator = styled__default['default'](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n margin: 4px;\n ", ";\n }\n"])), function (props) {
|
|
151
152
|
return props.isFocused ? 'flex' : 'none';
|
|
152
153
|
}, function (props) {
|
|
153
154
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
154
155
|
});
|
|
155
156
|
|
|
156
|
-
var
|
|
157
|
-
var CompactAutocompleteSelect = React__default["default"].forwardRef(function CompactAutocompleteSelect(_ref, forwardedRef) {
|
|
157
|
+
var CompactAutocompleteSelect = React__default['default'].forwardRef(function CompactAutocompleteSelect(_ref, forwardedRef) {
|
|
158
158
|
var label = _ref.label,
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
159
|
+
availableOptions = _ref.availableOptions,
|
|
160
|
+
placeholder = _ref.placeholder,
|
|
161
|
+
selectedOption = _ref.selectedOption,
|
|
162
|
+
loadOptions = _ref.loadOptions,
|
|
163
|
+
noOptionsMessageFunc = _ref.noOptionsMessageFunc,
|
|
164
|
+
createNewOptionMessageFunc = _ref.createNewOptionMessageFunc,
|
|
165
|
+
onUpdateCallback = _ref.onUpdateCallback,
|
|
166
|
+
loadingMessageFunc = _ref.loadingMessageFunc,
|
|
167
|
+
creatable = _ref.creatable,
|
|
168
|
+
readOnly = _ref.readOnly,
|
|
169
|
+
edit = _ref.edit,
|
|
170
|
+
disabled = _ref.disabled,
|
|
171
|
+
hidden = _ref.hidden,
|
|
172
|
+
type = _ref.type,
|
|
173
|
+
descriptionToolTip = _ref.descriptionToolTip,
|
|
174
|
+
loadingIcon = _ref.loadingIcon,
|
|
175
|
+
successIcon = _ref.successIcon,
|
|
176
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "edit", "disabled", "hidden", "type", "descriptionToolTip", "loadingIcon", "successIcon"]);
|
|
177
|
+
|
|
177
178
|
var _useState = React.useState(nanoid.nanoid()),
|
|
178
|
-
|
|
179
|
-
|
|
179
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
180
|
+
uniqueId = _useState2[0];
|
|
181
|
+
|
|
180
182
|
var _useState3 = React.useState(selectedOption),
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
183
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
184
|
+
selected = _useState4[0],
|
|
185
|
+
setSelected = _useState4[1];
|
|
186
|
+
|
|
184
187
|
var _useState5 = React.useState(false),
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
+
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
189
|
+
focused = _useState6[0],
|
|
190
|
+
setFocused = _useState6[1];
|
|
191
|
+
|
|
188
192
|
var _useState7 = React.useState(0),
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
193
|
+
_useState8 = defaultTheme._slicedToArray(_useState7, 2),
|
|
194
|
+
cacheUnique = _useState8[0],
|
|
195
|
+
setCacheUnique = _useState8[1];
|
|
196
|
+
|
|
192
197
|
var memoizedDescriptionToolTip = React.useMemo(function () {
|
|
193
198
|
return descriptionToolTip;
|
|
194
199
|
}, [descriptionToolTip]);
|
|
200
|
+
|
|
195
201
|
var Control$1 = function Control$1(props) {
|
|
196
|
-
return React__default[
|
|
202
|
+
return React__default['default'].createElement(Control, defaultTheme._extends({
|
|
197
203
|
className: "select-control",
|
|
198
204
|
edit: edit,
|
|
199
205
|
type: type
|
|
200
206
|
}, props));
|
|
201
207
|
};
|
|
208
|
+
|
|
202
209
|
var ValueContainer$1 = React.useMemo(function () {
|
|
203
210
|
var valueContainer = function valueContainer(props) {
|
|
204
|
-
return React__default[
|
|
211
|
+
return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(ValueContainer, defaultTheme._extends({
|
|
205
212
|
type: type
|
|
206
213
|
}, props)));
|
|
207
214
|
};
|
|
215
|
+
|
|
208
216
|
valueContainer.displayName = 'ValueContainerWrapper';
|
|
209
217
|
return valueContainer;
|
|
210
218
|
}, [type]);
|
|
211
219
|
var Input$1 = React.useMemo(function () {
|
|
212
220
|
var selectInput = function selectInput(props) {
|
|
213
|
-
return React__default[
|
|
221
|
+
return React__default['default'].createElement(Input, defaultTheme._extends({
|
|
214
222
|
className: "select-input"
|
|
215
223
|
}, props));
|
|
216
224
|
};
|
|
225
|
+
|
|
217
226
|
selectInput.displayName = 'InputWrapper';
|
|
218
227
|
return selectInput;
|
|
219
228
|
}, []);
|
|
220
229
|
var Menu$1 = React.useMemo(function () {
|
|
221
230
|
var menu = function menu(props) {
|
|
222
|
-
return React__default[
|
|
231
|
+
return React__default['default'].createElement(Menu, defaultTheme._extends({
|
|
223
232
|
className: "select-menu"
|
|
224
233
|
}, props));
|
|
225
234
|
};
|
|
235
|
+
|
|
226
236
|
menu.displayName = 'MenuWrapper';
|
|
227
237
|
return menu;
|
|
228
238
|
}, []);
|
|
239
|
+
|
|
229
240
|
var Placeholder$1 = function Placeholder$1(props) {
|
|
230
|
-
return React__default[
|
|
241
|
+
return React__default['default'].createElement(Placeholder, defaultTheme._extends({
|
|
231
242
|
className: "select-placeholder",
|
|
232
243
|
type: type
|
|
233
244
|
}, props));
|
|
234
245
|
};
|
|
246
|
+
|
|
235
247
|
var Option$1 = function Option$1(props) {
|
|
236
|
-
return !props.data.link ? React__default[
|
|
248
|
+
return !props.data.link ? React__default['default'].createElement(Option, defaultTheme._extends({
|
|
237
249
|
className: "menu-item"
|
|
238
|
-
}, props)) : React__default[
|
|
250
|
+
}, props)) : React__default['default'].createElement(Option, props, React__default['default'].createElement("a", {
|
|
239
251
|
href: props.data.link
|
|
240
252
|
}, props.data.icon, props.label));
|
|
241
253
|
};
|
|
254
|
+
|
|
242
255
|
var SingleValue$1 = function SingleValue$1(props) {
|
|
243
|
-
return React__default[
|
|
256
|
+
return React__default['default'].createElement(SingleValue, defaultTheme._extends({
|
|
244
257
|
className: "menu-value"
|
|
245
258
|
}, props));
|
|
246
259
|
};
|
|
260
|
+
|
|
247
261
|
Option$1.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
248
|
-
data:
|
|
249
|
-
icon:
|
|
250
|
-
link:
|
|
262
|
+
data: defaultTheme.PropTypes.shape({
|
|
263
|
+
icon: defaultTheme.PropTypes.node,
|
|
264
|
+
link: defaultTheme.PropTypes.string
|
|
251
265
|
}),
|
|
252
|
-
label:
|
|
266
|
+
label: defaultTheme.PropTypes.string
|
|
253
267
|
} : {};
|
|
268
|
+
|
|
254
269
|
var DropdownIndicator$1 = function DropdownIndicator$1(props) {
|
|
255
|
-
return React__default[
|
|
270
|
+
return React__default['default'].createElement(DropdownIndicator, defaultTheme._extends({
|
|
256
271
|
className: "dropdown-indicator"
|
|
257
|
-
}, props), React__default[
|
|
272
|
+
}, props), React__default['default'].createElement(DropdownIndicatorIcon, null));
|
|
258
273
|
};
|
|
274
|
+
|
|
259
275
|
var ClearIndicator$1 = function ClearIndicator$1(props) {
|
|
260
|
-
return React__default[
|
|
276
|
+
return React__default['default'].createElement(ClearIndicator, defaultTheme._extends({
|
|
261
277
|
className: "clear-indicator"
|
|
262
|
-
}, props), React__default[
|
|
278
|
+
}, props), React__default['default'].createElement(ClearIndicatorIcon, null));
|
|
263
279
|
};
|
|
280
|
+
|
|
264
281
|
var IndicatorSeparator$1 = function IndicatorSeparator$1(props) {
|
|
265
|
-
return React__default[
|
|
282
|
+
return React__default['default'].createElement(IndicatorSeparator, defaultTheme._extends({
|
|
266
283
|
className: "indicator-separator"
|
|
267
284
|
}, props));
|
|
268
285
|
};
|
|
286
|
+
|
|
269
287
|
var innerComponents = {
|
|
270
288
|
Control: Control$1,
|
|
271
289
|
ValueContainer: ValueContainer$1,
|
|
@@ -308,65 +326,80 @@ var CompactAutocompleteSelect = React__default["default"].forwardRef(function Co
|
|
|
308
326
|
if (onUpdateCallback) {
|
|
309
327
|
onUpdateCallback(actionMeta.action, selected.value);
|
|
310
328
|
}
|
|
311
|
-
|
|
329
|
+
|
|
330
|
+
if (loadOptions) {
|
|
312
331
|
setCacheUnique(cacheUnique + 1);
|
|
313
332
|
}
|
|
333
|
+
|
|
314
334
|
setSelected(selected);
|
|
315
335
|
break;
|
|
336
|
+
|
|
316
337
|
case 'select-option':
|
|
317
338
|
if (onUpdateCallback) {
|
|
318
339
|
onUpdateCallback(actionMeta.action, selected.value);
|
|
319
340
|
}
|
|
341
|
+
|
|
320
342
|
setSelected(selected);
|
|
321
343
|
break;
|
|
344
|
+
|
|
322
345
|
case 'remove-value':
|
|
323
346
|
if (onUpdateCallback) {
|
|
324
347
|
onUpdateCallback(actionMeta.action, selected.value);
|
|
325
348
|
}
|
|
349
|
+
|
|
326
350
|
setSelected(selected);
|
|
327
351
|
break;
|
|
352
|
+
|
|
328
353
|
case 'pop-value':
|
|
329
354
|
if (onUpdateCallback) {
|
|
330
355
|
onUpdateCallback(actionMeta.action, selected.value);
|
|
331
356
|
}
|
|
357
|
+
|
|
332
358
|
setSelected(selected);
|
|
333
359
|
break;
|
|
360
|
+
|
|
334
361
|
case 'deselect-option':
|
|
335
362
|
if (onUpdateCallback) {
|
|
336
363
|
onUpdateCallback(actionMeta.action, selected.value);
|
|
337
364
|
}
|
|
365
|
+
|
|
338
366
|
setSelected(selected);
|
|
339
367
|
break;
|
|
368
|
+
|
|
340
369
|
case 'clear':
|
|
341
370
|
setSelected(selected);
|
|
342
371
|
break;
|
|
372
|
+
|
|
343
373
|
default:
|
|
344
374
|
if (onUpdateCallback) {
|
|
345
375
|
onUpdateCallback(actionMeta.action, selected.value);
|
|
346
376
|
}
|
|
377
|
+
|
|
347
378
|
setSelected(selected);
|
|
348
379
|
break;
|
|
349
380
|
}
|
|
350
381
|
}
|
|
351
382
|
};
|
|
352
383
|
if (hidden) return null;
|
|
384
|
+
|
|
353
385
|
var input = function input() {
|
|
354
|
-
return React__default[
|
|
386
|
+
return React__default['default'].createElement(CompactAutocompleteSelect$1, {
|
|
355
387
|
disabled: disabled
|
|
356
|
-
}, React__default[
|
|
388
|
+
}, React__default['default'].createElement(InputContainer, null, label && React__default['default'].createElement(Label, {
|
|
357
389
|
htmlFor: uniqueId,
|
|
358
390
|
disabled: disabled
|
|
359
|
-
}, label, React__default[
|
|
391
|
+
}, label, React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableAutocompleteSelect, defaultTheme._extends({
|
|
360
392
|
$hasLabel: !lodash.isEmpty(label)
|
|
361
|
-
}, sharedSelectProps, props)) : React__default[
|
|
393
|
+
}, sharedSelectProps, props)) : React__default['default'].createElement(AsyncAutocompleteSelect, defaultTheme._extends({
|
|
362
394
|
$hasLabel: !lodash.isEmpty(label)
|
|
363
|
-
},
|
|
395
|
+
}, sharedSelectProps, props)) : creatable ? React__default['default'].createElement(AutocompletCreatableSelect, defaultTheme._extends({
|
|
364
396
|
$hasLabel: !lodash.isEmpty(label)
|
|
365
|
-
}, sharedSelectProps, props)) : React__default[
|
|
397
|
+
}, sharedSelectProps, props)) : React__default['default'].createElement(AutocompletSelect, defaultTheme._extends({
|
|
366
398
|
$hasLabel: !lodash.isEmpty(label)
|
|
367
399
|
}, sharedSelectProps, props))));
|
|
368
400
|
};
|
|
369
|
-
|
|
401
|
+
|
|
402
|
+
return React__default['default'].createElement(React__default['default'].Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip.Tooltip, {
|
|
370
403
|
content: memoizedDescriptionToolTip,
|
|
371
404
|
key: "tooltipTextArea1",
|
|
372
405
|
placement: "bottom-end",
|
|
@@ -375,26 +408,26 @@ var CompactAutocompleteSelect = React__default["default"].forwardRef(function Co
|
|
|
375
408
|
}, input())));
|
|
376
409
|
});
|
|
377
410
|
CompactAutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
378
|
-
label:
|
|
379
|
-
placeholder:
|
|
380
|
-
availableOptions:
|
|
381
|
-
selectedOption:
|
|
382
|
-
loadOptions:
|
|
383
|
-
loadingMessageFunc:
|
|
384
|
-
createNewOptionMessageFunc:
|
|
385
|
-
noOptionsMessageFunc:
|
|
386
|
-
readOnly:
|
|
387
|
-
edit:
|
|
388
|
-
hidden:
|
|
389
|
-
error:
|
|
390
|
-
warning:
|
|
391
|
-
onUpdateCallback:
|
|
392
|
-
creatable:
|
|
393
|
-
disabled:
|
|
394
|
-
type:
|
|
395
|
-
descriptionToolTip:
|
|
396
|
-
loadingIcon:
|
|
397
|
-
successIcon:
|
|
411
|
+
label: defaultTheme.PropTypes.string,
|
|
412
|
+
placeholder: defaultTheme.PropTypes.string,
|
|
413
|
+
availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
|
|
414
|
+
selectedOption: defaultTheme.PropTypes.object,
|
|
415
|
+
loadOptions: defaultTheme.PropTypes.func,
|
|
416
|
+
loadingMessageFunc: defaultTheme.PropTypes.func,
|
|
417
|
+
createNewOptionMessageFunc: defaultTheme.PropTypes.func,
|
|
418
|
+
noOptionsMessageFunc: defaultTheme.PropTypes.func,
|
|
419
|
+
readOnly: defaultTheme.PropTypes.bool,
|
|
420
|
+
edit: defaultTheme.PropTypes.bool,
|
|
421
|
+
hidden: defaultTheme.PropTypes.bool,
|
|
422
|
+
error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
423
|
+
warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
424
|
+
onUpdateCallback: defaultTheme.PropTypes.func,
|
|
425
|
+
creatable: defaultTheme.PropTypes.bool,
|
|
426
|
+
disabled: defaultTheme.PropTypes.bool,
|
|
427
|
+
type: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
|
|
428
|
+
descriptionToolTip: defaultTheme.PropTypes.string,
|
|
429
|
+
loadingIcon: defaultTheme.PropTypes.element,
|
|
430
|
+
successIcon: defaultTheme.PropTypes.element
|
|
398
431
|
} : {};
|
|
399
432
|
CompactAutocompleteSelect.defaultProps = {
|
|
400
433
|
noOptionsMessageFunc: function noOptionsMessageFunc(inputValue) {
|