@fluentui/react-textarea 9.0.4 → 9.1.0

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 (10) hide show
  1. package/CHANGELOG.json +76 -2
  2. package/CHANGELOG.md +27 -3
  3. package/dist/index.d.ts +1 -1
  4. package/lib/components/Textarea/Textarea.types.js.map +1 -1
  5. package/lib/components/Textarea/useTextareaStyles.js +48 -9
  6. package/lib/components/Textarea/useTextareaStyles.js.map +1 -1
  7. package/lib-commonjs/components/Textarea/useTextareaStyles.js +48 -9
  8. package/lib-commonjs/components/Textarea/useTextareaStyles.js.map +1 -1
  9. package/package.json +7 -7
  10. package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json CHANGED
@@ -2,7 +2,81 @@
2
2
  "name": "@fluentui/react-textarea",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 03 Aug 2022 16:00:33 GMT",
5
+ "date": "Tue, 20 Sep 2022 20:54:05 GMT",
6
+ "tag": "@fluentui/react-textarea_v9.1.0",
7
+ "version": "9.1.0",
8
+ "comments": {
9
+ "minor": [
10
+ {
11
+ "author": "esteban.230@hotmail.com",
12
+ "package": "@fluentui/react-textarea",
13
+ "commit": "151520d8a82767f0270793ce040c5aa6eefa64c0",
14
+ "comment": "feat: Adding filled with shadow appearance."
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-textarea",
19
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
20
+ "commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Thu, 15 Sep 2022 09:49:34 GMT",
27
+ "tag": "@fluentui/react-textarea_v9.0.5",
28
+ "version": "9.0.5",
29
+ "comments": {
30
+ "patch": [
31
+ {
32
+ "author": "olfedias@microsoft.com",
33
+ "package": "@fluentui/react-textarea",
34
+ "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
35
+ "comment": "chore: Update Griffel to latest version"
36
+ },
37
+ {
38
+ "author": "esteban.230@hotmail.com",
39
+ "package": "@fluentui/react-textarea",
40
+ "commit": "38bd1c146cb2e635bc181cda1b2f11b17a07c4c4",
41
+ "comment": "fix: Change filled appearances' normal state's token."
42
+ },
43
+ {
44
+ "author": "sarah.higley@microsoft.com",
45
+ "package": "@fluentui/react-textarea",
46
+ "commit": "15d5c09a2ba67362ea67cc5d4d5341f66e7ec65a",
47
+ "comment": "fix: disabled textarea uses semantic contrast theme border color"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-textarea",
52
+ "comment": "Bump @fluentui/react-theme to v9.1.0",
53
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-textarea",
58
+ "comment": "Bump @fluentui/react-utilities to v9.1.0",
59
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-textarea",
64
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
65
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
66
+ }
67
+ ],
68
+ "none": [
69
+ {
70
+ "author": "martinhochel@microsoft.com",
71
+ "package": "@fluentui/react-textarea",
72
+ "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
73
+ "comment": "chore: update package scaffold"
74
+ }
75
+ ]
76
+ }
77
+ },
78
+ {
79
+ "date": "Wed, 03 Aug 2022 16:04:06 GMT",
6
80
  "tag": "@fluentui/react-textarea_v9.0.4",
7
81
  "version": "9.0.4",
8
82
  "comments": {
@@ -29,7 +103,7 @@
29
103
  "author": "beachball",
30
104
  "package": "@fluentui/react-textarea",
31
105
  "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
32
- "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
106
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
33
107
  }
34
108
  ],
35
109
  "none": [
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @fluentui/react-textarea
2
2
 
3
- This log was last generated on Wed, 03 Aug 2022 16:00:33 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 20 Sep 2022 20:54:05 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.1.0)
8
+
9
+ Tue, 20 Sep 2022 20:54:05 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.5..@fluentui/react-textarea_v9.1.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: Adding filled with shadow appearance. ([PR #24512](https://github.com/microsoft/fluentui/pull/24512) by esteban.230@hotmail.com)
15
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
16
+
17
+ ## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.5)
18
+
19
+ Thu, 15 Sep 2022 09:49:34 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.4..@fluentui/react-textarea_v9.0.5)
21
+
22
+ ### Patches
23
+
24
+ - chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
25
+ - fix: Change filled appearances' normal state's token. ([PR #24701](https://github.com/microsoft/fluentui/pull/24701) by esteban.230@hotmail.com)
26
+ - fix: disabled textarea uses semantic contrast theme border color ([PR #24311](https://github.com/microsoft/fluentui/pull/24311) by sarah.higley@microsoft.com)
27
+ - Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
29
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
30
+
7
31
  ## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.4)
8
32
 
9
- Wed, 03 Aug 2022 16:00:33 GMT
33
+ Wed, 03 Aug 2022 16:04:06 GMT
10
34
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.3..@fluentui/react-textarea_v9.0.4)
11
35
 
12
36
  ### Patches
@@ -14,7 +38,7 @@ Wed, 03 Aug 2022 16:00:33 GMT
14
38
  - bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles ([PR #23788](https://github.com/microsoft/fluentui/pull/23788) by sarah.higley@microsoft.com)
15
39
  - fix: Make <textarea> match its wrapper size and add documentation on changing its height. ([PR #23992](https://github.com/microsoft/fluentui/pull/23992) by esteban.230@hotmail.com)
16
40
  - chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
17
- - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
41
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
18
42
 
19
43
  ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.3)
20
44
 
package/dist/index.d.ts CHANGED
@@ -33,7 +33,7 @@ export declare type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>,
33
33
  *
34
34
  * @default outline
35
35
  */
36
- appearance?: 'outline' | 'filled-darker' | 'filled-lighter';
36
+ appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
37
37
  /**
38
38
  * The default value of the Textarea.
39
39
  */
package/lib/components/Textarea/Textarea.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.types.js","sourceRoot":"../src/","sources":["components/Textarea/Textarea.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TextareaSlots = {\n /**\n * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus\n * indicator border animation. For more information, see Spec.md\n *\n * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.\n */\n textarea: NonNullable<Slot<'textarea'>>;\n};\n\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n 'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n /**\n * Styling the Textarea should use.\n *\n * @default outline\n */\n appearance?: 'outline' | 'filled-darker' | 'filled-lighter';\n\n /**\n * The default value of the Textarea.\n */\n defaultValue?: string;\n\n /**\n * Callback for when the user changes the value.\n */\n onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;\n\n /**\n * Which direction the Textarea is allowed to be resized.\n *\n * @default none\n */\n resize?: 'none' | 'horizontal' | 'vertical' | 'both';\n\n /**\n * Size of the Textarea.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value of the Textarea.\n */\n value?: string;\n};\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\ntype TextareaOnChangeData = {\n value: string;\n};\n"]}
1
+ {"version":3,"file":"Textarea.types.js","sourceRoot":"../src/","sources":["components/Textarea/Textarea.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TextareaSlots = {\n /**\n * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus\n * indicator border animation. For more information, see Spec.md\n *\n * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.\n */\n textarea: NonNullable<Slot<'textarea'>>;\n};\n\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n 'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n /**\n * Styling the Textarea should use.\n *\n * @default outline\n */\n appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';\n\n /**\n * The default value of the Textarea.\n */\n defaultValue?: string;\n\n /**\n * Callback for when the user changes the value.\n */\n onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;\n\n /**\n * Which direction the Textarea is allowed to be resized.\n *\n * @default none\n */\n resize?: 'none' | 'horizontal' | 'vertical' | 'both';\n\n /**\n * Size of the Textarea.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value of the Textarea.\n */\n value?: string;\n};\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\ntype TextareaOnChangeData = {\n value: string;\n};\n"]}
package/lib/components/Textarea/useTextareaStyles.js CHANGED
@@ -46,7 +46,11 @@ const useRootStyles = /*#__PURE__*/__styles({
46
46
  "B9xav0g": "f4ikngz",
47
47
  "zhjwy3": ["fy0fskl", "f15xbau"],
48
48
  "luzg7z": "f156r3ny",
49
- "B1sv8sq": "f1tglsy2"
49
+ "B1sv8sq": "f1tglsy2",
50
+ "Bjwas2f": "fg455y9",
51
+ "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
52
+ "Bxeuatn": "f1cwzwz",
53
+ "n51gp8": ["f14g86mu", "f1rvyvqg"]
50
54
  },
51
55
  "interactive": {
52
56
  "li1rpt": "f1gw3sf2",
@@ -79,7 +83,31 @@ const useRootStyles = /*#__PURE__*/__styles({
79
83
  "Bduesf4": "f3e99gv",
80
84
  "Bpq79vn": "fhljsf7"
81
85
  },
86
+ "filled": {
87
+ "B4j52fo": "f192inf7",
88
+ "Bekrc4i": ["f5tn483", "f1ojsxk5"],
89
+ "Bn0qgzm": "f1vxd6vx",
90
+ "ibv6hh": ["f1ojsxk5", "f5tn483"],
91
+ "icvyot": "fzkkow9",
92
+ "vrafjx": ["fcdblym", "fjik90z"],
93
+ "oivjwe": "fg706s2",
94
+ "wvpqe5": ["fjik90z", "fcdblym"],
95
+ "g2u3we": "fghlq4f",
96
+ "h3c5rm": ["f1gn591s", "fjscplz"],
97
+ "B9xav0g": "fb073pr",
98
+ "zhjwy3": ["fjscplz", "f1gn591s"],
99
+ "q7v0qe": "ftmjh5b",
100
+ "kmh5ft": ["f17blpuu", "fsrcdbj"],
101
+ "nagaa4": "f1tpwn32",
102
+ "B1yhkcb": ["fsrcdbj", "f17blpuu"]
103
+ },
82
104
  "filled-darker": {
105
+ "De3pzq": "f16xq7d1"
106
+ },
107
+ "filled-lighter": {
108
+ "De3pzq": "fxugw4r"
109
+ },
110
+ "filled-darker-shadow": {
83
111
  "De3pzq": "f16xq7d1",
84
112
  "B4j52fo": "f192inf7",
85
113
  "Bekrc4i": ["f5tn483", "f1ojsxk5"],
@@ -92,9 +120,10 @@ const useRootStyles = /*#__PURE__*/__styles({
92
120
  "g2u3we": "f1bh3yvw",
93
121
  "h3c5rm": ["fmi79ni", "f11fozsx"],
94
122
  "B9xav0g": "fnzw4c6",
95
- "zhjwy3": ["f11fozsx", "fmi79ni"]
123
+ "zhjwy3": ["f11fozsx", "fmi79ni"],
124
+ "E5pizo": "fyed02w"
96
125
  },
97
- "filled-lighter": {
126
+ "filled-lighter-shadow": {
98
127
  "De3pzq": "fxugw4r",
99
128
  "B4j52fo": "f192inf7",
100
129
  "Bekrc4i": ["f5tn483", "f1ojsxk5"],
@@ -107,7 +136,8 @@ const useRootStyles = /*#__PURE__*/__styles({
107
136
  "g2u3we": "f1bh3yvw",
108
137
  "h3c5rm": ["fmi79ni", "f11fozsx"],
109
138
  "B9xav0g": "fnzw4c6",
110
- "zhjwy3": ["f11fozsx", "fmi79ni"]
139
+ "zhjwy3": ["f11fozsx", "fmi79ni"],
140
+ "E5pizo": "fyed02w"
111
141
  },
112
142
  "outline": {
113
143
  "De3pzq": "fxugw4r",
@@ -163,8 +193,16 @@ const useRootStyles = /*#__PURE__*/__styles({
163
193
  "an54nd": ["f1cq0lt5", "fvdgz8d"]
164
194
  }
165
195
  }, {
166
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10pi13n{position:relative;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1ean75l{padding-bottom:var(--strokeWidthThick);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f156r3ny>textarea{cursor:not-allowed;}", ".f1tglsy2>textarea::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1tglsy2>textarea::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fj2g8qd::after{-webkit-clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
167
- "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
196
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10pi13n{position:relative;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1ean75l{padding-bottom:var(--strokeWidthThick);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f156r3ny>textarea{cursor:not-allowed;}", ".f1tglsy2>textarea::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1tglsy2>textarea::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fj2g8qd::after{-webkit-clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
197
+ "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
198
+ "m": "(forced-colors: active)"
199
+ }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
200
+ "m": "(forced-colors: active)"
201
+ }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
202
+ "m": "(forced-colors: active)"
203
+ }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
204
+ "m": "(forced-colors: active)"
205
+ }], ["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
168
206
  "m": "screen and (prefers-reduced-motion: reduce)"
169
207
  }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
170
208
  "m": "screen and (prefers-reduced-motion: reduce)"
@@ -174,7 +212,7 @@ const useRootStyles = /*#__PURE__*/__styles({
174
212
  "m": "screen and (prefers-reduced-motion: reduce)"
175
213
  }]],
176
214
  "w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f1vnc8sk:focus-within{outline-width:var(--strokeWidthThick);}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fu7v4fk:focus-within{border-top-width:var(--strokeWidthThin);}", ".f1fnaxjy:focus-within{border-right-width:var(--strokeWidthThin);}", ".fwory1w:focus-within{border-left-width:var(--strokeWidthThin);}", ".f7hodha:focus-within{border-bottom-width:var(--strokeWidthThin);}", ".f8jkv7v:focus-within{border-top-style:solid;}", ".f1f3jaeo:focus-within{border-right-style:solid;}", ".fh8au0q:focus-within{border-left-style:solid;}", ".f19usxel:focus-within{border-bottom-style:solid;}", ".f12oevn0:focus-within{border-top-color:var(--colorNeutralStroke1);}", ".fvdgz8d:focus-within{border-right-color:var(--colorNeutralStroke1);}", ".f1cq0lt5:focus-within{border-left-color:var(--colorNeutralStroke1);}", ".f1so894s:focus-within{border-bottom-color:var(--colorCompoundBrandStroke);}"],
177
- "h": [".f7ic3uo:hover{border-top-width:var(--strokeWidthThin);}", ".f1omjgsz:hover{border-right-width:var(--strokeWidthThin);}", ".f1snvl17:hover{border-left-width:var(--strokeWidthThin);}", ".fn6xmsl:hover{border-bottom-width:var(--strokeWidthThin);}", ".f1sn8sm0:hover{border-top-style:solid;}", ".f1wovo5e:hover{border-right-style:solid;}", ".f716mnf:hover{border-left-style:solid;}", ".fm0h710:hover{border-bottom-style:solid;}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"],
215
+ "h": [".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f7ic3uo:hover{border-top-width:var(--strokeWidthThin);}", ".f1omjgsz:hover{border-right-width:var(--strokeWidthThin);}", ".f1snvl17:hover{border-left-width:var(--strokeWidthThin);}", ".fn6xmsl:hover{border-bottom-width:var(--strokeWidthThin);}", ".f1sn8sm0:hover{border-top-style:solid;}", ".f1wovo5e:hover{border-right-style:solid;}", ".f716mnf:hover{border-left-style:solid;}", ".fm0h710:hover{border-bottom-style:solid;}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"],
178
216
  "a": [".fk7lb2a:active{border-top-width:var(--strokeWidthThin);}", ".f1knhbbd:active{border-right-width:var(--strokeWidthThin);}", ".f17itt0b:active{border-left-width:var(--strokeWidthThin);}", ".f15pjvi3:active{border-bottom-width:var(--strokeWidthThin);}", ".f6ginmj:active{border-top-style:solid;}", ".f1grcyuh:active{border-right-style:solid;}", ".fgzu20w:active{border-left-style:solid;}", ".fk1xjsr:active{border-bottom-style:solid;}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1z0osm6:active{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"]
179
217
  });
180
218
  /**
@@ -269,14 +307,15 @@ const useTextareaResizeStyles = /*#__PURE__*/__styles({
269
307
 
270
308
 
271
309
  export const useTextareaStyles_unstable = state => {
272
- const disabled = state.textarea.disabled;
273
310
  const {
274
311
  size,
275
312
  appearance,
276
313
  resize
277
314
  } = state;
315
+ const disabled = state.textarea.disabled;
316
+ const filled = appearance.startsWith('filled');
278
317
  const rootStyles = useRootStyles();
279
- state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, rootStyles[appearance], disabled && rootStyles.disabled, !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, state.root.className);
318
+ state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, rootStyles[appearance], filled && rootStyles.filled, disabled && rootStyles.disabled, !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, state.root.className);
280
319
  const textareaStyles = useTextareaStyles();
281
320
  const textareaResizeStyles = useTextareaResizeStyles();
282
321
  state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], state.textarea.className);
package/lib/components/Textarea/useTextareaStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Textarea/useTextareaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\nconst textareaHeight = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n ...shorthands.padding('0', '0', tokens.strokeWidthThick, '0'),\n ...shorthands.margin('0'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n [`& > textarea`]: {\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\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-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n },\n\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\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\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 disabled = state.textarea.disabled;\n const { size, appearance, resize } = state;\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n textareaClassNames.root,\n rootStyles.base,\n rootStyles[appearance],\n disabled && rootStyles.disabled,\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\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":["components/Textarea/useTextareaStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,QAAQ,EAAE;AAFqD,CAA1D;AAKP,MAAM,cAAc,GAAG;EACrB,KAAK,EAAE,MADc;EAErB,MAAM,EAAE,MAFa;EAGrB,KAAK,EAAE;AAHc,CAAvB;AAMA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EAAtB;AAqIA;;AAEG;;;AACH,MAAM,iBAAiB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA1B;AAyDA;;AAEG;;;AACH,MAAM,uBAAuB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAhC;AAeA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,IAAF;IAAQ,UAAR;IAAoB;EAApB,IAA+B,KAArC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAN,CAAe,QAAhC;EACA,MAAM,MAAM,GAAG,UAAU,CAAC,UAAX,CAAsB,QAAtB,CAAf;EAEA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,UAAD,CAHuB,EAIjC,MAAM,IAAI,UAAU,CAAC,MAJY,EAKjC,QAAQ,IAAI,UAAU,CAAC,QALU,EAMjC,CAAC,QAAD,IAAa,UAAU,CAAC,WANS,EAOjC,CAAC,QAAD,IAAa,UAAU,KAAK,SAA5B,IAAyC,UAAU,CAAC,kBAPnB,EAQjC,KAAK,CAAC,IAAN,CAAW,SARsB,CAAnC;EAWA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;EACA,MAAM,oBAAoB,GAAG,uBAAuB,EAApD;EACA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,kBAAkB,CAAC,QADkB,EAErC,cAAc,CAAC,IAFsB,EAGrC,cAAc,CAAC,IAAD,CAHuB,EAIrC,oBAAoB,CAAC,MAAD,CAJiB,EAKrC,KAAK,CAAC,QAAN,CAAe,SALsB,CAAvC;EAQA,OAAO,KAAP;AACD,CA5BM","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\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow2,\n },\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\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 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 state.root.className,\n );\n\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(\n textareaClassNames.textarea,\n textareaStyles.base,\n textareaStyles[size],\n textareaResizeStyles[resize],\n state.textarea.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Textarea/useTextareaStyles.js CHANGED
@@ -55,7 +55,11 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
55
55
  "B9xav0g": "f4ikngz",
56
56
  "zhjwy3": ["fy0fskl", "f15xbau"],
57
57
  "luzg7z": "f156r3ny",
58
- "B1sv8sq": "f1tglsy2"
58
+ "B1sv8sq": "f1tglsy2",
59
+ "Bjwas2f": "fg455y9",
60
+ "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
61
+ "Bxeuatn": "f1cwzwz",
62
+ "n51gp8": ["f14g86mu", "f1rvyvqg"]
59
63
  },
60
64
  "interactive": {
61
65
  "li1rpt": "f1gw3sf2",
@@ -88,7 +92,31 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
88
92
  "Bduesf4": "f3e99gv",
89
93
  "Bpq79vn": "fhljsf7"
90
94
  },
95
+ "filled": {
96
+ "B4j52fo": "f192inf7",
97
+ "Bekrc4i": ["f5tn483", "f1ojsxk5"],
98
+ "Bn0qgzm": "f1vxd6vx",
99
+ "ibv6hh": ["f1ojsxk5", "f5tn483"],
100
+ "icvyot": "fzkkow9",
101
+ "vrafjx": ["fcdblym", "fjik90z"],
102
+ "oivjwe": "fg706s2",
103
+ "wvpqe5": ["fjik90z", "fcdblym"],
104
+ "g2u3we": "fghlq4f",
105
+ "h3c5rm": ["f1gn591s", "fjscplz"],
106
+ "B9xav0g": "fb073pr",
107
+ "zhjwy3": ["fjscplz", "f1gn591s"],
108
+ "q7v0qe": "ftmjh5b",
109
+ "kmh5ft": ["f17blpuu", "fsrcdbj"],
110
+ "nagaa4": "f1tpwn32",
111
+ "B1yhkcb": ["fsrcdbj", "f17blpuu"]
112
+ },
91
113
  "filled-darker": {
114
+ "De3pzq": "f16xq7d1"
115
+ },
116
+ "filled-lighter": {
117
+ "De3pzq": "fxugw4r"
118
+ },
119
+ "filled-darker-shadow": {
92
120
  "De3pzq": "f16xq7d1",
93
121
  "B4j52fo": "f192inf7",
94
122
  "Bekrc4i": ["f5tn483", "f1ojsxk5"],
@@ -101,9 +129,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
101
129
  "g2u3we": "f1bh3yvw",
102
130
  "h3c5rm": ["fmi79ni", "f11fozsx"],
103
131
  "B9xav0g": "fnzw4c6",
104
- "zhjwy3": ["f11fozsx", "fmi79ni"]
132
+ "zhjwy3": ["f11fozsx", "fmi79ni"],
133
+ "E5pizo": "fyed02w"
105
134
  },
106
- "filled-lighter": {
135
+ "filled-lighter-shadow": {
107
136
  "De3pzq": "fxugw4r",
108
137
  "B4j52fo": "f192inf7",
109
138
  "Bekrc4i": ["f5tn483", "f1ojsxk5"],
@@ -116,7 +145,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
116
145
  "g2u3we": "f1bh3yvw",
117
146
  "h3c5rm": ["fmi79ni", "f11fozsx"],
118
147
  "B9xav0g": "fnzw4c6",
119
- "zhjwy3": ["f11fozsx", "fmi79ni"]
148
+ "zhjwy3": ["f11fozsx", "fmi79ni"],
149
+ "E5pizo": "fyed02w"
120
150
  },
121
151
  "outline": {
122
152
  "De3pzq": "fxugw4r",
@@ -172,8 +202,16 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
172
202
  "an54nd": ["f1cq0lt5", "fvdgz8d"]
173
203
  }
174
204
  }, {
175
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10pi13n{position:relative;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1ean75l{padding-bottom:var(--strokeWidthThick);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f156r3ny>textarea{cursor:not-allowed;}", ".f1tglsy2>textarea::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1tglsy2>textarea::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fj2g8qd::after{-webkit-clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
176
- "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
205
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10pi13n{position:relative;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1ean75l{padding-bottom:var(--strokeWidthThick);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f156r3ny>textarea{cursor:not-allowed;}", ".f1tglsy2>textarea::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1tglsy2>textarea::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fj2g8qd::after{-webkit-clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
206
+ "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
207
+ "m": "(forced-colors: active)"
208
+ }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
209
+ "m": "(forced-colors: active)"
210
+ }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
211
+ "m": "(forced-colors: active)"
212
+ }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
213
+ "m": "(forced-colors: active)"
214
+ }], ["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
177
215
  "m": "screen and (prefers-reduced-motion: reduce)"
178
216
  }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
179
217
  "m": "screen and (prefers-reduced-motion: reduce)"
@@ -183,7 +221,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
183
221
  "m": "screen and (prefers-reduced-motion: reduce)"
184
222
  }]],
185
223
  "w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f1vnc8sk:focus-within{outline-width:var(--strokeWidthThick);}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fu7v4fk:focus-within{border-top-width:var(--strokeWidthThin);}", ".f1fnaxjy:focus-within{border-right-width:var(--strokeWidthThin);}", ".fwory1w:focus-within{border-left-width:var(--strokeWidthThin);}", ".f7hodha:focus-within{border-bottom-width:var(--strokeWidthThin);}", ".f8jkv7v:focus-within{border-top-style:solid;}", ".f1f3jaeo:focus-within{border-right-style:solid;}", ".fh8au0q:focus-within{border-left-style:solid;}", ".f19usxel:focus-within{border-bottom-style:solid;}", ".f12oevn0:focus-within{border-top-color:var(--colorNeutralStroke1);}", ".fvdgz8d:focus-within{border-right-color:var(--colorNeutralStroke1);}", ".f1cq0lt5:focus-within{border-left-color:var(--colorNeutralStroke1);}", ".f1so894s:focus-within{border-bottom-color:var(--colorCompoundBrandStroke);}"],
186
- "h": [".f7ic3uo:hover{border-top-width:var(--strokeWidthThin);}", ".f1omjgsz:hover{border-right-width:var(--strokeWidthThin);}", ".f1snvl17:hover{border-left-width:var(--strokeWidthThin);}", ".fn6xmsl:hover{border-bottom-width:var(--strokeWidthThin);}", ".f1sn8sm0:hover{border-top-style:solid;}", ".f1wovo5e:hover{border-right-style:solid;}", ".f716mnf:hover{border-left-style:solid;}", ".fm0h710:hover{border-bottom-style:solid;}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"],
224
+ "h": [".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f7ic3uo:hover{border-top-width:var(--strokeWidthThin);}", ".f1omjgsz:hover{border-right-width:var(--strokeWidthThin);}", ".f1snvl17:hover{border-left-width:var(--strokeWidthThin);}", ".fn6xmsl:hover{border-bottom-width:var(--strokeWidthThin);}", ".f1sn8sm0:hover{border-top-style:solid;}", ".f1wovo5e:hover{border-right-style:solid;}", ".f716mnf:hover{border-left-style:solid;}", ".fm0h710:hover{border-bottom-style:solid;}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"],
187
225
  "a": [".fk7lb2a:active{border-top-width:var(--strokeWidthThin);}", ".f1knhbbd:active{border-right-width:var(--strokeWidthThin);}", ".f17itt0b:active{border-left-width:var(--strokeWidthThin);}", ".f15pjvi3:active{border-bottom-width:var(--strokeWidthThin);}", ".f6ginmj:active{border-top-style:solid;}", ".f1grcyuh:active{border-right-style:solid;}", ".fgzu20w:active{border-left-style:solid;}", ".fk1xjsr:active{border-bottom-style:solid;}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1z0osm6:active{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"]
188
226
  });
189
227
  /**
@@ -278,14 +316,15 @@ const useTextareaResizeStyles = /*#__PURE__*/react_1.__styles({
278
316
 
279
317
 
280
318
  const useTextareaStyles_unstable = state => {
281
- const disabled = state.textarea.disabled;
282
319
  const {
283
320
  size,
284
321
  appearance,
285
322
  resize
286
323
  } = state;
324
+ const disabled = state.textarea.disabled;
325
+ const filled = appearance.startsWith('filled');
287
326
  const rootStyles = useRootStyles();
288
- state.root.className = react_1.mergeClasses(exports.textareaClassNames.root, rootStyles.base, rootStyles[appearance], disabled && rootStyles.disabled, !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, state.root.className);
327
+ state.root.className = react_1.mergeClasses(exports.textareaClassNames.root, rootStyles.base, rootStyles[appearance], filled && rootStyles.filled, disabled && rootStyles.disabled, !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, state.root.className);
289
328
  const textareaStyles = useTextareaStyles();
290
329
  const textareaResizeStyles = useTextareaResizeStyles();
291
330
  state.textarea.className = react_1.mergeClasses(exports.textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], state.textarea.className);
package/lib-commonjs/components/Textarea/useTextareaStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Textarea/useTextareaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\nconst textareaHeight = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n ...shorthands.padding('0', '0', tokens.strokeWidthThick, '0'),\n ...shorthands.margin('0'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n [`& > textarea`]: {\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\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-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n },\n\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\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\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 disabled = state.textarea.disabled;\n const { size, appearance, resize } = state;\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n textareaClassNames.root,\n rootStyles.base,\n rootStyles[appearance],\n disabled && rootStyles.disabled,\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\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":["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;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EAAtB;AAqIA;;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;EAAA;AAAA;EAAA;AAAA,EAA1B;AAyDA;;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,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,KAAK,CAAC,IAAN,CAAW,SARU,CAAvB;EAWA,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,CA5BM;;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\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow2,\n },\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\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 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 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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-textarea",
3
- "version": "9.0.4",
3
+ "version": "9.1.0",
4
4
  "description": "Fluent UI TextArea component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -21,20 +21,20 @@
21
21
  "start": "yarn storybook",
22
22
  "test": "jest --passWithNoTests",
23
23
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-textarea/src && yarn docs",
25
- "storybook": "node ../../../scripts/storybook/runner",
24
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-textarea/src && yarn docs",
25
+ "storybook": "start-storybook",
26
26
  "type-check": "tsc -b tsconfig.json"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.12",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.14",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-theme": "^9.0.0",
36
- "@fluentui/react-utilities": "^9.0.2",
37
- "@griffel/react": "^1.2.3",
35
+ "@fluentui/react-theme": "^9.1.0",
36
+ "@fluentui/react-utilities": "^9.1.0",
37
+ "@griffel/react": "^1.3.0",
38
38
  "tslib": "^2.1.0"
39
39
  },
40
40
  "peerDependencies": {
package/dist/tsdoc-metadata.json DELETED
@@ -1,11 +0,0 @@
1
- // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
- // It should be published with your NPM package. It should not be tracked by Git.
3
- {
4
- "tsdocVersion": "0.12",
5
- "toolPackages": [
6
- {
7
- "packageName": "@microsoft/api-extractor",
8
- "packageVersion": "7.18.1"
9
- }
10
- ]
11
- }