@tosui/react 0.1.3 → 0.1.5

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState, useRef, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./tooltip.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type TooltipProps = {\n  /** Tooltip content */\n  label: ReactNode;\n  /** Placement of tooltip */\n  placement?: TooltipPlacement;\n  /** Delay before showing (ms) */\n  openDelay?: number;\n  /** Delay before hiding (ms) */\n  closeDelay?: number;\n  /** Whether tooltip is disabled */\n  disabled?: boolean;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Callback when tooltip opens */\n  onOpen?: () => void;\n  /** Callback when tooltip closes */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n  /** Trigger element */\n  children: ReactNode;\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Tooltip - Hover-triggered information overlay\n *\n * A tooltip component that:\n * - Shows on hover and focus\n * - Positions relative to trigger element\n * - Supports configurable delays\n * - Supports controlled mode via isOpen/onOpen/onClose\n * - Renders via portal\n */\nexport function Tooltip({\n  label,\n  placement = \"top\",\n  openDelay = 0,\n  closeDelay = 0,\n  disabled = false,\n  isOpen: controlledIsOpen,\n  onOpen,\n  onClose,\n  className,\n  children,\n}: TooltipProps) {\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const isControlled = controlledIsOpen !== undefined;\n  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;\n\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const triggerRef = useRef<HTMLElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const openTimeoutRef = useRef<number | null>(null);\n  const closeTimeoutRef = useRef<number | null>(null);\n\n  const updatePosition = () => {\n    if (!triggerRef.current || !tooltipRef.current) return;\n\n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.current.getBoundingClientRect();\n    const gap = 8;\n\n    let top = 0;\n    let left = 0;\n\n    switch (placement) {\n      case \"top\":\n        top = triggerRect.top - tooltipRect.height - gap;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;\n        break;\n      case \"bottom\":\n        top = triggerRect.bottom + gap;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;\n        break;\n      case \"left\":\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;\n        left = triggerRect.left - tooltipRect.width - gap;\n        break;\n      case \"right\":\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;\n        left = triggerRect.right + gap;\n        break;\n    }\n\n    setPosition({ top: top + window.scrollY, left: left + window.scrollX });\n  };\n\n  useEffect(() => {\n    if (isOpen) updatePosition();\n  }, [isOpen, placement]);\n\n  const setOpen = (open: boolean) => {\n    if (!isControlled) {\n      setInternalIsOpen(open);\n    }\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  };\n\n  const handleOpen = () => {\n    if (disabled) return;\n    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);\n\n    if (openDelay > 0) {\n      openTimeoutRef.current = window.setTimeout(() => setOpen(true), openDelay);\n    } else {\n      setOpen(true);\n    }\n  };\n\n  const handleClose = () => {\n    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);\n\n    if (closeDelay > 0) {\n      closeTimeoutRef.current = window.setTimeout(\n        () => setOpen(false),\n        closeDelay\n      );\n    } else {\n      setOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    return () => {\n      if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);\n      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);\n    };\n  }, []);\n\n  return (\n    <>\n      <Box\n        as=\"span\"\n        ref={triggerRef}\n        display=\"inline-block\"\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocus={handleOpen}\n        onBlur={handleClose}\n      >\n        {children}\n      </Box>\n      {isOpen &&\n        createPortal(\n          <Box\n            ref={tooltipRef}\n            position=\"absolute\"\n            px={2}\n            py={1}\n            bg=\"foreground\"\n            color=\"foreground-inverted\"\n            fontSize=\"sm\"\n            rounded=\"sm\"\n            shadow=\"md\"\n            zIndex=\"tooltip\"\n            className={clsx(styles.tooltip, styles[placement], className)}\n            style={{ top: position.top, left: position.left }}\n            role=\"tooltip\"\n          >\n            {label}\n          </Box>,\n          document.body\n        )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState, useRef, useEffect, useCallback, useLayoutEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./tooltip.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type TooltipProps = {\n  /** Tooltip content */\n  label: ReactNode;\n  /** Placement of tooltip */\n  placement?: TooltipPlacement;\n  /** Delay before showing (ms) */\n  openDelay?: number;\n  /** Delay before hiding (ms) */\n  closeDelay?: number;\n  /** Whether tooltip is disabled */\n  disabled?: boolean;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Callback when tooltip opens */\n  onOpen?: () => void;\n  /** Callback when tooltip closes */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n  /** Trigger element */\n  children: ReactNode;\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Tooltip - Hover-triggered information overlay\n *\n * A tooltip component that:\n * - Shows on hover and focus\n * - Positions relative to trigger element\n * - Supports configurable delays\n * - Supports controlled mode via isOpen/onOpen/onClose\n * - Renders via portal\n */\nexport function Tooltip({\n  label,\n  placement = \"top\",\n  openDelay = 0,\n  closeDelay = 0,\n  disabled = false,\n  isOpen: controlledIsOpen,\n  onOpen,\n  onClose,\n  className,\n  children,\n}: TooltipProps) {\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const isControlled = controlledIsOpen !== undefined;\n  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;\n\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const triggerRef = useRef<HTMLElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const openTimeoutRef = useRef<number | null>(null);\n  const closeTimeoutRef = useRef<number | null>(null);\n\n  const updatePosition = useCallback(() => {\n    if (!triggerRef.current || !tooltipRef.current) return;\n\n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.current.getBoundingClientRect();\n    const gap = 8;\n\n    let top = 0;\n    let left = 0;\n\n    switch (placement) {\n      case \"top\":\n        top = triggerRect.top - tooltipRect.height - gap;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;\n        break;\n      case \"bottom\":\n        top = triggerRect.bottom + gap;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;\n        break;\n      case \"left\":\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;\n        left = triggerRect.left - tooltipRect.width - gap;\n        break;\n      case \"right\":\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;\n        left = triggerRect.right + gap;\n        break;\n    }\n\n    setPosition({ top: top + window.scrollY, left: left + window.scrollX });\n  }, [placement]);\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- useLayoutEffect for DOM measurement before paint\n    if (isOpen) updatePosition();\n  }, [isOpen, updatePosition]);\n\n  const setOpen = (open: boolean) => {\n    if (!isControlled) {\n      setInternalIsOpen(open);\n    }\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  };\n\n  const handleOpen = () => {\n    if (disabled) return;\n    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);\n\n    if (openDelay > 0) {\n      openTimeoutRef.current = window.setTimeout(() => setOpen(true), openDelay);\n    } else {\n      setOpen(true);\n    }\n  };\n\n  const handleClose = () => {\n    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);\n\n    if (closeDelay > 0) {\n      closeTimeoutRef.current = window.setTimeout(\n        () => setOpen(false),\n        closeDelay\n      );\n    } else {\n      setOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    return () => {\n      if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);\n      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);\n    };\n  }, []);\n\n  return (\n    <>\n      <Box\n        as=\"span\"\n        ref={triggerRef}\n        display=\"inline-block\"\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocus={handleOpen}\n        onBlur={handleClose}\n      >\n        {children}\n      </Box>\n      {isOpen &&\n        createPortal(\n          <Box\n            ref={tooltipRef}\n            position=\"absolute\"\n            px={2}\n            py={1}\n            bg=\"foreground\"\n            color=\"foreground-inverted\"\n            fontSize=\"sm\"\n            rounded=\"sm\"\n            shadow=\"md\"\n            zIndex=\"tooltip\"\n            className={clsx(styles.tooltip, styles[placement], className)}\n            style={{ top: position.top, left: position.left }}\n            role=\"tooltip\"\n          >\n            {label}\n          </Box>,\n          document.body\n        )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}