@shohojdhara/atomix 0.5.1 → 0.5.4

package/src/lib/composables/useEdgePanel.ts

@@ -8,19 +8,19 @@ import { EDGE_PANEL } from '../constants/components';
  * @returns EdgePanel state and methods
  */
 export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
-  // Default EdgePanel properties
-  const defaultProps: Partial<EdgePanelProps> = {
-    position: 'start',
-    mode: 'slide',
-    isOpen: false,
-    backdrop: true,
-    closeOnBackdropClick: true,
-    closeOnEscape: true,
-    glass: undefined,
-    ...initialProps,
-  };
-
-  const [isOpen, setIsOpen] = useState(defaultProps.isOpen || false);
+  const {
+    position = 'start',
+    mode = 'slide',
+    isOpen: propIsOpen = false,
+    backdrop = true,
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    glass,
+    onOpenChange,
+    className = '',
+  } = initialProps || {};
+
+  const [isOpen, setIsOpen] = useState(propIsOpen || false);
   const containerRef = useRef<HTMLDivElement>(null);
   const backdropRef = useRef<HTMLDivElement>(null);
 
@@ -30,22 +30,21 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
    * @returns Class string
    */
   const generateEdgePanelClass = (props: Partial<EdgePanelProps>): string => {
-    const { position = defaultProps.position, className = '', isOpen: propIsOpen } = props;
+    const { position: propPosition = position, className: propClassName = className, isOpen: argIsOpen } = props;
 
     const baseClass = EDGE_PANEL.CLASSES.BASE;
-    const positionClass = position ? `${baseClass}--${position}` : '';
-    const openClass = (propIsOpen ?? isOpen) ? EDGE_PANEL.CLASSES.IS_OPEN : '';
+    const positionClass = propPosition ? `${baseClass}--${propPosition}` : '';
+    const openClass = (argIsOpen ?? isOpen) ? EDGE_PANEL.CLASSES.IS_OPEN : '';
 
-    return `${baseClass} ${positionClass} ${openClass} ${className}`.trim();
+    return `${baseClass} ${positionClass} ${openClass} ${propClassName}`.trim();
   };
 
   /**
    * Adjust body padding in push mode
    */
   const adjustBodyPadding = useCallback(() => {
-    if (!containerRef.current || defaultProps.mode !== 'push') return;
+    if (!containerRef.current || mode !== 'push') return;
 
-    const { position } = defaultProps;
     const size =
       position === 'top' || position === 'bottom'
         ? containerRef.current.clientHeight
@@ -67,15 +66,13 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
 
     document.body.style[paddingProperty as any] = `${size}px`;
     document.body.classList.add('is-pushed');
-  }, [defaultProps.mode, defaultProps.position]);
+  }, [mode, position]);
 
   /**
    * Reset body padding
    */
   const resetBodyPadding = useCallback(() => {
-    if (defaultProps.mode !== 'push') return;
-
-    const { position } = defaultProps;
+    if (mode !== 'push') return;
 
     // Map position to CSS padding property
     let paddingProperty: string;
@@ -93,7 +90,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
 
     document.body.style[paddingProperty as any] = '';
     document.body.classList.remove('is-pushed');
-  }, [defaultProps.mode, defaultProps.position]);
+  }, [mode, position]);
 
   /**
    * Open the panel
@@ -104,8 +101,6 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
       document.body.classList.add('is-edgepanel-open');
 
       if (containerRef.current) {
-        const { mode } = defaultProps;
-
         // Only add animation if not in 'none' mode
         if (mode !== 'none') {
           if (useFadeAnimation) {
@@ -148,16 +143,16 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
         }
 
         // If push mode, adjust body padding
-        if (defaultProps.mode === 'push') {
+        if (mode === 'push') {
           adjustBodyPadding();
         }
       }
 
-      if (defaultProps.onOpenChange) {
-        defaultProps.onOpenChange(true);
+      if (onOpenChange) {
+        onOpenChange(true);
       }
     },
-    [defaultProps, adjustBodyPadding]
+    [mode, adjustBodyPadding, onOpenChange]
   );
 
   /**
@@ -166,8 +161,6 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
   const closePanel = useCallback(
     (useFadeAnimation = false) => {
       if (containerRef.current) {
-        const { position, mode } = defaultProps;
-
         // Only add animation if not in 'none' mode
         if (mode !== 'none') {
           if (useFadeAnimation) {
@@ -209,7 +202,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
         }
 
         // Reset body padding if push mode
-        if (defaultProps.mode === 'push') {
+        if (mode === 'push') {
           resetBodyPadding();
         }
 
@@ -220,20 +213,20 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
           setIsOpen(false);
           document.body.classList.remove('is-edgepanel-open');
 
-          if (defaultProps.onOpenChange) {
-            defaultProps.onOpenChange(false);
+          if (onOpenChange) {
+            onOpenChange(false);
           }
         }, hideDelay);
       } else {
         setIsOpen(false);
         document.body.classList.remove('is-edgepanel-open');
 
-        if (defaultProps.onOpenChange) {
-          defaultProps.onOpenChange(false);
+        if (onOpenChange) {
+          onOpenChange(false);
         }
       }
     },
-    [defaultProps, resetBodyPadding]
+    [mode, position, onOpenChange, resetBodyPadding]
   );
 
   /**
@@ -241,11 +234,11 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
    */
   const handleEscapeKey = useCallback(
     (event: KeyboardEvent) => {
-      if (defaultProps.closeOnEscape && event.key === 'Escape' && isOpen) {
+      if (closeOnEscape && event.key === 'Escape' && isOpen) {
         closePanel();
       }
     },
-    [closePanel, defaultProps.closeOnEscape, isOpen]
+    [closePanel, closeOnEscape, isOpen]
   );
 
   /**
@@ -253,55 +246,53 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
    */
   const handleBackdropClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      if (defaultProps.closeOnBackdropClick && event.target === event.currentTarget) {
+      if (closeOnBackdropClick && event.target === event.currentTarget) {
         closePanel();
       }
     },
-    [closePanel, defaultProps.closeOnBackdropClick]
+    [closePanel, closeOnBackdropClick]
   );
 
   /**
    * Set up event listeners for keyboard events
    */
   useEffect(() => {
-    if (isOpen && defaultProps.closeOnEscape) {
+    if (isOpen && closeOnEscape) {
       document.addEventListener('keydown', handleEscapeKey);
     }
 
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
     };
-  }, [isOpen, handleEscapeKey, defaultProps.closeOnEscape]);
+  }, [isOpen, handleEscapeKey, closeOnEscape]);
 
   /**
    * Set initial transform values
    */
   useEffect(() => {
     if (containerRef.current) {
-      const { position, mode } = defaultProps;
-
       if (!isOpen && (mode === 'slide' || mode === 'push') && position) {
-        containerRef.current.style.transform = EDGE_PANEL.TRANSFORM_VALUES[position];
+        containerRef.current.style.transform = EDGE_PANEL.TRANSFORM_VALUES[position as keyof typeof EDGE_PANEL.TRANSFORM_VALUES];
         // Set initial opacity for fade animations
-        if (defaultProps.glass) {
+        if (glass) {
           containerRef.current.style.opacity = '0';
         }
       }
     }
-  }, [defaultProps.mode, defaultProps.position, defaultProps.glass, isOpen]);
+  }, [mode, position, glass, isOpen]);
 
   /**
    * Sync with prop changes
    */
   useEffect(() => {
-    if (defaultProps.isOpen !== undefined && defaultProps.isOpen !== isOpen) {
-      if (defaultProps.isOpen) {
-        openPanel(!!defaultProps.glass);
+    if (propIsOpen !== undefined && propIsOpen !== isOpen) {
+      if (propIsOpen) {
+        openPanel(!!glass);
       } else {
-        closePanel(!!defaultProps.glass);
+        closePanel(!!glass);
       }
     }
-  }, [defaultProps.isOpen, closePanel, isOpen, openPanel, defaultProps.glass]);
+  }, [propIsOpen, closePanel, isOpen, openPanel, glass]);
 
   return {
     isOpen,

package/src/lib/composables/useHeroBackgroundSlider.ts

@@ -18,12 +18,12 @@ export interface UseHeroBackgroundSliderResult {
   /**
    * Array of refs for slide container elements
    */
-  slideRefs: React.RefObject<HTMLDivElement>[];
+  slideRefs: React.RefObject<HTMLDivElement | null>[];
 
   /**
    * Array of refs for video elements
    */
-  videoRefs: React.RefObject<HTMLVideoElement>[];
+  videoRefs: React.RefObject<HTMLVideoElement | null>[];
 
   /**
    * Handle slide transition to next index
@@ -55,18 +55,18 @@ export function useHeroBackgroundSlider(
   const [isTransitioning, setIsTransitioning] = useState(false);
   const autoplayRef = useRef<NodeJS.Timeout | null>(null);
   const isPausedRef = useRef(false);
-  const callbackRef = useRef<() => void>();
+  const callbackRef = useRef<() => void | undefined>(undefined);
 
   // Create refs for slide containers
   const slideRefs = useMemo(
     () => slides.map(() => React.createRef<HTMLDivElement>()),
-    [slides.length]
+    [slides]
   );
 
   // Create refs for video elements
   const videoRefs = useMemo(
     () => slides.map(() => React.createRef<HTMLVideoElement>()),
-    [slides.length]
+    [slides]
   );
 
   /**

package/src/lib/composables/usePhotoViewer.ts

@@ -305,7 +305,7 @@ export const usePhotoViewer = ({
         };
       });
     },
-    [isMounted, currentIndex, calculateBounds, constrainPosition]
+    [currentIndex, calculateBounds, constrainPosition]
   );
 
   const setImagePosition = useCallback(
@@ -366,7 +366,7 @@ export const usePhotoViewer = ({
         };
       });
     },
-    [isMounted, currentIndex, calculateBounds, constrainPosition]
+    [currentIndex, calculateBounds, constrainPosition]
   );
 
   // Handle mouse wheel for zooming with proper bounds
@@ -866,7 +866,6 @@ export const usePhotoViewer = ({
       });
     },
     [
-      isMounted,
       enableGestures,
       isDragging,
       startDragPosition,

package/src/lib/composables/usePieChart.ts

@@ -294,7 +294,7 @@ export function usePieChart(data: ChartDataPoint[], options: PieChartOptions = {
 
       return parts.join(' - ');
     },
-    [options.labelFormatter, options.showLabels, options.showPercentages, options.showValues]
+    [options]
   );
 
   // Get slice transform for hover effect

package/src/lib/composables/usePopover.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, RefObject } from 'react';
+import { useState, useRef, useEffect, RefObject, useCallback } from 'react';
 
 type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
 type PopoverTrigger = 'click' | 'hover';
@@ -57,14 +57,17 @@ export const usePopover = ({
   const isOpenState = isControlled ? controlledIsOpen : isOpen;
 
   // Define setIsOpen function before using it in useEffect
-  const setIsOpen = (newIsOpen: boolean) => {
-    if (!isControlled) {
-      setIsOpenState(newIsOpen);
-    }
-    if (onOpenChange) {
-      onOpenChange(newIsOpen);
-    }
-  };
+  const setIsOpen = useCallback(
+    (newIsOpen: boolean) => {
+      if (!isControlled) {
+        setIsOpenState(newIsOpen);
+      }
+      if (onOpenChange) {
+        onOpenChange(newIsOpen);
+      }
+    },
+    [isControlled, onOpenChange]
+  );
 
   // Handle hover events if trigger is hover
   useEffect(() => {
@@ -115,141 +118,150 @@ export const usePopover = ({
     popoverRef.current.addEventListener('mouseenter', handlePopoverMouseEnter);
     popoverRef.current.addEventListener('mouseleave', handlePopoverMouseLeave);
 
+    const currentTrigger = triggerRef.current;
+    const currentPopover = popoverRef.current;
+
     return () => {
-      if (triggerRef.current) {
-        triggerRef.current.removeEventListener('mouseenter', handleTriggerMouseEnter);
-        triggerRef.current.removeEventListener('mouseleave', handleTriggerMouseLeave);
+      if (currentTrigger) {
+        currentTrigger.removeEventListener('mouseenter', handleTriggerMouseEnter);
+        currentTrigger.removeEventListener('mouseleave', handleTriggerMouseLeave);
       }
-      if (popoverRef.current) {
-        popoverRef.current.removeEventListener('mouseenter', handlePopoverMouseEnter);
-        popoverRef.current.removeEventListener('mouseleave', handlePopoverMouseLeave);
+      if (currentPopover) {
+        currentPopover.removeEventListener('mouseenter', handlePopoverMouseEnter);
+        currentPopover.removeEventListener('mouseleave', handlePopoverMouseLeave);
       }
       if (timeoutRef.current !== null) {
         window.clearTimeout(timeoutRef.current);
       }
     };
-  }, [trigger, delay, isOpenState]);
-
-  const updatePosition = (event?: Event) => {
-    if (!triggerRef.current || !popoverRef.current) return;
-
-    const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popoverRect = popoverRef.current.getBoundingClientRect();
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    // Check if the trigger is near viewport edges
-    const isNearViewportEdge =
-      triggerRect.top < 50 ||
-      triggerRect.bottom > viewportHeight - 50 ||
-      triggerRect.left < 50 ||
-      triggerRect.right > viewportWidth - 50;
-
-    // If this is a scroll update and trigger isn't near edges, skip repositioning
-    if (event?.type === 'scroll' && !isNearViewportEdge) {
-      return;
-    }
-
-    // Calculate space available in each direction
-    const spaceTop = triggerRect.top;
-    const spaceBottom = viewportHeight - triggerRect.bottom;
-    const spaceLeft = triggerRect.left;
-    const spaceRight = viewportWidth - triggerRect.right;
-
-    // Determine best position based on available space
-    let bestPosition: PopoverPosition = position === 'auto' ? 'top' : (position as PopoverPosition);
-
-    // If specified position is 'auto', find the position with most space
-    if (position === 'auto') {
-      const spaces = [
-        { position: 'top', space: spaceTop },
-        { position: 'right', space: spaceRight },
-        { position: 'bottom', space: spaceBottom },
-        { position: 'left', space: spaceLeft },
-      ];
-
-      // Sort by available space (descending)
-      spaces.sort((a, b) => b.space - a.space);
-
-      // Select position with most space
-      bestPosition = spaces[0]?.position as PopoverPosition;
-    } else {
-      // Check if the preferred position has enough space
-      const needsFlip =
-        (position === 'top' &&
-          spaceTop < popoverRect.height + offset &&
-          spaceBottom >= popoverRect.height + offset) ||
-        (position === 'bottom' &&
-          spaceBottom < popoverRect.height + offset &&
-          spaceTop >= popoverRect.height + offset) ||
-        (position === 'left' &&
-          spaceLeft < popoverRect.width + offset &&
-          spaceRight >= popoverRect.width + offset) ||
-        (position === 'right' &&
-          spaceRight < popoverRect.width + offset &&
-          spaceLeft >= popoverRect.width + offset);
-
-      if (needsFlip) {
-        // Flip to the opposite side
-        const oppositePositions: Record<PopoverPosition | 'auto', PopoverPosition> = {
-          top: 'bottom',
-          bottom: 'top',
-          left: 'right',
-          right: 'left',
-          auto: 'bottom',
-        };
-        bestPosition = oppositePositions[position as PopoverPosition | 'auto'];
+  }, [trigger, delay, isOpenState, setIsOpen]);
+
+  const updatePosition = useCallback(
+    (event?: Event) => {
+      if (!triggerRef.current || !popoverRef.current) return;
+
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Check if the trigger is near viewport edges
+      const isNearViewportEdge =
+        triggerRect.top < 50 ||
+        triggerRect.bottom > viewportHeight - 50 ||
+        triggerRect.left < 50 ||
+        triggerRect.right > viewportWidth - 50;
+
+      // If this is a scroll update and trigger isn't near edges, skip repositioning
+      if (event?.type === 'scroll' && !isNearViewportEdge) {
+        return;
       }
-    }
-
-    setCurrentPosition(bestPosition);
-
-    // Calculate position based on the determined best position
-    let top = 0;
-    let left = 0;
-
-    // Calculate viewport-relative position
-    switch (bestPosition) {
-      case 'top':
-        top = triggerRect.top - popoverRect.height - offset;
-        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
-        break;
-      case 'bottom':
-        top = triggerRect.bottom + offset;
-        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
-        break;
-      case 'left':
-        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
-        left = triggerRect.left - popoverRect.width - offset;
-        break;
-      case 'right':
-        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
-        left = triggerRect.right + offset;
-        break;
-    }
-
-    // Constrain to viewport boundaries
-    if (left < 0) {
-      left = 5;
-    } else if (left + popoverRect.width > viewportWidth) {
-      left = viewportWidth - popoverRect.width - 5;
-    }
-
-    if (top < 0) {
-      top = 5;
-    } else if (top + popoverRect.height > viewportHeight) {
-      top = viewportHeight - popoverRect.height - 5;
-    }
-
-    // Add scroll position to convert viewport coordinates to absolute position
-    const absoluteTop = top + window.scrollY;
-    const absoluteLeft = left + window.scrollX;
-
-    // Apply position using absolute positioning to follow when scrolling
-    popoverRef.current.style.position = 'absolute';
-    popoverRef.current.style.top = `${absoluteTop}px`;
-    popoverRef.current.style.left = `${absoluteLeft}px`;
-  };
+
+      // Calculate space available in each direction
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+
+      // Determine best position based on available space
+      let bestPosition: PopoverPosition =
+        position === 'auto' ? 'top' : (position as PopoverPosition);
+
+      // If specified position is 'auto', find the position with most space
+      if (position === 'auto') {
+        const spaces = [
+          { position: 'top', space: spaceTop },
+          { position: 'right', space: spaceRight },
+          { position: 'bottom', space: spaceBottom },
+          { position: 'left', space: spaceLeft },
+        ];
+
+        // Sort by available space (descending)
+        spaces.sort((a, b) => b.space - a.space);
+
+        // Select position with most space
+        bestPosition = spaces[0]?.position as PopoverPosition;
+      } else {
+        // Check if the preferred position has enough space
+        const needsFlip =
+          (position === 'top' &&
+            spaceTop < popoverRect.height + offset &&
+            spaceBottom >= popoverRect.height + offset) ||
+          (position === 'bottom' &&
+            spaceBottom < popoverRect.height + offset &&
+            spaceTop >= popoverRect.height + offset) ||
+          (position === 'left' &&
+            spaceLeft < popoverRect.width + offset &&
+            spaceRight >= popoverRect.width + offset) ||
+          (position === 'right' &&
+            spaceRight < popoverRect.width + offset &&
+            spaceLeft >= popoverRect.width + offset);
+
+        if (needsFlip) {
+          // Flip to the opposite side
+          const oppositePositions: Record<PopoverPosition | 'auto', PopoverPosition> = {
+            top: 'bottom',
+            bottom: 'top',
+            left: 'right',
+            right: 'left',
+            auto: 'bottom',
+          };
+          bestPosition = oppositePositions[position as PopoverPosition | 'auto'];
+        }
+      }
+
+      setCurrentPosition(bestPosition);
+
+      // Calculate position based on the determined best position
+      let top = 0;
+      let left = 0;
+
+      // Calculate viewport-relative position
+      switch (bestPosition) {
+        case 'top':
+          top = triggerRect.top - popoverRect.height - offset;
+          left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+          break;
+        case 'bottom':
+          top = triggerRect.bottom + offset;
+          left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+          break;
+        case 'left':
+          top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+          left = triggerRect.left - popoverRect.width - offset;
+          break;
+        case 'right':
+          top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+          left = triggerRect.right + offset;
+          break;
+      }
+
+      // Constrain to viewport boundaries
+      if (left < 0) {
+        left = 5;
+      } else if (left + popoverRect.width > viewportWidth) {
+        left = viewportWidth - popoverRect.width - 5;
+      }
+
+      if (top < 0) {
+        top = 5;
+      } else if (top + popoverRect.height > viewportHeight) {
+        top = viewportHeight - popoverRect.height - 5;
+      }
+
+      // Add scroll position to convert viewport coordinates to absolute position
+      const absoluteTop = top + window.scrollY;
+      const absoluteLeft = left + window.scrollX;
+
+      // Apply position using absolute positioning to follow when scrolling
+      if (popoverRef.current) {
+        popoverRef.current.style.position = 'absolute';
+        popoverRef.current.style.top = `${absoluteTop}px`;
+        popoverRef.current.style.left = `${absoluteLeft}px`;
+      }
+    },
+    [position, offset]
+  );
 
   // Position the popover
   useEffect(() => {
@@ -289,7 +301,7 @@ export const usePopover = ({
       }
       clearInterval(intervalId);
     };
-  }, [isOpenState, position, offset]);
+  }, [isOpenState, updatePosition]);
 
   // Handle click outside to close popover
   useEffect(() => {
@@ -311,7 +323,7 @@ export const usePopover = ({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [isOpenState, closeOnClickOutside]);
+  }, [isOpenState, closeOnClickOutside, setIsOpen]);
 
   // Handle escape key to close popover
   useEffect(() => {
@@ -328,7 +340,7 @@ export const usePopover = ({
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
     };
-  }, [isOpenState, closeOnEscape]);
+  }, [isOpenState, closeOnEscape, setIsOpen]);
 
   // Clean up on unmount
   useEffect(() => {