'use client'; import { Button } from '@/components/website/ui/button'; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from '@/components/website/ui/command'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/website/ui/popover'; import { cn } from '@/lib/utils'; import { CheckIcon, ChevronDown, XCircle, XIcon } from 'lucide-react'; import * as React from 'react'; /** * Props for MultiSelect component */ interface MultiSelectProps extends React.ButtonHTMLAttributes { /** * An array of option objects to be displayed in the multi-select component. * Each option object has a label, value, and an optional icon. */ options: { /** The text to display for the option. */ label: string; /** The unique value associated with the option. */ value: string; /** Optional icon component to display alongside the option. */ icon?: React.ComponentType<{ className?: string }>; disable?: boolean; }[]; /** * Callback function triggered when the selected values change. * Receives an array of the new selected values. */ onValueChange: (value: string[]) => void; /** The default selected values when the component mounts. */ defaultValue?: string[]; /** * Placeholder text to be displayed when no values are selected. * Optional, defaults to "Select options". */ placeholder?: string; /** * Animation duration in seconds for the visual effects (e.g., bouncing badges). * Optional, defaults to 0 (no animation). */ animation?: number; /** * Maximum number of items to display. Extra selected items will be summarized. * Optional, defaults to 3. */ maxCount?: number; /** * The modality of the popover. When set to true, interaction with outside elements * will be disabled and only popover content will be visible to screen readers. * Optional, defaults to false. */ modalPopover?: boolean; /** * If true, renders the multi-select component as a child of another component. * Optional, defaults to false. */ asChild?: boolean; /** * Additional class names to apply custom styles to the multi-select component. * Optional, can be used to add custom styles. */ className?: string; popoverClass?: string; showall?: boolean; } export const MultiSelect = React.forwardRef( ( { options, onValueChange, defaultValue = [], placeholder = 'Select options', animation = 0, maxCount = 3, modalPopover = false, asChild = false, className, popoverClass, showall = false, ...props }, ref ) => { const [selectedValues, setSelectedValues] = React.useState(defaultValue); const [isPopoverOpen, setIsPopoverOpen] = React.useState(false); const handleInputKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'Enter') { setIsPopoverOpen(true); } else if (event.key === 'Backspace' && !event.currentTarget.value) { const newSelectedValues = [...selectedValues]; newSelectedValues.pop(); setSelectedValues(newSelectedValues); onValueChange(newSelectedValues); } }; const toggleOption = (option: string) => { const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter((value) => value !== option) : [...selectedValues, option]; setSelectedValues(newSelectedValues); onValueChange(newSelectedValues); }; const handleClear = () => { setSelectedValues([]); onValueChange([]); }; const handleTogglePopover = () => { setIsPopoverOpen((prev) => !prev); }; const clearExtraOptions = () => { const newSelectedValues = selectedValues.slice(0, maxCount); setSelectedValues(newSelectedValues); onValueChange(newSelectedValues); }; const filteredOptions = options.filter((option) => !option.disable); const toggleAll = () => { if (selectedValues.length === filteredOptions.length) { handleClear(); } else { const allValues = filteredOptions.map((option) => option.value); setSelectedValues(allValues); onValueChange(allValues); } }; return ( setIsPopoverOpen(false)} > No results found.

(Select All) {options.map((option) => { const isSelected = selectedValues.includes(option.value); const isDisabled = option.disable; // Check if option is disabled return ( !isDisabled && toggleOption(option.value)} className={cn( 'cursor-pointer', isDisabled && 'opacity-50 cursor-not-allowed' // Disable styling )} >

{!isDisabled && }

{option.icon && ( )} {option.label} ); })}

{selectedValues.length > 0 && ( <> Clear )} setIsPopoverOpen(false)} className='flex-1 justify-center cursor-pointer max-w-full' > Close

); } ); MultiSelect.displayName = 'MultiSelect';