[progress] Show runtime errors only once

packages/mui-material/src/CircularProgress/CircularProgress.js

@@ -13,6 +13,14 @@ import { getCircularProgressUtilityClass } from './circularProgressClasses';
 
 const SIZE = 44;
 
+let warnedMinMaxWithoutVariant = false;
+let warnedInvalidMinMaxValue = false;
+
+export function resetWarningFlags() {
+  warnedMinMaxWithoutVariant = false;
+  warnedInvalidMinMaxValue = false;
+}
+
 const circularRotateKeyframe = keyframes`
   0% {
     transform: rotate(0deg);
@@ -198,10 +206,15 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
   } = props;
 
   if (process.env.NODE_ENV !== 'production') {
-    if (variant === 'indeterminate' && (minProp !== undefined || maxProp !== undefined)) {
+    if (
+      !warnedMinMaxWithoutVariant &&
+      variant === 'indeterminate' &&
+      (minProp !== undefined || maxProp !== undefined)
+    ) {
       console.warn(
         `MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' variant. These props will have no effect.`,
       );
+      warnedMinMaxWithoutVariant = true;
     }
   }
 
@@ -229,10 +242,11 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
     const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
 
     if (process.env.NODE_ENV !== 'production') {
-      if (value < min || value > max || min >= max) {
+      if (!warnedInvalidMinMaxValue && (value < min || value > max || min >= max)) {
         console.error(
           `MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`,
         );
+        warnedInvalidMinMaxValue = true;
       }
     }
 

packages/mui-material/src/CircularProgress/CircularProgress.test.js

@@ -1,12 +1,9 @@
 import { expect } from 'chai';
-import {
-  createRenderer,
-  strictModeDoubleLoggingSuppressed,
-  screen,
-} from '@mui/internal-test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import CircularProgress, {
   circularProgressClasses as classes,
 } from '@mui/material/CircularProgress';
+import { resetWarningFlags } from './CircularProgress';
 import describeConformance from '../../test/describeConformance';
 
 describe('<CircularProgress />', () => {
@@ -224,45 +221,31 @@ describe('<CircularProgress />', () => {
       errorSpy.mockRestore();
     });
 
-    it('should error if min, max, and value props are invalid', () => {
-      expect(() => {
-        render(<CircularProgress variant="determinate" value={5} min={10} max={0} />);
-      }).toErrorDev([
-        'MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=10, max=0, value=5.',
-        !strictModeDoubleLoggingSuppressed &&
-          'MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=10, max=0, value=5.',
-      ]);
-      expect(() => {
-        render(<CircularProgress variant="determinate" value={15} min={10} max={10} />);
-      }).toErrorDev([
-        'MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=10, max=10, value=15.',
-        !strictModeDoubleLoggingSuppressed &&
-          'MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=10, max=10, value=15.',
-      ]);
-      expect(() => {
-        render(<CircularProgress variant="determinate" value={5} min={10} max={20} />);
-      }).toErrorDev([
-        'MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=10, max=20, value=5.',
-        !strictModeDoubleLoggingSuppressed &&
-          'MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=10, max=20, value=5.',
-      ]);
-      expect(() => {
-        render(<CircularProgress variant="determinate" value={25} min={10} max={20} />);
-      }).toErrorDev([
-        'MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=10, max=20, value=25.',
-        !strictModeDoubleLoggingSuppressed &&
-          'MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=10, max=20, value=25.',
-      ]);
-    });
-
-    it('should warn if min and max props are provided with an indeterminate variant', () => {
-      expect(() => {
-        render(<CircularProgress variant="indeterminate" min={0} max={10} />);
-      }).toWarnDev([
-        "MUI: You have provided the `min` or `max` props with an 'indeterminate' variant. These props will have no effect.",
-        !strictModeDoubleLoggingSuppressed &&
+    describe('warnings and errors', () => {
+      beforeEach(() => {
+        resetWarningFlags();
+      });
+
+      it.each([
+        { value: 5, min: 10, max: 0 },
+        { value: 15, min: 10, max: 10 },
+        { value: 5, min: 10, max: 20 },
+        { value: 25, min: 10, max: 20 },
+      ])('should error if min=$min, max=$max, value=$value are invalid', ({ value, min, max }) => {
+        expect(() => {
+          render(<CircularProgress variant="determinate" value={value} min={min} max={max} />);
+        }).toErrorDev([
+          `MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`,
+        ]);
+      });
+
+      it('should warn if min and max props are provided with an indeterminate variant', () => {
+        expect(() => {
+          render(<CircularProgress variant="indeterminate" min={0} max={10} />);
+        }).toWarnDev([
           "MUI: You have provided the `min` or `max` props with an 'indeterminate' variant. These props will have no effect.",
-      ]);
+        ]);
+      });
     });
   });
 });

packages/mui-material/src/LinearProgress/LinearProgress.js

@@ -12,6 +12,20 @@ import capitalize from '../utils/capitalize';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
 
 const TRANSITION_DURATION = 4; // seconds
+
+let warnedMinMaxWithoutVariant = false;
+let warnedInvalidMinMaxValue = false;
+let warnedValueRequired = false;
+let warnedInvalidMinMaxValueBuffer = false;
+let warnedValueBufferRequired = false;
+
+export function resetWarningFlags() {
+  warnedMinMaxWithoutVariant = false;
+  warnedInvalidMinMaxValue = false;
+  warnedValueRequired = false;
+  warnedInvalidMinMaxValueBuffer = false;
+  warnedValueBufferRequired = false;
+}
 const indeterminate1Keyframe = keyframes`
   0% {
     left: -35%;
@@ -372,12 +386,14 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
 
   if (process.env.NODE_ENV !== 'production') {
     if (
+      !warnedMinMaxWithoutVariant &&
       ['indeterminate', 'query'].includes(variant) &&
       (minProp !== undefined || maxProp !== undefined)
     ) {
       console.warn(
         `MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' or 'query' variant. These props will have no effect.`,
       );
+      warnedMinMaxWithoutVariant = true;
     }
   }
 
@@ -393,10 +409,11 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
   if (variant === 'determinate' || variant === 'buffer') {
     if (value !== undefined) {
       if (process.env.NODE_ENV !== 'production') {
-        if (value < min || value > max || min >= max) {
+        if (!warnedInvalidMinMaxValue && (value < min || value > max || min >= max)) {
           console.error(
             `MUI: The min, max, and value props in LinearProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`,
           );
+          warnedInvalidMinMaxValue = true;
         }
       }
 
@@ -411,19 +428,25 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
       rootProps['aria-valuemin'] = min;
       rootProps['aria-valuemax'] = max;
     } else if (process.env.NODE_ENV !== 'production') {
-      console.error(
-        'MUI: You need to provide a value prop ' +
-          'when using the determinate or buffer variant of LinearProgress.',
-      );
+      if (!warnedValueRequired) {
+        console.error(
+          'MUI: You need to provide a value prop when using the determinate or buffer variant of LinearProgress.',
+        );
+        warnedValueRequired = true;
+      }
     }
   }
   if (variant === 'buffer') {
     if (valueBuffer !== undefined) {
       if (process.env.NODE_ENV !== 'production') {
-        if (valueBuffer < min || valueBuffer > max || valueBuffer < value || min >= max) {
+        if (
+          !warnedInvalidMinMaxValueBuffer &&
+          (valueBuffer < min || valueBuffer > max || valueBuffer < value || min >= max)
+        ) {
           console.error(
             `MUI: The min, max, value, and valueBuffer props in LinearProgress should be numbers where min < max and min <= value <= valueBuffer <= max. Received min=${min}, max=${max}, value=${value}, valueBuffer=${valueBuffer}.`,
           );
+          warnedInvalidMinMaxValueBuffer = true;
         }
       }
 
@@ -434,10 +457,12 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
       }
       inlineStyles.bar2.transform = range > 0 ? `translateX(${transform}%)` : 'translateX(-100%)'; // empty-state fallback when range is invalid
     } else if (process.env.NODE_ENV !== 'production') {
-      console.error(
-        'MUI: You need to provide a valueBuffer prop ' +
-          'when using the buffer variant of LinearProgress.',
-      );
+      if (!warnedValueBufferRequired) {
+        console.error(
+          'MUI: You need to provide a valueBuffer prop when using the buffer variant of LinearProgress.',
+        );
+        warnedValueBufferRequired = true;
+      }
     }
   }