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

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

@@ -1,374 +1,187 @@
-/**
- * Menu Component
- * Provides comprehensive menu functionality with theme support and multiple variants
- */
-
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
-import { MenuProps, NavigationItem, NavigationGroup } from './types';
-
 // Simple icon components
-const ChevronDownIcon: 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="M19 9l-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 MagnifyingGlassIcon: 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-  </svg>
-);
-
-const FunnelIcon: 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="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: React.FC<MenuProps> = ({
-  items = [],
-  groups,
-  variant = 'dropdown',
-  size = 'md',
-  // TODO: Implement orientation, 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': testId = 'menu',
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterValue, setFilterValue] = useState('');
-  const [internalSelectedItems, setInternalSelectedItems] = useState<string[]>(selectedItems || []);
-  // TODO: Implement group expansion functionality in future version
-  // const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
-  
-  const menuRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-
-  // Use controlled or uncontrolled selected items
-  const currentSelectedItems = selectedItems !== undefined ? selectedItems : internalSelectedItems;
-
-  // Handle click outside to close menu
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node) &&
-          triggerRef.current && !triggerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
+const ChevronDownIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-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" }) }));
+const MagnifyingGlassIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
+const FunnelIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("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" }) }));
+export const Menu = ({ items = [], groups, variant = 'dropdown', size = 'md', 
+// TODO: Implement orientation, 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': testId = 'menu', }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [filterValue, setFilterValue] = useState('');
+    const [internalSelectedItems, setInternalSelectedItems] = useState(selectedItems || []);
+    // TODO: Implement group expansion functionality in future version
+    // const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    // Use controlled or uncontrolled selected items
+    const currentSelectedItems = selectedItems !== undefined ? selectedItems : internalSelectedItems;
+    // Handle click outside to close menu
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target) &&
+                triggerRef.current && !triggerRef.current.contains(event.target)) {
+                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: Implement group toggle functionality in future version
+    // const handleGroupToggle = useCallback((groupId: string) => {
+    //   setExpandedGroups(prev => 
+    //     prev.includes(groupId) 
+    //       ? prev.filter(id => id !== groupId)
+    //       : [...prev, 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':
+                return 'menu__trigger--sm';
+            case 'lg':
+                return 'menu__trigger--lg';
+            default: // md
+                return 'menu__trigger--md';
+        }
     };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'dropdown':
+                return 'menu__content--dropdown';
+            case 'context':
+                return 'menu__content--context';
+            case 'command':
+                return 'menu__content--command';
+            default: // default
+                return 'menu__content--default';
+        }
     };
-  }, [isOpen]);
-
-  // Handle escape key to close menu
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsOpen(false);
-      }
+    const getThemeClasses = () => {
+        return 'menu menu--stan-design';
     };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
+    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;
     };
-  }, [isOpen]);
-
-  const handleToggle = useCallback(() => {
-    if (disabled || loading) return;
-    setIsOpen(!isOpen);
-  }, [disabled, loading, isOpen]);
-
-  const handleItemClick = useCallback((item: NavigationItem) => {
-    if (item.disabled) return;
-
-    if (selectable) {
-      let newSelectedItems: string[];
-      
-      if (multiSelect) {
-        if (currentSelectedItems.includes(item.id)) {
-          newSelectedItems = currentSelectedItems.filter(id => id !== item.id);
-        } else {
-          newSelectedItems = [...currentSelectedItems, item.id];
+    const getPlacementClasses = () => {
+        switch (placement) {
+            case 'top':
+                return 'menu__content--placement-top';
+            case 'bottom':
+                return 'menu__content--placement-bottom';
+            case 'left':
+                return 'menu__content--placement-left';
+            case 'right':
+                return 'menu__content--placement-right';
+            default:
+                return 'menu__content--placement-bottom';
         }
-      } 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: Implement group toggle functionality in future version
-  // const handleGroupToggle = useCallback((groupId: string) => {
-  //   setExpandedGroups(prev => 
-  //     prev.includes(groupId) 
-  //       ? prev.filter(id => id !== groupId)
-  //       : [...prev, groupId]
-  //   );
-  // }, []);
-
-  const handleSearch = useCallback((query: string) => {
-    setSearchQuery(query);
-    if (onSearch) {
-      onSearch(query);
-    }
-  }, [onSearch]);
-
-  const handleFilter = useCallback((filter: string) => {
-    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':
-        return 'menu__trigger--sm';
-      case 'lg':
-        return 'menu__trigger--lg';
-      default: // md
-        return 'menu__trigger--md';
-    }
-  };
-
-  const getVariantClasses = () => {
-    switch (variant) {
-      case 'dropdown':
-        return 'menu__content--dropdown';
-      case 'context':
-        return 'menu__content--context';
-      case 'command':
-        return 'menu__content--command';
-      default: // default
-        return 'menu__content--default';
-    }
-  };
-
-  const getThemeClasses = () => {
-    return 'menu menu--stan-design';
-  };
-
-  const getItemClasses = (item: NavigationItem) => {
-    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':
-        return 'menu__content--placement-top';
-      case 'bottom':
-        return 'menu__content--placement-bottom';
-      case 'left':
-        return 'menu__content--placement-left';
-      case 'right':
-        return 'menu__content--placement-right';
-      default:
-        return 'menu__content--placement-bottom';
-    }
-  };
-
-  const renderMenuItem = (item: NavigationItem) => (
-    <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: NavigationGroup) => (
-    <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: placement === 'bottom' ? offset : undefined }}
-        >
-          {/* 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) : filteredItems.map(renderMenuItem)}
-          </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: string[] = [];
-                    if (selectedItems === undefined) {
-                      setInternalSelectedItems(newSelectedItems);
-                    }
-                    if (onSelectionChange) {
-                      onSelectionChange(newSelectedItems);
-                    }
-                  }}
-                  className="menu__selection-clear"
-                >
-                  Clear
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
+    };
+    const renderMenuItem = (item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: getItemClasses(item), children: [_jsxs("div", { className: "menu__item-content", children: [item.icon && _jsx("span", { className: "menu__item-icon", children: item.icon }), _jsxs("div", { className: "menu__item-text", children: [_jsx("div", { className: "menu__item-label", children: item.label }), item.description && (_jsx("div", { className: "menu__item-description", children: item.description }))] })] }), item.badge && _jsx("span", { className: "menu__item-badge", children: item.badge }), item.children && item.children.length > 0 && (_jsx(ChevronRightIcon, { className: "menu__item-arrow" }))] }, item.id));
+    const renderMenuGroup = (group) => (_jsxs("div", { className: "menu__group", children: [group.title && (_jsx("div", { className: "menu__group-title", children: group.title })), group.items.map(renderMenuItem)] }, group.id));
+    return (_jsxs("div", { className: `menu__container ${getThemeClasses()}`, "data-testid": testId, children: [_jsxs("button", { ref: triggerRef, onClick: handleToggle, disabled: disabled || loading, className: `menu__trigger ${getSizeClasses()} ${className}`, "aria-expanded": isOpen, "aria-haspopup": "true", children: ["Menu", _jsx(ChevronDownIcon, { className: "menu__trigger-icon" })] }), isOpen && (_jsxs("div", { ref: menuRef, role: "menu", className: `menu__content ${getVariantClasses()} ${getPlacementClasses()}`, style: { marginTop: placement === 'bottom' ? offset : undefined }, children: [searchable && (_jsx("div", { className: "menu__search", children: _jsxs("div", { className: "menu__search-container", children: [_jsx(MagnifyingGlassIcon, { className: "menu__search-icon" }), _jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (e) => handleSearch(e.target.value), className: "menu__search-input" })] }) })), filterable && (_jsx("div", { className: "menu__filter", children: _jsxs("div", { className: "menu__filter-container", children: [_jsx(FunnelIcon, { className: "menu__filter-icon" }), _jsxs("select", { value: filterValue, onChange: (e) => handleFilter(e.target.value), className: "menu__filter-select", children: [_jsx("option", { value: "", children: "All" }), _jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "recent", children: "Recent" })] })] }) })), _jsx("div", { className: "menu__items", children: groups ? groups.map(renderMenuGroup) : filteredItems.map(renderMenuItem) }), selectable && multiSelect && currentSelectedItems.length > 0 && (_jsx("div", { className: "menu__selection-actions", children: _jsxs("div", { className: "menu__selection-info", children: [_jsxs("span", { className: "menu__selection-count", children: [currentSelectedItems.length, " selected"] }), _jsx("button", { onClick: () => {
+                                        const newSelectedItems = [];
+                                        if (selectedItems === undefined) {
+                                            setInternalSelectedItems(newSelectedItems);
+                                        }
+                                        if (onSelectionChange) {
+                                            onSelectionChange(newSelectedItems);
+                                        }
+                                    }, className: "menu__selection-clear", children: "Clear" })] }) }))] }))] }));
 };
-
 export default Menu;