From 1fe2aea4d8ed19714aeb81872b602b94f4b04ac1 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Fri, 5 Apr 2024 23:29:38 +0700
Subject: [PATCH] fix: remove headlessui dist import (#28)

---
 src/drop-down/drop-down.tsx | 54 ++++++++++++-------------------------
 1 file changed, 17 insertions(+), 37 deletions(-)

diff --git a/src/drop-down/drop-down.tsx b/src/drop-down/drop-down.tsx
index 485d1216..1c8e9494 100644
--- a/src/drop-down/drop-down.tsx
+++ b/src/drop-down/drop-down.tsx
@@ -2,49 +2,29 @@ import React, { createContext, useContext, useRef } from "react";
 import { Menu } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
-import { Props } from "@headlessui/react/dist/types";
 
-type MenuTag = React.ExoticComponent<{
-	children?: React.ReactNode;
-}>;
-
-interface MenuRenderPropArg {
-	open: boolean;
-	close: () => void;
+interface MenuItemsProps {
+	children: React.ReactNode;
+	className?: string;
 }
 
-type DropdownMenuProps = Props<
-	MenuTag,
-	MenuRenderPropArg,
-	never,
-	{
-		__demoMode?: boolean;
-	}
->;
-
-export type DropdownProps = DropdownMenuProps & {
+export interface DropdownProps {
+	children: React.ReactNode;
 	dropup?: boolean;
 	id?: string;
-};
-
-export interface ButtonRenderPropArg {
-	open: boolean;
 }
 
-type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup";
-
-type DropDownButtonProps = Props<
-	"button",
-	ButtonRenderPropArg,
-	ButtonPropsWeControl,
-	{
-		disabled?: boolean;
-	}
->;
+interface DropDownButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	children: React.ReactNode;
+	className?: string;
+}
 
-type DropDownContextProps = DropdownProps & {
+interface DropDownContextProps {
+	dropup?: boolean;
 	menuButtonRef: React.MutableRefObject<HTMLButtonElement | null>;
-};
+}
+
 const DropDownContext = createContext<DropDownContextProps>({
 	menuButtonRef: React.createRef(),
 });
@@ -55,7 +35,7 @@ const dropUpItems = dropDownItems + " transform -translate-y-full top-0";
 const toggleClassNames =
 	"cursor-pointer border-3 border-solid w-full block text-center touch-manipulation bg-background-quaternary text-foreground-secondary px-3 py-1.5 relative hover:bg-foreground-secondary hover:text-background-secondary btn-block border-foreground-secondary";
 
-export const MenuItems = React.forwardRef<HTMLDivElement, DropDownButtonProps>(
+export const MenuItems = React.forwardRef<HTMLDivElement, MenuItemsProps>(
 	({ children, className }, ref): JSX.Element => {
 		const { dropup, menuButtonRef } = useContext(DropDownContext);
 
@@ -95,14 +75,14 @@ const DropDownButton = ({
 
 export const Dropdown = ({
 	children,
+	id,
 	dropup,
-	...props
 }: DropdownProps): JSX.Element => {
 	const menuButtonRef = useRef(null);
 	const context = { dropup, menuButtonRef };
 	return (
 		<DropDownContext.Provider value={context}>
-			<Menu className="relative w-full" as="div" {...props}>
+			<Menu className="relative w-full" as="div" id={id}>
 				{children}
 			</Menu>
 		</DropDownContext.Provider>