@ntbjs/react-components 1.2.0-rc.70 → 1.2.0-rc.71

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 (9) hide show
  1. package/{AssetGallery-b1dec79b.js → AssetGallery-12ff227b.js} +1 -1
  2. package/{Instructions-351527d8.js → Instructions-ae40a489.js} +1 -1
  3. package/{TextArea-5acb31b9.js → TextArea-1c89fe55.js} +78 -83
  4. package/inputs/TextArea/index.js +1 -1
  5. package/inputs/index.js +1 -1
  6. package/package.json +1 -1
  7. package/widgets/AssetGallery/index.js +2 -2
  8. package/widgets/Instructions/index.js +2 -2
  9. package/widgets/index.js +3 -3
package/{AssetGallery-b1dec79b.js → AssetGallery-12ff227b.js} RENAMED
@@ -24,7 +24,7 @@ require('./CompactStarRating-a754fc6f.js');
24
24
  require('./CompactTextInput-baf13d5c.js');
25
25
  require('./MultiSelect-4b8d3d0d.js');
26
26
  require('./Radio-32d0513a.js');
27
- require('./TextArea-5acb31b9.js');
27
+ require('./TextArea-1c89fe55.js');
28
28
  require('./TextInput-0d109708.js');
29
29
  require('./Switch-4a41585f.js');
30
30
  var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
package/{Instructions-351527d8.js → Instructions-ae40a489.js} RENAMED
@@ -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-5982dcf2.js');
8
- var TextArea = require('./TextArea-5acb31b9.js');
8
+ var TextArea = require('./TextArea-1c89fe55.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 }; }
package/{TextArea-5acb31b9.js → TextArea-1c89fe55.js} RENAMED
@@ -19,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
19
19
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
20
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
21
21
 
22
- 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, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47;
22
+ 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, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46;
23
23
  var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
24
24
  var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
25
25
  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"])));
@@ -35,26 +35,24 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
35
35
  }, function (props) {
36
36
  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
37
37
  });
38
- 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: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n ", "\n\n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n ", "\n \n ", "\n\n ", "\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n\n ", " \n \n\n ", " \n \n ", "\n\n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", "\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
38
+ 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: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n ", "\n \n ", "\n\n ", "\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n\n ", " \n \n\n ", " \n \n ", "\n\n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", "\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
39
39
  return props.padding === 'small' && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
40
40
  }, function (props) {
41
41
  return props.padding === 'medium' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
42
42
  }, function (props) {
43
43
  return props.padding === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
44
44
  }, function (props) {
45
- return props.showMore && !props.expanded && props.scrollHeightExceedsRows && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])));
46
- }, function (props) {
47
- return props.expanded && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n "])), props.maxHeight);
45
+ return props.showMore && !props.expanded && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])));
48
46
  }, function (props) {
49
47
  return props.theme.themeProp('color', 'white', 'black');
50
48
  }, function (props) {
51
- return props.readOnly && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
49
+ return props.readOnly && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
52
50
  }, function (props) {
53
- return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
51
+ return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
54
52
  }, function (props) {
55
- return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
53
+ return props.readOnly && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
56
54
  }, function (props) {
57
- return props.showMore && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
55
+ return props.showMore && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
58
56
  }, function (props) {
59
57
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
60
58
  }, function (props) {
@@ -64,33 +62,33 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
64
62
  }, function (props) {
65
63
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
66
64
  }, function (props) {
67
- return props.noBorder && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
65
+ return props.noBorder && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
68
66
  return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
69
67
  });
70
68
  }, function (props) {
71
- return props.type === 'warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01 ', '#FFFDE8'));
69
+ return props.type === 'warning' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01 ', '#FFFDE8'));
72
70
  }, function (props) {
73
- return props.type === 'instructions-warning' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFF36C'), props.theme.themeProp('border-color', '#634E01 ', '#FFF36C'));
71
+ return props.type === 'instructions-warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFF36C'), props.theme.themeProp('border-color', '#634E01 ', '#FFF36C'));
74
72
  }, function (props) {
75
- return props.type === 'error' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
73
+ return props.type === 'error' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
76
74
  }, function (props) {
77
- return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
75
+ return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
78
76
  return props.theme.themeProp('border-color', '#634E01', '#FFF36C');
79
77
  });
80
78
  }, function (props) {
81
- return props.noBorder && props.type === 'warning' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
79
+ return props.noBorder && props.type === 'warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
82
80
  return props.theme.themeProp('border-color', '#634E01', '#FFFDE8');
83
81
  });
84
82
  }, function (props) {
85
- return props.noBorder && props.type === 'error' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
83
+ return props.noBorder && props.type === 'error' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
86
84
  return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
87
85
  });
88
86
  }, function (props) {
89
- return props.type === 'warning-border' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
87
+ return props.type === 'warning-border' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
90
88
  }, function (props) {
91
- return props.type === 'error-border' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
89
+ return props.type === 'error-border' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
92
90
  }, function (props) {
93
- return props.lightBackground && styled.css(_templateObject26 || (_templateObject26 = 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'));
91
+ return props.lightBackground && styled.css(_templateObject25 || (_templateObject25 = 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'));
94
92
  }, function (props) {
95
93
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
96
94
  }, function (props) {
@@ -100,13 +98,13 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
100
98
  }, function (props) {
101
99
  return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
102
100
  }, function (props) {
103
- return props.hasIcon && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
101
+ return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
104
102
  }, function (props) {
105
103
  return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
106
104
  }, function (props) {
107
105
  return props.type === 'instructions-warning' && props.theme.themeProp('background', '#806403', '#F4E21E');
108
106
  }, function (props) {
109
- return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
107
+ return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
110
108
  return props.theme.themeProp('border-color', '#806403', '#F4E21E');
111
109
  });
112
110
  }, function (props) {
@@ -116,7 +114,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
116
114
  }, function (props) {
117
115
  return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' && props.type != 'instructions-warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
118
116
  }, InputIconContainer, function (props) {
119
- return props.type === 'success' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
117
+ return props.type === 'success' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
120
118
  }, function (props) {
121
119
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
122
120
  }, function (props) {
@@ -126,11 +124,11 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
126
124
  }, function (props) {
127
125
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
128
126
  }, function (props) {
129
- return props.type === 'warning' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
127
+ return props.type === 'warning' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
130
128
  return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
131
129
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
132
130
  }, function (props) {
133
- return props.type === 'error' && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
131
+ return props.type === 'error' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
134
132
  return props.theme.themeProp('border-color', '#D83018', '#D83018');
135
133
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
136
134
  }, function (props) {
@@ -140,48 +138,48 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
140
138
  }, function (props) {
141
139
  return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
142
140
  });
143
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = 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 margin-botton: 50px;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
141
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = 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 margin-botton: 50px;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
144
142
  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%)"));
145
143
  }, function (props) {
146
- return !props.inputIsEmpty && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
144
+ return !props.inputIsEmpty && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
147
145
  }, function (props) {
148
- return props.hasPlaceholder && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
146
+ return props.hasPlaceholder && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
149
147
  }, function (props) {
150
- return props.hasIcon && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
148
+ return props.hasIcon && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
151
149
  });
152
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = 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"])));
153
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = 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) {
150
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = 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"])));
151
+ var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = 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) {
154
152
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
155
153
  });
156
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\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) {
157
- return props.readOnly && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
154
+ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\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) {
155
+ return props.readOnly && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
158
156
  }, function (props) {
159
- return props.disabled && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
157
+ return props.disabled && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
160
158
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
161
159
  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
162
160
  });
163
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject41 || (_templateObject41 = 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\n ", "\n"])), function (props) {
161
+ var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject40 || (_templateObject40 = 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\n ", "\n"])), function (props) {
164
162
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
165
163
  }, function (props) {
166
- return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
164
+ return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
167
165
  }, function (props) {
168
- return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
166
+ return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
169
167
  });
170
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject44 || (_templateObject44 = 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) {
168
+ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject43 || (_templateObject43 = 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) {
171
169
  return props.fadeIn ? 0 : 1;
172
170
  }, function (props) {
173
171
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
174
172
  }, function (props) {
175
173
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
176
174
  });
177
- var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n margin-top: -26px;\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
178
- return props.expanded && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
175
+ var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n margin-top: -26px;\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
176
+ return props.expanded && styled.css(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
179
177
  }, function (props) {
180
178
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
181
179
  }, function (props) {
182
180
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
183
181
  }, function (props) {
184
- return props.type === 'error' && styled.css(_templateObject47 || (_templateObject47 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
182
+ return props.type === 'error' && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
185
183
  });
186
184
 
187
185
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -226,70 +224,79 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
226
224
  inputIsEmpty = _useState2[0],
227
225
  setInputIsEmpty = _useState2[1];
228
226
 
229
- var _useState3 = React.useState(''),
227
+ var _useState3 = React.useState(value || defaultValue),
230
228
  _useState4 = defaultTheme._slicedToArray(_useState3, 2),
231
- maxContentRows = _useState4[0],
232
- setMaxContentRows = _useState4[1];
229
+ defaultInput = _useState4[0],
230
+ setDefaultInput = _useState4[1];
233
231
 
234
- var _useState5 = React.useState(false),
232
+ var _useState5 = React.useState(''),
235
233
  _useState6 = defaultTheme._slicedToArray(_useState5, 2),
236
- expanded = _useState6[0],
237
- setExpanded = _useState6[1];
234
+ maxContentRows = _useState6[0],
235
+ setMaxContentRows = _useState6[1];
238
236
 
239
- var _useState7 = React.useState(''),
237
+ var _useState7 = React.useState(false),
240
238
  _useState8 = defaultTheme._slicedToArray(_useState7, 2),
241
- maxHeight = _useState8[0],
242
- setMaxHeight = _useState8[1];
239
+ expanded = _useState8[0],
240
+ setExpanded = _useState8[1];
243
241
 
244
242
  var _useState9 = React.useState(''),
245
243
  _useState10 = defaultTheme._slicedToArray(_useState9, 2),
246
- defaultHeight = _useState10[0],
247
- setDefaultHeight = _useState10[1];
244
+ maxHeight = _useState10[0],
245
+ setMaxHeight = _useState10[1];
248
246
 
249
- var _useState11 = React.useState(false),
247
+ var _useState11 = React.useState(''),
250
248
  _useState12 = defaultTheme._slicedToArray(_useState11, 2),
251
- autoFocus = _useState12[0],
252
- setAutoFocus = _useState12[1];
249
+ defaultHeight = _useState12[0],
250
+ setDefaultHeight = _useState12[1];
253
251
 
254
252
  var _useState13 = React.useState(false),
255
253
  _useState14 = defaultTheme._slicedToArray(_useState13, 2),
256
- scrollHeightExceedsRows = _useState14[0],
257
- setScrollHeightExceedsRows = _useState14[1];
254
+ autoFocus = _useState14[0],
255
+ setAutoFocus = _useState14[1];
256
+
257
+ var _useState15 = React.useState(false),
258
+ _useState16 = defaultTheme._slicedToArray(_useState15, 2),
259
+ scrollHeightExceedsRows = _useState16[0],
260
+ setScrollHeightExceedsRows = _useState16[1];
258
261
 
259
262
  var initialHeightRef = React.useRef(null);
260
263
 
261
- var _useState15 = React.useState(nanoid.nanoid()),
262
- _useState16 = defaultTheme._slicedToArray(_useState15, 1),
263
- uniqueId = _useState16[0];
264
+ var _useState17 = React.useState(nanoid.nanoid()),
265
+ _useState18 = defaultTheme._slicedToArray(_useState17, 1),
266
+ uniqueId = _useState18[0];
264
267
 
265
268
  var memoizedDescriptionToolTip = React.useMemo(function () {
266
269
  return descriptionToolTip;
267
270
  }, [descriptionToolTip]);
268
271
  React.useEffect(function () {
269
272
  setExpanded(false);
273
+ setDefaultInput(value || defaultValue);
270
274
  }, [resetExpansion]);
271
275
  React.useEffect(function () {
272
276
  isExpanded(expanded);
273
277
  }, [expanded]);
274
- React.useEffect(function () {
275
- setExpanded(false);
276
- setAutoFocus(false);
278
+ React.useLayoutEffect(function () {
277
279
  calculateRows();
278
- calculateHeight();
280
+ setAutoFocus(false);
281
+
282
+ if (defaultValue !== null && defaultValue !== void 0 && defaultValue.length || (value === null || value === void 0 ? void 0 : value.length) != (defaultInput === null || defaultInput === void 0 ? void 0 : defaultInput.length)) {
283
+ calculateHeight();
284
+ setExpanded(true);
285
+ }
279
286
  }, [value, defaultValue, rows]);
280
287
  React.useEffect(function () {
281
288
  setAutoFocus(false);
282
289
  initialHeightRef.current = null;
283
290
  }, [rows]);
284
291
 
285
- var handleTextAreaChange = function handleTextAreaChange() {
292
+ var handleTextAreaClick = function handleTextAreaClick() {
286
293
  var textareaRefCurrent = textInputDomNode.current;
287
294
 
288
295
  if (textareaRefCurrent !== null) {
289
296
  textareaRefCurrent.style.height = "".concat(textareaRefCurrent.scrollHeight, "px");
290
297
  }
291
298
 
292
- if (scrollHeightExceedsRows && !expanded) {
299
+ if (!expanded) {
293
300
  setExpanded(true);
294
301
  }
295
302
  };
@@ -298,11 +305,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
298
305
  var textareaRefCurrent = textInputDomNode.current;
299
306
 
300
307
  if (textareaRefCurrent !== null) {
301
- if (expanded) {
302
- textareaRefCurrent.style.height = "".concat(rows * 16, "px");
303
- } else {
304
- textareaRefCurrent.style.height = "".concat(textareaRefCurrent.scrollHeight, "px");
305
- }
308
+ textareaRefCurrent.style.height = expanded ? "".concat(rows * 16, "px") : "".concat(textareaRefCurrent.scrollHeight, "px");
306
309
  }
307
310
 
308
311
  setExpanded(!expanded);
@@ -339,13 +342,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
339
342
  initialHeightRef.current = newHeight;
340
343
  }
341
344
 
342
- setScrollHeightExceedsRows(newHeight > initialHeightRef.current);
343
-
344
- if (newHeight > (initialHeightRef.current || 0)) {
345
- setExpanded(true);
346
- } else {
347
- setExpanded(false);
348
- }
345
+ setScrollHeightExceedsRows(newHeight > (initialHeightRef.current || 0));
346
+ setExpanded(newHeight > (initialHeightRef.current || 0));
349
347
  }
350
348
  };
351
349
 
@@ -403,16 +401,13 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
403
401
  }
404
402
  }
405
403
 
406
- calculateHeight();
407
- calculateRows();
408
-
409
404
  _onChange(e);
410
405
  },
411
406
  onKeyDown: onKeyDown,
412
407
  onBlur: onBlur,
413
408
  noBorder: noBorder
414
409
  }, rest, {
415
- onClick: handleTextAreaChange
410
+ onClick: handleTextAreaClick
416
411
  })), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
417
412
  disabled: disabled
418
413
  }, React__default['default'].createElement(editNote.SvgEditNote, {
@@ -427,7 +422,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
427
422
  }, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
428
423
  onClick: showMore ? handleTextAreaShowLess : undefined,
429
424
  expanded: expanded
430
- }, !expanded && scrollHeightExceedsRows ? showMoreText : expanded && scrollHeightExceedsRows ? showLessText : null));
425
+ }, !expanded ? showMoreText : expanded ? showLessText : null));
431
426
  };
432
427
 
433
428
  if (hidden) return null;
@@ -454,7 +449,7 @@ TextArea.defaultProps = {
454
449
  descriptionToolTip: '',
455
450
  isExpanded: function isExpanded() {},
456
451
  onChange: function onChange() {},
457
- resetExpansion: true
452
+ resetExpansion: ''
458
453
  };
459
454
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
460
455
  value: defaultTheme.PropTypes.string,
package/inputs/TextArea/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-5acb31b9.js');
3
+ var TextArea = require('../../TextArea-1c89fe55.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -10,7 +10,7 @@ var CompactStarRating = require('../CompactStarRating-a754fc6f.js');
10
10
  var CompactTextInput = require('../CompactTextInput-baf13d5c.js');
11
11
  var MultiSelect = require('../MultiSelect-4b8d3d0d.js');
12
12
  var Radio = require('../Radio-32d0513a.js');
13
- var TextArea = require('../TextArea-5acb31b9.js');
13
+ var TextArea = require('../TextArea-1c89fe55.js');
14
14
  var TextInput = require('../TextInput-0d109708.js');
15
15
  var Switch = require('../Switch-4a41585f.js');
16
16
  var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-24c88aaa.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.2.0-rc.70",
3
+ "version": "1.2.0-rc.71",
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-b1dec79b.js');
3
+ var AssetGallery = require('../../AssetGallery-12ff227b.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -41,7 +41,7 @@ require('../../CompactStarRating-a754fc6f.js');
41
41
  require('../../CompactTextInput-baf13d5c.js');
42
42
  require('../../MultiSelect-4b8d3d0d.js');
43
43
  require('../../Radio-32d0513a.js');
44
- require('../../TextArea-5acb31b9.js');
44
+ require('../../TextArea-1c89fe55.js');
45
45
  require('../../Switch-4a41585f.js');
46
46
  require('../../ContextMenuItem-ba2b697e.js');
47
47
 
package/widgets/Instructions/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-351527d8.js');
3
+ var Instructions = require('../../Instructions-ae40a489.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -25,7 +25,7 @@ require('../../react-select-creatable.esm-2f23d6c6.js');
25
25
  require('react-dom');
26
26
  require('../../close-ebf2f3cf.js');
27
27
  require('../../expand-more-94585605.js');
28
- require('../../TextArea-5acb31b9.js');
28
+ require('../../TextArea-1c89fe55.js');
29
29
  require('../../useMergedRefs-b6d2f8fc.js');
30
30
  require('../../edit-note-c47d292e.js');
31
31
 
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-b1dec79b.js');
5
+ var AssetGallery = require('../AssetGallery-12ff227b.js');
6
6
  var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
8
- var Instructions = require('../Instructions-351527d8.js');
8
+ var Instructions = require('../Instructions-ae40a489.js');
9
9
  require('../defaultTheme-ea44e34a.js');
10
10
  require('styled-components');
11
11
  require('lodash');
@@ -45,7 +45,7 @@ require('../CompactStarRating-a754fc6f.js');
45
45
  require('../CompactTextInput-baf13d5c.js');
46
46
  require('../MultiSelect-4b8d3d0d.js');
47
47
  require('../Radio-32d0513a.js');
48
- require('../TextArea-5acb31b9.js');
48
+ require('../TextArea-1c89fe55.js');
49
49
  require('../Switch-4a41585f.js');
50
50
  require('../ContextMenuItem-ba2b697e.js');
51
51