@moontra/moonui-pro 2.5.10 → 2.5.12

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 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 t__default, { useState, useRef, useCallback, forwardRef, createContext, useEffect, useContext, useMemo, 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, 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';
@@ -56306,37 +56306,58 @@ var TableRow2 = t__default.memo(({
   return prevRowId === nextRowId && prevProps.isExpanded === nextProps.isExpanded && prevProps.row.getIsSelected() === nextProps.row.getIsSelected() && prevVisibilityKeys === nextVisibilityKeys && prevVisibilityValues === nextVisibilityValues;
 });
 TableRow2.displayName = "TableRow";
-var SearchInput = ({
+var SearchInput = t__default.memo(({
   searchInputRef,
   searchPlaceholder,
-  value,
-  onChange,
+  initialValue,
+  onSearchChange,
   keyboardShortcuts
 }) => {
+  const [localValue, setLocalValue] = useState(initialValue || "");
+  const timeoutRef = useRef();
+  useEffect(() => {
+    setLocalValue(initialValue);
+  }, [initialValue]);
+  const handleChange = useCallback((e) => {
+    const newValue = e.target.value;
+    setLocalValue(newValue);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      onSearchChange(newValue);
+    }, 300);
+  }, [onSearchChange]);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
   return /* @__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(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
     /* @__PURE__ */ jsx(
       "input",
       {
         ref: searchInputRef,
-        type: "search",
+        type: "text",
         placeholder: searchPlaceholder,
-        value,
-        onChange: (e) => onChange(e.target.value),
+        value: localValue,
+        onChange: handleChange,
         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" }),
       "K"
     ] })
   ] }) });
-};
+});
 function Sidebar({
   sections,
   footer,
@@ -56572,7 +56593,6 @@ function Sidebar({
       ) })
     ] }, item.id);
   }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection]);
-  const MemoizedSearchInput = t__default.memo(SearchInput);
   const SidebarHeader = t__default.memo(() => {
     return /* @__PURE__ */ jsxs("div", { className: cn(
       "flex items-center gap-3 p-4 border-b",
@@ -56607,20 +56627,6 @@ function Sidebar({
       )
     ] });
   });
-  const SidebarSearch = t__default.memo(() => {
-    if (!showSearch || collapsed && !isMobile)
-      return null;
-    return /* @__PURE__ */ jsx(
-      MemoizedSearchInput,
-      {
-        searchInputRef,
-        searchPlaceholder,
-        value: searchQuery,
-        onChange: handleSearch,
-        keyboardShortcuts
-      }
-    );
-  });
   const SidebarMenuContent = t__default.memo(() => {
     return /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-6", children: [
       pinnedItems.length > 0 && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { children: [
@@ -56669,7 +56675,16 @@ function Sidebar({
   const SidebarContent = t__default.memo(() => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SidebarHeader, {}),
-      /* @__PURE__ */ jsx(SidebarSearch, {}),
+      showSearch && (!collapsed || isMobile) && /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          searchInputRef,
+          searchPlaceholder,
+          initialValue: searchQuery,
+          onSearchChange: handleSearch,
+          keyboardShortcuts
+        }
+      ),
       /* @__PURE__ */ jsx(SidebarMenuContent, {}),
       /* @__PURE__ */ jsx(SidebarFooter, {})
     ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.10",
+  "version": "2.5.12",
   "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

@@ -36,31 +36,64 @@ import {
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu'
 
-// Search Input Component - Pure functional to prevent recreation
-const SearchInput = ({ 
-  searchInputRef, 
+// Search Input Component - with local state to prevent focus loss
+const SearchInput = React.memo(({ 
+  searchInputRef,
   searchPlaceholder,
-  value,
-  onChange,
-  keyboardShortcuts 
+  initialValue,
+  onSearchChange,
+  keyboardShortcuts
 }: {
   searchInputRef: React.RefObject<HTMLInputElement | null>
   searchPlaceholder: string
-  value: string
-  onChange: (value: string) => void
+  initialValue: string
+  onSearchChange: (value: string) => void
   keyboardShortcuts: boolean
 }) => {
+  // Local state to prevent focus loss
+  const [localValue, setLocalValue] = useState<string>(initialValue || '')
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>()
+  
+  // Update local value when initial value changes from parent
+  useEffect(() => {
+    setLocalValue(initialValue)
+  }, [initialValue])
+  
+  // Handle input changes locally and debounce to parent
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value
+    setLocalValue(newValue)
+    
+    // Clear previous timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+    
+    // Debounce the parent update
+    timeoutRef.current = setTimeout(() => {
+      onSearchChange(newValue)
+    }, 300)
+  }, [onSearchChange])
+  
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+  
   return (
     <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" />
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
         <input
-          key="sidebar-search-input"
           ref={searchInputRef}
-          type="search"
+          type="text"
           placeholder={searchPlaceholder}
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
+          value={localValue}
+          onChange={handleChange}
           autoComplete="off"
           autoCorrect="off"  
           autoCapitalize="off"
@@ -75,7 +108,7 @@ const SearchInput = ({
       </div>
     </div>
   )
-}
+})
 
 export interface SidebarItem {
   id: string
@@ -178,7 +211,7 @@ export function Sidebar({
   const [expandedSections, setExpandedSections] = useState<string[]>([])
   const [currentSearchQuery, setCurrentSearchQuery] = useState(searchQuery)
   const [pinnedItems, setPinnedItems] = useState<string[]>([])
-  const searchInputRef = useRef<HTMLInputElement>(null)
+  const searchInputRef = useRef<HTMLInputElement | null>(null)
   const mouseX = useMotionValue(0)
   const mouseY = useMotionValue(0)
   const springX = useSpring(mouseX, { stiffness: 300, damping: 30 })
@@ -451,8 +484,6 @@ export function Sidebar({
   }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection])
 
 
-  // Memoize SearchInput to prevent recreation
-  const MemoizedSearchInput = React.memo(SearchInput)
   
   // Header Component
   const SidebarHeader = React.memo(() => {
@@ -498,20 +529,6 @@ export function Sidebar({
     )
   })
 
-  // Search Component - Use memoized version
-  const SidebarSearch = React.memo(() => {
-    if (!showSearch || (collapsed && !isMobile)) return null
-    
-    return (
-      <MemoizedSearchInput
-        searchInputRef={searchInputRef}
-        searchPlaceholder={searchPlaceholder}
-        value={searchQuery}
-        onChange={handleSearch}
-        keyboardShortcuts={keyboardShortcuts}
-      />
-    )
-  })
 
   // Menu Content
   const SidebarMenuContent = React.memo(() => {
@@ -596,7 +613,15 @@ export function Sidebar({
     return (
       <>
         <SidebarHeader />
-        <SidebarSearch />
+        {showSearch && (!collapsed || isMobile) && (
+          <SearchInput
+            searchInputRef={searchInputRef}
+            searchPlaceholder={searchPlaceholder}
+            initialValue={searchQuery}
+            onSearchChange={handleSearch}
+            keyboardShortcuts={keyboardShortcuts}
+          />
+        )}
         <SidebarMenuContent />
         <SidebarFooter />
       </>