From 6dc78e8dcc575fdbc8f715272b596bbbff59e0c7 Mon Sep 17 00:00:00 2001
From: paghar <f.paghar@gmail.com>
Date: Mon, 24 Apr 2023 08:56:25 -0700
Subject: [PATCH 1/5] fix(dropdown): fix dropdown menu items container width

#575
---
 src/lib/components/Dropdown/Dropdown.tsx | 31 +++++++++++++++++++++---
 src/lib/components/Floating/Floating.tsx |  3 +++
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Dropdown/Dropdown.tsx b/src/lib/components/Dropdown/Dropdown.tsx
index 11950c0e2..af38ad9a2 100644
--- a/src/lib/components/Dropdown/Dropdown.tsx
+++ b/src/lib/components/Dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
-import React, { Children, useMemo, useState } from 'react';
+import React, { Children, useEffect, useMemo, useRef, useState } from 'react';
 import { HiOutlineChevronDown, HiOutlineChevronLeft, HiOutlineChevronRight, HiOutlineChevronUp } from 'react-icons/hi';
 import { uuid } from '../../helpers/uuid';
 import type { ButtonProps } from '../Button';
@@ -35,6 +35,10 @@ export interface DropdownProps extends PropsWithChildren<Pick<FloatingProps, 'pl
   dismissOnClick?: boolean;
 }
 
+export interface TriggerWrapperProps extends ButtonProps {
+  getWidth?: (width: number) => void;
+}
+
 const icons: Record<string, FC<ComponentProps<'svg'>>> = {
   top: HiOutlineChevronUp,
   right: HiOutlineChevronRight,
@@ -61,6 +65,7 @@ const DropdownComponent: FC<DropdownProps> = ({ children, className, dismissOnCl
   }, [placement]);
 
   const [closeRequestKey, setCloseRequestKey] = useState<string | undefined>(undefined);
+  const [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);
 
   // Extends DropdownItem's onClick to trigger a close request to the Floating component
   const attachCloseListener: any = (node: ReactNode) => {
@@ -86,8 +91,25 @@ const DropdownComponent: FC<DropdownProps> = ({ children, className, dismissOnCl
     [children, theme],
   );
 
-  const TriggerWrapper: FC<ButtonProps> = ({ children }): JSX.Element =>
-    inline ? <button className={theme.inlineWrapper}>{children}</button> : <Button {...buttonProps}>{children}</Button>;
+  const TriggerWrapper: FC<TriggerWrapperProps> = ({ children, getWidth }): JSX.Element => {
+    const inlineRef = useRef<HTMLButtonElement | null>(null);
+    const ref = useRef<HTMLButtonElement | HTMLAnchorElement | null>(null);
+
+    useEffect(() => {
+      if (ref.current) getWidth?.(ref.current.clientWidth);
+      else if (inlineRef.current) getWidth?.(inlineRef.current.offsetWidth);
+    }, [ref]);
+
+    return inline ? (
+      <button ref={inlineRef} className={theme.inlineWrapper}>
+        {children}
+      </button>
+    ) : (
+      <Button ref={ref} {...buttonProps}>
+        {children}
+      </Button>
+    );
+  };
 
   return (
     <Floating
@@ -100,8 +122,9 @@ const DropdownComponent: FC<DropdownProps> = ({ children, className, dismissOnCl
       theme={theme.floating}
       closeRequestKey={closeRequestKey}
       className={className}
+      minWidth={buttonWidth}
     >
-      <TriggerWrapper>
+      <TriggerWrapper getWidth={setButtonWidth}>
         {label}
         {arrowIcon && <Icon className={theme.arrowIcon} />}
       </TriggerWrapper>
diff --git a/src/lib/components/Floating/Floating.tsx b/src/lib/components/Floating/Floating.tsx
index 65a13cced..e2e10dda9 100644
--- a/src/lib/components/Floating/Floating.tsx
+++ b/src/lib/components/Floating/Floating.tsx
@@ -45,6 +45,7 @@ export interface FloatingProps extends PropsWithChildren<Omit<ComponentProps<'di
   animation?: false | `duration-${number}`;
   arrow?: boolean;
   closeRequestKey?: string;
+  minWidth?: number;
 }
 
 /**
@@ -61,6 +62,7 @@ export const Floating: FC<FloatingProps> = ({
   trigger = 'hover',
   closeRequestKey,
   className,
+  minWidth,
   ...props
 }) => {
   const arrowRef = useRef<HTMLDivElement>(null);
@@ -124,6 +126,7 @@ export const Floating: FC<FloatingProps> = ({
             position: strategy,
             top: y ?? ' ',
             left: x ?? ' ',
+            minWidth,
           },
           ...props,
         })}

From 03e995852de152d5e183d6374e94f3926673db82 Mon Sep 17 00:00:00 2001
From: "f.paghar@gmail.com" <mo.ghezelbash@mci.ir>
Date: Tue, 25 Apr 2023 10:28:36 +0330
Subject: [PATCH 2/5] fix(dropdown): fix dropdown menu items container width

#575
---
 src/lib/components/Dropdown/Dropdown.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/Dropdown/Dropdown.tsx b/src/lib/components/Dropdown/Dropdown.tsx
index af38ad9a2..79e3c7730 100644
--- a/src/lib/components/Dropdown/Dropdown.tsx
+++ b/src/lib/components/Dropdown/Dropdown.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import type { ComponentProps, Dispatch, FC, PropsWithChildren, ReactElement, ReactNode, SetStateAction } from 'react';
 import React, { Children, useEffect, useMemo, useRef, useState } from 'react';
 import { HiOutlineChevronDown, HiOutlineChevronLeft, HiOutlineChevronRight, HiOutlineChevronUp } from 'react-icons/hi';
 import { uuid } from '../../helpers/uuid';
@@ -36,7 +36,7 @@ export interface DropdownProps extends PropsWithChildren<Pick<FloatingProps, 'pl
 }
 
 export interface TriggerWrapperProps extends ButtonProps {
-  getWidth?: (width: number) => void;
+  setButtonWidth?: Dispatch<SetStateAction<number | undefined>>;
 }
 
 const icons: Record<string, FC<ComponentProps<'svg'>>> = {
@@ -91,17 +91,15 @@ const DropdownComponent: FC<DropdownProps> = ({ children, className, dismissOnCl
     [children, theme],
   );
 
-  const TriggerWrapper: FC<TriggerWrapperProps> = ({ children, getWidth }): JSX.Element => {
-    const inlineRef = useRef<HTMLButtonElement | null>(null);
-    const ref = useRef<HTMLButtonElement | HTMLAnchorElement | null>(null);
+  const TriggerWrapper: FC<TriggerWrapperProps> = ({ children, setButtonWidth }): JSX.Element => {
+    const ref = useRef<HTMLButtonElement | null>(null);
 
     useEffect(() => {
-      if (ref.current) getWidth?.(ref.current.clientWidth);
-      else if (inlineRef.current) getWidth?.(inlineRef.current.offsetWidth);
+      if (ref.current) setButtonWidth?.(ref.current.clientWidth);
     }, [ref]);
 
     return inline ? (
-      <button ref={inlineRef} className={theme.inlineWrapper}>
+      <button ref={ref} className={theme.inlineWrapper}>
         {children}
       </button>
     ) : (
@@ -124,7 +122,7 @@ const DropdownComponent: FC<DropdownProps> = ({ children, className, dismissOnCl
       className={className}
       minWidth={buttonWidth}
     >
-      <TriggerWrapper getWidth={setButtonWidth}>
+      <TriggerWrapper setButtonWidth={setButtonWidth}>
         {label}
         {arrowIcon && <Icon className={theme.arrowIcon} />}
       </TriggerWrapper>

From 4cd9c6fbd9ead2415f57c1d5f833ca4cc97a900a Mon Sep 17 00:00:00 2001
From: "f.paghar@gmail.com" <mo.ghezelbash@mci.ir>
Date: Tue, 25 Apr 2023 11:13:55 +0330
Subject: [PATCH 3/5] fix(dropdown): fix merge conflict

#575
---
 src/lib/components/Floating/Floating.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/components/Floating/Floating.tsx b/src/lib/components/Floating/Floating.tsx
index 0e1c6de9c..893168909 100644
--- a/src/lib/components/Floating/Floating.tsx
+++ b/src/lib/components/Floating/Floating.tsx
@@ -42,12 +42,12 @@ export interface FloatingProps extends PropsWithChildren<Omit<ComponentProps<'di
   animation?: false | `duration-${number}`;
   arrow?: boolean;
   closeRequestKey?: string;
-  minWidth?: number;
   content: ReactNode;
   placement?: 'auto' | Placement;
   style?: 'dark' | 'light' | 'auto';
   theme: FlowbiteFloatingTheme;
   trigger?: 'hover' | 'click';
+  minWidth?: number;
 }
 
 /**
@@ -64,8 +64,6 @@ export const Floating: FC<FloatingProps> = ({
   style = 'dark',
   theme,
   trigger = 'hover',
-  closeRequestKey,
-  className,
   minWidth,
   ...props
 }) => {

From 5067c89e94de2234191891278a23f4668f2ba836 Mon Sep 17 00:00:00 2001
From: "f.paghar@gmail.com" <mo.ghezelbash@mci.ir>
Date: Tue, 25 Apr 2023 11:24:05 +0330
Subject: [PATCH 4/5] fix(dropdown): fix useEffect has a missing dependency

#575
---
 src/lib/components/Dropdown/Dropdown.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/Dropdown/Dropdown.tsx b/src/lib/components/Dropdown/Dropdown.tsx
index 54918f941..ea0321af7 100644
--- a/src/lib/components/Dropdown/Dropdown.tsx
+++ b/src/lib/components/Dropdown/Dropdown.tsx
@@ -115,6 +115,7 @@ const DropdownComponent: FC<DropdownProps> = ({
 
     useEffect(() => {
       if (ref.current) setButtonWidth?.(ref.current.clientWidth);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [ref]);
 
     return inline ? (

From b70bc012d3ba5738c080f02bae0b1b26a454774b Mon Sep 17 00:00:00 2001
From: "f.paghar@gmail.com" <mo.ghezelbash@mci.ir>
Date: Tue, 25 Apr 2023 11:29:22 +0330
Subject: [PATCH 5/5] fix(dropdown): fix dropdown menu items container width

#575
---
 src/lib/components/Dropdown/Dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Dropdown/Dropdown.tsx b/src/lib/components/Dropdown/Dropdown.tsx
index ea0321af7..2f759177c 100644
--- a/src/lib/components/Dropdown/Dropdown.tsx
+++ b/src/lib/components/Dropdown/Dropdown.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import type { ComponentProps, Dispatch, FC, PropsWithChildren, ReactElement, ReactNode, SetStateAction } from 'react';
 import React, { Children, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -115,7 +116,6 @@ const DropdownComponent: FC<DropdownProps> = ({
 
     useEffect(() => {
       if (ref.current) setButtonWidth?.(ref.current.clientWidth);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [ref]);
 
     return inline ? (