@react-spectrum/menu 3.22.7 → 3.22.9
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/dist/Menu.main.js +1 -1
- package/dist/Menu.main.js.map +1 -1
- package/dist/Menu.mjs +2 -2
- package/dist/Menu.module.js +2 -2
- package/dist/Menu.module.js.map +1 -1
- package/dist/MenuItem.main.js +2 -1
- package/dist/MenuItem.main.js.map +1 -1
- package/dist/MenuItem.mjs +2 -1
- package/dist/MenuItem.module.js +2 -1
- package/dist/MenuItem.module.js.map +1 -1
- package/dist/Popover.main.js +196 -0
- package/dist/Popover.main.js.map +1 -0
- package/dist/Popover.mjs +191 -0
- package/dist/Popover.module.js +191 -0
- package/dist/Popover.module.js.map +1 -0
- package/dist/SubmenuTrigger.main.js +2 -2
- package/dist/SubmenuTrigger.main.js.map +1 -1
- package/dist/SubmenuTrigger.mjs +2 -2
- package/dist/SubmenuTrigger.module.js +2 -2
- package/dist/SubmenuTrigger.module.js.map +1 -1
- package/dist/Underlay.main.js +54 -0
- package/dist/Underlay.main.js.map +1 -0
- package/dist/Underlay.mjs +49 -0
- package/dist/Underlay.module.js +49 -0
- package/dist/Underlay.module.js.map +1 -0
- package/dist/calculatePosition.main.js +392 -0
- package/dist/calculatePosition.main.js.map +1 -0
- package/dist/calculatePosition.mjs +386 -0
- package/dist/calculatePosition.module.js +386 -0
- package/dist/calculatePosition.module.js.map +1 -0
- package/dist/menu.2259a533.css +210 -0
- package/dist/menu.2259a533.css.map +1 -0
- package/dist/menu.359a0c0a.css +131 -0
- package/dist/menu.359a0c0a.css.map +1 -0
- package/dist/menu.57b3a408.css +12 -0
- package/dist/menu.57b3a408.css.map +1 -0
- package/dist/overlays_css.main.js +35 -0
- package/dist/overlays_css.main.js.map +1 -0
- package/dist/overlays_css.mjs +37 -0
- package/dist/overlays_css.module.js +37 -0
- package/dist/overlays_css.module.js.map +1 -0
- package/dist/popover_vars_css.main.js +83 -0
- package/dist/popover_vars_css.main.js.map +1 -0
- package/dist/popover_vars_css.mjs +85 -0
- package/dist/popover_vars_css.module.js +85 -0
- package/dist/popover_vars_css.module.js.map +1 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/underlay_vars_css.main.js +50 -0
- package/dist/underlay_vars_css.main.js.map +1 -0
- package/dist/underlay_vars_css.mjs +52 -0
- package/dist/underlay_vars_css.module.js +52 -0
- package/dist/underlay_vars_css.module.js.map +1 -0
- package/dist/useCloseOnScroll.main.js +49 -0
- package/dist/useCloseOnScroll.main.js.map +1 -0
- package/dist/useCloseOnScroll.mjs +44 -0
- package/dist/useCloseOnScroll.module.js +44 -0
- package/dist/useCloseOnScroll.module.js.map +1 -0
- package/dist/useOverlayPosition.main.js +225 -0
- package/dist/useOverlayPosition.main.js.map +1 -0
- package/dist/useOverlayPosition.mjs +220 -0
- package/dist/useOverlayPosition.module.js +220 -0
- package/dist/useOverlayPosition.module.js.map +1 -0
- package/dist/usePopover.main.js +73 -0
- package/dist/usePopover.main.js.map +1 -0
- package/dist/usePopover.mjs +68 -0
- package/dist/usePopover.module.js +68 -0
- package/dist/usePopover.module.js.map +1 -0
- package/package.json +23 -23
- package/src/Menu.tsx +2 -1
- package/src/MenuItem.tsx +5 -1
- package/src/Popover.tsx +240 -0
- package/src/SubmenuTrigger.tsx +1 -1
- package/src/Underlay.tsx +43 -0
- package/src/calculatePosition.ts +627 -0
- package/src/useCloseOnScroll.ts +64 -0
- package/src/useOverlayPosition.ts +327 -0
- package/src/usePopover.ts +136 -0
package/dist/Popover.mjs
ADDED
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
import "./menu.57b3a408.css";
|
|
2
|
+
import $g5w4B$overlays_cssmodulejs from "./overlays_css.mjs";
|
|
3
|
+
import "./menu.2259a533.css";
|
|
4
|
+
import $g5w4B$popover_vars_cssmodulejs from "./popover_vars_css.mjs";
|
|
5
|
+
import {Underlay as $274a838403463b67$export$f360afc887607b02} from "./Underlay.mjs";
|
|
6
|
+
import {usePopover as $87eca3bd2e28ca01$export$542a6fd13ac93354} from "./usePopover.mjs";
|
|
7
|
+
import {DismissButton as $g5w4B$DismissButton} from "@react-aria/overlays";
|
|
8
|
+
import {useDOMRef as $g5w4B$useDOMRef, useStyleProps as $g5w4B$useStyleProps, classNames as $g5w4B$classNames} from "@react-spectrum/utils";
|
|
9
|
+
import {useFocusWithin as $g5w4B$useFocusWithin} from "@react-aria/interactions";
|
|
10
|
+
import {useObjectRef as $g5w4B$useObjectRef, mergeProps as $g5w4B$mergeProps, useLayoutEffect as $g5w4B$useLayoutEffect} from "@react-aria/utils";
|
|
11
|
+
import {Overlay as $g5w4B$Overlay} from "@react-spectrum/overlays";
|
|
12
|
+
import $g5w4B$react, {forwardRef as $g5w4B$forwardRef, useRef as $g5w4B$useRef, useState as $g5w4B$useState} from "react";
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
function $parcel$interopDefault(a) {
|
|
16
|
+
return a && a.__esModule ? a.default : a;
|
|
17
|
+
}
|
|
18
|
+
/*
|
|
19
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
21
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
22
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
23
|
+
*
|
|
24
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
25
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
26
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
27
|
+
* governing permissions and limitations under the License.
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
|
|
40
|
+
* other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
|
|
41
|
+
* between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
|
|
42
|
+
* the path always starts at 0 so that it perfectly overlaps the popover's border.
|
|
43
|
+
* See bottom of file for more explanation.
|
|
44
|
+
*/ let $bf810f3fb07f8592$var$arrowPlacement = {
|
|
45
|
+
left: 'right',
|
|
46
|
+
right: 'right',
|
|
47
|
+
top: 'bottom',
|
|
48
|
+
bottom: 'bottom'
|
|
49
|
+
};
|
|
50
|
+
const $bf810f3fb07f8592$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $g5w4B$forwardRef)(function Popover(props, ref) {
|
|
51
|
+
let { children: children, state: state, ...otherProps } = props;
|
|
52
|
+
let domRef = (0, $g5w4B$useDOMRef)(ref);
|
|
53
|
+
let wrapperRef = (0, $g5w4B$useRef)(null);
|
|
54
|
+
return /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $g5w4B$Overlay), {
|
|
55
|
+
...otherProps,
|
|
56
|
+
isOpen: state.isOpen,
|
|
57
|
+
nodeRef: wrapperRef
|
|
58
|
+
}, /*#__PURE__*/ (0, $g5w4B$react).createElement($bf810f3fb07f8592$var$PopoverWrapper, {
|
|
59
|
+
ref: domRef,
|
|
60
|
+
...props,
|
|
61
|
+
wrapperRef: wrapperRef
|
|
62
|
+
}, children));
|
|
63
|
+
});
|
|
64
|
+
const $bf810f3fb07f8592$var$PopoverWrapper = /*#__PURE__*/ (0, $g5w4B$forwardRef)((props, ref)=>{
|
|
65
|
+
let { children: children, isOpen: isOpen, hideArrow: hideArrow, isNonModal: isNonModal, enableBothDismissButtons: enableBothDismissButtons, state: state, wrapperRef: wrapperRef, onDismissButtonPress: onDismissButtonPress = ()=>state.close() } = props;
|
|
66
|
+
let { styleProps: styleProps } = (0, $g5w4B$useStyleProps)(props);
|
|
67
|
+
let objRef = (0, $g5w4B$useObjectRef)(ref);
|
|
68
|
+
let { size: size, borderWidth: borderWidth, arrowRef: arrowRef } = $bf810f3fb07f8592$var$useArrowSize();
|
|
69
|
+
const borderRadius = $bf810f3fb07f8592$var$usePopoverBorderRadius(objRef);
|
|
70
|
+
let borderDiagonal = borderWidth * Math.SQRT2;
|
|
71
|
+
let primary = size + borderDiagonal;
|
|
72
|
+
let secondary = primary * 2;
|
|
73
|
+
let { popoverProps: popoverProps, arrowProps: arrowProps, underlayProps: underlayProps, placement: placement } = (0, $87eca3bd2e28ca01$export$542a6fd13ac93354)({
|
|
74
|
+
...props,
|
|
75
|
+
popoverRef: objRef,
|
|
76
|
+
maxHeight: undefined,
|
|
77
|
+
arrowSize: hideArrow ? 0 : secondary,
|
|
78
|
+
arrowBoundaryOffset: borderRadius
|
|
79
|
+
}, state);
|
|
80
|
+
let { focusWithinProps: focusWithinProps } = (0, $g5w4B$useFocusWithin)(props);
|
|
81
|
+
// Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
|
|
82
|
+
return /*#__PURE__*/ (0, $g5w4B$react).createElement("div", {
|
|
83
|
+
ref: wrapperRef
|
|
84
|
+
}, !isNonModal && /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $274a838403463b67$export$f360afc887607b02), {
|
|
85
|
+
isTransparent: true,
|
|
86
|
+
...(0, $g5w4B$mergeProps)(underlayProps),
|
|
87
|
+
isOpen: isOpen
|
|
88
|
+
}), /*#__PURE__*/ (0, $g5w4B$react).createElement("div", {
|
|
89
|
+
...styleProps,
|
|
90
|
+
...(0, $g5w4B$mergeProps)(popoverProps, focusWithinProps),
|
|
91
|
+
style: {
|
|
92
|
+
...styleProps.style,
|
|
93
|
+
...popoverProps.style
|
|
94
|
+
},
|
|
95
|
+
ref: objRef,
|
|
96
|
+
className: (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$popover_vars_cssmodulejs))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
|
|
97
|
+
'spectrum-Popover--withTip': !hideArrow,
|
|
98
|
+
'is-open': isOpen,
|
|
99
|
+
[`is-open--${placement}`]: isOpen
|
|
100
|
+
}, (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$overlays_cssmodulejs))), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
|
|
101
|
+
role: "presentation",
|
|
102
|
+
"data-testid": "popover"
|
|
103
|
+
}, (!isNonModal || enableBothDismissButtons) && /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $g5w4B$DismissButton), {
|
|
104
|
+
onDismiss: onDismissButtonPress
|
|
105
|
+
}), children, hideArrow ? null : /*#__PURE__*/ (0, $g5w4B$react).createElement($bf810f3fb07f8592$var$Arrow, {
|
|
106
|
+
arrowProps: arrowProps,
|
|
107
|
+
isLandscape: placement != null ? $bf810f3fb07f8592$var$arrowPlacement[placement] === 'bottom' : false,
|
|
108
|
+
arrowRef: arrowRef,
|
|
109
|
+
primary: primary,
|
|
110
|
+
secondary: secondary,
|
|
111
|
+
borderDiagonal: borderDiagonal
|
|
112
|
+
}), /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $g5w4B$DismissButton), {
|
|
113
|
+
onDismiss: onDismissButtonPress
|
|
114
|
+
})));
|
|
115
|
+
});
|
|
116
|
+
function $bf810f3fb07f8592$var$usePopoverBorderRadius(popoverRef) {
|
|
117
|
+
let [borderRadius, setBorderRadius] = (0, $g5w4B$useState)(0);
|
|
118
|
+
(0, $g5w4B$useLayoutEffect)(()=>{
|
|
119
|
+
if (popoverRef.current) {
|
|
120
|
+
let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
|
|
121
|
+
if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
|
|
122
|
+
}
|
|
123
|
+
}, [
|
|
124
|
+
popoverRef
|
|
125
|
+
]);
|
|
126
|
+
return borderRadius;
|
|
127
|
+
}
|
|
128
|
+
function $bf810f3fb07f8592$var$useArrowSize() {
|
|
129
|
+
let [size, setSize] = (0, $g5w4B$useState)(20);
|
|
130
|
+
let [borderWidth, setBorderWidth] = (0, $g5w4B$useState)(1);
|
|
131
|
+
let arrowRef = (0, $g5w4B$useRef)(null);
|
|
132
|
+
// get the css value for the tip size and divide it by 2 for this arrow implementation
|
|
133
|
+
(0, $g5w4B$useLayoutEffect)(()=>{
|
|
134
|
+
if (arrowRef.current) {
|
|
135
|
+
let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-size');
|
|
136
|
+
if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
|
|
137
|
+
let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
|
|
138
|
+
if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
|
|
139
|
+
}
|
|
140
|
+
}, []);
|
|
141
|
+
return {
|
|
142
|
+
size: size,
|
|
143
|
+
borderWidth: borderWidth,
|
|
144
|
+
arrowRef: arrowRef
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
function $bf810f3fb07f8592$var$Arrow(props) {
|
|
148
|
+
let { primary: primary, secondary: secondary, isLandscape: isLandscape, arrowProps: arrowProps, borderDiagonal: borderDiagonal, arrowRef: arrowRef } = props;
|
|
149
|
+
let halfBorderDiagonal = borderDiagonal / 2;
|
|
150
|
+
let primaryStart = 0;
|
|
151
|
+
let primaryEnd = primary - halfBorderDiagonal;
|
|
152
|
+
let secondaryStart = halfBorderDiagonal;
|
|
153
|
+
let secondaryMiddle = secondary / 2;
|
|
154
|
+
let secondaryEnd = secondary - halfBorderDiagonal;
|
|
155
|
+
let pathData = isLandscape ? [
|
|
156
|
+
'M',
|
|
157
|
+
secondaryStart,
|
|
158
|
+
primaryStart,
|
|
159
|
+
'L',
|
|
160
|
+
secondaryMiddle,
|
|
161
|
+
primaryEnd,
|
|
162
|
+
'L',
|
|
163
|
+
secondaryEnd,
|
|
164
|
+
primaryStart
|
|
165
|
+
] : [
|
|
166
|
+
'M',
|
|
167
|
+
primaryStart,
|
|
168
|
+
secondaryStart,
|
|
169
|
+
'L',
|
|
170
|
+
primaryEnd,
|
|
171
|
+
secondaryMiddle,
|
|
172
|
+
'L',
|
|
173
|
+
primaryStart,
|
|
174
|
+
secondaryEnd
|
|
175
|
+
];
|
|
176
|
+
/* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, $g5w4B$react).createElement("svg", {
|
|
177
|
+
xmlns: "http://www.w3.org/svg/2000",
|
|
178
|
+
width: Math.ceil(isLandscape ? secondary : primary),
|
|
179
|
+
height: Math.ceil(isLandscape ? primary : secondary),
|
|
180
|
+
className: (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$popover_vars_cssmodulejs))), 'spectrum-Popover-tip'),
|
|
181
|
+
ref: arrowRef,
|
|
182
|
+
...arrowProps
|
|
183
|
+
}, /*#__PURE__*/ (0, $g5w4B$react).createElement("path", {
|
|
184
|
+
className: (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$popover_vars_cssmodulejs))), 'spectrum-Popover-tip-triangle'),
|
|
185
|
+
d: pathData.join(' ')
|
|
186
|
+
}));
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
export {$bf810f3fb07f8592$export$5b6b19405a83ff9d as Popover};
|
|
191
|
+
//# sourceMappingURL=Popover.module.js.map
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
import "./menu.57b3a408.css";
|
|
2
|
+
import $g5w4B$overlays_cssmodulejs from "./overlays_css.module.js";
|
|
3
|
+
import "./menu.2259a533.css";
|
|
4
|
+
import $g5w4B$popover_vars_cssmodulejs from "./popover_vars_css.module.js";
|
|
5
|
+
import {Underlay as $274a838403463b67$export$f360afc887607b02} from "./Underlay.module.js";
|
|
6
|
+
import {usePopover as $87eca3bd2e28ca01$export$542a6fd13ac93354} from "./usePopover.module.js";
|
|
7
|
+
import {DismissButton as $g5w4B$DismissButton} from "@react-aria/overlays";
|
|
8
|
+
import {useDOMRef as $g5w4B$useDOMRef, useStyleProps as $g5w4B$useStyleProps, classNames as $g5w4B$classNames} from "@react-spectrum/utils";
|
|
9
|
+
import {useFocusWithin as $g5w4B$useFocusWithin} from "@react-aria/interactions";
|
|
10
|
+
import {useObjectRef as $g5w4B$useObjectRef, mergeProps as $g5w4B$mergeProps, useLayoutEffect as $g5w4B$useLayoutEffect} from "@react-aria/utils";
|
|
11
|
+
import {Overlay as $g5w4B$Overlay} from "@react-spectrum/overlays";
|
|
12
|
+
import $g5w4B$react, {forwardRef as $g5w4B$forwardRef, useRef as $g5w4B$useRef, useState as $g5w4B$useState} from "react";
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
function $parcel$interopDefault(a) {
|
|
16
|
+
return a && a.__esModule ? a.default : a;
|
|
17
|
+
}
|
|
18
|
+
/*
|
|
19
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
21
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
22
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
23
|
+
*
|
|
24
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
25
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
26
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
27
|
+
* governing permissions and limitations under the License.
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
|
|
40
|
+
* other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
|
|
41
|
+
* between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
|
|
42
|
+
* the path always starts at 0 so that it perfectly overlaps the popover's border.
|
|
43
|
+
* See bottom of file for more explanation.
|
|
44
|
+
*/ let $bf810f3fb07f8592$var$arrowPlacement = {
|
|
45
|
+
left: 'right',
|
|
46
|
+
right: 'right',
|
|
47
|
+
top: 'bottom',
|
|
48
|
+
bottom: 'bottom'
|
|
49
|
+
};
|
|
50
|
+
const $bf810f3fb07f8592$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $g5w4B$forwardRef)(function Popover(props, ref) {
|
|
51
|
+
let { children: children, state: state, ...otherProps } = props;
|
|
52
|
+
let domRef = (0, $g5w4B$useDOMRef)(ref);
|
|
53
|
+
let wrapperRef = (0, $g5w4B$useRef)(null);
|
|
54
|
+
return /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $g5w4B$Overlay), {
|
|
55
|
+
...otherProps,
|
|
56
|
+
isOpen: state.isOpen,
|
|
57
|
+
nodeRef: wrapperRef
|
|
58
|
+
}, /*#__PURE__*/ (0, $g5w4B$react).createElement($bf810f3fb07f8592$var$PopoverWrapper, {
|
|
59
|
+
ref: domRef,
|
|
60
|
+
...props,
|
|
61
|
+
wrapperRef: wrapperRef
|
|
62
|
+
}, children));
|
|
63
|
+
});
|
|
64
|
+
const $bf810f3fb07f8592$var$PopoverWrapper = /*#__PURE__*/ (0, $g5w4B$forwardRef)((props, ref)=>{
|
|
65
|
+
let { children: children, isOpen: isOpen, hideArrow: hideArrow, isNonModal: isNonModal, enableBothDismissButtons: enableBothDismissButtons, state: state, wrapperRef: wrapperRef, onDismissButtonPress: onDismissButtonPress = ()=>state.close() } = props;
|
|
66
|
+
let { styleProps: styleProps } = (0, $g5w4B$useStyleProps)(props);
|
|
67
|
+
let objRef = (0, $g5w4B$useObjectRef)(ref);
|
|
68
|
+
let { size: size, borderWidth: borderWidth, arrowRef: arrowRef } = $bf810f3fb07f8592$var$useArrowSize();
|
|
69
|
+
const borderRadius = $bf810f3fb07f8592$var$usePopoverBorderRadius(objRef);
|
|
70
|
+
let borderDiagonal = borderWidth * Math.SQRT2;
|
|
71
|
+
let primary = size + borderDiagonal;
|
|
72
|
+
let secondary = primary * 2;
|
|
73
|
+
let { popoverProps: popoverProps, arrowProps: arrowProps, underlayProps: underlayProps, placement: placement } = (0, $87eca3bd2e28ca01$export$542a6fd13ac93354)({
|
|
74
|
+
...props,
|
|
75
|
+
popoverRef: objRef,
|
|
76
|
+
maxHeight: undefined,
|
|
77
|
+
arrowSize: hideArrow ? 0 : secondary,
|
|
78
|
+
arrowBoundaryOffset: borderRadius
|
|
79
|
+
}, state);
|
|
80
|
+
let { focusWithinProps: focusWithinProps } = (0, $g5w4B$useFocusWithin)(props);
|
|
81
|
+
// Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
|
|
82
|
+
return /*#__PURE__*/ (0, $g5w4B$react).createElement("div", {
|
|
83
|
+
ref: wrapperRef
|
|
84
|
+
}, !isNonModal && /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $274a838403463b67$export$f360afc887607b02), {
|
|
85
|
+
isTransparent: true,
|
|
86
|
+
...(0, $g5w4B$mergeProps)(underlayProps),
|
|
87
|
+
isOpen: isOpen
|
|
88
|
+
}), /*#__PURE__*/ (0, $g5w4B$react).createElement("div", {
|
|
89
|
+
...styleProps,
|
|
90
|
+
...(0, $g5w4B$mergeProps)(popoverProps, focusWithinProps),
|
|
91
|
+
style: {
|
|
92
|
+
...styleProps.style,
|
|
93
|
+
...popoverProps.style
|
|
94
|
+
},
|
|
95
|
+
ref: objRef,
|
|
96
|
+
className: (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$popover_vars_cssmodulejs))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
|
|
97
|
+
'spectrum-Popover--withTip': !hideArrow,
|
|
98
|
+
'is-open': isOpen,
|
|
99
|
+
[`is-open--${placement}`]: isOpen
|
|
100
|
+
}, (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$overlays_cssmodulejs))), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
|
|
101
|
+
role: "presentation",
|
|
102
|
+
"data-testid": "popover"
|
|
103
|
+
}, (!isNonModal || enableBothDismissButtons) && /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $g5w4B$DismissButton), {
|
|
104
|
+
onDismiss: onDismissButtonPress
|
|
105
|
+
}), children, hideArrow ? null : /*#__PURE__*/ (0, $g5w4B$react).createElement($bf810f3fb07f8592$var$Arrow, {
|
|
106
|
+
arrowProps: arrowProps,
|
|
107
|
+
isLandscape: placement != null ? $bf810f3fb07f8592$var$arrowPlacement[placement] === 'bottom' : false,
|
|
108
|
+
arrowRef: arrowRef,
|
|
109
|
+
primary: primary,
|
|
110
|
+
secondary: secondary,
|
|
111
|
+
borderDiagonal: borderDiagonal
|
|
112
|
+
}), /*#__PURE__*/ (0, $g5w4B$react).createElement((0, $g5w4B$DismissButton), {
|
|
113
|
+
onDismiss: onDismissButtonPress
|
|
114
|
+
})));
|
|
115
|
+
});
|
|
116
|
+
function $bf810f3fb07f8592$var$usePopoverBorderRadius(popoverRef) {
|
|
117
|
+
let [borderRadius, setBorderRadius] = (0, $g5w4B$useState)(0);
|
|
118
|
+
(0, $g5w4B$useLayoutEffect)(()=>{
|
|
119
|
+
if (popoverRef.current) {
|
|
120
|
+
let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
|
|
121
|
+
if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
|
|
122
|
+
}
|
|
123
|
+
}, [
|
|
124
|
+
popoverRef
|
|
125
|
+
]);
|
|
126
|
+
return borderRadius;
|
|
127
|
+
}
|
|
128
|
+
function $bf810f3fb07f8592$var$useArrowSize() {
|
|
129
|
+
let [size, setSize] = (0, $g5w4B$useState)(20);
|
|
130
|
+
let [borderWidth, setBorderWidth] = (0, $g5w4B$useState)(1);
|
|
131
|
+
let arrowRef = (0, $g5w4B$useRef)(null);
|
|
132
|
+
// get the css value for the tip size and divide it by 2 for this arrow implementation
|
|
133
|
+
(0, $g5w4B$useLayoutEffect)(()=>{
|
|
134
|
+
if (arrowRef.current) {
|
|
135
|
+
let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-size');
|
|
136
|
+
if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
|
|
137
|
+
let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
|
|
138
|
+
if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
|
|
139
|
+
}
|
|
140
|
+
}, []);
|
|
141
|
+
return {
|
|
142
|
+
size: size,
|
|
143
|
+
borderWidth: borderWidth,
|
|
144
|
+
arrowRef: arrowRef
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
function $bf810f3fb07f8592$var$Arrow(props) {
|
|
148
|
+
let { primary: primary, secondary: secondary, isLandscape: isLandscape, arrowProps: arrowProps, borderDiagonal: borderDiagonal, arrowRef: arrowRef } = props;
|
|
149
|
+
let halfBorderDiagonal = borderDiagonal / 2;
|
|
150
|
+
let primaryStart = 0;
|
|
151
|
+
let primaryEnd = primary - halfBorderDiagonal;
|
|
152
|
+
let secondaryStart = halfBorderDiagonal;
|
|
153
|
+
let secondaryMiddle = secondary / 2;
|
|
154
|
+
let secondaryEnd = secondary - halfBorderDiagonal;
|
|
155
|
+
let pathData = isLandscape ? [
|
|
156
|
+
'M',
|
|
157
|
+
secondaryStart,
|
|
158
|
+
primaryStart,
|
|
159
|
+
'L',
|
|
160
|
+
secondaryMiddle,
|
|
161
|
+
primaryEnd,
|
|
162
|
+
'L',
|
|
163
|
+
secondaryEnd,
|
|
164
|
+
primaryStart
|
|
165
|
+
] : [
|
|
166
|
+
'M',
|
|
167
|
+
primaryStart,
|
|
168
|
+
secondaryStart,
|
|
169
|
+
'L',
|
|
170
|
+
primaryEnd,
|
|
171
|
+
secondaryMiddle,
|
|
172
|
+
'L',
|
|
173
|
+
primaryStart,
|
|
174
|
+
secondaryEnd
|
|
175
|
+
];
|
|
176
|
+
/* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, $g5w4B$react).createElement("svg", {
|
|
177
|
+
xmlns: "http://www.w3.org/svg/2000",
|
|
178
|
+
width: Math.ceil(isLandscape ? secondary : primary),
|
|
179
|
+
height: Math.ceil(isLandscape ? primary : secondary),
|
|
180
|
+
className: (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$popover_vars_cssmodulejs))), 'spectrum-Popover-tip'),
|
|
181
|
+
ref: arrowRef,
|
|
182
|
+
...arrowProps
|
|
183
|
+
}, /*#__PURE__*/ (0, $g5w4B$react).createElement("path", {
|
|
184
|
+
className: (0, $g5w4B$classNames)((0, ($parcel$interopDefault($g5w4B$popover_vars_cssmodulejs))), 'spectrum-Popover-tip-triangle'),
|
|
185
|
+
d: pathData.join(' ')
|
|
186
|
+
}));
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
export {$bf810f3fb07f8592$export$5b6b19405a83ff9d as Popover};
|
|
191
|
+
//# sourceMappingURL=Popover.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA8CD;;;;;;CAMC,GACD,IAAI,uCAAiB;IACnB,MAAM;IACN,OAAO;IACP,KAAK;IACL,QAAQ;AACV;AAEO,MAAM,0DAAU,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAmB,EAAE,GAA2B;IACjG,IAAI,YACF,QAAQ,SACR,KAAK,EACL,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IAExC,qBACE,gCAAC,CAAA,GAAA,cAAM;QAAG,GAAG,UAAU;QAAE,QAAQ,MAAM,MAAM;QAAE,SAAS;qBACtD,gCAAC;QAAe,KAAK;QAAS,GAAG,KAAK;QAAE,YAAY;OACjD;AAIT;AAEA,MAAM,qDAAiB,CAAA,GAAA,iBAAS,EAAE,CAAC,OAA4B;IAC7D,IAAI,YACF,QAAQ,UACR,MAAM,aACN,SAAS,cACT,UAAU,4BACV,wBAAwB,SACxB,KAAK,cACL,UAAU,wBACV,uBAAuB,IAAM,MAAM,KAAK,IACzC,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,mBAAW,EAAE;IAE1B,IAAI,QAAC,IAAI,eAAE,WAAW,YAAE,QAAQ,EAAC,GAAG;IACpC,MAAM,eAAe,6CAAuB;IAC5C,IAAI,iBAAiB,cAAc,KAAK,KAAK;IAC7C,IAAI,UAAU,OAAO;IACrB,IAAI,YAAY,UAAU;IAC1B,IAAI,gBACF,YAAY,cACZ,UAAU,iBACV,aAAa,aACb,SAAS,EACV,GAAG,CAAA,GAAA,yCAAS,EAAE;QACb,GAAG,KAAK;QACR,YAAY;QACZ,WAAW;QACX,WAAW,YAAY,IAAI;QAC3B,qBAAqB;IACvB,GAAG;IACH,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAExC,2LAA2L;IAC3L,qBACE,gCAAC;QAAI,KAAK;OACP,CAAC,4BAAc,gCAAC,CAAA,GAAA,yCAAO;QAAE,eAAA;QAAe,GAAG,CAAA,GAAA,iBAAS,EAAE,cAAc;QAAE,QAAQ;sBAC/E,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,iBAAS,EAAE,cAAc,iBAAiB;QAC9C,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,GAAG,aAAa,KAAK;QACvB;QACA,KAAK;QACL,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,yDAAK,GACL,oBACA,CAAC,kBAAkB,EAAE,WAAW,EAChC;YACE,6BAA6B,CAAC;YAC9B,WAAW;YACX,CAAC,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE;QAC7B,GACA,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,qDAAa,GACb,oBACA,2BAEF,WAAW,SAAS;QAGxB,MAAK;QACL,eAAY;OACX,AAAC,CAAA,CAAC,cAAc,wBAAuB,mBAAM,gCAAC,CAAA,GAAA,oBAAY;QAAE,WAAW;QACvE,UACA,YAAY,qBACX,gCAAC;QACC,YAAY;QACZ,aAAa,aAAa,OAAO,oCAAc,CAAC,UAAU,KAAK,WAAW;QAC1E,UAAU;QACV,SAAS;QACT,WAAW;QACX,gBAAgB;sBAEpB,gCAAC,CAAA,GAAA,oBAAY;QAAE,WAAW;;AAIlC;AAEA,SAAS,6CAAuB,UAA4C;IAC1E,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,eAAO,EAAE;IAC/C,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,WAAW,OAAO,EAAE;YACtB,IAAI,uBAAuB,OAAO,gBAAgB,CAAC,WAAW,OAAO,EAAE,YAAY;YACnF,IAAI,yBAAyB,IAC3B,gBAAgB,SAAS,sBAAsB;QAEnD;IACF,GAAG;QAAC;KAAW;IACf,OAAO;AACT;AAEA,SAAS;IACP,IAAI,CAAC,MAAM,QAAQ,GAAG,CAAA,GAAA,eAAO,EAAE;IAC/B,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAE;IAC7C,IAAI,WAAW,CAAA,GAAA,aAAK,EAAiB;IACrC,sFAAsF;IACtF,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,SAAS,OAAO,EAAE;YACpB,IAAI,mBAAmB,OAAO,gBAAgB,CAAC,SAAS,OAAO,EAC5D,gBAAgB,CAAC;YACpB,IAAI,qBAAqB,IACvB,QAAQ,SAAS,kBAAkB,MAAM;YAG3C,IAAI,sBAAsB,OAAO,gBAAgB,CAAC,SAAS,OAAO,EAC/D,gBAAgB,CAAC;YACpB,IAAI,wBAAwB,IAC1B,eAAe,SAAS,qBAAqB;QAEjD;IACF,GAAG,EAAE;IACL,OAAO;cAAC;qBAAM;kBAAa;IAAQ;AACrC;AAEA,SAAS,4BAAM,KAAiB;IAC9B,IAAI,WAAC,OAAO,aAAE,SAAS,eAAE,WAAW,cAAE,UAAU,kBAAE,cAAc,YAAE,QAAQ,EAAC,GAAG;IAC9E,IAAI,qBAAqB,iBAAiB;IAE1C,IAAI,eAAe;IACnB,IAAI,aAAa,UAAU;IAE3B,IAAI,iBAAiB;IACrB,IAAI,kBAAkB,YAAY;IAClC,IAAI,eAAe,YAAY;IAE/B,IAAI,WAAW,cAAc;QAC3B;QAAK;QAAgB;QACrB;QAAK;QAAiB;QACtB;QAAK;QAAc;KACpB,GAAG;QACF;QAAK;QAAc;QACnB;QAAK;QAAY;QACjB;QAAK;QAAc;KACpB;IAED,2EAA2E,GAC3E,qBACE,gCAAC;QACC,OAAM;QACN,OAAO,KAAK,IAAI,CAAC,cAAc,YAAY;QAC3C,QAAQ,KAAK,IAAI,CAAC,cAAc,UAAU;QAC1C,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;QAC9B,KAAK;QACJ,GAAG,UAAU;qBACd,gCAAC;QAAK,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;QAAkC,GAAG,SAAS,IAAI,CAAC;;AAG7F","sources":["packages/@react-spectrum/menu/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaPopoverProps, DismissButton, PopoverAria} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, RefObject, StyleProps} from '@react-types/shared';\nimport {FocusWithinProps, useFocusWithin} from '@react-aria/interactions';\nimport {mergeProps, useLayoutEffect, useObjectRef} from '@react-aria/utils';\nimport {Overlay} from '@react-spectrum/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {ForwardedRef, forwardRef, ReactNode, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/popover/vars.css';\nimport {Underlay} from './Underlay';\nimport {usePopover} from './usePopover';\n\ninterface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'>, FocusWithinProps, StyleProps {\n children: ReactNode,\n hideArrow?: boolean,\n state: OverlayTriggerState,\n shouldContainFocus?: boolean,\n onEntering?: () => void,\n onEnter?: () => void,\n onEntered?: () => void,\n onExiting?: () => void,\n onExited?: () => void,\n onExit?: () => void,\n container?: HTMLElement,\n disableFocusManagement?: boolean,\n enableBothDismissButtons?: boolean,\n onDismissButtonPress?: () => void\n}\n\ninterface PopoverWrapperProps extends PopoverProps, FocusWithinProps {\n isOpen?: boolean,\n wrapperRef: RefObject<HTMLDivElement | null>\n}\n\ninterface ArrowProps {\n arrowProps: PopoverAria['arrowProps'],\n isLandscape: boolean,\n arrowRef?: RefObject<SVGSVGElement | null>,\n primary: number,\n secondary: number,\n borderDiagonal: number\n}\n\n/**\n * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the\n * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and\n * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that\n * the path always starts at 0 so that it perfectly overlaps the popover's border.\n * See bottom of file for more explanation.\n */\nlet arrowPlacement = {\n left: 'right',\n right: 'right',\n top: 'bottom',\n bottom: 'bottom'\n};\n\nexport const Popover = forwardRef(function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n state,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>\n {children}\n </PopoverWrapper>\n </Overlay>\n );\n});\n\nconst PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) => {\n let {\n children,\n isOpen,\n hideArrow,\n isNonModal,\n enableBothDismissButtons,\n state,\n wrapperRef,\n onDismissButtonPress = () => state.close()\n } = props;\n let {styleProps} = useStyleProps(props);\n let objRef = useObjectRef(ref);\n\n let {size, borderWidth, arrowRef} = useArrowSize();\n const borderRadius = usePopoverBorderRadius(objRef);\n let borderDiagonal = borderWidth * Math.SQRT2;\n let primary = size + borderDiagonal;\n let secondary = primary * 2;\n let {\n popoverProps,\n arrowProps,\n underlayProps,\n placement\n } = usePopover({\n ...props,\n popoverRef: objRef,\n maxHeight: undefined,\n arrowSize: hideArrow ? 0 : secondary,\n arrowBoundaryOffset: borderRadius\n }, state);\n let {focusWithinProps} = useFocusWithin(props);\n\n // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n {!isNonModal && <Underlay isTransparent {...mergeProps(underlayProps)} isOpen={isOpen} /> }\n <div\n {...styleProps}\n {...mergeProps(popoverProps, focusWithinProps)}\n style={{\n ...styleProps.style,\n ...popoverProps.style\n }}\n ref={objRef}\n className={\n classNames(\n styles,\n 'spectrum-Popover',\n `spectrum-Popover--${placement}`,\n {\n 'spectrum-Popover--withTip': !hideArrow,\n 'is-open': isOpen,\n [`is-open--${placement}`]: isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Popover',\n 'react-spectrum-Popover'\n ),\n styleProps.className\n )\n }\n role=\"presentation\"\n data-testid=\"popover\">\n {(!isNonModal || enableBothDismissButtons) && <DismissButton onDismiss={onDismissButtonPress} />}\n {children}\n {hideArrow ? null : (\n <Arrow\n arrowProps={arrowProps}\n isLandscape={placement != null ? arrowPlacement[placement] === 'bottom' : false}\n arrowRef={arrowRef}\n primary={primary}\n secondary={secondary}\n borderDiagonal={borderDiagonal} />\n )}\n <DismissButton onDismiss={onDismissButtonPress} />\n </div>\n </div>\n );\n});\n\nfunction usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement | null>) {\n let [borderRadius, setBorderRadius] = useState(0);\n useLayoutEffect(() => {\n if (popoverRef.current) {\n let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;\n if (spectrumBorderRadius !== '') {\n setBorderRadius(parseInt(spectrumBorderRadius, 10));\n }\n }\n }, [popoverRef]);\n return borderRadius;\n}\n\nfunction useArrowSize() {\n let [size, setSize] = useState(20);\n let [borderWidth, setBorderWidth] = useState(1);\n let arrowRef = useRef<SVGSVGElement>(null);\n // get the css value for the tip size and divide it by 2 for this arrow implementation\n useLayoutEffect(() => {\n if (arrowRef.current) {\n let spectrumTipWidth = window.getComputedStyle(arrowRef.current)\n .getPropertyValue('--spectrum-popover-tip-size');\n if (spectrumTipWidth !== '') {\n setSize(parseInt(spectrumTipWidth, 10) / 2);\n }\n\n let spectrumBorderWidth = window.getComputedStyle(arrowRef.current)\n .getPropertyValue('--spectrum-popover-tip-borderWidth');\n if (spectrumBorderWidth !== '') {\n setBorderWidth(parseInt(spectrumBorderWidth, 10));\n }\n }\n }, []);\n return {size, borderWidth, arrowRef};\n}\n\nfunction Arrow(props: ArrowProps) {\n let {primary, secondary, isLandscape, arrowProps, borderDiagonal, arrowRef} = props;\n let halfBorderDiagonal = borderDiagonal / 2;\n\n let primaryStart = 0;\n let primaryEnd = primary - halfBorderDiagonal;\n\n let secondaryStart = halfBorderDiagonal;\n let secondaryMiddle = secondary / 2;\n let secondaryEnd = secondary - halfBorderDiagonal;\n\n let pathData = isLandscape ? [\n 'M', secondaryStart, primaryStart,\n 'L', secondaryMiddle, primaryEnd,\n 'L', secondaryEnd, primaryStart\n ] : [\n 'M', primaryStart, secondaryStart,\n 'L', primaryEnd, secondaryMiddle,\n 'L', primaryStart, secondaryEnd\n ];\n\n /* use ceil because the svg needs to always accommodate the path inside it */\n return (\n <svg\n xmlns=\"http://www.w3.org/svg/2000\"\n width={Math.ceil(isLandscape ? secondary : primary)}\n height={Math.ceil(isLandscape ? primary : secondary)}\n className={classNames(styles, 'spectrum-Popover-tip')}\n ref={arrowRef}\n {...arrowProps}>\n <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />\n </svg>\n );\n}\n"],"names":[],"version":3,"file":"Popover.module.js.map"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var $cac834c4bc0a51d3$exports = require("./context.main.js");
|
|
2
|
+
var $25179ade6a3f679b$exports = require("./Popover.main.js");
|
|
2
3
|
require("./menu.2ec1fdaf.css");
|
|
3
4
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
4
5
|
var $esjnM$reactspectrumutils = require("@react-spectrum/utils");
|
|
5
6
|
var $esjnM$reactariautils = require("@react-aria/utils");
|
|
6
|
-
var $esjnM$reactspectrumoverlays = require("@react-spectrum/overlays");
|
|
7
7
|
var $esjnM$react = require("react");
|
|
8
8
|
var $esjnM$reactdom = require("react-dom");
|
|
9
9
|
var $esjnM$reactariai18n = require("@react-aria/i18n");
|
|
@@ -84,7 +84,7 @@ function $86ed235c4695ff3f$var$SubmenuTrigger(props) {
|
|
|
84
84
|
submenuTriggerState.close();
|
|
85
85
|
(_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
|
|
86
86
|
};
|
|
87
|
-
overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).createElement((0, $
|
|
87
|
+
overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($esjnM$react))).createElement((0, $25179ade6a3f679b$exports.Popover), {
|
|
88
88
|
...popoverProps,
|
|
89
89
|
onDismissButtonPress: onDismissButtonPress,
|
|
90
90
|
UNSAFE_className: (0, $esjnM$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Submenu-popover'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAwBD,SAAS,qCAAe,KAA0B;IAChD,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAkB;IACxC,IAAI,YACF,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,CAAC,aAAa,KAAK,GAAG,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACjD,IAAI,oBAAC,gBAAgB,oBAAE,gBAAgB,EAAE,MAAM,aAAa,EAAE,SAAS,OAAO,wBAAE,oBAAoB,EAAC,GAAG,CAAA,GAAA,6CAAkB;IAC1H,IAAI,sBAAsB,CAAA,GAAA,8CAAqB,EAAE;QAAC,YAAY;IAAS,GAAG;IAC1E,IAAI,uBAAC,mBAAmB,gBAAE,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,sCAAgB,EAAE;uBACxE;QACA,YAAY;IACd,GAAG,qBAAqB;IACxB,IAAI,WAAW,CAAA,GAAA,2CAAgB;IAC/B,IAAI,oBAAoB;QACtB,oBAAoB,KAAK;QACzB,IAAI,cAAc,OAAO,IAAI,CAAC,cAAc,OAAO,CAAC,QAAQ,CAAC,SAAS,aAAa,GACjF,cAAc,OAAO,CAAC,KAAK;IAE/B;IAEA,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,uBAAuB,CAAC;QAC1B,OAAQ,EAAE,GAAG;YACX,KAAK;oBAED;gBADF,IAAI,cAAc,QAChB,sBAAA,WAAW,OAAO,cAAlB,0CAAA,oBAAoB,KAAK;gBAE3B;YACF,KAAK;oBAED;gBADF,IAAI,cAAc,QAChB,uBAAA,WAAW,OAAO,cAAlB,2CAAA,qBAAoB,KAAK;gBAE3B;QACJ;IACF;IAEA,IAAI;IAEJ,IAAI,UAAW;YAGb;QAFA,OAAO,oBAAoB,MAAM;QACjC,OAAO,oBAAoB,aAAa;;QACxC,eAAA,gBAAA,cAAa,4DAAb,cAAa,YAAc;QAC3B,IAAI,iBAAiB,OAAO,IAAI,oBAAoB,MAAM,EACxD,wBAAU,CAAA,GAAA,yCAAO,EAAE,YAAY,CAAC,MAAM,iBAAiB,OAAO;IAElE,OAAO;QACL,IAAI,uBAAuB;gBAEzB;YADA,oBAAoB,KAAK;aACzB,yBAAA,cAAc,OAAO,cAArB,6CAAA,uBAAuB,KAAK;QAC9B;QAEA,wBACE,0DAAC,CAAA,GAAA,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/SubmenuTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, useIsMobileDevice} from '@react-spectrum/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {mergeProps} from '@react-aria/utils';\nimport {Popover} from './Popover';\nimport React, {type JSX, ReactElement, useRef} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSubmenuTrigger} from '@react-aria/menu';\nimport {useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface SubmenuTriggerProps {\n /**\n * The contents of the SubmenuTrigger - an Item and a Menu.\n */\n children: ReactElement<any>[],\n targetKey: Key\n}\n\nexport interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}\n\nfunction SubmenuTrigger(props: SubmenuTriggerProps) {\n let triggerRef = useRef<HTMLDivElement>(null);\n let {\n children,\n targetKey\n } = props;\n\n let [menuTrigger, menu] = React.Children.toArray(children);\n let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext()!;\n let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState!);\n let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({\n parentMenuRef,\n submenuRef: menuRef\n }, submenuTriggerState, triggerRef);\n let isMobile = useIsMobileDevice();\n let onBackButtonPress = () => {\n submenuTriggerState.close();\n if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n parentMenuRef.current.focus();\n }\n };\n\n let {direction} = useLocale();\n let mobileSubmenuKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft':\n if (direction === 'ltr') {\n triggerRef.current?.focus();\n }\n break;\n case 'ArrowRight':\n if (direction === 'rtl') {\n triggerRef.current?.focus();\n }\n break;\n }\n };\n\n let overlay;\n\n if (isMobile) {\n delete submenuTriggerProps.onBlur;\n delete submenuTriggerProps.onHoverChange;\n submenuProps.autoFocus ??= true;\n if (trayContainerRef.current && submenuTriggerState.isOpen) {\n overlay = ReactDOM.createPortal(menu, trayContainerRef.current);\n }\n } else {\n let onDismissButtonPress = () => {\n submenuTriggerState.close();\n parentMenuRef.current?.focus();\n };\n\n overlay = (\n <Popover\n {...popoverProps}\n onDismissButtonPress={onDismissButtonPress}\n UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n container={popoverContainer!}\n containerPadding={0}\n enableBothDismissButtons\n UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}\n state={submenuTriggerState}\n triggerRef={triggerRef}\n scrollRef={menuRef}\n placement=\"end top\"\n hideArrow>\n {menu}\n </Popover>\n );\n }\n\n let menuContext = {\n ...mergeProps(submenuProps, {\n ref: menuRef,\n UNSAFE_style: isMobile ? {\n width: '100%',\n maxHeight: 'inherit'\n } : undefined,\n UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n ...(isMobile && {\n onBackButtonPress,\n onKeyDown: mobileSubmenuKeyDown\n })\n })\n };\n\n return (\n <>\n <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>\n <MenuContext.Provider value={menuContext}>\n {overlay}\n </MenuContext.Provider>\n </>\n );\n}\n\nSubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {\n let childArray: ReactElement[] = [];\n React.Children.forEach(props.children, child => {\n if (React.isValidElement(child)) {\n childArray.push(child);\n }\n });\n let [trigger] = childArray;\n let [, content] = props.children as [ReactElement, ReactElement];\n\n yield {\n element: React.cloneElement(trigger, {...trigger.props as any, hasChildItems: true, isTrigger: true}),\n wrapper: (element) => (\n <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>\n {element}\n {content}\n </SubmenuTrigger>\n )\n };\n};\n\nlet _SubmenuTrigger = SubmenuTrigger as unknown as (props: SpectrumSubmenuTriggerProps) => JSX.Element;\nexport {_SubmenuTrigger as SubmenuTrigger};\n"],"names":[],"version":3,"file":"SubmenuTrigger.main.js.map"}
|
package/dist/SubmenuTrigger.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.mjs";
|
|
2
|
+
import {Popover as $bf810f3fb07f8592$export$5b6b19405a83ff9d} from "./Popover.mjs";
|
|
2
3
|
import "./menu.2ec1fdaf.css";
|
|
3
4
|
import $byZ4r$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
4
5
|
import {useIsMobileDevice as $byZ4r$useIsMobileDevice, classNames as $byZ4r$classNames} from "@react-spectrum/utils";
|
|
5
6
|
import {mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
|
|
6
|
-
import {Popover as $byZ4r$Popover} from "@react-spectrum/overlays";
|
|
7
7
|
import $byZ4r$react, {useRef as $byZ4r$useRef} from "react";
|
|
8
8
|
import $byZ4r$reactdom from "react-dom";
|
|
9
9
|
import {useLocale as $byZ4r$useLocale} from "@react-aria/i18n";
|
|
@@ -78,7 +78,7 @@ function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
|
|
|
78
78
|
submenuTriggerState.close();
|
|
79
79
|
(_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
|
|
80
80
|
};
|
|
81
|
-
overlay = /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $
|
|
81
|
+
overlay = /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $bf810f3fb07f8592$export$5b6b19405a83ff9d), {
|
|
82
82
|
...popoverProps,
|
|
83
83
|
onDismissButtonPress: onDismissButtonPress,
|
|
84
84
|
UNSAFE_className: (0, $byZ4r$classNames)((0, ($parcel$interopDefault($byZ4r$menu_vars_cssmodulejs))), 'spectrum-Submenu-popover'),
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {MenuContext as $d94604d52c3e3feb$export$c7e742effb1c51e2, SubmenuTriggerContext as $d94604d52c3e3feb$export$8d97fe02339fc0e3, useMenuStateContext as $d94604d52c3e3feb$export$efa3856fc0e85e7f} from "./context.module.js";
|
|
2
|
+
import {Popover as $bf810f3fb07f8592$export$5b6b19405a83ff9d} from "./Popover.module.js";
|
|
2
3
|
import "./menu.2ec1fdaf.css";
|
|
3
4
|
import $byZ4r$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
4
5
|
import {useIsMobileDevice as $byZ4r$useIsMobileDevice, classNames as $byZ4r$classNames} from "@react-spectrum/utils";
|
|
5
6
|
import {mergeProps as $byZ4r$mergeProps} from "@react-aria/utils";
|
|
6
|
-
import {Popover as $byZ4r$Popover} from "@react-spectrum/overlays";
|
|
7
7
|
import $byZ4r$react, {useRef as $byZ4r$useRef} from "react";
|
|
8
8
|
import $byZ4r$reactdom from "react-dom";
|
|
9
9
|
import {useLocale as $byZ4r$useLocale} from "@react-aria/i18n";
|
|
@@ -78,7 +78,7 @@ function $3f13e15cf95c3893$var$SubmenuTrigger(props) {
|
|
|
78
78
|
submenuTriggerState.close();
|
|
79
79
|
(_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.focus();
|
|
80
80
|
};
|
|
81
|
-
overlay = /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $
|
|
81
|
+
overlay = /*#__PURE__*/ (0, $byZ4r$react).createElement((0, $bf810f3fb07f8592$export$5b6b19405a83ff9d), {
|
|
82
82
|
...popoverProps,
|
|
83
83
|
onDismissButtonPress: onDismissButtonPress,
|
|
84
84
|
UNSAFE_className: (0, $byZ4r$classNames)((0, ($parcel$interopDefault($byZ4r$menu_vars_cssmodulejs))), 'spectrum-Submenu-popover'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAwBD,SAAS,qCAAe,KAA0B;IAChD,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IACxC,IAAI,YACF,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,CAAC,aAAa,KAAK,GAAG,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACjD,IAAI,oBAAC,gBAAgB,oBAAE,gBAAgB,EAAE,MAAM,aAAa,EAAE,SAAS,OAAO,wBAAE,oBAAoB,EAAC,GAAG,CAAA,GAAA,yCAAkB;IAC1H,IAAI,sBAAsB,CAAA,GAAA,6BAAqB,EAAE;QAAC,YAAY;IAAS,GAAG;IAC1E,IAAI,uBAAC,mBAAmB,gBAAE,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,wBAAgB,EAAE;uBACxE;QACA,YAAY;IACd,GAAG,qBAAqB;IACxB,IAAI,WAAW,CAAA,GAAA,wBAAgB;IAC/B,IAAI,oBAAoB;QACtB,oBAAoB,KAAK;QACzB,IAAI,cAAc,OAAO,IAAI,CAAC,cAAc,OAAO,CAAC,QAAQ,CAAC,SAAS,aAAa,GACjF,cAAc,OAAO,CAAC,KAAK;IAE/B;IAEA,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,uBAAuB,CAAC;QAC1B,OAAQ,EAAE,GAAG;YACX,KAAK;oBAED;gBADF,IAAI,cAAc,QAChB,sBAAA,WAAW,OAAO,cAAlB,0CAAA,oBAAoB,KAAK;gBAE3B;YACF,KAAK;oBAED;gBADF,IAAI,cAAc,QAChB,uBAAA,WAAW,OAAO,cAAlB,2CAAA,qBAAoB,KAAK;gBAE3B;QACJ;IACF;IAEA,IAAI;IAEJ,IAAI,UAAW;YAGb;QAFA,OAAO,oBAAoB,MAAM;QACjC,OAAO,oBAAoB,aAAa;;QACxC,eAAA,gBAAA,cAAa,4DAAb,cAAa,YAAc;QAC3B,IAAI,iBAAiB,OAAO,IAAI,oBAAoB,MAAM,EACxD,wBAAU,CAAA,GAAA,eAAO,EAAE,YAAY,CAAC,MAAM,iBAAiB,OAAO;IAElE,OAAO;QACL,IAAI,uBAAuB;gBAEzB;YADA,oBAAoB,KAAK;aACzB,yBAAA,cAAc,OAAO,cAArB,6CAAA,uBAAuB,KAAK;QAC9B;QAEA,wBACE,gCAAC,CAAA,GAAA,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/menu/src/SubmenuTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, useIsMobileDevice} from '@react-spectrum/utils';\nimport {Key} from '@react-types/shared';\nimport {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {mergeProps} from '@react-aria/utils';\nimport {Popover} from './Popover';\nimport React, {type JSX, ReactElement, useRef} from 'react';\nimport ReactDOM from 'react-dom';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSubmenuTrigger} from '@react-aria/menu';\nimport {useSubmenuTriggerState} from '@react-stately/menu';\n\ninterface SubmenuTriggerProps {\n /**\n * The contents of the SubmenuTrigger - an Item and a Menu.\n */\n children: ReactElement<any>[],\n targetKey: Key\n}\n\nexport interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}\n\nfunction SubmenuTrigger(props: SubmenuTriggerProps) {\n let triggerRef = useRef<HTMLDivElement>(null);\n let {\n children,\n targetKey\n } = props;\n\n let [menuTrigger, menu] = React.Children.toArray(children);\n let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext()!;\n let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState!);\n let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({\n parentMenuRef,\n submenuRef: menuRef\n }, submenuTriggerState, triggerRef);\n let isMobile = useIsMobileDevice();\n let onBackButtonPress = () => {\n submenuTriggerState.close();\n if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) {\n parentMenuRef.current.focus();\n }\n };\n\n let {direction} = useLocale();\n let mobileSubmenuKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft':\n if (direction === 'ltr') {\n triggerRef.current?.focus();\n }\n break;\n case 'ArrowRight':\n if (direction === 'rtl') {\n triggerRef.current?.focus();\n }\n break;\n }\n };\n\n let overlay;\n\n if (isMobile) {\n delete submenuTriggerProps.onBlur;\n delete submenuTriggerProps.onHoverChange;\n submenuProps.autoFocus ??= true;\n if (trayContainerRef.current && submenuTriggerState.isOpen) {\n overlay = ReactDOM.createPortal(menu, trayContainerRef.current);\n }\n } else {\n let onDismissButtonPress = () => {\n submenuTriggerState.close();\n parentMenuRef.current?.focus();\n };\n\n overlay = (\n <Popover\n {...popoverProps}\n onDismissButtonPress={onDismissButtonPress}\n UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n container={popoverContainer!}\n containerPadding={0}\n enableBothDismissButtons\n UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}\n state={submenuTriggerState}\n triggerRef={triggerRef}\n scrollRef={menuRef}\n placement=\"end top\"\n hideArrow>\n {menu}\n </Popover>\n );\n }\n\n let menuContext = {\n ...mergeProps(submenuProps, {\n ref: menuRef,\n UNSAFE_style: isMobile ? {\n width: '100%',\n maxHeight: 'inherit'\n } : undefined,\n UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),\n ...(isMobile && {\n onBackButtonPress,\n onKeyDown: mobileSubmenuKeyDown\n })\n })\n };\n\n return (\n <>\n <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>\n <MenuContext.Provider value={menuContext}>\n {overlay}\n </MenuContext.Provider>\n </>\n );\n}\n\nSubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {\n let childArray: ReactElement[] = [];\n React.Children.forEach(props.children, child => {\n if (React.isValidElement(child)) {\n childArray.push(child);\n }\n });\n let [trigger] = childArray;\n let [, content] = props.children as [ReactElement, ReactElement];\n\n yield {\n element: React.cloneElement(trigger, {...trigger.props as any, hasChildItems: true, isTrigger: true}),\n wrapper: (element) => (\n <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>\n {element}\n {content}\n </SubmenuTrigger>\n )\n };\n};\n\nlet _SubmenuTrigger = SubmenuTrigger as unknown as (props: SpectrumSubmenuTriggerProps) => JSX.Element;\nexport {_SubmenuTrigger as SubmenuTrigger};\n"],"names":[],"version":3,"file":"SubmenuTrigger.module.js.map"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
require("./menu.359a0c0a.css");
|
|
2
|
+
var $42908e91b4c5f428$exports = require("./underlay_vars_css.main.js");
|
|
3
|
+
var $h7ylx$reactspectrumutils = require("@react-spectrum/utils");
|
|
4
|
+
var $h7ylx$reactariautils = require("@react-aria/utils");
|
|
5
|
+
var $h7ylx$react = require("react");
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
function $parcel$interopDefault(a) {
|
|
9
|
+
return a && a.__esModule ? a.default : a;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
function $parcel$export(e, n, v, s) {
|
|
13
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
$parcel$export(module.exports, "Underlay", () => $986adbd937b58c55$export$f360afc887607b02);
|
|
17
|
+
/*
|
|
18
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
19
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
21
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
22
|
+
*
|
|
23
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
24
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
25
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
26
|
+
* governing permissions and limitations under the License.
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
function $986adbd937b58c55$export$f360afc887607b02({ isOpen: isOpen, isTransparent: isTransparent, ...otherProps }) {
|
|
32
|
+
let pageHeight = undefined;
|
|
33
|
+
if (typeof document !== 'undefined') {
|
|
34
|
+
let scrollingElement = (0, $h7ylx$reactariautils.isScrollable)(document.body) ? document.body : document.scrollingElement || document.documentElement;
|
|
35
|
+
// Prevent Firefox from adding scrollbars when the page has a fractional height.
|
|
36
|
+
let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
|
|
37
|
+
pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
|
|
38
|
+
}
|
|
39
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($h7ylx$react))).createElement("div", {
|
|
40
|
+
"data-testid": "underlay",
|
|
41
|
+
...otherProps,
|
|
42
|
+
// Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
|
|
43
|
+
style: {
|
|
44
|
+
height: pageHeight
|
|
45
|
+
},
|
|
46
|
+
className: (0, $h7ylx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($42908e91b4c5f428$exports))), 'spectrum-Underlay', {
|
|
47
|
+
'is-open': isOpen,
|
|
48
|
+
'spectrum-Underlay--transparent': isTransparent
|
|
49
|
+
})
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
//# sourceMappingURL=Underlay.main.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAYM,SAAS,0CAAS,UAAC,MAAM,iBAAE,aAAa,EAAE,GAAG,YAA0B;IAC5E,IAAI,aAAiC;IACrC,IAAI,OAAO,aAAa,aAAa;QACnC,IAAI,mBAAmB,CAAA,GAAA,kCAAW,EAAE,SAAS,IAAI,IAAI,SAAS,IAAI,GAAG,SAAS,gBAAgB,IAAI,SAAS,eAAe;QAC1H,gFAAgF;QAChF,IAAI,6BAA6B,iBAAiB,qBAAqB,GAAG,MAAM,GAAG;QACnF,aAAa,iBAAiB,YAAY,GAAG;IAC/C;IAEA,qBACE,0DAAC;QACC,eAAY;QACX,GAAG,UAAU;QACd,8FAA8F;QAC9F,OAAO;YAAC,QAAQ;QAAU;QAC1B,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAa,GAAG,qBAAqB;YACzD,WAAW;YACX,kCAAkC;QACpC;;AAEN","sources":["packages/@react-spectrum/menu/src/Underlay.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {isScrollable} from '@react-aria/utils';\nimport React, {JSX} from 'react';\nimport underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';\n\ninterface UnderlayProps {\n isOpen?: boolean,\n isTransparent?: boolean\n}\n\nexport function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element {\n let pageHeight: number | undefined = undefined;\n if (typeof document !== 'undefined') {\n let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;\n // Prevent Firefox from adding scrollbars when the page has a fractional height.\n let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;\n pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;\n }\n\n return (\n <div\n data-testid=\"underlay\"\n {...otherProps}\n // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.\n style={{height: pageHeight}}\n className={classNames(underlayStyles, 'spectrum-Underlay', {\n 'is-open': isOpen,\n 'spectrum-Underlay--transparent': isTransparent\n })} />\n );\n}\n"],"names":[],"version":3,"file":"Underlay.main.js.map"}
|