flowbite-react/dist/components/Modal/Modal.cjs

Official React components built for Flowbite and Tailwind CSS

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('@floating-ui/react');
var React = require('react');
var get = require('../../helpers/get.cjs');
var resolveProps = require('../../helpers/resolve-props.cjs');
var resolveTheme = require('../../helpers/resolve-theme.cjs');
var tailwindMerge = require('../../helpers/tailwind-merge.cjs');
var provider = require('../../theme/provider.cjs');
var ModalContext = require('./ModalContext.cjs');
var theme = require('./theme.cjs');

const Modal = React.forwardRef((props, ref) => {
  const [headerId, setHeaderId] = React.useState(void 0);
  const provider$1 = provider.useThemeProvider();
  const theme$1 = resolveTheme.useResolveTheme(
    [theme.modalTheme, provider$1.theme?.modal, props.theme],
    [get.get(provider$1.clearTheme, "modal"), props.clearTheme],
    [get.get(provider$1.applyTheme, "modal"), props.applyTheme]
  );
  const {
    children,
    className,
    dismissible = false,
    onClose,
    popup,
    position = "center",
    root,
    show,
    size = "2xl",
    initialFocus,
    ...restProps
  } = resolveProps.resolveProps(props, provider$1.props?.modal);
  const { context } = react.useFloating({
    open: show,
    onOpenChange: () => onClose && onClose()
  });
  const mergedRef = react.useMergeRefs([context.refs.setFloating, ref]);
  const click = react.useClick(context);
  const dismiss = react.useDismiss(context, { outsidePressEvent: "mousedown", enabled: dismissible });
  const role = react.useRole(context);
  const { getFloatingProps } = react.useInteractions([click, dismiss, role]);
  if (!show) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    ModalContext.ModalContext.Provider,
    {
      value: {
        theme: props.theme,
        clearTheme: props.clearTheme,
        applyTheme: props.applyTheme,
        popup,
        onClose,
        setHeaderId
      },
      children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root, children: /* @__PURE__ */ jsxRuntime.jsx(
        react.FloatingOverlay,
        {
          lockScroll: true,
          "data-testid": "modal-overlay",
          className: tailwindMerge.twMerge(
            theme$1.root.base,
            theme$1.root.positions[position],
            show ? theme$1.root.show.on : theme$1.root.show.off,
            className
          ),
          ...restProps,
          children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context, initialFocus, children: /* @__PURE__ */ jsxRuntime.jsx(
            "div",
            {
              ref: mergedRef,
              ...getFloatingProps(restProps),
              "aria-labelledby": headerId,
              className: tailwindMerge.twMerge(theme$1.content.base, theme$1.root.sizes[size]),
              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: theme$1.content.inner, children })
            }
          ) })
        }
      ) })
    }
  );
});
Modal.displayName = "Modal";

exports.Modal = Modal;
//# sourceMappingURL=Modal.cjs.map