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

@react-aria/interactions

Package Overview
Dependencies
Maintainers
1
Versions
804
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-aria/interactions - npm Package Compare versions

Comparing version 3.0.0-rc.2 to 3.0.0-rc.3

dist/main.js.map
dist/module.js.map

828

dist/main.js

@@ -1,10 +0,3 @@

var _babelRuntimeHelpersSlicedToArray = $parcel$interopDefault(require("@babel/runtime/helpers/slicedToArray"));
var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
var _babelRuntimeHelpersObjectWithoutProperties = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _temp = require("@react-aria/utils");
var focusWithoutScrolling = _temp.focusWithoutScrolling;
var mergeProps = _temp.mergeProps;
var _react2 = require("react");

@@ -14,10 +7,17 @@

var useContext = _react2.useContext;
var useEffect = _react2.useEffect;
var useMemo = _react2.useMemo;
var useRef = _react2.useRef;
var useState = _react2.useState;
var {
useContext,
useEffect,
useMemo,
useRef,
useState
} = _react2;
var _babelRuntimeHelpersObjectSpread = $parcel$interopDefault(require("@babel/runtime/helpers/objectSpread2"));
var {
focusWithoutScrolling,
mergeProps
} = require("@react-aria/utils");
var _babelRuntimeHelpersObjectWithoutPropertiesLoose = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
function $parcel$interopDefault(a) {

@@ -27,13 +27,15 @@ return a && a.__esModule ? a.default : a;

var $f0c946772fda863393a370b793f7614$export$PressResponderContext = _react.createContext(null);
const $c6b6d42ec461c27a6a09002bf49a250e$export$PressResponderContext = _react.createContext(null);
$f0c946772fda863393a370b793f7614$export$PressResponderContext.displayName = 'PressResponderContext';
$c6b6d42ec461c27a6a09002bf49a250e$export$PressResponderContext.displayName = 'PressResponderContext';
function $d96e234a33d0fc61c9867cbf1a711$var$usePressResponderContext(props) {
function $ed8d760564e19d8c7d03a6a4$var$usePressResponderContext(props) {
// Consume context from <PressResponder> and merge with props.
var context = useContext($f0c946772fda863393a370b793f7614$export$PressResponderContext);
let context = useContext($c6b6d42ec461c27a6a09002bf49a250e$export$PressResponderContext);
if (context) {
var register = context.register,
contextProps = _babelRuntimeHelpersObjectWithoutProperties(context, ["register"]);
let {
register
} = context,
contextProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(context, ["register"]);

@@ -45,6 +47,6 @@ props = mergeProps(contextProps, props);

useEffect(function () {
useEffect(() => {
if (context && context.ref) {
context.ref.current = props.ref.current;
return function () {
return () => {
context.ref.current = null;

@@ -56,21 +58,24 @@ };

}
/**
* Handles press interactions across mouse, touch, keyboard, and screen readers.
* It normalizes behavior across browsers and platforms, and handles many nuances
* of dealing with pointer and keyboard events.
*/
function usePress(props) {
var _usePressResponderCon = $d96e234a33d0fc61c9867cbf1a711$var$usePressResponderContext(props),
onPress = _usePressResponderCon.onPress,
onPressChange = _usePressResponderCon.onPressChange,
onPressStart = _usePressResponderCon.onPressStart,
onPressEnd = _usePressResponderCon.onPressEnd,
onPressUp = _usePressResponderCon.onPressUp,
isDisabled = _usePressResponderCon.isDisabled,
isPressedProp = _usePressResponderCon.isPressed,
_ = _usePressResponderCon.ref,
domProps = _babelRuntimeHelpersObjectWithoutProperties(_usePressResponderCon, ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "ref"]);
let _usePressResponderCon = $ed8d760564e19d8c7d03a6a4$var$usePressResponderContext(props),
{
onPress,
onPressChange,
onPressStart,
onPressEnd,
onPressUp,
isDisabled,
isPressed: isPressedProp
} = _usePressResponderCon,
domProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(_usePressResponderCon, ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "ref"]);
var _useState = useState(false),
_useState2 = _babelRuntimeHelpersSlicedToArray(_useState, 2),
isPressed = _useState2[0],
setPressed = _useState2[1];
var ref = useRef({
let [isPressed, setPressed] = useState(false);
let ref = useRef({
isPressed: false,

@@ -83,6 +88,6 @@ ignoreEmulatedMouseEvents: false,

});
var pressProps = useMemo(function () {
var state = ref.current;
let pressProps = useMemo(() => {
let state = ref.current;
var triggerPressStart = function triggerPressStart(originalEvent, pointerType) {
let triggerPressStart = (originalEvent, pointerType) => {
if (isDisabled) {

@@ -95,3 +100,3 @@ return;

type: 'pressstart',
pointerType: pointerType,
pointerType,
target: originalEvent.currentTarget,

@@ -111,4 +116,6 @@ shiftKey: originalEvent.shiftKey,

var triggerPressEnd = function triggerPressEnd(originalEvent, pointerType) {
var wasPressed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
let triggerPressEnd = function triggerPressEnd(originalEvent, pointerType, wasPressed) {
if (wasPressed === void 0) {
wasPressed = true;
}

@@ -124,3 +131,3 @@ if (isDisabled) {

type: 'pressend',
pointerType: pointerType,
pointerType,
target: originalEvent.currentTarget,

@@ -142,3 +149,3 @@ shiftKey: originalEvent.shiftKey,

type: 'press',
pointerType: pointerType,
pointerType,
target: originalEvent.currentTarget,

@@ -152,3 +159,3 @@ shiftKey: originalEvent.shiftKey,

var triggerPressUp = function triggerPressUp(originalEvent, pointerType) {
let triggerPressUp = (originalEvent, pointerType) => {
if (isDisabled) {

@@ -161,3 +168,3 @@ return;

type: 'pressup',
pointerType: pointerType,
pointerType,
target: originalEvent.currentTarget,

@@ -171,5 +178,5 @@ shiftKey: originalEvent.shiftKey,

var pressProps = {
onKeyDown: function onKeyDown(e) {
if ($d96e234a33d0fc61c9867cbf1a711$var$isValidKeyboardEvent(e.nativeEvent)) {
let pressProps = {
onKeyDown(e) {
if ($ed8d760564e19d8c7d03a6a4$var$isValidKeyboardEvent(e.nativeEvent)) {
e.preventDefault();

@@ -190,8 +197,10 @@ e.stopPropagation(); // If the event is repeating, it may have started on a different element

},
onKeyUp: function onKeyUp(e) {
if ($d96e234a33d0fc61c9867cbf1a711$var$isValidKeyboardEvent(e.nativeEvent) && !e.repeat) {
triggerPressUp($d96e234a33d0fc61c9867cbf1a711$var$createEvent(state.target, e), 'keyboard');
onKeyUp(e) {
if ($ed8d760564e19d8c7d03a6a4$var$isValidKeyboardEvent(e.nativeEvent) && !e.repeat) {
triggerPressUp($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), 'keyboard');
}
},
onClick: function onClick(e) {
onClick(e) {
if (e && e.button === 0) {

@@ -206,3 +215,3 @@ e.stopPropagation();

if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && $d96e234a33d0fc61c9867cbf1a711$var$isVirtualClick(e.nativeEvent)) {
if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && $ed8d760564e19d8c7d03a6a4$var$isVirtualClick(e.nativeEvent)) {
// Ensure the element receives focus (VoiceOver on iOS does not do this)

@@ -222,14 +231,15 @@ if (!isDisabled) {

}
};
var onKeyUp = function onKeyUp(e) {
if (state.isPressed && $d96e234a33d0fc61c9867cbf1a711$var$isValidKeyboardEvent(e)) {
let onKeyUp = e => {
if (state.isPressed && $ed8d760564e19d8c7d03a6a4$var$isValidKeyboardEvent(e)) {
e.preventDefault();
e.stopPropagation();
state.isPressed = false;
triggerPressEnd($d96e234a33d0fc61c9867cbf1a711$var$createEvent(state.target, e), 'keyboard', e.target === state.target);
triggerPressEnd($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), 'keyboard', e.target === state.target);
document.removeEventListener('keyup', onKeyUp, false); // If the target is a link, trigger the click method to open the URL,
// but defer triggering pressEnd until onClick event handler.
if (e.target === state.target && $d96e234a33d0fc61c9867cbf1a711$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
if (e.target === state.target && $ed8d760564e19d8c7d03a6a4$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
state.target.click();

@@ -244,3 +254,3 @@ }

var disableTextSelection = function disableTextSelection() {
let disableTextSelection = () => {
state.userSelect = document.documentElement.style.webkitUserSelect;

@@ -250,6 +260,6 @@ document.documentElement.style.webkitUserSelect = 'none';

var restoreTextSelection = function restoreTextSelection() {
// There appears to be a delay on iOS where selection still might occur
let restoreTextSelection = () => {
// There appears to be a delay on iOS where selection still might occur
// after pointer up, so wait a bit before removing user-select.
setTimeout(function () {
setTimeout(() => {
// Avoid race conditions

@@ -264,3 +274,3 @@ if (!state.isPressed && document.documentElement.style.webkitUserSelect === 'none') {

if (typeof PointerEvent !== 'undefined') {
pressProps.onPointerDown = function (e) {
pressProps.onPointerDown = e => {
// Only handle left clicks

@@ -294,3 +304,3 @@ if (e.button !== 0) {

pressProps.onMouseDown = function (e) {
pressProps.onMouseDown = e => {
if (e.button === 0) {

@@ -304,3 +314,3 @@ // Chrome and Firefox on touch Windows devices require mouse down events

var unbindEvents = function unbindEvents() {
let unbindEvents = () => {
document.removeEventListener('pointermove', onPointerMove, false);

@@ -311,7 +321,7 @@ document.removeEventListener('pointerup', onPointerUp, false);

pressProps.onPointerUp = function (e) {
pressProps.onPointerUp = e => {
// Only handle left clicks
// Safari on iOS sometimes fires pointerup events, even
// when the touch isn't over the target, so double check.
if (e.button === 0 && $d96e234a33d0fc61c9867cbf1a711$var$isOverTarget(e, e.currentTarget)) {
if (e.button === 0 && $ed8d760564e19d8c7d03a6a4$var$isOverTarget(e, e.currentTarget)) {
triggerPressUp(e, e.pointerType);

@@ -324,3 +334,3 @@ }

var onPointerMove = function onPointerMove(e) {
let onPointerMove = e => {
if (e.pointerId !== state.activePointerId) {

@@ -330,19 +340,19 @@ return;

if ($d96e234a33d0fc61c9867cbf1a711$var$isOverTarget(e, state.target)) {
if ($ed8d760564e19d8c7d03a6a4$var$isOverTarget(e, state.target)) {
if (!state.isOverTarget) {
state.isOverTarget = true;
triggerPressStart($d96e234a33d0fc61c9867cbf1a711$var$createEvent(state.target, e), e.pointerType);
triggerPressStart($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), e.pointerType);
}
} else if (state.isOverTarget) {
state.isOverTarget = false;
triggerPressEnd($d96e234a33d0fc61c9867cbf1a711$var$createEvent(state.target, e), e.pointerType, false);
triggerPressEnd($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), e.pointerType, false);
}
};
var onPointerUp = function onPointerUp(e) {
let onPointerUp = e => {
if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0) {
if ($d96e234a33d0fc61c9867cbf1a711$var$isOverTarget(e, state.target)) {
triggerPressEnd($d96e234a33d0fc61c9867cbf1a711$var$createEvent(state.target, e), e.pointerType);
if ($ed8d760564e19d8c7d03a6a4$var$isOverTarget(e, state.target)) {
triggerPressEnd($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), e.pointerType);
} else if (state.isOverTarget) {
triggerPressEnd($d96e234a33d0fc61c9867cbf1a711$var$createEvent(state.target, e), e.pointerType, false);
triggerPressEnd($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), e.pointerType, false);
}

@@ -358,6 +368,6 @@

var onPointerCancel = function onPointerCancel(e) {
let onPointerCancel = e => {
if (state.isPressed) {
if (state.isOverTarget) {
triggerPressEnd($d96e234a33d0fc61c9867cbf1a711$var$createEvent(state.target, e), e.pointerType, false);
triggerPressEnd($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), e.pointerType, false);
}

@@ -373,3 +383,3 @@

} else {
pressProps.onMouseDown = function (e) {
pressProps.onMouseDown = e => {
// Only handle left clicks

@@ -397,7 +407,7 @@ if (e.button !== 0) {

triggerPressStart(e, 'mouse');
triggerPressStart(e, $ed8d760564e19d8c7d03a6a4$var$isVirtualClick(e.nativeEvent) ? 'virtual' : 'mouse');
document.addEventListener('mouseup', onMouseUp, false);
};
pressProps.onMouseEnter = function (e) {
pressProps.onMouseEnter = e => {
e.stopPropagation();

@@ -411,3 +421,3 @@

pressProps.onMouseLeave = function (e) {
pressProps.onMouseLeave = e => {
e.stopPropagation();

@@ -421,9 +431,9 @@

pressProps.onMouseUp = function (e) {
pressProps.onMouseUp = e => {
if (!state.ignoreEmulatedMouseEvents && e.button === 0) {
triggerPressUp(e, 'mouse');
triggerPressUp(e, $ed8d760564e19d8c7d03a6a4$var$isVirtualClick(e.nativeEvent) ? 'virtual' : 'mouse');
}
};
var onMouseUp = function onMouseUp(e) {
let onMouseUp = e => {
// Only handle left clicks

@@ -442,6 +452,8 @@ if (e.button !== 0) {

if ($d96e234a33d0fc61c9867cbf1a711$var$isOverTarget(e, state.target)) {
triggerPressEnd($d96e234a33d0fc61c9867cbf1a711$var$createEvent(state.target, e), 'mouse');
let pointerType = $ed8d760564e19d8c7d03a6a4$var$isVirtualClick(e) ? 'virtual' : 'mouse';
if ($ed8d760564e19d8c7d03a6a4$var$isOverTarget(e, state.target)) {
triggerPressEnd($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), pointerType);
} else if (state.isOverTarget) {
triggerPressEnd($d96e234a33d0fc61c9867cbf1a711$var$createEvent(state.target, e), 'mouse', false);
triggerPressEnd($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), pointerType, false);
}

@@ -452,5 +464,5 @@

pressProps.onTouchStart = function (e) {
pressProps.onTouchStart = e => {
e.stopPropagation();
var touch = $d96e234a33d0fc61c9867cbf1a711$var$getTouchFromEvent(e.nativeEvent);
let touch = $ed8d760564e19d8c7d03a6a4$var$getTouchFromEvent(e.nativeEvent);

@@ -477,3 +489,3 @@ if (!touch) {

pressProps.onTouchMove = function (e) {
pressProps.onTouchMove = e => {
e.stopPropagation();

@@ -485,5 +497,5 @@

var touch = $d96e234a33d0fc61c9867cbf1a711$var$getTouchById(e.nativeEvent, state.activePointerId);
let touch = $ed8d760564e19d8c7d03a6a4$var$getTouchById(e.nativeEvent, state.activePointerId);
if (touch && $d96e234a33d0fc61c9867cbf1a711$var$isOverTarget(touch, e.currentTarget)) {
if (touch && $ed8d760564e19d8c7d03a6a4$var$isOverTarget(touch, e.currentTarget)) {
if (!state.isOverTarget) {

@@ -499,3 +511,3 @@ state.isOverTarget = true;

pressProps.onTouchEnd = function (e) {
pressProps.onTouchEnd = e => {
e.stopPropagation();

@@ -507,5 +519,5 @@

var touch = $d96e234a33d0fc61c9867cbf1a711$var$getTouchById(e.nativeEvent, state.activePointerId);
let touch = $ed8d760564e19d8c7d03a6a4$var$getTouchById(e.nativeEvent, state.activePointerId);
if (touch && $d96e234a33d0fc61c9867cbf1a711$var$isOverTarget(touch, e.currentTarget)) {
if (touch && $ed8d760564e19d8c7d03a6a4$var$isOverTarget(touch, e.currentTarget)) {
triggerPressUp(e, 'touch');

@@ -525,3 +537,3 @@ triggerPressEnd(e, 'touch');

pressProps.onTouchCancel = function (e) {
pressProps.onTouchCancel = e => {
e.stopPropagation();

@@ -534,3 +546,3 @@

var onScroll = function onScroll(e) {
let onScroll = e => {
if (state.isPressed && e.target.contains(state.target)) {

@@ -546,3 +558,3 @@ cancelTouchEvent({

var cancelTouchEvent = function cancelTouchEvent(e, pointerType) {
let cancelTouchEvent = (e, pointerType) => {
if (state.isOverTarget) {

@@ -570,13 +582,17 @@ triggerPressEnd(e, pointerType, false);

function $d96e234a33d0fc61c9867cbf1a711$var$isHTMLAnchorLink(target) {
function $ed8d760564e19d8c7d03a6a4$var$isHTMLAnchorLink(target) {
return target.tagName === 'A' && target.hasAttribute('href');
}
function $d96e234a33d0fc61c9867cbf1a711$var$isValidKeyboardEvent(event) {
var key = event.key,
target = event.target;
var element = target;
var tagName = element.tagName,
isContentEditable = element.isContentEditable;
var role = element.getAttribute('role'); // Accessibility for keyboards. Space and Enter only.
function $ed8d760564e19d8c7d03a6a4$var$isValidKeyboardEvent(event) {
const {
key,
target
} = event;
const element = target;
const {
tagName,
isContentEditable
} = element;
const role = element.getAttribute('role'); // Accessibility for keyboards. Space and Enter only.
// "Spacebar" is for IE 11

@@ -586,3 +602,3 @@

// unless it also has role='button' and was triggered using Space.
!$d96e234a33d0fc61c9867cbf1a711$var$isHTMLAnchorLink(element) || role === 'button' && key !== 'Enter') && // An element with role='link' should only trigger with Enter key
!$ed8d760564e19d8c7d03a6a4$var$isHTMLAnchorLink(element) || role === 'button' && key !== 'Enter') && // An element with role='link' should only trigger with Enter key
!(role === 'link' && key !== 'Enter');

@@ -598,3 +614,3 @@ } // Per: https://github.com/facebook/react/blob/3c713d513195a53788b3f8bb4b70279d68b15bcc/packages/react-interactions/events/src/dom/shared/index.js#L74-L87

function $d96e234a33d0fc61c9867cbf1a711$var$isVirtualClick(event) {
function $ed8d760564e19d8c7d03a6a4$var$isVirtualClick(event) {
// JAWS/NVDA with Firefox.

@@ -608,4 +624,6 @@ if (event.mozInputSource === 0 && event.isTrusted) {

function $d96e234a33d0fc61c9867cbf1a711$var$getTouchFromEvent(event) {
var targetTouches = event.targetTouches;
function $ed8d760564e19d8c7d03a6a4$var$getTouchFromEvent(event) {
const {
targetTouches
} = event;

@@ -619,7 +637,7 @@ if (targetTouches.length > 0) {

function $d96e234a33d0fc61c9867cbf1a711$var$getTouchById(event, pointerId) {
var changedTouches = event.changedTouches;
function $ed8d760564e19d8c7d03a6a4$var$getTouchById(event, pointerId) {
const changedTouches = event.changedTouches;
for (var i = 0; i < changedTouches.length; i++) {
var touch = changedTouches[i];
for (let i = 0; i < changedTouches.length; i++) {
const touch = changedTouches[i];

@@ -634,3 +652,3 @@ if (touch.identifier === pointerId) {

function $d96e234a33d0fc61c9867cbf1a711$var$createEvent(target, e) {
function $ed8d760564e19d8c7d03a6a4$var$createEvent(target, e) {
return {

@@ -644,4 +662,4 @@ currentTarget: target,

function $d96e234a33d0fc61c9867cbf1a711$var$isOverTarget(point, target) {
var rect = target.getBoundingClientRect();
function $ed8d760564e19d8c7d03a6a4$var$isOverTarget(point, target) {
let rect = target.getBoundingClientRect();
return (point.clientX || 0) >= (rect.left || 0) && (point.clientX || 0) <= (rect.right || 0) && (point.clientY || 0) >= (rect.top || 0) && (point.clientY || 0) <= (rect.bottom || 0);

@@ -651,12 +669,14 @@ }

function useInteractOutside(props) {
var ref = props.ref,
onInteractOutside = props.onInteractOutside;
var stateRef = useRef({
let {
ref,
onInteractOutside
} = props;
let stateRef = useRef({
isPointerDown: false,
ignoreEmulatedMouseEvents: false
});
var state = stateRef.current;
useEffect(function () {
var onPointerDown = function onPointerDown(e) {
if ($d4a49544db7051e6fc4a9e0a16b$var$isValidEvent(e, ref)) {
let state = stateRef.current;
useEffect(() => {
let onPointerDown = e => {
if ($f07e167670fb16f6a9d7f8a0eda7e156$var$isValidEvent(e, ref)) {
state.isPointerDown = true;

@@ -668,4 +688,4 @@ }

if (typeof PointerEvent !== 'undefined') {
var onPointerUp = function onPointerUp(e) {
if (state.isPointerDown && onInteractOutside && $d4a49544db7051e6fc4a9e0a16b$var$isValidEvent(e, ref)) {
let onPointerUp = e => {
if (state.isPointerDown && onInteractOutside && $f07e167670fb16f6a9d7f8a0eda7e156$var$isValidEvent(e, ref)) {
state.isPointerDown = false;

@@ -678,3 +698,3 @@ onInteractOutside(e);

document.addEventListener('pointerup', onPointerUp, false);
return function () {
return () => {
document.removeEventListener('pointerdown', onPointerDown, false);

@@ -684,6 +704,6 @@ document.removeEventListener('pointerup', onPointerUp, false);

} else {
var onMouseUp = function onMouseUp(e) {
let onMouseUp = e => {
if (state.ignoreEmulatedMouseEvents) {
state.ignoreEmulatedMouseEvents = false;
} else if (state.isPointerDown && onInteractOutside && $d4a49544db7051e6fc4a9e0a16b$var$isValidEvent(e, ref)) {
} else if (state.isPointerDown && onInteractOutside && $f07e167670fb16f6a9d7f8a0eda7e156$var$isValidEvent(e, ref)) {
state.isPointerDown = false;

@@ -694,6 +714,6 @@ onInteractOutside(e);

var onTouchEnd = function onTouchEnd(e) {
let onTouchEnd = e => {
state.ignoreEmulatedMouseEvents = true;
if (onInteractOutside && state.isPointerDown && $d4a49544db7051e6fc4a9e0a16b$var$isValidEvent(e, ref)) {
if (onInteractOutside && state.isPointerDown && $f07e167670fb16f6a9d7f8a0eda7e156$var$isValidEvent(e, ref)) {
state.isPointerDown = false;

@@ -708,3 +728,3 @@ onInteractOutside(e);

document.addEventListener('touchend', onTouchEnd, false);
return function () {
return () => {
document.removeEventListener('mousedown', onPointerDown, false);

@@ -721,3 +741,3 @@ document.removeEventListener('mouseup', onMouseUp, false);

function $d4a49544db7051e6fc4a9e0a16b$var$isValidEvent(event, ref) {
function $f07e167670fb16f6a9d7f8a0eda7e156$var$isValidEvent(event, ref) {
if (event.button > 0) {

@@ -730,18 +750,20 @@ return false;

var Pressable = _react.forwardRef(function (_ref, ref) {
var children = _ref.children,
props = _babelRuntimeHelpersObjectWithoutProperties(_ref, ["children"]);
const Pressable = _react.forwardRef((_ref, ref) => {
let {
children
} = _ref,
props = _babelRuntimeHelpersObjectWithoutPropertiesLoose(_ref, ["children"]);
ref = ref || useRef();
let {
pressProps
} = usePress(_babelRuntimeHelpersExtends({}, props, {
ref
}));
var _usePress = usePress(_babelRuntimeHelpersObjectSpread({}, props, {
ref: ref
})),
pressProps = _usePress.pressProps;
let child = _react.Children.only(children);
var child = _react.Children.only(children);
return _react.cloneElement(child, // @ts-ignore
_babelRuntimeHelpersObjectSpread({
ref: ref
_babelRuntimeHelpersExtends({
ref
}, mergeProps(child.props, pressProps)));

@@ -752,16 +774,23 @@ });

var PressResponder = _react.forwardRef(function (_ref, ref) {
var children = _ref.children,
props = _babelRuntimeHelpersObjectWithoutProperties(_ref, ["children"]);
const PressResponder = _react.forwardRef((_ref, ref) => {
let {
children
} = _ref,
props = _babelRuntimeHelpersObjectWithoutPropertiesLoose(_ref, ["children"]);
var isRegistered = useRef(false);
let isRegistered = useRef(false);
let prevContext = useContext($c6b6d42ec461c27a6a09002bf49a250e$export$PressResponderContext);
let context = mergeProps(prevContext || {}, _babelRuntimeHelpersExtends({}, props, {
ref,
var context = _babelRuntimeHelpersObjectSpread({}, props, {
ref: ref,
register: function register() {
register() {
isRegistered.current = true;
if (prevContext) {
prevContext.register();
}
}
});
useEffect(function () {
}));
useEffect(() => {
if (!isRegistered.current) {

@@ -771,3 +800,3 @@ console.warn('A PressResponder was rendered without a pressable child. ' + 'Either call the usePress hook, or wrap your DOM node with <Pressable> component.');

}, []);
return (/*#__PURE__*/_react.createElement($f0c946772fda863393a370b793f7614$export$PressResponderContext.Provider, {
return (/*#__PURE__*/_react.createElement($c6b6d42ec461c27a6a09002bf49a250e$export$PressResponderContext.Provider, {
value: context

@@ -792,3 +821,3 @@ }, children)

// This function wraps a React event handler to make stopPropagation the default, and support continuePropagation instead.
function $d3f751924ed6dd36b5df9e3d348e5194$export$createEventHandler(handler) {
function $df2a10e65550e0fb9bbbe4a76eee490$export$createEventHandler(handler) {
if (!handler) {

@@ -798,17 +827,21 @@ return;

var shouldStopPropagation = true;
return function (e) {
var event = _babelRuntimeHelpersObjectSpread({}, e, {
preventDefault: function preventDefault() {
let shouldStopPropagation = true;
return e => {
let event = _babelRuntimeHelpersExtends({}, e, {
preventDefault() {
e.preventDefault();
},
isDefaultPrevented: function isDefaultPrevented() {
isDefaultPrevented() {
return e.isDefaultPrevented();
},
stopPropagation: function stopPropagation() {
stopPropagation() {
console.error('stopPropagation is now the default behavior for events in React Spectrum. You can use continuePropagation() to revert this behavior.');
},
continuePropagation: function continuePropagation() {
continuePropagation() {
shouldStopPropagation = false;
}
});

@@ -824,7 +857,10 @@

/**
* Handles keyboard interactions for a focusable element.
*/
function useKeyboard(props) {
return {
keyboardProps: props.isDisabled ? {} : {
onKeyDown: $d3f751924ed6dd36b5df9e3d348e5194$export$createEventHandler(props.onKeyDown),
onKeyUp: $d3f751924ed6dd36b5df9e3d348e5194$export$createEventHandler(props.onKeyUp)
onKeyDown: $df2a10e65550e0fb9bbbe4a76eee490$export$createEventHandler(props.onKeyDown),
onKeyUp: $df2a10e65550e0fb9bbbe4a76eee490$export$createEventHandler(props.onKeyUp)
}

@@ -837,3 +873,4 @@ };

/**
* Handles focus events for the immediate target (no children)
* Handles focus events for the immediate target.
* Focus events on child elements will be ignored.
*/

@@ -847,6 +884,6 @@ function useFocus(props) {

var onFocus, onBlur;
let onFocus, onBlur;
if (props.onFocus || props.onFocusChange) {
onFocus = $d3f751924ed6dd36b5df9e3d348e5194$export$createEventHandler(function (e) {
onFocus = e => {
if (e.target === e.currentTarget) {

@@ -861,7 +898,7 @@ if (props.onFocus) {

}
});
};
}
if (props.onBlur || props.onFocusChange) {
onBlur = $d3f751924ed6dd36b5df9e3d348e5194$export$createEventHandler(function (e) {
onBlur = e => {
if (e.target === e.currentTarget) {

@@ -876,3 +913,3 @@ if (props.onBlur) {

}
});
};
}

@@ -882,4 +919,4 @@

focusProps: {
onFocus: onFocus,
onBlur: onBlur
onFocus,
onBlur
}

@@ -892,6 +929,6 @@ };

/**
* Handles focus events for the target and all children
* Handles focus events for the target and its descendants.
*/
function useFocusWithin(props) {
var state = useRef({
let state = useRef({
isFocusWithin: false

@@ -906,8 +943,8 @@ }).current;

var onFocus = $d3f751924ed6dd36b5df9e3d348e5194$export$createEventHandler(function (e) {
if (props.onFocusWithin) {
props.onFocusWithin(e);
}
let onFocus = e => {
if (!state.isFocusWithin) {
if (props.onFocusWithin) {
props.onFocusWithin(e);
}
if (!state.isFocusWithin) {
if (props.onFocusWithinChange) {

@@ -919,4 +956,5 @@ props.onFocusWithinChange(true);

}
});
var onBlur = $d3f751924ed6dd36b5df9e3d348e5194$export$createEventHandler(function (e) {
};
let onBlur = e => {
// We don't want to trigger onBlurWithin and then immediately onFocusWithin again

@@ -936,3 +974,4 @@ // when moving focus inside the element. Only trigger if the currentTarget doesn't

}
});
};
return {

@@ -947,104 +986,9 @@ focusWithinProps: {

exports.useFocusWithin = useFocusWithin;
let $b83372066b2b4e1d9257843b2455c$var$currentModality = null;
let $b83372066b2b4e1d9257843b2455c$var$changeHandlers = new Set();
let $b83372066b2b4e1d9257843b2455c$var$hasSetupGlobalListeners = false;
let $b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus = false;
const $b83372066b2b4e1d9257843b2455c$var$isMac = typeof window !== 'undefined' && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false; // Only Tab or Esc keys will make focus visible on text input elements
function $cdeee53b9efe306c5345d332eb79788$var$_createForOfIteratorHelper(o) {
if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
if (Array.isArray(o) || (o = $cdeee53b9efe306c5345d332eb79788$var$_unsupportedIterableToArray(o))) {
var i = 0;
var F = function F() {};
return {
s: F,
n: function n() {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
},
e: function (_e) {
function e(_x) {
return _e.apply(this, arguments);
}
e.toString = function () {
return _e.toString();
};
return e;
}(function (e) {
throw e;
}),
f: F
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var it,
normalCompletion = true,
didErr = false,
err;
return {
s: function s() {
it = o[Symbol.iterator]();
},
n: function n() {
var step = it.next();
normalCompletion = step.done;
return step;
},
e: function (_e2) {
function e(_x2) {
return _e2.apply(this, arguments);
}
e.toString = function () {
return _e2.toString();
};
return e;
}(function (e) {
didErr = true;
err = e;
}),
f: function f() {
try {
if (!normalCompletion && it.return != null) it.return();
} finally {
if (didErr) throw err;
}
}
};
}
function $cdeee53b9efe306c5345d332eb79788$var$_unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return $cdeee53b9efe306c5345d332eb79788$var$_arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return $cdeee53b9efe306c5345d332eb79788$var$_arrayLikeToArray(o, minLen);
}
function $cdeee53b9efe306c5345d332eb79788$var$_arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
var $cdeee53b9efe306c5345d332eb79788$var$isGlobalFocusVisible = true;
var $cdeee53b9efe306c5345d332eb79788$var$changeHandlers = new Set();
var $cdeee53b9efe306c5345d332eb79788$var$hasSetupGlobalListeners = false;
var $cdeee53b9efe306c5345d332eb79788$var$hasEventBeforeFocus = false;
var $cdeee53b9efe306c5345d332eb79788$var$isMac = typeof window !== 'undefined' && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false; // Only Tab or Esc keys will make focus visible on text input elements
var $cdeee53b9efe306c5345d332eb79788$var$FOCUS_VISIBLE_INPUT_KEYS = {
const $b83372066b2b4e1d9257843b2455c$var$FOCUS_VISIBLE_INPUT_KEYS = {
Tab: true,

@@ -1054,15 +998,5 @@ Escape: true

function $cdeee53b9efe306c5345d332eb79788$var$triggerChangeHandlers(modality, e) {
var _iterator = $cdeee53b9efe306c5345d332eb79788$var$_createForOfIteratorHelper($cdeee53b9efe306c5345d332eb79788$var$changeHandlers),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var handler = _step.value;
handler(modality, e);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
function $b83372066b2b4e1d9257843b2455c$var$triggerChangeHandlers(modality, e) {
for (let handler of $b83372066b2b4e1d9257843b2455c$var$changeHandlers) {
handler(modality, e);
}

@@ -1072,38 +1006,51 @@ } // Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible

function $cdeee53b9efe306c5345d332eb79788$var$isValidKey(e) {
return !(e.metaKey || !$cdeee53b9efe306c5345d332eb79788$var$isMac && e.altKey || e.ctrlKey);
function $b83372066b2b4e1d9257843b2455c$var$isValidKey(e) {
return !(e.metaKey || !$b83372066b2b4e1d9257843b2455c$var$isMac && e.altKey || e.ctrlKey);
}
function $cdeee53b9efe306c5345d332eb79788$var$handleKeyboardEvent(e) {
$cdeee53b9efe306c5345d332eb79788$var$hasEventBeforeFocus = true;
function $b83372066b2b4e1d9257843b2455c$var$handleKeyboardEvent(e) {
$b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus = true;
if ($cdeee53b9efe306c5345d332eb79788$var$isValidKey(e)) {
$cdeee53b9efe306c5345d332eb79788$var$isGlobalFocusVisible = true;
$cdeee53b9efe306c5345d332eb79788$var$triggerChangeHandlers('keyboard', e);
if ($b83372066b2b4e1d9257843b2455c$var$isValidKey(e)) {
$b83372066b2b4e1d9257843b2455c$var$currentModality = 'keyboard';
$b83372066b2b4e1d9257843b2455c$var$triggerChangeHandlers('keyboard', e);
}
}
function $cdeee53b9efe306c5345d332eb79788$var$handlePointerEvent(e) {
$cdeee53b9efe306c5345d332eb79788$var$isGlobalFocusVisible = false;
function $b83372066b2b4e1d9257843b2455c$var$handlePointerEvent(e) {
$b83372066b2b4e1d9257843b2455c$var$currentModality = 'pointer';
if (e.type === 'mousedown' || e.type === 'pointerdown') {
$cdeee53b9efe306c5345d332eb79788$var$hasEventBeforeFocus = true;
$cdeee53b9efe306c5345d332eb79788$var$triggerChangeHandlers('pointer', e);
$b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus = true;
$b83372066b2b4e1d9257843b2455c$var$triggerChangeHandlers('pointer', e);
}
}
function $cdeee53b9efe306c5345d332eb79788$var$handleFocusEvent(e) {
// If a focus event occurs without a preceding keyboard or pointer event, switch to keyboard modality.
function $b83372066b2b4e1d9257843b2455c$var$handleFocusEvent(e) {
// Firefox fires two extra focus events when the user first clicks into an iframe:
// first on the window, then on the document. We ignore these events so they don't
// cause keyboard focus rings to appear.
if (e.target === window || e.target === document) {
return;
} // If a focus event occurs without a preceding keyboard or pointer event, switch to keyboard modality.
// This occurs, for example, when navigating a form with the next/previous buttons on iOS.
if (!$cdeee53b9efe306c5345d332eb79788$var$hasEventBeforeFocus) {
$cdeee53b9efe306c5345d332eb79788$var$isGlobalFocusVisible = true;
$cdeee53b9efe306c5345d332eb79788$var$triggerChangeHandlers('keyboard', e);
if (!$b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus) {
$b83372066b2b4e1d9257843b2455c$var$currentModality = 'keyboard';
$b83372066b2b4e1d9257843b2455c$var$triggerChangeHandlers('keyboard', e);
}
$cdeee53b9efe306c5345d332eb79788$var$hasEventBeforeFocus = false;
$b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus = false;
}
function $b83372066b2b4e1d9257843b2455c$var$handleWindowBlur() {
// When the window is blurred, reset state. This is necessary when tabbing out of the window,
// for example, since a subsequent focus event won't be fired.
$b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus = false;
} // Setup global event listeners to control when keyboard focus style should be visible
function $cdeee53b9efe306c5345d332eb79788$var$setupGlobalFocusEvents() {
if ($cdeee53b9efe306c5345d332eb79788$var$hasSetupGlobalListeners) {
function $b83372066b2b4e1d9257843b2455c$var$setupGlobalFocusEvents() {
if ($b83372066b2b4e1d9257843b2455c$var$hasSetupGlobalListeners) {
return;

@@ -1116,58 +1063,86 @@ } // Programmatic focus() calls shouldn't affect the current input modality.

var focus = HTMLElement.prototype.focus;
let focus = HTMLElement.prototype.focus;
HTMLElement.prototype.focus = function () {
$cdeee53b9efe306c5345d332eb79788$var$hasEventBeforeFocus = true;
$b83372066b2b4e1d9257843b2455c$var$hasEventBeforeFocus = true;
focus.apply(this, arguments);
};
document.addEventListener('keydown', $cdeee53b9efe306c5345d332eb79788$var$handleKeyboardEvent, true);
document.addEventListener('keyup', $cdeee53b9efe306c5345d332eb79788$var$handleKeyboardEvent, true);
document.addEventListener('focus', $cdeee53b9efe306c5345d332eb79788$var$handleFocusEvent, true);
document.addEventListener('keydown', $b83372066b2b4e1d9257843b2455c$var$handleKeyboardEvent, true);
document.addEventListener('keyup', $b83372066b2b4e1d9257843b2455c$var$handleKeyboardEvent, true); // Register focus events on the window so they are sure to happen
// before React's event listeners (registered on the document).
window.addEventListener('focus', $b83372066b2b4e1d9257843b2455c$var$handleFocusEvent, true);
window.addEventListener('blur', $b83372066b2b4e1d9257843b2455c$var$handleWindowBlur, false);
if (typeof PointerEvent !== 'undefined') {
document.addEventListener('pointerdown', $cdeee53b9efe306c5345d332eb79788$var$handlePointerEvent, true);
document.addEventListener('pointermove', $cdeee53b9efe306c5345d332eb79788$var$handlePointerEvent, true);
document.addEventListener('pointerup', $cdeee53b9efe306c5345d332eb79788$var$handlePointerEvent, true);
document.addEventListener('pointerdown', $b83372066b2b4e1d9257843b2455c$var$handlePointerEvent, true);
document.addEventListener('pointermove', $b83372066b2b4e1d9257843b2455c$var$handlePointerEvent, true);
document.addEventListener('pointerup', $b83372066b2b4e1d9257843b2455c$var$handlePointerEvent, true);
} else {
document.addEventListener('mousedown', $cdeee53b9efe306c5345d332eb79788$var$handlePointerEvent, true);
document.addEventListener('mousemove', $cdeee53b9efe306c5345d332eb79788$var$handlePointerEvent, true);
document.addEventListener('mouseup', $cdeee53b9efe306c5345d332eb79788$var$handlePointerEvent, true);
document.addEventListener('mousedown', $b83372066b2b4e1d9257843b2455c$var$handlePointerEvent, true);
document.addEventListener('mousemove', $b83372066b2b4e1d9257843b2455c$var$handlePointerEvent, true);
document.addEventListener('mouseup', $b83372066b2b4e1d9257843b2455c$var$handlePointerEvent, true);
}
$cdeee53b9efe306c5345d332eb79788$var$hasSetupGlobalListeners = true;
$b83372066b2b4e1d9257843b2455c$var$hasSetupGlobalListeners = true;
}
function isFocusVisible() {
return $b83372066b2b4e1d9257843b2455c$var$currentModality !== 'pointer';
}
exports.isFocusVisible = isFocusVisible;
function useInteractionModality() {
$b83372066b2b4e1d9257843b2455c$var$setupGlobalFocusEvents();
let [modality, setModality] = useState($b83372066b2b4e1d9257843b2455c$var$currentModality);
useEffect(() => {
let handler = () => {
setModality($b83372066b2b4e1d9257843b2455c$var$currentModality);
};
$b83372066b2b4e1d9257843b2455c$var$changeHandlers.add(handler);
return () => {
$b83372066b2b4e1d9257843b2455c$var$changeHandlers.delete(handler);
};
}, []);
return modality;
}
/**
* Manages global focus visible state, and subscribes individual components for updates
* Manages focus visible state for the page, and subscribes individual components for updates.
*/
exports.useInteractionModality = useInteractionModality;
function useFocusVisible(props) {
$cdeee53b9efe306c5345d332eb79788$var$setupGlobalFocusEvents();
var isTextInput = props.isTextInput,
autoFocus = props.autoFocus;
if (props === void 0) {
props = {};
}
var _useState = useState(autoFocus || $cdeee53b9efe306c5345d332eb79788$var$isGlobalFocusVisible),
_useState2 = _babelRuntimeHelpersSlicedToArray(_useState, 2),
isFocusVisible = _useState2[0],
setFocusVisible = _useState2[1];
useEffect(function () {
var handler = function handler(modality, e) {
// If this is a text input component, don't update the focus visible style when
$b83372066b2b4e1d9257843b2455c$var$setupGlobalFocusEvents();
let {
isTextInput,
autoFocus
} = props;
let [isFocusVisibleState, setFocusVisible] = useState(autoFocus || isFocusVisible());
useEffect(() => {
let handler = (modality, e) => {
// If this is a text input component, don't update the focus visible style when
// typing except for when the Tab and Escape keys are pressed.
if (isTextInput && modality === 'keyboard' && !$cdeee53b9efe306c5345d332eb79788$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]) {
if (isTextInput && modality === 'keyboard' && !$b83372066b2b4e1d9257843b2455c$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]) {
return;
}
setFocusVisible($cdeee53b9efe306c5345d332eb79788$var$isGlobalFocusVisible);
setFocusVisible(isFocusVisible());
};
$cdeee53b9efe306c5345d332eb79788$var$changeHandlers.add(handler);
return function () {
$cdeee53b9efe306c5345d332eb79788$var$changeHandlers.delete(handler);
$b83372066b2b4e1d9257843b2455c$var$changeHandlers.add(handler);
return () => {
$b83372066b2b4e1d9257843b2455c$var$changeHandlers.delete(handler);
};
}, [isTextInput]);
return {
isFocusVisible: isFocusVisible
isFocusVisible: isFocusVisibleState
};

@@ -1178,26 +1153,31 @@ }

/**
* Handles pointer hover interactions for an element. Normalizes behavior
* across browsers and platforms, and ignores emulated mouse events on touch devices.
*/
function useHover(props) {
var onHover = props.onHover,
onHoverChange = props.onHoverChange,
onHoverEnd = props.onHoverEnd,
isDisabled = props.isDisabled,
domProps = _babelRuntimeHelpersObjectWithoutProperties(props, ["onHover", "onHoverChange", "onHoverEnd", "isDisabled"]);
var hoverProps = useMemo(function () {
var triggerHoverStart = function triggerHoverStart(event, pointerType) {
if (isDisabled) {
let {
onHoverStart,
onHoverChange,
onHoverEnd,
isDisabled
} = props;
let state = useRef({
isHovered: false,
ignoreEmulatedMouseEvents: false
}).current;
let hoverProps = useMemo(() => {
let triggerHoverStart = (event, pointerType) => {
if (isDisabled || pointerType === 'touch' || state.isHovered) {
return;
}
if (pointerType === 'touch') {
return;
}
state.isHovered = true;
let target = event.target;
var target = event.target;
if (onHover) {
onHover({
type: 'hover',
target: target,
pointerType: pointerType
if (onHoverStart) {
onHoverStart({
type: 'hoverstart',
target,
pointerType
});

@@ -1211,18 +1191,15 @@ }

var triggerHoverEnd = function triggerHoverEnd(event, pointerType) {
if (isDisabled) {
let triggerHoverEnd = (event, pointerType) => {
if (isDisabled || pointerType === 'touch' || !state.isHovered) {
return;
}
if (pointerType === 'touch') {
return;
}
state.isHovered = false;
let target = event.target;
var target = event.target;
if (onHoverEnd) {
onHoverEnd({
type: 'hoverend',
target: target,
pointerType: pointerType
target,
pointerType
});

@@ -1236,18 +1213,26 @@ }

var hoverProps = {};
let hoverProps = {};
if (typeof PointerEvent !== 'undefined') {
hoverProps.onPointerEnter = function (e) {
hoverProps.onPointerEnter = e => {
triggerHoverStart(e, e.pointerType);
};
hoverProps.onPointerLeave = function (e) {
hoverProps.onPointerLeave = e => {
triggerHoverEnd(e, e.pointerType);
};
} else {
hoverProps.onMouseEnter = function (e) {
triggerHoverStart(e, 'mouse');
hoverProps.onTouchStart = () => {
state.ignoreEmulatedMouseEvents = true;
};
hoverProps.onMouseLeave = function (e) {
hoverProps.onMouseEnter = e => {
if (!state.ignoreEmulatedMouseEvents) {
triggerHoverStart(e, 'mouse');
}
state.ignoreEmulatedMouseEvents = false;
};
hoverProps.onMouseLeave = e => {
triggerHoverEnd(e, 'mouse');

@@ -1258,5 +1243,5 @@ };

return hoverProps;
}, [onHover, onHoverChange, onHoverEnd, isDisabled]);
}, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state]);
return {
hoverProps: mergeProps(domProps, hoverProps)
hoverProps
};

@@ -1266,77 +1251,2 @@ }

exports.useHover = useHover;
var DOMPropsResponderContext = _react.createContext(null);
exports.DOMPropsResponderContext = DOMPropsResponderContext;
function useDOMPropsResponderContext(props) {
// Consume context from <DOMPropsResponder> and merge with props.
var context = useContext(DOMPropsResponderContext);
if (context) {
var _register = context.register,
contextProps = _babelRuntimeHelpersObjectWithoutProperties(context, ["register"]);
props = mergeProps(contextProps, props);
_register();
} // Sync ref from <DOMPropsResponder> with ref passed to the useHover hook.
useEffect(function () {
if (context && context.ref) {
context.ref.current = props.ref.current;
return function () {
context.ref.current = null;
};
}
}, [context, props.ref]);
return props;
}
exports.useDOMPropsResponderContext = useDOMPropsResponderContext;
var DOMPropsResponder = _react.forwardRef(function (_ref, ref) {
var children = _ref.children,
props = _babelRuntimeHelpersObjectWithoutProperties(_ref, ["children"]);
var isRegistered = useRef(false);
var context = _babelRuntimeHelpersObjectSpread({}, props, {
ref: ref,
register: function register() {
isRegistered.current = true;
}
}); // TODO: Think of a more generic message when this replaces the PressResponder as well
useEffect(function () {
if (!isRegistered.current) {
console.warn('A DOMPropsResponder was ultilized without a hoverable DOM node.');
}
}, []);
return (/*#__PURE__*/_react.createElement(DOMPropsResponderContext.Provider, {
value: context
}, children)
);
});
exports.DOMPropsResponder = DOMPropsResponder;
function useDOMPropsResponder(domRef) {
var domProps = useDOMPropsResponderContext({
ref: domRef
}) || {}; // @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var register = domProps.register,
isDisabled = domProps.isDisabled,
onPress = domProps.onPress,
partialDomProps = _babelRuntimeHelpersObjectWithoutProperties(domProps, ["register", "isDisabled", "onPress"]);
return {
contextProps: partialDomProps
};
}
exports.useDOMPropsResponder = useDOMPropsResponder;
//# sourceMappingURL=main.js.map

434

dist/module.js

@@ -1,13 +0,13 @@

import _babelRuntimeHelpersEsmObjectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
import _react, { useContext, useEffect, useMemo, useRef, useState } from "react";
import { focusWithoutScrolling, mergeProps } from "@react-aria/utils";
import _react, { useContext, useEffect, useMemo, useRef, useState } from "react";
import _babelRuntimeHelpersEsmObjectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const $dfb1afd42bc5ba853feb46619fe4852d$export$PressResponderContext = _react.createContext(null);
const $a3ff51240de6f955c79cf17a88e349$export$PressResponderContext = _react.createContext(null);
$dfb1afd42bc5ba853feb46619fe4852d$export$PressResponderContext.displayName = 'PressResponderContext';
$a3ff51240de6f955c79cf17a88e349$export$PressResponderContext.displayName = 'PressResponderContext';
function $d4f8c4e5fbfabc3f0b106b817fa442a7$var$usePressResponderContext(props) {
function $ffc54430b1dbeee65879852feaaff07d$var$usePressResponderContext(props) {
// Consume context from <PressResponder> and merge with props.
let context = useContext($dfb1afd42bc5ba853feb46619fe4852d$export$PressResponderContext);
let context = useContext($a3ff51240de6f955c79cf17a88e349$export$PressResponderContext);

@@ -18,3 +18,3 @@ if (context) {

} = context,
contextProps = _babelRuntimeHelpersEsmObjectWithoutProperties(context, ["register"]);
contextProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(context, ["register"]);

@@ -36,5 +36,11 @@ props = mergeProps(contextProps, props);

}
/**
* Handles press interactions across mouse, touch, keyboard, and screen readers.
* It normalizes behavior across browsers and platforms, and handles many nuances
* of dealing with pointer and keyboard events.
*/
export function usePress(props) {
let _usePressResponderCon = $d4f8c4e5fbfabc3f0b106b817fa442a7$var$usePressResponderContext(props),
let _usePressResponderCon = $ffc54430b1dbeee65879852feaaff07d$var$usePressResponderContext(props),
{

@@ -47,7 +53,5 @@ onPress,

isDisabled,
isPressed: isPressedProp,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
ref: _
isPressed: isPressedProp
} = _usePressResponderCon,
domProps = _babelRuntimeHelpersEsmObjectWithoutProperties(_usePressResponderCon, ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "ref"]);
domProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(_usePressResponderCon, ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "ref"]);

@@ -89,3 +93,7 @@ let [isPressed, setPressed] = useState(false);

let triggerPressEnd = (originalEvent, pointerType, wasPressed = true) => {
let triggerPressEnd = function triggerPressEnd(originalEvent, pointerType, wasPressed) {
if (wasPressed === void 0) {
wasPressed = true;
}
if (isDisabled) {

@@ -145,3 +153,3 @@ return;

onKeyDown(e) {
if ($d4f8c4e5fbfabc3f0b106b817fa442a7$var$isValidKeyboardEvent(e.nativeEvent)) {
if ($ffc54430b1dbeee65879852feaaff07d$var$isValidKeyboardEvent(e.nativeEvent)) {
e.preventDefault();

@@ -164,4 +172,4 @@ e.stopPropagation(); // If the event is repeating, it may have started on a different element

onKeyUp(e) {
if ($d4f8c4e5fbfabc3f0b106b817fa442a7$var$isValidKeyboardEvent(e.nativeEvent) && !e.repeat) {
triggerPressUp($d4f8c4e5fbfabc3f0b106b817fa442a7$var$createEvent(state.target, e), 'keyboard');
if ($ffc54430b1dbeee65879852feaaff07d$var$isValidKeyboardEvent(e.nativeEvent) && !e.repeat) {
triggerPressUp($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), 'keyboard');
}

@@ -180,3 +188,3 @@ },

if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && $d4f8c4e5fbfabc3f0b106b817fa442a7$var$isVirtualClick(e.nativeEvent)) {
if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && $ffc54430b1dbeee65879852feaaff07d$var$isVirtualClick(e.nativeEvent)) {
// Ensure the element receives focus (VoiceOver on iOS does not do this)

@@ -200,11 +208,11 @@ if (!isDisabled) {

let onKeyUp = e => {
if (state.isPressed && $d4f8c4e5fbfabc3f0b106b817fa442a7$var$isValidKeyboardEvent(e)) {
if (state.isPressed && $ffc54430b1dbeee65879852feaaff07d$var$isValidKeyboardEvent(e)) {
e.preventDefault();
e.stopPropagation();
state.isPressed = false;
triggerPressEnd($d4f8c4e5fbfabc3f0b106b817fa442a7$var$createEvent(state.target, e), 'keyboard', e.target === state.target);
triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), 'keyboard', e.target === state.target);
document.removeEventListener('keyup', onKeyUp, false); // If the target is a link, trigger the click method to open the URL,
// but defer triggering pressEnd until onClick event handler.
if (e.target === state.target && $d4f8c4e5fbfabc3f0b106b817fa442a7$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
if (e.target === state.target && $ffc54430b1dbeee65879852feaaff07d$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
state.target.click();

@@ -225,3 +233,3 @@ }

let restoreTextSelection = () => {
// There appears to be a delay on iOS where selection still might occur
// There appears to be a delay on iOS where selection still might occur
// after pointer up, so wait a bit before removing user-select.

@@ -286,3 +294,3 @@ setTimeout(() => {

// when the touch isn't over the target, so double check.
if (e.button === 0 && $d4f8c4e5fbfabc3f0b106b817fa442a7$var$isOverTarget(e, e.currentTarget)) {
if (e.button === 0 && $ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(e, e.currentTarget)) {
triggerPressUp(e, e.pointerType);

@@ -300,10 +308,10 @@ }

if ($d4f8c4e5fbfabc3f0b106b817fa442a7$var$isOverTarget(e, state.target)) {
if ($ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(e, state.target)) {
if (!state.isOverTarget) {
state.isOverTarget = true;
triggerPressStart($d4f8c4e5fbfabc3f0b106b817fa442a7$var$createEvent(state.target, e), e.pointerType);
triggerPressStart($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), e.pointerType);
}
} else if (state.isOverTarget) {
state.isOverTarget = false;
triggerPressEnd($d4f8c4e5fbfabc3f0b106b817fa442a7$var$createEvent(state.target, e), e.pointerType, false);
triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), e.pointerType, false);
}

@@ -314,6 +322,6 @@ };

if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0) {
if ($d4f8c4e5fbfabc3f0b106b817fa442a7$var$isOverTarget(e, state.target)) {
triggerPressEnd($d4f8c4e5fbfabc3f0b106b817fa442a7$var$createEvent(state.target, e), e.pointerType);
if ($ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(e, state.target)) {
triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), e.pointerType);
} else if (state.isOverTarget) {
triggerPressEnd($d4f8c4e5fbfabc3f0b106b817fa442a7$var$createEvent(state.target, e), e.pointerType, false);
triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), e.pointerType, false);
}

@@ -332,3 +340,3 @@

if (state.isOverTarget) {
triggerPressEnd($d4f8c4e5fbfabc3f0b106b817fa442a7$var$createEvent(state.target, e), e.pointerType, false);
triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), e.pointerType, false);
}

@@ -367,3 +375,3 @@

triggerPressStart(e, 'mouse');
triggerPressStart(e, $ffc54430b1dbeee65879852feaaff07d$var$isVirtualClick(e.nativeEvent) ? 'virtual' : 'mouse');
document.addEventListener('mouseup', onMouseUp, false);

@@ -392,3 +400,3 @@ };

if (!state.ignoreEmulatedMouseEvents && e.button === 0) {
triggerPressUp(e, 'mouse');
triggerPressUp(e, $ffc54430b1dbeee65879852feaaff07d$var$isVirtualClick(e.nativeEvent) ? 'virtual' : 'mouse');
}

@@ -411,6 +419,8 @@ };

if ($d4f8c4e5fbfabc3f0b106b817fa442a7$var$isOverTarget(e, state.target)) {
triggerPressEnd($d4f8c4e5fbfabc3f0b106b817fa442a7$var$createEvent(state.target, e), 'mouse');
let pointerType = $ffc54430b1dbeee65879852feaaff07d$var$isVirtualClick(e) ? 'virtual' : 'mouse';
if ($ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(e, state.target)) {
triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), pointerType);
} else if (state.isOverTarget) {
triggerPressEnd($d4f8c4e5fbfabc3f0b106b817fa442a7$var$createEvent(state.target, e), 'mouse', false);
triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), pointerType, false);
}

@@ -423,3 +433,3 @@

e.stopPropagation();
let touch = $d4f8c4e5fbfabc3f0b106b817fa442a7$var$getTouchFromEvent(e.nativeEvent);
let touch = $ffc54430b1dbeee65879852feaaff07d$var$getTouchFromEvent(e.nativeEvent);

@@ -453,5 +463,5 @@ if (!touch) {

let touch = $d4f8c4e5fbfabc3f0b106b817fa442a7$var$getTouchById(e.nativeEvent, state.activePointerId);
let touch = $ffc54430b1dbeee65879852feaaff07d$var$getTouchById(e.nativeEvent, state.activePointerId);
if (touch && $d4f8c4e5fbfabc3f0b106b817fa442a7$var$isOverTarget(touch, e.currentTarget)) {
if (touch && $ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(touch, e.currentTarget)) {
if (!state.isOverTarget) {

@@ -474,5 +484,5 @@ state.isOverTarget = true;

let touch = $d4f8c4e5fbfabc3f0b106b817fa442a7$var$getTouchById(e.nativeEvent, state.activePointerId);
let touch = $ffc54430b1dbeee65879852feaaff07d$var$getTouchById(e.nativeEvent, state.activePointerId);
if (touch && $d4f8c4e5fbfabc3f0b106b817fa442a7$var$isOverTarget(touch, e.currentTarget)) {
if (touch && $ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(touch, e.currentTarget)) {
triggerPressUp(e, 'touch');

@@ -532,7 +542,7 @@ triggerPressEnd(e, 'touch');

function $d4f8c4e5fbfabc3f0b106b817fa442a7$var$isHTMLAnchorLink(target) {
function $ffc54430b1dbeee65879852feaaff07d$var$isHTMLAnchorLink(target) {
return target.tagName === 'A' && target.hasAttribute('href');
}
function $d4f8c4e5fbfabc3f0b106b817fa442a7$var$isValidKeyboardEvent(event) {
function $ffc54430b1dbeee65879852feaaff07d$var$isValidKeyboardEvent(event) {
const {

@@ -552,3 +562,3 @@ key,

// unless it also has role='button' and was triggered using Space.
!$d4f8c4e5fbfabc3f0b106b817fa442a7$var$isHTMLAnchorLink(element) || role === 'button' && key !== 'Enter') && // An element with role='link' should only trigger with Enter key
!$ffc54430b1dbeee65879852feaaff07d$var$isHTMLAnchorLink(element) || role === 'button' && key !== 'Enter') && // An element with role='link' should only trigger with Enter key
!(role === 'link' && key !== 'Enter');

@@ -564,3 +574,3 @@ } // Per: https://github.com/facebook/react/blob/3c713d513195a53788b3f8bb4b70279d68b15bcc/packages/react-interactions/events/src/dom/shared/index.js#L74-L87

function $d4f8c4e5fbfabc3f0b106b817fa442a7$var$isVirtualClick(event) {
function $ffc54430b1dbeee65879852feaaff07d$var$isVirtualClick(event) {
// JAWS/NVDA with Firefox.

@@ -574,3 +584,3 @@ if (event.mozInputSource === 0 && event.isTrusted) {

function $d4f8c4e5fbfabc3f0b106b817fa442a7$var$getTouchFromEvent(event) {
function $ffc54430b1dbeee65879852feaaff07d$var$getTouchFromEvent(event) {
const {

@@ -587,3 +597,3 @@ targetTouches

function $d4f8c4e5fbfabc3f0b106b817fa442a7$var$getTouchById(event, pointerId) {
function $ffc54430b1dbeee65879852feaaff07d$var$getTouchById(event, pointerId) {
const changedTouches = event.changedTouches;

@@ -602,3 +612,3 @@

function $d4f8c4e5fbfabc3f0b106b817fa442a7$var$createEvent(target, e) {
function $ffc54430b1dbeee65879852feaaff07d$var$createEvent(target, e) {
return {

@@ -612,3 +622,3 @@ currentTarget: target,

function $d4f8c4e5fbfabc3f0b106b817fa442a7$var$isOverTarget(point, target) {
function $ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(point, target) {
let rect = target.getBoundingClientRect();

@@ -630,3 +640,3 @@ return (point.clientX || 0) >= (rect.left || 0) && (point.clientX || 0) <= (rect.right || 0) && (point.clientY || 0) >= (rect.top || 0) && (point.clientY || 0) <= (rect.bottom || 0);

let onPointerDown = e => {
if ($aa0c64dcd7f02ca42a7bfa03164e6$var$isValidEvent(e, ref)) {
if ($e415bb64ab27cb8fbfac2f417412022f$var$isValidEvent(e, ref)) {
state.isPointerDown = true;

@@ -639,3 +649,3 @@ }

let onPointerUp = e => {
if (state.isPointerDown && onInteractOutside && $aa0c64dcd7f02ca42a7bfa03164e6$var$isValidEvent(e, ref)) {
if (state.isPointerDown && onInteractOutside && $e415bb64ab27cb8fbfac2f417412022f$var$isValidEvent(e, ref)) {
state.isPointerDown = false;

@@ -656,3 +666,3 @@ onInteractOutside(e);

state.ignoreEmulatedMouseEvents = false;
} else if (state.isPointerDown && onInteractOutside && $aa0c64dcd7f02ca42a7bfa03164e6$var$isValidEvent(e, ref)) {
} else if (state.isPointerDown && onInteractOutside && $e415bb64ab27cb8fbfac2f417412022f$var$isValidEvent(e, ref)) {
state.isPointerDown = false;

@@ -666,3 +676,3 @@ onInteractOutside(e);

if (onInteractOutside && state.isPointerDown && $aa0c64dcd7f02ca42a7bfa03164e6$var$isValidEvent(e, ref)) {
if (onInteractOutside && state.isPointerDown && $e415bb64ab27cb8fbfac2f417412022f$var$isValidEvent(e, ref)) {
state.isPointerDown = false;

@@ -687,3 +697,3 @@ onInteractOutside(e);

function $aa0c64dcd7f02ca42a7bfa03164e6$var$isValidEvent(event, ref) {
function $e415bb64ab27cb8fbfac2f417412022f$var$isValidEvent(event, ref) {
if (event.button > 0) {

@@ -700,3 +710,3 @@ return false;

} = _ref,
props = _babelRuntimeHelpersEsmObjectWithoutProperties(_ref, ["children"]);
props = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(_ref, ["children"]);

@@ -706,3 +716,3 @@ ref = ref || useRef();

pressProps
} = usePress(_babelRuntimeHelpersEsmObjectSpread({}, props, {
} = usePress(_babelRuntimeHelpersEsmExtends({}, props, {
ref

@@ -714,3 +724,3 @@ }));

return _react.cloneElement(child, // @ts-ignore
_babelRuntimeHelpersEsmObjectSpread({
_babelRuntimeHelpersEsmExtends({
ref

@@ -723,7 +733,7 @@ }, mergeProps(child.props, pressProps)));

} = _ref,
props = _babelRuntimeHelpersEsmObjectWithoutProperties(_ref, ["children"]);
props = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(_ref, ["children"]);
let isRegistered = useRef(false);
let context = _babelRuntimeHelpersEsmObjectSpread({}, props, {
let prevContext = useContext($a3ff51240de6f955c79cf17a88e349$export$PressResponderContext);
let context = mergeProps(prevContext || {}, _babelRuntimeHelpersEsmExtends({}, props, {
ref,

@@ -733,6 +743,9 @@

isRegistered.current = true;
if (prevContext) {
prevContext.register();
}
}
});
}));
useEffect(() => {

@@ -743,3 +756,3 @@ if (!isRegistered.current) {

}, []);
return (/*#__PURE__*/_react.createElement($dfb1afd42bc5ba853feb46619fe4852d$export$PressResponderContext.Provider, {
return (/*#__PURE__*/_react.createElement($a3ff51240de6f955c79cf17a88e349$export$PressResponderContext.Provider, {
value: context

@@ -762,3 +775,3 @@ }, children)

// This function wraps a React event handler to make stopPropagation the default, and support continuePropagation instead.
function $bf0ab9e2de2515781be699d1ec74e486$export$createEventHandler(handler) {
function $dc0d75166de722fbf58eb6c3552$export$createEventHandler(handler) {
if (!handler) {

@@ -770,3 +783,3 @@ return;

return e => {
let event = _babelRuntimeHelpersEsmObjectSpread({}, e, {
let event = _babelRuntimeHelpersEsmExtends({}, e, {
preventDefault() {

@@ -798,7 +811,10 @@ e.preventDefault();

/**
* Handles keyboard interactions for a focusable element.
*/
export function useKeyboard(props) {
return {
keyboardProps: props.isDisabled ? {} : {
onKeyDown: $bf0ab9e2de2515781be699d1ec74e486$export$createEventHandler(props.onKeyDown),
onKeyUp: $bf0ab9e2de2515781be699d1ec74e486$export$createEventHandler(props.onKeyUp)
onKeyDown: $dc0d75166de722fbf58eb6c3552$export$createEventHandler(props.onKeyDown),
onKeyUp: $dc0d75166de722fbf58eb6c3552$export$createEventHandler(props.onKeyUp)
}

@@ -809,3 +825,4 @@ };

/**
* Handles focus events for the immediate target (no children)
* Handles focus events for the immediate target.
* Focus events on child elements will be ignored.
*/

@@ -822,3 +839,3 @@ export function useFocus(props) {

if (props.onFocus || props.onFocusChange) {
onFocus = $bf0ab9e2de2515781be699d1ec74e486$export$createEventHandler(e => {
onFocus = e => {
if (e.target === e.currentTarget) {

@@ -833,7 +850,7 @@ if (props.onFocus) {

}
});
};
}
if (props.onBlur || props.onFocusChange) {
onBlur = $bf0ab9e2de2515781be699d1ec74e486$export$createEventHandler(e => {
onBlur = e => {
if (e.target === e.currentTarget) {

@@ -848,3 +865,3 @@ if (props.onBlur) {

}
});
};
}

@@ -861,3 +878,3 @@

/**
* Handles focus events for the target and all children
* Handles focus events for the target and its descendants.
*/

@@ -875,8 +892,8 @@ export function useFocusWithin(props) {

let onFocus = $bf0ab9e2de2515781be699d1ec74e486$export$createEventHandler(e => {
if (props.onFocusWithin) {
props.onFocusWithin(e);
}
let onFocus = e => {
if (!state.isFocusWithin) {
if (props.onFocusWithin) {
props.onFocusWithin(e);
}
if (!state.isFocusWithin) {
if (props.onFocusWithinChange) {

@@ -888,4 +905,5 @@ props.onFocusWithinChange(true);

}
});
let onBlur = $bf0ab9e2de2515781be699d1ec74e486$export$createEventHandler(e => {
};
let onBlur = e => {
// We don't want to trigger onBlurWithin and then immediately onFocusWithin again

@@ -905,3 +923,4 @@ // when moving focus inside the element. Only trigger if the currentTarget doesn't

}
});
};
return {

@@ -914,9 +933,9 @@ focusWithinProps: {

}
let $d51c87ad858c3af15dd5d3656d9d713$var$isGlobalFocusVisible = true;
let $d51c87ad858c3af15dd5d3656d9d713$var$changeHandlers = new Set();
let $d51c87ad858c3af15dd5d3656d9d713$var$hasSetupGlobalListeners = false;
let $d51c87ad858c3af15dd5d3656d9d713$var$hasEventBeforeFocus = false;
const $d51c87ad858c3af15dd5d3656d9d713$var$isMac = typeof window !== 'undefined' && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false; // Only Tab or Esc keys will make focus visible on text input elements
let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality = null;
let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$changeHandlers = new Set();
let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasSetupGlobalListeners = false;
let $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = false;
const $d01f69bb2ab5f70dfd0005370a2a2cbc$var$isMac = typeof window !== 'undefined' && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false; // Only Tab or Esc keys will make focus visible on text input elements
const $d51c87ad858c3af15dd5d3656d9d713$var$FOCUS_VISIBLE_INPUT_KEYS = {
const $d01f69bb2ab5f70dfd0005370a2a2cbc$var$FOCUS_VISIBLE_INPUT_KEYS = {
Tab: true,

@@ -926,4 +945,4 @@ Escape: true

function $d51c87ad858c3af15dd5d3656d9d713$var$triggerChangeHandlers(modality, e) {
for (let handler of $d51c87ad858c3af15dd5d3656d9d713$var$changeHandlers) {
function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$triggerChangeHandlers(modality, e) {
for (let handler of $d01f69bb2ab5f70dfd0005370a2a2cbc$var$changeHandlers) {
handler(modality, e);

@@ -934,38 +953,51 @@ }

function $d51c87ad858c3af15dd5d3656d9d713$var$isValidKey(e) {
return !(e.metaKey || !$d51c87ad858c3af15dd5d3656d9d713$var$isMac && e.altKey || e.ctrlKey);
function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$isValidKey(e) {
return !(e.metaKey || !$d01f69bb2ab5f70dfd0005370a2a2cbc$var$isMac && e.altKey || e.ctrlKey);
}
function $d51c87ad858c3af15dd5d3656d9d713$var$handleKeyboardEvent(e) {
$d51c87ad858c3af15dd5d3656d9d713$var$hasEventBeforeFocus = true;
function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleKeyboardEvent(e) {
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = true;
if ($d51c87ad858c3af15dd5d3656d9d713$var$isValidKey(e)) {
$d51c87ad858c3af15dd5d3656d9d713$var$isGlobalFocusVisible = true;
$d51c87ad858c3af15dd5d3656d9d713$var$triggerChangeHandlers('keyboard', e);
if ($d01f69bb2ab5f70dfd0005370a2a2cbc$var$isValidKey(e)) {
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality = 'keyboard';
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$triggerChangeHandlers('keyboard', e);
}
}
function $d51c87ad858c3af15dd5d3656d9d713$var$handlePointerEvent(e) {
$d51c87ad858c3af15dd5d3656d9d713$var$isGlobalFocusVisible = false;
function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent(e) {
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality = 'pointer';
if (e.type === 'mousedown' || e.type === 'pointerdown') {
$d51c87ad858c3af15dd5d3656d9d713$var$hasEventBeforeFocus = true;
$d51c87ad858c3af15dd5d3656d9d713$var$triggerChangeHandlers('pointer', e);
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = true;
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$triggerChangeHandlers('pointer', e);
}
}
function $d51c87ad858c3af15dd5d3656d9d713$var$handleFocusEvent(e) {
// If a focus event occurs without a preceding keyboard or pointer event, switch to keyboard modality.
function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleFocusEvent(e) {
// Firefox fires two extra focus events when the user first clicks into an iframe:
// first on the window, then on the document. We ignore these events so they don't
// cause keyboard focus rings to appear.
if (e.target === window || e.target === document) {
return;
} // If a focus event occurs without a preceding keyboard or pointer event, switch to keyboard modality.
// This occurs, for example, when navigating a form with the next/previous buttons on iOS.
if (!$d51c87ad858c3af15dd5d3656d9d713$var$hasEventBeforeFocus) {
$d51c87ad858c3af15dd5d3656d9d713$var$isGlobalFocusVisible = true;
$d51c87ad858c3af15dd5d3656d9d713$var$triggerChangeHandlers('keyboard', e);
if (!$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus) {
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality = 'keyboard';
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$triggerChangeHandlers('keyboard', e);
}
$d51c87ad858c3af15dd5d3656d9d713$var$hasEventBeforeFocus = false;
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = false;
}
function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleWindowBlur() {
// When the window is blurred, reset state. This is necessary when tabbing out of the window,
// for example, since a subsequent focus event won't be fired.
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = false;
} // Setup global event listeners to control when keyboard focus style should be visible
function $d51c87ad858c3af15dd5d3656d9d713$var$setupGlobalFocusEvents() {
if ($d51c87ad858c3af15dd5d3656d9d713$var$hasSetupGlobalListeners) {
function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$setupGlobalFocusEvents() {
if ($d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasSetupGlobalListeners) {
return;

@@ -981,29 +1013,54 @@ } // Programmatic focus() calls shouldn't affect the current input modality.

HTMLElement.prototype.focus = function () {
$d51c87ad858c3af15dd5d3656d9d713$var$hasEventBeforeFocus = true;
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = true;
focus.apply(this, arguments);
};
document.addEventListener('keydown', $d51c87ad858c3af15dd5d3656d9d713$var$handleKeyboardEvent, true);
document.addEventListener('keyup', $d51c87ad858c3af15dd5d3656d9d713$var$handleKeyboardEvent, true);
document.addEventListener('focus', $d51c87ad858c3af15dd5d3656d9d713$var$handleFocusEvent, true);
document.addEventListener('keydown', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleKeyboardEvent, true);
document.addEventListener('keyup', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleKeyboardEvent, true); // Register focus events on the window so they are sure to happen
// before React's event listeners (registered on the document).
window.addEventListener('focus', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleFocusEvent, true);
window.addEventListener('blur', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleWindowBlur, false);
if (typeof PointerEvent !== 'undefined') {
document.addEventListener('pointerdown', $d51c87ad858c3af15dd5d3656d9d713$var$handlePointerEvent, true);
document.addEventListener('pointermove', $d51c87ad858c3af15dd5d3656d9d713$var$handlePointerEvent, true);
document.addEventListener('pointerup', $d51c87ad858c3af15dd5d3656d9d713$var$handlePointerEvent, true);
document.addEventListener('pointerdown', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
document.addEventListener('pointermove', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
document.addEventListener('pointerup', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
} else {
document.addEventListener('mousedown', $d51c87ad858c3af15dd5d3656d9d713$var$handlePointerEvent, true);
document.addEventListener('mousemove', $d51c87ad858c3af15dd5d3656d9d713$var$handlePointerEvent, true);
document.addEventListener('mouseup', $d51c87ad858c3af15dd5d3656d9d713$var$handlePointerEvent, true);
document.addEventListener('mousedown', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
document.addEventListener('mousemove', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
document.addEventListener('mouseup', $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handlePointerEvent, true);
}
$d51c87ad858c3af15dd5d3656d9d713$var$hasSetupGlobalListeners = true;
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasSetupGlobalListeners = true;
}
export function isFocusVisible() {
return $d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality !== 'pointer';
}
export function useInteractionModality() {
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$setupGlobalFocusEvents();
let [modality, setModality] = useState($d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality);
useEffect(() => {
let handler = () => {
setModality($d01f69bb2ab5f70dfd0005370a2a2cbc$var$currentModality);
};
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$changeHandlers.add(handler);
return () => {
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$changeHandlers.delete(handler);
};
}, []);
return modality;
}
/**
* Manages global focus visible state, and subscribes individual components for updates
* Manages focus visible state for the page, and subscribes individual components for updates.
*/
export function useFocusVisible(props) {
if (props === void 0) {
props = {};
}
export function useFocusVisible(props) {
$d51c87ad858c3af15dd5d3656d9d713$var$setupGlobalFocusEvents();
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$setupGlobalFocusEvents();
let {

@@ -1013,47 +1070,51 @@ isTextInput,

} = props;
let [isFocusVisible, setFocusVisible] = useState(autoFocus || $d51c87ad858c3af15dd5d3656d9d713$var$isGlobalFocusVisible);
let [isFocusVisibleState, setFocusVisible] = useState(autoFocus || isFocusVisible());
useEffect(() => {
let handler = (modality, e) => {
// If this is a text input component, don't update the focus visible style when
// If this is a text input component, don't update the focus visible style when
// typing except for when the Tab and Escape keys are pressed.
if (isTextInput && modality === 'keyboard' && !$d51c87ad858c3af15dd5d3656d9d713$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]) {
if (isTextInput && modality === 'keyboard' && !$d01f69bb2ab5f70dfd0005370a2a2cbc$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]) {
return;
}
setFocusVisible($d51c87ad858c3af15dd5d3656d9d713$var$isGlobalFocusVisible);
setFocusVisible(isFocusVisible());
};
$d51c87ad858c3af15dd5d3656d9d713$var$changeHandlers.add(handler);
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$changeHandlers.add(handler);
return () => {
$d51c87ad858c3af15dd5d3656d9d713$var$changeHandlers.delete(handler);
$d01f69bb2ab5f70dfd0005370a2a2cbc$var$changeHandlers.delete(handler);
};
}, [isTextInput]);
return {
isFocusVisible
isFocusVisible: isFocusVisibleState
};
}
/**
* Handles pointer hover interactions for an element. Normalizes behavior
* across browsers and platforms, and ignores emulated mouse events on touch devices.
*/
export function useHover(props) {
let {
onHover,
onHoverStart,
onHoverChange,
onHoverEnd,
isDisabled
} = props,
domProps = _babelRuntimeHelpersEsmObjectWithoutProperties(props, ["onHover", "onHoverChange", "onHoverEnd", "isDisabled"]);
} = props;
let state = useRef({
isHovered: false,
ignoreEmulatedMouseEvents: false
}).current;
let hoverProps = useMemo(() => {
let triggerHoverStart = (event, pointerType) => {
if (isDisabled) {
if (isDisabled || pointerType === 'touch' || state.isHovered) {
return;
}
if (pointerType === 'touch') {
return;
}
state.isHovered = true;
let target = event.target;
if (onHover) {
onHover({
type: 'hover',
if (onHoverStart) {
onHoverStart({
type: 'hoverstart',
target,

@@ -1070,10 +1131,7 @@ pointerType

let triggerHoverEnd = (event, pointerType) => {
if (isDisabled) {
if (isDisabled || pointerType === 'touch' || !state.isHovered) {
return;
}
if (pointerType === 'touch') {
return;
}
state.isHovered = false;
let target = event.target;

@@ -1105,4 +1163,12 @@

} else {
hoverProps.onTouchStart = () => {
state.ignoreEmulatedMouseEvents = true;
};
hoverProps.onMouseEnter = e => {
triggerHoverStart(e, 'mouse');
if (!state.ignoreEmulatedMouseEvents) {
triggerHoverStart(e, 'mouse');
}
state.ignoreEmulatedMouseEvents = false;
};

@@ -1116,77 +1182,7 @@

return hoverProps;
}, [onHover, onHoverChange, onHoverEnd, isDisabled]);
}, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state]);
return {
hoverProps: mergeProps(domProps, hoverProps)
hoverProps
};
}
export const DOMPropsResponderContext = _react.createContext(null);
export function useDOMPropsResponderContext(props) {
// Consume context from <DOMPropsResponder> and merge with props.
let context = useContext(DOMPropsResponderContext);
if (context) {
let {
register
} = context,
contextProps = _babelRuntimeHelpersEsmObjectWithoutProperties(context, ["register"]);
props = mergeProps(contextProps, props);
register();
} // Sync ref from <DOMPropsResponder> with ref passed to the useHover hook.
useEffect(() => {
if (context && context.ref) {
context.ref.current = props.ref.current;
return () => {
context.ref.current = null;
};
}
}, [context, props.ref]);
return props;
}
export const DOMPropsResponder = _react.forwardRef((_ref, ref) => {
let {
children
} = _ref,
props = _babelRuntimeHelpersEsmObjectWithoutProperties(_ref, ["children"]);
let isRegistered = useRef(false);
let context = _babelRuntimeHelpersEsmObjectSpread({}, props, {
ref,
register() {
isRegistered.current = true;
}
}); // TODO: Think of a more generic message when this replaces the PressResponder as well
useEffect(() => {
if (!isRegistered.current) {
console.warn('A DOMPropsResponder was ultilized without a hoverable DOM node.');
}
}, []);
return (/*#__PURE__*/_react.createElement(DOMPropsResponderContext.Provider, {
value: context
}, children)
);
});
export function useDOMPropsResponder(domRef) {
let domProps = useDOMPropsResponderContext({
ref: domRef
}) || {}; // @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {
register,
isDisabled,
onPress
} = domProps,
partialDomProps = _babelRuntimeHelpersEsmObjectWithoutProperties(domProps, ["register", "isDisabled", "onPress"]);
return {
contextProps: partialDomProps
};
}
//# sourceMappingURL=module.js.map

87

dist/types.d.ts

@@ -1,14 +0,24 @@

import { DOMProps, PressEvents, KeyboardEvents, FocusEvents, FocusEvent, HoverEvents } from "@react-types/shared";
import { HTMLAttributes, RefObject, SyntheticEvent, ReactElement, ReactNode } from "react";
import { HTMLAttributes, RefObject, SyntheticEvent, ReactElement, ReactNode, FocusEvent } from "react";
import { PressEvents, KeyboardEvents, FocusEvents, HoverEvents } from "@react-types/shared";
export interface PressProps extends PressEvents {
/** Whether the target is in a controlled press state (e.g. an overlay it triggers is open). */
isPressed?: boolean;
/** Whether the press events should be disabled. */
isDisabled?: boolean;
}
export interface PressHookProps extends PressProps, DOMProps {
export interface PressHookProps extends PressProps {
/** A ref to the target element. */
ref?: RefObject<HTMLElement>;
}
export interface PressResult {
/** Whether the target is currently pressed. */
isPressed: boolean;
/** Props to spread on the target element. */
pressProps: HTMLAttributes<HTMLElement>;
}
/**
* Handles press interactions across mouse, touch, keyboard, and screen readers.
* It normalizes behavior across browsers and platforms, and handles many nuances
* of dealing with pointer and keyboard events.
*/
export function usePress(props: PressHookProps): PressResult;

@@ -29,84 +39,75 @@ interface InteractOutsideProps {

export interface KeyboardProps extends KeyboardEvents {
/** Whether the keyboard events should be disabled. */
isDisabled?: boolean;
}
interface KeyboardResult {
/** Props to spread onto the target element. */
keyboardProps: HTMLAttributes<HTMLElement>;
}
/**
* Handles keyboard interactions for a focusable element.
*/
export function useKeyboard(props: KeyboardProps): KeyboardResult;
interface FocusProps extends FocusEvents {
/** Whether the focus events should be disabled. */
isDisabled?: boolean;
}
interface FocusResult {
/** Props to spread onto the target element. */
focusProps: HTMLAttributes<HTMLElement>;
}
/**
* Handles focus events for the immediate target (no children)
* Handles focus events for the immediate target.
* Focus events on child elements will be ignored.
*/
export function useFocus(props: FocusProps): FocusResult;
interface FocusWithinProps {
/** Whether the focus within events should be disabled. */
isDisabled?: boolean;
/** Handler that is called when the target element or a descendant receives focus. */
onFocusWithin?: (e: FocusEvent) => void;
/** Handler that is called when the target element and all descendants lose focus. */
onBlurWithin?: (e: FocusEvent) => void;
/** Handler that is called when the the focus within state changes. */
onFocusWithinChange?: (isFocusWithin: boolean) => void;
}
interface FocusWithinResult {
/** Props to spread onto the target element. */
focusWithinProps: HTMLAttributes<HTMLElement>;
}
/**
* Handles focus events for the target and all children
* Handles focus events for the target and its descendants.
*/
export function useFocusWithin(props: FocusWithinProps): FocusWithinResult;
type Modality = 'keyboard' | 'pointer';
interface FocusVisibleProps {
/** Whether the element is a text input. */
isTextInput?: boolean;
/** Whether the element will be auto focused. */
autoFocus?: boolean;
}
interface FocusVisibleResult {
/** Whether keyboard focus is visible globally. */
isFocusVisible: boolean;
}
export function isFocusVisible(): boolean;
export function useInteractionModality(): Modality;
/**
* Manages global focus visible state, and subscribes individual components for updates
* Manages focus visible state for the page, and subscribes individual components for updates.
*/
export function useFocusVisible(props: FocusVisibleProps): FocusVisibleResult;
export interface HoverProps extends HoverEvents, DOMProps {
export function useFocusVisible(props?: FocusVisibleProps): FocusVisibleResult;
export interface HoverProps extends HoverEvents {
/** Whether the hover events should be disabled. */
isDisabled?: boolean;
}
export interface HoverHookProps extends HoverProps, DOMProps {
ref?: RefObject<HTMLElement>;
}
interface HoverResult {
/** Props to spread on the target element. */
hoverProps: HTMLAttributes<HTMLElement>;
}
export function useHover(props: HoverHookProps): HoverResult;
export interface DOMPropsResponderContext extends HoverProps {
register(): void;
ref?: MutableRefObject<HTMLElement>;
onMouseEnter?: () => void;
onMouseLeave?: () => void;
onPointerEnter?: () => void;
onPointerLeave?: () => void;
}
export const DOMPropsResponderContext: React.Context<DOMPropsResponderContext>;
export function useDOMPropsResponderContext(props: HoverHookProps): HoverHookProps;
interface DOMPropsResponderProps extends HoverProps {
children: ReactNode;
}
export const DOMPropsResponder: React.ForwardRefExoticComponent<DOMPropsResponderProps & React.RefAttributes<HTMLElement>>;
export function useDOMPropsResponder(domRef: RefObject<HTMLElement>): {
contextProps: {
ref?: RefObject<HTMLElement>;
onHover?: (e: import("@react-types/shared").HoverEvent) => void;
onHoverEnd?: (e: import("@react-types/shared").HoverEvent) => void;
onHoverChange?: (isHovering: boolean) => void;
id?: string;
tabIndex?: number;
role?: string;
'aria-label'?: string;
'aria-labelledby'?: string;
'aria-describedby'?: string;
'aria-controls'?: string;
'aria-owns'?: string;
'aria-hidden'?: boolean | "false" | "true";
};
};
/**
* Handles pointer hover interactions for an element. Normalizes behavior
* across browsers and platforms, and ignores emulated mouse events on touch devices.
*/
export function useHover(props: HoverProps): HoverResult;
//# sourceMappingURL=types.d.ts.map

8

package.json
{
"name": "@react-aria/interactions",
"version": "3.0.0-rc.2",
"version": "3.0.0-rc.3",
"description": "Spectrum UI components in React",

@@ -20,4 +20,4 @@ "license": "Apache-2.0",

"@babel/runtime": "^7.6.2",
"@react-aria/utils": "^3.0.0-rc.2",
"@react-types/shared": "^3.0.0-rc.2"
"@react-aria/utils": "3.0.0-rc.3",
"@react-types/shared": "3.0.0-rc.3"
},

@@ -30,3 +30,3 @@ "peerDependencies": {

},
"gitHead": "207e6ee9076905c96638a7f81a367758872e1410"
"gitHead": "461d6321126ae9b4f1508aa912f7b36bf8a603f8"
}
dist/types.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc