@ntbjs/react-components 1.1.0-beta.72 → 1.1.0-beta.73
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.
- package/{AssetGallery-d66dcce2.js → AssetGallery-7bc44f2d.js} +3 -4
- package/{Instructions-d699d7b1.js → Instructions-2bef3a68.js} +1 -1
- package/{TextArea-6003c382.js → TextArea-96e5e095.js} +26 -15
- package/{TextInput-c656bf03.js → TextInput-a1083be3.js} +39 -2
- package/inputs/TextArea/index.js +1 -2
- package/inputs/TextInput/index.js +1 -2
- package/inputs/index.js +2 -3
- package/package.json +1 -1
- package/widgets/AssetGallery/index.js +5 -6
- package/widgets/Instructions/index.js +2 -3
- package/widgets/index.js +6 -7
- package/useMergedRefs-b6d2f8fc.js +0 -42
|
@@ -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
|
|
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-
|
|
18
|
-
require('./TextInput-c656bf03.js');
|
|
17
|
+
require('./TextArea-96e5e095.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 =
|
|
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-
|
|
6
|
+
var TextArea = require('./TextArea-96e5e095.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
|
|
|
@@ -133,7 +132,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
133
132
|
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"]);
|
|
134
133
|
|
|
135
134
|
var textAreaRef = React.useRef(null);
|
|
136
|
-
var textInputRef =
|
|
135
|
+
var textInputRef = forwardedRef || textAreaRef;
|
|
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),
|
|
@@ -212,21 +211,33 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
212
211
|
};
|
|
213
212
|
|
|
214
213
|
React.useEffect(function () {
|
|
215
|
-
var
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
var maxHeight = rowsLimit * lineheight + 'em';
|
|
219
|
-
setMaxContentRows(rowsLimit);
|
|
220
|
-
setMaxHeight(maxHeight);
|
|
214
|
+
var calculateRows = function calculateRows() {
|
|
215
|
+
var lineheight = 1.5;
|
|
216
|
+
var textareaRefCurrent = textInputRef.current;
|
|
221
217
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
218
|
+
if (textareaRefCurrent) {
|
|
219
|
+
var textarea = textareaRefCurrent.scrollHeight;
|
|
220
|
+
var rowsLimit = Math.floor(textarea / (lineheight * 11.5));
|
|
221
|
+
|
|
222
|
+
var _maxHeight = rowsLimit * lineheight + 'em';
|
|
223
|
+
|
|
224
|
+
setMaxContentRows(rowsLimit);
|
|
225
|
+
setMaxHeight(_maxHeight);
|
|
226
|
+
|
|
227
|
+
if (rowsLimit > defaultRows) {
|
|
228
|
+
setExpanded(true);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
if (typeof maxRows === 'function') {
|
|
232
|
+
maxRows(rowsLimit);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
};
|
|
225
236
|
|
|
226
|
-
if (
|
|
227
|
-
|
|
237
|
+
if (textInputRef.current) {
|
|
238
|
+
calculateRows();
|
|
228
239
|
}
|
|
229
|
-
}, []);
|
|
240
|
+
}, [textInputRef, defaultRows, maxRows]);
|
|
230
241
|
if (hidden) return null;
|
|
231
242
|
return React__default['default'].createElement(TextInput, {
|
|
232
243
|
disabled: disabled,
|
|
@@ -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
|
|
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;
|
package/inputs/TextArea/index.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var TextArea = require('../../TextArea-
|
|
3
|
+
var TextArea = require('../../TextArea-96e5e095.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-
|
|
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-
|
|
14
|
-
var TextInput = require('../TextInput-
|
|
13
|
+
var TextArea = require('../TextArea-96e5e095.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,11 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var AssetGallery = require('../../AssetGallery-
|
|
3
|
+
var AssetGallery = require('../../AssetGallery-7bc44f2d.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
7
7
|
require('lodash');
|
|
8
|
-
require('../../
|
|
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-
|
|
39
|
-
require('../../TextInput-c656bf03.js');
|
|
38
|
+
require('../../TextArea-96e5e095.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-
|
|
3
|
+
var Instructions = require('../../Instructions-2bef3a68.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
7
|
-
require('../../TextArea-
|
|
7
|
+
require('../../TextArea-96e5e095.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-
|
|
5
|
+
var AssetGallery = require('../AssetGallery-7bc44f2d.js');
|
|
6
6
|
var ContextMenu = require('../ContextMenu-d088833b.js');
|
|
7
7
|
var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
|
|
8
|
-
var Instructions = require('../Instructions-
|
|
8
|
+
var Instructions = require('../Instructions-2bef3a68.js');
|
|
9
9
|
require('../defaultTheme-50f2b88f.js');
|
|
10
10
|
require('styled-components');
|
|
11
11
|
require('react');
|
|
12
12
|
require('lodash');
|
|
13
|
-
require('../
|
|
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-
|
|
43
|
-
require('../TextInput-c656bf03.js');
|
|
42
|
+
require('../TextArea-96e5e095.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;
|