@moontra/moonui-pro 2.5.11 → 2.5.12

package/dist/index.mjs

@@ -56306,27 +56306,44 @@ 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.forwardRef(({ placeholder, defaultValue, onChange, keyboardShortcuts }, ref) => {
-  const localRef = useRef(null);
-  const inputRef = ref || localRef;
-  const handleChange = useCallback((e) => {
-    onChange(e.target.value);
-  }, [onChange]);
+var SearchInput = t__default.memo(({
+  searchInputRef,
+  searchPlaceholder,
+  initialValue,
+  onSearchChange,
+  keyboardShortcuts
+}) => {
+  const [localValue, setLocalValue] = useState(initialValue || "");
+  const timeoutRef = useRef();
   useEffect(() => {
-    const input = typeof inputRef === "object" && inputRef?.current;
-    if (input && input.value !== defaultValue) {
-      input.value = defaultValue;
+    setLocalValue(initialValue);
+  }, [initialValue]);
+  const handleChange = useCallback((e) => {
+    const newValue = e.target.value;
+    setLocalValue(newValue);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
     }
-  }, [defaultValue, inputRef]);
+    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 pointer-events-none" }),
     /* @__PURE__ */ jsx(
       "input",
       {
-        ref: inputRef,
+        ref: searchInputRef,
         type: "text",
-        placeholder,
-        defaultValue,
+        placeholder: searchPlaceholder,
+        value: localValue,
         onChange: handleChange,
         autoComplete: "off",
         autoCorrect: "off",
@@ -56341,7 +56358,6 @@ var SearchInput = t__default.forwardRef(({ placeholder, defaultValue, onChange,
     ] })
   ] }) });
 });
-SearchInput.displayName = "SearchInput";
 function Sidebar({
   sections,
   footer,
@@ -56611,20 +56627,6 @@ function Sidebar({
       )
     ] });
   });
-  const searchComponent = useMemo(() => {
-    if (!showSearch)
-      return null;
-    return /* @__PURE__ */ jsx(
-      SearchInput,
-      {
-        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: [
@@ -56673,7 +56675,16 @@ function Sidebar({
   const SidebarContent = t__default.memo(() => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SidebarHeader, {}),
-      showSearch && (!collapsed || isMobile) && searchComponent,
+      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.11",
+  "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,41 +36,63 @@ import {
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu'
 
-// 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
+// Search Input Component - with local state to prevent focus loss
+const SearchInput = React.memo(({ 
+  searchInputRef,
+  searchPlaceholder,
+  initialValue,
+  onSearchChange,
+  keyboardShortcuts
+}: {
+  searchInputRef: React.RefObject<HTMLInputElement | null>
+  searchPlaceholder: string
+  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])
   
-  // Use uncontrolled input with onChange
+  // Handle input changes locally and debounce to parent
   const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(e.target.value)
-  }, [onChange])
+    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])
   
-  // Update value programmatically when defaultValue changes
+  // Cleanup timeout on unmount
   useEffect(() => {
-    const input = typeof inputRef === 'object' && inputRef?.current
-    if (input && input.value !== defaultValue) {
-      input.value = defaultValue
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
     }
-  }, [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 pointer-events-none" />
         <input
-          ref={inputRef as React.RefObject<HTMLInputElement>}
+          ref={searchInputRef}
           type="text"
-          placeholder={placeholder}
-          defaultValue={defaultValue}
+          placeholder={searchPlaceholder}
+          value={localValue}
           onChange={handleChange}
           autoComplete="off"
           autoCorrect="off"  
@@ -87,7 +109,6 @@ const SearchInput = React.forwardRef<
     </div>
   )
 })
-SearchInput.displayName = 'SearchInput'
 
 export interface SidebarItem {
   id: string
@@ -190,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 })
@@ -508,19 +529,6 @@ export function Sidebar({
     )
   })
 
-  // Create stable search component with uncontrolled input
-  const searchComponent = useMemo(() => {
-    if (!showSearch) return null
-    return (
-      <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(() => {
@@ -605,7 +613,15 @@ export function Sidebar({
     return (
       <>
         <SidebarHeader />
-        {showSearch && (!collapsed || isMobile) && searchComponent}
+        {showSearch && (!collapsed || isMobile) && (
+          <SearchInput
+            searchInputRef={searchInputRef}
+            searchPlaceholder={searchPlaceholder}
+            initialValue={searchQuery}
+            onSearchChange={handleSearch}
+            keyboardShortcuts={keyboardShortcuts}
+          />
+        )}
         <SidebarMenuContent />
         <SidebarFooter />
       </>