fix: polymorphic component types [button, dropdown item] (#1308)

* fix: polymorphic component types [button, dropdown item]

* chore: order imports

* chore: order imports

* fix: absolute import to relative

---------

Co-authored-by: SutuSebastian <[email protected]>

Author: SutuSebastian

src/components/Button/Button.tsx

@@ -1,6 +1,7 @@
 import type { ElementType } from 'react';
 import { forwardRef, type ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';
+import type { PolymorphicComponentPropWithRef, PolymorphicRef } from '../../helpers/generic-as-prop';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { getTheme } from '../../theme-store';
 import type { DeepPartial } from '../../types';
@@ -15,7 +16,6 @@ import { Spinner } from '../Spinner';
 import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
 import type { PositionInButtonGroup } from './ButtonGroup';
 import { ButtonGroup } from './ButtonGroup';
-import type { PolymorphicComponentPropWithRef, PolymorphicRef } from '../../helpers/generic-as-prop';
 
 export interface FlowbiteButtonTheme {
   base: string;
@@ -88,11 +88,11 @@ export type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponent
   }
 >;
 
-type ButtonComponentType = (<C extends React.ElementType = 'button'>(
-  props: ButtonProps<C>,
-) => React.ReactNode | null) & { displayName?: string };
+type ButtonComponentType = (<C extends ElementType = 'button'>(props: ButtonProps<C>) => JSX.Element) & {
+  displayName?: string;
+};
 
-const ButtonComponentFn: ButtonComponentType = forwardRef(
+const ButtonComponent = forwardRef(
   <T extends ElementType = 'button'>(
     {
       children,
@@ -168,9 +168,10 @@ const ButtonComponentFn: ButtonComponentType = forwardRef(
       </ButtonBase>
     );
   },
-);
+) as ButtonComponentType;
+
+ButtonComponent.displayName = 'Button';
 
-ButtonComponentFn.displayName = 'Button';
-export const Button = Object.assign(ButtonComponentFn, {
+export const Button = Object.assign(ButtonComponent, {
   Group: ButtonGroup,
 });

src/components/Dropdown/DropdownItem.tsx

@@ -3,11 +3,11 @@
 import { useListItem, useMergeRefs } from '@floating-ui/react';
 import { forwardRef, type ComponentProps, type ElementType, type FC, type RefCallback } from 'react';
 import { twMerge } from 'tailwind-merge';
+import type { PolymorphicComponentPropWithRef, PolymorphicRef } from '../../helpers/generic-as-prop';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
 import { ButtonBase, type ButtonBaseProps } from '../Button/ButtonBase';
 import { useDropdownContext } from './DropdownContext';
-import type { PolymorphicComponentPropWithRef, PolymorphicRef } from '~/src/helpers/generic-as-prop';
 
 export interface FlowbiteDropdownItemTheme {
   container: string;
@@ -25,11 +25,11 @@ export type DropdownItemProps<T extends ElementType = 'button'> = PolymorphicCom
   }
 >;
 
-type DropdownItemComponentType = (<C extends React.ElementType = 'button'>(
-  props: DropdownItemProps<C>,
-) => React.ReactNode | null) & { displayName?: string };
+type DropdownItemComponentType = (<C extends ElementType = 'button'>(props: DropdownItemProps<C>) => JSX.Element) & {
+  displayName?: string;
+};
 
-export const DropdownItem: DropdownItemComponentType = forwardRef(
+export const DropdownItem = forwardRef(
   <T extends ElementType = 'button'>(
     { children, className, icon: Icon, onClick, theme: customTheme = {}, ...props }: DropdownItemProps<T>,
     forwardedRef: PolymorphicRef<T>,
@@ -62,5 +62,6 @@ export const DropdownItem: DropdownItemComponentType = forwardRef(
       </li>
     );
   },
-);
+) as DropdownItemComponentType;
+
 DropdownItem.displayName = 'DropdownItem';