import { clsx } from 'clsx'; import messages from './Label.messages'; import { useIntl } from 'react-intl'; import Body from '../body'; import { CommonProps } from '../common'; import { forwardRef, PropsWithChildren } from 'react'; export type LabelProps = { id?: string; htmlFor?: string; className?: string; children?: React.ReactNode; }; /** * Avoid using `` component directly * it's for edge cases when `` isn't suitable for some reasons. * * Example: * ``` * .. * ``` */ const Label = forwardRef( ({ className, children, htmlFor, id }: LabelProps, ref) => { return ( {children} ); }, ); export type LabelOptionalProps = PropsWithChildren; const Optional = function Optional({ children, className }: LabelOptionalProps) { const { formatMessage } = useIntl(); return (

{children} {formatMessage(messages.optionalLabel)}

); }; export type LabelDescriptionProps = PropsWithChildren & { id?: string }; const Description = function Description({ id, children, className }: LabelDescriptionProps) { return children ? ( {children} ) : null; }; // eslint-disable-next-line functional/immutable-data const LabelNamespace = Object.assign(Label, { Optional, Description }); LabelNamespace.displayName = 'Label'; export { LabelNamespace as Label };