@fluentui/react-popover 9.5.15 → 9.7.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +147 -1
- package/CHANGELOG.md +42 -2
- package/lib/Popover.js +0 -1
- package/lib/Popover.js.map +1 -1
- package/lib/PopoverSurface.js +0 -1
- package/lib/PopoverSurface.js.map +1 -1
- package/lib/PopoverTrigger.js +0 -1
- package/lib/PopoverTrigger.js.map +1 -1
- package/lib/components/Popover/Popover.js +3 -5
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Popover/Popover.types.js +0 -1
- package/lib/components/Popover/Popover.types.js.map +1 -1
- package/lib/components/Popover/constants.js +1 -2
- package/lib/components/Popover/constants.js.map +1 -1
- package/lib/components/Popover/index.js +0 -1
- package/lib/components/Popover/index.js.map +1 -1
- package/lib/components/Popover/renderPopover.js +21 -39
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +165 -156
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.js +5 -7
- package/lib/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.types.js +1 -2
- package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib/components/PopoverSurface/index.js +0 -1
- package/lib/components/PopoverSurface/index.js.map +1 -1
- package/lib/components/PopoverSurface/renderPopoverSurface.js +13 -18
- package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js +59 -67
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +25 -3
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.js +3 -5
- package/lib/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.types.js +0 -1
- package/lib/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib/components/PopoverTrigger/index.js +0 -1
- package/lib/components/PopoverTrigger/index.js.map +1 -1
- package/lib/components/PopoverTrigger/renderPopoverTrigger.js +2 -3
- package/lib/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib/components/PopoverTrigger/usePopoverTrigger.js +57 -64
- package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/popoverContext.js +19 -20
- package/lib/popoverContext.js.map +1 -1
- package/lib-commonjs/Popover.js +0 -3
- package/lib-commonjs/Popover.js.map +1 -1
- package/lib-commonjs/PopoverSurface.js +0 -3
- package/lib-commonjs/PopoverSurface.js.map +1 -1
- package/lib-commonjs/PopoverTrigger.js +0 -3
- package/lib-commonjs/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.js +1 -3
- package/lib-commonjs/components/Popover/Popover.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.types.js +0 -3
- package/lib-commonjs/components/Popover/Popover.types.js.map +1 -1
- package/lib-commonjs/components/Popover/constants.js +1 -3
- package/lib-commonjs/components/Popover/constants.js.map +1 -1
- package/lib-commonjs/components/Popover/index.js +0 -3
- package/lib-commonjs/components/Popover/index.js.map +1 -1
- package/lib-commonjs/components/Popover/renderPopover.js +1 -3
- package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +1 -3
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.js +1 -3
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js +0 -3
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/index.js +0 -3
- package/lib-commonjs/components/PopoverSurface/index.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +1 -3
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +1 -3
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js +51 -3
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js +1 -3
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js +0 -3
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/index.js +0 -3
- package/lib-commonjs/components/PopoverTrigger/index.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js +1 -3
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +1 -3
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib-commonjs/index.js +0 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/popoverContext.js +2 -4
- package/lib-commonjs/popoverContext.js.map +1 -1
- package/package.json +12 -12
@@ -13,170 +13,179 @@ import { popoverSurfaceBorderRadius } from './constants';
|
|
13
13
|
* before being passed to renderPopover_unstable.
|
14
14
|
*
|
15
15
|
* @param props - props from this instance of Popover
|
16
|
-
*/
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
...props
|
24
|
-
};
|
25
|
-
const children = React.Children.toArray(props.children);
|
26
|
-
if (process.env.NODE_ENV !== 'production') {
|
27
|
-
if (children.length === 0) {
|
28
|
-
// eslint-disable-next-line no-console
|
29
|
-
console.warn('Popover must contain at least one child');
|
30
|
-
}
|
31
|
-
if (children.length > 2) {
|
32
|
-
// eslint-disable-next-line no-console
|
33
|
-
console.warn('Popover must contain at most two children');
|
34
|
-
}
|
35
|
-
}
|
36
|
-
let popoverTrigger = undefined;
|
37
|
-
let popoverSurface = undefined;
|
38
|
-
if (children.length === 2) {
|
39
|
-
popoverTrigger = children[0];
|
40
|
-
popoverSurface = children[1];
|
41
|
-
} else if (children.length === 1) {
|
42
|
-
popoverSurface = children[0];
|
43
|
-
}
|
44
|
-
const [open, setOpenState] = useOpenState(initialState);
|
45
|
-
const setOpenTimeoutRef = React.useRef(0);
|
46
|
-
const setOpen = useEventCallback((e, shouldOpen) => {
|
47
|
-
clearTimeout(setOpenTimeoutRef.current);
|
48
|
-
if (!(e instanceof Event) && e.persist) {
|
49
|
-
// < React 17 still uses pooled synthetic events
|
50
|
-
e.persist();
|
51
|
-
}
|
52
|
-
if (e.type === 'mouseleave') {
|
53
|
-
var _props_mouseLeaveDelay;
|
54
|
-
// FIXME leaking Node timeout type
|
55
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
56
|
-
// @ts-ignore
|
57
|
-
setOpenTimeoutRef.current = setTimeout(() => {
|
58
|
-
setOpenState(e, shouldOpen);
|
59
|
-
}, (_props_mouseLeaveDelay = props.mouseLeaveDelay) !== null && _props_mouseLeaveDelay !== void 0 ? _props_mouseLeaveDelay : 500);
|
60
|
-
} else {
|
61
|
-
setOpenState(e, shouldOpen);
|
62
|
-
}
|
63
|
-
});
|
64
|
-
// Clear timeout on unmount
|
65
|
-
// Setting state after a component unmounts can cause memory leaks
|
66
|
-
React.useEffect(() => {
|
67
|
-
return () => {
|
68
|
-
clearTimeout(setOpenTimeoutRef.current);
|
16
|
+
*/ export const usePopover_unstable = (props)=>{
|
17
|
+
const [contextTarget, setContextTarget] = usePositioningMouseTarget();
|
18
|
+
const initialState = {
|
19
|
+
size: 'medium',
|
20
|
+
contextTarget,
|
21
|
+
setContextTarget,
|
22
|
+
...props
|
69
23
|
};
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
element: targetDocument,
|
81
|
-
callback: ev => setOpen(ev, false),
|
82
|
-
refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
|
83
|
-
disabled: !open
|
84
|
-
});
|
85
|
-
// only close on scroll for context, or when closeOnScroll is specified
|
86
|
-
const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
|
87
|
-
useOnScrollOutside({
|
88
|
-
contains: elementContains,
|
89
|
-
element: targetDocument,
|
90
|
-
callback: ev => setOpen(ev, false),
|
91
|
-
refs: [positioningRefs.triggerRef, positioningRefs.contentRef],
|
92
|
-
disabled: !open || !closeOnScroll
|
93
|
-
});
|
94
|
-
const {
|
95
|
-
findFirstFocusable
|
96
|
-
} = useFocusFinders();
|
97
|
-
React.useEffect(() => {
|
98
|
-
if (props.unstable_disableAutoFocus) {
|
99
|
-
return;
|
24
|
+
const children = React.Children.toArray(props.children);
|
25
|
+
if (process.env.NODE_ENV !== 'production') {
|
26
|
+
if (children.length === 0) {
|
27
|
+
// eslint-disable-next-line no-console
|
28
|
+
console.warn('Popover must contain at least one child');
|
29
|
+
}
|
30
|
+
if (children.length > 2) {
|
31
|
+
// eslint-disable-next-line no-console
|
32
|
+
console.warn('Popover must contain at most two children');
|
33
|
+
}
|
100
34
|
}
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
35
|
+
let popoverTrigger = undefined;
|
36
|
+
let popoverSurface = undefined;
|
37
|
+
if (children.length === 2) {
|
38
|
+
popoverTrigger = children[0];
|
39
|
+
popoverSurface = children[1];
|
40
|
+
} else if (children.length === 1) {
|
41
|
+
popoverSurface = children[0];
|
106
42
|
}
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
43
|
+
const [open, setOpenState] = useOpenState(initialState);
|
44
|
+
const setOpenTimeoutRef = React.useRef(0);
|
45
|
+
const setOpen = useEventCallback((e, shouldOpen)=>{
|
46
|
+
clearTimeout(setOpenTimeoutRef.current);
|
47
|
+
if (!(e instanceof Event) && e.persist) {
|
48
|
+
// < React 17 still uses pooled synthetic events
|
49
|
+
e.persist();
|
50
|
+
}
|
51
|
+
if (e.type === 'mouseleave') {
|
52
|
+
var _props_mouseLeaveDelay;
|
53
|
+
// FIXME leaking Node timeout type
|
54
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
55
|
+
// @ts-ignore
|
56
|
+
setOpenTimeoutRef.current = setTimeout(()=>{
|
57
|
+
setOpenState(e, shouldOpen);
|
58
|
+
}, (_props_mouseLeaveDelay = props.mouseLeaveDelay) !== null && _props_mouseLeaveDelay !== void 0 ? _props_mouseLeaveDelay : 500);
|
59
|
+
} else {
|
60
|
+
setOpenState(e, shouldOpen);
|
61
|
+
}
|
62
|
+
});
|
63
|
+
// Clear timeout on unmount
|
64
|
+
// Setting state after a component unmounts can cause memory leaks
|
65
|
+
React.useEffect(()=>{
|
66
|
+
return ()=>{
|
67
|
+
clearTimeout(setOpenTimeoutRef.current);
|
68
|
+
};
|
69
|
+
}, []);
|
70
|
+
const toggleOpen = React.useCallback((e)=>{
|
71
|
+
setOpen(e, !open);
|
72
|
+
}, [
|
73
|
+
setOpen,
|
74
|
+
open
|
75
|
+
]);
|
76
|
+
const positioningRefs = usePopoverRefs(initialState);
|
77
|
+
const { targetDocument } = useFluent();
|
78
|
+
useOnClickOutside({
|
79
|
+
contains: elementContains,
|
80
|
+
element: targetDocument,
|
81
|
+
callback: (ev)=>setOpen(ev, false),
|
82
|
+
refs: [
|
83
|
+
positioningRefs.triggerRef,
|
84
|
+
positioningRefs.contentRef
|
85
|
+
],
|
86
|
+
disabled: !open
|
87
|
+
});
|
88
|
+
// only close on scroll for context, or when closeOnScroll is specified
|
89
|
+
const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
|
90
|
+
useOnScrollOutside({
|
91
|
+
contains: elementContains,
|
92
|
+
element: targetDocument,
|
93
|
+
callback: (ev)=>setOpen(ev, false),
|
94
|
+
refs: [
|
95
|
+
positioningRefs.triggerRef,
|
96
|
+
positioningRefs.contentRef
|
97
|
+
],
|
98
|
+
disabled: !open || !closeOnScroll
|
99
|
+
});
|
100
|
+
const { findFirstFocusable } = useFocusFinders();
|
101
|
+
React.useEffect(()=>{
|
102
|
+
if (props.unstable_disableAutoFocus) {
|
103
|
+
return;
|
104
|
+
}
|
105
|
+
if (open && positioningRefs.contentRef.current) {
|
106
|
+
var _positioningRefs_contentRef_current_getAttribute;
|
107
|
+
const containerTabIndex = (_positioningRefs_contentRef_current_getAttribute = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _positioningRefs_contentRef_current_getAttribute !== void 0 ? _positioningRefs_contentRef_current_getAttribute : undefined;
|
108
|
+
const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;
|
109
|
+
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
110
|
+
}
|
111
|
+
}, [
|
112
|
+
findFirstFocusable,
|
113
|
+
open,
|
114
|
+
positioningRefs.contentRef,
|
115
|
+
props.unstable_disableAutoFocus
|
116
|
+
]);
|
117
|
+
var _props_inertTrapFocus, _props_inline;
|
118
|
+
return {
|
119
|
+
...initialState,
|
120
|
+
...positioningRefs,
|
121
|
+
// eslint-disable-next-line deprecation/deprecation
|
122
|
+
inertTrapFocus: (_props_inertTrapFocus = props.inertTrapFocus) !== null && _props_inertTrapFocus !== void 0 ? _props_inertTrapFocus : props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus,
|
123
|
+
popoverTrigger,
|
124
|
+
popoverSurface,
|
125
|
+
open,
|
126
|
+
setOpen,
|
127
|
+
toggleOpen,
|
128
|
+
setContextTarget,
|
129
|
+
contextTarget,
|
130
|
+
inline: (_props_inline = props.inline) !== null && _props_inline !== void 0 ? _props_inline : false
|
131
|
+
};
|
123
132
|
};
|
124
133
|
/**
|
125
134
|
* Creates and manages the Popover open state
|
126
|
-
*/
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);
|
131
|
-
});
|
132
|
-
const [open, setOpenState] = useControllableState({
|
133
|
-
state: state.open,
|
134
|
-
defaultState: state.defaultOpen,
|
135
|
-
initialState: false
|
136
|
-
});
|
137
|
-
state.open = open !== undefined ? open : state.open;
|
138
|
-
const setContextTarget = state.setContextTarget;
|
139
|
-
const setOpen = React.useCallback((e, shouldOpen) => {
|
140
|
-
if (shouldOpen && e.type === 'contextmenu') {
|
141
|
-
setContextTarget(e);
|
142
|
-
}
|
143
|
-
if (!shouldOpen) {
|
144
|
-
setContextTarget(undefined);
|
145
|
-
}
|
146
|
-
setOpenState(shouldOpen);
|
147
|
-
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
|
148
|
-
open: shouldOpen
|
135
|
+
*/ function useOpenState(state) {
|
136
|
+
const onOpenChange = useEventCallback((e, data)=>{
|
137
|
+
var _state_onOpenChange;
|
138
|
+
return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);
|
149
139
|
});
|
150
|
-
|
151
|
-
|
140
|
+
const [open, setOpenState] = useControllableState({
|
141
|
+
state: state.open,
|
142
|
+
defaultState: state.defaultOpen,
|
143
|
+
initialState: false
|
144
|
+
});
|
145
|
+
state.open = open !== undefined ? open : state.open;
|
146
|
+
const setContextTarget = state.setContextTarget;
|
147
|
+
const setOpen = React.useCallback((e, shouldOpen)=>{
|
148
|
+
if (shouldOpen && e.type === 'contextmenu') {
|
149
|
+
setContextTarget(e);
|
150
|
+
}
|
151
|
+
if (!shouldOpen) {
|
152
|
+
setContextTarget(undefined);
|
153
|
+
}
|
154
|
+
setOpenState(shouldOpen);
|
155
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
|
156
|
+
open: shouldOpen
|
157
|
+
});
|
158
|
+
}, [
|
159
|
+
setOpenState,
|
160
|
+
onOpenChange,
|
161
|
+
setContextTarget
|
162
|
+
]);
|
163
|
+
return [
|
164
|
+
open,
|
165
|
+
setOpen
|
166
|
+
];
|
152
167
|
}
|
153
168
|
/**
|
154
169
|
* Creates and sets the necessary trigger, target and content refs used by Popover
|
155
|
-
*/
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
}
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
return {
|
177
|
-
triggerRef,
|
178
|
-
contentRef,
|
179
|
-
arrowRef
|
180
|
-
};
|
170
|
+
*/ function usePopoverRefs(state) {
|
171
|
+
const positioningOptions = {
|
172
|
+
position: 'above',
|
173
|
+
align: 'center',
|
174
|
+
arrowPadding: 2 * popoverSurfaceBorderRadius,
|
175
|
+
target: state.openOnContext ? state.contextTarget : undefined,
|
176
|
+
...resolvePositioningShorthand(state.positioning)
|
177
|
+
};
|
178
|
+
// no reason to render arrow when covering the target
|
179
|
+
if (positioningOptions.coverTarget) {
|
180
|
+
state.withArrow = false;
|
181
|
+
}
|
182
|
+
if (state.withArrow) {
|
183
|
+
positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);
|
184
|
+
}
|
185
|
+
const { targetRef: triggerRef , containerRef: contentRef , arrowRef } = usePositioning(positioningOptions);
|
186
|
+
return {
|
187
|
+
triggerRef,
|
188
|
+
contentRef,
|
189
|
+
arrowRef
|
190
|
+
};
|
181
191
|
}
|
182
|
-
//# sourceMappingURL=usePopover.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"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","_props_mouseLeaveDelay","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","closeOnScroll","openOnContext","findFirstFocusable","unstable_disableAutoFocus","_positioningRefs_contentRef_current_getAttribute","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","_props_inertTrapFocus","_props_inline","inertTrapFocus","legacyTrapFocus","inline","state","onOpenChange","data","_state_onOpenChange","call","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","positioning","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"sources":["../../../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 // eslint-disable-next-line deprecation/deprecation\n inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\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
|
+
{"version":3,"sources":["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 // eslint-disable-next-line deprecation/deprecation\n inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\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"],"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","unstable_disableAutoFocus","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","inertTrapFocus","legacyTrapFocus","inline","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","positioning","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"mappings":"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"}
|
@@ -5,12 +5,10 @@ import { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styl
|
|
5
5
|
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
6
6
|
/**
|
7
7
|
* PopoverSurface component renders react children in a positioned box
|
8
|
-
*/
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
return renderPopoverSurface_unstable(state);
|
8
|
+
*/ export const PopoverSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
9
|
+
const state = usePopoverSurface_unstable(props, ref);
|
10
|
+
usePopoverSurfaceStyles_unstable(state);
|
11
|
+
useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);
|
12
|
+
return renderPopoverSurface_unstable(state);
|
14
13
|
});
|
15
14
|
PopoverSurface.displayName = 'PopoverSurface';
|
16
|
-
//# sourceMappingURL=PopoverSurface.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["PopoverSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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 useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n\n return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACvG,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
|
@@ -1,2 +1 @@
|
|
1
|
-
export {};
|
2
|
-
//# sourceMappingURL=PopoverSurface.types.js.map
|
1
|
+
export { };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["PopoverSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;\n\n/**\n * Names of the slots in PopoverSurfaceProps\n */\nexport type PopoverSurfaceSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * PopoverSurface State\n */\nexport type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &\n Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'size' | 'withArrow'> & {\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n"],"names":[],"mappings":"AAAA,WAwBI"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './PopoverSurface';\nexport * from './PopoverSurface.types';\nexport * from './renderPopoverSurface';\nexport * from './usePopoverSurface';\nexport * from './usePopoverSurfaceStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,mCAAmC"}
|
@@ -1,23 +1,18 @@
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
2
2
|
import { getSlotsNext } from '@fluentui/react-utilities';
|
3
3
|
import { Portal } from '@fluentui/react-portal';
|
4
4
|
/**
|
5
5
|
* Render the final JSX of PopoverSurface
|
6
|
-
*/
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
}
|
19
|
-
return /*#__PURE__*/createElement(Portal, {
|
20
|
-
mountNode: state.mountNode
|
21
|
-
}, surface);
|
6
|
+
*/ export const renderPopoverSurface_unstable = (state)=>{
|
7
|
+
const { slots , slotProps } = getSlotsNext(state);
|
8
|
+
const surface = /*#__PURE__*/ createElement(slots.root, slotProps.root, state.withArrow && /*#__PURE__*/ createElement("div", {
|
9
|
+
ref: state.arrowRef,
|
10
|
+
className: state.arrowClassName
|
11
|
+
}), slotProps.root.children);
|
12
|
+
if (state.inline) {
|
13
|
+
return surface;
|
14
|
+
}
|
15
|
+
return /*#__PURE__*/ createElement(Portal, {
|
16
|
+
mountNode: state.mountNode
|
17
|
+
}, surface);
|
22
18
|
};
|
23
|
-
//# sourceMappingURL=renderPopoverSurface.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["renderPopoverSurface.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\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 } = getSlotsNext<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"],"names":["createElement","getSlotsNext","Portal","renderPopoverSurface_unstable","state","slots","slotProps","surface","root","withArrow","div","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,MAAM,QAAQ,yBAAyB;AAGhD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAAkCG;IAE/D,MAAMG,wBACJ,AAdJ,cAcKF,MAAMG,IAAI,EAAKF,UAAUE,IAAI,EAC3BJ,MAAMK,SAAS,kBAAI,AAf1B,cAe2BC;QAAIC,KAAKP,MAAMQ,QAAQ;QAAEC,WAAWT,MAAMU,cAAc;QAC5ER,UAAUE,IAAI,CAACO,QAAQ;IAI5B,IAAIX,MAAMY,MAAM,EAAE;QAChB,OAAOT;IACT,CAAC;IAED,qBAAO,AAxBT,cAwBUL;QAAOe,WAAWb,MAAMa,SAAS;OAAGV;AAC9C,EAAE"}
|