@fluentui/react-textarea 9.7.1 → 9.7.3

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-textarea
 
-This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:33:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.7.3)
+
+Tue, 26 May 2026 09:33:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.7.2..@fluentui/react-textarea_v9.7.3)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.7.2)
+
+Thu, 23 Apr 2026 14:21:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.7.1..@fluentui/react-textarea_v9.7.2)
+
+### Patches
+
+- fix: update types for render function ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.7.1)
 
-Wed, 01 Apr 2026 15:50:23 GMT 
+Wed, 01 Apr 2026 15:52:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.7.0..@fluentui/react-textarea_v9.7.1)
 
 ### Patches

package/dist/index.d.ts

@@ -2,14 +2,14 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * Render the final JSX of Textarea
  */
-export declare const renderTextarea_unstable: (state: TextareaState) => JSXElement;
+export declare const renderTextarea_unstable: (state: TextareaBaseState) => JSXElement;
 
 /**
  * The Textarea component allows the user to enter and edit text in multiple lines.

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

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * Data passed to the `onChange` callback when the textarea's value changes.
+ */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/Textarea.types.ts"],"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  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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 * Textarea base props, excluding design-related props like appearance and size.\n * Note: resize is kept as it is a structural/behavioral prop.\n */\nexport type TextareaBaseProps = Omit<TextareaProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Textarea base state, excluding design-related state like appearance and size.\n */\nexport type TextareaBaseState = Omit<TextareaState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\nexport type TextareaOnChangeData = {\n  value: string;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Textarea/Textarea.types.ts"],"sourcesContent":["import type * 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  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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 * Textarea base props, excluding design-related props like appearance and size.\n * Note: resize is kept as it is a structural/behavioral prop.\n */\nexport type TextareaBaseProps = Omit<TextareaProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Textarea base state, excluding design-related state like appearance and size.\n */\nexport type TextareaBaseState = Omit<TextareaState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\nexport type TextareaOnChangeData = {\n  value: string;\n};\n"],"names":[],"mappings":"AAkFA;;CAEC,GACD,WAEE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/renderTextarea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  assertSlots<TextareaSlots>(state);\n\n  return (\n    <state.root>\n      <state.textarea />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTextarea_unstable","state","root","textarea"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,QAAQ;;AAGrB,EAAE"}
+{"version":3,"sources":["../src/components/Textarea/renderTextarea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TextareaBaseState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaBaseState): JSXElement => {\n  assertSlots<TextareaSlots>(state);\n\n  return (\n    <state.root>\n      <state.textarea />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTextarea_unstable","state","root","textarea"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,QAAQ;;AAGrB,EAAE"}

package/lib/components/Textarea/useTextarea.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
 import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaBaseProps, TextareaBaseState, TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\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 overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = 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 baseState = useTextareaBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for Textarea component, which manages state related to slots structure and\n * controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Textarea component.\n * @param ref - User provided ref to be passed to the Textarea component.\n */\nexport const useTextareaBase_unstable = (\n  props: TextareaBaseProps,\n  ref?: React.Ref<HTMLTextAreaElement>,\n): TextareaBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const { resize = 'none', onChange } = props;\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: TextareaBaseState = {\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: slot.always(props.textarea, {\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'textarea',\n    }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","baseState","useTextareaBase_unstable","supportsLabelFor","supportsRequired","supportsSize","resize","onChange","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEpH,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,YAAYJ;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,YAAYC,yBAAyBP,WAAWL;IAEtD,OAAO;QACL,GAAGW,SAAS;QACZT;QACAC;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMS,2BAA2B,CACtCb,OACAC;IAEA,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEc,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAM,EAAEC,SAAS,MAAM,EAAEC,QAAQ,EAAE,GAAGlB;IAEtC,MAAM,CAACmB,OAAOC,SAAS,GAAG1B,qBAAqB;QAC7C2B,OAAOrB,MAAMmB,KAAK;QAClBG,cAActB,MAAMuB,YAAY;QAChCC,cAAcC;IAChB;IAEA,MAAMC,cAAcjC,0BAA0B;QAC5CO;QACA2B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMP,QAA2B;QAC/BJ;QACAY,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUnC,KAAKoC,MAAM,CAAChC,MAAM+B,QAAQ,EAAE;YACpCE,cAAc;gBACZhC;gBACA,GAAGyB,YAAYQ,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,MAAMlC,KAAKoC,MAAM,CAAChC,MAAM8B,IAAI,EAAE;YAC5BG,cAAcP,YAAYI,IAAI;YAC9BK,aAAa;QACf;IACF;IAEAd,MAAMU,QAAQ,CAACZ,KAAK,GAAGA;IACvBE,MAAMU,QAAQ,CAACb,QAAQ,GAAGvB,iBAAiByC,CAAAA;QACzC,MAAMC,WAAWD,GAAGE,MAAM,CAACnB,KAAK;QAChCD,qBAAAA,+BAAAA,SAAWkB,IAAI;YAAEjB,OAAOkB;QAAS;QACjCjB,SAASiB;IACX;IAEA,OAAOhB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaBaseProps, TextareaBaseState, TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\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 overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = 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 baseState = useTextareaBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for Textarea component, which manages state related to slots structure and\n * controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Textarea component.\n * @param ref - User provided ref to be passed to the Textarea component.\n */\nexport const useTextareaBase_unstable = (\n  props: TextareaBaseProps,\n  ref?: React.Ref<HTMLTextAreaElement>,\n): TextareaBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const { resize = 'none', onChange } = props;\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: TextareaBaseState = {\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: slot.always(props.textarea, {\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'textarea',\n    }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\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"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","baseState","useTextareaBase_unstable","supportsLabelFor","supportsRequired","supportsSize","resize","onChange","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":"AAAA;AAGA,SAASA,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEpH,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,YAAYJ;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,YAAYC,yBAAyBP,WAAWL;IAEtD,OAAO;QACL,GAAGW,SAAS;QACZT;QACAC;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMS,2BAA2B,CACtCb,OACAC;IAEA,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEc,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAM,EAAEC,SAAS,MAAM,EAAEC,QAAQ,EAAE,GAAGlB;IAEtC,MAAM,CAACmB,OAAOC,SAAS,GAAG1B,qBAAqB;QAC7C2B,OAAOrB,MAAMmB,KAAK;QAClBG,cAActB,MAAMuB,YAAY;QAChCC,cAAcC;IAChB;IAEA,MAAMC,cAAcjC,0BAA0B;QAC5CO;QACA2B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMP,QAA2B;QAC/BJ;QACAY,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUnC,KAAKoC,MAAM,CAAChC,MAAM+B,QAAQ,EAAE;YACpCE,cAAc;gBACZhC;gBACA,GAAGyB,YAAYQ,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,MAAMlC,KAAKoC,MAAM,CAAChC,MAAM8B,IAAI,EAAE;YAC5BG,cAAcP,YAAYI,IAAI;YAC9BK,aAAa;QACf;IACF;IAEAd,MAAMU,QAAQ,CAACZ,KAAK,GAAGA;IACvBE,MAAMU,QAAQ,CAACb,QAAQ,GAAGvB,iBAAiByC,CAAAA;QACzC,MAAMC,WAAWD,GAAGE,MAAM,CAACnB,KAAK;QAChCD,qBAAAA,+BAAAA,SAAWkB,IAAI;YAAEjB,OAAOkB;QAAS;QACjCjB,SAASiB;IACX;IAEA,OAAOhB;AACT,EAAE"}

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

@@ -395,9 +395,11 @@ export const useTextareaStyles_unstable = state => {
   const invalid = `${state.textarea['aria-invalid']}` === 'true';
   const filled = appearance.startsWith('filled');
   const rootStyles = useRootStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);
   const textareaStyles = useTextareaStyles();
   const textareaResizeStyles = useTextareaResizeStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"sources":["useTextareaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n    root: 'fui-Textarea',\n    textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const 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        padding: `0 0 ${tokens.strokeWidthThick} 0`,\n        margin: '0',\n        borderRadius: tokens.borderRadiusMedium,\n        verticalAlign: 'top'\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\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            // 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            // 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            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n            // Animation for focus OUT\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\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            '@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    filled: {\n        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        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n        boxShadow: tokens.shadow2\n    },\n    'filled-lighter-shadow': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n        boxShadow: tokens.shadow2\n    },\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        ':hover': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        ':active': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        ':focus-within': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorCompoundBrandStroke\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    }\n});\n/**\n * Styles for the textarea slot\n */ const useTextareaStyles = makeStyles({\n    base: {\n        ...shorthands.borderStyle('none'),\n        margin: '0',\n        backgroundColor: 'transparent',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        flexGrow: 1,\n        fontFamily: tokens.fontFamilyBase,\n        height: '100%',\n        '::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        },\n        outlineStyle: 'none'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\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        minHeight: '40px',\n        padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '200px',\n        ...typographyStyles.caption1\n    },\n    medium: {\n        minHeight: '52px',\n        padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '260px',\n        ...typographyStyles.body1\n    },\n    large: {\n        minHeight: '64px',\n        padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '320px',\n        ...typographyStyles.body2\n    }\n});\n/**\n * Styles for the textarea's resize property\n */ const 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 * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n    'use no memo';\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    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n    const textareaStyles = useTextareaStyles();\n    const textareaResizeStyles = useTextareaResizeStyles();\n    state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"sources":["useTextareaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n    root: 'fui-Textarea',\n    textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const 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        padding: `0 0 ${tokens.strokeWidthThick} 0`,\n        margin: '0',\n        borderRadius: tokens.borderRadiusMedium,\n        verticalAlign: 'top'\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\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            // 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            // 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            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n            // Animation for focus OUT\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\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            '@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    filled: {\n        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        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n        boxShadow: tokens.shadow2\n    },\n    'filled-lighter-shadow': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n        boxShadow: tokens.shadow2\n    },\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        ':hover': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        ':active': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        ':focus-within': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorCompoundBrandStroke\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    }\n});\n/**\n * Styles for the textarea slot\n */ const useTextareaStyles = makeStyles({\n    base: {\n        ...shorthands.borderStyle('none'),\n        margin: '0',\n        backgroundColor: 'transparent',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        flexGrow: 1,\n        fontFamily: tokens.fontFamilyBase,\n        height: '100%',\n        '::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        },\n        outlineStyle: 'none'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\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        minHeight: '40px',\n        padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '200px',\n        ...typographyStyles.caption1\n    },\n    medium: {\n        minHeight: '52px',\n        padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '260px',\n        ...typographyStyles.body1\n    },\n    large: {\n        minHeight: '64px',\n        padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '320px',\n        ...typographyStyles.body2\n    }\n});\n/**\n * Styles for the textarea's resize property\n */ const 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 * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n    'use no memo';\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    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n    const textareaStyles = useTextareaStyles();\n    const textareaResizeStyles = useTextareaResizeStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Textarea/useTextareaStyles.styles.raw.js

@@ -197,9 +197,11 @@ export const textareaClassNames = {
     const invalid = `${state.textarea['aria-invalid']}` === 'true';
     const filled = appearance.startsWith('filled');
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);
     const textareaStyles = useTextareaStyles();
     const textareaResizeStyles = useTextareaResizeStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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\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    padding: `0 0 ${tokens.strokeWidthThick} 0`,\n    margin: '0',\n    borderRadius: tokens.borderRadiusMedium,\n    verticalAlign: 'top',\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\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      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    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    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\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    margin: '0',\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\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    minHeight: '40px',\n    padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '200px',\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: '52px',\n    padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '260px',\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: '64px',\n    padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '320px',\n    ...typographyStyles.body2,\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  'use no memo';\n\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    disabled && rootStyles.disabled,\n    !disabled && filled && rootStyles.filled,\n    !disabled && rootStyles[appearance],\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    disabled && textareaStyles.disabled,\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { 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\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    padding: `0 0 ${tokens.strokeWidthThick} 0`,\n    margin: '0',\n    borderRadius: tokens.borderRadiusMedium,\n    verticalAlign: 'top',\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\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      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    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    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\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    margin: '0',\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\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    minHeight: '40px',\n    padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '200px',\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: '52px',\n    padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '260px',\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: '64px',\n    padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '320px',\n    ...typographyStyles.body2,\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  'use no memo';\n\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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    disabled && rootStyles.disabled,\n    !disabled && filled && rootStyles.filled,\n    !disabled && rootStyles[appearance],\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  // eslint-disable-next-line react-hooks/immutability\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    disabled && textareaStyles.disabled,\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAgBR,WAAW;IAC/BS,MAAM;QACJC,SAAS;QACTC,WAAW;QACXC,UAAU;QACV,oHAAoH;QACpHC,SAAS,CAAC,IAAI,EAAEV,OAAOW,gBAAgB,CAAC,EAAE,CAAC;QAC3CC,QAAQ;QACRC,cAAcb,OAAOc,kBAAkB;QACvCC,eAAe;IACjB;IAEAC,UAAU;QACRC,iBAAiBjB,OAAOkB,0BAA0B;QAClDC,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAOqB,0BAA0B,EAAE;QAE9E,kCAAkC;YAChC,GAAGtB,WAAWuB,WAAW,CAAC,WAAW;QACvC;IACF;IAEAC,aAAa;QACX,2CAA2C;QAC3C,+FAA+F;QAC/F,WAAW;YACTf,WAAW;YACXgB,SAAS;YACTf,UAAU;YACVgB,MAAM;YACNC,QAAQ;YACRC,OAAO;YAEP,yCAAyC;YACzC,sFAAsF;YACtF,gFAAgF;YAChF,qGAAqG;YACrGC,QAAQ,CAAC,IAAI,EAAE5B,OAAOW,gBAAgB,CAAC,EAAE,EAAEX,OAAOc,kBAAkB,CAAC,CAAC,CAAC;YACvEe,wBAAwB7B,OAAOc,kBAAkB;YACjDgB,yBAAyB9B,OAAOc,kBAAkB;YAElD,mBAAmB;YACnB,8FAA8F;YAC9F,2FAA2F;YAC3F,4EAA4E;YAC5EiB,cAAc,GAAG/B,OAAOW,gBAAgB,CAAC,OAAO,EAAEX,OAAOgC,wBAAwB,EAAE;YACnFC,UAAU,CAAC,kBAAkB,EAAEjC,OAAOW,gBAAgB,CAAC,QAAQ,CAAC;YAEhE,0BAA0B;YAC1BuB,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,OAAOqC,iBAAiB;YAC5CC,iBAAiBtC,OAAOuC,kBAAkB;YAE1C,sDAAsD;gBACpDH,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,wBAAwB;YACtB,yBAAyB;YACzBJ,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,OAAOwC,cAAc;YACzCF,iBAAiBtC,OAAOyC,kBAAkB;YAE1C,sDAAsD;gBACpDL,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,+BAA+B;YAC7B,wEAAwE;YACxEI,mBAAmB1C,OAAO2C,+BAA+B;QAC3D;QACA,iBAAiB;YACfC,cAAc5C,OAAOW,gBAAgB;YACrCkC,cAAc;YACdC,cAAc;QAChB;IACF;IAEAC,QAAQ;QACN5B,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAOgD,sBAAsB,EAAE;QAC1E,wBAAwB;YACtB,GAAGjD,WAAWuB,WAAW,CAACtB,OAAOiD,iCAAiC,CAAC;QACrE;IACF;IACA,iBAAiB;QACfhC,iBAAiBjB,OAAOkD,uBAAuB;IACjD;IACA,kBAAkB;QAChBjC,iBAAiBjB,OAAOmD,uBAAuB;IACjD;IACA,wBAAwB;QACtBlC,iBAAiBjB,OAAOkD,uBAAuB;QAC/C/B,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,OAAOqD,OAAO;IAC3B;IACA,yBAAyB;QACvBpC,iBAAiBjB,OAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,OAAOqD,OAAO;IAC3B;IAEAC,SAAS;QACPrC,iBAAiBjB,OAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAOuD,mBAAmB,EAAE;QACvEb,mBAAmB1C,OAAOwD,4BAA4B;IACxD;IACAC,oBAAoB;QAClB,UAAU;YACRtC,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAO0D,wBAAwB,EAAE;YAC5EhB,mBAAmB1C,OAAO2D,iCAAiC;QAC7D;QAEA,WAAW;YACTxC,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,OAAO6D,mCAAmC;QAC/D;QAEA,iBAAiB;YACf1C,QAAQ,GAAGnB,OAAOoB,eAAe,CAAC,OAAO,EAAEpB,OAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,OAAOgC,wBAAwB;QACpD;IACF;IAEA8B,SAAS;QACP,iDAAiD;YAC/C,GAAG/D,WAAWuB,WAAW,CAACtB,OAAO+D,sBAAsB,CAAC;QAC1D;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,oBAAoBnE,WAAW;IACnCS,MAAM;QACJ,GAAGP,WAAWkE,WAAW,CAAC,OAAO;QACjCrD,QAAQ;QACRK,iBAAiB;QACjBT,WAAW;QACX0D,OAAOlE,OAAOmE,uBAAuB;QACrCC,UAAU;QACVC,YAAYrE,OAAOsE,cAAc;QACjC1C,QAAQ;QAER,iBAAiB;YACfsC,OAAOlE,OAAOuE,uBAAuB;YACrCC,SAAS;QACX;QAEA3B,cAAc;IAChB;IAEA7B,UAAU;QACRkD,OAAOlE,OAAOyE,8BAA8B;QAC5CC,QAAQ;QACR,iBAAiB;YACfR,OAAOlE,OAAOyE,8BAA8B;QAC9C;IACF;IAEA,gHAAgH;IAChH,gDAAgD;IAChDE,OAAO;QACLC,WAAW;QACXlE,SAAS,GAAGV,OAAO6E,iBAAiB,CAAC,MAAM,EAAE7E,OAAO8E,uBAAuB,CAAC,GAAG,EAAE9E,OAAO+E,oBAAoB,CAAC,CAAC,CAAC;QAC/GC,WAAW;QACX,GAAG/E,iBAAiBgF,QAAQ;IAC9B;IACAC,QAAQ;QACNN,WAAW;QACXlE,SAAS,GAAGV,OAAOmF,qBAAqB,CAAC,MAAM,EAAEnF,OAAOoF,uBAAuB,CAAC,GAAG,EAAEpF,OAAO+E,oBAAoB,CAAC,CAAC,CAAC;QACnHC,WAAW;QACX,GAAG/E,iBAAiBoF,KAAK;IAC3B;IACAC,OAAO;QACLV,WAAW;QACXlE,SAAS,GAAGV,OAAOuF,gBAAgB,CAAC,MAAM,EAAEvF,OAAOwF,kBAAkB,CAAC,GAAG,EAAExF,OAAO+E,oBAAoB,CAAC,CAAC,CAAC;QACzGC,WAAW;QACX,GAAG/E,iBAAiBwF,KAAK;IAC3B;AACF;AAEA;;CAEC,GACD,MAAMC,0BAA0B7F,WAAW;IACzC8F,MAAM;QACJC,QAAQ;IACV;IACAC,MAAM;QACJD,QAAQ;IACV;IACAE,YAAY;QACVF,QAAQ;IACV;IACAG,UAAU;QACRH,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMI,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEP,MAAM,EAAE,GAAGK;IACrC,MAAMjF,WAAWiF,MAAM7F,QAAQ,CAACY,QAAQ;IACxC,MAAM8C,UAAU,GAAGmC,MAAM7F,QAAQ,CAAC,eAAe,EAAE,KAAK;IACxD,MAAM2C,SAASoD,WAAWC,UAAU,CAAC;IAErC,MAAMC,aAAahG;IACnB,oDAAoD;IACpD4F,MAAM9F,IAAI,CAACmG,SAAS,GAAGxG,aACrBI,mBAAmBC,IAAI,EACvBkG,WAAW/F,IAAI,EACfU,YAAYqF,WAAWrF,QAAQ,EAC/B,CAACA,YAAY+B,UAAUsD,WAAWtD,MAAM,EACxC,CAAC/B,YAAYqF,UAAU,CAACF,WAAW,EACnC,CAACnF,YAAYqF,WAAW9E,WAAW,EACnC,CAACP,YAAYmF,eAAe,aAAaE,WAAW5C,kBAAkB,EACtE,CAACzC,YAAY8C,WAAWuC,WAAWvC,OAAO,EAC1CmC,MAAM9F,IAAI,CAACmG,SAAS;IAGtB,MAAMC,iBAAiBvC;IACvB,MAAMwC,uBAAuBd;IAC7B,oDAAoD;IACpDO,MAAM7F,QAAQ,CAACkG,SAAS,GAAGxG,aACzBI,mBAAmBE,QAAQ,EAC3BmG,eAAejG,IAAI,EACnBiG,cAAc,CAACL,KAAK,EACpBM,oBAAoB,CAACZ,OAAO,EAC5B5E,YAAYuF,eAAevF,QAAQ,EACnCiF,MAAM7F,QAAQ,CAACkG,SAAS;IAG1B,OAAOL;AACT,EAAE"}

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

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * Data passed to the `onChange` callback when the textarea's value changes.
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/Textarea.types.ts"],"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  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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 * Textarea base props, excluding design-related props like appearance and size.\n * Note: resize is kept as it is a structural/behavioral prop.\n */\nexport type TextareaBaseProps = Omit<TextareaProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Textarea base state, excluding design-related state like appearance and size.\n */\nexport type TextareaBaseState = Omit<TextareaState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\nexport type TextareaOnChangeData = {\n  value: string;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Textarea/Textarea.types.ts"],"sourcesContent":["import type * 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  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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 * Textarea base props, excluding design-related props like appearance and size.\n * Note: resize is kept as it is a structural/behavioral prop.\n */\nexport type TextareaBaseProps = Omit<TextareaProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n  Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Textarea base state, excluding design-related state like appearance and size.\n */\nexport type TextareaBaseState = Omit<TextareaState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\nexport type TextareaOnChangeData = {\n  value: string;\n};\n"],"names":[],"mappings":"AAkFA;;CAEC,GACD,WAEE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/renderTextarea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  assertSlots<TextareaSlots>(state);\n\n  return (\n    <state.root>\n      <state.textarea />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTextarea_unstable","state","root","textarea"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,GACE,mBAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACD,MAAME,QAAQ,EAAA,CAAA;;AAGrB,EAAE"}
+{"version":3,"sources":["../src/components/Textarea/renderTextarea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TextareaBaseState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaBaseState): JSXElement => {\n  assertSlots<TextareaSlots>(state);\n\n  return (\n    <state.root>\n      <state.textarea />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTextarea_unstable","state","root","textarea"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,GACE,mBAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACD,MAAME,QAAQ,EAAA,CAAA;;AAGrB,EAAE"}

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

@@ -17,8 +17,6 @@ _export(exports, {
         return useTextarea_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactfield = require("@fluentui/react-field");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaBaseProps, TextareaBaseState, TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\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 overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = 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 baseState = useTextareaBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for Textarea component, which manages state related to slots structure and\n * controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Textarea component.\n * @param ref - User provided ref to be passed to the Textarea component.\n */\nexport const useTextareaBase_unstable = (\n  props: TextareaBaseProps,\n  ref?: React.Ref<HTMLTextAreaElement>,\n): TextareaBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const { resize = 'none', onChange } = props;\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: TextareaBaseState = {\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: slot.always(props.textarea, {\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'textarea',\n    }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","baseState","useTextareaBase_unstable","supportsLabelFor","supportsRequired","supportsSize","resize","onChange","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;4BAiDasB;eAAAA;;IAhCAd,oBAAAA;;;;;iEAfU,QAAQ;4BACe,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,gBAAYJ,0CAAAA;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAAA,AAAsB,MAAA,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,YAAYC,yBAAyBP,WAAWL;IAEtD,OAAO;QACL,GAAGW,SAAS;QACZT;QACAC;IACF;AACF,EAAE;AASK,iCAAiC,CACtCJ,OACAC;IAEA,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEc,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAM,EAAEC,SAAS,MAAM,EAAEC,QAAQ,EAAE,GAAGlB;IAEtC,MAAM,CAACmB,OAAOC,SAAS,OAAG1B,oCAAAA,EAAqB;QAC7C2B,OAAOrB,MAAMmB,KAAK;QAClBG,cAActB,MAAMuB,YAAY;QAChCC,cAAcC;IAChB;IAEA,MAAMC,kBAAcjC,yCAAAA,EAA0B;QAC5CO;QACA2B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMP,QAA2B;QAC/BJ;QACAY,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUnC,oBAAAA,CAAKoC,MAAM,CAAChC,MAAM+B,QAAQ,EAAE;YACpCE,cAAc;gBACZhC;gBACA,GAAGyB,YAAYQ,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,MAAMlC,oBAAAA,CAAKoC,MAAM,CAAChC,MAAM8B,IAAI,EAAE;YAC5BG,cAAcP,YAAYI,IAAI;YAC9BK,aAAa;QACf;IACF;IAEAd,MAAMU,QAAQ,CAACZ,KAAK,GAAGA;IACvBE,MAAMU,QAAQ,CAACb,QAAQ,OAAGvB,gCAAAA,EAAiByC,CAAAA;QACzC,MAAMC,WAAWD,GAAGE,MAAM,CAACnB,KAAK;QAChCD,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWkB,IAAI;YAAEjB,OAAOkB;QAAS;QACjCjB,SAASiB;IACX;IAEA,OAAOhB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaBaseProps, TextareaBaseState, TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\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 overrides = useOverrides();\n\n  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = 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 baseState = useTextareaBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for Textarea component, which manages state related to slots structure and\n * controlled/uncontrolled value state.\n *\n * @param props - User provided props to the Textarea component.\n * @param ref - User provided ref to be passed to the Textarea component.\n */\nexport const useTextareaBase_unstable = (\n  props: TextareaBaseProps,\n  ref?: React.Ref<HTMLTextAreaElement>,\n): TextareaBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const { resize = 'none', onChange } = props;\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: TextareaBaseState = {\n    resize,\n    components: {\n      root: 'span',\n      textarea: 'textarea',\n    },\n    textarea: slot.always(props.textarea, {\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'textarea',\n    }),\n    root: slot.always(props.root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\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"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","baseState","useTextareaBase_unstable","supportsLabelFor","supportsRequired","supportsSize","resize","onChange","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;4BAiDaqB;eAAAA;;IAhCAd,oBAAAA;;;;4BAdiC,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,gBAAYJ,0CAAAA;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,AAAtBA,MAAsB,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,YAAYC,yBAAyBP,WAAWL;IAEtD,OAAO;QACL,GAAGW,SAAS;QACZT;QACAC;IACF;AACF,EAAE;AASK,iCAAiC,CACtCJ,OACAC;IAEA,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEc,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAM,EAAEC,SAAS,MAAM,EAAEC,QAAQ,EAAE,GAAGlB;IAEtC,MAAM,CAACmB,OAAOC,SAAS,OAAG1B,oCAAAA,EAAqB;QAC7C2B,OAAOrB,MAAMmB,KAAK;QAClBG,cAActB,MAAMuB,YAAY;QAChCC,cAAcC;IAChB;IAEA,MAAMC,kBAAcjC,yCAAAA,EAA0B;QAC5CO;QACA2B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMP,QAA2B;QAC/BJ;QACAY,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUnC,oBAAAA,CAAKoC,MAAM,CAAChC,MAAM+B,QAAQ,EAAE;YACpCE,cAAc;gBACZhC;gBACA,GAAGyB,YAAYQ,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,MAAMlC,oBAAAA,CAAKoC,MAAM,CAAChC,MAAM8B,IAAI,EAAE;YAC5BG,cAAcP,YAAYI,IAAI;YAC9BK,aAAa;QACf;IACF;IAEAd,MAAMU,QAAQ,CAACZ,KAAK,GAAGA;IACvBE,MAAMU,QAAQ,CAACb,QAAQ,OAAGvB,gCAAAA,EAAiByC,CAAAA;QACzC,MAAMC,WAAWD,GAAGE,MAAM,CAACnB,KAAK;QAChCD,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWkB,IAAI;YAAEjB,OAAOkB;QAAS;QACjCjB,SAASiB;IACX;IAEA,OAAOhB;AACT,EAAE"}

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

@@ -613,9 +613,11 @@ const useTextareaStyles_unstable = (state)=>{
     const invalid = `${state.textarea['aria-invalid']}` === 'true';
     const filled = appearance.startsWith('filled');
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);
     const textareaStyles = useTextareaStyles();
     const textareaResizeStyles = useTextareaResizeStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.textarea.className = (0, _react.mergeClasses)(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTextareaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n    root: 'fui-Textarea',\n    textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const 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        padding: `0 0 ${tokens.strokeWidthThick} 0`,\n        margin: '0',\n        borderRadius: tokens.borderRadiusMedium,\n        verticalAlign: 'top'\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\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            // 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            // 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            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n            // Animation for focus OUT\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\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            '@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    filled: {\n        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        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n        boxShadow: tokens.shadow2\n    },\n    'filled-lighter-shadow': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n        boxShadow: tokens.shadow2\n    },\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        ':hover': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        ':active': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        ':focus-within': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorCompoundBrandStroke\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    }\n});\n/**\n * Styles for the textarea slot\n */ const useTextareaStyles = makeStyles({\n    base: {\n        ...shorthands.borderStyle('none'),\n        margin: '0',\n        backgroundColor: 'transparent',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        flexGrow: 1,\n        fontFamily: tokens.fontFamilyBase,\n        height: '100%',\n        '::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        },\n        outlineStyle: 'none'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\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        minHeight: '40px',\n        padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '200px',\n        ...typographyStyles.caption1\n    },\n    medium: {\n        minHeight: '52px',\n        padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '260px',\n        ...typographyStyles.body1\n    },\n    large: {\n        minHeight: '64px',\n        padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '320px',\n        ...typographyStyles.body2\n    }\n});\n/**\n * Styles for the textarea's resize property\n */ const 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 * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n    'use no memo';\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    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n    const textareaStyles = useTextareaStyles();\n    const textareaResizeStyles = useTextareaResizeStyles();\n    state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
+{"version":3,"sources":["useTextareaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n    root: 'fui-Textarea',\n    textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const 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        padding: `0 0 ${tokens.strokeWidthThick} 0`,\n        margin: '0',\n        borderRadius: tokens.borderRadiusMedium,\n        verticalAlign: 'top'\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\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            // 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            // 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            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n            // Animation for focus OUT\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\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            '@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    filled: {\n        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        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n        boxShadow: tokens.shadow2\n    },\n    'filled-lighter-shadow': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n        boxShadow: tokens.shadow2\n    },\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        ':hover': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        ':active': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        ':focus-within': {\n            border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n            borderBottomColor: tokens.colorCompoundBrandStroke\n        }\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    }\n});\n/**\n * Styles for the textarea slot\n */ const useTextareaStyles = makeStyles({\n    base: {\n        ...shorthands.borderStyle('none'),\n        margin: '0',\n        backgroundColor: 'transparent',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        flexGrow: 1,\n        fontFamily: tokens.fontFamilyBase,\n        height: '100%',\n        '::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        },\n        outlineStyle: 'none'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\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        minHeight: '40px',\n        padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '200px',\n        ...typographyStyles.caption1\n    },\n    medium: {\n        minHeight: '52px',\n        padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '260px',\n        ...typographyStyles.body1\n    },\n    large: {\n        minHeight: '64px',\n        padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n        maxHeight: '320px',\n        ...typographyStyles.body2\n    }\n});\n/**\n * Styles for the textarea's resize property\n */ const 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 * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n    'use no memo';\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    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);\n    const textareaStyles = useTextareaStyles();\n    const textareaResizeStyles = useTextareaResizeStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}

package/lib-commonjs/components/Textarea/useTextareaStyles.styles.raw.js

@@ -213,9 +213,11 @@ const useTextareaStyles_unstable = (state)=>{
     const invalid = `${state.textarea['aria-invalid']}` === 'true';
     const filled = appearance.startsWith('filled');
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);
     const textareaStyles = useTextareaStyles();
     const textareaResizeStyles = useTextareaResizeStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.textarea.className = (0, _react.mergeClasses)(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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\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    padding: `0 0 ${tokens.strokeWidthThick} 0`,\n    margin: '0',\n    borderRadius: tokens.borderRadiusMedium,\n    verticalAlign: 'top',\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\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      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    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    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\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    margin: '0',\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\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    minHeight: '40px',\n    padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '200px',\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: '52px',\n    padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '260px',\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: '64px',\n    padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '320px',\n    ...typographyStyles.body2,\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  'use no memo';\n\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    disabled && rootStyles.disabled,\n    !disabled && filled && rootStyles.filled,\n    !disabled && rootStyles[appearance],\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    disabled && textareaStyles.disabled,\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { 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\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    padding: `0 0 ${tokens.strokeWidthThick} 0`,\n    margin: '0',\n    borderRadius: tokens.borderRadiusMedium,\n    verticalAlign: 'top',\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\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      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    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    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\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    margin: '0',\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\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    minHeight: '40px',\n    padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '200px',\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: '52px',\n    padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '260px',\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: '64px',\n    padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    maxHeight: '320px',\n    ...typographyStyles.body2,\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  'use no memo';\n\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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    disabled && rootStyles.disabled,\n    !disabled && filled && rootStyles.filled,\n    !disabled && rootStyles[appearance],\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  // eslint-disable-next-line react-hooks/immutability\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    disabled && textareaStyles.disabled,\n    state.textarea.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"AAAA;;;;;;;;;;;;IAOaK,kBAAAA;;;8BAsNA8F;eAAAA;;;uBA3NwC,iBAAiB;4BAC7B,wBAAwB;AAI1D,2BAA0D;IAC/D7F,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAgBR,iBAAAA,EAAW;IAC/BS,MAAM;QACJC,SAAS;QACTC,WAAW;QACXC,UAAU;QACV,oHAAoH;QACpHC,SAAS,CAAC,IAAI,EAAEV,kBAAAA,CAAOW,gBAAgB,CAAC,EAAE,CAAC;QAC3CC,QAAQ;QACRC,cAAcb,kBAAAA,CAAOc,kBAAkB;QACvCC,eAAe;IACjB;IAEAC,UAAU;QACRC,iBAAiBjB,kBAAAA,CAAOkB,0BAA0B;QAClDC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOqB,0BAA0B,EAAE;QAE9E,kCAAkC;YAChC,GAAGtB,iBAAAA,CAAWuB,WAAW,CAAC,WAAW;QACvC;IACF;IAEAC,aAAa;QACX,2CAA2C;QAC3C,+FAA+F;QAC/F,WAAW;YACTf,WAAW;YACXgB,SAAS;YACTf,UAAU;YACVgB,MAAM;YACNC,QAAQ;YACRC,OAAO;YAEP,yCAAyC;YACzC,sFAAsF;YACtF,gFAAgF;YAChF,qGAAqG;YACrGC,QAAQ,CAAC,IAAI,EAAE5B,kBAAAA,CAAOW,gBAAgB,CAAC,EAAE,EAAEX,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;YACvEe,wBAAwB7B,kBAAAA,CAAOc,kBAAkB;YACjDgB,yBAAyB9B,kBAAAA,CAAOc,kBAAkB;YAElD,mBAAmB;YACnB,8FAA8F;YAC9F,2FAA2F;YAC3F,4EAA4E;YAC5EiB,cAAc,GAAG/B,kBAAAA,CAAOW,gBAAgB,CAAC,OAAO,EAAEX,kBAAAA,CAAOgC,wBAAwB,EAAE;YACnFC,UAAU,CAAC,kBAAkB,EAAEjC,kBAAAA,CAAOW,gBAAgB,CAAC,QAAQ,CAAC;YAEhE,0BAA0B;YAC1BuB,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,kBAAAA,CAAOqC,iBAAiB;YAC5CC,iBAAiBtC,kBAAAA,CAAOuC,kBAAkB;YAE1C,sDAAsD;gBACpDH,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,wBAAwB;YACtB,yBAAyB;YACzBJ,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,kBAAAA,CAAOwC,cAAc;YACzCF,iBAAiBtC,kBAAAA,CAAOyC,kBAAkB;YAE1C,sDAAsD;gBACpDL,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,+BAA+B;YAC7B,wEAAwE;YACxEI,mBAAmB1C,kBAAAA,CAAO2C,+BAA+B;QAC3D;QACA,iBAAiB;YACfC,cAAc5C,kBAAAA,CAAOW,gBAAgB;YACrCkC,cAAc;YACdC,cAAc;QAChB;IACF;IAEAC,QAAQ;QACN5B,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOgD,sBAAsB,EAAE;QAC1E,wBAAwB;YACtB,GAAGjD,iBAAAA,CAAWuB,WAAW,CAACtB,kBAAAA,CAAOiD,iCAAiC,CAAC;QACrE;IACF;IACA,iBAAiB;QACfhC,iBAAiBjB,kBAAAA,CAAOkD,uBAAuB;IACjD;IACA,kBAAkB;QAChBjC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;IACjD;IACA,wBAAwB;QACtBlC,iBAAiBjB,kBAAAA,CAAOkD,uBAAuB;QAC/C/B,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,kBAAAA,CAAOqD,OAAO;IAC3B;IACA,yBAAyB;QACvBpC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,kBAAAA,CAAOqD,OAAO;IAC3B;IAEAC,SAAS;QACPrC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOuD,mBAAmB,EAAE;QACvEb,mBAAmB1C,kBAAAA,CAAOwD,4BAA4B;IACxD;IACAC,oBAAoB;QAClB,UAAU;YACRtC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO0D,wBAAwB,EAAE;YAC5EhB,mBAAmB1C,kBAAAA,CAAO2D,iCAAiC;QAC7D;QAEA,WAAW;YACTxC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,kBAAAA,CAAO6D,mCAAmC;QAC/D;QAEA,iBAAiB;YACf1C,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,kBAAAA,CAAOgC,wBAAwB;QACpD;IACF;IAEA8B,SAAS;QACP,iDAAiD;YAC/C,GAAG/D,iBAAAA,CAAWuB,WAAW,CAACtB,kBAAAA,CAAO+D,sBAAsB,CAAC;QAC1D;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,wBAAoBnE,iBAAAA,EAAW;IACnCS,MAAM;QACJ,GAAGP,iBAAAA,CAAWkE,WAAW,CAAC,OAAO;QACjCrD,QAAQ;QACRK,iBAAiB;QACjBT,WAAW;QACX0D,OAAOlE,kBAAAA,CAAOmE,uBAAuB;QACrCC,UAAU;QACVC,YAAYrE,kBAAAA,CAAOsE,cAAc;QACjC1C,QAAQ;QAER,iBAAiB;YACfsC,OAAOlE,kBAAAA,CAAOuE,uBAAuB;YACrCC,SAAS;QACX;QAEA3B,cAAc;IAChB;IAEA7B,UAAU;QACRkD,OAAOlE,kBAAAA,CAAOyE,8BAA8B;QAC5CC,QAAQ;QACR,iBAAiB;YACfR,OAAOlE,kBAAAA,CAAOyE,8BAA8B;QAC9C;IACF;IAEA,gHAAgH;IAChH,gDAAgD;IAChDE,OAAO;QACLC,WAAW;QACXlE,SAAS,GAAGV,kBAAAA,CAAO6E,iBAAiB,CAAC,MAAM,EAAE7E,kBAAAA,CAAO8E,uBAAuB,CAAC,GAAG,EAAE9E,kBAAAA,CAAO+E,oBAAoB,CAAC,CAAC,CAAC;QAC/GC,WAAW;QACX,GAAG/E,4BAAAA,CAAiBgF,QAAQ;IAC9B;IACAC,QAAQ;QACNN,WAAW;QACXlE,SAAS,GAAGV,kBAAAA,CAAOmF,qBAAqB,CAAC,MAAM,EAAEnF,kBAAAA,CAAOoF,uBAAuB,CAAC,GAAG,EAAEpF,kBAAAA,CAAO+E,oBAAoB,CAAC,CAAC,CAAC;QACnHC,WAAW;QACX,GAAG/E,4BAAAA,CAAiBoF,KAAK;IAC3B;IACAC,OAAO;QACLV,WAAW;QACXlE,SAAS,GAAGV,kBAAAA,CAAOuF,gBAAgB,CAAC,MAAM,EAAEvF,kBAAAA,CAAOwF,kBAAkB,CAAC,GAAG,EAAExF,kBAAAA,CAAO+E,oBAAoB,CAAC,CAAC,CAAC;QACzGC,WAAW;QACX,GAAG/E,4BAAAA,CAAiBwF,KAAK;IAC3B;AACF;AAEA;;CAEC,GACD,MAAMC,8BAA0B7F,iBAAAA,EAAW;IACzC8F,MAAM;QACJC,QAAQ;IACV;IACAC,MAAM;QACJD,QAAQ;IACV;IACAE,YAAY;QACVF,QAAQ;IACV;IACAG,UAAU;QACRH,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACK;IACzC;IAEA,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEP,MAAM,EAAE,GAAGK;IACrC,MAAMjF,WAAWiF,MAAM7F,QAAQ,CAACY,QAAQ;IACxC,MAAM8C,UAAU,GAAGmC,MAAM7F,QAAQ,CAAC,eAAe,EAAE,KAAK;IACxD,MAAM2C,SAASoD,WAAWC,UAAU,CAAC;IAErC,MAAMC,aAAahG;IACnB,oDAAoD;IACpD4F,MAAM9F,IAAI,CAACmG,SAAS,OAAGxG,mBAAAA,EACrBI,mBAAmBC,IAAI,EACvBkG,WAAW/F,IAAI,EACfU,YAAYqF,WAAWrF,QAAQ,EAC/B,CAACA,YAAY+B,UAAUsD,WAAWtD,MAAM,EACxC,CAAC/B,YAAYqF,UAAU,CAACF,WAAW,EACnC,CAACnF,YAAYqF,WAAW9E,WAAW,EACnC,CAACP,YAAYmF,eAAe,aAAaE,WAAW5C,kBAAkB,EACtE,CAACzC,YAAY8C,WAAWuC,WAAWvC,OAAO,EAC1CmC,MAAM9F,IAAI,CAACmG,SAAS;IAGtB,MAAMC,iBAAiBvC;IACvB,MAAMwC,uBAAuBd;IAC7B,oDAAoD;IACpDO,MAAM7F,QAAQ,CAACkG,SAAS,OAAGxG,mBAAAA,EACzBI,mBAAmBE,QAAQ,EAC3BmG,eAAejG,IAAI,EACnBiG,cAAc,CAACL,KAAK,EACpBM,oBAAoB,CAACZ,OAAO,EAC5B5E,YAAYuF,eAAevF,QAAQ,EACnCiF,MAAM7F,QAAQ,CAACkG,SAAS;IAG1B,OAAOL;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-textarea",
-  "version": "9.7.1",
+  "version": "9.7.3",
   "description": "Fluent UI TextArea component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,11 +12,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.5.0",
+    "@fluentui/react-field": "^9.5.2",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-utilities": "^9.26.4",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },