npm - @fluentui/react-textarea - Versions diffs - 9.1.6 → 9.1.8 - Mend

@fluentui/react-textarea 9.1.6 → 9.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/CHANGELOG.json +61 -1
package/CHANGELOG.md +25 -2
package/lib/components/Textarea/useTextareaStyles.js +2 -0
package/lib/components/Textarea/useTextareaStyles.js.map +1 -1
package/lib-amd/components/Textarea/useTextareaStyles.js +1 -1
package/lib-amd/components/Textarea/useTextareaStyles.js.map +1 -1
package/lib-commonjs/components/Textarea/useTextareaStyles.js +2 -0
package/lib-commonjs/components/Textarea/useTextareaStyles.js.map +1 -1
package/package.json +4 -4
package/MIGRATION.md +0 -22
package/Spec.md +0 -172

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,67 @@
   "name": "@fluentui/react-textarea",
   "entries": [
     {
-      "date": "Thu, 17 Nov 2022 23:02:47 GMT",
+      "date": "Tue, 20 Dec 2022 14:55:58 GMT",
+      "tag": "@fluentui/react-textarea_v9.1.8",
+      "version": "9.1.8",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.11",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-theme to v9.1.4",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-utilities to v9.3.0",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 05 Dec 2022 18:29:35 GMT",
+      "tag": "@fluentui/react-textarea_v9.1.7",
+      "version": "9.1.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-textarea",
+            "commit": "6679b1430f61182d34c0b90de33806d9624d811a",
+            "comment": "chore: Replace use of fontSize tokens with typographyStyles"
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-textarea",
+            "commit": "178c2be4bcd691f2cf5874f771236f2e6b8c1cd5",
+            "comment": "chore: Migrate to new package structure."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.10",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-textarea",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:49 GMT",
       "tag": "@fluentui/react-textarea_v9.1.6",
       "version": "9.1.6",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-textarea
-This log was last generated on Thu, 17 Nov 2022 23:02:47 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Dec 2022 14:55:58 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.1.8)
+Tue, 20 Dec 2022 14:55:58 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.1.7..@fluentui/react-textarea_v9.1.8)
+### Patches
+- Bump @fluentui/react-field to v9.0.0-alpha.11 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+## [9.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.1.7)
+Mon, 05 Dec 2022 18:29:35 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.1.6..@fluentui/react-textarea_v9.1.7)
+### Patches
+- chore: Replace use of fontSize tokens with typographyStyles ([PR #25727](https://github.com/microsoft/fluentui/pull/25727) by behowell@microsoft.com)
+- chore: Migrate to new package structure. ([PR #25820](https://github.com/microsoft/fluentui/pull/25820) by tristan.watanabe@gmail.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.10 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
 ## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.1.6)
-Thu, 17 Nov 2022 23:02:47 GMT
+Thu, 17 Nov 2022 23:05:49 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.1.5..@fluentui/react-textarea_v9.1.6)
 ### Patches

package/lib/components/Textarea/useTextareaStyles.js CHANGED Viewed

@@ -280,7 +280,9 @@ const useTextareaStyles = /*#__PURE__*/__styles({
     "z189sj": ["fcgl2c4", "f1anj20m"],
     "Byoj8tv": "f5b47ha",
     "uwmqm3": ["f1anj20m", "fcgl2c4"],
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "faaz57k"
   }
 }, {

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

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

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

@@ -92,7 +92,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
         // affected by changing the padding of the root.
         small: tslib_1.__assign(tslib_1.__assign({ height: textareaHeight.small, minHeight: '40px' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalXS, "calc(" + react_theme_1.tokens.spacingHorizontalSNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")), react_theme_1.typographyStyles.caption1),
         medium: tslib_1.__assign(tslib_1.__assign({ height: textareaHeight.medium, minHeight: '52px' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalSNudge, "calc(" + react_theme_1.tokens.spacingHorizontalMNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")), react_theme_1.typographyStyles.body1),
-        large: tslib_1.__assign(tslib_1.__assign({ height: textareaHeight.large, minHeight: '64px' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, "calc(" + react_theme_1.tokens.spacingHorizontalM + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")), { fontSize: react_theme_1.tokens.fontSizeBase400, lineHeight: react_theme_1.tokens.lineHeightBase400 }),
+        large: tslib_1.__assign(tslib_1.__assign({ height: textareaHeight.large, minHeight: '64px' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, "calc(" + react_theme_1.tokens.spacingHorizontalM + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")), react_theme_1.typographyStyles.body2),
     });
     /**
      * Styles for the textarea's resize property

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

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

package/lib-commonjs/components/Textarea/useTextareaStyles.js CHANGED Viewed

@@ -289,7 +289,9 @@ const useTextareaStyles = /*#__PURE__*/react_1.__styles({
     "z189sj": ["fcgl2c4", "f1anj20m"],
     "Byoj8tv": "f5b47ha",
     "uwmqm3": ["f1anj20m", "fcgl2c4"],
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "faaz57k"
   }
 }, {

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

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-textarea",
-  "version": "9.1.6",
+  "version": "9.1.8",
   "description": "Fluent UI TextArea component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,9 +31,9 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.9",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.2",
+    "@fluentui/react-field": "9.0.0-alpha.11",
+    "@fluentui/react-theme": "^9.1.4",
+    "@fluentui/react-utilities": "^9.3.0",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },

package/MIGRATION.md DELETED Viewed

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

package/Spec.md DELETED Viewed

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