@commercetools-uikit/localized-multiline-text-input 12.2.1 → 12.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +0 -1
  2. package/dist/commercetools-uikit-localized-multiline-text-input.cjs.dev.js +221 -181
  3. package/dist/commercetools-uikit-localized-multiline-text-input.cjs.prod.js +166 -134
  4. package/dist/commercetools-uikit-localized-multiline-text-input.esm.js +174 -134
  5. package/package.json +25 -22
package/dist/commercetools-uikit-localized-multiline-text-input.cjs.prod.js CHANGED
@@ -10,14 +10,13 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
10
10
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
11
11
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
12
12
  require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
13
- var _extends = require('@babel/runtime-corejs3/helpers/extends');
14
13
  var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
15
14
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
16
15
  var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
17
16
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
18
17
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
19
18
  require('@babel/runtime-corejs3/core-js-stable/instance/concat');
20
- var React = require('react');
19
+ var react$1 = require('react');
21
20
  require('prop-types');
22
21
  require('react-required-if');
23
22
  require('common-tags');
@@ -34,6 +33,7 @@ var icons = require('@commercetools-uikit/icons');
34
33
  var utils = require('@commercetools-uikit/utils');
35
34
  var designSystem = require('@commercetools-uikit/design-system');
36
35
  var Text = require('@commercetools-uikit/text');
36
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
37
37
  var messages = require('@commercetools-uikit/messages');
38
38
 
39
39
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -48,21 +48,20 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
48
48
  var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
49
49
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
50
50
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
51
- var React__default = /*#__PURE__*/_interopDefault(React);
52
51
  var Stack__default = /*#__PURE__*/_interopDefault(Stack);
53
52
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
54
53
  var _styled__default = /*#__PURE__*/_interopDefault(_styled);
55
54
  var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
56
55
  var Text__default = /*#__PURE__*/_interopDefault(Text);
57
56
 
58
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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; }
57
+ function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
59
58
 
60
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _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; }
59
+ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
61
60
  // * a disabled-field currently does not display warning/error-states so it takes precedence
62
61
  // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
63
62
  // how you can interact with the field is controlled separately by the props, this only influences visuals
64
63
 
65
- var _ref = {
64
+ var _ref$2 = {
66
65
  name: "d3v9zr",
67
66
  styles: "overflow:hidden"
68
67
  } ;
@@ -73,38 +72,42 @@ var _ref2 = {
73
72
  } ;
74
73
 
75
74
  var getTextareaStyles = function getTextareaStyles(props) {
76
- var baseStyles = [_ref2, props.isCollapsed && _ref];
75
+ var baseStyles = [_ref2, props.isCollapsed && _ref$2];
77
76
  return baseStyles;
78
77
  };
79
78
 
80
79
  var getLanguageLabelStyles = function getLanguageLabelStyles(props, theme) {
81
- var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
80
+ var overwrittenVars = _objectSpread$3(_objectSpread$3({}, designSystem.customProperties), theme);
82
81
 
83
- return /*#__PURE__*/react.css("flex:1 0 auto;color:", overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled], ";line-height:calc(", designSystem.customProperties.sizeHeightInput, " - 2 * ", designSystem.customProperties.borderRadius1, ");background-color:", overwrittenVars[designSystem.designTokens.backgroundColorForInputWhenDisabled], ";border-top-left-radius:", overwrittenVars[designSystem.designTokens.borderRadiusForInput], ";border-bottom-left-radius:", overwrittenVars[designSystem.designTokens.borderRadiusForInput], ";border:1px ", overwrittenVars[designSystem.designTokens.borderColorForInputWhenDisabled], " solid;padding:0 ", designSystem.customProperties.spacingS, ";transition:border-color ", designSystem.customProperties.transitionStandard, ",background-color ", designSystem.customProperties.transitionStandard, ",color ", designSystem.customProperties.transitionStandard, ";border-right:0;box-shadow:none;appearance:none;" + ("" ));
82
+ return /*#__PURE__*/react.css("flex:1 0 auto;color:", overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled], ";line-height:calc(", designSystem.customProperties.sizeHeightInput, " - 2 * ", designSystem.customProperties.borderRadius1, ");background-color:", overwrittenVars[designSystem.designTokens.backgroundColorForInputWhenDisabled], ";border-top-left-radius:", overwrittenVars[designSystem.designTokens.borderRadiusForInput], ";border-bottom-left-radius:", overwrittenVars[designSystem.designTokens.borderRadiusForInput], ";border:1px ", overwrittenVars[designSystem.designTokens.borderColorForInputWhenDisabled], " solid;padding:0 ", designSystem.customProperties.spacingS, ";transition:border-color ", designSystem.customProperties.transitionStandard, ",background-color ", designSystem.customProperties.transitionStandard, ",color ", designSystem.customProperties.transitionStandard, ";border-right:0;box-shadow:none;appearance:none;" + ("" ), "" );
84
83
  };
85
84
 
86
- var ToggleButtonWrapper = _styled__default['default']("div", {
85
+ var ToggleButtonWrapper = _styled__default["default"]("div", {
87
86
  target: "ed3jgad0"
88
87
  } )({
89
88
  name: "ejz79s",
90
89
  styles: "flex:0;display:flex"
91
90
  } );
92
91
 
93
- var LeftColumn = _styled__default['default']("div", {
92
+ function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
93
+
94
+ function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
95
+
96
+ var LeftColumn = _styled__default["default"]("div", {
94
97
  target: "ecub1e22"
95
98
  } )({
96
99
  name: "82a6rk",
97
100
  styles: "flex:1"
98
101
  } );
99
102
 
100
- var RightColumn = _styled__default['default']("div", {
103
+ var RightColumn = _styled__default["default"]("div", {
101
104
  target: "ecub1e21"
102
105
  } )({
103
106
  name: "1m04uhl",
104
107
  styles: "position:relative;flex:0;display:flex;align-items:flex-start"
105
108
  } );
106
109
 
107
- var Row = _styled__default['default']("div", {
110
+ var Row = _styled__default["default"]("div", {
108
111
  target: "ecub1e20"
109
112
  } )({
110
113
  name: "skgbeu",
@@ -117,16 +120,16 @@ var _ref$1 = {
117
120
  } ;
118
121
 
119
122
  var TranslationInput = function TranslationInput(props) {
120
- var _React$useState = React__default['default'].useState(TranslationInput.MIN_ROW_COUNT),
121
- _React$useState2 = _slicedToArray(_React$useState, 2),
122
- contentRowCount = _React$useState2[0],
123
- setContentRowCount = _React$useState2[1];
123
+ var _useState = react$1.useState(TranslationInput.MIN_ROW_COUNT),
124
+ _useState2 = _slicedToArray(_useState, 2),
125
+ contentRowCount = _useState2[0],
126
+ setContentRowCount = _useState2[1];
124
127
 
125
- var handleHeightChange = React__default['default'].useCallback(function (_, rowCount) {
128
+ var handleHeightChange = react$1.useCallback(function (_, rowCount) {
126
129
  setContentRowCount(rowCount);
127
130
  }, [setContentRowCount]);
128
131
  var onChange = props.onChange;
129
- var handleChange = React__default['default'].useCallback(function (event) {
132
+ var handleChange = react$1.useCallback(function (event) {
130
133
  // We manipulate the event to add the language to the target.
131
134
  // That way the users of LocalizedTextInput's onChange can read
132
135
  // event.target.language and event.target.value to determine the next value.
@@ -144,7 +147,7 @@ var TranslationInput = function TranslationInput(props) {
144
147
  }, [onChange, props.language]);
145
148
  var onFocus = props.onFocus,
146
149
  onToggle = props.onToggle;
147
- var handleFocus = React__default['default'].useCallback(function () {
150
+ var handleFocus = react$1.useCallback(function () {
148
151
  // Expand the input on focus
149
152
  if (props.isCollapsed) onToggle();
150
153
  if (onFocus) onFocus();
@@ -163,57 +166,74 @@ var TranslationInput = function TranslationInput(props) {
163
166
  */
164
167
  !props.isCollapsed && contentExceedsShownRows && !props.hasLanguagesControl || props.error || props.warning;
165
168
  var theme = react.useTheme();
166
- return react.jsx(Stack__default['default'], {
167
- scale: "xs"
168
- }, react.jsx("div", {
169
- key: props.language,
170
- css: _ref$1
171
- }, react.jsx("label", {
172
- htmlFor: props.id,
173
- css: getLanguageLabelStyles(props, theme)
174
- }, react.jsx(Text__default['default'].Detail, {
175
- tone: "secondary"
176
- }, props.language.toUpperCase())), react.jsx(inputUtils.MultilineInput, _extends({
177
- theme: theme,
178
- id: props.id,
179
- name: props.name,
180
- autoComplete: props.autoComplete,
181
- value: props.value,
182
- onChange: handleChange,
183
- onHeightChange: handleHeightChange,
184
- onBlur: props.onBlur,
185
- onFocus: handleFocus,
186
- isDisabled: props.isDisabled,
187
- placeholder: props.placeholder,
188
- css: getTextareaStyles(props),
189
- hasError: props.hasError,
190
- hasWarning: props.hasWarning,
191
- isReadOnly: props.isReadOnly,
192
- isAutofocussed: props.isAutofocussed,
193
- isOpen: !props.isCollapsed
194
- }, utils.filterDataAttributes(props)))), react.jsx(Row // NOTE: applying this style withing the `styled` component results in the production
195
- // bundle to apply the style in the wrong order.
196
- // For instance, we need to override the marging of the spacing component, which also
197
- // uses `!important`.
198
- // Anyway, apparently by passing the style as a `css` prop to the `styled` component
199
- // does the trick.
200
- // TODO: revisit the logic and the implementation to maybe avoid having to apply this style.
201
- , {
202
- css: /*#__PURE__*/react.css("margin-top:", shouldToggleButtonTakeSpace ? 'inherit' : '0px !important', ";" + ("" ))
203
- }, function () {
204
- if (props.error) return react.jsx(LeftColumn, null, react.jsx("div", null, props.error));
205
- if (props.warning) return react.jsx(LeftColumn, null, react.jsx("div", null, props.warning));
206
- return null;
207
- }(), !props.isCollapsed && contentExceedsShownRows && react.jsx(React__default['default'].Fragment, null, react.jsx(LeftColumn, null), react.jsx(RightColumn, null, react.jsx(ToggleButtonWrapper, {
208
- css: [!shouldToggleButtonTakeSpace && /*#__PURE__*/react.css("position:absolute;top:0;right:0;margin-top:", designSystem.customProperties.spacingXs, ";" + ("" )), "" ]
209
- }, react.jsx(FlatButton__default['default'], {
210
- onClick: props.onToggle,
211
- isDisabled: props.isDisabled,
212
- label: props.intl.formatMessage(inputUtils.messagesMultilineInput.collapse),
213
- icon: react.jsx(icons.AngleUpIcon, {
214
- size: "small"
215
- })
216
- }))))));
169
+ return jsxRuntime.jsxs(Stack__default["default"], {
170
+ scale: "xs",
171
+ children: [jsxRuntime.jsxs("div", {
172
+ css: _ref$1,
173
+ children: [jsxRuntime.jsx("label", {
174
+ htmlFor: props.id,
175
+ css: getLanguageLabelStyles(props, theme),
176
+ children: jsxRuntime.jsx(Text__default["default"].Detail, {
177
+ tone: "secondary",
178
+ children: props.language.toUpperCase()
179
+ })
180
+ }), jsxRuntime.jsx(inputUtils.MultilineInput, _objectSpread$2({
181
+ theme: theme,
182
+ id: props.id,
183
+ name: props.name,
184
+ autoComplete: props.autoComplete,
185
+ value: props.value,
186
+ onChange: handleChange,
187
+ onHeightChange: handleHeightChange,
188
+ onBlur: props.onBlur,
189
+ onFocus: handleFocus,
190
+ isDisabled: props.isDisabled,
191
+ placeholder: props.placeholder,
192
+ css: getTextareaStyles(props),
193
+ hasError: props.hasError,
194
+ hasWarning: props.hasWarning,
195
+ isReadOnly: props.isReadOnly,
196
+ isAutofocussed: props.isAutofocussed,
197
+ isOpen: !props.isCollapsed
198
+ }, utils.filterDataAttributes(props)))]
199
+ }, props.language), jsxRuntime.jsxs(Row // NOTE: applying this style withing the `styled` component results in the production
200
+ // bundle to apply the style in the wrong order.
201
+ // For instance, we need to override the marging of the spacing component, which also
202
+ // uses `!important`.
203
+ // Anyway, apparently by passing the style as a `css` prop to the `styled` component
204
+ // does the trick.
205
+ // TODO: revisit the logic and the implementation to maybe avoid having to apply this style.
206
+ , {
207
+ css: /*#__PURE__*/react.css("margin-top:", shouldToggleButtonTakeSpace ? 'inherit' : '0px !important', ";" + ("" ), "" ),
208
+ children: [function () {
209
+ if (props.error) return jsxRuntime.jsx(LeftColumn, {
210
+ children: jsxRuntime.jsx("div", {
211
+ children: props.error
212
+ })
213
+ });
214
+ if (props.warning) return jsxRuntime.jsx(LeftColumn, {
215
+ children: jsxRuntime.jsx("div", {
216
+ children: props.warning
217
+ })
218
+ });
219
+ return null;
220
+ }(), !props.isCollapsed && contentExceedsShownRows && jsxRuntime.jsxs(jsxRuntime.Fragment, {
221
+ children: [jsxRuntime.jsx(LeftColumn, {}), jsxRuntime.jsx(RightColumn, {
222
+ children: jsxRuntime.jsx(ToggleButtonWrapper, {
223
+ css: [!shouldToggleButtonTakeSpace && /*#__PURE__*/react.css("position:absolute;top:0;right:0;margin-top:", designSystem.customProperties.spacingXs, ";" + ("" ), "" ), "" , "" ],
224
+ children: jsxRuntime.jsx(FlatButton__default["default"], {
225
+ onClick: props.onToggle,
226
+ isDisabled: props.isDisabled,
227
+ label: props.intl.formatMessage(inputUtils.messagesMultilineInput.collapse),
228
+ icon: jsxRuntime.jsx(icons.AngleUpIcon, {
229
+ size: "small"
230
+ })
231
+ })
232
+ })
233
+ })]
234
+ })]
235
+ })]
236
+ });
217
237
  };
218
238
 
219
239
  TranslationInput.displayName = 'TranslationInput';
@@ -222,28 +242,36 @@ TranslationInput.propTypes = {}; // The minimum ammount of rows the MultilineTex
222
242
  // so that the input "collapses".
223
243
 
224
244
  TranslationInput.MIN_ROW_COUNT = 1;
245
+ var TranslationInput$1 = TranslationInput;
246
+
247
+ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
248
+
249
+ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
225
250
 
226
251
  var RequiredValueErrorMessage = function RequiredValueErrorMessage() {
227
- return react.jsx(messages.ErrorMessage, null, react.jsx(reactIntl.FormattedMessage, inputUtils.messagesLocalizedInput.missingRequiredField));
252
+ return jsxRuntime.jsx(messages.ErrorMessage, {
253
+ children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, inputUtils.messagesLocalizedInput.missingRequiredField))
254
+ });
228
255
  };
229
256
 
230
257
  RequiredValueErrorMessage.displayName = 'RequiredValueErrorMessage';
258
+ var RequiredValueErrorMessage$1 = RequiredValueErrorMessage;
231
259
 
232
- function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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; }
260
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
233
261
 
234
- function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$1(Object(source), true)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context5; _forEachInstanceProperty__default['default'](_context5 = ownKeys$1(Object(source))).call(_context5, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
262
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), true)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context5; _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
235
263
 
236
264
  var expandedTranslationsReducer = function expandedTranslationsReducer(state, action) {
237
265
  switch (action.type) {
238
266
  case 'toggle':
239
- return _objectSpread$1(_objectSpread$1({}, state), {}, _defineProperty({}, action.payload, !state[action.payload]));
267
+ return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, action.payload, !state[action.payload]));
240
268
 
241
269
  case 'toggleAll':
242
270
  {
243
271
  var _context;
244
272
 
245
- var newState = _reduceInstanceProperty__default['default'](_context = _Object$keys__default['default'](state)).call(_context, function (translations, locale) {
246
- return _objectSpread$1(_defineProperty({}, locale, true), translations);
273
+ var newState = _reduceInstanceProperty__default["default"](_context = _Object$keys__default["default"](state)).call(_context, function (translations, locale) {
274
+ return _objectSpread(_defineProperty({}, locale, true), translations);
247
275
  }, {});
248
276
 
249
277
  return newState;
@@ -260,7 +288,7 @@ var expandedTranslationsReducer = function expandedTranslationsReducer(state, ac
260
288
  // languages.
261
289
 
262
290
 
263
- var _ref$2 = {
291
+ var _ref = {
264
292
  name: "xyzkeb",
265
293
  styles: "align-self:flex-start"
266
294
  } ;
@@ -270,14 +298,14 @@ var LocalizedMultilineTextInput = function LocalizedMultilineTextInput(props) {
270
298
 
271
299
  var intl = reactIntl.useIntl();
272
300
 
273
- var initialExpandedTranslationsState = _reduceInstanceProperty__default['default'](_context2 = _Object$keys__default['default'](props.value)).call(_context2, function (translations, locale) {
274
- return _objectSpread$1(_defineProperty({}, locale, Boolean(props.defaultExpandMultilineText)), translations);
301
+ var initialExpandedTranslationsState = _reduceInstanceProperty__default["default"](_context2 = _Object$keys__default["default"](props.value)).call(_context2, function (translations, locale) {
302
+ return _objectSpread(_defineProperty({}, locale, Boolean(props.defaultExpandMultilineText)), translations);
275
303
  }, {});
276
304
 
277
- var _React$useReducer = React__default['default'].useReducer(expandedTranslationsReducer, initialExpandedTranslationsState),
278
- _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
279
- expandedTranslationsState = _React$useReducer2[0],
280
- expandedTranslationsDispatch = _React$useReducer2[1];
305
+ var _useReducer = react$1.useReducer(expandedTranslationsReducer, initialExpandedTranslationsState),
306
+ _useReducer2 = _slicedToArray(_useReducer, 2),
307
+ expandedTranslationsState = _useReducer2[0],
308
+ expandedTranslationsDispatch = _useReducer2[1];
281
309
 
282
310
  var defaultExpansionState = props.hideLanguageExpansionControls || props.defaultExpandLanguages || // useToggleState's default is `true`, but we want `false`
283
311
  false;
@@ -287,13 +315,13 @@ var LocalizedMultilineTextInput = function LocalizedMultilineTextInput(props) {
287
315
  areLanguagesOpened = _useToggleState2[0],
288
316
  toggleLanguages = _useToggleState2[1];
289
317
 
290
- var toggleLanguage = React__default['default'].useCallback(function (language) {
318
+ var toggleLanguage = react$1.useCallback(function (language) {
291
319
  expandedTranslationsDispatch({
292
320
  type: 'toggle',
293
321
  payload: language
294
322
  });
295
323
  }, [expandedTranslationsDispatch]);
296
- var languages = localizedUtils.sortLanguages(props.selectedLanguage, _Object$keys__default['default'](props.value));
324
+ var languages = localizedUtils.sortLanguages(props.selectedLanguage, _Object$keys__default["default"](props.value));
297
325
  var hasErrorInRemainingLanguages = props.hasError || localizedUtils.getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);
298
326
  var hasWarningInRemainingLanguages = props.hasWarning || localizedUtils.getHasWarningOnRemainingLanguages(props.warnings, props.selectedLanguage);
299
327
 
@@ -306,54 +334,57 @@ var LocalizedMultilineTextInput = function LocalizedMultilineTextInput(props) {
306
334
  }
307
335
 
308
336
  var shouldRenderLanguagesButton = languages.length > 1 && !props.hideLanguageExpansionControls;
309
- return react.jsx(Constraints__default['default'].Horizontal, {
310
- max: props.horizontalConstraint
311
- }, react.jsx(Stack__default['default'], {
312
- scale: "xs"
313
- }, react.jsx(Stack__default['default'], {
314
- scale: "s"
315
- }, _mapInstanceProperty__default['default'](languages).call(languages, function (language, index) {
316
- var isFirstLanguage = index === 0;
317
- if (!isFirstLanguage && !areLanguagesOpened) return null;
318
- var isLastLanguage = index === languages.length - 1;
319
- var hasLanguagesControl = isFirstLanguage && !areLanguagesOpened || isLastLanguage;
320
- return react.jsx(TranslationInput, _extends({
321
- key: language,
322
- autoComplete: props.autoComplete,
323
- id: LocalizedMultilineTextInput.getId(props.id, language),
324
- name: LocalizedMultilineTextInput.getName(props.name, language),
325
- value: props.value[language],
326
- onChange: props.onChange,
327
- language: language,
328
- isCollapsed: !expandedTranslationsState[language],
329
- onToggle: function onToggle() {
330
- return toggleLanguage(language);
331
- },
332
- placeholder: props.placeholder ? props.placeholder[language] : undefined,
333
- onBlur: props.onBlur,
334
- onFocus: props.onFocus,
335
- isAutofocussed: index === 0 && props.isAutofocussed,
336
- isDisabled: props.isDisabled,
337
- isReadOnly: props.isReadOnly,
338
- hasError: Boolean(props.hasError || props.errors && props.errors[language]),
339
- hasWarning: Boolean(props.hasWarning || props.warnings && props.warnings[language]),
340
- intl: intl,
341
- warning: props.warnings && props.warnings[language],
342
- error: props.errors && props.errors[language],
343
- hasLanguagesControl: hasLanguagesControl
344
- }, localizedUtils.createLocalizedDataAttributes(props, language)));
345
- })), shouldRenderLanguagesButton && react.jsx("div", {
346
- css: _ref$2
347
- }, react.jsx(inputUtils.LocalizedInputToggle, {
348
- isOpen: areLanguagesOpened,
349
- onClick: toggleLanguages,
350
- isDisabled: areLanguagesOpened && Boolean(hasErrorInRemainingLanguages || hasWarningInRemainingLanguages),
351
- remainingLocalizations: languages.length - 1
352
- }))));
337
+ return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
338
+ max: props.horizontalConstraint,
339
+ children: jsxRuntime.jsxs(Stack__default["default"], {
340
+ scale: "xs",
341
+ children: [jsxRuntime.jsx(Stack__default["default"], {
342
+ scale: "s",
343
+ children: _mapInstanceProperty__default["default"](languages).call(languages, function (language, index) {
344
+ var isFirstLanguage = index === 0;
345
+ if (!isFirstLanguage && !areLanguagesOpened) return null;
346
+ var isLastLanguage = index === languages.length - 1;
347
+ var hasLanguagesControl = isFirstLanguage && !areLanguagesOpened || isLastLanguage;
348
+ return jsxRuntime.jsx(TranslationInput$1, _objectSpread({
349
+ autoComplete: props.autoComplete,
350
+ id: LocalizedMultilineTextInput.getId(props.id, language),
351
+ name: LocalizedMultilineTextInput.getName(props.name, language),
352
+ value: props.value[language],
353
+ onChange: props.onChange,
354
+ language: language,
355
+ isCollapsed: !expandedTranslationsState[language],
356
+ onToggle: function onToggle() {
357
+ return toggleLanguage(language);
358
+ },
359
+ placeholder: props.placeholder ? props.placeholder[language] : undefined,
360
+ onBlur: props.onBlur,
361
+ onFocus: props.onFocus,
362
+ isAutofocussed: index === 0 && props.isAutofocussed,
363
+ isDisabled: props.isDisabled,
364
+ isReadOnly: props.isReadOnly,
365
+ hasError: Boolean(props.hasError || props.errors && props.errors[language]),
366
+ hasWarning: Boolean(props.hasWarning || props.warnings && props.warnings[language]),
367
+ intl: intl,
368
+ warning: props.warnings && props.warnings[language],
369
+ error: props.errors && props.errors[language],
370
+ hasLanguagesControl: hasLanguagesControl
371
+ }, localizedUtils.createLocalizedDataAttributes(props, language)), language);
372
+ })
373
+ }), shouldRenderLanguagesButton && jsxRuntime.jsx("div", {
374
+ css: _ref,
375
+ children: jsxRuntime.jsx(inputUtils.LocalizedInputToggle, {
376
+ isOpen: areLanguagesOpened,
377
+ onClick: toggleLanguages,
378
+ isDisabled: areLanguagesOpened && Boolean(hasErrorInRemainingLanguages || hasWarningInRemainingLanguages),
379
+ remainingLocalizations: languages.length - 1
380
+ })
381
+ })]
382
+ })
383
+ });
353
384
  };
354
385
 
355
386
  LocalizedMultilineTextInput.displayName = 'LocalizedMultilineTextInput';
356
- LocalizedMultilineTextInput.RequiredValueErrorMessage = RequiredValueErrorMessage;
387
+ LocalizedMultilineTextInput.RequiredValueErrorMessage = RequiredValueErrorMessage$1;
357
388
  LocalizedMultilineTextInput.propTypes = {};
358
389
  LocalizedMultilineTextInput.getId = localizedUtils.getId;
359
390
  LocalizedMultilineTextInput.getName = localizedUtils.getName;
@@ -364,9 +395,10 @@ LocalizedMultilineTextInput.createLocalizedString = localizedUtils.createLocaliz
364
395
  LocalizedMultilineTextInput.isEmpty = localizedUtils.isEmpty;
365
396
  LocalizedMultilineTextInput.omitEmptyTranslations = localizedUtils.omitEmptyTranslations;
366
397
  LocalizedMultilineTextInput.isTouched = localizedUtils.isTouched;
398
+ var LocalizedMultilineTextInput$1 = LocalizedMultilineTextInput;
367
399
 
368
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
369
- var version = '12.2.1';
400
+ // NOTE: This string will be replaced on build time with the package version.
401
+ var version = "12.2.5";
370
402
 
371
- exports.default = LocalizedMultilineTextInput;
403
+ exports["default"] = LocalizedMultilineTextInput$1;
372
404
  exports.version = version;