@commercetools-frontend/experimental-components 6.0.0 → 6.0.2

package/dist/commercetools-frontend-experimental-components.esm.js

@@ -151,6 +151,9 @@ const INTERVALS_IN_SECONDS = {
 };
 const EXCLUDING_PRODUCTS = 'excludingProducts';
 
+// TODO: apply a more robust solution to overlaying issues
+const Z_INDEX_DROPDOWN = 30000;
+
 const formats = {
   en: [',', '.'],
   de: ['.', ','],
@@ -329,6 +332,11 @@ const messages$K = defineMessages({
     id: 'Validation.invalid',
     description: 'An error message to show the id is invalid',
     defaultMessage: 'The resource id is invalid'
+  },
+  uuid: {
+    id: 'Validation.uuid',
+    description: 'An error message to show the id is not a valid uuid',
+    defaultMessage: 'Invalid ID format. Please enter a valid ID.'
   }
 });
 
@@ -2906,7 +2914,8 @@ const ChannelPickerInput = _ref => {
     hasError = _ref.hasError,
     onError = _ref.onError,
     placeholder = _ref.placeholder,
-    roles = _ref.roles;
+    roles = _ref.roles,
+    hasWarning = _ref.hasWarning;
   const formatLocalizedFieldToString = useFormatLocalizedFieldToString();
   const _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -3001,7 +3010,10 @@ const ChannelPickerInput = _ref => {
           onBlur: onBlur,
           value: currentOption.data,
           noOptionsMessage: handleNoOptions,
-          hasError: hasError || isLoadingFailed
+          hasError: hasError || isLoadingFailed,
+          menuPortalZIndex: Z_INDEX_DROPDOWN,
+          menuPortalTarget: document.body,
+          hasWarning: hasWarning
         })
       }), isLoadingFailed && jsx(Text.Body, {
         tone: "negative",
@@ -3796,7 +3808,8 @@ const ProductTypePickerInput = _ref => {
     onBlur = _ref.onBlur,
     value = _ref.value,
     hasError = _ref.hasError,
-    onError = _ref.onError;
+    onError = _ref.onError,
+    hasWarning = _ref.hasWarning;
   const _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   const prefixSearchFields = useMemo(() => ['name'], []);
@@ -3862,7 +3875,10 @@ const ProductTypePickerInput = _ref => {
           onBlur: onBlur,
           value: currentOption.data,
           noOptionsMessage: () => loadingError ? null : formatMessage(messages$D.noProductTypesFound),
-          hasError: hasError || isLoadingFailed
+          hasError: hasError || isLoadingFailed,
+          menuPortalZIndex: Z_INDEX_DROPDOWN,
+          menuPortalTarget: document.body,
+          hasWarning: hasWarning
         })
       }), isLoadingFailed && jsx(Text.Body, {
         tone: "negative",
@@ -3897,7 +3913,8 @@ const StatePickerInput = _ref => {
     onBlur = _ref.onBlur,
     value = _ref.value,
     hasError = _ref.hasError,
-    onError = _ref.onError;
+    onError = _ref.onError,
+    hasWarning = _ref.hasWarning;
   const formatLocalizedFieldToString = useFormatLocalizedFieldToString();
   const _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -3983,7 +4000,10 @@ const StatePickerInput = _ref => {
           onBlur: onBlur,
           value: currentOption.data,
           noOptionsMessage: handleNoOptions,
-          hasError: hasError || isLoadingFailed
+          hasError: hasError || isLoadingFailed,
+          menuPortalZIndex: Z_INDEX_DROPDOWN,
+          menuPortalTarget: document.body,
+          hasWarning: hasWarning
         }, dataLocale)
       }), isLoadingFailed && jsx(Text.Body, {
         tone: "negative",
@@ -4363,7 +4383,6 @@ const convertAction = (actionName, actionPayload) => {
         }
       };
     case 'setLineItemCustomField':
-    case 'setCustomLineItemCustomField':
       return {
         [actionName]: {
           lineItemId: actionPayload.lineItemId,
@@ -4371,6 +4390,14 @@ const convertAction = (actionName, actionPayload) => {
           value: _JSON$stringify(actionPayload.value)
         }
       };
+    case 'setCustomLineItemCustomField':
+      return {
+        [actionName]: {
+          customLineItemId: actionPayload.customLineItemId,
+          name: actionPayload.name,
+          value: _JSON$stringify(actionPayload.value)
+        }
+      };
     case 'setCustomField':
       return {
         [actionName]: {
@@ -5122,7 +5149,7 @@ function _callSuper$4(_this, derived, args) {
   return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? _Reflect$construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
 }
 var FetchTypeDefinitionsWithNamesQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchTypeDefinitionsWithNamesQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "limit" } }, type: { kind: "NamedType", name: { kind: "Name", value: "Int" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "offset" } }, type: { kind: "NamedType", name: { kind: "Name", value: "Int" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "typeDefinitions" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "Variable", name: { kind: "Name", value: "limit" } } }, { kind: "Argument", name: { kind: "Name", value: "offset" }, value: { kind: "Variable", name: { kind: "Name", value: "offset" } } }], directives: [], 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: "value" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "fieldDefinitions" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "required" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "InlineFragment", typeCondition: { kind: "NamedType", name: { kind: "Name", value: "ReferenceType" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "referenceTypeId" }, arguments: [], directives: [] }] } }, { kind: "InlineFragment", typeCondition: { kind: "NamedType", name: { kind: "Name", value: "SetType" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "elementType" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "InlineFragment", typeCondition: { kind: "NamedType", name: { kind: "Name", value: "ReferenceType" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "referenceTypeId" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "InlineFragment", typeCondition: { kind: "NamedType", name: { kind: "Name", value: "EnumType" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "values" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "label" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "InlineFragment", typeCondition: { kind: "NamedType", name: { kind: "Name", value: "LocalizedEnumType" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "values" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, 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: "InlineFragment", typeCondition: { kind: "NamedType", name: { kind: "Name", value: "LocalizedEnumType" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "values" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, 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: "InlineFragment", typeCondition: { kind: "NamedType", name: { kind: "Name", value: "EnumType" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "values" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "label" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "inputHint" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 1445, source: { body: "query FetchTypeDefinitionsWithNamesQuery(\n  $where: String\n  $limit: Int\n  $offset: Int\n) {\n  typeDefinitions(where: $where, limit: $limit, offset: $offset) {\n    results {\n      id\n      key\n      nameAllLocales {\n        value\n        locale\n      }\n      fieldDefinitions {\n        required\n        type {\n          name\n          ... on ReferenceType {\n            referenceTypeId\n          }\n          ... on SetType {\n            elementType {\n              name\n              ... on ReferenceType {\n                referenceTypeId\n                name\n              }\n              ... on EnumType {\n                values {\n                  key\n                  label\n                }\n                name\n              }\n              ... on LocalizedEnumType {\n                values {\n                  key\n                  labelAllLocales {\n                    locale\n                    value\n                  }\n                }\n              }\n            }\n          }\n          ... on LocalizedEnumType {\n            values {\n              key\n              labelAllLocales {\n                locale\n                value\n              }\n            }\n          }\n          ... on EnumType {\n            values {\n              key\n              label\n            }\n            name\n          }\n        }\n        name\n        labelAllLocales {\n          value\n          locale\n        }\n        inputHint\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-const customizableResources = ['asset', 'address', 'business-unit', 'category', 'channel', 'customer', 'customer-group', 'order', 'order-delivery', 'store', 'discount-code', 'inventory-entry', 'line-item', 'custom-line-item', 'product-price', 'payment', 'payment-interface-interaction', 'shipping-method', 'shopping-list', 'shopping-list-text-line-item', 'standalone-price', 'review', 'cart-discount', 'product-selection', 'order-return-item', 'order-parcel'];
+const customizableResources = ['asset', 'address', 'business-unit', 'category', 'channel', 'customer', 'customer-group', 'order', 'quote', 'order-delivery', 'store', 'discount-code', 'inventory-entry', 'line-item', 'custom-line-item', 'product-price', 'payment', 'payment-interface-interaction', 'shipping-method', 'shopping-list', 'shopping-list-text-line-item', 'standalone-price', 'review', 'cart-discount', 'product-selection', 'order-return-item', 'order-parcel'];
 const emptyTypeDefinitions = {
   total: 0,
   count: 0,
@@ -5460,7 +5487,10 @@ function CustomTextInput(props) {
   const isMultiLine = props.fieldDefinition.inputHint === 'MultiLine';
   const InputComponent = isMultiLine ? MultilineTextInput : TextInput;
   const value = props.value || '';
-  const handleChange = makeChangeHandler(rawValue => props.setFieldValue(props.name, rawValue || undefined));
+  const handleChange = makeChangeHandler(rawValue => {
+    props.setFieldValue(props.name, rawValue || undefined);
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
+  });
   const tooltipValue = isMultiLine ? '' : value;
   return jsx(CustomFieldTooltip, {
     title: tooltipValue,
@@ -5472,7 +5502,8 @@ function CustomTextInput(props) {
       onBlur: props.onBlur,
       hasError: props.hasError,
       isDisabled: props.isDisabled,
-      isReadOnly: props.isReadOnly
+      isReadOnly: props.isReadOnly,
+      hasWarning: props.hasWarning
     })
   });
 }
@@ -5507,6 +5538,7 @@ function CustomLocalizedTextInput(props) {
     });
     const nullifiedIfNeeded = LocalizedTextInput.isEmpty(newValue) ? undefined : newValue;
     props.setFieldValue(props.name, nullifiedIfNeeded);
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
   });
   const InputComponent = isMultiLine ? LocalizedMultilineTextInput : LocalizedTextInput;
   const tooltipTitle = isMultiLine ? '' : value ? value[language] ?? '' : '';
@@ -5521,7 +5553,8 @@ function CustomLocalizedTextInput(props) {
       selectedLanguage: language,
       hasError: props.hasError,
       isDisabled: props.isDisabled,
-      isReadOnly: props.isReadOnly
+      isReadOnly: props.isReadOnly,
+      hasWarning: props.hasWarning
     })
   });
 }
@@ -5536,7 +5569,10 @@ const options$1 = [{
 }];
 function CustomBooleanInput(props) {
   const value = isNil$1(props.value) ? props.value : String(props.value);
-  const handleChange = makeChangeHandler(rawValue => props.setFieldValue(props.name, isNil$1(rawValue) ? undefined : rawValue === 'true'));
+  const handleChange = makeChangeHandler(rawValue => {
+    props.setFieldValue(props.name, isNil$1(rawValue) ? undefined : rawValue === 'true');
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
+  });
   return jsx(SelectInput, {
     id: props.name,
     name: props.name,
@@ -5547,14 +5583,20 @@ function CustomBooleanInput(props) {
     isClearable: !props.fieldDefinition.required,
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
-    hasError: props.hasError
+    hasError: props.hasError,
+    menuPortalZIndex: Z_INDEX_DROPDOWN,
+    menuPortalTarget: document.body,
+    hasWarning: props.hasWarning
   });
 }
 CustomBooleanInput.displayName = 'CustomBooleanInput';
 
 function CustomNumberInput(props) {
   const value = props.value ?? '';
-  const handleChange = makeChangeHandler(rawValue => props.setFieldValue(props.name, !rawValue ? undefined : Number(rawValue)));
+  const handleChange = makeChangeHandler(rawValue => {
+    props.setFieldValue(props.name, !rawValue ? undefined : Number(rawValue));
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
+  });
   return jsx(NumberInput, {
     id: props.name,
     name: props.name,
@@ -5563,7 +5605,8 @@ function CustomNumberInput(props) {
     onBlur: props.onBlur,
     hasError: props.hasError,
     isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly
+    isReadOnly: props.isReadOnly,
+    hasWarning: props.hasWarning
   });
 }
 CustomNumberInput.displayName = 'CustomNumberInput';
@@ -5630,6 +5673,7 @@ function CustomMoneyInput(props) {
     internalValue.current = fixedValue;
     const converted = MoneyInput.convertToMoneyValue(fixedValue, locale);
     props.setFieldValue(props.name, converted || undefined);
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
   });
 
   // TODO(pa3): fix setting proper id in UIKit
@@ -5651,7 +5695,10 @@ function CustomMoneyInput(props) {
       isReadOnly: props.isReadOnly,
       isDisabled: props.isDisabled,
       hasError: props.hasError,
-      horizontalConstraint: "scale"
+      horizontalConstraint: "scale",
+      menuPortalZIndex: Z_INDEX_DROPDOWN,
+      menuPortalTarget: document.body,
+      hasWarning: props.hasWarning
     })]
   });
 }
@@ -5677,7 +5724,10 @@ function CustomLocalizedEnumInput(props) {
     languages = _useApplicationContex.languages,
     dataLocale = _useApplicationContex.dataLocale;
   const options = convertTypeValuesToOptions$1(props.fieldDefinition.type, dataLocale, languages);
-  const handleChange = makeChangeHandler(rawValue => props.setFieldValue(props.name, rawValue));
+  const handleChange = makeChangeHandler(rawValue => {
+    props.setFieldValue(props.name, rawValue);
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
+  });
   const tooltipTitle = props.value ? _findInstanceProperty(options).call(options, option => option.value === props.value)?.label ?? '' : '';
   return jsx(CustomFieldTooltip, {
     title: tooltipTitle,
@@ -5691,7 +5741,10 @@ function CustomLocalizedEnumInput(props) {
       isClearable: !props.fieldDefinition.required,
       hasError: props.hasError,
       isDisabled: props.isDisabled,
-      isReadOnly: props.isReadOnly
+      isReadOnly: props.isReadOnly,
+      menuPortalZIndex: Z_INDEX_DROPDOWN,
+      menuPortalTarget: document.body,
+      hasWarning: props.hasWarning
     })
   });
 }
@@ -5708,7 +5761,8 @@ function CustomRawIdReferenceInput(props) {
       onBlur: props.onBlur,
       hasError: props.hasError,
       isDisabled: props.isDisabled,
-      isReadOnly: props.isReadOnly
+      isReadOnly: props.isReadOnly,
+      hasWarning: props.hasWarning
     })
   });
 }
@@ -5893,7 +5947,10 @@ function ReferenceSearch(props) {
           isReadOnly: props.isReadOnly,
           onBlur: props.onBlur,
           hasError: props.hasError,
-          noOptionsMessage: () => props.noResultsLabel
+          noOptionsMessage: () => props.noResultsLabel,
+          menuPortalZIndex: Z_INDEX_DROPDOWN,
+          menuPortalTarget: document.body,
+          hasWarning: props.hasWarning
         })]
       })
     })]
@@ -6023,7 +6080,8 @@ function CategoryReferenceSearch(props) {
     mapItemToOption: mapItemToOption,
     loadItemsBySearchTerm: loadItemsBySearchTerm,
     loadItemsByIds: loadItemsByIds,
-    filterOption: filterOption$1
+    filterOption: filterOption$1,
+    hasWarning: props.hasWarning
   });
 }
 
@@ -6226,7 +6284,8 @@ function CartDiscountReferenceSearch(props) {
       mapItemToOption: mapItemToOption,
       loadItemsBySearchTerm: loadItemsBySearchTerm,
       loadItemsByIds: loadItemsByIds,
-      filterOption: filterOption
+      filterOption: filterOption,
+      hasWarning: props.hasWarning
     })
   });
 }
@@ -6253,7 +6312,8 @@ function CustomCategoryReferenceInput(props) {
     hasError: props.hasError,
     isReadOnly: props.isReadOnly,
     isDisabled: props.isDisabled,
-    isClearable: !props.fieldDefinition.required
+    isClearable: !props.fieldDefinition.required,
+    hasWarning: props.hasWarning
   });
 }
 CustomCategoryReferenceInput.displayName = 'CustomCategoryReferenceInput';
@@ -6279,7 +6339,8 @@ function CustomCartDiscountReferenceInput(props) {
     onBlur: handleBlur,
     hasError: props.hasError,
     isDisabled: props.isDisabled || props.isReadOnly,
-    isClearable: !props.fieldDefinition.required
+    isClearable: !props.fieldDefinition.required,
+    hasWarning: props.hasWarning
   });
 }
 
@@ -6312,7 +6373,8 @@ const ProductPickerInput = _ref => {
     value = _ref.value,
     hasError = _ref.hasError,
     onError = _ref.onError,
-    showLoadingErrorMessage = _ref.showLoadingErrorMessage;
+    showLoadingErrorMessage = _ref.showLoadingErrorMessage,
+    hasWarning = _ref.hasWarning;
   const formatLocalizedFieldToString = useFormatLocalizedFieldToString();
   const _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -6395,7 +6457,10 @@ const ProductPickerInput = _ref => {
           onBlur: onBlur,
           value: currentOption.data,
           noOptionsMessage: () => isLoadingFailed ? null : formatMessage(messages$z.noProductsFound),
-          hasError: hasError || isLoadingFailed
+          hasError: hasError || isLoadingFailed,
+          menuPortalZIndex: Z_INDEX_DROPDOWN,
+          menuPortalTarget: document.body,
+          hasWarning: hasWarning
         })
       }), isLoadingFailed && showLoadingErrorMessage && jsx(Text.Body, {
         tone: "negative",
@@ -6418,7 +6483,8 @@ function CustomProductReferenceInput(props) {
     onChange: props.onChange,
     hasError: props.hasError,
     onError: () => null,
-    showLoadingErrorMessage: true
+    showLoadingErrorMessage: true,
+    hasWarning: props.hasWarning
   });
 }
 CustomProductReferenceInput.displayName = 'CustomProductReferenceInput';
@@ -6434,7 +6500,8 @@ function CustomProductTypeReferenceInput(props) {
     onBlur: props.onBlur,
     onChange: props.onChange,
     hasError: props.hasError,
-    onError: () => null
+    onError: () => null,
+    hasWarning: props.hasWarning
   });
 }
 CustomProductTypeReferenceInput.displayName = 'CustomProductTypeReferenceInput';
@@ -6450,7 +6517,8 @@ function CustomChannelReferenceInput(props) {
     onBlur: props.onBlur,
     onChange: props.onChange,
     hasError: props.hasError,
-    onError: () => null
+    onError: () => null,
+    hasWarning: props.hasWarning
   });
 }
 CustomChannelReferenceInput.displayName = 'CustomChannelReferenceInput';
@@ -6466,7 +6534,8 @@ function CustomStateReferenceInput(props) {
     onBlur: props.onBlur,
     onChange: props.onChange,
     hasError: props.hasError,
-    onError: () => null
+    onError: () => null,
+    hasWarning: props.hasWarning
   });
 }
 CustomStateReferenceInput.displayName = 'CustomStateReferenceInput';
@@ -6480,6 +6549,7 @@ function CustomReferenceInput(props) {
       typeId: referenceTypeId
     } : undefined;
     props.setFieldValue(props.name, nullifiedIfNeeded);
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
   });
   const ReferenceInputComponent = referenceTypeId === SEARCHABLE_REFERENCES.category ? CustomCategoryReferenceInput : referenceTypeId === SEARCHABLE_REFERENCES.cartDiscount ? CustomCartDiscountReferenceInput : referenceTypeId === SEARCHABLE_REFERENCES.product ? CustomProductReferenceInput : referenceTypeId === SEARCHABLE_REFERENCES.productType ? CustomProductTypeReferenceInput : referenceTypeId === SEARCHABLE_REFERENCES.channel ? CustomChannelReferenceInput : referenceTypeId === SEARCHABLE_REFERENCES.state ? CustomStateReferenceInput : CustomRawIdReferenceInput;
   return jsx(ReferenceInputComponent, {
@@ -6492,7 +6562,8 @@ function CustomReferenceInput(props) {
     isReadOnly: props.isReadOnly,
     onBlur: props.onBlur,
     hasError: props.hasError,
-    onChange: handleChange
+    onChange: handleChange,
+    hasWarning: props.hasWarning
   });
 }
 CustomReferenceInput.displayName = 'CustomReferenceInput';
@@ -6503,6 +6574,7 @@ function CustomDateTimeInput(props) {
   const typeName = props.fieldDefinition.type.name.toLowerCase();
   const handleChange = makeChangeHandler(rawValue => {
     props.setFieldValue(props.name, rawValue || undefined);
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
   });
   const InputComponent = typeName === 'date' ? DateInput : DateTimeInput;
   return jsx(InputComponent, {
@@ -6514,7 +6586,8 @@ function CustomDateTimeInput(props) {
     timeZone: timeZone,
     hasError: props.hasError,
     isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly
+    isReadOnly: props.isReadOnly,
+    hasWarning: props.hasWarning
   });
 }
 CustomDateTimeInput.displayName = 'CustomDateTimeInput';
@@ -6549,6 +6622,7 @@ function CustomTimeInput(props) {
       lastValueSentToFormik.current = in24hFormat;
       props.setFieldValue(props.name, in24hFormat);
     }
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
   });
   return jsx(TimeInput, {
     id: props.name,
@@ -6559,7 +6633,8 @@ function CustomTimeInput(props) {
     timeZone: timeZone,
     hasError: props.hasError,
     isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly
+    isReadOnly: props.isReadOnly,
+    hasWarning: props.hasWarning
   });
 }
 CustomTimeInput.displayName = 'CustomTimeInput';
@@ -6570,7 +6645,10 @@ const convertTypeValuesToOptions = defaultMemoize(typeValues => _mapInstanceProp
 })));
 function CustomEnumInput(props) {
   const options = convertTypeValuesToOptions(_valuesInstanceProperty(props.fieldDefinition.type));
-  const handleChange = makeChangeHandler(rawValue => props.setFieldValue(props.name, rawValue));
+  const handleChange = makeChangeHandler(rawValue => {
+    props.setFieldValue(props.name, rawValue);
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
+  });
   const tooltipTitle = props.value ? _findInstanceProperty(options).call(options, option => option.value === props.value)?.label ?? '' : '';
   return jsx(CustomFieldTooltip, {
     title: tooltipTitle,
@@ -6584,7 +6662,10 @@ function CustomEnumInput(props) {
       options: options,
       hasError: props.hasError,
       isDisabled: props.isDisabled,
-      isReadOnly: props.isReadOnly
+      isReadOnly: props.isReadOnly,
+      hasWarning: props.hasWarning,
+      menuPortalZIndex: Z_INDEX_DROPDOWN,
+      menuPortalTarget: document.body
     })
   });
 }
@@ -6633,8 +6714,11 @@ function CustomBooleanInputSet(props) {
     onBlur: props.onBlur,
     isClearable: !props.fieldDefinition.required,
     hasError: props.hasError,
+    hasWarning: props.hasWarning,
     isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly
+    isReadOnly: props.isReadOnly,
+    menuPortalZIndex: Z_INDEX_DROPDOWN,
+    menuPortalTarget: document.body
   });
 }
 CustomBooleanInputSet.displayName = 'CustomBooleanInputSet';
@@ -6685,7 +6769,8 @@ const attributeDefinitionToFieldDefinition = attributeDefinition => ({
   inputTip: attributeDefinition.inputTip,
   required: attributeDefinition.isRequired,
   type: attributeDefinition.type,
-  assignedAttributeGroups: attributeDefinition.assignedAttributeGroups
+  assignedAttributeGroups: attributeDefinition.assignedAttributeGroups,
+  attributeConstraint: attributeDefinition.attributeConstraint
 });
 const nameValuePairsToMap = pairs => _reduceInstanceProperty(pairs).call(pairs, (result, _ref2) => {
   let name = _ref2.name,
@@ -6739,7 +6824,10 @@ function ProductAttributes(_ref) {
         fieldDefinitions: fieldDefinitions,
         setFieldValue: setFieldValue,
         inputValuesConverter: convertInputValue,
-        WrapperComponent: WrapperComponent
+        WrapperComponent: WrapperComponent,
+        renderWarnings: props.renderWarnings,
+        renderCustomWarnings: props.renderCustomWarnings,
+        handleWarningChange: props.handleWarningChange
       })
     })
   });
@@ -7347,7 +7435,10 @@ function CustomInputSet(props) {
                 setFieldValue: setItemValue,
                 value: fieldValue,
                 hasError: props.hasError,
-                WrapperComponent: props.WrapperComponent
+                hasWarning: props.hasWarning,
+                WrapperComponent: props.WrapperComponent,
+                renderWarnings: props.renderWarnings,
+                handleWarningChange: props.handleWarningChange
               }), jsx(SetButtons, {
                 index: index,
                 isFirstItem: !isExpanded || index === 0,
@@ -7410,7 +7501,10 @@ const CustomFieldInput = /*#__PURE__*/memo(props => {
     isReadOnly: props.isReadOnly,
     onBlur: props.onBlur,
     setFieldValue: props.setFieldValue,
-    hasError: props.hasError
+    hasError: props.hasError,
+    hasWarning: props.hasWarning,
+    handleWarningChange: props.handleWarningChange,
+    renderWarnings: props.renderWarnings
   });
 });
 CustomFieldInput.displayName = 'CustomFieldInput';
@@ -7466,7 +7560,10 @@ function CustomNestedFieldInput(props) {
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,
       setFieldValue: props.setFieldValue,
-      onBlur: props.onBlur
+      onBlur: props.onBlur,
+      hasWarning: props.hasWarning,
+      handleWarningChange: props.handleWarningChange,
+      renderWarnings: props.renderWarnings
     })]
   });
 }
@@ -7690,7 +7787,8 @@ const CustomFieldsInternal = _ref => {
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched,
     values = _valuesInstanceProperty(_useFormikContext),
-    handleBlur = _useFormikContext.handleBlur;
+    handleBlur = _useFormikContext.handleBlur,
+    status = _useFormikContext.status;
   const didFormValidationFail = useDidFormValidationFail();
   const fieldDefinitions = omitSetsOfSets(props.fieldDefinitions);
   const _useDnDContext = useDnDContext(),
@@ -7706,6 +7804,7 @@ const CustomFieldsInternal = _ref => {
       const isTouched = Boolean(getIn(touched, fieldName));
       const fieldErrors = getIn(errors, fieldName);
       const value = props.inputValuesConverter(fieldName, getIn(values, fieldName));
+
       // We want to highlight fields with errors not only after a form submission,
       // but also after manually triggered form validation.
       const hasError = Boolean(fieldErrors) && (isTouched || didFormValidationFail);
@@ -7724,7 +7823,10 @@ const CustomFieldsInternal = _ref => {
         isReadOnly: props.isReadOnly,
         onBlur: handleBlur,
         setFieldValue: props.setFieldValue,
-        hasError: hasError
+        hasError: hasError,
+        hasWarning: props.renderWarnings && status?.warnings[fieldName],
+        handleWarningChange: props.handleWarningChange,
+        renderWarnings: props.renderWarnings
       };
       const Field = jsx(FieldComponent, _objectSpread$J({}, fieldProps));
       return jsx(FastField, {
@@ -7748,7 +7850,7 @@ const CustomFieldsInternal = _ref => {
                 alignItems: "stretch",
                 children: [WrapperComponent ? jsx(WrapperComponent, {
                   children: Field
-                }) : Field, jsx(CustomFieldErrors, {
+                }) : Field, props.renderWarnings && status?.warnings[fieldName] && props.renderCustomWarnings(fieldDefinition), jsx(CustomFieldErrors, {
                   isTouched: isTouched,
                   errors: fieldErrors
                 })]
@@ -7761,6 +7863,9 @@ const CustomFieldsInternal = _ref => {
   });
 };
 CustomFieldsInternal.displayName = 'CustomFieldsInternal';
+CustomFieldsInternal.defaultProps = {
+  renderCustomWarnings: () => null
+};
 
 const nopConverter = (fieldName, fieldValue) => fieldValue;
 const CustomFields = props => {
@@ -7893,6 +7998,10 @@ function ProductSelectionBasicSelectDropdown(props) {
     isReadOnly: props.isReadOnly,
     hasWarning: props.hasWarning,
     hasError: props.hasError,
+    errors: {
+      missing: props.hasError
+    },
+    touched: props.touched,
     isClearable: props.isClearable,
     menuPortalTarget: props.menuPortalTarget,
     menuPortalZIndex: props.menuPortalZIndex,
@@ -8012,6 +8121,10 @@ function ProductSelectionsAsyncSelectDropdown(props) {
     defaultOptions: getDefaultOptions(),
     hasWarning: props.hasWarning,
     hasError: props.hasError,
+    errors: {
+      missing: props.hasError
+    },
+    touched: props.touched,
     isClearable: props.isClearable,
     menuPortalTarget: props.menuPortalTarget,
     menuPortalZIndex: props.menuPortalZIndex,
@@ -8156,6 +8269,10 @@ function ProductSelectionsSearchSelectDropdown(props) {
     isDisabled: props.isDisabled || productSelectionsByFieldFetcher.isLoading,
     isReadOnly: props.isReadOnly,
     hasWarning: props.hasWarning,
+    errors: {
+      missing: props.hasError
+    },
+    touched: props.touched,
     isClearable: props.isClearable,
     hasError: props.hasError,
     menuPortalTarget: props.menuPortalTarget,
@@ -8978,6 +9095,7 @@ const StoresSearchSelectInput = props => {
       maxMenuHeight: props.maxMenuHeight,
       menuPortalTarget: props.menuPortalTarget,
       menuPortalZIndex: props.menuPortalZIndex,
+      menuIsOpen: props.menuIsOpen,
       components: props.components,
       controlShouldRenderValue: props.controlShouldRenderValue
     }, filterDataAttributes$1(props)), filterAriaAttributes(props))), jsx(FieldErrors, {
@@ -12628,8 +12746,10 @@ const validateMultiOptionEnum = (selectedOption, intl) => {
 };
 
 // eslint-disable-next-line import/prefer-default-export
-const validateText = (text, intl) => {
+const validateText = function (text, intl) {
+  let type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   if (validateSingleFilter(text)) return intl.formatMessage(messages$K.required);
+  if (type === 'id' && !isUUID(text.value)) return intl.formatMessage(messages$K.uuid);
   return null;
 };