npm - @commercetools-uikit/input-utils - Versions diffs - 16.0.0 → 16.1.1 - Mend

@commercetools-uikit/input-utils 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.

Files changed (4) hide show

package/dist/commercetools-uikit-input-utils.cjs.dev.js +31 -44
package/dist/commercetools-uikit-input-utils.cjs.prod.js +31 -44
package/dist/commercetools-uikit-input-utils.esm.js +30 -44
package/package.json +5 -5

package/dist/commercetools-uikit-input-utils.cjs.dev.js CHANGED Viewed

@@ -10,6 +10,8 @@ var reactIntl = require('react-intl');
 var FlatButton = require('@commercetools-uikit/flat-button');
 var icons = require('@commercetools-uikit/icons');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 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
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var TextareaAutosize = require('react-textarea-autosize');
 var utils = require('@commercetools-uikit/utils');
@@ -26,6 +27,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
+var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -59,7 +61,6 @@ const defaultProps = {
   hideMessage: messages$1.hide,
   showMessage: messages$1.show
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "xyzkeb",
   styles: "align-self:flex-start"
@@ -69,7 +70,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvY2FsaXplZC1pbnB1dC10b2dnbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDYyIsImZpbGUiOiJsb2NhbGl6ZWQtaW5wdXQtdG9nZ2xlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB0eXBlIHsgTWVzc2FnZURlc2NyaXB0b3IgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IE1vdXNlRXZlbnQsIEtleWJvYXJkRXZlbnQsIFJlYWN0RWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCBGbGF0QnV0dG9uIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ZsYXQtYnV0dG9uJztcbmltcG9ydCB7IFdvcmxkSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuLi9tZXNzYWdlcy9sb2NhbGl6ZWQtaW5wdXQnO1xuXG5leHBvcnQgdHlwZSBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcyA9IHtcbiAgaWNvbj86IFJlYWN0RWxlbWVudDtcbiAgaXNPcGVuPzogYm9vbGVhbjtcbiAgb25DbGljazogKFxuICAgIGV2ZW50OlxuICAgICAgfCBNb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBLZXlib2FyZEV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBib29sZWFuXG4gICkgPT4gdm9pZDtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIHNob3dNZXNzYWdlOiBzdHJpbmcgfCBNZXNzYWdlRGVzY3JpcHRvcjtcbiAgaGlkZU1lc3NhZ2U6IHN0cmluZyB8IE1lc3NhZ2VEZXNjcmlwdG9yO1xuICByZW1haW5pbmdMb2NhbGl6YXRpb25zPzogbnVtYmVyO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcyxcbiAgJ3Nob3dNZXNzYWdlJyB8ICdoaWRlTWVzc2FnZSdcbj4gPSB7XG4gIGhpZGVNZXNzYWdlOiBtZXNzYWdlcy5oaWRlLFxuICBzaG93TWVzc2FnZTogbWVzc2FnZXMuc2hvdyxcbn07XG5cbmNvbnN0IExvY2FsaXplZElucHV0VG9nZ2xlID0gKHByb3BzOiBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCBsYWJlbE1lc3NhZ2UgPSBwcm9wcy5pc09wZW4gPyBwcm9wcy5oaWRlTWVzc2FnZSA6IHByb3BzLnNob3dNZXNzYWdlO1xuICBjb25zdCBsYWJlbCA9XG4gICAgdHlwZW9mIGxhYmVsTWVzc2FnZSA9PT0gJ3N0cmluZydcbiAgICAgID8gbGFiZWxNZXNzYWdlXG4gICAgICA6IGludGwuZm9ybWF0TWVzc2FnZShsYWJlbE1lc3NhZ2UsIHtcbiAgICAgICAgICByZW1haW5pbmdMYW5ndWFnZXM6IHByb3BzLnJlbWFpbmluZ0xvY2FsaXphdGlvbnMsXG4gICAgICAgIH0pO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBhbGlnbi1zZWxmOiBmbGV4LXN0YXJ0O1xuICAgICAgYH1cbiAgICA+XG4gICAgICA8RmxhdEJ1dHRvblxuICAgICAgICBpY29uPXtwcm9wcy5pY29uID8gcHJvcHMuaWNvbiA6IDxXb3JsZEljb24gLz59XG4gICAgICAgIGxhYmVsPXtsYWJlbH1cbiAgICAgICAgb25DbGljaz17cHJvcHMub25DbGlja31cbiAgICAgICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICAgIC8+XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5Mb2NhbGl6ZWRJbnB1dFRvZ2dsZS5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5Mb2NhbGl6ZWRJbnB1dFRvZ2dsZS5kaXNwbGF5TmFtZSA9ICdMb2NhbGl6ZWRJbnB1dFRvZ2dsZSc7XG5leHBvcnQgZGVmYXVsdCBMb2NhbGl6ZWRJbnB1dFRvZ2dsZTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
 };
 const LocalizedInputToggle = props => {
   const intl = reactIntl.useIntl();
   const labelMessage = props.isOpen ? props.hideMessage : props.showMessage;
@@ -86,7 +86,6 @@ const LocalizedInputToggle = props => {
     })
   });
 };
 LocalizedInputToggle.propTypes = process.env.NODE_ENV !== "production" ? {
   icon: _pt__default["default"].element,
   isOpen: _pt__default["default"].bool,
@@ -102,119 +101,108 @@ var LocalizedInputToggle$1 = LocalizedInputToggle;
 const getInputBorderColor = function (props) {
   let defaultBorderColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.borderColorForInput;
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
   if (props.hasError) {
     return designSystem.designTokens.borderColorForInputWhenError;
   }
   if (props.hasWarning) {
     return designSystem.designTokens.borderColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
     return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
   return defaultBorderColor;
 };
 const getInputFontColor = props => {
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
   if (props.hasError) {
     return designSystem.designTokens.fontColorForInputWhenError;
   }
   if (props.hasWarning) {
     return designSystem.designTokens.fontColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
     return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
   return designSystem.designTokens.fontColorForInput;
 };
 const getInputBorderWidth = props => {
   if (props.hasError) {
     return designSystem.designTokens.borderWidthForInputWhenError;
   }
   if (props.hasWarning) {
     return designSystem.designTokens.borderWidthForInputWhenWarning;
   }
   return designSystem.designTokens.borderWidthForInput;
 };
 const getInputBoxShadow = props => {
   if (props.hasError) {
     return designSystem.designTokens.shadowForInputWhenError;
   }
   if (props.hasWarning) {
     return designSystem.designTokens.shadowForInputWhenWarning;
   }
   return designSystem.designTokens.shadowForInput;
 };
 const getInputBackgroundColor = props => {
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.backgroundColorForInputWhenDisabled;
   }
   if (props.isReadOnly) {
     return designSystem.designTokens.backgroundColorForInputWhenReadonly;
   }
   return designSystem.designTokens.backgroundColorForInput;
 };
 const getInputStyles = props => {
   return /*#__PURE__*/react.css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", getInputBorderWidth(props), " solid ", getInputBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-sizing:border-box;box-shadow:", getInputBoxShadow(props), ";color:", getInputFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", designSystem.designTokens.fontSizeForInput, ";height:", designSystem.designTokens.heightForInput, ";min-height:", designSystem.designTokens.heightForInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designSystem.designTokens.paddingForInput, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ",color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";width:100%;&::placeholder{color:", designSystem.designTokens.placeholderFontColorForInput, ";}:active:not(:disabled):not(:read-only),:hover:not(:disabled):not(:read-only):not(:focus){border-color:", getInputBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", designSystem.designTokens.backgroundColorForInputWhenHovered, ";}:focus:not(:read-only){box-shadow:", designSystem.designTokens.shadowForInputWhenFocused, ";border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";background-color:", designSystem.designTokens.backgroundColorForInputWhenFocused, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RVkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xuICByZWFkT25seT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBnZXRJbnB1dEJvcmRlckNvbG9yID0gKFxuICBwcm9wczogVElucHV0UHJvcHMsXG4gIGRlZmF1bHRCb3JkZXJDb2xvcjogc3RyaW5nID0gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRcbikgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSB8fCBwcm9wcy5yZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdEJvcmRlckNvbG9yO1xufTtcblxuY29uc3QgZ2V0SW5wdXRGb250Q29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5IHx8IHByb3BzLnJlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCb3JkZXJXaWR0aCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCb3hTaGFkb3cgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dDtcbn07XG5cbmNvbnN0IGdldElucHV0QmFja2dyb3VuZENvbG9yID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dFN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0SW5wdXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXI6ICR7Z2V0SW5wdXRCb3JkZXJXaWR0aChwcm9wcyl9IHNvbGlkICR7Z2V0SW5wdXRCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGJveC1zaGFkb3c6ICR7Z2V0SW5wdXRCb3hTaGFkb3cocHJvcHMpfTtcbiAgICBjb2xvcjogJHtnZXRJbnB1dEZvbnRDb2xvcihwcm9wcyl9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5pc0Rpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdkZWZhdWx0J307XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4OiAxO1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVGb3JJbnB1dH07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgbWluLWhlaWdodDogJHtkZXNpZ25Ub2tlbnMuaGVpZ2h0Rm9ySW5wdXR9O1xuICAgIG9wYWNpdHk6ICR7cHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZFxuICAgICAgPyAnMSdcbiAgICAgIDogJ3Vuc2V0J307IC8qIGZpeCBmb3IgbW9iaWxlIHNhZmFyaSAqL1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBwYWRkaW5nOiAwICR7ZGVzaWduVG9rZW5zLnBhZGRpbmdGb3JJbnB1dH07XG4gICAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBjb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgICAgYm94LXNoYWRvdyAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICAgIHdpZHRoOiAxMDAlO1xuXG4gICAgJjo6cGxhY2Vob2xkZXIge1xuICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLnBsYWNlaG9sZGVyRm9udENvbG9yRm9ySW5wdXR9O1xuICAgIH1cbiAgICA6YWN0aXZlOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KSxcbiAgICA6aG92ZXI6bm90KDpkaXNhYmxlZCk6bm90KDpyZWFkLW9ubHkpOm5vdCg6Zm9jdXMpIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dEJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5Ib3ZlcmVkfTtcbiAgICB9XG4gICAgOmZvY3VzOm5vdCg6cmVhZC1vbmx5KSB7XG4gICAgICBib3gtc2hhZG93OiAke2Rlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYDtcbn07XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBpbXBvcnQvcHJlZmVyLWRlZmF1bHQtZXhwb3J0XG5leHBvcnQgeyBnZXRJbnB1dFN0eWxlcyB9O1xuIl19 */");
-}; // eslint-disable-next-line import/prefer-default-export
+};
 /* we need this line-height to achieve 32px height when the component has only one row */
-const sizeInputLineHeight = '22px'; // NOTE: order is important here
+const sizeInputLineHeight = '22px';
+// NOTE: order is important here
 // * a disabled-field currently does not display warning/error-states so it takes precedence
 // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
 // how you can interact with the field is controlled separately by the props, this only influences visuals
 const getTextareaStyles = props => {
-  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= */")];
+  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== */")];
   return baseStyles;
-}; // eslint-disable-next-line import/prefer-default-export
+};
 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; }
 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; }
 const MIN_ROW_COUNT = 1;
+// We cache the vertical padding of the element becuase
+// it does not change over time so we don't need to
+// recalculate it on every height change event.
+let _elementVerticalPadding = null;
+const getElementVerticalPadding = element => {
+  if (_elementVerticalPadding === null) {
+    const computedStyle = getComputedStyle(element);
+    const paddingTop = _parseInt__default["default"](computedStyle.paddingTop, 10);
+    const paddingBottom = _parseInt__default["default"](computedStyle.paddingBottom, 10);
+    _elementVerticalPadding = paddingTop + paddingBottom;
+  }
+  return _elementVerticalPadding;
+};
 const MultilineInput = props => {
   const onHeightChange = props.onHeightChange;
   const ref = react$1.useRef(null);
-  const handleHeightChange = react$1.useCallback((height, meta) => {
-    var _ref$current;
-    const rowCount = Math.floor(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0 / meta.rowHeight);
+  const handleHeightChange = react$1.useCallback((_, meta) => {
+    const containerHeight = ref.current.scrollHeight;
+    const textHeight = containerHeight - getElementVerticalPadding(ref.current);
+    const rowCount = Math.floor(textHeight / meta.rowHeight);
     if (onHeightChange) {
-      onHeightChange(height, rowCount);
+      onHeightChange(containerHeight, rowCount);
     }
   }, [ref, onHeightChange]);
   if (!props.isReadOnly) {
     process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'MultilineInput: "onChange" is required when is not read only.') : void 0;
   }
   return jsxRuntime.jsx(TextareaAutosize__default["default"], _objectSpread({
     ref: ref,
     name: props.name,
@@ -229,13 +217,13 @@ const MultilineInput = props => {
     placeholder: props.placeholder,
     readOnly: props.isReadOnly,
     autoFocus: props.isAutofocussed,
-    css: getTextareaStyles(props) // Allow to override the styles by passing a `className` prop.
+    css: getTextareaStyles(props)
+    // Allow to override the styles by passing a `className` prop.
     // Custom styles can also be passed using the `css` prop from emotion.
     // https://emotion.sh/docs/css-prop#style-precedence
     ,
     className: props.className
-    /* ARIA */
-    ,
+    /* ARIA */,
     "aria-readonly": props.isReadOnly,
     "aria-multiline": "true",
     "aria-invalid": props['aria-invalid'],
@@ -246,7 +234,6 @@ const MultilineInput = props => {
     cacheMeasurements: true
   }, utils.filterDataAttributes(props)));
 };
 MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
   autoComplete: _pt__default["default"].string,
   className: _pt__default["default"].string,
@@ -296,7 +283,7 @@ const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
 var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 exports.LocalizedInputToggle = LocalizedInputToggle$1;
 exports.MultilineInput = MultilineInput$1;

package/dist/commercetools-uikit-input-utils.cjs.prod.js CHANGED Viewed

@@ -10,6 +10,8 @@ var reactIntl = require('react-intl');
 var FlatButton = require('@commercetools-uikit/flat-button');
 var icons = require('@commercetools-uikit/icons');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 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
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var TextareaAutosize = require('react-textarea-autosize');
 var utils = require('@commercetools-uikit/utils');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
+var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -57,12 +59,10 @@ const defaultProps = {
   hideMessage: messages$1.hide,
   showMessage: messages$1.show
 };
 var _ref = {
   name: "xyzkeb",
   styles: "align-self:flex-start"
 } ;
 const LocalizedInputToggle = props => {
   const intl = reactIntl.useIntl();
   const labelMessage = props.isOpen ? props.hideMessage : props.showMessage;
@@ -79,7 +79,6 @@ const LocalizedInputToggle = props => {
     })
   });
 };
 LocalizedInputToggle.propTypes = {};
 LocalizedInputToggle.defaultProps = defaultProps;
 LocalizedInputToggle.displayName = 'LocalizedInputToggle';
@@ -87,117 +86,106 @@ var LocalizedInputToggle$1 = LocalizedInputToggle;
 const getInputBorderColor = function (props) {
   let defaultBorderColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.borderColorForInput;
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
   if (props.hasError) {
     return designSystem.designTokens.borderColorForInputWhenError;
   }
   if (props.hasWarning) {
     return designSystem.designTokens.borderColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
     return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
   return defaultBorderColor;
 };
 const getInputFontColor = props => {
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
   if (props.hasError) {
     return designSystem.designTokens.fontColorForInputWhenError;
   }
   if (props.hasWarning) {
     return designSystem.designTokens.fontColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
     return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
   return designSystem.designTokens.fontColorForInput;
 };
 const getInputBorderWidth = props => {
   if (props.hasError) {
     return designSystem.designTokens.borderWidthForInputWhenError;
   }
   if (props.hasWarning) {
     return designSystem.designTokens.borderWidthForInputWhenWarning;
   }
   return designSystem.designTokens.borderWidthForInput;
 };
 const getInputBoxShadow = props => {
   if (props.hasError) {
     return designSystem.designTokens.shadowForInputWhenError;
   }
   if (props.hasWarning) {
     return designSystem.designTokens.shadowForInputWhenWarning;
   }
   return designSystem.designTokens.shadowForInput;
 };
 const getInputBackgroundColor = props => {
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.backgroundColorForInputWhenDisabled;
   }
   if (props.isReadOnly) {
     return designSystem.designTokens.backgroundColorForInputWhenReadonly;
   }
   return designSystem.designTokens.backgroundColorForInput;
 };
 const getInputStyles = props => {
   return /*#__PURE__*/react.css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", getInputBorderWidth(props), " solid ", getInputBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-sizing:border-box;box-shadow:", getInputBoxShadow(props), ";color:", getInputFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", designSystem.designTokens.fontSizeForInput, ";height:", designSystem.designTokens.heightForInput, ";min-height:", designSystem.designTokens.heightForInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designSystem.designTokens.paddingForInput, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ",color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";width:100%;&::placeholder{color:", designSystem.designTokens.placeholderFontColorForInput, ";}:active:not(:disabled):not(:read-only),:hover:not(:disabled):not(:read-only):not(:focus){border-color:", getInputBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", designSystem.designTokens.backgroundColorForInputWhenHovered, ";}:focus:not(:read-only){box-shadow:", designSystem.designTokens.shadowForInputWhenFocused, ";border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";background-color:", designSystem.designTokens.backgroundColorForInputWhenFocused, ";}" + ("" ), "" );
-}; // eslint-disable-next-line import/prefer-default-export
+};
 /* we need this line-height to achieve 32px height when the component has only one row */
-const sizeInputLineHeight = '22px'; // NOTE: order is important here
+const sizeInputLineHeight = '22px';
+// NOTE: order is important here
 // * a disabled-field currently does not display warning/error-states so it takes precedence
 // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
 // how you can interact with the field is controlled separately by the props, this only influences visuals
 const getTextareaStyles = props => {
-  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;" + ("" ), "" )];
+  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;" + ("" ), "" )];
   return baseStyles;
-}; // eslint-disable-next-line import/prefer-default-export
+};
 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; }
 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; }
 const MIN_ROW_COUNT = 1;
+// We cache the vertical padding of the element becuase
+// it does not change over time so we don't need to
+// recalculate it on every height change event.
+let _elementVerticalPadding = null;
+const getElementVerticalPadding = element => {
+  if (_elementVerticalPadding === null) {
+    const computedStyle = getComputedStyle(element);
+    const paddingTop = _parseInt__default["default"](computedStyle.paddingTop, 10);
+    const paddingBottom = _parseInt__default["default"](computedStyle.paddingBottom, 10);
+    _elementVerticalPadding = paddingTop + paddingBottom;
+  }
+  return _elementVerticalPadding;
+};
 const MultilineInput = props => {
   const onHeightChange = props.onHeightChange;
   const ref = react$1.useRef(null);
-  const handleHeightChange = react$1.useCallback((height, meta) => {
-    var _ref$current;
-    const rowCount = Math.floor(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0 / meta.rowHeight);
+  const handleHeightChange = react$1.useCallback((_, meta) => {
+    const containerHeight = ref.current.scrollHeight;
+    const textHeight = containerHeight - getElementVerticalPadding(ref.current);
+    const rowCount = Math.floor(textHeight / meta.rowHeight);
     if (onHeightChange) {
-      onHeightChange(height, rowCount);
+      onHeightChange(containerHeight, rowCount);
     }
   }, [ref, onHeightChange]);
   if (!props.isReadOnly) ;
   return jsxRuntime.jsx(TextareaAutosize__default["default"], _objectSpread({
     ref: ref,
     name: props.name,
@@ -212,13 +200,13 @@ const MultilineInput = props => {
     placeholder: props.placeholder,
     readOnly: props.isReadOnly,
     autoFocus: props.isAutofocussed,
-    css: getTextareaStyles(props) // Allow to override the styles by passing a `className` prop.
+    css: getTextareaStyles(props)
+    // Allow to override the styles by passing a `className` prop.
     // Custom styles can also be passed using the `css` prop from emotion.
     // https://emotion.sh/docs/css-prop#style-precedence
     ,
     className: props.className
-    /* ARIA */
-    ,
+    /* ARIA */,
     "aria-readonly": props.isReadOnly,
     "aria-multiline": "true",
     "aria-invalid": props['aria-invalid'],
@@ -229,7 +217,6 @@ const MultilineInput = props => {
     cacheMeasurements: true
   }, utils.filterDataAttributes(props)));
 };
 MultilineInput.propTypes = {};
 MultilineInput.displayName = 'MultilineInput';
 var MultilineInput$1 = MultilineInput;
@@ -254,7 +241,7 @@ const accessibleHiddenInputStyles = {
 var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 exports.LocalizedInputToggle = LocalizedInputToggle$1;
 exports.MultilineInput = MultilineInput$1;

package/dist/commercetools-uikit-input-utils.esm.js CHANGED Viewed

@@ -6,6 +6,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import FlatButton from '@commercetools-uikit/flat-button';
 import { WorldIcon } from '@commercetools-uikit/icons';
 import { jsx } from '@emotion/react/jsx-runtime';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _parseInt from '@babel/runtime-corejs3/core-js-stable/parse-int';
 import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 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
 import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
-import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import TextareaAutosize from 'react-textarea-autosize';
 import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
@@ -41,7 +42,6 @@ const defaultProps = {
   hideMessage: messages$1.hide,
   showMessage: messages$1.show
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "xyzkeb",
   styles: "align-self:flex-start"
@@ -51,7 +51,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvY2FsaXplZC1pbnB1dC10b2dnbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDYyIsImZpbGUiOiJsb2NhbGl6ZWQtaW5wdXQtdG9nZ2xlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB0eXBlIHsgTWVzc2FnZURlc2NyaXB0b3IgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IE1vdXNlRXZlbnQsIEtleWJvYXJkRXZlbnQsIFJlYWN0RWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCBGbGF0QnV0dG9uIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ZsYXQtYnV0dG9uJztcbmltcG9ydCB7IFdvcmxkSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuLi9tZXNzYWdlcy9sb2NhbGl6ZWQtaW5wdXQnO1xuXG5leHBvcnQgdHlwZSBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcyA9IHtcbiAgaWNvbj86IFJlYWN0RWxlbWVudDtcbiAgaXNPcGVuPzogYm9vbGVhbjtcbiAgb25DbGljazogKFxuICAgIGV2ZW50OlxuICAgICAgfCBNb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBLZXlib2FyZEV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBib29sZWFuXG4gICkgPT4gdm9pZDtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIHNob3dNZXNzYWdlOiBzdHJpbmcgfCBNZXNzYWdlRGVzY3JpcHRvcjtcbiAgaGlkZU1lc3NhZ2U6IHN0cmluZyB8IE1lc3NhZ2VEZXNjcmlwdG9yO1xuICByZW1haW5pbmdMb2NhbGl6YXRpb25zPzogbnVtYmVyO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcyxcbiAgJ3Nob3dNZXNzYWdlJyB8ICdoaWRlTWVzc2FnZSdcbj4gPSB7XG4gIGhpZGVNZXNzYWdlOiBtZXNzYWdlcy5oaWRlLFxuICBzaG93TWVzc2FnZTogbWVzc2FnZXMuc2hvdyxcbn07XG5cbmNvbnN0IExvY2FsaXplZElucHV0VG9nZ2xlID0gKHByb3BzOiBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCBsYWJlbE1lc3NhZ2UgPSBwcm9wcy5pc09wZW4gPyBwcm9wcy5oaWRlTWVzc2FnZSA6IHByb3BzLnNob3dNZXNzYWdlO1xuICBjb25zdCBsYWJlbCA9XG4gICAgdHlwZW9mIGxhYmVsTWVzc2FnZSA9PT0gJ3N0cmluZydcbiAgICAgID8gbGFiZWxNZXNzYWdlXG4gICAgICA6IGludGwuZm9ybWF0TWVzc2FnZShsYWJlbE1lc3NhZ2UsIHtcbiAgICAgICAgICByZW1haW5pbmdMYW5ndWFnZXM6IHByb3BzLnJlbWFpbmluZ0xvY2FsaXphdGlvbnMsXG4gICAgICAgIH0pO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBhbGlnbi1zZWxmOiBmbGV4LXN0YXJ0O1xuICAgICAgYH1cbiAgICA+XG4gICAgICA8RmxhdEJ1dHRvblxuICAgICAgICBpY29uPXtwcm9wcy5pY29uID8gcHJvcHMuaWNvbiA6IDxXb3JsZEljb24gLz59XG4gICAgICAgIGxhYmVsPXtsYWJlbH1cbiAgICAgICAgb25DbGljaz17cHJvcHMub25DbGlja31cbiAgICAgICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICAgIC8+XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5Mb2NhbGl6ZWRJbnB1dFRvZ2dsZS5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5Mb2NhbGl6ZWRJbnB1dFRvZ2dsZS5kaXNwbGF5TmFtZSA9ICdMb2NhbGl6ZWRJbnB1dFRvZ2dsZSc7XG5leHBvcnQgZGVmYXVsdCBMb2NhbGl6ZWRJbnB1dFRvZ2dsZTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
 };
 const LocalizedInputToggle = props => {
   const intl = useIntl();
   const labelMessage = props.isOpen ? props.hideMessage : props.showMessage;
@@ -68,7 +67,6 @@ const LocalizedInputToggle = props => {
     })
   });
 };
 LocalizedInputToggle.propTypes = process.env.NODE_ENV !== "production" ? {
   icon: _pt.element,
   isOpen: _pt.bool,
@@ -84,119 +82,108 @@ var LocalizedInputToggle$1 = LocalizedInputToggle;
 const getInputBorderColor = function (props) {
   let defaultBorderColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designTokens.borderColorForInput;
   if (props.isDisabled || props.disabled) {
     return designTokens.borderColorForInputWhenDisabled;
   }
   if (props.hasError) {
     return designTokens.borderColorForInputWhenError;
   }
   if (props.hasWarning) {
     return designTokens.borderColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
     return designTokens.borderColorForInputWhenReadonly;
   }
   return defaultBorderColor;
 };
 const getInputFontColor = props => {
   if (props.isDisabled || props.disabled) {
     return designTokens.fontColorForInputWhenDisabled;
   }
   if (props.hasError) {
     return designTokens.fontColorForInputWhenError;
   }
   if (props.hasWarning) {
     return designTokens.fontColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
     return designTokens.fontColorForInputWhenReadonly;
   }
   return designTokens.fontColorForInput;
 };
 const getInputBorderWidth = props => {
   if (props.hasError) {
     return designTokens.borderWidthForInputWhenError;
   }
   if (props.hasWarning) {
     return designTokens.borderWidthForInputWhenWarning;
   }
   return designTokens.borderWidthForInput;
 };
 const getInputBoxShadow = props => {
   if (props.hasError) {
     return designTokens.shadowForInputWhenError;
   }
   if (props.hasWarning) {
     return designTokens.shadowForInputWhenWarning;
   }
   return designTokens.shadowForInput;
 };
 const getInputBackgroundColor = props => {
   if (props.isDisabled || props.disabled) {
     return designTokens.backgroundColorForInputWhenDisabled;
   }
   if (props.isReadOnly) {
     return designTokens.backgroundColorForInputWhenReadonly;
   }
   return designTokens.backgroundColorForInput;
 };
 const getInputStyles = props => {
   return /*#__PURE__*/css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", getInputBorderWidth(props), " solid ", getInputBorderColor(props), ";border-radius:", designTokens.borderRadiusForInput, ";box-sizing:border-box;box-shadow:", getInputBoxShadow(props), ";color:", getInputFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", designTokens.fontSizeForInput, ";height:", designTokens.heightForInput, ";min-height:", designTokens.heightForInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designTokens.paddingForInput, ";transition:border-color ", designTokens.transitionStandard, ",background-color ", designTokens.transitionStandard, ",color ", designTokens.transitionStandard, ",box-shadow ", designTokens.transitionStandard, ";width:100%;&::placeholder{color:", designTokens.placeholderFontColorForInput, ";}:active:not(:disabled):not(:read-only),:hover:not(:disabled):not(:read-only):not(:focus){border-color:", getInputBorderColor(props, designTokens.borderColorForInputWhenHovered), ";background-color:", designTokens.backgroundColorForInputWhenHovered, ";}:focus:not(:read-only){box-shadow:", designTokens.shadowForInputWhenFocused, ";border-color:", designTokens.borderColorForInputWhenFocused, ";background-color:", designTokens.backgroundColorForInputWhenFocused, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RVkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xuICByZWFkT25seT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBnZXRJbnB1dEJvcmRlckNvbG9yID0gKFxuICBwcm9wczogVElucHV0UHJvcHMsXG4gIGRlZmF1bHRCb3JkZXJDb2xvcjogc3RyaW5nID0gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRcbikgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSB8fCBwcm9wcy5yZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdEJvcmRlckNvbG9yO1xufTtcblxuY29uc3QgZ2V0SW5wdXRGb250Q29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5IHx8IHByb3BzLnJlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCb3JkZXJXaWR0aCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCb3hTaGFkb3cgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dDtcbn07XG5cbmNvbnN0IGdldElucHV0QmFja2dyb3VuZENvbG9yID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dFN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0SW5wdXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXI6ICR7Z2V0SW5wdXRCb3JkZXJXaWR0aChwcm9wcyl9IHNvbGlkICR7Z2V0SW5wdXRCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGJveC1zaGFkb3c6ICR7Z2V0SW5wdXRCb3hTaGFkb3cocHJvcHMpfTtcbiAgICBjb2xvcjogJHtnZXRJbnB1dEZvbnRDb2xvcihwcm9wcyl9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5pc0Rpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdkZWZhdWx0J307XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4OiAxO1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVGb3JJbnB1dH07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgbWluLWhlaWdodDogJHtkZXNpZ25Ub2tlbnMuaGVpZ2h0Rm9ySW5wdXR9O1xuICAgIG9wYWNpdHk6ICR7cHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZFxuICAgICAgPyAnMSdcbiAgICAgIDogJ3Vuc2V0J307IC8qIGZpeCBmb3IgbW9iaWxlIHNhZmFyaSAqL1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBwYWRkaW5nOiAwICR7ZGVzaWduVG9rZW5zLnBhZGRpbmdGb3JJbnB1dH07XG4gICAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBjb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgICAgYm94LXNoYWRvdyAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICAgIHdpZHRoOiAxMDAlO1xuXG4gICAgJjo6cGxhY2Vob2xkZXIge1xuICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLnBsYWNlaG9sZGVyRm9udENvbG9yRm9ySW5wdXR9O1xuICAgIH1cbiAgICA6YWN0aXZlOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KSxcbiAgICA6aG92ZXI6bm90KDpkaXNhYmxlZCk6bm90KDpyZWFkLW9ubHkpOm5vdCg6Zm9jdXMpIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dEJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5Ib3ZlcmVkfTtcbiAgICB9XG4gICAgOmZvY3VzOm5vdCg6cmVhZC1vbmx5KSB7XG4gICAgICBib3gtc2hhZG93OiAke2Rlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYDtcbn07XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBpbXBvcnQvcHJlZmVyLWRlZmF1bHQtZXhwb3J0XG5leHBvcnQgeyBnZXRJbnB1dFN0eWxlcyB9O1xuIl19 */");
-}; // eslint-disable-next-line import/prefer-default-export
+};
 /* we need this line-height to achieve 32px height when the component has only one row */
-const sizeInputLineHeight = '22px'; // NOTE: order is important here
+const sizeInputLineHeight = '22px';
+// NOTE: order is important here
 // * a disabled-field currently does not display warning/error-states so it takes precedence
 // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
 // how you can interact with the field is controlled separately by the props, this only influences visuals
 const getTextareaStyles = props => {
-  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= */")];
+  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== */")];
   return baseStyles;
-}; // eslint-disable-next-line import/prefer-default-export
+};
 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; }
 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; }
 const MIN_ROW_COUNT = 1;
+// We cache the vertical padding of the element becuase
+// it does not change over time so we don't need to
+// recalculate it on every height change event.
+let _elementVerticalPadding = null;
+const getElementVerticalPadding = element => {
+  if (_elementVerticalPadding === null) {
+    const computedStyle = getComputedStyle(element);
+    const paddingTop = _parseInt(computedStyle.paddingTop, 10);
+    const paddingBottom = _parseInt(computedStyle.paddingBottom, 10);
+    _elementVerticalPadding = paddingTop + paddingBottom;
+  }
+  return _elementVerticalPadding;
+};
 const MultilineInput = props => {
   const onHeightChange = props.onHeightChange;
   const ref = useRef(null);
-  const handleHeightChange = useCallback((height, meta) => {
-    var _ref$current;
-    const rowCount = Math.floor(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0 / meta.rowHeight);
+  const handleHeightChange = useCallback((_, meta) => {
+    const containerHeight = ref.current.scrollHeight;
+    const textHeight = containerHeight - getElementVerticalPadding(ref.current);
+    const rowCount = Math.floor(textHeight / meta.rowHeight);
     if (onHeightChange) {
-      onHeightChange(height, rowCount);
+      onHeightChange(containerHeight, rowCount);
     }
   }, [ref, onHeightChange]);
   if (!props.isReadOnly) {
     process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'MultilineInput: "onChange" is required when is not read only.') : void 0;
   }
   return jsx(TextareaAutosize, _objectSpread({
     ref: ref,
     name: props.name,
@@ -211,13 +198,13 @@ const MultilineInput = props => {
     placeholder: props.placeholder,
     readOnly: props.isReadOnly,
     autoFocus: props.isAutofocussed,
-    css: getTextareaStyles(props) // Allow to override the styles by passing a `className` prop.
+    css: getTextareaStyles(props)
+    // Allow to override the styles by passing a `className` prop.
     // Custom styles can also be passed using the `css` prop from emotion.
     // https://emotion.sh/docs/css-prop#style-precedence
     ,
     className: props.className
-    /* ARIA */
-    ,
+    /* ARIA */,
     "aria-readonly": props.isReadOnly,
     "aria-multiline": "true",
     "aria-invalid": props['aria-invalid'],
@@ -228,7 +215,6 @@ const MultilineInput = props => {
     cacheMeasurements: true
   }, filterDataAttributes(props)));
 };
 MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
   autoComplete: _pt.string,
   className: _pt.string,
@@ -278,6 +264,6 @@ const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
 var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 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 Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/input-utils",
   "description": "Utilities for working with input components.",
-  "version": "16.0.0",
+  "version": "16.1.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,10 +21,10 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/design-system": "16.0.0",
-    "@commercetools-uikit/flat-button": "16.0.0",
-    "@commercetools-uikit/icons": "16.0.0",
-    "@commercetools-uikit/utils": "16.0.0",
+    "@commercetools-uikit/design-system": "16.1.1",
+    "@commercetools-uikit/flat-button": "16.1.1",
+    "@commercetools-uikit/icons": "16.1.1",
+    "@commercetools-uikit/utils": "16.1.1",
     "@emotion/react": "^11.10.5",
     "prop-types": "15.8.1",
     "react-textarea-autosize": "8.4.0"