@fluentui/react-tag-picker 9.10.0 → 9.10.2

package/CHANGELOG.md

@@ -1,12 +1,48 @@
 # Change Log - @fluentui/react-tag-picker
 
-This log was last generated on Wed, 15 Jul 2026 14:10:09 GMT and should not be manually modified.
+<!-- This log was last generated on Tue, 11 Aug 2026 17:16:02 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.10.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.10.2)
+
+Tue, 11 Aug 2026 17:16:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.10.1..@fluentui/react-tag-picker_v9.10.2)
+
+### Patches
+
+- fix: avoid headless bundle size regression from #36275 ([PR #36497](https://github.com/microsoft/fluentui/pull/36497) by dmytrokirpa@microsoft.com)
+- fix: omit the default TagPicker expand icon from headless state ([PR #36503](https://github.com/microsoft/fluentui/pull/36503) by vgenaev@gmail.com)
+- Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.9 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-aria to v9.17.14 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-combobox to v9.17.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-field to v9.5.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-portal to v9.8.15 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-positioning to v9.23.1 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.17 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tags to v9.9.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.10.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.10.1)
+
+Tue, 04 Aug 2026 10:12:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.10.0..@fluentui/react-tag-picker_v9.10.1)
+
+### Patches
+
+- fix: allow base states in TagPicker render functions ([PR #36443](https://github.com/microsoft/fluentui/pull/36443) by vgenaev@gmail.com)
+- Bump @fluentui/react-combobox to v9.17.4 ([PR #36453](https://github.com/microsoft/fluentui/pull/36453) by beachball)
+- Bump @fluentui/react-positioning to v9.23.0 ([PR #36453](https://github.com/microsoft/fluentui/pull/36453) by beachball)
+- Bump @fluentui/react-tags to v9.9.3 ([PR #36453](https://github.com/microsoft/fluentui/pull/36453) by beachball)
+
 ## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.10.0)
 
-Wed, 15 Jul 2026 14:10:09 GMT 
+Wed, 15 Jul 2026 14:10:41 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.9.0..@fluentui/react-tag-picker_v9.10.0)
 
 ### Minor changes

package/dist/index.d.cts

@@ -0,0 +1,570 @@
+import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
+import type { ComboboxBaseState } from '@fluentui/react-combobox';
+import type { ComboboxProps } from '@fluentui/react-combobox';
+import type { ComboboxSlots } from '@fluentui/react-combobox';
+import type { ComboboxState } from '@fluentui/react-combobox';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
+import type { DropdownProps } from '@fluentui/react-combobox';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
+import type { ExtractSlotProps } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import type { Listbox } from '@fluentui/react-combobox';
+import type { ListboxContextValue } from '@fluentui/react-combobox';
+import type { OptionGroupProps } from '@fluentui/react-combobox';
+import type { OptionGroupSlots } from '@fluentui/react-combobox';
+import type { OptionGroupState } from '@fluentui/react-combobox';
+import type { OptionSlots } from '@fluentui/react-combobox';
+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';
+
+/**
+ * Render the final JSX of Picker
+ */
+export declare const renderTagPicker_unstable: (state: TagPickerState, contexts: TagPickerContextValues) => JSXElement;
+
+/**
+ * Render the final JSX of PickerButton
+ */
+export declare const renderTagPickerButton_unstable: (state: TagPickerButtonBaseState) => JSXElement;
+
+/**
+ * Render the final JSX of PickerControl
+ */
+export declare const renderTagPickerControl_unstable: (state: TagPickerControlBaseState) => JSXElement;
+
+export declare function renderTagPickerGroup_unstable(state: TagPickerGroupBaseState, contexts: TagGroupContextValues): JSXElement | null;
+
+/**
+ * Render the final JSX of TagPickerInput
+ */
+export declare const renderTagPickerInput_unstable: (state: TagPickerInputBaseState) => JSXElement;
+
+/**
+ * Render the final JSX of TagPickerList
+ */
+export declare const renderTagPickerList_unstable: (state: TagPickerListState) => JSXElement;
+
+/**
+ * Render the final JSX of TagPickerOption
+ */
+export declare const renderTagPickerOption_unstable: (state: TagPickerOptionState) => JSXElement;
+
+/**
+ * Render the final JSX of TagPickerOptionGroup
+ */
+export declare const renderTagPickerOptionGroup: (state: TagPickerOptionGroupState) => JSXElement;
+
+/**
+ * TagPicker component -
+ * A TagPicker is a composite component that allows users to pick tags from a list of options.
+ */
+export declare const TagPicker: React_2.FC<TagPickerProps>;
+
+/**
+ * TagPicker Base Props - omits the presentation-related props that the base hook does not handle:
+ * the floating-ui `positioning` prop (the styled {@link TagPickerProps} re-introduces it via
+ * `usePositioning`) as well as `size`, `appearance` and `inline` (layered on by the styled
+ * {@link useTagPicker_unstable} hook).
+ */
+export declare type TagPickerBaseProps = DistributiveOmit<TagPickerProps, 'positioning' | 'size' | 'appearance' | 'inline'>;
+
+/**
+ * TagPicker Base State - the state produced by the base hook, which does not interact with the
+ * `size`, `appearance` and `inline` props. These are layered on by the styled
+ * {@link useTagPicker_unstable} hook.
+ */
+export declare type TagPickerBaseState = Omit<TagPickerState, 'size' | 'appearance' | 'inline'>;
+
+/**
+ * TagPickerButton component -
+ * A TagPickerButton is an alternative to TagPickerInput that does not include an input field.
+ */
+export declare const TagPickerButton: ForwardRefComponent<TagPickerButtonProps>;
+
+/**
+ * TagPickerButton Base Props - omits design-only props
+ */
+export declare type TagPickerButtonBaseProps = DistributiveOmit<TagPickerButtonProps, 'size' | 'appearance'>;
+
+/**
+ * TagPickerButton Base State - omits design-only state
+ */
+export declare type TagPickerButtonBaseState = DistributiveOmit<TagPickerButtonState, 'size'>;
+
+export declare const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots>;
+
+/**
+ * PickerButton Props
+ */
+export declare type TagPickerButtonProps = ComponentProps<TagPickerButtonSlots> & Pick<DropdownProps, 'size' | 'appearance'> & {
+    disabled?: boolean;
+};
+
+export declare type TagPickerButtonSlots = {
+    root: Slot<'button'>;
+};
+
+/**
+ * State used in rendering PickerButton
+ */
+export declare type TagPickerButtonState = ComponentState<TagPickerButtonSlots> & Pick<TagPickerContextValue, 'size'> & {
+    hasSelectedOption: boolean;
+};
+
+export declare const TagPickerContextProvider: React_2.Provider<TagPickerContextValue | undefined> & React_2.FC<React_2.ProviderProps<TagPickerContextValue | undefined>>;
+
+export declare interface TagPickerContextValue extends Pick<ComboboxBaseState, 'open' | 'clearSelection' | 'getOptionById' | 'selectedOptions' | 'selectOption' | 'setHasFocus' | 'setOpen' | 'setValue' | 'value' | 'appearance' | 'disabled'> {
+    triggerRef: React_2.RefObject<HTMLInputElement | HTMLButtonElement | null>;
+    popoverRef: React_2.RefObject<HTMLDivElement | null>;
+    popoverId: string;
+    targetRef: React_2.RefObject<HTMLDivElement | null>;
+    secondaryActionRef: React_2.RefObject<HTMLSpanElement | null>;
+    tagPickerGroupRef: React_2.RefObject<HTMLDivElement | null>;
+    size: TagPickerSize;
+    noPopover?: boolean;
+}
+
+export declare type TagPickerContextValues = {
+    picker: TagPickerContextValue;
+    activeDescendant: ActiveDescendantContextValue;
+    listbox: ListboxContextValue;
+};
+
+/**
+ * TagPickerControl component -
+ * A TagPickerControl is a composite component that controls actions and state for a TagPicker.
+ */
+export declare const TagPickerControl: ForwardRefComponent<TagPickerControlProps>;
+
+/**
+ * TagPickerControl Base State - omits design-only state derived from picker context.
+ */
+export declare type TagPickerControlBaseState = DistributiveOmit<TagPickerControlState, 'size' | 'appearance'>;
+
+export declare const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots & TagPickerControlInternalSlots>;
+
+declare type TagPickerControlCSSProperties = React_2.CSSProperties & {
+    '--fui-TagPickerControl-aside-width'?: string | number;
+};
+
+export declare type TagPickerControlInternalSlots = {
+    aside?: NonNullable<Slot<'span'>>;
+};
+
+/**
+ * PickerControl Props
+ */
+export declare type TagPickerControlProps = ComponentProps<Partial<TagPickerControlSlots>>;
+
+export declare type TagPickerControlSlots = {
+    root: Slot<ExtractSlotProps<Slot<'div'> & {
+        style?: TagPickerControlCSSProperties;
+    }>>;
+    /**
+     * A secondary action should be a button-like element to be rendered right after
+     * the trigger responsible for opening/closing the tag picker popover.
+     */
+    secondaryAction: Slot<'span'>;
+} & Pick<ComboboxSlots, 'expandIcon'>;
+
+/**
+ * State used in rendering PickerControl
+ */
+export declare type TagPickerControlState = ComponentState<TagPickerControlSlots & TagPickerControlInternalSlots> & Pick<TagPickerContextValue, 'size' | 'appearance' | 'disabled'> & {
+    invalid: boolean;
+};
+
+/**
+ * TagPickerGroup component -
+ * A TagPickerGroup is a composite component that allows users to group tags together.
+ */
+export declare const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps>;
+
+/**
+ * TagPickerGroup Base State - omits design-only state.
+ */
+export declare type TagPickerGroupBaseState = TagGroupBaseState & {
+    hasSelectedOptions: boolean;
+};
+
+export declare const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots>;
+
+/**
+ * TagPickerGroup Props
+ */
+export declare type TagPickerGroupProps = ComponentProps<TagPickerGroupSlots>;
+
+export declare type TagPickerGroupSlots = TagGroupSlots;
+
+/**
+ * State used in rendering TagPickerGroup
+ */
+export declare type TagPickerGroupState = TagGroupState & {
+    hasSelectedOptions: boolean;
+};
+
+/**
+ * TagPickerInput component -
+ * A TagPickerInput is a composite component that allows users to query tags.
+ */
+export declare const TagPickerInput: ForwardRefComponent<TagPickerInputProps>;
+
+/**
+ * TagPickerInput Base Props - omits design-only props
+ */
+export declare type TagPickerInputBaseProps = DistributiveOmit<TagPickerInputProps, 'appearance'>;
+
+/**
+ * TagPickerInput Base State - omits design-only state
+ */
+export declare type TagPickerInputBaseState = DistributiveOmit<TagPickerInputState, 'size'>;
+
+export declare const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots>;
+
+/**
+ * TagPickerInput Props
+ */
+export declare type TagPickerInputProps = Omit<ComponentProps<Partial<TagPickerInputSlots>>, 'children' | 'size' | 'defaultValue'> & Pick<ComboboxProps, 'clearable' | 'appearance'> & {
+    disabled?: boolean;
+    value?: string;
+};
+
+export declare type TagPickerInputSlots = {
+    root: NonNullable<Slot<'input'>>;
+};
+
+/**
+ * State used in rendering TagPickerInput
+ */
+export declare type TagPickerInputState = ComponentState<TagPickerInputSlots> & Pick<TagPickerContextValue, 'size' | 'disabled'>;
+
+/**
+ * TagPickerList component -
+ * A TagPickerList is a composite component that allows users to display a list of tag options to be selected.
+ */
+export declare const TagPickerList: ForwardRefComponent<TagPickerListProps>;
+
+export declare const tagPickerListClassNames: SlotClassNames<TagPickerListSlots>;
+
+/**
+ * TagPickerList Props
+ */
+export declare type TagPickerListProps = ComponentProps<TagPickerListSlots> & {
+    /**
+     * @deprecated TagPickerList is always rendered within a TagPicker which manages active descendant focus.
+     * This prop has no effect.
+     */
+    disableAutoFocus?: boolean;
+};
+
+export declare type TagPickerListSlots = {
+    root: Slot<typeof Listbox>;
+};
+
+/**
+ * State used in rendering TagPickerList
+ */
+export declare type TagPickerListState = ComponentState<TagPickerListSlots> & Pick<TagPickerContextValue, 'open'>;
+
+export declare type TagPickerOnOpenChangeData = {
+    open: boolean;
+} & (EventData<'click', React_2.MouseEvent<HTMLDivElement>> | EventData<'keydown', React_2.KeyboardEvent<HTMLDivElement>>);
+
+/**
+ * Event data for the `onOptionSelect` event.
+ *
+ * * value - The value of the selected option that triggered the event
+ * * selectedOptions - The list of selected options
+ */
+export declare type TagPickerOnOptionSelectData = {
+    value: string;
+    selectedOptions: string[];
+} & (EventData<'click', React_2.MouseEvent<HTMLDivElement>> | EventData<'keydown', React_2.KeyboardEvent<HTMLDivElement>>);
+
+/**
+ * TagPickerOption component -
+ * A TagPickerOption is a composite component that allows users to select tags.
+ */
+export declare const TagPickerOption: ForwardRefComponent<TagPickerOptionProps>;
+
+export declare const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots>;
+
+/**
+ * TagPickerOptionGroup component -
+ * A TagPickerOptionGroup is a composite component that allows users to group TagPickerOptions.
+ */
+export declare const TagPickerOptionGroup: ForwardRefComponent<TagPickerOptionGroupProps>;
+
+export declare const tagPickerOptionGroupClassNames: SlotClassNames<TagPickerOptionGroupSlots>;
+
+/**
+ * TagPickerOptionGroup Props
+ */
+export declare type TagPickerOptionGroupProps = OptionGroupProps;
+
+export declare type TagPickerOptionGroupSlots = OptionGroupSlots;
+
+/**
+ * State used in rendering TagPickerOptionGroup
+ */
+export declare type TagPickerOptionGroupState = OptionGroupState;
+
+/**
+ * TagPickerOption Props
+ */
+export declare type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {
+    value: string;
+} & ({
+    /**
+     * An optional override the string value of the Option's display text,
+     * defaulting to the Option's child content.
+     * This is used as the Dropdown button's or Combobox input's value when the option is selected,
+     * and as the comparison for type-to-find keyboard functionality.
+     */
+    text?: string;
+    children: string;
+} | {
+    /**
+     * The string value of the Option's display text when the Option's children are not a string.
+     * This is used as the Dropdown button's or Combobox input's value when the option is selected,
+     * and as the comparison for type-to-find keyboard functionality.
+     */
+    text: string;
+    children?: React_2.ReactNode;
+});
+
+export declare type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {
+    media?: Slot<'div'>;
+    secondaryContent?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering TagPickerOption
+ */
+export declare type TagPickerOptionState = ComponentState<TagPickerOptionSlots> & Pick<OptionState, 'components' | 'root'>;
+
+/**
+ * Picker Props
+ */
+export declare type TagPickerProps = ComponentProps<TagPickerSlots> & Pick<ComboboxProps, 'positioning' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open' | 'disableAutoFocus'> & Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {
+    /**
+     * By default, when a single children is provided, the TagPicker will assume that the children
+     * is a popover. By setting this prop to true, the children will be treated as a trigger instead.
+     *
+     * @default false
+     */
+    noPopover?: boolean;
+    onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;
+    onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;
+    /**
+     * Can contain two children including a trigger and a popover
+     */
+    children: [JSXElement, JSXElement | undefined | false] | JSXElement;
+    /**
+     * TagPickers are rendered out of DOM order on `document.body` by default,
+     * use this to render the popover in DOM order
+     *
+     * @default false
+     */
+    inline?: boolean;
+};
+
+export declare type TagPickerSize = 'medium' | 'large' | 'extra-large';
+
+export declare type TagPickerSlots = {};
+
+/**
+ * State used in rendering Picker
+ */
+export declare type TagPickerState = ComponentState<TagPickerSlots> & Pick<ComboboxState, 'open' | 'activeDescendantController' | 'mountNode' | 'onOptionClick' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'value' | 'setValue' | 'setOpen' | 'setHasFocus' | 'appearance' | 'clearSelection' | 'getOptionById' | 'getOptionsMatchingValue' | 'disabled'> & Pick<TagPickerContextValue, 'triggerRef' | 'secondaryActionRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'tagPickerGroupRef' | 'size' | 'noPopover'> & {
+    trigger: React_2.ReactNode;
+    popover?: React_2.ReactNode;
+    inline: boolean;
+};
+
+/**
+ * Create the state required to render Picker.
+ *
+ * The returned state can be modified with hooks such as usePickerStyles_unstable,
+ * before being passed to renderPicker_unstable.
+ *
+ * @param props - props from this instance of Picker
+ */
+export declare const useTagPicker_unstable: (props: TagPickerProps) => TagPickerState;
+
+/**
+ * Create the base state required to render TagPicker, without floating-ui positioning.
+ * @param props - props from this instance of TagPicker (without `positioning`)
+ */
+export declare const useTagPickerBase_unstable: (props: TagPickerBaseProps) => TagPickerBaseState;
+
+/**
+ * Create the state required to render TagPickerButton.
+ *
+ * The returned state can be modified with hooks such as useTagPickerButtonStyles_unstable,
+ * before being passed to renderTagPickerButton_unstable.
+ *
+ * @param props - props from this instance of TagPickerButton
+ * @param ref - reference to root HTMLButtonElement of TagPickerButton
+ */
+export declare const useTagPickerButton_unstable: (props: TagPickerButtonProps, ref: React_2.Ref<HTMLButtonElement>) => TagPickerButtonState;
+
+/**
+ * Create the base state required to render TagPickerButton, without design-only props.
+ *
+ * @param props - props from this instance of TagPickerButton (without size, appearance)
+ * @param ref - reference to root HTMLButtonElement of TagPickerButton
+ */
+export declare const useTagPickerButtonBase_unstable: (props: TagPickerButtonBaseProps, ref: React_2.Ref<HTMLButtonElement>) => TagPickerButtonBaseState;
+
+/**
+ * Apply styling to the PickerButton slots based on the state
+ */
+export declare const useTagPickerButtonStyles_unstable: (state: TagPickerButtonState) => TagPickerButtonState;
+
+export declare const useTagPickerContext_unstable: <T>(selector: ContextSelector<TagPickerContextValue, T>) => T;
+
+export declare function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues;
+
+/**
+ * Create the state required to render PickerControl.
+ *
+ * The returned state can be modified with hooks such as usePickerControlStyles_unstable,
+ * before being passed to renderPickerControl_unstable.
+ *
+ * @param props - props from this instance of PickerControl
+ * @param ref - reference to root HTMLDivElement of PickerControl
+ */
+export declare const useTagPickerControl_unstable: (props: TagPickerControlProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerControlState;
+
+/**
+ * Create the base state required to render TagPickerControl, without design-only state.
+ *
+ * @param props - props from this instance of TagPickerControl
+ * @param ref - reference to root HTMLDivElement of TagPickerControl
+ */
+export declare const useTagPickerControlBase_unstable: (props: TagPickerControlProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerControlBaseState;
+
+/**
+ * Apply styling to the PickerControl slots based on the state
+ */
+export declare const useTagPickerControlStyles_unstable: (state: TagPickerControlState) => TagPickerControlState;
+
+export declare function useTagPickerFilter({ filter: filterOverride, noOptionsElement, renderOption, query, options, }: UseTagPickerFilterConfig): JSXElement[];
+
+declare type UseTagPickerFilterConfig = {
+    query: string;
+    options: string[];
+    /**
+     * Provides a custom filter for the option.
+     * By default the filter will check if the option includes the query.
+     */
+    filter?: (option: string, index: number) => boolean;
+    /** Provides an element to be displayed when there are no options. */
+    noOptionsElement: JSXElement;
+    /** Provides a custom render for the option. */
+    renderOption?: (option: string) => JSXElement;
+};
+
+/**
+ * Create the state required to render TagPickerGroup.
+ *
+ * The returned state can be modified with hooks such as usePickerTagGroupStyles_unstable,
+ * before being passed to renderPickerTagGroup_unstable.
+ *
+ * @param props - props from this instance of TagPickerGroup
+ * @param ref - reference to root HTMLDivElement of TagPickerGroup
+ */
+export declare const useTagPickerGroup_unstable: (props: TagPickerGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerGroupState;
+
+/**
+ * Apply styling to the TagPickerGroup slots based on the state
+ */
+export declare const useTagPickerGroupStyles_unstable: (state: TagPickerGroupState) => TagPickerGroupState;
+
+/**
+ * Create the state required to render TagPickerInput.
+ *
+ * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,
+ * before being passed to renderTagPickerInput_unstable.
+ *
+ * @param props - props from this instance of TagPickerInput
+ * @param ref - reference to root HTMLInputElement of TagPickerInput
+ */
+export declare const useTagPickerInput_unstable: (props: TagPickerInputProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputState;
+
+/**
+ * Create the base state required to render TagPickerInput, without design-only props.
+ * The Base hook omits Tabster-driven focus management; consumers can re-add it via the
+ * styled wrapper {@link useTagPickerInput_unstable} or by composing their own keydown handler.
+ *
+ * @param props - props from this instance of TagPickerInput (without appearance)
+ * @param ref - reference to root HTMLInputElement of TagPickerInput
+ */
+export declare const useTagPickerInputBase_unstable: (props: TagPickerInputBaseProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputBaseState;
+
+/**
+ * Apply styling to the TagPickerInput slots based on the state
+ */
+export declare const useTagPickerInputStyles_unstable: (state: TagPickerInputState) => TagPickerInputState;
+
+/**
+ * Create the state required to render TagPickerList.
+ *
+ * The returned state can be modified with hooks such as useTagPickerListStyles_unstable,
+ * before being passed to renderTagPickerList_unstable.
+ *
+ * @param props - props from this instance of TagPickerList
+ * @param ref - reference to root HTMLDivElement of TagPickerList
+ */
+export declare const useTagPickerList_unstable: (props: TagPickerListProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerListState;
+
+/**
+ * Apply styling to the TagPickerList slots based on the state
+ */
+export declare const useTagPickerListStyles_unstable: (state: TagPickerListState) => TagPickerListState;
+
+/**
+ * Create the state required to render TagPickerOption.
+ *
+ * The returned state can be modified with hooks such as useTagPickerOptionStyles_unstable,
+ * before being passed to renderTagPickerOption_unstable.
+ *
+ * @param props - props from this instance of TagPickerOption
+ * @param ref - reference to root HTMLDivElement of TagPickerOption
+ */
+export declare const useTagPickerOption_unstable: (props: TagPickerOptionProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerOptionState;
+
+/**
+ * Create the state required to render TagPickerOptionGroup.
+ *
+ * The returned state can be modified with hooks such as useTagPickerOptionGroupStyles_unstable,
+ * before being passed to renderTagPickerOptionGroup_unstable.
+ *
+ * @param props - props from this instance of TagPickerOptionGroup
+ * @param ref - reference to root HTMLDivElement of TagPickerOptionGroup
+ */
+export declare const useTagPickerOptionGroup: (props: TagPickerOptionGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerOptionGroupState;
+
+/**
+ * Apply styling to the TagPickerOptionGroup slots based on the state
+ */
+export declare const useTagPickerOptionGroupStyles: (state: TagPickerOptionGroupState) => TagPickerOptionGroupState;
+
+/**
+ * Apply styling to the TagPickerOption slots based on the state
+ */
+export declare const useTagPickerOptionStyles_unstable: (state: TagPickerOptionState) => TagPickerOptionState;
+
+export { }

package/dist/index.d.ts

@@ -23,6 +23,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';
@@ -35,19 +36,19 @@ export declare const renderTagPicker_unstable: (state: TagPickerState, contexts:
 /**
  * Render the final JSX of PickerButton
  */
-export declare const renderTagPickerButton_unstable: (state: TagPickerButtonState) => JSXElement;
+export declare const renderTagPickerButton_unstable: (state: TagPickerButtonBaseState) => JSXElement;
 
 /**
  * Render the final JSX of PickerControl
  */
-export declare const renderTagPickerControl_unstable: (state: TagPickerControlState) => JSXElement;
+export declare const renderTagPickerControl_unstable: (state: TagPickerControlBaseState) => JSXElement;
 
-export declare function renderTagPickerGroup_unstable(state: TagPickerGroupState, contexts: TagGroupContextValues): JSXElement | null;
+export declare function renderTagPickerGroup_unstable(state: TagPickerGroupBaseState, contexts: TagGroupContextValues): JSXElement | null;
 
 /**
  * Render the final JSX of TagPickerInput
  */
-export declare const renderTagPickerInput_unstable: (state: TagPickerInputState) => JSXElement;
+export declare const renderTagPickerInput_unstable: (state: TagPickerInputBaseState) => JSXElement;
 
 /**
  * Render the final JSX of TagPickerList
@@ -190,6 +191,13 @@ export declare type TagPickerControlState = ComponentState<TagPickerControlSlots
  */
 export declare const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps>;
 
+/**
+ * TagPickerGroup Base State - omits design-only state.
+ */
+export declare type TagPickerGroupBaseState = TagGroupBaseState & {
+    hasSelectedOptions: boolean;
+};
+
 export declare const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots>;
 
 /**

package/lib/TagPicker.js

@@ -1 +1 @@
-export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable, useTagPickerBase_unstable, useTagPickerContextValues } from './components/TagPicker/index';
+export { TagPicker, renderTagPicker_unstable, useTagPicker_unstable, useTagPickerBase_unstable, useTagPickerContextValues } from "./components/TagPicker/index.js";

package/lib/TagPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TagPicker.ts"],"sourcesContent":["export type {\n  TagPickerBaseProps,\n  TagPickerBaseState,\n  TagPickerContextValues,\n  TagPickerOnOpenChangeData,\n  TagPickerOnOptionSelectData,\n  TagPickerProps,\n  TagPickerSize,\n  TagPickerSlots,\n  TagPickerState,\n} from './components/TagPicker/index';\nexport {\n  TagPicker,\n  renderTagPicker_unstable,\n  useTagPicker_unstable,\n  useTagPickerBase_unstable,\n  useTagPickerContextValues,\n} from './components/TagPicker/index';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable","useTagPickerContextValues"],"mappings":"AAWA,SACEA,SAAS,EACTC,wBAAwB,EACxBC,qBAAqB,EACrBC,yBAAyB,EACzBC,yBAAyB,QACpB,+BAA+B"}
+{"version":3,"sources":["../src/TagPicker.ts"],"sourcesContent":["export type {\n  TagPickerBaseProps,\n  TagPickerBaseState,\n  TagPickerContextValues,\n  TagPickerOnOpenChangeData,\n  TagPickerOnOptionSelectData,\n  TagPickerProps,\n  TagPickerSize,\n  TagPickerSlots,\n  TagPickerState,\n} from './components/TagPicker/index';\nexport {\n  TagPicker,\n  renderTagPicker_unstable,\n  useTagPicker_unstable,\n  useTagPickerBase_unstable,\n  useTagPickerContextValues,\n} from './components/TagPicker/index';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable","useTagPickerContextValues"],"mappings":"AAWA,SACEA,SAAS,EACTC,wBAAwB,EACxBC,qBAAqB,EACrBC,yBAAyB,EACzBC,yBAAyB,QACpB,kCAA+B"}