@ntbjs/react-components 1.1.0-beta.81 → 1.1.0-beta.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/{AssetGallery-6824b3cc.js → AssetGallery-b7041e97.js} +27 -13
- package/{Checkbox-012bbd3f.js → Checkbox-85394137.js} +2 -2
- package/{CompactAutocompleteSelect-160b1620.js → CompactAutocompleteSelect-cb81bdbc.js} +77 -68
- package/{CompactStarRating-53593d92.js → CompactStarRating-de1bcfe9.js} +88 -89
- package/{CompactTextInput-9980612c.js → CompactTextInput-2e9d1a60.js} +90 -100
- package/{Instructions-f04156ea.js → Instructions-ea2ce2bc.js} +17 -12
- package/{MultiSelect-9729cedf.js → MultiSelect-01a257b8.js} +1 -1
- package/{Radio-0594409d.js → Radio-c811ce4a.js} +2 -2
- package/{Switch-cd165c8c.js → Switch-3ac11c97.js} +2 -2
- package/{TextArea-b2af91e6.js → TextArea-c2ebc42e.js} +77 -101
- package/{TextInput-a1083be3.js → TextInput-8ea31a7b.js} +42 -42
- package/{Tooltip-f4f9ab8f.js → Tooltip-1e21edaa.js} +1 -1
- package/check-555d831b.js +213 -0
- package/data/Tooltip/index.js +1 -1
- package/data/index.js +1 -1
- package/inputs/Checkbox/index.js +1 -1
- package/inputs/CompactAutocompleteSelect/index.js +5 -5
- package/inputs/CompactStarRating/index.js +3 -3
- package/inputs/CompactTextInput/index.js +5 -5
- package/inputs/MultiSelect/index.js +2 -2
- package/inputs/Radio/index.js +1 -1
- package/inputs/Switch/index.js +1 -1
- package/inputs/TextArea/index.js +2 -3
- package/inputs/TextInput/index.js +1 -1
- package/inputs/index.js +12 -12
- package/package.json +2 -1
- package/{react-select-creatable.esm-4c3da560.js → react-select-creatable.esm-7231b55e.js} +5 -1
- package/widgets/AssetGallery/index.js +13 -13
- package/widgets/Instructions/index.js +5 -5
- package/widgets/index.js +14 -14
- package/check-circle-filled-1640873e.js +0 -42
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
var defaultTheme = require('./defaultTheme-50f2b88f.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
|
-
var
|
|
7
|
-
var checkCircleFilled = require('./check-circle-filled-1640873e.js');
|
|
6
|
+
var check = require('./check-555d831b.js');
|
|
8
7
|
var editNote = require('./edit-note-c47d292e.js');
|
|
9
8
|
var styled = require('styled-components');
|
|
10
9
|
|
|
@@ -13,59 +12,67 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
13
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
15
14
|
|
|
16
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
|
|
17
|
-
var
|
|
18
|
-
var
|
|
15
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
|
|
16
|
+
var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
17
|
+
var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
18
|
+
var activeLabel = styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
|
|
19
|
+
var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n"])), function (props) {
|
|
19
20
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
20
21
|
}, function (props) {
|
|
21
22
|
return props.theme.themeProp('opacity', 0.6, 0.5);
|
|
22
23
|
});
|
|
23
|
-
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
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: 5px;\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) {
|
|
24
25
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
|
|
26
|
+
}, function (props) {
|
|
27
|
+
return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
|
|
25
28
|
});
|
|
26
|
-
var
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 13px 10px;\n resize: vertical;\n transition: height 0.3s ease;\n z-index: 0; \n\n ", "\n\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n\n \n ", "\n \n\n ", " \n\n ", " \n\n ", " \n ", "\n ", ";\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n \n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n ", "\n ", "\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n \n"])), function (props) {
|
|
32
|
-
return props.expanded && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n height: ", "em;\n "])), props.maxHeight);
|
|
29
|
+
var Container = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral([""])));
|
|
30
|
+
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 13px 10px;\n resize: vertical;\n transition: height 0.3s ease;\n z-index: 0; \n ", "\n ", "\n\n ", "\n\n\n ", "\n\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n ", "\n \n ", " \n\n ", " \n\n ", " \n ", "\n ", ";\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n \n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n ", "\n ", "\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n \n"])), function (props) {
|
|
31
|
+
return props.theme.themeProp('color', 'white', 'black');
|
|
32
|
+
}, function (props) {
|
|
33
|
+
return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
33
34
|
}, function (props) {
|
|
34
|
-
return props.
|
|
35
|
+
return props.readOnly && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
|
|
36
|
+
}, function (props) {
|
|
37
|
+
return props.expanded && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n height: ", "em;\n "])), props.maxHeight);
|
|
38
|
+
}, function (props) {
|
|
39
|
+
return props.showMore && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
|
|
35
40
|
}, function (props) {
|
|
36
41
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
37
42
|
}, function (props) {
|
|
38
|
-
return (props.
|
|
43
|
+
return (props.state === 'warning' || props.state === 'error') && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
|
|
39
44
|
}, function (props) {
|
|
40
45
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
41
46
|
}, function (props) {
|
|
42
47
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
|
|
43
48
|
}, function (props) {
|
|
44
|
-
return props.noBorder && styled.css(
|
|
49
|
+
return props.noBorder && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
|
|
45
50
|
}, function (props) {
|
|
46
|
-
return props.
|
|
51
|
+
return props.state === 'error-border' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
47
52
|
}, function (props) {
|
|
48
|
-
return props.
|
|
53
|
+
return props.state === 'warning' && !props.editWarning && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n :focus {\n background: white !important;\n color: black !important;\n }\n &&:hover:not(:focus) {\n ", "\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')), function (props) {
|
|
54
|
+
return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n "])));
|
|
55
|
+
}, props.theme.themeProp('background', '#816600', '#F4E21E'), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
|
|
49
56
|
}, function (props) {
|
|
50
|
-
return props.
|
|
57
|
+
return props.state === 'warning' && props.editWarning && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#fffde8', '#fffde8'), props.theme.themeProp('background', '#fffebf', '#fffebf'), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
|
|
51
58
|
}, function (props) {
|
|
52
|
-
return props.
|
|
59
|
+
return props.state === 'error' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n background: ", " !important;\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n background: #f7d5d0 !important;\n }\n &&:read-only:hover {\n background: ", " !important;\n }\n "])), props.theme.getColor('red-200'), props.theme.getColor('red-200'));
|
|
53
60
|
}, function (props) {
|
|
54
|
-
return props.lightBackground && styled.css(
|
|
61
|
+
return props.lightBackground && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
|
|
55
62
|
}, function (props) {
|
|
56
63
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
57
64
|
}, function (props) {
|
|
58
|
-
return props.noBorder && !props.readOnly &&
|
|
65
|
+
return props.noBorder && !props.readOnly && props.state != 'warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
|
|
59
66
|
}, InputIconContainer, function (props) {
|
|
60
|
-
return props.success && styled.css(
|
|
67
|
+
return props.state === 'success' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
61
68
|
}, function (props) {
|
|
62
|
-
return props.warning && styled.css(
|
|
69
|
+
return props.state === 'warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('orange-500'));
|
|
63
70
|
}, function (props) {
|
|
64
|
-
return props.error && styled.css(
|
|
71
|
+
return props.state === 'error' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('red-500'));
|
|
65
72
|
}, function (props) {
|
|
66
|
-
return props.hasIcon && styled.css(
|
|
73
|
+
return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
|
|
67
74
|
}, function (props) {
|
|
68
|
-
return (props.
|
|
75
|
+
return (props.state === 'warning' || props.state === 'error') && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
|
|
69
76
|
}, function (props) {
|
|
70
77
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
|
|
71
78
|
}, function (props) {
|
|
@@ -75,31 +82,40 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
75
82
|
}, function (props) {
|
|
76
83
|
return props.theme.getColor('gray-600');
|
|
77
84
|
});
|
|
78
|
-
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
85
|
+
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n\n ", ";\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
|
|
79
86
|
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%)"));
|
|
80
87
|
}, function (props) {
|
|
81
|
-
return props.hasPlaceholder && styled.css(
|
|
88
|
+
return props.hasPlaceholder && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.state === 'error' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
|
|
82
89
|
}, function (props) {
|
|
83
|
-
return props.hasIcon && styled.css(
|
|
90
|
+
return props.hasIcon && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
|
|
84
91
|
});
|
|
85
|
-
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
86
|
-
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
87
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-
|
|
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: 13px;\n height: 2.625rem;\n display: flex;\n padding: 0 10px 0 30px;\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n }\n"])), function (props) {
|
|
94
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
|
|
88
95
|
});
|
|
89
|
-
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
90
|
-
return props.
|
|
91
|
-
}, function (props) {
|
|
92
|
-
return props.
|
|
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) {
|
|
97
|
+
return props.disabled && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
98
|
+
}, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
99
|
+
return props.state === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
93
100
|
});
|
|
94
|
-
var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(
|
|
101
|
+
var Description = styled__default['default'].p.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) {
|
|
95
102
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
96
103
|
}, function (props) {
|
|
97
|
-
return props.error && styled.css(
|
|
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')));
|
|
98
105
|
});
|
|
99
|
-
var
|
|
106
|
+
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = 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 border-radius: 30px;\n ", "\n ", "\n > svg {\n width: 15px;\n }\n"])), function (props) {
|
|
107
|
+
return props.fadeIn ? 0 : 1;
|
|
108
|
+
}, function (props) {
|
|
109
|
+
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
110
|
+
}, function (props) {
|
|
111
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
112
|
+
}, function (props) {
|
|
113
|
+
return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-100'));
|
|
114
|
+
});
|
|
115
|
+
var ShowMoreText = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n cursor: pointer;\n\n ", ";\n\n ", "\n"])), function (props) {
|
|
100
116
|
return props.theme.themeProp('color', props.theme.getColor('emerald-300'), props.theme.getColor('emerald-500'));
|
|
101
117
|
}, function (props) {
|
|
102
|
-
return props.error && styled.css(
|
|
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')));
|
|
103
119
|
});
|
|
104
120
|
|
|
105
121
|
var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
|
|
@@ -120,9 +136,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
120
136
|
showMoreText = _ref.showMoreText,
|
|
121
137
|
autoComplete = _ref.autoComplete,
|
|
122
138
|
description = _ref.description,
|
|
123
|
-
|
|
124
|
-
error = _ref.error,
|
|
125
|
-
warning = _ref.warning,
|
|
139
|
+
state = _ref.state,
|
|
126
140
|
icon = _ref.icon,
|
|
127
141
|
rows = _ref.rows,
|
|
128
142
|
className = _ref.className,
|
|
@@ -131,9 +145,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
131
145
|
onBlur = _ref.onBlur,
|
|
132
146
|
lightBackground = _ref.lightBackground,
|
|
133
147
|
noBorder = _ref.noBorder,
|
|
134
|
-
|
|
135
|
-
errorAlert = _ref.errorAlert,
|
|
136
|
-
rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "editWarning", "isExpanded", "maxRows", "showMore", "showMoreText", "autoComplete", "description", "success", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
|
|
148
|
+
rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "editWarning", "isExpanded", "maxRows", "showMore", "showMoreText", "autoComplete", "description", "state", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder"]);
|
|
137
149
|
|
|
138
150
|
var textInputRef = React.useRef(null);
|
|
139
151
|
|
|
@@ -170,36 +182,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
170
182
|
_useState12 = defaultTheme._slicedToArray(_useState11, 1),
|
|
171
183
|
uniqueId = _useState12[0];
|
|
172
184
|
|
|
173
|
-
var hasError = React.useMemo(function () {
|
|
174
|
-
if (lodash.isBoolean(error)) {
|
|
175
|
-
return error;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
return !lodash.isEmpty(error);
|
|
179
|
-
}, [error]);
|
|
180
|
-
var hasWarning = React.useMemo(function () {
|
|
181
|
-
if (lodash.isBoolean(warning)) {
|
|
182
|
-
return warning;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
return !lodash.isEmpty(warning);
|
|
186
|
-
}, [warning]);
|
|
187
|
-
var descriptionText = React.useMemo(function () {
|
|
188
|
-
if (!lodash.isEmpty(error)) {
|
|
189
|
-
return error;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
if (!lodash.isEmpty(warning)) {
|
|
193
|
-
return warning;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
if (!lodash.isEmpty(description)) {
|
|
197
|
-
return description;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
return null;
|
|
201
|
-
}, [description, error, warning]);
|
|
202
|
-
|
|
203
185
|
var handleTextAreaChange = function handleTextAreaChange() {
|
|
204
186
|
setExpanded(!expanded);
|
|
205
187
|
isExpanded(expanded);
|
|
@@ -248,11 +230,10 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
248
230
|
return React__default['default'].createElement(TextInput, {
|
|
249
231
|
disabled: disabled,
|
|
250
232
|
readOnly: readOnly,
|
|
251
|
-
|
|
252
|
-
warning: hasWarning,
|
|
233
|
+
state: state,
|
|
253
234
|
className: className,
|
|
254
235
|
style: style
|
|
255
|
-
},
|
|
236
|
+
}, state !== 'warning' && state !== 'error' && React__default['default'].createElement(TextInputFieldIcon, null, icon), (state === 'warning' || state === 'error') && React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(Container, null, React__default['default'].createElement(TextInputField, defaultTheme._extends({
|
|
256
237
|
ref: forwardedRef ? forwardedRef : textInputRef,
|
|
257
238
|
rows: contentRows > rows ? contentRows : rows,
|
|
258
239
|
expanded: expanded,
|
|
@@ -262,35 +243,33 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
262
243
|
name: name,
|
|
263
244
|
placeholder: placeholder || ' ',
|
|
264
245
|
required: required,
|
|
265
|
-
disabled: disabled || readOnly,
|
|
266
246
|
readOnly: readOnly,
|
|
247
|
+
disabled: disabled,
|
|
267
248
|
edit: edit,
|
|
268
249
|
editWarning: editWarning,
|
|
269
250
|
showMore: showMore,
|
|
270
|
-
|
|
251
|
+
state: state,
|
|
271
252
|
autoComplete: autoComplete,
|
|
272
253
|
hasIcon: Boolean(icon),
|
|
273
254
|
icon: icon,
|
|
274
|
-
error: hasError,
|
|
275
|
-
warning: hasWarning,
|
|
276
255
|
id: "text-input-".concat(uniqueId),
|
|
277
256
|
lightBackground: lightBackground,
|
|
278
257
|
onChange: onChange,
|
|
279
258
|
onBlur: onBlur,
|
|
280
|
-
noBorder: noBorder
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
}, React__default['default'].createElement(editNote.SvgEditNote, null))
|
|
259
|
+
noBorder: noBorder
|
|
260
|
+
}, rest)), (state === 'loading' || state === 'success') && React__default['default'].createElement(SuccessContainer, null, state === 'loading' && React__default['default'].createElement(check._default, {
|
|
261
|
+
color: '#b0b6b9',
|
|
262
|
+
size: 12
|
|
263
|
+
}), state === 'success' && React__default['default'].createElement(check.SvgCheck, null)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
|
|
264
|
+
disabled: disabled
|
|
265
|
+
}, React__default['default'].createElement(editNote.SvgEditNote, null))), label && React__default['default'].createElement(TextInputLabel, {
|
|
287
266
|
htmlFor: "text-input-".concat(uniqueId),
|
|
288
267
|
hasPlaceholder: Boolean(placeholder),
|
|
289
268
|
hasIcon: Boolean(icon),
|
|
290
|
-
|
|
291
|
-
}, label, required && ' *'), typeof
|
|
292
|
-
|
|
293
|
-
},
|
|
269
|
+
state: state
|
|
270
|
+
}, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
|
|
271
|
+
state: state
|
|
272
|
+
}, description), maxContentRows > defaultRows && showMore && React__default['default'].createElement(ShowMoreText, {
|
|
294
273
|
onClick: handleTextAreaChange
|
|
295
274
|
}, showMoreText));
|
|
296
275
|
});
|
|
@@ -300,12 +279,10 @@ TextArea.defaultProps = {
|
|
|
300
279
|
readOnly: false,
|
|
301
280
|
edit: false,
|
|
302
281
|
editWarning: false,
|
|
303
|
-
warningAlert: false,
|
|
304
|
-
errorAlert: false,
|
|
305
282
|
hidden: false,
|
|
306
283
|
showMore: false,
|
|
307
284
|
showMoreText: '',
|
|
308
|
-
|
|
285
|
+
state: ''
|
|
309
286
|
};
|
|
310
287
|
TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
311
288
|
success: defaultTheme.PropTypes.bool,
|
|
@@ -334,10 +311,9 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
334
311
|
onChange: defaultTheme.PropTypes.func,
|
|
335
312
|
onBlur: defaultTheme.PropTypes.func,
|
|
336
313
|
noBorder: defaultTheme.PropTypes.bool,
|
|
337
|
-
warningAlert: defaultTheme.PropTypes.bool,
|
|
338
|
-
errorAlert: defaultTheme.PropTypes.bool,
|
|
339
314
|
maxRows: defaultTheme.PropTypes.func,
|
|
340
|
-
isExpanded: defaultTheme.PropTypes.func
|
|
315
|
+
isExpanded: defaultTheme.PropTypes.func,
|
|
316
|
+
state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success'])
|
|
341
317
|
} : {};
|
|
342
318
|
|
|
343
319
|
exports.TextArea = TextArea;
|
|
@@ -3,18 +3,55 @@
|
|
|
3
3
|
var defaultTheme = require('./defaultTheme-50f2b88f.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
|
-
var styled = require('styled-components');
|
|
7
6
|
var lodash = require('lodash');
|
|
8
7
|
var editNote = require('./edit-note-c47d292e.js');
|
|
8
|
+
var styled = require('styled-components');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
14
14
|
|
|
15
|
+
var toFnRef = function toFnRef(ref) {
|
|
16
|
+
return !ref || typeof ref === 'function' ? ref : function (value) {
|
|
17
|
+
ref.current = value;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
function mergeRefs(refA, refB) {
|
|
22
|
+
var a = toFnRef(refA);
|
|
23
|
+
var b = toFnRef(refB);
|
|
24
|
+
return function (value) {
|
|
25
|
+
if (a) a(value);
|
|
26
|
+
if (b) b(value);
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Create and returns a single callback ref composed from two other Refs.
|
|
31
|
+
*
|
|
32
|
+
* ```tsx
|
|
33
|
+
* const Button = React.forwardRef((props, ref) => {
|
|
34
|
+
* const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
|
|
35
|
+
* const mergedRef = useMergedRefs(ref, attachRef);
|
|
36
|
+
*
|
|
37
|
+
* return <button ref={mergedRef} {...props}/>
|
|
38
|
+
* })
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* @param refA A Callback or mutable Ref
|
|
42
|
+
* @param refB A Callback or mutable Ref
|
|
43
|
+
* @category refs
|
|
44
|
+
*/
|
|
45
|
+
|
|
46
|
+
function useMergedRefs(refA, refB) {
|
|
47
|
+
return React.useMemo(function () {
|
|
48
|
+
return mergeRefs(refA, refB);
|
|
49
|
+
}, [refA, refB]);
|
|
50
|
+
}
|
|
51
|
+
|
|
15
52
|
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;
|
|
16
53
|
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"])));
|
|
17
|
-
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 border: 1px solid;\n ", "\n border-radius: 3px;\n
|
|
54
|
+
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 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) {
|
|
18
55
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
19
56
|
}, function (props) {
|
|
20
57
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
@@ -60,7 +97,7 @@ var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDe
|
|
|
60
97
|
}, InputIconContainer, function (props) {
|
|
61
98
|
return props.theme.getColor('gray-600');
|
|
62
99
|
});
|
|
63
|
-
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n
|
|
100
|
+
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = 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 content: \"\";\n\n ", "\n"])), function (props) {
|
|
64
101
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
65
102
|
}, function (props) {
|
|
66
103
|
return props.theme.themeProp('opacity', 0.6, 0.5);
|
|
@@ -87,43 +124,6 @@ var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTh
|
|
|
87
124
|
return props.error && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
88
125
|
});
|
|
89
126
|
|
|
90
|
-
var toFnRef = function toFnRef(ref) {
|
|
91
|
-
return !ref || typeof ref === 'function' ? ref : function (value) {
|
|
92
|
-
ref.current = value;
|
|
93
|
-
};
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
function mergeRefs(refA, refB) {
|
|
97
|
-
var a = toFnRef(refA);
|
|
98
|
-
var b = toFnRef(refB);
|
|
99
|
-
return function (value) {
|
|
100
|
-
if (a) a(value);
|
|
101
|
-
if (b) b(value);
|
|
102
|
-
};
|
|
103
|
-
}
|
|
104
|
-
/**
|
|
105
|
-
* Create and returns a single callback ref composed from two other Refs.
|
|
106
|
-
*
|
|
107
|
-
* ```tsx
|
|
108
|
-
* const Button = React.forwardRef((props, ref) => {
|
|
109
|
-
* const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
|
|
110
|
-
* const mergedRef = useMergedRefs(ref, attachRef);
|
|
111
|
-
*
|
|
112
|
-
* return <button ref={mergedRef} {...props}/>
|
|
113
|
-
* })
|
|
114
|
-
* ```
|
|
115
|
-
*
|
|
116
|
-
* @param refA A Callback or mutable Ref
|
|
117
|
-
* @param refB A Callback or mutable Ref
|
|
118
|
-
* @category refs
|
|
119
|
-
*/
|
|
120
|
-
|
|
121
|
-
function useMergedRefs(refA, refB) {
|
|
122
|
-
return React.useMemo(function () {
|
|
123
|
-
return mergeRefs(refA, refB);
|
|
124
|
-
}, [refA, refB]);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
127
|
var TextInput = React__default['default'].forwardRef(function TextInput(_ref, forwardedRef) {
|
|
128
128
|
var value = _ref.value,
|
|
129
129
|
defaultValue = _ref.defaultValue,
|
|
@@ -184,7 +184,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
|
|
|
184
184
|
return null;
|
|
185
185
|
}, [description, error, warning]);
|
|
186
186
|
return React__default['default'].createElement(TextInput$1, {
|
|
187
|
-
disabled: disabled
|
|
187
|
+
disabled: disabled,
|
|
188
188
|
error: hasError,
|
|
189
189
|
warning: hasWarning,
|
|
190
190
|
className: className,
|
|
@@ -205,7 +205,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
|
|
|
205
205
|
placeholder: placeholder || ' ',
|
|
206
206
|
type: type,
|
|
207
207
|
required: required,
|
|
208
|
-
disabled: disabled
|
|
208
|
+
disabled: disabled,
|
|
209
209
|
readOnly: readOnly,
|
|
210
210
|
autoComplete: autoComplete,
|
|
211
211
|
hasIcon: Boolean(icon),
|
|
@@ -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['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
|
|
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');
|