npm - @react-spectrum/s2 - Versions diffs - 3.0.0-nightly-101d0772b-250113 → 3.0.0-nightly-1b425caa2-250114 - Mend

@react-spectrum/s2 3.0.0-nightly-101d0772b-250113 → 3.0.0-nightly-1b425caa2-250114

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/dist/Modal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;~~AAoBD~~,MAAM~~;AAUN~~,MAAM~~;AAYN~~,~~MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BC,MAAM,~~0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gBAAC,CAAA,GAAA,mBAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gBAAC,CAAA,GAAA,YAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiEvB~~;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C","sources":["packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["/\n Copyright 2024 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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {~~keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {~~ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n /\n The size of the Modal.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'fullscreen' \| 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n`);\n\nconst fadeAndSlide = keyframes(`\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`);\n\nconst modalOverlayStyles = style({\n ...colorScheme(),\n position: 'fixed',\n inset: 0,\n isolation: 'isolate',\n backgroundColor: 'transparent-black-500',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ~~animation~~: {\n isEntering: ~~fade~~,\n isExiting: ~~fade~~\n },\n ~~animationDuration~~: ~~{\n isEntering: 250~~,\n ~~isExiting: 130\n~~ ~~},\n animationDirection~~: {\n ~~isEntering~~: ~~'normal'~~,\n isExiting: ~~'reverse'~~\n }\n});\n\n/\n A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let modalRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n return (\n <ModalOverlay\n {...props}\n className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n <RACModal\n {...props}\n ref={modalRef}\n className={renderProps => style({\n display: 'flex',\n flexDirection: 'column',\n borderRadius: {\n default: 'xl',\n size: {\n fullscreenTakeover: 'none'\n }\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576,\n fullscreen: '[calc(100% - 40px)]',\n fullscreenTakeover: 'full'\n }\n },\n height: {\n size: {\n fullscreen: '[calc(100% - 40px)]',\n fullscreenTakeover: 'full'\n }\n },\n maxWidth: {\n default: '[90vw]',\n size: {\n fullscreen: 'none',\n fullscreenTakeover: 'none'\n }\n },\n maxHeight: {\n default: '[90vh]',\n size: {\n fullscreen: 'none',\n fullscreenTakeover: 'none'\n }\n },\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n ~~animation~~: {\n isEntering: ~~fadeAndSlide~~,\n isExiting: ~~fade~~\n },\n ~~animationDuration~~: {\n isEntering: ~~250,\n isExiting: 130~~\n },\n ~~animationDelay~~: {\n ~~isEntering~~: ~~160~~,\n isExiting: 0\n },\n ~~animationDirection~~: {\n ~~isEntering~~: ~~'normal'~~,\n isExiting: ~~'reverse'~~\n },\n ~~animationFillMode: 'both',\n~~ // Transparent outline for WHCM.\n outlineStyle: 'solid',\n outlineWidth: 1,\n outlineColor: 'transparent'\n })({...renderProps, size: props.size})} />\n </ModalOverlay>\n );\n});\n"],"names":[],"version":3,"file":"Modal.mjs.map"}
1	+ {"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmBD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAuBC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gBAAC,CAAA,GAAA,mBAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gBAAC,CAAA,GAAA,YAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C","sources":["packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["/\n Copyright 2024 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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n /\n The size of the Modal.\n \n @default 'M'\n /\n size?: 'S' \| 'M' \| 'L' \| 'fullscreen' \| 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n ...colorScheme(),\n position: 'fixed',\n inset: 0,\n isolation: 'isolate',\n backgroundColor: 'transparent-black-500',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n transition: 'opacity',\n transitionDuration: {\n default: 250,\n isExiting: 130\n }\n});\n\n/\n A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let modalRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n return (\n <ModalOverlay\n {...props}\n className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n <RACModal\n {...props}\n ref={modalRef}\n className={renderProps => style({\n display: 'flex',\n flexDirection: 'column',\n borderRadius: {\n default: 'xl',\n size: {\n fullscreenTakeover: 'none'\n }\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576,\n fullscreen: '[calc(100% - 40px)]',\n fullscreenTakeover: 'full'\n }\n },\n height: {\n size: {\n fullscreen: '[calc(100% - 40px)]',\n fullscreenTakeover: 'full'\n }\n },\n maxWidth: {\n default: '[90vw]',\n size: {\n fullscreen: 'none',\n fullscreenTakeover: 'none'\n }\n },\n maxHeight: {\n default: '[90vh]',\n size: {\n fullscreen: 'none',\n fullscreenTakeover: 'none'\n }\n },\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n isEntering: 20\n },\n transition: '[opacity, translate]',\n transitionDuration: {\n default: 250,\n isExiting: 130\n },\n transitionDelay: {\n default: 160,\n isExiting: 0\n },\n // Transparent outline for WHCM.\n outlineStyle: 'solid',\n outlineWidth: 1,\n outlineColor: 'transparent'\n })({...renderProps, size: props.size})} />\n </ModalOverlay>\n );\n});\n"],"names":[],"version":3,"file":"Modal.mjs.map"}

package/dist/Popover.cjs CHANGED Viewed

@@ -29,11 +29,6 @@ $parcel$export(module.exports, "Popover", () => $493371ef39bf7a55$export$5b6b194
-const $493371ef39bf7a55$var$fadeKeyframes = "-_1llqja1";
-const $493371ef39bf7a55$var$slideUpKeyframes = "-xohm13";
-const $493371ef39bf7a55$var$slideDownKeyframes = "-_2hjlm";
-const $493371ef39bf7a55$var$slideRightKeyframes = "-_1s1guk8";
-const $493371ef39bf7a55$var$slideLeftKeyframes = "-_1dp80kl";
 let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
     let rules = " .";
     let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
@@ -71,41 +66,27 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
     }
     if (!$r) rules += ' r-rtptky';
     rules += ' __oa';
-    if (props.placement === "top") {
-        if (props.isArrowShown) rules += ' QG';
-    } else if (props.placement === "bottom") {
-        if (props.isArrowShown) rules += ' Qd';
-    }
-    if (props.placement === "right") {
-        if (props.isArrowShown) rules += ' Pd';
-    } else if (props.placement === "left") {
-        if (props.isArrowShown) rules += ' PG';
+    if (props.isExiting) rules += ' _L-3t1x';
+    else if (props.isEntering) rules += ' _L-3t1x';
+    if (props.isSubmenu) rules += ' Qa';
+    else if (props.placement === "bottom") {
+        if (props.isExiting) rules += ' QF';
+        else if (props.isEntering) rules += ' QF';
+    } else if (props.placement === "top") {
+        if (props.isExiting) rules += ' Qc';
+        else if (props.isEntering) rules += ' Qc';
     }
-    if (props.isSubmenu) {
-        if (props.isExiting) rules += ' _T-jzzex7';
-        else if (props.isEntering) rules += ' _T-jzzex7';
-    } else if (props.placement === "right") {
-        if (props.isExiting) rules += ' _T-1t03fbb';
-        else if (props.isEntering) rules += ' _T-1t03fbb';
+    if (props.isSubmenu) rules += ' Pa';
+    else if (props.placement === "right") {
+        if (props.isExiting) rules += ' PF';
+        else if (props.isEntering) rules += ' PF';
     } else if (props.placement === "left") {
-        if (props.isExiting) rules += ' _T-1oo3k7r';
-        else if (props.isEntering) rules += ' _T-1oo3k7r';
-    } else if (props.placement === "bottom") {
-        if (props.isExiting) rules += ' _T-z116jo';
-        else if (props.isEntering) rules += ' _T-z116jo';
-    } else if (props.placement === "top") {
-        if (props.isExiting) rules += ' _T-1x9thj4';
-        else if (props.isEntering) rules += ' _T-1x9thj4';
+        if (props.isExiting) rules += ' Pc';
+        else if (props.isEntering) rules += ' Pc';
     }
-    if (props.isExiting) rules += ' _U-375xx3';
-    else if (props.isEntering) rules += ' _U-375xx3';
-    if (props.isExiting) rules += ' _Zc';
-    if (props.isExiting) rules += ' _Wb';
-    else if (props.isEntering) rules += ' _Wa';
-    rules += ' _P-19n1ox2';
-    rules += ' _R-375x7f';
-    rules += ' _Sa';
-    rules += ' __Q-19n1ox2';
+    rules += ' _P-19n5zko';
+    rules += ' _R-375xx3';
+    if (props.isExiting) rules += ' _Sc';
     rules += ' __Ga';
     if (props.isExiting) rules += ' __Ca';
     return rules;
@@ -167,6 +148,7 @@ const $493371ef39bf7a55$export$fde1b04c590741a3 = /*#__PURE__*/ (0, $16fRD$react
     // containerPadding not working as expected
     return /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)((0, $16fRD$reactariacomponents.Popover), {
         ...props,
+        offset: (props.offset ?? 8) + (hideArrow ? 0 : 8),
         ref: popoverRef,
         style: {
             ...UNSAFE_style,

package/dist/Popover.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAsCD,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AAUN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,qCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gCAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,uBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gCAAC,CAAA,GAAA,iCAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/\n Copyright 2024 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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nconst fadeKeyframes = keyframes(`\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n`);\nconst slideUpKeyframes = keyframes(`\n from {\n transform: translateY(-4px);\n }\n\n to {\n transform: translateY(0);\n }\n`);\nconst slideDownKeyframes = keyframes(`\n from {\n transform: translateY(4px);\n }\n\n to {\n transform: translateY(0);\n }\n`);\nconst slideRightKeyframes = keyframes(`\n from {\n transform: translateX(4px);\n }\n\n to {\n transform: translateX(0);\n }\n`);\nconst slideLeftKeyframes = keyframes(`\n from {\n transform: translateX(-4px);\n }\n\n to {\n transform: translateX(0);\n }\n`);\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n translateY: {\n placement: {\n bottom: {\n isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n },\n top: {\n isArrowShown: -8\n }\n }\n },\n translateX: {\n placement: {\n left: {\n isArrowShown: -8\n },\n right: {\n isArrowShown: 8\n }\n }\n },\n animation: {\n placement: {\n top: {\n isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n },\n bottom: {\n isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n },\n left: {\n isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n },\n right: {\n isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n }\n },\n isSubmenu: {\n isEntering: fadeKeyframes,\n isExiting: fadeKeyframes\n }\n },\n animationDuration: {\n isEntering: 200,\n isExiting: 200\n },\n animationDirection: {\n isEntering: 'normal',\n isExiting: 'reverse'\n },\n animationTimingFunction: {\n isExiting: 'in'\n },\n transition: '[opacity, transform]',\n willChange: '[opacity, transform]',\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
1	+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,QAAQ,AAAC,CAAA,MAAM,MAAM,IAAI,CAAA,IAAM,CAAA,YAAY,IAAI,CAAA;QAC/C,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,qCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gCAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,uBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gCAAC,CAAA,GAAA,iCAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/\n Copyright 2024 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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.cjs.map"}

package/dist/Popover.css CHANGED Viewed

@@ -1,53 +1,3 @@
-@keyframes -_1llqja1 {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes -xohm13 {
-  from {
-    transform: translateY(-4px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-@keyframes -_2hjlm {
-  from {
-    transform: translateY(4px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-@keyframes -_1s1guk8 {
-  from {
-    transform: translateX(4px);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes -_1dp80kl {
-  from {
-    transform: translateX(-4px);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
 @layer _.a {
   ._B-10jn6wd {
     color-scheme: var(--lightningcss-light, light) var(--lightningcss-dark, dark);
@@ -154,76 +104,55 @@
     max-width: calc(100vw - 24px);
   }
-  .Qd {
-    --translateY: .5rem;
-    translate: var(--translateX, 0) var(--translateY, 0);
+  ._L-3t1x {
+    opacity: 0;
+    opacity: 0;
   }
-  .QG {
-    --translateY: -.5rem;
+  .Qc {
+    --translateY: .25rem;
     translate: var(--translateX, 0) var(--translateY, 0);
-  }
-  .PG {
-    --translateX: -.5rem;
     translate: var(--translateX, 0) var(--translateY, 0);
   }
-  .Pd {
-    --translateX: .5rem;
+  .QF {
+    --translateY: -.25rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
     translate: var(--translateX, 0) var(--translateY, 0);
   }
-  ._T-1x9thj4 {
-    animation-name: -_2hjlm, -_1llqja1;
-  }
-  ._T-z116jo {
-    animation-name: -xohm13, -_1llqja1;
-  }
-  ._T-1oo3k7r {
-    animation-name: -_1s1guk8, -_1llqja1;
-  }
-  ._T-1t03fbb {
-    animation-name: -_1dp80kl, -_1llqja1;
-  }
-  ._T-jzzex7 {
-    animation-name: -_1llqja1;
-  }
-  ._U-375xx3 {
-    animation-duration: .2s;
-  }
-  ._Zc {
-    animation-timing-function: cubic-bezier(.5, 0, 1, 1);
+  .Qa {
+    --translateY: 0rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
-  ._Wa {
-    animation-direction: normal;
+  .Pc {
+    --translateX: .25rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
-  ._Wb {
-    animation-direction: reverse;
+  .PF {
+    --translateX: -.25rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
-  ._P-19n1ox2 {
-    transition-property: opacity, transform;
+  .Pa {
+    --translateX: 0rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
-  ._R-375x7f {
-    transition-duration: .15s;
+  ._P-19n5zko {
+    transition-property: opacity, translate;
   }
-  ._Sa {
-    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  ._R-375xx3 {
+    transition-duration: .2s;
   }
-  .__Q-19n1ox2 {
-    will-change: opacity, transform;
+  ._Sc {
+    transition-timing-function: cubic-bezier(.5, 0, 1, 1);
   }
   .__Ga {

package/dist/Popover.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"ACgDsB;;;;;;;;;;AASG;;;;;;;;;;AASE;;;;;;;;;;AASC;;;;;;;;;;AASD;;;;;;;;;;AAUb;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkGF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAiGQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnMN;;AAAA;EAAA;IAAA;;;;IAkGF;;;;;;AAAA","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\n@import \"5d916373626af735\";\n@import \"b7be93ba2a203a5d\";\n@import \"4d2c1c572cefcb8e\";\n@import \"5a3650982696b8cb\";\n@import \"6d02bf82e7eb5c5e\";\n","/\n Copyright 2024 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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nconst fadeKeyframes = keyframes(`\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n`);\nconst slideUpKeyframes = keyframes(`\n from {\n transform: translateY(-4px);\n }\n\n to {\n transform: translateY(0);\n }\n`);\nconst slideDownKeyframes = keyframes(`\n from {\n transform: translateY(4px);\n }\n\n to {\n transform: translateY(0);\n }\n`);\nconst slideRightKeyframes = keyframes(`\n from {\n transform: translateX(4px);\n }\n\n to {\n transform: translateX(0);\n }\n`);\nconst slideLeftKeyframes = keyframes(`\n from {\n transform: translateX(-4px);\n }\n\n to {\n transform: translateX(0);\n }\n`);\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n translateY: {\n placement: {\n bottom: {\n isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n },\n top: {\n isArrowShown: -8\n }\n }\n },\n translateX: {\n placement: {\n left: {\n isArrowShown: -8\n },\n right: {\n isArrowShown: 8\n }\n }\n },\n animation: {\n placement: {\n top: {\n isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n },\n bottom: {\n isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n },\n left: {\n isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n },\n right: {\n isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n }\n },\n isSubmenu: {\n isEntering: fadeKeyframes,\n isExiting: fadeKeyframes\n }\n },\n animationDuration: {\n isEntering: 200,\n isExiting: 200\n },\n animationDirection: {\n isEntering: 'normal',\n isExiting: 'reverse'\n },\n animationTimingFunction: {\n isExiting: 'in'\n },\n transition: '[opacity, transform]',\n willChange: '[opacity, transform]',\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.css.map"}
1	+ {"mappings":"AC+Cc;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4EF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAkGQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9KN;;AAAA;EAAA;IAAA;;;;IA4EF;;;;;;AAAA","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\n","/\n Copyright 2024 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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.css.map"}

package/dist/Popover.mjs CHANGED Viewed

@@ -22,11 +22,6 @@ import {useDOMRef as $ggIy9$useDOMRef} from "@react-spectrum/utils";
-const $88b746eba92c8d0d$var$fadeKeyframes = "-_1llqja1";
-const $88b746eba92c8d0d$var$slideUpKeyframes = "-xohm13";
-const $88b746eba92c8d0d$var$slideDownKeyframes = "-_2hjlm";
-const $88b746eba92c8d0d$var$slideRightKeyframes = "-_1s1guk8";
-const $88b746eba92c8d0d$var$slideLeftKeyframes = "-_1dp80kl";
 let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
     let rules = " .";
     let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
@@ -64,41 +59,27 @@ let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
     }
     if (!$r) rules += ' r-rtptky';
     rules += ' __oa';
-    if (props.placement === "top") {
-        if (props.isArrowShown) rules += ' QG';
-    } else if (props.placement === "bottom") {
-        if (props.isArrowShown) rules += ' Qd';
-    }
-    if (props.placement === "right") {
-        if (props.isArrowShown) rules += ' Pd';
-    } else if (props.placement === "left") {
-        if (props.isArrowShown) rules += ' PG';
+    if (props.isExiting) rules += ' _L-3t1x';
+    else if (props.isEntering) rules += ' _L-3t1x';
+    if (props.isSubmenu) rules += ' Qa';
+    else if (props.placement === "bottom") {
+        if (props.isExiting) rules += ' QF';
+        else if (props.isEntering) rules += ' QF';
+    } else if (props.placement === "top") {
+        if (props.isExiting) rules += ' Qc';
+        else if (props.isEntering) rules += ' Qc';
     }
-    if (props.isSubmenu) {
-        if (props.isExiting) rules += ' _T-jzzex7';
-        else if (props.isEntering) rules += ' _T-jzzex7';
-    } else if (props.placement === "right") {
-        if (props.isExiting) rules += ' _T-1t03fbb';
-        else if (props.isEntering) rules += ' _T-1t03fbb';
+    if (props.isSubmenu) rules += ' Pa';
+    else if (props.placement === "right") {
+        if (props.isExiting) rules += ' PF';
+        else if (props.isEntering) rules += ' PF';
     } else if (props.placement === "left") {
-        if (props.isExiting) rules += ' _T-1oo3k7r';
-        else if (props.isEntering) rules += ' _T-1oo3k7r';
-    } else if (props.placement === "bottom") {
-        if (props.isExiting) rules += ' _T-z116jo';
-        else if (props.isEntering) rules += ' _T-z116jo';
-    } else if (props.placement === "top") {
-        if (props.isExiting) rules += ' _T-1x9thj4';
-        else if (props.isEntering) rules += ' _T-1x9thj4';
+        if (props.isExiting) rules += ' Pc';
+        else if (props.isEntering) rules += ' Pc';
     }
-    if (props.isExiting) rules += ' _U-375xx3';
-    else if (props.isEntering) rules += ' _U-375xx3';
-    if (props.isExiting) rules += ' _Zc';
-    if (props.isExiting) rules += ' _Wb';
-    else if (props.isEntering) rules += ' _Wa';
-    rules += ' _P-19n1ox2';
-    rules += ' _R-375x7f';
-    rules += ' _Sa';
-    rules += ' __Q-19n1ox2';
+    rules += ' _P-19n5zko';
+    rules += ' _R-375xx3';
+    if (props.isExiting) rules += ' _Sc';
     rules += ' __Ga';
     if (props.isExiting) rules += ' __Ca';
     return rules;
@@ -160,6 +141,7 @@ const $88b746eba92c8d0d$export$fde1b04c590741a3 = /*#__PURE__*/ (0, $ggIy9$forwa
     // containerPadding not working as expected
     return /*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$Popover), {
         ...props,
+        offset: (props.offset ?? 8) + (hideArrow ? 0 : 8),
         ref: popoverRef,
         style: {
             ...UNSAFE_style,

package/dist/Popover.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAsCD,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AAUN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gBAAC,CAAA,GAAA,aAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gBAAC,CAAA,GAAA,iCAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/\n Copyright 2024 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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nconst fadeKeyframes = keyframes(`\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n`);\nconst slideUpKeyframes = keyframes(`\n from {\n transform: translateY(-4px);\n }\n\n to {\n transform: translateY(0);\n }\n`);\nconst slideDownKeyframes = keyframes(`\n from {\n transform: translateY(4px);\n }\n\n to {\n transform: translateY(0);\n }\n`);\nconst slideRightKeyframes = keyframes(`\n from {\n transform: translateX(4px);\n }\n\n to {\n transform: translateX(0);\n }\n`);\nconst slideLeftKeyframes = keyframes(`\n from {\n transform: translateX(-4px);\n }\n\n to {\n transform: translateX(0);\n }\n`);\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n translateY: {\n placement: {\n bottom: {\n isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n },\n top: {\n isArrowShown: -8\n }\n }\n },\n translateX: {\n placement: {\n left: {\n isArrowShown: -8\n },\n right: {\n isArrowShown: 8\n }\n }\n },\n animation: {\n placement: {\n top: {\n isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n },\n bottom: {\n isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n },\n left: {\n isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n },\n right: {\n isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n }\n },\n isSubmenu: {\n isEntering: fadeKeyframes,\n isExiting: fadeKeyframes\n }\n },\n animationDuration: {\n isEntering: 200,\n isExiting: 200\n },\n animationDirection: {\n isEntering: 'normal',\n isExiting: 'reverse'\n },\n animationTimingFunction: {\n isExiting: 'in'\n },\n transition: '[opacity, transform]',\n willChange: '[opacity, transform]',\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}
1	+ {"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBG,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAmB,EAAE,GAA2B;IACzG,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,8EAA8E;IAC9E,2CAA2C;IAC3C,sCAAsC;IACtC,qDAAqD;IACrD,wDAAwD;IACxD,2HAA2H;IAC3H,kBAAkB;IAElB,aAAa;IACb,wCAAwC;IACxC,qEAAqE;IACrE,aAAa;IACb,uBAAuB;IACvB,gFAAgF;IAChF,sDAAsD;IACtD,cAAc;IACd,YAAY;IACZ,eAAe;IACf,OAAO;IACP,IAAI;IAEJ,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,QAAQ,AAAC,CAAA,MAAM,MAAM,IAAI,CAAA,IAAM,CAAA,YAAY,IAAI,CAAA;QAC/C,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;gBAAa,WAAW,YAAY,OAAO,KAAK;YAAgB,IAAI;kBACvL,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAIA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcC,MAAM,0DAAU,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAyB,EAAE,GAAW;IACvF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC;QAAY,MAAM,MAAM,IAAI;QAAE,WAAW,MAAM,SAAS;QAAE,WAAW,MAAM,SAAS;QAAE,YAAY,MAAM,UAAU;QAAE,kBAAkB,MAAM,gBAAgB;QAAE,QAAQ,MAAM,MAAM;QAAE,aAAa,MAAM,WAAW;kBACjN,cAAA,gBAAC,CAAA,GAAA,aAAK;YACH,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY,MAAM,MAAM,MAAM;sBACzE,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gBAAC,CAAA,GAAA,iCAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["/\n Copyright 2024 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 {\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Dialog,\n DialogProps,\n OverlayArrow,\n OverlayTriggerStateContext,\n useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' \| 'isNonModal' \| 'arrowBoundaryOffset' \| 'isKeyboardDismissDisabled' \| 'shouldCloseOnInteractOutside' \| 'shouldUpdatePosition'> {\n styles?: StyleString,\n /\n Whether a popover's arrow should be hidden.\n \n @default false\n /\n hideArrow?: boolean,\n /\n The size of the Popover. If not specified, the popover fits its contents.\n /\n size?: 'S' \| 'M' \| 'L'\n /* The type of overlay that should be rendered when on a mobile device. /\n // mobileType?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n borderRadius: 'lg',\n filter: {\n isArrowShown: 'elevated'\n },\n // Use box-shadow instead of filter when an arrow is not shown.\n // This fixes the shadow stacking problem with submenus.\n boxShadow: {\n default: 'elevated',\n isArrowShown: 'none'\n },\n borderStyle: 'solid',\n borderWidth: 1,\n borderColor: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576\n }\n },\n // Don't be larger than full screen minus 2 containerPadding\n maxWidth: '[calc(100vw - 24px)]',\n boxSizing: 'border-box',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n placement: {\n top: {\n isEntering: 4,\n isExiting: 4\n },\n bottom: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n translateX: {\n placement: {\n left: {\n isEntering: 4,\n isExiting: 4\n },\n right: {\n isEntering: -4,\n isExiting: -4\n }\n },\n isSubmenu: 0\n },\n transition: '[opacity, translate]',\n transitionDuration: 200,\n transitionTimingFunction: {\n isExiting: 'in'\n },\n isolation: 'isolate',\n pointerEvents: {\n isExiting: 'none'\n }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n display: 'block',\n fill: '--s2-container-bg',\n rotate: {\n default: 180,\n placement: {\n top: 0,\n bottom: 180,\n left: -90,\n right: 90\n }\n },\n translateX: {\n placement: {\n left: -4,\n right: 4\n }\n },\n strokeWidth: 1,\n stroke: {\n default: 'gray-200',\n forcedColors: 'ButtonBorder'\n }\n});\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n hideArrow = false,\n UNSAFE_className = '',\n UNSAFE_style,\n styles,\n size\n } = props;\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let popoverRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n // On small devices, show a modal (or eventually a tray) instead of a popover.\n // TODO: reverted this until we have trays.\n // let isMobile = useIsMobileDevice();\n // if (isMobile && process.env.NODE_ENV !== 'test') {\n // let mappedChildren = typeof children === 'function'\n // ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n // : children;\n\n // return (\n // <Modal size={size} isDismissable>\n // {composeRenderProps(mappedChildren, (children, {state}) => (\n // <>\n // {children}\n // {/* Add additional dismiss button at the end to match popovers. /}\n // <DismissButton onDismiss={state.close} />\n // </>\n // ))}\n // </Modal>\n // );\n // }\n\n // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n // containerPadding not working as expected\n return (\n <AriaPopover\n {...props}\n offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n ref={popoverRef}\n style={{\n ...UNSAFE_style,\n // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n zIndex: undefined\n }}\n className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n {composeRenderProps(props.children, (children, renderProps) => (\n <>\n {!hideArrow && (\n <OverlayArrow>\n <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n </svg>\n </OverlayArrow>\n )}\n {children}\n </>\n ))}\n </AriaPopover>\n );\n});\n\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'size' \| 'hideArrow'\| 'placement' \| 'shouldFlip' \| 'containerPadding' \| 'offset' \| 'crossOffset'>, Omit<DialogProps, 'className' \| 'style'>, StyleProps {}\n\nconst dialogStyle = style({\n padding: 8,\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/\n A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {\n let domRef = useDOMRef(ref);\n\n return (\n <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n <Dialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className \|\| '') + dialogStyle(null, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </Dialog>\n </PopoverBase>\n );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}