ywana-core8 0.1.82 → 0.1.84

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
-import React, { useContext, useMemo, useCallback, useState, useEffect, useRef, Fragment as Fragment$2 } from 'react';
+import React, { useContext, useMemo, useCallback, useState, useEffect, useRef, Fragment as Fragment$2, createContext } from 'react';
 import ResumableJS from 'resumablejs';
 import RSwitch from 'react-switch';
 import { Store, ReactNotifications } from 'react-notifications-component';
@@ -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);
 };
 
 /**
@@ -11341,10 +11341,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 = createContext({
+  multiSelect: false,
+  selectedItems: [],
+  onMultiSelect: null,
+  searchTerm: '',
+  forceExpandAll: false,
+  forceCollapseAll: false
+});
+
 /**
  * Enhanced Tree component with improved functionality while maintaining 100% compatibility
  */
@@ -11356,13 +11366,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,
@@ -11383,8 +11393,18 @@ var Tree = function Tree(props) {
     searchTerm = _useState[0],
     setSearchTerm = _useState[1];
   var _useState2 = useState([]),
+    selectedItems = _useState2[0],
     setSelectedItems = _useState2[1];
   useState(new Set());
+  var _useState4 = useState(false),
+    allExpanded = _useState4[0],
+    setAllExpanded = _useState4[1];
+  var _useState5 = useState(false),
+    forceExpandAll = _useState5[0],
+    setForceExpandAll = _useState5[1];
+  var _useState6 = useState(false),
+    forceCollapseAll = _useState6[0],
+    setForceCollapseAll = _useState6[1];
   var treeRef = useRef(null);
 
   // Validate props
@@ -11397,8 +11417,70 @@ var Tree = function Tree(props) {
     setSearchTerm(value);
   }, []);
 
+  // Apply expansion state to nodes based on current tree state
+  var applyExpansionState = useCallback(function (nodeElements) {
+    return React.Children.toArray(nodeElements).map(function (child) {
+      var _child$type;
+      if (!React.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.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 = useCallback(function (nodeElements, searchTerm) {
+    if (!searchTerm.trim()) {
+      // When search is cleared, apply current expansion state
+      return applyExpansionState(nodeElements);
+    }
+    return React.Children.toArray(nodeElements).map(function (child) {
+      if (!React.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.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.cloneElement(child, _extends({}, child.props, {
+            open: true,
+            // Auto-expand nodes with matches during search
+            children: filteredChildren
+          }));
+        }
+        return React.cloneElement(child, _extends({}, child.props, {
+          children: filteredChildren
+        }));
+      }
+      return null;
+    }).filter(Boolean);
+  }, [searchBy, applyExpansionState]);
+
   // Handle multi-selection
-  useCallback(function (id, selected) {
+  var handleMultiSelect = useCallback(function (id, selected) {
     if (!multiSelect) return;
     setSelectedItems(function (prev) {
       var newSelected = selected ? [].concat(prev, [id]) : prev.filter(function (item) {
@@ -11411,15 +11493,26 @@ var Tree = function Tree(props) {
     });
   }, [multiSelect, onMultiSelect]);
 
-  // Handle expand/collapse all
-  var handleExpandAll = useCallback(function () {
-    if (onExpandAll) onExpandAll();
-    // Implementation would depend on tree structure
-  }, [onExpandAll]);
-  var handleCollapseAll = 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 = 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(' ');
@@ -11467,11 +11560,23 @@ var Tree = function Tree(props) {
       size: "large"
     }), /*#__PURE__*/React.createElement(Text, null, emptyMessage)));
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
+  var contextValue = {
+    multiSelect: multiSelect,
+    selectedItems: selectedItems,
+    onMultiSelect: handleMultiSelect,
+    searchTerm: searchTerm,
+    forceExpandAll: forceExpandAll,
+    forceCollapseAll: forceCollapseAll
+  };
+  return /*#__PURE__*/React.createElement(TreeContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", _extends({
     className: cssClasses,
     style: style,
     ref: treeRef
-  }, ariaAttributes, restProps), searchable && /*#__PURE__*/React.createElement("div", {
+  }, ariaAttributes, restProps), (searchable || showExpandIcon) && /*#__PURE__*/React.createElement("div", {
+    className: "tree__header " + (!searchable && showExpandIcon ? 'tree__header--expand-only' : '')
+  }, searchable && /*#__PURE__*/React.createElement("div", {
     className: "tree__search"
   }, /*#__PURE__*/React.createElement(TextField, {
     id: "tree-search",
@@ -11481,29 +11586,17 @@ var Tree = function Tree(props) {
     icon: "search",
     outlined: true,
     size: "small"
-  })), (expandAll || collapseAll) && /*#__PURE__*/React.createElement("div", {
-    className: "tree__controls"
-  }, expandAll && /*#__PURE__*/React.createElement("button", {
-    className: "tree__control-button",
-    onClick: handleExpandAll,
-    "aria-label": "Expand all nodes"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "unfold_more",
-    size: "small"
-  }), /*#__PURE__*/React.createElement(Text, {
-    size: "sm"
-  }, "Expand All")), collapseAll && /*#__PURE__*/React.createElement("button", {
-    className: "tree__control-button",
-    onClick: handleCollapseAll,
-    "aria-label": "Collapse all nodes"
+  })), showExpandIcon && /*#__PURE__*/React.createElement("div", {
+    className: "tree__expand-control"
   }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "unfold_less",
-    size: "small"
-  }), /*#__PURE__*/React.createElement(Text, {
-    size: "sm"
-  }, "Collapse All"))), /*#__PURE__*/React.createElement("div", {
+    icon: allExpanded ? "unfold_less" : "unfold_more",
+    size: "small",
+    clickable: true,
+    action: handleExpandToggle,
+    tooltip: allExpanded ? "Collapse all" : "Expand all"
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "tree__content"
-  }, nodes, children));
+  }, nodes, searchable ? filterNodes(children, searchTerm) : applyExpansionState(children))));
 };
 
 /**
@@ -11539,19 +11632,44 @@ var TreeNode = function TreeNode(props) {
     className = props.className,
     style = props.style,
     restProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
-  var _useState4 = useState(open),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
-  var _useState5 = useState(false),
-    isDragging = _useState5[0],
-    setIsDragging = _useState5[1];
+  var _useState7 = useState(open),
+    isOpen = _useState7[0],
+    setIsOpen = _useState7[1];
+  var _useState8 = useState(false),
+    isDragging = _useState8[0],
+    setIsDragging = _useState8[1];
   var nodeRef = useRef(null);
 
+  // Get tree context for forced expand/collapse
+  var treeContext = useContext(TreeContext);
+  var forceExpandAll = treeContext.forceExpandAll,
+    forceCollapseAll = treeContext.forceCollapseAll;
+
   // Sync with open prop
   useEffect(function () {
     setIsOpen(open);
   }, [open]);
 
+  // Handle forced expand/collapse from tree context
+  useEffect(function () {
+    if (forceExpandAll && expandable) {
+      setIsOpen(true);
+      // Also update the DOM element
+      if (nodeRef.current) {
+        nodeRef.current.open = true;
+      }
+    }
+  }, [forceExpandAll, expandable]);
+  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 = useCallback(function (event) {
     if (disabled) return;
@@ -11559,14 +11677,13 @@ var TreeNode = function TreeNode(props) {
     if (onSelect) onSelect(id);
   }, [disabled, onSelect, id]);
 
-  // Handle toggle
+  // Handle toggle - sync with details element
   var handleToggle = 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
@@ -11644,24 +11761,29 @@ var TreeNode = function TreeNode(props) {
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd,
     onDrop: handleDrop,
-    onDragOver: handleDragOver
+    onDragOver: handleDragOver,
+    onToggle: handleToggle
   }, restProps), /*#__PURE__*/React.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.createElement("div", {
-    className: "tree-node__toggle",
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      handleToggle(event);
-    }
+    className: "tree-node__toggle"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: isOpen ? 'expand_less' : 'expand_more',
     size: "small",
@@ -11678,11 +11800,7 @@ var TreeNode = function TreeNode(props) {
     icon: "hourglass_empty",
     size: "small"
   })), /*#__PURE__*/React.createElement("div", {
-    className: "label " + clickable,
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      handleSelect(event);
-    }
+    className: "label " + clickable
   }, /*#__PURE__*/React.createElement("span", {
     className: "tree-node__label-text"
   }, labelTxt), badge && /*#__PURE__*/React.createElement("span", {
@@ -11724,11 +11842,20 @@ var TreeItem = function TreeItem(props) {
     className = props.className,
     style = props.style,
     restProps = _objectWithoutPropertiesLoose(props, _excluded3);
-  var _useState6 = useState(false),
-    isDragging = _useState6[0],
-    setIsDragging = _useState6[1];
+  var _useState9 = useState(false),
+    isDragging = _useState9[0],
+    setIsDragging = _useState9[1];
   var itemRef = useRef(null);
 
+  // Get tree context
+  var treeContext = 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 = useCallback(function (event) {
     if (disabled) return;
@@ -11736,12 +11863,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 = 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 = useCallback(function (event) {
@@ -11808,11 +11943,11 @@ var TreeItem = function TreeItem(props) {
     onDrop: handleDrop,
     onDragOver: handleDragOver,
     title: tooltip
-  }, ariaAttributes, restProps), onCheck && /*#__PURE__*/React.createElement("div", {
+  }, ariaAttributes, restProps), (onCheck || multiSelect) && /*#__PURE__*/React.createElement("div", {
     className: "tree-item__checkbox"
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
-    checked: checked,
+    checked: multiSelect ? isMultiSelected : checked,
     onChange: handleCheck,
     disabled: disabled,
     "aria-label": "Select " + (typeof label === 'string' ? label : 'item')
@@ -11855,10 +11990,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 */