ci(eslint): resolve outstanding eslint issues

src/docs/pages/TabsPage.tsx

@@ -1,7 +1,9 @@
-import { FC, useRef, useState } from 'react';
+import type { FC} from 'react';
+import { useRef, useState } from 'react';
 import { HiAdjustments, HiClipboardList, HiUserCircle } from 'react-icons/hi';
 import { MdDashboard } from 'react-icons/md';
-import { Button, Tabs, TabsRef } from '../../lib';
+import type { TabsRef } from '../../lib';
+import { Button, Tabs } from '../../lib';
 import type { CodeExample } from './DemoPage';
 import { DemoPage } from './DemoPage';
 

src/lib/components/Accordion/Accordion.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { FC } from 'react';
+import type { FC } from 'react';
 import { HiOutlineArrowCircleDown } from 'react-icons/hi';
 import { describe, expect, it } from 'vitest';
 import { Flowbite } from '../Flowbite';
@@ -48,6 +48,7 @@ describe('Components / Accordion', () => {
       const user = userEvent.setup();
       render(<TestAccordion />);
 
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       for (const _ of titles()) {
         await user.tab();
       }
@@ -61,6 +62,7 @@ describe('Components / Accordion', () => {
       const user = userEvent.setup();
       render(<TestAccordion alwaysOpen />);
 
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       for (const _ of titles()) {
         await user.tab();
       }

src/lib/components/Accordion/Accordion.tsx

@@ -2,14 +2,16 @@ import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react';
 import { Children, cloneElement, useMemo, useState } from 'react';
 import { HiChevronDown } from 'react-icons/hi';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
-import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
+import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
-import { AccordionContent, FlowbiteAccordionComponentTheme } from './AccordionContent';
+import type { FlowbiteAccordionComponentTheme } from './AccordionContent';
+import { AccordionContent } from './AccordionContent';
 import type { AccordionPanelProps } from './AccordionPanel';
 import { AccordionPanel } from './AccordionPanel';
-import { AccordionTitle, FlowbiteAccordionTitleTheme } from './AccordionTitle';
+import type { FlowbiteAccordionTitleTheme } from './AccordionTitle';
+import { AccordionTitle } from './AccordionTitle';
 
 export interface FlowbiteAccordionTheme {
   root: FlowbiteAccordionRootTheme;

src/lib/components/Accordion/AccordionContent.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { useAccordionContext } from './AccordionPanelContext';

src/lib/components/Accordion/AccordionTitle.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import type { FlowbiteBoolean, FlowbiteHeadingLevel } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';

src/lib/components/Alert/Alert.spec.tsx

@@ -1,11 +1,13 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { FC, useState } from 'react';
+import type { FC} from 'react';
+import { useState } from 'react';
 import { HiEye, HiHeart, HiInformationCircle } from 'react-icons/hi';
 import { describe, expect, it, vi } from 'vitest';
 import { Flowbite } from '../Flowbite';
 
-import { Alert, AlertProps } from './Alert';
+import type { AlertProps } from './Alert';
+import { Alert } from './Alert';
 
 describe.concurrent('Components / Alert', () => {
   describe.concurrent('A11y', () => {

src/lib/components/Alert/Alert.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
 import { HiX } from 'react-icons/hi';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import type { FlowbiteColors } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';

src/lib/components/Avatar/Avatar.tsx

@@ -1,11 +1,13 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import type { FlowbiteBoolean, FlowbiteColors, FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
-import AvatarGroup, { FlowbiteAvatarGroupTheme } from './AvatarGroup';
-import AvatarGroupCounter, { FlowbiteAvatarGroupCounterTheme } from './AvatarGroupCounter';
+import type { FlowbiteAvatarGroupTheme } from './AvatarGroup';
+import AvatarGroup from './AvatarGroup';
+import type { FlowbiteAvatarGroupCounterTheme } from './AvatarGroupCounter';
+import AvatarGroupCounter from './AvatarGroupCounter';
 
 export interface FlowbiteAvatarTheme {
   root: FlowbiteAvatarRootTheme;

src/lib/components/Avatar/AvatarGroup.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ComponentProps, PropsWithChildren } from 'react';
 import React from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite';
 

src/lib/components/Avatar/AvatarGroupCounter.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ComponentProps, PropsWithChildren } from 'react';
 import React from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite';
 

src/lib/components/Badge/Badge.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';

src/lib/components/Breadcrumb/Breadcrumb.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { FC } from 'react';
+import type { FC } from 'react';
 import { HiHome } from 'react-icons/hi';
 import { describe, expect, it } from 'vitest';
 import { Flowbite } from '../Flowbite';

src/lib/components/Breadcrumb/Breadcrumb.tsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
-import BreadcrumbItem, { FlowbiteBreadcrumbItemTheme } from './BreadcrumbItem';
+import type { FlowbiteBreadcrumbItemTheme } from './BreadcrumbItem';
+import BreadcrumbItem from './BreadcrumbItem';
 
 export interface FlowbiteBreadcrumbTheme {
   root: FlowbiteBreadcrumbRootTheme;

src/lib/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
-import { ComponentProps, FC, forwardRef, PropsWithChildren } from 'react';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { forwardRef } from 'react';
 import { HiOutlineChevronRight } from 'react-icons/hi';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
-import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
+import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteBreadcrumbItemTheme {

src/lib/components/Button/ButtonGroup.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react';
 import { Children, cloneElement, useMemo } from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import type { ButtonProps } from '../Button';
 import { useTheme } from '../Flowbite/ThemeContext';

src/lib/components/Card/Card.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
-import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
+import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteCardTheme {

src/lib/components/Carousel/Carousel.tsx

@@ -5,7 +5,7 @@ import { HiOutlineChevronLeft, HiOutlineChevronRight } from 'react-icons/hi';
 import ScrollContainer from 'react-indiana-drag-scroll';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import windowExists from '../../helpers/window-exists';
-import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
+import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface FlowbiteCarouselTheme {

src/lib/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ComponentProps } from 'react';
 import { forwardRef } from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 

src/lib/components/DarkThemeToggle/DarkThemeToggle.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 import { useContext } from 'react';
 import { HiMoon, HiSun } from 'react-icons/hi';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { ThemeContext, useTheme } from '../Flowbite/ThemeContext';
 

src/lib/components/Dropdown/Dropdown.spec.tsx

@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { FC } from 'react';
+import type { FC } from 'react';
 import { describe, expect, it } from 'vitest';
 import { Dropdown } from './Dropdown';
 

src/lib/components/Dropdown/Dropdown.tsx

@@ -1,17 +1,21 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
-import React, { Children, useMemo, useState } from 'react';
+import React, { Children, useCallback, useMemo, useState } from 'react';
 import { HiOutlineChevronDown, HiOutlineChevronLeft, HiOutlineChevronRight, HiOutlineChevronUp } from 'react-icons/hi';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { uuid } from '../../helpers/uuid';
 import type { ButtonProps } from '../Button';
 import { Button } from '../Button';
 import type { FloatingProps, FlowbiteFloatingTheme } from '../Floating';
 import { Floating } from '../Floating';
 import { useTheme } from '../Flowbite/ThemeContext';
-import { DropdownDivider, FlowbiteDropdownDividerTheme } from './DropdownDivider';
-import { DropdownHeader, FlowbiteDropdownHeaderTheme } from './DropdownHeader';
-import { DropdownItem, FlowbiteDropdownItemTheme } from './DropdownItem';
+import type { FlowbiteDropdownDividerTheme } from './DropdownDivider';
+import { DropdownDivider } from './DropdownDivider';
+import type { FlowbiteDropdownHeaderTheme } from './DropdownHeader';
+import { DropdownHeader } from './DropdownHeader';
+import type { FlowbiteDropdownItemTheme } from './DropdownItem';
+import { DropdownItem } from './DropdownItem';
 
 export interface FlowbiteDropdownFloatingTheme
   extends FlowbiteFloatingTheme,
@@ -73,27 +77,32 @@ const DropdownComponent: FC<DropdownProps> = ({
   const [closeRequestKey, setCloseRequestKey] = useState<string | undefined>(undefined);
 
   // Extends DropdownItem's onClick to trigger a close request to the Floating component
-  const attachCloseListener: any = (node: ReactNode) => {
-    if (!React.isValidElement(node)) return node;
-    if ((node as ReactElement).type === DropdownItem)
-      return React.cloneElement(node, {
-        onClick: () => {
-          node.props.onClick?.();
-          dismissOnClick && setCloseRequestKey(uuid());
-        },
-      } as any);
-    if (node.props.children && typeof node.props.children === 'object') {
-      return React.cloneElement(node, {
-        // @ts-ignore
-        children: Children.map(node.props.children, attachCloseListener),
-      });
-    }
-    return node;
-  };
+  const attachCloseListener = useCallback(
+    // @ts-ignore TODO: Rewrite Dropdown
+    (node: ReactNode) => {
+      if (!React.isValidElement(node)) return node;
+      if ((node as ReactElement).type === DropdownItem)
+        return React.cloneElement(node, {
+          // @ts-ignore TODO: Rewrite Dropdown
+          onClick: () => {
+            node.props.onClick?.();
+            dismissOnClick && setCloseRequestKey(uuid());
+          },
+        });
+      if (node.props.children && typeof node.props.children === 'object') {
+        return React.cloneElement(node, {
+          // @ts-ignore TODO: Rewrite Dropdown
+          children: Children.map(node.props.children, attachCloseListener),
+        });
+      }
+      return node;
+    },
+    [dismissOnClick],
+  );
 
   const content = useMemo(
     () => <ul className={theme.content}>{Children.map(children, attachCloseListener)}</ul>,
-    [children, theme],
+    [attachCloseListener, children, theme.content],
   );
 
   const TriggerWrapper: FC<ButtonProps> = ({ children }): JSX.Element =>

src/lib/components/Dropdown/DropdownItem.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 

src/lib/components/FileInput/FileInput.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ComponentProps, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import { DeepPartial } from '..';
+import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { HelperText } from '../HelperText';

src/lib/components/Flowbite/Flowbite.spec.tsx

@@ -3,7 +3,7 @@ import { afterEach, describe, expect, it } from 'vitest';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import defaultTheme from '../../theme/default';
 import { Flowbite, useTheme } from '../Flowbite';
-import { ThemeContextProps } from './ThemeContext';
+import type { ThemeContextProps } from './ThemeContext';
 
 afterEach(() => {
   localStorage.removeItem('theme');