@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/{chunk-IXJMMM26.mjs → chunk-6GIJ7NFV.mjs}

@@ -1,10 +1,30 @@
-import { StatusIconWithLoading, StatusIcon } from './chunk-FLYJVZED.mjs';
-import { useState, useEffect, useCallback } from 'react';
-import { createRoot } from 'react-dom/client';
-import { flushSync } from 'react-dom';
-import { classNames, messageContainerBaseClasses, messagePositionClasses, getMessageTypeClasses, defaultMessageThemeColors, messageBaseClasses, getMessageIconPath, messageIconClasses, ANIMATION_DURATION_MS, messageLoadingSpinnerClasses, messageContentClasses, messageCloseButtonClasses, messageCloseIconPath, isBrowser, normalizeStringOption } from '@expcat/tigercat-core';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import {
+  StatusIcon,
+  StatusIconWithLoading
+} from "./chunk-FLYJVZED.mjs";
 
+// src/components/Message.tsx
+import { useState, useEffect, useCallback } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import {
+  classNames,
+  getMessageTypeClasses,
+  defaultMessageThemeColors,
+  messageContainerBaseClasses,
+  messagePositionClasses,
+  messageBaseClasses,
+  messageIconClasses,
+  messageContentClasses,
+  messageCloseButtonClasses,
+  messageLoadingSpinnerClasses,
+  getMessageIconPath,
+  messageCloseIconPath,
+  isBrowser,
+  ANIMATION_DURATION_MS,
+  normalizeStringOption
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var MESSAGE_CONTAINER_ID = "tiger-message-container";
 var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
 var messageInstances = [];
@@ -77,11 +97,8 @@ var MessageContainer = ({ position = "top" }) => {
   const [messages, setMessages] = useState(() => [...messageInstances]);
   useEffect(() => {
     updateCallback = () => {
-      flushSync(() => {
-        setMessages([...messageInstances]);
-      });
+      setMessages([...messageInstances]);
     };
-    updateCallback();
     return () => {
       updateCallback = null;
     };
@@ -139,8 +156,10 @@ function addMessage(config) {
     className: config.className
   };
   messageInstances.push(instance);
+  const rootId = `${MESSAGE_CONTAINER_ID}-root`;
+  const shouldUpdateExistingContainer = isBrowser() && containerRoot !== null && document.getElementById(rootId) !== null;
   ensureContainer();
-  if (updateCallback) {
+  if (shouldUpdateExistingContainer && updateCallback) {
     updateCallback();
   }
   if (instance.duration > 0) {
@@ -216,4 +235,8 @@ var Message = {
 };
 var Message_default = Message;
 
-export { Message, MessageContainer, Message_default };
+export {
+  MessageContainer,
+  Message,
+  Message_default
+};

package/dist/{chunk-YLZEOXFS.mjs → chunk-6GU5NH5F.mjs}

@@ -1,8 +1,18 @@
-import React, { useState, useRef, useMemo, useCallback } from 'react';
-import { countLines, generateLineNumbers, getCodeEditorContainerClasses, handleTabKey, getLineNumberClasses, classNames, codeEditorHighlightClasses, codeEditorTextareaClasses, tokenizeLine, getTokenClasses } from '@expcat/tigercat-core';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
 // src/components/CodeEditor.tsx
+import React, { useState, useRef, useMemo, useCallback } from "react";
+import {
+  classNames,
+  getCodeEditorContainerClasses,
+  getLineNumberClasses,
+  getTokenClasses,
+  tokenizeLine,
+  countLines,
+  generateLineNumbers,
+  handleTabKey,
+  codeEditorTextareaClasses,
+  codeEditorHighlightClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var CodeEditor = ({
   value: controlledValue,
   defaultValue = "",
@@ -18,7 +28,8 @@ var CodeEditor = ({
   disabled = false,
   className,
   style,
-  onChange
+  onChange,
+  highlighter
 }) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const textareaRef = useRef(null);
@@ -68,12 +79,24 @@ var CodeEditor = ({
     return cls ? /* @__PURE__ */ jsx("span", { className: cls, children: token.value }, idx) : /* @__PURE__ */ jsx(React.Fragment, { children: token.value }, idx);
   };
   const renderLine = (line, lineIndex) => {
+    if (highlighter?.highlightLine) {
+      const html = highlighter.highlightLine(line, language, theme) || (line === "" ? "\n" : "");
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "min-h-[1.625rem]",
+          dangerouslySetInnerHTML: { __html: html }
+        },
+        lineIndex
+      );
+    }
     const tokens = tokenizeLine(line, language);
     return /* @__PURE__ */ jsxs("div", { className: "min-h-[1.625rem]", children: [
       tokens.map(renderToken),
       line === "" ? "\n" : null
     ] }, lineIndex);
   };
+  const blockHtml = highlighter && !highlighter.highlightLine && highlighter.highlightCode ? highlighter.highlightCode(code, language, theme) : null;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -84,7 +107,14 @@ var CodeEditor = ({
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
         lineNumbers && /* @__PURE__ */ jsx("div", { className: getLineNumberClasses(theme), "aria-hidden": "true", children: lineNums.map((n) => /* @__PURE__ */ jsx("div", { className: "min-h-[1.625rem]", children: n }, n)) }),
         /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-auto", children: [
-          /* @__PURE__ */ jsx("div", { className: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: lines.map(renderLine) }),
+          blockHtml !== null ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames(codeEditorHighlightClasses, wrapClass),
+              "aria-hidden": "true",
+              dangerouslySetInnerHTML: { __html: blockHtml }
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: lines.map(renderLine) }),
           /* @__PURE__ */ jsx(
             "textarea",
             {
@@ -113,4 +143,7 @@ var CodeEditor = ({
 };
 var CodeEditor_default = CodeEditor;
 
-export { CodeEditor, CodeEditor_default };
+export {
+  CodeEditor,
+  CodeEditor_default
+};

package/dist/{chunk-HLJQZUIY.mjs → chunk-6GYT3EZD.mjs}

@@ -1,9 +1,39 @@
-import { useEscapeKey } from './chunk-WLIFEALE.mjs';
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import { getPreviewNavState, clampScale, calculateTransform, imagePreviewWrapperClasses, imagePreviewMaskClasses, imagePreviewImgClasses, imagePreviewCloseBtnClasses, previewCloseIconPath, classNames, prevIconPath, imagePreviewNavBtnClasses, nextIconPath, imagePreviewToolbarClasses, imagePreviewToolbarBtnClasses, zoomOutIconPath, resetIconPath, zoomInIconPath, imagePreviewCounterClasses } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  useEscapeKey
+} from "./chunk-SEWNVIHH.mjs";
 
+// src/components/ImagePreview.tsx
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { createPortal } from "react-dom";
+import {
+  classNames,
+  imagePreviewMaskClasses,
+  imagePreviewWrapperClasses,
+  imagePreviewImgClasses,
+  imagePreviewToolbarClasses,
+  imagePreviewToolbarBtnClasses,
+  imagePreviewNavBtnClasses,
+  imagePreviewCloseBtnClasses,
+  imagePreviewCounterClasses,
+  zoomInIconPath,
+  zoomOutIconPath,
+  resetIconPath,
+  prevIconPath,
+  nextIconPath,
+  previewCloseIconPath,
+  imageViewerIcons,
+  clampScale,
+  calculateTransform,
+  getPreviewNavState,
+  normalizeRotation,
+  createPanState,
+  startPan,
+  movePan,
+  createPinchState,
+  startPinch,
+  movePinch
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var SvgIcon = ({ d, cls = "w-5 h-5" }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -28,17 +58,23 @@ var ImagePreview = ({
   onCurrentIndexChange,
   onScaleChange
 }) => {
-  const isOpen = open;
+  const isOpen = open ?? false;
   const [scale, setScale] = useState(1);
+  const [rotation, setRotation] = useState(0);
   const [offsetX, setOffsetX] = useState(0);
   const [offsetY, setOffsetY] = useState(0);
   const [index, setIndex] = useState(currentIndex);
   const draggingRef = useRef(false);
   const dragStartRef = useRef({ x: 0, y: 0, ox: 0, oy: 0 });
+  const panRef = useRef(createPanState());
+  const pinchRef = useRef(createPinchState());
   const resetTransform = useCallback(() => {
     setScale(1);
+    setRotation(0);
     setOffsetX(0);
     setOffsetY(0);
+    panRef.current = createPanState();
+    pinchRef.current = createPinchState();
   }, []);
   useEffect(() => {
     setIndex(currentIndex);
@@ -79,6 +115,12 @@ var ImagePreview = ({
     resetTransform();
     onScaleChange?.(1);
   }, [resetTransform, onScaleChange]);
+  const handleRotateLeft = useCallback(() => {
+    setRotation((value) => normalizeRotation(value - 90));
+  }, []);
+  const handleRotateRight = useCallback(() => {
+    setRotation((value) => normalizeRotation(value + 90));
+  }, []);
   const handlePrev = useCallback(() => {
     if (index > 0) {
       const next = index - 1;
@@ -133,6 +175,40 @@ var ImagePreview = ({
   const handleMouseUp = useCallback(() => {
     draggingRef.current = false;
   }, []);
+  const handleTouchStart = useCallback(
+    (e) => {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        pinchRef.current = startPinch(e.touches[0], e.touches[1], scale);
+        return;
+      }
+      if (e.touches.length === 1) {
+        panRef.current = startPan(e.touches[0].clientX, e.touches[0].clientY, offsetX, offsetY);
+      }
+    },
+    [offsetX, offsetY, scale]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (e.touches.length === 2 && pinchRef.current.isPinching) {
+        e.preventDefault();
+        const next = movePinch(pinchRef.current, e.touches[0], e.touches[1], minScale, maxScale);
+        setScale(next);
+        onScaleChange?.(next);
+        return;
+      }
+      if (e.touches.length === 1 && panRef.current.isPanning) {
+        const next = movePan(panRef.current, e.touches[0].clientX, e.touches[0].clientY);
+        setOffsetX(next.translateX);
+        setOffsetY(next.translateY);
+      }
+    },
+    [maxScale, minScale, onScaleChange]
+  );
+  const handleTouchEnd = useCallback(() => {
+    panRef.current = createPanState();
+    pinchRef.current = createPinchState();
+  }, []);
   const handleMaskClick = useCallback(
     (e) => {
       if (maskClosable && e.target === e.currentTarget) {
@@ -142,8 +218,8 @@ var ImagePreview = ({
     [maskClosable, handleClose]
   );
   const transform = useMemo(
-    () => calculateTransform(scale, offsetX, offsetY),
-    [scale, offsetX, offsetY]
+    () => `${calculateTransform(scale, offsetX, offsetY)} rotate(${rotation}deg)`,
+    [scale, offsetX, offsetY, rotation]
   );
   if (!isOpen || !images.length) return null;
   const currentSrc = images[index] || images[0];
@@ -171,7 +247,11 @@ var ImagePreview = ({
               onMouseDown: handleMouseDown,
               onMouseMove: handleMouseMove,
               onMouseUp: handleMouseUp,
-              onMouseLeave: handleMouseUp
+              onMouseLeave: handleMouseUp,
+              onTouchStart: handleTouchStart,
+              onTouchMove: handleTouchMove,
+              onTouchEnd: handleTouchEnd,
+              onTouchCancel: handleTouchEnd
             }
           ),
           /* @__PURE__ */ jsx(
@@ -237,6 +317,26 @@ var ImagePreview = ({
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomInIconPath })
               }
             ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imagePreviewToolbarBtnClasses,
+                onClick: handleRotateLeft,
+                "aria-label": "Rotate left",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { d: imageViewerIcons.rotateLeft })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imagePreviewToolbarBtnClasses,
+                onClick: handleRotateRight,
+                "aria-label": "Rotate right",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { d: imageViewerIcons.rotateRight })
+              }
+            ),
             navState.counter && /* @__PURE__ */ jsx("span", { className: imagePreviewCounterClasses, children: navState.counter })
           ] })
         ]
@@ -246,4 +346,6 @@ var ImagePreview = ({
   );
 };
 
-export { ImagePreview };
+export {
+  ImagePreview
+};

package/dist/chunk-6HELKWFN.js

@@ -0,0 +1,105 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+
+var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
+
+// src/utils/use-popup.ts
+var _react = require('react');
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+function usePopup(options) {
+  const {
+    open,
+    defaultOpen = false,
+    disabled = false,
+    trigger = "click",
+    placement = "top",
+    offset = 8,
+    multiTrigger = true,
+    onOpenChange
+  } = options;
+  const isControlled = open !== void 0;
+  const [internalVisible, setInternalVisible] = _react.useState.call(void 0, defaultOpen);
+  const currentVisible = isControlled ? open : internalVisible;
+  const containerRef = _react.useRef.call(void 0, null);
+  const triggerRef = _react.useRef.call(void 0, null);
+  const floatingRef = _react.useRef.call(void 0, null);
+  const {
+    x,
+    y,
+    placement: actualPlacement
+  } = _chunkSTTQ5LXXjs.useFloating.call(void 0, {
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: currentVisible,
+    placement,
+    offset
+  });
+  const setVisible = _react.useCallback.call(void 0, 
+    (next) => {
+      if (disabled && next) return;
+      if (!isControlled) setInternalVisible(next);
+      _optionalChain([onOpenChange, 'optionalCall', _ => _(next)]);
+    },
+    [disabled, isControlled, onOpenChange]
+  );
+  const handleToggle = _react.useCallback.call(void 0, () => {
+    if (!disabled) setVisible(!currentVisible);
+  }, [disabled, currentVisible, setVisible]);
+  const handleShow = _react.useCallback.call(void 0, () => {
+    if (!disabled) setVisible(true);
+  }, [disabled, setVisible]);
+  const handleHide = _react.useCallback.call(void 0, () => {
+    if (!disabled) setVisible(false);
+  }, [disabled, setVisible]);
+  const effectiveTrigger = multiTrigger ? trigger : "click";
+  _chunkSTTQ5LXXjs.useClickOutside.call(void 0, {
+    enabled: currentVisible && effectiveTrigger === "click",
+    refs: [containerRef, floatingRef],
+    onOutsideClick: () => setVisible(false),
+    defer: true
+  });
+  _chunkSTTQ5LXXjs.useEscapeKey.call(void 0, {
+    enabled: currentVisible && effectiveTrigger !== "manual",
+    onEscape: () => setVisible(false)
+  });
+  const floatingStyles = _react.useMemo.call(void 0, 
+    () => ({
+      position: "absolute",
+      left: x,
+      top: y,
+      transformOrigin: _tigercatcore.getTransformOrigin.call(void 0, actualPlacement),
+      zIndex: 1e3
+    }),
+    [x, y, actualPlacement]
+  );
+  const triggerHandlers = _react.useMemo.call(void 0, () => {
+    if (!multiTrigger) {
+      return { onClick: handleToggle };
+    }
+    return _tigercatcore.buildTriggerHandlerMap.call(void 0, 
+      effectiveTrigger,
+      { toggle: handleToggle, show: handleShow, hide: handleHide },
+      "react"
+    );
+  }, [multiTrigger, effectiveTrigger, handleToggle, handleShow, handleHide]);
+  return {
+    currentVisible,
+    setVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    x,
+    y,
+    actualPlacement,
+    floatingStyles,
+    triggerHandlers
+  };
+}
+
+
+
+exports.usePopup = usePopup;

package/dist/{chunk-HCZA4LV6.mjs → chunk-6KQYWZ6J.mjs}

@@ -1,9 +1,23 @@
-import { ImageGroupContext } from './chunk-IPLK4AIE.mjs';
-import { ImagePreview } from './chunk-HLJQZUIY.mjs';
-import { useState, useRef, useContext, useEffect, useCallback, useMemo } from 'react';
-import { classNames, imageBaseClasses, imagePreviewCursorClass, getImageImgClasses, toCSSSize, imageErrorClasses, imageErrorIconPath, imageLoadingClasses } from '@expcat/tigercat-core';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import {
+  ImageGroupContext
+} from "./chunk-3QPCQH62.mjs";
+import {
+  ImagePreview
+} from "./chunk-6GYT3EZD.mjs";
 
+// src/components/Image.tsx
+import { useState, useRef, useEffect, useMemo, useContext, useCallback } from "react";
+import {
+  classNames,
+  imageBaseClasses,
+  getImageImgClasses,
+  imageErrorClasses,
+  imageLoadingClasses,
+  imagePreviewCursorClass,
+  imageErrorIconPath,
+  toCSSSize
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SvgIcon = ({ d, className = "w-8 h-8" }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -28,7 +42,6 @@ var Image = ({
   errorRender,
   placeholderRender,
   onPreviewOpenChange,
-  onPreviewVisibleChange,
   onClick,
   onKeyDown,
   style,
@@ -92,10 +105,9 @@ var Image = ({
       } else {
         setPreviewVisible(true);
         onPreviewOpenChange?.(true);
-        onPreviewVisibleChange?.(true);
       }
     },
-    [preview, group, onClick, onPreviewOpenChange, onPreviewVisibleChange]
+    [preview, group, onClick, onPreviewOpenChange]
   );
   const handleKeyDown = useCallback(
     (e) => {
@@ -162,11 +174,12 @@ var Image = ({
         onOpenChange: (val) => {
           setPreviewVisible(val);
           onPreviewOpenChange?.(val);
-          onPreviewVisibleChange?.(val);
         }
       }
     )
   ] });
 };
 
-export { Image };
+export {
+  Image
+};

package/dist/{chunk-6P3JIUSI.mjs → chunk-6OOGL43U.mjs}

@@ -1,12 +1,28 @@
-import { Textarea } from './chunk-7QZ4XT2P.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
-import { Tag } from './chunk-TGKNEMD4.mjs';
-import { Text } from './chunk-HLS4CHWX.mjs';
-import { Avatar } from './chunk-FE7PEZTI.mjs';
-import { useState, useMemo } from 'react';
-import { buildCommentTree, clipCommentTreeDepth, classNames, formatCommentTime } from '@expcat/tigercat-core';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import {
+  Textarea
+} from "./chunk-7QZ4XT2P.mjs";
+import {
+  Button
+} from "./chunk-GKJNQUTW.mjs";
+import {
+  Tag
+} from "./chunk-TGKNEMD4.mjs";
+import {
+  Text
+} from "./chunk-HLS4CHWX.mjs";
+import {
+  Avatar
+} from "./chunk-FE7PEZTI.mjs";
 
+// src/components/CommentThread.tsx
+import { useMemo, useState } from "react";
+import {
+  classNames,
+  buildCommentTree,
+  clipCommentTreeDepth,
+  formatCommentTime
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var CommentThread = ({
   nodes,
   items,
@@ -178,7 +194,7 @@ var CommentThread = ({
             ] }),
             /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed break-words mt-1.5 mb-2", children: node.content }),
             actions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1", children: actions }) : null,
-            replyingTo === node.id ? /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-lg", children: [
+            replyingTo === node.id ? /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-[var(--tiger-radius-md,0.5rem)]", children: [
               /* @__PURE__ */ jsx(
                 Textarea,
                 {
@@ -249,6 +265,7 @@ var CommentThread = ({
     "div",
     {
       className: classNames("tiger-comment-thread flex flex-col", className),
+      role: divProps.role ?? "feed",
       "data-tiger-comment-thread": true,
       "aria-label": divProps["aria-label"] ?? (divProps["aria-labelledby"] ? void 0 : "\u8BC4\u8BBA\u7EBF\u7A0B"),
       ...divProps,
@@ -258,4 +275,7 @@ var CommentThread = ({
 };
 var CommentThread_default = CommentThread;
 
-export { CommentThread, CommentThread_default };
+export {
+  CommentThread,
+  CommentThread_default
+};

package/dist/{chunk-3CDAG4HD.mjs → chunk-6QML6T3Y.mjs}

@@ -1,7 +1,10 @@
-import { useState, useMemo, useCallback } from 'react';
-import { getChartElementOpacity, classNames } from '@expcat/tigercat-core';
-
 // src/hooks/useChartInteraction.ts
+import { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import {
+  classNames,
+  createChartPointerMoveScheduler,
+  getChartElementOpacity
+} from "@expcat/tigercat-core";
 function useChartInteraction(options) {
   const {
     hoverable,
@@ -19,6 +22,16 @@ function useChartInteraction(options) {
   const [localHoveredIndex, setLocalHoveredIndex] = useState(null);
   const [localSelectedIndex, setLocalSelectedIndex] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const tooltipSchedulerRef = useRef(null);
+  if (tooltipSchedulerRef.current === null) {
+    tooltipSchedulerRef.current = createChartPointerMoveScheduler({
+      onPositionChange: setTooltipPosition
+    });
+  }
+  const tooltipScheduler = tooltipSchedulerRef.current;
+  useEffect(() => {
+    return () => tooltipScheduler.cancel();
+  }, [tooltipScheduler]);
   const resolvedHoveredIndex = hoveredIndexProp !== void 0 ? hoveredIndexProp : localHoveredIndex;
   const resolvedSelectedIndex = selectedIndexProp !== void 0 ? selectedIndexProp : localSelectedIndex;
   const activeIndex = useMemo(() => {
@@ -49,17 +62,21 @@ function useChartInteraction(options) {
     },
     [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
   );
-  const handleMouseMove = useCallback((event) => {
-    setTooltipPosition({ x: event.clientX, y: event.clientY });
-  }, []);
+  const handleMouseMove = useCallback(
+    (event) => {
+      tooltipScheduler.schedule({ x: event.clientX, y: event.clientY });
+    },
+    [tooltipScheduler]
+  );
   const handleMouseLeave = useCallback(() => {
+    tooltipScheduler.cancel();
     if (!hoverable) return;
     if (hoveredIndexProp === void 0) {
       setLocalHoveredIndex(null);
     }
     onHoveredIndexChange?.(null);
     callbacks?.onHover?.(null, null);
-  }, [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks]);
+  }, [hoverable, tooltipScheduler, hoveredIndexProp, onHoveredIndexChange, callbacks]);
   const handleClick = useCallback(
     (index) => {
       if (!selectable) return;
@@ -148,4 +165,6 @@ function useChartInteraction(options) {
   };
 }
 
-export { useChartInteraction };
+export {
+  useChartInteraction
+};