@fluentui/react-tag-picker 9.1.1 → 9.2.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-tag-picker
 
-This log was last generated on Mon, 17 Jun 2024 07:31:08 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:31:08 GMT 
+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

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,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPicker.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions = [\n    'above',\n    'after',\n    'after-top',\n    'before',\n    '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 */ export const useTagPicker_unstable = (props)=>{\n    const popoverId = useId('picker-listbox');\n    const triggerInnerRef = React.useRef(null);\n    const secondaryActionRef = React.useRef(null);\n    const tagPickerGroupRef = React.useRef(null);\n    const { positioning, size = 'medium', inline = false } = props;\n    const { targetRef, containerRef } = usePositioning({\n        position: 'below',\n        align: 'start',\n        offset: {\n            crossAxis: 0,\n            mainAxis: 2\n        },\n        fallbackPositions,\n        matchTargetSize: 'width',\n        ...resolvePositioningShorthand(positioning)\n    });\n    const { controller: activeDescendantController, activeParentRef, listboxRef } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const comboboxState = useComboboxBaseState({\n        ...props,\n        onOptionSelect: useEventCallback((event, data)=>{\n            var _props_onOptionSelect;\n            return (_props_onOptionSelect = props.onOptionSelect) === null || _props_onOptionSelect === void 0 ? void 0 : _props_onOptionSelect.call(props, event, {\n                selectedOptions: data.selectedOptions,\n                value: data.optionValue,\n                type: event.type,\n                event\n            });\n        }),\n        onOpenChange: useEventCallback((event, data)=>{\n            var _props_onOpenChange;\n            return (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n                ...data,\n                type: event.type,\n                event\n            });\n        }),\n        activeDescendantController,\n        editable: true,\n        multiselect: true,\n        size: 'medium'\n    });\n    const { trigger, popover } = childrenToTriggerAndPopover(props.children);\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};\nconst childrenToTriggerAndPopover = (children)=>{\n    const childrenArray = React.Children.toArray(children);\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        if (childrenArray.length > 2) {\n            // eslint-disable-next-line no-console\n            console.warn('Picker must contain at most two children');\n        }\n    }\n    let trigger = undefined;\n    let popover = 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 {\n        trigger,\n        popover\n    };\n};\n"],"names":["useTagPicker_unstable","fallbackPositions","props","popoverId","useId","triggerInnerRef","React","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","targetRef","containerRef","usePositioning","position","align","offset","crossAxis","mainAxis","matchTargetSize","resolvePositioningShorthand","controller","activeDescendantController","activeParentRef","listboxRef","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","comboboxState","useComboboxBaseState","onOptionSelect","useEventCallback","event","data","_props_onOptionSelect","call","selectedOptions","value","optionValue","type","onOpenChange","_props_onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","useMergedRefs","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.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions = [\n    'above',\n    'after',\n    'after-top',\n    'before',\n    '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 */ export const useTagPicker_unstable = (props)=>{\n    const popoverId = useId('picker-listbox');\n    const triggerInnerRef = React.useRef(null);\n    const secondaryActionRef = React.useRef(null);\n    const tagPickerGroupRef = React.useRef(null);\n    const { positioning, size = 'medium', inline = false } = props;\n    const { targetRef, containerRef } = usePositioning({\n        position: 'below',\n        align: 'start',\n        offset: {\n            crossAxis: 0,\n            mainAxis: 2\n        },\n        fallbackPositions,\n        matchTargetSize: 'width',\n        ...resolvePositioningShorthand(positioning)\n    });\n    const { controller: activeDescendantController, activeParentRef, listboxRef } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const comboboxState = useComboboxBaseState({\n        ...props,\n        onOptionSelect: useEventCallback((event, data)=>{\n            var _props_onOptionSelect;\n            return (_props_onOptionSelect = props.onOptionSelect) === null || _props_onOptionSelect === void 0 ? void 0 : _props_onOptionSelect.call(props, event, {\n                selectedOptions: data.selectedOptions,\n                value: data.optionValue,\n                type: event.type,\n                event\n            });\n        }),\n        onOpenChange: useEventCallback((event, data)=>{\n            var _props_onOpenChange;\n            return (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n                ...data,\n                type: event.type,\n                event\n            });\n        }),\n        activeDescendantController,\n        editable: true,\n        multiselect: true,\n        size: 'medium'\n    });\n    const { trigger, popover } = childrenToTriggerAndPopover(props.children);\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};\nconst childrenToTriggerAndPopover = (children)=>{\n    const childrenArray = React.Children.toArray(children);\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        if (childrenArray.length > 2) {\n            // eslint-disable-next-line no-console\n            console.warn('Picker must contain at most two children');\n        }\n    }\n    let trigger = undefined;\n    let popover = 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 {\n        trigger,\n        popover\n    };\n};\n"],"names":["useTagPicker_unstable","fallbackPositions","props","popoverId","useId","triggerInnerRef","React","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","targetRef","containerRef","usePositioning","position","align","offset","crossAxis","mainAxis","matchTargetSize","resolvePositioningShorthand","controller","activeDescendantController","activeParentRef","listboxRef","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","comboboxState","useComboboxBaseState","onOptionSelect","useEventCallback","event","data","_props_onOptionSelect","call","selectedOptions","value","optionValue","type","onOpenChange","_props_onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","useMergedRefs","popoverRef","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}

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

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useTagPickerContextValues", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useTagPickerContextValues(state) {
-    const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, 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
@@ -21,6 +21,8 @@ function useTagPickerContextValues(state) {
         listbox: {
             onOptionClick,
             registerOption,
+            getOptionById,
+            getOptionsMatchingValue,
             selectedOptions,
             selectOption,
             focusVisible: false,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTagPickerContextValues(state) {\n    const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, open, popoverId, disabled } = state;\n    return {\n        activeDescendant: React.useMemo(()=>({\n                controller: state.activeDescendantController\n            }), [\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}\nconst noop = ()=>{\n/** noop */ };\n"],"names":["useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","open","popoverId","disabled","activeDescendant","React","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,0BAA0BC,KAAK;IAC3C,MAAM,EAAEC,aAAa,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,KAAK,EAAEC,UAAU,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,WAAW,EAAEC,UAAU,EAAEC,UAAU,EAAEC,cAAc,EAAEC,aAAa,EAAEC,IAAI,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGpB;IACtQ,OAAO;QACHqB,kBAAkBC,OAAMC,OAAO,CAAC,IAAK,CAAA;gBAC7BC,YAAYxB,MAAMyB,0BAA0B;YAChD,CAAA,GAAI;YACJzB,MAAMyB,0BAA0B;SACnC;QACDC,SAAS;YACLzB;YACAC;YACAC;YACAC;YACAuB,cAAc;YACdC,iBAAiBC;QACrB;QACAC,QAAQ;YACJzB;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAC;YACAC;YACAC;QACJ;IACJ;AACJ;AACA,MAAMS,OAAO;AACb,SAAS,GAAG"}
+{"version":3,"sources":["useTagPickerContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTagPickerContextValues(state) {\n    const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, getOptionsMatchingValue, open, popoverId, disabled } = state;\n    return {\n        activeDescendant: React.useMemo(()=>({\n                controller: state.activeDescendantController\n            }), [\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}\nconst noop = ()=>{\n/** noop */ };\n"],"names":["useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","getOptionsMatchingValue","open","popoverId","disabled","activeDescendant","React","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,0BAA0BC,KAAK;IAC3C,MAAM,EAAEC,aAAa,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,KAAK,EAAEC,UAAU,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,WAAW,EAAEC,UAAU,EAAEC,UAAU,EAAEC,cAAc,EAAEC,aAAa,EAAEC,uBAAuB,EAAEC,IAAI,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGrB;IAC/R,OAAO;QACHsB,kBAAkBC,OAAMC,OAAO,CAAC,IAAK,CAAA;gBAC7BC,YAAYzB,MAAM0B,0BAA0B;YAChD,CAAA,GAAI;YACJ1B,MAAM0B,0BAA0B;SACnC;QACDC,SAAS;YACL1B;YACAC;YACAe;YACAC;YACAf;YACAC;YACAwB,cAAc;YACdC,iBAAiBC;QACrB;QACAC,QAAQ;YACJ1B;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAE;YACAC;YACAC;QACJ;IACJ;AACJ;AACA,MAAMS,OAAO;AACb,SAAS,GAAG"}

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

@@ -429,6 +429,7 @@ const tagPickerButtonClassNames = {
     ]
 });
 const useTagPickerButtonStyles_unstable = (state)=>{
+    'use no memo';
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerButtonStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  button: {\n    Bt984gj: \"f122n59\",\n    sshi5w: \"f1nxs5xn\",\n    De3pzq: \"f1c21dwh\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"f3bhgqh\",\n    B7ck84d: \"f1ewtqcl\",\n    sj55zd: \"f19n0e5\",\n    i8kkvl: \"f14mj54c\",\n    Bceei9c: \"f1k6fduh\",\n    Bahqtrf: \"fk6fouc\",\n    fsow6f: [\"f1o700av\", \"fes3tcz\"],\n    Bh6795r: \"fqerorx\",\n    Brovlpu: \"ftqa4ok\"\n  },\n  placeholder: {\n    sj55zd: \"fxc4j92\"\n  },\n  medium: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"fye6m5k\", \"f3cq2dl\"]\n  },\n  large: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"f14ev680\", \"f58uxzw\"]\n  },\n  \"extra-large\": {\n    i8kkvl: \"f1rjii52\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"faaz57k\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"f139mn7i\", \"f1v3q0m\"]\n  },\n  outline: {\n    De3pzq: \"fxugw4r\",\n    Bgfg5da: 0,\n    B9xav0g: \"f1c1zstj\",\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fhz96rm\"\n  },\n  outlineInteractive: {\n    Bgoe8wy: \"fvcxoqz\",\n    Bwzppfd: [\"f1ub3y4t\", \"f1m52nbi\"],\n    oetu4i: \"flmw63s\",\n    gg5e9n: [\"f1m52nbi\", \"f1ub3y4t\"],\n    B6oc9vd: \"fvs00aa\",\n    ak43y8: [\"f1assf6x\", \"f4ruux4\"],\n    wmxk5l: \"fqhmt4z\",\n    B50zh58: [\"f4ruux4\", \"f1assf6x\"]\n  },\n  underline: {\n    De3pzq: \"f1c21dwh\",\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    Bgfg5da: \"f9ez7ne\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"fokr779\"\n  },\n  \"filled-lighter\": {\n    De3pzq: \"fxugw4r\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fs2rfia\"\n  },\n  \"filled-darker\": {\n    De3pzq: \"f16xq7d1\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fs2rfia\"\n  },\n  invalid: {\n    tvckwq: \"fs4k3qj\",\n    gk2u95: [\"fcee079\", \"fmyw78r\"],\n    hhx65j: \"f1fgmyf4\",\n    Bxowmz0: [\"fmyw78r\", \"fcee079\"]\n  },\n  invalidUnderline: {\n    hhx65j: \"f1fgmyf4\"\n  },\n  disabled: {\n    Bceei9c: \"fdrzuqr\",\n    De3pzq: \"f1c21dwh\",\n    g2u3we: \"f1jj8ep1\",\n    h3c5rm: [\"f15xbau\", \"fy0fskl\"],\n    B9xav0g: \"f4ikngz\",\n    zhjwy3: [\"fy0fskl\", \"f15xbau\"],\n    Bjwas2f: \"fg455y9\",\n    Bn1d65q: [\"f1rvyvqg\", \"f14g86mu\"],\n    Bxeuatn: \"f1cwzwz\",\n    n51gp8: [\"f14g86mu\", \"f1rvyvqg\"]\n  },\n  disabledText: {\n    sj55zd: \"f1s2aq7o\",\n    Bceei9c: \"fdrzuqr\"\n  },\n  hidden: {\n    mc9l5x: \"fjseox\"\n  },\n  visuallyHidden: {\n    Bh84pgu: \"f1ekcaio\",\n    Bqenvij: \"f1mpe4l3\",\n    jrapky: 0,\n    Frg6f3: 0,\n    t21cq0: 0,\n    B6of3ja: 0,\n    B74szlk: \"f1jlpb2r\",\n    B68tc82: 0,\n    Bmxbyg5: 0,\n    Bpg54ce: \"f1a3p1vp\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"f1c5fvqg\",\n    a9b677: \"frkrog8\",\n    qhf8xq: \"f1euv43f\"\n  }\n}, {\n  d: [\".f122n59{align-items:center;}\", \".f1nxs5xn{min-height:32px;}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", [\".f3bhgqh{border:none;}\", {\n    p: -2\n  }], \".f1ewtqcl{box-sizing:border-box;}\", \".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f14mj54c{column-gap:var(--spacingHorizontalXXS);}\", \".f1k6fduh{cursor:pointer;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".f1o700av{text-align:left;}\", \".fes3tcz{text-align:right;}\", \".fqerorx{flex-grow:1;}\", \".fxc4j92{color:var(--colorNeutralForeground4);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", [\".fye6m5k{padding:3px var(--spacingHorizontalSNudge) 3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}\", {\n    p: -1\n  }], [\".f3cq2dl{padding:3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 3px var(--spacingHorizontalSNudge);}\", {\n    p: -1\n  }], \".fkhj508{font-size:var(--fontSizeBase300);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", [\".f14ev680{padding:5px var(--spacingHorizontalMNudge) 5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}\", {\n    p: -1\n  }], [\".f58uxzw{padding:5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 5px var(--spacingHorizontalMNudge);}\", {\n    p: -1\n  }], \".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".faaz57k{line-height:var(--lineHeightBase400);}\", [\".f139mn7i{padding:7px var(--spacingHorizontalM) 7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}\", {\n    p: -1\n  }], [\".f1v3q0m{padding:7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 7px var(--spacingHorizontalM);}\", {\n    p: -1\n  }], \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", [\".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}\", {\n    p: -2\n  }], \".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}\", [\".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}\", {\n    p: -1\n  }], [\".fokr779{border-radius:0;}\", {\n    p: -1\n  }], [\".fs2rfia{border:var(--strokeWidthThin) solid transparent;}\", {\n    p: -2\n  }], \".f16xq7d1{background-color:var(--colorNeutralBackground3);}\", [\".fs2rfia{border:var(--strokeWidthThin) solid transparent;}\", {\n    p: -2\n  }], \".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}\", \".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}\", \".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}\", \".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}\", \".fdrzuqr{cursor:not-allowed;}\", \".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fjseox{display:none;}\", \".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}\", \".f1mpe4l3{height:1px;}\", [\".f1jlpb2r{margin:-1px;}\", {\n    p: -1\n  }], [\".f1a3p1vp{overflow:hidden;}\", {\n    p: -1\n  }], [\".f1c5fvqg{padding:0px;}\", {\n    p: -1\n  }], \".frkrog8{width:1px;}\", \".f1euv43f{position:absolute;}\"],\n  f: [\".ftqa4ok:focus{outline-style:none;}\"],\n  h: [\".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}\", \".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}\", \".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}\", \".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}\"],\n  a: [\".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}\", \".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}\", \".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}\", \".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}\"],\n  m: [[\"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\n/**\n * Apply styling to the PickerButton slots based on the state\n */\nexport 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//# sourceMappingURL=useTagPickerButtonStyles.styles.js.map"],"names":["tagPickerButtonClassNames","useTagPickerButtonStyles_unstable","root","useStyles","__styles","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","state","styles","className","mergeClasses","size","hasSelectedOption"],"mappings":"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"}
+{"version":3,"sources":["useTagPickerButtonStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  button: {\n    Bt984gj: \"f122n59\",\n    sshi5w: \"f1nxs5xn\",\n    De3pzq: \"f1c21dwh\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"f3bhgqh\",\n    B7ck84d: \"f1ewtqcl\",\n    sj55zd: \"f19n0e5\",\n    i8kkvl: \"f14mj54c\",\n    Bceei9c: \"f1k6fduh\",\n    Bahqtrf: \"fk6fouc\",\n    fsow6f: [\"f1o700av\", \"fes3tcz\"],\n    Bh6795r: \"fqerorx\",\n    Brovlpu: \"ftqa4ok\"\n  },\n  placeholder: {\n    sj55zd: \"fxc4j92\"\n  },\n  medium: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"fye6m5k\", \"f3cq2dl\"]\n  },\n  large: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"f14ev680\", \"f58uxzw\"]\n  },\n  \"extra-large\": {\n    i8kkvl: \"f1rjii52\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"faaz57k\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"f139mn7i\", \"f1v3q0m\"]\n  },\n  outline: {\n    De3pzq: \"fxugw4r\",\n    Bgfg5da: 0,\n    B9xav0g: \"f1c1zstj\",\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fhz96rm\"\n  },\n  outlineInteractive: {\n    Bgoe8wy: \"fvcxoqz\",\n    Bwzppfd: [\"f1ub3y4t\", \"f1m52nbi\"],\n    oetu4i: \"flmw63s\",\n    gg5e9n: [\"f1m52nbi\", \"f1ub3y4t\"],\n    B6oc9vd: \"fvs00aa\",\n    ak43y8: [\"f1assf6x\", \"f4ruux4\"],\n    wmxk5l: \"fqhmt4z\",\n    B50zh58: [\"f4ruux4\", \"f1assf6x\"]\n  },\n  underline: {\n    De3pzq: \"f1c21dwh\",\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    Bgfg5da: \"f9ez7ne\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"fokr779\"\n  },\n  \"filled-lighter\": {\n    De3pzq: \"fxugw4r\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fs2rfia\"\n  },\n  \"filled-darker\": {\n    De3pzq: \"f16xq7d1\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fs2rfia\"\n  },\n  invalid: {\n    tvckwq: \"fs4k3qj\",\n    gk2u95: [\"fcee079\", \"fmyw78r\"],\n    hhx65j: \"f1fgmyf4\",\n    Bxowmz0: [\"fmyw78r\", \"fcee079\"]\n  },\n  invalidUnderline: {\n    hhx65j: \"f1fgmyf4\"\n  },\n  disabled: {\n    Bceei9c: \"fdrzuqr\",\n    De3pzq: \"f1c21dwh\",\n    g2u3we: \"f1jj8ep1\",\n    h3c5rm: [\"f15xbau\", \"fy0fskl\"],\n    B9xav0g: \"f4ikngz\",\n    zhjwy3: [\"fy0fskl\", \"f15xbau\"],\n    Bjwas2f: \"fg455y9\",\n    Bn1d65q: [\"f1rvyvqg\", \"f14g86mu\"],\n    Bxeuatn: \"f1cwzwz\",\n    n51gp8: [\"f14g86mu\", \"f1rvyvqg\"]\n  },\n  disabledText: {\n    sj55zd: \"f1s2aq7o\",\n    Bceei9c: \"fdrzuqr\"\n  },\n  hidden: {\n    mc9l5x: \"fjseox\"\n  },\n  visuallyHidden: {\n    Bh84pgu: \"f1ekcaio\",\n    Bqenvij: \"f1mpe4l3\",\n    jrapky: 0,\n    Frg6f3: 0,\n    t21cq0: 0,\n    B6of3ja: 0,\n    B74szlk: \"f1jlpb2r\",\n    B68tc82: 0,\n    Bmxbyg5: 0,\n    Bpg54ce: \"f1a3p1vp\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"f1c5fvqg\",\n    a9b677: \"frkrog8\",\n    qhf8xq: \"f1euv43f\"\n  }\n}, {\n  d: [\".f122n59{align-items:center;}\", \".f1nxs5xn{min-height:32px;}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", [\".f3bhgqh{border:none;}\", {\n    p: -2\n  }], \".f1ewtqcl{box-sizing:border-box;}\", \".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f14mj54c{column-gap:var(--spacingHorizontalXXS);}\", \".f1k6fduh{cursor:pointer;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".f1o700av{text-align:left;}\", \".fes3tcz{text-align:right;}\", \".fqerorx{flex-grow:1;}\", \".fxc4j92{color:var(--colorNeutralForeground4);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", [\".fye6m5k{padding:3px var(--spacingHorizontalSNudge) 3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}\", {\n    p: -1\n  }], [\".f3cq2dl{padding:3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 3px var(--spacingHorizontalSNudge);}\", {\n    p: -1\n  }], \".fkhj508{font-size:var(--fontSizeBase300);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", [\".f14ev680{padding:5px var(--spacingHorizontalMNudge) 5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}\", {\n    p: -1\n  }], [\".f58uxzw{padding:5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 5px var(--spacingHorizontalMNudge);}\", {\n    p: -1\n  }], \".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".faaz57k{line-height:var(--lineHeightBase400);}\", [\".f139mn7i{padding:7px var(--spacingHorizontalM) 7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}\", {\n    p: -1\n  }], [\".f1v3q0m{padding:7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 7px var(--spacingHorizontalM);}\", {\n    p: -1\n  }], \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", [\".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}\", {\n    p: -2\n  }], \".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}\", [\".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}\", {\n    p: -1\n  }], [\".fokr779{border-radius:0;}\", {\n    p: -1\n  }], [\".fs2rfia{border:var(--strokeWidthThin) solid transparent;}\", {\n    p: -2\n  }], \".f16xq7d1{background-color:var(--colorNeutralBackground3);}\", [\".fs2rfia{border:var(--strokeWidthThin) solid transparent;}\", {\n    p: -2\n  }], \".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}\", \".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}\", \".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}\", \".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}\", \".fdrzuqr{cursor:not-allowed;}\", \".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fjseox{display:none;}\", \".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}\", \".f1mpe4l3{height:1px;}\", [\".f1jlpb2r{margin:-1px;}\", {\n    p: -1\n  }], [\".f1a3p1vp{overflow:hidden;}\", {\n    p: -1\n  }], [\".f1c5fvqg{padding:0px;}\", {\n    p: -1\n  }], \".frkrog8{width:1px;}\", \".f1euv43f{position:absolute;}\"],\n  f: [\".ftqa4ok:focus{outline-style:none;}\"],\n  h: [\".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}\", \".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}\", \".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}\", \".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}\"],\n  a: [\".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}\", \".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}\", \".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}\", \".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}\"],\n  m: [[\"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\n/**\n * Apply styling to the PickerButton slots based on the state\n */\nexport const useTagPickerButtonStyles_unstable = state => {\n  'use no memo';\n\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//# sourceMappingURL=useTagPickerButtonStyles.styles.js.map"],"names":["tagPickerButtonClassNames","useTagPickerButtonStyles_unstable","root","useStyles","__styles","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","state","styles","className","mergeClasses","size","hasSelectedOption"],"mappings":"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"}

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

@@ -514,6 +514,7 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useTagPickerControlStyles_unstable = (state)=>{
+    'use no memo';
     const styles = useStyles();
     const iconStyles = useIconStyles();
     const asideStyles = useAsideStyles();

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ft85np5\",\n    z189sj: [\"f1d8q41i\", \"f8lqu5g\"],\n    uwmqm3: [\"f1uw59to\", \"fw5db7e\"],\n    Bt984gj: \"f122n59\",\n    i8kkvl: \"f14mj54c\",\n    B7ck84d: \"f1ewtqcl\",\n    mc9l5x: \"f22iagw\",\n    Bf4jedk: \"f1exfvgq\",\n    qhf8xq: \"f10pi13n\",\n    Eh141a: \"fni485r\",\n    Bbr2w1p: \"f14a1fxs\",\n    Bduesf4: \"f3e99gv\",\n    Bpq79vn: \"fhljsf7\",\n    li1rpt: \"f1gw3sf2\",\n    Bsft5z2: \"f13zj6fq\",\n    E3zdtr: \"f1mdlcz9\",\n    Eqx8gd: [\"f1a7op3\", \"f1cjjd47\"],\n    By385i5: \"f1gboi2j\",\n    B1piin3: [\"f1cjjd47\", \"f1a7op3\"],\n    Dlnsje: \"f145g4dw\",\n    d9w3h3: [\"f1kp91vd\", \"f1ibwz09\"],\n    B3778ie: [\"f1ibwz09\", \"f1kp91vd\"],\n    B1q35kw: 0,\n    Bw17bha: 0,\n    Bcgy8vk: 0,\n    Bjuhk93: \"f1mnjydx\",\n    Gjdm7m: \"f13evtba\",\n    b1kco5: \"f1yk9hq\",\n    Ba2ppi3: \"fhwpy7i\",\n    F2fol1: \"f14ee0xe\",\n    lck23g: \"f1xhbsuh\",\n    df92cz: \"fv8e3ye\",\n    I188md: \"ftb5wc6\",\n    umuwi5: \"fjw5xc1\",\n    Blcqepd: \"f1xdyd5c\",\n    nplu4u: \"fatpbeo\",\n    Bioka5o: \"fb7uyps\",\n    H713fs: \"f1cmft4k\",\n    B9ooomg: \"f1x58t8o\",\n    Bercvud: \"f1ibeo51\"\n  },\n  listbox: {\n    E5pizo: \"f1hg901r\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ft85np5\",\n    Bxyxcbc: \"fmmk62d\",\n    B7ck84d: \"f1ewtqcl\"\n  },\n  listboxCollapsed: {\n    mc9l5x: \"fjseox\"\n  },\n  medium: {\n    sshi5w: \"f1nxs5xn\"\n  },\n  large: {\n    sshi5w: \"f1w5jphr\"\n  },\n  \"extra-large\": {\n    sshi5w: \"f5pgtk9\"\n  },\n  outline: {\n    De3pzq: \"fxugw4r\",\n    Bgfg5da: 0,\n    B9xav0g: \"f1c1zstj\",\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fhz96rm\"\n  },\n  outlineInteractive: {\n    Bgoe8wy: \"fvcxoqz\",\n    Bwzppfd: [\"f1ub3y4t\", \"f1m52nbi\"],\n    oetu4i: \"flmw63s\",\n    gg5e9n: [\"f1m52nbi\", \"f1ub3y4t\"],\n    B6oc9vd: \"fvs00aa\",\n    ak43y8: [\"f1assf6x\", \"f4ruux4\"],\n    wmxk5l: \"fqhmt4z\",\n    B50zh58: [\"f4ruux4\", \"f1assf6x\"]\n  },\n  underline: {\n    De3pzq: \"f1c21dwh\",\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    Bgfg5da: \"f9ez7ne\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"fokr779\"\n  },\n  \"filled-lighter\": {\n    De3pzq: \"fxugw4r\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"f88035w\"\n  },\n  \"filled-darker\": {\n    De3pzq: \"f16xq7d1\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"f88035w\"\n  },\n  invalid: {\n    tvckwq: \"fs4k3qj\",\n    gk2u95: [\"fcee079\", \"fmyw78r\"],\n    hhx65j: \"f1fgmyf4\",\n    Bxowmz0: [\"fmyw78r\", \"fcee079\"]\n  },\n  invalidUnderline: {\n    hhx65j: \"f1fgmyf4\"\n  },\n  disabled: {\n    Bceei9c: \"fdrzuqr\",\n    De3pzq: \"f1c21dwh\",\n    g2u3we: \"f1jj8ep1\",\n    h3c5rm: [\"f15xbau\", \"fy0fskl\"],\n    B9xav0g: \"f4ikngz\",\n    zhjwy3: [\"fy0fskl\", \"f15xbau\"],\n    Bjwas2f: \"fg455y9\",\n    Bn1d65q: [\"f1rvyvqg\", \"f14g86mu\"],\n    Bxeuatn: \"f1cwzwz\",\n    n51gp8: [\"f14g86mu\", \"f1rvyvqg\"]\n  }\n}, {\n  d: [[\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".f1d8q41i{padding-right:calc(var(--spacingHorizontalM) + var(--fui-TagPickerControl-aside-width, 0px));}\", \".f8lqu5g{padding-left:calc(var(--spacingHorizontalM) + var(--fui-TagPickerControl-aside-width, 0px));}\", \".f1uw59to{padding-left:var(--spacingHorizontalM);}\", \".fw5db7e{padding-right:var(--spacingHorizontalM);}\", \".f122n59{align-items:center;}\", \".f14mj54c{column-gap:var(--spacingHorizontalXXS);}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f22iagw{display:flex;}\", \".f1exfvgq{min-width:250px;}\", \".f10pi13n{position:relative;}\", \".fni485r{flex-wrap:wrap;}\", \".f1gw3sf2::after{box-sizing:border-box;}\", \".f13zj6fq::after{content:\\\"\\\";}\", \".f1mdlcz9::after{position:absolute;}\", \".f1a7op3::after{left:-1px;}\", \".f1cjjd47::after{right:-1px;}\", \".f1gboi2j::after{bottom:-1px;}\", \".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}\", \".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}\", [\".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}\", {\n    p: -1\n  }], \".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}\", \".f1yk9hq::after{transform:scaleX(0);}\", \".fhwpy7i::after{transition-property:transform;}\", \".f14ee0xe::after{transition-duration:var(--durationUltraFast);}\", \".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}\", \".f1hg901r{box-shadow:var(--shadow16);}\", [\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".fmmk62d{max-height:80vh;}\", \".fjseox{display:none;}\", \".f1nxs5xn{min-height:32px;}\", \".f1w5jphr{min-height:40px;}\", \".f5pgtk9{min-height:44px;}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", [\".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}\", {\n    p: -2\n  }], \".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", [\".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}\", {\n    p: -1\n  }], [\".fokr779{border-radius:0;}\", {\n    p: -1\n  }], [\".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n    p: -2\n  }], \".f16xq7d1{background-color:var(--colorNeutralBackground3);}\", [\".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n    p: -2\n  }], \".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}\", \".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}\", \".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}\", \".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}\", \".fdrzuqr{cursor:not-allowed;}\", \".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}\"],\n  w: [\".f14a1fxs:focus-within{outline-width:2px;}\", \".f3e99gv:focus-within{outline-style:solid;}\", \".fhljsf7:focus-within{outline-color:transparent;}\", \".fjw5xc1:focus-within::after{transform:scaleX(1);}\", \".f1xdyd5c:focus-within::after{transition-property:transform;}\", \".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}\", \".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}\", \".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]],\n  h: [\".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}\", \".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}\", \".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}\", \".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}\"],\n  a: [\".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}\", \".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}\", \".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}\", \".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}\"]\n});\nconst useAsideStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f13qh94s\",\n    Bt984gj: \"f122n59\",\n    qhf8xq: \"f1euv43f\",\n    Bhzewxz: \"f15twtuk\",\n    j35jbq: [\"f8b87gs\", \"fedtrts\"],\n    Budl1dq: \"f13p5kfd\",\n    wkccdc: \"fjg31ve\",\n    Bqenvij: \"f1l02sjl\",\n    Bceei9c: \"f113hnb5\"\n  },\n  medium: {\n    sshi5w: \"f1nxs5xn\"\n  },\n  large: {\n    sshi5w: \"f1w5jphr\"\n  },\n  \"extra-large\": {\n    sshi5w: \"f5pgtk9\"\n  }\n}, {\n  d: [\".f13qh94s{display:grid;}\", \".f122n59{align-items:center;}\", \".f1euv43f{position:absolute;}\", \".f15twtuk{top:0;}\", \".f8b87gs{right:var(--spacingHorizontalM);}\", \".fedtrts{left:var(--spacingHorizontalM);}\", \".f13p5kfd{grid-template-columns:repeat(2, auto);}\", \".fjg31ve{grid-template-rows:minmax(32px, auto) 1fr;}\", \".f1l02sjl{height:100%;}\", \".f113hnb5{cursor:text;}\", \".f1nxs5xn{min-height:32px;}\", \".f1w5jphr{min-height:40px;}\", \".f5pgtk9{min-height:44px;}\"]\n});\nexport const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px'\n};\nconst useIconStyles = /*#__PURE__*/__styles({\n  icon: {\n    B7ck84d: \"f1ewtqcl\",\n    sj55zd: \"fxkbij4\",\n    Bceei9c: \"f1k6fduh\",\n    mc9l5x: \"ftgm304\",\n    Be2twd7: \"f1pp30po\",\n    Bo70h7d: \"fvc9v3g\"\n  },\n  medium: {\n    Be2twd7: \"f4ybsrx\",\n    Frg6f3: [\"f1h9en5y\", \"f1xk557c\"]\n  },\n  large: {\n    Be2twd7: \"fe5j1ua\",\n    Frg6f3: [\"f1h9en5y\", \"f1xk557c\"]\n  },\n  \"extra-large\": {\n    Be2twd7: \"f1rt2boy\",\n    Frg6f3: [\"f1t5qyk5\", \"f1ikr372\"]\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\",\n    Bceei9c: \"fdrzuqr\"\n  }\n}, {\n  d: [\".f1ewtqcl{box-sizing:border-box;}\", \".fxkbij4{color:var(--colorNeutralStrokeAccessible);}\", \".f1k6fduh{cursor:pointer;}\", \".ftgm304{display:block;}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\", \".fvc9v3g svg{display:block;}\", \".f4ybsrx{font-size:16px;}\", \".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}\", \".f1xk557c{margin-right:var(--spacingHorizontalXXS);}\", \".fe5j1ua{font-size:20px;}\", \".f1rt2boy{font-size:24px;}\", \".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}\", \".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fdrzuqr{cursor:not-allowed;}\"]\n});\n/**\n * Apply styling to the PickerControl slots based on the state\n */\nexport 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//# sourceMappingURL=useTagPickerControlStyles.styles.js.map"],"names":["tagPickerControlClassNames","tagPickerControlAsideWidthToken","iconSizes","useTagPickerControlStyles_unstable","root","expandIcon","secondaryAction","aside","useStyles","__styles","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","small","useIconStyles","icon","sj55zd","Be2twd7","Bo70h7d","Frg6f3","state","styles","iconStyles","asideStyles","className","mergeClasses","size","appearance"],"mappings":"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"}
+{"version":3,"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ft85np5\",\n    z189sj: [\"f1d8q41i\", \"f8lqu5g\"],\n    uwmqm3: [\"f1uw59to\", \"fw5db7e\"],\n    Bt984gj: \"f122n59\",\n    i8kkvl: \"f14mj54c\",\n    B7ck84d: \"f1ewtqcl\",\n    mc9l5x: \"f22iagw\",\n    Bf4jedk: \"f1exfvgq\",\n    qhf8xq: \"f10pi13n\",\n    Eh141a: \"fni485r\",\n    Bbr2w1p: \"f14a1fxs\",\n    Bduesf4: \"f3e99gv\",\n    Bpq79vn: \"fhljsf7\",\n    li1rpt: \"f1gw3sf2\",\n    Bsft5z2: \"f13zj6fq\",\n    E3zdtr: \"f1mdlcz9\",\n    Eqx8gd: [\"f1a7op3\", \"f1cjjd47\"],\n    By385i5: \"f1gboi2j\",\n    B1piin3: [\"f1cjjd47\", \"f1a7op3\"],\n    Dlnsje: \"f145g4dw\",\n    d9w3h3: [\"f1kp91vd\", \"f1ibwz09\"],\n    B3778ie: [\"f1ibwz09\", \"f1kp91vd\"],\n    B1q35kw: 0,\n    Bw17bha: 0,\n    Bcgy8vk: 0,\n    Bjuhk93: \"f1mnjydx\",\n    Gjdm7m: \"f13evtba\",\n    b1kco5: \"f1yk9hq\",\n    Ba2ppi3: \"fhwpy7i\",\n    F2fol1: \"f14ee0xe\",\n    lck23g: \"f1xhbsuh\",\n    df92cz: \"fv8e3ye\",\n    I188md: \"ftb5wc6\",\n    umuwi5: \"fjw5xc1\",\n    Blcqepd: \"f1xdyd5c\",\n    nplu4u: \"fatpbeo\",\n    Bioka5o: \"fb7uyps\",\n    H713fs: \"f1cmft4k\",\n    B9ooomg: \"f1x58t8o\",\n    Bercvud: \"f1ibeo51\"\n  },\n  listbox: {\n    E5pizo: \"f1hg901r\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ft85np5\",\n    Bxyxcbc: \"fmmk62d\",\n    B7ck84d: \"f1ewtqcl\"\n  },\n  listboxCollapsed: {\n    mc9l5x: \"fjseox\"\n  },\n  medium: {\n    sshi5w: \"f1nxs5xn\"\n  },\n  large: {\n    sshi5w: \"f1w5jphr\"\n  },\n  \"extra-large\": {\n    sshi5w: \"f5pgtk9\"\n  },\n  outline: {\n    De3pzq: \"fxugw4r\",\n    Bgfg5da: 0,\n    B9xav0g: \"f1c1zstj\",\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fhz96rm\"\n  },\n  outlineInteractive: {\n    Bgoe8wy: \"fvcxoqz\",\n    Bwzppfd: [\"f1ub3y4t\", \"f1m52nbi\"],\n    oetu4i: \"flmw63s\",\n    gg5e9n: [\"f1m52nbi\", \"f1ub3y4t\"],\n    B6oc9vd: \"fvs00aa\",\n    ak43y8: [\"f1assf6x\", \"f4ruux4\"],\n    wmxk5l: \"fqhmt4z\",\n    B50zh58: [\"f4ruux4\", \"f1assf6x\"]\n  },\n  underline: {\n    De3pzq: \"f1c21dwh\",\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    Bgfg5da: \"f9ez7ne\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"fokr779\"\n  },\n  \"filled-lighter\": {\n    De3pzq: \"fxugw4r\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"f88035w\"\n  },\n  \"filled-darker\": {\n    De3pzq: \"f16xq7d1\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"f88035w\"\n  },\n  invalid: {\n    tvckwq: \"fs4k3qj\",\n    gk2u95: [\"fcee079\", \"fmyw78r\"],\n    hhx65j: \"f1fgmyf4\",\n    Bxowmz0: [\"fmyw78r\", \"fcee079\"]\n  },\n  invalidUnderline: {\n    hhx65j: \"f1fgmyf4\"\n  },\n  disabled: {\n    Bceei9c: \"fdrzuqr\",\n    De3pzq: \"f1c21dwh\",\n    g2u3we: \"f1jj8ep1\",\n    h3c5rm: [\"f15xbau\", \"fy0fskl\"],\n    B9xav0g: \"f4ikngz\",\n    zhjwy3: [\"fy0fskl\", \"f15xbau\"],\n    Bjwas2f: \"fg455y9\",\n    Bn1d65q: [\"f1rvyvqg\", \"f14g86mu\"],\n    Bxeuatn: \"f1cwzwz\",\n    n51gp8: [\"f14g86mu\", \"f1rvyvqg\"]\n  }\n}, {\n  d: [[\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".f1d8q41i{padding-right:calc(var(--spacingHorizontalM) + var(--fui-TagPickerControl-aside-width, 0px));}\", \".f8lqu5g{padding-left:calc(var(--spacingHorizontalM) + var(--fui-TagPickerControl-aside-width, 0px));}\", \".f1uw59to{padding-left:var(--spacingHorizontalM);}\", \".fw5db7e{padding-right:var(--spacingHorizontalM);}\", \".f122n59{align-items:center;}\", \".f14mj54c{column-gap:var(--spacingHorizontalXXS);}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f22iagw{display:flex;}\", \".f1exfvgq{min-width:250px;}\", \".f10pi13n{position:relative;}\", \".fni485r{flex-wrap:wrap;}\", \".f1gw3sf2::after{box-sizing:border-box;}\", \".f13zj6fq::after{content:\\\"\\\";}\", \".f1mdlcz9::after{position:absolute;}\", \".f1a7op3::after{left:-1px;}\", \".f1cjjd47::after{right:-1px;}\", \".f1gboi2j::after{bottom:-1px;}\", \".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}\", \".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}\", [\".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}\", {\n    p: -1\n  }], \".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}\", \".f1yk9hq::after{transform:scaleX(0);}\", \".fhwpy7i::after{transition-property:transform;}\", \".f14ee0xe::after{transition-duration:var(--durationUltraFast);}\", \".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}\", \".f1hg901r{box-shadow:var(--shadow16);}\", [\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".fmmk62d{max-height:80vh;}\", \".fjseox{display:none;}\", \".f1nxs5xn{min-height:32px;}\", \".f1w5jphr{min-height:40px;}\", \".f5pgtk9{min-height:44px;}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", [\".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}\", {\n    p: -2\n  }], \".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", [\".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}\", {\n    p: -1\n  }], [\".fokr779{border-radius:0;}\", {\n    p: -1\n  }], [\".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n    p: -2\n  }], \".f16xq7d1{background-color:var(--colorNeutralBackground3);}\", [\".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n    p: -2\n  }], \".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}\", \".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}\", \".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}\", \".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}\", \".fdrzuqr{cursor:not-allowed;}\", \".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}\"],\n  w: [\".f14a1fxs:focus-within{outline-width:2px;}\", \".f3e99gv:focus-within{outline-style:solid;}\", \".fhljsf7:focus-within{outline-color:transparent;}\", \".fjw5xc1:focus-within::after{transform:scaleX(1);}\", \".f1xdyd5c:focus-within::after{transition-property:transform;}\", \".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}\", \".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}\", \".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]],\n  h: [\".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}\", \".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}\", \".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}\", \".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}\"],\n  a: [\".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}\", \".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}\", \".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}\", \".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}\"]\n});\nconst useAsideStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f13qh94s\",\n    Bt984gj: \"f122n59\",\n    qhf8xq: \"f1euv43f\",\n    Bhzewxz: \"f15twtuk\",\n    j35jbq: [\"f8b87gs\", \"fedtrts\"],\n    Budl1dq: \"f13p5kfd\",\n    wkccdc: \"fjg31ve\",\n    Bqenvij: \"f1l02sjl\",\n    Bceei9c: \"f113hnb5\"\n  },\n  medium: {\n    sshi5w: \"f1nxs5xn\"\n  },\n  large: {\n    sshi5w: \"f1w5jphr\"\n  },\n  \"extra-large\": {\n    sshi5w: \"f5pgtk9\"\n  }\n}, {\n  d: [\".f13qh94s{display:grid;}\", \".f122n59{align-items:center;}\", \".f1euv43f{position:absolute;}\", \".f15twtuk{top:0;}\", \".f8b87gs{right:var(--spacingHorizontalM);}\", \".fedtrts{left:var(--spacingHorizontalM);}\", \".f13p5kfd{grid-template-columns:repeat(2, auto);}\", \".fjg31ve{grid-template-rows:minmax(32px, auto) 1fr;}\", \".f1l02sjl{height:100%;}\", \".f113hnb5{cursor:text;}\", \".f1nxs5xn{min-height:32px;}\", \".f1w5jphr{min-height:40px;}\", \".f5pgtk9{min-height:44px;}\"]\n});\nexport const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px'\n};\nconst useIconStyles = /*#__PURE__*/__styles({\n  icon: {\n    B7ck84d: \"f1ewtqcl\",\n    sj55zd: \"fxkbij4\",\n    Bceei9c: \"f1k6fduh\",\n    mc9l5x: \"ftgm304\",\n    Be2twd7: \"f1pp30po\",\n    Bo70h7d: \"fvc9v3g\"\n  },\n  medium: {\n    Be2twd7: \"f4ybsrx\",\n    Frg6f3: [\"f1h9en5y\", \"f1xk557c\"]\n  },\n  large: {\n    Be2twd7: \"fe5j1ua\",\n    Frg6f3: [\"f1h9en5y\", \"f1xk557c\"]\n  },\n  \"extra-large\": {\n    Be2twd7: \"f1rt2boy\",\n    Frg6f3: [\"f1t5qyk5\", \"f1ikr372\"]\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\",\n    Bceei9c: \"fdrzuqr\"\n  }\n}, {\n  d: [\".f1ewtqcl{box-sizing:border-box;}\", \".fxkbij4{color:var(--colorNeutralStrokeAccessible);}\", \".f1k6fduh{cursor:pointer;}\", \".ftgm304{display:block;}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\", \".fvc9v3g svg{display:block;}\", \".f4ybsrx{font-size:16px;}\", \".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}\", \".f1xk557c{margin-right:var(--spacingHorizontalXXS);}\", \".fe5j1ua{font-size:20px;}\", \".f1rt2boy{font-size:24px;}\", \".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}\", \".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fdrzuqr{cursor:not-allowed;}\"]\n});\n/**\n * Apply styling to the PickerControl slots based on the state\n */\nexport const useTagPickerControlStyles_unstable = state => {\n  'use no memo';\n\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//# sourceMappingURL=useTagPickerControlStyles.styles.js.map"],"names":["tagPickerControlClassNames","tagPickerControlAsideWidthToken","iconSizes","useTagPickerControlStyles_unstable","root","expandIcon","secondaryAction","aside","useStyles","__styles","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","small","useIconStyles","icon","sj55zd","Be2twd7","Bo70h7d","Frg6f3","state","styles","iconStyles","asideStyles","className","mergeClasses","size","appearance"],"mappings":"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"}

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

@@ -104,6 +104,7 @@ const tagPickerGroupClassNames = {
     ]
 });
 const useTagPickerGroupStyles_unstable = (state)=>{
+    'use no memo';
     (0, _reacttags.useTagGroupStyles_unstable)(state);
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(tagPickerGroupClassNames.root, styles[(0, _tagPicker2Tag.tagSizeToTagPickerSize)(state.size)], styles.root, state.root.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Eh141a: \"fni485r\",\n    B7ck84d: \"f1ewtqcl\",\n    Bceei9c: \"f113hnb5\"\n  },\n  medium: {\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"fa2pw7h\",\n    i8kkvl: 0,\n    Belr9w4: 0,\n    rmohyg: \"fkln5zr\"\n  },\n  large: {\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"fc0zr7g\",\n    i8kkvl: 0,\n    Belr9w4: 0,\n    rmohyg: \"f1eyhf9v\"\n  },\n  \"extra-large\": {\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"fc0zr7g\",\n    i8kkvl: 0,\n    Belr9w4: 0,\n    rmohyg: \"f1eyhf9v\"\n  }\n}, {\n  d: [\".fni485r{flex-wrap:wrap;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f113hnb5{cursor:text;}\", [\".fa2pw7h{padding:var(--spacingVerticalSNudge) 0 var(--spacingVerticalSNudge) 0;}\", {\n    p: -1\n  }], [\".fkln5zr{gap:var(--spacingHorizontalXS);}\", {\n    p: -1\n  }], [\".fc0zr7g{padding:var(--spacingVerticalS) 0 var(--spacingVerticalS) 0;}\", {\n    p: -1\n  }], [\".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}\", {\n    p: -1\n  }], [\".fc0zr7g{padding:var(--spacingVerticalS) 0 var(--spacingVerticalS) 0;}\", {\n    p: -1\n  }], [\".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}\", {\n    p: -1\n  }]]\n});\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */\nexport 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//# sourceMappingURL=useTagPickerGroupStyles.styles.js.map"],"names":["tagPickerGroupClassNames","useTagPickerGroupStyles_unstable","root","useStyles","__styles","Eh141a","B7ck84d","Bceei9c","medium","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","large","d","p","state","useTagGroupStyles_unstable","styles","className","mergeClasses","tagSizeToTagPickerSize","size"],"mappings":";;;;;;;;;;;IAIaA,wBAAwB;eAAxBA;;IA4DAC,gCAAgC;eAAhCA;;;uBAhE0B;2BACI;+BAEJ;AAChC,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,QAAQ;QACNC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,OAAO;QACLR,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACA,eAAe;QACbP,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDE,GAAG;QAAC;QAA6B;QAAqC;QAA2B;YAAC;YAAoF;gBACpLC,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA6C;gBAChDA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA0E;gBAC7EA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAkD;gBACrDA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA0E;gBAC7EA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAkD;gBACrDA,GAAG,CAAC;YACN;SAAE;KAAC;AACL;AAIO,MAAMlB,mCAAmCmB,CAAAA;IAC9CC,IAAAA,qCAA0B,EAACD;IAC3B,MAAME,SAASnB;IACfiB,MAAMlB,IAAI,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAACxB,yBAAyBE,IAAI,EAAEoB,MAAM,CAACG,IAAAA,qCAAsB,EAACL,MAAMM,IAAI,EAAE,EAAEJ,OAAOpB,IAAI,EAAEkB,MAAMlB,IAAI,CAACqB,SAAS;IAChJ,OAAOH;AACT,GACA,0DAA0D"}
+{"version":3,"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Eh141a: \"fni485r\",\n    B7ck84d: \"f1ewtqcl\",\n    Bceei9c: \"f113hnb5\"\n  },\n  medium: {\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"fa2pw7h\",\n    i8kkvl: 0,\n    Belr9w4: 0,\n    rmohyg: \"fkln5zr\"\n  },\n  large: {\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"fc0zr7g\",\n    i8kkvl: 0,\n    Belr9w4: 0,\n    rmohyg: \"f1eyhf9v\"\n  },\n  \"extra-large\": {\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"fc0zr7g\",\n    i8kkvl: 0,\n    Belr9w4: 0,\n    rmohyg: \"f1eyhf9v\"\n  }\n}, {\n  d: [\".fni485r{flex-wrap:wrap;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f113hnb5{cursor:text;}\", [\".fa2pw7h{padding:var(--spacingVerticalSNudge) 0 var(--spacingVerticalSNudge) 0;}\", {\n    p: -1\n  }], [\".fkln5zr{gap:var(--spacingHorizontalXS);}\", {\n    p: -1\n  }], [\".fc0zr7g{padding:var(--spacingVerticalS) 0 var(--spacingVerticalS) 0;}\", {\n    p: -1\n  }], [\".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}\", {\n    p: -1\n  }], [\".fc0zr7g{padding:var(--spacingVerticalS) 0 var(--spacingVerticalS) 0;}\", {\n    p: -1\n  }], [\".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}\", {\n    p: -1\n  }]]\n});\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */\nexport const useTagPickerGroupStyles_unstable = state => {\n  'use no memo';\n\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//# sourceMappingURL=useTagPickerGroupStyles.styles.js.map"],"names":["tagPickerGroupClassNames","useTagPickerGroupStyles_unstable","root","useStyles","__styles","Eh141a","B7ck84d","Bceei9c","medium","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","large","d","p","state","useTagGroupStyles_unstable","styles","className","mergeClasses","tagSizeToTagPickerSize","size"],"mappings":";;;;;;;;;;;IAIaA,wBAAwB;eAAxBA;;IA4DAC,gCAAgC;eAAhCA;;;uBAhE0B;2BACI;+BAEJ;AAChC,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,QAAQ;QACNC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,OAAO;QACLR,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACA,eAAe;QACbP,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDE,GAAG;QAAC;QAA6B;QAAqC;QAA2B;YAAC;YAAoF;gBACpLC,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA6C;gBAChDA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA0E;gBAC7EA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAkD;gBACrDA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA0E;gBAC7EA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAkD;gBACrDA,GAAG,CAAC;YACN;SAAE;KAAC;AACL;AAIO,MAAMlB,mCAAmCmB,CAAAA;IAC9C;IAEAC,IAAAA,qCAA0B,EAACD;IAC3B,MAAME,SAASnB;IACfiB,MAAMlB,IAAI,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAACxB,yBAAyBE,IAAI,EAAEoB,MAAM,CAACG,IAAAA,qCAAsB,EAACL,MAAMM,IAAI,EAAE,EAAEJ,OAAOpB,IAAI,EAAEkB,MAAMlB,IAAI,CAACqB,SAAS;IAChJ,OAAOH;AACT,GACA,0DAA0D"}

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

@@ -19,8 +19,8 @@ const _reactcombobox = require("@fluentui/react-combobox");
 const _reactfield = require("@fluentui/react-field");
 const _tokens = require("../../utils/tokens");
 const _reacttabster = require("@fluentui/react-tabster");
-const useTagPickerInput_unstable = (props, ref)=>{
-    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+const useTagPickerInput_unstable = (propsArg, ref)=>{
+    const props = (0, _reactfield.useFieldControlProps_unstable)(propsArg, {
         supportsLabelFor: true,
         supportsRequired: true,
         supportsSize: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerInput.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { useMergedRefs, getIntrinsicElementProps, useEventCallback, useIsomorphicLayoutEffect } 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 * 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 */ export const useTagPickerInput_unstable = (props, ref)=>{\n    props = useFieldControlProps_unstable(props, {\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    const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);\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    useIsomorphicLayoutEffect(()=>{\n        if (!triggerRef.current) {\n            return;\n        }\n        setTagPickerInputStretchStyle(triggerRef.current);\n    }, [\n        selectedOptions,\n        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    }, [\n        triggerRef\n    ]);\n    const { value = contextValue, disabled = contextDisabled } = props;\n    const { findLastFocusable } = useFocusFinders();\n    const isTypingRef = React.useRef(false);\n    const root = useInputTriggerSlot({\n        type: 'text',\n        value: value !== null && value !== void 0 ? value : '',\n        'aria-controls': open ? popoverId : undefined,\n        disabled,\n        ...getIntrinsicElementProps('input', props),\n        onKeyDown: useEventCallback((event)=>{\n            var _props_onKeyDown;\n            (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n            if ((event.key === ArrowLeft || event.key === Backspace) && event.currentTarget.selectionStart === 0 && tagPickerGroupRef.current) {\n                var _findLastFocusable;\n                (_findLastFocusable = findLastFocusable(tagPickerGroupRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.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 = event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n        })\n    }, useMergedRefs(triggerRef, ref), {\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    const state = {\n        components: {\n            root: 'input'\n        },\n        root,\n        disabled,\n        size\n    };\n    return state;\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 */ const setTagPickerInputStretchStyle = (input)=>{\n    // first we need to remove the CSS variable\n    // to properly calculate the difference between scrollWidth and offsetWidth\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n    if (input.scrollWidth > input.offsetWidth + 1) {\n        input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n    } else {\n        input.style.removeProperty(tagPickerInputCSSRules.width);\n    }\n};\n"],"names":["useTagPickerInput_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","useActiveDescendantContext","size","useTagPickerContext_unstable","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","selectOption","getOptionById","contextValue","value","useIsomorphicLayoutEffect","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","useFocusFinders","isTypingRef","React","useRef","root","useInputTriggerSlot","type","undefined","getIntrinsicElementProps","onKeyDown","useEventCallback","event","_props_onKeyDown","call","key","ArrowLeft","Backspace","currentTarget","selectionStart","_findLastFocusable","focus","Space","Enter","ReactDOM","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","useMergedRefs","freeform","state","multiselect","components","style","removeProperty","tagPickerInputCSSRules","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}
+{"version":3,"sources":["useTagPickerInput.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { useMergedRefs, getIntrinsicElementProps, useEventCallback, useIsomorphicLayoutEffect } 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 * 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 */ export const useTagPickerInput_unstable = (propsArg, ref)=>{\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    const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);\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    useIsomorphicLayoutEffect(()=>{\n        if (!triggerRef.current) {\n            return;\n        }\n        setTagPickerInputStretchStyle(triggerRef.current);\n    }, [\n        selectedOptions,\n        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    }, [\n        triggerRef\n    ]);\n    const { value = contextValue, disabled = contextDisabled } = props;\n    const { findLastFocusable } = useFocusFinders();\n    const isTypingRef = React.useRef(false);\n    const root = useInputTriggerSlot({\n        type: 'text',\n        value: value !== null && value !== void 0 ? value : '',\n        'aria-controls': open ? popoverId : undefined,\n        disabled,\n        ...getIntrinsicElementProps('input', props),\n        onKeyDown: useEventCallback((event)=>{\n            var _props_onKeyDown;\n            (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n            if ((event.key === ArrowLeft || event.key === Backspace) && event.currentTarget.selectionStart === 0 && tagPickerGroupRef.current) {\n                var _findLastFocusable;\n                (_findLastFocusable = findLastFocusable(tagPickerGroupRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.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 = event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n        })\n    }, useMergedRefs(triggerRef, ref), {\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    const state = {\n        components: {\n            root: 'input'\n        },\n        root,\n        disabled,\n        size\n    };\n    return state;\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 */ const setTagPickerInputStretchStyle = (input)=>{\n    // first we need to remove the CSS variable\n    // to properly calculate the difference between scrollWidth and offsetWidth\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n    if (input.scrollWidth > input.offsetWidth + 1) {\n        input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n    } else {\n        input.style.removeProperty(tagPickerInputCSSRules.width);\n    }\n};\n"],"names":["useTagPickerInput_unstable","propsArg","ref","props","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","useActiveDescendantContext","size","useTagPickerContext_unstable","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","selectOption","getOptionById","contextValue","value","useIsomorphicLayoutEffect","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","useFocusFinders","isTypingRef","React","useRef","root","useInputTriggerSlot","type","undefined","getIntrinsicElementProps","onKeyDown","useEventCallback","event","_props_onKeyDown","call","key","ArrowLeft","Backspace","currentTarget","selectionStart","_findLastFocusable","focus","Space","Enter","ReactDOM","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","useMergedRefs","freeform","state","multiselect","components","style","removeProperty","tagPickerInputCSSRules","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}

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

@@ -102,6 +102,7 @@ const useBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r1hdk6fw", null, [
     ]
 });
 const useTagPickerInputStyles_unstable = (state)=>{
+    'use no memo';
     const baseStyle = useBaseStyle();
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, 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 = /*#__PURE__*/__resetStyles(\"r1hdk6fw\", null, [\".r1hdk6fw{background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);box-sizing:border-box;border:none;min-width:24px;max-width:100%;width:var(--fluent-TagPickerInput__width, 0);flex-grow:1;}\", \".r1hdk6fw:focus{outline-style:none;}\", \".r1hdk6fw::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r1hdk6fw::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r1hdk6fw::placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r1hdk6fw::after{visibility:hidden;white-space:pre-wrap;}\"]);\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  medium: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"fa2pw7h\"\n  },\n  large: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"ft37c3\"\n  },\n  \"extra-large\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"f3abo53\"\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\",\n    De3pzq: \"f1c21dwh\",\n    Bceei9c: \"fdrzuqr\",\n    yvdlaj: \"fahhnxm\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", [\".fa2pw7h{padding:var(--spacingVerticalSNudge) 0 var(--spacingVerticalSNudge) 0;}\", {\n    p: -1\n  }], [\".ft37c3{padding:var(--spacingVerticalMNudge) 0 var(--spacingVerticalMNudge) 0;}\", {\n    p: -1\n  }], [\".f3abo53{padding:var(--spacingVerticalM) 0 var(--spacingVerticalM) 0;}\", {\n    p: -1\n  }], \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".fdrzuqr{cursor:not-allowed;}\", \".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}\", \".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}\"]\n});\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */\nexport 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//# sourceMappingURL=useTagPickerInputStyles.styles.js.map"],"names":["tagPickerInputClassNames","useTagPickerInputStyles_unstable","root","useBaseStyle","__resetStyles","useStyles","__styles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","p","state","baseStyle","styles","className","mergeClasses","size"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IA2DAC,gCAAgC;eAAhCA;;;uBA9DyC;AAG/C,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA,MAAMC,eAAe,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;IAAkQ;IAAwC;IAAyF;IAAgF;IAA2E;CAA4D;AAC7pB;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,QAAQ;QACNC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAC,OAAO;QACLT,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACA,eAAe;QACbR,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAE,UAAU;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAgD;QAA+C;QAAmD;QAAoD;YAAC;YAAoF;gBAC7RC,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAmF;gBACtFA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA0E;gBAC7EA,GAAG,CAAC;YACN;SAAE;QAAE;QAA2D;QAAkE;QAAiC;QAAqF;KAA2E;AACpU;AAIO,MAAMvB,mCAAmCwB,CAAAA;IAC9C,MAAMC,YAAYvB;IAClB,MAAMwB,SAAStB;IACfoB,MAAMvB,IAAI,CAAC0B,SAAS,GAAGC,IAAAA,mBAAY,EAAC7B,yBAAyBE,IAAI,EAAEwB,WAAWC,MAAM,CAACF,MAAMK,IAAI,CAAC,EAAEL,MAAMP,QAAQ,IAAIS,OAAOT,QAAQ,EAAEO,MAAMvB,IAAI,CAAC0B,SAAS;IACzJ,OAAOH;AACT,GACA,0DAA0D"}
+{"version":3,"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, 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 = /*#__PURE__*/__resetStyles(\"r1hdk6fw\", null, [\".r1hdk6fw{background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);box-sizing:border-box;border:none;min-width:24px;max-width:100%;width:var(--fluent-TagPickerInput__width, 0);flex-grow:1;}\", \".r1hdk6fw:focus{outline-style:none;}\", \".r1hdk6fw::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r1hdk6fw::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r1hdk6fw::placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r1hdk6fw::after{visibility:hidden;white-space:pre-wrap;}\"]);\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  medium: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"fa2pw7h\"\n  },\n  large: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"ft37c3\"\n  },\n  \"extra-large\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"f3abo53\"\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\",\n    De3pzq: \"f1c21dwh\",\n    Bceei9c: \"fdrzuqr\",\n    yvdlaj: \"fahhnxm\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", [\".fa2pw7h{padding:var(--spacingVerticalSNudge) 0 var(--spacingVerticalSNudge) 0;}\", {\n    p: -1\n  }], [\".ft37c3{padding:var(--spacingVerticalMNudge) 0 var(--spacingVerticalMNudge) 0;}\", {\n    p: -1\n  }], [\".f3abo53{padding:var(--spacingVerticalM) 0 var(--spacingVerticalM) 0;}\", {\n    p: -1\n  }], \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".fdrzuqr{cursor:not-allowed;}\", \".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}\", \".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}\"]\n});\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = state => {\n  'use no memo';\n\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//# sourceMappingURL=useTagPickerInputStyles.styles.js.map"],"names":["tagPickerInputClassNames","useTagPickerInputStyles_unstable","root","useBaseStyle","__resetStyles","useStyles","__styles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","p","state","baseStyle","styles","className","mergeClasses","size"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IA2DAC,gCAAgC;eAAhCA;;;uBA9DyC;AAG/C,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA,MAAMC,eAAe,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;IAAkQ;IAAwC;IAAyF;IAAgF;IAA2E;CAA4D;AAC7pB;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,QAAQ;QACNC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAC,OAAO;QACLT,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACA,eAAe;QACbR,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAE,UAAU;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAgD;QAA+C;QAAmD;QAAoD;YAAC;YAAoF;gBAC7RC,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAmF;gBACtFA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA0E;gBAC7EA,GAAG,CAAC;YACN;SAAE;QAAE;QAA2D;QAAkE;QAAiC;QAAqF;KAA2E;AACpU;AAIO,MAAMvB,mCAAmCwB,CAAAA;IAC9C;IAEA,MAAMC,YAAYvB;IAClB,MAAMwB,SAAStB;IACfoB,MAAMvB,IAAI,CAAC0B,SAAS,GAAGC,IAAAA,mBAAY,EAAC7B,yBAAyBE,IAAI,EAAEwB,WAAWC,MAAM,CAACF,MAAMK,IAAI,CAAC,EAAEL,MAAMP,QAAQ,IAAIS,OAAOT,QAAQ,EAAEO,MAAMvB,IAAI,CAAC0B,SAAS;IACzJ,OAAOH;AACT,GACA,0DAA0D"}

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

@@ -51,6 +51,7 @@ const tagPickerListClassNames = {
     ]
 });
 const useTagPickerListStyles_unstable = (state)=>{
+    'use no memo';
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    E5pizo: \"f1hg901r\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ft85np5\",\n    Bxyxcbc: \"fmmk62d\",\n    B7ck84d: \"f1ewtqcl\"\n  },\n  collapsed: {\n    mc9l5x: \"fjseox\"\n  }\n}, {\n  d: [\".f1hg901r{box-shadow:var(--shadow16);}\", [\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".fmmk62d{max-height:80vh;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".fjseox{display:none;}\"]\n});\n/**\n * Apply styling to the TagPickerList slots based on the state\n */\nexport 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//# sourceMappingURL=useTagPickerListStyles.styles.js.map"],"names":["tagPickerListClassNames","useTagPickerListStyles_unstable","root","useStyles","__styles","E5pizo","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bxyxcbc","B7ck84d","collapsed","mc9l5x","d","p","state","styles","className","mergeClasses","open"],"mappings":";;;;;;;;;;;IAEaA,uBAAuB;eAAvBA;;IA4BAC,+BAA+B;eAA/BA;;;uBA9B0B;AAEhC,MAAMD,0BAA0B;IACrCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,WAAW;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA0C;YAAC;YAAsD;gBACnGC,GAAG,CAAC;YACN;SAAE;QAAE;QAA8B;QAAqC;KAAyB;AAClG;AAIO,MAAMf,kCAAkCgB,CAAAA;IAC7C,MAAMC,SAASf;IACfc,MAAMf,IAAI,CAACiB,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,wBAAwBE,IAAI,EAAEgB,OAAOhB,IAAI,EAAE,CAACe,MAAMI,IAAI,IAAIH,OAAOL,SAAS,EAAEI,MAAMf,IAAI,CAACiB,SAAS;IACpI,OAAOF;AACT,GACA,yDAAyD"}
+{"version":3,"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    E5pizo: \"f1hg901r\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ft85np5\",\n    Bxyxcbc: \"fmmk62d\",\n    B7ck84d: \"f1ewtqcl\"\n  },\n  collapsed: {\n    mc9l5x: \"fjseox\"\n  }\n}, {\n  d: [\".f1hg901r{box-shadow:var(--shadow16);}\", [\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".fmmk62d{max-height:80vh;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".fjseox{display:none;}\"]\n});\n/**\n * Apply styling to the TagPickerList slots based on the state\n */\nexport const useTagPickerListStyles_unstable = state => {\n  'use no memo';\n\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//# sourceMappingURL=useTagPickerListStyles.styles.js.map"],"names":["tagPickerListClassNames","useTagPickerListStyles_unstable","root","useStyles","__styles","E5pizo","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bxyxcbc","B7ck84d","collapsed","mc9l5x","d","p","state","styles","className","mergeClasses","open"],"mappings":";;;;;;;;;;;IAEaA,uBAAuB;eAAvBA;;IA4BAC,+BAA+B;eAA/BA;;;uBA9B0B;AAEhC,MAAMD,0BAA0B;IACrCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,WAAW;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA0C;YAAC;YAAsD;gBACnGC,GAAG,CAAC;YACN;SAAE;QAAE;QAA8B;QAAqC;KAAyB;AAClG;AAIO,MAAMf,kCAAkCgB,CAAAA;IAC7C;IAEA,MAAMC,SAASf;IACfc,MAAMf,IAAI,CAACiB,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,wBAAwBE,IAAI,EAAEgB,OAAOhB,IAAI,EAAE,CAACe,MAAMI,IAAI,IAAIH,OAAOL,SAAS,EAAEI,MAAMf,IAAI,CAACiB,SAAS;IACpI,OAAOF;AACT,GACA,yDAAyD"}

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

@@ -49,6 +49,7 @@ const tagPickerOptionClassNames = {
     ]
 });
 const useTagPickerOptionStyles_unstable = (state)=>{
+    'use no memo';
     (0, _reactcombobox.useOptionStyles_unstable)({
         ...state,
         active: false,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f13qh94s\",\n    Budl1dq: \"fjxzuw\",\n    Bt984gj: \"f122n59\"\n  },\n  secondaryContent: {\n    Br312pm: \"fd46tj4\",\n    Ijaq50: \"faunodf\"\n  },\n  media: {\n    Ijaq50: \"fldnz9j\"\n  }\n}, {\n  d: [\".f13qh94s{display:grid;}\", \".fjxzuw{grid-template-columns:auto 1fr;}\", \".f122n59{align-items:center;}\", \".fd46tj4{grid-column-start:2;}\", \".faunodf{grid-row-start:2;}\", \".fldnz9j{grid-row-start:span 2;}\"]\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */\nexport 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//# sourceMappingURL=useTagPickerOptionStyles.styles.js.map"],"names":["tagPickerOptionClassNames","useTagPickerOptionStyles_unstable","root","media","secondaryContent","useStyles","__styles","mc9l5x","Budl1dq","Bt984gj","Br312pm","Ijaq50","d","state","useOptionStyles_unstable","active","disabled","focusVisible","checkIcon","undefined","selected","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IA2BAC,iCAAiC;eAAjCA;;;uBA7B0B;+BACE;AAClC,MAAMD,4BAA4B;IACvCE,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCJ,MAAM;QACJK,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAL,kBAAkB;QAChBM,SAAS;QACTC,QAAQ;IACV;IACAR,OAAO;QACLQ,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA4B;QAA4C;QAAiC;QAAkC;QAA+B;KAAmC;AACnN;AAIO,MAAMX,oCAAoCY,CAAAA;IAC/CC,IAAAA,uCAAwB,EAAC;QACvB,GAAGD,KAAK;QACRE,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,MAAMC,SAAShB;IACfQ,MAAMX,IAAI,CAACoB,SAAS,GAAGC,IAAAA,mBAAY,EAACvB,0BAA0BE,IAAI,EAAEmB,OAAOnB,IAAI,EAAEW,MAAMX,IAAI,CAACoB,SAAS;IACrG,IAAIT,MAAMV,KAAK,EAAE;QACfU,MAAMV,KAAK,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACvB,0BAA0BG,KAAK,EAAEkB,OAAOlB,KAAK,EAAEU,MAAMV,KAAK,CAACmB,SAAS;IAC3G;IACA,IAAIT,MAAMT,gBAAgB,EAAE;QAC1BS,MAAMT,gBAAgB,CAACkB,SAAS,GAAGC,IAAAA,mBAAY,EAACvB,0BAA0BI,gBAAgB,EAAEiB,OAAOjB,gBAAgB,EAAES,MAAMT,gBAAgB,CAACkB,SAAS;IACvJ;IACA,OAAOT;AACT,GACA,2DAA2D"}
+{"version":3,"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f13qh94s\",\n    Budl1dq: \"fjxzuw\",\n    Bt984gj: \"f122n59\"\n  },\n  secondaryContent: {\n    Br312pm: \"fd46tj4\",\n    Ijaq50: \"faunodf\"\n  },\n  media: {\n    Ijaq50: \"fldnz9j\"\n  }\n}, {\n  d: [\".f13qh94s{display:grid;}\", \".fjxzuw{grid-template-columns:auto 1fr;}\", \".f122n59{align-items:center;}\", \".fd46tj4{grid-column-start:2;}\", \".faunodf{grid-row-start:2;}\", \".fldnz9j{grid-row-start:span 2;}\"]\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */\nexport const useTagPickerOptionStyles_unstable = state => {\n  'use no memo';\n\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//# sourceMappingURL=useTagPickerOptionStyles.styles.js.map"],"names":["tagPickerOptionClassNames","useTagPickerOptionStyles_unstable","root","media","secondaryContent","useStyles","__styles","mc9l5x","Budl1dq","Bt984gj","Br312pm","Ijaq50","d","state","useOptionStyles_unstable","active","disabled","focusVisible","checkIcon","undefined","selected","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IA2BAC,iCAAiC;eAAjCA;;;uBA7B0B;+BACE;AAClC,MAAMD,4BAA4B;IACvCE,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCJ,MAAM;QACJK,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAL,kBAAkB;QAChBM,SAAS;QACTC,QAAQ;IACV;IACAR,OAAO;QACLQ,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA4B;QAA4C;QAAiC;QAAkC;QAA+B;KAAmC;AACnN;AAIO,MAAMX,oCAAoCY,CAAAA;IAC/C;IAEAC,IAAAA,uCAAwB,EAAC;QACvB,GAAGD,KAAK;QACRE,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,MAAMC,SAAShB;IACfQ,MAAMX,IAAI,CAACoB,SAAS,GAAGC,IAAAA,mBAAY,EAACvB,0BAA0BE,IAAI,EAAEmB,OAAOnB,IAAI,EAAEW,MAAMX,IAAI,CAACoB,SAAS;IACrG,IAAIT,MAAMV,KAAK,EAAE;QACfU,MAAMV,KAAK,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACvB,0BAA0BG,KAAK,EAAEkB,OAAOlB,KAAK,EAAEU,MAAMV,KAAK,CAACmB,SAAS;IAC3G;IACA,IAAIT,MAAMT,gBAAgB,EAAE;QAC1BS,MAAMT,gBAAgB,CAACkB,SAAS,GAAGC,IAAAA,mBAAY,EAACvB,0BAA0BI,gBAAgB,EAAEiB,OAAOjB,gBAAgB,EAAES,MAAMT,gBAAgB,CAACkB,SAAS;IACvJ;IACA,OAAOT;AACT,GACA,2DAA2D"}

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

@@ -23,6 +23,7 @@ const tagPickerOptionGroupClassNames = {
     label: 'fui-TagPickerOptionGroup__label'
 };
 const useTagPickerOptionGroupStyles = (state)=>{
+    'use no memo';
     (0, _reactcombobox.useOptionGroupStyles_unstable)(state);
     state.root.className = (0, _react.mergeClasses)(tagPickerOptionGroupClassNames.root, state.root.className);
     if (state.label) {

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

@@ -1 +1 @@
-{"version":3,"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 */\nexport 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//# sourceMappingURL=useTagPickerOptionGroupStyles.styles.js.map"],"names":["tagPickerOptionGroupClassNames","useTagPickerOptionGroupStyles","root","label","state","useOptionGroupStyles_unstable","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,8BAA8B;eAA9BA;;IAOAC,6BAA6B;eAA7BA;;;uBATgB;+BACiB;AACvC,MAAMD,iCAAiC;IAC5CE,MAAM;IACNC,OAAO;AACT;AAIO,MAAMF,gCAAgCG,CAAAA;IAC3CC,IAAAA,4CAA6B,EAACD;IAC9BA,MAAMF,IAAI,CAACI,SAAS,GAAGC,IAAAA,mBAAY,EAACP,+BAA+BE,IAAI,EAAEE,MAAMF,IAAI,CAACI,SAAS;IAC7F,IAAIF,MAAMD,KAAK,EAAE;QACfC,MAAMD,KAAK,CAACG,SAAS,GAAGC,IAAAA,mBAAY,EAACP,+BAA+BG,KAAK,EAAEC,MAAMD,KAAK,CAACG,SAAS;IAClG;IACA,OAAOF;AACT,GACA,gEAAgE"}
+{"version":3,"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 */\nexport const useTagPickerOptionGroupStyles = state => {\n  'use no memo';\n\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//# sourceMappingURL=useTagPickerOptionGroupStyles.styles.js.map"],"names":["tagPickerOptionGroupClassNames","useTagPickerOptionGroupStyles","root","label","state","useOptionGroupStyles_unstable","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,8BAA8B;eAA9BA;;IAOAC,6BAA6B;eAA7BA;;;uBATgB;+BACiB;AACvC,MAAMD,iCAAiC;IAC5CE,MAAM;IACNC,OAAO;AACT;AAIO,MAAMF,gCAAgCG,CAAAA;IAC3C;IAEAC,IAAAA,4CAA6B,EAACD;IAC9BA,MAAMF,IAAI,CAACI,SAAS,GAAGC,IAAAA,mBAAY,EAACP,+BAA+BE,IAAI,EAAEE,MAAMF,IAAI,CAACI,SAAS;IAC7F,IAAIF,MAAMD,KAAK,EAAE;QACfC,MAAMD,KAAK,CAACG,SAAS,GAAGC,IAAAA,mBAAY,EAACP,+BAA+BG,KAAK,EAAEC,MAAMD,KAAK,CAACG,SAAS;IAClG;IACA,OAAOF;AACT,GACA,gEAAgE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tag-picker",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "description": "FluentUI TagPicker component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -41,20 +41,20 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-jsx-runtime": "^9.0.39",
+    "@fluentui/react-jsx-runtime": "^9.0.40",
     "@fluentui/react-shared-contexts": "^9.19.0",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.10",
-    "@fluentui/react-portal": "^9.4.28",
-    "@fluentui/react-tabster": "^9.22.0",
-    "@fluentui/react-aria": "^9.12.1",
-    "@fluentui/react-icons": "^2.0.239",
-    "@fluentui/react-combobox": "^9.11.8",
-    "@fluentui/react-tags": "^9.3.9",
-    "@fluentui/react-context-selector": "^9.1.62",
-    "@fluentui/react-positioning": "^9.15.3",
+    "@fluentui/react-utilities": "^9.18.11",
+    "@fluentui/react-portal": "^9.4.29",
+    "@fluentui/react-tabster": "^9.22.1",
+    "@fluentui/react-aria": "^9.13.0",
+    "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-combobox": "^9.12.0",
+    "@fluentui/react-tags": "^9.3.10",
+    "@fluentui/react-context-selector": "^9.1.63",
+    "@fluentui/react-positioning": "^9.15.4",
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-field": "^9.1.68",
+    "@fluentui/react-field": "^9.1.69",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },