@engie-group/fluid-design-system-react/lib/components/modal/NJModal.js

Fluid Design System React

import { jsx } from 'react/jsx-runtime';
import { useFloating, useDismiss, useRole, useClick, useInteractions } from '../../node_modules/.pnpm/@floating-ui_react@0.27.3_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react/dist/floating-ui.react.js';
import { useState } from 'react';
import { NJModalContext } from './NJModal.context.js';

const NJModal = ({ role: roleProp = 'dialog', isOpen: isOpenProp, setIsOpen: setIsOpenProp, closeOnBackdropClick = false, closeOnEscape = false, children }) => {
    const [isOpen, setIsOpen] = useState(false);
    const data = useFloating({
        open: isOpenProp ? isOpenProp : isOpen,
        onOpenChange: setIsOpenProp ? setIsOpenProp : setIsOpen
    });
    const dismiss = useDismiss(data.context, {
        escapeKey: closeOnEscape,
        outsidePressEvent: 'mousedown',
        outsidePress: closeOnBackdropClick
    });
    const role = useRole(data.context, {
        role: roleProp
    });
    const click = useClick(data.context);
    // Merge all the interactions into prop getters
    const interactions = useInteractions([role, dismiss, click]);
    return (jsx(NJModalContext.Provider, { value: {
            isOpen,
            setIsOpen,
            ...interactions,
            ...data
        }, children: children }));
};

export { NJModal };