UNPKG

@trail-ui/react

Version:
104 lines (100 loc) 4.74 kB
"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/modal/modal-footer.tsx var modal_footer_exports = {}; __export(modal_footer_exports, { ModalFooter: () => _ModalFooter }); module.exports = __toCommonJS(modal_footer_exports); var import_shared_utils2 = require("@trail-ui/shared-utils"); var import_react2 = require("react"); // src/modal/modal.tsx var import_hooks = require("@trail-ui/hooks"); var import_shared_utils = require("@trail-ui/shared-utils"); var import_theme = require("@trail-ui/theme"); var import_react = require("react"); var import_react_aria_components = require("react-aria-components"); var import_jsx_runtime = require("react/jsx-runtime"); var InternalModalContext = (0, import_react.createContext)( {} ); function Modal(props, ref) { const { children, classNames, className, size, radius, placement, shadow, backdrop = "opaque", scrollBehavior, ...otherProps } = props; const localRef = (0, import_react.useRef)(null); const slots = (0, import_react.useMemo)( () => (0, import_theme.modal)({ size, radius, placement, shadow, scrollBehavior, backdrop }), [backdrop, placement, radius, scrollBehavior, shadow, size] ); const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className); (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ModalOverlay, { ...otherProps, className: slots.backdrop({ class: classNames == null ? void 0 : classNames.backdrop }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), "data-placement": placement, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalModalContext.Provider, { value: { slots, classNames }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Modal, { ref: (0, import_hooks.mergeRefs)(localRef, ref), className: slots.base({ class: baseStyles }), children }) }) }) }); } var _Modal = (0, import_react.forwardRef)(Modal); // src/modal/modal-footer.tsx var import_jsx_runtime2 = require("react/jsx-runtime"); function ModalFooter(props, ref) { const { children, className, ...otherProps } = props; const { slots, classNames } = (0, import_react2.useContext)(InternalModalContext); return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)( "div", { ref, className: slots.footer({ class: (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.footer, className) }), ...otherProps, children } ); } var _ModalFooter = (0, import_react2.forwardRef)(ModalFooter); // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { ModalFooter });