feat(dropdown.tsx): Dropdown Accessibility

app/docs/components/dropdown/dropdown.mdx

@@ -1,6 +1,7 @@
 import { CodePreview } from '~/app/components/code-preview';
 import { Dropdown, theme } from '~/src';
 import { HiCog, HiCurrencyDollar, HiLogout, HiViewGrid } from 'react-icons/hi';
+import Link from 'next/link';
 
 The dropdown component is a UI component built with React that allows you to show a list of items when clicking on a trigger element (ie. a button) that you can use to build dropdown menus, lists, and more.
 
@@ -189,6 +190,32 @@ To customize the trigger element you can use `renderTrigger` property.
   </Dropdown>
 </CodePreview>
 
+## Custom item
+
+To customize the `Dropdown.Item` base element you can use the `as` property.
+
+<CodePreview
+  title="Custom dropdown item"
+  importExternal="import Link from 'next/link';"
+  code={`<Dropdown label="My custom item">
+  <Dropdown.Item as={Link} href="/">
+    Home
+  </Dropdown.Item>
+  <Dropdown.Item href="https://flowbite.com/" target="_blank">
+    External link
+  </Dropdown.Item>
+</Dropdown>`}
+>
+  <Dropdown dismissOnClick={false} label="My custom item">
+    <Dropdown.Item as={Link} href="/">
+      Home
+    </Dropdown.Item>
+    <Dropdown.Item href="https://flowbite.com/" target="_blank">
+      External link
+    </Dropdown.Item>
+  </Dropdown>
+</CodePreview>
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

package.json

@@ -139,6 +139,9 @@
     "react-dom": "^18",
     "tailwindcss": "^3"
   },
+  "resolutions": {
+    "nwsapi": "2.2.2"
+  },
   "private": false,
   "eslintConfig": {
     "extends": [

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { createElement, forwardRef, type ComponentProps, type ElementType, type ReactNode } from 'react';
+import { forwardRef, type ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';
 import type {
   DeepPartial,
@@ -10,6 +10,7 @@ import type {
 } from '../../';
 import { Spinner, useTheme } from '../../';
 import { mergeDeep } from '../../helpers/merge-deep';
+import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
 import type { PositionInButtonGroup } from './ButtonGroup';
 import ButtonGroup from './ButtonGroup';
 
@@ -61,13 +62,11 @@ export interface ButtonSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'lg' | 'x
   [key: string]: string;
 }
 
-export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color' | 'ref'> {
+export interface ButtonProps extends ButtonBaseProps {
   color?: keyof FlowbiteColors;
   fullSized?: boolean;
   gradientDuoTone?: keyof ButtonGradientDuoToneColors;
   gradientMonochrome?: keyof ButtonGradientColors;
-  as?: ElementType;
-  href?: string;
   target?: string;
   isProcessing?: boolean;
   processingLabel?: string;
@@ -95,8 +94,6 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>
       processingSpinner: SpinnerComponent = <Spinner />,
       gradientDuoTone,
       gradientMonochrome,
-      as: Component = 'button',
-      href,
       label,
       outline = false,
       pill = false,
@@ -110,18 +107,13 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>
     const { buttonGroup: groupTheme, button: buttonTheme } = useTheme().theme;
     const theme = mergeDeep(buttonTheme, customTheme);
 
-    const BaseComponent = href ? 'a' : Component ?? 'button';
-
     const theirProps = props as object;
 
-    return createElement(
-      BaseComponent,
-      {
-        disabled,
-        href,
-        type: Component === 'button' ? 'button' : undefined,
-        ref: ref as never,
-        className: twMerge(
+    return (
+      <ButtonBase
+        disabled={disabled}
+        ref={ref as never}
+        className={twMerge(
           theme.base,
           disabled && theme.disabled,
           !gradientDuoTone && !gradientMonochrome && theme.color[color],
@@ -132,31 +124,32 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>
           fullSized && theme.fullSized,
           groupTheme.position[positionInGroup],
           className,
-        ),
-        ...theirProps,
-      },
-      <span
-        className={twMerge(
-          theme.inner.base,
-          theme.outline[outline ? 'on' : 'off'],
-          theme.outline.pill[outline && pill ? 'on' : 'off'],
-          theme.size[size],
-          outline && !theme.outline.color[color] && theme.inner.outline,
-          isProcessing && theme.isProcessing,
-          theme.inner.position[positionInGroup],
         )}
+        {...theirProps}
       >
-        <>
-          {isProcessing && <span className={twMerge(theme.spinnerSlot)}>{SpinnerComponent}</span>}
-          {typeof children !== 'undefined' ? (
-            children
-          ) : (
-            <span data-testid="flowbite-button-label" className={twMerge(theme.label)}>
-              {isProcessing ? processingLabel : label}
-            </span>
+        <span
+          className={twMerge(
+            theme.inner.base,
+            theme.outline[outline ? 'on' : 'off'],
+            theme.outline.pill[outline && pill ? 'on' : 'off'],
+            theme.size[size],
+            outline && !theme.outline.color[color] && theme.inner.outline,
+            isProcessing && theme.isProcessing,
+            theme.inner.position[positionInGroup],
           )}
-        </>
-      </span>,
+        >
+          <>
+            {isProcessing && <span className={twMerge(theme.spinnerSlot)}>{SpinnerComponent}</span>}
+            {typeof children !== 'undefined' ? (
+              children
+            ) : (
+              <span data-testid="flowbite-button-label" className={twMerge(theme.label)}>
+                {isProcessing ? processingLabel : label}
+              </span>
+            )}
+          </>
+        </span>
+      </ButtonBase>
     );
   },
 );

src/components/Button/ButtonBase.tsx

@@ -0,0 +1,18 @@
+import { createElement, forwardRef, type ComponentProps, type ElementType } from 'react';
+
+export interface ButtonBaseProps extends Omit<ComponentProps<'button'>, 'color' | 'ref'> {
+  as?: ElementType;
+  href?: string;
+}
+
+interface Props extends ButtonBaseProps, Record<string, unknown> {}
+
+export const ButtonBase = forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
+  ({ children, as: Component = 'button', href, ...props }, ref) => {
+    const BaseComponent = href ? 'a' : Component ?? 'button';
+    const type = Component === 'button' ? 'button' : undefined;
+
+    return createElement(BaseComponent, { ref, href, type, ...props }, children);
+  },
+);
+ButtonBase.displayName = 'Button';

src/components/Button/theme.ts

@@ -2,7 +2,7 @@ import type { FlowbiteButtonTheme } from './Button';
 import type { FlowbiteButtonGroupTheme } from './ButtonGroup';
 
 export const buttonTheme: FlowbiteButtonTheme = {
-  base: 'group flex h-min items-center justify-center p-0.5 text-center font-medium focus:z-10',
+  base: 'group flex h-min items-center justify-center p-0.5 text-center font-medium focus:z-10 focus:outline-none',
   fullSized: 'w-full',
   color: {
     dark: 'text-white bg-gray-800 border border-transparent enabled:hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:enabled:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700',