Use useRenderElement

mj12albert · mj12albert · commit 00001fbe4962 · 2025-04-14T16:17:16.000+08:00
diff --git a/packages/react/src/progress/indicator/ProgressIndicator.tsx b/packages/react/src/progress/indicator/ProgressIndicator.tsx
@@ -1,8 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps } from '../../merge-props';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useRenderElement } from '../../utils/useRenderElement';
 import { valueToPercent } from '../../utils/valueToPercent';
 import type { ProgressRoot } from '../root/ProgressRoot';
 import { useProgressRootContext } from '../root/ProgressRootContext';
@@ -19,7 +18,7 @@ const ProgressIndicator = React.forwardRef(function ProgressIndicator(
   props: ProgressIndicator.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { render, className, ...otherProps } = props;
+  const { render, className, ...elementProps } = props;
 
   const { max, min, value, state } = useProgressRootContext();
 
@@ -38,17 +37,15 @@ const ProgressIndicator = React.forwardRef(function ProgressIndicator(
     };
   }, [percentageValue]);
 
-  const { renderElement } = useComponentRenderer({
-    render: render ?? 'div',
+  const renderElement = useRenderElement('div', props, {
     state,
-    className,
     ref: forwardedRef,
-    extraProps: mergeProps<'div'>(
+    props: [
       {
         style: getStyles(),
       },
-      otherProps,
-    ),
+      elementProps,
+    ],
     customStyleHookMapping: progressStyleHookMapping,
   });
 
diff --git a/packages/react/src/progress/label/ProgressLabel.tsx b/packages/react/src/progress/label/ProgressLabel.tsx
@@ -1,9 +1,8 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps } from '../../merge-props';
 import { useBaseUiId } from '../../utils/useBaseUiId';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useRenderElement } from '../../utils/useRenderElement';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useProgressRootContext } from '../root/ProgressRootContext';
 import { progressStyleHookMapping } from '../root/styleHooks';
@@ -20,7 +19,7 @@ const ProgressLabel = React.forwardRef(function ProgressLabel(
   props: ProgressLabel.Props,
   forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
-  const { render, className, id: idProp, ...otherProps } = props;
+  const { render, className, id: idProp, ...elementProps } = props;
 
   const id = useBaseUiId(idProp);
 
@@ -31,12 +30,15 @@ const ProgressLabel = React.forwardRef(function ProgressLabel(
     return () => setLabelId(undefined);
   }, [id, setLabelId]);
 
-  const { renderElement } = useComponentRenderer({
-    render: render ?? 'span',
+  const renderElement = useRenderElement('span', props, {
     state,
-    className,
     ref: forwardedRef,
-    extraProps: mergeProps<'span'>({ id }, otherProps),
+    props: [
+      {
+        id,
+      },
+      elementProps,
+    ],
     customStyleHookMapping: progressStyleHookMapping,
   });
 
diff --git a/packages/react/src/progress/root/ProgressRoot.tsx b/packages/react/src/progress/root/ProgressRoot.tsx
@@ -2,8 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { formatNumber } from '../../utils/formatNumber';
-import { mergeProps } from '../../merge-props';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useRenderElement } from '../../utils/useRenderElement';
 import { useLatestRef } from '../../utils/useLatestRef';
 import { ProgressRootContext } from './ProgressRootContext';
 import { progressStyleHookMapping } from './styleHooks';
@@ -52,7 +51,7 @@ const ProgressRoot = React.forwardRef(function ProgressRoot(
     value,
     render,
     className,
-    ...otherProps
+    ...elementProps
   } = props;
 
   const [labelId, setLabelId] = React.useState<string | undefined>();
@@ -85,31 +84,22 @@ const ProgressRoot = React.forwardRef(function ProgressRoot(
     [formattedValue, max, min, setLabelId, state, status, value],
   );
 
-  const propGetter = React.useCallback(
-    (externalProps = {}) =>
-      mergeProps<'div'>(
-        {
-          'aria-labelledby': labelId,
-          'aria-valuemax': max,
-          'aria-valuemin': min,
-          'aria-valuenow': value ?? undefined,
-          'aria-valuetext': getAriaValueText
-            ? getAriaValueText(formattedValue, value)
-            : (otherProps['aria-valuetext'] ?? getDefaultAriaValueText(formattedValue, value)),
-          role: 'progressbar',
-        },
-        otherProps,
-        externalProps,
-      ),
-    [formattedValue, getAriaValueText, labelId, max, min, otherProps, value],
-  );
-
-  const { renderElement } = useComponentRenderer({
-    propGetter,
-    render: render ?? 'div',
+  const renderElement = useRenderElement('div', props, {
     state,
-    className,
     ref: forwardedRef,
+    props: [
+      {
+        'aria-labelledby': labelId,
+        'aria-valuemax': max,
+        'aria-valuemin': min,
+        'aria-valuenow': value ?? undefined,
+        'aria-valuetext': getAriaValueText
+          ? getAriaValueText(formattedValue, value)
+          : (props['aria-valuetext'] ?? getDefaultAriaValueText(formattedValue, value)),
+        role: 'progressbar',
+      },
+      elementProps,
+    ],
     customStyleHookMapping: progressStyleHookMapping,
   });
 
diff --git a/packages/react/src/progress/track/ProgressTrack.tsx b/packages/react/src/progress/track/ProgressTrack.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useRenderElement } from '../../utils/useRenderElement';
 import { useProgressRootContext } from '../root/ProgressRootContext';
 import { progressStyleHookMapping } from '../root/styleHooks';
 import type { ProgressRoot } from '../root/ProgressRoot';
@@ -17,16 +17,14 @@ const ProgressTrack = React.forwardRef(function ProgressTrack(
   props: ProgressTrack.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { render, className, ...otherProps } = props;
+  const { render, className, ...elementProps } = props;
 
   const { state } = useProgressRootContext();
 
-  const { renderElement } = useComponentRenderer({
-    render: render ?? 'div',
+  const renderElement = useRenderElement('div', props, {
     state,
-    className,
     ref: forwardedRef,
-    extraProps: otherProps,
+    props: elementProps,
     customStyleHookMapping: progressStyleHookMapping,
   });
 
diff --git a/packages/react/src/progress/value/ProgressValue.tsx b/packages/react/src/progress/value/ProgressValue.tsx
@@ -1,9 +1,8 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps } from '../../merge-props';
 import type { BaseUIComponentProps } from '../../utils/types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useRenderElement } from '../../utils/useRenderElement';
 import { useProgressRootContext } from '../root/ProgressRootContext';
 import type { ProgressRoot } from '../root/ProgressRoot';
 import { progressStyleHookMapping } from '../root/styleHooks';
@@ -17,35 +16,26 @@ const ProgressValue = React.forwardRef(function ProgressValue(
   props: ProgressValue.Props,
   forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
-  const { className, render, children, ...otherProps } = props;
+  const { className, render, children, ...elementProps } = props;
 
   const { value, formattedValue, state } = useProgressRootContext();
 
-  const getValueProps = React.useCallback(
-    (externalProps = {}) => {
-      const formattedValueArg = value == null ? 'indeterminate' : formattedValue;
-      const formattedValueDisplay = value == null ? null : formattedValue;
-      return mergeProps(
-        {
-          'aria-hidden': true,
-          children:
-            typeof children === 'function'
-              ? children(formattedValueArg, value)
-              : formattedValueDisplay,
-        },
-        externalProps,
-      );
-    },
-    [children, value, formattedValue],
-  );
+  const formattedValueArg = value == null ? 'indeterminate' : formattedValue;
+  const formattedValueDisplay = value == null ? null : formattedValue;
 
-  const { renderElement } = useComponentRenderer({
-    propGetter: getValueProps,
-    render: render ?? 'span',
-    className,
+  const renderElement = useRenderElement('span', props, {
     state,
     ref: forwardedRef,
-    extraProps: otherProps,
+    props: [
+      {
+        'aria-hidden': true,
+        children:
+          typeof children === 'function'
+            ? children(formattedValueArg, value)
+            : formattedValueDisplay,
+      },
+      elementProps,
+    ],
     customStyleHookMapping: progressStyleHookMapping,
   });
 
diff --git a/packages/react/src/utils/useRenderElement.tsx b/packages/react/src/utils/useRenderElement.tsx
@@ -113,7 +113,7 @@ export namespace useRenderElement {
     /**
      * The render prop or React element to override the default element.
      */
-    render:
+    render?:
       | undefined
       | ComponentRenderFn<React.HTMLAttributes<any>, State>
       | React.ReactElement<Record<string, unknown>>;
