@pushwoosh/dumb-components 1.1.142 → 1.1.143

package/Combobox/Combobox.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState } from 'react';
-import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
+import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, resolveDropdownText, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
 function FreeCombobox({
   items,
   loadItems,
   debounceMs = DEFAULT_DEBOUNCE_MS,
+  minChars,
   value,
   onChange,
   onClose,
@@ -12,13 +13,14 @@ function FreeCombobox({
   getLabel: getLabelProp,
   filter,
   renderItem,
-  renderEmpty,
+  emptyText,
+  loadingText,
   placeholder,
   disabled,
   loading,
   clearable,
   autosize,
-  $isErrored,
+  hasError,
   width,
   minWidth
 }) {
@@ -29,11 +31,14 @@ function FreeCombobox({
   const [isOpen, setIsOpen] = useState(false);
   const {
     filteredItems,
-    loading: asyncLoading
+    loading: asyncLoading,
+    loadingMore,
+    loadMore
   } = useDropdownItems({
     items,
     loadItems,
     debounceMs,
+    minChars,
     getLabel,
     filter,
     query: value,
@@ -46,7 +51,9 @@ function FreeCombobox({
     setActiveIndex(-1);
   }, [setActiveIndex]);
   const pick = useCallback(item => {
-    onChange(getLabel(item));
+    onChange(getLabel(item), {
+      source: 'select'
+    });
     setIsOpen(false);
     setActiveIndex(-1);
   }, [onChange, getLabel, setActiveIndex]);
@@ -57,7 +64,8 @@ function FreeCombobox({
     activeIndex,
     setActiveIndex,
     onSelectIndex: index => pick(filteredItems[index]),
-    onEscape: close
+    onEscape: close,
+    onReachEnd: loadMore
   });
   const onShellMouseDown = useShellMouseDown(inputRef, isOpen, open);
   useFieldOpenEffects({
@@ -82,18 +90,22 @@ function FreeCombobox({
       onSelect: () => pick(item)
     };
   }), [filteredItems, activeIndex, value, getLabel, renderItem, pick, baseId]);
-  const dropdownVisible = isOpen && filteredItems.length > 0;
+  const isLoading = loading || asyncLoading;
+  const hasSource = items !== undefined || loadItems !== undefined;
+  const dropdownVisible = isOpen && (filteredItems.length > 0 || isLoading || hasSource);
   const activeDescendant = activeIndex >= 0 && activeIndex < filteredItems.length ? `${baseId}-opt-${filteredItems[activeIndex]}` : undefined;
   const onInputChange = event => {
-    onChange(event.target.value);
+    onChange(event.target.value, {
+      source: 'input'
+    });
     if (!isOpen) open();
   };
   return _jsx(FieldShell, {
     isOpen: isOpen,
     dropdownOpen: dropdownVisible,
-    isErrored: $isErrored,
+    isErrored: hasError,
     disabled: disabled,
-    loading: loading || asyncLoading,
+    loading: isLoading,
     width: width,
     minWidth: minWidth,
     autosize: autosize,
@@ -102,11 +114,16 @@ function FreeCombobox({
     showClear: !!(clearable && value),
     onClear: () => {
       var _inputRef$current;
-      onChange('');
+      onChange('', {
+        source: 'input'
+      });
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
     },
     dropdownItems: dropdownItems,
-    emptyText: renderEmpty ? renderEmpty(value) : undefined,
+    emptyText: resolveDropdownText(emptyText, value),
+    loadingText: resolveDropdownText(loadingText, value),
+    loadingMore: loadingMore,
+    onLoadMore: loadMore,
     listboxId: listboxId,
     children: _jsx(FieldInput, {
       ref: inputRef,
@@ -129,6 +146,7 @@ function SelectCombobox({
   items,
   loadItems,
   debounceMs = DEFAULT_DEBOUNCE_MS,
+  minChars,
   value,
   onChange,
   onClose,
@@ -137,13 +155,14 @@ function SelectCombobox({
   getKey: getKeyProp,
   filter,
   renderItem,
-  renderEmpty,
+  emptyText,
+  loadingText,
   placeholder,
   disabled,
   loading,
   clearable,
   autosize,
-  $isErrored,
+  hasError,
   width,
   minWidth
 }) {
@@ -157,11 +176,14 @@ function SelectCombobox({
   const {
     sourceItems,
     filteredItems,
-    loading: asyncLoading
+    loading: asyncLoading,
+    loadingMore,
+    loadMore
   } = useDropdownItems({
     items,
     loadItems,
     debounceMs,
+    minChars,
     getLabel,
     filter,
     query,
@@ -198,7 +220,8 @@ function SelectCombobox({
     activeIndex,
     setActiveIndex,
     onSelectIndex: index => commit(filteredItems[index]),
-    onEscape: close
+    onEscape: close,
+    onReachEnd: loadMore
   });
   const onShellMouseDown = useShellMouseDown(inputRef, isOpen, open);
   useFieldOpenEffects({
@@ -228,7 +251,7 @@ function SelectCombobox({
   return _jsx(FieldShell, {
     isOpen: isOpen,
     dropdownOpen: isOpen,
-    isErrored: $isErrored,
+    isErrored: hasError,
     disabled: disabled,
     loading: loading || asyncLoading,
     width: width,
@@ -243,7 +266,10 @@ function SelectCombobox({
       (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
     },
     dropdownItems: dropdownItems,
-    emptyText: renderEmpty ? renderEmpty(query) : undefined,
+    emptyText: resolveDropdownText(emptyText, query),
+    loadingText: resolveDropdownText(loadingText, query),
+    loadingMore: loadingMore,
+    onLoadMore: loadMore,
     listboxId: listboxId,
     children: _jsx(FieldInput, {
       ref: inputRef,

package/Combobox/index.d.ts

@@ -1,2 +1,2 @@
 export { Combobox } from './Combobox';
-export type { ComboboxProps, FreeComboboxProps, SelectComboboxProps, } from './types';
+export type { ComboboxProps, ComboboxChangeSource, ComboboxChangeMeta, FreeComboboxProps, SelectComboboxProps, } from './types';

package/Combobox/types.d.ts

@@ -1,18 +1,25 @@
 import type { ReactNode } from 'react';
-import type { GetKeyProp, ItemState } from '../shared/dropdownField';
+import type { DropdownText, GetKeyProp, ItemState, LoadItems } from '../shared/dropdownField';
 type ComboboxSource<T> = {
     items?: T[];
     loadItems?: never;
     debounceMs?: never;
+    minChars?: never;
 } | {
     items?: never;
-    loadItems: (query: string) => Promise<T[]>;
+    loadItems: LoadItems<T>;
     debounceMs?: number;
+    minChars?: number;
+};
+export type ComboboxChangeSource = 'input' | 'select';
+export type ComboboxChangeMeta = {
+    source: ComboboxChangeSource;
 };
 type CommonProps<T> = {
     filter?: (item: T, query: string) => boolean;
     renderItem?: (item: T, state: ItemState) => ReactNode;
-    renderEmpty?: (query: string) => ReactNode;
+    emptyText?: DropdownText;
+    loadingText?: DropdownText;
     onClose?: () => void;
     autoFocus?: boolean;
     placeholder?: string;
@@ -20,14 +27,14 @@ type CommonProps<T> = {
     loading?: boolean;
     clearable?: boolean;
     autosize?: boolean;
-    $isErrored?: boolean;
+    hasError?: boolean;
     width?: string;
     minWidth?: string;
 };
 export type FreeComboboxProps = ComboboxSource<string> & CommonProps<string> & {
     select?: false;
     value: string;
-    onChange: (value: string) => void;
+    onChange: (value: string, meta: ComboboxChangeMeta) => void;
     getLabel?: (item: string) => string;
 };
 export type SelectComboboxProps<T> = ComboboxSource<T> & GetKeyProp<T> & CommonProps<T> & {

package/ComboboxMulti/ComboboxMulti.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import { type ComboboxMultiProps } from './types';
-export declare function ComboboxMulti<T>({ items, loadItems, debounceMs, value, onChange, onClose, autoFocus, getLabel, getKey: getKeyProp, filter, renderItem, renderEmpty, creatable, onCreate, canCreate, renderCreateLabel, maxValues, placeholder, disabled, loading, clearable, autosize, $isErrored, width, minWidth, }: ComboboxMultiProps<T>): ReactElement;
+export declare function ComboboxMulti<T>({ items, loadItems, debounceMs, minChars, value, onChange, onClose, autoFocus, getLabel, getKey: getKeyProp, filter, renderItem, emptyText, loadingText, creatable, onCreate, canCreate, renderCreateLabel, maxValues, placeholder, disabled, loading, clearable, autosize, hasError, width, minWidth, }: ComboboxMultiProps<T>): ReactElement;

package/ComboboxMulti/ComboboxMulti.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState } from 'react';
 import { Chip } from '../Chip';
-import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
+import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, resolveDropdownText, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
 function defaultCanCreate(query, items, getLabel) {
   const trimmed = query.trim();
   if (!trimmed) return false;
@@ -12,6 +12,7 @@ export function ComboboxMulti({
   items,
   loadItems,
   debounceMs = DEFAULT_DEBOUNCE_MS,
+  minChars,
   value,
   onChange,
   onClose,
@@ -20,7 +21,8 @@ export function ComboboxMulti({
   getKey: getKeyProp,
   filter,
   renderItem,
-  renderEmpty,
+  emptyText,
+  loadingText,
   creatable,
   onCreate,
   canCreate,
@@ -31,7 +33,7 @@ export function ComboboxMulti({
   loading,
   clearable,
   autosize,
-  $isErrored,
+  hasError,
   width,
   minWidth
 }) {
@@ -48,12 +50,15 @@ export function ComboboxMulti({
   const {
     sourceItems,
     filteredItems,
-    loading: asyncLoading
+    loading: asyncLoading,
+    loadingMore,
+    loadMore
   } = useDropdownItems({
     items,
     loadItems,
     localItems: createdItems,
     debounceMs,
+    minChars,
     getLabel,
     filter,
     query,
@@ -103,6 +108,7 @@ export function ComboboxMulti({
     setActiveIndex,
     onSelectIndex: index => toggle(visibleItems[index]),
     onEscape: close,
+    onReachEnd: loadMore,
     hasExtraRow: canCreateNow,
     onSelectExtra: create,
     isQueryEmpty: !query && value.length > 0,
@@ -155,7 +161,7 @@ export function ComboboxMulti({
   return _jsxs(FieldShell, {
     isOpen: isOpen,
     dropdownOpen: isOpen,
-    isErrored: $isErrored,
+    isErrored: hasError,
     disabled: disabled,
     loading: loading || asyncLoading,
     width: width,
@@ -170,7 +176,10 @@ export function ComboboxMulti({
     showChevron: true,
     onToggle: toggleOpen,
     dropdownItems: dropdownItems,
-    emptyText: renderEmpty ? renderEmpty(query) : undefined,
+    emptyText: resolveDropdownText(emptyText, query),
+    loadingText: resolveDropdownText(loadingText, query),
+    loadingMore: loadingMore,
+    onLoadMore: loadMore,
     createLabel: createLabel,
     createActive: createActive,
     onCreate: create,

package/ComboboxMulti/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { GetKeyProp, ItemState, ItemsSource } from '../shared/dropdownField';
+import type { DropdownText, GetKeyProp, ItemState, ItemsSource } from '../shared/dropdownField';
 type CreatableProp<T> = [T] extends [string] ? {
     creatable?: boolean;
     onCreate?: (query: string) => T;
@@ -18,7 +18,8 @@ export type ComboboxMultiProps<T> = ItemsSource<T> & GetKeyProp<T> & CreatablePr
     getLabel: (item: T) => string;
     filter?: (item: T, query: string) => boolean;
     renderItem?: (item: T, state: ItemState) => ReactNode;
-    renderEmpty?: (query: string) => ReactNode;
+    emptyText?: DropdownText;
+    loadingText?: DropdownText;
     canCreate?: (query: string, items: T[]) => boolean;
     renderCreateLabel?: (query: string) => ReactNode;
     maxValues?: number;
@@ -27,7 +28,7 @@ export type ComboboxMultiProps<T> = ItemsSource<T> & GetKeyProp<T> & CreatablePr
     loading?: boolean;
     clearable?: boolean;
     autosize?: boolean;
-    $isErrored?: boolean;
+    hasError?: boolean;
     width?: string;
     minWidth?: string;
 };

package/index.d.ts

@@ -22,7 +22,7 @@ export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton, type SortButtonParams } from './SortButton';
 export { Select, SelectAsync, CreatableSelect, SelectComponents, CLASS_NAME_PREFIX, type SelectBase, type SelectOption, type MultiSelectOptions, type SingleValue, type MultiValue, } from './Select';
-export { Combobox, type ComboboxProps, type FreeComboboxProps, type SelectComboboxProps, } from './Combobox';
+export { Combobox, type ComboboxProps, type ComboboxChangeSource, type ComboboxChangeMeta, type FreeComboboxProps, type SelectComboboxProps, } from './Combobox';
 export { ComboboxMulti, type ComboboxMultiProps } from './ComboboxMulti';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.142",
+  "version": "1.1.143",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
     "@types/react-transition-group": "^4.4.12",
-    "@types/styled-components": "^5.1.34",
+    "@types/styled-components": "^5.1.36",
     "glob": "^11.0.3",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",

package/shared/dropdownField/FieldShell.d.ts

@@ -20,11 +20,14 @@ type FieldShellProps = {
     onToggle?: () => void;
     dropdownItems: DropdownItemDescriptor[];
     emptyText?: ReactNode;
+    loadingText?: ReactNode;
+    loadingMore?: boolean;
+    onLoadMore?: () => void;
     createLabel?: ReactNode;
     createActive?: boolean;
     onCreate?: () => void;
     listboxId?: string;
     createId?: string;
 };
-export declare function FieldShell({ children, isOpen, dropdownOpen, isErrored, disabled, loading, width, minWidth, autosize, tightLeft, onShellMouseDown, onClose, showClear, onClear, clearLabel, showChevron, onToggle, dropdownItems, emptyText, createLabel, createActive, onCreate, listboxId, createId, }: FieldShellProps): ReactElement;
+export declare function FieldShell({ children, isOpen, dropdownOpen, isErrored, disabled, loading, width, minWidth, autosize, tightLeft, onShellMouseDown, onClose, showClear, onClear, clearLabel, showChevron, onToggle, dropdownItems, emptyText, loadingText, loadingMore, onLoadMore, createLabel, createActive, onCreate, listboxId, createId, }: FieldShellProps): ReactElement;
 export {};

package/shared/dropdownField/FieldShell.js

@@ -24,6 +24,9 @@ export function FieldShell({
   onToggle,
   dropdownItems,
   emptyText,
+  loadingText,
+  loadingMore,
+  onLoadMore,
   createLabel,
   createActive,
   onCreate,
@@ -99,6 +102,10 @@ export function FieldShell({
       floatingStyles: floatingStyles,
       items: dropdownItems,
       emptyText: emptyText,
+      loading: loading,
+      loadingText: loadingText,
+      loadingMore: loadingMore,
+      onLoadMore: onLoadMore,
       createLabel: createLabel,
       createActive: createActive,
       onCreate: onCreate,

package/shared/dropdownField/SuggestionsDropdown.d.ts

@@ -5,6 +5,10 @@ type SuggestionsDropdownProps = {
     floatingStyles: CSSProperties;
     items: DropdownItemDescriptor[];
     emptyText?: ReactNode;
+    loading?: boolean;
+    loadingText?: ReactNode;
+    loadingMore?: boolean;
+    onLoadMore?: () => void;
     createLabel?: ReactNode;
     createActive?: boolean;
     onCreate?: () => void;
@@ -12,5 +16,5 @@ type SuggestionsDropdownProps = {
     createId?: string;
     zIndex?: number;
 };
-export declare function SuggestionsDropdown({ floatingRef, floatingStyles, items, emptyText, createLabel, createActive, onCreate, listboxId, createId, zIndex, }: SuggestionsDropdownProps): ReactElement | null;
+export declare function SuggestionsDropdown({ floatingRef, floatingStyles, items, emptyText, loading, loadingText, loadingMore, onLoadMore, createLabel, createActive, onCreate, listboxId, createId, zIndex, }: SuggestionsDropdownProps): ReactElement | null;
 export {};

package/shared/dropdownField/SuggestionsDropdown.js

@@ -1,13 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { CreateItemLabel, Dropdown, DropdownEmpty, DropdownItem } from './styles';
+import { CreateItemLabel, Dropdown, DropdownEmpty, DropdownItem, DropdownLoadingMore } from './styles';
+import { Spinner } from '../../Spinner';
+const LOAD_MORE_THRESHOLD = 24;
 const CREATE_KEY = '__create__';
 export function SuggestionsDropdown({
   floatingRef,
   floatingStyles,
   items,
   emptyText = 'No options',
+  loading,
+  loadingText = 'Loading…',
+  loadingMore,
+  onLoadMore,
   createLabel,
   createActive,
   onCreate,
@@ -16,6 +22,11 @@ export function SuggestionsDropdown({
   zIndex
 }) {
   const activeItemRef = useRef(null);
+  const onScroll = event => {
+    if (!onLoadMore) return;
+    const el = event.currentTarget;
+    if (el.scrollHeight - el.scrollTop - el.clientHeight <= LOAD_MORE_THRESHOLD) onLoadMore();
+  };
   const activeItem = items.find(item => item.active);
   const activeKey = createActive ? CREATE_KEY : (activeItem === null || activeItem === void 0 ? void 0 : activeItem.key) ?? null;
   useEffect(() => {
@@ -26,7 +37,7 @@ export function SuggestionsDropdown({
     });
   }, [activeKey]);
   if (typeof document === 'undefined') return null;
-  const isEmpty = items.length === 0 && !createLabel;
+  const isEmpty = !loading && items.length === 0 && !createLabel;
   return createPortal(_jsxs(Dropdown, {
     ref: floatingRef,
     style: {
@@ -35,7 +46,10 @@ export function SuggestionsDropdown({
     },
     id: listboxId,
     role: "listbox",
-    children: [createLabel && _jsx(DropdownItem, {
+    onScroll: onScroll,
+    children: [loading && _jsx(DropdownEmpty, {
+      children: loadingText
+    }), !loading && createLabel && _jsx(DropdownItem, {
       ref: createActive ? activeItemRef : undefined,
       id: createId,
       role: "option",
@@ -48,7 +62,7 @@ export function SuggestionsDropdown({
       children: _jsx(CreateItemLabel, {
         children: createLabel
       })
-    }), items.map(item => _jsx(DropdownItem, {
+    }), !loading && items.map(item => _jsx(DropdownItem, {
       ref: item.active ? activeItemRef : undefined,
       id: item.id,
       role: "option",
@@ -61,7 +75,11 @@ export function SuggestionsDropdown({
         (_item$onSelect = item.onSelect) === null || _item$onSelect === void 0 || _item$onSelect.call(item);
       },
       children: item.label
-    }, item.key)), isEmpty && _jsx(DropdownEmpty, {
+    }, item.key)), !loading && loadingMore && _jsx(DropdownLoadingMore, {
+      children: _jsx(Spinner, {
+        size: "small"
+      })
+    }), isEmpty && _jsx(DropdownEmpty, {
       children: emptyText
     })]
   }), document.body);

package/shared/dropdownField/index.d.ts

@@ -8,6 +8,6 @@ export { useDropdownItems } from './useDropdownItems';
 export { useActiveIndex } from './useActiveIndex';
 export { useFieldOpenEffects } from './useFieldOpenEffects';
 export { useListNavigation } from './useListNavigation';
-export { defaultGetKey, defaultLabelFilter, useShellMouseDown } from './shared';
+export { defaultGetKey, defaultLabelFilter, resolveDropdownText, useShellMouseDown, } from './shared';
 export { DEFAULT_DEBOUNCE_MS } from './constants';
-export type { ItemState, DropdownItemDescriptor, GetKeyProp, ItemsSource, } from './types';
+export type { ItemState, DropdownItemDescriptor, DropdownText, GetKeyProp, ItemsSource, LoadItems, LoadItemsResult, } from './types';

package/shared/dropdownField/index.js

@@ -8,5 +8,5 @@ export { useDropdownItems } from './useDropdownItems';
 export { useActiveIndex } from './useActiveIndex';
 export { useFieldOpenEffects } from './useFieldOpenEffects';
 export { useListNavigation } from './useListNavigation';
-export { defaultGetKey, defaultLabelFilter, useShellMouseDown } from './shared';
+export { defaultGetKey, defaultLabelFilter, resolveDropdownText, useShellMouseDown } from './shared';
 export { DEFAULT_DEBOUNCE_MS } from './constants';

package/shared/dropdownField/shared.d.ts

@@ -1,4 +1,6 @@
-import { type MouseEvent, type RefObject } from 'react';
+import { type MouseEvent, type ReactNode, type RefObject } from 'react';
+import { type DropdownText } from './types';
+export declare function resolveDropdownText(text: DropdownText, query: string): ReactNode;
 export declare function defaultGetKey<T>(item: T): string | number;
 export declare function defaultLabelFilter<T>(item: T, query: string, getLabel: (item: T) => string): boolean;
 export declare function useShellMouseDown(inputRef: RefObject<HTMLInputElement>, isOpen: boolean, open: () => void): (event: MouseEvent<HTMLDivElement>) => void;

package/shared/dropdownField/shared.js

@@ -1,4 +1,7 @@
 import { useCallback } from 'react';
+export function resolveDropdownText(text, query) {
+  return typeof text === 'function' ? text(query) : text;
+}
 export function defaultGetKey(item) {
   return item;
 }

package/shared/dropdownField/styles.d.ts

@@ -21,4 +21,5 @@ export declare const DropdownItem: import("styled-components").StyledComponent<"
     $selected?: boolean;
 }, never>;
 export declare const DropdownEmpty: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownLoadingMore: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CreateItemLabel: import("styled-components").StyledComponent<"span", any, {}, never>;

package/shared/dropdownField/styles.js

@@ -75,7 +75,11 @@ export const DropdownEmpty = styled.div.withConfig({
   displayName: "DropdownEmpty",
   componentId: "sc-1pvwhhw-8"
 })(["padding:6px 12px;", ";color:", ";"], textBase, Color.PHANTOM);
+export const DropdownLoadingMore = styled.div.withConfig({
+  displayName: "DropdownLoadingMore",
+  componentId: "sc-1pvwhhw-9"
+})(["display:flex;align-items:center;justify-content:center;padding:8px 12px;"]);
 export const CreateItemLabel = styled.span.withConfig({
   displayName: "CreateItemLabel",
-  componentId: "sc-1pvwhhw-9"
+  componentId: "sc-1pvwhhw-10"
 })(["color:", ";"], Color.PRIMARY);

package/shared/dropdownField/types.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+export type DropdownText = ReactNode | ((query: string) => ReactNode);
 export type ItemState = {
     selected: boolean;
     active: boolean;
@@ -8,14 +9,21 @@ export type GetKeyProp<T> = [T] extends [string | number] ? {
 } : {
     getKey: (item: T) => string | number;
 };
+export type LoadItemsResult<T> = {
+    items: T[];
+    hasMore?: boolean;
+};
+export type LoadItems<T> = (query: string, page: number) => Promise<LoadItemsResult<T>>;
 export type ItemsSource<T> = {
     items: T[];
     loadItems?: never;
     debounceMs?: never;
+    minChars?: never;
 } | {
     items?: never;
-    loadItems: (query: string) => Promise<T[]>;
+    loadItems: LoadItems<T>;
     debounceMs?: number;
+    minChars?: number;
 };
 export type DropdownItemDescriptor = {
     key: string | number;

package/shared/dropdownField/useAsyncItems.d.ts

@@ -1,11 +1,16 @@
+import { type LoadItems } from './types';
 type Args<T> = {
-    loadItems?: (query: string) => Promise<T[]>;
+    loadItems?: LoadItems<T>;
     query: string;
     isOpen: boolean;
     debounceMs?: number;
+    minChars?: number;
 };
-export declare function useAsyncItems<T>({ loadItems, query, isOpen, debounceMs, }: Args<T>): {
+type Result<T> = {
     items: T[];
     loading: boolean;
+    loadingMore: boolean;
+    loadMore: () => void;
 };
+export declare function useAsyncItems<T>({ loadItems, query, isOpen, debounceMs, minChars, }: Args<T>): Result<T>;
 export {};

package/shared/dropdownField/useAsyncItems.js

@@ -1,46 +1,78 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { DEFAULT_DEBOUNCE_MS } from './constants';
 import { useDebouncedValue } from './useDebouncedValue';
 export function useAsyncItems({
   loadItems,
   query,
   isOpen,
-  debounceMs = DEFAULT_DEBOUNCE_MS
+  debounceMs = DEFAULT_DEBOUNCE_MS,
+  minChars = 0
 }) {
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
   const debouncedQuery = useDebouncedValue(query, debounceMs);
   const loadItemsRef = useRef(loadItems);
   loadItemsRef.current = loadItems;
-  const lastQueryRef = useRef(null);
+  const sessionRef = useRef(0);
+  const pageRef = useRef(0);
+  const queryRef = useRef('');
+  const loadingRef = useRef(false);
+  const hasMoreRef = useRef(false);
   useEffect(() => {
     const loader = loadItemsRef.current;
-    if (!loader || !isOpen) {
-      lastQueryRef.current = null;
-      return undefined;
-    }
-    if (lastQueryRef.current === debouncedQuery) {
+    const belowMin = debouncedQuery.trim().length < minChars;
+    sessionRef.current += 1;
+    pageRef.current = 0;
+    loadingRef.current = false;
+    hasMoreRef.current = false;
+    setLoadingMore(false);
+    if (!loader || !isOpen || belowMin) {
       setLoading(false);
+      if (!loader || belowMin) setItems([]);
       return undefined;
     }
-    let cancelled = false;
+    const session = sessionRef.current;
+    queryRef.current = debouncedQuery;
+    loadingRef.current = true;
     setLoading(true);
-    Promise.resolve(loader(debouncedQuery)).then(result => {
-      if (cancelled) return;
-      lastQueryRef.current = debouncedQuery;
-      setItems(result);
+    Promise.resolve(loader(debouncedQuery, 0)).then(result => {
+      if (session !== sessionRef.current) return;
+      setItems(result.items);
+      hasMoreRef.current = result.hasMore ?? false;
+      loadingRef.current = false;
       setLoading(false);
     }).catch(() => {
-      if (cancelled) return;
+      if (session !== sessionRef.current) return;
+      loadingRef.current = false;
       setLoading(false);
     });
-    return () => {
-      cancelled = true;
-      setLoading(false);
-    };
-  }, [debouncedQuery, isOpen]);
+    return undefined;
+  }, [debouncedQuery, isOpen, minChars]);
+  const loadMore = useCallback(() => {
+    const loader = loadItemsRef.current;
+    if (!loader || loadingRef.current || !hasMoreRef.current) return;
+    const session = sessionRef.current;
+    const nextPage = pageRef.current + 1;
+    loadingRef.current = true;
+    setLoadingMore(true);
+    Promise.resolve(loader(queryRef.current, nextPage)).then(result => {
+      if (session !== sessionRef.current) return;
+      pageRef.current = nextPage;
+      setItems(prev => [...prev, ...result.items]);
+      hasMoreRef.current = result.hasMore ?? false;
+      loadingRef.current = false;
+      setLoadingMore(false);
+    }).catch(() => {
+      if (session !== sessionRef.current) return;
+      loadingRef.current = false;
+      setLoadingMore(false);
+    });
+  }, []);
   return {
     items,
-    loading
+    loading,
+    loadingMore,
+    loadMore
   };
 }

package/shared/dropdownField/useDropdownItems.d.ts

@@ -1,16 +1,21 @@
+import { type LoadItems } from './types';
 type Args<T> = {
     items?: T[];
-    loadItems?: (query: string) => Promise<T[]>;
+    loadItems?: LoadItems<T>;
     localItems?: T[];
     debounceMs?: number;
+    minChars?: number;
     getLabel: (item: T) => string;
     filter?: (item: T, query: string) => boolean;
     query: string;
     isOpen: boolean;
 };
-export declare function useDropdownItems<T>({ items, loadItems, localItems, debounceMs, getLabel, filter, query, isOpen, }: Args<T>): {
+type Result<T> = {
     sourceItems: T[];
     filteredItems: T[];
     loading: boolean;
+    loadingMore: boolean;
+    loadMore: () => void;
 };
+export declare function useDropdownItems<T>({ items, loadItems, localItems, debounceMs, minChars, getLabel, filter, query, isOpen, }: Args<T>): Result<T>;
 export {};

package/shared/dropdownField/useDropdownItems.js

@@ -7,6 +7,7 @@ export function useDropdownItems({
   loadItems,
   localItems,
   debounceMs = DEFAULT_DEBOUNCE_MS,
+  minChars,
   getLabel,
   filter,
   query,
@@ -15,12 +16,15 @@ export function useDropdownItems({
   const isAsync = !!loadItems;
   const {
     items: loadedItems,
-    loading
+    loading,
+    loadingMore,
+    loadMore
   } = useAsyncItems({
     loadItems,
     query,
     isOpen,
-    debounceMs
+    debounceMs,
+    minChars
   });
   const sourceItems = useMemo(() => isAsync ? loadedItems : [...(items ?? []), ...(localItems ?? [])], [isAsync, loadedItems, items, localItems]);
   const filteredItems = useMemo(() => {
@@ -31,6 +35,8 @@ export function useDropdownItems({
   return {
     sourceItems,
     filteredItems,
-    loading
+    loading,
+    loadingMore,
+    loadMore
   };
 }

package/shared/dropdownField/useListNavigation.d.ts

@@ -7,10 +7,11 @@ type Args = {
     setActiveIndex: Dispatch<SetStateAction<number>>;
     onSelectIndex: (index: number) => void;
     onEscape: () => void;
+    onReachEnd?: () => void;
     hasExtraRow?: boolean;
     onSelectExtra?: () => void;
     isQueryEmpty?: boolean;
     onBackspaceEmpty?: () => void;
 };
-export declare function useListNavigation({ isOpen, open, itemCount, activeIndex, setActiveIndex, onSelectIndex, onEscape, hasExtraRow, onSelectExtra, isQueryEmpty, onBackspaceEmpty, }: Args): (event: KeyboardEvent<HTMLInputElement>) => void;
+export declare function useListNavigation({ isOpen, open, itemCount, activeIndex, setActiveIndex, onSelectIndex, onEscape, onReachEnd, hasExtraRow, onSelectExtra, isQueryEmpty, onBackspaceEmpty, }: Args): (event: KeyboardEvent<HTMLInputElement>) => void;
 export {};

package/shared/dropdownField/useListNavigation.js

@@ -7,6 +7,7 @@ export function useListNavigation({
   setActiveIndex,
   onSelectIndex,
   onEscape,
+  onReachEnd,
   hasExtraRow,
   onSelectExtra,
   isQueryEmpty,
@@ -16,7 +17,15 @@ export function useListNavigation({
   return useCallback(event => {
     if (event.key === 'ArrowDown') {
       event.preventDefault();
-      if (!isOpen) open();else if (total > 0) setActiveIndex(prev => prev >= total - 1 ? 0 : prev + 1);
+      if (!isOpen) {
+        open();
+        return;
+      }
+      if (total > 0) {
+        const next = activeIndex >= total - 1 ? 0 : activeIndex + 1;
+        setActiveIndex(next);
+        if (next > 0 && next >= total - 1) onReachEnd === null || onReachEnd === void 0 || onReachEnd();
+      }
       return;
     }
     if (event.key === 'ArrowUp') {
@@ -41,5 +50,5 @@ export function useListNavigation({
     if (event.key === 'Backspace' && isQueryEmpty && onBackspaceEmpty) {
       onBackspaceEmpty();
     }
-  }, [isOpen, open, total, activeIndex, setActiveIndex, onSelectIndex, onSelectExtra, onEscape, hasExtraRow, isQueryEmpty, onBackspaceEmpty]);
+  }, [isOpen, open, total, activeIndex, setActiveIndex, onSelectIndex, onSelectExtra, onEscape, onReachEnd, hasExtraRow, isQueryEmpty, onBackspaceEmpty]);
 }