@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,13 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-ea44e34a.js');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var index = require('./index-1e234d23.js');
|
|
6
5
|
var nanoid = require('nanoid');
|
|
7
6
|
var styled = require('styled-components');
|
|
8
|
-
var close = require('./close-
|
|
7
|
+
var close = require('./close-ebf2f3cf.js');
|
|
9
8
|
var Select = require('react-select');
|
|
10
|
-
var reactSelectCreatable_esm = require('./react-select-creatable.esm-
|
|
9
|
+
var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js');
|
|
11
10
|
var reactSelectAsyncPaginate = require('react-select-async-paginate');
|
|
12
11
|
|
|
13
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -22,26 +21,26 @@ var showMoreHeight = 114;
|
|
|
22
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) {
|
|
23
22
|
return props.theme.primaryFontFamily;
|
|
24
23
|
});
|
|
25
|
-
var Label = styled__default[
|
|
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) {
|
|
26
25
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
|
|
27
26
|
});
|
|
28
|
-
var MultiSelect$1 = styled__default[
|
|
29
|
-
var CreatableMultiSelect = styled__default[
|
|
30
|
-
var AsyncCreatableMultiSelect = styled__default[
|
|
31
|
-
var AsyncMultiSelect = styled__default[
|
|
32
|
-
var MultiSelectWrapper = styled__default[
|
|
33
|
-
var Control = styled__default[
|
|
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) {
|
|
34
33
|
return !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer';
|
|
35
34
|
});
|
|
36
|
-
var ValueContainer = styled__default[
|
|
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) {
|
|
37
36
|
return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
|
|
38
37
|
}, function (props) {
|
|
39
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) {
|
|
40
39
|
return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
|
|
41
40
|
});
|
|
42
41
|
});
|
|
43
|
-
var MultiValueWrapper = styled__default[
|
|
44
|
-
var MultiValue = styled__default[
|
|
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) {
|
|
45
44
|
return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'));
|
|
46
45
|
}, function (props) {
|
|
47
46
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'));
|
|
@@ -50,8 +49,8 @@ var MultiValue = styled__default["default"](Select.components.MultiValue).attrs(
|
|
|
50
49
|
}, function (props) {
|
|
51
50
|
return props.theme.getColor('red-500');
|
|
52
51
|
});
|
|
53
|
-
var MultiValueRemove = styled__default[
|
|
54
|
-
var Input = styled__default[
|
|
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) {
|
|
55
54
|
return props.$focused ? '14px' : '12px';
|
|
56
55
|
}, function (props) {
|
|
57
56
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
@@ -62,7 +61,7 @@ var Input = styled__default["default"](Select.components.Input).attrs(defaultThe
|
|
|
62
61
|
return props.edittext;
|
|
63
62
|
});
|
|
64
63
|
});
|
|
65
|
-
var DropdownMenu = styled__default[
|
|
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) {
|
|
66
65
|
return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'));
|
|
67
66
|
}, function (props) {
|
|
68
67
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
@@ -74,112 +73,124 @@ var sharedOptionStyle = styled.css(_templateObject17 || (_templateObject17 = def
|
|
|
74
73
|
}, function (props) {
|
|
75
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')));
|
|
76
75
|
});
|
|
77
|
-
var Option = styled__default[
|
|
78
|
-
var SelectedOption$1 = styled__default[
|
|
79
|
-
var DropdownOptionDeleteIcon = styled__default[
|
|
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) {
|
|
80
79
|
return props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
81
80
|
});
|
|
82
|
-
var ShowMoreWrapper = styled__default[
|
|
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) {
|
|
83
82
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'));
|
|
84
83
|
});
|
|
85
|
-
var ShowMoreOverlay = styled__default[
|
|
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) {
|
|
86
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');
|
|
87
86
|
});
|
|
88
|
-
var ShowMoreText = styled__default[
|
|
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) {
|
|
89
88
|
return props.theme.themeProp('background-color', '#121212', '#fefefe');
|
|
90
89
|
});
|
|
91
|
-
var ErrorMessage = styled__default[
|
|
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) {
|
|
92
91
|
return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
|
|
93
92
|
});
|
|
94
93
|
|
|
95
|
-
var
|
|
96
|
-
var MultiSelect = React__default["default"].forwardRef(function MultiSelect(_ref, forwardedRef) {
|
|
94
|
+
var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref, forwardedRef) {
|
|
97
95
|
var label = _ref.label,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
96
|
+
selectedOptions = _ref.selectedOptions,
|
|
97
|
+
availableOptions = _ref.availableOptions,
|
|
98
|
+
loadOptions = _ref.loadOptions,
|
|
99
|
+
loadingMessageFunc = _ref.loadingMessageFunc,
|
|
100
|
+
onUpdateCallback = _ref.onUpdateCallback,
|
|
101
|
+
editText = _ref.editText,
|
|
102
|
+
createNewOptionMessageFunc = _ref.createNewOptionMessageFunc,
|
|
103
|
+
noOptionsMessageFunc = _ref.noOptionsMessageFunc,
|
|
104
|
+
onMultiValueClick = _ref.onMultiValueClick,
|
|
105
|
+
showMore = _ref.showMore,
|
|
106
|
+
showMoreText = _ref.showMoreText,
|
|
107
|
+
displayTotalOnShowMore = _ref.displayTotalOnShowMore,
|
|
108
|
+
creatable = _ref.creatable,
|
|
109
|
+
readOnly = _ref.readOnly,
|
|
110
|
+
hidden = _ref.hidden,
|
|
111
|
+
disabled = _ref.disabled,
|
|
112
|
+
error = _ref.error,
|
|
113
|
+
warning = _ref.warning,
|
|
114
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["label", "selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "hidden", "disabled", "error", "warning"]);
|
|
115
|
+
|
|
117
116
|
var _useState = React.useState(nanoid.nanoid()),
|
|
118
|
-
|
|
119
|
-
|
|
117
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
118
|
+
uniqueId = _useState2[0];
|
|
119
|
+
|
|
120
120
|
var _useState3 = React.useState(selectedOptions),
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
121
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
122
|
+
selected = _useState4[0],
|
|
123
|
+
setSelected = _useState4[1];
|
|
124
|
+
|
|
124
125
|
var _useState5 = React.useState(false),
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
126
|
+
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
127
|
+
focused = _useState6[0],
|
|
128
|
+
setFocused = _useState6[1];
|
|
129
|
+
|
|
128
130
|
var _useState7 = React.useState(error || warning ? false : showMore),
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
131
|
+
_useState8 = defaultTheme._slicedToArray(_useState7, 2),
|
|
132
|
+
displayShowMore = _useState8[0],
|
|
133
|
+
setDisplayShowMore = _useState8[1];
|
|
134
|
+
|
|
132
135
|
var _useState9 = React.useState(0),
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
+
_useState10 = defaultTheme._slicedToArray(_useState9, 2),
|
|
137
|
+
cacheUnique = _useState10[0],
|
|
138
|
+
setCacheUnique = _useState10[1];
|
|
139
|
+
|
|
136
140
|
React.useEffect(function () {
|
|
137
141
|
setSelected(selectedOptions);
|
|
138
142
|
}, [selectedOptions]);
|
|
143
|
+
|
|
139
144
|
var handleShowMoreClick = function handleShowMoreClick() {
|
|
140
145
|
setDisplayShowMore(false);
|
|
141
146
|
};
|
|
147
|
+
|
|
142
148
|
var Control$1 = React.useMemo(function () {
|
|
143
149
|
var ControlWrapper = function ControlWrapper(innerProps) {
|
|
144
|
-
return React__default[
|
|
150
|
+
return React__default['default'].createElement(Control, defaultTheme._extends({
|
|
145
151
|
className: "multi-select-control",
|
|
146
152
|
readOnly: readOnly
|
|
147
153
|
}, innerProps));
|
|
148
154
|
};
|
|
155
|
+
|
|
149
156
|
ControlWrapper.displayName = 'ControlWrapper';
|
|
150
157
|
return ControlWrapper;
|
|
151
158
|
}, []);
|
|
152
159
|
var ValueContainer$1 = React.useMemo(function () {
|
|
153
160
|
var ValueContainerWrapper = function ValueContainerWrapper(innerProps) {
|
|
154
|
-
return React__default[
|
|
161
|
+
return React__default['default'].createElement(React__default['default'].Fragment, null, label && React__default['default'].createElement(Label, {
|
|
155
162
|
htmlFor: uniqueId
|
|
156
|
-
}, label), React__default[
|
|
163
|
+
}, label), React__default['default'].createElement(ValueContainer, defaultTheme._extends({
|
|
157
164
|
showMore: displayShowMore,
|
|
158
165
|
error: error,
|
|
159
166
|
warning: warning,
|
|
160
167
|
className: "multi-select-values-container"
|
|
161
168
|
}, innerProps)));
|
|
162
169
|
};
|
|
170
|
+
|
|
163
171
|
ValueContainerWrapper.displayName = 'ValueContainerWrapper';
|
|
164
172
|
return ValueContainerWrapper;
|
|
165
173
|
}, [displayShowMore, error, warning]);
|
|
174
|
+
|
|
166
175
|
var MultiValue$1 = function MultiValue$1(innerProps) {
|
|
167
|
-
return React__default[
|
|
176
|
+
return React__default['default'].createElement(MultiValueWrapper, {
|
|
168
177
|
className: "multi-value-wrapper",
|
|
169
178
|
onMouseDown: function onMouseDown(e) {
|
|
170
179
|
e.stopPropagation();
|
|
180
|
+
|
|
171
181
|
if (onMultiValueClick && innerProps.data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
|
|
172
182
|
onMultiValueClick(innerProps.data);
|
|
173
183
|
}
|
|
174
184
|
}
|
|
175
|
-
}, React__default[
|
|
185
|
+
}, React__default['default'].createElement(MultiValue, defaultTheme._extends({
|
|
176
186
|
className: "multi-value",
|
|
177
187
|
readOnly: readOnly
|
|
178
188
|
}, innerProps)));
|
|
179
189
|
};
|
|
190
|
+
|
|
180
191
|
var Input$1 = React.useMemo(function () {
|
|
181
192
|
var InputWrapper = function InputWrapper(innerProps) {
|
|
182
|
-
return React__default[
|
|
193
|
+
return React__default['default'].createElement(Input, defaultTheme._extends({
|
|
183
194
|
className: "multi-select-input",
|
|
184
195
|
$focused: focused,
|
|
185
196
|
edittext: editText
|
|
@@ -187,6 +198,7 @@ var MultiSelect = React__default["default"].forwardRef(function MultiSelect(_ref
|
|
|
187
198
|
isDisabled: readOnly || disabled
|
|
188
199
|
}));
|
|
189
200
|
};
|
|
201
|
+
|
|
190
202
|
InputWrapper.displayName = 'InputWrapper';
|
|
191
203
|
return InputWrapper;
|
|
192
204
|
}, [focused]);
|
|
@@ -238,77 +250,90 @@ var MultiSelect = React__default["default"].forwardRef(function MultiSelect(_ref
|
|
|
238
250
|
if (onUpdateCallback) {
|
|
239
251
|
onUpdateCallback(actionMeta.action, actionMeta.option);
|
|
240
252
|
}
|
|
253
|
+
|
|
241
254
|
if (loadOptions) {
|
|
242
255
|
setCacheUnique(cacheUnique + 1);
|
|
243
256
|
}
|
|
257
|
+
|
|
244
258
|
setSelected(selectedOptions);
|
|
245
259
|
break;
|
|
260
|
+
|
|
246
261
|
case 'select-option':
|
|
247
262
|
if (onUpdateCallback) {
|
|
248
263
|
onUpdateCallback(actionMeta.action, actionMeta.option);
|
|
249
264
|
}
|
|
265
|
+
|
|
250
266
|
setSelected(selectedOptions);
|
|
251
267
|
break;
|
|
268
|
+
|
|
252
269
|
case 'remove-value':
|
|
253
270
|
if (onUpdateCallback) {
|
|
254
271
|
onUpdateCallback(actionMeta.action, actionMeta.removedValue);
|
|
255
272
|
}
|
|
273
|
+
|
|
256
274
|
setSelected(selectedOptions);
|
|
257
275
|
break;
|
|
276
|
+
|
|
258
277
|
case 'pop-value':
|
|
259
278
|
if (onUpdateCallback) {
|
|
260
279
|
onUpdateCallback(actionMeta.action, actionMeta.removedValue);
|
|
261
280
|
}
|
|
281
|
+
|
|
262
282
|
setSelected(selectedOptions);
|
|
263
283
|
break;
|
|
284
|
+
|
|
264
285
|
case 'deselect-option':
|
|
265
286
|
if (onUpdateCallback) {
|
|
266
287
|
onUpdateCallback(actionMeta.action, actionMeta.option);
|
|
267
288
|
}
|
|
289
|
+
|
|
268
290
|
setSelected(selectedOptions);
|
|
269
291
|
break;
|
|
292
|
+
|
|
270
293
|
case 'clear':
|
|
271
294
|
break;
|
|
295
|
+
|
|
272
296
|
default:
|
|
273
297
|
if (onUpdateCallback) {
|
|
274
298
|
onUpdateCallback(actionMeta.action, actionMeta.option);
|
|
275
299
|
}
|
|
300
|
+
|
|
276
301
|
setSelected(selectedOptions);
|
|
277
302
|
break;
|
|
278
303
|
}
|
|
279
304
|
}
|
|
280
305
|
};
|
|
281
306
|
if (hidden) return null;
|
|
282
|
-
return React__default[
|
|
307
|
+
return React__default['default'].createElement(MultiSelectWrapper, {
|
|
283
308
|
error: error,
|
|
284
309
|
warning: warning
|
|
285
|
-
}, loadOptions ? creatable ? React__default[
|
|
310
|
+
}, loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : React__default['default'].createElement(AsyncMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : creatable ? React__default['default'].createElement(CreatableMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : React__default['default'].createElement(MultiSelect$1, defaultTheme._extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React__default['default'].createElement(ShowMoreWrapper, {
|
|
286
311
|
onClick: handleShowMoreClick
|
|
287
|
-
}, React__default[
|
|
312
|
+
}, React__default['default'].createElement(ShowMoreOverlay, null), React__default['default'].createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && React__default['default'].createElement(ErrorMessage, {
|
|
288
313
|
error: error,
|
|
289
314
|
warning: warning
|
|
290
315
|
}, error ? error : warning));
|
|
291
316
|
});
|
|
292
317
|
MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
293
|
-
label:
|
|
294
|
-
availableOptions:
|
|
295
|
-
selectedOptions:
|
|
296
|
-
loadOptions:
|
|
297
|
-
loadingMessageFunc:
|
|
298
|
-
onUpdateCallback:
|
|
299
|
-
editText:
|
|
300
|
-
creatable:
|
|
301
|
-
createNewOptionMessageFunc:
|
|
302
|
-
noOptionsMessageFunc:
|
|
303
|
-
onMultiValueClick:
|
|
304
|
-
showMore:
|
|
305
|
-
showMoreText:
|
|
306
|
-
displayTotalOnShowMore:
|
|
307
|
-
readOnly:
|
|
308
|
-
hidden:
|
|
309
|
-
disabled:
|
|
310
|
-
error:
|
|
311
|
-
warning:
|
|
318
|
+
label: defaultTheme.PropTypes.string,
|
|
319
|
+
availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
|
|
320
|
+
selectedOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
|
|
321
|
+
loadOptions: defaultTheme.PropTypes.func,
|
|
322
|
+
loadingMessageFunc: defaultTheme.PropTypes.func,
|
|
323
|
+
onUpdateCallback: defaultTheme.PropTypes.func,
|
|
324
|
+
editText: defaultTheme.PropTypes.string.isRequired,
|
|
325
|
+
creatable: defaultTheme.PropTypes.bool,
|
|
326
|
+
createNewOptionMessageFunc: defaultTheme.PropTypes.func,
|
|
327
|
+
noOptionsMessageFunc: defaultTheme.PropTypes.func,
|
|
328
|
+
onMultiValueClick: defaultTheme.PropTypes.func,
|
|
329
|
+
showMore: defaultTheme.PropTypes.bool,
|
|
330
|
+
showMoreText: defaultTheme.PropTypes.string,
|
|
331
|
+
displayTotalOnShowMore: defaultTheme.PropTypes.bool,
|
|
332
|
+
readOnly: defaultTheme.PropTypes.bool,
|
|
333
|
+
hidden: defaultTheme.PropTypes.bool,
|
|
334
|
+
disabled: defaultTheme.PropTypes.bool,
|
|
335
|
+
error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
336
|
+
warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string])
|
|
312
337
|
} : {};
|
|
313
338
|
MultiSelect.defaultProps = {
|
|
314
339
|
noOptionsMessageFunc: function noOptionsMessageFunc(inputValue) {
|
|
@@ -328,21 +353,25 @@ MultiSelect.defaultProps = {
|
|
|
328
353
|
showMoreText: 'Show more',
|
|
329
354
|
hidden: false
|
|
330
355
|
};
|
|
356
|
+
|
|
331
357
|
var _MultiValueRemove = function _MultiValueRemove(innerProps) {
|
|
332
|
-
return React__default[
|
|
358
|
+
return React__default['default'].createElement(MultiValueRemove, innerProps, React__default['default'].createElement(close.SvgClose, {
|
|
333
359
|
className: "multi-value-remove-icon"
|
|
334
360
|
}));
|
|
335
361
|
};
|
|
362
|
+
|
|
336
363
|
var Menu = function Menu(innerProps) {
|
|
337
|
-
return React__default[
|
|
364
|
+
return React__default['default'].createElement(DropdownMenu, innerProps);
|
|
338
365
|
};
|
|
366
|
+
|
|
339
367
|
var _Option = function _Option(innerProps) {
|
|
340
|
-
return React__default[
|
|
368
|
+
return React__default['default'].createElement(Option, defaultTheme._extends({
|
|
341
369
|
className: "multi-select-dropdown-item"
|
|
342
370
|
}, innerProps));
|
|
343
371
|
};
|
|
372
|
+
|
|
344
373
|
var SelectedOption = function SelectedOption(innerProps) {
|
|
345
|
-
return React__default[
|
|
374
|
+
return React__default['default'].createElement(SelectedOption$1, innerProps, innerProps.label, React__default['default'].createElement(DropdownOptionDeleteIcon, null));
|
|
346
375
|
};
|
|
347
376
|
|
|
348
377
|
exports.MultiSelect = MultiSelect;
|
|
@@ -1,13 +1,12 @@
|
|
|
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
|
-
var index = require('./index-1e234d23.js');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
var styled = require('styled-components');
|
|
8
7
|
var polished = require('polished');
|
|
9
8
|
var TippyTooltip = require('@tippyjs/react');
|
|
10
|
-
require('./shift-away-subtle-
|
|
9
|
+
require('./shift-away-subtle-0bed9a3c.js');
|
|
11
10
|
var maxSize = require('popper-max-size-modifier');
|
|
12
11
|
|
|
13
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -18,7 +17,7 @@ var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
|
|
|
18
17
|
var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
|
|
19
18
|
|
|
20
19
|
var _templateObject, _templateObject2, _templateObject3;
|
|
21
|
-
var Popover$1 = styled__default[
|
|
20
|
+
var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 400;\n color: inherit;\n border-radius: 0;\n line-height: inherit;\n max-height: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .tippy-content {\n padding: 0;\n max-height: inherit;\n\n > div {\n max-height: inherit;\n }\n }\n\n .tippy-arrow {\n ", "\n }\n\n && > .tippy-arrow::before {\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n & > .tippy-arrow::after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-placement^='top'] {\n & > .tippy-arrow:before {\n bottom: -16px;\n left: -5px;\n border-width: 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -15px;\n left: -5px;\n border-width: 15px 13px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='right'] {\n & > .tippy-arrow:before {\n bottom: -5px;\n left: -16px;\n border-width: 13px 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -5px;\n left: -15px;\n border-width: 13px 15px 13px 0;\n border-right-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='bottom'] {\n & > .tippy-arrow:before {\n top: -16px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n ", "\n }\n\n & > .tippy-arrow:after {\n top: -14.5px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n border-bottom-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='left'] {\n & > .tippy-arrow::before {\n bottom: -5px;\n right: -16px;\n border-width: 13px 0 13px 15px;\n ", "\n }\n\n & > .tippy-arrow::after {\n bottom: -5px;\n right: -15px;\n border-width: 13px 0 13px 15px;\n border-left-color: initial;\n transform-origin: center top;\n }\n }\n"])), function (props) {
|
|
22
21
|
return props.theme.primaryFontFamily;
|
|
23
22
|
}, function (props) {
|
|
24
23
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
|
|
@@ -46,27 +45,28 @@ var Popover$1 = styled__default["default"](TippyTooltip__default["default"]).att
|
|
|
46
45
|
return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
|
|
47
46
|
});
|
|
48
47
|
|
|
49
|
-
var
|
|
50
|
-
var Popover = React__default["default"].forwardRef(function Popover(_ref, ref) {
|
|
48
|
+
var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
|
|
51
49
|
var content = _ref.content,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
50
|
+
interactive = _ref.interactive,
|
|
51
|
+
placement = _ref.placement,
|
|
52
|
+
duration = _ref.duration,
|
|
53
|
+
trigger = _ref.trigger,
|
|
54
|
+
offset = _ref.offset,
|
|
55
|
+
arrow = _ref.arrow,
|
|
56
|
+
visible = _ref.visible,
|
|
57
|
+
contextMenu = _ref.contextMenu,
|
|
58
|
+
contextMenuSublevel = _ref.contextMenuSublevel,
|
|
59
|
+
children = _ref.children,
|
|
60
|
+
modifiers = _ref.modifiers,
|
|
61
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children", "modifiers"]);
|
|
62
|
+
|
|
64
63
|
var errorOffset = React.useMemo(function () {
|
|
65
64
|
return arrow ? 15 : 0;
|
|
66
65
|
}, [arrow]);
|
|
67
66
|
var isControlled = React.useMemo(function () {
|
|
68
67
|
return lodash.isBoolean(visible);
|
|
69
68
|
}, [visible]);
|
|
69
|
+
|
|
70
70
|
var handleContextMenuItemClick = function handleContextMenuItemClick() {
|
|
71
71
|
document.querySelectorAll('.context-menu-item:not(.opens-sublevel)').forEach(function (item) {
|
|
72
72
|
return item.addEventListener('click', function () {
|
|
@@ -78,7 +78,8 @@ var Popover = React__default["default"].forwardRef(function Popover(_ref, ref) {
|
|
|
78
78
|
});
|
|
79
79
|
});
|
|
80
80
|
};
|
|
81
|
-
|
|
81
|
+
|
|
82
|
+
return React__default['default'].createElement("div", null, React__default['default'].createElement(Popover$1, defaultTheme._extends({
|
|
82
83
|
ref: ref,
|
|
83
84
|
content: content,
|
|
84
85
|
interactive: interactive,
|
|
@@ -90,7 +91,7 @@ var Popover = React__default["default"].forwardRef(function Popover(_ref, ref) {
|
|
|
90
91
|
arrow: contextMenu ? false : arrow,
|
|
91
92
|
visible: visible,
|
|
92
93
|
popperOptions: {
|
|
93
|
-
modifiers: [defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, maxSize__default[
|
|
94
|
+
modifiers: [defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, maxSize__default['default']), {}, {
|
|
94
95
|
options: {
|
|
95
96
|
boundary: 'viewport',
|
|
96
97
|
rootBoundary: 'viewport',
|
|
@@ -114,18 +115,18 @@ var Popover = React__default["default"].forwardRef(function Popover(_ref, ref) {
|
|
|
114
115
|
}, props), children));
|
|
115
116
|
});
|
|
116
117
|
Popover.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
117
|
-
content:
|
|
118
|
-
interactive:
|
|
119
|
-
placement:
|
|
120
|
-
duration:
|
|
121
|
-
trigger:
|
|
122
|
-
offset:
|
|
123
|
-
arrow:
|
|
124
|
-
visible:
|
|
125
|
-
modifiers:
|
|
126
|
-
contextMenu:
|
|
127
|
-
contextMenuSublevel:
|
|
128
|
-
children:
|
|
118
|
+
content: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]).isRequired,
|
|
119
|
+
interactive: defaultTheme.PropTypes.bool,
|
|
120
|
+
placement: defaultTheme.PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
|
|
121
|
+
duration: defaultTheme.PropTypes.number,
|
|
122
|
+
trigger: defaultTheme.PropTypes.string,
|
|
123
|
+
offset: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number),
|
|
124
|
+
arrow: defaultTheme.PropTypes.bool,
|
|
125
|
+
visible: defaultTheme.PropTypes.bool,
|
|
126
|
+
modifiers: defaultTheme.PropTypes.array,
|
|
127
|
+
contextMenu: defaultTheme.PropTypes.bool,
|
|
128
|
+
contextMenuSublevel: defaultTheme.PropTypes.bool,
|
|
129
|
+
children: defaultTheme.PropTypes.node.isRequired
|
|
129
130
|
} : {};
|
|
130
131
|
Popover.defaultProps = {
|
|
131
132
|
content: 'Tooltip',
|