@moontra/moonui-pro 2.5.4 → 2.5.6

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, 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, 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,14 @@ function Sidebar({
       );
       return matchesTitle || hasMatchingChildren;
     });
-  };
-  const renderItem = (item, depth = 0) => {
+  }, []);
+  const filteredSections = useMemo(() => {
+    return sections.map((section) => ({
+      ...section,
+      filteredItems: filterItems(section.items, searchQuery)
+    })).filter((section) => section.filteredItems.length > 0);
+  }, [sections, searchQuery, filterItems]);
+  const renderItem = useCallback((item, depth = 0) => {
     const isActive2 = item.href === activePath;
     const isPinned = pinnedItems.includes(item.id);
     const hasChildren = item.items && item.items.length > 0;
@@ -56510,7 +56521,7 @@ function Sidebar({
         }
       ) })
     ] }, item.id);
-  };
+  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection, searchQuery, filterItems]);
   const SidebarContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: cn(
       "flex items-center gap-3 p-4 border-b",
@@ -56571,16 +56582,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)) }),
+      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: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "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'
@@ -230,23 +230,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 +255,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 +267,17 @@ export function Sidebar({
       )
       return matchesTitle || hasMatchingChildren
     })
-  }
+  }, [])
+
+  // Filtered sections memoized to prevent re-renders
+  const filteredSections = useMemo(() => {
+    return sections.map(section => ({
+      ...section,
+      filteredItems: filterItems(section.items, searchQuery)
+    })).filter(section => section.filteredItems.length > 0)
+  }, [sections, searchQuery, filterItems])
 
-  const renderItem = (item: SidebarItem, depth = 0) => {
+  const renderItem = useCallback((item: SidebarItem, depth = 0) => {
     const isActive = item.href === activePath
     const isPinned = pinnedItems.includes(item.id)
     const hasChildren = item.items && item.items.length > 0
@@ -374,7 +382,7 @@ export function Sidebar({
         )}
       </div>
     )
-  }
+  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection, searchQuery, filterItems])
 
   const SidebarContent = () => (
     <>
@@ -458,26 +466,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))}
               </div>
-            )
-          })}
+              {section.showDivider && index < filteredSections.length - 1 && (
+                <Separator className="mt-4" />
+              )}
+            </div>
+          ))}
         </div>
       </ScrollArea>