@grail-ui/svelte/dist/focusTrap/focusTrap.js

[](https://www.npmjs.com/package/@grail-ui/svelte) [](https://bundlephobia.com/package/@grail-ui/svelte) [![minified + zipped](https:

import { writable } from 'svelte/store';
import { createFocusTrap as _createFocusTrap } from 'focus-trap';
import { toReadable } from '../util/store.js';
export const createFocusTrap = (config = {}) => {
    let trap;
    const { immediate, ...focusTrapOptions } = config;
    const hasFocus = writable(false);
    const isPaused = writable(false);
    const activate = (opts) => trap?.activate(opts);
    const deactivate = (opts) => trap?.deactivate(opts);
    const pause = () => {
        if (trap) {
            trap.pause();
            isPaused.set(true);
        }
    };
    const unpause = () => {
        if (trap) {
            trap.unpause();
            isPaused.set(false);
        }
    };
    const useFocusTrap = (node) => {
        trap = _createFocusTrap(node, {
            ...focusTrapOptions,
            onActivate() {
                hasFocus.set(true);
                config.onActivate?.();
            },
            onDeactivate() {
                hasFocus.set(false);
                config.onDeactivate?.();
            },
        });
        if (immediate) {
            activate();
        }
        return {
            destroy() {
                deactivate();
                trap = undefined;
            },
        };
    };
    return {
        useFocusTrap,
        hasFocus: toReadable(hasFocus),
        isPaused: toReadable(isPaused),
        activate,
        deactivate,
        pause,
        unpause,
    };
};