@react-spectrum/overlays 3.8.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/main.css +1 -1
  2. package/dist/main.js +257 -166
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +258 -167
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts +20 -2
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +10 -10
  9. package/src/Modal.tsx +32 -35
  10. package/src/OpenTransition.tsx +1 -1
  11. package/src/Overlay.tsx +17 -17
  12. package/src/Popover.tsx +58 -73
  13. package/src/Tray.tsx +38 -43
  14. package/src/Underlay.tsx +4 -3
package/dist/main.js CHANGED
@@ -1,11 +1,10 @@
1
1
  require("./main.css");
2
2
  var $eLPAa$reactspectrumprovider = require("@react-spectrum/provider");
3
3
  var $eLPAa$react = require("react");
4
- var $eLPAa$reactdom = require("react-dom");
5
- var $eLPAa$reacttransitiongroupTransition = require("react-transition-group/Transition");
4
+ var $eLPAa$reactariaoverlays = require("@react-aria/overlays");
5
+ var $eLPAa$reacttransitiongroup = require("react-transition-group");
6
6
  var $eLPAa$reactspectrumutils = require("@react-spectrum/utils");
7
7
  var $eLPAa$reactariautils = require("@react-aria/utils");
8
- var $eLPAa$reactariaoverlays = require("@react-aria/overlays");
9
8
 
10
9
  function $parcel$export(e, n, v, s) {
11
10
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -19,25 +18,54 @@ $parcel$export(module.exports, "Popover", () => $f02bba55a62f20dd$export$5b6b194
19
18
  $parcel$export(module.exports, "Modal", () => $fc75a6aa7a2b905b$export$2b77a92f1a5ad772);
20
19
  $parcel$export(module.exports, "Tray", () => $6b386deda21be662$export$4589ed81930b555c);
21
20
  $parcel$export(module.exports, "OpenTransition", () => $13f51cdc44d228b9$export$b847a40ee92eff38);
22
-
21
+ /*
22
+ * Copyright 2020 Adobe. All rights reserved.
23
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
24
+ * you may not use this file except in compliance with the License. You may obtain a copy
25
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
26
+ *
27
+ * Unless required by applicable law or agreed to in writing, software distributed under
28
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
29
+ * OF ANY KIND, either express or implied. See the License for the specific language
30
+ * governing permissions and limitations under the License.
31
+ */ /// <reference types="css-module-types" />
32
+ /*
33
+ * Copyright 2020 Adobe. All rights reserved.
34
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
35
+ * you may not use this file except in compliance with the License. You may obtain a copy
36
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
37
+ *
38
+ * Unless required by applicable law or agreed to in writing, software distributed under
39
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
40
+ * OF ANY KIND, either express or implied. See the License for the specific language
41
+ * governing permissions and limitations under the License.
42
+ */ /*
43
+ * Copyright 2020 Adobe. All rights reserved.
44
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
45
+ * you may not use this file except in compliance with the License. You may obtain a copy
46
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
47
+ *
48
+ * Unless required by applicable law or agreed to in writing, software distributed under
49
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
50
+ * OF ANY KIND, either express or implied. See the License for the specific language
51
+ * governing permissions and limitations under the License.
52
+ */
23
53
 
24
54
  const $13f51cdc44d228b9$var$OPEN_STATES = {
25
55
  entering: false,
26
56
  entered: true
27
57
  };
28
58
  function $13f51cdc44d228b9$export$b847a40ee92eff38(props) {
29
- var child1;
30
- return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement(($parcel$interopDefault($eLPAa$reacttransitiongroupTransition)), {
59
+ var child;
60
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reacttransitiongroup.Transition), {
31
61
  timeout: {
32
62
  enter: 0,
33
63
  exit: 350
34
64
  },
35
65
  ...props
36
- }, (state)=>($parcel$interopDefault($eLPAa$react)).Children.map(props.children, (child)=>child && /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).cloneElement(child, {
66
+ }, (state)=>(0, ($parcel$interopDefault($eLPAa$react))).Children.map(props.children, (child)=>child && /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).cloneElement(child, {
37
67
  isOpen: !!$13f51cdc44d228b9$var$OPEN_STATES[state]
38
- })
39
- )
40
- ));
68
+ })));
41
69
  }
42
70
 
43
71
 
@@ -46,14 +74,14 @@ function $13f51cdc44d228b9$export$b847a40ee92eff38(props) {
46
74
 
47
75
  function $2aebdc186fd41e87$var$Overlay(props, ref) {
48
76
  let { children: children , isOpen: isOpen , container: container , onEnter: onEnter , onEntering: onEntering , onEntered: onEntered , onExit: onExit , onExiting: onExiting , onExited: onExited } = props;
49
- let [exited, setExited] = $eLPAa$react.useState(!isOpen);
50
- let handleEntered = $eLPAa$react.useCallback(()=>{
77
+ let [exited, setExited] = (0, $eLPAa$react.useState)(!isOpen);
78
+ let handleEntered = (0, $eLPAa$react.useCallback)(()=>{
51
79
  setExited(false);
52
80
  if (onEntered) onEntered();
53
81
  }, [
54
82
  onEntered
55
83
  ]);
56
- let handleExited = $eLPAa$react.useCallback(()=>{
84
+ let handleExited = (0, $eLPAa$react.useCallback)(()=>{
57
85
  setExited(true);
58
86
  if (onExited) onExited();
59
87
  }, [
@@ -63,14 +91,16 @@ function $2aebdc186fd41e87$var$Overlay(props, ref) {
63
91
  let mountOverlay = isOpen || !exited;
64
92
  if (!mountOverlay) // Don't bother showing anything if we don't have to.
65
93
  return null;
66
- let contents = /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($eLPAa$reactspectrumprovider.Provider, {
94
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.Overlay), {
95
+ portalContainer: container
96
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactspectrumprovider.Provider), {
67
97
  ref: ref,
68
98
  UNSAFE_style: {
69
- background: 'transparent',
70
- isolation: 'isolate'
99
+ background: "transparent",
100
+ isolation: "isolate"
71
101
  },
72
102
  isDisabled: false
73
- }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($13f51cdc44d228b9$export$b847a40ee92eff38, {
103
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $13f51cdc44d228b9$export$b847a40ee92eff38), {
74
104
  in: isOpen,
75
105
  appear: true,
76
106
  onExit: onExit,
@@ -79,13 +109,22 @@ function $2aebdc186fd41e87$var$Overlay(props, ref) {
79
109
  onEnter: onEnter,
80
110
  onEntering: onEntering,
81
111
  onEntered: handleEntered
82
- }, children));
83
- return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$reactdom)).createPortal(contents, container || document.body));
112
+ }, children)));
84
113
  }
85
- let $2aebdc186fd41e87$export$c6fdb837b070b4ff = /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).forwardRef($2aebdc186fd41e87$var$Overlay);
86
-
114
+ let $2aebdc186fd41e87$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).forwardRef($2aebdc186fd41e87$var$Overlay);
87
115
 
88
116
 
117
+ /*
118
+ * Copyright 2020 Adobe. All rights reserved.
119
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
120
+ * you may not use this file except in compliance with the License. You may obtain a copy
121
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
122
+ *
123
+ * Unless required by applicable law or agreed to in writing, software distributed under
124
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
125
+ * OF ANY KIND, either express or implied. See the License for the specific language
126
+ * governing permissions and limitations under the License.
127
+ */
89
128
 
90
129
 
91
130
  var $e9a663ccb19ed1b0$exports = {};
@@ -154,6 +193,41 @@ $16e1dca4664d0b1c$export$cf634262e726cd19 = "spectrum-Popover--dialog_6115b8";
154
193
  $16e1dca4664d0b1c$export$d8b16c5377728262 = "spectrum-Popover--withTip_6115b8";
155
194
 
156
195
 
196
+ /*
197
+ * Copyright 2020 Adobe. All rights reserved.
198
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
199
+ * you may not use this file except in compliance with the License. You may obtain a copy
200
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
201
+ *
202
+ * Unless required by applicable law or agreed to in writing, software distributed under
203
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
204
+ * OF ANY KIND, either express or implied. See the License for the specific language
205
+ * governing permissions and limitations under the License.
206
+ */
207
+
208
+ var $42908e91b4c5f428$exports = {};
209
+
210
+ $parcel$export($42908e91b4c5f428$exports, "spectrum-Underlay", () => $42908e91b4c5f428$export$74470528f463af97, (v) => $42908e91b4c5f428$export$74470528f463af97 = v);
211
+ $parcel$export($42908e91b4c5f428$exports, "is-open", () => $42908e91b4c5f428$export$a9781837241c946d, (v) => $42908e91b4c5f428$export$a9781837241c946d = v);
212
+ $parcel$export($42908e91b4c5f428$exports, "spectrum-Underlay--transparent", () => $42908e91b4c5f428$export$8eb3860104039b44, (v) => $42908e91b4c5f428$export$8eb3860104039b44 = v);
213
+ var $42908e91b4c5f428$export$74470528f463af97;
214
+ var $42908e91b4c5f428$export$a9781837241c946d;
215
+ var $42908e91b4c5f428$export$8eb3860104039b44;
216
+ $42908e91b4c5f428$export$74470528f463af97 = "spectrum-Underlay_eb7615";
217
+ $42908e91b4c5f428$export$a9781837241c946d = "is-open_eb7615";
218
+ $42908e91b4c5f428$export$8eb3860104039b44 = "spectrum-Underlay--transparent_eb7615";
219
+
220
+
221
+ function $b900e75089bdd9cd$export$f360afc887607b02({ isOpen: isOpen , isTransparent: isTransparent }) {
222
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
223
+ className: (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($42908e91b4c5f428$exports))), "spectrum-Underlay", {
224
+ "is-open": isOpen,
225
+ "spectrum-Underlay--transparent": isTransparent
226
+ })
227
+ });
228
+ }
229
+
230
+
157
231
 
158
232
  /**
159
233
  * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
@@ -162,72 +236,75 @@ $16e1dca4664d0b1c$export$d8b16c5377728262 = "spectrum-Popover--withTip_6115b8";
162
236
  * the path always starts at 0 so that it perfectly overlaps the popover's border.
163
237
  * See bottom of file for more explanation.
164
238
  */ let $f02bba55a62f20dd$var$arrowPlacement = {
165
- left: 'right',
166
- right: 'right',
167
- top: 'bottom',
168
- bottom: 'bottom'
239
+ left: "right",
240
+ right: "right",
241
+ top: "bottom",
242
+ bottom: "bottom"
169
243
  };
170
244
  function $f02bba55a62f20dd$var$Popover(props, ref) {
171
- let { children: children , placement: placement , arrowProps: arrowProps , onClose: onClose , shouldCloseOnBlur: shouldCloseOnBlur , hideArrow: hideArrow , isKeyboardDismissDisabled: isKeyboardDismissDisabled , isNonModal: isNonModal , isDismissable: isDismissable = true , ...otherProps } = props;
172
- let domRef = $eLPAa$reactspectrumutils.useDOMRef(ref);
173
- let { styleProps: styleProps } = $eLPAa$reactspectrumutils.useStyleProps(props);
174
- return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($2aebdc186fd41e87$export$c6fdb837b070b4ff, otherProps, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($f02bba55a62f20dd$var$PopoverWrapper, {
175
- ...styleProps,
245
+ let { children: children , state: state , ...otherProps } = props;
246
+ let domRef = (0, $eLPAa$reactspectrumutils.useDOMRef)(ref);
247
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $2aebdc186fd41e87$export$c6fdb837b070b4ff), {
248
+ ...otherProps,
249
+ isOpen: state.isOpen
250
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement($f02bba55a62f20dd$var$PopoverWrapper, {
176
251
  ref: domRef,
177
- placement: placement,
178
- arrowProps: arrowProps,
179
- onClose: onClose,
180
- shouldCloseOnBlur: shouldCloseOnBlur,
181
- isKeyboardDismissDisabled: isKeyboardDismissDisabled,
182
- hideArrow: hideArrow,
183
- isNonModal: isNonModal,
184
- isDismissable: isDismissable
185
- }, children)));
252
+ ...props
253
+ }, children));
186
254
  }
187
- const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ $eLPAa$react.forwardRef((props, ref)=>{
188
- let { children: children , placement: placement = 'bottom' , arrowProps: arrowProps , isOpen: isOpen , hideArrow: hideArrow , shouldCloseOnBlur: // eslint-disable-next-line @typescript-eslint/no-unused-vars
189
- shouldCloseOnBlur , isKeyboardDismissDisabled: // eslint-disable-next-line @typescript-eslint/no-unused-vars
190
- isKeyboardDismissDisabled , isNonModal: isNonModal , isDismissable: // eslint-disable-next-line @typescript-eslint/no-unused-vars
191
- isDismissable , ...otherProps } = props;
192
- let { overlayProps: overlayProps } = $eLPAa$reactariaoverlays.useOverlay({
255
+ const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)((props, ref)=>{
256
+ let { children: children , isOpen: isOpen , hideArrow: hideArrow , isNonModal: isNonModal , state: state } = props;
257
+ let { styleProps: styleProps } = (0, $eLPAa$reactspectrumutils.useStyleProps)(props);
258
+ let { popoverProps: popoverProps , arrowProps: arrowProps , underlayProps: underlayProps , placement: placement } = (0, $eLPAa$reactariaoverlays.usePopover)({
193
259
  ...props,
194
- isDismissable: isDismissable && isOpen
195
- }, ref);
196
- let { modalProps: modalProps } = $eLPAa$reactariaoverlays.useModal({
197
- isDisabled: isNonModal
198
- });
199
- return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
200
- ...$eLPAa$reactariautils.mergeProps(otherProps, overlayProps, modalProps),
260
+ popoverRef: ref,
261
+ maxHeight: null
262
+ }, state);
263
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, ($parcel$interopDefault($eLPAa$react))).Fragment, null, !isNonModal && /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $b900e75089bdd9cd$export$f360afc887607b02), {
264
+ isTransparent: true,
265
+ ...underlayProps,
266
+ isOpen: isOpen
267
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
268
+ ...styleProps,
269
+ ...popoverProps,
270
+ style: {
271
+ ...styleProps.style,
272
+ ...popoverProps.style
273
+ },
201
274
  ref: ref,
202
- className: $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports)), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
203
- 'spectrum-Popover--withTip': !hideArrow,
204
- 'is-open': isOpen
205
- }, $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports)), 'spectrum-Popover', 'react-spectrum-Popover'), otherProps.className),
275
+ className: (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports))), "spectrum-Popover", `spectrum-Popover--${placement}`, {
276
+ "spectrum-Popover--withTip": !hideArrow,
277
+ "is-open": isOpen
278
+ }, (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports))), "spectrum-Popover", "react-spectrum-Popover"), styleProps.className),
206
279
  role: "presentation",
207
280
  "data-testid": "popover"
208
- }, children, hideArrow ? null : /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($f02bba55a62f20dd$var$Arrow, {
281
+ }, !isNonModal && /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.DismissButton), {
282
+ onDismiss: state.close
283
+ }), children, hideArrow ? null : /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement($f02bba55a62f20dd$var$Arrow, {
209
284
  arrowProps: arrowProps,
210
285
  direction: $f02bba55a62f20dd$var$arrowPlacement[placement]
286
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.DismissButton), {
287
+ onDismiss: state.close
211
288
  })));
212
289
  });
213
290
  let $f02bba55a62f20dd$var$ROOT_2 = Math.sqrt(2);
214
291
  function $f02bba55a62f20dd$var$Arrow(props) {
215
- let [size, setSize] = $eLPAa$react.useState(20);
216
- let [borderWidth, setBorderWidth] = $eLPAa$react.useState(1);
217
- let ref = $eLPAa$react.useRef();
292
+ let [size, setSize] = (0, $eLPAa$react.useState)(20);
293
+ let [borderWidth, setBorderWidth] = (0, $eLPAa$react.useState)(1);
294
+ let ref = (0, $eLPAa$react.useRef)();
218
295
  // get the css value for the tip size and divide it by 2 for this arrow implementation
219
- $eLPAa$reactariautils.useLayoutEffect(()=>{
296
+ (0, $eLPAa$reactariautils.useLayoutEffect)(()=>{
220
297
  if (ref.current) {
221
- let spectrumTipWidth = window.getComputedStyle(ref.current).getPropertyValue('--spectrum-popover-tip-size');
222
- if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
223
- let spectrumBorderWidth = window.getComputedStyle(ref.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
224
- if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
298
+ let spectrumTipWidth = window.getComputedStyle(ref.current).getPropertyValue("--spectrum-popover-tip-size");
299
+ if (spectrumTipWidth !== "") setSize(parseInt(spectrumTipWidth, 10) / 2);
300
+ let spectrumBorderWidth = window.getComputedStyle(ref.current).getPropertyValue("--spectrum-popover-tip-borderWidth");
301
+ if (spectrumBorderWidth !== "") setBorderWidth(parseInt(spectrumBorderWidth, 10));
225
302
  }
226
303
  }, [
227
304
  ref
228
305
  ]);
229
- let landscape = props.direction === 'top' || props.direction === 'bottom';
230
- let mirror = props.direction === 'left' || props.direction === 'top';
306
+ let landscape = props.direction === "top" || props.direction === "bottom";
307
+ let mirror = props.direction === "left" || props.direction === "top";
231
308
  let borderDiagonal = borderWidth * $f02bba55a62f20dd$var$ROOT_2;
232
309
  let halfBorderDiagonal = borderDiagonal / 2;
233
310
  let secondary = 2 * size + 2 * borderDiagonal;
@@ -238,44 +315,66 @@ function $f02bba55a62f20dd$var$Arrow(props) {
238
315
  let secondaryMiddle = secondary / 2;
239
316
  let secondaryEnd = secondary - halfBorderDiagonal;
240
317
  let pathData = landscape ? [
241
- 'M',
318
+ "M",
242
319
  secondaryStart,
243
320
  primaryStart,
244
- 'L',
321
+ "L",
245
322
  secondaryMiddle,
246
323
  primaryEnd,
247
- 'L',
324
+ "L",
248
325
  secondaryEnd,
249
326
  primaryStart
250
327
  ] : [
251
- 'M',
328
+ "M",
252
329
  primaryStart,
253
330
  secondaryStart,
254
- 'L',
331
+ "L",
255
332
  primaryEnd,
256
333
  secondaryMiddle,
257
- 'L',
334
+ "L",
258
335
  primaryStart,
259
336
  secondaryEnd
260
337
  ];
261
338
  let arrowProps = props.arrowProps;
262
- /* use ceil because the svg needs to always accomodate the path inside it */ return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("svg", {
339
+ /* use ceil because the svg needs to always accomodate the path inside it */ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("svg", {
263
340
  xmlns: "http://www.w3.org/svg/2000",
264
341
  width: Math.ceil(landscape ? secondary : primary),
265
342
  height: Math.ceil(landscape ? primary : secondary),
266
343
  style: props.style,
267
- className: $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports)), 'spectrum-Popover-tip'),
344
+ className: (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports))), "spectrum-Popover-tip"),
268
345
  ref: ref,
269
346
  ...arrowProps
270
- }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("path", {
271
- className: $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports)), 'spectrum-Popover-tip-triangle'),
272
- d: pathData.join(' ')
273
- })));
347
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("path", {
348
+ className: (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports))), "spectrum-Popover-tip-triangle"),
349
+ d: pathData.join(" ")
350
+ }));
274
351
  }
275
- let $f02bba55a62f20dd$export$5b6b19405a83ff9d = /*#__PURE__*/ $eLPAa$react.forwardRef($f02bba55a62f20dd$var$Popover);
276
-
277
-
278
-
352
+ let $f02bba55a62f20dd$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)($f02bba55a62f20dd$var$Popover);
353
+ /**
354
+ * More explanation on popover tips.
355
+ * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.
356
+ * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.
357
+ * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.
358
+ * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.
359
+ * - I tried getting the client bounding box and setting the svg to that partial pixel value
360
+ * This didn't work because again the issue was inside the svg
361
+ * - I didn't try drawing the svg backwards
362
+ * This could still be tried
363
+ * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded
364
+ * This seems to have done the trick.
365
+ */
366
+
367
+ /*
368
+ * Copyright 2020 Adobe. All rights reserved.
369
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
370
+ * you may not use this file except in compliance with the License. You may obtain a copy
371
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
372
+ *
373
+ * Unless required by applicable law or agreed to in writing, software distributed under
374
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
375
+ * OF ANY KIND, either express or implied. See the License for the specific language
376
+ * governing permissions and limitations under the License.
377
+ */
279
378
 
280
379
  var $86571b803f942ff3$exports = {};
281
380
 
@@ -304,73 +403,64 @@ $86571b803f942ff3$export$175dd699720b5fb7 = "spectrum-Modal--fullscreenTakeover_
304
403
 
305
404
 
306
405
 
307
- var $42908e91b4c5f428$exports = {};
308
-
309
- $parcel$export($42908e91b4c5f428$exports, "spectrum-Underlay", () => $42908e91b4c5f428$export$74470528f463af97, (v) => $42908e91b4c5f428$export$74470528f463af97 = v);
310
- $parcel$export($42908e91b4c5f428$exports, "is-open", () => $42908e91b4c5f428$export$a9781837241c946d, (v) => $42908e91b4c5f428$export$a9781837241c946d = v);
311
- var $42908e91b4c5f428$export$74470528f463af97;
312
- var $42908e91b4c5f428$export$a9781837241c946d;
313
- $42908e91b4c5f428$export$74470528f463af97 = "spectrum-Underlay_eb7615";
314
- $42908e91b4c5f428$export$a9781837241c946d = "is-open_eb7615";
315
-
316
-
317
- function $b900e75089bdd9cd$export$f360afc887607b02({ isOpen: isOpen }) {
318
- return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
319
- className: $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($42908e91b4c5f428$exports)), 'spectrum-Underlay', {
320
- 'is-open': isOpen
321
- })
322
- }));
323
- }
324
-
325
-
326
-
327
406
  function $fc75a6aa7a2b905b$var$Modal(props, ref) {
328
- let { children: children , onClose: onClose , type: type , ...otherProps } = props;
329
- let domRef = $eLPAa$reactspectrumutils.useDOMRef(ref);
330
- let { styleProps: styleProps } = $eLPAa$reactspectrumutils.useStyleProps(props);
331
- let { overlayProps: overlayProps , underlayProps: underlayProps } = $eLPAa$reactariaoverlays.useOverlay(props, domRef);
332
- return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($2aebdc186fd41e87$export$c6fdb837b070b4ff, otherProps, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($b900e75089bdd9cd$export$f360afc887607b02, underlayProps), /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($fc75a6aa7a2b905b$var$ModalWrapper, {
333
- ...styleProps,
334
- onClose: onClose,
335
- type: type,
336
- ref: domRef,
337
- overlayProps: overlayProps
338
- }, children)));
407
+ let { children: children , state: state , ...otherProps } = props;
408
+ let domRef = (0, $eLPAa$reactspectrumutils.useDOMRef)(ref);
409
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $2aebdc186fd41e87$export$c6fdb837b070b4ff), {
410
+ ...otherProps,
411
+ isOpen: state.isOpen
412
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement($fc75a6aa7a2b905b$var$ModalWrapper, {
413
+ ...props,
414
+ ref: domRef
415
+ }, children));
339
416
  }
340
417
  let $fc75a6aa7a2b905b$var$typeMap = {
341
- fullscreen: 'fullscreen',
342
- fullscreenTakeover: 'fullscreenTakeover'
418
+ fullscreen: "fullscreen",
419
+ fullscreenTakeover: "fullscreenTakeover"
343
420
  };
344
- let $fc75a6aa7a2b905b$var$ModalWrapper = /*#__PURE__*/ $eLPAa$react.forwardRef(function(props, ref) {
345
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
346
- let { children: children , isOpen: isOpen , type: type , overlayProps: overlayProps , ...otherProps } = props;
421
+ let $fc75a6aa7a2b905b$var$ModalWrapper = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)(function(props, ref) {
422
+ let { type: type , children: children , state: state , isOpen: isOpen } = props;
347
423
  let typeVariant = $fc75a6aa7a2b905b$var$typeMap[type];
348
- $eLPAa$reactariaoverlays.usePreventScroll();
349
- let { modalProps: modalProps } = $eLPAa$reactariaoverlays.useModal();
350
- let wrapperClassName = $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($86571b803f942ff3$exports)), 'spectrum-Modal-wrapper', $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports)), 'spectrum-Modal-wrapper', 'react-spectrum-Modal-wrapper'));
351
- let modalClassName = $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($86571b803f942ff3$exports)), 'spectrum-Modal', {
352
- 'is-open': isOpen
353
- }, $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports)), 'spectrum-Modal', 'react-spectrum-Modal'), {
424
+ let { styleProps: styleProps } = (0, $eLPAa$reactspectrumutils.useStyleProps)(props);
425
+ let { modalProps: modalProps , underlayProps: underlayProps } = (0, $eLPAa$reactariaoverlays.useModalOverlay)(props, state, ref);
426
+ let wrapperClassName = (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($86571b803f942ff3$exports))), "spectrum-Modal-wrapper", (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports))), "spectrum-Modal-wrapper", "react-spectrum-Modal-wrapper"));
427
+ let modalClassName = (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($86571b803f942ff3$exports))), "spectrum-Modal", {
428
+ "is-open": isOpen
429
+ }, (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports))), "spectrum-Modal", "react-spectrum-Modal"), {
354
430
  [`spectrum-Modal--${typeVariant}`]: typeVariant
355
- }, otherProps.className);
356
- let viewport = $eLPAa$reactariautils.useViewportSize();
431
+ }, styleProps.className);
432
+ let viewport = (0, $eLPAa$reactariautils.useViewportSize)();
357
433
  let style = {
358
- '--spectrum-visual-viewport-height': viewport.height + 'px'
434
+ "--spectrum-visual-viewport-height": viewport.height + "px"
359
435
  };
360
- return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
436
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, ($parcel$interopDefault($eLPAa$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $b900e75089bdd9cd$export$f360afc887607b02), {
437
+ ...underlayProps,
438
+ isOpen: isOpen
439
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
361
440
  className: wrapperClassName,
362
441
  style: style
363
- }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
364
- ...$eLPAa$reactariautils.mergeProps(otherProps, overlayProps, modalProps),
442
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
443
+ ...styleProps,
444
+ ...modalProps,
365
445
  ref: ref,
366
446
  className: modalClassName,
367
447
  "data-testid": "modal"
368
448
  }, children)));
369
449
  });
370
- let $fc75a6aa7a2b905b$export$2b77a92f1a5ad772 = /*#__PURE__*/ $eLPAa$react.forwardRef($fc75a6aa7a2b905b$var$Modal);
371
-
450
+ let $fc75a6aa7a2b905b$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)($fc75a6aa7a2b905b$var$Modal);
372
451
 
373
452
 
453
+ /*
454
+ * Copyright 2020 Adobe. All rights reserved.
455
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
456
+ * you may not use this file except in compliance with the License. You may obtain a copy
457
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
458
+ *
459
+ * Unless required by applicable law or agreed to in writing, software distributed under
460
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
461
+ * OF ANY KIND, either express or implied. See the License for the specific language
462
+ * governing permissions and limitations under the License.
463
+ */
374
464
 
375
465
 
376
466
 
@@ -394,28 +484,23 @@ $3ba16c5c57f2a636$export$79bfb05e59a300b = "spectrum-Tray--fixedHeight_23bf66";
394
484
 
395
485
 
396
486
  function $6b386deda21be662$var$Tray(props, ref) {
397
- let { children: children , onClose: onClose , isFixedHeight: isFixedHeight , isNonModal: isNonModal , ...otherProps } = props;
398
- let domRef = $eLPAa$reactspectrumutils.useDOMRef(ref);
399
- let { styleProps: styleProps } = $eLPAa$reactspectrumutils.useStyleProps(props);
400
- let { overlayProps: overlayProps , underlayProps: underlayProps } = $eLPAa$reactariaoverlays.useOverlay({
487
+ let { children: children , state: state , ...otherProps } = props;
488
+ let domRef = (0, $eLPAa$reactspectrumutils.useDOMRef)(ref);
489
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $2aebdc186fd41e87$export$c6fdb837b070b4ff), {
490
+ ...otherProps,
491
+ isOpen: state.isOpen
492
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement($6b386deda21be662$var$TrayWrapper, {
401
493
  ...props,
402
- isDismissable: true
403
- }, domRef);
404
- return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($2aebdc186fd41e87$export$c6fdb837b070b4ff, otherProps, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($b900e75089bdd9cd$export$f360afc887607b02, underlayProps), /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($6b386deda21be662$var$TrayWrapper, {
405
- ...styleProps,
406
- onClose: onClose,
407
- ref: domRef,
408
- overlayProps: overlayProps,
409
- isFixedHeight: isFixedHeight,
410
- isNonModal: isNonModal
411
- }, children)));
494
+ ref: domRef
495
+ }, children));
412
496
  }
413
- let $6b386deda21be662$var$TrayWrapper = /*#__PURE__*/ $eLPAa$react.forwardRef(function(props, ref) {
414
- let { children: children , isOpen: isOpen , isFixedHeight: isFixedHeight , isNonModal: isNonModal , overlayProps: overlayProps , ...otherProps } = props;
415
- $eLPAa$reactariaoverlays.usePreventScroll();
416
- let { modalProps: modalProps } = $eLPAa$reactariaoverlays.useModal({
417
- isDisabled: isNonModal
418
- });
497
+ let $6b386deda21be662$var$TrayWrapper = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)(function(props, ref) {
498
+ let { children: children , isOpen: isOpen , isFixedHeight: isFixedHeight , state: state } = props;
499
+ let { styleProps: styleProps } = (0, $eLPAa$reactspectrumutils.useStyleProps)(props);
500
+ let { modalProps: modalProps , underlayProps: underlayProps } = (0, $eLPAa$reactariaoverlays.useModalOverlay)({
501
+ ...props,
502
+ isDismissable: true
503
+ }, state, ref);
419
504
  // We need to measure the window's height in JS rather than using percentages in CSS
420
505
  // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
421
506
  // does not work properly because there is nothing to base the percentage on.
@@ -423,28 +508,34 @@ let $6b386deda21be662$var$TrayWrapper = /*#__PURE__*/ $eLPAa$react.forwardRef(fu
423
508
  // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
424
509
  // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
425
510
  // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
426
- let viewport = $eLPAa$reactariautils.useViewportSize();
511
+ let viewport = (0, $eLPAa$reactariautils.useViewportSize)();
427
512
  let wrapperStyle = {
428
- '--spectrum-visual-viewport-height': viewport.height + 'px'
513
+ "--spectrum-visual-viewport-height": viewport.height + "px"
429
514
  };
430
- let wrapperClassName = $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($3ba16c5c57f2a636$exports)), 'spectrum-Tray-wrapper');
431
- let className = $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($3ba16c5c57f2a636$exports)), 'spectrum-Tray', {
432
- 'is-open': isOpen,
433
- 'spectrum-Tray--fixedHeight': isFixedHeight
434
- }, $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports)), 'spectrum-Tray', 'react-spectrum-Tray'), otherProps.className);
435
- let domProps = $eLPAa$reactariautils.mergeProps(otherProps, overlayProps);
436
- return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
515
+ let wrapperClassName = (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3ba16c5c57f2a636$exports))), "spectrum-Tray-wrapper");
516
+ let className = (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3ba16c5c57f2a636$exports))), "spectrum-Tray", {
517
+ "is-open": isOpen,
518
+ "spectrum-Tray--fixedHeight": isFixedHeight
519
+ }, (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports))), "spectrum-Tray", "react-spectrum-Tray"), styleProps.className);
520
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, ($parcel$interopDefault($eLPAa$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $b900e75089bdd9cd$export$f360afc887607b02), {
521
+ ...underlayProps,
522
+ isOpen: isOpen
523
+ }), /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
437
524
  className: wrapperClassName,
438
525
  style: wrapperStyle
439
- }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
440
- ...domProps,
526
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
527
+ ...styleProps,
441
528
  ...modalProps,
442
529
  className: className,
443
530
  ref: ref,
444
531
  "data-testid": "tray"
445
- }, children)));
532
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.DismissButton), {
533
+ onDismiss: state.close
534
+ }), children, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.DismissButton), {
535
+ onDismiss: state.close
536
+ }))));
446
537
  });
447
- let $6b386deda21be662$export$4589ed81930b555c = /*#__PURE__*/ $eLPAa$react.forwardRef($6b386deda21be662$var$Tray);
538
+ let $6b386deda21be662$export$4589ed81930b555c = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)($6b386deda21be662$var$Tray);
448
539
 
449
540
 
450
541