@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/components/ui/navigation/sidebar.esm.js

@@ -1,383 +1,171 @@
-/**
- * Sidebar Component
- * Provides comprehensive sidebar functionality with theme support and multiple variants
- */
-
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useEffect } from 'react';
-import { SidebarProps, NavigationItem, NavigationGroup } from './types';
-
 // Simple icon components
-const ChevronLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-  </svg>
-);
-
-const ChevronRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-  </svg>
-);
-
+const ChevronLeftIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }));
+const ChevronRightIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
 // TODO: Implement close icon functionality in future version
 // const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
 //   <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
 //     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
 //   </svg>
 // );
-
-export const Sidebar: React.FC<SidebarProps> = ({
-  items = [],
-  groups = [],
-  variant = 'default',
-  size = 'md',
-  position = 'left',
-  collapsed = false,
-  defaultCollapsed = false,
-  onCollapseChange,
-  collapsible = true,
-  showToggle = true,
-  toggleIcon,
-  header,
-  footer,
-  overlay = false,
-  overlayCloseOnClick = true,
-  overlayCloseOnEscape = true,
-  overlayCloseOnOutsideClick = true,
-  responsive = true,
-  breakpoint = 'lg',
-  onItemClick,
-  onGroupToggle,
-  expandedGroups = [],
-  defaultExpandedGroups = [],
-  // TODO: Implement group icons in future version
-  // showGroupIcons = true,
-  showItemIcons = true,
-  showItemBadges = true,
-  showItemDescriptions = true,
-  sticky = false,
-  zIndex = 1000,
-  className = '',
-  'data-testid': testId = 'sidebar',
-}) => {
-  const [internalCollapsed, setInternalCollapsed] = useState<boolean>(
-    collapsed !== undefined ? collapsed : defaultCollapsed
-  );
-  const [internalExpandedGroups, setInternalExpandedGroups] = useState<string[]>(
-    expandedGroups !== undefined ? expandedGroups : defaultExpandedGroups
-  );
-  const [isOverlayOpen, setIsOverlayOpen] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  
-  const sidebarRef = useRef<HTMLDivElement>(null);
-
-  // Use controlled or uncontrolled collapsed state
-  const currentCollapsed = collapsed !== undefined ? collapsed : internalCollapsed;
-  const currentExpandedGroups = expandedGroups !== undefined ? expandedGroups : internalExpandedGroups;
-
-  // Handle responsive behavior
-  useEffect(() => {
-    const handleResize = () => {
-      const breakpointWidth = breakpoint === 'sm' ? 640 : breakpoint === 'md' ? 768 : breakpoint === 'lg' ? 1024 : 1280;
-      setIsMobile(window.innerWidth < breakpointWidth);
+export const Sidebar = ({ items = [], groups = [], variant = 'default', size = 'md', position = 'left', collapsed = false, defaultCollapsed = false, onCollapseChange, collapsible = true, showToggle = true, toggleIcon, header, footer, overlay = false, overlayCloseOnClick = true, overlayCloseOnEscape = true, overlayCloseOnOutsideClick = true, responsive = true, breakpoint = 'lg', onItemClick, onGroupToggle, expandedGroups = [], defaultExpandedGroups = [], 
+// TODO: Implement group icons in future version
+// showGroupIcons = true,
+showItemIcons = true, showItemBadges = true, showItemDescriptions = true, sticky = false, zIndex = 1000, className = '', 'data-testid': testId = 'sidebar', }) => {
+    const [internalCollapsed, setInternalCollapsed] = useState(collapsed !== undefined ? collapsed : defaultCollapsed);
+    const [internalExpandedGroups, setInternalExpandedGroups] = useState(expandedGroups !== undefined ? expandedGroups : defaultExpandedGroups);
+    const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const sidebarRef = useRef(null);
+    // Use controlled or uncontrolled collapsed state
+    const currentCollapsed = collapsed !== undefined ? collapsed : internalCollapsed;
+    const currentExpandedGroups = expandedGroups !== undefined ? expandedGroups : internalExpandedGroups;
+    // Handle responsive behavior
+    useEffect(() => {
+        const handleResize = () => {
+            const breakpointWidth = breakpoint === 'sm' ? 640 : breakpoint === 'md' ? 768 : breakpoint === 'lg' ? 1024 : 1280;
+            setIsMobile(window.innerWidth < breakpointWidth);
+        };
+        if (responsive) {
+            handleResize();
+            window.addEventListener('resize', handleResize);
+        }
+        return () => {
+            if (responsive) {
+                window.removeEventListener('resize', handleResize);
+            }
+        };
+    }, [responsive, breakpoint]);
+    // Handle escape key for overlay
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape' && isOverlayOpen && overlayCloseOnEscape) {
+                setIsOverlayOpen(false);
+            }
+        };
+        if (isOverlayOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOverlayOpen, overlayCloseOnEscape]);
+    const handleCollapseToggle = useCallback(() => {
+        if (!collapsible)
+            return;
+        const newCollapsed = !currentCollapsed;
+        if (collapsed === undefined) {
+            setInternalCollapsed(newCollapsed);
+        }
+        if (onCollapseChange) {
+            onCollapseChange(newCollapsed);
+        }
+    }, [collapsed, currentCollapsed, collapsible, onCollapseChange]);
+    const handleGroupToggle = useCallback((groupId) => {
+        const newExpandedGroups = currentExpandedGroups.includes(groupId)
+            ? currentExpandedGroups.filter(id => id !== groupId)
+            : [...currentExpandedGroups, groupId];
+        if (expandedGroups === undefined) {
+            setInternalExpandedGroups(newExpandedGroups);
+        }
+        if (onGroupToggle) {
+            onGroupToggle(groupId, newExpandedGroups.includes(groupId));
+        }
+    }, [currentExpandedGroups, expandedGroups, onGroupToggle]);
+    const handleItemClick = useCallback((item) => {
+        if (item.disabled)
+            return;
+        if (onItemClick) {
+            onItemClick(item);
+        }
+        if (item.onClick) {
+            item.onClick();
+        }
+        // Close overlay on mobile after item click
+        if (isMobile && overlay && overlayCloseOnClick) {
+            setIsOverlayOpen(false);
+        }
+    }, [onItemClick, isMobile, overlay, overlayCloseOnClick]);
+    const handleOverlayClose = useCallback(() => {
+        setIsOverlayOpen(false);
+    }, []);
+    const getSizeClasses = () => {
+        if (currentCollapsed)
+            return 'sidebar--collapsed';
+        switch (size) {
+            case 'sm':
+                return 'sidebar--size-sm';
+            case 'lg':
+                return 'sidebar--size-lg';
+            case 'xl':
+                return 'sidebar--size-xl';
+            default: // md
+                return 'sidebar--size-md';
+        }
     };
-
-    if (responsive) {
-      handleResize();
-      window.addEventListener('resize', handleResize);
-    }
-
-    return () => {
-      if (responsive) {
-        window.removeEventListener('resize', handleResize);
-      }
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'collapsible':
+                return 'sidebar--collapsible';
+            case 'overlay':
+                return 'sidebar--overlay';
+            case 'drawer':
+                return 'sidebar--drawer';
+            default: // default
+                return 'sidebar--default';
+        }
     };
-  }, [responsive, breakpoint]);
-
-  // Handle escape key for overlay
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOverlayOpen && overlayCloseOnEscape) {
-        setIsOverlayOpen(false);
-      }
+    const getThemeClasses = () => {
+        return 'sidebar sidebar--stan-design';
     };
-
-    if (isOverlayOpen) {
-      document.addEventListener('keydown', handleEscape);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
+    const getPositionClasses = () => {
+        if (variant === 'overlay' || variant === 'drawer') {
+            return position === 'right' ? 'sidebar--position-right' : 'sidebar--position-left';
+        }
+        return '';
     };
-  }, [isOverlayOpen, overlayCloseOnEscape]);
-
-  const handleCollapseToggle = useCallback(() => {
-    if (!collapsible) return;
-    
-    const newCollapsed = !currentCollapsed;
-    
-    if (collapsed === undefined) {
-      setInternalCollapsed(newCollapsed);
-    }
-    
-    if (onCollapseChange) {
-      onCollapseChange(newCollapsed);
-    }
-  }, [collapsed, currentCollapsed, collapsible, onCollapseChange]);
-
-  const handleGroupToggle = useCallback((groupId: string) => {
-    const newExpandedGroups = currentExpandedGroups.includes(groupId)
-      ? currentExpandedGroups.filter(id => id !== groupId)
-      : [...currentExpandedGroups, groupId];
-
-    if (expandedGroups === undefined) {
-      setInternalExpandedGroups(newExpandedGroups);
-    }
-
-    if (onGroupToggle) {
-      onGroupToggle(groupId, newExpandedGroups.includes(groupId));
-    }
-  }, [currentExpandedGroups, expandedGroups, onGroupToggle]);
-
-  const handleItemClick = useCallback((item: NavigationItem) => {
-    if (item.disabled) return;
-
-    if (onItemClick) {
-      onItemClick(item);
-    }
-
-    if (item.onClick) {
-      item.onClick();
-    }
-
-    // Close overlay on mobile after item click
-    if (isMobile && overlay && overlayCloseOnClick) {
-      setIsOverlayOpen(false);
-    }
-  }, [onItemClick, isMobile, overlay, overlayCloseOnClick]);
-
-  const handleOverlayClose = useCallback(() => {
-    setIsOverlayOpen(false);
-  }, []);
-
-  const getSizeClasses = () => {
-    if (currentCollapsed) return 'sidebar--collapsed';
-
-    switch (size) {
-      case 'sm':
-        return 'sidebar--size-sm';
-      case 'lg':
-        return 'sidebar--size-lg';
-      case 'xl':
-        return 'sidebar--size-xl';
-      default: // md
-        return 'sidebar--size-md';
-    }
-  };
-
-  const getVariantClasses = () => {
-    switch (variant) {
-      case 'collapsible':
-        return 'sidebar--collapsible';
-      case 'overlay':
-        return 'sidebar--overlay';
-      case 'drawer':
-        return 'sidebar--drawer';
-      default: // default
-        return 'sidebar--default';
-    }
-  };
-
-  const getThemeClasses = () => {
-    return 'sidebar sidebar--stan-design';
-  };
-
-  const getPositionClasses = () => {
-    if (variant === 'overlay' || variant === 'drawer') {
-      return position === 'right' ? 'sidebar--position-right' : 'sidebar--position-left';
-    }
-    return '';
-  };
-
-  const getTransformClasses = () => {
-    if (variant === 'overlay' || variant === 'drawer' || (isMobile && overlay)) {
-      if (position === 'right') {
-        return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-right';
-      }
-      return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-left';
-    }
-    return '';
-  };
-
-  const getItemClasses = (item: NavigationItem) => {
-    let classes = `sidebar__item ${
-      currentCollapsed ? 'sidebar__item--collapsed' : 'sidebar__item--expanded'
-    }`;
-
-    if (item.disabled) {
-      classes += ' sidebar__item--disabled';
-    } else if (item.active) {
-      classes += ' sidebar__item--active';
-    } else {
-      classes += ' sidebar__item--default';
-    }
-
-    return classes;
-  };
-
-  const getGroupClasses = (groupId: string) => {
-    const isExpanded = currentExpandedGroups.includes(groupId);
-    let classes = 'sidebar__group';
-
-    if (isExpanded) {
-      classes += ' sidebar__group--expanded';
-    } else {
-      classes += ' sidebar__group--collapsed';
+    const getTransformClasses = () => {
+        if (variant === 'overlay' || variant === 'drawer' || (isMobile && overlay)) {
+            if (position === 'right') {
+                return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-right';
+            }
+            return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-left';
+        }
+        return '';
+    };
+    const getItemClasses = (item) => {
+        let classes = `sidebar__item ${currentCollapsed ? 'sidebar__item--collapsed' : 'sidebar__item--expanded'}`;
+        if (item.disabled) {
+            classes += ' sidebar__item--disabled';
+        }
+        else if (item.active) {
+            classes += ' sidebar__item--active';
+        }
+        else {
+            classes += ' sidebar__item--default';
+        }
+        return classes;
+    };
+    const getGroupClasses = (groupId) => {
+        const isExpanded = currentExpandedGroups.includes(groupId);
+        let classes = 'sidebar__group';
+        if (isExpanded) {
+            classes += ' sidebar__group--expanded';
+        }
+        else {
+            classes += ' sidebar__group--collapsed';
+        }
+        return classes;
+    };
+    const renderMenuItem = (item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: getItemClasses(item), title: currentCollapsed ? item.label : undefined, children: [showItemIcons && item.icon && (_jsx("span", { className: `sidebar__item-icon ${currentCollapsed ? 'sidebar__item-icon--collapsed' : 'sidebar__item-icon--expanded'}`, children: item.icon })), !currentCollapsed && (_jsxs("div", { className: "sidebar__item-content", children: [_jsx("div", { className: "sidebar__item-label", children: item.label }), showItemDescriptions && item.description && (_jsx("div", { className: "sidebar__item-description", children: item.description }))] })), !currentCollapsed && showItemBadges && item.badge && (_jsx("span", { className: "sidebar__item-badge", children: item.badge }))] }, item.id));
+    const renderMenuGroup = (group) => (_jsxs("div", { children: [_jsx("button", { onClick: () => handleGroupToggle(group.id), className: getGroupClasses(group.id), title: currentCollapsed ? group.title : undefined, children: !currentCollapsed && (_jsxs(_Fragment, { children: [_jsx("div", { className: "sidebar__group-title", children: group.title }), _jsx(ChevronRightIcon, { className: `sidebar__group-arrow ${currentExpandedGroups.includes(group.id) ? 'sidebar__group-arrow--expanded' : ''}` })] })) }), !currentCollapsed && currentExpandedGroups.includes(group.id) && (_jsx("div", { className: "sidebar__group-items", children: group.items.map(renderMenuItem) }))] }, group.id));
+    const sidebarContent = (_jsxs("div", { ref: sidebarRef, className: `${getSizeClasses()} ${getVariantClasses()} ${getThemeClasses()} ${getPositionClasses()} ${getTransformClasses()} ${className}`, "data-testid": testId, style: { zIndex }, children: [header && (_jsx("div", { className: "sidebar__header", children: header })), showToggle && collapsible && (_jsx("div", { className: "sidebar__toggle-container", children: _jsx("button", { onClick: handleCollapseToggle, className: "sidebar__toggle-button", "aria-label": currentCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: toggleIcon || (currentCollapsed ? _jsx(ChevronRightIcon, { className: "sidebar__toggle-icon" }) : _jsx(ChevronLeftIcon, { className: "sidebar__toggle-icon" })) }) })), _jsx("nav", { className: "sidebar__navigation", children: groups && groups.length > 0 ? groups.map(renderMenuGroup) : items.map(renderMenuItem) }), footer && (_jsx("div", { className: "sidebar__footer", children: footer }))] }));
+    // Mobile overlay
+    if (isMobile && overlay) {
+        return (_jsxs(_Fragment, { children: [isOverlayOpen && (_jsx("div", { className: "sidebar__overlay-backdrop", onClick: overlayCloseOnOutsideClick ? handleOverlayClose : undefined })), sidebarContent, _jsx("button", { onClick: () => setIsOverlayOpen(!isOverlayOpen), className: "sidebar__mobile-toggle", "aria-label": "Toggle sidebar", children: _jsx("svg", { className: "sidebar__mobile-toggle-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 12h16M4 18h16" }) }) })] }));
     }
-
-    return classes;
-  };
-
-  const renderMenuItem = (item: NavigationItem) => (
-    <button
-      key={item.id}
-      onClick={() => handleItemClick(item)}
-      disabled={item.disabled}
-      className={getItemClasses(item)}
-      title={currentCollapsed ? item.label : undefined}
-    >
-      {showItemIcons && item.icon && (
-        <span className={`sidebar__item-icon ${currentCollapsed ? 'sidebar__item-icon--collapsed' : 'sidebar__item-icon--expanded'}`}>
-          {item.icon}
-        </span>
-      )}
-
-      {!currentCollapsed && (
-        <div className="sidebar__item-content">
-          <div className="sidebar__item-label">{item.label}</div>
-          {showItemDescriptions && item.description && (
-            <div className="sidebar__item-description">{item.description}</div>
-          )}
-        </div>
-      )}
-
-      {!currentCollapsed && showItemBadges && item.badge && (
-        <span className="sidebar__item-badge">{item.badge}</span>
-      )}
-    </button>
-  );
-
-  const renderMenuGroup = (group: NavigationGroup) => (
-    <div key={group.id}>
-      <button
-        onClick={() => handleGroupToggle(group.id)}
-        className={getGroupClasses(group.id)}
-        title={currentCollapsed ? group.title : undefined}
-      >
-        {/* TODO: Add icon support to NavigationGroup in future version */}
-        {/* {showGroupIcons && group.icon && (
-          <span className={currentCollapsed ? '' : 'mr-3'}>
-            {group.icon}
-          </span>
-        )} */}
-        
-        {!currentCollapsed && (
-          <>
-            <div className="sidebar__group-title">{group.title}</div>
-            <ChevronRightIcon
-              className={`sidebar__group-arrow ${
-                currentExpandedGroups.includes(group.id) ? 'sidebar__group-arrow--expanded' : ''
-              }`}
-            />
-          </>
-        )}
-      </button>
-      
-      {!currentCollapsed && currentExpandedGroups.includes(group.id) && (
-        <div className="sidebar__group-items">
-          {group.items.map(renderMenuItem)}
-        </div>
-      )}
-    </div>
-  );
-
-  const sidebarContent = (
-    <div
-      ref={sidebarRef}
-      className={`${getSizeClasses()} ${getVariantClasses()} ${getThemeClasses()} ${getPositionClasses()} ${getTransformClasses()} ${className}`}
-      data-testid={testId}
-      style={{ zIndex }}
-    >
-      {/* Header */}
-      {header && (
-        <div className="sidebar__header">
-          {header}
-        </div>
-      )}
-
-      {/* Toggle Button */}
-      {showToggle && collapsible && (
-        <div className="sidebar__toggle-container">
-          <button
-            onClick={handleCollapseToggle}
-            className="sidebar__toggle-button"
-            aria-label={currentCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          >
-            {toggleIcon || (currentCollapsed ? <ChevronRightIcon className="sidebar__toggle-icon" /> : <ChevronLeftIcon className="sidebar__toggle-icon" />)}
-          </button>
-        </div>
-      )}
-
-      {/* Navigation Items */}
-      <nav className="sidebar__navigation">
-        {groups && groups.length > 0 ? groups.map(renderMenuGroup) : items.map(renderMenuItem)}
-      </nav>
-
-      {/* Footer */}
-      {footer && (
-        <div className="sidebar__footer">
-          {footer}
-        </div>
-      )}
-    </div>
-  );
-
-  // Mobile overlay
-  if (isMobile && overlay) {
-    return (
-      <>
-        {/* Overlay Backdrop */}
-        {isOverlayOpen && (
-          <div
-            className="sidebar__overlay-backdrop"
-            onClick={overlayCloseOnOutsideClick ? handleOverlayClose : undefined}
-          />
-        )}
-
-        {/* Sidebar */}
-        {sidebarContent}
-
-        {/* Mobile Toggle Button */}
-        <button
-          onClick={() => setIsOverlayOpen(!isOverlayOpen)}
-          className="sidebar__mobile-toggle"
-          aria-label="Toggle sidebar"
-        >
-          <svg className="sidebar__mobile-toggle-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
-          </svg>
-        </button>
-      </>
-    );
-  }
-
-  // Desktop sidebar
-  return (
-    <div className={`sidebar__wrapper ${sticky ? 'sidebar__wrapper--sticky' : ''}`}>
-      {sidebarContent}
-    </div>
-  );
+    // Desktop sidebar
+    return (_jsx("div", { className: `sidebar__wrapper ${sticky ? 'sidebar__wrapper--sticky' : ''}`, children: sidebarContent }));
 };
-
 export default Sidebar;