- { presets.map( ( preset, index ) => (
-
- ) ) }
+ { presets.map( ( preset, index ) => {
+ const isSelected =
+ selectedDates &&
+ 'from' in selectedDates &&
+ 'to' in selectedDates &&
+ selectedDates.from?.getTime() ===
+ preset.range.from.getTime() &&
+ selectedDates.to?.getTime() ===
+ preset.range.to.getTime();
+
+ return (
+
+ );
+ } ) }
Promise;
+ /** Delay in milliseconds for debounced search. If the searchFn is provided, the debounceDelay will be used to debounce the search. */
+ debounceDelay?: number;
};
export interface SelectPortalProps {
@@ -167,4 +171,6 @@ export type SelectContextValue = {
onChange: SelectOnChange;
value?: SelectOptionValue | SelectOptionValue[];
searchPlaceholder?: string;
+ searchFn?: ( keyword: string ) => Promise;
+ debounceDelay?: number;
};
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 87dec5d9..df913bd8 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -12,6 +12,7 @@ import {
useLayoutEffect,
Fragment,
type ReactNode,
+ memo,
} from 'react';
import { cn } from '@/utilities/functions';
import { CheckIcon, ChevronDown, ChevronsUpDown, Search } from 'lucide-react';
@@ -30,7 +31,7 @@ import {
autoUpdate,
FloatingPortal,
} from '@floating-ui/react';
-import Badge from '../badge';
+import { Badge, Loader } from '@/components';
import { nanoid } from 'nanoid';
import {
disabledClassNames,
@@ -53,6 +54,7 @@ import type {
SelectOptionGroupProps,
} from './select-types';
import { getTextContent } from './utils';
+import { useDebouncedCallback } from '@/utilities/hooks';
// Context to manage the state of the select component.
const SelectContext = createContext(
@@ -360,6 +362,8 @@ export function SelectOptions( {
by,
searchPlaceholder,
activeIndex,
+ searchFn,
+ debounceDelay,
} = useSelectContext();
const initialSelectedValueIndex = useMemo( () => {
@@ -446,7 +450,9 @@ export function SelectOptions( {
return false;
}
- if ( searchKeyword ) {
+ // Handle option groups when searchFn is not provided
+ // Search functionality will be handled outside of the select component
+ if ( searchKeyword && ! searchFn ) {
const textContent = getTextContent(
groupChild.props.children
)?.toLowerCase();
@@ -498,8 +504,8 @@ export function SelectOptions( {
return cloneElement( child, groupProps );
}
- // Handle regular options
- if ( searchKeyword ) {
+ // Handle regular options when searchFn is not provided
+ if ( searchKeyword && ! searchFn ) {
const textContent = getTextContent(
child.props?.children
)?.toLowerCase();
@@ -519,7 +525,7 @@ export function SelectOptions( {
};
return Children.map( children, processChild );
- }, [ searchKeyword, value, selected, children ] );
+ }, [ searchKeyword, value, selected, children, searchFn ] );
const childrenCount = Children.count( renderChildren );
// Update the content list reference.
@@ -548,7 +554,8 @@ export function SelectOptions( {
const textContent = getTextContent(
child.props?.children
)?.toLowerCase();
- if ( searchKeyword ) {
+ // Handle regular options when searchFn is not provided
+ if ( searchKeyword && ! searchFn ) {
const searchTerm = searchKeyword.toLowerCase();
const textMatch = textContent?.includes( searchTerm );
@@ -559,8 +566,38 @@ export function SelectOptions( {
listContentRef.current.push( textContent );
} );
+ }, [ searchKeyword, searchFn ] );
+
+ const [ searching, setSearching ] = useState( false );
+
+ // Create a function to handle the search function.
+ const handleSearchFn = useCallback( async () => {
+ if ( ! searchFn || typeof searchFn !== 'function' || searching ) {
+ return;
+ }
+
+ setSearching( true );
+ try {
+ await searchFn( searchKeyword );
+ } catch ( error ) {
+ // eslint-disable-next-line no-console
+ console.error( error );
+ } finally {
+ setSearching( false );
+ }
}, [ searchKeyword ] );
+ // Debounce the search function.
+ const initiateSearch = useDebouncedCallback( handleSearchFn, debounceDelay! );
+
+ // Initiate search when searchFn is a function.
+ useEffect( () => {
+ if ( typeof searchFn !== 'function' ) {
+ return;
+ }
+ initiateSearch();
+ }, [ initiateSearch ] );
+
return (
<>
{ /* Dropdown */ }
@@ -595,14 +632,24 @@ export function SelectOptions( {
.searchbarWrapper
) }
>
-
+ { searching ? (
+
+ ) : (
+
+ ) }
{
const selectId = useMemo( () => id || `select-${ nanoid() }`, [ id ] );
const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
@@ -961,6 +1010,8 @@ const Select = ( {
disabled,
isControlled,
searchPlaceholder,
+ searchFn,
+ debounceDelay,
} }
>
{ children }
@@ -968,16 +1019,20 @@ const Select = ( {
);
};
+SelectComponent.displayName = 'Select';
+
+const Select = Object.assign( memo( SelectComponent ), {
+ Portal: memo( SelectPortal ),
+ Button: memo( SelectButton ),
+ Options: memo( SelectOptions ),
+ Option: memo( SelectItem ),
+ OptionGroup: memo( SelectOptionGroup ),
+} );
+
SelectPortal.displayName = 'Select.Portal';
SelectButton.displayName = 'Select.Button';
SelectOptions.displayName = 'Select.Options';
SelectItem.displayName = 'Select.Option';
SelectOptionGroup.displayName = 'Select.OptionGroup';
-Select.Portal = SelectPortal;
-Select.Button = SelectButton;
-Select.Options = SelectOptions;
-Select.Option = SelectItem;
-Select.OptionGroup = SelectOptionGroup;
-
export default Select;
diff --git a/src/utilities/hooks.ts b/src/utilities/hooks.ts
new file mode 100644
index 00000000..ca34c65b
--- /dev/null
+++ b/src/utilities/hooks.ts
@@ -0,0 +1,48 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+type AsyncFunction = ( ...args: T ) => Promise;
+
+/**
+ * Debounce a value
+ * @param {any} value - The value to debounce
+ * @param {number} delay - The delay in milliseconds
+ * @return {any} The debounced value
+ */
+export const useDebounce = ( value: unknown, delay: number = 500 ) => {
+ const [ debouncedValue, setDebouncedValue ] = useState( value );
+
+ useEffect( () => {
+ const timeout = setTimeout( () => setDebouncedValue( value ), delay );
+
+ return () => clearTimeout( timeout );
+ }, [ value, delay ] );
+
+ return debouncedValue;
+};
+
+/**
+ * Debounce a callback function.
+ * @param {Function} func - The function to debounce
+ * @param {number} delay - The delay in milliseconds
+ * @return {Function} The debounced function
+ */
+export const useDebouncedCallback = (
+ func: AsyncFunction,
+ delay: number = 500
+) => {
+ const timeoutRef = useRef( null );
+
+ return useCallback(
+ ( ...args: unknown[] ) => {
+ if ( timeoutRef.current ) {
+ clearTimeout( timeoutRef.current );
+ }
+
+ timeoutRef.current = setTimeout(
+ () => func( ...( args as [unknown] ) ),
+ delay
+ );
+ },
+ [ func, delay ]
+ );
+};
diff --git a/version.json b/version.json
index c06da17c..47b1ee9d 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
{
- "force-ui": "1.4.0"
+ "force-ui": "1.4.1"
}