@react-spectrum/overlays 3.4.1 → 3.4.5
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/main.css +1 -2
- package/dist/main.js +457 -446
- package/dist/main.js.map +1 -1
- package/dist/module.js +445 -416
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +13 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +9 -9
- package/src/Modal.tsx +8 -9
- package/src/Popover.tsx +32 -6
- package/src/Tray.tsx +8 -12
- package/src/index.ts +1 -0
- package/dist/main.css.map +0 -1
package/dist/module.js
CHANGED
|
@@ -1,129 +1,160 @@
|
|
|
1
|
-
import { useModal, useOverlay, usePreventScroll } from "@react-aria/overlays";
|
|
2
|
-
import { mergeProps, useLayoutEffect, useViewportSize } from "@react-aria/utils";
|
|
3
|
-
import { classNames, useDOMRef, useStyleProps } from "@react-spectrum/utils";
|
|
4
|
-
import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
5
|
-
import _reactDom from "react-dom";
|
|
6
|
-
import { Provider } from "@react-spectrum/provider";
|
|
7
|
-
import _reactTransitionGroupTransition from "react-transition-group/Transition";
|
|
8
|
-
import _react, { useCallback, useState, forwardRef, useRef, useEffect } from "react";
|
|
9
|
-
import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
|
|
10
1
|
import "./main.css";
|
|
11
|
-
|
|
2
|
+
import {Provider as $dAm4o$Provider} from "@react-spectrum/provider";
|
|
3
|
+
import $dAm4o$react, {useState as $dAm4o$useState, useCallback as $dAm4o$useCallback, forwardRef as $dAm4o$forwardRef, useRef as $dAm4o$useRef, useEffect as $dAm4o$useEffect} from "react";
|
|
4
|
+
import $dAm4o$reactdom from "react-dom";
|
|
5
|
+
import $dAm4o$reacttransitiongroupTransition from "react-transition-group/Transition";
|
|
6
|
+
import {useDOMRef as $dAm4o$useDOMRef, useStyleProps as $dAm4o$useStyleProps, classNames as $dAm4o$classNames} from "@react-spectrum/utils";
|
|
7
|
+
import {mergeProps as $dAm4o$mergeProps, useLayoutEffect as $dAm4o$useLayoutEffect, useViewportSize as $dAm4o$useViewportSize} from "@react-aria/utils";
|
|
8
|
+
import {useOverlay as $dAm4o$useOverlay, useModal as $dAm4o$useModal, usePreventScroll as $dAm4o$usePreventScroll} from "@react-aria/overlays";
|
|
9
|
+
|
|
10
|
+
function $parcel$export(e, n, v, s) {
|
|
11
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
12
|
+
}
|
|
12
13
|
function $parcel$interopDefault(a) {
|
|
13
14
|
return a && a.__esModule ? a.default : a;
|
|
14
15
|
}
|
|
16
|
+
var $48594f684e18172e$exports = {};
|
|
17
|
+
|
|
18
|
+
$parcel$export($48594f684e18172e$exports, "Overlay", () => $48594f684e18172e$export$c6fdb837b070b4ff);
|
|
19
|
+
var $7fb3dcb292de588a$exports = {};
|
|
20
|
+
|
|
21
|
+
$parcel$export($7fb3dcb292de588a$exports, "OpenTransition", () => $7fb3dcb292de588a$export$b847a40ee92eff38);
|
|
15
22
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
23
|
+
|
|
24
|
+
const $7fb3dcb292de588a$var$OPEN_STATES = {
|
|
25
|
+
entering: false,
|
|
26
|
+
entered: true
|
|
19
27
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
function $c2eed959492fcaa12e5ad56438b32db$export$OpenTransition(props) {
|
|
34
|
-
return /*#__PURE__*/_react.createElement(_reactTransitionGroupTransition, _babelRuntimeHelpersEsmExtends({
|
|
35
|
-
timeout: {
|
|
36
|
-
enter: 0,
|
|
37
|
-
exit: 350
|
|
38
|
-
}
|
|
39
|
-
}, props), state => _react.Children.map(props.children, child => child && /*#__PURE__*/_react.cloneElement(child, {
|
|
40
|
-
isOpen: !!$c2eed959492fcaa12e5ad56438b32db$var$OPEN_STATES[state]
|
|
41
|
-
})));
|
|
28
|
+
function $7fb3dcb292de588a$export$b847a40ee92eff38(props) {
|
|
29
|
+
return(/*#__PURE__*/ $dAm4o$react.createElement($dAm4o$reacttransitiongroupTransition, {
|
|
30
|
+
timeout: {
|
|
31
|
+
enter: 0,
|
|
32
|
+
exit: 350
|
|
33
|
+
},
|
|
34
|
+
...props
|
|
35
|
+
}, (state)=>$dAm4o$react.Children.map(props.children, (child)=>child && /*#__PURE__*/ $dAm4o$react.cloneElement(child, {
|
|
36
|
+
isOpen: !!$7fb3dcb292de588a$var$OPEN_STATES[state]
|
|
37
|
+
})
|
|
38
|
+
)
|
|
39
|
+
));
|
|
42
40
|
}
|
|
43
41
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
onEnter,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
if (onExited) {
|
|
68
|
-
onExited();
|
|
69
|
-
}
|
|
70
|
-
}, [onExited]); // Don't un-render the overlay while it's transitioning out.
|
|
71
|
-
|
|
72
|
-
let mountOverlay = isOpen || !exited;
|
|
73
|
-
|
|
74
|
-
if (!mountOverlay) {
|
|
75
|
-
// Don't bother showing anything if we don't have to.
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
function $48594f684e18172e$var$Overlay(props, ref) {
|
|
47
|
+
let { children: children , isOpen: isOpen , container: container , onEnter: onEnter , onEntering: onEntering , onEntered: onEntered , onExit: onExit , onExiting: onExiting , onExited: onExited } = props;
|
|
48
|
+
let [exited, setExited] = $dAm4o$useState(!isOpen);
|
|
49
|
+
let handleEntered = $dAm4o$useCallback(()=>{
|
|
50
|
+
setExited(false);
|
|
51
|
+
if (onEntered) onEntered();
|
|
52
|
+
}, [
|
|
53
|
+
onEntered
|
|
54
|
+
]);
|
|
55
|
+
let handleExited = $dAm4o$useCallback(()=>{
|
|
56
|
+
setExited(true);
|
|
57
|
+
if (onExited) onExited();
|
|
58
|
+
}, [
|
|
59
|
+
onExited
|
|
60
|
+
]);
|
|
61
|
+
// Don't un-render the overlay while it's transitioning out.
|
|
62
|
+
let mountOverlay = isOpen || !exited;
|
|
63
|
+
if (!mountOverlay) // Don't bother showing anything if we don't have to.
|
|
76
64
|
return null;
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}, children));
|
|
95
|
-
|
|
96
|
-
return /*#__PURE__*/_reactDom.createPortal(contents, container || document.body);
|
|
65
|
+
let contents = /*#__PURE__*/ $dAm4o$react.createElement($dAm4o$Provider, {
|
|
66
|
+
ref: ref,
|
|
67
|
+
UNSAFE_style: {
|
|
68
|
+
background: 'transparent',
|
|
69
|
+
isolation: 'isolate'
|
|
70
|
+
}
|
|
71
|
+
}, /*#__PURE__*/ $dAm4o$react.createElement($7fb3dcb292de588a$export$b847a40ee92eff38, {
|
|
72
|
+
in: isOpen,
|
|
73
|
+
appear: true,
|
|
74
|
+
onExit: onExit,
|
|
75
|
+
onExiting: onExiting,
|
|
76
|
+
onExited: handleExited,
|
|
77
|
+
onEnter: onEnter,
|
|
78
|
+
onEntering: onEntering,
|
|
79
|
+
onEntered: handleEntered
|
|
80
|
+
}, children));
|
|
81
|
+
return(/*#__PURE__*/ $dAm4o$reactdom.createPortal(contents, container || document.body));
|
|
97
82
|
}
|
|
83
|
+
let $48594f684e18172e$export$c6fdb837b070b4ff = /*#__PURE__*/ $dAm4o$react.forwardRef($48594f684e18172e$var$Overlay);
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
var $bd0b45ed4a9fe45c$exports = {};
|
|
87
|
+
|
|
88
|
+
$parcel$export($bd0b45ed4a9fe45c$exports, "Popover", () => $bd0b45ed4a9fe45c$export$5b6b19405a83ff9d);
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
var $f991211e563faa53$exports = {};
|
|
93
|
+
|
|
94
|
+
$parcel$export($f991211e563faa53$exports, "spectrum-Popover", () => $f991211e563faa53$export$a62dc1b6ab23a7bb, (v) => $f991211e563faa53$export$a62dc1b6ab23a7bb = v);
|
|
95
|
+
$parcel$export($f991211e563faa53$exports, "react-spectrum-Popover", () => $f991211e563faa53$export$884f6b5065bdc41a, (v) => $f991211e563faa53$export$884f6b5065bdc41a = v);
|
|
96
|
+
$parcel$export($f991211e563faa53$exports, "spectrum-Dialog-content", () => $f991211e563faa53$export$cb8eccd0f3639238, (v) => $f991211e563faa53$export$cb8eccd0f3639238 = v);
|
|
97
|
+
$parcel$export($f991211e563faa53$exports, "spectrum-Modal-wrapper", () => $f991211e563faa53$export$35bea187ff802494, (v) => $f991211e563faa53$export$35bea187ff802494 = v);
|
|
98
|
+
$parcel$export($f991211e563faa53$exports, "react-spectrum-Modal-wrapper", () => $f991211e563faa53$export$e088717c213c31d7, (v) => $f991211e563faa53$export$e088717c213c31d7 = v);
|
|
99
|
+
$parcel$export($f991211e563faa53$exports, "spectrum-Modal", () => $f991211e563faa53$export$4c0b1e44c3834c85, (v) => $f991211e563faa53$export$4c0b1e44c3834c85 = v);
|
|
100
|
+
$parcel$export($f991211e563faa53$exports, "react-spectrum-Modal", () => $f991211e563faa53$export$f8edeb62d7fed8c1, (v) => $f991211e563faa53$export$f8edeb62d7fed8c1 = v);
|
|
101
|
+
$parcel$export($f991211e563faa53$exports, "spectrum-Tray", () => $f991211e563faa53$export$ce0704cd084c4f0d, (v) => $f991211e563faa53$export$ce0704cd084c4f0d = v);
|
|
102
|
+
$parcel$export($f991211e563faa53$exports, "react-spectrum-Tray", () => $f991211e563faa53$export$69dafa24343974dd, (v) => $f991211e563faa53$export$69dafa24343974dd = v);
|
|
103
|
+
var $f991211e563faa53$export$a62dc1b6ab23a7bb;
|
|
104
|
+
var $f991211e563faa53$export$884f6b5065bdc41a;
|
|
105
|
+
var $f991211e563faa53$export$cb8eccd0f3639238;
|
|
106
|
+
var $f991211e563faa53$export$35bea187ff802494;
|
|
107
|
+
var $f991211e563faa53$export$e088717c213c31d7;
|
|
108
|
+
var $f991211e563faa53$export$4c0b1e44c3834c85;
|
|
109
|
+
var $f991211e563faa53$export$f8edeb62d7fed8c1;
|
|
110
|
+
var $f991211e563faa53$export$ce0704cd084c4f0d;
|
|
111
|
+
var $f991211e563faa53$export$69dafa24343974dd;
|
|
112
|
+
$f991211e563faa53$export$a62dc1b6ab23a7bb = "spectrum-Popover_38efea";
|
|
113
|
+
$f991211e563faa53$export$884f6b5065bdc41a = "react-spectrum-Popover_38efea";
|
|
114
|
+
$f991211e563faa53$export$cb8eccd0f3639238 = "spectrum-Dialog-content_38efea";
|
|
115
|
+
$f991211e563faa53$export$35bea187ff802494 = "spectrum-Modal-wrapper_38efea";
|
|
116
|
+
$f991211e563faa53$export$e088717c213c31d7 = "react-spectrum-Modal-wrapper_38efea";
|
|
117
|
+
$f991211e563faa53$export$4c0b1e44c3834c85 = "spectrum-Modal_38efea";
|
|
118
|
+
$f991211e563faa53$export$f8edeb62d7fed8c1 = "react-spectrum-Modal_38efea";
|
|
119
|
+
$f991211e563faa53$export$ce0704cd084c4f0d = "spectrum-Tray_38efea";
|
|
120
|
+
$f991211e563faa53$export$69dafa24343974dd = "react-spectrum-Tray_38efea";
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
var $f557259fa117f399$exports = {};
|
|
125
|
+
|
|
126
|
+
$parcel$export($f557259fa117f399$exports, "spectrum-Popover", () => $f557259fa117f399$export$a62dc1b6ab23a7bb, (v) => $f557259fa117f399$export$a62dc1b6ab23a7bb = v);
|
|
127
|
+
$parcel$export($f557259fa117f399$exports, "is-open", () => $f557259fa117f399$export$a9781837241c946d, (v) => $f557259fa117f399$export$a9781837241c946d = v);
|
|
128
|
+
$parcel$export($f557259fa117f399$exports, "spectrum-Popover--bottom", () => $f557259fa117f399$export$6a19b19b14780d4a, (v) => $f557259fa117f399$export$6a19b19b14780d4a = v);
|
|
129
|
+
$parcel$export($f557259fa117f399$exports, "spectrum-Popover--top", () => $f557259fa117f399$export$f30becfb1df0cae4, (v) => $f557259fa117f399$export$f30becfb1df0cae4 = v);
|
|
130
|
+
$parcel$export($f557259fa117f399$exports, "spectrum-Popover--right", () => $f557259fa117f399$export$5fc8b429396c9f58, (v) => $f557259fa117f399$export$5fc8b429396c9f58 = v);
|
|
131
|
+
$parcel$export($f557259fa117f399$exports, "spectrum-Popover--left", () => $f557259fa117f399$export$79cc55906ac5b00, (v) => $f557259fa117f399$export$79cc55906ac5b00 = v);
|
|
132
|
+
$parcel$export($f557259fa117f399$exports, "spectrum-Popover-tip", () => $f557259fa117f399$export$3100ec4dc1668df1, (v) => $f557259fa117f399$export$3100ec4dc1668df1 = v);
|
|
133
|
+
$parcel$export($f557259fa117f399$exports, "spectrum-Popover-tip-triangle", () => $f557259fa117f399$export$ed733fa6cf19ab80, (v) => $f557259fa117f399$export$ed733fa6cf19ab80 = v);
|
|
134
|
+
$parcel$export($f557259fa117f399$exports, "spectrum-Popover--dialog", () => $f557259fa117f399$export$cf634262e726cd19, (v) => $f557259fa117f399$export$cf634262e726cd19 = v);
|
|
135
|
+
$parcel$export($f557259fa117f399$exports, "spectrum-Popover--withTip", () => $f557259fa117f399$export$d8b16c5377728262, (v) => $f557259fa117f399$export$d8b16c5377728262 = v);
|
|
136
|
+
var $f557259fa117f399$export$a62dc1b6ab23a7bb;
|
|
137
|
+
var $f557259fa117f399$export$a9781837241c946d;
|
|
138
|
+
var $f557259fa117f399$export$6a19b19b14780d4a;
|
|
139
|
+
var $f557259fa117f399$export$f30becfb1df0cae4;
|
|
140
|
+
var $f557259fa117f399$export$5fc8b429396c9f58;
|
|
141
|
+
var $f557259fa117f399$export$79cc55906ac5b00;
|
|
142
|
+
var $f557259fa117f399$export$3100ec4dc1668df1;
|
|
143
|
+
var $f557259fa117f399$export$ed733fa6cf19ab80;
|
|
144
|
+
var $f557259fa117f399$export$cf634262e726cd19;
|
|
145
|
+
var $f557259fa117f399$export$d8b16c5377728262;
|
|
146
|
+
$f557259fa117f399$export$a62dc1b6ab23a7bb = "spectrum-Popover_6115b8";
|
|
147
|
+
$f557259fa117f399$export$a9781837241c946d = "is-open_6115b8";
|
|
148
|
+
$f557259fa117f399$export$6a19b19b14780d4a = "spectrum-Popover--bottom_6115b8";
|
|
149
|
+
$f557259fa117f399$export$f30becfb1df0cae4 = "spectrum-Popover--top_6115b8";
|
|
150
|
+
$f557259fa117f399$export$5fc8b429396c9f58 = "spectrum-Popover--right_6115b8";
|
|
151
|
+
$f557259fa117f399$export$79cc55906ac5b00 = "spectrum-Popover--left_6115b8";
|
|
152
|
+
$f557259fa117f399$export$3100ec4dc1668df1 = "spectrum-Popover-tip_6115b8";
|
|
153
|
+
$f557259fa117f399$export$ed733fa6cf19ab80 = "spectrum-Popover-tip-triangle_6115b8";
|
|
154
|
+
$f557259fa117f399$export$cf634262e726cd19 = "spectrum-Popover--dialog_6115b8";
|
|
155
|
+
$f557259fa117f399$export$d8b16c5377728262 = "spectrum-Popover--withTip_6115b8";
|
|
156
|
+
|
|
98
157
|
|
|
99
|
-
export let Overlay = /*#__PURE__*/_react.forwardRef($efa130a588abe47e4415ae0ba92319d4$var$Overlay);
|
|
100
|
-
// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/overlays/src/overlays.css
|
|
101
|
-
var $a5bfb13c9743494ac49cc710f8330$exports = {};
|
|
102
|
-
$a5bfb13c9743494ac49cc710f8330$exports = {
|
|
103
|
-
"spectrum-Popover": "_spectrum-Popover_1c0dd",
|
|
104
|
-
"react-spectrum-Popover": "_react-spectrum-Popover_1c0dd",
|
|
105
|
-
"spectrum-Dialog-content": "_spectrum-Dialog-content_1c0dd",
|
|
106
|
-
"spectrum-Modal-wrapper": "_spectrum-Modal-wrapper_1c0dd",
|
|
107
|
-
"react-spectrum-Modal-wrapper": "_react-spectrum-Modal-wrapper_1c0dd",
|
|
108
|
-
"spectrum-Modal": "_spectrum-Modal_1c0dd",
|
|
109
|
-
"react-spectrum-Modal": "_react-spectrum-Modal_1c0dd",
|
|
110
|
-
"spectrum-Tray": "_spectrum-Tray_1c0dd",
|
|
111
|
-
"react-spectrum-Tray": "_react-spectrum-Tray_1c0dd"
|
|
112
|
-
};
|
|
113
|
-
// ASSET: /Users/govett/dev/react-spectrum-v3/node_modules/@adobe/spectrum-css-temp/components/popover/vars.css
|
|
114
|
-
var $f01264bdfc3021a50c5cc4caf66$exports = {};
|
|
115
|
-
$f01264bdfc3021a50c5cc4caf66$exports = {
|
|
116
|
-
"spectrum-Popover": "_spectrum-Popover_c37f7",
|
|
117
|
-
"is-open": "_is-open_c37f7",
|
|
118
|
-
"spectrum-Popover--bottom": "_spectrum-Popover--bottom_c37f7",
|
|
119
|
-
"spectrum-Popover--top": "_spectrum-Popover--top_c37f7",
|
|
120
|
-
"spectrum-Popover--right": "_spectrum-Popover--right_c37f7",
|
|
121
|
-
"spectrum-Popover--left": "_spectrum-Popover--left_c37f7",
|
|
122
|
-
"spectrum-Popover-tip": "_spectrum-Popover-tip_c37f7",
|
|
123
|
-
"spectrum-Popover-tip-triangle": "_spectrum-Popover-tip-triangle_c37f7",
|
|
124
|
-
"spectrum-Popover--dialog": "_spectrum-Popover--dialog_c37f7",
|
|
125
|
-
"spectrum-Popover--withTip": "_spectrum-Popover--withTip_c37f7"
|
|
126
|
-
};
|
|
127
158
|
|
|
128
159
|
/**
|
|
129
160
|
* Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
|
|
@@ -131,318 +162,316 @@ $f01264bdfc3021a50c5cc4caf66$exports = {
|
|
|
131
162
|
* between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
|
|
132
163
|
* the path always starts at 0 so that it perfectly overlaps the popover's border.
|
|
133
164
|
* See bottom of file for more explanation.
|
|
134
|
-
*/
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
bottom: 'bottom'
|
|
165
|
+
*/ let $bd0b45ed4a9fe45c$var$arrowPlacement = {
|
|
166
|
+
left: 'right',
|
|
167
|
+
right: 'right',
|
|
168
|
+
top: 'bottom',
|
|
169
|
+
bottom: 'bottom'
|
|
140
170
|
};
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
styleProps
|
|
158
|
-
} = useStyleProps(props);
|
|
159
|
-
return /*#__PURE__*/_react.createElement(Overlay, otherProps, /*#__PURE__*/_react.createElement($af48fe067ffcbddd851563094a05$var$PopoverWrapper, _babelRuntimeHelpersEsmExtends({}, styleProps, {
|
|
160
|
-
ref: domRef,
|
|
161
|
-
placement: placement,
|
|
162
|
-
arrowProps: arrowProps,
|
|
163
|
-
onClose: onClose,
|
|
164
|
-
shouldCloseOnBlur: shouldCloseOnBlur,
|
|
165
|
-
isKeyboardDismissDisabled: isKeyboardDismissDisabled,
|
|
166
|
-
hideArrow: hideArrow,
|
|
167
|
-
isNonModal: isNonModal
|
|
168
|
-
}), children));
|
|
171
|
+
function $bd0b45ed4a9fe45c$var$Popover(props, ref) {
|
|
172
|
+
let { children: children , placement: placement , arrowProps: arrowProps , onClose: onClose , shouldCloseOnBlur: shouldCloseOnBlur , hideArrow: hideArrow , isKeyboardDismissDisabled: isKeyboardDismissDisabled , isNonModal: isNonModal , isDismissable: isDismissable = true , ...otherProps } = props;
|
|
173
|
+
let domRef = $dAm4o$useDOMRef(ref);
|
|
174
|
+
let { styleProps: styleProps } = $dAm4o$useStyleProps(props);
|
|
175
|
+
return(/*#__PURE__*/ $dAm4o$react.createElement($48594f684e18172e$export$c6fdb837b070b4ff, otherProps, /*#__PURE__*/ $dAm4o$react.createElement($bd0b45ed4a9fe45c$var$PopoverWrapper, {
|
|
176
|
+
...styleProps,
|
|
177
|
+
ref: domRef,
|
|
178
|
+
placement: placement,
|
|
179
|
+
arrowProps: arrowProps,
|
|
180
|
+
onClose: onClose,
|
|
181
|
+
shouldCloseOnBlur: shouldCloseOnBlur,
|
|
182
|
+
isKeyboardDismissDisabled: isKeyboardDismissDisabled,
|
|
183
|
+
hideArrow: hideArrow,
|
|
184
|
+
isNonModal: isNonModal,
|
|
185
|
+
isDismissable: isDismissable
|
|
186
|
+
}, children)));
|
|
169
187
|
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, mergeProps(otherProps, overlayProps, modalProps), {
|
|
196
|
-
ref: ref,
|
|
197
|
-
className: classNames($f01264bdfc3021a50c5cc4caf66$$interop$default, 'spectrum-Popover', "spectrum-Popover--" + placement, {
|
|
198
|
-
'spectrum-Popover--withTip': !hideArrow,
|
|
199
|
-
'is-open': isOpen
|
|
200
|
-
}, classNames($a5bfb13c9743494ac49cc710f8330$$interop$default, 'spectrum-Popover', 'react-spectrum-Popover'), otherProps.className),
|
|
201
|
-
role: "presentation"
|
|
202
|
-
}), children, hideArrow ? null : /*#__PURE__*/_react.createElement($af48fe067ffcbddd851563094a05$var$Arrow, {
|
|
203
|
-
arrowProps: arrowProps,
|
|
204
|
-
direction: $af48fe067ffcbddd851563094a05$var$arrowPlacement[placement]
|
|
205
|
-
}));
|
|
188
|
+
const $bd0b45ed4a9fe45c$var$PopoverWrapper = /*#__PURE__*/ $dAm4o$forwardRef((props, ref)=>{
|
|
189
|
+
let { children: children , placement: placement = 'bottom' , arrowProps: arrowProps , isOpen: isOpen , hideArrow: hideArrow , shouldCloseOnBlur: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
190
|
+
shouldCloseOnBlur , isKeyboardDismissDisabled: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
191
|
+
isKeyboardDismissDisabled , isNonModal: isNonModal , isDismissable: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
192
|
+
isDismissable , ...otherProps } = props;
|
|
193
|
+
let { overlayProps: overlayProps } = $dAm4o$useOverlay({
|
|
194
|
+
...props,
|
|
195
|
+
isDismissable: isDismissable && isOpen
|
|
196
|
+
}, ref);
|
|
197
|
+
let { modalProps: modalProps } = $dAm4o$useModal({
|
|
198
|
+
isDisabled: isNonModal
|
|
199
|
+
});
|
|
200
|
+
return(/*#__PURE__*/ $dAm4o$react.createElement("div", {
|
|
201
|
+
...$dAm4o$mergeProps(otherProps, overlayProps, modalProps),
|
|
202
|
+
ref: ref,
|
|
203
|
+
className: $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($f557259fa117f399$exports)), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
|
|
204
|
+
'spectrum-Popover--withTip': !hideArrow,
|
|
205
|
+
'is-open': isOpen
|
|
206
|
+
}, $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($f991211e563faa53$exports)), 'spectrum-Popover', 'react-spectrum-Popover'), otherProps.className),
|
|
207
|
+
role: "presentation",
|
|
208
|
+
"data-testid": "popover"
|
|
209
|
+
}, children, hideArrow ? null : /*#__PURE__*/ $dAm4o$react.createElement($bd0b45ed4a9fe45c$var$Arrow, {
|
|
210
|
+
arrowProps: arrowProps,
|
|
211
|
+
direction: $bd0b45ed4a9fe45c$var$arrowPlacement[placement]
|
|
212
|
+
})));
|
|
206
213
|
});
|
|
207
|
-
let $
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
214
|
+
let $bd0b45ed4a9fe45c$var$ROOT_2 = Math.sqrt(2);
|
|
215
|
+
function $bd0b45ed4a9fe45c$var$Arrow(props) {
|
|
216
|
+
let [size, setSize] = $dAm4o$useState(20);
|
|
217
|
+
let [borderWidth, setBorderWidth] = $dAm4o$useState(1);
|
|
218
|
+
let ref = $dAm4o$useRef();
|
|
219
|
+
// get the css value for the tip size and divide it by 2 for this arrow implementation
|
|
220
|
+
$dAm4o$useLayoutEffect(()=>{
|
|
221
|
+
if (ref.current) {
|
|
222
|
+
let spectrumTipWidth = window.getComputedStyle(ref.current).getPropertyValue('--spectrum-popover-tip-size');
|
|
223
|
+
if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
|
|
224
|
+
let spectrumBorderWidth = window.getComputedStyle(ref.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
|
|
225
|
+
if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
|
|
226
|
+
}
|
|
227
|
+
}, [
|
|
228
|
+
ref
|
|
229
|
+
]);
|
|
230
|
+
let landscape = props.direction === 'top' || props.direction === 'bottom';
|
|
231
|
+
let mirror = props.direction === 'left' || props.direction === 'top';
|
|
232
|
+
let borderDiagonal = borderWidth * $bd0b45ed4a9fe45c$var$ROOT_2;
|
|
233
|
+
let halfBorderDiagonal = borderDiagonal / 2;
|
|
234
|
+
let secondary = 2 * size + 2 * borderDiagonal;
|
|
235
|
+
let primary = size + borderDiagonal;
|
|
236
|
+
let primaryStart = mirror ? primary : 0;
|
|
237
|
+
let primaryEnd = mirror ? halfBorderDiagonal : primary - halfBorderDiagonal;
|
|
238
|
+
let secondaryStart = halfBorderDiagonal;
|
|
239
|
+
let secondaryMiddle = secondary / 2;
|
|
240
|
+
let secondaryEnd = secondary - halfBorderDiagonal;
|
|
241
|
+
let pathData = landscape ? [
|
|
242
|
+
'M',
|
|
243
|
+
secondaryStart,
|
|
244
|
+
primaryStart,
|
|
245
|
+
'L',
|
|
246
|
+
secondaryMiddle,
|
|
247
|
+
primaryEnd,
|
|
248
|
+
'L',
|
|
249
|
+
secondaryEnd,
|
|
250
|
+
primaryStart
|
|
251
|
+
] : [
|
|
252
|
+
'M',
|
|
253
|
+
primaryStart,
|
|
254
|
+
secondaryStart,
|
|
255
|
+
'L',
|
|
256
|
+
primaryEnd,
|
|
257
|
+
secondaryMiddle,
|
|
258
|
+
'L',
|
|
259
|
+
primaryStart,
|
|
260
|
+
secondaryEnd
|
|
261
|
+
];
|
|
262
|
+
let arrowProps = props.arrowProps;
|
|
263
|
+
/* use ceil because the svg needs to always accomodate the path inside it */ return(/*#__PURE__*/ $dAm4o$react.createElement("svg", {
|
|
264
|
+
xmlns: "http://www.w3.org/svg/2000",
|
|
265
|
+
width: Math.ceil(landscape ? secondary : primary),
|
|
266
|
+
height: Math.ceil(landscape ? primary : secondary),
|
|
267
|
+
style: props.style,
|
|
268
|
+
className: $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($f557259fa117f399$exports)), 'spectrum-Popover-tip'),
|
|
269
|
+
ref: ref,
|
|
270
|
+
...arrowProps
|
|
271
|
+
}, /*#__PURE__*/ $dAm4o$react.createElement("path", {
|
|
272
|
+
className: $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($f557259fa117f399$exports)), 'spectrum-Popover-tip-triangle'),
|
|
273
|
+
d: pathData.join(' ')
|
|
274
|
+
})));
|
|
255
275
|
}
|
|
276
|
+
let $bd0b45ed4a9fe45c$export$5b6b19405a83ff9d = /*#__PURE__*/ $dAm4o$forwardRef($bd0b45ed4a9fe45c$var$Popover);
|
|
277
|
+
|
|
278
|
+
|
|
279
|
+
var $27faaa509801f4ff$exports = {};
|
|
280
|
+
|
|
281
|
+
$parcel$export($27faaa509801f4ff$exports, "Modal", () => $27faaa509801f4ff$export$2b77a92f1a5ad772);
|
|
282
|
+
|
|
283
|
+
|
|
284
|
+
var $32f55607f12d0e21$exports = {};
|
|
285
|
+
|
|
286
|
+
$parcel$export($32f55607f12d0e21$exports, "spectrum-Modal", () => $32f55607f12d0e21$export$4c0b1e44c3834c85, (v) => $32f55607f12d0e21$export$4c0b1e44c3834c85 = v);
|
|
287
|
+
$parcel$export($32f55607f12d0e21$exports, "is-open", () => $32f55607f12d0e21$export$a9781837241c946d, (v) => $32f55607f12d0e21$export$a9781837241c946d = v);
|
|
288
|
+
$parcel$export($32f55607f12d0e21$exports, "spectrum-Modal-wrapper", () => $32f55607f12d0e21$export$35bea187ff802494, (v) => $32f55607f12d0e21$export$35bea187ff802494 = v);
|
|
289
|
+
$parcel$export($32f55607f12d0e21$exports, "spectrum-Modal--responsive", () => $32f55607f12d0e21$export$fd1e42aa8ea02a1, (v) => $32f55607f12d0e21$export$fd1e42aa8ea02a1 = v);
|
|
290
|
+
$parcel$export($32f55607f12d0e21$exports, "spectrum-Modal--fullscreen", () => $32f55607f12d0e21$export$a4423fa77727431a, (v) => $32f55607f12d0e21$export$a4423fa77727431a = v);
|
|
291
|
+
$parcel$export($32f55607f12d0e21$exports, "spectrum-Modal--fullscreenTakeover", () => $32f55607f12d0e21$export$175dd699720b5fb7, (v) => $32f55607f12d0e21$export$175dd699720b5fb7 = v);
|
|
292
|
+
var $32f55607f12d0e21$export$4c0b1e44c3834c85;
|
|
293
|
+
var $32f55607f12d0e21$export$a9781837241c946d;
|
|
294
|
+
var $32f55607f12d0e21$export$35bea187ff802494;
|
|
295
|
+
var $32f55607f12d0e21$export$fd1e42aa8ea02a1;
|
|
296
|
+
var $32f55607f12d0e21$export$a4423fa77727431a;
|
|
297
|
+
var $32f55607f12d0e21$export$175dd699720b5fb7;
|
|
298
|
+
$32f55607f12d0e21$export$4c0b1e44c3834c85 = "spectrum-Modal_f81956";
|
|
299
|
+
$32f55607f12d0e21$export$a9781837241c946d = "is-open_f81956";
|
|
300
|
+
$32f55607f12d0e21$export$35bea187ff802494 = "spectrum-Modal-wrapper_f81956";
|
|
301
|
+
$32f55607f12d0e21$export$fd1e42aa8ea02a1 = "spectrum-Modal--responsive_f81956";
|
|
302
|
+
$32f55607f12d0e21$export$a4423fa77727431a = "spectrum-Modal--fullscreen_f81956";
|
|
303
|
+
$32f55607f12d0e21$export$175dd699720b5fb7 = "spectrum-Modal--fullscreenTakeover_f81956";
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
|
|
256
307
|
|
|
257
|
-
export let Popover = /*#__PURE__*/forwardRef($af48fe067ffcbddd851563094a05$var$Popover);
|
|
258
|
-
// ASSET: /Users/govett/dev/react-spectrum-v3/node_modules/@adobe/spectrum-css-temp/components/modal/vars.css
|
|
259
|
-
var $e88425c760534ecdce642e453299664b$exports = {};
|
|
260
|
-
$e88425c760534ecdce642e453299664b$exports = {
|
|
261
|
-
"spectrum-Modal": "_spectrum-Modal_cdccb",
|
|
262
|
-
"is-open": "_is-open_cdccb",
|
|
263
|
-
"spectrum-Modal-wrapper": "_spectrum-Modal-wrapper_cdccb",
|
|
264
|
-
"spectrum-Modal--responsive": "_spectrum-Modal--responsive_cdccb",
|
|
265
|
-
"spectrum-Modal--fullscreen": "_spectrum-Modal--fullscreen_cdccb",
|
|
266
|
-
"spectrum-Modal--fullscreenTakeover": "_spectrum-Modal--fullscreenTakeover_cdccb"
|
|
267
|
-
};
|
|
268
|
-
// ASSET: /Users/govett/dev/react-spectrum-v3/node_modules/@adobe/spectrum-css-temp/components/underlay/vars.css
|
|
269
|
-
var $a83084f5122c4f2e3cd09943e3dc9d1c$exports = {};
|
|
270
|
-
$a83084f5122c4f2e3cd09943e3dc9d1c$exports = {
|
|
271
|
-
"spectrum-Underlay": "_spectrum-Underlay_8c345",
|
|
272
|
-
"is-open": "_is-open_8c345"
|
|
273
|
-
};
|
|
274
|
-
var $a83084f5122c4f2e3cd09943e3dc9d1c$$interop$default = $parcel$interopDefault($a83084f5122c4f2e3cd09943e3dc9d1c$exports);
|
|
275
|
-
|
|
276
|
-
function $facde3dde95c50b545b1ceb8303a7b3d$export$Underlay(_ref) {
|
|
277
|
-
let {
|
|
278
|
-
isOpen
|
|
279
|
-
} = _ref;
|
|
280
|
-
return /*#__PURE__*/_react.createElement("div", {
|
|
281
|
-
className: classNames($a83084f5122c4f2e3cd09943e3dc9d1c$$interop$default, 'spectrum-Underlay', {
|
|
282
|
-
'is-open': isOpen
|
|
283
|
-
})
|
|
284
|
-
});
|
|
285
|
-
}
|
|
286
308
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
isKeyboardDismissDisabled: isKeyboardDismissDisabled,
|
|
306
|
-
ref: domRef
|
|
307
|
-
}), children));
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
var $e4767eaa4d1c7a70$exports = {};
|
|
312
|
+
|
|
313
|
+
$parcel$export($e4767eaa4d1c7a70$exports, "spectrum-Underlay", () => $e4767eaa4d1c7a70$export$74470528f463af97, (v) => $e4767eaa4d1c7a70$export$74470528f463af97 = v);
|
|
314
|
+
$parcel$export($e4767eaa4d1c7a70$exports, "is-open", () => $e4767eaa4d1c7a70$export$a9781837241c946d, (v) => $e4767eaa4d1c7a70$export$a9781837241c946d = v);
|
|
315
|
+
var $e4767eaa4d1c7a70$export$74470528f463af97;
|
|
316
|
+
var $e4767eaa4d1c7a70$export$a9781837241c946d;
|
|
317
|
+
$e4767eaa4d1c7a70$export$74470528f463af97 = "spectrum-Underlay_eb7615";
|
|
318
|
+
$e4767eaa4d1c7a70$export$a9781837241c946d = "is-open_eb7615";
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
function $1dc39196f4446f3f$export$f360afc887607b02({ isOpen: isOpen }) {
|
|
322
|
+
return(/*#__PURE__*/ $dAm4o$react.createElement("div", {
|
|
323
|
+
className: $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($e4767eaa4d1c7a70$exports)), 'spectrum-Underlay', {
|
|
324
|
+
'is-open': isOpen
|
|
325
|
+
})
|
|
326
|
+
}));
|
|
308
327
|
}
|
|
309
328
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
329
|
+
|
|
330
|
+
|
|
331
|
+
function $27faaa509801f4ff$var$Modal(props, ref) {
|
|
332
|
+
let { children: children , onClose: onClose , type: type , ...otherProps } = props;
|
|
333
|
+
let domRef = $dAm4o$useDOMRef(ref);
|
|
334
|
+
let { styleProps: styleProps } = $dAm4o$useStyleProps(props);
|
|
335
|
+
let { overlayProps: overlayProps , underlayProps: underlayProps } = $dAm4o$useOverlay(props, domRef);
|
|
336
|
+
return(/*#__PURE__*/ $dAm4o$react.createElement($48594f684e18172e$export$c6fdb837b070b4ff, otherProps, /*#__PURE__*/ $dAm4o$react.createElement($1dc39196f4446f3f$export$f360afc887607b02, underlayProps), /*#__PURE__*/ $dAm4o$react.createElement($27faaa509801f4ff$var$ModalWrapper, {
|
|
337
|
+
...styleProps,
|
|
338
|
+
onClose: onClose,
|
|
339
|
+
type: type,
|
|
340
|
+
ref: domRef,
|
|
341
|
+
overlayProps: overlayProps
|
|
342
|
+
}, children)));
|
|
343
|
+
}
|
|
344
|
+
let $27faaa509801f4ff$var$typeMap = {
|
|
345
|
+
fullscreen: 'fullscreen',
|
|
346
|
+
fullscreenTakeover: 'fullscreenTakeover'
|
|
313
347
|
};
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
let style = {
|
|
340
|
-
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
341
|
-
};
|
|
342
|
-
return /*#__PURE__*/_react.createElement("div", {
|
|
343
|
-
className: wrapperClassName,
|
|
344
|
-
style: style
|
|
345
|
-
}, /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, mergeProps(otherProps, overlayProps, modalProps), {
|
|
346
|
-
ref: ref,
|
|
347
|
-
className: modalClassName
|
|
348
|
-
}), children));
|
|
348
|
+
let $27faaa509801f4ff$var$ModalWrapper = /*#__PURE__*/ $dAm4o$forwardRef(function(props, ref) {
|
|
349
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
350
|
+
let { children: children , isOpen: isOpen , type: type , overlayProps: overlayProps , ...otherProps } = props;
|
|
351
|
+
let typeVariant = $27faaa509801f4ff$var$typeMap[type];
|
|
352
|
+
$dAm4o$usePreventScroll();
|
|
353
|
+
let { modalProps: modalProps } = $dAm4o$useModal();
|
|
354
|
+
let wrapperClassName = $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($32f55607f12d0e21$exports)), 'spectrum-Modal-wrapper', $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($f991211e563faa53$exports)), 'spectrum-Modal-wrapper', 'react-spectrum-Modal-wrapper'));
|
|
355
|
+
let modalClassName = $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($32f55607f12d0e21$exports)), 'spectrum-Modal', {
|
|
356
|
+
'is-open': isOpen
|
|
357
|
+
}, $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($f991211e563faa53$exports)), 'spectrum-Modal', 'react-spectrum-Modal'), {
|
|
358
|
+
[`spectrum-Modal--${typeVariant}`]: typeVariant
|
|
359
|
+
}, otherProps.className);
|
|
360
|
+
let viewport = $dAm4o$useViewportSize();
|
|
361
|
+
let style = {
|
|
362
|
+
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
363
|
+
};
|
|
364
|
+
return(/*#__PURE__*/ $dAm4o$react.createElement("div", {
|
|
365
|
+
className: wrapperClassName,
|
|
366
|
+
style: style
|
|
367
|
+
}, /*#__PURE__*/ $dAm4o$react.createElement("div", {
|
|
368
|
+
...$dAm4o$mergeProps(otherProps, overlayProps, modalProps),
|
|
369
|
+
ref: ref,
|
|
370
|
+
className: modalClassName,
|
|
371
|
+
"data-testid": "modal"
|
|
372
|
+
}, children)));
|
|
349
373
|
});
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
$
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
"spectrum-Tray--fixedHeight": "_spectrum-Tray--fixedHeight_8bca2"
|
|
358
|
-
};
|
|
374
|
+
let $27faaa509801f4ff$export$2b77a92f1a5ad772 = /*#__PURE__*/ $dAm4o$forwardRef($27faaa509801f4ff$var$Modal);
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
var $fa47f7b86777480a$exports = {};
|
|
378
|
+
|
|
379
|
+
$parcel$export($fa47f7b86777480a$exports, "Tray", () => $fa47f7b86777480a$export$4589ed81930b555c);
|
|
380
|
+
|
|
359
381
|
|
|
360
|
-
function $beb29a978949a31ec0bff450b4dc$var$Tray(props, ref) {
|
|
361
|
-
let {
|
|
362
|
-
children,
|
|
363
|
-
onClose,
|
|
364
|
-
shouldCloseOnBlur,
|
|
365
|
-
isKeyboardDismissDisabled,
|
|
366
|
-
isFixedHeight,
|
|
367
|
-
isNonModal
|
|
368
|
-
} = props,
|
|
369
|
-
otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["children", "onClose", "shouldCloseOnBlur", "isKeyboardDismissDisabled", "isFixedHeight", "isNonModal"]);
|
|
370
|
-
|
|
371
|
-
let domRef = useDOMRef(ref);
|
|
372
|
-
let {
|
|
373
|
-
styleProps
|
|
374
|
-
} = useStyleProps(props);
|
|
375
|
-
return /*#__PURE__*/_react.createElement(Overlay, otherProps, /*#__PURE__*/_react.createElement($facde3dde95c50b545b1ceb8303a7b3d$export$Underlay, null), /*#__PURE__*/_react.createElement($beb29a978949a31ec0bff450b4dc$var$TrayWrapper, _babelRuntimeHelpersEsmExtends({}, styleProps, {
|
|
376
|
-
onClose: onClose,
|
|
377
|
-
shouldCloseOnBlur: shouldCloseOnBlur,
|
|
378
|
-
isKeyboardDismissDisabled: isKeyboardDismissDisabled,
|
|
379
|
-
ref: domRef,
|
|
380
|
-
isFixedHeight: isFixedHeight,
|
|
381
|
-
isNonModal: isNonModal
|
|
382
|
-
}), children));
|
|
383
|
-
}
|
|
384
382
|
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
383
|
+
|
|
384
|
+
|
|
385
|
+
var $9c08011747e45f44$exports = {};
|
|
386
|
+
|
|
387
|
+
$parcel$export($9c08011747e45f44$exports, "spectrum-Tray", () => $9c08011747e45f44$export$ce0704cd084c4f0d, (v) => $9c08011747e45f44$export$ce0704cd084c4f0d = v);
|
|
388
|
+
$parcel$export($9c08011747e45f44$exports, "is-open", () => $9c08011747e45f44$export$a9781837241c946d, (v) => $9c08011747e45f44$export$a9781837241c946d = v);
|
|
389
|
+
$parcel$export($9c08011747e45f44$exports, "spectrum-Tray-wrapper", () => $9c08011747e45f44$export$641b9b70c23dce66, (v) => $9c08011747e45f44$export$641b9b70c23dce66 = v);
|
|
390
|
+
$parcel$export($9c08011747e45f44$exports, "spectrum-Tray--fixedHeight", () => $9c08011747e45f44$export$79bfb05e59a300b, (v) => $9c08011747e45f44$export$79bfb05e59a300b = v);
|
|
391
|
+
var $9c08011747e45f44$export$ce0704cd084c4f0d;
|
|
392
|
+
var $9c08011747e45f44$export$a9781837241c946d;
|
|
393
|
+
var $9c08011747e45f44$export$641b9b70c23dce66;
|
|
394
|
+
var $9c08011747e45f44$export$79bfb05e59a300b;
|
|
395
|
+
$9c08011747e45f44$export$ce0704cd084c4f0d = "spectrum-Tray_23bf66";
|
|
396
|
+
$9c08011747e45f44$export$a9781837241c946d = "is-open_23bf66";
|
|
397
|
+
$9c08011747e45f44$export$641b9b70c23dce66 = "spectrum-Tray-wrapper_23bf66";
|
|
398
|
+
$9c08011747e45f44$export$79bfb05e59a300b = "spectrum-Tray--fixedHeight_23bf66";
|
|
399
|
+
|
|
400
|
+
|
|
401
|
+
|
|
402
|
+
|
|
403
|
+
function $fa47f7b86777480a$var$Tray(props, ref) {
|
|
404
|
+
let { children: children , onClose: onClose , isFixedHeight: isFixedHeight , isNonModal: isNonModal , ...otherProps } = props;
|
|
405
|
+
let domRef = $dAm4o$useDOMRef(ref);
|
|
406
|
+
let { styleProps: styleProps } = $dAm4o$useStyleProps(props);
|
|
407
|
+
let { overlayProps: overlayProps , underlayProps: underlayProps } = $dAm4o$useOverlay({
|
|
408
|
+
...props,
|
|
409
|
+
isDismissable: true
|
|
410
|
+
}, domRef);
|
|
411
|
+
return(/*#__PURE__*/ $dAm4o$react.createElement($48594f684e18172e$export$c6fdb837b070b4ff, otherProps, /*#__PURE__*/ $dAm4o$react.createElement($1dc39196f4446f3f$export$f360afc887607b02, underlayProps), /*#__PURE__*/ $dAm4o$react.createElement($fa47f7b86777480a$var$TrayWrapper, {
|
|
412
|
+
...styleProps,
|
|
413
|
+
onClose: onClose,
|
|
414
|
+
ref: domRef,
|
|
415
|
+
overlayProps: overlayProps,
|
|
416
|
+
isFixedHeight: isFixedHeight,
|
|
417
|
+
isNonModal: isNonModal
|
|
418
|
+
}, children)));
|
|
419
|
+
}
|
|
420
|
+
let $fa47f7b86777480a$var$TrayWrapper = /*#__PURE__*/ $dAm4o$forwardRef(function(props, ref) {
|
|
421
|
+
let { children: children , isOpen: isOpen , isFixedHeight: isFixedHeight , isNonModal: isNonModal , overlayProps: overlayProps , ...otherProps } = props;
|
|
422
|
+
$dAm4o$usePreventScroll();
|
|
423
|
+
let { modalProps: modalProps } = $dAm4o$useModal({
|
|
424
|
+
isDisabled: isNonModal
|
|
425
|
+
});
|
|
426
|
+
// We need to measure the window's height in JS rather than using percentages in CSS
|
|
427
|
+
// so that contents (e.g. menu) can inherit the max-height properly. Using percentages
|
|
428
|
+
// does not work properly because there is nothing to base the percentage on.
|
|
429
|
+
// We cannot use vh units because mobile browsers adjust the window height dynamically
|
|
430
|
+
// when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
|
|
431
|
+
// Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
|
|
432
|
+
// is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
|
|
433
|
+
let viewport = $dAm4o$useViewportSize();
|
|
434
|
+
let [height, setHeight] = $dAm4o$useState(viewport.height);
|
|
435
|
+
let timeoutRef = $dAm4o$useRef();
|
|
436
|
+
$dAm4o$useEffect(()=>{
|
|
437
|
+
clearTimeout(timeoutRef.current);
|
|
438
|
+
// When the height is decreasing, and the keyboard is visible
|
|
439
|
+
// (visual viewport smaller than layout viewport), delay setting
|
|
440
|
+
// the new max height until after the animation is complete
|
|
441
|
+
// so that there isn't an empty space under the tray briefly.
|
|
442
|
+
if (viewport.height < height && viewport.height < window.innerHeight) timeoutRef.current = setTimeout(()=>{
|
|
443
|
+
setHeight(viewport.height);
|
|
444
|
+
}, 500);
|
|
445
|
+
else setHeight(viewport.height);
|
|
446
|
+
}, [
|
|
447
|
+
height,
|
|
448
|
+
viewport.height
|
|
449
|
+
]);
|
|
450
|
+
let wrapperStyle = {
|
|
451
|
+
'--spectrum-visual-viewport-height': height + 'px'
|
|
452
|
+
};
|
|
453
|
+
let wrapperClassName = $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($9c08011747e45f44$exports)), 'spectrum-Tray-wrapper');
|
|
454
|
+
let className = $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($9c08011747e45f44$exports)), 'spectrum-Tray', {
|
|
455
|
+
'is-open': isOpen,
|
|
456
|
+
'spectrum-Tray--fixedHeight': isFixedHeight
|
|
457
|
+
}, $dAm4o$classNames((/*@__PURE__*/$parcel$interopDefault($f991211e563faa53$exports)), 'spectrum-Tray', 'react-spectrum-Tray'), otherProps.className);
|
|
458
|
+
let domProps = $dAm4o$mergeProps(otherProps, overlayProps);
|
|
459
|
+
return(/*#__PURE__*/ $dAm4o$react.createElement("div", {
|
|
460
|
+
className: wrapperClassName,
|
|
461
|
+
style: wrapperStyle
|
|
462
|
+
}, /*#__PURE__*/ $dAm4o$react.createElement("div", {
|
|
463
|
+
...domProps,
|
|
464
|
+
...modalProps,
|
|
465
|
+
className: className,
|
|
466
|
+
ref: ref,
|
|
467
|
+
"data-testid": "tray"
|
|
468
|
+
}, children)));
|
|
446
469
|
});
|
|
447
|
-
|
|
470
|
+
let $fa47f7b86777480a$export$4589ed81930b555c = /*#__PURE__*/ $dAm4o$forwardRef($fa47f7b86777480a$var$Tray);
|
|
471
|
+
|
|
472
|
+
|
|
473
|
+
|
|
474
|
+
|
|
475
|
+
|
|
476
|
+
export {$48594f684e18172e$export$c6fdb837b070b4ff as Overlay, $bd0b45ed4a9fe45c$export$5b6b19405a83ff9d as Popover, $27faaa509801f4ff$export$2b77a92f1a5ad772 as Modal, $fa47f7b86777480a$export$4589ed81930b555c as Tray, $7fb3dcb292de588a$export$b847a40ee92eff38 as OpenTransition};
|
|
448
477
|
//# sourceMappingURL=module.js.map
|