@react-aria/overlays - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

dist/main.js

@@ -233,3 +233,3 @@ var {
     let flippedPlacementInfo = $c13020473a0fe27b1a1c4797269d1704$var$parsePlacement($c13020473a0fe27b1a1c4797269d1704$var$FLIPPED_DIRECTION[placement] + " " + crossPlacement);
-    let flippedPosition = $c13020473a0fe27b1a1c4797269d1704$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, -1 * offset, crossOffset);
+    let flippedPosition = $c13020473a0fe27b1a1c4797269d1704$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset);
     let flippedSpace = $c13020473a0fe27b1a1c4797269d1704$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, flippedPlacementInfo); // If the available space for the flipped position is greater than the original available space, flip.
@@ -240,3 +240,3 @@
       position = flippedPosition;
-      normalizedOffset = -1 * offset;
+      normalizedOffset = offset;
     }
@@ -400,3 +400,5 @@ }
     isOpen,
-    isDismissable = false
+    isDismissable = false,
+    isKeyboardDismissDisabled = false,
+    shouldCloseOnInteractOutside
   } = props; // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
@@ -422,2 +424,8 @@
     }
+  };
+
+  let onInteractOutside = e => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) {
+      onHide();
+    }
   }; // Handle the escape key
@@ -427,3 +435,3 @@
   let onKeyDown = e => {
-    if (e.key === 'Escape') {
+    if (e.key === 'Escape' && !isKeyboardDismissDisabled) {
       e.preventDefault();
@@ -437,3 +445,3 @@ onHide();
     ref,
-    onInteractOutside: isDismissable ? onHide : null
+    onInteractOutside: isDismissable ? onInteractOutside : null
   });
@@ -444,4 +452,6 @@ let {
     isDisabled: !shouldCloseOnBlur,
-    onBlurWithin: () => {
-      onClose();
+    onBlurWithin: e => {
+      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) {
+        onClose();
+      }
     }
@@ -638,2 +648,5 @@ });
 }
+
+exports.OverlayContainer = OverlayContainer;
+
 /**
@@ -645,6 +658,2 @@ * Hides content outside the current `<OverlayContainer>` from screen readers
  */
-
-
-exports.OverlayContainer = OverlayContainer;
-
 function useModal() {
@@ -672,2 +681,7 @@ // Add aria-hidden to all parent providers on mount, and restore on unmount.
   }, [context, context.parent]);
+  return {
+    modalProps: {
+      'data-ismodal': true
+    }
+  };
 }
@@ -674,0 +688,0 @@

dist/module.js

@@ -196,3 +196,3 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
     let flippedPlacementInfo = $d45e305fb90d49e7c81f49bb4afe323b$var$parsePlacement($d45e305fb90d49e7c81f49bb4afe323b$var$FLIPPED_DIRECTION[placement] + " " + crossPlacement);
-    let flippedPosition = $d45e305fb90d49e7c81f49bb4afe323b$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, -1 * offset, crossOffset);
+    let flippedPosition = $d45e305fb90d49e7c81f49bb4afe323b$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset);
     let flippedSpace = $d45e305fb90d49e7c81f49bb4afe323b$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, flippedPlacementInfo); // If the available space for the flipped position is greater than the original available space, flip.
@@ -203,3 +203,3 @@
       position = flippedPosition;
-      normalizedOffset = -1 * offset;
+      normalizedOffset = offset;
     }
@@ -361,3 +361,5 @@ }
     isOpen,
-    isDismissable = false
+    isDismissable = false,
+    isKeyboardDismissDisabled = false,
+    shouldCloseOnInteractOutside
   } = props; // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
@@ -383,2 +385,8 @@
     }
+  };
+
+  let onInteractOutside = e => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) {
+      onHide();
+    }
   }; // Handle the escape key
@@ -388,3 +396,3 @@
   let onKeyDown = e => {
-    if (e.key === 'Escape') {
+    if (e.key === 'Escape' && !isKeyboardDismissDisabled) {
       e.preventDefault();
@@ -398,3 +406,3 @@ onHide();
     ref,
-    onInteractOutside: isDismissable ? onHide : null
+    onInteractOutside: isDismissable ? onInteractOutside : null
   });
@@ -405,4 +413,6 @@ let {
     isDisabled: !shouldCloseOnBlur,
-    onBlurWithin: () => {
-      onClose();
+    onBlurWithin: e => {
+      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) {
+        onClose();
+      }
     }
@@ -585,2 +595,3 @@ });
 }
+
 /**
@@ -592,3 +603,2 @@ * Hides content outside the current `<OverlayContainer>` from screen readers
  */
-
 export function useModal() {
@@ -616,2 +626,7 @@ // Add aria-hidden to all parent providers on mount, and restore on unmount.
   }, [context, context.parent]);
+  return {
+    modalProps: {
+      'data-ismodal': true
+    }
+  };
 }
@@ -618,0 +633,0 @@ // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-aria/overlays/intl/ar-AE.json

dist/types.d.ts

@@ -57,2 +57,14 @@ import React, { HTMLAttributes, RefObject, AriaAttributes, ReactNode } from "react";
     shouldCloseOnBlur?: boolean;
+    /**
+     * Whether pressing the escape key to close the overlay should be disabled.
+     * @default false
+     */
+    isKeyboardDismissDisabled?: boolean;
+    /**
+     * When user interacts with the argument element outside of the overlay ref,
+     * return true if onClose should be called.  This gives you a chance to filter
+     * out interaction with elements that should not dismiss the overlay.
+     * By default, onClose will always be called on interaction outside the overlay ref.
+     */
+    shouldCloseOnInteractOutside?: (element: HTMLElement) => boolean;
 }
@@ -130,2 +142,10 @@ interface OverlayAria {
 export function OverlayContainer(props: ModalProviderProps): React.ReactPortal;
+interface ModalAriaProps extends HTMLAttributes<HTMLElement> {
+    /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */
+    'data-ismodal': boolean;
+}
+interface ModalAria {
+    /** Props for the modal content element. */
+    modalProps: ModalAriaProps;
+}
 /**
@@ -137,3 +157,3 @@ * Hides content outside the current `<OverlayContainer>` from screen readers
  */
-export function useModal(): void;
+export function useModal(): ModalAria;
 interface DismissButtonProps {
@@ -140,0 +160,0 @@ /** Called when the dismiss button is activated. */

package.json

 {
   "name": "@react-aria/overlays",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Spectrum UI components in React",
@@ -22,8 +22,8 @@ "license": "Apache-2.0",
     "@react-aria/i18n": "^3.1.0",
-    "@react-aria/interactions": "^3.1.0",
-    "@react-aria/utils": "^3.1.0",
-    "@react-aria/visually-hidden": "^3.1.0",
+    "@react-aria/interactions": "^3.2.0",
+    "@react-aria/utils": "^3.2.0",
+    "@react-aria/visually-hidden": "^3.2.0",
     "@react-stately/overlays": "^3.1.0",
-    "@react-types/button": "^3.1.0",
-    "@react-types/overlays": "^3.1.0",
+    "@react-types/button": "^3.2.0",
+    "@react-types/overlays": "^3.2.0",
     "dom-helpers": "^3.3.1"
@@ -38,3 +38,3 @@ },
   },
-  "gitHead": "211099972fe75ee581892efd01a7f89dfb9cdf69"
+  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
 }

src/calculatePosition.ts

@@ -273,3 +273,3 @@ /*
     let flippedPlacementInfo = parsePlacement(`${FLIPPED_DIRECTION[placement]} ${crossPlacement}` as Placement);
-    let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, -1 * offset, crossOffset);
+    let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset);
     let flippedSpace = getAvailableSpace(
@@ -288,3 +288,3 @@ boundaryDimensions,
       position = flippedPosition;
-      normalizedOffset = -1 * offset;
+      normalizedOffset = offset;
     }
@@ -291,0 +291,0 @@ }

src/useOverlay.ts

@@ -13,3 +13,3 @@ /*
 
-import {HTMLAttributes, RefObject, useEffect} from 'react';
+import {HTMLAttributes, RefObject, SyntheticEvent, useEffect} from 'react';
 import {useFocusWithin, useInteractOutside} from '@react-aria/interactions';
@@ -31,3 +31,17 @@
   /** Whether the overlay should close when focus is lost or moves outside it. */
-  shouldCloseOnBlur?: boolean
+  shouldCloseOnBlur?: boolean,
+
+  /** 
+   * Whether pressing the escape key to close the overlay should be disabled. 
+   * @default false
+   */
+  isKeyboardDismissDisabled?: boolean,
+
+  /**
+   * When user interacts with the argument element outside of the overlay ref,
+   * return true if onClose should be called.  This gives you a chance to filter
+   * out interaction with elements that should not dismiss the overlay.  
+   * By default, onClose will always be called on interaction outside the overlay ref.
+   */
+  shouldCloseOnInteractOutside?: (element: HTMLElement) => boolean
 }
@@ -48,3 +62,3 @@
 export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): OverlayAria {
-  let {onClose, shouldCloseOnBlur, isOpen, isDismissable = false} = props;
+  let {onClose, shouldCloseOnBlur, isOpen, isDismissable = false, isKeyboardDismissDisabled = false, shouldCloseOnInteractOutside} = props;
 
@@ -72,5 +86,11 @@ // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
 
+  let onInteractOutside = (e: SyntheticEvent<HTMLElement>) => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as HTMLElement)) {
+      onHide();
+    }
+  };
+
   // Handle the escape key
   let onKeyDown = (e) => {
-    if (e.key === 'Escape') {
+    if (e.key === 'Escape' && !isKeyboardDismissDisabled) {
       e.preventDefault();
@@ -82,8 +102,10 @@ onHide();
   // Handle clicking outside the overlay to close it
-  useInteractOutside({ref, onInteractOutside: isDismissable ? onHide : null});
+  useInteractOutside({ref, onInteractOutside: isDismissable ? onInteractOutside : null});
 
   let {focusWithinProps} = useFocusWithin({
     isDisabled: !shouldCloseOnBlur,
-    onBlurWithin: () => {
-      onClose();
+    onBlurWithin: (e) => {
+      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as HTMLElement)) {
+        onClose();
+      }
     }
@@ -90,0 +112,0 @@ });

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

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

Improved metrics

Total package byte prevSize

238727

increased by2.93%

Lines of code

2496

increased by3.31%

Dependency changes

• Updated@react-aria/interactions@^3.2.0

• Updated@react-aria/utils@^3.2.0

• Updated@react-aria/visually-hidden@^3.2.0

• Updated@react-types/button@^3.2.0

• Updated@react-types/overlays@^3.2.0