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

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

{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/lib/Tooltip/Tooltip.tsx"],"sourcesContent":["import type {ReactNode} from 'react';\nimport {useCallback} from 'react';\nimport {useState, useEffect, useRef} from 'react';\nimport {forwardRef, Fragment} from 'react';\nimport classNames from 'classnames';\nimport type {Placement} from '@floating-ui/react-dom';\nimport {useFloating, autoUpdate, offset, arrow, flip} from '@floating-ui/react-dom';\nimport {useRootTheme, useLocalTheme} from 'css-vars-hook';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {Portal} from '@/internal/Portal';\nimport {useDismiss} from '@/internal/hooks/useDismiss.ts';\nimport {useFocusTrap} from '@/internal/hooks/useFocusTrap.ts';\n\nimport {Arrow} from './Arrow.tsx';\nimport classes from './Tooltip.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        children: ReactNode;\n        /** Control visibility of Tooltip */\n        isOpen?: boolean;\n        /**\n         * Provide Tooltip content\n         * @example\n         * <Tooltip content={<div>Foo<div>} //... />\n         */\n        content: ReactNode;\n        /** Set class name of reference component wrapper */\n        referenceClassName?: string;\n        /** Provide callback for open/close events */\n        onToggle?: (openState: boolean) => void;\n        /** Make user interactions with Tooltip possible */\n        interactive?: boolean;\n        /** Define recommended placement for Tooltip content, applied when possible */\n        placement?: Placement;\n    };\n\nexport const Tooltip = forwardRef<HTMLDivElement, Props>(\n    (\n        {\n            children,\n            className,\n            isOpen: openProp = false,\n            content,\n            referenceClassName,\n            onToggle = () => {},\n            interactive = true,\n            placement: placementProp = 'bottom',\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const [isOpen, setOpen] = useState(openProp);\n        useEffect(() => {\n            setOpen(openProp);\n        }, [openProp, setOpen]);\n        useEffect(() => {\n            onToggle(isOpen);\n        }, [isOpen, onToggle]);\n\n        const arrowRef = useRef(null);\n\n        const {refs, floatingStyles, middlewareData, placement} = useFloating<HTMLDivElement>({\n            strategy: 'fixed',\n            placement: placementProp,\n            whileElementsMounted: autoUpdate,\n            middleware: [\n                offset(18),\n                flip(),\n                arrow({\n                    element: arrowRef,\n                }),\n            ],\n        });\n        const {LocalRoot} = useLocalTheme();\n        const {getTheme} = useRootTheme();\n\n        const handleDismiss = useCallback(() => {\n            setOpen(false);\n        }, [setOpen]);\n\n        useDismiss(handleDismiss, refs.reference, isOpen);\n        useFocusTrap(refs.floating.current, isOpen, interactive);\n\n        return (\n            <Fragment>\n                <div\n                    ref={refs.setReference}\n                    className={classNames(classes.reference, referenceClassName)}>\n                    {children}\n                </div>\n                {isOpen && (\n                    <Portal>\n                        <div\n                            ref={refs.setFloating}\n                            style={floatingStyles}\n                            className={classNames({[classes.unfocusable]: !interactive})}>\n                            <LocalRoot className={classes.provider} theme={getTheme()}>\n                                <div\n                                    {...nativeProps}\n                                    ref={ref}\n                                    className={classNames(classes.tooltip, className)}>\n                                    <Arrow\n                                        ref={arrowRef}\n                                        placement={placement}\n                                        left={middlewareData.arrow?.x}\n                                        top={middlewareData.arrow?.y}\n                                    />\n                                    {content}\n                                </div>\n                            </LocalRoot>\n                        </div>\n                    </Portal>\n                )}\n            </Fragment>\n        );\n    }\n);\n\nTooltip.displayName = 'Tooltip';\n"],"names":["Tooltip","forwardRef","children","className","openProp","content","referenceClassName","onToggle","interactive","placementProp","nativeProps","ref","isOpen","setOpen","useState","useEffect","arrowRef","useRef","refs","floatingStyles","middlewareData","placement","useFloating","autoUpdate","offset","flip","arrow","LocalRoot","useLocalTheme","getTheme","useRootTheme","handleDismiss","useCallback","useDismiss","useFocusTrap","Fragment","jsx","classNames","classes","Portal","jsxs","Arrow"],"mappings":"6bAsCaA,EAAUC,EAAAA,WACnB,CACI,CACI,SAAAC,EACA,UAAAC,EACA,OAAQC,EAAW,GACnB,QAAAC,EACA,mBAAAC,EACA,SAAAC,EAAW,IAAM,CAAC,EAClB,YAAAC,EAAc,GACd,UAAWC,EAAgB,SAC3B,GAAGC,CAAA,EAEPC,IACC,CACD,KAAM,CAACC,EAAQC,CAAO,EAAIC,EAAAA,SAASV,CAAQ,EAC3CW,EAAAA,UAAU,IAAM,CACZF,EAAQT,CAAQ,CACpB,EAAG,CAACA,EAAUS,CAAO,CAAC,EACtBE,EAAAA,UAAU,IAAM,CACZR,EAASK,CAAM,CACnB,EAAG,CAACA,EAAQL,CAAQ,CAAC,EAErB,MAAMS,EAAWC,EAAAA,OAAO,IAAI,EAEtB,CAAC,KAAAC,EAAM,eAAAC,EAAgB,eAAAC,EAAgB,UAAAC,CAAA,EAAaC,EAAAA,YAA4B,CAClF,SAAU,QACV,UAAWb,EACX,qBAAsBc,EAAAA,WACtB,WAAY,CACRC,EAAAA,OAAO,EAAE,EACTC,OAAA,EACAC,QAAM,CACF,QAASV,CAAA,CACZ,CAAA,CACL,CACH,EACK,CAAC,UAAAW,CAAA,EAAaC,gBAAA,EACd,CAAC,SAAAC,CAAA,EAAYC,eAAA,EAEbC,EAAgBC,EAAAA,YAAY,IAAM,CACpCnB,EAAQ,EAAK,CACjB,EAAG,CAACA,CAAO,CAAC,EAEZoB,OAAAA,EAAAA,WAAWF,EAAeb,EAAK,UAAWN,CAAM,EAChDsB,EAAAA,aAAahB,EAAK,SAAS,QAASN,EAAQJ,CAAW,SAGlD2B,WAAA,CACG,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACG,IAAKlB,EAAK,aACV,UAAWmB,EAAWC,UAAQ,UAAWhC,CAAkB,EAC1D,SAAAJ,CAAA,CAAA,EAEJU,SACI2B,SAAA,CACG,SAAAH,EAAAA,IAAC,MAAA,CACG,IAAKlB,EAAK,YACV,MAAOC,EACP,UAAWkB,EAAW,CAAC,CAACC,EAAAA,QAAQ,WAAW,EAAG,CAAC9B,EAAY,EAC3D,eAACmB,EAAA,CAAU,UAAWW,EAAAA,QAAQ,SAAU,MAAOT,IAC3C,SAAAW,EAAAA,KAAC,MAAA,CACI,GAAG9B,EACJ,IAAAC,EACA,UAAW0B,EAAWC,UAAQ,QAASnC,CAAS,EAChD,SAAA,CAAAiC,EAAAA,IAACK,EAAAA,MAAA,CACG,IAAKzB,EACL,UAAAK,EACA,KAAMD,EAAe,OAAO,EAC5B,IAAKA,EAAe,OAAO,CAAA,CAAA,EAE9Bf,CAAA,CAAA,CAAA,CACL,CACJ,CAAA,CAAA,CACJ,CACJ,CAAA,EAER,CAER,CACJ,EAEAL,EAAQ,YAAc"}