ywana-core8 0.1.82 → 0.1.83

package/dist/index.modern.js

@@ -4433,8 +4433,8 @@ var List = function List(props) {
     if (onSort) onSort(newConfig);
   }, [sortable, sortConfig, onSort]);
 
-  // Search component
-  var SearchComponent = function SearchComponent() {
+  // Search component JSX - memoized to prevent focus loss
+  var searchComponent = useMemo(function () {
     return searchable && /*#__PURE__*/React.createElement("div", {
       className: "list__search"
     }, /*#__PURE__*/React.createElement(TextField, {
@@ -4446,7 +4446,7 @@ var List = function List(props) {
       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(' ');
@@ -4476,12 +4476,12 @@ var List = function List(props) {
     return /*#__PURE__*/React.createElement("div", _extends({
       className: cssClasses,
       style: style
-    }, ariaAttributes, restProps), searchPosition === 'top' && /*#__PURE__*/React.createElement(SearchComponent, null), /*#__PURE__*/React.createElement("div", {
+    }, ariaAttributes, restProps), searchPosition === 'top' && searchComponent, /*#__PURE__*/React.createElement("div", {
       className: "list__empty"
     }, /*#__PURE__*/React.createElement(Icon, {
       icon: emptyIcon,
       size: "large"
-    }), /*#__PURE__*/React.createElement(Text, null, emptyMessage)), searchPosition === 'bottom' && /*#__PURE__*/React.createElement(SearchComponent, null), children);
+    }), /*#__PURE__*/React.createElement(Text, null, emptyMessage)), searchPosition === 'bottom' && searchComponent, children);
   }
 
   // Render grouped or normal list
@@ -4498,7 +4498,7 @@ var List = function List(props) {
     className: cssClasses,
     style: style,
     ref: listRef
-  }, ariaAttributes, restProps), searchPosition === 'top' && /*#__PURE__*/React.createElement(SearchComponent, null), sortable && sortBy && /*#__PURE__*/React.createElement("div", {
+  }, ariaAttributes, restProps), searchPosition === 'top' && searchComponent, sortable && sortBy && /*#__PURE__*/React.createElement("div", {
     className: "list__sort"
   }, /*#__PURE__*/React.createElement("button", {
     className: "list__sort-button",
@@ -4527,7 +4527,7 @@ var List = function List(props) {
       disabled: disabled,
       animated: animated
     });
-  })), searchPosition === 'bottom' && /*#__PURE__*/React.createElement(SearchComponent, null), children);
+  })), searchPosition === 'bottom' && searchComponent, children);
 };
 
 /**
@@ -4596,8 +4596,8 @@ var GroupedList = function GroupedList(props) {
     });
   }, []);
 
-  // Search component for grouped list
-  var GroupedSearchComponent = function GroupedSearchComponent() {
+  // Search component for grouped list - memoized to prevent focus loss
+  var groupedSearchComponent = useMemo(function () {
     return searchable && /*#__PURE__*/React.createElement("div", {
       className: "list__search"
     }, /*#__PURE__*/React.createElement(TextField, {
@@ -4609,11 +4609,11 @@ var GroupedList = function GroupedList(props) {
       outlined: true,
       size: "small"
     }));
-  };
+  }, [searchable, searchPlaceholder, searchTerm, onSearch]);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cssClasses + " grouped",
     style: style
-  }, ariaAttributes, restProps), searchPosition === 'top' && /*#__PURE__*/React.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.createElement(Text, null, group.name);
     return /*#__PURE__*/React.createElement(Fragment$2, {
@@ -4656,7 +4656,7 @@ var GroupedList = function GroupedList(props) {
         animated: animated
       });
     })));
-  }), searchPosition === 'bottom' && /*#__PURE__*/React.createElement(GroupedSearchComponent, null), children);
+  }), searchPosition === 'bottom' && groupedSearchComponent, children);
 };
 
 /**