@chekinapp/ui 0.0.104 → 0.0.105

package/dist/index.cjs

@@ -3096,23 +3096,40 @@ function useLoadMore({
   threshold = 0.1,
   rootMargin
 }) {
-  const loadMoreRef = (0, import_react17.useRef)(null);
+  const elementRef = (0, import_react17.useRef)(null);
+  const observerRef = (0, import_react17.useRef)(null);
+  const handleLoadMore = useEvent(onLoadMore);
+  const cleanupObserver = (0, import_react17.useCallback)(() => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+  }, []);
+  const observeElement = (0, import_react17.useCallback)(
+    (element) => {
+      cleanupObserver();
+      if (!element || typeof IntersectionObserver === "undefined") return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (!entry?.isIntersecting || !hasNextPage || loading || disabled) return;
+          handleLoadMore();
+        },
+        { threshold, rootMargin }
+      );
+      observer.observe(element);
+      observerRef.current = observer;
+    },
+    [cleanupObserver, disabled, handleLoadMore, hasNextPage, loading, rootMargin, threshold]
+  );
+  const loadMoreRef = (0, import_react17.useCallback)(
+    (element) => {
+      elementRef.current = element;
+      observeElement(element);
+    },
+    [observeElement]
+  );
   (0, import_react17.useEffect)(() => {
-    const element = loadMoreRef.current;
-    if (!element) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && hasNextPage && !loading && !disabled) {
-          onLoadMore();
-        }
-      },
-      { threshold, rootMargin }
-    );
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, [hasNextPage, loading, disabled, onLoadMore, threshold, rootMargin]);
+    return cleanupObserver;
+  }, [cleanupObserver]);
   return [loadMoreRef];
 }
 
@@ -9238,7 +9255,13 @@ var SIGNATURE_PROPS = {
   throttle: 16
 };
 var ASPECT_RATIO = 330 / 190;
-function getTrimmedCanvasData(canvas, padding = 10) {
+function getCanvasPixelPadding(canvas, padding) {
+  if (!Number.isFinite(padding) || padding <= 0) return 0;
+  const cssWidth = canvas.getBoundingClientRect().width;
+  const scale = cssWidth > 0 ? canvas.width / cssWidth : 1;
+  return Math.round(padding * scale);
+}
+function getTrimmedCanvas(canvas, padding = 10) {
   const ctx = canvas.getContext("2d");
   if (!ctx) return null;
   const { width, height } = canvas;
@@ -9254,18 +9277,19 @@ function getTrimmedCanvasData(canvas, padding = 10) {
       const alpha = data[(y * width + x) * 4 + 3];
       if (alpha > 0) {
         hasContent = true;
-        minX = Math.min(minX, x);
-        minY = Math.min(minY, y);
-        maxX = Math.max(maxX, x);
-        maxY = Math.max(maxY, y);
+        if (x < minX) minX = x;
+        if (y < minY) minY = y;
+        if (x > maxX) maxX = x;
+        if (y > maxY) maxY = y;
       }
     }
   }
   if (!hasContent) return null;
-  minX = Math.max(0, minX - padding);
-  minY = Math.max(0, minY - padding);
-  maxX = Math.min(width - 1, maxX + padding);
-  maxY = Math.min(height - 1, maxY + padding);
+  const pixelPadding = getCanvasPixelPadding(canvas, padding);
+  minX = Math.max(0, minX - pixelPadding);
+  minY = Math.max(0, minY - pixelPadding);
+  maxX = Math.min(width - 1, maxX + pixelPadding);
+  maxY = Math.min(height - 1, maxY + pixelPadding);
   const trimmedWidth = maxX - minX + 1;
   const trimmedHeight = maxY - minY + 1;
   const trimmedCanvas = document.createElement("canvas");
@@ -9284,10 +9308,7 @@ function getTrimmedCanvasData(canvas, padding = 10) {
     trimmedWidth,
     trimmedHeight
   );
-  return {
-    canvas: trimmedCanvas,
-    bounds: { x: minX, y: minY, width: trimmedWidth, height: trimmedHeight }
-  };
+  return trimmedCanvas;
 }
 var SignatureCanvas = (0, import_react74.forwardRef)(
   ({ onClear, onEnd, onEnable, className, enabled }, ref) => {
@@ -9352,9 +9373,9 @@ var SignatureCanvas = (0, import_react74.forwardRef)(
       toTrimmedDataURL: (type = "image/png", encoderOptions, padding = 10) => {
         const canvas = canvasRef.current?.getCanvas();
         if (!canvas) return "";
-        const trimmed = getTrimmedCanvasData(canvas, padding);
+        const trimmed = getTrimmedCanvas(canvas, padding);
         if (!trimmed) return "";
-        return trimmed.canvas.toDataURL(type, encoderOptions);
+        return trimmed.toDataURL(type, encoderOptions);
       },
       getCanvas: (...args) => canvasRef.current?.getCanvas(...args)
     }));