@ntbjs/react-components 1.1.0-beta.62 → 1.1.0-beta.64
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/{AssetGallery-05297c7a.js → AssetGallery-6f0e7304.js} +9 -23
- package/{Button-dd271c4b.js → Button-f893df21.js} +1 -1
- package/{CompactAutocompleteSelect-91f96ef4.js → CompactAutocompleteSelect-b366ba70.js} +67 -29
- package/{CompactStarRating-9c4c4f2c.js → CompactStarRating-17c8ca3d.js} +42 -13
- package/{CompactTextInput-e9c99aa3.js → CompactTextInput-7263652c.js} +55 -18
- package/{Instructions-791f977a.js → Instructions-87271194.js} +14 -9
- package/{Popover-11df9750.js → Popover-cf1e9677.js} +6 -6
- package/{TextArea-6dad1bbe.js → TextArea-708b59a9.js} +127 -31
- package/check-circle-filled-1640873e.js +42 -0
- package/data/Popover/index.js +1 -1
- package/data/index.js +1 -1
- package/inputs/Button/index.js +2 -2
- package/inputs/CompactAutocompleteSelect/index.js +2 -1
- package/inputs/CompactStarRating/index.js +2 -1
- package/inputs/CompactTextInput/index.js +3 -2
- package/inputs/TextArea/index.js +2 -1
- package/inputs/index.js +7 -6
- package/package.json +1 -1
- package/widgets/AssetGallery/index.js +8 -7
- package/widgets/Instructions/index.js +4 -3
- package/widgets/index.js +9 -8
|
@@ -7,23 +7,24 @@ var TextInput = require('./TextInput-a1083be3.js');
|
|
|
7
7
|
var ResizeObserver = require('resize-observer-polyfill');
|
|
8
8
|
var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
|
|
9
9
|
var ActionButton = require('./ActionButton-c3f5ed94.js');
|
|
10
|
-
require('./Button-
|
|
10
|
+
require('./Button-f893df21.js');
|
|
11
11
|
require('./Checkbox-012bbd3f.js');
|
|
12
|
-
require('./CompactAutocompleteSelect-
|
|
13
|
-
require('./CompactStarRating-
|
|
14
|
-
require('./CompactTextInput-
|
|
12
|
+
require('./CompactAutocompleteSelect-b366ba70.js');
|
|
13
|
+
require('./CompactStarRating-17c8ca3d.js');
|
|
14
|
+
require('./CompactTextInput-7263652c.js');
|
|
15
15
|
require('./MultiSelect-5b008b32.js');
|
|
16
16
|
require('./Radio-0594409d.js');
|
|
17
|
-
require('./TextArea-
|
|
17
|
+
require('./TextArea-708b59a9.js');
|
|
18
18
|
require('./Switch-cd165c8c.js');
|
|
19
19
|
require('./Alert-3e4f8be1.js');
|
|
20
20
|
require('./Badge-9bcebe96.js');
|
|
21
|
-
require('./Popover-
|
|
21
|
+
require('./Popover-cf1e9677.js');
|
|
22
22
|
require('./Tab-bd0f3345.js');
|
|
23
23
|
require('./Tabs-cfc35dc0.js');
|
|
24
24
|
var Tooltip = require('./Tooltip-f4f9ab8f.js');
|
|
25
25
|
var styled = require('styled-components');
|
|
26
26
|
var polished = require('polished');
|
|
27
|
+
var checkCircleFilled = require('./check-circle-filled-1640873e.js');
|
|
27
28
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
28
29
|
|
|
29
30
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -155,21 +156,6 @@ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme
|
|
|
155
156
|
var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
|
|
156
157
|
var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
|
|
157
158
|
|
|
158
|
-
function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
|
|
159
|
-
|
|
160
|
-
var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
161
|
-
fill: "currentColor",
|
|
162
|
-
d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
|
|
163
|
-
fillOpacity: 0.9
|
|
164
|
-
});
|
|
165
|
-
|
|
166
|
-
function SvgCheckCircleFilled(props) {
|
|
167
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
168
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
169
|
-
viewBox: "0 0 24 24"
|
|
170
|
-
}, props), _ref$5);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
159
|
function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
|
|
174
160
|
|
|
175
161
|
var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -499,7 +485,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
499
485
|
assetTitle: asset.title
|
|
500
486
|
}, asset.note.icon ? asset.note.icon : React__default['default'].createElement(warningCircle.SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
|
|
501
487
|
selected: selected
|
|
502
|
-
}, React__default['default'].createElement(SvgCheckCircleFilled, {
|
|
488
|
+
}, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, {
|
|
503
489
|
onClick: onSelectClick
|
|
504
490
|
})), React__default['default'].createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
|
|
505
491
|
return React__default['default'].createElement(Tooltip.Tooltip, {
|
|
@@ -814,7 +800,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
814
800
|
as: SvgFile
|
|
815
801
|
})), React__default['default'].createElement(InfoDescription, null, asset.description)), React__default['default'].createElement(Bottom, null, selectable && React__default['default'].createElement(BottomSelectButton, {
|
|
816
802
|
selected: selected
|
|
817
|
-
}, React__default['default'].createElement(SvgCheckCircleFilled, {
|
|
803
|
+
}, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, {
|
|
818
804
|
onClick: onSelectClick
|
|
819
805
|
})), React__default['default'].createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
|
|
820
806
|
return React__default['default'].createElement(Tooltip.Tooltip, {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var defaultTheme = require('./defaultTheme-50f2b88f.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
|
-
var Popover = require('./Popover-
|
|
6
|
+
var Popover = require('./Popover-cf1e9677.js');
|
|
7
7
|
var ContextMenu = require('./ContextMenu-d088833b.js');
|
|
8
8
|
var expandMore = require('./expand-more-94585605.js');
|
|
9
9
|
|
|
@@ -10,6 +10,7 @@ var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js
|
|
|
10
10
|
var reactSelectAsyncPaginate = require('react-select-async-paginate');
|
|
11
11
|
var close = require('./close-ebf2f3cf.js');
|
|
12
12
|
var expandMore = require('./expand-more-94585605.js');
|
|
13
|
+
var checkCircleFilled = require('./check-circle-filled-1640873e.js');
|
|
13
14
|
|
|
14
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
16
|
|
|
@@ -17,28 +18,55 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
17
18
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
18
19
|
var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
|
|
19
20
|
|
|
20
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
|
|
21
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
|
|
22
|
+
var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
|
|
23
|
+
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
24
|
+
}, function (props) {
|
|
25
|
+
return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
|
|
26
|
+
});
|
|
27
|
+
var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
|
|
28
|
+
return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
|
|
29
|
+
}, function (props) {
|
|
30
|
+
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
31
|
+
});
|
|
32
|
+
var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
33
|
+
var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
21
34
|
var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
|
|
22
|
-
var sharedStyle = styled.css(
|
|
35
|
+
var sharedStyle = styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 0.875rem;\n line-height: 1rem;\n width: 100%;\n display: block;\n box-shadow: 'none';\n flex-basis: ", ";\n"])), function (props) {
|
|
23
36
|
return props.theme.primaryFontFamily;
|
|
24
37
|
}, function (props) {
|
|
25
38
|
return props.$hasLabel ? '66.66%' : '100%';
|
|
26
39
|
});
|
|
27
|
-
var CompactAutocompleteSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
40
|
+
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"])), function (props) {
|
|
28
41
|
return props.theme.primaryFontFamily;
|
|
29
42
|
});
|
|
30
|
-
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
43
|
+
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = 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 padding-top: 2px;\n"])), function (props) {
|
|
31
44
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
32
45
|
});
|
|
33
|
-
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
46
|
+
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n height: 19px;\n"])));
|
|
47
|
+
var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n margin-top: 0;\n pointer-events: none;\n padding-right: 60px;\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 2px;\n bottom: 0;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
48
|
+
return props.fadeIn ? 0 : 1;
|
|
49
|
+
}, function (props) {
|
|
50
|
+
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
51
|
+
}, function (props) {
|
|
52
|
+
return props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'));
|
|
53
|
+
});
|
|
54
|
+
var AsyncCreatableAutocompleteSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
|
|
55
|
+
var AsyncAutocompleteSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
|
|
56
|
+
var AutocompletSelect = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
|
|
57
|
+
var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
|
|
58
|
+
var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n && {\n height: 22px;\n min-height: 22px;\n background: ", ";\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 10px;\n cursor: text;\n border: 1px solid transparent;\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 &&:not(:hover):not(:focus) {\n ", ";\n }\n\n &&:focus {\n ", ";\n }\n"])), function (props) {
|
|
59
|
+
return props.success ? props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200')) : 'transparent';
|
|
60
|
+
}, function (props) {
|
|
61
|
+
return props.success && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
|
|
62
|
+
return props.success ? fadeIn : fadeOut;
|
|
63
|
+
});
|
|
64
|
+
}, function (props) {
|
|
39
65
|
return props.warning && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#fffde8');
|
|
40
66
|
}, function (props) {
|
|
41
67
|
return props.error && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#fbeae6');
|
|
68
|
+
}, function (props) {
|
|
69
|
+
return props.success && !props.isFocused && props.theme.themeProp('background-color', '#64b49d', '#f3f9f7');
|
|
42
70
|
}, function (props) {
|
|
43
71
|
return props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'));
|
|
44
72
|
}, function (props) {
|
|
@@ -47,52 +75,56 @@ var Control = styled__default['default'](Select.components.Control).attrs(defaul
|
|
|
47
75
|
return props.error && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500'));
|
|
48
76
|
}, function (props) {
|
|
49
77
|
return !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
78
|
+
}, function (props) {
|
|
79
|
+
return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-200'));
|
|
50
80
|
}, function (props) {
|
|
51
81
|
return props.warning && !props.isFocused && props.theme.themeProp('background', '#816600', '#fffebf');
|
|
52
82
|
}, function (props) {
|
|
53
83
|
return props.error && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
|
|
54
84
|
}, function (props) {
|
|
55
85
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
86
|
+
}, function (props) {
|
|
87
|
+
return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-200'));
|
|
56
88
|
});
|
|
57
|
-
var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(
|
|
89
|
+
var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = 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) {
|
|
58
90
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
59
91
|
}, function (props) {
|
|
60
|
-
return props.isFocused && styled.css(
|
|
92
|
+
return props.isFocused && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
|
|
61
93
|
}, function (props) {
|
|
62
|
-
return props.isSelected && styled.css(
|
|
94
|
+
return props.isSelected && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
|
|
63
95
|
}, function (props) {
|
|
64
|
-
return props.isFocused && props.isSelected && styled.css(
|
|
96
|
+
return props.isFocused && props.isSelected && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
|
|
65
97
|
});
|
|
66
|
-
var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(
|
|
67
|
-
return (props.error || props.warning) && styled.css(
|
|
98
|
+
var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", "\n ", ";\n }\n"])), function (props) {
|
|
99
|
+
return (props.error || props.warning) && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
|
|
68
100
|
}, function (props) {
|
|
69
101
|
return (props.error || props.warning) && props.theme.themeProp('opacity', '0.6', '0.6');
|
|
70
102
|
});
|
|
71
|
-
var SingleValue$1 = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(
|
|
103
|
+
var SingleValue$1 = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
|
|
72
104
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
73
105
|
});
|
|
74
|
-
var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(
|
|
106
|
+
var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n && {\n margin: 0;\n padding: 0;\n padding-left: 2px;\n ", "\n }\n"])), function (props) {
|
|
75
107
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
76
108
|
});
|
|
77
|
-
var Menu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(
|
|
109
|
+
var Menu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
|
|
78
110
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
|
|
79
111
|
});
|
|
80
|
-
var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(
|
|
81
|
-
var ClearIndicator$1 = styled__default['default'](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(
|
|
112
|
+
var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n && {\n padding: 0;\n }\n"])));
|
|
113
|
+
var ClearIndicator$1 = styled__default['default'](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n cursor: pointer;\n ", ";\n }\n"])), function (props) {
|
|
82
114
|
return props.isFocused ? 'flex' : 'none';
|
|
83
115
|
}, function (props) {
|
|
84
116
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
85
117
|
});
|
|
86
|
-
var DropdownIndicator$1 = styled__default['default'](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(
|
|
118
|
+
var DropdownIndicator$1 = styled__default['default'](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = 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) {
|
|
87
119
|
return props.isFocused ? 'flex' : 'none';
|
|
88
120
|
}, function (props) {
|
|
89
121
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
90
122
|
});
|
|
91
|
-
var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(
|
|
92
|
-
var ClearIndicatorIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(
|
|
123
|
+
var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n width: 12px;\n"])));
|
|
124
|
+
var ClearIndicatorIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n width: 8px;\n margin-right: 4px;\n ", ";\n stroke-width: 2px;\n"])), function (props) {
|
|
93
125
|
return props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
94
126
|
});
|
|
95
|
-
var IndicatorSeparator$1 = styled__default['default'](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(
|
|
127
|
+
var IndicatorSeparator$1 = styled__default['default'](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n margin: 4px;\n ", ";\n }\n"])), function (props) {
|
|
96
128
|
return props.isFocused ? 'flex' : 'none';
|
|
97
129
|
}, function (props) {
|
|
98
130
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
@@ -110,12 +142,13 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
|
|
|
110
142
|
loadingMessageFunc = _ref.loadingMessageFunc,
|
|
111
143
|
creatable = _ref.creatable,
|
|
112
144
|
readOnly = _ref.readOnly,
|
|
145
|
+
success = _ref.success,
|
|
113
146
|
edit = _ref.edit,
|
|
114
147
|
disabled = _ref.disabled,
|
|
115
148
|
error = _ref.error,
|
|
116
149
|
hidden = _ref.hidden,
|
|
117
150
|
warning = _ref.warning,
|
|
118
|
-
props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "edit", "disabled", "error", "hidden", "warning"]);
|
|
151
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "success", "edit", "disabled", "error", "hidden", "warning"]);
|
|
119
152
|
|
|
120
153
|
var _useState = React.useState(nanoid.nanoid()),
|
|
121
154
|
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
@@ -142,6 +175,7 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
|
|
|
142
175
|
className: "select-control",
|
|
143
176
|
edit: edit,
|
|
144
177
|
error: error,
|
|
178
|
+
success: success,
|
|
145
179
|
warning: warning
|
|
146
180
|
}, props));
|
|
147
181
|
};
|
|
@@ -151,11 +185,12 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
|
|
|
151
185
|
}, [error, warning]);
|
|
152
186
|
var ValueContainer$1 = React.useMemo(function () {
|
|
153
187
|
var valueContainer = function valueContainer(props) {
|
|
154
|
-
return React__default['default'].createElement(ValueContainer, defaultTheme._extends({
|
|
188
|
+
return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(ValueContainer, defaultTheme._extends({
|
|
155
189
|
className: "value-container",
|
|
156
190
|
error: error,
|
|
191
|
+
success: success,
|
|
157
192
|
warning: warning
|
|
158
|
-
}, props));
|
|
193
|
+
}, props)), ' ', success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null)));
|
|
159
194
|
};
|
|
160
195
|
|
|
161
196
|
valueContainer.displayName = 'ValueContainerWrapper';
|
|
@@ -164,7 +199,8 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
|
|
|
164
199
|
var Input$1 = React.useMemo(function () {
|
|
165
200
|
var selectInput = function selectInput(props) {
|
|
166
201
|
return React__default['default'].createElement(Input, defaultTheme._extends({
|
|
167
|
-
className: "select-input"
|
|
202
|
+
className: "select-input",
|
|
203
|
+
success: success
|
|
168
204
|
}, props));
|
|
169
205
|
};
|
|
170
206
|
|
|
@@ -311,6 +347,7 @@ CompactAutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
311
347
|
noOptionsMessageFunc: defaultTheme.PropTypes.func,
|
|
312
348
|
readOnly: defaultTheme.PropTypes.bool,
|
|
313
349
|
edit: defaultTheme.PropTypes.bool,
|
|
350
|
+
success: defaultTheme.PropTypes.bool,
|
|
314
351
|
hidden: defaultTheme.PropTypes.bool,
|
|
315
352
|
error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
316
353
|
warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
@@ -327,6 +364,7 @@ CompactAutocompleteSelect.defaultProps = {
|
|
|
327
364
|
}
|
|
328
365
|
},
|
|
329
366
|
readOnly: false,
|
|
367
|
+
success: false,
|
|
330
368
|
disabled: false,
|
|
331
369
|
creatable: true,
|
|
332
370
|
edit: false,
|
|
@@ -4,6 +4,7 @@ var defaultTheme = require('./defaultTheme-50f2b88f.js');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
6
|
var lodash = require('lodash');
|
|
7
|
+
var checkCircleFilled = require('./check-circle-filled-1640873e.js');
|
|
7
8
|
|
|
8
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
10
|
|
|
@@ -31,21 +32,39 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
31
32
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
32
33
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
33
34
|
|
|
34
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
35
|
-
var
|
|
35
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
36
|
+
var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
|
|
37
|
+
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
38
|
+
}, function (props) {
|
|
39
|
+
return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
|
|
40
|
+
});
|
|
41
|
+
var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
|
|
42
|
+
return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
|
|
43
|
+
}, function (props) {
|
|
44
|
+
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
45
|
+
});
|
|
46
|
+
var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
47
|
+
var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
48
|
+
var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n height: 24px;\n width: 100%;\n display: flex;\n align-items: center;\n\n input[type='number'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n"])), function (props) {
|
|
36
49
|
return props.theme.primaryFontFamily;
|
|
37
50
|
});
|
|
38
|
-
var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
51
|
+
var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n width: 33.3%;\n display: flex;\n align-items: center;\n text-align: left;\n font: normal normal normal 14px/16px Roboto;\n letter-spacing: 0px;\n padding: 0;\n height: 19px;\n\n ", "\n"])), function (props) {
|
|
39
52
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
40
53
|
});
|
|
41
|
-
var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
42
|
-
return props.
|
|
54
|
+
var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.6%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n padding: 1px 10px;\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n &&:not(:hover):not(:focus) {\n ", ";\n }\n"])), function (props) {
|
|
55
|
+
return props.success && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
|
|
56
|
+
return props.success ? fadeIn : fadeOut;
|
|
57
|
+
});
|
|
58
|
+
}, function (props) {
|
|
59
|
+
return props.error && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
|
|
43
60
|
}, function (props) {
|
|
44
|
-
return props.
|
|
61
|
+
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
|
|
62
|
+
}, function (props) {
|
|
63
|
+
return props.warning && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
|
|
45
64
|
}, function (props) {
|
|
46
65
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
47
66
|
});
|
|
48
|
-
var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(
|
|
67
|
+
var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n height: 12px;\n padding-left: 4px;\n transition: color 250ms;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n"])), function (props) {
|
|
49
68
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
|
|
50
69
|
}, function (props) {
|
|
51
70
|
return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
|
|
@@ -54,9 +73,9 @@ var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultThem
|
|
|
54
73
|
}, function (props) {
|
|
55
74
|
return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
|
|
56
75
|
}, function (props) {
|
|
57
|
-
return props.disabled && styled.css(
|
|
76
|
+
return props.disabled && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
58
77
|
});
|
|
59
|
-
var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(
|
|
78
|
+
var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n height: 12px;\n padding-left: 4px;\n transition: color 250ms;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n"])), function (props) {
|
|
60
79
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
|
|
61
80
|
}, function (props) {
|
|
62
81
|
return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
|
|
@@ -65,7 +84,14 @@ var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefault
|
|
|
65
84
|
}, function (props) {
|
|
66
85
|
return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
|
|
67
86
|
}, function (props) {
|
|
68
|
-
return props.disabled && styled.css(
|
|
87
|
+
return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
88
|
+
});
|
|
89
|
+
var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n padding-right: 25px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: -710px;\n bottom: 0;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
90
|
+
return props.success ? 0 : 1;
|
|
91
|
+
}, function (props) {
|
|
92
|
+
return props.success ? fadeOutCheck : fadeInCheck;
|
|
93
|
+
}, function (props) {
|
|
94
|
+
return props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'));
|
|
69
95
|
});
|
|
70
96
|
|
|
71
97
|
function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
@@ -111,9 +137,10 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
|
|
|
111
137
|
warning = _ref.warning,
|
|
112
138
|
readOnly = _ref.readOnly,
|
|
113
139
|
edit = _ref.edit,
|
|
140
|
+
success = _ref.success,
|
|
114
141
|
hidden = _ref.hidden,
|
|
115
142
|
getRatingProp = _ref.getRating,
|
|
116
|
-
props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "name", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly", "edit", "hidden", "getRating"]);
|
|
143
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "name", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly", "edit", "success", "hidden", "getRating"]);
|
|
117
144
|
|
|
118
145
|
var stars = Array.from(Array(max).keys());
|
|
119
146
|
|
|
@@ -221,7 +248,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
|
|
|
221
248
|
}, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement(starsWidth, {
|
|
222
249
|
edit: edit,
|
|
223
250
|
error: hasError,
|
|
224
|
-
warning: hasWarning
|
|
251
|
+
warning: hasWarning,
|
|
252
|
+
success: success
|
|
225
253
|
}, stars.map(function (key) {
|
|
226
254
|
return React__default['default'].createElement("div", {
|
|
227
255
|
key: key
|
|
@@ -230,7 +258,7 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
|
|
|
230
258
|
name: name,
|
|
231
259
|
ref: inputRef
|
|
232
260
|
}), starIconRender(key));
|
|
233
|
-
})));
|
|
261
|
+
})), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null)));
|
|
234
262
|
});
|
|
235
263
|
CompactStarRating.defaultProps = {
|
|
236
264
|
label: 'Rating',
|
|
@@ -244,6 +272,7 @@ CompactStarRating.defaultProps = {
|
|
|
244
272
|
};
|
|
245
273
|
CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
246
274
|
value: defaultTheme.PropTypes.number,
|
|
275
|
+
success: defaultTheme.PropTypes.bool,
|
|
247
276
|
defaultValue: defaultTheme.PropTypes.number,
|
|
248
277
|
label: defaultTheme.PropTypes.string,
|
|
249
278
|
name: defaultTheme.PropTypes.string,
|