@ntbjs/react-components 1.1.0-beta.63 → 1.1.0-beta.65
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-59ea0b08.js → AssetGallery-7dbea5d5.js} +4 -4
- package/{CompactAutocompleteSelect-0160cb3e.js → CompactAutocompleteSelect-b366ba70.js} +51 -31
- package/{CompactStarRating-9c4c4f2c.js → CompactStarRating-17c8ca3d.js} +42 -13
- package/{CompactTextInput-d2fabaf5.js → CompactTextInput-7263652c.js} +42 -22
- package/{Instructions-3be0c5c8.js → Instructions-b31ef28d.js} +14 -9
- package/{TextArea-76e2ff1e.js → TextArea-8bc4d08c.js} +86 -62
- package/inputs/CompactAutocompleteSelect/index.js +1 -1
- package/inputs/CompactStarRating/index.js +2 -1
- package/inputs/CompactTextInput/index.js +1 -1
- package/inputs/TextArea/index.js +1 -1
- package/inputs/index.js +4 -4
- package/package.json +1 -1
- package/widgets/AssetGallery/index.js +5 -5
- package/widgets/Instructions/index.js +3 -3
- package/widgets/index.js +6 -6
|
@@ -9,12 +9,12 @@ var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
|
|
|
9
9
|
var ActionButton = require('./ActionButton-c3f5ed94.js');
|
|
10
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-8bc4d08c.js');
|
|
18
18
|
require('./Switch-cd165c8c.js');
|
|
19
19
|
require('./Alert-3e4f8be1.js');
|
|
20
20
|
require('./Badge-9bcebe96.js');
|
|
@@ -18,35 +18,55 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
18
18
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
19
19
|
var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
|
|
20
20
|
|
|
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;
|
|
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"])));
|
|
22
34
|
var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
|
|
23
|
-
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) {
|
|
24
36
|
return props.theme.primaryFontFamily;
|
|
25
37
|
}, function (props) {
|
|
26
38
|
return props.$hasLabel ? '66.66%' : '100%';
|
|
27
39
|
});
|
|
28
|
-
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) {
|
|
29
41
|
return props.theme.primaryFontFamily;
|
|
30
42
|
});
|
|
31
|
-
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) {
|
|
32
44
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
33
45
|
});
|
|
34
|
-
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
35
|
-
var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
36
|
-
return props.
|
|
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'));
|
|
37
53
|
});
|
|
38
|
-
var AsyncCreatableAutocompleteSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(
|
|
39
|
-
var AsyncAutocompleteSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(
|
|
40
|
-
var AutocompletSelect = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(
|
|
41
|
-
var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(
|
|
42
|
-
var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(
|
|
43
|
-
return props.success ? props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-
|
|
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
|
+
});
|
|
44
64
|
}, function (props) {
|
|
45
65
|
return props.warning && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#fffde8');
|
|
46
66
|
}, function (props) {
|
|
47
67
|
return props.error && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#fbeae6');
|
|
48
68
|
}, function (props) {
|
|
49
|
-
return props.success && !props.isFocused && props.theme.themeProp('background-color', '#64b49d', '#
|
|
69
|
+
return props.success && !props.isFocused && props.theme.themeProp('background-color', '#64b49d', '#f3f9f7');
|
|
50
70
|
}, function (props) {
|
|
51
71
|
return props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'));
|
|
52
72
|
}, function (props) {
|
|
@@ -56,7 +76,7 @@ var Control = styled__default['default'](Select.components.Control).attrs(defaul
|
|
|
56
76
|
}, function (props) {
|
|
57
77
|
return !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
58
78
|
}, function (props) {
|
|
59
|
-
return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-
|
|
79
|
+
return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-200'));
|
|
60
80
|
}, function (props) {
|
|
61
81
|
return props.warning && !props.isFocused && props.theme.themeProp('background', '#816600', '#fffebf');
|
|
62
82
|
}, function (props) {
|
|
@@ -64,47 +84,47 @@ var Control = styled__default['default'](Select.components.Control).attrs(defaul
|
|
|
64
84
|
}, function (props) {
|
|
65
85
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
66
86
|
}, function (props) {
|
|
67
|
-
return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-
|
|
87
|
+
return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-200'));
|
|
68
88
|
});
|
|
69
|
-
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) {
|
|
70
90
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
71
91
|
}, function (props) {
|
|
72
|
-
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')));
|
|
73
93
|
}, function (props) {
|
|
74
|
-
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')));
|
|
75
95
|
}, function (props) {
|
|
76
|
-
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')));
|
|
77
97
|
});
|
|
78
|
-
var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(
|
|
79
|
-
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')));
|
|
80
100
|
}, function (props) {
|
|
81
101
|
return (props.error || props.warning) && props.theme.themeProp('opacity', '0.6', '0.6');
|
|
82
102
|
});
|
|
83
|
-
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) {
|
|
84
104
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
85
105
|
});
|
|
86
|
-
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) {
|
|
87
107
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
88
108
|
});
|
|
89
|
-
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) {
|
|
90
110
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
|
|
91
111
|
});
|
|
92
|
-
var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(
|
|
93
|
-
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) {
|
|
94
114
|
return props.isFocused ? 'flex' : 'none';
|
|
95
115
|
}, function (props) {
|
|
96
116
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
97
117
|
});
|
|
98
|
-
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) {
|
|
99
119
|
return props.isFocused ? 'flex' : 'none';
|
|
100
120
|
}, function (props) {
|
|
101
121
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
102
122
|
});
|
|
103
|
-
var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(
|
|
104
|
-
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) {
|
|
105
125
|
return props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
106
126
|
});
|
|
107
|
-
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) {
|
|
108
128
|
return props.isFocused ? 'flex' : 'none';
|
|
109
129
|
}, function (props) {
|
|
110
130
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
@@ -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,
|
|
@@ -40,20 +40,32 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
40
40
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
41
41
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
42
42
|
|
|
43
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
44
|
-
var
|
|
43
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
|
44
|
+
var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
|
|
45
|
+
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
46
|
+
}, function (props) {
|
|
47
|
+
return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
|
|
48
|
+
});
|
|
49
|
+
var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
|
|
50
|
+
return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
|
|
51
|
+
}, function (props) {
|
|
52
|
+
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
53
|
+
});
|
|
54
|
+
var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
55
|
+
var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
56
|
+
var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
|
|
45
57
|
return props.theme.primaryFontFamily;
|
|
46
58
|
});
|
|
47
|
-
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
59
|
+
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = 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) {
|
|
48
60
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
49
61
|
});
|
|
50
|
-
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
62
|
+
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n height: 19px;\n flex-basis: ", ";\n"])), function (props) {
|
|
51
63
|
return props.$hasLabel ? '66.66%' : '100%';
|
|
52
64
|
});
|
|
53
|
-
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
54
|
-
return props.theme.themeProp('background', styled.css(
|
|
65
|
+
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n padding-right: 4px;\n ", ";\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n color: ", ";\n\n ", "\n\n ", "\n\n > svg {\n width: 12px;\n }\n"])), function (props) {
|
|
66
|
+
return props.theme.themeProp('background', styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
|
|
55
67
|
return props.error ? '#901d1d' : props.warning ? '#816600' : props.theme.getColor('gray-700');
|
|
56
|
-
}), styled.css(
|
|
68
|
+
}), styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
|
|
57
69
|
return props.error ? '#f7d5d0' : props.warning ? '#fffebf' : props.theme.getColor('gray-100');
|
|
58
70
|
}));
|
|
59
71
|
}, function (props) {
|
|
@@ -63,55 +75,63 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
63
75
|
}, function (props) {
|
|
64
76
|
return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
65
77
|
});
|
|
66
|
-
var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
67
|
-
return props.
|
|
78
|
+
var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n padding-right: 4px;\n padding-left: 20px;\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) {
|
|
79
|
+
return props.success ? 0 : 1;
|
|
80
|
+
}, function (props) {
|
|
81
|
+
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
82
|
+
}, function (props) {
|
|
83
|
+
return props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'));
|
|
68
84
|
});
|
|
69
|
-
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(
|
|
85
|
+
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n ", "\n\n ", "\n padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n text-overflow: ellipsis;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n ", ";\n ", ";\n }\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n & + ", " {\n opacity: 1;\n ", ";\n\n & + ", " {\n opacity: 1;\n }\n }\n }\n\n &&:focus {\n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
|
|
86
|
+
return props.success && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
|
|
87
|
+
return props.success ? fadeIn : fadeOut;
|
|
88
|
+
});
|
|
89
|
+
}, function (props) {
|
|
70
90
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
71
91
|
}, function (props) {
|
|
72
92
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
73
93
|
}, function (props) {
|
|
74
|
-
return props.hasLink && styled.css(
|
|
94
|
+
return props.hasLink && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n\n &&:read-only {\n cursor: pointer;\n }\n "])), function (props) {
|
|
75
95
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
76
96
|
});
|
|
77
97
|
}, function (props) {
|
|
78
98
|
return props.warning && props.theme.themeProp('background', '#634e01', '#fffde8');
|
|
79
99
|
}, function (props) {
|
|
80
|
-
return props.error && props.theme.themeProp('background', '#
|
|
100
|
+
return props.error && props.theme.themeProp('background', '#fbeae6', '#fbeae6');
|
|
81
101
|
}, function (props) {
|
|
82
102
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
83
103
|
}, function (props) {
|
|
84
|
-
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-
|
|
104
|
+
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
|
|
85
105
|
}, function (props) {
|
|
86
106
|
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
87
107
|
}, function (props) {
|
|
88
108
|
return props.warning && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
|
|
89
109
|
}, function (props) {
|
|
90
|
-
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-
|
|
110
|
+
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
|
|
91
111
|
}, function (props) {
|
|
92
112
|
return props.error && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
|
|
93
113
|
}, InputIconContainer, function (props) {
|
|
94
|
-
return props.success && styled.css(
|
|
114
|
+
return props.success && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
95
115
|
}, CheckIconContainer, function (props) {
|
|
96
116
|
return props.error && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
97
117
|
}, function (props) {
|
|
98
|
-
return !props.readOnly && styled.css(
|
|
118
|
+
return !props.readOnly && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
99
119
|
return props.theme.getColor('gray-600');
|
|
100
120
|
});
|
|
101
121
|
}, function (props) {
|
|
102
|
-
return props.warning && styled.css(
|
|
122
|
+
return props.warning && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
103
123
|
return props.theme.getColor('signal-yellow-500');
|
|
104
124
|
});
|
|
105
125
|
}, function (props) {
|
|
106
|
-
return props.error && styled.css(
|
|
126
|
+
return props.error && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
107
127
|
return props.theme.getColor('red-500');
|
|
108
128
|
});
|
|
109
129
|
}, function (props) {
|
|
110
|
-
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-
|
|
130
|
+
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
|
|
111
131
|
}, function (props) {
|
|
112
|
-
return props.bold && styled.css(
|
|
132
|
+
return props.bold && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
|
|
113
133
|
});
|
|
114
|
-
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
134
|
+
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 8px;\n\n a {\n font-size: 0.875rem;\n ", ";\n }\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), function (props) {
|
|
115
135
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('emerald-500'), 1);
|
|
116
136
|
});
|
|
117
137
|
|
|
@@ -273,6 +293,7 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
273
293
|
});
|
|
274
294
|
CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
275
295
|
label: defaultTheme.PropTypes.string,
|
|
296
|
+
success: defaultTheme.PropTypes.bool,
|
|
276
297
|
type: defaultTheme.PropTypes.string,
|
|
277
298
|
name: defaultTheme.PropTypes.string,
|
|
278
299
|
defaultValue: defaultTheme.PropTypes.string,
|
|
@@ -283,7 +304,6 @@ CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
283
304
|
autoSelect: defaultTheme.PropTypes.bool,
|
|
284
305
|
readOnly: defaultTheme.PropTypes.bool,
|
|
285
306
|
edit: defaultTheme.PropTypes.bool,
|
|
286
|
-
success: defaultTheme.PropTypes.bool,
|
|
287
307
|
error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
288
308
|
warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
289
309
|
bold: defaultTheme.PropTypes.bool,
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
var defaultTheme = require('./defaultTheme-50f2b88f.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
|
-
var TextArea = require('./TextArea-
|
|
7
|
-
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-
|
|
6
|
+
var TextArea = require('./TextArea-8bc4d08c.js');
|
|
7
|
+
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-b366ba70.js');
|
|
8
8
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
9
9
|
var lodash = require('lodash');
|
|
10
10
|
|
|
@@ -18,13 +18,13 @@ var Instructions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefa
|
|
|
18
18
|
return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
|
|
19
19
|
});
|
|
20
20
|
var TopBarContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n display: flex;\n justify-content: end;\n ", ";\n\n ", ";\n\n width: 100%;\n margin-top: 0;\n transition: margin-top 120ms;\n &&.slide-in {\n margin-top: -24px;\n }\n"])), function (props) {
|
|
21
|
-
return props.theme.themeProp('background', '
|
|
21
|
+
return props.theme.themeProp('background', props.theme.getColor('signal-yellow-400'), props.theme.getColor('signal-yellow-400'));
|
|
22
22
|
}, function (props) {
|
|
23
|
-
return props.initialHover && props.theme.themeProp('background', '
|
|
23
|
+
return props.initialHover && props.theme.themeProp('background', props.theme.getColor('signal-yellow-400'), '#FFFDE8');
|
|
24
24
|
});
|
|
25
25
|
var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n width: 35%;\n margin-right: 3px;\n"])));
|
|
26
|
-
var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n margin: auto;\n ", "
|
|
27
|
-
return props.theme.themeProp('background', '
|
|
26
|
+
var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n margin: auto;\n\n ", "\n"])), function (props) {
|
|
27
|
+
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300'));
|
|
28
28
|
});
|
|
29
29
|
|
|
30
30
|
var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
|
|
@@ -45,7 +45,8 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
|
|
|
45
45
|
availableOptions = _ref.availableOptions,
|
|
46
46
|
loadingMessageFunc = _ref.loadingMessageFunc,
|
|
47
47
|
placeholder = _ref.placeholder,
|
|
48
|
-
|
|
48
|
+
success = _ref.success,
|
|
49
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "success"]);
|
|
49
50
|
|
|
50
51
|
var _useState = React.useState(false),
|
|
51
52
|
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
@@ -178,12 +179,15 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
|
|
|
178
179
|
value: selectedOption,
|
|
179
180
|
creatable: false,
|
|
180
181
|
onChange: handleChange
|
|
181
|
-
}, sharedSelectProps)))), React__default['default'].createElement(InstructionsArea,
|
|
182
|
+
}, sharedSelectProps)))), React__default['default'].createElement(InstructionsArea, {
|
|
183
|
+
success: success
|
|
184
|
+
}, React__default['default'].createElement(TextArea.TextArea, {
|
|
182
185
|
noBorder: true,
|
|
183
186
|
lightBackground: background,
|
|
184
187
|
readOnly: readOnly,
|
|
185
|
-
warningAlert:
|
|
188
|
+
warningAlert: !success,
|
|
186
189
|
name: name,
|
|
190
|
+
success: success,
|
|
187
191
|
value: currentValue === null ? '' : currentValue,
|
|
188
192
|
onFocus: onFocus,
|
|
189
193
|
onChange: onChange,
|
|
@@ -207,6 +211,7 @@ Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
207
211
|
customAddMessage: defaultTheme.PropTypes.string,
|
|
208
212
|
autoSelect: defaultTheme.PropTypes.bool,
|
|
209
213
|
readOnly: defaultTheme.PropTypes.bool,
|
|
214
|
+
success: defaultTheme.PropTypes.bool,
|
|
210
215
|
hidden: defaultTheme.PropTypes.bool,
|
|
211
216
|
availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
|
|
212
217
|
lightBackground: defaultTheme.PropTypes.bool,
|
|
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
14
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
15
15
|
|
|
16
|
-
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;
|
|
16
|
+
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;
|
|
17
17
|
var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
|
|
18
18
|
var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n"])), function (props) {
|
|
19
19
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
@@ -23,11 +23,13 @@ var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = de
|
|
|
23
23
|
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n position: absolute;\n right: 5px;\n top: 10px;\n bottom: 0;\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n ", "\n }\n"])), function (props) {
|
|
24
24
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
|
|
25
25
|
});
|
|
26
|
-
var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n position: absolute;\n right: 6px;\n top: 8px;\n bottom: 0;\n svg {\n width: 15px;\n
|
|
27
|
-
return props.theme.getColor('emerald-500');
|
|
26
|
+
var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n position: absolute;\n right: 6px;\n top: 8px;\n bottom: 0;\n ", "\n svg {\n width: 15px;\n }\n"])), function (props) {
|
|
27
|
+
return props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'));
|
|
28
28
|
});
|
|
29
|
-
var
|
|
30
|
-
|
|
29
|
+
var Container = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral([""])));
|
|
30
|
+
var OpacityBox = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral([""])));
|
|
31
|
+
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 13px 10px;\n resize: vertical;\n transition: height 0.3s ease;\n overflow: hidden;\n z-index: 0; \n\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n\n \n ", "\n \n\n ", " \n\n ", " \n ", "\n ", ";\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n \n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n ", "\n ", "\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n \n"])), function (props) {
|
|
32
|
+
return props.expanded && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n height: ", "em;\n "])), props.maxHeight);
|
|
31
33
|
}, function (props) {
|
|
32
34
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
33
35
|
}, function (props) {
|
|
@@ -37,29 +39,29 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
37
39
|
}, function (props) {
|
|
38
40
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
|
|
39
41
|
}, function (props) {
|
|
40
|
-
return props.noBorder && styled.css(
|
|
42
|
+
return props.noBorder && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
|
|
41
43
|
}, function (props) {
|
|
42
|
-
return props.success && styled.css(
|
|
44
|
+
return props.success && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300')), props.theme.themeProp('background', '#64b49d !important', '#bfe0d5 !important'));
|
|
43
45
|
}, function (props) {
|
|
44
|
-
return props.warningAlert && styled.css(
|
|
46
|
+
return props.warningAlert && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n ", "\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
|
|
45
47
|
}, function (props) {
|
|
46
|
-
return props.errorAlert && styled.css(
|
|
48
|
+
return props.errorAlert && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n background: ", " !important;\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n background: #f7d5d0 !important;\n }\n &&:read-only:hover {\n background: ", " !important;\n }\n "])), props.theme.getColor('red-200'), props.theme.getColor('red-200'));
|
|
47
49
|
}, function (props) {
|
|
48
|
-
return props.lightBackground && styled.css(
|
|
50
|
+
return props.lightBackground && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
|
|
49
51
|
}, function (props) {
|
|
50
52
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
51
53
|
}, function (props) {
|
|
52
|
-
return props.noBorder && !props.readOnly ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
|
|
54
|
+
return props.noBorder && !props.readOnly && !props.warningAlert ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
|
|
53
55
|
}, InputIconContainer, function (props) {
|
|
54
|
-
return props.success && styled.css(
|
|
56
|
+
return props.success && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
55
57
|
}, function (props) {
|
|
56
|
-
return props.warning && styled.css(
|
|
58
|
+
return props.warning && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
|
|
57
59
|
}, function (props) {
|
|
58
|
-
return props.error && styled.css(
|
|
60
|
+
return props.error && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
|
|
59
61
|
}, function (props) {
|
|
60
|
-
return props.hasIcon && styled.css(
|
|
62
|
+
return props.hasIcon && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
|
|
61
63
|
}, function (props) {
|
|
62
|
-
return (props.warningAlert || props.errorAlert) && styled.css(
|
|
64
|
+
return (props.warningAlert || props.errorAlert) && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
|
|
63
65
|
}, function (props) {
|
|
64
66
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
|
|
65
67
|
}, function (props) {
|
|
@@ -69,31 +71,31 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
69
71
|
}, function (props) {
|
|
70
72
|
return props.theme.getColor('gray-600');
|
|
71
73
|
});
|
|
72
|
-
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
74
|
+
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n\n ", ";\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
|
|
73
75
|
return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
|
|
74
76
|
}, function (props) {
|
|
75
|
-
return props.hasPlaceholder && styled.css(
|
|
77
|
+
return props.hasPlaceholder && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.error && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
|
|
76
78
|
}, function (props) {
|
|
77
|
-
return props.hasIcon && styled.css(
|
|
79
|
+
return props.hasIcon && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
|
|
78
80
|
});
|
|
79
|
-
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
80
|
-
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
81
|
+
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
|
|
82
|
+
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n height: 2.625rem;\n display: flex;\n padding: 0 10px 0 30px;\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n }\n"])), function (props) {
|
|
81
83
|
return props.theme.themeProp('color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1);
|
|
82
84
|
});
|
|
83
|
-
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
85
|
+
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n\n ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
84
86
|
return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
85
87
|
}, function (props) {
|
|
86
|
-
return props.disabled && styled.css(
|
|
88
|
+
return props.disabled && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
87
89
|
});
|
|
88
|
-
var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(
|
|
90
|
+
var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n"])), function (props) {
|
|
89
91
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
90
92
|
}, function (props) {
|
|
91
|
-
return props.error && styled.css(
|
|
93
|
+
return props.error && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
92
94
|
});
|
|
93
|
-
var ShowMoreText = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(
|
|
95
|
+
var ShowMoreText = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n cursor: pointer;\n\n ", ";\n\n ", "\n"])), function (props) {
|
|
94
96
|
return props.theme.themeProp('color', props.theme.getColor('emerald-300'), props.theme.getColor('emerald-500'));
|
|
95
97
|
}, function (props) {
|
|
96
|
-
return props.error && styled.css(
|
|
98
|
+
return props.error && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
97
99
|
});
|
|
98
100
|
|
|
99
101
|
var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
|
|
@@ -126,36 +128,64 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
126
128
|
errorAlert = _ref.errorAlert,
|
|
127
129
|
rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "autoComplete", "description", "success", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
|
|
128
130
|
|
|
129
|
-
var lineheight = 1.5;
|
|
130
|
-
|
|
131
131
|
var _useState = React.useState(''),
|
|
132
132
|
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
133
133
|
contentRows = _useState2[0],
|
|
134
134
|
setContentRows = _useState2[1];
|
|
135
135
|
|
|
136
|
-
var _useState3 = React.useState(
|
|
136
|
+
var _useState3 = React.useState(''),
|
|
137
137
|
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
138
|
-
|
|
139
|
-
|
|
138
|
+
maxContentRows = _useState4[0],
|
|
139
|
+
setMaxContentRows = _useState4[1];
|
|
140
140
|
|
|
141
|
-
var _useState5 = React.useState(
|
|
141
|
+
var _useState5 = React.useState(rows),
|
|
142
142
|
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
143
|
-
|
|
144
|
-
|
|
143
|
+
defaultRows = _useState6[0],
|
|
144
|
+
setDefaultRows = _useState6[1];
|
|
145
145
|
|
|
146
|
-
var _useState7 = React.useState(
|
|
146
|
+
var _useState7 = React.useState(false),
|
|
147
147
|
_useState8 = defaultTheme._slicedToArray(_useState7, 2),
|
|
148
|
-
|
|
149
|
-
|
|
148
|
+
expanded = _useState8[0],
|
|
149
|
+
setExpanded = _useState8[1];
|
|
150
|
+
|
|
151
|
+
var _useState9 = React.useState(false),
|
|
152
|
+
_useState10 = defaultTheme._slicedToArray(_useState9, 2),
|
|
153
|
+
displayShowMoreText = _useState10[0],
|
|
154
|
+
setDisplayShowMoreText = _useState10[1];
|
|
155
|
+
|
|
156
|
+
var _useState11 = React.useState(''),
|
|
157
|
+
_useState12 = defaultTheme._slicedToArray(_useState11, 2),
|
|
158
|
+
maxHeight = _useState12[0],
|
|
159
|
+
setMaxHeight = _useState12[1];
|
|
150
160
|
|
|
151
|
-
console.log('default maxHeight', maxHeight);
|
|
152
161
|
React.useEffect(function () {
|
|
153
162
|
setDefaultRows(rows);
|
|
154
163
|
}, []);
|
|
164
|
+
var textAreaRef = React.useRef(null);
|
|
165
|
+
React.useEffect(function () {
|
|
166
|
+
var updateHeight = function updateHeight() {
|
|
167
|
+
var lineheight = 1.5;
|
|
168
|
+
var textarea = textAreaRef.current.scrollHeight;
|
|
169
|
+
var maxRows = Math.floor(textarea / (lineheight * 11.5));
|
|
170
|
+
var maxHeight = maxRows * lineheight + 'em';
|
|
171
|
+
|
|
172
|
+
if (maxRows > defaultRows) {
|
|
173
|
+
setExpanded(true);
|
|
174
|
+
setDisplayShowMoreText(true);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
setMaxContentRows(maxRows);
|
|
178
|
+
setMaxHeight(maxHeight);
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
if (showMore) {
|
|
182
|
+
updateHeight();
|
|
183
|
+
}
|
|
184
|
+
}, []);
|
|
155
185
|
|
|
156
|
-
var
|
|
157
|
-
|
|
158
|
-
uniqueId =
|
|
186
|
+
var _useState13 = React.useState(nanoid.nanoid()),
|
|
187
|
+
_useState14 = defaultTheme._slicedToArray(_useState13, 1),
|
|
188
|
+
uniqueId = _useState14[0];
|
|
159
189
|
|
|
160
190
|
var hasError = React.useMemo(function () {
|
|
161
191
|
if (lodash.isBoolean(error)) {
|
|
@@ -187,25 +217,19 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
187
217
|
return null;
|
|
188
218
|
}, [description, error, warning]);
|
|
189
219
|
|
|
190
|
-
var handleTextAreaChange = function handleTextAreaChange(
|
|
191
|
-
|
|
192
|
-
var currentRows = Math.floor(textarea.scrollHeight / (lineheight * 0.9));
|
|
193
|
-
var maxHeight = currentRows * lineheight + 'em';
|
|
220
|
+
var handleTextAreaChange = function handleTextAreaChange() {
|
|
221
|
+
setExpanded(!expanded);
|
|
194
222
|
|
|
195
|
-
if (
|
|
196
|
-
setContentRows(
|
|
223
|
+
if (expanded === true) {
|
|
224
|
+
setContentRows(maxContentRows);
|
|
197
225
|
setMaxHeight(maxHeight);
|
|
198
|
-
setExpanded(true);
|
|
199
226
|
}
|
|
200
227
|
|
|
201
|
-
if (
|
|
228
|
+
if (expanded === false) {
|
|
202
229
|
setContentRows(defaultRows);
|
|
203
|
-
setExpanded(false);
|
|
204
230
|
}
|
|
205
231
|
};
|
|
206
232
|
|
|
207
|
-
console.log('maxHeight', maxHeight);
|
|
208
|
-
console.log('expanded', expanded);
|
|
209
233
|
if (hidden) return null;
|
|
210
234
|
return React__default['default'].createElement(TextInput, {
|
|
211
235
|
disabled: disabled,
|
|
@@ -213,10 +237,9 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
213
237
|
error: hasError,
|
|
214
238
|
warning: hasWarning,
|
|
215
239
|
className: className,
|
|
216
|
-
style: style
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
ref: forwardedRef,
|
|
240
|
+
style: style
|
|
241
|
+
}, !warningAlert && !errorAlert && React__default['default'].createElement(TextInputFieldIcon, null, icon), (warningAlert || errorAlert) && React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(Container, null, React__default['default'].createElement(OpacityBox, null, React__default['default'].createElement(TextInputField, defaultTheme._extends({
|
|
242
|
+
ref: showMore ? textAreaRef : forwardedRef,
|
|
220
243
|
rows: contentRows > rows ? contentRows : rows,
|
|
221
244
|
expanded: expanded,
|
|
222
245
|
maxHeight: maxHeight,
|
|
@@ -241,7 +264,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
241
264
|
noBorder: noBorder,
|
|
242
265
|
warningAlert: warningAlert,
|
|
243
266
|
errorAlert: errorAlert
|
|
244
|
-
}, rest)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
|
|
267
|
+
}, rest)))), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
|
|
245
268
|
warningAlert: warningAlert,
|
|
246
269
|
errorAlert: errorAlert
|
|
247
270
|
}, React__default['default'].createElement(editNote.SvgEditNote, null)), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null)), label && React__default['default'].createElement(TextInputLabel, {
|
|
@@ -251,9 +274,9 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
251
274
|
error: hasError
|
|
252
275
|
}, label, required && ' *'), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
|
|
253
276
|
error: hasError
|
|
254
|
-
}, descriptionText), typeof showMoreText === 'string' && showMoreText.length > 0 && React__default['default'].createElement(ShowMoreText, {
|
|
277
|
+
}, descriptionText), typeof showMoreText === 'string' && showMoreText.length > 0 && displayShowMoreText && React__default['default'].createElement(ShowMoreText, {
|
|
255
278
|
onClick: handleTextAreaChange,
|
|
256
|
-
showMore:
|
|
279
|
+
showMore: expanded
|
|
257
280
|
}, showMoreText));
|
|
258
281
|
});
|
|
259
282
|
TextArea.defaultProps = {
|
|
@@ -264,10 +287,12 @@ TextArea.defaultProps = {
|
|
|
264
287
|
warningAlert: false,
|
|
265
288
|
errorAlert: false,
|
|
266
289
|
hidden: false,
|
|
290
|
+
showMoreText: '',
|
|
267
291
|
showMore: false,
|
|
268
|
-
|
|
292
|
+
success: false
|
|
269
293
|
};
|
|
270
294
|
TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
295
|
+
success: defaultTheme.PropTypes.bool,
|
|
271
296
|
value: defaultTheme.PropTypes.string,
|
|
272
297
|
defaultValue: defaultTheme.PropTypes.string,
|
|
273
298
|
name: defaultTheme.PropTypes.string,
|
|
@@ -284,7 +309,6 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
284
309
|
description: defaultTheme.PropTypes.string,
|
|
285
310
|
error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
286
311
|
warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
287
|
-
success: defaultTheme.PropTypes.bool,
|
|
288
312
|
icon: defaultTheme.PropTypes.element,
|
|
289
313
|
rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
|
|
290
314
|
className: defaultTheme.PropTypes.string,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-
|
|
3
|
+
var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-b366ba70.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var CompactStarRating = require('../../CompactStarRating-
|
|
3
|
+
var CompactStarRating = require('../../CompactStarRating-17c8ca3d.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
7
7
|
require('lodash');
|
|
8
|
+
require('../../check-circle-filled-1640873e.js');
|
|
8
9
|
|
|
9
10
|
|
|
10
11
|
|
package/inputs/TextArea/index.js
CHANGED
package/inputs/index.js
CHANGED
|
@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var ActionButton = require('../ActionButton-c3f5ed94.js');
|
|
6
6
|
var Button = require('../Button-f893df21.js');
|
|
7
7
|
var Checkbox = require('../Checkbox-012bbd3f.js');
|
|
8
|
-
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-
|
|
9
|
-
var CompactStarRating = require('../CompactStarRating-
|
|
10
|
-
var CompactTextInput = require('../CompactTextInput-
|
|
8
|
+
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-b366ba70.js');
|
|
9
|
+
var CompactStarRating = require('../CompactStarRating-17c8ca3d.js');
|
|
10
|
+
var CompactTextInput = require('../CompactTextInput-7263652c.js');
|
|
11
11
|
var MultiSelect = require('../MultiSelect-5b008b32.js');
|
|
12
12
|
var Radio = require('../Radio-0594409d.js');
|
|
13
|
-
var TextArea = require('../TextArea-
|
|
13
|
+
var TextArea = require('../TextArea-8bc4d08c.js');
|
|
14
14
|
var TextInput = require('../TextInput-a1083be3.js');
|
|
15
15
|
var Switch = require('../Switch-cd165c8c.js');
|
|
16
16
|
require('../defaultTheme-50f2b88f.js');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var AssetGallery = require('../../AssetGallery-
|
|
3
|
+
var AssetGallery = require('../../AssetGallery-7dbea5d5.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
@@ -19,15 +19,15 @@ require('../../shift-away-subtle-cfdf1dbe.js');
|
|
|
19
19
|
require('../../ContextMenu-d088833b.js');
|
|
20
20
|
require('../../expand-more-94585605.js');
|
|
21
21
|
require('../../Checkbox-012bbd3f.js');
|
|
22
|
-
require('../../CompactAutocompleteSelect-
|
|
22
|
+
require('../../CompactAutocompleteSelect-b366ba70.js');
|
|
23
23
|
require('react-select');
|
|
24
24
|
require('../../react-select-creatable.esm-2f23d6c6.js');
|
|
25
25
|
require('react-dom');
|
|
26
26
|
require('react-select-async-paginate');
|
|
27
27
|
require('../../close-ebf2f3cf.js');
|
|
28
28
|
require('../../check-circle-filled-1640873e.js');
|
|
29
|
-
require('../../CompactStarRating-
|
|
30
|
-
require('../../CompactTextInput-
|
|
29
|
+
require('../../CompactStarRating-17c8ca3d.js');
|
|
30
|
+
require('../../CompactTextInput-7263652c.js');
|
|
31
31
|
require('../../Alert-3e4f8be1.js');
|
|
32
32
|
require('../../Badge-9bcebe96.js');
|
|
33
33
|
require('../../Tab-bd0f3345.js');
|
|
@@ -35,7 +35,7 @@ require('../../Tabs-cfc35dc0.js');
|
|
|
35
35
|
require('../../Tooltip-f4f9ab8f.js');
|
|
36
36
|
require('../../MultiSelect-5b008b32.js');
|
|
37
37
|
require('../../Radio-0594409d.js');
|
|
38
|
-
require('../../TextArea-
|
|
38
|
+
require('../../TextArea-8bc4d08c.js');
|
|
39
39
|
require('../../Switch-cd165c8c.js');
|
|
40
40
|
require('../../warning-circle-24522402.js');
|
|
41
41
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Instructions = require('../../Instructions-
|
|
3
|
+
var Instructions = require('../../Instructions-b31ef28d.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
7
|
-
require('../../TextArea-
|
|
7
|
+
require('../../TextArea-8bc4d08c.js');
|
|
8
8
|
require('nanoid');
|
|
9
9
|
require('lodash');
|
|
10
10
|
require('../../edit-note-c47d292e.js');
|
|
11
11
|
require('../../check-circle-filled-1640873e.js');
|
|
12
|
-
require('../../CompactAutocompleteSelect-
|
|
12
|
+
require('../../CompactAutocompleteSelect-b366ba70.js');
|
|
13
13
|
require('react-select');
|
|
14
14
|
require('../../react-select-creatable.esm-2f23d6c6.js');
|
|
15
15
|
require('react-dom');
|
package/widgets/index.js
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var AssetGallery = require('../AssetGallery-
|
|
5
|
+
var AssetGallery = require('../AssetGallery-7dbea5d5.js');
|
|
6
6
|
var ContextMenu = require('../ContextMenu-d088833b.js');
|
|
7
7
|
var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
|
|
8
|
-
var Instructions = require('../Instructions-
|
|
8
|
+
var Instructions = require('../Instructions-b31ef28d.js');
|
|
9
9
|
require('../defaultTheme-50f2b88f.js');
|
|
10
10
|
require('styled-components');
|
|
11
11
|
require('react');
|
|
@@ -23,15 +23,15 @@ require('@tippyjs/react');
|
|
|
23
23
|
require('../shift-away-subtle-cfdf1dbe.js');
|
|
24
24
|
require('../expand-more-94585605.js');
|
|
25
25
|
require('../Checkbox-012bbd3f.js');
|
|
26
|
-
require('../CompactAutocompleteSelect-
|
|
26
|
+
require('../CompactAutocompleteSelect-b366ba70.js');
|
|
27
27
|
require('react-select');
|
|
28
28
|
require('../react-select-creatable.esm-2f23d6c6.js');
|
|
29
29
|
require('react-dom');
|
|
30
30
|
require('react-select-async-paginate');
|
|
31
31
|
require('../close-ebf2f3cf.js');
|
|
32
32
|
require('../check-circle-filled-1640873e.js');
|
|
33
|
-
require('../CompactStarRating-
|
|
34
|
-
require('../CompactTextInput-
|
|
33
|
+
require('../CompactStarRating-17c8ca3d.js');
|
|
34
|
+
require('../CompactTextInput-7263652c.js');
|
|
35
35
|
require('../Alert-3e4f8be1.js');
|
|
36
36
|
require('../Badge-9bcebe96.js');
|
|
37
37
|
require('../Tab-bd0f3345.js');
|
|
@@ -39,7 +39,7 @@ require('../Tabs-cfc35dc0.js');
|
|
|
39
39
|
require('../Tooltip-f4f9ab8f.js');
|
|
40
40
|
require('../MultiSelect-5b008b32.js');
|
|
41
41
|
require('../Radio-0594409d.js');
|
|
42
|
-
require('../TextArea-
|
|
42
|
+
require('../TextArea-8bc4d08c.js');
|
|
43
43
|
require('../Switch-cd165c8c.js');
|
|
44
44
|
require('../warning-circle-24522402.js');
|
|
45
45
|
|