@commercetools-uikit/localized-rich-text-input 15.2.3 → 15.3.0

package/dist/commercetools-uikit-localized-rich-text-input.cjs.prod.js

@@ -16,8 +16,8 @@ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/ins
 var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
-var react$1 = require('react');
-var react = require('@emotion/react');
+var react = require('react');
+var react$1 = require('@emotion/react');
 var Stack = require('@commercetools-uikit/spacings-stack');
 var Constraints = require('@commercetools-uikit/constraints');
 var hooks = require('@commercetools-uikit/hooks');
@@ -71,17 +71,9 @@ var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var isHotkey__default = /*#__PURE__*/_interopDefault(isHotkey);
 var pipe__default = /*#__PURE__*/_interopDefault(pipe);
 
-function ownKeys$4(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; }
-
-function _objectSpread$4(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$4(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$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 var EditorLanguageLabel = /*#__PURE__*/_styled__default["default"]("label", {
   target: "ew063c2"
-} )(function (props) {
-  var overwrittenVars = _objectSpread$4(_objectSpread$4({}, designSystem.customProperties), props.theme);
-
-  return /*#__PURE__*/react.css("white-space:nowrap;flex:0;color:", overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled], ";line-height:calc(\n      ", designSystem.customProperties.sizeHeightInput, " - 2 *\n        ", designSystem.customProperties.borderRadius1, "\n    );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;cursor:inherit;" + ("" ), "" );
-}, "" );
+} )("white-space:nowrap;flex:0;color:", designSystem.designTokens.fontColorForInputWhenDisabled, ";line-height:calc(\n    ", designSystem.designTokens.sizeHeightInput, " - 2 * ", designSystem.designTokens.borderRadius1, "\n  );background-color:", designSystem.designTokens.backgroundColorForInputWhenDisabled, ";border-top-left-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-left-radius:", designSystem.designTokens.borderRadiusForInput, ";border:1px ", designSystem.designTokens.borderColorForInputWhenDisabled, " solid;padding:0 ", designSystem.designTokens.spacingS, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ",color ", designSystem.designTokens.transitionStandard, ";border-right:0;box-shadow:none;appearance:none;cursor:inherit;" + ("" ));
 
 var EditorWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ew063c1"
@@ -141,27 +133,27 @@ var _ref$1 = {
   styles: "flex:auto;width:0;border-top-left-radius:0;border-bottom-left-radius:0"
 } ;
 
-var Editor = /*#__PURE__*/react$1.forwardRef(function (props, forwardedRef) {
+var Editor = /*#__PURE__*/react.forwardRef(function (props, forwardedRef) {
   var intl = reactIntl.useIntl();
-  var ref = react$1.useRef();
+  var ref = react.useRef();
   var createEditorWithPlugins = pipe__default["default"](slateReact.withReact, slateHistory.withHistory); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  var editor = react$1.useMemo(function () {
+  var editor = react.useMemo(function () {
     return createEditorWithPlugins(slate.createEditor());
   }, []);
 
   if (props.showExpandIcon) ;
 
-  var _useState = react$1.useState(false),
+  var _useState = react.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       renderToggleButton = _useState2[0],
       setRenderToggleButton = _useState2[1];
 
   var toggleLanguage = props.toggleLanguage;
-  var onToggle = react$1.useCallback(function () {
+  var onToggle = react.useCallback(function () {
     toggleLanguage(props.language);
   }, [toggleLanguage, props.language]);
-  var updateRenderToggleButton = react$1.useCallback(function () {
+  var updateRenderToggleButton = react.useCallback(function () {
     var _ref$current;
 
     var doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
@@ -174,39 +166,38 @@ var Editor = /*#__PURE__*/react$1.forwardRef(function (props, forwardedRef) {
       setRenderToggleButton(false);
     }
   }, [setRenderToggleButton, renderToggleButton]);
-  react$1.useEffect(function () {
+  react.useEffect(function () {
     updateRenderToggleButton();
   }, [editor, updateRenderToggleButton]); // resetting
 
-  var resetValue = react$1.useCallback(function (newValue) {
+  var resetValue = react.useCallback(function (newValue) {
     var _newValue$props$langu;
 
     var 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 : '';
     richTextUtils.resetEditor(editor, newStringValue);
   }, [editor, props.language]);
-  /* 
+  /*
   Resetting the editor requires access to `editor` object returned from `useSlate` hook.
-  Therefore, `reset` function is attached to the passed `ref` object via `useImperativeHandle` 
-  to be called from the parent component. 
+  Therefore, `reset` function is attached to the passed `ref` object via `useImperativeHandle`
+  to be called from the parent component.
   e.g. <button onMouseDown={() => ref.current?.resetValue("<p><strong>Value after reset</strong></p>")}>Reset</button>
   */
 
-  react$1.useImperativeHandle(forwardedRef, function () {
+  react.useImperativeHandle(forwardedRef, function () {
     return {
       resetValue: resetValue
     };
   });
   var shouldToggleButtonTakeSpace =
-  /* 
+  /*
     - if hasLanguagesControl and there are no errors/warnings to display
     - then the toggleButton is absolutely positioned
     This is because the toggle button is placed next to the LocalizedInputToggle without being siblings in the DOM.
     If there is a error or warning showing,
     then it can be placed statically because it will then be a sibling to the error/warning message
-    and LocalizedInputToggle is placed below the errors/warnings. 
+    and LocalizedInputToggle is placed below the errors/warnings.
   */
   renderToggleButton && !props.hasLanguagesControl || props.error || props.warning;
-  var theme = react.useTheme();
   return jsxRuntime.jsx(CollapsibleMotion__default["default"], {
     minHeight: COLLAPSED_HEIGHT,
     isClosed: !props.isOpen,
@@ -232,7 +223,6 @@ var Editor = /*#__PURE__*/react$1.forwardRef(function (props, forwardedRef) {
             onChange: props.onChange,
             children: [jsxRuntime.jsx(EditorLanguageLabel, {
               htmlFor: props.id,
-              theme: theme,
               children: jsxRuntime.jsx(Text__default["default"].Detail, {
                 tone: "secondary",
                 children: props.language.toUpperCase()
@@ -298,7 +288,7 @@ var Editor = /*#__PURE__*/react$1.forwardRef(function (props, forwardedRef) {
         // does the trick.
         // TODO: revisit the logic and the implementation to maybe avoid having to apply this style.
         , {
-          css: /*#__PURE__*/react.css("margin-top:", shouldToggleButtonTakeSpace ? 'inherit' : '0px !important', ";" + ("" ), "" ),
+          css: /*#__PURE__*/react$1.css("margin-top:", shouldToggleButtonTakeSpace ? 'inherit' : '0px !important', ";" + ("" ), "" ),
           children: [function () {
             if (props.error) return jsxRuntime.jsx(LeftColumn, {
               children: jsxRuntime.jsx("div", {
@@ -313,7 +303,7 @@ var Editor = /*#__PURE__*/react$1.forwardRef(function (props, forwardedRef) {
             return null;
           }(), renderToggleButton && jsxRuntime.jsx(RightColumn, {
             children: jsxRuntime.jsx(ToggleButtonWrapper, {
-              css: [!shouldToggleButtonTakeSpace && /*#__PURE__*/react.css("position:absolute;top:0;right:0;margin-top:", designSystem.customProperties.spacingXs, ";" + ("" ), "" ), "" , "" ],
+              css: [!shouldToggleButtonTakeSpace && /*#__PURE__*/react$1.css("position:absolute;top:0;right:0;margin-top:", designSystem.designTokens.spacingXs, ";" + ("" ), "" ), "" , "" ],
               children: jsxRuntime.jsx(FlatButton__default["default"], {
                 onClick: toggle,
                 label: intl.formatMessage(isOpen ? inputUtils.messagesMultilineInput.collapse : inputUtils.messagesMultilineInput.expand),
@@ -432,7 +422,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
   }]);
 
   return RichTextInput;
-}(react$1.PureComponent);
+}(react.PureComponent);
 
 RichTextInput.defaultProps = {
   defaultExpandMultilineText: false,
@@ -440,7 +430,7 @@ RichTextInput.defaultProps = {
 };
 RichTextInput.displayName = 'RichTextInput';
 RichTextInput.propTypes = {};
-var RichTextInputWithRef = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
+var RichTextInputWithRef = /*#__PURE__*/react.forwardRef(function (props, ref) {
   return jsxRuntime.jsx(RichTextInput, _objectSpread$2({
     parentRef: ref
   }, props));
@@ -501,7 +491,7 @@ var _ref = {
   styles: "align-self:flex-start"
 } ;
 
-var LocalizedRichTextInput = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
+var LocalizedRichTextInput = /*#__PURE__*/react.forwardRef(function (props, ref) {
   var _context2;
 
   if (!props.isReadOnly) ;
@@ -514,7 +504,7 @@ var LocalizedRichTextInput = /*#__PURE__*/react$1.forwardRef(function (props, re
     return _objectSpread(_defineProperty({}, locale, Boolean(props.defaultExpandMultilineText)), translations);
   }, {});
 
-  var _useReducer = react$1.useReducer(expandedTranslationsReducer, initialExpandedTranslationsState),
+  var _useReducer = react.useReducer(expandedTranslationsReducer, initialExpandedTranslationsState),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       expandedTranslationsState = _useReducer2[0],
       expandedTranslationsDispatch = _useReducer2[1];
@@ -526,13 +516,13 @@ var LocalizedRichTextInput = /*#__PURE__*/react$1.forwardRef(function (props, re
       areLanguagesOpened = _useToggleState2[0],
       toggleLanguages = _useToggleState2[1];
 
-  var toggleLanguage = react$1.useCallback(function (language) {
+  var toggleLanguage = react.useCallback(function (language) {
     expandedTranslationsDispatch({
       type: 'toggle',
       payload: language
     });
   }, [expandedTranslationsDispatch]);
-  var createChangeHandler = react$1.useCallback(function (language) {
+  var createChangeHandler = react.useCallback(function (language) {
     return function (state) {
       var _props$onChange, _context3, _context4;
 
@@ -559,15 +549,15 @@ var LocalizedRichTextInput = /*#__PURE__*/react$1.forwardRef(function (props, re
     }
   }
 
-  var langRefs = react$1.useRef(new _Map__default["default"]());
-  var resetValue = react$1.useCallback(function (newValue) {
+  var langRefs = react.useRef(new _Map__default["default"]());
+  var resetValue = react.useCallback(function (newValue) {
     var _context5;
 
     _forEachInstanceProperty__default["default"](_context5 = langRefs.current).call(_context5, function (langRef) {
       langRef.resetValue(newValue);
     });
   }, []);
-  react$1.useImperativeHandle(ref, function () {
+  react.useImperativeHandle(ref, function () {
     return {
       resetValue: resetValue
     };
@@ -583,7 +573,7 @@ var LocalizedRichTextInput = /*#__PURE__*/react$1.forwardRef(function (props, re
           if (!isFirstLanguage && !areLanguagesOpened) return null;
           var isLastLanguage = index === languages.length - 1;
           var hasLanguagesControl = isFirstLanguage && !areLanguagesOpened || isLastLanguage;
-          return react.createElement(RichTextInput$1, _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
+          return react$1.createElement(RichTextInput$1, _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
             key: language,
             id: localizedUtils.getId(props.id, language),
             name: localizedUtils.getName(props.name, language),
@@ -634,7 +624,7 @@ LocalizedRichTextInput.isTouched = localizedUtils.isTouched;
 var LocalizedRichTextInput$1 = LocalizedRichTextInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.2.3";
+var version = "15.3.0";
 
 exports["default"] = LocalizedRichTextInput$1;
 exports.version = version;