koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
3 lines (2 loc) • 2 kB
JavaScript
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),i=require("classnames"),S=require("../../internal/hooks/useInternalRef.cjs"),k=require("../../internal/Icons/IconClose.cjs");;/* empty css */const A=require("../../internal/hooks/useFocusTrap.cjs"),v=require("../../internal/Actions/ActionButton.cjs"),w=require("../../internal/Actions/ActionsTree.cjs"),I=require("./TransitionDialog.cjs"),E=require("./useDialogState.cjs"),o=require("./Dialog.module.css.cjs"),L=require("./types.cjs"),T=require("../Text/Headers.cjs"),m=t.forwardRef(({children:h,className:q,closeOnClickOutside:u=!0,showCloseButton:x=!0,onToggle:l=()=>{},id:n,actions:j=[],dialogTitle:d,closeLabel:D="Close",trapFocus:C=!0,animation:N=L.Animations["slide-top"],...b},y)=>{const s=S.useInternalRef(y),{isOpen:a,closeDialog:f}=E.useDialogState(n);A.useFocusTrap(s.current,a,C),t.useEffect(()=>{a&&(s.current?.showModal(),document.body.classList.add(o.default.noScroll)),l(a)},[s,l,a]);const r=t.useCallback(()=>{l(!1),f()},[f,l]),g=t.useCallback(c=>{c.target.nodeName==="DIALOG"&&u&&r()},[s,r,u]),p=t.useCallback(c=>{c.code==="Escape"&&r()},[r]),R=t.useCallback(()=>{s.current?.close(),document.body.classList.remove(o.default.noScroll)},[s]);return e.jsx(I.TransitionDialog,{animation:N,unmountNode:!0,show:a,nodeRef:s,onExit:R,children:e.jsx("dialog",{...b,id:n,onKeyDown:p,onClick:g,className:i(o.default.dialog,q),ref:s,children:e.jsxs("div",{className:o.default.flex,children:[d&&e.jsx("header",{className:i(o.default.header),children:e.jsx(T.H3,{children:d})}),e.jsx("div",{className:i(o.default.body),children:h}),e.jsxs("footer",{className:o.default.actions,children:[e.jsx(w.ActionsTree,{actions:j}),x&&e.jsx("div",{className:o.default.row,children:e.jsx(v.ActionButton,{onClick:r,icon:k.IconClose,title:D})},`${n}-close`)]})]})})})});m.displayName="Dialog";exports.Dialog=m;
//# sourceMappingURL=Dialog.cjs.map