From 959ede7b2e8720559e0514422efda38e24650de9 Mon Sep 17 00:00:00 2001
From: Luv Patel <luvpatel2790.svmr@gmail.com>
Date: Tue, 3 Oct 2023 09:50:28 +0530
Subject: [PATCH 01/10] added Textarea-ref in docs

---
 docs/data/joy/components/textarea/textarea.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
index 06a8652a80dacd..d903931e923aa3 100644
--- a/docs/data/joy/components/textarea/textarea.md
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -115,6 +115,20 @@ It's usually more common to see textarea components using decorators at the top
 
 {{"demo": "TextareaDecorators.js"}}
 
+### Textarea ref
+`useRef` in React is typically used to reference a DOM element or a component. In the case of form inputs like Input or TextArea in Joy UI, you can use useRef to access and interact with the underlying DOM node directly without causing re-renders.
+
+{{"demo": "TextareauseRef.js"}}
+
+Input:
+```js
+<Input slotProps={{ input: { ref } }} />
+```
+Textarea:
+```js
+<Textarea slotProps={{ input: { ref } }} />
+```
+
 ## Accessibility
 
 In order for the textarea to be accessible, **it should be linked to a label**.

From 05533d4e3bd6cc55c51b821016fa58ca020c67fa Mon Sep 17 00:00:00 2001
From: Luv Patel <luvpatel2790.svmr@gmail.com>
Date: Tue, 3 Oct 2023 17:31:44 +0530
Subject: [PATCH 02/10] Added TextareaRef.js file

---
 .../joy/components/textarea/TextareaRef.js    | 20 +++++++++++++++++++
 .../joy/components/textarea/TextareaRef.tsx   | 20 +++++++++++++++++++
 docs/data/joy/components/textarea/textarea.md |  3 ++-
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 docs/data/joy/components/textarea/TextareaRef.js
 create mode 100644 docs/data/joy/components/textarea/TextareaRef.tsx

diff --git a/docs/data/joy/components/textarea/TextareaRef.js b/docs/data/joy/components/textarea/TextareaRef.js
new file mode 100644
index 00000000000000..34109cf93cdda3
--- /dev/null
+++ b/docs/data/joy/components/textarea/TextareaRef.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+import { useRef } from 'react';
+
+export default function TextareaRef() {
+  const textareaRef = useRef(null);
+
+  const handleTextareaFocus = () => {
+    textareaRef.current.focus();
+  };
+
+  return (
+    <Box>
+      <Textarea ref={textareaRef} placeholder="Textarea" />
+      <button onClick={handleTextareaFocus}>Focus Textarea</button>
+    </Box>
+  );
+}
+
diff --git a/docs/data/joy/components/textarea/TextareaRef.tsx b/docs/data/joy/components/textarea/TextareaRef.tsx
new file mode 100644
index 00000000000000..34109cf93cdda3
--- /dev/null
+++ b/docs/data/joy/components/textarea/TextareaRef.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+import { useRef } from 'react';
+
+export default function TextareaRef() {
+  const textareaRef = useRef(null);
+
+  const handleTextareaFocus = () => {
+    textareaRef.current.focus();
+  };
+
+  return (
+    <Box>
+      <Textarea ref={textareaRef} placeholder="Textarea" />
+      <button onClick={handleTextareaFocus}>Focus Textarea</button>
+    </Box>
+  );
+}
+
diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
index d903931e923aa3..86c67c731f978e 100644
--- a/docs/data/joy/components/textarea/textarea.md
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -116,9 +116,10 @@ It's usually more common to see textarea components using decorators at the top
 {{"demo": "TextareaDecorators.js"}}
 
 ### Textarea ref
+
 `useRef` in React is typically used to reference a DOM element or a component. In the case of form inputs like Input or TextArea in Joy UI, you can use useRef to access and interact with the underlying DOM node directly without causing re-renders.
 
-{{"demo": "TextareauseRef.js"}}
+{{"demo": "TextareaRef.js"}}
 
 Input:
 ```js

From 08ec193585daaa400b4d4cbe6e39319b6861b275 Mon Sep 17 00:00:00 2001
From: Luv Patel <luvpatel2790.svmr@gmail.com>
Date: Tue, 3 Oct 2023 23:04:46 +0530
Subject: [PATCH 03/10] Made all changes the changes with the maintainer
 suggested in the docs

---
 docs/data/joy/components/textarea/TextareaRef.js  |  5 +++--
 docs/data/joy/components/textarea/TextareaRef.tsx |  6 +++---
 docs/data/joy/components/textarea/textarea.md     | 13 ++-----------
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/docs/data/joy/components/textarea/TextareaRef.js b/docs/data/joy/components/textarea/TextareaRef.js
index 34109cf93cdda3..c959611d5520cb 100644
--- a/docs/data/joy/components/textarea/TextareaRef.js
+++ b/docs/data/joy/components/textarea/TextareaRef.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
 import Textarea from '@mui/joy/Textarea';
 import { useRef } from 'react';
 
@@ -11,9 +12,9 @@ export default function TextareaRef() {
   };
 
   return (
-    <Box>
+    <Box sx={{display: 'flex', flexDirection: 'row', gap: 1}}>
       <Textarea ref={textareaRef} placeholder="Textarea" />
-      <button onClick={handleTextareaFocus}>Focus Textarea</button>
+      <Button onClick={handleTextareaFocus}>Focus Textarea</Button>
     </Box>
   );
 }
diff --git a/docs/data/joy/components/textarea/TextareaRef.tsx b/docs/data/joy/components/textarea/TextareaRef.tsx
index 34109cf93cdda3..8c31051792e7d7 100644
--- a/docs/data/joy/components/textarea/TextareaRef.tsx
+++ b/docs/data/joy/components/textarea/TextareaRef.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
 import Textarea from '@mui/joy/Textarea';
 import { useRef } from 'react';
 
@@ -11,10 +12,9 @@ export default function TextareaRef() {
   };
 
   return (
-    <Box>
+    <Box sx={{display: 'flex', flexDirection: 'row', gap: 1}}>
       <Textarea ref={textareaRef} placeholder="Textarea" />
-      <button onClick={handleTextareaFocus}>Focus Textarea</button>
+      <Button onClick={handleTextareaFocus}>Focus Textarea</Button>
     </Box>
   );
 }
-
diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
index 86c67c731f978e..dd917350d1b306 100644
--- a/docs/data/joy/components/textarea/textarea.md
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -115,21 +115,12 @@ It's usually more common to see textarea components using decorators at the top
 
 {{"demo": "TextareaDecorators.js"}}
 
-### Textarea ref
+### Using the useRef hook
 
-`useRef` in React is typically used to reference a DOM element or a component. In the case of form inputs like Input or TextArea in Joy UI, you can use useRef to access and interact with the underlying DOM node directly without causing re-renders.
+Use the [`useRef`](https://react.dev/reference/react/useRef) hook to directly access and interact with the underlying Textarea DOM node without causing re-renders.
 
 {{"demo": "TextareaRef.js"}}
 
-Input:
-```js
-<Input slotProps={{ input: { ref } }} />
-```
-Textarea:
-```js
-<Textarea slotProps={{ input: { ref } }} />
-```
-
 ## Accessibility
 
 In order for the textarea to be accessible, **it should be linked to a label**.

From 8f803b504606d5b80d8700cb751bb002d4064e3b Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 5 Oct 2023 12:56:59 +0700
Subject: [PATCH 04/10] format ts

---
 docs/data/joy/components/textarea/TextareaRef.js          | 3 +--
 docs/data/joy/components/textarea/TextareaRef.tsx.preview | 2 ++
 2 files changed, 3 insertions(+), 2 deletions(-)
 create mode 100644 docs/data/joy/components/textarea/TextareaRef.tsx.preview

diff --git a/docs/data/joy/components/textarea/TextareaRef.js b/docs/data/joy/components/textarea/TextareaRef.js
index c959611d5520cb..bd936f2ff0951d 100644
--- a/docs/data/joy/components/textarea/TextareaRef.js
+++ b/docs/data/joy/components/textarea/TextareaRef.js
@@ -12,10 +12,9 @@ export default function TextareaRef() {
   };
 
   return (
-    <Box sx={{display: 'flex', flexDirection: 'row', gap: 1}}>
+    <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
       <Textarea ref={textareaRef} placeholder="Textarea" />
       <Button onClick={handleTextareaFocus}>Focus Textarea</Button>
     </Box>
   );
 }
-
diff --git a/docs/data/joy/components/textarea/TextareaRef.tsx.preview b/docs/data/joy/components/textarea/TextareaRef.tsx.preview
new file mode 100644
index 00000000000000..7cd78f9e12d2cb
--- /dev/null
+++ b/docs/data/joy/components/textarea/TextareaRef.tsx.preview
@@ -0,0 +1,2 @@
+<Textarea ref={textareaRef} placeholder="Textarea" />
+<Button onClick={handleTextareaFocus}>Focus Textarea</Button>
\ No newline at end of file

From 6a6567b9ab236b4399ffd39a7b785f35dd33b9ad Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 9 Oct 2023 09:32:27 +0700
Subject: [PATCH 05/10] update content

---
 docs/data/joy/components/textarea/TextareaRef.js   | 12 +++++++-----
 docs/data/joy/components/textarea/TextareaRef.tsx  | 14 ++++++++------
 .../components/textarea/TextareaRef.tsx.preview    |  7 +++++--
 docs/data/joy/components/textarea/textarea.md      | 14 +++++++-------
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/docs/data/joy/components/textarea/TextareaRef.js b/docs/data/joy/components/textarea/TextareaRef.js
index bd936f2ff0951d..73a1f2eef351f9 100644
--- a/docs/data/joy/components/textarea/TextareaRef.js
+++ b/docs/data/joy/components/textarea/TextareaRef.js
@@ -2,19 +2,21 @@ import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Textarea from '@mui/joy/Textarea';
-import { useRef } from 'react';
 
 export default function TextareaRef() {
-  const textareaRef = useRef(null);
+  const textareaRef = React.useRef(null);
 
   const handleTextareaFocus = () => {
-    textareaRef.current.focus();
+    textareaRef.current?.focus();
   };
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
-      <Textarea ref={textareaRef} placeholder="Textarea" />
-      <Button onClick={handleTextareaFocus}>Focus Textarea</Button>
+      <Textarea
+        placeholder="Placeholder"
+        slotProps={{ textarea: { ref: textareaRef } }}
+      />
+      <Button onClick={handleTextareaFocus}>Focus textarea element</Button>
     </Box>
   );
 }
diff --git a/docs/data/joy/components/textarea/TextareaRef.tsx b/docs/data/joy/components/textarea/TextareaRef.tsx
index 8c31051792e7d7..531c63f15b60c8 100644
--- a/docs/data/joy/components/textarea/TextareaRef.tsx
+++ b/docs/data/joy/components/textarea/TextareaRef.tsx
@@ -2,19 +2,21 @@ import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Textarea from '@mui/joy/Textarea';
-import { useRef } from 'react';
 
 export default function TextareaRef() {
-  const textareaRef = useRef(null);
+  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
 
   const handleTextareaFocus = () => {
-    textareaRef.current.focus();
+    textareaRef.current?.focus();
   };
 
   return (
-    <Box sx={{display: 'flex', flexDirection: 'row', gap: 1}}>
-      <Textarea ref={textareaRef} placeholder="Textarea" />
-      <Button onClick={handleTextareaFocus}>Focus Textarea</Button>
+    <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
+      <Textarea
+        placeholder="Placeholder"
+        slotProps={{ textarea: { ref: textareaRef } }}
+      />
+      <Button onClick={handleTextareaFocus}>Focus textarea element</Button>
     </Box>
   );
 }
diff --git a/docs/data/joy/components/textarea/TextareaRef.tsx.preview b/docs/data/joy/components/textarea/TextareaRef.tsx.preview
index 7cd78f9e12d2cb..d71cf52732173c 100644
--- a/docs/data/joy/components/textarea/TextareaRef.tsx.preview
+++ b/docs/data/joy/components/textarea/TextareaRef.tsx.preview
@@ -1,2 +1,5 @@
-<Textarea ref={textareaRef} placeholder="Textarea" />
-<Button onClick={handleTextareaFocus}>Focus Textarea</Button>
\ No newline at end of file
+<Textarea
+  placeholder="Placeholder"
+  slotProps={{ textarea: { ref: textareaRef } }}
+/>
+<Button onClick={handleTextareaFocus}>Focus textarea element</Button>
\ No newline at end of file
diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
index dd917350d1b306..6c35b5577fdea3 100644
--- a/docs/data/joy/components/textarea/textarea.md
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -18,7 +18,13 @@ Joy UI's textarea component is built on top of the Base UI [`TextareaAutoSize`](
 
 {{"demo": "TextareaUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-## Component
+### HTML textarea ref
+
+Use `slotProps.textarea` to pass props to the `ref` and other [supported attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes) to HTML textarea element.
+
+{{"demo": "TextareaRef.js"}}
+
+## Customization
 
 After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
 
@@ -115,12 +121,6 @@ It's usually more common to see textarea components using decorators at the top
 
 {{"demo": "TextareaDecorators.js"}}
 
-### Using the useRef hook
-
-Use the [`useRef`](https://react.dev/reference/react/useRef) hook to directly access and interact with the underlying Textarea DOM node without causing re-renders.
-
-{{"demo": "TextareaRef.js"}}
-
 ## Accessibility
 
 In order for the textarea to be accessible, **it should be linked to a label**.

From 35ea6c37ee88d7a448824d13e7209e1dbb206f80 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 9 Oct 2023 09:43:40 +0700
Subject: [PATCH 06/10] use Stack

---
 docs/data/joy/components/textarea/TextareaRef.js  | 6 +++---
 docs/data/joy/components/textarea/TextareaRef.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/data/joy/components/textarea/TextareaRef.js b/docs/data/joy/components/textarea/TextareaRef.js
index 73a1f2eef351f9..886f0fcebd048e 100644
--- a/docs/data/joy/components/textarea/TextareaRef.js
+++ b/docs/data/joy/components/textarea/TextareaRef.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Textarea from '@mui/joy/Textarea';
+import Stack from '@mui/joy/Stack';
 
 export default function TextareaRef() {
   const textareaRef = React.useRef(null);
@@ -11,12 +11,12 @@ export default function TextareaRef() {
   };
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
+    <Stack direction="row" gap={1}>
       <Textarea
         placeholder="Placeholder"
         slotProps={{ textarea: { ref: textareaRef } }}
       />
       <Button onClick={handleTextareaFocus}>Focus textarea element</Button>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/textarea/TextareaRef.tsx b/docs/data/joy/components/textarea/TextareaRef.tsx
index 531c63f15b60c8..f4791853a96236 100644
--- a/docs/data/joy/components/textarea/TextareaRef.tsx
+++ b/docs/data/joy/components/textarea/TextareaRef.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Textarea from '@mui/joy/Textarea';
+import Stack from '@mui/joy/Stack';
 
 export default function TextareaRef() {
   const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
@@ -11,12 +11,12 @@ export default function TextareaRef() {
   };
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
+    <Stack direction="row" gap={1}>
       <Textarea
         placeholder="Placeholder"
         slotProps={{ textarea: { ref: textareaRef } }}
       />
       <Button onClick={handleTextareaFocus}>Focus textarea element</Button>
-    </Box>
+    </Stack>
   );
 }

From 4d6871825fbb97953cbce141eb88b1aee35ff97c Mon Sep 17 00:00:00 2001
From: Luv Patel <luvpatel2790.svmr@gmail.com>
Date: Mon, 9 Oct 2023 17:52:52 +0530
Subject: [PATCH 07/10] mades changes as per danilo-leal in textarea.md file

---
 docs/data/joy/components/textarea/textarea.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
index 6c35b5577fdea3..08c98a3b9082f5 100644
--- a/docs/data/joy/components/textarea/textarea.md
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -20,7 +20,7 @@ Joy UI's textarea component is built on top of the Base UI [`TextareaAutoSize`](
 
 ### HTML textarea ref
 
-Use `slotProps.textarea` to pass props to the `ref` and other [supported attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes) to HTML textarea element.
+Use the `slotProps.textarea` attribute to pass props to the `ref` and other [supported HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes) to the textarea element.
 
 {{"demo": "TextareaRef.js"}}
 

From a689459712947ffadcb1c334dc8464999645b89f Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 16 Oct 2023 20:51:12 -0300
Subject: [PATCH 08/10] trigger checks


From 990e9ad2dfb306fd6f9d8d99d88e3c91181af6e1 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 16 Oct 2023 20:52:32 -0300
Subject: [PATCH 09/10] change content positioning and parent name

---
 docs/data/joy/components/textarea/textarea.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
index 08c98a3b9082f5..7f0649b29a51c8 100644
--- a/docs/data/joy/components/textarea/textarea.md
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -18,13 +18,7 @@ Joy UI's textarea component is built on top of the Base UI [`TextareaAutoSize`](
 
 {{"demo": "TextareaUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-### HTML textarea ref
-
-Use the `slotProps.textarea` attribute to pass props to the `ref` and other [supported HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes) to the textarea element.
-
-{{"demo": "TextareaRef.js"}}
-
-## Customization
+## Component
 
 After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
 
@@ -121,6 +115,12 @@ It's usually more common to see textarea components using decorators at the top
 
 {{"demo": "TextareaDecorators.js"}}
 
+### HTML textarea ref
+
+Use the `slotProps.textarea` attribute to pass props to the `ref` and other [supported HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes) to the textarea element.
+
+{{"demo": "TextareaRef.js"}}
+
 ## Accessibility
 
 In order for the textarea to be accessible, **it should be linked to a label**.

From dc90d1ded4d013be02a0b13255f402a94109d569 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 16 Oct 2023 23:15:17 -0300
Subject: [PATCH 10/10] trigger tests again