@commercetools-uikit/multiline-text-input 16.0.0 → 16.1.1
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/dist/commercetools-uikit-multiline-text-input.cjs.dev.js +14 -29
- package/dist/commercetools-uikit-multiline-text-input.cjs.prod.js +13 -27
- package/dist/commercetools-uikit-multiline-text-input.esm.js +14 -29
- package/dist/declarations/src/multiline-text-input.d.ts +0 -1
- package/package.json +11 -11
|
@@ -43,48 +43,40 @@ var Stack__default = /*#__PURE__*/_interopDefault(Stack);
|
|
|
43
43
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
44
44
|
|
|
45
45
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
46
|
-
|
|
47
46
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
48
|
-
|
|
49
47
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
50
48
|
const defaultProps = {
|
|
51
49
|
defaultExpandMultilineText: false
|
|
52
50
|
};
|
|
53
|
-
|
|
54
51
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
55
52
|
name: "skgbeu",
|
|
56
53
|
styles: "display:flex;justify-content:flex-end"
|
|
57
54
|
} : {
|
|
58
55
|
name: "7hlegj-MultilineTextInput",
|
|
59
56
|
styles: "display:flex;justify-content:flex-end;label:MultilineTextInput;",
|
|
60
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
57
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS10ZXh0LWlucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtS29CIiwiZmlsZSI6Im11bHRpbGluZS10ZXh0LWlucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHVzZVN0YXRlLFxuICB1c2VDYWxsYmFjayxcbiAgdHlwZSBDaGFuZ2VFdmVudEhhbmRsZXIsXG4gIHR5cGUgRm9jdXNFdmVudEhhbmRsZXIsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IEFuZ2xlVXBJY29uLCBBbmdsZURvd25JY29uIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaWNvbnMnO1xuaW1wb3J0IEZsYXRCdXR0b24gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZmxhdC1idXR0b24nO1xuaW1wb3J0IHsgdXNlVG9nZ2xlU3RhdGUgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9ob29rcyc7XG5pbXBvcnQgeyBmaWx0ZXJEYXRhQXR0cmlidXRlcyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcbmltcG9ydCBTdGFjayBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1zdGFjayc7XG5pbXBvcnQgQ29uc3RyYWludHMgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY29uc3RyYWludHMnO1xuaW1wb3J0IHtcbiAgTXVsdGlsaW5lSW5wdXQsXG4gIG1lc3NhZ2VzTXVsdGlsaW5lSW5wdXQsXG59IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2lucHV0LXV0aWxzJztcblxuZXhwb3J0IHR5cGUgVE11bHRpbGluZVRleHRJbnB1dFByb3BzID0ge1xuICAvKipcbiAgICogVXNlZCBhcyBIVE1MIG5hbWUgb2YgdGhlIGlucHV0IGNvbXBvbmVudC4gcHJvcGVydHlcbiAgICovXG4gIG5hbWU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBJbmRpY2F0ZSBpZiB0aGUgdmFsdWUgZW50ZXJlZCBpbiB0aGUgaW5wdXQgaXMgaW52YWxpZC5cbiAgICovXG4gICdhcmlhLWludmFsaWQnPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIEhUTUwgSUQgb2YgYW4gZWxlbWVudCBjb250YWluaW5nIGFuIGVycm9yIG1lc3NhZ2UgcmVsYXRlZCB0byB0aGUgaW5wdXQuXG4gICAqL1xuICAnYXJpYS1lcnJvcm1lc3NhZ2UnPzogc3RyaW5nO1xuICAvKipcbiAgICogVXNlZCBhcyBIVE1MIGBhdXRvY29tcGxldGVgIHByb3BlcnR5XG4gICAqL1xuICBhdXRvQ29tcGxldGU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBVc2VkIGFzIEhUTUwgaWQgcHJvcGVydHkuIEFuIGlkIGlzIGF1dG8tZ2VuZXJhdGVkIHdoZW4gaXQgaXMgbm90IHNwZWNpZmllZC5cbiAgICovXG4gIGlkPzogc3RyaW5nO1xuICAvKipcbiAgICogVmFsdWUgb2YgdGhlIGlucHV0IGNvbXBvbmVudC5cbiAgICovXG4gIHZhbHVlOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBDYWxsZWQgd2l0aCBhbiBldmVudCBjb250YWluaW5nIHRoZSBuZXcgdmFsdWUuIFJlcXVpcmVkIHdoZW4gaW5wdXQgaXMgbm90IHJlYWQgb25seS4gUGFyZW50IHNob3VsZCBwYXNzIGl0IGJhY2sgYXMgdmFsdWUuXG4gICAqL1xuICBvbkNoYW5nZT86IENoYW5nZUV2ZW50SGFuZGxlcjxIVE1MVGV4dEFyZWFFbGVtZW50PjtcbiAgLyoqXG4gICAqIENhbGxlZCB3aGVuIGlucHV0IGlzIGJsdXJyZWRcbiAgICovXG4gIG9uQmx1cj86IEZvY3VzRXZlbnRIYW5kbGVyPEhUTUxUZXh0QXJlYUVsZW1lbnQ+O1xuICAvKipcbiAgICogQ2FsbGVkIHdoZW4gaW5wdXQgaXMgZm9jdXNlZFxuICAgKi9cbiAgb25Gb2N1cz86IEZvY3VzRXZlbnRIYW5kbGVyPEhUTUxUZXh0QXJlYUVsZW1lbnQ+O1xuICAvKipcbiAgICogRm9jdXMgdGhlIGlucHV0IG9uIGluaXRpYWwgcmVuZGVyXG4gICAqL1xuICBpc0F1dG9mb2N1c3NlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBFeHBhbmRzIG11bHRpbGluZSB0ZXh0IGlucHV0IGluaXRpYWxseVxuICAgKi9cbiAgZGVmYXVsdEV4cGFuZE11bHRpbGluZVRleHQ/OiBib29sZWFuO1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoYXQgdGhlIGlucHV0IGNhbm5vdCBiZSBtb2RpZmllZCAoZS5nIG5vdCBhdXRob3JpemVkLCBvciBjaGFuZ2VzIGN1cnJlbnRseSBzYXZpbmcpLlxuICAgKi9cbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgdGhhdCB0aGUgZmllbGQgaXMgZGlzcGxheWluZyByZWFkLW9ubHkgY29udGVudFxuICAgKi9cbiAgaXNSZWFkT25seT86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBQbGFjZWhvbGRlciB0ZXh0IGZvciB0aGUgaW5wdXRcbiAgICovXG4gIHBsYWNlaG9sZGVyPzogc3RyaW5nO1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoYXQgaW5wdXQgaGFzIGVycm9yc1xuICAgKi9cbiAgaGFzRXJyb3I/OiBib29sZWFuO1xuICAvKipcbiAgICogQ29udHJvbCB0byBpbmRpY2F0ZSBvbiB0aGUgaW5wdXQgaWYgdGhlcmUgYXJlIHNlbGVjdGVkIHZhbHVlcyB0aGF0IGFyZSBwb3RlbnRpYWxseSBpbnZhbGlkXG4gICAqL1xuICBoYXNXYXJuaW5nPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIEhvcml6b250YWwgc2l6ZSBsaW1pdCBvZiB0aGUgaW5wdXQgZmllbGRzLlxuICAgKi9cbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ/OlxuICAgIHwgNlxuICAgIHwgN1xuICAgIHwgOFxuICAgIHwgOVxuICAgIHwgMTBcbiAgICB8IDExXG4gICAgfCAxMlxuICAgIHwgMTNcbiAgICB8IDE0XG4gICAgfCAxNVxuICAgIHwgMTZcbiAgICB8ICdzY2FsZSdcbiAgICB8ICdhdXRvJztcbn07XG5cbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVE11bHRpbGluZVRleHRJbnB1dFByb3BzLFxuICAnZGVmYXVsdEV4cGFuZE11bHRpbGluZVRleHQnXG4+ID0ge1xuICBkZWZhdWx0RXhwYW5kTXVsdGlsaW5lVGV4dDogZmFsc2UsXG59O1xuXG5jb25zdCBNdWx0aWxpbmVUZXh0SW5wdXQgPSAocHJvcHM6IFRNdWx0aWxpbmVUZXh0SW5wdXRQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCBbc2hvdWxkUmVuZGVyVG9nZ2xlQnV0dG9uLCBzZXRTaG91bGRSZW5kZXJUb2dnbGVCdXR0b25dID1cbiAgICB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgW2lzT3BlbiwgdG9nZ2xlXSA9IHVzZVRvZ2dsZVN0YXRlKHByb3BzLmRlZmF1bHRFeHBhbmRNdWx0aWxpbmVUZXh0KTtcblxuICBjb25zdCB7IG9uRm9jdXMgfSA9IHByb3BzO1xuICBjb25zdCBoYW5kbGVGb2N1cyA9IHVzZUNhbGxiYWNrPEZvY3VzRXZlbnRIYW5kbGVyPEhUTUxUZXh0QXJlYUVsZW1lbnQ+PihcbiAgICAoZXZlbnQpID0+IHtcbiAgICAgIGlmICghaXNPcGVuKSB0b2dnbGUodHJ1ZSk7XG4gICAgICBpZiAob25Gb2N1cykgb25Gb2N1cyhldmVudCk7XG4gICAgfSxcbiAgICBbaXNPcGVuLCBvbkZvY3VzLCB0b2dnbGVdXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlSGVpZ2h0Q2hhbmdlID0gdXNlQ2FsbGJhY2s8XG4gICAgKGhlaWdodDogbnVtYmVyLCByb3dDb3VudDogbnVtYmVyKSA9PiB2b2lkXG4gID4oXG4gICAgKF8sIHJvd0NvdW50KSA9PiB7XG4gICAgICAvLyBUaGlzIGNoZWNrcyBpZiB0aGUgY29udGVudCBpbiB0aGUgdGV4dGFyZWEgaXMgZ3JlYXRlciB0aGFuIG9uZSByb3cuIElmIGl0IGlzLCB0aGVuIHRoZSB0b2dnbGUgYnV0dG9uIHdpbGwgYmUgc2hvd24uXG4gICAgICAvLyBUaGlzIGlzIHRvIHByZXZlbnQgdGhlIHRvZ2dsZSBidXR0b24gZnJvbSBzaG93aW5nIHdoZW4gdGhlcmUgaXMgbm90IGVub3VnaCBjb250ZW50IHRvIGV4cGFuZC9jb2xsYXBzZS5cbiAgICAgIHNldFNob3VsZFJlbmRlclRvZ2dsZUJ1dHRvbihyb3dDb3VudCA+IDEpO1xuICAgIH0sXG4gICAgW3NldFNob3VsZFJlbmRlclRvZ2dsZUJ1dHRvbl1cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxDb25zdHJhaW50cy5Ib3Jpem9udGFsIG1heD17cHJvcHMuaG9yaXpvbnRhbENvbnN0cmFpbnR9PlxuICAgICAgPFN0YWNrIHNjYWxlPVwieHNcIj5cbiAgICAgICAgPE11bHRpbGluZUlucHV0XG4gICAgICAgICAgbmFtZT17cHJvcHMubmFtZX1cbiAgICAgICAgICBhdXRvQ29tcGxldGU9e3Byb3BzLmF1dG9Db21wbGV0ZX1cbiAgICAgICAgICB2YWx1ZT17cHJvcHMudmFsdWV9XG4gICAgICAgICAgb25DaGFuZ2U9e3Byb3BzLm9uQ2hhbmdlfVxuICAgICAgICAgIG9uSGVpZ2h0Q2hhbmdlPXtoYW5kbGVIZWlnaHRDaGFuZ2V9XG4gICAgICAgICAgaWQ9e3Byb3BzLmlkfVxuICAgICAgICAgIG9uQmx1cj17cHJvcHMub25CbHVyfVxuICAgICAgICAgIG9uRm9jdXM9e2hhbmRsZUZvY3VzfVxuICAgICAgICAgIGlzRGlzYWJsZWQ9e3Byb3BzLmlzRGlzYWJsZWR9XG4gICAgICAgICAgaGFzRXJyb3I9e3Byb3BzLmhhc0Vycm9yfVxuICAgICAgICAgIGhhc1dhcm5pbmc9e3Byb3BzLmhhc1dhcm5pbmd9XG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3Byb3BzLnBsYWNlaG9sZGVyfVxuICAgICAgICAgIGlzUmVhZE9ubHk9e3Byb3BzLmlzUmVhZE9ubHl9XG4gICAgICAgICAgaXNBdXRvZm9jdXNzZWQ9e3Byb3BzLmlzQXV0b2ZvY3Vzc2VkfVxuICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgIHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcyl9XG4gICAgICAgICAgLyogQVJJQSAqL1xuICAgICAgICAgIGFyaWEtaW52YWxpZD17cHJvcHNbJ2FyaWEtaW52YWxpZCddfVxuICAgICAgICAgIGFyaWEtZXJyb3JtZXNzYWdlPXtwcm9wc1snYXJpYS1lcnJvcm1lc3NhZ2UnXX1cbiAgICAgICAgLz5cbiAgICAgICAge3Nob3VsZFJlbmRlclRvZ2dsZUJ1dHRvbiAmJiAoXG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxGbGF0QnV0dG9uXG4gICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHRvZ2dsZSgpfVxuICAgICAgICAgICAgICBpc0Rpc2FibGVkPXtwcm9wcy5pc0Rpc2FibGVkfVxuICAgICAgICAgICAgICBsYWJlbD17aW50bC5mb3JtYXRNZXNzYWdlKFxuICAgICAgICAgICAgICAgIGlzT3BlblxuICAgICAgICAgICAgICAgICAgPyBtZXNzYWdlc011bHRpbGluZUlucHV0LmNvbGxhcHNlXG4gICAgICAgICAgICAgICAgICA6IG1lc3NhZ2VzTXVsdGlsaW5lSW5wdXQuZXhwYW5kXG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIGljb249e1xuICAgICAgICAgICAgICAgIGlzT3BlbiA/IChcbiAgICAgICAgICAgICAgICAgIDxBbmdsZVVwSWNvbiBzaXplPVwic21hbGxcIiAvPlxuICAgICAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgICAgICA8QW5nbGVEb3duSWNvbiBzaXplPVwic21hbGxcIiAvPlxuICAgICAgICAgICAgICAgIClcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKX1cbiAgICAgIDwvU3RhY2s+XG4gICAgPC9Db25zdHJhaW50cy5Ib3Jpem9udGFsPlxuICApO1xufTtcblxuTXVsdGlsaW5lVGV4dElucHV0LmRpc3BsYXlOYW1lID0gJ011bHRpbGluZVRleHRJbnB1dCc7XG5cbk11bHRpbGluZVRleHRJbnB1dC5pc0VtcHR5ID0gKHZhbHVlOiBUTXVsdGlsaW5lVGV4dElucHV0UHJvcHNbJ3ZhbHVlJ10pID0+XG4gICF2YWx1ZSB8fCB2YWx1ZS50cmltKCkubGVuZ3RoID09PSAwO1xuTXVsdGlsaW5lVGV4dElucHV0LmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgTXVsdGlsaW5lVGV4dElucHV0O1xuIl19 */",
|
|
61
58
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
62
59
|
};
|
|
63
|
-
|
|
64
60
|
const MultilineTextInput = props => {
|
|
65
61
|
const intl = reactIntl.useIntl();
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
setContentRowCount = _useState2[1];
|
|
71
|
-
|
|
62
|
+
const _useState = react.useState(false),
|
|
63
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
64
|
+
shouldRenderToggleButton = _useState2[0],
|
|
65
|
+
setShouldRenderToggleButton = _useState2[1];
|
|
72
66
|
const _useToggleState = hooks.useToggleState(props.defaultExpandMultilineText),
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
67
|
+
_useToggleState2 = _slicedToArray(_useToggleState, 2),
|
|
68
|
+
isOpen = _useToggleState2[0],
|
|
69
|
+
toggle = _useToggleState2[1];
|
|
77
70
|
const onFocus = props.onFocus;
|
|
78
71
|
const handleFocus = react.useCallback(event => {
|
|
79
72
|
if (!isOpen) toggle(true);
|
|
80
73
|
if (onFocus) onFocus(event);
|
|
81
74
|
}, [isOpen, onFocus, toggle]);
|
|
82
75
|
const handleHeightChange = react.useCallback((_, rowCount) => {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
const shouldRenderToggleButton = contentRowCount > MultilineTextInput.MIN_ROW_COUNT;
|
|
76
|
+
// This checks if the content in the textarea is greater than one row. If it is, then the toggle button will be shown.
|
|
77
|
+
// This is to prevent the toggle button from showing when there is not enough content to expand/collapse.
|
|
78
|
+
setShouldRenderToggleButton(rowCount > 1);
|
|
79
|
+
}, [setShouldRenderToggleButton]);
|
|
88
80
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
89
81
|
max: props.horizontalConstraint,
|
|
90
82
|
children: jsxRuntime.jsxs(Stack__default["default"], {
|
|
@@ -125,7 +117,6 @@ const MultilineTextInput = props => {
|
|
|
125
117
|
})
|
|
126
118
|
});
|
|
127
119
|
};
|
|
128
|
-
|
|
129
120
|
MultilineTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
130
121
|
name: _pt__default["default"].string,
|
|
131
122
|
'aria-invalid': _pt__default["default"].bool,
|
|
@@ -145,19 +136,13 @@ MultilineTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
145
136
|
hasWarning: _pt__default["default"].bool,
|
|
146
137
|
horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
|
|
147
138
|
} : {};
|
|
148
|
-
MultilineTextInput.displayName = 'MultilineTextInput';
|
|
149
|
-
// When the input is closed, this is used as the maximum row count as well
|
|
150
|
-
// so that the input "collapses".
|
|
151
|
-
|
|
152
|
-
MultilineTextInput.MIN_ROW_COUNT = 1;
|
|
153
|
-
|
|
139
|
+
MultilineTextInput.displayName = 'MultilineTextInput';
|
|
154
140
|
MultilineTextInput.isEmpty = value => !value || _trimInstanceProperty__default["default"](value).call(value).length === 0;
|
|
155
|
-
|
|
156
141
|
MultilineTextInput.defaultProps = defaultProps;
|
|
157
142
|
var MultilineTextInput$1 = MultilineTextInput;
|
|
158
143
|
|
|
159
144
|
// NOTE: This string will be replaced on build time with the package version.
|
|
160
|
-
var version = "16.
|
|
145
|
+
var version = "16.1.1";
|
|
161
146
|
|
|
162
147
|
exports["default"] = MultilineTextInput$1;
|
|
163
148
|
exports.version = version;
|
|
@@ -42,41 +42,34 @@ var Stack__default = /*#__PURE__*/_interopDefault(Stack);
|
|
|
42
42
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
43
43
|
|
|
44
44
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
45
|
-
|
|
46
45
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
47
46
|
const defaultProps = {
|
|
48
47
|
defaultExpandMultilineText: false
|
|
49
48
|
};
|
|
50
|
-
|
|
51
49
|
var _ref = {
|
|
52
50
|
name: "skgbeu",
|
|
53
51
|
styles: "display:flex;justify-content:flex-end"
|
|
54
52
|
} ;
|
|
55
|
-
|
|
56
53
|
const MultilineTextInput = props => {
|
|
57
54
|
const intl = reactIntl.useIntl();
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
setContentRowCount = _useState2[1];
|
|
63
|
-
|
|
55
|
+
const _useState = react.useState(false),
|
|
56
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
57
|
+
shouldRenderToggleButton = _useState2[0],
|
|
58
|
+
setShouldRenderToggleButton = _useState2[1];
|
|
64
59
|
const _useToggleState = hooks.useToggleState(props.defaultExpandMultilineText),
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
60
|
+
_useToggleState2 = _slicedToArray(_useToggleState, 2),
|
|
61
|
+
isOpen = _useToggleState2[0],
|
|
62
|
+
toggle = _useToggleState2[1];
|
|
69
63
|
const onFocus = props.onFocus;
|
|
70
64
|
const handleFocus = react.useCallback(event => {
|
|
71
65
|
if (!isOpen) toggle(true);
|
|
72
66
|
if (onFocus) onFocus(event);
|
|
73
67
|
}, [isOpen, onFocus, toggle]);
|
|
74
68
|
const handleHeightChange = react.useCallback((_, rowCount) => {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
const shouldRenderToggleButton = contentRowCount > MultilineTextInput.MIN_ROW_COUNT;
|
|
69
|
+
// This checks if the content in the textarea is greater than one row. If it is, then the toggle button will be shown.
|
|
70
|
+
// This is to prevent the toggle button from showing when there is not enough content to expand/collapse.
|
|
71
|
+
setShouldRenderToggleButton(rowCount > 1);
|
|
72
|
+
}, [setShouldRenderToggleButton]);
|
|
80
73
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
81
74
|
max: props.horizontalConstraint,
|
|
82
75
|
children: jsxRuntime.jsxs(Stack__default["default"], {
|
|
@@ -117,21 +110,14 @@ const MultilineTextInput = props => {
|
|
|
117
110
|
})
|
|
118
111
|
});
|
|
119
112
|
};
|
|
120
|
-
|
|
121
113
|
MultilineTextInput.propTypes = {};
|
|
122
|
-
MultilineTextInput.displayName = 'MultilineTextInput';
|
|
123
|
-
// When the input is closed, this is used as the maximum row count as well
|
|
124
|
-
// so that the input "collapses".
|
|
125
|
-
|
|
126
|
-
MultilineTextInput.MIN_ROW_COUNT = 1;
|
|
127
|
-
|
|
114
|
+
MultilineTextInput.displayName = 'MultilineTextInput';
|
|
128
115
|
MultilineTextInput.isEmpty = value => !value || _trimInstanceProperty__default["default"](value).call(value).length === 0;
|
|
129
|
-
|
|
130
116
|
MultilineTextInput.defaultProps = defaultProps;
|
|
131
117
|
var MultilineTextInput$1 = MultilineTextInput;
|
|
132
118
|
|
|
133
119
|
// NOTE: This string will be replaced on build time with the package version.
|
|
134
|
-
var version = "16.
|
|
120
|
+
var version = "16.1.1";
|
|
135
121
|
|
|
136
122
|
exports["default"] = MultilineTextInput$1;
|
|
137
123
|
exports.version = version;
|
|
@@ -23,48 +23,40 @@ import { MultilineInput, messagesMultilineInput } from '@commercetools-uikit/inp
|
|
|
23
23
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
24
24
|
|
|
25
25
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
26
|
-
|
|
27
26
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
28
|
-
|
|
29
27
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
30
28
|
const defaultProps = {
|
|
31
29
|
defaultExpandMultilineText: false
|
|
32
30
|
};
|
|
33
|
-
|
|
34
31
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
35
32
|
name: "skgbeu",
|
|
36
33
|
styles: "display:flex;justify-content:flex-end"
|
|
37
34
|
} : {
|
|
38
35
|
name: "7hlegj-MultilineTextInput",
|
|
39
36
|
styles: "display:flex;justify-content:flex-end;label:MultilineTextInput;",
|
|
40
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
37
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS10ZXh0LWlucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtS29CIiwiZmlsZSI6Im11bHRpbGluZS10ZXh0LWlucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHVzZVN0YXRlLFxuICB1c2VDYWxsYmFjayxcbiAgdHlwZSBDaGFuZ2VFdmVudEhhbmRsZXIsXG4gIHR5cGUgRm9jdXNFdmVudEhhbmRsZXIsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IEFuZ2xlVXBJY29uLCBBbmdsZURvd25JY29uIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaWNvbnMnO1xuaW1wb3J0IEZsYXRCdXR0b24gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZmxhdC1idXR0b24nO1xuaW1wb3J0IHsgdXNlVG9nZ2xlU3RhdGUgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9ob29rcyc7XG5pbXBvcnQgeyBmaWx0ZXJEYXRhQXR0cmlidXRlcyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcbmltcG9ydCBTdGFjayBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1zdGFjayc7XG5pbXBvcnQgQ29uc3RyYWludHMgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY29uc3RyYWludHMnO1xuaW1wb3J0IHtcbiAgTXVsdGlsaW5lSW5wdXQsXG4gIG1lc3NhZ2VzTXVsdGlsaW5lSW5wdXQsXG59IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2lucHV0LXV0aWxzJztcblxuZXhwb3J0IHR5cGUgVE11bHRpbGluZVRleHRJbnB1dFByb3BzID0ge1xuICAvKipcbiAgICogVXNlZCBhcyBIVE1MIG5hbWUgb2YgdGhlIGlucHV0IGNvbXBvbmVudC4gcHJvcGVydHlcbiAgICovXG4gIG5hbWU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBJbmRpY2F0ZSBpZiB0aGUgdmFsdWUgZW50ZXJlZCBpbiB0aGUgaW5wdXQgaXMgaW52YWxpZC5cbiAgICovXG4gICdhcmlhLWludmFsaWQnPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIEhUTUwgSUQgb2YgYW4gZWxlbWVudCBjb250YWluaW5nIGFuIGVycm9yIG1lc3NhZ2UgcmVsYXRlZCB0byB0aGUgaW5wdXQuXG4gICAqL1xuICAnYXJpYS1lcnJvcm1lc3NhZ2UnPzogc3RyaW5nO1xuICAvKipcbiAgICogVXNlZCBhcyBIVE1MIGBhdXRvY29tcGxldGVgIHByb3BlcnR5XG4gICAqL1xuICBhdXRvQ29tcGxldGU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBVc2VkIGFzIEhUTUwgaWQgcHJvcGVydHkuIEFuIGlkIGlzIGF1dG8tZ2VuZXJhdGVkIHdoZW4gaXQgaXMgbm90IHNwZWNpZmllZC5cbiAgICovXG4gIGlkPzogc3RyaW5nO1xuICAvKipcbiAgICogVmFsdWUgb2YgdGhlIGlucHV0IGNvbXBvbmVudC5cbiAgICovXG4gIHZhbHVlOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBDYWxsZWQgd2l0aCBhbiBldmVudCBjb250YWluaW5nIHRoZSBuZXcgdmFsdWUuIFJlcXVpcmVkIHdoZW4gaW5wdXQgaXMgbm90IHJlYWQgb25seS4gUGFyZW50IHNob3VsZCBwYXNzIGl0IGJhY2sgYXMgdmFsdWUuXG4gICAqL1xuICBvbkNoYW5nZT86IENoYW5nZUV2ZW50SGFuZGxlcjxIVE1MVGV4dEFyZWFFbGVtZW50PjtcbiAgLyoqXG4gICAqIENhbGxlZCB3aGVuIGlucHV0IGlzIGJsdXJyZWRcbiAgICovXG4gIG9uQmx1cj86IEZvY3VzRXZlbnRIYW5kbGVyPEhUTUxUZXh0QXJlYUVsZW1lbnQ+O1xuICAvKipcbiAgICogQ2FsbGVkIHdoZW4gaW5wdXQgaXMgZm9jdXNlZFxuICAgKi9cbiAgb25Gb2N1cz86IEZvY3VzRXZlbnRIYW5kbGVyPEhUTUxUZXh0QXJlYUVsZW1lbnQ+O1xuICAvKipcbiAgICogRm9jdXMgdGhlIGlucHV0IG9uIGluaXRpYWwgcmVuZGVyXG4gICAqL1xuICBpc0F1dG9mb2N1c3NlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBFeHBhbmRzIG11bHRpbGluZSB0ZXh0IGlucHV0IGluaXRpYWxseVxuICAgKi9cbiAgZGVmYXVsdEV4cGFuZE11bHRpbGluZVRleHQ/OiBib29sZWFuO1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoYXQgdGhlIGlucHV0IGNhbm5vdCBiZSBtb2RpZmllZCAoZS5nIG5vdCBhdXRob3JpemVkLCBvciBjaGFuZ2VzIGN1cnJlbnRseSBzYXZpbmcpLlxuICAgKi9cbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgdGhhdCB0aGUgZmllbGQgaXMgZGlzcGxheWluZyByZWFkLW9ubHkgY29udGVudFxuICAgKi9cbiAgaXNSZWFkT25seT86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBQbGFjZWhvbGRlciB0ZXh0IGZvciB0aGUgaW5wdXRcbiAgICovXG4gIHBsYWNlaG9sZGVyPzogc3RyaW5nO1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoYXQgaW5wdXQgaGFzIGVycm9yc1xuICAgKi9cbiAgaGFzRXJyb3I/OiBib29sZWFuO1xuICAvKipcbiAgICogQ29udHJvbCB0byBpbmRpY2F0ZSBvbiB0aGUgaW5wdXQgaWYgdGhlcmUgYXJlIHNlbGVjdGVkIHZhbHVlcyB0aGF0IGFyZSBwb3RlbnRpYWxseSBpbnZhbGlkXG4gICAqL1xuICBoYXNXYXJuaW5nPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIEhvcml6b250YWwgc2l6ZSBsaW1pdCBvZiB0aGUgaW5wdXQgZmllbGRzLlxuICAgKi9cbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ/OlxuICAgIHwgNlxuICAgIHwgN1xuICAgIHwgOFxuICAgIHwgOVxuICAgIHwgMTBcbiAgICB8IDExXG4gICAgfCAxMlxuICAgIHwgMTNcbiAgICB8IDE0XG4gICAgfCAxNVxuICAgIHwgMTZcbiAgICB8ICdzY2FsZSdcbiAgICB8ICdhdXRvJztcbn07XG5cbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVE11bHRpbGluZVRleHRJbnB1dFByb3BzLFxuICAnZGVmYXVsdEV4cGFuZE11bHRpbGluZVRleHQnXG4+ID0ge1xuICBkZWZhdWx0RXhwYW5kTXVsdGlsaW5lVGV4dDogZmFsc2UsXG59O1xuXG5jb25zdCBNdWx0aWxpbmVUZXh0SW5wdXQgPSAocHJvcHM6IFRNdWx0aWxpbmVUZXh0SW5wdXRQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCBbc2hvdWxkUmVuZGVyVG9nZ2xlQnV0dG9uLCBzZXRTaG91bGRSZW5kZXJUb2dnbGVCdXR0b25dID1cbiAgICB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgW2lzT3BlbiwgdG9nZ2xlXSA9IHVzZVRvZ2dsZVN0YXRlKHByb3BzLmRlZmF1bHRFeHBhbmRNdWx0aWxpbmVUZXh0KTtcblxuICBjb25zdCB7IG9uRm9jdXMgfSA9IHByb3BzO1xuICBjb25zdCBoYW5kbGVGb2N1cyA9IHVzZUNhbGxiYWNrPEZvY3VzRXZlbnRIYW5kbGVyPEhUTUxUZXh0QXJlYUVsZW1lbnQ+PihcbiAgICAoZXZlbnQpID0+IHtcbiAgICAgIGlmICghaXNPcGVuKSB0b2dnbGUodHJ1ZSk7XG4gICAgICBpZiAob25Gb2N1cykgb25Gb2N1cyhldmVudCk7XG4gICAgfSxcbiAgICBbaXNPcGVuLCBvbkZvY3VzLCB0b2dnbGVdXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlSGVpZ2h0Q2hhbmdlID0gdXNlQ2FsbGJhY2s8XG4gICAgKGhlaWdodDogbnVtYmVyLCByb3dDb3VudDogbnVtYmVyKSA9PiB2b2lkXG4gID4oXG4gICAgKF8sIHJvd0NvdW50KSA9PiB7XG4gICAgICAvLyBUaGlzIGNoZWNrcyBpZiB0aGUgY29udGVudCBpbiB0aGUgdGV4dGFyZWEgaXMgZ3JlYXRlciB0aGFuIG9uZSByb3cuIElmIGl0IGlzLCB0aGVuIHRoZSB0b2dnbGUgYnV0dG9uIHdpbGwgYmUgc2hvd24uXG4gICAgICAvLyBUaGlzIGlzIHRvIHByZXZlbnQgdGhlIHRvZ2dsZSBidXR0b24gZnJvbSBzaG93aW5nIHdoZW4gdGhlcmUgaXMgbm90IGVub3VnaCBjb250ZW50IHRvIGV4cGFuZC9jb2xsYXBzZS5cbiAgICAgIHNldFNob3VsZFJlbmRlclRvZ2dsZUJ1dHRvbihyb3dDb3VudCA+IDEpO1xuICAgIH0sXG4gICAgW3NldFNob3VsZFJlbmRlclRvZ2dsZUJ1dHRvbl1cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxDb25zdHJhaW50cy5Ib3Jpem9udGFsIG1heD17cHJvcHMuaG9yaXpvbnRhbENvbnN0cmFpbnR9PlxuICAgICAgPFN0YWNrIHNjYWxlPVwieHNcIj5cbiAgICAgICAgPE11bHRpbGluZUlucHV0XG4gICAgICAgICAgbmFtZT17cHJvcHMubmFtZX1cbiAgICAgICAgICBhdXRvQ29tcGxldGU9e3Byb3BzLmF1dG9Db21wbGV0ZX1cbiAgICAgICAgICB2YWx1ZT17cHJvcHMudmFsdWV9XG4gICAgICAgICAgb25DaGFuZ2U9e3Byb3BzLm9uQ2hhbmdlfVxuICAgICAgICAgIG9uSGVpZ2h0Q2hhbmdlPXtoYW5kbGVIZWlnaHRDaGFuZ2V9XG4gICAgICAgICAgaWQ9e3Byb3BzLmlkfVxuICAgICAgICAgIG9uQmx1cj17cHJvcHMub25CbHVyfVxuICAgICAgICAgIG9uRm9jdXM9e2hhbmRsZUZvY3VzfVxuICAgICAgICAgIGlzRGlzYWJsZWQ9e3Byb3BzLmlzRGlzYWJsZWR9XG4gICAgICAgICAgaGFzRXJyb3I9e3Byb3BzLmhhc0Vycm9yfVxuICAgICAgICAgIGhhc1dhcm5pbmc9e3Byb3BzLmhhc1dhcm5pbmd9XG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3Byb3BzLnBsYWNlaG9sZGVyfVxuICAgICAgICAgIGlzUmVhZE9ubHk9e3Byb3BzLmlzUmVhZE9ubHl9XG4gICAgICAgICAgaXNBdXRvZm9jdXNzZWQ9e3Byb3BzLmlzQXV0b2ZvY3Vzc2VkfVxuICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgIHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcyl9XG4gICAgICAgICAgLyogQVJJQSAqL1xuICAgICAgICAgIGFyaWEtaW52YWxpZD17cHJvcHNbJ2FyaWEtaW52YWxpZCddfVxuICAgICAgICAgIGFyaWEtZXJyb3JtZXNzYWdlPXtwcm9wc1snYXJpYS1lcnJvcm1lc3NhZ2UnXX1cbiAgICAgICAgLz5cbiAgICAgICAge3Nob3VsZFJlbmRlclRvZ2dsZUJ1dHRvbiAmJiAoXG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxGbGF0QnV0dG9uXG4gICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHRvZ2dsZSgpfVxuICAgICAgICAgICAgICBpc0Rpc2FibGVkPXtwcm9wcy5pc0Rpc2FibGVkfVxuICAgICAgICAgICAgICBsYWJlbD17aW50bC5mb3JtYXRNZXNzYWdlKFxuICAgICAgICAgICAgICAgIGlzT3BlblxuICAgICAgICAgICAgICAgICAgPyBtZXNzYWdlc011bHRpbGluZUlucHV0LmNvbGxhcHNlXG4gICAgICAgICAgICAgICAgICA6IG1lc3NhZ2VzTXVsdGlsaW5lSW5wdXQuZXhwYW5kXG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIGljb249e1xuICAgICAgICAgICAgICAgIGlzT3BlbiA/IChcbiAgICAgICAgICAgICAgICAgIDxBbmdsZVVwSWNvbiBzaXplPVwic21hbGxcIiAvPlxuICAgICAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgICAgICA8QW5nbGVEb3duSWNvbiBzaXplPVwic21hbGxcIiAvPlxuICAgICAgICAgICAgICAgIClcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKX1cbiAgICAgIDwvU3RhY2s+XG4gICAgPC9Db25zdHJhaW50cy5Ib3Jpem9udGFsPlxuICApO1xufTtcblxuTXVsdGlsaW5lVGV4dElucHV0LmRpc3BsYXlOYW1lID0gJ011bHRpbGluZVRleHRJbnB1dCc7XG5cbk11bHRpbGluZVRleHRJbnB1dC5pc0VtcHR5ID0gKHZhbHVlOiBUTXVsdGlsaW5lVGV4dElucHV0UHJvcHNbJ3ZhbHVlJ10pID0+XG4gICF2YWx1ZSB8fCB2YWx1ZS50cmltKCkubGVuZ3RoID09PSAwO1xuTXVsdGlsaW5lVGV4dElucHV0LmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgTXVsdGlsaW5lVGV4dElucHV0O1xuIl19 */",
|
|
41
38
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
42
39
|
};
|
|
43
|
-
|
|
44
40
|
const MultilineTextInput = props => {
|
|
45
41
|
const intl = useIntl();
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
setContentRowCount = _useState2[1];
|
|
51
|
-
|
|
42
|
+
const _useState = useState(false),
|
|
43
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
44
|
+
shouldRenderToggleButton = _useState2[0],
|
|
45
|
+
setShouldRenderToggleButton = _useState2[1];
|
|
52
46
|
const _useToggleState = useToggleState(props.defaultExpandMultilineText),
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
47
|
+
_useToggleState2 = _slicedToArray(_useToggleState, 2),
|
|
48
|
+
isOpen = _useToggleState2[0],
|
|
49
|
+
toggle = _useToggleState2[1];
|
|
57
50
|
const onFocus = props.onFocus;
|
|
58
51
|
const handleFocus = useCallback(event => {
|
|
59
52
|
if (!isOpen) toggle(true);
|
|
60
53
|
if (onFocus) onFocus(event);
|
|
61
54
|
}, [isOpen, onFocus, toggle]);
|
|
62
55
|
const handleHeightChange = useCallback((_, rowCount) => {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const shouldRenderToggleButton = contentRowCount > MultilineTextInput.MIN_ROW_COUNT;
|
|
56
|
+
// This checks if the content in the textarea is greater than one row. If it is, then the toggle button will be shown.
|
|
57
|
+
// This is to prevent the toggle button from showing when there is not enough content to expand/collapse.
|
|
58
|
+
setShouldRenderToggleButton(rowCount > 1);
|
|
59
|
+
}, [setShouldRenderToggleButton]);
|
|
68
60
|
return jsx(Constraints.Horizontal, {
|
|
69
61
|
max: props.horizontalConstraint,
|
|
70
62
|
children: jsxs(Stack, {
|
|
@@ -105,7 +97,6 @@ const MultilineTextInput = props => {
|
|
|
105
97
|
})
|
|
106
98
|
});
|
|
107
99
|
};
|
|
108
|
-
|
|
109
100
|
MultilineTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
110
101
|
name: _pt.string,
|
|
111
102
|
'aria-invalid': _pt.bool,
|
|
@@ -125,18 +116,12 @@ MultilineTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
125
116
|
hasWarning: _pt.bool,
|
|
126
117
|
horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
|
|
127
118
|
} : {};
|
|
128
|
-
MultilineTextInput.displayName = 'MultilineTextInput';
|
|
129
|
-
// When the input is closed, this is used as the maximum row count as well
|
|
130
|
-
// so that the input "collapses".
|
|
131
|
-
|
|
132
|
-
MultilineTextInput.MIN_ROW_COUNT = 1;
|
|
133
|
-
|
|
119
|
+
MultilineTextInput.displayName = 'MultilineTextInput';
|
|
134
120
|
MultilineTextInput.isEmpty = value => !value || _trimInstanceProperty(value).call(value).length === 0;
|
|
135
|
-
|
|
136
121
|
MultilineTextInput.defaultProps = defaultProps;
|
|
137
122
|
var MultilineTextInput$1 = MultilineTextInput;
|
|
138
123
|
|
|
139
124
|
// NOTE: This string will be replaced on build time with the package version.
|
|
140
|
-
var version = "16.
|
|
125
|
+
var version = "16.1.1";
|
|
141
126
|
|
|
142
127
|
export { MultilineTextInput$1 as default, version };
|
|
@@ -21,7 +21,6 @@ export type TMultilineTextInputProps = {
|
|
|
21
21
|
declare const MultilineTextInput: {
|
|
22
22
|
(props: TMultilineTextInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
23
23
|
displayName: string;
|
|
24
|
-
MIN_ROW_COUNT: number;
|
|
25
24
|
isEmpty(value: TMultilineTextInputProps['value']): boolean;
|
|
26
25
|
defaultProps: Pick<TMultilineTextInputProps, "defaultExpandMultilineText">;
|
|
27
26
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/multiline-text-input",
|
|
3
3
|
"description": "A controlled text input component for multi-line strings with validation states.",
|
|
4
|
-
"version": "16.
|
|
4
|
+
"version": "16.1.1",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,16 +21,16 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "16.
|
|
25
|
-
"@commercetools-uikit/design-system": "16.
|
|
26
|
-
"@commercetools-uikit/flat-button": "16.
|
|
27
|
-
"@commercetools-uikit/hooks": "16.
|
|
28
|
-
"@commercetools-uikit/icons": "16.
|
|
29
|
-
"@commercetools-uikit/input-utils": "16.
|
|
30
|
-
"@commercetools-uikit/spacings-inline": "16.
|
|
31
|
-
"@commercetools-uikit/spacings-stack": "16.
|
|
32
|
-
"@commercetools-uikit/tooltip": "16.
|
|
33
|
-
"@commercetools-uikit/utils": "16.
|
|
24
|
+
"@commercetools-uikit/constraints": "16.1.1",
|
|
25
|
+
"@commercetools-uikit/design-system": "16.1.1",
|
|
26
|
+
"@commercetools-uikit/flat-button": "16.1.1",
|
|
27
|
+
"@commercetools-uikit/hooks": "16.1.1",
|
|
28
|
+
"@commercetools-uikit/icons": "16.1.1",
|
|
29
|
+
"@commercetools-uikit/input-utils": "16.1.1",
|
|
30
|
+
"@commercetools-uikit/spacings-inline": "16.1.1",
|
|
31
|
+
"@commercetools-uikit/spacings-stack": "16.1.1",
|
|
32
|
+
"@commercetools-uikit/tooltip": "16.1.1",
|
|
33
|
+
"@commercetools-uikit/utils": "16.1.1",
|
|
34
34
|
"@emotion/react": "^11.10.5",
|
|
35
35
|
"@emotion/styled": "^11.10.5",
|
|
36
36
|
"downshift": "6.1.12",
|