@ntbjs/react-components 1.1.0-beta.62 → 1.1.0-beta.63
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-05297c7a.js → AssetGallery-59ea0b08.js} +8 -22
- package/{Button-dd271c4b.js → Button-f893df21.js} +1 -1
- package/{CompactAutocompleteSelect-91f96ef4.js → CompactAutocompleteSelect-0160cb3e.js} +44 -26
- package/{CompactTextInput-e9c99aa3.js → CompactTextInput-d2fabaf5.js} +29 -12
- package/{Instructions-791f977a.js → Instructions-3be0c5c8.js} +2 -2
- package/{Popover-11df9750.js → Popover-cf1e9677.js} +6 -6
- package/{TextArea-6dad1bbe.js → TextArea-76e2ff1e.js} +105 -28
- package/check-circle-filled-1640873e.js +42 -0
- package/data/Popover/index.js +1 -1
- package/data/index.js +1 -1
- package/inputs/Button/index.js +2 -2
- package/inputs/CompactAutocompleteSelect/index.js +2 -1
- package/inputs/CompactTextInput/index.js +3 -2
- package/inputs/TextArea/index.js +2 -1
- package/inputs/index.js +6 -5
- package/package.json +1 -1
- package/widgets/AssetGallery/index.js +7 -6
- package/widgets/Instructions/index.js +4 -3
- package/widgets/index.js +8 -7
|
@@ -7,23 +7,24 @@ var TextInput = require('./TextInput-a1083be3.js');
|
|
|
7
7
|
var ResizeObserver = require('resize-observer-polyfill');
|
|
8
8
|
var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
|
|
9
9
|
var ActionButton = require('./ActionButton-c3f5ed94.js');
|
|
10
|
-
require('./Button-
|
|
10
|
+
require('./Button-f893df21.js');
|
|
11
11
|
require('./Checkbox-012bbd3f.js');
|
|
12
|
-
require('./CompactAutocompleteSelect-
|
|
12
|
+
require('./CompactAutocompleteSelect-0160cb3e.js');
|
|
13
13
|
require('./CompactStarRating-9c4c4f2c.js');
|
|
14
|
-
require('./CompactTextInput-
|
|
14
|
+
require('./CompactTextInput-d2fabaf5.js');
|
|
15
15
|
require('./MultiSelect-5b008b32.js');
|
|
16
16
|
require('./Radio-0594409d.js');
|
|
17
|
-
require('./TextArea-
|
|
17
|
+
require('./TextArea-76e2ff1e.js');
|
|
18
18
|
require('./Switch-cd165c8c.js');
|
|
19
19
|
require('./Alert-3e4f8be1.js');
|
|
20
20
|
require('./Badge-9bcebe96.js');
|
|
21
|
-
require('./Popover-
|
|
21
|
+
require('./Popover-cf1e9677.js');
|
|
22
22
|
require('./Tab-bd0f3345.js');
|
|
23
23
|
require('./Tabs-cfc35dc0.js');
|
|
24
24
|
var Tooltip = require('./Tooltip-f4f9ab8f.js');
|
|
25
25
|
var styled = require('styled-components');
|
|
26
26
|
var polished = require('polished');
|
|
27
|
+
var checkCircleFilled = require('./check-circle-filled-1640873e.js');
|
|
27
28
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
28
29
|
|
|
29
30
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -155,21 +156,6 @@ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme
|
|
|
155
156
|
var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
|
|
156
157
|
var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
|
|
157
158
|
|
|
158
|
-
function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
|
|
159
|
-
|
|
160
|
-
var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
161
|
-
fill: "currentColor",
|
|
162
|
-
d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
|
|
163
|
-
fillOpacity: 0.9
|
|
164
|
-
});
|
|
165
|
-
|
|
166
|
-
function SvgCheckCircleFilled(props) {
|
|
167
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
168
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
169
|
-
viewBox: "0 0 24 24"
|
|
170
|
-
}, props), _ref$5);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
159
|
function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
|
|
174
160
|
|
|
175
161
|
var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -499,7 +485,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
499
485
|
assetTitle: asset.title
|
|
500
486
|
}, asset.note.icon ? asset.note.icon : React__default['default'].createElement(warningCircle.SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
|
|
501
487
|
selected: selected
|
|
502
|
-
}, React__default['default'].createElement(SvgCheckCircleFilled, {
|
|
488
|
+
}, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, {
|
|
503
489
|
onClick: onSelectClick
|
|
504
490
|
})), React__default['default'].createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
|
|
505
491
|
return React__default['default'].createElement(Tooltip.Tooltip, {
|
|
@@ -814,7 +800,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
814
800
|
as: SvgFile
|
|
815
801
|
})), React__default['default'].createElement(InfoDescription, null, asset.description)), React__default['default'].createElement(Bottom, null, selectable && React__default['default'].createElement(BottomSelectButton, {
|
|
816
802
|
selected: selected
|
|
817
|
-
}, React__default['default'].createElement(SvgCheckCircleFilled, {
|
|
803
|
+
}, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, {
|
|
818
804
|
onClick: onSelectClick
|
|
819
805
|
})), React__default['default'].createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
|
|
820
806
|
return React__default['default'].createElement(Tooltip.Tooltip, {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var defaultTheme = require('./defaultTheme-50f2b88f.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
|
-
var Popover = require('./Popover-
|
|
6
|
+
var Popover = require('./Popover-cf1e9677.js');
|
|
7
7
|
var ContextMenu = require('./ContextMenu-d088833b.js');
|
|
8
8
|
var expandMore = require('./expand-more-94585605.js');
|
|
9
9
|
|
|
@@ -10,6 +10,7 @@ var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js
|
|
|
10
10
|
var reactSelectAsyncPaginate = require('react-select-async-paginate');
|
|
11
11
|
var close = require('./close-ebf2f3cf.js');
|
|
12
12
|
var expandMore = require('./expand-more-94585605.js');
|
|
13
|
+
var checkCircleFilled = require('./check-circle-filled-1640873e.js');
|
|
13
14
|
|
|
14
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
16
|
|
|
@@ -17,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
17
18
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
18
19
|
var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
|
|
19
20
|
|
|
20
|
-
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;
|
|
21
|
+
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;
|
|
21
22
|
var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
|
|
22
23
|
var sharedStyle = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 0.875rem;\n line-height: 1rem;\n width: 100%;\n display: block;\n box-shadow: 'none';\n flex-basis: ", ";\n"])), function (props) {
|
|
23
24
|
return props.theme.primaryFontFamily;
|
|
@@ -27,18 +28,25 @@ var sharedStyle = styled.css(_templateObject || (_templateObject = defaultTheme.
|
|
|
27
28
|
var CompactAutocompleteSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
|
|
28
29
|
return props.theme.primaryFontFamily;
|
|
29
30
|
});
|
|
30
|
-
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n padding-top: 2px;\n
|
|
31
|
+
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n padding-top: 2px;\n"])), function (props) {
|
|
31
32
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
32
33
|
});
|
|
33
34
|
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n height: 19px;\n"])));
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
var
|
|
38
|
-
var
|
|
35
|
+
var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n margin-top: 0;\n pointer-events: none;\n padding-right: 60px;\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 2px;\n bottom: 0;\n color: ", ";\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
36
|
+
return props.theme.getColor('emerald-500');
|
|
37
|
+
});
|
|
38
|
+
var AsyncCreatableAutocompleteSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
|
|
39
|
+
var AsyncAutocompleteSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
|
|
40
|
+
var AutocompletSelect = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
|
|
41
|
+
var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
|
|
42
|
+
var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n && {\n height: 22px;\n min-height: 22px;\n background: ", ";\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 10px;\n cursor: text;\n border: 1px solid transparent;\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 &&:not(:hover):not(:focus) {\n ", ";\n }\n\n &&:focus {\n ", ";\n }\n"])), function (props) {
|
|
43
|
+
return props.success ? props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300')) : 'transparent';
|
|
44
|
+
}, function (props) {
|
|
39
45
|
return props.warning && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#fffde8');
|
|
40
46
|
}, function (props) {
|
|
41
47
|
return props.error && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#fbeae6');
|
|
48
|
+
}, function (props) {
|
|
49
|
+
return props.success && !props.isFocused && props.theme.themeProp('background-color', '#64b49d', '#bfe0d5');
|
|
42
50
|
}, function (props) {
|
|
43
51
|
return props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'));
|
|
44
52
|
}, function (props) {
|
|
@@ -47,52 +55,56 @@ var Control = styled__default['default'](Select.components.Control).attrs(defaul
|
|
|
47
55
|
return props.error && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500'));
|
|
48
56
|
}, function (props) {
|
|
49
57
|
return !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
58
|
+
}, function (props) {
|
|
59
|
+
return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-300'));
|
|
50
60
|
}, function (props) {
|
|
51
61
|
return props.warning && !props.isFocused && props.theme.themeProp('background', '#816600', '#fffebf');
|
|
52
62
|
}, function (props) {
|
|
53
63
|
return props.error && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
|
|
54
64
|
}, function (props) {
|
|
55
65
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
66
|
+
}, function (props) {
|
|
67
|
+
return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-300'));
|
|
56
68
|
});
|
|
57
|
-
var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(
|
|
69
|
+
var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = 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) {
|
|
58
70
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
59
71
|
}, function (props) {
|
|
60
|
-
return props.isFocused && styled.css(
|
|
72
|
+
return props.isFocused && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
|
|
61
73
|
}, function (props) {
|
|
62
|
-
return props.isSelected && styled.css(
|
|
74
|
+
return props.isSelected && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
|
|
63
75
|
}, function (props) {
|
|
64
|
-
return props.isFocused && props.isSelected && styled.css(
|
|
76
|
+
return props.isFocused && props.isSelected && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
|
|
65
77
|
});
|
|
66
|
-
var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(
|
|
67
|
-
return (props.error || props.warning) && styled.css(
|
|
78
|
+
var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", "\n ", ";\n }\n"])), function (props) {
|
|
79
|
+
return (props.error || props.warning) && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
|
|
68
80
|
}, function (props) {
|
|
69
81
|
return (props.error || props.warning) && props.theme.themeProp('opacity', '0.6', '0.6');
|
|
70
82
|
});
|
|
71
|
-
var SingleValue$1 = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(
|
|
83
|
+
var SingleValue$1 = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
|
|
72
84
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
73
85
|
});
|
|
74
|
-
var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(
|
|
86
|
+
var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n && {\n margin: 0;\n padding: 0;\n padding-left: 2px;\n ", "\n }\n"])), function (props) {
|
|
75
87
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
76
88
|
});
|
|
77
|
-
var Menu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(
|
|
89
|
+
var Menu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
|
|
78
90
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
|
|
79
91
|
});
|
|
80
|
-
var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(
|
|
81
|
-
var ClearIndicator$1 = styled__default['default'](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(
|
|
92
|
+
var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n && {\n padding: 0;\n }\n"])));
|
|
93
|
+
var ClearIndicator$1 = styled__default['default'](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n cursor: pointer;\n ", ";\n }\n"])), function (props) {
|
|
82
94
|
return props.isFocused ? 'flex' : 'none';
|
|
83
95
|
}, function (props) {
|
|
84
96
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
85
97
|
});
|
|
86
|
-
var DropdownIndicator$1 = styled__default['default'](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(
|
|
98
|
+
var DropdownIndicator$1 = styled__default['default'](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n width: 18px;\n margin-left: 2px;\n cursor: pointer;\n margin-top: 1px;\n ", ";\n }\n"])), function (props) {
|
|
87
99
|
return props.isFocused ? 'flex' : 'none';
|
|
88
100
|
}, function (props) {
|
|
89
101
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
90
102
|
});
|
|
91
|
-
var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(
|
|
92
|
-
var ClearIndicatorIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(
|
|
103
|
+
var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n width: 12px;\n"])));
|
|
104
|
+
var ClearIndicatorIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n width: 8px;\n margin-right: 4px;\n ", ";\n stroke-width: 2px;\n"])), function (props) {
|
|
93
105
|
return props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
94
106
|
});
|
|
95
|
-
var IndicatorSeparator$1 = styled__default['default'](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(
|
|
107
|
+
var IndicatorSeparator$1 = styled__default['default'](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n margin: 4px;\n ", ";\n }\n"])), function (props) {
|
|
96
108
|
return props.isFocused ? 'flex' : 'none';
|
|
97
109
|
}, function (props) {
|
|
98
110
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
@@ -110,12 +122,13 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
|
|
|
110
122
|
loadingMessageFunc = _ref.loadingMessageFunc,
|
|
111
123
|
creatable = _ref.creatable,
|
|
112
124
|
readOnly = _ref.readOnly,
|
|
125
|
+
success = _ref.success,
|
|
113
126
|
edit = _ref.edit,
|
|
114
127
|
disabled = _ref.disabled,
|
|
115
128
|
error = _ref.error,
|
|
116
129
|
hidden = _ref.hidden,
|
|
117
130
|
warning = _ref.warning,
|
|
118
|
-
props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "edit", "disabled", "error", "hidden", "warning"]);
|
|
131
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "success", "edit", "disabled", "error", "hidden", "warning"]);
|
|
119
132
|
|
|
120
133
|
var _useState = React.useState(nanoid.nanoid()),
|
|
121
134
|
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
@@ -142,6 +155,7 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
|
|
|
142
155
|
className: "select-control",
|
|
143
156
|
edit: edit,
|
|
144
157
|
error: error,
|
|
158
|
+
success: success,
|
|
145
159
|
warning: warning
|
|
146
160
|
}, props));
|
|
147
161
|
};
|
|
@@ -151,11 +165,12 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
|
|
|
151
165
|
}, [error, warning]);
|
|
152
166
|
var ValueContainer$1 = React.useMemo(function () {
|
|
153
167
|
var valueContainer = function valueContainer(props) {
|
|
154
|
-
return React__default['default'].createElement(ValueContainer, defaultTheme._extends({
|
|
168
|
+
return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(ValueContainer, defaultTheme._extends({
|
|
155
169
|
className: "value-container",
|
|
156
170
|
error: error,
|
|
171
|
+
success: success,
|
|
157
172
|
warning: warning
|
|
158
|
-
}, props));
|
|
173
|
+
}, props)), ' ', success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null)));
|
|
159
174
|
};
|
|
160
175
|
|
|
161
176
|
valueContainer.displayName = 'ValueContainerWrapper';
|
|
@@ -164,7 +179,8 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
|
|
|
164
179
|
var Input$1 = React.useMemo(function () {
|
|
165
180
|
var selectInput = function selectInput(props) {
|
|
166
181
|
return React__default['default'].createElement(Input, defaultTheme._extends({
|
|
167
|
-
className: "select-input"
|
|
182
|
+
className: "select-input",
|
|
183
|
+
success: success
|
|
168
184
|
}, props));
|
|
169
185
|
};
|
|
170
186
|
|
|
@@ -311,6 +327,7 @@ CompactAutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
311
327
|
noOptionsMessageFunc: defaultTheme.PropTypes.func,
|
|
312
328
|
readOnly: defaultTheme.PropTypes.bool,
|
|
313
329
|
edit: defaultTheme.PropTypes.bool,
|
|
330
|
+
success: defaultTheme.PropTypes.bool,
|
|
314
331
|
hidden: defaultTheme.PropTypes.bool,
|
|
315
332
|
error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
316
333
|
warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
@@ -327,6 +344,7 @@ CompactAutocompleteSelect.defaultProps = {
|
|
|
327
344
|
}
|
|
328
345
|
},
|
|
329
346
|
readOnly: false,
|
|
347
|
+
success: false,
|
|
330
348
|
disabled: false,
|
|
331
349
|
creatable: true,
|
|
332
350
|
edit: false,
|
|
@@ -6,9 +6,10 @@ var nanoid = require('nanoid');
|
|
|
6
6
|
var lodash = require('lodash');
|
|
7
7
|
var styled = require('styled-components');
|
|
8
8
|
var editNote = require('./edit-note-c47d292e.js');
|
|
9
|
+
var checkCircleFilled = require('./check-circle-filled-1640873e.js');
|
|
9
10
|
require('./Alert-3e4f8be1.js');
|
|
10
11
|
require('./Badge-9bcebe96.js');
|
|
11
|
-
var Popover = require('./Popover-
|
|
12
|
+
var Popover = require('./Popover-cf1e9677.js');
|
|
12
13
|
require('./Tab-bd0f3345.js');
|
|
13
14
|
require('./Tabs-cfc35dc0.js');
|
|
14
15
|
var Tooltip = require('./Tooltip-f4f9ab8f.js');
|
|
@@ -39,7 +40,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
39
40
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
40
41
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
41
42
|
|
|
42
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
43
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
43
44
|
var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
|
|
44
45
|
return props.theme.primaryFontFamily;
|
|
45
46
|
});
|
|
@@ -62,44 +63,55 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
62
63
|
}, function (props) {
|
|
63
64
|
return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
64
65
|
});
|
|
65
|
-
var
|
|
66
|
+
var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n padding-right: 4px;\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 2px;\n bottom: 0;\n color: ", ";\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
67
|
+
return props.theme.getColor('emerald-500');
|
|
68
|
+
});
|
|
69
|
+
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = 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 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 &&: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) {
|
|
66
70
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
67
71
|
}, function (props) {
|
|
68
72
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
69
73
|
}, function (props) {
|
|
70
|
-
return props.hasLink && styled.css(
|
|
74
|
+
return props.hasLink && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n\n &&:read-only {\n cursor: pointer;\n }\n "])), function (props) {
|
|
71
75
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
72
76
|
});
|
|
73
77
|
}, function (props) {
|
|
74
78
|
return props.warning && props.theme.themeProp('background', '#634e01', '#fffde8');
|
|
75
79
|
}, function (props) {
|
|
76
|
-
return props.error && props.theme.themeProp('background', '#
|
|
80
|
+
return props.error && props.theme.themeProp('background', '#red', '#fbeae6');
|
|
77
81
|
}, function (props) {
|
|
78
82
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
83
|
+
}, function (props) {
|
|
84
|
+
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300'));
|
|
79
85
|
}, function (props) {
|
|
80
86
|
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
81
87
|
}, function (props) {
|
|
82
88
|
return props.warning && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
|
|
89
|
+
}, function (props) {
|
|
90
|
+
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300'));
|
|
83
91
|
}, function (props) {
|
|
84
92
|
return props.error && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
|
|
85
93
|
}, InputIconContainer, function (props) {
|
|
94
|
+
return props.success && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
95
|
+
}, CheckIconContainer, function (props) {
|
|
86
96
|
return props.error && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
87
97
|
}, function (props) {
|
|
88
|
-
return !props.readOnly && styled.css(
|
|
98
|
+
return !props.readOnly && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
89
99
|
return props.theme.getColor('gray-600');
|
|
90
100
|
});
|
|
91
101
|
}, function (props) {
|
|
92
|
-
return props.warning && styled.css(
|
|
102
|
+
return props.warning && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
93
103
|
return props.theme.getColor('signal-yellow-500');
|
|
94
104
|
});
|
|
95
105
|
}, function (props) {
|
|
96
|
-
return props.error && styled.css(
|
|
106
|
+
return props.error && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
97
107
|
return props.theme.getColor('red-500');
|
|
98
108
|
});
|
|
99
109
|
}, function (props) {
|
|
100
|
-
return props.
|
|
110
|
+
return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300'));
|
|
111
|
+
}, function (props) {
|
|
112
|
+
return props.bold && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
|
|
101
113
|
});
|
|
102
|
-
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
114
|
+
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = 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) {
|
|
103
115
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('emerald-500'), 1);
|
|
104
116
|
});
|
|
105
117
|
|
|
@@ -136,6 +148,7 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
136
148
|
autoSelect = _ref2.autoSelect,
|
|
137
149
|
readOnly = _ref2.readOnly,
|
|
138
150
|
edit = _ref2.edit,
|
|
151
|
+
success = _ref2.success,
|
|
139
152
|
error = _ref2.error,
|
|
140
153
|
warning = _ref2.warning,
|
|
141
154
|
bold = _ref2.bold,
|
|
@@ -143,7 +156,7 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
143
156
|
onChangeProp = _ref2.onChange,
|
|
144
157
|
onFocusProp = _ref2.onFocus,
|
|
145
158
|
onBlurProp = _ref2.onBlur,
|
|
146
|
-
props = defaultTheme._objectWithoutProperties(_ref2, ["label", "type", "name", "defaultValue", "value", "placeholder", "link", "linkTarget", "autoSelect", "readOnly", "edit", "error", "warning", "bold", "hidden", "onChange", "onFocus", "onBlur"]);
|
|
159
|
+
props = defaultTheme._objectWithoutProperties(_ref2, ["label", "type", "name", "defaultValue", "value", "placeholder", "link", "linkTarget", "autoSelect", "readOnly", "edit", "success", "error", "warning", "bold", "hidden", "onChange", "onFocus", "onBlur"]);
|
|
147
160
|
|
|
148
161
|
var _useState = React.useState(nanoid.nanoid()),
|
|
149
162
|
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
@@ -241,10 +254,12 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
241
254
|
name: name,
|
|
242
255
|
readOnly: readOnly,
|
|
243
256
|
edit: edit,
|
|
257
|
+
sucess: success,
|
|
244
258
|
placeholder: placeholder,
|
|
245
259
|
defaultValue: defaultValue,
|
|
246
260
|
value: value,
|
|
247
261
|
error: error,
|
|
262
|
+
success: success,
|
|
248
263
|
warning: warning,
|
|
249
264
|
bold: bold,
|
|
250
265
|
hasLink: !lodash.isEmpty(link),
|
|
@@ -254,7 +269,7 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
254
269
|
}), !readOnly && React__default['default'].createElement(InputIconContainer, {
|
|
255
270
|
error: error,
|
|
256
271
|
warning: warning
|
|
257
|
-
}, React__default['default'].createElement(editNote.SvgEditNote, null))))));
|
|
272
|
+
}, React__default['default'].createElement(editNote.SvgEditNote, null)), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null))))));
|
|
258
273
|
});
|
|
259
274
|
CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
260
275
|
label: defaultTheme.PropTypes.string,
|
|
@@ -268,6 +283,7 @@ CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
268
283
|
autoSelect: defaultTheme.PropTypes.bool,
|
|
269
284
|
readOnly: defaultTheme.PropTypes.bool,
|
|
270
285
|
edit: defaultTheme.PropTypes.bool,
|
|
286
|
+
success: defaultTheme.PropTypes.bool,
|
|
271
287
|
error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
272
288
|
warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
273
289
|
bold: defaultTheme.PropTypes.bool,
|
|
@@ -282,6 +298,7 @@ CompactTextInput.defaultProps = {
|
|
|
282
298
|
linkTarget: '_self',
|
|
283
299
|
bold: false,
|
|
284
300
|
readOnly: false,
|
|
301
|
+
success: false,
|
|
285
302
|
edit: false,
|
|
286
303
|
error: false,
|
|
287
304
|
warning: false,
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
var defaultTheme = require('./defaultTheme-50f2b88f.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
|
-
var TextArea = require('./TextArea-
|
|
7
|
-
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-
|
|
6
|
+
var TextArea = require('./TextArea-76e2ff1e.js');
|
|
7
|
+
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-0160cb3e.js');
|
|
8
8
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
9
9
|
var lodash = require('lodash');
|
|
10
10
|
|
|
@@ -15,7 +15,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
15
15
|
var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
|
|
16
16
|
|
|
17
17
|
var _templateObject, _templateObject2, _templateObject3;
|
|
18
|
-
var Popover$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 color: inherit;\n border-radius: 0;\n line-height: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n
|
|
18
|
+
var Popover$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 color: inherit;\n border-radius: 0;\n line-height: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .tippy-content {\n padding: 0;\n }\n\n .tippy-arrow {\n ", "\n }\n\n && > .tippy-arrow::before {\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n & > .tippy-arrow::after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-placement^='top'] {\n & > .tippy-arrow:before {\n bottom: -16px;\n left: -5px;\n border-width: 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -15px;\n left: -5px;\n border-width: 15px 13px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='right'] {\n & > .tippy-arrow:before {\n bottom: -5px;\n left: -16px;\n border-width: 13px 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -5px;\n left: -15px;\n border-width: 13px 15px 13px 0;\n border-right-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='bottom'] {\n & > .tippy-arrow:before {\n top: -16px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n ", "\n }\n\n & > .tippy-arrow:after {\n top: -14.5px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n border-bottom-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='left'] {\n & > .tippy-arrow::before {\n bottom: -5px;\n right: -16px;\n border-width: 13px 0 13px 15px;\n ", "\n }\n\n & > .tippy-arrow::after {\n bottom: -5px;\n right: -15px;\n border-width: 13px 0 13px 15px;\n border-left-color: initial;\n transform-origin: center top;\n }\n }\n"])), function (props) {
|
|
19
19
|
return props.theme.primaryFontFamily;
|
|
20
20
|
}, function (props) {
|
|
21
21
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
|
|
@@ -32,15 +32,15 @@ var Popover$1 = styled__default['default'](TippyTooltip__default['default']).att
|
|
|
32
32
|
}, function (props) {
|
|
33
33
|
return props.contextMenuSublevel && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n &[data-placement^='right-start'],\n &[data-placement^='left-start'] {\n margin-top: -4px;\n }\n\n &[data-placement^='left'] {\n margin-right: -6px;\n }\n\n &[data-placement^='right'] {\n margin-left: -6px;\n }\n "])));
|
|
34
34
|
}, function (props) {
|
|
35
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'));
|
|
35
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'), 1);
|
|
36
36
|
}, function (props) {
|
|
37
|
-
return props.theme.themeProp('border-top-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-
|
|
37
|
+
return props.theme.themeProp('border-top-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
|
|
38
38
|
}, function (props) {
|
|
39
|
-
return props.theme.themeProp('border-right-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-
|
|
39
|
+
return props.theme.themeProp('border-right-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
|
|
40
40
|
}, function (props) {
|
|
41
|
-
return props.theme.themeProp('border-bottom-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-
|
|
41
|
+
return props.theme.themeProp('border-bottom-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
|
|
42
42
|
}, function (props) {
|
|
43
|
-
return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-
|
|
43
|
+
return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
|
|
44
44
|
});
|
|
45
45
|
|
|
46
46
|
var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
|
|
@@ -6,13 +6,14 @@ var nanoid = require('nanoid');
|
|
|
6
6
|
var styled = require('styled-components');
|
|
7
7
|
var lodash = require('lodash');
|
|
8
8
|
var editNote = require('./edit-note-c47d292e.js');
|
|
9
|
+
var checkCircleFilled = require('./check-circle-filled-1640873e.js');
|
|
9
10
|
|
|
10
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
12
|
|
|
12
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
14
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
14
15
|
|
|
15
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
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;
|
|
16
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"])));
|
|
17
18
|
var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n"])), function (props) {
|
|
18
19
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
@@ -22,7 +23,12 @@ var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = de
|
|
|
22
23
|
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = 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"])), function (props) {
|
|
23
24
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
|
|
24
25
|
});
|
|
25
|
-
var
|
|
26
|
+
var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\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: 6px;\n top: 8px;\n bottom: 0;\n svg {\n width: 15px;\n color: ", ";\n }\n"])), function (props) {
|
|
27
|
+
return props.theme.getColor('emerald-500');
|
|
28
|
+
});
|
|
29
|
+
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: block;\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\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\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) {
|
|
30
|
+
return props.expanded && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n height: ", "em;\n "])), props.maxHeight);
|
|
31
|
+
}, function (props) {
|
|
26
32
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
27
33
|
}, function (props) {
|
|
28
34
|
return (props.warningAlert || props.errorAlert) && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
|
|
@@ -31,25 +37,29 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
31
37
|
}, function (props) {
|
|
32
38
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
|
|
33
39
|
}, function (props) {
|
|
34
|
-
return props.noBorder && styled.css(
|
|
40
|
+
return props.noBorder && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
|
|
41
|
+
}, function (props) {
|
|
42
|
+
return props.success && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300')), props.theme.themeProp('background', '#64b49d !important', '#bfe0d5 !important'));
|
|
35
43
|
}, function (props) {
|
|
36
|
-
return props.warningAlert && styled.css(
|
|
44
|
+
return props.warningAlert && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n background: ", " !important;\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n background: ", " !important;\n }\n &&:read-only:hover {\n background: ", " !important;\n }\n "])), props.theme.getColor('signal-yellow-400'), props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400'));
|
|
37
45
|
}, function (props) {
|
|
38
|
-
return props.errorAlert && styled.css(
|
|
46
|
+
return props.errorAlert && styled.css(_templateObject10 || (_templateObject10 = 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'));
|
|
39
47
|
}, function (props) {
|
|
40
|
-
return props.lightBackground && styled.css(
|
|
48
|
+
return props.lightBackground && styled.css(_templateObject11 || (_templateObject11 = 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'));
|
|
41
49
|
}, function (props) {
|
|
42
50
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
43
51
|
}, function (props) {
|
|
44
52
|
return props.noBorder && !props.readOnly ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
|
|
45
53
|
}, InputIconContainer, function (props) {
|
|
46
|
-
return props.
|
|
54
|
+
return props.success && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
47
55
|
}, function (props) {
|
|
48
|
-
return props.
|
|
56
|
+
return props.warning && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
|
|
49
57
|
}, function (props) {
|
|
50
|
-
return props.
|
|
58
|
+
return props.error && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
|
|
51
59
|
}, function (props) {
|
|
52
|
-
return
|
|
60
|
+
return props.hasIcon && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
|
|
61
|
+
}, function (props) {
|
|
62
|
+
return (props.warningAlert || props.errorAlert) && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
|
|
53
63
|
}, function (props) {
|
|
54
64
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
|
|
55
65
|
}, function (props) {
|
|
@@ -59,26 +69,31 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
59
69
|
}, function (props) {
|
|
60
70
|
return props.theme.getColor('gray-600');
|
|
61
71
|
});
|
|
62
|
-
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
72
|
+
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = 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) {
|
|
63
73
|
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%)"));
|
|
64
74
|
}, function (props) {
|
|
65
|
-
return props.hasPlaceholder && styled.css(
|
|
75
|
+
return props.hasPlaceholder && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.error && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
|
|
66
76
|
}, function (props) {
|
|
67
|
-
return props.hasIcon && styled.css(
|
|
77
|
+
return props.hasIcon && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
|
|
68
78
|
});
|
|
69
|
-
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
70
|
-
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
79
|
+
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = 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"])));
|
|
80
|
+
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = 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) {
|
|
71
81
|
return props.theme.themeProp('color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1);
|
|
72
82
|
});
|
|
73
|
-
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
83
|
+
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\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"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
74
84
|
return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
75
85
|
}, function (props) {
|
|
76
|
-
return props.disabled && styled.css(
|
|
86
|
+
return props.disabled && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
77
87
|
});
|
|
78
|
-
var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(
|
|
88
|
+
var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = 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) {
|
|
79
89
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
80
90
|
}, function (props) {
|
|
81
|
-
return props.error && styled.css(
|
|
91
|
+
return props.error && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
92
|
+
});
|
|
93
|
+
var ShowMoreText = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = 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) {
|
|
94
|
+
return props.theme.themeProp('color', props.theme.getColor('emerald-300'), props.theme.getColor('emerald-500'));
|
|
95
|
+
}, function (props) {
|
|
96
|
+
return props.error && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
82
97
|
});
|
|
83
98
|
|
|
84
99
|
var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
|
|
@@ -92,8 +107,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
92
107
|
hidden = _ref.hidden,
|
|
93
108
|
readOnly = _ref.readOnly,
|
|
94
109
|
edit = _ref.edit,
|
|
110
|
+
showMore = _ref.showMore,
|
|
111
|
+
showMoreText = _ref.showMoreText,
|
|
95
112
|
autoComplete = _ref.autoComplete,
|
|
96
113
|
description = _ref.description,
|
|
114
|
+
success = _ref.success,
|
|
97
115
|
error = _ref.error,
|
|
98
116
|
warning = _ref.warning,
|
|
99
117
|
icon = _ref.icon,
|
|
@@ -106,11 +124,38 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
106
124
|
noBorder = _ref.noBorder,
|
|
107
125
|
warningAlert = _ref.warningAlert,
|
|
108
126
|
errorAlert = _ref.errorAlert,
|
|
109
|
-
rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
|
|
127
|
+
rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "autoComplete", "description", "success", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
|
|
128
|
+
|
|
129
|
+
var lineheight = 1.5;
|
|
130
|
+
|
|
131
|
+
var _useState = React.useState(''),
|
|
132
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
133
|
+
contentRows = _useState2[0],
|
|
134
|
+
setContentRows = _useState2[1];
|
|
135
|
+
|
|
136
|
+
var _useState3 = React.useState(rows),
|
|
137
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
138
|
+
defaultRows = _useState4[0],
|
|
139
|
+
setDefaultRows = _useState4[1];
|
|
110
140
|
|
|
111
|
-
var
|
|
112
|
-
|
|
113
|
-
|
|
141
|
+
var _useState5 = React.useState(false),
|
|
142
|
+
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
143
|
+
expanded = _useState6[0],
|
|
144
|
+
setExpanded = _useState6[1];
|
|
145
|
+
|
|
146
|
+
var _useState7 = React.useState("".concat(defaultRows * lineheight, "em")),
|
|
147
|
+
_useState8 = defaultTheme._slicedToArray(_useState7, 2),
|
|
148
|
+
maxHeight = _useState8[0],
|
|
149
|
+
setMaxHeight = _useState8[1];
|
|
150
|
+
|
|
151
|
+
console.log('default maxHeight', maxHeight);
|
|
152
|
+
React.useEffect(function () {
|
|
153
|
+
setDefaultRows(rows);
|
|
154
|
+
}, []);
|
|
155
|
+
|
|
156
|
+
var _useState9 = React.useState(nanoid.nanoid()),
|
|
157
|
+
_useState10 = defaultTheme._slicedToArray(_useState9, 1),
|
|
158
|
+
uniqueId = _useState10[0];
|
|
114
159
|
|
|
115
160
|
var hasError = React.useMemo(function () {
|
|
116
161
|
if (lodash.isBoolean(error)) {
|
|
@@ -141,6 +186,26 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
141
186
|
|
|
142
187
|
return null;
|
|
143
188
|
}, [description, error, warning]);
|
|
189
|
+
|
|
190
|
+
var handleTextAreaChange = function handleTextAreaChange(event) {
|
|
191
|
+
var textarea = event.target;
|
|
192
|
+
var currentRows = Math.floor(textarea.scrollHeight / (lineheight * 0.9));
|
|
193
|
+
var maxHeight = currentRows * lineheight + 'em';
|
|
194
|
+
|
|
195
|
+
if (lodash.isEmpty(currentRows)) {
|
|
196
|
+
setContentRows(currentRows);
|
|
197
|
+
setMaxHeight(maxHeight);
|
|
198
|
+
setExpanded(true);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
if (contentRows > defaultRows) {
|
|
202
|
+
setContentRows(defaultRows);
|
|
203
|
+
setExpanded(false);
|
|
204
|
+
}
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
console.log('maxHeight', maxHeight);
|
|
208
|
+
console.log('expanded', expanded);
|
|
144
209
|
if (hidden) return null;
|
|
145
210
|
return React__default['default'].createElement(TextInput, {
|
|
146
211
|
disabled: disabled,
|
|
@@ -148,10 +213,13 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
148
213
|
error: hasError,
|
|
149
214
|
warning: hasWarning,
|
|
150
215
|
className: className,
|
|
151
|
-
style: style
|
|
216
|
+
style: style,
|
|
217
|
+
showMore: showMore
|
|
152
218
|
}, !warningAlert && !errorAlert && React__default['default'].createElement(TextInputFieldIcon, null, icon), (warningAlert || errorAlert) && React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
|
|
153
219
|
ref: forwardedRef,
|
|
154
|
-
rows: rows,
|
|
220
|
+
rows: contentRows > rows ? contentRows : rows,
|
|
221
|
+
expanded: expanded,
|
|
222
|
+
maxHeight: maxHeight,
|
|
155
223
|
value: value,
|
|
156
224
|
defaultValue: defaultValue,
|
|
157
225
|
name: name,
|
|
@@ -160,6 +228,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
160
228
|
disabled: disabled || readOnly,
|
|
161
229
|
readOnly: readOnly,
|
|
162
230
|
edit: edit,
|
|
231
|
+
success: success,
|
|
163
232
|
autoComplete: autoComplete,
|
|
164
233
|
hasIcon: Boolean(icon),
|
|
165
234
|
icon: icon,
|
|
@@ -175,14 +244,17 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
175
244
|
}, rest)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
|
|
176
245
|
warningAlert: warningAlert,
|
|
177
246
|
errorAlert: errorAlert
|
|
178
|
-
}, React__default['default'].createElement(editNote.SvgEditNote, null)), label && React__default['default'].createElement(TextInputLabel, {
|
|
247
|
+
}, React__default['default'].createElement(editNote.SvgEditNote, null)), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null)), label && React__default['default'].createElement(TextInputLabel, {
|
|
179
248
|
htmlFor: "text-input-".concat(uniqueId),
|
|
180
249
|
hasPlaceholder: Boolean(placeholder),
|
|
181
250
|
hasIcon: Boolean(icon),
|
|
182
251
|
error: hasError
|
|
183
252
|
}, label, required && ' *'), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
|
|
184
253
|
error: hasError
|
|
185
|
-
}, descriptionText)
|
|
254
|
+
}, descriptionText), typeof showMoreText === 'string' && showMoreText.length > 0 && React__default['default'].createElement(ShowMoreText, {
|
|
255
|
+
onClick: handleTextAreaChange,
|
|
256
|
+
showMore: showMore
|
|
257
|
+
}, showMoreText));
|
|
186
258
|
});
|
|
187
259
|
TextArea.defaultProps = {
|
|
188
260
|
rows: 4,
|
|
@@ -191,7 +263,9 @@ TextArea.defaultProps = {
|
|
|
191
263
|
edit: false,
|
|
192
264
|
warningAlert: false,
|
|
193
265
|
errorAlert: false,
|
|
194
|
-
hidden: false
|
|
266
|
+
hidden: false,
|
|
267
|
+
showMore: false,
|
|
268
|
+
showMoreText: ''
|
|
195
269
|
};
|
|
196
270
|
TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
197
271
|
value: defaultTheme.PropTypes.string,
|
|
@@ -203,11 +277,14 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
203
277
|
disabled: defaultTheme.PropTypes.bool,
|
|
204
278
|
hidden: defaultTheme.PropTypes.bool,
|
|
205
279
|
readOnly: defaultTheme.PropTypes.bool,
|
|
280
|
+
showMore: defaultTheme.PropTypes.bool,
|
|
281
|
+
showMoreText: defaultTheme.PropTypes.string,
|
|
206
282
|
edit: defaultTheme.PropTypes.bool,
|
|
207
283
|
autoComplete: defaultTheme.PropTypes.string,
|
|
208
284
|
description: defaultTheme.PropTypes.string,
|
|
209
285
|
error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
210
286
|
warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
287
|
+
success: defaultTheme.PropTypes.bool,
|
|
211
288
|
icon: defaultTheme.PropTypes.element,
|
|
212
289
|
rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
|
|
213
290
|
className: defaultTheme.PropTypes.string,
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
function _interopNamespace(e) {
|
|
6
|
+
if (e && e.__esModule) return e;
|
|
7
|
+
var n = Object.create(null);
|
|
8
|
+
if (e) {
|
|
9
|
+
Object.keys(e).forEach(function (k) {
|
|
10
|
+
if (k !== 'default') {
|
|
11
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
12
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return e[k];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
n['default'] = e;
|
|
22
|
+
return Object.freeze(n);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
26
|
+
|
|
27
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
28
|
+
|
|
29
|
+
var _ref = /*#__PURE__*/React__namespace.createElement("path", {
|
|
30
|
+
fill: "currentColor",
|
|
31
|
+
d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
|
|
32
|
+
fillOpacity: 0.9
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
function SvgCheckCircleFilled(props) {
|
|
36
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
37
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
38
|
+
viewBox: "0 0 24 24"
|
|
39
|
+
}, props), _ref);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
exports.SvgCheckCircleFilled = SvgCheckCircleFilled;
|
package/data/Popover/index.js
CHANGED
package/data/index.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var Alert = require('../Alert-3e4f8be1.js');
|
|
6
6
|
var Badge = require('../Badge-9bcebe96.js');
|
|
7
|
-
var Popover = require('../Popover-
|
|
7
|
+
var Popover = require('../Popover-cf1e9677.js');
|
|
8
8
|
var Tab = require('../Tab-bd0f3345.js');
|
|
9
9
|
var Tabs = require('../Tabs-cfc35dc0.js');
|
|
10
10
|
var Tooltip = require('../Tooltip-f4f9ab8f.js');
|
package/inputs/Button/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Button = require('../../Button-
|
|
3
|
+
var Button = require('../../Button-f893df21.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
7
|
-
require('../../Popover-
|
|
7
|
+
require('../../Popover-cf1e9677.js');
|
|
8
8
|
require('lodash');
|
|
9
9
|
require('polished');
|
|
10
10
|
require('@tippyjs/react');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-
|
|
3
|
+
var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-0160cb3e.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
@@ -12,6 +12,7 @@ require('react-dom');
|
|
|
12
12
|
require('react-select-async-paginate');
|
|
13
13
|
require('../../close-ebf2f3cf.js');
|
|
14
14
|
require('../../expand-more-94585605.js');
|
|
15
|
+
require('../../check-circle-filled-1640873e.js');
|
|
15
16
|
|
|
16
17
|
|
|
17
18
|
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var CompactTextInput = require('../../CompactTextInput-
|
|
3
|
+
var CompactTextInput = require('../../CompactTextInput-d2fabaf5.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
7
7
|
require('nanoid');
|
|
8
8
|
require('lodash');
|
|
9
9
|
require('../../edit-note-c47d292e.js');
|
|
10
|
+
require('../../check-circle-filled-1640873e.js');
|
|
10
11
|
require('../../Alert-3e4f8be1.js');
|
|
11
12
|
require('../../Badge-9bcebe96.js');
|
|
12
|
-
require('../../Popover-
|
|
13
|
+
require('../../Popover-cf1e9677.js');
|
|
13
14
|
require('polished');
|
|
14
15
|
require('@tippyjs/react');
|
|
15
16
|
require('../../shift-away-subtle-cfdf1dbe.js');
|
package/inputs/TextArea/index.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var TextArea = require('../../TextArea-
|
|
3
|
+
var TextArea = require('../../TextArea-76e2ff1e.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
7
7
|
require('nanoid');
|
|
8
8
|
require('lodash');
|
|
9
9
|
require('../../edit-note-c47d292e.js');
|
|
10
|
+
require('../../check-circle-filled-1640873e.js');
|
|
10
11
|
|
|
11
12
|
|
|
12
13
|
|
package/inputs/index.js
CHANGED
|
@@ -3,20 +3,20 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var ActionButton = require('../ActionButton-c3f5ed94.js');
|
|
6
|
-
var Button = require('../Button-
|
|
6
|
+
var Button = require('../Button-f893df21.js');
|
|
7
7
|
var Checkbox = require('../Checkbox-012bbd3f.js');
|
|
8
|
-
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-
|
|
8
|
+
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-0160cb3e.js');
|
|
9
9
|
var CompactStarRating = require('../CompactStarRating-9c4c4f2c.js');
|
|
10
|
-
var CompactTextInput = require('../CompactTextInput-
|
|
10
|
+
var CompactTextInput = require('../CompactTextInput-d2fabaf5.js');
|
|
11
11
|
var MultiSelect = require('../MultiSelect-5b008b32.js');
|
|
12
12
|
var Radio = require('../Radio-0594409d.js');
|
|
13
|
-
var TextArea = require('../TextArea-
|
|
13
|
+
var TextArea = require('../TextArea-76e2ff1e.js');
|
|
14
14
|
var TextInput = require('../TextInput-a1083be3.js');
|
|
15
15
|
var Switch = require('../Switch-cd165c8c.js');
|
|
16
16
|
require('../defaultTheme-50f2b88f.js');
|
|
17
17
|
require('styled-components');
|
|
18
18
|
require('react');
|
|
19
|
-
require('../Popover-
|
|
19
|
+
require('../Popover-cf1e9677.js');
|
|
20
20
|
require('lodash');
|
|
21
21
|
require('polished');
|
|
22
22
|
require('@tippyjs/react');
|
|
@@ -29,6 +29,7 @@ require('../react-select-creatable.esm-2f23d6c6.js');
|
|
|
29
29
|
require('react-dom');
|
|
30
30
|
require('react-select-async-paginate');
|
|
31
31
|
require('../close-ebf2f3cf.js');
|
|
32
|
+
require('../check-circle-filled-1640873e.js');
|
|
32
33
|
require('../edit-note-c47d292e.js');
|
|
33
34
|
require('../Alert-3e4f8be1.js');
|
|
34
35
|
require('../Badge-9bcebe96.js');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var AssetGallery = require('../../AssetGallery-
|
|
3
|
+
var AssetGallery = require('../../AssetGallery-59ea0b08.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
@@ -11,22 +11,23 @@ require('../../edit-note-c47d292e.js');
|
|
|
11
11
|
require('resize-observer-polyfill');
|
|
12
12
|
require('react-lazy-load-image-component');
|
|
13
13
|
require('../../ActionButton-c3f5ed94.js');
|
|
14
|
-
require('../../Button-
|
|
15
|
-
require('../../Popover-
|
|
14
|
+
require('../../Button-f893df21.js');
|
|
15
|
+
require('../../Popover-cf1e9677.js');
|
|
16
16
|
require('polished');
|
|
17
17
|
require('@tippyjs/react');
|
|
18
18
|
require('../../shift-away-subtle-cfdf1dbe.js');
|
|
19
19
|
require('../../ContextMenu-d088833b.js');
|
|
20
20
|
require('../../expand-more-94585605.js');
|
|
21
21
|
require('../../Checkbox-012bbd3f.js');
|
|
22
|
-
require('../../CompactAutocompleteSelect-
|
|
22
|
+
require('../../CompactAutocompleteSelect-0160cb3e.js');
|
|
23
23
|
require('react-select');
|
|
24
24
|
require('../../react-select-creatable.esm-2f23d6c6.js');
|
|
25
25
|
require('react-dom');
|
|
26
26
|
require('react-select-async-paginate');
|
|
27
27
|
require('../../close-ebf2f3cf.js');
|
|
28
|
+
require('../../check-circle-filled-1640873e.js');
|
|
28
29
|
require('../../CompactStarRating-9c4c4f2c.js');
|
|
29
|
-
require('../../CompactTextInput-
|
|
30
|
+
require('../../CompactTextInput-d2fabaf5.js');
|
|
30
31
|
require('../../Alert-3e4f8be1.js');
|
|
31
32
|
require('../../Badge-9bcebe96.js');
|
|
32
33
|
require('../../Tab-bd0f3345.js');
|
|
@@ -34,7 +35,7 @@ require('../../Tabs-cfc35dc0.js');
|
|
|
34
35
|
require('../../Tooltip-f4f9ab8f.js');
|
|
35
36
|
require('../../MultiSelect-5b008b32.js');
|
|
36
37
|
require('../../Radio-0594409d.js');
|
|
37
|
-
require('../../TextArea-
|
|
38
|
+
require('../../TextArea-76e2ff1e.js');
|
|
38
39
|
require('../../Switch-cd165c8c.js');
|
|
39
40
|
require('../../warning-circle-24522402.js');
|
|
40
41
|
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Instructions = require('../../Instructions-
|
|
3
|
+
var Instructions = require('../../Instructions-3be0c5c8.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
7
|
-
require('../../TextArea-
|
|
7
|
+
require('../../TextArea-76e2ff1e.js');
|
|
8
8
|
require('nanoid');
|
|
9
9
|
require('lodash');
|
|
10
10
|
require('../../edit-note-c47d292e.js');
|
|
11
|
-
require('../../
|
|
11
|
+
require('../../check-circle-filled-1640873e.js');
|
|
12
|
+
require('../../CompactAutocompleteSelect-0160cb3e.js');
|
|
12
13
|
require('react-select');
|
|
13
14
|
require('../../react-select-creatable.esm-2f23d6c6.js');
|
|
14
15
|
require('react-dom');
|
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-59ea0b08.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-3be0c5c8.js');
|
|
9
9
|
require('../defaultTheme-50f2b88f.js');
|
|
10
10
|
require('styled-components');
|
|
11
11
|
require('react');
|
|
@@ -16,21 +16,22 @@ require('../edit-note-c47d292e.js');
|
|
|
16
16
|
require('resize-observer-polyfill');
|
|
17
17
|
require('react-lazy-load-image-component');
|
|
18
18
|
require('../ActionButton-c3f5ed94.js');
|
|
19
|
-
require('../Button-
|
|
20
|
-
require('../Popover-
|
|
19
|
+
require('../Button-f893df21.js');
|
|
20
|
+
require('../Popover-cf1e9677.js');
|
|
21
21
|
require('polished');
|
|
22
22
|
require('@tippyjs/react');
|
|
23
23
|
require('../shift-away-subtle-cfdf1dbe.js');
|
|
24
24
|
require('../expand-more-94585605.js');
|
|
25
25
|
require('../Checkbox-012bbd3f.js');
|
|
26
|
-
require('../CompactAutocompleteSelect-
|
|
26
|
+
require('../CompactAutocompleteSelect-0160cb3e.js');
|
|
27
27
|
require('react-select');
|
|
28
28
|
require('../react-select-creatable.esm-2f23d6c6.js');
|
|
29
29
|
require('react-dom');
|
|
30
30
|
require('react-select-async-paginate');
|
|
31
31
|
require('../close-ebf2f3cf.js');
|
|
32
|
+
require('../check-circle-filled-1640873e.js');
|
|
32
33
|
require('../CompactStarRating-9c4c4f2c.js');
|
|
33
|
-
require('../CompactTextInput-
|
|
34
|
+
require('../CompactTextInput-d2fabaf5.js');
|
|
34
35
|
require('../Alert-3e4f8be1.js');
|
|
35
36
|
require('../Badge-9bcebe96.js');
|
|
36
37
|
require('../Tab-bd0f3345.js');
|
|
@@ -38,7 +39,7 @@ require('../Tabs-cfc35dc0.js');
|
|
|
38
39
|
require('../Tooltip-f4f9ab8f.js');
|
|
39
40
|
require('../MultiSelect-5b008b32.js');
|
|
40
41
|
require('../Radio-0594409d.js');
|
|
41
|
-
require('../TextArea-
|
|
42
|
+
require('../TextArea-76e2ff1e.js');
|
|
42
43
|
require('../Switch-cd165c8c.js');
|
|
43
44
|
require('../warning-circle-24522402.js');
|
|
44
45
|
|