@fluentui/react-tags 9.0.0 → 9.0.2
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.
- package/CHANGELOG.json +91 -1
- package/CHANGELOG.md +30 -2
- package/lib/components/InteractionTag/useInteractionTag.js +2 -2
- package/lib/components/InteractionTag/useInteractionTag.js.map +1 -1
- package/lib/components/InteractionTagPrimary/useInteractionTagPrimary.js +2 -2
- package/lib/components/InteractionTagPrimary/useInteractionTagPrimary.js.map +1 -1
- package/lib/components/InteractionTagSecondary/useInteractionTagSecondary.js +2 -2
- package/lib/components/InteractionTagSecondary/useInteractionTagSecondary.js.map +1 -1
- package/lib/components/Tag/useTag.js +2 -2
- package/lib/components/Tag/useTag.js.map +1 -1
- package/lib/components/TagGroup/useTagGroup.js +5 -2
- package/lib/components/TagGroup/useTagGroup.js.map +1 -1
- package/lib-commonjs/components/InteractionTag/useInteractionTag.js +1 -1
- package/lib-commonjs/components/InteractionTag/useInteractionTag.js.map +1 -1
- package/lib-commonjs/components/InteractionTagPrimary/useInteractionTagPrimary.js +1 -1
- package/lib-commonjs/components/InteractionTagPrimary/useInteractionTagPrimary.js.map +1 -1
- package/lib-commonjs/components/InteractionTagSecondary/useInteractionTagSecondary.js +1 -1
- package/lib-commonjs/components/InteractionTagSecondary/useInteractionTagSecondary.js.map +1 -1
- package/lib-commonjs/components/Tag/useTag.js +1 -1
- package/lib-commonjs/components/Tag/useTag.js.map +1 -1
- package/lib-commonjs/components/TagGroup/useTagGroup.js +4 -1
- package/lib-commonjs/components/TagGroup/useTagGroup.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,97 @@
|
|
|
2
2
|
"name": "@fluentui/react-tags",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 09 Oct 2023 20:41:58 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tags_v9.0.2",
|
|
7
|
+
"version": "9.0.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-tags",
|
|
13
|
+
"comment": "Bump @fluentui/react-aria to v9.3.41",
|
|
14
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-tags",
|
|
19
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.38",
|
|
20
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-tags",
|
|
25
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.15",
|
|
26
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-tags",
|
|
31
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.10.0",
|
|
32
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-tags",
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.5",
|
|
38
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-tags",
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v9.14.2",
|
|
44
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"date": "Thu, 05 Oct 2023 15:25:33 GMT",
|
|
51
|
+
"tag": "@fluentui/react-tags_v9.0.1",
|
|
52
|
+
"version": "9.0.1",
|
|
53
|
+
"comments": {
|
|
54
|
+
"patch": [
|
|
55
|
+
{
|
|
56
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
57
|
+
"package": "@fluentui/react-tags",
|
|
58
|
+
"commit": "86dd76990e3da5af1f2b6b04a3aec46141d5a653",
|
|
59
|
+
"comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-tags",
|
|
64
|
+
"comment": "Bump @fluentui/react-aria to v9.3.40",
|
|
65
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-tags",
|
|
70
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.37",
|
|
71
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-tags",
|
|
76
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.14",
|
|
77
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-tags",
|
|
82
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.4",
|
|
83
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-tags",
|
|
88
|
+
"comment": "Bump @fluentui/react-utilities to v9.14.1",
|
|
89
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"date": "Wed, 04 Oct 2023 08:45:46 GMT",
|
|
6
96
|
"tag": "@fluentui/react-tags_v9.0.0",
|
|
7
97
|
"version": "9.0.0",
|
|
8
98
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,40 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tags
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 09 Oct 2023 20:41:58 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.0.2)
|
|
8
|
+
|
|
9
|
+
Mon, 09 Oct 2023 20:41:58 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.0.1..@fluentui/react-tags_v9.0.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.3.41 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.5.38 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.15 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.10.0 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.13.5 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.14.2 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.0.1)
|
|
22
|
+
|
|
23
|
+
Thu, 05 Oct 2023 15:25:33 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.0.0..@fluentui/react-tags_v9.0.1)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- chore: migrate from getNativeElementProps to getIntrinsicElementProps ([PR #29387](https://github.com/microsoft/fluentui/pull/29387) by bernardo.sunderhus@gmail.com)
|
|
29
|
+
- Bump @fluentui/react-aria to v9.3.40 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
30
|
+
- Bump @fluentui/react-avatar to v9.5.37 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
31
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.14 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
32
|
+
- Bump @fluentui/react-tabster to v9.13.4 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
33
|
+
- Bump @fluentui/react-utilities to v9.14.1 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
34
|
+
|
|
7
35
|
## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.0.0)
|
|
8
36
|
|
|
9
|
-
Wed, 04 Oct 2023 08:
|
|
37
|
+
Wed, 04 Oct 2023 08:45:46 GMT
|
|
10
38
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags-preview_v0.4.0..@fluentui/react-tags_v9.0.0)
|
|
11
39
|
|
|
12
40
|
### Minor changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render InteractionTag.
|
|
@@ -25,7 +25,7 @@ import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
|
|
|
25
25
|
components: {
|
|
26
26
|
root: 'div'
|
|
27
27
|
},
|
|
28
|
-
root: slot.always(
|
|
28
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
29
29
|
ref,
|
|
30
30
|
...props,
|
|
31
31
|
id
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n props: InteractionTagProps,\n ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();\n\n const id = useId('fui-InteractionTag-', props.id);\n\n const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;\n\n return {\n appearance,\n disabled,\n handleTagDismiss,\n interactionTagPrimaryId,\n shape,\n size,\n value,\n\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n id,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","id","interactionTagPrimaryId","appearance","disabled","shape","value","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAE,GAAGN;IAEhD,MAAMO,KAAKT,MAAM,uBAAuBI,MAAMK,EAAE;IAEhD,MAAMC,0BAA0BV,MAAM;IAEtC,MAAM,EAAEW,aAAa,QAAQ,EAAEC,WAAW,KAAK,EAAEC,QAAQ,SAAS,EAAEN,OAAOC,WAAW,EAAEM,QAAQL,EAAE,EAAE,GAAGL;IAEvG,OAAO;QACLO;QACAC;QACAN;QACAI;QACAG;QACAN;QACAO;QAEAC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMf,KAAKgB,MAAM,CACflB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRK;QACF,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';
|
|
4
4
|
const avatarSizeMap = {
|
|
5
5
|
medium: 28,
|
|
@@ -36,7 +36,7 @@ const avatarShapeMap = {
|
|
|
36
36
|
primaryText: 'span',
|
|
37
37
|
secondaryText: 'span'
|
|
38
38
|
},
|
|
39
|
-
root: slot.always(
|
|
39
|
+
root: slot.always(getIntrinsicElementProps('button', {
|
|
40
40
|
ref,
|
|
41
41
|
disabled,
|
|
42
42
|
id: interactionTagPrimaryId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInteractionTagPrimary.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useInteractionTagPrimary.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagPrimaryProps, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\nconst avatarSizeMap = {\n medium: 28,\n small: 20,\n 'extra-small': 16,\n} as const;\n\nconst avatarShapeMap = {\n rounded: 'square',\n circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render InteractionTagPrimary.\n *\n * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,\n * before being passed to renderInteractionTagPrimary_unstable.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */\nexport const useInteractionTagPrimary_unstable = (\n props: InteractionTagPrimaryProps,\n ref: React.Ref<HTMLButtonElement>,\n): InteractionTagPrimaryState => {\n const { appearance, disabled, interactionTagPrimaryId, shape, size } = useInteractionTagContext_unstable();\n const { hasSecondaryAction = false } = props;\n\n return {\n appearance,\n avatarShape: avatarShapeMap[shape],\n avatarSize: avatarSizeMap[size],\n disabled,\n hasSecondaryAction,\n shape,\n size,\n\n components: {\n root: 'button',\n media: 'span',\n icon: 'span',\n primaryText: 'span',\n secondaryText: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n disabled,\n id: interactionTagPrimaryId,\n ...props,\n }),\n { elementType: 'button' },\n ),\n\n media: slot.optional(props.media, { elementType: 'span' }),\n icon: slot.optional(props.icon, { elementType: 'span' }),\n primaryText: slot.optional(props.primaryText, {\n renderByDefault: true,\n defaultProps: {\n children: props.children,\n },\n elementType: 'span',\n }),\n secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useInteractionTagContext_unstable","avatarSizeMap","medium","small","avatarShapeMap","rounded","circular","useInteractionTagPrimary_unstable","props","ref","appearance","disabled","interactionTagPrimaryId","shape","size","hasSecondaryAction","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","always","id","elementType","optional","renderByDefault","defaultProps","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,uBAAuB,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGd;IACvE,MAAM,EAAEe,qBAAqB,KAAK,EAAE,GAAGP;IAEvC,OAAO;QACLE;QACAM,aAAaZ,cAAc,CAACS,MAAM;QAClCI,YAAYhB,aAAa,CAACa,KAAK;QAC/BH;QACAI;QACAF;QACAC;QAEAI,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;QACjB;QAEAJ,MAAMpB,KAAKyB,MAAM,CACf1B,yBAAyB,UAAU;YACjCW;YACAE;YACAc,IAAIb;YACJ,GAAGJ,KAAK;QACV,IACA;YAAEkB,aAAa;QAAS;QAG1BN,OAAOrB,KAAK4B,QAAQ,CAACnB,MAAMY,KAAK,EAAE;YAAEM,aAAa;QAAO;QACxDL,MAAMtB,KAAK4B,QAAQ,CAACnB,MAAMa,IAAI,EAAE;YAAEK,aAAa;QAAO;QACtDJ,aAAavB,KAAK4B,QAAQ,CAACnB,MAAMc,WAAW,EAAE;YAC5CM,iBAAiB;YACjBC,cAAc;gBACZC,UAAUtB,MAAMsB,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAH,eAAexB,KAAK4B,QAAQ,CAACnB,MAAMe,aAAa,EAAE;YAAEG,aAAa;QAAO;IAC1E;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, useEventCallback, slot, useId } from '@fluentui/react-utilities';
|
|
3
3
|
import { Delete, Backspace } from '@fluentui/keyboard-keys';
|
|
4
4
|
import { DismissRegular } from '@fluentui/react-icons';
|
|
5
5
|
import { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';
|
|
@@ -40,7 +40,7 @@ import { useInteractionTagContext_unstable } from '../../contexts/interactionTag
|
|
|
40
40
|
components: {
|
|
41
41
|
root: 'button'
|
|
42
42
|
},
|
|
43
|
-
root: slot.always(
|
|
43
|
+
root: slot.always(getIntrinsicElementProps('button', {
|
|
44
44
|
children: /*#__PURE__*/ React.createElement(DismissRegular, null),
|
|
45
45
|
type: 'button',
|
|
46
46
|
disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInteractionTagSecondary.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useInteractionTagSecondary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot, useId } from '@fluentui/react-utilities';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { InteractionTagSecondaryProps, InteractionTagSecondaryState } from './InteractionTagSecondary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\n/**\n * Create the state required to render InteractionTagSecondary.\n *\n * The returned state can be modified with hooks such as useInteractionTagSecondaryStyles_unstable,\n * before being passed to renderInteractionTagSecondary_unstable.\n *\n * @param props - props from this instance of InteractionTagSecondary\n * @param ref - reference to root HTMLButtonElement of InteractionTagSecondary\n */\nexport const useInteractionTagSecondary_unstable = (\n props: InteractionTagSecondaryProps,\n ref: React.Ref<HTMLButtonElement>,\n): InteractionTagSecondaryState => {\n const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } =\n useInteractionTagContext_unstable();\n\n const id = useId('fui-InteractionTagSecondary-', props.id);\n\n const onClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n props?.onClick?.(ev);\n if (!ev.defaultPrevented) {\n handleTagDismiss?.(ev, { value });\n }\n });\n\n const onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n props?.onKeyDown?.(ev);\n if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n handleTagDismiss?.(ev, { value });\n }\n });\n\n return {\n appearance,\n disabled,\n shape,\n size,\n components: {\n root: 'button',\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n children: <DismissRegular />,\n type: 'button',\n disabled,\n ref,\n 'aria-labelledby': `${interactionTagPrimaryId} ${id}`,\n ...props,\n id,\n onClick,\n onKeyDown,\n }),\n { elementType: 'button' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","useId","Delete","Backspace","DismissRegular","useInteractionTagContext_unstable","useInteractionTagSecondary_unstable","props","ref","appearance","disabled","handleTagDismiss","interactionTagPrimaryId","shape","size","value","id","onClick","ev","defaultPrevented","onKeyDown","key","components","root","always","children","type","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,KAAK,QAAQ,4BAA4B;AACpG,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,uBAAuB,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAC3FV;IAEF,MAAMW,KAAKf,MAAM,gCAAgCM,MAAMS,EAAE;IAEzD,MAAMC,UAAUlB,iBAAiB,CAACmB;YAChCX;QAAAA,kBAAAA,6BAAAA,iBAAAA,MAAOU,OAAO,cAAdV,qCAAAA,oBAAAA,OAAiBW;QACjB,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBR,6BAAAA,uCAAAA,iBAAmBO,IAAI;gBAAEH;YAAM;QACjC;IACF;IAEA,MAAMK,YAAYrB,iBAAiB,CAACmB;YAClCX;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOa,SAAS,cAAhBb,uCAAAA,sBAAAA,OAAmBW;QACnB,IAAI,CAACA,GAAGC,gBAAgB,IAAKD,CAAAA,GAAGG,GAAG,KAAKnB,UAAUgB,GAAGG,GAAG,KAAKlB,SAAQ,GAAI;YACvEQ,6BAAAA,uCAAAA,iBAAmBO,IAAI;gBAAEH;YAAM;QACjC;IACF;IAEA,OAAO;QACLN;QACAC;QACAG;QACAC;QACAQ,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMvB,KAAKwB,MAAM,CACf1B,yBAAyB,UAAU;YACjC2B,wBAAU,oBAACrB;YACXsB,MAAM;YACNhB;YACAF;YACA,mBAAmB,CAAC,EAAEI,wBAAwB,CAAC,EAAEI,GAAG,CAAC;YACrD,GAAGT,KAAK;YACRS;YACAC;YACAG;QACF,IACA;YAAEO,aAAa;QAAS;IAE5B;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { DismissRegular } from '@fluentui/react-icons';
|
|
4
4
|
import { Delete, Backspace } from '@fluentui/keyboard-keys';
|
|
5
5
|
import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
|
|
@@ -59,7 +59,7 @@ const tagAvatarShapeMap = {
|
|
|
59
59
|
secondaryText: 'span',
|
|
60
60
|
dismissIcon: 'span'
|
|
61
61
|
},
|
|
62
|
-
root: slot.always(
|
|
62
|
+
root: slot.always(getIntrinsicElementProps(elementType, {
|
|
63
63
|
ref,
|
|
64
64
|
...props,
|
|
65
65
|
id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { TagProps, TagState } from './Tag.types';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\nconst tagAvatarSizeMap = {\n medium: 28,\n small: 20,\n 'extra-small': 16,\n} as const;\n\nconst tagAvatarShapeMap = {\n rounded: 'square',\n circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */\nexport const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {\n const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();\n\n const id = useId('fui-Tag', props.id);\n\n const {\n appearance = 'filled',\n disabled = false,\n dismissible = false,\n shape = 'rounded',\n size = contextSize,\n value = id,\n } = props;\n\n const dismissOnClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n props.onClick?.(ev);\n if (!ev.defaultPrevented) {\n handleTagDismiss?.(ev, { value });\n }\n });\n\n const dismissOnKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n props?.onKeyDown?.(ev);\n if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n handleTagDismiss?.(ev, { value });\n }\n });\n\n const elementType = dismissible ? 'button' : 'span';\n\n return {\n appearance,\n avatarShape: tagAvatarShapeMap[shape],\n avatarSize: tagAvatarSizeMap[size],\n disabled,\n dismissible,\n shape,\n size,\n\n components: {\n root: elementType,\n media: 'span',\n icon: 'span',\n primaryText: 'span',\n secondaryText: 'span',\n dismissIcon: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps(elementType, {\n ref,\n ...props,\n id,\n ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),\n }),\n { elementType },\n ),\n\n media: slot.optional(props.media, { elementType: 'span' }),\n icon: slot.optional(props.icon, { elementType: 'span' }),\n primaryText: slot.optional(props.primaryText, {\n renderByDefault: true,\n defaultProps: {\n children: props.children,\n },\n elementType: 'span',\n }),\n secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n dismissIcon: slot.optional(props.dismissIcon, {\n renderByDefault: dismissible,\n defaultProps: {\n children: <DismissRegular />,\n role: 'img',\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useId","slot","DismissRegular","Delete","Backspace","useTagGroupContext_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","useTag_unstable","props","ref","handleTagDismiss","size","contextSize","id","appearance","disabled","dismissible","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","optional","renderByDefault","defaultProps","children","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACpG,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,MAAMC,mBAAmB;IACvBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,oBAAoB;IACxBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAE,GAAGZ;IAEhD,MAAMa,KAAKlB,MAAM,WAAWa,MAAMK,EAAE;IAEpC,MAAM,EACJC,aAAa,QAAQ,EACrBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,QAAQ,SAAS,EACjBN,OAAOC,WAAW,EAClBM,QAAQL,EAAE,EACX,GAAGL;IAEJ,MAAMW,iBAAiBzB,iBAAiB,CAAC0B;YACvCZ;SAAAA,iBAAAA,MAAMa,OAAO,cAAbb,qCAAAA,oBAAAA,OAAgBY;QAChB,IAAI,CAACA,GAAGE,gBAAgB,EAAE;YACxBZ,6BAAAA,uCAAAA,iBAAmBU,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMK,mBAAmB7B,iBAAiB,CAAC0B;YACzCZ;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOgB,SAAS,cAAhBhB,uCAAAA,sBAAAA,OAAmBY;QACnB,IAAI,CAACA,GAAGE,gBAAgB,IAAKF,CAAAA,GAAGK,GAAG,KAAK3B,UAAUsB,GAAGK,GAAG,KAAK1B,SAAQ,GAAI;YACvEW,6BAAAA,uCAAAA,iBAAmBU,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMQ,cAAcV,cAAc,WAAW;IAE7C,OAAO;QACLF;QACAa,aAAavB,iBAAiB,CAACa,MAAM;QACrCW,YAAY3B,gBAAgB,CAACU,KAAK;QAClCI;QACAC;QACAC;QACAN;QAEAkB,YAAY;YACVC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACf;QAEAL,MAAMlC,KAAKwC,MAAM,CACf3C,yBAAyBiC,aAAa;YACpCjB;YACA,GAAGD,KAAK;YACRK;YACA,GAAIG,eAAe;gBAAEK,SAASF;gBAAgBK,WAAWD;YAAiB,CAAC;QAC7E,IACA;YAAEG;QAAY;QAGhBK,OAAOnC,KAAKyC,QAAQ,CAAC7B,MAAMuB,KAAK,EAAE;YAAEL,aAAa;QAAO;QACxDM,MAAMpC,KAAKyC,QAAQ,CAAC7B,MAAMwB,IAAI,EAAE;YAAEN,aAAa;QAAO;QACtDO,aAAarC,KAAKyC,QAAQ,CAAC7B,MAAMyB,WAAW,EAAE;YAC5CK,iBAAiB;YACjBC,cAAc;gBACZC,UAAUhC,MAAMgC,QAAQ;YAC1B;YACAd,aAAa;QACf;QACAQ,eAAetC,KAAKyC,QAAQ,CAAC7B,MAAM0B,aAAa,EAAE;YAAER,aAAa;QAAO;QACxES,aAAavC,KAAKyC,QAAQ,CAAC7B,MAAM2B,WAAW,EAAE;YAC5CG,iBAAiBtB;YACjBuB,cAAc;gBACZC,wBAAU,oBAAC3C;gBACX4C,MAAM;YACR;YACAf,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
|
|
4
4
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
5
5
|
import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';
|
|
@@ -55,7 +55,10 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
|
|
|
55
55
|
components: {
|
|
56
56
|
root: 'div'
|
|
57
57
|
},
|
|
58
|
-
root: slot.always(
|
|
58
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
59
|
+
// FIXME:
|
|
60
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
61
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
59
62
|
ref: useMergedRefs(ref, innerRef),
|
|
60
63
|
role: 'toolbar',
|
|
61
64
|
...arrowNavigationProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n const { onDismiss, size = 'medium' } = props;\n\n const innerRef = React.useRef<HTMLElement>();\n const { targetDocument } = useFluent();\n const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n const handleTagDismiss: TagGroupState['handleTagDismiss'] = useEventCallback((e, data) => {\n onDismiss?.(e, data);\n\n // set focus after tag dismiss\n const activeElement = targetDocument?.activeElement;\n if (innerRef.current?.contains(activeElement as HTMLElement)) {\n // focus on next tag only if the active element is within the current tag group\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n if (next) {\n next.focus();\n return;\n }\n\n // if there is no next focusable, focus on the previous focusable\n if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n } else {\n const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n }\n });\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n memorizeCurrent: true,\n });\n\n return {\n handleTagDismiss,\n size,\n\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n role: 'toolbar',\n ...arrowNavigationProps,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","size","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE5G,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iCAAiC,QAAQ,qEAAqE;AAEvH;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGH;IAEvC,MAAMI,WAAWf,MAAMgB,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGT;IAC3B,MAAM,EAAEU,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGb;IAEjD,MAAMc,mBAAsDlB,iBAAiB,CAACmB,GAAGC;YAK3EP;QAJJF,sBAAAA,gCAAAA,UAAYQ,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBN,2BAAAA,qCAAAA,eAAgBM,aAAa;QACnD,KAAIR,oBAAAA,SAASS,OAAO,cAAhBT,wCAAAA,kBAAkBU,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOR,kBAAkBK,eAA8B;gBAAEI,WAAWZ,SAASS,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,0BAAAA,oCAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACrB,kCAAkCsB,IAAI,GAAG;gBAC7E,MAAMC,OAAOb,kBAAkBI,cAAcU,aAAa,EAAiB;oBAAEN,WAAWZ,SAASS,OAAO;gBAAC;gBACzGQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb,OAAO;gBACL,MAAMI,OAAOb,kBAAkBI,eAA8B;oBAAEI,WAAWZ,SAASS,OAAO;gBAAC;gBAC3FQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb;QACF;IACF;IAEA,MAAMM,uBAAuB7B,wBAAwB;QACnD8B,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLjB;QACAN;QAEAwB,YAAY;YACVP,MAAM;QACR;QAEAA,MAAM3B,KAAKmC,MAAM,CACftC,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FW,KAAKT,cAAcS,KAAKG;YACxByB,MAAM;YACN,GAAGN,oBAAoB;YACvB,GAAGvB,KAAK;QACV,IACA;YAAE8B,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -28,7 +28,7 @@ const useInteractionTag_unstable = (props, ref)=>{
|
|
|
28
28
|
components: {
|
|
29
29
|
root: 'div'
|
|
30
30
|
},
|
|
31
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
31
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
32
32
|
ref,
|
|
33
33
|
...props,
|
|
34
34
|
id
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInteractionTag.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useInteractionTag.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */ export const useInteractionTag_unstable = (props, ref)=>{\n const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();\n const id = useId('fui-InteractionTag-', props.id);\n const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;\n return {\n appearance,\n disabled,\n handleTagDismiss,\n interactionTagPrimaryId,\n shape,\n size,\n value,\n components: {\n root: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n ref,\n ...props,\n id\n }), {\n elementType: 'div'\n })\n };\n};\n"],"names":["useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","useTagGroupContext_unstable","id","useId","interactionTagPrimaryId","appearance","disabled","shape","value","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCAC+B;iCACV;AASjC,MAAMA,6BAA6B,CAACC,OAAOC;IAClD,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAE,GAAGC,IAAAA,4CAA2B;IAC3E,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,uBAAuBP,MAAMM,EAAE;IAChD,MAAME,0BAA0BD,IAAAA,qBAAK,EAAC;IACtC,MAAM,EAAEE,aAAa,QAAQ,EAAEC,WAAW,KAAK,EAAEC,QAAQ,SAAS,EAAER,OAAOC,WAAW,EAAEQ,QAAQN,EAAE,EAAE,GAAGN;IACvG,OAAO;QACHS;QACAC;QACAR;QACAM;QACAG;QACAR;QACAS;QACAC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9ChB;YACA,GAAGD,KAAK;YACRM;QACJ,IAAI;YACAY,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -39,7 +39,7 @@ const useInteractionTagPrimary_unstable = (props, ref)=>{
|
|
|
39
39
|
primaryText: 'span',
|
|
40
40
|
secondaryText: 'span'
|
|
41
41
|
},
|
|
42
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
42
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
|
|
43
43
|
ref,
|
|
44
44
|
disabled,
|
|
45
45
|
id: interactionTagPrimaryId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInteractionTagPrimary.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useInteractionTagPrimary.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\nconst avatarSizeMap = {\n medium: 28,\n small: 20,\n 'extra-small': 16\n};\nconst avatarShapeMap = {\n rounded: 'square',\n circular: 'circular'\n};\n/**\n * Create the state required to render InteractionTagPrimary.\n *\n * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,\n * before being passed to renderInteractionTagPrimary_unstable.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */ export const useInteractionTagPrimary_unstable = (props, ref)=>{\n const { appearance, disabled, interactionTagPrimaryId, shape, size } = useInteractionTagContext_unstable();\n const { hasSecondaryAction = false } = props;\n return {\n appearance,\n avatarShape: avatarShapeMap[shape],\n avatarSize: avatarSizeMap[size],\n disabled,\n hasSecondaryAction,\n shape,\n size,\n components: {\n root: 'button',\n media: 'span',\n icon: 'span',\n primaryText: 'span',\n secondaryText: 'span'\n },\n root: slot.always(getIntrinsicElementProps('button', {\n ref,\n disabled,\n id: interactionTagPrimaryId,\n ...props\n }), {\n elementType: 'button'\n }),\n media: slot.optional(props.media, {\n elementType: 'span'\n }),\n icon: slot.optional(props.icon, {\n elementType: 'span'\n }),\n primaryText: slot.optional(props.primaryText, {\n renderByDefault: true,\n defaultProps: {\n children: props.children\n },\n elementType: 'span'\n }),\n secondaryText: slot.optional(props.secondaryText, {\n elementType: 'span'\n })\n };\n};\n"],"names":["useInteractionTagPrimary_unstable","avatarSizeMap","medium","small","avatarShapeMap","rounded","circular","props","ref","appearance","disabled","interactionTagPrimaryId","shape","size","useInteractionTagContext_unstable","hasSecondaryAction","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","slot","always","getIntrinsicElementProps","id","elementType","optional","renderByDefault","defaultProps","children"],"mappings":";;;;+BAoBiBA;;;eAAAA;;;;iEApBM;gCACwB;uCACG;AAClD,MAAMC,gBAAgB;IAClBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACnB;AACA,MAAMC,iBAAiB;IACnBC,SAAS;IACTC,UAAU;AACd;AASW,MAAMN,oCAAoC,CAACO,OAAOC;IACzD,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,uBAAuB,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,IAAAA,wDAAiC;IACxG,MAAM,EAAEC,qBAAqB,KAAK,EAAE,GAAGR;IACvC,OAAO;QACHE;QACAO,aAAaZ,cAAc,CAACQ,MAAM;QAClCK,YAAYhB,aAAa,CAACY,KAAK;QAC/BH;QACAK;QACAH;QACAC;QACAK,YAAY;YACRC,MAAM;YACNC,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;QACnB;QACAJ,MAAMK,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,UAAU;YACjDlB;YACAE;YACAiB,IAAIhB;YACJ,GAAGJ,KAAK;QACZ,IAAI;YACAqB,aAAa;QACjB;QACAR,OAAOI,oBAAI,CAACK,QAAQ,CAACtB,MAAMa,KAAK,EAAE;YAC9BQ,aAAa;QACjB;QACAP,MAAMG,oBAAI,CAACK,QAAQ,CAACtB,MAAMc,IAAI,EAAE;YAC5BO,aAAa;QACjB;QACAN,aAAaE,oBAAI,CAACK,QAAQ,CAACtB,MAAMe,WAAW,EAAE;YAC1CQ,iBAAiB;YACjBC,cAAc;gBACVC,UAAUzB,MAAMyB,QAAQ;YAC5B;YACAJ,aAAa;QACjB;QACAL,eAAeC,oBAAI,CAACK,QAAQ,CAACtB,MAAMgB,aAAa,EAAE;YAC9CK,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -43,7 +43,7 @@ const useInteractionTagSecondary_unstable = (props, ref)=>{
|
|
|
43
43
|
components: {
|
|
44
44
|
root: 'button'
|
|
45
45
|
},
|
|
46
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
46
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
|
|
47
47
|
children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null),
|
|
48
48
|
type: 'button',
|
|
49
49
|
disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInteractionTagSecondary.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useInteractionTagSecondary.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot, useId } from '@fluentui/react-utilities';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n/**\n * Create the state required to render InteractionTagSecondary.\n *\n * The returned state can be modified with hooks such as useInteractionTagSecondaryStyles_unstable,\n * before being passed to renderInteractionTagSecondary_unstable.\n *\n * @param props - props from this instance of InteractionTagSecondary\n * @param ref - reference to root HTMLButtonElement of InteractionTagSecondary\n */ export const useInteractionTagSecondary_unstable = (props, ref)=>{\n const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } = useInteractionTagContext_unstable();\n const id = useId('fui-InteractionTagSecondary-', props.id);\n const onClick = useEventCallback((ev)=>{\n var _props_onClick;\n props === null || props === void 0 ? void 0 : (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, ev);\n if (!ev.defaultPrevented) {\n handleTagDismiss === null || handleTagDismiss === void 0 ? void 0 : handleTagDismiss(ev, {\n value\n });\n }\n });\n const onKeyDown = useEventCallback((ev)=>{\n var _props_onKeyDown;\n props === null || props === void 0 ? void 0 : (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, ev);\n if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n handleTagDismiss === null || handleTagDismiss === void 0 ? void 0 : handleTagDismiss(ev, {\n value\n });\n }\n });\n return {\n appearance,\n disabled,\n shape,\n size,\n components: {\n root: 'button'\n },\n root: slot.always(getIntrinsicElementProps('button', {\n children: /*#__PURE__*/ React.createElement(DismissRegular, null),\n type: 'button',\n disabled,\n ref,\n 'aria-labelledby': `${interactionTagPrimaryId} ${id}`,\n ...props,\n id,\n onClick,\n onKeyDown\n }), {\n elementType: 'button'\n })\n };\n};\n"],"names":["useInteractionTagSecondary_unstable","props","ref","appearance","disabled","handleTagDismiss","interactionTagPrimaryId","shape","size","value","useInteractionTagContext_unstable","id","useId","onClick","useEventCallback","ev","_props_onClick","call","defaultPrevented","onKeyDown","_props_onKeyDown","key","Delete","Backspace","components","root","slot","always","getIntrinsicElementProps","children","React","createElement","DismissRegular","type","elementType"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACiD;8BACtC;4BACH;uCACmB;AASvC,MAAMA,sCAAsC,CAACC,OAAOC;IAC3D,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,uBAAuB,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,IAAAA,wDAAiC;IACjI,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,gCAAgCX,MAAMU,EAAE;IACzD,MAAME,UAAUC,IAAAA,gCAAgB,EAAC,CAACC;QAC9B,IAAIC;QACJf,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAI,AAACe,CAAAA,iBAAiBf,MAAMY,OAAO,AAAD,MAAO,QAAQG,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeC,IAAI,CAAChB,OAAOc;QAC3J,IAAI,CAACA,GAAGG,gBAAgB,EAAE;YACtBb,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBU,IAAI;gBACrFN;YACJ;QACJ;IACJ;IACA,MAAMU,YAAYL,IAAAA,gCAAgB,EAAC,CAACC;QAChC,IAAIK;QACJnB,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAI,AAACmB,CAAAA,mBAAmBnB,MAAMkB,SAAS,AAAD,MAAO,QAAQC,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBH,IAAI,CAAChB,OAAOc;QACnK,IAAI,CAACA,GAAGG,gBAAgB,IAAKH,CAAAA,GAAGM,GAAG,KAAKC,oBAAM,IAAIP,GAAGM,GAAG,KAAKE,uBAAS,AAAD,GAAI;YACrElB,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBU,IAAI;gBACrFN;YACJ;QACJ;IACJ;IACA,OAAO;QACHN;QACAC;QACAG;QACAC;QACAgB,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,UAAU;YACjDC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,0BAAc,EAAE;YAC5DC,MAAM;YACN7B;YACAF;YACA,mBAAmB,CAAC,EAAEI,wBAAwB,CAAC,EAAEK,GAAG,CAAC;YACrD,GAAGV,KAAK;YACRU;YACAE;YACAM;QACJ,IAAI;YACAe,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -62,7 +62,7 @@ const useTag_unstable = (props, ref)=>{
|
|
|
62
62
|
secondaryText: 'span',
|
|
63
63
|
dismissIcon: 'span'
|
|
64
64
|
},
|
|
65
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
65
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(elementType, {
|
|
66
66
|
ref,
|
|
67
67
|
...props,
|
|
68
68
|
id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTag.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useTag.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\nconst tagAvatarSizeMap = {\n medium: 28,\n small: 20,\n 'extra-small': 16\n};\nconst tagAvatarShapeMap = {\n rounded: 'square',\n circular: 'circular'\n};\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */ export const useTag_unstable = (props, ref)=>{\n const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();\n const id = useId('fui-Tag', props.id);\n const { appearance = 'filled', disabled = false, dismissible = false, shape = 'rounded', size = contextSize, value = id } = props;\n const dismissOnClick = useEventCallback((ev)=>{\n var _props_onClick;\n (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, ev);\n if (!ev.defaultPrevented) {\n handleTagDismiss === null || handleTagDismiss === void 0 ? void 0 : handleTagDismiss(ev, {\n value\n });\n }\n });\n const dismissOnKeyDown = useEventCallback((ev)=>{\n var _props_onKeyDown;\n props === null || props === void 0 ? void 0 : (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, ev);\n if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n handleTagDismiss === null || handleTagDismiss === void 0 ? void 0 : handleTagDismiss(ev, {\n value\n });\n }\n });\n const elementType = dismissible ? 'button' : 'span';\n return {\n appearance,\n avatarShape: tagAvatarShapeMap[shape],\n avatarSize: tagAvatarSizeMap[size],\n disabled,\n dismissible,\n shape,\n size,\n components: {\n root: elementType,\n media: 'span',\n icon: 'span',\n primaryText: 'span',\n secondaryText: 'span',\n dismissIcon: 'span'\n },\n root: slot.always(getIntrinsicElementProps(elementType, {\n ref,\n ...props,\n id,\n ...dismissible && {\n onClick: dismissOnClick,\n onKeyDown: dismissOnKeyDown\n }\n }), {\n elementType\n }),\n media: slot.optional(props.media, {\n elementType: 'span'\n }),\n icon: slot.optional(props.icon, {\n elementType: 'span'\n }),\n primaryText: slot.optional(props.primaryText, {\n renderByDefault: true,\n defaultProps: {\n children: props.children\n },\n elementType: 'span'\n }),\n secondaryText: slot.optional(props.secondaryText, {\n elementType: 'span'\n }),\n dismissIcon: slot.optional(props.dismissIcon, {\n renderByDefault: dismissible,\n defaultProps: {\n children: /*#__PURE__*/ React.createElement(DismissRegular, null),\n role: 'img'\n },\n elementType: 'span'\n })\n };\n};\n"],"names":["useTag_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","props","ref","handleTagDismiss","size","contextSize","useTagGroupContext_unstable","id","useId","appearance","disabled","dismissible","shape","value","dismissOnClick","useEventCallback","ev","_props_onClick","onClick","call","defaultPrevented","dismissOnKeyDown","_props_onKeyDown","onKeyDown","key","Delete","Backspace","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","slot","always","getIntrinsicElementProps","optional","renderByDefault","defaultProps","children","React","createElement","DismissRegular","role"],"mappings":";;;;+BAsBiBA;;;eAAAA;;;;iEAtBM;gCACiD;4BACzC;8BACG;iCACU;AAC5C,MAAMC,mBAAmB;IACrBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACnB;AACA,MAAMC,oBAAoB;IACtBC,SAAS;IACTC,UAAU;AACd;AASW,MAAMN,kBAAkB,CAACO,OAAOC;IACvC,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAE,GAAGC,IAAAA,4CAA2B;IAC3E,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,WAAWP,MAAMM,EAAE;IACpC,MAAM,EAAEE,aAAa,QAAQ,EAAEC,WAAW,KAAK,EAAEC,cAAc,KAAK,EAAEC,QAAQ,SAAS,EAAER,OAAOC,WAAW,EAAEQ,QAAQN,EAAE,EAAE,GAAGN;IAC5H,MAAMa,iBAAiBC,IAAAA,gCAAgB,EAAC,CAACC;QACrC,IAAIC;QACHA,CAAAA,iBAAiBhB,MAAMiB,OAAO,AAAD,MAAO,QAAQD,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,IAAI,CAAClB,OAAOe;QAC7G,IAAI,CAACA,GAAGI,gBAAgB,EAAE;YACtBjB,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBa,IAAI;gBACrFH;YACJ;QACJ;IACJ;IACA,MAAMQ,mBAAmBN,IAAAA,gCAAgB,EAAC,CAACC;QACvC,IAAIM;QACJrB,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAI,AAACqB,CAAAA,mBAAmBrB,MAAMsB,SAAS,AAAD,MAAO,QAAQD,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBH,IAAI,CAAClB,OAAOe;QACnK,IAAI,CAACA,GAAGI,gBAAgB,IAAKJ,CAAAA,GAAGQ,GAAG,KAAKC,oBAAM,IAAIT,GAAGQ,GAAG,KAAKE,uBAAS,AAAD,GAAI;YACrEvB,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBa,IAAI;gBACrFH;YACJ;QACJ;IACJ;IACA,MAAMc,cAAchB,cAAc,WAAW;IAC7C,OAAO;QACHF;QACAmB,aAAa9B,iBAAiB,CAACc,MAAM;QACrCiB,YAAYlC,gBAAgB,CAACS,KAAK;QAClCM;QACAC;QACAC;QACAR;QACA0B,YAAY;YACRC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACjB;QACAL,MAAMM,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAACZ,aAAa;YACpDzB;YACA,GAAGD,KAAK;YACRM;YACA,GAAGI,eAAe;gBACdO,SAASJ;gBACTS,WAAWF;YACf,CAAC;QACL,IAAI;YACAM;QACJ;QACAK,OAAOK,oBAAI,CAACG,QAAQ,CAACvC,MAAM+B,KAAK,EAAE;YAC9BL,aAAa;QACjB;QACAM,MAAMI,oBAAI,CAACG,QAAQ,CAACvC,MAAMgC,IAAI,EAAE;YAC5BN,aAAa;QACjB;QACAO,aAAaG,oBAAI,CAACG,QAAQ,CAACvC,MAAMiC,WAAW,EAAE;YAC1CO,iBAAiB;YACjBC,cAAc;gBACVC,UAAU1C,MAAM0C,QAAQ;YAC5B;YACAhB,aAAa;QACjB;QACAQ,eAAeE,oBAAI,CAACG,QAAQ,CAACvC,MAAMkC,aAAa,EAAE;YAC9CR,aAAa;QACjB;QACAS,aAAaC,oBAAI,CAACG,QAAQ,CAACvC,MAAMmC,WAAW,EAAE;YAC1CK,iBAAiB9B;YACjB+B,cAAc;gBACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,0BAAc,EAAE;gBAC5DC,MAAM;YACV;YACApB,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -58,7 +58,10 @@ const useTagGroup_unstable = (props, ref)=>{
|
|
|
58
58
|
components: {
|
|
59
59
|
root: 'div'
|
|
60
60
|
},
|
|
61
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
61
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
62
|
+
// FIXME:
|
|
63
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
64
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
62
65
|
ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
|
|
63
66
|
role: 'toolbar',
|
|
64
67
|
...arrowNavigationProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTagGroup.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useTagGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */ export const useTagGroup_unstable = (props, ref)=>{\n const { onDismiss, size = 'medium' } = props;\n const innerRef = React.useRef();\n const { targetDocument } = useFluent();\n const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n const handleTagDismiss = useEventCallback((e, data)=>{\n var _innerRef_current;\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e, data);\n // set focus after tag dismiss\n const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n if ((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement)) {\n // focus on next tag only if the active element is within the current tag group\n const next = findNextFocusable(activeElement, {\n container: innerRef.current\n });\n if (next) {\n next.focus();\n return;\n }\n // if there is no next focusable, focus on the previous focusable\n if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.className.includes(interactionTagSecondaryClassNames.root)) {\n const prev = findPrevFocusable(activeElement.parentElement, {\n container: innerRef.current\n });\n prev === null || prev === void 0 ? void 0 : prev.focus();\n } else {\n const prev = findPrevFocusable(activeElement, {\n container: innerRef.current\n });\n prev === null || prev === void 0 ? void 0 : prev.focus();\n }\n }\n });\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n memorizeCurrent: true\n });\n return {\n handleTagDismiss,\n size,\n components: {\n root: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef),\n role: 'toolbar',\n ...arrowNavigationProps,\n ...props\n }), {\n elementType: 'div'\n })\n };\n};\n"],"names":["useTagGroup_unstable","props","ref","onDismiss","size","innerRef","React","useRef","targetDocument","useFluent","findNextFocusable","findPrevFocusable","useFocusFinders","handleTagDismiss","useEventCallback","e","data","_innerRef_current","activeElement","current","contains","next","container","focus","className","includes","interactionTagSecondaryClassNames","root","prev","parentElement","arrowNavigationProps","useArrowNavigationGroup","circular","axis","memorizeCurrent","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACyD;8BACvB;qCACT;wDACE;AASvC,MAAMA,uBAAuB,CAACC,OAAOC;IAC5C,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGH;IACvC,MAAMI,WAAWC,OAAMC,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,6BAAe;IAChE,MAAMC,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,GAAGC;QAC1C,IAAIC;QACJd,cAAc,QAAQA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUY,GAAGC;QACnE,8BAA8B;QAC9B,MAAME,gBAAgBV,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeU,aAAa;QAClH,IAAI,AAACD,CAAAA,oBAAoBZ,SAASc,OAAO,AAAD,MAAO,QAAQF,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBG,QAAQ,CAACF,gBAAgB;YACtI,+EAA+E;YAC/E,MAAMG,OAAOX,kBAAkBQ,eAAe;gBAC1CI,WAAWjB,SAASc,OAAO;YAC/B;YACA,IAAIE,MAAM;gBACNA,KAAKE,KAAK;gBACV;YACJ;YACA,iEAAiE;YACjE,IAAIL,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcM,SAAS,CAACC,QAAQ,CAACC,yEAAiC,CAACC,IAAI,GAAG;gBACxI,MAAMC,OAAOjB,kBAAkBO,cAAcW,aAAa,EAAE;oBACxDP,WAAWjB,SAASc,OAAO;gBAC/B;gBACAS,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKL,KAAK;YAC1D,OAAO;gBACH,MAAMK,OAAOjB,kBAAkBO,eAAe;oBAC1CI,WAAWjB,SAASc,OAAO;gBAC/B;gBACAS,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKL,KAAK;YAC1D;QACJ;IACJ;IACA,MAAMO,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACrB;IACA,OAAO;QACHrB;QACAT;QACA+B,YAAY;YACRR,MAAM;QACV;QACAA,MAAMS,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FpC,KAAKqC,IAAAA,6BAAa,EAACrC,KAAKG;YACxBmC,MAAM;YACN,GAAGV,oBAAoB;YACvB,GAAG7B,KAAK;QACZ,IAAI;YACAwC,aAAa;QACjB;IACJ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tags",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.2",
|
|
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.6",
|
|
40
|
-
"@fluentui/react-aria": "^9.3.
|
|
41
|
-
"@fluentui/react-avatar": "^9.5.
|
|
40
|
+
"@fluentui/react-aria": "^9.3.41",
|
|
41
|
+
"@fluentui/react-avatar": "^9.5.38",
|
|
42
42
|
"@fluentui/react-icons": "^2.0.217",
|
|
43
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
44
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
45
|
-
"@fluentui/react-tabster": "^9.13.
|
|
43
|
+
"@fluentui/react-jsx-runtime": "^9.0.15",
|
|
44
|
+
"@fluentui/react-shared-contexts": "^9.10.0",
|
|
45
|
+
"@fluentui/react-tabster": "^9.13.5",
|
|
46
46
|
"@fluentui/react-theme": "^9.1.14",
|
|
47
|
-
"@fluentui/react-utilities": "^9.14.
|
|
47
|
+
"@fluentui/react-utilities": "^9.14.2",
|
|
48
48
|
"@griffel/react": "^1.5.14",
|
|
49
49
|
"@swc/helpers": "^0.5.1"
|
|
50
50
|
},
|