@7shifts/sous-chef 4.11.0 → 4.12.0

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

@@ -2,14 +2,15 @@ import React from 'react';
 import type { Props as SelectProps } from '../SelectField/SelectField';
 import { AsyncSelectOptions } from './types';
 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. */
-    loadOptions: (inputValue: string) => Promise<AsyncSelectOptions<T>>;
+    /** It is a function that takes the input search and an optional cursor as parameters and returns a Promise with all the options, if there are more options to load, and optionally the next cursor. If it brings all the options on the first load, it won't call `loadOptions` to perform the search. */
+    loadOptions: (inputValue: string, cursor?: string | null) => Promise<AsyncSelectOptions<T>>;
     /** It fires `loadOptions` again if this key value changes. Used when it depends on other fields to load its options */
     key?: string | number;
 } & Omit<SelectProps<T>, 'options'>;
 /**
  * A variation of select field that loads a dynamic list of options from a source rather than a fixed set of options. Use when you need to select from a dynamic list that can change such as roles, employees, locations, etc.
- * Instead of passing a `options` props, this component requires a `loadOptions` prop.
+ * Instead of passing an `options` prop, this component requires a `loadOptions` prop.
+ * Supports scroll-to-load-more: when the user scrolls to the bottom of the menu and a `nextCursor` is returned, the next page is automatically fetched and appended.
  * */
 declare const AsyncSelectField: <T extends unknown>({ loadOptions, ...props }: Props<T>) => React.JSX.Element;
 export default AsyncSelectField;

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

@@ -3,6 +3,7 @@ import { components } from 'react-select';
 type Props = ComponentProps<typeof components.MenuList> & {
     hasMoreOptions: boolean;
     hasMoreOptionsFirstLoad: boolean | null | undefined;
+    isLoadingMore: boolean;
 };
-declare const CustomList: ({ children, hasMoreOptions, hasMoreOptionsFirstLoad, ...props }: Props) => React.JSX.Element;
+declare const CustomList: ({ children, hasMoreOptions, hasMoreOptionsFirstLoad, isLoadingMore, ...props }: Props) => React.JSX.Element;
 export default CustomList;

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

@@ -2,4 +2,5 @@ import { SelectOptions } from '../SelectField/types';
 export type AsyncSelectOptions<T> = {
     options: SelectOptions<T>;
     hasMore: boolean;
+    nextCursor?: string | null;
 };

package/dist/index.js

@@ -15,7 +15,6 @@ var originalStylers = require('react-day-picker/dist/style.module.css');
 require('react-toastify/dist/ReactToastify.css');
 var libphonenumberJs = require('libphonenumber-js');
 var Select = require('react-select');
-var AsyncSelect = require('react-select/async');
 var dateFns = require('date-fns');
 var getDay = require('date-fns/getDay');
 var getDate = require('date-fns/getDate');
@@ -54,7 +53,6 @@ var dateFnsParse__default = /*#__PURE__*/_interopDefaultLegacy(dateFnsParse);
 var startOfDay__default = /*#__PURE__*/_interopDefaultLegacy(startOfDay);
 var originalStylers__default = /*#__PURE__*/_interopDefaultLegacy(originalStylers);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
-var AsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(AsyncSelect);
 var getDay__default = /*#__PURE__*/_interopDefaultLegacy(getDay);
 var getDate__default = /*#__PURE__*/_interopDefaultLegacy(getDate);
 var getDaysInMonth__default = /*#__PURE__*/_interopDefaultLegacy(getDaysInMonth);
@@ -17649,18 +17647,23 @@ var MultiSelectField = function MultiSelectField(_ref) {
 
 var styles$r = {"custom-list":"_cSkvD"};
 
-var _excluded$b4 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
+var _excluded$b4 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad", "isLoadingMore"];
 var CustomList = function CustomList(_ref) {
   var children = _ref.children,
     hasMoreOptions = _ref.hasMoreOptions,
     hasMoreOptionsFirstLoad = _ref.hasMoreOptionsFirstLoad,
+    isLoadingMore = _ref.isLoadingMore,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$b4);
   var __ = useTranslation('AsyncSelectField');
   var showFooter = hasMoreOptions;
   if (props.selectProps.inputValue === '' && typeof hasMoreOptionsFirstLoad === 'boolean') {
     showFooter = hasMoreOptionsFirstLoad;
   }
-  return React__default["default"].createElement(Select.components.MenuList, _extends({}, props), React__default["default"].createElement(React.Fragment, null, children, showFooter && props.options.length > 0 && React__default["default"].createElement(Inline, {
+  return React__default["default"].createElement(Select.components.MenuList, _extends({}, props), React__default["default"].createElement(React.Fragment, null, children, isLoadingMore ? React__default["default"].createElement(Inline, {
+    justifyContent: "center"
+  }, React__default["default"].createElement(Spinner, {
+    size: 20
+  })) : showFooter && props.options.length > 0 && React__default["default"].createElement(Inline, {
     justifyContent: "center"
   }, React__default["default"].createElement("div", {
     className: styles$r['custom-list']
@@ -17668,61 +17671,123 @@ var CustomList = function CustomList(_ref) {
 };
 
 var _excluded$b3 = ["loadOptions"];
+var MenuListContext = React__default["default"].createContext({
+  hasMoreOptions: false,
+  hasMoreOptionsFirstLoad: null,
+  isLoadingMore: false
+});
+// Defined outside the component so the reference is stable — prevents MenuList from
+// unmounting/remounting (and losing scroll position) on every state change.
+var AsyncMenuList = function AsyncMenuList(menuListProps) {
+  var ctx = React__default["default"].useContext(MenuListContext);
+  return React__default["default"].createElement(CustomList, _extends({}, menuListProps, ctx));
+};
 /**
  * A variation of select field that loads a dynamic list of options from a source rather than a fixed set of options. Use when you need to select from a dynamic list that can change such as roles, employees, locations, etc.
- * Instead of passing a `options` props, this component requires a `loadOptions` prop.
+ * Instead of passing an `options` prop, this component requires a `loadOptions` prop.
+ * Supports scroll-to-load-more: when the user scrolls to the bottom of the menu and a `nextCursor` is returned, the next page is automatically fetched and appended.
  * */
 var AsyncSelectField = function AsyncSelectField(_ref) {
   var loadOptions = _ref.loadOptions,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$b3);
-  var _useState = React.useState(false),
-    hasMoreOptions = _useState[0],
-    setHasMoreOptions = _useState[1];
-  var _useState2 = React.useState(),
-    hasMoreOptionsFirstLoad = _useState2[0],
-    setHasMoreOptionsFirstLoad = _useState2[1];
+  var _useState = React.useState([]),
+    displayedOptions = _useState[0],
+    setDisplayedOptions = _useState[1];
+  var _useState2 = React.useState(false),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
   var _useState3 = React.useState(false),
-    hasFirstLoadPerformed = _useState3[0],
-    setHasFirstLoadPerformed = _useState3[1];
-  var _useState4 = React.useState(null),
-    localOptions = _useState4[0],
-    setLocalOptions = _useState4[1];
-  var ref = React.useRef(null);
-  var handleInternalSearch = function handleInternalSearch(inputValue, callback) {
-    if (!localOptions) {
-      return;
-    }
-    var filteredOptions = localOptions.filter(function (option) {
-      return option.label.toLowerCase().includes(inputValue.toLocaleLowerCase());
+    isLoadingMore = _useState3[0],
+    setIsLoadingMore = _useState3[1];
+  var _useState4 = React.useState(''),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  var _useState5 = React.useState(false),
+    hasMore = _useState5[0],
+    setHasMore = _useState5[1];
+  var _useState6 = React.useState(null),
+    nextCursor = _useState6[0],
+    setNextCursor = _useState6[1];
+  var _useState7 = React.useState(null),
+    localOptions = _useState7[0],
+    setLocalOptions = _useState7[1];
+  var _useState8 = React.useState(null),
+    hasMoreOptionsFirstLoad = _useState8[0],
+    setHasMoreOptionsFirstLoad = _useState8[1];
+  var loadOptionsRef = React.useRef(loadOptions);
+  React.useEffect(function () {
+    loadOptionsRef.current = loadOptions;
+  }, [loadOptions]);
+  var fetchIdRef = React.useRef(0);
+  var firstLoadDoneRef = React.useRef(false);
+  // All dependencies are refs and stable state setters — safe with empty dep array.
+  var fetchOptions = React.useCallback(function (input) {
+    var id = ++fetchIdRef.current;
+    setIsLoading(true);
+    loadOptionsRef.current(input, null).then(function (_ref2) {
+      var options = _ref2.options,
+        more = _ref2.hasMore,
+        resultCursor = _ref2.nextCursor;
+      if (id !== fetchIdRef.current) return;
+      if (!firstLoadDoneRef.current) {
+        firstLoadDoneRef.current = true;
+        setHasMoreOptionsFirstLoad(more && resultCursor == null);
+        if (!more) setLocalOptions(options);
+      }
+      setDisplayedOptions(options);
+      setHasMore(more);
+      setNextCursor(resultCursor != null ? resultCursor : null);
+      setIsLoading(false);
+    })["catch"](function () {
+      if (id !== fetchIdRef.current) return;
+      setIsLoading(false);
     });
-    callback(filteredOptions);
-  };
-  var handleLoadOptions = function handleLoadOptions(inputValue, callback) {
-    if (hasMoreOptions) {
-      setHasMoreOptions(false);
-    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var debouncedFetchOptions = React.useMemo(function () {
+    return lodashEs.debounce(fetchOptions, 500, {
+      leading: true
+    });
+  }, [fetchOptions]);
+  React.useEffect(function () {
+    fetchOptions('');
+  }, [fetchOptions]);
+  var handleSearch = function handleSearch(value) {
+    ++fetchIdRef.current;
+    setIsLoadingMore(false);
     if (localOptions) {
-      handleInternalSearch(inputValue, callback);
+      var filtered = localOptions.filter(function (option) {
+        return option.label.toLowerCase().includes(value.toLowerCase());
+      });
+      setDisplayedOptions(filtered);
       return;
     }
-    loadOptions(inputValue).then(function (_ref2) {
-      var _ref$current;
-      var hasMore = _ref2.hasMore,
-        options = _ref2.options;
-      if (ref.current && inputValue !== (ref == null || (_ref$current = ref.current) == null ? void 0 : _ref$current['inputRef']['value'])) {
-        return;
-      }
-      if (!hasFirstLoadPerformed) {
-        setHasFirstLoadPerformed(true);
-        if (!hasMore) {
-          setLocalOptions(options);
-        }
-      }
-      setHasMoreOptions(hasMore);
-      if (hasMoreOptionsFirstLoad === undefined) {
-        setHasMoreOptionsFirstLoad(hasMore);
-      }
-      callback(options);
+    setDisplayedOptions([]);
+    setHasMore(false);
+    setNextCursor(null);
+    setIsLoading(true);
+    debouncedFetchOptions(value);
+  };
+  var handleScrollToBottom = function handleScrollToBottom() {
+    if (isLoadingMore || !hasMore || !nextCursor) return;
+    // Capture the search generation so a concurrent query change can invalidate this response.
+    var id = fetchIdRef.current;
+    setIsLoadingMore(true);
+    loadOptionsRef.current(inputValue, nextCursor).then(function (_ref3) {
+      var options = _ref3.options,
+        more = _ref3.hasMore,
+        resultCursor = _ref3.nextCursor;
+      if (id !== fetchIdRef.current) return;
+      setDisplayedOptions(function (prev) {
+        return [].concat(prev, options);
+      });
+      setHasMore(more);
+      setNextCursor(resultCursor != null ? resultCursor : null);
+      setIsLoadingMore(false);
+    })["catch"](function () {
+      if (id !== fetchIdRef.current) return;
+      setIsLoadingMore(false);
     });
   };
   var _useSelectField = useSelectField(_extends({}, props, {
@@ -17730,24 +17795,38 @@ var AsyncSelectField = function AsyncSelectField(_ref) {
     })),
     fieldProps = _useSelectField.fieldProps,
     selectProps = _useSelectField.selectProps;
-  return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(AffixContainer, {
+  var menuListComponents = React.useMemo(function () {
+    return _extends({}, selectProps.components, {
+      MenuList: AsyncMenuList
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [selectProps.components]);
+  return React__default["default"].createElement(MenuListContext.Provider, {
+    value: {
+      hasMoreOptions: hasMore && nextCursor === null,
+      hasMoreOptionsFirstLoad: hasMoreOptionsFirstLoad,
+      isLoadingMore: isLoadingMore
+    }
+  }, React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(AffixContainer, {
     prefix: props.prefix
-  }, React__default["default"].createElement(AsyncSelect__default["default"], _extends({}, selectProps, {
-    components: _extends({}, selectProps.components, {
-      MenuList: function MenuList(props) {
-        return React__default["default"].createElement(CustomList, _extends({}, props, {
-          hasMoreOptions: hasMoreOptions,
-          hasMoreOptionsFirstLoad: hasMoreOptionsFirstLoad
-        }));
+  }, React__default["default"].createElement(Select__default["default"], _extends({}, selectProps, {
+    components: menuListComponents,
+    options: displayedOptions,
+    isLoading: isLoading,
+    inputValue: inputValue,
+    onInputChange: function onInputChange(value, _ref4) {
+      var action = _ref4.action;
+      if (action !== 'input-blur' && action !== 'menu-close') {
+        setInputValue(value);
       }
-    }),
-    cacheOptions: false,
-    defaultOptions: true,
-    loadOptions: lodashEs.debounce(handleLoadOptions, 500, {
-      leading: true
-    }),
-    ref: ref
-  }))));
+      if (action === 'input-change') {
+        handleSearch(value);
+      }
+    },
+    onMenuScrollToBottom: handleScrollToBottom,
+    filterOption: null
+  })))));
 };
 
 var useDateFieldControllers = function useDateFieldControllers(_ref) {