@commercetools-uikit/input-utils 16.1.0 → 16.2.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.
Files changed (4) hide show
  1. package/dist/commercetools-uikit-input-utils.cjs.dev.js +28 -12
  2. package/dist/commercetools-uikit-input-utils.cjs.prod.js +25 -9
  3. package/dist/commercetools-uikit-input-utils.esm.js +27 -12
  4. package/package.json +5 -5
package/dist/commercetools-uikit-input-utils.cjs.dev.js CHANGED
@@ -10,6 +10,8 @@ var reactIntl = require('react-intl');
10
10
  var FlatButton = require('@commercetools-uikit/flat-button');
11
11
  var icons = require('@commercetools-uikit/icons');
12
12
  var jsxRuntime = require('@emotion/react/jsx-runtime');
13
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
13
15
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
14
16
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
15
17
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -18,7 +20,6 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
18
20
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
19
21
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
20
22
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
21
- var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
22
23
  var TextareaAutosize = require('react-textarea-autosize');
23
24
  var utils = require('@commercetools-uikit/utils');
24
25
 
@@ -26,6 +27,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
26
27
 
27
28
  var _pt__default = /*#__PURE__*/_interopDefault(_pt);
28
29
  var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
30
+ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
29
31
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
30
32
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
31
33
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -167,21 +169,35 @@ const sizeInputLineHeight = '22px';
167
169
  // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
168
170
  // how you can interact with the field is controlled separately by the props, this only influences visuals
169
171
  const getTextareaStyles = props => {
170
- const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForMultilineInput, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:vertical;" + (process.env.NODE_ENV === "production" ? "" : ";label:baseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS1pbnB1dC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZU8iLCJmaWxlIjoibXVsdGlsaW5lLWlucHV0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHR5cGUgeyBUTXVsdGlMaW5lSW5wdXRQcm9wcyB9IGZyb20gJy4vbXVsdGlsaW5lLWlucHV0JztcblxuLyogd2UgbmVlZCB0aGlzIGxpbmUtaGVpZ2h0IHRvIGFjaGlldmUgMzJweCBoZWlnaHQgd2hlbiB0aGUgY29tcG9uZW50IGhhcyBvbmx5IG9uZSByb3cgKi9cbmNvbnN0IHNpemVJbnB1dExpbmVIZWlnaHQgPSAnMjJweCc7XG5cbi8vIE5PVEU6IG9yZGVyIGlzIGltcG9ydGFudCBoZXJlXG4vLyAqIGEgZGlzYWJsZWQtZmllbGQgY3VycmVudGx5IGRvZXMgbm90IGRpc3BsYXkgd2FybmluZy9lcnJvci1zdGF0ZXMgc28gaXQgdGFrZXMgcHJlY2VkZW5jZVxuLy8gKiBhIHJlYWRvbmx5LWZpZWxkIGNhbm5vdCBiZSBjaGFuZ2VkLCBidXQgaXQgbWlnaHQgYmUgcmVsZXZhbnQgZm9yIHZhbGlkYXRpb24sIHNvIGVycm9yIGFuZCB3YXJuaW5nIGFyZSBjaGVja2VkIGZpcnN0XG4vLyBob3cgeW91IGNhbiBpbnRlcmFjdCB3aXRoIHRoZSBmaWVsZCBpcyBjb250cm9sbGVkIHNlcGFyYXRlbHkgYnkgdGhlIHByb3BzLCB0aGlzIG9ubHkgaW5mbHVlbmNlcyB2aXN1YWxzXG5jb25zdCBnZXRUZXh0YXJlYVN0eWxlcyA9IChwcm9wczogVE11bHRpTGluZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMucGFkZGluZ0Zvck11bHRpbGluZUlucHV0fTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAke3NpemVJbnB1dExpbmVIZWlnaHR9O1xuICAgICAgZmxleDogYXV0bztcbiAgICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgICByZXNpemU6IHZlcnRpY2FsO1xuICAgIGAsXG4gIF07XG4gIHJldHVybiBiYXNlU3R5bGVzO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldFRleHRhcmVhU3R5bGVzIH07XG4iXX0= */")];
172
+ const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForMultilineInput, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:none;" + (process.env.NODE_ENV === "production" ? "" : ";label:baseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS1pbnB1dC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZU8iLCJmaWxlIjoibXVsdGlsaW5lLWlucHV0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHR5cGUgeyBUTXVsdGlMaW5lSW5wdXRQcm9wcyB9IGZyb20gJy4vbXVsdGlsaW5lLWlucHV0JztcblxuLyogd2UgbmVlZCB0aGlzIGxpbmUtaGVpZ2h0IHRvIGFjaGlldmUgMzJweCBoZWlnaHQgd2hlbiB0aGUgY29tcG9uZW50IGhhcyBvbmx5IG9uZSByb3cgKi9cbmNvbnN0IHNpemVJbnB1dExpbmVIZWlnaHQgPSAnMjJweCc7XG5cbi8vIE5PVEU6IG9yZGVyIGlzIGltcG9ydGFudCBoZXJlXG4vLyAqIGEgZGlzYWJsZWQtZmllbGQgY3VycmVudGx5IGRvZXMgbm90IGRpc3BsYXkgd2FybmluZy9lcnJvci1zdGF0ZXMgc28gaXQgdGFrZXMgcHJlY2VkZW5jZVxuLy8gKiBhIHJlYWRvbmx5LWZpZWxkIGNhbm5vdCBiZSBjaGFuZ2VkLCBidXQgaXQgbWlnaHQgYmUgcmVsZXZhbnQgZm9yIHZhbGlkYXRpb24sIHNvIGVycm9yIGFuZCB3YXJuaW5nIGFyZSBjaGVja2VkIGZpcnN0XG4vLyBob3cgeW91IGNhbiBpbnRlcmFjdCB3aXRoIHRoZSBmaWVsZCBpcyBjb250cm9sbGVkIHNlcGFyYXRlbHkgYnkgdGhlIHByb3BzLCB0aGlzIG9ubHkgaW5mbHVlbmNlcyB2aXN1YWxzXG5jb25zdCBnZXRUZXh0YXJlYVN0eWxlcyA9IChwcm9wczogVE11bHRpTGluZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMucGFkZGluZ0Zvck11bHRpbGluZUlucHV0fTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAke3NpemVJbnB1dExpbmVIZWlnaHR9O1xuICAgICAgZmxleDogYXV0bztcbiAgICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgICByZXNpemU6IG5vbmU7XG4gICAgYCxcbiAgXTtcbiAgcmV0dXJuIGJhc2VTdHlsZXM7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0VGV4dGFyZWFTdHlsZXMgfTtcbiJdfQ== */")];
171
173
  return baseStyles;
172
174
  };
173
175
 
174
176
  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; }
175
177
  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; }
176
178
  const MIN_ROW_COUNT = 1;
179
+ // We cache the vertical padding of the element becuase
180
+ // it does not change over time so we don't need to
181
+ // recalculate it on every height change event.
182
+ let _elementVerticalPadding = null;
183
+ const getElementVerticalPadding = element => {
184
+ if (_elementVerticalPadding === null) {
185
+ const computedStyle = getComputedStyle(element);
186
+ const paddingTop = _parseInt__default["default"](computedStyle.paddingTop, 10);
187
+ const paddingBottom = _parseInt__default["default"](computedStyle.paddingBottom, 10);
188
+ _elementVerticalPadding = paddingTop + paddingBottom;
189
+ }
190
+ return _elementVerticalPadding;
191
+ };
177
192
  const MultilineInput = props => {
178
193
  const onHeightChange = props.onHeightChange;
179
194
  const ref = react$1.useRef(null);
180
- const handleHeightChange = react$1.useCallback((height, meta) => {
181
- var _ref$current;
182
- const rowCount = Math.floor(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0 / meta.rowHeight);
195
+ const handleHeightChange = react$1.useCallback((_, meta) => {
196
+ const containerHeight = ref.current.scrollHeight;
197
+ const textHeight = containerHeight - getElementVerticalPadding(ref.current);
198
+ const rowCount = Math.floor(textHeight / meta.rowHeight);
183
199
  if (onHeightChange) {
184
- onHeightChange(height, rowCount);
200
+ onHeightChange(containerHeight, rowCount);
185
201
  }
186
202
  }, [ref, onHeightChange]);
187
203
  if (!props.isReadOnly) {
@@ -256,18 +272,18 @@ var messages = reactIntl.defineMessages({
256
272
 
257
273
  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)."; }
258
274
  const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
259
- name: "fkeaox",
260
- styles: "pointer-events:none;height:100%;left:0;opacity:0.0001;position:absolute;top:0;width:100%"
275
+ name: "1rkpb8t",
276
+ styles: "left:-9999px;position:fixed;top:0"
261
277
  } : {
262
- name: "vekel6-accessibleHiddenInputStyles",
263
- styles: "pointer-events:none;height:100%;left:0;opacity:0.0001;position:absolute;top:0;width:100%;label:accessibleHiddenInputStyles;",
264
- map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY2Vzc2libGUtaGlkZGVuLWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUMiLCJmaWxlIjoiYWNjZXNzaWJsZS1oaWRkZW4taW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5jb25zdCBhY2Nlc3NpYmxlSGlkZGVuSW5wdXRTdHlsZXMgPSBjc3NgXG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGxlZnQ6IDA7XG4gIG9wYWNpdHk6IDAuMDAwMTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGRlZmF1bHQgYWNjZXNzaWJsZUhpZGRlbklucHV0U3R5bGVzO1xuIl19 */",
278
+ name: "2gjdvo-accessibleHiddenInputStyles",
279
+ styles: "left:-9999px;position:fixed;top:0;label:accessibleHiddenInputStyles;",
280
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY2Vzc2libGUtaGlkZGVuLWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUMiLCJmaWxlIjoiYWNjZXNzaWJsZS1oaWRkZW4taW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5jb25zdCBhY2Nlc3NpYmxlSGlkZGVuSW5wdXRTdHlsZXMgPSBjc3NgXG4gIGxlZnQ6IC05OTk5cHg7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuYDtcblxuZXhwb3J0IGRlZmF1bHQgYWNjZXNzaWJsZUhpZGRlbklucHV0U3R5bGVzO1xuIl19 */",
265
281
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
266
282
  };
267
283
  var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
268
284
 
269
285
  // NOTE: This string will be replaced on build time with the package version.
270
- var version = "16.1.0";
286
+ var version = "16.2.0";
271
287
 
272
288
  exports.LocalizedInputToggle = LocalizedInputToggle$1;
273
289
  exports.MultilineInput = MultilineInput$1;
package/dist/commercetools-uikit-input-utils.cjs.prod.js CHANGED
@@ -10,6 +10,8 @@ var reactIntl = require('react-intl');
10
10
  var FlatButton = require('@commercetools-uikit/flat-button');
11
11
  var icons = require('@commercetools-uikit/icons');
12
12
  var jsxRuntime = require('@emotion/react/jsx-runtime');
13
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
13
15
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
14
16
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
15
17
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -18,13 +20,13 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
18
20
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
19
21
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
20
22
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
21
- var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
22
23
  var TextareaAutosize = require('react-textarea-autosize');
23
24
  var utils = require('@commercetools-uikit/utils');
24
25
 
25
26
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
26
27
 
27
28
  var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
29
+ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
28
30
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
29
31
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
30
32
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -152,21 +154,35 @@ const sizeInputLineHeight = '22px';
152
154
  // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
153
155
  // how you can interact with the field is controlled separately by the props, this only influences visuals
154
156
  const getTextareaStyles = props => {
155
- const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForMultilineInput, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:vertical;" + ("" ), "" )];
157
+ const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForMultilineInput, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:none;" + ("" ), "" )];
156
158
  return baseStyles;
157
159
  };
158
160
 
159
161
  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; }
160
162
  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; }
161
163
  const MIN_ROW_COUNT = 1;
164
+ // We cache the vertical padding of the element becuase
165
+ // it does not change over time so we don't need to
166
+ // recalculate it on every height change event.
167
+ let _elementVerticalPadding = null;
168
+ const getElementVerticalPadding = element => {
169
+ if (_elementVerticalPadding === null) {
170
+ const computedStyle = getComputedStyle(element);
171
+ const paddingTop = _parseInt__default["default"](computedStyle.paddingTop, 10);
172
+ const paddingBottom = _parseInt__default["default"](computedStyle.paddingBottom, 10);
173
+ _elementVerticalPadding = paddingTop + paddingBottom;
174
+ }
175
+ return _elementVerticalPadding;
176
+ };
162
177
  const MultilineInput = props => {
163
178
  const onHeightChange = props.onHeightChange;
164
179
  const ref = react$1.useRef(null);
165
- const handleHeightChange = react$1.useCallback((height, meta) => {
166
- var _ref$current;
167
- const rowCount = Math.floor(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0 / meta.rowHeight);
180
+ const handleHeightChange = react$1.useCallback((_, meta) => {
181
+ const containerHeight = ref.current.scrollHeight;
182
+ const textHeight = containerHeight - getElementVerticalPadding(ref.current);
183
+ const rowCount = Math.floor(textHeight / meta.rowHeight);
168
184
  if (onHeightChange) {
169
- onHeightChange(height, rowCount);
185
+ onHeightChange(containerHeight, rowCount);
170
186
  }
171
187
  }, [ref, onHeightChange]);
172
188
  if (!props.isReadOnly) ;
@@ -219,13 +235,13 @@ var messages = reactIntl.defineMessages({
219
235
  });
220
236
 
221
237
  const accessibleHiddenInputStyles = {
222
- name: "fkeaox",
223
- styles: "pointer-events:none;height:100%;left:0;opacity:0.0001;position:absolute;top:0;width:100%"
238
+ name: "1rkpb8t",
239
+ styles: "left:-9999px;position:fixed;top:0"
224
240
  } ;
225
241
  var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
226
242
 
227
243
  // NOTE: This string will be replaced on build time with the package version.
228
- var version = "16.1.0";
244
+ var version = "16.2.0";
229
245
 
230
246
  exports.LocalizedInputToggle = LocalizedInputToggle$1;
231
247
  exports.MultilineInput = MultilineInput$1;
package/dist/commercetools-uikit-input-utils.esm.js CHANGED
@@ -6,6 +6,8 @@ import { defineMessages, useIntl } from 'react-intl';
6
6
  import FlatButton from '@commercetools-uikit/flat-button';
7
7
  import { WorldIcon } from '@commercetools-uikit/icons';
8
8
  import { jsx } from '@emotion/react/jsx-runtime';
9
+ import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
10
+ import _parseInt from '@babel/runtime-corejs3/core-js-stable/parse-int';
9
11
  import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
10
12
  import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
11
13
  import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
@@ -14,7 +16,6 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
14
16
  import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
15
17
  import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
16
18
  import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
17
- import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
18
19
  import TextareaAutosize from 'react-textarea-autosize';
19
20
  import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
20
21
 
@@ -149,21 +150,35 @@ const sizeInputLineHeight = '22px';
149
150
  // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
150
151
  // how you can interact with the field is controlled separately by the props, this only influences visuals
151
152
  const getTextareaStyles = props => {
152
- const baseStyles = [getInputStyles(props), /*#__PURE__*/css("padding:", designTokens.paddingForMultilineInput, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:vertical;" + (process.env.NODE_ENV === "production" ? "" : ";label:baseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS1pbnB1dC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZU8iLCJmaWxlIjoibXVsdGlsaW5lLWlucHV0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHR5cGUgeyBUTXVsdGlMaW5lSW5wdXRQcm9wcyB9IGZyb20gJy4vbXVsdGlsaW5lLWlucHV0JztcblxuLyogd2UgbmVlZCB0aGlzIGxpbmUtaGVpZ2h0IHRvIGFjaGlldmUgMzJweCBoZWlnaHQgd2hlbiB0aGUgY29tcG9uZW50IGhhcyBvbmx5IG9uZSByb3cgKi9cbmNvbnN0IHNpemVJbnB1dExpbmVIZWlnaHQgPSAnMjJweCc7XG5cbi8vIE5PVEU6IG9yZGVyIGlzIGltcG9ydGFudCBoZXJlXG4vLyAqIGEgZGlzYWJsZWQtZmllbGQgY3VycmVudGx5IGRvZXMgbm90IGRpc3BsYXkgd2FybmluZy9lcnJvci1zdGF0ZXMgc28gaXQgdGFrZXMgcHJlY2VkZW5jZVxuLy8gKiBhIHJlYWRvbmx5LWZpZWxkIGNhbm5vdCBiZSBjaGFuZ2VkLCBidXQgaXQgbWlnaHQgYmUgcmVsZXZhbnQgZm9yIHZhbGlkYXRpb24sIHNvIGVycm9yIGFuZCB3YXJuaW5nIGFyZSBjaGVja2VkIGZpcnN0XG4vLyBob3cgeW91IGNhbiBpbnRlcmFjdCB3aXRoIHRoZSBmaWVsZCBpcyBjb250cm9sbGVkIHNlcGFyYXRlbHkgYnkgdGhlIHByb3BzLCB0aGlzIG9ubHkgaW5mbHVlbmNlcyB2aXN1YWxzXG5jb25zdCBnZXRUZXh0YXJlYVN0eWxlcyA9IChwcm9wczogVE11bHRpTGluZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMucGFkZGluZ0Zvck11bHRpbGluZUlucHV0fTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAke3NpemVJbnB1dExpbmVIZWlnaHR9O1xuICAgICAgZmxleDogYXV0bztcbiAgICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgICByZXNpemU6IHZlcnRpY2FsO1xuICAgIGAsXG4gIF07XG4gIHJldHVybiBiYXNlU3R5bGVzO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldFRleHRhcmVhU3R5bGVzIH07XG4iXX0= */")];
153
+ const baseStyles = [getInputStyles(props), /*#__PURE__*/css("padding:", designTokens.paddingForMultilineInput, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:none;" + (process.env.NODE_ENV === "production" ? "" : ";label:baseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS1pbnB1dC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZU8iLCJmaWxlIjoibXVsdGlsaW5lLWlucHV0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHR5cGUgeyBUTXVsdGlMaW5lSW5wdXRQcm9wcyB9IGZyb20gJy4vbXVsdGlsaW5lLWlucHV0JztcblxuLyogd2UgbmVlZCB0aGlzIGxpbmUtaGVpZ2h0IHRvIGFjaGlldmUgMzJweCBoZWlnaHQgd2hlbiB0aGUgY29tcG9uZW50IGhhcyBvbmx5IG9uZSByb3cgKi9cbmNvbnN0IHNpemVJbnB1dExpbmVIZWlnaHQgPSAnMjJweCc7XG5cbi8vIE5PVEU6IG9yZGVyIGlzIGltcG9ydGFudCBoZXJlXG4vLyAqIGEgZGlzYWJsZWQtZmllbGQgY3VycmVudGx5IGRvZXMgbm90IGRpc3BsYXkgd2FybmluZy9lcnJvci1zdGF0ZXMgc28gaXQgdGFrZXMgcHJlY2VkZW5jZVxuLy8gKiBhIHJlYWRvbmx5LWZpZWxkIGNhbm5vdCBiZSBjaGFuZ2VkLCBidXQgaXQgbWlnaHQgYmUgcmVsZXZhbnQgZm9yIHZhbGlkYXRpb24sIHNvIGVycm9yIGFuZCB3YXJuaW5nIGFyZSBjaGVja2VkIGZpcnN0XG4vLyBob3cgeW91IGNhbiBpbnRlcmFjdCB3aXRoIHRoZSBmaWVsZCBpcyBjb250cm9sbGVkIHNlcGFyYXRlbHkgYnkgdGhlIHByb3BzLCB0aGlzIG9ubHkgaW5mbHVlbmNlcyB2aXN1YWxzXG5jb25zdCBnZXRUZXh0YXJlYVN0eWxlcyA9IChwcm9wczogVE11bHRpTGluZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMucGFkZGluZ0Zvck11bHRpbGluZUlucHV0fTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAke3NpemVJbnB1dExpbmVIZWlnaHR9O1xuICAgICAgZmxleDogYXV0bztcbiAgICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgICByZXNpemU6IG5vbmU7XG4gICAgYCxcbiAgXTtcbiAgcmV0dXJuIGJhc2VTdHlsZXM7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0VGV4dGFyZWFTdHlsZXMgfTtcbiJdfQ== */")];
153
154
  return baseStyles;
154
155
  };
155
156
 
156
157
  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; }
157
158
  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; }
158
159
  const MIN_ROW_COUNT = 1;
160
+ // We cache the vertical padding of the element becuase
161
+ // it does not change over time so we don't need to
162
+ // recalculate it on every height change event.
163
+ let _elementVerticalPadding = null;
164
+ const getElementVerticalPadding = element => {
165
+ if (_elementVerticalPadding === null) {
166
+ const computedStyle = getComputedStyle(element);
167
+ const paddingTop = _parseInt(computedStyle.paddingTop, 10);
168
+ const paddingBottom = _parseInt(computedStyle.paddingBottom, 10);
169
+ _elementVerticalPadding = paddingTop + paddingBottom;
170
+ }
171
+ return _elementVerticalPadding;
172
+ };
159
173
  const MultilineInput = props => {
160
174
  const onHeightChange = props.onHeightChange;
161
175
  const ref = useRef(null);
162
- const handleHeightChange = useCallback((height, meta) => {
163
- var _ref$current;
164
- const rowCount = Math.floor(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0 / meta.rowHeight);
176
+ const handleHeightChange = useCallback((_, meta) => {
177
+ const containerHeight = ref.current.scrollHeight;
178
+ const textHeight = containerHeight - getElementVerticalPadding(ref.current);
179
+ const rowCount = Math.floor(textHeight / meta.rowHeight);
165
180
  if (onHeightChange) {
166
- onHeightChange(height, rowCount);
181
+ onHeightChange(containerHeight, rowCount);
167
182
  }
168
183
  }, [ref, onHeightChange]);
169
184
  if (!props.isReadOnly) {
@@ -238,17 +253,17 @@ var messages = defineMessages({
238
253
 
239
254
  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)."; }
240
255
  const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
241
- name: "fkeaox",
242
- styles: "pointer-events:none;height:100%;left:0;opacity:0.0001;position:absolute;top:0;width:100%"
256
+ name: "1rkpb8t",
257
+ styles: "left:-9999px;position:fixed;top:0"
243
258
  } : {
244
- name: "vekel6-accessibleHiddenInputStyles",
245
- styles: "pointer-events:none;height:100%;left:0;opacity:0.0001;position:absolute;top:0;width:100%;label:accessibleHiddenInputStyles;",
246
- map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY2Vzc2libGUtaGlkZGVuLWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUMiLCJmaWxlIjoiYWNjZXNzaWJsZS1oaWRkZW4taW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5jb25zdCBhY2Nlc3NpYmxlSGlkZGVuSW5wdXRTdHlsZXMgPSBjc3NgXG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGxlZnQ6IDA7XG4gIG9wYWNpdHk6IDAuMDAwMTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGRlZmF1bHQgYWNjZXNzaWJsZUhpZGRlbklucHV0U3R5bGVzO1xuIl19 */",
259
+ name: "2gjdvo-accessibleHiddenInputStyles",
260
+ styles: "left:-9999px;position:fixed;top:0;label:accessibleHiddenInputStyles;",
261
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY2Vzc2libGUtaGlkZGVuLWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUMiLCJmaWxlIjoiYWNjZXNzaWJsZS1oaWRkZW4taW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5jb25zdCBhY2Nlc3NpYmxlSGlkZGVuSW5wdXRTdHlsZXMgPSBjc3NgXG4gIGxlZnQ6IC05OTk5cHg7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuYDtcblxuZXhwb3J0IGRlZmF1bHQgYWNjZXNzaWJsZUhpZGRlbklucHV0U3R5bGVzO1xuIl19 */",
247
262
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
248
263
  };
249
264
  var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
250
265
 
251
266
  // NOTE: This string will be replaced on build time with the package version.
252
- var version = "16.1.0";
267
+ var version = "16.2.0";
253
268
 
254
269
  export { LocalizedInputToggle$1 as LocalizedInputToggle, MultilineInput$1 as MultilineInput, accessibleHiddenInputStyles$1 as accessibleHiddenInputStyles, getInputStyles, messages$1 as messagesLocalizedInput, messages as messagesMultilineInput, version };
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": "16.1.0",
4
+ "version": "16.2.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": "16.1.0",
25
- "@commercetools-uikit/flat-button": "16.1.0",
26
- "@commercetools-uikit/icons": "16.1.0",
27
- "@commercetools-uikit/utils": "16.1.0",
24
+ "@commercetools-uikit/design-system": "16.2.0",
25
+ "@commercetools-uikit/flat-button": "16.2.0",
26
+ "@commercetools-uikit/icons": "16.2.0",
27
+ "@commercetools-uikit/utils": "16.2.0",
28
28
  "@emotion/react": "^11.10.5",
29
29
  "prop-types": "15.8.1",
30
30
  "react-textarea-autosize": "8.4.0"