@ntbjs/react-components 1.1.0-beta.66 → 1.1.0-beta.68

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.
Files changed (13) hide show
  1. package/{AssetGallery-145a1dff.js → AssetGallery-b0422191.js} +3 -3
  2. package/{CompactStarRating-17c8ca3d.js → CompactStarRating-53593d92.js} +11 -3
  3. package/{CompactTextInput-7263652c.js → CompactTextInput-b4215024.js} +1 -1
  4. package/{Instructions-8bbf4bf8.js → Instructions-79b572bb.js} +1 -1
  5. package/{TextArea-9614e1cd.js → TextArea-fae4a55c.js} +37 -42
  6. package/inputs/CompactStarRating/index.js +1 -1
  7. package/inputs/CompactTextInput/index.js +1 -1
  8. package/inputs/TextArea/index.js +1 -1
  9. package/inputs/index.js +3 -3
  10. package/package.json +1 -1
  11. package/widgets/AssetGallery/index.js +4 -4
  12. package/widgets/Instructions/index.js +2 -2
  13. package/widgets/index.js +5 -5
package/{AssetGallery-145a1dff.js → AssetGallery-b0422191.js} RENAMED
@@ -10,11 +10,11 @@ var ActionButton = require('./ActionButton-c3f5ed94.js');
10
10
  require('./Button-f893df21.js');
11
11
  require('./Checkbox-012bbd3f.js');
12
12
  require('./CompactAutocompleteSelect-b366ba70.js');
13
- require('./CompactStarRating-17c8ca3d.js');
14
- require('./CompactTextInput-7263652c.js');
13
+ require('./CompactStarRating-53593d92.js');
14
+ require('./CompactTextInput-b4215024.js');
15
15
  require('./MultiSelect-5b008b32.js');
16
16
  require('./Radio-0594409d.js');
17
- require('./TextArea-9614e1cd.js');
17
+ require('./TextArea-fae4a55c.js');
18
18
  require('./Switch-cd165c8c.js');
19
19
  require('./Alert-3e4f8be1.js');
20
20
  require('./Badge-9bcebe96.js');
package/{CompactStarRating-17c8ca3d.js → CompactStarRating-53593d92.js} RENAMED
@@ -51,7 +51,7 @@ var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.appl
51
51
  var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n width: 33.3%;\n display: flex;\n align-items: center;\n text-align: left;\n font: normal normal normal 14px/16px Roboto;\n letter-spacing: 0px;\n padding: 0;\n height: 19px;\n\n ", "\n"])), function (props) {
52
52
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
53
53
  });
54
- var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.6%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n padding: 1px 10px;\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n &&:not(:hover):not(:focus) {\n ", ";\n }\n"])), function (props) {
54
+ var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.6%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n padding: 1px 10px;\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n &&:not(:hover):not(:focus) {\n ", ";\n }\n &&:hover:not(:focus) {\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
55
55
  return props.success && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
56
56
  return props.success ? fadeIn : fadeOut;
57
57
  });
@@ -63,6 +63,14 @@ var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
63
63
  return props.warning && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
64
64
  }, function (props) {
65
65
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
66
+ }, function (props) {
67
+ return props.edit && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
68
+ }, function (props) {
69
+ return props.warning && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
70
+ }, function (props) {
71
+ return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
72
+ }, function (props) {
73
+ return props.error && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
66
74
  });
67
75
  var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n height: 12px;\n padding-left: 4px;\n transition: color 250ms;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n"])), function (props) {
68
76
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -86,7 +94,7 @@ var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefault
86
94
  }, function (props) {
87
95
  return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
88
96
  });
89
- var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n padding-right: 25px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: -710px;\n bottom: 0;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
97
+ var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n margin-left: auto;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
90
98
  return props.success ? 0 : 1;
91
99
  }, function (props) {
92
100
  return props.success ? fadeOutCheck : fadeInCheck;
@@ -258,7 +266,7 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
258
266
  name: name,
259
267
  ref: inputRef
260
268
  }), starIconRender(key));
261
- })), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null)));
269
+ }), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null))));
262
270
  });
263
271
  CompactStarRating.defaultProps = {
264
272
  label: 'Rating',
package/{CompactTextInput-7263652c.js → CompactTextInput-b4215024.js} RENAMED
@@ -97,7 +97,7 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
97
97
  }, function (props) {
98
98
  return props.warning && props.theme.themeProp('background', '#634e01', '#fffde8');
99
99
  }, function (props) {
100
- return props.error && props.theme.themeProp('background', '#fbeae6', '#fbeae6');
100
+ return props.error && props.theme.themeProp('background', '#7f1b1b', '#fbeae6');
101
101
  }, function (props) {
102
102
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
103
103
  }, function (props) {
package/{Instructions-8bbf4bf8.js → Instructions-79b572bb.js} RENAMED
@@ -3,7 +3,7 @@
3
3
  var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
- var TextArea = require('./TextArea-9614e1cd.js');
6
+ var TextArea = require('./TextArea-fae4a55c.js');
7
7
  var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-b366ba70.js');
8
8
  var warningCircle = require('./warning-circle-24522402.js');
9
9
  var lodash = require('lodash');
package/{TextArea-9614e1cd.js → TextArea-fae4a55c.js} RENAMED
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
15
 
16
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
17
17
  var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
18
18
  var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n"])), function (props) {
19
19
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
@@ -28,8 +28,10 @@ var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
28
28
  });
29
29
  var Container = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral([""])));
30
30
  var OpacityBox = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral([""])));
31
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 13px 10px;\n resize: vertical;\n transition: height 0.3s ease;\n overflow: hidden;\n z-index: 0; \n\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n\n \n ", "\n \n\n ", " \n\n ", " \n ", "\n ", ";\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n \n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n ", "\n ", "\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n \n"])), function (props) {
31
+ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 13px 10px;\n resize: vertical;\n transition: height 0.3s ease;\n z-index: 0; \n\n ", "\n\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n\n \n ", "\n \n\n ", " \n\n ", " \n ", "\n ", ";\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n \n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n ", "\n ", "\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n \n"])), function (props) {
32
32
  return props.expanded && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n height: ", "em;\n "])), props.maxHeight);
33
+ }, function (props) {
34
+ return props.showMore && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
33
35
  }, function (props) {
34
36
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
35
37
  }, function (props) {
@@ -39,29 +41,29 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
39
41
  }, function (props) {
40
42
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
41
43
  }, function (props) {
42
- return props.noBorder && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
44
+ return props.noBorder && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
43
45
  }, function (props) {
44
- return props.success && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300')), props.theme.themeProp('background', '#64b49d !important', '#bfe0d5 !important'));
46
+ return props.success && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300')), props.theme.themeProp('background', '#64b49d !important', '#bfe0d5 !important'));
45
47
  }, function (props) {
46
- return props.warningAlert && styled.css(_templateObject11 || (_templateObject11 = 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', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
48
+ return props.warningAlert && styled.css(_templateObject12 || (_templateObject12 = 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', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
47
49
  }, function (props) {
48
- return props.errorAlert && styled.css(_templateObject12 || (_templateObject12 = 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'));
50
+ return props.errorAlert && styled.css(_templateObject13 || (_templateObject13 = 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'));
49
51
  }, function (props) {
50
- return props.lightBackground && styled.css(_templateObject13 || (_templateObject13 = 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'));
52
+ return props.lightBackground && styled.css(_templateObject14 || (_templateObject14 = 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'));
51
53
  }, function (props) {
52
54
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
53
55
  }, function (props) {
54
56
  return props.noBorder && !props.readOnly && !props.warningAlert ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
55
57
  }, InputIconContainer, function (props) {
56
- return props.success && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
58
+ return props.success && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
57
59
  }, function (props) {
58
- return props.warning && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
60
+ return props.warning && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
59
61
  }, function (props) {
60
- return props.error && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
62
+ return props.error && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
61
63
  }, function (props) {
62
- return props.hasIcon && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
64
+ return props.hasIcon && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
63
65
  }, function (props) {
64
- return (props.warningAlert || props.errorAlert) && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
66
+ return (props.warningAlert || props.errorAlert) && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
65
67
  }, function (props) {
66
68
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
67
69
  }, function (props) {
@@ -71,31 +73,31 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
71
73
  }, function (props) {
72
74
  return props.theme.getColor('gray-600');
73
75
  });
74
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = 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) {
76
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = 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) {
75
77
  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%)"));
76
78
  }, function (props) {
77
- return props.hasPlaceholder && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.error && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
79
+ return props.hasPlaceholder && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.error && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
78
80
  }, function (props) {
79
- return props.hasIcon && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
81
+ return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
80
82
  });
81
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = 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"])));
82
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = 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) {
83
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = 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"])));
84
+ var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = 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) {
83
85
  return props.theme.themeProp('color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1);
84
86
  });
85
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n\n ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
87
+ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n\n ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
86
88
  return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
87
89
  }, function (props) {
88
- return props.disabled && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
90
+ return props.disabled && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
89
91
  });
90
- var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n"])), function (props) {
92
+ var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = 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) {
91
93
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
92
94
  }, function (props) {
93
- return props.error && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
95
+ return props.error && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
94
96
  });
95
- var ShowMoreText = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = 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) {
97
+ var ShowMoreText = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = 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) {
96
98
  return props.theme.themeProp('color', props.theme.getColor('emerald-300'), props.theme.getColor('emerald-500'));
97
99
  }, function (props) {
98
- return props.error && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
100
+ return props.error && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
99
101
  });
100
102
 
101
103
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -148,15 +150,10 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
148
150
  expanded = _useState8[0],
149
151
  setExpanded = _useState8[1];
150
152
 
151
- var _useState9 = React.useState(false),
153
+ var _useState9 = React.useState(''),
152
154
  _useState10 = defaultTheme._slicedToArray(_useState9, 2),
153
- displayShowMoreText = _useState10[0],
154
- setDisplayShowMoreText = _useState10[1];
155
-
156
- var _useState11 = React.useState(''),
157
- _useState12 = defaultTheme._slicedToArray(_useState11, 2),
158
- maxHeight = _useState12[0],
159
- setMaxHeight = _useState12[1];
155
+ maxHeight = _useState10[0],
156
+ setMaxHeight = _useState10[1];
160
157
 
161
158
  React.useEffect(function () {
162
159
  setDefaultRows(rows);
@@ -168,24 +165,22 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
168
165
  var textarea = textAreaRef.current.scrollHeight;
169
166
  var maxRows = Math.floor(textarea / (lineheight * 11.5));
170
167
  var maxHeight = maxRows * lineheight + 'em';
168
+ setMaxContentRows(maxRows);
169
+ setMaxHeight(maxHeight);
171
170
 
172
171
  if (maxRows > defaultRows) {
173
172
  setExpanded(true);
174
- setDisplayShowMoreText(true);
175
173
  }
176
-
177
- setMaxContentRows(maxRows);
178
- setMaxHeight(maxHeight);
179
174
  };
180
175
 
181
176
  if (showMore) {
182
177
  updateHeight();
183
178
  }
184
- }, []);
179
+ }, [showMore]);
185
180
 
186
- var _useState13 = React.useState(nanoid.nanoid()),
187
- _useState14 = defaultTheme._slicedToArray(_useState13, 1),
188
- uniqueId = _useState14[0];
181
+ var _useState11 = React.useState(nanoid.nanoid()),
182
+ _useState12 = defaultTheme._slicedToArray(_useState11, 1),
183
+ uniqueId = _useState12[0];
189
184
 
190
185
  var hasError = React.useMemo(function () {
191
186
  if (lodash.isBoolean(error)) {
@@ -251,6 +246,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
251
246
  disabled: disabled || readOnly,
252
247
  readOnly: readOnly,
253
248
  edit: edit,
249
+ showMore: showMore,
254
250
  success: success,
255
251
  autoComplete: autoComplete,
256
252
  hasIcon: Boolean(icon),
@@ -274,9 +270,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
274
270
  error: hasError
275
271
  }, label, required && ' *'), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
276
272
  error: hasError
277
- }, descriptionText), typeof showMoreText === 'string' && showMoreText.length > 0 && displayShowMoreText && showMore && React__default['default'].createElement(ShowMoreText, {
278
- onClick: handleTextAreaChange,
279
- showMore: expanded
273
+ }, descriptionText), maxContentRows > defaultRows && React__default['default'].createElement(ShowMoreText, {
274
+ onClick: handleTextAreaChange
280
275
  }, showMoreText));
281
276
  });
282
277
  TextArea.defaultProps = {
package/inputs/CompactStarRating/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactStarRating = require('../../CompactStarRating-17c8ca3d.js');
3
+ var CompactStarRating = require('../../CompactStarRating-53593d92.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/CompactTextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-7263652c.js');
3
+ var CompactTextInput = require('../../CompactTextInput-b4215024.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/TextArea/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-9614e1cd.js');
3
+ var TextArea = require('../../TextArea-fae4a55c.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -6,11 +6,11 @@ var ActionButton = require('../ActionButton-c3f5ed94.js');
6
6
  var Button = require('../Button-f893df21.js');
7
7
  var Checkbox = require('../Checkbox-012bbd3f.js');
8
8
  var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-b366ba70.js');
9
- var CompactStarRating = require('../CompactStarRating-17c8ca3d.js');
10
- var CompactTextInput = require('../CompactTextInput-7263652c.js');
9
+ var CompactStarRating = require('../CompactStarRating-53593d92.js');
10
+ var CompactTextInput = require('../CompactTextInput-b4215024.js');
11
11
  var MultiSelect = require('../MultiSelect-5b008b32.js');
12
12
  var Radio = require('../Radio-0594409d.js');
13
- var TextArea = require('../TextArea-9614e1cd.js');
13
+ var TextArea = require('../TextArea-fae4a55c.js');
14
14
  var TextInput = require('../TextInput-a1083be3.js');
15
15
  var Switch = require('../Switch-cd165c8c.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.66",
3
+ "version": "1.1.0-beta.68",
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",
package/widgets/AssetGallery/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-145a1dff.js');
3
+ var AssetGallery = require('../../AssetGallery-b0422191.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -26,8 +26,8 @@ require('react-dom');
26
26
  require('react-select-async-paginate');
27
27
  require('../../close-ebf2f3cf.js');
28
28
  require('../../check-circle-filled-1640873e.js');
29
- require('../../CompactStarRating-17c8ca3d.js');
30
- require('../../CompactTextInput-7263652c.js');
29
+ require('../../CompactStarRating-53593d92.js');
30
+ require('../../CompactTextInput-b4215024.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-cfc35dc0.js');
35
35
  require('../../Tooltip-f4f9ab8f.js');
36
36
  require('../../MultiSelect-5b008b32.js');
37
37
  require('../../Radio-0594409d.js');
38
- require('../../TextArea-9614e1cd.js');
38
+ require('../../TextArea-fae4a55c.js');
39
39
  require('../../Switch-cd165c8c.js');
40
40
  require('../../warning-circle-24522402.js');
41
41
 
package/widgets/Instructions/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-8bbf4bf8.js');
3
+ var Instructions = require('../../Instructions-79b572bb.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
- require('../../TextArea-9614e1cd.js');
7
+ require('../../TextArea-fae4a55c.js');
8
8
  require('nanoid');
9
9
  require('lodash');
10
10
  require('../../edit-note-c47d292e.js');
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-145a1dff.js');
5
+ var AssetGallery = require('../AssetGallery-b0422191.js');
6
6
  var ContextMenu = require('../ContextMenu-d088833b.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
8
- var Instructions = require('../Instructions-8bbf4bf8.js');
8
+ var Instructions = require('../Instructions-79b572bb.js');
9
9
  require('../defaultTheme-50f2b88f.js');
10
10
  require('styled-components');
11
11
  require('react');
@@ -30,8 +30,8 @@ require('react-dom');
30
30
  require('react-select-async-paginate');
31
31
  require('../close-ebf2f3cf.js');
32
32
  require('../check-circle-filled-1640873e.js');
33
- require('../CompactStarRating-17c8ca3d.js');
34
- require('../CompactTextInput-7263652c.js');
33
+ require('../CompactStarRating-53593d92.js');
34
+ require('../CompactTextInput-b4215024.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-cfc35dc0.js');
39
39
  require('../Tooltip-f4f9ab8f.js');
40
40
  require('../MultiSelect-5b008b32.js');
41
41
  require('../Radio-0594409d.js');
42
- require('../TextArea-9614e1cd.js');
42
+ require('../TextArea-fae4a55c.js');
43
43
  require('../Switch-cd165c8c.js');
44
44
  require('../warning-circle-24522402.js');
45
45