From c09a5d9a4f40f39a83eb4745b1cfeac9780af7bc Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Mon, 13 Jan 2025 16:08:06 +0530
Subject: [PATCH 1/8] fix: Ensure keepMounted prop prevents hidden attribute
 for inline elements

---
 packages/react/src/checkbox/indicator/CheckboxIndicator.tsx   | 2 +-
 .../checkbox-item-indicator/MenuCheckboxItemIndicator.tsx     | 4 ++--
 .../src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx  | 4 ++--
 packages/react/src/radio/indicator/RadioIndicator.tsx         | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx
index 9d52af396e..099eb6617d 100644
--- a/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx
+++ b/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx
@@ -66,7 +66,7 @@ const CheckboxIndicator = React.forwardRef(function CheckboxIndicator(
     className,
     customStyleHookMapping,
     extraProps: {
-      hidden: !mounted,
+      hidden: !keepMounted && !mounted,
       ...otherProps,
     },
   });
diff --git a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx
index b7a6d1d95f..4385932749 100644
--- a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx
+++ b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx
@@ -33,9 +33,9 @@ const MenuCheckboxItemIndicator = React.forwardRef(function MenuCheckboxItemIndi
     (externalProps = {}) =>
       mergeReactProps(externalProps, {
         'aria-hidden': true,
-        hidden: !mounted,
+        hidden: !keepMounted && !mounted,
       }),
-    [mounted],
+    [keepMounted, mounted],
   );
 
   useAfterExitAnimation({
diff --git a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx
index 5bc9f9c010..1c1692957a 100644
--- a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx
+++ b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx
@@ -33,9 +33,9 @@ const MenuRadioItemIndicator = React.forwardRef(function MenuRadioItemIndicator(
     (externalProps = {}) =>
       mergeReactProps(externalProps, {
         'aria-hidden': true,
-        hidden: !mounted,
+        hidden: !keepMounted && !mounted,
       }),
-    [mounted],
+    [keepMounted, mounted],
   );
 
   useAfterExitAnimation({
diff --git a/packages/react/src/radio/indicator/RadioIndicator.tsx b/packages/react/src/radio/indicator/RadioIndicator.tsx
index 11aadebfce..6ac47c443a 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.tsx
@@ -44,7 +44,7 @@ const RadioIndicator = React.forwardRef(function RadioIndicator(
     className,
     state,
     extraProps: {
-      hidden: !mounted,
+      hidden: !keepMounted && !mounted,
       ...otherProps,
     },
     customStyleHookMapping,

From 2fdd28f16bf2ea88edb40c04d66ba41feb99c5af Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Mon, 13 Jan 2025 18:07:02 +0530
Subject: [PATCH 2/8] fix: modified test to accomodate new changes

---
 .../src/checkbox/indicator/CheckboxIndicator.test.tsx     | 8 +++-----
 .../MenuCheckboxItemIndicator.test.tsx                    | 5 ++---
 .../radio-item-indicator/MenuRadioItemIndicator.test.tsx  | 5 ++---
 .../react/src/radio/indicator/RadioIndicator.test.tsx     | 5 ++---
 4 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
index 34014f11dc..14bdd26671 100644
--- a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
+++ b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
@@ -71,7 +71,7 @@ describe('<Checkbox.Indicator />', () => {
       );
       const indicator = container.querySelector('span');
       expect(indicator).not.to.equal(null);
-      expect(indicator).to.have.attribute('hidden');
+      expect(indicator).not.to.have.attribute('hidden');
     });
 
     it('should keep indicator mounted when checked', async () => {
@@ -125,7 +125,7 @@ describe('<Checkbox.Indicator />', () => {
     await user.click(closeButton);
 
     await waitFor(() => {
-      expect(screen.getByTestId('indicator')).to.have.attribute('hidden');
+      expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
     });
   });
 
@@ -183,9 +183,7 @@ describe('<Checkbox.Indicator />', () => {
     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.test.tsx b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
index 3cf0825e44..c75d008789 100644
--- a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
+++ b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
@@ -60,7 +60,7 @@ describe('<Menu.CheckboxItemIndicator />', () => {
     await user.click(closeButton);
 
     await waitFor(() => {
-      expect(screen.getByTestId('indicator')).to.have.attribute('hidden');
+      expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
     });
   });
 
@@ -123,9 +123,8 @@ describe('<Menu.CheckboxItemIndicator />', () => {
     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.test.tsx b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
index 672ccc7715..bace7d708b 100644
--- a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
+++ b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
@@ -65,7 +65,7 @@ describe('<Menu.RadioItemIndicator />', () => {
     await user.click(closeButton);
 
     await waitFor(() => {
-      expect(screen.getByTestId('indicator')).to.have.attribute('hidden');
+      expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
     });
   });
 
@@ -133,9 +133,8 @@ describe('<Menu.RadioItemIndicator />', () => {
     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/radio/indicator/RadioIndicator.test.tsx b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
index 138be27885..e05a20ce04 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.test.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
@@ -56,7 +56,7 @@ describe('<Radio.Indicator />', () => {
     await user.click(closeButton);
 
     await waitFor(() => {
-      expect(screen.getByTestId('indicator-a')).to.have.attribute('hidden');
+      expect(screen.getByTestId('indicator-a')).not.to.have.attribute('hidden');
     });
   });
 
@@ -119,9 +119,8 @@ describe('<Radio.Indicator />', () => {
     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);
   });
 });

From df772835077e080a08a027792fd1081692afd322 Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Mon, 13 Jan 2025 19:30:39 +0530
Subject: [PATCH 3/8] fix: prettier

---
 .../checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx   | 1 -
 .../menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx    | 1 -
 packages/react/src/radio/indicator/RadioIndicator.test.tsx       | 1 -
 3 files changed, 3 deletions(-)

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 31157190be..9112eb06e7 100644
--- a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
+++ b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
@@ -127,6 +127,5 @@ describe('<Menu.CheckboxItemIndicator />', () => {
     await waitFor(() => {
       expect(animationFinished).to.equal(true);
     });
-
   });
 });
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 3220a8818f..60a9ec183c 100644
--- a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
+++ b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
@@ -137,6 +137,5 @@ describe('<Menu.RadioItemIndicator />', () => {
     await waitFor(() => {
       expect(animationFinished).to.equal(true);
     });
-
   });
 });
diff --git a/packages/react/src/radio/indicator/RadioIndicator.test.tsx b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
index 7fce449502..c775fb021d 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.test.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
@@ -117,6 +117,5 @@ describe('<Radio.Indicator />', () => {
     await waitFor(() => {
       expect(animationFinished).to.equal(true);
     });
-
   });
 });

From cfbb532b5c59a39c02e0d2fca06da6219a6ca02e Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Thu, 16 Jan 2025 21:38:25 +0530
Subject: [PATCH 4/8] fix: removed hidden prop support from all indicator
 components and modified test cases accordingly

---
 .../checkbox/demos/hero/css-modules/index.tsx |  4 +-
 .../indicator/CheckboxIndicator.test.tsx      | 35 --------------
 .../checkbox/indicator/CheckboxIndicator.tsx  |  7 +--
 .../MenuCheckboxItemIndicator.test.tsx        | 38 ---------------
 .../MenuCheckboxItemIndicator.tsx             |  5 +-
 .../MenuRadioItemIndicator.test.tsx           | 47 -------------------
 .../MenuRadioItemIndicator.tsx                |  5 +-
 .../radio/indicator/RadioIndicator.test.tsx   | 41 ----------------
 .../src/radio/indicator/RadioIndicator.tsx    |  7 +--
 9 files changed, 10 insertions(+), 179 deletions(-)

diff --git a/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/css-modules/index.tsx
index d88825ed26..93261de77e 100644
--- a/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -6,11 +6,11 @@ export default function ExampleCheckbox() {
   return (
     <label className={styles.Label}>
       <Checkbox.Root defaultChecked className={styles.Checkbox}>
-        <Checkbox.Indicator className={styles.Indicator}>
+        <Checkbox.Indicator keepMounted className={styles.Indicator}>
           <CheckIcon className={styles.Icon} />
         </Checkbox.Indicator>
       </Checkbox.Root>
-      Enable notifications
+      Enable notifications aa
     </label>
   );
 }
diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
index 08f8c4319d..1af301b6b9 100644
--- a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
+++ b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
@@ -71,7 +71,6 @@ describe('<Checkbox.Indicator />', () => {
       );
       const indicator = container.querySelector('span');
       expect(indicator).not.to.equal(null);
-      expect(indicator).not.to.have.attribute('hidden');
     });
 
     it('should keep indicator mounted when checked', async () => {
@@ -82,7 +81,6 @@ describe('<Checkbox.Indicator />', () => {
       );
       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,37 +91,6 @@ describe('<Checkbox.Indicator />', () => {
       );
       const indicator = container.querySelector('span');
       expect(indicator).not.to.equal(null);
-      expect(indicator).not.to.have.attribute('hidden');
-    });
-  });
-
-  it('should remove the indicator when there is no exit animation defined', async ({ skip }) => {
-    if (isJSDOM) {
-      skip();
-    }
-
-    function Test() {
-      const [checked, setChecked] = React.useState(true);
-      return (
-        <div>
-          <button onClick={() => setChecked(false)}>Close</button>
-          <Checkbox.Root checked={checked}>
-            <Checkbox.Indicator data-testid="indicator" keepMounted />
-          </Checkbox.Root>
-        </div>
-      );
-    }
-
-    const { user } = await render(<Test />);
-
-    expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
-
-    const closeButton = screen.getByText('Close');
-
-    await user.click(closeButton);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
     });
   });
 
@@ -173,8 +140,6 @@ describe('<Checkbox.Indicator />', () => {
 
     const { user } = await render(<Test />);
 
-    expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
-
     const closeButton = screen.getByText('Close');
     await user.click(closeButton);
 
diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx
index 099eb6617d..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<HTMLSpanElement | null>(null);
   const mergedRef = useForkRef(forwardedRef, indicatorRef);
@@ -65,10 +65,7 @@ const CheckboxIndicator = React.forwardRef(function CheckboxIndicator(
     state,
     className,
     customStyleHookMapping,
-    extraProps: {
-      hidden: !keepMounted && !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 9112eb06e7..1572e9921b 100644
--- a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
+++ b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
@@ -28,44 +28,6 @@ describe('<Menu.CheckboxItemIndicator />', () => {
     },
   }));
 
-  it('should remove the indicator when there is no exit animation defined', async ({ skip }) => {
-    if (isJSDOM) {
-      skip();
-    }
-
-    function Test() {
-      const [checked, setChecked] = React.useState(true);
-      return (
-        <div>
-          <button onClick={() => setChecked(false)}>Close</button>
-          <Menu.Root open modal={false}>
-            <Menu.Portal>
-              <Menu.Positioner>
-                <Menu.Popup>
-                  <Menu.CheckboxItem checked={checked}>
-                    <Menu.CheckboxItemIndicator data-testid="indicator" keepMounted />
-                  </Menu.CheckboxItem>
-                </Menu.Popup>
-              </Menu.Positioner>
-            </Menu.Portal>
-          </Menu.Root>
-        </div>
-      );
-    }
-
-    const { user } = await render(<Test />);
-
-    expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
-
-    const closeButton = screen.getByText('Close');
-
-    await user.click(closeButton);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
-    });
-  });
-
   it('should remove the indicator when the animation finishes', async ({ skip }) => {
     if (isJSDOM) {
       skip();
diff --git a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx
index 4385932749..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<HTMLSpanElement | null>(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: !keepMounted && !mounted,
       }),
-    [keepMounted, 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 60a9ec183c..8cb6ce9a6b 100644
--- a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
+++ b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
@@ -26,51 +26,6 @@ describe('<Menu.RadioItemIndicator />', () => {
     },
   }));
 
-  it('should remove the indicator when there is no exit animation defined', async ({ skip }) => {
-    if (isJSDOM) {
-      skip();
-    }
-
-    function Test() {
-      const [value, setValue] = React.useState('a');
-      return (
-        <div>
-          <button onClick={() => setValue('b')}>Close</button>
-          <Menu.Root open modal={false}>
-            <Menu.Portal>
-              <Menu.Positioner>
-                <Menu.Popup>
-                  <Menu.Popup>
-                    <Menu.RadioGroup value={value}>
-                      <Menu.RadioItem value="a">
-                        <Menu.RadioItemIndicator data-testid="indicator" keepMounted />
-                      </Menu.RadioItem>
-                      <Menu.RadioItem value="b">
-                        <Menu.RadioItemIndicator keepMounted />
-                      </Menu.RadioItem>
-                    </Menu.RadioGroup>
-                  </Menu.Popup>
-                </Menu.Popup>
-              </Menu.Positioner>
-            </Menu.Portal>
-          </Menu.Root>
-        </div>
-      );
-    }
-
-    const { user } = await render(<Test />);
-
-    expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
-
-    const closeButton = screen.getByText('Close');
-
-    await user.click(closeButton);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
-    });
-  });
-
   it('should remove the indicator when the animation finishes', async ({ skip }) => {
     if (isJSDOM) {
       skip();
@@ -129,8 +84,6 @@ describe('<Menu.RadioItemIndicator />', () => {
 
     const { user } = await render(<Test />);
 
-    expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
-
     const closeButton = screen.getByText('Close');
     await user.click(closeButton);
 
diff --git a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx
index 1c1692957a..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<HTMLSpanElement | null>(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: !keepMounted && !mounted,
       }),
-    [keepMounted, mounted],
+    [],
   );
 
   useAfterExitAnimation({
diff --git a/packages/react/src/radio/indicator/RadioIndicator.test.tsx b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
index c775fb021d..24cf7e0903 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.test.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
@@ -19,45 +19,6 @@ describe('<Radio.Indicator />', () => {
     },
   }));
 
-  it('should remove the indicator when there is no exit animation defined', async ({ skip }) => {
-    if (isJSDOM) {
-      skip();
-    }
-
-    function Test() {
-      const [value, setValue] = React.useState('a');
-      return (
-        <div>
-          <button onClick={() => setValue('b')}>Close</button>
-          <RadioGroup value={value}>
-            <Radio.Root value="a">
-              <Radio.Indicator
-                className="animation-test-indicator"
-                keepMounted
-                data-testid="indicator-a"
-              />
-            </Radio.Root>
-            <Radio.Root value="a">
-              <Radio.Indicator className="animation-test-indicator" keepMounted />
-            </Radio.Root>
-          </RadioGroup>
-        </div>
-      );
-    }
-
-    const { user } = await render(<Test />);
-
-    expect(screen.getByTestId('indicator-a')).not.to.have.attribute('hidden');
-
-    const closeButton = screen.getByText('Close');
-
-    await user.click(closeButton);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('indicator-a')).not.to.have.attribute('hidden');
-    });
-  });
-
   it('should remove the indicator when the animation finishes', async ({ skip }) => {
     if (isJSDOM) {
       skip();
@@ -109,8 +70,6 @@ describe('<Radio.Indicator />', () => {
 
     const { user } = await render(<Test />);
 
-    expect(screen.getByTestId('indicator-a')).not.to.have.attribute('hidden');
-
     const closeButton = screen.getByText('Close');
     await user.click(closeButton);
 
diff --git a/packages/react/src/radio/indicator/RadioIndicator.tsx b/packages/react/src/radio/indicator/RadioIndicator.tsx
index 6ac47c443a..6a0c24991f 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.tsx
@@ -25,7 +25,7 @@ const RadioIndicator = React.forwardRef(function RadioIndicator(
 
   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: !keepMounted && !mounted,
-      ...otherProps,
-    },
+    extraProps: otherProps,
     customStyleHookMapping,
   });
 

From d31dcd8faf8c3bd5a7d7525f77f3fd8a48d2b7be Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Thu, 16 Jan 2025 21:39:52 +0530
Subject: [PATCH 5/8] fix: reverted unwanted file commit

---
 .../components/checkbox/demos/hero/css-modules/index.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/css-modules/index.tsx
index 93261de77e..d88825ed26 100644
--- a/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -6,11 +6,11 @@ export default function ExampleCheckbox() {
   return (
     <label className={styles.Label}>
       <Checkbox.Root defaultChecked className={styles.Checkbox}>
-        <Checkbox.Indicator keepMounted className={styles.Indicator}>
+        <Checkbox.Indicator className={styles.Indicator}>
           <CheckIcon className={styles.Icon} />
         </Checkbox.Indicator>
       </Checkbox.Root>
-      Enable notifications aa
+      Enable notifications
     </label>
   );
 }

From 2848aac72abc98eb08fdfff9b1e9332ef1e42f8a Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Mon, 20 Jan 2025 16:06:31 +0530
Subject: [PATCH 6/8] fix: modified indicator component tests to check to see
 if the component exists instead of its hidden state, set keepMounted to false
 by default for RadioIndicator like the rest of the Indicator components.

---
 .../indicator/CheckboxIndicator.test.tsx      | 31 ++++++++++++
 .../MenuCheckboxItemIndicator.test.tsx        | 38 +++++++++++++++
 .../MenuRadioItemIndicator.test.tsx           | 47 +++++++++++++++++++
 .../react/src/radio-group/RadioGroup.test.tsx |  4 +-
 .../radio/indicator/RadioIndicator.test.tsx   | 37 +++++++++++++++
 .../src/radio/indicator/RadioIndicator.tsx    |  2 +-
 6 files changed, 156 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
index 1af301b6b9..099128c4c0 100644
--- a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
+++ b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
@@ -94,6 +94,36 @@ describe('<Checkbox.Indicator />', () => {
     });
   });
 
+  it('should remove the indicator when there is no exit animation defined', async ({ skip }) => {
+    if (isJSDOM) {
+      skip();
+    }
+
+    function Test() {
+      const [checked, setChecked] = React.useState(true);
+      return (
+        <div>
+          <button onClick={() => setChecked(false)}>Close</button>
+          <Checkbox.Root checked={checked}>
+            <Checkbox.Indicator data-testid="indicator" />
+          </Checkbox.Root>
+        </div>
+      );
+    }
+
+    const { user } = await render(<Test />);
+
+    expect(screen.getByTestId('indicator')).not.to.equal(null);
+
+    const closeButton = screen.getByText('Close');
+
+    await user.click(closeButton);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('indicator')).to.equal(null);
+    });
+  });
+
   it('should remove the indicator when the animation finishes', async ({ skip }) => {
     if (isJSDOM) {
       skip();
@@ -139,6 +169,7 @@ describe('<Checkbox.Indicator />', () => {
     }
 
     const { user } = await render(<Test />);
+    expect(screen.getByTestId('indicator')).not.to.equal(null);
 
     const closeButton = screen.getByText('Close');
     await user.click(closeButton);
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 1572e9921b..c9f078aecb 100644
--- a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
+++ b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
@@ -28,6 +28,44 @@ describe('<Menu.CheckboxItemIndicator />', () => {
     },
   }));
 
+  it('should remove the indicator when there is no exit animation defined', async ({ skip }) => {
+    if (isJSDOM) {
+      skip();
+    }
+
+    function Test() {
+      const [checked, setChecked] = React.useState(true);
+      return (
+        <div>
+          <button onClick={() => setChecked(false)}>Close</button>
+          <Menu.Root open modal={false}>
+            <Menu.Portal>
+              <Menu.Positioner>
+                <Menu.Popup>
+                  <Menu.CheckboxItem checked={checked}>
+                    <Menu.CheckboxItemIndicator data-testid="indicator" />
+                  </Menu.CheckboxItem>
+                </Menu.Popup>
+              </Menu.Positioner>
+            </Menu.Portal>
+          </Menu.Root>
+        </div>
+      );
+    }
+
+    const { user } = await render(<Test />);
+
+    expect(screen.queryByTestId('indicator')).not.to.equal(null);
+
+    const closeButton = screen.getByText('Close');
+
+    await user.click(closeButton);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('indicator')).to.equal(null);
+    });
+  });
+
   it('should remove the indicator when the animation finishes', async ({ skip }) => {
     if (isJSDOM) {
       skip();
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 8cb6ce9a6b..cdd3719dd7 100644
--- a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
+++ b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
@@ -26,6 +26,51 @@ describe('<Menu.RadioItemIndicator />', () => {
     },
   }));
 
+  it('should remove the indicator when there is no exit animation defined', async ({ skip }) => {
+    if (isJSDOM) {
+      skip();
+    }
+
+    function Test() {
+      const [value, setValue] = React.useState('a');
+      return (
+        <div>
+          <button onClick={() => setValue('b')}>Close</button>
+          <Menu.Root open modal={false}>
+            <Menu.Portal>
+              <Menu.Positioner>
+                <Menu.Popup>
+                  <Menu.Popup>
+                    <Menu.RadioGroup value={value}>
+                      <Menu.RadioItem value="a">
+                        <Menu.RadioItemIndicator data-testid="indicator" />
+                      </Menu.RadioItem>
+                      <Menu.RadioItem value="b">
+                        <Menu.RadioItemIndicator keepMounted />
+                      </Menu.RadioItem>
+                    </Menu.RadioGroup>
+                  </Menu.Popup>
+                </Menu.Popup>
+              </Menu.Positioner>
+            </Menu.Portal>
+          </Menu.Root>
+        </div>
+      );
+    }
+
+    const { user } = await render(<Test />);
+
+    expect(screen.queryByTestId('indicator')).not.to.equal(null);
+
+    const closeButton = screen.getByText('Close');
+
+    await user.click(closeButton);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('indicator')).to.equal(null);
+    });
+  });
+
   it('should remove the indicator when the animation finishes', async ({ skip }) => {
     if (isJSDOM) {
       skip();
@@ -84,6 +129,8 @@ describe('<Menu.RadioItemIndicator />', () => {
 
     const { user } = await render(<Test />);
 
+    expect(screen.getByTestId('indicator')).not.to.equal(null);
+
     const closeButton = screen.getByText('Close');
     await user.click(closeButton);
 
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('<RadioGroup />', () => {
       render(
         <RadioGroup>
           <Radio.Root value="a" data-testid="a">
-            <Radio.Indicator data-testid="indicator-a" />
+            <Radio.Indicator keepMounted data-testid="indicator-a" />
           </Radio.Root>
           <Radio.Root value="b" data-testid="b">
-            <Radio.Indicator data-testid="indicator-b" />
+            <Radio.Indicator keepMounted data-testid="indicator-b" />
           </Radio.Root>
         </RadioGroup>,
       );
diff --git a/packages/react/src/radio/indicator/RadioIndicator.test.tsx b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
index 24cf7e0903..2daffb54fb 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.test.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
@@ -19,6 +19,41 @@ describe('<Radio.Indicator />', () => {
     },
   }));
 
+  it('should remove the indicator when there is no exit animation defined', async ({ skip }) => {
+    if (isJSDOM) {
+      skip();
+    }
+
+    function Test() {
+      const [value, setValue] = React.useState('a');
+      return (
+        <div>
+          <button onClick={() => setValue('b')}>Close</button>
+          <RadioGroup value={value}>
+            <Radio.Root value="a">
+              <Radio.Indicator className="animation-test-indicator" data-testid="indicator-a" />
+            </Radio.Root>
+            <Radio.Root value="a">
+              <Radio.Indicator className="animation-test-indicator" />
+            </Radio.Root>
+          </RadioGroup>
+        </div>
+      );
+    }
+
+    const { user } = await render(<Test />);
+
+    expect(screen.getByTestId('indicator-a')).not.to.equal(null);
+
+    const closeButton = screen.getByText('Close');
+
+    await user.click(closeButton);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('indicator-a')).to.equal(null);
+    });
+  });
+
   it('should remove the indicator when the animation finishes', async ({ skip }) => {
     if (isJSDOM) {
       skip();
@@ -70,6 +105,8 @@ describe('<Radio.Indicator />', () => {
 
     const { user } = await render(<Test />);
 
+    expect(screen.getByTestId('indicator-a')).not.to.equal(null);
+
     const closeButton = screen.getByText('Close');
     await user.click(closeButton);
 
diff --git a/packages/react/src/radio/indicator/RadioIndicator.tsx b/packages/react/src/radio/indicator/RadioIndicator.tsx
index 6a0c24991f..33fc256130 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.tsx
@@ -19,7 +19,7 @@ const RadioIndicator = React.forwardRef(function RadioIndicator(
   props: RadioIndicator.Props,
   forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
-  const { render, className, keepMounted = true, ...otherProps } = props;
+  const { render, className, keepMounted = false, ...otherProps } = props;
 
   const rootState = useRadioRootContext();
 

From e952ad1acaa8aae7205b39acc1499425a4714220 Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Mon, 20 Jan 2025 16:14:28 +0530
Subject: [PATCH 7/8] fix: updated JSDoc for previous change

---
 docs/reference/generated/radio-indicator.json         | 2 +-
 packages/react/src/radio/indicator/RadioIndicator.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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/radio/indicator/RadioIndicator.tsx b/packages/react/src/radio/indicator/RadioIndicator.tsx
index 33fc256130..328e65ffb7 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.tsx
@@ -97,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,
   /**

From ed69f33dc168bd770d69b8403e24d9c4770be820 Mon Sep 17 00:00:00 2001
From: onehanddev <hakimuddinhh@gmail.com>
Date: Tue, 21 Jan 2025 17:37:58 +0530
Subject: [PATCH 8/8] fix: jsdoc

---
 packages/react/src/radio/indicator/RadioIndicator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/radio/indicator/RadioIndicator.tsx b/packages/react/src/radio/indicator/RadioIndicator.tsx
index 328e65ffb7..6624526904 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.tsx
@@ -67,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;
   }