@react-spectrum/s2 3.0.0-nightly-5ae234603-240925 → 3.0.0-nightly-a626c2596-240926

package/dist/Popover.mjs

@@ -91,6 +91,7 @@ let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
     rules += ' _Ra';
     rules += ' __P-19n1ox2';
     rules += ' __Fa';
+    if (props.isExiting) rules += ' __Ba';
     return rules;
 };
 // TODO: animations and real Popover Arrow

package/dist/Popover.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BD,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AAUN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBJ,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;YAAW,IAAI;kBAClI,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAEA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,iBAAS,EAAE","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  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate'\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(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  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.mjs.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BD,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AASN,MAAM;AAUN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFJ,0CAA0C;AAE1C,IAAI;;;;;;;;;;;;;;;;AAyBJ,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,aACF,YAAY,yBACZ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,IAAI,EACL,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,yHAAyH;IACzH,2CAA2C;IAC3C,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;YACL,GAAG,YAAY;YACf,uFAAuF;YACvF,QAAQ;QACV;QACA,WAAW,CAAC,cAAgB,mBAAmB,CAAA,GAAA,yCAAU,EAAE,8BAAQ;gBAAC,GAAG,WAAW;sBAAE;gBAAM,cAAc,CAAC;6BAAW;YAAW,IAAI;kBAClI,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,4BAC7C;;oBACG,CAAC,2BACA,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,OAAO;4BAAI,QAAQ;4BAAG,SAAQ;4BAAY,WAAW,4BAAM;sCAC9D,cAAA,gBAAC;gCAAK,WAAU;gCAAkB,GAAE;;;;oBAIzC;;;;AAKX;AAEA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,iBAAS,EAAE","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  OverlayArrow,\n  useLocale\n} from 'react-aria-components';\nimport {colorScheme, getAllowedOverrides, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  size?: 'S' | 'M' | 'L'\n}\n\nconst fadeKeyframes = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\nconst slideUpKeyframes = keyframes(`\n  from {\n    transform: translateY(-4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideDownKeyframes = keyframes(`\n  from {\n    transform: translateY(4px);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n`);\nconst slideRightKeyframes = keyframes(`\n  from {\n    transform: translateX(4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\nconst slideLeftKeyframes = keyframes(`\n  from {\n    transform: translateX(-4px);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n`);\n\nlet popover = style({\n  ...colorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: 'layer-2'\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  borderStyle: 'solid',\n  borderWidth: 1,\n  borderColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: '[21rem]',\n      M: '[26rem]',\n      L: '[36rem]'\n    }\n  },\n  translateY: {\n    placement: {\n      bottom: {\n        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop\n      },\n      top: {\n        isArrowShown: -8\n      }\n    }\n  },\n  translateX: {\n    placement: {\n      left: {\n        isArrowShown: -8\n      },\n      right: {\n        isArrowShown: 8\n      }\n    }\n  },\n  animation: {\n    placement: {\n      top: {\n        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`\n      },\n      bottom: {\n        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`\n      },\n      left: {\n        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`\n      },\n      right: {\n        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,\n        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`\n      }\n    }\n  },\n  animationDuration: {\n    isEntering: 200,\n    isExiting: 200\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  },\n  animationTimingFunction: {\n    isExiting: 'in'\n  },\n  transition: '[opacity, transform]',\n  willChange: '[opacity, transform]',\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: -4,\n      right: 4\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nfunction Popover(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  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      ref={popoverRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow>\n              <svg width={18} height={9} viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaPopover>\n  );\n}\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nlet _Popover = forwardRef(Popover);\nexport {_Popover as Popover};\n"],"names":[],"version":3,"file":"Popover.mjs.map"}