@fluentui/react-tags 9.1.3 → 9.2.1
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.md +32 -9
- package/dist/index.d.ts +4 -2
- package/lib/components/InteractionTag/useInteractionTag.js +2 -2
- package/lib/components/InteractionTag/useInteractionTag.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/TagGroup.types.js.map +1 -1
- package/lib/components/TagGroup/useTagGroup.js +3 -1
- package/lib/components/TagGroup/useTagGroup.js.map +1 -1
- package/lib/components/TagGroup/useTagGroupContextValues.js +7 -3
- package/lib/components/TagGroup/useTagGroupContextValues.js.map +1 -1
- package/lib/contexts/tagGroupContext.js.map +1 -1
- package/lib-commonjs/components/InteractionTag/useInteractionTag.js +2 -2
- package/lib-commonjs/components/InteractionTag/useInteractionTag.js.map +1 -1
- package/lib-commonjs/components/Tag/useTag.js +2 -2
- package/lib-commonjs/components/Tag/useTag.js.map +1 -1
- package/lib-commonjs/components/TagGroup/useTagGroup.js +3 -1
- package/lib-commonjs/components/TagGroup/useTagGroup.js.map +1 -1
- package/lib-commonjs/components/TagGroup/useTagGroupContextValues.js +7 -3
- package/lib-commonjs/components/TagGroup/useTagGroupContextValues.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,46 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tags
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 02 Apr 2024 09:41:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.2.1)
|
|
8
|
+
|
|
9
|
+
Tue, 02 Apr 2024 09:41:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.2.0..@fluentui/react-tags_v9.2.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.10.3 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.6.20 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.19.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.18.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.2.0)
|
|
22
|
+
|
|
23
|
+
Mon, 25 Mar 2024 11:12:15 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.1.3..@fluentui/react-tags_v9.2.0)
|
|
25
|
+
|
|
26
|
+
### Minor changes
|
|
27
|
+
|
|
28
|
+
- feat: adds appearance and dismissible to TagGroupContext ([PR #30800](https://github.com/microsoft/fluentui/pull/30800) by bernardo.sunderhus@gmail.com)
|
|
29
|
+
|
|
7
30
|
## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.1.3)
|
|
8
31
|
|
|
9
|
-
Mon, 18 Mar 2024 19:
|
|
32
|
+
Mon, 18 Mar 2024 19:50:46 GMT
|
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.1.2..@fluentui/react-tags_v9.1.3)
|
|
11
34
|
|
|
12
35
|
### Patches
|
|
13
36
|
|
|
14
|
-
- Bump @fluentui/react-aria to v9.10.2 ([PR #
|
|
15
|
-
- Bump @fluentui/react-avatar to v9.6.19 ([PR #
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #
|
|
17
|
-
- Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #
|
|
18
|
-
- Bump @fluentui/react-tabster to v9.19.5 ([PR #
|
|
19
|
-
- Bump @fluentui/react-theme to v9.1.19 ([PR #
|
|
20
|
-
- Bump @fluentui/react-utilities to v9.18.5 ([PR #
|
|
37
|
+
- Bump @fluentui/react-aria to v9.10.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
38
|
+
- Bump @fluentui/react-avatar to v9.6.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
39
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
40
|
+
- Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
41
|
+
- Bump @fluentui/react-tabster to v9.19.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
42
|
+
- Bump @fluentui/react-theme to v9.1.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
43
|
+
- Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
21
44
|
|
|
22
45
|
## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.1.2)
|
|
23
46
|
|
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'>>;
|
|
217
|
+
declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'appearance' | 'dismissible'>>;
|
|
218
218
|
|
|
219
219
|
export declare type TagGroupContextValues = {
|
|
220
220
|
tagGroup: TagGroupContextValue;
|
|
@@ -229,6 +229,8 @@ export declare type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlo
|
|
|
229
229
|
*/
|
|
230
230
|
onDismiss?: TagDismissHandler<Value>;
|
|
231
231
|
size?: TagSize;
|
|
232
|
+
appearance?: TagAppearance;
|
|
233
|
+
dismissible?: boolean;
|
|
232
234
|
};
|
|
233
235
|
|
|
234
236
|
export declare type TagGroupSlots = {
|
|
@@ -238,7 +240,7 @@ export declare type TagGroupSlots = {
|
|
|
238
240
|
/**
|
|
239
241
|
* State used in rendering TagGroup
|
|
240
242
|
*/
|
|
241
|
-
export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size'>> & {
|
|
243
|
+
export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {
|
|
242
244
|
handleTagDismiss: TagDismissHandler<Value>;
|
|
243
245
|
};
|
|
244
246
|
|
|
@@ -10,10 +10,10 @@ 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 } = useTagGroupContext_unstable();
|
|
13
|
+
const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();
|
|
14
14
|
const id = useId('fui-InteractionTag-', props.id);
|
|
15
15
|
const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');
|
|
16
|
-
const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
|
|
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
19
|
disabled,
|
|
@@ -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 } = useTagGroupContext_unstable();\n\n const id = useId('fui-InteractionTag-', props.id);\n\n const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n const {
|
|
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"],"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"}
|
|
@@ -21,9 +21,9 @@ 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 } = useTagGroupContext_unstable();
|
|
24
|
+
const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible } = useTagGroupContext_unstable();
|
|
25
25
|
const id = useId('fui-Tag', props.id);
|
|
26
|
-
const { appearance = 'filled', disabled = false, dismissible = false, shape = 'rounded', size = contextSize, value = id } = props;
|
|
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)=>{
|
|
28
28
|
var _props_onClick;
|
|
29
29
|
(_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, ev);
|
|
@@ -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 {
|
|
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 } = 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 ...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","id","disabled","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,EACJC,gBAAgB,EAChBC,MAAMC,WAAW,EACjBC,YAAYC,iBAAiB,EAC7BC,aAAaC,kBAAkB,EAChC,GAAGhB;IAEJ,MAAMiB,KAAKtB,MAAM,WAAWa,MAAMS,EAAE;IAEpC,MAAM,EACJJ,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CI,WAAW,KAAK,EAChBH,cAAcC,+BAAAA,gCAAAA,qBAAsB,KAAK,EACzCG,QAAQ,SAAS,EACjBR,OAAOC,WAAW,EAClBQ,QAAQH,EAAE,EACX,GAAGT;IAEJ,MAAMa,iBAAiB3B,iBAAiB,CAAC4B;YACvCd;SAAAA,iBAAAA,MAAMe,OAAO,cAAbf,qCAAAA,oBAAAA,OAAgBc;QAChB,IAAI,CAACA,GAAGE,gBAAgB,EAAE;YACxBd,6BAAAA,uCAAAA,iBAAmBY,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMK,mBAAmB/B,iBAAiB,CAAC4B;YACzCd;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOkB,SAAS,cAAhBlB,uCAAAA,sBAAAA,OAAmBc;QACnB,IAAI,CAACA,GAAGE,gBAAgB,IAAKF,CAAAA,GAAGK,GAAG,KAAK7B,UAAUwB,GAAGK,GAAG,KAAK5B,SAAQ,GAAI;YACvEW,6BAAAA,uCAAAA,iBAAmBY,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMQ,cAAcb,cAAc,WAAW;IAE7C,OAAO;QACLF;QACAgB,aAAazB,iBAAiB,CAACe,MAAM;QACrCW,YAAY7B,gBAAgB,CAACU,KAAK;QAClCO;QACAH;QACAI;QACAR;QAEAoB,YAAY;YACVC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACf;QAEAL,MAAMpC,KAAK0C,MAAM,CACf7C,yBAAyBmC,aAAa;YACpCnB;YACA,GAAGD,KAAK;YACRS;YACA,GAAIF,eAAe;gBAAEQ,SAASF;gBAAgBK,WAAWD;YAAiB,CAAC;QAC7E,IACA;YAAEG;QAAY;QAGhBK,OAAOrC,KAAK2C,QAAQ,CAAC/B,MAAMyB,KAAK,EAAE;YAAEL,aAAa;QAAO;QACxDM,MAAMtC,KAAK2C,QAAQ,CAAC/B,MAAM0B,IAAI,EAAE;YAAEN,aAAa;QAAO;QACtDO,aAAavC,KAAK2C,QAAQ,CAAC/B,MAAM2B,WAAW,EAAE;YAC5CK,iBAAiB;YACjBC,cAAc;gBACZC,UAAUlC,MAAMkC,QAAQ;YAC1B;YACAd,aAAa;QACf;QACAQ,eAAexC,KAAK2C,QAAQ,CAAC/B,MAAM4B,aAAa,EAAE;YAAER,aAAa;QAAO;QACxES,aAAazC,KAAK2C,QAAQ,CAAC/B,MAAM6B,WAAW,EAAE;YAC5CG,iBAAiBzB;YACjB0B,cAAc;gBACZC,wBAAU,oBAAC7C;gBACX8C,MAAM;YACR;YACAf,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagSize, TagValue, TagDismissHandler } from '../../utils/types';\nimport { TagGroupContextValue } from '../../contexts/tagGroupContext';\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};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n Required<Pick<TagGroupProps, 'size'>> & {\n handleTagDismiss: TagDismissHandler<Value>;\n };\n"],"names":[],"mappings":"AAAA,
|
|
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';\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 };\n"],"names":[],"mappings":"AAAA,WAiCI"}
|
|
@@ -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' } = props;
|
|
15
|
+
const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false } = props;
|
|
16
16
|
const innerRef = React.useRef();
|
|
17
17
|
const { targetDocument } = useFluent();
|
|
18
18
|
const { findNextFocusable, findPrevFocusable } = useFocusFinders();
|
|
@@ -52,6 +52,8 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
|
|
|
52
52
|
return {
|
|
53
53
|
handleTagDismiss,
|
|
54
54
|
size,
|
|
55
|
+
appearance,
|
|
56
|
+
dismissible,
|
|
55
57
|
components: {
|
|
56
58
|
root: 'div'
|
|
57
59
|
},
|
|
@@ -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' } = 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
|
|
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 } = 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 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: '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","appearance","dismissible","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,EAAEC,aAAa,QAAQ,EAAEC,cAAc,KAAK,EAAE,GAAGL;IAEnF,MAAMM,WAAWjB,MAAMkB,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAM,EAAEY,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGf;IAEjD,MAAMgB,mBAAsDpB,iBAAiB,CAACqB,GAAGC;YAK3EP;QAJJJ,sBAAAA,gCAAAA,UAAYU,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,CAACvB,kCAAkCwB,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,uBAAuB/B,wBAAwB;QACnDgC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLjB;QACAR;QACAC;QACAC;QACAwB,YAAY;YACVP,MAAM;QACR;QAEAA,MAAM7B,KAAKqC,MAAM,CACfxC,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FW,KAAKT,cAAcS,KAAKK;YACxByB,MAAM;YACN,GAAGN,oBAAoB;YACvB,GAAGzB,KAAK;QACV,IACA;YAAEgC,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export function useTagGroupContextValues_unstable(state) {
|
|
3
|
-
const { handleTagDismiss, size } = state;
|
|
3
|
+
const { handleTagDismiss, size, appearance, dismissible } = state;
|
|
4
4
|
return {
|
|
5
5
|
tagGroup: React.useMemo(()=>({
|
|
6
6
|
handleTagDismiss,
|
|
7
|
-
size
|
|
7
|
+
size,
|
|
8
|
+
appearance,
|
|
9
|
+
dismissible
|
|
8
10
|
}), [
|
|
9
11
|
handleTagDismiss,
|
|
10
|
-
size
|
|
12
|
+
size,
|
|
13
|
+
appearance,
|
|
14
|
+
dismissible
|
|
11
15
|
])
|
|
12
16
|
};
|
|
13
17
|
}
|
|
@@ -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 } = state;\n return {\n tagGroup: React.useMemo(() => ({ handleTagDismiss, size })
|
|
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 } = state;\n return {\n tagGroup: React.useMemo(\n () => ({ handleTagDismiss, size, appearance, dismissible }),\n [handleTagDismiss, size, appearance, dismissible],\n ),\n };\n}\n"],"names":["React","useTagGroupContextValues_unstable","state","handleTagDismiss","size","appearance","dismissible","tagGroup","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAGJ;IAC5D,OAAO;QACLK,UAAUP,MAAMQ,OAAO,CACrB,IAAO,CAAA;gBAAEL;gBAAkBC;gBAAMC;gBAAYC;YAAY,CAAA,GACzD;YAACH;YAAkBC;YAAMC;YAAYC;SAAY;IAErD;AACF"}
|
|
@@ -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};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>>;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = () => React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,gCAAkBD,MAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,MAAM;AACR;
|
|
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};\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'>>;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = () => React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,gCAAkBD,MAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,MAAM;AACR;AAQA,OAAO,MAAMC,0BAA0BN,gBAAgBO,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QAAMT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,8BAAjBD,+BAAAA,oBAAqCI;AAA0B,EAAE"}
|
|
@@ -13,10 +13,10 @@ 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 } = (0, _tagGroupContext.useTagGroupContext_unstable)();
|
|
16
|
+
const { handleTagDismiss, size: contextSize, 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
|
-
const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
|
|
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
22
|
disabled,
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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, appearance: contextAppearance } = useTagGroupContext_unstable();\n const id = useId('fui-InteractionTag-', props.id);\n const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : '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","appearance","contextAppearance","useTagGroupContext_unstable","id","useId","interactionTagPrimaryId","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,EAAEC,YAAYC,iBAAiB,EAAE,GAAGC,IAAAA,4CAA2B;IAC1G,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,uBAAuBT,MAAMQ,EAAE;IAChD,MAAME,0BAA0BD,IAAAA,qBAAK,EAAC;IACtC,MAAM,EAAEJ,aAAaC,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoB,QAAQ,EAAEK,WAAW,KAAK,EAAEC,QAAQ,SAAS,EAAET,OAAOC,WAAW,EAAES,QAAQL,EAAE,EAAE,GAAGR;IACxL,OAAO;QACHK;QACAM;QACAT;QACAQ;QACAE;QACAT;QACAU;QACAC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CjB;YACA,GAAGD,KAAK;YACRQ;QACJ,IAAI;YACAW,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -24,9 +24,9 @@ const tagAvatarShapeMap = {
|
|
|
24
24
|
circular: 'circular'
|
|
25
25
|
};
|
|
26
26
|
const useTag_unstable = (props, ref)=>{
|
|
27
|
-
const { handleTagDismiss, size: contextSize } = (0, _tagGroupContext.useTagGroupContext_unstable)();
|
|
27
|
+
const { handleTagDismiss, size: contextSize, appearance: contextAppearance, dismissible: contextDismissible } = (0, _tagGroupContext.useTagGroupContext_unstable)();
|
|
28
28
|
const id = (0, _reactutilities.useId)('fui-Tag', props.id);
|
|
29
|
-
const { appearance = 'filled', disabled = false, dismissible = false, shape = 'rounded', size = contextSize, value = id } = props;
|
|
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)=>{
|
|
31
31
|
var _props_onClick;
|
|
32
32
|
(_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, ev);
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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, appearance: contextAppearance, dismissible: contextDismissible } = useTagGroupContext_unstable();\n const id = useId('fui-Tag', props.id);\n 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;\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","appearance","contextAppearance","dismissible","contextDismissible","useTagGroupContext_unstable","id","useId","disabled","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,EAAEC,YAAYC,iBAAiB,EAAEC,aAAaC,kBAAkB,EAAE,GAAGC,IAAAA,4CAA2B;IAC3I,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,WAAWX,MAAMU,EAAE;IACpC,MAAM,EAAEL,aAAaC,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoB,QAAQ,EAAEM,WAAW,KAAK,EAAEL,cAAcC,uBAAuB,QAAQA,uBAAuB,KAAK,IAAIA,qBAAqB,KAAK,EAAEK,QAAQ,SAAS,EAAEV,OAAOC,WAAW,EAAEU,QAAQJ,EAAE,EAAE,GAAGV;IACjS,MAAMe,iBAAiBC,IAAAA,gCAAgB,EAAC,CAACC;QACrC,IAAIC;QACHA,CAAAA,iBAAiBlB,MAAMmB,OAAO,AAAD,MAAO,QAAQD,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,IAAI,CAACpB,OAAOiB;QAC7G,IAAI,CAACA,GAAGI,gBAAgB,EAAE;YACtBnB,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBe,IAAI;gBACrFH;YACJ;QACJ;IACJ;IACA,MAAMQ,mBAAmBN,IAAAA,gCAAgB,EAAC,CAACC;QACvC,IAAIM;QACJvB,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAI,AAACuB,CAAAA,mBAAmBvB,MAAMwB,SAAS,AAAD,MAAO,QAAQD,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBH,IAAI,CAACpB,OAAOiB;QACnK,IAAI,CAACA,GAAGI,gBAAgB,IAAKJ,CAAAA,GAAGQ,GAAG,KAAKC,oBAAM,IAAIT,GAAGQ,GAAG,KAAKE,uBAAS,AAAD,GAAI;YACrEzB,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBe,IAAI;gBACrFH;YACJ;QACJ;IACJ;IACA,MAAMc,cAAcrB,cAAc,WAAW;IAC7C,OAAO;QACHF;QACAwB,aAAahC,iBAAiB,CAACgB,MAAM;QACrCiB,YAAYpC,gBAAgB,CAACS,KAAK;QAClCS;QACAL;QACAM;QACAV;QACA4B,YAAY;YACRC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACjB;QACAL,MAAMM,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAACZ,aAAa;YACpD3B;YACA,GAAGD,KAAK;YACRU;YACA,GAAGH,eAAe;gBACdY,SAASJ;gBACTS,WAAWF;YACf,CAAC;QACL,IAAI;YACAM;QACJ;QACAK,OAAOK,oBAAI,CAACG,QAAQ,CAACzC,MAAMiC,KAAK,EAAE;YAC9BL,aAAa;QACjB;QACAM,MAAMI,oBAAI,CAACG,QAAQ,CAACzC,MAAMkC,IAAI,EAAE;YAC5BN,aAAa;QACjB;QACAO,aAAaG,oBAAI,CAACG,QAAQ,CAACzC,MAAMmC,WAAW,EAAE;YAC1CO,iBAAiB;YACjBC,cAAc;gBACVC,UAAU5C,MAAM4C,QAAQ;YAC5B;YACAhB,aAAa;QACjB;QACAQ,eAAeE,oBAAI,CAACG,QAAQ,CAACzC,MAAMoC,aAAa,EAAE;YAC9CR,aAAa;QACjB;QACAS,aAAaC,oBAAI,CAACG,QAAQ,CAACzC,MAAMqC,WAAW,EAAE;YAC1CK,iBAAiBnC;YACjBoC,cAAc;gBACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,0BAAc,EAAE;gBAC5DC,MAAM;YACV;YACApB,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -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' } = props;
|
|
18
|
+
const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false } = props;
|
|
19
19
|
const innerRef = _react.useRef();
|
|
20
20
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
21
21
|
const { findNextFocusable, findPrevFocusable } = (0, _reacttabster.useFocusFinders)();
|
|
@@ -55,6 +55,8 @@ const useTagGroup_unstable = (props, ref)=>{
|
|
|
55
55
|
return {
|
|
56
56
|
handleTagDismiss,
|
|
57
57
|
size,
|
|
58
|
+
appearance,
|
|
59
|
+
dismissible,
|
|
58
60
|
components: {
|
|
59
61
|
root: 'div'
|
|
60
62
|
},
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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', appearance = 'filled', dismissible = false } = 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 appearance,\n dismissible,\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","appearance","dismissible","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,EAAEC,aAAa,QAAQ,EAAEC,cAAc,KAAK,EAAE,GAAGL;IACnF,MAAMM,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;QACJhB,cAAc,QAAQA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUc,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;QACAX;QACAC;QACAC;QACA+B,YAAY;YACRR,MAAM;QACV;QACAA,MAAMS,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FtC,KAAKuC,IAAAA,6BAAa,EAACvC,KAAKK;YACxBmC,MAAM;YACN,GAAGV,oBAAoB;YACvB,GAAG/B,KAAK;QACZ,IAAI;YACA0C,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -11,14 +11,18 @@ 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 } = state;
|
|
14
|
+
const { handleTagDismiss, size, appearance, dismissible } = state;
|
|
15
15
|
return {
|
|
16
16
|
tagGroup: _react.useMemo(()=>({
|
|
17
17
|
handleTagDismiss,
|
|
18
|
-
size
|
|
18
|
+
size,
|
|
19
|
+
appearance,
|
|
20
|
+
dismissible
|
|
19
21
|
}), [
|
|
20
22
|
handleTagDismiss,
|
|
21
|
-
size
|
|
23
|
+
size,
|
|
24
|
+
appearance,
|
|
25
|
+
dismissible
|
|
22
26
|
])
|
|
23
27
|
};
|
|
24
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTagGroupContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTagGroupContextValues_unstable(state) {\n const { handleTagDismiss, size } = state;\n return {\n tagGroup: React.useMemo(()=>({\n handleTagDismiss,\n size\n }), [\n handleTagDismiss,\n size\n ])\n };\n}\n"],"names":["useTagGroupContextValues_unstable","state","handleTagDismiss","size","tagGroup","React","useMemo"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,
|
|
1
|
+
{"version":3,"sources":["useTagGroupContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTagGroupContextValues_unstable(state) {\n const { handleTagDismiss, size, appearance, dismissible } = state;\n return {\n tagGroup: React.useMemo(()=>({\n handleTagDismiss,\n size,\n appearance,\n dismissible\n }), [\n handleTagDismiss,\n size,\n appearance,\n dismissible\n ])\n };\n}\n"],"names":["useTagGroupContextValues_unstable","state","handleTagDismiss","size","appearance","dismissible","tagGroup","React","useMemo"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAGJ;IAC5D,OAAO;QACHK,UAAUC,OAAMC,OAAO,CAAC,IAAK,CAAA;gBACrBN;gBACAC;gBACAC;gBACAC;YACJ,CAAA,GAAI;YACJH;YACAC;YACAC;YACAC;SACH;IACL;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tags",
|
|
3
|
-
"version": "9.1
|
|
3
|
+
"version": "9.2.1",
|
|
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.10.
|
|
41
|
-
"@fluentui/react-avatar": "^9.6.
|
|
40
|
+
"@fluentui/react-aria": "^9.10.3",
|
|
41
|
+
"@fluentui/react-avatar": "^9.6.20",
|
|
42
42
|
"@fluentui/react-icons": "^2.0.224",
|
|
43
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
44
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
45
|
-
"@fluentui/react-tabster": "^9.19.
|
|
43
|
+
"@fluentui/react-jsx-runtime": "^9.0.35",
|
|
44
|
+
"@fluentui/react-shared-contexts": "^9.16.0",
|
|
45
|
+
"@fluentui/react-tabster": "^9.19.6",
|
|
46
46
|
"@fluentui/react-theme": "^9.1.19",
|
|
47
|
-
"@fluentui/react-utilities": "^9.18.
|
|
47
|
+
"@fluentui/react-utilities": "^9.18.6",
|
|
48
48
|
"@griffel/react": "^1.5.14",
|
|
49
49
|
"@swc/helpers": "^0.5.1"
|
|
50
50
|
},
|