@react-native-aria/overlays 0.3.5 → 0.3.7

package/lib/module/web/overlays/src/useCloseOnScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCloseOnScroll.ts"],"names":["useEffect","onCloseMap","WeakMap","useCloseOnScroll","opts","triggerRef","isOpen","onClose","onScroll","e","target","current","contains","onCloseHandler","get","window","addEventListener","removeEventListener"],"mappings":"AAAA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAAmBA,SAAnB,QAAmC,OAAnC,C,CAEA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,UAA4C,GAAG,IAAIC,OAAJ,EAArD;;AAQP;AACA,OAAO,SAASC,gBAAT,CAA0BC,IAA1B,EAAsD;AAC3D,MAAI;AAACC,IAAAA,UAAD;AAAaC,IAAAA,MAAb;AAAqBC,IAAAA;AAArB,MAAgCH,IAApC;AAEAJ,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI,CAACM,MAAL,EAAa;AACX;AACD;;AAED,QAAIE,QAAQ,GAAIC,CAAD,IAAmB;AAChC;AACA,UAAIC,MAAM,GAAGD,CAAC,CAACC,MAAf;;AACA,UAAI,CAACL,UAAU,CAACM,OAAZ,IAAuB,CAACD,MAAM,CAACE,QAAP,CAAgBP,UAAU,CAACM,OAA3B,CAA5B,EAAiE;AAC/D;AACD;;AAED,UAAIE,cAAc,GAAGN,OAAO,IAAIN,UAAU,CAACa,GAAX,CAAeT,UAAU,CAACM,OAA1B,CAAhC;;AACA,UAAIE,cAAJ,EAAoB;AAClBA,QAAAA,cAAc;AACf;AACF,KAXD;;AAaAE,IAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCR,QAAlC,EAA4C,IAA5C;AACA,WAAO,MAAM;AACXO,MAAAA,MAAM,CAACE,mBAAP,CAA2B,QAA3B,EAAqCT,QAArC,EAA+C,IAA/C;AACD,KAFD;AAGD,GAtBQ,EAsBN,CAACF,MAAD,EAASC,OAAT,EAAkBF,UAAlB,CAtBM,CAAT;AAuBD","sourcesContent":["//@ts-nocheck\n/*\n * Copyright 2020 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 {RefObject, useEffect} from 'react';\n\n// This behavior moved from useOverlayTrigger to useOverlayPosition.\n// For backward compatibility, where useOverlayTrigger handled hiding the popover on close,\n// it sets a close function here mapped from the trigger element. This way we can avoid\n// forcing users to pass an onClose function to useOverlayPosition which could be considered\n// a breaking change.\nexport const onCloseMap: WeakMap<HTMLElement, () => void> = new WeakMap();\n\ninterface CloseOnScrollOptions {\n  triggerRef: RefObject<HTMLElement>,\n  isOpen?: boolean,\n  onClose?: () => void\n}\n\n/** @private */\nexport function useCloseOnScroll(opts: CloseOnScrollOptions) {\n  let {triggerRef, isOpen, onClose} = opts;\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    let onScroll = (e: MouseEvent) => {\n      // Ignore if scrolling an scrollable region outside the trigger's tree.\n      let target = e.target as HTMLElement;\n      if (!triggerRef.current || !target.contains(triggerRef.current)) {\n        return;\n      }\n\n      let onCloseHandler = onClose || onCloseMap.get(triggerRef.current);\n      if (onCloseHandler) {\n        onCloseHandler();\n      }\n    };\n\n    window.addEventListener('scroll', onScroll, true);\n    return () => {\n      window.removeEventListener('scroll', onScroll, true);\n    };\n  }, [isOpen, onClose, triggerRef]);\n}\n"]}
+{"version":3,"sources":["useCloseOnScroll.ts"],"names":["useEffect","onCloseMap","WeakMap","useCloseOnScroll","opts","triggerRef","isOpen","onClose","onScroll","e","target","current","contains","onCloseHandler","get","window","addEventListener","removeEventListener"],"mappings":"AAAA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAAoBA,SAApB,QAAqC,OAArC,C,CAEA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,UAA4C,GAAG,IAAIC,OAAJ,EAArD;;AAQP;AACA,OAAO,SAASC,gBAAT,CAA0BC,IAA1B,EAAsD;AAC3D,MAAI;AAAEC,IAAAA,UAAF;AAAcC,IAAAA,MAAd;AAAsBC,IAAAA;AAAtB,MAAkCH,IAAtC;AAEAJ,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI,CAACM,MAAL,EAAa;AACX;AACD;;AAED,QAAIE,QAAQ,GAAIC,CAAD,IAAmB;AAChC;AACA,UAAIC,MAAM,GAAGD,CAAC,CAACC,MAAf;;AACA,UAAI,CAACL,UAAU,CAACM,OAAZ,IAAuB,CAACD,MAAM,CAACE,QAAP,CAAgBP,UAAU,CAACM,OAA3B,CAA5B,EAAiE;AAC/D;AACD;;AAED,UAAIE,cAAc,GAAGN,OAAO,IAAIN,UAAU,CAACa,GAAX,CAAeT,UAAU,CAACM,OAA1B,CAAhC;;AACA,UAAIE,cAAJ,EAAoB;AAClBA,QAAAA,cAAc;AACf;AACF,KAXD;;AAaAE,IAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCR,QAAlC,EAA4C,IAA5C;AACA,WAAO,MAAM;AACXO,MAAAA,MAAM,CAACE,mBAAP,CAA2B,QAA3B,EAAqCT,QAArC,EAA+C,IAA/C;AACD,KAFD;AAGD,GAtBQ,EAsBN,CAACF,MAAD,EAASC,OAAT,EAAkBF,UAAlB,CAtBM,CAAT;AAuBD","sourcesContent":["//@ts-nocheck\n/*\n * Copyright 2020 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 { RefObject, useEffect } from 'react';\n\n// This behavior moved from useOverlayTrigger to useOverlayPosition.\n// For backward compatibility, where useOverlayTrigger handled hiding the popover on close,\n// it sets a close function here mapped from the trigger element. This way we can avoid\n// forcing users to pass an onClose function to useOverlayPosition which could be considered\n// a breaking change.\nexport const onCloseMap: WeakMap<HTMLElement, () => void> = new WeakMap();\n\ninterface CloseOnScrollOptions {\n  triggerRef: RefObject<HTMLElement>;\n  isOpen?: boolean;\n  onClose?: () => void;\n}\n\n/** @private */\nexport function useCloseOnScroll(opts: CloseOnScrollOptions) {\n  let { triggerRef, isOpen, onClose } = opts;\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    let onScroll = (e: MouseEvent) => {\n      // Ignore if scrolling an scrollable region outside the trigger's tree.\n      let target = e.target as HTMLElement;\n      if (!triggerRef.current || !target.contains(triggerRef.current)) {\n        return;\n      }\n\n      let onCloseHandler = onClose || onCloseMap.get(triggerRef.current);\n      if (onCloseHandler) {\n        onCloseHandler();\n      }\n    };\n\n    window.addEventListener('scroll', onScroll, true);\n    return () => {\n      window.removeEventListener('scroll', onScroll, true);\n    };\n  }, [isOpen, onClose, triggerRef]);\n}\n"]}

package/lib/module/web/overlays/src/useOverlayPosition.js

@@ -100,7 +100,27 @@ export function useOverlayPosition(props) {
     triggerRef: targetRef,
     isOpen,
     onClose: onClose ? close : undefined
-  });
+  }); // useLayoutEffect(() => {
+  //   const mutationObserver = new MutationObserver((mutations) => {
+  //     updatePosition();
+  //     mutations.forEach((mutation) => {
+  //       // if (mutation.attributeName === 'style') {
+  //       //   const transform = mutation.target.style.transform;
+  //       //   if (transform) {
+  //       //     const match = transform.match(/scale\((.+)\)/);
+  //       //     if (match) {
+  //       //       const scale = parseFloat(match[1]);
+  //       //       console.log(`Scale: ${scale}`);
+  //       //       // updatePosition();
+  //       //     }
+  //       //   }
+  //       // }
+  //     });
+  //   });
+  //   mutationObserver.observe(overlayRef?.current, { attributes: true });
+  //   return () => mutationObserver.disconnect();
+  // }, [overlayRef, updatePosition]);
+
   return {
     rendered: true,
     overlayProps: {

package/lib/module/web/overlays/src/useOverlayPosition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverlayPosition.ts"],"names":["calculatePosition","useCallback","useRef","useState","useCloseOnScroll","isRTL","useLayoutEffect","visualViewport","window","useOverlayPosition","props","direction","undefined","targetRef","overlayRef","scrollRef","placement","containerPadding","shouldFlip","boundaryElement","document","body","offset","crossOffset","shouldUpdatePosition","isOpen","shouldOverlapWithTrigger","onClose","position","setPosition","arrowOffsetLeft","arrowOffsetTop","maxHeight","deps","current","updatePosition","translateRTL","overlayNode","targetNode","scrollNode","padding","useResize","isResizing","timeout","onResize","clearTimeout","setTimeout","addEventListener","removeEventListener","close","triggerRef","rendered","overlayProps","style","zIndex","arrowProps","left","top","replace"],"mappings":"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","sourcesContent":["//@ts-nocheck\n/*\n * Copyright 2020 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 { calculatePosition, PositionResult } from './calculatePosition';\nimport {\n  HTMLAttributes,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement, PlacementAxis, PositionProps } from '@react-types/overlays';\nimport { useCloseOnScroll } from './useCloseOnScroll';\nimport { isRTL, useLayoutEffect } from '@react-native-aria/utils';\n\ninterface AriaPositionProps extends PositionProps {\n  /**\n   * Element that that serves as the positioning boundary.\n   * @default document.body\n   */\n  boundaryElement?: HTMLElement;\n  /**\n   * The ref for the element which the overlay positions itself with respect to.\n   */\n  targetRef: RefObject<HTMLElement>;\n  /**\n   * The ref for the overlay element.\n   */\n  overlayRef: RefObject<HTMLElement>;\n  /**\n   * A ref for the scrollable region within the overlay.\n   * @default overlayRef\n   */\n  scrollRef?: RefObject<HTMLElement>;\n  /**\n   * Whether the overlay should update its position automatically.\n   * @default true\n   */\n  shouldUpdatePosition?: boolean;\n  /** Handler that is called when the overlay should close. */\n  onClose?: () => void;\n  /** Determines whether the overlay should overlap with the trigger */\n  shouldOverlapWithTrigger?: boolean;\n}\n\ninterface PositionAria {\n  /** Props for the overlay container element. */\n  overlayProps: HTMLAttributes<Element>;\n  /** Props for the overlay tip arrow if any. */\n  arrowProps: HTMLAttributes<Element>;\n  /** Placement of the overlay with respect to the overlay trigger. */\n  placement: PlacementAxis;\n  /** Updates the position of the overlay. */\n  updatePosition(): void;\n}\n\n// @ts-ignore\nlet visualViewport = typeof window !== 'undefined' && window.visualViewport;\n\n/**\n * Handles positioning overlays like popovers and menus relative to a trigger\n * element, and updating the position when the window resizes.\n */\nexport function useOverlayPosition(props: AriaPositionProps): PositionAria {\n  const direction = isRTL() ? 'rtl' : undefined;\n  let {\n    targetRef,\n    overlayRef,\n    scrollRef = overlayRef,\n    placement = 'bottom' as Placement,\n    containerPadding = 12,\n    shouldFlip = true,\n    boundaryElement = typeof document !== 'undefined' ? document.body : null,\n    offset = 0,\n    crossOffset = 0,\n    shouldUpdatePosition = true,\n    isOpen = true,\n    shouldOverlapWithTrigger = false,\n    onClose,\n  } = props;\n  let [position, setPosition] = useState<PositionResult>({\n    position: {},\n    arrowOffsetLeft: undefined,\n    arrowOffsetTop: undefined,\n    maxHeight: undefined,\n    placement: undefined,\n  });\n\n  let deps = [\n    shouldUpdatePosition,\n    placement,\n    overlayRef.current,\n    targetRef.current,\n    scrollRef.current,\n    containerPadding,\n    shouldFlip,\n    boundaryElement,\n    offset,\n    crossOffset,\n    isOpen,\n    direction,\n    shouldOverlapWithTrigger\n  ];\n\n  let updatePosition = useCallback(() => {\n    if (\n      shouldUpdatePosition === false ||\n      !isOpen ||\n      !overlayRef.current ||\n      !targetRef.current ||\n      !scrollRef.current ||\n      !boundaryElement\n    ) {\n      return;\n    }\n\n    setPosition(\n      calculatePosition({\n        placement: translateRTL(placement, direction),\n        overlayNode: overlayRef.current,\n        targetNode: targetRef.current,\n        scrollNode: scrollRef.current,\n        padding: containerPadding,\n        shouldFlip,\n        boundaryElement,\n        offset,\n        crossOffset,\n        shouldOverlapWithTrigger,\n      })\n    );\n  }, deps);\n\n  // Update position when anything changes\n  useLayoutEffect(updatePosition, deps);\n\n  // Update position on window resize\n  useResize(updatePosition);\n\n  // Reposition the overlay and do not close on scroll while the visual viewport is resizing.\n  // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.\n  let isResizing = useRef(false);\n  useLayoutEffect(() => {\n    let timeout: NodeJS.Timeout;\n    let onResize = () => {\n      isResizing.current = true;\n      clearTimeout(timeout);\n\n      timeout = setTimeout(() => {\n        isResizing.current = false;\n      }, 500);\n\n      updatePosition();\n    };\n\n    visualViewport?.addEventListener('resize', onResize);\n\n    return () => {\n      visualViewport?.removeEventListener('resize', onResize);\n    };\n  }, [updatePosition]);\n\n  let close = useCallback(() => {\n    if (!isResizing.current) {\n      onClose();\n    }\n  }, [onClose, isResizing]);\n\n  // When scrolling a parent scrollable region of the trigger (other than the body),\n  // we hide the popover. Otherwise, its position would be incorrect.\n  useCloseOnScroll({\n    triggerRef: targetRef,\n    isOpen,\n    onClose: onClose ? close : undefined,\n  });\n\n  return {\n    rendered: true,\n    overlayProps: {\n      style: {\n        position: 'absolute',\n        zIndex: 100000, // should match the z-index in ModalTrigger\n        ...position.position,\n        maxHeight: position.maxHeight,\n      },\n    },\n    placement: position.placement,\n    arrowProps: {\n      style: {\n        left: position.arrowOffsetLeft,\n        top: position.arrowOffsetTop,\n      },\n    },\n    updatePosition,\n  };\n}\n\nfunction useResize(onResize) {\n  useLayoutEffect(() => {\n    window.addEventListener('resize', onResize, false);\n    return () => {\n      window.removeEventListener('resize', onResize, false);\n    };\n  }, [onResize]);\n}\n\nfunction translateRTL(position, direction) {\n  if (direction === 'rtl') {\n    return position.replace('start', 'right').replace('end', 'left');\n  }\n  return position.replace('start', 'left').replace('end', 'right');\n}\n"]}
+{"version":3,"sources":["useOverlayPosition.ts"],"names":["calculatePosition","useCallback","useRef","useState","useCloseOnScroll","isRTL","useLayoutEffect","visualViewport","window","useOverlayPosition","props","direction","undefined","targetRef","overlayRef","scrollRef","placement","containerPadding","shouldFlip","boundaryElement","document","body","offset","crossOffset","shouldUpdatePosition","isOpen","shouldOverlapWithTrigger","onClose","position","setPosition","arrowOffsetLeft","arrowOffsetTop","maxHeight","deps","current","updatePosition","translateRTL","overlayNode","targetNode","scrollNode","padding","useResize","isResizing","timeout","onResize","clearTimeout","setTimeout","addEventListener","removeEventListener","close","triggerRef","rendered","overlayProps","style","zIndex","arrowProps","left","top","replace"],"mappings":"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","sourcesContent":["//@ts-nocheck\n/*\n * Copyright 2020 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 { calculatePosition, PositionResult } from './calculatePosition';\nimport {\n  HTMLAttributes,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement, PlacementAxis, PositionProps } from '@react-types/overlays';\nimport { useCloseOnScroll } from './useCloseOnScroll';\nimport { isRTL, useLayoutEffect } from '@react-native-aria/utils';\n\ninterface AriaPositionProps extends PositionProps {\n  /**\n   * Element that that serves as the positioning boundary.\n   * @default document.body\n   */\n  boundaryElement?: HTMLElement;\n  /**\n   * The ref for the element which the overlay positions itself with respect to.\n   */\n  targetRef: RefObject<HTMLElement>;\n  /**\n   * The ref for the overlay element.\n   */\n  overlayRef: RefObject<HTMLElement>;\n  /**\n   * A ref for the scrollable region within the overlay.\n   * @default overlayRef\n   */\n  scrollRef?: RefObject<HTMLElement>;\n  /**\n   * Whether the overlay should update its position automatically.\n   * @default true\n   */\n  shouldUpdatePosition?: boolean;\n  /** Handler that is called when the overlay should close. */\n  onClose?: () => void;\n  /** Determines whether the overlay should overlap with the trigger */\n  shouldOverlapWithTrigger?: boolean;\n}\n\ninterface PositionAria {\n  /** Props for the overlay container element. */\n  overlayProps: HTMLAttributes<Element>;\n  /** Props for the overlay tip arrow if any. */\n  arrowProps: HTMLAttributes<Element>;\n  /** Placement of the overlay with respect to the overlay trigger. */\n  placement: PlacementAxis;\n  /** Updates the position of the overlay. */\n  updatePosition(): void;\n}\n\n// @ts-ignore\nlet visualViewport = typeof window !== 'undefined' && window.visualViewport;\n\n/**\n * Handles positioning overlays like popovers and menus relative to a trigger\n * element, and updating the position when the window resizes.\n */\nexport function useOverlayPosition(props: AriaPositionProps): PositionAria {\n  const direction = isRTL() ? 'rtl' : undefined;\n  let {\n    targetRef,\n    overlayRef,\n    scrollRef = overlayRef,\n    placement = 'bottom' as Placement,\n    containerPadding = 12,\n    shouldFlip = true,\n    boundaryElement = typeof document !== 'undefined' ? document.body : null,\n    offset = 0,\n    crossOffset = 0,\n    shouldUpdatePosition = true,\n    isOpen = true,\n    shouldOverlapWithTrigger = false,\n    onClose,\n  } = props;\n  let [position, setPosition] = useState<PositionResult>({\n    position: {},\n    arrowOffsetLeft: undefined,\n    arrowOffsetTop: undefined,\n    maxHeight: undefined,\n    placement: undefined,\n  });\n\n  let deps = [\n    shouldUpdatePosition,\n    placement,\n    overlayRef.current,\n    targetRef.current,\n    scrollRef.current,\n    containerPadding,\n    shouldFlip,\n    boundaryElement,\n    offset,\n    crossOffset,\n    isOpen,\n    direction,\n    shouldOverlapWithTrigger,\n  ];\n\n  let updatePosition = useCallback(() => {\n    if (\n      shouldUpdatePosition === false ||\n      !isOpen ||\n      !overlayRef.current ||\n      !targetRef.current ||\n      !scrollRef.current ||\n      !boundaryElement\n    ) {\n      return;\n    }\n\n    setPosition(\n      calculatePosition({\n        placement: translateRTL(placement, direction),\n        overlayNode: overlayRef.current,\n        targetNode: targetRef.current,\n        scrollNode: scrollRef.current,\n        padding: containerPadding,\n        shouldFlip,\n        boundaryElement,\n        offset,\n        crossOffset,\n        shouldOverlapWithTrigger,\n      })\n    );\n  }, deps);\n\n  // Update position when anything changes\n  useLayoutEffect(updatePosition, deps);\n\n  // Update position on window resize\n  useResize(updatePosition);\n\n  // Reposition the overlay and do not close on scroll while the visual viewport is resizing.\n  // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.\n  let isResizing = useRef(false);\n  useLayoutEffect(() => {\n    let timeout: NodeJS.Timeout;\n    let onResize = () => {\n      isResizing.current = true;\n      clearTimeout(timeout);\n\n      timeout = setTimeout(() => {\n        isResizing.current = false;\n      }, 500);\n\n      updatePosition();\n    };\n\n    visualViewport?.addEventListener('resize', onResize);\n\n    return () => {\n      visualViewport?.removeEventListener('resize', onResize);\n    };\n  }, [updatePosition]);\n\n  let close = useCallback(() => {\n    if (!isResizing.current) {\n      onClose();\n    }\n  }, [onClose, isResizing]);\n\n  // When scrolling a parent scrollable region of the trigger (other than the body),\n  // we hide the popover. Otherwise, its position would be incorrect.\n  useCloseOnScroll({\n    triggerRef: targetRef,\n    isOpen,\n    onClose: onClose ? close : undefined,\n  });\n\n  // useLayoutEffect(() => {\n  //   const mutationObserver = new MutationObserver((mutations) => {\n  //     updatePosition();\n  //     mutations.forEach((mutation) => {\n  //       // if (mutation.attributeName === 'style') {\n  //       //   const transform = mutation.target.style.transform;\n  //       //   if (transform) {\n  //       //     const match = transform.match(/scale\\((.+)\\)/);\n  //       //     if (match) {\n  //       //       const scale = parseFloat(match[1]);\n  //       //       console.log(`Scale: ${scale}`);\n  //       //       // updatePosition();\n  //       //     }\n  //       //   }\n  //       // }\n  //     });\n  //   });\n\n  //   mutationObserver.observe(overlayRef?.current, { attributes: true });\n\n  //   return () => mutationObserver.disconnect();\n  // }, [overlayRef, updatePosition]);\n\n  return {\n    rendered: true,\n    overlayProps: {\n      style: {\n        position: 'absolute',\n        zIndex: 100000, // should match the z-index in ModalTrigger\n        ...position.position,\n        maxHeight: position.maxHeight,\n      },\n    },\n    placement: position.placement,\n    arrowProps: {\n      style: {\n        left: position.arrowOffsetLeft,\n        top: position.arrowOffsetTop,\n      },\n    },\n    updatePosition,\n  };\n}\n\nfunction useResize(onResize) {\n  useLayoutEffect(() => {\n    window.addEventListener('resize', onResize, false);\n    return () => {\n      window.removeEventListener('resize', onResize, false);\n    };\n  }, [onResize]);\n}\n\nfunction translateRTL(position, direction) {\n  if (direction === 'rtl') {\n    return position.replace('start', 'right').replace('end', 'left');\n  }\n  return position.replace('start', 'left').replace('end', 'right');\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-aria/overlays",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Overlay utilities. Part of react-native-aria",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/web/overlays/src/calculatePosition.ts

@@ -11,88 +11,94 @@
  * governing permissions and limitations under the License.
  */
 
-import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-types/overlays';
+import {
+  Axis,
+  Placement,
+  PlacementAxis,
+  SizeAxis,
+} from '@react-types/overlays';
 import getCss from 'dom-helpers/css';
 import getOffset from 'dom-helpers/offset';
 import getPosition from 'dom-helpers/position';
 import getScrollLeft from 'dom-helpers/scrollLeft';
 import getScrollTop from 'dom-helpers/scrollTop';
 import ownerDocument from 'dom-helpers/ownerDocument';
+import getComputedStyle from 'dom-helpers/getComputedStyle';
 
 interface Position {
-  top?: number,
-  left?: number,
-  bottom?: number,
-  right?: number
+  top?: number;
+  left?: number;
+  bottom?: number;
+  right?: number;
 }
 
 interface Dimensions {
-  width: number,
-  height: number,
-  top: number,
-  left: number,
-  scroll: Position
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+  scroll: Position;
 }
 
 interface ParsedPlacement {
-  placement: PlacementAxis,
-  crossPlacement: PlacementAxis,
-  axis: Axis,
-  crossAxis: Axis,
-  size: SizeAxis,
-  crossSize: SizeAxis
+  placement: PlacementAxis;
+  crossPlacement: PlacementAxis;
+  axis: Axis;
+  crossAxis: Axis;
+  size: SizeAxis;
+  crossSize: SizeAxis;
 }
 
 interface Offset {
-  top: number,
-  left: number,
-  width: number,
-  height: number
+  top: number;
+  left: number;
+  width: number;
+  height: number;
 }
 
 interface PositionOpts {
-  placement: Placement,
-  targetNode: HTMLElement,
-  overlayNode: HTMLElement,
-  scrollNode: HTMLElement,
-  padding: number,
-  shouldFlip: boolean,
-  boundaryElement: HTMLElement,
-  offset: number,
-  crossOffset: number,
-  shouldOverlapWithTrigger: boolean
+  placement: Placement;
+  targetNode: HTMLElement;
+  overlayNode: HTMLElement;
+  scrollNode: HTMLElement;
+  padding: number;
+  shouldFlip: boolean;
+  boundaryElement: HTMLElement;
+  offset: number;
+  crossOffset: number;
+  shouldOverlapWithTrigger: boolean;
 }
 
 export interface PositionResult {
-  position?: Position,
-  arrowOffsetLeft?: number,
-  arrowOffsetTop?: number,
-  maxHeight?: number,
-  placement: PlacementAxis
+  position?: Position;
+  arrowOffsetLeft?: number;
+  arrowOffsetTop?: number;
+  maxHeight?: number;
+  placement: PlacementAxis;
 }
 
 const AXIS = {
   top: 'top',
   bottom: 'top',
   left: 'left',
-  right: 'left'
+  right: 'left',
 };
 
 const FLIPPED_DIRECTION = {
   top: 'bottom',
   bottom: 'top',
   left: 'right',
-  right: 'left'
+  right: 'left',
 };
 
 const CROSS_AXIS = {
   top: 'left',
-  left: 'top'
+  left: 'top',
 };
 
 const AXIS_SIZE = {
   top: 'height',
-  left: 'width'
+  left: 'width',
 };
 
 const PARSED_PLACEMENT_CACHE = {};
@@ -101,7 +107,10 @@ const PARSED_PLACEMENT_CACHE = {};
 let visualViewport = typeof window !== 'undefined' && window.visualViewport;
 
 function getContainerDimensions(containerNode: Element): Dimensions {
-  let width = 0, height = 0, top = 0, left = 0;
+  let width = 0,
+    height = 0,
+    top = 0,
+    left = 0;
   let scroll: Position = {};
 
   if (containerNode.tagName === 'BODY') {
@@ -115,12 +124,12 @@ function getContainerDimensions(containerNode: Element): Dimensions {
       getScrollLeft(ownerDocument(containerNode).documentElement) ||
       getScrollLeft(containerNode);
   } else {
-    ({width, height, top, left} = getOffset(containerNode));
+    ({ width, height, top, left } = getOffset(containerNode));
     scroll.top = getScrollTop(containerNode);
     scroll.left = getScrollLeft(containerNode);
   }
 
-  return {width, height, scroll, top, left};
+  return { width, height, scroll, top, left };
 }
 
 function getScroll(node: HTMLElement): Offset {
@@ -128,7 +137,7 @@ function getScroll(node: HTMLElement): Offset {
     top: node.scrollTop,
     left: node.scrollLeft,
     width: node.scrollWidth,
-    height: node.scrollHeight
+    height: node.scrollHeight,
   };
 }
 
@@ -160,7 +169,7 @@ function getMargins(node: HTMLElement): Position {
     top: parseInt(style.marginTop, 10) || 0,
     bottom: parseInt(style.marginBottom, 10) || 0,
     left: parseInt(style.marginLeft, 10) || 0,
-    right: parseInt(style.marginRight, 10) || 0
+    right: parseInt(style.marginRight, 10) || 0,
   };
 }
 
@@ -179,7 +188,14 @@ function parsePlacement(input: Placement): ParsedPlacement {
 
   let size = AXIS_SIZE[axis];
   let crossSize = AXIS_SIZE[crossAxis];
-  PARSED_PLACEMENT_CACHE[input] = {placement, crossPlacement, axis, crossAxis, size, crossSize};
+  PARSED_PLACEMENT_CACHE[input] = {
+    placement,
+    crossPlacement,
+    axis,
+    crossAxis,
+    size,
+    crossSize,
+  };
   return PARSED_PLACEMENT_CACHE[input];
 }
 
@@ -193,32 +209,47 @@ function computePosition(
   containerOffsetWithBoundary: Offset,
   isContainerPositioned: boolean
 ) {
-  let {placement, crossPlacement, axis, crossAxis, size, crossSize} = placementInfo;
+  let {
+    placement,
+    crossPlacement,
+    axis,
+    crossAxis,
+    size,
+    crossSize,
+  } = placementInfo;
   let position: Position = {};
 
   // button position
   position[crossAxis] = childOffset[crossAxis];
+
   if (crossPlacement === 'center') {
     //  + (button size / 2) - (overlay size / 2)
     // at this point the overlay center should match the button center
-    position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]) / 2;
+    position[crossAxis] +=
+      (childOffset[crossSize] - overlaySize[crossSize]) / 2;
   } else if (crossPlacement !== crossAxis) {
     //  + (button size) - (overlay size)
     // at this point the overlay bottom should match the button bottom
-    position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]);
-  }/* else {
+    position[crossAxis] += childOffset[crossSize] - overlaySize[crossSize];
+  } /* else {
     the overlay top should match the button top
   } */
   // add the crossOffset from props
   position[crossAxis] += crossOffset;
 
-  // this is button center position - the overlay size + half of the button to align bottom of overlay with button center
-  let minViablePosition = childOffset[crossAxis] + (childOffset[crossSize] / 2) - overlaySize[crossSize];
-  // this is button position of center, aligns top of overlay with button center
-  let maxViablePosition = childOffset[crossAxis] + (childOffset[crossSize] / 2);
+  // // this is button center position - the overlay size + half of the button to align bottom of overlay with button center
+  // let minViablePosition =
+  //   childOffset[crossAxis] +
+  //   childOffset[crossSize] / 2 -
+  //   overlaySize[crossSize];
+  // // this is button position of center, aligns top of overlay with button center
+  // let maxViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2;
 
-  // clamp it into the range of the min/max positions
-  position[crossAxis] = Math.min(Math.max(minViablePosition, position[crossAxis]), maxViablePosition);
+  // // clamp it into the range of the min/max positions
+  // position[crossAxis] = Math.min(
+  //   Math.max(minViablePosition, position[crossAxis]),
+  //   maxViablePosition
+  // );
 
   // Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
   if (placement === axis) {
@@ -226,8 +257,12 @@ function computePosition(
     // height, as `bottom` will be relative to this height.  But if the container is static,
     // then it can only be the `document.body`, and `bottom` will be relative to _its_
     // container, which should be as large as boundaryDimensions.
-    const containerHeight = (isContainerPositioned ? containerOffsetWithBoundary[size] : boundaryDimensions[size]);
-    position[FLIPPED_DIRECTION[axis]] = Math.floor(containerHeight - childOffset[axis] + offset);
+    const containerHeight = isContainerPositioned
+      ? containerOffsetWithBoundary[size]
+      : boundaryDimensions[size];
+    position[FLIPPED_DIRECTION[axis]] = Math.floor(
+      containerHeight - childOffset[axis] + offset
+    );
   } else {
     position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
   }
@@ -244,17 +279,22 @@ function getMaxHeight(
   padding: number
 ) {
   return position.top != null
-    // We want the distance between the top of the overlay to the bottom of the boundary
-    ? Math.max(0,
-      (boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the bottom of the boundary
-      - (containerOffsetWithBoundary.top + position.top) // this is the top of the overlay
-      - (margins.top + margins.bottom + padding) // save additional space for margin and padding
+    ? // We want the distance between the top of the overlay to the bottom of the boundary
+    Math.max(
+      0,
+      boundaryDimensions.height +
+      boundaryDimensions.top +
+      boundaryDimensions.scroll.top - // this is the bottom of the boundary
+      (containerOffsetWithBoundary.top + position.top) - // this is the top of the overlay
+      (margins.top + margins.bottom + padding) // save additional space for margin and padding
     )
-    // We want the distance between the top of the trigger to the top of the boundary
-    : Math.max(0,
-      (childOffset.top + containerOffsetWithBoundary.top) // this is the top of the trigger
-      - (boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the top of the boundary
-      - (margins.top + margins.bottom + padding) // save additional space for margin and padding
+    : // We want the distance between the top of the trigger to the top of the boundary
+    Math.max(
+      0,
+      childOffset.top +
+      containerOffsetWithBoundary.top - // this is the top of the trigger
+      (boundaryDimensions.top + boundaryDimensions.scroll.top) - // this is the top of the boundary
+      (margins.top + margins.bottom + padding) // save additional space for margin and padding
     );
 }
 
@@ -266,12 +306,32 @@ function getAvailableSpace(
   padding: number,
   placementInfo: ParsedPlacement
 ) {
-  let {placement, axis, size} = placementInfo;
+  let { placement, axis, size } = placementInfo;
   if (placement === axis) {
-    return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - boundaryDimensions.scroll[axis] + containerOffsetWithBoundary[axis] - margins[axis] - margins[FLIPPED_DIRECTION[axis]] - padding);
+    return Math.max(
+      0,
+      childOffset[axis] -
+      boundaryDimensions[axis] -
+      boundaryDimensions.scroll[axis] +
+      containerOffsetWithBoundary[axis] -
+      margins[axis] -
+      margins[FLIPPED_DIRECTION[axis]] -
+      padding
+    );
   }
 
-  return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - margins[axis] - margins[FLIPPED_DIRECTION[axis]] - padding);
+  return Math.max(
+    0,
+    boundaryDimensions[size] +
+    boundaryDimensions[axis] +
+    boundaryDimensions.scroll[axis] -
+    containerOffsetWithBoundary[axis] -
+    childOffset[axis] -
+    childOffset[size] -
+    margins[axis] -
+    margins[FLIPPED_DIRECTION[axis]] -
+    padding
+  );
 }
 
 export function calculatePositionInternal(
@@ -290,8 +350,25 @@ export function calculatePositionInternal(
   shouldOverlapWithTrigger: boolean
 ): PositionResult {
   let placementInfo = parsePlacement(placementInput);
-  let {size, crossAxis, crossSize, placement, crossPlacement, axis} = placementInfo;
-  let position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+  let {
+    size,
+    crossAxis,
+    crossSize,
+    placement,
+    crossPlacement,
+    axis,
+  } = placementInfo;
+  let position = computePosition(
+    childOffset,
+    boundaryDimensions,
+    overlaySize,
+    placementInfo,
+    offset,
+    crossOffset,
+    containerOffsetWithBoundary,
+    isContainerPositioned
+  );
+
   let normalizedOffset = offset;
   let space = getAvailableSpace(
     boundaryDimensions,
@@ -304,8 +381,19 @@ export function calculatePositionInternal(
 
   // Check if the scroll size of the overlay is greater than the available space to determine if we need to flip
   if (flip && scrollSize[size] > space) {
-    let flippedPlacementInfo = parsePlacement(`${FLIPPED_DIRECTION[placement]} ${crossPlacement}` as Placement);
-    let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+    let flippedPlacementInfo = parsePlacement(
+      `${FLIPPED_DIRECTION[placement]} ${crossPlacement}` as Placement
+    );
+    let flippedPosition = computePosition(
+      childOffset,
+      boundaryDimensions,
+      overlaySize,
+      flippedPlacementInfo,
+      offset,
+      crossOffset,
+      containerOffsetWithBoundary,
+      isContainerPositioned
+    );
     let flippedSpace = getAvailableSpace(
       boundaryDimensions,
       containerOffsetWithBoundary,
@@ -323,7 +411,13 @@ export function calculatePositionInternal(
     }
   }
 
-  let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
+  let delta = getDelta(
+    crossAxis,
+    position[crossAxis],
+    overlaySize[crossSize],
+    boundaryDimensions,
+    padding
+  );
   position[crossAxis] += delta;
 
   let maxHeight = getMaxHeight(
@@ -337,15 +431,32 @@ export function calculatePositionInternal(
 
   overlaySize.height = Math.min(overlaySize.height, maxHeight);
 
-  position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
-  delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
+  position = computePosition(
+    childOffset,
+    boundaryDimensions,
+    overlaySize,
+    placementInfo,
+    normalizedOffset,
+    crossOffset,
+    containerOffsetWithBoundary,
+    isContainerPositioned
+  );
+  delta = getDelta(
+    crossAxis,
+    position[crossAxis],
+    overlaySize[crossSize],
+    boundaryDimensions,
+    padding
+  );
   position[crossAxis] += delta;
 
   let arrowPosition: Position = {};
-  arrowPosition[crossAxis] = (childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2);
+  arrowPosition[crossAxis] =
+    childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
 
   if (shouldOverlapWithTrigger) {
-    position[FLIPPED_DIRECTION[placementInfo.placement]] = position[FLIPPED_DIRECTION[placementInfo.placement]] - childOffset[size];
+    position[FLIPPED_DIRECTION[placementInfo.placement]] =
+      position[FLIPPED_DIRECTION[placementInfo.placement]] - childOffset[size];
   }
 
   return {
@@ -353,7 +464,7 @@ export function calculatePositionInternal(
     maxHeight: maxHeight,
     arrowOffsetLeft: arrowPosition.left,
     arrowOffsetTop: arrowPosition.top,
-    placement: placementInfo.placement
+    placement: placementInfo.placement,
   };
 }
 
@@ -371,14 +482,17 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     boundaryElement,
     offset,
     crossOffset,
-    shouldOverlapWithTrigger
+    shouldOverlapWithTrigger,
   } = opts;
 
   let container = overlayNode.offsetParent || document.body;
   let isBodyContainer = container.tagName === 'BODY';
   const containerPositionStyle = window.getComputedStyle(container).position;
-  let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== 'static';
-  let childOffset: Offset = isBodyContainer ? getOffset(targetNode) : getPosition(targetNode, container);
+  let isContainerPositioned =
+    !!containerPositionStyle && containerPositionStyle !== 'static';
+  let childOffset: Offset = isBodyContainer
+    ? getOffset(targetNode)
+    : getPosition(targetNode, container);
 
   if (!isBodyContainer) {
     childOffset.top += parseInt(getCss(targetNode, 'marginTop'), 10) || 0;
@@ -386,14 +500,42 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
   }
 
   let overlaySize: Offset = getOffset(overlayNode);
+  const matrix = getComputedStyle(overlayNode).getPropertyValue('transform');
+  const transform = matrix;
+  const regex = /matrix\((-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+)\)/;
+  const matches = transform.match(regex);
+  let scaleX = 1;
+  let scaleY = 1;
+
+  if (matches) {
+    scaleX = parseFloat(matches[1]);
+    scaleY = parseFloat(matches[4]);
+    if (!scaleX || !Number.isFinite(scaleX)) {
+      scaleX = 1;
+    }
+
+    if (!scaleY || !Number.isFinite(scaleY)) {
+      scaleY = 1;
+    }
+  }
+
   let margins = getMargins(overlayNode);
   overlaySize.width += margins.left + margins.right;
   overlaySize.height += margins.top + margins.bottom;
 
+  if (scaleX) {
+    overlaySize.width = overlaySize.width / scaleX;
+  }
+  if (scaleY) {
+    overlaySize.height = overlaySize.height / scaleY;
+  }
+
   let scrollSize = getScroll(scrollNode);
   let boundaryDimensions = getContainerDimensions(boundaryElement);
-  let containerOffsetWithBoundary: Offset = boundaryElement.tagName === 'BODY' ? getOffset(container) : getPosition(container, boundaryElement);
-
+  let containerOffsetWithBoundary: Offset =
+    boundaryElement.tagName === 'BODY'
+      ? getOffset(container)
+      : getPosition(container, boundaryElement);
 
   return calculatePositionInternal(
     placement,

package/src/web/overlays/src/useCloseOnScroll.ts

@@ -11,7 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {RefObject, useEffect} from 'react';
+import { RefObject, useEffect } from 'react';
 
 // This behavior moved from useOverlayTrigger to useOverlayPosition.
 // For backward compatibility, where useOverlayTrigger handled hiding the popover on close,
@@ -21,14 +21,14 @@ import {RefObject, useEffect} from 'react';
 export const onCloseMap: WeakMap<HTMLElement, () => void> = new WeakMap();
 
 interface CloseOnScrollOptions {
-  triggerRef: RefObject<HTMLElement>,
-  isOpen?: boolean,
-  onClose?: () => void
+  triggerRef: RefObject<HTMLElement>;
+  isOpen?: boolean;
+  onClose?: () => void;
 }
 
 /** @private */
 export function useCloseOnScroll(opts: CloseOnScrollOptions) {
-  let {triggerRef, isOpen, onClose} = opts;
+  let { triggerRef, isOpen, onClose } = opts;
 
   useEffect(() => {
     if (!isOpen) {