ui-ingredients/dist/Presence/createPresence.svelte.js

Headless component library for Svelte powered by zag

import * as presence from '@zag-js/presence';
import { normalizeProps, useMachine } from '@zag-js/svelte';
import { createAttachmentKey } from 'svelte/attachments';
export function createPresence(props) {
    const { present, immediate, lazyMount = false, keepMounted = true, animateOnMount = true, onExitComplete, } = $derived(props());
    const service = useMachine(presence.machine, () => ({
        present,
        immediate,
        onExitComplete,
    }));
    const api = $derived(presence.connect(service, normalizeProps));
    function getPresenceProps() {
        return {
            hidden: !api.present,
            'data-state': api.skip && !animateOnMount ? undefined : present ? 'open' : 'closed',
            [createAttachmentKey()]: (node) => {
                api.setNode(node);
                return api.setNode(null);
            },
        };
    }
    let wasPresent = $state(false);
    $effect.pre(() => {
        if (api.present) {
            wasPresent = true;
        }
    });
    const unmounted = $derived.by(() => {
        if (!api.present && !wasPresent && lazyMount)
            return true;
        if (!keepMounted && !api.present && wasPresent)
            return true;
        return false;
    });
    return () => ({
        getPresenceProps,
        mounted: !unmounted,
    });
}