feat(react-tag-picker): add base hooks for TagPicker components

Author: dmytrokirpa

change/@fluentui-react-tag-picker-c97b0cc0-e48a-4e22-986f-464ccc9476d3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add base hooks for TagPicker components",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -28,6 +28,7 @@ import type { OptionState } from '@fluentui/react-combobox';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { TagGroupBaseState } from '@fluentui/react-tags';
 import { TagGroupContextValues } from '@fluentui/react-tags';
 import type { TagGroupSlots } from '@fluentui/react-tags';
 import type { TagGroupState } from '@fluentui/react-tags';
@@ -59,9 +60,21 @@ export const renderTagPickerOptionGroup: (state: TagPickerOptionGroupState) => J
 // @public
 export const TagPicker: React_2.FC<TagPickerProps>;
 
+// @public
+export type TagPickerBaseProps = Omit<TagPickerProps, 'size' | 'appearance'>;
+
+// @public
+export type TagPickerBaseState = Omit<TagPickerState, 'size' | 'appearance'>;
+
 // @public
 export const TagPickerButton: ForwardRefComponent<TagPickerButtonProps>;
 
+// @public
+export type TagPickerButtonBaseProps = Omit<TagPickerButtonProps, 'size' | 'appearance'>;
+
+// @public
+export type TagPickerButtonBaseState = Omit<TagPickerButtonState, 'size'>;
+
 // @public (undocumented)
 export const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots>;
 
@@ -110,6 +123,12 @@ export type TagPickerContextValues = {
 // @public
 export const TagPickerControl: ForwardRefComponent<TagPickerControlProps>;
 
+// @public
+export type TagPickerControlBaseProps = TagPickerControlProps;
+
+// @public
+export type TagPickerControlBaseState = Omit<TagPickerControlState, 'size' | 'appearance'>;
+
 // @public (undocumented)
 export const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots & TagPickerControlInternalSlots>;
 
@@ -132,6 +151,14 @@ export type TagPickerControlState = ComponentState<TagPickerControlSlots & TagPi
 // @public
 export const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps>;
 
+// @public
+export type TagPickerGroupBaseProps = TagPickerGroupProps;
+
+// @public
+export type TagPickerGroupBaseState = TagGroupBaseState & {
+    hasSelectedOptions: boolean;
+};
+
 // @public (undocumented)
 export const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots>;
 
@@ -149,6 +176,12 @@ export type TagPickerGroupState = TagGroupState & {
 // @public
 export const TagPickerInput: ForwardRefComponent<TagPickerInputProps>;
 
+// @public
+export type TagPickerInputBaseProps = Omit<TagPickerInputProps, 'appearance'>;
+
+// @public
+export type TagPickerInputBaseState = Omit<TagPickerInputState, 'size'>;
+
 // @public (undocumented)
 export const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots>;
 
@@ -262,9 +295,15 @@ export type TagPickerState = ComponentState<TagPickerSlots> & Pick<ComboboxState
 // @public
 export const useTagPicker_unstable: (props: TagPickerProps) => TagPickerState;
 
+// @public
+export const useTagPickerBase_unstable: (props: TagPickerBaseProps) => TagPickerBaseState;
+
 // @public
 export const useTagPickerButton_unstable: (props: TagPickerButtonProps, ref: React_2.Ref<HTMLButtonElement>) => TagPickerButtonState;
 
+// @public
+export const useTagPickerButtonBase_unstable: (props: TagPickerButtonBaseProps, ref: React_2.Ref<HTMLButtonElement>) => TagPickerButtonBaseState;
+
 // @public
 export const useTagPickerButtonStyles_unstable: (state: TagPickerButtonState) => TagPickerButtonState;
 
@@ -274,6 +313,9 @@ export const useTagPickerContext_unstable: <T>(selector: ContextSelector<TagPick
 // @public
 export const useTagPickerControl_unstable: (props: TagPickerControlProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerControlState;
 
+// @public
+export const useTagPickerControlBase_unstable: (props: TagPickerControlBaseProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerControlBaseState;
+
 // @public
 export const useTagPickerControlStyles_unstable: (state: TagPickerControlState) => TagPickerControlState;
 
@@ -283,12 +325,18 @@ export function useTagPickerFilter({ filter: filterOverride, noOptionsElement, r
 // @public
 export const useTagPickerGroup_unstable: (props: TagPickerGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerGroupState;
 
+// @public
+export const useTagPickerGroupBase_unstable: (props: TagPickerGroupBaseProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerGroupBaseState;
+
 // @public
 export const useTagPickerGroupStyles_unstable: (state: TagPickerGroupState) => TagPickerGroupState;
 
 // @public
 export const useTagPickerInput_unstable: (propsArg: TagPickerInputProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputState;
 
+// @public
+export const useTagPickerInputBase_unstable: (propsArg: TagPickerInputBaseProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputBaseState;
+
 // @public
 export const useTagPickerInputStyles_unstable: (state: TagPickerInputState) => TagPickerInputState;
 

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

@@ -1,4 +1,6 @@
 export type {
+  TagPickerBaseProps,
+  TagPickerBaseState,
   TagPickerContextValues,
   TagPickerOnOpenChangeData,
   TagPickerOnOptionSelectData,
@@ -7,4 +9,9 @@ export type {
   TagPickerSlots,
   TagPickerState,
 } from './components/TagPicker/index';
-export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable } from './components/TagPicker/index';
+export {
+  TagPicker,
+  renderTagPicker_unstable,
+  useTagPickerBase_unstable,
+  useTagPicker_unstable,
+} from './components/TagPicker/index';

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

@@ -1,4 +1,6 @@
 export type {
+  TagPickerButtonBaseProps,
+  TagPickerButtonBaseState,
   TagPickerButtonProps,
   TagPickerButtonSlots,
   TagPickerButtonState,
@@ -8,5 +10,6 @@ export {
   renderTagPickerButton_unstable,
   tagPickerButtonClassNames,
   useTagPickerButtonStyles_unstable,
+  useTagPickerButtonBase_unstable,
   useTagPickerButton_unstable,
 } from './components/TagPickerButton/index';

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

@@ -1,4 +1,6 @@
 export type {
+  TagPickerControlBaseProps,
+  TagPickerControlBaseState,
   TagPickerControlCSSProperties,
   TagPickerControlInternalSlots,
   TagPickerControlProps,
@@ -12,5 +14,6 @@ export {
   tagPickerControlAsideWidthToken,
   tagPickerControlClassNames,
   useTagPickerControlStyles_unstable,
+  useTagPickerControlBase_unstable,
   useTagPickerControl_unstable,
 } from './components/TagPickerControl/index';

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

@@ -1,8 +1,15 @@
-export type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './components/TagPickerGroup/index';
+export type {
+  TagPickerGroupBaseProps,
+  TagPickerGroupBaseState,
+  TagPickerGroupProps,
+  TagPickerGroupSlots,
+  TagPickerGroupState,
+} from './components/TagPickerGroup/index';
 export {
   TagPickerGroup,
   renderTagPickerGroup_unstable,
   tagPickerGroupClassNames,
   useTagPickerGroupStyles_unstable,
+  useTagPickerGroupBase_unstable,
   useTagPickerGroup_unstable,
 } from './components/TagPickerGroup/index';

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

@@ -1,8 +1,15 @@
-export type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './components/TagPickerInput/index';
+export type {
+  TagPickerInputBaseProps,
+  TagPickerInputBaseState,
+  TagPickerInputProps,
+  TagPickerInputSlots,
+  TagPickerInputState,
+} from './components/TagPickerInput/index';
 export {
   TagPickerInput,
   renderTagPickerInput_unstable,
   tagPickerInputClassNames,
   useTagPickerInputStyles_unstable,
+  useTagPickerInputBase_unstable,
   useTagPickerInput_unstable,
 } from './components/TagPickerInput/index';

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

@@ -106,3 +106,13 @@ export type TagPickerContextValues = {
   activeDescendant: ActiveDescendantContextValue;
   listbox: ListboxContextValue;
 };
+
+/**
+ * TagPicker Base Props - omits design-only props
+ */
+export type TagPickerBaseProps = Omit<TagPickerProps, 'size' | 'appearance'>;
+
+/**
+ * TagPicker Base State - omits design-only state
+ */
+export type TagPickerBaseState = Omit<TagPickerState, 'size' | 'appearance'>;

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

@@ -1,5 +1,7 @@
 export { TagPicker } from './TagPicker';
 export type {
+  TagPickerBaseProps,
+  TagPickerBaseState,
   TagPickerContextValues,
   TagPickerOnOpenChangeData,
   TagPickerOnOptionSelectData,
@@ -9,4 +11,4 @@ export type {
   TagPickerState,
 } from './TagPicker.types';
 export { renderTagPicker_unstable } from './renderTagPicker';
-export { useTagPicker_unstable } from './useTagPicker';
+export { useTagPickerBase_unstable, useTagPicker_unstable } from './useTagPicker';

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

@@ -3,14 +3,19 @@
 import * as React from 'react';
 import { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
 import type {
+  TagPickerBaseProps,
+  TagPickerBaseState,
   TagPickerOnOpenChangeData,
   TagPickerOnOptionSelectData,
   TagPickerProps,
   TagPickerState,
 } from './TagPicker.types';
 import { optionClassNames } from '@fluentui/react-combobox';
-import type { PositioningShorthandValue } from '@fluentui/react-positioning';
-import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
+import {
+  type PositioningShorthandValue,
+  resolvePositioningShorthand,
+  usePositioning,
+} from '@fluentui/react-positioning';
 import { useActiveDescendant } from '@fluentui/react-aria';
 import { useComboboxBaseState } from '@fluentui/react-combobox';
 
@@ -26,11 +31,27 @@ const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after
  * @param props - props from this instance of Picker
  */
 export const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => {
+  const { size = 'medium', appearance = 'outline', ...baseProps } = props;
+  const state = useTagPickerBase_unstable(baseProps);
+
+  return {
+    ...state,
+    size,
+    appearance,
+  };
+};
+
+/**
+ * Create the base state required to render TagPicker, without design-only props.
+ *
+ * @param props - props from this instance of TagPicker (without size, appearance)
+ */
+export const useTagPickerBase_unstable = (props: TagPickerBaseProps): TagPickerBaseState => {
   const popoverId = useId('picker-listbox');
   const triggerInnerRef = React.useRef<HTMLInputElement | HTMLButtonElement>(null);
   const secondaryActionRef = React.useRef<HTMLSpanElement>(null);
   const tagPickerGroupRef = React.useRef<HTMLDivElement>(null);
-  const { positioning, size = 'medium', inline = false, noPopover = false, disableAutoFocus } = props;
+  const { positioning, inline = false, noPopover = false, disableAutoFocus } = props;
 
   const { targetRef, containerRef } = usePositioning({
     position: 'below' as const,
@@ -87,15 +108,13 @@ export const useTagPicker_unstable = (props: TagPickerProps): TagPickerState =>
     secondaryActionRef,
     tagPickerGroupRef,
     targetRef,
-    size,
     inline,
     open: comboboxState.open,
     mountNode: comboboxState.mountNode,
     onOptionClick: useEventCallback(event => {
       comboboxState.onOptionClick(event);
       comboboxState.setOpen(event, false);
     }),
-    appearance: comboboxState.appearance,
     clearSelection: comboboxState.clearSelection,
     getOptionById: comboboxState.getOptionById,
     getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,