@react-spectrum/s2 0.11.2 → 0.12.0

package/dist/Popover.mjs

@@ -1,9 +1,11 @@
 import "./Popover.css";
 import {ColorSchemeContext as $9affbfa4e13b9582$export$374e0245597d19a3} from "./Provider.mjs";
 import {mergeStyles as $feb886035e0d4633$export$e618dc39ac9ad607} from "../icons/runtime.mjs";
+import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsx as $ggIy9$jsx, jsxs as $ggIy9$jsxs, Fragment as $ggIy9$Fragment} from "react/jsx-runtime";
-import {useLocale as $ggIy9$useLocale, Popover as $ggIy9$Popover, composeRenderProps as $ggIy9$composeRenderProps, OverlayArrow as $ggIy9$OverlayArrow, Dialog as $ggIy9$Dialog, OverlayTriggerStateContext as $ggIy9$OverlayTriggerStateContext} from "react-aria-components";
-import {forwardRef as $ggIy9$forwardRef, useContext as $ggIy9$useContext, useCallback as $ggIy9$useCallback} from "react";
+import {useLocale as $ggIy9$useLocale, Popover as $ggIy9$Popover, composeRenderProps as $ggIy9$composeRenderProps, OverlayArrow as $ggIy9$OverlayArrow, OverlayTriggerStateContext as $ggIy9$OverlayTriggerStateContext} from "react-aria-components";
+import {createContext as $ggIy9$createContext, forwardRef as $ggIy9$forwardRef, useContext as $ggIy9$useContext, useCallback as $ggIy9$useCallback, useMemo as $ggIy9$useMemo} from "react";
+import {mergeRefs as $ggIy9$mergeRefs} from "@react-aria/utils";
 import {useDOMRef as $ggIy9$useDOMRef} from "@react-spectrum/utils";
 
 /*
@@ -22,136 +24,138 @@ import {useDOMRef as $ggIy9$useDOMRef} from "@react-spectrum/utils";
 
 
 
+
+
 let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
     let rules = " ";
     let width = false;
     let maxWidth = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "Z") width = true;
         if (p[1] === "L") maxWidth = true;
         rules += p[0];
     }
-    if (props.colorScheme === "dark") rules += ' _pa112';
-    else if (props.colorScheme === "light") rules += ' _pb112';
-    else if (props.colorScheme === "light dark") rules += ' _pc112';
-    else rules += ' _pN79Hzc112';
-    rules += ' -Ovbhqd-g_g112';
-    rules += ' gEzkoQe112';
-    rules += ' oc112';
-    rules += ' nc112';
-    rules += ' kc112';
-    rules += ' jc112';
-    if (props.isArrowShown) rules += ' _rb112';
-    if (props.isArrowShown) rules += ' _nd112';
-    else rules += ' _nb112';
-    rules += ' _jf112';
-    rules += ' _kb112';
-    rules += ' hb112';
-    rules += ' mb112';
-    rules += ' lb112';
-    rules += ' ir112';
-    rules += ' ila112';
+    if (props.colorScheme === "dark") rules += ' _pa12';
+    else if (props.colorScheme === "light") rules += ' _pb12';
+    else if (props.colorScheme === "light dark") rules += ' _pc12';
+    else rules += ' _pN79Hzc12';
+    rules += ' -Ovbhqd-g_g12';
+    rules += ' gEzkoQe12';
+    rules += ' oc12';
+    rules += ' nc12';
+    rules += ' kc12';
+    rules += ' jc12';
+    if (props.isArrowShown) rules += ' _rgr5H3d12';
+    if (props.isArrowShown) rules += ' _nd12';
+    else rules += ' _nLeasBb12';
+    rules += ' _Lf12';
+    rules += ' _Mb12';
+    rules += ' Oye39g12';
+    rules += ' Ola12';
     if (props.size === "L") {
-        if (!width) rules += ' ZE112';
+        if (!width) rules += ' ZE12';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZB112';
+        if (!width) rules += ' ZB12';
     } else if (props.size === "S") {
-        if (!width) rules += ' Zz112';
+        if (!width) rules += ' Zz12';
     }
-    if (!maxWidth) rules += ' LEmL1Zb112';
-    rules += ' _oa112';
-    rules += ' sd112';
-    if (props.isExiting) rules += ' _Ia112';
-    else if (props.isEntering) rules += ' _Ia112';
+    if (!maxWidth) rules += ' LEmL1Zb12';
+    rules += ' _oa12';
+    rules += ' sd12';
+    if (props.isExiting) rules += ' _Ia12';
+    else if (props.isEntering) rules += ' _Ia12';
     if (props.isSubmenu) {
-        rules += ' -_8PloMd-s112';
-        rules += ' __Ya112';
+        rules += ' -_8PloMd-s12';
+        rules += ' __Ya12';
     } else if (props.placement === "bottom") {
         if (props.isExiting) {
-            rules += ' -_8PloMd-l112';
-            rules += ' __Ya112';
+            rules += ' -_8PloMd-l12';
+            rules += ' __Ya12';
         } else if (props.isEntering) {
-            rules += ' -_8PloMd-l112';
-            rules += ' __Ya112';
+            rules += ' -_8PloMd-l12';
+            rules += ' __Ya12';
         }
     } else if (props.placement === "top") {
         if (props.isExiting) {
-            rules += ' -_8PloMd-F112';
-            rules += ' __Ya112';
+            rules += ' -_8PloMd-F12';
+            rules += ' __Ya12';
         } else if (props.isEntering) {
-            rules += ' -_8PloMd-F112';
-            rules += ' __Ya112';
+            rules += ' -_8PloMd-F12';
+            rules += ' __Ya12';
         }
     }
     if (props.isSubmenu) {
-        rules += ' -_7PloMd-s112';
-        rules += ' __Ya112';
+        rules += ' -_7PloMd-s12';
+        rules += ' __Ya12';
     } else if (props.placement === "right") {
         if (props.isExiting) {
-            rules += ' -_7PloMd-m112';
-            rules += ' __Ya112';
+            rules += ' -_7PloMd-m12';
+            rules += ' __Ya12';
         } else if (props.isEntering) {
-            rules += ' -_7PloMd-m112';
-            rules += ' __Ya112';
+            rules += ' -_7PloMd-m12';
+            rules += ' __Ya12';
         }
     } else if (props.placement === "left") {
         if (props.isExiting) {
-            rules += ' -_7PloMd-G112';
-            rules += ' __Ya112';
+            rules += ' -_7PloMd-G12';
+            rules += ' __Ya12';
         } else if (props.isEntering) {
-            rules += ' -_7PloMd-G112';
-            rules += ' __Ya112';
+            rules += ' -_7PloMd-G12';
+            rules += ' __Ya12';
         }
     }
-    rules += ' YmenWad112';
-    rules += ' Xc112';
-    if (props.isExiting) rules += ' _2c112';
-    rules += ' _Bb112';
-    if (props.isExiting) rules += ' _Ob112';
-    rules += ' _Le112';
+    rules += ' YmenWad12';
+    rules += ' Xc12';
+    if (props.isExiting) rules += ' _2c12';
+    rules += ' _Bb12';
+    if (props.isExiting) rules += ' _Ob12';
     return rules;
 };
 // TODO: animations and real Popover Arrow
 let $88b746eba92c8d0d$var$arrow = function anonymous(props) {
     let rules = " ";
-    rules += ' sb112';
-    rules += ' tEzkoQe112';
-    rules += ' Zl112';
-    rules += ' Fh112';
-    if (props.placement === "right") rules += ' _Sd112';
-    else if (props.placement === "left") rules += ' _Sa112';
-    else if (props.placement === "bottom") rules += ' _Sc112';
-    else if (props.placement === "top") rules += ' _Sb112';
-    else rules += ' _Sc112';
+    rules += ' sb12';
+    rules += ' tEzkoQe12';
+    rules += ' Zl12';
+    rules += ' Fh12';
+    if (props.placement === "right") rules += ' _Sd12';
+    else if (props.placement === "left") rules += ' _Sa12';
+    else if (props.placement === "bottom") rules += ' _Sc12';
+    else if (props.placement === "top") rules += ' _Sb12';
+    else rules += ' _Sc12';
     if (props.placement === "right") {
-        rules += ' -_7PloMd-G112';
-        rules += ' __Ya112';
+        rules += ' -_7PloMd-G12';
+        rules += ' __Ya12';
     } else if (props.placement === "left") {
-        rules += ' -_7PloMd-m112';
-        rules += ' __Ya112';
+        rules += ' -_7PloMd-m12';
+        rules += ' __Ya12';
     }
-    rules += ' _Vb112';
-    rules += ' Vg112';
-    rules += ' Vlb112';
+    rules += ' _Vb12';
+    rules += ' Vye39g12';
+    rules += ' Vlb12';
     return rules;
 };
+const $88b746eba92c8d0d$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $ggIy9$createContext)(null);
+const $88b746eba92c8d0d$export$60dfb2c3202ad27d = /*#__PURE__*/ (0, $ggIy9$createContext)(false);
 const $88b746eba92c8d0d$export$fde1b04c590741a3 = /*#__PURE__*/ (0, $ggIy9$forwardRef)(function PopoverBase(props, ref) {
     let { hideArrow: hideArrow = false, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, size: size } = props;
-    let domRef = (0, $ggIy9$useDOMRef)(ref);
     let colorScheme = (0, $ggIy9$useContext)((0, $9affbfa4e13b9582$export$374e0245597d19a3));
     let { locale: locale, direction: direction } = (0, $ggIy9$useLocale)();
     // TODO: should we pass through lang and dir props in RAC?
     let popoverRef = (0, $ggIy9$useCallback)((el)=>{
-        domRef.current = el;
         if (el) {
             el.lang = locale;
             el.dir = direction;
         }
     }, [
         locale,
-        direction,
-        domRef
+        direction
+    ]);
+    // Memoed so it doesn't break ComboBox/Picker scrolling
+    let mergedRef = (0, $ggIy9$useMemo)(()=>(0, $ggIy9$mergeRefs)(popoverRef, ref), [
+        ref,
+        popoverRef
     ]);
     // On small devices, show a modal (or eventually a tray) instead of a popover.
     // TODO: reverted this until we have trays.
@@ -177,7 +181,7 @@ const $88b746eba92c8d0d$export$fde1b04c590741a3 = /*#__PURE__*/ (0, $ggIy9$forwa
     return /*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$Popover), {
         ...props,
         offset: (props.offset ?? 8) + (hideArrow ? 0 : 8),
-        ref: popoverRef,
+        ref: mergedRef,
         style: {
             ...UNSAFE_style,
             // Override default z-index from useOverlayPosition. We use isolation: isolate instead.
@@ -202,18 +206,21 @@ const $88b746eba92c8d0d$export$fde1b04c590741a3 = /*#__PURE__*/ (0, $ggIy9$forwa
                             })
                         })
                     }),
-                    children
+                    /*#__PURE__*/ (0, $ggIy9$jsx)($88b746eba92c8d0d$export$60dfb2c3202ad27d.Provider, {
+                        value: true,
+                        children: children
+                    })
                 ]
             }))
     });
 });
-const $88b746eba92c8d0d$var$dialogStyle = function anonymous(props, overrides) {
+const $88b746eba92c8d0d$var$innerDivStyle = function anonymous(props, overrides) {
     let rules = " ";
     let position = false;
     let width = false;
     let maxWidth = false;
     let maxHeight = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "Z") width = true;
@@ -221,52 +228,48 @@ const $88b746eba92c8d0d$var$dialogStyle = function anonymous(props, overrides) {
         if (p[1] === "K") maxHeight = true;
         rules += p[0];
     }
-    rules += ' Tt112';
-    rules += ' Qt112';
-    rules += ' St112';
-    rules += ' Rt112';
-    rules += ' _oa112';
-    rules += ' _Le112';
-    rules += ' oi112';
-    rules += ' ni112';
-    rules += ' ki112';
-    rules += ' ji112';
-    rules += ' _Na112';
-    rules += ' Pa112';
-    if (!position) rules += ' _Pc112';
-    if (!width) rules += ' Za112';
-    if (!maxWidth) rules += ' L40ub4c112';
-    if (!maxHeight) rules += ' K40ub4c112';
+    if (props.padding === "none") rules += ' Td12';
+    else if (props.padding === "default") rules += ' Tt12';
+    if (props.padding === "none") rules += ' Qd12';
+    else if (props.padding === "default") rules += ' Qt12';
+    if (props.padding === "none") rules += ' Sd12';
+    else if (props.padding === "default") rules += ' St12';
+    if (props.padding === "none") rules += ' Rd12';
+    else if (props.padding === "default") rules += ' Rt12';
+    rules += ' _oa12';
+    rules += ' _Le12';
+    rules += ' oi12';
+    rules += ' ni12';
+    rules += ' ki12';
+    rules += ' ji12';
+    rules += ' _Na12';
+    rules += ' Pa12';
+    if (!position) rules += ' _Pc12';
+    if (!width) rules += ' Za12';
+    if (!maxWidth) rules += ' L40ub4c12';
+    if (!maxHeight) rules += ' K40ub4c12';
     return rules;
 };
 const $88b746eba92c8d0d$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $ggIy9$forwardRef)(function Popover(props, ref) {
+    [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $88b746eba92c8d0d$export$9b9a0cd73afb7ca4);
     let domRef = (0, $ggIy9$useDOMRef)(ref);
-    const { triggerRef: triggerRef, isOpen: isOpen, onOpenChange: onOpenChange, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, styles: styles, padding: padding = 'default', ...otherProps } = props;
     return /*#__PURE__*/ (0, $ggIy9$jsx)($88b746eba92c8d0d$export$fde1b04c590741a3, {
-        isOpen: isOpen,
-        onOpenChange: onOpenChange,
-        triggerRef: triggerRef,
-        size: props.size,
-        hideArrow: props.hideArrow,
-        placement: props.placement,
-        shouldFlip: props.shouldFlip,
-        containerPadding: props.containerPadding,
-        offset: props.offset,
-        crossOffset: props.crossOffset,
-        children: /*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$Dialog), {
-            ...otherProps,
-            ref: domRef,
-            style: props.UNSAFE_style,
-            className: (props.UNSAFE_className || '') + $88b746eba92c8d0d$var$dialogStyle(null, props.styles),
-            children: (0, $ggIy9$composeRenderProps)(props.children, (children)=>// Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
-                /*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$OverlayTriggerStateContext).Provider, {
+        ...otherProps,
+        ref: domRef,
+        children: (0, $ggIy9$composeRenderProps)(props.children, (children)=>/*#__PURE__*/ (0, $ggIy9$jsx)("div", {
+                style: UNSAFE_style,
+                className: (UNSAFE_className || '') + $88b746eba92c8d0d$var$innerDivStyle({
+                    padding: padding
+                }, styles),
+                children: /*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$OverlayTriggerStateContext).Provider, {
                     value: null,
                     children: children
-                }))
-        })
+                })
+            }))
     });
 });
 
 
-export {$88b746eba92c8d0d$export$fde1b04c590741a3 as PopoverBase, $88b746eba92c8d0d$export$5b6b19405a83ff9d as Popover};
+export {$88b746eba92c8d0d$export$9b9a0cd73afb7ca4 as PopoverContext, $88b746eba92c8d0d$export$60dfb2c3202ad27d as InPopoverContext, $88b746eba92c8d0d$export$fde1b04c590741a3 as PopoverBase, $88b746eba92c8d0d$export$5b6b19405a83ff9d as Popover};
 //# sourceMappingURL=Popover.mjs.map

package/dist/Popover.mjs.map

@@ -1 +1 @@
-{"mappings":"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","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, GlobalDOMAttributes} 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' | keyof GlobalDOMAttributes> {\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  display: 'flex',\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  outlineStyle: 'none'\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  width: 18,\n  height: 9,\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 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' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<DialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n}\n\n\nconst dialogStyle = style({\n  padding: 8,\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  width: '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  const {triggerRef, isOpen, onOpenChange, ...otherProps} = props;\n\n\n  return (\n    <PopoverBase  isOpen={isOpen} onOpenChange={onOpenChange} triggerRef={triggerRef} size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>\n      <Dialog\n        {...otherProps}\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"}
+{"mappings":"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","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  ContextValue,\n  DialogProps,\n  OverlayArrow,\n  OverlayTriggerStateContext,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {createContext, ForwardedRef, forwardRef, useCallback, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition' | keyof GlobalDOMAttributes> {\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  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark('transparent-white-25', '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  display: 'flex',\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  width: 18,\n  height: 9,\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: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\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    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction]);\n  // Memoed so it doesn't break ComboBox/Picker scrolling\n  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\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={mergedRef}\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 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          <InPopoverContext.Provider value>\n            {children}\n          </InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;\nexport interface PopoverDialogProps extends Pick<PopoverProps, 'children' | 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<DialogProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: PopoverStylesProp\n}\n\nconst innerDivStyle = style({\n  padding: {\n    padding: {\n      default: 8,\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  width: '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<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    padding = 'default',\n    ...otherProps\n  } = props;\n\n  return (\n    <PopoverBase {...otherProps} ref={domRef}>\n      {composeRenderProps(props.children, (children) => (\n        <div\n          style={UNSAFE_style}\n          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\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        </div>\n      ))}\n    </PopoverBase>\n  );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}