@commercetools-uikit/input-utils 17.1.0 → 18.0.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.
|
@@ -130,15 +130,6 @@ const getInputFontColor = props => {
|
|
|
130
130
|
}
|
|
131
131
|
return designSystem.designTokens.fontColorForInput;
|
|
132
132
|
};
|
|
133
|
-
const getInputBorderWidth = props => {
|
|
134
|
-
if (props.hasError) {
|
|
135
|
-
return designSystem.designTokens.borderWidthForInputWhenError;
|
|
136
|
-
}
|
|
137
|
-
if (props.hasWarning) {
|
|
138
|
-
return designSystem.designTokens.borderWidthForInputWhenWarning;
|
|
139
|
-
}
|
|
140
|
-
return designSystem.designTokens.borderWidthForInput;
|
|
141
|
-
};
|
|
142
133
|
const getInputBoxShadow = props => {
|
|
143
134
|
if (props.hasError) {
|
|
144
135
|
return designSystem.designTokens.shadowForInputWhenError;
|
|
@@ -158,7 +149,7 @@ const getInputBackgroundColor = props => {
|
|
|
158
149
|
return designSystem.designTokens.backgroundColorForInput;
|
|
159
150
|
};
|
|
160
151
|
const getInputStyles = props => {
|
|
161
|
-
return /*#__PURE__*/react.css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:",
|
|
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:", designSystem.designTokens.fontSize30, ";height:", designSystem.designTokens.heightForInput, ";min-height:", designSystem.designTokens.heightForInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:", 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.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.backgroundColorForInputWhenFocused, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRVkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xuICByZWFkT25seT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBnZXRJbnB1dEJvcmRlckNvbG9yID0gKFxuICBwcm9wczogVElucHV0UHJvcHMsXG4gIGRlZmF1bHRCb3JkZXJDb2xvcjogc3RyaW5nID0gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRcbikgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSB8fCBwcm9wcy5yZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdEJvcmRlckNvbG9yO1xufTtcblxuY29uc3QgZ2V0SW5wdXRGb250Q29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5IHx8IHByb3BzLnJlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCb3hTaGFkb3cgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dDtcbn07XG5cbmNvbnN0IGdldElucHV0QmFja2dyb3VuZENvbG9yID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dFN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0SW5wdXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXI6ICR7ZGVzaWduVG9rZW5zLmJvcmRlcldpZHRoMX0gc29saWQgJHtnZXRJbnB1dEJvcmRlckNvbG9yKHByb3BzKX07XG4gICAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYm94LXNoYWRvdzogJHtnZXRJbnB1dEJveFNoYWRvdyhwcm9wcyl9O1xuICAgIGNvbG9yOiAke2dldElucHV0Rm9udENvbG9yKHByb3BzKX07XG4gICAgY3Vyc29yOiAke3Byb3BzLmlzRGlzYWJsZWQgPyAnbm90LWFsbG93ZWQnIDogJ2RlZmF1bHQnfTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXg6IDE7XG4gICAgZm9udC1mYW1pbHk6IGluaGVyaXQ7XG4gICAgZm9udC1zaXplOiAke2Rlc2lnblRva2Vucy5mb250U2l6ZTMwfTtcbiAgICBoZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmhlaWdodEZvcklucHV0fTtcbiAgICBtaW4taGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgb3BhY2l0eTogJHtwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkXG4gICAgICA/ICcxJ1xuICAgICAgOiAndW5zZXQnfTsgLyogZml4IGZvciBtb2JpbGUgc2FmYXJpICovXG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnBhZGRpbmdGb3JJbnB1dH07XG4gICAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBjb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgICAgYm94LXNoYWRvdyAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICAgIHdpZHRoOiAxMDAlO1xuXG4gICAgJjo6cGxhY2Vob2xkZXIge1xuICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDYwfTtcbiAgICB9XG4gICAgOmFjdGl2ZTpub3QoOmRpc2FibGVkKTpub3QoOnJlYWQtb25seSksXG4gICAgOmhvdmVyOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KTpub3QoOmZvY3VzKSB7XG4gICAgICBib3JkZXItY29sb3I6ICR7Z2V0SW5wdXRCb3JkZXJDb2xvcihcbiAgICAgICAgcHJvcHMsXG4gICAgICAgIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07XG4gICAgfVxuICAgIDpmb2N1czpub3QoOnJlYWQtb25seSkge1xuICAgICAgYm94LXNoYWRvdzogJHtkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuRm9jdXNlZH07XG4gICAgICBib3JkZXItY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRm9jdXNlZH07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICB9XG4gIGA7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfTtcbiJdfQ== */");
|
|
162
153
|
};
|
|
163
154
|
|
|
164
155
|
/* we need this line-height to achieve 32px height when the component has only one row */
|
|
@@ -169,7 +160,7 @@ const sizeInputLineHeight = '22px';
|
|
|
169
160
|
// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
|
|
170
161
|
// how you can interact with the field is controlled separately by the props, this only influences visuals
|
|
171
162
|
const getTextareaStyles = props => {
|
|
172
|
-
const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.
|
|
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+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAke3NpemVJbnB1dExpbmVIZWlnaHR9O1xuICAgICAgZmxleDogYXV0bztcbiAgICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgICByZXNpemU6IG5vbmU7XG4gICAgYCxcbiAgXTtcbiAgcmV0dXJuIGJhc2VTdHlsZXM7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0VGV4dGFyZWFTdHlsZXMgfTtcbiJdfQ== */")];
|
|
173
164
|
return baseStyles;
|
|
174
165
|
};
|
|
175
166
|
|
|
@@ -283,7 +274,7 @@ const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
|
|
|
283
274
|
var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
|
|
284
275
|
|
|
285
276
|
// NOTE: This string will be replaced on build time with the package version.
|
|
286
|
-
var version = "
|
|
277
|
+
var version = "18.0.0";
|
|
287
278
|
|
|
288
279
|
exports.LocalizedInputToggle = LocalizedInputToggle$1;
|
|
289
280
|
exports.MultilineInput = MultilineInput$1;
|
|
@@ -115,15 +115,6 @@ const getInputFontColor = props => {
|
|
|
115
115
|
}
|
|
116
116
|
return designSystem.designTokens.fontColorForInput;
|
|
117
117
|
};
|
|
118
|
-
const getInputBorderWidth = props => {
|
|
119
|
-
if (props.hasError) {
|
|
120
|
-
return designSystem.designTokens.borderWidthForInputWhenError;
|
|
121
|
-
}
|
|
122
|
-
if (props.hasWarning) {
|
|
123
|
-
return designSystem.designTokens.borderWidthForInputWhenWarning;
|
|
124
|
-
}
|
|
125
|
-
return designSystem.designTokens.borderWidthForInput;
|
|
126
|
-
};
|
|
127
118
|
const getInputBoxShadow = props => {
|
|
128
119
|
if (props.hasError) {
|
|
129
120
|
return designSystem.designTokens.shadowForInputWhenError;
|
|
@@ -143,7 +134,7 @@ const getInputBackgroundColor = props => {
|
|
|
143
134
|
return designSystem.designTokens.backgroundColorForInput;
|
|
144
135
|
};
|
|
145
136
|
const getInputStyles = props => {
|
|
146
|
-
return /*#__PURE__*/react.css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:",
|
|
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:", designSystem.designTokens.fontSize30, ";height:", designSystem.designTokens.heightForInput, ";min-height:", designSystem.designTokens.heightForInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:", 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.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.backgroundColorForInputWhenFocused, ";}" + ("" ), "" );
|
|
147
138
|
};
|
|
148
139
|
|
|
149
140
|
/* we need this line-height to achieve 32px height when the component has only one row */
|
|
@@ -154,7 +145,7 @@ const sizeInputLineHeight = '22px';
|
|
|
154
145
|
// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
|
|
155
146
|
// how you can interact with the field is controlled separately by the props, this only influences visuals
|
|
156
147
|
const getTextareaStyles = props => {
|
|
157
|
-
const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.
|
|
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;" + ("" ), "" )];
|
|
158
149
|
return baseStyles;
|
|
159
150
|
};
|
|
160
151
|
|
|
@@ -241,7 +232,7 @@ const accessibleHiddenInputStyles = {
|
|
|
241
232
|
var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
|
|
242
233
|
|
|
243
234
|
// NOTE: This string will be replaced on build time with the package version.
|
|
244
|
-
var version = "
|
|
235
|
+
var version = "18.0.0";
|
|
245
236
|
|
|
246
237
|
exports.LocalizedInputToggle = LocalizedInputToggle$1;
|
|
247
238
|
exports.MultilineInput = MultilineInput$1;
|
|
@@ -111,15 +111,6 @@ const getInputFontColor = props => {
|
|
|
111
111
|
}
|
|
112
112
|
return designTokens.fontColorForInput;
|
|
113
113
|
};
|
|
114
|
-
const getInputBorderWidth = props => {
|
|
115
|
-
if (props.hasError) {
|
|
116
|
-
return designTokens.borderWidthForInputWhenError;
|
|
117
|
-
}
|
|
118
|
-
if (props.hasWarning) {
|
|
119
|
-
return designTokens.borderWidthForInputWhenWarning;
|
|
120
|
-
}
|
|
121
|
-
return designTokens.borderWidthForInput;
|
|
122
|
-
};
|
|
123
114
|
const getInputBoxShadow = props => {
|
|
124
115
|
if (props.hasError) {
|
|
125
116
|
return designTokens.shadowForInputWhenError;
|
|
@@ -139,7 +130,7 @@ const getInputBackgroundColor = props => {
|
|
|
139
130
|
return designTokens.backgroundColorForInput;
|
|
140
131
|
};
|
|
141
132
|
const getInputStyles = props => {
|
|
142
|
-
return /*#__PURE__*/css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:",
|
|
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:", designTokens.fontSize30, ";height:", designTokens.heightForInput, ";min-height:", designTokens.heightForInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:", designTokens.paddingForInput, ";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.backgroundColorForInputWhenFocused, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRVkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xuICByZWFkT25seT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBnZXRJbnB1dEJvcmRlckNvbG9yID0gKFxuICBwcm9wczogVElucHV0UHJvcHMsXG4gIGRlZmF1bHRCb3JkZXJDb2xvcjogc3RyaW5nID0gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRcbikgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSB8fCBwcm9wcy5yZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdEJvcmRlckNvbG9yO1xufTtcblxuY29uc3QgZ2V0SW5wdXRGb250Q29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5IHx8IHByb3BzLnJlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCb3hTaGFkb3cgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dDtcbn07XG5cbmNvbnN0IGdldElucHV0QmFja2dyb3VuZENvbG9yID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dFN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0SW5wdXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXI6ICR7ZGVzaWduVG9rZW5zLmJvcmRlcldpZHRoMX0gc29saWQgJHtnZXRJbnB1dEJvcmRlckNvbG9yKHByb3BzKX07XG4gICAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYm94LXNoYWRvdzogJHtnZXRJbnB1dEJveFNoYWRvdyhwcm9wcyl9O1xuICAgIGNvbG9yOiAke2dldElucHV0Rm9udENvbG9yKHByb3BzKX07XG4gICAgY3Vyc29yOiAke3Byb3BzLmlzRGlzYWJsZWQgPyAnbm90LWFsbG93ZWQnIDogJ2RlZmF1bHQnfTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXg6IDE7XG4gICAgZm9udC1mYW1pbHk6IGluaGVyaXQ7XG4gICAgZm9udC1zaXplOiAke2Rlc2lnblRva2Vucy5mb250U2l6ZTMwfTtcbiAgICBoZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmhlaWdodEZvcklucHV0fTtcbiAgICBtaW4taGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgb3BhY2l0eTogJHtwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkXG4gICAgICA/ICcxJ1xuICAgICAgOiAndW5zZXQnfTsgLyogZml4IGZvciBtb2JpbGUgc2FmYXJpICovXG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnBhZGRpbmdGb3JJbnB1dH07XG4gICAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBjb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgICAgYm94LXNoYWRvdyAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICAgIHdpZHRoOiAxMDAlO1xuXG4gICAgJjo6cGxhY2Vob2xkZXIge1xuICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDYwfTtcbiAgICB9XG4gICAgOmFjdGl2ZTpub3QoOmRpc2FibGVkKTpub3QoOnJlYWQtb25seSksXG4gICAgOmhvdmVyOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KTpub3QoOmZvY3VzKSB7XG4gICAgICBib3JkZXItY29sb3I6ICR7Z2V0SW5wdXRCb3JkZXJDb2xvcihcbiAgICAgICAgcHJvcHMsXG4gICAgICAgIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkhvdmVyZWRcbiAgICAgICl9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07XG4gICAgfVxuICAgIDpmb2N1czpub3QoOnJlYWQtb25seSkge1xuICAgICAgYm94LXNoYWRvdzogJHtkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuRm9jdXNlZH07XG4gICAgICBib3JkZXItY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRm9jdXNlZH07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICB9XG4gIGA7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfTtcbiJdfQ== */");
|
|
143
134
|
};
|
|
144
135
|
|
|
145
136
|
/* we need this line-height to achieve 32px height when the component has only one row */
|
|
@@ -150,7 +141,7 @@ const sizeInputLineHeight = '22px';
|
|
|
150
141
|
// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
|
|
151
142
|
// how you can interact with the field is controlled separately by the props, this only influences visuals
|
|
152
143
|
const getTextareaStyles = props => {
|
|
153
|
-
const baseStyles = [getInputStyles(props), /*#__PURE__*/css("padding:", designTokens.
|
|
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+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAke3NpemVJbnB1dExpbmVIZWlnaHR9O1xuICAgICAgZmxleDogYXV0bztcbiAgICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgICByZXNpemU6IG5vbmU7XG4gICAgYCxcbiAgXTtcbiAgcmV0dXJuIGJhc2VTdHlsZXM7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0VGV4dGFyZWFTdHlsZXMgfTtcbiJdfQ== */")];
|
|
154
145
|
return baseStyles;
|
|
155
146
|
};
|
|
156
147
|
|
|
@@ -264,6 +255,6 @@ const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
|
|
|
264
255
|
var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
|
|
265
256
|
|
|
266
257
|
// NOTE: This string will be replaced on build time with the package version.
|
|
267
|
-
var version = "
|
|
258
|
+
var version = "18.0.0";
|
|
268
259
|
|
|
269
260
|
export { LocalizedInputToggle$1 as LocalizedInputToggle, MultilineInput$1 as MultilineInput, accessibleHiddenInputStyles$1 as accessibleHiddenInputStyles, getInputStyles, messages$1 as messagesLocalizedInput, messages as messagesMultilineInput, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/input-utils",
|
|
3
3
|
"description": "Utilities for working with input components.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "18.0.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": "
|
|
25
|
-
"@commercetools-uikit/flat-button": "
|
|
26
|
-
"@commercetools-uikit/icons": "
|
|
27
|
-
"@commercetools-uikit/utils": "
|
|
24
|
+
"@commercetools-uikit/design-system": "18.0.0",
|
|
25
|
+
"@commercetools-uikit/flat-button": "18.0.0",
|
|
26
|
+
"@commercetools-uikit/icons": "18.0.0",
|
|
27
|
+
"@commercetools-uikit/utils": "18.0.0",
|
|
28
28
|
"@emotion/react": "^11.10.5",
|
|
29
29
|
"prop-types": "15.8.1",
|
|
30
30
|
"react-textarea-autosize": "8.4.0"
|