@react-aria/overlays - npm Package Compare versions

Comparing version 3.0.0-nightly.677 to 3.0.0-nightly.680

dist/main.js

@@ -297,2 +297,43 @@ var {
 
+// This behavior moved from useOverlayTrigger to useOverlayPosition.
+// For backward compatibility, where useOverlayTrigger handled hiding the popover on close,
+// it sets a close function here mapped from the trigger element. This way we can avoid
+// forcing users to pass an onClose function to useOverlayPosition which could be considered
+// a breaking change.
+const $ceea668dd9ec3b754bdc10a8bbb8$export$onCloseMap = new WeakMap();
+
+/** @private */
+function $ceea668dd9ec3b754bdc10a8bbb8$export$useCloseOnScroll(opts) {
+  let {
+    triggerRef,
+    isOpen,
+    onClose
+  } = opts;
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    let onScroll = e => {
+      // Ignore if scrolling an scrollable region outside the trigger's tree.
+      let target = e.target;
+
+      if (!triggerRef.current || !target.contains(triggerRef.current)) {
+        return;
+      }
+
+      let onCloseHandler = onClose || $ceea668dd9ec3b754bdc10a8bbb8$export$onCloseMap.get(triggerRef.current);
+
+      if (onCloseHandler) {
+        onCloseHandler();
+      }
+    };
+
+    window.addEventListener('scroll', onScroll, true);
+    return () => {
+      window.removeEventListener('scroll', onScroll, true);
+    };
+  }, [isOpen, onClose, triggerRef]);
+}
+
 /**
@@ -317,3 +358,4 @@ * Handles positioning overlays like popovers and menus relative to a trigger
     shouldUpdatePosition = true,
-    isOpen = true
+    isOpen = true,
+    onClose
   } = props;
@@ -348,3 +390,10 @@ let [position, setPosition] = useState({
 
-  $adfbd034e9bc71c1$var$useResize(updatePosition);
+  $adfbd034e9bc71c1$var$useResize(updatePosition); // When scrolling a parent scrollable region of the trigger (other than the body),
+  // we hide the popover. Otherwise, its position would be incorrect.
+
+  $ceea668dd9ec3b754bdc10a8bbb8$export$useCloseOnScroll({
+    triggerRef: targetRef,
+    isOpen,
+    onClose
+  });
   return {
@@ -474,26 +523,10 @@ overlayProps: {
     isOpen
-  } = state; // When scrolling a parent scrollable region of the trigger (other than the body),
-  // we hide the popover. Otherwise, its position would be incorrect.
+  } = state; // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll
+  // without forcing users to pass onClose.
 
   useEffect(() => {
-    if (!isOpen) {
-      return;
+    if (ref.current) {
+      $ceea668dd9ec3b754bdc10a8bbb8$export$onCloseMap.set(ref.current, state.close);
     }
-
-    let onScroll = e => {
-      // Ignore if scrolling an scrollable region outside the trigger's tree.
-      let target = e.target;
-
-      if (!ref.current || !target.contains(ref.current)) {
-        return;
-      }
-
-      state.close();
-    };
-
-    window.addEventListener('scroll', onScroll, true);
-    return () => {
-      window.removeEventListener('scroll', onScroll, true);
-    };
-  }, [isOpen, ref]); // Aria 1.1 supports multiple values for aria-haspopup other than just menus.
+  }); // Aria 1.1 supports multiple values for aria-haspopup other than just menus.
   // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup
@@ -500,0 +533,0 @@ // However, we only add it for menus for now because screen readers often

dist/module.js

@@ -260,2 +260,43 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 
+// This behavior moved from useOverlayTrigger to useOverlayPosition.
+// For backward compatibility, where useOverlayTrigger handled hiding the popover on close,
+// it sets a close function here mapped from the trigger element. This way we can avoid
+// forcing users to pass an onClose function to useOverlayPosition which could be considered
+// a breaking change.
+const $df1b2f080f58bf9e74aeb666b8c96ba$export$onCloseMap = new WeakMap();
+
+/** @private */
+function $df1b2f080f58bf9e74aeb666b8c96ba$export$useCloseOnScroll(opts) {
+  let {
+    triggerRef,
+    isOpen,
+    onClose
+  } = opts;
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    let onScroll = e => {
+      // Ignore if scrolling an scrollable region outside the trigger's tree.
+      let target = e.target;
+
+      if (!triggerRef.current || !target.contains(triggerRef.current)) {
+        return;
+      }
+
+      let onCloseHandler = onClose || $df1b2f080f58bf9e74aeb666b8c96ba$export$onCloseMap.get(triggerRef.current);
+
+      if (onCloseHandler) {
+        onCloseHandler();
+      }
+    };
+
+    window.addEventListener('scroll', onScroll, true);
+    return () => {
+      window.removeEventListener('scroll', onScroll, true);
+    };
+  }, [isOpen, onClose, triggerRef]);
+}
+
 /**
@@ -280,3 +321,4 @@ * Handles positioning overlays like popovers and menus relative to a trigger
     shouldUpdatePosition = true,
-    isOpen = true
+    isOpen = true,
+    onClose
   } = props;
@@ -311,3 +353,10 @@ let [position, setPosition] = useState({
 
-  $ae841ee9d3f76b31663cf0594adb0fc$var$useResize(updatePosition);
+  $ae841ee9d3f76b31663cf0594adb0fc$var$useResize(updatePosition); // When scrolling a parent scrollable region of the trigger (other than the body),
+  // we hide the popover. Otherwise, its position would be incorrect.
+
+  $df1b2f080f58bf9e74aeb666b8c96ba$export$useCloseOnScroll({
+    triggerRef: targetRef,
+    isOpen,
+    onClose
+  });
   return {
@@ -433,26 +482,10 @@ overlayProps: {
     isOpen
-  } = state; // When scrolling a parent scrollable region of the trigger (other than the body),
-  // we hide the popover. Otherwise, its position would be incorrect.
+  } = state; // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll
+  // without forcing users to pass onClose.
 
   useEffect(() => {
-    if (!isOpen) {
-      return;
+    if (ref.current) {
+      $df1b2f080f58bf9e74aeb666b8c96ba$export$onCloseMap.set(ref.current, state.close);
     }
-
-    let onScroll = e => {
-      // Ignore if scrolling an scrollable region outside the trigger's tree.
-      let target = e.target;
-
-      if (!ref.current || !target.contains(ref.current)) {
-        return;
-      }
-
-      state.close();
-    };
-
-    window.addEventListener('scroll', onScroll, true);
-    return () => {
-      window.removeEventListener('scroll', onScroll, true);
-    };
-  }, [isOpen, ref]); // Aria 1.1 supports multiple values for aria-haspopup other than just menus.
+  }); // Aria 1.1 supports multiple values for aria-haspopup other than just menus.
   // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup
@@ -459,0 +492,0 @@ // However, we only add it for menus for now because screen readers often

dist/types.d.ts

@@ -29,2 +29,4 @@ import React, { HTMLAttributes, RefObject, AriaAttributes, ReactNode } from "react";
     shouldUpdatePosition?: boolean;
+    /** Handler that is called when the overlay should close. */
+    onClose?: () => void;
 }
@@ -31,0 +33,0 @@ interface PositionAria {

package.json

 {
   "name": "@react-aria/overlays",
-  "version": "3.0.0-nightly.677+63f8d9f8",
+  "version": "3.0.0-nightly.680+3ee5685e",
   "description": "Spectrum UI components in React",
@@ -21,9 +21,9 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "3.0.0-nightly.677+63f8d9f8",
-    "@react-aria/interactions": "3.0.0-nightly.677+63f8d9f8",
-    "@react-aria/utils": "3.0.0-nightly.677+63f8d9f8",
-    "@react-aria/visually-hidden": "3.0.0-nightly.677+63f8d9f8",
-    "@react-stately/overlays": "3.1.1-nightly.2355+63f8d9f8",
-    "@react-types/button": "3.2.1-nightly.2355+63f8d9f8",
-    "@react-types/overlays": "3.2.1-nightly.2355+63f8d9f8",
+    "@react-aria/i18n": "3.0.0-nightly.680+3ee5685e",
+    "@react-aria/interactions": "3.0.0-nightly.680+3ee5685e",
+    "@react-aria/utils": "3.0.0-nightly.680+3ee5685e",
+    "@react-aria/visually-hidden": "3.0.0-nightly.680+3ee5685e",
+    "@react-stately/overlays": "3.1.1-nightly.2358+3ee5685e",
+    "@react-types/button": "3.2.1-nightly.2358+3ee5685e",
+    "@react-types/overlays": "3.2.1-nightly.2358+3ee5685e",
     "dom-helpers": "^3.3.1"
@@ -38,3 +38,3 @@ },
   },
-  "gitHead": "63f8d9f8fcca05aeec4711d3568f0ddd684c748a"
+  "gitHead": "3ee5685e293447fb1995ddec4c70b56c8e3aaa8e"
 }

src/useOverlayPosition.ts

@@ -16,2 +16,3 @@ /*
 import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';
+import {useCloseOnScroll} from './useCloseOnScroll';
 import {useLocale} from '@react-aria/i18n';
@@ -42,3 +43,5 @@
    */
-  shouldUpdatePosition?: boolean
+  shouldUpdatePosition?: boolean,
+  /** Handler that is called when the overlay should close. */
+  onClose?: () => void
 }
@@ -74,3 +77,4 @@
     shouldUpdatePosition = true,
-    isOpen = true
+    isOpen = true,
+    onClose
   } = props;
@@ -126,2 +130,10 @@ let [position, setPosition] = useState<PositionResult>({
 
+  // When scrolling a parent scrollable region of the trigger (other than the body),
+  // we hide the popover. Otherwise, its position would be incorrect.
+  useCloseOnScroll({
+    triggerRef: targetRef,
+    isOpen,
+    onClose
+  });
+
   return {
@@ -128,0 +140,0 @@ overlayProps: {

src/useOverlayTrigger.ts

@@ -15,2 +15,3 @@ /*
 import {HTMLAttributes, RefObject, useEffect} from 'react';
+import {onCloseMap} from './useCloseOnScroll';
 import {OverlayTriggerState} from '@react-stately/overlays';
@@ -40,25 +41,10 @@ import {useId} from '@react-aria/utils';
 
-  // When scrolling a parent scrollable region of the trigger (other than the body),
-  // we hide the popover. Otherwise, its position would be incorrect.
+  // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll
+  // without forcing users to pass onClose.
   useEffect(() => {
-    if (!isOpen) {
-      return;
+    if (ref.current) {
+      onCloseMap.set(ref.current, state.close);
     }
+  });
 
-    let onScroll = (e: MouseEvent) => {
-      // Ignore if scrolling an scrollable region outside the trigger's tree.
-      let target = e.target as HTMLElement;
-      if (!ref.current || !target.contains(ref.current)) {
-        return;
-      }
-
-      state.close();
-    };
-
-    window.addEventListener('scroll', onScroll, true);
-    return () => {
-      window.removeEventListener('scroll', onScroll, true);
-    };
-  }, [isOpen, ref]);
-
   // Aria 1.1 supports multiple values for aria-haspopup other than just menus.
@@ -65,0 +51,0 @@ // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

249216

increased by4.31%

Number of package files

18

increased by5.88%

Lines of code

2603

increased by4.29%

Dependency changes

• Updated@react-aria/i18n@3.0.0-nightly.680+3ee5685e

• Updated@react-aria/interactions@3.0.0-nightly.680+3ee5685e

• Updated@react-aria/utils@3.0.0-nightly.680+3ee5685e

• Updated@react-aria/visually-hidden@3.0.0-nightly.680+3ee5685e

• Updated@react-stately/overlays@3.1.1-nightly.2358+3ee5685e

• Updated@react-types/button@3.2.1-nightly.2358+3ee5685e

• Updated@react-types/overlays@3.2.1-nightly.2358+3ee5685e