Update

docs/pages/base-ui/api/radio-group-indicator.json

@@ -1,7 +1,6 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "RadioGroupIndicator",

docs/pages/base-ui/api/radio-group-item.json

@@ -1,6 +1,6 @@
 {
   "props": {
-    "value": { "type": { "name": "string" }, "required": true },
+    "value": { "type": { "name": "any" }, "required": true },
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "readOnly": { "type": { "name": "bool" }, "default": "false" },

docs/pages/base-ui/api/radio-group-root.json

@@ -1,14 +1,14 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "defaultValue": { "type": { "name": "string" } },
+    "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "name": { "type": { "name": "string" } },
     "onValueChange": { "type": { "name": "func" } },
     "readOnly": { "type": { "name": "bool" }, "default": "false" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
     "required": { "type": { "name": "bool" }, "default": "false" },
-    "value": { "type": { "name": "string" } }
+    "value": { "type": { "name": "any" } }
   },
   "name": "RadioGroupRoot",
   "imports": [

docs/translations/api-docs/radio-group-indicator/radio-group-indicator.json

@@ -4,9 +4,6 @@
     "className": {
       "description": "Class names applied to the element or a function that returns them based on the component's state."
     },
-    "keepMounted": {
-      "description": "If <code>true</code>, the indicator stays mounted when unchecked. Useful for CSS animations."
-    },
     "render": { "description": "A function to customize rendering of the component." }
   },
   "classDescriptions": {}

packages/mui-base/src/RadioGroup/Indicator/RadioGroupIndicator.tsx

@@ -12,7 +12,7 @@ import type {
 const customStyleHookMapping: CustomStyleHookMapping<RadioGroupIndicatorOwnerState> = {
   checked(value) {
     return {
-      'data-state': value ? 'checked' : 'unchecked',
+      'data-radio-group': value ? 'checked' : 'unchecked',
     };
   },
 };
@@ -21,7 +21,7 @@ const RadioGroupIndicator = React.forwardRef(function RadioGroupIndicator(
   props: RadioGroupIndicatorProps,
   forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
-  const { render, className, keepMounted = false, ...otherProps } = props;
+  const { render, className, ...otherProps } = props;
 
   const { disabled, checked, required, readOnly } = useRadioGroupItemContext();
 
@@ -44,10 +44,6 @@ const RadioGroupIndicator = React.forwardRef(function RadioGroupIndicator(
     customStyleHookMapping,
   });
 
-  if (!keepMounted && !ownerState.checked) {
-    return null;
-  }
-
   return renderElement();
 });
 
@@ -64,11 +60,6 @@ RadioGroupIndicator.propTypes /* remove-proptypes */ = {
    * Class names applied to the element or a function that returns them based on the component's state.
    */
   className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  /**
-   * If `true`, the indicator stays mounted when unchecked. Useful for CSS animations.
-   * @default false
-   */
-  keepMounted: PropTypes.bool,
   /**
    * A function to customize rendering of the component.
    */

packages/mui-base/src/RadioGroup/Indicator/RadioGroupIndicator.types.ts

@@ -6,10 +6,4 @@ export type RadioGroupIndicatorOwnerState = {
 };
 
 export interface RadioGroupIndicatorProps
-  extends BaseUIComponentProps<'span', RadioGroupIndicatorOwnerState> {
-  /**
-   * If `true`, the indicator stays mounted when unchecked. Useful for CSS animations.
-   * @default false
-   */
-  keepMounted?: boolean;
-}
+  extends BaseUIComponentProps<'span', RadioGroupIndicatorOwnerState> {}

packages/mui-base/src/RadioGroup/Item/RadioGroupItem.tsx

@@ -12,7 +12,7 @@ import { RadioGroupItemContext, type RadioGroupItemContextValue } from './RadioG
 const customStyleHookMapping: CustomStyleHookMapping<RadioGroupItemOwnerState> = {
   checked(value) {
     return {
-      'data-state': value ? 'checked' : 'unchecked',
+      'data-radio-group': value ? 'checked' : 'unchecked',
     };
   },
 };
@@ -119,7 +119,7 @@ RadioGroupItem.propTypes /* remove-proptypes */ = {
   /**
    * The unique identifying value of the radio button in the group.
    */
-  value: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
 } as any;
 
 export { RadioGroupItem };

packages/mui-base/src/RadioGroup/Item/RadioGroupItem.types.ts

@@ -6,11 +6,11 @@ export type RadioGroupItemOwnerState = {
 };
 
 export interface RadioGroupItemProps
-  extends Omit<BaseUIComponentProps<'button', RadioGroupItemOwnerState>, 'name'> {
+  extends Omit<BaseUIComponentProps<'button', RadioGroupItemOwnerState>, 'name' | 'value'> {
   /**
    * The unique identifying value of the radio button in the group.
    */
-  value: string;
+  value: unknown;
   /**
    * Determines if the item is disabled.
    * @default false

packages/mui-base/src/RadioGroup/Item/useRadioGroupItem.ts

@@ -5,7 +5,7 @@ import { visuallyHidden } from '../../utils/visuallyHidden';
 import { useRadioGroupRootContext } from '../Root/RadioGroupRootContext';
 
 interface UseRadioGroupItemParameters {
-  value: string;
+  value: unknown;
   disabled?: boolean;
   readOnly?: boolean;
   required?: boolean;

packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.tsx

@@ -86,7 +86,7 @@ RadioGroupRoot.propTypes /* remove-proptypes */ = {
   /**
    * The default value of the selected radio button. Use when uncontrolled.
    */
-  defaultValue: PropTypes.string,
+  defaultValue: PropTypes.any,
   /**
    * Determines if the radio group is disabled.
    * @default false
@@ -117,7 +117,7 @@ RadioGroupRoot.propTypes /* remove-proptypes */ = {
   /**
    * The value of the selected radio button. Use when controlled.
    */
-  value: PropTypes.string,
+  value: PropTypes.any,
 } as any;
 
 export { RadioGroupRoot };

packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.types.ts

@@ -5,7 +5,8 @@ export type RadioGroupRootOwnerState = {
   readOnly: boolean | undefined;
 };
 
-export interface RadioGroupRootProps extends BaseUIComponentProps<'div', RadioGroupRootOwnerState> {
+export interface RadioGroupRootProps
+  extends Omit<BaseUIComponentProps<'div', RadioGroupRootOwnerState>, 'value' | 'defaultValue'> {
   /**
    * Determines if the radio group is disabled.
    * @default false
@@ -28,13 +29,13 @@ export interface RadioGroupRootProps extends BaseUIComponentProps<'div', RadioGr
   /**
    * The value of the selected radio button. Use when controlled.
    */
-  value?: string;
+  value?: unknown;
   /**
    * The default value of the selected radio button. Use when uncontrolled.
    */
-  defaultValue?: string;
+  defaultValue?: unknown;
   /**
    * Callback fired when the value changes.
    */
-  onValueChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+  onValueChange?: (value: unknown, event: React.ChangeEvent<HTMLInputElement>) => void;
 }

packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts

@@ -5,9 +5,9 @@ export interface RadioGroupRootContextValue {
   disabled: boolean | undefined;
   readOnly: boolean | undefined;
   required: boolean | undefined;
-  checkedItem: string | null;
-  setCheckedItem: React.Dispatch<React.SetStateAction<string | null>>;
-  onValueChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+  checkedItem: unknown;
+  setCheckedItem: React.Dispatch<React.SetStateAction<unknown>>;
+  onValueChange: (value: unknown, event: React.ChangeEvent<HTMLInputElement>) => void;
   touched: boolean;
   setTouched: React.Dispatch<React.SetStateAction<boolean>>;
 }

packages/mui-base/src/RadioGroup/Root/useRadioGroupRoot.ts

@@ -17,7 +17,7 @@ interface UseRadioGroupRootParameters {
 export function useRadioGroupRoot(params: UseRadioGroupRootParameters) {
   const { disabled, defaultValue, readOnly, value: externalValue } = params;
 
-  const [checkedItem, setCheckedItem] = useControlled<string | null>({
+  const [checkedItem, setCheckedItem] = useControlled<unknown>({
     controlled: externalValue,
     default: defaultValue,
     name: 'RadioGroup',