chore(react-utilities): slot API react v17/18 support #31548

bsunderhus · 2024-06-03T13:08:33Z

Previous Behavior

Slots API breaks on v18! 💣

ReactNode

The ReactNode type became more specific (there was a type leak on ReactFragment type where {} was a valid type, and {} in typescript allows any of the primitive types but null or undefined more info about this, here's a playground), and due to that specificity our declaration of what a slot is starts breaking on @types/react@18

// v17
type ReactText = string | number;
type ReactChild = ReactElement | ReactText;
// 💣💣💣
type ReactFragment = {} | ReactNodeArray;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

// v18
type ReactNode =
        | ReactElement
        | string
        | number
        | Iterable<ReactNode>
        | ReactPortal
        | boolean
        | null
        | undefined
        | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[
            keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES
        ];

Here's a playground showcasing the error

RefAttributes

React.RefAttributes is the ref property. In react v17 that would be equivalent to:

// v17
interface RefAttributes<T> {
  ref?: Ref<T>
}

Now in react v18 it became:

// v18
interface RefAttributes<T> {
  // 💣💣💣💣
  ref?: LegacyRef<T>
}

LegacyRef includes the support to use string as a valid reference value. This will break into our API 💣💣

New Behavior

Introduces new type SlotPropsDataType in favor of UnknownSlotProps https://github.com/microsoft/fluentui/pull/31548/files#diff-06ee7aed2b4bc7589d4c744c7c6649fbee2ff0129915f344768e361a6cfb4dcdR5-R10
- deprecates UnknownSlotProps - its type is not equivalent to the actual signature of a slot. We do not have any restriction that children should be ReactNode | undefined, children can be any value. The only verification we have is if children is a function than its considered a render function, but we do not limit the children type in any way, in fact some of our components modify children signature to be more specific like:
  
  fluentui/packages/react-components/react-field/src/components/Field/Field.types.ts
  
  Line 63 in 5a8d7a2
  
  children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);
  
  fluentui/packages/react-components/react-utilities/src/trigger/types.ts
  
  Line 28 in ee9ca8f
  
  children?: React.ReactElement | ((props: TriggerChildProps) => React.ReactElement | null) | null;
  
  fluentui/packages/react-components/react-message-bar/src/components/MessageBarGroup/MessageBarGroup.types.ts
  
  Line 12 in 40e6a37
  
  children: React.ReactElement[] | React.ReactElement;
  
  fluentui/packages/react-components/react-popover/src/components/Popover/Popover.types.ts
  
  Line 28 in 4cfa006
  
  children: [JSX.Element, JSX.Element] | JSX.Element;
Updates SlotShorthandValue to support Iterable<ReactNode> instead of ReactNode[] (v18 modification)
Updates WithSlotRenderFunction to properly include render function method (Fixes Can't use children render function in slots without Typescript errors #27090)
Introduces new type WithoutSlotRenderFunction
- as SlotPropsDataType does not have the requirement of children?: ReactNode the render function signature will leak, and this is a mistake in two scenarios:
  1. The Primary slot on ComponentProps should not have a render function
  2. The return SlotComponentType properties should not have a render function
Removes VoidFunctionComponent from Slot generic signature (it is deprecated and redundant type, ComponentType covers the same use case)
cloneTriggerTree updates signature to properly assume the possibility of more than just ReactNode from children value.
ForwardRefComponent and getIntrinsicElementProps updates to stop using React.RefAttributes (in the v18 upgrade this type now support LegacyRef, which we do not support)

What are the Breaking Changes here?

Every single method or type that used to depend on UnknownSlotProps and now depends on SlotPropsDataType became less strict
ComponentProps now explicitly removes render function signatures from primary slot (this was already supposed to be like that, it's a bugfix IMO)
ComponentState explicitly removes render function signatures to ensure things were as they we before

Technically, if the client is using Slot, ComponentProps, ComponentState, an slot.* there'll be no breaking changes (as we are just moving verifications from one type to another) but if that is not the case then we could have some false positives due to the wider signature of SlotPropsDataType

Related Issue(s)

fabricteam · 2024-06-03T13:18:40Z

Perf Analysis (`@fluentui/react-components`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	32	38	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	630	622	5000
Button	mount	303	309	5000
Field	mount	1158	1128	5000
FluentProvider	mount	683	704	5000
FluentProviderWithTheme	mount	84	85	10
FluentProviderWithTheme	virtual-rerender	32	38	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	81	77	10
MakeStyles	mount	865	871	50000
Persona	mount	1786	1737	5000
SpinButton	mount	1369	1421	5000
SwatchPicker	mount	1663	1640	5000

codesandbox-ci · 2024-06-03T13:19:50Z

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 · 2024-06-03T13:20:26Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`104.529 kB` `32.097 kB`	`104.575 kB` `32.114 kB`	`46 B` `17 B`
`react-avatar` Avatar	`49.303 kB` `15.815 kB`	`49.353 kB` `15.833 kB`	`50 B` `18 B`
`react-avatar` AvatarGroup	`20.106 kB` `7.968 kB`	`20.153 kB` `7.985 kB`	`47 B` `17 B`
`react-avatar` AvatarGroupItem	`63.447 kB` `20.034 kB`	`63.497 kB` `20.053 kB`	`50 B` `19 B`
`react-badge` Badge	`25.954 kB` `8.595 kB`	`26.001 kB` `8.608 kB`	`47 B` `13 B`
`react-badge` CounterBadge	`26.733 kB` `8.872 kB`	`26.78 kB` `8.888 kB`	`47 B` `16 B`
`react-badge` PresenceBadge	`25.719 kB` `9.457 kB`	`25.766 kB` `9.47 kB`	`47 B` `13 B`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`113.699 kB` `31.498 kB`	`113.748 kB` `31.512 kB`	`49 B` `14 B`
`react-button` Button	`37.104 kB` `10.766 kB`	`37.151 kB` `10.782 kB`	`47 B` `16 B`
`react-button` CompoundButton	`43.518 kB` `12.068 kB`	`43.565 kB` `12.082 kB`	`47 B` `14 B`
`react-button` MenuButton	`41.916 kB` `12.119 kB`	`41.962 kB` `12.137 kB`	`46 B` `18 B`
`react-button` SplitButton	`49.93 kB` `13.696 kB`	`49.978 kB` `13.712 kB`	`48 B` `16 B`
`react-button` ToggleButton	`53.037 kB` `12.528 kB`	`53.083 kB` `12.544 kB`	`46 B` `16 B`
`react-card` Card - All	`101.238 kB` `28.624 kB`	`101.288 kB` `28.642 kB`	`50 B` `18 B`
`react-card` Card	`94.022 kB` `26.806 kB`	`94.068 kB` `26.821 kB`	`46 B` `15 B`
`react-card` CardFooter	`14.355 kB` `5.79 kB`	`14.401 kB` `5.807 kB`	`46 B` `17 B`
`react-card` CardHeader	`16.878 kB` `6.666 kB`	`16.924 kB` `6.682 kB`	`46 B` `16 B`
`react-card` CardPreview	`14.42 kB` `5.922 kB`	`14.466 kB` `5.936 kB`	`46 B` `14 B`
`react-checkbox` Checkbox	`35.105 kB` `12.075 kB`	`35.157 kB` `12.091 kB`	`52 B` `16 B`
`react-combobox` Combobox (including child components)	`104.398 kB` `34.199 kB`	`104.444 kB` `34.224 kB`	`46 B` `25 B`
`react-combobox` Dropdown (including child components)	`104.984 kB` `34.114 kB`	`105.036 kB` `34.143 kB`	`52 B` `29 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.14 kB` `20.137 kB`	`69.186 kB` `20.153 kB`	`46 B` `16 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`218.197 kB` `63.203 kB`	`218.256 kB` `63.243 kB`	`59 B` `40 B`
`react-components` react-components: FluentProvider & webLightTheme	`44.447 kB` `14.59 kB`	`44.493 kB` `14.606 kB`	`46 B` `16 B`
`react-components` react-components: entire library	`1.097 MB` `271.096 kB`	`1.097 MB` `271.134 kB`	`104 B` `38 B`
`react-datepicker-compat` DatePicker Compat	`223.64 kB` `63.299 kB`	`223.686 kB` `63.324 kB`	`46 B` `25 B`
`react-dialog` Dialog (including children components)	`99.724 kB` `29.912 kB`	`99.77 kB` `29.936 kB`	`46 B` `24 B`
`react-divider` Divider	`21.328 kB` `7.953 kB`	`21.374 kB` `7.969 kB`	`46 B` `16 B`
`react-field` Field	`23.384 kB` `8.891 kB`	`23.43 kB` `8.911 kB`	`46 B` `20 B`
`react-image` Image	`15.36 kB` `6.236 kB`	`15.406 kB` `6.249 kB`	`46 B` `13 B`
`react-input` Input	`28.014 kB` `9.444 kB`	`28.066 kB` `9.464 kB`	`52 B` `20 B`
`react-label` Label	`14.671 kB` `5.99 kB`	`14.717 kB` `6.008 kB`	`46 B` `18 B`
`react-link` Link	`17.192 kB` `6.98 kB`	`17.238 kB` `6.998 kB`	`46 B` `18 B`
`react-list-preview` List	`88.626 kB` `26.435 kB`	`88.673 kB` `26.45 kB`	`47 B` `15 B`
`react-list-preview` ListItem	`112.155 kB` `33.274 kB`	`112.201 kB` `33.289 kB`	`46 B` `15 B`
`react-menu` Menu (including children components)	`151.856 kB` `45.848 kB`	`151.914 kB` `45.891 kB`	`58 B` `43 B`
`react-menu` Menu (including selectable components)	`154.537 kB` `46.326 kB`	`154.595 kB` `46.362 kB`	`58 B` `36 B`
`react-message-bar` MessageBar (all components)	`24.722 kB` `9.205 kB`	`24.769 kB` `9.217 kB`	`47 B` `12 B`
`react-persona` Persona	`56.194 kB` `17.695 kB`	`56.244 kB` `17.713 kB`	`50 B` `18 B`
`react-popover` Popover	`128.329 kB` `40.143 kB`	`128.375 kB` `40.166 kB`	`46 B` `23 B`
`react-progress` ProgressBar	`17.084 kB` `6.891 kB`	`17.131 kB` `6.907 kB`	`47 B` `16 B`
`react-provider` FluentProvider	`24.623 kB` `8.893 kB`	`24.669 kB` `8.91 kB`	`46 B` `17 B`
`react-radio` Radio	`32.672 kB` `10.343 kB`	`32.718 kB` `10.359 kB`	`46 B` `16 B`
`react-radio` RadioGroup	`15.762 kB` `6.423 kB`	`15.808 kB` `6.442 kB`	`46 B` `19 B`
`react-select` Select	`27.724 kB` `10.123 kB`	`27.776 kB` `10.144 kB`	`52 B` `21 B`
`react-slider` Slider	`37.169 kB` `12.538 kB`	`37.215 kB` `12.549 kB`	`46 B` `11 B`
`react-spinbutton` SpinButton	`36.102 kB` `11.827 kB`	`36.155 kB` `11.846 kB`	`53 B` `19 B`
`react-spinner` Spinner	`25.245 kB` `8.539 kB`	`25.293 kB` `8.556 kB`	`48 B` `17 B`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`103.736 kB` `30.073 kB`	`103.784 kB` `30.087 kB`	`48 B` `14 B`
`react-switch` Switch	`35.319 kB` `11.314 kB`	`35.365 kB` `11.325 kB`	`46 B` `11 B`
`react-table` DataGrid	`160.458 kB` `45.536 kB`	`160.514 kB` `45.544 kB`	`56 B` `8 B`
`react-table` Table (Primitives only)	`42.643 kB` `13.82 kB`	`42.709 kB` `13.852 kB`	`66 B` `32 B`
`react-table` Table as DataGrid	`131.312 kB` `36.37 kB`	`131.377 kB` `36.401 kB`	`65 B` `31 B`
`react-table` Table (Selection only)	`70.499 kB` `19.962 kB`	`70.565 kB` `19.995 kB`	`66 B` `33 B`
`react-table` Table (Sort only)	`69.142 kB` `19.573 kB`	`69.208 kB` `19.606 kB`	`66 B` `33 B`
`react-tag-picker` @fluentui/react-tag-picker - package	`182.31 kB` `54.807 kB`	`182.362 kB` `54.828 kB`	`52 B` `21 B`
`react-tags` InteractionTag	`15.199 kB` `6.157 kB`	`15.245 kB` `6.178 kB`	`46 B` `21 B`
`react-tags` Tag	`29.027 kB` `9.528 kB`	`29.074 kB` `9.544 kB`	`47 B` `16 B`
`react-tags` TagGroup	`82.197 kB` `24.362 kB`	`82.245 kB` `24.374 kB`	`48 B` `12 B`
`react-text` Text - Default	`17.061 kB` `6.723 kB`	`17.107 kB` `6.741 kB`	`46 B` `18 B`
`react-text` Text - Wrappers	`20.242 kB` `7.048 kB`	`20.288 kB` `7.067 kB`	`46 B` `19 B`
`react-textarea` Textarea	`26.572 kB` `9.755 kB`	`26.624 kB` `9.772 kB`	`52 B` `17 B`
`react-timepicker-compat` TimePicker	`107.387 kB` `35.758 kB`	`107.433 kB` `35.758 kB`	`46 B`
`react-toast` Toast (including Toaster)	`97.816 kB` `29.438 kB`	`97.872 kB` `29.457 kB`	`56 B` `19 B`
`react-tooltip` Tooltip	`55.517 kB` `19.515 kB`	`55.563 kB` `19.534 kB`	`46 B` `19 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`react-calendar-compat` Calendar Compat	`149.573 kB` `39.871 kB`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Dev Runtime	`3.771 kB` `1.643 kB`
`react-jsx-runtime` JSX Runtime	`4.367 kB` `1.874 kB`
`react-motion` @fluentui/react-motion - createMotionComponent()	`4.303 kB` `1.899 kB`
`react-motion` @fluentui/react-motion - createPresenceComponent()	`5.038 kB` `2.229 kB`
`react-motion` @fluentui/react-motion - PresenceGroup	`1.714 kB` `819 B`
`react-overflow` hooks only	`12.81 kB` `4.821 kB`
`react-portal` Portal	`14.563 kB` `5.118 kB`
`react-portal-compat` PortalCompatProvider	`8.39 kB` `2.64 kB`
`react-positioning` usePositioning	`27.057 kB` `9.698 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against aacbb429c6bf89dae83efcd03ce9cf237e6e13be}

github-actions · 2025-02-26T14:49:00Z

Pull request demo site: URL

github-actions · 2025-02-26T14:50:36Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`106.976 kB` `32.812 kB`	`107.022 kB` `32.834 kB`	`46 B` `22 B`
`react-avatar` Avatar	`49.329 kB` `15.824 kB`	`49.379 kB` `15.842 kB`	`50 B` `18 B`
`react-avatar` AvatarGroup	`20.132 kB` `7.976 kB`	`20.179 kB` `7.992 kB`	`47 B` `16 B`
`react-avatar` AvatarGroupItem	`63.473 kB` `20.043 kB`	`63.523 kB` `20.062 kB`	`50 B` `19 B`
`react-badge` Badge	`25.98 kB` `8.602 kB`	`26.027 kB` `8.615 kB`	`47 B` `13 B`
`react-badge` CounterBadge	`26.759 kB` `8.879 kB`	`26.806 kB` `8.895 kB`	`47 B` `16 B`
`react-badge` PresenceBadge	`25.745 kB` `9.463 kB`	`25.792 kB` `9.477 kB`	`47 B` `14 B`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`114.719 kB` `31.752 kB`	`114.768 kB` `31.771 kB`	`49 B` `19 B`
`react-button` Button	`37.602 kB` `10.858 kB`	`37.649 kB` `10.872 kB`	`47 B` `14 B`
`react-button` CompoundButton	`44.016 kB` `12.162 kB`	`44.063 kB` `12.176 kB`	`47 B` `14 B`
`react-button` MenuButton	`42.417 kB` `12.209 kB`	`42.463 kB` `12.223 kB`	`46 B` `14 B`
`react-button` SplitButton	`50.482 kB` `13.776 kB`	`50.53 kB` `13.791 kB`	`48 B` `15 B`
`react-button` ToggleButton	`53.535 kB` `12.631 kB`	`53.581 kB` `12.649 kB`	`46 B` `18 B`
`react-card` Card - All	`101.73 kB` `28.745 kB`	`101.78 kB` `28.758 kB`	`50 B` `13 B`
`react-card` Card	`94.504 kB` `26.924 kB`	`94.55 kB` `26.935 kB`	`46 B` `11 B`
`react-card` CardFooter	`14.381 kB` `5.799 kB`	`14.427 kB` `5.816 kB`	`46 B` `17 B`
`react-card` CardHeader	`16.914 kB` `6.677 kB`	`16.96 kB` `6.694 kB`	`46 B` `17 B`
`react-card` CardPreview	`14.446 kB` `5.929 kB`	`14.492 kB` `5.943 kB`	`46 B` `14 B`
`react-checkbox` Checkbox	`35.144 kB` `12.085 kB`	`35.196 kB` `12.102 kB`	`52 B` `17 B`
`react-color-picker-preview` ColorArea	`50.445 kB` `17.675 kB`	`50.492 kB` `17.695 kB`	`47 B` `20 B`
`react-color-picker-preview` ColorPicker	`18.581 kB` `7.371 kB`	`18.627 kB` `7.389 kB`	`46 B` `18 B`
`react-color-picker-preview` ColorSlider	`42.458 kB` `15.707 kB`	`42.505 kB` `15.728 kB`	`47 B` `21 B`
`react-combobox` Combobox (including child components)	`105.562 kB` `34.52 kB`	`105.608 kB` `34.549 kB`	`46 B` `29 B`
`react-combobox` Dropdown (including child components)	`106.186 kB` `34.462 kB`	`106.238 kB` `34.481 kB`	`52 B` `19 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.638 kB` `20.24 kB`	`69.684 kB` `20.256 kB`	`46 B` `16 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`225.271 kB` `65.211 kB`	`225.33 kB` `65.242 kB`	`59 B` `31 B`
`react-components` react-components: FluentProvider & webLightTheme	`44.473 kB` `14.597 kB`	`44.519 kB` `14.615 kB`	`46 B` `18 B`
`react-components` react-components: entire library	`1.174 MB` `293.991 kB`	`1.174 MB` `294.039 kB`	`109 B` `48 B`
`react-datepicker-compat` DatePicker Compat	`225.971 kB` `64.065 kB`	`226.017 kB` `64.088 kB`	`46 B` `23 B`
`react-dialog` Dialog (including children components)	`101.099 kB` `30.381 kB`	`101.145 kB` `30.402 kB`	`46 B` `21 B`
`react-divider` Divider	`21.354 kB` `7.963 kB`	`21.4 kB` `7.978 kB`	`46 B` `15 B`
`react-field` Field	`23.425 kB` `8.905 kB`	`23.471 kB` `8.926 kB`	`46 B` `21 B`
`react-image` Image	`15.386 kB` `6.243 kB`	`15.432 kB` `6.256 kB`	`46 B` `13 B`
`react-input` Input	`28.04 kB` `9.451 kB`	`28.092 kB` `9.472 kB`	`52 B` `21 B`
`react-label` Label	`14.697 kB` `5.999 kB`	`14.743 kB` `6.015 kB`	`46 B` `16 B`
`react-link` Link	`17.625 kB` `7.146 kB`	`17.671 kB` `7.16 kB`	`46 B` `14 B`
`react-list` List	`89.19 kB` `26.607 kB`	`89.237 kB` `26.624 kB`	`47 B` `17 B`
`react-list` ListItem	`112.691 kB` `33.41 kB`	`112.737 kB` `33.432 kB`	`46 B` `22 B`
`react-menu` Menu (including children components)	`155.616 kB` `46.882 kB`	`155.674 kB` `46.923 kB`	`58 B` `41 B`
`react-menu` Menu (including selectable components)	`158.598 kB` `47.478 kB`	`158.656 kB` `47.517 kB`	`58 B` `39 B`
`react-message-bar` MessageBar (all components)	`24.882 kB` `9.269 kB`	`24.929 kB` `9.281 kB`	`47 B` `12 B`
`react-persona` Persona	`56.22 kB` `17.704 kB`	`56.27 kB` `17.722 kB`	`50 B` `18 B`
`react-popover` Popover	`131.05 kB` `41.016 kB`	`131.096 kB` `41.039 kB`	`46 B` `23 B`
`react-progress` ProgressBar	`17.11 kB` `6.899 kB`	`17.157 kB` `6.915 kB`	`47 B` `16 B`
`react-provider` FluentProvider	`24.649 kB` `8.902 kB`	`24.695 kB` `8.919 kB`	`46 B` `17 B`
`react-radio` Radio	`32.698 kB` `10.351 kB`	`32.744 kB` `10.367 kB`	`46 B` `16 B`
`react-radio` RadioGroup	`15.788 kB` `6.431 kB`	`15.834 kB` `6.45 kB`	`46 B` `19 B`
`react-select` Select	`27.758 kB` `10.131 kB`	`27.81 kB` `10.153 kB`	`52 B` `22 B`
`react-slider` Slider	`37.994 kB` `12.723 kB`	`38.04 kB` `12.736 kB`	`46 B` `13 B`
`react-spinbutton` SpinButton	`34.965 kB` `11.661 kB`	`35.018 kB` `11.684 kB`	`53 B` `23 B`
`react-spinner` Spinner	`25.271 kB` `8.547 kB`	`25.319 kB` `8.564 kB`	`48 B` `17 B`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`105.112 kB` `30.526 kB`	`105.158 kB` `30.545 kB`	`46 B` `19 B`
`react-switch` Switch	`35.345 kB` `11.322 kB`	`35.391 kB` `11.333 kB`	`46 B` `11 B`
`react-table` DataGrid	`160.994 kB` `45.684 kB`	`161.05 kB` `45.702 kB`	`56 B` `18 B`
`react-table` Table (Primitives only)	`42.692 kB` `13.862 kB`	`42.758 kB` `13.892 kB`	`66 B` `30 B`
`react-table` Table as DataGrid	`131.895 kB` `36.579 kB`	`131.96 kB` `36.608 kB`	`65 B` `29 B`
`react-table` Table (Selection only)	`70.562 kB` `20.007 kB`	`70.628 kB` `20.041 kB`	`66 B` `34 B`
`react-table` Table (Sort only)	`69.205 kB` `19.618 kB`	`69.271 kB` `19.651 kB`	`66 B` `33 B`
`react-tag-picker` @fluentui/react-tag-picker - package	`185.663 kB` `55.782 kB`	`185.715 kB` `55.81 kB`	`52 B` `28 B`
`react-tags` InteractionTag	`15.225 kB` `6.165 kB`	`15.271 kB` `6.185 kB`	`46 B` `20 B`
`react-tags` Tag	`29.098 kB` `9.559 kB`	`29.145 kB` `9.575 kB`	`47 B` `16 B`
`react-tags` TagGroup	`82.745 kB` `24.532 kB`	`82.793 kB` `24.545 kB`	`48 B` `13 B`
`react-text` Text - Default	`17.087 kB` `6.731 kB`	`17.133 kB` `6.749 kB`	`46 B` `18 B`
`react-text` Text - Wrappers	`20.268 kB` `7.055 kB`	`20.314 kB` `7.075 kB`	`46 B` `20 B`
`react-textarea` Textarea	`26.598 kB` `9.761 kB`	`26.65 kB` `9.78 kB`	`52 B` `19 B`
`react-timepicker-compat` TimePicker	`108.551 kB` `36.094 kB`	`108.597 kB` `36.111 kB`	`46 B` `17 B`
`react-toast` Toast (including Toaster)	`101.201 kB` `30.45 kB`	`101.258 kB` `30.471 kB`	`57 B` `21 B`
`react-tooltip` Tooltip	`57.131 kB` `19.949 kB`	`57.177 kB` `19.962 kB`	`46 B` `13 B`
`react-tree` FlatTree	`147.751 kB` `42.374 kB`	`147.802 kB` `42.378 kB`	`51 B` `4 B`
`react-tree` PersonaFlatTree	`148.496 kB` `42.517 kB`	`148.547 kB` `42.524 kB`	`51 B` `7 B`
`react-tree` PersonaTree	`144.707 kB` `41.371 kB`	`144.753 kB` `41.383 kB`	`46 B` `12 B`
`react-tree` Tree	`143.968 kB` `41.245 kB`	`144.014 kB` `41.258 kB`	`46 B` `13 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.095 kB` `40.026 kB`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Dev Runtime	`3.771 kB` `1.643 kB`
`react-jsx-runtime` JSX Runtime	`4.367 kB` `1.874 kB`
`react-motion` @fluentui/react-motion - createMotionComponent()	`4.506 kB` `1.967 kB`
`react-motion` @fluentui/react-motion - createPresenceComponent()	`5.189 kB` `2.274 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.144 kB` `10.046 kB`
`react-teaching-popover` TeachingPopover	`101.357 kB` `30.465 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against c28f7314c8a967a0f6f7bd6e4a7df9a5ab7703fc}

…en from utils

fabricteam · 2025-03-03T15:27:00Z

🕵 fluentuiv9 No visual regressions between this PR and main

bsunderhus self-assigned this Jun 3, 2024

github-actions bot added this to the April Project Cycle Q1 2024 milestone Jun 3, 2024

bsunderhus force-pushed the react-utilities/chore--slot-API-react-v17/18-support branch 6 times, most recently from 3421071 to 9a444bd Compare June 5, 2024 13:57

bsunderhus marked this pull request as ready for review June 5, 2024 16:17

bsunderhus requested review from a team, GeoffCoxMSFT, sopranopillow, khmakoto, chpalac and ling1726 as code owners June 5, 2024 16:17

bsunderhus force-pushed the react-utilities/chore--slot-API-react-v17/18-support branch from 3279340 to a54bb34 Compare June 6, 2024 11:47

bsunderhus requested a review from behowell as a code owner June 6, 2024 12:59

bsunderhus force-pushed the react-utilities/chore--slot-API-react-v17/18-support branch 3 times, most recently from c906ba8 to fcc5a3b Compare June 6, 2024 15:23

bsunderhus requested a review from a team as a code owner June 6, 2024 15:23

bsunderhus force-pushed the react-utilities/chore--slot-API-react-v17/18-support branch 5 times, most recently from b7ee301 to b2e0476 Compare June 6, 2024 22:17

microsoft-github-policy-service bot added the Area: Typescript label Aug 16, 2024

bsunderhus force-pushed the react-utilities/chore--slot-API-react-v17/18-support branch 7 times, most recently from ce2cfbb to 4b3bba1 Compare August 22, 2024 12:24

bsunderhus mentioned this pull request Sep 10, 2024

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

Open

1 task

mainframev force-pushed the react-utilities/chore--slot-API-react-v17/18-support branch from 4b3bba1 to c25417c Compare February 26, 2025 14:42

github-actions bot modified the milestones: August Project Cycle Q3 2024, February Project Cycle Q1 2025 Feb 26, 2025

bsunderhus and others added 12 commits March 3, 2025 13:41

chore(react-utilities): slot API react v17/18 support

a385ac8

chore: deprecates ComponentState.components property

5c27f0b

chore(react-utilities): updates useMergedRefs to accept LegacyRef

c4a894c

chore: loosen types for deprecated API

de150b1

chore: updates getSlotsNext tests

125d6b1

chore: modifications to support motion

043fcac

chore: ReactRefCompat

67b7eda

chore: redeclare RefAttributes instead of supporting LegacyRef

a683a5b

chore: keep render function on root signature

142668b

chore(react-utilities): export PropsWithoutRef and PropsWithoutChildr…

be228f9

…en from utils

chore: fix lint deprecation lint errors

d85efa6

chore(react-utilities): export RefAttributes type

dd89673

mainframev force-pushed the react-utilities/chore--slot-API-react-v17/18-support branch from 1e8b5f4 to dd89673 Compare March 3, 2025 14:57

github-actions bot modified the milestones: February Project Cycle Q1 2025, March Project Cycle Q1 2025 Mar 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(react-utilities): slot API react v17/18 support #31548

chore(react-utilities): slot API react v17/18 support #31548

bsunderhus commented Jun 3, 2024 •

edited

Loading

fabricteam commented Jun 3, 2024 •

edited

Loading

codesandbox-ci bot commented Jun 3, 2024 •

edited

Loading

fabricteam commented Jun 3, 2024 •

edited

Loading

github-actions bot commented Feb 26, 2025

github-actions bot commented Feb 26, 2025 •

edited

Loading

fabricteam commented Mar 3, 2025

chore(react-utilities): slot API react v17/18 support #31548

Are you sure you want to change the base?

chore(react-utilities): slot API react v17/18 support #31548

Conversation

bsunderhus commented Jun 3, 2024 • edited Loading

Previous Behavior

ReactNode

RefAttributes

New Behavior

What are the Breaking Changes here?

Related Issue(s)

fabricteam commented Jun 3, 2024 • edited Loading

Perf Analysis (@fluentui/react-components)

codesandbox-ci bot commented Jun 3, 2024 • edited Loading

fabricteam commented Jun 3, 2024 • edited Loading

📊 Bundle size report

github-actions bot commented Feb 26, 2025

github-actions bot commented Feb 26, 2025 • edited Loading

📊 Bundle size report

fabricteam commented Mar 3, 2025

🕵 fluentuiv9 No visual regressions between this PR and main

bsunderhus commented Jun 3, 2024 •

edited

Loading

fabricteam commented Jun 3, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

codesandbox-ci bot commented Jun 3, 2024 •

edited

Loading

fabricteam commented Jun 3, 2024 •

edited

Loading

github-actions bot commented Feb 26, 2025 •

edited

Loading