@commercetools-frontend/experimental-components 3.2.1 → 4.0.0

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

@@ -2191,7 +2191,7 @@ const filterStoresOutdatedDanglingProductSelections = storesQueryResult => {
     })
   };
 };
-const createQueryVariables$8 = ownProps => {
+const createQueryVariables$9 = ownProps => {
   var _context;
   return _objectSpread$1h(_objectSpread$1h({
     limit: ownProps.limit,
@@ -2207,7 +2207,7 @@ const createQueryVariables$8 = ownProps => {
 const useStoresListFetcher = props => {
   const excludeExtendedStoresList = props.excludeExtendedStoresList || false;
   const excludeProductSelections = props.excludeProductSelections || false;
-  const queryVariables = createQueryVariables$8({
+  const queryVariables = createQueryVariables$9({
     limit: props.limit,
     offset: props.offset,
     sort: _sortInstanceProperty(props),
@@ -2814,8 +2814,8 @@ const convertProductSelectionsFromGraphQl = productSelections => {
   });
 };
 
-var FetchProductSelections = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchProductSelections" }, variableDefinitions: [{ 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: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sort" } }, type: { kind: "ListType", type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [{ 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" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "Variable", name: { kind: "Name", value: "sort" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "count" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "offset" }, arguments: [], directives: [] }, { 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: "version" }, 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: "createdAt" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastModifiedAt" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 330, source: { body: "query FetchProductSelections($limit: Int, $offset: Int, $sort: [String!]) {\n  productSelections(limit: $limit, offset: $offset, sort: $sort) {\n    total\n    count\n    offset\n    results {\n      id\n      version\n      key\n      nameAllLocales {\n        locale\n        value\n      }\n      createdAt\n      lastModifiedAt\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-const createQueryVariables$7 = ownProps => ({
+var FetchProductSelections = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchProductSelections" }, variableDefinitions: [{ 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: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sort" } }, type: { kind: "ListType", type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [{ 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" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "Variable", name: { kind: "Name", value: "sort" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "count" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "offset" }, arguments: [], directives: [] }, { 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: "version" }, 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: "createdAt" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastModifiedAt" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 341, source: { body: "query FetchProductSelections($limit: Int, $offset: Int, $sort: [String!]) {\n  productSelections(limit: $limit, offset: $offset, sort: $sort) {\n    total\n    count\n    offset\n    results {\n      id\n      version\n      key\n      nameAllLocales {\n        locale\n        value\n      }\n      createdAt\n      lastModifiedAt\n      type\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const createQueryVariables$8 = ownProps => ({
   limit: ownProps.limit,
   offset: ownProps.offset,
   sort: _sortInstanceProperty(ownProps)
@@ -2827,7 +2827,7 @@ const emptyProductSelections = {
   results: []
 };
 const useProductSelectionsFetcher = props => {
-  const queryVariables = createQueryVariables$7(props);
+  const queryVariables = createQueryVariables$8(props);
   const _useQuery = useQuery$1(FetchProductSelections, {
       context: {
         target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
@@ -7846,6 +7846,11 @@ var pickerMessages = defineMessages({
     id: 'ProductSelectionPicker.productSelectionsSearchSelectPlaceholder',
     description: 'Placeholder of the search select field for product selections',
     defaultMessage: 'Search for product selections by entering exact key'
+  },
+  asyncSelectDropdownTypeAheadPrompt: {
+    id: 'ProductSelectionPicker.asyncSelectDropdownTypeAheadPrompt',
+    description: 'Message shown telling the user to start typing to load more product selections',
+    defaultMessage: 'Start typing above to load more'
   }
 });
 
@@ -7878,6 +7883,10 @@ function ProductSelectionBasicSelectDropdown(props) {
     dataLocale = _useApplicationContex.dataLocale;
   if (productSelectionsFetcher.isLoading) return jsx(CenteredLoadingSpinner, {});
   const productSelections = (_productSelectionsFet = (_productSelectionsFet2 = productSelectionsFetcher.productSelections) === null || _productSelectionsFet2 === void 0 ? void 0 : _productSelectionsFet2.results) !== null && _productSelectionsFet !== void 0 ? _productSelectionsFet : [];
+  const filteredProductSelections = _filterInstanceProperty(productSelections).call(productSelections, ps => {
+    var _context;
+    return !_includesInstanceProperty(_context = props.excludedProductSelectionIds).call(_context, ps.id);
+  });
   const onOptionClick = event => {
     const productSelectionId = event.target.value;
     const currentProductSelection = _findInstanceProperty(productSelections).call(productSelections, productSelection => productSelection.id === productSelectionId);
@@ -7892,12 +7901,18 @@ function ProductSelectionBasicSelectDropdown(props) {
     isRequired: props.isRequired,
     description: props.description,
     placeholder: intl.formatMessage(pickerMessages.productSelectionsBasicSelectPlaceholder),
-    options: mapProductSelectionsToOptions$1(productSelections, dataLocale, projectLanguages),
+    options: mapProductSelectionsToOptions$1(filteredProductSelections, dataLocale, projectLanguages),
     components: props.components,
     onChange: onOptionClick,
+    onBlur: props.onBlur,
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
     hasWarning: props.hasWarning,
+    hasError: props.hasError,
+    isClearable: props.isClearable,
+    menuPortalTarget: props.menuPortalTarget,
+    menuPortalZIndex: props.menuPortalZIndex,
+    maxMenuHeight: props.maxMenuHeight,
     isSearchable: true
   });
 }
@@ -7905,6 +7920,28 @@ function ProductSelectionBasicSelectDropdown(props) {
 const LOWER_PRODUCT_SELECTIONS_LIMIT = 60;
 const UPPER_PRODUCT_SELECTIONS_LIMIT = 500;
 
+const getValueFromOptions$3 = _ref => {
+  let currentlySelectedProductSelections = _ref.currentlySelectedProductSelections,
+    allProductSelectionOptions = _ref.allProductSelectionOptions,
+    isMulti = _ref.isMulti;
+  // return value as undefined if no options is yet selected. It is needed for cases where users sets initial values as empty string
+  if (!currentlySelectedProductSelections) {
+    return undefined;
+  }
+
+  // handle async-select-field value transformation
+  if (isMulti) {
+    return _filterInstanceProperty(allProductSelectionOptions).call(allProductSelectionOptions, ps => currentlySelectedProductSelections === null || currentlySelectedProductSelections === void 0 ? void 0 : _includesInstanceProperty(currentlySelectedProductSelections).call(currentlySelectedProductSelections, ps.value));
+  }
+
+  // in case it is not multiselect, then a single valued async-select-input is being requested and the value should have proper format
+  return _findInstanceProperty(allProductSelectionOptions).call(allProductSelectionOptions, ps => currentlySelectedProductSelections === ps.value);
+};
+const emptyStoreOption$1 = intl => [{
+  label: intl.formatMessage(pickerMessages.asyncSelectDropdownTypeAheadPrompt),
+  value: undefined,
+  isDisabled: true
+}];
 function ProductSelectionsAsyncSelectDropdown(props) {
   var _productSelectionsFet3;
   const intl = useIntl();
@@ -7922,6 +7959,10 @@ function ProductSelectionsAsyncSelectDropdown(props) {
     var _productSelectionsFet, _productSelectionsFet2;
     return (_productSelectionsFet = (_productSelectionsFet2 = productSelectionsFetcher.productSelections) === null || _productSelectionsFet2 === void 0 ? void 0 : _productSelectionsFet2.results) !== null && _productSelectionsFet !== void 0 ? _productSelectionsFet : [];
   }, [(_productSelectionsFet3 = productSelectionsFetcher.productSelections) === null || _productSelectionsFet3 === void 0 ? void 0 : _productSelectionsFet3.results]);
+  const filteredProductSelections = _filterInstanceProperty(productSelections).call(productSelections, ps => {
+    var _context;
+    return !_includesInstanceProperty(_context = props.excludedProductSelectionIds).call(_context, ps.id);
+  });
   const onOptionClick = event => {
     var _event$target$value;
     const productSelectionId = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.value;
@@ -7929,7 +7970,7 @@ function ProductSelectionsAsyncSelectDropdown(props) {
     props.onChange(currentProductSelection);
   };
   const allProductSelectionOptions = useMemo(() => {
-    return _mapInstanceProperty(productSelections).call(productSelections, productSelection => {
+    return _mapInstanceProperty(filteredProductSelections).call(filteredProductSelections, productSelection => {
       const localizedName = formatLocalizedString(productSelection, {
         key: 'name',
         locale: dataLocale,
@@ -7942,17 +7983,26 @@ function ProductSelectionsAsyncSelectDropdown(props) {
         key: productSelection.key
       };
     });
-  }, [dataLocale, projectLanguages, productSelections]);
+  }, [dataLocale, projectLanguages, filteredProductSelections]);
   const getDefaultOptions = () => {
-    return _sliceInstanceProperty(allProductSelectionOptions).call(allProductSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    return [{
+      options: _sliceInstanceProperty(allProductSelectionOptions).call(allProductSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT)
+    }, {
+      options: emptyStoreOption$1(intl)
+    }];
   };
   const handleLoadOptions = async searchTerm => {
     const productSelectionOptions = allProductSelectionOptions;
     const filteredOptions = _filterInstanceProperty(productSelectionOptions).call(productSelectionOptions, productSelection => {
-      var _context, _context2;
-      return _includesInstanceProperty(_context = productSelection.label.toLowerCase()).call(_context, searchTerm.toLowerCase()) || productSelection.key && _includesInstanceProperty(_context2 = productSelection.key.toLowerCase()).call(_context2, searchTerm.toLowerCase());
+      var _context2, _context3;
+      return _includesInstanceProperty(_context2 = productSelection.label.toLowerCase()).call(_context2, searchTerm.toLowerCase()) || productSelection.key && _includesInstanceProperty(_context3 = productSelection.key.toLowerCase()).call(_context3, searchTerm.toLowerCase());
     });
-    return searchTerm ? _sliceInstanceProperty(filteredOptions).call(filteredOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT) : _sliceInstanceProperty(productSelectionOptions).call(productSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    const finalOptions = searchTerm ? _sliceInstanceProperty(filteredOptions).call(filteredOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT) : _sliceInstanceProperty(productSelectionOptions).call(productSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    return [{
+      options: finalOptions
+    }, {
+      options: emptyStoreOption$1(intl)
+    }];
   };
   if (productSelectionsFetcher.isLoading) return jsx(CenteredLoadingSpinner, {});
   return jsx(AsyncSelectField, {
@@ -7963,22 +8013,60 @@ function ProductSelectionsAsyncSelectDropdown(props) {
     isRequired: props.isRequired,
     placeholder: intl.formatMessage(pickerMessages.productSelectionsAsyncSelectPlaceholder),
     loadOptions: handleLoadOptions,
+    value: getValueFromOptions$3({
+      currentlySelectedProductSelections: props.value,
+      allProductSelectionOptions,
+      isMulti: props.isMulti
+    }),
     onChange: onOptionClick,
+    onBlur: props.onBlur,
     isDisabled: props.isDisabled,
+    showOptionGroupDivider: true,
     isReadOnly: props.isReadOnly,
     components: props.components,
     defaultOptions: getDefaultOptions(),
-    hasWarning: props.hasWarning
+    hasWarning: props.hasWarning,
+    hasError: props.hasError,
+    isClearable: props.isClearable,
+    menuPortalTarget: props.menuPortalTarget,
+    menuPortalZIndex: props.menuPortalZIndex,
+    maxMenuHeight: props.maxMenuHeight
   });
 }
 
+var ProductSelectionsPickerFetcher$1 = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "ProductSelectionsPickerFetcher" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }], 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: "version" }, 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: 212, source: { body: "query ProductSelectionsPickerFetcher($where: String!) {\n  productSelections(where: $where) {\n    results {\n      id\n      key\n      version\n      nameAllLocales {\n        locale\n        value\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const createQueryVariables$7 = (productSelections, predicateField) => {
+  var _context;
+  return {
+    where: _concatInstanceProperty(_context = "".concat(predicateField, " in (")).call(_context, _mapInstanceProperty(productSelections).call(productSelections, ps => "\"".concat(ps, "\"")).join(', '), ")"),
+    limit: 500
+  };
+};
+const useProductSelectionsByFieldFetcher = (productSelections, predicateField) => {
+  var _productSelectionsQue, _productSelectionsQue2;
+  const productSelectionList = _Array$isArray(productSelections) ? productSelections : [productSelections];
+  const productSelectionsQuery = useQuery(ProductSelectionsPickerFetcher$1, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
+    },
+    variables: createQueryVariables$7(productSelectionList, predicateField),
+    skip: productSelectionList.length === 0
+  });
+  return {
+    productSelections: (_productSelectionsQue = (_productSelectionsQue2 = productSelectionsQuery.data) === null || _productSelectionsQue2 === void 0 ? void 0 : _productSelectionsQue2.productSelections.results) !== null && _productSelectionsQue !== void 0 ? _productSelectionsQue : [],
+    isLoading: productSelectionsQuery.loading
+  };
+};
+
 var ProductSelectionsPickerFetcher = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "ProductSelectionsPickerFetcher" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "productSelections" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }], 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: "version" }, 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: 212, source: { body: "query ProductSelectionsPickerFetcher($where: String!) {\n  productSelections(where: $where) {\n    results {\n      id\n      key\n      version\n      nameAllLocales {\n        locale\n        value\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
-const mapProductSelectionsToOptions = memoize(function () {
-  let productSelections = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let dataLocale = arguments.length > 1 ? arguments[1] : undefined;
-  let projectLanguages = arguments.length > 2 ? arguments[2] : undefined;
+const mapProductSelectionsToOptions = memoize(_ref => {
+  let _ref$productSelection = _ref.productSelections,
+    productSelections = _ref$productSelection === void 0 ? [] : _ref$productSelection,
+    dataLocale = _ref.dataLocale,
+    projectLanguages = _ref.projectLanguages,
+    renderSelectInputOptionValuesByField = _ref.renderSelectInputOptionValuesByField;
   return _mapInstanceProperty(productSelections).call(productSelections, productSelection => ({
-    value: productSelection.id,
+    value: renderSelectInputOptionValuesByField === 'key' ? productSelection.key : productSelection.id,
     label: formatLocalizedString(productSelection, {
       key: 'name',
       locale: dataLocale,
@@ -7987,9 +8075,22 @@ const mapProductSelectionsToOptions = memoize(function () {
     key: productSelection.key
   }));
 });
-const createQueryVariables$6 = _ref => {
+const getValueFromOptions$2 = _ref2 => {
+  let isMulti = _ref2.isMulti,
+    currentlySelectedProductSelections = _ref2.currentlySelectedProductSelections,
+    productSelectionFieldOptions = _ref2.productSelectionFieldOptions;
+  if (!currentlySelectedProductSelections) {
+    return undefined;
+  }
+  if (isMulti) {
+    return productSelectionFieldOptions;
+  }
+  // if the input is not multiselect, the AsyncSearchSelect is expecting an object rather than array
+  return productSelectionFieldOptions[0];
+};
+const createQueryVariables$6 = _ref3 => {
   var _context;
-  let searchText = _ref.searchText;
+  let searchText = _ref3.searchText;
   const sanitizedSearchText = sanitize(_trimInstanceProperty(searchText).call(searchText, searchText));
   const idQuery = isUUID(sanitizedSearchText) && "id = \"".concat(sanitizedSearchText, "\"");
   const keyQuery = "key = \"".concat(sanitizedSearchText, "\"");
@@ -7999,6 +8100,7 @@ const createQueryVariables$6 = _ref => {
   };
 };
 function ProductSelectionsSearchSelectDropdown(props) {
+  var _context3;
   const intl = useIntl();
   const _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -8011,6 +8113,7 @@ function ProductSelectionsSearchSelectDropdown(props) {
     })),
     projectLanguages = _useApplicationContex.projectLanguages,
     dataLocale = _useApplicationContex.dataLocale;
+  const productSelectionsByFieldFetcher = useProductSelectionsByFieldFetcher(props.value, props.renderSelectInputOptionValuesByField);
   const handleLoadOptions = async searchText => {
     var _data$productSelectio, _data$productSelectio2;
     const _await$client$query = await client.query({
@@ -8026,8 +8129,17 @@ function ProductSelectionsSearchSelectDropdown(props) {
       data = _await$client$query.data;
     const matchedProductSelections = (_data$productSelectio = data === null || data === void 0 ? void 0 : (_data$productSelectio2 = data.productSelections) === null || _data$productSelectio2 === void 0 ? void 0 : _data$productSelectio2.results) !== null && _data$productSelectio !== void 0 ? _data$productSelectio : [];
     const updatedProductSelections = _mapInstanceProperty(matchedProductSelections).call(matchedProductSelections, convertProductSelectionFromGraphQl);
-    setProductSelectionResults(updatedProductSelections);
-    return mapProductSelectionsToOptions(updatedProductSelections, dataLocale, projectLanguages);
+    const filteredProductSelections = _filterInstanceProperty(updatedProductSelections).call(updatedProductSelections, ps => {
+      var _context2;
+      return !_includesInstanceProperty(_context2 = props.excludedProductSelectionIds).call(_context2, ps.id);
+    });
+    setProductSelectionResults(filteredProductSelections);
+    return mapProductSelectionsToOptions({
+      productSelections: filteredProductSelections,
+      dataLocale,
+      projectLanguages,
+      renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
+    });
   };
   const loadOptionsDebounced = debounce(handleLoadOptions, 500);
   const onOptionClick = event => {
@@ -8036,33 +8148,56 @@ function ProductSelectionsSearchSelectDropdown(props) {
     const currentProductSelection = _findInstanceProperty(productionSelectionResults).call(productionSelectionResults, productSelection => productSelection.id === productSelectionId);
     props.onChange(currentProductSelection);
   };
+  if (productSelectionsByFieldFetcher.isLoading) return jsx(CenteredLoadingSpinner, {});
   return jsx(SearchSelectField, {
     id: props.id,
     name: props.name,
     title: props.title,
+    value: getValueFromOptions$2({
+      currentlySelectedProductSelections: props.value,
+      productSelectionFieldOptions: mapProductSelectionsToOptions({
+        productSelections: _mapInstanceProperty(_context3 = productSelectionsByFieldFetcher.productSelections).call(_context3, convertProductSelectionFromGraphQl),
+        dataLocale,
+        projectLanguages,
+        renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
+      }),
+      isMulti: props.isMulti
+    }),
     description: props.description,
     isRequired: props.isRequired,
     placeholder: intl.formatMessage(pickerMessages.productSelectionsSearchSelectPlaceholder),
     loadOptions: loadOptionsDebounced,
     onChange: onOptionClick,
+    onBlur: props.onBlur,
     components: props.components,
-    isDisabled: props.isDisabled,
+    isDisabled: props.isDisabled || productSelectionsByFieldFetcher.isLoading,
     isReadOnly: props.isReadOnly,
-    hasWarning: props.hasWarning
+    hasWarning: props.hasWarning,
+    isClearable: props.isClearable,
+    hasError: props.hasError,
+    menuPortalTarget: props.menuPortalTarget,
+    menuPortalZIndex: props.menuPortalZIndex,
+    maxMenuHeight: props.maxMenuHeight
   });
 }
 
 function ownKeys$N(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$N(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$N(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$N(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-const components = {
-  // eslint-disable-next-line react/display-name
-  Option: optionInnerProps => jsx(CustomSelectInputOption, {
-    optionType: "double-property",
-    optionInnerProps: optionInnerProps
-  })
-};
 function ProductSelectionsPicker(props) {
   const productSelectionsTotalFetcher = useProductSelectionsTotalFetcher();
+  const components = useMemo(() => {
+    return {
+      Option: optionInnerProps => {
+        if (optionInnerProps.isDisabled) {
+          return jsx(SelectInput.Option, _objectSpread$N({}, optionInnerProps));
+        }
+        return jsx(CustomSelectInputOption, {
+          optionType: props.optionType,
+          optionInnerProps: optionInnerProps
+        });
+      }
+    };
+  }, [props.optionType]);
   if (productSelectionsTotalFetcher.isLoading) return jsx(CenteredLoadingSpinner, {});
   const CustomProductSelectionsPicker = productSelectionsTotalFetcher.total <= props.lowerProductSelectionsLimit ? ProductSelectionBasicSelectDropdown : productSelectionsTotalFetcher.total <= props.upperProductSelectionsLimit ? ProductSelectionsAsyncSelectDropdown : ProductSelectionsSearchSelectDropdown;
   return jsx(Spacings.Stack, {
@@ -8078,7 +8213,13 @@ ProductSelectionsPicker.defaultProps = {
   optionType: 'double-property',
   isMulti: false,
   isRequired: false,
-  hasWarning: false
+  hasWarning: false,
+  hasError: false,
+  isClearable: false,
+  isReadOnly: false,
+  isDisabled: false,
+  excludedProductSelectionIds: [],
+  title: '' // FieldLabel requires title to have some value
 };
 
 const COUNTRIES_ASYNC_LOADING_LIMIT = 60;
@@ -9705,11 +9846,9 @@ const mergeOverwritten = (inherited, explicit) => {
   };
 };
 const mergeAssociates = businessUnit => {
-  var _context2;
-  const _businessUnit$associa = businessUnit.associates,
-    associates = _businessUnit$associa === void 0 ? [] : _businessUnit$associa,
-    _businessUnit$inherit = businessUnit.inheritedAssociates,
-    inheritedAssociates = _businessUnit$inherit === void 0 ? [] : _businessUnit$inherit;
+  var _businessUnit$associa, _businessUnit$inherit, _context2;
+  const associates = businessUnit === null || businessUnit === void 0 ? void 0 : (_businessUnit$associa = businessUnit.associates) === null || _businessUnit$associa === void 0 ? void 0 : _filterInstanceProperty(_businessUnit$associa).call(_businessUnit$associa, associate => associate === null || associate === void 0 ? void 0 : associate.customer);
+  const inheritedAssociates = businessUnit === null || businessUnit === void 0 ? void 0 : (_businessUnit$inherit = businessUnit.inheritedAssociates) === null || _businessUnit$inherit === void 0 ? void 0 : _filterInstanceProperty(_businessUnit$inherit).call(_businessUnit$inherit, inheritedAssociate => inheritedAssociate === null || inheritedAssociate === void 0 ? void 0 : inheritedAssociate.customer);
   const overwrittenOnExplicit = intersectionBy(associates, inheritedAssociates, 'customer.id') || [];
   const overwrittenOnInherited = intersectionBy(inheritedAssociates, associates, 'customer.id') || [];
   const onlyExplicit = differenceBy(associates, inheritedAssociates, 'customer.id') || [];
@@ -9810,10 +9949,10 @@ var messages$r = defineMessages({
 function ownKeys$A(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys$A(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys$A(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 const BusinessUnitAssociatesListView = props => {
-  var _props$values, _props$values$associa;
+  var _props$values, _props$values$associa, _props$values2, _props$values2$inheri;
   const intl = useIntl();
   const businessUnitsAssociateRolesFeatureEnabled = useFeatureToggle(ENABLE_BUSINESS_UNITS_ASSOCIATE_ROLES);
-  const totalAssociates = (_props$values = _valuesInstanceProperty(props)) === null || _props$values === void 0 ? void 0 : (_props$values$associa = _props$values.associates) === null || _props$values$associa === void 0 ? void 0 : _props$values$associa.length;
+  const totalAssociates = ((_props$values = _valuesInstanceProperty(props)) === null || _props$values === void 0 ? void 0 : (_props$values$associa = _props$values.associates) === null || _props$values$associa === void 0 ? void 0 : _props$values$associa.length) + (((_props$values2 = _valuesInstanceProperty(props)) === null || _props$values2 === void 0 ? void 0 : (_props$values2$inheri = _props$values2.inheritedAssociates) === null || _props$values2$inheri === void 0 ? void 0 : _props$values2$inheri.length) || 0);
   const isBusinessUnitCreation = !isUUID(props.businessUnitId);
   const _usePaginationState = usePaginationState({
       perPage: 20
@@ -9828,8 +9967,8 @@ const BusinessUnitAssociatesListView = props => {
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
   const associates = useMemo(() => {
-    var _props$values2, _context, _context2;
-    return businessUnitsAssociateRolesFeatureEnabled ? mergeAssociates(_valuesInstanceProperty(props)) : (_props$values2 = _valuesInstanceProperty(props)) === null || _props$values2 === void 0 ? void 0 : _mapInstanceProperty(_context = _filterInstanceProperty(_context2 = _props$values2.associates).call(_context2, associate => associate === null || associate === void 0 ? void 0 : associate.customer)).call(_context, associate => _objectSpread$A(_objectSpread$A({}, associate), {}, {
+    var _props$values3, _context, _context2;
+    return businessUnitsAssociateRolesFeatureEnabled ? mergeAssociates(_valuesInstanceProperty(props)) : (_props$values3 = _valuesInstanceProperty(props)) === null || _props$values3 === void 0 ? void 0 : _mapInstanceProperty(_context = _filterInstanceProperty(_context2 = _props$values3.associates).call(_context2, associate => associate === null || associate === void 0 ? void 0 : associate.customer)).call(_context, associate => _objectSpread$A(_objectSpread$A({}, associate), {}, {
       id: associate.customer.id
     }));
   }, [_valuesInstanceProperty(props), businessUnitsAssociateRolesFeatureEnabled]);
@@ -9953,7 +10092,7 @@ const BusinessUnitAssociatesListView = props => {
 };
 BusinessUnitAssociatesListView.displayName = 'BusinessUnitAssociatesListView';
 
-var BusinessUnitAssociatesQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "BusinessUnitAssociatesQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeRoles" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeAssociateRoleAssignmentsRoles" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "businessUnit" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "BusinessUnitAssociatesFragment" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "BusinessUnitAssociatesFragment" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "BusinessUnit" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "associates" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "roles" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeRoles" } } }] }] }, { kind: "Field", name: { kind: "Name", value: "associateRoleAssignments" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeAssociateRoleAssignmentsRoles" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "associateRole" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "customer" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "__typename" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 577, source: { body: "fragment BusinessUnitAssociatesFragment on BusinessUnit {\n  id\n  associates {\n    roles @skip(if: $shouldExcludeRoles)\n    associateRoleAssignments\n      @skip(if: $shouldExcludeAssociateRoleAssignmentsRoles) {\n      associateRole {\n        name\n        key\n      }\n    }\n    customer {\n      id\n      email\n      firstName\n      lastName\n    }\n  }\n  __typename\n}\n\nquery BusinessUnitAssociatesQuery(\n  $id: String!\n  $shouldExcludeRoles: Boolean!\n  $shouldExcludeAssociateRoleAssignmentsRoles: Boolean!\n) {\n  businessUnit(id: $id) {\n    ...BusinessUnitAssociatesFragment\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+var BusinessUnitAssociatesQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "BusinessUnitAssociatesQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeRoles" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeAssociateRoleAssignmentsRoles" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "Boolean" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "businessUnit" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "BusinessUnitAssociatesFragment" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "BusinessUnitAssociatesFragment" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "BusinessUnit" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "associates" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "roles" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeRoles" } } }] }] }, { kind: "Field", name: { kind: "Name", value: "associateRoleAssignments" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeAssociateRoleAssignmentsRoles" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "associateRole" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "customer" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "inheritedAssociates" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "associateRoleAssignments" }, arguments: [], directives: [{ kind: "Directive", name: { kind: "Name", value: "skip" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "if" }, value: { kind: "Variable", name: { kind: "Name", value: "shouldExcludeAssociateRoleAssignmentsRoles" } } }] }], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "associateRole" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "customer" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "__typename" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 831, source: { body: "fragment BusinessUnitAssociatesFragment on BusinessUnit {\n  id\n  associates {\n    roles @skip(if: $shouldExcludeRoles)\n    associateRoleAssignments\n      @skip(if: $shouldExcludeAssociateRoleAssignmentsRoles) {\n      associateRole {\n        name\n        key\n      }\n    }\n    customer {\n      id\n      email\n      firstName\n      lastName\n    }\n  }\n  inheritedAssociates {\n    associateRoleAssignments\n      @skip(if: $shouldExcludeAssociateRoleAssignmentsRoles) {\n      associateRole {\n        name\n        key\n      }\n    }\n    customer {\n      id\n      email\n      firstName\n      lastName\n    }\n  }\n  __typename\n}\n\nquery BusinessUnitAssociatesQuery(\n  $id: String!\n  $shouldExcludeRoles: Boolean!\n  $shouldExcludeAssociateRoleAssignmentsRoles: Boolean!\n) {\n  businessUnit(id: $id) {\n    ...BusinessUnitAssociatesFragment\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const useBusinessUnitAssociatesFetcher = _ref => {
   let id = _ref.id,
     shouldExcludeRoles = _ref.shouldExcludeRoles,
@@ -12529,6 +12668,7 @@ const SelectableFieldSearchInput = props => {
   return jsx("div", {
     className: styles$4.container,
     children: jsx(SelectableSearchInput, {
+      menuHorizontalConstraint: 5,
       options: props.options,
       value: {
         text: searchText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/experimental-components",
-  "version": "3.2.1",
+  "version": "4.0.0",
   "description": "",
   "main": "dist/commercetools-frontend-experimental-components.cjs.js",
   "module": "dist/commercetools-frontend-experimental-components.esm.js",
@@ -11,21 +11,21 @@
   ],
   "dependencies": {
     "@babel/core": "^7.21.0",
-    "@babel/runtime": "^7.21.0",
     "@babel/runtime-corejs3": "^7.21.0",
-    "@commercetools-frontend/actions-global": "21.24.3",
-    "@commercetools-frontend/application-components": "21.24.3",
-    "@commercetools-frontend/application-shell": "21.24.3",
-    "@commercetools-frontend/application-shell-connectors": "21.24.3",
-    "@commercetools-frontend/constants": "21.24.3",
-    "@commercetools-frontend/l10n": "21.24.3",
-    "@commercetools-frontend/sdk": "21.24.3",
-    "@commercetools-frontend/sentry": "21.24.3",
-    "@commercetools-frontend/ui-kit": "15.14.3",
-    "@commercetools-uikit/design-system": "15.14.3",
-    "@commercetools-uikit/select-utils": "15.14.3",
-    "@commercetools-uikit/utils": "15.14.3",
-    "@emotion/react": "11.10.6",
+    "@babel/runtime": "^7.21.0",
+    "@commercetools-frontend/actions-global": "^21.25.2",
+    "@commercetools-frontend/application-components": "^21.25.2",
+    "@commercetools-frontend/application-shell-connectors": "^21.25.2",
+    "@commercetools-frontend/application-shell": "^21.25.2",
+    "@commercetools-frontend/constants": "^21.25.2",
+    "@commercetools-frontend/l10n": "^21.25.2",
+    "@commercetools-frontend/sdk": "^21.25.2",
+    "@commercetools-frontend/sentry": "^21.25.2",
+    "@commercetools-frontend/ui-kit": "^15.15.0",
+    "@commercetools-uikit/design-system": "^15.15.0",
+    "@commercetools-uikit/select-utils": "^15.15.0",
+    "@commercetools-uikit/utils": "^15.15.0",
+    "@emotion/react": "^11.10.6",
     "classnames": "2.3.2",
     "cleave.js": "1.5.10",
     "common-tags": "1.8.2",
@@ -35,51 +35,53 @@
     "hoist-non-react-statics": "3.3.2",
     "lodash": "4.17.21",
     "memoize-one": "6.0.0",
+    "moment-timezone": "0.5.43",
     "moment": "2.29.4",
-    "moment-timezone": "0.5.42",
-    "msw": "^1.1.0",
     "omit-deep": "0.3.0",
     "omit-empty-es": "1.1.3",
-    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-intl": "5.25.1",
-    "react-redux": "7.2.9",
-    "react-required-if": "1.0.3",
-    "react-router-dom": "5.3.4",
+    "prop-types": "^15.8.1",
     "react-textarea-autosize": "8.4.1",
-    "reselect": "4.1.7",
+    "reselect": "4.1.8",
     "tiny-invariant": "1.3.1",
     "tiny-warning": "1.0.3",
     "uuid": "8.3.2"
   },
   "devDependencies": {
-    "@apollo/client": "3.7.10",
-    "@babel/core": "^7.21.0",
-    "@commercetools-test-data/channel": "4.11.1",
-    "@commercetools-test-data/commons": "4.11.1",
-    "@commercetools-test-data/core": "4.11.1",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "8.0.1",
-    "enzyme": "3.11.0",
-    "graphql": "16.6.0",
-    "graphql-tag": "2.12.6",
-    "msw": "1.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-intl": "5.25.1",
-    "react-redux": "7.2.9",
-    "react-router-dom": "5.3.4",
-    "react-test-renderer": "17.0.2",
-    "redux": "4.2.1",
-    "typescript": "4.9.5",
-    "xhr-mock": "2.5.1",
+    "@apollo/client": "^3.7.10",
+    "@commercetools-test-data/channel": "^4.11.1",
+    "@commercetools-test-data/commons": "^4.11.1",
+    "@commercetools-test-data/core": "^4.11.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
+    "enzyme": "^3.11.0",
+    "graphql-tag": "^2.12.6",
+    "graphql": "^16.6.0",
+    "msw": "^1.2.1",
+    "react-dom": "^17.0.2",
+    "react-intl": "^5.25.1",
+    "react-redux": "^7.2.9",
+    "react-required-if": "^1.0.3",
+    "react-router-dom": "^5.3.4",
+    "react-test-renderer": "^17.0.2",
+    "react": "^17.0.2",
+    "redux": "^4.2.1",
+    "typescript": "^4.9.5",
+    "xhr-mock": "^2.5.1",
     "@commercetools-local/test-data": "1.0.8",
     "@commercetools-local/test-utils": "1.0.2"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",
     "@testing-library/react": "12.x",
-    "@testing-library/react-hooks": "8.x"
+    "@testing-library/react-hooks": "8.x",
+    "react": "17.x",
+    "react-dom": "17.x",
+    "react-intl": "5.x",
+    "react-redux": "7.x",
+    "react-router-dom": "5.x",
+    "redux": "4.x",
+    "msw": "1.x.x",
+    "react-required-if": "1.x.x"
   },
   "publishConfig": {
     "access": "public"