@moontra/moonui-pro 2.5.9 → 2.5.11

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,25 +56306,27 @@ 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 = t__default.memo(({
-  searchInputRef,
-  searchPlaceholder,
-  value,
-  onChange,
-  keyboardShortcuts
-}) => {
+var SearchInput = t__default.forwardRef(({ placeholder, defaultValue, onChange, keyboardShortcuts }, ref) => {
+  const localRef = useRef(null);
+  const inputRef = ref || localRef;
   const handleChange = useCallback((e) => {
     onChange(e.target.value);
   }, [onChange]);
+  useEffect(() => {
+    const input = typeof inputRef === "object" && inputRef?.current;
+    if (input && input.value !== defaultValue) {
+      input.value = defaultValue;
+    }
+  }, [defaultValue, inputRef]);
   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",
-        placeholder: searchPlaceholder,
-        value,
+        ref: inputRef,
+        type: "text",
+        placeholder,
+        defaultValue,
         onChange: handleChange,
         autoComplete: "off",
         autoCorrect: "off",
@@ -56339,6 +56341,7 @@ var SearchInput = t__default.memo(({
     ] })
   ] }) });
 });
+SearchInput.displayName = "SearchInput";
 function Sidebar({
   sections,
   footer,
@@ -56608,23 +56611,20 @@ function Sidebar({
       )
     ] });
   });
-  const searchElement = useMemo(() => {
+  const searchComponent = useMemo(() => {
     if (!showSearch)
       return null;
     return /* @__PURE__ */ jsx(
       SearchInput,
       {
-        searchInputRef,
-        searchPlaceholder,
-        value: searchQuery,
+        ref: searchInputRef,
+        placeholder: searchPlaceholder,
+        defaultValue: searchQuery,
         onChange: handleSearch,
         keyboardShortcuts
       }
     );
-  }, [showSearch, searchPlaceholder, searchQuery, handleSearch, keyboardShortcuts]);
-  const SidebarSearch = t__default.memo(() => {
-    return showSearch && (!collapsed || isMobile) ? searchElement : null;
-  });
+  }, [showSearch, searchPlaceholder, keyboardShortcuts, handleSearch]);
   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: [
@@ -56673,7 +56673,7 @@ function Sidebar({
   const SidebarContent = t__default.memo(() => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SidebarHeader, {}),
-      /* @__PURE__ */ jsx(SidebarSearch, {}),
+      showSearch && (!collapsed || isMobile) && searchComponent,
       /* @__PURE__ */ jsx(SidebarMenuContent, {}),
       /* @__PURE__ */ jsx(SidebarFooter, {})
     ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.9",
+  "version": "2.5.11",
   "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,33 +36,41 @@ import {
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu'
 
-// Search Input Component
-const SearchInput = React.memo(({ 
-  searchInputRef, 
-  searchPlaceholder,
-  value,
-  onChange,
-  keyboardShortcuts 
-}: {
-  searchInputRef: React.RefObject<HTMLInputElement | null>
-  searchPlaceholder: string
-  value: string
-  onChange: (value: string) => void
-  keyboardShortcuts: boolean
-}) => {
+// Uncontrolled Search Input to preserve focus
+const SearchInput = React.forwardRef<
+  HTMLInputElement,
+  {
+    placeholder: string
+    defaultValue: string
+    onChange: (value: string) => void
+    keyboardShortcuts: boolean
+  }
+>(({ placeholder, defaultValue, onChange, keyboardShortcuts }, ref) => {
+  const localRef = useRef<HTMLInputElement>(null)
+  const inputRef = ref || localRef
+  
+  // Use uncontrolled input with onChange
   const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(e.target.value)
   }, [onChange])
   
+  // Update value programmatically when defaultValue changes
+  useEffect(() => {
+    const input = typeof inputRef === 'object' && inputRef?.current
+    if (input && input.value !== defaultValue) {
+      input.value = defaultValue
+    }
+  }, [defaultValue, inputRef])
+  
   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
-          ref={searchInputRef}
-          type="search"
-          placeholder={searchPlaceholder}
-          value={value}
+          ref={inputRef as React.RefObject<HTMLInputElement>}
+          type="text"
+          placeholder={placeholder}
+          defaultValue={defaultValue}
           onChange={handleChange}
           autoComplete="off"
           autoCorrect="off"  
@@ -79,6 +87,7 @@ const SearchInput = React.memo(({
     </div>
   )
 })
+SearchInput.displayName = 'SearchInput'
 
 export interface SidebarItem {
   id: string
@@ -454,6 +463,7 @@ export function Sidebar({
   }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection])
 
 
+  
   // Header Component
   const SidebarHeader = React.memo(() => {
     return (
@@ -498,25 +508,19 @@ export function Sidebar({
     )
   })
 
-  // Search element with controlled value
-  const searchElement = useMemo(() => {
+  // Create stable search component with uncontrolled input
+  const searchComponent = useMemo(() => {
     if (!showSearch) return null
-    
     return (
       <SearchInput
-        searchInputRef={searchInputRef}
-        searchPlaceholder={searchPlaceholder}
-        value={searchQuery}
+        ref={searchInputRef}
+        placeholder={searchPlaceholder}
+        defaultValue={searchQuery}
         onChange={handleSearch}
         keyboardShortcuts={keyboardShortcuts}
       />
     )
-  }, [showSearch, searchPlaceholder, searchQuery, handleSearch, keyboardShortcuts])
-  
-  // Search Component wrapper
-  const SidebarSearch = React.memo(() => {
-    return showSearch && (!collapsed || isMobile) ? searchElement : null
-  })
+  }, [showSearch, searchPlaceholder, keyboardShortcuts, handleSearch]) // Only re-create when these stable props change
 
   // Menu Content
   const SidebarMenuContent = React.memo(() => {
@@ -601,7 +605,7 @@ export function Sidebar({
     return (
       <>
         <SidebarHeader />
-        <SidebarSearch />
+        {showSearch && (!collapsed || isMobile) && searchComponent}
         <SidebarMenuContent />
         <SidebarFooter />
       </>