ywana-core8 0.1.82 → 0.1.84

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);
     };
 
     /**
@@ -11343,10 +11343,20 @@
       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
      */
@@ -11358,13 +11368,13 @@
         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,
@@ -11385,8 +11395,18 @@
         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
@@ -11399,8 +11419,70 @@
         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) {
@@ -11413,15 +11495,26 @@
         });
       }, [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(' ');
@@ -11469,11 +11562,23 @@
           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",
@@ -11483,29 +11588,17 @@
         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))));
     };
 
     /**
@@ -11541,19 +11634,44 @@
         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;
@@ -11561,14 +11679,13 @@
         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
@@ -11646,24 +11763,29 @@
         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",
@@ -11680,11 +11802,7 @@
         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", {
@@ -11726,11 +11844,20 @@
         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;
@@ -11738,12 +11865,20 @@
         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) {
@@ -11810,11 +11945,11 @@
         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')
@@ -11857,10 +11992,8 @@
       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 */