@fluentui/react-textarea 0.0.0-nightly-20220412-0417.1

package/CHANGELOG.json

@@ -0,0 +1,82 @@
+{
+  "name": "@fluentui/react-textarea",
+  "entries": [
+    {
+      "date": "Tue, 12 Apr 2022 04:26:08 GMT",
+      "tag": "@fluentui/react-textarea_v0.0.0-nightly-20220412-0417.1",
+      "version": "0.0.0-nightly-20220412-0417.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui/react-textarea",
+            "commit": "not available",
+            "comment": "Release nightly v9"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220412-0417.1",
+            "commit": "b4913156db971c5e4b4b42858815db4ae2ed55e6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220412-0417.1",
+            "commit": "b4913156db971c5e4b4b42858815db4ae2ed55e6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220412-0417.1",
+            "commit": "b4913156db971c5e4b4b42858815db4ae2ed55e6"
+          }
+        ],
+        "none": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui/react-textarea",
+            "commit": "98042e9b8eb9d4dd78f1e42e79db6a2e33404b9d",
+            "comment": "Adding label to Default story and making package public."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Mar 2022 05:17:40 GMT",
+      "tag": "@fluentui/react-textarea_v9.0.0-alpha.0",
+      "version": "9.0.0-alpha.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.4",
+            "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.5",
+            "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Mar 2022 02:17:40 GMT",
+      "tag": "@fluentui/react-textarea_v9.0.0-alpha.0",
+      "version": "9.0.0-alpha.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.4",
+            "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,35 @@
+# Change Log - @fluentui/react-textarea
+
+This log was last generated on Tue, 12 Apr 2022 04:26:08 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20220412-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v0.0.0-nightly-20220412-0417.1)
+
+Tue, 12 Apr 2022 04:26:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.0-alpha.0..@fluentui/react-textarea_v0.0.0-nightly-20220412-0417.1)
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220412-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/b4913156db971c5e4b4b42858815db4ae2ed55e6) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220412-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/b4913156db971c5e4b4b42858815db4ae2ed55e6) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220412-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/b4913156db971c5e4b4b42858815db4ae2ed55e6) by beachball)
+
+## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.0-alpha.0)
+
+Fri, 04 Mar 2022 05:17:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.0-alpha.0..@fluentui/react-textarea_v9.0.0-alpha.0)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
+
+## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.0-alpha.0)
+
+Tue, 01 Mar 2022 02:17:40 GMT
+
+### Changes
+
+- Bump @fluentui/react-utilities to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-textarea
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/MIGRATION.md

@@ -0,0 +1,22 @@
+# TextArea Migration
+
+## STATUS: WIP
+
+This Migration guide is a work in progress and is not yet ready for use.
+
+## Migration from v0
+
+- `TextArea`
+  - `fluid` => `display`.
+  - `inverted` => `appearance`.
+
+## Migration from v8
+
+- `TextArea`
+  - `autoAdjustHeight` => `autoResize`.
+  - `borderless` => `appearance`.
+  - `deferredValidationTime` => Not supported.
+  - `description` => Not supported.
+  - `errorMessage` => Not supported.
+  - `invalid` => Not supported.
+  - `underlined` => `appearance`.

package/README.md

@@ -0,0 +1,30 @@
+# @fluentui/react-textarea
+
+**React Textarea components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+The Textarea component is a multiline text input that allows the user to enter
+
+## STATUS: WIP 🚧
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+## Usage
+
+To import Textarea:
+
+```js
+import { Textarea } from '@fluentui/react-textarea';
+```
+
+Once the Textarea component is ready for production use, the component will be available at:
+
+```js
+import { Textarea } from '@fluentui/react-components';
+```
+
+### Examples
+
+```js
+<Textarea placeholder="Enter text here..." />
+<Textarea defaultValue="Lorem ipsum dolor" />
+```

package/Spec.md

@@ -0,0 +1,166 @@
+# @fluentui/react-textarea Spec
+
+## Background
+
+`TextArea` is a multi-line text input field that uses the `<textarea>` element.
+
+It is usually used when the user will use more than one line of text, such as a review in a website.
+
+In some libraries, `TextArea` is a variant of `TextField` or `Input`.
+
+## Prior Art
+
+| Component Library                                                                | Name                            |
+| -------------------------------------------------------------------------------- | ------------------------------- |
+| v8                                                                               | `TextField` variant `Multiline` |
+| v0                                                                               | `TextArea`                      |
+| [Ant Design](https://ant.design/components/input/)                               | `Input.TextArea`                |
+| [Material UI](https://v4.mui.com/components/text-fields/)                        | `TextField` variant `Multiline` |
+| [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/TextArea.html)  | `TextArea`                      |
+| [React Bootstrap](https://react-bootstrap.github.io/forms/input-group/)          | `FormControl` as `textarea`     |
+| [Blueprint](https://blueprintjs.com/docs/#core/components/text-inputs.text-area) | `TextArea`                      |
+| [Grommet](https://v2.grommet.io/textarea)                                        | `TextArea`                      |
+
+- Most libraries have their own `TextArea` component while others make it a variant of another component.
+  - `React Bootstrap` uses as with `FormControl` as follows: `<FormControl as="textarea" />`
+  - `Material UI` and `v8` use the `TextField` control and added a variant `multiline` as follows: `<TextField multiline defaultValue="Default Value" />`
+  - `Ant Design` uses the `TextArea` subcomponent as follows: `<Input.TextArea placeholder="Text Area" />`
+
+#### TextArea in v8
+
+- `Textfield` component with `multiline` property. When the `multiline` property is set to true, it is rendered as a `textarea`.
+- Has descriptions, label, error message, and handles maximum character count.
+
+#### TextArea in v0
+
+- Doesn't have `label` prop.
+- Handles maximum character count.
+
+## Sample Code
+
+```tsx
+<TextArea
+  className="textAreaClassName"
+  id="textarea-1"
+  defaultValue="This is a TextArea"
+  onChange={(ev, data) => console.log(data.value)}
+/>
+```
+
+## Variants
+
+- Visual variants
+  - `Filled Darker`: TextArea has a gray background and no outline.
+  - `Filled Lighter`: TextArea has a white background and no outline.
+  - `Outline`: TextArea has a white background, outline, and a line on the bottom.
+- Behavior variants
+  - `Disabled`: TextArea has a gray background, gray text, outline, and interaction is disabled.
+  - `Read Only`: TextArea has a gray background, gray outline, and typing is disabled.
+
+Note: These colors are based on the design spec, therefore they come from the default theme.
+
+## API
+
+### Component props:
+
+```ts
+type TextAreaProps = {
+  /**
+   * Which direction the TextArea is allowed to be resized.
+   *
+   * @defaultvalue none
+   */
+  resize?: 'none' | 'horizontal' | 'vertical' | 'both';
+
+  /**
+   * Size of the TextArea.
+   *
+   * @defaultvalue medium
+   */
+  size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Styling the TextArea should use.
+   *
+   * @defaultvalue outline
+   */
+  appearance?: 'outline' | 'filledDarker' | 'filledLighter';
+
+  /**
+   * The value of the TextArea. Used when the component is controlled.
+   */
+  value?: string;
+
+  /**
+   * The default value of the TextArea. Used when the component is uncontrolled.
+   */
+  defaultValue?: string;
+
+  /**
+   * Callback for when the user changes the value.
+   */
+  onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaOnChangeData) => void;
+};
+
+/**
+ * Data passed to the `onChange` callback when the textarea's value changes.
+ */
+type TextAreaOnChangeData = {
+  value: string;
+};
+```
+
+The auto-resize feature is known to be unstable from v8 and tricky to implement. [As mentioned by ecraig12345](https://github.com/microsoft/fluentui/pull/21898#discussion_r816418917), we've been trying to prioritize getting the components ready for production and may have to leave out some features for the initial version.
+
+`TextArea` has two slots:
+
+- `textarea` the primary slot that handles all `TextArea` behavior, except the focus indicator.
+- `root` acts as a wrapper to allow a pseudo-element for the focus indicator. This wrapper is needed since textarea cannot have children, therefore `::after` cannot be used.
+
+The design spec mentions a character count, error message, and label which will be left out until further discussion.
+
+## Structure
+
+**Public**
+
+```tsx
+<TextArea id="textarea-1" onChange={(ev, data) => console.log(data.value)}>
+  This is a TextArea
+</TextArea>
+```
+
+**Internal**
+
+```tsx
+<slots.root {...slotProps.root}></slots.root>
+```
+
+**DOM** - how the component will be rendered as HTML elements
+
+```html
+<div className="fui-TextArea">
+  <textarea id="textarea-1" className="fui-TextArea__textarea">This is a TextArea</textarea>
+</div>
+```
+
+## Migration
+
+See [MIGRATION.md](MIGRATION.md).
+
+## Behaviors
+
+TODO: Until the upcoming design review, behavior hasn't been set and will be updated when approved.
+
+- Component States
+  - Rest
+  - Hover
+  - Pressed: Apply focus border animation.
+  - Focussed: Apply thick blue line on the bottom border.
+
+Interaction will be handled by native element.
+
+## Accessibility
+
+- User should provide a label since there is no built-in label for TextArea.
+- If no label is used, `aria-label` or `aria-labelledby` should be provided by the user.
+- Screen reader behavior will be handled by using the native `<textarea>` element.

package/dist/react-textarea.d.ts

@@ -0,0 +1,101 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Render the final JSX of Textarea
+ */
+export declare const renderTextarea_unstable: (state: TextareaState) => JSX.Element;
+
+/**
+ * The Textarea component allows the user to enter and edit text in multiple lines.
+ */
+export declare const Textarea: ForwardRefComponent<TextareaProps>;
+
+export declare const textareaClassNames: SlotClassNames<TextareaSlots>;
+
+declare type TextareaCommons = {
+    /**
+     * Which direction the Textarea is allowed to be resized.
+     *
+     * @default none
+     */
+    resize: 'none' | 'horizontal' | 'vertical' | 'both';
+    /**
+     * Size of the Textarea.
+     *
+     * @default medium
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Styling the Textarea should use.
+     *
+     * @default outline
+     */
+    appearance: 'outline' | 'filledDarker' | 'filledLighter';
+};
+
+/**
+ * Data passed to the `onChange` callback when the textarea's value changes.
+ */
+declare type TextareaOnChangeData = {
+    value: string;
+};
+
+/**
+ * Textarea Props
+ */
+export declare type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>, 'textarea'>, 'value' | 'defaultValue' | 'onChange' | 'size'> & Partial<TextareaCommons> & {
+    /**
+     * The value of the Textarea.
+     */
+    value?: string;
+    /**
+     * The default value of the Textarea.
+     */
+    defaultValue?: string;
+    /**
+     * Callback for when the user changes the value.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;
+};
+
+export declare type TextareaSlots = {
+    /**
+     * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus
+     * indicator border animation. For more information, see Spec.md
+     *
+     * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.
+     */
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.
+     */
+    textarea: NonNullable<Slot<'textarea'>>;
+};
+
+/**
+ * State used in rendering Textarea
+ */
+export declare type TextareaState = ComponentState<TextareaSlots> & TextareaCommons;
+
+/**
+ * Create the state required to render Textarea.
+ *
+ * The returned state can be modified with hooks such as useTextareaStyles_unstable,
+ * before being passed to renderTextarea_unstable.
+ *
+ * @param props - props from this instance of Textarea
+ * @param ref - reference to root HTMLElement of Textarea
+ */
+export declare const useTextarea_unstable: (props: TextareaProps, ref: React_2.Ref<HTMLTextAreaElement>) => TextareaState;
+
+/**
+ * Apply styling to the Textarea slots based on the state
+ */
+export declare const useTextareaStyles_unstable: (state: TextareaState) => TextareaState;
+
+export { }

package/lib/Textarea.d.ts

@@ -0,0 +1 @@
+export * from './components/Textarea/index';

package/lib/Textarea.js

@@ -0,0 +1,2 @@
+export * from './components/Textarea/index';
+//# sourceMappingURL=Textarea.js.map

package/lib/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"../src/","sources":["Textarea.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Textarea/index';\n"]}

package/lib/components/Textarea/Textarea.d.ts

@@ -0,0 +1,6 @@
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TextareaProps } from './Textarea.types';
+/**
+ * The Textarea component allows the user to enter and edit text in multiple lines.
+ */
+export declare const Textarea: ForwardRefComponent<TextareaProps>;

package/lib/components/Textarea/Textarea.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { renderTextarea_unstable } from './renderTextarea';
+import { useTextarea_unstable } from './useTextarea';
+import { useTextareaStyles_unstable } from './useTextareaStyles';
+/**
+ * The Textarea component allows the user to enter and edit text in multiple lines.
+ */
+
+export const Textarea = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTextarea_unstable(props, ref);
+  useTextareaStyles_unstable(state);
+  return renderTextarea_unstable(state);
+});
+Textarea.displayName = 'Textarea';
+//# sourceMappingURL=Textarea.js.map

package/lib/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1F,QAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;AAEA,EAAA,0BAA0B,CAAC,KAAD,CAA1B;AACA,SAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { renderTextarea_unstable } from './renderTextarea';\nimport { useTextarea_unstable } from './useTextarea';\nimport { useTextareaStyles_unstable } from './useTextareaStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { TextareaProps } from './Textarea.types';\n\n/**\n * The Textarea component allows the user to enter and edit text in multiple lines.\n */\nexport const Textarea: ForwardRefComponent<TextareaProps> = React.forwardRef((props, ref) => {\n  const state = useTextarea_unstable(props, ref);\n\n  useTextareaStyles_unstable(state);\n  return renderTextarea_unstable(state);\n});\n\nTextarea.displayName = 'Textarea';\n"],"sourceRoot":"../src/"}

package/lib/components/Textarea/Textarea.types.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+export declare type TextareaSlots = {
+    /**
+     * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus
+     * indicator border animation. For more information, see Spec.md
+     *
+     * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.
+     */
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.
+     */
+    textarea: NonNullable<Slot<'textarea'>>;
+};
+declare type TextareaCommons = {
+    /**
+     * Which direction the Textarea is allowed to be resized.
+     *
+     * @default none
+     */
+    resize: 'none' | 'horizontal' | 'vertical' | 'both';
+    /**
+     * Size of the Textarea.
+     *
+     * @default medium
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Styling the Textarea should use.
+     *
+     * @default outline
+     */
+    appearance: 'outline' | 'filledDarker' | 'filledLighter';
+};
+/**
+ * Textarea Props
+ */
+export declare type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>, 'textarea'>, 'value' | 'defaultValue' | 'onChange' | 'size'> & Partial<TextareaCommons> & {
+    /**
+     * The value of the Textarea.
+     */
+    value?: string;
+    /**
+     * The default value of the Textarea.
+     */
+    defaultValue?: string;
+    /**
+     * Callback for when the user changes the value.
+     */
+    onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;
+};
+/**
+ * State used in rendering Textarea
+ */
+export declare type TextareaState = ComponentState<TextareaSlots> & TextareaCommons;
+/**
+ * Data passed to the `onChange` callback when the textarea's value changes.
+ */
+declare type TextareaOnChangeData = {
+    value: string;
+};
+export {};

package/lib/components/Textarea/Textarea.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Textarea.types.js.map

package/lib/components/Textarea/Textarea.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.types.js","sourceRoot":"../src/","sources":["components/Textarea/Textarea.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TextareaSlots = {\n  /**\n   * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus\n   * indicator border animation. For more information, see Spec.md\n   *\n   * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.\n   */\n  textarea: NonNullable<Slot<'textarea'>>;\n};\n\ntype TextareaCommons = {\n  /**\n   * Which direction the Textarea is allowed to be resized.\n   *\n   * @default none\n   */\n  resize: 'none' | 'horizontal' | 'vertical' | 'both';\n\n  /**\n   * Size of the Textarea.\n   *\n   * @default medium\n   */\n  size: 'small' | 'medium' | 'large';\n\n  /**\n   * Styling the Textarea should use.\n   *\n   * @default outline\n   */\n  appearance: 'outline' | 'filledDarker' | 'filledLighter';\n};\n\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n  ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n  'value' | 'defaultValue' | 'onChange' | 'size'\n> &\n  Partial<TextareaCommons> & {\n    /**\n     * The value of the Textarea.\n     */\n    value?: string;\n\n    /**\n     * The default value of the Textarea.\n     */\n    defaultValue?: string;\n\n    /**\n     * Callback for when the user changes the value.\n     */\n    onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;\n  };\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> & TextareaCommons;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\ntype TextareaOnChangeData = {\n  value: string;\n};\n"]}

package/lib/components/Textarea/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Textarea';
+export * from './Textarea.types';
+export * from './renderTextarea';
+export * from './useTextarea';
+export * from './useTextareaStyles';

package/lib/components/Textarea/index.js

@@ -0,0 +1,6 @@
+export * from './Textarea';
+export * from './Textarea.types';
+export * from './renderTextarea';
+export * from './useTextarea';
+export * from './useTextareaStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Textarea/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Textarea';\nexport * from './Textarea.types';\nexport * from './renderTextarea';\nexport * from './useTextarea';\nexport * from './useTextareaStyles';\n"]}

package/lib/components/Textarea/renderTextarea.d.ts

@@ -0,0 +1,5 @@
+import type { TextareaState } from './Textarea.types';
+/**
+ * Render the final JSX of Textarea
+ */
+export declare const renderTextarea_unstable: (state: TextareaState) => JSX.Element;

package/lib/components/Textarea/renderTextarea.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Textarea
+ */
+
+export const renderTextarea_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.textarea, { ...slotProps.textarea
+  }));
+};
+//# sourceMappingURL=renderTextarea.js.map

package/lib/components/Textarea/renderTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Textarea/renderTextarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;AAC9D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TextareaState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaState) => {\n  const { slots, slotProps } = getSlots<TextareaSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.textarea {...slotProps.textarea} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Textarea/useTextarea.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { TextareaProps, TextareaState } from './Textarea.types';
+/**
+ * Create the state required to render Textarea.
+ *
+ * The returned state can be modified with hooks such as useTextareaStyles_unstable,
+ * before being passed to renderTextarea_unstable.
+ *
+ * @param props - props from this instance of Textarea
+ * @param ref - reference to root HTMLElement of Textarea
+ */
+export declare const useTextarea_unstable: (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => TextareaState;