@fileverse-dev/fortune-react 1.1.54 → 1.1.55-smooth-scroll-1

package/es/components/Sheet/index.js

@@ -1,8 +1,9 @@
-import React, { useRef, useEffect, useContext, useCallback } from "react";
-import { Canvas, updateContextWithCanvas, updateContextWithSheetData, handleGlobalWheel, initFreeze, cellFadeAnimator } from "@fileverse-dev/fortune-core";
+import React, { useRef, useEffect, useContext } from "react";
+import { Canvas, updateContextWithCanvas, updateContextWithSheetData, initFreeze, cellFadeAnimator } from "@fileverse-dev/fortune-core";
 import "./index.css";
 import WorkbookContext from "../../context";
 import SheetOverlay from "../SheetOverlay";
+import { useSmoothScroll } from "./use-smooth-scroll";
 var Sheet = function Sheet(_a) {
   var _b, _c, _d;
   var sheet = _a.sheet;
@@ -149,25 +150,7 @@ var Sheet = function Sheet(_a) {
       return cellFadeAnimator.setOnTick(null);
     };
   }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
-  var onWheel = useCallback(function (e) {
-    var _a, _b;
-    var functionDetailsEl = document.getElementById("function-details");
-    var formulaSearchEl = document.getElementById("luckysheet-formula-search-c");
-    var isMouseOverFunctionDetails = functionDetailsEl === null || functionDetailsEl === void 0 ? void 0 : functionDetailsEl.matches(":hover");
-    var isMouseOverFormulaSearch = formulaSearchEl === null || formulaSearchEl === void 0 ? void 0 : formulaSearchEl.matches(":hover");
-    if (functionDetailsEl && isMouseOverFunctionDetails || formulaSearchEl && isMouseOverFormulaSearch || ((_b = (_a = refs === null || refs === void 0 ? void 0 : refs.globalCache) === null || _a === void 0 ? void 0 : _a.searchDialog) === null || _b === void 0 ? void 0 : _b.mouseEnter)) return;
-    setContext(function (draftCtx) {
-      handleGlobalWheel(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
-    });
-    e.preventDefault();
-  }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
-  useEffect(function () {
-    var container = containerRef.current;
-    container === null || container === void 0 ? void 0 : container.addEventListener("wheel", onWheel);
-    return function () {
-      container === null || container === void 0 ? void 0 : container.removeEventListener("wheel", onWheel);
-    };
-  }, [onWheel]);
+  useSmoothScroll(containerRef);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: "fortune-sheet-container"

package/es/components/Sheet/use-smooth-scroll.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare const useSmoothScroll: (scrollContainerRef: RefObject<HTMLDivElement | null>) => void;

package/es/components/Sheet/use-smooth-scroll.js

@@ -0,0 +1,85 @@
+import { useContext, useEffect } from "react";
+import WorkbookContext from "../../context";
+export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
+  var _a = useContext(WorkbookContext),
+    context = _a.context,
+    refs = _a.refs;
+  function attachSmoothWheelScroll(scrollContainer, moveScrollBy, getPixelScale) {
+    if (getPixelScale === void 0) {
+      getPixelScale = function getPixelScale() {
+        return window.devicePixelRatio || 1;
+      };
+    }
+    var queuedXPixels = 0;
+    var queuedYPixels = 0;
+    var animationFrameId = 0;
+    var MAX_PIXEL_DELTA_PER_FRAME = 1200;
+    function applyQueuedScroll() {
+      animationFrameId = 0;
+      if (Math.abs(queuedXPixels) < 0.5 && Math.abs(queuedYPixels) < 0.5) {
+        queuedXPixels = 0;
+        queuedYPixels = 0;
+        return;
+      }
+      var xPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedXPixels));
+      var yPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedYPixels));
+      moveScrollBy(xPixels, yPixels);
+      queuedXPixels = 0;
+      queuedYPixels = 0;
+    }
+    function handleWheelEvent(event) {
+      var _a, _b;
+      event.preventDefault();
+      var functionDetailsElement = document.getElementById("function-details");
+      var formulaSearchElement = document.getElementById("luckysheet-formula-search-c");
+      var isPointerOverFunctionDetails = functionDetailsElement === null || functionDetailsElement === void 0 ? void 0 : functionDetailsElement.matches(":hover");
+      var isPointerOverFormulaSearch = formulaSearchElement === null || formulaSearchElement === void 0 ? void 0 : formulaSearchElement.matches(":hover");
+      var isPointerInSearchDialog = !!((_b = (_a = refs === null || refs === void 0 ? void 0 : refs.globalCache) === null || _a === void 0 ? void 0 : _a.searchDialog) === null || _b === void 0 ? void 0 : _b.mouseEnter);
+      var hasFilterContextMenuOpen = context.filterContextMenu != null;
+      if (functionDetailsElement && isPointerOverFunctionDetails || formulaSearchElement && isPointerOverFormulaSearch || isPointerInSearchDialog || hasFilterContextMenuOpen) {
+        return;
+      }
+      var scaleFactor = getPixelScale();
+      queuedXPixels += event.deltaX * scaleFactor;
+      queuedYPixels += event.deltaY * scaleFactor;
+      if (!animationFrameId) animationFrameId = requestAnimationFrame(applyQueuedScroll);
+    }
+    scrollContainer.addEventListener("wheel", handleWheelEvent, {
+      passive: false
+    });
+    return function () {
+      scrollContainer.removeEventListener("wheel", handleWheelEvent);
+      if (animationFrameId) cancelAnimationFrame(animationFrameId);
+    };
+  }
+  var makeScrollbarsMoveByPixels = function makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl) {
+    return function (xPixels, yPixels) {
+      var maxScrollLeft = horizontalScrollbarEl.scrollWidth - horizontalScrollbarEl.clientWidth;
+      var maxScrollTop = verticalScrollbarEl.scrollHeight - verticalScrollbarEl.clientHeight;
+      var targetScrollLeft = Math.max(0, Math.min(maxScrollLeft, horizontalScrollbarEl.scrollLeft + xPixels));
+      var targetScrollTop = Math.max(0, Math.min(maxScrollTop, verticalScrollbarEl.scrollTop + yPixels));
+      var didScrollX = targetScrollLeft !== horizontalScrollbarEl.scrollLeft;
+      var didScrollY = targetScrollTop !== verticalScrollbarEl.scrollTop;
+      if (didScrollX) {
+        horizontalScrollbarEl.scrollLeft = targetScrollLeft;
+      }
+      if (didScrollY) {
+        verticalScrollbarEl.scrollTop = targetScrollTop;
+      }
+    };
+  };
+  function routeWheelScrollToScrollbars(sheetContext, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl) {
+    var moveScrollbarsByPixels = makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl);
+    return attachSmoothWheelScroll(scrollContainerEl, moveScrollbarsByPixels, function () {
+      return (window.devicePixelRatio || 1) * sheetContext.zoomRatio;
+    });
+  }
+  useEffect(function () {
+    var scrollContainerEl = scrollContainerRef.current;
+    var horizontalScrollbarEl = refs.scrollbarX.current;
+    var verticalScrollbarEl = refs.scrollbarY.current;
+    if (!scrollContainerEl || !horizontalScrollbarEl || !verticalScrollbarEl) return function () {};
+    var unmountScrollHandler = routeWheelScrollToScrollbars(context, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl);
+    return unmountScrollHandler;
+  }, [context.zoomRatio]);
+};

package/es/components/SheetOverlay/helper.d.ts

@@ -1,6 +1,5 @@
 export declare function moveCursorToEnd(editableDiv: HTMLDivElement): void;
 export declare function getCursorPosition(editableDiv: HTMLDivElement): number;
-export declare function setCursorPosition(editableDiv: HTMLDivElement, pos: number): void;
 export declare function isLetterNumberPattern(str: string): boolean;
 export declare function removeLastSpan(htmlString: string): string;
 export declare function incrementColumn(cell: string): string;

package/es/components/SheetOverlay/helper.js

@@ -18,31 +18,6 @@ export function getCursorPosition(editableDiv) {
   preRange.setEnd(range.endContainer, range.endOffset);
   return preRange.toString().length;
 }
-export function setCursorPosition(editableDiv, pos) {
-  editableDiv.focus();
-  var selection = window.getSelection();
-  if (!selection) return;
-  var range = document.createRange();
-  var charIndex = 0;
-  var nodeStack = [editableDiv];
-  var node;
-  while (node = nodeStack.pop()) {
-    if (node.nodeType === Node.TEXT_NODE) {
-      var textNode = node;
-      var nextCharIndex = charIndex + textNode.length;
-      if (pos <= nextCharIndex) {
-        range.setStart(textNode, pos - charIndex);
-        range.collapse(true);
-        break;
-      }
-      charIndex = nextCharIndex;
-    } else {
-      nodeStack.push.apply(nodeStack, Array.from(node.childNodes).reverse());
-    }
-  }
-  selection.removeAllRanges();
-  selection.addRange(range);
-}
 export function isLetterNumberPattern(str) {
   var regex = /^[a-zA-Z]+\d+$/;
   return regex.test(str);

package/lib/components/Sheet/index.js

@@ -10,6 +10,7 @@ var _fortuneCore = require("@fileverse-dev/fortune-core");
 require("./index.css");
 var _context = _interopRequireDefault(require("../../context"));
 var _SheetOverlay = _interopRequireDefault(require("../SheetOverlay"));
+var _useSmoothScroll = require("./use-smooth-scroll");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var Sheet = function Sheet(_a) {
@@ -158,25 +159,7 @@ var Sheet = function Sheet(_a) {
       return _fortuneCore.cellFadeAnimator.setOnTick(null);
     };
   }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
-  var onWheel = (0, _react.useCallback)(function (e) {
-    var _a, _b;
-    var functionDetailsEl = document.getElementById("function-details");
-    var formulaSearchEl = document.getElementById("luckysheet-formula-search-c");
-    var isMouseOverFunctionDetails = functionDetailsEl === null || functionDetailsEl === void 0 ? void 0 : functionDetailsEl.matches(":hover");
-    var isMouseOverFormulaSearch = formulaSearchEl === null || formulaSearchEl === void 0 ? void 0 : formulaSearchEl.matches(":hover");
-    if (functionDetailsEl && isMouseOverFunctionDetails || formulaSearchEl && isMouseOverFormulaSearch || ((_b = (_a = refs === null || refs === void 0 ? void 0 : refs.globalCache) === null || _a === void 0 ? void 0 : _a.searchDialog) === null || _b === void 0 ? void 0 : _b.mouseEnter)) return;
-    setContext(function (draftCtx) {
-      (0, _fortuneCore.handleGlobalWheel)(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
-    });
-    e.preventDefault();
-  }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
-  (0, _react.useEffect)(function () {
-    var container = containerRef.current;
-    container === null || container === void 0 ? void 0 : container.addEventListener("wheel", onWheel);
-    return function () {
-      container === null || container === void 0 ? void 0 : container.removeEventListener("wheel", onWheel);
-    };
-  }, [onWheel]);
+  (0, _useSmoothScroll.useSmoothScroll)(containerRef);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     className: "fortune-sheet-container"

package/lib/components/Sheet/use-smooth-scroll.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare const useSmoothScroll: (scrollContainerRef: RefObject<HTMLDivElement | null>) => void;

package/lib/components/Sheet/use-smooth-scroll.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSmoothScroll = void 0;
+var _react = require("react");
+var _context = _interopRequireDefault(require("../../context"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
+  var _a = (0, _react.useContext)(_context.default),
+    context = _a.context,
+    refs = _a.refs;
+  function attachSmoothWheelScroll(scrollContainer, moveScrollBy, getPixelScale) {
+    if (getPixelScale === void 0) {
+      getPixelScale = function getPixelScale() {
+        return window.devicePixelRatio || 1;
+      };
+    }
+    var queuedXPixels = 0;
+    var queuedYPixels = 0;
+    var animationFrameId = 0;
+    var MAX_PIXEL_DELTA_PER_FRAME = 1200;
+    function applyQueuedScroll() {
+      animationFrameId = 0;
+      if (Math.abs(queuedXPixels) < 0.5 && Math.abs(queuedYPixels) < 0.5) {
+        queuedXPixels = 0;
+        queuedYPixels = 0;
+        return;
+      }
+      var xPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedXPixels));
+      var yPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedYPixels));
+      moveScrollBy(xPixels, yPixels);
+      queuedXPixels = 0;
+      queuedYPixels = 0;
+    }
+    function handleWheelEvent(event) {
+      var _a, _b;
+      event.preventDefault();
+      var functionDetailsElement = document.getElementById("function-details");
+      var formulaSearchElement = document.getElementById("luckysheet-formula-search-c");
+      var isPointerOverFunctionDetails = functionDetailsElement === null || functionDetailsElement === void 0 ? void 0 : functionDetailsElement.matches(":hover");
+      var isPointerOverFormulaSearch = formulaSearchElement === null || formulaSearchElement === void 0 ? void 0 : formulaSearchElement.matches(":hover");
+      var isPointerInSearchDialog = !!((_b = (_a = refs === null || refs === void 0 ? void 0 : refs.globalCache) === null || _a === void 0 ? void 0 : _a.searchDialog) === null || _b === void 0 ? void 0 : _b.mouseEnter);
+      var hasFilterContextMenuOpen = context.filterContextMenu != null;
+      if (functionDetailsElement && isPointerOverFunctionDetails || formulaSearchElement && isPointerOverFormulaSearch || isPointerInSearchDialog || hasFilterContextMenuOpen) {
+        return;
+      }
+      var scaleFactor = getPixelScale();
+      queuedXPixels += event.deltaX * scaleFactor;
+      queuedYPixels += event.deltaY * scaleFactor;
+      if (!animationFrameId) animationFrameId = requestAnimationFrame(applyQueuedScroll);
+    }
+    scrollContainer.addEventListener("wheel", handleWheelEvent, {
+      passive: false
+    });
+    return function () {
+      scrollContainer.removeEventListener("wheel", handleWheelEvent);
+      if (animationFrameId) cancelAnimationFrame(animationFrameId);
+    };
+  }
+  var makeScrollbarsMoveByPixels = function makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl) {
+    return function (xPixels, yPixels) {
+      var maxScrollLeft = horizontalScrollbarEl.scrollWidth - horizontalScrollbarEl.clientWidth;
+      var maxScrollTop = verticalScrollbarEl.scrollHeight - verticalScrollbarEl.clientHeight;
+      var targetScrollLeft = Math.max(0, Math.min(maxScrollLeft, horizontalScrollbarEl.scrollLeft + xPixels));
+      var targetScrollTop = Math.max(0, Math.min(maxScrollTop, verticalScrollbarEl.scrollTop + yPixels));
+      var didScrollX = targetScrollLeft !== horizontalScrollbarEl.scrollLeft;
+      var didScrollY = targetScrollTop !== verticalScrollbarEl.scrollTop;
+      if (didScrollX) {
+        horizontalScrollbarEl.scrollLeft = targetScrollLeft;
+      }
+      if (didScrollY) {
+        verticalScrollbarEl.scrollTop = targetScrollTop;
+      }
+    };
+  };
+  function routeWheelScrollToScrollbars(sheetContext, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl) {
+    var moveScrollbarsByPixels = makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl);
+    return attachSmoothWheelScroll(scrollContainerEl, moveScrollbarsByPixels, function () {
+      return (window.devicePixelRatio || 1) * sheetContext.zoomRatio;
+    });
+  }
+  (0, _react.useEffect)(function () {
+    var scrollContainerEl = scrollContainerRef.current;
+    var horizontalScrollbarEl = refs.scrollbarX.current;
+    var verticalScrollbarEl = refs.scrollbarY.current;
+    if (!scrollContainerEl || !horizontalScrollbarEl || !verticalScrollbarEl) return function () {};
+    var unmountScrollHandler = routeWheelScrollToScrollbars(context, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl);
+    return unmountScrollHandler;
+  }, [context.zoomRatio]);
+};

package/lib/components/SheetOverlay/helper.d.ts

@@ -1,6 +1,5 @@
 export declare function moveCursorToEnd(editableDiv: HTMLDivElement): void;
 export declare function getCursorPosition(editableDiv: HTMLDivElement): number;
-export declare function setCursorPosition(editableDiv: HTMLDivElement, pos: number): void;
 export declare function isLetterNumberPattern(str: string): boolean;
 export declare function removeLastSpan(htmlString: string): string;
 export declare function incrementColumn(cell: string): string;

package/lib/components/SheetOverlay/helper.js

@@ -11,7 +11,6 @@ exports.incrementRow = incrementRow;
 exports.isLetterNumberPattern = isLetterNumberPattern;
 exports.moveCursorToEnd = moveCursorToEnd;
 exports.removeLastSpan = removeLastSpan;
-exports.setCursorPosition = setCursorPosition;
 function moveCursorToEnd(editableDiv) {
   editableDiv.focus();
   var range = document.createRange();
@@ -32,31 +31,6 @@ function getCursorPosition(editableDiv) {
   preRange.setEnd(range.endContainer, range.endOffset);
   return preRange.toString().length;
 }
-function setCursorPosition(editableDiv, pos) {
-  editableDiv.focus();
-  var selection = window.getSelection();
-  if (!selection) return;
-  var range = document.createRange();
-  var charIndex = 0;
-  var nodeStack = [editableDiv];
-  var node;
-  while (node = nodeStack.pop()) {
-    if (node.nodeType === Node.TEXT_NODE) {
-      var textNode = node;
-      var nextCharIndex = charIndex + textNode.length;
-      if (pos <= nextCharIndex) {
-        range.setStart(textNode, pos - charIndex);
-        range.collapse(true);
-        break;
-      }
-      charIndex = nextCharIndex;
-    } else {
-      nodeStack.push.apply(nodeStack, Array.from(node.childNodes).reverse());
-    }
-  }
-  selection.removeAllRanges();
-  selection.addRange(range);
-}
 function isLetterNumberPattern(str) {
   var regex = /^[a-zA-Z]+\d+$/;
   return regex.test(str);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.1.54",
+  "version": "1.1.55-smooth-scroll-1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@fileverse-dev/fortune-core": "1.1.54",
+    "@fileverse-dev/fortune-core": "1.1.55-smooth-scroll-1",
     "@fileverse/ui": "^4.1.7-patch-21",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",

package/es/components/SheetOverlay/FormulaHint/dragable-div.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-interface DraggableDivProps {
-    children?: React.ReactNode;
-    className?: string;
-    initialX?: number;
-    initialY?: number;
-}
-export declare function DraggableDiv({ children, className, initialX, initialY }: DraggableDivProps): React.JSX.Element;
-export {};

package/es/components/SheetOverlay/FormulaHint/dragable-div.js

@@ -1,129 +0,0 @@
-"use client";
-
-import React from "react";
-import { useState, useRef, useCallback } from "react";
-import { cn } from "@fileverse/ui";
-export function DraggableDiv(_a) {
-  var children = _a.children,
-    className = _a.className,
-    _b = _a.initialX,
-    initialX = _b === void 0 ? 100 : _b,
-    _c = _a.initialY,
-    initialY = _c === void 0 ? 100 : _c;
-  var _d = useState({
-      x: initialX,
-      y: initialY
-    }),
-    position = _d[0],
-    setPosition = _d[1];
-  var _e = useState(false),
-    isDragging = _e[0],
-    setIsDragging = _e[1];
-  var _f = useState({
-      x: 0,
-      y: 0
-    }),
-    dragStart = _f[0],
-    setDragStart = _f[1];
-  var _g = useState({
-      x: 0,
-      y: 0
-    }),
-    dragOffset = _g[0],
-    setDragOffset = _g[1];
-  var divRef = useRef(null);
-  var handleMouseDown = useCallback(function (e) {
-    e.preventDefault();
-    setIsDragging(true);
-    setDragStart({
-      x: e.clientX,
-      y: e.clientY
-    });
-    setDragOffset({
-      x: e.clientX,
-      y: e.clientY
-    });
-  }, [position.x, position.y]);
-  var handleMouseMove = useCallback(function (e) {
-    var _a, _b;
-    if (!isDragging) return;
-    e.preventDefault();
-    var newX = e.clientX - dragOffset.x;
-    var newY = e.clientY - dragOffset.y;
-    var divWidth = ((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
-    var divHeight = ((_b = divRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
-    var maxX = window.innerWidth - divWidth;
-    var maxY = window.innerHeight - divHeight;
-    setPosition({
-      x: Math.max(-divWidth + 50, Math.min(newX, maxX)),
-      y: Math.max(-divHeight + 50, Math.min(newY, maxY))
-    });
-  }, [isDragging, dragOffset]);
-  var handleMouseUp = useCallback(function () {
-    setIsDragging(false);
-  }, []);
-  React.useEffect(function () {
-    if (isDragging) {
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-      return function () {
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-      };
-    }
-  }, [isDragging, handleMouseMove, handleMouseUp]);
-  var handleTouchStart = useCallback(function (e) {
-    e.preventDefault();
-    var touch = e.touches[0];
-    setIsDragging(true);
-    setDragStart({
-      x: touch.clientX,
-      y: touch.clientY
-    });
-    setDragOffset({
-      x: touch.clientX - position.x,
-      y: touch.clientY - position.y
-    });
-  }, [position.x, position.y]);
-  var handleTouchMove = useCallback(function (e) {
-    var _a, _b;
-    if (!isDragging) return;
-    e.preventDefault();
-    var touch = e.touches[0];
-    var newX = touch.clientX - dragOffset.x;
-    var newY = touch.clientY - dragOffset.y;
-    var divWidth = ((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
-    var divHeight = ((_b = divRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
-    var maxX = window.innerWidth - divWidth;
-    var maxY = window.innerHeight - divHeight;
-    setPosition({
-      x: Math.max(-divWidth + 50, Math.min(newX, maxX)),
-      y: Math.max(-divHeight + 50, Math.min(newY, maxY))
-    });
-  }, [isDragging, dragOffset]);
-  var handleTouchEnd = useCallback(function () {
-    setIsDragging(false);
-  }, []);
-  React.useEffect(function () {
-    if (isDragging) {
-      document.addEventListener("touchmove", handleTouchMove, {
-        passive: false
-      });
-      document.addEventListener("touchend", handleTouchEnd);
-      return function () {
-        document.removeEventListener("touchmove", handleTouchMove);
-        document.removeEventListener("touchend", handleTouchEnd);
-      };
-    }
-  }, [isDragging, handleTouchMove, handleTouchEnd]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: divRef,
-    className: cn("absolute select-none touch-none transition-shadow duration-200", isDragging ? "cursor-grabbing shadow-2xl z-50" : "cursor-grab shadow-lg", className),
-    style: {
-      left: "".concat(position.x, "px"),
-      top: "".concat(position.y, "px")
-    },
-    onMouseDown: handleMouseDown,
-    onTouchStart: handleTouchStart
-  }, children);
-}

package/lib/components/SheetOverlay/FormulaHint/dragable-div.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-interface DraggableDivProps {
-    children?: React.ReactNode;
-    className?: string;
-    initialX?: number;
-    initialY?: number;
-}
-export declare function DraggableDiv({ children, className, initialX, initialY }: DraggableDivProps): React.JSX.Element;
-export {};

package/lib/components/SheetOverlay/FormulaHint/dragable-div.js

@@ -1,135 +0,0 @@
-"use strict";
-"use client";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DraggableDiv = DraggableDiv;
-var _react = _interopRequireWildcard(require("react"));
-var _ui = require("@fileverse/ui");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function DraggableDiv(_a) {
-  var children = _a.children,
-    className = _a.className,
-    _b = _a.initialX,
-    initialX = _b === void 0 ? 100 : _b,
-    _c = _a.initialY,
-    initialY = _c === void 0 ? 100 : _c;
-  var _d = (0, _react.useState)({
-      x: initialX,
-      y: initialY
-    }),
-    position = _d[0],
-    setPosition = _d[1];
-  var _e = (0, _react.useState)(false),
-    isDragging = _e[0],
-    setIsDragging = _e[1];
-  var _f = (0, _react.useState)({
-      x: 0,
-      y: 0
-    }),
-    dragStart = _f[0],
-    setDragStart = _f[1];
-  var _g = (0, _react.useState)({
-      x: 0,
-      y: 0
-    }),
-    dragOffset = _g[0],
-    setDragOffset = _g[1];
-  var divRef = (0, _react.useRef)(null);
-  var handleMouseDown = (0, _react.useCallback)(function (e) {
-    e.preventDefault();
-    setIsDragging(true);
-    setDragStart({
-      x: e.clientX,
-      y: e.clientY
-    });
-    setDragOffset({
-      x: e.clientX,
-      y: e.clientY
-    });
-  }, [position.x, position.y]);
-  var handleMouseMove = (0, _react.useCallback)(function (e) {
-    var _a, _b;
-    if (!isDragging) return;
-    e.preventDefault();
-    var newX = e.clientX - dragOffset.x;
-    var newY = e.clientY - dragOffset.y;
-    var divWidth = ((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
-    var divHeight = ((_b = divRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
-    var maxX = window.innerWidth - divWidth;
-    var maxY = window.innerHeight - divHeight;
-    setPosition({
-      x: Math.max(-divWidth + 50, Math.min(newX, maxX)),
-      y: Math.max(-divHeight + 50, Math.min(newY, maxY))
-    });
-  }, [isDragging, dragOffset]);
-  var handleMouseUp = (0, _react.useCallback)(function () {
-    setIsDragging(false);
-  }, []);
-  _react.default.useEffect(function () {
-    if (isDragging) {
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-      return function () {
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-      };
-    }
-  }, [isDragging, handleMouseMove, handleMouseUp]);
-  var handleTouchStart = (0, _react.useCallback)(function (e) {
-    e.preventDefault();
-    var touch = e.touches[0];
-    setIsDragging(true);
-    setDragStart({
-      x: touch.clientX,
-      y: touch.clientY
-    });
-    setDragOffset({
-      x: touch.clientX - position.x,
-      y: touch.clientY - position.y
-    });
-  }, [position.x, position.y]);
-  var handleTouchMove = (0, _react.useCallback)(function (e) {
-    var _a, _b;
-    if (!isDragging) return;
-    e.preventDefault();
-    var touch = e.touches[0];
-    var newX = touch.clientX - dragOffset.x;
-    var newY = touch.clientY - dragOffset.y;
-    var divWidth = ((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
-    var divHeight = ((_b = divRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
-    var maxX = window.innerWidth - divWidth;
-    var maxY = window.innerHeight - divHeight;
-    setPosition({
-      x: Math.max(-divWidth + 50, Math.min(newX, maxX)),
-      y: Math.max(-divHeight + 50, Math.min(newY, maxY))
-    });
-  }, [isDragging, dragOffset]);
-  var handleTouchEnd = (0, _react.useCallback)(function () {
-    setIsDragging(false);
-  }, []);
-  _react.default.useEffect(function () {
-    if (isDragging) {
-      document.addEventListener("touchmove", handleTouchMove, {
-        passive: false
-      });
-      document.addEventListener("touchend", handleTouchEnd);
-      return function () {
-        document.removeEventListener("touchmove", handleTouchMove);
-        document.removeEventListener("touchend", handleTouchEnd);
-      };
-    }
-  }, [isDragging, handleTouchMove, handleTouchEnd]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: divRef,
-    className: (0, _ui.cn)("absolute select-none touch-none transition-shadow duration-200", isDragging ? "cursor-grabbing shadow-2xl z-50" : "cursor-grab shadow-lg", className),
-    style: {
-      left: "".concat(position.x, "px"),
-      top: "".concat(position.y, "px")
-    },
-    onMouseDown: handleMouseDown,
-    onTouchStart: handleTouchStart
-  }, children);
-}