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","classes","handleSelfClose","useCallback","handleClick","event","handleKeyPress","handleExit","jsx","TransitionDialog","classNames","jsxs","H3","ActionsTree","ActionButton","IconClose"],"mappings":"0nBA0CaA,EAASC,EAAAA,WAClB,CACI,CACI,SAAAC,EACA,UAAAC,EACA,oBAAAC,EAAsB,GACtB,gBAAAC,EAAkB,GAClB,SAAAC,EAAW,IAAM,CAAC,EAClB,GAAAC,EACA,QAAAC,EAAU,CAAA,EACV,YAAAC,EACA,WAAAC,EAAa,QACb,UAAAC,EAAY,GACZ,UAAAC,EAAYC,EAAAA,WAAW,WAAW,EAClC,GAAGC,CAAA,EAEPC,IACC,CACD,MAAMC,EAAYC,EAAAA,eAAeF,CAAG,EAC9B,CAAC,OAAAG,EAAQ,YAAAC,GAAeC,EAAAA,eAAeb,CAAE,EAC/Cc,EAAAA,aAAaL,EAAU,QAASE,EAAQP,CAAS,EACjDW,EAAAA,UAAU,IAAM,CACRJ,IACAF,EAAU,SAAS,UAAA,EACnB,SAAS,KAAK,UAAU,IAAIO,EAAAA,QAAQ,QAAQ,GAEhDjB,EAASY,CAAM,CACnB,EAAG,CAACF,EAAWV,EAAUY,CAAM,CAAC,EAEhC,MAAMM,EAAkBC,EAAAA,YAAY,IAAM,CACtCnB,EAAS,EAAK,EACda,EAAA,CACJ,EAAG,CAACA,EAAab,CAAQ,CAAC,EAEpBoB,EAAcD,EAAAA,YACfE,GAAgD,CAExCA,EAAM,OAA6B,WAAa,UACjDvB,GAEAoB,EAAA,CAER,EACA,CAACR,EAAWQ,EAAiBpB,CAAmB,CAAA,EAG9CwB,EAAiBH,EAAAA,YAClBE,GAA4C,CACzCA,EAAM,OAAS,UAAYH,EAAA,CAC/B,EACA,CAACA,CAAe,CAAA,EAGdK,EAAaJ,EAAAA,YAAY,IAAM,CACjCT,EAAU,SAAS,MAAA,EACnB,SAAS,KAAK,UAAU,OAAOO,EAAAA,QAAQ,QAAQ,CACnD,EAAG,CAACP,CAAS,CAAC,EAEd,OACIc,EAAAA,IAACC,EAAAA,iBAAA,CACG,UAAAnB,EACA,YAAa,GACb,KAAMM,EACN,QAASF,EACT,OAAQa,EACR,SAAAC,EAAAA,IAAC,SAAA,CACI,GAAGhB,EACJ,GAAAP,EACA,UAAWqB,EACX,QAASF,EACT,UAAWM,EAAWT,UAAQ,OAAQpB,CAAS,EAC/C,IAAKa,EACL,SAAAiB,EAAAA,KAAC,MAAA,CAAI,UAAWV,EAAAA,QAAQ,KACnB,SAAA,CAAAd,GACGqB,EAAAA,IAAC,SAAA,CAAO,UAAWE,EAAWT,EAAAA,QAAQ,MAAM,EACxC,SAAAO,EAAAA,IAACI,EAAAA,GAAA,CAAI,SAAAzB,CAAA,CAAY,EACrB,QAEH,MAAA,CAAI,UAAWuB,EAAWT,EAAAA,QAAQ,IAAI,EAAI,SAAArB,EAAS,EACpD+B,EAAAA,KAAC,SAAA,CAAO,UAAWV,EAAAA,QAAQ,QACvB,SAAA,CAAAO,MAACK,EAAAA,aAAY,QAAA3B,EAAkB,EAC9BH,GACGyB,EAAAA,IAAC,MAAA,CAAwB,UAAWP,UAAQ,IACxC,SAAAO,EAAAA,IAACM,EAAAA,aAAA,CACG,QAASZ,EACT,KAAMa,EAAAA,UACN,MAAO3B,CAAA,CAAA,GAJL,GAAGH,CAAE,QAMf,CAAA,CAAA,CAER,CAAA,CAAA,CACJ,CAAA,CAAA,CACJ,CAAA,CAGZ,CACJ,EAEAP,EAAO,YAAc"}