@fluentui/react-popover 9.3.5 → 9.3.6
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 +72 -1
- package/CHANGELOG.md +18 -2
- package/lib/components/Popover/Popover.js +0 -1
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Popover/renderPopover.js +0 -1
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +8 -26
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.js +0 -1
- package/lib/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/renderPopoverSurface.js +2 -4
- package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js +2 -11
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js +80 -83
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.js +2 -3
- package/lib/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/usePopoverTrigger.js +6 -11
- package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/popoverContext.js.map +1 -1
- package/lib-commonjs/Popover.js +0 -2
- package/lib-commonjs/Popover.js.map +1 -1
- package/lib-commonjs/PopoverSurface.js +0 -2
- package/lib-commonjs/PopoverSurface.js.map +1 -1
- package/lib-commonjs/PopoverTrigger.js +0 -2
- package/lib-commonjs/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.js +0 -5
- package/lib-commonjs/components/Popover/Popover.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.types.js.map +1 -1
- package/lib-commonjs/components/Popover/constants.js +0 -1
- package/lib-commonjs/components/Popover/constants.js.map +1 -1
- package/lib-commonjs/components/Popover/index.js +0 -5
- package/lib-commonjs/components/Popover/index.js.map +1 -1
- package/lib-commonjs/components/Popover/renderPopover.js +0 -5
- package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +8 -36
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.js +0 -6
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/index.js +0 -6
- package/lib-commonjs/components/PopoverSurface/index.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +2 -9
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +2 -16
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js +80 -88
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js +2 -7
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/index.js +0 -5
- package/lib-commonjs/components/PopoverTrigger/index.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js +0 -2
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +6 -18
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib-commonjs/index.js +0 -8
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/popoverContext.js +0 -4
- package/lib-commonjs/popoverContext.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,78 @@
|
|
|
2
2
|
"name": "@fluentui/react-popover",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Wed,
|
|
5
|
+
"date": "Wed, 04 Jan 2023 01:35:37 GMT",
|
|
6
|
+
"tag": "@fluentui/react-popover_v9.3.6",
|
|
7
|
+
"version": "9.3.6",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-popover",
|
|
13
|
+
"commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-popover",
|
|
19
|
+
"comment": "Bump @fluentui/react-aria to v9.3.4",
|
|
20
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-popover",
|
|
25
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.4",
|
|
26
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-popover",
|
|
31
|
+
"comment": "Bump @fluentui/react-portal to v9.0.15",
|
|
32
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-popover",
|
|
37
|
+
"comment": "Bump @fluentui/react-positioning to v9.3.6",
|
|
38
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-popover",
|
|
43
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.5",
|
|
44
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-popover",
|
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.1",
|
|
50
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-popover",
|
|
55
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
|
|
56
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
57
|
+
}
|
|
58
|
+
],
|
|
59
|
+
"none": [
|
|
60
|
+
{
|
|
61
|
+
"author": "martinhochel@microsoft.com",
|
|
62
|
+
"package": "@fluentui/react-popover",
|
|
63
|
+
"commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
|
|
64
|
+
"comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"author": "martinhochel@microsoft.com",
|
|
68
|
+
"package": "@fluentui/react-popover",
|
|
69
|
+
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
|
|
70
|
+
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"date": "Wed, 21 Dec 2022 10:20:33 GMT",
|
|
6
77
|
"tag": "@fluentui/react-popover_v9.3.5",
|
|
7
78
|
"version": "9.3.5",
|
|
8
79
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-popover
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 04 Jan 2023 01:35:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.3.6)
|
|
8
|
+
|
|
9
|
+
Wed, 04 Jan 2023 01:35:37 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.3.5..@fluentui/react-popover_v9.3.6)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.3.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
17
|
+
- Bump @fluentui/react-portal to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
18
|
+
- Bump @fluentui/react-positioning to v9.3.6 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
22
|
+
|
|
7
23
|
## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.3.5)
|
|
8
24
|
|
|
9
|
-
Wed, 21 Dec 2022 10:
|
|
25
|
+
Wed, 21 Dec 2022 10:20:33 GMT
|
|
10
26
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.3.4..@fluentui/react-popover_v9.3.5)
|
|
11
27
|
|
|
12
28
|
### Patches
|
|
@@ -3,7 +3,6 @@ import { renderPopover_unstable } from './renderPopover';
|
|
|
3
3
|
/**
|
|
4
4
|
* Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
|
|
5
5
|
*/
|
|
6
|
-
|
|
7
6
|
export const Popover = props => {
|
|
8
7
|
const state = usePopover_unstable(props);
|
|
9
8
|
return renderPopover_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AACA,SAASA,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AAGxD;;;AAGA,OAAO,MAAMC,OAAO,GAA2BC,KAAK,IAAG;EACrD,MAAMC,KAAK,GAAGJ,mBAAmB,CAACG,KAAK,CAAC;EAExC,OAAOF,sBAAsB,CAACG,KAAK,CAAC;AACtC,CAAC;AAEDF,OAAO,CAACG,WAAW,GAAG,SAAS","names":["usePopover_unstable","renderPopover_unstable","Popover","props","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n const state = usePopover_unstable(props);\n\n return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,QAAQ,sBAAsB;AAGrD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IACJC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,MAAM;IACNC,SAAS;IACTC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,OAAO;IACPC,IAAI;IACJC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC;EAAe,CAChB,GAAGf,KAAK;EAET,oBACEH,oBAACC,cAAc,CAACkB,QAAQ;IACtBC,KAAK,EAAE;MACLhB,UAAU;MACVC,QAAQ;MACRC,UAAU;MACVC,MAAM;MACNC,SAAS;MACTC,IAAI;MACJC,aAAa;MACbC,WAAW;MACXC,OAAO;MACPE,UAAU;MACVE,UAAU;MACVH,IAAI;MACJE,SAAS;MACTG,eAAe;MACfD;;EACD,GAEAd,KAAK,CAACkB,cAAc,EACpBlB,KAAK,CAACM,IAAI,IAAIN,KAAK,CAACmB,cAAc,CACX;AAE9B,CAAC","names":["React","PopoverContext","renderPopover_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","legacyTrapFocus","Provider","value","popoverTrigger","popoverSurface"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/renderPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n legacyTrapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inline,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n toggleOpen,\n triggerRef,\n size,\n trapFocus,\n legacyTrapFocus,\n withArrow,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"]}
|
|
@@ -14,10 +14,8 @@ import { popoverSurfaceBorderRadius } from './constants';
|
|
|
14
14
|
*
|
|
15
15
|
* @param props - props from this instance of Popover
|
|
16
16
|
*/
|
|
17
|
-
|
|
18
17
|
export const usePopover_unstable = props => {
|
|
19
18
|
var _a;
|
|
20
|
-
|
|
21
19
|
const [contextTarget, setContextTarget] = usePositioningMouseTarget();
|
|
22
20
|
const initialState = {
|
|
23
21
|
size: 'medium',
|
|
@@ -26,41 +24,33 @@ export const usePopover_unstable = props => {
|
|
|
26
24
|
...props
|
|
27
25
|
};
|
|
28
26
|
const children = React.Children.toArray(props.children);
|
|
29
|
-
|
|
30
27
|
if (process.env.NODE_ENV !== 'production') {
|
|
31
28
|
if (children.length === 0) {
|
|
32
29
|
// eslint-disable-next-line no-console
|
|
33
30
|
console.warn('Popover must contain at least one child');
|
|
34
31
|
}
|
|
35
|
-
|
|
36
32
|
if (children.length > 2) {
|
|
37
33
|
// eslint-disable-next-line no-console
|
|
38
34
|
console.warn('Popover must contain at most two children');
|
|
39
35
|
}
|
|
40
36
|
}
|
|
41
|
-
|
|
42
37
|
let popoverTrigger = undefined;
|
|
43
38
|
let popoverSurface = undefined;
|
|
44
|
-
|
|
45
39
|
if (children.length === 2) {
|
|
46
40
|
popoverTrigger = children[0];
|
|
47
41
|
popoverSurface = children[1];
|
|
48
42
|
} else if (children.length === 1) {
|
|
49
43
|
popoverSurface = children[0];
|
|
50
44
|
}
|
|
51
|
-
|
|
52
45
|
const [open, setOpenState] = useOpenState(initialState);
|
|
53
46
|
const setOpenTimeoutRef = React.useRef(0);
|
|
54
47
|
const setOpen = useEventCallback((e, shouldOpen) => {
|
|
55
48
|
var _a;
|
|
56
|
-
|
|
57
49
|
clearTimeout(setOpenTimeoutRef.current);
|
|
58
|
-
|
|
59
50
|
if (!(e instanceof Event) && e.persist) {
|
|
60
51
|
// < React 17 still uses pooled synthetic events
|
|
61
52
|
e.persist();
|
|
62
53
|
}
|
|
63
|
-
|
|
64
54
|
if (e.type === 'mouseleave') {
|
|
65
55
|
// FIXME leaking Node timeout type
|
|
66
56
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -71,9 +61,9 @@ export const usePopover_unstable = props => {
|
|
|
71
61
|
} else {
|
|
72
62
|
setOpenState(e, shouldOpen);
|
|
73
63
|
}
|
|
74
|
-
});
|
|
64
|
+
});
|
|
65
|
+
// Clear timeout on unmount
|
|
75
66
|
// Setting state after a component unmounts can cause memory leaks
|
|
76
|
-
|
|
77
67
|
React.useEffect(() => {
|
|
78
68
|
return () => {
|
|
79
69
|
clearTimeout(setOpenTimeoutRef.current);
|
|
@@ -92,8 +82,8 @@ export const usePopover_unstable = props => {
|
|
|
92
82
|
callback: ev => setOpen(ev, false),
|
|
93
83
|
refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
|
|
94
84
|
disabled: !open
|
|
95
|
-
});
|
|
96
|
-
|
|
85
|
+
});
|
|
86
|
+
// only close on scroll for context, or when closeOnScroll is specified
|
|
97
87
|
const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
|
|
98
88
|
useOnScrollOutside({
|
|
99
89
|
contains: elementContains,
|
|
@@ -107,14 +97,14 @@ export const usePopover_unstable = props => {
|
|
|
107
97
|
} = useFocusFinders();
|
|
108
98
|
React.useEffect(() => {
|
|
109
99
|
var _a;
|
|
110
|
-
|
|
111
100
|
if (open && positioningRefs.contentRef.current) {
|
|
112
101
|
const containerTabIndex = (_a = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _a !== void 0 ? _a : undefined;
|
|
113
102
|
const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;
|
|
114
103
|
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
115
104
|
}
|
|
116
105
|
}, [findFirstFocusable, open, positioningRefs.contentRef]);
|
|
117
|
-
return {
|
|
106
|
+
return {
|
|
107
|
+
...initialState,
|
|
118
108
|
...positioningRefs,
|
|
119
109
|
popoverTrigger,
|
|
120
110
|
popoverSurface,
|
|
@@ -129,11 +119,9 @@ export const usePopover_unstable = props => {
|
|
|
129
119
|
/**
|
|
130
120
|
* Creates and manages the Popover open state
|
|
131
121
|
*/
|
|
132
|
-
|
|
133
122
|
function useOpenState(state) {
|
|
134
123
|
const onOpenChange = useEventCallback((e, data) => {
|
|
135
124
|
var _a;
|
|
136
|
-
|
|
137
125
|
return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
|
|
138
126
|
});
|
|
139
127
|
const [open, setOpenState] = useControllableState({
|
|
@@ -147,11 +135,9 @@ function useOpenState(state) {
|
|
|
147
135
|
if (shouldOpen && e.type === 'contextmenu') {
|
|
148
136
|
setContextTarget(e);
|
|
149
137
|
}
|
|
150
|
-
|
|
151
138
|
if (!shouldOpen) {
|
|
152
139
|
setContextTarget(undefined);
|
|
153
140
|
}
|
|
154
|
-
|
|
155
141
|
setOpenState(shouldOpen);
|
|
156
142
|
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
|
|
157
143
|
open: shouldOpen
|
|
@@ -162,8 +148,6 @@ function useOpenState(state) {
|
|
|
162
148
|
/**
|
|
163
149
|
* Creates and sets the necessary trigger, target and content refs used by Popover
|
|
164
150
|
*/
|
|
165
|
-
|
|
166
|
-
|
|
167
151
|
function usePopoverRefs(state) {
|
|
168
152
|
const positioningOptions = {
|
|
169
153
|
position: 'above',
|
|
@@ -171,16 +155,14 @@ function usePopoverRefs(state) {
|
|
|
171
155
|
arrowPadding: 2 * popoverSurfaceBorderRadius,
|
|
172
156
|
target: state.openOnContext ? state.contextTarget : undefined,
|
|
173
157
|
...resolvePositioningShorthand(state.positioning)
|
|
174
|
-
};
|
|
175
|
-
|
|
158
|
+
};
|
|
159
|
+
// no reason to render arrow when covering the target
|
|
176
160
|
if (positioningOptions.coverTarget) {
|
|
177
161
|
state.withArrow = false;
|
|
178
162
|
}
|
|
179
|
-
|
|
180
163
|
if (state.withArrow) {
|
|
181
164
|
positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);
|
|
182
165
|
}
|
|
183
|
-
|
|
184
166
|
const {
|
|
185
167
|
targetRef: triggerRef,
|
|
186
168
|
containerRef: contentRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const setOpenTimeoutRef = React.useRef(0);\n\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(() => {\n return () => {\n clearTimeout(setOpenTimeoutRef.current);\n };\n }, []);\n\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && positioningRefs.contentRef.current) {\n const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n const firstFocusable = isNaN(containerTabIndex)\n ? findFirstFocusable(positioningRefs.contentRef.current)\n : positioningRefs.contentRef.current;\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n return {\n ...initialState,\n ...positioningRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(shouldOpen);\n onOpenChange?.(e, { open: shouldOpen });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"mappings":"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","names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","elementContains","useFocusFinders","arrowHeights","popoverSurfaceBorderRadius","usePopover_unstable","props","contextTarget","setContextTarget","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","e","shouldOpen","clearTimeout","current","Event","persist","type","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","closeOnScroll","openOnContext","findFirstFocusable","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","inline","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","positioning","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePositioning,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpenState] = useOpenState(initialState);\n\n const setOpenTimeoutRef = React.useRef(0);\n\n const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave') {\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeoutRef.current = setTimeout(() => {\n setOpenState(e, shouldOpen);\n }, props.mouseLeaveDelay ?? 500);\n } else {\n setOpenState(e, shouldOpen);\n }\n });\n\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(() => {\n return () => {\n clearTimeout(setOpenTimeoutRef.current);\n };\n }, []);\n\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const positioningRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open,\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n disabled: !open || !closeOnScroll,\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && positioningRefs.contentRef.current) {\n const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n const firstFocusable = isNaN(containerTabIndex)\n ? findFirstFocusable(positioningRefs.contentRef.current)\n : positioningRefs.contentRef.current;\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n return {\n ...initialState,\n ...positioningRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n inline: props.inline ?? false,\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(shouldOpen);\n onOpenChange?.(e, { open: shouldOpen });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> &\n Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n const positioningOptions = {\n position: 'above' as const,\n align: 'center' as const,\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"]}
|
|
@@ -5,7 +5,6 @@ import { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles';
|
|
|
5
5
|
/**
|
|
6
6
|
* PopoverSurface component renders react children in a positioned box
|
|
7
7
|
*/
|
|
8
|
-
|
|
9
8
|
export const PopoverSurface = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
9
|
const state = usePopoverSurface_unstable(props, ref);
|
|
11
10
|
usePopoverSurfaceStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,gCAAgC,QAAQ,2BAA2B;AAI5E;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGP,0BAA0B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEpDJ,gCAAgC,CAACK,KAAK,CAAC;EACvC,OAAON,6BAA6B,CAACM,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFJ,cAAc,CAACK,WAAW,GAAG,gBAAgB","names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n const state = usePopoverSurface_unstable(props, ref);\n\n usePopoverSurfaceStyles_unstable(state);\n return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"]}
|
|
@@ -4,22 +4,20 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
|
4
4
|
/**
|
|
5
5
|
* Render the final JSX of PopoverSurface
|
|
6
6
|
*/
|
|
7
|
-
|
|
8
7
|
export const renderPopoverSurface_unstable = state => {
|
|
9
8
|
const {
|
|
10
9
|
slots,
|
|
11
10
|
slotProps
|
|
12
11
|
} = getSlots(state);
|
|
13
|
-
const surface = /*#__PURE__*/React.createElement(slots.root, {
|
|
12
|
+
const surface = /*#__PURE__*/React.createElement(slots.root, {
|
|
13
|
+
...slotProps.root
|
|
14
14
|
}, state.withArrow && /*#__PURE__*/React.createElement("div", {
|
|
15
15
|
ref: state.arrowRef,
|
|
16
16
|
className: state.arrowClassName
|
|
17
17
|
}), slotProps.root.children);
|
|
18
|
-
|
|
19
18
|
if (state.inline) {
|
|
20
19
|
return surface;
|
|
21
20
|
}
|
|
22
|
-
|
|
23
21
|
return /*#__PURE__*/React.createElement(Portal, {
|
|
24
22
|
mountNode: state.mountNode
|
|
25
23
|
}, surface);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAsBE,KAAK,CAAC;EAEjE,MAAMG,OAAO,gBACXP,oBAACK,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BJ,KAAK,CAACK,SAAS,iBAAIT;IAAKU,GAAG,EAAEN,KAAK,CAACO,QAAQ;IAAEC,SAAS,EAAER,KAAK,CAACS;EAAc,EAAI,EAChFP,SAAS,CAACE,IAAI,CAACM,QAAQ,CAE3B;EAED,IAAIV,KAAK,CAACW,MAAM,EAAE;IAChB,OAAOR,OAAO;;EAGhB,oBAAOP,oBAACC,MAAM;IAACe,SAAS,EAAEZ,KAAK,CAACY;EAAS,GAAGT,OAAO,CAAU;AAC/D,CAAC","names":["React","Portal","getSlots","renderPopoverSurface_unstable","state","slots","slotProps","surface","root","withArrow","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/PopoverSurface/renderPopoverSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n const { slots, slotProps } = getSlots<PopoverSurfaceSlots>(state);\n\n const surface = (\n <slots.root {...slotProps.root}>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {slotProps.root.children}\n </slots.root>\n );\n\n if (state.inline) {\n return surface;\n }\n\n return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"]}
|
|
@@ -10,7 +10,6 @@ import { usePopoverContext_unstable } from '../../popoverContext';
|
|
|
10
10
|
* @param props - props from this instance of PopoverSurface
|
|
11
11
|
* @param ref - reference to root HTMLDivElement of PopoverSurface
|
|
12
12
|
*/
|
|
13
|
-
|
|
14
13
|
export const usePopoverSurface_unstable = (props, ref) => {
|
|
15
14
|
const contentRef = usePopoverContext_unstable(context => context.contentRef);
|
|
16
15
|
const openOnHover = usePopoverContext_unstable(context => context.openOnHover);
|
|
@@ -52,35 +51,27 @@ export const usePopoverSurface_unstable = (props, ref) => {
|
|
|
52
51
|
onMouseLeave: onMouseLeaveOriginal,
|
|
53
52
|
onKeyDown: onKeyDownOriginal
|
|
54
53
|
} = state.root;
|
|
55
|
-
|
|
56
54
|
state.root.onMouseEnter = e => {
|
|
57
55
|
if (openOnHover) {
|
|
58
56
|
setOpen(e, true);
|
|
59
57
|
}
|
|
60
|
-
|
|
61
58
|
onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
|
|
62
59
|
};
|
|
63
|
-
|
|
64
60
|
state.root.onMouseLeave = e => {
|
|
65
61
|
if (openOnHover) {
|
|
66
62
|
setOpen(e, false);
|
|
67
63
|
}
|
|
68
|
-
|
|
69
64
|
onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
|
|
70
65
|
};
|
|
71
|
-
|
|
72
66
|
state.root.onKeyDown = e => {
|
|
73
|
-
var _a;
|
|
67
|
+
var _a;
|
|
68
|
+
// only close if the event happened inside the current popover
|
|
74
69
|
// If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
|
|
75
|
-
|
|
76
|
-
|
|
77
70
|
if (e.key === 'Escape' && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
78
71
|
setOpen(e, false);
|
|
79
72
|
}
|
|
80
|
-
|
|
81
73
|
onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
|
|
82
74
|
};
|
|
83
|
-
|
|
84
75
|
return state;
|
|
85
76
|
};
|
|
86
77
|
//# sourceMappingURL=usePopoverSurface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"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","names":["getNativeElementProps","useMergedRefs","useModalAttributes","usePopoverContext_unstable","usePopoverSurface_unstable","props","ref","contentRef","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","legacyTrapFocus","inline","modalAttributes","state","components","root","role","undefined","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const size = usePopoverContext_unstable(context => context.size);\n const withArrow = usePopoverContext_unstable(context => context.withArrow);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const legacyTrapFocus = usePopoverContext_unstable(context => context.legacyTrapFocus);\n const inline = usePopoverContext_unstable(context => context.inline);\n const { modalAttributes } = useModalAttributes({ trapFocus, legacyTrapFocus });\n\n const state: PopoverSurfaceState = {\n inline,\n appearance,\n withArrow,\n size,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, contentRef),\n role: trapFocus ? 'dialog' : 'group',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n }),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"]}
|