@fluentui/react-textarea 9.1.4 → 9.1.6

package/CHANGELOG.json

@@ -2,7 +2,81 @@
   "name": "@fluentui/react-textarea",
   "entries": [
     {
-      "date": "Wed, 02 Nov 2022 11:55:06 GMT",
+      "date": "Thu, 17 Nov 2022 23:02:47 GMT",
+      "tag": "@fluentui/react-textarea_v9.1.6",
+      "version": "9.1.6",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-textarea",
+            "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
+            "comment": "chore: update package scaffold"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.9",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-utilities to v9.2.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Nov 2022 14:57:46 GMT",
+      "tag": "@fluentui/react-textarea_v9.1.5",
+      "version": "9.1.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-textarea",
+            "commit": "b3907043bd8d7b650c55e8e7c3119b14f2606c38",
+            "comment": "fix: create valid export maps"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-textarea",
+            "commit": "39ba7b6d4648781b979fcf694579f97b851348af",
+            "comment": "chore: Move TextareaField into the @fluentui/react-textarea package and export as _unstable"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.8",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-theme to v9.1.2",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-utilities to v9.2.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 02 Nov 2022 11:58:04 GMT",
       "tag": "@fluentui/react-textarea_v9.1.4",
       "version": "9.1.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-textarea
 
-This log was last generated on Wed, 02 Nov 2022 11:55:06 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Nov 2022 23:02:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.1.6)
+
+Thu, 17 Nov 2022 23:02:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.1.5..@fluentui/react-textarea_v9.1.6)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.0.0-alpha.9 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+
+## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.1.5)
+
+Fri, 11 Nov 2022 14:57:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.1.4..@fluentui/react-textarea_v9.1.5)
+
+### Patches
+
+- fix: create valid export maps ([PR #25558](https://github.com/microsoft/fluentui/pull/25558) by martinhochel@microsoft.com)
+- chore: Move TextareaField into the @fluentui/react-textarea package and export as _unstable ([PR #25593](https://github.com/microsoft/fluentui/pull/25593) by behowell@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.8 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-theme to v9.1.2 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-utilities to v9.2.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+
 ## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.1.4)
 
-Wed, 02 Nov 2022 11:55:06 GMT 
+Wed, 02 Nov 2022 11:58:04 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.1.3..@fluentui/react-textarea_v9.1.4)
 
 ### Patches

package/dist/index.d.ts

@@ -1,5 +1,10 @@
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import { FieldControl } from '@fluentui/react-field';
+import type { FieldProps } from '@fluentui/react-field';
+import { FieldSlots } from '@fluentui/react-field';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -17,6 +22,12 @@ export declare const Textarea: ForwardRefComponent<TextareaProps>;
 
 export declare const textareaClassNames: SlotClassNames<TextareaSlots>;
 
+export declare const TextareaField_unstable: ForwardRefComponent<TextareaFieldProps_unstable>;
+
+export declare const textareaFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
+
+export declare type TextareaFieldProps_unstable = FieldProps<typeof Textarea>;
+
 /**
  * Data passed to the `onChange` callback when the textarea's value changes.
  */

package/lib/Textarea.js.map

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

package/lib/TextareaField.js

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

package/lib/TextareaField.js.map

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

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

@@ -1 +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;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,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/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/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;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,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.js.map

@@ -1 +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\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n  ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * Styling the Textarea should use.\n   *\n   * @default outline\n   *\n   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.\n   */\n  appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';\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   * 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   * The value of the Textarea.\n   */\n  value?: string;\n};\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\ntype TextareaOnChangeData = {\n  value: string;\n};\n"]}
+{"version":3,"file":"Textarea.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-textarea/src/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\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n  ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * Styling the Textarea should use.\n   *\n   * @default outline\n   *\n   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.\n   */\n  appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';\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   * 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   * The value of the Textarea.\n   */\n  value?: string;\n};\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\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.js.map

@@ -1 +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"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-textarea/src/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.js.map

@@ -1 +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;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,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/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/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;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Textarea/useTextarea.ts"],"names":[],"mappings":"AACA,SACE,yBADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,gBAJF,QAKO,2BALP;AAQA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA6E;EAC/G,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C,MAAM,GAAG,MAApD;IAA4D;EAA5D,IAAyE,KAA/E;;EAEA,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,KACC,UAAU,KAAK,sBAAf,IAAyC,UAAU,KAAK,uBADzD,CADF,EAGE;IACA;IACA,OAAO,CAAC,KAAR,CACE,iHACE,UAFJ;EAID;;EAED,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,oBAAoB,CAAC;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAAD,CAA9C;EAMA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,UAFwB;IAG5C,iBAAiB,EAAE,CAAC,UAAD,EAAa,OAAb,EAAsB,cAAtB;EAHyB,CAAD,CAA7C;EAMA,MAAM,KAAK,GAAkB;IAC3B,IAD2B;IAE3B,UAF2B;IAG3B,MAH2B;IAI3B,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,QAAQ,EAAE;IAFA,CAJe;IAQ3B,QAAQ,EAAE,gBAAgB,CAAC,KAAK,CAAC,QAAP,EAAiB;MACzC,QAAQ,EAAE,IAD+B;MAEzC,YAAY,EAAE;QACZ,GADY;QAEZ,GAAG,WAAW,CAAC;MAFH;IAF2B,CAAjB,CARC;IAe3B,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAAb;EAfK,CAA7B;EAqBA,KAAK,CAAC,QAAN,CAAe,KAAf,GAAuB,KAAvB;EACA,KAAK,CAAC,QAAN,CAAe,QAAf,GAA0B,gBAAgB,CAAC,EAAE,IAAG;IAC9C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJyC,CAA1C;EAMA,OAAO,KAAP;AACD,CAvDM","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TextareaProps, TextareaState } from './Textarea.types';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n  const { size = 'medium', appearance = 'outline', resize = 'none', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: undefined,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'textarea',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: TextareaState = {\n    size,\n    appearance,\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: resolveShorthand(props.textarea, {\n      required: true,\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.textarea.value = value;\n  state.textarea.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts"],"names":[],"mappings":"AACA,SACE,yBADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,gBAJF,QAKO,2BALP;AAQA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA6E;EAC/G,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C,MAAM,GAAG,MAApD;IAA4D;EAA5D,IAAyE,KAA/E;;EAEA,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,KACC,UAAU,KAAK,sBAAf,IAAyC,UAAU,KAAK,uBADzD,CADF,EAGE;IACA;IACA,OAAO,CAAC,KAAR,CACE,iHACE,UAFJ;EAID;;EAED,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,oBAAoB,CAAC;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAAD,CAA9C;EAMA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,UAFwB;IAG5C,iBAAiB,EAAE,CAAC,UAAD,EAAa,OAAb,EAAsB,cAAtB;EAHyB,CAAD,CAA7C;EAMA,MAAM,KAAK,GAAkB;IAC3B,IAD2B;IAE3B,UAF2B;IAG3B,MAH2B;IAI3B,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,QAAQ,EAAE;IAFA,CAJe;IAQ3B,QAAQ,EAAE,gBAAgB,CAAC,KAAK,CAAC,QAAP,EAAiB;MACzC,QAAQ,EAAE,IAD+B;MAEzC,YAAY,EAAE;QACZ,GADY;QAEZ,GAAG,WAAW,CAAC;MAFH;IAF2B,CAAjB,CARC;IAe3B,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAAb;EAfK,CAA7B;EAqBA,KAAK,CAAC,QAAN,CAAe,KAAf,GAAuB,KAAvB;EACA,KAAK,CAAC,QAAN,CAAe,QAAf,GAA0B,gBAAgB,CAAC,EAAE,IAAG;IAC9C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJyC,CAA1C;EAMA,OAAO,KAAP;AACD,CAvDM","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TextareaProps, TextareaState } from './Textarea.types';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n  const { size = 'medium', appearance = 'outline', resize = 'none', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: undefined,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'textarea',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: TextareaState = {\n    size,\n    appearance,\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: resolveShorthand(props.textarea, {\n      required: true,\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.textarea.value = value;\n  state.textarea.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Textarea/useTextareaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n  root: 'fui-Textarea',\n  textarea: 'fui-Textarea__textarea',\n};\n\nconst textareaHeight = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    position: 'relative',\n    // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n    ...shorthands.padding('0', '0', tokens.strokeWidthThick, '0'),\n    ...shorthands.margin('0'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n    [`& > textarea`]: {\n      cursor: 'not-allowed',\n      '::placeholder': {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n      // Animation for focus OUT\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      // Animation for focus IN\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      // This is if the user clicks the field again while it's already focused\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    ':focus-within': {\n      outlineWidth: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n\n  filled: {\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n    ':hover,:focus-within': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorCompoundBrandStroke,\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n  base: {\n    ...shorthands.borderStyle('none'),\n    ...shorthands.margin('0'),\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n    maxHeight: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    '::selection': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorNeutralBackgroundInverted,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n  // affected by changing the padding of the root.\n  small: {\n    height: textareaHeight.small,\n    minHeight: '40px',\n    ...shorthands.padding(\n      tokens.spacingVerticalXS,\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: textareaHeight.medium,\n    minHeight: '52px',\n    ...shorthands.padding(\n      tokens.spacingVerticalSNudge,\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: textareaHeight.large,\n    minHeight: '64px',\n    ...shorthands.padding(\n      tokens.spacingVerticalS,\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n  none: {\n    resize: 'none',\n  },\n  both: {\n    resize: 'both',\n  },\n  horizontal: {\n    resize: 'horizontal',\n  },\n  vertical: {\n    resize: 'vertical',\n  },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n  const { size, appearance, resize } = state;\n  const disabled = state.textarea.disabled;\n  const invalid = `${state.textarea['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    rootStyles[appearance],\n    filled && rootStyles.filled,\n    disabled && rootStyles.disabled,\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    state.root.className,\n  );\n\n  const textareaStyles = useTextareaStyles();\n  const textareaResizeStyles = useTextareaResizeStyles();\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,QAAQ,EAAE;AAFqD,CAA1D;AAKP,MAAM,cAAc,GAAG;EACrB,KAAK,EAAE,MADc;EAErB,MAAM,EAAE,MAFa;EAGrB,KAAK,EAAE;AAHc,CAAvB;AAMA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EAAtB;AAyIA;;AAEG;;;AACH,MAAM,iBAAiB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA1B;AAyDA;;AAEG;;;AACH,MAAM,uBAAuB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAhC;AAeA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,IAAF;IAAQ,UAAR;IAAoB;EAApB,IAA+B,KAArC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAN,CAAe,QAAhC;EACA,MAAM,OAAO,GAAG,GAAG,KAAK,CAAC,QAAN,CAAe,cAAf,CAA8B,EAAjC,KAAwC,MAAxD;EACA,MAAM,MAAM,GAAG,UAAU,CAAC,UAAX,CAAsB,QAAtB,CAAf;EAEA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,UAAD,CAHuB,EAIjC,MAAM,IAAI,UAAU,CAAC,MAJY,EAKjC,QAAQ,IAAI,UAAU,CAAC,QALU,EAMjC,CAAC,QAAD,IAAa,UAAU,CAAC,WANS,EAOjC,CAAC,QAAD,IAAa,UAAU,KAAK,SAA5B,IAAyC,UAAU,CAAC,kBAPnB,EAQjC,CAAC,QAAD,IAAa,OAAb,IAAwB,UAAU,CAAC,OARF,EASjC,KAAK,CAAC,IAAN,CAAW,SATsB,CAAnC;EAYA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;EACA,MAAM,oBAAoB,GAAG,uBAAuB,EAApD;EACA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,kBAAkB,CAAC,QADkB,EAErC,cAAc,CAAC,IAFsB,EAGrC,cAAc,CAAC,IAAD,CAHuB,EAIrC,oBAAoB,CAAC,MAAD,CAJiB,EAKrC,KAAK,CAAC,QAAN,CAAe,SALsB,CAAvC;EAQA,OAAO,KAAP;AACD,CA9BM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n  root: 'fui-Textarea',\n  textarea: 'fui-Textarea__textarea',\n};\n\nconst textareaHeight = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    position: 'relative',\n    // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n    ...shorthands.padding('0', '0', tokens.strokeWidthThick, '0'),\n    ...shorthands.margin('0'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n    [`& > textarea`]: {\n      cursor: 'not-allowed',\n      '::placeholder': {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n      // Animation for focus OUT\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      // Animation for focus IN\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      // This is if the user clicks the field again while it's already focused\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    ':focus-within': {\n      outlineWidth: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n\n  filled: {\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n    ':hover,:focus-within': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorCompoundBrandStroke,\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n  base: {\n    ...shorthands.borderStyle('none'),\n    ...shorthands.margin('0'),\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n    maxHeight: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    '::selection': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorNeutralBackgroundInverted,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n  // affected by changing the padding of the root.\n  small: {\n    height: textareaHeight.small,\n    minHeight: '40px',\n    ...shorthands.padding(\n      tokens.spacingVerticalXS,\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: textareaHeight.medium,\n    minHeight: '52px',\n    ...shorthands.padding(\n      tokens.spacingVerticalSNudge,\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: textareaHeight.large,\n    minHeight: '64px',\n    ...shorthands.padding(\n      tokens.spacingVerticalS,\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n  none: {\n    resize: 'none',\n  },\n  both: {\n    resize: 'both',\n  },\n  horizontal: {\n    resize: 'horizontal',\n  },\n  vertical: {\n    resize: 'vertical',\n  },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n  const { size, appearance, resize } = state;\n  const disabled = state.textarea.disabled;\n  const invalid = `${state.textarea['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    rootStyles[appearance],\n    filled && rootStyles.filled,\n    disabled && rootStyles.disabled,\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    state.root.className,\n  );\n\n  const textareaStyles = useTextareaStyles();\n  const textareaResizeStyles = useTextareaResizeStyles();\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TextareaField/TextareaField.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '@fluentui/react-field';
+import { Textarea } from '../../Textarea';
+export const textareaFieldClassNames = /*#__PURE__*/getFieldClassNames('TextareaField');
+export const TextareaField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useField_unstable(props, ref, {
+    component: Textarea,
+    classNames: textareaFieldClassNames
+  });
+  useFieldStyles_unstable(state);
+  return renderField_unstable(state);
+});
+TextareaField.displayName = 'TextareaField';
+//# sourceMappingURL=TextareaField.js.map

package/lib/components/TextareaField/TextareaField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-textarea/src/components/TextareaField/TextareaField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAOA,SAAS,QAAT,QAAyB,gBAAzB;AAIA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,QAAb;IAAuB,UAAU,EAAE;EAAnC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJqE,CAA/D;AAMP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Textarea } from '../../Textarea';\n\nexport type TextareaFieldProps = FieldProps<typeof Textarea>;\n\nexport const textareaFieldClassNames = getFieldClassNames('TextareaField');\n\nexport const TextareaField: ForwardRefComponent<TextareaFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Textarea, classNames: textareaFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nTextareaField.displayName = 'TextareaField';\n"],"sourceRoot":"../src/"}

package/lib/components/TextareaField/index.js

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

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

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

package/lib/index.js

@@ -1,2 +1,3 @@
 export { Textarea, renderTextarea_unstable, textareaClassNames, useTextareaStyles_unstable, useTextarea_unstable } from './Textarea';
+export { TextareaField as TextareaField_unstable, textareaFieldClassNames } from './TextareaField';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,QADF,EAEE,uBAFF,EAGE,kBAHF,EAIE,0BAJF,EAKE,oBALF,QAMO,YANP","sourcesContent":["export {\n  Textarea,\n  renderTextarea_unstable,\n  textareaClassNames,\n  useTextareaStyles_unstable,\n  useTextarea_unstable,\n} from './Textarea';\nexport type { TextareaProps, TextareaSlots, TextareaState } from './Textarea';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/index.ts"],"names":[],"mappings":"AAAA,SACE,QADF,EAEE,uBAFF,EAGE,kBAHF,EAIE,0BAJF,EAKE,oBALF,QAMO,YANP;AASA,SAAS,aAAa,IAAI,sBAA1B,EAAkD,uBAAlD,QAAiF,iBAAjF","sourcesContent":["export {\n  Textarea,\n  renderTextarea_unstable,\n  textareaClassNames,\n  useTextareaStyles_unstable,\n  useTextarea_unstable,\n} from './Textarea';\nexport type { TextareaProps, TextareaSlots, TextareaState } from './Textarea';\n\nexport { TextareaField as TextareaField_unstable, textareaFieldClassNames } from './TextareaField';\nexport type { TextareaFieldProps as TextareaFieldProps_unstable } from './TextareaField';\n"],"sourceRoot":"../src/"}

package/lib-amd/Textarea.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Textarea/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Textarea.js.map

package/lib-amd/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-textarea/src/Textarea.ts"],"names":[],"mappings":";;;IAAA,uCAA4C","sourcesContent":["export * from './components/Textarea/index';\n"]}

package/lib-amd/TextareaField.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TextareaField/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TextareaField.js.map

package/lib-amd/TextareaField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-textarea/src/TextareaField.ts"],"names":[],"mappings":";;;IAAA,uCAAiD","sourcesContent":["export * from './components/TextareaField/index';\n"]}

package/lib-amd/components/Textarea/Textarea.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./renderTextarea", "./useTextarea", "./useTextareaStyles"], function (require, exports, React, renderTextarea_1, useTextarea_1, useTextareaStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Textarea = void 0;
+    /**
+     * The Textarea component allows the user to enter and edit text in multiple lines.
+     */
+    exports.Textarea = React.forwardRef(function (props, ref) {
+        var state = useTextarea_1.useTextarea_unstable(props, ref);
+        useTextareaStyles_1.useTextareaStyles_unstable(state);
+        return renderTextarea_1.renderTextarea_unstable(state);
+    });
+    exports.Textarea.displayName = 'Textarea';
+});
+//# sourceMappingURL=Textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-textarea/src/components/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACtF,IAAM,KAAK,GAAG,kCAAoB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE/C,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAClC,OAAO,wCAAuB,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","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"]}

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

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Textarea.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-textarea/src/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\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n  ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * Styling the Textarea should use.\n   *\n   * @default outline\n   *\n   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.\n   */\n  appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';\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   * 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   * The value of the Textarea.\n   */\n  value?: string;\n};\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\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-amd/components/Textarea/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Textarea", "./Textarea.types", "./renderTextarea", "./useTextarea", "./useTextareaStyles"], function (require, exports, tslib_1, Textarea_1, Textarea_types_1, renderTextarea_1, useTextarea_1, useTextareaStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Textarea_1, exports);
+    tslib_1.__exportStar(Textarea_types_1, exports);
+    tslib_1.__exportStar(renderTextarea_1, exports);
+    tslib_1.__exportStar(useTextarea_1, exports);
+    tslib_1.__exportStar(useTextareaStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-textarea/src/components/Textarea/index.ts"],"names":[],"mappings":";;;IAAA,0CAA2B;IAC3B,gDAAiC;IACjC,gDAAiC;IACjC,6CAA8B;IAC9B,mDAAoC","sourcesContent":["export * from './Textarea';\nexport * from './Textarea.types';\nexport * from './renderTextarea';\nexport * from './useTextarea';\nexport * from './useTextareaStyles';\n"]}

package/lib-amd/components/Textarea/renderTextarea.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderTextarea_unstable = void 0;
+    /**
+     * Render the final JSX of Textarea
+     */
+    var renderTextarea_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(slots.textarea, tslib_1.__assign({}, slotProps.textarea))));
+    };
+    exports.renderTextarea_unstable = renderTextarea_unstable;
+});
+//# sourceMappingURL=renderTextarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderTextarea.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-textarea/src/components/Textarea/renderTextarea.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAoB;QACpD,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,CAAC,EAAnD,KAAK,WAAA,EAAE,SAAS,eAAmC,CAAC;QAE5D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI,CAC/B,CACd,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,uBAAuB,2BAQlC","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"]}

package/lib-amd/components/Textarea/useTextarea.js

@@ -0,0 +1,59 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTextarea_unstable = void 0;
+    /**
+     * 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
+     */
+    var useTextarea_unstable = function (props, ref) {
+        var _a = props.size, size = _a === void 0 ? 'medium' : _a, _b = props.appearance, appearance = _b === void 0 ? 'outline' : _b, _c = props.resize, resize = _c === void 0 ? 'none' : _c, onChange = props.onChange;
+        if (process.env.NODE_ENV !== 'production' &&
+            (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')) {
+            // eslint-disable-next-line no-console
+            console.error("The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the" +
+                ' future.');
+        }
+        var _d = react_utilities_1.useControllableState({
+            state: props.value,
+            defaultState: props.defaultValue,
+            initialState: undefined,
+        }), value = _d[0], setValue = _d[1];
+        var nativeProps = react_utilities_1.getPartitionedNativeProps({
+            props: props,
+            primarySlotTagName: 'textarea',
+            excludedPropNames: ['onChange', 'value', 'defaultValue'],
+        });
+        var state = {
+            size: size,
+            appearance: appearance,
+            resize: resize,
+            components: {
+                root: 'span',
+                textarea: 'textarea',
+            },
+            textarea: react_utilities_1.resolveShorthand(props.textarea, {
+                required: true,
+                defaultProps: tslib_1.__assign({ ref: ref }, nativeProps.primary),
+            }),
+            root: react_utilities_1.resolveShorthand(props.root, {
+                required: true,
+                defaultProps: nativeProps.root,
+            }),
+        };
+        state.textarea.value = value;
+        state.textarea.onChange = react_utilities_1.useEventCallback(function (ev) {
+            var newValue = ev.target.value;
+            onChange === null || onChange === void 0 ? void 0 : onChange(ev, { value: newValue });
+            setValue(newValue);
+        });
+        return state;
+    };
+    exports.useTextarea_unstable = useTextarea_unstable;
+});
+//# sourceMappingURL=useTextarea.js.map

package/lib-amd/components/Textarea/useTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextarea.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts"],"names":[],"mappings":";;;;IASA;;;;;;;;OAQG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAAoB,EAAE,GAAmC;QACpF,IAAA,KAAuE,KAAK,KAA7D,EAAf,IAAI,mBAAG,QAAQ,KAAA,EAAE,KAAsD,KAAK,WAArC,EAAtB,UAAU,mBAAG,SAAS,KAAA,EAAE,KAA8B,KAAK,OAApB,EAAf,MAAM,mBAAG,MAAM,KAAA,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAErF,IACE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;YACrC,CAAC,UAAU,KAAK,sBAAsB,IAAI,UAAU,KAAK,uBAAuB,CAAC,EACjF;YACA,sCAAsC;YACtC,OAAO,CAAC,KAAK,CACX,8GAA8G;gBAC5G,UAAU,CACb,CAAC;SACH;QAEK,IAAA,KAAoB,sCAAoB,CAAC;YAC7C,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,YAAY,EAAE,SAAS;SACxB,CAAC,EAJK,KAAK,QAAA,EAAE,QAAQ,QAIpB,CAAC;QAEH,IAAM,WAAW,GAAG,2CAAyB,CAAC;YAC5C,KAAK,OAAA;YACL,kBAAkB,EAAE,UAAU;YAC9B,iBAAiB,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,cAAc,CAAC;SACzD,CAAC,CAAC;QAEH,IAAM,KAAK,GAAkB;YAC3B,IAAI,MAAA;YACJ,UAAU,YAAA;YACV,MAAM,QAAA;YACN,UAAU,EAAE;gBACV,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE,UAAU;aACrB;YACD,QAAQ,EAAE,kCAAgB,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACzC,QAAQ,EAAE,IAAI;gBACd,YAAY,qBACV,GAAG,KAAA,IACA,WAAW,CAAC,OAAO,CACvB;aACF,CAAC;YACF,IAAI,EAAE,kCAAgB,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE,WAAW,CAAC,IAAI;aAC/B,CAAC;SACH,CAAC;QAEF,KAAK,CAAC,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;QAC7B,KAAK,CAAC,QAAQ,CAAC,QAAQ,GAAG,kCAAgB,CAAC,UAAA,EAAE;YAC3C,IAAM,QAAQ,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;YACpC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAvDW,QAAA,oBAAoB,wBAuD/B","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TextareaProps, TextareaState } from './Textarea.types';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n  const { size = 'medium', appearance = 'outline', resize = 'none', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: undefined,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'textarea',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: TextareaState = {\n    size,\n    appearance,\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: resolveShorthand(props.textarea, {\n      required: true,\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.textarea.value = value;\n  state.textarea.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"]}

package/lib-amd/components/Textarea/useTextareaStyles.js

@@ -0,0 +1,131 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
+    "use strict";
+    var _a;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTextareaStyles_unstable = exports.textareaClassNames = void 0;
+    exports.textareaClassNames = {
+        root: 'fui-Textarea',
+        textarea: 'fui-Textarea__textarea',
+    };
+    var textareaHeight = {
+        small: '24px',
+        medium: '32px',
+        large: '40px',
+    };
+    /**
+     * Styles for the root(wrapper) slot
+     */
+    var useRootStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', boxSizing: 'border-box', position: 'relative' }, react_1.shorthands.padding('0', '0', react_theme_1.tokens.strokeWidthThick, '0')), react_1.shorthands.margin('0')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)),
+        disabled: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStrokeDisabled)), (_a = {}, _a["& > textarea"] = {
+            cursor: 'not-allowed',
+            '::placeholder': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+        }, _a['@media (forced-colors: active)'] = tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), _a)),
+        interactive: {
+            // This is all for the bottom focus border.
+            // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
+            '::after': tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', content: '""', position: 'absolute', left: '-1px', bottom: '-1px', right: '-1px', 
+                // Maintaining the correct corner radius:
+                // Use the whole border-radius as the height and only put radii on the bottom corners.
+                // (Otherwise the radius would be automatically reduced to fit available space.)
+                // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
+                height: "max(" + react_theme_1.tokens.strokeWidthThick + ", " + react_theme_1.tokens.borderRadiusMedium + ")", borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium, borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium }, react_1.shorthands.borderBottom(react_theme_1.tokens.strokeWidthThick, 'solid', react_theme_1.tokens.colorCompoundBrandStroke)), { clipPath: "inset(calc(100% - " + react_theme_1.tokens.strokeWidthThick + ") 0 0 0)", 
+                // Animation for focus OUT
+                transform: 'scaleX(0)', transitionProperty: 'transform', transitionDuration: react_theme_1.tokens.durationUltraFast, transitionDelay: react_theme_1.tokens.curveAccelerateMid, '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                } }),
+            ':focus-within::after': {
+                // Animation for focus IN
+                transform: 'scaleX(1)',
+                transitionProperty: 'transform',
+                transitionDuration: react_theme_1.tokens.durationNormal,
+                transitionDelay: react_theme_1.tokens.curveDecelerateMid,
+                '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                },
+            },
+            ':focus-within:active::after': {
+                // This is if the user clicks the field again while it's already focused
+                borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
+            },
+            ':focus-within': {
+                outlineWidth: react_theme_1.tokens.strokeWidthThick,
+                outlineStyle: 'solid',
+                outlineColor: 'transparent',
+            },
+        },
+        filled: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorTransparentStroke)), { ':hover,:focus-within': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)) }),
+        'filled-darker': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
+        },
+        'filled-lighter': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
+        },
+        'filled-darker-shadow': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground3 }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorTransparentStrokeInteractive)), { boxShadow: react_theme_1.tokens.shadow2 }),
+        'filled-lighter-shadow': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorTransparentStrokeInteractive)), { boxShadow: react_theme_1.tokens.shadow2 }),
+        outline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
+        outlineInteractive: {
+            ':hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
+            ':active': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }),
+            ':focus-within': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorCompoundBrandStroke }),
+        },
+        invalid: {
+            ':not(:focus-within),:hover:not(:focus-within)': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteRedBorder2)),
+        },
+    });
+    /**
+     * Styles for the textarea slot
+     */
+    var useTextareaStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderStyle('none')), react_1.shorthands.margin('0')), { backgroundColor: 'transparent', boxSizing: 'border-box', color: react_theme_1.tokens.colorNeutralForeground1, flexGrow: 1, fontFamily: react_theme_1.tokens.fontFamilyBase, height: '100%', maxHeight: '100%', '::placeholder': {
+                color: react_theme_1.tokens.colorNeutralForeground4,
+                opacity: 1,
+            }, '::selection': {
+                color: react_theme_1.tokens.colorNeutralForegroundInverted,
+                backgroundColor: react_theme_1.tokens.colorNeutralBackgroundInverted,
+            }, outlineStyle: 'none' }),
+        // The padding style adds both content and regular padding (from design spec), this is because the handle is not
+        // affected by changing the padding of the root.
+        small: tslib_1.__assign(tslib_1.__assign({ height: textareaHeight.small, minHeight: '40px' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalXS, "calc(" + react_theme_1.tokens.spacingHorizontalSNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")), react_theme_1.typographyStyles.caption1),
+        medium: tslib_1.__assign(tslib_1.__assign({ height: textareaHeight.medium, minHeight: '52px' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalSNudge, "calc(" + react_theme_1.tokens.spacingHorizontalMNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")), react_theme_1.typographyStyles.body1),
+        large: tslib_1.__assign(tslib_1.__assign({ height: textareaHeight.large, minHeight: '64px' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, "calc(" + react_theme_1.tokens.spacingHorizontalM + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")), { fontSize: react_theme_1.tokens.fontSizeBase400, lineHeight: react_theme_1.tokens.lineHeightBase400 }),
+    });
+    /**
+     * Styles for the textarea's resize property
+     */
+    var useTextareaResizeStyles = react_1.makeStyles({
+        none: {
+            resize: 'none',
+        },
+        both: {
+            resize: 'both',
+        },
+        horizontal: {
+            resize: 'horizontal',
+        },
+        vertical: {
+            resize: 'vertical',
+        },
+    });
+    /**
+     * Apply styling to the Textarea slots based on the state
+     */
+    var useTextareaStyles_unstable = function (state) {
+        var size = state.size, appearance = state.appearance, resize = state.resize;
+        var disabled = state.textarea.disabled;
+        var invalid = "" + state.textarea['aria-invalid'] === 'true';
+        var filled = appearance.startsWith('filled');
+        var rootStyles = useRootStyles();
+        state.root.className = react_1.mergeClasses(exports.textareaClassNames.root, rootStyles.base, rootStyles[appearance], filled && rootStyles.filled, disabled && rootStyles.disabled, !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);
+        var textareaStyles = useTextareaStyles();
+        var textareaResizeStyles = useTextareaResizeStyles();
+        state.textarea.className = react_1.mergeClasses(exports.textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], state.textarea.className);
+        return state;
+    };
+    exports.useTextareaStyles_unstable = useTextareaStyles_unstable;
+});
+//# sourceMappingURL=useTextareaStyles.js.map

package/lib-amd/components/Textarea/useTextareaStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextareaStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n  root: 'fui-Textarea',\n  textarea: 'fui-Textarea__textarea',\n};\n\nconst textareaHeight = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    position: 'relative',\n    // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n    ...shorthands.padding('0', '0', tokens.strokeWidthThick, '0'),\n    ...shorthands.margin('0'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n    [`& > textarea`]: {\n      cursor: 'not-allowed',\n      '::placeholder': {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n      // Animation for focus OUT\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      // Animation for focus IN\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      // This is if the user clicks the field again while it's already focused\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    ':focus-within': {\n      outlineWidth: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n\n  filled: {\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n    ':hover,:focus-within': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorCompoundBrandStroke,\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n  base: {\n    ...shorthands.borderStyle('none'),\n    ...shorthands.margin('0'),\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n    maxHeight: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    '::selection': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorNeutralBackgroundInverted,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n  // affected by changing the padding of the root.\n  small: {\n    height: textareaHeight.small,\n    minHeight: '40px',\n    ...shorthands.padding(\n      tokens.spacingVerticalXS,\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: textareaHeight.medium,\n    minHeight: '52px',\n    ...shorthands.padding(\n      tokens.spacingVerticalSNudge,\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: textareaHeight.large,\n    minHeight: '64px',\n    ...shorthands.padding(\n      tokens.spacingVerticalS,\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n  none: {\n    resize: 'none',\n  },\n  both: {\n    resize: 'both',\n  },\n  horizontal: {\n    resize: 'horizontal',\n  },\n  vertical: {\n    resize: 'vertical',\n  },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n  const { size, appearance, resize } = state;\n  const disabled = state.textarea.disabled;\n  const invalid = `${state.textarea['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    rootStyles[appearance],\n    filled && rootStyles.filled,\n    disabled && rootStyles.disabled,\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    state.root.className,\n  );\n\n  const textareaStyles = useTextareaStyles();\n  const textareaResizeStyles = useTextareaResizeStyles();\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    state.textarea.className,\n  );\n\n  return state;\n};\n"]}

package/lib-amd/components/TextareaField/TextareaField.js

@@ -0,0 +1,13 @@
+define(["require", "exports", "react", "@fluentui/react-field", "../../Textarea"], function (require, exports, React, react_field_1, Textarea_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TextareaField = exports.textareaFieldClassNames = void 0;
+    exports.textareaFieldClassNames = react_field_1.getFieldClassNames('TextareaField');
+    exports.TextareaField = React.forwardRef(function (props, ref) {
+        var state = react_field_1.useField_unstable(props, ref, { component: Textarea_1.Textarea, classNames: exports.textareaFieldClassNames });
+        react_field_1.useFieldStyles_unstable(state);
+        return react_field_1.renderField_unstable(state);
+    });
+    exports.TextareaField.displayName = 'TextareaField';
+});
+//# sourceMappingURL=TextareaField.js.map

package/lib-amd/components/TextareaField/TextareaField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-textarea/src/components/TextareaField/TextareaField.tsx"],"names":[],"mappings":";;;;IAaa,QAAA,uBAAuB,GAAG,gCAAkB,CAAC,eAAe,CAAC,CAAC;IAE9D,QAAA,aAAa,GAA4C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChG,IAAM,KAAK,GAAG,+BAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,mBAAQ,EAAE,UAAU,EAAE,+BAAuB,EAAE,CAAC,CAAC;QAC1G,qCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Textarea } from '../../Textarea';\n\nexport type TextareaFieldProps = FieldProps<typeof Textarea>;\n\nexport const textareaFieldClassNames = getFieldClassNames('TextareaField');\n\nexport const TextareaField: ForwardRefComponent<TextareaFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Textarea, classNames: textareaFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nTextareaField.displayName = 'TextareaField';\n"]}

package/lib-amd/components/TextareaField/index.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./TextareaField"], function (require, exports, tslib_1, TextareaField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(TextareaField_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/TextareaField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-textarea/src/components/TextareaField/index.ts"],"names":[],"mappings":";;;IAAA,+CAAgC","sourcesContent":["export * from './TextareaField';\n"]}

package/lib-amd/index.js

@@ -0,0 +1,13 @@
+define(["require", "exports", "./Textarea", "./TextareaField"], function (require, exports, Textarea_1, TextareaField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.textareaFieldClassNames = exports.TextareaField_unstable = exports.useTextarea_unstable = exports.useTextareaStyles_unstable = exports.textareaClassNames = exports.renderTextarea_unstable = exports.Textarea = void 0;
+    Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return Textarea_1.Textarea; } });
+    Object.defineProperty(exports, "renderTextarea_unstable", { enumerable: true, get: function () { return Textarea_1.renderTextarea_unstable; } });
+    Object.defineProperty(exports, "textareaClassNames", { enumerable: true, get: function () { return Textarea_1.textareaClassNames; } });
+    Object.defineProperty(exports, "useTextareaStyles_unstable", { enumerable: true, get: function () { return Textarea_1.useTextareaStyles_unstable; } });
+    Object.defineProperty(exports, "useTextarea_unstable", { enumerable: true, get: function () { return Textarea_1.useTextarea_unstable; } });
+    Object.defineProperty(exports, "TextareaField_unstable", { enumerable: true, get: function () { return TextareaField_1.TextareaField; } });
+    Object.defineProperty(exports, "textareaFieldClassNames", { enumerable: true, get: function () { return TextareaField_1.textareaFieldClassNames; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-textarea/src/index.ts"],"names":[],"mappings":";;;;IACE,oGAAA,QAAQ,OAAA;IACR,mHAAA,uBAAuB,OAAA;IACvB,8GAAA,kBAAkB,OAAA;IAClB,sHAAA,0BAA0B,OAAA;IAC1B,gHAAA,oBAAoB,OAAA;IAIb,uHAAA,aAAa,OAA0B;IAAE,wHAAA,uBAAuB,OAAA","sourcesContent":["export {\n  Textarea,\n  renderTextarea_unstable,\n  textareaClassNames,\n  useTextareaStyles_unstable,\n  useTextarea_unstable,\n} from './Textarea';\nexport type { TextareaProps, TextareaSlots, TextareaState } from './Textarea';\n\nexport { TextareaField as TextareaField_unstable, textareaFieldClassNames } from './TextareaField';\nexport type { TextareaFieldProps as TextareaFieldProps_unstable } from './TextareaField';\n"]}

package/lib-commonjs/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Textarea.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Textarea/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/Textarea.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Textarea/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/TextareaField.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/TextareaField/index"), exports);
+//# sourceMappingURL=TextareaField.js.map

package/lib-commonjs/TextareaField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-textarea/src/TextareaField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/TextareaField/index';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,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/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/components/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,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-commonjs/components/Textarea/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Textarea/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Textarea';\nexport * from './Textarea.types';\nexport * from './renderTextarea';\nexport * from './useTextarea';\nexport * from './useTextareaStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/components/Textarea/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Textarea';\nexport * from './Textarea.types';\nexport * from './renderTextarea';\nexport * from './useTextarea';\nexport * from './useTextareaStyles';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Textarea/renderTextarea.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","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/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/components/Textarea/renderTextarea.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","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-commonjs/components/Textarea/useTextarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Textarea/useTextarea.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAQA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA6E;EAC/G,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C,MAAM,GAAG,MAApD;IAA4D;EAA5D,IAAyE,KAA/E;;EAEA,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,KACC,UAAU,KAAK,sBAAf,IAAyC,UAAU,KAAK,uBADzD,CADF,EAGE;IACA;IACA,OAAO,CAAC,KAAR,CACE,iHACE,UAFJ;EAID;;EAED,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAArB,CAA1B;EAMA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,UAFwB;IAG5C,iBAAiB,EAAE,CAAC,UAAD,EAAa,OAAb,EAAsB,cAAtB;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAkB;IAC3B,IAD2B;IAE3B,UAF2B;IAG3B,MAH2B;IAI3B,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,QAAQ,EAAE;IAFA,CAJe;IAQ3B,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,QAAvB,EAAiC;MACzC,QAAQ,EAAE,IAD+B;MAEzC,YAAY,EAAE;QACZ,GADY;QAEZ,GAAG,WAAW,CAAC;MAFH;IAF2B,CAAjC,CARiB;IAe3B,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAA7B;EAfqB,CAA7B;EAqBA,KAAK,CAAC,QAAN,CAAe,KAAf,GAAuB,KAAvB;EACA,KAAK,CAAC,QAAN,CAAe,QAAf,GAA0B,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IAC9C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJyB,CAA1B;EAMA,OAAO,KAAP;AACD,CAvDM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TextareaProps, TextareaState } from './Textarea.types';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n  const { size = 'medium', appearance = 'outline', resize = 'none', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: undefined,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'textarea',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: TextareaState = {\n    size,\n    appearance,\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: resolveShorthand(props.textarea, {\n      required: true,\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.textarea.value = value;\n  state.textarea.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAQA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA6E;EAC/G,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C,MAAM,GAAG,MAApD;IAA4D;EAA5D,IAAyE,KAA/E;;EAEA,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,KACC,UAAU,KAAK,sBAAf,IAAyC,UAAU,KAAK,uBADzD,CADF,EAGE;IACA;IACA,OAAO,CAAC,KAAR,CACE,iHACE,UAFJ;EAID;;EAED,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAArB,CAA1B;EAMA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,UAFwB;IAG5C,iBAAiB,EAAE,CAAC,UAAD,EAAa,OAAb,EAAsB,cAAtB;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAkB;IAC3B,IAD2B;IAE3B,UAF2B;IAG3B,MAH2B;IAI3B,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,QAAQ,EAAE;IAFA,CAJe;IAQ3B,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,QAAvB,EAAiC;MACzC,QAAQ,EAAE,IAD+B;MAEzC,YAAY,EAAE;QACZ,GADY;QAEZ,GAAG,WAAW,CAAC;MAFH;IAF2B,CAAjC,CARiB;IAe3B,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAA7B;EAfqB,CAA7B;EAqBA,KAAK,CAAC,QAAN,CAAe,KAAf,GAAuB,KAAvB;EACA,KAAK,CAAC,QAAN,CAAe,QAAf,GAA0B,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IAC9C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJyB,CAA1B;EAMA,OAAO,KAAP;AACD,CAvDM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TextareaProps, TextareaState } from './Textarea.types';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n  const { size = 'medium', appearance = 'outline', resize = 'none', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: undefined,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'textarea',\n    excludedPropNames: ['onChange', 'value', 'defaultValue'],\n  });\n\n  const state: TextareaState = {\n    size,\n    appearance,\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: resolveShorthand(props.textarea, {\n      required: true,\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.textarea.value = value;\n  state.textarea.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Textarea/useTextareaStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Textarea/useTextareaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n  root: 'fui-Textarea',\n  textarea: 'fui-Textarea__textarea',\n};\n\nconst textareaHeight = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    position: 'relative',\n    // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n    ...shorthands.padding('0', '0', tokens.strokeWidthThick, '0'),\n    ...shorthands.margin('0'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n    [`& > textarea`]: {\n      cursor: 'not-allowed',\n      '::placeholder': {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n      // Animation for focus OUT\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      // Animation for focus IN\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      // This is if the user clicks the field again while it's already focused\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    ':focus-within': {\n      outlineWidth: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n\n  filled: {\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n    ':hover,:focus-within': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorCompoundBrandStroke,\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n  base: {\n    ...shorthands.borderStyle('none'),\n    ...shorthands.margin('0'),\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n    maxHeight: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    '::selection': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorNeutralBackgroundInverted,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n  // affected by changing the padding of the root.\n  small: {\n    height: textareaHeight.small,\n    minHeight: '40px',\n    ...shorthands.padding(\n      tokens.spacingVerticalXS,\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: textareaHeight.medium,\n    minHeight: '52px',\n    ...shorthands.padding(\n      tokens.spacingVerticalSNudge,\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: textareaHeight.large,\n    minHeight: '64px',\n    ...shorthands.padding(\n      tokens.spacingVerticalS,\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n  none: {\n    resize: 'none',\n  },\n  both: {\n    resize: 'both',\n  },\n  horizontal: {\n    resize: 'horizontal',\n  },\n  vertical: {\n    resize: 'vertical',\n  },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n  const { size, appearance, resize } = state;\n  const disabled = state.textarea.disabled;\n  const invalid = `${state.textarea['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    rootStyles[appearance],\n    filled && rootStyles.filled,\n    disabled && rootStyles.disabled,\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    state.root.className,\n  );\n\n  const textareaStyles = useTextareaStyles();\n  const textareaResizeStyles = useTextareaResizeStyles();\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n  root: 'fui-Textarea',\n  textarea: 'fui-Textarea__textarea',\n};\n\nconst textareaHeight = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    position: 'relative',\n    // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n    ...shorthands.padding('0', '0', tokens.strokeWidthThick, '0'),\n    ...shorthands.margin('0'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n    [`& > textarea`]: {\n      cursor: 'not-allowed',\n      '::placeholder': {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n      // Animation for focus OUT\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      // Animation for focus IN\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      // This is if the user clicks the field again while it's already focused\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    ':focus-within': {\n      outlineWidth: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n\n  filled: {\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n    ':hover,:focus-within': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorCompoundBrandStroke,\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n  base: {\n    ...shorthands.borderStyle('none'),\n    ...shorthands.margin('0'),\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n    maxHeight: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    '::selection': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorNeutralBackgroundInverted,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n  // affected by changing the padding of the root.\n  small: {\n    height: textareaHeight.small,\n    minHeight: '40px',\n    ...shorthands.padding(\n      tokens.spacingVerticalXS,\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: textareaHeight.medium,\n    minHeight: '52px',\n    ...shorthands.padding(\n      tokens.spacingVerticalSNudge,\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: textareaHeight.large,\n    minHeight: '64px',\n    ...shorthands.padding(\n      tokens.spacingVerticalS,\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n  none: {\n    resize: 'none',\n  },\n  both: {\n    resize: 'both',\n  },\n  horizontal: {\n    resize: 'horizontal',\n  },\n  vertical: {\n    resize: 'vertical',\n  },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n  const { size, appearance, resize } = state;\n  const disabled = state.textarea.disabled;\n  const invalid = `${state.textarea['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    rootStyles[appearance],\n    filled && rootStyles.filled,\n    disabled && rootStyles.disabled,\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    state.root.className,\n  );\n\n  const textareaStyles = useTextareaStyles();\n  const textareaResizeStyles = useTextareaResizeStyles();\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TextareaField/TextareaField.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextareaField = exports.textareaFieldClassNames = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
+
+const Textarea_1 = /*#__PURE__*/require("../../Textarea");
+
+exports.textareaFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('TextareaField');
+exports.TextareaField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = react_field_1.useField_unstable(props, ref, {
+    component: Textarea_1.Textarea,
+    classNames: exports.textareaFieldClassNames
+  });
+  react_field_1.useFieldStyles_unstable(state);
+  return react_field_1.renderField_unstable(state);
+});
+exports.TextareaField.displayName = 'TextareaField';
+//# sourceMappingURL=TextareaField.js.map

package/lib-commonjs/components/TextareaField/TextareaField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-textarea/src/components/TextareaField/TextareaField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,UAAA,CAAA,QAAb;IAAuB,UAAU,EAAE,OAAA,CAAA;EAAnC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJqE,CAAzD;AAMb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Textarea } from '../../Textarea';\n\nexport type TextareaFieldProps = FieldProps<typeof Textarea>;\n\nexport const textareaFieldClassNames = getFieldClassNames('TextareaField');\n\nexport const TextareaField: ForwardRefComponent<TextareaFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Textarea, classNames: textareaFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nTextareaField.displayName = 'TextareaField';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TextareaField/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./TextareaField"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/components/TextareaField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-textarea/src/components/TextareaField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './TextareaField';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTextarea_unstable = exports.useTextareaStyles_unstable = exports.textareaClassNames = exports.renderTextarea_unstable = exports.Textarea = void 0;
+exports.textareaFieldClassNames = exports.TextareaField_unstable = exports.useTextarea_unstable = exports.useTextareaStyles_unstable = exports.textareaClassNames = exports.renderTextarea_unstable = exports.Textarea = void 0;
 
 var Textarea_1 = /*#__PURE__*/require("./Textarea");
 
@@ -37,4 +37,19 @@ Object.defineProperty(exports, "useTextarea_unstable", {
     return Textarea_1.useTextarea_unstable;
   }
 });
+
+var TextareaField_1 = /*#__PURE__*/require("./TextareaField");
+
+Object.defineProperty(exports, "TextareaField_unstable", {
+  enumerable: true,
+  get: function () {
+    return TextareaField_1.TextareaField;
+  }
+});
+Object.defineProperty(exports, "textareaFieldClassNames", {
+  enumerable: true,
+  get: function () {
+    return TextareaField_1.textareaFieldClassNames;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA","sourcesContent":["export {\n  Textarea,\n  renderTextarea_unstable,\n  textareaClassNames,\n  useTextareaStyles_unstable,\n  useTextarea_unstable,\n} from './Textarea';\nexport type { TextareaProps, TextareaSlots, TextareaState } from './Textarea';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-textarea/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AAIF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAyC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n  Textarea,\n  renderTextarea_unstable,\n  textareaClassNames,\n  useTextareaStyles_unstable,\n  useTextarea_unstable,\n} from './Textarea';\nexport type { TextareaProps, TextareaSlots, TextareaState } from './Textarea';\n\nexport { TextareaField as TextareaField_unstable, textareaFieldClassNames } from './TextareaField';\nexport type { TextareaFieldProps as TextareaFieldProps_unstable } from './TextareaField';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-textarea",
-  "version": "9.1.4",
+  "version": "9.1.6",
   "description": "Fluent UI TextArea component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -20,20 +20,20 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-textarea/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.17",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-theme": "^9.1.1",
-    "@fluentui/react-utilities": "^9.2.0",
+    "@fluentui/react-field": "9.0.0-alpha.9",
+    "@fluentui/react-theme": "^9.1.2",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },
@@ -48,5 +48,13 @@
       "major",
       "prerelease"
     ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
   }
 }