diff --git a/src/components/Form/FormFields/SelectFormField.tsx b/src/components/Form/FormFields/SelectFormField.tsx index aa712dc16a1..6b95550299f 100644 --- a/src/components/Form/FormFields/SelectFormField.tsx +++ b/src/components/Form/FormFields/SelectFormField.tsx @@ -3,7 +3,6 @@ import { FormFieldBaseProps, useFormFieldPropsResolver, } from "@/components/Form/FormFields/Utils"; -import MultiSelectMenuV2 from "@/components/Form/MultiSelectMenuV2"; import SelectMenuV2 from "@/components/Form/SelectMenuV2"; type OptionCallback = (option: T) => R; @@ -49,41 +48,3 @@ export const SelectFormField = (props: SelectFormFieldProps) => { ); }; - -type MultiSelectFormFieldProps = FormFieldBaseProps & { - placeholder?: React.ReactNode; - options: readonly T[]; - optionLabel: OptionCallback; - optionSelectedLabel?: OptionCallback; - optionDescription?: OptionCallback; - optionIcon?: OptionCallback; - optionValue?: OptionCallback; - optionDisabled?: OptionCallback; -}; - -/** - * @deprecated - */ -export const MultiSelectFormField = ( - props: MultiSelectFormFieldProps, -) => { - const field = useFormFieldPropsResolver(props); - return ( - - field.handleChange(value)} - options={props.options} - placeholder={props.placeholder} - optionLabel={props.optionLabel} - optionSelectedLabel={props.optionSelectedLabel} - optionDescription={props.optionDescription} - optionIcon={props.optionIcon} - optionDisabled={props.optionDisabled} - optionValue={props.optionValue} - /> - - ); -}; diff --git a/src/components/Form/MultiSelectMenuV2.tsx b/src/components/Form/MultiSelectMenuV2.tsx index 302b4132230..b67da3656f4 100644 --- a/src/components/Form/MultiSelectMenuV2.tsx +++ b/src/components/Form/MultiSelectMenuV2.tsx @@ -1,195 +1,9 @@ -import { - Label, - Listbox, - ListboxButton, - ListboxOption, - ListboxOptions, -} from "@headlessui/react"; -import { ReactNode, useRef } from "react"; +import { ReactNode } from "react"; import CareIcon from "@/CAREUI/icons/CareIcon"; import { classNames } from "@/Utils/utils"; -type OptionCallback = (option: T) => R; - -type Props = { - id?: string; - options: readonly T[]; - value: V[] | undefined; - placeholder?: ReactNode; - optionLabel: OptionCallback; - optionSelectedLabel?: OptionCallback; - optionDescription?: OptionCallback; - optionIcon?: OptionCallback; - optionValue?: OptionCallback; - optionDisabled?: OptionCallback; - className?: string; - disabled?: boolean; - renderSelectedOptions?: OptionCallback; - onChange: OptionCallback; -}; - -/** - * Avoid using this component directly. Use `MultiSelectFormField` instead as - * its API is easier to use and compliant with `FormField` based components. - * - * Use this only when you want to hack into the design and get more - * customizability. - */ -const MultiSelectMenuV2 = (props: Props) => { - const options = props.options.map((option) => { - const label = props.optionLabel(option); - const selectedLabel = props.optionSelectedLabel - ? props.optionSelectedLabel(option) - : label; - - const value = props.optionValue ? props.optionValue(option) : option; - - return { - option, - label, - selectedLabel, - description: props.optionDescription?.(option), - icon: props.optionIcon?.(option), - value, - disabled: props.optionDisabled?.(option), - isSelected: props.value?.includes(value as any) ?? false, - displayChip: ( -
- {selectedLabel} -
- ), - }; - }); - - const placeholder = props.placeholder ?? "Select"; - const selectedOptions = options.filter((o) => o.isSelected); - - const Placeholder: () => any = () => { - if (selectedOptions.length === 0) return placeholder; - if (props.renderSelectedOptions) - return props.renderSelectedOptions(selectedOptions.map((o) => o.option)); - }; - - const buttonRef = useRef(null); - - const handleSingleSelect = (o: any) => { - if ( - o.option?.isSingleSelect === true && - !selectedOptions.includes(o) && - buttonRef.current - ) { - buttonRef.current.click(); - } - }; - - return ( -
- - props.onChange(opts.map((o) => o.value) as any) - } - multiple - > - <> - -
-
- -
-
-

- -

- - {selectedOptions.length !== 0 && ( -
- {selectedOptions.map((option, index) => ( - { - const updatedOptions = selectedOptions.filter( - (selectedOption) => - selectedOption.value !== option.value, - ); - props.onChange( - updatedOptions.map((o) => o.value) as any, - ); - }} - /> - ))} -
- )} -
- -
-
-
- - {options.map((option, index) => ( - handleSingleSelect(option)} - disabled={option.disabled} - > - {({ focus }) => ( -
-
- {option.label} - {(option.icon || option.isSelected) && - (option.isSelected ? ( - - ) : ( - option.icon - ))} -
- {option.description && ( -

- {option.description} -

- )} -
- )} -
- ))} -
-
- -
-
- ); -}; - -export default MultiSelectMenuV2; - interface MultiSelectOptionChipProps { label: ReactNode; onRemove?: () => void;