@axinom/mosaic-ui 0.66.0-rc.13 → 0.66.0-rc.15

package/src/helpers/idleCallbackHelpers.ts

@@ -0,0 +1,66 @@
+/**
+ * Type for the callback handle returned by scheduleIdleCallback.
+ * Can be either a number (from requestIdleCallback) or a NodeJS.Timeout (from setTimeout).
+ */
+export type IdleCallbackHandle = number | NodeJS.Timeout;
+
+/**
+ * Safely schedules a callback to be executed when the browser is idle.
+ * Falls back to setTimeout if requestIdleCallback is not available.
+ *
+ * @param callback - The function to execute during idle time
+ * @param options - Optional configuration (timeout in ms)
+ * @returns A handle that can be passed to cancelScheduledCallback
+ *
+ * @example
+ * ```typescript
+ * const handle = scheduleIdleCallback(() => {
+ *   console.log('Running during idle time');
+ * });
+ *
+ * // Later, if needed:
+ * cancelScheduledCallback(handle);
+ * ```
+ */
+export function scheduleIdleCallback(
+  callback: IdleRequestCallback,
+  options?: IdleRequestOptions,
+): IdleCallbackHandle {
+  if (typeof requestIdleCallback !== 'undefined') {
+    return requestIdleCallback(callback, options);
+  }
+
+  // Fallback to setTimeout for browsers that don't support requestIdleCallback
+  // Use a short timeout to approximate idle behavior
+  const timeout = options?.timeout ?? 1;
+  return setTimeout(() => {
+    const deadline: IdleDeadline = {
+      didTimeout: false,
+      timeRemaining: () => 50, // Approximate 50ms of available time
+    };
+    callback(deadline);
+  }, timeout);
+}
+
+/**
+ * Cancels a callback scheduled with scheduleIdleCallback.
+ * Works with both requestIdleCallback and setTimeout fallback.
+ *
+ * @param handle - The handle returned by scheduleIdleCallback
+ *
+ * @example
+ * ```typescript
+ * const handle = scheduleIdleCallback(() => {
+ *   console.log('This might not run');
+ * });
+ *
+ * cancelScheduledCallback(handle);
+ * ```
+ */
+export function cancelScheduledCallback(handle: IdleCallbackHandle): void {
+  if (typeof cancelIdleCallback !== 'undefined' && typeof handle === 'number') {
+    cancelIdleCallback(handle);
+  } else {
+    clearTimeout(handle as NodeJS.Timeout);
+  }
+}

package/src/helpers/index.ts

@@ -1 +1,6 @@
+export {
+  cancelScheduledCallback,
+  scheduleIdleCallback,
+  type IdleCallbackHandle,
+} from './idleCallbackHelpers';
 export { Nullable } from './utils';

package/src/hooks/useResize/useResize.ts

@@ -19,7 +19,13 @@ export const useResize = <T extends Data>(
     orgSize: string | undefined;
   }[];
   mouseDown: (index: number) => void;
+  isResizing: boolean;
+  resizePosition: number | undefined;
+  containerRef: React.RefObject<HTMLDivElement>;
 } => {
+  const currentGridColumns = React.useRef<string | undefined>(undefined);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
   const minCellWidth = 50;
 
   const cols = useMemo(
@@ -35,6 +41,9 @@ export const useResize = <T extends Data>(
   );
 
   const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined);
+  const [resizePosition, setResizePosition] = useState<number | undefined>(
+    undefined,
+  );
   const resizeStart = React.useRef<
     { mouse: number; width: number } | undefined
   >(undefined);
@@ -59,6 +68,12 @@ export const useResize = <T extends Data>(
           return;
         }
 
+        // Calculate position relative to container
+        if (containerRef.current) {
+          const containerRect = containerRef.current.getBoundingClientRect();
+          setResizePosition(e.clientX - containerRect.left);
+        }
+
         const gridColumns = cols.map((col, i) => {
           if (!col.ref.current) {
             return col.orgSize;
@@ -68,15 +83,17 @@ export const useResize = <T extends Data>(
             const width = start.width + e.clientX - start.mouse;
             if (width >= minCellWidth) {
               return `${width}px`;
+            } else {
+              return `${minCellWidth}px`;
             }
           }
           return `${col.ref.current.offsetWidth}px`;
         });
 
-        onColumnSizesChanged(gridColumns.join(' '));
+        currentGridColumns.current = gridColumns.join(' ');
       }
     },
-    [activeIndex, cols, onColumnSizesChanged],
+    [activeIndex, cols],
   );
 
   const mouseDown = (index: number): void => {
@@ -89,10 +106,19 @@ export const useResize = <T extends Data>(
   }, [mouseMove]);
 
   const mouseUp = useCallback(() => {
+    // Apply the new column sizes only if a resize actually happened
+    if (resizeStart.current !== undefined) {
+      onColumnSizesChanged(
+        currentGridColumns.current || cols.map((col) => col.orgSize).join(' '),
+      );
+    }
+
     setActiveIndex(undefined);
+    setResizePosition(undefined);
     resizeStart.current = undefined;
+    currentGridColumns.current = undefined;
     removeListeners();
-  }, [setActiveIndex, removeListeners]);
+  }, [removeListeners, onColumnSizesChanged, cols]);
 
   useEffect(() => {
     if (activeIndex !== undefined) {
@@ -105,5 +131,11 @@ export const useResize = <T extends Data>(
     };
   }, [activeIndex, mouseMove, mouseUp, removeListeners]);
 
-  return { cols, mouseDown };
+  return {
+    cols,
+    mouseDown,
+    isResizing: activeIndex !== undefined,
+    resizePosition,
+    containerRef,
+  };
 };