tweak

mj12albert · Jan 27, 2025 · 2b9733b · 2b9733b
1 parent 43563c3
commit 2b9733b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/packages/react/src/progress/root/useProgressRoot.ts b/packages/react/src/progress/root/useProgressRoot.ts
@@ -150,7 +150,7 @@ namespace useProgressRoot {
     /**
      * Formatted value of the component.
      */
-    formattedValue: string | null;
+    formattedValue: string;
     status: ProgressStatus;
   }
 }

diff --git a/packages/react/src/progress/value/ProgressValue.test.tsx b/packages/react/src/progress/value/ProgressValue.test.tsx
@@ -58,22 +58,39 @@ describe('<Progress.Value />', () => {
       expect(value).to.have.text(formatValue(30));
     });
 
-    it('accepts a render function', async () => {
-      const renderSpy = spy();
-      const format: Intl.NumberFormatOptions = {
-        style: 'currency',
-        currency: 'USD',
-      };
-      function formatValue(v: number) {
-        return new Intl.NumberFormat(undefined, format).format(v);
-      }
-      await render(
-        <Progress.Root value={30} format={format}>
-          <Progress.Value data-testid="value">{renderSpy}</Progress.Value>
-        </Progress.Root>,
-      );
-      expect(renderSpy.lastCall.args[0]).to.deep.equal(formatValue(30));
-      expect(renderSpy.lastCall.args[1]).to.deep.equal(30);
+    describe('it accepts a render function', () => {
+      it('numerical value', async () => {
+        const renderSpy = spy();
+        const format: Intl.NumberFormatOptions = {
+          style: 'currency',
+          currency: 'USD',
+        };
+        function formatValue(v: number) {
+          return new Intl.NumberFormat(undefined, format).format(v);
+        }
+        await render(
+          <Progress.Root value={30} format={format}>
+            <Progress.Value data-testid="value">{renderSpy}</Progress.Value>
+          </Progress.Root>,
+        );
+        expect(renderSpy.lastCall.args[0]).to.deep.equal(formatValue(30));
+        expect(renderSpy.lastCall.args[1]).to.deep.equal(30);
+      });
+
+      it('indeterminate value', async () => {
+        const renderSpy = spy();
+        const format: Intl.NumberFormatOptions = {
+          style: 'currency',
+          currency: 'USD',
+        };
+        await render(
+          <Progress.Root value={null} format={format}>
+            <Progress.Value data-testid="value">{renderSpy}</Progress.Value>
+          </Progress.Root>,
+        );
+        expect(renderSpy.lastCall.args[0]).to.deep.equal('indeterminate');
+        expect(renderSpy.lastCall.args[1]).to.deep.equal(null);
+      });
     });
   });
 });
diff --git a/packages/react/src/progress/value/ProgressValue.tsx b/packages/react/src/progress/value/ProgressValue.tsx
@@ -6,8 +6,9 @@ import type { BaseUIComponentProps } from '../../utils/types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useProgressRootContext } from '../root/ProgressRootContext';
 import type { ProgressRoot } from '../root/ProgressRoot';
+import { progressStyleHookMapping } from '../root/styleHooks';
 /**
- * A text element displaying the current value.
+ * A text label displaying the current value.
  * Renders a `<span>` element.
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
@@ -21,14 +22,17 @@ const ProgressValue = React.forwardRef(function ProgressValue(
   const { value, formattedValue, state } = useProgressRootContext();
 
   const getValueProps = React.useCallback(
-    (externalProps = {}) =>
-      mergeReactProps(externalProps, {
+    (externalProps = {}) => {
+      const formattedValueArg = value == null ? 'indeterminate' : formattedValue;
+      const formattedValueDisplay = value == null ? null : formattedValue;
+      return mergeReactProps(externalProps, {
         'aria-hidden': true,
         children:
           typeof children === 'function'
-            ? children(formattedValue, value)
-            : ((formattedValue || value) ?? ''),
-      }),
+            ? children(formattedValueArg, value)
+            : formattedValueDisplay,
+      });
+    },
     [children, value, formattedValue],
   );
 
@@ -39,6 +43,7 @@ const ProgressValue = React.forwardRef(function ProgressValue(
     state,
     ref: forwardedRef,
     extraProps: otherProps,
+    customStyleHookMapping: progressStyleHookMapping,
   });
 
   return renderElement();