@shohojdhara/atomix 0.5.1 → 0.5.4

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -7,9 +7,7 @@ import React, {
   useRef,
   useState,
   useCallback,
-  useMemo,
   Children,
-  cloneElement,
   isValidElement,
 } from 'react';
 // Import styles for scoped CSS modules
@@ -122,7 +120,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
     // === REFS & STATE ===
     const [columns, setColumns] = useState(xs);
     const [positions, setPositions] = useState<ItemPosition[]>([]);
-    const [layoutComplete, setLayoutComplete] = useState(false);
+    const [, setLayoutComplete] = useState(false);
     const [loadingImages, setLoadingImages] = useState(false);
     const containerRef = useRef<HTMLDivElement>(null);
     const columnHeights = useRef<number[]>([]);
@@ -178,6 +176,32 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
       setItems(newItems);
     }, [children]);
 
+    // === MANAGE ITEM LAYOUT ===
+    const calculateLayout = useCallback(() => {
+      if (!containerRef.current || items.length === 0) return;
+      const containerWidth = containerRef.current.offsetWidth;
+      const colWidth = (containerWidth - gap * (columns - 1)) / columns;
+      columnHeights.current = Array(columns).fill(0);
+      const newPositions: ItemPosition[] = [];
+      items.forEach((item, index) => {
+        if (item.ref.current) {
+          // Find the shortest column
+          const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current));
+          const left = shortestCol * (colWidth + gap);
+          const top = columnHeights.current[shortestCol] ?? 0;
+          const height = item.ref.current.offsetHeight;
+          columnHeights.current[shortestCol] = top + height + gap;
+          newPositions[index] = {
+            left,
+            top,
+            width: colWidth,
+            height,
+          };
+        }
+      });
+      setPositions(newPositions);
+    }, [items, columns, gap]);
+
     // === TRACK & MANAGE IMAGES ===
 
     const handleImageLoad = useCallback(
@@ -195,30 +219,28 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
             itemElement.classList.remove('o-masonry-grid__item-loading');
           }
         }
-        // Ensure layout is recalculated after DOM paints the item image (prevents overlap on slow/late image loads)
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
+        // Schedule layout recalculation after next paint to prevent overlap
+        const scheduleLayoutUpdate = () => {
+          const frameId = requestAnimationFrame(() => {
+            onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current);
             calculateLayout();
           });
-        });
-        onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current);
+          return () => cancelAnimationFrame(frameId);
+        };
+
+        // Clean up previous scheduled updates
+        const cleanup = scheduleLayoutUpdate();
 
         // If all images have loaded, update loading state and complete layout
         if (imagesLoadedCount.current >= totalImagesCount.current && totalImagesCount.current > 0) {
           setLayoutComplete(true);
-          setLoadingImages(false); // This ensures the loading class is removed *immediately* after images load
-          // Force a double requestAnimationFrame for final layout calculation after all images are loaded (guarantees DOM paint)
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              calculateLayout();
-              // As a failsafe, if still present for some render lag, force another setLoadingImages(false)
-              setLoadingImages(false);
-            });
-          });
+          setLoadingImages(false);
+          setTimeout(() => cleanup(), 0); // Clean up after current execution
+          scheduleLayoutUpdate();
           onLayoutComplete?.();
         }
       },
-      [onImageLoad, onLayoutComplete, imagesLoaded]
+      [onImageLoad, onLayoutComplete, imagesLoaded, calculateLayout]
     );
 
     const trackImages = useCallback(() => {
@@ -262,40 +284,28 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
       };
     }, [imagesLoaded, handleImageLoad, onLayoutComplete]);
 
-    // === MANAGE ITEM LAYOUT ===
-    const calculateLayout = useCallback(() => {
-      if (!containerRef.current || items.length === 0) return;
-      const containerWidth = containerRef.current.offsetWidth;
-      const colWidth = (containerWidth - gap * (columns - 1)) / columns;
-      columnHeights.current = Array(columns).fill(0);
-      const newPositions: ItemPosition[] = [];
-      items.forEach((item, index) => {
-        if (item.ref.current) {
-          // Find the shortest column
-          const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current));
-          const left = shortestCol * (colWidth + gap);
-          const top = columnHeights.current[shortestCol] ?? 0;
-          const height = item.ref.current.offsetHeight;
-          columnHeights.current[shortestCol] = top + height + gap;
-          newPositions[index] = {
-            left,
-            top,
-            width: colWidth,
-            height,
-          };
-        }
-      });
-      setPositions(newPositions);
-    }, [items, columns, gap]);
-
     // === OBSERVE CONTAINER RESIZE ===
     useEffect(() => {
       if (!containerRef.current) return undefined;
+      
       let animationFrame: ReturnType<typeof requestAnimationFrame> | null = null;
-      const observer = new ResizeObserver(() => {
-        if (animationFrame) cancelAnimationFrame(animationFrame);
-        animationFrame = requestAnimationFrame(() => calculateLayout());
+      let lastWidth = 0;
+      
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        const currentWidth = entry.contentRect.width;
+        
+        // Only recalculate if width actually changed (prevents excessive calculations)
+        if (Math.abs(currentWidth - lastWidth) > 1) {
+          if (animationFrame) cancelAnimationFrame(animationFrame);
+          animationFrame = requestAnimationFrame(() => {
+            calculateLayout();
+            lastWidth = currentWidth;
+          });
+        }
       });
+      
       observer.observe(containerRef.current);
       return () => {
         observer.disconnect();
@@ -317,26 +327,28 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
       // Only reset layoutComplete when items or columns change
     }, [items, columns, calculateLayout, imagesLoaded, trackImages]);
 
-    // === NEW: Add ResizeObservers to all grid items for bulletproof image+content measurement ===
+    // === ADD RESIZEOBSERVERS TO GRID ITEMS FOR DYNAMIC CONTENT MEASUREMENT ===
     React.useEffect(() => {
-      // Clean up old observers if items ever change
       const observers: ResizeObserver[] = [];
+      let animationFrame: ReturnType<typeof requestAnimationFrame> | null = null;
+      
+      // Debounced layout calculation for item resize events
+      const debouncedCalculateLayout = () => {
+        if (animationFrame) cancelAnimationFrame(animationFrame);
+        animationFrame = requestAnimationFrame(calculateLayout);
+      };
+      
       items.forEach(item => {
         if (item.ref.current) {
-          const obs = new ResizeObserver(() => {
-            // Double rAF: ensures layout only runs after DOM/paint/async renders
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                calculateLayout();
-              });
-            });
-          });
+          const obs = new ResizeObserver(debouncedCalculateLayout);
           obs.observe(item.ref.current);
           observers.push(obs);
         }
       });
+      
       return () => {
         observers.forEach(obs => obs.disconnect());
+        if (animationFrame) cancelAnimationFrame(animationFrame);
       };
     }, [items, calculateLayout]);
 
@@ -376,7 +388,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
             return (
               <div
                 key={item.id}
-                ref={item.ref as React.LegacyRef<HTMLDivElement>}
+                ref={item.ref as React.RefObject<HTMLDivElement>}
                 style={{ opacity: 0, position: 'absolute' }}
               >
                 {item.element}
@@ -386,7 +398,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           return (
             <div
               key={item.id}
-              ref={item.ref as React.LegacyRef<HTMLDivElement>}
+              ref={item.ref as React.RefObject<HTMLDivElement>}
               className="o-masonry-grid__item"
               style={{
                 position: 'absolute',

package/src/lib/composables/atomix-glass/useGlassSize.ts

@@ -6,7 +6,7 @@ import type { GlassSize } from '../../types/components';
 const { CONSTANTS } = ATOMIX_GLASS;
 
 interface UseGlassSizeProps {
-  glassRef: React.RefObject<HTMLDivElement>;
+  glassRef: React.RefObject<HTMLDivElement | null>;
   effectiveBorderRadius: number;
   cachedRectRef?: React.MutableRefObject<DOMRect | null>;
 }

package/src/lib/composables/useAccordion.ts

@@ -1,5 +1,5 @@
 import { AccordionProps, AccordionState, IconPosition, ElementRefs } from '../types/components';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { ACCORDION } from '../constants/components';
 
 /**
@@ -72,20 +72,20 @@ export function useAccordion(
   /**
    * Update panel height based on content
    */
-  const updatePanelHeight = (): void => {
+  const updatePanelHeight = useCallback((): void => {
     if (contentRef.current && panelRef.current) {
       const height = isOpen ? `${contentRef.current.clientHeight}px` : '0px';
       panelRef.current.style.setProperty(ACCORDION.CSS_VARS.PANEL_HEIGHT, height);
       setPanelHeight(height);
     }
-  };
+  }, [isOpen]);
 
   /**
    * Effect to update panel height when open state changes
    */
   useEffect(() => {
     updatePanelHeight();
-  }, [isOpen]);
+  }, [isOpen, updatePanelHeight]);
 
   /**
    * Effect to handle window resize and update panel height
@@ -99,7 +99,7 @@ export function useAccordion(
 
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, [isOpen]);
+  }, [isOpen, updatePanelHeight]);
 
   /**
    * Generate accordion class names based on state

package/src/lib/composables/useAtomixGlass.ts

@@ -153,9 +153,9 @@ const setCachedBackgroundDetection = (
 };
 
 interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
-  glassRef: React.RefObject<HTMLDivElement>;
-  contentRef: React.RefObject<HTMLDivElement>;
-  wrapperRef?: React.RefObject<HTMLDivElement>;
+  glassRef: React.RefObject<HTMLDivElement | null>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+  wrapperRef?: React.RefObject<HTMLDivElement | null>;
   children?: React.ReactNode;
   isFixedOrSticky?: boolean;
   // Phase 1: Time-Based Animation System

package/src/lib/composables/useBarChart.ts

@@ -325,7 +325,7 @@ export function useBarChart(datasets: ChartDataset[], options: BarChartOptions =
       }
       return value.toString();
     },
-    [options.valueFormatter]
+    [options]
   );
 
   // Calculate data label position
@@ -352,7 +352,7 @@ export function useBarChart(datasets: ChartDataset[], options: BarChartOptions =
           };
       }
     },
-    [options.dataLabelPosition]
+    [options]
   );
 
   return {

package/src/lib/composables/useChart.ts

@@ -104,9 +104,10 @@ export function useChart(initialProps?: Partial<ChartProps>) {
 
   // Cleanup animation frame on unmount
   useEffect(() => {
+    const currentRef = animationFrameRef.current;
     return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
+      if (currentRef) {
+        cancelAnimationFrame(currentRef);
       }
     };
   }, []);

package/src/lib/composables/useChartToolbar.ts

@@ -148,17 +148,17 @@ export function useChartToolbar(
     return { ...getChartDefaults(), ...defaults };
   }, [getChartDefaults, defaults]);
 
-  const enhancedHandlers = {
-    onRefresh: useCallback(() => {
-      setState(prev => ({ ...prev, isRefreshing: true }));
-      handlers.onRefresh?.();
-      setTimeout(() => {
-        setState(prev => ({ ...prev, isRefreshing: false }));
-      }, 1000);
-    }, [handlers.onRefresh]),
-
-    onExport: useCallback(
-      async (format: string) => {
+  const enhancedHandlers = useMemo(
+    () => ({
+      onRefresh: () => {
+        setState(prev => ({ ...prev, isRefreshing: true }));
+        handlers.onRefresh?.();
+        setTimeout(() => {
+          setState(prev => ({ ...prev, isRefreshing: false }));
+        }, 1000);
+      },
+
+      onExport: async (format: string) => {
         setState(prev => ({ ...prev, isExporting: true }));
         try {
           await handlers.onExport?.(format);
@@ -166,83 +166,65 @@ export function useChartToolbar(
           setState(prev => ({ ...prev, isExporting: false }));
         }
       },
-      [handlers.onExport]
-    ),
 
-    onFullscreen: useCallback(
-      (isFullscreen: boolean) => {
+      onFullscreen: (isFullscreen: boolean) => {
         setState(prev => ({ ...prev, isFullscreen }));
         handlers.onFullscreen?.(isFullscreen);
       },
-      [handlers.onFullscreen]
-    ),
-
-    onZoomIn: useCallback(() => {
-      setState(prev => ({ ...prev, zoomLevel: Math.min(prev.zoomLevel * 1.2, 5) }));
-      handlers.onZoomIn?.();
-    }, [handlers.onZoomIn]),
-
-    onZoomOut: useCallback(() => {
-      setState(prev => ({ ...prev, zoomLevel: Math.max(prev.zoomLevel / 1.2, 0.2) }));
-      handlers.onZoomOut?.();
-    }, [handlers.onZoomOut]),
-
-    onZoomReset: useCallback(() => {
-      setState(prev => ({ ...prev, zoomLevel: 1 }));
-      handlers.onZoomReset?.();
-    }, [handlers.onZoomReset]),
-
-    onPanToggle: useCallback(
-      (enabled: boolean) => {
+
+      onZoomIn: () => {
+        setState(prev => ({ ...prev, zoomLevel: Math.min(prev.zoomLevel * 1.2, 5) }));
+        handlers.onZoomIn?.();
+      },
+
+      onZoomOut: () => {
+        setState(prev => ({ ...prev, zoomLevel: Math.max(prev.zoomLevel / 1.2, 0.2) }));
+        handlers.onZoomOut?.();
+      },
+
+      onZoomReset: () => {
+        setState(prev => ({ ...prev, zoomLevel: 1 }));
+        handlers.onZoomReset?.();
+      },
+
+      onPanToggle: (enabled: boolean) => {
         setState(prev => ({ ...prev, panEnabled: enabled }));
         handlers.onPanToggle?.(enabled);
       },
-      [handlers.onPanToggle]
-    ),
-
-    onReset: useCallback(() => {
-      setState(prev => ({
-        ...prev,
-        zoomLevel: 1,
-        panEnabled: false,
-      }));
-      handlers.onReset?.();
-    }, [handlers.onReset]),
-
-    onGridToggle: useCallback(
-      (show: boolean) => {
+
+      onReset: () => {
+        setState(prev => ({
+          ...prev,
+          zoomLevel: 1,
+          panEnabled: false,
+        }));
+        handlers.onReset?.();
+      },
+
+      onGridToggle: (show: boolean) => {
         setState(prev => ({ ...prev, showGrid: show }));
         handlers.onGridToggle?.(show);
       },
-      [handlers.onGridToggle]
-    ),
 
-    onLegendToggle: useCallback(
-      (show: boolean) => {
+      onLegendToggle: (show: boolean) => {
         setState(prev => ({ ...prev, showLegend: show }));
         handlers.onLegendToggle?.(show);
       },
-      [handlers.onLegendToggle]
-    ),
 
-    onTooltipsToggle: useCallback(
-      (show: boolean) => {
+      onTooltipsToggle: (show: boolean) => {
         setState(prev => ({ ...prev, showTooltips: show }));
         handlers.onTooltipsToggle?.(show);
       },
-      [handlers.onTooltipsToggle]
-    ),
 
-    onAnimationsToggle: useCallback(
-      (enabled: boolean) => {
+      onAnimationsToggle: (enabled: boolean) => {
         setState(prev => ({ ...prev, animationsEnabled: enabled }));
         handlers.onAnimationsToggle?.(enabled);
       },
-      [handlers.onAnimationsToggle]
-    ),
 
-    onSettings: useCallback(() => {}, []),
-  };
+      onSettings: () => {},
+    }),
+    [handlers]
+  );
 
   // Generate chart-specific toolbar groups
   const generateToolbarGroups = useCallback((): ChartToolbarGroup[] => {
@@ -441,7 +423,7 @@ export function useChartToolbar(
     }
 
     return groups;
-  }, [chartType, finalDefaults, state, enhancedHandlers, customActions, customGroups]);
+  }, [finalDefaults, state, enhancedHandlers, customActions, customGroups]);
 
   // Keyboard shortcuts
   useEffect(() => {

package/src/lib/composables/useDataTable.ts

@@ -255,7 +255,7 @@ export function useDataTable({
     ) {
       setColumnOrder(newOrder);
     }
-  }, [columns]);
+  }, [columns, columnOrder]);
 
   // Update column visibility when columns prop changes
   useEffect(() => {

package/src/lib/composables/useDatePicker.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import {
   DatePickerViewMode,
   DatePickerSelectionMode,
@@ -106,7 +106,7 @@ export function useDatePicker({
   const datePickerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const today = new Date();
+  const today = useMemo(() => new Date(), []);
   const currentMonth = viewDate.getMonth();
   const currentYear = viewDate.getFullYear();
   const daysInMonth = getDaysInMonth(currentYear, currentMonth);