Skip to content

Commit 33ba2d2

Browse files
dmytrokirpaclaudeCopilot
authored
feat(react-headless-components-preview): add Combobox component and stories (#36114)
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
1 parent da9eb98 commit 33ba2d2

23 files changed

Lines changed: 1300 additions & 0 deletions

‎change/@fluentui-react-headless-components-preview-0ee0a685-d92f-4953-a5bd-8813ad8abc16.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "feat: add Combobox component",
4+
"packageName": "@fluentui/react-headless-components-preview",
5+
"email": "dmytrokirpa@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import * as Breadcrumb from '@fluentui/react-headless-components-preview/breadcr
55
import * as Button from '@fluentui/react-headless-components-preview/button';
66
import * as Card from '@fluentui/react-headless-components-preview/card';
77
import * as Checkbox from '@fluentui/react-headless-components-preview/checkbox';
8+
import * as Combobox from '@fluentui/react-headless-components-preview/combobox';
89
import * as Dialog from '@fluentui/react-headless-components-preview/dialog';
910
import * as Divider from '@fluentui/react-headless-components-preview/divider';
1011
import * as Drawer from '@fluentui/react-headless-components-preview/drawer';
@@ -43,6 +44,7 @@ console.log({
4344
Button,
4445
Card,
4546
Checkbox,
47+
Combobox,
4648
Dialog,
4749
Divider,
4850
Drawer,

‎packages/react-components/react-headless-components-preview/library/etc/combobox.api.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
## API Report File for "@fluentui/react-headless-components-preview"
2+
3+
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4+
5+
```ts
6+
7+
import type { BaseComboboxProps } from '@fluentui/react-combobox';
8+
import type { BaseComboboxState } from '@fluentui/react-combobox';
9+
import { ComboboxContextValues } from '@fluentui/react-combobox';
10+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
11+
import { JSXElement } from '@fluentui/react-utilities';
12+
import { ListboxContextValues as ListboxContextValues_2 } from '@fluentui/react-combobox';
13+
import type { ListboxProps as ListboxProps_2 } from '@fluentui/react-combobox';
14+
import type { ListboxSlots as ListboxSlots_2 } from '@fluentui/react-combobox';
15+
import { ListboxState as ListboxState_2 } from '@fluentui/react-combobox';
16+
import type { OptionGroupProps as OptionGroupProps_2 } from '@fluentui/react-combobox';
17+
import type { OptionGroupSlots as OptionGroupSlots_2 } from '@fluentui/react-combobox';
18+
import { OptionGroupState as OptionGroupState_2 } from '@fluentui/react-combobox';
19+
import type { OptionProps as OptionProps_2 } from '@fluentui/react-combobox';
20+
import type { OptionSlots as OptionSlots_2 } from '@fluentui/react-combobox';
21+
import { OptionState as OptionState_2 } from '@fluentui/react-combobox';
22+
import type * as React_2 from 'react';
23+
24+
// @public (undocumented)
25+
export const Combobox: ForwardRefComponent<ComboboxProps>;
26+
27+
// @public (undocumented)
28+
export type ComboboxProps = Omit<BaseComboboxProps, 'inlinePopup' | 'mountNode'>;
29+
30+
// @public (undocumented)
31+
export type ComboboxState = BaseComboboxState & {
32+
input: {
33+
'data-state'?: 'open' | 'closed';
34+
'data-disabled'?: string;
35+
'data-placeholder'?: string;
36+
};
37+
};
38+
39+
// @public
40+
export const Listbox: ForwardRefComponent<ListboxProps>;
41+
42+
// @public
43+
export type ListboxContextValues = ListboxContextValues_2;
44+
45+
// @public
46+
export type ListboxProps = ListboxProps_2;
47+
48+
// @public (undocumented)
49+
export type ListboxSlots = ListboxSlots_2;
50+
51+
// @public
52+
export type ListboxState = ListboxState_2;
53+
54+
// @public
55+
const Option_2: ForwardRefComponent<OptionProps>;
56+
export { Option_2 as Option }
57+
58+
// @public
59+
export const OptionGroup: ForwardRefComponent<OptionGroupProps>;
60+
61+
// @public
62+
export type OptionGroupProps = OptionGroupProps_2;
63+
64+
// @public (undocumented)
65+
export type OptionGroupSlots = OptionGroupSlots_2;
66+
67+
// @public
68+
export type OptionGroupState = OptionGroupState_2;
69+
70+
// @public
71+
export type OptionProps = OptionProps_2;
72+
73+
// @public (undocumented)
74+
export type OptionSlots = OptionSlots_2;
75+
76+
// @public
77+
export type OptionState = OptionState_2 & {
78+
root: {
79+
'data-disabled'?: string;
80+
'data-selected'?: string;
81+
};
82+
};
83+
84+
// @public (undocumented)
85+
export const renderCombobox: (state: ComboboxState, contextValues: ComboboxContextValues) => JSXElement;
86+
87+
// @public
88+
export const renderListbox: (state: ListboxState_2, contextValues: ListboxContextValues_2) => JSXElement;
89+
90+
// @public
91+
export const renderOption: (state: OptionState_2) => JSXElement;
92+
93+
// @public
94+
export const renderOptionGroup: (state: OptionGroupState_2) => JSXElement;
95+
96+
// @public (undocumented)
97+
export const useCombobox: (props: ComboboxProps, ref: React_2.Ref<HTMLInputElement>) => ComboboxState;
98+
99+
// @public (undocumented)
100+
export const useComboboxContextValues: (state: ComboboxState) => ComboboxContextValues;
101+
102+
// @public
103+
export const useListbox: (props: ListboxProps, ref: React_2.Ref<HTMLElement>) => ListboxState;
104+
105+
// @public (undocumented)
106+
export const useListboxContextValues: (state: ListboxState) => ListboxContextValues;
107+
108+
// @public
109+
export const useOption: (props: OptionProps, ref: React_2.Ref<HTMLElement>) => OptionState;
110+
111+
// @public
112+
export const useOptionGroup: (props: OptionGroupProps, ref: React_2.Ref<HTMLElement>) => OptionGroupState;
113+
114+
// (No @packageDocumentation comment for this package)
115+
116+
```

‎packages/react-components/react-headless-components-preview/library/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,12 @@
112112
"import": "./lib/checkbox.js",
113113
"require": "./lib-commonjs/checkbox.js"
114114
},
115+
"./combobox": {
116+
"types": "./dist/combobox.d.ts",
117+
"node": "./lib-commonjs/combobox.js",
118+
"import": "./lib/combobox.js",
119+
"require": "./lib-commonjs/combobox.js"
120+
},
115121
"./dialog": {
116122
"types": "./dist/dialog.d.ts",
117123
"node": "./lib-commonjs/dialog.js",

‎packages/react-components/react-headless-components-preview/library/src/combobox.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
export {
2+
Combobox,
3+
renderCombobox,
4+
useCombobox,
5+
useComboboxContextValues,
6+
Listbox,
7+
renderListbox,
8+
useListbox,
9+
useListboxContextValues,
10+
Option,
11+
renderOption,
12+
useOption,
13+
OptionGroup,
14+
renderOptionGroup,
15+
useOptionGroup,
16+
} from './components/Combobox';
17+
export type {
18+
ComboboxProps,
19+
ComboboxState,
20+
ListboxSlots,
21+
ListboxProps,
22+
ListboxState,
23+
ListboxContextValues,
24+
OptionSlots,
25+
OptionProps,
26+
OptionState,
27+
OptionGroupSlots,
28+
OptionGroupProps,
29+
OptionGroupState,
30+
} from './components/Combobox';

0 commit comments

Comments
 (0)