ywana-core8 0.1.82 → 0.1.83

package/dist/index.umd.js

@@ -4435,8 +4435,8 @@
         if (onSort) onSort(newConfig);
       }, [sortable, sortConfig, onSort]);
 
-      // Search component
-      var SearchComponent = function SearchComponent() {
+      // Search component JSX - memoized to prevent focus loss
+      var searchComponent = React.useMemo(function () {
         return searchable && /*#__PURE__*/React__default["default"].createElement("div", {
           className: "list__search"
         }, /*#__PURE__*/React__default["default"].createElement(TextField, {
@@ -4448,7 +4448,7 @@
           outlined: true,
           size: "small"
         }));
-      };
+      }, [searchable, searchPlaceholder, searchTerm, handleSearch]);
 
       // Generate CSS classes
       var cssClasses = ['list', dense && 'list--dense', outlined && 'list--outlined', disabled && 'list--disabled', animated && 'list--animated', loading && 'list--loading', className].filter(Boolean).join(' ');
@@ -4478,12 +4478,12 @@
         return /*#__PURE__*/React__default["default"].createElement("div", _extends({
           className: cssClasses,
           style: style
-        }, ariaAttributes, restProps), searchPosition === 'top' && /*#__PURE__*/React__default["default"].createElement(SearchComponent, null), /*#__PURE__*/React__default["default"].createElement("div", {
+        }, ariaAttributes, restProps), searchPosition === 'top' && searchComponent, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "list__empty"
         }, /*#__PURE__*/React__default["default"].createElement(Icon, {
           icon: emptyIcon,
           size: "large"
-        }), /*#__PURE__*/React__default["default"].createElement(Text, null, emptyMessage)), searchPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement(SearchComponent, null), children);
+        }), /*#__PURE__*/React__default["default"].createElement(Text, null, emptyMessage)), searchPosition === 'bottom' && searchComponent, children);
       }
 
       // Render grouped or normal list
@@ -4500,7 +4500,7 @@
         className: cssClasses,
         style: style,
         ref: listRef
-      }, ariaAttributes, restProps), searchPosition === 'top' && /*#__PURE__*/React__default["default"].createElement(SearchComponent, null), sortable && sortBy && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, ariaAttributes, restProps), searchPosition === 'top' && searchComponent, sortable && sortBy && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "list__sort"
       }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "list__sort-button",
@@ -4529,7 +4529,7 @@
           disabled: disabled,
           animated: animated
         });
-      })), searchPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement(SearchComponent, null), children);
+      })), searchPosition === 'bottom' && searchComponent, children);
     };
 
     /**
@@ -4598,8 +4598,8 @@
         });
       }, []);
 
-      // Search component for grouped list
-      var GroupedSearchComponent = function GroupedSearchComponent() {
+      // Search component for grouped list - memoized to prevent focus loss
+      var groupedSearchComponent = React.useMemo(function () {
         return searchable && /*#__PURE__*/React__default["default"].createElement("div", {
           className: "list__search"
         }, /*#__PURE__*/React__default["default"].createElement(TextField, {
@@ -4611,11 +4611,11 @@
           outlined: true,
           size: "small"
         }));
-      };
+      }, [searchable, searchPlaceholder, searchTerm, onSearch]);
       return /*#__PURE__*/React__default["default"].createElement("div", _extends({
         className: cssClasses + " grouped",
         style: style
-      }, ariaAttributes, restProps), searchPosition === 'top' && /*#__PURE__*/React__default["default"].createElement(GroupedSearchComponent, null), groups.map(function (group) {
+      }, ariaAttributes, restProps), searchPosition === 'top' && groupedSearchComponent, groups.map(function (group) {
         var isCollapsed = collapsedGroups.has(group.name);
         var groupTitle = groupRenderer ? groupRenderer(group) : /*#__PURE__*/React__default["default"].createElement(Text, null, group.name);
         return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
@@ -4658,7 +4658,7 @@
             animated: animated
           });
         })));
-      }), searchPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement(GroupedSearchComponent, null), children);
+      }), searchPosition === 'bottom' && groupedSearchComponent, children);
     };
 
     /**