@ntbjs/react-components 1.1.0-beta.83 → 1.1.0-beta.85

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