@fluentui/react-popover 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.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.json +23 -23
- package/CHANGELOG.md +14 -14
- package/lib/Popover.js +1 -1
- package/lib/Popover.js.map +1 -1
- package/lib/PopoverSurface.js +1 -1
- package/lib/PopoverSurface.js.map +1 -1
- package/lib/PopoverTrigger.js +1 -1
- package/lib/PopoverTrigger.js.map +1 -1
- package/lib/components/Popover/Popover.js +3 -4
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Popover/Popover.types.js +1 -1
- package/lib/components/Popover/Popover.types.js.map +1 -1
- package/lib/components/Popover/constants.js +2 -1
- package/lib/components/Popover/constants.js.map +1 -1
- package/lib/components/Popover/index.js +4 -4
- package/lib/components/Popover/index.js.map +1 -1
- package/lib/components/Popover/renderPopover.js +2 -2
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +28 -22
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.js +6 -6
- package/lib/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib/components/PopoverSurface/index.js +5 -5
- package/lib/components/PopoverSurface/index.js.map +1 -1
- package/lib/components/PopoverSurface/renderPopoverSurface.js +6 -4
- package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js +12 -12
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js +6 -6
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.js +3 -4
- package/lib/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.types.js +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib/components/PopoverTrigger/index.js +4 -4
- package/lib/components/PopoverTrigger/index.js.map +1 -1
- package/lib/components/PopoverTrigger/renderPopoverTrigger.js +2 -1
- package/lib/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/usePopoverTrigger.js +15 -16
- package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib/index.js +4 -4
- package/lib/index.js.map +1 -1
- package/lib/popoverContext.js +2 -2
- package/lib/popoverContext.js.map +1 -1
- package/lib-commonjs/Popover.js +4 -5
- package/lib-commonjs/Popover.js.map +1 -1
- package/lib-commonjs/PopoverSurface.js +4 -5
- package/lib-commonjs/PopoverSurface.js.map +1 -1
- package/lib-commonjs/PopoverTrigger.js +4 -5
- package/lib-commonjs/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.js +13 -14
- package/lib-commonjs/components/Popover/Popover.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.types.js +2 -5
- package/lib-commonjs/components/Popover/Popover.types.js.map +1 -1
- package/lib-commonjs/components/Popover/constants.js +8 -10
- package/lib-commonjs/components/Popover/constants.js.map +1 -1
- package/lib-commonjs/components/Popover/index.js +7 -8
- package/lib-commonjs/components/Popover/index.js.map +1 -1
- package/lib-commonjs/components/Popover/renderPopover.js +47 -31
- package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +173 -173
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.js +20 -19
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js +2 -3
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/index.js +8 -9
- package/lib-commonjs/components/PopoverSurface/index.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +28 -23
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +81 -69
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js +113 -243
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js +14 -15
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js +2 -5
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/index.js +7 -8
- package/lib-commonjs/components/PopoverTrigger/index.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js +11 -12
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +80 -71
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib-commonjs/index.js +92 -30
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/popoverContext.js +25 -34
- package/lib-commonjs/popoverContext.js.map +1 -1
- package/package.json +14 -13
- package/.swcrc +0 -39
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"names":["exports","popoverSurfaceBorderRadius"],"sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/constants.ts"],"sourcesContent":["/**\n * @internal\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */\nexport const popoverSurfaceBorderRadius = 4;\n"],"mappings":";;;;;;AAAA;;;;;;;;AAQaA,OAAA,CAAAC,0BAA0B,GAAG,CAAC"}
|
@@ -1,12 +1,11 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
+
value: true
|
4
5
|
});
|
5
|
-
const
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
//# sourceMappingURL=index.js.map
|
11
|
-
|
6
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
7
|
+
tslib_1.__exportStar(require("./Popover"), exports);
|
8
|
+
tslib_1.__exportStar(require("./Popover.types"), exports);
|
9
|
+
tslib_1.__exportStar(require("./renderPopover"), exports);
|
10
|
+
tslib_1.__exportStar(require("./usePopover"), exports);
|
12
11
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/index.ts"],"sourcesContent":["export * from './Popover';\nexport * from './Popover.types';\nexport * from './renderPopover';\nexport * from './usePopover';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,eAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA"}
|
@@ -1,35 +1,51 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
-
});
|
5
|
-
Object.defineProperty(exports, "renderPopover_unstable", {
|
6
|
-
enumerable: true,
|
7
|
-
get: ()=>renderPopover_unstable
|
4
|
+
value: true
|
8
5
|
});
|
9
|
-
|
10
|
-
const
|
11
|
-
const
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
6
|
+
exports.renderPopover_unstable = void 0;
|
7
|
+
const React = /*#__PURE__*/require("react");
|
8
|
+
const popoverContext_1 = /*#__PURE__*/require("../../popoverContext");
|
9
|
+
/**
|
10
|
+
* Render the final JSX of Popover
|
11
|
+
*/
|
12
|
+
const renderPopover_unstable = state => {
|
13
|
+
const {
|
14
|
+
appearance,
|
15
|
+
arrowRef,
|
16
|
+
contentRef,
|
17
|
+
inline,
|
18
|
+
mountNode,
|
19
|
+
open,
|
20
|
+
openOnContext,
|
21
|
+
openOnHover,
|
22
|
+
setOpen,
|
23
|
+
size,
|
24
|
+
toggleOpen,
|
25
|
+
trapFocus,
|
26
|
+
triggerRef,
|
27
|
+
withArrow,
|
28
|
+
inertTrapFocus
|
29
|
+
} = state;
|
30
|
+
return React.createElement(popoverContext_1.PopoverContext.Provider, {
|
31
|
+
value: {
|
32
|
+
appearance,
|
33
|
+
arrowRef,
|
34
|
+
contentRef,
|
35
|
+
inline,
|
36
|
+
mountNode,
|
37
|
+
open,
|
38
|
+
openOnContext,
|
39
|
+
openOnHover,
|
40
|
+
setOpen,
|
41
|
+
toggleOpen,
|
42
|
+
triggerRef,
|
43
|
+
size,
|
44
|
+
trapFocus,
|
45
|
+
inertTrapFocus,
|
46
|
+
withArrow
|
47
|
+
}
|
48
|
+
}, state.popoverTrigger, state.open && state.popoverSurface);
|
49
|
+
};
|
50
|
+
exports.renderPopover_unstable = renderPopover_unstable;
|
35
51
|
//# sourceMappingURL=renderPopover.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"names":["React","require","popoverContext_1","renderPopover_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","inertTrapFocus","createElement","PopoverContext","Provider","value","popoverTrigger","popoverSurface","exports"],"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 inertTrapFocus,\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 inertTrapFocus,\n withArrow,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,gBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,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;EAAc,CACf,GAAGf,KAAK;EAET,OACEJ,KAAA,CAAAoB,aAAA,CAAClB,gBAAA,CAAAmB,cAAc,CAACC,QAAQ;IACtBC,KAAK,EAAE;MACLlB,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,cAAc;MACdD;;EACD,GAEAd,KAAK,CAACoB,cAAc,EACpBpB,KAAK,CAACM,IAAI,IAAIN,KAAK,CAACqB,cAAc,CACX;AAE9B,CAAC;AA3CYC,OAAA,CAAAvB,sBAAsB,GAAAA,sBAAA"}
|
@@ -1,187 +1,187 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
-
});
|
5
|
-
Object.defineProperty(exports, "usePopover_unstable", {
|
6
|
-
enumerable: true,
|
7
|
-
get: ()=>usePopover_unstable
|
4
|
+
value: true
|
8
5
|
});
|
9
|
-
|
10
|
-
const
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
14
|
-
const
|
15
|
-
const
|
16
|
-
const
|
17
|
-
const
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
6
|
+
exports.usePopover_unstable = void 0;
|
7
|
+
const React = /*#__PURE__*/require("react");
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
10
|
+
const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
|
11
|
+
const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
|
12
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
13
|
+
const index_1 = /*#__PURE__*/require("../PopoverSurface/index");
|
14
|
+
const constants_1 = /*#__PURE__*/require("./constants");
|
15
|
+
/**
|
16
|
+
* Create the state required to render Popover.
|
17
|
+
*
|
18
|
+
* The returned state can be modified with hooks such as usePopoverStyles,
|
19
|
+
* before being passed to renderPopover_unstable.
|
20
|
+
*
|
21
|
+
* @param props - props from this instance of Popover
|
22
|
+
*/
|
23
|
+
const usePopover_unstable = props => {
|
24
|
+
var _a;
|
25
|
+
const [contextTarget, setContextTarget] = react_positioning_1.usePositioningMouseTarget();
|
26
|
+
const initialState = {
|
27
|
+
size: 'medium',
|
28
|
+
contextTarget,
|
29
|
+
setContextTarget,
|
30
|
+
...props
|
31
|
+
};
|
32
|
+
const children = React.Children.toArray(props.children);
|
33
|
+
if (process.env.NODE_ENV !== 'production') {
|
34
|
+
if (children.length === 0) {
|
35
|
+
// eslint-disable-next-line no-console
|
36
|
+
console.warn('Popover must contain at least one child');
|
36
37
|
}
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
popoverTrigger = children[0];
|
41
|
-
popoverSurface = children[1];
|
42
|
-
} else if (children.length === 1) {
|
43
|
-
popoverSurface = children[0];
|
38
|
+
if (children.length > 2) {
|
39
|
+
// eslint-disable-next-line no-console
|
40
|
+
console.warn('Popover must contain at most two children');
|
44
41
|
}
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
}
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
(0, _reactUtilities.useOnClickOutside)({
|
80
|
-
contains: _reactPortal.elementContains,
|
81
|
-
element: targetDocument,
|
82
|
-
callback: (ev)=>setOpen(ev, false),
|
83
|
-
refs: [
|
84
|
-
positioningRefs.triggerRef,
|
85
|
-
positioningRefs.contentRef
|
86
|
-
],
|
87
|
-
disabled: !open
|
88
|
-
});
|
89
|
-
// only close on scroll for context, or when closeOnScroll is specified
|
90
|
-
const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
|
91
|
-
(0, _reactUtilities.useOnScrollOutside)({
|
92
|
-
contains: _reactPortal.elementContains,
|
93
|
-
element: targetDocument,
|
94
|
-
callback: (ev)=>setOpen(ev, false),
|
95
|
-
refs: [
|
96
|
-
positioningRefs.triggerRef,
|
97
|
-
positioningRefs.contentRef
|
98
|
-
],
|
99
|
-
disabled: !open || !closeOnScroll
|
100
|
-
});
|
101
|
-
const { findFirstFocusable } = (0, _reactTabster.useFocusFinders)();
|
102
|
-
_react.useEffect(()=>{
|
103
|
-
if (props.unstable_disableAutoFocus) {
|
104
|
-
return;
|
105
|
-
}
|
106
|
-
if (open && positioningRefs.contentRef.current) {
|
107
|
-
const containerTabIndex = positioningRefs.contentRef.current.getAttribute("tabIndex") ?? undefined;
|
108
|
-
const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;
|
109
|
-
firstFocusable?.focus();
|
110
|
-
}
|
111
|
-
}, [
|
112
|
-
findFirstFocusable,
|
113
|
-
open,
|
114
|
-
positioningRefs.contentRef,
|
115
|
-
props.unstable_disableAutoFocus
|
116
|
-
]);
|
117
|
-
return {
|
118
|
-
...initialState,
|
119
|
-
...positioningRefs,
|
120
|
-
popoverTrigger,
|
121
|
-
popoverSurface,
|
122
|
-
open,
|
123
|
-
setOpen,
|
124
|
-
toggleOpen,
|
125
|
-
setContextTarget,
|
126
|
-
contextTarget,
|
127
|
-
inline: props.inline ?? false
|
42
|
+
}
|
43
|
+
let popoverTrigger = undefined;
|
44
|
+
let popoverSurface = undefined;
|
45
|
+
if (children.length === 2) {
|
46
|
+
popoverTrigger = children[0];
|
47
|
+
popoverSurface = children[1];
|
48
|
+
} else if (children.length === 1) {
|
49
|
+
popoverSurface = children[0];
|
50
|
+
}
|
51
|
+
const [open, setOpenState] = useOpenState(initialState);
|
52
|
+
const setOpenTimeoutRef = React.useRef(0);
|
53
|
+
const setOpen = react_utilities_1.useEventCallback((e, shouldOpen) => {
|
54
|
+
var _a;
|
55
|
+
clearTimeout(setOpenTimeoutRef.current);
|
56
|
+
if (!(e instanceof Event) && e.persist) {
|
57
|
+
// < React 17 still uses pooled synthetic events
|
58
|
+
e.persist();
|
59
|
+
}
|
60
|
+
if (e.type === 'mouseleave') {
|
61
|
+
// FIXME leaking Node timeout type
|
62
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
63
|
+
// @ts-ignore
|
64
|
+
setOpenTimeoutRef.current = setTimeout(() => {
|
65
|
+
setOpenState(e, shouldOpen);
|
66
|
+
}, (_a = props.mouseLeaveDelay) !== null && _a !== void 0 ? _a : 500);
|
67
|
+
} else {
|
68
|
+
setOpenState(e, shouldOpen);
|
69
|
+
}
|
70
|
+
});
|
71
|
+
// Clear timeout on unmount
|
72
|
+
// Setting state after a component unmounts can cause memory leaks
|
73
|
+
React.useEffect(() => {
|
74
|
+
return () => {
|
75
|
+
clearTimeout(setOpenTimeoutRef.current);
|
128
76
|
};
|
77
|
+
}, []);
|
78
|
+
const toggleOpen = React.useCallback(e => {
|
79
|
+
setOpen(e, !open);
|
80
|
+
}, [setOpen, open]);
|
81
|
+
const positioningRefs = usePopoverRefs(initialState);
|
82
|
+
const {
|
83
|
+
targetDocument
|
84
|
+
} = react_shared_contexts_1.useFluent_unstable();
|
85
|
+
react_utilities_1.useOnClickOutside({
|
86
|
+
contains: react_portal_1.elementContains,
|
87
|
+
element: targetDocument,
|
88
|
+
callback: ev => setOpen(ev, false),
|
89
|
+
refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
|
90
|
+
disabled: !open
|
91
|
+
});
|
92
|
+
// only close on scroll for context, or when closeOnScroll is specified
|
93
|
+
const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
|
94
|
+
react_utilities_1.useOnScrollOutside({
|
95
|
+
contains: react_portal_1.elementContains,
|
96
|
+
element: targetDocument,
|
97
|
+
callback: ev => setOpen(ev, false),
|
98
|
+
refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
|
99
|
+
disabled: !open || !closeOnScroll
|
100
|
+
});
|
101
|
+
const {
|
102
|
+
findFirstFocusable
|
103
|
+
} = react_tabster_1.useFocusFinders();
|
104
|
+
React.useEffect(() => {
|
105
|
+
var _a;
|
106
|
+
if (props.unstable_disableAutoFocus) {
|
107
|
+
return;
|
108
|
+
}
|
109
|
+
if (open && positioningRefs.contentRef.current) {
|
110
|
+
const containerTabIndex = (_a = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _a !== void 0 ? _a : undefined;
|
111
|
+
const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;
|
112
|
+
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
113
|
+
}
|
114
|
+
}, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);
|
115
|
+
return {
|
116
|
+
...initialState,
|
117
|
+
...positioningRefs,
|
118
|
+
popoverTrigger,
|
119
|
+
popoverSurface,
|
120
|
+
open,
|
121
|
+
setOpen,
|
122
|
+
toggleOpen,
|
123
|
+
setContextTarget,
|
124
|
+
contextTarget,
|
125
|
+
inline: (_a = props.inline) !== null && _a !== void 0 ? _a : false
|
126
|
+
};
|
129
127
|
};
|
128
|
+
exports.usePopover_unstable = usePopover_unstable;
|
130
129
|
/**
|
131
130
|
* Creates and manages the Popover open state
|
132
|
-
*/
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
131
|
+
*/
|
132
|
+
function useOpenState(state) {
|
133
|
+
const onOpenChange = react_utilities_1.useEventCallback((e, data) => {
|
134
|
+
var _a;
|
135
|
+
return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
|
136
|
+
});
|
137
|
+
const [open, setOpenState] = react_utilities_1.useControllableState({
|
138
|
+
state: state.open,
|
139
|
+
defaultState: state.defaultOpen,
|
140
|
+
initialState: false
|
141
|
+
});
|
142
|
+
state.open = open !== undefined ? open : state.open;
|
143
|
+
const setContextTarget = state.setContextTarget;
|
144
|
+
const setOpen = React.useCallback((e, shouldOpen) => {
|
145
|
+
if (shouldOpen && e.type === 'contextmenu') {
|
146
|
+
setContextTarget(e);
|
147
|
+
}
|
148
|
+
if (!shouldOpen) {
|
149
|
+
setContextTarget(undefined);
|
150
|
+
}
|
151
|
+
setOpenState(shouldOpen);
|
152
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
|
153
|
+
open: shouldOpen
|
138
154
|
});
|
139
|
-
|
140
|
-
|
141
|
-
const setOpen = _react.useCallback((e, shouldOpen)=>{
|
142
|
-
if (shouldOpen && e.type === "contextmenu") {
|
143
|
-
setContextTarget(e);
|
144
|
-
}
|
145
|
-
if (!shouldOpen) {
|
146
|
-
setContextTarget(undefined);
|
147
|
-
}
|
148
|
-
setOpenState(shouldOpen);
|
149
|
-
onOpenChange?.(e, {
|
150
|
-
open: shouldOpen
|
151
|
-
});
|
152
|
-
}, [
|
153
|
-
setOpenState,
|
154
|
-
onOpenChange,
|
155
|
-
setContextTarget
|
156
|
-
]);
|
157
|
-
return [
|
158
|
-
open,
|
159
|
-
setOpen
|
160
|
-
];
|
155
|
+
}, [setOpenState, onOpenChange, setContextTarget]);
|
156
|
+
return [open, setOpen];
|
161
157
|
}
|
162
158
|
/**
|
163
159
|
* Creates and sets the necessary trigger, target and content refs used by Popover
|
164
|
-
*/
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
160
|
+
*/
|
161
|
+
function usePopoverRefs(state) {
|
162
|
+
const positioningOptions = {
|
163
|
+
position: 'above',
|
164
|
+
align: 'center',
|
165
|
+
arrowPadding: 2 * constants_1.popoverSurfaceBorderRadius,
|
166
|
+
target: state.openOnContext ? state.contextTarget : undefined,
|
167
|
+
...react_positioning_1.resolvePositioningShorthand(state.positioning)
|
168
|
+
};
|
169
|
+
// no reason to render arrow when covering the target
|
170
|
+
if (positioningOptions.coverTarget) {
|
171
|
+
state.withArrow = false;
|
172
|
+
}
|
173
|
+
if (state.withArrow) {
|
174
|
+
positioningOptions.offset = react_positioning_1.mergeArrowOffset(positioningOptions.offset, index_1.arrowHeights[state.size]);
|
175
|
+
}
|
176
|
+
const {
|
177
|
+
targetRef: triggerRef,
|
178
|
+
containerRef: contentRef,
|
179
|
+
arrowRef
|
180
|
+
} = react_positioning_1.usePositioning(positioningOptions);
|
181
|
+
return {
|
182
|
+
triggerRef,
|
183
|
+
contentRef,
|
184
|
+
arrowRef
|
185
|
+
};
|
186
|
+
}
|
187
187
|
//# sourceMappingURL=usePopover.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Popover/usePopover.js"],"sourcesContent":["import * as React from \"react\";\nimport { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside } from \"@fluentui/react-utilities\";\nimport { useFluent_unstable as useFluent } from \"@fluentui/react-shared-contexts\";\nimport { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget } from \"@fluentui/react-positioning\";\nimport { elementContains } from \"@fluentui/react-portal\";\nimport { useFocusFinders } from \"@fluentui/react-tabster\";\nimport { arrowHeights } from \"../PopoverSurface/index\";\nimport { popoverSurfaceBorderRadius } from \"./constants\";\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 => {\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n const initialState = {\n size: \"medium\",\n contextTarget,\n setContextTarget,\n ...props\n };\n const children = React.Children.toArray(props.children);\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 if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn(\"Popover must contain at most two children\");\n }\n }\n let popoverTrigger = undefined;\n let popoverSurface = 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 const [open, setOpenState] = useOpenState(initialState);\n const setOpenTimeoutRef = React.useRef(0);\n const setOpen = useEventCallback((e, shouldOpen) => {\n clearTimeout(setOpenTimeoutRef.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\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 // 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 const toggleOpen = React.useCallback(e => {\n setOpen(e, !open);\n }, [setOpen, open]);\n const positioningRefs = usePopoverRefs(initialState);\n const {\n targetDocument\n } = 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 // 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 const {\n findFirstFocusable\n } = useFocusFinders();\n React.useEffect(() => {\n if (props.unstable_disableAutoFocus) {\n return;\n }\n if (open && positioningRefs.contentRef.current) {\n const containerTabIndex = positioningRefs.contentRef.current.getAttribute(\"tabIndex\") ?? undefined;\n const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\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 * Creates and manages the Popover open state\n */\nfunction useOpenState(state) {\n const onOpenChange = useEventCallback((e, data) => state.onOpenChange?.(e, data));\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 const setOpen = React.useCallback((e, shouldOpen) => {\n if (shouldOpen && e.type === \"contextmenu\") {\n setContextTarget(e);\n }\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n setOpenState(shouldOpen);\n onOpenChange?.(e, {\n open: shouldOpen\n });\n }, [setOpenState, onOpenChange, setContextTarget]);\n return [open, setOpen];\n}\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(state) {\n const positioningOptions = {\n position: \"above\",\n align: \"center\",\n arrowPadding: 2 * popoverSurfaceBorderRadius,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning)\n };\n // no reason to render arrow when covering the target\n if (positioningOptions.coverTarget) {\n state.withArrow = false;\n }\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n }\n const {\n targetRef: triggerRef,\n containerRef: contentRef,\n arrowRef\n } = usePositioning(positioningOptions);\n return {\n triggerRef,\n contentRef,\n arrowRef\n };\n}\n//# sourceMappingURL=usePopover.js.map"],"names":["usePopover_unstable","props","contextTarget","setContextTarget","usePositioningMouseTarget","initialState","size","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","useEventCallback","e","shouldOpen","clearTimeout","current","Event","persist","type","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","useFluent","useOnClickOutside","contains","elementContains","element","callback","ev","refs","triggerRef","contentRef","disabled","closeOnScroll","openOnContext","useOnScrollOutside","findFirstFocusable","useFocusFinders","unstable_disableAutoFocus","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","inline","state","onOpenChange","data","useControllableState","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","popoverSurfaceBorderRadius","target","resolvePositioningShorthand","positioning","coverTarget","withArrow","offset","mergeArrowOffset","arrowHeights","targetRef","containerRef","arrowRef","usePositioning"],"mappings":"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"}
|
1
|
+
{"version":3,"names":["React","require","react_utilities_1","react_shared_contexts_1","react_positioning_1","react_portal_1","react_tabster_1","index_1","constants_1","usePopover_unstable","props","contextTarget","setContextTarget","usePositioningMouseTarget","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","useEventCallback","e","shouldOpen","clearTimeout","current","Event","persist","type","setTimeout","_a","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","useFluent_unstable","useOnClickOutside","contains","elementContains","element","callback","ev","refs","triggerRef","contentRef","disabled","closeOnScroll","openOnContext","useOnScrollOutside","findFirstFocusable","useFocusFinders","unstable_disableAutoFocus","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","inline","exports","state","onOpenChange","data","call","useControllableState","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","popoverSurfaceBorderRadius","target","resolvePositioningShorthand","positioning","coverTarget","withArrow","offset","mergeArrowOffset","arrowHeights","targetRef","containerRef","arrowRef","usePositioning"],"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 (props.unstable_disableAutoFocus) {\n return;\n }\n\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, props.unstable_disableAutoFocus]);\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"],"mappings":"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"}
|
@@ -1,24 +1,25 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
-
});
|
5
|
-
Object.defineProperty(exports, "PopoverSurface", {
|
6
|
-
enumerable: true,
|
7
|
-
get: ()=>PopoverSurface
|
4
|
+
value: true
|
8
5
|
});
|
9
|
-
|
10
|
-
const
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
14
|
-
const
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
6
|
+
exports.PopoverSurface = void 0;
|
7
|
+
const React = /*#__PURE__*/require("react");
|
8
|
+
const usePopoverSurface_1 = /*#__PURE__*/require("./usePopoverSurface");
|
9
|
+
const renderPopoverSurface_1 = /*#__PURE__*/require("./renderPopoverSurface");
|
10
|
+
const usePopoverSurfaceStyles_1 = /*#__PURE__*/require("./usePopoverSurfaceStyles");
|
11
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
12
|
+
/**
|
13
|
+
* PopoverSurface component renders react children in a positioned box
|
14
|
+
*/
|
15
|
+
exports.PopoverSurface = /*#__PURE__*/React.forwardRef((props, ref) => {
|
16
|
+
const state = usePopoverSurface_1.usePopoverSurface_unstable(props, ref);
|
17
|
+
usePopoverSurfaceStyles_1.usePopoverSurfaceStyles_unstable(state);
|
18
|
+
const {
|
19
|
+
usePopoverSurfaceStyles_unstable: useCustomStyles
|
20
|
+
} = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
21
|
+
useCustomStyles(state);
|
22
|
+
return renderPopoverSurface_1.renderPopoverSurface_unstable(state);
|
21
23
|
});
|
22
|
-
PopoverSurface.displayName =
|
23
|
-
|
24
|
+
exports.PopoverSurface.displayName = 'PopoverSurface';
|
24
25
|
//# sourceMappingURL=PopoverSurface.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"names":["React","require","usePopoverSurface_1","renderPopoverSurface_1","usePopoverSurfaceStyles_1","react_shared_contexts_1","exports","PopoverSurface","forwardRef","props","ref","state","usePopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderPopoverSurface_unstable","displayName"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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\n const { usePopoverSurfaceStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,mBAAA,gBAAAD,OAAA;AACA,MAAAE,sBAAA,gBAAAF,OAAA;AACA,MAAAG,yBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,cAAc,gBAA6CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGT,mBAAA,CAAAU,0BAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEpDN,yBAAA,CAAAS,gCAAgC,CAACF,KAAK,CAAC;EAEvC,MAAM;IAAEE,gCAAgC,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EAC5FD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOR,sBAAA,CAAAa,6BAA6B,CAACL,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFL,OAAA,CAAAC,cAAc,CAACU,WAAW,GAAG,gBAAgB"}
|