@shohojdhara/atomix 0.2.8 → 0.3.0

package/src/components/Navigation/SideMenu/SideMenu.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useRef, forwardRef } from 'react';
 import { SideMenuProps } from '../../../lib/types/components';
 import { useSideMenu } from '../../../lib/composables/useSideMenu';
-import { SIDE_MENU } from '../../../lib/constants/components';
 import { Icon } from '../../Icon';
 import { AtomixGlass } from '../../AtomixGlass/AtomixGlass';
-import { log } from 'console';
+import SideMenuList from './SideMenuList';
+import SideMenuItem from './SideMenuItem';
 
 /**
  * SideMenu component provides a collapsible navigation menu with title and menu items.
@@ -26,9 +26,12 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
     {
       title,
       children,
+      menuItems = [],
       isOpen,
       onToggle,
       collapsible = true,
+      collapsibleDesktop = false,
+      defaultCollapsedDesktop = false,
       className = '',
       style,
       disabled = false,
@@ -42,25 +45,162 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       isOpenState,
       wrapperRef,
       innerRef,
+      sideMenuRef,
       generateSideMenuClass,
       generateWrapperClass,
       handleToggle,
+      handleDesktopCollapse,
     } = useSideMenu({
       isOpen,
       onToggle,
       collapsible,
+      collapsibleDesktop,
+      defaultCollapsedDesktop,
       disabled,
     });
 
-    const sideMenuClass = generateSideMenuClass({ className, isOpen: isOpenState });
+    const MOBILE_BREAKPOINT = 768;
+
+    // Track mobile state
+    const [isMobileState, setIsMobileState] = useState(() => {
+      if (typeof window === 'undefined') return false;
+      return window.innerWidth < MOBILE_BREAKPOINT;
+    });
+
+    // Track open state for nested menu items
+    const [nestedItemStates, setNestedItemStates] = useState<Record<number, boolean>>(() => {
+      const initialState: Record<number, boolean> = {};
+      menuItems?.forEach((_, index) => {
+        initialState[index] = true; // Default to open
+      });
+      return initialState;
+    });
+
+    // Refs for nested menu item wrappers
+    const nestedWrapperRefs = useRef<Record<number, HTMLDivElement | null>>({});
+    const nestedInnerRefs = useRef<Record<number, HTMLDivElement | null>>({});
+    const menuItemsLengthRef = useRef<number>(menuItems?.length ?? 0);
+
+    useEffect(() => {
+      const handleResize = () => {
+        setIsMobileState(window.innerWidth < MOBILE_BREAKPOINT);
+      };
+
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    // Update nested item states when menuItems change
+    useEffect(() => {
+      const currentLength = menuItems?.length ?? 0;
+      // Only update if the length actually changed to prevent infinite loops
+      if (menuItemsLengthRef.current === currentLength) return;
+      
+      menuItemsLengthRef.current = currentLength;
+      
+      setNestedItemStates(prevStates => {
+        const newStates: Record<number, boolean> = {};
+        menuItems?.forEach((_, index) => {
+          newStates[index] = prevStates[index] ?? true;
+        });
+        return newStates;
+      });
+
+      // Clean up refs for removed items
+      Object.keys(nestedWrapperRefs.current).forEach(key => {
+        const index = Number(key);
+        if (index >= currentLength) {
+          delete nestedWrapperRefs.current[index];
+          delete nestedInnerRefs.current[index];
+        }
+      });
+    }, [menuItems?.length]);
+
+    // Set initial heights for nested wrappers on mount and when menuItems change
+    useEffect(() => {
+      if (!menuItems?.length) return;
+
+      const timeoutId = setTimeout(() => {
+        menuItems.forEach((_, index) => {
+          const wrapper = nestedWrapperRefs.current[index];
+          const inner = nestedInnerRefs.current[index];
+          const isOpen = nestedItemStates[index] ?? true;
+
+          if (wrapper && inner) {
+            if (isOpen) {
+              wrapper.style.height = `${inner.scrollHeight}px`;
+            } else {
+              wrapper.style.height = '0px';
+            }
+          }
+        });
+      }, 0);
+
+      return () => clearTimeout(timeoutId);
+      // Only run when menuItems change, nestedItemStates is read but not in deps to avoid loops
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuItems?.length]);
+
+    // Update nested wrapper heights when state changes
+    useEffect(() => {
+      if (!menuItems?.length) return;
+
+      const frameIds: number[] = [];
+
+      Object.keys(nestedItemStates).forEach(key => {
+        const index = Number(key);
+        const wrapper = nestedWrapperRefs.current[index];
+        const inner = nestedInnerRefs.current[index];
+        const isOpen = nestedItemStates[index];
+
+        if (wrapper && inner) {
+          const frameId = requestAnimationFrame(() => {
+            if (wrapper && inner) {
+              if (isOpen) {
+                wrapper.style.height = `${inner.scrollHeight}px`;
+              } else {
+                wrapper.style.height = '0px';
+              }
+            }
+          });
+          frameIds.push(frameId);
+        }
+      });
+
+      return () => {
+        frameIds.forEach(id => cancelAnimationFrame(id));
+      };
+    }, [nestedItemStates, menuItems?.length]);
+
+    // Combine refs
+    const combinedRef = (node: HTMLDivElement | null) => {
+      (sideMenuRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      }
+    };
+
+    const sideMenuClass = generateSideMenuClass({
+      className,
+      isOpen: isOpenState,
+    });
     const wrapperClass = generateWrapperClass();
 
     // Default toggle icon using Atomix Icon component
     const defaultToggleIcon = <Icon name="CaretRight" size="xs" />;
 
+    // Determine if we should show toggler (mobile or desktop with collapsibleDesktop)
+    const shouldShowToggler =
+      (isMobileState && collapsible) || (!isMobileState && collapsibleDesktop);
+    // Only show separate title if toggler is NOT shown (toggler already contains the title)
+    const shouldShowTitle = title && !shouldShowToggler;
+
     const sideMenuContent = (
       <>
-        {title && collapsible && (
+        {/* Toggler (works for both mobile and desktop) */}
+        {title && shouldShowToggler && (
           <div
             className="c-side-menu__toggler"
             onClick={handleToggle}
@@ -81,16 +221,98 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
           </div>
         )}
 
-        {title && !collapsible && <h3 className="c-side-menu__title">{title}</h3>}
+        {/* Title (non-collapsible) */}
+        {shouldShowTitle && <h3 className="c-side-menu__title">{title}</h3>}
 
         <div
           ref={wrapperRef}
           className={wrapperClass}
           id={id ? `${id}-content` : undefined}
-          aria-hidden={collapsible ? !isOpenState : false}
+          aria-hidden={shouldShowToggler ? !isOpenState : false}
         >
           <div ref={innerRef} className="c-side-menu__inner">
-            {children}
+            {children && children}
+            {menuItems?.map((item, index) => {
+              const isNestedItemOpen = nestedItemStates[index] ?? true;
+              const hasItems = item.items && item.items.length > 0;
+              const canToggle = hasItems && !disabled;
+
+              const handleNestedToggle = () => {
+                if (!canToggle) return;
+                setNestedItemStates(prev => ({
+                  ...prev,
+                  [index]: !prev[index],
+                }));
+              };
+
+              return (
+                <div key={index} className="c-side-menu__item">
+                  {item.title && (
+                    <div
+                      className={[
+                        'c-side-menu__toggler',
+                        canToggle && 'c-side-menu__toggler--nested',
+                        isNestedItemOpen && 'is-open',
+                      ]
+                        .filter(Boolean)
+                        .join(' ')}
+                      onClick={canToggle ? handleNestedToggle : undefined}
+                      role={canToggle ? 'button' : undefined}
+                      tabIndex={canToggle && !disabled ? 0 : undefined}
+                      aria-expanded={canToggle ? isNestedItemOpen : undefined}
+                      aria-disabled={disabled}
+                      onKeyDown={
+                        canToggle
+                          ? e => {
+                              if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+                                e.preventDefault();
+                                handleNestedToggle();
+                              }
+                            }
+                          : undefined
+                      }
+                    >
+                      <span className="c-side-menu__title">{item.title}</span>
+                      {canToggle && (
+                        <span className="c-side-menu__toggler-icon">
+                          {item.toggleIcon || <Icon name="CaretRight" size="xs" />}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                  {hasItems && (
+                    <div
+                      ref={node => {
+                        nestedWrapperRefs.current[index] = node;
+                      }}
+                      className="c-side-menu__nested-wrapper"
+                    >
+                      <div
+                        ref={node => {
+                          nestedInnerRefs.current[index] = node;
+                        }}
+                        className="c-side-menu__nested-inner"
+                      >
+                        <SideMenuList>
+                          {item.items?.map((subItem, subIndex) => (
+                            <SideMenuItem
+                              key={subIndex}
+                              href={subItem.href}
+                              onClick={subItem.onClick}
+                              active={subItem.active}
+                              disabled={subItem.disabled}
+                              icon={subItem.icon}
+                            >
+                              {subItem.title}
+                            </SideMenuItem>
+                          ))}
+                        </SideMenuList>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
           </div>
         </div>
       </>
@@ -106,7 +328,12 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
       return (
         <AtomixGlass {...glassProps}>
-          <div ref={ref} className={sideMenuClass + ' c-side-menu--glass'} id={id} style={style}>
+          <div
+            ref={combinedRef}
+            className={sideMenuClass + ' c-side-menu--glass'}
+            id={id}
+            style={style}
+          >
             {sideMenuContent}
           </div>
         </AtomixGlass>
@@ -114,7 +341,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
     }
 
     return (
-      <div ref={ref} className={sideMenuClass} id={id} style={style}>
+      <div ref={combinedRef} className={sideMenuClass} id={id} style={style}>
         {sideMenuContent}
       </div>
     );

package/src/components/Navigation/SideMenu/SideMenuItem.tsx

@@ -66,10 +66,15 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
     // Render as link if href is provided
     if (href) {
       return LinkComponent ? (
-        <LinkComponent {...linkProps}>
-          {icon && <span className="c-side-menu__link-icon">{icon}</span>}
-          <span className="c-side-menu__link-text">{children}</span>
-        </LinkComponent>
+        (() => {
+          const Component = LinkComponent as React.ComponentType<any>;
+          return (
+            <Component {...linkProps}>
+              {icon && <span className="c-side-menu__link-icon">{icon}</span>}
+              <span className="c-side-menu__link-text">{children}</span>
+            </Component>
+          );
+        })()
       ) : (
         <a {...linkProps}>
           {icon && <span className="c-side-menu__link-icon">{icon}</span>}

package/src/lib/composables/useSideMenu.ts

@@ -11,76 +11,126 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
   // Default side menu properties
   const defaultProps: Partial<SideMenuProps> = {
     collapsible: true,
+    collapsibleDesktop: false,
+    defaultCollapsedDesktop: false,
     isOpen: false,
     ...initialProps,
   };
 
   // Local open state for when not controlled externally
-  const [isOpenState, setIsOpenState] = useState(defaultProps.isOpen || false);
+  const [isOpenState, setIsOpenState] = useState(
+    defaultProps.defaultCollapsedDesktop !== undefined 
+      ? !defaultProps.defaultCollapsedDesktop 
+      : (defaultProps.isOpen || false)
+  );
 
   // Refs for managing responsive behavior
   const wrapperRef = useRef<HTMLDivElement>(null);
   const innerRef = useRef<HTMLDivElement>(null);
+  const sideMenuRef = useRef<HTMLDivElement>(null);
 
   // Update local state when external state changes
   useEffect(() => {
     if (typeof defaultProps.isOpen !== 'undefined') {
       setIsOpenState(defaultProps.isOpen);
+    } else if (defaultProps.defaultCollapsedDesktop !== undefined) {
+      setIsOpenState(!defaultProps.defaultCollapsedDesktop);
     }
-  }, [defaultProps.isOpen]);
+  }, [defaultProps.isOpen, defaultProps.defaultCollapsedDesktop]);
 
-  // Handle responsive behavior - auto-open on desktop, controlled on mobile
+  // Set initial height on mount
   useEffect(() => {
-    const handleResize = () => {
-      const isMobile = window.innerWidth < 768; // MD breakpoint
+    const isMobile = window.innerWidth < 768;
+    const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
+    const currentOpen = typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
 
-      if (!isMobile && defaultProps.collapsible) {
-        // Auto-open on desktop
-        if (typeof defaultProps.onToggle === 'function') {
-          defaultProps.onToggle(true);
-        } else {
-          setIsOpenState(true);
+    if (shouldCollapse && wrapperRef.current && innerRef.current) {
+      // Use setTimeout to ensure DOM is fully rendered
+      const timeoutId = setTimeout(() => {
+        if (wrapperRef.current && innerRef.current) {
+          if (currentOpen) {
+            wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+          } else {
+            wrapperRef.current.style.height = '0px';
+          }
         }
+      }, 0);
+
+      return () => clearTimeout(timeoutId);
+    } else if (!shouldCollapse && wrapperRef.current) {
+      wrapperRef.current.style.height = 'auto';
+    }
+  }, []); // Only run on mount
+
+  // Handle responsive behavior - vertical collapse for both mobile and desktop
+  useEffect(() => {
+    const handleResize = () => {
+      const isMobile = window.innerWidth < 768; // MD breakpoint
+      const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
 
-        // Reset wrapper height on desktop
+      if (!shouldCollapse) {
+        // Not collapsible - always show content
         if (wrapperRef.current) {
           wrapperRef.current.style.height = 'auto';
         }
-      } else if (isMobile && wrapperRef.current && innerRef.current) {
-        // Set proper height for mobile animation
+      } else if (wrapperRef.current && innerRef.current) {
+        // Set proper height for vertical animation (both mobile and desktop)
         const currentOpen =
           typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
-        if (currentOpen) {
-          wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
-        } else {
-          wrapperRef.current.style.height = '0px';
-        }
+        
+        // Use requestAnimationFrame to ensure DOM is ready
+        requestAnimationFrame(() => {
+          if (wrapperRef.current && innerRef.current) {
+            if (currentOpen) {
+              wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+            } else {
+              wrapperRef.current.style.height = '0px';
+            }
+          }
+        });
       }
     };
 
-    handleResize(); // Initial call
+    // Initial call with a small delay to ensure DOM is ready
+    const timeoutId = setTimeout(handleResize, 0);
     window.addEventListener('resize', handleResize);
 
     return () => {
+      clearTimeout(timeoutId);
       window.removeEventListener('resize', handleResize);
     };
-  }, [defaultProps.collapsible, defaultProps.isOpen, defaultProps.onToggle, isOpenState]);
+  }, [
+    defaultProps.collapsible,
+    defaultProps.collapsibleDesktop,
+    defaultProps.isOpen,
+    defaultProps.onToggle,
+    isOpenState,
+  ]);
 
-  // Update wrapper height when open state changes on mobile
+  // Update wrapper height when open state changes (both mobile and desktop)
   useEffect(() => {
     const isMobile = window.innerWidth < 768;
+    const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
 
-    if (isMobile && wrapperRef.current && innerRef.current && defaultProps.collapsible) {
+    if (shouldCollapse && wrapperRef.current && innerRef.current) {
       const currentOpen =
         typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
 
-      if (currentOpen) {
-        wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
-      } else {
-        wrapperRef.current.style.height = '0px';
-      }
+      // Use requestAnimationFrame to ensure DOM is ready
+      requestAnimationFrame(() => {
+        if (wrapperRef.current && innerRef.current) {
+          if (currentOpen) {
+            wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+          } else {
+            wrapperRef.current.style.height = '0px';
+          }
+        }
+      });
+    } else if (!shouldCollapse && wrapperRef.current) {
+      // Not collapsible - always show content
+      wrapperRef.current.style.height = 'auto';
     }
-  }, [defaultProps.isOpen, isOpenState, defaultProps.collapsible]);
+  }, [defaultProps.isOpen, isOpenState, defaultProps.collapsible, defaultProps.collapsibleDesktop]);
 
   /**
    * Generate side menu class based on properties
@@ -104,7 +154,7 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
   };
 
   /**
-   * Handle toggle click
+   * Handle toggle click (mobile)
    */
   const handleToggle = () => {
     if (defaultProps.disabled) return;
@@ -121,6 +171,13 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
     }
   };
 
+  /**
+   * Handle desktop collapse toggle (uses same toggle as mobile)
+   */
+  const handleDesktopCollapse = () => {
+    handleToggle();
+  };
+
   /**
    * Get current open state
    * @returns Current open state
@@ -134,9 +191,11 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
     isOpenState: getCurrentOpenState(),
     wrapperRef,
     innerRef,
+    sideMenuRef,
     generateSideMenuClass,
     generateWrapperClass,
     handleToggle,
+    handleDesktopCollapse,
     getCurrentOpenState,
   };
 }

package/src/lib/index.ts

@@ -3,9 +3,14 @@ import * as composablesImport from './composables';
 import * as utilsImport from './utils';
 import * as typesImport from './types';
 import * as constantsImport from './constants';
+import * as themeImport from './theme';
 
 // Export as namespaces with explicit typing
 export const composables: typeof composablesImport = composablesImport;
 export const utils: typeof utilsImport = utilsImport;
 export const types: typeof typesImport = typesImport;
 export const constants: typeof constantsImport = constantsImport;
+export const theme: typeof themeImport = themeImport;
+
+// Also export theme utilities directly for convenience
+export * from './theme';

package/src/lib/theme/ThemeContext.tsx

@@ -0,0 +1,17 @@
+/**
+ * Theme Context
+ * 
+ * React context for theme management
+ */
+
+import { createContext } from 'react';
+import type { ThemeContextValue } from './types';
+
+/**
+ * Theme context with default values
+ */
+export const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+ThemeContext.displayName = 'ThemeContext';
+
+export default ThemeContext;