ywana-core8 0.1.82 → 0.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.82",
+  "version": "0.1.83",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/list.js

@@ -125,8 +125,8 @@ export const List = (props) => {
         if (onSort) onSort(newConfig)
     }, [sortable, sortConfig, onSort])
 
-    // Search component
-    const SearchComponent = () => (
+    // Search component JSX - memoized to prevent focus loss
+    const searchComponent = useMemo(() => (
         searchable && (
             <div className="list__search">
                 <TextField
@@ -140,7 +140,7 @@ export const List = (props) => {
                 />
             </div>
         )
-    )
+    ), [searchable, searchPlaceholder, searchTerm, handleSearch])
 
     // Generate CSS classes
     const cssClasses = [
@@ -178,12 +178,12 @@ export const List = (props) => {
     if (empty || sortedItems.length === 0) {
         return (
             <div className={cssClasses} style={style} {...ariaAttributes} {...restProps}>
-                {searchPosition === 'top' && <SearchComponent />}
+                {searchPosition === 'top' && searchComponent}
                 <div className="list__empty">
                     <Icon icon={emptyIcon} size="large" />
                     <Text>{emptyMessage}</Text>
                 </div>
-                {searchPosition === 'bottom' && <SearchComponent />}
+                {searchPosition === 'bottom' && searchComponent}
                 {children}
             </div>
         )
@@ -204,7 +204,7 @@ export const List = (props) => {
         />
     ) : (
         <div className={cssClasses} style={style} ref={listRef} {...ariaAttributes} {...restProps}>
-            {searchPosition === 'top' && <SearchComponent />}
+            {searchPosition === 'top' && searchComponent}
 
             {sortable && sortBy && (
                 <div className="list__sort">
@@ -241,7 +241,7 @@ export const List = (props) => {
                     />
                 ))}
             </ul>
-            {searchPosition === 'bottom' && <SearchComponent />}
+            {searchPosition === 'bottom' && searchComponent}
             {children}
         </div>
     )
@@ -301,8 +301,8 @@ const GroupedList = (props) => {
         })
     }, [])
 
-    // Search component for grouped list
-    const GroupedSearchComponent = () => (
+    // Search component for grouped list - memoized to prevent focus loss
+    const groupedSearchComponent = useMemo(() => (
         searchable && (
             <div className="list__search">
                 <TextField
@@ -316,11 +316,11 @@ const GroupedList = (props) => {
                 />
             </div>
         )
-    )
+    ), [searchable, searchPlaceholder, searchTerm, onSearch])
 
     return (
         <div className={`${cssClasses} grouped`} style={style} {...ariaAttributes} {...restProps}>
-            {searchPosition === 'top' && <GroupedSearchComponent />}
+            {searchPosition === 'top' && groupedSearchComponent}
 
             {groups.map(group => {
                 const isCollapsed = collapsedGroups.has(group.name)
@@ -377,7 +377,7 @@ const GroupedList = (props) => {
                     </Fragment>
                 )
             })}
-            {searchPosition === 'bottom' && <GroupedSearchComponent />}
+            {searchPosition === 'bottom' && groupedSearchComponent}
             {children}
         </div>
     )