@react-aria/overlays
Advanced tools
Comparing version 3.0.0-nightly-4f85a359f-241022 to 3.0.0-nightly-50c7ada5d-241219
@@ -32,3 +32,3 @@ | ||
// For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623). | ||
if (visibleNodes.has(node) || hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') return NodeFilter.FILTER_REJECT; | ||
if (visibleNodes.has(node) || node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') return NodeFilter.FILTER_REJECT; | ||
// Skip this node but continue to children if one of the targets is inside the node. | ||
@@ -108,2 +108,3 @@ for (let target of visibleNodes){ | ||
let count = $08ef1685902b6011$var$refCountMap.get(node); | ||
if (count == null) continue; | ||
if (count === 1) { | ||
@@ -110,0 +111,0 @@ node.removeAttribute('aria-hidden'); |
@@ -26,3 +26,3 @@ /* | ||
// For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623). | ||
if (visibleNodes.has(node) || hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') return NodeFilter.FILTER_REJECT; | ||
if (visibleNodes.has(node) || node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') return NodeFilter.FILTER_REJECT; | ||
// Skip this node but continue to children if one of the targets is inside the node. | ||
@@ -102,2 +102,3 @@ for (let target of visibleNodes){ | ||
let count = $5e3802645cc19319$var$refCountMap.get(node); | ||
if (count == null) continue; | ||
if (count === 1) { | ||
@@ -104,0 +105,0 @@ node.removeAttribute('aria-hidden'); |
@@ -45,8 +45,8 @@ var $6E71I$reactariautils = require("@react-aria/utils"); | ||
const $5935ba4d7da2c103$var$PARSED_PLACEMENT_CACHE = {}; | ||
// @ts-ignore | ||
let $5935ba4d7da2c103$var$visualViewport = typeof document !== 'undefined' && window.visualViewport; | ||
let $5935ba4d7da2c103$var$visualViewport = typeof document !== 'undefined' ? window.visualViewport : null; | ||
function $5935ba4d7da2c103$var$getContainerDimensions(containerNode) { | ||
let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0; | ||
let scroll = {}; | ||
let isPinchZoomedIn = ($5935ba4d7da2c103$var$visualViewport === null || $5935ba4d7da2c103$var$visualViewport === void 0 ? void 0 : $5935ba4d7da2c103$var$visualViewport.scale) > 1; | ||
var _visualViewport_scale; | ||
let isPinchZoomedIn = ((_visualViewport_scale = $5935ba4d7da2c103$var$visualViewport === null || $5935ba4d7da2c103$var$visualViewport === void 0 ? void 0 : $5935ba4d7da2c103$var$visualViewport.scale) !== null && _visualViewport_scale !== void 0 ? _visualViewport_scale : 1) > 1; | ||
if (containerNode.tagName === 'BODY') { | ||
@@ -83,4 +83,6 @@ let documentElement = document.documentElement; | ||
scroll.left = 0; | ||
top = $5935ba4d7da2c103$var$visualViewport.pageTop; | ||
left = $5935ba4d7da2c103$var$visualViewport.pageLeft; | ||
var _visualViewport_pageTop; | ||
top = (_visualViewport_pageTop = $5935ba4d7da2c103$var$visualViewport === null || $5935ba4d7da2c103$var$visualViewport === void 0 ? void 0 : $5935ba4d7da2c103$var$visualViewport.pageTop) !== null && _visualViewport_pageTop !== void 0 ? _visualViewport_pageTop : 0; | ||
var _visualViewport_pageLeft; | ||
left = (_visualViewport_pageLeft = $5935ba4d7da2c103$var$visualViewport === null || $5935ba4d7da2c103$var$visualViewport === void 0 ? void 0 : $5935ba4d7da2c103$var$visualViewport.pageLeft) !== null && _visualViewport_pageLeft !== void 0 ? _visualViewport_pageLeft : 0; | ||
} | ||
@@ -114,3 +116,4 @@ return { | ||
containerDimensions, padding, containerOffsetWithBoundary) { | ||
let containerScroll = containerDimensions.scroll[axis]; | ||
var _containerDimensions_scroll_axis; | ||
let containerScroll = (_containerDimensions_scroll_axis = containerDimensions.scroll[axis]) !== null && _containerDimensions_scroll_axis !== void 0 ? _containerDimensions_scroll_axis : 0; | ||
// The height/width of the boundary. Matches the axis along which we are adjusting the overlay position | ||
@@ -160,10 +163,12 @@ let boundarySize = boundaryDimensions[$5935ba4d7da2c103$var$AXIS_SIZE[axis]]; | ||
let position = {}; | ||
var _childOffset_crossAxis; | ||
// button position | ||
position[crossAxis] = childOffset[crossAxis]; | ||
position[crossAxis] = (_childOffset_crossAxis = childOffset[crossAxis]) !== null && _childOffset_crossAxis !== void 0 ? _childOffset_crossAxis : 0; | ||
var _childOffset_crossSize, _overlaySize_crossSize, _childOffset_crossSize1, _overlaySize_crossSize1; | ||
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; | ||
position[crossAxis] += (((_childOffset_crossSize = childOffset[crossSize]) !== null && _childOffset_crossSize !== void 0 ? _childOffset_crossSize : 0) - ((_overlaySize_crossSize = overlaySize[crossSize]) !== null && _overlaySize_crossSize !== void 0 ? _overlaySize_crossSize : 0)) / 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]; | ||
position[crossAxis] += ((_childOffset_crossSize1 = childOffset[crossSize]) !== null && _childOffset_crossSize1 !== void 0 ? _childOffset_crossSize1 : 0) - ((_overlaySize_crossSize1 = overlaySize[crossSize]) !== null && _overlaySize_crossSize1 !== void 0 ? _overlaySize_crossSize1 : 0); | ||
/* else { | ||
@@ -191,12 +196,13 @@ the overlay top should match the button top | ||
const containerHeight = isContainerPositioned ? containerOffsetWithBoundary.height : boundaryDimensions[$5935ba4d7da2c103$var$TOTAL_SIZE.height]; | ||
var _position_bottom; | ||
// For cases where position is set via "bottom" instead of "top", we need to calculate the true overlay top with respect to the boundary. Reverse calculate this with the same method | ||
// used in computePosition. | ||
let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - position.bottom - overlayHeight); | ||
let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - ((_position_bottom = position.bottom) !== null && _position_bottom !== void 0 ? _position_bottom : 0) - overlayHeight); | ||
var _boundaryDimensions_scroll_top, _margins_top, _margins_bottom, _boundaryDimensions_scroll_top1, _margins_top1, _margins_bottom1; | ||
let maxHeight = heightGrowthDirection !== 'top' ? // 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 | ||
- overlayTop // this is the top of the overlay | ||
- (margins.top + margins.bottom + padding // save additional space for margin and padding | ||
Math.max(0, boundaryDimensions.height + boundaryDimensions.top + ((_boundaryDimensions_scroll_top = boundaryDimensions.scroll.top) !== null && _boundaryDimensions_scroll_top !== void 0 ? _boundaryDimensions_scroll_top : 0) - overlayTop // this is the top of the overlay | ||
- (((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0) + padding // save additional space for margin and padding | ||
)) : Math.max(0, overlayTop + overlayHeight // this is the bottom of the overlay | ||
- (boundaryDimensions.top + boundaryDimensions.scroll.top // this is the top of the boundary | ||
) - (margins.top + margins.bottom + padding // save additional space for margin and padding | ||
- (boundaryDimensions.top + ((_boundaryDimensions_scroll_top1 = boundaryDimensions.scroll.top) !== null && _boundaryDimensions_scroll_top1 !== void 0 ? _boundaryDimensions_scroll_top1 : 0) // this is the top of the boundary | ||
) - (((_margins_top1 = margins.top) !== null && _margins_top1 !== void 0 ? _margins_top1 : 0) + ((_margins_bottom1 = margins.bottom) !== null && _margins_bottom1 !== void 0 ? _margins_bottom1 : 0) + padding // save additional space for margin and padding | ||
)); | ||
@@ -207,4 +213,6 @@ return Math.min(boundaryDimensions.height - padding * 2, maxHeight); | ||
let { placement: placement, axis: axis, size: size } = placementInfo; | ||
if (placement === axis) return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - boundaryDimensions.scroll[axis] + containerOffsetWithBoundary[axis] - margins[axis] - margins[$5935ba4d7da2c103$var$FLIPPED_DIRECTION[axis]] - padding); | ||
return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - margins[axis] - margins[$5935ba4d7da2c103$var$FLIPPED_DIRECTION[axis]] - padding); | ||
var _boundaryDimensions_scroll_axis, _margins_axis; | ||
if (placement === axis) return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - ((_boundaryDimensions_scroll_axis = boundaryDimensions.scroll[axis]) !== null && _boundaryDimensions_scroll_axis !== void 0 ? _boundaryDimensions_scroll_axis : 0) + containerOffsetWithBoundary[axis] - ((_margins_axis = margins[axis]) !== null && _margins_axis !== void 0 ? _margins_axis : 0) - margins[$5935ba4d7da2c103$var$FLIPPED_DIRECTION[axis]] - padding); | ||
var _margins_axis1; | ||
return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - ((_margins_axis1 = margins[axis]) !== null && _margins_axis1 !== void 0 ? _margins_axis1 : 0) - margins[$5935ba4d7da2c103$var$FLIPPED_DIRECTION[axis]] - padding); | ||
} | ||
@@ -255,4 +263,5 @@ function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset) { | ||
const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset; | ||
var _margins_left, _margins_right, _margins_top, _margins_bottom; | ||
// overlaySize[crossSize] - margins = true size of the overlay | ||
const overlayMargin = $5935ba4d7da2c103$var$AXIS[crossAxis] === 'left' ? margins.left + margins.right : margins.top + margins.bottom; | ||
const overlayMargin = $5935ba4d7da2c103$var$AXIS[crossAxis] === 'left' ? ((_margins_left = margins.left) !== null && _margins_left !== void 0 ? _margins_left : 0) + ((_margins_right = margins.right) !== null && _margins_right !== void 0 ? _margins_right : 0) : ((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0); | ||
const arrowMaxPosition = overlaySize[crossSize] - overlayMargin - arrowSize / 2 - arrowBoundaryOffset; | ||
@@ -288,4 +297,6 @@ // Min/Max position limits for the arrow with respect to the trigger/overlay anchor element | ||
let margins = $5935ba4d7da2c103$var$getMargins(overlayNode); | ||
overlaySize.width += margins.left + margins.right; | ||
overlaySize.height += margins.top + margins.bottom; | ||
var _margins_left, _margins_right; | ||
overlaySize.width += ((_margins_left = margins.left) !== null && _margins_left !== void 0 ? _margins_left : 0) + ((_margins_right = margins.right) !== null && _margins_right !== void 0 ? _margins_right : 0); | ||
var _margins_top, _margins_bottom; | ||
overlaySize.height += ((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0); | ||
let scrollSize = $5935ba4d7da2c103$var$getScroll(scrollNode); | ||
@@ -363,5 +374,3 @@ let boundaryDimensions = $5935ba4d7da2c103$var$getContainerDimensions(boundaryElement); | ||
let style = window.getComputedStyle(node); | ||
return style.transform !== 'none' || /transform|perspective/.test(style.willChange) || style.filter !== 'none' || style.contain === 'paint' || // @ts-ignore | ||
'backdropFilter' in style && style.backdropFilter !== 'none' || // @ts-ignore | ||
'WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none'; | ||
return style.transform !== 'none' || /transform|perspective/.test(style.willChange) || style.filter !== 'none' || style.contain === 'paint' || 'backdropFilter' in style && style.backdropFilter !== 'none' || 'WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none'; | ||
} | ||
@@ -368,0 +377,0 @@ |
@@ -39,8 +39,8 @@ import {isWebKit as $fZVmS$isWebKit, clamp as $fZVmS$clamp} from "@react-aria/utils"; | ||
const $edcf132a9284368a$var$PARSED_PLACEMENT_CACHE = {}; | ||
// @ts-ignore | ||
let $edcf132a9284368a$var$visualViewport = typeof document !== 'undefined' && window.visualViewport; | ||
let $edcf132a9284368a$var$visualViewport = typeof document !== 'undefined' ? window.visualViewport : null; | ||
function $edcf132a9284368a$var$getContainerDimensions(containerNode) { | ||
let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0; | ||
let scroll = {}; | ||
let isPinchZoomedIn = ($edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.scale) > 1; | ||
var _visualViewport_scale; | ||
let isPinchZoomedIn = ((_visualViewport_scale = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.scale) !== null && _visualViewport_scale !== void 0 ? _visualViewport_scale : 1) > 1; | ||
if (containerNode.tagName === 'BODY') { | ||
@@ -77,4 +77,6 @@ let documentElement = document.documentElement; | ||
scroll.left = 0; | ||
top = $edcf132a9284368a$var$visualViewport.pageTop; | ||
left = $edcf132a9284368a$var$visualViewport.pageLeft; | ||
var _visualViewport_pageTop; | ||
top = (_visualViewport_pageTop = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.pageTop) !== null && _visualViewport_pageTop !== void 0 ? _visualViewport_pageTop : 0; | ||
var _visualViewport_pageLeft; | ||
left = (_visualViewport_pageLeft = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.pageLeft) !== null && _visualViewport_pageLeft !== void 0 ? _visualViewport_pageLeft : 0; | ||
} | ||
@@ -108,3 +110,4 @@ return { | ||
containerDimensions, padding, containerOffsetWithBoundary) { | ||
let containerScroll = containerDimensions.scroll[axis]; | ||
var _containerDimensions_scroll_axis; | ||
let containerScroll = (_containerDimensions_scroll_axis = containerDimensions.scroll[axis]) !== null && _containerDimensions_scroll_axis !== void 0 ? _containerDimensions_scroll_axis : 0; | ||
// The height/width of the boundary. Matches the axis along which we are adjusting the overlay position | ||
@@ -154,10 +157,12 @@ let boundarySize = boundaryDimensions[$edcf132a9284368a$var$AXIS_SIZE[axis]]; | ||
let position = {}; | ||
var _childOffset_crossAxis; | ||
// button position | ||
position[crossAxis] = childOffset[crossAxis]; | ||
position[crossAxis] = (_childOffset_crossAxis = childOffset[crossAxis]) !== null && _childOffset_crossAxis !== void 0 ? _childOffset_crossAxis : 0; | ||
var _childOffset_crossSize, _overlaySize_crossSize, _childOffset_crossSize1, _overlaySize_crossSize1; | ||
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; | ||
position[crossAxis] += (((_childOffset_crossSize = childOffset[crossSize]) !== null && _childOffset_crossSize !== void 0 ? _childOffset_crossSize : 0) - ((_overlaySize_crossSize = overlaySize[crossSize]) !== null && _overlaySize_crossSize !== void 0 ? _overlaySize_crossSize : 0)) / 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]; | ||
position[crossAxis] += ((_childOffset_crossSize1 = childOffset[crossSize]) !== null && _childOffset_crossSize1 !== void 0 ? _childOffset_crossSize1 : 0) - ((_overlaySize_crossSize1 = overlaySize[crossSize]) !== null && _overlaySize_crossSize1 !== void 0 ? _overlaySize_crossSize1 : 0); | ||
/* else { | ||
@@ -185,12 +190,13 @@ the overlay top should match the button top | ||
const containerHeight = isContainerPositioned ? containerOffsetWithBoundary.height : boundaryDimensions[$edcf132a9284368a$var$TOTAL_SIZE.height]; | ||
var _position_bottom; | ||
// For cases where position is set via "bottom" instead of "top", we need to calculate the true overlay top with respect to the boundary. Reverse calculate this with the same method | ||
// used in computePosition. | ||
let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - position.bottom - overlayHeight); | ||
let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - ((_position_bottom = position.bottom) !== null && _position_bottom !== void 0 ? _position_bottom : 0) - overlayHeight); | ||
var _boundaryDimensions_scroll_top, _margins_top, _margins_bottom, _boundaryDimensions_scroll_top1, _margins_top1, _margins_bottom1; | ||
let maxHeight = heightGrowthDirection !== 'top' ? // 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 | ||
- overlayTop // this is the top of the overlay | ||
- (margins.top + margins.bottom + padding // save additional space for margin and padding | ||
Math.max(0, boundaryDimensions.height + boundaryDimensions.top + ((_boundaryDimensions_scroll_top = boundaryDimensions.scroll.top) !== null && _boundaryDimensions_scroll_top !== void 0 ? _boundaryDimensions_scroll_top : 0) - overlayTop // this is the top of the overlay | ||
- (((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0) + padding // save additional space for margin and padding | ||
)) : Math.max(0, overlayTop + overlayHeight // this is the bottom of the overlay | ||
- (boundaryDimensions.top + boundaryDimensions.scroll.top // this is the top of the boundary | ||
) - (margins.top + margins.bottom + padding // save additional space for margin and padding | ||
- (boundaryDimensions.top + ((_boundaryDimensions_scroll_top1 = boundaryDimensions.scroll.top) !== null && _boundaryDimensions_scroll_top1 !== void 0 ? _boundaryDimensions_scroll_top1 : 0) // this is the top of the boundary | ||
) - (((_margins_top1 = margins.top) !== null && _margins_top1 !== void 0 ? _margins_top1 : 0) + ((_margins_bottom1 = margins.bottom) !== null && _margins_bottom1 !== void 0 ? _margins_bottom1 : 0) + padding // save additional space for margin and padding | ||
)); | ||
@@ -201,4 +207,6 @@ return Math.min(boundaryDimensions.height - padding * 2, maxHeight); | ||
let { placement: placement, axis: axis, size: size } = placementInfo; | ||
if (placement === axis) return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - boundaryDimensions.scroll[axis] + containerOffsetWithBoundary[axis] - margins[axis] - margins[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] - padding); | ||
return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - margins[axis] - margins[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] - padding); | ||
var _boundaryDimensions_scroll_axis, _margins_axis; | ||
if (placement === axis) return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - ((_boundaryDimensions_scroll_axis = boundaryDimensions.scroll[axis]) !== null && _boundaryDimensions_scroll_axis !== void 0 ? _boundaryDimensions_scroll_axis : 0) + containerOffsetWithBoundary[axis] - ((_margins_axis = margins[axis]) !== null && _margins_axis !== void 0 ? _margins_axis : 0) - margins[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] - padding); | ||
var _margins_axis1; | ||
return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - ((_margins_axis1 = margins[axis]) !== null && _margins_axis1 !== void 0 ? _margins_axis1 : 0) - margins[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] - padding); | ||
} | ||
@@ -249,4 +257,5 @@ function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset) { | ||
const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset; | ||
var _margins_left, _margins_right, _margins_top, _margins_bottom; | ||
// overlaySize[crossSize] - margins = true size of the overlay | ||
const overlayMargin = $edcf132a9284368a$var$AXIS[crossAxis] === 'left' ? margins.left + margins.right : margins.top + margins.bottom; | ||
const overlayMargin = $edcf132a9284368a$var$AXIS[crossAxis] === 'left' ? ((_margins_left = margins.left) !== null && _margins_left !== void 0 ? _margins_left : 0) + ((_margins_right = margins.right) !== null && _margins_right !== void 0 ? _margins_right : 0) : ((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0); | ||
const arrowMaxPosition = overlaySize[crossSize] - overlayMargin - arrowSize / 2 - arrowBoundaryOffset; | ||
@@ -282,4 +291,6 @@ // Min/Max position limits for the arrow with respect to the trigger/overlay anchor element | ||
let margins = $edcf132a9284368a$var$getMargins(overlayNode); | ||
overlaySize.width += margins.left + margins.right; | ||
overlaySize.height += margins.top + margins.bottom; | ||
var _margins_left, _margins_right; | ||
overlaySize.width += ((_margins_left = margins.left) !== null && _margins_left !== void 0 ? _margins_left : 0) + ((_margins_right = margins.right) !== null && _margins_right !== void 0 ? _margins_right : 0); | ||
var _margins_top, _margins_bottom; | ||
overlaySize.height += ((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0); | ||
let scrollSize = $edcf132a9284368a$var$getScroll(scrollNode); | ||
@@ -357,5 +368,3 @@ let boundaryDimensions = $edcf132a9284368a$var$getContainerDimensions(boundaryElement); | ||
let style = window.getComputedStyle(node); | ||
return style.transform !== 'none' || /transform|perspective/.test(style.willChange) || style.filter !== 'none' || style.contain === 'paint' || // @ts-ignore | ||
'backdropFilter' in style && style.backdropFilter !== 'none' || // @ts-ignore | ||
'WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none'; | ||
return style.transform !== 'none' || /transform|perspective/.test(style.willChange) || style.filter !== 'none' || style.contain === 'paint' || 'backdropFilter' in style && style.backdropFilter !== 'none' || 'WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none'; | ||
} | ||
@@ -362,0 +371,0 @@ |
@@ -31,3 +31,3 @@ var $b2rU6$react = require("react"); | ||
value: { | ||
getContainer: getContainer === null ? null : getContainer !== null && getContainer !== void 0 ? getContainer : ctxGetContainer | ||
getContainer: getContainer === null ? undefined : getContainer !== null && getContainer !== void 0 ? getContainer : ctxGetContainer | ||
} | ||
@@ -34,0 +34,0 @@ }, props.children); |
@@ -20,3 +20,3 @@ import $7yuSY$react, {createContext as $7yuSY$createContext, useContext as $7yuSY$useContext} from "react"; | ||
value: { | ||
getContainer: getContainer === null ? null : getContainer !== null && getContainer !== void 0 ? getContainer : ctxGetContainer | ||
getContainer: getContainer === null ? undefined : getContainer !== null && getContainer !== void 0 ? getContainer : ctxGetContainer | ||
} | ||
@@ -23,0 +23,0 @@ }, props.children); |
@@ -54,3 +54,3 @@ import { DOMAttributes, RefObject, DOMProps, AriaLabelingProps } from "@react-types/shared"; | ||
/** Placement of the overlay with respect to the overlay trigger. */ | ||
placement: PlacementAxis; | ||
placement: PlacementAxis | null; | ||
/** Updates the position of the overlay. */ | ||
@@ -172,3 +172,3 @@ updatePosition(): void; | ||
*/ | ||
export function OverlayContainer(props: OverlayContainerProps): React.ReactPortal; | ||
export function OverlayContainer(props: OverlayContainerProps): React.ReactPortal | null; | ||
interface ModalAriaProps extends DOMAttributes { | ||
@@ -254,3 +254,3 @@ /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */ | ||
/** Placement of the popover with respect to the trigger. */ | ||
placement: PlacementAxis; | ||
placement: PlacementAxis | null; | ||
} | ||
@@ -293,3 +293,3 @@ /** | ||
*/ | ||
export function Overlay(props: OverlayProps): React.ReactPortal; | ||
export function Overlay(props: OverlayProps): React.ReactPortal | null; | ||
/** @private */ | ||
@@ -296,0 +296,0 @@ export function useOverlayFocusContain(): void; |
@@ -60,3 +60,3 @@ var $btuAB$react = require("react"); | ||
modalProviderProps: { | ||
'aria-hidden': context && context.modalCount > 0 ? true : null | ||
'aria-hidden': context && context.modalCount > 0 ? true : undefined | ||
} | ||
@@ -63,0 +63,0 @@ }; |
@@ -46,3 +46,3 @@ import $4AOtR$react, {useContext as $4AOtR$useContext, useState as $4AOtR$useState, useMemo as $4AOtR$useMemo, useEffect as $4AOtR$useEffect} from "react"; | ||
modalProviderProps: { | ||
'aria-hidden': context && context.modalCount > 0 ? true : null | ||
'aria-hidden': context && context.modalCount > 0 ? true : undefined | ||
} | ||
@@ -49,0 +49,0 @@ }; |
@@ -41,3 +41,3 @@ var $08ef1685902b6011$exports = require("./ariaHideOutside.main.js"); | ||
(0, $9ziDi$react.useEffect)(()=>{ | ||
if (state.isOpen) return (0, $08ef1685902b6011$exports.ariaHideOutside)([ | ||
if (state.isOpen && ref.current) return (0, $08ef1685902b6011$exports.ariaHideOutside)([ | ||
ref.current | ||
@@ -44,0 +44,0 @@ ]); |
@@ -35,3 +35,3 @@ import {ariaHideOutside as $5e3802645cc19319$export$1c3ebcada18427bf} from "./ariaHideOutside.module.js"; | ||
(0, $7Dhkr$useEffect)(()=>{ | ||
if (state.isOpen) return (0, $5e3802645cc19319$export$1c3ebcada18427bf)([ | ||
if (state.isOpen && ref.current) return (0, $5e3802645cc19319$export$1c3ebcada18427bf)([ | ||
ref.current | ||
@@ -38,0 +38,0 @@ ]); |
@@ -70,3 +70,3 @@ var $eQbp7$reactariafocus = require("@react-aria/focus"); | ||
ref: ref, | ||
onInteractOutside: isDismissable && isOpen ? onInteractOutside : null, | ||
onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined, | ||
onInteractOutsideStart: onInteractOutsideStart | ||
@@ -87,3 +87,3 @@ }); | ||
if (!e.relatedTarget || (0, $eQbp7$reactariafocus.isElementInChildOfActiveScope)(e.relatedTarget)) return; | ||
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose(); | ||
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose === null || onClose === void 0 ? void 0 : onClose(); | ||
} | ||
@@ -90,0 +90,0 @@ }); |
@@ -64,3 +64,3 @@ import {isElementInChildOfActiveScope as $jtpZv$isElementInChildOfActiveScope} from "@react-aria/focus"; | ||
ref: ref, | ||
onInteractOutside: isDismissable && isOpen ? onInteractOutside : null, | ||
onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined, | ||
onInteractOutsideStart: onInteractOutsideStart | ||
@@ -81,3 +81,3 @@ }); | ||
if (!e.relatedTarget || (0, $jtpZv$isElementInChildOfActiveScope)(e.relatedTarget)) return; | ||
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose(); | ||
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose === null || onClose === void 0 ? void 0 : onClose(); | ||
} | ||
@@ -84,0 +84,0 @@ }); |
@@ -28,14 +28,7 @@ var $5935ba4d7da2c103$exports = require("./calculatePosition.main.js"); | ||
// @ts-ignore | ||
let $cd94b4896dd97759$var$visualViewport = typeof document !== 'undefined' && window.visualViewport; | ||
let $cd94b4896dd97759$var$visualViewport = typeof document !== 'undefined' ? window.visualViewport : null; | ||
function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) { | ||
let { direction: direction } = (0, $6TXnl$reactariai18n.useLocale)(); | ||
let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = 'bottom', containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== 'undefined' ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props; | ||
let [position, setPosition] = (0, $6TXnl$react.useState)({ | ||
position: {}, | ||
arrowOffsetLeft: undefined, | ||
arrowOffsetTop: undefined, | ||
maxHeight: undefined, | ||
placement: undefined | ||
}); | ||
let [position, setPosition] = (0, $6TXnl$react.useState)(null); | ||
let deps = [ | ||
@@ -76,4 +69,6 @@ shouldUpdatePosition, | ||
if (scrollRef.current && scrollRef.current.contains(document.activeElement)) { | ||
let anchorRect = document.activeElement.getBoundingClientRect(); | ||
var _document_activeElement; | ||
let anchorRect = (_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getBoundingClientRect(); | ||
let scrollRect = scrollRef.current.getBoundingClientRect(); | ||
var _anchorRect_top; | ||
// Anchor from the top if the offset is in the top half of the scrollable element, | ||
@@ -83,7 +78,8 @@ // otherwise anchor from the bottom. | ||
type: 'top', | ||
offset: anchorRect.top - scrollRect.top | ||
offset: ((_anchorRect_top = anchorRect === null || anchorRect === void 0 ? void 0 : anchorRect.top) !== null && _anchorRect_top !== void 0 ? _anchorRect_top : 0) - scrollRect.top | ||
}; | ||
if (anchor.offset > scrollRect.height / 2) { | ||
anchor.type = 'bottom'; | ||
anchor.offset = anchorRect.bottom - scrollRect.bottom; | ||
var _anchorRect_bottom; | ||
anchor.offset = ((_anchorRect_bottom = anchorRect === null || anchorRect === void 0 ? void 0 : anchorRect.bottom) !== null && _anchorRect_bottom !== void 0 ? _anchorRect_bottom : 0) - scrollRect.bottom; | ||
} | ||
@@ -115,2 +111,3 @@ } | ||
}); | ||
if (!position.position) return; | ||
// Modify overlay styles directly so positioning happens immediately without the need of a second render | ||
@@ -123,5 +120,5 @@ // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers | ||
Object.keys(position.position).forEach((key)=>overlay.style[key] = position.position[key] + 'px'); | ||
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : undefined; | ||
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : ''; | ||
// Restore scroll position relative to anchor element. | ||
if (anchor) { | ||
if (anchor && document.activeElement && scrollRef.current) { | ||
let anchorRect = document.activeElement.getBoundingClientRect(); | ||
@@ -179,3 +176,3 @@ let scrollRect = scrollRef.current.getBoundingClientRect(); | ||
let close = (0, $6TXnl$react.useCallback)(()=>{ | ||
if (!isResizing.current) onClose(); | ||
if (!isResizing.current) onClose === null || onClose === void 0 ? void 0 : onClose(); | ||
}, [ | ||
@@ -192,3 +189,3 @@ onClose, | ||
}); | ||
var _position_maxHeight; | ||
var _position_maxHeight, _position_placement; | ||
return { | ||
@@ -199,7 +196,7 @@ overlayProps: { | ||
zIndex: 100000, | ||
...position.position, | ||
maxHeight: (_position_maxHeight = position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh' | ||
...position === null || position === void 0 ? void 0 : position.position, | ||
maxHeight: (_position_maxHeight = position === null || position === void 0 ? void 0 : position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh' | ||
} | ||
}, | ||
placement: position.placement, | ||
placement: (_position_placement = position === null || position === void 0 ? void 0 : position.placement) !== null && _position_placement !== void 0 ? _position_placement : null, | ||
arrowProps: { | ||
@@ -209,4 +206,4 @@ 'aria-hidden': 'true', | ||
style: { | ||
left: position.arrowOffsetLeft, | ||
top: position.arrowOffsetTop | ||
left: position === null || position === void 0 ? void 0 : position.arrowOffsetLeft, | ||
top: position === null || position === void 0 ? void 0 : position.arrowOffsetTop | ||
} | ||
@@ -213,0 +210,0 @@ }, |
@@ -22,14 +22,7 @@ import {calculatePosition as $edcf132a9284368a$export$b3ceb0cbf1056d98} from "./calculatePosition.module.js"; | ||
// @ts-ignore | ||
let $2a41e45df1593e64$var$visualViewport = typeof document !== 'undefined' && window.visualViewport; | ||
let $2a41e45df1593e64$var$visualViewport = typeof document !== 'undefined' ? window.visualViewport : null; | ||
function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) { | ||
let { direction: direction } = (0, $39EOa$useLocale)(); | ||
let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = 'bottom', containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== 'undefined' ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props; | ||
let [position, setPosition] = (0, $39EOa$useState)({ | ||
position: {}, | ||
arrowOffsetLeft: undefined, | ||
arrowOffsetTop: undefined, | ||
maxHeight: undefined, | ||
placement: undefined | ||
}); | ||
let [position, setPosition] = (0, $39EOa$useState)(null); | ||
let deps = [ | ||
@@ -70,4 +63,6 @@ shouldUpdatePosition, | ||
if (scrollRef.current && scrollRef.current.contains(document.activeElement)) { | ||
let anchorRect = document.activeElement.getBoundingClientRect(); | ||
var _document_activeElement; | ||
let anchorRect = (_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getBoundingClientRect(); | ||
let scrollRect = scrollRef.current.getBoundingClientRect(); | ||
var _anchorRect_top; | ||
// Anchor from the top if the offset is in the top half of the scrollable element, | ||
@@ -77,7 +72,8 @@ // otherwise anchor from the bottom. | ||
type: 'top', | ||
offset: anchorRect.top - scrollRect.top | ||
offset: ((_anchorRect_top = anchorRect === null || anchorRect === void 0 ? void 0 : anchorRect.top) !== null && _anchorRect_top !== void 0 ? _anchorRect_top : 0) - scrollRect.top | ||
}; | ||
if (anchor.offset > scrollRect.height / 2) { | ||
anchor.type = 'bottom'; | ||
anchor.offset = anchorRect.bottom - scrollRect.bottom; | ||
var _anchorRect_bottom; | ||
anchor.offset = ((_anchorRect_bottom = anchorRect === null || anchorRect === void 0 ? void 0 : anchorRect.bottom) !== null && _anchorRect_bottom !== void 0 ? _anchorRect_bottom : 0) - scrollRect.bottom; | ||
} | ||
@@ -109,2 +105,3 @@ } | ||
}); | ||
if (!position.position) return; | ||
// Modify overlay styles directly so positioning happens immediately without the need of a second render | ||
@@ -117,5 +114,5 @@ // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers | ||
Object.keys(position.position).forEach((key)=>overlay.style[key] = position.position[key] + 'px'); | ||
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : undefined; | ||
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : ''; | ||
// Restore scroll position relative to anchor element. | ||
if (anchor) { | ||
if (anchor && document.activeElement && scrollRef.current) { | ||
let anchorRect = document.activeElement.getBoundingClientRect(); | ||
@@ -173,3 +170,3 @@ let scrollRect = scrollRef.current.getBoundingClientRect(); | ||
let close = (0, $39EOa$useCallback)(()=>{ | ||
if (!isResizing.current) onClose(); | ||
if (!isResizing.current) onClose === null || onClose === void 0 ? void 0 : onClose(); | ||
}, [ | ||
@@ -186,3 +183,3 @@ onClose, | ||
}); | ||
var _position_maxHeight; | ||
var _position_maxHeight, _position_placement; | ||
return { | ||
@@ -193,7 +190,7 @@ overlayProps: { | ||
zIndex: 100000, | ||
...position.position, | ||
maxHeight: (_position_maxHeight = position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh' | ||
...position === null || position === void 0 ? void 0 : position.position, | ||
maxHeight: (_position_maxHeight = position === null || position === void 0 ? void 0 : position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh' | ||
} | ||
}, | ||
placement: position.placement, | ||
placement: (_position_placement = position === null || position === void 0 ? void 0 : position.placement) !== null && _position_placement !== void 0 ? _position_placement : null, | ||
arrowProps: { | ||
@@ -203,4 +200,4 @@ 'aria-hidden': 'true', | ||
style: { | ||
left: position.arrowOffsetLeft, | ||
top: position.arrowOffsetTop | ||
left: position === null || position === void 0 ? void 0 : position.arrowOffsetLeft, | ||
top: position === null || position === void 0 ? void 0 : position.arrowOffsetTop | ||
} | ||
@@ -207,0 +204,0 @@ }, |
@@ -44,3 +44,3 @@ var $9a8aa1b0b336ea3a$exports = require("./useCloseOnScroll.main.js"); | ||
'aria-expanded': isOpen, | ||
'aria-controls': isOpen ? overlayId : null, | ||
'aria-controls': isOpen ? overlayId : undefined, | ||
onPress: state.toggle | ||
@@ -47,0 +47,0 @@ }, |
@@ -38,3 +38,3 @@ import {onCloseMap as $dd149f63282afbbf$export$f6211563215e3b37} from "./useCloseOnScroll.module.js"; | ||
'aria-expanded': isOpen, | ||
'aria-controls': isOpen ? overlayId : null, | ||
'aria-controls': isOpen ? overlayId : undefined, | ||
onPress: state.toggle | ||
@@ -41,0 +41,0 @@ }, |
@@ -31,3 +31,4 @@ var $08ef1685902b6011$exports = require("./ariaHideOutside.main.js"); | ||
let { overlayProps: overlayProps, underlayProps: underlayProps } = (0, $82711f9cb668ecdb$exports.useOverlay)({ | ||
isOpen: state.isOpen, | ||
// If popover is in the top layer, it should not prevent other popovers from being dismissed. | ||
isOpen: state.isOpen && !otherProps['data-react-aria-top-layer'], | ||
onClose: state.close, | ||
@@ -44,3 +45,3 @@ shouldCloseOnBlur: true, | ||
isOpen: state.isOpen, | ||
onClose: isNonModal ? state.close : null | ||
onClose: isNonModal ? state.close : undefined | ||
}); | ||
@@ -47,0 +48,0 @@ (0, $5c2f5cd01815d369$exports.usePreventScroll)({ |
@@ -25,3 +25,4 @@ import {ariaHideOutside as $5e3802645cc19319$export$1c3ebcada18427bf} from "./ariaHideOutside.module.js"; | ||
let { overlayProps: overlayProps, underlayProps: underlayProps } = (0, $a11501f3d1d39e6c$export$ea8f71083e90600f)({ | ||
isOpen: state.isOpen, | ||
// If popover is in the top layer, it should not prevent other popovers from being dismissed. | ||
isOpen: state.isOpen && !otherProps['data-react-aria-top-layer'], | ||
onClose: state.close, | ||
@@ -38,3 +39,3 @@ shouldCloseOnBlur: true, | ||
isOpen: state.isOpen, | ||
onClose: isNonModal ? state.close : null | ||
onClose: isNonModal ? state.close : undefined | ||
}); | ||
@@ -41,0 +42,0 @@ (0, $49c51c25361d4cd2$export$ee0f7cc6afcd1c18)({ |
@@ -20,3 +20,2 @@ var $59kHH$reactariautils = require("@react-aria/utils"); | ||
*/ | ||
// @ts-ignore | ||
const $5c2f5cd01815d369$var$visualViewport = typeof document !== 'undefined' && window.visualViewport; | ||
@@ -113,17 +112,3 @@ // HTML input types that do not cause the software keyboard to appear. | ||
}; | ||
let onTouchEnd = (e)=>{ | ||
let target = e.target; | ||
// Apply this change if we're not already focused on the target element | ||
if ($5c2f5cd01815d369$var$willOpenKeyboard(target) && target !== document.activeElement) { | ||
e.preventDefault(); | ||
setupStyles(); | ||
// 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 onTouchEnd = ()=>{ | ||
if (restoreScrollableStyles) restoreScrollableStyles(); | ||
@@ -135,6 +120,4 @@ }; | ||
setupStyles(); | ||
// 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. 🤷♂️ | ||
// 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. | ||
target.style.transform = 'translateY(-2000px)'; | ||
@@ -206,4 +189,7 @@ requestAnimationFrame(()=>{ | ||
function $5c2f5cd01815d369$var$addEvent(target, event, handler, options) { | ||
// internal function, so it's ok to ignore the difficult to fix type error | ||
// @ts-ignore | ||
target.addEventListener(event, handler, options); | ||
return ()=>{ | ||
// @ts-ignore | ||
target.removeEventListener(event, handler, options); | ||
@@ -214,11 +200,12 @@ }; | ||
let root = document.scrollingElement || document.documentElement; | ||
while(target && target !== root){ | ||
let nextTarget = target; | ||
while(nextTarget && nextTarget !== root){ | ||
// Find the parent scrollable element and adjust the scroll position if the target is not already in view. | ||
let scrollable = (0, $59kHH$reactariautils.getScrollParent)(target); | ||
if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) { | ||
let scrollable = (0, $59kHH$reactariautils.getScrollParent)(nextTarget); | ||
if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) { | ||
let scrollableTop = scrollable.getBoundingClientRect().top; | ||
let targetTop = target.getBoundingClientRect().top; | ||
if (targetTop > scrollableTop + target.clientHeight) scrollable.scrollTop += targetTop - scrollableTop; | ||
let targetTop = nextTarget.getBoundingClientRect().top; | ||
if (targetTop > scrollableTop + nextTarget.clientHeight) scrollable.scrollTop += targetTop - scrollableTop; | ||
} | ||
target = scrollable.parentElement; | ||
nextTarget = scrollable.parentElement; | ||
} | ||
@@ -225,0 +212,0 @@ } |
@@ -14,3 +14,2 @@ import {useLayoutEffect as $7mMvr$useLayoutEffect, isIOS as $7mMvr$isIOS, chain as $7mMvr$chain, getScrollParent as $7mMvr$getScrollParent} from "@react-aria/utils"; | ||
*/ | ||
// @ts-ignore | ||
const $49c51c25361d4cd2$var$visualViewport = typeof document !== 'undefined' && window.visualViewport; | ||
@@ -107,17 +106,3 @@ // HTML input types that do not cause the software keyboard to appear. | ||
}; | ||
let onTouchEnd = (e)=>{ | ||
let target = e.target; | ||
// Apply this change if we're not already focused on the target element | ||
if ($49c51c25361d4cd2$var$willOpenKeyboard(target) && target !== document.activeElement) { | ||
e.preventDefault(); | ||
setupStyles(); | ||
// 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 onTouchEnd = ()=>{ | ||
if (restoreScrollableStyles) restoreScrollableStyles(); | ||
@@ -129,6 +114,4 @@ }; | ||
setupStyles(); | ||
// 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. 🤷♂️ | ||
// 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. | ||
target.style.transform = 'translateY(-2000px)'; | ||
@@ -200,4 +183,7 @@ requestAnimationFrame(()=>{ | ||
function $49c51c25361d4cd2$var$addEvent(target, event, handler, options) { | ||
// internal function, so it's ok to ignore the difficult to fix type error | ||
// @ts-ignore | ||
target.addEventListener(event, handler, options); | ||
return ()=>{ | ||
// @ts-ignore | ||
target.removeEventListener(event, handler, options); | ||
@@ -208,11 +194,12 @@ }; | ||
let root = document.scrollingElement || document.documentElement; | ||
while(target && target !== root){ | ||
let nextTarget = target; | ||
while(nextTarget && nextTarget !== root){ | ||
// Find the parent scrollable element and adjust the scroll position if the target is not already in view. | ||
let scrollable = (0, $7mMvr$getScrollParent)(target); | ||
if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) { | ||
let scrollable = (0, $7mMvr$getScrollParent)(nextTarget); | ||
if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) { | ||
let scrollableTop = scrollable.getBoundingClientRect().top; | ||
let targetTop = target.getBoundingClientRect().top; | ||
if (targetTop > scrollableTop + target.clientHeight) scrollable.scrollTop += targetTop - scrollableTop; | ||
let targetTop = nextTarget.getBoundingClientRect().top; | ||
if (targetTop > scrollableTop + nextTarget.clientHeight) scrollable.scrollTop += targetTop - scrollableTop; | ||
} | ||
target = scrollable.parentElement; | ||
nextTarget = scrollable.parentElement; | ||
} | ||
@@ -219,0 +206,0 @@ } |
{ | ||
"name": "@react-aria/overlays", | ||
"version": "3.0.0-nightly-4f85a359f-241022", | ||
"version": "3.0.0-nightly-50c7ada5d-241219", | ||
"description": "Spectrum UI components in React", | ||
@@ -25,22 +25,21 @@ "license": "Apache-2.0", | ||
"dependencies": { | ||
"@react-aria/focus": "^3.0.0-nightly-4f85a359f-241022", | ||
"@react-aria/i18n": "^3.0.0-nightly-4f85a359f-241022", | ||
"@react-aria/interactions": "^3.0.0-nightly-4f85a359f-241022", | ||
"@react-aria/ssr": "^3.0.0-nightly-4f85a359f-241022", | ||
"@react-aria/utils": "^3.0.0-nightly-4f85a359f-241022", | ||
"@react-aria/visually-hidden": "^3.0.0-nightly-4f85a359f-241022", | ||
"@react-stately/overlays": "^3.0.0-nightly-4f85a359f-241022", | ||
"@react-types/button": "^3.0.0-nightly-4f85a359f-241022", | ||
"@react-types/overlays": "^3.0.0-nightly-4f85a359f-241022", | ||
"@react-types/shared": "^3.0.0-nightly-4f85a359f-241022", | ||
"@react-aria/focus": "3.0.0-nightly-50c7ada5d-241219", | ||
"@react-aria/i18n": "3.0.0-nightly-50c7ada5d-241219", | ||
"@react-aria/interactions": "3.0.0-nightly-50c7ada5d-241219", | ||
"@react-aria/ssr": "3.0.0-nightly-50c7ada5d-241219", | ||
"@react-aria/utils": "3.0.0-nightly-50c7ada5d-241219", | ||
"@react-aria/visually-hidden": "3.0.0-nightly-50c7ada5d-241219", | ||
"@react-stately/overlays": "3.0.0-nightly-50c7ada5d-241219", | ||
"@react-types/button": "3.0.0-nightly-50c7ada5d-241219", | ||
"@react-types/overlays": "3.0.0-nightly-50c7ada5d-241219", | ||
"@react-types/shared": "3.0.0-nightly-50c7ada5d-241219", | ||
"@swc/helpers": "^0.5.0" | ||
}, | ||
"peerDependencies": { | ||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", | ||
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" | ||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", | ||
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" | ||
}, | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"stableVersion": "3.23.4" | ||
} | ||
} |
@@ -16,3 +16,7 @@ /* | ||
let refCountMap = new WeakMap<Element, number>(); | ||
let observerStack = []; | ||
interface ObserverWrapper { | ||
observe: () => void, | ||
disconnect: () => void | ||
} | ||
let observerStack: Array<ObserverWrapper> = []; | ||
@@ -44,3 +48,3 @@ /** | ||
visibleNodes.has(node) || | ||
(hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') | ||
(node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') | ||
) { | ||
@@ -138,3 +142,3 @@ return NodeFilter.FILTER_REJECT; | ||
let observerWrapper = { | ||
let observerWrapper: ObserverWrapper = { | ||
observe() { | ||
@@ -155,2 +159,5 @@ observer.observe(root, {childList: true, subtree: true}); | ||
let count = refCountMap.get(node); | ||
if (count == null) { | ||
continue; | ||
} | ||
if (count === 1) { | ||
@@ -157,0 +164,0 @@ node.removeAttribute('aria-hidden'); |
@@ -67,6 +67,6 @@ /* | ||
export interface PositionResult { | ||
position?: Position, | ||
position: Position, | ||
arrowOffsetLeft?: number, | ||
arrowOffsetTop?: number, | ||
maxHeight?: number, | ||
maxHeight: number, | ||
placement: PlacementAxis | ||
@@ -106,4 +106,3 @@ } | ||
// @ts-ignore | ||
let visualViewport = typeof document !== 'undefined' && window.visualViewport; | ||
let visualViewport = typeof document !== 'undefined' ? window.visualViewport : null; | ||
@@ -113,3 +112,3 @@ function getContainerDimensions(containerNode: Element): Dimensions { | ||
let scroll: Position = {}; | ||
let isPinchZoomedIn = visualViewport?.scale > 1; | ||
let isPinchZoomedIn = (visualViewport?.scale ?? 1) > 1; | ||
@@ -147,4 +146,4 @@ if (containerNode.tagName === 'BODY') { | ||
scroll.left = 0; | ||
top = visualViewport.pageTop; | ||
left = visualViewport.pageLeft; | ||
top = visualViewport?.pageTop ?? 0; | ||
left = visualViewport?.pageLeft ?? 0; | ||
} | ||
@@ -181,3 +180,3 @@ | ||
) { | ||
let containerScroll = containerDimensions.scroll[axis]; | ||
let containerScroll = containerDimensions.scroll[axis] ?? 0; | ||
// The height/width of the boundary. Matches the axis along which we are adjusting the overlay position | ||
@@ -248,11 +247,11 @@ let boundarySize = boundaryDimensions[AXIS_SIZE[axis]]; | ||
// button position | ||
position[crossAxis] = childOffset[crossAxis]; | ||
position[crossAxis] = childOffset[crossAxis] ?? 0; | ||
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; | ||
position[crossAxis]! += ((childOffset[crossSize] ?? 0) - (overlaySize[crossSize] ?? 0)) / 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]); | ||
position[crossAxis]! += (childOffset[crossSize] ?? 0) - (overlaySize[crossSize] ?? 0); | ||
}/* else { | ||
@@ -262,3 +261,3 @@ the overlay top should match the button top | ||
position[crossAxis] += crossOffset; | ||
position[crossAxis]! += crossOffset; | ||
@@ -269,3 +268,3 @@ // overlay top overlapping arrow with button bottom | ||
const maxPosition = childOffset[crossAxis] + childOffset[crossSize] - arrowSize - arrowBoundaryOffset; | ||
position[crossAxis] = clamp(position[crossAxis], minPosition, maxPosition); | ||
position[crossAxis] = clamp(position[crossAxis]!, minPosition, maxPosition); | ||
@@ -299,9 +298,9 @@ // 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. | ||
// used in computePosition. | ||
let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - position.bottom - overlayHeight); | ||
let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - (position.bottom ?? 0) - overlayHeight); | ||
let maxHeight = heightGrowthDirection !== 'top' ? | ||
// 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 | ||
(boundaryDimensions.height + boundaryDimensions.top + (boundaryDimensions.scroll.top ?? 0)) // this is the bottom of the boundary | ||
- overlayTop // this is the top of the overlay | ||
- (margins.top + margins.bottom + padding) // save additional space for margin and padding | ||
- ((margins.top ?? 0) + (margins.bottom ?? 0) + padding) // save additional space for margin and padding | ||
) | ||
@@ -311,4 +310,4 @@ // We want the distance between the bottom of the overlay to the top of the boundary | ||
(overlayTop + overlayHeight) // this is the bottom of the overlay | ||
- (boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the top of the boundary | ||
- (margins.top + margins.bottom + padding) // save additional space for margin and padding | ||
- (boundaryDimensions.top + (boundaryDimensions.scroll.top ?? 0)) // this is the top of the boundary | ||
- ((margins.top ?? 0) + (margins.bottom ?? 0) + padding) // save additional space for margin and padding | ||
); | ||
@@ -328,6 +327,6 @@ return Math.min(boundaryDimensions.height - (padding * 2), maxHeight); | ||
if (placement === axis) { | ||
return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - boundaryDimensions.scroll[axis] + containerOffsetWithBoundary[axis] - margins[axis] - margins[FLIPPED_DIRECTION[axis]] - padding); | ||
return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - (boundaryDimensions.scroll[axis] ?? 0) + containerOffsetWithBoundary[axis] - (margins[axis] ?? 0) - margins[FLIPPED_DIRECTION[axis]] - padding); | ||
} | ||
return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - margins[axis] - margins[FLIPPED_DIRECTION[axis]] - padding); | ||
return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - (margins[axis] ?? 0) - margins[FLIPPED_DIRECTION[axis]] - padding); | ||
} | ||
@@ -403,4 +402,4 @@ | ||
let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary); | ||
position[crossAxis] += delta; | ||
let delta = getDelta(crossAxis, position[crossAxis]!, overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary); | ||
position[crossAxis]! += delta; | ||
@@ -425,4 +424,4 @@ let maxHeight = getMaxHeight( | ||
position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset); | ||
delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary); | ||
position[crossAxis] += delta; | ||
delta = getDelta(crossAxis, position[crossAxis]!, overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary); | ||
position[crossAxis]! += delta; | ||
@@ -436,3 +435,3 @@ let arrowPosition: Position = {}; | ||
// is positioned after the margin of its parent (aka overlay) so we need to subtract it to get the proper coordinate transform | ||
let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - position[crossAxis] - margins[AXIS[crossAxis]]; | ||
let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - position[crossAxis]! - margins[AXIS[crossAxis]]; | ||
@@ -442,3 +441,3 @@ // Min/Max position limits for the arrow with respect to the overlay | ||
// overlaySize[crossSize] - margins = true size of the overlay | ||
const overlayMargin = AXIS[crossAxis] === 'left' ? margins.left + margins.right : margins.top + margins.bottom; | ||
const overlayMargin = AXIS[crossAxis] === 'left' ? (margins.left ?? 0) + (margins.right ?? 0) : (margins.top ?? 0) + (margins.bottom ?? 0); | ||
const arrowMaxPosition = overlaySize[crossSize] - overlayMargin - (arrowSize / 2) - arrowBoundaryOffset; | ||
@@ -497,4 +496,4 @@ | ||
let margins = getMargins(overlayNode); | ||
overlaySize.width += margins.left + margins.right; | ||
overlaySize.height += margins.top + margins.bottom; | ||
overlaySize.width += (margins.left ?? 0) + (margins.right ?? 0); | ||
overlaySize.height += (margins.top ?? 0) + (margins.bottom ?? 0); | ||
@@ -609,7 +608,5 @@ let scrollSize = getScroll(scrollNode); | ||
style.contain === 'paint' || | ||
// @ts-ignore | ||
('backdropFilter' in style && style.backdropFilter !== 'none') || | ||
// @ts-ignore | ||
('WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none') | ||
); | ||
} |
@@ -38,3 +38,3 @@ /* | ||
let onScroll = (e: MouseEvent) => { | ||
let onScroll = (e: Event) => { | ||
// Ignore if scrolling an scrollable region outside the trigger's tree. | ||
@@ -41,0 +41,0 @@ let target = e.target; |
@@ -60,3 +60,3 @@ /* | ||
useEffect(() => { | ||
if (state.isOpen) { | ||
if (state.isOpen && ref.current) { | ||
return ariaHideOutside([ref.current]); | ||
@@ -63,0 +63,0 @@ } |
@@ -123,3 +123,3 @@ /* | ||
// Handle clicking outside the overlay to close it | ||
useInteractOutside({ref, onInteractOutside: isDismissable && isOpen ? onInteractOutside : null, onInteractOutsideStart}); | ||
useInteractOutside({ref, onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined, onInteractOutsideStart}); | ||
@@ -143,3 +143,3 @@ let {focusWithinProps} = useFocusWithin({ | ||
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as Element)) { | ||
onClose(); | ||
onClose?.(); | ||
} | ||
@@ -146,0 +146,0 @@ } |
@@ -70,3 +70,3 @@ /* | ||
/** Placement of the overlay with respect to the overlay trigger. */ | ||
placement: PlacementAxis, | ||
placement: PlacementAxis | null, | ||
/** Updates the position of the overlay. */ | ||
@@ -81,4 +81,3 @@ updatePosition(): void | ||
// @ts-ignore | ||
let visualViewport = typeof document !== 'undefined' && window.visualViewport; | ||
let visualViewport = typeof document !== 'undefined' ? window.visualViewport : null; | ||
@@ -108,9 +107,3 @@ /** | ||
} = props; | ||
let [position, setPosition] = useState<PositionResult>({ | ||
position: {}, | ||
arrowOffsetLeft: undefined, | ||
arrowOffsetTop: undefined, | ||
maxHeight: undefined, | ||
placement: undefined | ||
}); | ||
let [position, setPosition] = useState<PositionResult | null>(null); | ||
@@ -160,3 +153,3 @@ let deps = [ | ||
if (scrollRef.current && scrollRef.current.contains(document.activeElement)) { | ||
let anchorRect = document.activeElement.getBoundingClientRect(); | ||
let anchorRect = document.activeElement?.getBoundingClientRect(); | ||
let scrollRect = scrollRef.current.getBoundingClientRect(); | ||
@@ -167,7 +160,7 @@ // Anchor from the top if the offset is in the top half of the scrollable element, | ||
type: 'top', | ||
offset: anchorRect.top - scrollRect.top | ||
offset: (anchorRect?.top ?? 0) - scrollRect.top | ||
}; | ||
if (anchor.offset > scrollRect.height / 2) { | ||
anchor.type = 'bottom'; | ||
anchor.offset = anchorRect.bottom - scrollRect.bottom; | ||
anchor.offset = (anchorRect?.bottom ?? 0) - scrollRect.bottom; | ||
} | ||
@@ -200,2 +193,6 @@ } | ||
if (!position.position) { | ||
return; | ||
} | ||
// Modify overlay styles directly so positioning happens immediately without the need of a second render | ||
@@ -208,7 +205,7 @@ // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers | ||
Object.keys(position.position).forEach(key => overlay.style[key] = position.position[key] + 'px'); | ||
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : undefined; | ||
Object.keys(position.position).forEach(key => overlay.style[key] = (position.position!)[key] + 'px'); | ||
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : ''; | ||
// Restore scroll position relative to anchor element. | ||
if (anchor) { | ||
if (anchor && document.activeElement && scrollRef.current) { | ||
let anchorRect = document.activeElement.getBoundingClientRect(); | ||
@@ -278,3 +275,3 @@ let scrollRect = scrollRef.current.getBoundingClientRect(); | ||
if (!isResizing.current) { | ||
onClose(); | ||
onClose?.(); | ||
} | ||
@@ -296,7 +293,7 @@ }, [onClose, isResizing]); | ||
zIndex: 100000, // should match the z-index in ModalTrigger | ||
...position.position, | ||
maxHeight: position.maxHeight ?? '100vh' | ||
...position?.position, | ||
maxHeight: position?.maxHeight ?? '100vh' | ||
} | ||
}, | ||
placement: position.placement, | ||
placement: position?.placement ?? null, | ||
arrowProps: { | ||
@@ -306,4 +303,4 @@ 'aria-hidden': 'true', | ||
style: { | ||
left: position.arrowOffsetLeft, | ||
top: position.arrowOffsetTop | ||
left: position?.arrowOffsetLeft, | ||
top: position?.arrowOffsetTop | ||
} | ||
@@ -310,0 +307,0 @@ }, |
@@ -53,3 +53,3 @@ /* | ||
// announce it as a menu even for other values. | ||
let ariaHasPopup = undefined; | ||
let ariaHasPopup: undefined | boolean | 'listbox' = undefined; | ||
if (type === 'menu') { | ||
@@ -66,3 +66,3 @@ ariaHasPopup = true; | ||
'aria-expanded': isOpen, | ||
'aria-controls': isOpen ? overlayId : null, | ||
'aria-controls': isOpen ? overlayId : undefined, | ||
onPress: state.toggle | ||
@@ -69,0 +69,0 @@ }, |
@@ -66,3 +66,3 @@ /* | ||
/** Placement of the popover with respect to the trigger. */ | ||
placement: PlacementAxis | ||
placement: PlacementAxis | null | ||
} | ||
@@ -86,3 +86,4 @@ | ||
{ | ||
isOpen: state.isOpen, | ||
// If popover is in the top layer, it should not prevent other popovers from being dismissed. | ||
isOpen: state.isOpen && !otherProps['data-react-aria-top-layer'], | ||
onClose: state.close, | ||
@@ -102,3 +103,3 @@ shouldCloseOnBlur: true, | ||
isOpen: state.isOpen, | ||
onClose: isNonModal ? state.close : null | ||
onClose: isNonModal ? state.close : undefined | ||
}); | ||
@@ -105,0 +106,0 @@ |
@@ -20,3 +20,2 @@ /* | ||
// @ts-ignore | ||
const visualViewport = typeof document !== 'undefined' && window.visualViewport; | ||
@@ -144,20 +143,3 @@ | ||
let onTouchEnd = (e: TouchEvent) => { | ||
let target = e.target as HTMLElement; | ||
// Apply this change if we're not already focused on the target element | ||
if (willOpenKeyboard(target) && target !== document.activeElement) { | ||
e.preventDefault(); | ||
setupStyles(); | ||
// 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 onTouchEnd = () => { | ||
if (restoreScrollableStyles) { | ||
@@ -173,6 +155,4 @@ restoreScrollableStyles(); | ||
// 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. 🤷♂️ | ||
// 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. | ||
target.style.transform = 'translateY(-2000px)'; | ||
@@ -201,3 +181,3 @@ requestAnimationFrame(() => { | ||
let restoreStyles = null; | ||
let restoreStyles: null | (() => void) = null; | ||
let setupStyles = () => { | ||
@@ -261,9 +241,12 @@ if (restoreStyles) { | ||
function addEvent<K extends keyof GlobalEventHandlersEventMap>( | ||
target: EventTarget, | ||
target: Document | Window, | ||
event: K, | ||
handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any, | ||
handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => any, | ||
options?: boolean | AddEventListenerOptions | ||
) { | ||
// internal function, so it's ok to ignore the difficult to fix type error | ||
// @ts-ignore | ||
target.addEventListener(event, handler, options); | ||
return () => { | ||
// @ts-ignore | ||
target.removeEventListener(event, handler, options); | ||
@@ -275,9 +258,10 @@ }; | ||
let root = document.scrollingElement || document.documentElement; | ||
while (target && target !== root) { | ||
let nextTarget: Element | null = target; | ||
while (nextTarget && nextTarget !== root) { | ||
// 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 && scrollable !== target) { | ||
let scrollable = getScrollParent(nextTarget); | ||
if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) { | ||
let scrollableTop = scrollable.getBoundingClientRect().top; | ||
let targetTop = target.getBoundingClientRect().top; | ||
if (targetTop > scrollableTop + target.clientHeight) { | ||
let targetTop = nextTarget.getBoundingClientRect().top; | ||
if (targetTop > scrollableTop + nextTarget.clientHeight) { | ||
scrollable.scrollTop += targetTop - scrollableTop; | ||
@@ -287,3 +271,3 @@ } | ||
target = scrollable.parentElement; | ||
nextTarget = scrollable.parentElement; | ||
} | ||
@@ -290,0 +274,0 @@ } |
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
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
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
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
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
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
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
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
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
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
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
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
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
654126
7411
+ Added@internationalized/date@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@internationalized/message@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@internationalized/number@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@internationalized/string@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-aria/focus@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-aria/i18n@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-aria/interactions@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-aria/ssr@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-aria/utils@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-aria/visually-hidden@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-stately/overlays@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-stately/utils@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-types/button@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-types/overlays@3.0.0-nightly-50c7ada5d-241219(transitive)
+ Added@react-types/shared@3.0.0-nightly-50c7ada5d-241219(transitive)
- Removed@internationalized/date@3.6.0(transitive)
- Removed@internationalized/message@3.1.6(transitive)
- Removed@internationalized/number@3.6.0(transitive)
- Removed@internationalized/string@3.2.5(transitive)
- Removed@react-aria/focus@3.19.0(transitive)
- Removed@react-aria/i18n@3.12.4(transitive)
- Removed@react-aria/interactions@3.22.5(transitive)
- Removed@react-aria/ssr@3.9.7(transitive)
- Removed@react-aria/utils@3.26.0(transitive)
- Removed@react-aria/visually-hidden@3.8.18(transitive)
- Removed@react-stately/overlays@3.6.12(transitive)
- Removed@react-stately/utils@3.10.5(transitive)
- Removed@react-types/button@3.10.1(transitive)
- Removed@react-types/overlays@3.8.11(transitive)
- Removed@react-types/shared@3.26.0(transitive)
Updated@react-aria/interactions@3.0.0-nightly-50c7ada5d-241219
Updated@react-aria/visually-hidden@3.0.0-nightly-50c7ada5d-241219
Updated@react-stately/overlays@3.0.0-nightly-50c7ada5d-241219