@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

package/src/components/Input/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,456 @@
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import axios, { AxiosInstance } from 'axios';
+import { ReactNode, SyntheticEvent, useEffect, useReducer } from 'react';
+import { MultiSelectFilter } from './components/MultiSelectFilter';
+import { MultiSelectInput } from './components/MultiSelectInput';
+import {
+  MultiSelectActionsTypes,
+  multiSelectReducer,
+  MultiSelectState,
+} from './multiSelectReducer';
+import { generateOptionsMap, generateSelectedOptionsMap, sleep } from './utils';
+
+export type MultiSelectProps = {
+  options?:
+    | { label: string; subLabel?: string; value: any; icon?: ReactNode }[]
+    | any[];
+  optionsApiEndPoint?: string;
+  optionsApiEndpointParams?: any;
+  externalAxios?: AxiosInstance;
+  required?: boolean;
+  label?: string;
+  name?: string;
+  getValue?: (option: any) => any;
+  value?: any[];
+  dbValueProps?: {
+    valueKey: string;
+    isObjectId?: boolean;
+    isInt?: boolean;
+    isFloat?: boolean;
+  };
+  dbLabelProps?: {
+    labelKey: string;
+    subLabelKey?: string;
+    useLabelStartCase?: boolean;
+    useSubLabelStartCase?: boolean;
+  };
+  onChange?: (values: any[]) => void;
+  onOpen?: (event: SyntheticEvent) => void;
+  onClose?: (event: SyntheticEvent, reason: string) => void;
+  error?: any;
+  helperText?: string;
+  type?: 'input' | 'filter';
+  disableClear?: boolean;
+  fullWidth?: boolean;
+};
+
+export const MultiSelect = ({
+  options,
+  optionsApiEndPoint,
+  optionsApiEndpointParams,
+  externalAxios,
+  getValue,
+  value = [],
+  onChange,
+  dbValueProps = {
+    valueKey: 'id',
+    isObjectId: false,
+    isInt: false,
+    isFloat: false,
+  },
+  dbLabelProps = {
+    labelKey: '',
+    useLabelStartCase: false,
+    useSubLabelStartCase: false,
+  },
+  onOpen,
+  onClose,
+  type = 'input',
+  ...restProps
+}: MultiSelectProps) => {
+  const initialState: MultiSelectState = {
+    open: false,
+    loadingInternalOptions: false,
+    loadingInitialInternalOptions: false,
+    internalOptions: options ?? [],
+    internalOptionsMap: generateOptionsMap(options ?? [], getValue),
+    selectedValues: value,
+    selectedOptionsMap: generateSelectedOptionsMap(
+      options ?? [],
+      value,
+      getValue,
+    ),
+    limit: 10,
+    offset: 0,
+    hasMore: true,
+    search: null,
+  };
+
+  const [state, dispatch] = useReducer(multiSelectReducer, initialState);
+  const { internalOptions, limit, offset, hasMore, search, selectedValues } =
+    state;
+
+  const internalAxios = externalAxios || axios;
+
+  const handleOpen = async (event: SyntheticEvent) => {
+    dispatch({
+      actionType: MultiSelectActionsTypes.OPEN,
+    });
+    if (optionsApiEndPoint && internalOptions.length <= selectedValues.length) {
+      try {
+        dispatch({
+          actionType: MultiSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
+        });
+        const options = await internalAxios
+          .get(optionsApiEndPoint, {
+            params: {
+              limit,
+              offset,
+              dbValueProps: {
+                valueKey: dbValueProps.valueKey,
+                ...(dbValueProps.isObjectId && { isObjectId: true }),
+                ...(dbValueProps.isInt && { isInt: true }),
+                ...(dbValueProps.isFloat && { isFloat: true }),
+                selectedValueData: selectedValues,
+              },
+              dbLabelProps,
+              ...optionsApiEndpointParams,
+            },
+          })
+          .then((res) => res.data);
+        await sleep(700);
+
+        if (internalOptions.length) {
+          dispatch({
+            actionType: MultiSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
+            stateChanges: {
+              newOptions: options,
+              internalOptionsMap: generateOptionsMap(options, getValue),
+              persistOffset: true,
+            },
+          });
+        } else {
+          dispatch({
+            actionType: MultiSelectActionsTypes.SET_INTERNAL_OPTIONS,
+            stateChanges: {
+              internalOptions: options,
+              internalOptionsMap: generateOptionsMap(options, getValue),
+            },
+          });
+        }
+      } catch (e) {
+        dispatch({
+          actionType: MultiSelectActionsTypes.SET_NETWORK_ERROR,
+          stateChanges: {
+            error: e,
+          },
+        });
+        dispatch({
+          actionType: MultiSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END,
+        });
+      }
+    }
+    if (onOpen) {
+      onOpen(event);
+    }
+  };
+
+  const handleClose = (event: SyntheticEvent, reason: string) => {
+    dispatch({
+      actionType: MultiSelectActionsTypes.CLOSE,
+    });
+    if (optionsApiEndPoint && reason !== 'selectOption') {
+      dispatch({
+        actionType: MultiSelectActionsTypes.CLEAR_SEARCH,
+        stateChanges: {
+          internalOptions: internalOptions.filter((o: any) =>
+            selectedValues.includes(o.value),
+          ),
+          internalOptionsMap: generateOptionsMap(
+            internalOptions.filter((o: any) =>
+              selectedValues.includes(o.value),
+            ),
+            getValue,
+          ),
+        },
+      });
+    }
+    if (onClose) {
+      onClose(event, reason);
+    }
+  };
+
+  const handleScroll = async (event: any) => {
+    const listboxNode = event.currentTarget;
+    if (
+      listboxNode.scrollTop + listboxNode.clientHeight >=
+        listboxNode.scrollHeight - 1 &&
+      hasMore &&
+      optionsApiEndPoint
+    ) {
+      dispatch({
+        actionType: MultiSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
+      });
+      const newOptions = await internalAxios
+        .get(optionsApiEndPoint, {
+          params: {
+            limit: limit,
+            offset: offset + 10,
+            dbValueProps: {
+              valueKey: dbValueProps.valueKey,
+              ...(dbValueProps.isObjectId && { isObjectId: true }),
+              ...(dbValueProps.isInt && { isInt: true }),
+              ...(dbValueProps.isFloat && { isFloat: true }),
+              selectedValueData: selectedValues,
+            },
+            dbLabelProps: {
+              search: search,
+              ...dbLabelProps,
+            },
+            ...optionsApiEndpointParams,
+          },
+        })
+        .then((res) => res.data);
+      if (newOptions.length < 10) {
+        dispatch({
+          actionType: MultiSelectActionsTypes.CHANGE_HAS_MORE_FLAG,
+        });
+      }
+      await sleep(700);
+      dispatch({
+        actionType: MultiSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
+        stateChanges: {
+          newOptions: newOptions,
+          internalOptionsMap: generateOptionsMap(newOptions, getValue),
+        },
+      });
+    }
+  };
+
+  const searchDb = async (searchValue: string) => {
+    dispatch({
+      actionType: MultiSelectActionsTypes.SET_SEARCH,
+      stateChanges: {
+        search: searchValue,
+      },
+    });
+    if (!searchValue || searchValue.trim() === '') {
+      dispatch({
+        actionType: MultiSelectActionsTypes.CLEAR_SEARCH,
+        stateChanges: {
+          internalOptions: internalOptions.filter((o: any) =>
+            selectedValues.includes(o.value),
+          ),
+          internalOptionsMap: generateOptionsMap(
+            internalOptions.filter((o: any) =>
+              selectedValues.includes(o.value),
+            ),
+            getValue,
+          ),
+        },
+      });
+    }
+    if (optionsApiEndPoint) {
+      try {
+        dispatch({
+          actionType: MultiSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
+        });
+        const options = await internalAxios
+          .get(optionsApiEndPoint, {
+            params: {
+              limit,
+              offset: 0,
+              dbValueProps: {
+                valueKey: dbValueProps.valueKey,
+                ...(dbValueProps.isObjectId && { isObjectId: true }),
+                ...(dbValueProps.isInt && { isInt: true }),
+                ...(dbValueProps.isFloat && { isFloat: true }),
+                selectedValueData: selectedValues,
+              },
+              dbLabelProps: {
+                search: searchValue,
+                ...dbLabelProps,
+              },
+              ...optionsApiEndpointParams,
+            },
+          })
+          .then((res) => res.data);
+        await sleep(700);
+
+        dispatch({
+          actionType: MultiSelectActionsTypes.SET_INTERNAL_OPTIONS,
+          stateChanges: {
+            internalOptions: [
+              ...options,
+              ...internalOptions.filter((o: any) =>
+                selectedValues.includes(o.value),
+              ),
+            ],
+            internalOptionsMap: generateOptionsMap(
+              [
+                ...options,
+                ...internalOptions.filter((o: any) =>
+                  selectedValues.includes(o.value),
+                ),
+              ],
+              getValue,
+            ),
+          },
+        });
+      } catch (e) {
+        dispatch({
+          actionType: MultiSelectActionsTypes.SET_NETWORK_ERROR,
+          stateChanges: {
+            error: e,
+          },
+        });
+        dispatch({
+          actionType: MultiSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END,
+        });
+      }
+    }
+  };
+
+  const handleSelectOption = (option: any) => {
+    const optionValue = getValue ? getValue(option) : option.value;
+    const isSelected = selectedValues.includes(optionValue);
+
+    if (isSelected) {
+      const newSelectedValues = selectedValues.filter((v) => v !== optionValue);
+      dispatch({
+        actionType: MultiSelectActionsTypes.DESELECT_OPTION,
+        stateChanges: {
+          value: optionValue,
+          selectedOptionsMap: generateSelectedOptionsMap(
+            internalOptions,
+            newSelectedValues,
+            getValue,
+          ),
+        },
+      });
+      if (onChange) {
+        onChange(newSelectedValues);
+      }
+    } else {
+      const newSelectedValues = [...selectedValues, optionValue];
+      dispatch({
+        actionType: MultiSelectActionsTypes.SELECT_OPTION,
+        stateChanges: {
+          value: optionValue,
+          selectedOptionsMap: generateSelectedOptionsMap(
+            internalOptions,
+            newSelectedValues,
+            getValue,
+          ),
+        },
+      });
+      if (onChange) {
+        onChange(newSelectedValues);
+      }
+    }
+  };
+
+  const handleClearAll = () => {
+    dispatch({
+      actionType: MultiSelectActionsTypes.CLEAR_ALL_SELECTIONS,
+    });
+    if (onChange) {
+      onChange([]);
+    }
+  };
+
+  const loadSelectedOptions = async () => {
+    dispatch({
+      actionType: MultiSelectActionsTypes.LOAD_SELECTED_OPTIONS_START,
+    });
+    try {
+      const res = await internalAxios.get(optionsApiEndPoint ?? '', {
+        params: {
+          limit,
+          offset,
+          dbValueProps: {
+            valueKey: dbValueProps.valueKey,
+            ...(dbValueProps.isObjectId && { isObjectId: true }),
+            ...(dbValueProps.isInt && { isInt: true }),
+            ...(dbValueProps.isFloat && { isFloat: true }),
+            selectedValueData: value,
+            filterBySelectedValues: true,
+          },
+          dbLabelProps,
+          ...optionsApiEndpointParams,
+        },
+      });
+      dispatch({
+        actionType: MultiSelectActionsTypes.SET_INTERNAL_OPTIONS,
+        stateChanges: {
+          internalOptions: res.data,
+          internalOptionsMap: generateOptionsMap(res.data, getValue),
+          selectedOptionsMap: generateSelectedOptionsMap(
+            res.data,
+            value,
+            getValue,
+          ),
+        },
+      });
+      await sleep(1000);
+    } catch (e) {
+      dispatch({
+        actionType: MultiSelectActionsTypes.SET_NETWORK_ERROR,
+        stateChanges: { error: e },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (value && value.length > 0 && optionsApiEndPoint) {
+      loadSelectedOptions().finally(() => {
+        dispatch({
+          actionType: MultiSelectActionsTypes.LOAD_SELECTED_OPTIONS_END,
+        });
+      });
+    }
+  }, []);
+
+  if (!onChange) {
+    return <Typography>onChange Missing</Typography>;
+  }
+
+  if (type === 'filter')
+    return (
+      <MultiSelectFilter
+        onChange={onChange}
+        searchDb={searchDb}
+        handleOpen={handleOpen}
+        handleClose={handleClose}
+        handleScroll={handleScroll}
+        handleSelectOption={handleSelectOption}
+        handleClearAll={handleClearAll}
+        state={state}
+        optionsApiEndPoint={optionsApiEndPoint}
+        getValue={getValue}
+        value={value}
+        dbLabelProps={dbLabelProps}
+        {...restProps}
+      />
+    );
+
+  return (
+    <MultiSelectInput
+      onChange={onChange}
+      searchDb={searchDb}
+      handleOpen={handleOpen}
+      handleClose={handleClose}
+      handleScroll={handleScroll}
+      handleSelectOption={handleSelectOption}
+      handleClearAll={handleClearAll}
+      state={state}
+      optionsApiEndPoint={optionsApiEndPoint}
+      getValue={getValue}
+      value={value}
+      dbLabelProps={dbLabelProps}
+      {...restProps}
+    />
+  );
+};
+
+export default MultiSelect;

package/src/components/Input/MultiSelect/components/MenuFooter.tsx

@@ -0,0 +1,11 @@
+import { Button } from '../../Button/Button';
+
+export const MenuFooter = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <div className="flex flex-row items-center justify-left border-t">
+      <Button variant="link" onClick={onClick} className="min-w-0">
+        Clear All
+      </Button>
+    </div>
+  );
+};

package/src/components/Input/MultiSelect/components/MultiSelectFilter.tsx

@@ -0,0 +1,185 @@
+import { cn } from '@/lib/utils';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/shadcn-components/Input/Command/Command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
+import { Check, ChevronDown } from 'lucide-react';
+import { SyntheticEvent, useEffect, useRef, useState } from 'react';
+import { Typography } from '../../../DataDisplay/Typography/Typography';
+import { Button } from '../../Button/Button';
+import { MultiSelectProps } from '../MultiSelect';
+import { MultiSelectState } from '../multiSelectReducer';
+import { MenuFooter } from './MenuFooter';
+import { OptionsLoader } from './OptionsLoader';
+
+export type MultiSelectFilterProps = {
+  onChange: (values: any[]) => void;
+  searchDb: (searchValue: string) => Promise<void>;
+  handleOpen: (event: SyntheticEvent) => Promise<void>;
+  handleClose: (event: SyntheticEvent, reason: string) => void;
+  handleScroll: (event: any) => Promise<void>;
+  handleSelectOption: (option: any) => void;
+  handleClearAll: () => void;
+  state: MultiSelectState;
+} & MultiSelectProps;
+
+export const MultiSelectFilter = ({
+  optionsApiEndPoint,
+  label,
+  name,
+  value = [],
+  onChange,
+  searchDb,
+  handleOpen,
+  handleClose,
+  handleScroll,
+  handleSelectOption,
+  handleClearAll,
+  state,
+  disableClear = false,
+}: MultiSelectFilterProps) => {
+  const {
+    open,
+    loadingInitialInternalOptions,
+    internalOptions,
+    internalOptionsMap,
+    loadingInternalOptions,
+    search,
+    selectedValues,
+  } = state;
+
+  const [localSearch, setLocalSearch] = useState(search || '');
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  // Force re-render on mount to ensure positioning works
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
+  const handleSearchChange = (searchValue: string) => {
+    setLocalSearch(searchValue);
+    if (optionsApiEndPoint) {
+      searchDb(searchValue);
+    }
+  };
+
+  const hasSelectedValues = selectedValues.length > 0;
+
+  // Get selected options
+  const selectedOptions = selectedValues
+    .map((val) => internalOptionsMap[val])
+    .filter(Boolean);
+
+  const filteredOptions = optionsApiEndPoint
+    ? internalOptions
+    : internalOptions?.filter(
+        (option) =>
+          !localSearch ||
+          option.label.toLowerCase().includes(localSearch.toLowerCase()),
+      );
+
+  // Simple display: show first value and "+n more"
+  const firstOption = selectedOptions[0];
+  const remainingCount = selectedOptions.length - 1;
+
+  const displayText =
+    selectedOptions.length === 0
+      ? label
+      : remainingCount > 0
+      ? `${label} = ${firstOption.label}, +${remainingCount} more`
+      : `${label} = ${firstOption.label}`;
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(isOpen) => {
+        const syntheticEvent = {
+          currentTarget: {},
+          target: {},
+        } as SyntheticEvent;
+
+        if (isOpen) {
+          handleOpen(syntheticEvent);
+        } else {
+          handleClose(syntheticEvent, 'blur');
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <span
+          ref={wrapperRef}
+          style={{ display: 'inline-block', width: '100%' }}
+        >
+          <Button
+            variant={hasSelectedValues ? 'default' : 'input'}
+            role="combobox"
+            aria-expanded={open}
+            className="justify-between w-full"
+            disabled={loadingInitialInternalOptions}
+          >
+            {displayText || label}
+            <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </span>
+      </PopoverTrigger>
+      <PopoverContent className="w-[250px] p-0" align="start">
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder="Search..."
+            value={localSearch}
+            onValueChange={handleSearchChange}
+          />
+          <CommandList onScroll={handleScroll} className="max-h-[310px]">
+            <CommandEmpty>No options found</CommandEmpty>
+            <CommandGroup>
+              {filteredOptions?.map((option, index) => {
+                const isSelected = selectedValues.includes(option.value);
+                return (
+                  <CommandItem
+                    key={option.value ?? index}
+                    value={option.value}
+                    onSelect={() => {
+                      handleSelectOption(option);
+                      onChange([...value, option.value]);
+                    }}
+                  >
+                    <div className="flex flex-col flex-1">
+                      <Typography variant="small">{option.label}</Typography>
+                      {option.subLabel && (
+                        <Typography variant="muted" className="text-xs">
+                          {option.subLabel}
+                        </Typography>
+                      )}
+                    </div>
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4 shrink-0',
+                        isSelected ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+          {loadingInternalOptions ? (
+            <OptionsLoader isSearch={!!search} />
+          ) : (
+            !disableClear &&
+            selectedValues.length > 0 && <MenuFooter onClick={handleClearAll} />
+          )}
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};