c65091b36a
feat(SW-3644): Storybook v10 * Auto update to Storybook v10 * Add scandic theme and logo * Update yarn.lock * Update formatting of package.json * Update vitest config and playwright plugin * Remove vitest 4 update * Re-added comment * Update the Typography component to explicitly return React.ReactNode * Add an explicit type assertion to the export * Add an explicit type assertion to the export for Checkbox * Explicit return type assertion * Add an explicit type assertion to the export * Update @types/react and fix ts warnings * Updated typings Approved-by: Linus Flood Approved-by: Matilda Landström
93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { forwardRef } from 'react'
|
|
import { Checkbox as AriaCheckbox } from 'react-aria-components'
|
|
import {
|
|
type RegisterOptions,
|
|
useController,
|
|
useFormContext,
|
|
} from 'react-hook-form'
|
|
|
|
import styles from './checkbox.module.css'
|
|
import { MaterialIcon } from '../../Icons/MaterialIcon'
|
|
import { ErrorMessage } from '../ErrorMessage'
|
|
|
|
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
name: string
|
|
registerOptions?: RegisterOptions
|
|
hideError?: boolean
|
|
topAlign?: boolean
|
|
errorCodeMessages?: Record<string, string>
|
|
}
|
|
|
|
const CheckboxComponent = forwardRef<
|
|
HTMLInputElement,
|
|
React.PropsWithChildren<CheckboxProps>
|
|
>(function Checkbox(
|
|
{
|
|
className = '',
|
|
name,
|
|
children,
|
|
registerOptions,
|
|
hideError,
|
|
topAlign = false,
|
|
errorCodeMessages,
|
|
},
|
|
ref
|
|
) {
|
|
const { control } = useFormContext()
|
|
const { field, fieldState, formState } = useController({
|
|
control,
|
|
name,
|
|
rules: registerOptions,
|
|
})
|
|
|
|
return (
|
|
<AriaCheckbox
|
|
className={`${styles.container} ${className}`}
|
|
isSelected={field.value}
|
|
onChange={field.onChange}
|
|
data-testid={name}
|
|
name={name}
|
|
isDisabled={registerOptions?.disabled}
|
|
excludeFromTabOrder
|
|
>
|
|
{({ isSelected }) => (
|
|
<>
|
|
<span
|
|
className={`${styles.checkboxContainer} ${topAlign ? styles.topAlign : ''}`}
|
|
>
|
|
<span
|
|
className={styles.checkbox}
|
|
tabIndex={registerOptions?.disabled ? undefined : 0}
|
|
ref={ref}
|
|
>
|
|
{isSelected && (
|
|
<MaterialIcon icon="check" color="Icon/Inverted" />
|
|
)}
|
|
</span>
|
|
{children}
|
|
</span>
|
|
{fieldState.error && !hideError ? (
|
|
<ErrorMessage
|
|
errors={formState.errors}
|
|
name={name}
|
|
messageLabel={
|
|
(fieldState.error.message &&
|
|
errorCodeMessages?.[fieldState.error.message]) ||
|
|
fieldState.error.message
|
|
}
|
|
/>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</AriaCheckbox>
|
|
)
|
|
})
|
|
|
|
const Checkbox = CheckboxComponent as React.ForwardRefExoticComponent<
|
|
React.PropsWithChildren<CheckboxProps> & React.RefAttributes<HTMLInputElement>
|
|
>
|
|
|
|
export default Checkbox
|