@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 5.27 kB
Source Map (JSON)
{"version":3,"sources":["../src/form/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ValidationMessage, type ValidationMessageProps } from \"../validation-message\";\nimport { type ErrorMessageProps } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\nimport { getValidationMessageValue } from \"../../utils\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\" | \"size\"> & {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n title?: string;\n validationMessage?: ReactNode | { value: ReactNode };\n validationMessageProps?: Partial<ValidationMessageProps>;\n /** @deprecated Use `validationMessageProps` instead */\n errorMessageProps?: Partial<ErrorMessageProps>;\n size?: \"small\" | \"\";\n} & (\n | {\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n *\n * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n //validationMessage?: never;\n /** @deprecated Use `validationMessage` instead */\n errorMessage?: never;\n }\n | {\n hasError?: never;\n /**\n * Set an error message to add error styling, and display the error message.\n * The component will take care of aria to connect the error message to the checkbox.\n *\n * Use this when your checkbox is standalone (not part of a fieldset).\n */\n //validationMessage?: ReactNode;\n /** @deprecated Use `validationMessage` instead */\n errorMessage?: ReactNode;\n }\n );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n variant = \"plain\",\n hasError: hasErrorProp,\n validationMessage,\n validationMessageProps,\n errorMessage,\n errorMessageProps,\n title,\n children,\n className,\n size = \"\",\n ...rest\n },\n ref,\n ) => {\n const validationMessageId = useId();\n const { hasError: hasFieldsetError, size: fieldsetSize } = useFieldsetContext();\n const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n const effectiveSize = size || fieldsetSize;\n const validationMessageValue = getValidationMessageValue(validationMessage, errorMessage);\n\n return (\n <div\n className={clsx(\"hds-checkbox-wrapper\", {\n \"hds-checkbox-wrapper--small\": effectiveSize === \"small\",\n })}\n >\n <div\n className={clsx(\n \"hds-checkbox\",\n {\n [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n },\n className as undefined,\n )}\n >\n <label>\n <input\n aria-invalid={hasError ? true : undefined}\n aria-describedby={validationMessageValue ? validationMessageId : undefined}\n ref={ref}\n type=\"checkbox\"\n {...rest}\n />\n <span aria-hidden className=\"hds-checkbox__checkmark\" />\n {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n <ValidationMessage\n id={validationMessageId}\n {...(validationMessageProps ?? errorMessageProps)}\n >\n {validationMessageValue}\n </ValidationMessage>\n </div>\n );\n },\n);\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,aAAuD;AAC5E,SAAS,YAAY;AAkFX,SACE,KADF;AAtCH,IAAM,WAAW;AAAA,EACtB,CACE,IAaA,QACG;AAdH,iBACE;AAAA,gBAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,IAzDb,IA+CI,IAWK,iBAXL,IAWK;AAAA,MAVH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,sBAAsB,MAAM;AAClC,UAAM,EAAE,UAAU,kBAAkB,MAAM,aAAa,IAAI,mBAAmB;AAC9E,UAAM,WAAW,CAAC,CAAC,gBAAgB,oBAAoB;AACvD,UAAM,gBAAgB,QAAQ;AAC9B,UAAM,yBAAyB,0BAA0B,mBAAmB,YAAY;AAExF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,wBAAwB;AAAA,UACtC,+BAA+B,kBAAkB;AAAA,QACnD,CAAC;AAAA,QAED;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,kBACE,CAAC,iBAAiB,OAAO,EAAE,GAAG,YAAY;AAAA,gBAC5C;AAAA,gBACA;AAAA,cACF;AAAA,cAEA;AAAA,qCAAC,WACC;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,gBAAc,WAAW,OAAO;AAAA,sBAChC,oBAAkB,yBAAyB,sBAAsB;AAAA,sBACjE;AAAA,sBACA,MAAK;AAAA,uBACD;AAAA,kBACN;AAAA,kBACA,oBAAC,UAAK,eAAW,MAAC,WAAU,2BAA0B;AAAA,kBACrD,QAAQ,oBAAC,OAAE,WAAU,uBAAuB,iBAAM,IAAO;AAAA,mBAC5D;AAAA,gBACC,QAAQ,WAAW;AAAA;AAAA;AAAA,UACtB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,eACC,0DAA0B,oBAFhC;AAAA,cAIE;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}