@fluentui/react-tags 9.4.1 → 9.5.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Tue, 11 Mar 2025 18:54:30 GMT and should not be manually modified.
+This log was last generated on Wed, 19 Mar 2025 15:36:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.5.0)
+
+Wed, 19 Mar 2025 15:36:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.4.1..@fluentui/react-tags_v9.5.0)
+
+### Minor changes
+
+- feat: Added selected state for Tag and InteractionTag ([PR #33804](https://github.com/microsoft/fluentui/pull/33804) by vkozlova@microsoft.com)
+- Bump @fluentui/react-aria to v9.14.2 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+- Bump @fluentui/react-avatar to v9.7.2 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.52 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.23.0 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+- Bump @fluentui/react-tabster to v9.24.2 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+- Bump @fluentui/react-utilities to v9.18.22 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
+
 ## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.4.1)
 
-Tue, 11 Mar 2025 18:54:30 GMT 
+Tue, 11 Mar 2025 18:58:54 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.4.0..@fluentui/react-tags_v9.4.1)
 
 ### Patches

package/dist/index.d.ts

@@ -4,6 +4,8 @@ import { AvatarShape } from '@fluentui/react-avatar';
 import { AvatarSize } from '@fluentui/react-avatar';
 import { ComponentProps } from '@fluentui/react-utilities';
 import { ComponentState } from '@fluentui/react-utilities';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import { Slot } from '@fluentui/react-utilities';
@@ -20,11 +22,13 @@ export declare const interactionTagClassNames: SlotClassNames<InteractionTagSlot
 /**
  * Context shared between InteractionTag and its children components
  */
-declare type InteractionTagContextValue<Value = string> = Required<Pick<InteractionTagState, 'appearance' | 'disabled' | 'shape' | 'size'> & {
+declare type InteractionTagContextValue<Value = string> = Required<Pick<InteractionTagState, 'appearance' | 'disabled' | 'selected' | 'selectedValues' | 'shape' | 'size'> & {
     handleTagDismiss: TagDismissHandler<Value>;
     interactionTagPrimaryId: string;
     value?: Value;
-}>;
+}> & {
+    handleTagSelect?: TagSelectHandler<Value>;
+};
 
 declare type InteractionTagContextValues = {
     interactionTag: InteractionTagContextValue;
@@ -76,7 +80,7 @@ export declare type InteractionTagPrimarySlots = {
 /**
  * State used in rendering InteractionTagPrimary
  */
-export declare type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> & Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'> & Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>> & UseTagAvatarContextValuesOptions;
+export declare type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> & Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size'> & Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>> & UseTagAvatarContextValuesOptions;
 
 /**
  * InteractionTag Props
@@ -94,6 +98,13 @@ export declare type InteractionTagProps<Value = TagValue> = ComponentProps<Parti
      * @default false
      */
     disabled?: boolean;
+    /**
+     * An InteractionTag can be selected.
+     * Note: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.
+     *
+     * @default false
+     */
+    selected?: boolean;
     /**
      * An InteractionTag can have rounded or circular shape.
      *
@@ -131,7 +142,7 @@ export declare type InteractionTagSecondarySlots = {
 /**
  * State used in rendering InteractionTagSecondary
  */
-export declare type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> & Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'>>;
+export declare type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> & Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size'>>;
 
 export declare type InteractionTagSlots = {
     root: NonNullable<Slot<'div'>>;
@@ -140,11 +151,19 @@ export declare type InteractionTagSlots = {
 /**
  * State used in rendering InteractionTag
  */
-export declare type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> & Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'shape' | 'size' | 'value'>> & {
+export declare type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> & Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size' | 'value'>> & {
     /**
      * Event handler from TagGroup context that allows TagGroup to dismiss the tag
      */
     handleTagDismiss: TagDismissHandler<Value>;
+    /**
+     * Event handler from TagGroup context that allows TagGroup to select the tag
+     */
+    handleTagSelect?: TagSelectHandler<Value>;
+    /**
+     * Selected values from TagGroup context
+     */
+    selectedValues: Value[];
     /**
      * id to assign to InteractionTagPrimary
      */
@@ -214,7 +233,7 @@ export declare const tagGroupClassNames: SlotClassNames<TagGroupSlots>;
 /**
  * Context shared between TagGroup and its children components
  */
-declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'role'>>;
+declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>>;
 
 export declare type TagGroupContextValues = {
     tagGroup: TagGroupContextValue;
@@ -228,6 +247,10 @@ export declare type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlo
      * Callback for when a tag is dismissed
      */
     onDismiss?: TagDismissHandler<Value>;
+    /**
+     * Sets selected values for an uncontrolled component.
+     */
+    defaultSelectedValues?: Value[];
     /**
      * A TagGroup can show that it cannot be interacted with.
      *
@@ -237,6 +260,14 @@ export declare type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlo
     size?: TagSize;
     appearance?: TagAppearance;
     dismissible?: boolean;
+    /**
+     * Callback for when a tag is selected
+     */
+    onTagSelect?: EventHandler<TagSelectData<Value>>;
+    /**
+     * Values of the selected tags
+     */
+    selectedValues?: Value[];
 };
 
 export declare type TagGroupSlots = {
@@ -246,8 +277,9 @@ export declare type TagGroupSlots = {
 /**
  * State used in rendering TagGroup
  */
-export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'disabled' | 'size' | 'appearance' | 'dismissible'>> & {
+export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'appearance' | 'dismissible' | 'disabled' | 'size' | 'selectedValues'>> & {
     handleTagDismiss: TagDismissHandler<Value>;
+    handleTagSelect?: TagSelectHandler<Value>;
     role?: React_2.AriaRole;
 };
 
@@ -273,6 +305,13 @@ export declare type TagProps<Value = string> = ComponentProps<Partial<TagSlots>>
      * @default false
      */
     dismissible?: boolean;
+    /**
+     * An InteractionTag can be selected.
+     * Note: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.
+     *
+     * @default false
+     */
+    selected?: boolean;
     /**
      * A Tag can have rounded or circular shape.
      *
@@ -291,6 +330,13 @@ export declare type TagProps<Value = string> = ComponentProps<Partial<TagSlots>>
     value?: Value;
 };
 
+declare type TagSelectData<Value = TagValue> = EventData<'click', React_2.MouseEvent<HTMLButtonElement>> & {
+    value: Value;
+    selectedValues?: Value[];
+};
+
+declare type TagSelectHandler<Value = TagValue> = EventHandler<TagSelectData<Value>>;
+
 export declare type TagShape = 'rounded' | 'circular';
 
 export declare type TagSize = 'extra-small' | 'small' | 'medium';
@@ -322,7 +368,7 @@ export declare type TagSlots = {
 /**
  * State used in rendering Tag
  */
-export declare type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'>> & UseTagAvatarContextValuesOptions;
+export declare type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'selected' | 'shape' | 'size'>> & UseTagAvatarContextValuesOptions;
 
 export declare type TagValue = string;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/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":[],"rangeMappings":";;","mappings":"AAkDA;;CAEC,GACD,WAWI"}
+{"version":3,"sources":["../src/components/InteractionTag/InteractionTag.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport { TagAppearance, TagShape, TagSize, TagValue, TagDismissHandler, TagSelectHandler } 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 be selected.\n   * Note: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.\n   *\n   * @default false\n   */\n  selected?: 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' | 'selected' | '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     * Event handler from TagGroup context that allows TagGroup to select the tag\n     */\n    handleTagSelect?: TagSelectHandler<Value>;\n\n    /**\n     * Selected values from TagGroup context\n     */\n    selectedValues: Value[];\n\n    /**\n     * id to assign to InteractionTagPrimary\n     */\n    interactionTagPrimaryId: string;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA0DA;;CAEC,GACD,WAqBI"}

package/lib/components/InteractionTag/useInteractionTag.js

@@ -10,15 +10,18 @@ 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, disabled: contextDisabled, appearance: contextAppearance } = useTagGroupContext_unstable();
+    const { handleTagDismiss, handleTagSelect, size: contextSize, disabled: contextDisabled, appearance: contextAppearance, selectedValues = [] } = useTagGroupContext_unstable();
     const id = useId('fui-InteractionTag-', props.id);
     const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');
-    const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
+    const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, selected = false, shape = 'rounded', size = contextSize, value = id } = props;
     return {
         appearance,
         disabled: contextDisabled ? true : disabled,
         handleTagDismiss,
+        handleTagSelect,
         interactionTagPrimaryId,
+        selected: selectedValues.includes(value) || selected,
+        selectedValues,
         shape,
         size,
         value,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/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 {\n    handleTagDismiss,\n    size: contextSize,\n    disabled: contextDisabled,\n    appearance: contextAppearance,\n  } = 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: contextDisabled ? true : 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        disabled: contextDisabled ? true : disabled,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","disabled","contextDisabled","appearance","contextAppearance","id","interactionTagPrimaryId","shape","value","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,EACJC,gBAAgB,EAChBC,MAAMC,WAAW,EACjBC,UAAUC,eAAe,EACzBC,YAAYC,iBAAiB,EAC9B,GAAGV;IAEJ,MAAMW,KAAKb,MAAM,uBAAuBI,MAAMS,EAAE;IAEhD,MAAMC,0BAA0Bd,MAAM;IAEtC,MAAM,EACJW,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CH,WAAW,KAAK,EAChBM,QAAQ,SAAS,EACjBR,OAAOC,WAAW,EAClBQ,QAAQH,EAAE,EACX,GAAGT;IAEJ,OAAO;QACLO;QACAF,UAAUC,kBAAkB,OAAOD;QACnCH;QACAQ;QACAC;QACAR;QACAS;QAEAC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMjB,KAAKkB,MAAM,CACfpB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRK,UAAUC,kBAAkB,OAAOD;YACnCI;QACF,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTag/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 {\n    handleTagDismiss,\n    handleTagSelect,\n    size: contextSize,\n    disabled: contextDisabled,\n    appearance: contextAppearance,\n    selectedValues = [],\n  } = 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    selected = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  return {\n    appearance,\n    disabled: contextDisabled ? true : disabled,\n    handleTagDismiss,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: selectedValues.includes(value) || selected,\n    selectedValues,\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        disabled: contextDisabled ? true : disabled,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","handleTagSelect","size","contextSize","disabled","contextDisabled","appearance","contextAppearance","selectedValues","id","interactionTagPrimaryId","selected","shape","value","includes","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,EACJC,gBAAgB,EAChBC,eAAe,EACfC,MAAMC,WAAW,EACjBC,UAAUC,eAAe,EACzBC,YAAYC,iBAAiB,EAC7BC,iBAAiB,EAAE,EACpB,GAAGZ;IAEJ,MAAMa,KAAKf,MAAM,uBAAuBI,MAAMW,EAAE;IAEhD,MAAMC,0BAA0BhB,MAAM;IAEtC,MAAM,EACJY,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CH,WAAW,KAAK,EAChBO,WAAW,KAAK,EAChBC,QAAQ,SAAS,EACjBV,OAAOC,WAAW,EAClBU,QAAQJ,EAAE,EACX,GAAGX;IAEJ,OAAO;QACLQ;QACAF,UAAUC,kBAAkB,OAAOD;QACnCJ;QACAC;QACAS;QACAC,UAAUH,eAAeM,QAAQ,CAACD,UAAUF;QAC5CH;QACAI;QACAV;QACAW;QAEAE,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMrB,KAAKsB,MAAM,CACfxB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRM,UAAUC,kBAAkB,OAAOD;YACnCK;QACF,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/InteractionTag/useInteractionTagContextValues.js

@@ -1,12 +1,15 @@
 import * as React from 'react';
 export function useInteractionTagContextValues_unstable(state) {
-    const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } = state;
+    const { appearance, disabled, handleTagDismiss, handleTagSelect, interactionTagPrimaryId, selected, selectedValues, shape, size, value } = state;
     return {
         interactionTag: React.useMemo(()=>({
                 appearance,
                 disabled,
                 handleTagDismiss,
+                handleTagSelect,
                 interactionTagPrimaryId,
+                selected,
+                selectedValues,
                 shape,
                 size,
                 value
@@ -14,7 +17,10 @@ export function useInteractionTagContextValues_unstable(state) {
             appearance,
             disabled,
             handleTagDismiss,
+            handleTagSelect,
             interactionTagPrimaryId,
+            selected,
+            selectedValues,
             shape,
             size,
             value

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/useInteractionTagContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { InteractionTagState, InteractionTagContextValues } from './InteractionTag.types';\n\nexport function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues {\n  const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } = state;\n\n  return {\n    interactionTag: React.useMemo(\n      () => ({ appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value }),\n      [appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value],\n    ),\n  };\n}\n"],"names":["React","useInteractionTagContextValues_unstable","state","appearance","disabled","handleTagDismiss","interactionTagPrimaryId","shape","size","value","interactionTag","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,uBAAuB,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGP;IAEhG,OAAO;QACLQ,gBAAgBV,MAAMW,OAAO,CAC3B,IAAO,CAAA;gBAAER;gBAAYC;gBAAUC;gBAAkBC;gBAAyBC;gBAAOC;gBAAMC;YAAM,CAAA,GAC7F;YAACN;YAAYC;YAAUC;YAAkBC;YAAyBC;YAAOC;YAAMC;SAAM;IAEzF;AACF"}
+{"version":3,"sources":["../src/components/InteractionTag/useInteractionTagContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { InteractionTagState, InteractionTagContextValues } from './InteractionTag.types';\n\nexport function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues {\n  const {\n    appearance,\n    disabled,\n    handleTagDismiss,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected,\n    selectedValues,\n    shape,\n    size,\n    value,\n  } = state;\n\n  return {\n    interactionTag: React.useMemo(\n      () => ({\n        appearance,\n        disabled,\n        handleTagDismiss,\n        handleTagSelect,\n        interactionTagPrimaryId,\n        selected,\n        selectedValues,\n        shape,\n        size,\n        value,\n      }),\n      [\n        appearance,\n        disabled,\n        handleTagDismiss,\n        handleTagSelect,\n        interactionTagPrimaryId,\n        selected,\n        selectedValues,\n        shape,\n        size,\n        value,\n      ],\n    ),\n  };\n}\n"],"names":["React","useInteractionTagContextValues_unstable","state","appearance","disabled","handleTagDismiss","handleTagSelect","interactionTagPrimaryId","selected","selectedValues","shape","size","value","interactionTag","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,gBAAgB,EAChBC,eAAe,EACfC,uBAAuB,EACvBC,QAAQ,EACRC,cAAc,EACdC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGV;IAEJ,OAAO;QACLW,gBAAgBb,MAAMc,OAAO,CAC3B,IAAO,CAAA;gBACLX;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;YACF,CAAA,GACA;YACET;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;SACD;IAEL;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/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":[],"rangeMappings":";;","mappings":"AA2CA;;CAEC,GACD,WAKmC"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/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' | 'selected' | 'shape' | 'size'> &\n      Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>\n  > &\n  UseTagAvatarContextValuesOptions;\n"],"names":[],"rangeMappings":";;","mappings":"AA2CA;;CAEC,GACD,WAKmC"}

package/lib/components/InteractionTagPrimary/useInteractionTagPrimary.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';
 import { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';
 const avatarSizeMap = {
     medium: 28,
@@ -19,14 +19,21 @@ const avatarShapeMap = {
  * @param props - props from this instance of InteractionTagPrimary
  * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary
  */ export const useInteractionTagPrimary_unstable = (props, ref)=>{
-    const { appearance, disabled, interactionTagPrimaryId, shape, size } = useInteractionTagContext_unstable();
+    const { appearance, disabled, handleTagSelect, interactionTagPrimaryId, selected: contextSelected, selectedValues, shape, size, value } = useInteractionTagContext_unstable();
     const { hasSecondaryAction = false } = props;
+    const onClick = useEventCallback(mergeCallbacks(props === null || props === void 0 ? void 0 : props.onClick, (event)=>handleTagSelect === null || handleTagSelect === void 0 ? void 0 : handleTagSelect(event, {
+            type: 'click',
+            event,
+            value,
+            selectedValues
+        })));
     return {
         appearance,
         avatarShape: avatarShapeMap[shape],
         avatarSize: avatarSizeMap[size],
         disabled,
         hasSecondaryAction,
+        selected: contextSelected,
         shape,
         size,
         components: {
@@ -40,6 +47,10 @@ const avatarShapeMap = {
             ref,
             disabled,
             id: interactionTagPrimaryId,
+            ...handleTagSelect !== undefined && {
+                'aria-pressed': contextSelected
+            },
+            onClick,
             ...props
         }), {
             elementType: 'button'

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimary.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagPrimaryProps, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\nconst avatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst avatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render InteractionTagPrimary.\n *\n * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,\n * before being passed to renderInteractionTagPrimary_unstable.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */\nexport const useInteractionTagPrimary_unstable = (\n  props: InteractionTagPrimaryProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagPrimaryState => {\n  const { appearance, disabled, interactionTagPrimaryId, shape, size } = useInteractionTagContext_unstable();\n  const { hasSecondaryAction = false } = props;\n\n  return {\n    appearance,\n    avatarShape: avatarShapeMap[shape],\n    avatarSize: avatarSizeMap[size],\n    disabled,\n    hasSecondaryAction,\n    shape,\n    size,\n\n    components: {\n      root: 'button',\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        disabled,\n        id: interactionTagPrimaryId,\n        ...props,\n      }),\n      { elementType: 'button' },\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  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useInteractionTagContext_unstable","avatarSizeMap","medium","small","avatarShapeMap","rounded","circular","useInteractionTagPrimary_unstable","props","ref","appearance","disabled","interactionTagPrimaryId","shape","size","hasSecondaryAction","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","always","id","elementType","optional","renderByDefault","defaultProps","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,uBAAuB,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGd;IACvE,MAAM,EAAEe,qBAAqB,KAAK,EAAE,GAAGP;IAEvC,OAAO;QACLE;QACAM,aAAaZ,cAAc,CAACS,MAAM;QAClCI,YAAYhB,aAAa,CAACa,KAAK;QAC/BH;QACAI;QACAF;QACAC;QAEAI,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;QACjB;QAEAJ,MAAMpB,KAAKyB,MAAM,CACf1B,yBAAyB,UAAU;YACjCW;YACAE;YACAc,IAAIb;YACJ,GAAGJ,KAAK;QACV,IACA;YAAEkB,aAAa;QAAS;QAG1BN,OAAOrB,KAAK4B,QAAQ,CAACnB,MAAMY,KAAK,EAAE;YAAEM,aAAa;QAAO;QACxDL,MAAMtB,KAAK4B,QAAQ,CAACnB,MAAMa,IAAI,EAAE;YAAEK,aAAa;QAAO;QACtDJ,aAAavB,KAAK4B,QAAQ,CAACnB,MAAMc,WAAW,EAAE;YAC5CM,iBAAiB;YACjBC,cAAc;gBACZC,UAAUtB,MAAMsB,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAH,eAAexB,KAAK4B,QAAQ,CAACnB,MAAMe,aAAa,EAAE;YAAEG,aAAa;QAAO;IAC1E;AACF,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimary.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { InteractionTagPrimaryProps, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\nconst avatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst avatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render InteractionTagPrimary.\n *\n * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,\n * before being passed to renderInteractionTagPrimary_unstable.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */\nexport const useInteractionTagPrimary_unstable = (\n  props: InteractionTagPrimaryProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagPrimaryState => {\n  const {\n    appearance,\n    disabled,\n    handleTagSelect,\n    interactionTagPrimaryId,\n    selected: contextSelected,\n    selectedValues,\n    shape,\n    size,\n    value,\n  } = useInteractionTagContext_unstable();\n  const { hasSecondaryAction = false } = props;\n\n  const onClick = useEventCallback(\n    mergeCallbacks(props?.onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      handleTagSelect?.(event, { type: 'click', event, value, selectedValues }),\n    ),\n  );\n\n  return {\n    appearance,\n    avatarShape: avatarShapeMap[shape],\n    avatarSize: avatarSizeMap[size],\n    disabled,\n    hasSecondaryAction,\n    selected: contextSelected,\n    shape,\n    size,\n\n    components: {\n      root: 'button',\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        disabled,\n        id: interactionTagPrimaryId,\n        ...(handleTagSelect !== undefined && { 'aria-pressed': contextSelected }),\n        onClick,\n        ...props,\n      }),\n      { elementType: 'button' },\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  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","useInteractionTagContext_unstable","avatarSizeMap","medium","small","avatarShapeMap","rounded","circular","useInteractionTagPrimary_unstable","props","ref","appearance","disabled","handleTagSelect","interactionTagPrimaryId","selected","contextSelected","selectedValues","shape","size","value","hasSecondaryAction","onClick","event","type","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","always","id","undefined","elementType","optional","renderByDefault","defaultProps","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE7G,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACvBC,UAAUC,eAAe,EACzBC,cAAc,EACdC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGnB;IACJ,MAAM,EAAEoB,qBAAqB,KAAK,EAAE,GAAGZ;IAEvC,MAAMa,UAAUtB,iBACdF,eAAeW,kBAAAA,4BAAAA,MAAOa,OAAO,EAAE,CAACC,QAC9BV,4BAAAA,sCAAAA,gBAAkBU,OAAO;YAAEC,MAAM;YAASD;YAAOH;YAAOH;QAAe;IAI3E,OAAO;QACLN;QACAc,aAAapB,cAAc,CAACa,MAAM;QAClCQ,YAAYxB,aAAa,CAACiB,KAAK;QAC/BP;QACAS;QACAN,UAAUC;QACVE;QACAC;QAEAQ,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;QACjB;QAEAJ,MAAM7B,KAAKkC,MAAM,CACfpC,yBAAyB,UAAU;YACjCa;YACAE;YACAsB,IAAIpB;YACJ,GAAID,oBAAoBsB,aAAa;gBAAE,gBAAgBnB;YAAgB,CAAC;YACxEM;YACA,GAAGb,KAAK;QACV,IACA;YAAE2B,aAAa;QAAS;QAG1BP,OAAO9B,KAAKsC,QAAQ,CAAC5B,MAAMoB,KAAK,EAAE;YAAEO,aAAa;QAAO;QACxDN,MAAM/B,KAAKsC,QAAQ,CAAC5B,MAAMqB,IAAI,EAAE;YAAEM,aAAa;QAAO;QACtDL,aAAahC,KAAKsC,QAAQ,CAAC5B,MAAMsB,WAAW,EAAE;YAC5CO,iBAAiB;YACjBC,cAAc;gBACZC,UAAU/B,MAAM+B,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAJ,eAAejC,KAAKsC,QAAQ,CAAC5B,MAAMuB,aAAa,EAAE;YAAEI,aAAa;QAAO;IAC1E;AACF,EAAE"}

package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js

@@ -109,6 +109,30 @@ const useRootStyles = /*#__PURE__*/__styles({
     Bqrx1nm: "fq7113v",
     kx9iu6: "fp3oj7s"
   },
+  selected: {
+    Bgh53k4: 0,
+    B2eet1l: 0,
+    De3pzq: 0,
+    Bcmaq0h: 0,
+    gk0gix: 0,
+    B20660r: 0,
+    B8a6bjv: 0,
+    Bpptf2m: 0,
+    e5kdtc: 0,
+    Bkjc3bi: 0,
+    ayd6f0: "f1tdnksq",
+    sj55zd: "f1phragk",
+    g2u3we: "fk9qgl1",
+    h3c5rm: ["f1vfbj5f", "f1qpacp7"],
+    B9xav0g: "fdf0ba2",
+    zhjwy3: ["f1qpacp7", "f1vfbj5f"],
+    Jwef8y: "f15wkkf3",
+    Bi91k9c: "f1rq72xc",
+    I6i3kg: "f10jvnl4",
+    ecr2s2: "fsp1bjw",
+    lj723h: "f18otbis",
+    weioyw: "f3wpj5r"
+  },
   medium: {
     z189sj: ["f18k1jr3", "f1rtp3s9"]
   },
@@ -119,9 +143,11 @@ const useRootStyles = /*#__PURE__*/__styles({
     z189sj: ["fwiuce9", "f15vdbe4"]
   }
 }, {
-  d: [".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}"],
-  h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fqbfmpb:hover .fui-Icon-filled{color:var(--colorNeutralForeground2BrandHover);}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f1yj72w4:hover{background-color:var(--colorBrandBackground2Hover);}", ".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}"],
-  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".fvpl5sy:active .fui-Icon-filled{display:inline;}", ".f1xblose:active .fui-Icon-filled{color:var(--colorNeutralForeground2BrandPressed);}", ".f8upcvr:active .fui-Icon-regular{display:none;}", ".fy3sl2y:active{background-color:var(--colorBrandBackground2Pressed);}", ".fryz5bw:active{color:var(--colorCompoundBrandForeground1Pressed);}"],
+  d: [".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", [".f1tdnksq{background:var(--colorBrandBackground);}", {
+    p: -2
+  }], ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fk9qgl1{border-top-color:var(--colorBrandStroke1);}", ".f1vfbj5f{border-right-color:var(--colorBrandStroke1);}", ".f1qpacp7{border-left-color:var(--colorBrandStroke1);}", ".fdf0ba2{border-bottom-color:var(--colorBrandStroke1);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}"],
+  h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fqbfmpb:hover .fui-Icon-filled{color:var(--colorNeutralForeground2BrandHover);}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f1yj72w4:hover{background-color:var(--colorBrandBackground2Hover);}", ".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f10jvnl4:hover .fui-Icon-filled{color:var(--colorNeutralForegroundOnBrand);}"],
+  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".fvpl5sy:active .fui-Icon-filled{display:inline;}", ".f1xblose:active .fui-Icon-filled{color:var(--colorNeutralForeground2BrandPressed);}", ".f8upcvr:active .fui-Icon-regular{display:none;}", ".fy3sl2y:active{background-color:var(--colorBrandBackground2Pressed);}", ".fryz5bw:active{color:var(--colorCompoundBrandForeground1Pressed);}", ".fsp1bjw:active{background-color:var(--colorBrandBackgroundPressed);}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f3wpj5r:active .fui-Icon-filled{color:var(--colorNeutralForegroundOnBrand);}"],
   m: [["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}", {
@@ -213,11 +239,13 @@ export const useInteractionTagPrimaryStyles_unstable = state => {
   const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
   const rootCircularContrastStyles = useRootCircularContrastStyles();
   const {
+    disabled,
     shape,
     size,
-    appearance
+    appearance,
+    selected
   } = state;
-  state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);
+  state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);
   if (state.media) {
     state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);
   }

package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","withoutSecondaryAction","Bglfifq","hxi8he","B33s42s","G4pote","gw1m2h","w20ur","Byczuf6","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","medium","z189sj","small","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","shape","size","className","hasSecondaryAction","disabled","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n    root: 'fui-InteractionTagPrimary',\n    media: 'fui-InteractionTagPrimary__media',\n    icon: 'fui-InteractionTagPrimary__icon',\n    primaryText: 'fui-InteractionTagPrimary__primaryText',\n    secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n    // reset default button style:\n    color: 'inherit',\n    fontFamily: 'inherit',\n    padding: '0px',\n    borderStyle: 'none',\n    appearance: 'button',\n    textAlign: 'unset',\n    backgroundColor: 'transparent',\n    display: 'inline-grid',\n    height: '100%',\n    alignItems: 'center',\n    gridTemplateAreas: `\n  \"media primary  \"\n  \"media secondary\"\n  `,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        zIndex: 1\n    })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusMedium,\n    /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            borderTop: `${tokens.strokeWidthThin} solid`,\n            position: 'absolute',\n            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-1px',\n            borderTopLeftRadius: tokens.borderRadiusMedium,\n            borderTopRightRadius: tokens.borderRadiusMedium\n        }\n    }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusCircular,\n    /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            borderTop: `${tokens.strokeWidthThin} solid`,\n            borderLeft: `${tokens.strokeWidthThin} solid`,\n            position: 'absolute',\n            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-1px',\n            borderTopLeftRadius: tokens.borderRadiusCircular,\n            borderBottomLeftRadius: tokens.borderRadiusCircular\n        }\n    }\n});\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */ const useRootCircularContrastStyles = makeStyles({\n    withoutSecondaryAction: {\n        '@media (forced-colors: active)': {\n            position: 'relative',\n            '::before': {\n                borderRight: `${tokens.strokeWidthThin} solid transparent`,\n                borderTopRightRadius: tokens.borderRadiusCircular,\n                borderBottomRightRadius: tokens.borderRadiusCircular\n            }\n        }\n    }\n});\nconst useRootStyles = makeStyles({\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorNeutralBackground3Hover,\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground3Pressed,\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            color: tokens.colorNeutralForeground2Hover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline',\n                color: tokens.colorNeutralForeground2BrandHover\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground2Pressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline',\n                color: tokens.colorNeutralForeground2BrandPressed\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2,\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorBrandBackground2Hover,\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            backgroundColor: tokens.colorBrandBackground2Pressed,\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    medium: {\n        paddingRight: '7px'\n    },\n    small: {\n        paddingRight: '5px'\n    },\n    'extra-small': {\n        paddingRight: '5px'\n    }\n});\nconst useRootDisabledAppearances = makeStyles({\n    filled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    },\n    outline: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    },\n    brand: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    }\n});\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n    medium: {\n        paddingLeft: '7px'\n    },\n    small: {\n        paddingLeft: '5px'\n    },\n    'extra-small': {\n        paddingLeft: '5px'\n    }\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n    base: {\n        borderTopRightRadius: tokens.borderRadiusNone,\n        borderBottomRightRadius: tokens.borderRadiusNone,\n        borderRightStyle: 'none',\n        ...createCustomFocusIndicatorStyle({\n            borderTopRightRadius: tokens.borderRadiusNone,\n            borderBottomRightRadius: tokens.borderRadiusNone\n        })\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    'extra-small': {\n        paddingRight: tokens.spacingHorizontalSNudge\n    }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n    'use no memo';\n    const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n    const rootCircularBaseClassName = useRootCircularBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledAppearances = useRootDisabledAppearances();\n    const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n    const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n    const iconStyles = useIconStyles();\n    const mediaStyles = useMediaStyles();\n    const primaryTextStyles = usePrimaryTextStyles();\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const rootCircularContrastStyles = useRootCircularContrastStyles();\n    const { shape, size, appearance } = state;\n    state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n    }\n    if (state.primaryText) {\n        state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n    }\n    if (state.secondaryText) {\n        state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","withoutSecondaryAction","Bglfifq","hxi8he","B33s42s","G4pote","gw1m2h","w20ur","Byczuf6","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","medium","z189sj","small","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n    root: 'fui-InteractionTagPrimary',\n    media: 'fui-InteractionTagPrimary__media',\n    icon: 'fui-InteractionTagPrimary__icon',\n    primaryText: 'fui-InteractionTagPrimary__primaryText',\n    secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n    // reset default button style:\n    color: 'inherit',\n    fontFamily: 'inherit',\n    padding: '0px',\n    borderStyle: 'none',\n    appearance: 'button',\n    textAlign: 'unset',\n    backgroundColor: 'transparent',\n    display: 'inline-grid',\n    height: '100%',\n    alignItems: 'center',\n    gridTemplateAreas: `\n  \"media primary  \"\n  \"media secondary\"\n  `,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        zIndex: 1\n    })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusMedium,\n    /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            borderTop: `${tokens.strokeWidthThin} solid`,\n            position: 'absolute',\n            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-1px',\n            borderTopLeftRadius: tokens.borderRadiusMedium,\n            borderTopRightRadius: tokens.borderRadiusMedium\n        }\n    }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusCircular,\n    /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            borderTop: `${tokens.strokeWidthThin} solid`,\n            borderLeft: `${tokens.strokeWidthThin} solid`,\n            position: 'absolute',\n            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-1px',\n            borderTopLeftRadius: tokens.borderRadiusCircular,\n            borderBottomLeftRadius: tokens.borderRadiusCircular\n        }\n    }\n});\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */ const useRootCircularContrastStyles = makeStyles({\n    withoutSecondaryAction: {\n        '@media (forced-colors: active)': {\n            position: 'relative',\n            '::before': {\n                borderRight: `${tokens.strokeWidthThin} solid transparent`,\n                borderTopRightRadius: tokens.borderRadiusCircular,\n                borderBottomRightRadius: tokens.borderRadiusCircular\n            }\n        }\n    }\n});\nconst useRootStyles = makeStyles({\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorNeutralBackground3Hover,\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground3Pressed,\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            color: tokens.colorNeutralForeground2Hover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline',\n                color: tokens.colorNeutralForeground2BrandHover\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground2Pressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline',\n                color: tokens.colorNeutralForeground2BrandPressed\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2,\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorBrandBackground2Hover,\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            backgroundColor: tokens.colorBrandBackground2Pressed,\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    selected: {\n        background: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand,\n        ...shorthands.borderColor(tokens.colorBrandStroke1),\n        ':hover': {\n            backgroundColor: tokens.colorBrandBackgroundHover,\n            color: tokens.colorNeutralForegroundOnBrand,\n            [`& .${iconFilledClassName}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorBrandBackgroundPressed,\n            color: tokens.colorNeutralForegroundOnBrand,\n            [`& .${iconFilledClassName}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        }\n    },\n    medium: {\n        paddingRight: '7px'\n    },\n    small: {\n        paddingRight: '5px'\n    },\n    'extra-small': {\n        paddingRight: '5px'\n    }\n});\nconst useRootDisabledAppearances = makeStyles({\n    filled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    },\n    outline: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    },\n    brand: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    }\n});\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n    medium: {\n        paddingLeft: '7px'\n    },\n    small: {\n        paddingLeft: '5px'\n    },\n    'extra-small': {\n        paddingLeft: '5px'\n    }\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n    base: {\n        borderTopRightRadius: tokens.borderRadiusNone,\n        borderBottomRightRadius: tokens.borderRadiusNone,\n        borderRightStyle: 'none',\n        ...createCustomFocusIndicatorStyle({\n            borderTopRightRadius: tokens.borderRadiusNone,\n            borderBottomRightRadius: tokens.borderRadiusNone\n        })\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    'extra-small': {\n        paddingRight: tokens.spacingHorizontalSNudge\n    }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n    'use no memo';\n    const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n    const rootCircularBaseClassName = useRootCircularBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledAppearances = useRootDisabledAppearances();\n    const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n    const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n    const iconStyles = useIconStyles();\n    const mediaStyles = useMediaStyles();\n    const primaryTextStyles = usePrimaryTextStyles();\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const rootCircularContrastStyles = useRootCircularContrastStyles();\n    const { disabled, shape, size, appearance, selected } = state;\n    state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n    }\n    if (state.primaryText) {\n        state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n    }\n    if (state.secondaryText) {\n        state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,aAAa,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,6BAA6B,QAAQ,4BAA4B;AAC/H,OAAO,MAAMC,+BAA+B,GAAG;EAC3CC,IAAI,EAAE,2BAA2B;EACjCC,KAAK,EAAE,kCAAkC;EACzCC,IAAI,EAAE,iCAAiC;EACvCC,WAAW,EAAE,wCAAwC;EACrDC,aAAa,EAAE;AACnB,CAAC;AACD,MAAMC,UAAU,GAAG;EACf;EACAC,KAAK,EAAE,SAAS;EAChBC,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,KAAK;EACdC,WAAW,EAAE,MAAM;EACnBC,UAAU,EAAE,QAAQ;EACpBC,SAAS,EAAE,OAAO;EAClBC,eAAe,EAAE,aAAa;EAC9BC,OAAO,EAAE,aAAa;EACtBC,MAAM,EAAE,MAAM;EACdC,UAAU,EAAE,QAAQ;EACpBC,iBAAiB,EAAE;AACvB;AACA;AACA,GAAG;EACCC,MAAM,EAAE,GAAGzB,MAAM,CAAC0B,eAAe,UAAU1B,MAAM,CAAC2B,sBAAsB,EAAE;EAC1E,iBAAG5B,+BAA+B,CAAC;IAC/B6B,OAAO,EAAE,GAAG5B,MAAM,CAAC6B,gBAAgB,UAAU7B,MAAM,CAAC8B,iBAAiB,EAAE;IACvEC,MAAM,EAAE;EACZ,CAAC;AACL,CAAC;AACD,MAAMC,2BAA2B,gBAAGrC,aAAA;EAAAsC,CAAA;EAAAC,CAAA;AAAA,CAoBnC,CAAC;AACF,MAAMC,4BAA4B,gBAAGxC,aAAA;EAAAsC,CAAA;EAAAC,CAAA;AAAA,CAqBpC,CAAC;AACF;AACA;AACA;AAAI,MAAME,6BAA6B,gBAAGxC,QAAA;EAAAyC,sBAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAC,CAAA;IAAAD,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAWzC,CAAC;AACF,MAAME,aAAa,gBAAGnD,QAAA;EAAAoD,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA7B,OAAA;IAAAqB,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAS,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAU,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAX,OAAA;IAAAC,MAAA;EAAA;EAAAW,KAAA;IAAAnB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAY,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAtB,MAAA;IAAAuB,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA7B,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAT,MAAA;IAAAC,OAAA;IAAAU,MAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAW,MAAA;EAAA;EAAAc,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAArC,CAAA;EAAA;EAAAsC,CAAA;EAAAC,CAAA;EAAAxC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2GrB,CAAC;AACF,MAAMyC,0BAA0B,gBAAG1F,QAAA;EAAAoD,MAAA;IAAAuC,OAAA;IAAAtC,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAjC,OAAA;IAAA2D,OAAA;IAAAtC,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,KAAA;IAAAmB,OAAA;IAAAtC,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAsB,CAAA;AAAA,CAmBlC,CAAC;AACF;AACA;AACA;AAAI,MAAMK,yBAAyB,gBAAG5F,QAAA;EAAAoF,MAAA;IAAAS,MAAA;EAAA;EAAAP,KAAA;IAAAO,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAN,CAAA;AAAA,CAUrC,CAAC;AACF;AACA;AACA;AAAI,MAAMO,gCAAgC,gBAAG9F,QAAA;EAAA+F,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAhB,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAmB5C,CAAC;AACF,OAAO,MAAMc,uCAAuC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,wBAAwB,GAAGnE,2BAA2B,CAAC,CAAC;EAC9D,MAAMoE,yBAAyB,GAAGjE,4BAA4B,CAAC,CAAC;EAChE,MAAMkE,UAAU,GAAGtD,aAAa,CAAC,CAAC;EAClC,MAAMuD,uBAAuB,GAAGhB,0BAA0B,CAAC,CAAC;EAC5D,MAAMiB,sBAAsB,GAAGf,yBAAyB,CAAC,CAAC;EAC1D,MAAMgB,6BAA6B,GAAGd,gCAAgC,CAAC,CAAC;EACxE,MAAMe,UAAU,GAAGtG,aAAa,CAAC,CAAC;EAClC,MAAMuG,WAAW,GAAGtG,cAAc,CAAC,CAAC;EACpC,MAAMuG,iBAAiB,GAAGtG,oBAAoB,CAAC,CAAC;EAChD,MAAMuG,0BAA0B,GAAGtG,6BAA6B,CAAC,CAAC;EAClE,MAAMuG,0BAA0B,GAAGzE,6BAA6B,CAAC,CAAC;EAClE,MAAM;IAAE0E,QAAQ;IAAEC,KAAK;IAAEC,IAAI;IAAE9F,UAAU;IAAEmD;EAAS,CAAC,GAAG6B,KAAK;EAC7DA,KAAK,CAAC1F,IAAI,CAACyG,SAAS,GAAGpH,YAAY,CAACU,+BAA+B,CAACC,IAAI,EAAEuG,KAAK,KAAK,SAAS,GAAGZ,wBAAwB,GAAGC,yBAAyB,EAAEW,KAAK,KAAK,UAAU,IAAI,CAACb,KAAK,CAACgB,kBAAkB,IAAIL,0BAA0B,CAACxE,sBAAsB,EAAEyE,QAAQ,GAAGR,uBAAuB,CAACpF,UAAU,CAAC,GAAGmF,UAAU,CAACnF,UAAU,CAAC,EAAEmD,QAAQ,IAAI,CAACyC,QAAQ,IAAIT,UAAU,CAAChC,QAAQ,EAAEgC,UAAU,CAACW,IAAI,CAAC,EAAE,CAACd,KAAK,CAACzF,KAAK,IAAI,CAACyF,KAAK,CAACxF,IAAI,IAAI6F,sBAAsB,CAACS,IAAI,CAAC,EAAEd,KAAK,CAACgB,kBAAkB,IAAIV,6BAA6B,CAACb,IAAI,EAAEO,KAAK,CAACgB,kBAAkB,IAAIV,6BAA6B,CAACQ,IAAI,CAAC,EAAEd,KAAK,CAAC1F,IAAI,CAACyG,SAAS,CAAC;EAC1lB,IAAIf,KAAK,CAACzF,KAAK,EAAE;IACbyF,KAAK,CAACzF,KAAK,CAACwG,SAAS,GAAGpH,YAAY,CAACU,+BAA+B,CAACE,KAAK,EAAEiG,WAAW,CAACf,IAAI,EAAEe,WAAW,CAACM,IAAI,CAAC,EAAEd,KAAK,CAACzF,KAAK,CAACwG,SAAS,CAAC;EAC3I;EACA,IAAIf,KAAK,CAACxF,IAAI,EAAE;IACZwF,KAAK,CAACxF,IAAI,CAACuG,SAAS,GAAGpH,YAAY,CAACU,+BAA+B,CAACG,IAAI,EAAE+F,UAAU,CAACd,IAAI,EAAEc,UAAU,CAACO,IAAI,CAAC,EAAEd,KAAK,CAACxF,IAAI,CAACuG,SAAS,CAAC;EACtI;EACA,IAAIf,KAAK,CAACvF,WAAW,EAAE;IACnBuF,KAAK,CAACvF,WAAW,CAACsG,SAAS,GAAGpH,YAAY,CAACU,+BAA+B,CAACI,WAAW,EAAEgG,iBAAiB,CAAChB,IAAI,EAAEgB,iBAAiB,CAACK,IAAI,CAAC,EAAEd,KAAK,CAACtF,aAAa,GAAG+F,iBAAiB,CAACQ,iBAAiB,GAAGR,iBAAiB,CAACS,oBAAoB,EAAElB,KAAK,CAACvF,WAAW,CAACsG,SAAS,CAAC;EAC7Q;EACA,IAAIf,KAAK,CAACtF,aAAa,EAAE;IACrBsF,KAAK,CAACtF,aAAa,CAACqG,SAAS,GAAGpH,YAAY,CAACU,+BAA+B,CAACK,aAAa,EAAEgG,0BAA0B,EAAEV,KAAK,CAACtF,aAAa,CAACqG,SAAS,CAAC;EAC1J;EACA,OAAOf,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagSecondary/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":[],"rangeMappings":";;","mappings":"AAYA;;CAEC,GACD,WAC2F"}
+{"version":3,"sources":["../src/components/InteractionTagSecondary/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' | 'selected' | 'shape' | 'size'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAYA;;CAEC,GACD,WACwG"}

package/lib/components/InteractionTagSecondary/useInteractionTagSecondary.js

@@ -12,7 +12,7 @@ import { useInteractionTagContext_unstable } from '../../contexts/interactionTag
  * @param props - props from this instance of InteractionTagSecondary
  * @param ref - reference to root HTMLButtonElement of InteractionTagSecondary
  */ export const useInteractionTagSecondary_unstable = (props, ref)=>{
-    const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } = useInteractionTagContext_unstable();
+    const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, selected, shape, size, value } = useInteractionTagContext_unstable();
     const id = useId('fui-InteractionTagSecondary-', props.id);
     const onClick = useEventCallback((ev)=>{
         var _props_onClick;
@@ -35,6 +35,7 @@ import { useInteractionTagContext_unstable } from '../../contexts/interactionTag
     return {
         appearance,
         disabled,
+        selected,
         shape,
         size,
         components: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot, useId } from '@fluentui/react-utilities';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { InteractionTagSecondaryProps, InteractionTagSecondaryState } from './InteractionTagSecondary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\n/**\n * Create the state required to render InteractionTagSecondary.\n *\n * The returned state can be modified with hooks such as useInteractionTagSecondaryStyles_unstable,\n * before being passed to renderInteractionTagSecondary_unstable.\n *\n * @param props - props from this instance of InteractionTagSecondary\n * @param ref - reference to root HTMLButtonElement of InteractionTagSecondary\n */\nexport const useInteractionTagSecondary_unstable = (\n  props: InteractionTagSecondaryProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagSecondaryState => {\n  const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } =\n    useInteractionTagContext_unstable();\n\n  const id = useId('fui-InteractionTagSecondary-', props.id);\n\n  const onClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props?.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const onKeyDown = 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  return {\n    appearance,\n    disabled,\n    shape,\n    size,\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        children: <DismissRegular />,\n        type: 'button',\n        disabled,\n        ref,\n        'aria-labelledby': `${interactionTagPrimaryId} ${id}`,\n        ...props,\n        id,\n        onClick,\n        onKeyDown,\n      }),\n      { elementType: 'button' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","useId","Delete","Backspace","DismissRegular","useInteractionTagContext_unstable","useInteractionTagSecondary_unstable","props","ref","appearance","disabled","handleTagDismiss","interactionTagPrimaryId","shape","size","value","id","onClick","ev","defaultPrevented","onKeyDown","key","components","root","always","children","type","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,KAAK,QAAQ,4BAA4B;AACpG,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,uBAAuB,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAC3FV;IAEF,MAAMW,KAAKf,MAAM,gCAAgCM,MAAMS,EAAE;IAEzD,MAAMC,UAAUlB,iBAAiB,CAACmB;YAChCX;QAAAA,kBAAAA,6BAAAA,iBAAAA,MAAOU,OAAO,cAAdV,qCAAAA,oBAAAA,OAAiBW;QACjB,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBR,6BAAAA,uCAAAA,iBAAmBO,IAAI;gBAAEH;YAAM;QACjC;IACF;IAEA,MAAMK,YAAYrB,iBAAiB,CAACmB;YAClCX;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOa,SAAS,cAAhBb,uCAAAA,sBAAAA,OAAmBW;QACnB,IAAI,CAACA,GAAGC,gBAAgB,IAAKD,CAAAA,GAAGG,GAAG,KAAKnB,UAAUgB,GAAGG,GAAG,KAAKlB,SAAQ,GAAI;YACvEQ,6BAAAA,uCAAAA,iBAAmBO,IAAI;gBAAEH;YAAM;QACjC;IACF;IAEA,OAAO;QACLN;QACAC;QACAG;QACAC;QACAQ,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMvB,KAAKwB,MAAM,CACf1B,yBAAyB,UAAU;YACjC2B,wBAAU,oBAACrB;YACXsB,MAAM;YACNhB;YACAF;YACA,mBAAmB,CAAC,EAAEI,wBAAwB,CAAC,EAAEI,GAAG,CAAC;YACrD,GAAGT,KAAK;YACRS;YACAC;YACAG;QACF,IACA;YAAEO,aAAa;QAAS;IAE5B;AACF,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot, useId } from '@fluentui/react-utilities';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { InteractionTagSecondaryProps, InteractionTagSecondaryState } from './InteractionTagSecondary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\n/**\n * Create the state required to render InteractionTagSecondary.\n *\n * The returned state can be modified with hooks such as useInteractionTagSecondaryStyles_unstable,\n * before being passed to renderInteractionTagSecondary_unstable.\n *\n * @param props - props from this instance of InteractionTagSecondary\n * @param ref - reference to root HTMLButtonElement of InteractionTagSecondary\n */\nexport const useInteractionTagSecondary_unstable = (\n  props: InteractionTagSecondaryProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagSecondaryState => {\n  const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, selected, shape, size, value } =\n    useInteractionTagContext_unstable();\n\n  const id = useId('fui-InteractionTagSecondary-', props.id);\n\n  const onClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props?.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const onKeyDown = 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  return {\n    appearance,\n    disabled,\n    selected,\n    shape,\n    size,\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        children: <DismissRegular />,\n        type: 'button',\n        disabled,\n        ref,\n        'aria-labelledby': `${interactionTagPrimaryId} ${id}`,\n        ...props,\n        id,\n        onClick,\n        onKeyDown,\n      }),\n      { elementType: 'button' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","useId","Delete","Backspace","DismissRegular","useInteractionTagContext_unstable","useInteractionTagSecondary_unstable","props","ref","appearance","disabled","handleTagDismiss","interactionTagPrimaryId","selected","shape","size","value","id","onClick","ev","defaultPrevented","onKeyDown","key","components","root","always","children","type","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,KAAK,QAAQ,4BAA4B;AACpG,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,uBAAuB,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAE,GACrGX;IAEF,MAAMY,KAAKhB,MAAM,gCAAgCM,MAAMU,EAAE;IAEzD,MAAMC,UAAUnB,iBAAiB,CAACoB;YAChCZ;QAAAA,kBAAAA,6BAAAA,iBAAAA,MAAOW,OAAO,cAAdX,qCAAAA,oBAAAA,OAAiBY;QACjB,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBT,6BAAAA,uCAAAA,iBAAmBQ,IAAI;gBAAEH;YAAM;QACjC;IACF;IAEA,MAAMK,YAAYtB,iBAAiB,CAACoB;YAClCZ;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOc,SAAS,cAAhBd,uCAAAA,sBAAAA,OAAmBY;QACnB,IAAI,CAACA,GAAGC,gBAAgB,IAAKD,CAAAA,GAAGG,GAAG,KAAKpB,UAAUiB,GAAGG,GAAG,KAAKnB,SAAQ,GAAI;YACvEQ,6BAAAA,uCAAAA,iBAAmBQ,IAAI;gBAAEH;YAAM;QACjC;IACF;IAEA,OAAO;QACLP;QACAC;QACAG;QACAC;QACAC;QACAQ,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMxB,KAAKyB,MAAM,CACf3B,yBAAyB,UAAU;YACjC4B,wBAAU,oBAACtB;YACXuB,MAAM;YACNjB;YACAF;YACA,mBAAmB,CAAC,EAAEI,wBAAwB,CAAC,EAAEK,GAAG,CAAC;YACrD,GAAGV,KAAK;YACRU;YACAC;YACAG;QACF,IACA;YAAEO,aAAa;QAAS;IAE5B;AACF,EAAE"}