Skip to content

Commit 88fc286

Browse files
mainframevmainframev
authored
feat(react-headless-components-preview): add TagPicker (#36285)
1 parent 8bf5466 commit 88fc286

62 files changed

Lines changed: 2697 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎change/@fluentui-react-headless-components-preview-7694d78b-9ac6-40a0-8490-31128315e61a.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 headless TagPicker",
4+
"packageName": "@fluentui/react-headless-components-preview",
5+
"email": "vgenaev@gmail.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
@@ -39,6 +39,7 @@ import * as Switch from '@fluentui/react-headless-components-preview/switch';
3939
import * as TabList from '@fluentui/react-headless-components-preview/tab-list';
4040
import * as Tag from '@fluentui/react-headless-components-preview/tag';
4141
import * as TagGroup from '@fluentui/react-headless-components-preview/tag-group';
42+
import * as TagPicker from '@fluentui/react-headless-components-preview/tag-picker';
4243
import * as TeachingPopover from '@fluentui/react-headless-components-preview/teaching-popover';
4344
import * as Textarea from '@fluentui/react-headless-components-preview/textarea';
4445
import * as Toast from '@fluentui/react-headless-components-preview/toast';
@@ -88,6 +89,7 @@ console.log({
8889
TabList,
8990
Tag,
9091
TagGroup,
92+
TagPicker,
9193
TeachingPopover,
9294
Textarea,
9395
Toast,

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

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
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 { ComponentProps } from '@fluentui/react-utilities';
8+
import type { ComponentState } from '@fluentui/react-utilities';
9+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
10+
import type { JSXElement } from '@fluentui/react-utilities';
11+
import type { ListboxProps as ListboxProps_2 } from '@fluentui/react-combobox';
12+
import type { OptionGroupProps } from '@fluentui/react-combobox';
13+
import type { OptionGroupSlots } from '@fluentui/react-combobox';
14+
import type { OptionGroupState } from '@fluentui/react-combobox';
15+
import type { OptionSlots as OptionSlots_2 } from '@fluentui/react-combobox';
16+
import type { OptionState as OptionState_2 } from '@fluentui/react-combobox';
17+
import { PositioningShorthand } from '@fluentui/react-positioning';
18+
import type * as React_2 from 'react';
19+
import { renderTagPicker_unstable as renderTagPicker } from '@fluentui/react-tag-picker';
20+
import { renderTagPickerButton_unstable as renderTagPickerButton } from '@fluentui/react-tag-picker';
21+
import { renderTagPickerControl_unstable as renderTagPickerControl } from '@fluentui/react-tag-picker';
22+
import { renderTagPickerGroup_unstable as renderTagPickerGroup } from '@fluentui/react-tag-picker';
23+
import { renderTagPickerInput_unstable as renderTagPickerInput } from '@fluentui/react-tag-picker';
24+
import { renderTagPickerList_unstable as renderTagPickerList } from '@fluentui/react-tag-picker';
25+
import { renderTagPickerOption_unstable as renderTagPickerOption } from '@fluentui/react-tag-picker';
26+
import { renderOptionGroup_unstable as renderTagPickerOptionGroup } from '@fluentui/react-combobox';
27+
import type { Slot } from '@fluentui/react-utilities';
28+
import type { TagGroupBaseProps } from '@fluentui/react-tags';
29+
import type { TagGroupContextValue } from '@fluentui/react-tags';
30+
import type { TagPickerBaseProps } from '@fluentui/react-tag-picker';
31+
import type { TagPickerButtonBaseState } from '@fluentui/react-tag-picker';
32+
import { TagPickerButtonBaseProps as TagPickerButtonProps } from '@fluentui/react-tag-picker';
33+
import { TagPickerButtonSlots } from '@fluentui/react-tag-picker';
34+
import { TagPickerContextValue } from '@fluentui/react-tag-picker';
35+
import { TagPickerContextValues } from '@fluentui/react-tag-picker';
36+
import type { TagPickerControlBaseState } from '@fluentui/react-tag-picker';
37+
import { TagPickerControlInternalSlots } from '@fluentui/react-tag-picker';
38+
import { TagPickerControlProps } from '@fluentui/react-tag-picker';
39+
import { TagPickerControlSlots } from '@fluentui/react-tag-picker';
40+
import type { TagPickerGroupBaseState } from '@fluentui/react-tag-picker';
41+
import type { TagPickerGroupSlots } from '@fluentui/react-tag-picker';
42+
import type { TagPickerInputBaseState } from '@fluentui/react-tag-picker';
43+
import { TagPickerInputBaseProps as TagPickerInputProps } from '@fluentui/react-tag-picker';
44+
import { TagPickerInputSlots } from '@fluentui/react-tag-picker';
45+
import { TagPickerOnOpenChangeData } from '@fluentui/react-tag-picker';
46+
import { TagPickerOnOptionSelectData } from '@fluentui/react-tag-picker';
47+
import { TagPickerSize } from '@fluentui/react-tag-picker';
48+
import { TagPickerSlots } from '@fluentui/react-tag-picker';
49+
import { TagPickerState } from '@fluentui/react-tag-picker';
50+
import { useTagPickerContext_unstable } from '@fluentui/react-tag-picker';
51+
import { useTagPickerContextValues } from '@fluentui/react-tag-picker';
52+
53+
export { renderTagPicker }
54+
55+
export { renderTagPickerButton }
56+
57+
export { renderTagPickerControl }
58+
59+
export { renderTagPickerGroup }
60+
61+
export { renderTagPickerInput }
62+
63+
export { renderTagPickerList }
64+
65+
export { renderTagPickerOption }
66+
67+
export { renderTagPickerOptionGroup }
68+
69+
// @public
70+
export const TagPicker: {
71+
(props: TagPickerProps): JSXElement;
72+
displayName: string;
73+
};
74+
75+
// @public
76+
export const TagPickerButton: ForwardRefComponent<TagPickerButtonProps>;
77+
78+
export { TagPickerButtonProps }
79+
80+
export { TagPickerButtonSlots }
81+
82+
// @public
83+
export type TagPickerButtonState = TagPickerButtonBaseState & {
84+
root: {
85+
'data-disabled'?: string;
86+
};
87+
};
88+
89+
export { TagPickerContextValue }
90+
91+
export { TagPickerContextValues }
92+
93+
// @public
94+
export const TagPickerControl: ForwardRefComponent<TagPickerControlProps>;
95+
96+
export { TagPickerControlInternalSlots }
97+
98+
export { TagPickerControlProps }
99+
100+
export { TagPickerControlSlots }
101+
102+
// @public
103+
export type TagPickerControlState = TagPickerControlBaseState & {
104+
root: {
105+
'data-disabled'?: string;
106+
'data-invalid'?: string;
107+
};
108+
};
109+
110+
// @public
111+
export const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps>;
112+
113+
// @public
114+
export type TagPickerGroupProps = ComponentProps<TagPickerGroupSlots> & Pick<TagGroupBaseProps, 'dismissible' | 'onDismiss'>;
115+
116+
export { TagPickerGroupSlots }
117+
118+
// @public
119+
export type TagPickerGroupState = TagPickerGroupBaseState & {
120+
root: {
121+
focusgroup?: string;
122+
'data-disabled'?: string;
123+
};
124+
};
125+
126+
// @public
127+
export const TagPickerInput: ForwardRefComponent<TagPickerInputProps>;
128+
129+
export { TagPickerInputProps }
130+
131+
export { TagPickerInputSlots }
132+
133+
// @public
134+
export type TagPickerInputState = TagPickerInputBaseState & {
135+
root: {
136+
'data-disabled'?: string;
137+
};
138+
};
139+
140+
// @public
141+
export const TagPickerList: ForwardRefComponent<TagPickerListProps>;
142+
143+
// @public
144+
export type TagPickerListProps = ComponentProps<TagPickerListSlots>;
145+
146+
// @public (undocumented)
147+
export type TagPickerListSlots = {
148+
root: Slot<typeof Listbox>;
149+
};
150+
151+
// @public
152+
export type TagPickerListState = ComponentState<TagPickerListSlots> & {
153+
open: boolean;
154+
};
155+
156+
export { TagPickerOnOpenChangeData }
157+
158+
export { TagPickerOnOptionSelectData }
159+
160+
// @public
161+
export const TagPickerOption: ForwardRefComponent<TagPickerOptionProps>;
162+
163+
// @public
164+
export const TagPickerOptionGroup: ForwardRefComponent<TagPickerOptionGroupProps>;
165+
166+
// @public
167+
export type TagPickerOptionGroupProps = OptionGroupProps;
168+
169+
// @public (undocumented)
170+
export type TagPickerOptionGroupSlots = OptionGroupSlots;
171+
172+
// @public
173+
export type TagPickerOptionGroupState = OptionGroupState;
174+
175+
// @public
176+
export type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {
177+
value: string;
178+
disabled?: boolean;
179+
} & ({
180+
text?: string;
181+
children: string;
182+
} | {
183+
text: string;
184+
children?: React_2.ReactNode;
185+
});
186+
187+
// @public (undocumented)
188+
export type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {
189+
media?: Slot<'div'>;
190+
secondaryContent?: Slot<'span'>;
191+
};
192+
193+
// @public
194+
export type TagPickerOptionState = OptionState & ComponentState<TagPickerOptionSlots>;
195+
196+
// @public (undocumented)
197+
export type TagPickerProps = TagPickerBaseProps & {
198+
positioning?: PositioningShorthand;
199+
};
200+
201+
export { TagPickerSize }
202+
203+
export { TagPickerSlots }
204+
205+
export { TagPickerState }
206+
207+
// @public
208+
export const useTagPicker: (props: TagPickerProps) => TagPickerState;
209+
210+
// @public
211+
export const useTagPickerButton: (props: TagPickerButtonProps, ref: React_2.Ref<HTMLButtonElement>) => TagPickerButtonState;
212+
213+
export { useTagPickerContext_unstable }
214+
215+
export { useTagPickerContextValues }
216+
217+
// @public
218+
export const useTagPickerControl: (props: TagPickerControlProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerControlState;
219+
220+
// @public (undocumented)
221+
export function useTagPickerFilter({ filter: filterOverride, noOptionsElement, renderOption, query, options, }: UseTagPickerFilterConfig): JSXElement[];
222+
223+
// @public
224+
export const useTagPickerGroup: (props: TagPickerGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerGroupState;
225+
226+
// @public (undocumented)
227+
export function useTagPickerGroupContextValues(state: TagPickerGroupState): TagGroupContextValues;
228+
229+
// @public
230+
export const useTagPickerInput: (props: TagPickerInputProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputState;
231+
232+
// @public
233+
export const useTagPickerList: (props: TagPickerListProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerListState;
234+
235+
// @public
236+
export const useTagPickerOption: (props: TagPickerOptionProps, ref: React_2.Ref<HTMLElement>) => TagPickerOptionState;
237+
238+
// @public
239+
export const useTagPickerOptionGroup: (props: TagPickerOptionGroupProps, ref: React_2.Ref<HTMLElement>) => TagPickerOptionGroupState;
240+
241+
// (No @packageDocumentation comment for this package)
242+
243+
```

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"@fluentui/react-switch": "^9.7.4",
6060
"@fluentui/react-tabs": "^9.12.3",
6161
"@fluentui/react-tabster": "^9.26.16",
62+
"@fluentui/react-tag-picker": "^9.10.0",
6263
"@fluentui/react-tags": "^9.9.2",
6364
"@fluentui/react-teaching-popover": "^9.7.2",
6465
"@fluentui/react-textarea": "^9.7.4",
@@ -333,6 +334,12 @@
333334
"import": "./lib/tag-group.js",
334335
"require": "./lib-commonjs/tag-group.js"
335336
},
337+
"./tag-picker": {
338+
"types": "./dist/tag-picker.d.ts",
339+
"node": "./lib-commonjs/tag-picker.js",
340+
"import": "./lib/tag-picker.js",
341+
"require": "./lib-commonjs/tag-picker.js"
342+
},
336343
"./teaching-popover": {
337344
"types": "./dist/teaching-popover.d.ts",
338345
"node": "./lib-commonjs/teaching-popover.js",

0 commit comments

Comments
 (0)