@7shifts/sous-chef 3.24.0 → 3.25.0

package/dist/controls/ToolbarSelect/ToolbarSelect.d.ts

@@ -1,5 +1,5 @@
-import { SelectProps } from '../../forms/SelectField/types';
-declare type ToolbarSelectProps<T> = Omit<SelectProps<T>, 'asToolbarFilter' | 'caption' | 'error' | 'id' | 'isClearable' | 'label' | 'noOptionMessage' | 'CustomOption' | 'SelectedOptionPrefix' | 'creatableButton' | 'onCreate' | 'isSearchable'>;
+import { Props } from '../../forms/SelectField/SelectField';
+declare type ToolbarSelectProps<T> = Omit<Props<T>, 'asToolbarFilter' | 'caption' | 'error' | 'id' | 'isClearable' | 'label' | 'noOptionMessage' | 'CustomOption' | 'SelectedOptionPrefix' | 'creatableButton' | 'onCreate' | 'isSearchable'>;
 /** Toolbar component to make a possible selection from predefined options. */
-declare const ToolbarSelect: <T extends unknown>({ name, value, options, onChange, onBlur, placeholder, defaultValue, menuShouldScrollIntoView, disabled, prefix, testId }: Pick<SelectProps<T>, "disabled" | "onBlur" | "testId" | "name" | "onChange" | "menuShouldScrollIntoView" | "noOptionsMessage" | "options" | "placeholder" | "prefix" | "value" | "defaultValue">) => JSX.Element;
+declare const ToolbarSelect: <T extends unknown>({ name, value, options, onChange, onBlur, placeholder, defaultValue, menuShouldScrollIntoView, disabled, prefix, testId }: Pick<Props<T>, "disabled" | "onBlur" | "testId" | "name" | "onChange" | "menuShouldScrollIntoView" | "noOptionsMessage" | "options" | "placeholder" | "prefix" | "value" | "defaultValue">) => JSX.Element;
 export default ToolbarSelect;

package/dist/forms/AsyncSelectField/AsyncSelectField.d.ts

@@ -1,4 +1,4 @@
-import type { SelectProps } from '../SelectField/types';
+import type { Props as SelectProps } from '../SelectField/SelectField';
 import { AsyncSelectOptions } from './types';
 declare type Props<T> = {
     /** It is a function that takes the input search as parameter and returns a Promise with all the options and if there are more options to load. If it brings all the options on the first load, it won't call the `loadOptions` to perform the search. */

package/dist/forms/MultiSelectField/MultiSelectField.d.ts

@@ -1,30 +1,30 @@
 import React from 'react';
-import type { SelectOption, SelectOptions, NoOptionsMessageFunction } from '../SelectField/types';
+import type { SelectOption, SelectOptions } from '../SelectField/types';
+declare type NoOptionsMessageFunction = (input: {
+    inputValue: string;
+}) => string | null;
 declare type Props<T> = {
-    caption?: React.ReactNode;
-    disabled?: boolean;
-    error?: React.ReactNode;
-    /** If not provided it will generate a random id so the l¡abel links properly with the text input */
-    id?: string;
-    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> | SelectOption<T>[]) => void;
-    onBlur?: (e: SelectOption<T> | SelectOption<T>[]) => void;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string;
+    value?: SelectOption<T>[];
     options: SelectOptions<T>;
-    placeholder?: string;
-    value?: SelectOption<T> | SelectOption<T>[];
-    defaultValue?: SelectOption<T> | SelectOption<T>[];
+    onChange?: (e: SelectOption<T>[]) => void;
+    onBlur?: (e: SelectOption<T>[]) => void;
     CustomOption?: React.ElementType;
-    /** This is used for setting the data-testid */
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: React.ReactNode;
+    placeholder?: string;
+    noOptionsMessage?: string | NoOptionsMessageFunction;
+    disabled?: boolean;
+    closeOnSelect?: 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 `MultiSelectField` inside a modal. */
+    menuShouldScrollIntoView?: boolean;
     testId?: string;
-    creatableButton?: React.ReactNode;
-    onCreate?: (option: string) => void;
     /** This is to allow disable the seach functionality. Use it just in some edge-cases, for example in touch devices when the user clicks on the field it opens a virtual keyboard to search, sometimes that virtual keyboard taks much space then passing `isSearchable={false}` prevents opening it. */
     isSearchable?: boolean;
-    closeOnSelect?: boolean;
 };
-declare const MultiSelectField: <T extends unknown>(props: Props<T>) => JSX.Element;
+/** Component to make possible choose from a predefined options. */
+declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, noOptionsMessage, disabled, closeOnSelect, menuShouldScrollIntoView, testId, isSearchable }: Props<T>) => JSX.Element;
 export default MultiSelectField;

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

@@ -1,4 +1,41 @@
-import type { SelectProps } from './types';
+import React from 'react';
+import type { SelectOption, SelectOptions } from './types';
+declare type NoOptionsMessageFunction = (input: {
+    inputValue: string;
+}) => string | null;
+export declare type Props<T> = {
+    /**
+     * @deprecated `asToolbarFilter` prop has been replaced with the `ToolbarSelect` component.
+     */
+    asToolbarFilter?: boolean;
+    caption?: React.ReactNode;
+    disabled?: boolean;
+    error?: React.ReactNode;
+    /** If not provided it will generate a random id so the l¡abel links properly with the text input */
+    id?: string;
+    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;
+    options: SelectOptions<T>;
+    placeholder?: string;
+    /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
+    prefix?: React.ReactNode;
+    value?: SelectOption<T>;
+    defaultValue?: SelectOption<T>;
+    CustomOption?: React.ElementType;
+    SelectedOptionPrefix?: React.ElementType;
+    /** This is used for setting the data-testid */
+    testId?: string;
+    creatableButton?: React.ReactNode;
+    onCreate?: (option: string) => void;
+    /** This is to allow disable the seach functionality. Use it just in some edge-cases, for example in touch devices when the user clicks on the field it opens a virtual keyboard to search, sometimes that virtual keyboard taks much space then passing `isSearchable={false}` prevents opening it. */
+    isSearchable?: boolean;
+};
 /** Component to make possible choose from a predefined options. */
-declare const SelectField: <T extends unknown>(props: SelectProps<T>) => JSX.Element;
+declare const SelectField: <T extends unknown>(props: Props<T>) => JSX.Element;
 export default SelectField;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControlProps } from 'react-select';
 export declare type GroupOption<T> = {
     label: string;
@@ -20,39 +19,3 @@ export declare type CustomOptionProps<T> = {
 export interface SelectedOptionPrefixProps<T> extends ControlProps<T, false> {
     selectedOption: SelectOption<T>;
 }
-export declare type NoOptionsMessageFunction = (input: {
-    inputValue: string;
-}) => string | null;
-export declare type SelectProps<T> = {
-    /**
-     * @deprecated `asToolbarFilter` prop has been replaced with the `ToolbarSelect` component.
-     */
-    asToolbarFilter?: boolean;
-    caption?: React.ReactNode;
-    disabled?: boolean;
-    error?: React.ReactNode;
-    /** If not provided it will generate a random id so the l¡abel links properly with the text input */
-    id?: string;
-    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> | SelectOption<T>[]) => void;
-    onBlur?: (e: SelectOption<T> | SelectOption<T>[]) => void;
-    options: SelectOptions<T>;
-    placeholder?: string;
-    /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
-    prefix?: React.ReactNode;
-    value?: SelectOption<T> | SelectOption<T>[];
-    defaultValue?: SelectOption<T> | SelectOption<T>[];
-    CustomOption?: React.ElementType;
-    SelectedOptionPrefix?: React.ElementType;
-    /** This is used for setting the data-testid */
-    testId?: string;
-    creatableButton?: React.ReactNode;
-    onCreate?: (option: string) => void;
-    /** This is to allow disable the seach functionality. Use it just in some edge-cases, for example in touch devices when the user clicks on the field it opens a virtual keyboard to search, sometimes that virtual keyboard taks much space then passing `isSearchable={false}` prevents opening it. */
-    isSearchable?: boolean;
-};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SelectProps } from './types';
-export declare const useSelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id, isClearable, label, menuShouldScrollIntoView, name, noOptionsMessage, options, onBlur, onChange, placeholder, value, defaultValue, CustomOption: UserCustomOption, SelectedOptionPrefix, testId, creatableButton, onCreate, isSearchable, }: SelectProps<T>, isMultiSelect?: boolean) => {
+import type { Props } from './SelectField';
+export declare const useSelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id, isClearable, label, menuShouldScrollIntoView, name, noOptionsMessage, options, onBlur, onChange, placeholder, value, defaultValue, CustomOption: UserCustomOption, SelectedOptionPrefix, testId, creatableButton, onCreate, isSearchable }: Props<T>) => {
     selectProps: Pick<import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>, import("react").ReactText> & import("react-select/src/stateManager").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>> & import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>;
     fieldProps: {
         caption: import("react").ReactNode;

package/dist/forms/hooks/useSelectFieldControllers.d.ts

@@ -3,16 +3,16 @@ import type { SelectOption } from '../SelectField/types';
 declare type FieldControls<T> = {
     id: string;
     error?: React.ReactNode;
-    value?: SelectOption<T> | SelectOption<T>[];
-    onChange: (e: SelectOption<T> | SelectOption<T>[]) => void;
-    onBlur: (e: SelectOption<T> | SelectOption<T>[]) => void;
+    value?: SelectOption<T>;
+    onChange: (e: SelectOption<T>) => void;
+    onBlur: (e: SelectOption<T>) => void;
 };
 declare type Props<T> = {
     name: string;
     id?: string;
-    value?: SelectOption<T> | SelectOption<T>[];
-    onChange?: (e: SelectOption<T> | SelectOption<T>[]) => void;
-    onBlur?: (e: SelectOption<T> | SelectOption<T>[]) => void;
+    value?: SelectOption<T>;
+    onChange?: (e: SelectOption<T>) => void;
+    onBlur?: (e: SelectOption<T>) => void;
     error?: React.ReactNode;
     onMenuInputFocus?: (isFocused: boolean) => void;
 };

package/dist/index.js

@@ -7855,7 +7855,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,
@@ -7883,10 +7883,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 = React.useState(false),
       isMenuInputFocus = _useState[0],
       setIsMenuInputFocus = _useState[1];
@@ -7944,14 +7940,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,
@@ -9046,20 +9040,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__default, {
+    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 : Select.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__default, Object.assign({
-    closeMenuOnSelect: closeOnSelect
-  }, selectProps)));
+      return !isScrollingTheSelectMenu(e.target);
+    },
+    isSearchable: isSearchable
+  }));
 };
 
 var styles$_ = {"custom-list":"_uC4zU"};