@react-spectrum/overlays 5.6.0 → 5.6.2
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 +8 -8
- package/dist/Modal.module.js +7 -7
- package/dist/Modal.module.js.map +1 -1
- package/dist/OpenTransition.mjs +1 -1
- package/dist/Overlay.main.js +2 -2
- package/dist/Overlay.mjs +3 -3
- package/dist/Overlay.module.js +2 -2
- package/dist/Popover.main.js +23 -23
- package/dist/Popover.main.js.map +1 -1
- package/dist/Popover.mjs +24 -24
- package/dist/Popover.module.js +23 -23
- package/dist/Popover.module.js.map +1 -1
- package/dist/Tray.main.js +6 -6
- package/dist/Tray.main.js.map +1 -1
- package/dist/Tray.mjs +7 -7
- package/dist/Tray.module.js +6 -6
- package/dist/Tray.module.js.map +1 -1
- package/dist/Underlay.main.js +3 -3
- package/dist/Underlay.mjs +4 -4
- package/dist/Underlay.module.js +3 -3
- package/dist/modal_vars_css.mjs +1 -1
- package/dist/overlays_css.mjs +1 -1
- package/dist/popover_vars_css.mjs +1 -1
- package/dist/tray_vars_css.mjs +1 -1
- package/dist/underlay_vars_css.mjs +1 -1
- package/package.json +11 -11
- package/src/Modal.tsx +3 -3
- package/src/Popover.tsx +5 -5
- package/src/Tray.tsx +3 -3
package/dist/Modal.main.js
CHANGED
|
@@ -52,23 +52,23 @@ function $fc75a6aa7a2b905b$var$Modal(props, ref) {
|
|
|
52
52
|
}, children));
|
|
53
53
|
}
|
|
54
54
|
let $fc75a6aa7a2b905b$var$typeMap = {
|
|
55
|
-
fullscreen:
|
|
56
|
-
fullscreenTakeover:
|
|
55
|
+
fullscreen: 'fullscreen',
|
|
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
60
|
let typeVariant = $fc75a6aa7a2b905b$var$typeMap[type];
|
|
61
61
|
let { styleProps: styleProps } = (0, $aM0tW$reactspectrumutils.useStyleProps)(props);
|
|
62
62
|
let { modalProps: modalProps, underlayProps: underlayProps } = (0, $aM0tW$reactariaoverlays.useModalOverlay)(props, state, ref);
|
|
63
|
-
let wrapperClassName = (0, $aM0tW$reactspectrumutils.classNames)((0, ($parcel$interopDefault($86571b803f942ff3$exports))),
|
|
64
|
-
let modalClassName = (0, $aM0tW$reactspectrumutils.classNames)((0, ($parcel$interopDefault($86571b803f942ff3$exports))),
|
|
65
|
-
|
|
66
|
-
}, (0, $aM0tW$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e9a663ccb19ed1b0$exports))),
|
|
63
|
+
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
|
+
let modalClassName = (0, $aM0tW$reactspectrumutils.classNames)((0, ($parcel$interopDefault($86571b803f942ff3$exports))), 'spectrum-Modal', {
|
|
65
|
+
'is-open': isOpen
|
|
66
|
+
}, (0, $aM0tW$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e9a663ccb19ed1b0$exports))), 'spectrum-Modal', 'react-spectrum-Modal'), {
|
|
67
67
|
[`spectrum-Modal--${typeVariant}`]: typeVariant
|
|
68
68
|
}, styleProps.className);
|
|
69
69
|
let viewport = (0, $aM0tW$reactariautils.useViewportSize)();
|
|
70
70
|
let style = {
|
|
71
|
-
|
|
71
|
+
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
72
72
|
};
|
|
73
73
|
// Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
|
|
74
74
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($aM0tW$react))).createElement("div", {
|
package/dist/Modal.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBD,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,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,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBD,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,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,GAAqC;IACrG,IAAI,QAAC,IAAI,YAAE,QAAQ,SAAE,KAAK,UAAE,MAAM,cAAE,UAAU,EAAC,GAAG;IAClD,IAAI,cAAc,6BAAO,CAAC,KAAK;IAC/B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,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,YAAY,CAAC,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;AAEA,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","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, {forwardRef, MutableRefObject, ReactNode, useRef} from 'react';\nimport {Underlay} from './Underlay';\nimport {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: MutableRefObject<HTMLDivElement>\n}\n\nfunction 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: RefObject<HTMLDivElement | null>) {\n let {type, children, state, isOpen, wrapperRef} = props;\n let typeVariant = typeMap[type];\n let {styleProps} = useStyleProps(props);\n let {modalProps, underlayProps} = useModalOverlay(props, state, ref);\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={ref}\n className={modalClassName}\n data-testid=\"modal\">\n {children}\n </div>\n </div>\n </div>\n );\n});\n\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.main.js.map"}
|
package/dist/Modal.mjs
CHANGED
|
@@ -46,23 +46,23 @@ function $842084dfa182af65$var$Modal(props, ref) {
|
|
|
46
46
|
}, children));
|
|
47
47
|
}
|
|
48
48
|
let $842084dfa182af65$var$typeMap = {
|
|
49
|
-
fullscreen:
|
|
50
|
-
fullscreenTakeover:
|
|
49
|
+
fullscreen: 'fullscreen',
|
|
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
54
|
let typeVariant = $842084dfa182af65$var$typeMap[type];
|
|
55
55
|
let { styleProps: styleProps } = (0, $e9TuM$useStyleProps)(props);
|
|
56
56
|
let { modalProps: modalProps, underlayProps: underlayProps } = (0, $e9TuM$useModalOverlay)(props, state, ref);
|
|
57
|
-
let wrapperClassName = (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$modal_vars_cssmodulejs))),
|
|
58
|
-
let modalClassName = (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$modal_vars_cssmodulejs))),
|
|
59
|
-
|
|
60
|
-
}, (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$overlays_cssmodulejs))),
|
|
57
|
+
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
|
+
let modalClassName = (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$modal_vars_cssmodulejs))), 'spectrum-Modal', {
|
|
59
|
+
'is-open': isOpen
|
|
60
|
+
}, (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$overlays_cssmodulejs))), 'spectrum-Modal', 'react-spectrum-Modal'), {
|
|
61
61
|
[`spectrum-Modal--${typeVariant}`]: typeVariant
|
|
62
62
|
}, styleProps.className);
|
|
63
63
|
let viewport = (0, $e9TuM$useViewportSize)();
|
|
64
64
|
let style = {
|
|
65
|
-
|
|
65
|
+
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
66
66
|
};
|
|
67
67
|
// Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
|
|
68
68
|
return /*#__PURE__*/ (0, $e9TuM$react).createElement("div", {
|
|
@@ -85,4 +85,4 @@ let $842084dfa182af65$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $e9TuM$forward
|
|
|
85
85
|
|
|
86
86
|
|
|
87
87
|
export {$842084dfa182af65$export$2b77a92f1a5ad772 as Modal};
|
|
88
|
-
//# sourceMappingURL=Modal.
|
|
88
|
+
//# sourceMappingURL=Modal.module.js.map
|
package/dist/Modal.module.js
CHANGED
|
@@ -46,23 +46,23 @@ function $842084dfa182af65$var$Modal(props, ref) {
|
|
|
46
46
|
}, children));
|
|
47
47
|
}
|
|
48
48
|
let $842084dfa182af65$var$typeMap = {
|
|
49
|
-
fullscreen:
|
|
50
|
-
fullscreenTakeover:
|
|
49
|
+
fullscreen: 'fullscreen',
|
|
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
54
|
let typeVariant = $842084dfa182af65$var$typeMap[type];
|
|
55
55
|
let { styleProps: styleProps } = (0, $e9TuM$useStyleProps)(props);
|
|
56
56
|
let { modalProps: modalProps, underlayProps: underlayProps } = (0, $e9TuM$useModalOverlay)(props, state, ref);
|
|
57
|
-
let wrapperClassName = (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$modal_vars_cssmodulejs))),
|
|
58
|
-
let modalClassName = (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$modal_vars_cssmodulejs))),
|
|
59
|
-
|
|
60
|
-
}, (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$overlays_cssmodulejs))),
|
|
57
|
+
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
|
+
let modalClassName = (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$modal_vars_cssmodulejs))), 'spectrum-Modal', {
|
|
59
|
+
'is-open': isOpen
|
|
60
|
+
}, (0, $e9TuM$classNames)((0, ($parcel$interopDefault($e9TuM$overlays_cssmodulejs))), 'spectrum-Modal', 'react-spectrum-Modal'), {
|
|
61
61
|
[`spectrum-Modal--${typeVariant}`]: typeVariant
|
|
62
62
|
}, styleProps.className);
|
|
63
63
|
let viewport = (0, $e9TuM$useViewportSize)();
|
|
64
64
|
let style = {
|
|
65
|
-
|
|
65
|
+
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
66
66
|
};
|
|
67
67
|
// Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
|
|
68
68
|
return /*#__PURE__*/ (0, $e9TuM$react).createElement("div", {
|
package/dist/Modal.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBD,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,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,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBD,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,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,GAAqC;IACrG,IAAI,QAAC,IAAI,YAAE,QAAQ,SAAE,KAAK,UAAE,MAAM,cAAE,UAAU,EAAC,GAAG;IAClD,IAAI,cAAc,6BAAO,CAAC,KAAK;IAC/B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,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,YAAY,CAAC,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;AAEA,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","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, {forwardRef, MutableRefObject, ReactNode, useRef} from 'react';\nimport {Underlay} from './Underlay';\nimport {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: MutableRefObject<HTMLDivElement>\n}\n\nfunction 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: RefObject<HTMLDivElement | null>) {\n let {type, children, state, isOpen, wrapperRef} = props;\n let typeVariant = typeMap[type];\n let {styleProps} = useStyleProps(props);\n let {modalProps, underlayProps} = useModalOverlay(props, state, ref);\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={ref}\n className={modalClassName}\n data-testid=\"modal\">\n {children}\n </div>\n </div>\n </div>\n );\n});\n\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.module.js.map"}
|
package/dist/OpenTransition.mjs
CHANGED
package/dist/Overlay.main.js
CHANGED
|
@@ -53,8 +53,8 @@ function $2aebdc186fd41e87$var$Overlay(props, ref) {
|
|
|
53
53
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5XfZ1$react))).createElement((0, $5XfZ1$reactspectrumprovider.Provider), {
|
|
54
54
|
ref: ref,
|
|
55
55
|
UNSAFE_style: {
|
|
56
|
-
background:
|
|
57
|
-
isolation:
|
|
56
|
+
background: 'transparent',
|
|
57
|
+
isolation: 'isolate'
|
|
58
58
|
},
|
|
59
59
|
isDisabled: false
|
|
60
60
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5XfZ1$react))).createElement((0, $13f51cdc44d228b9$exports.OpenTransition), {
|
package/dist/Overlay.mjs
CHANGED
|
@@ -43,8 +43,8 @@ function $70305dc5fb729c3b$var$Overlay(props, ref) {
|
|
|
43
43
|
}, /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $eIXW5$Provider), {
|
|
44
44
|
ref: ref,
|
|
45
45
|
UNSAFE_style: {
|
|
46
|
-
background:
|
|
47
|
-
isolation:
|
|
46
|
+
background: 'transparent',
|
|
47
|
+
isolation: 'isolate'
|
|
48
48
|
},
|
|
49
49
|
isDisabled: false
|
|
50
50
|
}, /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $bc765a7a041310da$export$b847a40ee92eff38), {
|
|
@@ -63,4 +63,4 @@ let $70305dc5fb729c3b$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, $eIXW5$react).
|
|
|
63
63
|
|
|
64
64
|
|
|
65
65
|
export {$70305dc5fb729c3b$export$c6fdb837b070b4ff as Overlay};
|
|
66
|
-
//# sourceMappingURL=Overlay.
|
|
66
|
+
//# sourceMappingURL=Overlay.module.js.map
|
package/dist/Overlay.module.js
CHANGED
|
@@ -43,8 +43,8 @@ function $70305dc5fb729c3b$var$Overlay(props, ref) {
|
|
|
43
43
|
}, /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $eIXW5$Provider), {
|
|
44
44
|
ref: ref,
|
|
45
45
|
UNSAFE_style: {
|
|
46
|
-
background:
|
|
47
|
-
isolation:
|
|
46
|
+
background: 'transparent',
|
|
47
|
+
isolation: 'isolate'
|
|
48
48
|
},
|
|
49
49
|
isDisabled: false
|
|
50
50
|
}, /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $bc765a7a041310da$export$b847a40ee92eff38), {
|
package/dist/Popover.main.js
CHANGED
|
@@ -46,10 +46,10 @@ $parcel$export(module.exports, "Popover", () => $f02bba55a62f20dd$export$5b6b194
|
|
|
46
46
|
* the path always starts at 0 so that it perfectly overlaps the popover's border.
|
|
47
47
|
* See bottom of file for more explanation.
|
|
48
48
|
*/ let $f02bba55a62f20dd$var$arrowPlacement = {
|
|
49
|
-
left:
|
|
50
|
-
right:
|
|
51
|
-
top:
|
|
52
|
-
bottom:
|
|
49
|
+
left: 'right',
|
|
50
|
+
right: 'right',
|
|
51
|
+
top: 'bottom',
|
|
52
|
+
bottom: 'bottom'
|
|
53
53
|
};
|
|
54
54
|
function $f02bba55a62f20dd$var$Popover(props, ref) {
|
|
55
55
|
let { children: children, state: state, ...otherProps } = props;
|
|
@@ -96,18 +96,18 @@ const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ (0, $cgMBg$react.forw
|
|
|
96
96
|
...popoverProps.style
|
|
97
97
|
},
|
|
98
98
|
ref: ref,
|
|
99
|
-
className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))),
|
|
100
|
-
|
|
101
|
-
|
|
99
|
+
className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
|
|
100
|
+
'spectrum-Popover--withTip': !hideArrow,
|
|
101
|
+
'is-open': isOpen,
|
|
102
102
|
[`is-open--${placement}`]: isOpen
|
|
103
|
-
}, (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e9a663ccb19ed1b0$exports))),
|
|
103
|
+
}, (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e9a663ccb19ed1b0$exports))), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
|
|
104
104
|
role: "presentation",
|
|
105
105
|
"data-testid": "popover"
|
|
106
106
|
}, (!isNonModal || enableBothDismissButtons) && /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement((0, $cgMBg$reactariaoverlays.DismissButton), {
|
|
107
107
|
onDismiss: onDismissButtonPress
|
|
108
108
|
}), children, hideArrow ? null : /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement($f02bba55a62f20dd$var$Arrow, {
|
|
109
109
|
arrowProps: arrowProps,
|
|
110
|
-
isLandscape: $f02bba55a62f20dd$var$arrowPlacement[placement] ===
|
|
110
|
+
isLandscape: $f02bba55a62f20dd$var$arrowPlacement[placement] === 'bottom',
|
|
111
111
|
arrowRef: arrowRef,
|
|
112
112
|
primary: primary,
|
|
113
113
|
secondary: secondary,
|
|
@@ -121,7 +121,7 @@ function $f02bba55a62f20dd$var$usePopoverBorderRadius(popoverRef) {
|
|
|
121
121
|
(0, $cgMBg$reactariautils.useLayoutEffect)(()=>{
|
|
122
122
|
if (popoverRef.current) {
|
|
123
123
|
let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
|
|
124
|
-
if (spectrumBorderRadius !==
|
|
124
|
+
if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
|
|
125
125
|
}
|
|
126
126
|
}, [
|
|
127
127
|
popoverRef
|
|
@@ -135,10 +135,10 @@ function $f02bba55a62f20dd$var$useArrowSize() {
|
|
|
135
135
|
// get the css value for the tip size and divide it by 2 for this arrow implementation
|
|
136
136
|
(0, $cgMBg$reactariautils.useLayoutEffect)(()=>{
|
|
137
137
|
if (arrowRef.current) {
|
|
138
|
-
let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue(
|
|
139
|
-
if (spectrumTipWidth !==
|
|
140
|
-
let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue(
|
|
141
|
-
if (spectrumBorderWidth !==
|
|
138
|
+
let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-size');
|
|
139
|
+
if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
|
|
140
|
+
let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
|
|
141
|
+
if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
|
|
142
142
|
}
|
|
143
143
|
}, []);
|
|
144
144
|
return {
|
|
@@ -156,23 +156,23 @@ function $f02bba55a62f20dd$var$Arrow(props) {
|
|
|
156
156
|
let secondaryMiddle = secondary / 2;
|
|
157
157
|
let secondaryEnd = secondary - halfBorderDiagonal;
|
|
158
158
|
let pathData = isLandscape ? [
|
|
159
|
-
|
|
159
|
+
'M',
|
|
160
160
|
secondaryStart,
|
|
161
161
|
primaryStart,
|
|
162
|
-
|
|
162
|
+
'L',
|
|
163
163
|
secondaryMiddle,
|
|
164
164
|
primaryEnd,
|
|
165
|
-
|
|
165
|
+
'L',
|
|
166
166
|
secondaryEnd,
|
|
167
167
|
primaryStart
|
|
168
168
|
] : [
|
|
169
|
-
|
|
169
|
+
'M',
|
|
170
170
|
primaryStart,
|
|
171
171
|
secondaryStart,
|
|
172
|
-
|
|
172
|
+
'L',
|
|
173
173
|
primaryEnd,
|
|
174
174
|
secondaryMiddle,
|
|
175
|
-
|
|
175
|
+
'L',
|
|
176
176
|
primaryStart,
|
|
177
177
|
secondaryEnd
|
|
178
178
|
];
|
|
@@ -180,12 +180,12 @@ function $f02bba55a62f20dd$var$Arrow(props) {
|
|
|
180
180
|
xmlns: "http://www.w3.org/svg/2000",
|
|
181
181
|
width: Math.ceil(isLandscape ? secondary : primary),
|
|
182
182
|
height: Math.ceil(isLandscape ? primary : secondary),
|
|
183
|
-
className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))),
|
|
183
|
+
className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover-tip'),
|
|
184
184
|
ref: arrowRef,
|
|
185
185
|
...arrowProps
|
|
186
186
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($cgMBg$react))).createElement("path", {
|
|
187
|
-
className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))),
|
|
188
|
-
d: pathData.join(
|
|
187
|
+
className: (0, $cgMBg$reactspectrumutils.classNames)((0, ($parcel$interopDefault($16e1dca4664d0b1c$exports))), 'spectrum-Popover-tip-triangle'),
|
|
188
|
+
d: pathData.join(' ')
|
|
189
189
|
}));
|
|
190
190
|
}
|
|
191
191
|
let $f02bba55a62f20dd$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $cgMBg$react.forwardRef)($f02bba55a62f20dd$var$Popover);
|
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, 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, RefObject, 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>,\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>) => {\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>) {\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} 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"}
|
package/dist/Popover.mjs
CHANGED
|
@@ -40,10 +40,10 @@ function $parcel$interopDefault(a) {
|
|
|
40
40
|
* the path always starts at 0 so that it perfectly overlaps the popover's border.
|
|
41
41
|
* See bottom of file for more explanation.
|
|
42
42
|
*/ let $17b503f7de08fecc$var$arrowPlacement = {
|
|
43
|
-
left:
|
|
44
|
-
right:
|
|
45
|
-
top:
|
|
46
|
-
bottom:
|
|
43
|
+
left: 'right',
|
|
44
|
+
right: 'right',
|
|
45
|
+
top: 'bottom',
|
|
46
|
+
bottom: 'bottom'
|
|
47
47
|
};
|
|
48
48
|
function $17b503f7de08fecc$var$Popover(props, ref) {
|
|
49
49
|
let { children: children, state: state, ...otherProps } = props;
|
|
@@ -90,18 +90,18 @@ const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $4kQ6h$forwardRef
|
|
|
90
90
|
...popoverProps.style
|
|
91
91
|
},
|
|
92
92
|
ref: ref,
|
|
93
|
-
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))),
|
|
94
|
-
|
|
95
|
-
|
|
93
|
+
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
|
|
94
|
+
'spectrum-Popover--withTip': !hideArrow,
|
|
95
|
+
'is-open': isOpen,
|
|
96
96
|
[`is-open--${placement}`]: isOpen
|
|
97
|
-
}, (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$overlays_cssmodulejs))),
|
|
97
|
+
}, (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$overlays_cssmodulejs))), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
|
|
98
98
|
role: "presentation",
|
|
99
99
|
"data-testid": "popover"
|
|
100
100
|
}, (!isNonModal || enableBothDismissButtons) && /*#__PURE__*/ (0, $4kQ6h$react).createElement((0, $4kQ6h$DismissButton), {
|
|
101
101
|
onDismiss: onDismissButtonPress
|
|
102
102
|
}), children, hideArrow ? null : /*#__PURE__*/ (0, $4kQ6h$react).createElement($17b503f7de08fecc$var$Arrow, {
|
|
103
103
|
arrowProps: arrowProps,
|
|
104
|
-
isLandscape: $17b503f7de08fecc$var$arrowPlacement[placement] ===
|
|
104
|
+
isLandscape: $17b503f7de08fecc$var$arrowPlacement[placement] === 'bottom',
|
|
105
105
|
arrowRef: arrowRef,
|
|
106
106
|
primary: primary,
|
|
107
107
|
secondary: secondary,
|
|
@@ -115,7 +115,7 @@ function $17b503f7de08fecc$var$usePopoverBorderRadius(popoverRef) {
|
|
|
115
115
|
(0, $4kQ6h$useLayoutEffect)(()=>{
|
|
116
116
|
if (popoverRef.current) {
|
|
117
117
|
let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
|
|
118
|
-
if (spectrumBorderRadius !==
|
|
118
|
+
if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
|
|
119
119
|
}
|
|
120
120
|
}, [
|
|
121
121
|
popoverRef
|
|
@@ -129,10 +129,10 @@ function $17b503f7de08fecc$var$useArrowSize() {
|
|
|
129
129
|
// get the css value for the tip size and divide it by 2 for this arrow implementation
|
|
130
130
|
(0, $4kQ6h$useLayoutEffect)(()=>{
|
|
131
131
|
if (arrowRef.current) {
|
|
132
|
-
let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue(
|
|
133
|
-
if (spectrumTipWidth !==
|
|
134
|
-
let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue(
|
|
135
|
-
if (spectrumBorderWidth !==
|
|
132
|
+
let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-size');
|
|
133
|
+
if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
|
|
134
|
+
let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
|
|
135
|
+
if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
|
|
136
136
|
}
|
|
137
137
|
}, []);
|
|
138
138
|
return {
|
|
@@ -150,23 +150,23 @@ function $17b503f7de08fecc$var$Arrow(props) {
|
|
|
150
150
|
let secondaryMiddle = secondary / 2;
|
|
151
151
|
let secondaryEnd = secondary - halfBorderDiagonal;
|
|
152
152
|
let pathData = isLandscape ? [
|
|
153
|
-
|
|
153
|
+
'M',
|
|
154
154
|
secondaryStart,
|
|
155
155
|
primaryStart,
|
|
156
|
-
|
|
156
|
+
'L',
|
|
157
157
|
secondaryMiddle,
|
|
158
158
|
primaryEnd,
|
|
159
|
-
|
|
159
|
+
'L',
|
|
160
160
|
secondaryEnd,
|
|
161
161
|
primaryStart
|
|
162
162
|
] : [
|
|
163
|
-
|
|
163
|
+
'M',
|
|
164
164
|
primaryStart,
|
|
165
165
|
secondaryStart,
|
|
166
|
-
|
|
166
|
+
'L',
|
|
167
167
|
primaryEnd,
|
|
168
168
|
secondaryMiddle,
|
|
169
|
-
|
|
169
|
+
'L',
|
|
170
170
|
primaryStart,
|
|
171
171
|
secondaryEnd
|
|
172
172
|
];
|
|
@@ -174,12 +174,12 @@ function $17b503f7de08fecc$var$Arrow(props) {
|
|
|
174
174
|
xmlns: "http://www.w3.org/svg/2000",
|
|
175
175
|
width: Math.ceil(isLandscape ? secondary : primary),
|
|
176
176
|
height: Math.ceil(isLandscape ? primary : secondary),
|
|
177
|
-
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))),
|
|
177
|
+
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover-tip'),
|
|
178
178
|
ref: arrowRef,
|
|
179
179
|
...arrowProps
|
|
180
180
|
}, /*#__PURE__*/ (0, $4kQ6h$react).createElement("path", {
|
|
181
|
-
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))),
|
|
182
|
-
d: pathData.join(
|
|
181
|
+
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover-tip-triangle'),
|
|
182
|
+
d: pathData.join(' ')
|
|
183
183
|
}));
|
|
184
184
|
}
|
|
185
185
|
let $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $4kQ6h$forwardRef)($17b503f7de08fecc$var$Popover);
|
|
@@ -198,4 +198,4 @@ let $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $4kQ6h$forward
|
|
|
198
198
|
*/
|
|
199
199
|
|
|
200
200
|
export {$17b503f7de08fecc$export$5b6b19405a83ff9d as Popover};
|
|
201
|
-
//# sourceMappingURL=Popover.
|
|
201
|
+
//# sourceMappingURL=Popover.module.js.map
|
package/dist/Popover.module.js
CHANGED
|
@@ -40,10 +40,10 @@ function $parcel$interopDefault(a) {
|
|
|
40
40
|
* the path always starts at 0 so that it perfectly overlaps the popover's border.
|
|
41
41
|
* See bottom of file for more explanation.
|
|
42
42
|
*/ let $17b503f7de08fecc$var$arrowPlacement = {
|
|
43
|
-
left:
|
|
44
|
-
right:
|
|
45
|
-
top:
|
|
46
|
-
bottom:
|
|
43
|
+
left: 'right',
|
|
44
|
+
right: 'right',
|
|
45
|
+
top: 'bottom',
|
|
46
|
+
bottom: 'bottom'
|
|
47
47
|
};
|
|
48
48
|
function $17b503f7de08fecc$var$Popover(props, ref) {
|
|
49
49
|
let { children: children, state: state, ...otherProps } = props;
|
|
@@ -90,18 +90,18 @@ const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $4kQ6h$forwardRef
|
|
|
90
90
|
...popoverProps.style
|
|
91
91
|
},
|
|
92
92
|
ref: ref,
|
|
93
|
-
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))),
|
|
94
|
-
|
|
95
|
-
|
|
93
|
+
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
|
|
94
|
+
'spectrum-Popover--withTip': !hideArrow,
|
|
95
|
+
'is-open': isOpen,
|
|
96
96
|
[`is-open--${placement}`]: isOpen
|
|
97
|
-
}, (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$overlays_cssmodulejs))),
|
|
97
|
+
}, (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$overlays_cssmodulejs))), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
|
|
98
98
|
role: "presentation",
|
|
99
99
|
"data-testid": "popover"
|
|
100
100
|
}, (!isNonModal || enableBothDismissButtons) && /*#__PURE__*/ (0, $4kQ6h$react).createElement((0, $4kQ6h$DismissButton), {
|
|
101
101
|
onDismiss: onDismissButtonPress
|
|
102
102
|
}), children, hideArrow ? null : /*#__PURE__*/ (0, $4kQ6h$react).createElement($17b503f7de08fecc$var$Arrow, {
|
|
103
103
|
arrowProps: arrowProps,
|
|
104
|
-
isLandscape: $17b503f7de08fecc$var$arrowPlacement[placement] ===
|
|
104
|
+
isLandscape: $17b503f7de08fecc$var$arrowPlacement[placement] === 'bottom',
|
|
105
105
|
arrowRef: arrowRef,
|
|
106
106
|
primary: primary,
|
|
107
107
|
secondary: secondary,
|
|
@@ -115,7 +115,7 @@ function $17b503f7de08fecc$var$usePopoverBorderRadius(popoverRef) {
|
|
|
115
115
|
(0, $4kQ6h$useLayoutEffect)(()=>{
|
|
116
116
|
if (popoverRef.current) {
|
|
117
117
|
let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
|
|
118
|
-
if (spectrumBorderRadius !==
|
|
118
|
+
if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
|
|
119
119
|
}
|
|
120
120
|
}, [
|
|
121
121
|
popoverRef
|
|
@@ -129,10 +129,10 @@ function $17b503f7de08fecc$var$useArrowSize() {
|
|
|
129
129
|
// get the css value for the tip size and divide it by 2 for this arrow implementation
|
|
130
130
|
(0, $4kQ6h$useLayoutEffect)(()=>{
|
|
131
131
|
if (arrowRef.current) {
|
|
132
|
-
let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue(
|
|
133
|
-
if (spectrumTipWidth !==
|
|
134
|
-
let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue(
|
|
135
|
-
if (spectrumBorderWidth !==
|
|
132
|
+
let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-size');
|
|
133
|
+
if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
|
|
134
|
+
let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
|
|
135
|
+
if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
|
|
136
136
|
}
|
|
137
137
|
}, []);
|
|
138
138
|
return {
|
|
@@ -150,23 +150,23 @@ function $17b503f7de08fecc$var$Arrow(props) {
|
|
|
150
150
|
let secondaryMiddle = secondary / 2;
|
|
151
151
|
let secondaryEnd = secondary - halfBorderDiagonal;
|
|
152
152
|
let pathData = isLandscape ? [
|
|
153
|
-
|
|
153
|
+
'M',
|
|
154
154
|
secondaryStart,
|
|
155
155
|
primaryStart,
|
|
156
|
-
|
|
156
|
+
'L',
|
|
157
157
|
secondaryMiddle,
|
|
158
158
|
primaryEnd,
|
|
159
|
-
|
|
159
|
+
'L',
|
|
160
160
|
secondaryEnd,
|
|
161
161
|
primaryStart
|
|
162
162
|
] : [
|
|
163
|
-
|
|
163
|
+
'M',
|
|
164
164
|
primaryStart,
|
|
165
165
|
secondaryStart,
|
|
166
|
-
|
|
166
|
+
'L',
|
|
167
167
|
primaryEnd,
|
|
168
168
|
secondaryMiddle,
|
|
169
|
-
|
|
169
|
+
'L',
|
|
170
170
|
primaryStart,
|
|
171
171
|
secondaryEnd
|
|
172
172
|
];
|
|
@@ -174,12 +174,12 @@ function $17b503f7de08fecc$var$Arrow(props) {
|
|
|
174
174
|
xmlns: "http://www.w3.org/svg/2000",
|
|
175
175
|
width: Math.ceil(isLandscape ? secondary : primary),
|
|
176
176
|
height: Math.ceil(isLandscape ? primary : secondary),
|
|
177
|
-
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))),
|
|
177
|
+
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover-tip'),
|
|
178
178
|
ref: arrowRef,
|
|
179
179
|
...arrowProps
|
|
180
180
|
}, /*#__PURE__*/ (0, $4kQ6h$react).createElement("path", {
|
|
181
|
-
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))),
|
|
182
|
-
d: pathData.join(
|
|
181
|
+
className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover-tip-triangle'),
|
|
182
|
+
d: pathData.join(' ')
|
|
183
183
|
}));
|
|
184
184
|
}
|
|
185
185
|
let $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $4kQ6h$forwardRef)($17b503f7de08fecc$var$Popover);
|
|
@@ -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, 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, RefObject, 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>,\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>) => {\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>) {\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.module.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} 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.module.js.map"}
|
package/dist/Tray.main.js
CHANGED
|
@@ -67,13 +67,13 @@ let $6b386deda21be662$var$TrayWrapper = /*#__PURE__*/ (0, $fWgpJ$react.forwardRe
|
|
|
67
67
|
// is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
|
|
68
68
|
let viewport = (0, $fWgpJ$reactariautils.useViewportSize)();
|
|
69
69
|
let wrapperStyle = {
|
|
70
|
-
|
|
70
|
+
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
71
71
|
};
|
|
72
|
-
let wrapperClassName = (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3ba16c5c57f2a636$exports))),
|
|
73
|
-
let className = (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3ba16c5c57f2a636$exports))),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}, (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e9a663ccb19ed1b0$exports))),
|
|
72
|
+
let wrapperClassName = (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3ba16c5c57f2a636$exports))), 'spectrum-Tray-wrapper');
|
|
73
|
+
let className = (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3ba16c5c57f2a636$exports))), 'spectrum-Tray', {
|
|
74
|
+
'is-open': isOpen,
|
|
75
|
+
'spectrum-Tray--fixedHeight': isFixedHeight
|
|
76
|
+
}, (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e9a663ccb19ed1b0$exports))), 'spectrum-Tray', 'react-spectrum-Tray'), styleProps.className);
|
|
77
77
|
// Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
|
|
78
78
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($fWgpJ$react))).createElement("div", {
|
|
79
79
|
ref: wrapperRef
|
package/dist/Tray.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBD,SAAS,2BAAK,KAAgB,EAAE,GAA2B;IACzD,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;QAAa,GAAG,KAAK;QAAE,YAAY;QAAY,KAAK;OAClD;AAIT;AAEA,IAAI,kDAAc,CAAA,GAAA,uBAAS,EAAE,SAAU,KAAuB,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBD,SAAS,2BAAK,KAAgB,EAAE,GAA2B;IACzD,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;QAAa,GAAG,KAAK;QAAE,YAAY;QAAY,KAAK;OAClD;AAIT;AAEA,IAAI,kDAAc,CAAA,GAAA,uBAAS,EAAE,SAAU,KAAuB,EAAE,GAAqC;IACnG,IAAI,YACF,QAAQ,UACR,MAAM,iBACN,aAAa,SACb,KAAK,cACL,UAAU,EACX,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,cAAC,UAAU,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,wCAAc,EAAE;QAChD,GAAG,KAAK;QACR,eAAe;IACjB,GAAG,OAAO;IAEV,oFAAoF;IACpF,sFAAsF;IACtF,6EAA6E;IAC7E,sFAAsF;IACtF,uFAAuF;IACvF,0FAA0F;IAC1F,2FAA2F;IAC3F,IAAI,WAAW,CAAA,GAAA,qCAAc;IAC7B,IAAI,eAAoB;QACtB,qCAAqC,SAAS,MAAM,GAAG;IACzD;IAEA,IAAI,mBAAmB,CAAA,GAAA,oCAAS,EAC9B,CAAA,GAAA,mDAAS,GACT;IAGF,IAAI,YAAY,CAAA,GAAA,oCAAS,EACvB,CAAA,GAAA,mDAAS,GACT,iBACA;QACE,WAAW;QACX,8BAA8B;IAChC,GACA,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAa,GACb,iBACA,wBAEF,WAAW,SAAS;IAGtB,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,WAAW;QACX,KAAK;QACL,eAAY;qBACZ,0DAAC,CAAA,GAAA,sCAAY;QAAE,WAAW,MAAM,KAAK;QACpC,wBACD,0DAAC,CAAA,GAAA,sCAAY;QAAE,WAAW,MAAM,KAAK;;AAK/C;AAEA,IAAI,0DAAQ,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/overlays/src/Tray.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, DismissButton, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, RefObject, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, useRef} from 'react';\nimport trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';\nimport {Underlay} from './Underlay';\nimport {useViewportSize} from '@react-aria/utils';\n\ninterface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {\n children: ReactNode,\n state: OverlayTriggerState,\n isFixedHeight?: boolean\n}\n\ninterface TrayWrapperProps extends TrayProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\nfunction Tray(props: TrayProps, 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 <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </TrayWrapper>\n </Overlay>\n );\n}\n\nlet TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<HTMLDivElement | null>) {\n let {\n children,\n isOpen,\n isFixedHeight,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n\n let {modalProps, underlayProps} = useModalOverlay({\n ...props,\n isDismissable: true\n }, state, ref);\n\n // We need to measure the window's height in JS rather than using percentages in CSS\n // so that contents (e.g. menu) can inherit the max-height properly. Using percentages\n // does not work properly because there is nothing to base the percentage on.\n // We cannot use vh units because mobile browsers adjust the window height dynamically\n // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.\n // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard\n // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.\n let viewport = useViewportSize();\n let wrapperStyle: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n let wrapperClassName = classNames(\n trayStyles,\n 'spectrum-Tray-wrapper'\n );\n\n let className = classNames(\n trayStyles,\n 'spectrum-Tray',\n {\n 'is-open': isOpen,\n 'spectrum-Tray--fixedHeight': isFixedHeight\n },\n classNames(\n overrideStyles,\n 'spectrum-Tray',\n 'react-spectrum-Tray'\n ),\n styleProps.className\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={wrapperStyle}>\n <div\n {...styleProps}\n {...modalProps}\n className={className}\n ref={ref}\n data-testid=\"tray\">\n <DismissButton onDismiss={state.close} />\n {children}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n </div>\n );\n});\n\nlet _Tray = forwardRef(Tray);\nexport {_Tray as Tray};\n"],"names":[],"version":3,"file":"Tray.main.js.map"}
|
package/dist/Tray.mjs
CHANGED
|
@@ -61,13 +61,13 @@ let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ (0, $3XF9U$forwardRef)(fun
|
|
|
61
61
|
// is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
|
|
62
62
|
let viewport = (0, $3XF9U$useViewportSize)();
|
|
63
63
|
let wrapperStyle = {
|
|
64
|
-
|
|
64
|
+
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
65
65
|
};
|
|
66
|
-
let wrapperClassName = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))),
|
|
67
|
-
let className = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))),
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
}, (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$overlays_cssmodulejs))),
|
|
66
|
+
let wrapperClassName = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))), 'spectrum-Tray-wrapper');
|
|
67
|
+
let className = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))), 'spectrum-Tray', {
|
|
68
|
+
'is-open': isOpen,
|
|
69
|
+
'spectrum-Tray--fixedHeight': isFixedHeight
|
|
70
|
+
}, (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$overlays_cssmodulejs))), 'spectrum-Tray', 'react-spectrum-Tray'), styleProps.className);
|
|
71
71
|
// Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
|
|
72
72
|
return /*#__PURE__*/ (0, $3XF9U$react).createElement("div", {
|
|
73
73
|
ref: wrapperRef
|
|
@@ -93,4 +93,4 @@ let $1afc87f3d16a5a1c$export$4589ed81930b555c = /*#__PURE__*/ (0, $3XF9U$forward
|
|
|
93
93
|
|
|
94
94
|
|
|
95
95
|
export {$1afc87f3d16a5a1c$export$4589ed81930b555c as Tray};
|
|
96
|
-
//# sourceMappingURL=Tray.
|
|
96
|
+
//# sourceMappingURL=Tray.module.js.map
|
package/dist/Tray.module.js
CHANGED
|
@@ -61,13 +61,13 @@ let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ (0, $3XF9U$forwardRef)(fun
|
|
|
61
61
|
// is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
|
|
62
62
|
let viewport = (0, $3XF9U$useViewportSize)();
|
|
63
63
|
let wrapperStyle = {
|
|
64
|
-
|
|
64
|
+
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
65
65
|
};
|
|
66
|
-
let wrapperClassName = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))),
|
|
67
|
-
let className = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))),
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
}, (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$overlays_cssmodulejs))),
|
|
66
|
+
let wrapperClassName = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))), 'spectrum-Tray-wrapper');
|
|
67
|
+
let className = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))), 'spectrum-Tray', {
|
|
68
|
+
'is-open': isOpen,
|
|
69
|
+
'spectrum-Tray--fixedHeight': isFixedHeight
|
|
70
|
+
}, (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$overlays_cssmodulejs))), 'spectrum-Tray', 'react-spectrum-Tray'), styleProps.className);
|
|
71
71
|
// Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
|
|
72
72
|
return /*#__PURE__*/ (0, $3XF9U$react).createElement("div", {
|
|
73
73
|
ref: wrapperRef
|
package/dist/Tray.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBD,SAAS,2BAAK,KAAgB,EAAE,GAA2B;IACzD,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;QAAa,GAAG,KAAK;QAAE,YAAY;QAAY,KAAK;OAClD;AAIT;AAEA,IAAI,kDAAc,CAAA,GAAA,iBAAS,EAAE,SAAU,KAAuB,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBD,SAAS,2BAAK,KAAgB,EAAE,GAA2B;IACzD,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;QAAa,GAAG,KAAK;QAAE,YAAY;QAAY,KAAK;OAClD;AAIT;AAEA,IAAI,kDAAc,CAAA,GAAA,iBAAS,EAAE,SAAU,KAAuB,EAAE,GAAqC;IACnG,IAAI,YACF,QAAQ,UACR,MAAM,iBACN,aAAa,SACb,KAAK,cACL,UAAU,EACX,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAEjC,IAAI,cAAC,UAAU,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,sBAAc,EAAE;QAChD,GAAG,KAAK;QACR,eAAe;IACjB,GAAG,OAAO;IAEV,oFAAoF;IACpF,sFAAsF;IACtF,6EAA6E;IAC7E,sFAAsF;IACtF,uFAAuF;IACvF,0FAA0F;IAC1F,2FAA2F;IAC3F,IAAI,WAAW,CAAA,GAAA,sBAAc;IAC7B,IAAI,eAAoB;QACtB,qCAAqC,SAAS,MAAM,GAAG;IACzD;IAEA,IAAI,mBAAmB,CAAA,GAAA,iBAAS,EAC9B,CAAA,GAAA,sDAAS,GACT;IAGF,IAAI,YAAY,CAAA,GAAA,iBAAS,EACvB,CAAA,GAAA,sDAAS,GACT,iBACA;QACE,WAAW;QACX,8BAA8B;IAChC,GACA,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,qDAAa,GACb,iBACA,wBAEF,WAAW,SAAS;IAGtB,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,WAAW;QACX,KAAK;QACL,eAAY;qBACZ,gCAAC,CAAA,GAAA,oBAAY;QAAE,WAAW,MAAM,KAAK;QACpC,wBACD,gCAAC,CAAA,GAAA,oBAAY;QAAE,WAAW,MAAM,KAAK;;AAK/C;AAEA,IAAI,0DAAQ,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/overlays/src/Tray.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, DismissButton, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, RefObject, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {forwardRef, MutableRefObject, ReactNode, useRef} from 'react';\nimport trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';\nimport {Underlay} from './Underlay';\nimport {useViewportSize} from '@react-aria/utils';\n\ninterface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {\n children: ReactNode,\n state: OverlayTriggerState,\n isFixedHeight?: boolean\n}\n\ninterface TrayWrapperProps extends TrayProps {\n isOpen?: boolean,\n wrapperRef: MutableRefObject<HTMLDivElement>\n}\n\nfunction Tray(props: TrayProps, 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 <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </TrayWrapper>\n </Overlay>\n );\n}\n\nlet TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<HTMLDivElement | null>) {\n let {\n children,\n isOpen,\n isFixedHeight,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n\n let {modalProps, underlayProps} = useModalOverlay({\n ...props,\n isDismissable: true\n }, state, ref);\n\n // We need to measure the window's height in JS rather than using percentages in CSS\n // so that contents (e.g. menu) can inherit the max-height properly. Using percentages\n // does not work properly because there is nothing to base the percentage on.\n // We cannot use vh units because mobile browsers adjust the window height dynamically\n // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.\n // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard\n // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.\n let viewport = useViewportSize();\n let wrapperStyle: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px'\n };\n\n let wrapperClassName = classNames(\n trayStyles,\n 'spectrum-Tray-wrapper'\n );\n\n let className = classNames(\n trayStyles,\n 'spectrum-Tray',\n {\n 'is-open': isOpen,\n 'spectrum-Tray--fixedHeight': isFixedHeight\n },\n classNames(\n overrideStyles,\n 'spectrum-Tray',\n 'react-spectrum-Tray'\n ),\n styleProps.className\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={wrapperStyle}>\n <div\n {...styleProps}\n {...modalProps}\n className={className}\n ref={ref}\n data-testid=\"tray\">\n <DismissButton onDismiss={state.close} />\n {children}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n </div>\n );\n});\n\nlet _Tray = forwardRef(Tray);\nexport {_Tray as Tray};\n"],"names":[],"version":3,"file":"Tray.module.js.map"}
|
package/dist/Underlay.main.js
CHANGED
|
@@ -30,9 +30,9 @@ function $b900e75089bdd9cd$export$f360afc887607b02({ isOpen: isOpen, isTranspare
|
|
|
30
30
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($hjXq7$react))).createElement("div", {
|
|
31
31
|
"data-testid": "underlay",
|
|
32
32
|
...otherProps,
|
|
33
|
-
className: (0, $hjXq7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($42908e91b4c5f428$exports))),
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
className: (0, $hjXq7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($42908e91b4c5f428$exports))), 'spectrum-Underlay', {
|
|
34
|
+
'is-open': isOpen,
|
|
35
|
+
'spectrum-Underlay--transparent': isTransparent
|
|
36
36
|
})
|
|
37
37
|
});
|
|
38
38
|
}
|
package/dist/Underlay.mjs
CHANGED
|
@@ -24,13 +24,13 @@ function $76a452f4e3df11be$export$f360afc887607b02({ isOpen: isOpen, isTranspare
|
|
|
24
24
|
return /*#__PURE__*/ (0, $j2iDu$react).createElement("div", {
|
|
25
25
|
"data-testid": "underlay",
|
|
26
26
|
...otherProps,
|
|
27
|
-
className: (0, $j2iDu$classNames)((0, ($parcel$interopDefault($j2iDu$underlay_vars_cssmodulejs))),
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
className: (0, $j2iDu$classNames)((0, ($parcel$interopDefault($j2iDu$underlay_vars_cssmodulejs))), 'spectrum-Underlay', {
|
|
28
|
+
'is-open': isOpen,
|
|
29
|
+
'spectrum-Underlay--transparent': isTransparent
|
|
30
30
|
})
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
export {$76a452f4e3df11be$export$f360afc887607b02 as Underlay};
|
|
36
|
-
//# sourceMappingURL=Underlay.
|
|
36
|
+
//# sourceMappingURL=Underlay.module.js.map
|
package/dist/Underlay.module.js
CHANGED
|
@@ -24,9 +24,9 @@ function $76a452f4e3df11be$export$f360afc887607b02({ isOpen: isOpen, isTranspare
|
|
|
24
24
|
return /*#__PURE__*/ (0, $j2iDu$react).createElement("div", {
|
|
25
25
|
"data-testid": "underlay",
|
|
26
26
|
...otherProps,
|
|
27
|
-
className: (0, $j2iDu$classNames)((0, ($parcel$interopDefault($j2iDu$underlay_vars_cssmodulejs))),
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
className: (0, $j2iDu$classNames)((0, ($parcel$interopDefault($j2iDu$underlay_vars_cssmodulejs))), 'spectrum-Underlay', {
|
|
28
|
+
'is-open': isOpen,
|
|
29
|
+
'spectrum-Underlay--transparent': isTransparent
|
|
30
30
|
})
|
|
31
31
|
});
|
|
32
32
|
}
|
package/dist/modal_vars_css.mjs
CHANGED
package/dist/overlays_css.mjs
CHANGED
package/dist/tray_vars_css.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/overlays",
|
|
3
|
-
"version": "5.6.
|
|
3
|
+
"version": "5.6.2",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/interactions": "^3.
|
|
40
|
-
"@react-aria/overlays": "^3.
|
|
41
|
-
"@react-aria/utils": "^3.
|
|
42
|
-
"@react-spectrum/utils": "^3.11.
|
|
43
|
-
"@react-stately/overlays": "^3.6.
|
|
44
|
-
"@react-types/overlays": "^3.8.
|
|
45
|
-
"@react-types/shared": "^3.
|
|
39
|
+
"@react-aria/interactions": "^3.22.0",
|
|
40
|
+
"@react-aria/overlays": "^3.23.0",
|
|
41
|
+
"@react-aria/utils": "^3.25.0",
|
|
42
|
+
"@react-spectrum/utils": "^3.11.8",
|
|
43
|
+
"@react-stately/overlays": "^3.6.8",
|
|
44
|
+
"@react-types/overlays": "^3.8.8",
|
|
45
|
+
"@react-types/shared": "^3.24.0",
|
|
46
46
|
"@swc/helpers": "^0.5.0",
|
|
47
47
|
"react-transition-group": "^4.4.5"
|
|
48
48
|
},
|
|
@@ -51,11 +51,11 @@
|
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@react-spectrum/provider": "^3.0.0",
|
|
54
|
-
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
|
|
55
|
-
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
|
|
54
|
+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
|
|
55
|
+
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
|
|
56
56
|
},
|
|
57
57
|
"publishConfig": {
|
|
58
58
|
"access": "public"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
|
|
61
61
|
}
|
package/src/Modal.tsx
CHANGED
|
@@ -12,13 +12,13 @@
|
|
|
12
12
|
|
|
13
13
|
import {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays';
|
|
14
14
|
import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
|
|
15
|
-
import {DOMRef, StyleProps} from '@react-types/shared';
|
|
15
|
+
import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
|
|
16
16
|
import modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';
|
|
17
17
|
import {Overlay} from './Overlay';
|
|
18
18
|
import {OverlayProps} from '@react-types/overlays';
|
|
19
19
|
import {OverlayTriggerState} from '@react-stately/overlays';
|
|
20
20
|
import overrideStyles from './overlays.css';
|
|
21
|
-
import React, {forwardRef, MutableRefObject, ReactNode,
|
|
21
|
+
import React, {forwardRef, MutableRefObject, ReactNode, useRef} from 'react';
|
|
22
22
|
import {Underlay} from './Underlay';
|
|
23
23
|
import {useViewportSize} from '@react-aria/utils';
|
|
24
24
|
|
|
@@ -52,7 +52,7 @@ let typeMap = {
|
|
|
52
52
|
fullscreenTakeover: 'fullscreenTakeover'
|
|
53
53
|
};
|
|
54
54
|
|
|
55
|
-
let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement>) {
|
|
55
|
+
let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement | null>) {
|
|
56
56
|
let {type, children, state, isOpen, wrapperRef} = props;
|
|
57
57
|
let typeVariant = typeMap[type];
|
|
58
58
|
let {styleProps} = useStyleProps(props);
|
package/src/Popover.tsx
CHANGED
|
@@ -12,13 +12,13 @@
|
|
|
12
12
|
|
|
13
13
|
import {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-aria/overlays';
|
|
14
14
|
import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
|
|
15
|
-
import {DOMRef, StyleProps} from '@react-types/shared';
|
|
15
|
+
import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
|
|
16
16
|
import {FocusWithinProps, useFocusWithin} from '@react-aria/interactions';
|
|
17
17
|
import {mergeProps, useLayoutEffect} from '@react-aria/utils';
|
|
18
18
|
import {Overlay} from './Overlay';
|
|
19
19
|
import {OverlayTriggerState} from '@react-stately/overlays';
|
|
20
20
|
import overrideStyles from './overlays.css';
|
|
21
|
-
import React, {forwardRef, MutableRefObject, ReactNode,
|
|
21
|
+
import React, {forwardRef, MutableRefObject, ReactNode, useRef, useState} from 'react';
|
|
22
22
|
import styles from '@adobe/spectrum-css-temp/components/popover/vars.css';
|
|
23
23
|
import {Underlay} from './Underlay';
|
|
24
24
|
|
|
@@ -47,7 +47,7 @@ interface PopoverWrapperProps extends PopoverProps, FocusWithinProps {
|
|
|
47
47
|
interface ArrowProps {
|
|
48
48
|
arrowProps: PopoverAria['arrowProps'],
|
|
49
49
|
isLandscape: boolean,
|
|
50
|
-
arrowRef?: RefObject<SVGSVGElement>,
|
|
50
|
+
arrowRef?: RefObject<SVGSVGElement | null>,
|
|
51
51
|
primary: number,
|
|
52
52
|
secondary: number,
|
|
53
53
|
borderDiagonal: number
|
|
@@ -85,7 +85,7 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
|
|
|
85
85
|
);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HTMLDivElement>) => {
|
|
88
|
+
const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HTMLDivElement | null>) => {
|
|
89
89
|
let {
|
|
90
90
|
children,
|
|
91
91
|
isOpen,
|
|
@@ -166,7 +166,7 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
|
|
|
166
166
|
);
|
|
167
167
|
});
|
|
168
168
|
|
|
169
|
-
function usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement>) {
|
|
169
|
+
function usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement | null>) {
|
|
170
170
|
let [borderRadius, setBorderRadius] = useState(0);
|
|
171
171
|
useLayoutEffect(() => {
|
|
172
172
|
if (popoverRef.current) {
|
package/src/Tray.tsx
CHANGED
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
|
|
13
13
|
import {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays';
|
|
14
14
|
import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
|
|
15
|
-
import {DOMRef, StyleProps} from '@react-types/shared';
|
|
15
|
+
import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
|
|
16
16
|
import {Overlay} from './Overlay';
|
|
17
17
|
import {OverlayProps} from '@react-types/overlays';
|
|
18
18
|
import {OverlayTriggerState} from '@react-stately/overlays';
|
|
19
19
|
import overrideStyles from './overlays.css';
|
|
20
|
-
import React, {forwardRef, MutableRefObject, ReactNode,
|
|
20
|
+
import React, {forwardRef, MutableRefObject, ReactNode, useRef} from 'react';
|
|
21
21
|
import trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';
|
|
22
22
|
import {Underlay} from './Underlay';
|
|
23
23
|
import {useViewportSize} from '@react-aria/utils';
|
|
@@ -47,7 +47,7 @@ function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
|
|
|
47
47
|
);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<HTMLDivElement>) {
|
|
50
|
+
let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<HTMLDivElement | null>) {
|
|
51
51
|
let {
|
|
52
52
|
children,
|
|
53
53
|
isOpen,
|