import { Fragment, useState } from "react"; // headless ui import { Menu, Transition } from "@headlessui/react"; // icons import { ChevronDownIcon } from "@heroicons/react/24/outline"; import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/20/solid"; type MultiLevelDropdownProps = { label: string; options: { id: string; label: string; value: any; selected?: boolean; children?: { id: string; label: string | JSX.Element; value: any; selected?: boolean; }[]; }[]; onSelect: (value: any) => void; direction?: "left" | "right"; height?: "sm" | "md" | "rg" | "lg"; }; export const MultiLevelDropdown: React.FC = ({ label, options, onSelect, direction = "right", height = "md", }) => { const [openChildFor, setOpenChildFor] = useState(null); return ( {({ open }) => ( <>
setOpenChildFor(null)} className={`group flex items-center justify-between gap-2 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${ open ? "bg-gray-100 text-gray-900" : "text-gray-500" }`} > {label}
{options.map((option) => (
{ if (option.children) { e.stopPropagation(); e.preventDefault(); if (openChildFor === option.id) setOpenChildFor(null); else setOpenChildFor(option.id); } else { onSelect(option.value); } }} className="w-full" > {({ active }) => ( <>
{direction === "left" && option.children && (
)}
{option.children && option.id === openChildFor && (
{option.children.map((child) => ( ))}
)}
))}
)}
); };