import {useState as $AWxnT$useState, useRef as $AWxnT$useRef, useEffect as $AWxnT$useEffect, useMemo as $AWxnT$useMemo} from "react"; /* * Copyright 2020 Adobe. All rights reserved. * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy * of the License at http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ // Portions of the code in this file are based on code from react. // Original licensing for the following can be found in the // NOTICE file in the root directory of this source tree. // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions // iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse". // We want to ignore these emulated events so they do not trigger hover behavior. // See https://bugs.webkit.org/show_bug.cgi?id=214609. let $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = false; let $6179b936705e76d3$var$hoverCount = 0; function $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents() { $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = true; // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter // with pointerType="mouse" immediately after onPointerUp and before onFocus. On other // devices that don't have this quirk, we don't want to ignore a mouse hover sometime in // the distant future because a user previously touched the element. setTimeout(()=>{ $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = false; }, 50); } function $6179b936705e76d3$var$handleGlobalPointerEvent(e) { if (e.pointerType === 'touch') $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents(); } function $6179b936705e76d3$var$setupGlobalTouchEvents() { if (typeof document === 'undefined') return; if (typeof PointerEvent !== 'undefined') document.addEventListener('pointerup', $6179b936705e76d3$var$handleGlobalPointerEvent); else document.addEventListener('touchend', $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents); $6179b936705e76d3$var$hoverCount++; return ()=>{ $6179b936705e76d3$var$hoverCount--; if ($6179b936705e76d3$var$hoverCount > 0) return; if (typeof PointerEvent !== 'undefined') document.removeEventListener('pointerup', $6179b936705e76d3$var$handleGlobalPointerEvent); else document.removeEventListener('touchend', $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents); }; } function $6179b936705e76d3$export$ae780daf29e6d456(props) { let { onHoverStart: onHoverStart, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, isDisabled: isDisabled } = props; let [isHovered, setHovered] = (0, $AWxnT$useState)(false); let state = (0, $AWxnT$useRef)({ isHovered: false, ignoreEmulatedMouseEvents: false, pointerType: '', target: null }).current; (0, $AWxnT$useEffect)($6179b936705e76d3$var$setupGlobalTouchEvents, []); let { hoverProps: hoverProps, triggerHoverEnd: triggerHoverEnd } = (0, $AWxnT$useMemo)(()=>{ let triggerHoverStart = (event, pointerType)=>{ state.pointerType = pointerType; if (isDisabled || pointerType === 'touch' || state.isHovered || !event.currentTarget.contains(event.target)) return; state.isHovered = true; let target = event.currentTarget; state.target = target; if (onHoverStart) onHoverStart({ type: 'hoverstart', target: target, pointerType: pointerType }); if (onHoverChange) onHoverChange(true); setHovered(true); }; let triggerHoverEnd = (event, pointerType)=>{ state.pointerType = ''; state.target = null; if (pointerType === 'touch' || !state.isHovered) return; state.isHovered = false; let target = event.currentTarget; if (onHoverEnd) onHoverEnd({ type: 'hoverend', target: target, pointerType: pointerType }); if (onHoverChange) onHoverChange(false); setHovered(false); }; let hoverProps = {}; if (typeof PointerEvent !== 'undefined') { hoverProps.onPointerEnter = (e)=>{ if ($6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') return; triggerHoverStart(e, e.pointerType); }; hoverProps.onPointerLeave = (e)=>{ if (!isDisabled && e.currentTarget.contains(e.target)) triggerHoverEnd(e, e.pointerType); }; } else { hoverProps.onTouchStart = ()=>{ state.ignoreEmulatedMouseEvents = true; }; hoverProps.onMouseEnter = (e)=>{ if (!state.ignoreEmulatedMouseEvents && !$6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents) triggerHoverStart(e, 'mouse'); state.ignoreEmulatedMouseEvents = false; }; hoverProps.onMouseLeave = (e)=>{ if (!isDisabled && e.currentTarget.contains(e.target)) triggerHoverEnd(e, 'mouse'); }; } return { hoverProps: hoverProps, triggerHoverEnd: triggerHoverEnd }; }, [ onHoverStart, onHoverChange, onHoverEnd, isDisabled, state ]); (0, $AWxnT$useEffect)(()=>{ // Call the triggerHoverEnd as soon as isDisabled changes to true // Safe to call triggerHoverEnd, it will early return if we aren't currently hovering if (isDisabled) triggerHoverEnd({ currentTarget: state.target }, state.pointerType); // eslint-disable-next-line react-hooks/exhaustive-deps }, [ isDisabled ]); return { hoverProps: hoverProps, isHovered: isHovered }; } export {$6179b936705e76d3$export$ae780daf29e6d456 as useHover}; //# sourceMappingURL=useHover.module.js.map