@fluentui/react-textarea 9.0.0-alpha.2 → 9.0.0-rc.3

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 (28) hide show
  1. package/CHANGELOG.json +138 -1
  2. package/CHANGELOG.md +45 -4
  3. package/README.md +0 -6
  4. package/Spec.md +27 -21
  5. package/dist/index.d.ts +22 -25
  6. package/{lib → dist}/tsdoc-metadata.json +0 -0
  7. package/lib/components/Textarea/Textarea.types.js.map +1 -1
  8. package/lib/components/Textarea/useTextareaStyles.js +20 -47
  9. package/lib/components/Textarea/useTextareaStyles.js.map +1 -1
  10. package/lib-commonjs/components/Textarea/useTextareaStyles.js +19 -46
  11. package/lib-commonjs/components/Textarea/useTextareaStyles.js.map +1 -1
  12. package/package.json +8 -8
  13. package/lib/Textarea.d.ts +0 -1
  14. package/lib/components/Textarea/Textarea.d.ts +0 -6
  15. package/lib/components/Textarea/Textarea.types.d.ts +0 -63
  16. package/lib/components/Textarea/index.d.ts +0 -5
  17. package/lib/components/Textarea/renderTextarea.d.ts +0 -5
  18. package/lib/components/Textarea/useTextarea.d.ts +0 -12
  19. package/lib/components/Textarea/useTextareaStyles.d.ts +0 -7
  20. package/lib/index.d.ts +0 -2
  21. package/lib-commonjs/Textarea.d.ts +0 -1
  22. package/lib-commonjs/components/Textarea/Textarea.d.ts +0 -6
  23. package/lib-commonjs/components/Textarea/Textarea.types.d.ts +0 -63
  24. package/lib-commonjs/components/Textarea/index.d.ts +0 -5
  25. package/lib-commonjs/components/Textarea/renderTextarea.d.ts +0 -5
  26. package/lib-commonjs/components/Textarea/useTextarea.d.ts +0 -12
  27. package/lib-commonjs/components/Textarea/useTextareaStyles.d.ts +0 -7
  28. package/lib-commonjs/index.d.ts +0 -2
package/CHANGELOG.json CHANGED
@@ -2,7 +2,144 @@
2
2
  "name": "@fluentui/react-textarea",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 04 May 2022 13:24:22 GMT",
5
+ "date": "Mon, 23 May 2022 18:54:55 GMT",
6
+ "tag": "@fluentui/react-textarea_v9.0.0-rc.3",
7
+ "version": "9.0.0-rc.3",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "seanmonahan@microsoft.com",
12
+ "package": "@fluentui/react-textarea",
13
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
14
+ "comment": "BREAKING: update string unions to use spinal-case"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-textarea",
19
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
20
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-textarea",
25
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
26
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Mon, 23 May 2022 12:13:54 GMT",
33
+ "tag": "@fluentui/react-textarea_v9.0.0-rc.2",
34
+ "version": "9.0.0-rc.2",
35
+ "comments": {
36
+ "prerelease": [
37
+ {
38
+ "author": "esteban.230@hotmail.com",
39
+ "package": "@fluentui/react-textarea",
40
+ "commit": "938c4f29cf91bb5e84c512162592aa1c74627e51",
41
+ "comment": "Moving react-textarea to RC."
42
+ },
43
+ {
44
+ "author": "olfedias@microsoft.com",
45
+ "package": "@fluentui/react-textarea",
46
+ "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
47
+ "comment": "chore: Update Griffel to latest version"
48
+ },
49
+ {
50
+ "author": "martinhochel@microsoft.com",
51
+ "package": "@fluentui/react-textarea",
52
+ "commit": "eb1084fd607c0d1086f9d465168be5822daa5e40",
53
+ "comment": "feat: ship rolluped only dts"
54
+ },
55
+ {
56
+ "author": "olfedias@microsoft.com",
57
+ "package": "@fluentui/react-textarea",
58
+ "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
59
+ "comment": "chore: Update Griffel to latest version"
60
+ },
61
+ {
62
+ "author": "esteban.230@hotmail.com",
63
+ "package": "@fluentui/react-textarea",
64
+ "commit": "8ac48b7bba84d00b1240b1f449dbce20e97abbb6",
65
+ "comment": "Update appearance stories and add best practices."
66
+ },
67
+ {
68
+ "author": "esteban.230@hotmail.com",
69
+ "package": "@fluentui/react-textarea",
70
+ "commit": "ff308632878f6037547ae2913c9dd7107a125975",
71
+ "comment": "Remove commons from react-textarea."
72
+ },
73
+ {
74
+ "author": "esteban.230@hotmail.com",
75
+ "package": "@fluentui/react-textarea",
76
+ "commit": "43d5828c01a525fb1c3e5ae1c200201245741a9a",
77
+ "comment": "Updating spec to match implementation."
78
+ },
79
+ {
80
+ "author": "esteban.230@hotmail.com",
81
+ "package": "@fluentui/react-textarea",
82
+ "commit": "f2f0c0d6ea55c51a1e12d5d0385d91e1414f5025",
83
+ "comment": "Updating Textarea styles to use font tokens."
84
+ },
85
+ {
86
+ "author": "beachball",
87
+ "package": "@fluentui/react-textarea",
88
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
89
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
90
+ },
91
+ {
92
+ "author": "beachball",
93
+ "package": "@fluentui/react-textarea",
94
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
95
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
96
+ },
97
+ {
98
+ "author": "beachball",
99
+ "package": "@fluentui/react-textarea",
100
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
101
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
102
+ }
103
+ ]
104
+ }
105
+ },
106
+ {
107
+ "date": "Thu, 05 May 2022 18:26:26 GMT",
108
+ "tag": "@fluentui/react-textarea_v9.0.0-alpha.3",
109
+ "version": "9.0.0-alpha.3",
110
+ "comments": {
111
+ "none": [
112
+ {
113
+ "author": "tristan.watanabe@gmail.com",
114
+ "package": "@fluentui/react-textarea",
115
+ "commit": "ad3dfcc6d85a8dba3c183612fe552280cd33c20e",
116
+ "comment": "react-textarea: Move to new common folder."
117
+ }
118
+ ],
119
+ "prerelease": [
120
+ {
121
+ "author": "beachball",
122
+ "package": "@fluentui/react-textarea",
123
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
124
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
125
+ },
126
+ {
127
+ "author": "beachball",
128
+ "package": "@fluentui/react-textarea",
129
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
130
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
131
+ },
132
+ {
133
+ "author": "beachball",
134
+ "package": "@fluentui/react-textarea",
135
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
136
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
137
+ }
138
+ ]
139
+ }
140
+ },
141
+ {
142
+ "date": "Wed, 04 May 2022 13:26:54 GMT",
6
143
  "tag": "@fluentui/react-textarea_v9.0.0-alpha.2",
7
144
  "version": "9.0.0-alpha.2",
8
145
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,53 @@
1
1
  # Change Log - @fluentui/react-textarea
2
2
 
3
- This log was last generated on Wed, 04 May 2022 13:24:22 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 23 May 2022 18:54:55 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.0-rc.3)
8
+
9
+ Mon, 23 May 2022 18:54:55 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.0-rc.2..@fluentui/react-textarea_v9.0.0-rc.3)
11
+
12
+ ### Changes
13
+
14
+ - BREAKING: update string unions to use spinal-case ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
15
+ - Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
16
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
17
+
18
+ ## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.0-rc.2)
19
+
20
+ Mon, 23 May 2022 12:13:54 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.0-alpha.3..@fluentui/react-textarea_v9.0.0-rc.2)
22
+
23
+ ### Changes
24
+
25
+ - Moving react-textarea to RC. ([PR #22999](https://github.com/microsoft/fluentui/pull/22999) by esteban.230@hotmail.com)
26
+ - chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
27
+ - feat: ship rolluped only dts ([PR #22874](https://github.com/microsoft/fluentui/pull/22874) by martinhochel@microsoft.com)
28
+ - chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
29
+ - Update appearance stories and add best practices. ([PR #22987](https://github.com/microsoft/fluentui/pull/22987) by esteban.230@hotmail.com)
30
+ - Remove commons from react-textarea. ([PR #22881](https://github.com/microsoft/fluentui/pull/22881) by esteban.230@hotmail.com)
31
+ - Updating spec to match implementation. ([PR #22902](https://github.com/microsoft/fluentui/pull/22902) by esteban.230@hotmail.com)
32
+ - Updating Textarea styles to use font tokens. ([PR #22885](https://github.com/microsoft/fluentui/pull/22885) by esteban.230@hotmail.com)
33
+ - Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
34
+ - Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
35
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
36
+
37
+ ## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.0-alpha.3)
38
+
39
+ Thu, 05 May 2022 18:26:26 GMT
40
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.0-alpha.2..@fluentui/react-textarea_v9.0.0-alpha.3)
41
+
42
+ ### Changes
43
+
44
+ - Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
45
+ - Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
46
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
47
+
7
48
  ## [9.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.0-alpha.2)
8
49
 
9
- Wed, 04 May 2022 13:24:22 GMT
50
+ Wed, 04 May 2022 13:26:54 GMT
10
51
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.0-alpha.1..@fluentui/react-textarea_v9.0.0-alpha.2)
11
52
 
12
53
  ### Changes
@@ -16,7 +57,7 @@ Wed, 04 May 2022 13:24:22 GMT
16
57
 
17
58
  ## [9.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.0-alpha.1)
18
59
 
19
- Tue, 19 Apr 2022 19:17:02 GMT
60
+ Tue, 19 Apr 2022 19:17:02 GMT
20
61
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.0-alpha.0..@fluentui/react-textarea_v9.0.0-alpha.1)
21
62
 
22
63
  ### Changes
@@ -28,7 +69,7 @@ Tue, 19 Apr 2022 19:17:02 GMT
28
69
 
29
70
  ## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.0.0-alpha.0)
30
71
 
31
- Fri, 04 Mar 2022 05:17:40 GMT
72
+ Fri, 04 Mar 2022 05:17:40 GMT
32
73
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.0.0-alpha.0..@fluentui/react-textarea_v9.0.0-alpha.0)
33
74
 
34
75
  ### Changes
package/README.md CHANGED
@@ -16,12 +16,6 @@ To import Textarea:
16
16
  import { Textarea } from '@fluentui/react-textarea';
17
17
  ```
18
18
 
19
- Once the Textarea component is ready for production use, the component will be available at:
20
-
21
- ```js
22
- import { Textarea } from '@fluentui/react-components';
23
- ```
24
-
25
19
  ### Examples
26
20
 
27
21
  ```js
package/Spec.md CHANGED
@@ -64,42 +64,48 @@ Note: These colors are based on the design spec, therefore they come from the de
64
64
  ### Component props:
65
65
 
66
66
  ```ts
67
- type TextAreaProps = {
67
+ /**
68
+ * Textarea Props
69
+ */
70
+ export type TextareaProps = Omit<
71
+ ComponentProps<Partial<TextareaSlots>, 'textarea'>,
72
+ 'defaultValue' | 'onChange' | 'size' | 'value'
73
+ > & {
68
74
  /**
69
- * Which direction the TextArea is allowed to be resized.
75
+ * Styling the Textarea should use.
70
76
  *
71
- * @defaultvalue none
77
+ * @default outline
72
78
  */
73
- resize?: 'none' | 'horizontal' | 'vertical' | 'both';
79
+ appearance?: 'outline' | 'filledDarker' | 'filledLighter';
74
80
 
75
81
  /**
76
- * Size of the TextArea.
77
- *
78
- * @defaultvalue medium
82
+ * The default value of the Textarea.
79
83
  */
80
- size?: 'small' | 'medium' | 'large';
84
+ defaultValue?: string;
81
85
 
82
86
  /**
83
- * Styling the TextArea should use.
84
- *
85
- * @defaultvalue outline
87
+ * Callback for when the user changes the value.
86
88
  */
87
- appearance?: 'outline' | 'filledDarker' | 'filledLighter';
89
+ onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;
88
90
 
89
91
  /**
90
- * The value of the TextArea. Used when the component is controlled.
92
+ * Which direction the Textarea is allowed to be resized.
93
+ *
94
+ * @default none
91
95
  */
92
- value?: string;
96
+ resize?: 'none' | 'horizontal' | 'vertical' | 'both';
93
97
 
94
98
  /**
95
- * The default value of the TextArea. Used when the component is uncontrolled.
99
+ * Size of the Textarea.
100
+ *
101
+ * @default medium
96
102
  */
97
- defaultValue?: string;
103
+ size?: 'small' | 'medium' | 'large';
98
104
 
99
105
  /**
100
- * Callback for when the user changes the value.
106
+ * The value of the Textarea.
101
107
  */
102
- onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaOnChangeData) => void;
108
+ value?: string;
103
109
  };
104
110
 
105
111
  /**
@@ -132,7 +138,9 @@ The design spec mentions a character count, error message, and label which will
132
138
  **Internal**
133
139
 
134
140
  ```tsx
135
- <slots.root {...slotProps.root}></slots.root>
141
+ <slots.root {...slotProps.root}>
142
+ <slots.textarea {...slotProps.textarea} />
143
+ </slots.root>
136
144
  ```
137
145
 
138
146
  **DOM** - how the component will be rendered as HTML elements
@@ -149,8 +157,6 @@ See [MIGRATION.md](MIGRATION.md).
149
157
 
150
158
  ## Behaviors
151
159
 
152
- TODO: Until the upcoming design review, behavior hasn't been set and will be updated when approved.
153
-
154
160
  - Component States
155
161
  - Rest
156
162
  - Hover
package/dist/index.d.ts CHANGED
@@ -17,27 +17,6 @@ export declare const Textarea: ForwardRefComponent<TextareaProps>;
17
17
 
18
18
  export declare const textareaClassNames: SlotClassNames<TextareaSlots>;
19
19
 
20
- declare type TextareaCommons = {
21
- /**
22
- * Which direction the Textarea is allowed to be resized.
23
- *
24
- * @default none
25
- */
26
- resize: 'none' | 'horizontal' | 'vertical' | 'both';
27
- /**
28
- * Size of the Textarea.
29
- *
30
- * @default medium
31
- */
32
- size: 'small' | 'medium' | 'large';
33
- /**
34
- * Styling the Textarea should use.
35
- *
36
- * @default outline
37
- */
38
- appearance: 'outline' | 'filledDarker' | 'filledLighter';
39
- };
40
-
41
20
  /**
42
21
  * Data passed to the `onChange` callback when the textarea's value changes.
43
22
  */
@@ -48,11 +27,13 @@ declare type TextareaOnChangeData = {
48
27
  /**
49
28
  * Textarea Props
50
29
  */
51
- export declare type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>, 'textarea'>, 'value' | 'defaultValue' | 'onChange' | 'size'> & Partial<TextareaCommons> & {
30
+ export declare type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>, 'textarea'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
52
31
  /**
53
- * The value of the Textarea.
32
+ * Styling the Textarea should use.
33
+ *
34
+ * @default outline
54
35
  */
55
- value?: string;
36
+ appearance?: 'outline' | 'filled-darker' | 'filled-lighter';
56
37
  /**
57
38
  * The default value of the Textarea.
58
39
  */
@@ -61,6 +42,22 @@ export declare type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>,
61
42
  * Callback for when the user changes the value.
62
43
  */
63
44
  onChange?: (ev: React_2.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;
45
+ /**
46
+ * Which direction the Textarea is allowed to be resized.
47
+ *
48
+ * @default none
49
+ */
50
+ resize?: 'none' | 'horizontal' | 'vertical' | 'both';
51
+ /**
52
+ * Size of the Textarea.
53
+ *
54
+ * @default medium
55
+ */
56
+ size?: 'small' | 'medium' | 'large';
57
+ /**
58
+ * The value of the Textarea.
59
+ */
60
+ value?: string;
64
61
  };
65
62
 
66
63
  export declare type TextareaSlots = {
@@ -80,7 +77,7 @@ export declare type TextareaSlots = {
80
77
  /**
81
78
  * State used in rendering Textarea
82
79
  */
83
- export declare type TextareaState = ComponentState<TextareaSlots> & TextareaCommons;
80
+ export declare type TextareaState = ComponentState<TextareaSlots> & Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;
84
81
 
85
82
  /**
86
83
  * Create the state required to render Textarea.
package/{lib → dist}/tsdoc-metadata.json RENAMED
File without changes
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\ntype TextareaCommons = {\n /**\n * Which direction the Textarea is allowed to be resized.\n *\n * @default none\n */\n resize: 'none' | 'horizontal' | 'vertical' | 'both';\n\n /**\n * Size of the Textarea.\n *\n * @default medium\n */\n size: 'small' | 'medium' | 'large';\n\n /**\n * Styling the Textarea should use.\n *\n * @default outline\n */\n appearance: 'outline' | 'filledDarker' | 'filledLighter';\n};\n\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n 'value' | 'defaultValue' | 'onChange' | 'size'\n> &\n Partial<TextareaCommons> & {\n /**\n * The value of the Textarea.\n */\n value?: string;\n\n /**\n * The default value of the Textarea.\n */\n defaultValue?: string;\n\n /**\n * Callback for when the user changes the value.\n */\n onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;\n };\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> & TextareaCommons;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\ntype TextareaOnChangeData = {\n value: string;\n};\n"]}
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"]}
package/lib/components/Textarea/useTextareaStyles.js CHANGED
@@ -1,39 +1,8 @@
1
1
  import { __styles, mergeClasses, shorthands } from '@griffel/react';
2
- import { tokens } from '@fluentui/react-theme';
2
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
3
3
  export const textareaClassNames = {
4
4
  root: 'fui-Textarea',
5
5
  textarea: 'fui-Textarea__textarea'
6
- }; // TODO(sharing) use theme values once available
7
-
8
- const spacingTokens = {
9
- horizontal: {
10
- sNudge: '6px',
11
- mNudge: '10px',
12
- xss: '2px',
13
- m: '12px'
14
- }
15
- };
16
- const contentSizeTokens = {
17
- body1: {
18
- fontSize: tokens.fontSizeBase300,
19
- lineHeight: tokens.lineHeightBase300
20
- },
21
- caption1: {
22
- fontSize: tokens.fontSizeBase200,
23
- lineHeight: tokens.lineHeightBase200
24
- },
25
- base400: {
26
- fontSize: tokens.fontSizeBase400,
27
- lineHeight: tokens.lineHeightBase400
28
- }
29
- };
30
- const motionDurations = {
31
- ultraFast: '0.05s',
32
- normal: '0.2s'
33
- };
34
- const motionCurves = {
35
- accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',
36
- decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)'
37
6
  };
38
7
  const textareaHeight = {
39
8
  small: '24px',
@@ -95,18 +64,18 @@ const useRootStyles = /*#__PURE__*/__styles({
95
64
  "B5pt6m4": "f12eaysv",
96
65
  "xn0juu": "f1lmmjng",
97
66
  "wbfbqe": "fopw4to",
98
- "mafdb0": "f1dw3w9y",
99
- "s1xtto": "f1n2ytmg",
67
+ "mafdb0": "f1jogkkn",
68
+ "s1xtto": "f1hql58f",
100
69
  "Hbcoss": "fnqdfvx",
101
70
  "lq1u8j": "fbqc2tv",
102
- "B37x0ls": "fvvig05",
103
- "H8rp7s": "f1nwpqpa",
71
+ "B37x0ls": "f1utz3u7",
72
+ "H8rp7s": "f1f3shah",
104
73
  "uvoyur": "f1e6xsgv",
105
74
  "Bbr2w1p": "f1vnc8sk",
106
75
  "Bduesf4": "f3e99gv",
107
76
  "Bpq79vn": "fhljsf7"
108
77
  },
109
- "filledDarker": {
78
+ "filled-darker": {
110
79
  "De3pzq": "f16xq7d1",
111
80
  "B4j52fo": "f192inf7",
112
81
  "Bekrc4i": ["f5tn483", "f1ojsxk5"],
@@ -121,7 +90,7 @@ const useRootStyles = /*#__PURE__*/__styles({
121
90
  "B9xav0g": "fnzw4c6",
122
91
  "zhjwy3": ["f11fozsx", "fmi79ni"]
123
92
  },
124
- "filledLighter": {
93
+ "filled-lighter": {
125
94
  "De3pzq": "fxugw4r",
126
95
  "B4j52fo": "f192inf7",
127
96
  "Bekrc4i": ["f5tn483", "f1ojsxk5"],
@@ -190,8 +159,8 @@ const useRootStyles = /*#__PURE__*/__styles({
190
159
  "an54nd": ["f1cq0lt5", "fvdgz8d"]
191
160
  }
192
161
  }, {
193
- "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);}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f10x9kky:after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1vd6669:after{border-bottom-width:var(--strokeWidthThick);}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f12eaysv:after{-webkit-clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".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);}"],
194
- "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv: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);}"],
162
+ "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);}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f10x9kky:after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1vd6669:after{border-bottom-width:var(--strokeWidthThick);}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f12eaysv:after{-webkit-clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1jogkkn:after{transition-duration:var(--durationUltraFast);}", ".f1hql58f: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);}"],
163
+ "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".f1utz3u7:focus-within:after{transition-duration:var(--durationNormal);}", ".f1f3shah:focus-within:after{transition-delay:var(--curveDecelerateMid);}", ".f1e6xsgv: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);}"],
195
164
  "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);}"],
196
165
  "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);}"]
197
166
  });
@@ -222,32 +191,36 @@ const useTextareaStyles = /*#__PURE__*/__styles({
222
191
  "small": {
223
192
  "Bqenvij": "frvgh55",
224
193
  "z8tnut": "f1g0x7ka",
225
- "z189sj": ["fdr11yp", "f391vcr"],
194
+ "z189sj": ["f135dnwl", "f1e60jzv"],
226
195
  "Byoj8tv": "f1qch9an",
227
- "uwmqm3": ["fe83xzc", "f1j1pjsa"],
196
+ "uwmqm3": ["f1xile11", "fqznh8f"],
197
+ "Bahqtrf": "fk6fouc",
228
198
  "Be2twd7": "fy9rknc",
199
+ "Bhrd7zp": "figsok6",
229
200
  "Bg96gwp": "fwrc4pm"
230
201
  },
231
202
  "medium": {
232
203
  "Bqenvij": "f1d2rq10",
233
204
  "z8tnut": "f1g0x7ka",
234
- "z189sj": ["fdr11yp", "f391vcr"],
205
+ "z189sj": ["f135dnwl", "f1e60jzv"],
235
206
  "Byoj8tv": "f1qch9an",
236
- "uwmqm3": ["f391vcr", "fdr11yp"],
207
+ "uwmqm3": ["f1e60jzv", "f135dnwl"],
208
+ "Bahqtrf": "fk6fouc",
237
209
  "Be2twd7": "fkhj508",
210
+ "Bhrd7zp": "figsok6",
238
211
  "Bg96gwp": "f1i3iumi"
239
212
  },
240
213
  "large": {
241
214
  "Bqenvij": "fbhnoac",
242
215
  "z8tnut": "f1g0x7ka",
243
- "z189sj": ["f1bf2pku", "fr8jt6m"],
216
+ "z189sj": ["fcgl2c4", "f1anj20m"],
244
217
  "Byoj8tv": "f1qch9an",
245
- "uwmqm3": ["fr8jt6m", "f1bf2pku"],
218
+ "uwmqm3": ["f1anj20m", "fcgl2c4"],
246
219
  "Be2twd7": "fod5ikn",
247
220
  "Bg96gwp": "faaz57k"
248
221
  }
249
222
  }, {
250
- "d": [".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f3rmtva{background-color:transparent;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".f1vw9udw::selection{color:var(--colorNeutralForegroundInverted);}", ".fbb3kq8::selection{background-color:var(--colorNeutralBackgroundInverted);}", ".frvgh55{height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdr11yp{padding-right:calc(10px + 2px);}", ".f391vcr{padding-left:calc(10px + 2px);}", ".f1qch9an{padding-bottom:0;}", ".fe83xzc{padding-left:calc(6px + 2px);}", ".f1j1pjsa{padding-right:calc(6px + 2px);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".f1bf2pku{padding-right:calc(12px + 2px);}", ".fr8jt6m{padding-left:calc(12px + 2px);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
223
+ "d": [".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f3rmtva{background-color:transparent;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".f1vw9udw::selection{color:var(--colorNeutralForegroundInverted);}", ".fbb3kq8::selection{background-color:var(--colorNeutralBackgroundInverted);}", ".frvgh55{height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fcgl2c4{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalXXS));}", ".f1anj20m{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalXXS));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
251
224
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
252
225
  });
253
226
  /**
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 type { TextareaSlots, TextareaState } from './Textarea.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\n// TODO(sharing) use theme values once available\nconst spacingTokens = {\n horizontal: {\n sNudge: '6px',\n mNudge: '10px',\n xss: '2px',\n m: '12px',\n },\n};\nconst contentSizeTokens = {\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n caption1: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n base400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\nconst motionDurations = {\n ultraFast: '0.05s',\n normal: '0.2s',\n};\nconst motionCurves = {\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\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: motionDurations.ultraFast,\n transitionDelay: motionCurves.accelerateMid,\n },\n ':focus-within:after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.normal,\n transitionDelay: motionCurves.decelerateMid,\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 filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n },\n\n filledLighter: {\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 color: tokens.colorNeutralForeground1,\n flexGrow: 1,\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 ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n height: textareaHeight.small,\n ...shorthands.padding(\n '0',\n `calc(${spacingTokens.horizontal.mNudge} + ${spacingTokens.horizontal.xss})`,\n '0',\n `calc(${spacingTokens.horizontal.sNudge} + ${spacingTokens.horizontal.xss})`,\n ),\n ...contentSizeTokens.caption1,\n },\n medium: {\n height: textareaHeight.medium,\n ...shorthands.padding('0', `calc(${spacingTokens.horizontal.mNudge} + ${spacingTokens.horizontal.xss})`),\n ...contentSizeTokens.body1,\n },\n large: {\n height: textareaHeight.large,\n ...shorthands.padding('0', `calc(${spacingTokens.horizontal.m} + ${spacingTokens.horizontal.xss})`),\n ...contentSizeTokens.base400,\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":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\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 ':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 ':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 color: tokens.colorNeutralForeground1,\n flexGrow: 1,\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 ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n height: textareaHeight.small,\n ...shorthands.padding(\n '0',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n '0',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n ...typographyStyles.caption1,\n },\n medium: {\n height: textareaHeight.medium,\n ...shorthands.padding('0', `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n ...typographyStyles.body1,\n },\n large: {\n height: textareaHeight.large,\n ...shorthands.padding('0', `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`),\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/"}
package/lib-commonjs/components/Textarea/useTextareaStyles.js CHANGED
@@ -12,37 +12,6 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
12
12
  exports.textareaClassNames = {
13
13
  root: 'fui-Textarea',
14
14
  textarea: 'fui-Textarea__textarea'
15
- }; // TODO(sharing) use theme values once available
16
-
17
- const spacingTokens = {
18
- horizontal: {
19
- sNudge: '6px',
20
- mNudge: '10px',
21
- xss: '2px',
22
- m: '12px'
23
- }
24
- };
25
- const contentSizeTokens = {
26
- body1: {
27
- fontSize: react_theme_1.tokens.fontSizeBase300,
28
- lineHeight: react_theme_1.tokens.lineHeightBase300
29
- },
30
- caption1: {
31
- fontSize: react_theme_1.tokens.fontSizeBase200,
32
- lineHeight: react_theme_1.tokens.lineHeightBase200
33
- },
34
- base400: {
35
- fontSize: react_theme_1.tokens.fontSizeBase400,
36
- lineHeight: react_theme_1.tokens.lineHeightBase400
37
- }
38
- };
39
- const motionDurations = {
40
- ultraFast: '0.05s',
41
- normal: '0.2s'
42
- };
43
- const motionCurves = {
44
- accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',
45
- decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)'
46
15
  };
47
16
  const textareaHeight = {
48
17
  small: '24px',
@@ -104,18 +73,18 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
104
73
  "B5pt6m4": "f12eaysv",
105
74
  "xn0juu": "f1lmmjng",
106
75
  "wbfbqe": "fopw4to",
107
- "mafdb0": "f1dw3w9y",
108
- "s1xtto": "f1n2ytmg",
76
+ "mafdb0": "f1jogkkn",
77
+ "s1xtto": "f1hql58f",
109
78
  "Hbcoss": "fnqdfvx",
110
79
  "lq1u8j": "fbqc2tv",
111
- "B37x0ls": "fvvig05",
112
- "H8rp7s": "f1nwpqpa",
80
+ "B37x0ls": "f1utz3u7",
81
+ "H8rp7s": "f1f3shah",
113
82
  "uvoyur": "f1e6xsgv",
114
83
  "Bbr2w1p": "f1vnc8sk",
115
84
  "Bduesf4": "f3e99gv",
116
85
  "Bpq79vn": "fhljsf7"
117
86
  },
118
- "filledDarker": {
87
+ "filled-darker": {
119
88
  "De3pzq": "f16xq7d1",
120
89
  "B4j52fo": "f192inf7",
121
90
  "Bekrc4i": ["f5tn483", "f1ojsxk5"],
@@ -130,7 +99,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
130
99
  "B9xav0g": "fnzw4c6",
131
100
  "zhjwy3": ["f11fozsx", "fmi79ni"]
132
101
  },
133
- "filledLighter": {
102
+ "filled-lighter": {
134
103
  "De3pzq": "fxugw4r",
135
104
  "B4j52fo": "f192inf7",
136
105
  "Bekrc4i": ["f5tn483", "f1ojsxk5"],
@@ -199,8 +168,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
199
168
  "an54nd": ["f1cq0lt5", "fvdgz8d"]
200
169
  }
201
170
  }, {
202
- "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);}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f10x9kky:after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1vd6669:after{border-bottom-width:var(--strokeWidthThick);}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f12eaysv:after{-webkit-clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".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);}"],
203
- "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv: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);}"],
171
+ "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);}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f10x9kky:after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1vd6669:after{border-bottom-width:var(--strokeWidthThick);}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f12eaysv:after{-webkit-clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1jogkkn:after{transition-duration:var(--durationUltraFast);}", ".f1hql58f: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);}"],
172
+ "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".f1utz3u7:focus-within:after{transition-duration:var(--durationNormal);}", ".f1f3shah:focus-within:after{transition-delay:var(--curveDecelerateMid);}", ".f1e6xsgv: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);}"],
204
173
  "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);}"],
205
174
  "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);}"]
206
175
  });
@@ -231,32 +200,36 @@ const useTextareaStyles = /*#__PURE__*/react_1.__styles({
231
200
  "small": {
232
201
  "Bqenvij": "frvgh55",
233
202
  "z8tnut": "f1g0x7ka",
234
- "z189sj": ["fdr11yp", "f391vcr"],
203
+ "z189sj": ["f135dnwl", "f1e60jzv"],
235
204
  "Byoj8tv": "f1qch9an",
236
- "uwmqm3": ["fe83xzc", "f1j1pjsa"],
205
+ "uwmqm3": ["f1xile11", "fqznh8f"],
206
+ "Bahqtrf": "fk6fouc",
237
207
  "Be2twd7": "fy9rknc",
208
+ "Bhrd7zp": "figsok6",
238
209
  "Bg96gwp": "fwrc4pm"
239
210
  },
240
211
  "medium": {
241
212
  "Bqenvij": "f1d2rq10",
242
213
  "z8tnut": "f1g0x7ka",
243
- "z189sj": ["fdr11yp", "f391vcr"],
214
+ "z189sj": ["f135dnwl", "f1e60jzv"],
244
215
  "Byoj8tv": "f1qch9an",
245
- "uwmqm3": ["f391vcr", "fdr11yp"],
216
+ "uwmqm3": ["f1e60jzv", "f135dnwl"],
217
+ "Bahqtrf": "fk6fouc",
246
218
  "Be2twd7": "fkhj508",
219
+ "Bhrd7zp": "figsok6",
247
220
  "Bg96gwp": "f1i3iumi"
248
221
  },
249
222
  "large": {
250
223
  "Bqenvij": "fbhnoac",
251
224
  "z8tnut": "f1g0x7ka",
252
- "z189sj": ["f1bf2pku", "fr8jt6m"],
225
+ "z189sj": ["fcgl2c4", "f1anj20m"],
253
226
  "Byoj8tv": "f1qch9an",
254
- "uwmqm3": ["fr8jt6m", "f1bf2pku"],
227
+ "uwmqm3": ["f1anj20m", "fcgl2c4"],
255
228
  "Be2twd7": "fod5ikn",
256
229
  "Bg96gwp": "faaz57k"
257
230
  }
258
231
  }, {
259
- "d": [".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f3rmtva{background-color:transparent;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".f1vw9udw::selection{color:var(--colorNeutralForegroundInverted);}", ".fbb3kq8::selection{background-color:var(--colorNeutralBackgroundInverted);}", ".frvgh55{height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdr11yp{padding-right:calc(10px + 2px);}", ".f391vcr{padding-left:calc(10px + 2px);}", ".f1qch9an{padding-bottom:0;}", ".fe83xzc{padding-left:calc(6px + 2px);}", ".f1j1pjsa{padding-right:calc(6px + 2px);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".f1bf2pku{padding-right:calc(12px + 2px);}", ".fr8jt6m{padding-left:calc(12px + 2px);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
232
+ "d": [".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f3rmtva{background-color:transparent;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".f1vw9udw::selection{color:var(--colorNeutralForegroundInverted);}", ".fbb3kq8::selection{background-color:var(--colorNeutralBackgroundInverted);}", ".frvgh55{height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fcgl2c4{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalXXS));}", ".f1anj20m{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalXXS));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
260
233
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
261
234
  });
262
235
  /**
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 type { TextareaSlots, TextareaState } from './Textarea.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\n// TODO(sharing) use theme values once available\nconst spacingTokens = {\n horizontal: {\n sNudge: '6px',\n mNudge: '10px',\n xss: '2px',\n m: '12px',\n },\n};\nconst contentSizeTokens = {\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n caption1: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n base400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\nconst motionDurations = {\n ultraFast: '0.05s',\n normal: '0.2s',\n};\nconst motionCurves = {\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\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: motionDurations.ultraFast,\n transitionDelay: motionCurves.accelerateMid,\n },\n ':focus-within:after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: motionDurations.normal,\n transitionDelay: motionCurves.decelerateMid,\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 filledDarker: {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n },\n\n filledLighter: {\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 color: tokens.colorNeutralForeground1,\n flexGrow: 1,\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 ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n height: textareaHeight.small,\n ...shorthands.padding(\n '0',\n `calc(${spacingTokens.horizontal.mNudge} + ${spacingTokens.horizontal.xss})`,\n '0',\n `calc(${spacingTokens.horizontal.sNudge} + ${spacingTokens.horizontal.xss})`,\n ),\n ...contentSizeTokens.caption1,\n },\n medium: {\n height: textareaHeight.medium,\n ...shorthands.padding('0', `calc(${spacingTokens.horizontal.mNudge} + ${spacingTokens.horizontal.xss})`),\n ...contentSizeTokens.body1,\n },\n large: {\n height: textareaHeight.large,\n ...shorthands.padding('0', `calc(${spacingTokens.horizontal.m} + ${spacingTokens.horizontal.xss})`),\n ...contentSizeTokens.base400,\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":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\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 ':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 ':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 color: tokens.colorNeutralForeground1,\n flexGrow: 1,\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 ':focus-visible': {\n outlineStyle: 'none', // disable default browser outline\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n height: textareaHeight.small,\n ...shorthands.padding(\n '0',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n '0',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n ...typographyStyles.caption1,\n },\n medium: {\n height: textareaHeight.medium,\n ...shorthands.padding('0', `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n ...typographyStyles.body1,\n },\n large: {\n height: textareaHeight.large,\n ...shorthands.padding('0', `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`),\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/"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@fluentui/react-textarea",
3
- "version": "9.0.0-alpha.2",
3
+ "version": "9.0.0-rc.3",
4
4
  "description": "Fluent UI TextArea component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
- "typings": "lib/index.d.ts",
7
+ "typings": "dist/index.d.ts",
8
8
  "sideEffects": false,
9
9
  "repository": {
10
10
  "type": "git",
@@ -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-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/packages/react-components/react-textarea/src && yarn docs",
25
+ "storybook": "node ../../../scripts/storybook/runner",
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.4",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.7",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-theme": "9.0.0-rc.6",
36
- "@fluentui/react-utilities": "9.0.0-rc.7",
37
- "@griffel/react": "1.0.3",
35
+ "@fluentui/react-theme": "9.0.0-rc.9",
36
+ "@fluentui/react-utilities": "9.0.0-rc.9",
37
+ "@griffel/react": "1.0.5",
38
38
  "tslib": "^2.1.0"
39
39
  },
40
40
  "peerDependencies": {
package/lib/Textarea.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './components/Textarea/index';
package/lib/components/Textarea/Textarea.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
2
- import type { TextareaProps } from './Textarea.types';
3
- /**
4
- * The Textarea component allows the user to enter and edit text in multiple lines.
5
- */
6
- export declare const Textarea: ForwardRefComponent<TextareaProps>;
package/lib/components/Textarea/Textarea.types.d.ts DELETED
@@ -1,63 +0,0 @@
1
- import * as React from 'react';
2
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
3
- export declare type TextareaSlots = {
4
- /**
5
- * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus
6
- * indicator border animation. For more information, see Spec.md
7
- *
8
- * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.
9
- */
10
- root: NonNullable<Slot<'span'>>;
11
- /**
12
- * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.
13
- */
14
- textarea: NonNullable<Slot<'textarea'>>;
15
- };
16
- declare type TextareaCommons = {
17
- /**
18
- * Which direction the Textarea is allowed to be resized.
19
- *
20
- * @default none
21
- */
22
- resize: 'none' | 'horizontal' | 'vertical' | 'both';
23
- /**
24
- * Size of the Textarea.
25
- *
26
- * @default medium
27
- */
28
- size: 'small' | 'medium' | 'large';
29
- /**
30
- * Styling the Textarea should use.
31
- *
32
- * @default outline
33
- */
34
- appearance: 'outline' | 'filledDarker' | 'filledLighter';
35
- };
36
- /**
37
- * Textarea Props
38
- */
39
- export declare type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>, 'textarea'>, 'value' | 'defaultValue' | 'onChange' | 'size'> & Partial<TextareaCommons> & {
40
- /**
41
- * The value of the Textarea.
42
- */
43
- value?: string;
44
- /**
45
- * The default value of the Textarea.
46
- */
47
- defaultValue?: string;
48
- /**
49
- * Callback for when the user changes the value.
50
- */
51
- onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;
52
- };
53
- /**
54
- * State used in rendering Textarea
55
- */
56
- export declare type TextareaState = ComponentState<TextareaSlots> & TextareaCommons;
57
- /**
58
- * Data passed to the `onChange` callback when the textarea's value changes.
59
- */
60
- declare type TextareaOnChangeData = {
61
- value: string;
62
- };
63
- export {};
package/lib/components/Textarea/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export * from './Textarea';
2
- export * from './Textarea.types';
3
- export * from './renderTextarea';
4
- export * from './useTextarea';
5
- export * from './useTextareaStyles';
package/lib/components/Textarea/renderTextarea.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { TextareaState } from './Textarea.types';
2
- /**
3
- * Render the final JSX of Textarea
4
- */
5
- export declare const renderTextarea_unstable: (state: TextareaState) => JSX.Element;
package/lib/components/Textarea/useTextarea.d.ts DELETED
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- import type { TextareaProps, TextareaState } from './Textarea.types';
3
- /**
4
- * Create the state required to render Textarea.
5
- *
6
- * The returned state can be modified with hooks such as useTextareaStyles_unstable,
7
- * before being passed to renderTextarea_unstable.
8
- *
9
- * @param props - props from this instance of Textarea
10
- * @param ref - reference to root HTMLElement of Textarea
11
- */
12
- export declare const useTextarea_unstable: (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => TextareaState;
package/lib/components/Textarea/useTextareaStyles.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import type { TextareaSlots, TextareaState } from './Textarea.types';
2
- import { SlotClassNames } from '@fluentui/react-utilities';
3
- export declare const textareaClassNames: SlotClassNames<TextareaSlots>;
4
- /**
5
- * Apply styling to the Textarea slots based on the state
6
- */
7
- export declare const useTextareaStyles_unstable: (state: TextareaState) => TextareaState;
package/lib/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { Textarea, renderTextarea_unstable, textareaClassNames, useTextareaStyles_unstable, useTextarea_unstable, } from './Textarea';
2
- export type { TextareaProps, TextareaSlots, TextareaState } from './Textarea';
package/lib-commonjs/Textarea.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './components/Textarea/index';
package/lib-commonjs/components/Textarea/Textarea.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
2
- import type { TextareaProps } from './Textarea.types';
3
- /**
4
- * The Textarea component allows the user to enter and edit text in multiple lines.
5
- */
6
- export declare const Textarea: ForwardRefComponent<TextareaProps>;
package/lib-commonjs/components/Textarea/Textarea.types.d.ts DELETED
@@ -1,63 +0,0 @@
1
- import * as React from 'react';
2
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
3
- export declare type TextareaSlots = {
4
- /**
5
- * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus
6
- * indicator border animation. For more information, see Spec.md
7
- *
8
- * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.
9
- */
10
- root: NonNullable<Slot<'span'>>;
11
- /**
12
- * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.
13
- */
14
- textarea: NonNullable<Slot<'textarea'>>;
15
- };
16
- declare type TextareaCommons = {
17
- /**
18
- * Which direction the Textarea is allowed to be resized.
19
- *
20
- * @default none
21
- */
22
- resize: 'none' | 'horizontal' | 'vertical' | 'both';
23
- /**
24
- * Size of the Textarea.
25
- *
26
- * @default medium
27
- */
28
- size: 'small' | 'medium' | 'large';
29
- /**
30
- * Styling the Textarea should use.
31
- *
32
- * @default outline
33
- */
34
- appearance: 'outline' | 'filledDarker' | 'filledLighter';
35
- };
36
- /**
37
- * Textarea Props
38
- */
39
- export declare type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>, 'textarea'>, 'value' | 'defaultValue' | 'onChange' | 'size'> & Partial<TextareaCommons> & {
40
- /**
41
- * The value of the Textarea.
42
- */
43
- value?: string;
44
- /**
45
- * The default value of the Textarea.
46
- */
47
- defaultValue?: string;
48
- /**
49
- * Callback for when the user changes the value.
50
- */
51
- onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;
52
- };
53
- /**
54
- * State used in rendering Textarea
55
- */
56
- export declare type TextareaState = ComponentState<TextareaSlots> & TextareaCommons;
57
- /**
58
- * Data passed to the `onChange` callback when the textarea's value changes.
59
- */
60
- declare type TextareaOnChangeData = {
61
- value: string;
62
- };
63
- export {};
package/lib-commonjs/components/Textarea/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export * from './Textarea';
2
- export * from './Textarea.types';
3
- export * from './renderTextarea';
4
- export * from './useTextarea';
5
- export * from './useTextareaStyles';
package/lib-commonjs/components/Textarea/renderTextarea.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { TextareaState } from './Textarea.types';
2
- /**
3
- * Render the final JSX of Textarea
4
- */
5
- export declare const renderTextarea_unstable: (state: TextareaState) => JSX.Element;
package/lib-commonjs/components/Textarea/useTextarea.d.ts DELETED
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- import type { TextareaProps, TextareaState } from './Textarea.types';
3
- /**
4
- * Create the state required to render Textarea.
5
- *
6
- * The returned state can be modified with hooks such as useTextareaStyles_unstable,
7
- * before being passed to renderTextarea_unstable.
8
- *
9
- * @param props - props from this instance of Textarea
10
- * @param ref - reference to root HTMLElement of Textarea
11
- */
12
- export declare const useTextarea_unstable: (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => TextareaState;
package/lib-commonjs/components/Textarea/useTextareaStyles.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import type { TextareaSlots, TextareaState } from './Textarea.types';
2
- import { SlotClassNames } from '@fluentui/react-utilities';
3
- export declare const textareaClassNames: SlotClassNames<TextareaSlots>;
4
- /**
5
- * Apply styling to the Textarea slots based on the state
6
- */
7
- export declare const useTextareaStyles_unstable: (state: TextareaState) => TextareaState;
package/lib-commonjs/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { Textarea, renderTextarea_unstable, textareaClassNames, useTextareaStyles_unstable, useTextarea_unstable, } from './Textarea';
2
- export type { TextareaProps, TextareaSlots, TextareaState } from './Textarea';