@moontra/moonui-pro 2.5.5 → 2.5.7

package/dist/index.d.ts

@@ -1821,6 +1821,7 @@ interface SidebarItem {
     items?: SidebarItem[];
     action?: () => void;
     tooltip?: string;
+    filteredChildren?: SidebarItem[];
 }
 interface SidebarSection {
     id: string;

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useRef, useCallback, forwardRef, createContext, useContext, useMemo, useEffect, useDebugValue, Component, useLayoutEffect } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, ChevronLeft, Calendar as Calendar$1, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, Download, FileSpreadsheet, FileJson, Maximize2, Move, Menu, Bell, Edit3, LayoutGrid, Upload, Share2, Save, CheckCircle2, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, ExternalLink, CalendarIcon, DollarSign, Users, Github, Star, GitFork, Activity, Server, EyeOff, RotateCw, Zap, Monitor, Timer, Cpu, MemoryStick, HardDrive, Network, CheckCircle, BarChart3, Video, Music, Archive, File, Columns, Sun, Moon, XCircle, Grip, Unlock, Minimize2, Map as Map$1, Target, Pin, MoreVertical, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
+import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, ChevronLeft, Calendar as Calendar$1, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, Download, FileSpreadsheet, FileJson, Maximize2, Move, Menu, Bell, Edit3, LayoutGrid, Upload, Share2, Save, CheckCircle2, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, Pin, Sun, Moon, Monitor, ExternalLink, CalendarIcon, DollarSign, Users, Github, Star, GitFork, Activity, Server, EyeOff, RotateCw, Zap, Timer, Cpu, MemoryStick, HardDrive, Network, CheckCircle, BarChart3, Video, Music, Archive, File, Columns, XCircle, Grip, Unlock, Minimize2, Map as Map$1, Target, MoreVertical, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -56410,12 +56410,17 @@ function Sidebar({
     document.addEventListener("mousemove", handleMouseMove2);
     return () => document.removeEventListener("mousemove", handleMouseMove2);
   }, [animatedBackground, mouseX, mouseY]);
-  const toggleSection = (sectionId) => {
+  const toggleSection = useCallback((sectionId) => {
     setExpandedSections(
       (prev) => prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId]
     );
-  };
-  const handleItemClick = (item) => {
+  }, []);
+  useCallback((itemId) => {
+    setPinnedItems(
+      (prev) => prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]
+    );
+  }, []);
+  const handleItemClick = useCallback((item) => {
     if (item.action) {
       item.action();
     } else if (item.href && onNavigate) {
@@ -56424,8 +56429,8 @@ function Sidebar({
         setIsOpen(false);
       }
     }
-  };
-  const filterItems = (items, query) => {
+  }, [onNavigate, isMobile]);
+  const filterItems = useCallback((items, query) => {
     if (!query)
       return items;
     return items.filter((item) => {
@@ -56435,8 +56440,17 @@ function Sidebar({
       );
       return matchesTitle || hasMatchingChildren;
     });
-  };
-  const renderItem = (item, depth = 0) => {
+  }, []);
+  const filteredSections = useMemo(() => {
+    return sections.map((section) => ({
+      ...section,
+      filteredItems: filterItems(section.items, searchQuery).map((item) => ({
+        ...item,
+        filteredChildren: item.items ? filterItems(item.items, searchQuery) : void 0
+      }))
+    })).filter((section) => section.filteredItems.length > 0);
+  }, [sections, searchQuery, filterItems]);
+  const renderItem = useCallback((item, depth = 0, filteredChildren) => {
     const isActive2 = item.href === activePath;
     const isPinned = pinnedItems.includes(item.id);
     const hasChildren = item.items && item.items.length > 0;
@@ -56496,7 +56510,7 @@ function Sidebar({
         /* @__PURE__ */ jsx(ItemWrapper, { children: itemContent }),
         /* @__PURE__ */ jsx(MoonUITooltipContentPro, { side: "right", children: /* @__PURE__ */ jsx("p", { children: item.tooltip }) })
       ] }) }) : itemContent,
-      hasChildren && !collapsed && /* @__PURE__ */ jsx(AnimatePresence, { children: isExpanded && /* @__PURE__ */ jsx(
+      hasChildren && !collapsed && filteredChildren && /* @__PURE__ */ jsx(AnimatePresence, { children: isExpanded && /* @__PURE__ */ jsx(
         motion.div,
         {
           initial: { height: 0, opacity: 0 },
@@ -56504,14 +56518,14 @@ function Sidebar({
           exit: { height: 0, opacity: 0 },
           transition: { duration: 0.2 },
           className: "overflow-hidden",
-          children: /* @__PURE__ */ jsx("div", { className: "pt-1 space-y-1", children: filterItems(item.items, searchQuery).map(
+          children: /* @__PURE__ */ jsx("div", { className: "pt-1 space-y-1", children: filteredChildren.map(
             (child) => renderItem(child, depth + 1)
           ) })
         }
       ) })
     ] }, item.id);
-  };
-  const SidebarContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection]);
+  const SidebarContent = t__default.memo(() => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: cn(
       "flex items-center gap-3 p-4 border-b",
       collapsed && !isMobile && "justify-center px-2"
@@ -56557,8 +56571,13 @@ function Sidebar({
             setSearchQuery(e.target.value);
             onSearchChange?.(e.target.value);
           },
+          autoComplete: "off",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          spellCheck: "false",
           className: "pl-9 pr-9"
-        }
+        },
+        "sidebar-search-input"
       ),
       keyboardShortcuts && /* @__PURE__ */ jsxs("kbd", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex", children: [
         /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
@@ -56571,16 +56590,11 @@ function Sidebar({
         (section) => section.items.filter((item) => pinnedItems.includes(item.id))
       ).map((item) => renderItem(item)) })
     ] }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-6", children: sections.map((section, index) => {
-      const filteredItems = filterItems(section.items, searchQuery);
-      if (filteredItems.length === 0)
-        return null;
-      return /* @__PURE__ */ jsxs("div", { children: [
-        section.title && (!collapsed || isMobile) && /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: section.title }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: filteredItems.map((item) => renderItem(item)) }),
-        section.showDivider && index < sections.length - 1 && /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mt-4" })
-      ] }, section.id);
-    }) }) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-6", children: filteredSections.map((section, index) => /* @__PURE__ */ jsxs("div", { children: [
+      section.title && (!collapsed || isMobile) && /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: section.title }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: section.filteredItems.map((item) => renderItem(item, 0, item.filteredChildren)) }),
+      section.showDivider && index < filteredSections.length - 1 && /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mt-4" })
+    ] }, section.id)) }) }),
     footer && /* @__PURE__ */ jsxs("div", { className: "border-t p-4", children: [
       /* @__PURE__ */ jsx("div", { className: "space-y-1", children: footer.items.map((item) => renderItem(item)) }),
       showThemeToggle && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
@@ -56608,7 +56622,7 @@ function Sidebar({
         ] })
       ] })
     ] })
-  ] });
+  ] }));
   const sidebarClasses = cn(
     "flex h-full flex-col bg-background border-r",
     glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.5",
+  "version": "2.5.7",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/sidebar/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState, useEffect, useCallback, useRef } from 'react'
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 import { motion, AnimatePresence, useMotionValue, useSpring } from 'framer-motion'
 import { cn } from '../../lib/utils'
 import { Button } from '../ui/button'
@@ -48,6 +48,7 @@ export interface SidebarItem {
   items?: SidebarItem[]
   action?: () => void
   tooltip?: string
+  filteredChildren?: SidebarItem[]
 }
 
 export interface SidebarSection {
@@ -230,23 +231,23 @@ export function Sidebar({
     return () => document.removeEventListener('mousemove', handleMouseMove)
   }, [animatedBackground, mouseX, mouseY])
 
-  const toggleSection = (sectionId: string) => {
+  const toggleSection = useCallback((sectionId: string) => {
     setExpandedSections(prev =>
       prev.includes(sectionId)
         ? prev.filter(id => id !== sectionId)
         : [...prev, sectionId]
     )
-  }
+  }, [])
 
-  const togglePinItem = (itemId: string) => {
+  const togglePinItem = useCallback((itemId: string) => {
     setPinnedItems(prev =>
       prev.includes(itemId)
         ? prev.filter(id => id !== itemId)
         : [...prev, itemId]
     )
-  }
+  }, [])
 
-  const handleItemClick = (item: SidebarItem) => {
+  const handleItemClick = useCallback((item: SidebarItem) => {
     if (item.action) {
       item.action()
     } else if (item.href && onNavigate) {
@@ -255,9 +256,9 @@ export function Sidebar({
         setIsOpen(false)
       }
     }
-  }
+  }, [onNavigate, isMobile])
 
-  const filterItems = (items: SidebarItem[], query: string): SidebarItem[] => {
+  const filterItems = useCallback((items: SidebarItem[], query: string): SidebarItem[] => {
     if (!query) return items
     
     return items.filter(item => {
@@ -267,9 +268,20 @@ export function Sidebar({
       )
       return matchesTitle || hasMatchingChildren
     })
-  }
+  }, [])
 
-  const renderItem = (item: SidebarItem, depth = 0) => {
+  // Filtered sections memoized to prevent re-renders
+  const filteredSections = useMemo(() => {
+    return sections.map(section => ({
+      ...section,
+      filteredItems: filterItems(section.items, searchQuery).map(item => ({
+        ...item,
+        filteredChildren: item.items ? filterItems(item.items, searchQuery) : undefined
+      }))
+    })).filter(section => section.filteredItems.length > 0)
+  }, [sections, searchQuery, filterItems])
+
+  const renderItem = useCallback((item: SidebarItem, depth = 0, filteredChildren?: SidebarItem[]) => {
     const isActive = item.href === activePath
     const isPinned = pinnedItems.includes(item.id)
     const hasChildren = item.items && item.items.length > 0
@@ -353,7 +365,7 @@ export function Sidebar({
           itemContent
         )}
         
-        {hasChildren && !collapsed && (
+        {hasChildren && !collapsed && filteredChildren && (
           <AnimatePresence>
             {isExpanded && (
               <motion.div
@@ -364,7 +376,7 @@ export function Sidebar({
                 className="overflow-hidden"
               >
                 <div className="pt-1 space-y-1">
-                  {filterItems(item.items!, searchQuery).map(child =>
+                  {filteredChildren.map(child =>
                     renderItem(child, depth + 1)
                   )}
                 </div>
@@ -374,9 +386,9 @@ export function Sidebar({
         )}
       </div>
     )
-  }
+  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection])
 
-  const SidebarContent = () => (
+  const SidebarContent = React.memo(() => (
     <>
       {/* Header */}
       <div className={cn(
@@ -424,6 +436,7 @@ export function Sidebar({
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <Input
+              key="sidebar-search-input"
               ref={searchInputRef}
               type="search"
               placeholder={searchPlaceholder}
@@ -432,6 +445,10 @@ export function Sidebar({
                 setSearchQuery(e.target.value)
                 onSearchChange?.(e.target.value)
               }}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
               className="pl-9 pr-9"
             />
             {keyboardShortcuts && (
@@ -458,26 +475,21 @@ export function Sidebar({
       {/* Main Content */}
       <ScrollArea className="flex-1 overflow-y-auto">
         <div className="p-4 space-y-6">
-          {sections.map((section, index) => {
-            const filteredItems = filterItems(section.items, searchQuery)
-            if (filteredItems.length === 0) return null
-
-            return (
-              <div key={section.id}>
-                {section.title && (!collapsed || isMobile) && (
-                  <h4 className="text-xs font-medium text-muted-foreground mb-2">
-                    {section.title}
-                  </h4>
-                )}
-                <div className="space-y-1">
-                  {filteredItems.map(item => renderItem(item))}
-                </div>
-                {section.showDivider && index < sections.length - 1 && (
-                  <Separator className="mt-4" />
-                )}
+          {filteredSections.map((section, index) => (
+            <div key={section.id}>
+              {section.title && (!collapsed || isMobile) && (
+                <h4 className="text-xs font-medium text-muted-foreground mb-2">
+                  {section.title}
+                </h4>
+              )}
+              <div className="space-y-1">
+                {section.filteredItems.map(item => renderItem(item, 0, item.filteredChildren))}
               </div>
-            )
-          })}
+              {section.showDivider && index < filteredSections.length - 1 && (
+                <Separator className="mt-4" />
+              )}
+            </div>
+          ))}
         </div>
       </ScrollArea>
 
@@ -519,7 +531,7 @@ export function Sidebar({
         </div>
       )}
     </>
-  )
+  ))
 
   const sidebarClasses = cn(
     "flex h-full flex-col bg-background border-r",