@react-aria/overlays - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

dist/main.js

@@ -31,3 +31,4 @@ var {
   useState,
-  useContext
+  useContext,
+  useMemo
 } = _react2;
@@ -167,3 +168,3 @@
 
-function $c13020473a0fe27b1a1c4797269d1704$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset) {
+function $c13020473a0fe27b1a1c4797269d1704$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned) {
   let {
@@ -194,3 +195,8 @@ placement,
   if (placement === axis) {
-    position[$c13020473a0fe27b1a1c4797269d1704$var$FLIPPED_DIRECTION[axis]] = Math.floor(boundaryDimensions[size] - childOffset[axis] + offset);
+    // If the container is positioned (non-static), then we use the container's actual
+    // 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[$c13020473a0fe27b1a1c4797269d1704$var$FLIPPED_DIRECTION[axis]] = Math.floor(containerHeight - childOffset[axis] + offset);
   } else {
@@ -204,3 +210,11 @@ position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
 function $c13020473a0fe27b1a1c4797269d1704$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding) {
-  return position.top != null ? Math.max(0, boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top + containerOffsetWithBoundary.top - position.top - margins.top - margins.bottom - padding) : Math.max(0, childOffset.top - boundaryDimensions.top - boundaryDimensions.scroll.top - containerOffsetWithBoundary.top - margins.top - margins.bottom - padding);
+  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 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
+  );
 }
@@ -222,3 +236,3 @@
 
-function $c13020473a0fe27b1a1c4797269d1704$export$calculatePositionInternal(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset) {
+function $c13020473a0fe27b1a1c4797269d1704$export$calculatePositionInternal(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned) {
   let placementInfo = $c13020473a0fe27b1a1c4797269d1704$var$parsePlacement(placementInput);
@@ -232,3 +246,3 @@ let {
   } = placementInfo;
-  let position = $c13020473a0fe27b1a1c4797269d1704$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset);
+  let position = $c13020473a0fe27b1a1c4797269d1704$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
   let normalizedOffset = offset;
@@ -239,3 +253,3 @@ let space = $c13020473a0fe27b1a1c4797269d1704$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, placementInfo); // Check if the scroll size of the overlay is greater than the available space to determine if we need to flip
     let flippedPlacementInfo = $c13020473a0fe27b1a1c4797269d1704$var$parsePlacement($c13020473a0fe27b1a1c4797269d1704$var$FLIPPED_DIRECTION[placement] + " " + crossPlacement);
-    let flippedPosition = $c13020473a0fe27b1a1c4797269d1704$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset);
+    let flippedPosition = $c13020473a0fe27b1a1c4797269d1704$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
     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.
@@ -254,3 +268,3 @@
   overlaySize.height = Math.min(overlaySize.height, maxHeight);
-  position = $c13020473a0fe27b1a1c4797269d1704$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset);
+  position = $c13020473a0fe27b1a1c4797269d1704$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
   delta = $c13020473a0fe27b1a1c4797269d1704$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
@@ -287,2 +301,4 @@ position[crossAxis] += delta;
   let isBodyContainer = container.tagName === 'BODY';
+  const containerPositionStyle = window.getComputedStyle(container).position;
+  let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== 'static';
   let childOffset = isBodyContainer ? _domHelpersQueryOffset(targetNode) : _domHelpersQueryPosition(targetNode, container);
@@ -303,3 +319,3 @@
   let containerOffsetWithBoundary = boundaryElement.tagName === 'BODY' ? _domHelpersQueryOffset(container) : _domHelpersQueryPosition(container, boundaryElement);
-  return $c13020473a0fe27b1a1c4797269d1704$export$calculatePositionInternal(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset);
+  return $c13020473a0fe27b1a1c4797269d1704$export$calculatePositionInternal(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned);
 }
@@ -566,12 +582,25 @@
 /**
- * Prevents scrolling on the document body on mount, and 
+ * Prevents scrolling on the document body on mount, and
  * restores it on unmount. Also ensures that content does not
  * shift due to the scrollbars disappearing.
  */
-function usePreventScroll() {
+function usePreventScroll(options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  let {
+    isDisabled
+  } = options;
   useEffect(() => {
-    let overflow = document.body.style.overflow;
-    let paddingRight = document.body.style.paddingRight;
-    document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + 'px';
-    document.body.style.overflow = 'hidden';
+    let {
+      paddingRight,
+      overflow
+    } = document.body.style;
+
+    if (!isDisabled) {
+      document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px";
+      document.body.style.overflow = 'hidden';
+    }
+
     return () => {
@@ -581,3 +610,3 @@ document.body.style.overflow = overflow;
     };
-  }, []);
+  }, [isDisabled]);
 }
@@ -603,4 +632,4 @@
   let parent = useContext($c5f9596976ab8bd94c5879001549a3e$var$Context);
-  let [modalCount, setModalCount] = useState(parent ? parent.modalCount : 0);
-  let context = {
+  let [modalCount, setModalCount] = useState(0);
+  let context = useMemo(() => ({
     parent,
@@ -625,3 +654,3 @@ modalCount,
 
-  };
+  }), [parent, modalCount]);
   return /*#__PURE__*/_react.createElement($c5f9596976ab8bd94c5879001549a3e$var$Context.Provider, {
@@ -628,0 +657,0 @@ value: context

dist/module.js

@@ -7,3 +7,3 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { useLocale, useMessageFormatter } from "@react-aria/i18n";
-import _react, { useCallback, useEffect, useState, useContext } from "react";
+import _react, { useCallback, useEffect, useState, useContext, useMemo } from "react";
 import _domHelpersOwnerDocument from "dom-helpers/ownerDocument";
@@ -130,3 +130,3 @@ import _domHelpersQueryScrollTop from "dom-helpers/query/scrollTop";
 
-function $d45e305fb90d49e7c81f49bb4afe323b$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset) {
+function $d45e305fb90d49e7c81f49bb4afe323b$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned) {
   let {
@@ -157,3 +157,8 @@ placement,
   if (placement === axis) {
-    position[$d45e305fb90d49e7c81f49bb4afe323b$var$FLIPPED_DIRECTION[axis]] = Math.floor(boundaryDimensions[size] - childOffset[axis] + offset);
+    // If the container is positioned (non-static), then we use the container's actual
+    // 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[$d45e305fb90d49e7c81f49bb4afe323b$var$FLIPPED_DIRECTION[axis]] = Math.floor(containerHeight - childOffset[axis] + offset);
   } else {
@@ -167,3 +172,11 @@ position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
 function $d45e305fb90d49e7c81f49bb4afe323b$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding) {
-  return position.top != null ? Math.max(0, boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top + containerOffsetWithBoundary.top - position.top - margins.top - margins.bottom - padding) : Math.max(0, childOffset.top - boundaryDimensions.top - boundaryDimensions.scroll.top - containerOffsetWithBoundary.top - margins.top - margins.bottom - padding);
+  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 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
+  );
 }
@@ -185,3 +198,3 @@
 
-function $d45e305fb90d49e7c81f49bb4afe323b$export$calculatePositionInternal(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset) {
+function $d45e305fb90d49e7c81f49bb4afe323b$export$calculatePositionInternal(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned) {
   let placementInfo = $d45e305fb90d49e7c81f49bb4afe323b$var$parsePlacement(placementInput);
@@ -195,3 +208,3 @@ let {
   } = placementInfo;
-  let position = $d45e305fb90d49e7c81f49bb4afe323b$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset);
+  let position = $d45e305fb90d49e7c81f49bb4afe323b$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
   let normalizedOffset = offset;
@@ -202,3 +215,3 @@ let space = $d45e305fb90d49e7c81f49bb4afe323b$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, placementInfo); // Check if the scroll size of the overlay is greater than the available space to determine if we need to flip
     let flippedPlacementInfo = $d45e305fb90d49e7c81f49bb4afe323b$var$parsePlacement($d45e305fb90d49e7c81f49bb4afe323b$var$FLIPPED_DIRECTION[placement] + " " + crossPlacement);
-    let flippedPosition = $d45e305fb90d49e7c81f49bb4afe323b$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset);
+    let flippedPosition = $d45e305fb90d49e7c81f49bb4afe323b$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
     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.
@@ -217,3 +230,3 @@
   overlaySize.height = Math.min(overlaySize.height, maxHeight);
-  position = $d45e305fb90d49e7c81f49bb4afe323b$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset);
+  position = $d45e305fb90d49e7c81f49bb4afe323b$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
   delta = $d45e305fb90d49e7c81f49bb4afe323b$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
@@ -250,2 +263,4 @@ position[crossAxis] += delta;
   let isBodyContainer = container.tagName === 'BODY';
+  const containerPositionStyle = window.getComputedStyle(container).position;
+  let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== 'static';
   let childOffset = isBodyContainer ? _domHelpersQueryOffset(targetNode) : _domHelpersQueryPosition(targetNode, container);
@@ -266,3 +281,3 @@
   let containerOffsetWithBoundary = boundaryElement.tagName === 'BODY' ? _domHelpersQueryOffset(container) : _domHelpersQueryPosition(container, boundaryElement);
-  return $d45e305fb90d49e7c81f49bb4afe323b$export$calculatePositionInternal(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset);
+  return $d45e305fb90d49e7c81f49bb4afe323b$export$calculatePositionInternal(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned);
 }
@@ -523,12 +538,25 @@
 /**
- * Prevents scrolling on the document body on mount, and 
+ * Prevents scrolling on the document body on mount, and
  * restores it on unmount. Also ensures that content does not
  * shift due to the scrollbars disappearing.
  */
-export function usePreventScroll() {
+export function usePreventScroll(options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  let {
+    isDisabled
+  } = options;
   useEffect(() => {
-    let overflow = document.body.style.overflow;
-    let paddingRight = document.body.style.paddingRight;
-    document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + 'px';
-    document.body.style.overflow = 'hidden';
+    let {
+      paddingRight,
+      overflow
+    } = document.body.style;
+
+    if (!isDisabled) {
+      document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px";
+      document.body.style.overflow = 'hidden';
+    }
+
     return () => {
@@ -538,3 +566,3 @@ document.body.style.overflow = overflow;
     };
-  }, []);
+  }, [isDisabled]);
 }
@@ -558,4 +586,4 @@
   let parent = useContext($b876e5ac9c98db373bf726bce3d604e$var$Context);
-  let [modalCount, setModalCount] = useState(parent ? parent.modalCount : 0);
-  let context = {
+  let [modalCount, setModalCount] = useState(0);
+  let context = useMemo(() => ({
     parent,
@@ -580,3 +608,3 @@ modalCount,
 
-  };
+  }), [parent, modalCount]);
   return /*#__PURE__*/_react.createElement($b876e5ac9c98db373bf726bce3d604e$var$Context.Provider, {
@@ -583,0 +611,0 @@ value: context

dist/types.d.ts

@@ -97,2 +97,6 @@ import React, { HTMLAttributes, RefObject, AriaAttributes, ReactNode } from "react";
 export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref: RefObject<HTMLElement>): OverlayTriggerAria;
+interface PreventScrollOptions {
+    /** Whether the scroll lock is disabled. */
+    isDisabled?: boolean;
+}
 /**
@@ -103,3 +107,3 @@ * Prevents scrolling on the document body on mount, and
  */
-export function usePreventScroll(): void;
+export function usePreventScroll(options?: PreventScrollOptions): void;
 interface ModalProviderProps extends HTMLAttributes<HTMLElement> {
@@ -106,0 +110,0 @@ children: ReactNode;

package.json

 {
   "name": "@react-aria/overlays",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Spectrum UI components in React",
@@ -21,14 +21,14 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.1.1",
-    "@react-aria/interactions": "^3.2.0",
-    "@react-aria/utils": "^3.2.1",
-    "@react-aria/visually-hidden": "^3.2.0",
-    "@react-stately/overlays": "^3.1.0",
-    "@react-types/button": "^3.2.0",
-    "@react-types/overlays": "^3.2.0",
+    "@react-aria/i18n": "^3.1.2",
+    "@react-aria/interactions": "^3.2.1",
+    "@react-aria/utils": "^3.3.0",
+    "@react-aria/visually-hidden": "^3.2.1",
+    "@react-stately/overlays": "^3.1.1",
+    "@react-types/button": "^3.2.1",
+    "@react-types/overlays": "^3.2.1",
     "dom-helpers": "^3.3.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1"
   },
@@ -38,3 +38,3 @@ "publishConfig": {
   },
-  "gitHead": "d050016e6876b20e4d8a95ba5fb5630d78e75a60"
+  "gitHead": "0778f71a3c13e1e24388a23b6d525e3b9f5b98f1"
 }

src/calculatePosition.ts

@@ -187,3 +187,5 @@ /*
   offset: number,
-  crossOffset: number
+  crossOffset: number,
+  containerOffsetWithBoundary: Offset,
+  isContainerPositioned: boolean
 ) {
@@ -208,3 +210,8 @@ let {placement, crossPlacement, axis, crossAxis, size, crossSize} = placementInfo;
   if (placement === axis) {
-    position[FLIPPED_DIRECTION[axis]] = Math.floor(boundaryDimensions[size] - childOffset[axis] + offset);
+    // If the container is positioned (non-static), then we use the container's actual
+    // 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);
   } else {
@@ -226,4 +233,14 @@ position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
   return position.top != null
-    ? Math.max(0, boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top + containerOffsetWithBoundary.top - position.top - margins.top - margins.bottom - padding)
-    : Math.max(0, childOffset.top - boundaryDimensions.top - boundaryDimensions.scroll.top - containerOffsetWithBoundary.top - margins.top - margins.bottom - 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
+    );
 }
@@ -258,7 +275,8 @@
   offset: number,
-  crossOffset: number
+  crossOffset: number,
+  isContainerPositioned: boolean
 ): PositionResult {
   let placementInfo = parsePlacement(placementInput);
   let {size, crossAxis, crossSize, placement, crossPlacement} = placementInfo;
-  let position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset);
+  let position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
   let normalizedOffset = offset;
@@ -277,3 +295,3 @@ let space = getAvailableSpace(
     let flippedPlacementInfo = parsePlacement(`${FLIPPED_DIRECTION[placement]} ${crossPlacement}` as Placement);
-    let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset);
+    let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
     let flippedSpace = getAvailableSpace(
@@ -310,3 +328,3 @@ boundaryDimensions,
 
-  position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset);
+  position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
   delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
@@ -345,2 +363,4 @@ position[crossAxis] += delta;
   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);
@@ -373,4 +393,5 @@
     offset,
-    crossOffset
+    crossOffset,
+    isContainerPositioned
   );
 }

src/useOverlay.ts

@@ -32,4 +32,4 @@ /*
 
-  /** 
-   * Whether pressing the escape key to close the overlay should be disabled. 
+  /**
+   * Whether pressing the escape key to close the overlay should be disabled.
    * @default false
@@ -42,3 +42,3 @@ */
    * return true if onClose should be called.  This gives you a chance to filter
-   * out interaction with elements that should not dismiss the overlay.  
+   * out interaction with elements that should not dismiss the overlay.
    * By default, onClose will always be called on interaction outside the overlay ref.
@@ -45,0 +45,0 @@ */

src/usePreventScroll.ts

@@ -15,13 +15,23 @@ /*
 
+interface PreventScrollOptions {
+  /** Whether the scroll lock is disabled. */
+  isDisabled?: boolean
+}
+
 /**
- * Prevents scrolling on the document body on mount, and 
+ * Prevents scrolling on the document body on mount, and
  * restores it on unmount. Also ensures that content does not
  * shift due to the scrollbars disappearing.
  */
-export function usePreventScroll(): void {
+export function usePreventScroll(options: PreventScrollOptions = {}) {
+  let {isDisabled} = options;
+
   useEffect(() => {
-    let overflow = document.body.style.overflow;
-    let paddingRight = document.body.style.paddingRight;
-    document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + 'px';
-    document.body.style.overflow = 'hidden';
+    let {paddingRight, overflow} = document.body.style;
+
+    if (!isDisabled) {
+      document.body.style.paddingRight = `${window.innerWidth - document.documentElement.clientWidth}px`;
+      document.body.style.overflow = 'hidden';
+    }
+
     return () => {
@@ -31,3 +41,3 @@ document.body.style.overflow = overflow;
     };
-  }, []);
+  }, [isDisabled]);
 }

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

258558

increased by3.65%

Lines of code

2683

increased by3.07%

Dependency changes

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedscheduler@0.20.2(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedscheduler@0.19.1(transitive)

• Updated@react-aria/i18n@^3.1.2

• Updated@react-aria/interactions@^3.2.1

• Updated@react-aria/utils@^3.3.0

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

• Updated@react-stately/overlays@^3.1.1

• Updated@react-types/button@^3.2.1

• Updated@react-types/overlays@^3.2.1