@commercetools-uikit/input-utils 19.20.1 → 19.22.0
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-input-utils.cjs.dev.js +25 -18
- package/dist/commercetools-uikit-input-utils.cjs.prod.js +22 -15
- package/dist/commercetools-uikit-input-utils.esm.js +25 -18
- package/dist/declarations/src/localized-input-toggle/localized-input-toggle.d.ts +3 -4
- package/dist/declarations/src/multiline-input/multiline-input.d.ts +1 -4
- package/package.json +5 -5
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var react = require('@emotion/react');
|
|
6
6
|
var designSystem = require('@commercetools-uikit/design-system');
|
|
7
|
+
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
|
|
7
8
|
var _pt = require('prop-types');
|
|
8
9
|
var react$1 = require('react');
|
|
9
10
|
var reactIntl = require('react-intl');
|
|
@@ -56,23 +57,25 @@ var messages$1 = reactIntl.defineMessages({
|
|
|
56
57
|
}
|
|
57
58
|
});
|
|
58
59
|
|
|
60
|
+
const _excluded$1 = ["hideMessage", "showMessage"];
|
|
59
61
|
function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { 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)."; }
|
|
60
|
-
const defaultProps = {
|
|
61
|
-
hideMessage: messages$1.hide,
|
|
62
|
-
showMessage: messages$1.show
|
|
63
|
-
};
|
|
64
62
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
65
63
|
name: "xyzkeb",
|
|
66
64
|
styles: "align-self:flex-start"
|
|
67
65
|
} : {
|
|
68
66
|
name: "10vpa6o-LocalizedInputToggle",
|
|
69
67
|
styles: "align-self:flex-start;label:LocalizedInputToggle;",
|
|
70
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
68
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvY2FsaXplZC1pbnB1dC10b2dnbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDYyIsImZpbGUiOiJsb2NhbGl6ZWQtaW5wdXQtdG9nZ2xlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB0eXBlIHsgTWVzc2FnZURlc2NyaXB0b3IgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IE1vdXNlRXZlbnQsIEtleWJvYXJkRXZlbnQsIFJlYWN0RWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCBGbGF0QnV0dG9uIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ZsYXQtYnV0dG9uJztcbmltcG9ydCB7IFdvcmxkSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuLi9tZXNzYWdlcy9sb2NhbGl6ZWQtaW5wdXQnO1xuXG5leHBvcnQgdHlwZSBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcyA9IHtcbiAgaWNvbj86IFJlYWN0RWxlbWVudDtcbiAgaXNPcGVuPzogYm9vbGVhbjtcbiAgb25DbGljazogKFxuICAgIGV2ZW50OlxuICAgICAgfCBNb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBLZXlib2FyZEV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBib29sZWFuXG4gICkgPT4gdm9pZDtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIHNob3dNZXNzYWdlPzogc3RyaW5nIHwgTWVzc2FnZURlc2NyaXB0b3I7XG4gIGhpZGVNZXNzYWdlPzogc3RyaW5nIHwgTWVzc2FnZURlc2NyaXB0b3I7XG4gIHJlbWFpbmluZ0xvY2FsaXphdGlvbnM/OiBudW1iZXI7XG59O1xuXG5jb25zdCBMb2NhbGl6ZWRJbnB1dFRvZ2dsZSA9ICh7XG4gIGhpZGVNZXNzYWdlID0gbWVzc2FnZXMuaGlkZSxcbiAgc2hvd01lc3NhZ2UgPSBtZXNzYWdlcy5zaG93LFxuICAuLi5wcm9wc1xufTogVExvY2FsaXplZElucHV0VG9nZ2xlUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3QgbGFiZWxNZXNzYWdlID0gcHJvcHMuaXNPcGVuID8gaGlkZU1lc3NhZ2UgOiBzaG93TWVzc2FnZTtcbiAgY29uc3QgbGFiZWwgPVxuICAgIHR5cGVvZiBsYWJlbE1lc3NhZ2UgPT09ICdzdHJpbmcnXG4gICAgICA/IGxhYmVsTWVzc2FnZVxuICAgICAgOiBpbnRsLmZvcm1hdE1lc3NhZ2UobGFiZWxNZXNzYWdlLCB7XG4gICAgICAgICAgcmVtYWluaW5nTGFuZ3VhZ2VzOiBwcm9wcy5yZW1haW5pbmdMb2NhbGl6YXRpb25zLFxuICAgICAgICB9KTtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgYWxpZ24tc2VsZjogZmxleC1zdGFydDtcbiAgICAgIGB9XG4gICAgPlxuICAgICAgPEZsYXRCdXR0b25cbiAgICAgICAgaWNvbj17cHJvcHMuaWNvbiA/IHByb3BzLmljb24gOiA8V29ybGRJY29uIC8+fVxuICAgICAgICBsYWJlbD17bGFiZWx9XG4gICAgICAgIG9uQ2xpY2s9e3Byb3BzLm9uQ2xpY2t9XG4gICAgICAgIGlzRGlzYWJsZWQ9e3Byb3BzLmlzRGlzYWJsZWR9XG4gICAgICAvPlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuTG9jYWxpemVkSW5wdXRUb2dnbGUuZGlzcGxheU5hbWUgPSAnTG9jYWxpemVkSW5wdXRUb2dnbGUnO1xuZXhwb3J0IGRlZmF1bHQgTG9jYWxpemVkSW5wdXRUb2dnbGU7XG4iXX0= */",
|
|
71
69
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
|
|
72
70
|
};
|
|
73
|
-
const LocalizedInputToggle =
|
|
71
|
+
const LocalizedInputToggle = _ref2 => {
|
|
72
|
+
let _ref2$hideMessage = _ref2.hideMessage,
|
|
73
|
+
hideMessage = _ref2$hideMessage === void 0 ? messages$1.hide : _ref2$hideMessage,
|
|
74
|
+
_ref2$showMessage = _ref2.showMessage,
|
|
75
|
+
showMessage = _ref2$showMessage === void 0 ? messages$1.show : _ref2$showMessage,
|
|
76
|
+
props = _objectWithoutProperties(_ref2, _excluded$1);
|
|
74
77
|
const intl = reactIntl.useIntl();
|
|
75
|
-
const labelMessage = props.isOpen ?
|
|
78
|
+
const labelMessage = props.isOpen ? hideMessage : showMessage;
|
|
76
79
|
const label = typeof labelMessage === 'string' ? labelMessage : intl.formatMessage(labelMessage, {
|
|
77
80
|
remainingLanguages: props.remainingLocalizations
|
|
78
81
|
});
|
|
@@ -91,11 +94,10 @@ LocalizedInputToggle.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
91
94
|
isOpen: _pt__default["default"].bool,
|
|
92
95
|
onClick: _pt__default["default"].func.isRequired,
|
|
93
96
|
isDisabled: _pt__default["default"].bool,
|
|
94
|
-
showMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].any])
|
|
95
|
-
hideMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].any])
|
|
97
|
+
showMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].any]),
|
|
98
|
+
hideMessage: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].any]),
|
|
96
99
|
remainingLocalizations: _pt__default["default"].number
|
|
97
100
|
} : {};
|
|
98
|
-
LocalizedInputToggle.defaultProps = defaultProps;
|
|
99
101
|
LocalizedInputToggle.displayName = 'LocalizedInputToggle';
|
|
100
102
|
var LocalizedInputToggle$1 = LocalizedInputToggle;
|
|
101
103
|
|
|
@@ -164,6 +166,7 @@ const getTextareaStyles = props => {
|
|
|
164
166
|
return baseStyles;
|
|
165
167
|
};
|
|
166
168
|
|
|
169
|
+
const _excluded = ["cacheMeasurements"];
|
|
167
170
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
168
171
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
169
172
|
const MIN_ROW_COUNT = 1;
|
|
@@ -180,7 +183,10 @@ const getElementVerticalPadding = element => {
|
|
|
180
183
|
}
|
|
181
184
|
return _elementVerticalPadding;
|
|
182
185
|
};
|
|
183
|
-
const MultilineInput =
|
|
186
|
+
const MultilineInput = _ref => {
|
|
187
|
+
let _ref$cacheMeasurement = _ref.cacheMeasurements,
|
|
188
|
+
cacheMeasurements = _ref$cacheMeasurement === void 0 ? true : _ref$cacheMeasurement,
|
|
189
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
184
190
|
const onHeightChange = props.onHeightChange;
|
|
185
191
|
const ref = react$1.useRef(null);
|
|
186
192
|
const handleHeightChange = react$1.useCallback((_, meta) => {
|
|
@@ -208,7 +214,9 @@ const MultilineInput = props => {
|
|
|
208
214
|
placeholder: props.placeholder,
|
|
209
215
|
readOnly: props.isReadOnly,
|
|
210
216
|
autoFocus: props.isAutofocussed,
|
|
211
|
-
css: getTextareaStyles(
|
|
217
|
+
css: getTextareaStyles(_objectSpread({
|
|
218
|
+
cacheMeasurements
|
|
219
|
+
}, props))
|
|
212
220
|
// Allow to override the styles by passing a `className` prop.
|
|
213
221
|
// Custom styles can also be passed using the `css` prop from emotion.
|
|
214
222
|
// https://emotion.sh/docs/css-prop#style-precedence
|
|
@@ -222,8 +230,10 @@ const MultilineInput = props => {
|
|
|
222
230
|
role: "textbox",
|
|
223
231
|
minRows: MIN_ROW_COUNT,
|
|
224
232
|
maxRows: props.isOpen ? props.maxRows : MIN_ROW_COUNT,
|
|
225
|
-
cacheMeasurements:
|
|
226
|
-
}, utils.filterDataAttributes(
|
|
233
|
+
cacheMeasurements: cacheMeasurements
|
|
234
|
+
}, utils.filterDataAttributes(_objectSpread({
|
|
235
|
+
cacheMeasurements
|
|
236
|
+
}, props))));
|
|
227
237
|
};
|
|
228
238
|
MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
229
239
|
autoComplete: _pt__default["default"].string,
|
|
@@ -249,9 +259,6 @@ MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
249
259
|
'aria-errormessage': _pt__default["default"].string
|
|
250
260
|
} : {};
|
|
251
261
|
MultilineInput.displayName = 'MultilineInput';
|
|
252
|
-
MultilineInput.defaultProps = {
|
|
253
|
-
cacheMeasurements: true
|
|
254
|
-
};
|
|
255
262
|
var MultilineInput$1 = MultilineInput;
|
|
256
263
|
|
|
257
264
|
var messages = reactIntl.defineMessages({
|
|
@@ -280,7 +287,7 @@ const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
|
|
|
280
287
|
var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
|
|
281
288
|
|
|
282
289
|
// NOTE: This string will be replaced on build time with the package version.
|
|
283
|
-
var version = "19.
|
|
290
|
+
var version = "19.22.0";
|
|
284
291
|
|
|
285
292
|
exports.LocalizedInputToggle = LocalizedInputToggle$1;
|
|
286
293
|
exports.MultilineInput = MultilineInput$1;
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var react = require('@emotion/react');
|
|
6
6
|
var designSystem = require('@commercetools-uikit/design-system');
|
|
7
|
+
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
|
|
7
8
|
require('prop-types');
|
|
8
9
|
var react$1 = require('react');
|
|
9
10
|
var reactIntl = require('react-intl');
|
|
@@ -55,17 +56,19 @@ var messages$1 = reactIntl.defineMessages({
|
|
|
55
56
|
}
|
|
56
57
|
});
|
|
57
58
|
|
|
58
|
-
const
|
|
59
|
-
hideMessage: messages$1.hide,
|
|
60
|
-
showMessage: messages$1.show
|
|
61
|
-
};
|
|
59
|
+
const _excluded$1 = ["hideMessage", "showMessage"];
|
|
62
60
|
var _ref = {
|
|
63
61
|
name: "xyzkeb",
|
|
64
62
|
styles: "align-self:flex-start"
|
|
65
63
|
} ;
|
|
66
|
-
const LocalizedInputToggle =
|
|
64
|
+
const LocalizedInputToggle = _ref2 => {
|
|
65
|
+
let _ref2$hideMessage = _ref2.hideMessage,
|
|
66
|
+
hideMessage = _ref2$hideMessage === void 0 ? messages$1.hide : _ref2$hideMessage,
|
|
67
|
+
_ref2$showMessage = _ref2.showMessage,
|
|
68
|
+
showMessage = _ref2$showMessage === void 0 ? messages$1.show : _ref2$showMessage,
|
|
69
|
+
props = _objectWithoutProperties(_ref2, _excluded$1);
|
|
67
70
|
const intl = reactIntl.useIntl();
|
|
68
|
-
const labelMessage = props.isOpen ?
|
|
71
|
+
const labelMessage = props.isOpen ? hideMessage : showMessage;
|
|
69
72
|
const label = typeof labelMessage === 'string' ? labelMessage : intl.formatMessage(labelMessage, {
|
|
70
73
|
remainingLanguages: props.remainingLocalizations
|
|
71
74
|
});
|
|
@@ -80,7 +83,6 @@ const LocalizedInputToggle = props => {
|
|
|
80
83
|
});
|
|
81
84
|
};
|
|
82
85
|
LocalizedInputToggle.propTypes = {};
|
|
83
|
-
LocalizedInputToggle.defaultProps = defaultProps;
|
|
84
86
|
LocalizedInputToggle.displayName = 'LocalizedInputToggle';
|
|
85
87
|
var LocalizedInputToggle$1 = LocalizedInputToggle;
|
|
86
88
|
|
|
@@ -149,6 +151,7 @@ const getTextareaStyles = props => {
|
|
|
149
151
|
return baseStyles;
|
|
150
152
|
};
|
|
151
153
|
|
|
154
|
+
const _excluded = ["cacheMeasurements"];
|
|
152
155
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
153
156
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
154
157
|
const MIN_ROW_COUNT = 1;
|
|
@@ -165,7 +168,10 @@ const getElementVerticalPadding = element => {
|
|
|
165
168
|
}
|
|
166
169
|
return _elementVerticalPadding;
|
|
167
170
|
};
|
|
168
|
-
const MultilineInput =
|
|
171
|
+
const MultilineInput = _ref => {
|
|
172
|
+
let _ref$cacheMeasurement = _ref.cacheMeasurements,
|
|
173
|
+
cacheMeasurements = _ref$cacheMeasurement === void 0 ? true : _ref$cacheMeasurement,
|
|
174
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
169
175
|
const onHeightChange = props.onHeightChange;
|
|
170
176
|
const ref = react$1.useRef(null);
|
|
171
177
|
const handleHeightChange = react$1.useCallback((_, meta) => {
|
|
@@ -191,7 +197,9 @@ const MultilineInput = props => {
|
|
|
191
197
|
placeholder: props.placeholder,
|
|
192
198
|
readOnly: props.isReadOnly,
|
|
193
199
|
autoFocus: props.isAutofocussed,
|
|
194
|
-
css: getTextareaStyles(
|
|
200
|
+
css: getTextareaStyles(_objectSpread({
|
|
201
|
+
cacheMeasurements
|
|
202
|
+
}, props))
|
|
195
203
|
// Allow to override the styles by passing a `className` prop.
|
|
196
204
|
// Custom styles can also be passed using the `css` prop from emotion.
|
|
197
205
|
// https://emotion.sh/docs/css-prop#style-precedence
|
|
@@ -205,14 +213,13 @@ const MultilineInput = props => {
|
|
|
205
213
|
role: "textbox",
|
|
206
214
|
minRows: MIN_ROW_COUNT,
|
|
207
215
|
maxRows: props.isOpen ? props.maxRows : MIN_ROW_COUNT,
|
|
208
|
-
cacheMeasurements:
|
|
209
|
-
}, utils.filterDataAttributes(
|
|
216
|
+
cacheMeasurements: cacheMeasurements
|
|
217
|
+
}, utils.filterDataAttributes(_objectSpread({
|
|
218
|
+
cacheMeasurements
|
|
219
|
+
}, props))));
|
|
210
220
|
};
|
|
211
221
|
MultilineInput.propTypes = {};
|
|
212
222
|
MultilineInput.displayName = 'MultilineInput';
|
|
213
|
-
MultilineInput.defaultProps = {
|
|
214
|
-
cacheMeasurements: true
|
|
215
|
-
};
|
|
216
223
|
var MultilineInput$1 = MultilineInput;
|
|
217
224
|
|
|
218
225
|
var messages = reactIntl.defineMessages({
|
|
@@ -235,7 +242,7 @@ const accessibleHiddenInputStyles = {
|
|
|
235
242
|
var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
|
|
236
243
|
|
|
237
244
|
// NOTE: This string will be replaced on build time with the package version.
|
|
238
|
-
var version = "19.
|
|
245
|
+
var version = "19.22.0";
|
|
239
246
|
|
|
240
247
|
exports.LocalizedInputToggle = LocalizedInputToggle$1;
|
|
241
248
|
exports.MultilineInput = MultilineInput$1;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import { designTokens } from '@commercetools-uikit/design-system';
|
|
3
|
+
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
|
|
3
4
|
import _pt from 'prop-types';
|
|
4
5
|
import { useRef, useCallback } from 'react';
|
|
5
6
|
import { defineMessages, useIntl } from 'react-intl';
|
|
@@ -37,23 +38,25 @@ var messages$1 = defineMessages({
|
|
|
37
38
|
}
|
|
38
39
|
});
|
|
39
40
|
|
|
41
|
+
const _excluded$1 = ["hideMessage", "showMessage"];
|
|
40
42
|
function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { 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)."; }
|
|
41
|
-
const defaultProps = {
|
|
42
|
-
hideMessage: messages$1.hide,
|
|
43
|
-
showMessage: messages$1.show
|
|
44
|
-
};
|
|
45
43
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
46
44
|
name: "xyzkeb",
|
|
47
45
|
styles: "align-self:flex-start"
|
|
48
46
|
} : {
|
|
49
47
|
name: "10vpa6o-LocalizedInputToggle",
|
|
50
48
|
styles: "align-self:flex-start;label:LocalizedInputToggle;",
|
|
51
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
49
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvY2FsaXplZC1pbnB1dC10b2dnbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDYyIsImZpbGUiOiJsb2NhbGl6ZWQtaW5wdXQtdG9nZ2xlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB0eXBlIHsgTWVzc2FnZURlc2NyaXB0b3IgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IE1vdXNlRXZlbnQsIEtleWJvYXJkRXZlbnQsIFJlYWN0RWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCBGbGF0QnV0dG9uIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ZsYXQtYnV0dG9uJztcbmltcG9ydCB7IFdvcmxkSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuLi9tZXNzYWdlcy9sb2NhbGl6ZWQtaW5wdXQnO1xuXG5leHBvcnQgdHlwZSBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcyA9IHtcbiAgaWNvbj86IFJlYWN0RWxlbWVudDtcbiAgaXNPcGVuPzogYm9vbGVhbjtcbiAgb25DbGljazogKFxuICAgIGV2ZW50OlxuICAgICAgfCBNb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBLZXlib2FyZEV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBib29sZWFuXG4gICkgPT4gdm9pZDtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIHNob3dNZXNzYWdlPzogc3RyaW5nIHwgTWVzc2FnZURlc2NyaXB0b3I7XG4gIGhpZGVNZXNzYWdlPzogc3RyaW5nIHwgTWVzc2FnZURlc2NyaXB0b3I7XG4gIHJlbWFpbmluZ0xvY2FsaXphdGlvbnM/OiBudW1iZXI7XG59O1xuXG5jb25zdCBMb2NhbGl6ZWRJbnB1dFRvZ2dsZSA9ICh7XG4gIGhpZGVNZXNzYWdlID0gbWVzc2FnZXMuaGlkZSxcbiAgc2hvd01lc3NhZ2UgPSBtZXNzYWdlcy5zaG93LFxuICAuLi5wcm9wc1xufTogVExvY2FsaXplZElucHV0VG9nZ2xlUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3QgbGFiZWxNZXNzYWdlID0gcHJvcHMuaXNPcGVuID8gaGlkZU1lc3NhZ2UgOiBzaG93TWVzc2FnZTtcbiAgY29uc3QgbGFiZWwgPVxuICAgIHR5cGVvZiBsYWJlbE1lc3NhZ2UgPT09ICdzdHJpbmcnXG4gICAgICA/IGxhYmVsTWVzc2FnZVxuICAgICAgOiBpbnRsLmZvcm1hdE1lc3NhZ2UobGFiZWxNZXNzYWdlLCB7XG4gICAgICAgICAgcmVtYWluaW5nTGFuZ3VhZ2VzOiBwcm9wcy5yZW1haW5pbmdMb2NhbGl6YXRpb25zLFxuICAgICAgICB9KTtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgYWxpZ24tc2VsZjogZmxleC1zdGFydDtcbiAgICAgIGB9XG4gICAgPlxuICAgICAgPEZsYXRCdXR0b25cbiAgICAgICAgaWNvbj17cHJvcHMuaWNvbiA/IHByb3BzLmljb24gOiA8V29ybGRJY29uIC8+fVxuICAgICAgICBsYWJlbD17bGFiZWx9XG4gICAgICAgIG9uQ2xpY2s9e3Byb3BzLm9uQ2xpY2t9XG4gICAgICAgIGlzRGlzYWJsZWQ9e3Byb3BzLmlzRGlzYWJsZWR9XG4gICAgICAvPlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuTG9jYWxpemVkSW5wdXRUb2dnbGUuZGlzcGxheU5hbWUgPSAnTG9jYWxpemVkSW5wdXRUb2dnbGUnO1xuZXhwb3J0IGRlZmF1bHQgTG9jYWxpemVkSW5wdXRUb2dnbGU7XG4iXX0= */",
|
|
52
50
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
|
|
53
51
|
};
|
|
54
|
-
const LocalizedInputToggle =
|
|
52
|
+
const LocalizedInputToggle = _ref2 => {
|
|
53
|
+
let _ref2$hideMessage = _ref2.hideMessage,
|
|
54
|
+
hideMessage = _ref2$hideMessage === void 0 ? messages$1.hide : _ref2$hideMessage,
|
|
55
|
+
_ref2$showMessage = _ref2.showMessage,
|
|
56
|
+
showMessage = _ref2$showMessage === void 0 ? messages$1.show : _ref2$showMessage,
|
|
57
|
+
props = _objectWithoutProperties(_ref2, _excluded$1);
|
|
55
58
|
const intl = useIntl();
|
|
56
|
-
const labelMessage = props.isOpen ?
|
|
59
|
+
const labelMessage = props.isOpen ? hideMessage : showMessage;
|
|
57
60
|
const label = typeof labelMessage === 'string' ? labelMessage : intl.formatMessage(labelMessage, {
|
|
58
61
|
remainingLanguages: props.remainingLocalizations
|
|
59
62
|
});
|
|
@@ -72,11 +75,10 @@ LocalizedInputToggle.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
72
75
|
isOpen: _pt.bool,
|
|
73
76
|
onClick: _pt.func.isRequired,
|
|
74
77
|
isDisabled: _pt.bool,
|
|
75
|
-
showMessage: _pt.oneOfType([_pt.string, _pt.any])
|
|
76
|
-
hideMessage: _pt.oneOfType([_pt.string, _pt.any])
|
|
78
|
+
showMessage: _pt.oneOfType([_pt.string, _pt.any]),
|
|
79
|
+
hideMessage: _pt.oneOfType([_pt.string, _pt.any]),
|
|
77
80
|
remainingLocalizations: _pt.number
|
|
78
81
|
} : {};
|
|
79
|
-
LocalizedInputToggle.defaultProps = defaultProps;
|
|
80
82
|
LocalizedInputToggle.displayName = 'LocalizedInputToggle';
|
|
81
83
|
var LocalizedInputToggle$1 = LocalizedInputToggle;
|
|
82
84
|
|
|
@@ -145,6 +147,7 @@ const getTextareaStyles = props => {
|
|
|
145
147
|
return baseStyles;
|
|
146
148
|
};
|
|
147
149
|
|
|
150
|
+
const _excluded = ["cacheMeasurements"];
|
|
148
151
|
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
149
152
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
150
153
|
const MIN_ROW_COUNT = 1;
|
|
@@ -161,7 +164,10 @@ const getElementVerticalPadding = element => {
|
|
|
161
164
|
}
|
|
162
165
|
return _elementVerticalPadding;
|
|
163
166
|
};
|
|
164
|
-
const MultilineInput =
|
|
167
|
+
const MultilineInput = _ref => {
|
|
168
|
+
let _ref$cacheMeasurement = _ref.cacheMeasurements,
|
|
169
|
+
cacheMeasurements = _ref$cacheMeasurement === void 0 ? true : _ref$cacheMeasurement,
|
|
170
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
165
171
|
const onHeightChange = props.onHeightChange;
|
|
166
172
|
const ref = useRef(null);
|
|
167
173
|
const handleHeightChange = useCallback((_, meta) => {
|
|
@@ -189,7 +195,9 @@ const MultilineInput = props => {
|
|
|
189
195
|
placeholder: props.placeholder,
|
|
190
196
|
readOnly: props.isReadOnly,
|
|
191
197
|
autoFocus: props.isAutofocussed,
|
|
192
|
-
css: getTextareaStyles(
|
|
198
|
+
css: getTextareaStyles(_objectSpread({
|
|
199
|
+
cacheMeasurements
|
|
200
|
+
}, props))
|
|
193
201
|
// Allow to override the styles by passing a `className` prop.
|
|
194
202
|
// Custom styles can also be passed using the `css` prop from emotion.
|
|
195
203
|
// https://emotion.sh/docs/css-prop#style-precedence
|
|
@@ -203,8 +211,10 @@ const MultilineInput = props => {
|
|
|
203
211
|
role: "textbox",
|
|
204
212
|
minRows: MIN_ROW_COUNT,
|
|
205
213
|
maxRows: props.isOpen ? props.maxRows : MIN_ROW_COUNT,
|
|
206
|
-
cacheMeasurements:
|
|
207
|
-
}, filterDataAttributes(
|
|
214
|
+
cacheMeasurements: cacheMeasurements
|
|
215
|
+
}, filterDataAttributes(_objectSpread({
|
|
216
|
+
cacheMeasurements
|
|
217
|
+
}, props))));
|
|
208
218
|
};
|
|
209
219
|
MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
210
220
|
autoComplete: _pt.string,
|
|
@@ -230,9 +240,6 @@ MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
230
240
|
'aria-errormessage': _pt.string
|
|
231
241
|
} : {};
|
|
232
242
|
MultilineInput.displayName = 'MultilineInput';
|
|
233
|
-
MultilineInput.defaultProps = {
|
|
234
|
-
cacheMeasurements: true
|
|
235
|
-
};
|
|
236
243
|
var MultilineInput$1 = MultilineInput;
|
|
237
244
|
|
|
238
245
|
var messages = defineMessages({
|
|
@@ -261,6 +268,6 @@ const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
|
|
|
261
268
|
var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
|
|
262
269
|
|
|
263
270
|
// NOTE: This string will be replaced on build time with the package version.
|
|
264
|
-
var version = "19.
|
|
271
|
+
var version = "19.22.0";
|
|
265
272
|
|
|
266
273
|
export { LocalizedInputToggle$1 as LocalizedInputToggle, MultilineInput$1 as MultilineInput, accessibleHiddenInputStyles$1 as accessibleHiddenInputStyles, getInputStyles, messages$1 as messagesLocalizedInput, messages as messagesMultilineInput, version };
|
|
@@ -5,13 +5,12 @@ export type TLocalizedInputToggleProps = {
|
|
|
5
5
|
isOpen?: boolean;
|
|
6
6
|
onClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement> | boolean) => void;
|
|
7
7
|
isDisabled?: boolean;
|
|
8
|
-
showMessage
|
|
9
|
-
hideMessage
|
|
8
|
+
showMessage?: string | MessageDescriptor;
|
|
9
|
+
hideMessage?: string | MessageDescriptor;
|
|
10
10
|
remainingLocalizations?: number;
|
|
11
11
|
};
|
|
12
12
|
declare const LocalizedInputToggle: {
|
|
13
|
-
(props: TLocalizedInputToggleProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
14
|
-
defaultProps: Pick<TLocalizedInputToggleProps, "showMessage" | "hideMessage">;
|
|
13
|
+
({ hideMessage, showMessage, ...props }: TLocalizedInputToggleProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
15
14
|
displayName: string;
|
|
16
15
|
};
|
|
17
16
|
export default LocalizedInputToggle;
|
|
@@ -29,10 +29,7 @@ export type TMultiLineInputProps = {
|
|
|
29
29
|
'aria-errormessage'?: string;
|
|
30
30
|
};
|
|
31
31
|
declare const MultilineInput: {
|
|
32
|
-
(props: TMultiLineInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
32
|
+
({ cacheMeasurements, ...props }: TMultiLineInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
33
33
|
displayName: string;
|
|
34
|
-
defaultProps: {
|
|
35
|
-
cacheMeasurements: boolean;
|
|
36
|
-
};
|
|
37
34
|
};
|
|
38
35
|
export default MultilineInput;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/input-utils",
|
|
3
3
|
"description": "Utilities for working with input components.",
|
|
4
|
-
"version": "19.
|
|
4
|
+
"version": "19.22.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/design-system": "19.
|
|
25
|
-
"@commercetools-uikit/flat-button": "19.
|
|
26
|
-
"@commercetools-uikit/icons": "19.
|
|
27
|
-
"@commercetools-uikit/utils": "19.
|
|
24
|
+
"@commercetools-uikit/design-system": "19.22.0",
|
|
25
|
+
"@commercetools-uikit/flat-button": "19.22.0",
|
|
26
|
+
"@commercetools-uikit/icons": "19.22.0",
|
|
27
|
+
"@commercetools-uikit/utils": "19.22.0",
|
|
28
28
|
"@emotion/react": "^11.10.5",
|
|
29
29
|
"prop-types": "15.8.1",
|
|
30
30
|
"react-textarea-autosize": "8.4.0"
|