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

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

{"version":3,"file":"Toast.cjs","sources":["../../../../src/lib/Toast/Toast.tsx"],"sourcesContent":["import type {FC, ReactNode} from 'react';\nimport {useEffect} from 'react';\nimport {forwardRef} from 'react';\nimport classNames from 'classnames';\nimport {useRootTheme, useLocalTheme} from 'css-vars-hook';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {Portal} from '@/internal/Portal';\nimport {IconClose, IconError, IconSuccess, IconWarning, IconNotification} from '@/internal/Icons';\nimport {useInterval} from '@/internal/hooks/useInterval.ts';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\nimport {TransitionSlideBottom} from '@/internal/Transitions';\nimport type {ActionProps} from '@/internal/Actions';\nimport {ActionsTree, ActionButton} from '@/internal/Actions';\n\nimport {useToastState} from './useToastState.tsx';\nimport classes from './Toast.module.css';\n\nenum Variants {\n    default = 'default',\n    success = 'success',\n    error = 'error',\n    warning = 'warning',\n}\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        /** Provide unique id to the Toast */\n        id: NonNullable<LibraryProps['id']>;\n        children?: ReactNode;\n        /** Provide an array of actions with callbacks */\n        actions?: (ActionProps | [ActionProps, ActionProps])[];\n        /**\n         * Provide an Icon component to show instead default one\n         */\n        icon?: FC;\n        /** Select a design variant of Toast to show */\n        variant?: keyof typeof Variants;\n        /** Provide a main text to display inside Toast */\n        title: string;\n        /** Provide an additional text to display inside Toast */\n        body?: string;\n        /** Callback triggered when user click closes Toast */\n        onToggle?: (isOpen: boolean) => void;\n        /** Set time in seconds to auto close Toast */\n        autoClose?: number;\n        /** Provide custom label for close Toast action */\n        closeLabel?: string;\n    };\n\nexport const Toast = forwardRef<HTMLDivElement, Props>(\n    (\n        {\n            children,\n            className,\n            actions = [],\n            icon: IconProp,\n            variant = Variants.default,\n            title,\n            body,\n            onToggle = () => {},\n            id,\n            autoClose = null,\n            closeLabel = 'Close',\n            ...nativeProps\n        },\n        refProp\n    ) => {\n        const {isOpen, closeToast} = useToastState(id);\n        const {LocalRoot: Provider} = useLocalTheme();\n        const {getTheme} = useRootTheme();\n        const Icon = IconProp\n            ? IconProp\n            : {\n                  [Variants.default]: IconNotification,\n                  [Variants.error]: IconError,\n                  [Variants.success]: IconSuccess,\n                  [Variants.warning]: IconWarning,\n              }[variant];\n        useEffect(() => {\n            onToggle(isOpen);\n        }, [isOpen, onToggle]);\n        const needsAutoClose = typeof autoClose === 'number';\n        const interval = needsAutoClose ? autoClose * 1000 : null;\n        useInterval({callback: closeToast, interval, condition: needsAutoClose});\n        const ref = useInternalRef(refProp);\n        return (\n            <Portal>\n                <TransitionSlideBottom show={isOpen} nodeRef={ref}>\n                    <Provider className={classes.provider} theme={getTheme()}>\n                        <div\n                            {...nativeProps}\n                            className={classNames(\n                                classes.toast,\n                                {\n                                    [classes.success]: variant === Variants.success,\n                                    [classes.warning]: variant === Variants.warning,\n                                    [classes.error]: variant === Variants.error,\n                                },\n                                className\n                            )}\n                            ref={ref}>\n                            <div className={classes.content}>\n                                <div className={classes.left}>\n                                    <Icon className={classes.icon} />\n                                </div>\n                                <div className={classes.right}>\n                                    <div className={classes.title}>{title}</div>\n                                    {body && <div className={classes.body}>{body}</div>}\n                                </div>\n                            </div>\n                            <footer className={classes.actions}>\n                                <ActionsTree\n                                    actions={actions}\n                                    classNameAction={classes.actionButton}\n                                />\n                                <div key={`${id}-close`} className={classes.row}>\n                                    <ActionButton\n                                        className={classes.actionButton}\n                                        onClick={closeToast}\n                                        icon={IconClose}\n                                        title={closeLabel}\n                                    />\n                                </div>\n                            </footer>\n                        </div>\n                    </Provider>\n                </TransitionSlideBottom>\n            </Portal>\n        );\n    }\n);\n\nToast.displayName = 'Toast';\n"],"names":["Toast","forwardRef","children","className","actions","IconProp","variant","title","body","onToggle","id","autoClose","closeLabel","nativeProps","refProp","isOpen","closeToast","useToastState","Provider","useLocalTheme","getTheme","useRootTheme","Icon","IconNotification","IconError","IconSuccess","IconWarning","useEffect","needsAutoClose","interval","useInterval","ref","useInternalRef","jsx","Portal","TransitionSlideBottom","classes","jsxs","classNames","ActionsTree","ActionButton","IconClose"],"mappings":"8zBAkDaA,EAAQC,EAAA,WACjB,CACI,CACI,SAAAC,EACA,UAAAC,EACA,QAAAC,EAAU,CAAC,EACX,KAAMC,EACN,QAAAC,EAAU,UACV,MAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,IAAM,CAAC,EAClB,GAAAC,EACA,UAAAC,EAAY,KACZ,WAAAC,EAAa,QACb,GAAGC,GAEPC,IACC,CACD,KAAM,CAAC,OAAAC,EAAQ,WAAAC,GAAcC,EAAAA,cAAcP,CAAE,EACvC,CAAC,UAAWQ,CAAQ,EAAIC,gBAAc,EACtC,CAAC,SAAAC,CAAQ,EAAIC,eAAa,EAC1BC,EAAOjB,GAEP,CACK,QAAmBkB,EAAA,iBACnB,MAAiBC,EAAA,UACjB,QAAmBC,EAAA,YACnB,QAAmBC,EAAAA,aACtBpB,CAAO,EACfqB,EAAAA,UAAU,IAAM,CACZlB,EAASM,CAAM,CAAA,EAChB,CAACA,EAAQN,CAAQ,CAAC,EACf,MAAAmB,EAAiB,OAAOjB,GAAc,SACtCkB,EAAWD,EAAiBjB,EAAY,IAAO,KACrDmB,EAAA,YAAY,CAAC,SAAUd,EAAY,SAAAa,EAAU,UAAWD,EAAe,EACjE,MAAAG,EAAMC,iBAAelB,CAAO,EAClC,OACKmB,EAAA,IAAAC,SAAA,CACG,SAACD,EAAAA,IAAAE,EAAAA,YAAA,CAAsB,KAAMpB,EAAQ,QAASgB,EAC1C,SAAAE,EAAA,IAACf,GAAS,UAAWkB,EAAAA,QAAQ,SAAU,MAAOhB,IAC1C,SAAAiB,EAAA,KAAC,MAAA,CACI,GAAGxB,EACJ,UAAWyB,EACPF,EAAAA,QAAQ,MACR,CACI,CAACA,EAAA,QAAQ,OAAO,EAAG9B,IAAY,UAC/B,CAAC8B,EAAA,QAAQ,OAAO,EAAG9B,IAAY,UAC/B,CAAC8B,EAAA,QAAQ,KAAK,EAAG9B,IAAY,OACjC,EACAH,CACJ,EACA,IAAA4B,EACA,SAAA,CAACM,EAAA,KAAA,MAAA,CAAI,UAAWD,EAAAA,QAAQ,QACpB,SAAA,CAACH,EAAAA,IAAA,MAAA,CAAI,UAAWG,EAAQ,QAAA,KACpB,eAACd,EAAK,CAAA,UAAWc,EAAQ,QAAA,IAAA,CAAM,CACnC,CAAA,EACCC,EAAA,KAAA,MAAA,CAAI,UAAWD,EAAAA,QAAQ,MACpB,SAAA,CAAAH,EAAA,IAAC,MAAI,CAAA,UAAWG,EAAQ,QAAA,MAAQ,SAAM7B,EAAA,EACrCC,GAASyB,EAAAA,IAAA,MAAA,CAAI,UAAWG,EAAAA,QAAQ,KAAO,SAAK5B,CAAA,CAAA,CAAA,CACjD,CAAA,CAAA,EACJ,EACC6B,EAAA,KAAA,SAAA,CAAO,UAAWD,EAAAA,QAAQ,QACvB,SAAA,CAAAH,EAAA,IAACM,EAAA,YAAA,CACG,QAAAnC,EACA,gBAAiBgC,EAAAA,QAAQ,YAAA,CAC7B,EACCH,EAAA,IAAA,MAAA,CAAwB,UAAWG,EAAAA,QAAQ,IACxC,SAAAH,EAAA,IAACO,EAAA,aAAA,CACG,UAAWJ,EAAQ,QAAA,aACnB,QAASpB,EACT,KAAMyB,EAAA,UACN,MAAO7B,CAAA,CAAA,GALL,GAAGF,CAAE,QAOf,CAAA,CACJ,CAAA,CAAA,CAAA,CAAA,CAER,CAAA,CACJ,CAAA,EACJ,CAAA,CAGZ,EAEAV,EAAM,YAAc"}