refactor: Deprecate ComboboxContext in favour of ListboxContext #30575

ling1726 · 2024-02-19T18:32:34Z

There is only one case where the ComboboxContext does not contain the correct state function - closing the listbox popover when an option is clicked.

In all other cases the ListboxContext contains exactly the same properties as the ComboboxContext for its consumers, for this case onOptionClick was added to the ListboxContext.

This PR deprecates the ComboboxProvider and associated internal usage. The ComboboxContext itself or a hook to consume it was never exported

Before

<ComboboxProvider value={{...}}>
    {children}
</ComboboxProvider>

After

<ListboxProvider value={{...}}>
    {children}
</ListboxProvider>

Addresses #26652

There is only one case where the ComboboxContext does not contain the correct state function - closing the listbox popover when an option is clicked. In all other cases the ListboxContext contains exactly the same properties as the ComboboxContext for its consumers.

fabricteam · 2024-02-19T18:42:36Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	628	610	5000
Button	mount	286	292	5000
Field	mount	1082	1132	5000
FluentProvider	mount	706	691	5000
FluentProviderWithTheme	mount	76	81	10
FluentProviderWithTheme	virtual-rerender	63	64	10
FluentProviderWithTheme	virtual-rerender-with-unmount	75	74	10
MakeStyles	mount	881	849	50000
Persona	mount	1778	1746	5000
SpinButton	mount	1390	1379	5000

fabricteam · 2024-02-19T18:45:18Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-combobox` Combobox (including child components)	`102.176 kB` `32.976 kB`	`102.446 kB` `33.094 kB`	`270 B` `118 B`
`react-combobox` Dropdown (including child components)	`103.543 kB` `32.927 kB`	`103.825 kB` `33.037 kB`	`282 B` `110 B`
`react-timepicker-compat` TimePicker	`104.206 kB` `34.375 kB`	`104.476 kB` `34.491 kB`	`270 B` `116 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`70.726 kB` `20.47 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`217.193 kB` `61.95 kB`
`react-components` react-components: FluentProvider & webLightTheme	`43.211 kB` `14.303 kB`
`react-portal-compat` PortalCompatProvider	`7.94 kB` `2.592 kB`

_{🤖 This report was generated against a0bb58f2ac1d9f50bce33b7a9c4fb6b09922a956}

codesandbox-ci · 2024-02-19T18:57:58Z

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-02-19T19:09:01Z

🕵 fluentuiv9 No visual regressions between this PR and main

packages/react-components/react-combobox/package.json

packages/react-components/react-combobox/src/components/Option/Option.test.tsx

packages/react-components/react-combobox/src/contexts/useComboboxContextValues.ts

packages/react-components/react-combobox/src/components/Listbox/useListbox.ts

github-actions bot added this to the February Project Cycle Q1 2024 milestone Feb 19, 2024

changefile

9c94044

ling1726 marked this pull request as ready for review February 19, 2024 18:52

ling1726 requested review from smhigley and a team as code owners February 19, 2024 18:52