[joy-ui][Input] Add debounce input demo

docs/data/joy/components/input/DebouncedInput.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Input from '@mui/joy/Input';
+import Typography from '@mui/joy/Typography';
+import Box from '@mui/joy/Box';
+
+function DebounceInput(props) {
+  const { handleDebounce, debounceTimeout, ...rest } = props;
+
+  const timerRef = React.useRef();
+
+  const handleChange = (event) => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      handleDebounce(event.target.value);
+    }, debounceTimeout);
+  };
+
+  return <Input {...rest} onChange={handleChange} />;
+}
+
+DebounceInput.propTypes = {
+  debounceTimeout: PropTypes.number.isRequired,
+  handleDebounce: PropTypes.func.isRequired,
+};
+
+export default function DebouncedInput() {
+  const [debouncedValue, setDebouncedValue] = React.useState('');
+  const handleDebounce = (value) => {
+    setDebouncedValue(value);
+  };
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+      <DebounceInput
+        placeholder="Type in here…"
+        debounceTimeout={1000}
+        handleDebounce={handleDebounce}
+      />
+      <Typography>Debounced input: {debouncedValue}</Typography>
+    </Box>
+  );
+}

docs/data/joy/components/input/DebouncedInput.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Input, { InputProps } from '@mui/joy/Input';
+import Typography from '@mui/joy/Typography';
+import Box from '@mui/joy/Box';
+
+type DebounceProps = {
+  handleDebounce: (value: string) => void;
+  debounceTimeout: number;
+};
+
+function DebounceInput(props: InputProps & DebounceProps) {
+  const { handleDebounce, debounceTimeout, ...rest } = props;
+
+  const timerRef = React.useRef<number>();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      handleDebounce(event.target.value);
+    }, debounceTimeout);
+  };
+
+  return <Input {...rest} onChange={handleChange} />;
+}
+
+export default function DebouncedInput() {
+  const [debouncedValue, setDebouncedValue] = React.useState('');
+  const handleDebounce = (value: string) => {
+    setDebouncedValue(value);
+  };
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+      <DebounceInput
+        placeholder="Type in here…"
+        debounceTimeout={1000}
+        handleDebounce={handleDebounce}
+      />
+      <Typography>Debounced input: {debouncedValue}</Typography>
+    </Box>
+  );
+}

docs/data/joy/components/input/DebouncedInput.tsx.preview

@@ -0,0 +1,6 @@
+<DebounceInput
+  placeholder="Type in here…"
+  debounceTimeout={1000}
+  handleDebounce={handleDebounce}
+/>
+<Typography>Debounced input: {debouncedValue}</Typography>

docs/data/joy/components/input/input.md

@@ -166,6 +166,10 @@ To create a floating label input, a custom component (combination of `<input>` a
 
 {{"demo": "PasswordMeterInput.js"}}
 
+### Debounced Input
+
+{{"demo": "DebouncedInput.js"}}
+
 ### Third-party formatting
 
 The Input component can be integrated with third-party formatting libraries for more complex use cases.