@trail-ui/react
Version:
36 lines (34 loc) • 1.4 kB
JavaScript
// src/modal/modal.tsx
import { clsx } from "@trail-ui/shared-utils";
import { modal } from "@trail-ui/theme";
import { createContext, forwardRef, useMemo } from "react";
import { Modal as AriaModal, ModalOverlay } from "react-aria-components";
import { jsx } from "react/jsx-runtime";
var InternalModalContext = createContext(
{}
);
function Modal(props, ref) {
const {
children,
classNames,
className,
size,
radius,
placement,
shadow,
backdrop = "opaque",
scrollBehavior,
...otherProps
} = props;
const slots = useMemo(
() => modal({ size, radius, placement, shadow, scrollBehavior, backdrop }),
[backdrop, placement, radius, scrollBehavior, shadow, size]
);
const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ jsx(ModalOverlay, { ...otherProps, className: slots.backdrop({ class: classNames == null ? void 0 : classNames.backdrop }), children: /* @__PURE__ */ jsx("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), "data-placement": placement, children: /* @__PURE__ */ jsx(InternalModalContext.Provider, { value: { slots, classNames }, children: /* @__PURE__ */ jsx(AriaModal, { ref, className: slots.base({ class: baseStyles }), children }) }) }) });
}
var _Modal = forwardRef(Modal);
export {
InternalModalContext,
_Modal
};