@ntbjs/react-components 1.1.0-beta.83 → 1.1.0-beta.85
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-b7041e97.js → AssetGallery-4d3e41a9.js} +4 -4
- package/{CompactAutocompleteSelect-cb81bdbc.js → CompactAutocompleteSelect-d1a7836f.js} +10 -15
- package/{CompactTextInput-2e9d1a60.js → CompactTextInput-cae26b42.js} +98 -104
- package/{Instructions-ea2ce2bc.js → Instructions-4358acd3.js} +16 -9
- package/{TextArea-c2ebc42e.js → TextArea-e237b6e8.js} +29 -28
- package/{Tooltip-1e21edaa.js → Tooltip-1b7b0052.js} +1 -2
- package/data/Tooltip/index.js +1 -1
- package/data/index.js +1 -1
- package/inputs/CompactAutocompleteSelect/index.js +1 -1
- package/inputs/CompactTextInput/index.js +2 -2
- 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,19 +9,19 @@ var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
|
|
|
9
9
|
var ActionButton = require('./ActionButton-c3f5ed94.js');
|
|
10
10
|
require('./Button-432f87c6.js');
|
|
11
11
|
require('./Checkbox-85394137.js');
|
|
12
|
-
require('./CompactAutocompleteSelect-
|
|
12
|
+
require('./CompactAutocompleteSelect-d1a7836f.js');
|
|
13
13
|
require('./CompactStarRating-de1bcfe9.js');
|
|
14
|
-
require('./CompactTextInput-
|
|
14
|
+
require('./CompactTextInput-cae26b42.js');
|
|
15
15
|
require('./MultiSelect-01a257b8.js');
|
|
16
16
|
require('./Radio-c811ce4a.js');
|
|
17
|
-
require('./TextArea-
|
|
17
|
+
require('./TextArea-e237b6e8.js');
|
|
18
18
|
require('./Switch-3ac11c97.js');
|
|
19
19
|
require('./Alert-3e4f8be1.js');
|
|
20
20
|
require('./Badge-9bcebe96.js');
|
|
21
21
|
require('./Popover-d3a4b72e.js');
|
|
22
22
|
require('./Tab-bd0f3345.js');
|
|
23
23
|
require('./Tabs-bf42275e.js');
|
|
24
|
-
var Tooltip = require('./Tooltip-
|
|
24
|
+
var Tooltip = require('./Tooltip-1b7b0052.js');
|
|
25
25
|
var styled = require('styled-components');
|
|
26
26
|
var polished = require('polished');
|
|
27
27
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
@@ -73,7 +73,9 @@ var AutocompletSelect = styled__default['default'](Select__default['default']).a
|
|
|
73
73
|
var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n"])), sharedStyle, function (props) {
|
|
74
74
|
return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
|
|
75
75
|
});
|
|
76
|
-
var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n && {\n height: 22px;\n min-height: 22px;\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 2px 0 10px;\n cursor: pointer;\n border: 1px solid transparent;\n
|
|
76
|
+
var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n\n height: 22px;\n min-height: 22px;\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 2px 0 10px;\n cursor: pointer;\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"])), function (props) {
|
|
77
|
+
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
78
|
+
}, function (props) {
|
|
77
79
|
return props.state && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
|
|
78
80
|
return props.state === 'success' ? fadeIn : fadeOut;
|
|
79
81
|
});
|
|
@@ -93,8 +95,6 @@ var Control = styled__default['default'](Select.components.Control).attrs(defaul
|
|
|
93
95
|
return props.state === 'warning' && !props.isFocused && props.theme.themeProp('background', '#816600', '#F4E21E');
|
|
94
96
|
}, function (props) {
|
|
95
97
|
return props.state === 'error' && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
|
|
96
|
-
}, function (props) {
|
|
97
|
-
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
98
98
|
});
|
|
99
99
|
var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = 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) {
|
|
100
100
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
@@ -177,18 +177,14 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
|
|
|
177
177
|
cacheUnique = _useState8[0],
|
|
178
178
|
setCacheUnique = _useState8[1];
|
|
179
179
|
|
|
180
|
-
var Control$1 =
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
};
|
|
180
|
+
var Control$1 = function Control$1(props) {
|
|
181
|
+
return React__default['default'].createElement(Control, defaultTheme._extends({
|
|
182
|
+
className: "select-control",
|
|
183
|
+
edit: edit,
|
|
184
|
+
state: state
|
|
185
|
+
}, props));
|
|
186
|
+
};
|
|
188
187
|
|
|
189
|
-
control.displayName = 'ControlWrapper';
|
|
190
|
-
return control;
|
|
191
|
-
}, [state]);
|
|
192
188
|
var ValueContainer$1 = React.useMemo(function () {
|
|
193
189
|
var valueContainer = function valueContainer(props) {
|
|
194
190
|
return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(ValueContainer, defaultTheme._extends({
|
|
@@ -353,7 +349,6 @@ CompactAutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
353
349
|
noOptionsMessageFunc: defaultTheme.PropTypes.func,
|
|
354
350
|
readOnly: defaultTheme.PropTypes.bool,
|
|
355
351
|
edit: defaultTheme.PropTypes.bool,
|
|
356
|
-
success: defaultTheme.PropTypes.bool,
|
|
357
352
|
hidden: defaultTheme.PropTypes.bool,
|
|
358
353
|
error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
359
354
|
warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
@@ -11,7 +11,7 @@ require('./Badge-9bcebe96.js');
|
|
|
11
11
|
require('./Popover-d3a4b72e.js');
|
|
12
12
|
require('./Tab-bd0f3345.js');
|
|
13
13
|
require('./Tabs-bf42275e.js');
|
|
14
|
-
var Tooltip = require('./Tooltip-
|
|
14
|
+
var Tooltip = require('./Tooltip-1b7b0052.js');
|
|
15
15
|
var styled = require('styled-components');
|
|
16
16
|
|
|
17
17
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -54,7 +54,7 @@ function SvgLink(props) {
|
|
|
54
54
|
}, props), _ref);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
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;
|
|
57
|
+
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;
|
|
58
58
|
var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
|
|
59
59
|
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
60
60
|
}, function (props) {
|
|
@@ -85,10 +85,17 @@ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDe
|
|
|
85
85
|
}, function (props) {
|
|
86
86
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
87
87
|
});
|
|
88
|
-
var
|
|
89
|
-
return props.
|
|
88
|
+
var InputSuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n display: flex;\n justify-content: flex-end;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: relative;\n margin-top: -20px;\n margin-right: 8px;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
89
|
+
return props.fadeIn ? 0 : 1;
|
|
90
|
+
}, function (props) {
|
|
91
|
+
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
92
|
+
}, function (props) {
|
|
93
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
94
|
+
});
|
|
95
|
+
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n padding: 5px 10px 0 0;\n ", ";\n\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) {
|
|
96
|
+
return props.theme.themeProp('background', styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
|
|
90
97
|
return props.state === 'error' ? '#901d1d' : props.state === 'warning' ? '#816600' : props.theme.getColor('gray-700');
|
|
91
|
-
}), styled.css(
|
|
98
|
+
}), styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
|
|
92
99
|
return props.state === 'error' ? '#f7d5d0' : props.state === 'warning' ? '#fffebf' : props.theme.getColor('gray-100');
|
|
93
100
|
}));
|
|
94
101
|
}, function (props) {
|
|
@@ -98,12 +105,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
98
105
|
}, function (props) {
|
|
99
106
|
return props.state === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
100
107
|
});
|
|
101
|
-
var
|
|
102
|
-
return props.state === 'success' ? 0 : 1;
|
|
103
|
-
}, function (props) {
|
|
104
|
-
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
105
|
-
});
|
|
106
|
-
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 &&: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) {
|
|
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) {
|
|
107
109
|
return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
|
|
108
110
|
}, function (props) {
|
|
109
111
|
return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
@@ -116,9 +118,11 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
116
118
|
}, function (props) {
|
|
117
119
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
118
120
|
}, function (props) {
|
|
119
|
-
return props.hasLink && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n\n &&:read-only {\n cursor:
|
|
121
|
+
return props.hasLink && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n\n &&:read-only {\n cursor: default;\n }\n "])), function (props) {
|
|
120
122
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
121
123
|
});
|
|
124
|
+
}, function (props) {
|
|
125
|
+
return !props.readOnly && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
|
|
122
126
|
}, function (props) {
|
|
123
127
|
return props.state === 'warning' && props.theme.themeProp('background', '#634e01', '#fffde8');
|
|
124
128
|
}, function (props) {
|
|
@@ -126,66 +130,61 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
126
130
|
}, function (props) {
|
|
127
131
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
128
132
|
}, function (props) {
|
|
133
|
+
return props.hasLink && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n cursor: default;\n ", "\n }\n "])), function (props) {
|
|
134
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
135
|
+
});
|
|
136
|
+
}, function (props) {
|
|
137
|
+
return props.hasLink && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n\n &&:read-only {\n background: none !important;\n cursor: default;\n }\n "])));
|
|
138
|
+
}, InputIconContainer, function (props) {
|
|
129
139
|
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
130
140
|
}, function (props) {
|
|
131
|
-
return props.disabled && styled.css(
|
|
141
|
+
return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
|
|
132
142
|
}, function (props) {
|
|
133
143
|
return props.state === 'warning' && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
|
|
134
144
|
}, function (props) {
|
|
135
145
|
return props.state === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
|
|
136
|
-
},
|
|
137
|
-
return props.state === 'success' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
138
|
-
}, CheckIconContainer, function (props) {
|
|
146
|
+
}, function (props) {
|
|
139
147
|
return props.state === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
140
148
|
}, function (props) {
|
|
141
|
-
return !props.readOnly && styled.css(
|
|
149
|
+
return !props.readOnly && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
142
150
|
return props.theme.getColor('gray-600');
|
|
143
151
|
});
|
|
144
152
|
}, function (props) {
|
|
145
|
-
return props.state === 'warning' && styled.css(
|
|
153
|
+
return props.state === 'warning' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
146
154
|
return props.theme.getColor('signal-yellow-500');
|
|
147
155
|
});
|
|
148
156
|
}, function (props) {
|
|
149
|
-
return props.state === 'error' && styled.css(
|
|
157
|
+
return props.state === 'error' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
150
158
|
return props.theme.getColor('red-500');
|
|
151
159
|
});
|
|
152
160
|
}, function (props) {
|
|
153
|
-
return props.
|
|
154
|
-
}, function (props) {
|
|
155
|
-
return props.bold && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
|
|
161
|
+
return props.bold && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
|
|
156
162
|
});
|
|
157
|
-
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
163
|
+
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = 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) {
|
|
158
164
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('emerald-500'), 1);
|
|
159
165
|
});
|
|
160
166
|
|
|
161
|
-
var
|
|
162
|
-
var
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
descriptionText = _ref2.descriptionText,
|
|
183
|
-
bold = _ref2.bold,
|
|
184
|
-
hidden = _ref2.hidden,
|
|
185
|
-
onChangeProp = _ref2.onChange,
|
|
186
|
-
onFocusProp = _ref2.onFocus,
|
|
187
|
-
onBlurProp = _ref2.onBlur,
|
|
188
|
-
props = defaultTheme._objectWithoutProperties(_ref2, ["label", "type", "name", "defaultValue", "value", "placeholder", "link", "linkTarget", "autoSelect", "readOnly", "disabled", "edit", "state", "descriptionText", "bold", "hidden", "onChange", "onFocus", "onBlur"]);
|
|
167
|
+
var CompactTextInput = React__default['default'].forwardRef(function CompactTextInput(_ref, forwardedRef) {
|
|
168
|
+
var label = _ref.label,
|
|
169
|
+
type = _ref.type,
|
|
170
|
+
name = _ref.name,
|
|
171
|
+
defaultValue = _ref.defaultValue,
|
|
172
|
+
value = _ref.value,
|
|
173
|
+
placeholder = _ref.placeholder,
|
|
174
|
+
link = _ref.link,
|
|
175
|
+
linkTarget = _ref.linkTarget,
|
|
176
|
+
autoSelect = _ref.autoSelect,
|
|
177
|
+
readOnly = _ref.readOnly,
|
|
178
|
+
disabled = _ref.disabled,
|
|
179
|
+
edit = _ref.edit,
|
|
180
|
+
state = _ref.state,
|
|
181
|
+
descriptionText = _ref.descriptionText,
|
|
182
|
+
bold = _ref.bold,
|
|
183
|
+
hidden = _ref.hidden,
|
|
184
|
+
onChangeProp = _ref.onChange,
|
|
185
|
+
onFocusProp = _ref.onFocus,
|
|
186
|
+
onBlurProp = _ref.onBlur,
|
|
187
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["label", "type", "name", "defaultValue", "value", "placeholder", "link", "linkTarget", "autoSelect", "readOnly", "disabled", "edit", "state", "descriptionText", "bold", "hidden", "onChange", "onFocus", "onBlur"]);
|
|
189
188
|
|
|
190
189
|
var _useState = React.useState(nanoid.nanoid()),
|
|
191
190
|
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
@@ -196,11 +195,6 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
196
195
|
currentValue = _useState4[0],
|
|
197
196
|
setCurrentValue = _useState4[1];
|
|
198
197
|
|
|
199
|
-
var _useState5 = React.useState(false),
|
|
200
|
-
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
201
|
-
showPopover = _useState6[0],
|
|
202
|
-
setShowPopover = _useState6[1];
|
|
203
|
-
|
|
204
198
|
var onChange = React.useCallback(function (event) {
|
|
205
199
|
setCurrentValue(event.target.value);
|
|
206
200
|
|
|
@@ -216,16 +210,34 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
216
210
|
if (lodash.isFunction(onFocusProp)) {
|
|
217
211
|
onFocusProp(event);
|
|
218
212
|
}
|
|
219
|
-
|
|
220
|
-
setShowPopover(true);
|
|
221
213
|
}, [autoSelect, readOnly, onFocusProp]);
|
|
222
214
|
var onBlur = React.useCallback(function (event) {
|
|
223
215
|
if (lodash.isFunction(onBlurProp)) {
|
|
224
216
|
onBlurProp(event);
|
|
225
217
|
}
|
|
226
|
-
|
|
227
|
-
setShowPopover(false);
|
|
228
218
|
}, [onBlurProp]);
|
|
219
|
+
|
|
220
|
+
var input = function input() {
|
|
221
|
+
return React__default['default'].createElement(Input, {
|
|
222
|
+
ref: forwardedRef,
|
|
223
|
+
id: uniqueId,
|
|
224
|
+
type: type,
|
|
225
|
+
name: name,
|
|
226
|
+
readOnly: readOnly,
|
|
227
|
+
disabled: disabled,
|
|
228
|
+
edit: edit,
|
|
229
|
+
placeholder: placeholder,
|
|
230
|
+
defaultValue: defaultValue,
|
|
231
|
+
value: value,
|
|
232
|
+
state: state,
|
|
233
|
+
bold: bold,
|
|
234
|
+
hasLink: !lodash.isEmpty(link),
|
|
235
|
+
onFocus: onFocus,
|
|
236
|
+
onChange: onChange,
|
|
237
|
+
onBlur: onBlur
|
|
238
|
+
});
|
|
239
|
+
};
|
|
240
|
+
|
|
229
241
|
if (hidden) return null;
|
|
230
242
|
return React__default['default'].createElement(CompactTextInput$1, props, label && React__default['default'].createElement(Label, {
|
|
231
243
|
htmlFor: uniqueId,
|
|
@@ -233,52 +245,34 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
233
245
|
}, label, React__default['default'].createElement(SuccessContainer, null, state === 'loading' && React__default['default'].createElement(check._default, {
|
|
234
246
|
color: '#b0b6b9',
|
|
235
247
|
size: 15
|
|
236
|
-
}), state === 'success' && React__default['default'].createElement(check.SvgCheck, null))), React__default['default'].createElement(
|
|
237
|
-
condition: !lodash.isEmpty(link),
|
|
238
|
-
wrapper: function wrapper(children) {
|
|
239
|
-
return readOnly ? React__default['default'].createElement("a", null, children) : React__default['default'].createElement(Tooltip.Tooltip, {
|
|
240
|
-
visible: showPopover,
|
|
241
|
-
placement: 'bottom-start',
|
|
242
|
-
content: React__default['default'].createElement(LinkPopoverContainer, null, React__default['default'].createElement("a", {
|
|
243
|
-
href: link,
|
|
244
|
-
target: linkTarget,
|
|
245
|
-
rel: "noreferrer"
|
|
246
|
-
}, React__default['default'].createElement(SvgLink, null), currentValue))
|
|
247
|
-
}, children);
|
|
248
|
-
}
|
|
249
|
-
}, React__default['default'].createElement(ConditionalWrapper, {
|
|
250
|
-
condition: !lodash.isEmpty(descriptionText),
|
|
251
|
-
wrapper: function wrapper(children) {
|
|
252
|
-
return React__default['default'].createElement(Tooltip.Tooltip, {
|
|
253
|
-
content: descriptionText,
|
|
254
|
-
key: "tooltip1",
|
|
255
|
-
placement: "bottom-end",
|
|
256
|
-
visible: true,
|
|
257
|
-
zIndex: 999999
|
|
258
|
-
}, children);
|
|
259
|
-
}
|
|
260
|
-
}, React__default['default'].createElement(InputContainer, {
|
|
248
|
+
}), state === 'success' && React__default['default'].createElement(check.SvgCheck, null))), React__default['default'].createElement(InputContainer, {
|
|
261
249
|
$hasLabel: !lodash.isEmpty(label)
|
|
262
|
-
}, React__default['default'].createElement(
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
}), !readOnly && !disabled && React__default['default'].createElement(InputIconContainer, {
|
|
250
|
+
}, !descriptionText && !link && input(), descriptionText && React__default['default'].createElement(Tooltip.Tooltip, {
|
|
251
|
+
content: descriptionText,
|
|
252
|
+
key: "tooltip1",
|
|
253
|
+
placement: "bottom-end",
|
|
254
|
+
visible: true,
|
|
255
|
+
zIndex: 999999
|
|
256
|
+
}, input()), link && !readOnly && React__default['default'].createElement(Tooltip.Tooltip, {
|
|
257
|
+
content: React__default['default'].createElement(LinkPopoverContainer, null, React__default['default'].createElement("a", {
|
|
258
|
+
href: link,
|
|
259
|
+
target: linkTarget,
|
|
260
|
+
rel: "noreferrer"
|
|
261
|
+
}, React__default['default'].createElement(SvgLink, null), currentValue)),
|
|
262
|
+
key: "tooltip2",
|
|
263
|
+
placement: "bottom-start",
|
|
264
|
+
zIndex: 999999,
|
|
265
|
+
interactive: true
|
|
266
|
+
}, input()), !descriptionText && link && readOnly && input(), !readOnly && !disabled && React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(InputIconContainer, {
|
|
280
267
|
state: state
|
|
281
|
-
}, React__default['default'].createElement(editNote.SvgEditNote, null)))
|
|
268
|
+
}, React__default['default'].createElement(editNote.SvgEditNote, null)), lodash.isEmpty(label) && React__default['default'].createElement(InputSuccessContainer, null, state === 'loading' && React__default['default'].createElement(check._default, {
|
|
269
|
+
color: '#b0b6b9',
|
|
270
|
+
size: 15
|
|
271
|
+
}), state === 'success' && React__default['default'].createElement(check.SvgCheck, {
|
|
272
|
+
style: {
|
|
273
|
+
marginTop: '5px'
|
|
274
|
+
}
|
|
275
|
+
})))));
|
|
282
276
|
});
|
|
283
277
|
CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
284
278
|
label: defaultTheme.PropTypes.string,
|
|
@@ -4,8 +4,8 @@ var defaultTheme = require('./defaultTheme-50f2b88f.js');
|
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
7
|
-
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-
|
|
8
|
-
var TextArea = require('./TextArea-
|
|
7
|
+
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-d1a7836f.js');
|
|
8
|
+
var TextArea = require('./TextArea-e237b6e8.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 }; }
|
|
@@ -23,7 +23,7 @@ var TopBarContainer = styled__default['default'].div.attrs(defaultTheme.applyDef
|
|
|
23
23
|
return props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
|
|
24
24
|
});
|
|
25
25
|
var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n margin: 0 2px;\n"])));
|
|
26
|
-
var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n margin: 2px 2px -
|
|
26
|
+
var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n margin: 2px 2px -2px 2px;\n"])));
|
|
27
27
|
|
|
28
28
|
var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
|
|
29
29
|
var clickToAdd = _ref.clickToAdd,
|
|
@@ -45,9 +45,11 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
|
|
|
45
45
|
loadingMessageFunc = _ref.loadingMessageFunc,
|
|
46
46
|
placeholder = _ref.placeholder,
|
|
47
47
|
state = _ref.state,
|
|
48
|
-
success = _ref.success,
|
|
49
48
|
editWarning = _ref.editWarning,
|
|
50
|
-
|
|
49
|
+
rows = _ref.rows,
|
|
50
|
+
showMore = _ref.showMore,
|
|
51
|
+
showMoreText = _ref.showMoreText,
|
|
52
|
+
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"]);
|
|
51
53
|
|
|
52
54
|
var _useState = React.useState(false),
|
|
53
55
|
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
@@ -184,17 +186,20 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
|
|
|
184
186
|
state: state
|
|
185
187
|
}, React__default['default'].createElement(TextArea.TextArea, {
|
|
186
188
|
noBorder: true,
|
|
189
|
+
instructionsTextArea: true,
|
|
187
190
|
state: state,
|
|
188
191
|
lightBackground: background,
|
|
189
192
|
readOnly: readOnly,
|
|
190
193
|
disabled: disabled,
|
|
191
|
-
warningAlert: !success,
|
|
192
194
|
name: name,
|
|
193
195
|
editWarning: editWarning,
|
|
194
196
|
value: currentValue === null ? '' : currentValue,
|
|
195
197
|
onFocus: onFocus,
|
|
196
198
|
onChange: onChange,
|
|
197
199
|
onBlur: onBlur,
|
|
200
|
+
rows: rows,
|
|
201
|
+
showMore: showMore,
|
|
202
|
+
showMoreText: showMoreText,
|
|
198
203
|
icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null)
|
|
199
204
|
})));
|
|
200
205
|
});
|
|
@@ -205,11 +210,13 @@ Instructions.defaultProps = {
|
|
|
205
210
|
hidden: false,
|
|
206
211
|
editWarning: false,
|
|
207
212
|
disabled: false,
|
|
208
|
-
readOnly: false
|
|
213
|
+
readOnly: false,
|
|
214
|
+
state: ''
|
|
209
215
|
};
|
|
210
216
|
Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
211
217
|
name: defaultTheme.PropTypes.string,
|
|
212
218
|
placeholder: defaultTheme.PropTypes.string,
|
|
219
|
+
rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
|
|
213
220
|
selectedOption: defaultTheme.PropTypes.any,
|
|
214
221
|
loadOptions: defaultTheme.PropTypes.func,
|
|
215
222
|
loadingMessageFunc: defaultTheme.PropTypes.func,
|
|
@@ -218,9 +225,9 @@ Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
218
225
|
autoSelect: defaultTheme.PropTypes.bool,
|
|
219
226
|
readOnly: defaultTheme.PropTypes.bool,
|
|
220
227
|
disabled: defaultTheme.PropTypes.bool,
|
|
221
|
-
success: defaultTheme.PropTypes.bool,
|
|
222
|
-
error: defaultTheme.PropTypes.bool,
|
|
223
228
|
hidden: defaultTheme.PropTypes.bool,
|
|
229
|
+
showMore: defaultTheme.PropTypes.bool,
|
|
230
|
+
showMoreText: defaultTheme.PropTypes.string,
|
|
224
231
|
availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
|
|
225
232
|
lightBackground: defaultTheme.PropTypes.bool,
|
|
226
233
|
editWarning: defaultTheme.PropTypes.bool,
|
|
@@ -21,7 +21,7 @@ var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = de
|
|
|
21
21
|
}, function (props) {
|
|
22
22
|
return props.theme.themeProp('opacity', 0.6, 0.5);
|
|
23
23
|
});
|
|
24
|
-
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = 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:
|
|
24
|
+
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = 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: 15px;\n top: 10px;\n bottom: 0;\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n ", "\n ", "\n }\n"])), function (props) {
|
|
25
25
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
|
|
26
26
|
}, function (props) {
|
|
27
27
|
return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
|
|
@@ -72,7 +72,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
72
72
|
}, function (props) {
|
|
73
73
|
return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
|
|
74
74
|
}, function (props) {
|
|
75
|
-
return
|
|
75
|
+
return props.instructionsTextArea && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 15px;\n padding-right: 50px;\n "])));
|
|
76
76
|
}, function (props) {
|
|
77
77
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
|
|
78
78
|
}, function (props) {
|
|
@@ -90,7 +90,7 @@ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDe
|
|
|
90
90
|
return props.hasIcon && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
|
|
91
91
|
});
|
|
92
92
|
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = 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"])));
|
|
93
|
-
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top:
|
|
93
|
+
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = 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 ", "\n }\n"])), function (props) {
|
|
94
94
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
|
|
95
95
|
});
|
|
96
96
|
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = 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"])), function (props) {
|
|
@@ -98,7 +98,7 @@ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTh
|
|
|
98
98
|
}, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
99
99
|
return props.state === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
100
100
|
});
|
|
101
|
-
var Description = styled__default['default'].
|
|
101
|
+
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = 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
102
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
103
103
|
}, function (props) {
|
|
104
104
|
return (props.state === 'error-border' || props.state === 'error') && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
@@ -112,8 +112,8 @@ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDe
|
|
|
112
112
|
}, function (props) {
|
|
113
113
|
return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-100'));
|
|
114
114
|
});
|
|
115
|
-
var ShowMoreText = styled__default['default'].
|
|
116
|
-
return props.theme.themeProp('color', props.theme.getColor('
|
|
115
|
+
var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = 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) {
|
|
116
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
|
|
117
117
|
}, function (props) {
|
|
118
118
|
return props.state === 'error' && styled.css(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
119
119
|
});
|
|
@@ -130,7 +130,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
130
130
|
readOnly = _ref.readOnly,
|
|
131
131
|
edit = _ref.edit,
|
|
132
132
|
editWarning = _ref.editWarning,
|
|
133
|
-
isExpanded = _ref.isExpanded,
|
|
134
133
|
maxRows = _ref.maxRows,
|
|
135
134
|
showMore = _ref.showMore,
|
|
136
135
|
showMoreText = _ref.showMoreText,
|
|
@@ -145,7 +144,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
145
144
|
onBlur = _ref.onBlur,
|
|
146
145
|
lightBackground = _ref.lightBackground,
|
|
147
146
|
noBorder = _ref.noBorder,
|
|
148
|
-
|
|
147
|
+
instructionsTextArea = _ref.instructionsTextArea,
|
|
148
|
+
rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "editWarning", "maxRows", "showMore", "showMoreText", "autoComplete", "description", "state", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea"]);
|
|
149
149
|
|
|
150
150
|
var textInputRef = React.useRef(null);
|
|
151
151
|
|
|
@@ -174,17 +174,21 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
174
174
|
maxHeight = _useState10[0],
|
|
175
175
|
setMaxHeight = _useState10[1];
|
|
176
176
|
|
|
177
|
+
var _useState11 = React.useState(false),
|
|
178
|
+
_useState12 = defaultTheme._slicedToArray(_useState11, 2),
|
|
179
|
+
showReadMore = _useState12[0],
|
|
180
|
+
setShowReadMore = _useState12[1];
|
|
181
|
+
|
|
177
182
|
React.useEffect(function () {
|
|
178
183
|
setDefaultRows(rows);
|
|
179
184
|
}, [rows]);
|
|
180
185
|
|
|
181
|
-
var
|
|
182
|
-
|
|
183
|
-
uniqueId =
|
|
186
|
+
var _useState13 = React.useState(nanoid.nanoid()),
|
|
187
|
+
_useState14 = defaultTheme._slicedToArray(_useState13, 1),
|
|
188
|
+
uniqueId = _useState14[0];
|
|
184
189
|
|
|
185
190
|
var handleTextAreaChange = function handleTextAreaChange() {
|
|
186
191
|
setExpanded(!expanded);
|
|
187
|
-
isExpanded(expanded);
|
|
188
192
|
|
|
189
193
|
if (expanded === true) {
|
|
190
194
|
setContentRows(maxContentRows);
|
|
@@ -203,15 +207,14 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
203
207
|
|
|
204
208
|
if (textareaRefCurrent) {
|
|
205
209
|
var textarea = textareaRefCurrent.scrollHeight;
|
|
206
|
-
var rowsLimit = Math.floor(textarea / (lineheight *
|
|
207
|
-
|
|
208
|
-
var _maxHeight = rowsLimit * lineheight + 'em';
|
|
209
|
-
|
|
210
|
+
var rowsLimit = Math.floor(textarea / (lineheight * 12));
|
|
210
211
|
setMaxContentRows(rowsLimit);
|
|
211
|
-
setMaxHeight(_maxHeight);
|
|
212
212
|
|
|
213
213
|
if (rowsLimit > defaultRows) {
|
|
214
214
|
setExpanded(true);
|
|
215
|
+
setShowReadMore(true);
|
|
216
|
+
} else {
|
|
217
|
+
setShowReadMore(false);
|
|
215
218
|
}
|
|
216
219
|
|
|
217
220
|
if (typeof maxRows === 'function') {
|
|
@@ -220,12 +223,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
220
223
|
}
|
|
221
224
|
};
|
|
222
225
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
} else {
|
|
226
|
-
setExpanded(false);
|
|
227
|
-
}
|
|
228
|
-
}, [value]);
|
|
226
|
+
calculateRows();
|
|
227
|
+
}, [value, defaultRows]);
|
|
229
228
|
if (hidden) return null;
|
|
230
229
|
return React__default['default'].createElement(TextInput, {
|
|
231
230
|
disabled: disabled,
|
|
@@ -233,7 +232,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
233
232
|
state: state,
|
|
234
233
|
className: className,
|
|
235
234
|
style: style
|
|
236
|
-
},
|
|
235
|
+
}, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(Container, null, React__default['default'].createElement(TextInputField, defaultTheme._extends({
|
|
237
236
|
ref: forwardedRef ? forwardedRef : textInputRef,
|
|
238
237
|
rows: contentRows > rows ? contentRows : rows,
|
|
239
238
|
expanded: expanded,
|
|
@@ -247,6 +246,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
247
246
|
disabled: disabled,
|
|
248
247
|
edit: edit,
|
|
249
248
|
editWarning: editWarning,
|
|
249
|
+
instructionsTextArea: instructionsTextArea,
|
|
250
250
|
showMore: showMore,
|
|
251
251
|
state: state,
|
|
252
252
|
autoComplete: autoComplete,
|
|
@@ -269,7 +269,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
269
269
|
state: state
|
|
270
270
|
}, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
|
|
271
271
|
state: state
|
|
272
|
-
}, description), maxContentRows > defaultRows && showMore && React__default['default'].createElement(ShowMoreText, {
|
|
272
|
+
}, description), maxContentRows > defaultRows && showMore && showReadMore && React__default['default'].createElement(ShowMoreText, {
|
|
273
273
|
onClick: handleTextAreaChange
|
|
274
274
|
}, showMoreText));
|
|
275
275
|
});
|
|
@@ -282,10 +282,10 @@ TextArea.defaultProps = {
|
|
|
282
282
|
hidden: false,
|
|
283
283
|
showMore: false,
|
|
284
284
|
showMoreText: '',
|
|
285
|
-
state: ''
|
|
285
|
+
state: '',
|
|
286
|
+
instructionsTextArea: false
|
|
286
287
|
};
|
|
287
288
|
TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
288
|
-
success: defaultTheme.PropTypes.bool,
|
|
289
289
|
value: defaultTheme.PropTypes.string,
|
|
290
290
|
defaultValue: defaultTheme.PropTypes.string,
|
|
291
291
|
name: defaultTheme.PropTypes.string,
|
|
@@ -313,7 +313,8 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
313
313
|
noBorder: defaultTheme.PropTypes.bool,
|
|
314
314
|
maxRows: defaultTheme.PropTypes.func,
|
|
315
315
|
isExpanded: defaultTheme.PropTypes.func,
|
|
316
|
-
state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success'])
|
|
316
|
+
state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
|
|
317
|
+
instructionsTextArea: defaultTheme.PropTypes.bool
|
|
317
318
|
} : {};
|
|
318
319
|
|
|
319
320
|
exports.TextArea = TextArea;
|
|
@@ -46,8 +46,7 @@ Tooltip.defaultProps = {
|
|
|
46
46
|
content: 'Tooltip',
|
|
47
47
|
interactive: false,
|
|
48
48
|
placement: 'top',
|
|
49
|
-
duration: 350
|
|
50
|
-
trigger: 'mouseenter focus'
|
|
49
|
+
duration: 350
|
|
51
50
|
};
|
|
52
51
|
Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
53
52
|
content: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]).isRequired,
|
package/data/Tooltip/index.js
CHANGED
package/data/index.js
CHANGED
|
@@ -7,7 +7,7 @@ var Badge = require('../Badge-9bcebe96.js');
|
|
|
7
7
|
var Popover = require('../Popover-d3a4b72e.js');
|
|
8
8
|
var Tab = require('../Tab-bd0f3345.js');
|
|
9
9
|
var Tabs = require('../Tabs-bf42275e.js');
|
|
10
|
-
var Tooltip = require('../Tooltip-
|
|
10
|
+
var Tooltip = require('../Tooltip-1b7b0052.js');
|
|
11
11
|
require('../defaultTheme-50f2b88f.js');
|
|
12
12
|
require('styled-components');
|
|
13
13
|
require('react');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-
|
|
3
|
+
var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-d1a7836f.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var CompactTextInput = require('../../CompactTextInput-
|
|
3
|
+
var CompactTextInput = require('../../CompactTextInput-cae26b42.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -16,7 +16,7 @@ require('@tippyjs/react');
|
|
|
16
16
|
require('../../shift-away-subtle-cfdf1dbe.js');
|
|
17
17
|
require('../../Tab-bd0f3345.js');
|
|
18
18
|
require('../../Tabs-bf42275e.js');
|
|
19
|
-
require('../../Tooltip-
|
|
19
|
+
require('../../Tooltip-1b7b0052.js');
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
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-432f87c6.js');
|
|
7
7
|
var Checkbox = require('../Checkbox-85394137.js');
|
|
8
|
-
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-
|
|
8
|
+
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-d1a7836f.js');
|
|
9
9
|
var CompactStarRating = require('../CompactStarRating-de1bcfe9.js');
|
|
10
|
-
var CompactTextInput = require('../CompactTextInput-
|
|
10
|
+
var CompactTextInput = require('../CompactTextInput-cae26b42.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-e237b6e8.js');
|
|
14
14
|
var TextInput = require('../TextInput-8ea31a7b.js');
|
|
15
15
|
var Switch = require('../Switch-3ac11c97.js');
|
|
16
16
|
require('../defaultTheme-50f2b88f.js');
|
|
@@ -35,7 +35,7 @@ require('../Alert-3e4f8be1.js');
|
|
|
35
35
|
require('../Badge-9bcebe96.js');
|
|
36
36
|
require('../Tab-bd0f3345.js');
|
|
37
37
|
require('../Tabs-bf42275e.js');
|
|
38
|
-
require('../Tooltip-
|
|
38
|
+
require('../Tooltip-1b7b0052.js');
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var AssetGallery = require('../../AssetGallery-
|
|
3
|
+
var AssetGallery = require('../../AssetGallery-4d3e41a9.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
@@ -19,7 +19,7 @@ require('../../shift-away-subtle-cfdf1dbe.js');
|
|
|
19
19
|
require('../../ContextMenu-d088833b.js');
|
|
20
20
|
require('../../expand-more-94585605.js');
|
|
21
21
|
require('../../Checkbox-85394137.js');
|
|
22
|
-
require('../../CompactAutocompleteSelect-
|
|
22
|
+
require('../../CompactAutocompleteSelect-d1a7836f.js');
|
|
23
23
|
require('../../check-555d831b.js');
|
|
24
24
|
require('react-select');
|
|
25
25
|
require('react-select-async-paginate');
|
|
@@ -27,15 +27,15 @@ 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-cae26b42.js');
|
|
31
31
|
require('../../Alert-3e4f8be1.js');
|
|
32
32
|
require('../../Badge-9bcebe96.js');
|
|
33
33
|
require('../../Tab-bd0f3345.js');
|
|
34
34
|
require('../../Tabs-bf42275e.js');
|
|
35
|
-
require('../../Tooltip-
|
|
35
|
+
require('../../Tooltip-1b7b0052.js');
|
|
36
36
|
require('../../MultiSelect-01a257b8.js');
|
|
37
37
|
require('../../Radio-c811ce4a.js');
|
|
38
|
-
require('../../TextArea-
|
|
38
|
+
require('../../TextArea-e237b6e8.js');
|
|
39
39
|
require('../../Switch-3ac11c97.js');
|
|
40
40
|
require('../../warning-circle-24522402.js');
|
|
41
41
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Instructions = require('../../Instructions-
|
|
3
|
+
var Instructions = require('../../Instructions-4358acd3.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
7
7
|
require('react');
|
|
8
8
|
require('../../warning-circle-24522402.js');
|
|
9
|
-
require('../../CompactAutocompleteSelect-
|
|
9
|
+
require('../../CompactAutocompleteSelect-d1a7836f.js');
|
|
10
10
|
require('nanoid');
|
|
11
11
|
require('../../check-555d831b.js');
|
|
12
12
|
require('react-select');
|
|
@@ -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-e237b6e8.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-4d3e41a9.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-4358acd3.js');
|
|
9
9
|
require('../defaultTheme-50f2b88f.js');
|
|
10
10
|
require('styled-components');
|
|
11
11
|
require('react');
|
|
@@ -23,7 +23,7 @@ require('@tippyjs/react');
|
|
|
23
23
|
require('../shift-away-subtle-cfdf1dbe.js');
|
|
24
24
|
require('../expand-more-94585605.js');
|
|
25
25
|
require('../Checkbox-85394137.js');
|
|
26
|
-
require('../CompactAutocompleteSelect-
|
|
26
|
+
require('../CompactAutocompleteSelect-d1a7836f.js');
|
|
27
27
|
require('../check-555d831b.js');
|
|
28
28
|
require('react-select');
|
|
29
29
|
require('react-select-async-paginate');
|
|
@@ -31,15 +31,15 @@ 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-cae26b42.js');
|
|
35
35
|
require('../Alert-3e4f8be1.js');
|
|
36
36
|
require('../Badge-9bcebe96.js');
|
|
37
37
|
require('../Tab-bd0f3345.js');
|
|
38
38
|
require('../Tabs-bf42275e.js');
|
|
39
|
-
require('../Tooltip-
|
|
39
|
+
require('../Tooltip-1b7b0052.js');
|
|
40
40
|
require('../MultiSelect-01a257b8.js');
|
|
41
41
|
require('../Radio-c811ce4a.js');
|
|
42
|
-
require('../TextArea-
|
|
42
|
+
require('../TextArea-e237b6e8.js');
|
|
43
43
|
require('../Switch-3ac11c97.js');
|
|
44
44
|
require('../warning-circle-24522402.js');
|
|
45
45
|
|