@commercetools-uikit/localized-rich-text-input 19.11.0 → 19.12.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.
Files changed (4) hide show
  1. package/dist/commercetools-uikit-localized-rich-text-input.cjs.dev.js +14 -22
  2. package/dist/commercetools-uikit-localized-rich-text-input.cjs.prod.js +14 -22
  3. package/dist/commercetools-uikit-localized-rich-text-input.esm.js +14 -21
  4. package/package.json +16 -16
package/dist/commercetools-uikit-localized-rich-text-input.cjs.dev.js CHANGED
@@ -12,7 +12,6 @@ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
12
12
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
13
13
  var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
14
14
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
15
- var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
16
15
  var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
17
16
  var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
18
17
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
@@ -57,7 +56,6 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
57
56
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
58
57
  var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
59
58
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
60
- var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
61
59
  var _Map__default = /*#__PURE__*/_interopDefault(_Map);
62
60
  var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
63
61
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
@@ -73,7 +71,7 @@ var isHotkey__default = /*#__PURE__*/_interopDefault(isHotkey);
73
71
  var pipe__default = /*#__PURE__*/_interopDefault(pipe);
74
72
 
75
73
  function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { 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)."; }
76
- const getEditorLanguageLabelBorderColor = props => "1px solid ".concat(props.isReadOnly ? designSystem.designTokens.borderColorForInputWhenReadonly : designSystem.designTokens.borderColorForInputWhenDisabled);
74
+ const getEditorLanguageLabelBorderColor = props => `1px solid ${props.isReadOnly ? designSystem.designTokens.borderColorForInputWhenReadonly : designSystem.designTokens.borderColorForInputWhenDisabled}`;
77
75
  const getBackgroundColor = props => {
78
76
  if (props.isDisabled) {
79
77
  return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -191,8 +189,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
191
189
  toggleLanguage(props.language);
192
190
  }, [toggleLanguage, props.language]);
193
191
  const updateRenderToggleButton = react.useCallback(() => {
194
- var _ref$current;
195
- const doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
192
+ const doesExceedCollapsedHeightLimit = Number(ref.current?.clientHeight) > COLLAPSED_HEIGHT;
196
193
  if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
197
194
  setRenderToggleButton(true);
198
195
  }
@@ -206,8 +203,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
206
203
 
207
204
  // resetting
208
205
  const resetValue = react.useCallback(newValue => {
209
- var _newValue$props$langu;
210
- const newStringValue = typeof newValue === 'string' ? newValue : (_newValue$props$langu = newValue === null || newValue === void 0 ? void 0 : newValue[props.language]) !== null && _newValue$props$langu !== void 0 ? _newValue$props$langu : '';
206
+ const newStringValue = typeof newValue === 'string' ? newValue : newValue?.[props.language] ?? '';
211
207
  richTextUtils.resetEditor(editor, newStringValue);
212
208
  }, [editor, props.language]);
213
209
  /*
@@ -285,8 +281,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
285
281
  autoFocus: props.isAutofocused,
286
282
  onBlur: props.onBlur,
287
283
  onFocus: event => {
288
- var _props$onFocus;
289
- (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
284
+ props.onFocus?.(event);
290
285
  // opens the input if it regains focus and it's closed
291
286
  if (!isOpen) {
292
287
  toggle();
@@ -369,7 +364,6 @@ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _
369
364
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
370
365
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
371
366
  let RichTextInput = /*#__PURE__*/function (_PureComponent) {
372
- _inherits(RichTextInput, _PureComponent);
373
367
  function RichTextInput() {
374
368
  var _this;
375
369
  _classCallCheck(this, RichTextInput);
@@ -395,8 +389,7 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
395
389
  // the consumer only cares about the serializedValue, so it doesn't make sense to call
396
390
  // onChange unless this value changes.
397
391
  if (hasSerializedValueChanged) {
398
- var _this$props$onChange, _this$props;
399
- (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props, richTextUtils.html.serialize(state));
392
+ _this.props.onChange?.(richTextUtils.html.serialize(state));
400
393
  }
401
394
  if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
402
395
  // this way we force update if cursor or selection changes
@@ -405,7 +398,8 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
405
398
  };
406
399
  return _this;
407
400
  }
408
- _createClass(RichTextInput, [{
401
+ _inherits(RichTextInput, _PureComponent);
402
+ return _createClass(RichTextInput, [{
409
403
  key: "componentDidUpdate",
410
404
  value: function componentDidUpdate() {
411
405
  if (this.props.value !== this.serializedValue) {
@@ -449,7 +443,6 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
449
443
  }));
450
444
  }
451
445
  }]);
452
- return RichTextInput;
453
446
  }(react.PureComponent);
454
447
  RichTextInput.defaultProps = {
455
448
  defaultExpandMultilineText: false,
@@ -485,7 +478,7 @@ RequiredValueErrorMessage.displayName = 'RequiredValueErrorMessage';
485
478
  var RequiredValueErrorMessage$1 = RequiredValueErrorMessage;
486
479
 
487
480
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
488
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
481
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
489
482
  const defaultProps = {
490
483
  horizontalConstraint: 'scale',
491
484
  showExpandIcon: false
@@ -547,11 +540,10 @@ const LocalizedRichTextInput = /*#__PURE__*/react.forwardRef((props, ref) => {
547
540
  });
548
541
  }, [expandedTranslationsDispatch]);
549
542
  const createChangeHandler = react.useCallback(language => state => {
550
- var _props$onChange, _context3, _context4;
551
- (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, {
543
+ props.onChange?.({
552
544
  target: {
553
- id: props !== null && props !== void 0 && props.id ? _concatInstanceProperty__default["default"](_context3 = "".concat(props.id, ".")).call(_context3, language) : '',
554
- name: props !== null && props !== void 0 && props.name ? _concatInstanceProperty__default["default"](_context4 = "".concat(props.name, ".")).call(_context4, language) : '',
545
+ id: props?.id ? `${props.id}.${language}` : '',
546
+ name: props?.name ? `${props.name}.${language}` : '',
555
547
  language,
556
548
  value: state
557
549
  }
@@ -571,9 +563,9 @@ const LocalizedRichTextInput = /*#__PURE__*/react.forwardRef((props, ref) => {
571
563
  }
572
564
  const langRefs = react.useRef(new _Map__default["default"]());
573
565
  const resetValue = react.useCallback(newValue => {
574
- var _context5;
575
- _forEachInstanceProperty__default["default"](_context5 = langRefs.current).call(_context5, langRef => {
576
- langRef === null || langRef === void 0 || langRef.resetValue(newValue);
566
+ var _context3;
567
+ _forEachInstanceProperty__default["default"](_context3 = langRefs.current).call(_context3, langRef => {
568
+ langRef?.resetValue(newValue);
577
569
  });
578
570
  }, []);
579
571
  react.useImperativeHandle(ref, () => {
package/dist/commercetools-uikit-localized-rich-text-input.cjs.prod.js CHANGED
@@ -12,7 +12,6 @@ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
12
12
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
13
13
  var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
14
14
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
15
- var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
16
15
  var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
17
16
  var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
18
17
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
@@ -57,7 +56,6 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
57
56
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
58
57
  var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
59
58
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
60
- var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
61
59
  var _Map__default = /*#__PURE__*/_interopDefault(_Map);
62
60
  var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
63
61
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
@@ -71,7 +69,7 @@ var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
71
69
  var isHotkey__default = /*#__PURE__*/_interopDefault(isHotkey);
72
70
  var pipe__default = /*#__PURE__*/_interopDefault(pipe);
73
71
 
74
- const getEditorLanguageLabelBorderColor = props => "1px solid ".concat(props.isReadOnly ? designSystem.designTokens.borderColorForInputWhenReadonly : designSystem.designTokens.borderColorForInputWhenDisabled);
72
+ const getEditorLanguageLabelBorderColor = props => `1px solid ${props.isReadOnly ? designSystem.designTokens.borderColorForInputWhenReadonly : designSystem.designTokens.borderColorForInputWhenDisabled}`;
75
73
  const getBackgroundColor = props => {
76
74
  if (props.isDisabled) {
77
75
  return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -143,8 +141,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
143
141
  toggleLanguage(props.language);
144
142
  }, [toggleLanguage, props.language]);
145
143
  const updateRenderToggleButton = react.useCallback(() => {
146
- var _ref$current;
147
- const doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
144
+ const doesExceedCollapsedHeightLimit = Number(ref.current?.clientHeight) > COLLAPSED_HEIGHT;
148
145
  if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
149
146
  setRenderToggleButton(true);
150
147
  }
@@ -158,8 +155,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
158
155
 
159
156
  // resetting
160
157
  const resetValue = react.useCallback(newValue => {
161
- var _newValue$props$langu;
162
- const newStringValue = typeof newValue === 'string' ? newValue : (_newValue$props$langu = newValue === null || newValue === void 0 ? void 0 : newValue[props.language]) !== null && _newValue$props$langu !== void 0 ? _newValue$props$langu : '';
158
+ const newStringValue = typeof newValue === 'string' ? newValue : newValue?.[props.language] ?? '';
163
159
  richTextUtils.resetEditor(editor, newStringValue);
164
160
  }, [editor, props.language]);
165
161
  /*
@@ -237,8 +233,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
237
233
  autoFocus: props.isAutofocused,
238
234
  onBlur: props.onBlur,
239
235
  onFocus: event => {
240
- var _props$onFocus;
241
- (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
236
+ props.onFocus?.(event);
242
237
  // opens the input if it regains focus and it's closed
243
238
  if (!isOpen) {
244
239
  toggle();
@@ -321,7 +316,6 @@ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _
321
316
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
322
317
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
323
318
  let RichTextInput = /*#__PURE__*/function (_PureComponent) {
324
- _inherits(RichTextInput, _PureComponent);
325
319
  function RichTextInput() {
326
320
  var _this;
327
321
  _classCallCheck(this, RichTextInput);
@@ -347,8 +341,7 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
347
341
  // the consumer only cares about the serializedValue, so it doesn't make sense to call
348
342
  // onChange unless this value changes.
349
343
  if (hasSerializedValueChanged) {
350
- var _this$props$onChange, _this$props;
351
- (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props, richTextUtils.html.serialize(state));
344
+ _this.props.onChange?.(richTextUtils.html.serialize(state));
352
345
  }
353
346
  if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
354
347
  // this way we force update if cursor or selection changes
@@ -357,7 +350,8 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
357
350
  };
358
351
  return _this;
359
352
  }
360
- _createClass(RichTextInput, [{
353
+ _inherits(RichTextInput, _PureComponent);
354
+ return _createClass(RichTextInput, [{
361
355
  key: "componentDidUpdate",
362
356
  value: function componentDidUpdate() {
363
357
  if (this.props.value !== this.serializedValue) {
@@ -397,7 +391,6 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
397
391
  }));
398
392
  }
399
393
  }]);
400
- return RichTextInput;
401
394
  }(react.PureComponent);
402
395
  RichTextInput.defaultProps = {
403
396
  defaultExpandMultilineText: false,
@@ -420,7 +413,7 @@ RequiredValueErrorMessage.displayName = 'RequiredValueErrorMessage';
420
413
  var RequiredValueErrorMessage$1 = RequiredValueErrorMessage;
421
414
 
422
415
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
423
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
416
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
424
417
  const defaultProps = {
425
418
  horizontalConstraint: 'scale',
426
419
  showExpandIcon: false
@@ -476,11 +469,10 @@ const LocalizedRichTextInput = /*#__PURE__*/react.forwardRef((props, ref) => {
476
469
  });
477
470
  }, [expandedTranslationsDispatch]);
478
471
  const createChangeHandler = react.useCallback(language => state => {
479
- var _props$onChange, _context3, _context4;
480
- (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, {
472
+ props.onChange?.({
481
473
  target: {
482
- id: props !== null && props !== void 0 && props.id ? _concatInstanceProperty__default["default"](_context3 = "".concat(props.id, ".")).call(_context3, language) : '',
483
- name: props !== null && props !== void 0 && props.name ? _concatInstanceProperty__default["default"](_context4 = "".concat(props.name, ".")).call(_context4, language) : '',
474
+ id: props?.id ? `${props.id}.${language}` : '',
475
+ name: props?.name ? `${props.name}.${language}` : '',
484
476
  language,
485
477
  value: state
486
478
  }
@@ -500,9 +492,9 @@ const LocalizedRichTextInput = /*#__PURE__*/react.forwardRef((props, ref) => {
500
492
  }
501
493
  const langRefs = react.useRef(new _Map__default["default"]());
502
494
  const resetValue = react.useCallback(newValue => {
503
- var _context5;
504
- _forEachInstanceProperty__default["default"](_context5 = langRefs.current).call(_context5, langRef => {
505
- langRef === null || langRef === void 0 || langRef.resetValue(newValue);
495
+ var _context3;
496
+ _forEachInstanceProperty__default["default"](_context3 = langRefs.current).call(_context3, langRef => {
497
+ langRef?.resetValue(newValue);
506
498
  });
507
499
  }, []);
508
500
  react.useImperativeHandle(ref, () => {
package/dist/commercetools-uikit-localized-rich-text-input.esm.js CHANGED
@@ -8,7 +8,6 @@ import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
8
8
  import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
9
9
  import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
10
10
  import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
11
- import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
12
11
  import _Map from '@babel/runtime-corejs3/core-js-stable/map';
13
12
  import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
14
13
  import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
@@ -44,7 +43,7 @@ import pipe from 'lodash/fp/pipe';
44
43
  import { jsx, jsxs } from '@emotion/react/jsx-runtime';
45
44
 
46
45
  function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { 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)."; }
47
- const getEditorLanguageLabelBorderColor = props => "1px solid ".concat(props.isReadOnly ? designTokens.borderColorForInputWhenReadonly : designTokens.borderColorForInputWhenDisabled);
46
+ const getEditorLanguageLabelBorderColor = props => `1px solid ${props.isReadOnly ? designTokens.borderColorForInputWhenReadonly : designTokens.borderColorForInputWhenDisabled}`;
48
47
  const getBackgroundColor = props => {
49
48
  if (props.isDisabled) {
50
49
  return designTokens.backgroundColorForInputWhenDisabled;
@@ -162,8 +161,7 @@ const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
162
161
  toggleLanguage(props.language);
163
162
  }, [toggleLanguage, props.language]);
164
163
  const updateRenderToggleButton = useCallback(() => {
165
- var _ref$current;
166
- const doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
164
+ const doesExceedCollapsedHeightLimit = Number(ref.current?.clientHeight) > COLLAPSED_HEIGHT;
167
165
  if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
168
166
  setRenderToggleButton(true);
169
167
  }
@@ -177,8 +175,7 @@ const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
177
175
 
178
176
  // resetting
179
177
  const resetValue = useCallback(newValue => {
180
- var _newValue$props$langu;
181
- const newStringValue = typeof newValue === 'string' ? newValue : (_newValue$props$langu = newValue === null || newValue === void 0 ? void 0 : newValue[props.language]) !== null && _newValue$props$langu !== void 0 ? _newValue$props$langu : '';
178
+ const newStringValue = typeof newValue === 'string' ? newValue : newValue?.[props.language] ?? '';
182
179
  resetEditor(editor, newStringValue);
183
180
  }, [editor, props.language]);
184
181
  /*
@@ -256,8 +253,7 @@ const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
256
253
  autoFocus: props.isAutofocused,
257
254
  onBlur: props.onBlur,
258
255
  onFocus: event => {
259
- var _props$onFocus;
260
- (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
256
+ props.onFocus?.(event);
261
257
  // opens the input if it regains focus and it's closed
262
258
  if (!isOpen) {
263
259
  toggle();
@@ -340,7 +336,6 @@ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _
340
336
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
341
337
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
342
338
  let RichTextInput = /*#__PURE__*/function (_PureComponent) {
343
- _inherits(RichTextInput, _PureComponent);
344
339
  function RichTextInput() {
345
340
  var _this;
346
341
  _classCallCheck(this, RichTextInput);
@@ -366,8 +361,7 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
366
361
  // the consumer only cares about the serializedValue, so it doesn't make sense to call
367
362
  // onChange unless this value changes.
368
363
  if (hasSerializedValueChanged) {
369
- var _this$props$onChange, _this$props;
370
- (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props, html.serialize(state));
364
+ _this.props.onChange?.(html.serialize(state));
371
365
  }
372
366
  if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
373
367
  // this way we force update if cursor or selection changes
@@ -376,7 +370,8 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
376
370
  };
377
371
  return _this;
378
372
  }
379
- _createClass(RichTextInput, [{
373
+ _inherits(RichTextInput, _PureComponent);
374
+ return _createClass(RichTextInput, [{
380
375
  key: "componentDidUpdate",
381
376
  value: function componentDidUpdate() {
382
377
  if (this.props.value !== this.serializedValue) {
@@ -420,7 +415,6 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
420
415
  }));
421
416
  }
422
417
  }]);
423
- return RichTextInput;
424
418
  }(PureComponent);
425
419
  RichTextInput.defaultProps = {
426
420
  defaultExpandMultilineText: false,
@@ -456,7 +450,7 @@ RequiredValueErrorMessage.displayName = 'RequiredValueErrorMessage';
456
450
  var RequiredValueErrorMessage$1 = RequiredValueErrorMessage;
457
451
 
458
452
  function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
459
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
453
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
460
454
  const defaultProps = {
461
455
  horizontalConstraint: 'scale',
462
456
  showExpandIcon: false
@@ -518,11 +512,10 @@ const LocalizedRichTextInput = /*#__PURE__*/forwardRef((props, ref) => {
518
512
  });
519
513
  }, [expandedTranslationsDispatch]);
520
514
  const createChangeHandler = useCallback(language => state => {
521
- var _props$onChange, _context3, _context4;
522
- (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, {
515
+ props.onChange?.({
523
516
  target: {
524
- id: props !== null && props !== void 0 && props.id ? _concatInstanceProperty(_context3 = "".concat(props.id, ".")).call(_context3, language) : '',
525
- name: props !== null && props !== void 0 && props.name ? _concatInstanceProperty(_context4 = "".concat(props.name, ".")).call(_context4, language) : '',
517
+ id: props?.id ? `${props.id}.${language}` : '',
518
+ name: props?.name ? `${props.name}.${language}` : '',
526
519
  language,
527
520
  value: state
528
521
  }
@@ -542,9 +535,9 @@ const LocalizedRichTextInput = /*#__PURE__*/forwardRef((props, ref) => {
542
535
  }
543
536
  const langRefs = useRef(new _Map());
544
537
  const resetValue = useCallback(newValue => {
545
- var _context5;
546
- _forEachInstanceProperty(_context5 = langRefs.current).call(_context5, langRef => {
547
- langRef === null || langRef === void 0 || langRef.resetValue(newValue);
538
+ var _context3;
539
+ _forEachInstanceProperty(_context3 = langRefs.current).call(_context3, langRef => {
540
+ langRef?.resetValue(newValue);
548
541
  });
549
542
  }, []);
550
543
  useImperativeHandle(ref, () => {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/localized-rich-text-input",
3
3
  "description": "A controlled text input component for localized rich text input with validation states.",
4
- "version": "19.11.0",
4
+ "version": "19.12.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,21 +21,21 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/collapsible-motion": "19.11.0",
25
- "@commercetools-uikit/constraints": "19.11.0",
26
- "@commercetools-uikit/design-system": "19.11.0",
27
- "@commercetools-uikit/flat-button": "19.11.0",
28
- "@commercetools-uikit/hooks": "19.11.0",
29
- "@commercetools-uikit/icons": "19.11.0",
30
- "@commercetools-uikit/input-utils": "19.11.0",
31
- "@commercetools-uikit/localized-utils": "19.11.0",
32
- "@commercetools-uikit/messages": "19.11.0",
33
- "@commercetools-uikit/rich-text-utils": "19.11.0",
34
- "@commercetools-uikit/spacings-inline": "19.11.0",
35
- "@commercetools-uikit/spacings-stack": "19.11.0",
36
- "@commercetools-uikit/text": "19.11.0",
37
- "@commercetools-uikit/tooltip": "19.11.0",
38
- "@commercetools-uikit/utils": "19.11.0",
24
+ "@commercetools-uikit/collapsible-motion": "19.12.0",
25
+ "@commercetools-uikit/constraints": "19.12.0",
26
+ "@commercetools-uikit/design-system": "19.12.0",
27
+ "@commercetools-uikit/flat-button": "19.12.0",
28
+ "@commercetools-uikit/hooks": "19.12.0",
29
+ "@commercetools-uikit/icons": "19.12.0",
30
+ "@commercetools-uikit/input-utils": "19.12.0",
31
+ "@commercetools-uikit/localized-utils": "19.12.0",
32
+ "@commercetools-uikit/messages": "19.12.0",
33
+ "@commercetools-uikit/rich-text-utils": "19.12.0",
34
+ "@commercetools-uikit/spacings-inline": "19.12.0",
35
+ "@commercetools-uikit/spacings-stack": "19.12.0",
36
+ "@commercetools-uikit/text": "19.12.0",
37
+ "@commercetools-uikit/tooltip": "19.12.0",
38
+ "@commercetools-uikit/utils": "19.12.0",
39
39
  "@emotion/react": "^11.10.5",
40
40
  "@emotion/styled": "^11.10.5",
41
41
  "downshift": "6.1.12",