@fluentui/react-tag-picker 9.8.5 → 9.8.7

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControlStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type {\n  TagPickerControlInternalSlots,\n  TagPickerControlSlots,\n  TagPickerControlState,\n} from './TagPickerControl.types';\n\nexport const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots & TagPickerControlInternalSlots> = {\n  root: 'fui-TagPickerControl',\n  expandIcon: 'fui-TagPickerControl__expandIcon',\n  secondaryAction: 'fui-TagPickerControl__secondaryAction',\n  aside: 'fui-TagPickerControl__aside',\n};\n\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width' as const;\n\n/**\n * Styles for the root slot\n */\nconst 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\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\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\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\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\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  medium: {\n    minHeight: '32px',\n  },\n  large: {\n    minHeight: '40px',\n  },\n  'extra-large': {\n    minHeight: '44px',\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\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\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});\n\nconst useAsideStyles = makeStyles({\n  root: {\n    display: 'flex',\n    position: 'absolute',\n    top: '0',\n    right: tokens.spacingHorizontalM,\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});\n\nexport const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    cursor: 'pointer',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\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    minHeight: '32px',\n  },\n  large: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n    minHeight: '40px',\n  },\n  'extra-large': {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n    minHeight: '44px',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\nconst useSecondaryActionStyles = makeStyles({\n  root: { display: 'flex' },\n});\n\n/**\n * Apply styling to the PickerControl slots based on the state\n */\nexport const useTagPickerControlStyles_unstable = (state: TagPickerControlState): TagPickerControlState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const asideStyles = useAsideStyles();\n  const secondaryActionStyles = useSecondaryActionStyles();\n  state.root.className = mergeClasses(\n    tagPickerControlClassNames.root,\n    styles.root,\n    styles[state.size],\n    styles[state.appearance],\n    !state.disabled && state.appearance === 'outline' && styles.outlineInteractive,\n    state.invalid && state.appearance !== 'underline' && styles.invalid,\n    state.invalid && state.appearance === 'underline' && styles.invalidUnderline,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.aside) {\n    state.aside.className = mergeClasses(\n      tagPickerControlClassNames.aside,\n      asideStyles.root,\n      asideStyles[state.size],\n      state.aside.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      tagPickerControlClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[state.size],\n      state.disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.secondaryAction) {\n    state.secondaryAction.className = mergeClasses(\n      tagPickerControlClassNames.secondaryAction,\n      secondaryActionStyles.root,\n      state.secondaryAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","borderRadius","borderRadiusMedium","paddingRight","spacingHorizontalM","paddingLeft","alignItems","columnGap","spacingHorizontalXXS","boxSizing","display","minWidth","position","flexWrap","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","listbox","boxShadow","shadow16","maxHeight","listboxCollapsed","medium","minHeight","large","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useAsideStyles","top","iconSizes","small","useIconStyles","icon","color","justifyContent","alignSelf","fontSize","fontSizeBase500","marginLeft","spacingHorizontalSNudge","colorNeutralForegroundDisabled","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControlStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type {\n  TagPickerControlInternalSlots,\n  TagPickerControlSlots,\n  TagPickerControlState,\n} from './TagPickerControl.types';\n\nexport const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots & TagPickerControlInternalSlots> = {\n  root: 'fui-TagPickerControl',\n  expandIcon: 'fui-TagPickerControl__expandIcon',\n  secondaryAction: 'fui-TagPickerControl__secondaryAction',\n  aside: 'fui-TagPickerControl__aside',\n};\n\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width' as const;\n\n/**\n * Styles for the root slot\n */\nconst 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\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\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\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\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\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  medium: {\n    minHeight: '32px',\n  },\n  large: {\n    minHeight: '40px',\n  },\n  'extra-large': {\n    minHeight: '44px',\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\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\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});\n\nconst useAsideStyles = makeStyles({\n  root: {\n    display: 'flex',\n    position: 'absolute',\n    top: '0',\n    right: tokens.spacingHorizontalM,\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});\n\nexport const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    cursor: 'pointer',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\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    minHeight: '32px',\n  },\n  large: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n    minHeight: '40px',\n  },\n  'extra-large': {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n    minHeight: '44px',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\nconst useSecondaryActionStyles = makeStyles({\n  root: { display: 'flex' },\n});\n\n/**\n * Apply styling to the PickerControl slots based on the state\n */\nexport const useTagPickerControlStyles_unstable = (state: TagPickerControlState): TagPickerControlState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const asideStyles = useAsideStyles();\n  const secondaryActionStyles = useSecondaryActionStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerControlClassNames.root,\n    styles.root,\n    styles[state.size],\n    styles[state.appearance],\n    !state.disabled && state.appearance === 'outline' && styles.outlineInteractive,\n    state.invalid && state.appearance !== 'underline' && styles.invalid,\n    state.invalid && state.appearance === 'underline' && styles.invalidUnderline,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.aside.className = mergeClasses(\n      tagPickerControlClassNames.aside,\n      asideStyles.root,\n      asideStyles[state.size],\n      state.aside.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      tagPickerControlClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[state.size],\n      state.disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.secondaryAction) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryAction.className = mergeClasses(\n      tagPickerControlClassNames.secondaryAction,\n      secondaryActionStyles.root,\n      state.secondaryAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","borderRadius","borderRadiusMedium","paddingRight","spacingHorizontalM","paddingLeft","alignItems","columnGap","spacingHorizontalXXS","boxSizing","display","minWidth","position","flexWrap","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","listbox","boxShadow","shadow16","maxHeight","listboxCollapsed","medium","minHeight","large","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useAsideStyles","top","iconSizes","small","useIconStyles","icon","color","justifyContent","alignSelf","fontSize","fontSizeBase500","marginLeft","spacingHorizontalSNudge","colorNeutralForegroundDisabled","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"mappings":"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"}

package/lib/components/TagPickerGroup/renderTagPickerGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerGroup/renderTagPickerGroup.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\nimport { TagPickerGroupState } from './TagPickerGroup.types';\nimport { renderTagGroup_unstable, type TagGroupContextValues } from '@fluentui/react-tags';\n\nexport function renderTagPickerGroup_unstable(\n  state: TagPickerGroupState,\n  contexts: TagGroupContextValues,\n): JSXElement | null {\n  if (!state.hasSelectedOptions) {\n    return null;\n  }\n\n  return renderTagGroup_unstable(state, contexts);\n}\n"],"names":["renderTagGroup_unstable","renderTagPickerGroup_unstable","state","contexts","hasSelectedOptions"],"mappings":"AAEA,SAASA,uBAAuB,QAAoC,uBAAuB;AAE3F,OAAO,SAASC,8BACdC,KAA0B,EAC1BC,QAA+B;IAE/B,IAAI,CAACD,MAAME,kBAAkB,EAAE;QAC7B,OAAO;IACT;IAEA,OAAOJ,wBAAwBE,OAAOC;AACxC"}
+{"version":3,"sources":["../src/components/TagPickerGroup/renderTagPickerGroup.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\nimport type { TagPickerGroupState } from './TagPickerGroup.types';\nimport { renderTagGroup_unstable, type TagGroupContextValues } from '@fluentui/react-tags';\n\nexport function renderTagPickerGroup_unstable(\n  state: TagPickerGroupState,\n  contexts: TagGroupContextValues,\n): JSXElement | null {\n  if (!state.hasSelectedOptions) {\n    return null;\n  }\n\n  return renderTagGroup_unstable(state, contexts);\n}\n"],"names":["renderTagGroup_unstable","renderTagPickerGroup_unstable","state","contexts","hasSelectedOptions"],"mappings":"AAEA,SAASA,uBAAuB,QAAoC,uBAAuB;AAE3F,OAAO,SAASC,8BACdC,KAA0B,EAC1BC,QAA+B;IAE/B,IAAI,CAACD,MAAME,kBAAkB,EAAE;QAC7B,OAAO;IACT;IAEA,OAAOJ,wBAAwBE,OAAOC;AACxC"}

package/lib/components/TagPickerGroup/useTagPickerGroup.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { useTagGroup_unstable } from '@fluentui/react-tags';
 import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
 import { isHTMLElement, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';

package/lib/components/TagPickerGroup/useTagPickerGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TagPickerGroupProps, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroup_unstable } from '@fluentui/react-tags';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { isHTMLElement, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { tagPickerAppearanceToTagAppearance, tagPickerSizeToTagSize } from '../../utils/tagPicker2Tag';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ArrowRight } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render TagPickerGroup.\n *\n * The returned state can be modified with hooks such as usePickerTagGroupStyles_unstable,\n * before being passed to renderPickerTagGroup_unstable.\n *\n * @param props - props from this instance of TagPickerGroup\n * @param ref - reference to root HTMLDivElement of TagPickerGroup\n */\nexport const useTagPickerGroup_unstable = (\n  props: TagPickerGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerGroupState => {\n  const hasSelectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length > 0);\n  const hasOneSelectedOption = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length === 1);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const size = useTagPickerContext_unstable(ctx => tagPickerSizeToTagSize(ctx.size));\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: false,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const state = useTagGroup_unstable(\n    {\n      role: 'listbox',\n      disabled,\n      ...props,\n      ...arrowNavigationProps,\n      size,\n      appearance: tagPickerAppearanceToTagAppearance(appearance),\n      dismissible: true,\n      onKeyDown: useEventCallback(event => {\n        props.onKeyDown?.(event);\n        if (isHTMLElement(event.target) && event.key === ArrowRight) {\n          triggerRef.current?.focus();\n        }\n      }),\n      onDismiss: useEventCallback((event, data) => {\n        selectOption(event as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, {\n          value: data.value,\n          // These values no longer exist because the option has unregistered itself\n          // for the purposes of selection - these values aren't actually used\n          id: 'ERROR_DO_NOT_USE',\n          text: 'ERROR_DO_NOT_USE',\n        });\n        if (hasOneSelectedOption && !event.isDefaultPrevented()) {\n          triggerRef.current?.focus();\n        }\n      }),\n    },\n    useMergedRefs(ref, tagPickerGroupRef),\n  );\n\n  return {\n    ...state,\n    hasSelectedOptions,\n  };\n};\n"],"names":["React","useTagGroup_unstable","useTagPickerContext_unstable","isHTMLElement","useEventCallback","useMergedRefs","tagPickerAppearanceToTagAppearance","tagPickerSizeToTagSize","useArrowNavigationGroup","ArrowRight","useTagPickerGroup_unstable","props","ref","hasSelectedOptions","ctx","selectedOptions","length","hasOneSelectedOption","triggerRef","tagPickerGroupRef","selectOption","size","appearance","disabled","arrowNavigationProps","circular","axis","memorizeCurrent","state","role","dismissible","onKeyDown","event","target","key","current","focus","onDismiss","data","value","id","text","isDefaultPrevented"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC3F,SAASC,kCAAkC,EAAEC,sBAAsB,QAAQ,4BAA4B;AACvG,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,UAAU,QAAQ,0BAA0B;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,qBAAqBX,6BAA6BY,CAAAA,MAAOA,IAAIC,eAAe,CAACC,MAAM,GAAG;IAC5F,MAAMC,uBAAuBf,6BAA6BY,CAAAA,MAAOA,IAAIC,eAAe,CAACC,MAAM,KAAK;IAChG,MAAME,aAAahB,6BAA6BY,CAAAA,MAAOA,IAAII,UAAU;IACrE,MAAMC,oBAAoBjB,6BAA6BY,CAAAA,MAAOA,IAAIK,iBAAiB;IACnF,MAAMC,eAAelB,6BAA6BY,CAAAA,MAAOA,IAAIM,YAAY;IACzE,MAAMC,OAAOnB,6BAA6BY,CAAAA,MAAOP,uBAAuBO,IAAIO,IAAI;IAChF,MAAMC,aAAapB,6BAA6BY,CAAAA,MAAOA,IAAIQ,UAAU;IACrE,MAAMC,WAAWrB,6BAA6BY,CAAAA,MAAOA,IAAIS,QAAQ;IAEjE,MAAMC,uBAAuBhB,wBAAwB;QACnDiB,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,QAAQ3B,qBACZ;QACE4B,MAAM;QACNN;QACA,GAAGZ,KAAK;QACR,GAAGa,oBAAoB;QACvBH;QACAC,YAAYhB,mCAAmCgB;QAC/CQ,aAAa;QACbC,WAAW3B,iBAAiB4B,CAAAA;gBAC1BrB;aAAAA,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,sBAAAA,OAAkBqB;YAClB,IAAI7B,cAAc6B,MAAMC,MAAM,KAAKD,MAAME,GAAG,KAAKzB,YAAY;oBAC3DS;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;QACAC,WAAWjC,iBAAiB,CAAC4B,OAAOM;YAClClB,aAAaY,OAAiF;gBAC5FO,OAAOD,KAAKC,KAAK;gBACjB,0EAA0E;gBAC1E,oEAAoE;gBACpEC,IAAI;gBACJC,MAAM;YACR;YACA,IAAIxB,wBAAwB,CAACe,MAAMU,kBAAkB,IAAI;oBACvDxB;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;IACF,GACA/B,cAAcO,KAAKO;IAGrB,OAAO;QACL,GAAGS,KAAK;QACRf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroup.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { TagPickerGroupProps, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroup_unstable } from '@fluentui/react-tags';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { isHTMLElement, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { tagPickerAppearanceToTagAppearance, tagPickerSizeToTagSize } from '../../utils/tagPicker2Tag';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ArrowRight } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render TagPickerGroup.\n *\n * The returned state can be modified with hooks such as usePickerTagGroupStyles_unstable,\n * before being passed to renderPickerTagGroup_unstable.\n *\n * @param props - props from this instance of TagPickerGroup\n * @param ref - reference to root HTMLDivElement of TagPickerGroup\n */\nexport const useTagPickerGroup_unstable = (\n  props: TagPickerGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerGroupState => {\n  const hasSelectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length > 0);\n  const hasOneSelectedOption = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length === 1);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const size = useTagPickerContext_unstable(ctx => tagPickerSizeToTagSize(ctx.size));\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: false,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const state = useTagGroup_unstable(\n    {\n      role: 'listbox',\n      disabled,\n      ...props,\n      ...arrowNavigationProps,\n      size,\n      appearance: tagPickerAppearanceToTagAppearance(appearance),\n      dismissible: true,\n      onKeyDown: useEventCallback(event => {\n        props.onKeyDown?.(event);\n        if (isHTMLElement(event.target) && event.key === ArrowRight) {\n          triggerRef.current?.focus();\n        }\n      }),\n      onDismiss: useEventCallback((event, data) => {\n        selectOption(event as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, {\n          value: data.value,\n          // These values no longer exist because the option has unregistered itself\n          // for the purposes of selection - these values aren't actually used\n          id: 'ERROR_DO_NOT_USE',\n          text: 'ERROR_DO_NOT_USE',\n        });\n        if (hasOneSelectedOption && !event.isDefaultPrevented()) {\n          triggerRef.current?.focus();\n        }\n      }),\n    },\n    useMergedRefs(ref, tagPickerGroupRef),\n  );\n\n  return {\n    ...state,\n    hasSelectedOptions,\n  };\n};\n"],"names":["useTagGroup_unstable","useTagPickerContext_unstable","isHTMLElement","useEventCallback","useMergedRefs","tagPickerAppearanceToTagAppearance","tagPickerSizeToTagSize","useArrowNavigationGroup","ArrowRight","useTagPickerGroup_unstable","props","ref","hasSelectedOptions","ctx","selectedOptions","length","hasOneSelectedOption","triggerRef","tagPickerGroupRef","selectOption","size","appearance","disabled","arrowNavigationProps","circular","axis","memorizeCurrent","state","role","dismissible","onKeyDown","event","target","key","current","focus","onDismiss","data","value","id","text","isDefaultPrevented"],"mappings":"AAAA;AAIA,SAASA,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC3F,SAASC,kCAAkC,EAAEC,sBAAsB,QAAQ,4BAA4B;AACvG,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,UAAU,QAAQ,0BAA0B;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,qBAAqBX,6BAA6BY,CAAAA,MAAOA,IAAIC,eAAe,CAACC,MAAM,GAAG;IAC5F,MAAMC,uBAAuBf,6BAA6BY,CAAAA,MAAOA,IAAIC,eAAe,CAACC,MAAM,KAAK;IAChG,MAAME,aAAahB,6BAA6BY,CAAAA,MAAOA,IAAII,UAAU;IACrE,MAAMC,oBAAoBjB,6BAA6BY,CAAAA,MAAOA,IAAIK,iBAAiB;IACnF,MAAMC,eAAelB,6BAA6BY,CAAAA,MAAOA,IAAIM,YAAY;IACzE,MAAMC,OAAOnB,6BAA6BY,CAAAA,MAAOP,uBAAuBO,IAAIO,IAAI;IAChF,MAAMC,aAAapB,6BAA6BY,CAAAA,MAAOA,IAAIQ,UAAU;IACrE,MAAMC,WAAWrB,6BAA6BY,CAAAA,MAAOA,IAAIS,QAAQ;IAEjE,MAAMC,uBAAuBhB,wBAAwB;QACnDiB,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,QAAQ3B,qBACZ;QACE4B,MAAM;QACNN;QACA,GAAGZ,KAAK;QACR,GAAGa,oBAAoB;QACvBH;QACAC,YAAYhB,mCAAmCgB;QAC/CQ,aAAa;QACbC,WAAW3B,iBAAiB4B,CAAAA;gBAC1BrB;aAAAA,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,sBAAAA,OAAkBqB;YAClB,IAAI7B,cAAc6B,MAAMC,MAAM,KAAKD,MAAME,GAAG,KAAKzB,YAAY;oBAC3DS;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;QACAC,WAAWjC,iBAAiB,CAAC4B,OAAOM;YAClClB,aAAaY,OAAiF;gBAC5FO,OAAOD,KAAKC,KAAK;gBACjB,0EAA0E;gBAC1E,oEAAoE;gBACpEC,IAAI;gBACJC,MAAM;YACR;YACA,IAAIxB,wBAAwB,CAACe,MAAMU,kBAAkB,IAAI;oBACvDxB;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;IACF,GACA/B,cAAcO,KAAKO;IAGrB,OAAO;QACL,GAAGS,KAAK;QACRf;IACF;AACF,EAAE"}

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

@@ -69,6 +69,7 @@ export const useTagPickerGroupStyles_unstable = state => {
 
   useTagGroupStyles_unstable(state);
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);
   return state;
 };

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":["'use client';\nimport { 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,YAAY;;AACZ,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":[]}
+{"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":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,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;EAC1B;EACAiB,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/TagPickerGroup/useTagPickerGroupStyles.styles.raw.js

@@ -34,6 +34,7 @@ export const tagPickerGroupClassNames = {
     'use no memo';
     useTagGroupStyles_unstable(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\n\nexport const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots> = {\n  root: 'fui-TagPickerGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst 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/**\n * Apply styling to the TagPickerGroup slots based on the state\n */\nexport const useTagPickerGroupStyles_unstable = (state: TagPickerGroupState): TagPickerGroupState => {\n  'use no memo';\n\n  useTagGroupStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tagPickerGroupClassNames.root,\n    styles[tagSizeToTagPickerSize(state.size)],\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","flexWrap","boxSizing","cursor","medium","padding","spacingVerticalSNudge","gap","spacingHorizontalXS","large","spacingVerticalS","spacingHorizontalSNudge","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uBAAuB;AAClE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,sBAAsB,QAAQ,4BAA4B;AAEnE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,GAAGT,OAAOU,qBAAqB,CAAC,GAAG,EAAEV,OAAOU,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKX,OAAOY,mBAAmB;IACjC;IACAC,OAAO;QACLJ,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;IACA,eAAe;QACbN,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEAlB,2BAA2BkB;IAC3B,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aACrBI,yBAAyBC,IAAI,EAC7Be,MAAM,CAACjB,uBAAuBgB,MAAMG,IAAI,EAAE,EAC1CF,OAAOf,IAAI,EACXc,MAAMd,IAAI,CAACgB,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\n\nexport const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots> = {\n  root: 'fui-TagPickerGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst 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/**\n * Apply styling to the TagPickerGroup slots based on the state\n */\nexport const useTagPickerGroupStyles_unstable = (state: TagPickerGroupState): TagPickerGroupState => {\n  'use no memo';\n\n  useTagGroupStyles_unstable(state);\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerGroupClassNames.root,\n    styles[tagSizeToTagPickerSize(state.size)],\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","flexWrap","boxSizing","cursor","medium","padding","spacingVerticalSNudge","gap","spacingHorizontalXS","large","spacingVerticalS","spacingHorizontalSNudge","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uBAAuB;AAClE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,sBAAsB,QAAQ,4BAA4B;AAEnE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,GAAGT,OAAOU,qBAAqB,CAAC,GAAG,EAAEV,OAAOU,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKX,OAAOY,mBAAmB;IACjC;IACAC,OAAO;QACLJ,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;IACA,eAAe;QACbN,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEAlB,2BAA2BkB;IAC3B,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aACrBI,yBAAyBC,IAAI,EAC7Be,MAAM,CAACjB,uBAAuBgB,MAAMG,IAAI,EAAE,EAC1CF,OAAOf,IAAI,EACXc,MAAMd,IAAI,CAACgB,SAAS;IAGtB,OAAOF;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/TagPickerInput.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ComboboxProps } from '@fluentui/react-combobox';\nimport { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerInputSlots = {\n  root: NonNullable<Slot<'input'>>;\n};\n\n/**\n * TagPickerInput Props\n */\nexport type TagPickerInputProps = Omit<\n  ComponentProps<Partial<TagPickerInputSlots>>,\n  'children' | 'size' | 'defaultValue'\n> &\n  Pick<ComboboxProps, 'clearable' | 'appearance'> & {\n    disabled?: boolean;\n    value?: string;\n  };\n\n/**\n * State used in rendering TagPickerInput\n */\nexport type TagPickerInputState = ComponentState<TagPickerInputSlots> &\n  Pick<TagPickerContextValue, 'size' | 'disabled'>;\n"],"names":[],"mappings":"AAoBA;;CAEC,GACD,WACmD"}
+{"version":3,"sources":["../src/components/TagPickerInput/TagPickerInput.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ComboboxProps } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerInputSlots = {\n  root: NonNullable<Slot<'input'>>;\n};\n\n/**\n * TagPickerInput Props\n */\nexport type TagPickerInputProps = Omit<\n  ComponentProps<Partial<TagPickerInputSlots>>,\n  'children' | 'size' | 'defaultValue'\n> &\n  Pick<ComboboxProps, 'clearable' | 'appearance'> & {\n    disabled?: boolean;\n    value?: string;\n  };\n\n/**\n * State used in rendering TagPickerInput\n */\nexport type TagPickerInputState = ComponentState<TagPickerInputSlots> &\n  Pick<TagPickerContextValue, 'size' | 'disabled'>;\n"],"names":[],"mappings":"AAoBA;;CAEC,GACD,WACmD"}

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

@@ -67,6 +67,7 @@ export const useTagPickerInputStyles_unstable = state => {
 
   const baseStyle = useBaseStyle();
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);
   return state;
 };

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":["'use client';\nimport { 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,YAAY;;AACZ,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":[]}
+{"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":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\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,YAAY;;AACZ,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;EAC1B;EACAoB,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/TagPickerInput/useTagPickerInputStyles.styles.raw.js

@@ -61,6 +61,7 @@ const useBaseStyle = makeResetStyles({
     'use no memo';
     const baseStyle = useBaseStyle();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nimport { tagPickerInputTokens } from '../../utils/tokens';\n\nexport const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots> = {\n  root: 'fui-TagPickerInput',\n};\n\nconst useBaseStyle = makeResetStyles({\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground1,\n  fontFamily: tokens.fontFamilyBase,\n  boxSizing: 'border-box',\n\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/**\n * Styles for the root slot\n */\nconst 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/**\n * Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = (state: TagPickerInputState): TagPickerInputState => {\n  'use no memo';\n\n  const baseStyle = useBaseStyle();\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tagPickerInputClassNames.root,\n    baseStyle,\n    styles[state.size],\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","backgroundColor","colorTransparentBackground","color","colorNeutralForeground1","fontFamily","fontFamilyBase","boxSizing","outlineStyle","colorNeutralForeground4","opacity","visibility","whiteSpace","border","minWidth","maxWidth","width","flexGrow","useStyles","medium","body1","padding","spacingVerticalSNudge","large","spacingVerticalMNudge","spacingVerticalM","disabled","colorNeutralForegroundDisabled","cursor","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,wBAAwB;AAGjE,SAASC,oBAAoB,QAAQ,qBAAqB;AAE1D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,eAAeR,gBAAgB;IACnCS,iBAAiBL,OAAOM,0BAA0B;IAClDC,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAYT,OAAOU,cAAc;IACjCC,WAAW;IAEX,WAAW;QACTC,cAAc;IAChB;IACA,kBAAkB;QAChBL,OAAOP,OAAOa,uBAAuB;QACrCC,SAAS;IACX;IACA,YAAY;QACVC,YAAY;QACZC,YAAY;IACd;IACAC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACV,yBAAyB;IACzB,2FAA2F;IAC3F,4DAA4D;IAC5DC,OAAOnB,qBAAqBmB,KAAK;IACjCC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,YAAYzB,WAAW;IAC3B,gBAAgB;IAChB0B,QAAQ;QACN,GAAGxB,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO0B,qBAAqB,CAAC,GAAG,EAAE1B,OAAO0B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACAC,OAAO;QACL,GAAG5B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO4B,qBAAqB,CAAC,GAAG,EAAE5B,OAAO4B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACA,eAAe;QACb,GAAG7B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO6B,gBAAgB,CAAC,GAAG,EAAE7B,OAAO6B,gBAAgB,CAAC,EAAE,CAAC;IACtE;IACAC,UAAU;QACRvB,OAAOP,OAAO+B,8BAA8B;QAC5C1B,iBAAiBL,OAAOM,0BAA0B;QAClD0B,QAAQ;QACR,iBAAiB;YACfzB,OAAOP,OAAO+B,8BAA8B;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,YAAY/B;IAClB,MAAMgC,SAASd;IACfY,MAAM/B,IAAI,CAACkC,SAAS,GAAGvC,aACrBI,yBAAyBC,IAAI,EAC7BgC,WACAC,MAAM,CAACF,MAAMI,IAAI,CAAC,EAClBJ,MAAMJ,QAAQ,IAAIM,OAAON,QAAQ,EACjCI,MAAM/B,IAAI,CAACkC,SAAS;IAEtB,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nimport { tagPickerInputTokens } from '../../utils/tokens';\n\nexport const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots> = {\n  root: 'fui-TagPickerInput',\n};\n\nconst useBaseStyle = makeResetStyles({\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground1,\n  fontFamily: tokens.fontFamilyBase,\n  boxSizing: 'border-box',\n\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/**\n * Styles for the root slot\n */\nconst 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/**\n * Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = (state: TagPickerInputState): TagPickerInputState => {\n  'use no memo';\n\n  const baseStyle = useBaseStyle();\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerInputClassNames.root,\n    baseStyle,\n    styles[state.size],\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","backgroundColor","colorTransparentBackground","color","colorNeutralForeground1","fontFamily","fontFamilyBase","boxSizing","outlineStyle","colorNeutralForeground4","opacity","visibility","whiteSpace","border","minWidth","maxWidth","width","flexGrow","useStyles","medium","body1","padding","spacingVerticalSNudge","large","spacingVerticalMNudge","spacingVerticalM","disabled","colorNeutralForegroundDisabled","cursor","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,wBAAwB;AAGjE,SAASC,oBAAoB,QAAQ,qBAAqB;AAE1D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,eAAeR,gBAAgB;IACnCS,iBAAiBL,OAAOM,0BAA0B;IAClDC,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAYT,OAAOU,cAAc;IACjCC,WAAW;IAEX,WAAW;QACTC,cAAc;IAChB;IACA,kBAAkB;QAChBL,OAAOP,OAAOa,uBAAuB;QACrCC,SAAS;IACX;IACA,YAAY;QACVC,YAAY;QACZC,YAAY;IACd;IACAC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACV,yBAAyB;IACzB,2FAA2F;IAC3F,4DAA4D;IAC5DC,OAAOnB,qBAAqBmB,KAAK;IACjCC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,YAAYzB,WAAW;IAC3B,gBAAgB;IAChB0B,QAAQ;QACN,GAAGxB,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO0B,qBAAqB,CAAC,GAAG,EAAE1B,OAAO0B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACAC,OAAO;QACL,GAAG5B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO4B,qBAAqB,CAAC,GAAG,EAAE5B,OAAO4B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACA,eAAe;QACb,GAAG7B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO6B,gBAAgB,CAAC,GAAG,EAAE7B,OAAO6B,gBAAgB,CAAC,EAAE,CAAC;IACtE;IACAC,UAAU;QACRvB,OAAOP,OAAO+B,8BAA8B;QAC5C1B,iBAAiBL,OAAOM,0BAA0B;QAClD0B,QAAQ;QACR,iBAAiB;YACfzB,OAAOP,OAAO+B,8BAA8B;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,YAAY/B;IAClB,MAAMgC,SAASd;IACf,oDAAoD;IACpDY,MAAM/B,IAAI,CAACkC,SAAS,GAAGvC,aACrBI,yBAAyBC,IAAI,EAC7BgC,WACAC,MAAM,CAACF,MAAMI,IAAI,CAAC,EAClBJ,MAAMJ,QAAQ,IAAIM,OAAON,QAAQ,EACjCI,MAAM/B,IAAI,CAACkC,SAAS;IAEtB,OAAOH;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerList/TagPickerList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Listbox } from '@fluentui/react-combobox';\nimport { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerListSlots = {\n  root: Slot<typeof Listbox>;\n};\n\n/**\n * TagPickerList Props\n */\nexport type TagPickerListProps = ComponentProps<TagPickerListSlots> & {\n  /**\n   * @deprecated TagPickerList is always rendered within a TagPicker which manages active descendant focus.\n   * This prop has no effect.\n   */\n  disableAutoFocus?: boolean;\n};\n\n/**\n * State used in rendering TagPickerList\n */\nexport type TagPickerListState = ComponentState<TagPickerListSlots> & Pick<TagPickerContextValue, 'open'>;\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAA0G"}
+{"version":3,"sources":["../src/components/TagPickerList/TagPickerList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Listbox } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerListSlots = {\n  root: Slot<typeof Listbox>;\n};\n\n/**\n * TagPickerList Props\n */\nexport type TagPickerListProps = ComponentProps<TagPickerListSlots> & {\n  /**\n   * @deprecated TagPickerList is always rendered within a TagPicker which manages active descendant focus.\n   * This prop has no effect.\n   */\n  disableAutoFocus?: boolean;\n};\n\n/**\n * State used in rendering TagPickerList\n */\nexport type TagPickerListState = ComponentState<TagPickerListSlots> & Pick<TagPickerContextValue, 'open'>;\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAA0G"}

package/lib/components/TagPickerList/useTagPickerList.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { Listbox } from '@fluentui/react-combobox';
 import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
 import { slot, useMergedRefs } from '@fluentui/react-utilities';

package/lib/components/TagPickerList/useTagPickerList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerList/useTagPickerList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TagPickerListProps, TagPickerListState } from './TagPickerList.types';\nimport { Listbox } from '@fluentui/react-combobox';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useListboxSlot } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render TagPickerList.\n *\n * The returned state can be modified with hooks such as useTagPickerListStyles_unstable,\n * before being passed to renderTagPickerList_unstable.\n *\n * @param props - props from this instance of TagPickerList\n * @param ref - reference to root HTMLDivElement of TagPickerList\n */\nexport const useTagPickerList_unstable = (\n  props: TagPickerListProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerListState => {\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef) as\n    | React.RefObject<HTMLInputElement>\n    | React.RefObject<HTMLButtonElement>;\n  const popoverRef = useTagPickerContext_unstable(ctx => ctx.popoverRef);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n\n  return {\n    open,\n    components: {\n      root: Listbox,\n    },\n    root: slot.always(\n      {\n        ...useListboxSlot(props, useMergedRefs(popoverRef, ref), {\n          state: { multiselect: true },\n          triggerRef,\n          defaultProps: { id: popoverId },\n        }),\n        role: 'listbox',\n      },\n      { elementType: Listbox },\n    ),\n  };\n};\n"],"names":["React","Listbox","useTagPickerContext_unstable","slot","useMergedRefs","useListboxSlot","useTagPickerList_unstable","props","ref","triggerRef","ctx","popoverRef","popoverId","open","components","root","always","state","multiselect","defaultProps","id","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,QAAQ,2BAA2B;AACnD,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,cAAc,QAAQ,2BAA2B;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,aAAaP,6BAA6BQ,CAAAA,MAAOA,IAAID,UAAU;IAGrE,MAAME,aAAaT,6BAA6BQ,CAAAA,MAAOA,IAAIC,UAAU;IACrE,MAAMC,YAAYV,6BAA6BQ,CAAAA,MAAOA,IAAIE,SAAS;IACnE,MAAMC,OAAOX,6BAA6BQ,CAAAA,MAAOA,IAAIG,IAAI;IAEzD,OAAO;QACLA;QACAC,YAAY;YACVC,MAAMd;QACR;QACAc,MAAMZ,KAAKa,MAAM,CACf;YACE,GAAGX,eAAeE,OAAOH,cAAcO,YAAYH,MAAM;gBACvDS,OAAO;oBAAEC,aAAa;gBAAK;gBAC3BT;gBACAU,cAAc;oBAAEC,IAAIR;gBAAU;YAChC,EAAE;YACFS,MAAM;QACR,GACA;YAAEC,aAAarB;QAAQ;IAE3B;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerList/useTagPickerList.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { TagPickerListProps, TagPickerListState } from './TagPickerList.types';\nimport { Listbox } from '@fluentui/react-combobox';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useListboxSlot } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render TagPickerList.\n *\n * The returned state can be modified with hooks such as useTagPickerListStyles_unstable,\n * before being passed to renderTagPickerList_unstable.\n *\n * @param props - props from this instance of TagPickerList\n * @param ref - reference to root HTMLDivElement of TagPickerList\n */\nexport const useTagPickerList_unstable = (\n  props: TagPickerListProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerListState => {\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef) as\n    | React.RefObject<HTMLInputElement>\n    | React.RefObject<HTMLButtonElement>;\n  const popoverRef = useTagPickerContext_unstable(ctx => ctx.popoverRef);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n\n  return {\n    open,\n    components: {\n      root: Listbox,\n    },\n    root: slot.always(\n      {\n        ...useListboxSlot(props, useMergedRefs(popoverRef, ref), {\n          state: { multiselect: true },\n          triggerRef,\n          defaultProps: { id: popoverId },\n        }),\n        role: 'listbox',\n      },\n      { elementType: Listbox },\n    ),\n  };\n};\n"],"names":["Listbox","useTagPickerContext_unstable","slot","useMergedRefs","useListboxSlot","useTagPickerList_unstable","props","ref","triggerRef","ctx","popoverRef","popoverId","open","components","root","always","state","multiselect","defaultProps","id","role","elementType"],"mappings":"AAAA;AAIA,SAASA,OAAO,QAAQ,2BAA2B;AACnD,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,cAAc,QAAQ,2BAA2B;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,aAAaP,6BAA6BQ,CAAAA,MAAOA,IAAID,UAAU;IAGrE,MAAME,aAAaT,6BAA6BQ,CAAAA,MAAOA,IAAIC,UAAU;IACrE,MAAMC,YAAYV,6BAA6BQ,CAAAA,MAAOA,IAAIE,SAAS;IACnE,MAAMC,OAAOX,6BAA6BQ,CAAAA,MAAOA,IAAIG,IAAI;IAEzD,OAAO;QACLA;QACAC,YAAY;YACVC,MAAMd;QACR;QACAc,MAAMZ,KAAKa,MAAM,CACf;YACE,GAAGX,eAAeE,OAAOH,cAAcO,YAAYH,MAAM;gBACvDS,OAAO;oBAAEC,aAAa;gBAAK;gBAC3BT;gBACAU,cAAc;oBAAEC,IAAIR;gBAAU;YAChC,EAAE;YACFS,MAAM;QACR,GACA;YAAEC,aAAarB;QAAQ;IAE3B;AACF,EAAE"}

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

@@ -34,6 +34,7 @@ export const useTagPickerListStyles_unstable = state => {
   'use no memo';
 
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   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":["'use client';\nimport { 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,YAAY;;AACZ,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":[]}
+{"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":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,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;EAC1B;EACAc,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/TagPickerList/useTagPickerListStyles.styles.raw.js

@@ -22,6 +22,7 @@ export const tagPickerListClassNames = {
  */ export const useTagPickerListStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerList/useTagPickerListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerListSlots, TagPickerListState } from './TagPickerList.types';\n\nexport const tagPickerListClassNames: SlotClassNames<TagPickerListSlots> = {\n  root: 'fui-TagPickerList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  collapsed: {\n    display: 'none',\n  },\n});\n\n/**\n * Apply styling to the TagPickerList slots based on the state\n */\nexport const useTagPickerListStyles_unstable = (state: TagPickerListState): TagPickerListState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tagPickerListClassNames.root,\n    styles.root,\n    !state.open && styles.collapsed,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","boxShadow","shadow16","borderRadius","borderRadiusMedium","maxHeight","boxSizing","collapsed","display","useTagPickerListStyles_unstable","state","styles","className","open"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,WAAW,GAAGJ,OAAOK,QAAQ,EAAE;QAC/BC,cAAcN,OAAOO,kBAAkB;QACvCC,WAAW;QACXC,WAAW;IACb;IAEAC,WAAW;QACTC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aACrBE,wBAAwBC,IAAI,EAC5BY,OAAOZ,IAAI,EACX,CAACW,MAAMG,IAAI,IAAIF,OAAOJ,SAAS,EAC/BG,MAAMX,IAAI,CAACa,SAAS;IAEtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerList/useTagPickerListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerListSlots, TagPickerListState } from './TagPickerList.types';\n\nexport const tagPickerListClassNames: SlotClassNames<TagPickerListSlots> = {\n  root: 'fui-TagPickerList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  collapsed: {\n    display: 'none',\n  },\n});\n\n/**\n * Apply styling to the TagPickerList slots based on the state\n */\nexport const useTagPickerListStyles_unstable = (state: TagPickerListState): TagPickerListState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerListClassNames.root,\n    styles.root,\n    !state.open && styles.collapsed,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","boxShadow","shadow16","borderRadius","borderRadiusMedium","maxHeight","boxSizing","collapsed","display","useTagPickerListStyles_unstable","state","styles","className","open"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,WAAW,GAAGJ,OAAOK,QAAQ,EAAE;QAC/BC,cAAcN,OAAOO,kBAAkB;QACvCC,WAAW;QACXC,WAAW;IACb;IAEAC,WAAW;QACTC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASX;IACf,oDAAoD;IACpDU,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aACrBE,wBAAwBC,IAAI,EAC5BY,OAAOZ,IAAI,EACX,CAACW,MAAMG,IAAI,IAAIF,OAAOJ,SAAS,EAC/BG,MAAMX,IAAI,CAACa,SAAS;IAEtB,OAAOF;AACT,EAAE"}

package/lib/components/TagPickerOption/TagPickerOption.types.js

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * State used in rendering TagPickerOption
+ */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerOption/TagPickerOption.types.ts"],"sourcesContent":["import { OptionSlots, OptionState } from '@fluentui/react-combobox';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {\n  media?: Slot<'div'>;\n  secondaryContent?: Slot<'span'>;\n};\n\n/**\n * TagPickerOption Props\n */\nexport type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {\n  value: string;\n} & (\n    | {\n        /**\n         * An optional override the string value of the Option's display text,\n         * defaulting to the Option's child content.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the Option's display text when the Option's children are not a string.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering TagPickerOption\n */\nexport type TagPickerOptionState = ComponentState<TagPickerOptionSlots> & Pick<OptionState, 'components' | 'root'>;\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/TagPickerOption/TagPickerOption.types.ts"],"sourcesContent":["import type { OptionSlots, OptionState } from '@fluentui/react-combobox';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {\n  media?: Slot<'div'>;\n  secondaryContent?: Slot<'span'>;\n};\n\n/**\n * TagPickerOption Props\n */\nexport type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {\n  value: string;\n} & (\n    | {\n        /**\n         * An optional override the string value of the Option's display text,\n         * defaulting to the Option's child content.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the Option's display text when the Option's children are not a string.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering TagPickerOption\n */\nexport type TagPickerOptionState = ComponentState<TagPickerOptionSlots> & Pick<OptionState, 'components' | 'root'>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAAmH"}

package/lib/components/TagPickerOption/useTagPickerOption.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { slot } from '@fluentui/react-utilities';
 import { useOption_unstable } from '@fluentui/react-combobox';
 /**

package/lib/components/TagPickerOption/useTagPickerOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOption.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useOption_unstable } from '@fluentui/react-combobox';\nimport type { TagPickerOptionProps, TagPickerOptionState } from './TagPickerOption.types';\n\n/**\n * Create the state required to render TagPickerOption.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionStyles_unstable,\n * before being passed to renderTagPickerOption_unstable.\n *\n * @param props - props from this instance of TagPickerOption\n * @param ref - reference to root HTMLDivElement of TagPickerOption\n */\nexport const useTagPickerOption_unstable = (\n  props: TagPickerOptionProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerOptionState => {\n  const optionState = useOption_unstable(props, ref);\n  const state: TagPickerOptionState = {\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...optionState.components,\n      media: 'div',\n      secondaryContent: 'span',\n    },\n    media: slot.optional(props.media, {\n      elementType: 'div',\n    }),\n    secondaryContent: slot.optional(props.secondaryContent, {\n      elementType: 'span',\n    }),\n    root: slot.always(\n      { ...optionState.root, role: 'option', 'aria-checked': props['aria-checked'] },\n      {\n        elementType: 'div',\n      },\n    ),\n  };\n\n  return state;\n};\n"],"names":["React","slot","useOption_unstable","useTagPickerOption_unstable","props","ref","optionState","state","components","media","secondaryContent","optional","elementType","root","always","role"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,cAAcJ,mBAAmBE,OAAOC;IAC9C,MAAME,QAA8B;QAClCC,YAAY;YACV,4DAA4D;YAC5D,GAAGF,YAAYE,UAAU;YACzBC,OAAO;YACPC,kBAAkB;QACpB;QACAD,OAAOR,KAAKU,QAAQ,CAACP,MAAMK,KAAK,EAAE;YAChCG,aAAa;QACf;QACAF,kBAAkBT,KAAKU,QAAQ,CAACP,MAAMM,gBAAgB,EAAE;YACtDE,aAAa;QACf;QACAC,MAAMZ,KAAKa,MAAM,CACf;YAAE,GAAGR,YAAYO,IAAI;YAAEE,MAAM;YAAU,gBAAgBX,KAAK,CAAC,eAAe;QAAC,GAC7E;YACEQ,aAAa;QACf;IAEJ;IAEA,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOption.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useOption_unstable } from '@fluentui/react-combobox';\nimport type { TagPickerOptionProps, TagPickerOptionState } from './TagPickerOption.types';\n\n/**\n * Create the state required to render TagPickerOption.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionStyles_unstable,\n * before being passed to renderTagPickerOption_unstable.\n *\n * @param props - props from this instance of TagPickerOption\n * @param ref - reference to root HTMLDivElement of TagPickerOption\n */\nexport const useTagPickerOption_unstable = (\n  props: TagPickerOptionProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerOptionState => {\n  const optionState = useOption_unstable(props, ref);\n  const state: TagPickerOptionState = {\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...optionState.components,\n      media: 'div',\n      secondaryContent: 'span',\n    },\n    media: slot.optional(props.media, {\n      elementType: 'div',\n    }),\n    secondaryContent: slot.optional(props.secondaryContent, {\n      elementType: 'span',\n    }),\n    root: slot.always(\n      { ...optionState.root, role: 'option', 'aria-checked': props['aria-checked'] },\n      {\n        elementType: 'div',\n      },\n    ),\n  };\n\n  return state;\n};\n"],"names":["slot","useOption_unstable","useTagPickerOption_unstable","props","ref","optionState","state","components","media","secondaryContent","optional","elementType","root","always","role"],"mappings":"AAAA;AAGA,SAASA,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,cAAcJ,mBAAmBE,OAAOC;IAC9C,MAAME,QAA8B;QAClCC,YAAY;YACV,4DAA4D;YAC5D,GAAGF,YAAYE,UAAU;YACzBC,OAAO;YACPC,kBAAkB;QACpB;QACAD,OAAOR,KAAKU,QAAQ,CAACP,MAAMK,KAAK,EAAE;YAChCG,aAAa;QACf;QACAF,kBAAkBT,KAAKU,QAAQ,CAACP,MAAMM,gBAAgB,EAAE;YACtDE,aAAa;QACf;QACAC,MAAMZ,KAAKa,MAAM,CACf;YAAE,GAAGR,YAAYO,IAAI;YAAEE,MAAM;YAAU,gBAAgBX,KAAK,CAAC,eAAe;QAAC,GAC7E;YACEQ,aAAa;QACf;IAEJ;IAEA,OAAOL;AACT,EAAE"}

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

@@ -29,6 +29,7 @@ export const useTagPickerOptionStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const secondaryContentBaseStyle = useSecondaryContentBaseStyle();
   const mediaBaseStyle = useMediaBaseStyle();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);
   useOptionStyles_unstable({
     ...state,
@@ -39,9 +40,11 @@ export const useTagPickerOptionStyles_unstable = state => {
     selected: false
   });
   if (state.media) {
+    // eslint-disable-next-line react-hooks/immutability
     state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);
   }
   if (state.secondaryContent) {
+    // eslint-disable-next-line react-hooks/immutability
     state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);
   }
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","useRootStyles","mc9l5x","Budl1dq","d","useSecondaryContentBaseStyle","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n    root: 'fui-TagPickerOption',\n    media: 'fui-TagPickerOption__media',\n    secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\nconst useRootBaseStyle = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center'\n});\nconst useRootStyles = makeStyles({\n    secondaryContent: {\n        display: 'grid',\n        gridTemplateColumns: 'auto 1fr'\n    }\n});\nconst useSecondaryContentBaseStyle = makeResetStyles({\n    gridColumnStart: 2,\n    gridRowStart: 2,\n    ...typographyStyles.caption1\n});\nconst useMediaBaseStyle = makeResetStyles({\n    gridRowStart: 'span 2'\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyle = useRootBaseStyle();\n    const rootStyles = useRootStyles();\n    const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n    const mediaBaseStyle = useMediaBaseStyle();\n    state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);\n    useOptionStyles_unstable({\n        ...state,\n        active: false,\n        disabled: false,\n        focusVisible: false,\n        checkIcon: undefined,\n        selected: false\n    });\n    if (state.media) {\n        state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,gBAAgB,gBAAGT,aAAA,gEAGxB,CAAC;AACF,MAAMU,aAAa,gBAAGT,QAAA;EAAAO,gBAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,4BAA4B,gBAAGd,aAAA,oNAIpC,CAAC;AACF,MAAMe,iBAAiB,gBAAGf,aAAA,sDAEzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMgB,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,aAAa,GAAGT,gBAAgB,CAAC,CAAC;EACxC,MAAMU,UAAU,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAMU,yBAAyB,GAAGN,4BAA4B,CAAC,CAAC;EAChE,MAAMO,cAAc,GAAGN,iBAAiB,CAAC,CAAC;EAC1CE,KAAK,CAACX,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEY,aAAa,EAAED,KAAK,CAACT,gBAAgB,IAAIW,UAAU,CAACX,gBAAgB,EAAES,KAAK,CAACX,IAAI,CAACgB,SAAS,CAAC;EAC/JnB,wBAAwB,CAAC;IACrB,GAAGc,KAAK;IACRM,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAEC,SAAS;IACpBC,QAAQ,EAAE;EACd,CAAC,CAAC;EACF,IAAIX,KAAK,CAACV,KAAK,EAAE;IACbU,KAAK,CAACV,KAAK,CAACe,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACE,KAAK,EAAEc,cAAc,EAAEJ,KAAK,CAACV,KAAK,CAACe,SAAS,CAAC;EAChH;EACA,IAAIL,KAAK,CAACT,gBAAgB,EAAE;IACxBS,KAAK,CAACT,gBAAgB,CAACc,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACG,gBAAgB,EAAEY,yBAAyB,EAAEH,KAAK,CAACT,gBAAgB,CAACc,SAAS,CAAC;EAC5J;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","useRootStyles","mc9l5x","Budl1dq","d","useSecondaryContentBaseStyle","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n    root: 'fui-TagPickerOption',\n    media: 'fui-TagPickerOption__media',\n    secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\nconst useRootBaseStyle = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center'\n});\nconst useRootStyles = makeStyles({\n    secondaryContent: {\n        display: 'grid',\n        gridTemplateColumns: 'auto 1fr'\n    }\n});\nconst useSecondaryContentBaseStyle = makeResetStyles({\n    gridColumnStart: 2,\n    gridRowStart: 2,\n    ...typographyStyles.caption1\n});\nconst useMediaBaseStyle = makeResetStyles({\n    gridRowStart: 'span 2'\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyle = useRootBaseStyle();\n    const rootStyles = useRootStyles();\n    const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n    const mediaBaseStyle = useMediaBaseStyle();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);\n    useOptionStyles_unstable({\n        ...state,\n        active: false,\n        disabled: false,\n        focusVisible: false,\n        checkIcon: undefined,\n        selected: false\n    });\n    if (state.media) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n    }\n    if (state.secondaryContent) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,gBAAgB,gBAAGT,aAAA,gEAGxB,CAAC;AACF,MAAMU,aAAa,gBAAGT,QAAA;EAAAO,gBAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,4BAA4B,gBAAGd,aAAA,oNAIpC,CAAC;AACF,MAAMe,iBAAiB,gBAAGf,aAAA,sDAEzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMgB,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,aAAa,GAAGT,gBAAgB,CAAC,CAAC;EACxC,MAAMU,UAAU,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAMU,yBAAyB,GAAGN,4BAA4B,CAAC,CAAC;EAChE,MAAMO,cAAc,GAAGN,iBAAiB,CAAC,CAAC;EAC1C;EACAE,KAAK,CAACX,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEY,aAAa,EAAED,KAAK,CAACT,gBAAgB,IAAIW,UAAU,CAACX,gBAAgB,EAAES,KAAK,CAACX,IAAI,CAACgB,SAAS,CAAC;EAC/JnB,wBAAwB,CAAC;IACrB,GAAGc,KAAK;IACRM,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAEC,SAAS;IACpBC,QAAQ,EAAE;EACd,CAAC,CAAC;EACF,IAAIX,KAAK,CAACV,KAAK,EAAE;IACb;IACAU,KAAK,CAACV,KAAK,CAACe,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACE,KAAK,EAAEc,cAAc,EAAEJ,KAAK,CAACV,KAAK,CAACe,SAAS,CAAC;EAChH;EACA,IAAIL,KAAK,CAACT,gBAAgB,EAAE;IACxB;IACAS,KAAK,CAACT,gBAAgB,CAACc,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACG,gBAAgB,EAAEY,yBAAyB,EAAEH,KAAK,CAACT,gBAAgB,CAACc,SAAS,CAAC;EAC5J;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -33,6 +33,7 @@ const useMediaBaseStyle = makeResetStyles({
     const rootStyles = useRootStyles();
     const secondaryContentBaseStyle = useSecondaryContentBaseStyle();
     const mediaBaseStyle = useMediaBaseStyle();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);
     useOptionStyles_unstable({
         ...state,
@@ -43,9 +44,11 @@ const useMediaBaseStyle = makeResetStyles({
         selected: false
     });
     if (state.media) {
+        // eslint-disable-next-line react-hooks/immutability
         state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);
     }
     if (state.secondaryContent) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);
     }
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots> = {\n  root: 'fui-TagPickerOption',\n  media: 'fui-TagPickerOption__media',\n  secondaryContent: 'fui-TagPickerOption__secondaryContent',\n};\n\nconst useRootBaseStyle = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst useRootStyles = makeStyles({\n  secondaryContent: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n  },\n});\n\nconst useSecondaryContentBaseStyle = makeResetStyles({\n  gridColumnStart: 2,\n  gridRowStart: 2,\n  ...typographyStyles.caption1,\n});\n\nconst useMediaBaseStyle = makeResetStyles({\n  gridRowStart: 'span 2',\n});\n\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */\nexport const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState): TagPickerOptionState => {\n  'use no memo';\n\n  const rootBaseStyle = useRootBaseStyle();\n  const rootStyles = useRootStyles();\n  const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n  const mediaBaseStyle = useMediaBaseStyle();\n\n  state.root.className = mergeClasses(\n    tagPickerOptionClassNames.root,\n    rootBaseStyle,\n    state.secondaryContent && rootStyles.secondaryContent,\n    state.root.className,\n  );\n  useOptionStyles_unstable({\n    ...state,\n    active: false,\n    disabled: false,\n    focusVisible: false,\n    checkIcon: undefined,\n    selected: false,\n  });\n  if (state.media) {\n    state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      tagPickerOptionClassNames.secondaryContent,\n      secondaryContentBaseStyle,\n      state.secondaryContent.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","display","alignItems","useRootStyles","gridTemplateColumns","useSecondaryContentBaseStyle","gridColumnStart","gridRowStart","caption1","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,wBAAwB,QAAQ,2BAA2B;AACpE,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,YAAY;AACd;AAEA,MAAMC,gBAAgBX,WAAW;IAC/BO,kBAAkB;QAChBE,SAAS;QACTG,qBAAqB;IACvB;AACF;AAEA,MAAMC,+BAA+Bd,gBAAgB;IACnDe,iBAAiB;IACjBC,cAAc;IACd,GAAGZ,iBAAiBa,QAAQ;AAC9B;AAEA,MAAMC,oBAAoBlB,gBAAgB;IACxCgB,cAAc;AAChB;AAEA;;CAEC,GACD,OAAO,MAAMG,oCAAoC,CAACC;IAChD;IAEA,MAAMC,gBAAgBZ;IACtB,MAAMa,aAAaV;IACnB,MAAMW,4BAA4BT;IAClC,MAAMU,iBAAiBN;IAEvBE,MAAMd,IAAI,CAACmB,SAAS,GAAGvB,aACrBG,0BAA0BC,IAAI,EAC9Be,eACAD,MAAMZ,gBAAgB,IAAIc,WAAWd,gBAAgB,EACrDY,MAAMd,IAAI,CAACmB,SAAS;IAEtBtB,yBAAyB;QACvB,GAAGiB,KAAK;QACRM,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,IAAIX,MAAMb,KAAK,EAAE;QACfa,MAAMb,KAAK,CAACkB,SAAS,GAAGvB,aAAaG,0BAA0BE,KAAK,EAAEiB,gBAAgBJ,MAAMb,KAAK,CAACkB,SAAS;IAC7G;IAEA,IAAIL,MAAMZ,gBAAgB,EAAE;QAC1BY,MAAMZ,gBAAgB,CAACiB,SAAS,GAAGvB,aACjCG,0BAA0BG,gBAAgB,EAC1Ce,2BACAH,MAAMZ,gBAAgB,CAACiB,SAAS;IAEpC;IAEA,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots> = {\n  root: 'fui-TagPickerOption',\n  media: 'fui-TagPickerOption__media',\n  secondaryContent: 'fui-TagPickerOption__secondaryContent',\n};\n\nconst useRootBaseStyle = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst useRootStyles = makeStyles({\n  secondaryContent: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n  },\n});\n\nconst useSecondaryContentBaseStyle = makeResetStyles({\n  gridColumnStart: 2,\n  gridRowStart: 2,\n  ...typographyStyles.caption1,\n});\n\nconst useMediaBaseStyle = makeResetStyles({\n  gridRowStart: 'span 2',\n});\n\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */\nexport const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState): TagPickerOptionState => {\n  'use no memo';\n\n  const rootBaseStyle = useRootBaseStyle();\n  const rootStyles = useRootStyles();\n  const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n  const mediaBaseStyle = useMediaBaseStyle();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerOptionClassNames.root,\n    rootBaseStyle,\n    state.secondaryContent && rootStyles.secondaryContent,\n    state.root.className,\n  );\n  useOptionStyles_unstable({\n    ...state,\n    active: false,\n    disabled: false,\n    focusVisible: false,\n    checkIcon: undefined,\n    selected: false,\n  });\n  if (state.media) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n  }\n\n  if (state.secondaryContent) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryContent.className = mergeClasses(\n      tagPickerOptionClassNames.secondaryContent,\n      secondaryContentBaseStyle,\n      state.secondaryContent.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","display","alignItems","useRootStyles","gridTemplateColumns","useSecondaryContentBaseStyle","gridColumnStart","gridRowStart","caption1","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,wBAAwB,QAAQ,2BAA2B;AACpE,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,YAAY;AACd;AAEA,MAAMC,gBAAgBX,WAAW;IAC/BO,kBAAkB;QAChBE,SAAS;QACTG,qBAAqB;IACvB;AACF;AAEA,MAAMC,+BAA+Bd,gBAAgB;IACnDe,iBAAiB;IACjBC,cAAc;IACd,GAAGZ,iBAAiBa,QAAQ;AAC9B;AAEA,MAAMC,oBAAoBlB,gBAAgB;IACxCgB,cAAc;AAChB;AAEA;;CAEC,GACD,OAAO,MAAMG,oCAAoC,CAACC;IAChD;IAEA,MAAMC,gBAAgBZ;IACtB,MAAMa,aAAaV;IACnB,MAAMW,4BAA4BT;IAClC,MAAMU,iBAAiBN;IAEvB,oDAAoD;IACpDE,MAAMd,IAAI,CAACmB,SAAS,GAAGvB,aACrBG,0BAA0BC,IAAI,EAC9Be,eACAD,MAAMZ,gBAAgB,IAAIc,WAAWd,gBAAgB,EACrDY,MAAMd,IAAI,CAACmB,SAAS;IAEtBtB,yBAAyB;QACvB,GAAGiB,KAAK;QACRM,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,IAAIX,MAAMb,KAAK,EAAE;QACf,oDAAoD;QACpDa,MAAMb,KAAK,CAACkB,SAAS,GAAGvB,aAAaG,0BAA0BE,KAAK,EAAEiB,gBAAgBJ,MAAMb,KAAK,CAACkB,SAAS;IAC7G;IAEA,IAAIL,MAAMZ,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDY,MAAMZ,gBAAgB,CAACiB,SAAS,GAAGvB,aACjCG,0BAA0BG,gBAAgB,EAC1Ce,2BACAH,MAAMZ,gBAAgB,CAACiB,SAAS;IAEpC;IAEA,OAAOL;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerOptionGroup/TagPickerOptionGroup.types.ts"],"sourcesContent":["import { OptionGroupProps, OptionGroupSlots, OptionGroupState } from '@fluentui/react-combobox';\n\nexport type TagPickerOptionGroupSlots = OptionGroupSlots;\n\n/**\n * TagPickerOptionGroup Props\n */\nexport type TagPickerOptionGroupProps = OptionGroupProps;\n\n/**\n * State used in rendering TagPickerOptionGroup\n */\nexport type TagPickerOptionGroupState = OptionGroupState;\n"],"names":[],"mappings":"AASA;;CAEC,GACD,WAAyD"}
+{"version":3,"sources":["../src/components/TagPickerOptionGroup/TagPickerOptionGroup.types.ts"],"sourcesContent":["import type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from '@fluentui/react-combobox';\n\nexport type TagPickerOptionGroupSlots = OptionGroupSlots;\n\n/**\n * TagPickerOptionGroup Props\n */\nexport type TagPickerOptionGroupProps = OptionGroupProps;\n\n/**\n * State used in rendering TagPickerOptionGroup\n */\nexport type TagPickerOptionGroupState = OptionGroupState;\n"],"names":[],"mappings":"AASA;;CAEC,GACD,WAAyD"}

package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroup.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { useOptionGroup_unstable } from '@fluentui/react-combobox';
 /**
  * Create the state required to render TagPickerOptionGroup.

package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TagPickerOptionGroupProps, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroup_unstable } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render TagPickerOptionGroup.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionGroupStyles_unstable,\n * before being passed to renderTagPickerOptionGroup_unstable.\n *\n * @param props - props from this instance of TagPickerOptionGroup\n * @param ref - reference to root HTMLDivElement of TagPickerOptionGroup\n */\nexport const useTagPickerOptionGroup: (\n  props: TagPickerOptionGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n) => TagPickerOptionGroupState = useOptionGroup_unstable;\n"],"names":["React","useOptionGroup_unstable","useTagPickerOptionGroup"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,2BAA2B;AAEnE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAGoBD,wBAAwB"}
+{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroup.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { TagPickerOptionGroupProps, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroup_unstable } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render TagPickerOptionGroup.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionGroupStyles_unstable,\n * before being passed to renderTagPickerOptionGroup_unstable.\n *\n * @param props - props from this instance of TagPickerOptionGroup\n * @param ref - reference to root HTMLDivElement of TagPickerOptionGroup\n */\nexport const useTagPickerOptionGroup: (\n  props: TagPickerOptionGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n) => TagPickerOptionGroupState = useOptionGroup_unstable;\n"],"names":["useOptionGroup_unstable","useTagPickerOptionGroup"],"mappings":"AAAA;AAIA,SAASA,uBAAuB,QAAQ,2BAA2B;AAEnE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAGoBD,wBAAwB"}

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

@@ -13,8 +13,10 @@ export const useTagPickerOptionGroupStyles = state => {
   'use no memo';
 
   useOptionGroupStyles_unstable(state);
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);
   if (state.label) {
+    // eslint-disable-next-line react-hooks/immutability
     state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);
   }
   return state;

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":["'use client';\nimport { 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,YAAY;;AACZ,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":[]}
+{"version":3,"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"sources":["useTagPickerOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,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;EACpC;EACAA,KAAK,CAACH,IAAI,CAACI,SAAS,GAAGP,YAAY,CAACE,8BAA8B,CAACC,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACI,SAAS,CAAC;EAC9F,IAAID,KAAK,CAACF,KAAK,EAAE;IACb;IACAE,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/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js

@@ -10,8 +10,10 @@ export const tagPickerOptionGroupClassNames = {
  */ export const useTagPickerOptionGroupStyles = (state)=>{
     'use no memo';
     useOptionGroupStyles_unstable(state);
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);
     }
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionGroupSlots, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\n\nexport const tagPickerOptionGroupClassNames: SlotClassNames<TagPickerOptionGroupSlots> = {\n  root: 'fui-TagPickerOptionGroup',\n  label: 'fui-TagPickerOptionGroup__label',\n};\n\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */\nexport const useTagPickerOptionGroupStyles = (state: TagPickerOptionGroupState): TagPickerOptionGroupState => {\n  'use no memo';\n\n  useOptionGroupStyles_unstable(state);\n  state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n\n  if (state.label) {\n    state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n  }\n\n  return state;\n};\n"],"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,6BAA6B,QAAQ,2BAA2B;AAEzE,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEAL,8BAA8BK;IAC9BA,MAAMH,IAAI,CAACI,SAAS,GAAGP,aAAaE,+BAA+BC,IAAI,EAAEG,MAAMH,IAAI,CAACI,SAAS;IAE7F,IAAID,MAAMF,KAAK,EAAE;QACfE,MAAMF,KAAK,CAACG,SAAS,GAAGP,aAAaE,+BAA+BE,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAClG;IAEA,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionGroupSlots, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\n\nexport const tagPickerOptionGroupClassNames: SlotClassNames<TagPickerOptionGroupSlots> = {\n  root: 'fui-TagPickerOptionGroup',\n  label: 'fui-TagPickerOptionGroup__label',\n};\n\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */\nexport const useTagPickerOptionGroupStyles = (state: TagPickerOptionGroupState): TagPickerOptionGroupState => {\n  'use no memo';\n\n  useOptionGroupStyles_unstable(state);\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n  }\n\n  return state;\n};\n"],"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,6BAA6B,QAAQ,2BAA2B;AAEzE,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEAL,8BAA8BK;IAC9B,oDAAoD;IACpDA,MAAMH,IAAI,CAACI,SAAS,GAAGP,aAAaE,+BAA+BC,IAAI,EAAEG,MAAMH,IAAI,CAACI,SAAS;IAE7F,IAAID,MAAMF,KAAK,EAAE;QACf,oDAAoD;QACpDE,MAAMF,KAAK,CAACG,SAAS,GAAGP,aAAaE,+BAA+BE,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAClG;IAEA,OAAOD;AACT,EAAE"}

package/lib/contexts/TagPickerContext.js.map

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