powerpoint-toolbox/node_modules/@fluentui/react-motion/lib-commonjs/factories/createPresenceComponent.js

"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
    });
}