@trail-ui/react
Version:
60 lines (58 loc) • 2.71 kB
JavaScript
// src/modal/modal.tsx
import { mergeRefs } from "@trail-ui/hooks";
import { clsx } from "@trail-ui/shared-utils";
import { modal } from "@trail-ui/theme";
import { createContext, forwardRef, useEffect, useMemo, useRef } 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 localRef = useRef(null);
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);
useEffect(() => {
var _a, _b, _c, _d, _e;
if (props.isOpen) {
const childSection = (_a = localRef.current) == null ? void 0 : _a.getElementsByTagName("section")[0];
const labelledBy = childSection == null ? void 0 : childSection.getAttribute("aria-labelledby");
const role = childSection == null ? void 0 : childSection.getAttribute("role");
const tabIndex = childSection == null ? void 0 : childSection.getAttribute("tabindex");
if (labelledBy) {
(_b = localRef.current) == null ? void 0 : _b.setAttribute("aria-labelledby", labelledBy);
childSection == null ? void 0 : childSection.removeAttribute("aria-labelledby");
}
if (role) {
(_c = localRef.current) == null ? void 0 : _c.setAttribute("role", role);
childSection == null ? void 0 : childSection.removeAttribute("role");
}
if (tabIndex) {
(_d = localRef.current) == null ? void 0 : _d.setAttribute("tabindex", tabIndex);
childSection == null ? void 0 : childSection.removeAttribute("tabindex");
}
(_e = localRef.current) == null ? void 0 : _e.setAttribute("aria-modal", "true");
}
}, [props.isOpen]);
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: mergeRefs(localRef, ref), className: slots.base({ class: baseStyles }), children }) }) }) });
}
var _Modal = forwardRef(Modal);
export {
InternalModalContext,
_Modal
};