@mantine/core/cjs/components/Tooltip/TooltipFloating/use-floating-tooltip.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"use-floating-tooltip.cjs","names":[],"sources":["../../../../src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { getOverflowAncestors, shift, useFloating } from '@floating-ui/react';\nimport { FloatingPosition } from '../../../utils/Floating';\n\ninterface UseFloatingTooltip {\n  offset: number;\n  position: FloatingPosition;\n  defaultOpened?: boolean;\n}\n\nexport function useFloatingTooltip<T extends HTMLElement = any>({\n  offset,\n  position,\n  defaultOpened,\n}: UseFloatingTooltip) {\n  const [opened, setOpened] = useState(defaultOpened);\n  const boundaryRef = useRef<T>(null);\n  const { x, y, elements, refs, update, placement } = useFloating({\n    placement: position,\n    middleware: [\n      shift({\n        crossAxis: true,\n        padding: 5,\n        rootBoundary: 'document',\n      }),\n    ],\n  });\n\n  const horizontalOffset = placement.includes('right')\n    ? offset\n    : position.includes('left')\n      ? offset * -1\n      : 0;\n\n  const verticalOffset = placement.includes('bottom')\n    ? offset\n    : position.includes('top')\n      ? offset * -1\n      : 0;\n\n  const handleMouseMove = useCallback(\n    ({ clientX, clientY }: MouseEvent | React.MouseEvent<T, MouseEvent>) => {\n      refs.setPositionReference({\n        getBoundingClientRect() {\n          return {\n            width: 0,\n            height: 0,\n            x: clientX,\n            y: clientY,\n            left: clientX + horizontalOffset,\n            top: clientY + verticalOffset,\n            right: clientX,\n            bottom: clientY,\n          };\n        },\n      });\n    },\n    [elements.reference]\n  );\n\n  useEffect(() => {\n    if (refs.floating.current) {\n      const boundary = boundaryRef.current!;\n      boundary.addEventListener('mousemove', handleMouseMove);\n\n      const parents = getOverflowAncestors(refs.floating.current);\n      parents.forEach((parent) => {\n        parent.addEventListener('scroll', update);\n      });\n\n      return () => {\n        boundary.removeEventListener('mousemove', handleMouseMove);\n        parents.forEach((parent) => {\n          parent.removeEventListener('scroll', update);\n        });\n      };\n    }\n\n    return undefined;\n  }, [elements.reference, refs.floating.current, update, handleMouseMove, opened]);\n\n  return { handleMouseMove, x, y, opened, setOpened, boundaryRef, floating: refs.setFloating };\n}\n"],"mappings":";;;;;AAUA,SAAgB,mBAAgD,EAC9D,QACA,UACA,iBACqB;CACrB,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAAsB,cAAc;CACnD,MAAM,eAAA,GAAA,MAAA,QAAwB,KAAK;CACnC,MAAM,EAAE,GAAG,GAAG,UAAU,MAAM,QAAQ,eAAA,GAAA,mBAAA,aAA0B;EAC9D,WAAW;EACX,YAAY,EAAA,GAAA,mBAAA,OACJ;GACJ,WAAW;GACX,SAAS;GACT,cAAc;GACf,CAAC,CACH;EACF,CAAC;CAEF,MAAM,mBAAmB,UAAU,SAAS,QAAQ,GAChD,SACA,SAAS,SAAS,OAAO,GACvB,SAAS,KACT;CAEN,MAAM,iBAAiB,UAAU,SAAS,SAAS,GAC/C,SACA,SAAS,SAAS,MAAM,GACtB,SAAS,KACT;CAEN,MAAM,mBAAA,GAAA,MAAA,cACH,EAAE,SAAS,cAA4D;AACtE,OAAK,qBAAqB,EACxB,wBAAwB;AACtB,UAAO;IACL,OAAO;IACP,QAAQ;IACR,GAAG;IACH,GAAG;IACH,MAAM,UAAU;IAChB,KAAK,UAAU;IACf,OAAO;IACP,QAAQ;IACT;KAEJ,CAAC;IAEJ,CAAC,SAAS,UAAU,CACrB;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,KAAK,SAAS,SAAS;GACzB,MAAM,WAAW,YAAY;AAC7B,YAAS,iBAAiB,aAAa,gBAAgB;GAEvD,MAAM,WAAA,GAAA,mBAAA,sBAA+B,KAAK,SAAS,QAAQ;AAC3D,WAAQ,SAAS,WAAW;AAC1B,WAAO,iBAAiB,UAAU,OAAO;KACzC;AAEF,gBAAa;AACX,aAAS,oBAAoB,aAAa,gBAAgB;AAC1D,YAAQ,SAAS,WAAW;AAC1B,YAAO,oBAAoB,UAAU,OAAO;MAC5C;;;IAKL;EAAC,SAAS;EAAW,KAAK,SAAS;EAAS;EAAQ;EAAiB;EAAO,CAAC;AAEhF,QAAO;EAAE;EAAiB;EAAG;EAAG;EAAQ;EAAW;EAAa,UAAU,KAAK;EAAa"}