@fluentui/react-tag-picker 9.8.8 → 9.10.0

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @fluentui/react-tag-picker
 
-This log was last generated on Wed, 27 May 2026 11:18:30 GMT and should not be manually modified.
+This log was last generated on Wed, 15 Jul 2026 14:10:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.10.0)
+
+Wed, 15 Jul 2026 14:10:09 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
+
+- feat: export useTagPickerContextValues and TagPickerControlInternalSlots for headless composition ([PR #36353](https://github.com/microsoft/fluentui/pull/36353) by vgenaev@gmail.com)
+
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.9.0)
+
+Wed, 24 Jun 2026 11:10:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.8.8..@fluentui/react-tag-picker_v9.9.0)
+
+### Minor changes
+
+- feat: add base hooks/types for headless composition ([PR #36260](https://github.com/microsoft/fluentui/pull/36260) by viktorgenaev@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-portal to v9.8.14 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-aria to v9.17.13 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-combobox to v9.17.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-tags to v9.9.2 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.18 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-positioning to v9.22.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+
 ## [9.8.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.8.8)
 
-Wed, 27 May 2026 11:18:30 GMT 
+Wed, 27 May 2026 11:18:57 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.8.7..@fluentui/react-tag-picker_v9.8.8)
 
 ### Patches

package/dist/index.d.ts

@@ -6,6 +6,7 @@ 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';
@@ -69,12 +70,37 @@ export declare const renderTagPickerOptionGroup: (state: TagPickerOptionGroupSta
  */
 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>;
 
 /**
@@ -95,6 +121,8 @@ export declare type TagPickerButtonState = ComponentState<TagPickerButtonSlots>
     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>;
@@ -118,13 +146,18 @@ export declare type TagPickerContextValues = {
  */
 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;
 };
 
-declare type TagPickerControlInternalSlots = {
+export declare type TagPickerControlInternalSlots = {
     aside?: NonNullable<Slot<'span'>>;
 };
 
@@ -179,6 +212,16 @@ export declare type TagPickerGroupState = TagGroupState & {
  */
 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>;
 
 /**
@@ -353,16 +396,30 @@ export declare type TagPickerState = ComponentState<TagPickerSlots> & Pick<Combo
 export declare const useTagPicker_unstable: (props: TagPickerProps) => TagPickerState;
 
 /**
- * Create the state required to render PickerButton.
+ * 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 usePickerButtonStyles_unstable,
- * before being passed to renderPickerButton_unstable.
+ * 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 PickerButton
- * @param ref - reference to root HTMLDivElement of PickerButton
+ * @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
  */
@@ -370,6 +427,8 @@ export declare const useTagPickerButtonStyles_unstable: (state: TagPickerButtonS
 
 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.
  *
@@ -381,6 +440,14 @@ export declare const useTagPickerContext_unstable: <T>(selector: ContextSelector
  */
 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
  */
@@ -425,9 +492,19 @@ export declare const useTagPickerGroupStyles_unstable: (state: TagPickerGroupSta
  * before being passed to renderTagPickerInput_unstable.
  *
  * @param props - props from this instance of TagPickerInput
- * @param ref - reference to root HTMLDivElement 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 useTagPickerInput_unstable: (propsArg: TagPickerInputProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputState;
+export declare const useTagPickerInputBase_unstable: (props: TagPickerInputBaseProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputBaseState;
 
 /**
  * Apply styling to the TagPickerInput slots based on the state

package/lib/TagPicker.js

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

package/lib/TagPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TagPicker.ts"],"sourcesContent":["export type {\n  TagPickerContextValues,\n  TagPickerOnOpenChangeData,\n  TagPickerOnOptionSelectData,\n  TagPickerProps,\n  TagPickerSize,\n  TagPickerSlots,\n  TagPickerState,\n} from './components/TagPicker/index';\nexport { TagPicker, renderTagPicker_unstable, useTagPicker_unstable } from './components/TagPicker/index';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable"],"mappings":"AASA,SAASA,SAAS,EAAEC,wBAAwB,EAAEC,qBAAqB,QAAQ,+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,+BAA+B"}

package/lib/TagPickerButton.js

@@ -1 +1 @@
-export { TagPickerButton, renderTagPickerButton_unstable, tagPickerButtonClassNames, useTagPickerButtonStyles_unstable, useTagPickerButton_unstable } from './components/TagPickerButton/index';
+export { TagPickerButton, renderTagPickerButton_unstable, tagPickerButtonClassNames, useTagPickerButtonStyles_unstable, useTagPickerButton_unstable, useTagPickerButtonBase_unstable } from './components/TagPickerButton/index';

package/lib/TagPickerButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TagPickerButton.ts"],"sourcesContent":["export type {\n  TagPickerButtonProps,\n  TagPickerButtonSlots,\n  TagPickerButtonState,\n} from './components/TagPickerButton/index';\nexport {\n  TagPickerButton,\n  renderTagPickerButton_unstable,\n  tagPickerButtonClassNames,\n  useTagPickerButtonStyles_unstable,\n  useTagPickerButton_unstable,\n} from './components/TagPickerButton/index';\n"],"names":["TagPickerButton","renderTagPickerButton_unstable","tagPickerButtonClassNames","useTagPickerButtonStyles_unstable","useTagPickerButton_unstable"],"mappings":"AAKA,SACEA,eAAe,EACfC,8BAA8B,EAC9BC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,QACtB,qCAAqC"}
+{"version":3,"sources":["../src/TagPickerButton.ts"],"sourcesContent":["export type {\n  TagPickerButtonBaseProps,\n  TagPickerButtonBaseState,\n  TagPickerButtonProps,\n  TagPickerButtonSlots,\n  TagPickerButtonState,\n} from './components/TagPickerButton/index';\nexport {\n  TagPickerButton,\n  renderTagPickerButton_unstable,\n  tagPickerButtonClassNames,\n  useTagPickerButtonStyles_unstable,\n  useTagPickerButton_unstable,\n  useTagPickerButtonBase_unstable,\n} from './components/TagPickerButton/index';\n"],"names":["TagPickerButton","renderTagPickerButton_unstable","tagPickerButtonClassNames","useTagPickerButtonStyles_unstable","useTagPickerButton_unstable","useTagPickerButtonBase_unstable"],"mappings":"AAOA,SACEA,eAAe,EACfC,8BAA8B,EAC9BC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,EAC3BC,+BAA+B,QAC1B,qCAAqC"}

package/lib/TagPickerControl.js

@@ -1 +1 @@
-export { TagPickerControl, iconSizes, renderTagPickerControl_unstable, tagPickerControlAsideWidthToken, tagPickerControlClassNames, useTagPickerControlStyles_unstable, useTagPickerControl_unstable } from './components/TagPickerControl/index';
+export { TagPickerControl, iconSizes, renderTagPickerControl_unstable, tagPickerControlAsideWidthToken, tagPickerControlClassNames, useTagPickerControlStyles_unstable, useTagPickerControl_unstable, useTagPickerControlBase_unstable } from './components/TagPickerControl/index';

package/lib/TagPickerControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TagPickerControl.ts"],"sourcesContent":["export type {\n  TagPickerControlCSSProperties,\n  TagPickerControlInternalSlots,\n  TagPickerControlProps,\n  TagPickerControlSlots,\n  TagPickerControlState,\n} from './components/TagPickerControl/index';\nexport {\n  TagPickerControl,\n  iconSizes,\n  renderTagPickerControl_unstable,\n  tagPickerControlAsideWidthToken,\n  tagPickerControlClassNames,\n  useTagPickerControlStyles_unstable,\n  useTagPickerControl_unstable,\n} from './components/TagPickerControl/index';\n"],"names":["TagPickerControl","iconSizes","renderTagPickerControl_unstable","tagPickerControlAsideWidthToken","tagPickerControlClassNames","useTagPickerControlStyles_unstable","useTagPickerControl_unstable"],"mappings":"AAOA,SACEA,gBAAgB,EAChBC,SAAS,EACTC,+BAA+B,EAC/BC,+BAA+B,EAC/BC,0BAA0B,EAC1BC,kCAAkC,EAClCC,4BAA4B,QACvB,sCAAsC"}
+{"version":3,"sources":["../src/TagPickerControl.ts"],"sourcesContent":["export type {\n  TagPickerControlBaseState,\n  TagPickerControlCSSProperties,\n  TagPickerControlInternalSlots,\n  TagPickerControlProps,\n  TagPickerControlSlots,\n  TagPickerControlState,\n} from './components/TagPickerControl/index';\nexport {\n  TagPickerControl,\n  iconSizes,\n  renderTagPickerControl_unstable,\n  tagPickerControlAsideWidthToken,\n  tagPickerControlClassNames,\n  useTagPickerControlStyles_unstable,\n  useTagPickerControl_unstable,\n  useTagPickerControlBase_unstable,\n} from './components/TagPickerControl/index';\n"],"names":["TagPickerControl","iconSizes","renderTagPickerControl_unstable","tagPickerControlAsideWidthToken","tagPickerControlClassNames","useTagPickerControlStyles_unstable","useTagPickerControl_unstable","useTagPickerControlBase_unstable"],"mappings":"AAQA,SACEA,gBAAgB,EAChBC,SAAS,EACTC,+BAA+B,EAC/BC,+BAA+B,EAC/BC,0BAA0B,EAC1BC,kCAAkC,EAClCC,4BAA4B,EAC5BC,gCAAgC,QAC3B,sCAAsC"}

package/lib/TagPickerInput.js

@@ -1 +1 @@
-export { TagPickerInput, renderTagPickerInput_unstable, tagPickerInputClassNames, useTagPickerInputStyles_unstable, useTagPickerInput_unstable } from './components/TagPickerInput/index';
+export { TagPickerInput, renderTagPickerInput_unstable, tagPickerInputClassNames, useTagPickerInputStyles_unstable, useTagPickerInput_unstable, useTagPickerInputBase_unstable } from './components/TagPickerInput/index';

package/lib/TagPickerInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TagPickerInput.ts"],"sourcesContent":["export type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './components/TagPickerInput/index';\nexport {\n  TagPickerInput,\n  renderTagPickerInput_unstable,\n  tagPickerInputClassNames,\n  useTagPickerInputStyles_unstable,\n  useTagPickerInput_unstable,\n} from './components/TagPickerInput/index';\n"],"names":["TagPickerInput","renderTagPickerInput_unstable","tagPickerInputClassNames","useTagPickerInputStyles_unstable","useTagPickerInput_unstable"],"mappings":"AACA,SACEA,cAAc,EACdC,6BAA6B,EAC7BC,wBAAwB,EACxBC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}
+{"version":3,"sources":["../src/TagPickerInput.ts"],"sourcesContent":["export type {\n  TagPickerInputBaseProps,\n  TagPickerInputBaseState,\n  TagPickerInputProps,\n  TagPickerInputSlots,\n  TagPickerInputState,\n} from './components/TagPickerInput/index';\nexport {\n  TagPickerInput,\n  renderTagPickerInput_unstable,\n  tagPickerInputClassNames,\n  useTagPickerInputStyles_unstable,\n  useTagPickerInput_unstable,\n  useTagPickerInputBase_unstable,\n} from './components/TagPickerInput/index';\n"],"names":["TagPickerInput","renderTagPickerInput_unstable","tagPickerInputClassNames","useTagPickerInputStyles_unstable","useTagPickerInput_unstable","useTagPickerInputBase_unstable"],"mappings":"AAOA,SACEA,cAAc,EACdC,6BAA6B,EAC7BC,wBAAwB,EACxBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,8BAA8B,QACzB,oCAAoC"}

package/lib/components/TagPicker/TagPicker.types.js

@@ -1 +1,5 @@
-export { };
+/**
+ * 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 { };

package/lib/components/TagPicker/TagPicker.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPicker/TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, JSXElement } from '@fluentui/react-utilities';\nimport type { ComboboxProps, ComboboxState, ListboxContextValue } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\n\nexport type TagPickerSlots = {};\n\nexport type TagPickerSize = 'medium' | 'large' | 'extra-large';\n\n/**\n * Event data for the `onOptionSelect` event.\n *\n * * value - The value of the selected option that triggered the event\n * * selectedOptions - The list of selected options\n */\nexport type TagPickerOnOptionSelectData = {\n  value: string;\n  selectedOptions: string[];\n} & (EventData<'click', React.MouseEvent<HTMLDivElement>> | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>);\n\nexport type TagPickerOnOpenChangeData = { open: boolean } & (\n  | EventData<'click', React.MouseEvent<HTMLDivElement>>\n  | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>\n);\n\n/**\n * Picker Props\n */\nexport type TagPickerProps = ComponentProps<TagPickerSlots> &\n  Pick<\n    ComboboxProps,\n    | 'positioning'\n    | 'disabled'\n    | 'defaultOpen'\n    | 'selectedOptions'\n    | 'defaultSelectedOptions'\n    | 'open'\n    | 'disableAutoFocus'\n  > &\n  Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {\n    /**\n     * By default, when a single children is provided, the TagPicker will assume that the children\n     * is a popover. By setting this prop to true, the children will be treated as a trigger instead.\n     *\n     * @default false\n     */\n    noPopover?: boolean;\n    onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n    onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n    /**\n     * Can contain two children including a trigger and a popover\n     */\n    children: [JSXElement, JSXElement | undefined | false] | JSXElement;\n    /**\n     * TagPickers are rendered out of DOM order on `document.body` by default,\n     * use this to render the popover in DOM order\n     *\n     * @default false\n     */\n    inline?: boolean;\n  };\n\n/**\n * State used in rendering Picker\n */\nexport type TagPickerState = ComponentState<TagPickerSlots> &\n  Pick<\n    ComboboxState,\n    | 'open'\n    | 'activeDescendantController'\n    | 'mountNode'\n    | 'onOptionClick'\n    | 'registerOption'\n    | 'selectedOptions'\n    | 'selectOption'\n    | 'value'\n    | 'setValue'\n    | 'setOpen'\n    | 'setHasFocus'\n    | 'appearance'\n    | 'clearSelection'\n    | 'getOptionById'\n    | 'getOptionsMatchingValue'\n    | 'disabled'\n  > &\n  Pick<\n    TagPickerContextValue,\n    | 'triggerRef'\n    | 'secondaryActionRef'\n    | 'popoverId'\n    | 'popoverRef'\n    | 'targetRef'\n    | 'tagPickerGroupRef'\n    | 'size'\n    | 'noPopover'\n  > & {\n    trigger: React.ReactNode;\n    popover?: React.ReactNode;\n    inline: boolean;\n  };\n\nexport type TagPickerContextValues = {\n  picker: TagPickerContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n  listbox: ListboxContextValue;\n};\n"],"names":[],"mappings":"AAuGA,WAIE"}
+{"version":3,"sources":["../src/components/TagPicker/TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n  ComponentProps,\n  ComponentState,\n  DistributiveOmit,\n  EventData,\n  EventHandler,\n  JSXElement,\n} from '@fluentui/react-utilities';\nimport type { ComboboxProps, ComboboxState, ListboxContextValue } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\n\nexport type TagPickerSlots = {};\n\nexport type TagPickerSize = 'medium' | 'large' | 'extra-large';\n\n/**\n * Event data for the `onOptionSelect` event.\n *\n * * value - The value of the selected option that triggered the event\n * * selectedOptions - The list of selected options\n */\nexport type TagPickerOnOptionSelectData = {\n  value: string;\n  selectedOptions: string[];\n} & (EventData<'click', React.MouseEvent<HTMLDivElement>> | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>);\n\nexport type TagPickerOnOpenChangeData = { open: boolean } & (\n  | EventData<'click', React.MouseEvent<HTMLDivElement>>\n  | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>\n);\n\n/**\n * Picker Props\n */\nexport type TagPickerProps = ComponentProps<TagPickerSlots> &\n  Pick<\n    ComboboxProps,\n    | 'positioning'\n    | 'disabled'\n    | 'defaultOpen'\n    | 'selectedOptions'\n    | 'defaultSelectedOptions'\n    | 'open'\n    | 'disableAutoFocus'\n  > &\n  Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {\n    /**\n     * By default, when a single children is provided, the TagPicker will assume that the children\n     * is a popover. By setting this prop to true, the children will be treated as a trigger instead.\n     *\n     * @default false\n     */\n    noPopover?: boolean;\n    onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n    onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n    /**\n     * Can contain two children including a trigger and a popover\n     */\n    children: [JSXElement, JSXElement | undefined | false] | JSXElement;\n    /**\n     * TagPickers are rendered out of DOM order on `document.body` by default,\n     * use this to render the popover in DOM order\n     *\n     * @default false\n     */\n    inline?: boolean;\n  };\n\n/**\n * State used in rendering Picker\n */\nexport type TagPickerState = ComponentState<TagPickerSlots> &\n  Pick<\n    ComboboxState,\n    | 'open'\n    | 'activeDescendantController'\n    | 'mountNode'\n    | 'onOptionClick'\n    | 'registerOption'\n    | 'selectedOptions'\n    | 'selectOption'\n    | 'value'\n    | 'setValue'\n    | 'setOpen'\n    | 'setHasFocus'\n    | 'appearance'\n    | 'clearSelection'\n    | 'getOptionById'\n    | 'getOptionsMatchingValue'\n    | 'disabled'\n  > &\n  Pick<\n    TagPickerContextValue,\n    | 'triggerRef'\n    | 'secondaryActionRef'\n    | 'popoverId'\n    | 'popoverRef'\n    | 'targetRef'\n    | 'tagPickerGroupRef'\n    | 'size'\n    | 'noPopover'\n  > & {\n    trigger: React.ReactNode;\n    popover?: React.ReactNode;\n    inline: boolean;\n  };\n\nexport type TagPickerContextValues = {\n  picker: TagPickerContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n  listbox: ListboxContextValue;\n};\n\n/**\n * TagPicker Base Props - omits the presentation-related props that the base hook does not handle:\n * the floating-ui `positioning` prop (the styled {@link TagPickerProps} re-introduces it via\n * `usePositioning`) as well as `size`, `appearance` and `inline` (layered on by the styled\n * {@link useTagPicker_unstable} hook).\n */\nexport type TagPickerBaseProps = DistributiveOmit<TagPickerProps, 'positioning' | 'size' | 'appearance' | 'inline'>;\n\n/**\n * TagPicker Base State - the state produced by the base hook, which does not interact with the\n * `size`, `appearance` and `inline` props. These are layered on by the styled\n * {@link useTagPicker_unstable} hook.\n */\nexport type TagPickerBaseState = Omit<TagPickerState, 'size' | 'appearance' | 'inline'>;\n"],"names":[],"mappings":"AA4HA;;;;CAIC,GACD,WAAwF"}

package/lib/components/TagPicker/index.js

@@ -1,3 +1,4 @@
 export { TagPicker } from './TagPicker';
 export { renderTagPicker_unstable } from './renderTagPicker';
-export { useTagPicker_unstable } from './useTagPicker';
+export { useTagPicker_unstable, useTagPickerBase_unstable } from './useTagPicker';
+export { useTagPickerContextValues } from './useTagPickerContextValues';

package/lib/components/TagPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPicker/index.ts"],"sourcesContent":["export { TagPicker } from './TagPicker';\nexport type {\n  TagPickerContextValues,\n  TagPickerOnOpenChangeData,\n  TagPickerOnOptionSelectData,\n  TagPickerProps,\n  TagPickerSize,\n  TagPickerSlots,\n  TagPickerState,\n} from './TagPicker.types';\nexport { renderTagPicker_unstable } from './renderTagPicker';\nexport { useTagPicker_unstable } from './useTagPicker';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAUxC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB"}
+{"version":3,"sources":["../src/components/TagPicker/index.ts"],"sourcesContent":["export { TagPicker } from './TagPicker';\nexport type {\n  TagPickerBaseProps,\n  TagPickerBaseState,\n  TagPickerContextValues,\n  TagPickerOnOpenChangeData,\n  TagPickerOnOptionSelectData,\n  TagPickerProps,\n  TagPickerSize,\n  TagPickerSlots,\n  TagPickerState,\n} from './TagPicker.types';\nexport { renderTagPicker_unstable } from './renderTagPicker';\nexport { useTagPicker_unstable, useTagPickerBase_unstable } from './useTagPicker';\nexport { useTagPickerContextValues } from './useTagPickerContextValues';\n"],"names":["TagPicker","renderTagPicker_unstable","useTagPicker_unstable","useTagPickerBase_unstable","useTagPickerContextValues"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAYxC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,iBAAiB;AAClF,SAASC,yBAAyB,QAAQ,8BAA8B"}

package/lib/components/TagPicker/useTagPicker.js

@@ -14,29 +14,15 @@ const fallbackPositions = [
     'before-top'
 ];
 /**
- * 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 const useTagPicker_unstable = (props)=>{
+ * Create the base state required to render TagPicker, without floating-ui positioning.
+ * @param props - props from this instance of TagPicker (without `positioning`)
+ */ export const useTagPickerBase_unstable = (props)=>{
     const popoverId = useId('picker-listbox');
     const triggerInnerRef = React.useRef(null);
     const secondaryActionRef = React.useRef(null);
     const tagPickerGroupRef = React.useRef(null);
-    const { positioning, size = 'medium', inline = false, noPopover = false, disableAutoFocus } = props;
-    const { targetRef, containerRef } = usePositioning({
-        position: 'below',
-        align: 'start',
-        offset: {
-            crossAxis: 0,
-            mainAxis: 2
-        },
-        fallbackPositions,
-        matchTargetSize: 'width',
-        ...resolvePositioningShorthand(positioning)
-    });
+    const passiveTargetRef = React.useRef(null);
+    const { noPopover = false, disableAutoFocus } = props;
     const { controller: activeDescendantController, activeParentRef, listboxRef } = useActiveDescendant({
         matchOption: (el)=>el.classList.contains(optionClassNames.root)
     });
@@ -62,8 +48,7 @@ const fallbackPositions = [
         activeDescendantController,
         disableAutoFocus,
         editable: true,
-        multiselect: true,
-        size: 'medium'
+        multiselect: true
     });
     const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);
     return {
@@ -75,19 +60,16 @@ const fallbackPositions = [
         noPopover,
         disabled: comboboxState.disabled,
         triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),
-        popoverRef: useMergedRefs(listboxRef, containerRef),
+        popoverRef: useMergedRefs(listboxRef),
         secondaryActionRef,
         tagPickerGroupRef,
-        targetRef,
-        size,
-        inline,
+        targetRef: passiveTargetRef,
         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,
@@ -114,6 +96,36 @@ const fallbackPositions = [
         value: comboboxState.value
     };
 };
+/**
+ * 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 const useTagPicker_unstable = (props)=>{
+    const { positioning, size = 'medium', appearance = 'outline', inline = false } = props;
+    const { targetRef, containerRef } = usePositioning({
+        position: 'below',
+        align: 'start',
+        offset: {
+            crossAxis: 0,
+            mainAxis: 2
+        },
+        fallbackPositions,
+        matchTargetSize: 'width',
+        ...resolvePositioningShorthand(positioning)
+    });
+    const baseState = useTagPickerBase_unstable(props);
+    return {
+        ...baseState,
+        size,
+        appearance,
+        inline,
+        targetRef,
+        popoverRef: useMergedRefs(baseState.popoverRef, containerRef)
+    };
+};
 const childrenToTriggerAndPopover = (children, noPopover)=>{
     const childrenArray = React.Children.toArray(children);
     if (process.env.NODE_ENV !== 'production') {

package/lib/components/TagPicker/useTagPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPicker/useTagPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n  TagPickerOnOpenChangeData,\n  TagPickerOnOptionSelectData,\n  TagPickerProps,\n  TagPickerState,\n} from './TagPicker.types';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n/**\n * Create the state required to render Picker.\n *\n * The returned state can be modified with hooks such as usePickerStyles_unstable,\n * before being passed to renderPicker_unstable.\n *\n * @param props - props from this instance of Picker\n */\nexport const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => {\n  const popoverId = useId('picker-listbox');\n  const triggerInnerRef = React.useRef<HTMLInputElement | HTMLButtonElement>(null);\n  const secondaryActionRef = React.useRef<HTMLSpanElement>(null);\n  const tagPickerGroupRef = React.useRef<HTMLDivElement>(null);\n  const { positioning, size = 'medium', inline = false, noPopover = false, disableAutoFocus } = props;\n\n  const { targetRef, containerRef } = usePositioning({\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    fallbackPositions,\n    matchTargetSize: 'width' as const,\n    ...resolvePositioningShorthand(positioning),\n  });\n\n  const {\n    controller: activeDescendantController,\n    activeParentRef,\n    listboxRef,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const comboboxState = useComboboxBaseState({\n    ...props,\n    onOptionSelect: useEventCallback((event, data) =>\n      props.onOptionSelect?.(event, {\n        selectedOptions: data.selectedOptions,\n        value: data.optionValue,\n        type: event.type,\n        event,\n      } as TagPickerOnOptionSelectData),\n    ),\n    onOpenChange: useEventCallback((event, data) =>\n      props.onOpenChange?.(event, {\n        ...data,\n        type: event.type,\n        event,\n      } as TagPickerOnOpenChangeData),\n    ),\n    activeDescendantController,\n    disableAutoFocus,\n    editable: true,\n    multiselect: true,\n    size: 'medium',\n  });\n\n  const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);\n  return {\n    activeDescendantController,\n    components: {},\n    trigger,\n    popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n    popoverId,\n    noPopover,\n    disabled: comboboxState.disabled,\n    triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n    popoverRef: useMergedRefs(listboxRef, containerRef),\n    secondaryActionRef,\n    tagPickerGroupRef,\n    targetRef,\n    size,\n    inline,\n    open: comboboxState.open,\n    mountNode: comboboxState.mountNode,\n    onOptionClick: useEventCallback(event => {\n      comboboxState.onOptionClick(event);\n      comboboxState.setOpen(event, false);\n    }),\n    appearance: comboboxState.appearance,\n    clearSelection: comboboxState.clearSelection,\n    getOptionById: comboboxState.getOptionById,\n    getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,\n    registerOption: comboboxState.registerOption,\n    selectedOptions: comboboxState.selectedOptions,\n    selectOption: useEventCallback((event, data) => {\n      // if the option is already selected, invoke onOptionSelect callback with current selected values\n      // the combobox state would unselect the option, which is not the behavior expected\n      if (\n        comboboxState.selectedOptions.includes(data.value) &&\n        !elementContains(tagPickerGroupRef.current, event.target as Node)\n      ) {\n        props.onOptionSelect?.(event, {\n          selectedOptions: comboboxState.selectedOptions,\n          value: data.value,\n          type: event.type,\n          event,\n        } as TagPickerOnOptionSelectData);\n        return;\n      }\n      comboboxState.selectOption(event, data);\n    }),\n    setHasFocus: comboboxState.setHasFocus,\n    setOpen: comboboxState.setOpen,\n    setValue: comboboxState.setValue,\n    value: comboboxState.value,\n  };\n};\n\nconst childrenToTriggerAndPopover = (children: React.ReactNode, noPopover: boolean) => {\n  const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('TagPicker must contain at least one child');\n    }\n\n    if (childrenArray.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('TagPicker must contain at most two children');\n    }\n  }\n\n  if (noPopover) {\n    return { trigger: childrenArray[0] };\n  }\n\n  let trigger: React.ReactElement | undefined = undefined;\n  let popover: React.ReactElement | undefined = undefined;\n\n  if (childrenArray.length === 2) {\n    trigger = childrenArray[0];\n    popover = childrenArray[1];\n  } else if (childrenArray.length === 1) {\n    popover = childrenArray[0];\n  }\n\n  return { trigger, popover };\n};\n"],"names":["React","elementContains","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPicker_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","noPopover","disableAutoFocus","targetRef","containerRef","position","align","offset","crossAxis","mainAxis","matchTargetSize","controller","activeDescendantController","activeParentRef","listboxRef","matchOption","el","classList","contains","root","comboboxState","onOptionSelect","event","data","selectedOptions","value","optionValue","type","onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","popoverRef","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","includes","current","target","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPicker/useTagPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n  TagPickerBaseProps,\n  TagPickerBaseState,\n  TagPickerOnOpenChangeData,\n  TagPickerOnOptionSelectData,\n  TagPickerProps,\n  TagPickerState,\n} from './TagPicker.types';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n/**\n * Create the base state required to render TagPicker, without floating-ui positioning.\n * @param props - props from this instance of TagPicker (without `positioning`)\n */\nexport const useTagPickerBase_unstable = (props: TagPickerBaseProps): TagPickerBaseState => {\n  const popoverId = useId('picker-listbox');\n  const triggerInnerRef = React.useRef<HTMLInputElement | HTMLButtonElement>(null);\n  const secondaryActionRef = React.useRef<HTMLSpanElement>(null);\n  const tagPickerGroupRef = React.useRef<HTMLDivElement>(null);\n  const passiveTargetRef = React.useRef<HTMLDivElement>(null);\n  const { noPopover = false, disableAutoFocus } = props;\n\n  const {\n    controller: activeDescendantController,\n    activeParentRef,\n    listboxRef,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const comboboxState = useComboboxBaseState({\n    ...props,\n    onOptionSelect: useEventCallback((event, data) =>\n      props.onOptionSelect?.(event, {\n        selectedOptions: data.selectedOptions,\n        value: data.optionValue,\n        type: event.type,\n        event,\n      } as TagPickerOnOptionSelectData),\n    ),\n    onOpenChange: useEventCallback((event, data) =>\n      props.onOpenChange?.(event, {\n        ...data,\n        type: event.type,\n        event,\n      } as TagPickerOnOpenChangeData),\n    ),\n    activeDescendantController,\n    disableAutoFocus,\n    editable: true,\n    multiselect: true,\n  });\n\n  const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);\n  return {\n    activeDescendantController,\n    components: {},\n    trigger,\n    popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n    popoverId,\n    noPopover,\n    disabled: comboboxState.disabled,\n    triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n    popoverRef: useMergedRefs(listboxRef),\n    secondaryActionRef,\n    tagPickerGroupRef,\n    targetRef: passiveTargetRef,\n    open: comboboxState.open,\n    mountNode: comboboxState.mountNode,\n    onOptionClick: useEventCallback(event => {\n      comboboxState.onOptionClick(event);\n      comboboxState.setOpen(event, false);\n    }),\n    clearSelection: comboboxState.clearSelection,\n    getOptionById: comboboxState.getOptionById,\n    getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,\n    registerOption: comboboxState.registerOption,\n    selectedOptions: comboboxState.selectedOptions,\n    selectOption: useEventCallback((event, data) => {\n      // if the option is already selected, invoke onOptionSelect callback with current selected values\n      // the combobox state would unselect the option, which is not the behavior expected\n      if (\n        comboboxState.selectedOptions.includes(data.value) &&\n        !elementContains(tagPickerGroupRef.current, event.target as Node)\n      ) {\n        props.onOptionSelect?.(event, {\n          selectedOptions: comboboxState.selectedOptions,\n          value: data.value,\n          type: event.type,\n          event,\n        } as TagPickerOnOptionSelectData);\n        return;\n      }\n      comboboxState.selectOption(event, data);\n    }),\n    setHasFocus: comboboxState.setHasFocus,\n    setOpen: comboboxState.setOpen,\n    setValue: comboboxState.setValue,\n    value: comboboxState.value,\n  };\n};\n\n/**\n * Create the state required to render Picker.\n *\n * The returned state can be modified with hooks such as usePickerStyles_unstable,\n * before being passed to renderPicker_unstable.\n *\n * @param props - props from this instance of Picker\n */\nexport const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => {\n  const { positioning, size = 'medium', appearance = 'outline', inline = false } = props;\n\n  const { targetRef, containerRef } = usePositioning({\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    fallbackPositions,\n    matchTargetSize: 'width' as const,\n    ...resolvePositioningShorthand(positioning),\n  });\n\n  const baseState = useTagPickerBase_unstable(props);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n    inline,\n    targetRef,\n    popoverRef: useMergedRefs(baseState.popoverRef, containerRef),\n  };\n};\n\nconst childrenToTriggerAndPopover = (children: React.ReactNode, noPopover: boolean) => {\n  const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('TagPicker must contain at least one child');\n    }\n\n    if (childrenArray.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('TagPicker must contain at most two children');\n    }\n  }\n\n  if (noPopover) {\n    return { trigger: childrenArray[0] };\n  }\n\n  let trigger: React.ReactElement | undefined = undefined;\n  let popover: React.ReactElement | undefined = undefined;\n\n  if (childrenArray.length === 2) {\n    trigger = childrenArray[0];\n    popover = childrenArray[1];\n  } else if (childrenArray.length === 1) {\n    popover = childrenArray[0];\n  }\n\n  return { trigger, popover };\n};\n"],"names":["React","elementContains","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPickerBase_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","passiveTargetRef","noPopover","disableAutoFocus","controller","activeDescendantController","activeParentRef","listboxRef","matchOption","el","classList","contains","root","comboboxState","onOptionSelect","event","data","selectedOptions","value","optionValue","type","onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","popoverRef","targetRef","mountNode","onOptionClick","setOpen","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","includes","current","target","setHasFocus","setValue","useTagPicker_unstable","positioning","size","appearance","inline","containerRef","position","align","offset","crossAxis","mainAxis","matchTargetSize","baseState","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}

package/lib/components/TagPickerButton/TagPickerButton.types.js

@@ -1,3 +1,3 @@
 /**
- * State used in rendering PickerButton
+ * TagPickerButton Base State - omits design-only state
  */ export { };

package/lib/components/TagPickerButton/TagPickerButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerButton/TagPickerButton.types.ts"],"sourcesContent":["import type { DropdownProps } from '@fluentui/react-combobox';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerButtonSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * PickerButton Props\n */\nexport type TagPickerButtonProps = ComponentProps<TagPickerButtonSlots> &\n  Pick<DropdownProps, 'size' | 'appearance'> & {\n    disabled?: boolean;\n  };\n\n/**\n * State used in rendering PickerButton\n */\nexport type TagPickerButtonState = ComponentState<TagPickerButtonSlots> &\n  Pick<TagPickerContextValue, 'size'> & {\n    hasSelectedOption: boolean;\n  };\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["../src/components/TagPickerButton/TagPickerButton.types.ts"],"sourcesContent":["import type { DropdownProps } from '@fluentui/react-combobox';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerButtonSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * PickerButton Props\n */\nexport type TagPickerButtonProps = ComponentProps<TagPickerButtonSlots> &\n  Pick<DropdownProps, 'size' | 'appearance'> & {\n    disabled?: boolean;\n  };\n\n/**\n * State used in rendering PickerButton\n */\nexport type TagPickerButtonState = ComponentState<TagPickerButtonSlots> &\n  Pick<TagPickerContextValue, 'size'> & {\n    hasSelectedOption: boolean;\n  };\n\n/**\n * TagPickerButton Base Props - omits design-only props\n */\nexport type TagPickerButtonBaseProps = DistributiveOmit<TagPickerButtonProps, 'size' | 'appearance'>;\n\n/**\n * TagPickerButton Base State - omits design-only state\n */\nexport type TagPickerButtonBaseState = DistributiveOmit<TagPickerButtonState, 'size'>;\n"],"names":[],"mappings":"AA6BA;;CAEC,GACD,WAAsF"}

package/lib/components/TagPickerButton/index.js

@@ -1,4 +1,4 @@
 export { TagPickerButton } from './TagPickerButton';
 export { renderTagPickerButton_unstable } from './renderTagPickerButton';
-export { useTagPickerButton_unstable } from './useTagPickerButton';
+export { useTagPickerButton_unstable, useTagPickerButtonBase_unstable } from './useTagPickerButton';
 export { tagPickerButtonClassNames, useTagPickerButtonStyles_unstable } from './useTagPickerButtonStyles.styles';

package/lib/components/TagPickerButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerButton/index.ts"],"sourcesContent":["export { TagPickerButton } from './TagPickerButton';\nexport type { TagPickerButtonProps, TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton.types';\nexport { renderTagPickerButton_unstable } from './renderTagPickerButton';\nexport { useTagPickerButton_unstable } from './useTagPickerButton';\nexport { tagPickerButtonClassNames, useTagPickerButtonStyles_unstable } from './useTagPickerButtonStyles.styles';\n"],"names":["TagPickerButton","renderTagPickerButton_unstable","useTagPickerButton_unstable","tagPickerButtonClassNames","useTagPickerButtonStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}
+{"version":3,"sources":["../src/components/TagPickerButton/index.ts"],"sourcesContent":["export { TagPickerButton } from './TagPickerButton';\nexport type {\n  TagPickerButtonBaseProps,\n  TagPickerButtonBaseState,\n  TagPickerButtonProps,\n  TagPickerButtonSlots,\n  TagPickerButtonState,\n} from './TagPickerButton.types';\nexport { renderTagPickerButton_unstable } from './renderTagPickerButton';\nexport { useTagPickerButton_unstable, useTagPickerButtonBase_unstable } from './useTagPickerButton';\nexport { tagPickerButtonClassNames, useTagPickerButtonStyles_unstable } from './useTagPickerButtonStyles.styles';\n"],"names":["TagPickerButton","renderTagPickerButton_unstable","useTagPickerButton_unstable","useTagPickerButtonBase_unstable","tagPickerButtonClassNames","useTagPickerButtonStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAQpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,EAAEC,+BAA+B,QAAQ,uBAAuB;AACpG,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}

package/lib/components/TagPickerButton/useTagPickerButton.js

@@ -3,14 +3,11 @@ import { useActiveDescendantContext } from '@fluentui/react-aria';
 import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
 import { useButtonTriggerSlot } from '@fluentui/react-combobox';
 /**
- * Create the state required to render PickerButton.
+ * Create the base state required to render TagPickerButton, without design-only props.
  *
- * The returned state can be modified with hooks such as usePickerButtonStyles_unstable,
- * before being passed to renderPickerButton_unstable.
- *
- * @param props - props from this instance of PickerButton
- * @param ref - reference to root HTMLDivElement of PickerButton
- */ export const useTagPickerButton_unstable = (props, ref)=>{
+ * @param props - props from this instance of TagPickerButton (without size, appearance)
+ * @param ref - reference to root HTMLButtonElement of TagPickerButton
+ */ export const useTagPickerButtonBase_unstable = (props, ref)=>{
     const { controller: activeDescendantController } = useActiveDescendantContext();
     const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);
     const open = useTagPickerContext_unstable((ctx)=>ctx.open);
@@ -28,7 +25,7 @@ import { useButtonTriggerSlot } from '@fluentui/react-combobox';
         defaultProps: {
             type: 'button',
             tabIndex: 0,
-            children: value || // @ts-expect-error - FIXME: TS2339: Property 'placeholder' does not exist on type 'TagPickerButtonProps'
+            children: value || // @ts-expect-error - FIXME: TS2339: Property 'placeholder' does not exist on type 'TagPickerButtonBaseProps'
             props.placeholder,
             'aria-controls': open ? popoverId : undefined,
             ref
@@ -42,14 +39,27 @@ import { useButtonTriggerSlot } from '@fluentui/react-combobox';
             multiselect: true
         }
     });
-    const size = useTagPickerContext_unstable((ctx)=>ctx.size);
-    const state = {
+    return {
         components: {
             root: 'button'
         },
         root,
-        size,
         hasSelectedOption
     };
-    return state;
+};
+/**
+ * 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 const useTagPickerButton_unstable = (props, ref)=>{
+    const baseState = useTagPickerButtonBase_unstable(props, ref);
+    const size = useTagPickerContext_unstable((ctx)=>ctx.size);
+    return {
+        ...baseState,
+        size
+    };
 };

package/lib/components/TagPickerButton/useTagPickerButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButton.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport type { TagPickerButtonProps, TagPickerButtonState } from './TagPickerButton.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { useButtonTriggerSlot } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render PickerButton.\n *\n * The returned state can be modified with hooks such as usePickerButtonStyles_unstable,\n * before being passed to renderPickerButton_unstable.\n *\n * @param props - props from this instance of PickerButton\n * @param ref - reference to root HTMLDivElement of PickerButton\n */\nexport const useTagPickerButton_unstable = (\n  props: TagPickerButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): TagPickerButtonState => {\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const value = useTagPickerContext_unstable(ctx => ctx.value);\n  const hasSelectedOption = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length > 0);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n\n  // casting is required here as triggerRef can either be button or input,\n  // but in this case we can assure it's a button\n  const root = useButtonTriggerSlot(props, triggerRef as React.RefObject<HTMLButtonElement>, {\n    activeDescendantController,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children:\n        value ||\n        // @ts-expect-error - FIXME: TS2339: Property 'placeholder' does not exist on type 'TagPickerButtonProps'\n        props.placeholder,\n      'aria-controls': open ? popoverId : undefined,\n      ref,\n    },\n    state: {\n      getOptionById,\n      open,\n      selectOption,\n      setHasFocus,\n      setOpen,\n      multiselect: true,\n    },\n  });\n\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n  const state: TagPickerButtonState = {\n    components: {\n      root: 'button',\n    },\n    root,\n    size,\n    hasSelectedOption,\n  };\n\n  return state;\n};\n"],"names":["useActiveDescendantContext","useTagPickerContext_unstable","useButtonTriggerSlot","useTagPickerButton_unstable","props","ref","controller","activeDescendantController","triggerRef","ctx","open","value","hasSelectedOption","selectedOptions","length","popoverId","getOptionById","selectOption","setHasFocus","setOpen","root","defaultProps","type","tabIndex","children","placeholder","undefined","state","multiselect","size","components"],"mappings":"AAAA;AAGA,SAASA,0BAA0B,QAAQ,uBAAuB;AAElE,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,YAAYC,0BAA0B,EAAE,GAAGP;IACnD,MAAMQ,aAAaP,6BAA6BQ,CAAAA,MAAOA,IAAID,UAAU;IACrE,MAAME,OAAOT,6BAA6BQ,CAAAA,MAAOA,IAAIC,IAAI;IACzD,MAAMC,QAAQV,6BAA6BQ,CAAAA,MAAOA,IAAIE,KAAK;IAC3D,MAAMC,oBAAoBX,6BAA6BQ,CAAAA,MAAOA,IAAII,eAAe,CAACC,MAAM,GAAG;IAC3F,MAAMC,YAAYd,6BAA6BQ,CAAAA,MAAOA,IAAIM,SAAS;IACnE,MAAMC,gBAAgBf,6BAA6BQ,CAAAA,MAAOA,IAAIO,aAAa;IAC3E,MAAMC,eAAehB,6BAA6BQ,CAAAA,MAAOA,IAAIQ,YAAY;IACzE,MAAMC,cAAcjB,6BAA6BQ,CAAAA,MAAOA,IAAIS,WAAW;IACvE,MAAMC,UAAUlB,6BAA6BQ,CAAAA,MAAOA,IAAIU,OAAO;IAE/D,wEAAwE;IACxE,+CAA+C;IAC/C,MAAMC,OAAOlB,qBAAqBE,OAAOI,YAAkD;QACzFD;QACAc,cAAc;YACZC,MAAM;YACNC,UAAU;YACVC,UACEb,SACA,yGAAyG;YACzGP,MAAMqB,WAAW;YACnB,iBAAiBf,OAAOK,YAAYW;YACpCrB;QACF;QACAsB,OAAO;YACLX;YACAN;YACAO;YACAC;YACAC;YACAS,aAAa;QACf;IACF;IAEA,MAAMC,OAAO5B,6BAA6BQ,CAAAA,MAAOA,IAAIoB,IAAI;IAEzD,MAAMF,QAA8B;QAClCG,YAAY;YACVV,MAAM;QACR;QACAA;QACAS;QACAjB;IACF;IAEA,OAAOe;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButton.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport type {\n  TagPickerButtonBaseProps,\n  TagPickerButtonBaseState,\n  TagPickerButtonProps,\n  TagPickerButtonState,\n} from './TagPickerButton.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { useButtonTriggerSlot } from '@fluentui/react-combobox';\n\n/**\n * Create the base state required to render TagPickerButton, without design-only props.\n *\n * @param props - props from this instance of TagPickerButton (without size, appearance)\n * @param ref - reference to root HTMLButtonElement of TagPickerButton\n */\nexport const useTagPickerButtonBase_unstable = (\n  props: TagPickerButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): TagPickerButtonBaseState => {\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const value = useTagPickerContext_unstable(ctx => ctx.value);\n  const hasSelectedOption = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length > 0);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n\n  // casting is required here as triggerRef can either be button or input,\n  // but in this case we can assure it's a button\n  const root = useButtonTriggerSlot(props, triggerRef as React.RefObject<HTMLButtonElement>, {\n    activeDescendantController,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children:\n        value ||\n        // @ts-expect-error - FIXME: TS2339: Property 'placeholder' does not exist on type 'TagPickerButtonBaseProps'\n        props.placeholder,\n      'aria-controls': open ? popoverId : undefined,\n      ref,\n    },\n    state: {\n      getOptionById,\n      open,\n      selectOption,\n      setHasFocus,\n      setOpen,\n      multiselect: true,\n    },\n  });\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root,\n    hasSelectedOption,\n  };\n};\n\n/**\n * Create the state required to render TagPickerButton.\n *\n * The returned state can be modified with hooks such as useTagPickerButtonStyles_unstable,\n * before being passed to renderTagPickerButton_unstable.\n *\n * @param props - props from this instance of TagPickerButton\n * @param ref - reference to root HTMLButtonElement of TagPickerButton\n */\nexport const useTagPickerButton_unstable = (\n  props: TagPickerButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): TagPickerButtonState => {\n  const baseState = useTagPickerButtonBase_unstable(props, ref);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n"],"names":["useActiveDescendantContext","useTagPickerContext_unstable","useButtonTriggerSlot","useTagPickerButtonBase_unstable","props","ref","controller","activeDescendantController","triggerRef","ctx","open","value","hasSelectedOption","selectedOptions","length","popoverId","getOptionById","selectOption","setHasFocus","setOpen","root","defaultProps","type","tabIndex","children","placeholder","undefined","state","multiselect","components","useTagPickerButton_unstable","baseState","size"],"mappings":"AAAA;AAGA,SAASA,0BAA0B,QAAQ,uBAAuB;AAOlE,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE;;;;;CAKC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEA,MAAM,EAAEC,YAAYC,0BAA0B,EAAE,GAAGP;IACnD,MAAMQ,aAAaP,6BAA6BQ,CAAAA,MAAOA,IAAID,UAAU;IACrE,MAAME,OAAOT,6BAA6BQ,CAAAA,MAAOA,IAAIC,IAAI;IACzD,MAAMC,QAAQV,6BAA6BQ,CAAAA,MAAOA,IAAIE,KAAK;IAC3D,MAAMC,oBAAoBX,6BAA6BQ,CAAAA,MAAOA,IAAII,eAAe,CAACC,MAAM,GAAG;IAC3F,MAAMC,YAAYd,6BAA6BQ,CAAAA,MAAOA,IAAIM,SAAS;IACnE,MAAMC,gBAAgBf,6BAA6BQ,CAAAA,MAAOA,IAAIO,aAAa;IAC3E,MAAMC,eAAehB,6BAA6BQ,CAAAA,MAAOA,IAAIQ,YAAY;IACzE,MAAMC,cAAcjB,6BAA6BQ,CAAAA,MAAOA,IAAIS,WAAW;IACvE,MAAMC,UAAUlB,6BAA6BQ,CAAAA,MAAOA,IAAIU,OAAO;IAE/D,wEAAwE;IACxE,+CAA+C;IAC/C,MAAMC,OAAOlB,qBAAqBE,OAAOI,YAAkD;QACzFD;QACAc,cAAc;YACZC,MAAM;YACNC,UAAU;YACVC,UACEb,SACA,6GAA6G;YAC7GP,MAAMqB,WAAW;YACnB,iBAAiBf,OAAOK,YAAYW;YACpCrB;QACF;QACAsB,OAAO;YACLX;YACAN;YACAO;YACAC;YACAC;YACAS,aAAa;QACf;IACF;IAEA,OAAO;QACLC,YAAY;YACVT,MAAM;QACR;QACAA;QACAR;IACF;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMkB,8BAA8B,CACzC1B,OACAC;IAEA,MAAM0B,YAAY5B,gCAAgCC,OAAOC;IACzD,MAAM2B,OAAO/B,6BAA6BQ,CAAAA,MAAOA,IAAIuB,IAAI;IAEzD,OAAO;QACL,GAAGD,SAAS;QACZC;IACF;AACF,EAAE"}

package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.js

@@ -252,8 +252,6 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the PickerButton slots based on the state
  */
 export const useTagPickerButtonStyles_unstable = state => {
-  'use no memo';
-
   const styles = useStyles();
   // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);