/* eslint-disable react/display-name */ import { clsx } from 'clsx'; import { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react'; import Body from '../../body'; import { LinkProps } from '../commonProps'; export interface BaseOptionProps extends Omit, 'title' | 'content'> { 'aria-label'?: string; 'aria-expanded'?: boolean; 'aria-controls'?: string; media?: ReactNode; name?: string; htmlFor?: string; title: ReactNode; content?: ReactNode; onClick?: (event: MouseEvent) => void; as?: ElementType; disabled?: boolean; button?: ReactNode; decision?: boolean; complex?: boolean; inverseMediaCircle?: boolean; className?: string; showMediaAtAllSizes?: boolean; showMediaCircle?: boolean; isContainerAligned?: boolean; additionalContent?: ReactNode; } interface AnchorOptionProps extends BaseOptionProps, LinkProps { as: 'a'; } export type OptionProps = BaseOptionProps | AnchorOptionProps; export type ReferenceType = HTMLElement | HTMLAnchorElement; /** * @deprecated Use `` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**). */ const Option = forwardRef( ( { media = '', title, content, as: component, button, decision = true, disabled = false, complex, inverseMediaCircle = true, className, showMediaAtAllSizes, showMediaCircle = true, isContainerAligned = false, additionalContent, ...rest }, reference, ) => { const Element = component ?? 'label'; return (
{media && (
{showMediaCircle ? (
{media}
) : (
{media}
)}
)}
{/* @ts-expect-error div can have role and aria-lavel props */} {title} {content && {content}}
{button}
{additionalContent ? (
{additionalContent}
) : null} ); }, ); export default Option;