@react-spectrum/overlays 5.6.5 → 5.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Modal.main.js +7 -7
- package/dist/Modal.main.js.map +1 -1
- package/dist/Modal.mjs +9 -9
- package/dist/Modal.module.js +9 -9
- package/dist/Modal.module.js.map +1 -1
- package/dist/Overlay.main.js +2 -3
- package/dist/Overlay.main.js.map +1 -1
- package/dist/Overlay.mjs +2 -3
- package/dist/Overlay.module.js +2 -3
- package/dist/Overlay.module.js.map +1 -1
- package/dist/Popover.main.js +10 -10
- package/dist/Popover.main.js.map +1 -1
- package/dist/Popover.mjs +12 -12
- package/dist/Popover.module.js +12 -12
- package/dist/Popover.module.js.map +1 -1
- package/dist/Tray.main.js +5 -5
- package/dist/Tray.main.js.map +1 -1
- package/dist/Tray.mjs +7 -7
- package/dist/Tray.module.js +7 -7
- package/dist/Tray.module.js.map +1 -1
- package/dist/modal_vars_css.main.js.map +1 -1
- package/dist/modal_vars_css.module.js.map +1 -1
- package/dist/popover_vars_css.main.js.map +1 -1
- package/dist/popover_vars_css.module.js.map +1 -1
- package/dist/tray_vars_css.main.js.map +1 -1
- package/dist/tray_vars_css.module.js.map +1 -1
- package/dist/types.d.ts +4 -4
- package/dist/types.d.ts.map +1 -1
- package/dist/underlay_vars_css.main.js.map +1 -1
- package/dist/underlay_vars_css.module.js.map +1 -1
- package/dist/{vars.bf55d9e0.css → vars.a1de7c32.css} +3 -3
- package/dist/{vars.bf55d9e0.css.map → vars.a1de7c32.css.map} +1 -1
- package/package.json +11 -11
- package/src/Modal.tsx +11 -12
- package/src/Overlay.tsx +2 -5
- package/src/Popover.tsx +12 -14
- package/src/Tray.tsx +9 -11
package/dist/Modal.main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
require("./vars.
|
|
1
|
+
require("./vars.a1de7c32.css");
|
|
2
2
|
var $86571b803f942ff3$exports = require("./modal_vars_css.main.js");
|
|
3
3
|
var $2aebdc186fd41e87$exports = require("./Overlay.main.js");
|
|
4
4
|
require("./overlays.f8d97b78.css");
|
|
@@ -37,7 +37,7 @@ $parcel$export(module.exports, "Modal", () => $fc75a6aa7a2b905b$export$2b77a92f1
|
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
const $fc75a6aa7a2b905b$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $aM0tW$react.forwardRef)(function Modal(props, ref) {
|
|
41
41
|
let { children: children, state: state, ...otherProps } = props;
|
|
42
42
|
let domRef = (0, $aM0tW$reactspectrumutils.useDOMRef)(ref);
|
|
43
43
|
let wrapperRef = (0, $aM0tW$react.useRef)(null);
|
|
@@ -50,16 +50,17 @@ function $fc75a6aa7a2b905b$var$Modal(props, ref) {
|
|
|
50
50
|
wrapperRef: wrapperRef,
|
|
51
51
|
ref: domRef
|
|
52
52
|
}, children));
|
|
53
|
-
}
|
|
53
|
+
});
|
|
54
54
|
let $fc75a6aa7a2b905b$var$typeMap = {
|
|
55
55
|
fullscreen: 'fullscreen',
|
|
56
56
|
fullscreenTakeover: 'fullscreenTakeover'
|
|
57
57
|
};
|
|
58
58
|
let $fc75a6aa7a2b905b$var$ModalWrapper = /*#__PURE__*/ (0, $aM0tW$react.forwardRef)(function(props, ref) {
|
|
59
59
|
let { type: type, children: children, state: state, isOpen: isOpen, wrapperRef: wrapperRef } = props;
|
|
60
|
-
let typeVariant = $fc75a6aa7a2b905b$var$typeMap[type];
|
|
60
|
+
let typeVariant = type != null ? $fc75a6aa7a2b905b$var$typeMap[type] : undefined;
|
|
61
61
|
let { styleProps: styleProps } = (0, $aM0tW$reactspectrumutils.useStyleProps)(props);
|
|
62
|
-
let
|
|
62
|
+
let objRef = (0, $aM0tW$reactariautils.useObjectRef)(ref);
|
|
63
|
+
let { modalProps: modalProps, underlayProps: underlayProps } = (0, $aM0tW$reactariaoverlays.useModalOverlay)(props, state, objRef);
|
|
63
64
|
let wrapperClassName = (0, $aM0tW$reactspectrumutils.classNames)((0, ($parcel$interopDefault($86571b803f942ff3$exports))), 'spectrum-Modal-wrapper', (0, $aM0tW$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e9a663ccb19ed1b0$exports))), 'spectrum-Modal-wrapper', 'react-spectrum-Modal-wrapper'));
|
|
64
65
|
let modalClassName = (0, $aM0tW$reactspectrumutils.classNames)((0, ($parcel$interopDefault($86571b803f942ff3$exports))), 'spectrum-Modal', {
|
|
65
66
|
'is-open': isOpen
|
|
@@ -82,12 +83,11 @@ let $fc75a6aa7a2b905b$var$ModalWrapper = /*#__PURE__*/ (0, $aM0tW$react.forwardR
|
|
|
82
83
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aM0tW$react))).createElement("div", {
|
|
83
84
|
...styleProps,
|
|
84
85
|
...modalProps,
|
|
85
|
-
ref:
|
|
86
|
+
ref: objRef,
|
|
86
87
|
className: modalClassName,
|
|
87
88
|
"data-testid": "modal"
|
|
88
89
|
}, children)));
|
|
89
90
|
});
|
|
90
|
-
let $fc75a6aa7a2b905b$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $aM0tW$react.forwardRef)($fc75a6aa7a2b905b$var$Modal);
|
|
91
91
|
|
|
92
92
|
|
|
93
93
|
//# sourceMappingURL=Modal.main.js.map
|
package/dist/Modal.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA0BM,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,IAAI,YAAC,QAAQ,SAAE,KAAK,EAAE,GAAG,YAAW,GAAG;IACvC,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAkB;IAExC,qBACE,0DAAC,CAAA,GAAA,iCAAM;QAAG,GAAG,UAAU;QAAE,QAAQ,MAAM,MAAM;QAAE,SAAS;qBACtD,0DAAC;QAAc,GAAG,KAAK;QAAE,YAAY;QAAY,KAAK;OACnD;AAIT;AAEA,IAAI,gCAAU;IACZ,YAAY;IACZ,oBAAoB;AACtB;AAEA,IAAI,mDAAe,CAAA,GAAA,uBAAS,EAAE,SAAU,KAAwB,EAAE,GAAwC;IACxG,IAAI,QAAC,IAAI,YAAE,QAAQ,SAAE,KAAK,UAAE,MAAM,cAAE,UAAU,EAAC,GAAG;IAClD,IAAI,cAAc,QAAQ,OAAO,6BAAO,CAAC,KAAK,GAAG;IACjD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,kCAAW,EAAE;IAC1B,IAAI,cAAC,UAAU,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,wCAAc,EAAE,OAAO,OAAO;IAEhE,IAAI,mBAAmB,CAAA,GAAA,oCAAS,EAC9B,CAAA,GAAA,mDAAU,GACV,0BACA,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAa,GACb,0BACA;IAIJ,IAAI,iBAAiB,CAAA,GAAA,oCAAS,EAC5B,CAAA,GAAA,mDAAU,GACV,kBACA;QACE,WAAW;IACb,GACA,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAa,GACb,kBACA,yBAEF;QAAC,CAAC,CAAC,gBAAgB,EAAE,aAAa,CAAC,EAAE;IAAW,GAChD,WAAW,SAAS;IAGtB,IAAI,WAAW,CAAA,GAAA,qCAAc;IAC7B,IAAI,QAAa;QACf,qCAAqC,SAAS,MAAM,GAAG;IACzD;IAEA,4LAA4L;IAC5L,qBACE,0DAAC;QAAI,KAAK;qBACR,0DAAC,CAAA,GAAA,kCAAO;QAAG,GAAG,aAAa;QAAE,QAAQ;sBACrC,0DAAC;QAAI,WAAW;QAAkB,OAAO;qBACvC,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,UAAU;QACd,KAAK;QACL,WAAW;QACX,eAAY;OACX;AAKX","sources":["packages/@react-spectrum/overlays/src/Modal.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 {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, RefObject, StyleProps} from '@react-types/shared';\nimport modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react';\nimport {Underlay} from './Underlay';\nimport {useObjectRef, useViewportSize} from '@react-aria/utils';\n\ninterface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {\n children: ReactNode,\n state: OverlayTriggerState,\n type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'\n}\n\ninterface ModalWrapperProps extends ModalProps {\n isOpen?: boolean,\n wrapperRef: RefObject<HTMLDivElement | null>,\n children: ReactNode\n}\n\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <ModalWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </ModalWrapper>\n </Overlay>\n );\n});\n\nlet typeMap = {\n fullscreen: 'fullscreen',\n fullscreenTakeover: 'fullscreenTakeover'\n};\n\nlet ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) {\n let {type, children, state, isOpen, wrapperRef} = props;\n let typeVariant = type != null ? typeMap[type] : undefined;\n let {styleProps} = useStyleProps(props);\n let objRef = useObjectRef(ref);\n let {modalProps, underlayProps} = useModalOverlay(props, state, objRef);\n\n let wrapperClassName = classNames(\n modalStyles,\n 'spectrum-Modal-wrapper',\n classNames(\n overrideStyles,\n 'spectrum-Modal-wrapper',\n 'react-spectrum-Modal-wrapper'\n )\n );\n\n let modalClassName = classNames(\n modalStyles,\n 'spectrum-Modal',\n {\n 'is-open': isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Modal',\n 'react-spectrum-Modal'\n ),\n {[`spectrum-Modal--${typeVariant}`]: typeVariant},\n styleProps.className\n );\n\n let viewport = useViewportSize();\n let style: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={style}>\n <div\n {...styleProps}\n {...modalProps}\n ref={objRef}\n className={modalClassName}\n data-testid=\"modal\">\n {children}\n </div>\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"Modal.main.js.map"}
|
package/dist/Modal.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.a1de7c32.css";
|
|
2
2
|
import $e9TuM$modal_vars_cssmodulejs from "./modal_vars_css.mjs";
|
|
3
3
|
import {Overlay as $70305dc5fb729c3b$export$c6fdb837b070b4ff} from "./Overlay.mjs";
|
|
4
4
|
import "./overlays.f8d97b78.css";
|
|
@@ -6,8 +6,8 @@ import $e9TuM$overlays_cssmodulejs from "./overlays_css.mjs";
|
|
|
6
6
|
import {Underlay as $76a452f4e3df11be$export$f360afc887607b02} from "./Underlay.mjs";
|
|
7
7
|
import {useModalOverlay as $e9TuM$useModalOverlay} from "@react-aria/overlays";
|
|
8
8
|
import {useDOMRef as $e9TuM$useDOMRef, useStyleProps as $e9TuM$useStyleProps, classNames as $e9TuM$classNames} from "@react-spectrum/utils";
|
|
9
|
-
import $e9TuM$react, {
|
|
10
|
-
import {useViewportSize as $e9TuM$useViewportSize} from "@react-aria/utils";
|
|
9
|
+
import $e9TuM$react, {forwardRef as $e9TuM$forwardRef, useRef as $e9TuM$useRef} from "react";
|
|
10
|
+
import {useObjectRef as $e9TuM$useObjectRef, useViewportSize as $e9TuM$useViewportSize} from "@react-aria/utils";
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
function $parcel$interopDefault(a) {
|
|
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
const $842084dfa182af65$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $e9TuM$forwardRef)(function Modal(props, ref) {
|
|
35
35
|
let { children: children, state: state, ...otherProps } = props;
|
|
36
36
|
let domRef = (0, $e9TuM$useDOMRef)(ref);
|
|
37
37
|
let wrapperRef = (0, $e9TuM$useRef)(null);
|
|
@@ -44,16 +44,17 @@ function $842084dfa182af65$var$Modal(props, ref) {
|
|
|
44
44
|
wrapperRef: wrapperRef,
|
|
45
45
|
ref: domRef
|
|
46
46
|
}, children));
|
|
47
|
-
}
|
|
47
|
+
});
|
|
48
48
|
let $842084dfa182af65$var$typeMap = {
|
|
49
49
|
fullscreen: 'fullscreen',
|
|
50
50
|
fullscreenTakeover: 'fullscreenTakeover'
|
|
51
51
|
};
|
|
52
52
|
let $842084dfa182af65$var$ModalWrapper = /*#__PURE__*/ (0, $e9TuM$forwardRef)(function(props, ref) {
|
|
53
53
|
let { type: type, children: children, state: state, isOpen: isOpen, wrapperRef: wrapperRef } = props;
|
|
54
|
-
let typeVariant = $842084dfa182af65$var$typeMap[type];
|
|
54
|
+
let typeVariant = type != null ? $842084dfa182af65$var$typeMap[type] : undefined;
|
|
55
55
|
let { styleProps: styleProps } = (0, $e9TuM$useStyleProps)(props);
|
|
56
|
-
let
|
|
56
|
+
let objRef = (0, $e9TuM$useObjectRef)(ref);
|
|
57
|
+
let { modalProps: modalProps, underlayProps: underlayProps } = (0, $e9TuM$useModalOverlay)(props, state, objRef);
|
|
57
58
|
let wrapperClassName = (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$modal_vars_cssmodulejs))), 'spectrum-Modal-wrapper', (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$overlays_cssmodulejs))), 'spectrum-Modal-wrapper', 'react-spectrum-Modal-wrapper'));
|
|
58
59
|
let modalClassName = (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$modal_vars_cssmodulejs))), 'spectrum-Modal', {
|
|
59
60
|
'is-open': isOpen
|
|
@@ -76,12 +77,11 @@ let $842084dfa182af65$var$ModalWrapper = /*#__PURE__*/ (0, $e9TuM$forwardRef)(fu
|
|
|
76
77
|
}, /*#__PURE__*/ (0, $e9TuM$react).createElement("div", {
|
|
77
78
|
...styleProps,
|
|
78
79
|
...modalProps,
|
|
79
|
-
ref:
|
|
80
|
+
ref: objRef,
|
|
80
81
|
className: modalClassName,
|
|
81
82
|
"data-testid": "modal"
|
|
82
83
|
}, children)));
|
|
83
84
|
});
|
|
84
|
-
let $842084dfa182af65$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $e9TuM$forwardRef)($842084dfa182af65$var$Modal);
|
|
85
85
|
|
|
86
86
|
|
|
87
87
|
export {$842084dfa182af65$export$2b77a92f1a5ad772 as Modal};
|
package/dist/Modal.module.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.a1de7c32.css";
|
|
2
2
|
import $e9TuM$modal_vars_cssmodulejs from "./modal_vars_css.module.js";
|
|
3
3
|
import {Overlay as $70305dc5fb729c3b$export$c6fdb837b070b4ff} from "./Overlay.module.js";
|
|
4
4
|
import "./overlays.f8d97b78.css";
|
|
@@ -6,8 +6,8 @@ import $e9TuM$overlays_cssmodulejs from "./overlays_css.module.js";
|
|
|
6
6
|
import {Underlay as $76a452f4e3df11be$export$f360afc887607b02} from "./Underlay.module.js";
|
|
7
7
|
import {useModalOverlay as $e9TuM$useModalOverlay} from "@react-aria/overlays";
|
|
8
8
|
import {useDOMRef as $e9TuM$useDOMRef, useStyleProps as $e9TuM$useStyleProps, classNames as $e9TuM$classNames} from "@react-spectrum/utils";
|
|
9
|
-
import $e9TuM$react, {
|
|
10
|
-
import {useViewportSize as $e9TuM$useViewportSize} from "@react-aria/utils";
|
|
9
|
+
import $e9TuM$react, {forwardRef as $e9TuM$forwardRef, useRef as $e9TuM$useRef} from "react";
|
|
10
|
+
import {useObjectRef as $e9TuM$useObjectRef, useViewportSize as $e9TuM$useViewportSize} from "@react-aria/utils";
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
function $parcel$interopDefault(a) {
|
|
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
const $842084dfa182af65$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $e9TuM$forwardRef)(function Modal(props, ref) {
|
|
35
35
|
let { children: children, state: state, ...otherProps } = props;
|
|
36
36
|
let domRef = (0, $e9TuM$useDOMRef)(ref);
|
|
37
37
|
let wrapperRef = (0, $e9TuM$useRef)(null);
|
|
@@ -44,16 +44,17 @@ function $842084dfa182af65$var$Modal(props, ref) {
|
|
|
44
44
|
wrapperRef: wrapperRef,
|
|
45
45
|
ref: domRef
|
|
46
46
|
}, children));
|
|
47
|
-
}
|
|
47
|
+
});
|
|
48
48
|
let $842084dfa182af65$var$typeMap = {
|
|
49
49
|
fullscreen: 'fullscreen',
|
|
50
50
|
fullscreenTakeover: 'fullscreenTakeover'
|
|
51
51
|
};
|
|
52
52
|
let $842084dfa182af65$var$ModalWrapper = /*#__PURE__*/ (0, $e9TuM$forwardRef)(function(props, ref) {
|
|
53
53
|
let { type: type, children: children, state: state, isOpen: isOpen, wrapperRef: wrapperRef } = props;
|
|
54
|
-
let typeVariant = $842084dfa182af65$var$typeMap[type];
|
|
54
|
+
let typeVariant = type != null ? $842084dfa182af65$var$typeMap[type] : undefined;
|
|
55
55
|
let { styleProps: styleProps } = (0, $e9TuM$useStyleProps)(props);
|
|
56
|
-
let
|
|
56
|
+
let objRef = (0, $e9TuM$useObjectRef)(ref);
|
|
57
|
+
let { modalProps: modalProps, underlayProps: underlayProps } = (0, $e9TuM$useModalOverlay)(props, state, objRef);
|
|
57
58
|
let wrapperClassName = (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$modal_vars_cssmodulejs))), 'spectrum-Modal-wrapper', (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$overlays_cssmodulejs))), 'spectrum-Modal-wrapper', 'react-spectrum-Modal-wrapper'));
|
|
58
59
|
let modalClassName = (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$modal_vars_cssmodulejs))), 'spectrum-Modal', {
|
|
59
60
|
'is-open': isOpen
|
|
@@ -76,12 +77,11 @@ let $842084dfa182af65$var$ModalWrapper = /*#__PURE__*/ (0, $e9TuM$forwardRef)(fu
|
|
|
76
77
|
}, /*#__PURE__*/ (0, $e9TuM$react).createElement("div", {
|
|
77
78
|
...styleProps,
|
|
78
79
|
...modalProps,
|
|
79
|
-
ref:
|
|
80
|
+
ref: objRef,
|
|
80
81
|
className: modalClassName,
|
|
81
82
|
"data-testid": "modal"
|
|
82
83
|
}, children)));
|
|
83
84
|
});
|
|
84
|
-
let $842084dfa182af65$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $e9TuM$forwardRef)($842084dfa182af65$var$Modal);
|
|
85
85
|
|
|
86
86
|
|
|
87
87
|
export {$842084dfa182af65$export$2b77a92f1a5ad772 as Modal};
|
package/dist/Modal.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA0BM,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,IAAI,YAAC,QAAQ,SAAE,KAAK,EAAE,GAAG,YAAW,GAAG;IACvC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IAExC,qBACE,gCAAC,CAAA,GAAA,yCAAM;QAAG,GAAG,UAAU;QAAE,QAAQ,MAAM,MAAM;QAAE,SAAS;qBACtD,gCAAC;QAAc,GAAG,KAAK;QAAE,YAAY;QAAY,KAAK;OACnD;AAIT;AAEA,IAAI,gCAAU;IACZ,YAAY;IACZ,oBAAoB;AACtB;AAEA,IAAI,mDAAe,CAAA,GAAA,iBAAS,EAAE,SAAU,KAAwB,EAAE,GAAwC;IACxG,IAAI,QAAC,IAAI,YAAE,QAAQ,SAAE,KAAK,UAAE,MAAM,cAAE,UAAU,EAAC,GAAG;IAClD,IAAI,cAAc,QAAQ,OAAO,6BAAO,CAAC,KAAK,GAAG;IACjD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,mBAAW,EAAE;IAC1B,IAAI,cAAC,UAAU,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,OAAO;IAEhE,IAAI,mBAAmB,CAAA,GAAA,iBAAS,EAC9B,CAAA,GAAA,uDAAU,GACV,0BACA,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,qDAAa,GACb,0BACA;IAIJ,IAAI,iBAAiB,CAAA,GAAA,iBAAS,EAC5B,CAAA,GAAA,uDAAU,GACV,kBACA;QACE,WAAW;IACb,GACA,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,qDAAa,GACb,kBACA,yBAEF;QAAC,CAAC,CAAC,gBAAgB,EAAE,aAAa,CAAC,EAAE;IAAW,GAChD,WAAW,SAAS;IAGtB,IAAI,WAAW,CAAA,GAAA,sBAAc;IAC7B,IAAI,QAAa;QACf,qCAAqC,SAAS,MAAM,GAAG;IACzD;IAEA,4LAA4L;IAC5L,qBACE,gCAAC;QAAI,KAAK;qBACR,gCAAC,CAAA,GAAA,yCAAO;QAAG,GAAG,aAAa;QAAE,QAAQ;sBACrC,gCAAC;QAAI,WAAW;QAAkB,OAAO;qBACvC,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,UAAU;QACd,KAAK;QACL,WAAW;QACX,eAAY;OACX;AAKX","sources":["packages/@react-spectrum/overlays/src/Modal.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 {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, RefObject, StyleProps} from '@react-types/shared';\nimport modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react';\nimport {Underlay} from './Underlay';\nimport {useObjectRef, useViewportSize} from '@react-aria/utils';\n\ninterface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {\n children: ReactNode,\n state: OverlayTriggerState,\n type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'\n}\n\ninterface ModalWrapperProps extends ModalProps {\n isOpen?: boolean,\n wrapperRef: RefObject<HTMLDivElement | null>,\n children: ReactNode\n}\n\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <ModalWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </ModalWrapper>\n </Overlay>\n );\n});\n\nlet typeMap = {\n fullscreen: 'fullscreen',\n fullscreenTakeover: 'fullscreenTakeover'\n};\n\nlet ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) {\n let {type, children, state, isOpen, wrapperRef} = props;\n let typeVariant = type != null ? typeMap[type] : undefined;\n let {styleProps} = useStyleProps(props);\n let objRef = useObjectRef(ref);\n let {modalProps, underlayProps} = useModalOverlay(props, state, objRef);\n\n let wrapperClassName = classNames(\n modalStyles,\n 'spectrum-Modal-wrapper',\n classNames(\n overrideStyles,\n 'spectrum-Modal-wrapper',\n 'react-spectrum-Modal-wrapper'\n )\n );\n\n let modalClassName = classNames(\n modalStyles,\n 'spectrum-Modal',\n {\n 'is-open': isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Modal',\n 'react-spectrum-Modal'\n ),\n {[`spectrum-Modal--${typeVariant}`]: typeVariant},\n styleProps.className\n );\n\n let viewport = useViewportSize();\n let style: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={style}>\n <div\n {...styleProps}\n {...modalProps}\n ref={objRef}\n className={modalClassName}\n data-testid=\"modal\">\n {children}\n </div>\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"Modal.module.js.map"}
|
package/dist/Overlay.main.js
CHANGED
|
@@ -27,7 +27,7 @@ $parcel$export(module.exports, "Overlay", () => $2aebdc186fd41e87$export$c6fdb83
|
|
|
27
27
|
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
const $2aebdc186fd41e87$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, ($parcel$interopDefault($5XfZ1$react))).forwardRef(function Overlay(props, ref) {
|
|
31
31
|
let { children: children, isOpen: isOpen, disableFocusManagement: disableFocusManagement, container: container, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, nodeRef: nodeRef } = props;
|
|
32
32
|
let [exited, setExited] = (0, $5XfZ1$react.useState)(!isOpen);
|
|
33
33
|
let handleEntered = (0, $5XfZ1$react.useCallback)(()=>{
|
|
@@ -68,8 +68,7 @@ function $2aebdc186fd41e87$var$Overlay(props, ref) {
|
|
|
68
68
|
onEntered: handleEntered,
|
|
69
69
|
nodeRef: nodeRef
|
|
70
70
|
}, children)));
|
|
71
|
-
}
|
|
72
|
-
let $2aebdc186fd41e87$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, ($parcel$interopDefault($5XfZ1$react))).forwardRef($2aebdc186fd41e87$var$Overlay);
|
|
71
|
+
});
|
|
73
72
|
|
|
74
73
|
|
|
75
74
|
//# sourceMappingURL=Overlay.main.js.map
|
package/dist/Overlay.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;
|
|
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,aACtB,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,WAAW,CAAC;qBACxG,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 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} 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
CHANGED
|
@@ -17,7 +17,7 @@ import {Overlay as $eIXW5$Overlay} from "@react-aria/overlays";
|
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
const $70305dc5fb729c3b$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, $eIXW5$react).forwardRef(function Overlay(props, ref) {
|
|
21
21
|
let { children: children, isOpen: isOpen, disableFocusManagement: disableFocusManagement, container: container, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, nodeRef: nodeRef } = props;
|
|
22
22
|
let [exited, setExited] = (0, $eIXW5$useState)(!isOpen);
|
|
23
23
|
let handleEntered = (0, $eIXW5$useCallback)(()=>{
|
|
@@ -58,8 +58,7 @@ function $70305dc5fb729c3b$var$Overlay(props, ref) {
|
|
|
58
58
|
onEntered: handleEntered,
|
|
59
59
|
nodeRef: nodeRef
|
|
60
60
|
}, children)));
|
|
61
|
-
}
|
|
62
|
-
let $70305dc5fb729c3b$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, $eIXW5$react).forwardRef($70305dc5fb729c3b$var$Overlay);
|
|
61
|
+
});
|
|
63
62
|
|
|
64
63
|
|
|
65
64
|
export {$70305dc5fb729c3b$export$c6fdb837b070b4ff as Overlay};
|
package/dist/Overlay.module.js
CHANGED
|
@@ -17,7 +17,7 @@ import {Overlay as $eIXW5$Overlay} from "@react-aria/overlays";
|
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
const $70305dc5fb729c3b$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, $eIXW5$react).forwardRef(function Overlay(props, ref) {
|
|
21
21
|
let { children: children, isOpen: isOpen, disableFocusManagement: disableFocusManagement, container: container, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, nodeRef: nodeRef } = props;
|
|
22
22
|
let [exited, setExited] = (0, $eIXW5$useState)(!isOpen);
|
|
23
23
|
let handleEntered = (0, $eIXW5$useCallback)(()=>{
|
|
@@ -58,8 +58,7 @@ function $70305dc5fb729c3b$var$Overlay(props, ref) {
|
|
|
58
58
|
onEntered: handleEntered,
|
|
59
59
|
nodeRef: nodeRef
|
|
60
60
|
}, children)));
|
|
61
|
-
}
|
|
62
|
-
let $70305dc5fb729c3b$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, $eIXW5$react).forwardRef($70305dc5fb729c3b$var$Overlay);
|
|
61
|
+
});
|
|
63
62
|
|
|
64
63
|
|
|
65
64
|
export {$70305dc5fb729c3b$export$c6fdb837b070b4ff as Overlay};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;
|
|
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,aACtB,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,WAAW,CAAC;qBACxG,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 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} 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"}
|
package/dist/Popover.main.js
CHANGED
|
@@ -51,7 +51,7 @@ $parcel$export(module.exports, "Popover", () => $f02bba55a62f20dd$export$5b6b194
|
|
|
51
51
|
top: 'bottom',
|
|
52
52
|
bottom: 'bottom'
|
|
53
53
|
};
|
|
54
|
-
|
|
54
|
+
const $f02bba55a62f20dd$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $cgMBg$react.forwardRef)(function Popover(props, ref) {
|
|
55
55
|
let { children: children, state: state, ...otherProps } = props;
|
|
56
56
|
let domRef = (0, $cgMBg$reactspectrumutils.useDOMRef)(ref);
|
|
57
57
|
let wrapperRef = (0, $cgMBg$react.useRef)(null);
|
|
@@ -64,19 +64,20 @@ function $f02bba55a62f20dd$var$Popover(props, ref) {
|
|
|
64
64
|
...props,
|
|
65
65
|
wrapperRef: wrapperRef
|
|
66
66
|
}, children));
|
|
67
|
-
}
|
|
67
|
+
});
|
|
68
68
|
const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ (0, $cgMBg$react.forwardRef)((props, ref)=>{
|
|
69
69
|
let { children: children, isOpen: isOpen, hideArrow: hideArrow, isNonModal: isNonModal, enableBothDismissButtons: enableBothDismissButtons, state: state, wrapperRef: wrapperRef, onDismissButtonPress: onDismissButtonPress = ()=>state.close() } = props;
|
|
70
70
|
let { styleProps: styleProps } = (0, $cgMBg$reactspectrumutils.useStyleProps)(props);
|
|
71
|
+
let objRef = (0, $cgMBg$reactariautils.useObjectRef)(ref);
|
|
71
72
|
let { size: size, borderWidth: borderWidth, arrowRef: arrowRef } = $f02bba55a62f20dd$var$useArrowSize();
|
|
72
|
-
const borderRadius = $f02bba55a62f20dd$var$usePopoverBorderRadius(
|
|
73
|
+
const borderRadius = $f02bba55a62f20dd$var$usePopoverBorderRadius(objRef);
|
|
73
74
|
let borderDiagonal = borderWidth * Math.SQRT2;
|
|
74
75
|
let primary = size + borderDiagonal;
|
|
75
76
|
let secondary = primary * 2;
|
|
76
77
|
let { popoverProps: popoverProps, arrowProps: arrowProps, underlayProps: underlayProps, placement: placement } = (0, $cgMBg$reactariaoverlays.usePopover)({
|
|
77
78
|
...props,
|
|
78
|
-
popoverRef:
|
|
79
|
-
maxHeight:
|
|
79
|
+
popoverRef: objRef,
|
|
80
|
+
maxHeight: undefined,
|
|
80
81
|
arrowSize: hideArrow ? 0 : secondary,
|
|
81
82
|
arrowBoundaryOffset: borderRadius
|
|
82
83
|
}, state);
|
|
@@ -95,7 +96,7 @@ const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ (0, $cgMBg$react.forw
|
|
|
95
96
|
...styleProps.style,
|
|
96
97
|
...popoverProps.style
|
|
97
98
|
},
|
|
98
|
-
ref:
|
|
99
|
+
ref: objRef,
|
|
99
100
|
className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
|
|
100
101
|
'spectrum-Popover--withTip': !hideArrow,
|
|
101
102
|
'is-open': isOpen,
|
|
@@ -107,7 +108,7 @@ const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ (0, $cgMBg$react.forw
|
|
|
107
108
|
onDismiss: onDismissButtonPress
|
|
108
109
|
}), children, hideArrow ? null : /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement($f02bba55a62f20dd$var$Arrow, {
|
|
109
110
|
arrowProps: arrowProps,
|
|
110
|
-
isLandscape: $f02bba55a62f20dd$var$arrowPlacement[placement] === 'bottom',
|
|
111
|
+
isLandscape: placement != null ? $f02bba55a62f20dd$var$arrowPlacement[placement] === 'bottom' : false,
|
|
111
112
|
arrowRef: arrowRef,
|
|
112
113
|
primary: primary,
|
|
113
114
|
secondary: secondary,
|
|
@@ -187,9 +188,7 @@ function $f02bba55a62f20dd$var$Arrow(props) {
|
|
|
187
188
|
className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover-tip-triangle'),
|
|
188
189
|
d: pathData.join(' ')
|
|
189
190
|
}));
|
|
190
|
-
}
|
|
191
|
-
let $f02bba55a62f20dd$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $cgMBg$react.forwardRef)($f02bba55a62f20dd$var$Popover);
|
|
192
|
-
/**
|
|
191
|
+
} /**
|
|
193
192
|
* More explanation on popover tips.
|
|
194
193
|
* - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.
|
|
195
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.
|
|
@@ -203,4 +202,5 @@ let $f02bba55a62f20dd$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $cgMBg$react.f
|
|
|
203
202
|
* This seems to have done the trick.
|
|
204
203
|
*/
|
|
205
204
|
|
|
205
|
+
|
|
206
206
|
//# sourceMappingURL=Popover.main.js.map
|
package/dist/Popover.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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} from '@react-aria/utils';\nimport {Overlay} from './Overlay';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, 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: MutableRefObject<HTMLDivElement>\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\nfunction 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: RefObject<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\n let {size, borderWidth, arrowRef} = useArrowSize();\n const borderRadius = usePopoverBorderRadius(ref);\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: ref,\n maxHeight: null,\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={ref}\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={arrowPlacement[placement] === 'bottom'}\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\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\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"}
|
|
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"}
|
package/dist/Popover.mjs
CHANGED
|
@@ -7,8 +7,8 @@ import {Underlay as $76a452f4e3df11be$export$f360afc887607b02} from "./Underlay.
|
|
|
7
7
|
import {usePopover as $4kQ6h$usePopover, DismissButton as $4kQ6h$DismissButton} from "@react-aria/overlays";
|
|
8
8
|
import {useDOMRef as $4kQ6h$useDOMRef, useStyleProps as $4kQ6h$useStyleProps, classNames as $4kQ6h$classNames} from "@react-spectrum/utils";
|
|
9
9
|
import {useFocusWithin as $4kQ6h$useFocusWithin} from "@react-aria/interactions";
|
|
10
|
-
import {mergeProps as $4kQ6h$mergeProps, useLayoutEffect as $4kQ6h$useLayoutEffect} from "@react-aria/utils";
|
|
11
|
-
import $4kQ6h$react, {
|
|
10
|
+
import {useObjectRef as $4kQ6h$useObjectRef, mergeProps as $4kQ6h$mergeProps, useLayoutEffect as $4kQ6h$useLayoutEffect} from "@react-aria/utils";
|
|
11
|
+
import $4kQ6h$react, {forwardRef as $4kQ6h$forwardRef, useRef as $4kQ6h$useRef, useState as $4kQ6h$useState} from "react";
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
function $parcel$interopDefault(a) {
|
|
@@ -45,7 +45,7 @@ function $parcel$interopDefault(a) {
|
|
|
45
45
|
top: 'bottom',
|
|
46
46
|
bottom: 'bottom'
|
|
47
47
|
};
|
|
48
|
-
|
|
48
|
+
const $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $4kQ6h$forwardRef)(function Popover(props, ref) {
|
|
49
49
|
let { children: children, state: state, ...otherProps } = props;
|
|
50
50
|
let domRef = (0, $4kQ6h$useDOMRef)(ref);
|
|
51
51
|
let wrapperRef = (0, $4kQ6h$useRef)(null);
|
|
@@ -58,19 +58,20 @@ function $17b503f7de08fecc$var$Popover(props, ref) {
|
|
|
58
58
|
...props,
|
|
59
59
|
wrapperRef: wrapperRef
|
|
60
60
|
}, children));
|
|
61
|
-
}
|
|
61
|
+
});
|
|
62
62
|
const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $4kQ6h$forwardRef)((props, ref)=>{
|
|
63
63
|
let { children: children, isOpen: isOpen, hideArrow: hideArrow, isNonModal: isNonModal, enableBothDismissButtons: enableBothDismissButtons, state: state, wrapperRef: wrapperRef, onDismissButtonPress: onDismissButtonPress = ()=>state.close() } = props;
|
|
64
64
|
let { styleProps: styleProps } = (0, $4kQ6h$useStyleProps)(props);
|
|
65
|
+
let objRef = (0, $4kQ6h$useObjectRef)(ref);
|
|
65
66
|
let { size: size, borderWidth: borderWidth, arrowRef: arrowRef } = $17b503f7de08fecc$var$useArrowSize();
|
|
66
|
-
const borderRadius = $17b503f7de08fecc$var$usePopoverBorderRadius(
|
|
67
|
+
const borderRadius = $17b503f7de08fecc$var$usePopoverBorderRadius(objRef);
|
|
67
68
|
let borderDiagonal = borderWidth * Math.SQRT2;
|
|
68
69
|
let primary = size + borderDiagonal;
|
|
69
70
|
let secondary = primary * 2;
|
|
70
71
|
let { popoverProps: popoverProps, arrowProps: arrowProps, underlayProps: underlayProps, placement: placement } = (0, $4kQ6h$usePopover)({
|
|
71
72
|
...props,
|
|
72
|
-
popoverRef:
|
|
73
|
-
maxHeight:
|
|
73
|
+
popoverRef: objRef,
|
|
74
|
+
maxHeight: undefined,
|
|
74
75
|
arrowSize: hideArrow ? 0 : secondary,
|
|
75
76
|
arrowBoundaryOffset: borderRadius
|
|
76
77
|
}, state);
|
|
@@ -89,7 +90,7 @@ const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $4kQ6h$forwardRef
|
|
|
89
90
|
...styleProps.style,
|
|
90
91
|
...popoverProps.style
|
|
91
92
|
},
|
|
92
|
-
ref:
|
|
93
|
+
ref: objRef,
|
|
93
94
|
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
|
|
94
95
|
'spectrum-Popover--withTip': !hideArrow,
|
|
95
96
|
'is-open': isOpen,
|
|
@@ -101,7 +102,7 @@ const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $4kQ6h$forwardRef
|
|
|
101
102
|
onDismiss: onDismissButtonPress
|
|
102
103
|
}), children, hideArrow ? null : /*#__PURE__*/ (0, $4kQ6h$react).createElement($17b503f7de08fecc$var$Arrow, {
|
|
103
104
|
arrowProps: arrowProps,
|
|
104
|
-
isLandscape: $17b503f7de08fecc$var$arrowPlacement[placement] === 'bottom',
|
|
105
|
+
isLandscape: placement != null ? $17b503f7de08fecc$var$arrowPlacement[placement] === 'bottom' : false,
|
|
105
106
|
arrowRef: arrowRef,
|
|
106
107
|
primary: primary,
|
|
107
108
|
secondary: secondary,
|
|
@@ -181,9 +182,7 @@ function $17b503f7de08fecc$var$Arrow(props) {
|
|
|
181
182
|
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover-tip-triangle'),
|
|
182
183
|
d: pathData.join(' ')
|
|
183
184
|
}));
|
|
184
|
-
}
|
|
185
|
-
let $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $4kQ6h$forwardRef)($17b503f7de08fecc$var$Popover);
|
|
186
|
-
/**
|
|
185
|
+
} /**
|
|
187
186
|
* More explanation on popover tips.
|
|
188
187
|
* - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.
|
|
189
188
|
* This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.
|
|
@@ -197,5 +196,6 @@ let $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $4kQ6h$forward
|
|
|
197
196
|
* This seems to have done the trick.
|
|
198
197
|
*/
|
|
199
198
|
|
|
199
|
+
|
|
200
200
|
export {$17b503f7de08fecc$export$5b6b19405a83ff9d as Popover};
|
|
201
201
|
//# sourceMappingURL=Popover.module.js.map
|