koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
1 lines • 6.51 kB
Source Map (JSON)
{"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","_a","_b"],"mappings":"6bAsCaA,EAAUC,EAAA,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,GAEPC,IACC,SACD,KAAM,CAACC,EAAQC,CAAO,EAAIC,EAAAA,SAASV,CAAQ,EAC3CW,EAAAA,UAAU,IAAM,CACZF,EAAQT,CAAQ,CAAA,EACjB,CAACA,EAAUS,CAAO,CAAC,EACtBE,EAAAA,UAAU,IAAM,CACZR,EAASK,CAAM,CAAA,EAChB,CAACA,EAAQL,CAAQ,CAAC,EAEf,MAAAS,EAAWC,SAAO,IAAI,EAEtB,CAAC,KAAAC,EAAM,eAAAC,EAAgB,eAAAC,EAAgB,UAAAC,CAAA,EAAaC,EAAAA,YAA4B,CAClF,SAAU,QACV,UAAWb,EACX,qBAAsBc,EAAA,WACtB,WAAY,CACRC,EAAAA,OAAO,EAAE,EACTC,OAAK,EACLC,QAAM,CACF,QAASV,CACZ,CAAA,CAAA,CACL,CACH,EACK,CAAC,UAAAW,CAAS,EAAIC,gBAAc,EAC5B,CAAC,SAAAC,CAAQ,EAAIC,eAAa,EAE1BC,EAAgBC,EAAAA,YAAY,IAAM,CACpCnB,EAAQ,EAAK,CAAA,EACd,CAACA,CAAO,CAAC,EAEDoB,OAAAA,EAAAA,WAAAF,EAAeb,EAAK,UAAWN,CAAM,EAChDsB,EAAAA,aAAahB,EAAK,SAAS,QAASN,EAAQJ,CAAW,SAGlD2B,WACG,CAAA,SAAA,CAAAC,EAAA,IAAC,MAAA,CACG,IAAKlB,EAAK,aACV,UAAWmB,EAAWC,UAAQ,UAAWhC,CAAkB,EAC1D,SAAAJ,CAAA,CACL,EACCU,SACI2B,SACG,CAAA,SAAAH,EAAA,IAAC,MAAA,CACG,IAAKlB,EAAK,YACV,MAAOC,EACP,UAAWkB,EAAW,CAAC,CAACC,UAAQ,WAAW,EAAG,CAAC9B,EAAY,EAC3D,eAACmB,EAAU,CAAA,UAAWW,EAAAA,QAAQ,SAAU,MAAOT,IAC3C,SAAAW,EAAA,KAAC,MAAA,CACI,GAAG9B,EACJ,IAAAC,EACA,UAAW0B,EAAWC,UAAQ,QAASnC,CAAS,EAChD,SAAA,CAAAiC,EAAA,IAACK,EAAA,MAAA,CACG,IAAKzB,EACL,UAAAK,EACA,MAAMqB,EAAAtB,EAAe,QAAf,YAAAsB,EAAsB,EAC5B,KAAKC,EAAAvB,EAAe,QAAf,YAAAuB,EAAsB,CAAA,CAC/B,EACCtC,CAAA,CAAA,CAAA,CAET,CAAA,CAAA,CAAA,CAER,CAAA,CAAA,EAER,CAAA,CAGZ,EAEAL,EAAQ,YAAc"}