chore: bump @griffel/* packages

[layershifter]

New Behavior

This PR bumps @griffel/* packages to latest.

Notable changes

• CSS shorthands support 🚀 https://github.com/microsoft/griffel/issues/531
• Fixed breaking change in types due bump of csstype https://github.com/microsoft/griffel/issues/510
• Improved error reporting for Babel plugin/Webpack loader https://github.com/microsoft/griffel/pull/522
• Improved speed of @griffel/jest-serializer https://github.com/microsoft/griffel/pull/516

Note on bundle size changes:

• runtime part of Griffel became 400 bytes bigger to handle insertion by priority (https://github.com/microsoft/griffel/pull/539), needed for shorthands support
• non-compiled version of makeStyles() (without AOT) became 4kb bigger as it bundles shorthands mapping (https://github.com/microsoft/griffel/pull/544)

PR changes

• package.json files & change log files
• @babel/* packages have been bumped to avoid duplicates
  • packages/react-components/babel-preset-global-context/src/index.ts have been updated due TS error "types were not portable"
• As the most of shorthands.*() have been deprecated:
  • packages/eslint-plugin/src/configs/core.js have been temporary updated to exclude to disable deprecation rule for ['**/*.stories.tsx', '**/*.styles.ts', '**/*.cy.tsx', '**/*.mixins.ts']
  • packages/react-components/react-calendar-compat/src/utils/animations.ts disabled deprecation/deprecation
  • packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts disabled deprecation/deprecation
  • packages/react-components/theme-designer/src/* disabled deprecation/deprecation
• Bug fix in @griffel/jest-serializer that removes trailing spaces:
  • packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx updated
• Renamed packages/react-components/theme-designer/src/components/ColorTokens/TokenList.styles.ts to have .styles.ts suffix instead of style.ts

Follow ups

• Run codemod, see https://github.com/microsoft/griffel/issues/531 (tracked by #31318)
• Remove disabled deprecation/deprecation (tracked by #31318)

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-accordion Accordion (including children components)	101.386 kB 30.643 kB	101.791 kB 30.819 kB	405 B 176 B
react-alert Alert	83.737 kB 23.475 kB	84.099 kB 23.645 kB	362 B 170 B
react-avatar Avatar	50.175 kB 15.944 kB	50.537 kB 16.11 kB	362 B 166 B
react-avatar AvatarGroup	19.702 kB 7.794 kB	20.107 kB 7.973 kB	405 B 179 B
react-avatar AvatarGroupItem	64.829 kB 20.272 kB	65.191 kB 20.441 kB	362 B 169 B
react-badge Badge	26.905 kB 8.73 kB	27.31 kB 8.901 kB	405 B 171 B
react-badge CounterBadge	27.806 kB 9.025 kB	28.214 kB 9.202 kB	408 B 177 B
react-badge PresenceBadge	25.311 kB 9.307 kB	25.717 kB 9.483 kB	406 B 176 B
react-breadcrumb @fluentui/react-breadcrumb - package	117.263 kB 32.241 kB	117.668 kB 32.416 kB	405 B 175 B
react-button Button	39.513 kB 11.17 kB	39.917 kB 11.339 kB	404 B 169 B
react-button CompoundButton	46.874 kB 12.662 kB	47.278 kB 12.834 kB	404 B 172 B
react-button MenuButton	44.292 kB 12.544 kB	44.698 kB 12.729 kB	406 B 185 B
react-button SplitButton	52.306 kB 14.135 kB	52.71 kB 14.313 kB	404 B 178 B
react-button ToggleButton	56.558 kB 13.068 kB	56.963 kB 13.243 kB	405 B 175 B
react-calendar-compat Calendar Compat	154.469 kB 40.161 kB	154.849 kB 40.324 kB	380 B 163 B
react-card Card - All	104.438 kB 29.41 kB	104.845 kB 29.585 kB	407 B 175 B
react-card Card	97.449 kB 27.681 kB	97.858 kB 27.837 kB	409 B 156 B
react-card CardFooter	13.971 kB 5.626 kB	14.375 kB 5.796 kB	404 B 170 B
react-card CardHeader	16.214 kB 6.386 kB	16.618 kB 6.555 kB	404 B 169 B
react-card CardPreview	14.015 kB 5.752 kB	14.418 kB 5.931 kB	403 B 179 B
react-checkbox Checkbox	36.102 kB 12.131 kB	36.506 kB 12.305 kB	404 B 174 B
react-combobox Combobox (including child components)	105.628 kB 33.907 kB	106.032 kB 34.071 kB	404 B 164 B
react-combobox Dropdown (including child components)	107.043 kB 33.877 kB	107.447 kB 34.045 kB	404 B 168 B
react-components react-components: Button, FluentProvider & webLightTheme	71.55 kB 20.584 kB	71.955 kB 20.772 kB	405 B 188 B
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	221.825 kB 62.568 kB	222.188 kB 62.744 kB	363 B 176 B
react-components react-components: FluentProvider & webLightTheme	44.037 kB 14.418 kB	44.442 kB 14.607 kB	405 B 189 B
react-components react-components: entire library	1.162 MB 279.076 kB	1.166 MB 280.346 kB	4.195 kB 1.27 kB
react-datepicker-compat DatePicker Compat	228.584 kB 63.546 kB	228.881 kB 63.703 kB	297 B 157 B
react-dialog Dialog (including children components)	100.192 kB 29.884 kB	100.597 kB 30.053 kB	405 B 169 B
react-divider Divider	20.922 kB 7.791 kB	21.326 kB 7.963 kB	404 B 172 B
react-field Field	22.976 kB 8.722 kB	23.382 kB 8.901 kB	406 B 179 B
react-image Image	15.745 kB 6.231 kB	16.15 kB 6.407 kB	405 B 176 B
react-input Input	28.122 kB 9.36 kB	28.444 kB 9.526 kB	322 B 166 B
react-label Label	14.266 kB 5.829 kB	14.67 kB 6 kB	404 B 171 B
react-link Link	17.082 kB 6.911 kB	17.466 kB 7.079 kB	384 B 168 B
react-menu Menu (including children components)	154.383 kB 46.161 kB	154.746 kB 46.327 kB	363 B 166 B
react-menu Menu (including selectable components)	157.069 kB 46.71 kB	157.432 kB 46.888 kB	363 B 178 B
react-message-bar MessageBar (all components)	24.204 kB 8.983 kB	24.608 kB 9.155 kB	404 B 172 B
react-persona Persona	57.066 kB 17.821 kB	57.428 kB 17.99 kB	362 B 169 B
react-popover Popover	128.669 kB 40.26 kB	129.074 kB 40.438 kB	405 B 178 B
react-portal Portal	14.163 kB 4.948 kB	14.563 kB 5.118 kB	400 B 170 B
react-progress ProgressBar	17.428 kB 6.899 kB	17.833 kB 7.074 kB	405 B 175 B
react-provider FluentProvider	24.211 kB 8.721 kB	24.616 kB 8.903 kB	405 B 182 B
react-radio Radio	33.396 kB 10.316 kB	33.802 kB 10.485 kB	406 B 169 B
react-radio RadioGroup	15.354 kB 6.265 kB	15.758 kB 6.431 kB	404 B 166 B
react-select Select	28.609 kB 10.204 kB	28.997 kB 10.374 kB	388 B 170 B
react-slider Slider	40.395 kB 13.024 kB	40.8 kB 13.201 kB	405 B 177 B
react-spinbutton SpinButton	36.78 kB 11.789 kB	37.101 kB 11.955 kB	321 B 166 B
react-spinner Spinner	24.729 kB 8.348 kB	25.134 kB 8.521 kB	405 B 173 B
react-swatch-picker @fluentui/react-swatch-picker - package	109.642 kB 30.569 kB	110.047 kB 30.74 kB	405 B 171 B
react-switch Switch	36.04 kB 11.305 kB	36.444 kB 11.48 kB	404 B 175 B
react-table DataGrid	169.274 kB 46.907 kB	169.681 kB 47.067 kB	407 B 160 B
react-table Table (Primitives only)	45.77 kB 14.174 kB	46.175 kB 14.35 kB	405 B 176 B
react-table Table as DataGrid	138.358 kB 37.213 kB	138.765 kB 37.41 kB	407 B 197 B
react-table Table (Selection only)	76.774 kB 20.602 kB	77.181 kB 20.767 kB	407 B 165 B
react-table Table (Sort only)	75.417 kB 20.205 kB	75.824 kB 20.369 kB	407 B 164 B
react-tag-picker @fluentui/react-tag-picker - package	188.833 kB 55.784 kB	189.079 kB 55.943 kB	246 B 159 B
react-tags InteractionTag	15.299 kB 6.08 kB	15.703 kB 6.253 kB	404 B 173 B
react-tags Tag	29.092 kB 9.418 kB	29.408 kB 9.593 kB	316 B 175 B
react-tags TagGroup	82.49 kB 24.46 kB	82.895 kB 24.635 kB	405 B 175 B
react-text Text - Default	16.705 kB 6.57 kB	17.11 kB 6.744 kB	405 B 174 B
react-text Text - Wrappers	19.878 kB 6.897 kB	20.282 kB 7.074 kB	404 B 177 B
react-textarea Textarea	30.947 kB 10.477 kB	31.351 kB 10.651 kB	404 B 174 B
react-timepicker-compat TimePicker	107.646 kB 35.281 kB	108.051 kB 35.451 kB	405 B 170 B
react-toast Toast (including Toaster)	99.113 kB 29.844 kB	99.518 kB 30.001 kB	405 B 157 B
react-tooltip Tooltip	55.201 kB 19.285 kB	55.606 kB 19.444 kB	405 B 159 B

Unchanged fixtures

| Package & Exports | Size (minified/GZIP) | | ----------------- | -------------------: | | global-context
createContext | `510 B`
`328 B` | | global-context
createContextSelector | `537 B`
`339 B` | | keyboard-key
keyboard-key package | `3.746 kB`
`1.928 kB` | | priority-overflow
createOverflowManager | `4.457 kB`
`1.856 kB` | | react
ActivityItem | `71.019 kB`
`23.288 kB` | | react
Announced | `38.291 kB`
`13.239 kB` | | react
Autofill | `15.365 kB`
`4.743 kB` | | react
Breadcrumb | `201.796 kB`
`60.267 kB` | | react
Button | `195.26 kB`
`56.471 kB` | | react
ButtonGrid | `180.207 kB`
`54.515 kB` | | react
Calendar | `121.542 kB`
`36.943 kB` | | react
Callout | `84.108 kB`
`27.552 kB` | | react
Check | `52.963 kB`
`17.773 kB` | | react
Checkbox | `59.751 kB`
`19.806 kB` | | react
ChoiceGroup | `65.276 kB`
`21.438 kB` | | react
ChoiceGroupOption | `58.531 kB`
`19.309 kB` | | react
Coachmark | `92.937 kB`
`29.356 kB` | | react
Color | `7.737 kB`
`3.106 kB` | | react
ColorPicker | `132.985 kB`
`41.502 kB` | | react
ComboBox | `251.561 kB`
`72.081 kB` | | react
CommandBar | `202.829 kB`
`59.975 kB` | | react
ContextualMenu | `154.789 kB`
`48.068 kB` | | react
DatePicker | `183.939 kB`
`56.079 kB` | | react
DateTimeUtilities | `5.244 kB`
`1.849 kB` | | react
DetailsList | `229.317 kB`
`65.63 kB` | | react
Dialog | `211.12 kB`
`62.982 kB` | | react
Divider | `19.399 kB`
`6.798 kB` | | react
DocumentCard | `216.805 kB`
`64.269 kB` | | react
DragDrop | `8.343 kB`
`2.724 kB` | | react
DraggableZone | `34.109 kB`
`11.448 kB` | | react
Dropdown | `233.726 kB`
`68.456 kB` | | react
ExtendedPicker | `96.565 kB`
`27.809 kB` | | react
Fabric | `41.537 kB`
`14.283 kB` | | react
Facepile | `210.377 kB`
`63.035 kB` | | react
FloatingPicker | `241.851 kB`
`68.827 kB` | | react
FocusTrapZone | `16.975 kB`
`5.917 kB` | | react
FocusZone | `54.844 kB`
`17.402 kB` | | react
Grid | `180.207 kB`
`54.515 kB` | | react
GroupedList | `134.634 kB`
`40.596 kB` | | react
GroupedListV2 | `122.251 kB`
`37.703 kB` | | react
HoverCard | `96.969 kB`
`30.741 kB` | | react
Icon | `51.644 kB`
`17.197 kB` | | react
Icons | `66.305 kB`
`24.379 kB` | | react
Image | `46.701 kB`
`15.646 kB` | | react
Keytip | `81.482 kB`
`26.712 kB` | | react
KeytipData | `13.969 kB`
`4.57 kB` | | react
KeytipLayer | `103.278 kB`
`31.961 kB` | | react
Keytips | `106.046 kB`
`32.966 kB` | | react
Label | `38.134 kB`
`13.207 kB` | | react
Layer | `47.887 kB`
`16.295 kB` | | react
Link | `39.488 kB`
`13.614 kB` | | react
List | `39.176 kB`
`12.384 kB` | | react
MarqueeSelection | `74.321 kB`
`22.385 kB` | | react
MessageBar | `190.311 kB`
`56.941 kB` | | react
Modal | `93.44 kB`
`30.18 kB` | | react
Nav | `187.789 kB`
`56.378 kB` | | react
OverflowSet | `33.191 kB`
`11.252 kB` | | react
Overlay | `40.694 kB`
`14.023 kB` | | react
Panel | `200.831 kB`
`59.888 kB` | | react
Persona | `114.617 kB`
`36.442 kB` | | react
PersonaCoin | `114.617 kB`
`36.442 kB` | | react
PersonaPresence | `57.833 kB`
`19.303 kB` | | react
Pickers | `293.537 kB`
`82.173 kB` | | react
Pivot | `188.703 kB`
`57.114 kB` | | react
Popup | `12.242 kB`
`4.181 kB` | | react
Positioning | `22.608 kB`
`7.63 kB` | | react
PositioningContainer | `73.643 kB`
`23.706 kB` | | react
ProgressIndicator | `39.286 kB`
`13.482 kB` | | react
Rating | `81.762 kB`
`26.057 kB` | | react
Fluent UI React (entire library) | `1.013 MB`
`281.289 kB` | | react
ResizeGroup | `13.286 kB`
`4.365 kB` | | react
ResponsiveMode | `8.078 kB`
`2.95 kB` | | react
ScrollablePane | `55.325 kB`
`17.669 kB` | | react
SearchBox | `188.586 kB`
`56.544 kB` | | react
SelectableOption | `724 B`
`413 B` | | react
SelectedItemsList | `232.346 kB`
`67.779 kB` | | react
Selection | `42.252 kB`
`12.203 kB` | | react
Separator | `35.183 kB`
`12.088 kB` | | react
Shimmer | `49.049 kB`
`16.206 kB` | | react
ShimmeredDetailsList | `240.092 kB`
`68.397 kB` | | react
Slider | `57.449 kB`
`19.143 kB` | | react
SpinButton | `192.314 kB`
`57.665 kB` | | react
Spinner | `41.481 kB`
`14.412 kB` | | react
Stack | `41.547 kB`
`14.233 kB` | | react
Sticky | `32.541 kB`
`10.49 kB` | | react
Styling | `45.853 kB`
`15.082 kB` | | react
SwatchColorPicker | `190.533 kB`
`57.999 kB` | | react
TeachingBubble | `205.586 kB`
`60.896 kB` | | react
Text | `36.723 kB`
`12.763 kB` | | react
TextField | `80.555 kB`
`25.262 kB` | | react
Theme | `43.321 kB`
`14.129 kB` | | react
ThemeGenerator | `12.34 kB`
`4.106 kB` | | react
TimePicker | `241.365 kB`
`69.856 kB` | | react
Toggle | `46.02 kB`
`15.903 kB` | | react
Tooltip | `87.136 kB`
`28.164 kB` | | react
Utilities | `82.495 kB`
`25.047 kB` | | react
Viewport | `23.703 kB`
`7.589 kB` | | react
WeeklyDayPicker | `101.682 kB`
`31.738 kB` | | react
WindowProvider | `1.059 kB`
`541 B` | | react-jsx-runtime
Classic Pragma | `1.057 kB`
`530 B` | | react-jsx-runtime
JSX Dev Runtime | `3.781 kB`
`1.646 kB` | | react-jsx-runtime
JSX Runtime | `4.377 kB`
`1.881 kB` | | react-northstar
Accordion | `85.392 kB`
`26.518 kB` | | react-northstar
Alert | `87.45 kB`
`26.902 kB` | | react-northstar
Animation | `55.34 kB`
`17.829 kB` | | react-northstar
Attachment | `86.844 kB`
`26.692 kB` | | react-northstar
Avatar | `80.279 kB`
`24.629 kB` | | react-northstar
Box | `75.248 kB`
`23.806 kB` | | react-northstar
Breadcrumb | `79.92 kB`
`24.709 kB` | | react-northstar
Button | `83.16 kB`
`25.947 kB` | | react-northstar
Card | `82.705 kB`
`25.023 kB` | | react-northstar
Carousel | `105.182 kB`
`31.871 kB` | | react-northstar
Chat | `152.378 kB`
`45.964 kB` | | react-northstar
Checkbox | `79.807 kB`
`25.078 kB` | | react-northstar
Datepicker | `184.939 kB`
`56.194 kB` | | react-northstar
Debug | `8.801 kB`
`3.594 kB` | | react-northstar
Design | `36.589 kB`
`12.067 kB` | | react-northstar
Dialog | `112.058 kB`
`33.615 kB` | | react-northstar
Divider | `76.619 kB`
`24.129 kB` | | react-northstar
Dropdown | `196.499 kB`
`59.455 kB` | | react-northstar
Embed | `81.477 kB`
`25.417 kB` | | react-northstar
Flex | `47.728 kB`
`15.438 kB` | | react-northstar
Form | `92.527 kB`
`28.879 kB` | | react-northstar
Grid | `70.584 kB`
`22.278 kB` | | react-northstar
Header | `74.756 kB`
`23.461 kB` | | react-northstar
Image | `73.591 kB`
`23.329 kB` | | react-northstar
Input | `88.346 kB`
`27.78 kB` | | react-northstar
ItemLayout | `78.231 kB`
`24.454 kB` | | react-northstar
Label | `77.92 kB`
`24.41 kB` | | react-northstar
Layout | `75.393 kB`
`23.798 kB` | | react-northstar
List | `88.493 kB`
`27.547 kB` | | react-northstar
Loader | `78.616 kB`
`24.729 kB` | | react-northstar
Menu | `126.89 kB`
`39.872 kB` | | react-northstar
MenuButton | `161.296 kB`
`48.883 kB` | | react-northstar
Pill | `83.722 kB`
`26.069 kB` | | react-northstar
Popup | `133.604 kB`
`41.483 kB` | | react-northstar
Portal | `58.338 kB`
`18.852 kB` | | react-northstar
Provider | `93.138 kB`
`29.63 kB` | | react-northstar
RadioGroup | `83.282 kB`
`26.053 kB` | | react-northstar
Reaction | `77.28 kB`
`24.122 kB` | | react-northstar
Segment | `76.209 kB`
`23.892 kB` | | react-northstar
Skeleton | `77.765 kB`
`24.2 kB` | | react-northstar
Slider | `84.27 kB`
`26.737 kB` | | react-northstar
SplitButton | `176.534 kB`
`52.63 kB` | | react-northstar
Status | `76.272 kB`
`24.05 kB` | | react-northstar
SvgIcon | `36.823 kB`
`11.743 kB` | | react-northstar
Table | `80.796 kB`
`25.154 kB` | | react-northstar
Text | `74.114 kB`
`23.507 kB` | | react-northstar
TextArea | `74.248 kB`
`23.492 kB` | | react-northstar
Toolbar | `173.345 kB`
`52.08 kB` | | react-northstar
Tooltip | `108.261 kB`
`34.482 kB` | | react-northstar
Tree | `87.855 kB`
`27.217 kB` | | react-northstar
Video | `75.411 kB`
`23.799 kB` | | react-overflow
hooks only | `12.87 kB`
`4.83 kB` | | react-portal-compat
PortalCompatProvider | `8.39 kB`
`2.64 kB` | | react-positioning
usePositioning | `26.489 kB`
`9.552 kB` | | react-theme
Single theme token import | `69 B`
`89 B` | | react-theme
Teams: all themes | `35.666 kB`
`7.453 kB` | | react-theme
Teams: Light theme | `19.642 kB`
`5.549 kB` | | react-utilities
SSRProvider | `180 B`
`160 B` |

_{🤖 This report was generated against e69f90d32c4b4f11dfab5e563d2475d0d3f8940a}

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	632	630	5000
Button	mount	313	324	5000
Field	mount	1132	1141	5000
FluentProvider	mount	717	725	5000
FluentProviderWithTheme	mount	83	85	10
FluentProviderWithTheme	virtual-rerender	37	46	10
FluentProviderWithTheme	virtual-rerender-with-unmount	85	78	10
MakeStyles	mount	854	869	50000
Persona	mount	1779	1694	5000
SpinButton	mount	1378	1362	5000
SwatchPicker	mount	1610	1583	5000

[fabricteam]

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario | Current PR Ticks | Baseline Ticks | Ratio :--- | ---:| ---:| ---: AttachmentMinimalPerf.default | [89](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AttachmentMinimalPerf.default.html) | [80](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AttachmentMinimalPerf.default_base.html) | 1.11:1 RefMinimalPerf.default | [114](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/RefMinimalPerf.default.html) | [104](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/RefMinimalPerf.default_base.html) | 1.1:1 LoaderMinimalPerf.default | [197](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/LoaderMinimalPerf.default.html) | [180](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/LoaderMinimalPerf.default_base.html) | 1.09:1 PortalMinimalPerf.default | [89](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/PortalMinimalPerf.default.html) | [82](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/PortalMinimalPerf.default_base.html) | 1.09:1 DividerMinimalPerf.default | [224](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/DividerMinimalPerf.default.html) | [207](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/DividerMinimalPerf.default_base.html) | 1.08:1 TextAreaMinimalPerf.default | [288](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TextAreaMinimalPerf.default.html) | [267](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TextAreaMinimalPerf.default_base.html) | 1.08:1 AccordionMinimalPerf.default | [85](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AccordionMinimalPerf.default.html) | [80](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AccordionMinimalPerf.default_base.html) | 1.06:1 ButtonSlotsPerf.default | [318](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ButtonSlotsPerf.default.html) | [301](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ButtonSlotsPerf.default_base.html) | 1.06:1 DropdownManyItemsPerf.default | [390](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/DropdownManyItemsPerf.default.html) | [369](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/DropdownManyItemsPerf.default_base.html) | 1.06:1 AlertMinimalPerf.default | [160](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AlertMinimalPerf.default.html) | [152](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AlertMinimalPerf.default_base.html) | 1.05:1 AnimationMinimalPerf.default | [302](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AnimationMinimalPerf.default.html) | [288](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AnimationMinimalPerf.default_base.html) | 1.05:1 BoxMinimalPerf.default | [199](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/BoxMinimalPerf.default.html) | [190](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/BoxMinimalPerf.default_base.html) | 1.05:1 LayoutMinimalPerf.default | [201](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/LayoutMinimalPerf.default.html) | [192](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/LayoutMinimalPerf.default_base.html) | 1.05:1 SegmentMinimalPerf.default | [197](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/SegmentMinimalPerf.default.html) | [187](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/SegmentMinimalPerf.default_base.html) | 1.05:1 ButtonMinimalPerf.default | [94](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ButtonMinimalPerf.default.html) | [90](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ButtonMinimalPerf.default_base.html) | 1.04:1 ChatDuplicateMessagesPerf.default | [155](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ChatDuplicateMessagesPerf.default.html) | [149](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ChatDuplicateMessagesPerf.default_base.html) | 1.04:1 DatepickerMinimalPerf.default | [3721](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/DatepickerMinimalPerf.default.html) | [3573](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/DatepickerMinimalPerf.default_base.html) | 1.04:1 ImageMinimalPerf.default | [243](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ImageMinimalPerf.default.html) | [234](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ImageMinimalPerf.default_base.html) | 1.04:1 ListMinimalPerf.default | [315](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ListMinimalPerf.default.html) | [302](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ListMinimalPerf.default_base.html) | 1.04:1 TableMinimalPerf.default | [232](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TableMinimalPerf.default.html) | [223](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TableMinimalPerf.default_base.html) | 1.04:1 TreeMinimalPerf.default | [494](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TreeMinimalPerf.default.html) | [477](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TreeMinimalPerf.default_base.html) | 1.04:1 CardMinimalPerf.default | [318](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/CardMinimalPerf.default.html) | [308](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/CardMinimalPerf.default_base.html) | 1.03:1 CheckboxMinimalPerf.default | [1154](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/CheckboxMinimalPerf.default.html) | [1125](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/CheckboxMinimalPerf.default_base.html) | 1.03:1 ListNestedPerf.default | [326](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ListNestedPerf.default.html) | [315](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ListNestedPerf.default_base.html) | 1.03:1 ProviderMinimalPerf.default | [202](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ProviderMinimalPerf.default.html) | [196](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ProviderMinimalPerf.default_base.html) | 1.03:1 DialogMinimalPerf.default | [450](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/DialogMinimalPerf.default.html) | [442](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/DialogMinimalPerf.default_base.html) | 1.02:1 HeaderMinimalPerf.default | [206](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/HeaderMinimalPerf.default.html) | [202](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/HeaderMinimalPerf.default_base.html) | 1.02:1 HeaderSlotsPerf.default | [466](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/HeaderSlotsPerf.default.html) | [456](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/HeaderSlotsPerf.default_base.html) | 1.02:1 MenuButtonMinimalPerf.default | [951](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/MenuButtonMinimalPerf.default.html) | [931](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/MenuButtonMinimalPerf.default_base.html) | 1.02:1 SplitButtonMinimalPerf.default | [2260](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/SplitButtonMinimalPerf.default.html) | [2205](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/SplitButtonMinimalPerf.default_base.html) | 1.02:1 CustomToolbarPrototype.default | [1472](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/CustomToolbarPrototype.default.html) | [1446](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/CustomToolbarPrototype.default_base.html) | 1.02:1 AttachmentSlotsPerf.default | [631](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AttachmentSlotsPerf.default.html) | [626](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AttachmentSlotsPerf.default_base.html) | 1.01:1 DropdownMinimalPerf.default | [1432](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/DropdownMinimalPerf.default.html) | [1412](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/DropdownMinimalPerf.default_base.html) | 1.01:1 InputMinimalPerf.default | [536](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/InputMinimalPerf.default.html) | [533](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/InputMinimalPerf.default_base.html) | 1.01:1 ReactionMinimalPerf.default | [214](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ReactionMinimalPerf.default.html) | [211](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ReactionMinimalPerf.default_base.html) | 1.01:1 SliderMinimalPerf.default | [740](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/SliderMinimalPerf.default.html) | [730](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/SliderMinimalPerf.default_base.html) | 1.01:1 StatusMinimalPerf.default | [394](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/StatusMinimalPerf.default.html) | [389](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/StatusMinimalPerf.default_base.html) | 1.01:1 TableManyItemsPerf.default | [1097](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TableManyItemsPerf.default.html) | [1086](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TableManyItemsPerf.default_base.html) | 1.01:1 TreeWith60ListItems.default | [84](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TreeWith60ListItems.default.html) | [83](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TreeWith60ListItems.default_base.html) | 1.01:1 AvatarMinimalPerf.default | [107](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AvatarMinimalPerf.default.html) | [107](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/AvatarMinimalPerf.default_base.html) | 1:1 ChatWithPopoverPerf.default | [192](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ChatWithPopoverPerf.default.html) | [192](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ChatWithPopoverPerf.default_base.html) | 1:1 EmbedMinimalPerf.default | [1846](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/EmbedMinimalPerf.default.html) | [1853](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/EmbedMinimalPerf.default_base.html) | 1:1 ItemLayoutMinimalPerf.default | [710](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ItemLayoutMinimalPerf.default.html) | [708](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ItemLayoutMinimalPerf.default_base.html) | 1:1 RadioGroupMinimalPerf.default | [257](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/RadioGroupMinimalPerf.default.html) | [257](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/RadioGroupMinimalPerf.default_base.html) | 1:1 TooltipMinimalPerf.default | [1280](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TooltipMinimalPerf.default.html) | [1283](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TooltipMinimalPerf.default_base.html) | 1:1 ButtonOverridesMissPerf.default | [642](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ButtonOverridesMissPerf.default.html) | [649](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ButtonOverridesMissPerf.default_base.html) | 0.99:1 FormMinimalPerf.default | [219](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/FormMinimalPerf.default.html) | [222](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/FormMinimalPerf.default_base.html) | 0.99:1 LabelMinimalPerf.default | [218](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/LabelMinimalPerf.default.html) | [221](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/LabelMinimalPerf.default_base.html) | 0.99:1 IconMinimalPerf.default | [396](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/IconMinimalPerf.default.html) | [399](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/IconMinimalPerf.default_base.html) | 0.99:1 ToolbarMinimalPerf.default | [543](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ToolbarMinimalPerf.default.html) | [547](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ToolbarMinimalPerf.default_base.html) | 0.99:1 CarouselMinimalPerf.default | [252](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/CarouselMinimalPerf.default.html) | [258](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/CarouselMinimalPerf.default_base.html) | 0.98:1 FlexMinimalPerf.default | [152](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/FlexMinimalPerf.default.html) | [155](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/FlexMinimalPerf.default_base.html) | 0.98:1 MenuMinimalPerf.default | [500](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/MenuMinimalPerf.default.html) | [509](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/MenuMinimalPerf.default_base.html) | 0.98:1 SkeletonMinimalPerf.default | [190](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/SkeletonMinimalPerf.default.html) | [194](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/SkeletonMinimalPerf.default_base.html) | 0.98:1 VideoMinimalPerf.default | [416](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/VideoMinimalPerf.default.html) | [426](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/VideoMinimalPerf.default_base.html) | 0.98:1 PopupMinimalPerf.default | [350](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/PopupMinimalPerf.default.html) | [359](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/PopupMinimalPerf.default_base.html) | 0.97:1 ProviderMergeThemesPerf.default | [634](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ProviderMergeThemesPerf.default.html) | [655](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ProviderMergeThemesPerf.default_base.html) | 0.97:1 RosterPerf.default | [1537](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/RosterPerf.default.html) | [1598](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/RosterPerf.default_base.html) | 0.96:1 TextMinimalPerf.default | [195](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TextMinimalPerf.default.html) | [203](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/TextMinimalPerf.default_base.html) | 0.96:1 ListCommonPerf.default | [375](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ListCommonPerf.default.html) | [394](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ListCommonPerf.default_base.html) | 0.95:1 ChatMinimalPerf.default | [433](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ChatMinimalPerf.default.html) | [459](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ChatMinimalPerf.default_base.html) | 0.94:1 ListWith60ListItems.default | [354](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ListWith60ListItems.default.html) | [375](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/ListWith60ListItems.default_base.html) | 0.94:1 GridMinimalPerf.default | [175](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/GridMinimalPerf.default.html) | [188](https://fluentuipr.z22.web.core.windows.net/pull/31258/perf-test-northstar/GridMinimalPerf.default_base.html) | 0.93:1

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	629	642	5000
Breadcrumb	mount	1754	1778	1000
Checkbox	mount	1702	1699	5000
CheckboxBase	mount	1489	1493	5000
ChoiceGroup	mount	2957	2975	5000
ComboBox	mount	655	691	1000
CommandBar	mount	6781	6766	1000
ContextualMenu	mount	16549	16283	1000
DefaultButton	mount	786	798	5000
DetailsRow	mount	2174	2250	5000
DetailsRowFast	mount	2211	2227	5000
DetailsRowNoStyles	mount	2070	2038	5000
Dialog	mount	2738	2691	1000
DocumentCardTitle	mount	233	221	1000
Dropdown	mount	1981	2017	5000
FocusTrapZone	mount	1154	1137	5000
FocusZone	mount	1114	1052	5000
GroupedList	mount	42629	42502	2
GroupedList	virtual-rerender	20234	20448	2
GroupedList	virtual-rerender-with-unmount	52221	58463	2
GroupedListV2	mount	243	234	2
GroupedListV2	virtual-rerender	206	220	2
GroupedListV2	virtual-rerender-with-unmount	236	238	2
IconButton	mount	1137	1142	5000
Label	mount	326	345	5000
Layer	mount	2724	2743	5000
Link	mount	401	400	5000
MenuButton	mount	988	992	5000
MessageBar	mount	21947	21982	5000
Nav	mount	2059	2061	1000
OverflowSet	mount	806	779	5000
Panel	mount	1857	1773	1000
Persona	mount	760	741	1000
Pivot	mount	904	898	1000
PrimaryButton	mount	931	924	5000
Rating	mount	4655	4658	5000
SearchBox	mount	904	942	5000
Shimmer	mount	1895	1915	5000
Slider	mount	1310	1348	5000
SpinButton	mount	3035	2966	5000
Spinner	mount	407	384	5000
SplitButton	mount	1937	1888	5000
Stack	mount	409	416	5000
StackWithIntrinsicChildren	mount	876	854	5000
StackWithTextChildren	mount	2616	2632	5000
SwatchColorPicker	mount	6473	6420	5000
TagPicker	mount	1479	1502	5000
Text	mount	374	380	5000
TextField	mount	963	981	5000
ThemeProvider	mount	836	838	5000
ThemeProvider	virtual-rerender	585	567	5000
ThemeProvider	virtual-rerender-with-unmount	1276	1292	5000
Toggle	mount	607	635	5000
buttonNative	mount	180	202	5000

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[fabricteam]

🕵 FluentUIV0 No visual regressions between this PR and main

[Hotell]

those bundle size increases will be gone once we migrate to new shorthands api right ?

[layershifter]

those bundle size increases will be gone once we migrate to new shorthands api right ?

@Hotell The increase comes from changes in createDOMRenderer().

• For consumers using CSS extraction, there will no be no increase as they don't use it
• For all others, upcoming PRs with running the codemod introduce reductions for almost all components (you can check #30765 for results)