diff --git a/.yarn/versions/1b559ed8.yml b/.yarn/versions/1b559ed8.yml new file mode 100644 index 000000000..c30a8e9aa --- /dev/null +++ b/.yarn/versions/1b559ed8.yml @@ -0,0 +1,7 @@ +releases: + "@radix-ui/react-checkbox": patch + "@radix-ui/react-radio-group": patch + "@radix-ui/react-switch": patch + +declined: + - primitives diff --git a/packages/react/checkbox/src/Checkbox.stories.tsx b/packages/react/checkbox/src/Checkbox.stories.tsx index fd961b15f..612cbf543 100644 --- a/packages/react/checkbox/src/Checkbox.stories.tsx +++ b/packages/react/checkbox/src/Checkbox.stories.tsx @@ -56,7 +56,7 @@ export const Styled = () => ( ); export const Controlled = () => { - const [checked, setChecked] = React.useState(true); + const [checked, setChecked] = React.useState(true); return ( <> @@ -75,7 +75,9 @@ export const Controlled = () => { }; export const Indeterminate = () => { - const [checked, setChecked] = React.useState('indeterminate'); + const [checked, setChecked] = React.useState( + 'indeterminate' + ); return ( <> @@ -101,7 +103,9 @@ export const Indeterminate = () => { export const WithinForm = () => { const [data, setData] = React.useState({ optional: false, required: false, stopprop: false }); - const [checked, setChecked] = React.useState('indeterminate'); + const [checked, setChecked] = React.useState( + 'indeterminate' + ); return (
{ }; export const Animated = () => { - const [checked, setChecked] = React.useState('indeterminate'); + const [checked, setChecked] = React.useState( + 'indeterminate' + ); return ( <> diff --git a/packages/react/checkbox/src/Checkbox.tsx b/packages/react/checkbox/src/Checkbox.tsx index 65fc242dc..8c71a60e0 100644 --- a/packages/react/checkbox/src/Checkbox.tsx +++ b/packages/react/checkbox/src/Checkbox.tsx @@ -19,7 +19,7 @@ const CHECKBOX_NAME = 'Checkbox'; type ScopedProps

= P & { __scopeCheckbox?: Scope }; const [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME); -type CheckedState = boolean | 'indeterminate'; +type CheckedState = boolean | 'indeterminate' | undefined; type CheckboxContextValue = { state: CheckedState; @@ -105,7 +105,7 @@ const Checkbox = React.forwardRef( bubbles={!hasConsumerStoppedPropagationRef.current} name={name} value={value} - checked={checked} + checked={checked ? true : undefined} required={required} disabled={disabled} // We transform because the input is absolutely positioned but we have diff --git a/packages/react/radio-group/src/Radio.tsx b/packages/react/radio-group/src/Radio.tsx index 5fdb7fcd4..cd0745873 100644 --- a/packages/react/radio-group/src/Radio.tsx +++ b/packages/react/radio-group/src/Radio.tsx @@ -24,7 +24,7 @@ const [RadioProvider, useRadioContext] = createRadioContext(R type RadioElement = React.ElementRef; type PrimitiveButtonProps = React.ComponentPropsWithoutRef; interface RadioProps extends PrimitiveButtonProps { - checked?: boolean; + checked?: boolean | undefined; required?: boolean; onCheck?(): void; } @@ -77,7 +77,7 @@ const Radio = React.forwardRef( bubbles={!hasConsumerStoppedPropagationRef.current} name={name} value={value} - checked={checked} + checked={checked ? true : undefined} required={required} disabled={disabled} // We transform because the input is absolutely positioned but we have @@ -132,7 +132,7 @@ RadioIndicator.displayName = INDICATOR_NAME; type InputProps = React.ComponentPropsWithoutRef<'input'>; interface BubbleInputProps extends Omit { - checked: boolean; + checked: boolean | undefined; control: HTMLElement | null; bubbles: boolean; } diff --git a/packages/react/switch/src/Switch.tsx b/packages/react/switch/src/Switch.tsx index e780df512..cf84f878e 100644 --- a/packages/react/switch/src/Switch.tsx +++ b/packages/react/switch/src/Switch.tsx @@ -24,7 +24,7 @@ const [SwitchProvider, useSwitchContext] = createSwitchContext; type PrimitiveButtonProps = React.ComponentPropsWithoutRef; interface SwitchProps extends PrimitiveButtonProps { - checked?: boolean; + checked?: boolean | undefined; defaultChecked?: boolean; required?: boolean; onCheckedChange?(checked: boolean): void; @@ -84,7 +84,7 @@ const Switch = React.forwardRef( bubbles={!hasConsumerStoppedPropagationRef.current} name={name} value={value} - checked={checked} + checked={checked ? true : undefined} required={required} disabled={disabled} // We transform because the input is absolutely positioned but we have @@ -131,7 +131,7 @@ SwitchThumb.displayName = THUMB_NAME; type InputProps = React.ComponentPropsWithoutRef<'input'>; interface BubbleInputProps extends Omit { - checked: boolean; + checked: boolean | undefined; control: HTMLElement | null; bubbles: boolean; }