@ntbjs/react-components 1.1.0-beta.72 → 1.1.0-beta.74

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.
@@ -3,7 +3,7 @@
3
3
  var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var lodash = require('lodash');
6
- var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
6
+ var TextInput = require('./TextInput-a1083be3.js');
7
7
  var ResizeObserver = require('resize-observer-polyfill');
8
8
  var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
9
9
  var ActionButton = require('./ActionButton-c3f5ed94.js');
@@ -14,8 +14,7 @@ require('./CompactStarRating-53593d92.js');
14
14
  require('./CompactTextInput-b4215024.js');
15
15
  require('./MultiSelect-5b008b32.js');
16
16
  require('./Radio-0594409d.js');
17
- require('./TextArea-6003c382.js');
18
- require('./TextInput-c656bf03.js');
17
+ require('./TextArea-7ace65e7.js');
19
18
  require('./Switch-cd165c8c.js');
20
19
  require('./Alert-3e4f8be1.js');
21
20
  require('./Badge-9bcebe96.js');
@@ -870,7 +869,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
870
869
  props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"]);
871
870
 
872
871
  var assetGalleryDOMNode = React.useRef();
873
- var assetGalleryCompactRef = useMergedRefs.useMergedRefs(forwardedRef, assetGalleryDOMNode);
872
+ var assetGalleryCompactRef = TextInput.useMergedRefs(forwardedRef, assetGalleryDOMNode);
874
873
  var assetGalleryWidth = React.useRef(0);
875
874
  var minimumRowAspectRatio = React.useRef(0);
876
875
  var calculatedAssets = React.useRef([]);
@@ -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-6003c382.js');
6
+ var TextArea = require('./TextArea-7ace65e7.js');
7
7
  var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-05c45f9a.js');
8
8
  var warningCircle = require('./warning-circle-24522402.js');
9
9
  var lodash = require('lodash');
@@ -5,7 +5,6 @@ var React = require('react');
5
5
  var nanoid = require('nanoid');
6
6
  var styled = require('styled-components');
7
7
  var lodash = require('lodash');
8
- var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
9
8
  var editNote = require('./edit-note-c47d292e.js');
10
9
  var checkCircleFilled = require('./check-circle-filled-1640873e.js');
11
10
 
@@ -112,6 +111,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
112
111
  hidden = _ref.hidden,
113
112
  readOnly = _ref.readOnly,
114
113
  edit = _ref.edit,
114
+ isExpanded = _ref.isExpanded,
115
115
  maxRows = _ref.maxRows,
116
116
  showMore = _ref.showMore,
117
117
  showMoreText = _ref.showMoreText,
@@ -130,10 +130,9 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
130
130
  noBorder = _ref.noBorder,
131
131
  warningAlert = _ref.warningAlert,
132
132
  errorAlert = _ref.errorAlert,
133
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "maxRows", "showMore", "showMoreText", "autoComplete", "description", "success", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
133
+ rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "isExpanded", "maxRows", "showMore", "showMoreText", "autoComplete", "description", "success", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
134
134
 
135
- var textAreaRef = React.useRef(null);
136
- var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textAreaRef);
135
+ var textInputRef = React.useRef(null);
137
136
 
138
137
  var _useState = React.useState(''),
139
138
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -162,7 +161,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
162
161
 
163
162
  React.useEffect(function () {
164
163
  setDefaultRows(rows);
165
- }, []);
164
+ }, [rows]);
166
165
 
167
166
  var _useState11 = React.useState(nanoid.nanoid()),
168
167
  _useState12 = defaultTheme._slicedToArray(_useState11, 1),
@@ -200,6 +199,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
200
199
 
201
200
  var handleTextAreaChange = function handleTextAreaChange() {
202
201
  setExpanded(!expanded);
202
+ isExpanded(expanded);
203
203
 
204
204
  if (expanded === true) {
205
205
  setContentRows(maxContentRows);
@@ -212,21 +212,35 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
212
212
  };
213
213
 
214
214
  React.useEffect(function () {
215
- var lineheight = 1.5;
216
- var textarea = textAreaRef.current ? textAreaRef.current.scrollHeight : 0;
217
- var rowsLimit = Math.floor(textarea / (lineheight * 11.5));
218
- var maxHeight = rowsLimit * lineheight + 'em';
219
- setMaxContentRows(rowsLimit);
220
- setMaxHeight(maxHeight);
215
+ var calculateRows = function calculateRows() {
216
+ var lineheight = 1.5;
217
+ var textareaRefCurrent = textInputRef.current;
221
218
 
222
- if (rowsLimit > defaultRows) {
223
- setExpanded(true);
224
- }
219
+ if (textareaRefCurrent) {
220
+ var textarea = textareaRefCurrent.scrollHeight;
221
+ var rowsLimit = Math.floor(textarea / (lineheight * 7));
222
+
223
+ var _maxHeight = rowsLimit * lineheight + 'em';
224
+
225
+ setMaxContentRows(rowsLimit);
226
+ setMaxHeight(_maxHeight);
227
+
228
+ if (rowsLimit > defaultRows) {
229
+ setExpanded(true);
230
+ }
231
+
232
+ if (typeof maxRows === 'function') {
233
+ maxRows(rowsLimit);
234
+ }
235
+ }
236
+ };
225
237
 
226
- if (typeof maxRows === 'function') {
227
- maxRows(rowsLimit);
238
+ if (textInputRef.current) {
239
+ calculateRows();
240
+ } else {
241
+ setExpanded(false);
228
242
  }
229
- }, []);
243
+ }, [textInputRef.current]);
230
244
  if (hidden) return null;
231
245
  return React__default['default'].createElement(TextInput, {
232
246
  disabled: disabled,
@@ -234,9 +248,10 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
234
248
  error: hasError,
235
249
  warning: hasWarning,
236
250
  className: className,
237
- style: style
251
+ style: style,
252
+ ref: textInputRef
238
253
  }, !warningAlert && !errorAlert && React__default['default'].createElement(TextInputFieldIcon, null, icon), (warningAlert || errorAlert) && React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(Container, null, React__default['default'].createElement(OpacityBox, null, React__default['default'].createElement(TextInputField, defaultTheme._extends({
239
- ref: textInputRef,
254
+ ref: forwardedRef,
240
255
  rows: contentRows > rows ? contentRows : rows,
241
256
  expanded: expanded,
242
257
  maxHeight: maxHeight,
@@ -316,7 +331,8 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
316
331
  noBorder: defaultTheme.PropTypes.bool,
317
332
  warningAlert: defaultTheme.PropTypes.bool,
318
333
  errorAlert: defaultTheme.PropTypes.bool,
319
- maxRows: defaultTheme.PropTypes.func
334
+ maxRows: defaultTheme.PropTypes.func,
335
+ isExpanded: defaultTheme.PropTypes.func
320
336
  } : {};
321
337
 
322
338
  exports.TextArea = TextArea;
@@ -5,7 +5,6 @@ var React = require('react');
5
5
  var nanoid = require('nanoid');
6
6
  var styled = require('styled-components');
7
7
  var lodash = require('lodash');
8
- var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
9
8
  var editNote = require('./edit-note-c47d292e.js');
10
9
 
11
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -88,6 +87,43 @@ var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTh
88
87
  return props.error && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
89
88
  });
90
89
 
90
+ var toFnRef = function toFnRef(ref) {
91
+ return !ref || typeof ref === 'function' ? ref : function (value) {
92
+ ref.current = value;
93
+ };
94
+ };
95
+
96
+ function mergeRefs(refA, refB) {
97
+ var a = toFnRef(refA);
98
+ var b = toFnRef(refB);
99
+ return function (value) {
100
+ if (a) a(value);
101
+ if (b) b(value);
102
+ };
103
+ }
104
+ /**
105
+ * Create and returns a single callback ref composed from two other Refs.
106
+ *
107
+ * ```tsx
108
+ * const Button = React.forwardRef((props, ref) => {
109
+ * const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
110
+ * const mergedRef = useMergedRefs(ref, attachRef);
111
+ *
112
+ * return <button ref={mergedRef} {...props}/>
113
+ * })
114
+ * ```
115
+ *
116
+ * @param refA A Callback or mutable Ref
117
+ * @param refB A Callback or mutable Ref
118
+ * @category refs
119
+ */
120
+
121
+ function useMergedRefs(refA, refB) {
122
+ return React.useMemo(function () {
123
+ return mergeRefs(refA, refB);
124
+ }, [refA, refB]);
125
+ }
126
+
91
127
  var TextInput = React__default['default'].forwardRef(function TextInput(_ref, forwardedRef) {
92
128
  var value = _ref.value,
93
129
  defaultValue = _ref.defaultValue,
@@ -112,7 +148,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
112
148
  rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "type", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "adornments", "className", "style", "onChange", "onBlur", "noBorder"]);
113
149
 
114
150
  var textInputDomNode = React.useRef(null);
115
- var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
151
+ var textInputRef = useMergedRefs(forwardedRef, textInputDomNode);
116
152
 
117
153
  var _useState = React.useState(nanoid.nanoid()),
118
154
  _useState2 = defaultTheme._slicedToArray(_useState, 1),
@@ -231,3 +267,4 @@ TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
231
267
  } : {};
232
268
 
233
269
  exports.TextInput = TextInput;
270
+ exports.useMergedRefs = useMergedRefs;
@@ -1,12 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-6003c382.js');
3
+ var TextArea = require('../../TextArea-7ace65e7.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('nanoid');
8
8
  require('lodash');
9
- require('../../useMergedRefs-b6d2f8fc.js');
10
9
  require('../../edit-note-c47d292e.js');
11
10
  require('../../check-circle-filled-1640873e.js');
12
11
 
@@ -1,12 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var TextInput = require('../../TextInput-c656bf03.js');
3
+ var TextInput = require('../../TextInput-a1083be3.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('nanoid');
8
8
  require('lodash');
9
- require('../../useMergedRefs-b6d2f8fc.js');
10
9
  require('../../edit-note-c47d292e.js');
11
10
 
12
11
 
package/inputs/index.js CHANGED
@@ -10,8 +10,8 @@ var CompactStarRating = require('../CompactStarRating-53593d92.js');
10
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-6003c382.js');
14
- var TextInput = require('../TextInput-c656bf03.js');
13
+ var TextArea = require('../TextArea-7ace65e7.js');
14
+ var TextInput = require('../TextInput-a1083be3.js');
15
15
  var Switch = require('../Switch-cd165c8c.js');
16
16
  require('../defaultTheme-50f2b88f.js');
17
17
  require('styled-components');
@@ -36,7 +36,6 @@ require('../Badge-9bcebe96.js');
36
36
  require('../Tab-bd0f3345.js');
37
37
  require('../Tabs-cfc35dc0.js');
38
38
  require('../Tooltip-f4f9ab8f.js');
39
- require('../useMergedRefs-b6d2f8fc.js');
40
39
 
41
40
 
42
41
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.1.0-beta.72",
3
+ "version": "1.1.0-beta.74",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
@@ -1,11 +1,13 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-d66dcce2.js');
3
+ var AssetGallery = require('../../AssetGallery-cc258399.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('lodash');
8
- require('../../useMergedRefs-b6d2f8fc.js');
8
+ require('../../TextInput-a1083be3.js');
9
+ require('nanoid');
10
+ require('../../edit-note-c47d292e.js');
9
11
  require('resize-observer-polyfill');
10
12
  require('react-lazy-load-image-component');
11
13
  require('../../ActionButton-c3f5ed94.js');
@@ -17,7 +19,6 @@ require('../../shift-away-subtle-cfdf1dbe.js');
17
19
  require('../../ContextMenu-d088833b.js');
18
20
  require('../../expand-more-94585605.js');
19
21
  require('../../Checkbox-012bbd3f.js');
20
- require('nanoid');
21
22
  require('../../CompactAutocompleteSelect-05c45f9a.js');
22
23
  require('react-select');
23
24
  require('../../react-select-creatable.esm-2f23d6c6.js');
@@ -27,7 +28,6 @@ require('../../close-ebf2f3cf.js');
27
28
  require('../../check-circle-filled-1640873e.js');
28
29
  require('../../CompactStarRating-53593d92.js');
29
30
  require('../../CompactTextInput-b4215024.js');
30
- require('../../edit-note-c47d292e.js');
31
31
  require('../../Alert-3e4f8be1.js');
32
32
  require('../../Badge-9bcebe96.js');
33
33
  require('../../Tab-bd0f3345.js');
@@ -35,8 +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-6003c382.js');
39
- require('../../TextInput-c656bf03.js');
38
+ require('../../TextArea-7ace65e7.js');
40
39
  require('../../Switch-cd165c8c.js');
41
40
  require('../../warning-circle-24522402.js');
42
41
 
@@ -1,13 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-d699d7b1.js');
3
+ var Instructions = require('../../Instructions-6b1facce.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
- require('../../TextArea-6003c382.js');
7
+ require('../../TextArea-7ace65e7.js');
8
8
  require('nanoid');
9
9
  require('lodash');
10
- require('../../useMergedRefs-b6d2f8fc.js');
11
10
  require('../../edit-note-c47d292e.js');
12
11
  require('../../check-circle-filled-1640873e.js');
13
12
  require('../../CompactAutocompleteSelect-05c45f9a.js');
package/widgets/index.js CHANGED
@@ -2,15 +2,17 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetGallery = require('../AssetGallery-d66dcce2.js');
5
+ var AssetGallery = require('../AssetGallery-cc258399.js');
6
6
  var ContextMenu = require('../ContextMenu-d088833b.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
8
- var Instructions = require('../Instructions-d699d7b1.js');
8
+ var Instructions = require('../Instructions-6b1facce.js');
9
9
  require('../defaultTheme-50f2b88f.js');
10
10
  require('styled-components');
11
11
  require('react');
12
12
  require('lodash');
13
- require('../useMergedRefs-b6d2f8fc.js');
13
+ require('../TextInput-a1083be3.js');
14
+ require('nanoid');
15
+ require('../edit-note-c47d292e.js');
14
16
  require('resize-observer-polyfill');
15
17
  require('react-lazy-load-image-component');
16
18
  require('../ActionButton-c3f5ed94.js');
@@ -21,7 +23,6 @@ require('@tippyjs/react');
21
23
  require('../shift-away-subtle-cfdf1dbe.js');
22
24
  require('../expand-more-94585605.js');
23
25
  require('../Checkbox-012bbd3f.js');
24
- require('nanoid');
25
26
  require('../CompactAutocompleteSelect-05c45f9a.js');
26
27
  require('react-select');
27
28
  require('../react-select-creatable.esm-2f23d6c6.js');
@@ -31,7 +32,6 @@ require('../close-ebf2f3cf.js');
31
32
  require('../check-circle-filled-1640873e.js');
32
33
  require('../CompactStarRating-53593d92.js');
33
34
  require('../CompactTextInput-b4215024.js');
34
- require('../edit-note-c47d292e.js');
35
35
  require('../Alert-3e4f8be1.js');
36
36
  require('../Badge-9bcebe96.js');
37
37
  require('../Tab-bd0f3345.js');
@@ -39,8 +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-6003c382.js');
43
- require('../TextInput-c656bf03.js');
42
+ require('../TextArea-7ace65e7.js');
44
43
  require('../Switch-cd165c8c.js');
45
44
  require('../warning-circle-24522402.js');
46
45
 
@@ -1,42 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
-
5
- var toFnRef = function toFnRef(ref) {
6
- return !ref || typeof ref === 'function' ? ref : function (value) {
7
- ref.current = value;
8
- };
9
- };
10
-
11
- function mergeRefs(refA, refB) {
12
- var a = toFnRef(refA);
13
- var b = toFnRef(refB);
14
- return function (value) {
15
- if (a) a(value);
16
- if (b) b(value);
17
- };
18
- }
19
- /**
20
- * Create and returns a single callback ref composed from two other Refs.
21
- *
22
- * ```tsx
23
- * const Button = React.forwardRef((props, ref) => {
24
- * const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
25
- * const mergedRef = useMergedRefs(ref, attachRef);
26
- *
27
- * return <button ref={mergedRef} {...props}/>
28
- * })
29
- * ```
30
- *
31
- * @param refA A Callback or mutable Ref
32
- * @param refB A Callback or mutable Ref
33
- * @category refs
34
- */
35
-
36
- function useMergedRefs(refA, refB) {
37
- return React.useMemo(function () {
38
- return mergeRefs(refA, refB);
39
- }, [refA, refB]);
40
- }
41
-
42
- exports.useMergedRefs = useMergedRefs;