@commercetools-uikit/input-utils 19.1.0 → 19.3.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.
|
@@ -149,7 +149,7 @@ const getInputBackgroundColor = props => {
|
|
|
149
149
|
return designSystem.designTokens.backgroundColorForInput;
|
|
150
150
|
};
|
|
151
151
|
const getInputStyles = props => {
|
|
152
|
-
return /*#__PURE__*/react.css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", designSystem.designTokens.borderWidth1, " 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:", props.isCondensed ? "".concat(designSystem.designTokens.fontSize20) : "".concat(designSystem.designTokens.fontSize30), ";height:", props.isCondensed ? "".concat(designSystem.designTokens.heightForInputAsSmall) : "".concat(designSystem.designTokens.heightForInput), ";min-height:", props.isCondensed ? "".concat(designSystem.designTokens.heightForInputAsSmall) : "".concat(designSystem.designTokens.heightForInput), ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:", designSystem.designTokens.
|
|
152
|
+
return /*#__PURE__*/react.css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", designSystem.designTokens.borderWidth1, " 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:", props.isCondensed ? "".concat(designSystem.designTokens.fontSize20) : "".concat(designSystem.designTokens.fontSize30), ";height:", props.isCondensed ? "".concat(designSystem.designTokens.heightForInputAsSmall) : "".concat(designSystem.designTokens.heightForInput), ";min-height:", props.isCondensed ? "".concat(designSystem.designTokens.heightForInputAsSmall) : "".concat(designSystem.designTokens.heightForInput), ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designSystem.designTokens.spacing30, ";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.colorNeutral60, ";}: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.colorSurface, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRVkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzQ29uZGVuc2VkPzogYm9vbGVhbjtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgaGFzRXJyb3I/OiBib29sZWFuO1xuICBoYXNXYXJuaW5nPzogYm9vbGVhbjtcbiAgaXNSZWFkT25seT86IGJvb2xlYW47XG4gIHJlYWRPbmx5PzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm9yZGVyQ29sb3IgPSAoXG4gIHByb3BzOiBUSW5wdXRQcm9wcyxcbiAgZGVmYXVsdEJvcmRlckNvbG9yOiBzdHJpbmcgPSBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFxuKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5FcnJvcjtcbiAgfVxuICBpZiAocHJvcHMuaGFzV2FybmluZykge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5IHx8IHByb3BzLnJlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZWZhdWx0Qm9yZGVyQ29sb3I7XG59O1xuXG5jb25zdCBnZXRJbnB1dEZvbnRDb2xvciA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQgfHwgcHJvcHMuZGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkgfHwgcHJvcHMucmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dEJveFNoYWRvdyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5FcnJvcjtcbiAgfVxuICBpZiAocHJvcHMuaGFzV2FybmluZykge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCYWNrZ3JvdW5kQ29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dDtcbn07XG5cbmNvbnN0IGdldElucHV0U3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRJbnB1dEJhY2tncm91bmRDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyV2lkdGgxfSBzb2xpZCAke2dldElucHV0Qm9yZGVyQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXNGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBib3gtc2hhZG93OiAke2dldElucHV0Qm94U2hhZG93KHByb3BzKX07XG4gICAgY29sb3I6ICR7Z2V0SW5wdXRGb250Q29sb3IocHJvcHMpfTtcbiAgICBjdXJzb3I6ICR7cHJvcHMuaXNEaXNhYmxlZCA/ICdub3QtYWxsb3dlZCcgOiAnZGVmYXVsdCd9O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleDogMTtcbiAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICBmb250LXNpemU6ICR7cHJvcHMuaXNDb25kZW5zZWRcbiAgICAgID8gYCR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9YFxuICAgICAgOiBgJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUzMH1gfTtcbiAgICBoZWlnaHQ6ICR7cHJvcHMuaXNDb25kZW5zZWRcbiAgICAgID8gYCR7ZGVzaWduVG9rZW5zLmhlaWdodEZvcklucHV0QXNTbWFsbH1gXG4gICAgICA6IGAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH1gfTtcbiAgICBtaW4taGVpZ2h0OiAke3Byb3BzLmlzQ29uZGVuc2VkXG4gICAgICA/IGAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dEFzU21hbGx9YFxuICAgICAgOiBgJHtkZXNpZ25Ub2tlbnMuaGVpZ2h0Rm9ySW5wdXR9YH07XG4gICAgb3BhY2l0eTogJHtwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkXG4gICAgICA/ICcxJ1xuICAgICAgOiAndW5zZXQnfTsgLyogZml4IGZvciBtb2JpbGUgc2FmYXJpICovXG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBhZGRpbmc6IDAgJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzMwfTtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGJhY2tncm91bmQtY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBib3gtc2hhZG93ICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG4gICAgd2lkdGg6IDEwMCU7XG5cbiAgICAmOjpwbGFjZWhvbGRlciB7XG4gICAgICBjb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsNjB9O1xuICAgIH1cbiAgICA6YWN0aXZlOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KSxcbiAgICA6aG92ZXI6bm90KDpkaXNhYmxlZCk6bm90KDpyZWFkLW9ubHkpOm5vdCg6Zm9jdXMpIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dEJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5Ib3ZlcmVkfTtcbiAgICB9XG4gICAgOmZvY3VzOm5vdCg6cmVhZC1vbmx5KSB7XG4gICAgICBib3gtc2hhZG93OiAke2Rlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgfVxuICBgO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldElucHV0U3R5bGVzIH07XG4iXX0= */");
|
|
153
153
|
};
|
|
154
154
|
|
|
155
155
|
/* we need this line-height to achieve 32px height when the component has only one row */
|
|
@@ -160,7 +160,7 @@ const sizeInputLineHeight = '22px';
|
|
|
160
160
|
// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
|
|
161
161
|
// how you can interact with the field is controlled separately by the props, this only influences visuals
|
|
162
162
|
const getTextareaStyles = props => {
|
|
163
|
-
const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing20, ";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+
|
|
163
|
+
const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", props.isCondensed ? designSystem.designTokens.spacing10 : designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";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+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtwcm9wcy5pc0NvbmRlbnNlZFxuICAgICAgICAgID8gZGVzaWduVG9rZW5zLnNwYWNpbmcxMFxuICAgICAgICAgIDogZGVzaWduVG9rZW5zLnNwYWNpbmcyMH1cbiAgICAgICAgJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzMwfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAke3NpemVJbnB1dExpbmVIZWlnaHR9O1xuICAgICAgZmxleDogYXV0bztcbiAgICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgICByZXNpemU6IG5vbmU7XG4gICAgYCxcbiAgXTtcbiAgcmV0dXJuIGJhc2VTdHlsZXM7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0VGV4dGFyZWFTdHlsZXMgfTtcbiJdfQ== */")];
|
|
164
164
|
return baseStyles;
|
|
165
165
|
};
|
|
166
166
|
|
|
@@ -222,7 +222,7 @@ const MultilineInput = props => {
|
|
|
222
222
|
role: "textbox",
|
|
223
223
|
minRows: MIN_ROW_COUNT,
|
|
224
224
|
maxRows: props.isOpen ? undefined : MIN_ROW_COUNT,
|
|
225
|
-
cacheMeasurements:
|
|
225
|
+
cacheMeasurements: props.cacheMeasurements
|
|
226
226
|
}, utils.filterDataAttributes(props)));
|
|
227
227
|
};
|
|
228
228
|
MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -232,6 +232,7 @@ MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
232
232
|
hasWarning: _pt__default["default"].bool,
|
|
233
233
|
id: _pt__default["default"].string,
|
|
234
234
|
isAutofocussed: _pt__default["default"].bool,
|
|
235
|
+
isCondensed: _pt__default["default"].bool,
|
|
235
236
|
isDisabled: _pt__default["default"].bool,
|
|
236
237
|
isReadOnly: _pt__default["default"].bool,
|
|
237
238
|
name: _pt__default["default"].string,
|
|
@@ -241,11 +242,15 @@ MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
241
242
|
placeholder: _pt__default["default"].string,
|
|
242
243
|
value: _pt__default["default"].string.isRequired,
|
|
243
244
|
isOpen: _pt__default["default"].bool.isRequired,
|
|
245
|
+
cacheMeasurements: _pt__default["default"].bool,
|
|
244
246
|
onHeightChange: _pt__default["default"].func,
|
|
245
247
|
'aria-invalid': _pt__default["default"].bool,
|
|
246
248
|
'aria-errormessage': _pt__default["default"].string
|
|
247
249
|
} : {};
|
|
248
250
|
MultilineInput.displayName = 'MultilineInput';
|
|
251
|
+
MultilineInput.defaultProps = {
|
|
252
|
+
cacheMeasurements: true
|
|
253
|
+
};
|
|
249
254
|
var MultilineInput$1 = MultilineInput;
|
|
250
255
|
|
|
251
256
|
var messages = reactIntl.defineMessages({
|
|
@@ -274,7 +279,7 @@ const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
|
|
|
274
279
|
var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
|
|
275
280
|
|
|
276
281
|
// NOTE: This string will be replaced on build time with the package version.
|
|
277
|
-
var version = "19.
|
|
282
|
+
var version = "19.3.0";
|
|
278
283
|
|
|
279
284
|
exports.LocalizedInputToggle = LocalizedInputToggle$1;
|
|
280
285
|
exports.MultilineInput = MultilineInput$1;
|
|
@@ -134,7 +134,7 @@ const getInputBackgroundColor = props => {
|
|
|
134
134
|
return designSystem.designTokens.backgroundColorForInput;
|
|
135
135
|
};
|
|
136
136
|
const getInputStyles = props => {
|
|
137
|
-
return /*#__PURE__*/react.css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", designSystem.designTokens.borderWidth1, " 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:", props.isCondensed ? "".concat(designSystem.designTokens.fontSize20) : "".concat(designSystem.designTokens.fontSize30), ";height:", props.isCondensed ? "".concat(designSystem.designTokens.heightForInputAsSmall) : "".concat(designSystem.designTokens.heightForInput), ";min-height:", props.isCondensed ? "".concat(designSystem.designTokens.heightForInputAsSmall) : "".concat(designSystem.designTokens.heightForInput), ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:", designSystem.designTokens.
|
|
137
|
+
return /*#__PURE__*/react.css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", designSystem.designTokens.borderWidth1, " 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:", props.isCondensed ? "".concat(designSystem.designTokens.fontSize20) : "".concat(designSystem.designTokens.fontSize30), ";height:", props.isCondensed ? "".concat(designSystem.designTokens.heightForInputAsSmall) : "".concat(designSystem.designTokens.heightForInput), ";min-height:", props.isCondensed ? "".concat(designSystem.designTokens.heightForInputAsSmall) : "".concat(designSystem.designTokens.heightForInput), ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designSystem.designTokens.spacing30, ";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.colorNeutral60, ";}: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.colorSurface, ";}" + ("" ), "" );
|
|
138
138
|
};
|
|
139
139
|
|
|
140
140
|
/* we need this line-height to achieve 32px height when the component has only one row */
|
|
@@ -145,7 +145,7 @@ const sizeInputLineHeight = '22px';
|
|
|
145
145
|
// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
|
|
146
146
|
// how you can interact with the field is controlled separately by the props, this only influences visuals
|
|
147
147
|
const getTextareaStyles = props => {
|
|
148
|
-
const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing20, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:none;" + ("" ), "" )];
|
|
148
|
+
const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", props.isCondensed ? designSystem.designTokens.spacing10 : designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:none;" + ("" ), "" )];
|
|
149
149
|
return baseStyles;
|
|
150
150
|
};
|
|
151
151
|
|
|
@@ -205,11 +205,14 @@ const MultilineInput = props => {
|
|
|
205
205
|
role: "textbox",
|
|
206
206
|
minRows: MIN_ROW_COUNT,
|
|
207
207
|
maxRows: props.isOpen ? undefined : MIN_ROW_COUNT,
|
|
208
|
-
cacheMeasurements:
|
|
208
|
+
cacheMeasurements: props.cacheMeasurements
|
|
209
209
|
}, utils.filterDataAttributes(props)));
|
|
210
210
|
};
|
|
211
211
|
MultilineInput.propTypes = {};
|
|
212
212
|
MultilineInput.displayName = 'MultilineInput';
|
|
213
|
+
MultilineInput.defaultProps = {
|
|
214
|
+
cacheMeasurements: true
|
|
215
|
+
};
|
|
213
216
|
var MultilineInput$1 = MultilineInput;
|
|
214
217
|
|
|
215
218
|
var messages = reactIntl.defineMessages({
|
|
@@ -232,7 +235,7 @@ const accessibleHiddenInputStyles = {
|
|
|
232
235
|
var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
|
|
233
236
|
|
|
234
237
|
// NOTE: This string will be replaced on build time with the package version.
|
|
235
|
-
var version = "19.
|
|
238
|
+
var version = "19.3.0";
|
|
236
239
|
|
|
237
240
|
exports.LocalizedInputToggle = LocalizedInputToggle$1;
|
|
238
241
|
exports.MultilineInput = MultilineInput$1;
|
|
@@ -130,7 +130,7 @@ const getInputBackgroundColor = props => {
|
|
|
130
130
|
return designTokens.backgroundColorForInput;
|
|
131
131
|
};
|
|
132
132
|
const getInputStyles = props => {
|
|
133
|
-
return /*#__PURE__*/css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", designTokens.borderWidth1, " 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:", props.isCondensed ? "".concat(designTokens.fontSize20) : "".concat(designTokens.fontSize30), ";height:", props.isCondensed ? "".concat(designTokens.heightForInputAsSmall) : "".concat(designTokens.heightForInput), ";min-height:", props.isCondensed ? "".concat(designTokens.heightForInputAsSmall) : "".concat(designTokens.heightForInput), ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:", designTokens.
|
|
133
|
+
return /*#__PURE__*/css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", designTokens.borderWidth1, " 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:", props.isCondensed ? "".concat(designTokens.fontSize20) : "".concat(designTokens.fontSize30), ";height:", props.isCondensed ? "".concat(designTokens.heightForInputAsSmall) : "".concat(designTokens.heightForInput), ";min-height:", props.isCondensed ? "".concat(designTokens.heightForInputAsSmall) : "".concat(designTokens.heightForInput), ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designTokens.spacing30, ";transition:border-color ", designTokens.transitionStandard, ",background-color ", designTokens.transitionStandard, ",color ", designTokens.transitionStandard, ",box-shadow ", designTokens.transitionStandard, ";width:100%;&::placeholder{color:", designTokens.colorNeutral60, ";}: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.colorSurface, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRVkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzQ29uZGVuc2VkPzogYm9vbGVhbjtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgaGFzRXJyb3I/OiBib29sZWFuO1xuICBoYXNXYXJuaW5nPzogYm9vbGVhbjtcbiAgaXNSZWFkT25seT86IGJvb2xlYW47XG4gIHJlYWRPbmx5PzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm9yZGVyQ29sb3IgPSAoXG4gIHByb3BzOiBUSW5wdXRQcm9wcyxcbiAgZGVmYXVsdEJvcmRlckNvbG9yOiBzdHJpbmcgPSBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFxuKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5FcnJvcjtcbiAgfVxuICBpZiAocHJvcHMuaGFzV2FybmluZykge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5IHx8IHByb3BzLnJlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZWZhdWx0Qm9yZGVyQ29sb3I7XG59O1xuXG5jb25zdCBnZXRJbnB1dEZvbnRDb2xvciA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQgfHwgcHJvcHMuZGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkgfHwgcHJvcHMucmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dEJveFNoYWRvdyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5FcnJvcjtcbiAgfVxuICBpZiAocHJvcHMuaGFzV2FybmluZykge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCYWNrZ3JvdW5kQ29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuUmVhZG9ubHk7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dDtcbn07XG5cbmNvbnN0IGdldElucHV0U3R5bGVzID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRJbnB1dEJhY2tncm91bmRDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyV2lkdGgxfSBzb2xpZCAke2dldElucHV0Qm9yZGVyQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXNGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBib3gtc2hhZG93OiAke2dldElucHV0Qm94U2hhZG93KHByb3BzKX07XG4gICAgY29sb3I6ICR7Z2V0SW5wdXRGb250Q29sb3IocHJvcHMpfTtcbiAgICBjdXJzb3I6ICR7cHJvcHMuaXNEaXNhYmxlZCA/ICdub3QtYWxsb3dlZCcgOiAnZGVmYXVsdCd9O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleDogMTtcbiAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICBmb250LXNpemU6ICR7cHJvcHMuaXNDb25kZW5zZWRcbiAgICAgID8gYCR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9YFxuICAgICAgOiBgJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUzMH1gfTtcbiAgICBoZWlnaHQ6ICR7cHJvcHMuaXNDb25kZW5zZWRcbiAgICAgID8gYCR7ZGVzaWduVG9rZW5zLmhlaWdodEZvcklucHV0QXNTbWFsbH1gXG4gICAgICA6IGAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH1gfTtcbiAgICBtaW4taGVpZ2h0OiAke3Byb3BzLmlzQ29uZGVuc2VkXG4gICAgICA/IGAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dEFzU21hbGx9YFxuICAgICAgOiBgJHtkZXNpZ25Ub2tlbnMuaGVpZ2h0Rm9ySW5wdXR9YH07XG4gICAgb3BhY2l0eTogJHtwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkXG4gICAgICA/ICcxJ1xuICAgICAgOiAndW5zZXQnfTsgLyogZml4IGZvciBtb2JpbGUgc2FmYXJpICovXG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBhZGRpbmc6IDAgJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzMwfTtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGJhY2tncm91bmQtY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBib3gtc2hhZG93ICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG4gICAgd2lkdGg6IDEwMCU7XG5cbiAgICAmOjpwbGFjZWhvbGRlciB7XG4gICAgICBjb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsNjB9O1xuICAgIH1cbiAgICA6YWN0aXZlOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KSxcbiAgICA6aG92ZXI6bm90KDpkaXNhYmxlZCk6bm90KDpyZWFkLW9ubHkpOm5vdCg6Zm9jdXMpIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dEJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5Ib3ZlcmVkfTtcbiAgICB9XG4gICAgOmZvY3VzOm5vdCg6cmVhZC1vbmx5KSB7XG4gICAgICBib3gtc2hhZG93OiAke2Rlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgfVxuICBgO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldElucHV0U3R5bGVzIH07XG4iXX0= */");
|
|
134
134
|
};
|
|
135
135
|
|
|
136
136
|
/* we need this line-height to achieve 32px height when the component has only one row */
|
|
@@ -141,7 +141,7 @@ const sizeInputLineHeight = '22px';
|
|
|
141
141
|
// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
|
|
142
142
|
// how you can interact with the field is controlled separately by the props, this only influences visuals
|
|
143
143
|
const getTextareaStyles = props => {
|
|
144
|
-
const baseStyles = [getInputStyles(props), /*#__PURE__*/css("padding:", designTokens.spacing20, ";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+
|
|
144
|
+
const baseStyles = [getInputStyles(props), /*#__PURE__*/css("padding:", props.isCondensed ? designTokens.spacing10 : designTokens.spacing20, " ", designTokens.spacing30, ";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+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtwcm9wcy5pc0NvbmRlbnNlZFxuICAgICAgICAgID8gZGVzaWduVG9rZW5zLnNwYWNpbmcxMFxuICAgICAgICAgIDogZGVzaWduVG9rZW5zLnNwYWNpbmcyMH1cbiAgICAgICAgJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzMwfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAke3NpemVJbnB1dExpbmVIZWlnaHR9O1xuICAgICAgZmxleDogYXV0bztcbiAgICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgICByZXNpemU6IG5vbmU7XG4gICAgYCxcbiAgXTtcbiAgcmV0dXJuIGJhc2VTdHlsZXM7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0VGV4dGFyZWFTdHlsZXMgfTtcbiJdfQ== */")];
|
|
145
145
|
return baseStyles;
|
|
146
146
|
};
|
|
147
147
|
|
|
@@ -203,7 +203,7 @@ const MultilineInput = props => {
|
|
|
203
203
|
role: "textbox",
|
|
204
204
|
minRows: MIN_ROW_COUNT,
|
|
205
205
|
maxRows: props.isOpen ? undefined : MIN_ROW_COUNT,
|
|
206
|
-
cacheMeasurements:
|
|
206
|
+
cacheMeasurements: props.cacheMeasurements
|
|
207
207
|
}, filterDataAttributes(props)));
|
|
208
208
|
};
|
|
209
209
|
MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -213,6 +213,7 @@ MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
213
213
|
hasWarning: _pt.bool,
|
|
214
214
|
id: _pt.string,
|
|
215
215
|
isAutofocussed: _pt.bool,
|
|
216
|
+
isCondensed: _pt.bool,
|
|
216
217
|
isDisabled: _pt.bool,
|
|
217
218
|
isReadOnly: _pt.bool,
|
|
218
219
|
name: _pt.string,
|
|
@@ -222,11 +223,15 @@ MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
222
223
|
placeholder: _pt.string,
|
|
223
224
|
value: _pt.string.isRequired,
|
|
224
225
|
isOpen: _pt.bool.isRequired,
|
|
226
|
+
cacheMeasurements: _pt.bool,
|
|
225
227
|
onHeightChange: _pt.func,
|
|
226
228
|
'aria-invalid': _pt.bool,
|
|
227
229
|
'aria-errormessage': _pt.string
|
|
228
230
|
} : {};
|
|
229
231
|
MultilineInput.displayName = 'MultilineInput';
|
|
232
|
+
MultilineInput.defaultProps = {
|
|
233
|
+
cacheMeasurements: true
|
|
234
|
+
};
|
|
230
235
|
var MultilineInput$1 = MultilineInput;
|
|
231
236
|
|
|
232
237
|
var messages = defineMessages({
|
|
@@ -255,6 +260,6 @@ const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
|
|
|
255
260
|
var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
|
|
256
261
|
|
|
257
262
|
// NOTE: This string will be replaced on build time with the package version.
|
|
258
|
-
var version = "19.
|
|
263
|
+
var version = "19.3.0";
|
|
259
264
|
|
|
260
265
|
export { LocalizedInputToggle$1 as LocalizedInputToggle, MultilineInput$1 as MultilineInput, accessibleHiddenInputStyles$1 as accessibleHiddenInputStyles, getInputStyles, messages$1 as messagesLocalizedInput, messages as messagesMultilineInput, version };
|
|
@@ -6,6 +6,7 @@ export type TMultiLineInputProps = {
|
|
|
6
6
|
hasWarning?: boolean;
|
|
7
7
|
id?: string;
|
|
8
8
|
isAutofocussed?: boolean;
|
|
9
|
+
isCondensed?: boolean;
|
|
9
10
|
isDisabled?: boolean;
|
|
10
11
|
isReadOnly?: boolean;
|
|
11
12
|
name?: string;
|
|
@@ -15,6 +16,7 @@ export type TMultiLineInputProps = {
|
|
|
15
16
|
placeholder?: string;
|
|
16
17
|
value: string;
|
|
17
18
|
isOpen: boolean;
|
|
19
|
+
cacheMeasurements?: boolean;
|
|
18
20
|
onHeightChange?: (height: number, rowCount: number) => void;
|
|
19
21
|
'aria-invalid'?: boolean;
|
|
20
22
|
'aria-errormessage'?: string;
|
|
@@ -22,5 +24,8 @@ export type TMultiLineInputProps = {
|
|
|
22
24
|
declare const MultilineInput: {
|
|
23
25
|
(props: TMultiLineInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
24
26
|
displayName: string;
|
|
27
|
+
defaultProps: {
|
|
28
|
+
cacheMeasurements: boolean;
|
|
29
|
+
};
|
|
25
30
|
};
|
|
26
31
|
export default MultilineInput;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/input-utils",
|
|
3
3
|
"description": "Utilities for working with input components.",
|
|
4
|
-
"version": "19.
|
|
4
|
+
"version": "19.3.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/design-system": "19.
|
|
25
|
-
"@commercetools-uikit/flat-button": "19.
|
|
26
|
-
"@commercetools-uikit/icons": "19.
|
|
27
|
-
"@commercetools-uikit/utils": "19.
|
|
24
|
+
"@commercetools-uikit/design-system": "19.3.0",
|
|
25
|
+
"@commercetools-uikit/flat-button": "19.3.0",
|
|
26
|
+
"@commercetools-uikit/icons": "19.3.0",
|
|
27
|
+
"@commercetools-uikit/utils": "19.3.0",
|
|
28
28
|
"@emotion/react": "^11.10.5",
|
|
29
29
|
"prop-types": "15.8.1",
|
|
30
30
|
"react-textarea-autosize": "8.4.0"
|