@ntbjs/react-components 1.2.0-rc.82 → 1.2.0-rc.83
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/{ActionButton-46735b89.js → ActionButton-a9316775.js} +10 -11
- package/{Alert-13b75102.js → Alert-d69a3f95.js} +20 -24
- package/{AssetGallery-14556429.js → AssetGallery-26d11836.js} +338 -493
- package/{AssetPreviewTopBar-912c3469.js → AssetPreviewTopBar-c9e45035.js} +27 -31
- package/{Badge-aec841c8.js → Badge-cbbff6b8.js} +28 -49
- package/{Button-49f82b31.js → Button-39607724.js} +53 -65
- package/{Checkbox-68dc38a8.js → Checkbox-ad9c9e54.js} +30 -35
- package/{CompactAutocompleteSelect-ccde6a60.js → CompactAutocompleteSelect-b8718825.js} +82 -114
- package/{CompactStarRating-b1b15bd1.js → CompactStarRating-bbe8800b.js} +71 -87
- package/{CompactTextInput-9b36b1b1.js → CompactTextInput-72224756.js} +67 -79
- package/{ContextMenu-4ec3d9f3.js → ContextMenu-4eb8fdc5.js} +6 -6
- package/{ContextMenuItem-ba2b697e.js → ContextMenuItem-c536b460.js} +22 -26
- package/{InputGroup-49fbc423.js → InputGroup-a89a0ea3.js} +6 -6
- package/{Instructions-86834a28.js → Instructions-cfb1dcd7.js} +66 -81
- package/{MultiLevelCheckboxSelect-448cd692.js → MultiLevelCheckboxSelect-654c291b.js} +102 -164
- package/{MultiSelect-efd60232.js → MultiSelect-149a817b.js} +71 -101
- package/{Popover-569cd272.js → Popover-c5e425a7.js} +19 -21
- package/{Radio-32d0513a.js → Radio-55db4781.js} +21 -22
- package/{SectionSeparator-259a22ed.js → SectionSeparator-af8dc1ce.js} +6 -6
- package/{Switch-4a41585f.js → Switch-04ecd8d0.js} +25 -27
- package/{Tab-f499ecbc.js → Tab-e43241f0.js} +7 -7
- package/{Tabs-3c6c784d.js → Tabs-21e0079f.js} +23 -37
- package/{TextArea-767dc470.js → TextArea-c2620d92.js} +73 -97
- package/{TextInput-0d109708.js → TextInput-9a995449.js} +41 -48
- package/{Tooltip-66daf6e3.js → Tooltip-a68a7e49.js} +13 -13
- package/{VerificationStatusIcon-6fe95a92.js → VerificationStatusIcon-3bae6e2f.js} +20 -30
- package/{close-ebf2f3cf.js → close-1751121a.js} +8 -12
- package/data/Alert/index.js +2 -2
- package/data/Badge/index.js +2 -2
- package/data/Popover/index.js +3 -3
- package/data/Tab/index.js +2 -2
- package/data/Tabs/index.js +3 -3
- package/data/Tooltip/index.js +3 -3
- package/data/index.js +9 -9
- package/{defaultTheme-ea44e34a.js → defaultTheme-cd01e6c2.js} +212 -260
- package/edit-note-cefe2215.js +37 -0
- package/{expand-more-94585605.js → expand-more-d74e2bd2.js} +8 -12
- package/inputs/ActionButton/index.js +2 -2
- package/inputs/Button/index.js +6 -6
- package/inputs/Checkbox/index.js +2 -2
- package/inputs/CompactAutocompleteSelect/index.js +13 -13
- package/inputs/CompactStarRating/index.js +10 -10
- package/inputs/CompactTextInput/index.js +11 -11
- package/inputs/MultiSelect/index.js +4 -4
- package/inputs/Radio/index.js +2 -2
- package/inputs/Switch/index.js +2 -2
- package/inputs/TextArea/index.js +11 -11
- package/inputs/TextInput/index.js +3 -3
- package/inputs/index.js +28 -28
- package/layout/InputGroup/index.js +2 -2
- package/layout/SectionSeparator/index.js +2 -2
- package/layout/index.js +3 -3
- package/package.json +3 -3
- package/{react-select-creatable.esm-2f23d6c6.js → react-select-creatable.esm-66ca61dc.js} +1470 -1272
- package/{shift-away-subtle-0bed9a3c.js → shift-away-subtle-631cd794.js} +1 -1
- package/ssr/index.js +1 -3
- package/{warning-circle-24522402.js → warning-circle-478e65cc.js} +8 -12
- package/widgets/AssetGallery/index.js +31 -31
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
- package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
- package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +6 -6
- package/widgets/ContextMenu/index.js +2 -2
- package/widgets/Instructions/index.js +17 -17
- package/widgets/index.js +33 -33
- package/edit-note-c47d292e.js +0 -41
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-cd01e6c2.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
|
|
6
6
|
var nanoid = require('nanoid');
|
|
7
|
-
require('./Alert-
|
|
8
|
-
require('./Badge-
|
|
9
|
-
require('./Popover-
|
|
10
|
-
require('./Tab-
|
|
11
|
-
require('./Tabs-
|
|
12
|
-
var Tooltip = require('./Tooltip-
|
|
13
|
-
require('./VerificationStatusIcon-
|
|
14
|
-
var editNote = require('./edit-note-
|
|
7
|
+
require('./Alert-d69a3f95.js');
|
|
8
|
+
require('./Badge-cbbff6b8.js');
|
|
9
|
+
require('./Popover-c5e425a7.js');
|
|
10
|
+
require('./Tab-e43241f0.js');
|
|
11
|
+
require('./Tabs-21e0079f.js');
|
|
12
|
+
var Tooltip = require('./Tooltip-a68a7e49.js');
|
|
13
|
+
require('./VerificationStatusIcon-3bae6e2f.js');
|
|
14
|
+
var editNote = require('./edit-note-cefe2215.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 }; }
|
|
@@ -28,12 +28,12 @@ var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = de
|
|
|
28
28
|
}, function (props) {
|
|
29
29
|
return props.theme.themeProp('opacity', 0.6, 0.5);
|
|
30
30
|
});
|
|
31
|
-
var InputIconContainer = styled__default[
|
|
31
|
+
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 > .smallPadingIcon {\n padding: 4px;\n width: 15px;\n height: 15px;\n border-radius: 5px;\n opacity: 1;\n margin-top: -5px;\n ", "\n }\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n\n ", "\n }\n"])), function (props) {
|
|
32
32
|
return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
|
|
33
33
|
}, function (props) {
|
|
34
34
|
return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
|
|
35
35
|
});
|
|
36
|
-
var TextInputField = styled__default[
|
|
36
|
+
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 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\n\n &&:hover:not(:focus) {\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\n \n }\n"])), function (props) {
|
|
37
37
|
return props.borderRadius && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
|
|
38
38
|
}, function (props) {
|
|
39
39
|
return props.showMore && !props.expanded && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])));
|
|
@@ -128,7 +128,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
128
128
|
}, function (props) {
|
|
129
129
|
return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#2F2402', '#FFF3A7');
|
|
130
130
|
});
|
|
131
|
-
var TextInputLabel = styled__default[
|
|
131
|
+
var TextInputLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = 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\n ", "\n content: \"\";\n\n ", "\n"])), function (props) {
|
|
132
132
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
|
|
133
133
|
}, placeholderBaseStyle, function (props) {
|
|
134
134
|
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%)"));
|
|
@@ -139,32 +139,32 @@ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDe
|
|
|
139
139
|
}, function (props) {
|
|
140
140
|
return props.hasIcon && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
|
|
141
141
|
});
|
|
142
|
-
var TextInputFieldIcon = styled__default[
|
|
143
|
-
var TextInputFieldIconAlert = styled__default[
|
|
142
|
+
var TextInputFieldIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = 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"])));
|
|
143
|
+
var TextInputFieldIconAlert = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n display: flex;\n padding: 0 10px 0 30px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n svg {\n margin-top: 11px;\n width: 15px;\n }\n"])), function (props) {
|
|
144
144
|
return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
|
|
145
145
|
});
|
|
146
|
-
var TextInput = styled__default[
|
|
146
|
+
var TextInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = 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) {
|
|
147
147
|
return props.readOnly && styled.css(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
|
|
148
148
|
}, function (props) {
|
|
149
149
|
return props.disabled && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
150
150
|
}, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
151
151
|
return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
152
152
|
});
|
|
153
|
-
var Description = styled__default[
|
|
153
|
+
var Description = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject39 || (_templateObject39 = 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) {
|
|
154
154
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
155
155
|
}, function (props) {
|
|
156
156
|
return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
|
|
157
157
|
}, function (props) {
|
|
158
158
|
return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
159
159
|
});
|
|
160
|
-
var SuccessContainer = styled__default[
|
|
160
|
+
var SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = 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) {
|
|
161
161
|
return props.fadeIn ? 0 : 1;
|
|
162
162
|
}, function (props) {
|
|
163
163
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
164
164
|
}, function (props) {
|
|
165
165
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
166
166
|
});
|
|
167
|
-
var ShowMoreText = styled__default[
|
|
167
|
+
var ShowMoreText = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject43 || (_templateObject43 = 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) {
|
|
168
168
|
return props.expanded && styled.css(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
|
|
169
169
|
}, function (props) {
|
|
170
170
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
@@ -174,142 +174,122 @@ var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaul
|
|
|
174
174
|
return props.type === 'error' && styled.css(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
175
175
|
});
|
|
176
176
|
|
|
177
|
-
var
|
|
177
|
+
var _excluded = ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius"];
|
|
178
|
+
var TextArea = React__default["default"].forwardRef(function TextArea(_ref, forwardedRef) {
|
|
178
179
|
var value = _ref.value,
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
180
|
+
defaultValue = _ref.defaultValue,
|
|
181
|
+
name = _ref.name,
|
|
182
|
+
label = _ref.label,
|
|
183
|
+
placeholder = _ref.placeholder,
|
|
184
|
+
required = _ref.required,
|
|
185
|
+
disabled = _ref.disabled,
|
|
186
|
+
hidden = _ref.hidden,
|
|
187
|
+
readOnly = _ref.readOnly,
|
|
188
|
+
edit = _ref.edit,
|
|
189
|
+
showMore = _ref.showMore,
|
|
190
|
+
showMoreText = _ref.showMoreText,
|
|
191
|
+
showLessText = _ref.showLessText,
|
|
192
|
+
autoComplete = _ref.autoComplete,
|
|
193
|
+
description = _ref.description,
|
|
194
|
+
type = _ref.type,
|
|
195
|
+
icon = _ref.icon,
|
|
196
|
+
rows = _ref.rows,
|
|
197
|
+
className = _ref.className,
|
|
198
|
+
style = _ref.style,
|
|
199
|
+
_onChange = _ref.onChange,
|
|
200
|
+
onBlur = _ref.onBlur,
|
|
201
|
+
lightBackground = _ref.lightBackground,
|
|
202
|
+
noBorder = _ref.noBorder,
|
|
203
|
+
instructionsTextArea = _ref.instructionsTextArea,
|
|
204
|
+
loadingIcon = _ref.loadingIcon,
|
|
205
|
+
successIcon = _ref.successIcon,
|
|
206
|
+
padding = _ref.padding,
|
|
207
|
+
descriptionToolTip = _ref.descriptionToolTip,
|
|
208
|
+
borderRadius = _ref.borderRadius,
|
|
209
|
+
rest = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
210
210
|
var textInputDomNode = React.useRef(null);
|
|
211
211
|
var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
|
|
212
|
-
|
|
213
212
|
var _useState = React.useState(!(value || defaultValue)),
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
213
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
214
|
+
inputIsEmpty = _useState2[0],
|
|
215
|
+
setInputIsEmpty = _useState2[1];
|
|
218
216
|
var _useState3 = React.useState(value || defaultValue),
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
217
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
218
|
+
defaultInput = _useState4[0],
|
|
219
|
+
setDefaultInput = _useState4[1];
|
|
223
220
|
var _useState5 = React.useState(false),
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
221
|
+
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
222
|
+
expanded = _useState6[0],
|
|
223
|
+
setExpanded = _useState6[1];
|
|
228
224
|
var _useState7 = React.useState(false),
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
225
|
+
_useState8 = defaultTheme._slicedToArray(_useState7, 2),
|
|
226
|
+
autoFocus = _useState8[0],
|
|
227
|
+
setAutoFocus = _useState8[1];
|
|
233
228
|
var _useState9 = React.useState(nanoid.nanoid()),
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
229
|
+
_useState10 = defaultTheme._slicedToArray(_useState9, 1),
|
|
230
|
+
uniqueId = _useState10[0];
|
|
237
231
|
var defaultHeight = rows * 16;
|
|
238
232
|
var memoizedDescriptionToolTip = React.useMemo(function () {
|
|
239
233
|
return descriptionToolTip;
|
|
240
234
|
}, [descriptionToolTip]);
|
|
241
|
-
|
|
242
235
|
var defaultHeightFunction = function defaultHeightFunction() {
|
|
243
236
|
var textareaRefCurrent = textInputDomNode.current;
|
|
244
237
|
textareaRefCurrent.style.height = "".concat(defaultHeight, "px");
|
|
245
238
|
};
|
|
246
|
-
|
|
247
239
|
var adjustHeighToScroll = function adjustHeighToScroll() {
|
|
248
240
|
var textareaRefCurrent = textInputDomNode === null || textInputDomNode === void 0 ? void 0 : textInputDomNode.current;
|
|
249
|
-
|
|
250
241
|
if (textareaRefCurrent !== null) {
|
|
251
242
|
textareaRefCurrent.style.height = 'auto';
|
|
252
243
|
var newHeight = textareaRefCurrent.scrollHeight;
|
|
253
244
|
textareaRefCurrent.style.height = "".concat(newHeight, "px");
|
|
254
245
|
}
|
|
255
246
|
};
|
|
256
|
-
|
|
257
247
|
React.useEffect(function () {
|
|
258
248
|
defaultHeightFunction();
|
|
259
249
|
setDefaultInput(value || defaultValue);
|
|
260
250
|
setExpanded(false);
|
|
261
251
|
adjustHeighToScroll();
|
|
262
|
-
|
|
263
252
|
if ((value || defaultValue) != defaultInput) {
|
|
264
253
|
adjustHeighToScroll();
|
|
265
254
|
}
|
|
266
255
|
}, []);
|
|
267
256
|
React.useEffect(function () {
|
|
268
257
|
defaultHeightFunction();
|
|
269
|
-
|
|
270
258
|
if ((value || defaultValue) != defaultInput) {
|
|
271
259
|
adjustHeighToScroll();
|
|
272
260
|
}
|
|
273
261
|
}, [value, defaultValue]);
|
|
274
|
-
|
|
275
262
|
var handleTextAreaClick = function handleTextAreaClick() {
|
|
276
263
|
var textareaRefCurrent = textInputDomNode.current;
|
|
277
|
-
|
|
278
264
|
if (textareaRefCurrent !== null) {
|
|
279
265
|
textareaRefCurrent.style.height = "".concat(textareaRefCurrent.scrollHeight, "px");
|
|
280
266
|
}
|
|
281
|
-
|
|
282
267
|
if (!expanded) {
|
|
283
268
|
setExpanded(true);
|
|
284
269
|
}
|
|
285
270
|
};
|
|
286
|
-
|
|
287
271
|
var handleTextAreaShowLess = function handleTextAreaShowLess() {
|
|
288
272
|
var textareaRefCurrent = textInputDomNode.current;
|
|
289
|
-
|
|
290
273
|
if (textareaRefCurrent !== null) {
|
|
291
274
|
textareaRefCurrent.style.height = expanded ? "".concat(rows * 16, "px") : "".concat(textareaRefCurrent.scrollHeight, "px");
|
|
292
275
|
}
|
|
293
|
-
|
|
294
276
|
setExpanded(!expanded);
|
|
295
277
|
};
|
|
296
|
-
|
|
297
278
|
var onKeyDown = React.useCallback(function (event) {
|
|
298
279
|
if (event.key === 'Enter') {
|
|
299
280
|
event.stopPropagation();
|
|
300
281
|
}
|
|
301
282
|
}, []);
|
|
302
|
-
|
|
303
283
|
var input = function input() {
|
|
304
|
-
return React__default[
|
|
284
|
+
return React__default["default"].createElement(TextInput, {
|
|
305
285
|
disabled: disabled,
|
|
306
286
|
readOnly: readOnly,
|
|
307
287
|
type: type,
|
|
308
288
|
className: className,
|
|
309
289
|
style: style
|
|
310
|
-
}, React__default[
|
|
290
|
+
}, React__default["default"].createElement(TextInputFieldIconAlert, {
|
|
311
291
|
type: type
|
|
312
|
-
}, icon), React__default[
|
|
292
|
+
}, icon), React__default["default"].createElement(TextInputField, defaultTheme._extends({
|
|
313
293
|
autoFocus: autoFocus,
|
|
314
294
|
borderRadius: borderRadius,
|
|
315
295
|
ref: textInputRef,
|
|
@@ -337,18 +317,15 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
337
317
|
onChange: function onChange(e) {
|
|
338
318
|
if (e.target.value) {
|
|
339
319
|
setInputIsEmpty(false);
|
|
340
|
-
|
|
341
320
|
if (!autoFocus) {
|
|
342
321
|
setAutoFocus(true);
|
|
343
322
|
}
|
|
344
323
|
} else {
|
|
345
324
|
setInputIsEmpty(true);
|
|
346
|
-
|
|
347
325
|
if (!autoFocus) {
|
|
348
326
|
setAutoFocus(true);
|
|
349
327
|
}
|
|
350
328
|
}
|
|
351
|
-
|
|
352
329
|
_onChange(e);
|
|
353
330
|
},
|
|
354
331
|
onKeyDown: onKeyDown,
|
|
@@ -356,25 +333,24 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
356
333
|
noBorder: noBorder
|
|
357
334
|
}, rest, {
|
|
358
335
|
onClick: handleTextAreaClick
|
|
359
|
-
})), (type === 'loading' || type === 'success') && React__default[
|
|
336
|
+
})), (type === 'loading' || type === 'success') && React__default["default"].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default["default"].createElement(InputIconContainer, {
|
|
360
337
|
disabled: disabled
|
|
361
|
-
}, React__default[
|
|
338
|
+
}, React__default["default"].createElement(editNote.SvgEditNote, {
|
|
362
339
|
className: padding === 'small' ? 'smallPadingIcon' : undefined
|
|
363
|
-
})), label && React__default[
|
|
340
|
+
})), label && React__default["default"].createElement(TextInputLabel, {
|
|
364
341
|
htmlFor: "text-input-".concat(uniqueId),
|
|
365
342
|
hasPlaceholder: Boolean(placeholder),
|
|
366
343
|
hasIcon: Boolean(icon),
|
|
367
344
|
inputIsEmpty: inputIsEmpty
|
|
368
|
-
}, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default[
|
|
345
|
+
}, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default["default"].createElement(Description, {
|
|
369
346
|
type: type
|
|
370
|
-
}, description), showMore && React__default[
|
|
347
|
+
}, description), showMore && React__default["default"].createElement(ShowMoreText, {
|
|
371
348
|
onClick: showMore ? handleTextAreaShowLess : undefined,
|
|
372
349
|
expanded: expanded
|
|
373
350
|
}, !expanded ? showMoreText : expanded ? showLessText : null));
|
|
374
351
|
};
|
|
375
|
-
|
|
376
352
|
if (hidden) return null;
|
|
377
|
-
return React__default[
|
|
353
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default["default"].createElement("div", null, React__default["default"].createElement(Tooltip.Tooltip, {
|
|
378
354
|
content: memoizedDescriptionToolTip,
|
|
379
355
|
key: "tooltipTextArea1",
|
|
380
356
|
placement: "bottom-end",
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-cd01e6c2.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
|
|
7
7
|
var lodash = require('lodash');
|
|
8
|
-
var editNote = require('./edit-note-
|
|
8
|
+
var editNote = require('./edit-note-cefe2215.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 }; }
|
|
@@ -15,7 +15,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
15
15
|
|
|
16
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
|
|
17
17
|
var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
|
|
18
|
-
var Adornment = styled__default[
|
|
18
|
+
var Adornment = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: initial;\n padding: 13px 10px;\n\n ", "\n ", "\n border: 1px solid;\n ", "\n border-radius: 3px;\n ", "\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem;\n\n ", "\n ", "\n"])), function (props) {
|
|
19
19
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
20
20
|
}, function (props) {
|
|
21
21
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
@@ -28,17 +28,17 @@ var Adornment = styled__default['default'].div.attrs(defaultTheme.applyDefaultTh
|
|
|
28
28
|
}, function (props) {
|
|
29
29
|
return props.error && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
|
|
30
30
|
});
|
|
31
|
-
var TextInputWrapper = styled__default[
|
|
31
|
+
var TextInputWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-content: center;\n\n &:focus-within {\n ", " {\n outline: none;\n ", "\n }\n }\n"])), Adornment, function (props) {
|
|
32
32
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1);
|
|
33
33
|
});
|
|
34
|
-
var InputIconContainer = styled__default[
|
|
34
|
+
var InputIconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n padding-right: 4px;\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n color: ", ";\n\n ", "\n\n ", "\n\n > svg {\n width: 12px;\n }\n"])), function (props) {
|
|
35
35
|
return props.theme.getColor('gray-400');
|
|
36
36
|
}, function (props) {
|
|
37
37
|
return props.warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43');
|
|
38
38
|
}, function (props) {
|
|
39
39
|
return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
40
40
|
});
|
|
41
|
-
var TextInputField = styled__default[
|
|
41
|
+
var TextInputField = styled__default["default"].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: 1;\n padding: 13px 10px;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank;\n margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank;\n ", "\n ", "\n border: 1px solid;\n ", ";\n\n ", "\n\n ", "\n ", "\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n transition: opacity 350ms;\n }\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n ", "\n"])), function (props) {
|
|
42
42
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
43
43
|
}, function (props) {
|
|
44
44
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
@@ -63,7 +63,7 @@ var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDe
|
|
|
63
63
|
}, function (props) {
|
|
64
64
|
return props.readOnly && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n outline: none;\n "])));
|
|
65
65
|
});
|
|
66
|
-
var TextInputLabel = styled__default[
|
|
66
|
+
var TextInputLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 15px;\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\n\n ", "\n"])), function (props) {
|
|
67
67
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
68
68
|
}, function (props) {
|
|
69
69
|
return props.theme.themeProp('opacity', 0.6, 0.5);
|
|
@@ -74,8 +74,8 @@ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDe
|
|
|
74
74
|
}, function (props) {
|
|
75
75
|
return props.hasIcon && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
|
|
76
76
|
});
|
|
77
|
-
var TextInputFieldIcon = styled__default[
|
|
78
|
-
var TextInput$1 = styled__default[
|
|
77
|
+
var TextInputFieldIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = 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"])));
|
|
78
|
+
var TextInput$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = 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 \n}\n"])), function (props) {
|
|
79
79
|
return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n opacity: 0.5;\n cursor: not-allowed;\n > * {\n pointer-events: none;\n }\n "])));
|
|
80
80
|
}, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
81
81
|
return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
@@ -84,7 +84,7 @@ var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefault
|
|
|
84
84
|
}, function (props) {
|
|
85
85
|
return props.warning && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.getColor('orange-500'));
|
|
86
86
|
});
|
|
87
|
-
var Description = styled__default[
|
|
87
|
+
var Description = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = 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) {
|
|
88
88
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
89
89
|
}, function (props) {
|
|
90
90
|
return props.error && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
@@ -92,72 +92,65 @@ var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTh
|
|
|
92
92
|
return props.warning && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
|
|
93
93
|
});
|
|
94
94
|
|
|
95
|
-
var
|
|
95
|
+
var _excluded = ["value", "defaultValue", "name", "label", "placeholder", "type", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "adornments", "className", "style", "onChange", "onBlur", "noBorder"];
|
|
96
|
+
var TextInput = React__default["default"].forwardRef(function TextInput(_ref, forwardedRef) {
|
|
96
97
|
var value = _ref.value,
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
98
|
+
defaultValue = _ref.defaultValue,
|
|
99
|
+
name = _ref.name,
|
|
100
|
+
label = _ref.label,
|
|
101
|
+
placeholder = _ref.placeholder,
|
|
102
|
+
type = _ref.type,
|
|
103
|
+
required = _ref.required,
|
|
104
|
+
disabled = _ref.disabled,
|
|
105
|
+
readOnly = _ref.readOnly,
|
|
106
|
+
autoComplete = _ref.autoComplete,
|
|
107
|
+
description = _ref.description,
|
|
108
|
+
error = _ref.error,
|
|
109
|
+
warning = _ref.warning,
|
|
110
|
+
icon = _ref.icon,
|
|
111
|
+
adornments = _ref.adornments,
|
|
112
|
+
className = _ref.className,
|
|
113
|
+
style = _ref.style,
|
|
114
|
+
onChange = _ref.onChange,
|
|
115
|
+
onBlur = _ref.onBlur,
|
|
116
|
+
noBorder = _ref.noBorder,
|
|
117
|
+
rest = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
118
118
|
var textInputDomNode = React.useRef(null);
|
|
119
119
|
var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
|
|
120
|
-
|
|
121
120
|
var _useState = React.useState(nanoid.nanoid()),
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
121
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
122
|
+
uniqueId = _useState2[0];
|
|
125
123
|
var hasError = React.useMemo(function () {
|
|
126
124
|
if (lodash.isBoolean(error)) {
|
|
127
125
|
return error;
|
|
128
126
|
}
|
|
129
|
-
|
|
130
127
|
return !lodash.isEmpty(error);
|
|
131
128
|
}, [error]);
|
|
132
129
|
var hasWarning = React.useMemo(function () {
|
|
133
130
|
if (lodash.isBoolean(warning)) {
|
|
134
131
|
return warning;
|
|
135
132
|
}
|
|
136
|
-
|
|
137
133
|
return !lodash.isEmpty(warning);
|
|
138
134
|
}, [warning]);
|
|
139
135
|
var descriptionText = React.useMemo(function () {
|
|
140
136
|
if (!lodash.isEmpty(error)) {
|
|
141
137
|
return error;
|
|
142
138
|
}
|
|
143
|
-
|
|
144
139
|
if (!lodash.isEmpty(warning)) {
|
|
145
140
|
return warning;
|
|
146
141
|
}
|
|
147
|
-
|
|
148
142
|
if (!lodash.isEmpty(description)) {
|
|
149
143
|
return description;
|
|
150
144
|
}
|
|
151
|
-
|
|
152
145
|
return null;
|
|
153
146
|
}, [description, error, warning]);
|
|
154
|
-
return React__default[
|
|
147
|
+
return React__default["default"].createElement(TextInput$1, {
|
|
155
148
|
error: hasError,
|
|
156
149
|
disabled: disabled,
|
|
157
150
|
warning: hasWarning,
|
|
158
151
|
className: className,
|
|
159
152
|
style: style
|
|
160
|
-
}, typeof icon !== 'undefined' && React__default[
|
|
153
|
+
}, typeof icon !== 'undefined' && React__default["default"].createElement(TextInputFieldIcon, null, icon), React__default["default"].createElement(TextInputWrapper, null, typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 && React__default["default"].createElement(Adornment, {
|
|
161
154
|
htmlFor: "text-input-".concat(uniqueId),
|
|
162
155
|
error: hasError,
|
|
163
156
|
warning: hasWarning,
|
|
@@ -165,7 +158,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
|
|
|
165
158
|
onClick: function onClick() {
|
|
166
159
|
return textInputDomNode.current.focus();
|
|
167
160
|
}
|
|
168
|
-
}, adornments.prefix), React__default[
|
|
161
|
+
}, adornments.prefix), React__default["default"].createElement(TextInputField, defaultTheme._extends({
|
|
169
162
|
ref: textInputRef,
|
|
170
163
|
value: value,
|
|
171
164
|
defaultValue: defaultValue,
|
|
@@ -182,23 +175,23 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
|
|
|
182
175
|
onBlur: onBlur,
|
|
183
176
|
readOnly: readOnly,
|
|
184
177
|
noBorder: noBorder
|
|
185
|
-
}, rest)), !readOnly && noBorder && React__default[
|
|
178
|
+
}, rest)), !readOnly && noBorder && React__default["default"].createElement(InputIconContainer, {
|
|
186
179
|
error: error,
|
|
187
180
|
warning: warning
|
|
188
|
-
}, React__default[
|
|
181
|
+
}, React__default["default"].createElement(editNote.SvgEditNote, null)), label && React__default["default"].createElement(TextInputLabel, {
|
|
189
182
|
htmlFor: "text-input-".concat(uniqueId),
|
|
190
183
|
hasPlaceholder: Boolean(placeholder),
|
|
191
184
|
hasAdornments: Boolean(typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 || typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0),
|
|
192
185
|
hasIcon: Boolean(icon),
|
|
193
186
|
error: hasError
|
|
194
|
-
}, label, required && ' *'), typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0 && React__default[
|
|
187
|
+
}, label, required && ' *'), typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0 && React__default["default"].createElement(Adornment, {
|
|
195
188
|
error: hasError,
|
|
196
189
|
warning: hasWarning,
|
|
197
190
|
isPrefix: false,
|
|
198
191
|
onClick: function onClick() {
|
|
199
192
|
return textInputDomNode.current.focus();
|
|
200
193
|
}
|
|
201
|
-
}, adornments.suffix)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default[
|
|
194
|
+
}, adornments.suffix)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default["default"].createElement(Description, {
|
|
202
195
|
error: hasError,
|
|
203
196
|
warning: hasWarning
|
|
204
197
|
}, descriptionText));
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-cd01e6c2.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
6
|
var TippyTooltip = require('@tippyjs/react');
|
|
7
|
-
require('./shift-away-subtle-
|
|
7
|
+
require('./shift-away-subtle-631cd794.js');
|
|
8
8
|
|
|
9
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
10
|
|
|
@@ -13,7 +13,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
13
|
var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
|
|
14
14
|
|
|
15
15
|
var _templateObject;
|
|
16
|
-
var Tooltip$1 = styled__default[
|
|
16
|
+
var Tooltip$1 = styled__default["default"](TippyTooltip__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 400;\n background: ", ";\n border-radius: 3px;\n pointer-events: default !important;\n .tippy-content {\n padding: 9px 12px;\n }\n\n .tippy-arrow {\n color: ", ";\n }\n\n a {\n color: inherit;\n }\n"])), function (props) {
|
|
17
17
|
return props.theme.primaryFontFamily;
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.theme.getColor('gray-700');
|
|
@@ -21,17 +21,17 @@ var Tooltip$1 = styled__default['default'](TippyTooltip__default['default']).att
|
|
|
21
21
|
return props.theme.getColor('gray-700');
|
|
22
22
|
});
|
|
23
23
|
|
|
24
|
-
var
|
|
24
|
+
var _excluded = ["content", "interactive", "placement", "duration", "trigger", "visible", "children"];
|
|
25
|
+
var Tooltip = React__default["default"].forwardRef(function Tooltip(_ref, ref) {
|
|
25
26
|
var content = _ref.content,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip$1, defaultTheme._extends({
|
|
27
|
+
interactive = _ref.interactive,
|
|
28
|
+
placement = _ref.placement,
|
|
29
|
+
duration = _ref.duration,
|
|
30
|
+
trigger = _ref.trigger,
|
|
31
|
+
visible = _ref.visible,
|
|
32
|
+
children = _ref.children,
|
|
33
|
+
props = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
34
|
+
return React__default["default"].createElement("div", null, React__default["default"].createElement(Tooltip$1, defaultTheme._extends({
|
|
35
35
|
ref: ref,
|
|
36
36
|
content: content,
|
|
37
37
|
interactive: interactive,
|