@fluentui/react-tag-picker 9.8.8 → 9.9.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton.types';\n\nexport const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots> = {\n  root: 'fui-TagPickerButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  button: {\n    alignItems: 'center',\n    minHeight: '32px',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    fontFamily: tokens.fontFamilyBase,\n    textAlign: 'left',\n    flexGrow: 1,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  medium: {\n    ...typographyStyles.caption1,\n    padding: `3px ${\n      tokens.spacingHorizontalSNudge\n    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    ...typographyStyles.body1,\n    padding: `5px ${\n      tokens.spacingHorizontalMNudge\n    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  'extra-large': {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    padding: `7px ${\n      tokens.spacingHorizontalM\n    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n\n  hidden: {\n    display: 'none',\n  },\n  visuallyHidden: {\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the PickerButton slots based on the state\n */\nexport const useTagPickerButtonStyles_unstable = (state: TagPickerButtonState): TagPickerButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerButtonClassNames.root,\n    styles.button,\n    styles[state.size],\n    state.hasSelectedOption && styles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","alignItems","minHeight","backgroundColor","colorTransparentBackground","border","boxSizing","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","textAlign","flexGrow","outlineStyle","placeholder","colorNeutralForeground4","medium","caption1","padding","spacingHorizontalSNudge","large","body1","spacingHorizontalMNudge","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","borderRadius","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","display","visuallyHidden","clip","height","margin","overflow","width","position","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton.types';\n\nexport const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots> = {\n  root: 'fui-TagPickerButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  button: {\n    alignItems: 'center',\n    minHeight: '32px',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    fontFamily: tokens.fontFamilyBase,\n    textAlign: 'left',\n    flexGrow: 1,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  medium: {\n    ...typographyStyles.caption1,\n    padding: `3px ${\n      tokens.spacingHorizontalSNudge\n    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    ...typographyStyles.body1,\n    padding: `5px ${\n      tokens.spacingHorizontalMNudge\n    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  'extra-large': {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    padding: `7px ${\n      tokens.spacingHorizontalM\n    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n\n  hidden: {\n    display: 'none',\n  },\n  visuallyHidden: {\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the PickerButton slots based on the state\n */\nexport const useTagPickerButtonStyles_unstable = (state: TagPickerButtonState): TagPickerButtonState => {\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerButtonClassNames.root,\n    styles.button,\n    styles[state.size],\n    state.hasSelectedOption && styles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","alignItems","minHeight","backgroundColor","colorTransparentBackground","border","boxSizing","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","textAlign","flexGrow","outlineStyle","placeholder","colorNeutralForeground4","medium","caption1","padding","spacingHorizontalSNudge","large","body1","spacingHorizontalMNudge","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","borderRadius","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","display","visuallyHidden","clip","height","margin","overflow","width","position","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"mappings":"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"}

package/lib/components/TagPickerControl/TagPickerControl.types.js

@@ -1,3 +1,3 @@
 /**
- * State used in rendering PickerControl
+ * TagPickerControl Base State - omits design-only state derived from picker context.
  */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerControl/TagPickerControl.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\nimport type { ComboboxSlots } from '@fluentui/react-combobox';\nimport type * as React from 'react';\n\nexport type TagPickerControlSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TagPickerControlCSSProperties }>>;\n  /**\n   * A secondary action should be a button-like element to be rendered right after\n   * the trigger responsible for opening/closing the tag picker popover.\n   */\n  secondaryAction: Slot<'span'>;\n} & Pick<ComboboxSlots, 'expandIcon'>;\n\nexport type TagPickerControlInternalSlots = {\n  aside?: NonNullable<Slot<'span'>>;\n};\n\nexport type TagPickerControlCSSProperties = React.CSSProperties & {\n  '--fui-TagPickerControl-aside-width'?: string | number;\n};\n\n/**\n * PickerControl Props\n */\nexport type TagPickerControlProps = ComponentProps<Partial<TagPickerControlSlots>>;\n\n/**\n * State used in rendering PickerControl\n */\nexport type TagPickerControlState = ComponentState<TagPickerControlSlots & TagPickerControlInternalSlots> &\n  Pick<TagPickerContextValue, 'size' | 'appearance' | 'disabled'> & {\n    invalid: boolean;\n  };\n"],"names":[],"mappings":"AA2BA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["../src/components/TagPickerControl/TagPickerControl.types.ts"],"sourcesContent":["import type {\n  ComponentProps,\n  ComponentState,\n  DistributiveOmit,\n  ExtractSlotProps,\n  Slot,\n} from '@fluentui/react-utilities';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\nimport type { ComboboxSlots } from '@fluentui/react-combobox';\nimport type * as React from 'react';\n\nexport type TagPickerControlSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TagPickerControlCSSProperties }>>;\n  /**\n   * A secondary action should be a button-like element to be rendered right after\n   * the trigger responsible for opening/closing the tag picker popover.\n   */\n  secondaryAction: Slot<'span'>;\n} & Pick<ComboboxSlots, 'expandIcon'>;\n\nexport type TagPickerControlInternalSlots = {\n  aside?: NonNullable<Slot<'span'>>;\n};\n\nexport type TagPickerControlCSSProperties = React.CSSProperties & {\n  '--fui-TagPickerControl-aside-width'?: string | number;\n};\n\n/**\n * PickerControl Props\n */\nexport type TagPickerControlProps = ComponentProps<Partial<TagPickerControlSlots>>;\n\n/**\n * State used in rendering PickerControl\n */\nexport type TagPickerControlState = ComponentState<TagPickerControlSlots & TagPickerControlInternalSlots> &\n  Pick<TagPickerContextValue, 'size' | 'appearance' | 'disabled'> & {\n    invalid: boolean;\n  };\n\n/**\n * TagPickerControl Base State - omits design-only state derived from picker context.\n */\nexport type TagPickerControlBaseState = DistributiveOmit<TagPickerControlState, 'size' | 'appearance'>;\n"],"names":[],"mappings":"AAyCA;;CAEC,GACD,WAAuG"}

package/lib/components/TagPickerControl/index.js

@@ -1,4 +1,4 @@
 export { TagPickerControl } from './TagPickerControl';
 export { renderTagPickerControl_unstable } from './renderTagPickerControl';
-export { useTagPickerControl_unstable } from './useTagPickerControl';
+export { useTagPickerControl_unstable, useTagPickerControlBase_unstable } from './useTagPickerControl';
 export { iconSizes, tagPickerControlAsideWidthToken, tagPickerControlClassNames, useTagPickerControlStyles_unstable } from './useTagPickerControlStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerControl/index.ts"],"sourcesContent":["export { TagPickerControl } from './TagPickerControl';\nexport type {\n  TagPickerControlCSSProperties,\n  TagPickerControlInternalSlots,\n  TagPickerControlProps,\n  TagPickerControlSlots,\n  TagPickerControlState,\n} from './TagPickerControl.types';\nexport { renderTagPickerControl_unstable } from './renderTagPickerControl';\nexport { useTagPickerControl_unstable } from './useTagPickerControl';\nexport {\n  iconSizes,\n  tagPickerControlAsideWidthToken,\n  tagPickerControlClassNames,\n  useTagPickerControlStyles_unstable,\n} from './useTagPickerControlStyles.styles';\n"],"names":["TagPickerControl","renderTagPickerControl_unstable","useTagPickerControl_unstable","iconSizes","tagPickerControlAsideWidthToken","tagPickerControlClassNames","useTagPickerControlStyles_unstable"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB;AAQtD,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SACEC,SAAS,EACTC,+BAA+B,EAC/BC,0BAA0B,EAC1BC,kCAAkC,QAC7B,qCAAqC"}
+{"version":3,"sources":["../src/components/TagPickerControl/index.ts"],"sourcesContent":["export { TagPickerControl } from './TagPickerControl';\nexport type {\n  TagPickerControlBaseState,\n  TagPickerControlCSSProperties,\n  TagPickerControlInternalSlots,\n  TagPickerControlProps,\n  TagPickerControlSlots,\n  TagPickerControlState,\n} from './TagPickerControl.types';\nexport { renderTagPickerControl_unstable } from './renderTagPickerControl';\nexport { useTagPickerControl_unstable, useTagPickerControlBase_unstable } from './useTagPickerControl';\nexport {\n  iconSizes,\n  tagPickerControlAsideWidthToken,\n  tagPickerControlClassNames,\n  useTagPickerControlStyles_unstable,\n} from './useTagPickerControlStyles.styles';\n"],"names":["TagPickerControl","renderTagPickerControl_unstable","useTagPickerControl_unstable","useTagPickerControlBase_unstable","iconSizes","tagPickerControlAsideWidthToken","tagPickerControlClassNames","useTagPickerControlStyles_unstable"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB;AAStD,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,4BAA4B,EAAEC,gCAAgC,QAAQ,wBAAwB;AACvG,SACEC,SAAS,EACTC,+BAA+B,EAC/BC,0BAA0B,EAC1BC,kCAAkC,QAC7B,qCAAqC"}

package/lib/components/TagPickerControl/useTagPickerControl.js

@@ -9,14 +9,11 @@ import { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.sty
 import { useFieldContext_unstable } from '@fluentui/react-field';
 import { useExpandLabel } from '../../utils/useExpandLabel';
 /**
- * Create the state required to render PickerControl.
- *
- * The returned state can be modified with hooks such as usePickerControlStyles_unstable,
- * before being passed to renderPickerControl_unstable.
+ * Create the base state required to render TagPickerControl, without design-only state.
  *
- * @param props - props from this instance of PickerControl
- * @param ref - reference to root HTMLDivElement of PickerControl
- */ export const useTagPickerControl_unstable = (props, ref)=>{
+ * @param props - props from this instance of TagPickerControl
+ * @param ref - reference to root HTMLDivElement of TagPickerControl
+ */ export const useTagPickerControlBase_unstable = (props, ref)=>{
     var _useFieldContext_unstable;
     const targetRef = useTagPickerContext_unstable((ctx)=>ctx.targetRef);
     const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);
@@ -25,8 +22,6 @@ import { useExpandLabel } from '../../utils/useExpandLabel';
     const popoverId = useTagPickerContext_unstable((ctx)=>ctx.popoverId);
     const setOpen = useTagPickerContext_unstable((ctx)=>ctx.setOpen);
     const secondaryInnerActionRef = useTagPickerContext_unstable((ctx)=>ctx.secondaryActionRef);
-    const size = useTagPickerContext_unstable((ctx)=>ctx.size);
-    const appearance = useTagPickerContext_unstable((ctx)=>ctx.appearance);
     const disabled = useTagPickerContext_unstable((ctx)=>ctx.disabled);
     const invalid = ((_useFieldContext_unstable = useFieldContext_unstable()) === null || _useFieldContext_unstable === void 0 ? void 0 : _useFieldContext_unstable.validationState) === 'error';
     const noPopover = useTagPickerContext_unstable((ctx)=>{
@@ -109,8 +104,6 @@ import { useExpandLabel } from '../../utils/useExpandLabel';
         aside,
         expandIcon,
         secondaryAction,
-        size,
-        appearance,
         disabled,
         invalid
     };
@@ -131,3 +124,21 @@ import { useExpandLabel } from '../../utils/useExpandLabel';
     ]);
     return state;
 };
+/**
+ * Create the state required to render PickerControl.
+ *
+ * The returned state can be modified with hooks such as usePickerControlStyles_unstable,
+ * before being passed to renderPickerControl_unstable.
+ *
+ * @param props - props from this instance of PickerControl
+ * @param ref - reference to root HTMLDivElement of PickerControl
+ */ export const useTagPickerControl_unstable = (props, ref)=>{
+    const baseState = useTagPickerControlBase_unstable(props, ref);
+    const size = useTagPickerContext_unstable((ctx)=>ctx.size);
+    const appearance = useTagPickerContext_unstable((ctx)=>ctx.appearance);
+    return {
+        ...baseState,
+        size,
+        appearance
+    };
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport {\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n  const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const invalid = useFieldContext_unstable()?.validationState === 'error';\n  const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n  const { targetDocument } = useFluent_unstable();\n  const tagPickerId = useId('tagPicker-');\n  const rafIdRef = React.useRef<number | null>(null);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLSpanElement>(null);\n  const asideRef = React.useRef<HTMLSpanElement>(null);\n\n  const secondaryAction = slot.optional(props.secondaryAction, {\n    elementType: 'span',\n  });\n  const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n  if (secondaryAction) {\n    secondaryAction.ref = secondaryActionRef;\n  }\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: !noPopover,\n    defaultProps: {\n      'aria-expanded': open,\n      'aria-disabled': disabled ? 'true' : undefined,\n      children: <ChevronDownRegular />,\n      role: 'button',\n    },\n    elementType: 'span',\n  });\n\n  const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconMergeRef;\n  }\n\n  const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n    const targetWindow = targetDocument?.defaultView;\n\n    if (targetWindow) {\n      rafIdRef.current = targetWindow.requestAnimationFrame(() => {\n        innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n      });\n    }\n  });\n  const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n    elementType: 'span',\n    renderByDefault: Boolean(secondaryAction || expandIcon),\n    defaultProps: {\n      ref: observerRef,\n    },\n  });\n  const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n  if (aside) {\n    aside.ref = mergedAsideRefs;\n  }\n\n  const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (\n      elementContains(expandIconRef.current, event.target as Node) ||\n      event.target === innerRef.current ||\n      event.target === tagPickerGroupRef.current ||\n      event.target === asideRef.current\n    ) {\n      event.preventDefault();\n      setOpen(event, !open);\n      triggerRef.current?.focus();\n    }\n  });\n\n  const state: TagPickerControlState = {\n    components: {\n      root: 'div',\n      expandIcon: 'span',\n      secondaryAction: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, targetRef, innerRef),\n        'aria-owns': open && !noPopover ? popoverId : undefined,\n        ...props,\n        onMouseDown: handleMouseDown,\n      }),\n      { elementType: 'div' },\n    ),\n    aside,\n    expandIcon,\n    secondaryAction,\n    size,\n    appearance,\n    disabled,\n    invalid,\n  };\n\n  const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n  const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n  if (state.expandIcon) {\n    state.expandIcon.ref = expandIconLabelMergeRef;\n  }\n\n  React.useEffect(() => {\n    if (rafIdRef.current && targetDocument?.defaultView) {\n      targetDocument.defaultView.cancelAnimationFrame(rafIdRef.current);\n    }\n  }, [targetDocument]);\n\n  return state;\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useFluent_unstable","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useExpandLabel","useTagPickerControl_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","targetDocument","tagPickerId","rafIdRef","useRef","innerRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","undefined","children","role","expandIconMergeRef","observerRef","entry","targetWindow","defaultView","current","requestAnimationFrame","style","setProperty","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","state","components","root","always","onMouseDown","expandIconLabelRef","expandIconLabelMergeRef","useEffect","cancelAnimationFrame"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport {\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { TagPickerControlBaseState, TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the base state required to render TagPickerControl, without design-only state.\n *\n * @param props - props from this instance of TagPickerControl\n * @param ref - reference to root HTMLDivElement of TagPickerControl\n */\nexport const useTagPickerControlBase_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlBaseState => {\n  const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const invalid = useFieldContext_unstable()?.validationState === 'error';\n  const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n  const { targetDocument } = useFluent_unstable();\n  const tagPickerId = useId('tagPicker-');\n  const rafIdRef = React.useRef<number | null>(null);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLSpanElement>(null);\n  const asideRef = React.useRef<HTMLSpanElement>(null);\n\n  const secondaryAction = slot.optional(props.secondaryAction, {\n    elementType: 'span',\n  });\n  const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n  if (secondaryAction) {\n    secondaryAction.ref = secondaryActionRef;\n  }\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: !noPopover,\n    defaultProps: {\n      'aria-expanded': open,\n      'aria-disabled': disabled ? 'true' : undefined,\n      children: <ChevronDownRegular />,\n      role: 'button',\n    },\n    elementType: 'span',\n  });\n\n  const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconMergeRef;\n  }\n\n  const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n    const targetWindow = targetDocument?.defaultView;\n\n    if (targetWindow) {\n      rafIdRef.current = targetWindow.requestAnimationFrame(() => {\n        innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n      });\n    }\n  });\n  const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n    elementType: 'span',\n    renderByDefault: Boolean(secondaryAction || expandIcon),\n    defaultProps: {\n      ref: observerRef,\n    },\n  });\n  const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n  if (aside) {\n    aside.ref = mergedAsideRefs;\n  }\n\n  const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (\n      elementContains(expandIconRef.current, event.target as Node) ||\n      event.target === innerRef.current ||\n      event.target === tagPickerGroupRef.current ||\n      event.target === asideRef.current\n    ) {\n      event.preventDefault();\n      setOpen(event, !open);\n      triggerRef.current?.focus();\n    }\n  });\n\n  const state: TagPickerControlBaseState = {\n    components: {\n      root: 'div',\n      expandIcon: 'span',\n      secondaryAction: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, targetRef, innerRef),\n        'aria-owns': open && !noPopover ? popoverId : undefined,\n        ...props,\n        onMouseDown: handleMouseDown,\n      }),\n      { elementType: 'div' },\n    ),\n    aside,\n    expandIcon,\n    secondaryAction,\n    disabled,\n    invalid,\n  };\n\n  const expandIconLabelRef = useExpandLabel({\n    tagPickerId,\n    state: state as Pick<TagPickerControlBaseState, 'expandIcon'>,\n  });\n\n  const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n  if (state.expandIcon) {\n    state.expandIcon.ref = expandIconLabelMergeRef;\n  }\n\n  React.useEffect(() => {\n    if (rafIdRef.current && targetDocument?.defaultView) {\n      targetDocument.defaultView.cancelAnimationFrame(rafIdRef.current);\n    }\n  }, [targetDocument]);\n\n  return state;\n};\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n  const baseState = useTagPickerControlBase_unstable(props, ref);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useFluent_unstable","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useExpandLabel","useTagPickerControlBase_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","disabled","invalid","validationState","noPopover","targetDocument","tagPickerId","rafIdRef","useRef","innerRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","undefined","children","role","expandIconMergeRef","observerRef","entry","targetWindow","defaultView","current","requestAnimationFrame","style","setProperty","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","state","components","root","always","onMouseDown","expandIconLabelRef","expandIconLabelMergeRef","useEffect","cancelAnimationFrame","useTagPickerControl_unstable","baseState","size","appearance"],"mappings":"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"}

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

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

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

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

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

@@ -205,7 +205,6 @@ const useSecondaryActionStyles = makeStyles({
 /**
  * Apply styling to the PickerControl slots based on the state
  */ export const useTagPickerControlStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const iconStyles = useIconStyles();
     const asideStyles = useAsideStyles();

package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.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  // 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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"}
+{"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  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/useTagPickerGroupStyles.styles.js

@@ -65,8 +65,6 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the TagPickerGroup slots based on the state
  */
 export const useTagPickerGroupStyles_unstable = state => {
-  'use no memo';
-
   useTagGroupStyles_unstable(state);
   const styles = useStyles();
   // eslint-disable-next-line react-hooks/immutability

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    // 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":[]}
+{"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    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;EACzDtB,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

@@ -31,7 +31,6 @@ export const tagPickerGroupClassNames = {
 /**
  * Apply styling to the TagPickerGroup slots based on the state
  */ export const useTagPickerGroupStyles_unstable = (state)=>{
-    'use no memo';
     useTagGroupStyles_unstable(state);
     const styles = useStyles();
     // eslint-disable-next-line react-hooks/immutability

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  // 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"}
+{"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  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/ClB,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

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

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 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"}
+{"version":3,"sources":["../src/components/TagPickerInput/TagPickerInput.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, 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\n/**\n * TagPickerInput Base Props - omits design-only props\n */\nexport type TagPickerInputBaseProps = DistributiveOmit<TagPickerInputProps, 'appearance'>;\n\n/**\n * TagPickerInput Base State - omits design-only state\n */\nexport type TagPickerInputBaseState = DistributiveOmit<TagPickerInputState, 'size'>;\n"],"names":[],"mappings":"AA+BA;;CAEC,GACD,WAAoF"}

package/lib/components/TagPickerInput/index.js

@@ -1,4 +1,4 @@
 export { TagPickerInput } from './TagPickerInput';
 export { renderTagPickerInput_unstable } from './renderTagPickerInput';
-export { useTagPickerInput_unstable } from './useTagPickerInput';
+export { useTagPickerInput_unstable, useTagPickerInputBase_unstable } from './useTagPickerInput';
 export { tagPickerInputClassNames, useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/index.ts"],"sourcesContent":["export { TagPickerInput } from './TagPickerInput';\nexport type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nexport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nexport { useTagPickerInput_unstable } from './useTagPickerInput';\nexport { tagPickerInputClassNames, useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\n"],"names":["TagPickerInput","renderTagPickerInput_unstable","useTagPickerInput_unstable","tagPickerInputClassNames","useTagPickerInputStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
+{"version":3,"sources":["../src/components/TagPickerInput/index.ts"],"sourcesContent":["export { TagPickerInput } from './TagPickerInput';\nexport type {\n  TagPickerInputBaseProps,\n  TagPickerInputBaseState,\n  TagPickerInputProps,\n  TagPickerInputSlots,\n  TagPickerInputState,\n} from './TagPickerInput.types';\nexport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nexport { useTagPickerInput_unstable, useTagPickerInputBase_unstable } from './useTagPickerInput';\nexport { tagPickerInputClassNames, useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\n"],"names":["TagPickerInput","renderTagPickerInput_unstable","useTagPickerInput_unstable","useTagPickerInputBase_unstable","tagPickerInputClassNames","useTagPickerInputStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,sBAAsB;AACjG,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}

package/lib/components/TagPickerInput/useTagPickerInput.js

@@ -10,23 +10,20 @@ import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { tagPickerInputCSSRules } from '../../utils/tokens';
 import { useFocusFinders } from '@fluentui/react-tabster';
 /**
- * Create the state required to render TagPickerInput.
- *
- * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,
- * before being passed to renderTagPickerInput_unstable.
+ * Create the base state required to render TagPickerInput, without design-only props.
+ * The Base hook omits Tabster-driven focus management; consumers can re-add it via the
+ * styled wrapper {@link useTagPickerInput_unstable} or by composing their own keydown handler.
  *
- * @param props - props from this instance of TagPickerInput
- * @param ref - reference to root HTMLDivElement of TagPickerInput
- */ export const useTagPickerInput_unstable = (propsArg, ref)=>{
-    const props = useFieldControlProps_unstable(propsArg, {
+ * @param props - props from this instance of TagPickerInput (without appearance)
+ * @param ref - reference to root HTMLInputElement of TagPickerInput
+ */ export const useTagPickerInputBase_unstable = (props, ref)=>{
+    const fieldProps = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
         supportsRequired: true,
         supportsSize: true
     });
     const { controller: activeDescendantController } = useActiveDescendantContext();
-    const size = useTagPickerContext_unstable((ctx)=>ctx.size);
     const contextDisabled = useTagPickerContext_unstable((ctx)=>ctx.disabled);
-    const tagPickerGroupRef = useTagPickerContext_unstable((ctx)=>ctx.tagPickerGroupRef);
     const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);
     const selectedOptions = useTagPickerContext_unstable((ctx)=>ctx.selectedOptions);
     const setValue = useTagPickerContext_unstable((ctx)=>ctx.setValue);
@@ -59,22 +56,18 @@ import { useFocusFinders } from '@fluentui/react-tabster';
     }, [
         triggerRef
     ]);
-    const { value = contextValue, disabled = contextDisabled } = props;
-    const { findLastFocusable } = useFocusFinders();
+    const { value = contextValue, disabled = contextDisabled } = fieldProps;
     const isTypingRef = React.useRef(false);
     const root = useInputTriggerSlot({
         type: 'text',
         value: value !== null && value !== void 0 ? value : '',
         'aria-controls': open ? popoverId : undefined,
         disabled,
-        ...getIntrinsicElementProps('input', props),
+        ...getIntrinsicElementProps('input', fieldProps),
         onKeyDown: useEventCallback((event)=>{
-            var _props_onKeyDown;
-            (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
-            if ((event.key === ArrowLeft || event.key === Backspace) && event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0 && tagPickerGroupRef.current) {
-                var _findLastFocusable;
-                (_findLastFocusable = findLastFocusable(tagPickerGroupRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
-            } else if (event.key === Space) {
+            var _fieldProps_onKeyDown;
+            (_fieldProps_onKeyDown = fieldProps.onKeyDown) === null || _fieldProps_onKeyDown === void 0 ? void 0 : _fieldProps_onKeyDown.call(fieldProps, event);
+            if (event.key === Space) {
                 if (open && !isTypingRef.current) {
                     setOpen(event, false);
                 }
@@ -103,18 +96,45 @@ import { useFocusFinders } from '@fluentui/react-tabster';
             setOpen,
             setValue,
             multiselect: true,
-            value: props.value
+            value: fieldProps.value
         }
     });
-    const state = {
+    return {
         components: {
             root: 'input'
         },
         root,
-        disabled,
+        disabled
+    };
+};
+/**
+ * Create the state required to render TagPickerInput.
+ *
+ * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,
+ * before being passed to renderTagPickerInput_unstable.
+ *
+ * @param props - props from this instance of TagPickerInput
+ * @param ref - reference to root HTMLInputElement of TagPickerInput
+ */ export const useTagPickerInput_unstable = (props, ref)=>{
+    const tagPickerGroupRef = useTagPickerContext_unstable((ctx)=>ctx.tagPickerGroupRef);
+    const { findLastFocusable } = useFocusFinders();
+    const onKeyDown = useEventCallback((event)=>{
+        var _props_onKeyDown;
+        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+        if ((event.key === ArrowLeft || event.key === Backspace) && event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0 && tagPickerGroupRef.current) {
+            var _findLastFocusable;
+            (_findLastFocusable = findLastFocusable(tagPickerGroupRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+        }
+    });
+    const baseState = useTagPickerInputBase_unstable({
+        ...props,
+        onKeyDown
+    }, ref);
+    const size = useTagPickerContext_unstable((ctx)=>ctx.size);
+    return {
+        ...baseState,
         size
     };
-    return state;
 };
 /**
  * while typing the user might need a bit more of space to see the text,