Feat: Created shadcn MultiSelectOption comp

public/locale/en.json

@@ -1873,6 +1873,7 @@
   "select_eligible_policy": "Select an Eligible Insurance Policy",
   "select_facility": "Select Facility",
   "select_facility_description": "Select the healthcare facility that will provide the requested resource.",
+  "select_facility_feature": "Select Facility Features",
   "select_facility_for_discharged_patients_warning": "Facility needs to be selected to view discharged patients.",
   "select_facility_type": "Select Facility Type",
   "select_for_administration": "Select for Administration",

src/components/Facility/FacilityForm.tsx

@@ -19,6 +19,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { MultiSelect } from "@/components/ui/multi-select";
 import {
   Select,
   SelectContent,
@@ -29,7 +30,6 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 
 import { FacilityModel } from "@/components/Facility/models";
-import { MultiSelectFormField } from "@/components/Form/FormFields/SelectFormField";
 
 import { useStateAndDistrictFromPincode } from "@/hooks/useStateAndDistrictFromPincode";
 
@@ -112,7 +112,6 @@ export default function FacilityForm(props: FacilityProps) {
       onSubmitSuccess?.();
     },
   });
-
   const { mutate: updateFacility, isPending: isUpdatePending } = useMutation({
     mutationFn: mutate(routes.updateFacility, {
       pathParams: { id: facilityId || "" },
@@ -148,8 +147,8 @@ export default function FacilityForm(props: FacilityProps) {
     }
   };
 
-  const handleFeatureChange = (value: any) => {
-    const { value: features }: { value: Array<number> } = value;
+  const handleFeatureChange = (value: string[]) => {
+    const features = value.map((val) => Number(val));
     form.setValue("features", features);
   };
 
@@ -273,7 +272,6 @@ export default function FacilityForm(props: FacilityProps) {
               )}
             />
           </div>
-
           <FormField
             control={form.control}
             name="description"
@@ -291,29 +289,30 @@ export default function FacilityForm(props: FacilityProps) {
               </FormItem>
             )}
           />
-
           <FormField
             control={form.control}
             name="features"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Features</FormLabel>
-                <FormControl>
-                  <MultiSelectFormField
-                    name={field.name}
-                    value={field.value}
-                    placeholder="Select facility features"
-                    options={FACILITY_FEATURE_TYPES}
-                    optionLabel={(o) => o.name}
-                    optionValue={(o) => o.id}
-                    onChange={handleFeatureChange}
-                    error={form.formState.errors.features?.message}
-                    id="facility-features"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
+            render={({ field }) => {
+              return (
+                <FormItem>
+                  <FormLabel>{t("features")}</FormLabel>
+                  <FormControl>
+                    <MultiSelect
+                      options={FACILITY_FEATURE_TYPES.map((obj) => ({
+                        value: obj.id.toString(),
+                        label: obj.name,
+                        icon: obj.icon,
+                      }))}
+                      onValueChange={handleFeatureChange}
+                      value={field.value.map((val) => val.toString())}
+                      placeholder={t("select_facility_feature")}
+                      id="facility-features"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
           />
         </div>
 
@@ -519,6 +518,7 @@ export default function FacilityForm(props: FacilityProps) {
         <Button
           type="submit"
           className="w-full"
+          variant="primary"
           disabled={facilityId ? isUpdatePending : isPending}
           data-cy={facilityId ? "update-facility" : "submit-facility"}
         >

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<T, R> = (option: T) => R;
@@ -49,41 +48,3 @@ export const SelectFormField = <T, V>(props: SelectFormFieldProps<T, V>) => {
     </FormField>
   );
 };
-
-type MultiSelectFormFieldProps<T, V = T> = FormFieldBaseProps<V[]> & {
-  placeholder?: React.ReactNode;
-  options: readonly T[];
-  optionLabel: OptionCallback<T, React.ReactNode>;
-  optionSelectedLabel?: OptionCallback<T, React.ReactNode>;
-  optionDescription?: OptionCallback<T, React.ReactNode>;
-  optionIcon?: OptionCallback<T, React.ReactNode>;
-  optionValue?: OptionCallback<T, V>;
-  optionDisabled?: OptionCallback<T, boolean>;
-};
-
-/**
- * @deprecated
- */
-export const MultiSelectFormField = <T, V>(
-  props: MultiSelectFormFieldProps<T, V>,
-) => {
-  const field = useFormFieldPropsResolver(props);
-  return (
-    <FormField field={field}>
-      <MultiSelectMenuV2
-        id={field.id}
-        disabled={field.disabled}
-        value={field.value}
-        onChange={(value: any) => 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}
-      />
-    </FormField>
-  );
-};

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<T, R = void> = (option: T) => R;
-
-type Props<T, V = T> = {
-  id?: string;
-  options: readonly T[];
-  value: V[] | undefined;
-  placeholder?: ReactNode;
-  optionLabel: OptionCallback<T, ReactNode>;
-  optionSelectedLabel?: OptionCallback<T, ReactNode>;
-  optionDescription?: OptionCallback<T, ReactNode>;
-  optionIcon?: OptionCallback<T, ReactNode>;
-  optionValue?: OptionCallback<T, V>;
-  optionDisabled?: OptionCallback<T, boolean>;
-  className?: string;
-  disabled?: boolean;
-  renderSelectedOptions?: OptionCallback<T[], ReactNode>;
-  onChange: OptionCallback<V[]>;
-};
-
-/**
- * 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 = <T, V>(props: Props<T, V>) => {
-  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: (
-        <div className="rounded-full border border-secondary-400 bg-secondary-100 px-2 text-xs text-secondary-900">
-          {selectedLabel}
-        </div>
-      ),
-    };
-  });
-
-  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<HTMLButtonElement>(null);
-
-  const handleSingleSelect = (o: any) => {
-    if (
-      o.option?.isSingleSelect === true &&
-      !selectedOptions.includes(o) &&
-      buttonRef.current
-    ) {
-      buttonRef.current.click();
-    }
-  };
-
-  return (
-    <div className={props.className} id={props.id}>
-      <Listbox
-        disabled={props.disabled}
-        value={selectedOptions}
-        onChange={(opts: typeof options) =>
-          props.onChange(opts.map((o) => o.value) as any)
-        }
-        multiple
-      >
-        <>
-          <Label className="sr-only !relative">{props.placeholder}</Label>
-          <div className="relative">
-            <div>
-              <ListboxButton
-                className="cui-input-base flex w-full rounded"
-                ref={buttonRef}
-              >
-                <div className="relative z-0 flex w-full items-center">
-                  <div className="relative flex flex-1 items-center pr-4 focus:z-10">
-                    <p className="ml-2.5 text-sm font-normal text-secondary-600">
-                      <Placeholder />
-                    </p>
-
-                    {selectedOptions.length !== 0 && (
-                      <div className="flex flex-wrap gap-2">
-                        {selectedOptions.map((option, index) => (
-                          <MultiSelectOptionChip
-                            key={index}
-                            label={option.selectedLabel}
-                            onRemove={() => {
-                              const updatedOptions = selectedOptions.filter(
-                                (selectedOption) =>
-                                  selectedOption.value !== option.value,
-                              );
-                              props.onChange(
-                                updatedOptions.map((o) => o.value) as any,
-                              );
-                            }}
-                          />
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                  <CareIcon
-                    id="dropdown-toggle"
-                    icon="l-angle-down"
-                    className="-mb-0.5 text-lg text-secondary-900"
-                  />
-                </div>
-              </ListboxButton>
-            </div>
-            <ListboxOptions
-              modal={false}
-              as="ul"
-              className="cui-dropdown-base absolute top-full"
-            >
-              {options.map((option, index) => (
-                <ListboxOption
-                  as="li"
-                  id={`${props.id}-option-${index}`}
-                  key={index}
-                  className={dropdownOptionClassNames}
-                  value={option}
-                  onClick={() => handleSingleSelect(option)}
-                  disabled={option.disabled}
-                >
-                  {({ focus }) => (
-                    <div className="flex flex-col gap-2">
-                      <div className="flex justify-between">
-                        {option.label}
-                        {(option.icon || option.isSelected) &&
-                          (option.isSelected ? (
-                            <CareIcon icon="l-check" className="text-lg" />
-                          ) : (
-                            option.icon
-                          ))}
-                      </div>
-                      {option.description && (
-                        <p
-                          className={classNames(
-                            "text-sm font-normal",
-                            option.disabled
-                              ? "text-secondary-500"
-                              : focus
-                                ? "text-primary-200"
-                                : "text-secondary-500",
-                          )}
-                        >
-                          {option.description}
-                        </p>
-                      )}
-                    </div>
-                  )}
-                </ListboxOption>
-              ))}
-            </ListboxOptions>
-          </div>
-        </>
-      </Listbox>
-    </div>
-  );
-};
-
-export default MultiSelectMenuV2;
-
 interface MultiSelectOptionChipProps {
   label: ReactNode;
   onRemove?: () => void;