@commercetools-uikit/localized-text-input 15.14.3 → 15.15.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.
- package/dist/commercetools-uikit-localized-text-input.cjs.d.ts +1 -0
- package/dist/commercetools-uikit-localized-text-input.cjs.d.ts.map +1 -0
- package/dist/commercetools-uikit-localized-text-input.cjs.dev.js +37 -35
- package/dist/commercetools-uikit-localized-text-input.cjs.prod.js +36 -34
- package/dist/commercetools-uikit-localized-text-input.esm.js +37 -35
- package/package.json +13 -13
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"commercetools-uikit-localized-text-input.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
|
|
@@ -52,7 +52,7 @@ var _ref$1 = process.env.NODE_ENV === "production" ? {
|
|
|
52
52
|
} : {
|
|
53
53
|
name: "bqcila-getLocalizedInputStyles",
|
|
54
54
|
styles: "border-top-left-radius:0;border-bottom-left-radius:0;border-style:solid;flex:auto;label:getLocalizedInputStyles;",
|
|
55
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
55
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvY2FsaXplZC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTSyIsImZpbGUiOiJsb2NhbGl6ZWQtdGV4dC1pbnB1dC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB0eXBlIHsgVExvY2FsaXplZElucHV0UHJvcHMgfSBmcm9tICcuL2xvY2FsaXplZC10ZXh0LWlucHV0JztcblxuLy8gTk9URTogb3JkZXIgaXMgaW1wb3J0YW50IGhlcmVcbi8vICogYSBkaXNhYmxlZC1maWVsZCBjdXJyZW50bHkgZG9lcyBub3QgZGlzcGxheSB3YXJuaW5nL2Vycm9yLXN0YXRlcyBzbyBpdCB0YWtlcyBwcmVjZWRlbmNlXG4vLyAqIGEgcmVhZG9ubHktZmllbGQgY2Fubm90IGJlIGNoYW5nZWQsIGJ1dCBpdCBtaWdodCBiZSByZWxldmFudCBmb3IgdmFsaWRhdGlvbiwgc28gZXJyb3IgYW5kIHdhcm5pbmcgYXJlIGNoZWNrZWQgZmlyc3Rcbi8vIGhvdyB5b3UgY2FuIGludGVyYWN0IHdpdGggdGhlIGZpZWxkIGlzIGNvbnRyb2xsZWQgc2VwYXJhdGVseSBieSB0aGUgcHJvcHMsIHRoaXMgb25seSBpbmZsdWVuY2VzIHZpc3VhbHNcbmNvbnN0IGdldExvY2FsaXplZElucHV0U3R5bGVzID0gKCkgPT4gW1xuICBjc3NgXG4gICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogMDtcbiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAwO1xuICAgIGJvcmRlci1zdHlsZTogc29saWQ7XG4gICAgZmxleDogYXV0bztcbiAgYCxcbl07XG5cbmNvbnN0IGdldExhbmd1YWdlTGFiZWxCYWNrZ3JvdW5kQ29sb3IgPSAocHJvcHM6IFRMb2NhbGl6ZWRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JMb2NhbGl6ZWRJbnB1dExhYmVsV2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JMb2NhbGl6ZWRJbnB1dExhYmVsV2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9yTG9jYWxpemVkSW5wdXRMYWJlbDtcbn07XG5cbmNvbnN0IGdldExhbmd1YWdlTGFiZWxCb3JkZXJDb2xvciA9IChwcm9wczogVExvY2FsaXplZElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgcmV0dXJuIHByb3BzLmlzUmVhZE9ubHlcbiAgICA/IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvckxvY2FsaXplZElucHV0TGFiZWxXaGVuUmVhZG9ubHlcbiAgICA6IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvckxvY2FsaXplZElucHV0TGFiZWw7XG59O1xuXG5jb25zdCBnZXRMYW5ndWFnZUxhYmVsU3R5bGVzID0gKFxuICBwcm9wczogVExvY2FsaXplZElucHV0UHJvcHMgJiB7IGlzTmV3VGhlbWU6IGJvb2xlYW4gfVxuKSA9PiB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIC8qIGF2b2lkIHdyYXBwaW5nIGxhYmVsIG9udG8gbmV3IGxpbmVzICovXG4gICAgZmxleDogMSAwIGF1dG87XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBjb2xvcjogJHtkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yTG9jYWxpemVkSW5wdXRMYWJlbH07XG4gICAgY3Vyc29yOiAke3Byb3BzLmlzRGlzYWJsZWQgPyAnbm90LWFsbG93ZWQnIDogJ2RlZmF1bHQnfTtcbiAgICBoZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmhlaWdodEZvcklucHV0fTtcbiAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplRm9yTG9jYWxpemVkSW5wdXRMYWJlbH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRMYW5ndWFnZUxhYmVsQmFja2dyb3VuZENvbG9yKHByb3BzKX07XG4gICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICAgIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2dldExhbmd1YWdlTGFiZWxCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnBhZGRpbmdGb3JMb2NhbGl6ZWRJbnB1dExhYmVsfTtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGJhY2tncm91bmQtY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG4gICAgYm9yZGVyLXJpZ2h0OiAwO1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgYDtcbn07XG5cbmV4cG9ydCB7IGdldExvY2FsaXplZElucHV0U3R5bGVzLCBnZXRMYW5ndWFnZUxhYmVsU3R5bGVzIH07XG4iXX0= */",
|
|
56
56
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
|
|
57
57
|
};
|
|
58
58
|
|
|
@@ -60,11 +60,9 @@ var _ref$1 = process.env.NODE_ENV === "production" ? {
|
|
|
60
60
|
// * a disabled-field currently does not display warning/error-states so it takes precedence
|
|
61
61
|
// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
|
|
62
62
|
// how you can interact with the field is controlled separately by the props, this only influences visuals
|
|
63
|
-
|
|
64
|
-
return [_ref$1];
|
|
65
|
-
};
|
|
63
|
+
const getLocalizedInputStyles = () => [_ref$1];
|
|
66
64
|
|
|
67
|
-
|
|
65
|
+
const getLanguageLabelBackgroundColor = props => {
|
|
68
66
|
if (props.isDisabled) {
|
|
69
67
|
return designSystem.designTokens.backgroundColorForLocalizedInputLabelWhenDisabled;
|
|
70
68
|
}
|
|
@@ -76,8 +74,16 @@ var getLanguageLabelBackgroundColor = function getLanguageLabelBackgroundColor(p
|
|
|
76
74
|
return designSystem.designTokens.backgroundColorForLocalizedInputLabel;
|
|
77
75
|
};
|
|
78
76
|
|
|
79
|
-
|
|
80
|
-
|
|
77
|
+
const getLanguageLabelBorderColor = props => {
|
|
78
|
+
if (props.isDisabled) {
|
|
79
|
+
return designSystem.designTokens.borderColorForInputWhenDisabled;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return props.isReadOnly ? designSystem.designTokens.borderColorForLocalizedInputLabelWhenReadonly : designSystem.designTokens.borderColorForLocalizedInputLabel;
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const getLanguageLabelStyles = props => {
|
|
86
|
+
return /*#__PURE__*/react.css("display:flex;flex-direction:column;justify-content:center;flex:1 0 auto;box-sizing:border-box;color:", designSystem.designTokens.fontColorForLocalizedInputLabel, ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";height:", designSystem.designTokens.heightForInput, ";font-size:", designSystem.designTokens.fontSizeForLocalizedInputLabel, ";background-color:", getLanguageLabelBackgroundColor(props), ";border-top-left-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-left-radius:", designSystem.designTokens.borderRadiusForInput, ";border:1px solid ", getLanguageLabelBorderColor(props), ";padding:", designSystem.designTokens.paddingForLocalizedInputLabel, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ",color ", designSystem.designTokens.transitionStandard, ";border-right:0;box-shadow:none;appearance:none;" + (process.env.NODE_ENV === "production" ? "" : ";label:getLanguageLabelStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvY2FsaXplZC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q1kiLCJmaWxlIjoibG9jYWxpemVkLXRleHQtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRMb2NhbGl6ZWRJbnB1dFByb3BzIH0gZnJvbSAnLi9sb2NhbGl6ZWQtdGV4dC1pbnB1dCc7XG5cbi8vIE5PVEU6IG9yZGVyIGlzIGltcG9ydGFudCBoZXJlXG4vLyAqIGEgZGlzYWJsZWQtZmllbGQgY3VycmVudGx5IGRvZXMgbm90IGRpc3BsYXkgd2FybmluZy9lcnJvci1zdGF0ZXMgc28gaXQgdGFrZXMgcHJlY2VkZW5jZVxuLy8gKiBhIHJlYWRvbmx5LWZpZWxkIGNhbm5vdCBiZSBjaGFuZ2VkLCBidXQgaXQgbWlnaHQgYmUgcmVsZXZhbnQgZm9yIHZhbGlkYXRpb24sIHNvIGVycm9yIGFuZCB3YXJuaW5nIGFyZSBjaGVja2VkIGZpcnN0XG4vLyBob3cgeW91IGNhbiBpbnRlcmFjdCB3aXRoIHRoZSBmaWVsZCBpcyBjb250cm9sbGVkIHNlcGFyYXRlbHkgYnkgdGhlIHByb3BzLCB0aGlzIG9ubHkgaW5mbHVlbmNlcyB2aXN1YWxzXG5jb25zdCBnZXRMb2NhbGl6ZWRJbnB1dFN0eWxlcyA9ICgpID0+IFtcbiAgY3NzYFxuICAgIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDA7XG4gICAgYm9yZGVyLWJvdHRvbS1sZWZ0LXJhZGl1czogMDtcbiAgICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICAgIGZsZXg6IGF1dG87XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRMYW5ndWFnZUxhYmVsQmFja2dyb3VuZENvbG9yID0gKHByb3BzOiBUTG9jYWxpemVkSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9yTG9jYWxpemVkSW5wdXRMYWJlbFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9yTG9jYWxpemVkSW5wdXRMYWJlbFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvckxvY2FsaXplZElucHV0TGFiZWw7XG59O1xuXG5jb25zdCBnZXRMYW5ndWFnZUxhYmVsQm9yZGVyQ29sb3IgPSAocHJvcHM6IFRMb2NhbGl6ZWRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIHJldHVybiBwcm9wcy5pc1JlYWRPbmx5XG4gICAgPyBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JMb2NhbGl6ZWRJbnB1dExhYmVsV2hlblJlYWRvbmx5XG4gICAgOiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JMb2NhbGl6ZWRJbnB1dExhYmVsO1xufTtcblxuY29uc3QgZ2V0TGFuZ3VhZ2VMYWJlbFN0eWxlcyA9IChcbiAgcHJvcHM6IFRMb2NhbGl6ZWRJbnB1dFByb3BzICYgeyBpc05ld1RoZW1lOiBib29sZWFuIH1cbikgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAvKiBhdm9pZCB3cmFwcGluZyBsYWJlbCBvbnRvIG5ldyBsaW5lcyAqL1xuICAgIGZsZXg6IDEgMCBhdXRvO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvckxvY2FsaXplZElucHV0TGFiZWx9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5pc0Rpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdkZWZhdWx0J307XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgZm9udC1zaXplOiAke2Rlc2lnblRva2Vucy5mb250U2l6ZUZvckxvY2FsaXplZElucHV0TGFiZWx9O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0TGFuZ3VhZ2VMYWJlbEJhY2tncm91bmRDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXNGb3JJbnB1dH07XG4gICAgYm9yZGVyOiAxcHggc29saWQgJHtnZXRMYW5ndWFnZUxhYmVsQm9yZGVyQ29sb3IocHJvcHMpfTtcbiAgICBwYWRkaW5nOiAke2Rlc2lnblRva2Vucy5wYWRkaW5nRm9yTG9jYWxpemVkSW5wdXRMYWJlbH07XG4gICAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBjb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICAgIGJvcmRlci1yaWdodDogMDtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGA7XG59O1xuXG5leHBvcnQgeyBnZXRMb2NhbGl6ZWRJbnB1dFN0eWxlcywgZ2V0TGFuZ3VhZ2VMYWJlbFN0eWxlcyB9O1xuIl19 */");
|
|
81
87
|
};
|
|
82
88
|
|
|
83
89
|
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; }
|
|
@@ -85,7 +91,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
|
|
|
85
91
|
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; }
|
|
86
92
|
|
|
87
93
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
88
|
-
|
|
94
|
+
const sequentialId = utils.createSequentialId('localized-text-input-');
|
|
89
95
|
|
|
90
96
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
91
97
|
name: "1ktetz7",
|
|
@@ -97,13 +103,13 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
97
103
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
98
104
|
};
|
|
99
105
|
|
|
100
|
-
|
|
101
|
-
|
|
106
|
+
const LocalizedInput = props => {
|
|
107
|
+
const onChange = props.onChange;
|
|
102
108
|
|
|
103
|
-
|
|
104
|
-
|
|
109
|
+
const _useTheme = designSystem.useTheme(),
|
|
110
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
105
111
|
|
|
106
|
-
|
|
112
|
+
const handleChange = react$1.useCallback(event => {
|
|
107
113
|
// We manipulate the event to add the language to the target.
|
|
108
114
|
// That way the users of LocalizedTextInput's onChange can read
|
|
109
115
|
// event.target.language and event.target.value to determine the next value.
|
|
@@ -128,7 +134,7 @@ var LocalizedInput = function LocalizedInput(props) {
|
|
|
128
134
|
children: [jsxRuntime.jsx("label", {
|
|
129
135
|
htmlFor: props.id,
|
|
130
136
|
css: getLanguageLabelStyles(_objectSpread(_objectSpread({}, props), {}, {
|
|
131
|
-
isNewTheme
|
|
137
|
+
isNewTheme
|
|
132
138
|
})),
|
|
133
139
|
children: props.language.toUpperCase()
|
|
134
140
|
}), jsxRuntime.jsx(TextInput__default["default"], _objectSpread(_objectSpread({}, props), {}, {
|
|
@@ -155,29 +161,25 @@ LocalizedInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
155
161
|
} : {};
|
|
156
162
|
LocalizedInput.displayName = 'LocalizedInput';
|
|
157
163
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
});
|
|
162
|
-
};
|
|
164
|
+
const RequiredValueErrorMessage = () => jsxRuntime.jsx(messages.ErrorMessage, {
|
|
165
|
+
children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, inputUtils.messagesLocalizedInput.missingRequiredField))
|
|
166
|
+
});
|
|
163
167
|
|
|
164
168
|
RequiredValueErrorMessage.displayName = 'RequiredValueErrorMessage';
|
|
165
169
|
|
|
166
|
-
|
|
167
|
-
|
|
170
|
+
const LocalizedTextInput = props => {
|
|
171
|
+
const defaultExpansionState = props.hideLanguageExpansionControls || props.defaultExpandLanguages || // default to `false`, because useToggleState defaults to `true`
|
|
168
172
|
false;
|
|
169
173
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
+
const _useToggleState = hooks.useToggleState(defaultExpansionState),
|
|
175
|
+
_useToggleState2 = _slicedToArray(_useToggleState, 2),
|
|
176
|
+
areLanguagesExpanded = _useToggleState2[0],
|
|
177
|
+
toggleLanguages = _useToggleState2[1];
|
|
174
178
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
var id = hooks.useFieldId(props.id, sequentialId);
|
|
180
|
-
var hasErrorInRemainingLanguages = props.hasError || localizedUtils.getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);
|
|
179
|
+
const onLocalizedInputToggle = react$1.useCallback(() => toggleLanguages(), [toggleLanguages]);
|
|
180
|
+
const languages = localizedUtils.sortLanguages(props.selectedLanguage, _Object$keys__default["default"](props.value));
|
|
181
|
+
const id = hooks.useFieldId(props.id, sequentialId);
|
|
182
|
+
const hasErrorInRemainingLanguages = props.hasError || localizedUtils.getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);
|
|
181
183
|
|
|
182
184
|
if (hasErrorInRemainingLanguages) {
|
|
183
185
|
// this update within render replaces the old `getDerivedStateFromProps` functionality
|
|
@@ -187,7 +189,7 @@ var LocalizedTextInput = function LocalizedTextInput(props) {
|
|
|
187
189
|
}
|
|
188
190
|
}
|
|
189
191
|
|
|
190
|
-
|
|
192
|
+
const shouldRenderLanguagesButton = languages.length > 1 && !props.hideLanguageExpansionControls;
|
|
191
193
|
|
|
192
194
|
if (!props.isReadOnly) {
|
|
193
195
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'LocalizedTextInput: "onChange" is required when isReadOnly is not true') : void 0;
|
|
@@ -202,8 +204,8 @@ var LocalizedTextInput = function LocalizedTextInput(props) {
|
|
|
202
204
|
children: jsxRuntime.jsxs(Stack__default["default"], {
|
|
203
205
|
scale: "xs",
|
|
204
206
|
children: [jsxRuntime.jsx(Stack__default["default"], {
|
|
205
|
-
children: _mapInstanceProperty__default["default"](languages).call(languages,
|
|
206
|
-
|
|
207
|
+
children: _mapInstanceProperty__default["default"](languages).call(languages, (language, index) => {
|
|
208
|
+
const isFirstLanguage = index === 0;
|
|
207
209
|
if (!isFirstLanguage && !areLanguagesExpanded) return null;
|
|
208
210
|
return jsxRuntime.jsx("div", {
|
|
209
211
|
children: jsxRuntime.jsxs(Stack__default["default"], {
|
|
@@ -275,7 +277,7 @@ LocalizedTextInput.isTouched = localizedUtils.isTouched;
|
|
|
275
277
|
var LocalizedTextInput$1 = LocalizedTextInput;
|
|
276
278
|
|
|
277
279
|
// NOTE: This string will be replaced on build time with the package version.
|
|
278
|
-
var version = "15.
|
|
280
|
+
var version = "15.15.1";
|
|
279
281
|
|
|
280
282
|
exports["default"] = LocalizedTextInput$1;
|
|
281
283
|
exports.version = version;
|
|
@@ -52,11 +52,9 @@ var _ref$1 = {
|
|
|
52
52
|
// * a disabled-field currently does not display warning/error-states so it takes precedence
|
|
53
53
|
// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
|
|
54
54
|
// how you can interact with the field is controlled separately by the props, this only influences visuals
|
|
55
|
-
|
|
56
|
-
return [_ref$1];
|
|
57
|
-
};
|
|
55
|
+
const getLocalizedInputStyles = () => [_ref$1];
|
|
58
56
|
|
|
59
|
-
|
|
57
|
+
const getLanguageLabelBackgroundColor = props => {
|
|
60
58
|
if (props.isDisabled) {
|
|
61
59
|
return designSystem.designTokens.backgroundColorForLocalizedInputLabelWhenDisabled;
|
|
62
60
|
}
|
|
@@ -68,27 +66,35 @@ var getLanguageLabelBackgroundColor = function getLanguageLabelBackgroundColor(p
|
|
|
68
66
|
return designSystem.designTokens.backgroundColorForLocalizedInputLabel;
|
|
69
67
|
};
|
|
70
68
|
|
|
71
|
-
|
|
72
|
-
|
|
69
|
+
const getLanguageLabelBorderColor = props => {
|
|
70
|
+
if (props.isDisabled) {
|
|
71
|
+
return designSystem.designTokens.borderColorForInputWhenDisabled;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
return props.isReadOnly ? designSystem.designTokens.borderColorForLocalizedInputLabelWhenReadonly : designSystem.designTokens.borderColorForLocalizedInputLabel;
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
const getLanguageLabelStyles = props => {
|
|
78
|
+
return /*#__PURE__*/react.css("display:flex;flex-direction:column;justify-content:center;flex:1 0 auto;box-sizing:border-box;color:", designSystem.designTokens.fontColorForLocalizedInputLabel, ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";height:", designSystem.designTokens.heightForInput, ";font-size:", designSystem.designTokens.fontSizeForLocalizedInputLabel, ";background-color:", getLanguageLabelBackgroundColor(props), ";border-top-left-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-left-radius:", designSystem.designTokens.borderRadiusForInput, ";border:1px solid ", getLanguageLabelBorderColor(props), ";padding:", designSystem.designTokens.paddingForLocalizedInputLabel, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ",color ", designSystem.designTokens.transitionStandard, ";border-right:0;box-shadow:none;appearance:none;" + ("" ), "" );
|
|
73
79
|
};
|
|
74
80
|
|
|
75
81
|
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; }
|
|
76
82
|
|
|
77
83
|
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; }
|
|
78
|
-
|
|
84
|
+
const sequentialId = utils.createSequentialId('localized-text-input-');
|
|
79
85
|
|
|
80
86
|
var _ref = {
|
|
81
87
|
name: "1ktetz7",
|
|
82
88
|
styles: "width:100%;position:relative;display:flex"
|
|
83
89
|
} ;
|
|
84
90
|
|
|
85
|
-
|
|
86
|
-
|
|
91
|
+
const LocalizedInput = props => {
|
|
92
|
+
const onChange = props.onChange;
|
|
87
93
|
|
|
88
|
-
|
|
89
|
-
|
|
94
|
+
const _useTheme = designSystem.useTheme(),
|
|
95
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
90
96
|
|
|
91
|
-
|
|
97
|
+
const handleChange = react$1.useCallback(event => {
|
|
92
98
|
// We manipulate the event to add the language to the target.
|
|
93
99
|
// That way the users of LocalizedTextInput's onChange can read
|
|
94
100
|
// event.target.language and event.target.value to determine the next value.
|
|
@@ -111,7 +117,7 @@ var LocalizedInput = function LocalizedInput(props) {
|
|
|
111
117
|
children: [jsxRuntime.jsx("label", {
|
|
112
118
|
htmlFor: props.id,
|
|
113
119
|
css: getLanguageLabelStyles(_objectSpread(_objectSpread({}, props), {}, {
|
|
114
|
-
isNewTheme
|
|
120
|
+
isNewTheme
|
|
115
121
|
})),
|
|
116
122
|
children: props.language.toUpperCase()
|
|
117
123
|
}), jsxRuntime.jsx(TextInput__default["default"], _objectSpread(_objectSpread({}, props), {}, {
|
|
@@ -124,29 +130,25 @@ var LocalizedInput = function LocalizedInput(props) {
|
|
|
124
130
|
LocalizedInput.propTypes = {};
|
|
125
131
|
LocalizedInput.displayName = 'LocalizedInput';
|
|
126
132
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
});
|
|
131
|
-
};
|
|
133
|
+
const RequiredValueErrorMessage = () => jsxRuntime.jsx(messages.ErrorMessage, {
|
|
134
|
+
children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, inputUtils.messagesLocalizedInput.missingRequiredField))
|
|
135
|
+
});
|
|
132
136
|
|
|
133
137
|
RequiredValueErrorMessage.displayName = 'RequiredValueErrorMessage';
|
|
134
138
|
|
|
135
|
-
|
|
136
|
-
|
|
139
|
+
const LocalizedTextInput = props => {
|
|
140
|
+
const defaultExpansionState = props.hideLanguageExpansionControls || props.defaultExpandLanguages || // default to `false`, because useToggleState defaults to `true`
|
|
137
141
|
false;
|
|
138
142
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
+
const _useToggleState = hooks.useToggleState(defaultExpansionState),
|
|
144
|
+
_useToggleState2 = _slicedToArray(_useToggleState, 2),
|
|
145
|
+
areLanguagesExpanded = _useToggleState2[0],
|
|
146
|
+
toggleLanguages = _useToggleState2[1];
|
|
143
147
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
var id = hooks.useFieldId(props.id, sequentialId);
|
|
149
|
-
var hasErrorInRemainingLanguages = props.hasError || localizedUtils.getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);
|
|
148
|
+
const onLocalizedInputToggle = react$1.useCallback(() => toggleLanguages(), [toggleLanguages]);
|
|
149
|
+
const languages = localizedUtils.sortLanguages(props.selectedLanguage, _Object$keys__default["default"](props.value));
|
|
150
|
+
const id = hooks.useFieldId(props.id, sequentialId);
|
|
151
|
+
const hasErrorInRemainingLanguages = props.hasError || localizedUtils.getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);
|
|
150
152
|
|
|
151
153
|
if (hasErrorInRemainingLanguages) {
|
|
152
154
|
// this update within render replaces the old `getDerivedStateFromProps` functionality
|
|
@@ -156,7 +158,7 @@ var LocalizedTextInput = function LocalizedTextInput(props) {
|
|
|
156
158
|
}
|
|
157
159
|
}
|
|
158
160
|
|
|
159
|
-
|
|
161
|
+
const shouldRenderLanguagesButton = languages.length > 1 && !props.hideLanguageExpansionControls;
|
|
160
162
|
|
|
161
163
|
if (!props.isReadOnly) ;
|
|
162
164
|
|
|
@@ -167,8 +169,8 @@ var LocalizedTextInput = function LocalizedTextInput(props) {
|
|
|
167
169
|
children: jsxRuntime.jsxs(Stack__default["default"], {
|
|
168
170
|
scale: "xs",
|
|
169
171
|
children: [jsxRuntime.jsx(Stack__default["default"], {
|
|
170
|
-
children: _mapInstanceProperty__default["default"](languages).call(languages,
|
|
171
|
-
|
|
172
|
+
children: _mapInstanceProperty__default["default"](languages).call(languages, (language, index) => {
|
|
173
|
+
const isFirstLanguage = index === 0;
|
|
172
174
|
if (!isFirstLanguage && !areLanguagesExpanded) return null;
|
|
173
175
|
return jsxRuntime.jsx("div", {
|
|
174
176
|
children: jsxRuntime.jsxs(Stack__default["default"], {
|
|
@@ -220,7 +222,7 @@ LocalizedTextInput.isTouched = localizedUtils.isTouched;
|
|
|
220
222
|
var LocalizedTextInput$1 = LocalizedTextInput;
|
|
221
223
|
|
|
222
224
|
// NOTE: This string will be replaced on build time with the package version.
|
|
223
|
-
var version = "15.
|
|
225
|
+
var version = "15.15.1";
|
|
224
226
|
|
|
225
227
|
exports["default"] = LocalizedTextInput$1;
|
|
226
228
|
exports.version = version;
|
|
@@ -32,7 +32,7 @@ var _ref$1 = process.env.NODE_ENV === "production" ? {
|
|
|
32
32
|
} : {
|
|
33
33
|
name: "bqcila-getLocalizedInputStyles",
|
|
34
34
|
styles: "border-top-left-radius:0;border-bottom-left-radius:0;border-style:solid;flex:auto;label:getLocalizedInputStyles;",
|
|
35
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
35
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvY2FsaXplZC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTSyIsImZpbGUiOiJsb2NhbGl6ZWQtdGV4dC1pbnB1dC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB0eXBlIHsgVExvY2FsaXplZElucHV0UHJvcHMgfSBmcm9tICcuL2xvY2FsaXplZC10ZXh0LWlucHV0JztcblxuLy8gTk9URTogb3JkZXIgaXMgaW1wb3J0YW50IGhlcmVcbi8vICogYSBkaXNhYmxlZC1maWVsZCBjdXJyZW50bHkgZG9lcyBub3QgZGlzcGxheSB3YXJuaW5nL2Vycm9yLXN0YXRlcyBzbyBpdCB0YWtlcyBwcmVjZWRlbmNlXG4vLyAqIGEgcmVhZG9ubHktZmllbGQgY2Fubm90IGJlIGNoYW5nZWQsIGJ1dCBpdCBtaWdodCBiZSByZWxldmFudCBmb3IgdmFsaWRhdGlvbiwgc28gZXJyb3IgYW5kIHdhcm5pbmcgYXJlIGNoZWNrZWQgZmlyc3Rcbi8vIGhvdyB5b3UgY2FuIGludGVyYWN0IHdpdGggdGhlIGZpZWxkIGlzIGNvbnRyb2xsZWQgc2VwYXJhdGVseSBieSB0aGUgcHJvcHMsIHRoaXMgb25seSBpbmZsdWVuY2VzIHZpc3VhbHNcbmNvbnN0IGdldExvY2FsaXplZElucHV0U3R5bGVzID0gKCkgPT4gW1xuICBjc3NgXG4gICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogMDtcbiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAwO1xuICAgIGJvcmRlci1zdHlsZTogc29saWQ7XG4gICAgZmxleDogYXV0bztcbiAgYCxcbl07XG5cbmNvbnN0IGdldExhbmd1YWdlTGFiZWxCYWNrZ3JvdW5kQ29sb3IgPSAocHJvcHM6IFRMb2NhbGl6ZWRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JMb2NhbGl6ZWRJbnB1dExhYmVsV2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JMb2NhbGl6ZWRJbnB1dExhYmVsV2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9yTG9jYWxpemVkSW5wdXRMYWJlbDtcbn07XG5cbmNvbnN0IGdldExhbmd1YWdlTGFiZWxCb3JkZXJDb2xvciA9IChwcm9wczogVExvY2FsaXplZElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgcmV0dXJuIHByb3BzLmlzUmVhZE9ubHlcbiAgICA/IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvckxvY2FsaXplZElucHV0TGFiZWxXaGVuUmVhZG9ubHlcbiAgICA6IGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvckxvY2FsaXplZElucHV0TGFiZWw7XG59O1xuXG5jb25zdCBnZXRMYW5ndWFnZUxhYmVsU3R5bGVzID0gKFxuICBwcm9wczogVExvY2FsaXplZElucHV0UHJvcHMgJiB7IGlzTmV3VGhlbWU6IGJvb2xlYW4gfVxuKSA9PiB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIC8qIGF2b2lkIHdyYXBwaW5nIGxhYmVsIG9udG8gbmV3IGxpbmVzICovXG4gICAgZmxleDogMSAwIGF1dG87XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBjb2xvcjogJHtkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yTG9jYWxpemVkSW5wdXRMYWJlbH07XG4gICAgY3Vyc29yOiAke3Byb3BzLmlzRGlzYWJsZWQgPyAnbm90LWFsbG93ZWQnIDogJ2RlZmF1bHQnfTtcbiAgICBoZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmhlaWdodEZvcklucHV0fTtcbiAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplRm9yTG9jYWxpemVkSW5wdXRMYWJlbH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRMYW5ndWFnZUxhYmVsQmFja2dyb3VuZENvbG9yKHByb3BzKX07XG4gICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzRm9ySW5wdXR9O1xuICAgIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2dldExhbmd1YWdlTGFiZWxCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnBhZGRpbmdGb3JMb2NhbGl6ZWRJbnB1dExhYmVsfTtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGJhY2tncm91bmQtY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH07XG4gICAgYm9yZGVyLXJpZ2h0OiAwO1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgYDtcbn07XG5cbmV4cG9ydCB7IGdldExvY2FsaXplZElucHV0U3R5bGVzLCBnZXRMYW5ndWFnZUxhYmVsU3R5bGVzIH07XG4iXX0= */",
|
|
36
36
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
|
|
37
37
|
};
|
|
38
38
|
|
|
@@ -40,11 +40,9 @@ var _ref$1 = process.env.NODE_ENV === "production" ? {
|
|
|
40
40
|
// * a disabled-field currently does not display warning/error-states so it takes precedence
|
|
41
41
|
// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
|
|
42
42
|
// how you can interact with the field is controlled separately by the props, this only influences visuals
|
|
43
|
-
|
|
44
|
-
return [_ref$1];
|
|
45
|
-
};
|
|
43
|
+
const getLocalizedInputStyles = () => [_ref$1];
|
|
46
44
|
|
|
47
|
-
|
|
45
|
+
const getLanguageLabelBackgroundColor = props => {
|
|
48
46
|
if (props.isDisabled) {
|
|
49
47
|
return designTokens.backgroundColorForLocalizedInputLabelWhenDisabled;
|
|
50
48
|
}
|
|
@@ -56,8 +54,16 @@ var getLanguageLabelBackgroundColor = function getLanguageLabelBackgroundColor(p
|
|
|
56
54
|
return designTokens.backgroundColorForLocalizedInputLabel;
|
|
57
55
|
};
|
|
58
56
|
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
const getLanguageLabelBorderColor = props => {
|
|
58
|
+
if (props.isDisabled) {
|
|
59
|
+
return designTokens.borderColorForInputWhenDisabled;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return props.isReadOnly ? designTokens.borderColorForLocalizedInputLabelWhenReadonly : designTokens.borderColorForLocalizedInputLabel;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const getLanguageLabelStyles = props => {
|
|
66
|
+
return /*#__PURE__*/css("display:flex;flex-direction:column;justify-content:center;flex:1 0 auto;box-sizing:border-box;color:", designTokens.fontColorForLocalizedInputLabel, ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";height:", designTokens.heightForInput, ";font-size:", designTokens.fontSizeForLocalizedInputLabel, ";background-color:", getLanguageLabelBackgroundColor(props), ";border-top-left-radius:", designTokens.borderRadiusForInput, ";border-bottom-left-radius:", designTokens.borderRadiusForInput, ";border:1px solid ", getLanguageLabelBorderColor(props), ";padding:", designTokens.paddingForLocalizedInputLabel, ";transition:border-color ", designTokens.transitionStandard, ",background-color ", designTokens.transitionStandard, ",color ", designTokens.transitionStandard, ";border-right:0;box-shadow:none;appearance:none;" + (process.env.NODE_ENV === "production" ? "" : ";label:getLanguageLabelStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvY2FsaXplZC10ZXh0LWlucHV0LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q1kiLCJmaWxlIjoibG9jYWxpemVkLXRleHQtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRMb2NhbGl6ZWRJbnB1dFByb3BzIH0gZnJvbSAnLi9sb2NhbGl6ZWQtdGV4dC1pbnB1dCc7XG5cbi8vIE5PVEU6IG9yZGVyIGlzIGltcG9ydGFudCBoZXJlXG4vLyAqIGEgZGlzYWJsZWQtZmllbGQgY3VycmVudGx5IGRvZXMgbm90IGRpc3BsYXkgd2FybmluZy9lcnJvci1zdGF0ZXMgc28gaXQgdGFrZXMgcHJlY2VkZW5jZVxuLy8gKiBhIHJlYWRvbmx5LWZpZWxkIGNhbm5vdCBiZSBjaGFuZ2VkLCBidXQgaXQgbWlnaHQgYmUgcmVsZXZhbnQgZm9yIHZhbGlkYXRpb24sIHNvIGVycm9yIGFuZCB3YXJuaW5nIGFyZSBjaGVja2VkIGZpcnN0XG4vLyBob3cgeW91IGNhbiBpbnRlcmFjdCB3aXRoIHRoZSBmaWVsZCBpcyBjb250cm9sbGVkIHNlcGFyYXRlbHkgYnkgdGhlIHByb3BzLCB0aGlzIG9ubHkgaW5mbHVlbmNlcyB2aXN1YWxzXG5jb25zdCBnZXRMb2NhbGl6ZWRJbnB1dFN0eWxlcyA9ICgpID0+IFtcbiAgY3NzYFxuICAgIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDA7XG4gICAgYm9yZGVyLWJvdHRvbS1sZWZ0LXJhZGl1czogMDtcbiAgICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICAgIGZsZXg6IGF1dG87XG4gIGAsXG5dO1xuXG5jb25zdCBnZXRMYW5ndWFnZUxhYmVsQmFja2dyb3VuZENvbG9yID0gKHByb3BzOiBUTG9jYWxpemVkSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9yTG9jYWxpemVkSW5wdXRMYWJlbFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9yTG9jYWxpemVkSW5wdXRMYWJlbFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvckxvY2FsaXplZElucHV0TGFiZWw7XG59O1xuXG5jb25zdCBnZXRMYW5ndWFnZUxhYmVsQm9yZGVyQ29sb3IgPSAocHJvcHM6IFRMb2NhbGl6ZWRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIHJldHVybiBwcm9wcy5pc1JlYWRPbmx5XG4gICAgPyBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JMb2NhbGl6ZWRJbnB1dExhYmVsV2hlblJlYWRvbmx5XG4gICAgOiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JMb2NhbGl6ZWRJbnB1dExhYmVsO1xufTtcblxuY29uc3QgZ2V0TGFuZ3VhZ2VMYWJlbFN0eWxlcyA9IChcbiAgcHJvcHM6IFRMb2NhbGl6ZWRJbnB1dFByb3BzICYgeyBpc05ld1RoZW1lOiBib29sZWFuIH1cbikgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAvKiBhdm9pZCB3cmFwcGluZyBsYWJlbCBvbnRvIG5ldyBsaW5lcyAqL1xuICAgIGZsZXg6IDEgMCBhdXRvO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvckxvY2FsaXplZElucHV0TGFiZWx9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5pc0Rpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdkZWZhdWx0J307XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgZm9udC1zaXplOiAke2Rlc2lnblRva2Vucy5mb250U2l6ZUZvckxvY2FsaXplZElucHV0TGFiZWx9O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0TGFuZ3VhZ2VMYWJlbEJhY2tncm91bmRDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXNGb3JJbnB1dH07XG4gICAgYm9yZGVyOiAxcHggc29saWQgJHtnZXRMYW5ndWFnZUxhYmVsQm9yZGVyQ29sb3IocHJvcHMpfTtcbiAgICBwYWRkaW5nOiAke2Rlc2lnblRva2Vucy5wYWRkaW5nRm9yTG9jYWxpemVkSW5wdXRMYWJlbH07XG4gICAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBjb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICAgIGJvcmRlci1yaWdodDogMDtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGA7XG59O1xuXG5leHBvcnQgeyBnZXRMb2NhbGl6ZWRJbnB1dFN0eWxlcywgZ2V0TGFuZ3VhZ2VMYWJlbFN0eWxlcyB9O1xuIl19 */");
|
|
61
67
|
};
|
|
62
68
|
|
|
63
69
|
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; }
|
|
@@ -65,7 +71,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
|
|
|
65
71
|
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; }
|
|
66
72
|
|
|
67
73
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
68
|
-
|
|
74
|
+
const sequentialId = createSequentialId('localized-text-input-');
|
|
69
75
|
|
|
70
76
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
71
77
|
name: "1ktetz7",
|
|
@@ -77,13 +83,13 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
77
83
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
78
84
|
};
|
|
79
85
|
|
|
80
|
-
|
|
81
|
-
|
|
86
|
+
const LocalizedInput = props => {
|
|
87
|
+
const onChange = props.onChange;
|
|
82
88
|
|
|
83
|
-
|
|
84
|
-
|
|
89
|
+
const _useTheme = useTheme(),
|
|
90
|
+
isNewTheme = _useTheme.isNewTheme;
|
|
85
91
|
|
|
86
|
-
|
|
92
|
+
const handleChange = useCallback(event => {
|
|
87
93
|
// We manipulate the event to add the language to the target.
|
|
88
94
|
// That way the users of LocalizedTextInput's onChange can read
|
|
89
95
|
// event.target.language and event.target.value to determine the next value.
|
|
@@ -108,7 +114,7 @@ var LocalizedInput = function LocalizedInput(props) {
|
|
|
108
114
|
children: [jsx("label", {
|
|
109
115
|
htmlFor: props.id,
|
|
110
116
|
css: getLanguageLabelStyles(_objectSpread(_objectSpread({}, props), {}, {
|
|
111
|
-
isNewTheme
|
|
117
|
+
isNewTheme
|
|
112
118
|
})),
|
|
113
119
|
children: props.language.toUpperCase()
|
|
114
120
|
}), jsx(TextInput, _objectSpread(_objectSpread({}, props), {}, {
|
|
@@ -135,29 +141,25 @@ LocalizedInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
135
141
|
} : {};
|
|
136
142
|
LocalizedInput.displayName = 'LocalizedInput';
|
|
137
143
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
});
|
|
142
|
-
};
|
|
144
|
+
const RequiredValueErrorMessage = () => jsx(ErrorMessage, {
|
|
145
|
+
children: jsx(FormattedMessage, _objectSpread({}, messagesLocalizedInput.missingRequiredField))
|
|
146
|
+
});
|
|
143
147
|
|
|
144
148
|
RequiredValueErrorMessage.displayName = 'RequiredValueErrorMessage';
|
|
145
149
|
|
|
146
|
-
|
|
147
|
-
|
|
150
|
+
const LocalizedTextInput = props => {
|
|
151
|
+
const defaultExpansionState = props.hideLanguageExpansionControls || props.defaultExpandLanguages || // default to `false`, because useToggleState defaults to `true`
|
|
148
152
|
false;
|
|
149
153
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
+
const _useToggleState = useToggleState(defaultExpansionState),
|
|
155
|
+
_useToggleState2 = _slicedToArray(_useToggleState, 2),
|
|
156
|
+
areLanguagesExpanded = _useToggleState2[0],
|
|
157
|
+
toggleLanguages = _useToggleState2[1];
|
|
154
158
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
var id = useFieldId(props.id, sequentialId);
|
|
160
|
-
var hasErrorInRemainingLanguages = props.hasError || getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);
|
|
159
|
+
const onLocalizedInputToggle = useCallback(() => toggleLanguages(), [toggleLanguages]);
|
|
160
|
+
const languages = sortLanguages(props.selectedLanguage, _Object$keys(props.value));
|
|
161
|
+
const id = useFieldId(props.id, sequentialId);
|
|
162
|
+
const hasErrorInRemainingLanguages = props.hasError || getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);
|
|
161
163
|
|
|
162
164
|
if (hasErrorInRemainingLanguages) {
|
|
163
165
|
// this update within render replaces the old `getDerivedStateFromProps` functionality
|
|
@@ -167,7 +169,7 @@ var LocalizedTextInput = function LocalizedTextInput(props) {
|
|
|
167
169
|
}
|
|
168
170
|
}
|
|
169
171
|
|
|
170
|
-
|
|
172
|
+
const shouldRenderLanguagesButton = languages.length > 1 && !props.hideLanguageExpansionControls;
|
|
171
173
|
|
|
172
174
|
if (!props.isReadOnly) {
|
|
173
175
|
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'LocalizedTextInput: "onChange" is required when isReadOnly is not true') : void 0;
|
|
@@ -182,8 +184,8 @@ var LocalizedTextInput = function LocalizedTextInput(props) {
|
|
|
182
184
|
children: jsxs(Stack, {
|
|
183
185
|
scale: "xs",
|
|
184
186
|
children: [jsx(Stack, {
|
|
185
|
-
children: _mapInstanceProperty(languages).call(languages,
|
|
186
|
-
|
|
187
|
+
children: _mapInstanceProperty(languages).call(languages, (language, index) => {
|
|
188
|
+
const isFirstLanguage = index === 0;
|
|
187
189
|
if (!isFirstLanguage && !areLanguagesExpanded) return null;
|
|
188
190
|
return jsx("div", {
|
|
189
191
|
children: jsxs(Stack, {
|
|
@@ -255,6 +257,6 @@ LocalizedTextInput.isTouched = isTouched;
|
|
|
255
257
|
var LocalizedTextInput$1 = LocalizedTextInput;
|
|
256
258
|
|
|
257
259
|
// NOTE: This string will be replaced on build time with the package version.
|
|
258
|
-
var version = "15.
|
|
260
|
+
var version = "15.15.1";
|
|
259
261
|
|
|
260
262
|
export { LocalizedTextInput$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/localized-text-input",
|
|
3
3
|
"description": "A controlled text input component for localized single-line strings with validation states.",
|
|
4
|
-
"version": "15.
|
|
4
|
+
"version": "15.15.1",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,18 +21,18 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "15.
|
|
25
|
-
"@commercetools-uikit/design-system": "15.
|
|
26
|
-
"@commercetools-uikit/flat-button": "15.
|
|
27
|
-
"@commercetools-uikit/hooks": "15.
|
|
28
|
-
"@commercetools-uikit/icons": "15.
|
|
29
|
-
"@commercetools-uikit/input-utils": "15.
|
|
30
|
-
"@commercetools-uikit/localized-utils": "15.
|
|
31
|
-
"@commercetools-uikit/messages": "15.
|
|
32
|
-
"@commercetools-uikit/spacings-stack": "15.
|
|
33
|
-
"@commercetools-uikit/text": "15.
|
|
34
|
-
"@commercetools-uikit/text-input": "15.
|
|
35
|
-
"@commercetools-uikit/utils": "15.
|
|
24
|
+
"@commercetools-uikit/constraints": "15.15.1",
|
|
25
|
+
"@commercetools-uikit/design-system": "15.15.1",
|
|
26
|
+
"@commercetools-uikit/flat-button": "15.15.1",
|
|
27
|
+
"@commercetools-uikit/hooks": "15.15.1",
|
|
28
|
+
"@commercetools-uikit/icons": "15.15.1",
|
|
29
|
+
"@commercetools-uikit/input-utils": "15.15.1",
|
|
30
|
+
"@commercetools-uikit/localized-utils": "15.15.1",
|
|
31
|
+
"@commercetools-uikit/messages": "15.15.1",
|
|
32
|
+
"@commercetools-uikit/spacings-stack": "15.15.1",
|
|
33
|
+
"@commercetools-uikit/text": "15.15.1",
|
|
34
|
+
"@commercetools-uikit/text-input": "15.15.1",
|
|
35
|
+
"@commercetools-uikit/utils": "15.15.1",
|
|
36
36
|
"@emotion/react": "^11.10.5",
|
|
37
37
|
"@emotion/styled": "^11.10.5",
|
|
38
38
|
"prop-types": "15.8.1"
|