@fluentui/react-tag-picker 9.2.4 → 9.3.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-tag-picker
 
-This log was last generated on Tue, 30 Jul 2024 18:45:10 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Aug 2024 08:18:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.3.0)
+
+Thu, 15 Aug 2024 08:18:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.2.5..@fluentui/react-tag-picker_v9.3.0)
+
+### Minor changes
+
+- feature: introduces noPopover property to TagPicker ([PR #32158](https://github.com/microsoft/fluentui/pull/32158) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-portal to v9.4.32 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+- Bump @fluentui/react-aria to v9.13.3 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+- Bump @fluentui/react-combobox to v9.13.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+- Bump @fluentui/react-tags to v9.3.15 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+- Bump @fluentui/react-field to v9.1.73 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+
+## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.2.5)
+
+Mon, 05 Aug 2024 22:33:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.2.4..@fluentui/react-tag-picker_v9.2.5)
+
+### Patches
+
+- Bump @fluentui/react-tags to v9.3.14 ([PR #32077](https://github.com/microsoft/fluentui/pull/32077) by beachball)
+
 ## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.2.4)
 
-Tue, 30 Jul 2024 18:45:10 GMT 
+Tue, 30 Jul 2024 18:47:35 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.2.3..@fluentui/react-tag-picker_v9.2.4)
 
 ### Patches

package/dist/index.d.ts

@@ -103,6 +103,7 @@ declare interface TagPickerContextValue extends Pick<ComboboxBaseState, 'open' |
     secondaryActionRef: React_2.RefObject<HTMLSpanElement>;
     tagPickerGroupRef: React_2.RefObject<HTMLDivElement>;
     size: TagPickerSize;
+    noPopover?: boolean;
 }
 
 export declare type TagPickerContextValues = {
@@ -300,12 +301,19 @@ export declare type TagPickerOptionState = ComponentState<TagPickerOptionSlots>
  * Picker Props
  */
 export declare type TagPickerProps = ComponentProps<TagPickerSlots> & Pick<ComboboxProps, 'positioning' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'> & 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: [JSX.Element, JSX.Element] | JSX.Element;
+    children: [JSX.Element, JSX.Element | undefined | false] | JSX.Element;
     /**
      * TagPickers are rendered out of DOM order on `document.body` by default,
      * use this to render the popover in DOM order
@@ -322,7 +330,7 @@ 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'> & {
+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;

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

@@ -1 +1 @@
-{"version":3,"sources":["TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler } 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' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'\n  > &\n  Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {\n    onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n    onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n    /**\n     * Can contain two children including a trigger and a popover\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\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' | 'secondaryActionRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'tagPickerGroupRef' | 'size'\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":[],"rangeMappings":"","mappings":"AAmFA,WAIE"}
+{"version":3,"sources":["TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler } 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' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'\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: [JSX.Element, JSX.Element | undefined | false] | JSX.Element;\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":[],"rangeMappings":"","mappings":"AAiGA,WAIE"}

package/lib/components/TagPicker/useTagPicker.js

@@ -24,7 +24,7 @@ const fallbackPositions = [
     const triggerInnerRef = React.useRef(null);
     const secondaryActionRef = React.useRef(null);
     const tagPickerGroupRef = React.useRef(null);
-    const { positioning, size = 'medium', inline = false } = props;
+    const { positioning, size = 'medium', inline = false, noPopover = false } = props;
     const { targetRef, containerRef } = usePositioning({
         position: 'below',
         align: 'start',
@@ -63,13 +63,14 @@ const fallbackPositions = [
         multiselect: true,
         size: 'medium'
     });
-    const { trigger, popover } = childrenToTriggerAndPopover(props.children);
+    const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);
     return {
         activeDescendantController,
         components: {},
         trigger,
         popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,
         popoverId,
+        noPopover,
         disabled: comboboxState.disabled,
         triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),
         popoverRef: useMergedRefs(listboxRef, containerRef),
@@ -97,18 +98,23 @@ const fallbackPositions = [
         value: comboboxState.value
     };
 };
-const childrenToTriggerAndPopover = (children)=>{
+const childrenToTriggerAndPopover = (children, noPopover)=>{
     const childrenArray = React.Children.toArray(children);
     if (process.env.NODE_ENV !== 'production') {
         if (childrenArray.length === 0) {
             // eslint-disable-next-line no-console
-            console.warn('Picker must contain at least one child');
+            console.warn('TagPicker must contain at least one child');
         }
         if (childrenArray.length > 2) {
             // eslint-disable-next-line no-console
-            console.warn('Picker must contain at most two children');
+            console.warn('TagPicker must contain at most two children');
         }
     }
+    if (noPopover) {
+        return {
+            trigger: childrenArray[0]
+        };
+    }
     let trigger = undefined;
     let popover = undefined;
     if (childrenArray.length === 2) {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { 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 { PositioningShorthandValue, 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 } = 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    editable: true,\n    multiselect: true,\n    size: 'medium',\n  });\n\n  const { trigger, popover } = childrenToTriggerAndPopover(props.children);\n\n  return {\n    activeDescendantController,\n    components: {},\n    trigger,\n    popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n    popoverId,\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: comboboxState.selectOption,\n    setHasFocus: comboboxState.setHasFocus,\n    setOpen: comboboxState.setOpen,\n    setValue: comboboxState.setValue,\n    value: comboboxState.value,\n  };\n};\n\nconst childrenToTriggerAndPopover = (children?: React.ReactNode) => {\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('Picker must contain at least one child');\n    }\n\n    if (childrenArray.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Picker must contain at most two children');\n    }\n  }\n\n  let trigger: React.ReactElement | undefined = undefined;\n  let popover: React.ReactElement | undefined = undefined;\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  return { trigger, popover };\n};\n"],"names":["React","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPicker_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","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","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useTagPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { 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 { PositioningShorthandValue, 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 } = 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    editable: true,\n    multiselect: true,\n    size: 'medium',\n  });\n\n  const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);\n\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: comboboxState.selectOption,\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","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPicker_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","noPopover","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","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/TagPicker/useTagPickerContextValues.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export function useTagPickerContextValues(state) {
-    const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, getOptionsMatchingValue, open, popoverId, disabled } = state;
+    const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, getOptionsMatchingValue, open, popoverId, disabled, noPopover } = state;
     return {
         activeDescendant: React.useMemo(()=>({
                 controller: state.activeDescendantController
@@ -35,7 +35,8 @@ export function useTagPickerContextValues(state) {
             getOptionById,
             open,
             popoverId,
-            disabled
+            disabled,
+            noPopover
         }
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerContextValues, TagPickerState } from './TagPicker.types';\n\nexport function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues {\n  const {\n    onOptionClick,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    value,\n    triggerRef,\n    secondaryActionRef,\n    tagPickerGroupRef,\n    targetRef,\n    size,\n    setValue,\n    setOpen,\n    setHasFocus,\n    popoverRef,\n    appearance,\n    clearSelection,\n    getOptionById,\n    getOptionsMatchingValue,\n    open,\n    popoverId,\n    disabled,\n  } = state;\n  return {\n    activeDescendant: React.useMemo(\n      () => ({ controller: state.activeDescendantController }),\n      [state.activeDescendantController],\n    ),\n    listbox: {\n      onOptionClick,\n      registerOption,\n      getOptionById,\n      getOptionsMatchingValue,\n      selectedOptions,\n      selectOption,\n      focusVisible: false,\n      setActiveOption: noop,\n    },\n    picker: {\n      value,\n      triggerRef,\n      targetRef,\n      secondaryActionRef,\n      tagPickerGroupRef,\n      size,\n      setValue,\n      setOpen,\n      setHasFocus,\n      selectOption,\n      popoverRef,\n      selectedOptions,\n      appearance,\n      clearSelection,\n      getOptionById,\n      open,\n      popoverId,\n      disabled,\n    },\n  };\n}\n\nconst noop = () => {\n  /** noop */\n};\n"],"names":["React","useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","getOptionsMatchingValue","open","popoverId","disabled","activeDescendant","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,0BAA0BC,KAAqB;IAC7D,MAAM,EACJC,aAAa,EACbC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,KAAK,EACLC,UAAU,EACVC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACT,GAAGrB;IACJ,OAAO;QACLsB,kBAAkBxB,MAAMyB,OAAO,CAC7B,IAAO,CAAA;gBAAEC,YAAYxB,MAAMyB,0BAA0B;YAAC,CAAA,GACtD;YAACzB,MAAMyB,0BAA0B;SAAC;QAEpCC,SAAS;YACPzB;YACAC;YACAe;YACAC;YACAf;YACAC;YACAuB,cAAc;YACdC,iBAAiBC;QACnB;QACAC,QAAQ;YACNzB;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAE;YACAC;YACAC;QACF;IACF;AACF;AAEA,MAAMQ,OAAO;AACX,SAAS,GACX"}
+{"version":3,"sources":["useTagPickerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerContextValues, TagPickerState } from './TagPicker.types';\n\nexport function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues {\n  const {\n    onOptionClick,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    value,\n    triggerRef,\n    secondaryActionRef,\n    tagPickerGroupRef,\n    targetRef,\n    size,\n    setValue,\n    setOpen,\n    setHasFocus,\n    popoverRef,\n    appearance,\n    clearSelection,\n    getOptionById,\n    getOptionsMatchingValue,\n    open,\n    popoverId,\n    disabled,\n    noPopover,\n  } = state;\n  return {\n    activeDescendant: React.useMemo(\n      () => ({ controller: state.activeDescendantController }),\n      [state.activeDescendantController],\n    ),\n    listbox: {\n      onOptionClick,\n      registerOption,\n      getOptionById,\n      getOptionsMatchingValue,\n      selectedOptions,\n      selectOption,\n      focusVisible: false,\n      setActiveOption: noop,\n    },\n    picker: {\n      value,\n      triggerRef,\n      targetRef,\n      secondaryActionRef,\n      tagPickerGroupRef,\n      size,\n      setValue,\n      setOpen,\n      setHasFocus,\n      selectOption,\n      popoverRef,\n      selectedOptions,\n      appearance,\n      clearSelection,\n      getOptionById,\n      open,\n      popoverId,\n      disabled,\n      noPopover,\n    },\n  };\n}\n\nconst noop = () => {\n  /** noop */\n};\n"],"names":["React","useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","getOptionsMatchingValue","open","popoverId","disabled","noPopover","activeDescendant","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,0BAA0BC,KAAqB;IAC7D,MAAM,EACJC,aAAa,EACbC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,KAAK,EACLC,UAAU,EACVC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACV,GAAGtB;IACJ,OAAO;QACLuB,kBAAkBzB,MAAM0B,OAAO,CAC7B,IAAO,CAAA;gBAAEC,YAAYzB,MAAM0B,0BAA0B;YAAC,CAAA,GACtD;YAAC1B,MAAM0B,0BAA0B;SAAC;QAEpCC,SAAS;YACP1B;YACAC;YACAe;YACAC;YACAf;YACAC;YACAwB,cAAc;YACdC,iBAAiBC;QACnB;QACAC,QAAQ;YACN1B;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAE;YACAC;YACAC;YACAC;QACF;IACF;AACF;AAEA,MAAMQ,OAAO;AACX,SAAS,GACX"}

package/lib/components/TagPickerControl/useTagPickerControl.js

@@ -26,6 +26,10 @@ import { useFieldContext_unstable } from '@fluentui/react-field';
     const appearance = useTagPickerContext_unstable((ctx)=>ctx.appearance);
     const disabled = useTagPickerContext_unstable((ctx)=>ctx.disabled);
     const invalid = ((_useFieldContext_unstable = useFieldContext_unstable()) === null || _useFieldContext_unstable === void 0 ? void 0 : _useFieldContext_unstable.validationState) === 'error';
+    const noPopover = useTagPickerContext_unstable((ctx)=>{
+        var _ctx_noPopover;
+        return (_ctx_noPopover = ctx.noPopover) !== null && _ctx_noPopover !== void 0 ? _ctx_noPopover : false;
+    });
     const innerRef = React.useRef(null);
     const expandIconRef = React.useRef(null);
     const asideRef = React.useRef(null);
@@ -37,7 +41,7 @@ import { useFieldContext_unstable } from '@fluentui/react-field';
         secondaryAction.ref = secondaryActionRef;
     }
     const expandIcon = slot.optional(props.expandIcon, {
-        renderByDefault: true,
+        renderByDefault: !noPopover,
         defaultProps: {
             'aria-expanded': open,
             children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null),
@@ -84,7 +88,7 @@ import { useFieldContext_unstable } from '@fluentui/react-field';
         },
         root: slot.always(getIntrinsicElementProps('div', {
             ref: useMergedRefs(ref, targetRef, innerRef),
-            'aria-owns': open ? popoverId : undefined,
+            'aria-owns': open && !noPopover ? popoverId : undefined,
             ...props,
             onMouseDown: handleMouseDown
         }), {

package/lib/components/TagPickerControl/useTagPickerControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  Slot,\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n  const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const invalid = useFieldContext_unstable()?.validationState === 'error';\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLSpanElement>(null);\n  const asideRef = React.useRef<HTMLSpanElement>(null);\n\n  const secondaryAction = slot.optional(props.secondaryAction, {\n    elementType: 'span',\n  });\n  const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n  if (secondaryAction) {\n    secondaryAction.ref = secondaryActionRef;\n  }\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: true,\n    defaultProps: {\n      'aria-expanded': open,\n      children: <ChevronDownRegular />,\n      role: 'button',\n    },\n    elementType: 'span',\n  });\n\n  const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconMergeRef;\n  }\n\n  const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n    innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n  });\n  const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n    elementType: 'span',\n    renderByDefault: Boolean(secondaryAction || expandIcon),\n    defaultProps: {\n      ref: observerRef,\n    },\n  });\n  const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n  if (aside) {\n    aside.ref = mergedAsideRefs;\n  }\n\n  const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (\n      elementContains(expandIconRef.current, event.target as Node) ||\n      event.target === innerRef.current ||\n      event.target === tagPickerGroupRef.current ||\n      event.target === asideRef.current\n    ) {\n      event.preventDefault();\n      setOpen(event, !open);\n      triggerRef.current?.focus();\n    }\n  });\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'span',\n      secondaryAction: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, targetRef, innerRef),\n        'aria-owns': open ? popoverId : undefined,\n        ...props,\n        onMouseDown: handleMouseDown,\n      }),\n      { elementType: 'div' },\n    ),\n    aside,\n    expandIcon,\n    secondaryAction,\n    size,\n    appearance,\n    disabled,\n    invalid,\n  };\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useMergedRefs","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useTagPickerControl_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","innerRef","useRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","children","role","expandIconMergeRef","observerRef","entry","current","style","setProperty","contentRect","width","aside","undefined","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","components","root","always","onMouseDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  Slot,\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n  const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const invalid = useFieldContext_unstable()?.validationState === 'error';\n  const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLSpanElement>(null);\n  const asideRef = React.useRef<HTMLSpanElement>(null);\n\n  const secondaryAction = slot.optional(props.secondaryAction, {\n    elementType: 'span',\n  });\n  const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n  if (secondaryAction) {\n    secondaryAction.ref = secondaryActionRef;\n  }\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: !noPopover,\n    defaultProps: {\n      'aria-expanded': open,\n      children: <ChevronDownRegular />,\n      role: 'button',\n    },\n    elementType: 'span',\n  });\n\n  const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconMergeRef;\n  }\n\n  const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n    innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n  });\n  const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n    elementType: 'span',\n    renderByDefault: Boolean(secondaryAction || expandIcon),\n    defaultProps: {\n      ref: observerRef,\n    },\n  });\n  const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n  if (aside) {\n    aside.ref = mergedAsideRefs;\n  }\n\n  const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (\n      elementContains(expandIconRef.current, event.target as Node) ||\n      event.target === innerRef.current ||\n      event.target === tagPickerGroupRef.current ||\n      event.target === asideRef.current\n    ) {\n      event.preventDefault();\n      setOpen(event, !open);\n      triggerRef.current?.focus();\n    }\n  });\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'span',\n      secondaryAction: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, targetRef, innerRef),\n        'aria-owns': open && !noPopover ? popoverId : undefined,\n        ...props,\n        onMouseDown: handleMouseDown,\n      }),\n      { elementType: 'div' },\n    ),\n    aside,\n    expandIcon,\n    secondaryAction,\n    size,\n    appearance,\n    disabled,\n    invalid,\n  };\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useMergedRefs","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useTagPickerControl_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","innerRef","useRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","children","role","expandIconMergeRef","observerRef","entry","current","style","setProperty","contentRect","width","aside","undefined","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","components","root","always","onMouseDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAGEC,eAAe,EACfC,wBAAwB,EACxBC,IAAI,EACJC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AAEnC,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,+BAA+B,QAAQ,qCAAqC;AACrF,SAASC,wBAAwB,QAAQ,wBAAwB;AAEjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;QAYgBH;IAVhB,MAAMI,YAAYR,6BAA6BS,CAAAA,MAAOA,IAAID,SAAS;IACnE,MAAME,aAAaV,6BAA6BS,CAAAA,MAAOA,IAAIC,UAAU;IACrE,MAAMC,oBAAoBX,6BAA6BS,CAAAA,MAAOA,IAAIE,iBAAiB;IACnF,MAAMC,OAAOZ,6BAA6BS,CAAAA,MAAOA,IAAIG,IAAI;IACzD,MAAMC,YAAYb,6BAA6BS,CAAAA,MAAOA,IAAII,SAAS;IACnE,MAAMC,UAAUd,6BAA6BS,CAAAA,MAAOA,IAAIK,OAAO;IAC/D,MAAMC,0BAA0Bf,6BAA6BS,CAAAA,MAAOA,IAAIO,kBAAkB;IAC1F,MAAMC,OAAOjB,6BAA6BS,CAAAA,MAAOA,IAAIQ,IAAI;IACzD,MAAMC,aAAalB,6BAA6BS,CAAAA,MAAOA,IAAIS,UAAU;IACrE,MAAMC,WAAWnB,6BAA6BS,CAAAA,MAAOA,IAAIU,QAAQ;IACjE,MAAMC,UAAUhB,EAAAA,4BAAAA,wCAAAA,gDAAAA,0BAA4BiB,eAAe,MAAK;IAChE,MAAMC,YAAYtB,6BAA6BS,CAAAA;YAAOA;eAAAA,CAAAA,iBAAAA,IAAIa,SAAS,cAAbb,4BAAAA,iBAAiB;IAAI;IAE3E,MAAMc,WAAW7B,MAAM8B,MAAM,CAAiB;IAC9C,MAAMC,gBAAgB/B,MAAM8B,MAAM,CAAkB;IACpD,MAAME,WAAWhC,MAAM8B,MAAM,CAAkB;IAE/C,MAAMG,kBAAkB9B,KAAK+B,QAAQ,CAACtB,MAAMqB,eAAe,EAAE;QAC3DE,aAAa;IACf;IACA,MAAMb,qBAAqBjB,cAAcgB,yBAAyBY,4BAAAA,sCAAAA,gBAAiBpB,GAAG;IACtF,IAAIoB,iBAAiB;QACnBA,gBAAgBpB,GAAG,GAAGS;IACxB;IAEA,MAAMc,aAAajC,KAAK+B,QAAQ,CAACtB,MAAMwB,UAAU,EAAE;QACjDC,iBAAiB,CAACT;QAClBU,cAAc;YACZ,iBAAiBpB;YACjBqB,wBAAU,oBAAChC;YACXiC,MAAM;QACR;QACAL,aAAa;IACf;IAEA,MAAMM,qBAAqBpC,cAAc+B,uBAAAA,iCAAAA,WAAYvB,GAAG,EAAEkB;IAC1D,IAAIK,YAAY;QACdA,WAAWvB,GAAG,GAAG4B;IACnB;IAEA,MAAMC,cAAclC,qBAAsC,CAAC,CAACmC,MAAM;YAChEd;SAAAA,oBAAAA,SAASe,OAAO,cAAhBf,wCAAAA,kBAAkBgB,KAAK,CAACC,WAAW,CAACrC,iCAAiC,CAAC,EAAEkC,MAAMI,WAAW,CAACC,KAAK,CAAC,EAAE,CAAC;IACrG;IACA,MAAMC,QAAQ9C,KAAK+B,QAAQ,CAAiCgB,WAAW;QACrEf,aAAa;QACbE,iBAAiBc,QAAQlB,mBAAmBG;QAC5CE,cAAc;YACZzB,KAAK6B;QACP;IACF;IACA,MAAMU,kBAAkB/C,cAAc2B,UAAUiB,kBAAAA,4BAAAA,MAAOpC,GAAG;IAC1D,IAAIoC,OAAO;QACTA,MAAMpC,GAAG,GAAGuC;IACd;IAEA,MAAMC,kBAAkBjD,iBAAiB,CAACkD;QACxC,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,IACEtD,gBAAgB8B,cAAca,OAAO,EAAEU,MAAME,MAAM,KACnDF,MAAME,MAAM,KAAK3B,SAASe,OAAO,IACjCU,MAAME,MAAM,KAAKvC,kBAAkB2B,OAAO,IAC1CU,MAAME,MAAM,KAAKxB,SAASY,OAAO,EACjC;gBAGA5B;YAFAsC,MAAMG,cAAc;YACpBrC,QAAQkC,OAAO,CAACpC;aAChBF,sBAAAA,WAAW4B,OAAO,cAAlB5B,0CAAAA,oBAAoB0C,KAAK;QAC3B;IACF;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;YACNxB,YAAY;YACZH,iBAAiB;YACjBgB,OAAO;QACT;QACAW,MAAMzD,KAAK0D,MAAM,CACf3D,yBAAyB,OAAO;YAC9BW,KAAKR,cAAcQ,KAAKC,WAAWe;YACnC,aAAaX,QAAQ,CAACU,YAAYT,YAAY+B;YAC9C,GAAGtC,KAAK;YACRkD,aAAaT;QACf,IACA;YAAElB,aAAa;QAAM;QAEvBc;QACAb;QACAH;QACAV;QACAC;QACAC;QACAC;IACF;AACF,EAAE"}

package/lib/components/TagPickerInput/useTagPickerInput.js

@@ -33,7 +33,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
     const setHasFocus = useTagPickerContext_unstable((ctx)=>ctx.setHasFocus);
     const clearSelection = useTagPickerContext_unstable((ctx)=>ctx.clearSelection);
     const open = useTagPickerContext_unstable((ctx)=>ctx.open);
-    const popoverId = useTagPickerContext_unstable((ctx)=>ctx.popoverId);
+    const popoverId = useTagPickerContext_unstable((ctx)=>ctx.noPopover ? undefined : ctx.popoverId);
     const selectOption = useTagPickerContext_unstable((ctx)=>ctx.selectOption);
     const getOptionById = useTagPickerContext_unstable((ctx)=>ctx.getOptionById);
     const contextValue = useTagPickerContext_unstable((ctx)=>ctx.value);

package/lib/components/TagPickerInput/useTagPickerInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type { TagPickerInputProps, TagPickerInputState } from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n  useMergedRefs,\n  getIntrinsicElementProps,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TagPickerInput.\n *\n * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n *\n * @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLDivElement of TagPickerInput\n */\nexport const useTagPickerInput_unstable = (\n  propsArg: TagPickerInputProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n  const props = useFieldControlProps_unstable(propsArg, {\n    supportsLabelFor: true,\n    supportsRequired: true,\n    supportsSize: true,\n  });\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n  const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n  const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    setTagPickerInputStretchStyle(triggerRef.current);\n  }, [selectedOptions, triggerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (triggerRef.current) {\n      const input = triggerRef.current;\n      const cb = () => setTagPickerInputStretchStyle(input);\n      input.addEventListener('input', cb);\n      return () => {\n        input.removeEventListener('input', cb);\n      };\n    }\n  }, [triggerRef]);\n\n  const { value = contextValue, disabled = contextDisabled } = props;\n  const { findLastFocusable } = useFocusFinders();\n\n  const isTypingRef = React.useRef(false);\n\n  const root = useInputTriggerSlot(\n    {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? popoverId : undefined,\n      disabled,\n      ...getIntrinsicElementProps('input', props),\n      onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n        if (\n          (event.key === ArrowLeft || event.key === Backspace) &&\n          event.currentTarget.selectionStart === 0 &&\n          tagPickerGroupRef.current\n        ) {\n          findLastFocusable(tagPickerGroupRef.current)?.focus();\n        } else if (event.key === Space) {\n          if (open && !isTypingRef.current) {\n            setOpen(event, false);\n          }\n        } else if (event.key === Enter) {\n          if (open) {\n            ReactDOM.unstable_batchedUpdates(() => {\n              setValue(undefined);\n              setOpen(event, false);\n            });\n          } else {\n            setOpen(event, true);\n          }\n        }\n        isTypingRef.current =\n          event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n      }),\n    },\n    useMergedRefs(triggerRef, ref),\n    {\n      activeDescendantController,\n      freeform: false,\n      state: {\n        clearSelection,\n        getOptionById,\n        open,\n        selectedOptions,\n        selectOption,\n        setHasFocus,\n        setOpen,\n        setValue,\n        multiselect: true,\n        value: props.value,\n      },\n    },\n  );\n\n  const state: TagPickerInputState = {\n    components: {\n      root: 'input',\n    },\n    root,\n    disabled,\n    size,\n  };\n\n  return state;\n};\n\n/**\n * while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n *\n * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n *\n * @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n  // first we need to remove the CSS variable\n  // to properly calculate the difference between scrollWidth and offsetWidth\n  input.style.removeProperty(tagPickerInputCSSRules.width);\n  if (input.scrollWidth > input.offsetWidth + 1) {\n    input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n  } else {\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n  }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTagPickerInput_unstable","propsArg","ref","props","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","size","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","isTypingRef","useRef","root","type","undefined","onKeyDown","event","key","currentTarget","selectionStart","focus","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useTagPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type { TagPickerInputProps, TagPickerInputState } from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n  useMergedRefs,\n  getIntrinsicElementProps,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TagPickerInput.\n *\n * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n *\n * @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLDivElement of TagPickerInput\n */\nexport const useTagPickerInput_unstable = (\n  propsArg: TagPickerInputProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n  const props = useFieldControlProps_unstable(propsArg, {\n    supportsLabelFor: true,\n    supportsRequired: true,\n    supportsSize: true,\n  });\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n  const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n  const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    setTagPickerInputStretchStyle(triggerRef.current);\n  }, [selectedOptions, triggerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (triggerRef.current) {\n      const input = triggerRef.current;\n      const cb = () => setTagPickerInputStretchStyle(input);\n      input.addEventListener('input', cb);\n      return () => {\n        input.removeEventListener('input', cb);\n      };\n    }\n  }, [triggerRef]);\n\n  const { value = contextValue, disabled = contextDisabled } = props;\n  const { findLastFocusable } = useFocusFinders();\n\n  const isTypingRef = React.useRef(false);\n\n  const root = useInputTriggerSlot(\n    {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? popoverId : undefined,\n      disabled,\n      ...getIntrinsicElementProps('input', props),\n      onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n        if (\n          (event.key === ArrowLeft || event.key === Backspace) &&\n          event.currentTarget.selectionStart === 0 &&\n          tagPickerGroupRef.current\n        ) {\n          findLastFocusable(tagPickerGroupRef.current)?.focus();\n        } else if (event.key === Space) {\n          if (open && !isTypingRef.current) {\n            setOpen(event, false);\n          }\n        } else if (event.key === Enter) {\n          if (open) {\n            ReactDOM.unstable_batchedUpdates(() => {\n              setValue(undefined);\n              setOpen(event, false);\n            });\n          } else {\n            setOpen(event, true);\n          }\n        }\n        isTypingRef.current =\n          event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n      }),\n    },\n    useMergedRefs(triggerRef, ref),\n    {\n      activeDescendantController,\n      freeform: false,\n      state: {\n        clearSelection,\n        getOptionById,\n        open,\n        selectedOptions,\n        selectOption,\n        setHasFocus,\n        setOpen,\n        setValue,\n        multiselect: true,\n        value: props.value,\n      },\n    },\n  );\n\n  const state: TagPickerInputState = {\n    components: {\n      root: 'input',\n    },\n    root,\n    disabled,\n    size,\n  };\n\n  return state;\n};\n\n/**\n * while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n *\n * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n *\n * @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n  // first we need to remove the CSS variable\n  // to properly calculate the difference between scrollWidth and offsetWidth\n  input.style.removeProperty(tagPickerInputCSSRules.width);\n  if (input.scrollWidth > input.offsetWidth + 1) {\n    input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n  } else {\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n  }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTagPickerInput_unstable","propsArg","ref","props","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","size","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","isTypingRef","useRef","root","type","onKeyDown","event","key","currentTarget","selectionStart","focus","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/contexts/TagPickerContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TagPickerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TagPickerSize } from '../components/TagPicker/TagPicker.types';\nimport { ComboboxBaseState } from '@fluentui/react-combobox';\n\nexport interface TagPickerContextValue\n  extends Pick<\n    ComboboxBaseState,\n    | 'open'\n    | 'clearSelection'\n    | 'getOptionById'\n    | 'selectedOptions'\n    | 'selectOption'\n    | 'setHasFocus'\n    | 'setOpen'\n    | 'setValue'\n    | 'value'\n    | 'appearance'\n    | 'disabled'\n  > {\n  triggerRef: React.RefObject<HTMLInputElement | HTMLButtonElement>;\n  popoverRef: React.RefObject<HTMLDivElement>;\n  popoverId: string;\n  targetRef: React.RefObject<HTMLDivElement>;\n  secondaryActionRef: React.RefObject<HTMLSpanElement>;\n  tagPickerGroupRef: React.RefObject<HTMLDivElement>;\n  size: TagPickerSize;\n}\n\n/**\n * @internal\n */\nexport const tagPickerContextDefaultValue: TagPickerContextValue = {\n  triggerRef: React.createRef<HTMLInputElement>(),\n  popoverRef: React.createRef<HTMLDivElement>(),\n  targetRef: React.createRef<HTMLDivElement>(),\n  tagPickerGroupRef: React.createRef<HTMLDivElement>(),\n  secondaryActionRef: React.createRef<HTMLDivElement>(),\n  open: false,\n  clearSelection: () => null,\n  getOptionById: () => undefined,\n  selectedOptions: [],\n  selectOption: () => null,\n  setHasFocus: () => null,\n  setOpen: () => null,\n  setValue: () => null,\n  value: undefined,\n  popoverId: '',\n  size: 'medium',\n  appearance: 'outline',\n  disabled: false,\n};\n\nconst TagPickerContext = createContext<TagPickerContextValue | undefined>(undefined);\n\nexport const TagPickerContextProvider = TagPickerContext.Provider;\nexport const useTagPickerContext_unstable = <T>(selector: ContextSelector<TagPickerContextValue, T>) =>\n  useContextSelector(TagPickerContext, (ctx = tagPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","tagPickerContextDefaultValue","triggerRef","createRef","popoverRef","targetRef","tagPickerGroupRef","secondaryActionRef","open","clearSelection","getOptionById","undefined","selectedOptions","selectOption","setHasFocus","setOpen","setValue","value","popoverId","size","appearance","disabled","TagPickerContext","TagPickerContextProvider","Provider","useTagPickerContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA0BC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AA4BtG;;CAEC,GACD,OAAO,MAAMC,+BAAsD;IACjEC,YAAYJ,MAAMK,SAAS;IAC3BC,YAAYN,MAAMK,SAAS;IAC3BE,WAAWP,MAAMK,SAAS;IAC1BG,mBAAmBR,MAAMK,SAAS;IAClCI,oBAAoBT,MAAMK,SAAS;IACnCK,MAAM;IACNC,gBAAgB,IAAM;IACtBC,eAAe,IAAMC;IACrBC,iBAAiB,EAAE;IACnBC,cAAc,IAAM;IACpBC,aAAa,IAAM;IACnBC,SAAS,IAAM;IACfC,UAAU,IAAM;IAChBC,OAAON;IACPO,WAAW;IACXC,MAAM;IACNC,YAAY;IACZC,UAAU;AACZ,EAAE;AAEF,MAAMC,mBAAmBvB,cAAiDY;AAE1E,OAAO,MAAMY,2BAA2BD,iBAAiBE,QAAQ,CAAC;AAClE,OAAO,MAAMC,+BAA+B,CAAIC,WAC9C1B,mBAAmBsB,kBAAkB,CAACK,MAAM1B,4BAA4B,GAAKyB,SAASC,MAAM"}
+{"version":3,"sources":["TagPickerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TagPickerSize } from '../components/TagPicker/TagPicker.types';\nimport { ComboboxBaseState } from '@fluentui/react-combobox';\n\nexport interface TagPickerContextValue\n  extends Pick<\n    ComboboxBaseState,\n    | 'open'\n    | 'clearSelection'\n    | 'getOptionById'\n    | 'selectedOptions'\n    | 'selectOption'\n    | 'setHasFocus'\n    | 'setOpen'\n    | 'setValue'\n    | 'value'\n    | 'appearance'\n    | 'disabled'\n  > {\n  triggerRef: React.RefObject<HTMLInputElement | HTMLButtonElement>;\n  popoverRef: React.RefObject<HTMLDivElement>;\n  popoverId: string;\n  targetRef: React.RefObject<HTMLDivElement>;\n  secondaryActionRef: React.RefObject<HTMLSpanElement>;\n  tagPickerGroupRef: React.RefObject<HTMLDivElement>;\n  size: TagPickerSize;\n  noPopover?: boolean;\n}\n\n/**\n * @internal\n */\nexport const tagPickerContextDefaultValue: TagPickerContextValue = {\n  triggerRef: React.createRef<HTMLInputElement>(),\n  popoverRef: React.createRef<HTMLDivElement>(),\n  targetRef: React.createRef<HTMLDivElement>(),\n  tagPickerGroupRef: React.createRef<HTMLDivElement>(),\n  secondaryActionRef: React.createRef<HTMLDivElement>(),\n  open: false,\n  clearSelection: () => null,\n  getOptionById: () => undefined,\n  selectedOptions: [],\n  selectOption: () => null,\n  setHasFocus: () => null,\n  setOpen: () => null,\n  setValue: () => null,\n  value: undefined,\n  popoverId: '',\n  size: 'medium',\n  appearance: 'outline',\n  disabled: false,\n};\n\nconst TagPickerContext = createContext<TagPickerContextValue | undefined>(undefined);\n\nexport const TagPickerContextProvider = TagPickerContext.Provider;\nexport const useTagPickerContext_unstable = <T>(selector: ContextSelector<TagPickerContextValue, T>) =>\n  useContextSelector(TagPickerContext, (ctx = tagPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","tagPickerContextDefaultValue","triggerRef","createRef","popoverRef","targetRef","tagPickerGroupRef","secondaryActionRef","open","clearSelection","getOptionById","undefined","selectedOptions","selectOption","setHasFocus","setOpen","setValue","value","popoverId","size","appearance","disabled","TagPickerContext","TagPickerContextProvider","Provider","useTagPickerContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA0BC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AA6BtG;;CAEC,GACD,OAAO,MAAMC,+BAAsD;IACjEC,YAAYJ,MAAMK,SAAS;IAC3BC,YAAYN,MAAMK,SAAS;IAC3BE,WAAWP,MAAMK,SAAS;IAC1BG,mBAAmBR,MAAMK,SAAS;IAClCI,oBAAoBT,MAAMK,SAAS;IACnCK,MAAM;IACNC,gBAAgB,IAAM;IACtBC,eAAe,IAAMC;IACrBC,iBAAiB,EAAE;IACnBC,cAAc,IAAM;IACpBC,aAAa,IAAM;IACnBC,SAAS,IAAM;IACfC,UAAU,IAAM;IAChBC,OAAON;IACPO,WAAW;IACXC,MAAM;IACNC,YAAY;IACZC,UAAU;AACZ,EAAE;AAEF,MAAMC,mBAAmBvB,cAAiDY;AAE1E,OAAO,MAAMY,2BAA2BD,iBAAiBE,QAAQ,CAAC;AAClE,OAAO,MAAMC,+BAA+B,CAAIC,WAC9C1B,mBAAmBsB,kBAAkB,CAACK,MAAM1B,4BAA4B,GAAKyB,SAASC,MAAM"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler } 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' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'\n  > &\n  Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {\n    onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n    onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n    /**\n     * Can contain two children including a trigger and a popover\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\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' | 'secondaryActionRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'tagPickerGroupRef' | 'size'\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":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler } 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' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'\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: [JSX.Element, JSX.Element | undefined | false] | JSX.Element;\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":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/TagPicker/useTagPicker.js

@@ -27,7 +27,7 @@ const useTagPicker_unstable = (props)=>{
     const triggerInnerRef = _react.useRef(null);
     const secondaryActionRef = _react.useRef(null);
     const tagPickerGroupRef = _react.useRef(null);
-    const { positioning, size = 'medium', inline = false } = props;
+    const { positioning, size = 'medium', inline = false, noPopover = false } = props;
     const { targetRef, containerRef } = (0, _reactpositioning.usePositioning)({
         position: 'below',
         align: 'start',
@@ -66,13 +66,14 @@ const useTagPicker_unstable = (props)=>{
         multiselect: true,
         size: 'medium'
     });
-    const { trigger, popover } = childrenToTriggerAndPopover(props.children);
+    const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);
     return {
         activeDescendantController,
         components: {},
         trigger,
         popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,
         popoverId,
+        noPopover,
         disabled: comboboxState.disabled,
         triggerRef: (0, _reactutilities.useMergedRefs)(triggerInnerRef, activeParentRef),
         popoverRef: (0, _reactutilities.useMergedRefs)(listboxRef, containerRef),
@@ -100,18 +101,23 @@ const useTagPicker_unstable = (props)=>{
         value: comboboxState.value
     };
 };
-const childrenToTriggerAndPopover = (children)=>{
+const childrenToTriggerAndPopover = (children, noPopover)=>{
     const childrenArray = _react.Children.toArray(children);
     if (process.env.NODE_ENV !== 'production') {
         if (childrenArray.length === 0) {
             // eslint-disable-next-line no-console
-            console.warn('Picker must contain at least one child');
+            console.warn('TagPicker must contain at least one child');
         }
         if (childrenArray.length > 2) {
             // eslint-disable-next-line no-console
-            console.warn('Picker must contain at most two children');
+            console.warn('TagPicker must contain at most two children');
         }
     }
+    if (noPopover) {
+        return {
+            trigger: childrenArray[0]
+        };
+    }
     let trigger = undefined;
     let popover = undefined;
     if (childrenArray.length === 2) {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { 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 { PositioningShorthandValue, 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 } = 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    editable: true,\n    multiselect: true,\n    size: 'medium',\n  });\n\n  const { trigger, popover } = childrenToTriggerAndPopover(props.children);\n\n  return {\n    activeDescendantController,\n    components: {},\n    trigger,\n    popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n    popoverId,\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: comboboxState.selectOption,\n    setHasFocus: comboboxState.setHasFocus,\n    setOpen: comboboxState.setOpen,\n    setValue: comboboxState.setValue,\n    value: comboboxState.value,\n  };\n};\n\nconst childrenToTriggerAndPopover = (children?: React.ReactNode) => {\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('Picker must contain at least one child');\n    }\n\n    if (childrenArray.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Picker must contain at most two children');\n    }\n  }\n\n  let trigger: React.ReactElement | undefined = undefined;\n  let popover: React.ReactElement | undefined = undefined;\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  return { trigger, popover };\n};\n"],"names":["useTagPicker_unstable","fallbackPositions","props","popoverId","useId","triggerInnerRef","React","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","targetRef","containerRef","usePositioning","position","align","offset","crossAxis","mainAxis","matchTargetSize","resolvePositioningShorthand","controller","activeDescendantController","activeParentRef","listboxRef","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","comboboxState","useComboboxBaseState","onOptionSelect","useEventCallback","event","data","selectedOptions","value","optionValue","type","onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","useMergedRefs","popoverRef","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useTagPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { 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 { PositioningShorthandValue, 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 } = 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    editable: true,\n    multiselect: true,\n    size: 'medium',\n  });\n\n  const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);\n\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: comboboxState.selectOption,\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":["useTagPicker_unstable","fallbackPositions","props","popoverId","useId","triggerInnerRef","React","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","noPopover","targetRef","containerRef","usePositioning","position","align","offset","crossAxis","mainAxis","matchTargetSize","resolvePositioningShorthand","controller","activeDescendantController","activeParentRef","listboxRef","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","comboboxState","useComboboxBaseState","onOptionSelect","useEventCallback","event","data","selectedOptions","value","optionValue","type","onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","useMergedRefs","popoverRef","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwBaA;;;eAAAA;;;;iEAxBU;gCACgC;+BAOtB;kCACsD;2BACnD;AAGpC,wFAAwF;AACxF,MAAMC,oBAAiD;IAAC;IAAS;IAAS;IAAa;IAAU;CAAa;AAUvG,MAAMD,wBAAwB,CAACE;IACpC,MAAMC,YAAYC,IAAAA,qBAAAA,EAAM;IACxB,MAAMC,kBAAkBC,OAAMC,MAAM,CAAuC;IAC3E,MAAMC,qBAAqBF,OAAMC,MAAM,CAAkB;IACzD,MAAME,oBAAoBH,OAAMC,MAAM,CAAiB;IACvD,MAAM,EAAEG,WAAW,EAAEC,OAAO,QAAQ,EAAEC,SAAS,KAAK,EAAEC,YAAY,KAAK,EAAE,GAAGX;IAE5E,MAAM,EAAEY,SAAS,EAAEC,YAAY,EAAE,GAAGC,IAAAA,gCAAAA,EAAe;QACjDC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCpB;QACAqB,iBAAiB;QACjB,GAAGC,IAAAA,6CAAAA,EAA4Bb,YAAY;IAC7C;IAEA,MAAM,EACJc,YAAYC,0BAA0B,EACtCC,eAAe,EACfC,UAAU,EACX,GAAGC,IAAAA,8BAAAA,EAAsD;QACxDC,aAAaC,CAAAA,KAAMA,GAAGC,SAAS,CAACC,QAAQ,CAACC,+BAAAA,CAAiBC,IAAI;IAChE;IAEA,MAAMC,gBAAgBC,IAAAA,mCAAAA,EAAqB;QACzC,GAAGlC,KAAK;QACRmC,gBAAgBC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBACvCtC;mBAAAA,CAAAA,wBAAAA,MAAMmC,cAAc,AAAdA,MAAc,QAApBnC,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAAA,IAAAA,CAAAA,OAAuBqC,OAAO;gBAC5BE,iBAAiBD,KAAKC,eAAe;gBACrCC,OAAOF,KAAKG,WAAW;gBACvBC,MAAML,MAAMK,IAAI;gBAChBL;YACF;;QAEFM,cAAcP,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBACrCtC;mBAAAA,CAAAA,sBAAAA,MAAM2C,YAAY,AAAZA,MAAY,QAAlB3C,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBqC,OAAO;gBAC1B,GAAGC,IAAI;gBACPI,MAAML,MAAMK,IAAI;gBAChBL;YACF;;QAEFd;QACAqB,UAAU;QACVC,aAAa;QACbpC,MAAM;IACR;IAEA,MAAM,EAAEqC,OAAO,EAAEC,OAAO,EAAE,GAAGC,4BAA4BhD,MAAMiD,QAAQ,EAAEtC;IAEzE,OAAO;QACLY;QACA2B,YAAY,CAAC;QACbJ;QACAC,SAASd,cAAckB,IAAI,IAAIlB,cAAcmB,QAAQ,GAAGL,UAAUM;QAClEpD;QACAU;QACA2C,UAAUrB,cAAcqB,QAAQ;QAChCC,YAAYC,IAAAA,6BAAAA,EAAcrD,iBAAiBqB;QAC3CiC,YAAYD,IAAAA,6BAAAA,EAAc/B,YAAYZ;QACtCP;QACAC;QACAK;QACAH;QACAC;QACAyC,MAAMlB,cAAckB,IAAI;QACxBO,WAAWzB,cAAcyB,SAAS;QAClCC,eAAevB,IAAAA,gCAAAA,EAAiBC,CAAAA;YAC9BJ,cAAc0B,aAAa,CAACtB;YAC5BJ,cAAc2B,OAAO,CAACvB,OAAO;QAC/B;QACAwB,YAAY5B,cAAc4B,UAAU;QACpCC,gBAAgB7B,cAAc6B,cAAc;QAC5CC,eAAe9B,cAAc8B,aAAa;QAC1CC,yBAAyB/B,cAAc+B,uBAAuB;QAC9DC,gBAAgBhC,cAAcgC,cAAc;QAC5C1B,iBAAiBN,cAAcM,eAAe;QAC9C2B,cAAcjC,cAAciC,YAAY;QACxCC,aAAalC,cAAckC,WAAW;QACtCP,SAAS3B,cAAc2B,OAAO;QAC9BQ,UAAUnC,cAAcmC,QAAQ;QAChC5B,OAAOP,cAAcO,KAAK;IAC5B;AACF;AAEA,MAAMQ,8BAA8B,CAACC,UAA2BtC;IAC9D,MAAM0D,gBAAgBjE,OAAMkE,QAAQ,CAACC,OAAO,CAACtB;IAE7C,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,GAAG;YAC9B,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACf;QAEA,IAAIR,cAAcM,MAAM,GAAG,GAAG;YAC5B,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACf;IACF;IAEA,IAAIlE,WAAW;QACb,OAAO;YAAEmC,SAASuB,aAAa,CAAC,EAAE;QAAC;IACrC;IAEA,IAAIvB,UAA0CO;IAC9C,IAAIN,UAA0CM;IAE9C,IAAIgB,cAAcM,MAAM,KAAK,GAAG;QAC9B7B,UAAUuB,aAAa,CAAC,EAAE;QAC1BtB,UAAUsB,aAAa,CAAC,EAAE;IAC5B,OAAO,IAAIA,cAAcM,MAAM,KAAK,GAAG;QACrC5B,UAAUsB,aAAa,CAAC,EAAE;IAC5B;IAEA,OAAO;QAAEvB;QAASC;IAAQ;AAC5B"}

package/lib-commonjs/components/TagPicker/useTagPickerContextValues.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useTagPickerContextValues", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useTagPickerContextValues(state) {
-    const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, getOptionsMatchingValue, open, popoverId, disabled } = state;
+    const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, getOptionsMatchingValue, open, popoverId, disabled, noPopover } = state;
     return {
         activeDescendant: _react.useMemo(()=>({
                 controller: state.activeDescendantController
@@ -46,7 +46,8 @@ function useTagPickerContextValues(state) {
             getOptionById,
             open,
             popoverId,
-            disabled
+            disabled,
+            noPopover
         }
     };
 }

package/lib-commonjs/components/TagPicker/useTagPickerContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerContextValues, TagPickerState } from './TagPicker.types';\n\nexport function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues {\n  const {\n    onOptionClick,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    value,\n    triggerRef,\n    secondaryActionRef,\n    tagPickerGroupRef,\n    targetRef,\n    size,\n    setValue,\n    setOpen,\n    setHasFocus,\n    popoverRef,\n    appearance,\n    clearSelection,\n    getOptionById,\n    getOptionsMatchingValue,\n    open,\n    popoverId,\n    disabled,\n  } = state;\n  return {\n    activeDescendant: React.useMemo(\n      () => ({ controller: state.activeDescendantController }),\n      [state.activeDescendantController],\n    ),\n    listbox: {\n      onOptionClick,\n      registerOption,\n      getOptionById,\n      getOptionsMatchingValue,\n      selectedOptions,\n      selectOption,\n      focusVisible: false,\n      setActiveOption: noop,\n    },\n    picker: {\n      value,\n      triggerRef,\n      targetRef,\n      secondaryActionRef,\n      tagPickerGroupRef,\n      size,\n      setValue,\n      setOpen,\n      setHasFocus,\n      selectOption,\n      popoverRef,\n      selectedOptions,\n      appearance,\n      clearSelection,\n      getOptionById,\n      open,\n      popoverId,\n      disabled,\n    },\n  };\n}\n\nconst noop = () => {\n  /** noop */\n};\n"],"names":["useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","getOptionsMatchingValue","open","popoverId","disabled","activeDescendant","React","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,0BAA0BC,KAAqB;IAC7D,MAAM,EACJC,aAAa,EACbC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,KAAK,EACLC,UAAU,EACVC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACT,GAAGrB;IACJ,OAAO;QACLsB,kBAAkBC,OAAMC,OAAO,CAC7B,IAAO,CAAA;gBAAEC,YAAYzB,MAAM0B,0BAA0B;YAAC,CAAA,GACtD;YAAC1B,MAAM0B,0BAA0B;SAAC;QAEpCC,SAAS;YACP1B;YACAC;YACAe;YACAC;YACAf;YACAC;YACAwB,cAAc;YACdC,iBAAiBC;QACnB;QACAC,QAAQ;YACN1B;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAE;YACAC;YACAC;QACF;IACF;AACF;AAEA,MAAMS,OAAO;AACX,SAAS,GACX"}
+{"version":3,"sources":["useTagPickerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerContextValues, TagPickerState } from './TagPicker.types';\n\nexport function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues {\n  const {\n    onOptionClick,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    value,\n    triggerRef,\n    secondaryActionRef,\n    tagPickerGroupRef,\n    targetRef,\n    size,\n    setValue,\n    setOpen,\n    setHasFocus,\n    popoverRef,\n    appearance,\n    clearSelection,\n    getOptionById,\n    getOptionsMatchingValue,\n    open,\n    popoverId,\n    disabled,\n    noPopover,\n  } = state;\n  return {\n    activeDescendant: React.useMemo(\n      () => ({ controller: state.activeDescendantController }),\n      [state.activeDescendantController],\n    ),\n    listbox: {\n      onOptionClick,\n      registerOption,\n      getOptionById,\n      getOptionsMatchingValue,\n      selectedOptions,\n      selectOption,\n      focusVisible: false,\n      setActiveOption: noop,\n    },\n    picker: {\n      value,\n      triggerRef,\n      targetRef,\n      secondaryActionRef,\n      tagPickerGroupRef,\n      size,\n      setValue,\n      setOpen,\n      setHasFocus,\n      selectOption,\n      popoverRef,\n      selectedOptions,\n      appearance,\n      clearSelection,\n      getOptionById,\n      open,\n      popoverId,\n      disabled,\n      noPopover,\n    },\n  };\n}\n\nconst noop = () => {\n  /** noop */\n};\n"],"names":["useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","getOptionsMatchingValue","open","popoverId","disabled","noPopover","activeDescendant","React","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,0BAA0BC,KAAqB;IAC7D,MAAM,EACJC,aAAa,EACbC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,KAAK,EACLC,UAAU,EACVC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACV,GAAGtB;IACJ,OAAO;QACLuB,kBAAkBC,OAAMC,OAAO,CAC7B,IAAO,CAAA;gBAAEC,YAAY1B,MAAM2B,0BAA0B;YAAC,CAAA,GACtD;YAAC3B,MAAM2B,0BAA0B;SAAC;QAEpCC,SAAS;YACP3B;YACAC;YACAe;YACAC;YACAf;YACAC;YACAyB,cAAc;YACdC,iBAAiBC;QACnB;QACAC,QAAQ;YACN3B;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAE;YACAC;YACAC;YACAC;QACF;IACF;AACF;AAEA,MAAMS,OAAO;AACX,SAAS,GACX"}

package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js

@@ -29,6 +29,10 @@ const useTagPickerControl_unstable = (props, ref)=>{
     const appearance = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.appearance);
     const disabled = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.disabled);
     const invalid = ((_useFieldContext_unstable = (0, _reactfield.useFieldContext_unstable)()) === null || _useFieldContext_unstable === void 0 ? void 0 : _useFieldContext_unstable.validationState) === 'error';
+    const noPopover = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>{
+        var _ctx_noPopover;
+        return (_ctx_noPopover = ctx.noPopover) !== null && _ctx_noPopover !== void 0 ? _ctx_noPopover : false;
+    });
     const innerRef = _react.useRef(null);
     const expandIconRef = _react.useRef(null);
     const asideRef = _react.useRef(null);
@@ -40,7 +44,7 @@ const useTagPickerControl_unstable = (props, ref)=>{
         secondaryAction.ref = secondaryActionRef;
     }
     const expandIcon = _reactutilities.slot.optional(props.expandIcon, {
-        renderByDefault: true,
+        renderByDefault: !noPopover,
         defaultProps: {
             'aria-expanded': open,
             children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null),
@@ -87,7 +91,7 @@ const useTagPickerControl_unstable = (props, ref)=>{
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             ref: (0, _reactutilities.useMergedRefs)(ref, targetRef, innerRef),
-            'aria-owns': open ? popoverId : undefined,
+            'aria-owns': open && !noPopover ? popoverId : undefined,
             ...props,
             onMouseDown: handleMouseDown
         }), {

package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  Slot,\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n  const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const invalid = useFieldContext_unstable()?.validationState === 'error';\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLSpanElement>(null);\n  const asideRef = React.useRef<HTMLSpanElement>(null);\n\n  const secondaryAction = slot.optional(props.secondaryAction, {\n    elementType: 'span',\n  });\n  const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n  if (secondaryAction) {\n    secondaryAction.ref = secondaryActionRef;\n  }\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: true,\n    defaultProps: {\n      'aria-expanded': open,\n      children: <ChevronDownRegular />,\n      role: 'button',\n    },\n    elementType: 'span',\n  });\n\n  const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconMergeRef;\n  }\n\n  const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n    innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n  });\n  const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n    elementType: 'span',\n    renderByDefault: Boolean(secondaryAction || expandIcon),\n    defaultProps: {\n      ref: observerRef,\n    },\n  });\n  const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n  if (aside) {\n    aside.ref = mergedAsideRefs;\n  }\n\n  const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (\n      elementContains(expandIconRef.current, event.target as Node) ||\n      event.target === innerRef.current ||\n      event.target === tagPickerGroupRef.current ||\n      event.target === asideRef.current\n    ) {\n      event.preventDefault();\n      setOpen(event, !open);\n      triggerRef.current?.focus();\n    }\n  });\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'span',\n      secondaryAction: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, targetRef, innerRef),\n        'aria-owns': open ? popoverId : undefined,\n        ...props,\n        onMouseDown: handleMouseDown,\n      }),\n      { elementType: 'div' },\n    ),\n    aside,\n    expandIcon,\n    secondaryAction,\n    size,\n    appearance,\n    disabled,\n    invalid,\n  };\n};\n"],"names":["useTagPickerControl_unstable","props","ref","useFieldContext_unstable","targetRef","useTagPickerContext_unstable","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","innerRef","React","useRef","expandIconRef","asideRef","secondaryAction","slot","optional","elementType","useMergedRefs","expandIcon","renderByDefault","defaultProps","children","createElement","ChevronDownRegular","role","expandIconMergeRef","observerRef","useResizeObserverRef","entry","current","style","setProperty","tagPickerControlAsideWidthToken","contentRect","width","aside","undefined","Boolean","mergedAsideRefs","handleMouseDown","useEventCallback","event","isDefaultPrevented","elementContains","target","preventDefault","focus","components","root","always","getIntrinsicElementProps","onMouseDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BaA;;;eAAAA;;;;iEA1BU;gCAShB;kCAEsC;4BACV;sCACE;iDACW;4BACP;AAWlC,MAAMA,+BAA+B,CAC1CC,OACAC;QAYgBC;IAVhB,MAAMC,YAAYC,IAAAA,8CAAAA,EAA6BC,CAAAA,MAAOA,IAAIF,SAAS;IACnE,MAAMG,aAAaF,IAAAA,8CAAAA,EAA6BC,CAAAA,MAAOA,IAAIC,UAAU;IACrE,MAAMC,oBAAoBH,IAAAA,8CAAAA,EAA6BC,CAAAA,MAAOA,IAAIE,iBAAiB;IACnF,MAAMC,OAAOJ,IAAAA,8CAAAA,EAA6BC,CAAAA,MAAOA,IAAIG,IAAI;IACzD,MAAMC,YAAYL,IAAAA,8CAAAA,EAA6BC,CAAAA,MAAOA,IAAII,SAAS;IACnE,MAAMC,UAAUN,IAAAA,8CAAAA,EAA6BC,CAAAA,MAAOA,IAAIK,OAAO;IAC/D,MAAMC,0BAA0BP,IAAAA,8CAAAA,EAA6BC,CAAAA,MAAOA,IAAIO,kBAAkB;IAC1F,MAAMC,OAAOT,IAAAA,8CAAAA,EAA6BC,CAAAA,MAAOA,IAAIQ,IAAI;IACzD,MAAMC,aAAaV,IAAAA,8CAAAA,EAA6BC,CAAAA,MAAOA,IAAIS,UAAU;IACrE,MAAMC,WAAWX,IAAAA,8CAAAA,EAA6BC,CAAAA,MAAOA,IAAIU,QAAQ;IACjE,MAAMC,UAAUd,CAAAA,CAAAA,4BAAAA,IAAAA,oCAAAA,GAAAA,MAAAA,QAAAA,8BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,0BAA4Be,eAAe,AAAfA,MAAoB;IAEhE,MAAMC,WAAWC,OAAMC,MAAM,CAAiB;IAC9C,MAAMC,gBAAgBF,OAAMC,MAAM,CAAkB;IACpD,MAAME,WAAWH,OAAMC,MAAM,CAAkB;IAE/C,MAAMG,kBAAkBC,oBAAAA,CAAKC,QAAQ,CAACzB,MAAMuB,eAAe,EAAE;QAC3DG,aAAa;IACf;IACA,MAAMd,qBAAqBe,IAAAA,6BAAAA,EAAchB,yBAAyBY,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAiBtB,GAAG;IACtF,IAAIsB,iBAAiB;QACnBA,gBAAgBtB,GAAG,GAAGW;IACxB;IAEA,MAAMgB,aAAaJ,oBAAAA,CAAKC,QAAQ,CAACzB,MAAM4B,UAAU,EAAE;QACjDC,iBAAiB;QACjBC,cAAc;YACZ,iBAAiBtB;YACjBuB,UAAAA,WAAAA,GAAUZ,OAAAa,aAAA,CAACC,8BAAAA,EAAAA;YACXC,MAAM;QACR;QACAR,aAAa;IACf;IAEA,MAAMS,qBAAqBR,IAAAA,6BAAAA,EAAcC,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAY3B,GAAG,EAAEoB;IAC1D,IAAIO,YAAY;QACdA,WAAW3B,GAAG,GAAGkC;IACnB;IAEA,MAAMC,cAAcC,IAAAA,0CAAAA,EAAsC,CAAC,CAACC,MAAM;YAChEpB;QAAAA,CAAAA,oBAAAA,SAASqB,OAAO,AAAPA,MAAO,QAAhBrB,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBsB,KAAK,CAACC,WAAW,CAACC,gEAAAA,EAAiC,CAAC,EAAEJ,MAAMK,WAAW,CAACC,KAAK,CAAC,EAAE,CAAC;IACrG;IACA,MAAMC,QAAQrB,oBAAAA,CAAKC,QAAQ,CAAiCqB,WAAW;QACrEpB,aAAa;QACbG,iBAAiBkB,QAAQxB,mBAAmBK;QAC5CE,cAAc;YACZ7B,KAAKmC;QACP;IACF;IACA,MAAMY,kBAAkBrB,IAAAA,6BAAAA,EAAcL,UAAUuB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAO5C,GAAG;IAC1D,IAAI4C,OAAO;QACTA,MAAM5C,GAAG,GAAG+C;IACd;IAEA,MAAMC,kBAAkBC,IAAAA,gCAAAA,EAAiB,CAACC;QACxC,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,IACEC,IAAAA,+BAAAA,EAAgBhC,cAAckB,OAAO,EAAEY,MAAMG,MAAM,KACnDH,MAAMG,MAAM,KAAKpC,SAASqB,OAAO,IACjCY,MAAMG,MAAM,KAAK/C,kBAAkBgC,OAAO,IAC1CY,MAAMG,MAAM,KAAKhC,SAASiB,OAAO,EACjC;gBAGAjC;YAFA6C,MAAMI,cAAc;YACpB7C,QAAQyC,OAAO,CAAC3C;YAChBF,CAAAA,sBAAAA,WAAWiC,OAAO,AAAPA,MAAO,QAAlBjC,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBkD,KAAK;QAC3B;IACF;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;YACN9B,YAAY;YACZL,iBAAiB;YACjBsB,OAAO;QACT;QACAa,MAAMlC,oBAAAA,CAAKmC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B3D,KAAK0B,IAAAA,6BAAAA,EAAc1B,KAAKE,WAAWe;YACnC,aAAaV,OAAOC,YAAYqC;YAChC,GAAG9C,KAAK;YACR6D,aAAaZ;QACf,IACA;YAAEvB,aAAa;QAAM;QAEvBmB;QACAjB;QACAL;QACAV;QACAC;QACAC;QACAC;IACF;AACF"}
+{"version":3,"sources":["useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  Slot,\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n  const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const invalid = useFieldContext_unstable()?.validationState === 'error';\n  const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLSpanElement>(null);\n  const asideRef = React.useRef<HTMLSpanElement>(null);\n\n  const secondaryAction = slot.optional(props.secondaryAction, {\n    elementType: 'span',\n  });\n  const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n  if (secondaryAction) {\n    secondaryAction.ref = secondaryActionRef;\n  }\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: !noPopover,\n    defaultProps: {\n      'aria-expanded': open,\n      children: <ChevronDownRegular />,\n      role: 'button',\n    },\n    elementType: 'span',\n  });\n\n  const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconMergeRef;\n  }\n\n  const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n    innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n  });\n  const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n    elementType: 'span',\n    renderByDefault: Boolean(secondaryAction || expandIcon),\n    defaultProps: {\n      ref: observerRef,\n    },\n  });\n  const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n  if (aside) {\n    aside.ref = mergedAsideRefs;\n  }\n\n  const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (\n      elementContains(expandIconRef.current, event.target as Node) ||\n      event.target === innerRef.current ||\n      event.target === tagPickerGroupRef.current ||\n      event.target === asideRef.current\n    ) {\n      event.preventDefault();\n      setOpen(event, !open);\n      triggerRef.current?.focus();\n    }\n  });\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'span',\n      secondaryAction: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, targetRef, innerRef),\n        'aria-owns': open && !noPopover ? popoverId : undefined,\n        ...props,\n        onMouseDown: handleMouseDown,\n      }),\n      { elementType: 'div' },\n    ),\n    aside,\n    expandIcon,\n    secondaryAction,\n    size,\n    appearance,\n    disabled,\n    invalid,\n  };\n};\n"],"names":["useTagPickerControl_unstable","props","ref","useFieldContext_unstable","targetRef","useTagPickerContext_unstable","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","innerRef","React","useRef","expandIconRef","asideRef","secondaryAction","slot","optional","elementType","useMergedRefs","expandIcon","renderByDefault","defaultProps","children","createElement","ChevronDownRegular","role","expandIconMergeRef","observerRef","useResizeObserverRef","entry","current","style","setProperty","tagPickerControlAsideWidthToken","contentRect","width","aside","undefined","Boolean","mergedAsideRefs","handleMouseDown","useEventCallback","event","isDefaultPrevented","elementContains","target","preventDefault","focus","components","root","always","getIntrinsicElementProps","onMouseDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/TagPickerInput/useTagPickerInput.js

@@ -36,7 +36,7 @@ const useTagPickerInput_unstable = (propsArg, ref)=>{
     const setHasFocus = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.setHasFocus);
     const clearSelection = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.clearSelection);
     const open = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.open);
-    const popoverId = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.popoverId);
+    const popoverId = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.noPopover ? undefined : ctx.popoverId);
     const selectOption = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.selectOption);
     const getOptionById = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.getOptionById);
     const contextValue = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.value);

package/lib-commonjs/components/TagPickerInput/useTagPickerInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type { TagPickerInputProps, TagPickerInputState } from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n  useMergedRefs,\n  getIntrinsicElementProps,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TagPickerInput.\n *\n * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n *\n * @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLDivElement of TagPickerInput\n */\nexport const useTagPickerInput_unstable = (\n  propsArg: TagPickerInputProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n  const props = useFieldControlProps_unstable(propsArg, {\n    supportsLabelFor: true,\n    supportsRequired: true,\n    supportsSize: true,\n  });\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n  const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n  const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    setTagPickerInputStretchStyle(triggerRef.current);\n  }, [selectedOptions, triggerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (triggerRef.current) {\n      const input = triggerRef.current;\n      const cb = () => setTagPickerInputStretchStyle(input);\n      input.addEventListener('input', cb);\n      return () => {\n        input.removeEventListener('input', cb);\n      };\n    }\n  }, [triggerRef]);\n\n  const { value = contextValue, disabled = contextDisabled } = props;\n  const { findLastFocusable } = useFocusFinders();\n\n  const isTypingRef = React.useRef(false);\n\n  const root = useInputTriggerSlot(\n    {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? popoverId : undefined,\n      disabled,\n      ...getIntrinsicElementProps('input', props),\n      onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n        if (\n          (event.key === ArrowLeft || event.key === Backspace) &&\n          event.currentTarget.selectionStart === 0 &&\n          tagPickerGroupRef.current\n        ) {\n          findLastFocusable(tagPickerGroupRef.current)?.focus();\n        } else if (event.key === Space) {\n          if (open && !isTypingRef.current) {\n            setOpen(event, false);\n          }\n        } else if (event.key === Enter) {\n          if (open) {\n            ReactDOM.unstable_batchedUpdates(() => {\n              setValue(undefined);\n              setOpen(event, false);\n            });\n          } else {\n            setOpen(event, true);\n          }\n        }\n        isTypingRef.current =\n          event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n      }),\n    },\n    useMergedRefs(triggerRef, ref),\n    {\n      activeDescendantController,\n      freeform: false,\n      state: {\n        clearSelection,\n        getOptionById,\n        open,\n        selectedOptions,\n        selectOption,\n        setHasFocus,\n        setOpen,\n        setValue,\n        multiselect: true,\n        value: props.value,\n      },\n    },\n  );\n\n  const state: TagPickerInputState = {\n    components: {\n      root: 'input',\n    },\n    root,\n    disabled,\n    size,\n  };\n\n  return state;\n};\n\n/**\n * while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n *\n * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n *\n * @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n  // first we need to remove the CSS variable\n  // to properly calculate the difference between scrollWidth and offsetWidth\n  input.style.removeProperty(tagPickerInputCSSRules.width);\n  if (input.scrollWidth > input.offsetWidth + 1) {\n    input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n  } else {\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n  }\n};\n"],"names":["useTagPickerInput_unstable","propsArg","ref","props","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","useActiveDescendantContext","size","useTagPickerContext_unstable","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","selectOption","getOptionById","contextValue","value","useIsomorphicLayoutEffect","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","useFocusFinders","isTypingRef","React","useRef","root","useInputTriggerSlot","type","undefined","getIntrinsicElementProps","onKeyDown","useEventCallback","event","key","ArrowLeft","Backspace","currentTarget","selectionStart","focus","Space","Enter","ReactDOM","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","useMergedRefs","freeform","state","multiselect","components","style","removeProperty","tagPickerInputCSSRules","width","scrollWidth","offsetWidth","setProperty"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useTagPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type { TagPickerInputProps, TagPickerInputState } from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n  useMergedRefs,\n  getIntrinsicElementProps,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TagPickerInput.\n *\n * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n *\n * @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLDivElement of TagPickerInput\n */\nexport const useTagPickerInput_unstable = (\n  propsArg: TagPickerInputProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n  const props = useFieldControlProps_unstable(propsArg, {\n    supportsLabelFor: true,\n    supportsRequired: true,\n    supportsSize: true,\n  });\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n  const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n  const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    setTagPickerInputStretchStyle(triggerRef.current);\n  }, [selectedOptions, triggerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (triggerRef.current) {\n      const input = triggerRef.current;\n      const cb = () => setTagPickerInputStretchStyle(input);\n      input.addEventListener('input', cb);\n      return () => {\n        input.removeEventListener('input', cb);\n      };\n    }\n  }, [triggerRef]);\n\n  const { value = contextValue, disabled = contextDisabled } = props;\n  const { findLastFocusable } = useFocusFinders();\n\n  const isTypingRef = React.useRef(false);\n\n  const root = useInputTriggerSlot(\n    {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? popoverId : undefined,\n      disabled,\n      ...getIntrinsicElementProps('input', props),\n      onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n        if (\n          (event.key === ArrowLeft || event.key === Backspace) &&\n          event.currentTarget.selectionStart === 0 &&\n          tagPickerGroupRef.current\n        ) {\n          findLastFocusable(tagPickerGroupRef.current)?.focus();\n        } else if (event.key === Space) {\n          if (open && !isTypingRef.current) {\n            setOpen(event, false);\n          }\n        } else if (event.key === Enter) {\n          if (open) {\n            ReactDOM.unstable_batchedUpdates(() => {\n              setValue(undefined);\n              setOpen(event, false);\n            });\n          } else {\n            setOpen(event, true);\n          }\n        }\n        isTypingRef.current =\n          event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n      }),\n    },\n    useMergedRefs(triggerRef, ref),\n    {\n      activeDescendantController,\n      freeform: false,\n      state: {\n        clearSelection,\n        getOptionById,\n        open,\n        selectedOptions,\n        selectOption,\n        setHasFocus,\n        setOpen,\n        setValue,\n        multiselect: true,\n        value: props.value,\n      },\n    },\n  );\n\n  const state: TagPickerInputState = {\n    components: {\n      root: 'input',\n    },\n    root,\n    disabled,\n    size,\n  };\n\n  return state;\n};\n\n/**\n * while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n *\n * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n *\n * @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n  // first we need to remove the CSS variable\n  // to properly calculate the difference between scrollWidth and offsetWidth\n  input.style.removeProperty(tagPickerInputCSSRules.width);\n  if (input.scrollWidth > input.offsetWidth + 1) {\n    input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n  } else {\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n  }\n};\n"],"names":["useTagPickerInput_unstable","propsArg","ref","props","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","useActiveDescendantContext","size","useTagPickerContext_unstable","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","useIsomorphicLayoutEffect","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","useFocusFinders","isTypingRef","React","useRef","root","useInputTriggerSlot","type","getIntrinsicElementProps","onKeyDown","useEventCallback","event","key","ArrowLeft","Backspace","currentTarget","selectionStart","focus","Space","Enter","ReactDOM","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","useMergedRefs","freeform","state","multiselect","components","style","removeProperty","tagPickerInputCSSRules","width","scrollWidth","offsetWidth","setProperty"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/contexts/TagPickerContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TagPickerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TagPickerSize } from '../components/TagPicker/TagPicker.types';\nimport { ComboboxBaseState } from '@fluentui/react-combobox';\n\nexport interface TagPickerContextValue\n  extends Pick<\n    ComboboxBaseState,\n    | 'open'\n    | 'clearSelection'\n    | 'getOptionById'\n    | 'selectedOptions'\n    | 'selectOption'\n    | 'setHasFocus'\n    | 'setOpen'\n    | 'setValue'\n    | 'value'\n    | 'appearance'\n    | 'disabled'\n  > {\n  triggerRef: React.RefObject<HTMLInputElement | HTMLButtonElement>;\n  popoverRef: React.RefObject<HTMLDivElement>;\n  popoverId: string;\n  targetRef: React.RefObject<HTMLDivElement>;\n  secondaryActionRef: React.RefObject<HTMLSpanElement>;\n  tagPickerGroupRef: React.RefObject<HTMLDivElement>;\n  size: TagPickerSize;\n}\n\n/**\n * @internal\n */\nexport const tagPickerContextDefaultValue: TagPickerContextValue = {\n  triggerRef: React.createRef<HTMLInputElement>(),\n  popoverRef: React.createRef<HTMLDivElement>(),\n  targetRef: React.createRef<HTMLDivElement>(),\n  tagPickerGroupRef: React.createRef<HTMLDivElement>(),\n  secondaryActionRef: React.createRef<HTMLDivElement>(),\n  open: false,\n  clearSelection: () => null,\n  getOptionById: () => undefined,\n  selectedOptions: [],\n  selectOption: () => null,\n  setHasFocus: () => null,\n  setOpen: () => null,\n  setValue: () => null,\n  value: undefined,\n  popoverId: '',\n  size: 'medium',\n  appearance: 'outline',\n  disabled: false,\n};\n\nconst TagPickerContext = createContext<TagPickerContextValue | undefined>(undefined);\n\nexport const TagPickerContextProvider = TagPickerContext.Provider;\nexport const useTagPickerContext_unstable = <T>(selector: ContextSelector<TagPickerContextValue, T>) =>\n  useContextSelector(TagPickerContext, (ctx = tagPickerContextDefaultValue) => selector(ctx));\n"],"names":["TagPickerContextProvider","tagPickerContextDefaultValue","useTagPickerContext_unstable","triggerRef","React","createRef","popoverRef","targetRef","tagPickerGroupRef","secondaryActionRef","open","clearSelection","getOptionById","undefined","selectedOptions","selectOption","setHasFocus","setOpen","setValue","value","popoverId","size","appearance","disabled","TagPickerContext","createContext","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAuDaA,wBAAAA;eAAAA;;IAvBAC,4BAAAA;eAAAA;;IAwBAC,4BAAAA;eAAAA;;;;iEAxDU;sCAC4C;AA+B5D,MAAMD,+BAAsD;IACjEE,0BAAYC,OAAMC,SAAS;IAC3BC,0BAAYF,OAAMC,SAAS;IAC3BE,yBAAWH,OAAMC,SAAS;IAC1BG,iCAAmBJ,OAAMC,SAAS;IAClCI,kCAAoBL,OAAMC,SAAS;IACnCK,MAAM;IACNC,gBAAgB,IAAM;IACtBC,eAAe,IAAMC;IACrBC,iBAAiB,EAAE;IACnBC,cAAc,IAAM;IACpBC,aAAa,IAAM;IACnBC,SAAS,IAAM;IACfC,UAAU,IAAM;IAChBC,OAAON;IACPO,WAAW;IACXC,MAAM;IACNC,YAAY;IACZC,UAAU;AACZ;AAEA,MAAMC,mBAAmBC,IAAAA,mCAAAA,EAAiDZ;AAEnE,MAAMb,2BAA2BwB,iBAAiBE,QAAQ;AAC1D,MAAMxB,+BAA+B,CAAIyB,WAC9CC,IAAAA,wCAAAA,EAAmBJ,kBAAkB,CAACK,MAAM5B,4BAA4B,GAAK0B,SAASE"}
+{"version":3,"sources":["TagPickerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TagPickerSize } from '../components/TagPicker/TagPicker.types';\nimport { ComboboxBaseState } from '@fluentui/react-combobox';\n\nexport interface TagPickerContextValue\n  extends Pick<\n    ComboboxBaseState,\n    | 'open'\n    | 'clearSelection'\n    | 'getOptionById'\n    | 'selectedOptions'\n    | 'selectOption'\n    | 'setHasFocus'\n    | 'setOpen'\n    | 'setValue'\n    | 'value'\n    | 'appearance'\n    | 'disabled'\n  > {\n  triggerRef: React.RefObject<HTMLInputElement | HTMLButtonElement>;\n  popoverRef: React.RefObject<HTMLDivElement>;\n  popoverId: string;\n  targetRef: React.RefObject<HTMLDivElement>;\n  secondaryActionRef: React.RefObject<HTMLSpanElement>;\n  tagPickerGroupRef: React.RefObject<HTMLDivElement>;\n  size: TagPickerSize;\n  noPopover?: boolean;\n}\n\n/**\n * @internal\n */\nexport const tagPickerContextDefaultValue: TagPickerContextValue = {\n  triggerRef: React.createRef<HTMLInputElement>(),\n  popoverRef: React.createRef<HTMLDivElement>(),\n  targetRef: React.createRef<HTMLDivElement>(),\n  tagPickerGroupRef: React.createRef<HTMLDivElement>(),\n  secondaryActionRef: React.createRef<HTMLDivElement>(),\n  open: false,\n  clearSelection: () => null,\n  getOptionById: () => undefined,\n  selectedOptions: [],\n  selectOption: () => null,\n  setHasFocus: () => null,\n  setOpen: () => null,\n  setValue: () => null,\n  value: undefined,\n  popoverId: '',\n  size: 'medium',\n  appearance: 'outline',\n  disabled: false,\n};\n\nconst TagPickerContext = createContext<TagPickerContextValue | undefined>(undefined);\n\nexport const TagPickerContextProvider = TagPickerContext.Provider;\nexport const useTagPickerContext_unstable = <T>(selector: ContextSelector<TagPickerContextValue, T>) =>\n  useContextSelector(TagPickerContext, (ctx = tagPickerContextDefaultValue) => selector(ctx));\n"],"names":["TagPickerContextProvider","tagPickerContextDefaultValue","useTagPickerContext_unstable","triggerRef","React","createRef","popoverRef","targetRef","tagPickerGroupRef","secondaryActionRef","open","clearSelection","getOptionById","undefined","selectedOptions","selectOption","setHasFocus","setOpen","setValue","value","popoverId","size","appearance","disabled","TagPickerContext","createContext","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAwDaA,wBAAAA;eAAAA;;IAvBAC,4BAAAA;eAAAA;;IAwBAC,4BAAAA;eAAAA;;;;iEAzDU;sCAC4C;AAgC5D,MAAMD,+BAAsD;IACjEE,0BAAYC,OAAMC,SAAS;IAC3BC,0BAAYF,OAAMC,SAAS;IAC3BE,yBAAWH,OAAMC,SAAS;IAC1BG,iCAAmBJ,OAAMC,SAAS;IAClCI,kCAAoBL,OAAMC,SAAS;IACnCK,MAAM;IACNC,gBAAgB,IAAM;IACtBC,eAAe,IAAMC;IACrBC,iBAAiB,EAAE;IACnBC,cAAc,IAAM;IACpBC,aAAa,IAAM;IACnBC,SAAS,IAAM;IACfC,UAAU,IAAM;IAChBC,OAAON;IACPO,WAAW;IACXC,MAAM;IACNC,YAAY;IACZC,UAAU;AACZ;AAEA,MAAMC,mBAAmBC,IAAAA,mCAAAA,EAAiDZ;AAEnE,MAAMb,2BAA2BwB,iBAAiBE,QAAQ;AAC1D,MAAMxB,+BAA+B,CAAIyB,WAC9CC,IAAAA,wCAAAA,EAAmBJ,kBAAkB,CAACK,MAAM5B,4BAA4B,GAAK0B,SAASE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tag-picker",
-  "version": "9.2.4",
+  "version": "9.3.0",
   "description": "FluentUI TagPicker component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -45,16 +45,16 @@
     "@fluentui/react-shared-contexts": "^9.20.0",
     "@fluentui/react-theme": "^9.1.19",
     "@fluentui/react-utilities": "^9.18.13",
-    "@fluentui/react-portal": "^9.4.31",
-    "@fluentui/react-tabster": "^9.22.3",
-    "@fluentui/react-aria": "^9.13.2",
+    "@fluentui/react-portal": "^9.4.32",
+    "@fluentui/react-tabster": "^9.22.4",
+    "@fluentui/react-aria": "^9.13.3",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-combobox": "^9.13.3",
-    "@fluentui/react-tags": "^9.3.13",
+    "@fluentui/react-combobox": "^9.13.4",
+    "@fluentui/react-tags": "^9.3.15",
     "@fluentui/react-context-selector": "^9.1.65",
     "@fluentui/react-positioning": "^9.15.7",
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-field": "^9.1.72",
+    "@fluentui/react-field": "^9.1.73",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },