feat: Add caseSensitive prop to ComboBox

[khmakoto]

Previous Behavior

ComboBox would always match input with the options in a case insensitive way without the possibility of modifying this behavior.

New Behavior

A new caseSensitive prop is introduced to ComboBox in this PR, through which all internal comparisons in the logic of ComboBox are done in a case sensitive manner. A new example of what this behavior looks like is introduced in this PR as well.

Related Issue(s)

• Fixes ComboBox Freeform Input Matches Option Without Case Sensitivity Check #30915.

[codesandbox-ci]

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]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react ComboBox	250.194 kB 71.86 kB	250.423 kB 71.926 kB	229 B 66 B
react Fluent UI React (entire library)	1.012 MB 281.033 kB	1.012 MB 281.091 kB	229 B 58 B
react TimePicker	239.998 kB 69.624 kB	240.227 kB 69.693 kB	229 B 69 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
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	200.619 kB 60.07 kB
react Button	194.573 kB 56.3 kB
react ButtonGrid	180.349 kB 54.518 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 CommandBar	201.843 kB 59.824 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.3 kB 65.63 kB
react Dialog	209.943 kB 62.812 kB
react Divider	19.399 kB 6.798 kB
react DocumentCard	215.628 kB 64.085 kB
react DragDrop	8.343 kB 2.724 kB
react DraggableZone	34.109 kB 11.448 kB
react Dropdown	232.588 kB 68.284 kB
react ExtendedPicker	96.565 kB 27.809 kB
react Fabric	41.537 kB 14.283 kB
react Facepile	210.48 kB 63.032 kB
react FloatingPicker	240.713 kB 68.651 kB
react FocusTrapZone	16.975 kB 5.917 kB
react FocusZone	54.844 kB 17.402 kB
react Grid	180.349 kB 54.518 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	189.134 kB 56.778 kB
react Modal	93.44 kB 30.18 kB
react Nav	187.931 kB 56.384 kB
react OverflowSet	33.191 kB 11.252 kB
react Overlay	40.694 kB 14.023 kB
react Panel	199.654 kB 59.727 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	292.399 kB 82.007 kB
react Pivot	188.845 kB 57.107 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 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	187.409 kB 56.377 kB
react SelectableOption	724 B 413 B
react SelectedItemsList	231.169 kB 67.62 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.075 kB 68.397 kB
react Slider	57.449 kB 19.143 kB
react SpinButton	191.137 kB 57.503 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.675 kB 57.985 kB
react TeachingBubble	204.685 kB 60.713 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 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

_{🤖 This report was generated against cd78d70a00dbeae15585494c8853a5a2730a9f7d}

[fabricteam]

🕵 fluentuiv8 No visual regressions between this PR and main

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	631	639	5000
Breadcrumb	mount	1716	1677	1000
Checkbox	mount	1730	1731	5000
CheckboxBase	mount	1479	1491	5000
ChoiceGroup	mount	3019	3077	5000
ComboBox	mount	688	688	1000
CommandBar	mount	6730	6743	1000
ContextualMenu	mount	14578	14433	1000
DefaultButton	mount	794	785	5000
DetailsRow	mount	2226	2233	5000
DetailsRowFast	mount	2218	2274	5000
DetailsRowNoStyles	mount	2076	2045	5000
Dialog	mount	2728	2903	1000
DocumentCardTitle	mount	233	245	1000
Dropdown	mount	2037	2066	5000
FocusTrapZone	mount	1158	1177	5000
FocusZone	mount	1095	1083	5000
GroupedList	mount	38379	43773	2
GroupedList	virtual-rerender	18177	20422	2
GroupedList	virtual-rerender-with-unmount	52582	51851	2
GroupedListV2	mount	229	232	2
GroupedListV2	virtual-rerender	199	225	2
GroupedListV2	virtual-rerender-with-unmount	229	227	2
IconButton	mount	1161	1130	5000
Label	mount	339	355	5000
Layer	mount	2823	2786	5000
Link	mount	417	411	5000
MenuButton	mount	1000	1038	5000
MessageBar	mount	21584	21610	5000
Nav	mount	2041	2083	1000
OverflowSet	mount	811	828	5000
Panel	mount	1873	1840	1000
Persona	mount	731	764	1000
Pivot	mount	937	935	1000
PrimaryButton	mount	928	933	5000
Rating	mount	4852	4764	5000
SearchBox	mount	912	943	5000
Shimmer	mount	1965	1931	5000
Slider	mount	1361	1324	5000
SpinButton	mount	2978	3016	5000
Spinner	mount	385	388	5000
SplitButton	mount	1871	1913	5000
Stack	mount	414	421	5000
StackWithIntrinsicChildren	mount	851	901	5000
StackWithTextChildren	mount	2617	2684	5000
SwatchColorPicker	mount	6414	6478	5000
TagPicker	mount	1474	1481	5000
Text	mount	378	389	5000
TextField	mount	962	980	5000
ThemeProvider	mount	886	881	5000
ThemeProvider	virtual-rerender	597	596	5000
ThemeProvider	virtual-rerender-with-unmount	1307	1348	5000
Toggle	mount	627	622	5000
buttonNative	mount	200	198	5000