@fluentui/react-tag-picker 9.1.0 → 9.2.0

package/CHANGELOG.md

@@ -1,12 +1,51 @@
 # Change Log - @fluentui/react-tag-picker
 
-This log was last generated on Thu, 06 Jun 2024 15:22:22 GMT and should not be manually modified.
+This log was last generated on Mon, 01 Jul 2024 20:25:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.2.0)
+
+Mon, 01 Jul 2024 20:25:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.1.1..@fluentui/react-tag-picker_v9.2.0)
+
+### Minor changes
+
+- Update internal state to match Combobox and Listbox changes ([PR #31415](https://github.com/microsoft/fluentui/pull/31415) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.40 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-utilities to v9.18.11 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-portal to v9.4.29 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-tabster to v9.22.1 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-aria to v9.13.0 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-combobox to v9.12.0 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-tags to v9.3.10 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.63 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-positioning to v9.15.4 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-field to v9.1.69 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+
+### Patches
+
+- chore: Update react-icons package to ^2.0.245 ([PR #31802](https://github.com/microsoft/fluentui/pull/31802) by ololubek@microsoft.com)
+- chore: add eslint react-compiler ([PR #31457](https://github.com/microsoft/fluentui/pull/31457) by seanmonahan@microsoft.com)
+
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.1.1)
+
+Mon, 17 Jun 2024 07:34:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.1.0..@fluentui/react-tag-picker_v9.1.1)
+
+### Patches
+
+- Bump @fluentui/react-portal to v9.4.28 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
+- Bump @fluentui/react-tabster to v9.22.0 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
+- Bump @fluentui/react-aria to v9.12.1 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
+- Bump @fluentui/react-combobox to v9.11.8 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
+- Bump @fluentui/react-tags to v9.3.9 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.62 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
+- Bump @fluentui/react-field to v9.1.68 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
+
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.1.0)
 
-Thu, 06 Jun 2024 15:22:22 GMT 
+Thu, 06 Jun 2024 15:26:40 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.0.4..@fluentui/react-tag-picker_v9.1.0)
 
 ### Minor changes
@@ -25,7 +64,7 @@ Thu, 06 Jun 2024 15:22:22 GMT
 
 ## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.0.4)
 
-Thu, 23 May 2024 08:02:49 GMT 
+Thu, 23 May 2024 08:02:49 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.0.3..@fluentui/react-tag-picker_v9.0.4)
 
 ### Patches
@@ -40,7 +79,7 @@ Thu, 23 May 2024 08:02:49 GMT
 
 ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.0.3)
 
-Mon, 20 May 2024 12:45:06 GMT 
+Mon, 20 May 2024 12:45:06 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.0.2..@fluentui/react-tag-picker_v9.0.3)
 
 ### Patches
@@ -60,7 +99,7 @@ Mon, 20 May 2024 12:45:06 GMT
 
 ## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.0.2)
 
-Thu, 16 May 2024 09:25:19 GMT 
+Thu, 16 May 2024 09:25:19 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.0.1..@fluentui/react-tag-picker_v9.0.2)
 
 ### Patches
@@ -72,7 +111,7 @@ Thu, 16 May 2024 09:25:19 GMT
 
 ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.0.1)
 
-Mon, 13 May 2024 12:34:20 GMT 
+Mon, 13 May 2024 12:34:20 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.0.0..@fluentui/react-tag-picker_v9.0.1)
 
 ### Patches
@@ -81,7 +120,7 @@ Mon, 13 May 2024 12:34:20 GMT
 
 ## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.0.0)
 
-Thu, 09 May 2024 19:35:12 GMT 
+Thu, 09 May 2024 19:35:12 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker-preview_v0.5.0..@fluentui/react-tag-picker_v9.0.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -322,7 +322,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' | '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'> & {
     trigger: React_2.ReactNode;
     popover?: React_2.ReactNode;
     inline: boolean;
@@ -411,7 +411,7 @@ export declare const useTagPickerGroupStyles_unstable: (state: TagPickerGroupSta
  * @param props - props from this instance of TagPickerInput
  * @param ref - reference to root HTMLDivElement of TagPickerInput
  */
-export declare const useTagPickerInput_unstable: (props: TagPickerInputProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputState;
+export declare const useTagPickerInput_unstable: (propsArg: TagPickerInputProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputState;
 
 /**
  * Apply styling to the TagPickerInput slots based on the state

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    | '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":[],"mappings":"AAAA,WAsFE"}
+{"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":[],"mappings":"AAAA,WAuFE"}

package/lib/components/TagPicker/useTagPicker.js

@@ -87,6 +87,7 @@ const fallbackPositions = [
         appearance: comboboxState.appearance,
         clearSelection: comboboxState.clearSelection,
         getOptionById: comboboxState.getOptionById,
+        getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,
         registerOption: comboboxState.registerOption,
         selectedOptions: comboboxState.selectedOptions,
         selectOption: comboboxState.selectOption,

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    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","registerOption","selectOption","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"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 } = 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"],"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, 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 } = state;
     return {
         activeDescendant: React.useMemo(()=>({
                 controller: state.activeDescendantController
@@ -10,6 +10,8 @@ export function useTagPickerContextValues(state) {
         listbox: {
             onOptionClick,
             registerOption,
+            getOptionById,
+            getOptionsMatchingValue,
             selectedOptions,
             selectOption,
             focusVisible: false,

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    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      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","open","popoverId","disabled","activeDescendant","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"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,IAAI,EACJC,SAAS,EACTC,QAAQ,EACT,GAAGpB;IACJ,OAAO;QACLqB,kBAAkBvB,MAAMwB,OAAO,CAC7B,IAAO,CAAA;gBAAEC,YAAYvB,MAAMwB,0BAA0B;YAAC,CAAA,GACtD;YAACxB,MAAMwB,0BAA0B;SAAC;QAEpCC,SAAS;YACPxB;YACAC;YACAC;YACAC;YACAsB,cAAc;YACdC,iBAAiBC;QACnB;QACAC,QAAQ;YACNxB;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAC;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  } = 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"],"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","Bt984gj","sshi5w","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","sj55zd","i8kkvl","Bceei9c","Bahqtrf","fsow6f","Bh6795r","Brovlpu","placeholder","medium","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","mc9l5x","visuallyHidden","Bh84pgu","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","qhf8xq","d","p","f","h","a","m","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"sources":["useTagPickerButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerButtonClassNames = {\n    root: 'fui-TagPickerButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    button: {\n        alignItems: 'center',\n        minHeight: '32px',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXXS,\n        cursor: 'pointer',\n        fontFamily: tokens.fontFamilyBase,\n        textAlign: 'left',\n        flexGrow: 1,\n        '&:focus': {\n            outlineStyle: 'none'\n        }\n    },\n    placeholder: {\n        color: tokens.colorNeutralForeground4\n    },\n    // size variants\n    medium: {\n        ...typographyStyles.caption1,\n        padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        ...typographyStyles.body1,\n        padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    'extra-large': {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledText: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    },\n    hidden: {\n        display: 'none'\n    },\n    visuallyHidden: {\n        clip: 'rect(0px, 0px, 0px, 0px)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0px',\n        width: '1px',\n        position: 'absolute'\n    }\n});\n/**\n * Apply styling to the PickerButton slots based on the state\n */ export const useTagPickerButtonStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","Bt984gj","sshi5w","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","sj55zd","i8kkvl","Bceei9c","Bahqtrf","fsow6f","Bh6795r","Brovlpu","placeholder","medium","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","mc9l5x","visuallyHidden","Bh84pgu","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","qhf8xq","d","p","f","h","a","m","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"sources":["useTagPickerButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerButtonClassNames = {\n    root: 'fui-TagPickerButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    button: {\n        alignItems: 'center',\n        minHeight: '32px',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXXS,\n        cursor: 'pointer',\n        fontFamily: tokens.fontFamilyBase,\n        textAlign: 'left',\n        flexGrow: 1,\n        '&:focus': {\n            outlineStyle: 'none'\n        }\n    },\n    placeholder: {\n        color: tokens.colorNeutralForeground4\n    },\n    // size variants\n    medium: {\n        ...typographyStyles.caption1,\n        padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        ...typographyStyles.body1,\n        padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    'extra-large': {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledText: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    },\n    hidden: {\n        display: 'none'\n    },\n    visuallyHidden: {\n        clip: 'rect(0px, 0px, 0px, 0px)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0px',\n        width: '1px',\n        position: 'absolute'\n    }\n});\n/**\n * Apply styling to the PickerButton slots based on the state\n */ export const useTagPickerButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js

@@ -280,6 +280,8 @@ const useIconStyles = /*#__PURE__*/__styles({
  * Apply styling to the PickerControl slots based on the state
  */
 export const useTagPickerControlStyles_unstable = state => {
+  'use no memo';
+
   const styles = useStyles();
   const iconStyles = useIconStyles();
   const asideStyles = useAsideStyles();

package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Budl1dq","wkccdc","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Be2twd7","Bo70h7d","Frg6f3","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","className","size","appearance"],"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerControlClassNames = {\n    root: 'fui-TagPickerControl',\n    expandIcon: 'fui-TagPickerControl__expandIcon',\n    secondaryAction: 'fui-TagPickerControl__secondaryAction',\n    aside: 'fui-TagPickerControl__aside'\n};\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        borderRadius: tokens.borderRadiusMedium,\n        paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n        paddingLeft: tokens.spacingHorizontalM,\n        alignItems: 'center',\n        columnGap: tokens.spacingHorizontalXXS,\n        boxSizing: 'border-box',\n        display: 'flex',\n        minWidth: '250px',\n        position: 'relative',\n        flexWrap: 'wrap',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // size variants\n    medium: {\n        minHeight: '32px'\n    },\n    large: {\n        minHeight: '40px'\n    },\n    'extra-large': {\n        minHeight: '44px'\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useAsideStyles = makeStyles({\n    root: {\n        display: 'grid',\n        alignItems: 'center',\n        position: 'absolute',\n        top: '0',\n        right: tokens.spacingHorizontalM,\n        gridTemplateColumns: 'repeat(2, auto)',\n        gridTemplateRows: 'minmax(32px, auto) 1fr',\n        height: '100%',\n        cursor: 'text'\n    },\n    // size variants\n    medium: {\n        minHeight: '32px'\n    },\n    large: {\n        minHeight: '40px'\n    },\n    'extra-large': {\n        minHeight: '44px'\n    }\n});\nexport const iconSizes = {\n    small: '16px',\n    medium: '20px',\n    large: '24px'\n};\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    // icon size variants\n    medium: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    'extra-large': {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the PickerControl slots based on the state\n */ export const useTagPickerControlStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const asideStyles = useAsideStyles();\n    state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);\n    if (state.aside) {\n        state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);\n    }\n    if (state.secondaryAction) {\n        state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, state.secondaryAction.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Budl1dq","wkccdc","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Be2twd7","Bo70h7d","Frg6f3","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","className","size","appearance"],"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerControlClassNames = {\n    root: 'fui-TagPickerControl',\n    expandIcon: 'fui-TagPickerControl__expandIcon',\n    secondaryAction: 'fui-TagPickerControl__secondaryAction',\n    aside: 'fui-TagPickerControl__aside'\n};\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        borderRadius: tokens.borderRadiusMedium,\n        paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n        paddingLeft: tokens.spacingHorizontalM,\n        alignItems: 'center',\n        columnGap: tokens.spacingHorizontalXXS,\n        boxSizing: 'border-box',\n        display: 'flex',\n        minWidth: '250px',\n        position: 'relative',\n        flexWrap: 'wrap',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // size variants\n    medium: {\n        minHeight: '32px'\n    },\n    large: {\n        minHeight: '40px'\n    },\n    'extra-large': {\n        minHeight: '44px'\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useAsideStyles = makeStyles({\n    root: {\n        display: 'grid',\n        alignItems: 'center',\n        position: 'absolute',\n        top: '0',\n        right: tokens.spacingHorizontalM,\n        gridTemplateColumns: 'repeat(2, auto)',\n        gridTemplateRows: 'minmax(32px, auto) 1fr',\n        height: '100%',\n        cursor: 'text'\n    },\n    // size variants\n    medium: {\n        minHeight: '32px'\n    },\n    large: {\n        minHeight: '40px'\n    },\n    'extra-large': {\n        minHeight: '44px'\n    }\n});\nexport const iconSizes = {\n    small: '16px',\n    medium: '20px',\n    large: '24px'\n};\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    // icon size variants\n    medium: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    'extra-large': {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the PickerControl slots based on the state\n */ export const useTagPickerControlStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const asideStyles = useAsideStyles();\n    state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);\n    if (state.aside) {\n        state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);\n    }\n    if (state.secondaryAction) {\n        state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, state.secondaryAction.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/TagPickerGroup/useTagPickerGroupStyles.styles.js

@@ -63,6 +63,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the TagPickerGroup slots based on the state
  */
 export const useTagPickerGroupStyles_unstable = state => {
+  'use no memo';
+
   useTagGroupStyles_unstable(state);
   const styles = useStyles();
   state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);

package/lib/components/TagPickerGroup/useTagPickerGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","Eh141a","B7ck84d","Bceei9c","medium","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","large","d","p","useTagPickerGroupStyles_unstable","state","styles","className","size"],"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\nexport const tagPickerGroupClassNames = {\n    root: 'fui-TagPickerGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flexWrap: 'wrap',\n        boxSizing: 'border-box',\n        cursor: 'text'\n    },\n    // size variants\n    medium: {\n        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n        gap: tokens.spacingHorizontalXS\n    },\n    large: {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        gap: tokens.spacingHorizontalSNudge\n    },\n    'extra-large': {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        gap: tokens.spacingHorizontalSNudge\n    }\n});\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */ export const useTagPickerGroupStyles_unstable = (state)=>{\n    useTagGroupStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzDtB,0BAA0B,CAACsB,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACrB,sBAAsB,CAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACjJ,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","Eh141a","B7ck84d","Bceei9c","medium","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","large","d","p","useTagPickerGroupStyles_unstable","state","styles","className","size"],"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\nexport const tagPickerGroupClassNames = {\n    root: 'fui-TagPickerGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flexWrap: 'wrap',\n        boxSizing: 'border-box',\n        cursor: 'text'\n    },\n    // size variants\n    medium: {\n        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n        gap: tokens.spacingHorizontalXS\n    },\n    large: {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        gap: tokens.spacingHorizontalSNudge\n    },\n    'extra-large': {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        gap: tokens.spacingHorizontalSNudge\n    }\n});\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */ export const useTagPickerGroupStyles_unstable = (state)=>{\n    'use no memo';\n    useTagGroupStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACbtB,0BAA0B,CAACsB,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACrB,sBAAsB,CAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACjJ,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TagPickerInput/useTagPickerInput.js

@@ -16,8 +16,8 @@ import { useFocusFinders } from '@fluentui/react-tabster';
  *
  * @param props - props from this instance of TagPickerInput
  * @param ref - reference to root HTMLDivElement of TagPickerInput
- */ export const useTagPickerInput_unstable = (props, ref)=>{
-    props = useFieldControlProps_unstable(props, {
+ */ export const useTagPickerInput_unstable = (propsArg, ref)=>{
+    const props = useFieldControlProps_unstable(propsArg, {
         supportsLabelFor: true,
         supportsRequired: true,
         supportsSize: true

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  props: TagPickerInputProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\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","props","ref","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"],"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.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"],"mappings":"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"}

package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.js

@@ -61,6 +61,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the TagPickerInput slots based on the state
  */
 export const useTagPickerInputStyles_unstable = state => {
+  'use no memo';
+
   const baseStyle = useBaseStyle();
   const styles = useStyles();
   state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);

package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","useStyles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","p","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport { tagPickerInputTokens } from '../../utils/tokens';\nexport const tagPickerInputClassNames = {\n    root: 'fui-TagPickerInput'\n};\nconst useBaseStyle = makeResetStyles({\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n    boxSizing: 'border-box',\n    '&:focus': {\n        outlineStyle: 'none'\n    },\n    '&::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    },\n    '&::after': {\n        visibility: 'hidden',\n        whiteSpace: 'pre-wrap'\n    },\n    border: 'none',\n    minWidth: '24px',\n    maxWidth: '100%',\n    // by default width is 0,\n    // it will be calculated based on the requirement of stretching the component to 100% width\n    // see setTagPickerInputStretchStyle method for more details\n    width: tagPickerInputTokens.width,\n    flexGrow: 1\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    // size variants\n    medium: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`\n    },\n    large: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`\n    },\n    'extra-large': {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */ export const useTagPickerInputStyles_unstable = (state)=>{\n    const baseStyle = useBaseStyle();\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,oBAAoB;AACzD,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,gBAAGR,aAAA,8mBAwBpB,CAAC;AACF;AACA;AACA;AAAI,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAT,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;EAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1BoB,KAAK,CAACtB,IAAI,CAACyB,SAAS,GAAG9B,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEuB,SAAS,EAAEC,MAAM,CAACF,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACR,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEQ,KAAK,CAACtB,IAAI,CAACyB,SAAS,CAAC;EAC1J,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","useStyles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","p","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport { tagPickerInputTokens } from '../../utils/tokens';\nexport const tagPickerInputClassNames = {\n    root: 'fui-TagPickerInput'\n};\nconst useBaseStyle = makeResetStyles({\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n    boxSizing: 'border-box',\n    '&:focus': {\n        outlineStyle: 'none'\n    },\n    '&::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    },\n    '&::after': {\n        visibility: 'hidden',\n        whiteSpace: 'pre-wrap'\n    },\n    border: 'none',\n    minWidth: '24px',\n    maxWidth: '100%',\n    // by default width is 0,\n    // it will be calculated based on the requirement of stretching the component to 100% width\n    // see setTagPickerInputStretchStyle method for more details\n    width: tagPickerInputTokens.width,\n    flexGrow: 1\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    // size variants\n    medium: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`\n    },\n    large: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`\n    },\n    'extra-large': {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */ export const useTagPickerInputStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyle = useBaseStyle();\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,oBAAoB;AACzD,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,gBAAGR,aAAA,8mBAwBpB,CAAC;AACF;AACA;AACA;AAAI,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAT,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;EAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1BoB,KAAK,CAACtB,IAAI,CAACyB,SAAS,GAAG9B,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEuB,SAAS,EAAEC,MAAM,CAACF,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACR,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEQ,KAAK,CAACtB,IAAI,CAACyB,SAAS,CAAC;EAC1J,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TagPickerList/useTagPickerListStyles.styles.js

@@ -29,6 +29,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the TagPickerList slots based on the state
  */
 export const useTagPickerListStyles_unstable = state => {
+  'use no memo';
+
   const styles = useStyles();
   state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);
   return state;

package/lib/components/TagPickerList/useTagPickerListStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","E5pizo","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bxyxcbc","B7ck84d","collapsed","mc9l5x","d","p","useTagPickerListStyles_unstable","state","styles","className","open"],"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerListClassNames = {\n    root: 'fui-TagPickerList'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    collapsed: {\n        display: 'none'\n    }\n});\n/**\n * Apply styling to the TagPickerList slots based on the state\n */ export const useTagPickerListStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1Bc,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGpB,YAAY,CAACE,uBAAuB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAE,CAACe,KAAK,CAACG,IAAI,IAAIF,MAAM,CAACN,SAAS,EAAEK,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EACrI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","E5pizo","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bxyxcbc","B7ck84d","collapsed","mc9l5x","d","p","useTagPickerListStyles_unstable","state","styles","className","open"],"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerListClassNames = {\n    root: 'fui-TagPickerList'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    collapsed: {\n        display: 'none'\n    }\n});\n/**\n * Apply styling to the TagPickerList slots based on the state\n */ export const useTagPickerListStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1Bc,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGpB,YAAY,CAACE,uBAAuB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAE,CAACe,KAAK,CAACG,IAAI,IAAIF,MAAM,CAACN,SAAS,EAAEK,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EACrI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js

@@ -28,6 +28,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the TagPickerOption slots based on the state
  */
 export const useTagPickerOptionStyles_unstable = state => {
+  'use no memo';
+
   useOptionStyles_unstable({
     ...state,
     active: false,

package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useOptionStyles_unstable","tagPickerOptionClassNames","root","media","secondaryContent","useStyles","mc9l5x","Budl1dq","Bt984gj","Br312pm","Ijaq50","d","useTagPickerOptionStyles_unstable","state","active","disabled","focusVisible","checkIcon","undefined","selected","styles","className"],"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionClassNames = {\n    root: 'fui-TagPickerOption',\n    media: 'fui-TagPickerOption__media',\n    secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'grid',\n        gridTemplateColumns: 'auto 1fr',\n        alignItems: 'center'\n    },\n    secondaryContent: {\n        gridColumnStart: 2,\n        gridRowStart: 2\n    },\n    media: {\n        gridRowStart: 'span 2'\n    }\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n    useOptionStyles_unstable({\n        ...state,\n        active: false,\n        disabled: false,\n        focusVisible: false,\n        checkIcon: undefined,\n        selected: false\n    });\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(tagPickerOptionClassNames.media, styles.media, state.media.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, styles.secondaryContent, state.secondaryContent.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAI,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAJ,gBAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAP,KAAA;IAAAO,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1Db,wBAAwB,CAAC;IACrB,GAAGa,KAAK;IACRC,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAEC,SAAS;IACpBC,QAAQ,EAAE;EACd,CAAC,CAAC;EACF,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACX,IAAI,CAACmB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEkB,MAAM,CAAClB,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACmB,SAAS,CAAC;EACtG,IAAIR,KAAK,CAACV,KAAK,EAAE;IACbU,KAAK,CAACV,KAAK,CAACkB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACE,KAAK,EAAEiB,MAAM,CAACjB,KAAK,EAAEU,KAAK,CAACV,KAAK,CAACkB,SAAS,CAAC;EAC9G;EACA,IAAIR,KAAK,CAACT,gBAAgB,EAAE;IACxBS,KAAK,CAACT,gBAAgB,CAACiB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACG,gBAAgB,EAAEgB,MAAM,CAAChB,gBAAgB,EAAES,KAAK,CAACT,gBAAgB,CAACiB,SAAS,CAAC;EAC1J;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","useOptionStyles_unstable","tagPickerOptionClassNames","root","media","secondaryContent","useStyles","mc9l5x","Budl1dq","Bt984gj","Br312pm","Ijaq50","d","useTagPickerOptionStyles_unstable","state","active","disabled","focusVisible","checkIcon","undefined","selected","styles","className"],"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionClassNames = {\n    root: 'fui-TagPickerOption',\n    media: 'fui-TagPickerOption__media',\n    secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'grid',\n        gridTemplateColumns: 'auto 1fr',\n        alignItems: 'center'\n    },\n    secondaryContent: {\n        gridColumnStart: 2,\n        gridRowStart: 2\n    },\n    media: {\n        gridRowStart: 'span 2'\n    }\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n    'use no memo';\n    useOptionStyles_unstable({\n        ...state,\n        active: false,\n        disabled: false,\n        focusVisible: false,\n        checkIcon: undefined,\n        selected: false\n    });\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(tagPickerOptionClassNames.media, styles.media, state.media.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, styles.secondaryContent, state.secondaryContent.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAI,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAJ,gBAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAP,KAAA;IAAAO,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbb,wBAAwB,CAAC;IACrB,GAAGa,KAAK;IACRC,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAEC,SAAS;IACpBC,QAAQ,EAAE;EACd,CAAC,CAAC;EACF,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACX,IAAI,CAACmB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEkB,MAAM,CAAClB,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACmB,SAAS,CAAC;EACtG,IAAIR,KAAK,CAACV,KAAK,EAAE;IACbU,KAAK,CAACV,KAAK,CAACkB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACE,KAAK,EAAEiB,MAAM,CAACjB,KAAK,EAAEU,KAAK,CAACV,KAAK,CAACkB,SAAS,CAAC;EAC9G;EACA,IAAIR,KAAK,CAACT,gBAAgB,EAAE;IACxBS,KAAK,CAACT,gBAAgB,CAACiB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACG,gBAAgB,EAAEgB,MAAM,CAAChB,gBAAgB,EAAES,KAAK,CAACT,gBAAgB,CAACiB,SAAS,CAAC;EAC1J;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.js

@@ -8,6 +8,8 @@ export const tagPickerOptionGroupClassNames = {
  * Apply styling to the TagPickerOptionGroup slots based on the state
  */
 export const useTagPickerOptionGroupStyles = state => {
+  'use no memo';
+
   useOptionGroupStyles_unstable(state);
   state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);
   if (state.label) {

package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"sources":["useTagPickerOptionGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionGroupClassNames = {\n    root: 'fui-TagPickerOptionGroup',\n    label: 'fui-TagPickerOptionGroup__label'\n};\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */ export const useTagPickerOptionGroupStyles = (state)=>{\n    useOptionGroupStyles_unstable(state);\n    state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n    if (state.label) {\n        state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,6BAA6B,QAAQ,0BAA0B;AACxE,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtDL,6BAA6B,CAACK,KAAK,CAAC;EACpCA,KAAK,CAACH,IAAI,CAACI,SAAS,GAAGP,YAAY,CAACE,8BAA8B,CAACC,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACI,SAAS,CAAC;EAC9F,IAAID,KAAK,CAACF,KAAK,EAAE;IACbE,KAAK,CAACF,KAAK,CAACG,SAAS,GAAGP,YAAY,CAACE,8BAA8B,CAACE,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;EACrG;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"sources":["useTagPickerOptionGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionGroupClassNames = {\n    root: 'fui-TagPickerOptionGroup',\n    label: 'fui-TagPickerOptionGroup__label'\n};\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */ export const useTagPickerOptionGroupStyles = (state)=>{\n    'use no memo';\n    useOptionGroupStyles_unstable(state);\n    state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n    if (state.label) {\n        state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,6BAA6B,QAAQ,0BAA0B;AACxE,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACbL,6BAA6B,CAACK,KAAK,CAAC;EACpCA,KAAK,CAACH,IAAI,CAACI,SAAS,GAAGP,YAAY,CAACE,8BAA8B,CAACC,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACI,SAAS,CAAC;EAC9F,IAAID,KAAK,CAACF,KAAK,EAAE;IACbE,KAAK,CAACF,KAAK,CAACG,SAAS,GAAGP,YAAY,CAACE,8BAA8B,CAACE,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;EACrG;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -90,6 +90,7 @@ const useTagPicker_unstable = (props)=>{
         appearance: comboboxState.appearance,
         clearSelection: comboboxState.clearSelection,
         getOptionById: comboboxState.getOptionById,
+        getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,
         registerOption: comboboxState.registerOption,
         selectedOptions: comboboxState.selectedOptions,
         selectOption: comboboxState.selectOption,