@ntbjs/react-components 1.2.0-rc.99 → 1.3.0-rc.2

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-094ed34b.js → AssetGallery-7266af6d.js} +1 -1
  2. package/{Instructions-b6d3e7bd.js → Instructions-a3663a4e.js} +1 -1
  3. package/{TextArea-a5579cc8.js → TextArea-dd6da638.js} +50 -101
  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-094ed34b.js → AssetGallery-7266af6d.js} RENAMED
@@ -24,7 +24,7 @@ require('./CompactStarRating-405e4508.js');
24
24
  require('./CompactTextInput-0d53acdf.js');
25
25
  require('./MultiSelect-efd60232.js');
26
26
  require('./Radio-32d0513a.js');
27
- require('./TextArea-a5579cc8.js');
27
+ require('./TextArea-dd6da638.js');
28
28
  require('./TextInput-0d109708.js');
29
29
  require('./Switch-4a41585f.js');
30
30
  var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
package/{Instructions-b6d3e7bd.js → Instructions-a3663a4e.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-b68618b3.js');
8
- var TextArea = require('./TextArea-a5579cc8.js');
8
+ var TextArea = require('./TextArea-dd6da638.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-a5579cc8.js → TextArea-dd6da638.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;
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;
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"])));
@@ -33,20 +33,16 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
33
33
  }, function (props) {
34
34
  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
35
35
  });
36
- 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 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\n\n &&:hover:not(:focus) {\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\n \n }\n"])), function (props) {
37
- return !props.expanded && props.showMore && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])));
38
- }, function (props) {
39
- return props.borderRadius && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
36
+ 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 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\n\n &&:hover:not(:focus) {\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\n \n }\n"])), function (props) {
37
+ return props.borderRadius && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
40
38
  }, function (props) {
41
39
  return props.theme.themeProp('color', 'white', 'black');
42
40
  }, function (props) {
43
- return props.readOnly && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
44
- }, function (props) {
45
- return props.disabled && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
41
+ return props.readOnly && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
46
42
  }, function (props) {
47
- return props.readOnly && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
43
+ return props.disabled && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
48
44
  }, function (props) {
49
- return props.showMore && !props.expanded && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
45
+ return props.readOnly && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
50
46
  }, function (props) {
51
47
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
52
48
  }, function (props) {
@@ -56,39 +52,39 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
56
52
  }, function (props) {
57
53
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
58
54
  }, function (props) {
59
- return props.noBorder && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
55
+ return props.noBorder && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
60
56
  return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
61
57
  });
62
58
  }, function (props) {
63
- return props.type === 'warning' && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', '#EAB308', 'black'), props.theme.themeProp('background', '#2F2402', '#F2D16B'), props.theme.themeProp('border-color', '#2F2402 ', '#F2D16B'));
59
+ return props.type === 'warning' && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', '#EAB308', 'black'), props.theme.themeProp('background', '#2F2402', '#F2D16B'), props.theme.themeProp('border-color', '#2F2402 ', '#F2D16B'));
64
60
  }, function (props) {
65
- return props.type === 'error' && styled.css(_templateObject16 || (_templateObject16 = 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'));
61
+ return props.type === 'error' && styled.css(_templateObject14 || (_templateObject14 = 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'));
66
62
  }, function (props) {
67
- return props.noBorder && props.type === 'warning' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
63
+ return props.noBorder && props.type === 'warning' && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
68
64
  return props.theme.themeProp('border-color', '#2F2402', '#F2D16B');
69
65
  });
70
66
  }, function (props) {
71
- return props.noBorder && props.type === 'error' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
67
+ return props.noBorder && props.type === 'error' && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
72
68
  return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
73
69
  });
74
70
  }, function (props) {
75
- return props.type === 'warning-border' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
71
+ return props.type === 'warning-border' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
76
72
  }, function (props) {
77
- return props.type === 'error-border' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
73
+ return props.type === 'error-border' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
78
74
  }, function (props) {
79
- return props.lightBackground && styled.css(_templateObject21 || (_templateObject21 = 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'));
75
+ 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'));
80
76
  }, function (props) {
81
77
  return props.edit && props.type != 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
82
78
  }, function (props) {
83
79
  return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
84
80
  }, function (props) {
85
- return props.padding === 'small' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
81
+ return props.padding === 'small' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
86
82
  }, function (props) {
87
- return props.padding === 'medium' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
83
+ return props.padding === 'medium' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
88
84
  }, function (props) {
89
- return props.padding === 'large' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
85
+ return props.padding === 'large' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
90
86
  }, function (props) {
91
- return props.hasIcon && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
87
+ return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
92
88
  }, function (props) {
93
89
  return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
94
90
  }, function (props) {
@@ -100,7 +96,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
100
96
  }, function (props) {
101
97
  return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
102
98
  }, InputIconContainer, function (props) {
103
- return props.type === 'success' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
99
+ return props.type === 'success' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
104
100
  }, function (props) {
105
101
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
106
102
  }, function (props) {
@@ -110,11 +106,11 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
110
106
  }, function (props) {
111
107
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
112
108
  }, function (props) {
113
- return props.type === 'warning' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
109
+ return props.type === 'warning' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
114
110
  return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
115
111
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
116
112
  }, function (props) {
117
- return props.type === 'error' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
113
+ return props.type === 'error' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
118
114
  return props.theme.themeProp('border-color', '#D83018', '#D83018');
119
115
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
120
116
  }, function (props) {
@@ -122,56 +118,56 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
122
118
  }, function (props) {
123
119
  return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
124
120
  }, function (props) {
125
- return props.noBorder && props.edit && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
121
+ return props.noBorder && props.edit && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
126
122
  return props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)');
127
123
  });
128
124
  }, function (props) {
129
125
  return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#2F2402', '#FFF3A7');
130
126
  });
131
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = 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\n ", "\n content: \"\";\n\n ", "\n"])), function (props) {
127
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = 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\n ", "\n content: \"\";\n\n ", "\n"])), function (props) {
132
128
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
133
129
  }, placeholderBaseStyle, function (props) {
134
130
  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%)"));
135
131
  }, function (props) {
136
- return !props.inputIsEmpty && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
132
+ return !props.inputIsEmpty && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
137
133
  }, function (props) {
138
- return props.hasPlaceholder && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
134
+ return props.hasPlaceholder && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
139
135
  }, function (props) {
140
- return props.hasIcon && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
136
+ return props.hasIcon && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
141
137
  });
142
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = 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"])));
143
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n display: flex;\n padding: 0 10px 0 30px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n svg {\n margin-top: 11px;\n width: 15px;\n }\n"])), function (props) {
138
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = 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"])));
139
+ var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n display: flex;\n padding: 0 10px 0 30px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n svg {\n margin-top: 12px;\n width: 15px;\n }\n"])), function (props) {
144
140
  return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
145
141
  });
146
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = 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) {
147
- return props.readOnly && styled.css(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
142
+ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = 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) {
143
+ return props.readOnly && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
148
144
  }, function (props) {
149
- return props.disabled && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
145
+ return props.disabled && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
150
146
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
151
147
  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
152
148
  });
153
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject39 || (_templateObject39 = 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) {
149
+ var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = 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) {
154
150
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
155
151
  }, function (props) {
156
- return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
152
+ return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
157
153
  }, function (props) {
158
- return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
154
+ return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
159
155
  });
160
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = 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) {
156
+ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject40 || (_templateObject40 = 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) {
161
157
  return props.fadeIn ? 0 : 1;
162
158
  }, function (props) {
163
159
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
164
160
  }, function (props) {
165
161
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
166
162
  });
167
- var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject43 || (_templateObject43 = 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) {
168
- return props.expanded && styled.css(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
163
+ styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject41 || (_templateObject41 = 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) {
164
+ return props.expanded && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
169
165
  }, function (props) {
170
166
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
171
167
  }, function (props) {
172
168
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
173
169
  }, function (props) {
174
- return props.type === 'error' && styled.css(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
170
+ return props.type === 'error' && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
175
171
  });
176
172
 
177
173
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -185,9 +181,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
185
181
  hidden = _ref.hidden,
186
182
  readOnly = _ref.readOnly,
187
183
  edit = _ref.edit,
188
- showMore = _ref.showMore,
189
- showMoreText = _ref.showMoreText,
190
- showLessText = _ref.showLessText,
191
184
  autoComplete = _ref.autoComplete,
192
185
  description = _ref.description,
193
186
  type = _ref.type,
@@ -205,7 +198,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
205
198
  padding = _ref.padding,
206
199
  descriptionToolTip = _ref.descriptionToolTip,
207
200
  borderRadius = _ref.borderRadius,
208
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius"]);
201
+ rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius"]);
209
202
 
210
203
  var textInputDomNode = React.useRef(null);
211
204
  var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
@@ -215,53 +208,21 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
215
208
  inputIsEmpty = _useState2[0],
216
209
  setInputIsEmpty = _useState2[1];
217
210
 
218
- var _useState3 = React.useState(''),
211
+ var _useState3 = React.useState(false),
219
212
  _useState4 = defaultTheme._slicedToArray(_useState3, 2),
220
- maxContentRows = _useState4[0],
221
- setMaxContentRows = _useState4[1];
222
-
223
- var _useState5 = React.useState(false),
224
- _useState6 = defaultTheme._slicedToArray(_useState5, 2),
225
- expanded = _useState6[0],
226
- setExpanded = _useState6[1];
227
-
228
- var _useState7 = React.useState(false),
229
- _useState8 = defaultTheme._slicedToArray(_useState7, 2),
230
- autoFocus = _useState8[0],
231
- setAutoFocus = _useState8[1];
213
+ autoFocus = _useState4[0],
214
+ setAutoFocus = _useState4[1];
232
215
 
233
- var _useState9 = React.useState(nanoid.nanoid()),
234
- _useState10 = defaultTheme._slicedToArray(_useState9, 1),
235
- uniqueId = _useState10[0];
216
+ var _useState5 = React.useState(nanoid.nanoid()),
217
+ _useState6 = defaultTheme._slicedToArray(_useState5, 1),
218
+ uniqueId = _useState6[0];
236
219
 
237
220
  var memoizedDescriptionToolTip = React.useMemo(function () {
238
221
  return descriptionToolTip;
239
222
  }, [descriptionToolTip]);
240
-
241
- var calculateRows = function calculateRows() {
242
- var textareaRefCurrent = textInputDomNode === null || textInputDomNode === void 0 ? void 0 : textInputDomNode.current;
243
- var textAreaHeight = textareaRefCurrent === null || textareaRefCurrent === void 0 ? void 0 : textareaRefCurrent.scrollHeight;
244
- var lineHeight = 16;
245
- var calculatedRows = Math.floor(textAreaHeight / lineHeight);
246
- setMaxContentRows(calculatedRows);
247
- };
248
-
249
223
  React.useEffect(function () {
250
- calculateRows();
251
- }, [value, defaultValue]);
252
- React.useEffect(function () {
253
- setExpanded(false);
254
224
  setAutoFocus(false);
255
225
  }, [value, defaultValue]);
256
-
257
- var handleTextAreaChange = function handleTextAreaChange() {
258
- setExpanded(true);
259
- };
260
-
261
- var handleTextAreaShowLess = function handleTextAreaShowLess() {
262
- setExpanded(!expanded);
263
- };
264
-
265
226
  var onKeyDown = React.useCallback(function (event) {
266
227
  if (event.key === 'Enter') {
267
228
  event.stopPropagation();
@@ -281,9 +242,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
281
242
  autoFocus: autoFocus,
282
243
  borderRadius: borderRadius,
283
244
  ref: textInputRef,
284
- rows: !showMore ? rows : !expanded ? rows : maxContentRows,
285
- maxContentRows: maxContentRows,
286
- expanded: expanded,
245
+ rows: rows,
287
246
  value: value,
288
247
  defaultValue: defaultValue,
289
248
  name: name,
@@ -293,7 +252,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
293
252
  disabled: disabled,
294
253
  edit: edit,
295
254
  instructionsTextArea: instructionsTextArea,
296
- showMore: showMore,
297
255
  type: type,
298
256
  autoComplete: autoComplete,
299
257
  hasIcon: Boolean(icon),
@@ -322,9 +280,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
322
280
  onKeyDown: onKeyDown,
323
281
  onBlur: onBlur,
324
282
  noBorder: noBorder
325
- }, rest, {
326
- onClick: showMore ? handleTextAreaChange : undefined
327
- })), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
283
+ }, rest)), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
328
284
  disabled: disabled
329
285
  }, React__default['default'].createElement(editNote.SvgEditNote, {
330
286
  className: padding === 'small' ? 'smallPadingIcon' : undefined
@@ -335,10 +291,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
335
291
  inputIsEmpty: inputIsEmpty
336
292
  }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
337
293
  type: type
338
- }, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
339
- onClick: showMore ? handleTextAreaShowLess : undefined,
340
- expanded: expanded
341
- }, !expanded ? showMoreText : showLessText));
294
+ }, description));
342
295
  };
343
296
 
344
297
  if (hidden) return null;
@@ -356,13 +309,11 @@ TextArea.defaultProps = {
356
309
  readOnly: false,
357
310
  edit: false,
358
311
  hidden: false,
359
- showMore: false,
360
- showMoreText: '',
361
- showLessText: '',
362
312
  type: '',
363
313
  padding: 'medium',
364
314
  instructionsTextArea: false,
365
315
  descriptionToolTip: '',
316
+ isExpanded: function isExpanded() {},
366
317
  onChange: function onChange() {},
367
318
  borderRadius: 0
368
319
  };
@@ -376,9 +327,6 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
376
327
  disabled: defaultTheme.PropTypes.bool,
377
328
  hidden: defaultTheme.PropTypes.bool,
378
329
  readOnly: defaultTheme.PropTypes.bool,
379
- showMore: defaultTheme.PropTypes.bool,
380
- showMoreText: defaultTheme.PropTypes.string,
381
- showLessText: defaultTheme.PropTypes.string,
382
330
  edit: defaultTheme.PropTypes.bool,
383
331
  autoComplete: defaultTheme.PropTypes.string,
384
332
  description: defaultTheme.PropTypes.string,
@@ -393,6 +341,7 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
393
341
  onChange: defaultTheme.PropTypes.func,
394
342
  onBlur: defaultTheme.PropTypes.func,
395
343
  noBorder: defaultTheme.PropTypes.bool,
344
+ isExpanded: defaultTheme.PropTypes.func,
396
345
  type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
397
346
  instructionsTextArea: defaultTheme.PropTypes.bool,
398
347
  loadingIcon: defaultTheme.PropTypes.element,
package/inputs/TextArea/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-a5579cc8.js');
3
+ var TextArea = require('../../TextArea-dd6da638.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-405e4508.js');
10
10
  var CompactTextInput = require('../CompactTextInput-0d53acdf.js');
11
11
  var MultiSelect = require('../MultiSelect-efd60232.js');
12
12
  var Radio = require('../Radio-32d0513a.js');
13
- var TextArea = require('../TextArea-a5579cc8.js');
13
+ var TextArea = require('../TextArea-dd6da638.js');
14
14
  var TextInput = require('../TextInput-0d109708.js');
15
15
  var Switch = require('../Switch-4a41585f.js');
16
16
  var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-f3de8047.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.2.0-rc.99",
3
+ "version": "1.3.0-rc.2",
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-094ed34b.js');
3
+ var AssetGallery = require('../../AssetGallery-7266af6d.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -41,7 +41,7 @@ require('../../CompactStarRating-405e4508.js');
41
41
  require('../../CompactTextInput-0d53acdf.js');
42
42
  require('../../MultiSelect-efd60232.js');
43
43
  require('../../Radio-32d0513a.js');
44
- require('../../TextArea-a5579cc8.js');
44
+ require('../../TextArea-dd6da638.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-b6d3e7bd.js');
3
+ var Instructions = require('../../Instructions-a3663a4e.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-a5579cc8.js');
28
+ require('../../TextArea-dd6da638.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-094ed34b.js');
5
+ var AssetGallery = require('../AssetGallery-7266af6d.js');
6
6
  var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-912c3469.js');
8
- var Instructions = require('../Instructions-b6d3e7bd.js');
8
+ var Instructions = require('../Instructions-a3663a4e.js');
9
9
  require('../defaultTheme-ea44e34a.js');
10
10
  require('styled-components');
11
11
  require('lodash');
@@ -45,7 +45,7 @@ require('../CompactStarRating-405e4508.js');
45
45
  require('../CompactTextInput-0d53acdf.js');
46
46
  require('../MultiSelect-efd60232.js');
47
47
  require('../Radio-32d0513a.js');
48
- require('../TextArea-a5579cc8.js');
48
+ require('../TextArea-dd6da638.js');
49
49
  require('../Switch-4a41585f.js');
50
50
  require('../ContextMenuItem-ba2b697e.js');
51
51