@mantine/core/cjs/components/FloatingIndicator/use-floating-indicator.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"use-floating-indicator.cjs","names":["toInt","getEnv"],"sources":["../../../src/components/FloatingIndicator/use-floating-indicator.ts"],"sourcesContent":["import { useEffect, useRef, useState, type RefObject } from 'react';\nimport { useMutationObserverTarget, useTimeout } from '@mantine/hooks';\nimport { getEnv } from '../../core';\nimport { toInt } from '../ScrollArea/utils';\n\nfunction isParent(\n  parentElement: HTMLElement | EventTarget | null,\n  childElement: HTMLElement | null\n) {\n  if (!childElement || !parentElement) {\n    return false;\n  }\n\n  let parent = childElement.parentNode;\n  while (parent != null) {\n    if (parent === parentElement) {\n      return true;\n    }\n    parent = parent.parentNode;\n  }\n  return false;\n}\n\ninterface UseFloatingIndicatorInput {\n  target: HTMLElement | null | undefined;\n  parent: HTMLElement | null | undefined;\n  ref: RefObject<HTMLElement | null>;\n  displayAfterTransitionEnd?: boolean;\n  onTransitionStart?: () => void;\n  onTransitionEnd?: () => void;\n}\n\nexport function useFloatingIndicator({\n  target,\n  parent,\n  ref,\n  displayAfterTransitionEnd,\n  onTransitionStart,\n  onTransitionEnd,\n}: UseFloatingIndicatorInput) {\n  const transitionTimeout = useRef<number>(-1);\n  const previousTarget = useRef<HTMLElement | null | undefined>(target);\n  const [initialized, setInitialized] = useState(false);\n\n  const [hidden, setHidden] = useState(\n    typeof displayAfterTransitionEnd === 'boolean' ? displayAfterTransitionEnd : false\n  );\n\n  const updatePosition = () => {\n    if (!target || !parent || !ref.current) {\n      return;\n    }\n\n    const targetRect = target.getBoundingClientRect();\n    const parentRect = parent.getBoundingClientRect();\n\n    const targetComputedStyle = window.getComputedStyle(target);\n    const parentComputedStyle = window.getComputedStyle(parent);\n\n    const borderTopWidth =\n      toInt(targetComputedStyle.borderTopWidth) + toInt(parentComputedStyle.borderTopWidth);\n    const borderLeftWidth =\n      toInt(targetComputedStyle.borderLeftWidth) + toInt(parentComputedStyle.borderLeftWidth);\n\n    const position = {\n      top: targetRect.top - parentRect.top - borderTopWidth,\n      left: targetRect.left - parentRect.left - borderLeftWidth,\n      width: targetRect.width,\n      height: targetRect.height,\n    };\n\n    ref.current.style.transform = `translateY(${position.top}px) translateX(${position.left}px)`;\n    ref.current.style.width = `${position.width}px`;\n    ref.current.style.height = `${position.height}px`;\n  };\n\n  const updatePositionWithoutAnimation = () => {\n    window.clearTimeout(transitionTimeout.current);\n    if (ref.current) {\n      ref.current.style.transitionDuration = '0ms';\n    }\n    updatePosition();\n    transitionTimeout.current = window.setTimeout(() => {\n      if (ref.current) {\n        ref.current.style.transitionDuration = '';\n      }\n    }, 30);\n  };\n\n  const targetResizeObserver = useRef<ResizeObserver>(null);\n  const parentResizeObserver = useRef<ResizeObserver>(null);\n\n  useEffect(() => {\n    if (initialized && previousTarget.current !== target && onTransitionStart) {\n      onTransitionStart();\n    }\n\n    previousTarget.current = target;\n    updatePosition();\n\n    if (target) {\n      targetResizeObserver.current = new ResizeObserver(updatePositionWithoutAnimation);\n      targetResizeObserver.current.observe(target);\n\n      if (parent) {\n        parentResizeObserver.current = new ResizeObserver(updatePositionWithoutAnimation);\n        parentResizeObserver.current.observe(parent);\n      }\n\n      return () => {\n        targetResizeObserver.current?.disconnect();\n        parentResizeObserver.current?.disconnect();\n      };\n    }\n\n    return undefined;\n  }, [parent, target]);\n\n  useEffect(() => {\n    if (parent) {\n      const handleTransitionEnd = (event: TransitionEvent) => {\n        if (isParent(event.target, parent)) {\n          updatePositionWithoutAnimation();\n          setHidden(false);\n        }\n      };\n\n      parent.addEventListener('transitionend', handleTransitionEnd);\n      return () => {\n        parent.removeEventListener('transitionend', handleTransitionEnd);\n      };\n    }\n\n    return undefined;\n  }, [parent]);\n\n  useEffect(() => {\n    if (ref.current && onTransitionEnd) {\n      const handleIndicatorTransitionEnd = (event: TransitionEvent) => {\n        if (event.propertyName === 'transform') {\n          onTransitionEnd();\n        }\n      };\n\n      ref.current.addEventListener('transitionend', handleIndicatorTransitionEnd);\n      return () => {\n        ref.current?.removeEventListener('transitionend', handleIndicatorTransitionEnd);\n      };\n    }\n\n    return undefined;\n  }, [onTransitionEnd]);\n\n  useTimeout(\n    () => {\n      // Prevents warning about state update without act\n      if (getEnv() !== 'test') {\n        setInitialized(true);\n      }\n    },\n    20,\n    { autoInvoke: true }\n  );\n\n  useMutationObserverTarget(\n    (mutations) => {\n      mutations.forEach((mutation) => {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'dir') {\n          updatePositionWithoutAnimation();\n        }\n      });\n    },\n    { attributes: true, attributeFilter: ['dir'] },\n    () => document.documentElement\n  );\n\n  return { initialized, hidden };\n}\n"],"mappings":"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"}