diff --git a/docs/reference/generated/radio-indicator.json b/docs/reference/generated/radio-indicator.json index ebe8fd7160..bc88ade35f 100644 --- a/docs/reference/generated/radio-indicator.json +++ b/docs/reference/generated/radio-indicator.json @@ -8,7 +8,7 @@ }, "keepMounted": { "type": "boolean", - "default": "true", + "default": "false", "description": "Whether to keep the HTML element in the DOM when the radio button is inactive." }, "render": { diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx index 3bc3f913f9..099128c4c0 100644 --- a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx +++ b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx @@ -71,7 +71,6 @@ describe('', () => { ); const indicator = container.querySelector('span'); expect(indicator).not.to.equal(null); - expect(indicator).to.have.attribute('hidden'); }); it('should keep indicator mounted when checked', async () => { @@ -82,7 +81,6 @@ describe('', () => { ); const indicator = container.querySelector('span'); expect(indicator).not.to.equal(null); - expect(indicator).not.to.have.attribute('hidden'); }); it('should keep indicator mounted when indeterminate', async () => { @@ -93,7 +91,6 @@ describe('', () => { ); const indicator = container.querySelector('span'); expect(indicator).not.to.equal(null); - expect(indicator).not.to.have.attribute('hidden'); }); }); @@ -108,7 +105,7 @@ describe('', () => {
- +
); @@ -116,14 +113,14 @@ describe('', () => { const { user } = await render(); - expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden'); + expect(screen.getByTestId('indicator')).not.to.equal(null); const closeButton = screen.getByText('Close'); await user.click(closeButton); await waitFor(() => { - expect(screen.getByTestId('indicator')).to.have.attribute('hidden'); + expect(screen.queryByTestId('indicator')).to.equal(null); }); }); @@ -172,16 +169,13 @@ describe('', () => { } const { user } = await render(); - - expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden'); + expect(screen.getByTestId('indicator')).not.to.equal(null); const closeButton = screen.getByText('Close'); await user.click(closeButton); await waitFor(() => { - expect(screen.getByTestId('indicator')).to.have.attribute('hidden'); + expect(animationFinished).to.equal(true); }); - - expect(animationFinished).to.equal(true); }); }); diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx index 9d52af396e..700583ac4a 100644 --- a/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx +++ b/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx @@ -28,7 +28,7 @@ const CheckboxIndicator = React.forwardRef(function CheckboxIndicator( const rendered = rootState.checked || rootState.indeterminate; - const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered); + const { transitionStatus, setMounted } = useTransitionStatus(rendered); const indicatorRef = React.useRef(null); const mergedRef = useForkRef(forwardedRef, indicatorRef); @@ -65,10 +65,7 @@ const CheckboxIndicator = React.forwardRef(function CheckboxIndicator( state, className, customStyleHookMapping, - extraProps: { - hidden: !mounted, - ...otherProps, - }, + extraProps: otherProps, }); const shouldRender = keepMounted || rendered; diff --git a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx index 349f2b6d80..c9f078aecb 100644 --- a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx +++ b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx @@ -43,7 +43,7 @@ describe('', () => { - + @@ -55,14 +55,14 @@ describe('', () => { const { user } = await render(); - expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden'); + expect(screen.queryByTestId('indicator')).not.to.equal(null); const closeButton = screen.getByText('Close'); await user.click(closeButton); await waitFor(() => { - expect(screen.getByTestId('indicator')).to.have.attribute('hidden'); + expect(screen.queryByTestId('indicator')).to.equal(null); }); }); @@ -125,9 +125,7 @@ describe('', () => { await user.click(closeButton); await waitFor(() => { - expect(screen.getByTestId('indicator')).to.have.attribute('hidden'); + expect(animationFinished).to.equal(true); }); - - expect(animationFinished).to.equal(true); }); }); diff --git a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx index b7a6d1d95f..c235e7675c 100644 --- a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx +++ b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx @@ -27,15 +27,14 @@ const MenuCheckboxItemIndicator = React.forwardRef(function MenuCheckboxItemIndi const indicatorRef = React.useRef(null); const mergedRef = useForkRef(forwardedRef, indicatorRef); - const { mounted, transitionStatus, setMounted } = useTransitionStatus(item.checked); + const { transitionStatus, setMounted } = useTransitionStatus(item.checked); const getItemProps = React.useCallback( (externalProps = {}) => mergeReactProps(externalProps, { 'aria-hidden': true, - hidden: !mounted, }), - [mounted], + [], ); useAfterExitAnimation({ diff --git a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx index f78529f19c..cdd3719dd7 100644 --- a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx +++ b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx @@ -43,7 +43,7 @@ describe('', () => { - + @@ -60,14 +60,14 @@ describe('', () => { const { user } = await render(); - expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden'); + expect(screen.queryByTestId('indicator')).not.to.equal(null); const closeButton = screen.getByText('Close'); await user.click(closeButton); await waitFor(() => { - expect(screen.getByTestId('indicator')).to.have.attribute('hidden'); + expect(screen.queryByTestId('indicator')).to.equal(null); }); }); @@ -129,15 +129,13 @@ describe('', () => { const { user } = await render(); - expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden'); + expect(screen.getByTestId('indicator')).not.to.equal(null); const closeButton = screen.getByText('Close'); await user.click(closeButton); await waitFor(() => { - expect(screen.getByTestId('indicator')).to.have.attribute('hidden'); + expect(animationFinished).to.equal(true); }); - - expect(animationFinished).to.equal(true); }); }); diff --git a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx index 5bc9f9c010..b69dbaf0fb 100644 --- a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx +++ b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx @@ -27,15 +27,14 @@ const MenuRadioItemIndicator = React.forwardRef(function MenuRadioItemIndicator( const indicatorRef = React.useRef(null); const mergedRef = useForkRef(forwardedRef, indicatorRef); - const { mounted, transitionStatus, setMounted } = useTransitionStatus(item.checked); + const { transitionStatus, setMounted } = useTransitionStatus(item.checked); const getItemProps = React.useCallback( (externalProps = {}) => mergeReactProps(externalProps, { 'aria-hidden': true, - hidden: !mounted, }), - [mounted], + [], ); useAfterExitAnimation({ diff --git a/packages/react/src/radio-group/RadioGroup.test.tsx b/packages/react/src/radio-group/RadioGroup.test.tsx index f7fa355072..ae2f76cb5f 100644 --- a/packages/react/src/radio-group/RadioGroup.test.tsx +++ b/packages/react/src/radio-group/RadioGroup.test.tsx @@ -314,10 +314,10 @@ describe('', () => { render( - + - + , ); diff --git a/packages/react/src/radio/indicator/RadioIndicator.test.tsx b/packages/react/src/radio/indicator/RadioIndicator.test.tsx index ee08121d1c..2daffb54fb 100644 --- a/packages/react/src/radio/indicator/RadioIndicator.test.tsx +++ b/packages/react/src/radio/indicator/RadioIndicator.test.tsx @@ -31,14 +31,10 @@ describe('', () => { - + - + @@ -47,14 +43,14 @@ describe('', () => { const { user } = await render(); - expect(screen.getByTestId('indicator-a')).not.to.have.attribute('hidden'); + expect(screen.getByTestId('indicator-a')).not.to.equal(null); const closeButton = screen.getByText('Close'); await user.click(closeButton); await waitFor(() => { - expect(screen.getByTestId('indicator-a')).to.have.attribute('hidden'); + expect(screen.queryByTestId('indicator-a')).to.equal(null); }); }); @@ -109,15 +105,13 @@ describe('', () => { const { user } = await render(); - expect(screen.getByTestId('indicator-a')).not.to.have.attribute('hidden'); + expect(screen.getByTestId('indicator-a')).not.to.equal(null); const closeButton = screen.getByText('Close'); await user.click(closeButton); await waitFor(() => { - expect(screen.getByTestId('indicator-a')).to.have.attribute('hidden'); + expect(animationFinished).to.equal(true); }); - - expect(animationFinished).to.equal(true); }); }); diff --git a/packages/react/src/radio/indicator/RadioIndicator.tsx b/packages/react/src/radio/indicator/RadioIndicator.tsx index 11aadebfce..6624526904 100644 --- a/packages/react/src/radio/indicator/RadioIndicator.tsx +++ b/packages/react/src/radio/indicator/RadioIndicator.tsx @@ -19,13 +19,13 @@ const RadioIndicator = React.forwardRef(function RadioIndicator( props: RadioIndicator.Props, forwardedRef: React.ForwardedRef, ) { - const { render, className, keepMounted = true, ...otherProps } = props; + const { render, className, keepMounted = false, ...otherProps } = props; const rootState = useRadioRootContext(); const rendered = rootState.checked; - const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered); + const { transitionStatus, setMounted } = useTransitionStatus(rendered); const state: RadioIndicator.State = React.useMemo( () => ({ @@ -43,10 +43,7 @@ const RadioIndicator = React.forwardRef(function RadioIndicator( ref: mergedRef, className, state, - extraProps: { - hidden: !mounted, - ...otherProps, - }, + extraProps: otherProps, customStyleHookMapping, }); @@ -70,7 +67,7 @@ namespace RadioIndicator { export interface Props extends BaseUIComponentProps<'span', State> { /** * Whether to keep the HTML element in the DOM when the radio button is inactive. - * @default true + * @default false */ keepMounted?: boolean; } @@ -100,7 +97,7 @@ RadioIndicator.propTypes /* remove-proptypes */ = { className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), /** * Whether to keep the HTML element in the DOM when the radio button is inactive. - * @default true + * @default false */ keepMounted: PropTypes.bool, /**