@commercetools-uikit/localized-multiline-text-input 0.0.0-canary-2021830134526

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

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-localized-multiline-text-input.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-localized-multiline-text-input.cjs.dev.js");
+}

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

@@ -0,0 +1,404 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react$1 = require('react');
+require('prop-types');
+require('react-required-if');
+require('common-tags');
+var reactIntl = require('react-intl');
+var react = require('@emotion/react');
+var hooks = require('@commercetools-uikit/hooks');
+var Stack = require('@commercetools-uikit/spacings-stack');
+var Constraints = require('@commercetools-uikit/constraints');
+var localizedUtils = require('@commercetools-uikit/localized-utils');
+var inputUtils = require('@commercetools-uikit/input-utils');
+var _styled = require('@emotion/styled/base');
+var FlatButton = require('@commercetools-uikit/flat-button');
+var icons = require('@commercetools-uikit/icons');
+var utils = require('@commercetools-uikit/utils');
+var designSystem = require('@commercetools-uikit/design-system');
+var Text = require('@commercetools-uikit/text');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var messages = require('@commercetools-uikit/messages');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var Stack__default = /*#__PURE__*/_interopDefault(Stack);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+
+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; }
+
+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; }
+// * a disabled-field currently does not display warning/error-states so it takes precedence
+// * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
+// how you can interact with the field is controlled separately by the props, this only influences visuals
+
+var _ref$2 = {
+  name: "d3v9zr",
+  styles: "overflow:hidden"
+} ;
+
+var _ref2 = {
+  name: "9a98ig",
+  styles: "border-top-left-radius:0!important;border-bottom-left-radius:0!important"
+} ;
+
+var getTextareaStyles = function getTextareaStyles(props) {
+  var baseStyles = [_ref2, props.isCollapsed && _ref$2];
+  return baseStyles;
+};
+
+var getLanguageLabelStyles = function getLanguageLabelStyles(props, theme) {
+  var overwrittenVars = _objectSpread$3(_objectSpread$3({}, designSystem.customProperties), theme);
+
+  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;" + ("" ), "" );
+};
+
+var ToggleButtonWrapper = _styled__default['default']("div", {
+  target: "ed3jgad0"
+} )({
+  name: "ejz79s",
+  styles: "flex:0;display:flex"
+} );
+
+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; }
+
+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; }
+
+var LeftColumn = _styled__default['default']("div", {
+  target: "ecub1e22"
+} )({
+  name: "82a6rk",
+  styles: "flex:1"
+} );
+
+var RightColumn = _styled__default['default']("div", {
+  target: "ecub1e21"
+} )({
+  name: "1m04uhl",
+  styles: "position:relative;flex:0;display:flex;align-items:flex-start"
+} );
+
+var Row = _styled__default['default']("div", {
+  target: "ecub1e20"
+} )({
+  name: "skgbeu",
+  styles: "display:flex;justify-content:flex-end"
+} );
+
+var _ref$1 = {
+  name: "1ktetz7",
+  styles: "width:100%;position:relative;display:flex"
+} ;
+
+var TranslationInput = function TranslationInput(props) {
+  var _useState = react$1.useState(TranslationInput.MIN_ROW_COUNT),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentRowCount = _useState2[0],
+      setContentRowCount = _useState2[1];
+
+  var handleHeightChange = react$1.useCallback(function (_, rowCount) {
+    setContentRowCount(rowCount);
+  }, [setContentRowCount]);
+  var onChange = props.onChange;
+  var handleChange = react$1.useCallback(function (event) {
+    // We manipulate the event to add the language to the target.
+    // That way the users of LocalizedTextInput's onChange can read
+    // event.target.language and event.target.value to determine the next value.
+    //
+    // We only need this information for the story, the MC application code will
+    // never need to access the information in such an inconvenient way, as
+    // Formik can deal with a name like "foo.en" and sets the value correctly.
+    // We can't use this as we aren't guaranteed a name in the story as the user
+    // might clear it using the knob, and then we can't parse the language from
+    // the input name anymore.
+    //
+    // eslint-disable-next-line no-param-reassign
+    event.target.language = props.language;
+    onChange(event);
+  }, [onChange, props.language]);
+  var onFocus = props.onFocus,
+      onToggle = props.onToggle;
+  var handleFocus = react$1.useCallback(function () {
+    // Expand the input on focus
+    if (props.isCollapsed) onToggle();
+    if (onFocus) onFocus();
+  }, [props.isCollapsed, onFocus, onToggle]); // This checks if the content in the textarea overflows the minimum
+  // amount of lines it should have when collapsed
+
+  var contentExceedsShownRows = contentRowCount > TranslationInput.MIN_ROW_COUNT;
+  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.
+  */
+  !props.isCollapsed && contentExceedsShownRows && !props.hasLanguagesControl || props.error || props.warning;
+  var theme = react.useTheme();
+  return jsxRuntime.jsxs(Stack__default['default'], {
+    scale: "xs",
+    children: [jsxRuntime.jsxs("div", {
+      css: _ref$1,
+      children: [jsxRuntime.jsx("label", {
+        htmlFor: props.id,
+        css: getLanguageLabelStyles(props, theme),
+        children: jsxRuntime.jsx(Text__default['default'].Detail, {
+          tone: "secondary",
+          children: props.language.toUpperCase()
+        })
+      }), jsxRuntime.jsx(inputUtils.MultilineInput, _objectSpread$2({
+        theme: theme,
+        id: props.id,
+        name: props.name,
+        autoComplete: props.autoComplete,
+        value: props.value,
+        onChange: handleChange,
+        onHeightChange: handleHeightChange,
+        onBlur: props.onBlur,
+        onFocus: handleFocus,
+        isDisabled: props.isDisabled,
+        placeholder: props.placeholder,
+        css: getTextareaStyles(props),
+        hasError: props.hasError,
+        hasWarning: props.hasWarning,
+        isReadOnly: props.isReadOnly,
+        isAutofocussed: props.isAutofocussed,
+        isOpen: !props.isCollapsed
+      }, utils.filterDataAttributes(props)))]
+    }, props.language), jsxRuntime.jsxs(Row // NOTE: applying this style withing the `styled` component results in the production
+    // bundle to apply the style in the wrong order.
+    // For instance, we need to override the marging of the spacing component, which also
+    // uses `!important`.
+    // Anyway, apparently by passing the style as a `css` prop to the `styled` component
+    // 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', ";" + ("" ), "" ),
+      children: [function () {
+        if (props.error) return jsxRuntime.jsx(LeftColumn, {
+          children: jsxRuntime.jsx("div", {
+            children: props.error
+          })
+        });
+        if (props.warning) return jsxRuntime.jsx(LeftColumn, {
+          children: jsxRuntime.jsx("div", {
+            children: props.warning
+          })
+        });
+        return null;
+      }(), !props.isCollapsed && contentExceedsShownRows && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(LeftColumn, {}), jsxRuntime.jsx(RightColumn, {
+          children: jsxRuntime.jsx(ToggleButtonWrapper, {
+            css: [!shouldToggleButtonTakeSpace && /*#__PURE__*/react.css("position:absolute;top:0;right:0;margin-top:", designSystem.customProperties.spacingXs, ";" + ("" ), "" ), "" , "" ],
+            children: jsxRuntime.jsx(FlatButton__default['default'], {
+              onClick: props.onToggle,
+              isDisabled: props.isDisabled,
+              label: props.intl.formatMessage(inputUtils.messagesMultilineInput.collapse),
+              icon: jsxRuntime.jsx(icons.AngleUpIcon, {
+                size: "small"
+              })
+            })
+          })
+        })]
+      })]
+    })]
+  });
+};
+
+TranslationInput.displayName = 'TranslationInput';
+TranslationInput.propTypes = {}; // The minimum ammount of rows the MultilineTextInput will show.
+// When the input is closed, this is used as the maximum row count as well
+// so that the input "collapses".
+
+TranslationInput.MIN_ROW_COUNT = 1;
+var TranslationInput$1 = TranslationInput;
+
+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; }
+
+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; }
+
+var RequiredValueErrorMessage = function RequiredValueErrorMessage() {
+  return jsxRuntime.jsx(messages.ErrorMessage, {
+    children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, inputUtils.messagesLocalizedInput.missingRequiredField))
+  });
+};
+
+RequiredValueErrorMessage.displayName = 'RequiredValueErrorMessage';
+var RequiredValueErrorMessage$1 = RequiredValueErrorMessage;
+
+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; }
+
+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; }
+
+var expandedTranslationsReducer = function expandedTranslationsReducer(state, action) {
+  switch (action.type) {
+    case 'toggle':
+      return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, action.payload, !state[action.payload]));
+
+    case 'toggleAll':
+      {
+        var _context;
+
+        var newState = _reduceInstanceProperty__default['default'](_context = _Object$keys__default['default'](state)).call(_context, function (translations, locale) {
+          return _objectSpread(_defineProperty({}, locale, true), translations);
+        }, {});
+
+        return newState;
+      }
+
+    default:
+      return state;
+  }
+}; // This component supports expanding/collapsing multiline inputs, but it also
+// supports showing/hiding the remaining languages.
+// These two features are both about opening/closing something, and so the code
+// can get quite confusing. We try to stick to expand/collapse for the
+// multiline inputs, while we use show/hide/open/close for the remaining
+// languages.
+
+
+var _ref = {
+  name: "xyzkeb",
+  styles: "align-self:flex-start"
+} ;
+
+var LocalizedMultilineTextInput = function LocalizedMultilineTextInput(props) {
+  var _context2;
+
+  var intl = reactIntl.useIntl();
+
+  var initialExpandedTranslationsState = _reduceInstanceProperty__default['default'](_context2 = _Object$keys__default['default'](props.value)).call(_context2, function (translations, locale) {
+    return _objectSpread(_defineProperty({}, locale, Boolean(props.defaultExpandMultilineText)), translations);
+  }, {});
+
+  var _useReducer = react$1.useReducer(expandedTranslationsReducer, initialExpandedTranslationsState),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      expandedTranslationsState = _useReducer2[0],
+      expandedTranslationsDispatch = _useReducer2[1];
+
+  var defaultExpansionState = props.hideLanguageExpansionControls || props.defaultExpandLanguages || // useToggleState's default is `true`, but we want `false`
+  false;
+
+  var _useToggleState = hooks.useToggleState(defaultExpansionState),
+      _useToggleState2 = _slicedToArray(_useToggleState, 2),
+      areLanguagesOpened = _useToggleState2[0],
+      toggleLanguages = _useToggleState2[1];
+
+  var toggleLanguage = react$1.useCallback(function (language) {
+    expandedTranslationsDispatch({
+      type: 'toggle',
+      payload: language
+    });
+  }, [expandedTranslationsDispatch]);
+  var languages = localizedUtils.sortLanguages(props.selectedLanguage, _Object$keys__default['default'](props.value));
+  var hasErrorInRemainingLanguages = props.hasError || localizedUtils.getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);
+  var hasWarningInRemainingLanguages = props.hasWarning || localizedUtils.getHasWarningOnRemainingLanguages(props.warnings, props.selectedLanguage);
+
+  if (hasErrorInRemainingLanguages || hasWarningInRemainingLanguages) {
+    if (!areLanguagesOpened) {
+      // this update within render replaces the old `getDerivedStateFromProps` functionality
+      // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
+      toggleLanguages();
+    }
+  }
+
+  var shouldRenderLanguagesButton = languages.length > 1 && !props.hideLanguageExpansionControls;
+  return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsxs(Stack__default['default'], {
+      scale: "xs",
+      children: [jsxRuntime.jsx(Stack__default['default'], {
+        scale: "s",
+        children: _mapInstanceProperty__default['default'](languages).call(languages, function (language, index) {
+          var isFirstLanguage = index === 0;
+          if (!isFirstLanguage && !areLanguagesOpened) return null;
+          var isLastLanguage = index === languages.length - 1;
+          var hasLanguagesControl = isFirstLanguage && !areLanguagesOpened || isLastLanguage;
+          return jsxRuntime.jsx(TranslationInput$1, _objectSpread({
+            autoComplete: props.autoComplete,
+            id: LocalizedMultilineTextInput.getId(props.id, language),
+            name: LocalizedMultilineTextInput.getName(props.name, language),
+            value: props.value[language],
+            onChange: props.onChange,
+            language: language,
+            isCollapsed: !expandedTranslationsState[language],
+            onToggle: function onToggle() {
+              return toggleLanguage(language);
+            },
+            placeholder: props.placeholder ? props.placeholder[language] : undefined,
+            onBlur: props.onBlur,
+            onFocus: props.onFocus,
+            isAutofocussed: index === 0 && props.isAutofocussed,
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            hasError: Boolean(props.hasError || props.errors && props.errors[language]),
+            hasWarning: Boolean(props.hasWarning || props.warnings && props.warnings[language]),
+            intl: intl,
+            warning: props.warnings && props.warnings[language],
+            error: props.errors && props.errors[language],
+            hasLanguagesControl: hasLanguagesControl
+          }, localizedUtils.createLocalizedDataAttributes(props, language)), language);
+        })
+      }), shouldRenderLanguagesButton && jsxRuntime.jsx("div", {
+        css: _ref,
+        children: jsxRuntime.jsx(inputUtils.LocalizedInputToggle, {
+          isOpen: areLanguagesOpened,
+          onClick: toggleLanguages,
+          isDisabled: areLanguagesOpened && Boolean(hasErrorInRemainingLanguages || hasWarningInRemainingLanguages),
+          remainingLocalizations: languages.length - 1
+        })
+      })]
+    })
+  });
+};
+
+LocalizedMultilineTextInput.displayName = 'LocalizedMultilineTextInput';
+LocalizedMultilineTextInput.RequiredValueErrorMessage = RequiredValueErrorMessage$1;
+LocalizedMultilineTextInput.propTypes = {};
+LocalizedMultilineTextInput.getId = localizedUtils.getId;
+LocalizedMultilineTextInput.getName = localizedUtils.getName;
+LocalizedMultilineTextInput.defaultProps = {
+  horizontalConstraint: 'scale'
+};
+LocalizedMultilineTextInput.createLocalizedString = localizedUtils.createLocalizedString;
+LocalizedMultilineTextInput.isEmpty = localizedUtils.isEmpty;
+LocalizedMultilineTextInput.omitEmptyTranslations = localizedUtils.omitEmptyTranslations;
+LocalizedMultilineTextInput.isTouched = localizedUtils.isTouched;
+var LocalizedMultilineTextInput$1 = LocalizedMultilineTextInput;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = LocalizedMultilineTextInput$1;
+exports.version = version;