diff --git a/src/components/Checkbox/README.md b/src/components/Checkbox/README.md index 4464c4a..9770aad 100644 --- a/src/components/Checkbox/README.md +++ b/src/components/Checkbox/README.md @@ -29,4 +29,4 @@ import { BBBCheckbox } from 'bbb-ui-components'; | `round` | `boolean` | `false` | If `true`, the checkbox will be rendered as a round radio-style button. | | `ariaLabel`| `string` | | The accessible name for the checkbox. | | `dataTest` | `string` | | The `data-test` attribute on the underlying `` element. | -| `...props` | `any` | | Any other props will be passed down to the underlying Material-UI Checkbox component. | +| `...props` | `Omit` | | Any other props will be passed down to the underlying Material-UI Checkbox component. Use `slotProps.input` to set attributes on the ``. | diff --git a/src/components/Checkbox/component.tsx b/src/components/Checkbox/component.tsx index 4e52e96..87e74d3 100644 --- a/src/components/Checkbox/component.tsx +++ b/src/components/Checkbox/component.tsx @@ -1,4 +1,5 @@ import React, { JSX, useId } from 'react'; +import { CheckboxOwnerState } from '@mui/material'; import { CheckboxProps } from './types'; import * as Styled from './styles'; import { DEFAULT_LAYOUT, LAYOUTS } from './constants'; @@ -19,20 +20,23 @@ function Checkbox({ ariaLabel, id, dataTest, - inputProps, + slotProps, ...props }: CheckboxProps): JSX.Element { const generatedId = useId(); const checkboxId = id ?? generatedId; - const mergedInputProps = { 'data-test': dataTest, ...inputProps }; + const ownInputProps = { 'aria-label': ariaLabel, 'data-test': dataTest }; + const { input: consumerInputSlotProps, ...otherSlotProps } = slotProps ?? {}; + const inputSlotProps = typeof consumerInputSlotProps === 'function' + ? (ownerState: CheckboxOwnerState) => ({ ...ownInputProps, ...consumerInputSlotProps(ownerState) }) + : { ...ownInputProps, ...consumerInputSlotProps }; const checkbox = ( : undefined} checkedIcon={round ? : undefined} - inputProps={mergedInputProps} + slotProps={{ ...otherSlotProps, input: inputSlotProps }} /> ); diff --git a/src/components/Checkbox/types.ts b/src/components/Checkbox/types.ts index c61e065..b8f7df1 100644 --- a/src/components/Checkbox/types.ts +++ b/src/components/Checkbox/types.ts @@ -3,7 +3,7 @@ import { LAYOUTS } from './constants'; type Layout = typeof LAYOUTS[keyof typeof LAYOUTS]; -export interface CheckboxProps extends MuiCheckboxProps { +export interface CheckboxProps extends Omit { /** Text label displayed next to the checkbox. */ label?: string;