@fluentui/react-tags 9.3.16 → 9.3.17

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Thu, 15 Aug 2024 13:46:54 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:15:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.17)
+
+Tue, 10 Sep 2024 10:15:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.16..@fluentui/react-tags_v9.3.17)
+
+### Patches
+
+- fix(react-tags): allows TagGroup to be disabled ([PR #32317](https://github.com/microsoft/fluentui/pull/32317) by jiangemma@microsoft.com)
+- fix(react-tags): allow TagGroup to be disabled, remove role='img' from Tag dismiss ([PR #32297](https://github.com/microsoft/fluentui/pull/32297) by jiangemma@microsoft.com)
+- Bump @fluentui/react-aria to v9.13.5 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-avatar to v9.6.38 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
 ## [9.3.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.16)
 
-Thu, 15 Aug 2024 13:46:54 GMT 
+Thu, 15 Aug 2024 13:49:46 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.15..@fluentui/react-tags_v9.3.16)
 
 ### Patches

package/dist/index.d.ts

@@ -214,7 +214,7 @@ export declare const tagGroupClassNames: SlotClassNames<TagGroupSlots>;
 /**
  * Context shared between TagGroup and its children components
  */
-declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'appearance' | 'dismissible' | 'role'>>;
+declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'role'>>;
 
 export declare type TagGroupContextValues = {
     tagGroup: TagGroupContextValue;
@@ -228,6 +228,12 @@ export declare type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlo
      * Callback for when a tag is dismissed
      */
     onDismiss?: TagDismissHandler<Value>;
+    /**
+     * A TagGroup can show that it cannot be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
     size?: TagSize;
     appearance?: TagAppearance;
     dismissible?: boolean;
@@ -240,7 +246,7 @@ export declare type TagGroupSlots = {
 /**
  * State used in rendering TagGroup
  */
-export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {
+export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'disabled' | 'size' | 'appearance' | 'dismissible'>> & {
     handleTagDismiss: TagDismissHandler<Value>;
     role?: React_2.AriaRole;
 };

package/lib/components/InteractionTag/useInteractionTag.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  return {\n    appearance,\n    disabled,\n    handleTagDismiss,\n    interactionTagPrimaryId,\n    shape,\n    size,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","id","interactionTagPrimaryId","disabled","shape","value","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAEC,YAAYC,iBAAiB,EAAE,GAAGR;IAE/E,MAAMS,KAAKX,MAAM,uBAAuBI,MAAMO,EAAE;IAEhD,MAAMC,0BAA0BZ,MAAM;IAEtC,MAAM,EACJS,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CG,WAAW,KAAK,EAChBC,QAAQ,SAAS,EACjBP,OAAOC,WAAW,EAClBO,QAAQJ,EAAE,EACX,GAAGP;IAEJ,OAAO;QACLK;QACAI;QACAP;QACAM;QACAE;QACAP;QACAQ;QAEAC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMhB,KAAKiB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRO;QACF,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const {\n    handleTagDismiss,\n    size: contextSize,\n    disabled: contextDisabled,\n    appearance: contextAppearance,\n  } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  return {\n    appearance,\n    disabled: contextDisabled ? true : disabled,\n    handleTagDismiss,\n    interactionTagPrimaryId,\n    shape,\n    size,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        disabled: contextDisabled ? true : disabled,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","disabled","contextDisabled","appearance","contextAppearance","id","interactionTagPrimaryId","shape","value","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EACJC,gBAAgB,EAChBC,MAAMC,WAAW,EACjBC,UAAUC,eAAe,EACzBC,YAAYC,iBAAiB,EAC9B,GAAGV;IAEJ,MAAMW,KAAKb,MAAM,uBAAuBI,MAAMS,EAAE;IAEhD,MAAMC,0BAA0Bd,MAAM;IAEtC,MAAM,EACJW,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CH,WAAW,KAAK,EAChBM,QAAQ,SAAS,EACjBR,OAAOC,WAAW,EAClBQ,QAAQH,EAAE,EACX,GAAGT;IAEJ,OAAO;QACLO;QACAF,UAAUC,kBAAkB,OAAOD;QACnCH;QACAQ;QACAC;QACAR;QACAS;QAEAC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMjB,KAAKkB,MAAM,CACfpB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRK,UAAUC,kBAAkB,OAAOD;YACnCI;QACF,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/Tag/useTag.js

@@ -21,7 +21,7 @@ const tagAvatarShapeMap = {
  * @param props - props from this instance of Tag
  * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag
  */ export const useTag_unstable = (props, ref)=>{
-    const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible, role: tagGroupRole } = useTagGroupContext_unstable();
+    const { handleTagDismiss, size: contextSize, disabled: contextDisabled, appearance: contextAppearance, dismissible: contextDismissible, role: tagGroupRole } = useTagGroupContext_unstable();
     const id = useId('fui-Tag', props.id);
     const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, dismissible = contextDismissible !== null && contextDismissible !== void 0 ? contextDismissible : false, shape = 'rounded', size = contextSize, value = id } = props;
     const dismissOnClick = useEventCallback((ev)=>{
@@ -47,7 +47,7 @@ const tagAvatarShapeMap = {
         appearance,
         avatarShape: tagAvatarShapeMap[shape],
         avatarSize: tagAvatarSizeMap[size],
-        disabled,
+        disabled: contextDisabled ? true : disabled,
         dismissible,
         shape,
         size,
@@ -63,6 +63,7 @@ const tagAvatarShapeMap = {
             ref,
             role: tagGroupRole === 'listbox' ? 'option' : undefined,
             ...props,
+            disabled: contextDisabled ? true : disabled,
             id,
             ...dismissible && {
                 onClick: dismissOnClick,
@@ -90,8 +91,7 @@ const tagAvatarShapeMap = {
         dismissIcon: slot.optional(props.dismissIcon, {
             renderByDefault: dismissible,
             defaultProps: {
-                children: /*#__PURE__*/ React.createElement(DismissRegular, null),
-                role: 'img'
+                children: /*#__PURE__*/ React.createElement(DismissRegular, null)
             },
             elementType: 'span'
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { TagProps, TagState } from './Tag.types';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\nconst tagAvatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst tagAvatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */\nexport const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {\n  const {\n    handleTagDismiss,\n    size: contextSize,\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    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  const dismissOnClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const dismissOnKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    props?.onKeyDown?.(ev);\n    if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const elementType = dismissible ? 'button' : 'span';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled,\n    dismissible,\n    shape,\n    size,\n\n    components: {\n      root: elementType,\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n      dismissIcon: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        role: tagGroupRole === 'listbox' ? 'option' : undefined,\n        ...props,\n        id,\n        ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),\n      }),\n      { elementType },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n    dismissIcon: slot.optional(props.dismissIcon, {\n      renderByDefault: dismissible,\n      defaultProps: {\n        children: <DismissRegular />,\n        role: 'img',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useId","slot","DismissRegular","Delete","Backspace","useTagGroupContext_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","useTag_unstable","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","dismissible","contextDismissible","role","tagGroupRole","id","disabled","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","undefined","optional","renderByDefault","defaultProps","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACpG,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,MAAMC,mBAAmB;IACvBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,oBAAoB;IACxBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EACJC,gBAAgB,EAChBC,MAAMC,WAAW,EACjBC,YAAYC,iBAAiB,EAC7BC,aAAaC,kBAAkB,EAC/BC,MAAMC,YAAY,EACnB,GAAGlB;IAEJ,MAAMmB,KAAKxB,MAAM,WAAWa,MAAMW,EAAE;IAEpC,MAAM,EACJN,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CM,WAAW,KAAK,EAChBL,cAAcC,+BAAAA,gCAAAA,qBAAsB,KAAK,EACzCK,QAAQ,SAAS,EACjBV,OAAOC,WAAW,EAClBU,QAAQH,EAAE,EACX,GAAGX;IAEJ,MAAMe,iBAAiB7B,iBAAiB,CAAC8B;YACvChB;SAAAA,iBAAAA,MAAMiB,OAAO,cAAbjB,qCAAAA,oBAAAA,OAAgBgB;QAChB,IAAI,CAACA,GAAGE,gBAAgB,EAAE;YACxBhB,6BAAAA,uCAAAA,iBAAmBc,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMK,mBAAmBjC,iBAAiB,CAAC8B;YACzChB;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOoB,SAAS,cAAhBpB,uCAAAA,sBAAAA,OAAmBgB;QACnB,IAAI,CAACA,GAAGE,gBAAgB,IAAKF,CAAAA,GAAGK,GAAG,KAAK/B,UAAU0B,GAAGK,GAAG,KAAK9B,SAAQ,GAAI;YACvEW,6BAAAA,uCAAAA,iBAAmBc,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMQ,cAAcf,cAAc,WAAW;IAE7C,OAAO;QACLF;QACAkB,aAAa3B,iBAAiB,CAACiB,MAAM;QACrCW,YAAY/B,gBAAgB,CAACU,KAAK;QAClCS;QACAL;QACAM;QACAV;QAEAsB,YAAY;YACVC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACf;QAEAL,MAAMtC,KAAK4C,MAAM,CACf/C,yBAAyBqC,aAAa;YACpCrB;YACAQ,MAAMC,iBAAiB,YAAY,WAAWuB;YAC9C,GAAGjC,KAAK;YACRW;YACA,GAAIJ,eAAe;gBAAEU,SAASF;gBAAgBK,WAAWD;YAAiB,CAAC;QAC7E,IACA;YAAEG;QAAY;QAGhBK,OAAOvC,KAAK8C,QAAQ,CAAClC,MAAM2B,KAAK,EAAE;YAAEL,aAAa;QAAO;QACxDM,MAAMxC,KAAK8C,QAAQ,CAAClC,MAAM4B,IAAI,EAAE;YAAEN,aAAa;QAAO;QACtDO,aAAazC,KAAK8C,QAAQ,CAAClC,MAAM6B,WAAW,EAAE;YAC5CM,iBAAiB;YACjBC,cAAc;gBACZC,UAAUrC,MAAMqC,QAAQ;YAC1B;YACAf,aAAa;QACf;QACAQ,eAAe1C,KAAK8C,QAAQ,CAAClC,MAAM8B,aAAa,EAAE;YAAER,aAAa;QAAO;QACxES,aAAa3C,KAAK8C,QAAQ,CAAClC,MAAM+B,WAAW,EAAE;YAC5CI,iBAAiB5B;YACjB6B,cAAc;gBACZC,wBAAU,oBAAChD;gBACXoB,MAAM;YACR;YACAa,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { TagProps, TagState } from './Tag.types';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\nconst tagAvatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst tagAvatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */\nexport const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {\n  const {\n    handleTagDismiss,\n    size: contextSize,\n    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    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  const dismissOnClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const dismissOnKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    props?.onKeyDown?.(ev);\n    if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const elementType = dismissible ? 'button' : 'span';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled: contextDisabled ? true : disabled,\n    dismissible,\n    shape,\n    size,\n\n    components: {\n      root: elementType,\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n      dismissIcon: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        role: tagGroupRole === 'listbox' ? 'option' : 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","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","undefined","optional","renderByDefault","defaultProps","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagSize, TagValue, TagDismissHandler, TagAppearance } from '../../utils/types';\nimport { TagGroupContextValue } from '../../contexts/tagGroupContext';\nimport * as React from 'react';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onDismiss?: TagDismissHandler<Value>;\n\n  size?: TagSize;\n  appearance?: TagAppearance;\n  dismissible?: boolean;\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    role?: React.AriaRole;\n  };\n"],"names":["React"],"rangeMappings":"","mappings":"AAGA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagSize, TagValue, TagDismissHandler, TagAppearance } from '../../utils/types';\nimport { TagGroupContextValue } from '../../contexts/tagGroupContext';\nimport * as React from 'react';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onDismiss?: TagDismissHandler<Value>;\n\n  /**\n   * A TagGroup can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  size?: TagSize;\n  appearance?: TagAppearance;\n  dismissible?: boolean;\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'disabled' | 'size' | 'appearance' | 'dismissible'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    role?: React.AriaRole;\n  };\n"],"names":["React"],"rangeMappings":"","mappings":"AAGA,YAAYA,WAAW,QAAQ"}

package/lib/components/TagGroup/useTagGroup.js

@@ -12,7 +12,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
  * @param props - props from this instance of TagGroup
  * @param ref - reference to root HTMLDivElement of TagGroup
  */ export const useTagGroup_unstable = (props, ref)=>{
-    const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;
+    const { onDismiss, disabled = false, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;
     const innerRef = React.useRef();
     const { targetDocument } = useFluent();
     const { findNextFocusable, findPrevFocusable } = useFocusFinders();
@@ -53,6 +53,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
         handleTagDismiss,
         role,
         size,
+        disabled,
         appearance,
         dismissible,
         components: {
@@ -64,6 +65,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: useMergedRefs(ref, innerRef),
             role,
+            'aria-disabled': disabled,
             ...arrowNavigationProps,
             ...props
         }), {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleTagDismiss: TagGroupState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n\n    // set focus after tag dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    role,\n    size,\n    appearance,\n    dismissible,\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role,\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","size","appearance","dismissible","role","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE5G,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iCAAiC,QAAQ,qEAAqE;AAEvH;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAEC,aAAa,QAAQ,EAAEC,cAAc,KAAK,EAAEC,OAAO,SAAS,EAAE,GAAGN;IAErG,MAAMO,WAAWlB,MAAMmB,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGZ;IAC3B,MAAM,EAAEa,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGhB;IAEjD,MAAMiB,mBAAsDrB,iBAAiB,CAACsB,GAAGC;YAK3EP;QAJJL,sBAAAA,gCAAAA,UAAYW,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBN,2BAAAA,qCAAAA,eAAgBM,aAAa;QACnD,KAAIR,oBAAAA,SAASS,OAAO,cAAhBT,wCAAAA,kBAAkBU,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOR,kBAAkBK,eAA8B;gBAAEI,WAAWZ,SAASS,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,0BAAAA,oCAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACxB,kCAAkCyB,IAAI,GAAG;gBAC7E,MAAMC,OAAOb,kBAAkBI,cAAcU,aAAa,EAAiB;oBAAEN,WAAWZ,SAASS,OAAO;gBAAC;gBACzGQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb,OAAO;gBACL,MAAMI,OAAOb,kBAAkBI,eAA8B;oBAAEI,WAAWZ,SAASS,OAAO;gBAAC;gBAC3FQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb;QACF;IACF;IAEA,MAAMM,uBAAuBhC,wBAAwB;QACnDiC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLjB;QACAN;QACAH;QACAC;QACAC;QACAyB,YAAY;YACVP,MAAM;QACR;QAEAA,MAAM9B,KAAKsC,MAAM,CACfzC,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FW,KAAKT,cAAcS,KAAKM;YACxBD;YACA,GAAGoB,oBAAoB;YACvB,GAAG1B,KAAK;QACV,IACA;YAAEgC,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const {\n    onDismiss,\n    disabled = false,\n    size = 'medium',\n    appearance = 'filled',\n    dismissible = false,\n    role = 'toolbar',\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleTagDismiss: TagGroupState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n\n    // set focus after tag dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    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        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","disabled","size","appearance","dismissible","role","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE5G,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iCAAiC,QAAQ,qEAAqE;AAEvH;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EACJC,SAAS,EACTC,WAAW,KAAK,EAChBC,OAAO,QAAQ,EACfC,aAAa,QAAQ,EACrBC,cAAc,KAAK,EACnBC,OAAO,SAAS,EACjB,GAAGP;IAEJ,MAAMQ,WAAWnB,MAAMoB,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGb;IAC3B,MAAM,EAAEc,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGjB;IAEjD,MAAMkB,mBAAsDtB,iBAAiB,CAACuB,GAAGC;YAK3EP;QAJJN,sBAAAA,gCAAAA,UAAYY,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBN,2BAAAA,qCAAAA,eAAgBM,aAAa;QACnD,KAAIR,oBAAAA,SAASS,OAAO,cAAhBT,wCAAAA,kBAAkBU,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOR,kBAAkBK,eAA8B;gBAAEI,WAAWZ,SAASS,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,0BAAAA,oCAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACzB,kCAAkC0B,IAAI,GAAG;gBAC7E,MAAMC,OAAOb,kBAAkBI,cAAcU,aAAa,EAAiB;oBAAEN,WAAWZ,SAASS,OAAO;gBAAC;gBACzGQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb,OAAO;gBACL,MAAMI,OAAOb,kBAAkBI,eAA8B;oBAAEI,WAAWZ,SAASS,OAAO;gBAAC;gBAC3FQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb;QACF;IACF;IAEA,MAAMM,uBAAuBjC,wBAAwB;QACnDkC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLjB;QACAN;QACAH;QACAD;QACAE;QACAC;QACAyB,YAAY;YACVP,MAAM;QACR;QAEAA,MAAM/B,KAAKuC,MAAM,CACf1C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FW,KAAKT,cAAcS,KAAKO;YACxBD;YACA,iBAAiBJ;YACjB,GAAGwB,oBAAoB;YACvB,GAAG3B,KAAK;QACV,IACA;YAAEiC,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/TagGroup/useTagGroupContextValues.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagGroupContextValues, TagGroupState } from './TagGroup.types';\n\nexport function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues {\n  const { handleTagDismiss, size, appearance, dismissible, role } = state;\n  return {\n    tagGroup: React.useMemo(\n      () => ({ handleTagDismiss, size, appearance, dismissible, role }),\n      [handleTagDismiss, size, appearance, dismissible, role],\n    ),\n  };\n}\n"],"names":["React","useTagGroupContextValues_unstable","state","handleTagDismiss","size","appearance","dismissible","role","tagGroup","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGL;IAClE,OAAO;QACLM,UAAUR,MAAMS,OAAO,CACrB,IAAO,CAAA;gBAAEN;gBAAkBC;gBAAMC;gBAAYC;gBAAaC;YAAK,CAAA,GAC/D;YAACJ;YAAkBC;YAAMC;YAAYC;YAAaC;SAAK;IAE3D;AACF"}
+{"version":3,"sources":["useTagGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagGroupContextValues, TagGroupState } from './TagGroup.types';\n\nexport function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues {\n  const { handleTagDismiss, size, disabled, appearance, dismissible, role } = state;\n  return {\n    tagGroup: React.useMemo(\n      () => ({ handleTagDismiss, size, disabled, appearance, dismissible, role }),\n      [handleTagDismiss, size, disabled, appearance, dismissible, role],\n    ),\n  };\n}\n"],"names":["React","useTagGroupContextValues_unstable","state","handleTagDismiss","size","disabled","appearance","dismissible","role","tagGroup","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGN;IAC5E,OAAO;QACLO,UAAUT,MAAMU,OAAO,CACrB,IAAO,CAAA;gBAAEP;gBAAkBC;gBAAMC;gBAAUC;gBAAYC;gBAAaC;YAAK,CAAA,GACzE;YAACL;YAAkBC;YAAMC;YAAUC;YAAYC;YAAaC;SAAK;IAErE;AACF"}

package/lib/contexts/tagGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["tagGroupContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n  role: 'toolbar',\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<Pick<TagGroupState, 'appearance' | 'dismissible' | 'role'>>;\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","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"rangeMappings":";;;;;;;;;;;","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;AACR;AAQA,OAAO,MAAMC,0BAA0BP,gBAAgBQ,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QAAMV;WAAAA,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,8BAAjBD,+BAAAA,oBAAqCI;AAA0B,EAAE"}
+{"version":3,"sources":["tagGroupContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n  role: 'toolbar',\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'role'>>;\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","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"rangeMappings":";;;;;;;;;;;","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;AACR;AAQA,OAAO,MAAMC,0BAA0BP,gBAAgBQ,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QAAMV;WAAAA,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,8BAAjBD,+BAAAA,oBAAqCI;AAA0B,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  return {\n    appearance,\n    disabled,\n    handleTagDismiss,\n    interactionTagPrimaryId,\n    shape,\n    size,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","useTagGroupContext_unstable","id","useId","interactionTagPrimaryId","disabled","shape","value","components","root","slot","always","getIntrinsicElementProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCAC+B;iCAEV;AAWrC,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAEC,YAAYC,iBAAiB,EAAE,GAAGC,IAAAA,4CAAAA;IAE/E,MAAMC,KAAKC,IAAAA,qBAAAA,EAAM,uBAAuBT,MAAMQ,EAAE;IAEhD,MAAME,0BAA0BD,IAAAA,qBAAAA,EAAM;IAEtC,MAAM,EACJJ,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAC1CK,WAAW,KAAK,EAChBC,QAAQ,SAAS,EACjBT,OAAOC,WAAW,EAClBS,QAAQL,EAAE,EACX,GAAGR;IAEJ,OAAO;QACLK;QACAM;QACAT;QACAQ;QACAE;QACAT;QACAU;QAEAC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BjB;YACA,GAAGD,KAAK;YACRQ;QACF,IACA;YAAEW,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const {\n    handleTagDismiss,\n    size: contextSize,\n    disabled: contextDisabled,\n    appearance: contextAppearance,\n  } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const {\n    appearance = contextAppearance ?? 'filled',\n    disabled = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  return {\n    appearance,\n    disabled: contextDisabled ? true : disabled,\n    handleTagDismiss,\n    interactionTagPrimaryId,\n    shape,\n    size,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        disabled: contextDisabled ? true : disabled,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","disabled","contextDisabled","appearance","contextAppearance","useTagGroupContext_unstable","id","useId","interactionTagPrimaryId","shape","value","components","root","slot","always","getIntrinsicElementProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCAC+B;iCAEV;AAWrC,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EACJC,gBAAgB,EAChBC,MAAMC,WAAW,EACjBC,UAAUC,eAAe,EACzBC,YAAYC,iBAAiB,EAC9B,GAAGC,IAAAA,4CAAAA;IAEJ,MAAMC,KAAKC,IAAAA,qBAAAA,EAAM,uBAAuBX,MAAMU,EAAE;IAEhD,MAAME,0BAA0BD,IAAAA,qBAAAA,EAAM;IAEtC,MAAM,EACJJ,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAC1CH,WAAW,KAAK,EAChBQ,QAAQ,SAAS,EACjBV,OAAOC,WAAW,EAClBU,QAAQJ,EAAE,EACX,GAAGV;IAEJ,OAAO;QACLO;QACAF,UAAUC,kBAAkB,OAAOD;QACnCH;QACAU;QACAC;QACAV;QACAW;QAEAC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BlB;YACA,GAAGD,KAAK;YACRK,UAAUC,kBAAkB,OAAOD;YACnCK;QACF,IACA;YAAEU,aAAa;QAAM;IAEzB;AACF"}

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

@@ -24,7 +24,7 @@ const tagAvatarShapeMap = {
     circular: 'circular'
 };
 const useTag_unstable = (props, ref)=>{
-    const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible, role: tagGroupRole } = (0, _tagGroupContext.useTagGroupContext_unstable)();
+    const { handleTagDismiss, size: contextSize, disabled: contextDisabled, appearance: contextAppearance, dismissible: contextDismissible, role: tagGroupRole } = (0, _tagGroupContext.useTagGroupContext_unstable)();
     const id = (0, _reactutilities.useId)('fui-Tag', props.id);
     const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, dismissible = contextDismissible !== null && contextDismissible !== void 0 ? contextDismissible : false, shape = 'rounded', size = contextSize, value = id } = props;
     const dismissOnClick = (0, _reactutilities.useEventCallback)((ev)=>{
@@ -50,7 +50,7 @@ const useTag_unstable = (props, ref)=>{
         appearance,
         avatarShape: tagAvatarShapeMap[shape],
         avatarSize: tagAvatarSizeMap[size],
-        disabled,
+        disabled: contextDisabled ? true : disabled,
         dismissible,
         shape,
         size,
@@ -66,6 +66,7 @@ const useTag_unstable = (props, ref)=>{
             ref,
             role: tagGroupRole === 'listbox' ? 'option' : undefined,
             ...props,
+            disabled: contextDisabled ? true : disabled,
             id,
             ...dismissible && {
                 onClick: dismissOnClick,
@@ -93,8 +94,7 @@ const useTag_unstable = (props, ref)=>{
         dismissIcon: _reactutilities.slot.optional(props.dismissIcon, {
             renderByDefault: dismissible,
             defaultProps: {
-                children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null),
-                role: 'img'
+                children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null)
             },
             elementType: 'span'
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { TagProps, TagState } from './Tag.types';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\nconst tagAvatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst tagAvatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */\nexport const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {\n  const {\n    handleTagDismiss,\n    size: contextSize,\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    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  const dismissOnClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const dismissOnKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    props?.onKeyDown?.(ev);\n    if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const elementType = dismissible ? 'button' : 'span';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled,\n    dismissible,\n    shape,\n    size,\n\n    components: {\n      root: elementType,\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n      dismissIcon: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        role: tagGroupRole === 'listbox' ? 'option' : undefined,\n        ...props,\n        id,\n        ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),\n      }),\n      { elementType },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n    dismissIcon: slot.optional(props.dismissIcon, {\n      renderByDefault: dismissible,\n      defaultProps: {\n        children: <DismissRegular />,\n        role: 'img',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["useTag_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","dismissible","contextDismissible","role","tagGroupRole","useTagGroupContext_unstable","id","useId","disabled","shape","value","dismissOnClick","useEventCallback","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","Delete","Backspace","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","slot","always","getIntrinsicElementProps","undefined","optional","renderByDefault","defaultProps","children","React","createElement","DismissRegular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { TagProps, TagState } from './Tag.types';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\nconst tagAvatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst tagAvatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */\nexport const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {\n  const {\n    handleTagDismiss,\n    size: contextSize,\n    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    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  const dismissOnClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const dismissOnKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    props?.onKeyDown?.(ev);\n    if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const elementType = dismissible ? 'button' : 'span';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled: contextDisabled ? true : disabled,\n    dismissible,\n    shape,\n    size,\n\n    components: {\n      root: elementType,\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n      dismissIcon: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(elementType, {\n        ref,\n        role: tagGroupRole === 'listbox' ? 'option' : 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":["useTag_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","props","ref","handleTagDismiss","size","contextSize","disabled","contextDisabled","appearance","contextAppearance","dismissible","contextDismissible","role","tagGroupRole","useTagGroupContext_unstable","id","useId","shape","value","dismissOnClick","useEventCallback","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","Delete","Backspace","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","slot","always","getIntrinsicElementProps","undefined","optional","renderByDefault","defaultProps","children","React","createElement","DismissRegular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

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

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

@@ -15,7 +15,7 @@ const _reacttabster = require("@fluentui/react-tabster");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useInteractionTagSecondaryStylesstyles = require("../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles");
 const useTagGroup_unstable = (props, ref)=>{
-    const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;
+    const { onDismiss, disabled = false, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;
     const innerRef = _react.useRef();
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const { findNextFocusable, findPrevFocusable } = (0, _reacttabster.useFocusFinders)();
@@ -56,6 +56,7 @@ const useTagGroup_unstable = (props, ref)=>{
         handleTagDismiss,
         role,
         size,
+        disabled,
         appearance,
         dismissible,
         components: {
@@ -67,6 +68,7 @@ const useTagGroup_unstable = (props, ref)=>{
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
             role,
+            'aria-disabled': disabled,
             ...arrowNavigationProps,
             ...props
         }), {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleTagDismiss: TagGroupState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n\n    // set focus after tag dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    role,\n    size,\n    appearance,\n    dismissible,\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role,\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["useTagGroup_unstable","props","ref","onDismiss","size","appearance","dismissible","role","innerRef","React","useRef","targetDocument","useFluent","findNextFocusable","findPrevFocusable","useFocusFinders","handleTagDismiss","useEventCallback","e","data","activeElement","current","contains","next","container","focus","className","includes","interactionTagSecondaryClassNames","root","prev","parentElement","arrowNavigationProps","useArrowNavigationGroup","circular","axis","memorizeCurrent","components","slot","always","getIntrinsicElementProps","useMergedRefs","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCACyD;8BAEvB;qCACT;wDACE;AAW3C,MAAMA,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAEC,aAAa,QAAQ,EAAEC,cAAc,KAAK,EAAEC,OAAO,SAAS,EAAE,GAAGN;IAErG,MAAMO,WAAWC,OAAMC,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,6BAAAA;IAEjD,MAAMC,mBAAsDC,IAAAA,gCAAAA,EAAiB,CAACC,GAAGC;YAK3EX;QAJJL,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAYe,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBT,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBS,aAAa;QACnD,IAAA,AAAIZ,CAAAA,oBAAAA,SAASa,OAAO,AAAPA,MAAO,QAAhBb,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBc,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOV,kBAAkBO,eAA8B;gBAAEI,WAAWhB,SAASa,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACC,yEAAAA,CAAkCC,IAAI,GAAG;gBAC7E,MAAMC,OAAOhB,kBAAkBM,cAAcW,aAAa,EAAiB;oBAAEP,WAAWhB,SAASa,OAAO;gBAAC;gBACzGS,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAML,KAAK;YACb,OAAO;gBACL,MAAMK,OAAOhB,kBAAkBM,eAA8B;oBAAEI,WAAWhB,SAASa,OAAO;gBAAC;gBAC3FS,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAML,KAAK;YACb;QACF;IACF;IAEA,MAAMO,uBAAuBC,IAAAA,qCAAAA,EAAwB;QACnDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLpB;QACAT;QACAH;QACAC;QACAC;QACA+B,YAAY;YACVR,MAAM;QACR;QAEAA,MAAMS,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FtC,KAAKuC,IAAAA,6BAAAA,EAAcvC,KAAKM;YACxBD;YACA,GAAGyB,oBAAoB;YACvB,GAAG/B,KAAK;QACV,IACA;YAAEyC,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const {\n    onDismiss,\n    disabled = false,\n    size = 'medium',\n    appearance = 'filled',\n    dismissible = false,\n    role = 'toolbar',\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleTagDismiss: TagGroupState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n\n    // set focus after tag dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    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        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["useTagGroup_unstable","props","ref","onDismiss","disabled","size","appearance","dismissible","role","innerRef","React","useRef","targetDocument","useFluent","findNextFocusable","findPrevFocusable","useFocusFinders","handleTagDismiss","useEventCallback","e","data","activeElement","current","contains","next","container","focus","className","includes","interactionTagSecondaryClassNames","root","prev","parentElement","arrowNavigationProps","useArrowNavigationGroup","circular","axis","memorizeCurrent","components","slot","always","getIntrinsicElementProps","useMergedRefs","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCACyD;8BAEvB;qCACT;wDACE;AAW3C,MAAMA,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EACJC,SAAS,EACTC,WAAW,KAAK,EAChBC,OAAO,QAAQ,EACfC,aAAa,QAAQ,EACrBC,cAAc,KAAK,EACnBC,OAAO,SAAS,EACjB,GAAGP;IAEJ,MAAMQ,WAAWC,OAAMC,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,6BAAAA;IAEjD,MAAMC,mBAAsDC,IAAAA,gCAAAA,EAAiB,CAACC,GAAGC;YAK3EX;QAJJN,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAYgB,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBT,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBS,aAAa;QACnD,IAAA,AAAIZ,CAAAA,oBAAAA,SAASa,OAAO,AAAPA,MAAO,QAAhBb,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBc,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOV,kBAAkBO,eAA8B;gBAAEI,WAAWhB,SAASa,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACC,yEAAAA,CAAkCC,IAAI,GAAG;gBAC7E,MAAMC,OAAOhB,kBAAkBM,cAAcW,aAAa,EAAiB;oBAAEP,WAAWhB,SAASa,OAAO;gBAAC;gBACzGS,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAML,KAAK;YACb,OAAO;gBACL,MAAMK,OAAOhB,kBAAkBM,eAA8B;oBAAEI,WAAWhB,SAASa,OAAO;gBAAC;gBAC3FS,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAML,KAAK;YACb;QACF;IACF;IAEA,MAAMO,uBAAuBC,IAAAA,qCAAAA,EAAwB;QACnDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLpB;QACAT;QACAH;QACAD;QACAE;QACAC;QACA+B,YAAY;YACVR,MAAM;QACR;QAEAA,MAAMS,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FvC,KAAKwC,IAAAA,6BAAAA,EAAcxC,KAAKO;YACxBD;YACA,iBAAiBJ;YACjB,GAAG6B,oBAAoB;YACvB,GAAGhC,KAAK;QACV,IACA;YAAE0C,aAAa;QAAM;IAEzB;AACF"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useTagGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagGroupContextValues, TagGroupState } from './TagGroup.types';\n\nexport function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues {\n  const { handleTagDismiss, size, appearance, dismissible, role } = state;\n  return {\n    tagGroup: React.useMemo(\n      () => ({ handleTagDismiss, size, appearance, dismissible, role }),\n      [handleTagDismiss, size, appearance, dismissible, role],\n    ),\n  };\n}\n"],"names":["useTagGroupContextValues_unstable","state","handleTagDismiss","size","appearance","dismissible","role","tagGroup","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGL;IAClE,OAAO;QACLM,UAAUC,OAAMC,OAAO,CACrB,IAAO,CAAA;gBAAEP;gBAAkBC;gBAAMC;gBAAYC;gBAAaC;YAAK,CAAA,GAC/D;YAACJ;YAAkBC;YAAMC;YAAYC;YAAaC;SAAK;IAE3D;AACF"}
+{"version":3,"sources":["useTagGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagGroupContextValues, TagGroupState } from './TagGroup.types';\n\nexport function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues {\n  const { handleTagDismiss, size, disabled, appearance, dismissible, role } = state;\n  return {\n    tagGroup: React.useMemo(\n      () => ({ handleTagDismiss, size, disabled, appearance, dismissible, role }),\n      [handleTagDismiss, size, disabled, appearance, dismissible, role],\n    ),\n  };\n}\n"],"names":["useTagGroupContextValues_unstable","state","handleTagDismiss","size","disabled","appearance","dismissible","role","tagGroup","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAE,GAAGN;IAC5E,OAAO;QACLO,UAAUC,OAAMC,OAAO,CACrB,IAAO,CAAA;gBAAER;gBAAkBC;gBAAMC;gBAAUC;gBAAYC;gBAAaC;YAAK,CAAA,GACzE;YAACL;YAAkBC;YAAMC;YAAUC;YAAYC;YAAaC;SAAK;IAErE;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["tagGroupContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n  role: 'toolbar',\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<Pick<TagGroupState, 'appearance' | 'dismissible' | 'role'>>;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = () => React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["TagGroupContext","TagGroupContextProvider","useTagGroupContext_unstable","React","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","role","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,eAAAA;eAAAA;;IAcAC,uBAAAA;eAAAA;;IAEAC,2BAAAA;eAAAA;;;;iEAnBU;AAGhB,MAAMF,kBAAAA,WAAAA,GAAkBG,OAAMC,aAAa,CAAmCC;AAErF,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,MAAM;IACNC,MAAM;AACR;AAQO,MAAMR,0BAA0BD,gBAAgBU,QAAQ;AAExD,MAAMR,8BAA8B;QAAMC;WAAAA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACX,gBAAAA,MAAAA,QAAjBG,sBAAAA,KAAAA,IAAAA,oBAAqCG;AAA0B"}
+{"version":3,"sources":["tagGroupContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n  role: 'toolbar',\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &\n  Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'role'>>;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = () => React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["TagGroupContext","TagGroupContextProvider","useTagGroupContext_unstable","React","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","role","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,eAAAA;eAAAA;;IAcAC,uBAAAA;eAAAA;;IAEAC,2BAAAA;eAAAA;;;;iEAnBU;AAGhB,MAAMF,kBAAAA,WAAAA,GAAkBG,OAAMC,aAAa,CAAmCC;AAErF,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,MAAM;IACNC,MAAM;AACR;AAQO,MAAMR,0BAA0BD,gBAAgBU,QAAQ;AAExD,MAAMR,8BAA8B;QAAMC;WAAAA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACX,gBAAAA,MAAAA,QAAjBG,sBAAAA,KAAAA,IAAAA,oBAAqCG;AAA0B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tags",
-  "version": "9.3.16",
+  "version": "9.3.17",
   "description": "Fluent UI Tag component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,14 +37,14 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.13.4",
-    "@fluentui/react-avatar": "^9.6.37",
+    "@fluentui/react-aria": "^9.13.5",
+    "@fluentui/react-avatar": "^9.6.38",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.0.42",
+    "@fluentui/react-jsx-runtime": "^9.0.43",
     "@fluentui/react-shared-contexts": "^9.20.0",
-    "@fluentui/react-tabster": "^9.22.5",
+    "@fluentui/react-tabster": "^9.22.6",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.13",
+    "@fluentui/react-utilities": "^9.18.14",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },