@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.
@@ -52,23 +52,23 @@ function $fc75a6aa7a2b905b$var$Modal(props, ref) {
52
52
  }, children));
53
53
  }
54
54
  let $fc75a6aa7a2b905b$var$typeMap = {
55
- fullscreen: "fullscreen",
56
- fullscreenTakeover: "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))), "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"), {
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
- "--spectrum-visual-viewport-height": viewport.height + "px"
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", {
@@ -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,GAA8B;IAC9F,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, 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, RefObject, 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>) {\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"}
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: "fullscreen",
50
- fullscreenTakeover: "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))), "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"), {
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
- "--spectrum-visual-viewport-height": viewport.height + "px"
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.mjs.map
88
+ //# sourceMappingURL=Modal.module.js.map
@@ -46,23 +46,23 @@ function $842084dfa182af65$var$Modal(props, ref) {
46
46
  }, children));
47
47
  }
48
48
  let $842084dfa182af65$var$typeMap = {
49
- fullscreen: "fullscreen",
50
- fullscreenTakeover: "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))), "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"), {
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
- "--spectrum-visual-viewport-height": viewport.height + "px"
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", {
@@ -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,GAA8B;IAC9F,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, 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, RefObject, 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>) {\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"}
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"}
@@ -32,4 +32,4 @@ function $bc765a7a041310da$export$b847a40ee92eff38(props) {
32
32
 
33
33
 
34
34
  export {$bc765a7a041310da$export$b847a40ee92eff38 as OpenTransition};
35
- //# sourceMappingURL=OpenTransition.mjs.map
35
+ //# sourceMappingURL=OpenTransition.module.js.map
@@ -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: "transparent",
57
- isolation: "isolate"
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: "transparent",
47
- isolation: "isolate"
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.mjs.map
66
+ //# sourceMappingURL=Overlay.module.js.map
@@ -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: "transparent",
47
- isolation: "isolate"
46
+ background: 'transparent',
47
+ isolation: 'isolate'
48
48
  },
49
49
  isDisabled: false
50
50
  }, /*#__PURE__*/ (0, $eIXW5$react).createElement((0, $bc765a7a041310da$export$b847a40ee92eff38), {
@@ -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: "right",
50
- right: "right",
51
- top: "bottom",
52
- bottom: "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))), "spectrum-Popover", `spectrum-Popover--${placement}`, {
100
- "spectrum-Popover--withTip": !hideArrow,
101
- "is-open": isOpen,
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))), "spectrum-Popover", "react-spectrum-Popover"), styleProps.className),
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] === "bottom",
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 !== "") setBorderRadius(parseInt(spectrumBorderRadius, 10));
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("--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));
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
- "M",
159
+ 'M',
160
160
  secondaryStart,
161
161
  primaryStart,
162
- "L",
162
+ 'L',
163
163
  secondaryMiddle,
164
164
  primaryEnd,
165
- "L",
165
+ 'L',
166
166
  secondaryEnd,
167
167
  primaryStart
168
168
  ] : [
169
- "M",
169
+ 'M',
170
170
  primaryStart,
171
171
  secondaryStart,
172
- "L",
172
+ 'L',
173
173
  primaryEnd,
174
174
  secondaryMiddle,
175
- "L",
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))), "spectrum-Popover-tip"),
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))), "spectrum-Popover-tip-triangle"),
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);
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA6CD;;;;;;CAMC,GACD,IAAI,uCAAiB;IACnB,MAAM;IACN,OAAO;IACP,KAAK;IACL,QAAQ;AACV;AAEA,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,YACF,QAAQ,SACR,KAAK,EACL,GAAG,YACJ,GAAG;IACJ,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;QAAe,KAAK;QAAS,GAAG,KAAK;QAAE,YAAY;OACjD;AAIT;AAEA,MAAM,qDAAiB,CAAA,GAAA,uBAAS,EAAE,CAAC,OAA4B;IAC7D,IAAI,YACF,QAAQ,UACR,MAAM,aACN,SAAS,cACT,UAAU,4BACV,wBAAwB,SACxB,KAAK,cACL,UAAU,wBACV,uBAAuB,IAAM,MAAM,KAAK,IACzC,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,QAAC,IAAI,eAAE,WAAW,YAAE,QAAQ,EAAC,GAAG;IACpC,MAAM,eAAe,6CAAuB;IAC5C,IAAI,iBAAiB,cAAc,KAAK,KAAK;IAC7C,IAAI,UAAU,OAAO;IACrB,IAAI,YAAY,UAAU;IAC1B,IAAI,gBACF,YAAY,cACZ,UAAU,iBACV,aAAa,aACb,SAAS,EACV,GAAG,CAAA,GAAA,mCAAS,EAAE;QACb,GAAG,KAAK;QACR,YAAY;QACZ,WAAW;QACX,WAAW,YAAY,IAAI;QAC3B,qBAAqB;IACvB,GAAG;IACH,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,2CAAa,EAAE;IAExC,2LAA2L;IAC3L,qBACE,0DAAC;QAAI,KAAK;OACP,CAAC,4BAAc,0DAAC,CAAA,GAAA,kCAAO;QAAE,eAAA;QAAe,GAAG,CAAA,GAAA,gCAAS,EAAE,cAAc;QAAE,QAAQ;sBAC/E,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,gCAAS,EAAE,cAAc,iBAAiB;QAC9C,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,GAAG,aAAa,KAAK;QACvB;QACA,KAAK;QACL,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,oBACA,CAAC,kBAAkB,EAAE,UAAU,CAAC,EAChC;YACE,6BAA6B,CAAC;YAC9B,WAAW;YACX,CAAC,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,EAAE;QAC7B,GACA,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAa,GACb,oBACA,2BAEF,WAAW,SAAS;QAGxB,MAAK;QACL,eAAY;OACX,AAAC,CAAA,CAAC,cAAc,wBAAuB,mBAAM,0DAAC,CAAA,GAAA,sCAAY;QAAE,WAAW;QACvE,UACA,YAAY,qBACX,0DAAC;QACC,YAAY;QACZ,aAAa,oCAAc,CAAC,UAAU,KAAK;QAC3C,UAAU;QACV,SAAS;QACT,WAAW;QACX,gBAAgB;sBAEpB,0DAAC,CAAA,GAAA,sCAAY;QAAE,WAAW;;AAIlC;AAEA,SAAS,6CAAuB,UAAqC;IACnE,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC/C,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,WAAW,OAAO,EAAE;YACtB,IAAI,uBAAuB,OAAO,gBAAgB,CAAC,WAAW,OAAO,EAAE,YAAY;YACnF,IAAI,yBAAyB,IAC3B,gBAAgB,SAAS,sBAAsB;QAEnD;IACF,GAAG;QAAC;KAAW;IACf,OAAO;AACT;AAEA,SAAS;IACP,IAAI,CAAC,MAAM,QAAQ,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC/B,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC7C,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAiB;IACrC,sFAAsF;IACtF,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,SAAS,OAAO,EAAE;YACpB,IAAI,mBAAmB,OAAO,gBAAgB,CAAC,SAAS,OAAO,EAC5D,gBAAgB,CAAC;YACpB,IAAI,qBAAqB,IACvB,QAAQ,SAAS,kBAAkB,MAAM;YAG3C,IAAI,sBAAsB,OAAO,gBAAgB,CAAC,SAAS,OAAO,EAC/D,gBAAgB,CAAC;YACpB,IAAI,wBAAwB,IAC1B,eAAe,SAAS,qBAAqB;QAEjD;IACF,GAAG,EAAE;IACL,OAAO;cAAC;qBAAM;kBAAa;IAAQ;AACrC;AAEA,SAAS,4BAAM,KAAiB;IAC9B,IAAI,WAAC,OAAO,aAAE,SAAS,eAAE,WAAW,cAAE,UAAU,kBAAE,cAAc,YAAE,QAAQ,EAAC,GAAG;IAC9E,IAAI,qBAAqB,iBAAiB;IAE1C,IAAI,eAAe;IACnB,IAAI,aAAa,UAAU;IAE3B,IAAI,iBAAiB;IACrB,IAAI,kBAAkB,YAAY;IAClC,IAAI,eAAe,YAAY;IAE/B,IAAI,WAAW,cAAc;QAC3B;QAAK;QAAgB;QACrB;QAAK;QAAiB;QACtB;QAAK;QAAc;KACpB,GAAG;QACF;QAAK;QAAc;QACnB;QAAK;QAAY;QACjB;QAAK;QAAc;KACpB;IAED,2EAA2E,GAC3E,qBACE,0DAAC;QACC,OAAM;QACN,OAAO,KAAK,IAAI,CAAC,cAAc,YAAY;QAC3C,QAAQ,KAAK,IAAI,CAAC,cAAc,UAAU;QAC1C,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,KAAK;QACJ,GAAG,UAAU;qBACd,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAAkC,GAAG,SAAS,IAAI,CAAC;;AAG7F;AAEA,IAAI,0DAAW,CAAA,GAAA,uBAAS,EAAE;CAG1B;;;;;;;;;;;;CAYC","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: "right",
44
- right: "right",
45
- top: "bottom",
46
- bottom: "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))), "spectrum-Popover", `spectrum-Popover--${placement}`, {
94
- "spectrum-Popover--withTip": !hideArrow,
95
- "is-open": isOpen,
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))), "spectrum-Popover", "react-spectrum-Popover"), styleProps.className),
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] === "bottom",
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 !== "") setBorderRadius(parseInt(spectrumBorderRadius, 10));
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("--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));
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
- "M",
153
+ 'M',
154
154
  secondaryStart,
155
155
  primaryStart,
156
- "L",
156
+ 'L',
157
157
  secondaryMiddle,
158
158
  primaryEnd,
159
- "L",
159
+ 'L',
160
160
  secondaryEnd,
161
161
  primaryStart
162
162
  ] : [
163
- "M",
163
+ 'M',
164
164
  primaryStart,
165
165
  secondaryStart,
166
- "L",
166
+ 'L',
167
167
  primaryEnd,
168
168
  secondaryMiddle,
169
- "L",
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))), "spectrum-Popover-tip"),
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))), "spectrum-Popover-tip-triangle"),
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.mjs.map
201
+ //# sourceMappingURL=Popover.module.js.map
@@ -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: "right",
44
- right: "right",
45
- top: "bottom",
46
- bottom: "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))), "spectrum-Popover", `spectrum-Popover--${placement}`, {
94
- "spectrum-Popover--withTip": !hideArrow,
95
- "is-open": isOpen,
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))), "spectrum-Popover", "react-spectrum-Popover"), styleProps.className),
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] === "bottom",
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 !== "") setBorderRadius(parseInt(spectrumBorderRadius, 10));
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("--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));
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
- "M",
153
+ 'M',
154
154
  secondaryStart,
155
155
  primaryStart,
156
- "L",
156
+ 'L',
157
157
  secondaryMiddle,
158
158
  primaryEnd,
159
- "L",
159
+ 'L',
160
160
  secondaryEnd,
161
161
  primaryStart
162
162
  ] : [
163
- "M",
163
+ 'M',
164
164
  primaryStart,
165
165
  secondaryStart,
166
- "L",
166
+ 'L',
167
167
  primaryEnd,
168
168
  secondaryMiddle,
169
- "L",
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))), "spectrum-Popover-tip"),
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))), "spectrum-Popover-tip-triangle"),
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
- "--spectrum-visual-viewport-height": viewport.height + "px"
70
+ '--spectrum-visual-viewport-height': viewport.height + 'px'
71
71
  };
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);
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
@@ -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,GAA8B;IAC5F,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, 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, RefObject, 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>) {\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"}
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
- "--spectrum-visual-viewport-height": viewport.height + "px"
64
+ '--spectrum-visual-viewport-height': viewport.height + 'px'
65
65
  };
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);
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.mjs.map
96
+ //# sourceMappingURL=Tray.module.js.map
@@ -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
- "--spectrum-visual-viewport-height": viewport.height + "px"
64
+ '--spectrum-visual-viewport-height': viewport.height + 'px'
65
65
  };
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);
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
@@ -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,GAA8B;IAC5F,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, 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, RefObject, 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>) {\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"}
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"}
@@ -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))), "spectrum-Underlay", {
34
- "is-open": isOpen,
35
- "spectrum-Underlay--transparent": isTransparent
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))), "spectrum-Underlay", {
28
- "is-open": isOpen,
29
- "spectrum-Underlay--transparent": isTransparent
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.mjs.map
36
+ //# sourceMappingURL=Underlay.module.js.map
@@ -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))), "spectrum-Underlay", {
28
- "is-open": isOpen,
29
- "spectrum-Underlay--transparent": isTransparent
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
  }
@@ -58,4 +58,4 @@ $f7ed9f5201273840$export$b9768db7ffc1bc2 = `_0YML2q_spectrum-overlay--top--open`
58
58
 
59
59
 
60
60
  export {$f7ed9f5201273840$exports as default};
61
- //# sourceMappingURL=modal_vars_css.mjs.map
61
+ //# sourceMappingURL=modal_vars_css.module.js.map
@@ -34,4 +34,4 @@ $853e19557ad8790f$export$ce0704cd084c4f0d = `OhnpTq_spectrum-Tray`;
34
34
 
35
35
 
36
36
  export {$853e19557ad8790f$exports as default};
37
- //# sourceMappingURL=overlays_css.mjs.map
37
+ //# sourceMappingURL=overlays_css.module.js.map
@@ -82,4 +82,4 @@ $645594d913f34a2a$export$ed733fa6cf19ab80 = `cH0MeW_spectrum-Popover-tip-triangl
82
82
 
83
83
 
84
84
  export {$645594d913f34a2a$exports as default};
85
- //# sourceMappingURL=popover_vars_css.mjs.map
85
+ //# sourceMappingURL=popover_vars_css.module.js.map
@@ -52,4 +52,4 @@ $930b2f4095bb11d1$export$b9768db7ffc1bc2 = `UuxJvG_spectrum-overlay--top--open`;
52
52
 
53
53
 
54
54
  export {$930b2f4095bb11d1$exports as default};
55
- //# sourceMappingURL=tray_vars_css.mjs.map
55
+ //# sourceMappingURL=tray_vars_css.module.js.map
@@ -49,4 +49,4 @@ $c77d7b73b2bbd0fb$export$b9768db7ffc1bc2 = `F-oYUa_spectrum-overlay--top--open`;
49
49
 
50
50
 
51
51
  export {$c77d7b73b2bbd0fb$exports as default};
52
- //# sourceMappingURL=underlay_vars_css.mjs.map
52
+ //# sourceMappingURL=underlay_vars_css.module.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/overlays",
3
- "version": "5.6.0",
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.21.2",
40
- "@react-aria/overlays": "^3.22.0",
41
- "@react-aria/utils": "^3.24.0",
42
- "@react-spectrum/utils": "^3.11.6",
43
- "@react-stately/overlays": "^3.6.6",
44
- "@react-types/overlays": "^3.8.6",
45
- "@react-types/shared": "^3.23.0",
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": "f645f29edc1322153fd60af4640cbcab1d992dbd"
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, RefObject, useRef} from 'react';
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, RefObject, useRef, useState} from 'react';
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, RefObject, useRef} from 'react';
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,