@ntbjs/react-components 1.1.13 → 1.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc +7 -8
- package/{ActionButton-46735b89.js → ActionButton-b2345555.js} +19 -16
- package/{Alert-13b75102.js → Alert-d69a3f95.js} +20 -24
- package/{AssetGallery-f62e16b2.js → AssetAction-2e2d496e.js} +585 -650
- package/AssetPreviewTopBar-b1fe3188.js +104 -0
- package/{Badge-757b0a39.js → Badge-e984e6f5.js} +28 -49
- package/{Button-49f82b31.js → Button-39607724.js} +53 -65
- package/{Checkbox-68dc38a8.js → Checkbox-ad9c9e54.js} +30 -35
- package/{CompactAutocompleteSelect-96137f48.js → CompactAutocompleteSelect-7d05d707.js} +82 -114
- package/{CompactStarRating-15c1b812.js → CompactStarRating-d4cfae17.js} +71 -87
- package/{CompactTextInput-a43aea28.js → CompactTextInput-f89988be.js} +95 -105
- package/{ContextMenu-4ec3d9f3.js → ContextMenu-4eb8fdc5.js} +6 -6
- package/{ContextMenuItem-ba2b697e.js → ContextMenuItem-c536b460.js} +22 -26
- package/{InputGroup-49fbc423.js → InputGroup-a89a0ea3.js} +6 -6
- package/{Instructions-9a0fd247.js → Instructions-c8502398.js} +97 -81
- package/{MultiLevelCheckboxSelect-e6e5cb90.js → MultiLevelCheckboxSelect-6be69491.js} +102 -164
- package/{MultiSelect-efd60232.js → MultiSelect-81e7016c.js} +71 -101
- package/{Popover-569cd272.js → Popover-c5e425a7.js} +19 -21
- package/{Radio-32d0513a.js → Radio-55db4781.js} +21 -22
- package/{SectionSeparator-259a22ed.js → SectionSeparator-af8dc1ce.js} +6 -6
- package/{Switch-4a41585f.js → Switch-04ecd8d0.js} +25 -27
- package/{Tab-f499ecbc.js → Tab-e43241f0.js} +7 -7
- package/{Tabs-116aa951.js → Tabs-cfc08c6b.js} +21 -33
- package/{TextArea-a869b1a9.js → TextArea-6e15b44f.js} +110 -135
- package/{TextInput-0d109708.js → TextInput-9a995449.js} +41 -48
- package/{Tooltip-66daf6e3.js → Tooltip-a68a7e49.js} +13 -13
- package/{VerificationStatusIcon-d5bfb67a.js → VerificationStatusIcon-7b0e23fe.js} +20 -30
- package/{close-ebf2f3cf.js → close-1751121a.js} +8 -12
- package/data/Alert/index.js +2 -2
- package/data/Badge/index.js +2 -2
- package/data/Popover/index.js +3 -3
- package/data/Tab/index.js +2 -2
- package/data/Tabs/index.js +3 -3
- package/data/Tooltip/index.js +3 -3
- package/data/index.js +9 -9
- package/{defaultTheme-ea44e34a.js → defaultTheme-cd01e6c2.js} +212 -260
- package/edit-note-cefe2215.js +37 -0
- package/{expand-more-94585605.js → expand-more-d74e2bd2.js} +8 -12
- package/inputs/ActionButton/index.js +2 -2
- package/inputs/Button/index.js +6 -6
- package/inputs/Checkbox/index.js +2 -2
- package/inputs/CompactAutocompleteSelect/index.js +13 -13
- package/inputs/CompactStarRating/index.js +10 -10
- package/inputs/CompactTextInput/index.js +11 -11
- package/inputs/MultiSelect/index.js +4 -4
- package/inputs/Radio/index.js +2 -2
- package/inputs/Switch/index.js +2 -2
- package/inputs/TextArea/index.js +11 -11
- package/inputs/TextInput/index.js +3 -3
- package/inputs/index.js +28 -28
- package/layout/InputGroup/index.js +2 -2
- package/layout/SectionSeparator/index.js +2 -2
- package/layout/index.js +3 -3
- package/package.json +2 -1
- package/{react-select-creatable.esm-2f23d6c6.js → react-select-creatable.esm-9745dc34.js} +1502 -1281
- package/{shift-away-subtle-0bed9a3c.js → shift-away-subtle-631cd794.js} +1 -1
- package/ssr/index.js +1 -3
- package/widgets/AssetGallery/index.js +34 -32
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
- package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
- package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +6 -6
- package/widgets/ContextMenu/index.js +2 -2
- package/widgets/Instructions/index.js +16 -17
- package/widgets/index.js +37 -35
- package/AssetPreviewTopBar-912c3469.js +0 -99
- package/edit-note-c47d292e.js +0 -41
- package/warning-circle-24522402.js +0 -41
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-cd01e6c2.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
|
-
var close = require('./close-
|
|
7
|
+
var close = require('./close-1751121a.js');
|
|
8
8
|
var Select = require('react-select');
|
|
9
|
-
var reactSelectCreatable_esm = require('./react-select-creatable.esm-
|
|
9
|
+
var reactSelectCreatable_esm = require('./react-select-creatable.esm-9745dc34.js');
|
|
10
10
|
var reactSelectAsyncPaginate = require('react-select-async-paginate');
|
|
11
11
|
|
|
12
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -21,26 +21,26 @@ var showMoreHeight = 114;
|
|
|
21
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) {
|
|
22
22
|
return props.theme.primaryFontFamily;
|
|
23
23
|
});
|
|
24
|
-
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) {
|
|
25
25
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
|
|
26
26
|
});
|
|
27
|
-
var MultiSelect$1 = styled__default[
|
|
28
|
-
var CreatableMultiSelect = styled__default[
|
|
29
|
-
var AsyncCreatableMultiSelect = styled__default[
|
|
30
|
-
var AsyncMultiSelect = styled__default[
|
|
31
|
-
var MultiSelectWrapper = styled__default[
|
|
32
|
-
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) {
|
|
33
33
|
return !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer';
|
|
34
34
|
});
|
|
35
|
-
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) {
|
|
36
36
|
return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
|
|
37
37
|
}, function (props) {
|
|
38
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) {
|
|
39
39
|
return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
|
|
40
40
|
});
|
|
41
41
|
});
|
|
42
|
-
var MultiValueWrapper = styled__default[
|
|
43
|
-
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) {
|
|
44
44
|
return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'));
|
|
45
45
|
}, function (props) {
|
|
46
46
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'));
|
|
@@ -49,8 +49,8 @@ var MultiValue = styled__default['default'](Select.components.MultiValue).attrs(
|
|
|
49
49
|
}, function (props) {
|
|
50
50
|
return props.theme.getColor('red-500');
|
|
51
51
|
});
|
|
52
|
-
var MultiValueRemove = styled__default[
|
|
53
|
-
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) {
|
|
54
54
|
return props.$focused ? '14px' : '12px';
|
|
55
55
|
}, function (props) {
|
|
56
56
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
@@ -61,7 +61,7 @@ var Input = styled__default['default'](Select.components.Input).attrs(defaultThe
|
|
|
61
61
|
return props.edittext;
|
|
62
62
|
});
|
|
63
63
|
});
|
|
64
|
-
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) {
|
|
65
65
|
return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'));
|
|
66
66
|
}, function (props) {
|
|
67
67
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
@@ -73,124 +73,112 @@ var sharedOptionStyle = styled.css(_templateObject17 || (_templateObject17 = def
|
|
|
73
73
|
}, function (props) {
|
|
74
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')));
|
|
75
75
|
});
|
|
76
|
-
var Option = styled__default[
|
|
77
|
-
var SelectedOption$1 = styled__default[
|
|
78
|
-
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) {
|
|
79
79
|
return props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
80
80
|
});
|
|
81
|
-
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) {
|
|
82
82
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'));
|
|
83
83
|
});
|
|
84
|
-
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) {
|
|
85
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');
|
|
86
86
|
});
|
|
87
|
-
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) {
|
|
88
88
|
return props.theme.themeProp('background-color', '#121212', '#fefefe');
|
|
89
89
|
});
|
|
90
|
-
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) {
|
|
91
91
|
return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
|
|
92
92
|
});
|
|
93
93
|
|
|
94
|
-
var
|
|
94
|
+
var _excluded = ["label", "selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "hidden", "disabled", "error", "warning"];
|
|
95
|
+
var MultiSelect = React__default["default"].forwardRef(function MultiSelect(_ref, forwardedRef) {
|
|
95
96
|
var label = _ref.label,
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
97
|
+
selectedOptions = _ref.selectedOptions,
|
|
98
|
+
availableOptions = _ref.availableOptions,
|
|
99
|
+
loadOptions = _ref.loadOptions,
|
|
100
|
+
loadingMessageFunc = _ref.loadingMessageFunc,
|
|
101
|
+
onUpdateCallback = _ref.onUpdateCallback,
|
|
102
|
+
editText = _ref.editText,
|
|
103
|
+
createNewOptionMessageFunc = _ref.createNewOptionMessageFunc,
|
|
104
|
+
noOptionsMessageFunc = _ref.noOptionsMessageFunc,
|
|
105
|
+
onMultiValueClick = _ref.onMultiValueClick,
|
|
106
|
+
showMore = _ref.showMore,
|
|
107
|
+
showMoreText = _ref.showMoreText,
|
|
108
|
+
displayTotalOnShowMore = _ref.displayTotalOnShowMore,
|
|
109
|
+
creatable = _ref.creatable,
|
|
110
|
+
readOnly = _ref.readOnly,
|
|
111
|
+
hidden = _ref.hidden,
|
|
112
|
+
disabled = _ref.disabled,
|
|
113
|
+
error = _ref.error,
|
|
114
|
+
warning = _ref.warning,
|
|
115
|
+
props = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
116
116
|
var _useState = React.useState(nanoid.nanoid()),
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
117
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
118
|
+
uniqueId = _useState2[0];
|
|
120
119
|
var _useState3 = React.useState(selectedOptions),
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
120
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
121
|
+
selected = _useState4[0],
|
|
122
|
+
setSelected = _useState4[1];
|
|
125
123
|
var _useState5 = React.useState(false),
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
124
|
+
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
125
|
+
focused = _useState6[0],
|
|
126
|
+
setFocused = _useState6[1];
|
|
130
127
|
var _useState7 = React.useState(error || warning ? false : showMore),
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
128
|
+
_useState8 = defaultTheme._slicedToArray(_useState7, 2),
|
|
129
|
+
displayShowMore = _useState8[0],
|
|
130
|
+
setDisplayShowMore = _useState8[1];
|
|
135
131
|
var _useState9 = React.useState(0),
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
132
|
+
_useState10 = defaultTheme._slicedToArray(_useState9, 2),
|
|
133
|
+
cacheUnique = _useState10[0],
|
|
134
|
+
setCacheUnique = _useState10[1];
|
|
140
135
|
React.useEffect(function () {
|
|
141
136
|
setSelected(selectedOptions);
|
|
142
137
|
}, [selectedOptions]);
|
|
143
|
-
|
|
144
138
|
var handleShowMoreClick = function handleShowMoreClick() {
|
|
145
139
|
setDisplayShowMore(false);
|
|
146
140
|
};
|
|
147
|
-
|
|
148
141
|
var Control$1 = React.useMemo(function () {
|
|
149
142
|
var ControlWrapper = function ControlWrapper(innerProps) {
|
|
150
|
-
return React__default[
|
|
143
|
+
return React__default["default"].createElement(Control, defaultTheme._extends({
|
|
151
144
|
className: "multi-select-control",
|
|
152
145
|
readOnly: readOnly
|
|
153
146
|
}, innerProps));
|
|
154
147
|
};
|
|
155
|
-
|
|
156
148
|
ControlWrapper.displayName = 'ControlWrapper';
|
|
157
149
|
return ControlWrapper;
|
|
158
150
|
}, []);
|
|
159
151
|
var ValueContainer$1 = React.useMemo(function () {
|
|
160
152
|
var ValueContainerWrapper = function ValueContainerWrapper(innerProps) {
|
|
161
|
-
return React__default[
|
|
153
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, label && React__default["default"].createElement(Label, {
|
|
162
154
|
htmlFor: uniqueId
|
|
163
|
-
}, label), React__default[
|
|
155
|
+
}, label), React__default["default"].createElement(ValueContainer, defaultTheme._extends({
|
|
164
156
|
showMore: displayShowMore,
|
|
165
157
|
error: error,
|
|
166
158
|
warning: warning,
|
|
167
159
|
className: "multi-select-values-container"
|
|
168
160
|
}, innerProps)));
|
|
169
161
|
};
|
|
170
|
-
|
|
171
162
|
ValueContainerWrapper.displayName = 'ValueContainerWrapper';
|
|
172
163
|
return ValueContainerWrapper;
|
|
173
164
|
}, [displayShowMore, error, warning]);
|
|
174
|
-
|
|
175
165
|
var MultiValue$1 = function MultiValue$1(innerProps) {
|
|
176
|
-
return React__default[
|
|
166
|
+
return React__default["default"].createElement(MultiValueWrapper, {
|
|
177
167
|
className: "multi-value-wrapper",
|
|
178
168
|
onMouseDown: function onMouseDown(e) {
|
|
179
169
|
e.stopPropagation();
|
|
180
|
-
|
|
181
170
|
if (onMultiValueClick && innerProps.data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
|
|
182
171
|
onMultiValueClick(innerProps.data);
|
|
183
172
|
}
|
|
184
173
|
}
|
|
185
|
-
}, React__default[
|
|
174
|
+
}, React__default["default"].createElement(MultiValue, defaultTheme._extends({
|
|
186
175
|
className: "multi-value",
|
|
187
176
|
readOnly: readOnly
|
|
188
177
|
}, innerProps)));
|
|
189
178
|
};
|
|
190
|
-
|
|
191
179
|
var Input$1 = React.useMemo(function () {
|
|
192
180
|
var InputWrapper = function InputWrapper(innerProps) {
|
|
193
|
-
return React__default[
|
|
181
|
+
return React__default["default"].createElement(Input, defaultTheme._extends({
|
|
194
182
|
className: "multi-select-input",
|
|
195
183
|
$focused: focused,
|
|
196
184
|
edittext: editText
|
|
@@ -198,7 +186,6 @@ var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref
|
|
|
198
186
|
isDisabled: readOnly || disabled
|
|
199
187
|
}));
|
|
200
188
|
};
|
|
201
|
-
|
|
202
189
|
InputWrapper.displayName = 'InputWrapper';
|
|
203
190
|
return InputWrapper;
|
|
204
191
|
}, [focused]);
|
|
@@ -250,66 +237,53 @@ var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref
|
|
|
250
237
|
if (onUpdateCallback) {
|
|
251
238
|
onUpdateCallback(actionMeta.action, actionMeta.option);
|
|
252
239
|
}
|
|
253
|
-
|
|
254
240
|
if (loadOptions) {
|
|
255
241
|
setCacheUnique(cacheUnique + 1);
|
|
256
242
|
}
|
|
257
|
-
|
|
258
243
|
setSelected(selectedOptions);
|
|
259
244
|
break;
|
|
260
|
-
|
|
261
245
|
case 'select-option':
|
|
262
246
|
if (onUpdateCallback) {
|
|
263
247
|
onUpdateCallback(actionMeta.action, actionMeta.option);
|
|
264
248
|
}
|
|
265
|
-
|
|
266
249
|
setSelected(selectedOptions);
|
|
267
250
|
break;
|
|
268
|
-
|
|
269
251
|
case 'remove-value':
|
|
270
252
|
if (onUpdateCallback) {
|
|
271
253
|
onUpdateCallback(actionMeta.action, actionMeta.removedValue);
|
|
272
254
|
}
|
|
273
|
-
|
|
274
255
|
setSelected(selectedOptions);
|
|
275
256
|
break;
|
|
276
|
-
|
|
277
257
|
case 'pop-value':
|
|
278
258
|
if (onUpdateCallback) {
|
|
279
259
|
onUpdateCallback(actionMeta.action, actionMeta.removedValue);
|
|
280
260
|
}
|
|
281
|
-
|
|
282
261
|
setSelected(selectedOptions);
|
|
283
262
|
break;
|
|
284
|
-
|
|
285
263
|
case 'deselect-option':
|
|
286
264
|
if (onUpdateCallback) {
|
|
287
265
|
onUpdateCallback(actionMeta.action, actionMeta.option);
|
|
288
266
|
}
|
|
289
|
-
|
|
290
267
|
setSelected(selectedOptions);
|
|
291
268
|
break;
|
|
292
|
-
|
|
293
269
|
case 'clear':
|
|
294
270
|
break;
|
|
295
|
-
|
|
296
271
|
default:
|
|
297
272
|
if (onUpdateCallback) {
|
|
298
273
|
onUpdateCallback(actionMeta.action, actionMeta.option);
|
|
299
274
|
}
|
|
300
|
-
|
|
301
275
|
setSelected(selectedOptions);
|
|
302
276
|
break;
|
|
303
277
|
}
|
|
304
278
|
}
|
|
305
279
|
};
|
|
306
280
|
if (hidden) return null;
|
|
307
|
-
return React__default[
|
|
281
|
+
return React__default["default"].createElement(MultiSelectWrapper, {
|
|
308
282
|
error: error,
|
|
309
283
|
warning: warning
|
|
310
|
-
}, loadOptions ? creatable ? React__default[
|
|
284
|
+
}, 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, {
|
|
311
285
|
onClick: handleShowMoreClick
|
|
312
|
-
}, React__default[
|
|
286
|
+
}, 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, {
|
|
313
287
|
error: error,
|
|
314
288
|
warning: warning
|
|
315
289
|
}, error ? error : warning));
|
|
@@ -353,25 +327,21 @@ MultiSelect.defaultProps = {
|
|
|
353
327
|
showMoreText: 'Show more',
|
|
354
328
|
hidden: false
|
|
355
329
|
};
|
|
356
|
-
|
|
357
330
|
var _MultiValueRemove = function _MultiValueRemove(innerProps) {
|
|
358
|
-
return React__default[
|
|
331
|
+
return React__default["default"].createElement(MultiValueRemove, innerProps, React__default["default"].createElement(close.SvgClose, {
|
|
359
332
|
className: "multi-value-remove-icon"
|
|
360
333
|
}));
|
|
361
334
|
};
|
|
362
|
-
|
|
363
335
|
var Menu = function Menu(innerProps) {
|
|
364
|
-
return React__default[
|
|
336
|
+
return React__default["default"].createElement(DropdownMenu, innerProps);
|
|
365
337
|
};
|
|
366
|
-
|
|
367
338
|
var _Option = function _Option(innerProps) {
|
|
368
|
-
return React__default[
|
|
339
|
+
return React__default["default"].createElement(Option, defaultTheme._extends({
|
|
369
340
|
className: "multi-select-dropdown-item"
|
|
370
341
|
}, innerProps));
|
|
371
342
|
};
|
|
372
|
-
|
|
373
343
|
var SelectedOption = function SelectedOption(innerProps) {
|
|
374
|
-
return React__default[
|
|
344
|
+
return React__default["default"].createElement(SelectedOption$1, innerProps, innerProps.label, React__default["default"].createElement(DropdownOptionDeleteIcon, null));
|
|
375
345
|
};
|
|
376
346
|
|
|
377
347
|
exports.MultiSelect = MultiSelect;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-cd01e6c2.js');
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
7
|
var polished = require('polished');
|
|
8
8
|
var TippyTooltip = require('@tippyjs/react');
|
|
9
|
-
require('./shift-away-subtle-
|
|
9
|
+
require('./shift-away-subtle-631cd794.js');
|
|
10
10
|
var maxSize = require('popper-max-size-modifier');
|
|
11
11
|
|
|
12
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -17,7 +17,7 @@ var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
|
|
|
17
17
|
var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
|
|
18
18
|
|
|
19
19
|
var _templateObject, _templateObject2, _templateObject3;
|
|
20
|
-
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) {
|
|
21
21
|
return props.theme.primaryFontFamily;
|
|
22
22
|
}, function (props) {
|
|
23
23
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
|
|
@@ -45,28 +45,27 @@ var Popover$1 = styled__default['default'](TippyTooltip__default['default']).att
|
|
|
45
45
|
return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
|
|
46
46
|
});
|
|
47
47
|
|
|
48
|
-
var
|
|
48
|
+
var _excluded = ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children", "modifiers"];
|
|
49
|
+
var Popover = React__default["default"].forwardRef(function Popover(_ref, ref) {
|
|
49
50
|
var content = _ref.content,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
51
|
+
interactive = _ref.interactive,
|
|
52
|
+
placement = _ref.placement,
|
|
53
|
+
duration = _ref.duration,
|
|
54
|
+
trigger = _ref.trigger,
|
|
55
|
+
offset = _ref.offset,
|
|
56
|
+
arrow = _ref.arrow,
|
|
57
|
+
visible = _ref.visible,
|
|
58
|
+
contextMenu = _ref.contextMenu,
|
|
59
|
+
contextMenuSublevel = _ref.contextMenuSublevel,
|
|
60
|
+
children = _ref.children,
|
|
61
|
+
modifiers = _ref.modifiers,
|
|
62
|
+
props = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
63
63
|
var errorOffset = React.useMemo(function () {
|
|
64
64
|
return arrow ? 15 : 0;
|
|
65
65
|
}, [arrow]);
|
|
66
66
|
var isControlled = React.useMemo(function () {
|
|
67
67
|
return lodash.isBoolean(visible);
|
|
68
68
|
}, [visible]);
|
|
69
|
-
|
|
70
69
|
var handleContextMenuItemClick = function handleContextMenuItemClick() {
|
|
71
70
|
document.querySelectorAll('.context-menu-item:not(.opens-sublevel)').forEach(function (item) {
|
|
72
71
|
return item.addEventListener('click', function () {
|
|
@@ -78,8 +77,7 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
|
|
|
78
77
|
});
|
|
79
78
|
});
|
|
80
79
|
};
|
|
81
|
-
|
|
82
|
-
return React__default['default'].createElement("div", null, React__default['default'].createElement(Popover$1, defaultTheme._extends({
|
|
80
|
+
return React__default["default"].createElement("div", null, React__default["default"].createElement(Popover$1, defaultTheme._extends({
|
|
83
81
|
ref: ref,
|
|
84
82
|
content: content,
|
|
85
83
|
interactive: interactive,
|
|
@@ -91,7 +89,7 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
|
|
|
91
89
|
arrow: contextMenu ? false : arrow,
|
|
92
90
|
visible: visible,
|
|
93
91
|
popperOptions: {
|
|
94
|
-
modifiers: [defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, maxSize__default[
|
|
92
|
+
modifiers: [defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, maxSize__default["default"]), {}, {
|
|
95
93
|
options: {
|
|
96
94
|
boundary: 'viewport',
|
|
97
95
|
rootBoundary: 'viewport',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-cd01e6c2.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var polished = require('polished');
|
|
@@ -13,10 +13,10 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
13
|
|
|
14
14
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
15
15
|
var radioSize = '18px';
|
|
16
|
-
var RadioLabel = styled__default[
|
|
16
|
+
var RadioLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n padding-left: ", ";\n font-weight: 400;\n font-size: 0.875rem;\n\n ", ";\n"])), polished.math("".concat(radioSize, " + 10px")), function (props) {
|
|
17
17
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
18
18
|
});
|
|
19
|
-
var Radio$1 = styled__default[
|
|
19
|
+
var Radio$1 = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n cursor: pointer;\n line-height: ", ";\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ", ";\n width: ", ";\n height: ", ";\n top: 0;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n transform: scale(0);\n transition: all 200ms;\n }\n\n &:has(input:checked) {\n ::before {\n border-color: ", ";\n }\n\n ::after {\n background: ", ";\n transform: scale(1);\n }\n\n ", " {\n opacity: 1;\n }\n }\n & {\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n }\n\n ", "\n\n ", "\n"])), radioSize, function (props) {
|
|
20
20
|
return props.theme.getColor('gray-300');
|
|
21
21
|
}, radioSize, radioSize, function (props) {
|
|
22
22
|
return props.theme.getColor('emerald-500');
|
|
@@ -28,31 +28,30 @@ var Radio$1 = styled__default['default'].label.attrs(defaultTheme.applyDefaultTh
|
|
|
28
28
|
return props.disabled && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n user-select: text;\n "])));
|
|
29
29
|
});
|
|
30
30
|
|
|
31
|
-
var
|
|
31
|
+
var _excluded = ["name", "value", "checked", "defaultChecked", "disabled", "readOnly", "label", "className", "style", "onChange", "onBlur"];
|
|
32
|
+
var Radio = React__default["default"].forwardRef(function Radio(_ref, forwardedRef) {
|
|
32
33
|
var name = _ref.name,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
34
|
+
value = _ref.value,
|
|
35
|
+
checked = _ref.checked,
|
|
36
|
+
defaultChecked = _ref.defaultChecked,
|
|
37
|
+
disabled = _ref.disabled,
|
|
38
|
+
readOnly = _ref.readOnly,
|
|
39
|
+
label = _ref.label,
|
|
40
|
+
className = _ref.className,
|
|
41
|
+
style = _ref.style,
|
|
42
|
+
onChange = _ref.onChange,
|
|
43
|
+
onBlur = _ref.onBlur,
|
|
44
|
+
rest = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
45
45
|
var _useState = React.useState(nanoid.nanoid()),
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return React__default['default'].createElement(Radio$1, {
|
|
46
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
47
|
+
uniqueId = _useState2[0];
|
|
48
|
+
return React__default["default"].createElement(Radio$1, {
|
|
50
49
|
htmlFor: uniqueId,
|
|
51
50
|
disabled: disabled,
|
|
52
51
|
readOnly: readOnly,
|
|
53
52
|
className: className,
|
|
54
53
|
style: style
|
|
55
|
-
}, React__default[
|
|
54
|
+
}, React__default["default"].createElement("input", defaultTheme._extends({
|
|
56
55
|
ref: forwardedRef,
|
|
57
56
|
type: "radio",
|
|
58
57
|
name: name,
|
|
@@ -64,7 +63,7 @@ var Radio = React__default['default'].forwardRef(function Radio(_ref, forwardedR
|
|
|
64
63
|
id: uniqueId,
|
|
65
64
|
onChange: onChange,
|
|
66
65
|
onBlur: onBlur
|
|
67
|
-
}, rest)), React__default[
|
|
66
|
+
}, rest)), React__default["default"].createElement(RadioLabel, null, label));
|
|
68
67
|
});
|
|
69
68
|
Radio.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
70
69
|
label: defaultTheme.PropTypes.any,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-cd01e6c2.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
6
|
|
|
@@ -10,7 +10,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
12
|
var _templateObject;
|
|
13
|
-
var SectionSeparator$1 = styled__default[
|
|
13
|
+
var SectionSeparator$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n\n ", "\n"])), function (props) {
|
|
14
14
|
return props.vertical ? '100%' : '1px';
|
|
15
15
|
}, function (props) {
|
|
16
16
|
return props.vertical ? '1px' : '100%';
|
|
@@ -18,11 +18,11 @@ var SectionSeparator$1 = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
18
18
|
return props.theme.themeProp('background-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));
|
|
19
19
|
});
|
|
20
20
|
|
|
21
|
-
var
|
|
21
|
+
var _excluded = ["vertical"];
|
|
22
|
+
var SectionSeparator = React__default["default"].forwardRef(function SectionSeparator(_ref, forwardedRef) {
|
|
22
23
|
var vertical = _ref.vertical,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
return React__default['default'].createElement(SectionSeparator$1, defaultTheme._extends({
|
|
24
|
+
props = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
25
|
+
return React__default["default"].createElement(SectionSeparator$1, defaultTheme._extends({
|
|
26
26
|
vertical: vertical,
|
|
27
27
|
ref: forwardedRef
|
|
28
28
|
}, props));
|