@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 6.24 kB
Source Map (JSON)
{"version":3,"file":"TooltipFloating.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","getThemeColor","factory","useProps","useMantineTheme","useStyles","useFloatingTooltip","getSingleElementChild","getRefProp","OptionalPortal","Box","getStyleObject","classes"],"sources":["../../../../src/components/Tooltip/TooltipFloating/TooltipFloating.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n getStyleObject,\n getThemeColor,\n useMantineTheme,\n useProps,\n useStyles,\n} from '../../../core';\nimport { OptionalPortal } from '../../Portal';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from '../Tooltip.types';\nimport { useFloatingTooltip } from './use-floating-tooltip';\nimport classes from '../Tooltip.module.css';\n\nexport interface TooltipFloatingProps extends TooltipBaseProps {\n /** Offset from mouse in px @default 10 */\n offset?: number;\n\n /** Uncontrolled tooltip initial opened state */\n defaultOpened?: boolean;\n}\n\nexport type TooltipFloatingFactory = Factory<{\n props: TooltipFloatingProps;\n ref: HTMLDivElement;\n stylesNames: TooltipStylesNames;\n vars: TooltipCssVariables;\n}>;\n\nconst defaultProps = {\n refProp: 'ref',\n withinPortal: true,\n offset: 10,\n position: 'right',\n zIndex: getDefaultZIndex('popover'),\n} satisfies Partial<TooltipFloatingProps>;\n\nconst varsResolver = createVarsResolver<TooltipFloatingFactory>((theme, { radius, color }) => ({\n tooltip: {\n '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n '--tooltip-bg': color ? getThemeColor(color, theme) : undefined,\n '--tooltip-color': color ? 'var(--mantine-color-white)' : undefined,\n },\n}));\n\nexport const TooltipFloating = factory<TooltipFloatingFactory>((_props) => {\n const props = useProps('TooltipFloating', defaultProps, _props);\n const {\n children,\n refProp,\n withinPortal,\n style,\n className,\n classNames,\n styles,\n unstyled,\n radius,\n color,\n label,\n offset,\n position,\n multiline,\n zIndex,\n disabled,\n defaultOpened,\n variant,\n vars,\n portalProps,\n attributes,\n ref,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const getStyles = useStyles<TooltipFloatingFactory>({\n name: 'TooltipFloating',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'tooltip',\n vars,\n varsResolver,\n });\n\n const { handleMouseMove, x, y, opened, boundaryRef, floating, setOpened } = useFloatingTooltip({\n offset,\n position,\n defaultOpened,\n });\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n '[@mantine/core] Tooltip.Floating component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const targetRef = useMergedRef(boundaryRef, getRefProp(child), ref);\n const childProps = child.props as any;\n\n const onMouseEnter = (event: React.MouseEvent<unknown, MouseEvent>) => {\n childProps.onMouseEnter?.(event);\n handleMouseMove(event);\n setOpened(true);\n };\n\n const onMouseLeave = (event: React.MouseEvent<unknown, MouseEvent>) => {\n childProps.onMouseLeave?.(event);\n setOpened(false);\n };\n\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Box\n {...others}\n {...getStyles('tooltip', {\n style: {\n ...getStyleObject(style, theme),\n zIndex: zIndex as React.CSSProperties['zIndex'],\n display: !disabled && opened ? 'block' : 'none',\n top: (y && Math.round(y)) ?? '',\n left: (x && Math.round(x)) ?? '',\n },\n })}\n variant={variant}\n ref={floating}\n mod={{ multiline }}\n >\n {label}\n </Box>\n </OptionalPortal>\n\n {cloneElement(child, {\n ...childProps,\n [refProp]: targetRef,\n onMouseEnter,\n onMouseLeave,\n })}\n </>\n );\n});\n\nTooltipFloating.classes = classes;\nTooltipFloating.varsResolver = varsResolver;\nTooltipFloating.displayName = '@mantine/core/TooltipFloating';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,eAAe;CACnB,SAAS;CACT,cAAc;CACd,QAAQ;CACR,UAAU;CACV,QAAQA,4BAAAA,iBAAiB,UAAU;CACpC;AAED,MAAM,eAAeC,6BAAAA,oBAA4C,OAAO,EAAE,QAAQ,aAAa,EAC7F,SAAS;CACP,oBAAoB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CACxE,gBAAgB,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;CACtD,mBAAmB,QAAQ,+BAA+B,KAAA;CAC3D,EACF,EAAE;AAEH,MAAa,kBAAkBC,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,cAAc,OAAO;CAC/D,MAAM,EACJ,UACA,SACA,cACA,OACA,WACA,YACA,QACA,UACA,QACA,OACA,OACA,QACA,UACA,WACA,QACA,UACA,eACA,SACA,MACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,YAAYC,mBAAAA,UAAkC;EAClD,MAAM;EACN;EACA,SAAA,uBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;EACD,CAAC;CAEF,MAAM,EAAE,iBAAiB,GAAG,GAAG,QAAQ,aAAa,UAAU,cAAcC,6BAAAA,mBAAmB;EAC7F;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,qLACD;CAGH,MAAM,aAAA,GAAA,eAAA,cAAyB,aAAaC,qBAAAA,WAAW,MAAM,EAAE,IAAI;CACnE,MAAM,aAAa,MAAM;CAEzB,MAAM,gBAAgB,UAAiD;AACrE,aAAW,eAAe,MAAM;AAChC,kBAAgB,MAAM;AACtB,YAAU,KAAK;;CAGjB,MAAM,gBAAgB,UAAiD;AACrE,aAAW,eAAe,MAAM;AAChC,YAAU,MAAM;;AAGlB,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,GAAI;EAA2B;YAC7C,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,GAAI;GACJ,GAAI,UAAU,WAAW,EACvB,OAAO;IACL,GAAGC,yBAAAA,eAAe,OAAO,MAAM;IACvB;IACR,SAAS,CAAC,YAAY,SAAS,UAAU;IACzC,MAAM,KAAK,KAAK,MAAM,EAAE,KAAK;IAC7B,OAAO,KAAK,KAAK,MAAM,EAAE,KAAK;IAC/B,EACF,CAAC;GACO;GACT,KAAK;GACL,KAAK,EAAE,WAAW;aAEjB;GACG,CAAA;EACS,CAAA,GAAA,GAAA,MAAA,cAEH,OAAO;EACnB,GAAG;GACF,UAAU;EACX;EACA;EACD,CAAC,CACD,EAAA,CAAA;EAEL;AAEF,gBAAgB,UAAUC,uBAAAA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}