@ntbjs/react-components 1.1.0-beta.86 → 1.1.0-beta.87

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.
@@ -11,10 +11,10 @@ require('./Button-432f87c6.js');
11
11
  require('./Checkbox-85394137.js');
12
12
  require('./CompactAutocompleteSelect-5ee8443f.js');
13
13
  require('./CompactStarRating-de1bcfe9.js');
14
- require('./CompactTextInput-cae26b42.js');
14
+ require('./CompactTextInput-480f59cc.js');
15
15
  require('./MultiSelect-01a257b8.js');
16
16
  require('./Radio-c811ce4a.js');
17
- require('./TextArea-d9e639e4.js');
17
+ require('./TextArea-a4a70687.js');
18
18
  require('./Switch-3ac11c97.js');
19
19
  require('./Alert-3e4f8be1.js');
20
20
  require('./Badge-9bcebe96.js');
@@ -105,7 +105,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
105
105
  }, function (props) {
106
106
  return props.state === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
107
107
  });
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) {
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 ", ";\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) {
109
109
  return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
110
110
  }, function (props) {
111
111
  return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
@@ -143,6 +143,8 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
143
143
  return props.state === 'warning' && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
144
144
  }, function (props) {
145
145
  return props.state === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
146
+ }, function (props) {
147
+ return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
146
148
  }, function (props) {
147
149
  return props.state === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
148
150
  }, function (props) {
@@ -5,7 +5,7 @@ var lodash = require('lodash');
5
5
  var React = require('react');
6
6
  var warningCircle = require('./warning-circle-24522402.js');
7
7
  var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-5ee8443f.js');
8
- var TextArea = require('./TextArea-d9e639e4.js');
8
+ var TextArea = require('./TextArea-a4a70687.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 }; }
@@ -49,7 +49,9 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
49
49
  rows = _ref.rows,
50
50
  showMore = _ref.showMore,
51
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"]);
52
+ isExpanded = _ref.isExpanded,
53
+ maxRows = _ref.maxRows,
54
+ 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", "isExpanded", "maxRows"]);
53
55
 
54
56
  var _useState = React.useState(false),
55
57
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -192,6 +194,8 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
192
194
  readOnly: readOnly,
193
195
  disabled: disabled,
194
196
  name: name,
197
+ isExpanded: isExpanded,
198
+ maxRows: maxRows,
195
199
  editWarning: editWarning,
196
200
  value: currentValue === null ? '' : currentValue,
197
201
  onFocus: onFocus,
@@ -237,7 +241,9 @@ Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
237
241
  onFocus: defaultTheme.PropTypes.func,
238
242
  onBlur: defaultTheme.PropTypes.func,
239
243
  onUpdateCallback: defaultTheme.PropTypes.func,
240
- state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success'])
244
+ state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
245
+ maxRows: defaultTheme.PropTypes.func,
246
+ isExpanded: defaultTheme.PropTypes.func
241
247
  } : {};
242
248
 
243
249
  exports.Instructions = Instructions;
@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
14
 
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
15
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39;
16
16
  var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
17
17
  var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
18
18
  var activeLabel = styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
@@ -27,7 +27,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
27
27
  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
28
28
  });
29
29
  var Container = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral([""])));
30
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 13px 10px;\n resize: vertical;\n transition: height 0.3s ease;\n z-index: 0; \n ", "\n ", "\n\n ", "\n\n\n ", "\n\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n ", "\n \n ", " \n\n ", " \n\n ", " \n ", "\n ", ";\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n \n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n ", "\n ", "\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n \n"])), function (props) {
30
+ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 13px 10px;\n resize: vertical;\n transition: height 0.3s ease;\n z-index: 0;\n ", "\n ", "\n\n ", "\n ", "\n\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n ", "\n\n &&:hover:not(:focus) {\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"])), function (props) {
31
31
  return props.theme.themeProp('color', 'white', 'black');
32
32
  }, function (props) {
33
33
  return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
@@ -36,7 +36,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
36
36
  }, function (props) {
37
37
  return props.expanded && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n height: ", "em;\n "])), props.maxHeight);
38
38
  }, function (props) {
39
- return props.showMore && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
39
+ return props.showMore && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
40
40
  }, function (props) {
41
41
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
42
42
  }, function (props) {
@@ -48,31 +48,33 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
48
48
  }, function (props) {
49
49
  return props.noBorder && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
50
50
  }, function (props) {
51
- return props.state === 'error-border' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
51
+ return props.state === 'error-border' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
52
52
  }, function (props) {
53
- return props.state === 'warning' && !props.editWarning && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n :focus {\n background: white !important;\n color: black !important;\n }\n &&:hover:not(:focus) {\n ", "\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')), function (props) {
54
- return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n "])));
53
+ return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
54
+ }, function (props) {
55
+ return props.state === 'warning' && !props.editWarning && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n :focus {\n background: white !important;\n color: black !important;\n }\n &&:hover:not(:focus) {\n ", "\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')), function (props) {
56
+ return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n "])));
55
57
  }, props.theme.themeProp('background', '#816600', '#F4E21E'), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
56
58
  }, function (props) {
57
- return props.state === 'warning' && props.editWarning && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#fffde8', '#fffde8'), props.theme.themeProp('background', '#fffebf', '#fffebf'), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
59
+ return props.state === 'warning' && props.editWarning && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#fffde8', '#fffde8'), props.theme.themeProp('background', '#fffebf', '#fffebf'), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
58
60
  }, function (props) {
59
61
  return props.state === 'error' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n background: ", " !important;\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n background: #f7d5d0 !important;\n }\n &&:read-only:hover {\n background: ", " !important;\n }\n "])), props.theme.getColor('red-200'), props.theme.getColor('red-200'));
60
62
  }, function (props) {
61
- return props.lightBackground && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
63
+ return props.lightBackground && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
62
64
  }, function (props) {
63
65
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
64
66
  }, function (props) {
65
67
  return props.noBorder && !props.readOnly && props.state != 'warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
66
68
  }, InputIconContainer, function (props) {
67
- return props.state === 'success' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
69
+ return props.state === 'success' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
68
70
  }, function (props) {
69
71
  return props.state === 'warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('orange-500'));
70
72
  }, function (props) {
71
73
  return props.state === 'error' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('red-500'));
72
74
  }, function (props) {
73
- return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
75
+ return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
74
76
  }, function (props) {
75
- return props.instructionsTextArea && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 15px;\n padding-right: 50px;\n "])));
77
+ return props.instructionsTextArea && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 15px;\n padding-right: 50px;\n "])));
76
78
  }, function (props) {
77
79
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
78
80
  }, function (props) {
@@ -80,40 +82,44 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
80
82
  }, function (props) {
81
83
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
82
84
  }, function (props) {
83
- return props.theme.getColor('gray-600');
85
+ return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
84
86
  });
85
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n\n ", ";\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
87
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
86
88
  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%)"));
87
89
  }, function (props) {
88
- return props.hasPlaceholder && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.state === 'error' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
90
+ return !props.inputIsEmpty && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
91
+ }, function (props) {
92
+ return props.hasPlaceholder && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.state === 'error' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
89
93
  }, function (props) {
90
- return props.hasIcon && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
94
+ return props.hasIcon && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
91
95
  });
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: 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) {
96
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = 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"])));
97
+ var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = 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 margin-top: -3px;\n ", "\n }\n"])), function (props) {
94
98
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
95
99
  });
96
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n }\n"])), function (props) {
97
- return props.disabled && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
100
+ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n }\n\n ", "\n"])), function (props) {
101
+ return props.disabled && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
98
102
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
99
103
  return props.state === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
104
+ }, function (props) {
105
+ return props.disabled && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
100
106
  });
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) {
107
+ var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = 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
108
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
103
109
  }, function (props) {
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')));
110
+ return (props.state === 'error-border' || props.state === 'error') && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
105
111
  });
106
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
112
+ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
107
113
  return props.fadeIn ? 0 : 1;
108
114
  }, function (props) {
109
115
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
110
116
  }, function (props) {
111
117
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
112
118
  });
113
- 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) {
119
+ var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = 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) {
114
120
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
115
121
  }, function (props) {
116
- 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')));
122
+ return props.state === 'error' && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
117
123
  });
118
124
 
119
125
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -139,7 +145,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
139
145
  rows = _ref.rows,
140
146
  className = _ref.className,
141
147
  style = _ref.style,
142
- onChange = _ref.onChange,
148
+ _onChange = _ref.onChange,
143
149
  onBlur = _ref.onBlur,
144
150
  lightBackground = _ref.lightBackground,
145
151
  noBorder = _ref.noBorder,
@@ -148,43 +154,48 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
148
154
 
149
155
  var textInputRef = React.useRef(null);
150
156
 
151
- var _useState = React.useState(''),
157
+ var _useState = React.useState(!(value || defaultValue)),
152
158
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
153
- contentRows = _useState2[0],
154
- setContentRows = _useState2[1];
159
+ inputIsEmpty = _useState2[0],
160
+ setInputIsEmpty = _useState2[1];
155
161
 
156
162
  var _useState3 = React.useState(''),
157
163
  _useState4 = defaultTheme._slicedToArray(_useState3, 2),
158
- maxContentRows = _useState4[0],
159
- setMaxContentRows = _useState4[1];
164
+ contentRows = _useState4[0],
165
+ setContentRows = _useState4[1];
160
166
 
161
- var _useState5 = React.useState(rows),
167
+ var _useState5 = React.useState(''),
162
168
  _useState6 = defaultTheme._slicedToArray(_useState5, 2),
163
- defaultRows = _useState6[0],
164
- setDefaultRows = _useState6[1];
169
+ maxContentRows = _useState6[0],
170
+ setMaxContentRows = _useState6[1];
165
171
 
166
- var _useState7 = React.useState(false),
172
+ var _useState7 = React.useState(rows),
167
173
  _useState8 = defaultTheme._slicedToArray(_useState7, 2),
168
- expanded = _useState8[0],
169
- setExpanded = _useState8[1];
174
+ defaultRows = _useState8[0],
175
+ setDefaultRows = _useState8[1];
170
176
 
171
- var _useState9 = React.useState(''),
177
+ var _useState9 = React.useState(false),
172
178
  _useState10 = defaultTheme._slicedToArray(_useState9, 2),
173
- maxHeight = _useState10[0],
174
- setMaxHeight = _useState10[1];
179
+ expanded = _useState10[0],
180
+ setExpanded = _useState10[1];
175
181
 
176
- var _useState11 = React.useState(false),
182
+ var _useState11 = React.useState(''),
177
183
  _useState12 = defaultTheme._slicedToArray(_useState11, 2),
178
- showReadMore = _useState12[0],
179
- setShowReadMore = _useState12[1];
184
+ maxHeight = _useState12[0],
185
+ setMaxHeight = _useState12[1];
186
+
187
+ var _useState13 = React.useState(false),
188
+ _useState14 = defaultTheme._slicedToArray(_useState13, 2),
189
+ showReadMore = _useState14[0],
190
+ setShowReadMore = _useState14[1];
180
191
 
181
192
  React.useEffect(function () {
182
193
  setDefaultRows(rows);
183
194
  }, [rows]);
184
195
 
185
- var _useState13 = React.useState(nanoid.nanoid()),
186
- _useState14 = defaultTheme._slicedToArray(_useState13, 1),
187
- uniqueId = _useState14[0];
196
+ var _useState15 = React.useState(nanoid.nanoid()),
197
+ _useState16 = defaultTheme._slicedToArray(_useState15, 1),
198
+ uniqueId = _useState16[0];
188
199
 
189
200
  var handleTextAreaChange = function handleTextAreaChange() {
190
201
  setExpanded(!expanded);
@@ -254,7 +265,15 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
254
265
  icon: icon,
255
266
  id: "text-input-".concat(uniqueId),
256
267
  lightBackground: lightBackground,
257
- onChange: onChange,
268
+ onChange: function onChange(e) {
269
+ if (e.target.value) {
270
+ setInputIsEmpty(false);
271
+ } else {
272
+ setInputIsEmpty(true);
273
+ }
274
+
275
+ _onChange();
276
+ },
258
277
  onBlur: onBlur,
259
278
  noBorder: noBorder
260
279
  }, rest)), (state === 'loading' || state === 'success') && React__default['default'].createElement(SuccessContainer, null, state === 'loading' && React__default['default'].createElement(check._default, {
@@ -266,7 +285,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
266
285
  htmlFor: "text-input-".concat(uniqueId),
267
286
  hasPlaceholder: Boolean(placeholder),
268
287
  hasIcon: Boolean(icon),
269
- state: state
288
+ state: state,
289
+ inputIsEmpty: inputIsEmpty
270
290
  }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
271
291
  state: state
272
292
  }, description), maxContentRows > defaultRows && showMore && showReadMore && React__default['default'].createElement(ShowMoreText, {
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-cae26b42.js');
3
+ var CompactTextInput = require('../../CompactTextInput-480f59cc.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 TextArea = require('../../TextArea-d9e639e4.js');
3
+ var TextArea = require('../../TextArea-a4a70687.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -7,10 +7,10 @@ var Button = require('../Button-432f87c6.js');
7
7
  var Checkbox = require('../Checkbox-85394137.js');
8
8
  var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-5ee8443f.js');
9
9
  var CompactStarRating = require('../CompactStarRating-de1bcfe9.js');
10
- var CompactTextInput = require('../CompactTextInput-cae26b42.js');
10
+ var CompactTextInput = require('../CompactTextInput-480f59cc.js');
11
11
  var MultiSelect = require('../MultiSelect-01a257b8.js');
12
12
  var Radio = require('../Radio-c811ce4a.js');
13
- var TextArea = require('../TextArea-d9e639e4.js');
13
+ var TextArea = require('../TextArea-a4a70687.js');
14
14
  var TextInput = require('../TextInput-8ea31a7b.js');
15
15
  var Switch = require('../Switch-3ac11c97.js');
16
16
  require('../defaultTheme-50f2b88f.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.1.0-beta.86",
3
+ "version": "1.1.0-beta.87",
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-b68f5e71.js');
3
+ var AssetGallery = require('../../AssetGallery-7767299e.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -27,7 +27,7 @@ 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-cae26b42.js');
30
+ require('../../CompactTextInput-480f59cc.js');
31
31
  require('../../Alert-3e4f8be1.js');
32
32
  require('../../Badge-9bcebe96.js');
33
33
  require('../../Tab-bd0f3345.js');
@@ -35,7 +35,7 @@ require('../../Tabs-bf42275e.js');
35
35
  require('../../Tooltip-1b7b0052.js');
36
36
  require('../../MultiSelect-01a257b8.js');
37
37
  require('../../Radio-c811ce4a.js');
38
- require('../../TextArea-d9e639e4.js');
38
+ require('../../TextArea-a4a70687.js');
39
39
  require('../../Switch-3ac11c97.js');
40
40
  require('../../warning-circle-24522402.js');
41
41
 
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-cba7dd21.js');
3
+ var Instructions = require('../../Instructions-f56e7b8c.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -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-d9e639e4.js');
18
+ require('../../TextArea-a4a70687.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-b68f5e71.js');
5
+ var AssetGallery = require('../AssetGallery-7767299e.js');
6
6
  var ContextMenu = require('../ContextMenu-d088833b.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
8
- var Instructions = require('../Instructions-cba7dd21.js');
8
+ var Instructions = require('../Instructions-f56e7b8c.js');
9
9
  require('../defaultTheme-50f2b88f.js');
10
10
  require('styled-components');
11
11
  require('react');
@@ -31,7 +31,7 @@ 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-cae26b42.js');
34
+ require('../CompactTextInput-480f59cc.js');
35
35
  require('../Alert-3e4f8be1.js');
36
36
  require('../Badge-9bcebe96.js');
37
37
  require('../Tab-bd0f3345.js');
@@ -39,7 +39,7 @@ require('../Tabs-bf42275e.js');
39
39
  require('../Tooltip-1b7b0052.js');
40
40
  require('../MultiSelect-01a257b8.js');
41
41
  require('../Radio-c811ce4a.js');
42
- require('../TextArea-d9e639e4.js');
42
+ require('../TextArea-a4a70687.js');
43
43
  require('../Switch-3ac11c97.js');
44
44
  require('../warning-circle-24522402.js');
45
45