ywana-core8 0.1.82 → 0.1.84

package/dist/index.cjs

@@ -4442,8 +4442,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 = React.useMemo(function () {
     return searchable && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "list__search"
     }, /*#__PURE__*/React__default["default"].createElement(TextField, {
@@ -4455,7 +4455,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(' ');
@@ -4485,12 +4485,12 @@ var List = function List(props) {
     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
@@ -4507,7 +4507,7 @@ var List = function List(props) {
     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",
@@ -4536,7 +4536,7 @@ var List = function List(props) {
       disabled: disabled,
       animated: animated
     });
-  })), searchPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement(SearchComponent, null), children);
+  })), searchPosition === 'bottom' && searchComponent, children);
 };
 
 /**
@@ -4605,8 +4605,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 = React.useMemo(function () {
     return searchable && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "list__search"
     }, /*#__PURE__*/React__default["default"].createElement(TextField, {
@@ -4618,11 +4618,11 @@ var GroupedList = function GroupedList(props) {
       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, {
@@ -4665,7 +4665,7 @@ var GroupedList = function GroupedList(props) {
         animated: animated
       });
     })));
-  }), searchPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement(GroupedSearchComponent, null), children);
+  }), searchPosition === 'bottom' && groupedSearchComponent, children);
 };
 
 /**
@@ -11350,10 +11350,20 @@ Token.defaultProps = {
   variant: 'default'
 };
 
-var _excluded$4 = ["nodes", "children", "searchable", "searchPlaceholder", "searchBy", "filterable", "sortable", "sortBy", "sortDirection", "multiSelect", "onMultiSelect", "expandAll", "collapseAll", "onExpandAll", "onCollapseAll", "disabled", "loading", "empty", "emptyMessage", "emptyIcon", "className", "style", "ariaLabel"],
+var _excluded$4 = ["nodes", "children", "searchable", "searchPlaceholder", "searchBy", "filterable", "sortable", "sortBy", "sortDirection", "multiSelect", "onMultiSelect", "showExpandIcon", "onExpandAll", "onCollapseAll", "disabled", "loading", "empty", "emptyMessage", "emptyIcon", "className", "style", "ariaLabel"],
   _excluded2$1 = ["id", "icon", "label", "tooltip", "open", "children", "actions", "onSelect", "disabled", "draggable", "onDragStart", "onDragEnd", "onDrop", "expandable", "level", "hasChildren", "loading", "badge", "className", "style"],
   _excluded3 = ["id", "icon", "label", "actions", "onSelect", "selected", "onCheck", "checked", "disabled", "draggable", "onDragStart", "onDragEnd", "onDrop", "level", "badge", "tooltip", "className", "style"];
 
+// Context for tree state
+var TreeContext = React.createContext({
+  multiSelect: false,
+  selectedItems: [],
+  onMultiSelect: null,
+  searchTerm: '',
+  forceExpandAll: false,
+  forceCollapseAll: false
+});
+
 /**
  * Enhanced Tree component with improved functionality while maintaining 100% compatibility
  */
@@ -11365,13 +11375,13 @@ var Tree = function Tree(props) {
     searchable = _props$searchable === void 0 ? false : _props$searchable,
     _props$searchPlacehol = props.searchPlaceholder,
     searchPlaceholder = _props$searchPlacehol === void 0 ? "Search..." : _props$searchPlacehol,
+    _props$searchBy = props.searchBy,
+    searchBy = _props$searchBy === void 0 ? ['label'] : _props$searchBy,
     _props$multiSelect = props.multiSelect,
     multiSelect = _props$multiSelect === void 0 ? false : _props$multiSelect,
     onMultiSelect = props.onMultiSelect,
-    _props$expandAll = props.expandAll,
-    expandAll = _props$expandAll === void 0 ? false : _props$expandAll,
-    _props$collapseAll = props.collapseAll,
-    collapseAll = _props$collapseAll === void 0 ? false : _props$collapseAll,
+    _props$showExpandIcon = props.showExpandIcon,
+    showExpandIcon = _props$showExpandIcon === void 0 ? false : _props$showExpandIcon,
     onExpandAll = props.onExpandAll,
     onCollapseAll = props.onCollapseAll,
     _props$disabled = props.disabled,
@@ -11392,8 +11402,18 @@ var Tree = function Tree(props) {
     searchTerm = _useState[0],
     setSearchTerm = _useState[1];
   var _useState2 = React.useState([]),
+    selectedItems = _useState2[0],
     setSelectedItems = _useState2[1];
   React.useState(new Set());
+  var _useState4 = React.useState(false),
+    allExpanded = _useState4[0],
+    setAllExpanded = _useState4[1];
+  var _useState5 = React.useState(false),
+    forceExpandAll = _useState5[0],
+    setForceExpandAll = _useState5[1];
+  var _useState6 = React.useState(false),
+    forceCollapseAll = _useState6[0],
+    setForceCollapseAll = _useState6[1];
   var treeRef = React.useRef(null);
 
   // Validate props
@@ -11406,8 +11426,70 @@ var Tree = function Tree(props) {
     setSearchTerm(value);
   }, []);
 
+  // Apply expansion state to nodes based on current tree state
+  var applyExpansionState = React.useCallback(function (nodeElements) {
+    return React__default["default"].Children.toArray(nodeElements).map(function (child) {
+      var _child$type;
+      if (!React__default["default"].isValidElement(child)) return child;
+
+      // If it's a TreeNode, apply the current expansion state
+      if (((_child$type = child.type) == null ? void 0 : _child$type.displayName) === 'TreeNode' || child.props.hasOwnProperty('open')) {
+        var processedChildren = child.props.children ? applyExpansionState(child.props.children) : child.props.children;
+        return React__default["default"].cloneElement(child, _extends({}, child.props, {
+          open: allExpanded,
+          // Apply current expansion state
+          children: processedChildren
+        }));
+      }
+      return child;
+    });
+  }, [allExpanded]);
+
+  // Filter nodes based on search term and auto-expand matching nodes
+  var filterNodes = React.useCallback(function (nodeElements, searchTerm) {
+    if (!searchTerm.trim()) {
+      // When search is cleared, apply current expansion state
+      return applyExpansionState(nodeElements);
+    }
+    return React__default["default"].Children.toArray(nodeElements).map(function (child) {
+      if (!React__default["default"].isValidElement(child)) return child;
+
+      // Check if current node matches search
+      var label = child.props.label || '';
+      var matches = searchBy.some(function (field) {
+        var value = child.props[field] || label;
+        return typeof value === 'string' && value.toLowerCase().includes(searchTerm.toLowerCase());
+      });
+
+      // Check if any children match (recursive)
+      var hasMatchingChildren = false;
+      var filteredChildren = child.props.children;
+      if (child.props.children) {
+        filteredChildren = filterNodes(child.props.children, searchTerm);
+        hasMatchingChildren = React__default["default"].Children.count(filteredChildren) > 0;
+      }
+
+      // If current node or children match, include it and auto-expand
+      if (matches || hasMatchingChildren) {
+        var _child$type2;
+        // Clone the element and force it to be open if it's a TreeNode
+        if (((_child$type2 = child.type) == null ? void 0 : _child$type2.displayName) === 'TreeNode' || child.props.hasOwnProperty('open')) {
+          return React__default["default"].cloneElement(child, _extends({}, child.props, {
+            open: true,
+            // Auto-expand nodes with matches during search
+            children: filteredChildren
+          }));
+        }
+        return React__default["default"].cloneElement(child, _extends({}, child.props, {
+          children: filteredChildren
+        }));
+      }
+      return null;
+    }).filter(Boolean);
+  }, [searchBy, applyExpansionState]);
+
   // Handle multi-selection
-  React.useCallback(function (id, selected) {
+  var handleMultiSelect = React.useCallback(function (id, selected) {
     if (!multiSelect) return;
     setSelectedItems(function (prev) {
       var newSelected = selected ? [].concat(prev, [id]) : prev.filter(function (item) {
@@ -11420,15 +11502,26 @@ var Tree = function Tree(props) {
     });
   }, [multiSelect, onMultiSelect]);
 
-  // Handle expand/collapse all
-  var handleExpandAll = React.useCallback(function () {
-    if (onExpandAll) onExpandAll();
-    // Implementation would depend on tree structure
-  }, [onExpandAll]);
-  var handleCollapseAll = React.useCallback(function () {
-    if (onCollapseAll) onCollapseAll();
-    // Implementation would depend on tree structure
-  }, [onCollapseAll]);
+  // Handle expand/collapse toggle - using context to propagate to all TreeNodes
+  var handleExpandToggle = React.useCallback(function () {
+    var newState = !allExpanded;
+    setAllExpanded(newState);
+    if (newState) {
+      if (onExpandAll) onExpandAll();
+      // Trigger expand all via context
+      setForceExpandAll(true);
+      setTimeout(function () {
+        return setForceExpandAll(false);
+      }, 100);
+    } else {
+      if (onCollapseAll) onCollapseAll();
+      // Trigger collapse all via context
+      setForceCollapseAll(true);
+      setTimeout(function () {
+        return setForceCollapseAll(false);
+      }, 100);
+    }
+  }, [allExpanded, onExpandAll, onCollapseAll]);
 
   // Generate CSS classes
   var cssClasses = ['tree', disabled && 'tree--disabled', loading && 'tree--loading', searchable && 'tree--searchable', multiSelect && 'tree--multi-select', className].filter(Boolean).join(' ');
@@ -11476,11 +11569,23 @@ var Tree = function Tree(props) {
       size: "large"
     }), /*#__PURE__*/React__default["default"].createElement(Text, null, emptyMessage)));
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+  var contextValue = {
+    multiSelect: multiSelect,
+    selectedItems: selectedItems,
+    onMultiSelect: handleMultiSelect,
+    searchTerm: searchTerm,
+    forceExpandAll: forceExpandAll,
+    forceCollapseAll: forceCollapseAll
+  };
+  return /*#__PURE__*/React__default["default"].createElement(TreeContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React__default["default"].createElement("div", _extends({
     className: cssClasses,
     style: style,
     ref: treeRef
-  }, ariaAttributes, restProps), searchable && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, ariaAttributes, restProps), (searchable || showExpandIcon) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "tree__header " + (!searchable && showExpandIcon ? 'tree__header--expand-only' : '')
+  }, searchable && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "tree__search"
   }, /*#__PURE__*/React__default["default"].createElement(TextField, {
     id: "tree-search",
@@ -11490,29 +11595,17 @@ var Tree = function Tree(props) {
     icon: "search",
     outlined: true,
     size: "small"
-  })), (expandAll || collapseAll) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "tree__controls"
-  }, expandAll && /*#__PURE__*/React__default["default"].createElement("button", {
-    className: "tree__control-button",
-    onClick: handleExpandAll,
-    "aria-label": "Expand all nodes"
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: "unfold_more",
-    size: "small"
-  }), /*#__PURE__*/React__default["default"].createElement(Text, {
-    size: "sm"
-  }, "Expand All")), collapseAll && /*#__PURE__*/React__default["default"].createElement("button", {
-    className: "tree__control-button",
-    onClick: handleCollapseAll,
-    "aria-label": "Collapse all nodes"
+  })), showExpandIcon && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "tree__expand-control"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: "unfold_less",
-    size: "small"
-  }), /*#__PURE__*/React__default["default"].createElement(Text, {
-    size: "sm"
-  }, "Collapse All"))), /*#__PURE__*/React__default["default"].createElement("div", {
+    icon: allExpanded ? "unfold_less" : "unfold_more",
+    size: "small",
+    clickable: true,
+    action: handleExpandToggle,
+    tooltip: allExpanded ? "Collapse all" : "Expand all"
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "tree__content"
-  }, nodes, children));
+  }, nodes, searchable ? filterNodes(children, searchTerm) : applyExpansionState(children))));
 };
 
 /**
@@ -11548,19 +11641,44 @@ var TreeNode = function TreeNode(props) {
     className = props.className,
     style = props.style,
     restProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
-  var _useState4 = React.useState(open),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
-  var _useState5 = React.useState(false),
-    isDragging = _useState5[0],
-    setIsDragging = _useState5[1];
+  var _useState7 = React.useState(open),
+    isOpen = _useState7[0],
+    setIsOpen = _useState7[1];
+  var _useState8 = React.useState(false),
+    isDragging = _useState8[0],
+    setIsDragging = _useState8[1];
   var nodeRef = React.useRef(null);
 
+  // Get tree context for forced expand/collapse
+  var treeContext = React.useContext(TreeContext);
+  var forceExpandAll = treeContext.forceExpandAll,
+    forceCollapseAll = treeContext.forceCollapseAll;
+
   // Sync with open prop
   React.useEffect(function () {
     setIsOpen(open);
   }, [open]);
 
+  // Handle forced expand/collapse from tree context
+  React.useEffect(function () {
+    if (forceExpandAll && expandable) {
+      setIsOpen(true);
+      // Also update the DOM element
+      if (nodeRef.current) {
+        nodeRef.current.open = true;
+      }
+    }
+  }, [forceExpandAll, expandable]);
+  React.useEffect(function () {
+    if (forceCollapseAll && expandable) {
+      setIsOpen(false);
+      // Also update the DOM element
+      if (nodeRef.current) {
+        nodeRef.current.open = false;
+      }
+    }
+  }, [forceCollapseAll, expandable]);
+
   // Handle selection (maintaining original behavior)
   var handleSelect = React.useCallback(function (event) {
     if (disabled) return;
@@ -11568,14 +11686,13 @@ var TreeNode = function TreeNode(props) {
     if (onSelect) onSelect(id);
   }, [disabled, onSelect, id]);
 
-  // Handle toggle
+  // Handle toggle - sync with details element
   var handleToggle = React.useCallback(function (event) {
     if (disabled || !expandable) return;
-    event.preventDefault();
-    event.stopPropagation();
-    setIsOpen(function (prev) {
-      return !prev;
-    });
+
+    // Sync our state with the details element
+    var detailsElement = event.currentTarget;
+    setIsOpen(detailsElement.open);
   }, [disabled, expandable]);
 
   // Handle keyboard interaction
@@ -11653,24 +11770,29 @@ var TreeNode = function TreeNode(props) {
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd,
     onDrop: handleDrop,
-    onDragOver: handleDragOver
+    onDragOver: handleDragOver,
+    onToggle: handleToggle
   }, restProps), /*#__PURE__*/React__default["default"].createElement("summary", _extends({
     className: "tree-item",
     onClick: function onClick(event) {
-      // Si se hace click en el área general del nodo (no en el label), toggle
-      if (event.target === event.currentTarget || event.target.closest('.tree-node__toggle')) {
-        handleToggle(event);
+      // Si se hace click en el toggle, permitir el comportamiento natural
+      if (event.target.closest('.tree-node__toggle')) {
+        // No hacer nada, dejar que el details maneje el toggle
+        return;
       }
+
+      // Si hay onSelect y se hace click fuera del toggle, seleccionar
+      if (onSelect) {
+        event.preventDefault(); // Prevenir el toggle del details
+        handleSelect(event);
+      }
+      // Si no hay onSelect, permitir el comportamiento natural del details
     },
     onKeyDown: handleKeyDown
   }, ariaAttributes, {
     title: tooltip
   }), hasChildren && expandable && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "tree-node__toggle",
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      handleToggle(event);
-    }
+    className: "tree-node__toggle"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: isOpen ? 'expand_less' : 'expand_more',
     size: "small",
@@ -11687,11 +11809,7 @@ var TreeNode = function TreeNode(props) {
     icon: "hourglass_empty",
     size: "small"
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "label " + clickable,
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      handleSelect(event);
-    }
+    className: "label " + clickable
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "tree-node__label-text"
   }, labelTxt), badge && /*#__PURE__*/React__default["default"].createElement("span", {
@@ -11733,11 +11851,20 @@ var TreeItem = function TreeItem(props) {
     className = props.className,
     style = props.style,
     restProps = _objectWithoutPropertiesLoose(props, _excluded3);
-  var _useState6 = React.useState(false),
-    isDragging = _useState6[0],
-    setIsDragging = _useState6[1];
+  var _useState9 = React.useState(false),
+    isDragging = _useState9[0],
+    setIsDragging = _useState9[1];
   var itemRef = React.useRef(null);
 
+  // Get tree context
+  var treeContext = React.useContext(TreeContext);
+  var multiSelect = treeContext.multiSelect,
+    selectedItems = treeContext.selectedItems,
+    handleTreeMultiSelect = treeContext.onMultiSelect;
+
+  // Check if this item is selected in multi-select mode
+  var isMultiSelected = multiSelect && selectedItems.includes(id);
+
   // Handle selection (maintaining original behavior)
   var handleSelect = React.useCallback(function (event) {
     if (disabled) return;
@@ -11745,12 +11872,20 @@ var TreeItem = function TreeItem(props) {
     if (onSelect) onSelect(id);
   }, [disabled, onSelect, id]);
 
-  // Handle checkbox (maintaining original behavior)
+  // Handle checkbox (maintaining original behavior + multi-select)
   var handleCheck = React.useCallback(function (event) {
     if (disabled) return;
     event.stopPropagation();
-    if (onCheck) onCheck(id, event.target.checked);
-  }, [disabled, onCheck, id]);
+    var isChecked = event.target.checked;
+
+    // Handle original onCheck callback
+    if (onCheck) onCheck(id, isChecked);
+
+    // Handle multi-select if enabled
+    if (multiSelect && handleTreeMultiSelect) {
+      handleTreeMultiSelect(id, isChecked);
+    }
+  }, [disabled, onCheck, id, multiSelect, handleTreeMultiSelect]);
 
   // Handle keyboard interaction
   var handleKeyDown = React.useCallback(function (event) {
@@ -11817,11 +11952,11 @@ var TreeItem = function TreeItem(props) {
     onDrop: handleDrop,
     onDragOver: handleDragOver,
     title: tooltip
-  }, ariaAttributes, restProps), onCheck && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, ariaAttributes, restProps), (onCheck || multiSelect) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "tree-item__checkbox"
   }, /*#__PURE__*/React__default["default"].createElement("input", {
     type: "checkbox",
-    checked: checked,
+    checked: multiSelect ? isMultiSelected : checked,
     onChange: handleCheck,
     disabled: disabled,
     "aria-label": "Select " + (typeof label === 'string' ? label : 'item')
@@ -11864,10 +11999,8 @@ Tree.propTypes = {
   multiSelect: PropTypes.bool,
   /** Multi-selection callback */
   onMultiSelect: PropTypes.func,
-  /** Show expand all button */
-  expandAll: PropTypes.bool,
-  /** Show collapse all button */
-  collapseAll: PropTypes.bool,
+  /** Show expand/collapse icon */
+  showExpandIcon: PropTypes.bool,
   /** Expand all callback */
   onExpandAll: PropTypes.func,
   /** Collapse all callback */