@fluentui/react-infobutton 9.0.0-beta.58 → 9.0.0-beta.59
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 +57 -6
- package/CHANGELOG.md +22 -7
- package/dist/index.d.ts +1 -1
- package/lib/components/InfoButton/InfoButton.types.js.map +1 -1
- package/lib/components/InfoButton/useInfoButton.js +16 -1
- package/lib/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButton.js +15 -0
- package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
- package/package.json +8 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,58 @@
|
|
|
2
2
|
"name": "@fluentui/react-infobutton",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 12 Sep 2023 08:48:14 GMT",
|
|
6
|
+
"tag": "@fluentui/react-infobutton_v9.0.0-beta.59",
|
|
7
|
+
"version": "9.0.0-beta.59",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "esteban.230@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-infobutton",
|
|
13
|
+
"commit": "634979cbc69ae97e39baf2f4143dab6caa3a6968",
|
|
14
|
+
"comment": "feat(react-infobutton): Removing openOnHover from popover props and adding details about the infobutton pattern."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "esteban.230@hotmail.com",
|
|
18
|
+
"package": "@fluentui/react-infobutton",
|
|
19
|
+
"commit": "92866ff4f0aaf175696e97f29474de19bb904ba6",
|
|
20
|
+
"comment": "fix: Popover should close when tabbing out of the surface."
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-infobutton",
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v9.1.34",
|
|
26
|
+
"commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-infobutton",
|
|
31
|
+
"comment": "Bump @fluentui/react-popover to v9.8.4",
|
|
32
|
+
"commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-infobutton",
|
|
37
|
+
"comment": "Bump @fluentui/react-portal to v9.3.14",
|
|
38
|
+
"commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-infobutton",
|
|
43
|
+
"comment": "Bump @fluentui/react-tabster to v9.12.9",
|
|
44
|
+
"commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-infobutton",
|
|
49
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.7",
|
|
50
|
+
"commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"date": "Wed, 06 Sep 2023 13:31:31 GMT",
|
|
6
57
|
"tag": "@fluentui/react-infobutton_v9.0.0-beta.58",
|
|
7
58
|
"version": "9.0.0-beta.58",
|
|
8
59
|
"comments": {
|
|
@@ -11,31 +62,31 @@
|
|
|
11
62
|
"author": "beachball",
|
|
12
63
|
"package": "@fluentui/react-infobutton",
|
|
13
64
|
"comment": "Bump @fluentui/react-label to v9.1.33",
|
|
14
|
-
"commit": "
|
|
65
|
+
"commit": "52532950407fd4d3664ec6aa337855214233813b"
|
|
15
66
|
},
|
|
16
67
|
{
|
|
17
68
|
"author": "beachball",
|
|
18
69
|
"package": "@fluentui/react-infobutton",
|
|
19
70
|
"comment": "Bump @fluentui/react-popover to v9.8.3",
|
|
20
|
-
"commit": "
|
|
71
|
+
"commit": "52532950407fd4d3664ec6aa337855214233813b"
|
|
21
72
|
},
|
|
22
73
|
{
|
|
23
74
|
"author": "beachball",
|
|
24
75
|
"package": "@fluentui/react-infobutton",
|
|
25
76
|
"comment": "Bump @fluentui/react-tabster to v9.12.8",
|
|
26
|
-
"commit": "
|
|
77
|
+
"commit": "52532950407fd4d3664ec6aa337855214233813b"
|
|
27
78
|
},
|
|
28
79
|
{
|
|
29
80
|
"author": "beachball",
|
|
30
81
|
"package": "@fluentui/react-infobutton",
|
|
31
82
|
"comment": "Bump @fluentui/react-utilities to v9.13.3",
|
|
32
|
-
"commit": "
|
|
83
|
+
"commit": "52532950407fd4d3664ec6aa337855214233813b"
|
|
33
84
|
},
|
|
34
85
|
{
|
|
35
86
|
"author": "beachball",
|
|
36
87
|
"package": "@fluentui/react-infobutton",
|
|
37
88
|
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.6",
|
|
38
|
-
"commit": "
|
|
89
|
+
"commit": "52532950407fd4d3664ec6aa337855214233813b"
|
|
39
90
|
}
|
|
40
91
|
]
|
|
41
92
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,36 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-infobutton
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 12 Sep 2023 08:48:14 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.59](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.59)
|
|
8
|
+
|
|
9
|
+
Tue, 12 Sep 2023 08:48:14 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.58..@fluentui/react-infobutton_v9.0.0-beta.59)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- feat(react-infobutton): Removing openOnHover from popover props and adding details about the infobutton pattern. ([PR #29120](https://github.com/microsoft/fluentui/pull/29120) by esteban.230@hotmail.com)
|
|
15
|
+
- fix: Popover should close when tabbing out of the surface. ([PR #28913](https://github.com/microsoft/fluentui/pull/28913) by esteban.230@hotmail.com)
|
|
16
|
+
- Bump @fluentui/react-label to v9.1.34 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
|
|
17
|
+
- Bump @fluentui/react-popover to v9.8.4 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
|
|
18
|
+
- Bump @fluentui/react-portal to v9.3.14 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.12.9 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
|
|
20
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.7 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
|
|
21
|
+
|
|
7
22
|
## [9.0.0-beta.58](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.58)
|
|
8
23
|
|
|
9
|
-
Wed, 06 Sep 2023 13:
|
|
24
|
+
Wed, 06 Sep 2023 13:31:31 GMT
|
|
10
25
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.57..@fluentui/react-infobutton_v9.0.0-beta.58)
|
|
11
26
|
|
|
12
27
|
### Changes
|
|
13
28
|
|
|
14
|
-
- Bump @fluentui/react-label to v9.1.33 ([PR #
|
|
15
|
-
- Bump @fluentui/react-popover to v9.8.3 ([PR #
|
|
16
|
-
- Bump @fluentui/react-tabster to v9.12.8 ([PR #
|
|
17
|
-
- Bump @fluentui/react-utilities to v9.13.3 ([PR #
|
|
18
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.6 ([PR #
|
|
29
|
+
- Bump @fluentui/react-label to v9.1.33 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
|
|
30
|
+
- Bump @fluentui/react-popover to v9.8.3 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
|
|
31
|
+
- Bump @fluentui/react-tabster to v9.12.8 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
|
|
32
|
+
- Bump @fluentui/react-utilities to v9.13.3 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
|
|
33
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.6 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
|
|
19
34
|
|
|
20
35
|
## [9.0.0-beta.57](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.57)
|
|
21
36
|
|
package/dist/index.d.ts
CHANGED
|
@@ -40,7 +40,7 @@ export declare type InfoButtonSlots = {
|
|
|
40
40
|
/**
|
|
41
41
|
* The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.
|
|
42
42
|
*/
|
|
43
|
-
popover: NonNullable<Slot<Partial<PopoverProps
|
|
43
|
+
popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;
|
|
44
44
|
/**
|
|
45
45
|
* The information to be displayed in the PopoverSurface when the button is pressed.
|
|
46
46
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<PopoverProps
|
|
1
|
+
{"version":3,"sources":["InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;\n\n /**\n * The information to be displayed in the PopoverSurface when the button is pressed.\n */\n info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n /**\n * Size of the InfoButton.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Whether the InfoButton should be rendered inline or on a Portal.\n *\n * @default true\n */\n inline?: boolean;\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;\n"],"names":[],"mappings":"AAAA,WAuCmH"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
|
|
3
|
-
import { getNativeElementProps, mergeCallbacks, useControllableState, slot } from '@fluentui/react-utilities';
|
|
3
|
+
import { getNativeElementProps, mergeCallbacks, useControllableState, slot, useMergedRefs, isHTMLElement } from '@fluentui/react-utilities';
|
|
4
|
+
import { elementContains } from '@fluentui/react-portal';
|
|
4
5
|
import { Popover, PopoverSurface } from '@fluentui/react-popover';
|
|
5
6
|
const infoButtonIconMap = {
|
|
6
7
|
small: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon12, null),
|
|
@@ -63,5 +64,19 @@ const popoverSizeMap = {
|
|
|
63
64
|
});
|
|
64
65
|
state.popover.open = popoverOpen;
|
|
65
66
|
state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data)=>setPopoverOpen(data.open));
|
|
67
|
+
const focusOutRef = React.useCallback((el)=>{
|
|
68
|
+
if (!el) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
el.addEventListener('focusout', (e)=>{
|
|
72
|
+
const nextFocused = e.relatedTarget;
|
|
73
|
+
if (isHTMLElement(nextFocused) && !elementContains(el, nextFocused)) {
|
|
74
|
+
setPopoverOpen(false);
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
}, [
|
|
78
|
+
setPopoverOpen
|
|
79
|
+
]);
|
|
80
|
+
state.info.ref = useMergedRefs(state.info.ref, focusOutRef);
|
|
66
81
|
return state;
|
|
67
82
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport {
|
|
1
|
+
{"version":3,"sources":["useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport {\n getNativeElementProps,\n mergeCallbacks,\n useControllableState,\n slot,\n useMergedRefs,\n isHTMLElement,\n} from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n small: <DefaultInfoButtonIcon12 />,\n medium: <DefaultInfoButtonIcon16 />,\n large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n const { size = 'medium', inline = true } = props;\n\n const state: InfoButtonState = {\n inline,\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n info: PopoverSurface,\n },\n\n root: slot.always(\n getNativeElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref,\n }),\n { elementType: 'button' },\n ),\n popover: slot.always(props.popover, {\n defaultProps: {\n inline,\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n elementType: Popover as React.FC<Partial<Omit<PopoverProps, 'openOnHover'>>>,\n }),\n info: slot.always(props.info, {\n defaultProps: {\n role: 'note',\n tabIndex: -1,\n },\n elementType: PopoverSurface,\n }),\n };\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false,\n });\n\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n const focusOutRef = React.useCallback(\n (el: HTMLDivElement) => {\n if (!el) {\n return;\n }\n\n el.addEventListener('focusout', e => {\n const nextFocused = e.relatedTarget;\n\n if (isHTMLElement(nextFocused) && !elementContains(el, nextFocused)) {\n setPopoverOpen(false);\n }\n });\n },\n [setPopoverOpen],\n );\n\n state.info.ref = useMergedRefs(state.info.ref, focusOutRef);\n\n return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getNativeElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","isHTMLElement","elementContains","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","state","components","root","popover","info","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","focusOutRef","useCallback","el","addEventListener","nextFocused","relatedTarget"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,2BAA2B;AACrH,SACEC,qBAAqB,EACrBC,cAAc,EACdC,oBAAoB,EACpBC,IAAI,EACJC,aAAa,EACbC,aAAa,QACR,4BAA4B;AACnC,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAIlE,MAAMC,oBAAoB;IACxBC,qBAAO,oBAACb;IACRc,sBAAQ,oBAACb;IACTc,qBAAO,oBAACb;AACV;AAEA,MAAMc,iBAAiB;IACrBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAE3C,MAAMI,QAAyB;QAC7BD;QACAD;QAEAG,YAAY;YACVC,MAAM;YACNC,SAASf;YACTgB,MAAMf;QACR;QAEAa,MAAMlB,KAAKqB,MAAM,CACfxB,sBAAsB,UAAU;YAC9ByB,UAAUhB,iBAAiB,CAACQ,KAAK;YACjCS,MAAM;YACN,cAAc;YACd,GAAGX,KAAK;YACRC;QACF,IACA;YAAEW,aAAa;QAAS;QAE1BL,SAASnB,KAAKqB,MAAM,CAACT,MAAMO,OAAO,EAAE;YAClCM,cAAc;gBACZV;gBACAW,aAAa;gBACbZ,MAAMJ,cAAc,CAACI,KAAK;gBAC1Ba,WAAW;YACb;YACAH,aAAapB;QACf;QACAgB,MAAMpB,KAAKqB,MAAM,CAACT,MAAMQ,IAAI,EAAE;YAC5BK,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAanB;QACf;IACF;IAEA,MAAM,CAACyB,aAAaC,eAAe,GAAGhC,qBAAqB;QACzDiB,OAAOA,MAAMG,OAAO,CAACa,IAAI;QACzBC,cAAcjB,MAAMG,OAAO,CAACe,WAAW;QACvCC,cAAc;IAChB;IAEAnB,MAAMG,OAAO,CAACa,IAAI,GAAGF;IACrBd,MAAMG,OAAO,CAACiB,YAAY,GAAGtC,eAAekB,MAAMG,OAAO,CAACiB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,cAAc9C,MAAM+C,WAAW,CACnC,CAACC;QACC,IAAI,CAACA,IAAI;YACP;QACF;QAEAA,GAAGC,gBAAgB,CAAC,YAAYL,CAAAA;YAC9B,MAAMM,cAAcN,EAAEO,aAAa;YAEnC,IAAI1C,cAAcyC,gBAAgB,CAACxC,gBAAgBsC,IAAIE,cAAc;gBACnEZ,eAAe;YACjB;QACF;IACF,GACA;QAACA;KAAe;IAGlBf,MAAMI,IAAI,CAACP,GAAG,GAAGZ,cAAce,MAAMI,IAAI,CAACP,GAAG,EAAE0B;IAE/C,OAAOvB;AACT,EAAE"}
|
|
@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _DefaultInfoButtonIcons = require("./DefaultInfoButtonIcons");
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
+
const _reactportal = require("@fluentui/react-portal");
|
|
15
16
|
const _reactpopover = require("@fluentui/react-popover");
|
|
16
17
|
const infoButtonIconMap = {
|
|
17
18
|
small: /*#__PURE__*/ _react.createElement(_DefaultInfoButtonIcons.DefaultInfoButtonIcon12, null),
|
|
@@ -66,5 +67,19 @@ const useInfoButton_unstable = (props, ref)=>{
|
|
|
66
67
|
});
|
|
67
68
|
state.popover.open = popoverOpen;
|
|
68
69
|
state.popover.onOpenChange = (0, _reactutilities.mergeCallbacks)(state.popover.onOpenChange, (e, data)=>setPopoverOpen(data.open));
|
|
70
|
+
const focusOutRef = _react.useCallback((el)=>{
|
|
71
|
+
if (!el) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
el.addEventListener('focusout', (e)=>{
|
|
75
|
+
const nextFocused = e.relatedTarget;
|
|
76
|
+
if ((0, _reactutilities.isHTMLElement)(nextFocused) && !(0, _reactportal.elementContains)(el, nextFocused)) {
|
|
77
|
+
setPopoverOpen(false);
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
}, [
|
|
81
|
+
setPopoverOpen
|
|
82
|
+
]);
|
|
83
|
+
state.info.ref = (0, _reactutilities.useMergedRefs)(state.info.ref, focusOutRef);
|
|
69
84
|
return state;
|
|
70
85
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInfoButton.js"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getNativeElementProps, mergeCallbacks, useControllableState, slot } from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nconst infoButtonIconMap = {\n small: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon12, null),\n medium: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon16, null),\n large: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon20, null)\n};\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium'\n};\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n */ export const useInfoButton_unstable = (props, ref)=>{\n const { size = 'medium', inline = true } = props;\n const state = {\n inline,\n size,\n components: {\n root: 'button',\n popover: Popover,\n info: PopoverSurface\n },\n root: slot.always(getNativeElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref\n }), {\n elementType: 'button'\n }),\n popover: slot.always(props.popover, {\n defaultProps: {\n inline,\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true\n },\n elementType: Popover\n }),\n info: slot.always(props.info, {\n defaultProps: {\n role: 'note',\n tabIndex: -1\n },\n elementType: PopoverSurface\n })\n };\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false\n });\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data)=>setPopoverOpen(data.open));\n return state;\n};\n"],"names":["useInfoButton_unstable","infoButtonIconMap","small","React","createElement","DefaultInfoButtonIcon12","medium","DefaultInfoButtonIcon16","large","DefaultInfoButtonIcon20","popoverSizeMap","props","ref","size","inline","state","components","root","popover","Popover","info","PopoverSurface","slot","always","getNativeElementProps","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","useControllableState","open","defaultState","defaultOpen","initialState","onOpenChange","mergeCallbacks","e","data"],"mappings":";;;;+
|
|
1
|
+
{"version":3,"sources":["useInfoButton.js"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getNativeElementProps, mergeCallbacks, useControllableState, slot, useMergedRefs, isHTMLElement } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nconst infoButtonIconMap = {\n small: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon12, null),\n medium: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon16, null),\n large: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon20, null)\n};\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium'\n};\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n */ export const useInfoButton_unstable = (props, ref)=>{\n const { size = 'medium', inline = true } = props;\n const state = {\n inline,\n size,\n components: {\n root: 'button',\n popover: Popover,\n info: PopoverSurface\n },\n root: slot.always(getNativeElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref\n }), {\n elementType: 'button'\n }),\n popover: slot.always(props.popover, {\n defaultProps: {\n inline,\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true\n },\n elementType: Popover\n }),\n info: slot.always(props.info, {\n defaultProps: {\n role: 'note',\n tabIndex: -1\n },\n elementType: PopoverSurface\n })\n };\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false\n });\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data)=>setPopoverOpen(data.open));\n const focusOutRef = React.useCallback((el)=>{\n if (!el) {\n return;\n }\n el.addEventListener('focusout', (e)=>{\n const nextFocused = e.relatedTarget;\n if (isHTMLElement(nextFocused) && !elementContains(el, nextFocused)) {\n setPopoverOpen(false);\n }\n });\n }, [\n setPopoverOpen\n ]);\n state.info.ref = useMergedRefs(state.info.ref, focusOutRef);\n return state;\n};\n"],"names":["useInfoButton_unstable","infoButtonIconMap","small","React","createElement","DefaultInfoButtonIcon12","medium","DefaultInfoButtonIcon16","large","DefaultInfoButtonIcon20","popoverSizeMap","props","ref","size","inline","state","components","root","popover","Popover","info","PopoverSurface","slot","always","getNativeElementProps","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","useControllableState","open","defaultState","defaultOpen","initialState","onOpenChange","mergeCallbacks","e","data","focusOutRef","useCallback","el","addEventListener","nextFocused","relatedTarget","isHTMLElement","elementContains","useMergedRefs"],"mappings":";;;;+BAuBiBA;;;eAAAA;;;;iEAvBM;wCACmE;gCACsB;6BAChF;8BACQ;AACxC,MAAMC,oBAAoB;IACtBC,OAAO,WAAW,GAAGC,OAAMC,aAAa,CAACC,+CAAuB,EAAE;IAClEC,QAAQ,WAAW,GAAGH,OAAMC,aAAa,CAACG,+CAAuB,EAAE;IACnEC,OAAO,WAAW,GAAGL,OAAMC,aAAa,CAACK,+CAAuB,EAAE;AACtE;AACA,MAAMC,iBAAiB;IACnBR,OAAO;IACPI,QAAQ;IACRE,OAAO;AACX;AASW,MAAMR,yBAAyB,CAACW,OAAOC;IAC9C,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAC3C,MAAMI,QAAQ;QACVD;QACAD;QACAG,YAAY;YACRC,MAAM;YACNC,SAASC,qBAAO;YAChBC,MAAMC,4BAAc;QACxB;QACAJ,MAAMK,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,UAAU;YAC9CC,UAAUxB,iBAAiB,CAACY,KAAK;YACjCa,MAAM;YACN,cAAc;YACd,GAAGf,KAAK;YACRC;QACJ,IAAI;YACAe,aAAa;QACjB;QACAT,SAASI,oBAAI,CAACC,MAAM,CAACZ,MAAMO,OAAO,EAAE;YAChCU,cAAc;gBACVd;gBACAe,aAAa;gBACbhB,MAAMH,cAAc,CAACG,KAAK;gBAC1BiB,WAAW;YACf;YACAH,aAAaR,qBAAO;QACxB;QACAC,MAAME,oBAAI,CAACC,MAAM,CAACZ,MAAMS,IAAI,EAAE;YAC1BQ,cAAc;gBACVG,MAAM;gBACNC,UAAU,CAAC;YACf;YACAL,aAAaN,4BAAc;QAC/B;IACJ;IACA,MAAM,CAACY,aAAaC,eAAe,GAAGC,IAAAA,oCAAoB,EAAC;QACvDpB,OAAOA,MAAMG,OAAO,CAACkB,IAAI;QACzBC,cAActB,MAAMG,OAAO,CAACoB,WAAW;QACvCC,cAAc;IAClB;IACAxB,MAAMG,OAAO,CAACkB,IAAI,GAAGH;IACrBlB,MAAMG,OAAO,CAACsB,YAAY,GAAGC,IAAAA,8BAAc,EAAC1B,MAAMG,OAAO,CAACsB,YAAY,EAAE,CAACE,GAAGC,OAAOT,eAAeS,KAAKP,IAAI;IAC3G,MAAMQ,cAAczC,OAAM0C,WAAW,CAAC,CAACC;QACnC,IAAI,CAACA,IAAI;YACL;QACJ;QACAA,GAAGC,gBAAgB,CAAC,YAAY,CAACL;YAC7B,MAAMM,cAAcN,EAAEO,aAAa;YACnC,IAAIC,IAAAA,6BAAa,EAACF,gBAAgB,CAACG,IAAAA,4BAAe,EAACL,IAAIE,cAAc;gBACjEd,eAAe;YACnB;QACJ;IACJ,GAAG;QACCA;KACH;IACDnB,MAAMK,IAAI,CAACR,GAAG,GAAGwC,IAAAA,6BAAa,EAACrC,MAAMK,IAAI,CAACR,GAAG,EAAEgC;IAC/C,OAAO7B;AACX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-infobutton",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.59",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -23,6 +23,8 @@
|
|
|
23
23
|
"type-check": "tsc -b tsconfig.json",
|
|
24
24
|
"storybook": "start-storybook",
|
|
25
25
|
"start": "yarn storybook",
|
|
26
|
+
"e2e": "cypress run --component",
|
|
27
|
+
"e2e:local": "cypress open --component",
|
|
26
28
|
"test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
|
|
27
29
|
},
|
|
28
30
|
"devDependencies": {
|
|
@@ -34,12 +36,13 @@
|
|
|
34
36
|
},
|
|
35
37
|
"dependencies": {
|
|
36
38
|
"@fluentui/react-icons": "^2.0.207",
|
|
37
|
-
"@fluentui/react-label": "^9.1.
|
|
38
|
-
"@fluentui/react-popover": "^9.8.
|
|
39
|
-
"@fluentui/react-
|
|
39
|
+
"@fluentui/react-label": "^9.1.34",
|
|
40
|
+
"@fluentui/react-popover": "^9.8.4",
|
|
41
|
+
"@fluentui/react-portal": "^9.3.14",
|
|
42
|
+
"@fluentui/react-tabster": "^9.12.9",
|
|
40
43
|
"@fluentui/react-theme": "^9.1.12",
|
|
41
44
|
"@fluentui/react-utilities": "^9.13.3",
|
|
42
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
45
|
+
"@fluentui/react-jsx-runtime": "^9.0.7",
|
|
43
46
|
"@griffel/react": "^1.5.14",
|
|
44
47
|
"@swc/helpers": "^0.5.1"
|
|
45
48
|
},
|