@fluentui/react-popover 9.3.5 → 9.4.0
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 +131 -1
- package/CHANGELOG.md +33 -2
- package/dist/index.d.ts +7 -0
- package/lib/components/Popover/Popover.js +0 -1
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Popover/Popover.types.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 +12 -27
- 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-amd/components/Popover/Popover.types.js.map +1 -1
- package/lib-amd/components/Popover/usePopover.js +4 -1
- package/lib-amd/components/Popover/usePopover.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 +12 -37
- 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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-popover/src/PopoverSurface.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/PopoverSurface.ts"],"sourcesContent":["export * from './components/PopoverSurface/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-popover/src/PopoverTrigger.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/PopoverTrigger.ts"],"sourcesContent":["export * from './components/PopoverTrigger/index';\n"]}
|
|
@@ -4,20 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Popover = void 0;
|
|
7
|
-
|
|
8
7
|
const usePopover_1 = /*#__PURE__*/require("./usePopover");
|
|
9
|
-
|
|
10
8
|
const renderPopover_1 = /*#__PURE__*/require("./renderPopover");
|
|
11
9
|
/**
|
|
12
10
|
* Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
|
|
13
11
|
*/
|
|
14
|
-
|
|
15
|
-
|
|
16
12
|
const Popover = props => {
|
|
17
13
|
const state = usePopover_1.usePopover_unstable(props);
|
|
18
14
|
return renderPopover_1.renderPopover_unstable(state);
|
|
19
15
|
};
|
|
20
|
-
|
|
21
16
|
exports.Popover = Popover;
|
|
22
17
|
exports.Popover.displayName = 'Popover';
|
|
23
18
|
//# sourceMappingURL=Popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AACA;AACA;AAGA;;;AAGO,MAAMA,OAAO,GAA2BC,KAAK,IAAG;EACrD,MAAMC,KAAK,GAAGC,gCAAmB,CAACF,KAAK,CAAC;EAExC,OAAOG,sCAAsB,CAACF,KAAK,CAAC;AACtC,CAAC;AAJYG,eAAO;AAMpBA,eAAO,CAACC,WAAW,GAAG,SAAS","names":["Popover","props","state","usePopover_1","renderPopover_1","exports","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":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-popover/src/components/Popover/constants.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;;;;;;;;AAQaA,kCAA0B,GAAG,CAAC","names":["exports"],"sourceRoot":"../src/","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"]}
|
|
@@ -3,14 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
7
|
tslib_1.__exportStar(require("./Popover"), exports);
|
|
10
|
-
|
|
11
8
|
tslib_1.__exportStar(require("./Popover.types"), exports);
|
|
12
|
-
|
|
13
9
|
tslib_1.__exportStar(require("./renderPopover"), exports);
|
|
14
|
-
|
|
15
10
|
tslib_1.__exportStar(require("./usePopover"), exports);
|
|
16
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-popover/src/components/Popover/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","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"]}
|
|
@@ -4,15 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.renderPopover_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const popoverContext_1 = /*#__PURE__*/require("../../popoverContext");
|
|
11
9
|
/**
|
|
12
10
|
* Render the final JSX of Popover
|
|
13
11
|
*/
|
|
14
|
-
|
|
15
|
-
|
|
16
12
|
const renderPopover_unstable = state => {
|
|
17
13
|
const {
|
|
18
14
|
appearance,
|
|
@@ -51,6 +47,5 @@ const renderPopover_unstable = state => {
|
|
|
51
47
|
}
|
|
52
48
|
}, state.popoverTrigger, state.open && state.popoverSurface);
|
|
53
49
|
};
|
|
54
|
-
|
|
55
50
|
exports.renderPopover_unstable = renderPopover_unstable;
|
|
56
51
|
//# sourceMappingURL=renderPopover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,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,OACEgB,oBAACC,+BAAc,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,eAAe;MACfD;;EACD,GAEAd,KAAK,CAACoB,cAAc,EACpBpB,KAAK,CAACM,IAAI,IAAIN,KAAK,CAACqB,cAAc,CACX;AAE9B,CAAC;AA3CYC,8BAAsB","names":["renderPopover_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","legacyTrapFocus","React","popoverContext_1","Provider","value","popoverTrigger","popoverSurface","exports"],"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"]}
|
|
@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.usePopover_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
-
|
|
12
9
|
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
13
|
-
|
|
14
10
|
const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
|
|
15
|
-
|
|
16
11
|
const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
|
|
17
|
-
|
|
18
12
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
19
|
-
|
|
20
13
|
const index_1 = /*#__PURE__*/require("../PopoverSurface/index");
|
|
21
|
-
|
|
22
14
|
const constants_1 = /*#__PURE__*/require("./constants");
|
|
23
15
|
/**
|
|
24
16
|
* Create the state required to render Popover.
|
|
@@ -28,11 +20,8 @@ const constants_1 = /*#__PURE__*/require("./constants");
|
|
|
28
20
|
*
|
|
29
21
|
* @param props - props from this instance of Popover
|
|
30
22
|
*/
|
|
31
|
-
|
|
32
|
-
|
|
33
23
|
const usePopover_unstable = props => {
|
|
34
24
|
var _a;
|
|
35
|
-
|
|
36
25
|
const [contextTarget, setContextTarget] = react_positioning_1.usePositioningMouseTarget();
|
|
37
26
|
const initialState = {
|
|
38
27
|
size: 'medium',
|
|
@@ -41,41 +30,33 @@ const usePopover_unstable = props => {
|
|
|
41
30
|
...props
|
|
42
31
|
};
|
|
43
32
|
const children = React.Children.toArray(props.children);
|
|
44
|
-
|
|
45
33
|
if (process.env.NODE_ENV !== 'production') {
|
|
46
34
|
if (children.length === 0) {
|
|
47
35
|
// eslint-disable-next-line no-console
|
|
48
36
|
console.warn('Popover must contain at least one child');
|
|
49
37
|
}
|
|
50
|
-
|
|
51
38
|
if (children.length > 2) {
|
|
52
39
|
// eslint-disable-next-line no-console
|
|
53
40
|
console.warn('Popover must contain at most two children');
|
|
54
41
|
}
|
|
55
42
|
}
|
|
56
|
-
|
|
57
43
|
let popoverTrigger = undefined;
|
|
58
44
|
let popoverSurface = undefined;
|
|
59
|
-
|
|
60
45
|
if (children.length === 2) {
|
|
61
46
|
popoverTrigger = children[0];
|
|
62
47
|
popoverSurface = children[1];
|
|
63
48
|
} else if (children.length === 1) {
|
|
64
49
|
popoverSurface = children[0];
|
|
65
50
|
}
|
|
66
|
-
|
|
67
51
|
const [open, setOpenState] = useOpenState(initialState);
|
|
68
52
|
const setOpenTimeoutRef = React.useRef(0);
|
|
69
53
|
const setOpen = react_utilities_1.useEventCallback((e, shouldOpen) => {
|
|
70
54
|
var _a;
|
|
71
|
-
|
|
72
55
|
clearTimeout(setOpenTimeoutRef.current);
|
|
73
|
-
|
|
74
56
|
if (!(e instanceof Event) && e.persist) {
|
|
75
57
|
// < React 17 still uses pooled synthetic events
|
|
76
58
|
e.persist();
|
|
77
59
|
}
|
|
78
|
-
|
|
79
60
|
if (e.type === 'mouseleave') {
|
|
80
61
|
// FIXME leaking Node timeout type
|
|
81
62
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -86,9 +67,9 @@ const usePopover_unstable = props => {
|
|
|
86
67
|
} else {
|
|
87
68
|
setOpenState(e, shouldOpen);
|
|
88
69
|
}
|
|
89
|
-
});
|
|
70
|
+
});
|
|
71
|
+
// Clear timeout on unmount
|
|
90
72
|
// Setting state after a component unmounts can cause memory leaks
|
|
91
|
-
|
|
92
73
|
React.useEffect(() => {
|
|
93
74
|
return () => {
|
|
94
75
|
clearTimeout(setOpenTimeoutRef.current);
|
|
@@ -107,8 +88,8 @@ const usePopover_unstable = props => {
|
|
|
107
88
|
callback: ev => setOpen(ev, false),
|
|
108
89
|
refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
|
|
109
90
|
disabled: !open
|
|
110
|
-
});
|
|
111
|
-
|
|
91
|
+
});
|
|
92
|
+
// only close on scroll for context, or when closeOnScroll is specified
|
|
112
93
|
const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
|
|
113
94
|
react_utilities_1.useOnScrollOutside({
|
|
114
95
|
contains: react_portal_1.elementContains,
|
|
@@ -122,14 +103,17 @@ const usePopover_unstable = props => {
|
|
|
122
103
|
} = react_tabster_1.useFocusFinders();
|
|
123
104
|
React.useEffect(() => {
|
|
124
105
|
var _a;
|
|
125
|
-
|
|
106
|
+
if (props.unstable_disableAutoFocus) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
126
109
|
if (open && positioningRefs.contentRef.current) {
|
|
127
110
|
const containerTabIndex = (_a = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _a !== void 0 ? _a : undefined;
|
|
128
111
|
const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;
|
|
129
112
|
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
130
113
|
}
|
|
131
|
-
}, [findFirstFocusable, open, positioningRefs.contentRef]);
|
|
132
|
-
return {
|
|
114
|
+
}, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);
|
|
115
|
+
return {
|
|
116
|
+
...initialState,
|
|
133
117
|
...positioningRefs,
|
|
134
118
|
popoverTrigger,
|
|
135
119
|
popoverSurface,
|
|
@@ -141,16 +125,13 @@ const usePopover_unstable = props => {
|
|
|
141
125
|
inline: (_a = props.inline) !== null && _a !== void 0 ? _a : false
|
|
142
126
|
};
|
|
143
127
|
};
|
|
144
|
-
|
|
145
128
|
exports.usePopover_unstable = usePopover_unstable;
|
|
146
129
|
/**
|
|
147
130
|
* Creates and manages the Popover open state
|
|
148
131
|
*/
|
|
149
|
-
|
|
150
132
|
function useOpenState(state) {
|
|
151
133
|
const onOpenChange = react_utilities_1.useEventCallback((e, data) => {
|
|
152
134
|
var _a;
|
|
153
|
-
|
|
154
135
|
return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
|
|
155
136
|
});
|
|
156
137
|
const [open, setOpenState] = react_utilities_1.useControllableState({
|
|
@@ -164,11 +145,9 @@ function useOpenState(state) {
|
|
|
164
145
|
if (shouldOpen && e.type === 'contextmenu') {
|
|
165
146
|
setContextTarget(e);
|
|
166
147
|
}
|
|
167
|
-
|
|
168
148
|
if (!shouldOpen) {
|
|
169
149
|
setContextTarget(undefined);
|
|
170
150
|
}
|
|
171
|
-
|
|
172
151
|
setOpenState(shouldOpen);
|
|
173
152
|
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
|
|
174
153
|
open: shouldOpen
|
|
@@ -179,8 +158,6 @@ function useOpenState(state) {
|
|
|
179
158
|
/**
|
|
180
159
|
* Creates and sets the necessary trigger, target and content refs used by Popover
|
|
181
160
|
*/
|
|
182
|
-
|
|
183
|
-
|
|
184
161
|
function usePopoverRefs(state) {
|
|
185
162
|
const positioningOptions = {
|
|
186
163
|
position: 'above',
|
|
@@ -188,16 +165,14 @@ function usePopoverRefs(state) {
|
|
|
188
165
|
arrowPadding: 2 * constants_1.popoverSurfaceBorderRadius,
|
|
189
166
|
target: state.openOnContext ? state.contextTarget : undefined,
|
|
190
167
|
...react_positioning_1.resolvePositioningShorthand(state.positioning)
|
|
191
|
-
};
|
|
192
|
-
|
|
168
|
+
};
|
|
169
|
+
// no reason to render arrow when covering the target
|
|
193
170
|
if (positioningOptions.coverTarget) {
|
|
194
171
|
state.withArrow = false;
|
|
195
172
|
}
|
|
196
|
-
|
|
197
173
|
if (state.withArrow) {
|
|
198
174
|
positioningOptions.offset = react_positioning_1.mergeArrowOffset(positioningOptions.offset, index_1.arrowHeights[state.size]);
|
|
199
175
|
}
|
|
200
|
-
|
|
201
176
|
const {
|
|
202
177
|
targetRef: triggerRef,
|
|
203
178
|
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":["usePopover_unstable","props","contextTarget","setContextTarget","react_positioning_1","initialState","size","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","react_utilities_1","e","shouldOpen","clearTimeout","current","Event","persist","type","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","react_shared_contexts_1","contains","react_portal_1","element","callback","ev","refs","triggerRef","contentRef","disabled","closeOnScroll","openOnContext","findFirstFocusable","react_tabster_1","unstable_disableAutoFocus","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","inline","exports","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","constants_1","target","positioning","coverTarget","withArrow","offset","index_1","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 (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"]}
|
|
@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.PopoverSurface = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const usePopoverSurface_1 = /*#__PURE__*/require("./usePopoverSurface");
|
|
11
|
-
|
|
12
9
|
const renderPopoverSurface_1 = /*#__PURE__*/require("./renderPopoverSurface");
|
|
13
|
-
|
|
14
10
|
const usePopoverSurfaceStyles_1 = /*#__PURE__*/require("./usePopoverSurfaceStyles");
|
|
15
11
|
/**
|
|
16
12
|
* PopoverSurface component renders react children in a positioned box
|
|
17
13
|
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
14
|
exports.PopoverSurface = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
21
15
|
const state = usePopoverSurface_1.usePopoverSurface_unstable(props, ref);
|
|
22
16
|
usePopoverSurfaceStyles_1.usePopoverSurfaceStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,sBAAc,gBAA6CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGC,8CAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEpDG,0DAAgC,CAACF,KAAK,CAAC;EACvC,OAAOG,oDAA6B,CAACH,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFL,sBAAc,CAACS,WAAW,GAAG,gBAAgB","names":["exports","React","forwardRef","props","ref","state","usePopoverSurface_1","usePopoverSurfaceStyles_1","renderPopoverSurface_1","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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
|
@@ -3,16 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
7
|
tslib_1.__exportStar(require("./PopoverSurface"), exports);
|
|
10
|
-
|
|
11
8
|
tslib_1.__exportStar(require("./PopoverSurface.types"), exports);
|
|
12
|
-
|
|
13
9
|
tslib_1.__exportStar(require("./renderPopoverSurface"), exports);
|
|
14
|
-
|
|
15
10
|
tslib_1.__exportStar(require("./usePopoverSurface"), exports);
|
|
16
|
-
|
|
17
11
|
tslib_1.__exportStar(require("./usePopoverSurfaceStyles"), exports);
|
|
18
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-popover/src/components/PopoverSurface/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/PopoverSurface/index.ts"],"sourcesContent":["export * from './PopoverSurface';\nexport * from './PopoverSurface.types';\nexport * from './renderPopoverSurface';\nexport * from './usePopoverSurface';\nexport * from './usePopoverSurfaceStyles';\n"]}
|
|
@@ -4,36 +4,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.renderPopoverSurface_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
|
|
11
|
-
|
|
12
9
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
13
10
|
/**
|
|
14
11
|
* Render the final JSX of PopoverSurface
|
|
15
12
|
*/
|
|
16
|
-
|
|
17
|
-
|
|
18
13
|
const renderPopoverSurface_unstable = state => {
|
|
19
14
|
const {
|
|
20
15
|
slots,
|
|
21
16
|
slotProps
|
|
22
17
|
} = react_utilities_1.getSlots(state);
|
|
23
|
-
const surface = React.createElement(slots.root, {
|
|
18
|
+
const surface = React.createElement(slots.root, {
|
|
19
|
+
...slotProps.root
|
|
24
20
|
}, state.withArrow && React.createElement("div", {
|
|
25
21
|
ref: state.arrowRef,
|
|
26
22
|
className: state.arrowClassName
|
|
27
23
|
}), slotProps.root.children);
|
|
28
|
-
|
|
29
24
|
if (state.inline) {
|
|
30
25
|
return surface;
|
|
31
26
|
}
|
|
32
|
-
|
|
33
27
|
return React.createElement(react_portal_1.Portal, {
|
|
34
28
|
mountNode: state.mountNode
|
|
35
29
|
}, surface);
|
|
36
30
|
};
|
|
37
|
-
|
|
38
31
|
exports.renderPopoverSurface_unstable = renderPopoverSurface_unstable;
|
|
39
32
|
//# sourceMappingURL=renderPopoverSurface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;;;AAGO,MAAMA,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAsBH,KAAK,CAAC;EAEjE,MAAMI,OAAO,GACXC,oBAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAC3BN,KAAK,CAACO,SAAS,IAAIF;IAAKG,GAAG,EAAER,KAAK,CAACS,QAAQ;IAAEC,SAAS,EAAEV,KAAK,CAACW;EAAc,EAAI,EAChFT,SAAS,CAACI,IAAI,CAACM,QAAQ,CAE3B;EAED,IAAIZ,KAAK,CAACa,MAAM,EAAE;IAChB,OAAOT,OAAO;;EAGhB,OAAOC,oBAACS,qBAAM;IAACC,SAAS,EAAEf,KAAK,CAACe;EAAS,GAAGX,OAAO,CAAU;AAC/D,CAAC;AAfYY,qCAA6B","names":["renderPopoverSurface_unstable","state","slots","slotProps","react_utilities_1","surface","React","root","withArrow","ref","arrowRef","className","arrowClassName","children","inline","react_portal_1","mountNode","exports"],"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"]}
|
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.usePopoverSurface_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
-
|
|
10
8
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
11
|
-
|
|
12
9
|
const popoverContext_1 = /*#__PURE__*/require("../../popoverContext");
|
|
13
10
|
/**
|
|
14
11
|
* Create the state required to render PopoverSurface.
|
|
@@ -19,8 +16,6 @@ const popoverContext_1 = /*#__PURE__*/require("../../popoverContext");
|
|
|
19
16
|
* @param props - props from this instance of PopoverSurface
|
|
20
17
|
* @param ref - reference to root HTMLDivElement of PopoverSurface
|
|
21
18
|
*/
|
|
22
|
-
|
|
23
|
-
|
|
24
19
|
const usePopoverSurface_unstable = (props, ref) => {
|
|
25
20
|
const contentRef = popoverContext_1.usePopoverContext_unstable(context => context.contentRef);
|
|
26
21
|
const openOnHover = popoverContext_1.usePopoverContext_unstable(context => context.openOnHover);
|
|
@@ -62,37 +57,28 @@ const usePopoverSurface_unstable = (props, ref) => {
|
|
|
62
57
|
onMouseLeave: onMouseLeaveOriginal,
|
|
63
58
|
onKeyDown: onKeyDownOriginal
|
|
64
59
|
} = state.root;
|
|
65
|
-
|
|
66
60
|
state.root.onMouseEnter = e => {
|
|
67
61
|
if (openOnHover) {
|
|
68
62
|
setOpen(e, true);
|
|
69
63
|
}
|
|
70
|
-
|
|
71
64
|
onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
|
|
72
65
|
};
|
|
73
|
-
|
|
74
66
|
state.root.onMouseLeave = e => {
|
|
75
67
|
if (openOnHover) {
|
|
76
68
|
setOpen(e, false);
|
|
77
69
|
}
|
|
78
|
-
|
|
79
70
|
onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
|
|
80
71
|
};
|
|
81
|
-
|
|
82
72
|
state.root.onKeyDown = e => {
|
|
83
|
-
var _a;
|
|
73
|
+
var _a;
|
|
74
|
+
// only close if the event happened inside the current popover
|
|
84
75
|
// If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
|
|
85
|
-
|
|
86
|
-
|
|
87
76
|
if (e.key === 'Escape' && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
88
77
|
setOpen(e, false);
|
|
89
78
|
}
|
|
90
|
-
|
|
91
79
|
onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
|
|
92
80
|
};
|
|
93
|
-
|
|
94
81
|
return state;
|
|
95
82
|
};
|
|
96
|
-
|
|
97
83
|
exports.usePopoverSurface_unstable = usePopoverSurface_unstable;
|
|
98
84
|
//# sourceMappingURL=usePopoverSurface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"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","names":["usePopoverSurface_unstable","props","ref","contentRef","popoverContext_1","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","legacyTrapFocus","inline","modalAttributes","react_tabster_1","state","components","root","react_utilities_1","role","undefined","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","exports"],"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"]}
|