Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@react-aria/overlays

Package Overview
Dependencies
Maintainers
1
Versions
790
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-aria/overlays - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

239

dist/main.js

@@ -10,3 +10,5 @@ var {

var {
useId
useId,
chain,
getScrollParent
} = require("@react-aria/utils");

@@ -32,2 +34,3 @@

useState,
useLayoutEffect,
useContext,

@@ -178,18 +181,29 @@ useMemo

} = 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 +282,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 {

@@ -574,3 +588,6 @@ position,

exports.useOverlayTrigger = useOverlayTrigger;
const $a21edfc55f5392c9a20c9978f0e487$var$isMobileSafari = typeof window !== 'undefined' && window.navigator != null ? /AppleWebKit/.test(window.navigator.userAgent) && (/^(iPhone|iPad)$/.test(window.navigator.platform) || // iPadOS 13 lies and says its a Mac, but we can distinguish by detecting touch support.
window.navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) : false; // @ts-ignore
const $a21edfc55f5392c9a20c9978f0e487$var$visualViewport = typeof window !== 'undefined' && window.visualViewport;
/**

@@ -581,2 +598,3 @@ * Prevents scrolling on the document body on mount, and

*/
function usePreventScroll(options) {

@@ -590,22 +608,197 @@ if (options === void 0) {

} = options;
useEffect(() => {
let {
paddingRight,
overflow
} = document.body.style;
useLayoutEffect(() => {
if (isDisabled) {
return;
}
if (!isDisabled) {
document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px";
document.body.style.overflow = 'hidden';
if ($a21edfc55f5392c9a20c9978f0e487$var$isMobileSafari) {
return $a21edfc55f5392c9a20c9978f0e487$var$preventScrollMobileSafari();
} else {
return $a21edfc55f5392c9a20c9978f0e487$var$preventScrollStandard();
}
return () => {
document.body.style.overflow = overflow;
document.body.style.paddingRight = paddingRight;
};
}, [isDisabled]);
}
} // For most browsers, all we need to do is set `overflow: hidden` on the root element, and
// add some padding to prevent the page from shifting when the scrollbar is hidden.
exports.usePreventScroll = usePreventScroll;
function $a21edfc55f5392c9a20c9978f0e487$var$preventScrollStandard() {
return chain($a21edfc55f5392c9a20c9978f0e487$var$setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), $a21edfc55f5392c9a20c9978f0e487$var$setStyle(document.documentElement, 'overflow', 'hidden'));
} // Mobile Safari is a whole different beast. Even with overflow: hidden,
// it still scrolls the page in many situations:
//
// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
// it, so it becomes scrollable.
// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
// This may cause even fixed position elements to scroll off the screen.
// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
// scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
//
// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
//
// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
// on the window.
// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
// top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
// of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
// into view ourselves, without scrolling the whole page.
// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
// same visually, but makes the actual scroll position always zero. This is required to make all of the
// above work or Safari will still try to scroll the page when focusing an input.
// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
// to navigate to an input with the next/previous buttons that's outside a modal.
function $a21edfc55f5392c9a20c9978f0e487$var$preventScrollMobileSafari() {
let scrollable;
let lastY = 0;
let onTouchStart = e => {
// Store the nearest scrollable parent element from the element that the user touched.
scrollable = getScrollParent(e.target);
if (scrollable === document.documentElement && scrollable === document.body) {
return;
}
lastY = e.changedTouches[0].pageY;
};
let onTouchMove = e => {
// Prevent scrolling the window.
if (scrollable === document.documentElement || scrollable === document.body) {
e.preventDefault();
return;
} // Prevent scrolling up when at the top and scrolling down when at the bottom
// of a nested scrollable area, otherwise mobile Safari will start scrolling
// the window instead. Unfortunately, this disables bounce scrolling when at
// the top but it's the best we can do.
let y = e.changedTouches[0].pageY;
let scrollTop = scrollable.scrollTop;
let bottom = scrollable.scrollHeight - scrollable.clientHeight;
if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
e.preventDefault();
}
lastY = y;
};
let onTouchEnd = e => {
let target = e.target;
if (target.tagName === 'INPUT') {
e.preventDefault(); // Apply a transform to trick Safari into thinking the input is at the top of the page
// so it doesn't try to scroll it into view. When tapping on an input, this needs to
// be done before the "focus" event, so we have to focus the element ourselves.
target.style.transform = 'translateY(-2000px)';
target.focus();
requestAnimationFrame(() => {
target.style.transform = '';
});
}
};
let onFocus = e => {
let target = e.target;
if (target.tagName === 'INPUT') {
// Transform also needs to be applied in the focus event in cases where focus moves
// other than tapping on an input directly, e.g. the next/previous buttons in the
// software keyboard. In these cases, it seems applying the transform in the focus event
// is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
target.style.transform = 'translateY(-2000px)';
requestAnimationFrame(() => {
target.style.transform = ''; // This will have prevented the browser from scrolling the focused element into view,
// so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
if ($a21edfc55f5392c9a20c9978f0e487$var$visualViewport) {
if ($a21edfc55f5392c9a20c9978f0e487$var$visualViewport.height < window.innerHeight) {
// If the keyboard is already visible, do this after one additional frame
// to wait for the transform to be removed.
requestAnimationFrame(() => {
$a21edfc55f5392c9a20c9978f0e487$var$scrollIntoView(target);
});
} else {
// Otherwise, wait for the visual viewport to resize before scrolling so we can
// measure the correct position to scroll to.
$a21edfc55f5392c9a20c9978f0e487$var$visualViewport.addEventListener('resize', () => $a21edfc55f5392c9a20c9978f0e487$var$scrollIntoView(target), {
once: true
});
}
}
});
}
};
let onWindowScroll = () => {
// 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);
}; // Record the original scroll position so we can restore it.
// Then apply a negative margin to the body to offset it by the scroll position. This will
// enable us to scroll the window to the top, which is required for the rest of this to work.
let scrollX = window.pageXOffset;
let scrollY = window.pageYOffset;
let restoreStyles = chain($a21edfc55f5392c9a20c9978f0e487$var$setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), $a21edfc55f5392c9a20c9978f0e487$var$setStyle(document.documentElement, 'overflow', 'hidden'), $a21edfc55f5392c9a20c9978f0e487$var$setStyle(document.body, 'marginTop', "-" + scrollY + "px")); // Scroll to the top. The negative margin on the body will make this appear the same.
window.scrollTo(0, 0);
let removeEvents = chain($a21edfc55f5392c9a20c9978f0e487$var$addEvent(document, 'touchstart', onTouchStart, {
passive: false,
capture: true
}), $a21edfc55f5392c9a20c9978f0e487$var$addEvent(document, 'touchmove', onTouchMove, {
passive: false,
capture: true
}), $a21edfc55f5392c9a20c9978f0e487$var$addEvent(document, 'touchend', onTouchEnd, {
passive: false,
capture: true
}), $a21edfc55f5392c9a20c9978f0e487$var$addEvent(document, 'focus', onFocus, true), $a21edfc55f5392c9a20c9978f0e487$var$addEvent(window, 'scroll', onWindowScroll));
return () => {
// Restore styles and scroll the page back to where it was.
restoreStyles();
removeEvents();
window.scrollTo(scrollX, scrollY);
};
} // Sets a CSS property on an element, and returns a function to revert it to the previous value.
function $a21edfc55f5392c9a20c9978f0e487$var$setStyle(element, style, value) {
let cur = element.style[style];
element.style[style] = value;
return () => {
element.style[style] = cur;
};
} // Adds an event listener to an element, and returns a function to remove it.
function $a21edfc55f5392c9a20c9978f0e487$var$addEvent(target, event, handler, options) {
target.addEventListener(event, handler, options);
return () => {
target.removeEventListener(event, handler, options);
};
}
function $a21edfc55f5392c9a20c9978f0e487$var$scrollIntoView(target) {
// Find the parent scrollable element and adjust the scroll position if the target is not already in view.
let scrollable = getScrollParent(target);
if (scrollable !== document.documentElement && scrollable !== document.body) {
let scrollableTop = scrollable.getBoundingClientRect().top;
let targetTop = target.getBoundingClientRect().top;
if (targetTop > scrollableTop + target.clientHeight) {
scrollable.scrollTop += targetTop - scrollableTop;
}
}
}
const $c5f9596976ab8bd94c5879001549a3e$var$Context = _react.createContext(null);

@@ -612,0 +805,0 @@ /**

import { VisuallyHidden } from "@react-aria/visually-hidden";
import _babelRuntimeHelpersEsmInteropRequireDefault from "@babel/runtime/helpers/esm/interopRequireDefault";
import _reactDom from "react-dom";
import { useId } from "@react-aria/utils";
import { useId, chain, getScrollParent } from "@react-aria/utils";
import { useFocusWithin, useInteractOutside } from "@react-aria/interactions";
import { useLocale, useMessageFormatter } from "@react-aria/i18n";
import _react, { useCallback, useEffect, useState, useContext, useMemo } from "react";
import _react, { useCallback, useEffect, useState, useLayoutEffect, useContext, useMemo } from "react";
import _domHelpersOwnerDocument from "dom-helpers/ownerDocument";

@@ -138,18 +138,29 @@ import _domHelpersQueryScrollTop from "dom-helpers/query/scrollTop";

} = 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 {

@@ -528,3 +539,6 @@ position,

}
const $ece0076f06e8a828c60ba0c94f22f89$var$isMobileSafari = typeof window !== 'undefined' && window.navigator != null ? /AppleWebKit/.test(window.navigator.userAgent) && (/^(iPhone|iPad)$/.test(window.navigator.platform) || // iPadOS 13 lies and says its a Mac, but we can distinguish by detecting touch support.
window.navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) : false; // @ts-ignore
const $ece0076f06e8a828c60ba0c94f22f89$var$visualViewport = typeof window !== 'undefined' && window.visualViewport;
/**

@@ -535,2 +549,3 @@ * Prevents scrolling on the document body on mount, and

*/
export function usePreventScroll(options) {

@@ -544,20 +559,194 @@ if (options === void 0) {

} = options;
useEffect(() => {
let {
paddingRight,
overflow
} = document.body.style;
useLayoutEffect(() => {
if (isDisabled) {
return;
}
if (!isDisabled) {
document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px";
document.body.style.overflow = 'hidden';
if ($ece0076f06e8a828c60ba0c94f22f89$var$isMobileSafari) {
return $ece0076f06e8a828c60ba0c94f22f89$var$preventScrollMobileSafari();
} else {
return $ece0076f06e8a828c60ba0c94f22f89$var$preventScrollStandard();
}
}, [isDisabled]);
} // For most browsers, all we need to do is set `overflow: hidden` on the root element, and
// add some padding to prevent the page from shifting when the scrollbar is hidden.
return () => {
document.body.style.overflow = overflow;
document.body.style.paddingRight = paddingRight;
};
}, [isDisabled]);
function $ece0076f06e8a828c60ba0c94f22f89$var$preventScrollStandard() {
return chain($ece0076f06e8a828c60ba0c94f22f89$var$setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), $ece0076f06e8a828c60ba0c94f22f89$var$setStyle(document.documentElement, 'overflow', 'hidden'));
} // Mobile Safari is a whole different beast. Even with overflow: hidden,
// it still scrolls the page in many situations:
//
// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
// it, so it becomes scrollable.
// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
// This may cause even fixed position elements to scroll off the screen.
// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
// scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
//
// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
//
// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
// on the window.
// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
// top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
// of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
// into view ourselves, without scrolling the whole page.
// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
// same visually, but makes the actual scroll position always zero. This is required to make all of the
// above work or Safari will still try to scroll the page when focusing an input.
// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
// to navigate to an input with the next/previous buttons that's outside a modal.
function $ece0076f06e8a828c60ba0c94f22f89$var$preventScrollMobileSafari() {
let scrollable;
let lastY = 0;
let onTouchStart = e => {
// Store the nearest scrollable parent element from the element that the user touched.
scrollable = getScrollParent(e.target);
if (scrollable === document.documentElement && scrollable === document.body) {
return;
}
lastY = e.changedTouches[0].pageY;
};
let onTouchMove = e => {
// Prevent scrolling the window.
if (scrollable === document.documentElement || scrollable === document.body) {
e.preventDefault();
return;
} // Prevent scrolling up when at the top and scrolling down when at the bottom
// of a nested scrollable area, otherwise mobile Safari will start scrolling
// the window instead. Unfortunately, this disables bounce scrolling when at
// the top but it's the best we can do.
let y = e.changedTouches[0].pageY;
let scrollTop = scrollable.scrollTop;
let bottom = scrollable.scrollHeight - scrollable.clientHeight;
if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
e.preventDefault();
}
lastY = y;
};
let onTouchEnd = e => {
let target = e.target;
if (target.tagName === 'INPUT') {
e.preventDefault(); // Apply a transform to trick Safari into thinking the input is at the top of the page
// so it doesn't try to scroll it into view. When tapping on an input, this needs to
// be done before the "focus" event, so we have to focus the element ourselves.
target.style.transform = 'translateY(-2000px)';
target.focus();
requestAnimationFrame(() => {
target.style.transform = '';
});
}
};
let onFocus = e => {
let target = e.target;
if (target.tagName === 'INPUT') {
// Transform also needs to be applied in the focus event in cases where focus moves
// other than tapping on an input directly, e.g. the next/previous buttons in the
// software keyboard. In these cases, it seems applying the transform in the focus event
// is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
target.style.transform = 'translateY(-2000px)';
requestAnimationFrame(() => {
target.style.transform = ''; // This will have prevented the browser from scrolling the focused element into view,
// so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
if ($ece0076f06e8a828c60ba0c94f22f89$var$visualViewport) {
if ($ece0076f06e8a828c60ba0c94f22f89$var$visualViewport.height < window.innerHeight) {
// If the keyboard is already visible, do this after one additional frame
// to wait for the transform to be removed.
requestAnimationFrame(() => {
$ece0076f06e8a828c60ba0c94f22f89$var$scrollIntoView(target);
});
} else {
// Otherwise, wait for the visual viewport to resize before scrolling so we can
// measure the correct position to scroll to.
$ece0076f06e8a828c60ba0c94f22f89$var$visualViewport.addEventListener('resize', () => $ece0076f06e8a828c60ba0c94f22f89$var$scrollIntoView(target), {
once: true
});
}
}
});
}
};
let onWindowScroll = () => {
// 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);
}; // Record the original scroll position so we can restore it.
// Then apply a negative margin to the body to offset it by the scroll position. This will
// enable us to scroll the window to the top, which is required for the rest of this to work.
let scrollX = window.pageXOffset;
let scrollY = window.pageYOffset;
let restoreStyles = chain($ece0076f06e8a828c60ba0c94f22f89$var$setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), $ece0076f06e8a828c60ba0c94f22f89$var$setStyle(document.documentElement, 'overflow', 'hidden'), $ece0076f06e8a828c60ba0c94f22f89$var$setStyle(document.body, 'marginTop', "-" + scrollY + "px")); // Scroll to the top. The negative margin on the body will make this appear the same.
window.scrollTo(0, 0);
let removeEvents = chain($ece0076f06e8a828c60ba0c94f22f89$var$addEvent(document, 'touchstart', onTouchStart, {
passive: false,
capture: true
}), $ece0076f06e8a828c60ba0c94f22f89$var$addEvent(document, 'touchmove', onTouchMove, {
passive: false,
capture: true
}), $ece0076f06e8a828c60ba0c94f22f89$var$addEvent(document, 'touchend', onTouchEnd, {
passive: false,
capture: true
}), $ece0076f06e8a828c60ba0c94f22f89$var$addEvent(document, 'focus', onFocus, true), $ece0076f06e8a828c60ba0c94f22f89$var$addEvent(window, 'scroll', onWindowScroll));
return () => {
// Restore styles and scroll the page back to where it was.
restoreStyles();
removeEvents();
window.scrollTo(scrollX, scrollY);
};
} // Sets a CSS property on an element, and returns a function to revert it to the previous value.
function $ece0076f06e8a828c60ba0c94f22f89$var$setStyle(element, style, value) {
let cur = element.style[style];
element.style[style] = value;
return () => {
element.style[style] = cur;
};
} // Adds an event listener to an element, and returns a function to remove it.
function $ece0076f06e8a828c60ba0c94f22f89$var$addEvent(target, event, handler, options) {
target.addEventListener(event, handler, options);
return () => {
target.removeEventListener(event, handler, options);
};
}
function $ece0076f06e8a828c60ba0c94f22f89$var$scrollIntoView(target) {
// Find the parent scrollable element and adjust the scroll position if the target is not already in view.
let scrollable = getScrollParent(target);
if (scrollable !== document.documentElement && scrollable !== document.body) {
let scrollableTop = scrollable.getBoundingClientRect().top;
let targetTop = target.getBoundingClientRect().top;
if (targetTop > scrollableTop + target.clientHeight) {
scrollable.scrollTop += targetTop - scrollableTop;
}
}
}
const $b876e5ac9c98db373bf726bce3d604e$var$Context = _react.createContext(null);

@@ -564,0 +753,0 @@ /**

12

package.json
{
"name": "@react-aria/overlays",
"version": "3.4.0",
"version": "3.5.0",
"description": "Spectrum UI components in React",

@@ -21,9 +21,9 @@ "license": "Apache-2.0",

"@babel/runtime": "^7.6.2",
"@react-aria/i18n": "^3.1.2",
"@react-aria/interactions": "^3.2.1",
"@react-aria/utils": "^3.3.0",
"@react-aria/i18n": "^3.1.3",
"@react-aria/interactions": "^3.3.0",
"@react-aria/utils": "^3.4.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",
"@react-types/overlays": "^3.3.0",
"dom-helpers": "^3.3.1"

@@ -38,3 +38,3 @@ },

},
"gitHead": "0778f71a3c13e1e24388a23b6d525e3b9f5b98f1"
"gitHead": "9f738a06ea4e256c8d975f00502b4b0bbabb8f65"
}

@@ -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 {

@@ -13,3 +13,4 @@ /*

import {useEffect} from 'react';
import {chain, getScrollParent} from '@react-aria/utils';
import {useLayoutEffect} from 'react';

@@ -21,2 +22,14 @@ interface PreventScrollOptions {

const isMobileSafari =
typeof window !== 'undefined' && window.navigator != null
? /AppleWebKit/.test(window.navigator.userAgent) && (
/^(iPhone|iPad)$/.test(window.navigator.platform) ||
// iPadOS 13 lies and says its a Mac, but we can distinguish by detecting touch support.
(window.navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
)
: false;
// @ts-ignore
const visualViewport = typeof window !== 'undefined' && window.visualViewport;
/**

@@ -30,15 +43,199 @@ * Prevents scrolling on the document body on mount, and

useEffect(() => {
let {paddingRight, overflow} = document.body.style;
useLayoutEffect(() => {
if (isDisabled) {
return;
}
if (!isDisabled) {
document.body.style.paddingRight = `${window.innerWidth - document.documentElement.clientWidth}px`;
document.body.style.overflow = 'hidden';
if (isMobileSafari) {
return preventScrollMobileSafari();
} else {
return preventScrollStandard();
}
return () => {
document.body.style.overflow = overflow;
document.body.style.paddingRight = paddingRight;
};
}, [isDisabled]);
}
// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
// add some padding to prevent the page from shifting when the scrollbar is hidden.
function preventScrollStandard() {
return chain(
setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`),
setStyle(document.documentElement, 'overflow', 'hidden')
);
}
// Mobile Safari is a whole different beast. Even with overflow: hidden,
// it still scrolls the page in many situations:
//
// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
// it, so it becomes scrollable.
// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
// This may cause even fixed position elements to scroll off the screen.
// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
// scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
//
// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
//
// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
// on the window.
// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
// top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
// of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
// into view ourselves, without scrolling the whole page.
// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
// same visually, but makes the actual scroll position always zero. This is required to make all of the
// above work or Safari will still try to scroll the page when focusing an input.
// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
// to navigate to an input with the next/previous buttons that's outside a modal.
function preventScrollMobileSafari() {
let scrollable: Element;
let lastY = 0;
let onTouchStart = (e: TouchEvent) => {
// Store the nearest scrollable parent element from the element that the user touched.
scrollable = getScrollParent(e.target as Element);
if (scrollable === document.documentElement && scrollable === document.body) {
return;
}
lastY = e.changedTouches[0].pageY;
};
let onTouchMove = (e: TouchEvent) => {
// Prevent scrolling the window.
if (scrollable === document.documentElement || scrollable === document.body) {
e.preventDefault();
return;
}
// Prevent scrolling up when at the top and scrolling down when at the bottom
// of a nested scrollable area, otherwise mobile Safari will start scrolling
// the window instead. Unfortunately, this disables bounce scrolling when at
// the top but it's the best we can do.
let y = e.changedTouches[0].pageY;
let scrollTop = scrollable.scrollTop;
let bottom = scrollable.scrollHeight - scrollable.clientHeight;
if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {
e.preventDefault();
}
lastY = y;
};
let onTouchEnd = (e: TouchEvent) => {
let target = e.target as HTMLElement;
if (target.tagName === 'INPUT') {
e.preventDefault();
// Apply a transform to trick Safari into thinking the input is at the top of the page
// so it doesn't try to scroll it into view. When tapping on an input, this needs to
// be done before the "focus" event, so we have to focus the element ourselves.
target.style.transform = 'translateY(-2000px)';
target.focus();
requestAnimationFrame(() => {
target.style.transform = '';
});
}
};
let onFocus = (e: FocusEvent) => {
let target = e.target as HTMLElement;
if (target.tagName === 'INPUT') {
// Transform also needs to be applied in the focus event in cases where focus moves
// other than tapping on an input directly, e.g. the next/previous buttons in the
// software keyboard. In these cases, it seems applying the transform in the focus event
// is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
target.style.transform = 'translateY(-2000px)';
requestAnimationFrame(() => {
target.style.transform = '';
// This will have prevented the browser from scrolling the focused element into view,
// so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
if (visualViewport) {
if (visualViewport.height < window.innerHeight) {
// If the keyboard is already visible, do this after one additional frame
// to wait for the transform to be removed.
requestAnimationFrame(() => {
scrollIntoView(target);
});
} else {
// Otherwise, wait for the visual viewport to resize before scrolling so we can
// measure the correct position to scroll to.
visualViewport.addEventListener('resize', () => scrollIntoView(target), {once: true});
}
}
});
}
};
let onWindowScroll = () => {
// 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);
};
// Record the original scroll position so we can restore it.
// Then apply a negative margin to the body to offset it by the scroll position. This will
// enable us to scroll the window to the top, which is required for the rest of this to work.
let scrollX = window.pageXOffset;
let scrollY = window.pageYOffset;
let restoreStyles = chain(
setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`),
setStyle(document.documentElement, 'overflow', 'hidden'),
setStyle(document.body, 'marginTop', `-${scrollY}px`)
);
// Scroll to the top. The negative margin on the body will make this appear the same.
window.scrollTo(0, 0);
let removeEvents = chain(
addEvent(document, 'touchstart', onTouchStart, {passive: false, capture: true}),
addEvent(document, 'touchmove', onTouchMove, {passive: false, capture: true}),
addEvent(document, 'touchend', onTouchEnd, {passive: false, capture: true}),
addEvent(document, 'focus', onFocus, true),
addEvent(window, 'scroll', onWindowScroll)
);
return () => {
// Restore styles and scroll the page back to where it was.
restoreStyles();
removeEvents();
window.scrollTo(scrollX, scrollY);
};
}
// Sets a CSS property on an element, and returns a function to revert it to the previous value.
function setStyle(element: HTMLElement, style: string, value: string) {
let cur = element.style[style];
element.style[style] = value;
return () => {
element.style[style] = cur;
};
}
// Adds an event listener to an element, and returns a function to remove it.
function addEvent<K extends keyof GlobalEventHandlersEventMap>(
target: EventTarget,
event: K,
handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
options?: boolean | AddEventListenerOptions
) {
target.addEventListener(event, handler, options);
return () => {
target.removeEventListener(event, handler, options);
};
}
function scrollIntoView(target: Element) {
// Find the parent scrollable element and adjust the scroll position if the target is not already in view.
let scrollable = getScrollParent(target);
if (scrollable !== document.documentElement && scrollable !== document.body) {
let scrollableTop = scrollable.getBoundingClientRect().top;
let targetTop = target.getBoundingClientRect().top;
if (targetTop > scrollableTop + target.clientHeight) {
scrollable.scrollTop += targetTop - scrollableTop;
}
}
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc