@fluentui/react-tags 9.3.16 → 9.3.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/CHANGELOG.md +32 -2
  2. package/dist/index.d.ts +8 -2
  3. package/lib/components/InteractionTag/useInteractionTag.js +3 -2
  4. package/lib/components/InteractionTag/useInteractionTag.js.map +1 -1
  5. package/lib/components/Tag/useTag.js +4 -4
  6. package/lib/components/Tag/useTag.js.map +1 -1
  7. package/lib/components/TagGroup/TagGroup.types.js.map +1 -1
  8. package/lib/components/TagGroup/useTagGroup.js +3 -1
  9. package/lib/components/TagGroup/useTagGroup.js.map +1 -1
  10. package/lib/components/TagGroup/useTagGroupContextValues.js +3 -1
  11. package/lib/components/TagGroup/useTagGroupContextValues.js.map +1 -1
  12. package/lib/contexts/tagGroupContext.js.map +1 -1
  13. package/lib-commonjs/components/InteractionTag/useInteractionTag.js +3 -2
  14. package/lib-commonjs/components/InteractionTag/useInteractionTag.js.map +1 -1
  15. package/lib-commonjs/components/Tag/useTag.js +4 -4
  16. package/lib-commonjs/components/Tag/useTag.js.map +1 -1
  17. package/lib-commonjs/components/TagGroup/TagGroup.types.js.map +1 -1
  18. package/lib-commonjs/components/TagGroup/useTagGroup.js +3 -1
  19. package/lib-commonjs/components/TagGroup/useTagGroup.js.map +1 -1
  20. package/lib-commonjs/components/TagGroup/useTagGroupContextValues.js +3 -1
  21. package/lib-commonjs/components/TagGroup/useTagGroupContextValues.js.map +1 -1
  22. package/lib-commonjs/contexts/tagGroupContext.js.map +1 -1
  23. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,12 +1,42 @@
1
1
  # Change Log - @fluentui/react-tags
2
2
 
3
- This log was last generated on Thu, 15 Aug 2024 13:46:54 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 23 Sep 2024 12:36:04 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.3.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.18)
8
+
9
+ Mon, 23 Sep 2024 12:36:04 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.17..@fluentui/react-tags_v9.3.18)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-aria to v9.13.6 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
15
+ - Bump @fluentui/react-avatar to v9.6.39 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v9.0.44 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
17
+ - Bump @fluentui/react-shared-contexts to v9.20.1 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
18
+ - Bump @fluentui/react-tabster to v9.22.7 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
19
+ - Bump @fluentui/react-theme to v9.1.20 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
20
+ - Bump @fluentui/react-utilities to v9.18.15 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
21
+
22
+ ## [9.3.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.17)
23
+
24
+ Tue, 10 Sep 2024 10:19:09 GMT
25
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.16..@fluentui/react-tags_v9.3.17)
26
+
27
+ ### Patches
28
+
29
+ - fix(react-tags): allows TagGroup to be disabled ([PR #32317](https://github.com/microsoft/fluentui/pull/32317) by jiangemma@microsoft.com)
30
+ - 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)
31
+ - Bump @fluentui/react-aria to v9.13.5 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
32
+ - Bump @fluentui/react-avatar to v9.6.38 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
33
+ - Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
34
+ - Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
35
+ - Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
36
+
7
37
  ## [9.3.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.16)
8
38
 
9
- Thu, 15 Aug 2024 13:46:54 GMT
39
+ Thu, 15 Aug 2024 13:49:46 GMT
10
40
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.15..@fluentui/react-tags_v9.3.16)
11
41
 
12
42
  ### Patches
package/dist/index.d.ts CHANGED
@@ -214,7 +214,7 @@ export declare const tagGroupClassNames: SlotClassNames<TagGroupSlots>;
214
214
  /**
215
215
  * Context shared between TagGroup and its children components
216
216
  */
217
- declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'appearance' | 'dismissible' | 'role'>>;
217
+ declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'role'>>;
218
218
 
219
219
  export declare type TagGroupContextValues = {
220
220
  tagGroup: TagGroupContextValue;
@@ -228,6 +228,12 @@ export declare type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlo
228
228
  * Callback for when a tag is dismissed
229
229
  */
230
230
  onDismiss?: TagDismissHandler<Value>;
231
+ /**
232
+ * A TagGroup can show that it cannot be interacted with.
233
+ *
234
+ * @default false
235
+ */
236
+ disabled?: boolean;
231
237
  size?: TagSize;
232
238
  appearance?: TagAppearance;
233
239
  dismissible?: boolean;
@@ -240,7 +246,7 @@ export declare type TagGroupSlots = {
240
246
  /**
241
247
  * State used in rendering TagGroup
242
248
  */
243
- export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {
249
+ export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'disabled' | 'size' | 'appearance' | 'dismissible'>> & {
244
250
  handleTagDismiss: TagDismissHandler<Value>;
245
251
  role?: React_2.AriaRole;
246
252
  };
package/lib/components/InteractionTag/useInteractionTag.js CHANGED
@@ -10,13 +10,13 @@ import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
10
10
  * @param props - props from this instance of InteractionTag
11
11
  * @param ref - reference to root HTMLDivElement of InteractionTag
12
12
  */ export const useInteractionTag_unstable = (props, ref)=>{
13
- const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();
13
+ const { handleTagDismiss, size: contextSize, disabled: contextDisabled, appearance: contextAppearance } = useTagGroupContext_unstable();
14
14
  const id = useId('fui-InteractionTag-', props.id);
15
15
  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');
16
16
  const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
17
17
  return {
18
18
  appearance,
19
- disabled,
19
+ disabled: contextDisabled ? true : disabled,
20
20
  handleTagDismiss,
21
21
  interactionTagPrimaryId,
22
22
  shape,
@@ -28,6 +28,7 @@ import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
28
28
  root: slot.always(getIntrinsicElementProps('div', {
29
29
  ref,
30
30
  ...props,
31
+ disabled: contextDisabled ? true : disabled,
31
32
  id
32
33
  }), {
33
34
  elementType: 'div'
package/lib/components/InteractionTag/useInteractionTag.js.map CHANGED
@@ -1 +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"}
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 {\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 CHANGED
@@ -21,7 +21,7 @@ const tagAvatarShapeMap = {
21
21
  * @param props - props from this instance of Tag
22
22
  * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag
23
23
  */ export const useTag_unstable = (props, ref)=>{
24
- const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible, role: tagGroupRole } = useTagGroupContext_unstable();
24
+ const { handleTagDismiss, size: contextSize, disabled: contextDisabled, appearance: contextAppearance, dismissible: contextDismissible, role: tagGroupRole } = useTagGroupContext_unstable();
25
25
  const id = useId('fui-Tag', props.id);
26
26
  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;
27
27
  const dismissOnClick = useEventCallback((ev)=>{
@@ -47,7 +47,7 @@ const tagAvatarShapeMap = {
47
47
  appearance,
48
48
  avatarShape: tagAvatarShapeMap[shape],
49
49
  avatarSize: tagAvatarSizeMap[size],
50
- disabled,
50
+ disabled: contextDisabled ? true : disabled,
51
51
  dismissible,
52
52
  shape,
53
53
  size,
@@ -63,6 +63,7 @@ const tagAvatarShapeMap = {
63
63
  ref,
64
64
  role: tagGroupRole === 'listbox' ? 'option' : undefined,
65
65
  ...props,
66
+ disabled: contextDisabled ? true : disabled,
66
67
  id,
67
68
  ...dismissible && {
68
69
  onClick: dismissOnClick,
@@ -90,8 +91,7 @@ const tagAvatarShapeMap = {
90
91
  dismissIcon: slot.optional(props.dismissIcon, {
91
92
  renderByDefault: dismissible,
92
93
  defaultProps: {
93
- children: /*#__PURE__*/ React.createElement(DismissRegular, null),
94
- role: 'img'
94
+ children: /*#__PURE__*/ React.createElement(DismissRegular, null)
95
95
  },
96
96
  elementType: 'span'
97
97
  })
package/lib/components/Tag/useTag.js.map CHANGED
@@ -1 +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"}
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 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 CHANGED
@@ -1 +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"}
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 /**\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 CHANGED
@@ -12,7 +12,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
12
12
  * @param props - props from this instance of TagGroup
13
13
  * @param ref - reference to root HTMLDivElement of TagGroup
14
14
  */ export const useTagGroup_unstable = (props, ref)=>{
15
- const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;
15
+ const { onDismiss, disabled = false, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;
16
16
  const innerRef = React.useRef();
17
17
  const { targetDocument } = useFluent();
18
18
  const { findNextFocusable, findPrevFocusable } = useFocusFinders();
@@ -53,6 +53,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
53
53
  handleTagDismiss,
54
54
  role,
55
55
  size,
56
+ disabled,
56
57
  appearance,
57
58
  dismissible,
58
59
  components: {
@@ -64,6 +65,7 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
64
65
  // but since it would be a breaking change to fix it, we are casting ref to it's proper type
65
66
  ref: useMergedRefs(ref, innerRef),
66
67
  role,
68
+ 'aria-disabled': disabled,
67
69
  ...arrowNavigationProps,
68
70
  ...props
69
71
  }), {
package/lib/components/TagGroup/useTagGroup.js.map CHANGED
@@ -1 +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"}
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 {\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 CHANGED
@@ -1,16 +1,18 @@
1
1
  import * as React from 'react';
2
2
  export function useTagGroupContextValues_unstable(state) {
3
- const { handleTagDismiss, size, appearance, dismissible, role } = state;
3
+ const { handleTagDismiss, size, disabled, appearance, dismissible, role } = state;
4
4
  return {
5
5
  tagGroup: React.useMemo(()=>({
6
6
  handleTagDismiss,
7
7
  size,
8
+ disabled,
8
9
  appearance,
9
10
  dismissible,
10
11
  role
11
12
  }), [
12
13
  handleTagDismiss,
13
14
  size,
15
+ disabled,
14
16
  appearance,
15
17
  dismissible,
16
18
  role
package/lib/components/TagGroup/useTagGroupContextValues.js.map CHANGED
@@ -1 +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"}
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, 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 CHANGED
@@ -1 +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"}
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, '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 CHANGED
@@ -13,13 +13,13 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
13
  const _reactutilities = require("@fluentui/react-utilities");
14
14
  const _tagGroupContext = require("../../contexts/tagGroupContext");
15
15
  const useInteractionTag_unstable = (props, ref)=>{
16
- const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = (0, _tagGroupContext.useTagGroupContext_unstable)();
16
+ const { handleTagDismiss, size: contextSize, disabled: contextDisabled, appearance: contextAppearance } = (0, _tagGroupContext.useTagGroupContext_unstable)();
17
17
  const id = (0, _reactutilities.useId)('fui-InteractionTag-', props.id);
18
18
  const interactionTagPrimaryId = (0, _reactutilities.useId)('fui-InteractionTagPrimary-');
19
19
  const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
20
20
  return {
21
21
  appearance,
22
- disabled,
22
+ disabled: contextDisabled ? true : disabled,
23
23
  handleTagDismiss,
24
24
  interactionTagPrimaryId,
25
25
  shape,
@@ -31,6 +31,7 @@ const useInteractionTag_unstable = (props, ref)=>{
31
31
  root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
32
32
  ref,
33
33
  ...props,
34
+ disabled: contextDisabled ? true : disabled,
34
35
  id
35
36
  }), {
36
37
  elementType: 'div'
package/lib-commonjs/components/InteractionTag/useInteractionTag.js.map CHANGED
@@ -1 +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"}
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 {\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 CHANGED
@@ -24,7 +24,7 @@ const tagAvatarShapeMap = {
24
24
  circular: 'circular'
25
25
  };
26
26
  const useTag_unstable = (props, ref)=>{
27
- const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible, role: tagGroupRole } = (0, _tagGroupContext.useTagGroupContext_unstable)();
27
+ const { handleTagDismiss, size: contextSize, disabled: contextDisabled, appearance: contextAppearance, dismissible: contextDismissible, role: tagGroupRole } = (0, _tagGroupContext.useTagGroupContext_unstable)();
28
28
  const id = (0, _reactutilities.useId)('fui-Tag', props.id);
29
29
  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;
30
30
  const dismissOnClick = (0, _reactutilities.useEventCallback)((ev)=>{
@@ -50,7 +50,7 @@ const useTag_unstable = (props, ref)=>{
50
50
  appearance,
51
51
  avatarShape: tagAvatarShapeMap[shape],
52
52
  avatarSize: tagAvatarSizeMap[size],
53
- disabled,
53
+ disabled: contextDisabled ? true : disabled,
54
54
  dismissible,
55
55
  shape,
56
56
  size,
@@ -66,6 +66,7 @@ const useTag_unstable = (props, ref)=>{
66
66
  ref,
67
67
  role: tagGroupRole === 'listbox' ? 'option' : undefined,
68
68
  ...props,
69
+ disabled: contextDisabled ? true : disabled,
69
70
  id,
70
71
  ...dismissible && {
71
72
  onClick: dismissOnClick,
@@ -93,8 +94,7 @@ const useTag_unstable = (props, ref)=>{
93
94
  dismissIcon: _reactutilities.slot.optional(props.dismissIcon, {
94
95
  renderByDefault: dismissible,
95
96
  defaultProps: {
96
- children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null),
97
- role: 'img'
97
+ children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null)
98
98
  },
99
99
  elementType: 'span'
100
100
  })
package/lib-commonjs/components/Tag/useTag.js.map CHANGED
@@ -1 +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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"}
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 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 CHANGED
@@ -1 +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"}
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 /**\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 CHANGED
@@ -15,7 +15,7 @@ const _reacttabster = require("@fluentui/react-tabster");
15
15
  const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
16
16
  const _useInteractionTagSecondaryStylesstyles = require("../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles");
17
17
  const useTagGroup_unstable = (props, ref)=>{
18
- const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;
18
+ const { onDismiss, disabled = false, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;
19
19
  const innerRef = _react.useRef();
20
20
  const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
21
21
  const { findNextFocusable, findPrevFocusable } = (0, _reacttabster.useFocusFinders)();
@@ -56,6 +56,7 @@ const useTagGroup_unstable = (props, ref)=>{
56
56
  handleTagDismiss,
57
57
  role,
58
58
  size,
59
+ disabled,
59
60
  appearance,
60
61
  dismissible,
61
62
  components: {
@@ -67,6 +68,7 @@ const useTagGroup_unstable = (props, ref)=>{
67
68
  // but since it would be a breaking change to fix it, we are casting ref to it's proper type
68
69
  ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
69
70
  role,
71
+ 'aria-disabled': disabled,
70
72
  ...arrowNavigationProps,
71
73
  ...props
72
74
  }), {
package/lib-commonjs/components/TagGroup/useTagGroup.js.map CHANGED
@@ -1 +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"}
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 {\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 CHANGED
@@ -11,17 +11,19 @@ Object.defineProperty(exports, "useTagGroupContextValues_unstable", {
11
11
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
12
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
13
  function useTagGroupContextValues_unstable(state) {
14
- const { handleTagDismiss, size, appearance, dismissible, role } = state;
14
+ const { handleTagDismiss, size, disabled, appearance, dismissible, role } = state;
15
15
  return {
16
16
  tagGroup: _react.useMemo(()=>({
17
17
  handleTagDismiss,
18
18
  size,
19
+ disabled,
19
20
  appearance,
20
21
  dismissible,
21
22
  role
22
23
  }), [
23
24
  handleTagDismiss,
24
25
  size,
26
+ disabled,
25
27
  appearance,
26
28
  dismissible,
27
29
  role
package/lib-commonjs/components/TagGroup/useTagGroupContextValues.js.map CHANGED
@@ -1 +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"}
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, 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 CHANGED
@@ -1 +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"}
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, '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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-tags",
3
- "version": "9.3.16",
3
+ "version": "9.3.18",
4
4
  "description": "Fluent UI Tag component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -37,14 +37,14 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "@fluentui/keyboard-keys": "^9.0.7",
40
- "@fluentui/react-aria": "^9.13.4",
41
- "@fluentui/react-avatar": "^9.6.37",
40
+ "@fluentui/react-aria": "^9.13.6",
41
+ "@fluentui/react-avatar": "^9.6.39",
42
42
  "@fluentui/react-icons": "^2.0.245",
43
- "@fluentui/react-jsx-runtime": "^9.0.42",
44
- "@fluentui/react-shared-contexts": "^9.20.0",
45
- "@fluentui/react-tabster": "^9.22.5",
46
- "@fluentui/react-theme": "^9.1.19",
47
- "@fluentui/react-utilities": "^9.18.13",
43
+ "@fluentui/react-jsx-runtime": "^9.0.44",
44
+ "@fluentui/react-shared-contexts": "^9.20.1",
45
+ "@fluentui/react-tabster": "^9.22.7",
46
+ "@fluentui/react-theme": "^9.1.20",
47
+ "@fluentui/react-utilities": "^9.18.15",
48
48
  "@griffel/react": "^1.5.22",
49
49
  "@swc/helpers": "^0.5.1"
50
50
  },