Skip to content

Commit d4ec30e

Browse files
dmytrokirpadmytrokirpa
committed
feat(react-tag-picker): add base hooks for TagPicker components
1 parent fc37669 commit d4ec30e

25 files changed

Lines changed: 384 additions & 75 deletions

‎change/@fluentui-react-tag-picker-c97b0cc0-e48a-4e22-986f-464ccc9476d3.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 base hooks for TagPicker components",
4+
"packageName": "@fluentui/react-tag-picker",
5+
"email": "dmytrokirpa@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { OptionState } from '@fluentui/react-combobox';
2828
import * as React_2 from 'react';
2929
import { Slot } from '@fluentui/react-utilities';
3030
import type { SlotClassNames } from '@fluentui/react-utilities';
31+
import type { TagGroupBaseState } from '@fluentui/react-tags';
3132
import { TagGroupContextValues } from '@fluentui/react-tags';
3233
import type { TagGroupSlots } from '@fluentui/react-tags';
3334
import type { TagGroupState } from '@fluentui/react-tags';
@@ -59,9 +60,21 @@ export const renderTagPickerOptionGroup: (state: TagPickerOptionGroupState) => J
5960
// @public
6061
export const TagPicker: React_2.FC<TagPickerProps>;
6162

63+
// @public
64+
export type TagPickerBaseProps = Omit<TagPickerProps, 'size' | 'appearance'>;
65+
66+
// @public
67+
export type TagPickerBaseState = Omit<TagPickerState, 'size' | 'appearance'>;
68+
6269
// @public
6370
export const TagPickerButton: ForwardRefComponent<TagPickerButtonProps>;
6471

72+
// @public
73+
export type TagPickerButtonBaseProps = Omit<TagPickerButtonProps, 'size' | 'appearance'>;
74+
75+
// @public
76+
export type TagPickerButtonBaseState = Omit<TagPickerButtonState, 'size'>;
77+
6578
// @public (undocumented)
6679
export const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots>;
6780

@@ -110,6 +123,12 @@ export type TagPickerContextValues = {
110123
// @public
111124
export const TagPickerControl: ForwardRefComponent<TagPickerControlProps>;
112125

126+
// @public
127+
export type TagPickerControlBaseProps = TagPickerControlProps;
128+
129+
// @public
130+
export type TagPickerControlBaseState = Omit<TagPickerControlState, 'size' | 'appearance'>;
131+
113132
// @public (undocumented)
114133
export const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots & TagPickerControlInternalSlots>;
115134

@@ -132,6 +151,14 @@ export type TagPickerControlState = ComponentState<TagPickerControlSlots & TagPi
132151
// @public
133152
export const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps>;
134153

154+
// @public
155+
export type TagPickerGroupBaseProps = TagPickerGroupProps;
156+
157+
// @public
158+
export type TagPickerGroupBaseState = TagGroupBaseState & {
159+
hasSelectedOptions: boolean;
160+
};
161+
135162
// @public (undocumented)
136163
export const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots>;
137164

@@ -149,6 +176,12 @@ export type TagPickerGroupState = TagGroupState & {
149176
// @public
150177
export const TagPickerInput: ForwardRefComponent<TagPickerInputProps>;
151178

179+
// @public
180+
export type TagPickerInputBaseProps = Omit<TagPickerInputProps, 'appearance'>;
181+
182+
// @public
183+
export type TagPickerInputBaseState = Omit<TagPickerInputState, 'size'>;
184+
152185
// @public (undocumented)
153186
export const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots>;
154187

@@ -262,9 +295,15 @@ export type TagPickerState = ComponentState<TagPickerSlots> & Pick<ComboboxState
262295
// @public
263296
export const useTagPicker_unstable: (props: TagPickerProps) => TagPickerState;
264297

298+
// @public
299+
export const useTagPickerBase_unstable: (props: TagPickerBaseProps) => TagPickerBaseState;
300+
265301
// @public
266302
export const useTagPickerButton_unstable: (props: TagPickerButtonProps, ref: React_2.Ref<HTMLButtonElement>) => TagPickerButtonState;
267303

304+
// @public
305+
export const useTagPickerButtonBase_unstable: (props: TagPickerButtonBaseProps, ref: React_2.Ref<HTMLButtonElement>) => TagPickerButtonBaseState;
306+
268307
// @public
269308
export const useTagPickerButtonStyles_unstable: (state: TagPickerButtonState) => TagPickerButtonState;
270309

@@ -274,6 +313,9 @@ export const useTagPickerContext_unstable: <T>(selector: ContextSelector<TagPick
274313
// @public
275314
export const useTagPickerControl_unstable: (props: TagPickerControlProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerControlState;
276315

316+
// @public
317+
export const useTagPickerControlBase_unstable: (props: TagPickerControlBaseProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerControlBaseState;
318+
277319
// @public
278320
export const useTagPickerControlStyles_unstable: (state: TagPickerControlState) => TagPickerControlState;
279321

@@ -283,12 +325,18 @@ export function useTagPickerFilter({ filter: filterOverride, noOptionsElement, r
283325
// @public
284326
export const useTagPickerGroup_unstable: (props: TagPickerGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerGroupState;
285327

328+
// @public
329+
export const useTagPickerGroupBase_unstable: (props: TagPickerGroupBaseProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerGroupBaseState;
330+
286331
// @public
287332
export const useTagPickerGroupStyles_unstable: (state: TagPickerGroupState) => TagPickerGroupState;
288333

289334
// @public
290335
export const useTagPickerInput_unstable: (propsArg: TagPickerInputProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputState;
291336

337+
// @public
338+
export const useTagPickerInputBase_unstable: (propsArg: TagPickerInputBaseProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputBaseState;
339+
292340
// @public
293341
export const useTagPickerInputStyles_unstable: (state: TagPickerInputState) => TagPickerInputState;
294342

‎packages/react-components/react-tag-picker/library/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@fluentui/react-tag-picker",
3-
"version": "9.8.5",
3+
"version": "9.8.2",
44
"description": "FluentUI TagPicker component",
55
"main": "lib-commonjs/index.js",
66
"module": "lib/index.js",
@@ -26,12 +26,12 @@
2626
"@fluentui/react-tabster": "^9.26.13",
2727
"@fluentui/react-aria": "^9.17.10",
2828
"@fluentui/react-icons": "^2.0.245",
29-
"@fluentui/react-combobox": "^9.17.0",
30-
"@fluentui/react-tags": "^9.8.0",
29+
"@fluentui/react-combobox": "^9.16.18",
30+
"@fluentui/react-tags": "^9.7.17",
3131
"@fluentui/react-context-selector": "^9.2.15",
3232
"@fluentui/react-positioning": "^9.22.0",
3333
"@fluentui/keyboard-keys": "^9.0.8",
34-
"@fluentui/react-field": "^9.5.0",
34+
"@fluentui/react-field": "^9.4.16",
3535
"@griffel/react": "^1.5.32",
3636
"@swc/helpers": "^0.5.1"
3737
},

‎packages/react-components/react-tag-picker/library/src/TagPicker.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
export type {
2+
TagPickerBaseProps,
3+
TagPickerBaseState,
24
TagPickerContextValues,
35
TagPickerOnOpenChangeData,
46
TagPickerOnOptionSelectData,
@@ -7,4 +9,9 @@ export type {
79
TagPickerSlots,
810
TagPickerState,
911
} from './components/TagPicker/index';
10-
export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable } from './components/TagPicker/index';
12+
export {
13+
TagPicker,
14+
renderTagPicker_unstable,
15+
useTagPickerBase_unstable,
16+
useTagPicker_unstable,
17+
} from './components/TagPicker/index';

‎packages/react-components/react-tag-picker/library/src/TagPickerButton.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
export type {
2+
TagPickerButtonBaseProps,
3+
TagPickerButtonBaseState,
24
TagPickerButtonProps,
35
TagPickerButtonSlots,
46
TagPickerButtonState,
@@ -8,5 +10,6 @@ export {
810
renderTagPickerButton_unstable,
911
tagPickerButtonClassNames,
1012
useTagPickerButtonStyles_unstable,
13+
useTagPickerButtonBase_unstable,
1114
useTagPickerButton_unstable,
1215
} from './components/TagPickerButton/index';

‎packages/react-components/react-tag-picker/library/src/TagPickerControl.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
export type {
2+
TagPickerControlBaseProps,
3+
TagPickerControlBaseState,
24
TagPickerControlCSSProperties,
35
TagPickerControlInternalSlots,
46
TagPickerControlProps,
@@ -12,5 +14,6 @@ export {
1214
tagPickerControlAsideWidthToken,
1315
tagPickerControlClassNames,
1416
useTagPickerControlStyles_unstable,
17+
useTagPickerControlBase_unstable,
1518
useTagPickerControl_unstable,
1619
} from './components/TagPickerControl/index';

‎packages/react-components/react-tag-picker/library/src/TagPickerGroup.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
1-
export type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './components/TagPickerGroup/index';
1+
export type {
2+
TagPickerGroupBaseProps,
3+
TagPickerGroupBaseState,
4+
TagPickerGroupProps,
5+
TagPickerGroupSlots,
6+
TagPickerGroupState,
7+
} from './components/TagPickerGroup/index';
28
export {
39
TagPickerGroup,
410
renderTagPickerGroup_unstable,
511
tagPickerGroupClassNames,
612
useTagPickerGroupStyles_unstable,
13+
useTagPickerGroupBase_unstable,
714
useTagPickerGroup_unstable,
815
} from './components/TagPickerGroup/index';

‎packages/react-components/react-tag-picker/library/src/TagPickerInput.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
1-
export type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './components/TagPickerInput/index';
1+
export type {
2+
TagPickerInputBaseProps,
3+
TagPickerInputBaseState,
4+
TagPickerInputProps,
5+
TagPickerInputSlots,
6+
TagPickerInputState,
7+
} from './components/TagPickerInput/index';
28
export {
39
TagPickerInput,
410
renderTagPickerInput_unstable,
511
tagPickerInputClassNames,
612
useTagPickerInputStyles_unstable,
13+
useTagPickerInputBase_unstable,
714
useTagPickerInput_unstable,
815
} from './components/TagPickerInput/index';

‎packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.types.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,3 +106,13 @@ export type TagPickerContextValues = {
106106
activeDescendant: ActiveDescendantContextValue;
107107
listbox: ListboxContextValue;
108108
};
109+
110+
/**
111+
* TagPicker Base Props - omits design-only props
112+
*/
113+
export type TagPickerBaseProps = Omit<TagPickerProps, 'size' | 'appearance'>;
114+
115+
/**
116+
* TagPicker Base State - omits design-only state
117+
*/
118+
export type TagPickerBaseState = Omit<TagPickerState, 'size' | 'appearance'>;

‎packages/react-components/react-tag-picker/library/src/components/TagPicker/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
export { TagPicker } from './TagPicker';
22
export type {
3+
TagPickerBaseProps,
4+
TagPickerBaseState,
35
TagPickerContextValues,
46
TagPickerOnOpenChangeData,
57
TagPickerOnOptionSelectData,
@@ -9,4 +11,4 @@ export type {
911
TagPickerState,
1012
} from './TagPicker.types';
1113
export { renderTagPicker_unstable } from './renderTagPicker';
12-
export { useTagPicker_unstable } from './useTagPicker';
14+
export { useTagPickerBase_unstable, useTagPicker_unstable } from './useTagPicker';

0 commit comments

Comments
 (0)