@ntbjs/react-components 1.2.0-rc.70 → 1.2.0-rc.72
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-b1dec79b.js → AssetGallery-840a1473.js} +1 -1
- package/{Instructions-351527d8.js → Instructions-f940b240.js} +1 -1
- package/{TextArea-5acb31b9.js → TextArea-d88433b2.js} +76 -89
- package/inputs/TextArea/index.js +1 -1
- package/inputs/index.js +1 -1
- package/package.json +1 -1
- package/widgets/AssetGallery/index.js +2 -2
- package/widgets/Instructions/index.js +2 -2
- package/widgets/index.js +3 -3
|
@@ -24,7 +24,7 @@ require('./CompactStarRating-a754fc6f.js');
|
|
|
24
24
|
require('./CompactTextInput-baf13d5c.js');
|
|
25
25
|
require('./MultiSelect-4b8d3d0d.js');
|
|
26
26
|
require('./Radio-32d0513a.js');
|
|
27
|
-
require('./TextArea-
|
|
27
|
+
require('./TextArea-d88433b2.js');
|
|
28
28
|
require('./TextInput-0d109708.js');
|
|
29
29
|
require('./Switch-4a41585f.js');
|
|
30
30
|
var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
|
|
@@ -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-5982dcf2.js');
|
|
8
|
-
var TextArea = require('./TextArea-
|
|
8
|
+
var TextArea = require('./TextArea-d88433b2.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 }; }
|
|
@@ -19,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
19
19
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
20
20
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
21
21
|
|
|
22
|
-
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, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46
|
|
22
|
+
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, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46;
|
|
23
23
|
var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
24
24
|
var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
25
25
|
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"])));
|
|
@@ -35,26 +35,24 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
35
35
|
}, function (props) {
|
|
36
36
|
return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
|
|
37
37
|
});
|
|
38
|
-
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: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n
|
|
38
|
+
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: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n ", "\n \n ", "\n\n ", "\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n\n ", " \n \n\n ", " \n \n ", "\n\n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", "\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
|
|
39
39
|
return props.padding === 'small' && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
|
|
40
40
|
}, function (props) {
|
|
41
41
|
return props.padding === 'medium' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
|
|
42
42
|
}, function (props) {
|
|
43
43
|
return props.padding === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
|
|
44
44
|
}, function (props) {
|
|
45
|
-
return props.showMore && !props.expanded &&
|
|
46
|
-
}, function (props) {
|
|
47
|
-
return props.expanded && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n "])), props.maxHeight);
|
|
45
|
+
return props.showMore && !props.expanded && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])));
|
|
48
46
|
}, function (props) {
|
|
49
47
|
return props.theme.themeProp('color', 'white', 'black');
|
|
50
48
|
}, function (props) {
|
|
51
|
-
return props.readOnly && styled.css(
|
|
49
|
+
return props.readOnly && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
|
|
52
50
|
}, function (props) {
|
|
53
|
-
return props.disabled && styled.css(
|
|
51
|
+
return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
|
|
54
52
|
}, function (props) {
|
|
55
|
-
return props.readOnly && styled.css(
|
|
53
|
+
return props.readOnly && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
|
|
56
54
|
}, function (props) {
|
|
57
|
-
return props.showMore && styled.css(
|
|
55
|
+
return props.showMore && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
|
|
58
56
|
}, function (props) {
|
|
59
57
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
60
58
|
}, function (props) {
|
|
@@ -64,33 +62,33 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
64
62
|
}, function (props) {
|
|
65
63
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
|
|
66
64
|
}, function (props) {
|
|
67
|
-
return props.noBorder && styled.css(
|
|
65
|
+
return props.noBorder && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
68
66
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
69
67
|
});
|
|
70
68
|
}, function (props) {
|
|
71
|
-
return props.type === 'warning' && styled.css(
|
|
69
|
+
return props.type === 'warning' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01 ', '#FFFDE8'));
|
|
72
70
|
}, function (props) {
|
|
73
|
-
return props.type === 'instructions-warning' && styled.css(
|
|
71
|
+
return props.type === 'instructions-warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFF36C'), props.theme.themeProp('border-color', '#634E01 ', '#FFF36C'));
|
|
74
72
|
}, function (props) {
|
|
75
|
-
return props.type === 'error' && styled.css(
|
|
73
|
+
return props.type === 'error' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
|
|
76
74
|
}, function (props) {
|
|
77
|
-
return props.noBorder && props.type === 'instructions-warning' && styled.css(
|
|
75
|
+
return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
78
76
|
return props.theme.themeProp('border-color', '#634E01', '#FFF36C');
|
|
79
77
|
});
|
|
80
78
|
}, function (props) {
|
|
81
|
-
return props.noBorder && props.type === 'warning' && styled.css(
|
|
79
|
+
return props.noBorder && props.type === 'warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
82
80
|
return props.theme.themeProp('border-color', '#634E01', '#FFFDE8');
|
|
83
81
|
});
|
|
84
82
|
}, function (props) {
|
|
85
|
-
return props.noBorder && props.type === 'error' && styled.css(
|
|
83
|
+
return props.noBorder && props.type === 'error' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
86
84
|
return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
|
|
87
85
|
});
|
|
88
86
|
}, function (props) {
|
|
89
|
-
return props.type === 'warning-border' && styled.css(
|
|
87
|
+
return props.type === 'warning-border' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
|
|
90
88
|
}, function (props) {
|
|
91
|
-
return props.type === 'error-border' && styled.css(
|
|
89
|
+
return props.type === 'error-border' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
92
90
|
}, function (props) {
|
|
93
|
-
return props.lightBackground && styled.css(
|
|
91
|
+
return props.lightBackground && styled.css(_templateObject25 || (_templateObject25 = 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'));
|
|
94
92
|
}, function (props) {
|
|
95
93
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
96
94
|
}, function (props) {
|
|
@@ -100,13 +98,13 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
100
98
|
}, function (props) {
|
|
101
99
|
return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
|
|
102
100
|
}, function (props) {
|
|
103
|
-
return props.hasIcon && styled.css(
|
|
101
|
+
return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
|
|
104
102
|
}, function (props) {
|
|
105
103
|
return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
106
104
|
}, function (props) {
|
|
107
105
|
return props.type === 'instructions-warning' && props.theme.themeProp('background', '#806403', '#F4E21E');
|
|
108
106
|
}, function (props) {
|
|
109
|
-
return props.noBorder && props.type === 'instructions-warning' && styled.css(
|
|
107
|
+
return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
110
108
|
return props.theme.themeProp('border-color', '#806403', '#F4E21E');
|
|
111
109
|
});
|
|
112
110
|
}, function (props) {
|
|
@@ -116,7 +114,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
116
114
|
}, function (props) {
|
|
117
115
|
return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' && props.type != 'instructions-warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
|
|
118
116
|
}, InputIconContainer, function (props) {
|
|
119
|
-
return props.type === 'success' && styled.css(
|
|
117
|
+
return props.type === 'success' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
120
118
|
}, function (props) {
|
|
121
119
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
|
|
122
120
|
}, function (props) {
|
|
@@ -126,11 +124,11 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
126
124
|
}, function (props) {
|
|
127
125
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
|
|
128
126
|
}, function (props) {
|
|
129
|
-
return props.type === 'warning' && styled.css(
|
|
127
|
+
return props.type === 'warning' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
130
128
|
return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
|
|
131
129
|
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
132
130
|
}, function (props) {
|
|
133
|
-
return props.type === 'error' && styled.css(
|
|
131
|
+
return props.type === 'error' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
134
132
|
return props.theme.themeProp('border-color', '#D83018', '#D83018');
|
|
135
133
|
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
136
134
|
}, function (props) {
|
|
@@ -140,48 +138,48 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
140
138
|
}, function (props) {
|
|
141
139
|
return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
|
|
142
140
|
});
|
|
143
|
-
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
141
|
+
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = 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 margin-botton: 50px;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
|
|
144
142
|
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%)"));
|
|
145
143
|
}, function (props) {
|
|
146
|
-
return !props.inputIsEmpty && styled.css(
|
|
144
|
+
return !props.inputIsEmpty && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
|
|
147
145
|
}, function (props) {
|
|
148
|
-
return props.hasPlaceholder && styled.css(
|
|
146
|
+
return props.hasPlaceholder && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
|
|
149
147
|
}, function (props) {
|
|
150
|
-
return props.hasIcon && styled.css(
|
|
148
|
+
return props.hasIcon && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
|
|
151
149
|
});
|
|
152
|
-
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
153
|
-
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
150
|
+
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = 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"])));
|
|
151
|
+
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = 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) {
|
|
154
152
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
|
|
155
153
|
});
|
|
156
|
-
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
157
|
-
return props.readOnly && styled.css(
|
|
154
|
+
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\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"])), function (props) {
|
|
155
|
+
return props.readOnly && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
|
|
158
156
|
}, function (props) {
|
|
159
|
-
return props.disabled && styled.css(
|
|
157
|
+
return props.disabled && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
160
158
|
}, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
161
159
|
return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
162
160
|
});
|
|
163
|
-
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
161
|
+
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject40 || (_templateObject40 = 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\n ", "\n"])), function (props) {
|
|
164
162
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
165
163
|
}, function (props) {
|
|
166
|
-
return (props.type === 'warning-border' || props.type === 'warning') && styled.css(
|
|
164
|
+
return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
|
|
167
165
|
}, function (props) {
|
|
168
|
-
return (props.type === 'error-border' || props.type === 'error') && styled.css(
|
|
166
|
+
return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
169
167
|
});
|
|
170
|
-
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
168
|
+
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject43 || (_templateObject43 = 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) {
|
|
171
169
|
return props.fadeIn ? 0 : 1;
|
|
172
170
|
}, function (props) {
|
|
173
171
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
174
172
|
}, function (props) {
|
|
175
173
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
176
174
|
});
|
|
177
|
-
var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
178
|
-
return props.expanded && styled.css(
|
|
175
|
+
var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n margin-top: -26px;\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
|
|
176
|
+
return props.expanded && styled.css(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
|
|
179
177
|
}, function (props) {
|
|
180
178
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
181
179
|
}, function (props) {
|
|
182
180
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
|
|
183
181
|
}, function (props) {
|
|
184
|
-
return props.type === 'error' && styled.css(
|
|
182
|
+
return props.type === 'error' && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
185
183
|
});
|
|
186
184
|
|
|
187
185
|
var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
|
|
@@ -226,86 +224,84 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
226
224
|
inputIsEmpty = _useState2[0],
|
|
227
225
|
setInputIsEmpty = _useState2[1];
|
|
228
226
|
|
|
229
|
-
var _useState3 = React.useState(
|
|
227
|
+
var _useState3 = React.useState(value || defaultValue),
|
|
230
228
|
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
231
|
-
|
|
232
|
-
|
|
229
|
+
defaultInput = _useState4[0],
|
|
230
|
+
setDefaultInput = _useState4[1];
|
|
233
231
|
|
|
234
|
-
var _useState5 = React.useState(
|
|
232
|
+
var _useState5 = React.useState(''),
|
|
235
233
|
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
236
|
-
|
|
237
|
-
|
|
234
|
+
maxContentRows = _useState6[0],
|
|
235
|
+
setMaxContentRows = _useState6[1];
|
|
238
236
|
|
|
239
|
-
var _useState7 = React.useState(
|
|
237
|
+
var _useState7 = React.useState(false),
|
|
240
238
|
_useState8 = defaultTheme._slicedToArray(_useState7, 2),
|
|
241
|
-
|
|
242
|
-
|
|
239
|
+
expanded = _useState8[0],
|
|
240
|
+
setExpanded = _useState8[1];
|
|
243
241
|
|
|
244
242
|
var _useState9 = React.useState(''),
|
|
245
243
|
_useState10 = defaultTheme._slicedToArray(_useState9, 2),
|
|
246
|
-
|
|
247
|
-
|
|
244
|
+
maxHeight = _useState10[0],
|
|
245
|
+
setMaxHeight = _useState10[1];
|
|
248
246
|
|
|
249
|
-
var _useState11 = React.useState(
|
|
247
|
+
var _useState11 = React.useState(''),
|
|
250
248
|
_useState12 = defaultTheme._slicedToArray(_useState11, 2),
|
|
251
|
-
|
|
252
|
-
|
|
249
|
+
defaultHeight = _useState12[0],
|
|
250
|
+
setDefaultHeight = _useState12[1];
|
|
253
251
|
|
|
254
252
|
var _useState13 = React.useState(false),
|
|
255
253
|
_useState14 = defaultTheme._slicedToArray(_useState13, 2),
|
|
256
|
-
|
|
257
|
-
|
|
254
|
+
autoFocus = _useState14[0],
|
|
255
|
+
setAutoFocus = _useState14[1];
|
|
256
|
+
|
|
257
|
+
var _useState15 = React.useState(false),
|
|
258
|
+
_useState16 = defaultTheme._slicedToArray(_useState15, 2),
|
|
259
|
+
scrollHeightExceedsRows = _useState16[0],
|
|
260
|
+
setScrollHeightExceedsRows = _useState16[1];
|
|
258
261
|
|
|
259
262
|
var initialHeightRef = React.useRef(null);
|
|
260
263
|
|
|
261
|
-
var
|
|
262
|
-
|
|
263
|
-
uniqueId =
|
|
264
|
+
var _useState17 = React.useState(nanoid.nanoid()),
|
|
265
|
+
_useState18 = defaultTheme._slicedToArray(_useState17, 1),
|
|
266
|
+
uniqueId = _useState18[0];
|
|
264
267
|
|
|
265
268
|
var memoizedDescriptionToolTip = React.useMemo(function () {
|
|
266
269
|
return descriptionToolTip;
|
|
267
270
|
}, [descriptionToolTip]);
|
|
268
271
|
React.useEffect(function () {
|
|
269
272
|
setExpanded(false);
|
|
273
|
+
setDefaultInput(value || defaultValue);
|
|
270
274
|
}, [resetExpansion]);
|
|
271
275
|
React.useEffect(function () {
|
|
272
276
|
isExpanded(expanded);
|
|
273
277
|
}, [expanded]);
|
|
274
|
-
React.
|
|
275
|
-
setExpanded(false);
|
|
276
|
-
setAutoFocus(false);
|
|
278
|
+
React.useLayoutEffect(function () {
|
|
277
279
|
calculateRows();
|
|
278
|
-
|
|
280
|
+
setAutoFocus(false);
|
|
281
|
+
|
|
282
|
+
if (defaultValue !== null && defaultValue !== void 0 && defaultValue.length || (value === null || value === void 0 ? void 0 : value.length) != (defaultInput === null || defaultInput === void 0 ? void 0 : defaultInput.length)) {
|
|
283
|
+
calculateHeight();
|
|
284
|
+
}
|
|
279
285
|
}, [value, defaultValue, rows]);
|
|
280
286
|
React.useEffect(function () {
|
|
281
287
|
setAutoFocus(false);
|
|
282
288
|
initialHeightRef.current = null;
|
|
283
289
|
}, [rows]);
|
|
284
290
|
|
|
285
|
-
var
|
|
291
|
+
var handleTextAreaClick = function handleTextAreaClick() {
|
|
286
292
|
var textareaRefCurrent = textInputDomNode.current;
|
|
287
293
|
|
|
288
294
|
if (textareaRefCurrent !== null) {
|
|
289
295
|
textareaRefCurrent.style.height = "".concat(textareaRefCurrent.scrollHeight, "px");
|
|
290
296
|
}
|
|
291
|
-
|
|
292
|
-
if (scrollHeightExceedsRows && !expanded) {
|
|
293
|
-
setExpanded(true);
|
|
294
|
-
}
|
|
295
297
|
};
|
|
296
298
|
|
|
297
299
|
var handleTextAreaShowLess = function handleTextAreaShowLess() {
|
|
298
300
|
var textareaRefCurrent = textInputDomNode.current;
|
|
299
301
|
|
|
300
302
|
if (textareaRefCurrent !== null) {
|
|
301
|
-
|
|
302
|
-
textareaRefCurrent.style.height = "".concat(rows * 16, "px");
|
|
303
|
-
} else {
|
|
304
|
-
textareaRefCurrent.style.height = "".concat(textareaRefCurrent.scrollHeight, "px");
|
|
305
|
-
}
|
|
303
|
+
textareaRefCurrent.style.height = expanded ? "".concat(rows * 16, "px") : "".concat(textareaRefCurrent.scrollHeight, "px");
|
|
306
304
|
}
|
|
307
|
-
|
|
308
|
-
setExpanded(!expanded);
|
|
309
305
|
};
|
|
310
306
|
|
|
311
307
|
var calculateRows = function calculateRows() {
|
|
@@ -339,13 +335,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
339
335
|
initialHeightRef.current = newHeight;
|
|
340
336
|
}
|
|
341
337
|
|
|
342
|
-
setScrollHeightExceedsRows(newHeight > initialHeightRef.current);
|
|
343
|
-
|
|
344
|
-
if (newHeight > (initialHeightRef.current || 0)) {
|
|
345
|
-
setExpanded(true);
|
|
346
|
-
} else {
|
|
347
|
-
setExpanded(false);
|
|
348
|
-
}
|
|
338
|
+
setScrollHeightExceedsRows(newHeight > (initialHeightRef.current || 0));
|
|
349
339
|
}
|
|
350
340
|
};
|
|
351
341
|
|
|
@@ -403,16 +393,13 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
403
393
|
}
|
|
404
394
|
}
|
|
405
395
|
|
|
406
|
-
calculateHeight();
|
|
407
|
-
calculateRows();
|
|
408
|
-
|
|
409
396
|
_onChange(e);
|
|
410
397
|
},
|
|
411
398
|
onKeyDown: onKeyDown,
|
|
412
399
|
onBlur: onBlur,
|
|
413
400
|
noBorder: noBorder
|
|
414
401
|
}, rest, {
|
|
415
|
-
onClick:
|
|
402
|
+
onClick: handleTextAreaClick
|
|
416
403
|
})), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
|
|
417
404
|
disabled: disabled
|
|
418
405
|
}, React__default['default'].createElement(editNote.SvgEditNote, {
|
|
@@ -427,7 +414,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
427
414
|
}, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
|
|
428
415
|
onClick: showMore ? handleTextAreaShowLess : undefined,
|
|
429
416
|
expanded: expanded
|
|
430
|
-
}, !expanded
|
|
417
|
+
}, !expanded ? showMoreText : expanded ? showLessText : null));
|
|
431
418
|
};
|
|
432
419
|
|
|
433
420
|
if (hidden) return null;
|
|
@@ -454,7 +441,7 @@ TextArea.defaultProps = {
|
|
|
454
441
|
descriptionToolTip: '',
|
|
455
442
|
isExpanded: function isExpanded() {},
|
|
456
443
|
onChange: function onChange() {},
|
|
457
|
-
resetExpansion:
|
|
444
|
+
resetExpansion: ''
|
|
458
445
|
};
|
|
459
446
|
TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
460
447
|
value: defaultTheme.PropTypes.string,
|
|
@@ -489,7 +476,7 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
489
476
|
loadingIcon: defaultTheme.PropTypes.element,
|
|
490
477
|
successIcon: defaultTheme.PropTypes.element,
|
|
491
478
|
descriptionToolTip: defaultTheme.PropTypes.string,
|
|
492
|
-
resetExpansion: defaultTheme.PropTypes.
|
|
479
|
+
resetExpansion: defaultTheme.PropTypes.number
|
|
493
480
|
} : {};
|
|
494
481
|
|
|
495
482
|
exports.TextArea = TextArea;
|
package/inputs/TextArea/index.js
CHANGED
package/inputs/index.js
CHANGED
|
@@ -10,7 +10,7 @@ var CompactStarRating = require('../CompactStarRating-a754fc6f.js');
|
|
|
10
10
|
var CompactTextInput = require('../CompactTextInput-baf13d5c.js');
|
|
11
11
|
var MultiSelect = require('../MultiSelect-4b8d3d0d.js');
|
|
12
12
|
var Radio = require('../Radio-32d0513a.js');
|
|
13
|
-
var TextArea = require('../TextArea-
|
|
13
|
+
var TextArea = require('../TextArea-d88433b2.js');
|
|
14
14
|
var TextInput = require('../TextInput-0d109708.js');
|
|
15
15
|
var Switch = require('../Switch-4a41585f.js');
|
|
16
16
|
var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-24c88aaa.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-840a1473.js');
|
|
4
4
|
require('../../defaultTheme-ea44e34a.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -41,7 +41,7 @@ require('../../CompactStarRating-a754fc6f.js');
|
|
|
41
41
|
require('../../CompactTextInput-baf13d5c.js');
|
|
42
42
|
require('../../MultiSelect-4b8d3d0d.js');
|
|
43
43
|
require('../../Radio-32d0513a.js');
|
|
44
|
-
require('../../TextArea-
|
|
44
|
+
require('../../TextArea-d88433b2.js');
|
|
45
45
|
require('../../Switch-4a41585f.js');
|
|
46
46
|
require('../../ContextMenuItem-ba2b697e.js');
|
|
47
47
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Instructions = require('../../Instructions-
|
|
3
|
+
var Instructions = require('../../Instructions-f940b240.js');
|
|
4
4
|
require('../../defaultTheme-ea44e34a.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -25,7 +25,7 @@ require('../../react-select-creatable.esm-2f23d6c6.js');
|
|
|
25
25
|
require('react-dom');
|
|
26
26
|
require('../../close-ebf2f3cf.js');
|
|
27
27
|
require('../../expand-more-94585605.js');
|
|
28
|
-
require('../../TextArea-
|
|
28
|
+
require('../../TextArea-d88433b2.js');
|
|
29
29
|
require('../../useMergedRefs-b6d2f8fc.js');
|
|
30
30
|
require('../../edit-note-c47d292e.js');
|
|
31
31
|
|
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-840a1473.js');
|
|
6
6
|
var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
|
|
7
7
|
var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
|
|
8
|
-
var Instructions = require('../Instructions-
|
|
8
|
+
var Instructions = require('../Instructions-f940b240.js');
|
|
9
9
|
require('../defaultTheme-ea44e34a.js');
|
|
10
10
|
require('styled-components');
|
|
11
11
|
require('lodash');
|
|
@@ -45,7 +45,7 @@ require('../CompactStarRating-a754fc6f.js');
|
|
|
45
45
|
require('../CompactTextInput-baf13d5c.js');
|
|
46
46
|
require('../MultiSelect-4b8d3d0d.js');
|
|
47
47
|
require('../Radio-32d0513a.js');
|
|
48
|
-
require('../TextArea-
|
|
48
|
+
require('../TextArea-d88433b2.js');
|
|
49
49
|
require('../Switch-4a41585f.js');
|
|
50
50
|
require('../ContextMenuItem-ba2b697e.js');
|
|
51
51
|
|