@commercetools-frontend/experimental-components 3.2.1 → 4.0.0

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

@@ -2277,7 +2277,7 @@ const filterStoresOutdatedDanglingProductSelections = storesQueryResult => {
     })
   };
 };
-const createQueryVariables$8 = ownProps => {
+const createQueryVariables$9 = ownProps => {
   var _context;
   return _objectSpread$1h(_objectSpread$1h({
     limit: ownProps.limit,
@@ -2293,7 +2293,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__default["default"](props),
@@ -2900,8 +2900,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__default["default"](ownProps)
@@ -2913,7 +2913,7 @@ const emptyProductSelections = {
   results: []
 };
 const useProductSelectionsFetcher = props => {
-  const queryVariables = createQueryVariables$7(props);
+  const queryVariables = createQueryVariables$8(props);
   const _useQuery = hooks.useQuery(FetchProductSelections, {
       context: {
         target: constants.GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
@@ -7932,6 +7932,11 @@ var pickerMessages = reactIntl.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'
   }
 });
 
@@ -7964,6 +7969,10 @@ function ProductSelectionBasicSelectDropdown(props) {
     dataLocale = _useApplicationContex.dataLocale;
   if (productSelectionsFetcher.isLoading) return jsxRuntime.jsx(CenteredLoadingSpinner, {});
   const productSelections = (_productSelectionsFet = (_productSelectionsFet2 = productSelectionsFetcher.productSelections) === null || _productSelectionsFet2 === void 0 ? void 0 : _productSelectionsFet2.results) !== null && _productSelectionsFet !== void 0 ? _productSelectionsFet : [];
+  const filteredProductSelections = _filterInstanceProperty__default["default"](productSelections).call(productSelections, ps => {
+    var _context;
+    return !_includesInstanceProperty__default["default"](_context = props.excludedProductSelectionIds).call(_context, ps.id);
+  });
   const onOptionClick = event => {
     const productSelectionId = event.target.value;
     const currentProductSelection = _findInstanceProperty__default["default"](productSelections).call(productSelections, productSelection => productSelection.id === productSelectionId);
@@ -7978,12 +7987,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
   });
 }
@@ -7991,6 +8006,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__default["default"](allProductSelectionOptions).call(allProductSelectionOptions, ps => currentlySelectedProductSelections === null || currentlySelectedProductSelections === void 0 ? void 0 : _includesInstanceProperty__default["default"](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__default["default"](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 = reactIntl.useIntl();
@@ -8008,6 +8045,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__default["default"](productSelections).call(productSelections, ps => {
+    var _context;
+    return !_includesInstanceProperty__default["default"](_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;
@@ -8015,7 +8056,7 @@ function ProductSelectionsAsyncSelectDropdown(props) {
     props.onChange(currentProductSelection);
   };
   const allProductSelectionOptions = React.useMemo(() => {
-    return _mapInstanceProperty__default["default"](productSelections).call(productSelections, productSelection => {
+    return _mapInstanceProperty__default["default"](filteredProductSelections).call(filteredProductSelections, productSelection => {
       const localizedName = l10n.formatLocalizedString(productSelection, {
         key: 'name',
         locale: dataLocale,
@@ -8028,17 +8069,26 @@ function ProductSelectionsAsyncSelectDropdown(props) {
         key: productSelection.key
       };
     });
-  }, [dataLocale, projectLanguages, productSelections]);
+  }, [dataLocale, projectLanguages, filteredProductSelections]);
   const getDefaultOptions = () => {
-    return _sliceInstanceProperty__default["default"](allProductSelectionOptions).call(allProductSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    return [{
+      options: _sliceInstanceProperty__default["default"](allProductSelectionOptions).call(allProductSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT)
+    }, {
+      options: emptyStoreOption$1(intl)
+    }];
   };
   const handleLoadOptions = async searchTerm => {
     const productSelectionOptions = allProductSelectionOptions;
     const filteredOptions = _filterInstanceProperty__default["default"](productSelectionOptions).call(productSelectionOptions, productSelection => {
-      var _context, _context2;
-      return _includesInstanceProperty__default["default"](_context = productSelection.label.toLowerCase()).call(_context, searchTerm.toLowerCase()) || productSelection.key && _includesInstanceProperty__default["default"](_context2 = productSelection.key.toLowerCase()).call(_context2, searchTerm.toLowerCase());
+      var _context2, _context3;
+      return _includesInstanceProperty__default["default"](_context2 = productSelection.label.toLowerCase()).call(_context2, searchTerm.toLowerCase()) || productSelection.key && _includesInstanceProperty__default["default"](_context3 = productSelection.key.toLowerCase()).call(_context3, searchTerm.toLowerCase());
     });
-    return searchTerm ? _sliceInstanceProperty__default["default"](filteredOptions).call(filteredOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT) : _sliceInstanceProperty__default["default"](productSelectionOptions).call(productSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    const finalOptions = searchTerm ? _sliceInstanceProperty__default["default"](filteredOptions).call(filteredOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT) : _sliceInstanceProperty__default["default"](productSelectionOptions).call(productSelectionOptions, 0, LOWER_PRODUCT_SELECTIONS_LIMIT);
+    return [{
+      options: finalOptions
+    }, {
+      options: emptyStoreOption$1(intl)
+    }];
   };
   if (productSelectionsFetcher.isLoading) return jsxRuntime.jsx(CenteredLoadingSpinner, {});
   return jsxRuntime.jsx(uiKit.AsyncSelectField, {
@@ -8049,22 +8099,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__default["default"](_context = "".concat(predicateField, " in (")).call(_context, _mapInstanceProperty__default["default"](productSelections).call(productSelections, ps => "\"".concat(ps, "\"")).join(', '), ")"),
+    limit: 500
+  };
+};
+const useProductSelectionsByFieldFetcher = (productSelections, predicateField) => {
+  var _productSelectionsQue, _productSelectionsQue2;
+  const productSelectionList = _Array$isArray__default["default"](productSelections) ? productSelections : [productSelections];
+  const productSelectionsQuery = react.useQuery(ProductSelectionsPickerFetcher$1, {
+    context: {
+      target: constants.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__default["default"](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__default["default"](_ref => {
+  let _ref$productSelection = _ref.productSelections,
+    productSelections = _ref$productSelection === void 0 ? [] : _ref$productSelection,
+    dataLocale = _ref.dataLocale,
+    projectLanguages = _ref.projectLanguages,
+    renderSelectInputOptionValuesByField = _ref.renderSelectInputOptionValuesByField;
   return _mapInstanceProperty__default["default"](productSelections).call(productSelections, productSelection => ({
-    value: productSelection.id,
+    value: renderSelectInputOptionValuesByField === 'key' ? productSelection.key : productSelection.id,
     label: l10n.formatLocalizedString(productSelection, {
       key: 'name',
       locale: dataLocale,
@@ -8073,9 +8161,22 @@ const mapProductSelectionsToOptions = memoize__default["default"](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__default["default"](searchText).call(searchText, searchText));
   const idQuery = isUUID(sanitizedSearchText) && "id = \"".concat(sanitizedSearchText, "\"");
   const keyQuery = "key = \"".concat(sanitizedSearchText, "\"");
@@ -8085,6 +8186,7 @@ const createQueryVariables$6 = _ref => {
   };
 };
 function ProductSelectionsSearchSelectDropdown(props) {
+  var _context3;
   const intl = reactIntl.useIntl();
   const _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -8097,6 +8199,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$1.query({
@@ -8112,8 +8215,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__default["default"](matchedProductSelections).call(matchedProductSelections, convertProductSelectionFromGraphQl);
-    setProductSelectionResults(updatedProductSelections);
-    return mapProductSelectionsToOptions(updatedProductSelections, dataLocale, projectLanguages);
+    const filteredProductSelections = _filterInstanceProperty__default["default"](updatedProductSelections).call(updatedProductSelections, ps => {
+      var _context2;
+      return !_includesInstanceProperty__default["default"](_context2 = props.excludedProductSelectionIds).call(_context2, ps.id);
+    });
+    setProductSelectionResults(filteredProductSelections);
+    return mapProductSelectionsToOptions({
+      productSelections: filteredProductSelections,
+      dataLocale,
+      projectLanguages,
+      renderSelectInputOptionValuesByField: props.renderSelectInputOptionValuesByField
+    });
   };
   const loadOptionsDebounced = debounce__default["default"](handleLoadOptions, 500);
   const onOptionClick = event => {
@@ -8122,33 +8234,56 @@ function ProductSelectionsSearchSelectDropdown(props) {
     const currentProductSelection = _findInstanceProperty__default["default"](productionSelectionResults).call(productionSelectionResults, productSelection => productSelection.id === productSelectionId);
     props.onChange(currentProductSelection);
   };
+  if (productSelectionsByFieldFetcher.isLoading) return jsxRuntime.jsx(CenteredLoadingSpinner, {});
   return jsxRuntime.jsx(uiKit.SearchSelectField, {
     id: props.id,
     name: props.name,
     title: props.title,
+    value: getValueFromOptions$2({
+      currentlySelectedProductSelections: props.value,
+      productSelectionFieldOptions: mapProductSelectionsToOptions({
+        productSelections: _mapInstanceProperty__default["default"](_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__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$N(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$N(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$N(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-const components = {
-  // eslint-disable-next-line react/display-name
-  Option: optionInnerProps => jsxRuntime.jsx(selectUtils.CustomSelectInputOption, {
-    optionType: "double-property",
-    optionInnerProps: optionInnerProps
-  })
-};
 function ProductSelectionsPicker(props) {
   const productSelectionsTotalFetcher = useProductSelectionsTotalFetcher();
+  const components = React.useMemo(() => {
+    return {
+      Option: optionInnerProps => {
+        if (optionInnerProps.isDisabled) {
+          return jsxRuntime.jsx(uiKit.SelectInput.Option, _objectSpread$N({}, optionInnerProps));
+        }
+        return jsxRuntime.jsx(selectUtils.CustomSelectInputOption, {
+          optionType: props.optionType,
+          optionInnerProps: optionInnerProps
+        });
+      }
+    };
+  }, [props.optionType]);
   if (productSelectionsTotalFetcher.isLoading) return jsxRuntime.jsx(CenteredLoadingSpinner, {});
   const CustomProductSelectionsPicker = productSelectionsTotalFetcher.total <= props.lowerProductSelectionsLimit ? ProductSelectionBasicSelectDropdown : productSelectionsTotalFetcher.total <= props.upperProductSelectionsLimit ? ProductSelectionsAsyncSelectDropdown : ProductSelectionsSearchSelectDropdown;
   return jsxRuntime.jsx(uiKit.Spacings.Stack, {
@@ -8164,7 +8299,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;
@@ -9791,11 +9932,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__default["default"](_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__default["default"](_businessUnit$inherit).call(_businessUnit$inherit, inheritedAssociate => inheritedAssociate === null || inheritedAssociate === void 0 ? void 0 : inheritedAssociate.customer);
   const overwrittenOnExplicit = intersectionBy__default["default"](associates, inheritedAssociates, 'customer.id') || [];
   const overwrittenOnInherited = intersectionBy__default["default"](inheritedAssociates, associates, 'customer.id') || [];
   const onlyExplicit = differenceBy__default["default"](associates, inheritedAssociates, 'customer.id') || [];
@@ -9896,10 +10035,10 @@ var messages$r = reactIntl.defineMessages({
 function ownKeys$A(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$A(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$A(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](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 = reactIntl.useIntl();
   const businessUnitsAssociateRolesFeatureEnabled = applicationShell.useFeatureToggle(ENABLE_BUSINESS_UNITS_ASSOCIATE_ROLES);
-  const totalAssociates = (_props$values = _valuesInstanceProperty__default["default"](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__default["default"](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__default["default"](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 = uiKit.usePaginationState({
       perPage: 20
@@ -9914,8 +10053,8 @@ const BusinessUnitAssociatesListView = props => {
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
   const associates = React.useMemo(() => {
-    var _props$values2, _context, _context2;
-    return businessUnitsAssociateRolesFeatureEnabled ? mergeAssociates(_valuesInstanceProperty__default["default"](props)) : (_props$values2 = _valuesInstanceProperty__default["default"](props)) === null || _props$values2 === void 0 ? void 0 : _mapInstanceProperty__default["default"](_context = _filterInstanceProperty__default["default"](_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__default["default"](props)) : (_props$values3 = _valuesInstanceProperty__default["default"](props)) === null || _props$values3 === void 0 ? void 0 : _mapInstanceProperty__default["default"](_context = _filterInstanceProperty__default["default"](_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__default["default"](props), businessUnitsAssociateRolesFeatureEnabled]);
@@ -10039,7 +10178,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,
@@ -12615,6 +12754,7 @@ const SelectableFieldSearchInput = props => {
   return jsxRuntime.jsx("div", {
     className: styles$4.container,
     children: jsxRuntime.jsx(uiKit.SelectableSearchInput, {
+      menuHorizontalConstraint: 5,
       options: props.options,
       value: {
         text: searchText,