@fluentui/react-tags 9.7.5 → 9.7.6

package/CHANGELOG.md

@@ -1,23 +1,41 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Thu, 21 Aug 2025 12:20:25 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Sep 2025 12:41:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.6)
+
+Mon, 08 Sep 2025 12:41:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.5..@fluentui/react-tags_v9.7.6)
+
+### Patches
+
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- fix: set default button type for dismissible ([PR #35088](https://github.com/microsoft/fluentui/pull/35088) by vgenaev@gmail.com)
+- Bump @fluentui/react-aria to v9.17.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-avatar to v9.9.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.5)
 
-Thu, 21 Aug 2025 12:20:25 GMT 
+Thu, 21 Aug 2025 12:25:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.4..@fluentui/react-tags_v9.7.5)
 
 ### Patches
 
 - fix: borders issues with small-circular and HC ([PR #34986](https://github.com/microsoft/fluentui/pull/34986) by vgenaev@gmail.com)
-- Bump @fluentui/react-aria to v9.16.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-avatar to v9.9.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-aria to v9.16.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-avatar to v9.9.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.4)
 

package/dist/index.d.ts

@@ -5,6 +5,7 @@ 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 type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -171,27 +172,27 @@ export declare type InteractionTagState<Value = TagValue> = ComponentState<Inter
 /**
  * Render the final JSX of InteractionTag
  */
-export declare const renderInteractionTag_unstable: (state: InteractionTagState, contextValues: InteractionTagContextValues) => JSX.Element;
+export declare const renderInteractionTag_unstable: (state: InteractionTagState, contextValues: InteractionTagContextValues) => JSXElement;
 
 /**
  * Render the final JSX of InteractionTagPrimary
  */
-export declare const renderInteractionTagPrimary_unstable: (state: InteractionTagPrimaryState, contextValues: InteractionTagPrimaryContextValues) => JSX.Element;
+export declare const renderInteractionTagPrimary_unstable: (state: InteractionTagPrimaryState, contextValues: InteractionTagPrimaryContextValues) => JSXElement;
 
 /**
  * Render the final JSX of InteractionTagSecondary
  */
-export declare const renderInteractionTagSecondary_unstable: (state: InteractionTagSecondaryState) => JSX.Element;
+export declare const renderInteractionTagSecondary_unstable: (state: InteractionTagSecondaryState) => JSXElement;
 
 /**
  * Render the final JSX of Tag
  */
-export declare const renderTag_unstable: (state: TagState, contextValues: TagContextValues) => JSX.Element;
+export declare const renderTag_unstable: (state: TagState, contextValues: TagContextValues) => JSXElement;
 
 /**
  * Render the final JSX of TagGroup
  */
-export declare const renderTagGroup_unstable: (state: TagGroupState, contextValue: TagGroupContextValues) => JSX.Element;
+export declare const renderTagGroup_unstable: (state: TagGroupState, contextValue: TagGroupContextValues) => JSXElement;
 
 /**
  * Tag component -  a visual representation of an attribute.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/renderInteractionTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InteractionTagState, InteractionTagSlots, InteractionTagContextValues } from './InteractionTag.types';\nimport { InteractionTagContextProvider } from '../../contexts/interactionTagContext';\n\n/**\n * Render the final JSX of InteractionTag\n */\nexport const renderInteractionTag_unstable = (\n  state: InteractionTagState,\n  contextValues: InteractionTagContextValues,\n) => {\n  assertSlots<InteractionTagSlots>(state);\n\n  return (\n    <InteractionTagContextProvider value={contextValues.interactionTag}>\n      <state.root />\n    </InteractionTagContextProvider>\n  );\n};\n"],"names":["assertSlots","InteractionTagContextProvider","renderInteractionTag_unstable","state","contextValues","value","interactionTag","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,6BAA6B,QAAQ,uCAAuC;AAErF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTag/renderInteractionTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InteractionTagState, InteractionTagSlots, InteractionTagContextValues } from './InteractionTag.types';\nimport { InteractionTagContextProvider } from '../../contexts/interactionTagContext';\n\n/**\n * Render the final JSX of InteractionTag\n */\nexport const renderInteractionTag_unstable = (\n  state: InteractionTagState,\n  contextValues: InteractionTagContextValues,\n): JSXElement => {\n  assertSlots<InteractionTagSlots>(state);\n\n  return (\n    <InteractionTagContextProvider value={contextValues.interactionTag}>\n      <state.root />\n    </InteractionTagContextProvider>\n  );\n};\n"],"names":["assertSlots","InteractionTagContextProvider","renderInteractionTag_unstable","state","contextValues","value","interactionTag","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,6BAA6B,QAAQ,uCAAuC;AAErF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/renderInteractionTagPrimary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagPrimaryState,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryContextValues,\n} from './InteractionTagPrimary.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of InteractionTagPrimary\n */\nexport const renderInteractionTagPrimary_unstable = (\n  state: InteractionTagPrimaryState,\n  contextValues: InteractionTagPrimaryContextValues,\n) => {\n  assertSlots<InteractionTagPrimarySlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderInteractionTagPrimary_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAMxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC;IAEAJ,YAAwCG;IAExC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,KAAK,kBACV,KAACL;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,cAAA,KAACL,MAAMG,KAAK;;YAGfH,MAAMM,IAAI,kBAAI,KAACN,MAAMM,IAAI;YACzBN,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;;;AAGlD,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/renderInteractionTagPrimary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagPrimaryState,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryContextValues,\n} from './InteractionTagPrimary.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of InteractionTagPrimary\n */\nexport const renderInteractionTagPrimary_unstable = (\n  state: InteractionTagPrimaryState,\n  contextValues: InteractionTagPrimaryContextValues,\n): JSXElement => {\n  assertSlots<InteractionTagPrimarySlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderInteractionTagPrimary_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC;IAEAJ,YAAwCG;IAExC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,KAAK,kBACV,KAACL;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,cAAA,KAACL,MAAMG,KAAK;;YAGfH,MAAMM,IAAI,kBAAI,KAACN,MAAMM,IAAI;YACzBN,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;;;AAGlD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagSecondary/renderInteractionTagSecondary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InteractionTagSecondaryState, InteractionTagSecondarySlots } from './InteractionTagSecondary.types';\n\n/**\n * Render the final JSX of InteractionTagSecondary\n */\nexport const renderInteractionTagSecondary_unstable = (state: InteractionTagSecondaryState) => {\n  assertSlots<InteractionTagSecondarySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderInteractionTagSecondary_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrDF,YAA0CE;IAE1C,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTagSecondary/renderInteractionTagSecondary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InteractionTagSecondaryState, InteractionTagSecondarySlots } from './InteractionTagSecondary.types';\n\n/**\n * Render the final JSX of InteractionTagSecondary\n */\nexport const renderInteractionTagSecondary_unstable = (state: InteractionTagSecondaryState): JSXElement => {\n  assertSlots<InteractionTagSecondarySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderInteractionTagSecondary_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrDF,YAA0CE;IAE1C,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tag/renderTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagState, TagSlots, TagContextValues } from './Tag.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of Tag\n */\nexport const renderTag_unstable = (state: TagState, contextValues: TagContextValues) => {\n  assertSlots<TagSlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n      {state.dismissIcon && state.dismissible && <state.dismissIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderTag_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText","dismissIcon","dismissible"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAiBC;IAClDJ,YAAsBG;IAEtB,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,KAAK,kBACV,KAACL;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,cAAA,KAACL,MAAMG,KAAK;;YAIfH,MAAMM,IAAI,kBAAI,KAACN,MAAMM,IAAI;YACzBN,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;YAC3CR,MAAMS,WAAW,IAAIT,MAAMU,WAAW,kBAAI,KAACV,MAAMS,WAAW;;;AAGnE,EAAE"}
+{"version":3,"sources":["../src/components/Tag/renderTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TagState, TagSlots, TagContextValues } from './Tag.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of Tag\n */\nexport const renderTag_unstable = (state: TagState, contextValues: TagContextValues): JSXElement => {\n  assertSlots<TagSlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n      {state.dismissIcon && state.dismissible && <state.dismissIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderTag_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText","dismissIcon","dismissible"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAiBC;IAClDJ,YAAsBG;IAEtB,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,KAAK,kBACV,KAACL;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,cAAA,KAACL,MAAMG,KAAK;;YAIfH,MAAMM,IAAI,kBAAI,KAACN,MAAMM,IAAI;YACzBN,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;YAC3CR,MAAMS,WAAW,IAAIT,MAAMU,WAAW,kBAAI,KAACV,MAAMS,WAAW;;;AAGnE,EAAE"}

package/lib/components/Tag/useTag.js

@@ -74,6 +74,9 @@ const tagAvatarShapeMap = {
                 onKeyDown: dismissOnKeyDown
             }
         }), {
+            defaultProps: {
+                type: elementType === 'button' ? 'button' : undefined
+            },
             elementType
         }),
         media: slot.optional(props.media, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tag/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    disabled: contextDisabled,\n    appearance: contextAppearance,\n    dismissible: contextDismissible,\n    role: tagGroupRole,\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    selected,\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  const selectedProp = tagGroupRole === 'listbox' ? 'aria-selected' : 'aria-pressed';\n  const selectable = typeof selected === 'boolean' || tagGroupRole === 'listbox';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled: contextDisabled ? true : disabled,\n    dismissible,\n    selected: !!selected,\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        role: tagGroupRole === 'listbox' ? 'option' : undefined,\n        [selectedProp]: selectable ? selected : undefined,\n        ...props,\n        disabled: contextDisabled ? true : disabled,\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      },\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","disabled","contextDisabled","appearance","contextAppearance","dismissible","contextDismissible","role","tagGroupRole","id","selected","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","selectedProp","selectable","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","undefined","optional","renderByDefault","defaultProps","children"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Tag/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    disabled: contextDisabled,\n    appearance: contextAppearance,\n    dismissible: contextDismissible,\n    role: tagGroupRole,\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    selected,\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  const selectedProp = tagGroupRole === 'listbox' ? 'aria-selected' : 'aria-pressed';\n  const selectable = typeof selected === 'boolean' || tagGroupRole === 'listbox';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled: contextDisabled ? true : disabled,\n    dismissible,\n    selected: !!selected,\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        role: tagGroupRole === 'listbox' ? 'option' : undefined,\n        [selectedProp]: selectable ? selected : undefined,\n        ...props,\n        disabled: contextDisabled ? true : disabled,\n        id,\n        ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),\n      }),\n      {\n        defaultProps: {\n          type: elementType === 'button' ? 'button' : undefined,\n        },\n        elementType,\n      },\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      },\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","disabled","contextDisabled","appearance","contextAppearance","dismissible","contextDismissible","role","tagGroupRole","id","selected","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","selectedProp","selectable","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","undefined","defaultProps","type","optional","renderByDefault","children"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagGroup/renderTagGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagGroupState, TagGroupSlots, TagGroupContextValues } from './TagGroup.types';\nimport { TagGroupContextProvider } from '../../contexts/tagGroupContext';\n\n/**\n * Render the final JSX of TagGroup\n */\nexport const renderTagGroup_unstable = (state: TagGroupState, contextValue: TagGroupContextValues) => {\n  assertSlots<TagGroupSlots>(state);\n\n  return (\n    <TagGroupContextProvider value={contextValue.tagGroup}>\n      <state.root />\n    </TagGroupContextProvider>\n  );\n};\n"],"names":["assertSlots","TagGroupContextProvider","renderTagGroup_unstable","state","contextValue","value","tagGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,uBAAuB,QAAQ,iCAAiC;AAEzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACF;QAAwBI,OAAOD,aAAaE,QAAQ;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/TagGroup/renderTagGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TagGroupState, TagGroupSlots, TagGroupContextValues } from './TagGroup.types';\nimport { TagGroupContextProvider } from '../../contexts/tagGroupContext';\n\n/**\n * Render the final JSX of TagGroup\n */\nexport const renderTagGroup_unstable = (state: TagGroupState, contextValue: TagGroupContextValues): JSXElement => {\n  assertSlots<TagGroupSlots>(state);\n\n  return (\n    <TagGroupContextProvider value={contextValue.tagGroup}>\n      <state.root />\n    </TagGroupContextProvider>\n  );\n};\n"],"names":["assertSlots","TagGroupContextProvider","renderTagGroup_unstable","state","contextValue","value","tagGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,uBAAuB,QAAQ,iCAAiC;AAEzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACF;QAAwBI,OAAOD,aAAaE,QAAQ;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/TagGroup/useTagGroup.js

@@ -13,7 +13,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
  * @param ref - reference to root HTMLDivElement of TagGroup
  */ export const useTagGroup_unstable = (props, ref)=>{
     const { onDismiss, disabled = false, defaultSelectedValues, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar', onTagSelect, selectedValues, ...rest } = props;
-    const innerRef = React.useRef();
+    const innerRef = React.useRef(undefined);
     const { targetDocument } = useFluent();
     const { findNextFocusable, findPrevFocusable } = useFocusFinders();
     const [items, setItems] = useControllableState({

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagGroup/useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n} 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';\nimport type { TagValue } from '../../utils/types';\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 {\n    onDismiss,\n    disabled = false,\n    defaultSelectedValues,\n    size = 'medium',\n    appearance = 'filled',\n    dismissible = false,\n    role = 'toolbar',\n    onTagSelect,\n    selectedValues,\n    ...rest\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const [items, setItems] = useControllableState<Array<TagValue>>({\n    defaultState: defaultSelectedValues,\n    state: selectedValues,\n    initialState: [],\n  });\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 handleTagSelect: TagGroupState['handleTagSelect'] = useEventCallback(\n    mergeCallbacks(onTagSelect, (_, data) => {\n      if (items.includes(data.value)) {\n        setItems(items.filter(item => item !== data.value));\n      } else {\n        setItems([...items, data.value]);\n      }\n    }),\n  );\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    handleTagSelect: onTagSelect ? handleTagSelect : undefined,\n    selectedValues: items,\n    role,\n    size,\n    disabled,\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,\n        'aria-disabled': disabled,\n        ...arrowNavigationProps,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","mergeCallbacks","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","disabled","defaultSelectedValues","size","appearance","dismissible","role","onTagSelect","selectedValues","rest","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","items","setItems","defaultState","state","initialState","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","handleTagSelect","_","value","filter","item","arrowNavigationProps","circular","axis","memorizeCurrent","undefined","components","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,oBAAoB,EACpBC,gBAAgB,EAChBC,cAAc,EACdC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAEnC,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iCAAiC,QAAQ,qEAAqE;AAGvH;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EACJC,SAAS,EACTC,WAAW,KAAK,EAChBC,qBAAqB,EACrBC,OAAO,QAAQ,EACfC,aAAa,QAAQ,EACrBC,cAAc,KAAK,EACnBC,OAAO,SAAS,EAChBC,WAAW,EACXC,cAAc,EACd,GAAGC,MACJ,GAAGX;IAEJ,MAAMY,WAAWzB,MAAM0B,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGjB;IAC3B,MAAM,EAAEkB,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGrB;IAEjD,MAAM,CAACsB,OAAOC,SAAS,GAAG7B,qBAAsC;QAC9D8B,cAAcf;QACdgB,OAAOV;QACPW,cAAc,EAAE;IAClB;IAEA,MAAMC,mBAAsDhC,iBAAiB,CAACiC,GAAGC;YAK3EZ;QAJJV,sBAAAA,gCAAAA,UAAYqB,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBX,2BAAAA,qCAAAA,eAAgBW,aAAa;QACnD,KAAIb,oBAAAA,SAASc,OAAO,cAAhBd,wCAAAA,kBAAkBe,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOb,kBAAkBU,eAA8B;gBAAEI,WAAWjB,SAASc,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,0BAAAA,oCAAAA,cAAeM,SAAS,CAACC,QAAQ,CAAClC,kCAAkCmC,IAAI,GAAG;gBAC7E,MAAMC,OAAOlB,kBAAkBS,cAAcU,aAAa,EAAiB;oBAAEN,WAAWjB,SAASc,OAAO;gBAAC;gBACzGQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb,OAAO;gBACL,MAAMI,OAAOlB,kBAAkBS,eAA8B;oBAAEI,WAAWjB,SAASc,OAAO;gBAAC;gBAC3FQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb;QACF;IACF;IAEA,MAAMM,kBAAoD9C,iBACxDC,eAAekB,aAAa,CAAC4B,GAAGb;QAC9B,IAAIP,MAAMe,QAAQ,CAACR,KAAKc,KAAK,GAAG;YAC9BpB,SAASD,MAAMsB,MAAM,CAACC,CAAAA,OAAQA,SAAShB,KAAKc,KAAK;QACnD,OAAO;YACLpB,SAAS;mBAAID;gBAAOO,KAAKc,KAAK;aAAC;QACjC;IACF;IAGF,MAAMG,uBAAuB/C,wBAAwB;QACnDgD,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLtB;QACAc,iBAAiB3B,cAAc2B,kBAAkBS;QACjDnC,gBAAgBO;QAChBT;QACAH;QACAF;QACAG;QACAC;QACAuC,YAAY;YACVb,MAAM;QACR;QAEAA,MAAMxC,KAAKsD,MAAM,CACf3D,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fa,KAAKT,cAAcS,KAAKW;YACxBJ;YACA,iBAAiBL;YACjB,GAAGsC,oBAAoB;YACvB,GAAG9B,IAAI;QACT,IACA;YAAEqC,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TagGroup/useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n} 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';\nimport type { TagValue } from '../../utils/types';\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 {\n    onDismiss,\n    disabled = false,\n    defaultSelectedValues,\n    size = 'medium',\n    appearance = 'filled',\n    dismissible = false,\n    role = 'toolbar',\n    onTagSelect,\n    selectedValues,\n    ...rest\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(undefined);\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const [items, setItems] = useControllableState<Array<TagValue>>({\n    defaultState: defaultSelectedValues,\n    state: selectedValues,\n    initialState: [],\n  });\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 handleTagSelect: TagGroupState['handleTagSelect'] = useEventCallback(\n    mergeCallbacks(onTagSelect, (_, data) => {\n      if (items.includes(data.value)) {\n        setItems(items.filter(item => item !== data.value));\n      } else {\n        setItems([...items, data.value]);\n      }\n    }),\n  );\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    handleTagSelect: onTagSelect ? handleTagSelect : undefined,\n    selectedValues: items,\n    role,\n    size,\n    disabled,\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,\n        'aria-disabled': disabled,\n        ...arrowNavigationProps,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","mergeCallbacks","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","disabled","defaultSelectedValues","size","appearance","dismissible","role","onTagSelect","selectedValues","rest","innerRef","useRef","undefined","targetDocument","findNextFocusable","findPrevFocusable","items","setItems","defaultState","state","initialState","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","handleTagSelect","_","value","filter","item","arrowNavigationProps","circular","axis","memorizeCurrent","components","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,oBAAoB,EACpBC,gBAAgB,EAChBC,cAAc,EACdC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAEnC,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iCAAiC,QAAQ,qEAAqE;AAGvH;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EACJC,SAAS,EACTC,WAAW,KAAK,EAChBC,qBAAqB,EACrBC,OAAO,QAAQ,EACfC,aAAa,QAAQ,EACrBC,cAAc,KAAK,EACnBC,OAAO,SAAS,EAChBC,WAAW,EACXC,cAAc,EACd,GAAGC,MACJ,GAAGX;IAEJ,MAAMY,WAAWzB,MAAM0B,MAAM,CAAcC;IAC3C,MAAM,EAAEC,cAAc,EAAE,GAAGlB;IAC3B,MAAM,EAAEmB,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGtB;IAEjD,MAAM,CAACuB,OAAOC,SAAS,GAAG9B,qBAAsC;QAC9D+B,cAAchB;QACdiB,OAAOX;QACPY,cAAc,EAAE;IAClB;IAEA,MAAMC,mBAAsDjC,iBAAiB,CAACkC,GAAGC;YAK3Eb;QAJJV,sBAAAA,gCAAAA,UAAYsB,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBX,2BAAAA,qCAAAA,eAAgBW,aAAa;QACnD,KAAId,oBAAAA,SAASe,OAAO,cAAhBf,wCAAAA,kBAAkBgB,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOb,kBAAkBU,eAA8B;gBAAEI,WAAWlB,SAASe,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,0BAAAA,oCAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACnC,kCAAkCoC,IAAI,GAAG;gBAC7E,MAAMC,OAAOlB,kBAAkBS,cAAcU,aAAa,EAAiB;oBAAEN,WAAWlB,SAASe,OAAO;gBAAC;gBACzGQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb,OAAO;gBACL,MAAMI,OAAOlB,kBAAkBS,eAA8B;oBAAEI,WAAWlB,SAASe,OAAO;gBAAC;gBAC3FQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb;QACF;IACF;IAEA,MAAMM,kBAAoD/C,iBACxDC,eAAekB,aAAa,CAAC6B,GAAGb;QAC9B,IAAIP,MAAMe,QAAQ,CAACR,KAAKc,KAAK,GAAG;YAC9BpB,SAASD,MAAMsB,MAAM,CAACC,CAAAA,OAAQA,SAAShB,KAAKc,KAAK;QACnD,OAAO;YACLpB,SAAS;mBAAID;gBAAOO,KAAKc,KAAK;aAAC;QACjC;IACF;IAGF,MAAMG,uBAAuBhD,wBAAwB;QACnDiD,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLtB;QACAc,iBAAiB5B,cAAc4B,kBAAkBvB;QACjDJ,gBAAgBQ;QAChBV;QACAH;QACAF;QACAG;QACAC;QACAuC,YAAY;YACVZ,MAAM;QACR;QAEAA,MAAMzC,KAAKsD,MAAM,CACf3D,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fa,KAAKT,cAAcS,KAAKW;YACxBJ;YACA,iBAAiBL;YACjB,GAAGuC,oBAAoB;YACvB,GAAG/B,IAAI;QACT,IACA;YAAEqC,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/contexts/interactionTagContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/interactionTagContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { InteractionTagState } from '../components/InteractionTag/index';\nimport type { TagDismissHandler, TagSelectHandler } from '../utils/types';\n\nexport const InteractionTagContext = React.createContext<InteractionTagContextValue | undefined>(undefined);\n\nconst interactionTagContextDefaultValue: InteractionTagContextValue = {\n  appearance: 'filled',\n  disabled: false,\n  handleTagDismiss: () => ({}),\n  handleTagSelect: () => ({}),\n  interactionTagPrimaryId: '',\n  selected: false,\n  selectedValues: [],\n  shape: 'rounded',\n  size: 'medium',\n  value: '',\n};\n\n/**\n * Context shared between InteractionTag and its children components\n */\nexport type InteractionTagContextValue<Value = string> = Required<\n  Pick<InteractionTagState, 'appearance' | 'disabled' | 'selected' | 'selectedValues' | 'shape' | 'size'> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    interactionTagPrimaryId: string;\n    value?: Value;\n  }\n> & {\n  handleTagSelect?: TagSelectHandler<Value>;\n};\n\nexport const InteractionTagContextProvider = InteractionTagContext.Provider;\n\nexport const useInteractionTagContext_unstable = () =>\n  React.useContext(InteractionTagContext) ?? interactionTagContextDefaultValue;\n"],"names":["React","InteractionTagContext","createContext","undefined","interactionTagContextDefaultValue","appearance","disabled","handleTagDismiss","handleTagSelect","interactionTagPrimaryId","selected","selectedValues","shape","size","value","InteractionTagContextProvider","Provider","useInteractionTagContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,sCAAwBD,MAAME,aAAa,CAAyCC,WAAW;AAE5G,MAAMC,oCAAgE;IACpEC,YAAY;IACZC,UAAU;IACVC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,iBAAiB,IAAO,CAAA,CAAC,CAAA;IACzBC,yBAAyB;IACzBC,UAAU;IACVC,gBAAgB,EAAE;IAClBC,OAAO;IACPC,MAAM;IACNC,OAAO;AACT;AAeA,OAAO,MAAMC,gCAAgCd,sBAAsBe,QAAQ,CAAC;AAE5E,OAAO,MAAMC,oCAAoC;QAC/CjB;WAAAA,CAAAA,oBAAAA,MAAMkB,UAAU,CAACjB,oCAAjBD,+BAAAA,oBAA2CI;EAAkC"}
+{"version":3,"sources":["../src/contexts/interactionTagContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { InteractionTagState } from '../components/InteractionTag/index';\nimport type { TagDismissHandler, TagSelectHandler } from '../utils/types';\n\nexport const InteractionTagContext = React.createContext<InteractionTagContextValue | undefined>(undefined);\n\nconst interactionTagContextDefaultValue: InteractionTagContextValue = {\n  appearance: 'filled',\n  disabled: false,\n  handleTagDismiss: () => ({}),\n  handleTagSelect: () => ({}),\n  interactionTagPrimaryId: '',\n  selected: false,\n  selectedValues: [],\n  shape: 'rounded',\n  size: 'medium',\n  value: '',\n};\n\n/**\n * Context shared between InteractionTag and its children components\n */\nexport type InteractionTagContextValue<Value = string> = Required<\n  Pick<InteractionTagState, 'appearance' | 'disabled' | 'selected' | 'selectedValues' | 'shape' | 'size'> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    interactionTagPrimaryId: string;\n    value?: Value;\n  }\n> & {\n  handleTagSelect?: TagSelectHandler<Value>;\n};\n\nexport const InteractionTagContextProvider = InteractionTagContext.Provider;\n\nexport const useInteractionTagContext_unstable = (): InteractionTagContextValue =>\n  React.useContext(InteractionTagContext) ?? interactionTagContextDefaultValue;\n"],"names":["React","InteractionTagContext","createContext","undefined","interactionTagContextDefaultValue","appearance","disabled","handleTagDismiss","handleTagSelect","interactionTagPrimaryId","selected","selectedValues","shape","size","value","InteractionTagContextProvider","Provider","useInteractionTagContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,sCAAwBD,MAAME,aAAa,CAAyCC,WAAW;AAE5G,MAAMC,oCAAgE;IACpEC,YAAY;IACZC,UAAU;IACVC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,iBAAiB,IAAO,CAAA,CAAC,CAAA;IACzBC,yBAAyB;IACzBC,UAAU;IACVC,gBAAgB,EAAE;IAClBC,OAAO;IACPC,MAAM;IACNC,OAAO;AACT;AAeA,OAAO,MAAMC,gCAAgCd,sBAAsBe,QAAQ,CAAC;AAE5E,OAAO,MAAMC,oCAAoC;QAC/CjB;WAAAA,CAAAA,oBAAAA,MAAMkB,UAAU,CAACjB,oCAAjBD,+BAAAA,oBAA2CI;EAAkC"}

package/lib/contexts/tagGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/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  role: 'toolbar',\n  handleTagSelect: undefined,\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<\n    Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>\n  >;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = () => React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","role","handleTagSelect","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;IACNC,MAAM;IACNC,iBAAiBL;AACnB;AAUA,OAAO,MAAMM,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QAAMX;WAAAA,CAAAA,oBAAAA,MAAMY,UAAU,CAACX,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}
+{"version":3,"sources":["../src/contexts/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  role: 'toolbar',\n  handleTagSelect: undefined,\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<\n    Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>\n  >;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = (): TagGroupContextValue =>\n  React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","role","handleTagSelect","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;IACNC,MAAM;IACNC,iBAAiBL;AACnB;AAUA,OAAO,MAAMM,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QACzCX;WAAAA,CAAAA,oBAAAA,MAAMY,UAAU,CAACX,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTag/renderInteractionTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InteractionTagState, InteractionTagSlots, InteractionTagContextValues } from './InteractionTag.types';\nimport { InteractionTagContextProvider } from '../../contexts/interactionTagContext';\n\n/**\n * Render the final JSX of InteractionTag\n */\nexport const renderInteractionTag_unstable = (\n  state: InteractionTagState,\n  contextValues: InteractionTagContextValues,\n) => {\n  assertSlots<InteractionTagSlots>(state);\n\n  return (\n    <InteractionTagContextProvider value={contextValues.interactionTag}>\n      <state.root />\n    </InteractionTagContextProvider>\n  );\n};\n"],"names":["assertSlots","InteractionTagContextProvider","renderInteractionTag_unstable","state","contextValues","value","interactionTag","root"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;uCAEV,uCAAuC;AAK9E,sCAAsC,CAC3CC,OACAC;QAEAJ,2BAAAA,EAAiCG;IAEjC,OAAA,WAAA,OACE,eAAA,EAACF,oDAAAA,EAAAA;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTag/renderInteractionTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InteractionTagState, InteractionTagSlots, InteractionTagContextValues } from './InteractionTag.types';\nimport { InteractionTagContextProvider } from '../../contexts/interactionTagContext';\n\n/**\n * Render the final JSX of InteractionTag\n */\nexport const renderInteractionTag_unstable = (\n  state: InteractionTagState,\n  contextValues: InteractionTagContextValues,\n): JSXElement => {\n  assertSlots<InteractionTagSlots>(state);\n\n  return (\n    <InteractionTagContextProvider value={contextValues.interactionTag}>\n      <state.root />\n    </InteractionTagContextProvider>\n  );\n};\n"],"names":["assertSlots","InteractionTagContextProvider","renderInteractionTag_unstable","state","contextValues","value","interactionTag","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;uCAGV,uCAAuC;AAK9E,sCAAsC,CAC3CC,OACAC;QAEAJ,2BAAAA,EAAiCG;IAEjC,OAAA,WAAA,OACE,eAAA,EAACF,oDAAAA,EAAAA;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagPrimary/renderInteractionTagPrimary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagPrimaryState,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryContextValues,\n} from './InteractionTagPrimary.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of InteractionTagPrimary\n */\nexport const renderInteractionTagPrimary_unstable = (\n  state: InteractionTagPrimaryState,\n  contextValues: InteractionTagPrimaryContextValues,\n) => {\n  assertSlots<InteractionTagPrimarySlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderInteractionTagPrimary_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText"],"mappings":";;;;+BAcaE;;;;;;4BAbb,iCAAiD;gCAErB,4BAA4B;6BAMlB,yBAAyB;AAKxD,6CAA6C,CAClDC,OACAC;QAEAJ,2BAAAA,EAAwCG;IAExC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;YACRF,MAAMG,KAAK,IAAA,WAAA,OACV,eAAA,EAACL,kCAAAA,EAAAA;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,WAAA,OAAA,eAAA,EAACL,MAAMG,KAAK,EAAA,CAAA;;YAGfH,MAAMM,IAAI,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMO,WAAW,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,WAAW,EAAA,CAAA;YACvCP,MAAMQ,aAAa,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,aAAa,EAAA,CAAA;;;AAGlD,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTagPrimary/renderInteractionTagPrimary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagPrimaryState,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryContextValues,\n} from './InteractionTagPrimary.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of InteractionTagPrimary\n */\nexport const renderInteractionTagPrimary_unstable = (\n  state: InteractionTagPrimaryState,\n  contextValues: InteractionTagPrimaryContextValues,\n): JSXElement => {\n  assertSlots<InteractionTagPrimarySlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderInteractionTagPrimary_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText"],"mappings":";;;;+BAeaE;;;;;;4BAdb,iCAAiD;gCAErB,4BAA4B;6BAOlB,yBAAyB;AAKxD,6CAA6C,CAClDC,OACAC;QAEAJ,2BAAAA,EAAwCG;IAExC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;YACRF,MAAMG,KAAK,IAAA,WAAA,OACV,eAAA,EAACL,kCAAAA,EAAAA;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,WAAA,OAAA,eAAA,EAACL,MAAMG,KAAK,EAAA,CAAA;;YAGfH,MAAMM,IAAI,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMO,WAAW,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,WAAW,EAAA,CAAA;YACvCP,MAAMQ,aAAa,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,aAAa,EAAA,CAAA;;;AAGlD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractionTagSecondary/renderInteractionTagSecondary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InteractionTagSecondaryState, InteractionTagSecondarySlots } from './InteractionTagSecondary.types';\n\n/**\n * Render the final JSX of InteractionTagSecondary\n */\nexport const renderInteractionTagSecondary_unstable = (state: InteractionTagSecondaryState) => {\n  assertSlots<InteractionTagSecondarySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderInteractionTagSecondary_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAMjD,MAAMC,yCAAyC,CAACC;QACrDF,2BAAAA,EAA0CE;IAE1C,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/InteractionTagSecondary/renderInteractionTagSecondary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InteractionTagSecondaryState, InteractionTagSecondarySlots } from './InteractionTagSecondary.types';\n\n/**\n * Render the final JSX of InteractionTagSecondary\n */\nexport const renderInteractionTagSecondary_unstable = (state: InteractionTagSecondaryState): JSXElement => {\n  assertSlots<InteractionTagSecondarySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderInteractionTagSecondary_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAOjD,MAAMC,yCAAyC,CAACC;QACrDF,2BAAAA,EAA0CE;IAE1C,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tag/renderTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagState, TagSlots, TagContextValues } from './Tag.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of Tag\n */\nexport const renderTag_unstable = (state: TagState, contextValues: TagContextValues) => {\n  assertSlots<TagSlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n      {state.dismissIcon && state.dismissible && <state.dismissIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderTag_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText","dismissIcon","dismissible"],"mappings":";;;;+BAUaE;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;6BAElB,yBAAyB;AAKxD,2BAA2B,CAACC,OAAiBC;QAClDJ,2BAAAA,EAAsBG;IAEtB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;YACRF,MAAMG,KAAK,IAAA,WAAA,OACV,eAAA,EAACL,kCAAAA,EAAAA;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,WAAA,OAAA,eAAA,EAACL,MAAMG,KAAK,EAAA,CAAA;;YAIfH,MAAMM,IAAI,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMO,WAAW,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,WAAW,EAAA,CAAA;YACvCP,MAAMQ,aAAa,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,aAAa,EAAA,CAAA;YAC3CR,MAAMS,WAAW,IAAIT,MAAMU,WAAW,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMS,WAAW,EAAA,CAAA;;;AAGnE,EAAE"}
+{"version":3,"sources":["../src/components/Tag/renderTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TagState, TagSlots, TagContextValues } from './Tag.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of Tag\n */\nexport const renderTag_unstable = (state: TagState, contextValues: TagContextValues): JSXElement => {\n  assertSlots<TagSlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n      {state.dismissIcon && state.dismissible && <state.dismissIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderTag_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText","dismissIcon","dismissible"],"mappings":";;;;+BAWaE;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;6BAGlB,yBAAyB;AAKxD,2BAA2B,CAACC,OAAiBC;QAClDJ,2BAAAA,EAAsBG;IAEtB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;YACRF,MAAMG,KAAK,IAAA,WAAA,OACV,eAAA,EAACL,kCAAAA,EAAAA;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,WAAA,OAAA,eAAA,EAACL,MAAMG,KAAK,EAAA,CAAA;;YAIfH,MAAMM,IAAI,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMO,WAAW,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,WAAW,EAAA,CAAA;YACvCP,MAAMQ,aAAa,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,aAAa,EAAA,CAAA;YAC3CR,MAAMS,WAAW,IAAIT,MAAMU,WAAW,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMS,WAAW,EAAA,CAAA;;;AAGnE,EAAE"}

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

@@ -77,6 +77,9 @@ const useTag_unstable = (props, ref)=>{
                 onKeyDown: dismissOnKeyDown
             }
         }), {
+            defaultProps: {
+                type: elementType === 'button' ? 'button' : undefined
+            },
             elementType
         }),
         media: _reactutilities.slot.optional(props.media, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tag/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    disabled: contextDisabled,\n    appearance: contextAppearance,\n    dismissible: contextDismissible,\n    role: tagGroupRole,\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    selected,\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  const selectedProp = tagGroupRole === 'listbox' ? 'aria-selected' : 'aria-pressed';\n  const selectable = typeof selected === 'boolean' || tagGroupRole === 'listbox';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled: contextDisabled ? true : disabled,\n    dismissible,\n    selected: !!selected,\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        role: tagGroupRole === 'listbox' ? 'option' : undefined,\n        [selectedProp]: selectable ? selected : undefined,\n        ...props,\n        disabled: contextDisabled ? true : disabled,\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      },\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","disabled","contextDisabled","appearance","contextAppearance","dismissible","contextDismissible","role","tagGroupRole","id","selected","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","selectedProp","selectable","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","undefined","optional","renderByDefault","defaultProps","children"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Tag/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    disabled: contextDisabled,\n    appearance: contextAppearance,\n    dismissible: contextDismissible,\n    role: tagGroupRole,\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    selected,\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  const selectedProp = tagGroupRole === 'listbox' ? 'aria-selected' : 'aria-pressed';\n  const selectable = typeof selected === 'boolean' || tagGroupRole === 'listbox';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled: contextDisabled ? true : disabled,\n    dismissible,\n    selected: !!selected,\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        role: tagGroupRole === 'listbox' ? 'option' : undefined,\n        [selectedProp]: selectable ? selected : undefined,\n        ...props,\n        disabled: contextDisabled ? true : disabled,\n        id,\n        ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),\n      }),\n      {\n        defaultProps: {\n          type: elementType === 'button' ? 'button' : undefined,\n        },\n        elementType,\n      },\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      },\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","disabled","contextDisabled","appearance","contextAppearance","dismissible","contextDismissible","role","tagGroupRole","id","selected","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","selectedProp","selectable","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","undefined","defaultProps","type","optional","renderByDefault","children"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagGroup/renderTagGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagGroupState, TagGroupSlots, TagGroupContextValues } from './TagGroup.types';\nimport { TagGroupContextProvider } from '../../contexts/tagGroupContext';\n\n/**\n * Render the final JSX of TagGroup\n */\nexport const renderTagGroup_unstable = (state: TagGroupState, contextValue: TagGroupContextValues) => {\n  assertSlots<TagGroupSlots>(state);\n\n  return (\n    <TagGroupContextProvider value={contextValue.tagGroup}>\n      <state.root />\n    </TagGroupContextProvider>\n  );\n};\n"],"names":["assertSlots","TagGroupContextProvider","renderTagGroup_unstable","state","contextValue","value","tagGroup","root"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;iCAEhB,iCAAiC;AAKlE,gCAAgC,CAACC,OAAsBC;QAC5DJ,2BAAAA,EAA2BG;IAE3B,OAAA,WAAA,OACE,eAAA,EAACF,wCAAAA,EAAAA;QAAwBI,OAAOD,aAAaE,QAAQ;kBACnD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/TagGroup/renderTagGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TagGroupState, TagGroupSlots, TagGroupContextValues } from './TagGroup.types';\nimport { TagGroupContextProvider } from '../../contexts/tagGroupContext';\n\n/**\n * Render the final JSX of TagGroup\n */\nexport const renderTagGroup_unstable = (state: TagGroupState, contextValue: TagGroupContextValues): JSXElement => {\n  assertSlots<TagGroupSlots>(state);\n\n  return (\n    <TagGroupContextProvider value={contextValue.tagGroup}>\n      <state.root />\n    </TagGroupContextProvider>\n  );\n};\n"],"names":["assertSlots","TagGroupContextProvider","renderTagGroup_unstable","state","contextValue","value","tagGroup","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;iCAGhB,iCAAiC;AAKlE,gCAAgC,CAACC,OAAsBC;QAC5DJ,2BAAAA,EAA2BG;IAE3B,OAAA,WAAA,OACE,eAAA,EAACF,wCAAAA,EAAAA;QAAwBI,OAAOD,aAAaE,QAAQ;kBACnD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}

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

@@ -16,7 +16,7 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useInteractionTagSecondaryStylesstyles = require("../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles");
 const useTagGroup_unstable = (props, ref)=>{
     const { onDismiss, disabled = false, defaultSelectedValues, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar', onTagSelect, selectedValues, ...rest } = props;
-    const innerRef = _react.useRef();
+    const innerRef = _react.useRef(undefined);
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const { findNextFocusable, findPrevFocusable } = (0, _reacttabster.useFocusFinders)();
     const [items, setItems] = (0, _reactutilities.useControllableState)({

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagGroup/useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n} 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';\nimport type { TagValue } from '../../utils/types';\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 {\n    onDismiss,\n    disabled = false,\n    defaultSelectedValues,\n    size = 'medium',\n    appearance = 'filled',\n    dismissible = false,\n    role = 'toolbar',\n    onTagSelect,\n    selectedValues,\n    ...rest\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const [items, setItems] = useControllableState<Array<TagValue>>({\n    defaultState: defaultSelectedValues,\n    state: selectedValues,\n    initialState: [],\n  });\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 handleTagSelect: TagGroupState['handleTagSelect'] = useEventCallback(\n    mergeCallbacks(onTagSelect, (_, data) => {\n      if (items.includes(data.value)) {\n        setItems(items.filter(item => item !== data.value));\n      } else {\n        setItems([...items, data.value]);\n      }\n    }),\n  );\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    handleTagSelect: onTagSelect ? handleTagSelect : undefined,\n    selectedValues: items,\n    role,\n    size,\n    disabled,\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,\n        'aria-disabled': disabled,\n        ...arrowNavigationProps,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","mergeCallbacks","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","disabled","defaultSelectedValues","size","appearance","dismissible","role","onTagSelect","selectedValues","rest","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","items","setItems","defaultState","state","initialState","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","handleTagSelect","_","value","filter","item","arrowNavigationProps","circular","axis","memorizeCurrent","undefined","components","always","elementType"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagGroup/useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  useControllableState,\n  useEventCallback,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n} 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';\nimport type { TagValue } from '../../utils/types';\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 {\n    onDismiss,\n    disabled = false,\n    defaultSelectedValues,\n    size = 'medium',\n    appearance = 'filled',\n    dismissible = false,\n    role = 'toolbar',\n    onTagSelect,\n    selectedValues,\n    ...rest\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(undefined);\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const [items, setItems] = useControllableState<Array<TagValue>>({\n    defaultState: defaultSelectedValues,\n    state: selectedValues,\n    initialState: [],\n  });\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 handleTagSelect: TagGroupState['handleTagSelect'] = useEventCallback(\n    mergeCallbacks(onTagSelect, (_, data) => {\n      if (items.includes(data.value)) {\n        setItems(items.filter(item => item !== data.value));\n      } else {\n        setItems([...items, data.value]);\n      }\n    }),\n  );\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    handleTagSelect: onTagSelect ? handleTagSelect : undefined,\n    selectedValues: items,\n    role,\n    size,\n    disabled,\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,\n        'aria-disabled': disabled,\n        ...arrowNavigationProps,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","mergeCallbacks","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","disabled","defaultSelectedValues","size","appearance","dismissible","role","onTagSelect","selectedValues","rest","innerRef","useRef","undefined","targetDocument","findNextFocusable","findPrevFocusable","items","setItems","defaultState","state","initialState","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","handleTagSelect","_","value","filter","item","arrowNavigationProps","circular","axis","memorizeCurrent","components","always","elementType"],"mappings":"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"}

package/lib-commonjs/contexts/interactionTagContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/interactionTagContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { InteractionTagState } from '../components/InteractionTag/index';\nimport type { TagDismissHandler, TagSelectHandler } from '../utils/types';\n\nexport const InteractionTagContext = React.createContext<InteractionTagContextValue | undefined>(undefined);\n\nconst interactionTagContextDefaultValue: InteractionTagContextValue = {\n  appearance: 'filled',\n  disabled: false,\n  handleTagDismiss: () => ({}),\n  handleTagSelect: () => ({}),\n  interactionTagPrimaryId: '',\n  selected: false,\n  selectedValues: [],\n  shape: 'rounded',\n  size: 'medium',\n  value: '',\n};\n\n/**\n * Context shared between InteractionTag and its children components\n */\nexport type InteractionTagContextValue<Value = string> = Required<\n  Pick<InteractionTagState, 'appearance' | 'disabled' | 'selected' | 'selectedValues' | 'shape' | 'size'> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    interactionTagPrimaryId: string;\n    value?: Value;\n  }\n> & {\n  handleTagSelect?: TagSelectHandler<Value>;\n};\n\nexport const InteractionTagContextProvider = InteractionTagContext.Provider;\n\nexport const useInteractionTagContext_unstable = () =>\n  React.useContext(InteractionTagContext) ?? interactionTagContextDefaultValue;\n"],"names":["React","InteractionTagContext","createContext","undefined","interactionTagContextDefaultValue","appearance","disabled","handleTagDismiss","handleTagSelect","interactionTagPrimaryId","selected","selectedValues","shape","size","value","InteractionTagContextProvider","Provider","useInteractionTagContext_unstable","useContext"],"mappings":";;;;;;;;;;;yBAIaC;;;iCA4BAc;;;qCAEAE;;;;;iEAlCU,QAAQ;AAIxB,MAAMhB,wBAAAA,WAAAA,GAAwBD,OAAME,aAAa,CAAyCC,WAAW;AAE5G,MAAMC,oCAAgE;IACpEC,YAAY;IACZC,UAAU;IACVC,kBAAkB,IAAO,GAAC,CAAA;IAC1BC,iBAAiB,IAAO,CAAA,EAAC,CAAA;IACzBC,yBAAyB;IACzBC,UAAU;IACVC,gBAAgB,EAAE;IAClBC,OAAO;IACPC,MAAM;IACNC,OAAO;AACT;AAeO,MAAMC,gCAAgCd,sBAAsBe,QAAQ,CAAC;AAErE,MAAMC,oCAAoC;QAC/CjB;WAAAA,CAAAA,oBAAAA,OAAMkB,UAAU,CAACjB,sBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA2CI;EAAkC"}
+{"version":3,"sources":["../src/contexts/interactionTagContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { InteractionTagState } from '../components/InteractionTag/index';\nimport type { TagDismissHandler, TagSelectHandler } from '../utils/types';\n\nexport const InteractionTagContext = React.createContext<InteractionTagContextValue | undefined>(undefined);\n\nconst interactionTagContextDefaultValue: InteractionTagContextValue = {\n  appearance: 'filled',\n  disabled: false,\n  handleTagDismiss: () => ({}),\n  handleTagSelect: () => ({}),\n  interactionTagPrimaryId: '',\n  selected: false,\n  selectedValues: [],\n  shape: 'rounded',\n  size: 'medium',\n  value: '',\n};\n\n/**\n * Context shared between InteractionTag and its children components\n */\nexport type InteractionTagContextValue<Value = string> = Required<\n  Pick<InteractionTagState, 'appearance' | 'disabled' | 'selected' | 'selectedValues' | 'shape' | 'size'> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    interactionTagPrimaryId: string;\n    value?: Value;\n  }\n> & {\n  handleTagSelect?: TagSelectHandler<Value>;\n};\n\nexport const InteractionTagContextProvider = InteractionTagContext.Provider;\n\nexport const useInteractionTagContext_unstable = (): InteractionTagContextValue =>\n  React.useContext(InteractionTagContext) ?? interactionTagContextDefaultValue;\n"],"names":["React","InteractionTagContext","createContext","undefined","interactionTagContextDefaultValue","appearance","disabled","handleTagDismiss","handleTagSelect","interactionTagPrimaryId","selected","selectedValues","shape","size","value","InteractionTagContextProvider","Provider","useInteractionTagContext_unstable","useContext"],"mappings":";;;;;;;;;;;yBAIaC;;;iCA4BAc;;;qCAEAE;;;;;iEAlCU,QAAQ;AAIxB,MAAMhB,wBAAAA,WAAAA,GAAwBD,OAAME,aAAa,CAAyCC,WAAW;AAE5G,MAAMC,oCAAgE;IACpEC,YAAY;IACZC,UAAU;IACVC,kBAAkB,IAAO,GAAC,CAAA;IAC1BC,iBAAiB,IAAO,CAAA,EAAC,CAAA;IACzBC,yBAAyB;IACzBC,UAAU;IACVC,gBAAgB,EAAE;IAClBC,OAAO;IACPC,MAAM;IACNC,OAAO;AACT;AAeO,MAAMC,gCAAgCd,sBAAsBe,QAAQ,CAAC;AAErE,MAAMC,oCAAoC;QAC/CjB;WAAAA,CAAAA,oBAAAA,OAAMkB,UAAU,CAACjB,sBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA2CI;EAAkC"}

package/lib-commonjs/contexts/tagGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/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  role: 'toolbar',\n  handleTagSelect: undefined,\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<\n    Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>\n  >;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = () => React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","role","handleTagSelect","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":";;;;;;;;;;;IAGaC,eAAAA;;;2BAiBAQ;;;+BAEAE;;;;;iEAtBU,QAAQ;AAGxB,wBAAMV,WAAAA,GAAkBD,OAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,EAAC,CAAA;IAC1BC,MAAM;IACNC,MAAM;IACNC,iBAAiBL;AACnB;AAUO,MAAMM,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEzD,MAAMC,8BAA8B;QAAMX;WAAAA,CAAAA,oBAAAA,OAAMY,UAAU,CAACX,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}
+{"version":3,"sources":["../src/contexts/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  role: 'toolbar',\n  handleTagSelect: undefined,\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<\n    Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>\n  >;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = (): TagGroupContextValue =>\n  React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","role","handleTagSelect","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":";;;;;;;;;;;IAGaC,eAAAA;;;2BAiBAQ;;;+BAEAE;;;;;iEAtBU,QAAQ;AAGxB,wBAAMV,WAAAA,GAAkBD,OAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,EAAC,CAAA;IAC1BC,MAAM;IACNC,MAAM;IACNC,iBAAiBL;AACnB;AAUO,MAAMM,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEzD,MAAMC,8BAA8B;QACzCX;WAAAA,CAAAA,oBAAAA,OAAMY,UAAU,CAACX,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tags",
-  "version": "9.7.5",
+  "version": "9.7.6",
   "description": "Fluent UI Tag component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,22 +21,22 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-aria": "^9.16.4",
-    "@fluentui/react-avatar": "^9.9.5",
+    "@fluentui/react-aria": "^9.17.0",
+    "@fluentui/react-avatar": "^9.9.6",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.1.6",
-    "@fluentui/react-shared-contexts": "^9.25.0",
-    "@fluentui/react-tabster": "^9.26.4",
+    "@fluentui/react-jsx-runtime": "^9.2.0",
+    "@fluentui/react-shared-contexts": "^9.25.1",
+    "@fluentui/react-tabster": "^9.26.5",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.0",
+    "@fluentui/react-utilities": "^9.24.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [