"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function _export(target, all) { for(var name in all)Object.defineProperty(target, name, { enumerable: true, get: all[name] }); } _export(exports, { MOTION_DEFINITION: function() { return MOTION_DEFINITION; }, createPresenceComponent: function() { return createPresenceComponent; } }); const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard"); const _reactutilities = require("@fluentui/react-utilities"); const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react")); const _PresenceGroupChildContext = require("../contexts/PresenceGroupChildContext"); const _useAnimateAtoms = require("../hooks/useAnimateAtoms"); const _useMotionImperativeRef = require("../hooks/useMotionImperativeRef"); const _useMountedState = require("../hooks/useMountedState"); const _useIsReducedMotion = require("../hooks/useIsReducedMotion"); const _getChildElement = require("../utils/getChildElement"); const _MotionBehaviourContext = require("../contexts/MotionBehaviourContext"); const MOTION_DEFINITION = Symbol('MOTION_DEFINITION'); function shouldSkipAnimation(appear, isFirstMount, visible) { return !appear && isFirstMount && !!visible; } function createPresenceComponent(value) { return Object.assign((props)=>{ 'use no memo'; const itemContext = _react.useContext(_PresenceGroupChildContext.PresenceGroupChildContext); const merged = { ...itemContext, ...props }; const skipMotions = (0, _MotionBehaviourContext.useMotionBehaviourContext)() === 'skip'; const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged; const params = _rest; const [mounted, setMounted] = (0, _useMountedState.useMountedState)(visible, unmountOnExit); const child = (0, _getChildElement.getChildElement)(children); const handleRef = (0, _useMotionImperativeRef.useMotionImperativeRef)(imperativeRef); const elementRef = _react.useRef(); const ref = (0, _reactutilities.useMergedRefs)(elementRef, child.ref); const optionsRef = _react.useRef({ appear, params, skipMotions }); const animateAtoms = (0, _useAnimateAtoms.useAnimateAtoms)(); const isFirstMount = (0, _reactutilities.useFirstMount)(); const isReducedMotion = (0, _useIsReducedMotion.useIsReducedMotion)(); const handleMotionStart = (0, _reactutilities.useEventCallback)((direction)=>{ onMotionStart === null || onMotionStart === void 0 ? void 0 : onMotionStart(null, { direction }); }); const handleMotionFinish = (0, _reactutilities.useEventCallback)((direction)=>{ onMotionFinish === null || onMotionFinish === void 0 ? void 0 : onMotionFinish(null, { direction }); if (direction === 'exit' && unmountOnExit) { setMounted(false); onExit === null || onExit === void 0 ? void 0 : onExit(); } }); const handleMotionCancel = (0, _reactutilities.useEventCallback)((direction)=>{ onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, { direction }); }); (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{ // Heads up! // We store the params in a ref to avoid re-rendering the component when the params change. optionsRef.current = { appear, params, skipMotions }; }); (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{ const element = elementRef.current; if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) { return; } const presenceMotion = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value; const atoms = visible ? presenceMotion.enter : presenceMotion.exit; const direction = visible ? 'enter' : 'exit'; const applyInitialStyles = !visible && isFirstMount; const skipAnimation = optionsRef.current.skipMotions; if (!applyInitialStyles) { handleMotionStart(direction); } const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() }); if (applyInitialStyles) { // Heads up! // .finish() is used in this case to skip animation and apply animation styles immediately handle.finish(); return; } handleRef.current = handle; handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction)); if (skipAnimation) { handle.finish(); } return ()=>{ handle.cancel(); }; }, // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders // eslint-disable-next-line react-hooks/exhaustive-deps [ animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible ]); if (mounted) { return _react.cloneElement(child, { ref }); } return null; }, { // Heads up! // Always normalize it to a function to simplify types [MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value }); }