@react-aria/overlays
Advanced tools
Comparing version 3.0.0-nightly.677 to 3.0.0-nightly.680
@@ -297,2 +297,43 @@ var { | ||
// This behavior moved from useOverlayTrigger to useOverlayPosition. | ||
// For backward compatibility, where useOverlayTrigger handled hiding the popover on close, | ||
// it sets a close function here mapped from the trigger element. This way we can avoid | ||
// forcing users to pass an onClose function to useOverlayPosition which could be considered | ||
// a breaking change. | ||
const $ceea668dd9ec3b754bdc10a8bbb8$export$onCloseMap = new WeakMap(); | ||
/** @private */ | ||
function $ceea668dd9ec3b754bdc10a8bbb8$export$useCloseOnScroll(opts) { | ||
let { | ||
triggerRef, | ||
isOpen, | ||
onClose | ||
} = opts; | ||
useEffect(() => { | ||
if (!isOpen) { | ||
return; | ||
} | ||
let onScroll = e => { | ||
// Ignore if scrolling an scrollable region outside the trigger's tree. | ||
let target = e.target; | ||
if (!triggerRef.current || !target.contains(triggerRef.current)) { | ||
return; | ||
} | ||
let onCloseHandler = onClose || $ceea668dd9ec3b754bdc10a8bbb8$export$onCloseMap.get(triggerRef.current); | ||
if (onCloseHandler) { | ||
onCloseHandler(); | ||
} | ||
}; | ||
window.addEventListener('scroll', onScroll, true); | ||
return () => { | ||
window.removeEventListener('scroll', onScroll, true); | ||
}; | ||
}, [isOpen, onClose, triggerRef]); | ||
} | ||
/** | ||
@@ -317,3 +358,4 @@ * Handles positioning overlays like popovers and menus relative to a trigger | ||
shouldUpdatePosition = true, | ||
isOpen = true | ||
isOpen = true, | ||
onClose | ||
} = props; | ||
@@ -348,3 +390,10 @@ let [position, setPosition] = useState({ | ||
$adfbd034e9bc71c1$var$useResize(updatePosition); | ||
$adfbd034e9bc71c1$var$useResize(updatePosition); // When scrolling a parent scrollable region of the trigger (other than the body), | ||
// we hide the popover. Otherwise, its position would be incorrect. | ||
$ceea668dd9ec3b754bdc10a8bbb8$export$useCloseOnScroll({ | ||
triggerRef: targetRef, | ||
isOpen, | ||
onClose | ||
}); | ||
return { | ||
@@ -474,26 +523,10 @@ overlayProps: { | ||
isOpen | ||
} = state; // When scrolling a parent scrollable region of the trigger (other than the body), | ||
// we hide the popover. Otherwise, its position would be incorrect. | ||
} = state; // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll | ||
// without forcing users to pass onClose. | ||
useEffect(() => { | ||
if (!isOpen) { | ||
return; | ||
if (ref.current) { | ||
$ceea668dd9ec3b754bdc10a8bbb8$export$onCloseMap.set(ref.current, state.close); | ||
} | ||
let onScroll = e => { | ||
// Ignore if scrolling an scrollable region outside the trigger's tree. | ||
let target = e.target; | ||
if (!ref.current || !target.contains(ref.current)) { | ||
return; | ||
} | ||
state.close(); | ||
}; | ||
window.addEventListener('scroll', onScroll, true); | ||
return () => { | ||
window.removeEventListener('scroll', onScroll, true); | ||
}; | ||
}, [isOpen, ref]); // Aria 1.1 supports multiple values for aria-haspopup other than just menus. | ||
}); // Aria 1.1 supports multiple values for aria-haspopup other than just menus. | ||
// https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup | ||
@@ -500,0 +533,0 @@ // However, we only add it for menus for now because screen readers often |
@@ -260,2 +260,43 @@ import { VisuallyHidden } from "@react-aria/visually-hidden"; | ||
// This behavior moved from useOverlayTrigger to useOverlayPosition. | ||
// For backward compatibility, where useOverlayTrigger handled hiding the popover on close, | ||
// it sets a close function here mapped from the trigger element. This way we can avoid | ||
// forcing users to pass an onClose function to useOverlayPosition which could be considered | ||
// a breaking change. | ||
const $df1b2f080f58bf9e74aeb666b8c96ba$export$onCloseMap = new WeakMap(); | ||
/** @private */ | ||
function $df1b2f080f58bf9e74aeb666b8c96ba$export$useCloseOnScroll(opts) { | ||
let { | ||
triggerRef, | ||
isOpen, | ||
onClose | ||
} = opts; | ||
useEffect(() => { | ||
if (!isOpen) { | ||
return; | ||
} | ||
let onScroll = e => { | ||
// Ignore if scrolling an scrollable region outside the trigger's tree. | ||
let target = e.target; | ||
if (!triggerRef.current || !target.contains(triggerRef.current)) { | ||
return; | ||
} | ||
let onCloseHandler = onClose || $df1b2f080f58bf9e74aeb666b8c96ba$export$onCloseMap.get(triggerRef.current); | ||
if (onCloseHandler) { | ||
onCloseHandler(); | ||
} | ||
}; | ||
window.addEventListener('scroll', onScroll, true); | ||
return () => { | ||
window.removeEventListener('scroll', onScroll, true); | ||
}; | ||
}, [isOpen, onClose, triggerRef]); | ||
} | ||
/** | ||
@@ -280,3 +321,4 @@ * Handles positioning overlays like popovers and menus relative to a trigger | ||
shouldUpdatePosition = true, | ||
isOpen = true | ||
isOpen = true, | ||
onClose | ||
} = props; | ||
@@ -311,3 +353,10 @@ let [position, setPosition] = useState({ | ||
$ae841ee9d3f76b31663cf0594adb0fc$var$useResize(updatePosition); | ||
$ae841ee9d3f76b31663cf0594adb0fc$var$useResize(updatePosition); // When scrolling a parent scrollable region of the trigger (other than the body), | ||
// we hide the popover. Otherwise, its position would be incorrect. | ||
$df1b2f080f58bf9e74aeb666b8c96ba$export$useCloseOnScroll({ | ||
triggerRef: targetRef, | ||
isOpen, | ||
onClose | ||
}); | ||
return { | ||
@@ -433,26 +482,10 @@ overlayProps: { | ||
isOpen | ||
} = state; // When scrolling a parent scrollable region of the trigger (other than the body), | ||
// we hide the popover. Otherwise, its position would be incorrect. | ||
} = state; // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll | ||
// without forcing users to pass onClose. | ||
useEffect(() => { | ||
if (!isOpen) { | ||
return; | ||
if (ref.current) { | ||
$df1b2f080f58bf9e74aeb666b8c96ba$export$onCloseMap.set(ref.current, state.close); | ||
} | ||
let onScroll = e => { | ||
// Ignore if scrolling an scrollable region outside the trigger's tree. | ||
let target = e.target; | ||
if (!ref.current || !target.contains(ref.current)) { | ||
return; | ||
} | ||
state.close(); | ||
}; | ||
window.addEventListener('scroll', onScroll, true); | ||
return () => { | ||
window.removeEventListener('scroll', onScroll, true); | ||
}; | ||
}, [isOpen, ref]); // Aria 1.1 supports multiple values for aria-haspopup other than just menus. | ||
}); // Aria 1.1 supports multiple values for aria-haspopup other than just menus. | ||
// https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup | ||
@@ -459,0 +492,0 @@ // However, we only add it for menus for now because screen readers often |
@@ -29,2 +29,4 @@ import React, { HTMLAttributes, RefObject, AriaAttributes, ReactNode } from "react"; | ||
shouldUpdatePosition?: boolean; | ||
/** Handler that is called when the overlay should close. */ | ||
onClose?: () => void; | ||
} | ||
@@ -31,0 +33,0 @@ interface PositionAria { |
{ | ||
"name": "@react-aria/overlays", | ||
"version": "3.0.0-nightly.677+63f8d9f8", | ||
"version": "3.0.0-nightly.680+3ee5685e", | ||
"description": "Spectrum UI components in React", | ||
@@ -21,9 +21,9 @@ "license": "Apache-2.0", | ||
"@babel/runtime": "^7.6.2", | ||
"@react-aria/i18n": "3.0.0-nightly.677+63f8d9f8", | ||
"@react-aria/interactions": "3.0.0-nightly.677+63f8d9f8", | ||
"@react-aria/utils": "3.0.0-nightly.677+63f8d9f8", | ||
"@react-aria/visually-hidden": "3.0.0-nightly.677+63f8d9f8", | ||
"@react-stately/overlays": "3.1.1-nightly.2355+63f8d9f8", | ||
"@react-types/button": "3.2.1-nightly.2355+63f8d9f8", | ||
"@react-types/overlays": "3.2.1-nightly.2355+63f8d9f8", | ||
"@react-aria/i18n": "3.0.0-nightly.680+3ee5685e", | ||
"@react-aria/interactions": "3.0.0-nightly.680+3ee5685e", | ||
"@react-aria/utils": "3.0.0-nightly.680+3ee5685e", | ||
"@react-aria/visually-hidden": "3.0.0-nightly.680+3ee5685e", | ||
"@react-stately/overlays": "3.1.1-nightly.2358+3ee5685e", | ||
"@react-types/button": "3.2.1-nightly.2358+3ee5685e", | ||
"@react-types/overlays": "3.2.1-nightly.2358+3ee5685e", | ||
"dom-helpers": "^3.3.1" | ||
@@ -38,3 +38,3 @@ }, | ||
}, | ||
"gitHead": "63f8d9f8fcca05aeec4711d3568f0ddd684c748a" | ||
"gitHead": "3ee5685e293447fb1995ddec4c70b56c8e3aaa8e" | ||
} |
@@ -16,2 +16,3 @@ /* | ||
import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays'; | ||
import {useCloseOnScroll} from './useCloseOnScroll'; | ||
import {useLocale} from '@react-aria/i18n'; | ||
@@ -42,3 +43,5 @@ | ||
*/ | ||
shouldUpdatePosition?: boolean | ||
shouldUpdatePosition?: boolean, | ||
/** Handler that is called when the overlay should close. */ | ||
onClose?: () => void | ||
} | ||
@@ -74,3 +77,4 @@ | ||
shouldUpdatePosition = true, | ||
isOpen = true | ||
isOpen = true, | ||
onClose | ||
} = props; | ||
@@ -126,2 +130,10 @@ let [position, setPosition] = useState<PositionResult>({ | ||
// When scrolling a parent scrollable region of the trigger (other than the body), | ||
// we hide the popover. Otherwise, its position would be incorrect. | ||
useCloseOnScroll({ | ||
triggerRef: targetRef, | ||
isOpen, | ||
onClose | ||
}); | ||
return { | ||
@@ -128,0 +140,0 @@ overlayProps: { |
@@ -15,2 +15,3 @@ /* | ||
import {HTMLAttributes, RefObject, useEffect} from 'react'; | ||
import {onCloseMap} from './useCloseOnScroll'; | ||
import {OverlayTriggerState} from '@react-stately/overlays'; | ||
@@ -40,25 +41,10 @@ import {useId} from '@react-aria/utils'; | ||
// When scrolling a parent scrollable region of the trigger (other than the body), | ||
// we hide the popover. Otherwise, its position would be incorrect. | ||
// Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll | ||
// without forcing users to pass onClose. | ||
useEffect(() => { | ||
if (!isOpen) { | ||
return; | ||
if (ref.current) { | ||
onCloseMap.set(ref.current, state.close); | ||
} | ||
}); | ||
let onScroll = (e: MouseEvent) => { | ||
// Ignore if scrolling an scrollable region outside the trigger's tree. | ||
let target = e.target as HTMLElement; | ||
if (!ref.current || !target.contains(ref.current)) { | ||
return; | ||
} | ||
state.close(); | ||
}; | ||
window.addEventListener('scroll', onScroll, true); | ||
return () => { | ||
window.removeEventListener('scroll', onScroll, true); | ||
}; | ||
}, [isOpen, ref]); | ||
// Aria 1.1 supports multiple values for aria-haspopup other than just menus. | ||
@@ -65,0 +51,0 @@ // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup |
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
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
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
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
249216
18
2603