diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 4a94c2fd9f..b426ad7446 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -5,7 +5,7 @@ ```ts import type { ButtonProps as ButtonProps_2 } from 'react-aria-components'; import { CellProps as CellProps_2 } from 'react-aria-components'; -import { CheckboxProps as CheckboxProps_2 } from 'react-aria-components'; +import type { CheckboxProps as CheckboxProps_2 } from 'react-aria-components'; import { ColumnProps as ColumnProps_2 } from 'react-aria-components'; import type { ColumnSize } from '@react-types/table'; import type { ColumnStaticSize } from '@react-types/table'; @@ -730,21 +730,39 @@ export const Checkbox: ForwardRefExoticComponent< // @public export const CheckboxDefinition: { + readonly styles: { + readonly [key: string]: string; + }; readonly classNames: { readonly root: 'bui-Checkbox'; readonly indicator: 'bui-CheckboxIndicator'; }; - readonly dataAttributes: { - readonly selected: readonly [true, false]; - readonly indeterminate: readonly [true, false]; + readonly propDefs: { + readonly selected: { + readonly dataAttribute: true; + }; + readonly indeterminate: { + readonly dataAttribute: true; + }; + readonly children: {}; + readonly className: {}; + readonly style: {}; }; }; // @public (undocumented) -export interface CheckboxProps extends CheckboxProps_2 { - // (undocumented) +export type CheckboxOwnProps = { + selected?: boolean; + indeterminate?: boolean; children: React.ReactNode; -} + className?: string; + style?: React.CSSProperties; +}; + +// @public (undocumented) +export interface CheckboxProps + extends Omit, + CheckboxOwnProps {} // @public export type ClassNamesMap = Record; diff --git a/packages/ui/src/components/Checkbox/Checkbox.tsx b/packages/ui/src/components/Checkbox/Checkbox.tsx index 6030fbc06b..a825ccfb8a 100644 --- a/packages/ui/src/components/Checkbox/Checkbox.tsx +++ b/packages/ui/src/components/Checkbox/Checkbox.tsx @@ -17,32 +17,29 @@ import { forwardRef } from 'react'; import { Checkbox as RACheckbox } from 'react-aria-components'; import type { CheckboxProps } from './types'; -import { useStyles } from '../../hooks/useStyles'; +import { useDefinition } from '../../hooks/useDefinition'; import { CheckboxDefinition } from './definition'; -import clsx from 'clsx'; -import styles from './Checkbox.module.css'; import { RiCheckLine, RiSubtractLine } from '@remixicon/react'; /** @public */ export const Checkbox = forwardRef( (props, ref) => { - const { classNames } = useStyles(CheckboxDefinition); - const { className, children, ...rest } = props; + const { ownProps, restProps, dataAttributes } = useDefinition( + CheckboxDefinition, + props, + ); + const { classes, children } = ownProps; return ( {({ isIndeterminate }) => ( <> -
+
{isIndeterminate ? ( ) : ( diff --git a/packages/ui/src/components/Checkbox/definition.ts b/packages/ui/src/components/Checkbox/definition.ts index c7b5b16276..2a481d2f0a 100644 --- a/packages/ui/src/components/Checkbox/definition.ts +++ b/packages/ui/src/components/Checkbox/definition.ts @@ -14,19 +14,25 @@ * limitations under the License. */ -import type { ComponentDefinition } from '../../types'; +import { defineComponent } from '../../hooks/useDefinition'; +import type { CheckboxOwnProps } from './types'; +import styles from './Checkbox.module.css'; /** * Component definition for Checkbox * @public */ -export const CheckboxDefinition = { +export const CheckboxDefinition = defineComponent()({ + styles, classNames: { root: 'bui-Checkbox', indicator: 'bui-CheckboxIndicator', }, - dataAttributes: { - selected: [true, false] as const, - indeterminate: [true, false] as const, + propDefs: { + selected: { dataAttribute: true }, + indeterminate: { dataAttribute: true }, + children: {}, + className: {}, + style: {}, }, -} as const satisfies ComponentDefinition; +}); diff --git a/packages/ui/src/components/Checkbox/index.ts b/packages/ui/src/components/Checkbox/index.ts index 7c0cb5b414..bd20736c41 100644 --- a/packages/ui/src/components/Checkbox/index.ts +++ b/packages/ui/src/components/Checkbox/index.ts @@ -15,4 +15,4 @@ */ export { Checkbox } from './Checkbox'; export { CheckboxDefinition } from './definition'; -export type { CheckboxProps } from './types'; +export type { CheckboxOwnProps, CheckboxProps } from './types'; diff --git a/packages/ui/src/components/Checkbox/types.ts b/packages/ui/src/components/Checkbox/types.ts index 86e4b620b8..76c13a319e 100644 --- a/packages/ui/src/components/Checkbox/types.ts +++ b/packages/ui/src/components/Checkbox/types.ts @@ -13,9 +13,18 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { CheckboxProps as RACheckboxProps } from 'react-aria-components'; +import type { CheckboxProps as RACheckboxProps } from 'react-aria-components'; /** @public */ -export interface CheckboxProps extends RACheckboxProps { +export type CheckboxOwnProps = { + selected?: boolean; + indeterminate?: boolean; children: React.ReactNode; -} + className?: string; + style?: React.CSSProperties; +}; + +/** @public */ +export interface CheckboxProps + extends Omit, + CheckboxOwnProps {}