@ntbjs/react-components 1.1.0-beta.86 → 1.1.0-beta.87
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-b68f5e71.js → AssetGallery-7767299e.js} +2 -2
- package/{CompactTextInput-cae26b42.js → CompactTextInput-480f59cc.js} +3 -1
- package/{Instructions-cba7dd21.js → Instructions-f56e7b8c.js} +9 -3
- package/{TextArea-d9e639e4.js → TextArea-a4a70687.js} +67 -47
- package/inputs/CompactTextInput/index.js +1 -1
- package/inputs/TextArea/index.js +1 -1
- package/inputs/index.js +2 -2
- package/package.json +1 -1
- package/widgets/AssetGallery/index.js +3 -3
- package/widgets/Instructions/index.js +2 -2
- package/widgets/index.js +4 -4
|
@@ -11,10 +11,10 @@ require('./Button-432f87c6.js');
|
|
|
11
11
|
require('./Checkbox-85394137.js');
|
|
12
12
|
require('./CompactAutocompleteSelect-5ee8443f.js');
|
|
13
13
|
require('./CompactStarRating-de1bcfe9.js');
|
|
14
|
-
require('./CompactTextInput-
|
|
14
|
+
require('./CompactTextInput-480f59cc.js');
|
|
15
15
|
require('./MultiSelect-01a257b8.js');
|
|
16
16
|
require('./Radio-c811ce4a.js');
|
|
17
|
-
require('./TextArea-
|
|
17
|
+
require('./TextArea-a4a70687.js');
|
|
18
18
|
require('./Switch-3ac11c97.js');
|
|
19
19
|
require('./Alert-3e4f8be1.js');
|
|
20
20
|
require('./Badge-9bcebe96.js');
|
|
@@ -105,7 +105,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
105
105
|
}, function (props) {
|
|
106
106
|
return props.state === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
107
107
|
});
|
|
108
|
-
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = 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 ", "\n\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\n &&:hover:not(:focus) {\n ", "\n & + ", " {\n opacity: 1;\n \n }\n }\n ", ";\n\n ", "\n\n ", ";\n\n ", ";\n }\n\n &&:focus {\n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
|
|
108
|
+
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = 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 ", "\n\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\n &&:hover:not(:focus) {\n ", "\n & + ", " {\n opacity: 1;\n \n }\n }\n ", ";\n\n ", "\n\n ", ";\n\n ", ";\n }\n\n &&:focus {\n\n ", ";\n \n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
|
|
109
109
|
return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
|
|
110
110
|
}, function (props) {
|
|
111
111
|
return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
@@ -143,6 +143,8 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
143
143
|
return props.state === 'warning' && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
|
|
144
144
|
}, function (props) {
|
|
145
145
|
return props.state === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
|
|
146
|
+
}, function (props) {
|
|
147
|
+
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
146
148
|
}, function (props) {
|
|
147
149
|
return props.state === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
148
150
|
}, function (props) {
|
|
@@ -5,7 +5,7 @@ var lodash = require('lodash');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
7
7
|
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-5ee8443f.js');
|
|
8
|
-
var TextArea = require('./TextArea-
|
|
8
|
+
var TextArea = require('./TextArea-a4a70687.js');
|
|
9
9
|
var styled = require('styled-components');
|
|
10
10
|
|
|
11
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -49,7 +49,9 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
|
|
|
49
49
|
rows = _ref.rows,
|
|
50
50
|
showMore = _ref.showMore,
|
|
51
51
|
showMoreText = _ref.showMoreText,
|
|
52
|
-
|
|
52
|
+
isExpanded = _ref.isExpanded,
|
|
53
|
+
maxRows = _ref.maxRows,
|
|
54
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "state", "editWarning", "rows", "showMore", "showMoreText", "isExpanded", "maxRows"]);
|
|
53
55
|
|
|
54
56
|
var _useState = React.useState(false),
|
|
55
57
|
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
@@ -192,6 +194,8 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
|
|
|
192
194
|
readOnly: readOnly,
|
|
193
195
|
disabled: disabled,
|
|
194
196
|
name: name,
|
|
197
|
+
isExpanded: isExpanded,
|
|
198
|
+
maxRows: maxRows,
|
|
195
199
|
editWarning: editWarning,
|
|
196
200
|
value: currentValue === null ? '' : currentValue,
|
|
197
201
|
onFocus: onFocus,
|
|
@@ -237,7 +241,9 @@ Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
237
241
|
onFocus: defaultTheme.PropTypes.func,
|
|
238
242
|
onBlur: defaultTheme.PropTypes.func,
|
|
239
243
|
onUpdateCallback: defaultTheme.PropTypes.func,
|
|
240
|
-
state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success'])
|
|
244
|
+
state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
|
|
245
|
+
maxRows: defaultTheme.PropTypes.func,
|
|
246
|
+
isExpanded: defaultTheme.PropTypes.func
|
|
241
247
|
} : {};
|
|
242
248
|
|
|
243
249
|
exports.Instructions = Instructions;
|
|
@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
14
14
|
|
|
15
|
-
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, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
|
|
15
|
+
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, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39;
|
|
16
16
|
var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
17
17
|
var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
18
18
|
var activeLabel = styled.css(_templateObject3 || (_templateObject3 = 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"])));
|
|
@@ -27,7 +27,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
27
27
|
return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
|
|
28
28
|
});
|
|
29
29
|
var Container = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral([""])));
|
|
30
|
-
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = 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 z-index: 0
|
|
30
|
+
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = 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 z-index: 0;\n ", "\n ", "\n\n ", "\n ", "\n\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n ", "\n\n &&:hover:not(:focus) {\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"])), function (props) {
|
|
31
31
|
return props.theme.themeProp('color', 'white', 'black');
|
|
32
32
|
}, function (props) {
|
|
33
33
|
return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
@@ -36,7 +36,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
36
36
|
}, function (props) {
|
|
37
37
|
return props.expanded && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n height: ", "em;\n "])), props.maxHeight);
|
|
38
38
|
}, function (props) {
|
|
39
|
-
return props.showMore && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n
|
|
39
|
+
return props.showMore && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
|
|
40
40
|
}, function (props) {
|
|
41
41
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
42
42
|
}, function (props) {
|
|
@@ -48,31 +48,33 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
48
48
|
}, function (props) {
|
|
49
49
|
return props.noBorder && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
|
|
50
50
|
}, function (props) {
|
|
51
|
-
return props.state === 'error-border' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n
|
|
51
|
+
return props.state === 'error-border' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
52
52
|
}, function (props) {
|
|
53
|
-
return
|
|
54
|
-
|
|
53
|
+
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
54
|
+
}, function (props) {
|
|
55
|
+
return props.state === 'warning' && !props.editWarning && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n :focus {\n background: white !important;\n color: black !important;\n }\n &&:hover:not(:focus) {\n ", "\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')), function (props) {
|
|
56
|
+
return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n "])));
|
|
55
57
|
}, props.theme.themeProp('background', '#816600', '#F4E21E'), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
|
|
56
58
|
}, function (props) {
|
|
57
|
-
return props.state === 'warning' && props.editWarning && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n
|
|
59
|
+
return props.state === 'warning' && props.editWarning && styled.css(_templateObject17 || (_templateObject17 = 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', '#fffde8', '#fffde8'), props.theme.themeProp('background', '#fffebf', '#fffebf'), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
|
|
58
60
|
}, function (props) {
|
|
59
61
|
return props.state === 'error' && styled.css(_templateObject18 || (_templateObject18 = 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'));
|
|
60
62
|
}, function (props) {
|
|
61
|
-
return props.lightBackground && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n
|
|
63
|
+
return props.lightBackground && styled.css(_templateObject19 || (_templateObject19 = 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'));
|
|
62
64
|
}, function (props) {
|
|
63
65
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
64
66
|
}, function (props) {
|
|
65
67
|
return props.noBorder && !props.readOnly && props.state != 'warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
|
|
66
68
|
}, InputIconContainer, function (props) {
|
|
67
|
-
return props.state === 'success' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n
|
|
69
|
+
return props.state === 'success' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
68
70
|
}, function (props) {
|
|
69
71
|
return props.state === 'warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('orange-500'));
|
|
70
72
|
}, function (props) {
|
|
71
73
|
return props.state === 'error' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('red-500'));
|
|
72
74
|
}, function (props) {
|
|
73
|
-
return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left:
|
|
75
|
+
return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
|
|
74
76
|
}, function (props) {
|
|
75
|
-
return props.instructionsTextArea && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n
|
|
77
|
+
return props.instructionsTextArea && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 15px;\n padding-right: 50px;\n "])));
|
|
76
78
|
}, function (props) {
|
|
77
79
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
|
|
78
80
|
}, function (props) {
|
|
@@ -80,40 +82,44 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
80
82
|
}, function (props) {
|
|
81
83
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
|
|
82
84
|
}, function (props) {
|
|
83
|
-
return props.theme.getColor('gray-
|
|
85
|
+
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
84
86
|
});
|
|
85
|
-
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = 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) {
|
|
87
|
+
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = 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\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
|
|
86
88
|
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%)"));
|
|
87
89
|
}, function (props) {
|
|
88
|
-
return props.
|
|
90
|
+
return !props.inputIsEmpty && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
|
|
91
|
+
}, function (props) {
|
|
92
|
+
return props.hasPlaceholder && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.state === 'error' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
|
|
89
93
|
}, function (props) {
|
|
90
|
-
return props.hasIcon && styled.css(
|
|
94
|
+
return props.hasIcon && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
|
|
91
95
|
});
|
|
92
|
-
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
93
|
-
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
96
|
+
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = 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"])));
|
|
97
|
+
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\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 margin-top: -3px;\n ", "\n }\n"])), function (props) {
|
|
94
98
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
|
|
95
99
|
});
|
|
96
|
-
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
97
|
-
return props.disabled && styled.css(
|
|
100
|
+
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\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 ", "\n"])), function (props) {
|
|
101
|
+
return props.disabled && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
98
102
|
}, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
99
103
|
return props.state === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
104
|
+
}, function (props) {
|
|
105
|
+
return props.disabled && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
100
106
|
});
|
|
101
|
-
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
107
|
+
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = 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) {
|
|
102
108
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
103
109
|
}, function (props) {
|
|
104
|
-
return (props.state === 'error-border' || props.state === 'error') && styled.css(
|
|
110
|
+
return (props.state === 'error-border' || props.state === 'error') && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
105
111
|
});
|
|
106
|
-
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
112
|
+
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
|
|
107
113
|
return props.fadeIn ? 0 : 1;
|
|
108
114
|
}, function (props) {
|
|
109
115
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
110
116
|
}, function (props) {
|
|
111
117
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
112
118
|
});
|
|
113
|
-
var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
119
|
+
var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n margin: 0 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"])), function (props) {
|
|
114
120
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
|
|
115
121
|
}, function (props) {
|
|
116
|
-
return props.state === 'error' && styled.css(
|
|
122
|
+
return props.state === 'error' && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
117
123
|
});
|
|
118
124
|
|
|
119
125
|
var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
|
|
@@ -139,7 +145,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
139
145
|
rows = _ref.rows,
|
|
140
146
|
className = _ref.className,
|
|
141
147
|
style = _ref.style,
|
|
142
|
-
|
|
148
|
+
_onChange = _ref.onChange,
|
|
143
149
|
onBlur = _ref.onBlur,
|
|
144
150
|
lightBackground = _ref.lightBackground,
|
|
145
151
|
noBorder = _ref.noBorder,
|
|
@@ -148,43 +154,48 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
148
154
|
|
|
149
155
|
var textInputRef = React.useRef(null);
|
|
150
156
|
|
|
151
|
-
var _useState = React.useState(
|
|
157
|
+
var _useState = React.useState(!(value || defaultValue)),
|
|
152
158
|
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
153
|
-
|
|
154
|
-
|
|
159
|
+
inputIsEmpty = _useState2[0],
|
|
160
|
+
setInputIsEmpty = _useState2[1];
|
|
155
161
|
|
|
156
162
|
var _useState3 = React.useState(''),
|
|
157
163
|
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
158
|
-
|
|
159
|
-
|
|
164
|
+
contentRows = _useState4[0],
|
|
165
|
+
setContentRows = _useState4[1];
|
|
160
166
|
|
|
161
|
-
var _useState5 = React.useState(
|
|
167
|
+
var _useState5 = React.useState(''),
|
|
162
168
|
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
163
|
-
|
|
164
|
-
|
|
169
|
+
maxContentRows = _useState6[0],
|
|
170
|
+
setMaxContentRows = _useState6[1];
|
|
165
171
|
|
|
166
|
-
var _useState7 = React.useState(
|
|
172
|
+
var _useState7 = React.useState(rows),
|
|
167
173
|
_useState8 = defaultTheme._slicedToArray(_useState7, 2),
|
|
168
|
-
|
|
169
|
-
|
|
174
|
+
defaultRows = _useState8[0],
|
|
175
|
+
setDefaultRows = _useState8[1];
|
|
170
176
|
|
|
171
|
-
var _useState9 = React.useState(
|
|
177
|
+
var _useState9 = React.useState(false),
|
|
172
178
|
_useState10 = defaultTheme._slicedToArray(_useState9, 2),
|
|
173
|
-
|
|
174
|
-
|
|
179
|
+
expanded = _useState10[0],
|
|
180
|
+
setExpanded = _useState10[1];
|
|
175
181
|
|
|
176
|
-
var _useState11 = React.useState(
|
|
182
|
+
var _useState11 = React.useState(''),
|
|
177
183
|
_useState12 = defaultTheme._slicedToArray(_useState11, 2),
|
|
178
|
-
|
|
179
|
-
|
|
184
|
+
maxHeight = _useState12[0],
|
|
185
|
+
setMaxHeight = _useState12[1];
|
|
186
|
+
|
|
187
|
+
var _useState13 = React.useState(false),
|
|
188
|
+
_useState14 = defaultTheme._slicedToArray(_useState13, 2),
|
|
189
|
+
showReadMore = _useState14[0],
|
|
190
|
+
setShowReadMore = _useState14[1];
|
|
180
191
|
|
|
181
192
|
React.useEffect(function () {
|
|
182
193
|
setDefaultRows(rows);
|
|
183
194
|
}, [rows]);
|
|
184
195
|
|
|
185
|
-
var
|
|
186
|
-
|
|
187
|
-
uniqueId =
|
|
196
|
+
var _useState15 = React.useState(nanoid.nanoid()),
|
|
197
|
+
_useState16 = defaultTheme._slicedToArray(_useState15, 1),
|
|
198
|
+
uniqueId = _useState16[0];
|
|
188
199
|
|
|
189
200
|
var handleTextAreaChange = function handleTextAreaChange() {
|
|
190
201
|
setExpanded(!expanded);
|
|
@@ -254,7 +265,15 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
254
265
|
icon: icon,
|
|
255
266
|
id: "text-input-".concat(uniqueId),
|
|
256
267
|
lightBackground: lightBackground,
|
|
257
|
-
onChange: onChange
|
|
268
|
+
onChange: function onChange(e) {
|
|
269
|
+
if (e.target.value) {
|
|
270
|
+
setInputIsEmpty(false);
|
|
271
|
+
} else {
|
|
272
|
+
setInputIsEmpty(true);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
_onChange();
|
|
276
|
+
},
|
|
258
277
|
onBlur: onBlur,
|
|
259
278
|
noBorder: noBorder
|
|
260
279
|
}, rest)), (state === 'loading' || state === 'success') && React__default['default'].createElement(SuccessContainer, null, state === 'loading' && React__default['default'].createElement(check._default, {
|
|
@@ -266,7 +285,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
266
285
|
htmlFor: "text-input-".concat(uniqueId),
|
|
267
286
|
hasPlaceholder: Boolean(placeholder),
|
|
268
287
|
hasIcon: Boolean(icon),
|
|
269
|
-
state: state
|
|
288
|
+
state: state,
|
|
289
|
+
inputIsEmpty: inputIsEmpty
|
|
270
290
|
}, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
|
|
271
291
|
state: state
|
|
272
292
|
}, description), maxContentRows > defaultRows && showMore && showReadMore && React__default['default'].createElement(ShowMoreText, {
|
package/inputs/TextArea/index.js
CHANGED
package/inputs/index.js
CHANGED
|
@@ -7,10 +7,10 @@ var Button = require('../Button-432f87c6.js');
|
|
|
7
7
|
var Checkbox = require('../Checkbox-85394137.js');
|
|
8
8
|
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-5ee8443f.js');
|
|
9
9
|
var CompactStarRating = require('../CompactStarRating-de1bcfe9.js');
|
|
10
|
-
var CompactTextInput = require('../CompactTextInput-
|
|
10
|
+
var CompactTextInput = require('../CompactTextInput-480f59cc.js');
|
|
11
11
|
var MultiSelect = require('../MultiSelect-01a257b8.js');
|
|
12
12
|
var Radio = require('../Radio-c811ce4a.js');
|
|
13
|
-
var TextArea = require('../TextArea-
|
|
13
|
+
var TextArea = require('../TextArea-a4a70687.js');
|
|
14
14
|
var TextInput = require('../TextInput-8ea31a7b.js');
|
|
15
15
|
var Switch = require('../Switch-3ac11c97.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-7767299e.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
@@ -27,7 +27,7 @@ require('../../react-select-creatable.esm-7231b55e.js');
|
|
|
27
27
|
require('react-dom');
|
|
28
28
|
require('../../close-ebf2f3cf.js');
|
|
29
29
|
require('../../CompactStarRating-de1bcfe9.js');
|
|
30
|
-
require('../../CompactTextInput-
|
|
30
|
+
require('../../CompactTextInput-480f59cc.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-bf42275e.js');
|
|
|
35
35
|
require('../../Tooltip-1b7b0052.js');
|
|
36
36
|
require('../../MultiSelect-01a257b8.js');
|
|
37
37
|
require('../../Radio-c811ce4a.js');
|
|
38
|
-
require('../../TextArea-
|
|
38
|
+
require('../../TextArea-a4a70687.js');
|
|
39
39
|
require('../../Switch-3ac11c97.js');
|
|
40
40
|
require('../../warning-circle-24522402.js');
|
|
41
41
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Instructions = require('../../Instructions-
|
|
3
|
+
var Instructions = require('../../Instructions-f56e7b8c.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -15,7 +15,7 @@ require('../../react-select-creatable.esm-7231b55e.js');
|
|
|
15
15
|
require('react-dom');
|
|
16
16
|
require('../../close-ebf2f3cf.js');
|
|
17
17
|
require('../../expand-more-94585605.js');
|
|
18
|
-
require('../../TextArea-
|
|
18
|
+
require('../../TextArea-a4a70687.js');
|
|
19
19
|
require('../../edit-note-c47d292e.js');
|
|
20
20
|
|
|
21
21
|
|
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-7767299e.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-f56e7b8c.js');
|
|
9
9
|
require('../defaultTheme-50f2b88f.js');
|
|
10
10
|
require('styled-components');
|
|
11
11
|
require('react');
|
|
@@ -31,7 +31,7 @@ require('../react-select-creatable.esm-7231b55e.js');
|
|
|
31
31
|
require('react-dom');
|
|
32
32
|
require('../close-ebf2f3cf.js');
|
|
33
33
|
require('../CompactStarRating-de1bcfe9.js');
|
|
34
|
-
require('../CompactTextInput-
|
|
34
|
+
require('../CompactTextInput-480f59cc.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-bf42275e.js');
|
|
|
39
39
|
require('../Tooltip-1b7b0052.js');
|
|
40
40
|
require('../MultiSelect-01a257b8.js');
|
|
41
41
|
require('../Radio-c811ce4a.js');
|
|
42
|
-
require('../TextArea-
|
|
42
|
+
require('../TextArea-a4a70687.js');
|
|
43
43
|
require('../Switch-3ac11c97.js');
|
|
44
44
|
require('../warning-circle-24522402.js');
|
|
45
45
|
|