@react-spectrum/overlays 3.4.2 → 3.4.6

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