@fluentui/react-tags 9.1.2 → 9.2.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Fri, 15 Mar 2024 21:37:57 GMT and should not be manually modified.
+This log was last generated on Mon, 25 Mar 2024 11:09:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.2.0)
+
+Mon, 25 Mar 2024 11:09:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.1.3..@fluentui/react-tags_v9.2.0)
+
+### Minor changes
+
+- feat: adds appearance and dismissible to TagGroupContext ([PR #30800](https://github.com/microsoft/fluentui/pull/30800) by bernardo.sunderhus@gmail.com)
+
+## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.1.3)
+
+Mon, 18 Mar 2024 19:50:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.1.2..@fluentui/react-tags_v9.1.3)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.10.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-avatar to v9.6.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-tabster to v9.19.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-theme to v9.1.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+
 ## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.1.2)
 
-Fri, 15 Mar 2024 21:37:57 GMT 
+Fri, 15 Mar 2024 21:43:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.1.1..@fluentui/react-tags_v9.1.2)
 
 ### Patches

package/dist/index.d.ts

@@ -214,7 +214,7 @@ export declare const tagGroupClassNames: SlotClassNames<TagGroupSlots>;
 /**
  * Context shared between TagGroup and its children components
  */
-declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>>;
+declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'appearance' | 'dismissible'>>;
 
 export declare type TagGroupContextValues = {
     tagGroup: TagGroupContextValue;
@@ -229,6 +229,8 @@ export declare type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlo
      */
     onDismiss?: TagDismissHandler<Value>;
     size?: TagSize;
+    appearance?: TagAppearance;
+    dismissible?: boolean;
 };
 
 export declare type TagGroupSlots = {
@@ -238,7 +240,7 @@ export declare type TagGroupSlots = {
 /**
  * State used in rendering TagGroup
  */
-export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size'>> & {
+export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {
     handleTagDismiss: TagDismissHandler<Value>;
 };
 

package/lib/components/InteractionTag/InteractionTag.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering InteractionTag
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["InteractionTag.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport { TagAppearance, TagShape, TagSize, TagValue, TagDismissHandler } from '../../utils/types';\n\nexport type InteractionTagContextValues = {\n  interactionTag: InteractionTagContextValue;\n};\n\nexport type InteractionTagSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * InteractionTag Props\n */\nexport type InteractionTagProps<Value = TagValue> = ComponentProps<Partial<InteractionTagSlots>> & {\n  /**\n   * An InteractionTag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * An InteractionTag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * An InteractionTag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * An InteractionTag has three sizes.\n   *\n   * @default 'medium'\n   */\n  size?: TagSize;\n\n  /**\n   * Unique value identifying the tag within a TagGroup\n   */\n  value?: Value;\n};\n\n/**\n * State used in rendering InteractionTag\n */\nexport type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> &\n  Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'shape' | 'size' | 'value'>> & {\n    /**\n     * Event handler from TagGroup context that allows TagGroup to dismiss the tag\n     */\n    handleTagDismiss: TagDismissHandler<Value>;\n\n    /**\n     * id to assign to InteractionTagPrimary\n     */\n    interactionTagPrimaryId: string;\n  };\n"],"names":[],"mappings":"AAkDA;;CAEC,GACD,WAWI"}
+{"version":3,"sources":["InteractionTag.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport { TagAppearance, TagShape, TagSize, TagValue, TagDismissHandler } from '../../utils/types';\n\nexport type InteractionTagContextValues = {\n  interactionTag: InteractionTagContextValue;\n};\n\nexport type InteractionTagSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * InteractionTag Props\n */\nexport type InteractionTagProps<Value = TagValue> = ComponentProps<Partial<InteractionTagSlots>> & {\n  /**\n   * An InteractionTag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * An InteractionTag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * An InteractionTag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * An InteractionTag has three sizes.\n   *\n   * @default 'medium'\n   */\n  size?: TagSize;\n\n  /**\n   * Unique value identifying the tag within a TagGroup\n   */\n  value?: Value;\n};\n\n/**\n * State used in rendering InteractionTag\n */\nexport type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> &\n  Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'shape' | 'size' | 'value'>> & {\n    /**\n     * Event handler from TagGroup context that allows TagGroup to dismiss the tag\n     */\n    handleTagDismiss: TagDismissHandler<Value>;\n\n    /**\n     * id to assign to InteractionTagPrimary\n     */\n    interactionTagPrimaryId: string;\n  };\n"],"names":[],"mappings":"AAAA,WAgEI"}

package/lib/components/InteractionTag/useInteractionTag.js

@@ -10,10 +10,10 @@ import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
  * @param props - props from this instance of InteractionTag
  * @param ref - reference to root HTMLDivElement of InteractionTag
  */ export const useInteractionTag_unstable = (props, ref)=>{
-    const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();
+    const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();
     const id = useId('fui-InteractionTag-', props.id);
     const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');
-    const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
+    const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
     return {
         appearance,
         disabled,

package/lib/components/InteractionTag/useInteractionTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;\n\n  return {\n    appearance,\n    disabled,\n    handleTagDismiss,\n    interactionTagPrimaryId,\n    shape,\n    size,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","id","interactionTagPrimaryId","appearance","disabled","shape","value","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAE,GAAGN;IAEhD,MAAMO,KAAKT,MAAM,uBAAuBI,MAAMK,EAAE;IAEhD,MAAMC,0BAA0BV,MAAM;IAEtC,MAAM,EAAEW,aAAa,QAAQ,EAAEC,WAAW,KAAK,EAAEC,QAAQ,SAAS,EAAEN,OAAOC,WAAW,EAAEM,QAAQL,EAAE,EAAE,GAAGL;IAEvG,OAAO;QACLO;QACAC;QACAN;QACAI;QACAG;QACAN;QACAO;QAEAC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMf,KAAKgB,MAAM,CACflB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRK;QACF,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  return {\n    appearance,\n    disabled,\n    handleTagDismiss,\n    interactionTagPrimaryId,\n    shape,\n    size,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","id","interactionTagPrimaryId","disabled","shape","value","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAEC,YAAYC,iBAAiB,EAAE,GAAGR;IAE/E,MAAMS,KAAKX,MAAM,uBAAuBI,MAAMO,EAAE;IAEhD,MAAMC,0BAA0BZ,MAAM;IAEtC,MAAM,EACJS,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CG,WAAW,KAAK,EAChBC,QAAQ,SAAS,EACjBP,OAAOC,WAAW,EAClBO,QAAQJ,EAAE,EACX,GAAGP;IAEJ,OAAO;QACLK;QACAI;QACAP;QACAM;QACAE;QACAP;QACAQ;QAEAC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMhB,KAAKiB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRO;QACF,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/InteractionTagPrimary/InteractionTagPrimary.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering InteractionTagPrimary
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["InteractionTagPrimary.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type InteractionTagPrimaryContextValues = TagAvatarContextValues;\n\nexport type InteractionTagPrimarySlots = {\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * Slot for a visual element, usually an avatar\n   */\n  media?: Slot<'span'>;\n\n  /**\n   * Slot for an icon\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Main text for the InteractionTagPrimary button. Children of the root slot are automatically rendered here\n   */\n  primaryText: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  secondaryText?: Slot<'span'>;\n};\n\n/**\n * InteractionTagPrimary Props\n */\nexport type InteractionTagPrimaryProps = ComponentProps<Partial<InteractionTagPrimarySlots>> & {\n  /**\n   * Whether the `InteractionTag` component has a `Secondary` component that provides an secondary action.\n   * If `true`, the `InteractionTagPrimary` component will adjust its styles to accommodate the `Secondary` component.\n   *\n   * @default false\n   */\n  hasSecondaryAction?: boolean;\n};\n\n/**\n * State used in rendering InteractionTagPrimary\n */\nexport type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> &\n  Required<\n    Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'> &\n      Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>\n  > &\n  UseTagAvatarContextValuesOptions;\n"],"names":[],"mappings":"AA2CA;;CAEC,GACD,WAKmC"}
+{"version":3,"sources":["InteractionTagPrimary.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type InteractionTagPrimaryContextValues = TagAvatarContextValues;\n\nexport type InteractionTagPrimarySlots = {\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * Slot for a visual element, usually an avatar\n   */\n  media?: Slot<'span'>;\n\n  /**\n   * Slot for an icon\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Main text for the InteractionTagPrimary button. Children of the root slot are automatically rendered here\n   */\n  primaryText: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  secondaryText?: Slot<'span'>;\n};\n\n/**\n * InteractionTagPrimary Props\n */\nexport type InteractionTagPrimaryProps = ComponentProps<Partial<InteractionTagPrimarySlots>> & {\n  /**\n   * Whether the `InteractionTag` component has a `Secondary` component that provides an secondary action.\n   * If `true`, the `InteractionTagPrimary` component will adjust its styles to accommodate the `Secondary` component.\n   *\n   * @default false\n   */\n  hasSecondaryAction?: boolean;\n};\n\n/**\n * State used in rendering InteractionTagPrimary\n */\nexport type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> &\n  Required<\n    Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'> &\n      Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>\n  > &\n  UseTagAvatarContextValuesOptions;\n"],"names":[],"mappings":"AAAA,WAmDmC"}

package/lib/components/InteractionTagSecondary/InteractionTagSecondary.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering InteractionTagSecondary
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["InteractionTagSecondary.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\n\nexport type InteractionTagSecondarySlots = {\n  root: NonNullable<Slot<'button'>>;\n};\n\n/**\n * InteractionTagSecondary Props\n */\nexport type InteractionTagSecondaryProps = ComponentProps<InteractionTagSecondarySlots>;\n\n/**\n * State used in rendering InteractionTagSecondary\n */\nexport type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> &\n  Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'>>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAC2F"}
+{"version":3,"sources":["InteractionTagSecondary.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\n\nexport type InteractionTagSecondarySlots = {\n  root: NonNullable<Slot<'button'>>;\n};\n\n/**\n * InteractionTagSecondary Props\n */\nexport type InteractionTagSecondaryProps = ComponentProps<InteractionTagSecondarySlots>;\n\n/**\n * State used in rendering InteractionTagSecondary\n */\nexport type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> &\n  Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'>>;\n"],"names":[],"mappings":"AAAA,WAgB2F"}

package/lib/components/Tag/Tag.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering Tag
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["Tag.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagAppearance, TagShape, TagSize } from '../../utils/types';\nimport { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type TagContextValues = TagAvatarContextValues;\n\nexport type TagSlots = {\n  root: NonNullable<Slot<'button', 'span'>>;\n\n  /**\n   * Slot for a visual element, usually an avatar\n   */\n  media?: Slot<'span'>;\n\n  /**\n   * Slot for an icon\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Main text for the Tag. Children of the root slot are automatically rendered here\n   */\n  primaryText: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  secondaryText?: Slot<'span'>;\n\n  /**\n   * Slot for the dismiss icon\n   */\n  dismissIcon?: Slot<'span'>;\n};\n\n/**\n * Tag Props\n */\nexport type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {\n  /**\n   * A Tag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * A Tag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A Tag can be dismissible\n   *\n   * @default false\n   */\n  dismissible?: boolean;\n\n  /**\n   * A Tag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * A Tag has three sizes.\n   *\n   * @default 'medium'\n   */\n  size?: TagSize;\n\n  /**\n   * Unique value identifying the tag within a TagGroup\n   */\n  value?: Value;\n};\n\n/**\n * State used in rendering Tag\n */\nexport type TagState = ComponentState<TagSlots> &\n  Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'>> &\n  UseTagAvatarContextValuesOptions;\n"],"names":[],"mappings":"AAgFA;;CAEC,GACD,WAEmC"}
+{"version":3,"sources":["Tag.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagAppearance, TagShape, TagSize } from '../../utils/types';\nimport { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type TagContextValues = TagAvatarContextValues;\n\nexport type TagSlots = {\n  root: NonNullable<Slot<'button', 'span'>>;\n\n  /**\n   * Slot for a visual element, usually an avatar\n   */\n  media?: Slot<'span'>;\n\n  /**\n   * Slot for an icon\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Main text for the Tag. Children of the root slot are automatically rendered here\n   */\n  primaryText: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  secondaryText?: Slot<'span'>;\n\n  /**\n   * Slot for the dismiss icon\n   */\n  dismissIcon?: Slot<'span'>;\n};\n\n/**\n * Tag Props\n */\nexport type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {\n  /**\n   * A Tag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * A Tag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A Tag can be dismissible\n   *\n   * @default false\n   */\n  dismissible?: boolean;\n\n  /**\n   * A Tag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * A Tag has three sizes.\n   *\n   * @default 'medium'\n   */\n  size?: TagSize;\n\n  /**\n   * Unique value identifying the tag within a TagGroup\n   */\n  value?: Value;\n};\n\n/**\n * State used in rendering Tag\n */\nexport type TagState = ComponentState<TagSlots> &\n  Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'>> &\n  UseTagAvatarContextValuesOptions;\n"],"names":[],"mappings":"AAAA,WAqFmC"}

package/lib/components/Tag/useTag.js

@@ -21,9 +21,9 @@ const tagAvatarShapeMap = {
  * @param props - props from this instance of Tag
  * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag
  */ export const useTag_unstable = (props, ref)=>{
-    const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();
+    const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible } = useTagGroupContext_unstable();
     const id = useId('fui-Tag', props.id);
-    const { appearance = 'filled', disabled = false, dismissible = false, shape = 'rounded', size = contextSize, value = id } = props;
+    const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, dismissible = contextDismissible !== null && contextDismissible !== void 0 ? contextDismissible : false, shape = 'rounded', size = contextSize, value = id } = props;
     const dismissOnClick = useEventCallback((ev)=>{
         var _props_onClick;
         (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, ev);

package/lib/components/Tag/useTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { TagProps, TagState } from './Tag.types';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\nconst tagAvatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst tagAvatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */\nexport const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {\n  const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();\n\n  const id = useId('fui-Tag', props.id);\n\n  const {\n    appearance = 'filled',\n    disabled = false,\n    dismissible = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  const dismissOnClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const dismissOnKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    props?.onKeyDown?.(ev);\n    if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const elementType = dismissible ? 'button' : 'span';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled,\n    dismissible,\n    shape,\n    size,\n\n    components: {\n      root: elementType,\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n      dismissIcon: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        ...props,\n        id,\n        ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),\n      }),\n      { elementType },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n    dismissIcon: slot.optional(props.dismissIcon, {\n      renderByDefault: dismissible,\n      defaultProps: {\n        children: <DismissRegular />,\n        role: 'img',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useId","slot","DismissRegular","Delete","Backspace","useTagGroupContext_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","useTag_unstable","props","ref","handleTagDismiss","size","contextSize","id","appearance","disabled","dismissible","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","optional","renderByDefault","defaultProps","children","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACpG,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,MAAMC,mBAAmB;IACvBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,oBAAoB;IACxBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAE,GAAGZ;IAEhD,MAAMa,KAAKlB,MAAM,WAAWa,MAAMK,EAAE;IAEpC,MAAM,EACJC,aAAa,QAAQ,EACrBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,QAAQ,SAAS,EACjBN,OAAOC,WAAW,EAClBM,QAAQL,EAAE,EACX,GAAGL;IAEJ,MAAMW,iBAAiBzB,iBAAiB,CAAC0B;YACvCZ;SAAAA,iBAAAA,MAAMa,OAAO,cAAbb,qCAAAA,oBAAAA,OAAgBY;QAChB,IAAI,CAACA,GAAGE,gBAAgB,EAAE;YACxBZ,6BAAAA,uCAAAA,iBAAmBU,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMK,mBAAmB7B,iBAAiB,CAAC0B;YACzCZ;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOgB,SAAS,cAAhBhB,uCAAAA,sBAAAA,OAAmBY;QACnB,IAAI,CAACA,GAAGE,gBAAgB,IAAKF,CAAAA,GAAGK,GAAG,KAAK3B,UAAUsB,GAAGK,GAAG,KAAK1B,SAAQ,GAAI;YACvEW,6BAAAA,uCAAAA,iBAAmBU,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMQ,cAAcV,cAAc,WAAW;IAE7C,OAAO;QACLF;QACAa,aAAavB,iBAAiB,CAACa,MAAM;QACrCW,YAAY3B,gBAAgB,CAACU,KAAK;QAClCI;QACAC;QACAC;QACAN;QAEAkB,YAAY;YACVC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACf;QAEAL,MAAMlC,KAAKwC,MAAM,CACf3C,yBAAyBiC,aAAa;YACpCjB;YACA,GAAGD,KAAK;YACRK;YACA,GAAIG,eAAe;gBAAEK,SAASF;gBAAgBK,WAAWD;YAAiB,CAAC;QAC7E,IACA;YAAEG;QAAY;QAGhBK,OAAOnC,KAAKyC,QAAQ,CAAC7B,MAAMuB,KAAK,EAAE;YAAEL,aAAa;QAAO;QACxDM,MAAMpC,KAAKyC,QAAQ,CAAC7B,MAAMwB,IAAI,EAAE;YAAEN,aAAa;QAAO;QACtDO,aAAarC,KAAKyC,QAAQ,CAAC7B,MAAMyB,WAAW,EAAE;YAC5CK,iBAAiB;YACjBC,cAAc;gBACZC,UAAUhC,MAAMgC,QAAQ;YAC1B;YACAd,aAAa;QACf;QACAQ,eAAetC,KAAKyC,QAAQ,CAAC7B,MAAM0B,aAAa,EAAE;YAAER,aAAa;QAAO;QACxES,aAAavC,KAAKyC,QAAQ,CAAC7B,MAAM2B,WAAW,EAAE;YAC5CG,iBAAiBtB;YACjBuB,cAAc;gBACZC,wBAAU,oBAAC3C;gBACX4C,MAAM;YACR;YACAf,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { TagProps, TagState } from './Tag.types';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\nconst tagAvatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst tagAvatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */\nexport const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {\n  const {\n    handleTagDismiss,\n    size: contextSize,\n    appearance: contextAppearance,\n    dismissible: contextDismissible,\n  } = useTagGroupContext_unstable();\n\n  const id = useId('fui-Tag', props.id);\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    dismissible = contextDismissible ?? false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  const dismissOnClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const dismissOnKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    props?.onKeyDown?.(ev);\n    if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const elementType = dismissible ? 'button' : 'span';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled,\n    dismissible,\n    shape,\n    size,\n\n    components: {\n      root: elementType,\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n      dismissIcon: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        ...props,\n        id,\n        ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),\n      }),\n      { elementType },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n    dismissIcon: slot.optional(props.dismissIcon, {\n      renderByDefault: dismissible,\n      defaultProps: {\n        children: <DismissRegular />,\n        role: 'img',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useId","slot","DismissRegular","Delete","Backspace","useTagGroupContext_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","useTag_unstable","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","dismissible","contextDismissible","id","disabled","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","optional","renderByDefault","defaultProps","children","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACpG,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,MAAMC,mBAAmB;IACvBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,oBAAoB;IACxBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EACJC,gBAAgB,EAChBC,MAAMC,WAAW,EACjBC,YAAYC,iBAAiB,EAC7BC,aAAaC,kBAAkB,EAChC,GAAGhB;IAEJ,MAAMiB,KAAKtB,MAAM,WAAWa,MAAMS,EAAE;IAEpC,MAAM,EACJJ,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CI,WAAW,KAAK,EAChBH,cAAcC,+BAAAA,gCAAAA,qBAAsB,KAAK,EACzCG,QAAQ,SAAS,EACjBR,OAAOC,WAAW,EAClBQ,QAAQH,EAAE,EACX,GAAGT;IAEJ,MAAMa,iBAAiB3B,iBAAiB,CAAC4B;YACvCd;SAAAA,iBAAAA,MAAMe,OAAO,cAAbf,qCAAAA,oBAAAA,OAAgBc;QAChB,IAAI,CAACA,GAAGE,gBAAgB,EAAE;YACxBd,6BAAAA,uCAAAA,iBAAmBY,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMK,mBAAmB/B,iBAAiB,CAAC4B;YACzCd;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOkB,SAAS,cAAhBlB,uCAAAA,sBAAAA,OAAmBc;QACnB,IAAI,CAACA,GAAGE,gBAAgB,IAAKF,CAAAA,GAAGK,GAAG,KAAK7B,UAAUwB,GAAGK,GAAG,KAAK5B,SAAQ,GAAI;YACvEW,6BAAAA,uCAAAA,iBAAmBY,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMQ,cAAcb,cAAc,WAAW;IAE7C,OAAO;QACLF;QACAgB,aAAazB,iBAAiB,CAACe,MAAM;QACrCW,YAAY7B,gBAAgB,CAACU,KAAK;QAClCO;QACAH;QACAI;QACAR;QAEAoB,YAAY;YACVC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACf;QAEAL,MAAMpC,KAAK0C,MAAM,CACf7C,yBAAyBmC,aAAa;YACpCnB;YACA,GAAGD,KAAK;YACRS;YACA,GAAIF,eAAe;gBAAEQ,SAASF;gBAAgBK,WAAWD;YAAiB,CAAC;QAC7E,IACA;YAAEG;QAAY;QAGhBK,OAAOrC,KAAK2C,QAAQ,CAAC/B,MAAMyB,KAAK,EAAE;YAAEL,aAAa;QAAO;QACxDM,MAAMtC,KAAK2C,QAAQ,CAAC/B,MAAM0B,IAAI,EAAE;YAAEN,aAAa;QAAO;QACtDO,aAAavC,KAAK2C,QAAQ,CAAC/B,MAAM2B,WAAW,EAAE;YAC5CK,iBAAiB;YACjBC,cAAc;gBACZC,UAAUlC,MAAMkC,QAAQ;YAC1B;YACAd,aAAa;QACf;QACAQ,eAAexC,KAAK2C,QAAQ,CAAC/B,MAAM4B,aAAa,EAAE;YAAER,aAAa;QAAO;QACxES,aAAazC,KAAK2C,QAAQ,CAAC/B,MAAM6B,WAAW,EAAE;YAC5CG,iBAAiBzB;YACjB0B,cAAc;gBACZC,wBAAU,oBAAC7C;gBACX8C,MAAM;YACR;YACAf,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/TagGroup/TagGroup.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering TagGroup
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagSize, TagValue, TagDismissHandler } from '../../utils/types';\nimport { TagGroupContextValue } from '../../contexts/tagGroupContext';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onDismiss?: TagDismissHandler<Value>;\n\n  size?: TagSize;\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'size'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n  };\n"],"names":[],"mappings":"AAyBA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagSize, TagValue, TagDismissHandler, TagAppearance } from '../../utils/types';\nimport { TagGroupContextValue } from '../../contexts/tagGroupContext';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onDismiss?: TagDismissHandler<Value>;\n\n  size?: TagSize;\n  appearance?: TagAppearance;\n  dismissible?: boolean;\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n  };\n"],"names":[],"mappings":"AAAA,WAiCI"}

package/lib/components/TagGroup/useTagGroup.js

@@ -12,7 +12,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
  * @param props - props from this instance of TagGroup
  * @param ref - reference to root HTMLDivElement of TagGroup
  */ export const useTagGroup_unstable = (props, ref)=>{
-    const { onDismiss, size = 'medium' } = props;
+    const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false } = props;
     const innerRef = React.useRef();
     const { targetDocument } = useFluent();
     const { findNextFocusable, findPrevFocusable } = useFocusFinders();
@@ -52,6 +52,8 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
     return {
         handleTagDismiss,
         size,
+        appearance,
+        dismissible,
         components: {
             root: 'div'
         },

package/lib/components/TagGroup/useTagGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { onDismiss, size = 'medium' } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleTagDismiss: TagGroupState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n\n    // set focus after tag dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    size,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","size","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE5G,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iCAAiC,QAAQ,qEAAqE;AAEvH;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGH;IAEvC,MAAMI,WAAWf,MAAMgB,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGT;IAC3B,MAAM,EAAEU,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGb;IAEjD,MAAMc,mBAAsDlB,iBAAiB,CAACmB,GAAGC;YAK3EP;QAJJF,sBAAAA,gCAAAA,UAAYQ,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBN,2BAAAA,qCAAAA,eAAgBM,aAAa;QACnD,KAAIR,oBAAAA,SAASS,OAAO,cAAhBT,wCAAAA,kBAAkBU,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOR,kBAAkBK,eAA8B;gBAAEI,WAAWZ,SAASS,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,0BAAAA,oCAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACrB,kCAAkCsB,IAAI,GAAG;gBAC7E,MAAMC,OAAOb,kBAAkBI,cAAcU,aAAa,EAAiB;oBAAEN,WAAWZ,SAASS,OAAO;gBAAC;gBACzGQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb,OAAO;gBACL,MAAMI,OAAOb,kBAAkBI,eAA8B;oBAAEI,WAAWZ,SAASS,OAAO;gBAAC;gBAC3FQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb;QACF;IACF;IAEA,MAAMM,uBAAuB7B,wBAAwB;QACnD8B,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLjB;QACAN;QAEAwB,YAAY;YACVP,MAAM;QACR;QAEAA,MAAM3B,KAAKmC,MAAM,CACftC,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FW,KAAKT,cAAcS,KAAKG;YACxByB,MAAM;YACN,GAAGN,oBAAoB;YACvB,GAAGvB,KAAK;QACV,IACA;YAAE8B,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleTagDismiss: TagGroupState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n\n    // set focus after tag dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    size,\n    appearance,\n    dismissible,\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","size","appearance","dismissible","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE5G,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iCAAiC,QAAQ,qEAAqE;AAEvH;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAEC,aAAa,QAAQ,EAAEC,cAAc,KAAK,EAAE,GAAGL;IAEnF,MAAMM,WAAWjB,MAAMkB,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAM,EAAEY,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGf;IAEjD,MAAMgB,mBAAsDpB,iBAAiB,CAACqB,GAAGC;YAK3EP;QAJJJ,sBAAAA,gCAAAA,UAAYU,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBN,2BAAAA,qCAAAA,eAAgBM,aAAa;QACnD,KAAIR,oBAAAA,SAASS,OAAO,cAAhBT,wCAAAA,kBAAkBU,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOR,kBAAkBK,eAA8B;gBAAEI,WAAWZ,SAASS,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,0BAAAA,oCAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACvB,kCAAkCwB,IAAI,GAAG;gBAC7E,MAAMC,OAAOb,kBAAkBI,cAAcU,aAAa,EAAiB;oBAAEN,WAAWZ,SAASS,OAAO;gBAAC;gBACzGQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb,OAAO;gBACL,MAAMI,OAAOb,kBAAkBI,eAA8B;oBAAEI,WAAWZ,SAASS,OAAO;gBAAC;gBAC3FQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb;QACF;IACF;IAEA,MAAMM,uBAAuB/B,wBAAwB;QACnDgC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLjB;QACAR;QACAC;QACAC;QACAwB,YAAY;YACVP,MAAM;QACR;QAEAA,MAAM7B,KAAKqC,MAAM,CACfxC,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FW,KAAKT,cAAcS,KAAKK;YACxByB,MAAM;YACN,GAAGN,oBAAoB;YACvB,GAAGzB,KAAK;QACV,IACA;YAAEgC,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/TagGroup/useTagGroupContextValues.js

@@ -1,13 +1,17 @@
 import * as React from 'react';
 export function useTagGroupContextValues_unstable(state) {
-    const { handleTagDismiss, size } = state;
+    const { handleTagDismiss, size, appearance, dismissible } = state;
     return {
         tagGroup: React.useMemo(()=>({
                 handleTagDismiss,
-                size
+                size,
+                appearance,
+                dismissible
             }), [
             handleTagDismiss,
-            size
+            size,
+            appearance,
+            dismissible
         ])
     };
 }

package/lib/components/TagGroup/useTagGroupContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagGroupContextValues, TagGroupState } from './TagGroup.types';\n\nexport function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues {\n  const { handleTagDismiss, size } = state;\n  return {\n    tagGroup: React.useMemo(() => ({ handleTagDismiss, size }), [handleTagDismiss, size]),\n  };\n}\n"],"names":["React","useTagGroupContextValues_unstable","state","handleTagDismiss","size","tagGroup","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,GAAGF;IACnC,OAAO;QACLG,UAAUL,MAAMM,OAAO,CAAC,IAAO,CAAA;gBAAEH;gBAAkBC;YAAK,CAAA,GAAI;YAACD;YAAkBC;SAAK;IACtF;AACF"}
+{"version":3,"sources":["useTagGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagGroupContextValues, TagGroupState } from './TagGroup.types';\n\nexport function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues {\n  const { handleTagDismiss, size, appearance, dismissible } = state;\n  return {\n    tagGroup: React.useMemo(\n      () => ({ handleTagDismiss, size, appearance, dismissible }),\n      [handleTagDismiss, size, appearance, dismissible],\n    ),\n  };\n}\n"],"names":["React","useTagGroupContextValues_unstable","state","handleTagDismiss","size","appearance","dismissible","tagGroup","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAGJ;IAC5D,OAAO;QACLK,UAAUP,MAAMQ,OAAO,CACrB,IAAO,CAAA;gBAAEL;gBAAkBC;gBAAMC;gBAAYC;YAAY,CAAA,GACzD;YAACH;YAAkBC;YAAMC;YAAYC;SAAY;IAErD;AACF"}

package/lib/contexts/tagGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["tagGroupContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>>;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = () => React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,gCAAkBD,MAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,MAAM;AACR;AAOA,OAAO,MAAMC,0BAA0BN,gBAAgBO,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QAAMT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,8BAAjBD,+BAAAA,oBAAqCI;AAA0B,EAAE"}
+{"version":3,"sources":["tagGroupContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<Pick<TagGroupState, 'appearance' | 'dismissible'>>;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = () => React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,gCAAkBD,MAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,MAAM;AACR;AAQA,OAAO,MAAMC,0BAA0BN,gBAAgBO,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QAAMT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,8BAAjBD,+BAAAA,oBAAqCI;AAA0B,EAAE"}

package/lib-commonjs/components/InteractionTag/InteractionTag.types.js

@@ -1,6 +1,4 @@
-/**
- * State used in rendering InteractionTag
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["InteractionTag.types.js"],"sourcesContent":["/**\n * State used in rendering InteractionTag\n */ export { };\n"],"names":[],"mappings":"AAAA;;CAEC"}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/lib-commonjs/components/InteractionTag/useInteractionTag.js

@@ -13,10 +13,10 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _tagGroupContext = require("../../contexts/tagGroupContext");
 const useInteractionTag_unstable = (props, ref)=>{
-    const { handleTagDismiss, size: contextSize } = (0, _tagGroupContext.useTagGroupContext_unstable)();
+    const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = (0, _tagGroupContext.useTagGroupContext_unstable)();
     const id = (0, _reactutilities.useId)('fui-InteractionTag-', props.id);
     const interactionTagPrimaryId = (0, _reactutilities.useId)('fui-InteractionTagPrimary-');
-    const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
+    const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
     return {
         appearance,
         disabled,

package/lib-commonjs/components/InteractionTag/useInteractionTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useInteractionTag.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */ export const useInteractionTag_unstable = (props, ref)=>{\n    const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();\n    const id = useId('fui-InteractionTag-', props.id);\n    const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n    const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;\n    return {\n        appearance,\n        disabled,\n        handleTagDismiss,\n        interactionTagPrimaryId,\n        shape,\n        size,\n        value,\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            ref,\n            ...props,\n            id\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","useTagGroupContext_unstable","id","useId","interactionTagPrimaryId","appearance","disabled","shape","value","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCAC+B;iCACV;AASjC,MAAMA,6BAA6B,CAACC,OAAOC;IAClD,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAE,GAAGC,IAAAA,4CAA2B;IAC3E,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,uBAAuBP,MAAMM,EAAE;IAChD,MAAME,0BAA0BD,IAAAA,qBAAK,EAAC;IACtC,MAAM,EAAEE,aAAa,QAAQ,EAAEC,WAAW,KAAK,EAAEC,QAAQ,SAAS,EAAER,OAAOC,WAAW,EAAEQ,QAAQN,EAAE,EAAE,GAAGN;IACvG,OAAO;QACHS;QACAC;QACAR;QACAM;QACAG;QACAR;QACAS;QACAC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9ChB;YACA,GAAGD,KAAK;YACRM;QACJ,IAAI;YACAY,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useInteractionTag.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */ export const useInteractionTag_unstable = (props, ref)=>{\n    const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();\n    const id = useId('fui-InteractionTag-', props.id);\n    const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n    const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;\n    return {\n        appearance,\n        disabled,\n        handleTagDismiss,\n        interactionTagPrimaryId,\n        shape,\n        size,\n        value,\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            ref,\n            ...props,\n            id\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","useTagGroupContext_unstable","id","useId","interactionTagPrimaryId","disabled","shape","value","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCAC+B;iCACV;AASjC,MAAMA,6BAA6B,CAACC,OAAOC;IAClD,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAEC,YAAYC,iBAAiB,EAAE,GAAGC,IAAAA,4CAA2B;IAC1G,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,uBAAuBT,MAAMQ,EAAE;IAChD,MAAME,0BAA0BD,IAAAA,qBAAK,EAAC;IACtC,MAAM,EAAEJ,aAAaC,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoB,QAAQ,EAAEK,WAAW,KAAK,EAAEC,QAAQ,SAAS,EAAET,OAAOC,WAAW,EAAES,QAAQL,EAAE,EAAE,GAAGR;IACxL,OAAO;QACHK;QACAM;QACAT;QACAQ;QACAE;QACAT;QACAU;QACAC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CjB;YACA,GAAGD,KAAK;YACRQ;QACJ,IAAI;YACAW,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/InteractionTagPrimary/InteractionTagPrimary.types.js

@@ -1,6 +1,4 @@
-/**
- * State used in rendering InteractionTagPrimary
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["InteractionTagPrimary.types.js"],"sourcesContent":["/**\n * State used in rendering InteractionTagPrimary\n */ export { };\n"],"names":[],"mappings":"AAAA;;CAEC"}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/lib-commonjs/components/InteractionTagSecondary/InteractionTagSecondary.types.js

@@ -1,6 +1,4 @@
-/**
- * State used in rendering InteractionTagSecondary
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["InteractionTagSecondary.types.js"],"sourcesContent":["/**\n * State used in rendering InteractionTagSecondary\n */ export { };\n"],"names":[],"mappings":"AAAA;;CAEC"}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/lib-commonjs/components/Tag/Tag.types.js

@@ -1,6 +1,4 @@
-/**
- * State used in rendering Tag
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["Tag.types.js"],"sourcesContent":["/**\n * State used in rendering Tag\n */ export { };\n"],"names":[],"mappings":"AAAA;;CAEC"}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/lib-commonjs/components/Tag/useTag.js

@@ -24,9 +24,9 @@ const tagAvatarShapeMap = {
     circular: 'circular'
 };
 const useTag_unstable = (props, ref)=>{
-    const { handleTagDismiss, size: contextSize } = (0, _tagGroupContext.useTagGroupContext_unstable)();
+    const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible } = (0, _tagGroupContext.useTagGroupContext_unstable)();
     const id = (0, _reactutilities.useId)('fui-Tag', props.id);
-    const { appearance = 'filled', disabled = false, dismissible = false, shape = 'rounded', size = contextSize, value = id } = props;
+    const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, dismissible = contextDismissible !== null && contextDismissible !== void 0 ? contextDismissible : false, shape = 'rounded', size = contextSize, value = id } = props;
     const dismissOnClick = (0, _reactutilities.useEventCallback)((ev)=>{
         var _props_onClick;
         (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, ev);

package/lib-commonjs/components/Tag/useTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTag.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\nconst tagAvatarSizeMap = {\n    medium: 28,\n    small: 20,\n    'extra-small': 16\n};\nconst tagAvatarShapeMap = {\n    rounded: 'square',\n    circular: 'circular'\n};\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */ export const useTag_unstable = (props, ref)=>{\n    const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();\n    const id = useId('fui-Tag', props.id);\n    const { appearance = 'filled', disabled = false, dismissible = false, shape = 'rounded', size = contextSize, value = id } = props;\n    const dismissOnClick = useEventCallback((ev)=>{\n        var _props_onClick;\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, ev);\n        if (!ev.defaultPrevented) {\n            handleTagDismiss === null || handleTagDismiss === void 0 ? void 0 : handleTagDismiss(ev, {\n                value\n            });\n        }\n    });\n    const dismissOnKeyDown = useEventCallback((ev)=>{\n        var _props_onKeyDown;\n        props === null || props === void 0 ? void 0 : (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, ev);\n        if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n            handleTagDismiss === null || handleTagDismiss === void 0 ? void 0 : handleTagDismiss(ev, {\n                value\n            });\n        }\n    });\n    const elementType = dismissible ? 'button' : 'span';\n    return {\n        appearance,\n        avatarShape: tagAvatarShapeMap[shape],\n        avatarSize: tagAvatarSizeMap[size],\n        disabled,\n        dismissible,\n        shape,\n        size,\n        components: {\n            root: elementType,\n            media: 'span',\n            icon: 'span',\n            primaryText: 'span',\n            secondaryText: 'span',\n            dismissIcon: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps(elementType, {\n            ref,\n            ...props,\n            id,\n            ...dismissible && {\n                onClick: dismissOnClick,\n                onKeyDown: dismissOnKeyDown\n            }\n        }), {\n            elementType\n        }),\n        media: slot.optional(props.media, {\n            elementType: 'span'\n        }),\n        icon: slot.optional(props.icon, {\n            elementType: 'span'\n        }),\n        primaryText: slot.optional(props.primaryText, {\n            renderByDefault: true,\n            defaultProps: {\n                children: props.children\n            },\n            elementType: 'span'\n        }),\n        secondaryText: slot.optional(props.secondaryText, {\n            elementType: 'span'\n        }),\n        dismissIcon: slot.optional(props.dismissIcon, {\n            renderByDefault: dismissible,\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(DismissRegular, null),\n                role: 'img'\n            },\n            elementType: 'span'\n        })\n    };\n};\n"],"names":["useTag_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","props","ref","handleTagDismiss","size","contextSize","useTagGroupContext_unstable","id","useId","appearance","disabled","dismissible","shape","value","dismissOnClick","useEventCallback","ev","_props_onClick","onClick","call","defaultPrevented","dismissOnKeyDown","_props_onKeyDown","onKeyDown","key","Delete","Backspace","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","slot","always","getIntrinsicElementProps","optional","renderByDefault","defaultProps","children","React","createElement","DismissRegular","role"],"mappings":";;;;+BAsBiBA;;;eAAAA;;;;iEAtBM;gCACiD;4BACzC;8BACG;iCACU;AAC5C,MAAMC,mBAAmB;IACrBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACnB;AACA,MAAMC,oBAAoB;IACtBC,SAAS;IACTC,UAAU;AACd;AASW,MAAMN,kBAAkB,CAACO,OAAOC;IACvC,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAE,GAAGC,IAAAA,4CAA2B;IAC3E,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,WAAWP,MAAMM,EAAE;IACpC,MAAM,EAAEE,aAAa,QAAQ,EAAEC,WAAW,KAAK,EAAEC,cAAc,KAAK,EAAEC,QAAQ,SAAS,EAAER,OAAOC,WAAW,EAAEQ,QAAQN,EAAE,EAAE,GAAGN;IAC5H,MAAMa,iBAAiBC,IAAAA,gCAAgB,EAAC,CAACC;QACrC,IAAIC;QACHA,CAAAA,iBAAiBhB,MAAMiB,OAAO,AAAD,MAAO,QAAQD,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,IAAI,CAAClB,OAAOe;QAC7G,IAAI,CAACA,GAAGI,gBAAgB,EAAE;YACtBjB,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBa,IAAI;gBACrFH;YACJ;QACJ;IACJ;IACA,MAAMQ,mBAAmBN,IAAAA,gCAAgB,EAAC,CAACC;QACvC,IAAIM;QACJrB,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAI,AAACqB,CAAAA,mBAAmBrB,MAAMsB,SAAS,AAAD,MAAO,QAAQD,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBH,IAAI,CAAClB,OAAOe;QACnK,IAAI,CAACA,GAAGI,gBAAgB,IAAKJ,CAAAA,GAAGQ,GAAG,KAAKC,oBAAM,IAAIT,GAAGQ,GAAG,KAAKE,uBAAS,AAAD,GAAI;YACrEvB,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBa,IAAI;gBACrFH;YACJ;QACJ;IACJ;IACA,MAAMc,cAAchB,cAAc,WAAW;IAC7C,OAAO;QACHF;QACAmB,aAAa9B,iBAAiB,CAACc,MAAM;QACrCiB,YAAYlC,gBAAgB,CAACS,KAAK;QAClCM;QACAC;QACAC;QACAR;QACA0B,YAAY;YACRC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACjB;QACAL,MAAMM,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAACZ,aAAa;YACpDzB;YACA,GAAGD,KAAK;YACRM;YACA,GAAGI,eAAe;gBACdO,SAASJ;gBACTS,WAAWF;YACf,CAAC;QACL,IAAI;YACAM;QACJ;QACAK,OAAOK,oBAAI,CAACG,QAAQ,CAACvC,MAAM+B,KAAK,EAAE;YAC9BL,aAAa;QACjB;QACAM,MAAMI,oBAAI,CAACG,QAAQ,CAACvC,MAAMgC,IAAI,EAAE;YAC5BN,aAAa;QACjB;QACAO,aAAaG,oBAAI,CAACG,QAAQ,CAACvC,MAAMiC,WAAW,EAAE;YAC1CO,iBAAiB;YACjBC,cAAc;gBACVC,UAAU1C,MAAM0C,QAAQ;YAC5B;YACAhB,aAAa;QACjB;QACAQ,eAAeE,oBAAI,CAACG,QAAQ,CAACvC,MAAMkC,aAAa,EAAE;YAC9CR,aAAa;QACjB;QACAS,aAAaC,oBAAI,CAACG,QAAQ,CAACvC,MAAMmC,WAAW,EAAE;YAC1CK,iBAAiB9B;YACjB+B,cAAc;gBACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,0BAAc,EAAE;gBAC5DC,MAAM;YACV;YACApB,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useTag.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\nconst tagAvatarSizeMap = {\n    medium: 28,\n    small: 20,\n    'extra-small': 16\n};\nconst tagAvatarShapeMap = {\n    rounded: 'square',\n    circular: 'circular'\n};\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */ export const useTag_unstable = (props, ref)=>{\n    const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible } = useTagGroupContext_unstable();\n    const id = useId('fui-Tag', props.id);\n    const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, dismissible = contextDismissible !== null && contextDismissible !== void 0 ? contextDismissible : false, shape = 'rounded', size = contextSize, value = id } = props;\n    const dismissOnClick = useEventCallback((ev)=>{\n        var _props_onClick;\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, ev);\n        if (!ev.defaultPrevented) {\n            handleTagDismiss === null || handleTagDismiss === void 0 ? void 0 : handleTagDismiss(ev, {\n                value\n            });\n        }\n    });\n    const dismissOnKeyDown = useEventCallback((ev)=>{\n        var _props_onKeyDown;\n        props === null || props === void 0 ? void 0 : (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, ev);\n        if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n            handleTagDismiss === null || handleTagDismiss === void 0 ? void 0 : handleTagDismiss(ev, {\n                value\n            });\n        }\n    });\n    const elementType = dismissible ? 'button' : 'span';\n    return {\n        appearance,\n        avatarShape: tagAvatarShapeMap[shape],\n        avatarSize: tagAvatarSizeMap[size],\n        disabled,\n        dismissible,\n        shape,\n        size,\n        components: {\n            root: elementType,\n            media: 'span',\n            icon: 'span',\n            primaryText: 'span',\n            secondaryText: 'span',\n            dismissIcon: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps(elementType, {\n            ref,\n            ...props,\n            id,\n            ...dismissible && {\n                onClick: dismissOnClick,\n                onKeyDown: dismissOnKeyDown\n            }\n        }), {\n            elementType\n        }),\n        media: slot.optional(props.media, {\n            elementType: 'span'\n        }),\n        icon: slot.optional(props.icon, {\n            elementType: 'span'\n        }),\n        primaryText: slot.optional(props.primaryText, {\n            renderByDefault: true,\n            defaultProps: {\n                children: props.children\n            },\n            elementType: 'span'\n        }),\n        secondaryText: slot.optional(props.secondaryText, {\n            elementType: 'span'\n        }),\n        dismissIcon: slot.optional(props.dismissIcon, {\n            renderByDefault: dismissible,\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(DismissRegular, null),\n                role: 'img'\n            },\n            elementType: 'span'\n        })\n    };\n};\n"],"names":["useTag_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","dismissible","contextDismissible","useTagGroupContext_unstable","id","useId","disabled","shape","value","dismissOnClick","useEventCallback","ev","_props_onClick","onClick","call","defaultPrevented","dismissOnKeyDown","_props_onKeyDown","onKeyDown","key","Delete","Backspace","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","slot","always","getIntrinsicElementProps","optional","renderByDefault","defaultProps","children","React","createElement","DismissRegular","role"],"mappings":";;;;+BAsBiBA;;;eAAAA;;;;iEAtBM;gCACiD;4BACzC;8BACG;iCACU;AAC5C,MAAMC,mBAAmB;IACrBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACnB;AACA,MAAMC,oBAAoB;IACtBC,SAAS;IACTC,UAAU;AACd;AASW,MAAMN,kBAAkB,CAACO,OAAOC;IACvC,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAEC,YAAYC,iBAAiB,EAAEC,aAAaC,kBAAkB,EAAE,GAAGC,IAAAA,4CAA2B;IAC3I,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,WAAWX,MAAMU,EAAE;IACpC,MAAM,EAAEL,aAAaC,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoB,QAAQ,EAAEM,WAAW,KAAK,EAAEL,cAAcC,uBAAuB,QAAQA,uBAAuB,KAAK,IAAIA,qBAAqB,KAAK,EAAEK,QAAQ,SAAS,EAAEV,OAAOC,WAAW,EAAEU,QAAQJ,EAAE,EAAE,GAAGV;IACjS,MAAMe,iBAAiBC,IAAAA,gCAAgB,EAAC,CAACC;QACrC,IAAIC;QACHA,CAAAA,iBAAiBlB,MAAMmB,OAAO,AAAD,MAAO,QAAQD,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,IAAI,CAACpB,OAAOiB;QAC7G,IAAI,CAACA,GAAGI,gBAAgB,EAAE;YACtBnB,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBe,IAAI;gBACrFH;YACJ;QACJ;IACJ;IACA,MAAMQ,mBAAmBN,IAAAA,gCAAgB,EAAC,CAACC;QACvC,IAAIM;QACJvB,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAI,AAACuB,CAAAA,mBAAmBvB,MAAMwB,SAAS,AAAD,MAAO,QAAQD,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBH,IAAI,CAACpB,OAAOiB;QACnK,IAAI,CAACA,GAAGI,gBAAgB,IAAKJ,CAAAA,GAAGQ,GAAG,KAAKC,oBAAM,IAAIT,GAAGQ,GAAG,KAAKE,uBAAS,AAAD,GAAI;YACrEzB,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBe,IAAI;gBACrFH;YACJ;QACJ;IACJ;IACA,MAAMc,cAAcrB,cAAc,WAAW;IAC7C,OAAO;QACHF;QACAwB,aAAahC,iBAAiB,CAACgB,MAAM;QACrCiB,YAAYpC,gBAAgB,CAACS,KAAK;QAClCS;QACAL;QACAM;QACAV;QACA4B,YAAY;YACRC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACjB;QACAL,MAAMM,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAACZ,aAAa;YACpD3B;YACA,GAAGD,KAAK;YACRU;YACA,GAAGH,eAAe;gBACdY,SAASJ;gBACTS,WAAWF;YACf,CAAC;QACL,IAAI;YACAM;QACJ;QACAK,OAAOK,oBAAI,CAACG,QAAQ,CAACzC,MAAMiC,KAAK,EAAE;YAC9BL,aAAa;QACjB;QACAM,MAAMI,oBAAI,CAACG,QAAQ,CAACzC,MAAMkC,IAAI,EAAE;YAC5BN,aAAa;QACjB;QACAO,aAAaG,oBAAI,CAACG,QAAQ,CAACzC,MAAMmC,WAAW,EAAE;YAC1CO,iBAAiB;YACjBC,cAAc;gBACVC,UAAU5C,MAAM4C,QAAQ;YAC5B;YACAhB,aAAa;QACjB;QACAQ,eAAeE,oBAAI,CAACG,QAAQ,CAACzC,MAAMoC,aAAa,EAAE;YAC9CR,aAAa;QACjB;QACAS,aAAaC,oBAAI,CAACG,QAAQ,CAACzC,MAAMqC,WAAW,EAAE;YAC1CK,iBAAiBnC;YACjBoC,cAAc;gBACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,0BAAc,EAAE;gBAC5DC,MAAM;YACV;YACApB,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/TagGroup/TagGroup.types.js

@@ -1,6 +1,4 @@
-/**
- * State used in rendering TagGroup
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["TagGroup.types.js"],"sourcesContent":["/**\n * State used in rendering TagGroup\n */ export { };\n"],"names":[],"mappings":"AAAA;;CAEC"}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/lib-commonjs/components/TagGroup/useTagGroup.js

@@ -15,7 +15,7 @@ const _reacttabster = require("@fluentui/react-tabster");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useInteractionTagSecondaryStylesstyles = require("../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles");
 const useTagGroup_unstable = (props, ref)=>{
-    const { onDismiss, size = 'medium' } = props;
+    const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false } = props;
     const innerRef = _react.useRef();
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const { findNextFocusable, findPrevFocusable } = (0, _reacttabster.useFocusFinders)();
@@ -55,6 +55,8 @@ const useTagGroup_unstable = (props, ref)=>{
     return {
         handleTagDismiss,
         size,
+        appearance,
+        dismissible,
         components: {
             root: 'div'
         },

package/lib-commonjs/components/TagGroup/useTagGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */ export const useTagGroup_unstable = (props, ref)=>{\n    const { onDismiss, size = 'medium' } = props;\n    const innerRef = React.useRef();\n    const { targetDocument } = useFluent();\n    const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n    const handleTagDismiss = useEventCallback((e, data)=>{\n        var _innerRef_current;\n        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e, data);\n        // set focus after tag dismiss\n        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n        if ((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement)) {\n            // focus on next tag only if the active element is within the current tag group\n            const next = findNextFocusable(activeElement, {\n                container: innerRef.current\n            });\n            if (next) {\n                next.focus();\n                return;\n            }\n            // if there is no next focusable, focus on the previous focusable\n            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.className.includes(interactionTagSecondaryClassNames.root)) {\n                const prev = findPrevFocusable(activeElement.parentElement, {\n                    container: innerRef.current\n                });\n                prev === null || prev === void 0 ? void 0 : prev.focus();\n            } else {\n                const prev = findPrevFocusable(activeElement, {\n                    container: innerRef.current\n                });\n                prev === null || prev === void 0 ? void 0 : prev.focus();\n            }\n        }\n    });\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'both',\n        memorizeCurrent: true\n    });\n    return {\n        handleTagDismiss,\n        size,\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, innerRef),\n            role: 'toolbar',\n            ...arrowNavigationProps,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useTagGroup_unstable","props","ref","onDismiss","size","innerRef","React","useRef","targetDocument","useFluent","findNextFocusable","findPrevFocusable","useFocusFinders","handleTagDismiss","useEventCallback","e","data","_innerRef_current","activeElement","current","contains","next","container","focus","className","includes","interactionTagSecondaryClassNames","root","prev","parentElement","arrowNavigationProps","useArrowNavigationGroup","circular","axis","memorizeCurrent","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACyD;8BACvB;qCACT;wDACE;AASvC,MAAMA,uBAAuB,CAACC,OAAOC;IAC5C,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGH;IACvC,MAAMI,WAAWC,OAAMC,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,6BAAe;IAChE,MAAMC,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,GAAGC;QAC1C,IAAIC;QACJd,cAAc,QAAQA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUY,GAAGC;QACnE,8BAA8B;QAC9B,MAAME,gBAAgBV,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeU,aAAa;QAClH,IAAI,AAACD,CAAAA,oBAAoBZ,SAASc,OAAO,AAAD,MAAO,QAAQF,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBG,QAAQ,CAACF,gBAAgB;YACtI,+EAA+E;YAC/E,MAAMG,OAAOX,kBAAkBQ,eAAe;gBAC1CI,WAAWjB,SAASc,OAAO;YAC/B;YACA,IAAIE,MAAM;gBACNA,KAAKE,KAAK;gBACV;YACJ;YACA,iEAAiE;YACjE,IAAIL,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcM,SAAS,CAACC,QAAQ,CAACC,yEAAiC,CAACC,IAAI,GAAG;gBACxI,MAAMC,OAAOjB,kBAAkBO,cAAcW,aAAa,EAAE;oBACxDP,WAAWjB,SAASc,OAAO;gBAC/B;gBACAS,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKL,KAAK;YAC1D,OAAO;gBACH,MAAMK,OAAOjB,kBAAkBO,eAAe;oBAC1CI,WAAWjB,SAASc,OAAO;gBAC/B;gBACAS,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKL,KAAK;YAC1D;QACJ;IACJ;IACA,MAAMO,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACrB;IACA,OAAO;QACHrB;QACAT;QACA+B,YAAY;YACRR,MAAM;QACV;QACAA,MAAMS,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FpC,KAAKqC,IAAAA,6BAAa,EAACrC,KAAKG;YACxBmC,MAAM;YACN,GAAGV,oBAAoB;YACvB,GAAG7B,KAAK;QACZ,IAAI;YACAwC,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useTagGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */ export const useTagGroup_unstable = (props, ref)=>{\n    const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false } = props;\n    const innerRef = React.useRef();\n    const { targetDocument } = useFluent();\n    const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n    const handleTagDismiss = useEventCallback((e, data)=>{\n        var _innerRef_current;\n        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e, data);\n        // set focus after tag dismiss\n        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n        if ((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement)) {\n            // focus on next tag only if the active element is within the current tag group\n            const next = findNextFocusable(activeElement, {\n                container: innerRef.current\n            });\n            if (next) {\n                next.focus();\n                return;\n            }\n            // if there is no next focusable, focus on the previous focusable\n            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.className.includes(interactionTagSecondaryClassNames.root)) {\n                const prev = findPrevFocusable(activeElement.parentElement, {\n                    container: innerRef.current\n                });\n                prev === null || prev === void 0 ? void 0 : prev.focus();\n            } else {\n                const prev = findPrevFocusable(activeElement, {\n                    container: innerRef.current\n                });\n                prev === null || prev === void 0 ? void 0 : prev.focus();\n            }\n        }\n    });\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'both',\n        memorizeCurrent: true\n    });\n    return {\n        handleTagDismiss,\n        size,\n        appearance,\n        dismissible,\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, innerRef),\n            role: 'toolbar',\n            ...arrowNavigationProps,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useTagGroup_unstable","props","ref","onDismiss","size","appearance","dismissible","innerRef","React","useRef","targetDocument","useFluent","findNextFocusable","findPrevFocusable","useFocusFinders","handleTagDismiss","useEventCallback","e","data","_innerRef_current","activeElement","current","contains","next","container","focus","className","includes","interactionTagSecondaryClassNames","root","prev","parentElement","arrowNavigationProps","useArrowNavigationGroup","circular","axis","memorizeCurrent","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACyD;8BACvB;qCACT;wDACE;AASvC,MAAMA,uBAAuB,CAACC,OAAOC;IAC5C,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAEC,aAAa,QAAQ,EAAEC,cAAc,KAAK,EAAE,GAAGL;IACnF,MAAMM,WAAWC,OAAMC,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,6BAAe;IAChE,MAAMC,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,GAAGC;QAC1C,IAAIC;QACJhB,cAAc,QAAQA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUc,GAAGC;QACnE,8BAA8B;QAC9B,MAAME,gBAAgBV,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeU,aAAa;QAClH,IAAI,AAACD,CAAAA,oBAAoBZ,SAASc,OAAO,AAAD,MAAO,QAAQF,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBG,QAAQ,CAACF,gBAAgB;YACtI,+EAA+E;YAC/E,MAAMG,OAAOX,kBAAkBQ,eAAe;gBAC1CI,WAAWjB,SAASc,OAAO;YAC/B;YACA,IAAIE,MAAM;gBACNA,KAAKE,KAAK;gBACV;YACJ;YACA,iEAAiE;YACjE,IAAIL,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcM,SAAS,CAACC,QAAQ,CAACC,yEAAiC,CAACC,IAAI,GAAG;gBACxI,MAAMC,OAAOjB,kBAAkBO,cAAcW,aAAa,EAAE;oBACxDP,WAAWjB,SAASc,OAAO;gBAC/B;gBACAS,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKL,KAAK;YAC1D,OAAO;gBACH,MAAMK,OAAOjB,kBAAkBO,eAAe;oBAC1CI,WAAWjB,SAASc,OAAO;gBAC/B;gBACAS,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKL,KAAK;YAC1D;QACJ;IACJ;IACA,MAAMO,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACrB;IACA,OAAO;QACHrB;QACAX;QACAC;QACAC;QACA+B,YAAY;YACRR,MAAM;QACV;QACAA,MAAMS,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FtC,KAAKuC,IAAAA,6BAAa,EAACvC,KAAKK;YACxBmC,MAAM;YACN,GAAGV,oBAAoB;YACvB,GAAG/B,KAAK;QACZ,IAAI;YACA0C,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/TagGroup/useTagGroupContextValues.js

@@ -11,14 +11,18 @@ Object.defineProperty(exports, "useTagGroupContextValues_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useTagGroupContextValues_unstable(state) {
-    const { handleTagDismiss, size } = state;
+    const { handleTagDismiss, size, appearance, dismissible } = state;
     return {
         tagGroup: _react.useMemo(()=>({
                 handleTagDismiss,
-                size
+                size,
+                appearance,
+                dismissible
             }), [
             handleTagDismiss,
-            size
+            size,
+            appearance,
+            dismissible
         ])
     };
 }

package/lib-commonjs/components/TagGroup/useTagGroupContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagGroupContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTagGroupContextValues_unstable(state) {\n    const { handleTagDismiss, size } = state;\n    return {\n        tagGroup: React.useMemo(()=>({\n                handleTagDismiss,\n                size\n            }), [\n            handleTagDismiss,\n            size\n        ])\n    };\n}\n"],"names":["useTagGroupContextValues_unstable","state","handleTagDismiss","size","tagGroup","React","useMemo"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,GAAGF;IACnC,OAAO;QACHG,UAAUC,OAAMC,OAAO,CAAC,IAAK,CAAA;gBACrBJ;gBACAC;YACJ,CAAA,GAAI;YACJD;YACAC;SACH;IACL;AACJ"}
+{"version":3,"sources":["useTagGroupContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTagGroupContextValues_unstable(state) {\n    const { handleTagDismiss, size, appearance, dismissible } = state;\n    return {\n        tagGroup: React.useMemo(()=>({\n                handleTagDismiss,\n                size,\n                appearance,\n                dismissible\n            }), [\n            handleTagDismiss,\n            size,\n            appearance,\n            dismissible\n        ])\n    };\n}\n"],"names":["useTagGroupContextValues_unstable","state","handleTagDismiss","size","appearance","dismissible","tagGroup","React","useMemo"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAGJ;IAC5D,OAAO;QACHK,UAAUC,OAAMC,OAAO,CAAC,IAAK,CAAA;gBACrBN;gBACAC;gBACAC;gBACAC;YACJ,CAAA,GAAI;YACJH;YACAC;YACAC;YACAC;SACH;IACL;AACJ"}

package/lib-commonjs/index.js

@@ -9,77 +9,77 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    InteractionTag: function() {
-        return _InteractionTag.InteractionTag;
-    },
-    InteractionTagPrimary: function() {
-        return _InteractionTagPrimary.InteractionTagPrimary;
-    },
-    InteractionTagSecondary: function() {
-        return _InteractionTagSecondary.InteractionTagSecondary;
-    },
     Tag: function() {
         return _Tag.Tag;
     },
-    TagGroup: function() {
-        return _TagGroup.TagGroup;
-    },
-    interactionTagClassNames: function() {
-        return _InteractionTag.interactionTagClassNames;
+    renderTag_unstable: function() {
+        return _Tag.renderTag_unstable;
     },
-    interactionTagPrimaryClassNames: function() {
-        return _InteractionTagPrimary.interactionTagPrimaryClassNames;
+    tagClassNames: function() {
+        return _Tag.tagClassNames;
     },
-    interactionTagSecondaryClassNames: function() {
-        return _InteractionTagSecondary.interactionTagSecondaryClassNames;
+    useTagStyles_unstable: function() {
+        return _Tag.useTagStyles_unstable;
     },
-    renderInteractionTagPrimary_unstable: function() {
-        return _InteractionTagPrimary.renderInteractionTagPrimary_unstable;
+    useTag_unstable: function() {
+        return _Tag.useTag_unstable;
     },
-    renderInteractionTagSecondary_unstable: function() {
-        return _InteractionTagSecondary.renderInteractionTagSecondary_unstable;
+    InteractionTag: function() {
+        return _InteractionTag.InteractionTag;
     },
     renderInteractionTag_unstable: function() {
         return _InteractionTag.renderInteractionTag_unstable;
     },
-    renderTagGroup_unstable: function() {
-        return _TagGroup.renderTagGroup_unstable;
-    },
-    renderTag_unstable: function() {
-        return _Tag.renderTag_unstable;
+    interactionTagClassNames: function() {
+        return _InteractionTag.interactionTagClassNames;
     },
-    tagClassNames: function() {
-        return _Tag.tagClassNames;
+    useInteractionTagStyles_unstable: function() {
+        return _InteractionTag.useInteractionTagStyles_unstable;
     },
-    tagGroupClassNames: function() {
-        return _TagGroup.tagGroupClassNames;
+    useInteractionTag_unstable: function() {
+        return _InteractionTag.useInteractionTag_unstable;
     },
     useInteractionTagContextValues_unstable: function() {
         return _InteractionTag.useInteractionTagContextValues_unstable;
     },
+    InteractionTagPrimary: function() {
+        return _InteractionTagPrimary.InteractionTagPrimary;
+    },
+    interactionTagPrimaryClassNames: function() {
+        return _InteractionTagPrimary.interactionTagPrimaryClassNames;
+    },
+    renderInteractionTagPrimary_unstable: function() {
+        return _InteractionTagPrimary.renderInteractionTagPrimary_unstable;
+    },
     useInteractionTagPrimaryStyles_unstable: function() {
         return _InteractionTagPrimary.useInteractionTagPrimaryStyles_unstable;
     },
     useInteractionTagPrimary_unstable: function() {
         return _InteractionTagPrimary.useInteractionTagPrimary_unstable;
     },
+    InteractionTagSecondary: function() {
+        return _InteractionTagSecondary.InteractionTagSecondary;
+    },
+    renderInteractionTagSecondary_unstable: function() {
+        return _InteractionTagSecondary.renderInteractionTagSecondary_unstable;
+    },
+    interactionTagSecondaryClassNames: function() {
+        return _InteractionTagSecondary.interactionTagSecondaryClassNames;
+    },
     useInteractionTagSecondaryStyles_unstable: function() {
         return _InteractionTagSecondary.useInteractionTagSecondaryStyles_unstable;
     },
     useInteractionTagSecondary_unstable: function() {
         return _InteractionTagSecondary.useInteractionTagSecondary_unstable;
     },
-    useInteractionTagStyles_unstable: function() {
-        return _InteractionTag.useInteractionTagStyles_unstable;
-    },
-    useInteractionTag_unstable: function() {
-        return _InteractionTag.useInteractionTag_unstable;
+    TagGroup: function() {
+        return _TagGroup.TagGroup;
     },
-    useTagAvatarContextValues_unstable: function() {
-        return _utils.useTagAvatarContextValues_unstable;
+    renderTagGroup_unstable: function() {
+        return _TagGroup.renderTagGroup_unstable;
     },
-    useTagGroupContextValues_unstable: function() {
-        return _TagGroup.useTagGroupContextValues_unstable;
+    tagGroupClassNames: function() {
+        return _TagGroup.tagGroupClassNames;
     },
     useTagGroupStyles_unstable: function() {
         return _TagGroup.useTagGroupStyles_unstable;
@@ -87,11 +87,11 @@ _export(exports, {
     useTagGroup_unstable: function() {
         return _TagGroup.useTagGroup_unstable;
     },
-    useTagStyles_unstable: function() {
-        return _Tag.useTagStyles_unstable;
+    useTagGroupContextValues_unstable: function() {
+        return _TagGroup.useTagGroupContextValues_unstable;
     },
-    useTag_unstable: function() {
-        return _Tag.useTag_unstable;
+    useTagAvatarContextValues_unstable: function() {
+        return _utils.useTagAvatarContextValues_unstable;
     }
 });
 const _Tag = require("./Tag");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { Tag, renderTag_unstable, tagClassNames, useTagStyles_unstable, useTag_unstable } from './Tag';\nexport { InteractionTag, renderInteractionTag_unstable, interactionTagClassNames, useInteractionTagStyles_unstable, useInteractionTag_unstable, useInteractionTagContextValues_unstable } from './InteractionTag';\nexport { InteractionTagPrimary, interactionTagPrimaryClassNames, renderInteractionTagPrimary_unstable, useInteractionTagPrimaryStyles_unstable, useInteractionTagPrimary_unstable } from './InteractionTagPrimary';\nexport { InteractionTagSecondary, renderInteractionTagSecondary_unstable, interactionTagSecondaryClassNames, useInteractionTagSecondaryStyles_unstable, useInteractionTagSecondary_unstable } from './InteractionTagSecondary';\nexport { TagGroup, renderTagGroup_unstable, tagGroupClassNames, useTagGroupStyles_unstable, useTagGroup_unstable, useTagGroupContextValues_unstable } from './TagGroup';\nexport { useTagAvatarContextValues_unstable } from './utils';\n"],"names":["InteractionTag","InteractionTagPrimary","InteractionTagSecondary","Tag","TagGroup","interactionTagClassNames","interactionTagPrimaryClassNames","interactionTagSecondaryClassNames","renderInteractionTagPrimary_unstable","renderInteractionTagSecondary_unstable","renderInteractionTag_unstable","renderTagGroup_unstable","renderTag_unstable","tagClassNames","tagGroupClassNames","useInteractionTagContextValues_unstable","useInteractionTagPrimaryStyles_unstable","useInteractionTagPrimary_unstable","useInteractionTagSecondaryStyles_unstable","useInteractionTagSecondary_unstable","useInteractionTagStyles_unstable","useInteractionTag_unstable","useTagAvatarContextValues_unstable","useTagGroupContextValues_unstable","useTagGroupStyles_unstable","useTagGroup_unstable","useTagStyles_unstable","useTag_unstable"],"mappings":";;;;;;;;;;;IACSA,cAAc;eAAdA,8BAAc;;IACdC,qBAAqB;eAArBA,4CAAqB;;IACrBC,uBAAuB;eAAvBA,gDAAuB;;IAHvBC,GAAG;eAAHA,QAAG;;IAIHC,QAAQ;eAARA,kBAAQ;;IAHuCC,wBAAwB;eAAxBA,wCAAwB;;IAChDC,+BAA+B;eAA/BA,sDAA+B;;IACWC,iCAAiC;eAAjCA,0DAAiC;;IAD1CC,oCAAoC;eAApCA,2DAAoC;;IACnEC,sCAAsC;eAAtCA,+DAAsC;;IAF/CC,6BAA6B;eAA7BA,6CAA6B;;IAGnCC,uBAAuB;eAAvBA,iCAAuB;;IAJ5BC,kBAAkB;eAAlBA,uBAAkB;;IAAEC,aAAa;eAAbA,kBAAa;;IAIHC,kBAAkB;eAAlBA,4BAAkB;;IAHkFC,uCAAuC;eAAvCA,uDAAuC;;IAChFC,uCAAuC;eAAvCA,8DAAuC;;IAAEC,iCAAiC;eAAjCA,wDAAiC;;IACpEC,yCAAyC;eAAzCA,kEAAyC;;IAAEC,mCAAmC;eAAnCA,4DAAmC;;IAFzGC,gCAAgC;eAAhCA,gDAAgC;;IAAEC,0BAA0B;eAA1BA,0CAA0B;;IAIrIC,kCAAkC;eAAlCA,yCAAkC;;IADuEC,iCAAiC;eAAjCA,2CAAiC;;IAAnFC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IAJ/DC,qBAAqB;eAArBA,0BAAqB;;IAAEC,eAAe;eAAfA,oBAAe;;;qBAAQ;gCACgG;uCACN;yCACU;0BACxC;uBACxG"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { Tag, renderTag_unstable, tagClassNames, useTagStyles_unstable, useTag_unstable } from './Tag';\nexport { InteractionTag, renderInteractionTag_unstable, interactionTagClassNames, useInteractionTagStyles_unstable, useInteractionTag_unstable, useInteractionTagContextValues_unstable } from './InteractionTag';\nexport { InteractionTagPrimary, interactionTagPrimaryClassNames, renderInteractionTagPrimary_unstable, useInteractionTagPrimaryStyles_unstable, useInteractionTagPrimary_unstable } from './InteractionTagPrimary';\nexport { InteractionTagSecondary, renderInteractionTagSecondary_unstable, interactionTagSecondaryClassNames, useInteractionTagSecondaryStyles_unstable, useInteractionTagSecondary_unstable } from './InteractionTagSecondary';\nexport { TagGroup, renderTagGroup_unstable, tagGroupClassNames, useTagGroupStyles_unstable, useTagGroup_unstable, useTagGroupContextValues_unstable } from './TagGroup';\nexport { useTagAvatarContextValues_unstable } from './utils';\n"],"names":["Tag","renderTag_unstable","tagClassNames","useTagStyles_unstable","useTag_unstable","InteractionTag","renderInteractionTag_unstable","interactionTagClassNames","useInteractionTagStyles_unstable","useInteractionTag_unstable","useInteractionTagContextValues_unstable","InteractionTagPrimary","interactionTagPrimaryClassNames","renderInteractionTagPrimary_unstable","useInteractionTagPrimaryStyles_unstable","useInteractionTagPrimary_unstable","InteractionTagSecondary","renderInteractionTagSecondary_unstable","interactionTagSecondaryClassNames","useInteractionTagSecondaryStyles_unstable","useInteractionTagSecondary_unstable","TagGroup","renderTagGroup_unstable","tagGroupClassNames","useTagGroupStyles_unstable","useTagGroup_unstable","useTagGroupContextValues_unstable","useTagAvatarContextValues_unstable"],"mappings":";;;;;;;;;;;IAASA,GAAG;eAAHA,QAAG;;IAAEC,kBAAkB;eAAlBA,uBAAkB;;IAAEC,aAAa;eAAbA,kBAAa;;IAAEC,qBAAqB;eAArBA,0BAAqB;;IAAEC,eAAe;eAAfA,oBAAe;;IAC9EC,cAAc;eAAdA,8BAAc;;IAAEC,6BAA6B;eAA7BA,6CAA6B;;IAAEC,wBAAwB;eAAxBA,wCAAwB;;IAAEC,gCAAgC;eAAhCA,gDAAgC;;IAAEC,0BAA0B;eAA1BA,0CAA0B;;IAAEC,uCAAuC;eAAvCA,uDAAuC;;IAC9KC,qBAAqB;eAArBA,4CAAqB;;IAAEC,+BAA+B;eAA/BA,sDAA+B;;IAAEC,oCAAoC;eAApCA,2DAAoC;;IAAEC,uCAAuC;eAAvCA,8DAAuC;;IAAEC,iCAAiC;eAAjCA,wDAAiC;;IACxKC,uBAAuB;eAAvBA,gDAAuB;;IAAEC,sCAAsC;eAAtCA,+DAAsC;;IAAEC,iCAAiC;eAAjCA,0DAAiC;;IAAEC,yCAAyC;eAAzCA,kEAAyC;;IAAEC,mCAAmC;eAAnCA,4DAAmC;;IAClLC,QAAQ;eAARA,kBAAQ;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IAAEC,iCAAiC;eAAjCA,2CAAiC;;IAC1IC,kCAAkC;eAAlCA,yCAAkC;;;qBALoD;gCACgG;uCACN;yCACU;0BACxC;uBACxG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tags",
-  "version": "9.1.2",
+  "version": "9.2.0",
   "description": "Fluent UI Tag component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,14 +37,14 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.10.1",
-    "@fluentui/react-avatar": "^9.6.18",
+    "@fluentui/react-aria": "^9.10.2",
+    "@fluentui/react-avatar": "^9.6.19",
     "@fluentui/react-icons": "^2.0.224",
-    "@fluentui/react-jsx-runtime": "^9.0.33",
-    "@fluentui/react-shared-contexts": "^9.15.1",
-    "@fluentui/react-tabster": "^9.19.4",
-    "@fluentui/react-theme": "^9.1.18",
-    "@fluentui/react-utilities": "^9.18.4",
+    "@fluentui/react-jsx-runtime": "^9.0.34",
+    "@fluentui/react-shared-contexts": "^9.15.2",
+    "@fluentui/react-tabster": "^9.19.5",
+    "@fluentui/react-theme": "^9.1.19",
+    "@fluentui/react-utilities": "^9.18.5",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },