koval-ui/dist/src/lib/Dialog/Dialog.cjs.map

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

{"version":3,"file":"Dialog.cjs","sources":["../../../../src/lib/Dialog/Dialog.tsx"],"sourcesContent":["import type {ReactNode, MouseEvent, KeyboardEvent, ComponentProps} from 'react';\nimport {forwardRef, useEffect, useCallback} from 'react';\nimport classNames from 'classnames';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\nimport {IconClose} from '@/internal/Icons';\nimport {H3} from '@/lib';\nimport {useFocusTrap} from '@/internal/hooks/useFocusTrap.ts';\nimport {ActionButton, ActionsTree} from '@/internal/Actions';\n\nimport {TransitionDialog} from './TransitionDialog.tsx';\nimport {useDialogState} from './useDialogState.tsx';\nimport classes from './Dialog.module.css';\nimport {Animations} from './types.ts';\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        /** Provide unique id for Dialog */\n        id: NonNullable<LibraryProps['id']>;\n        children?: ReactNode;\n        /** Configure outside click behavior */\n        closeOnClickOutside?: boolean;\n        /** Callback triggered when Dialog toggles */\n        onToggle?: (open: boolean) => void;\n        /** Display close icon at the right top corner */\n        showCloseButton?: boolean;\n        /** Provide an array of actions with callbacks */\n        actions?: (\n            | ComponentProps<typeof ActionButton>\n            | [ComponentProps<typeof ActionButton>, ComponentProps<typeof ActionButton>]\n        )[];\n        /** Set a title of Dialog */\n        dialogTitle?: string;\n        /** Provide a localized value for close button */\n        closeLabel?: string;\n        /** Enable a focus trap for Dialog */\n        trapFocus?: boolean;\n        /** Select Dialog animation style */\n        animation?: keyof typeof Animations;\n    };\n\nexport const Dialog = forwardRef<HTMLDialogElement, Props>(\n    (\n        {\n            children,\n            className,\n            closeOnClickOutside = true,\n            showCloseButton = true,\n            onToggle = () => {},\n            id,\n            actions = [],\n            dialogTitle,\n            closeLabel = 'Close',\n            trapFocus = true,\n            animation = Animations['slide-top'],\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const dialogRef = useInternalRef(ref);\n        const {isOpen, closeDialog} = useDialogState(id);\n        useFocusTrap(dialogRef.current, isOpen, trapFocus);\n        useEffect(() => {\n            if (isOpen) {\n                dialogRef.current?.showModal();\n                document.body.classList.add(classes.noScroll);\n            }\n            onToggle(isOpen);\n        }, [dialogRef, onToggle, isOpen]);\n\n        const handleSelfClose = useCallback(() => {\n            onToggle(false);\n            closeDialog();\n        }, [closeDialog, onToggle]);\n\n        const handleClick = useCallback(\n            (event: MouseEvent<typeof dialogRef.current>) => {\n                if (\n                    (event.target as HTMLDialogElement).nodeName === 'DIALOG' &&\n                    closeOnClickOutside\n                ) {\n                    handleSelfClose();\n                }\n            },\n            [dialogRef, handleSelfClose, closeOnClickOutside]\n        );\n\n        const handleKeyPress = useCallback(\n            (event: KeyboardEvent<HTMLDialogElement>) => {\n                event.code === 'Escape' && handleSelfClose();\n            },\n            [handleSelfClose]\n        );\n\n        const handleExit = useCallback(() => {\n            dialogRef.current?.close();\n            document.body.classList.remove(classes.noScroll);\n        }, [dialogRef]);\n\n        return (\n            <TransitionDialog\n                animation={animation}\n                unmountNode={true}\n                show={isOpen}\n                nodeRef={dialogRef}\n                onExit={handleExit}>\n                <dialog\n                    {...nativeProps}\n                    id={id}\n                    onKeyDown={handleKeyPress}\n                    onClick={handleClick}\n                    className={classNames(classes.dialog, className)}\n                    ref={dialogRef}>\n                    <div className={classes.flex}>\n                        {dialogTitle && (\n                            <header className={classNames(classes.header)}>\n                                <H3>{dialogTitle}</H3>\n                            </header>\n                        )}\n                        <div className={classNames(classes.body)}>{children}</div>\n                        <footer className={classes.actions}>\n                            <ActionsTree actions={actions} />\n                            {showCloseButton && (\n                                <div key={`${id}-close`} className={classes.row}>\n                                    <ActionButton\n                                        onClick={handleSelfClose}\n                                        icon={IconClose}\n                                        title={closeLabel}\n                                    />\n                                </div>\n                            )}\n                        </footer>\n                    </div>\n                </dialog>\n            </TransitionDialog>\n        );\n    }\n);\n\nDialog.displayName = 'Dialog';\n"],"names":["Dialog","forwardRef","children","className","closeOnClickOutside","showCloseButton","onToggle","id","actions","dialogTitle","closeLabel","trapFocus","animation","Animations","nativeProps","ref","dialogRef","useInternalRef","isOpen","closeDialog","useDialogState","useFocusTrap","useEffect","_a","classes","handleSelfClose","useCallback","handleClick","event","handleKeyPress","handleExit","jsx","TransitionDialog","classNames","jsxs","H3","ActionsTree","ActionButton","IconClose"],"mappings":"0nBA0CaA,EAASC,EAAA,WAClB,CACI,CACI,SAAAC,EACA,UAAAC,EACA,oBAAAC,EAAsB,GACtB,gBAAAC,EAAkB,GAClB,SAAAC,EAAW,IAAM,CAAC,EAClB,GAAAC,EACA,QAAAC,EAAU,CAAC,EACX,YAAAC,EACA,WAAAC,EAAa,QACb,UAAAC,EAAY,GACZ,UAAAC,EAAYC,aAAW,WAAW,EAClC,GAAGC,GAEPC,IACC,CACK,MAAAC,EAAYC,iBAAeF,CAAG,EAC9B,CAAC,OAAAG,EAAQ,YAAAC,GAAeC,EAAAA,eAAeb,CAAE,EAClCc,EAAAA,aAAAL,EAAU,QAASE,EAAQP,CAAS,EACjDW,EAAAA,UAAU,IAAM,OACRJ,KACAK,EAAAP,EAAU,UAAV,MAAAO,EAAmB,YACnB,SAAS,KAAK,UAAU,IAAIC,EAAAA,QAAQ,QAAQ,GAEhDlB,EAASY,CAAM,CAChB,EAAA,CAACF,EAAWV,EAAUY,CAAM,CAAC,EAE1B,MAAAO,EAAkBC,EAAAA,YAAY,IAAM,CACtCpB,EAAS,EAAK,EACFa,EAAA,CAAA,EACb,CAACA,EAAab,CAAQ,CAAC,EAEpBqB,EAAcD,EAAA,YACfE,GAAgD,CAExCA,EAAM,OAA6B,WAAa,UACjDxB,GAEgBqB,EAAA,CAExB,EACA,CAACT,EAAWS,EAAiBrB,CAAmB,CACpD,EAEMyB,EAAiBH,EAAA,YAClBE,GAA4C,CACnCA,EAAA,OAAS,UAAYH,EAAgB,CAC/C,EACA,CAACA,CAAe,CACpB,EAEMK,EAAaJ,EAAAA,YAAY,IAAM,QACjCH,EAAAP,EAAU,UAAV,MAAAO,EAAmB,QACnB,SAAS,KAAK,UAAU,OAAOC,EAAAA,QAAQ,QAAQ,CAAA,EAChD,CAACR,CAAS,CAAC,EAGV,OAAAe,EAAA,IAACC,EAAA,iBAAA,CACG,UAAApB,EACA,YAAa,GACb,KAAMM,EACN,QAASF,EACT,OAAQc,EACR,SAAAC,EAAA,IAAC,SAAA,CACI,GAAGjB,EACJ,GAAAP,EACA,UAAWsB,EACX,QAASF,EACT,UAAWM,EAAWT,UAAQ,OAAQrB,CAAS,EAC/C,IAAKa,EACL,SAACkB,EAAA,KAAA,MAAA,CAAI,UAAWV,EAAA,QAAQ,KACnB,SAAA,CACGf,GAAAsB,EAAA,IAAC,SAAO,CAAA,UAAWE,EAAWT,EAAAA,QAAQ,MAAM,EACxC,SAAAO,EAAA,IAACI,EAAI,GAAA,CAAA,SAAA1B,CAAY,CAAA,EACrB,QAEH,MAAI,CAAA,UAAWwB,EAAWT,EAAAA,QAAQ,IAAI,EAAI,SAAAtB,EAAS,EACnDgC,EAAA,KAAA,SAAA,CAAO,UAAWV,EAAAA,QAAQ,QACvB,SAAA,CAAAO,MAACK,EAAAA,aAAY,QAAA5B,EAAkB,EAC9BH,GACG0B,EAAA,IAAC,MAAwB,CAAA,UAAWP,UAAQ,IACxC,SAAAO,EAAA,IAACM,EAAA,aAAA,CACG,QAASZ,EACT,KAAMa,EAAA,UACN,MAAO5B,CAAA,CAAA,GAJL,GAAGH,CAAE,QAMf,CAAA,CAER,CAAA,CAAA,CACJ,CAAA,CAAA,CAAA,CACJ,CACJ,CAAA,CAGZ,EAEAP,EAAO,YAAc"}