chore: slot api react v17/18 support by dmytrokirpa · Pull Request #34154 · microsoft/fluentui

dmytrokirpa · 2025-04-02T12:01:56Z

This PR is an attempt to fix the Slot API type issues in React 18. It's not intended to be merged into master yet, as we want to ensure that it works as expected in partners codebases before release, so the target branch is react-components/react-18.

This PR is based on @bsunderhus's PR - #31548 with some modifications.

There no changes to the components public API, the only public surface API changes in this PR are react-utilities Slot-related types.

Related Issue(s)

github-actions · 2025-04-11T12:30:10Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`107.842 kB` `33.115 kB`	`107.888 kB` `33.131 kB`	`46 B` `16 B`
`react-avatar` Avatar	`49.41 kB` `15.856 kB`	`49.458 kB` `15.873 kB`	`48 B` `17 B`
`react-avatar` AvatarGroup	`20.21 kB` `8.004 kB`	`20.257 kB` `8.022 kB`	`47 B` `18 B`
`react-avatar` AvatarGroupItem	`63.554 kB` `20.073 kB`	`63.602 kB` `20.094 kB`	`48 B` `21 B`
`react-badge` Badge	`26.037 kB` `8.624 kB`	`26.083 kB` `8.642 kB`	`46 B` `18 B`
`react-badge` CounterBadge	`26.816 kB` `8.899 kB`	`26.862 kB` `8.917 kB`	`46 B` `18 B`
`react-badge` PresenceBadge	`25.823 kB` `9.491 kB`	`25.869 kB` `9.507 kB`	`46 B` `16 B`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`114.904 kB` `31.809 kB`	`114.953 kB` `31.833 kB`	`49 B` `24 B`
`react-button` Button	`37.68 kB` `10.889 kB`	`37.726 kB` `10.903 kB`	`46 B` `14 B`
`react-button` CompoundButton	`44.094 kB` `12.191 kB`	`44.14 kB` `12.208 kB`	`46 B` `17 B`
`react-button` MenuButton	`42.495 kB` `12.237 kB`	`42.541 kB` `12.256 kB`	`46 B` `19 B`
`react-button` SplitButton	`50.561 kB` `13.803 kB`	`50.607 kB` `13.821 kB`	`46 B` `18 B`
`react-button` ToggleButton	`53.612 kB` `12.665 kB`	`53.658 kB` `12.676 kB`	`46 B` `11 B`
`react-card` Card - All	`102.239 kB` `28.862 kB`	`102.285 kB` `28.889 kB`	`46 B` `27 B`
`react-card` Card	`94.881 kB` `27.038 kB`	`94.931 kB` `27.056 kB`	`50 B` `18 B`
`react-card` CardFooter	`14.637 kB` `5.902 kB`	`14.683 kB` `5.918 kB`	`46 B` `16 B`
`react-card` CardHeader	`17.17 kB` `6.769 kB`	`17.216 kB` `6.788 kB`	`46 B` `19 B`
`react-card` CardPreview	`14.703 kB` `6.027 kB`	`14.749 kB` `6.043 kB`	`46 B` `16 B`
`react-checkbox` Checkbox	`35.221 kB` `12.11 kB`	`35.274 kB` `12.129 kB`	`53 B` `19 B`
`react-color-picker` ColorArea	`50.284 kB` `17.696 kB`	`50.333 kB` `17.712 kB`	`49 B` `16 B`
`react-color-picker` ColorPicker	`18.925 kB` `7.529 kB`	`18.971 kB` `7.542 kB`	`46 B` `13 B`
`react-color-picker` ColorSlider	`42.47 kB` `15.741 kB`	`42.516 kB` `15.76 kB`	`46 B` `19 B`
`react-combobox` Combobox (including child components)	`106.288 kB` `34.738 kB`	`106.334 kB` `34.755 kB`	`46 B` `17 B`
`react-combobox` Dropdown (including child components)	`106.913 kB` `34.661 kB`	`106.965 kB` `34.68 kB`	`52 B` `19 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.737 kB` `20.275 kB`	`69.785 kB` `20.292 kB`	`48 B` `17 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`225.757 kB` `65.488 kB`	`225.943 kB` `65.589 kB`	`186 B` `101 B`
`react-components` react-components: FluentProvider & webLightTheme	`44.573 kB` `14.637 kB`	`44.619 kB` `14.652 kB`	`46 B` `15 B`
`react-components` react-components: entire library	`1.228 MB` `309.469 kB`	`1.229 MB` `309.567 kB`	`131 B` `98 B`
`react-datepicker-compat` DatePicker Compat	`226.182 kB` `64.128 kB`	`226.234 kB` `64.148 kB`	`52 B` `20 B`
`react-dialog` Dialog (including children components)	`102.147 kB` `30.683 kB`	`102.193 kB` `30.698 kB`	`46 B` `15 B`
`react-divider` Divider	`21.431 kB` `7.984 kB`	`21.477 kB` `8.002 kB`	`46 B` `18 B`
`react-field` Field	`23.548 kB` `8.941 kB`	`23.594 kB` `8.962 kB`	`46 B` `21 B`
`react-image` Image	`15.463 kB` `6.271 kB`	`15.51 kB` `6.288 kB`	`47 B` `17 B`
`react-input` Input	`28.117 kB` `9.479 kB`	`28.169 kB` `9.499 kB`	`52 B` `20 B`
`react-label` Label	`14.774 kB` `6.025 kB`	`14.82 kB` `6.04 kB`	`46 B` `15 B`
`react-link` Link	`17.702 kB` `7.169 kB`	`17.748 kB` `7.185 kB`	`46 B` `16 B`
`react-list` List	`89.519 kB` `26.679 kB`	`89.566 kB` `26.693 kB`	`47 B` `14 B`
`react-list` ListItem	`112.856 kB` `33.461 kB`	`112.902 kB` `33.483 kB`	`46 B` `22 B`
`react-menu` Menu (including children components)	`155.655 kB` `46.879 kB`	`155.84 kB` `46.949 kB`	`185 B` `70 B`
`react-menu` Menu (including selectable components)	`158.637 kB` `47.477 kB`	`158.822 kB` `47.542 kB`	`185 B` `65 B`
`react-message-bar` MessageBar (all components)	`24.982 kB` `9.301 kB`	`25.029 kB` `9.321 kB`	`47 B` `20 B`
`react-persona` Persona	`56.301 kB` `17.736 kB`	`56.349 kB` `17.752 kB`	`48 B` `16 B`
`react-popover` Popover	`131.152 kB` `41.032 kB`	`131.198 kB` `41.054 kB`	`46 B` `22 B`
`react-progress` ProgressBar	`17.188 kB` `6.921 kB`	`17.234 kB` `6.937 kB`	`46 B` `16 B`
`react-provider` FluentProvider	`24.749 kB` `8.939 kB`	`24.795 kB` `8.953 kB`	`46 B` `14 B`
`react-radio` Radio	`32.775 kB` `10.379 kB`	`32.822 kB` `10.398 kB`	`47 B` `19 B`
`react-radio` RadioGroup	`15.865 kB` `6.464 kB`	`15.911 kB` `6.481 kB`	`46 B` `17 B`
`react-select` Select	`27.835 kB` `10.162 kB`	`27.887 kB` `10.18 kB`	`52 B` `18 B`
`react-slider` Slider	`38.332 kB` `12.851 kB`	`38.379 kB` `12.867 kB`	`47 B` `16 B`
`react-spinbutton` SpinButton	`35.318 kB` `11.787 kB`	`35.371 kB` `11.804 kB`	`53 B` `17 B`
`react-spinner` Spinner	`25.35 kB` `8.573 kB`	`25.398 kB` `8.586 kB`	`48 B` `13 B`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`106.736 kB` `30.84 kB`	`106.782 kB` `30.869 kB`	`46 B` `29 B`
`react-switch` Switch	`35.422 kB` `11.344 kB`	`35.468 kB` `11.363 kB`	`46 B` `19 B`
`react-table` DataGrid	`161.31 kB` `45.735 kB`	`161.362 kB` `45.75 kB`	`52 B` `15 B`
`react-table` Table (Primitives only)	`42.77 kB` `13.889 kB`	`42.939 kB` `13.956 kB`	`169 B` `67 B`
`react-table` Table as DataGrid	`132.073 kB` `36.612 kB`	`132.241 kB` `36.701 kB`	`168 B` `89 B`
`react-table` Table (Selection only)	`70.64 kB` `20.037 kB`	`70.809 kB` `20.107 kB`	`169 B` `70 B`
`react-table` Table (Sort only)	`69.283 kB` `19.651 kB`	`69.452 kB` `19.731 kB`	`169 B` `80 B`
`react-tag-picker` @fluentui/react-tag-picker - package	`187.186 kB` `56.223 kB`	`187.238 kB` `56.253 kB`	`52 B` `30 B`
`react-tags` InteractionTag	`15.538 kB` `6.249 kB`	`15.584 kB` `6.265 kB`	`46 B` `16 B`
`react-tags` Tag	`30.339 kB` `9.927 kB`	`30.385 kB` `9.947 kB`	`46 B` `20 B`
`react-tags` TagGroup	`83.861 kB` `24.88 kB`	`83.908 kB` `24.897 kB`	`47 B` `17 B`
`react-text` Text - Default	`17.164 kB` `6.756 kB`	`17.211 kB` `6.771 kB`	`47 B` `15 B`
`react-text` Text - Wrappers	`20.345 kB` `7.086 kB`	`20.391 kB` `7.105 kB`	`46 B` `19 B`
`react-textarea` Textarea	`26.684 kB` `9.786 kB`	`26.736 kB` `9.804 kB`	`52 B` `18 B`
`react-timepicker-compat` TimePicker	`109.264 kB` `36.293 kB`	`109.31 kB` `36.309 kB`	`46 B` `16 B`
`react-toast` Toast (including Toaster)	`102.283 kB` `30.776 kB`	`102.452 kB` `30.844 kB`	`169 B` `68 B`
`react-tooltip` Tooltip	`57.261 kB` `19.971 kB`	`57.307 kB` `19.989 kB`	`46 B` `18 B`
`react-tree` FlatTree	`148.966 kB` `42.733 kB`	`149.013 kB` `42.744 kB`	`47 B` `11 B`
`react-tree` PersonaFlatTree	`149.718 kB` `42.868 kB`	`149.765 kB` `42.877 kB`	`47 B` `9 B`
`react-tree` PersonaTree	`145.917 kB` `41.715 kB`	`145.963 kB` `41.735 kB`	`46 B` `20 B`
`react-tree` Tree	`145.171 kB` `41.579 kB`	`145.217 kB` `41.595 kB`	`46 B` `16 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`react-aria` ARIA - Default	`237 B` `181 B`
`react-calendar-compat` Calendar Compat	`150.084 kB` `40.023 kB`
`react-jsx-runtime` Classic Pragma	`1.101 kB` `550 B`
`react-jsx-runtime` JSX Dev Runtime	`3.815 kB` `1.664 kB`
`react-jsx-runtime` JSX Runtime	`4.411 kB` `1.894 kB`
`react-motion` @fluentui/react-motion - createMotionComponent()	`4.005 kB` `1.758 kB`
`react-motion` @fluentui/react-motion - createPresenceComponent()	`4.857 kB` `2.128 kB`
`react-motion` @fluentui/react-motion - PresenceGroup	`1.714 kB` `819 B`
`react-overflow` hooks only	`12.832 kB` `4.828 kB`
`react-portal` Portal	`14.563 kB` `5.118 kB`
`react-portal-compat` PortalCompatProvider	`8.39 kB` `2.64 kB`
`react-positioning` usePositioning	`28.166 kB` `10.056 kB`
`react-teaching-popover` TeachingPopover	`101.649 kB` `30.511 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against 836298ebe6c4379ad3c7acdb7e32daee642e8897}

github-actions · 2025-04-11T12:30:16Z

Pull request demo site: URL

JustSlone · 2025-04-17T16:34:28Z

This looks like a fairly large PR, @dmytrokirpa can we get a description? Thanks!

…17/18-support

dmytrokirpa · 2025-04-22T09:36:22Z

This looks like a fairly large PR, @dmytrokirpa can we get a description? Thanks!

Sorry for the ping, it's not ready for review yet as we don't plan to merge it to master at this time. We want to test it on partners' codebases first and batch all React 18 changes into a single branch to merge all together when it's ready.

dmytrokirpa changed the title ~~Chore slot api react v17/18 support~~ chore: slot api react v17/18 support Apr 2, 2025

dmytrokirpa force-pushed the chore--slot-API-react-v17/18-support branch 2 times, most recently from c7fead2 to 4990ea1 Compare April 8, 2025 09:47

dmytrokirpa changed the base branch from master to react-components/react-18 April 8, 2025 13:53

github-actions Bot added CI NX: core labels Apr 8, 2025

dmytrokirpa self-assigned this Apr 8, 2025

dmytrokirpa added React 18 Fluent UI react-components (v9) labels Apr 8, 2025

dmytrokirpa changed the base branch from react-components/react-18 to master April 8, 2025 14:28

dmytrokirpa force-pushed the chore--slot-API-react-v17/18-support branch from 02e72b9 to 419e62c Compare April 11, 2025 12:10

github-actions Bot removed CI NX: core labels Apr 11, 2025

github-actions Bot reviewed Apr 11, 2025

View reviewed changes

Comment thread change/@fluentui-react-aria-8f78fc18-0062-4b31-943b-49d1f8fb792c.json Outdated

dmytrokirpa force-pushed the chore--slot-API-react-v17/18-support branch 4 times, most recently from ebe7f8c to 2502467 Compare April 16, 2025 13:43

dmytrokirpa changed the base branch from master to react-components/react-18 April 16, 2025 16:54

dmytrokirpa marked this pull request as ready for review April 16, 2025 16:55

dmytrokirpa requested review from a team, GeoffCoxMSFT, ThomasMichon, behowell, dzearing, khmakoto and spmonahan as code owners April 16, 2025 16:55

dmytrokirpa requested review from a team, JustSlone, jurokapsiar and tudorpopams as code owners April 16, 2025 16:55

github-actions Bot added CI NX: core labels Apr 16, 2025

marcosmoura approved these changes Apr 16, 2025

View reviewed changes

dmytrokirpa force-pushed the chore--slot-API-react-v17/18-support branch from f935eb0 to 8a66bce Compare April 17, 2025 08:41

dmytrokirpa changed the base branch from react-components/react-18 to master April 17, 2025 08:54

dmytrokirpa force-pushed the chore--slot-API-react-v17/18-support branch from 8a66bce to 4f2b768 Compare April 17, 2025 08:57

github-actions Bot removed the NX: core label Apr 17, 2025

dmytrokirpa force-pushed the chore--slot-API-react-v17/18-support branch from 4f2b768 to 09990ed Compare April 17, 2025 10:59

github-actions Bot removed the CI label Apr 17, 2025

dmytrokirpa force-pushed the chore--slot-API-react-v17/18-support branch from 09990ed to 833398d Compare April 17, 2025 11:30

chore: slot api react v17/18 support

49d1094

dmytrokirpa force-pushed the chore--slot-API-react-v17/18-support branch from 833398d to 49d1094 Compare April 17, 2025 13:09

dmytrokirpa changed the base branch from master to react-components/react-18 April 17, 2025 13:24

dmytrokirpa requested a review from sopranopillow as a code owner April 17, 2025 13:24

Hotell force-pushed the react-components/react-18 branch from 5528da5 to 836298e Compare April 17, 2025 15:02

dmytrokirpa enabled auto-merge (squash) April 17, 2025 15:17

dmytrokirpa disabled auto-merge April 17, 2025 17:23

dmytrokirpa added 2 commits April 17, 2025 19:26

Merge branch 'react-components/react-18' into chore--slot-API-react-v…

09465a7

…17/18-support

fix lint & type-check issues

c136a10

dmytrokirpa merged commit 24f6ace into microsoft:react-components/react-18 Apr 22, 2025

This was referenced Apr 28, 2025

Can't use children render function in slots without Typescript errors #27090

Closed

[Bug]: slot API is broken on react v18 #29578

Closed

dmytrokirpa added a commit to dmytrokirpa/fluentui that referenced this pull request May 27, 2025

chore: slot api react v17/18 support (microsoft#34154)

21dc545

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: slot api react v17/18 support#34154

chore: slot api react v17/18 support#34154
dmytrokirpa merged 3 commits into
microsoft:react-components/react-18from
dmytrokirpa:chore--slot-API-react-v17/18-support

dmytrokirpa commented Apr 2, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 11, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 11, 2025

Uh oh!

Uh oh!

JustSlone commented Apr 17, 2025

Uh oh!

dmytrokirpa commented Apr 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

dmytrokirpa commented Apr 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related Issue(s)

Uh oh!

github-actions Bot commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions Bot commented Apr 11, 2025

Uh oh!

Uh oh!

JustSlone commented Apr 17, 2025

Uh oh!

dmytrokirpa commented Apr 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dmytrokirpa commented Apr 2, 2025 •

edited

Loading

github-actions Bot commented Apr 11, 2025 •

edited

Loading