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',