@commercetools-frontend/experimental-components 6.2.0 → 6.2.1

package/dist/commercetools-frontend-experimental-components.cjs.prod.js

@@ -195,7 +195,7 @@ var compact__default = /*#__PURE__*/_interopDefault(compact);
 var _Set__default = /*#__PURE__*/_interopDefault(_Set);
 var _spliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_spliceInstanceProperty);
 
-var styles$j = {
+var styles$k = {
   "loading-container": "centered-loading-spinner-module__loading-container___3_9-h"
 };
 /**
@@ -203,7 +203,7 @@ var styles$j = {
  * - the ui-kit Spacings.Stack does not allow for custom styles, nor does it stretch to fill its container's height
  */
 const CenteredLoadingSpinner = () => jsxRuntime.jsx("div", {
-  className: styles$j['loading-container'],
+  className: styles$k['loading-container'],
   "data-testid": "centered-loading-spinner",
   children: jsxRuntime.jsx(uiKit.LoadingSpinner, {})
 });
@@ -245,6 +245,7 @@ const INTERVALS_IN_SECONDS = {
   [REMINDER_OPTION_10_DAY]: 864000
 };
 const EXCLUDING_PRODUCTS = 'excludingProducts';
+const PRODUCT_TAILORING_FOR_ATTRIBUTES = 'productTailoringForAttributes';
 
 // TODO: apply a more robust solution to overlaying issues
 const Z_INDEX_DROPDOWN = 30000;
@@ -1069,7 +1070,7 @@ function ownKeys$1l(e, r) { var t = _Object$keys__default["default"](e); if (_Ob
 function _objectSpread$1l(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1l(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1l(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function _callSuper$7(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$7() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$7() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$7 = function () { return !!t; })(); }
-var styles$i = {
+var styles$j = {
   "size": "throttled-field-module__size___324jx",
   "input-text": "throttled-field-module__input-text___3zFFp",
   "input-secondary": "throttled-field-module__input-secondary___cFo9e throttled-field-module__input-text___3zFFp throttled-field-module__size___324jx",
@@ -1178,9 +1179,9 @@ let ThrottledField = /*#__PURE__*/function (_PureComponent) {
           })
         }), this.props.as === 'textarea' ? jsxRuntime.jsx(Textarea__default["default"], _objectSpread$1l(_objectSpread$1l({}, commonProps), {}, {
           id: inputId,
-          className: classnames__default["default"](styles$i.textarea, styles$i[`textarea-${this.props.style}`], {
-            [styles$i.invalid]: !this.props.isValid,
-            [styles$i.disabled]: this.props.disabled
+          className: classnames__default["default"](styles$j.textarea, styles$j[`textarea-${this.props.style}`], {
+            [styles$j.invalid]: !this.props.isValid,
+            [styles$j.disabled]: this.props.disabled
           }),
           rows: 1,
           maxRows: this.props.autoSize ? undefined : 1,
@@ -1189,10 +1190,10 @@ let ThrottledField = /*#__PURE__*/function (_PureComponent) {
           id: inputId,
           ref: this.props.inputRef,
           type: this.props.as,
-          className: classnames__default["default"](styles$i[`input-${this.props.style}`], {
-            [styles$i.invalid]: !this.props.isValid,
-            [styles$i.disabled]: this.props.disabled,
-            [styles$i.granular]: this.props.isGranular
+          className: classnames__default["default"](styles$j[`input-${this.props.style}`], {
+            [styles$j.invalid]: !this.props.isValid,
+            [styles$j.disabled]: this.props.disabled,
+            [styles$j.granular]: this.props.isGranular
           })
         }))]
       });
@@ -1237,7 +1238,7 @@ var messages$G = reactIntl.defineMessages({
 
 function _callSuper$6(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$6() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$6() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$6 = function () { return !!t; })(); }
-var styles$h = {
+var styles$i = {
   "block": "search-input-module__block___1uM-y",
   "container": "search-input-module__container___9u6if",
   "input-container": "search-input-module__input-container___mJnyZ",
@@ -1312,14 +1313,14 @@ let SearchInput = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return jsxRuntime.jsx("div", {
-        className: classnames__default["default"](this.props.blockClassName, styles$h.block),
+        className: classnames__default["default"](this.props.blockClassName, styles$i.block),
         children: jsxRuntime.jsxs("div", {
-          className: classnames__default["default"](this.props.containerClassName, styles$h.container),
+          className: classnames__default["default"](this.props.containerClassName, styles$i.container),
           children: [jsxRuntime.jsx("div", {
-            className: classnames__default["default"](styles$h['input-container'], {
-              [styles$h['input-container-hoverable']]: !this.props.disabled,
-              [styles$h['input-container-disabled']]: this.props.disabled && this.props.enableDisabledStyle,
-              [styles$h['input-container-granular']]: this.props.isGranular
+            className: classnames__default["default"](styles$i['input-container'], {
+              [styles$i['input-container-hoverable']]: !this.props.disabled,
+              [styles$i['input-container-disabled']]: this.props.disabled && this.props.enableDisabledStyle,
+              [styles$i['input-container-granular']]: this.props.isGranular
             }),
             children: jsxRuntime.jsx(ThrottledField, {
               style: "primary",
@@ -1337,8 +1338,8 @@ let SearchInput = /*#__PURE__*/function (_Component) {
               isGranular: this.props.isGranular
             })
           }), this.state.text && jsxRuntime.jsx(uiKit.SecondaryIconButton, {
-            className: classnames__default["default"](styles$h['clear-icon-container'], {
-              [styles$h['clear-icon-container-granular']]: this.props.isGranular
+            className: classnames__default["default"](styles$i['clear-icon-container'], {
+              [styles$i['clear-icon-container-granular']]: this.props.isGranular
             }),
             icon: jsxRuntime.jsx(uiKit.CloseIcon, {}),
             size: "30",
@@ -1346,9 +1347,9 @@ let SearchInput = /*#__PURE__*/function (_Component) {
             onClick: this.handleClear
           }), jsxRuntime.jsx("div", {
             "data-testid": "search-button",
-            className: classnames__default["default"](styles$h['search-icon-container'], {
-              [styles$h['search-icon-container-hoverable']]: !this.props.disabled,
-              [styles$h['search-icon-container-granular']]: this.props.isGranular
+            className: classnames__default["default"](styles$i['search-icon-container'], {
+              [styles$i['search-icon-container-hoverable']]: !this.props.disabled,
+              [styles$i['search-icon-container-granular']]: this.props.isGranular
             }),
             onClick: this.props.disabled ? null : this.handleSubmit,
             label: "search-button",
@@ -2595,10 +2596,10 @@ function defaultFilterValidator$1(_ref2) {
   return true;
 }
 
-var localizedTextTransformer = (localizedString => {
+var localizedTextTransformer = localizedString => {
   var _context;
   return _mapInstanceProperty__default["default"](_context = _Object$keys__default["default"](localizedString)).call(_context, locale => `${locale} = "${localizedString[locale]}"`).join(' and ');
-});
+};
 
 const getCentAmountClause = (value, operator, locale) => `centAmount ${operator} ${uiKit.MoneyInput.convertToMoneyValue(value, locale).centAmount}`;
 function moneyTransformer(value, option, locale) {
@@ -5267,7 +5268,7 @@ function getCartDiscountById(apolloClient, options) {
   }).then(response => response.data?.cartDiscount ? transformLocalizedFieldsForCartDiscount(response.data.cartDiscount) : null);
 }
 
-var styles$g = {
+var styles$h = {
   "container": "reference-search-module__container___3-iK3",
   "missing-label": "reference-search-module__missing-label___az9AO"
 }; // This is a hashmap of loaded items used to map a value to an item
@@ -5374,9 +5375,9 @@ function ReferenceSearch(props) {
     props.onChange(option);
   };
   return jsxRuntime.jsxs("div", {
-    className: styles$g.container,
+    className: styles$h.container,
     children: [areSomeItemsMissing && jsxRuntime.jsx("div", {
-      className: styles$g['missing-label'],
+      className: styles$h['missing-label'],
       children: props.referenceIsMissingLabel
     }), jsxRuntime.jsx(CustomFieldTooltip, {
       title: tooltipTitle,
@@ -5696,7 +5697,7 @@ function useCachedCategoryOptions(ids) {
 
 function ownKeys$Z(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; }
 function _objectSpread$Z(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$Z(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$Z(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$f = {
+var styles$g = {
   "button": "button-module__button___1OzVf",
   "cancel": "button-module__cancel___1-jYL button-module__button___1OzVf",
   "confirm": "button-module__confirm___-W92x button-module__button___1OzVf",
@@ -5732,7 +5733,7 @@ const Button = props => {
   return jsxRuntime.jsx("button", _objectSpread$Z(_objectSpread$Z({
     onClick: isDisabled ? null : onClick,
     type: props.type,
-    className: classnames__default["default"](styles$f.button, isDisabled ? styles$f.disabled : null, className),
+    className: classnames__default["default"](styles$g.button, isDisabled ? styles$g.disabled : null, className),
     disabled: isDisabled,
     "aria-label": props['aria-label']
   }, dataProps), {}, {
@@ -5754,15 +5755,15 @@ var messages$z = reactIntl.defineMessages({
 
 function ownKeys$Y(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; }
 function _objectSpread$Y(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$Y(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$Y(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$e = {
+var styles$f = {
   "button": "file-input-module__button___2KypN",
   "input": "file-input-module__input___3MP4D"
 };
 const FileInput = props => jsxRuntime.jsx("label", {
   children: jsxRuntime.jsxs("span", {
-    className: styles$e.button,
+    className: styles$f.button,
     children: [jsxRuntime.jsx("input", {
-      className: styles$e.input,
+      className: styles$f.input,
       type: "file",
       accept: props.acceptTypes,
       name: props.name,
@@ -6015,7 +6016,7 @@ const CustomerGroupPickerInput = _ref => {
 };
 CustomerGroupPickerInput.displayName = 'CustomerGroupPickerInput';
 
-var styles$d = {
+var styles$e = {
   "divider": "divider-module__divider___4-vdy",
   "divider-horizontal": "divider-module__divider-horizontal___RuUcj",
   "divider-vertical": "divider-module__divider-vertical___32kJG",
@@ -6028,10 +6029,10 @@ function Divider(_ref) {
     orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation;
   return jsxRuntime.jsx("hr", {
     className: classnames__default["default"]({
-      [styles$d['divider-solid']]: !isDashed,
-      [styles$d['divider-dashed']]: isDashed,
-      [styles$d['divider-horizontal']]: orientation === 'horizontal',
-      [styles$d['divider-vertical']]: orientation === 'vertical'
+      [styles$e['divider-solid']]: !isDashed,
+      [styles$e['divider-dashed']]: isDashed,
+      [styles$e['divider-horizontal']]: orientation === 'horizontal',
+      [styles$e['divider-vertical']]: orientation === 'vertical'
     })
   });
 }
@@ -6175,7 +6176,7 @@ const ExpandButton = props => props.totalValues > 1 ? jsxRuntime.jsxs(uiKit.Spac
 }) : null;
 ExpandButton.displayName = 'ExpandButton';
 
-var styles$c = {
+var styles$d = {
   "topAlign": "set-buttons-module__topAlign___3AZwc",
   "gap": "set-buttons-module__gap___38Qr0"
 }; // TODO(pa3): alignment of buttons made in a kinda ugly way (i.e. gap class).
@@ -6196,7 +6197,7 @@ const SetButtons = props => {
         size: "big",
         icon: jsxRuntime.jsx(uiKit.PlusBoldIcon, {})
       }) : jsxRuntime.jsx("div", {
-        className: styles$c.gap
+        className: styles$d.gap
       })]
     })
   });
@@ -6566,7 +6567,7 @@ CustomLocalizedTextInput.displayName = 'CustomLocalizedTextInput';
 
 function ownKeys$S(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; }
 function _objectSpread$S(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$S(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$S(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-var styles$b = {
+var styles$c = {
   "container": "custom-money-input-module__container___1fdO2"
 };
 const fixCurrencyCode = (value, currencies) => {
@@ -6631,7 +6632,7 @@ function CustomMoneyInput(props) {
 
   // TODO(pa3): fix setting proper id in UIKit
   return jsxRuntime.jsxs("div", {
-    className: styles$b.container,
+    className: styles$c.container,
     "aria-labelledby": props.name,
     children: [jsxRuntime.jsx(uiKit.AccessibleHidden, {
       children: jsxRuntime.jsx("label", {
@@ -7819,10 +7820,15 @@ const useDnDContext = () => {
 const _excluded$1 = ["WrapperComponent"];
 function ownKeys$J(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; }
 function _objectSpread$J(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$J(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$J(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const textAttributeTypes = ['text', 'ltext'];
 const getFieldName = (parentName, fieldName) => {
   if (!parentName) return fieldName;
   return `${parentName}.${fieldName}`;
 };
+const isTextAttribute = function () {
+  let fieldDefinitionType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _includesInstanceProperty__default["default"](textAttributeTypes).call(textAttributeTypes, fieldDefinitionType.name);
+};
 const isNested = fieldDefinition => {
   const type = fieldDefinition.type;
   const typeName = type.name.toLowerCase();
@@ -7841,6 +7847,7 @@ const CustomFieldsInternal = _ref => {
     values = _valuesInstanceProperty__default["default"](_useFormikContext),
     handleBlur = _useFormikContext.handleBlur,
     status = _useFormikContext.status;
+  const isTailoringAttributesEnabled = applicationShell.useFeatureToggle(PRODUCT_TAILORING_FOR_ATTRIBUTES);
   const didFormValidationFail = useDidFormValidationFail();
   const fieldDefinitions = omitSetsOfSets(props.fieldDefinitions);
   const _useDnDContext = useDnDContext(),
@@ -7854,6 +7861,7 @@ const CustomFieldsInternal = _ref => {
     children: _mapInstanceProperty__default["default"](fieldDefinitions).call(fieldDefinitions, (fieldDefinition, index) => {
       const fieldName = getFieldName(props.name, fieldDefinition.name);
       const isTouched = Boolean(formik.getIn(touched, fieldName));
+      const isFieldDisabled = props.isDisabled && !(isTextAttribute(fieldDefinition.type) && isTailoringAttributesEnabled);
       const fieldErrors = formik.getIn(errors, fieldName);
       const value = props.inputValuesConverter(fieldName, formik.getIn(values, fieldName));
 
@@ -7871,7 +7879,7 @@ const CustomFieldsInternal = _ref => {
         name: fieldName,
         value: value,
         fieldDefinition: fieldDefinition,
-        isDisabled: props.isDisabled || isDnDMode,
+        isDisabled: isFieldDisabled || isDnDMode,
         isReadOnly: props.isReadOnly,
         onBlur: handleBlur,
         setFieldValue: props.setFieldValue,
@@ -7929,7 +7937,7 @@ const findLabel = (enumType, key) => {
 };
 const convertEnumValues = (value, attributeDefinition) => {
   var _context2, _context3;
-  if (isNil__default["default"](value)) return value;
+  if (isEmpty__default["default"](value)) return value;
   const typeName = getTypeName(attributeDefinition.type);
   if (_includesInstanceProperty__default["default"](_context2 = ['enum', 'lenum']).call(_context2, typeName)) return value.key;
   if (typeName === 'set' && _includesInstanceProperty__default["default"](_context3 = ['enum', 'lenum']).call(_context3, getTypeName(attributeDefinition.type.elementType))) return _mapInstanceProperty__default["default"](value).call(value, _ref => {
@@ -7940,7 +7948,7 @@ const convertEnumValues = (value, attributeDefinition) => {
 };
 const customFieldToAttribute = (value, attributeDefinition) => {
   var _context4, _context5;
-  if (isNil__default["default"](value)) return value;
+  if (isEmpty__default["default"](value)) return value;
   if (!attributeDefinition) return value;
   const type = attributeDefinition.type;
   const typeName = getTypeName(type);
@@ -8513,7 +8521,7 @@ ProductSelectionsPicker.defaultProps = {
 };
 
 // NOTE: this component is duplicated in `app-shell/from-core`.
-var styles$a = {
+var styles$b = {
   "colored": "required-indicator-module__colored____YUFm",
   "indicatorAsterisk": "required-indicator-module__indicatorAsterisk___3lEdX"
 };
@@ -8521,8 +8529,8 @@ const RequiredIndicator = _ref => {
   let uncolored = _ref.uncolored;
   return jsxRuntime.jsx("em", {
     className: classnames__default["default"]({
-      [styles$a.colored]: !uncolored,
-      [styles$a.indicatorAsterisk]: true
+      [styles$b.colored]: !uncolored,
+      [styles$b.indicatorAsterisk]: true
     }),
     children: '*'
   });
@@ -8577,7 +8585,7 @@ var messages$r = reactIntl.defineMessages({
   }
 });
 
-var styles$9 = {
+var styles$a = {
   "container": "selectable-field-search-input-module__container___z2ltR",
   "search-mode-menu": "selectable-field-search-input-module__search-mode-menu___Od6Le"
 };
@@ -8588,7 +8596,7 @@ const SelectableFieldSearchInput = props => {
     setSearchText = _useState2[1];
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
-    className: styles$9.container,
+    className: styles$a.container,
     children: jsxRuntime.jsx(uiKit.SelectableSearchInput, {
       menuHorizontalConstraint: 5,
       options: props.options,
@@ -8985,7 +8993,7 @@ const useStoresByFieldFetcher = function (stores, predicateField, projectKey) {
 function ownKeys$C(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; }
 function _objectSpread$C(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$C(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$C(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 var FetchStoresByWherePredicate = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchStoresByWherePredicate" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "skipFetchingStores" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "excludeProductSelections" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "storesByWherePredicate" }, name: { kind: "Name", value: "stores" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "skipFetchingStores" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "excludeProductSelections" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "active" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "productSelection" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }] } }] } }] } }], loc: { start: 0, end: 525, source: { body: "query FetchStoresByWherePredicate(\n  $where: String!\n  $skipFetchingStores: Boolean!\n  $excludeProductSelections: Boolean!\n) {\n  storesByWherePredicate: stores(where: $where) @skip(if: $skipFetchingStores) {\n    results {\n      id\n      key\n      nameAllLocales {\n        locale\n        value\n      }\n      productSelections @skip(if: $excludeProductSelections) {\n        active\n        productSelection {\n          id\n          nameAllLocales {\n            locale\n            value\n          }\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-var styles$8 = {
+var styles$9 = {
   "renderLabelContainer": "stores-search-selector-module__renderLabelContainer___3_PBc",
   "customLabel": "stores-search-selector-module__customLabel___1Xse8"
 }; // check wether there are any errors
@@ -9099,9 +9107,9 @@ const StoresSearchSelectInput = props => {
   const renderNoOptions = _ref4 => {
     let inputValue = _ref4.inputValue;
     return jsxRuntime.jsxs("div", {
-      className: styles$8.renderLabelContainer,
+      className: styles$9.renderLabelContainer,
       children: [jsxRuntime.jsx("div", {
-        className: styles$8.customLabel,
+        className: styles$9.customLabel,
         children: props?.renderLabel && props?.renderLabel
       }), jsxRuntime.jsx("div", {
         children: intl.formatMessage(inputValue ? messages$q.searchSelectInputNoOptionsFoundMessage : messages$q.searchSelectInputNoValueMessage)
@@ -9160,6 +9168,9 @@ StoresSearchSelectInput.defaultProps = {
 
 function ownKeys$B(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; }
 function _objectSpread$B(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$B(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$B(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+var styles$8 = {
+  "customOption": "store-select-input-module__customOption___2SC00"
+};
 const StoreSelectInput = props => {
   const totalNumberOfStoresFetcher = useTotalNumberOfStoresFetcher(props.projectKey);
   const components = React.useMemo(() => {
@@ -9169,13 +9180,17 @@ const StoreSelectInput = props => {
         if (optionInnerProps.isDisabled) {
           return jsxRuntime.jsx(uiKit.SelectInput.Option, _objectSpread$B({}, optionInnerProps));
         }
-        return jsxRuntime.jsx(selectUtils.CustomSelectInputOption, {
-          optionType: props.optionType,
-          optionInnerProps: optionInnerProps
+        const isSearchSelectInput = totalNumberOfStoresFetcher.total > props.upperStoresLimit;
+        return jsxRuntime.jsx("div", {
+          className: isSearchSelectInput ? styles$8.customOption : '',
+          children: jsxRuntime.jsx(selectUtils.CustomSelectInputOption, {
+            optionType: props.optionType,
+            optionInnerProps: optionInnerProps
+          })
         });
       }
     };
-  }, [props.optionType]);
+  }, [props.optionType, totalNumberOfStoresFetcher.total, props.upperStoresLimit]);
   if (totalNumberOfStoresFetcher.isLoading) return jsxRuntime.jsx(CenteredLoadingSpinner, {});
   const CustomStoreSelectInput = totalNumberOfStoresFetcher.total <= props.lowerStoresLimit ? StoresBasicSelectInput : totalNumberOfStoresFetcher.total <= props.upperStoresLimit ? StoresAsyncSelectInput : StoresSearchSelectInput;
   return jsxRuntime.jsx(CustomStoreSelectInput, _objectSpread$B(_objectSpread$B({
@@ -10083,7 +10098,9 @@ const mapTypeDefinitionsToOptions = (typeDefinitions, language, languages, selec
   }));
 };
 
-// Used to generate form state when the user selects a type definition from the dropdown
+/**
+ * Creates a new form state based on the selected type definition from the dropdown.
+ */
 const createFormStateFromTypeDefinition = selectedTypeDefinition => {
   return {
     type: {
@@ -10106,7 +10123,8 @@ const CustomTypeSubform = _ref => {
   const _useFormikContext = formik.useFormikContext(),
     formValues = _valuesInstanceProperty__default["default"](_useFormikContext),
     setFieldValue = _useFormikContext.setFieldValue,
-    validateForm = _useFormikContext.validateForm;
+    validateForm = _useFormikContext.validateForm,
+    initialValues = _useFormikContext.initialValues;
   const _useIntl = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
@@ -10119,8 +10137,23 @@ const CustomTypeSubform = _ref => {
   const handleTypeDefinitionSelect = React.useCallback(event => {
     const selectedTypeDefinition = _findInstanceProperty__default["default"](typeDefinitions).call(typeDefinitions, typeDefinition => typeDefinition.type.key === event.target.value);
     if (selectedTypeDefinition) {
-      const nextCustom = createFormStateFromTypeDefinition(selectedTypeDefinition);
-      setFieldValue(rootFieldName, nextCustom).then(() => {
+      const initialValueCustomType = initialValues[rootFieldName];
+      const selectedCustomTypeKey = selectedTypeDefinition?.type.key;
+      let newFieldValue;
+
+      /**
+       * If the user selects the same custom type that was already selected, we need to reset the `custom` field
+       * back to its initial value to ensure that the form state is consistent with the initial values.
+       */
+      if (initialValueCustomType?.type?.obj?.key === selectedCustomTypeKey) {
+        newFieldValue = initialValueCustomType;
+        /**
+         * Otherwise, set the `custom` field to the new custom type definition.
+         */
+      } else {
+        newFieldValue = createFormStateFromTypeDefinition(selectedTypeDefinition);
+      }
+      setFieldValue(rootFieldName, newFieldValue).then(() => {
         validateForm();
       });
     } else {
@@ -10225,7 +10258,7 @@ const defaultValue = {
 const PimIndexerContext = /*#__PURE__*/React.createContext(defaultValue);
 
 var FetchIndicesExist = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchIndicesExist" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "indicesExist" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "products" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "searchableIndexExists" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "newInProgress" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "productTypes" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "searchableIndexExists" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "newInProgress" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 191, source: { body: "query FetchIndicesExist {\n  indicesExist {\n    products {\n      searchableIndexExists\n      newInProgress\n    }\n    productTypes {\n      searchableIndexExists\n      newInProgress\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-var fetchPimIndexStatus = ((apolloClient, projectKey) => async dispatch => {
+var fetchPimIndexStatus = (apolloClient, projectKey) => async dispatch => {
   try {
     await dispatch(sdk.actions.head({
       mcApiProxyTarget: constants.MC_API_PROXY_TARGETS.PIM_SEARCH,
@@ -10263,7 +10296,7 @@ var fetchPimIndexStatus = ((apolloClient, projectKey) => async dispatch => {
       status: 'unreachable'
     };
   }
-});
+};
 
 var messages$n = reactIntl.defineMessages({
   indexingSucceed: {