@moontra/moonui-pro 2.5.10 → 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,37 +56306,42 @@ 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 = ({
-  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,
-        onChange: (e) => onChange(e.target.value),
+        ref: inputRef,
+        type: "text",
+        placeholder,
+        defaultValue,
+        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"
     ] })
   ] }) });
-};
+});
+SearchInput.displayName = "SearchInput";
 function Sidebar({
   sections,
   footer,
@@ -56572,7 +56577,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 +56611,20 @@ function Sidebar({
       )
     ] });
   });
-  const SidebarSearch = t__default.memo(() => {
-    if (!showSearch || collapsed && !isMobile)
+  const searchComponent = useMemo(() => {
+    if (!showSearch)
       return null;
     return /* @__PURE__ */ jsx(
-      MemoizedSearchInput,
+      SearchInput,
       {
-        searchInputRef,
-        searchPlaceholder,
-        value: searchQuery,
+        ref: searchInputRef,
+        placeholder: searchPlaceholder,
+        defaultValue: searchQuery,
         onChange: handleSearch,
         keyboardShortcuts
       }
     );
-  });
+  }, [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: [
@@ -56669,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.10",
+  "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,31 +36,42 @@ import {
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu'
 
-// Search Input Component - Pure functional to prevent recreation
-const SearchInput = ({ 
-  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
-          key="sidebar-search-input"
-          ref={searchInputRef}
-          type="search"
-          placeholder={searchPlaceholder}
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
+          ref={inputRef as React.RefObject<HTMLInputElement>}
+          type="text"
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          onChange={handleChange}
           autoComplete="off"
           autoCorrect="off"  
           autoCapitalize="off"
@@ -75,7 +86,8 @@ const SearchInput = ({
       </div>
     </div>
   )
-}
+})
+SearchInput.displayName = 'SearchInput'
 
 export interface SidebarItem {
   id: string
@@ -451,8 +463,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 +508,19 @@ export function Sidebar({
     )
   })
 
-  // Search Component - Use memoized version
-  const SidebarSearch = React.memo(() => {
-    if (!showSearch || (collapsed && !isMobile)) return null
-    
+  // Create stable search component with uncontrolled input
+  const searchComponent = useMemo(() => {
+    if (!showSearch) return null
     return (
-      <MemoizedSearchInput
-        searchInputRef={searchInputRef}
-        searchPlaceholder={searchPlaceholder}
-        value={searchQuery}
+      <SearchInput
+        ref={searchInputRef}
+        placeholder={searchPlaceholder}
+        defaultValue={searchQuery}
         onChange={handleSearch}
         keyboardShortcuts={keyboardShortcuts}
       />
     )
-  })
+  }, [showSearch, searchPlaceholder, keyboardShortcuts, handleSearch]) // Only re-create when these stable props change
 
   // Menu Content
   const SidebarMenuContent = React.memo(() => {
@@ -596,7 +605,7 @@ export function Sidebar({
     return (
       <>
         <SidebarHeader />
-        <SidebarSearch />
+        {showSearch && (!collapsed || isMobile) && searchComponent}
         <SidebarMenuContent />
         <SidebarFooter />
       </>