@7shifts/sous-chef 2.3.6 → 2.4.0

package/dist/forms/SelectField/SelectField.d.ts

@@ -4,27 +4,28 @@ declare type NoOptionsMessageFunction = (input: {
     inputValue: string;
 }) => string | null;
 declare type Props<T> = {
-    name: string;
-    /** If not provided it will generate a random id so the label links properly with the text input */
+    asToolbarFilter?: boolean;
+    caption?: React.ReactNode;
+    disabled?: boolean;
+    error?: string;
+    /** If not provided it will generate a random id so the l¡abel links properly with the text input */
     id?: string;
-    value?: SelectOption<T>;
-    options: SelectOptions<T>;
+    isClearable?: boolean;
+    label?: React.ReactNode;
+    /** When the user opens the menu, if this prop is `true`, it will scroll the page into to the menu view (if its content falls under a scroll). It is recommended to disable this behaviour when using the `SelectField` inside a modal. */
+    menuShouldScrollIntoView?: boolean;
+    name: string;
+    noOptionsMessage?: string | NoOptionsMessageFunction;
     onChange?: (e: SelectOption<T>) => void;
     onBlur?: (e: SelectOption<T>) => void;
-    CustomOption?: React.ElementType;
-    SelectedOptionPrefix?: React.ElementType;
-    label?: React.ReactNode;
-    caption?: React.ReactNode;
-    error?: string;
+    options: SelectOptions<T>;
     placeholder?: string;
-    noOptionsMessage?: string | NoOptionsMessageFunction;
-    disabled?: boolean;
     /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
     prefix?: React.ReactNode;
-    asToolbarFilter?: boolean;
-    /** When the user opens the menu, if this prop is `true`, it will scroll the page into to the menu view (if its content falls under a scroll). It is recomended to disable this behaviour when using the `SelectField` inside a modal. */
-    menuShouldScrollIntoView?: boolean;
+    value?: SelectOption<T>;
+    CustomOption?: React.ElementType;
+    SelectedOptionPrefix?: React.ElementType;
 };
 /** Component to make possible choose from a predefined options. */
-declare const SelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, SelectedOptionPrefix, label, caption, error, placeholder, noOptionsMessage, disabled, prefix, asToolbarFilter, menuShouldScrollIntoView }: Props<T>) => JSX.Element;
+declare const SelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id: inputId, isClearable, label, menuShouldScrollIntoView, name, noOptionsMessage, options, onBlur, onChange, placeholder, prefix, value, CustomOption: UserCustomOption, SelectedOptionPrefix }: Props<T>) => JSX.Element;
 export default SelectField;

package/dist/index.js

@@ -4952,40 +4952,42 @@ function CustomOption$1(_ref) {
 }
 
 var SelectField = function SelectField(_ref) {
-  var name = _ref.name,
+  var _ref$asToolbarFilter = _ref.asToolbarFilter,
+      asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
+      caption = _ref.caption,
+      disabled = _ref.disabled,
+      error = _ref.error,
       inputId = _ref.id,
-      value = _ref.value,
+      _ref$isClearable = _ref.isClearable,
+      isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
+      label = _ref.label,
+      _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
+      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll,
+      name = _ref.name,
+      noOptionsMessage = _ref.noOptionsMessage,
       options = _ref.options,
-      onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      UserCustomOption = _ref.CustomOption,
-      SelectedOptionPrefix = _ref.SelectedOptionPrefix,
-      label = _ref.label,
-      caption = _ref.caption,
-      error = _ref.error,
+      onChange = _ref.onChange,
       placeholder = _ref.placeholder,
-      noOptionsMessage = _ref.noOptionsMessage,
-      disabled = _ref.disabled,
       prefix = _ref.prefix,
-      _ref$asToolbarFilter = _ref.asToolbarFilter,
-      asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
-      _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
-      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll;
+      value = _ref.value,
+      UserCustomOption = _ref.CustomOption,
+      SelectedOptionPrefix = _ref.SelectedOptionPrefix;
   var controllers = useSelectFieldControllers({
-    name: name,
+    error: error,
     id: inputId,
-    value: value,
+    name: name,
     onChange: onChange,
     onBlur: onBlur,
-    error: error
+    value: value
   });
   var hasError = !!controllers.error;
   var fieldProps = {
-    name: name,
+    caption: caption,
+    error: controllers.error,
     id: controllers.id,
     label: label,
-    caption: caption,
-    error: controllers.error
+    name: name
   };
   var defaultNoOptionsMessage = noOptionsMessage && typeof noOptionsMessage === 'string' ? function () {
     return noOptionsMessage;
@@ -4993,19 +4995,16 @@ var SelectField = function SelectField(_ref) {
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: prefix
   }, React__default.createElement(Select__default, {
-    inputId: controllers.id,
-    options: options,
-    isDisabled: disabled,
-    value: controllers.value,
-    placeholder: placeholder,
-    noOptionsMessage: typeof noOptionsMessage === 'function' ? noOptionsMessage : defaultNoOptionsMessage,
-    styles: getSelectStyles$1({
-      isInvalid: hasError,
-      asToolbarFilter: asToolbarFilter
-    }),
-    menuPortalTarget: document.body,
-    onChange: controllers.onChange,
-    onBlur: controllers.onBlur,
+    closeMenuOnScroll: function closeMenuOnScroll(e) {
+      if (menuShouldScrollIntoView || !e.target) {
+        return false;
+      }
+
+      var target = e.target;
+      var firstOption = target.children[0];
+      var isScrollingTheMenu = firstOption && typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
+      return !isScrollingTheMenu;
+    },
     components: {
       Option: UserCustomOption ? function (props) {
         return React__default.createElement(CustomOption$1, Object.assign({
@@ -5018,19 +5017,23 @@ var SelectField = function SelectField(_ref) {
         }, props));
       } : Select.components.Control
     },
-    menuShouldScrollIntoView: menuShouldScrollIntoView,
+    inputId: controllers.id,
+    isClearable: isClearable,
+    isDisabled: disabled,
+    menuPortalTarget: document.body,
     menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
     menuPosition: menuShouldScrollIntoView ? 'absolute' : 'fixed',
-    closeMenuOnScroll: function closeMenuOnScroll(e) {
-      if (menuShouldScrollIntoView || !e.target) {
-        return false;
-      }
-
-      var target = e.target;
-      var firstOption = target.children[0];
-      var isScrollingTheMenu = firstOption && typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
-      return !isScrollingTheMenu;
-    }
+    noOptionsMessage: typeof noOptionsMessage === 'function' ? noOptionsMessage : defaultNoOptionsMessage,
+    menuShouldScrollIntoView: menuShouldScrollIntoView,
+    onBlur: controllers.onBlur,
+    onChange: controllers.onChange,
+    options: options,
+    placeholder: placeholder,
+    styles: getSelectStyles$1({
+      isInvalid: hasError,
+      asToolbarFilter: asToolbarFilter
+    }),
+    value: controllers.value
   })));
 };