@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/Popover.css

@@ -1,282 +1,282 @@
 @layer _.a {
-  .-ICUGx-_pc131 {
+  .-ICUGx-_pc151 {
     --s2-color-scheme: light dark;
   }
 
-  .-ICUGx-_pb131 {
+  .-ICUGx-_pb151 {
     --s2-color-scheme: light;
   }
 
-  .-ICUGx-_pa131 {
+  .-ICUGx-_pa151 {
     --s2-color-scheme: dark;
   }
 
-  ._pK8eoyd131 {
+  ._pK8eoyd151 {
     color-scheme: var(--s2-color-scheme);
   }
 
-  .-NvXmrd-_ZN8Gi4c131 {
+  .-NvXmrd-_ZN8Gi4c151 {
     --lightningcss-light: initial;
   }
 
-  .-NvXmrd-_ZLmU131 {
+  .-NvXmrd-_ZLmU151 {
     --lightningcss-light:  ;
   }
 
-  .-j9blY-_ZLmU131 {
+  .-j9blY-_ZLmU151 {
     --lightningcss-dark:  ;
   }
 
-  .-j9blY-_ZN8Gi4c131 {
+  .-j9blY-_ZN8Gi4c151 {
     --lightningcss-dark: initial;
   }
 
-  .-Ovbhqd-g_g131 {
+  .-Ovbhqd-g_g151 {
     --s2-container-bg: light-dark(#fff, #222);
   }
 
-  .gEzkoQe131 {
+  .gEzkoQe151 {
     background-color: var(--s2-container-bg);
   }
 
-  .oc131 {
+  .oc151 {
     border-start-start-radius: .625rem;
   }
 
-  .nc131 {
+  .nc151 {
     border-start-end-radius: .625rem;
   }
 
-  .kc131 {
+  .kc151 {
     border-end-start-radius: .625rem;
   }
 
-  .jc131 {
+  .jc151 {
     border-end-end-radius: .625rem;
   }
 
-  ._rgr5H3d131 {
+  ._rgr5H3d151 {
     filter: drop-shadow(0 0 2px light-dark(#0000001f, #0000005c)) drop-shadow(0 2px 6px light-dark(#0000000a, #0000001f)) drop-shadow(0 4px 12px light-dark(#00000014, #0000003d));
   }
 
-  ._nLeasBb131 {
+  ._nLeasBb151 {
     box-shadow: 0 4px 12px light-dark(#00000014, #0000003d), 0 2px 6px light-dark(#0000000a, #0000001f), 0 0 2px light-dark(#0000001f, #0000005c);
   }
 
-  ._nd131 {
+  ._nd151 {
     box-shadow: none;
   }
 
-  ._Lf131 {
+  ._Lf151 {
     outline-style: solid;
   }
 
-  ._Mb131 {
+  ._Mb151 {
     outline-width: 1px;
   }
 
-  .Oye39g131 {
+  .Oye39g151 {
     outline-color: light-dark(#fff0, #323232);
   }
 
-  .Zz131 {
+  .Zz151 {
     width: calc(21rem * var(--s2-scale));
   }
 
-  .ZB131 {
+  .ZB151 {
     width: calc(26rem * var(--s2-scale));
   }
 
-  .ZE131 {
+  .ZE151 {
     width: calc(36rem * var(--s2-scale));
   }
 
-  .LEmL1Zb131 {
+  .LEmL1Zb151 {
     max-width: calc(100vw - 24px);
   }
 
-  .sd131 {
+  .sd151 {
     display: flex;
   }
 
-  ._Ia131 {
+  ._Ia151 {
     opacity: 0;
     opacity: 0;
   }
 
-  .-_8PloMd-F131 {
+  .-_8PloMd-F151 {
     --translateY: 4px;
   }
 
-  .-_8PloMd-l131 {
+  .-_8PloMd-l151 {
     --translateY: -4px;
   }
 
-  .-_8PloMd-s131 {
+  .-_8PloMd-s151 {
     --translateY: 0px;
   }
 
-  .-_7PloMd-G131 {
+  .-_7PloMd-G151 {
     --translateX: 4px;
   }
 
-  .-_7PloMd-m131 {
+  .-_7PloMd-m151 {
     --translateX: -4px;
   }
 
-  .-_7PloMd-s131 {
+  .-_7PloMd-s151 {
     --translateX: 0px;
   }
 
-  .YmenWad131 {
+  .YmenWad151 {
     transition-property: opacity, translate;
   }
 
-  .Xc131 {
+  .Xc151 {
     transition-duration: .2s;
   }
 
-  ._2c131 {
+  ._2c151 {
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
   }
 
-  ._Bb131 {
+  ._Bb151 {
     isolation: isolate;
   }
 
-  ._Ob131 {
+  ._Ob151 {
     pointer-events: none;
   }
 
-  .sb131 {
+  .sb151 {
     display: block;
   }
 
-  .tEzkoQe131 {
+  .tEzkoQe151 {
     fill: var(--s2-container-bg);
   }
 
-  .Zl131 {
+  .Zl151 {
     width: calc(1.125rem * var(--s2-scale));
   }
 
-  .Fh131 {
+  .Fh151 {
     height: calc(.5625rem * var(--s2-scale));
   }
 
-  ._Sb131 {
+  ._Sb151 {
     rotate: 0deg;
   }
 
-  ._Sc131 {
+  ._Sc151 {
     rotate: 180deg;
   }
 
-  ._Sa131 {
+  ._Sa151 {
     rotate: -90deg;
   }
 
-  ._Sd131 {
+  ._Sd151 {
     rotate: 90deg;
   }
 
-  .-_7PloMd-e131 {
+  .-_7PloMd-e151 {
     --translateX: -25%;
   }
 
-  .-_7PloMd-y131 {
+  .-_7PloMd-y151 {
     --translateX: 25%;
   }
 
-  .__Ya131 {
+  .__Ya151 {
     translate: var(--translateX, 0) var(--translateY, 0);
   }
 
-  ._Vb131 {
+  ._Vb151 {
     stroke-width: 1px;
   }
 
-  .Vye39g131 {
+  .Vye39g151 {
     stroke: light-dark(#fff0, #323232);
   }
 
-  .Tt131 {
+  .Tt151 {
     padding-top: 8px;
   }
 
-  .Td131 {
+  .Td151 {
     padding-top: 0;
   }
 
-  .Qt131 {
+  .Qt151 {
     padding-bottom: 8px;
   }
 
-  .Qd131 {
+  .Qd151 {
     padding-bottom: 0;
   }
 
-  .St131 {
+  .St151 {
     padding-inline-start: 8px;
   }
 
-  .Sd131 {
+  .Sd151 {
     padding-inline-start: 0;
   }
 
-  .Rt131 {
+  .Rt151 {
     padding-inline-end: 8px;
   }
 
-  .Rd131 {
+  .Rd151 {
     padding-inline-end: 0;
   }
 
-  ._oa131 {
+  ._oa151 {
     box-sizing: border-box;
   }
 
-  ._Le131 {
+  ._Le151 {
     outline-style: none;
   }
 
-  .oi131 {
+  .oi151 {
     border-start-start-radius: inherit;
   }
 
-  .ni131 {
+  .ni151 {
     border-start-end-radius: inherit;
   }
 
-  .ki131 {
+  .ki151 {
     border-end-start-radius: inherit;
   }
 
-  .ji131 {
+  .ji151 {
     border-end-end-radius: inherit;
   }
 
-  ._Na131 {
+  ._Na151 {
     overflow-x: auto;
   }
 
-  .Pa131 {
+  .Pa151 {
     overflow-y: auto;
   }
 
-  ._Pc131 {
+  ._Pc151 {
     position: relative;
   }
 
-  .Za131 {
+  .Za151 {
     width: 100%;
   }
 
-  .L40ub4c131 {
+  .L40ub4c151 {
     max-width: inherit;
   }
 
-  .K40ub4c131 {
+  .K40ub4c151 {
     max-height: inherit;
   }
 }
@@ -285,11 +285,11 @@
 
 @layer _.b.D1v0V {
   @media (prefers-color-scheme: dark) {
-    .-NvXmrd-D1v0V_ZLmU131 {
+    .-NvXmrd-D1v0V_ZLmU151 {
       --lightningcss-light:  ;
     }
 
-    .-j9blY-D1v0V_ZN8Gi4c131 {
+    .-j9blY-D1v0V_ZN8Gi4c151 {
       --lightningcss-dark: initial;
     }
   }
@@ -297,15 +297,15 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .-Ovbhqd-lga131 {
+    .-Ovbhqd-lga151 {
       --s2-container-bg: Background;
     }
 
-    .Ola131 {
+    .Ola151 {
       outline-color: buttonborder;
     }
 
-    .Vlb131 {
+    .Vlb151 {
       stroke: buttonborder;
     }
   }

package/dist/private/Popover.css.map

@@ -1 +1 @@
-{"mappings":"AC+Ec;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;;;;EAmFF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuJU;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA1OR;;AAAA;EAAA;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAmFF","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  OverlayArrow\n} from 'react-aria-components/Popover';\nimport {ColorSchemeContext} from './Provider';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo\n} from 'react';\nimport {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {\n  getAllowedOverrides,\n  heightProperties,\n  UnsafeStyles,\n  widthProperties\n} from './style-utils' with {type: 'macro'};\nimport {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps\n  extends\n    UnsafeStyles,\n    Omit<\n      AriaPopoverProps,\n      | 'arrowSize'\n      | 'isNonModal'\n      | 'arrowBoundaryOffset'\n      | 'isKeyboardDismissDisabled'\n      | 'shouldCloseOnInteractOutside'\n      | 'shouldUpdatePosition'\n      | 'style'\n      | 'className'\n      | 'render'\n      | keyof GlobalDOMAttributes\n    > {\n  /**\n   * The styles of the popover.\n   */\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  {\n    ...setColorScheme(),\n    '--s2-container-bg': {\n      type: 'backgroundColor',\n      value: {\n        default: 'layer-2',\n        forcedColors: 'Background'\n      }\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  },\n  getAllowedOverrides()\n);\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: '-25%',\n      right: '25%'\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext =\n  createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(\n  props: PopoverProps,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  let {hideArrow = false, UNSAFE_className = '', UNSAFE_style, styles, size} = 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(\n    (el: HTMLDivElement) => {\n      if (el) {\n        el.lang = locale;\n        el.dir = direction;\n      }\n    },\n    [locale, direction]\n  );\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 =>\n        UNSAFE_className +\n        mergeStyles(\n          popover({\n            ...renderProps,\n            size,\n            isArrowShown: !hideArrow,\n            colorScheme,\n            isSubmenu: renderProps.trigger === 'SubmenuTrigger'\n          }),\n          styles\n        )\n      }>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow className=\"\">\n              <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path\n                  transform=\"translate(0 -1)\"\n                  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                />\n              </svg>\n            </OverlayArrow>\n          )}\n          <InPopoverContext.Provider value>{children}</InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<\n  (typeof widthProperties)[number] | (typeof heightProperties)[number]\n>;\nexport interface PopoverDialogProps\n  extends\n    Pick<\n      PopoverProps,\n      | 'size'\n      | 'hideArrow'\n      | 'placement'\n      | 'shouldFlip'\n      | 'containerPadding'\n      | 'offset'\n      | 'crossOffset'\n      | 'triggerRef'\n      | 'isOpen'\n      | 'onOpenChange'\n    >,\n    Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,\n    UnsafeStyles {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNode;\n  /**\n   * The amount of padding around the contents of the dialog.\n   *\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  {\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  },\n  getAllowedOverrides({height: true})\n);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(\n  props: PopoverDialogProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className, UNSAFE_style, styles, padding = 'default', ...otherProps} = 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.css.map"}
+{"mappings":"AC8Ec;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;;;;EAmFF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyJU;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5OR;;AAAA;EAAA;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAmFF","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  OverlayArrow\n} from 'react-aria-components/Popover';\nimport {ColorSchemeContext} from './Provider';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo\n} from 'react';\nimport {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {\n  getAllowedOverrides,\n  heightProperties,\n  UnsafeStyles,\n  widthProperties\n} from './style-utils' with {type: 'macro'};\nimport {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps\n  extends\n    UnsafeStyles,\n    Omit<\n      AriaPopoverProps,\n      | 'arrowSize'\n      | 'arrowBoundaryOffset'\n      | 'isKeyboardDismissDisabled'\n      | 'shouldCloseOnInteractOutside'\n      | 'shouldUpdatePosition'\n      | 'style'\n      | 'className'\n      | 'render'\n      | keyof GlobalDOMAttributes\n    > {\n  /**\n   * The styles of the popover.\n   */\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  {\n    ...setColorScheme(),\n    '--s2-container-bg': {\n      type: 'backgroundColor',\n      value: {\n        default: 'layer-2',\n        forcedColors: 'Background'\n      }\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  },\n  getAllowedOverrides()\n);\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: '-25%',\n      right: '25%'\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext =\n  createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(\n  props: PopoverProps,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  let {hideArrow = false, UNSAFE_className = '', UNSAFE_style, styles, size} = 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(\n    (el: HTMLDivElement) => {\n      if (el) {\n        el.lang = locale;\n        el.dir = direction;\n      }\n    },\n    [locale, direction]\n  );\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 =>\n        UNSAFE_className +\n        mergeStyles(\n          popover({\n            ...renderProps,\n            size,\n            isArrowShown: !hideArrow,\n            colorScheme,\n            isSubmenu: renderProps.trigger === 'SubmenuTrigger'\n          }),\n          styles\n        )\n      }>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow className=\"\">\n              <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path\n                  transform=\"translate(0 -1)\"\n                  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                />\n              </svg>\n            </OverlayArrow>\n          )}\n          <InPopoverContext.Provider value>{children}</InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<\n  (typeof widthProperties)[number] | (typeof heightProperties)[number]\n>;\nexport interface PopoverDialogProps\n  extends\n    Pick<\n      PopoverProps,\n      | 'size'\n      | 'hideArrow'\n      | 'placement'\n      | 'shouldFlip'\n      | 'containerPadding'\n      | 'offset'\n      | 'crossOffset'\n      | 'getTargetRect'\n      | 'isNonModal'\n      | 'triggerRef'\n      | 'isOpen'\n      | 'onOpenChange'\n    >,\n    Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,\n    UnsafeStyles {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNode;\n  /**\n   * The amount of padding around the contents of the dialog.\n   *\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  {\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  },\n  getAllowedOverrides({height: true})\n);\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(\n  props: PopoverDialogProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className, UNSAFE_style, styles, padding = 'default', ...otherProps} = 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.css.map"}