@react-spectrum/s2 1.0.0 → 1.1.0

package/dist/Popover.css

@@ -1,279 +1,279 @@
 @layer _.a {
-  ._pN79Hzc1 {
+  ._pN79Hzc11 {
     color-scheme: var(--lightningcss-light, light) var(--lightningcss-dark, dark);
   }
 
-  ._pc1 {
+  ._pc11 {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light dark;
   }
 
   @media (prefers-color-scheme: dark) {
-    ._pc1 {
+    ._pc11 {
       --lightningcss-light: ;
       --lightningcss-dark: initial;
     }
   }
 
-  ._pb1 {
+  ._pb11 {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light;
   }
 
-  ._pa1 {
+  ._pa11 {
     --lightningcss-light: ;
     --lightningcss-dark: initial;
     color-scheme: dark;
   }
 
-  .-Ovbhqd-g_g1 {
+  .-Ovbhqd-g_g11 {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 
-  .gEzkoQe1 {
+  .gEzkoQe11 {
     background-color: var(--s2-container-bg);
   }
 
-  .oc1 {
+  .oc11 {
     border-start-start-radius: .625rem;
   }
 
-  .nc1 {
+  .nc11 {
     border-start-end-radius: .625rem;
   }
 
-  .kc1 {
+  .kc11 {
     border-end-start-radius: .625rem;
   }
 
-  .jc1 {
+  .jc11 {
     border-end-end-radius: .625rem;
   }
 
-  ._rgr5H3d1 {
+  ._rgr5H3d11 {
     filter: drop-shadow(0 0 2px var(--lightningcss-light, #0000001f) var(--lightningcss-dark, #0000005c)) drop-shadow(0 2px 6px var(--lightningcss-light, #0000000a) var(--lightningcss-dark, #0000001f)) drop-shadow(0 4px 12px var(--lightningcss-light, #00000014) var(--lightningcss-dark, #0000003d));
   }
 
-  ._nLeasBb1 {
+  ._nLeasBb11 {
     box-shadow: 0 4px 12px var(--lightningcss-light, #00000014) var(--lightningcss-dark, #0000003d), 0 2px 6px var(--lightningcss-light, #0000000a) var(--lightningcss-dark, #0000001f), 0 0 2px var(--lightningcss-light, #0000001f) var(--lightningcss-dark, #0000005c);
   }
 
-  ._nd1 {
+  ._nd11 {
     box-shadow: none;
   }
 
-  ._Lf1 {
+  ._Lf11 {
     outline-style: solid;
   }
 
-  ._Mb1 {
+  ._Mb11 {
     outline-width: 1px;
   }
 
-  .Oye39g1 {
+  .Oye39g11 {
     outline-color: var(--lightningcss-light, #fff0) var(--lightningcss-dark, #323232);
   }
 
-  .Zz1 {
+  .Zz11 {
     width: calc(21rem * var(--s2-scale));
   }
 
-  .ZB1 {
+  .ZB11 {
     width: calc(26rem * var(--s2-scale));
   }
 
-  .ZE1 {
+  .ZE11 {
     width: calc(36rem * var(--s2-scale));
   }
 
-  .LEmL1Zb1 {
+  .LEmL1Zb11 {
     max-width: calc(100vw - 24px);
   }
 
-  .sd1 {
+  .sd11 {
     display: flex;
   }
 
-  ._Ia1 {
+  ._Ia11 {
     opacity: 0;
     opacity: 0;
   }
 
-  .-_8PloMd-F1 {
+  .-_8PloMd-F11 {
     --translateY: 4px;
   }
 
-  .-_8PloMd-l1 {
+  .-_8PloMd-l11 {
     --translateY: -4px;
   }
 
-  .-_8PloMd-s1 {
+  .-_8PloMd-s11 {
     --translateY: 0px;
   }
 
-  .-_7PloMd-G1 {
+  .-_7PloMd-G11 {
     --translateX: 4px;
   }
 
-  .-_7PloMd-m1 {
+  .-_7PloMd-m11 {
     --translateX: -4px;
   }
 
-  .-_7PloMd-s1 {
+  .-_7PloMd-s11 {
     --translateX: 0px;
   }
 
-  .YmenWad1 {
+  .YmenWad11 {
     transition-property: opacity, translate;
   }
 
-  .Xc1 {
+  .Xc11 {
     transition-duration: .2s;
   }
 
-  ._2c1 {
+  ._2c11 {
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
   }
 
-  ._Bb1 {
+  ._Bb11 {
     isolation: isolate;
   }
 
-  ._Ob1 {
+  ._Ob11 {
     pointer-events: none;
   }
 
-  .sb1 {
+  .sb11 {
     display: block;
   }
 
-  .tEzkoQe1 {
+  .tEzkoQe11 {
     fill: var(--s2-container-bg);
   }
 
-  .Zl1 {
+  .Zl11 {
     width: calc(1.125rem * var(--s2-scale));
   }
 
-  .Fh1 {
+  .Fh11 {
     height: calc(.5625rem * var(--s2-scale));
   }
 
-  ._Sb1 {
+  ._Sb11 {
     rotate: none;
   }
 
-  ._Sc1 {
+  ._Sc11 {
     rotate: 180deg;
   }
 
-  ._Sa1 {
+  ._Sa11 {
     rotate: -90deg;
   }
 
-  ._Sd1 {
+  ._Sd11 {
     rotate: 90deg;
   }
 
-  .-_7PloMd-e1 {
+  .-_7PloMd-e11 {
     --translateX: -25%;
   }
 
-  .-_7PloMd-y1 {
+  .-_7PloMd-y11 {
     --translateX: 25%;
   }
 
-  .__Ya1 {
+  .__Ya11 {
     translate: var(--translateX, 0) var(--translateY, 0);
   }
 
-  ._Vb1 {
+  ._Vb11 {
     stroke-width: 1px;
   }
 
-  .Vye39g1 {
+  .Vye39g11 {
     stroke: var(--lightningcss-light, #fff0) var(--lightningcss-dark, #323232);
   }
 
-  .Tt1 {
+  .Tt11 {
     padding-top: 8px;
   }
 
-  .Td1 {
+  .Td11 {
     padding-top: 0;
   }
 
-  .Qt1 {
+  .Qt11 {
     padding-bottom: 8px;
   }
 
-  .Qd1 {
+  .Qd11 {
     padding-bottom: 0;
   }
 
-  .St1 {
+  .St11 {
     padding-inline-start: 8px;
   }
 
-  .Sd1 {
+  .Sd11 {
     padding-inline-start: 0;
   }
 
-  .Rt1 {
+  .Rt11 {
     padding-inline-end: 8px;
   }
 
-  .Rd1 {
+  .Rd11 {
     padding-inline-end: 0;
   }
 
-  ._oa1 {
+  ._oa11 {
     box-sizing: border-box;
   }
 
-  ._Le1 {
+  ._Le11 {
     outline-style: none;
   }
 
-  .oi1 {
+  .oi11 {
     border-start-start-radius: inherit;
   }
 
-  .ni1 {
+  .ni11 {
     border-start-end-radius: inherit;
   }
 
-  .ki1 {
+  .ki11 {
     border-end-start-radius: inherit;
   }
 
-  .ji1 {
+  .ji11 {
     border-end-end-radius: inherit;
   }
 
-  ._Na1 {
+  ._Na11 {
     overflow-x: auto;
   }
 
-  .Pa1 {
+  .Pa11 {
     overflow-y: auto;
   }
 
-  ._Pc1 {
+  ._Pc11 {
     position: relative;
   }
 
-  .Za1 {
+  .Za11 {
     width: 100%;
   }
 
-  .L40ub4c1 {
+  .L40ub4c11 {
     max-width: inherit;
   }
 
-  .K40ub4c1 {
+  .K40ub4c11 {
     max-height: inherit;
   }
 }
@@ -282,15 +282,15 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .-Ovbhqd-lga1 {
+    .-Ovbhqd-lga11 {
       --s2-container-bg: Background;
     }
 
-    .Ola1 {
+    .Ola11 {
       outline-color: buttonborder;
     }
 
-    .Vlb1 {
+    .Vlb11 {
       stroke: buttonborder;
     }
   }

package/dist/Popover.css.map

@@ -1 +1 @@
-{"mappings":"AC8Dc;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;;;;EAgFF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiIU;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjNR;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAgFF","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  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, ReactNode, 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,\n  'arrowSize' |\n  'isNonModal' |\n  'arrowBoundaryOffset' |\n  'isKeyboardDismissDisabled' |\n  'shouldCloseOnInteractOutside' |\n  'shouldUpdatePosition' |\n  'style' |\n  'className' |\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  ...colorScheme(),\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}, 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: '-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 = 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 className=\"\">\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,\n'size' |\n'hideArrow'|\n'placement' |\n'shouldFlip' |\n'containerPadding' |\n'offset' |\n'crossOffset' |\n'triggerRef' |\n'isOpen' |\n'onOpenChange'\n>, Omit<DialogProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, 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   * @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.css.map"}
+{"mappings":"AC+Dc;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;;;;EAgFF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiIU;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjNR;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAgFF","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  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, ReactNode, 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,\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  ...colorScheme(),\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}, 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: '-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 = 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 className=\"\">\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,\n'size' |\n'hideArrow'|\n'placement' |\n'shouldFlip' |\n'containerPadding' |\n'offset' |\n'crossOffset' |\n'triggerRef' |\n'isOpen' |\n'onOpenChange'\n>, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, 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   * @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.css.map"}

package/dist/Popover.mjs

@@ -30,111 +30,111 @@ 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|_6|Z|N|L)[^\s]+/g);
+    let matches = String(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 += ' _pa1';
-    else if (props.colorScheme === "light") rules += ' _pb1';
-    else if (props.colorScheme === "light dark") rules += ' _pc1';
-    else rules += ' _pN79Hzc1';
-    rules += ' -Ovbhqd-g_g1';
-    rules += ' -Ovbhqd-lga1';
-    rules += ' gEzkoQe1';
-    rules += ' oc1';
-    rules += ' nc1';
-    rules += ' kc1';
-    rules += ' jc1';
-    if (props.isArrowShown) rules += ' _rgr5H3d1';
-    if (props.isArrowShown) rules += ' _nd1';
-    else rules += ' _nLeasBb1';
-    rules += ' _Lf1';
-    rules += ' _Mb1';
-    rules += ' Oye39g1';
-    rules += ' Ola1';
+    if (props.colorScheme === "dark") rules += ' _pa11';
+    else if (props.colorScheme === "light") rules += ' _pb11';
+    else if (props.colorScheme === "light dark") rules += ' _pc11';
+    else rules += ' _pN79Hzc11';
+    rules += ' -Ovbhqd-g_g11';
+    rules += ' -Ovbhqd-lga11';
+    rules += ' gEzkoQe11';
+    rules += ' oc11';
+    rules += ' nc11';
+    rules += ' kc11';
+    rules += ' jc11';
+    if (props.isArrowShown) rules += ' _rgr5H3d11';
+    if (props.isArrowShown) rules += ' _nd11';
+    else rules += ' _nLeasBb11';
+    rules += ' _Lf11';
+    rules += ' _Mb11';
+    rules += ' Oye39g11';
+    rules += ' Ola11';
     if (props.size === "L") {
-        if (!width) rules += ' ZE1';
+        if (!width) rules += ' ZE11';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZB1';
+        if (!width) rules += ' ZB11';
     } else if (props.size === "S") {
-        if (!width) rules += ' Zz1';
+        if (!width) rules += ' Zz11';
     }
-    if (!maxWidth) rules += ' LEmL1Zb1';
-    rules += ' _oa1';
-    rules += ' sd1';
-    if (props.isExiting) rules += ' _Ia1';
-    else if (props.isEntering) rules += ' _Ia1';
+    if (!maxWidth) rules += ' LEmL1Zb11';
+    rules += ' _oa11';
+    rules += ' sd11';
+    if (props.isExiting) rules += ' _Ia11';
+    else if (props.isEntering) rules += ' _Ia11';
     if (props.isSubmenu) {
-        rules += ' -_8PloMd-s1';
-        rules += ' __Ya1';
+        rules += ' -_8PloMd-s11';
+        rules += ' __Ya11';
     } else if (props.placement === "bottom") {
         if (props.isExiting) {
-            rules += ' -_8PloMd-l1';
-            rules += ' __Ya1';
+            rules += ' -_8PloMd-l11';
+            rules += ' __Ya11';
         } else if (props.isEntering) {
-            rules += ' -_8PloMd-l1';
-            rules += ' __Ya1';
+            rules += ' -_8PloMd-l11';
+            rules += ' __Ya11';
         }
     } else if (props.placement === "top") {
         if (props.isExiting) {
-            rules += ' -_8PloMd-F1';
-            rules += ' __Ya1';
+            rules += ' -_8PloMd-F11';
+            rules += ' __Ya11';
         } else if (props.isEntering) {
-            rules += ' -_8PloMd-F1';
-            rules += ' __Ya1';
+            rules += ' -_8PloMd-F11';
+            rules += ' __Ya11';
         }
     }
     if (props.isSubmenu) {
-        rules += ' -_7PloMd-s1';
-        rules += ' __Ya1';
+        rules += ' -_7PloMd-s11';
+        rules += ' __Ya11';
     } else if (props.placement === "right") {
         if (props.isExiting) {
-            rules += ' -_7PloMd-m1';
-            rules += ' __Ya1';
+            rules += ' -_7PloMd-m11';
+            rules += ' __Ya11';
         } else if (props.isEntering) {
-            rules += ' -_7PloMd-m1';
-            rules += ' __Ya1';
+            rules += ' -_7PloMd-m11';
+            rules += ' __Ya11';
         }
     } else if (props.placement === "left") {
         if (props.isExiting) {
-            rules += ' -_7PloMd-G1';
-            rules += ' __Ya1';
+            rules += ' -_7PloMd-G11';
+            rules += ' __Ya11';
         } else if (props.isEntering) {
-            rules += ' -_7PloMd-G1';
-            rules += ' __Ya1';
+            rules += ' -_7PloMd-G11';
+            rules += ' __Ya11';
         }
     }
-    rules += ' YmenWad1';
-    rules += ' Xc1';
-    if (props.isExiting) rules += ' _2c1';
-    rules += ' _Bb1';
-    if (props.isExiting) rules += ' _Ob1';
+    rules += ' YmenWad11';
+    rules += ' Xc11';
+    if (props.isExiting) rules += ' _2c11';
+    rules += ' _Bb11';
+    if (props.isExiting) rules += ' _Ob11';
     return rules;
 };
 // TODO: animations and real Popover Arrow
 let $88b746eba92c8d0d$var$arrow = function anonymous(props) {
     let rules = " ";
-    rules += ' sb1';
-    rules += ' tEzkoQe1';
-    rules += ' Zl1';
-    rules += ' Fh1';
-    if (props.placement === "right") rules += ' _Sd1';
-    else if (props.placement === "left") rules += ' _Sa1';
-    else if (props.placement === "bottom") rules += ' _Sc1';
-    else if (props.placement === "top") rules += ' _Sb1';
-    else rules += ' _Sc1';
+    rules += ' sb11';
+    rules += ' tEzkoQe11';
+    rules += ' Zl11';
+    rules += ' Fh11';
+    if (props.placement === "right") rules += ' _Sd11';
+    else if (props.placement === "left") rules += ' _Sa11';
+    else if (props.placement === "bottom") rules += ' _Sc11';
+    else if (props.placement === "top") rules += ' _Sb11';
+    else rules += ' _Sc11';
     if (props.placement === "right") {
-        rules += ' -_7PloMd-y1';
-        rules += ' __Ya1';
+        rules += ' -_7PloMd-y11';
+        rules += ' __Ya11';
     } else if (props.placement === "left") {
-        rules += ' -_7PloMd-e1';
-        rules += ' __Ya1';
+        rules += ' -_7PloMd-e11';
+        rules += ' __Ya11';
     }
-    rules += ' _Vb1';
-    rules += ' Vye39g1';
-    rules += ' Vlb1';
+    rules += ' _Vb11';
+    rules += ' Vye39g11';
+    rules += ' Vlb11';
     return rules;
 };
 const $88b746eba92c8d0d$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $ggIy9$createContext)(null);
@@ -222,7 +222,7 @@ const $88b746eba92c8d0d$var$innerDivStyle = function anonymous(props, overrides)
     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|_6|Z|N|L|F|M|K)[^\s]+/g);
+    let matches = String(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;
@@ -230,26 +230,26 @@ const $88b746eba92c8d0d$var$innerDivStyle = function anonymous(props, overrides)
         if (p[1] === "K") maxHeight = true;
         rules += p[0];
     }
-    if (props.padding === "none") rules += ' Td1';
-    else if (props.padding === "default") rules += ' Tt1';
-    if (props.padding === "none") rules += ' Qd1';
-    else if (props.padding === "default") rules += ' Qt1';
-    if (props.padding === "none") rules += ' Sd1';
-    else if (props.padding === "default") rules += ' St1';
-    if (props.padding === "none") rules += ' Rd1';
-    else if (props.padding === "default") rules += ' Rt1';
-    rules += ' _oa1';
-    rules += ' _Le1';
-    rules += ' oi1';
-    rules += ' ni1';
-    rules += ' ki1';
-    rules += ' ji1';
-    rules += ' _Na1';
-    rules += ' Pa1';
-    if (!position) rules += ' _Pc1';
-    if (!width) rules += ' Za1';
-    if (!maxWidth) rules += ' L40ub4c1';
-    if (!maxHeight) rules += ' K40ub4c1';
+    if (props.padding === "none") rules += ' Td11';
+    else if (props.padding === "default") rules += ' Tt11';
+    if (props.padding === "none") rules += ' Qd11';
+    else if (props.padding === "default") rules += ' Qt11';
+    if (props.padding === "none") rules += ' Sd11';
+    else if (props.padding === "default") rules += ' St11';
+    if (props.padding === "none") rules += ' Rd11';
+    else if (props.padding === "default") rules += ' Rt11';
+    rules += ' _oa11';
+    rules += ' _Le11';
+    rules += ' oi11';
+    rules += ' ni11';
+    rules += ' ki11';
+    rules += ' ji11';
+    rules += ' _Na11';
+    rules += ' Pa11';
+    if (!position) rules += ' _Pc11';
+    if (!width) rules += ' Za11';
+    if (!maxWidth) rules += ' L40ub4c11';
+    if (!maxHeight) rules += ' K40ub4c11';
     return rules;
 };
 const $88b746eba92c8d0d$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $ggIy9$forwardRef)(function Popover(props, ref) {