@react-spectrum/overlays 5.9.2 → 5.10.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 (82) hide show
  1. package/dist/import.mjs +6 -6
  2. package/dist/main.js +10 -10
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +6 -6
  5. package/dist/module.js.map +1 -1
  6. package/dist/types/src/index.d.ts +6 -0
  7. package/package.json +13 -33
  8. package/src/index.ts +7 -5
  9. package/dist/Modal.main.js +0 -93
  10. package/dist/Modal.main.js.map +0 -1
  11. package/dist/Modal.mjs +0 -88
  12. package/dist/Modal.module.js +0 -88
  13. package/dist/Modal.module.js.map +0 -1
  14. package/dist/OpenTransition.main.js +0 -44
  15. package/dist/OpenTransition.main.js.map +0 -1
  16. package/dist/OpenTransition.mjs +0 -35
  17. package/dist/OpenTransition.module.js +0 -35
  18. package/dist/OpenTransition.module.js.map +0 -1
  19. package/dist/Overlay.main.js +0 -75
  20. package/dist/Overlay.main.js.map +0 -1
  21. package/dist/Overlay.mjs +0 -66
  22. package/dist/Overlay.module.js +0 -66
  23. package/dist/Overlay.module.js.map +0 -1
  24. package/dist/Popover.main.js +0 -206
  25. package/dist/Popover.main.js.map +0 -1
  26. package/dist/Popover.mjs +0 -201
  27. package/dist/Popover.module.js +0 -201
  28. package/dist/Popover.module.js.map +0 -1
  29. package/dist/Tray.main.js +0 -105
  30. package/dist/Tray.main.js.map +0 -1
  31. package/dist/Tray.mjs +0 -100
  32. package/dist/Tray.module.js +0 -100
  33. package/dist/Tray.module.js.map +0 -1
  34. package/dist/Underlay.main.js +0 -54
  35. package/dist/Underlay.main.js.map +0 -1
  36. package/dist/Underlay.mjs +0 -49
  37. package/dist/Underlay.module.js +0 -49
  38. package/dist/Underlay.module.js.map +0 -1
  39. package/dist/modal_vars_css.main.js +0 -59
  40. package/dist/modal_vars_css.main.js.map +0 -1
  41. package/dist/modal_vars_css.mjs +0 -61
  42. package/dist/modal_vars_css.module.js +0 -61
  43. package/dist/modal_vars_css.module.js.map +0 -1
  44. package/dist/overlays.c765f49e.css +0 -131
  45. package/dist/overlays.c765f49e.css.map +0 -1
  46. package/dist/overlays.ec5cd7e2.css +0 -210
  47. package/dist/overlays.ec5cd7e2.css.map +0 -1
  48. package/dist/overlays.ef39a1b9.css +0 -197
  49. package/dist/overlays.ef39a1b9.css.map +0 -1
  50. package/dist/overlays.f1e5a60e.css +0 -184
  51. package/dist/overlays.f1e5a60e.css.map +0 -1
  52. package/dist/overlays.f8d97b78.css +0 -12
  53. package/dist/overlays.f8d97b78.css.map +0 -1
  54. package/dist/overlays_css.main.js +0 -35
  55. package/dist/overlays_css.main.js.map +0 -1
  56. package/dist/overlays_css.mjs +0 -37
  57. package/dist/overlays_css.module.js +0 -37
  58. package/dist/overlays_css.module.js.map +0 -1
  59. package/dist/popover_vars_css.main.js +0 -83
  60. package/dist/popover_vars_css.main.js.map +0 -1
  61. package/dist/popover_vars_css.mjs +0 -85
  62. package/dist/popover_vars_css.module.js +0 -85
  63. package/dist/popover_vars_css.module.js.map +0 -1
  64. package/dist/tray_vars_css.main.js +0 -53
  65. package/dist/tray_vars_css.main.js.map +0 -1
  66. package/dist/tray_vars_css.mjs +0 -55
  67. package/dist/tray_vars_css.module.js +0 -55
  68. package/dist/tray_vars_css.module.js.map +0 -1
  69. package/dist/types.d.ts +0 -51
  70. package/dist/types.d.ts.map +0 -1
  71. package/dist/underlay_vars_css.main.js +0 -50
  72. package/dist/underlay_vars_css.main.js.map +0 -1
  73. package/dist/underlay_vars_css.mjs +0 -52
  74. package/dist/underlay_vars_css.module.js +0 -52
  75. package/dist/underlay_vars_css.module.js.map +0 -1
  76. package/src/Modal.tsx +0 -109
  77. package/src/OpenTransition.tsx +0 -47
  78. package/src/Overlay.tsx +0 -77
  79. package/src/Popover.tsx +0 -253
  80. package/src/Tray.tsx +0 -120
  81. package/src/Underlay.tsx +0 -43
  82. package/src/overlays.css +0 -32
@@ -1 +0,0 @@
1
- {"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAKD,MAAM,oCAAc;IAClB,UAAU;IACV,SAAS;AACX;AAeO,SAAS,0CACd,KAAU;QAIkC;IAG5C,qBACE,gCAAC,CAAA,GAAA,iBAAS;QAAE,SAAS;YAAC,OAAO;YAAG,MAAM;QAAG;QAAI,GAAG,KAAK;OAClD,CAAC,QAAU,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,QAAQ,EAAE,CAAA,QAAS,uBAAS,CAAA,GAAA,YAAI,EAAE,YAAY,CAAC,OAAO;gBAAC,QAAQ,CAAC,CAAC,iCAAW,CAAC,MAAM;YAAA;AAG9H","sources":["packages/@react-spectrum/overlays/src/OpenTransition.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {JSX, JSXElementConstructor, ReactElement} from 'react';\nimport {Transition} from 'react-transition-group';\n\nconst OPEN_STATES = {\n entering: false,\n entered: true\n};\n\n/**\n * Timeout issues adding css animations to enter may be related to\n * https://github.com/reactjs/react-transition-group/issues/189 or\n * https://github.com/reactjs/react-transition-group/issues/22\n * my VM isn't good enough to debug accurately and get a better answer.\n *\n * As a result, use enter 0 so that is-open is applied once entered\n * it doesn't matter if we know when the css-animation is done on entering\n * for exiting though, give time for the css-animation to play\n * before removing from the DOM\n * **note** hitting esc bypasses exit animation for anyone testing.\n */\n\nexport function OpenTransition(\n props: any\n): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[] {\n // Do not apply any transition if in chromatic.\n if (typeof process !== 'undefined' && process.env.CHROMATIC) {\n return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));\n }\n\n return (\n <Transition timeout={{enter: 0, exit: 350}} {...props}>\n {(state) => React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: !!OPEN_STATES[state]}))}\n </Transition>\n );\n}\n"],"names":[],"version":3,"file":"OpenTransition.module.js.map"}
@@ -1,75 +0,0 @@
1
- var $13f51cdc44d228b9$exports = require("./OpenTransition.main.js");
2
- var $5XfZ1$reactspectrumprovider = require("@react-spectrum/provider");
3
- var $5XfZ1$react = require("react");
4
- var $5XfZ1$reactariaoverlays = require("@react-aria/overlays");
5
-
6
-
7
- function $parcel$interopDefault(a) {
8
- return a && a.__esModule ? a.default : a;
9
- }
10
-
11
- function $parcel$export(e, n, v, s) {
12
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
13
- }
14
-
15
- $parcel$export(module.exports, "Overlay", () => $2aebdc186fd41e87$export$c6fdb837b070b4ff);
16
- /*
17
- * Copyright 2020 Adobe. All rights reserved.
18
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
19
- * you may not use this file except in compliance with the License. You may obtain a copy
20
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
21
- *
22
- * Unless required by applicable law or agreed to in writing, software distributed under
23
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
24
- * OF ANY KIND, either express or implied. See the License for the specific language
25
- * governing permissions and limitations under the License.
26
- */
27
-
28
-
29
-
30
- const $2aebdc186fd41e87$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, ($parcel$interopDefault($5XfZ1$react))).forwardRef(function Overlay(props, ref) {
31
- let { children: children, isOpen: isOpen, disableFocusManagement: disableFocusManagement, shouldContainFocus: shouldContainFocus, container: container, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, nodeRef: nodeRef } = props;
32
- let [exited, setExited] = (0, $5XfZ1$react.useState)(!isOpen);
33
- let handleEntered = (0, $5XfZ1$react.useCallback)(()=>{
34
- setExited(false);
35
- if (onEntered) onEntered();
36
- }, [
37
- onEntered
38
- ]);
39
- let handleExited = (0, $5XfZ1$react.useCallback)(()=>{
40
- setExited(true);
41
- if (onExited) onExited();
42
- }, [
43
- onExited
44
- ]);
45
- // Don't un-render the overlay while it's transitioning out.
46
- let mountOverlay = isOpen || !exited;
47
- if (!mountOverlay) // Don't bother showing anything if we don't have to.
48
- return null;
49
- return /*#__PURE__*/ (0, ($parcel$interopDefault($5XfZ1$react))).createElement((0, $5XfZ1$reactariaoverlays.Overlay), {
50
- portalContainer: container,
51
- disableFocusManagement: disableFocusManagement,
52
- shouldContainFocus: shouldContainFocus,
53
- isExiting: !isOpen
54
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($5XfZ1$react))).createElement((0, $5XfZ1$reactspectrumprovider.Provider), {
55
- ref: ref,
56
- UNSAFE_style: {
57
- background: 'transparent',
58
- isolation: 'isolate'
59
- },
60
- isDisabled: false
61
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($5XfZ1$react))).createElement((0, $13f51cdc44d228b9$exports.OpenTransition), {
62
- in: isOpen,
63
- appear: true,
64
- onExit: onExit,
65
- onExiting: onExiting,
66
- onExited: handleExited,
67
- onEnter: onEnter,
68
- onEntering: onEntering,
69
- onEntered: handleEntered,
70
- nodeRef: nodeRef
71
- }, children)));
72
- });
73
-
74
-
75
- //# sourceMappingURL=Overlay.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AASM,MAAM,0DAAU,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,QAAQ,KAAmB,EAAE,GAA2B;IACvG,IAAI,YACF,QAAQ,UACR,MAAM,0BACN,sBAAsB,sBACtB,kBAAkB,aAClB,SAAS,WACT,OAAO,cACP,UAAU,aACV,SAAS,UACT,MAAM,aACN,SAAS,YACT,QAAQ,WACR,OAAO,EACR,GAAG;IAEJ,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,qBAAO,EAAE,CAAC;IAEpC,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE;QAC9B,UAAU;QACV,IAAI,WACF;IAEJ,GAAG;QAAC;KAAU;IAEd,IAAI,eAAe,CAAA,GAAA,wBAAU,EAAE;QAC7B,UAAU;QACV,IAAI,UACF;IAEJ,GAAG;QAAC;KAAS;IAEb,4DAA4D;IAC5D,IAAI,eAAe,UAAU,CAAC;IAC9B,IAAI,CAAC,cACH,qDAAqD;IACrD,OAAO;IAGT,qBACE,0DAAC,CAAA,GAAA,gCAAe;QAAE,iBAAiB;QAAW,wBAAwB;QAAwB,oBAAoB;QAAoB,WAAW,CAAC;qBAChJ,0DAAC,CAAA,GAAA,qCAAO;QAAE,KAAK;QAAK,cAAc;YAAC,YAAY;YAAe,WAAW;QAAS;QAAG,YAAY;qBAC/F,0DAAC,CAAA,GAAA,wCAAa;QACZ,IAAI;QACJ,QAAA;QACA,QAAQ;QACR,WAAW;QACX,UAAU;QACV,SAAS;QACT,YAAY;QACZ,WAAW;QACX,SAAS;OACR;AAKX","sources":["packages/@react-spectrum/overlays/src/Overlay.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {OpenTransition} from './OpenTransition';\nimport {OverlayProps} from '@react-types/overlays';\nimport {Provider} from '@react-spectrum/provider';\nimport React, {useCallback, useState} from 'react';\nimport {Overlay as ReactAriaOverlay} from '@react-aria/overlays';\n\nexport const Overlay = React.forwardRef(function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n isOpen,\n disableFocusManagement,\n shouldContainFocus,\n container,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n nodeRef\n } = props;\n\n let [exited, setExited] = useState(!isOpen);\n\n let handleEntered = useCallback(() => {\n setExited(false);\n if (onEntered) {\n onEntered();\n }\n }, [onEntered]);\n\n let handleExited = useCallback(() => {\n setExited(true);\n if (onExited) {\n onExited();\n }\n }, [onExited]);\n\n // Don't un-render the overlay while it's transitioning out.\n let mountOverlay = isOpen || !exited;\n if (!mountOverlay) {\n // Don't bother showing anything if we don't have to.\n return null;\n }\n\n return (\n <ReactAriaOverlay portalContainer={container} disableFocusManagement={disableFocusManagement} shouldContainFocus={shouldContainFocus} isExiting={!isOpen}>\n <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}} isDisabled={false}>\n <OpenTransition\n in={isOpen}\n appear\n onExit={onExit}\n onExiting={onExiting}\n onExited={handleExited}\n onEnter={onEnter}\n onEntering={onEntering}\n onEntered={handleEntered}\n nodeRef={nodeRef}>\n {children}\n </OpenTransition>\n </Provider>\n </ReactAriaOverlay>\n );\n});\n"],"names":[],"version":3,"file":"Overlay.main.js.map"}
package/dist/Overlay.mjs DELETED
@@ -1,66 +0,0 @@
1
- import {OpenTransition as $bc765a7a041310da$export$b847a40ee92eff38} from "./OpenTransition.mjs";
2
- import {Provider as $eIXW5$Provider} from "@react-spectrum/provider";
3
- import $eIXW5$react, {useState as $eIXW5$useState, useCallback as $eIXW5$useCallback} from "react";
4
- import {Overlay as $eIXW5$Overlay} from "@react-aria/overlays";
5
-
6
- /*
7
- * Copyright 2020 Adobe. All rights reserved.
8
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
9
- * you may not use this file except in compliance with the License. You may obtain a copy
10
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software distributed under
13
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
14
- * OF ANY KIND, either express or implied. See the License for the specific language
15
- * governing permissions and limitations under the License.
16
- */
17
-
18
-
19
-
20
- const $70305dc5fb729c3b$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, $eIXW5$react).forwardRef(function Overlay(props, ref) {
21
- let { children: children, isOpen: isOpen, disableFocusManagement: disableFocusManagement, shouldContainFocus: shouldContainFocus, container: container, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, nodeRef: nodeRef } = props;
22
- let [exited, setExited] = (0, $eIXW5$useState)(!isOpen);
23
- let handleEntered = (0, $eIXW5$useCallback)(()=>{
24
- setExited(false);
25
- if (onEntered) onEntered();
26
- }, [
27
- onEntered
28
- ]);
29
- let handleExited = (0, $eIXW5$useCallback)(()=>{
30
- setExited(true);
31
- if (onExited) onExited();
32
- }, [
33
- onExited
34
- ]);
35
- // Don't un-render the overlay while it's transitioning out.
36
- let mountOverlay = isOpen || !exited;
37
- if (!mountOverlay) // Don't bother showing anything if we don't have to.
38
- return null;
39
- return /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $eIXW5$Overlay), {
40
- portalContainer: container,
41
- disableFocusManagement: disableFocusManagement,
42
- shouldContainFocus: shouldContainFocus,
43
- isExiting: !isOpen
44
- }, /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $eIXW5$Provider), {
45
- ref: ref,
46
- UNSAFE_style: {
47
- background: 'transparent',
48
- isolation: 'isolate'
49
- },
50
- isDisabled: false
51
- }, /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $bc765a7a041310da$export$b847a40ee92eff38), {
52
- in: isOpen,
53
- appear: true,
54
- onExit: onExit,
55
- onExiting: onExiting,
56
- onExited: handleExited,
57
- onEnter: onEnter,
58
- onEntering: onEntering,
59
- onEntered: handleEntered,
60
- nodeRef: nodeRef
61
- }, children)));
62
- });
63
-
64
-
65
- export {$70305dc5fb729c3b$export$c6fdb837b070b4ff as Overlay};
66
- //# sourceMappingURL=Overlay.module.js.map
@@ -1,66 +0,0 @@
1
- import {OpenTransition as $bc765a7a041310da$export$b847a40ee92eff38} from "./OpenTransition.module.js";
2
- import {Provider as $eIXW5$Provider} from "@react-spectrum/provider";
3
- import $eIXW5$react, {useState as $eIXW5$useState, useCallback as $eIXW5$useCallback} from "react";
4
- import {Overlay as $eIXW5$Overlay} from "@react-aria/overlays";
5
-
6
- /*
7
- * Copyright 2020 Adobe. All rights reserved.
8
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
9
- * you may not use this file except in compliance with the License. You may obtain a copy
10
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software distributed under
13
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
14
- * OF ANY KIND, either express or implied. See the License for the specific language
15
- * governing permissions and limitations under the License.
16
- */
17
-
18
-
19
-
20
- const $70305dc5fb729c3b$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, $eIXW5$react).forwardRef(function Overlay(props, ref) {
21
- let { children: children, isOpen: isOpen, disableFocusManagement: disableFocusManagement, shouldContainFocus: shouldContainFocus, container: container, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, nodeRef: nodeRef } = props;
22
- let [exited, setExited] = (0, $eIXW5$useState)(!isOpen);
23
- let handleEntered = (0, $eIXW5$useCallback)(()=>{
24
- setExited(false);
25
- if (onEntered) onEntered();
26
- }, [
27
- onEntered
28
- ]);
29
- let handleExited = (0, $eIXW5$useCallback)(()=>{
30
- setExited(true);
31
- if (onExited) onExited();
32
- }, [
33
- onExited
34
- ]);
35
- // Don't un-render the overlay while it's transitioning out.
36
- let mountOverlay = isOpen || !exited;
37
- if (!mountOverlay) // Don't bother showing anything if we don't have to.
38
- return null;
39
- return /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $eIXW5$Overlay), {
40
- portalContainer: container,
41
- disableFocusManagement: disableFocusManagement,
42
- shouldContainFocus: shouldContainFocus,
43
- isExiting: !isOpen
44
- }, /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $eIXW5$Provider), {
45
- ref: ref,
46
- UNSAFE_style: {
47
- background: 'transparent',
48
- isolation: 'isolate'
49
- },
50
- isDisabled: false
51
- }, /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $bc765a7a041310da$export$b847a40ee92eff38), {
52
- in: isOpen,
53
- appear: true,
54
- onExit: onExit,
55
- onExiting: onExiting,
56
- onExited: handleExited,
57
- onEnter: onEnter,
58
- onEntering: onEntering,
59
- onEntered: handleEntered,
60
- nodeRef: nodeRef
61
- }, children)));
62
- });
63
-
64
-
65
- export {$70305dc5fb729c3b$export$c6fdb837b070b4ff as Overlay};
66
- //# sourceMappingURL=Overlay.module.js.map
@@ -1 +0,0 @@
1
- {"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AASM,MAAM,0DAAU,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,QAAQ,KAAmB,EAAE,GAA2B;IACvG,IAAI,YACF,QAAQ,UACR,MAAM,0BACN,sBAAsB,sBACtB,kBAAkB,aAClB,SAAS,WACT,OAAO,cACP,UAAU,aACV,SAAS,UACT,MAAM,aACN,SAAS,YACT,QAAQ,WACR,OAAO,EACR,GAAG;IAEJ,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,eAAO,EAAE,CAAC;IAEpC,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE;QAC9B,UAAU;QACV,IAAI,WACF;IAEJ,GAAG;QAAC;KAAU;IAEd,IAAI,eAAe,CAAA,GAAA,kBAAU,EAAE;QAC7B,UAAU;QACV,IAAI,UACF;IAEJ,GAAG;QAAC;KAAS;IAEb,4DAA4D;IAC5D,IAAI,eAAe,UAAU,CAAC;IAC9B,IAAI,CAAC,cACH,qDAAqD;IACrD,OAAO;IAGT,qBACE,gCAAC,CAAA,GAAA,cAAe;QAAE,iBAAiB;QAAW,wBAAwB;QAAwB,oBAAoB;QAAoB,WAAW,CAAC;qBAChJ,gCAAC,CAAA,GAAA,eAAO;QAAE,KAAK;QAAK,cAAc;YAAC,YAAY;YAAe,WAAW;QAAS;QAAG,YAAY;qBAC/F,gCAAC,CAAA,GAAA,yCAAa;QACZ,IAAI;QACJ,QAAA;QACA,QAAQ;QACR,WAAW;QACX,UAAU;QACV,SAAS;QACT,YAAY;QACZ,WAAW;QACX,SAAS;OACR;AAKX","sources":["packages/@react-spectrum/overlays/src/Overlay.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {OpenTransition} from './OpenTransition';\nimport {OverlayProps} from '@react-types/overlays';\nimport {Provider} from '@react-spectrum/provider';\nimport React, {useCallback, useState} from 'react';\nimport {Overlay as ReactAriaOverlay} from '@react-aria/overlays';\n\nexport const Overlay = React.forwardRef(function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n isOpen,\n disableFocusManagement,\n shouldContainFocus,\n container,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n nodeRef\n } = props;\n\n let [exited, setExited] = useState(!isOpen);\n\n let handleEntered = useCallback(() => {\n setExited(false);\n if (onEntered) {\n onEntered();\n }\n }, [onEntered]);\n\n let handleExited = useCallback(() => {\n setExited(true);\n if (onExited) {\n onExited();\n }\n }, [onExited]);\n\n // Don't un-render the overlay while it's transitioning out.\n let mountOverlay = isOpen || !exited;\n if (!mountOverlay) {\n // Don't bother showing anything if we don't have to.\n return null;\n }\n\n return (\n <ReactAriaOverlay portalContainer={container} disableFocusManagement={disableFocusManagement} shouldContainFocus={shouldContainFocus} isExiting={!isOpen}>\n <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}} isDisabled={false}>\n <OpenTransition\n in={isOpen}\n appear\n onExit={onExit}\n onExiting={onExiting}\n onExited={handleExited}\n onEnter={onEnter}\n onEntering={onEntering}\n onEntered={handleEntered}\n nodeRef={nodeRef}>\n {children}\n </OpenTransition>\n </Provider>\n </ReactAriaOverlay>\n );\n});\n"],"names":[],"version":3,"file":"Overlay.module.js.map"}
@@ -1,206 +0,0 @@
1
- var $2aebdc186fd41e87$exports = require("./Overlay.main.js");
2
- require("./overlays.f8d97b78.css");
3
- var $e9a663ccb19ed1b0$exports = require("./overlays_css.main.js");
4
- require("./overlays.ec5cd7e2.css");
5
- var $16e1dca4664d0b1c$exports = require("./popover_vars_css.main.js");
6
- var $b900e75089bdd9cd$exports = require("./Underlay.main.js");
7
- var $cgMBg$reactariaoverlays = require("@react-aria/overlays");
8
- var $cgMBg$reactspectrumutils = require("@react-spectrum/utils");
9
- var $cgMBg$reactariainteractions = require("@react-aria/interactions");
10
- var $cgMBg$reactariautils = require("@react-aria/utils");
11
- var $cgMBg$react = require("react");
12
-
13
-
14
- function $parcel$interopDefault(a) {
15
- return a && a.__esModule ? a.default : a;
16
- }
17
-
18
- function $parcel$export(e, n, v, s) {
19
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
20
- }
21
-
22
- $parcel$export(module.exports, "Popover", () => $f02bba55a62f20dd$export$5b6b19405a83ff9d);
23
- /*
24
- * Copyright 2020 Adobe. All rights reserved.
25
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
26
- * you may not use this file except in compliance with the License. You may obtain a copy
27
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
28
- *
29
- * Unless required by applicable law or agreed to in writing, software distributed under
30
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
31
- * OF ANY KIND, either express or implied. See the License for the specific language
32
- * governing permissions and limitations under the License.
33
- */
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
- /**
43
- * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
44
- * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
45
- * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
46
- * the path always starts at 0 so that it perfectly overlaps the popover's border.
47
- * See bottom of file for more explanation.
48
- */ let $f02bba55a62f20dd$var$arrowPlacement = {
49
- left: 'right',
50
- right: 'right',
51
- top: 'bottom',
52
- bottom: 'bottom'
53
- };
54
- const $f02bba55a62f20dd$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $cgMBg$react.forwardRef)(function Popover(props, ref) {
55
- let { children: children, state: state, ...otherProps } = props;
56
- let domRef = (0, $cgMBg$reactspectrumutils.useDOMRef)(ref);
57
- let wrapperRef = (0, $cgMBg$react.useRef)(null);
58
- return /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement((0, $2aebdc186fd41e87$exports.Overlay), {
59
- ...otherProps,
60
- isOpen: state.isOpen,
61
- nodeRef: wrapperRef
62
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement($f02bba55a62f20dd$var$PopoverWrapper, {
63
- ref: domRef,
64
- ...props,
65
- wrapperRef: wrapperRef
66
- }, children));
67
- });
68
- const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ (0, $cgMBg$react.forwardRef)((props, ref)=>{
69
- let { children: children, isOpen: isOpen, hideArrow: hideArrow, isNonModal: isNonModal, enableBothDismissButtons: enableBothDismissButtons, state: state, wrapperRef: wrapperRef, onDismissButtonPress: onDismissButtonPress = ()=>state.close() } = props;
70
- let { styleProps: styleProps } = (0, $cgMBg$reactspectrumutils.useStyleProps)(props);
71
- let objRef = (0, $cgMBg$reactariautils.useObjectRef)(ref);
72
- let { size: size, borderWidth: borderWidth, arrowRef: arrowRef } = $f02bba55a62f20dd$var$useArrowSize();
73
- const borderRadius = $f02bba55a62f20dd$var$usePopoverBorderRadius(objRef);
74
- let borderDiagonal = borderWidth * Math.SQRT2;
75
- let primary = size + borderDiagonal;
76
- let secondary = primary * 2;
77
- let { popoverProps: popoverProps, arrowProps: arrowProps, underlayProps: underlayProps, placement: placement } = (0, $cgMBg$reactariaoverlays.usePopover)({
78
- ...props,
79
- popoverRef: objRef,
80
- maxHeight: undefined,
81
- arrowSize: hideArrow ? 0 : secondary,
82
- arrowBoundaryOffset: borderRadius
83
- }, state);
84
- let { focusWithinProps: focusWithinProps } = (0, $cgMBg$reactariainteractions.useFocusWithin)(props);
85
- // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
86
- return /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement("div", {
87
- ref: wrapperRef
88
- }, !isNonModal && /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement((0, $b900e75089bdd9cd$exports.Underlay), {
89
- isTransparent: true,
90
- ...(0, $cgMBg$reactariautils.mergeProps)(underlayProps),
91
- isOpen: isOpen
92
- }), /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement("div", {
93
- ...styleProps,
94
- ...(0, $cgMBg$reactariautils.mergeProps)(popoverProps, focusWithinProps),
95
- style: {
96
- ...styleProps.style,
97
- ...popoverProps.style
98
- },
99
- ref: objRef,
100
- className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
101
- 'spectrum-Popover--withTip': !hideArrow,
102
- 'is-open': isOpen,
103
- [`is-open--${placement}`]: isOpen
104
- }, (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e9a663ccb19ed1b0$exports))), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
105
- role: "presentation",
106
- "data-testid": "popover"
107
- }, (!isNonModal || enableBothDismissButtons) && /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement((0, $cgMBg$reactariaoverlays.DismissButton), {
108
- onDismiss: onDismissButtonPress
109
- }), children, hideArrow ? null : /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement($f02bba55a62f20dd$var$Arrow, {
110
- arrowProps: arrowProps,
111
- isLandscape: placement != null ? $f02bba55a62f20dd$var$arrowPlacement[placement] === 'bottom' : false,
112
- arrowRef: arrowRef,
113
- primary: primary,
114
- secondary: secondary,
115
- borderDiagonal: borderDiagonal
116
- }), /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement((0, $cgMBg$reactariaoverlays.DismissButton), {
117
- onDismiss: onDismissButtonPress
118
- })));
119
- });
120
- function $f02bba55a62f20dd$var$usePopoverBorderRadius(popoverRef) {
121
- let [borderRadius, setBorderRadius] = (0, $cgMBg$react.useState)(0);
122
- (0, $cgMBg$reactariautils.useLayoutEffect)(()=>{
123
- if (popoverRef.current) {
124
- let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
125
- if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
126
- }
127
- }, [
128
- popoverRef
129
- ]);
130
- return borderRadius;
131
- }
132
- function $f02bba55a62f20dd$var$useArrowSize() {
133
- let [size, setSize] = (0, $cgMBg$react.useState)(20);
134
- let [borderWidth, setBorderWidth] = (0, $cgMBg$react.useState)(1);
135
- let arrowRef = (0, $cgMBg$react.useRef)(null);
136
- // get the css value for the tip size and divide it by 2 for this arrow implementation
137
- (0, $cgMBg$reactariautils.useLayoutEffect)(()=>{
138
- if (arrowRef.current) {
139
- let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-size');
140
- if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
141
- let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
142
- if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
143
- }
144
- }, []);
145
- return {
146
- size: size,
147
- borderWidth: borderWidth,
148
- arrowRef: arrowRef
149
- };
150
- }
151
- function $f02bba55a62f20dd$var$Arrow(props) {
152
- let { primary: primary, secondary: secondary, isLandscape: isLandscape, arrowProps: arrowProps, borderDiagonal: borderDiagonal, arrowRef: arrowRef } = props;
153
- let halfBorderDiagonal = borderDiagonal / 2;
154
- let primaryStart = 0;
155
- let primaryEnd = primary - halfBorderDiagonal;
156
- let secondaryStart = halfBorderDiagonal;
157
- let secondaryMiddle = secondary / 2;
158
- let secondaryEnd = secondary - halfBorderDiagonal;
159
- let pathData = isLandscape ? [
160
- 'M',
161
- secondaryStart,
162
- primaryStart,
163
- 'L',
164
- secondaryMiddle,
165
- primaryEnd,
166
- 'L',
167
- secondaryEnd,
168
- primaryStart
169
- ] : [
170
- 'M',
171
- primaryStart,
172
- secondaryStart,
173
- 'L',
174
- primaryEnd,
175
- secondaryMiddle,
176
- 'L',
177
- primaryStart,
178
- secondaryEnd
179
- ];
180
- /* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement("svg", {
181
- xmlns: "http://www.w3.org/svg/2000",
182
- width: Math.ceil(isLandscape ? secondary : primary),
183
- height: Math.ceil(isLandscape ? primary : secondary),
184
- className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover-tip'),
185
- ref: arrowRef,
186
- ...arrowProps
187
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement("path", {
188
- className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover-tip-triangle'),
189
- d: pathData.join(' ')
190
- }));
191
- } /**
192
- * More explanation on popover tips.
193
- * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.
194
- * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.
195
- * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.
196
- * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.
197
- * - I tried getting the client bounding box and setting the svg to that partial pixel value
198
- * This didn't work because again the issue was inside the svg
199
- * - I didn't try drawing the svg backwards
200
- * This could still be tried
201
- * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded
202
- * This seems to have done the trick.
203
- */
204
-
205
-
206
- //# sourceMappingURL=Popover.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/overlays/src/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, RefObject, StyleProps} from '@react-types/shared';\nimport {FocusWithinProps, useFocusWithin} from '@react-aria/interactions';\nimport {mergeProps, useLayoutEffect, useObjectRef} from '@react-aria/utils';\nimport {Overlay} from './Overlay';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {ForwardedRef, forwardRef, ReactNode, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/popover/vars.css';\nimport {Underlay} from './Underlay';\n\ninterface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'>, FocusWithinProps, StyleProps {\n children: ReactNode,\n hideArrow?: boolean,\n state: OverlayTriggerState,\n shouldContainFocus?: boolean,\n onEntering?: () => void,\n onEnter?: () => void,\n onEntered?: () => void,\n onExiting?: () => void,\n onExited?: () => void,\n onExit?: () => void,\n container?: HTMLElement,\n disableFocusManagement?: boolean,\n enableBothDismissButtons?: boolean,\n onDismissButtonPress?: () => void\n}\n\ninterface PopoverWrapperProps extends PopoverProps, FocusWithinProps {\n isOpen?: boolean,\n wrapperRef: RefObject<HTMLDivElement | null>\n}\n\ninterface ArrowProps {\n arrowProps: PopoverAria['arrowProps'],\n isLandscape: boolean,\n arrowRef?: RefObject<SVGSVGElement | null>,\n primary: number,\n secondary: number,\n borderDiagonal: number\n}\n\n/**\n * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the\n * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and\n * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that\n * the path always starts at 0 so that it perfectly overlaps the popover's border.\n * See bottom of file for more explanation.\n */\nlet arrowPlacement = {\n left: 'right',\n right: 'right',\n top: 'bottom',\n bottom: 'bottom'\n};\n\nexport const Popover = forwardRef(function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n state,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>\n {children}\n </PopoverWrapper>\n </Overlay>\n );\n});\n\nconst PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) => {\n let {\n children,\n isOpen,\n hideArrow,\n isNonModal,\n enableBothDismissButtons,\n state,\n wrapperRef,\n onDismissButtonPress = () => state.close()\n } = props;\n let {styleProps} = useStyleProps(props);\n let objRef = useObjectRef(ref);\n\n let {size, borderWidth, arrowRef} = useArrowSize();\n const borderRadius = usePopoverBorderRadius(objRef);\n let borderDiagonal = borderWidth * Math.SQRT2;\n let primary = size + borderDiagonal;\n let secondary = primary * 2;\n let {\n popoverProps,\n arrowProps,\n underlayProps,\n placement\n } = usePopover({\n ...props,\n popoverRef: objRef,\n maxHeight: undefined,\n arrowSize: hideArrow ? 0 : secondary,\n arrowBoundaryOffset: borderRadius\n }, state);\n let {focusWithinProps} = useFocusWithin(props);\n\n // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n {!isNonModal && <Underlay isTransparent {...mergeProps(underlayProps)} isOpen={isOpen} /> }\n <div\n {...styleProps}\n {...mergeProps(popoverProps, focusWithinProps)}\n style={{\n ...styleProps.style,\n ...popoverProps.style\n }}\n ref={objRef}\n className={\n classNames(\n styles,\n 'spectrum-Popover',\n `spectrum-Popover--${placement}`,\n {\n 'spectrum-Popover--withTip': !hideArrow,\n 'is-open': isOpen,\n [`is-open--${placement}`]: isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Popover',\n 'react-spectrum-Popover'\n ),\n styleProps.className\n )\n }\n role=\"presentation\"\n data-testid=\"popover\">\n {(!isNonModal || enableBothDismissButtons) && <DismissButton onDismiss={onDismissButtonPress} />}\n {children}\n {hideArrow ? null : (\n <Arrow\n arrowProps={arrowProps}\n isLandscape={placement != null ? arrowPlacement[placement] === 'bottom' : false}\n arrowRef={arrowRef}\n primary={primary}\n secondary={secondary}\n borderDiagonal={borderDiagonal} />\n )}\n <DismissButton onDismiss={onDismissButtonPress} />\n </div>\n </div>\n );\n});\n\nfunction usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement | null>) {\n let [borderRadius, setBorderRadius] = useState(0);\n useLayoutEffect(() => {\n if (popoverRef.current) {\n let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;\n if (spectrumBorderRadius !== '') {\n setBorderRadius(parseInt(spectrumBorderRadius, 10));\n }\n }\n }, [popoverRef]);\n return borderRadius;\n}\n\nfunction useArrowSize() {\n let [size, setSize] = useState(20);\n let [borderWidth, setBorderWidth] = useState(1);\n let arrowRef = useRef<SVGSVGElement>(null);\n // get the css value for the tip size and divide it by 2 for this arrow implementation\n useLayoutEffect(() => {\n if (arrowRef.current) {\n let spectrumTipWidth = window.getComputedStyle(arrowRef.current)\n .getPropertyValue('--spectrum-popover-tip-size');\n if (spectrumTipWidth !== '') {\n setSize(parseInt(spectrumTipWidth, 10) / 2);\n }\n\n let spectrumBorderWidth = window.getComputedStyle(arrowRef.current)\n .getPropertyValue('--spectrum-popover-tip-borderWidth');\n if (spectrumBorderWidth !== '') {\n setBorderWidth(parseInt(spectrumBorderWidth, 10));\n }\n }\n }, []);\n return {size, borderWidth, arrowRef};\n}\n\nfunction Arrow(props: ArrowProps) {\n let {primary, secondary, isLandscape, arrowProps, borderDiagonal, arrowRef} = props;\n let halfBorderDiagonal = borderDiagonal / 2;\n\n let primaryStart = 0;\n let primaryEnd = primary - halfBorderDiagonal;\n\n let secondaryStart = halfBorderDiagonal;\n let secondaryMiddle = secondary / 2;\n let secondaryEnd = secondary - halfBorderDiagonal;\n\n let pathData = isLandscape ? [\n 'M', secondaryStart, primaryStart,\n 'L', secondaryMiddle, primaryEnd,\n 'L', secondaryEnd, primaryStart\n ] : [\n 'M', primaryStart, secondaryStart,\n 'L', primaryEnd, secondaryMiddle,\n 'L', primaryStart, secondaryEnd\n ];\n\n /* use ceil because the svg needs to always accommodate the path inside it */\n return (\n <svg\n xmlns=\"http://www.w3.org/svg/2000\"\n width={Math.ceil(isLandscape ? secondary : primary)}\n height={Math.ceil(isLandscape ? primary : secondary)}\n className={classNames(styles, 'spectrum-Popover-tip')}\n ref={arrowRef}\n {...arrowProps}>\n <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />\n </svg>\n );\n}\n\n/**\n * More explanation on popover tips.\n * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.\n * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.\n * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.\n * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.\n * - I tried getting the client bounding box and setting the svg to that partial pixel value\n * This didn't work because again the issue was inside the svg\n * - I didn't try drawing the svg backwards\n * This could still be tried\n * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded\n * This seems to have done the trick.\n */\n"],"names":[],"version":3,"file":"Popover.main.js.map"}