@moontra/moonui-pro 2.5.9 → 2.5.10

package/dist/index.mjs

@@ -56306,16 +56306,13 @@ 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(({
+var SearchInput = ({
   searchInputRef,
   searchPlaceholder,
   value,
   onChange,
   keyboardShortcuts
 }) => {
-  const handleChange = useCallback((e) => {
-    onChange(e.target.value);
-  }, [onChange]);
   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(
@@ -56325,20 +56322,21 @@ var SearchInput = t__default.memo(({
         type: "search",
         placeholder: searchPlaceholder,
         value,
-        onChange: handleChange,
+        onChange: (e) => onChange(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" }),
       "K"
     ] })
   ] }) });
-});
+};
 function Sidebar({
   sections,
   footer,
@@ -56574,6 +56572,7 @@ 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",
@@ -56608,11 +56607,11 @@ function Sidebar({
       )
     ] });
   });
-  const searchElement = useMemo(() => {
-    if (!showSearch)
+  const SidebarSearch = t__default.memo(() => {
+    if (!showSearch || collapsed && !isMobile)
       return null;
     return /* @__PURE__ */ jsx(
-      SearchInput,
+      MemoizedSearchInput,
       {
         searchInputRef,
         searchPlaceholder,
@@ -56621,9 +56620,6 @@ function Sidebar({
         keyboardShortcuts
       }
     );
-  }, [showSearch, searchPlaceholder, searchQuery, handleSearch, keyboardShortcuts]);
-  const SidebarSearch = t__default.memo(() => {
-    return showSearch && (!collapsed || isMobile) ? searchElement : null;
   });
   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: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.9",
+  "version": "2.5.10",
   "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,8 +36,8 @@ import {
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu'
 
-// Search Input Component
-const SearchInput = React.memo(({ 
+// Search Input Component - Pure functional to prevent recreation
+const SearchInput = ({ 
   searchInputRef, 
   searchPlaceholder,
   value,
@@ -50,20 +50,17 @@ const SearchInput = React.memo(({
   onChange: (value: string) => void
   keyboardShortcuts: boolean
 }) => {
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(e.target.value)
-  }, [onChange])
-  
   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" />
         <input
+          key="sidebar-search-input"
           ref={searchInputRef}
           type="search"
           placeholder={searchPlaceholder}
           value={value}
-          onChange={handleChange}
+          onChange={(e) => onChange(e.target.value)}
           autoComplete="off"
           autoCorrect="off"  
           autoCapitalize="off"
@@ -78,7 +75,7 @@ const SearchInput = React.memo(({
       </div>
     </div>
   )
-})
+}
 
 export interface SidebarItem {
   id: string
@@ -454,6 +451,9 @@ 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(() => {
     return (
@@ -498,12 +498,12 @@ export function Sidebar({
     )
   })
 
-  // Search element with controlled value
-  const searchElement = useMemo(() => {
-    if (!showSearch) return null
+  // Search Component - Use memoized version
+  const SidebarSearch = React.memo(() => {
+    if (!showSearch || (collapsed && !isMobile)) return null
     
     return (
-      <SearchInput
+      <MemoizedSearchInput
         searchInputRef={searchInputRef}
         searchPlaceholder={searchPlaceholder}
         value={searchQuery}
@@ -511,11 +511,6 @@ export function Sidebar({
         keyboardShortcuts={keyboardShortcuts}
       />
     )
-  }, [showSearch, searchPlaceholder, searchQuery, handleSearch, keyboardShortcuts])
-  
-  // Search Component wrapper
-  const SidebarSearch = React.memo(() => {
-    return showSearch && (!collapsed || isMobile) ? searchElement : null
   })
 
   // Menu Content