UNPKG

koval-ui

Version:

React components collection with minimalistic design. Supports theming, layout, and input validation.

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