[docs] Copy TextareaAutosize docs to Base (#32034)

docs/data/base/components/input/input.md

@@ -40,7 +40,7 @@ The `multiline` prop transforms the `<input>` field into a `<textarea>` element.
 
 {{"demo": "InputMultiline.js"}}
 
-If you want the `<textarea>` to grow with the content, you can use the [`TextareaAutosize`](/components/textarea-autosize/) component.
+If you want the `<textarea>` to grow with the content, you can use the [`TextareaAutosize`](/base/react-textarea-autosize/) component.
 When using `TextareaAutoresize`, the height of the `<textarea>` element dynamically matches its content, unless the `row` prop is set.
 To set minimum and maximum sizes, add the 'minRows`and`maxRows` props.
 

docs/data/base/components/textarea-autosize/EmptyTextarea.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+
+export default function EmptyTextarea() {
+  return (
+    <TextareaAutosize
+      aria-label="empty textarea"
+      placeholder="Empty"
+      style={{ width: 200 }}
+    />
+  );
+}

docs/data/base/components/textarea-autosize/EmptyTextarea.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+
+export default function EmptyTextarea() {
+  return (
+    <TextareaAutosize
+      aria-label="empty textarea"
+      placeholder="Empty"
+      style={{ width: 200 }}
+    />
+  );
+}

docs/data/base/components/textarea-autosize/EmptyTextarea.tsx.preview

@@ -0,0 +1,5 @@
+<TextareaAutosize
+  aria-label="empty textarea"
+  placeholder="Empty"
+  style={{ width: 200 }}
+/>

docs/data/base/components/textarea-autosize/MaxHeightTextarea.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+
+export default function MaxHeightTextarea() {
+  return (
+    <TextareaAutosize
+      maxRows={4}
+      aria-label="maximum height"
+      placeholder="Maximum 4 rows"
+      defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua."
+      style={{ width: 200 }}
+    />
+  );
+}

docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+
+export default function MaxHeightTextarea() {
+  return (
+    <TextareaAutosize
+      maxRows={4}
+      aria-label="maximum height"
+      placeholder="Maximum 4 rows"
+      defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua."
+      style={{ width: 200 }}
+    />
+  );
+}

docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx.preview

@@ -0,0 +1,8 @@
+<TextareaAutosize
+  maxRows={4}
+  aria-label="maximum height"
+  placeholder="Maximum 4 rows"
+  defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua."
+  style={{ width: 200 }}
+/>

docs/data/base/components/textarea-autosize/MinHeightTextarea.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+
+export default function MinHeightTextarea() {
+  return (
+    <TextareaAutosize
+      aria-label="minimum height"
+      minRows={3}
+      placeholder="Minimum 3 rows"
+      style={{ width: 200 }}
+    />
+  );
+}

docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+
+export default function MinHeightTextarea() {
+  return (
+    <TextareaAutosize
+      aria-label="minimum height"
+      minRows={3}
+      placeholder="Minimum 3 rows"
+      style={{ width: 200 }}
+    />
+  );
+}

docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx.preview

@@ -0,0 +1,6 @@
+<TextareaAutosize
+  aria-label="minimum height"
+  minRows={3}
+  placeholder="Minimum 3 rows"
+  style={{ width: 200 }}
+/>

docs/data/base/components/textarea-autosize/textarea-autosize-pt.md

@@ -0,0 +1,38 @@
+---
+product: material-ui
+title: Componente React de texto autoajustável
+components: TextareaAutosize
+githubLabel: 'component: TextareaAutosize'
+---
+
+# Texto autoajustável
+
+<p class="description">Um componente de texto para React que se ajusta conforme o conteúdo.</p>
+
+- 📦 [2.1 kB gzipped](/size-snapshot)
+
+O componente `TextareaAutosize` ajusta automaticamente a altura do textarea em eventos de teclado e redimensionamento de janela.
+
+[A paleta](/system/palette/) com funções de estilo.
+
+## Vazio
+
+{{"demo": "EmptyTextarea.js"}}
+
+## Altura mínima
+
+{{"demo": "MinHeightTextarea.js"}}
+
+## Altura máxima
+
+{{"demo": "MaxHeightTextarea.js"}}
+
+## Unstyled
+
+- 📦 [784 B gzipped](https://bundlephobia.com/package/@mui/base@latest)
+
+As the component does not have any styles, it also comes with the Base package.
+
+```js
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+```

docs/data/base/components/textarea-autosize/textarea-autosize-zh.md

@@ -0,0 +1,38 @@
+---
+product: material-ui
+title: React Textarea Autosize（自适应文本框）组件
+components: TextareaAutosize
+githubLabel: 'component: TextareaAutosize'
+---
+
+# Textarea Autosize 自适应文本框
+
+<p class="description">一个自适应内容大小的 React 文本框组件。</p>
+
+- 📦 [2.1kB 的压缩包](/size-snapshot)
+
+当触发键盘和窗口大小事件的时候，`TextareaAutosize` 组件将自动调整的文本框的高度。
+
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+## 空白的文本框
+
+{{"demo": "EmptyTextarea.js"}}
+
+## 最小高度
+
+{{"demo": "MinHeightTextarea.js"}}
+
+## 最大高度
+
+{{"demo": "MaxHeightTextarea.js"}}
+
+## Unstyled
+
+- 📦 [784 B gzipped](https://bundlephobia.com/package/@mui/base@latest)
+
+As the component does not have any styles, it also comes with the Base package.
+
+```js
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+```

docs/data/base/components/textarea-autosize/textarea-autosize.md

@@ -0,0 +1,29 @@
+---
+product: base
+title: Textarea Autosize React component
+components: TextareaAutosize
+githubLabel: 'component: TextareaAutosize'
+packageName: '@mui/base'
+---
+
+# Textarea Autosize
+
+<p class="description">A textarea component for React which grows with content.</p>
+
+- 📦 [1.5 kB gzipped](/size-snapshot)
+
+The `TextareaAutosize` component automatically adjust the textarea height on keyboard and window resize events.
+
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+## Empty
+
+{{"demo": "EmptyTextarea.js"}}
+
+## Minimum height
+
+{{"demo": "MinHeightTextarea.js"}}
+
+## Maximum height
+
+{{"demo": "MaxHeightTextarea.js"}}

docs/data/base/pages.ts

@@ -38,6 +38,7 @@ const pages = [
           { pathname: '/base/react-modal', title: 'Modal' },
           { pathname: '/base/react-no-ssr', title: 'No SSR' },
           { pathname: '/base/react-portal', title: 'Portal' },
+          { pathname: '/base/react-textarea-autosize', title: 'Textarea autosize' },
           { pathname: '/base/react-trap-focus', title: 'Trap focus' },
         ],
       },

docs/data/material/components/textarea-autosize/textarea-autosize.md

@@ -9,7 +9,7 @@ githubLabel: 'component: TextareaAutosize'
 
 <p class="description">A textarea component for React which grows with content.</p>
 
-- 📦 [2.1 kB gzipped](/size-snapshot)
+- 📦 [1.5 kB gzipped](/size-snapshot)
 
 The `TextareaAutosize` component automatically adjust the textarea height on keyboard and window resize events.
 
@@ -27,11 +27,11 @@ The `TextareaAutosize` component automatically adjust the textarea height on key
 
 {{"demo": "MaxHeightTextarea.js"}}
 
-## Unstyled
+## Base
 
-- 📦 [784 B gzipped](https://bundlephobia.com/package/@mui/base@latest)
-
-As the component does not have any styles, it also comes with the Base package.
+The [TextareaAutosize](/base/react-textarea-autosize) component is defined in the @mui/base package.
+It is reexported from @mui/material for convenience.
+In your application you may import it from either package.
 
 ```js
 import TextareaAutosize from '@mui/base/TextareaAutosize';

docs/pages/base/api/textarea-autosize.json

@@ -12,6 +12,6 @@
   "forwardsRefTo": "HTMLTextAreaElement",
   "filename": "/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/material-ui/react-textarea-autosize/\">Textarea Autosize</a></li></ul>",
+  "demos": "<ul><li><a href=\"/base/components/textarea-autosize/\">Textarea Autosize</a></li>\n<li><a href=\"/material-ui/react-textarea-autosize/\">Textarea Autosize</a></li></ul>",
   "cssComponent": false
 }

docs/pages/base/react-textarea-autosize.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}