From 33490ebc3d5d6c4cab3a653c7aedb07685da588c Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Fri, 13 Dec 2024 16:12:01 +0700
Subject: [PATCH] [docs] Update `react-number-format` demo to use the
 recommended prop (#44743)

---
 .../components/text-fields/FormattedInputs.js | 44 +++----------------
 .../text-fields/FormattedInputs.tsx           | 41 +++--------------
 2 files changed, 13 insertions(+), 72 deletions(-)

diff --git a/docs/data/material/components/text-fields/FormattedInputs.js b/docs/data/material/components/text-fields/FormattedInputs.js
index 41fa0dc890b3f3..ec38e31c7675b5 100644
--- a/docs/data/material/components/text-fields/FormattedInputs.js
+++ b/docs/data/material/components/text-fields/FormattedInputs.js
@@ -29,35 +29,6 @@ TextMaskCustom.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
-const NumericFormatCustom = React.forwardRef(
-  function NumericFormatCustom(props, ref) {
-    const { onChange, ...other } = props;
-
-    return (
-      <NumericFormat
-        {...other}
-        getInputRef={ref}
-        onValueChange={(values) => {
-          onChange({
-            target: {
-              name: props.name,
-              value: values.value,
-            },
-          });
-        }}
-        thousandSeparator
-        valueIsNumericString
-        prefix="$"
-      />
-    );
-  },
-);
-
-NumericFormatCustom.propTypes = {
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
 export default function FormattedInputs() {
   const [values, setValues] = React.useState({
     textmask: '(100) 000-0000',
@@ -83,18 +54,15 @@ export default function FormattedInputs() {
           inputComponent={TextMaskCustom}
         />
       </FormControl>
-      <TextField
-        label="react-number-format"
+      <NumericFormat
         value={values.numberformat}
         onChange={handleChange}
-        name="numberformat"
-        id="formatted-numberformat-input"
-        slotProps={{
-          input: {
-            inputComponent: NumericFormatCustom,
-          },
-        }}
+        customInput={TextField}
+        thousandSeparator
+        valueIsNumericString
+        prefix="$"
         variant="standard"
+        label="react-number-format"
       />
     </Stack>
   );
diff --git a/docs/data/material/components/text-fields/FormattedInputs.tsx b/docs/data/material/components/text-fields/FormattedInputs.tsx
index 86bc31d4208c5f..21ff7f5172e530 100644
--- a/docs/data/material/components/text-fields/FormattedInputs.tsx
+++ b/docs/data/material/components/text-fields/FormattedInputs.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IMaskInput } from 'react-imask';
-import { NumericFormat, NumericFormatProps } from 'react-number-format';
+import { NumericFormat } from 'react-number-format';
 import Stack from '@mui/material/Stack';
 import Input from '@mui/material/Input';
 import InputLabel from '@mui/material/InputLabel';
@@ -30,30 +30,6 @@ const TextMaskCustom = React.forwardRef<HTMLInputElement, CustomProps>(
   },
 );
 
-const NumericFormatCustom = React.forwardRef<NumericFormatProps, CustomProps>(
-  function NumericFormatCustom(props, ref) {
-    const { onChange, ...other } = props;
-
-    return (
-      <NumericFormat
-        {...other}
-        getInputRef={ref}
-        onValueChange={(values) => {
-          onChange({
-            target: {
-              name: props.name,
-              value: values.value,
-            },
-          });
-        }}
-        thousandSeparator
-        valueIsNumericString
-        prefix="$"
-      />
-    );
-  },
-);
-
 export default function FormattedInputs() {
   const [values, setValues] = React.useState({
     textmask: '(100) 000-0000',
@@ -79,18 +55,15 @@ export default function FormattedInputs() {
           inputComponent={TextMaskCustom as any}
         />
       </FormControl>
-      <TextField
-        label="react-number-format"
+      <NumericFormat
         value={values.numberformat}
         onChange={handleChange}
-        name="numberformat"
-        id="formatted-numberformat-input"
-        slotProps={{
-          input: {
-            inputComponent: NumericFormatCustom as any,
-          },
-        }}
+        customInput={TextField}
+        thousandSeparator
+        valueIsNumericString
+        prefix="$"
         variant="standard"
+        label="react-number-format"
       />
     </Stack>
   );