@moontra/moonui-pro 2.5.6 → 2.5.8

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, 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 { 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';
@@ -56430,6 +56430,10 @@ function Sidebar({
       }
     }
   }, [onNavigate, isMobile]);
+  const handleSearchChange = useCallback((value) => {
+    setSearchQuery(value);
+    onSearchChange?.(value);
+  }, [onSearchChange]);
   const filterItems = useCallback((items, query) => {
     if (!query)
       return items;
@@ -56444,10 +56448,13 @@ function Sidebar({
   const filteredSections = useMemo(() => {
     return sections.map((section) => ({
       ...section,
-      filteredItems: filterItems(section.items, searchQuery)
+      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) => {
+  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;
@@ -56507,7 +56514,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 },
@@ -56515,14 +56522,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);
-  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection, searchQuery, filterItems]);
-  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"
@@ -56558,18 +56565,20 @@ function Sidebar({
     showSearch && (!collapsed || isMobile) && /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
       /* @__PURE__ */ jsx(
-        MoonUIInputPro,
+        "input",
         {
           ref: searchInputRef,
           type: "search",
           placeholder: searchPlaceholder,
           value: searchQuery,
-          onChange: (e) => {
-            setSearchQuery(e.target.value);
-            onSearchChange?.(e.target.value);
-          },
-          className: "pl-9 pr-9"
-        }
+          onChange: (e) => handleSearchChange(e.target.value),
+          autoComplete: "off",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          spellCheck: "false",
+          className: "w-full h-10 pl-9 pr-9 text-sm bg-background border border-input rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        },
+        "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" }),
@@ -56584,7 +56593,7 @@ function Sidebar({
     ] }),
     /* @__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)) }),
+      /* @__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: [
@@ -56614,7 +56623,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.6",
+  "version": "2.5.8",
   "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

@@ -28,7 +28,6 @@ import {
   Sparkles,
   Command
 } from 'lucide-react'
-import { Input } from '../ui/input'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,6 +47,7 @@ export interface SidebarItem {
   items?: SidebarItem[]
   action?: () => void
   tooltip?: string
+  filteredChildren?: SidebarItem[]
 }
 
 export interface SidebarSection {
@@ -257,6 +257,11 @@ export function Sidebar({
     }
   }, [onNavigate, isMobile])
 
+  const handleSearchChange = useCallback((value: string) => {
+    setSearchQuery(value)
+    onSearchChange?.(value)
+  }, [onSearchChange])
+
   const filterItems = useCallback((items: SidebarItem[], query: string): SidebarItem[] => {
     if (!query) return items
     
@@ -273,11 +278,14 @@ export function Sidebar({
   const filteredSections = useMemo(() => {
     return sections.map(section => ({
       ...section,
-      filteredItems: filterItems(section.items, searchQuery)
+      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) => {
+  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
@@ -361,7 +369,7 @@ export function Sidebar({
           itemContent
         )}
         
-        {hasChildren && !collapsed && (
+        {hasChildren && !collapsed && filteredChildren && (
           <AnimatePresence>
             {isExpanded && (
               <motion.div
@@ -372,7 +380,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>
@@ -382,9 +390,9 @@ export function Sidebar({
         )}
       </div>
     )
-  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection, searchQuery, filterItems])
+  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection])
 
-  const SidebarContent = () => (
+  const SidebarContent = React.memo(() => (
     <>
       {/* Header */}
       <div className={cn(
@@ -431,16 +439,18 @@ export function Sidebar({
         <div className="p-4 border-b">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-            <Input
+            <input
+              key="sidebar-search-input"
               ref={searchInputRef}
               type="search"
               placeholder={searchPlaceholder}
               value={searchQuery}
-              onChange={(e) => {
-                setSearchQuery(e.target.value)
-                onSearchChange?.(e.target.value)
-              }}
-              className="pl-9 pr-9"
+              onChange={(e) => handleSearchChange(e.target.value)}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              className="w-full h-10 pl-9 pr-9 text-sm bg-background border border-input rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
             />
             {keyboardShortcuts && (
               <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">
@@ -474,7 +484,7 @@ export function Sidebar({
                 </h4>
               )}
               <div className="space-y-1">
-                {section.filteredItems.map(item => renderItem(item))}
+                {section.filteredItems.map(item => renderItem(item, 0, item.filteredChildren))}
               </div>
               {section.showDivider && index < filteredSections.length - 1 && (
                 <Separator className="mt-4" />
@@ -522,7 +532,7 @@ export function Sidebar({
         </div>
       )}
     </>
-  )
+  ))
 
   const sidebarClasses = cn(
     "flex h-full flex-col bg-background border-r",