@fluentui/react-components 9.0.0-rc.1 → 9.0.0-rc.5

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 (19) hide show
  1. package/CHANGELOG.json +723 -1
  2. package/CHANGELOG.md +214 -2
  3. package/MIGRATION-NOTES.md +407 -0
  4. package/lib/AccessibilityScenarios/utils.js.map +1 -1
  5. package/lib/Concepts/Icons/ReactIconGrid.js.map +1 -1
  6. package/lib/DocsComponents/isHosted.js.map +1 -1
  7. package/lib/index.js.map +1 -1
  8. package/lib/unstable/index.d.ts +6 -0
  9. package/lib/unstable/index.js +3 -0
  10. package/lib/unstable/index.js.map +1 -1
  11. package/lib-commonjs/AccessibilityScenarios/utils.js.map +1 -1
  12. package/lib-commonjs/Concepts/Icons/ReactIconGrid.js.map +1 -1
  13. package/lib-commonjs/DocsComponents/isHosted.js.map +1 -1
  14. package/lib-commonjs/index.js.map +1 -1
  15. package/lib-commonjs/unstable/index.d.ts +6 -0
  16. package/lib-commonjs/unstable/index.js +161 -1
  17. package/lib-commonjs/unstable/index.js.map +1 -1
  18. package/package.json +32 -21
  19. package/unstable/package.json +8 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,224 @@
1
1
  # Change Log - @fluentui/react-components
2
2
 
3
- This log was last generated on Thu, 10 Feb 2022 08:43:39 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 04 Mar 2022 05:15:42 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.0.0-rc.5)
8
+
9
+ Fri, 04 Mar 2022 05:15:42 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.0.0-rc.4..@fluentui/react-components_v9.0.0-rc.5)
11
+
12
+ ### Changes
13
+
14
+ - `@fluentui/react-shared-contexts`
15
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
16
+ - `@fluentui/react-slider`
17
+ - undefined ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
18
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
19
+ - `@fluentui/react-switch`
20
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
21
+ - Updating class names to use slot class names helper type. ([PR #21933](https://github.com/microsoft/fluentui/pull/21933) by email not defined)
22
+ - `@fluentui/react-tabs`
23
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
24
+ - `@fluentui/react-tabster`
25
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
26
+ - `@fluentui/react-text`
27
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
28
+ - `@fluentui/react-theme`
29
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
30
+ - `@fluentui/react-tooltip`
31
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
32
+ - `@fluentui/react-utilities`
33
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
34
+ - Adding helper type to define slot class names. ([PR #21933](https://github.com/microsoft/fluentui/pull/21933) by email not defined)
35
+ - fix(shouldPreventDefaultOnKeyDown): return false for events that are default prevented ([PR #21905](https://github.com/microsoft/fluentui/pull/21905) by lingfangao@hotmail.com)
36
+ - `@fluentui/keyboard-keys`
37
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
38
+ - keyboard-keys: Adding missing tslib dependency. ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by Humberto.Morimoto@microsoft.com)
39
+ - `@fluentui/react-accordion`
40
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
41
+ - `@fluentui/react-aria`
42
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
43
+ - `@fluentui/react-avatar`
44
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
45
+ - `@fluentui/react-badge`
46
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
47
+ - `@fluentui/react-button`
48
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
49
+ - Button: Exporting classNames of individual slots. ([PR #20977](https://github.com/microsoft/fluentui/pull/20977) by Humberto.Morimoto@microsoft.com)
50
+ - `@fluentui/react-card`
51
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
52
+ - `@fluentui/react-checkbox`
53
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
54
+ - `@fluentui/react-components`
55
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
56
+ - Add Radio and RadioGroup to react-components/unstable ([PR #21883](https://github.com/microsoft/fluentui/pull/21883) by behowell@microsoft.com)
57
+ - `@fluentui/react-context-selector`
58
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
59
+ - `@fluentui/react-divider`
60
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
61
+ - `@fluentui/react-image`
62
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
63
+ - `@fluentui/react-input`
64
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
65
+ - `@fluentui/react-label`
66
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
67
+ - `@fluentui/react-link`
68
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
69
+ - `@fluentui/react-menu`
70
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
71
+ - `@fluentui/react-popover`
72
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
73
+ - refactor: PopoverSurface should be rendered from the Popover component ([PR #21922](https://github.com/microsoft/fluentui/pull/21922) by lingfangao@hotmail.com)
74
+ - `@fluentui/react-portal`
75
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
76
+ - `@fluentui/react-positioning`
77
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
78
+ - fix: `popperRef.setTarget` should accept virtual element type ([PR #21875](https://github.com/microsoft/fluentui/pull/21875) by lingfangao@hotmail.com)
79
+ - `@fluentui/react-provider`
80
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
81
+ - `@fluentui/react-radio`
82
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
83
+ - Initial release ([PR #21883](https://github.com/microsoft/fluentui/pull/21883) by behowell@microsoft.com)
84
+
85
+ ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.0.0-rc.4)
86
+
87
+ Tue, 01 Mar 2022 02:17:34 GMT
88
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.0.0-rc.3..@fluentui/react-components_v9.0.0-rc.4)
89
+
90
+ ### Changes
91
+
92
+ - `@fluentui/react-button`
93
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
94
+ - `@fluentui/react-card`
95
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
96
+ - `@fluentui/react-checkbox`
97
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
98
+ - Refactor Checkbox styles to use CSS pseudo-classes ([PR #21837](https://github.com/microsoft/fluentui/pull/21837) by behowell@microsoft.com)
99
+ - Rename `circular` prop to `shape` ([PR #21834](https://github.com/microsoft/fluentui/pull/21834) by behowell@microsoft.com)
100
+ - `@fluentui/react-components`
101
+ - Add Checkbox to react-components/unstable ([PR #21836](https://github.com/microsoft/fluentui/pull/21836) by behowell@microsoft.com)
102
+ - `@fluentui/react-divider`
103
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
104
+ - `@fluentui/react-input`
105
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
106
+ - `@fluentui/react-label`
107
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
108
+ - `@fluentui/react-link`
109
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
110
+ - `@fluentui/react-menu`
111
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
112
+ - `@fluentui/react-popover`
113
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
114
+ - `@fluentui/react-positioning`
115
+ - feat: add isIntersectingModifier to usePopper ([PR #21855](https://github.com/microsoft/fluentui/pull/21855) by olfedias@microsoft.com)
116
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
117
+ - `@fluentui/react-slider`
118
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
119
+ - `@fluentui/react-switch`
120
+ - Switch: Re-implementing component to make it simpler and making it adhere to latest patterns. ([PR #21849](https://github.com/microsoft/fluentui/pull/21849) by Humberto.Morimoto@microsoft.com)
121
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
122
+ - `@fluentui/react-tabs`
123
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
124
+ - `@fluentui/react-tabster`
125
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
126
+ - `@fluentui/react-text`
127
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
128
+ - `@fluentui/react-utilities`
129
+ - Ignore prefix in useId() when it is falsey. ([PR #21848](https://github.com/microsoft/fluentui/pull/21848) by seanmonahan@microsoft.com)
130
+ - Add fieldset to getNativeElementProps ([PR #21835](https://github.com/microsoft/fluentui/pull/21835) by behowell@microsoft.com)
131
+
132
+ ## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.0.0-rc.3)
133
+
134
+ Fri, 18 Feb 2022 13:35:27 GMT
135
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.0.0-rc.1..@fluentui/react-components_v9.0.0-rc.3)
136
+
137
+ ### Changes
138
+
139
+ - `@fluentui/react-avatar`
140
+ - Hide Avatar's image if it fails to load, rather than displaying the broken image icon ([PR #21636](https://github.com/microsoft/fluentui/pull/21636) by behowell@microsoft.com)
141
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
142
+ - Update Avatar SPEC.md and MIGRATION.md ([PR #21702](https://github.com/microsoft/fluentui/pull/21702) by behowell@microsoft.com)
143
+ - `@fluentui/react-badge`
144
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
145
+ - `@fluentui/react-button`
146
+ - SplitButton: Fixing issue where menuIcon prop was not being respected. ([PR #21683](https://github.com/microsoft/fluentui/pull/21683) by Humberto.Morimoto@microsoft.com)
147
+ - Button: Updating stories to fix a11y issues. ([PR #21679](https://github.com/microsoft/fluentui/pull/21679) by Humberto.Morimoto@microsoft.com)
148
+ - SplitButton: Fixing screen reader access issues. ([PR #21703](https://github.com/microsoft/fluentui/pull/21703) by Humberto.Morimoto@microsoft.com)
149
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
150
+ - Button: Adding tests and fixing issues in SplitButton and ToggleButton. ([PR #21719](https://github.com/microsoft/fluentui/pull/21719) by Humberto.Morimoto@microsoft.com)
151
+ - `@fluentui/react-card`
152
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
153
+ - Add new appearance property to allow for different card styles ([PR #21264](https://github.com/microsoft/fluentui/pull/21264) by 39736248+andrefcdias@users.noreply.github.com)
154
+ - fix: top padding issues with CardPreview ([PR #21685](https://github.com/microsoft/fluentui/pull/21685) by 39736248+andrefcdias@users.noreply.github.com)
155
+ - `@fluentui/react-checkbox`
156
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
157
+ - `@fluentui/react-components`
158
+ - Moved react-tabs to unstable ([PR #21763](https://github.com/microsoft/fluentui/pull/21763) by gcox@microsoft.com)
159
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
160
+ - `@fluentui/react-conformance-griffel`
161
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
162
+ - `@fluentui/react-context-selector`
163
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
164
+ - `@fluentui/react-divider`
165
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
166
+ - `@fluentui/react-image`
167
+ - fix: Add react-theme as dependency to react-image ([PR #21787](https://github.com/microsoft/fluentui/pull/21787) by lingfangao@hotmail.com)
168
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
169
+ - `@fluentui/react-input`
170
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
171
+ - `@fluentui/react-label`
172
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
173
+ - `@fluentui/react-link`
174
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
175
+ - `@fluentui/react-menu`
176
+ - fix: MenuItem is a submenu trigger if it is wrapped by a MenuTrigger and in a submenu ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by lingfangao@hotmail.com)
177
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
178
+ - `@fluentui/react-popover`
179
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
180
+ - `@fluentui/react-portal`
181
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
182
+ - `@fluentui/react-positioning`
183
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
184
+ - `@fluentui/react-provider`
185
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
186
+ - `@fluentui/react-shared-contexts`
187
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
188
+ - `@fluentui/react-slider`
189
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
190
+ - `@fluentui/react-switch`
191
+ - fix visual display of controlled switches ([PR #21704](https://github.com/microsoft/fluentui/pull/21704) by mgodbolt@microsoft.com)
192
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
193
+ - `@fluentui/react-tabs`
194
+ - chore: Force bump all v9 packages to release correct source maps ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
195
+ - Updated beta and RC components to ES2019 ([PR #20405](https://github.com/microsoft/fluentui/pull/20405) by gcox@microsoft.com)
196
+ - Publish initial version ([PR #21763](https://github.com/microsoft/fluentui/pull/21763) by gcox@microsoft.com)
197
+ - `@fluentui/react-tabster`
198
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
199
+ - `@fluentui/react-text`
200
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
201
+ - `@fluentui/react-theme`
202
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
203
+ - `@fluentui/react-tooltip`
204
+ - Update documentation comments ([PR #21736](https://github.com/microsoft/fluentui/pull/21736) by behowell@microsoft.com)
205
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
206
+ - update trigger implementation to be consistent ([PR #21626](https://github.com/microsoft/fluentui/pull/21626) by olfedias@microsoft.com)
207
+ - `@fluentui/react-utilities`
208
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
209
+ - `@fluentui/keyboard-keys`
210
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
211
+ - `@fluentui/react-accordion`
212
+ - Updates initial open items value to be empty on every case ([PR #21728](https://github.com/microsoft/fluentui/pull/21728) by bsunderhus@microsoft.com)
213
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
214
+ - Breaking change: navigable becomes navigation ([PR #21729](https://github.com/microsoft/fluentui/pull/21729) by bsunderhus@microsoft.com)
215
+ - `@fluentui/react-aria`
216
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
217
+ - Fixing issue in useAriaButton where passing disabledFocusable=false caused aria-disabled to be set to false and appear in DOM instead of just be undefined for that element. ([PR #21703](https://github.com/microsoft/fluentui/pull/21703) by Humberto.Morimoto@microsoft.com)
218
+
7
219
  ## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.0.0-rc.1)
8
220
 
9
- Thu, 10 Feb 2022 08:43:39 GMT
221
+ Thu, 10 Feb 2022 08:50:26 GMT
10
222
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.0.0-beta.5..@fluentui/react-components_v9.0.0-rc.1)
11
223
 
12
224
  ### Changes
package/MIGRATION-NOTES.md ADDED
@@ -0,0 +1,407 @@
1
+ # Migration notes from `@fluentui/react-components@9.0.0-beta.5`to `@fluentui/react-components@9.0.0-rc.1`
2
+
3
+ ## Changes to the styling system
4
+
5
+ ### Functions no longer supported
6
+
7
+ Functions in `makeStyles()` are no longer supported, the `tokens` object can be used directly instead.
8
+
9
+ Please apply following changes:
10
+
11
+ ```diff
12
+ -import { makeStyles } from '@fluentui/react-components';
13
+ +import { makeStyles, tokens } from '@fluentui/react-components';
14
+
15
+ const useStyles = makeStyles({
16
+ - root: theme => ({ color: theme.tokenB }),
17
+ + root: { color: tokens.tokenB },
18
+ });
19
+ ```
20
+
21
+ Focus indicator style functions in `@fluentui/react-tabster` were also updated to support this change:
22
+
23
+ ```diff
24
+ -import { createCustomFocusIndicatorStyle, createFocusOutlineStyle, makeStyles } from '@fluentui/react-components';
25
+ +import { createCustomFocusIndicatorStyle, createFocusOutlineStyle, makeStyles, tokens } from '@fluentui/react-components';
26
+
27
+ const useStyles = makeStyles({
28
+ - focusOutline1: createFocusOutlineStyle(theme, { selector: 'focus-within', style: { outlineOffset: '8px' } }),
29
+ + focusOutline1: createFocusOutlineStyle({ selector: 'focus-within', style: { outlineOffset: '8px' } }),
30
+
31
+ - focusOutline2: createFocusOutlineStyle(theme => ({ backgroundColor: theme.colorNeutralBackground1 })),
32
+ + focusOutline2: createFocusOutlineStyle({ backgroundColor: tokens.colorNeutralBackground1 }),
33
+ });
34
+ ```
35
+
36
+ For more details, please check [microsoft/fluentui#20651](https://github.com/microsoft/fluentui/pull/20651).
37
+
38
+ ### CSS shorthands no longer supported
39
+
40
+ [CSS shorthands](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) in `makeStyles()` calls are no longer supported. For many shorthands there exist matching functions in `@fluentui/react-components`:
41
+
42
+ ```ts
43
+ import { shorthands } from '@fluentui/react-componenents';
44
+
45
+ console.log(shorthands.overflow('hidden')); // { overflowX: 'hidden', overflowY: 'hidden' }
46
+ ```
47
+
48
+ Please apply following changes:
49
+
50
+ ```diff
51
+ import { makeStyles } from '@fluentui/react-componenents';
52
+ +import { makeStyles, shorthands } from '@fluentui/react-componenents';
53
+
54
+ const useStyles = makeStyles({
55
+ - backgroundColor: { background: 'red' },
56
+ + backgroundColor: { backgroundColor: 'red' },
57
+ - padding: { padding: '5px' },
58
+ + padding: { ...shorthands.padding('5px') },
59
+ - margin: { margin: '5px' },
60
+ + margin: { ...shorthands.margin('5px') },
61
+ - border: { border: '5px solid red' },
62
+ + border: { ...shorthands.border('5px', 'solid', 'red') },
63
+ - borderRight: { borderRight: '5px solid red' },
64
+ + borderRight: { ...shorthands.borderRight('5px', 'solid', 'red') },
65
+ });
66
+ ```
67
+
68
+ For more details, please check [microsoft/fluentui#20573](https://github.com/microsoft/fluentui/pull/20573).
69
+
70
+ ### makeStyles is now Griffel [just rename]
71
+
72
+ `makeStyles` CSS-in-JS become a separate project called [Griffel](https://github.com/microsoft/griffel). It is still used in Fluent UI React v9.
73
+
74
+ ## Changes to the theming system
75
+
76
+ ### Brand ramp updated
77
+
78
+ The brand colors have been updated to match the latest design guidelines.
79
+
80
+ For more details, please check [microsoft/fluentui#20140](https://github.com/microsoft/fluentui/pull/20140).
81
+
82
+ The shape of the Brand ramp object which is used to create a theme was changed from shade/primary/tint properties to an array of values for 10, 20 ... 160.
83
+
84
+ For more details, please check [microsoft/fluentui#20884](https://github.com/microsoft/fluentui/pull/20884).
85
+
86
+ ### Tokens to css variables mapping is now exported
87
+
88
+ An object mapping the available tokens in the `Theme` to their respective css variables is now exported. You can import and use it in your project as follows:
89
+
90
+ ```ts
91
+ import { tokens } from '@fluentui/react-components';
92
+
93
+ // To refer to the css variable containing the value for color neutral foreground 1:
94
+ console.log(tokens.colorNeutralForeground1);
95
+ ```
96
+
97
+ ### Custom tokens can now be passed as part of the Theme
98
+
99
+ Previously, the only tokens one could access were those provided by Fluent UI in its `Theme` definition. We are now opening up our APIs so that custom tokens can be passed down and accessed in our theming infrastructure. An example of how to achieve that is as follows:
100
+
101
+ ```tsx
102
+ import { makeStyles, themeToTokensObject, webLightTheme, FluentProvider, Theme } from '@fluentui/react-components';
103
+
104
+ // You can pass your own custom tokens to a theme and pass that to the provider.
105
+ type CustomTheme = Theme & {
106
+ tokenA: string;
107
+ tokenB: string;
108
+ tokenC: string;
109
+ };
110
+ const customTheme: CustomTheme = { ...webLightTheme, tokenA: 'red', tokenB: 'blue', tokenC: 'green' };
111
+ function App() {
112
+ return <FluentProvider theme={customTheme}>{/* ... */}</FluentProvider>;
113
+ }
114
+
115
+ // ...
116
+
117
+ // You can construct a custom tokens object by yourself.
118
+ const customTokens: Record<keyof CustomTheme, string> = {
119
+ ...tokens,
120
+ tokenA: `var(--tokenA)`,
121
+ tokenB: `var(--tokenB)`,
122
+ tokenC: `var(--tokenC)`,
123
+ };
124
+
125
+ // You can alternatively use the themeToTokensObject function to construct the custom tokens object.
126
+ // Note: If you do it via the themeToTokensObject you might see a negative effect on tree-shaking since bundles won't know the shape of the output.
127
+ const alternativeCustomTokens = themeToTokensObject(customTheme);
128
+
129
+ // You can then use this custom tokens object inside your styles.
130
+ const useStyles = makeStyles({
131
+ base: {
132
+ color: customTokens.tokenA,
133
+ backgroundColor: customTokens.tokenB,
134
+ outlineColor: customTokens.tokenC,
135
+ },
136
+ });
137
+ ```
138
+
139
+ ### `themeToCSSVariables()` was removed
140
+
141
+ `themeToCSSVariables()` was previously used for getting CSS variables name from nested values on `Theme`, since `Theme` has become flattened this method becomes unnecessary.
142
+
143
+ This API was internal, no replacement is provided.
144
+
145
+ For more details, please check [microsoft/fluentui#20828](https://github.com/microsoft/fluentui/pull/20828).
146
+
147
+ ## Typings & exports
148
+
149
+ ### Hooks are now exported with "\_unstable" suffix
150
+
151
+ All component hooks and render functions were renamed to add the suffix `_unstable` to indicate that their API has not been finalized and may change in the future.
152
+
153
+ ```diff
154
+ -import { renderAccordionHeader } from `@fluentui/react-components`;
155
+ +import { renderAccordionHeader_unstable } from `@fluentui/react-components`;
156
+
157
+ -useAccordionHeaderStyles();
158
+ -renderAccordionHeader();
159
+ +useAccordionHeaderStyles_unstable();
160
+ +renderAccordionHeader_unstable();
161
+ ```
162
+
163
+ > **Note**: No changes in functionality.
164
+
165
+ For more details, please check [microsoft/fluentui#21365](https://github.com/microsoft/fluentui/pull/21365).
166
+
167
+ ### `*Commons` types are no longer exported
168
+
169
+ ```diff
170
+ -import { AvatarCommons } from '@fluentui/react-components';
171
+ ```
172
+
173
+ There is no direct replacement, consider to use `AvatarProps` or `AvatarState` for example. For more details, please check [microsoft/fluentui#21195](https://github.com/microsoft/fluentui/pull/21195).
174
+
175
+ ### Removed functionality & exports
176
+
177
+ #### `useTheme()` hook is no longer exported
178
+
179
+ To replace the hook usage please apply the following changes:
180
+
181
+ ```diff
182
+ -import { useTheme } from `@fluentui/react-components`;
183
+ +import { tokens } from `@fluentui/react-components`;
184
+
185
+ function App() {
186
+ - const theme = useTheme();
187
+
188
+ - return <div style={{ color: theme.colorNeutralForeground1 }} />;
189
+ + return <div style={{ color: tokens.colorNeutralForeground1 }} />;
190
+ }
191
+ ```
192
+
193
+ > **Note**: `tokens.VALUE` returns the name of a CSS variable, not an actual value.
194
+
195
+ For more details, please check [microsoft/fluentui#21257](https://github.com/microsoft/fluentui/pull/21257).
196
+
197
+ #### `mergeThemes()` function has been removed
198
+
199
+ To replace the usage of this function you should just spread the themes into a new object (which was what the function was doing internally for the most part):
200
+
201
+ ```diff
202
+ import { webLightTheme, Theme } from '@fluentui/react-components';
203
+
204
+ const customTokens = { ... };
205
+ -const customTheme = mergeTheme(webLightTheme, customTokens);
206
+ +const customTheme = { ...webLightTheme, ...customTokens };
207
+ ```
208
+
209
+ #### `*shorthandProps` removed
210
+
211
+ ```diff
212
+ -import { accordionPanelShorthandProps } from '@fluentui/react-components'
213
+ ```
214
+
215
+ These arrays with enumerated list of slots are no longer needed. For more details, please check [microsoft/fluentui#21134](https://github.com/microsoft/fluentui/pull/21134).
216
+
217
+ ### Slot utilities have been updated and renamed
218
+
219
+ #### The `getSlots` function has been updated
220
+
221
+ > **Note**: This change should not affect most users of the library. It only affects authors of custom render functions.
222
+
223
+ `getSlots` now returns `null` instead of `nullRender` for slots that don't render. This requires that the render function checks for null before rendering a slot. `getSlots` also no longer takes a second parameter listing the slot names.
224
+
225
+ ```diff
226
+ const renderMyComponent = (state: MyComponentState) => {
227
+ - const { slots, slotProps } = getSlots<MyComponentSlots>(state, ['root', 'slotA', 'slotB']);
228
+ + const { slots, slotProps } = getSlots<MyComponentSlots>(state);
229
+
230
+ return (
231
+ <slots.root {...slotProps.root}>
232
+ - <slots.slotA {...slotProps.slotA} />
233
+ - <slots.slotB {...slotProps.slotB} />
234
+ + {slots.slotA && <slots.slotA {...slotProps.slotA} />}
235
+ + {slots.slotB && <slots.slotB {...slotProps.slotB} />}
236
+ </slots.root>
237
+ );
238
+ };
239
+ ```
240
+
241
+ For more details, see [microsoft/fluentui#21503](https://github.com/microsoft/fluentui/pull/21503).
242
+
243
+ #### New `Slot` type, and renamed slot utility types
244
+
245
+ > **Note**: This change should not affect most users of the library. It only affects authors of custom components.
246
+
247
+ All slots are now declared using a single `Slot` type:
248
+
249
+ - `IntrinsicShorthandProps` => `Slot`: direct rename with the same arguments.
250
+ - `ObjectShorthandProps` => `Slot`: the argument changes from the props type to the component type; e.g. from `ButtonProps`, to `typeof Button`.
251
+
252
+ ```diff
253
+ type MyComponentSlots = {
254
+ - root?: IntrinsicShorthandProps<'div'>;
255
+ - slotA?: IntrinsicShorthandProps<'label', 'span' | 'div'>;
256
+ - slotB?: ObjectShorthandProps<ButtonProps>;
257
+ + root?: Slot<'div'>;
258
+ + slotA?: Slot<'label', 'span' | 'div'>;
259
+ + slotB?: Slot<typeof Button>;
260
+ };
261
+ ```
262
+
263
+ The following types related to slots have been renamed:
264
+
265
+ - `ShorthandProps` => `WithSlotShorthandValue`
266
+ - `ShorthandRenderFunction` => `SlotRenderFunction`
267
+ - `ObjectShorthandPropsRecord` => `SlotPropsRecord`
268
+ - `DefaultObjectShorthandProps` => `UnknownSlotProps`
269
+
270
+ ## Component changes
271
+
272
+ ### `Accordion`
273
+
274
+ - `AccordionHeaderExpandIcon` has been removed and replaced by `ChevronRightRegular` from `@fluentui/react-icons`, [#21218](https://github.com/microsoft/fluentui/pull/21218).
275
+ - `AccordionHeader` props `children` is no longer a slot, [#21285](https://github.com/microsoft/fluentui/pull/21285).
276
+
277
+ ### `Avatar`
278
+
279
+ - The `label` prop has been renamed to `initials`.
280
+ - Removed the `getInitials` prop. Instead, the customized initials can be set directly on the `initials` prop:
281
+ ```diff
282
+ - <Avatar name={name} getInitials={customGetInitialsFunction} />
283
+ + <Avatar name={name} initials={customGetInitialsFunction(name)} />
284
+ ```
285
+ - The `activeAppearance` prop can no longer be `glow` or `ring-glow`. Those appearances may be added again later when they have a final visual design.
286
+
287
+ ### `Button`
288
+
289
+ - A styling change was made were the border radius of small buttons changed from using the `borderRadiusMedium` token (`4px` in our default global tokens) to now use the `borderRadiusSmall` token (`2px` in our default global tokens).
290
+
291
+ ### `Checkbox`
292
+
293
+ - The label is now provided by the `label` prop instead of as the child of `Checkbox`.
294
+ ```diff
295
+ - <Checkbox>Example</Checkbox>
296
+ + <Checkbox label="Example" />
297
+ ```
298
+
299
+ ### `CompoundButton`
300
+
301
+ The styles of the `CompoundButton` component have been updated to match the latest design specification guidelines. The changes made are outlined below:
302
+
303
+ | Style changed | Value Before | ValueAfter |
304
+ | ------------------------------------------------- | :----------: | :-------------------: |
305
+ | Separation between primary and secondary contents | `4px` | `0` |
306
+ | Small-sized button padding | `8px` | `8px 8px 10px 8px` |
307
+ | Medium-sized button padding | `12px` | `14px 12px 16px 12px` |
308
+ | Large-sized button padding | `16px` | `18px 16px 20px 16px` |
309
+
310
+ ### Icons
311
+
312
+ - Most icons are now available without a specific size (like `<PersonRegular />` instead of `<Person24Regular />`).
313
+ - These icons will get their size from either the CSS `fontSize`, or the icon's `fontSize` property. Every FluentUI component with an `icon` slot will style these icons to be the correct size when used in that slot.
314
+ - For example, instead of having to pick the correct size icon for a Button, an icon without a specific size can be used:
315
+ ```diff
316
+ - <Button icon={<Add20Filled />} />
317
+ - <Button icon={<Add24Filled />} size="large" />
318
+ + <Button icon={<AddFilled />} />
319
+ + <Button icon={<AddFilled />} size="large" />
320
+ ```
321
+
322
+ ### `FluentProvider`
323
+
324
+ - Outermost `FluentProvider` now emits a warning to user in development/test environment if there has been no theme set, [#21286](https://github.com/microsoft/fluentui/pull/21286).
325
+
326
+ ### `Menu`
327
+
328
+ The order of JSX children are now important. The `MenuTrigger` or an element that composes `MenuTrigger` must be the first JSX child of `Menu` and `MenuPopover` or its composed variants must be the second JSX child.
329
+
330
+ ```tsx
331
+ function App() {
332
+ return (
333
+ <>
334
+ {/* ❌❌❌ */}
335
+ <Menu>
336
+ <MenuPopover>
337
+ <MenuList>
338
+ <MenuItem> Item </MenuItem>
339
+ <MenuItem> Item </MenuItem>
340
+ <MenuItem> Item </MenuItem>
341
+ </MenuList>
342
+ </MenuPopover>
343
+ <MenuTrigger>
344
+ <button>Menu trigger</button>
345
+ </MenuTrigger>
346
+ </Menu>
347
+
348
+ {/* ✅✅✅ */}
349
+ <Menu>
350
+ <MenuTrigger>
351
+ <button>Menu trigger</button>
352
+ </MenuTrigger>
353
+ <MenuPopover>
354
+ <MenuList>
355
+ <MenuItem> Item </MenuItem>
356
+ <MenuItem> Item </MenuItem>
357
+ <MenuItem> Item </MenuItem>
358
+ </MenuList>
359
+ </MenuPopover>
360
+ </Menu>
361
+
362
+ {/* ✅✅✅ */}
363
+ <Menu>
364
+ <WrapperElement>
365
+ <MenuTrigger>
366
+ <button>Menu trigger</button>
367
+ </MenuTrigger>
368
+ </WrapperElement>
369
+ <MenuPopover>
370
+ <MenuList>
371
+ <MenuItem> Item </MenuItem>
372
+ <MenuItem> Item </MenuItem>
373
+ <MenuItem> Item </MenuItem>
374
+ </MenuList>
375
+ </MenuPopover>
376
+ </Menu>
377
+ </>
378
+ );
379
+ }
380
+ ```
381
+
382
+ ### `MenuButton`
383
+
384
+ - The typings of the `MenuButton` component have been updated to fix an issue where `ref` could not be properly passed because the type of it was wrong. It used to be that the only way to pass it was by typing it as `any`. After our change we are able to pass a properly typed `ref` of type `React.RefObject<HTMLButtonElement | HTMLAnchorElement>`.
385
+
386
+ ### `ToggleButton`
387
+
388
+ - An issue was fixed where `aria-pressed` used to still change on `ToggleButton` click when the component was `disabledFocusable`. This is no longer the case and the component now behaves correctly.
389
+
390
+ ### `Tooltip`
391
+
392
+ - `Tooltip` has a new required prop `relationship`. It describes how the tooltip is related to its child (trigger), and is used to set the appropriate aria properties on the trigger element. Its values can be:
393
+ - `label` - The tooltip is the only text label for a control (for example an icon-only button).
394
+ - `description` - The tooltip is extra descriptive text for a control that has another label.
395
+ - `inaccessible` - The tooltip's content is not available to accessibility tools. This is not recommended unless the content is accessible in some other way.
396
+ - Native props now must go on the `content` slot instead of the `Tooltip` itself.
397
+ - This only applies to HTMLElement props that are forwarded the Tooltip's `<div>` element; it doesn't apply to Tooltip-specific props like `appearance="inverted"`. This example would need to change:
398
+ ```diff
399
+ - <Tooltip id="example-id" className="example-class" content="Example Tooltip" relationship="label">
400
+ + <Tooltip content={{ id: 'example-id', className: 'example-class', children: 'Example Tooltip' }} relationship="label">
401
+ ```
402
+ - This example is fine because `relationship="label"` is a Tooltip prop.
403
+ ```diff
404
+ <Tooltip content="Example Tooltip" relationship="label">
405
+ ```
406
+ - The `inverted` prop was removed. Use `appearance="inverted"` instead.
407
+ - The `triggerAriaAttribute` prop was removed. Use the `relationship` prop instead.
package/lib/AccessibilityScenarios/utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/AccessibilityScenarios/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,SAAS,GAAG,yBAAlB;AACA,MAAM,mBAAmB,GAAG,KAA5B,C,CAQA;AACA;;AACA,OAAO,MAAM,cAAc,GAAI,KAAD,iBAC5B,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,EAAA,SAAS,EAAC,iBAAb;AAA+B,EAAA,IAAI,EAAE,kBAAkB,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,KAAK,EAAnF;AAAuF,EAAA,MAAM,EAAC;AAA9F,CAAA,EACG,KAAK,CAAC,OADT,CADK;AAMP,OAAO,MAAM,iBAAiB,GAAa,KAAK,iBAC9C,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,EAAA,SAAS,EAAC,iBAAb;AAA+B,EAAA,IAAI,EAAE;AAArC,CAAA,EACG,KAAK,CAAC,QADT,CADK;AAMP,OAAO,MAAM,QAAQ,GAAG,mBAAM,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB,EAAkB,sBAAlB,CAAvB;AAEP,OAAO,MAAM,QAAQ,GAAmD,CAAC;AAAE,EAAA,SAAF;AAAa,EAAA;AAAb,CAAD,KAA4B;AAClG,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,QAAQ,CAAC,KAAT,GAAiB,SAAS,GAAG,mBAAZ,GAAkC,SAAnD;AACD,GAFD,EAEG,CAAC,SAAD,CAFH;AAIA,sBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,IAAI,EAAC;AAAV,GAAA,eACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS,IAAT,CADF,eAEE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAFF,EAGG,QAHH,CADF;AAOD,CAZM","sourceRoot":""}
1
+ {"version":3,"sources":["AccessibilityScenarios/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,SAAS,GAAG,yBAAlB;AACA,MAAM,mBAAmB,GAAG,KAA5B,C,CAQA;AACA;;AACA,OAAO,MAAM,cAAc,GAAI,KAAD,iBAC5B,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,EAAA,SAAS,EAAC,iBAAb;AAA+B,EAAA,IAAI,EAAE,kBAAkB,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,KAAK,EAAnF;AAAuF,EAAA,MAAM,EAAC;AAA9F,CAAA,EACG,KAAK,CAAC,OADT,CADK;AAMP,OAAO,MAAM,iBAAiB,GAAa,KAAK,iBAC9C,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,EAAA,SAAS,EAAC,iBAAb;AAA+B,EAAA,IAAI,EAAE;AAArC,CAAA,EACG,KAAK,CAAC,QADT,CADK;AAMP,OAAO,MAAM,QAAQ,GAAG,mBAAM,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB,EAAkB,sBAAlB,CAAvB;AAEP,OAAO,MAAM,QAAQ,GAAmD,CAAC;AAAE,EAAA,SAAF;AAAa,EAAA;AAAb,CAAD,KAA4B;AAClG,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,IAAA,QAAQ,CAAC,KAAT,GAAiB,SAAS,GAAG,mBAAZ,GAAkC,SAAnD;AACD,GAFD,EAEG,CAAC,SAAD,CAFH;AAIA,sBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,IAAI,EAAC;AAAV,GAAA,eACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS,IAAT,CADF,eAEE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAFF,EAGG,QAHH,CADF;AAOD,CAZM","sourcesContent":["import * as React from 'react';\n\nconst APP_TITLE = 'Accessibility Scenarios';\nconst APP_TITLE_SEPARATOR = ' | ';\n\ninterface FullscreenLinkProps {\n parent: string;\n story: string;\n content: string;\n}\n\n// https://storybook.js.org/addons/@storybook/addon-links does not allow opening a story in new tab\n// so this is a naive attempt for opening a story in full screen\nexport const FullscreenLink = (props: FullscreenLinkProps) => (\n <a className=\"sbdocs sbdocs-a\" href={`iframe.html?id=${props.parent}--${props.story}`} target=\"_blank\">\n {props.content}\n </a>\n);\n\nexport const ScenariosListLink: React.FC = props => (\n <a className=\"sbdocs sbdocs-a\" href={`iframe.html?id=accessibility-scenarios-list-of-scenarios--page`}>\n {props.children}\n </a>\n);\n\nexport const BackLink = () => <ScenariosListLink>Go back to main menu</ScenariosListLink>;\n\nexport const Scenario: React.FunctionComponent<{ pageTitle: string }> = ({ pageTitle, children }) => {\n React.useEffect(() => {\n document.title = pageTitle + APP_TITLE_SEPARATOR + APP_TITLE;\n }, [pageTitle]);\n\n return (\n <div role=\"main\">\n <BackLink />\n <br />\n {children}\n </div>\n );\n};\n"],"sourceRoot":"../src/"}