@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

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

@@ -0,0 +1,360 @@
+/**
+ * Menu Component
+ * Provides comprehensive menu functionality with theme support and multiple variants
+ */
+
+import * as React from 'react';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { MenuProps, NavigationItem, NavigationGroup } from './types';
+
+// Simple icon components
+const ChevronDownIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+  </svg>
+);
+
+const ChevronRightIcon}> = ({ 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 MagnifyingGlassIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+  </svg>
+);
+
+const FunnelIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
+  </svg>
+);
+
+export const Menu= ({
+  items = [],
+  groups,
+  variant = 'dropdown',
+  size = 'md',
+  // TODO, trigger, showArrow, and fullWidth in future version
+  // orientation = 'horizontal',
+  // trigger = 'click',
+  placement = 'bottom',
+  offset = 8,
+  // showArrow = false,
+  // fullWidth = false,
+  disabled = false,
+  loading = false,
+  searchable = false,
+  onSearch,
+  filterable = false,
+  onFilter,
+  selectable = false,
+  multiSelect = false,
+  selectedItems = [],
+  onSelectionChange,
+  className = '',
+  'data-testid'= 'menu',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterValue, setFilterValue] = useState('');
+  const [internalSelectedItems, setInternalSelectedItems] = useState<string[]>(selectedItems || []);
+  // TODO, setExpandedGroups] = useState<string[]>([]);
+  
+  const menuRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  // Use controlled or uncontrolled selected items
+  const currentSelectedItems = selectedItems !== undefined ? selectedItems ;
+
+  // Handle click outside to close menu
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node) &&
+          triggerRef.current && !triggerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Handle escape key to close menu
+  useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const handleToggle = useCallback(() => {
+    if (disabled || loading) return;
+    setIsOpen(!isOpen);
+  }, [disabled, loading, isOpen]);
+
+  const handleItemClick = useCallback((item) => {
+    if (item.disabled) return;
+
+    if (selectable) {
+      let newSelectedItems];
+      
+      if (multiSelect) {
+        if (currentSelectedItems.includes(item.id)) {
+          newSelectedItems = currentSelectedItems.filter(id => id !== item.id);
+        } else {
+          newSelectedItems = [...currentSelectedItems, item.id];
+        }
+      } else {
+        newSelectedItems = [item.id];
+      }
+
+      if (selectedItems === undefined) {
+        setInternalSelectedItems(newSelectedItems);
+      }
+
+      if (onSelectionChange) {
+        onSelectionChange(newSelectedItems);
+      }
+    }
+
+    if (item.onClick) {
+      item.onClick();
+    }
+
+    // Close menu for single select or non-selectable menus
+    if (!multiSelect || !selectable) {
+      setIsOpen(false);
+    }
+  }, [selectable, multiSelect, currentSelectedItems, selectedItems, onSelectionChange]);
+
+  // TODO= useCallback((groupId) => {
+  //   setExpandedGroups(prev => 
+  //     prev.includes(groupId) 
+  //       ? prev.filter(id => id !== groupId)
+  //       , groupId]
+  //   );
+  // }, []);
+
+  const handleSearch = useCallback((query) => {
+    setSearchQuery(query);
+    if (onSearch) {
+      onSearch(query);
+    }
+  }, [onSearch]);
+
+  const handleFilter = useCallback((filter) => {
+    setFilterValue(filter);
+    if (onFilter) {
+      onFilter(filter);
+    }
+  }, [onFilter]);
+
+  // Filter items based on search and filter
+  const filteredItems = useMemo(() => {
+    let filtered = items;
+
+    if (searchQuery) {
+      filtered = filtered.filter(item => 
+        item.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        item.description?.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+
+    if (filterValue) {
+      filtered = filtered.filter(item => 
+        item.label.toLowerCase().includes(filterValue.toLowerCase())
+      );
+    }
+
+    return filtered;
+  }, [items, searchQuery, filterValue]);
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm';
+      case 'lg';
+      default;
+    }
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'dropdown';
+      case 'context';
+      case 'command';
+      default;
+    }
+  };
+
+  const getThemeClasses = () => {
+    return 'menu menu--stan-design';
+  };
+
+  const getItemClasses = (item) => {
+    let classes = `menu__item ${getSizeClasses()}`;
+
+    if (item.disabled) {
+      classes += ' menu__item--disabled';
+    } else if (selectable && currentSelectedItems.includes(item.id)) {
+      classes += ' menu__item--selected';
+    } else {
+      classes += ' menu__item--default';
+    }
+
+    return classes;
+  };
+
+  const getPlacementClasses = () => {
+    switch (placement) {
+      case 'top';
+      case 'bottom';
+      case 'left';
+      case 'right';
+      default;
+    }
+  };
+
+  const renderMenuItem = (item) => (
+    <button
+      key={item.id}
+      onClick={() => handleItemClick(item)}
+      disabled={item.disabled}
+      className={getItemClasses(item)}
+    >
+      <div className="menu__item-content">
+        {item.icon && <span className="menu__item-icon">{item.icon}</span>}
+        <div className="menu__item-text">
+          <div className="menu__item-label">{item.label}</div>
+          {item.description && (
+            <div className="menu__item-description">{item.description}</div>
+          )}
+        </div>
+      </div>
+      {item.badge && <span className="menu__item-badge">{item.badge}</span>}
+      {item.children && item.children.length > 0 && (
+        <ChevronRightIcon className="menu__item-arrow" />
+      )}
+    </button>
+  );
+
+  const renderMenuGroup = (group) => (
+    <div key={group.id} className="menu__group">
+      {group.title && (
+        <div className="menu__group-title">
+          {group.title}
+        </div>
+      )}
+      {group.items.map(renderMenuItem)}
+    </div>
+  );
+
+  return (
+    <div className={`menu__container ${getThemeClasses()}`} data-testid={testId}>
+      {/* Trigger Button */}
+      <button
+        ref={triggerRef}
+        onClick={handleToggle}
+        disabled={disabled || loading}
+        className={`menu__trigger ${getSizeClasses()} ${className}`}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        Menu
+        <ChevronDownIcon className="menu__trigger-icon" />
+      </button>
+
+      {/* Menu Dropdown */}
+      {isOpen && (
+        <div
+          ref={menuRef}
+          role="menu"
+          className={`menu__content ${getVariantClasses()} ${getPlacementClasses()}`}
+          style={{ marginTop=== 'bottom' ? offset }}
+        >
+          {/* Search Bar */}
+          {searchable && (
+            <div className="menu__search">
+              <div className="menu__search-container">
+                <MagnifyingGlassIcon className="menu__search-icon" />
+                <input
+                  type="text"
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => handleSearch(e.target.value)}
+                  className="menu__search-input"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Filter Bar */}
+          {filterable && (
+            <div className="menu__filter">
+              <div className="menu__filter-container">
+                <FunnelIcon className="menu__filter-icon" />
+                <select
+                  value={filterValue}
+                  onChange={(e) => handleFilter(e.target.value)}
+                  className="menu__filter-select"
+                >
+                  <option value="">All</option>
+                  <option value="featured">Featured</option>
+                  <option value="recent">Recent</option>
+                </select>
+              </div>
+            </div>
+          )}
+
+          {/* Menu Items */}
+          <div className="menu__items">
+            {groups ? groups.map(renderMenuGroup) )}
+          </div>
+
+          {/* Selection Actions */}
+          {selectable && multiSelect && currentSelectedItems.length > 0 && (
+            <div className="menu__selection-actions">
+              <div className="menu__selection-info">
+                <span className="menu__selection-count">
+                  {currentSelectedItems.length} selected
+                </span>
+                <button
+                  onClick={() => {
+                    const newSelectedItems] = [];
+                    if (selectedItems === undefined) {
+                      setInternalSelectedItems(newSelectedItems);
+                    }
+                    if (onSelectionChange) {
+                      onSelectionChange(newSelectedItems);
+                    }
+                  }}
+                  className="menu__selection-clear"
+                >
+                  Clear
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Menu;