@react-aria/overlays - npm Package Compare versions

Comparing version 3.0.0-nightly.741 to 3.0.0-nightly.746

dist/main.js

@@ -178,18 +178,29 @@ var {
   } = placementInfo;
-  let position = {};
-  position[crossAxis] = childOffset[crossAxis] + crossOffset;
+  let 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;
   } 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];
-  } // Ensure overlay sticks to target(ignore for overlays smaller than target)
+  }
+  /* else {
+   the overlay top should match the button top
+  } */
+  // add the crossOffset from props
 
 
-  if (childOffset[crossSize] < overlaySize[crossSize]) {
-    let positionForPositiveSideOverflow = Math.min(position[crossAxis], childOffset[crossAxis]);
-    position[crossAxis] = Math.max(positionForPositiveSideOverflow, childOffset[crossAxis] - overlaySize[crossSize] + childOffset[crossSize]);
-  } // 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.
+  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; // 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) {
@@ -268,3 +279,3 @@ // If the container is positioned (non-static), then we use the container's actual
   let arrowPosition = {};
-  arrowPosition[crossAxis] = childOffset[crossSize] > overlaySize[crossSize] ? null : childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
+  arrowPosition[crossAxis] = childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
   return {
@@ -726,3 +737,2 @@ position,
     // Last resort. If the window scrolled, scroll it back to the top.
-    // It should always be at the top because the body will have a negative margin (see below).
     window.scrollTo(0, 0);
@@ -729,0 +739,0 @@ }; // Record the original scroll position so we can restore it.

dist/module.js

@@ -138,18 +138,29 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
   } = placementInfo;
-  let position = {};
-  position[crossAxis] = childOffset[crossAxis] + crossOffset;
+  let 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;
   } 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];
-  } // Ensure overlay sticks to target(ignore for overlays smaller than target)
+  }
+  /* else {
+   the overlay top should match the button top
+  } */
+  // add the crossOffset from props
 
 
-  if (childOffset[crossSize] < overlaySize[crossSize]) {
-    let positionForPositiveSideOverflow = Math.min(position[crossAxis], childOffset[crossAxis]);
-    position[crossAxis] = Math.max(positionForPositiveSideOverflow, childOffset[crossAxis] - overlaySize[crossSize] + childOffset[crossSize]);
-  } // 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.
+  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; // 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) {
@@ -228,3 +239,3 @@ // If the container is positioned (non-static), then we use the container's actual
   let arrowPosition = {};
-  arrowPosition[crossAxis] = childOffset[crossSize] > overlaySize[crossSize] ? null : childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
+  arrowPosition[crossAxis] = childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
   return {
@@ -677,3 +688,2 @@ position,
     // Last resort. If the window scrolled, scroll it back to the top.
-    // It should always be at the top because the body will have a negative margin (see below).
     window.scrollTo(0, 0);
@@ -680,0 +690,0 @@ }; // Record the original scroll position so we can restore it.

package.json

 {
   "name": "@react-aria/overlays",
-  "version": "3.0.0-nightly.741+975957a3",
+  "version": "3.0.0-nightly.746+db9b0228",
   "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.741+975957a3",
-    "@react-aria/interactions": "3.0.0-nightly.741+975957a3",
-    "@react-aria/utils": "3.0.0-nightly.741+975957a3",
-    "@react-aria/visually-hidden": "3.0.0-nightly.741+975957a3",
-    "@react-stately/overlays": "3.1.2-nightly.2419+975957a3",
-    "@react-types/button": "3.2.2-nightly.2419+975957a3",
-    "@react-types/overlays": "3.2.2-nightly.2419+975957a3",
+    "@react-aria/i18n": "3.0.0-nightly.746+db9b0228",
+    "@react-aria/interactions": "3.0.0-nightly.746+db9b0228",
+    "@react-aria/utils": "3.0.0-nightly.746+db9b0228",
+    "@react-aria/visually-hidden": "3.0.0-nightly.746+db9b0228",
+    "@react-stately/overlays": "3.1.2-nightly.2424+db9b0228",
+    "@react-types/button": "3.2.2-nightly.2424+db9b0228",
+    "@react-types/overlays": "3.2.2-nightly.2424+db9b0228",
     "dom-helpers": "^3.3.1"
@@ -38,3 +38,3 @@ },
   },
-  "gitHead": "975957a3c3fb4a9f3be358428e0980a4d4e51c1a"
+  "gitHead": "db9b022848d4b83627aa98a0b347534bf3376ed4"
 }

src/calculatePosition.ts

@@ -194,15 +194,26 @@ /*
 
-  position[crossAxis] = childOffset[crossAxis] + crossOffset;
+  // 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;
   } 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 {
+    the overlay top should match the button top
+  } */
+  // add the crossOffset from props
+  position[crossAxis] += crossOffset;
 
-  // Ensure overlay sticks to target(ignore for overlays smaller than target)
-  if (childOffset[crossSize] < overlaySize[crossSize]) {
-    let positionForPositiveSideOverflow = Math.min(position[crossAxis], childOffset[crossAxis]);
-    position[crossAxis] = Math.max(positionForPositiveSideOverflow, childOffset[crossAxis] - overlaySize[crossSize] + childOffset[crossSize]);
-  }
+  // 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);
+
   // 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.
@@ -233,3 +244,3 @@ if (placement === axis) {
     // We want the distance between the top of the overlay to the bottom of the boundary
-    ? Math.max(0, 
+    ? Math.max(0,
       (boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the bottom of the boundary
@@ -240,3 +251,3 @@ - (containerOffsetWithBoundary.top + position.top) // this is the top of the overlay
     // We want the distance between the top of the trigger to the top of the boundary
-    : Math.max(0, 
+    : Math.max(0,
       (childOffset.top + containerOffsetWithBoundary.top) // this is the top of the trigger
@@ -331,3 +342,3 @@ - (boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the top of the boundary
   let arrowPosition: Position = {};
-  arrowPosition[crossAxis] = childOffset[crossSize] > overlaySize[crossSize] ? null : (childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2);
+  arrowPosition[crossAxis] = (childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2);
 
@@ -334,0 +345,0 @@ return {

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

316462

increased by0.75%

Lines of code

3190

increased by0.76%

Dependency changes

• Updated@react-aria/i18n@3.0.0-nightly.746+db9b0228

• Updated@react-aria/interactions@3.0.0-nightly.746+db9b0228

• Updated@react-aria/utils@3.0.0-nightly.746+db9b0228

• Updated@react-aria/visually-hidden@3.0.0-nightly.746+db9b0228

• Updated@react-stately/overlays@3.1.2-nightly.2424+db9b0228

• Updated@react-types/button@3.2.2-nightly.2424+db9b0228

• Updated@react-types/overlays@3.2.2-nightly.2424+db9b0228