import { clsx } from 'clsx'; import { useEffect, useRef } from 'react'; import Body from '../body/Body'; import { AriaLabelProperty, CommonProps, Typography } from '../common'; import { CloseButton } from '../common/closeButton/CloseButton'; export type ChipValue = string | number; export type Props = { value?: ChipValue; label: string; onRemove?: () => void; onClick?: () => void; onKeyPress?: () => void; closeButton?: AriaLabelProperty; 'aria-checked'?: boolean; role?: string; } & AriaLabelProperty & CommonProps; const Chip = ({ label, value, onRemove, onClick, onKeyPress, className = undefined, 'aria-label': ariaLabel, 'aria-checked': ariaChecked, role, closeButton, }: Props) => { const isActionable = onClick || onKeyPress; const defaultRole = isActionable ? 'button' : undefined; const tabIndex = isActionable ? 0 : -1; const closeButtonReference = useRef(null); const previousCloseButtonShown = useRef(undefined); useEffect(() => { if (closeButtonReference.current != null && previousCloseButtonShown.current === false) { closeButtonReference.current?.focus(); } previousCloseButtonShown.current = closeButtonReference.current != null; }, [onRemove]); return (

{label} {onRemove ? ( ) : null}

); }; export default Chip;