@commercetools-frontend/experimental-components 6.0.0 → 6.0.1

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

@@ -234,6 +234,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: ['.', ','],
@@ -412,6 +415,11 @@ const messages$K = reactIntl.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.'
   }
 });
 
@@ -2989,7 +2997,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 = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -3084,7 +3093,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 && jsxRuntime.jsx(uiKit.Text.Body, {
         tone: "negative",
@@ -3879,7 +3891,8 @@ const ProductTypePickerInput = _ref => {
     onBlur = _ref.onBlur,
     value = _ref.value,
     hasError = _ref.hasError,
-    onError = _ref.onError;
+    onError = _ref.onError,
+    hasWarning = _ref.hasWarning;
   const _useIntl = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
   const prefixSearchFields = React.useMemo(() => ['name'], []);
@@ -3945,7 +3958,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 && jsxRuntime.jsx(uiKit.Text.Body, {
         tone: "negative",
@@ -3980,7 +3996,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 = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -4066,7 +4083,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 && jsxRuntime.jsx(uiKit.Text.Body, {
         tone: "negative",
@@ -4446,7 +4466,6 @@ const convertAction = (actionName, actionPayload) => {
         }
       };
     case 'setLineItemCustomField':
-    case 'setCustomLineItemCustomField':
       return {
         [actionName]: {
           lineItemId: actionPayload.lineItemId,
@@ -4454,6 +4473,14 @@ const convertAction = (actionName, actionPayload) => {
           value: _JSON$stringify__default["default"](actionPayload.value)
         }
       };
+    case 'setCustomLineItemCustomField':
+      return {
+        [actionName]: {
+          customLineItemId: actionPayload.customLineItemId,
+          name: actionPayload.name,
+          value: _JSON$stringify__default["default"](actionPayload.value)
+        }
+      };
     case 'setCustomField':
       return {
         [actionName]: {
@@ -5205,7 +5232,7 @@ function _callSuper$4(_this, derived, args) {
   return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? _Reflect$construct__default["default"](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,
@@ -5543,7 +5570,10 @@ function CustomTextInput(props) {
   const isMultiLine = props.fieldDefinition.inputHint === 'MultiLine';
   const InputComponent = isMultiLine ? uiKit.MultilineTextInput : uiKit.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 jsxRuntime.jsx(CustomFieldTooltip, {
     title: tooltipValue,
@@ -5555,7 +5585,8 @@ function CustomTextInput(props) {
       onBlur: props.onBlur,
       hasError: props.hasError,
       isDisabled: props.isDisabled,
-      isReadOnly: props.isReadOnly
+      isReadOnly: props.isReadOnly,
+      hasWarning: props.hasWarning
     })
   });
 }
@@ -5590,6 +5621,7 @@ function CustomLocalizedTextInput(props) {
     });
     const nullifiedIfNeeded = uiKit.LocalizedTextInput.isEmpty(newValue) ? undefined : newValue;
     props.setFieldValue(props.name, nullifiedIfNeeded);
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
   });
   const InputComponent = isMultiLine ? uiKit.LocalizedMultilineTextInput : uiKit.LocalizedTextInput;
   const tooltipTitle = isMultiLine ? '' : value ? value[language] ?? '' : '';
@@ -5604,7 +5636,8 @@ function CustomLocalizedTextInput(props) {
       selectedLanguage: language,
       hasError: props.hasError,
       isDisabled: props.isDisabled,
-      isReadOnly: props.isReadOnly
+      isReadOnly: props.isReadOnly,
+      hasWarning: props.hasWarning
     })
   });
 }
@@ -5619,7 +5652,10 @@ const options$1 = [{
 }];
 function CustomBooleanInput(props) {
   const value = isNil__default["default"](props.value) ? props.value : String(props.value);
-  const handleChange = makeChangeHandler(rawValue => props.setFieldValue(props.name, isNil__default["default"](rawValue) ? undefined : rawValue === 'true'));
+  const handleChange = makeChangeHandler(rawValue => {
+    props.setFieldValue(props.name, isNil__default["default"](rawValue) ? undefined : rawValue === 'true');
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
+  });
   return jsxRuntime.jsx(uiKit.SelectInput, {
     id: props.name,
     name: props.name,
@@ -5630,14 +5666,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 jsxRuntime.jsx(uiKit.NumberInput, {
     id: props.name,
     name: props.name,
@@ -5646,7 +5688,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';
@@ -5713,6 +5756,7 @@ function CustomMoneyInput(props) {
     internalValue.current = fixedValue;
     const converted = uiKit.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
@@ -5734,7 +5778,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
     })]
   });
 }
@@ -5760,7 +5807,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__default["default"](options).call(options, option => option.value === props.value)?.label ?? '' : '';
   return jsxRuntime.jsx(CustomFieldTooltip, {
     title: tooltipTitle,
@@ -5774,7 +5824,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
     })
   });
 }
@@ -5791,7 +5844,8 @@ function CustomRawIdReferenceInput(props) {
       onBlur: props.onBlur,
       hasError: props.hasError,
       isDisabled: props.isDisabled,
-      isReadOnly: props.isReadOnly
+      isReadOnly: props.isReadOnly,
+      hasWarning: props.hasWarning
     })
   });
 }
@@ -5976,7 +6030,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
         })]
       })
     })]
@@ -6106,7 +6163,8 @@ function CategoryReferenceSearch(props) {
     mapItemToOption: mapItemToOption,
     loadItemsBySearchTerm: loadItemsBySearchTerm,
     loadItemsByIds: loadItemsByIds,
-    filterOption: filterOption$1
+    filterOption: filterOption$1,
+    hasWarning: props.hasWarning
   });
 }
 
@@ -6309,7 +6367,8 @@ function CartDiscountReferenceSearch(props) {
       mapItemToOption: mapItemToOption,
       loadItemsBySearchTerm: loadItemsBySearchTerm,
       loadItemsByIds: loadItemsByIds,
-      filterOption: filterOption
+      filterOption: filterOption,
+      hasWarning: props.hasWarning
     })
   });
 }
@@ -6336,7 +6395,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';
@@ -6362,7 +6422,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
   });
 }
 
@@ -6395,7 +6456,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 = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -6478,7 +6540,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 && jsxRuntime.jsx(uiKit.Text.Body, {
         tone: "negative",
@@ -6501,7 +6566,8 @@ function CustomProductReferenceInput(props) {
     onChange: props.onChange,
     hasError: props.hasError,
     onError: () => null,
-    showLoadingErrorMessage: true
+    showLoadingErrorMessage: true,
+    hasWarning: props.hasWarning
   });
 }
 CustomProductReferenceInput.displayName = 'CustomProductReferenceInput';
@@ -6517,7 +6583,8 @@ function CustomProductTypeReferenceInput(props) {
     onBlur: props.onBlur,
     onChange: props.onChange,
     hasError: props.hasError,
-    onError: () => null
+    onError: () => null,
+    hasWarning: props.hasWarning
   });
 }
 CustomProductTypeReferenceInput.displayName = 'CustomProductTypeReferenceInput';
@@ -6533,7 +6600,8 @@ function CustomChannelReferenceInput(props) {
     onBlur: props.onBlur,
     onChange: props.onChange,
     hasError: props.hasError,
-    onError: () => null
+    onError: () => null,
+    hasWarning: props.hasWarning
   });
 }
 CustomChannelReferenceInput.displayName = 'CustomChannelReferenceInput';
@@ -6549,7 +6617,8 @@ function CustomStateReferenceInput(props) {
     onBlur: props.onBlur,
     onChange: props.onChange,
     hasError: props.hasError,
-    onError: () => null
+    onError: () => null,
+    hasWarning: props.hasWarning
   });
 }
 CustomStateReferenceInput.displayName = 'CustomStateReferenceInput';
@@ -6563,6 +6632,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 jsxRuntime.jsx(ReferenceInputComponent, {
@@ -6575,7 +6645,8 @@ function CustomReferenceInput(props) {
     isReadOnly: props.isReadOnly,
     onBlur: props.onBlur,
     hasError: props.hasError,
-    onChange: handleChange
+    onChange: handleChange,
+    hasWarning: props.hasWarning
   });
 }
 CustomReferenceInput.displayName = 'CustomReferenceInput';
@@ -6586,6 +6657,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' ? uiKit.DateInput : uiKit.DateTimeInput;
   return jsxRuntime.jsx(InputComponent, {
@@ -6597,7 +6669,8 @@ function CustomDateTimeInput(props) {
     timeZone: timeZone,
     hasError: props.hasError,
     isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly
+    isReadOnly: props.isReadOnly,
+    hasWarning: props.hasWarning
   });
 }
 CustomDateTimeInput.displayName = 'CustomDateTimeInput';
@@ -6632,6 +6705,7 @@ function CustomTimeInput(props) {
       lastValueSentToFormik.current = in24hFormat;
       props.setFieldValue(props.name, in24hFormat);
     }
+    props.renderWarnings && props.handleWarningChange(props.name, props.fieldDefinition, rawValue);
   });
   return jsxRuntime.jsx(uiKit.TimeInput, {
     id: props.name,
@@ -6642,7 +6716,8 @@ function CustomTimeInput(props) {
     timeZone: timeZone,
     hasError: props.hasError,
     isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly
+    isReadOnly: props.isReadOnly,
+    hasWarning: props.hasWarning
   });
 }
 CustomTimeInput.displayName = 'CustomTimeInput';
@@ -6653,7 +6728,10 @@ const convertTypeValuesToOptions = reselect.defaultMemoize(typeValues => _mapIns
 })));
 function CustomEnumInput(props) {
   const options = convertTypeValuesToOptions(_valuesInstanceProperty__default["default"](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__default["default"](options).call(options, option => option.value === props.value)?.label ?? '' : '';
   return jsxRuntime.jsx(CustomFieldTooltip, {
     title: tooltipTitle,
@@ -6667,7 +6745,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
     })
   });
 }
@@ -6716,8 +6797,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';
@@ -6768,7 +6852,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__default["default"](pairs).call(pairs, (result, _ref2) => {
   let name = _ref2.name,
@@ -6822,7 +6907,10 @@ function ProductAttributes(_ref) {
         fieldDefinitions: fieldDefinitions,
         setFieldValue: setFieldValue,
         inputValuesConverter: convertInputValue,
-        WrapperComponent: WrapperComponent
+        WrapperComponent: WrapperComponent,
+        renderWarnings: props.renderWarnings,
+        renderCustomWarnings: props.renderCustomWarnings,
+        handleWarningChange: props.handleWarningChange
       })
     })
   });
@@ -7430,7 +7518,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
               }), jsxRuntime.jsx(SetButtons, {
                 index: index,
                 isFirstItem: !isExpanded || index === 0,
@@ -7493,7 +7584,10 @@ const CustomFieldInput = /*#__PURE__*/React.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';
@@ -7549,7 +7643,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
     })]
   });
 }
@@ -7773,7 +7870,8 @@ const CustomFieldsInternal = _ref => {
     errors = _useFormikContext.errors,
     touched = _useFormikContext.touched,
     values = _valuesInstanceProperty__default["default"](_useFormikContext),
-    handleBlur = _useFormikContext.handleBlur;
+    handleBlur = _useFormikContext.handleBlur,
+    status = _useFormikContext.status;
   const didFormValidationFail = useDidFormValidationFail();
   const fieldDefinitions = omitSetsOfSets(props.fieldDefinitions);
   const _useDnDContext = useDnDContext(),
@@ -7789,6 +7887,7 @@ const CustomFieldsInternal = _ref => {
       const isTouched = Boolean(formik.getIn(touched, fieldName));
       const fieldErrors = formik.getIn(errors, fieldName);
       const value = props.inputValuesConverter(fieldName, formik.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);
@@ -7807,7 +7906,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 = jsxRuntime.jsx(FieldComponent, _objectSpread$J({}, fieldProps));
       return jsxRuntime.jsx(formik.FastField, {
@@ -7831,7 +7933,7 @@ const CustomFieldsInternal = _ref => {
                 alignItems: "stretch",
                 children: [WrapperComponent ? jsxRuntime.jsx(WrapperComponent, {
                   children: Field
-                }) : Field, jsxRuntime.jsx(CustomFieldErrors, {
+                }) : Field, props.renderWarnings && status?.warnings[fieldName] && props.renderCustomWarnings(fieldDefinition), jsxRuntime.jsx(CustomFieldErrors, {
                   isTouched: isTouched,
                   errors: fieldErrors
                 })]
@@ -7844,6 +7946,9 @@ const CustomFieldsInternal = _ref => {
   });
 };
 CustomFieldsInternal.displayName = 'CustomFieldsInternal';
+CustomFieldsInternal.defaultProps = {
+  renderCustomWarnings: () => null
+};
 
 const nopConverter = (fieldName, fieldValue) => fieldValue;
 const CustomFields = props => {
@@ -7976,6 +8081,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,
@@ -8095,6 +8204,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,
@@ -8239,6 +8352,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,
@@ -9061,6 +9178,7 @@ const StoresSearchSelectInput = props => {
       maxMenuHeight: props.maxMenuHeight,
       menuPortalTarget: props.menuPortalTarget,
       menuPortalZIndex: props.menuPortalZIndex,
+      menuIsOpen: props.menuIsOpen,
       components: props.components,
       controlShouldRenderValue: props.controlShouldRenderValue
     }, utils.filterDataAttributes(props)), utils.filterAriaAttributes(props))), jsxRuntime.jsx(uiKit.FieldErrors, {
@@ -12711,8 +12829,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;
 };