@7shifts/sous-chef 4.11.0 → 4.12.0

package/dist/index.modern.js

@@ -16,7 +16,6 @@ import originalStylers from 'react-day-picker/dist/style.module.css';
 import 'react-toastify/dist/ReactToastify.css';
 import { isSupportedCountry, parsePhoneNumber, AsYouType, getCountryCallingCode, isValidPhoneNumber as isValidPhoneNumber$1 } from 'libphonenumber-js';
 import Select, { components } from 'react-select';
-import AsyncSelect from 'react-select/async';
 import { startOfDay as startOfDay$1, isDate } from 'date-fns';
 import getDay from 'date-fns/getDay';
 import getDate from 'date-fns/getDate';
@@ -17622,12 +17621,13 @@ const MultiSelectField = ({
 
 var styles$r = {"custom-list":"_cSkvD"};
 
-const _excluded$b4 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
+const _excluded$b4 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad", "isLoadingMore"];
 const CustomList = _ref => {
   let {
       children,
       hasMoreOptions,
-      hasMoreOptionsFirstLoad
+      hasMoreOptionsFirstLoad,
+      isLoadingMore
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$b4);
   const __ = useTranslation('AsyncSelectField');
@@ -17635,7 +17635,11 @@ const CustomList = _ref => {
   if (props.selectProps.inputValue === '' && typeof hasMoreOptionsFirstLoad === 'boolean') {
     showFooter = hasMoreOptionsFirstLoad;
   }
-  return React__default.createElement(components.MenuList, _extends({}, props), React__default.createElement(Fragment, null, children, showFooter && props.options.length > 0 && React__default.createElement(Inline, {
+  return React__default.createElement(components.MenuList, _extends({}, props), React__default.createElement(Fragment, null, children, isLoadingMore ? React__default.createElement(Inline, {
+    justifyContent: "center"
+  }, React__default.createElement(Spinner, {
+    size: 20
+  })) : showFooter && props.options.length > 0 && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
     className: styles$r['custom-list']
@@ -17643,54 +17647,105 @@ const CustomList = _ref => {
 };
 
 const _excluded$b3 = ["loadOptions"];
+const MenuListContext = React__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.
+const AsyncMenuList = menuListProps => {
+  const ctx = React__default.useContext(MenuListContext);
+  return React__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.
  * */
 const AsyncSelectField = _ref => {
   let {
       loadOptions
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$b3);
-  const [hasMoreOptions, setHasMoreOptions] = useState(false);
-  const [hasMoreOptionsFirstLoad, setHasMoreOptionsFirstLoad] = useState();
-  const [hasFirstLoadPerformed, setHasFirstLoadPerformed] = useState(false);
+  const [displayedOptions, setDisplayedOptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [hasMore, setHasMore] = useState(false);
+  const [nextCursor, setNextCursor] = useState(null);
   const [localOptions, setLocalOptions] = useState(null);
-  const ref = useRef(null);
-  const handleInternalSearch = (inputValue, callback) => {
-    if (!localOptions) {
-      return;
-    }
-    const filteredOptions = localOptions.filter(option => option.label.toLowerCase().includes(inputValue.toLocaleLowerCase()));
-    callback(filteredOptions);
-  };
-  const handleLoadOptions = (inputValue, callback) => {
-    if (hasMoreOptions) {
-      setHasMoreOptions(false);
-    }
+  const [hasMoreOptionsFirstLoad, setHasMoreOptionsFirstLoad] = useState(null);
+  const loadOptionsRef = useRef(loadOptions);
+  useEffect(() => {
+    loadOptionsRef.current = loadOptions;
+  }, [loadOptions]);
+  const fetchIdRef = useRef(0);
+  const firstLoadDoneRef = useRef(false);
+  // All dependencies are refs and stable state setters — safe with empty dep array.
+  const fetchOptions = useCallback(input => {
+    const id = ++fetchIdRef.current;
+    setIsLoading(true);
+    loadOptionsRef.current(input, null).then(({
+      options,
+      hasMore: more,
+      nextCursor: resultCursor
+    }) => {
+      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(() => {
+      if (id !== fetchIdRef.current) return;
+      setIsLoading(false);
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  const debouncedFetchOptions = useMemo(() => debounce(fetchOptions, 500, {
+    leading: true
+  }), [fetchOptions]);
+  useEffect(() => {
+    fetchOptions('');
+  }, [fetchOptions]);
+  const handleSearch = value => {
+    ++fetchIdRef.current;
+    setIsLoadingMore(false);
     if (localOptions) {
-      handleInternalSearch(inputValue, callback);
+      const filtered = localOptions.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));
+      setDisplayedOptions(filtered);
       return;
     }
-    loadOptions(inputValue).then(({
-      hasMore,
-      options
+    setDisplayedOptions([]);
+    setHasMore(false);
+    setNextCursor(null);
+    setIsLoading(true);
+    debouncedFetchOptions(value);
+  };
+  const handleScrollToBottom = () => {
+    if (isLoadingMore || !hasMore || !nextCursor) return;
+    // Capture the search generation so a concurrent query change can invalidate this response.
+    const id = fetchIdRef.current;
+    setIsLoadingMore(true);
+    loadOptionsRef.current(inputValue, nextCursor).then(({
+      options,
+      hasMore: more,
+      nextCursor: resultCursor
     }) => {
-      var _ref$current;
-      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);
+      if (id !== fetchIdRef.current) return;
+      setDisplayedOptions(prev => [...prev, ...options]);
+      setHasMore(more);
+      setNextCursor(resultCursor != null ? resultCursor : null);
+      setIsLoadingMore(false);
+    }).catch(() => {
+      if (id !== fetchIdRef.current) return;
+      setIsLoadingMore(false);
     });
   };
   const {
@@ -17699,22 +17754,37 @@ const AsyncSelectField = _ref => {
   } = useSelectField(_extends({}, props, {
     options: []
   }));
-  return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(AffixContainer, {
+  const menuListComponents = useMemo(() => _extends({}, selectProps.components, {
+    MenuList: AsyncMenuList
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [selectProps.components]);
+  return React__default.createElement(MenuListContext.Provider, {
+    value: {
+      hasMoreOptions: hasMore && nextCursor === null,
+      hasMoreOptionsFirstLoad,
+      isLoadingMore
+    }
+  }, React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: props.prefix
-  }, React__default.createElement(AsyncSelect, _extends({}, selectProps, {
-    components: _extends({}, selectProps.components, {
-      MenuList: props => React__default.createElement(CustomList, _extends({}, props, {
-        hasMoreOptions: hasMoreOptions,
-        hasMoreOptionsFirstLoad: hasMoreOptionsFirstLoad
-      }))
-    }),
-    cacheOptions: false,
-    defaultOptions: true,
-    loadOptions: debounce(handleLoadOptions, 500, {
-      leading: true
-    }),
-    ref: ref
-  }))));
+  }, React__default.createElement(Select, _extends({}, selectProps, {
+    components: menuListComponents,
+    options: displayedOptions,
+    isLoading: isLoading,
+    inputValue: inputValue,
+    onInputChange: (value, {
+      action
+    }) => {
+      if (action !== 'input-blur' && action !== 'menu-close') {
+        setInputValue(value);
+      }
+      if (action === 'input-change') {
+        handleSearch(value);
+      }
+    },
+    onMenuScrollToBottom: handleScrollToBottom,
+    filterOption: null
+  })))));
 };
 
 const useDateFieldControllers = ({