feat: multi select loading state

lib/components/MultiSelectDropdown/MultiSelectDropdown.stories.tsx

@@ -34,8 +34,6 @@ export const MultiSelectDropdown: Story = {
         value: 'prod',
       },
     ],
-    onBlur: () => console.log('blur'),
-    onChange: (args) => console.log('change', args),
   },
   render: (args) => (
     <div className="max-w-[300px] flex flex-col gap-3">

lib/components/MultiSelectDropdown/MultiSelectDropdown.tsx

@@ -10,7 +10,17 @@ export const MultiSelectDropdown: FC<MultiSelectDropdownProps> = forwardRef<
   MultiSelectDropdownProps
 >(
   (
-    { options, multiselect, value, onChange, onBlur, name, ...delegated },
+    {
+      options,
+      multiselect,
+      value,
+      onChange,
+      onBlur,
+      name,
+      isLoading,
+      noOptionsText,
+      ...delegated
+    },
     ref,
   ) => (
     <MultiSelectDropdownProvider
@@ -20,8 +30,12 @@ export const MultiSelectDropdown: FC<MultiSelectDropdownProps> = forwardRef<
       onChange={onChange}
       onBlur={onBlur}
       name={name}
+      isLoading={isLoading}
+      noOptionsText={noOptionsText}
     >
       <Wrapper ref={ref} {...delegated} name={name} />
     </MultiSelectDropdownProvider>
   ),
 );
+
+MultiSelectDropdown.displayName = 'MultiSelectDropdown';

lib/components/MultiSelectDropdown/MultiSelectDropdown.types.ts

@@ -8,7 +8,7 @@ import { multiSelectDropdownVariants } from './MultiSelectDropdown.variants';
 export type MultiSelectDropdownOption = {
   id: string | number;
   label: string;
-  tagLabel: string;
+  tagLabel?: string;
   tagColor?: TagProps['color'];
   value?: string;
 };
@@ -17,6 +17,11 @@ type OnChangeFn = (params: {
   target: { value: MultiSelectDropdownOption[]; name: string };
 }) => void;
 
+type OnBlurFn = (event: {
+  target: HTMLInputElement | null;
+  type?: string;
+}) => void;
+
 export interface MultiSelectDropdownProps
   extends
     VariantProps<typeof multiSelectDropdownVariants>,
@@ -33,5 +38,7 @@ export interface MultiSelectDropdownProps
   multiselect?: boolean;
   value?: MultiSelectDropdownOption[];
   onChange?: OnChangeFn;
-  onBlur?: VoidFunction;
+  onBlur?: OnBlurFn;
+  isLoading?: boolean;
+  noOptionsText?: string;
 }

lib/components/MultiSelectDropdown/components/Item/Item.tsx

@@ -8,25 +8,32 @@ import { ItemProps } from './Item.types';
 import { wrapperVariants } from './Item.variants';
 import { Tag, Typography } from '@/components';
 
-export const Item: FC<ItemProps> = ({ option, theme, isSelected }) => {
+export const Item: FC<ItemProps> = ({
+  option,
+  theme,
+  isSelected,
+  className,
+}) => {
   const { onSelectOption } = useMultiSelectDropdown();
 
   return (
     <li
       role="option"
       data-theme={theme}
-      className={cn(wrapperVariants({ isSelected }))}
+      className={cn(wrapperVariants({ isSelected }), className)}
       onClick={() => onSelectOption(option)}
     >
       <Typography variant="body2" className="text-slate-800">
         {option.label}
       </Typography>
-      <Tag
-        id={option.id}
-        label={option.tagLabel}
-        color={option.tagColor}
-        isSelected={isSelected}
-      />
+      {option.tagLabel && (
+        <Tag
+          id={option.id}
+          label={option.tagLabel}
+          color={option.tagColor}
+          isSelected={isSelected}
+        />
+      )}
     </li>
   );
 };

lib/components/MultiSelectDropdown/components/Item/Item.types.ts

@@ -6,4 +6,5 @@ export type ItemProps = {
   option: MultiSelectDropdownOption;
   theme?: Theme;
   isSelected?: boolean;
+  className?: string;
 };

lib/components/MultiSelectDropdown/components/List/List.tsx

@@ -1,20 +1,28 @@
 import { FC } from 'react';
 
 import { cn } from '@/utils';
+import { Typography } from '@/components';
 
 import { Item } from '../Item/Item';
 import { useMultiSelectDropdown } from '../../contexts';
 
 import { ListProps } from './List.types';
 import { wrapperVariants } from './List.variants';
-import { Typography } from '@/components';
 
 export const List: FC<ListProps> = ({ theme }) => {
-  const { options, selectedOptions } = useMultiSelectDropdown();
+  const { options, selectedOptions, isLoading, noOptionsText } =
+    useMultiSelectDropdown();
 
   return (
     <ul role="listbox" data-theme={theme} className={cn(wrapperVariants())}>
-      {options.length > 0 ? (
+      {isLoading ? (
+        <Item
+          key="loading"
+          option={{ id: 'loading', label: 'Loading...' }}
+          className="select-none pointer-events-none"
+          isSelected={false}
+        />
+      ) : options.length > 0 ? (
         options.map((option) => (
           <Item
             key={option.id}
@@ -25,12 +33,14 @@ export const List: FC<ListProps> = ({ theme }) => {
           />
         ))
       ) : (
-        <Typography
-          variant="body2"
-          className="text-zinc-800 dark:text-slate-50 italic px-2 py-2"
-        >
-          No options
-        </Typography>
+        <li className="select-none">
+          <Typography
+            variant="body2"
+            className="text-zinc-800 dark:text-slate-50 italic px-2 py-2"
+          >
+            {noOptionsText ?? 'No options'}
+          </Typography>
+        </li>
       )}
     </ul>
   );

lib/components/MultiSelectDropdown/components/Wrapper/Wrapper.tsx

@@ -1,7 +1,8 @@
 import { FC, forwardRef, useId, useImperativeHandle } from 'react';
 import { ChevronUp } from 'react-feather';
 
-import { Tag } from '@/components/Tag/Tag';
+import { Tag } from '@/components';
+import Loader from '@/assets/icons/loader.svg';
 import { cn } from '@/utils';
 
 import { useMultiSelectDropdown as useMultiSelectDropdownContext } from '../../contexts';
@@ -25,8 +26,14 @@ export const Wrapper: FC<WrapperProps> = forwardRef<
     ref,
   ) => {
     const id = useId();
-    const { selectedOptions, isOpen, onOpen, onRemoveOption, inputRef } =
-      useMultiSelectDropdownContext();
+    const {
+      selectedOptions,
+      isOpen,
+      onOpen,
+      onRemoveOption,
+      inputRef,
+      isLoading,
+    } = useMultiSelectDropdownContext();
     const { wrapperRef, handleOpen } = useMultiSelectDropdown();
 
     useImperativeHandle(ref, () => inputRef!.current!, [inputRef]);
@@ -72,7 +79,7 @@ export const Wrapper: FC<WrapperProps> = forwardRef<
                 <Tag
                   key={option.id}
                   id={option.id}
-                  label={option.tagLabel}
+                  label={option.tagLabel || option.label || ''}
                   color={option.tagColor || 'gray-800'}
                   className="select-none gap-2"
                   rightIcon={
@@ -87,12 +94,16 @@ export const Wrapper: FC<WrapperProps> = forwardRef<
             </div>
           )}
 
-          <ChevronUp
-            className={cn(
-              'w-4 h-4 text-inherit transition-all duration-50 shrink-0',
-              isOpen ? 'rotate-0' : 'rotate-180',
-            )}
-          />
+          {isLoading ? (
+            <Loader className="w-4 h-4 text-slate-400 animate-spin shrink-0" />
+          ) : (
+            <ChevronUp
+              className={cn(
+                'w-4 h-4 text-inherit transition-all duration-50 shrink-0',
+                isOpen ? 'rotate-0' : 'rotate-180',
+              )}
+            />
+          )}
         </div>
 
         <input
@@ -108,3 +119,5 @@ export const Wrapper: FC<WrapperProps> = forwardRef<
     );
   },
 );
+
+Wrapper.displayName = 'MultiSelectDropdownWrapper';

lib/components/MultiSelectDropdown/contexts/MultiSelectDropdown.context.ts

@@ -16,6 +16,8 @@ const initialState: State = {
   onOpen() {
     throw new Error('Function not implemented.');
   },
+  isLoading: false,
+  noOptionsText: undefined,
 };
 
 export const MultiSelectDropdownContext = createContext<State>(initialState);

lib/components/MultiSelectDropdown/contexts/MultiSelectDropdown.provider.tsx

@@ -23,6 +23,8 @@ export const MultiSelectDropdownProvider: FC<
   onChange,
   onBlur,
   name,
+  isLoading,
+  noOptionsText,
 }) => {
   const inputRef = useRef<ComponentRef<'input'>>(null);
   const [isOpen, setIsOpen] = useToggle(false);
@@ -33,7 +35,24 @@ export const MultiSelectDropdownProvider: FC<
   >([]);
   const isControlled = value !== undefined;
 
-  // Sync value prop to selected options
+  // Sync defaultOptions to options state (for uncontrolled mode)
+  useEffect(() => {
+    if (!isControlled) {
+      const selectedIdsSet = new Set(
+        selectedOptions.map((option) => option.id),
+      );
+      setOptions(
+        multiselect
+          ? defaultOptions.filter((option) => !selectedIdsSet.has(option.id))
+          : defaultOptions.map((option) => ({
+              ...option,
+              isSelected: selectedIdsSet.has(option.id),
+            })),
+      );
+    }
+  }, [defaultOptions, multiselect, isControlled, selectedOptions]);
+
+  // Sync value prop to selected options (for controlled mode)
   useEffect(() => {
     if (isControlled) {
       const selected = value || [];
@@ -83,11 +102,14 @@ export const MultiSelectDropdownProvider: FC<
       setIsOpen(value);
 
       // Call onBlur when closing the dropdown
-      if (wasOpen && value === false && onBlur) {
-        onBlur();
+      if (wasOpen && value === false && onBlur && inputRef.current) {
+        onBlur({
+          target: inputRef.current,
+          type: 'blur',
+        });
       }
     },
-    [isOpen, setIsOpen, onBlur],
+    [isOpen, setIsOpen, onBlur, inputRef],
   );
 
   const handleSelectOption = useCallback(
@@ -179,6 +201,8 @@ export const MultiSelectDropdownProvider: FC<
         onSelectOption: handleSelectOption,
         onRemoveOption: handleRemoveOption,
         onOpen: handleOpen,
+        isLoading,
+        noOptionsText,
       }}
     >
       {children}

lib/components/MultiSelectDropdown/contexts/MultiSelectDropdown.types.ts

@@ -10,6 +10,8 @@ export type State = {
   onSelectOption: (option: MultiSelectDropdownOption) => void;
   onRemoveOption: (option: MultiSelectDropdownOption) => void;
   onOpen: (value?: boolean) => void;
+  isLoading?: boolean;
+  noOptionsText?: string;
 };
 
 export type MultiSelectDropdownProviderProps = PropsWithChildren & {
@@ -19,6 +21,8 @@ export type MultiSelectDropdownProviderProps = PropsWithChildren & {
   onChange?: (params: {
     target: { value: MultiSelectDropdownOption[]; name: string };
   }) => void;
-  onBlur?: VoidFunction;
+  onBlur?: (event: { target: HTMLInputElement | null; type?: string }) => void;
   name?: string;
+  isLoading?: boolean;
+  noOptionsText?: string;
 };