@7shifts/sous-chef 3.24.0 → 3.25.0

package/dist/index.modern.js

@@ -7851,7 +7851,7 @@ function CustomMenu(_ref) {
   }, getLocalizedString('default.CREATE'))))));
 }
 
-var useSelectField = function useSelectField(_ref, isMultiSelect) {
+var useSelectField = function useSelectField(_ref) {
   var _ref$asToolbarFilter = _ref.asToolbarFilter,
       asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
       caption = _ref.caption,
@@ -7879,10 +7879,6 @@ var useSelectField = function useSelectField(_ref, isMultiSelect) {
       _ref$isSearchable = _ref.isSearchable,
       isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable;
 
-  if (isMultiSelect === void 0) {
-    isMultiSelect = false;
-  }
-
   var _useState = useState(false),
       isMenuInputFocus = _useState[0],
       setIsMenuInputFocus = _useState[1];
@@ -7940,14 +7936,12 @@ var useSelectField = function useSelectField(_ref, isMultiSelect) {
     placeholder: placeholder,
     styles: getSelectStyles({
       isInvalid: hasError,
-      asToolbarFilter: asToolbarFilter,
-      wrapToNextLine: isMultiSelect ? true : undefined
+      asToolbarFilter: asToolbarFilter
     }),
     value: controllers.value,
     defaultValue: defaultValue,
     menuIsOpen: isMenuInputFocus || undefined,
-    isSearchable: isSearchable,
-    isMulti: isMultiSelect
+    isSearchable: isSearchable
   };
   var fieldProps = {
     caption: caption,
@@ -9042,20 +9036,82 @@ var PasswordField = function PasswordField(_ref) {
   }))));
 };
 
-var MultiSelectField = function MultiSelectField(props) {
-  var _props$closeOnSelect;
-
-  var closeOnSelect = (_props$closeOnSelect = props.closeOnSelect) != null ? _props$closeOnSelect : false;
-
-  var _useSelectField = useSelectField(_extends({}, props, {
-    isClearable: true
-  }), true),
-      fieldProps = _useSelectField.fieldProps,
-      selectProps = _useSelectField.selectProps;
+var MultiSelectField = function MultiSelectField(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      options = _ref.options,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      UserCustomOption = _ref.CustomOption,
+      label = _ref.label,
+      caption = _ref.caption,
+      error = _ref.error,
+      placeholder = _ref.placeholder,
+      noOptionsMessage = _ref.noOptionsMessage,
+      disabled = _ref.disabled,
+      _ref$closeOnSelect = _ref.closeOnSelect,
+      closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect,
+      _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
+      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll,
+      testId = _ref.testId,
+      _ref$isSearchable = _ref.isSearchable,
+      isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable;
+  var controllers = useMultiSelectFieldControllers({
+    name: name,
+    id: inputId,
+    value: value,
+    onChange: onChange,
+    onBlur: onBlur,
+    error: error
+  });
+  var hasError = !!controllers.error;
+  var fieldProps = {
+    name: name,
+    id: controllers.id,
+    label: label,
+    caption: caption,
+    error: controllers.error
+  };
+  var defaultNoOptionsMessage = noOptionsMessage && typeof noOptionsMessage === 'string' ? function () {
+    return noOptionsMessage;
+  } : undefined;
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(Select, {
+    inputId: controllers.id,
+    options: options,
+    isDisabled: disabled,
+    value: controllers.value,
+    placeholder: placeholder,
+    noOptionsMessage: typeof noOptionsMessage === 'function' ? noOptionsMessage : defaultNoOptionsMessage,
+    styles: getSelectStyles({
+      isInvalid: hasError,
+      wrapToNextLine: true
+    }),
+    menuPortalTarget: document.body,
+    onChange: controllers.onChange,
+    onBlur: controllers.onBlur,
+    isMulti: true,
+    closeMenuOnSelect: closeOnSelect,
+    componentsProps: {
+      testId: testId,
+      UserCustomOption: UserCustomOption
+    },
+    components: {
+      SelectContainer: CustomContainer,
+      Option: UserCustomOption ? CustomOption : components.Option
+    },
+    menuShouldScrollIntoView: menuShouldScrollIntoView,
+    menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
+    menuPosition: menuShouldScrollIntoView ? 'absolute' : 'fixed',
+    closeMenuOnScroll: function closeMenuOnScroll(e) {
+      if (menuShouldScrollIntoView || !e.target) {
+        return false;
+      }
 
-  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(Select, Object.assign({
-    closeMenuOnSelect: closeOnSelect
-  }, selectProps)));
+      return !isScrollingTheSelectMenu(e.target);
+    },
+    isSearchable: isSearchable
+  }));
 };
 
 var styles$_ = {"custom-list":"_uC4zU"};