ywana-core8 0.1.83 → 0.1.85

package/dist/index.cjs

@@ -6,7 +6,7 @@ var reactNotificationsComponent = require('react-notifications-component');
 require('react-notifications-component/dist/theme.css');
 var moment$1 = require('moment');
 var momentRange = require('moment-range');
-require('moment/locale/es');
+require('moment/locale/es.js');
 var axios = require('axios');
 var equal = require('deep-equal');
 
@@ -1357,7 +1357,7 @@ var PropTypes = propTypes;
  */
 var SiteContext = React__default["default"].createContext({});
 
-var _excluded$h = ["format", "children", "className", "size", "weight", "color", "align", "transform", "decoration", "truncate", "maxLength", "locale", "currency", "minimumFractionDigits", "maximumFractionDigits", "dateStyle", "timeStyle", "fallback", "loading", "skeleton", "copyable", "selectable", "as", "style", "onClick"];
+var _excluded$i = ["format", "children", "className", "size", "weight", "color", "align", "transform", "decoration", "truncate", "maxLength", "locale", "currency", "minimumFractionDigits", "maximumFractionDigits", "dateStyle", "timeStyle", "fallback", "loading", "skeleton", "copyable", "selectable", "as", "style", "onClick"];
 function _catch$d(body, recover) {
   try {
     var result = body();
@@ -1428,7 +1428,7 @@ var Text = function Text(props) {
     as = _props$as === void 0 ? 'span' : _props$as,
     style = props.style,
     onClick = props.onClick,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded$h);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$i);
   var site = React.useContext(SiteContext);
 
   // Memoize formatted value for performance
@@ -1814,7 +1814,7 @@ Icon.defaultProps = {
   className: ''
 };
 
-var _excluded$g = ["className", "sections", "disabled", "allowMultiple", "animated", "onCheck", "onToggle", "onSectionChange", "ariaLabel"],
+var _excluded$h = ["className", "sections", "disabled", "allowMultiple", "animated", "onCheck", "onToggle", "onSectionChange", "ariaLabel"],
   _excluded2$9 = ["checked", "icon", "title", "subtitle", "open", "disabled", "animated", "sectionIndex", "onToggle", "onCheck", "toolbar", "info", "children", "ariaLabel"];
 
 /**
@@ -1834,7 +1834,7 @@ var Accordion = function Accordion(props) {
     onToggle = props.onToggle,
     onSectionChange = props.onSectionChange,
     ariaLabel = props.ariaLabel,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded$g);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$h);
   var _useState = React.useState([]),
     openSections = _useState[0],
     setOpenSections = _useState[1];
@@ -2080,6 +2080,340 @@ Accordion.defaultProps = {
   animated: true
 };
 
+/**
+ * Page Context
+ */
+var MenuContext = React__default["default"].createContext({});
+
+/** 
+ * Menu 
+ **/
+var Menu = function Menu(props) {
+  var children = props.children;
+  return /*#__PURE__*/React__default["default"].createElement("ul", null, children);
+};
+
+/**
+ * Menu Icon
+ */
+var MenuIcon = function MenuIcon(props) {
+  var _props$icon = props.icon,
+    icon = _props$icon === void 0 ? "more_vert" : _props$icon,
+    children = props.children,
+    _props$align = props.align,
+    align = _props$align === void 0 ? "left" : _props$align,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "normal" : _props$size;
+  var _useState = React.useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  function toggle() {
+    setOpen(!open);
+  }
+
+  // Convertir valores de align a clases CSS
+  var getAlignClass = function getAlignClass(alignment) {
+    switch (alignment) {
+      case 'right':
+        return 'alignRight';
+      case 'left':
+        return 'alignLeft';
+      default:
+        return 'alignLeft';
+      // Por defecto a la izquierda
+    }
+  };
+  return /*#__PURE__*/React__default["default"].createElement(MenuContext.Provider, {
+    value: [open, setOpen]
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "menu-icon"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: size,
+    clickable: true,
+    action: toggle
+  }), open ? /*#__PURE__*/React__default["default"].createElement("menu", {
+    className: getAlignClass(align)
+  }, children) : null, open ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "overlay",
+    onClick: toggle
+  }) : null));
+};
+
+/**
+ * Menu Item
+ */
+var MenuItem = function MenuItem(props) {
+  var icon = props.icon,
+    label = props.label,
+    meta = props.meta,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$size2 = props.size,
+    size = _props$size2 === void 0 ? "normal" : _props$size2,
+    onSelect = props.onSelect;
+  var _useContext = React.useContext(MenuContext),
+    setOpen = _useContext[1];
+  function select() {
+    if (!disabled) {
+      if (onSelect) onSelect();
+      setOpen(false);
+    }
+  }
+  var style = disabled ? "disabled" : "";
+  var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, {
+    format: TEXTFORMATS.STRING
+  }, label) : null;
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: "menu-item " + style,
+    onClick: select
+  }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: size
+  }) : null, /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt), meta ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "meta"
+  }, meta) : null);
+};
+
+/**
+ * Menu Separator
+ */
+var MenuSeparator = function MenuSeparator(props) {
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: "menu-separator"
+  });
+};
+
+var _excluded$g = ["actions", "maxWidth", "menuIcon", "menuAlign", "menuSize", "className", "style", "gap"];
+
+/**
+ * ActionsCell - Componente reutilizable para manejar acciones con overflow automático
+ * 
+ * Características:
+ * - Detecta automáticamente si las acciones exceden el ancho máximo
+ * - Convierte automáticamente a menú desplegable cuando es necesario
+ * - Extrae acciones de componentes React para crear elementos de menú
+ * - Reutilizable en tablas, headers, accordions, listas, etc.
+ */
+var ActionsCell = function ActionsCell(_ref) {
+  var actions = _ref.actions,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
+    _ref$menuIcon = _ref.menuIcon,
+    menuIcon = _ref$menuIcon === void 0 ? "more_horiz" : _ref$menuIcon,
+    _ref$menuAlign = _ref.menuAlign,
+    menuAlign = _ref$menuAlign === void 0 ? "left" : _ref$menuAlign,
+    _ref$menuSize = _ref.menuSize,
+    menuSize = _ref$menuSize === void 0 ? "small" : _ref$menuSize,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? "4px" : _ref$gap,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  var _useState = React.useState(false),
+    isOverflowing = _useState[0],
+    setIsOverflowing = _useState[1];
+  var _useState2 = React.useState(false),
+    isReady = _useState2[0],
+    setIsReady = _useState2[1];
+  var actionsRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+
+  // Check if actions overflow the max width
+  React.useEffect(function () {
+    var checkOverflow = function checkOverflow() {
+      if (actions) {
+        try {
+          // Create a temporary element to measure the actual width needed
+          var tempDiv = document.createElement('div');
+          tempDiv.style.cssText = "\n                        position: absolute;\n                        visibility: hidden;\n                        white-space: nowrap;\n                        display: flex;\n                        align-items: center;\n                        gap: " + gap + ";\n                        pointer-events: none;\n                        z-index: -1000;\n                        top: -1000px;\n                        left: -1000px;\n                    ";
+
+          // Create a wrapper to render the actions
+          var actionsWrapper = document.createElement('div');
+          actionsWrapper.style.cssText = "\n                        display: flex;\n                        align-items: center;\n                        gap: " + gap + ";\n                        flex-wrap: nowrap;\n                    ";
+
+          // We need to render the React element to measure it properly
+          // For now, we'll use a heuristic based on the number of actions
+          var estimatedWidth = 0;
+          if (actions.props && actions.props.children) {
+            var children = Array.isArray(actions.props.children) ? actions.props.children : [actions.props.children];
+            children.forEach(function (child) {
+              if (child && child.props) {
+                // Estimate width based on button content
+                var hasText = child.props.children && typeof child.props.children === 'string';
+                var textLength = hasText ? child.props.children.length : 0;
+                if (hasText) {
+                  // Button with text: ~8px per character + 32px for icon + padding
+                  estimatedWidth += textLength * 8 + 32 + 16;
+                } else {
+                  // Icon-only button: ~32px + padding
+                  estimatedWidth += 32 + 8;
+                }
+              }
+            });
+
+            // Add gap between buttons
+            var gapWidth = parseInt(gap) || 4;
+            estimatedWidth += (children.length - 1) * gapWidth;
+          } else {
+            // Single action
+            var hasText = actions.props && actions.props.children && typeof actions.props.children === 'string';
+            var textLength = hasText ? actions.props.children.length : 0;
+            if (hasText) {
+              estimatedWidth = textLength * 8 + 32 + 16;
+            } else {
+              estimatedWidth = 32 + 8;
+            }
+          }
+
+          // Check if it overflows the max width (with some padding for safety)
+          var shouldOverflow = estimatedWidth > maxWidth - 8; // 8px for container padding
+          setIsOverflowing(shouldOverflow);
+          setIsReady(true);
+        } catch (error) {
+          console.warn('ActionsCell: Error measuring width', error);
+          setIsOverflowing(false);
+          setIsReady(true);
+        }
+      } else {
+        setIsReady(true);
+      }
+    };
+
+    // Use a small delay to ensure DOM is ready
+    var timer = setTimeout(checkOverflow, 10);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [actions, maxWidth, gap]);
+
+  // Extract action items from React elements for menu
+  var extractActionItems = function extractActionItems(actionsElement) {
+    if (!actionsElement) return [];
+    var items = [];
+    try {
+      // If it's a div with children (multiple actions)
+      if (actionsElement.props && actionsElement.props.children) {
+        var children = Array.isArray(actionsElement.props.children) ? actionsElement.props.children : [actionsElement.props.children];
+        children.forEach(function (child, index) {
+          if (child && child.props) {
+            var _child$props = child.props,
+              icon = _child$props.icon,
+              label = _child$props.children,
+              onClick = _child$props.onClick,
+              disabled = _child$props.disabled,
+              title = _child$props.title;
+            items.push({
+              id: "action-" + index,
+              icon: icon,
+              label: title || label || "Action " + (index + 1),
+              onSelect: onClick,
+              disabled: disabled
+            });
+          }
+        });
+      } else if (actionsElement.props) {
+        // Single action
+        var _actionsElement$props = actionsElement.props,
+          icon = _actionsElement$props.icon,
+          label = _actionsElement$props.children,
+          onClick = _actionsElement$props.onClick,
+          disabled = _actionsElement$props.disabled,
+          title = _actionsElement$props.title;
+        items.push({
+          id: 'action-0',
+          icon: icon,
+          label: title || label || 'Action',
+          onSelect: onClick,
+          disabled: disabled
+        });
+      }
+    } catch (error) {
+      console.warn('ActionsCell: Error extracting action items', error);
+    }
+    return items;
+  };
+  if (!actions) return null;
+  var containerClasses = ['actions-cell', className].filter(Boolean).join(' ');
+  var containerStyles = _extends({
+    maxWidth: maxWidth + "px",
+    width: isOverflowing ? 'auto' : 'fit-content'
+  }, style);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    ref: containerRef,
+    className: containerClasses,
+    style: containerStyles
+  }, restProps), !isReady ?
+  /*#__PURE__*/
+  // Loading state - show a minimal placeholder
+  React__default["default"].createElement("div", {
+    className: "actions-cell__loading",
+    style: {
+      width: '48px',
+      height: '32px'
+    }
+  }) : !isOverflowing ?
+  /*#__PURE__*/
+  // Show actions normally
+  React__default["default"].createElement("div", {
+    ref: actionsRef,
+    className: "actions-cell__content",
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: gap,
+      flexWrap: 'nowrap'
+    }
+  }, actions) :
+  /*#__PURE__*/
+  // Show menu when overflowing
+  React__default["default"].createElement(Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: actionsRef,
+    style: {
+      position: 'absolute',
+      visibility: 'hidden',
+      whiteSpace: 'nowrap',
+      display: 'flex',
+      alignItems: 'center',
+      gap: gap,
+      pointerEvents: 'none',
+      zIndex: -1000
+    }
+  }, actions), /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
+    icon: menuIcon,
+    size: menuSize,
+    align: menuAlign
+  }, extractActionItems(actions).map(function (item) {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+      key: item.id,
+      icon: item.icon,
+      label: item.label,
+      onSelect: item.onSelect,
+      disabled: item.disabled
+    });
+  }))));
+};
+ActionsCell.propTypes = {
+  /** Acciones a mostrar (componentes React) */
+  actions: PropTypes.node,
+  /** Ancho máximo antes de convertirse en menú */
+  maxWidth: PropTypes.number,
+  /** Icono del menú desplegable */
+  menuIcon: PropTypes.string,
+  /** Alineación del menú (left: se abre hacia la izquierda, right: hacia la derecha, center: centrado) */
+  menuAlign: PropTypes.oneOf(['left', 'right', 'center']),
+  /** Tamaño del icono del menú */
+  menuSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Clase CSS adicional */
+  className: PropTypes.string,
+  /** Estilos adicionales */
+  style: PropTypes.object,
+  /** Espacio entre acciones */
+  gap: PropTypes.string
+};
+
 var _excluded$f = ["id", "label", "icon", "action", "disabled", "loading", "outlined", "raised", "size", "type", "className", "ariaLabel", "tooltip", "form", "onClick", "onFocus", "onBlur", "onKeyDown"],
   _excluded2$8 = ["states", "state", "className", "disabled", "onStateChange"];
 function _catch$c(body, recover) {
@@ -4872,96 +5206,6 @@ List.defaultProps = {
   role: 'list'
 };
 
-/**
- * Page Context
- */
-var MenuContext = React__default["default"].createContext({});
-
-/** 
- * Menu 
- **/
-var Menu = function Menu(props) {
-  var children = props.children;
-  return /*#__PURE__*/React__default["default"].createElement("ul", null, children);
-};
-
-/**
- * Menu Icon
- */
-var MenuIcon = function MenuIcon(props) {
-  var _props$icon = props.icon,
-    icon = _props$icon === void 0 ? "more_vert" : _props$icon,
-    children = props.children,
-    align = props.align,
-    _props$size = props.size,
-    size = _props$size === void 0 ? "normal" : _props$size;
-  var _useState = React.useState(false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  function toggle() {
-    setOpen(!open);
-  }
-  return /*#__PURE__*/React__default["default"].createElement(MenuContext.Provider, {
-    value: [open, setOpen]
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "menu-icon"
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: icon,
-    size: size,
-    clickable: true,
-    action: toggle
-  }), open ? /*#__PURE__*/React__default["default"].createElement("menu", {
-    className: "" + align
-  }, children) : null, open ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "overlay",
-    onClick: toggle
-  }) : null));
-};
-
-/**
- * Menu Item
- */
-var MenuItem = function MenuItem(props) {
-  var icon = props.icon,
-    label = props.label,
-    meta = props.meta,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$size2 = props.size,
-    size = _props$size2 === void 0 ? "normal" : _props$size2,
-    onSelect = props.onSelect;
-  var _useContext = React.useContext(MenuContext),
-    setOpen = _useContext[1];
-  function select() {
-    if (!disabled) {
-      if (onSelect) onSelect();
-      setOpen(false);
-    }
-  }
-  var style = disabled ? "disabled" : "";
-  var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, {
-    format: TEXTFORMATS.STRING
-  }, label) : null;
-  return /*#__PURE__*/React__default["default"].createElement("li", {
-    className: "menu-item " + style,
-    onClick: select
-  }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: icon,
-    size: size
-  }) : null, /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt), meta ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "meta"
-  }, meta) : null);
-};
-
-/**
- * Menu Separator
- */
-var MenuSeparator = function MenuSeparator(props) {
-  return /*#__PURE__*/React__default["default"].createElement("li", {
-    className: "menu-separator"
-  });
-};
-
 var _excluded$9 = ["id", "className", "label", "name", "initial", "value", "editable", "onChange", "options", "type", "disabled", "required", "placeholder", "multiline", "rows", "maxLength", "minLength", "pattern", "validateValue", "size", "variant", "layout", "nameWidth", "copyable", "error", "helperText", "onFocus", "onBlur", "onValidationError", "clearable", "readOnly", "loading", "skeleton", "style"];
 function _catch$a(body, recover) {
   try {
@@ -6570,6 +6814,11 @@ var DataTable = function DataTable(props) {
   var _useState2 = React.useState(false),
     allChecked = _useState2[0],
     setAllChecked = _useState2[1];
+
+  // Detectar si alguna fila tiene info para mostrar la columna de expansión
+  var hasInfoRows = rows.some(function (row) {
+    return row.info;
+  });
   function changeSort(id) {
     if (multisort) {
       var _Object$assign;
@@ -6650,15 +6899,16 @@ var DataTable = function DataTable(props) {
       }).length] : [2, 1],
       rowspan = _ref2[0],
       colspan = _ref2[1];
+    var headerClasses = (resizableStyle + " " + id).trim();
     return /*#__PURE__*/React__default["default"].createElement("th", {
       key: id,
-      className: resizableStyle,
+      className: headerClasses,
       rowSpan: rowspan,
       colSpan: colspan
     }, /*#__PURE__*/React__default["default"].createElement("div", null, id === "checked" && onCheckAll ? /*#__PURE__*/React__default["default"].createElement(CheckBox, {
       onChange: checkAll,
       value: allChecked
-    }) : /*#__PURE__*/React__default["default"].createElement(Text, {
+    }) : id === "actions" ? null : /*#__PURE__*/React__default["default"].createElement(Text, {
       key: "th_" + id
     }, label), sortable ? /*#__PURE__*/React__default["default"].createElement(SortIcon, {
       sortDir: sortDir[id],
@@ -6666,10 +6916,13 @@ var DataTable = function DataTable(props) {
         return changeSort(id);
       }
     }) : null));
-  }), /*#__PURE__*/React__default["default"].createElement("th", {
+  }), hasInfoRows ? /*#__PURE__*/React__default["default"].createElement("th", {
     rowSpan: 2,
-    colSpan: 1
-  })), /*#__PURE__*/React__default["default"].createElement("tr", null, columns.filter(function (_ref3) {
+    colSpan: 1,
+    style: {
+      width: '3rem'
+    }
+  }) : null), /*#__PURE__*/React__default["default"].createElement("tr", null, columns.filter(function (_ref3) {
     var type = _ref3.type;
     return type === TYPES$1.ENTITY;
   }).map(function (column) {
@@ -6692,7 +6945,8 @@ var DataTable = function DataTable(props) {
       onSelect: select,
       onDrop: moveRow,
       editable: editable,
-      expanded: expanded
+      expanded: expanded,
+      hasInfoRows: hasInfoRows
     });
   }) : /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
     colSpan: 1000
@@ -6773,7 +7027,9 @@ var DataTableRow$1 = function DataTableRow(props) {
     onSelect = props.onSelect,
     editable = props.editable,
     _props$expanded2 = props.expanded,
-    expanded = _props$expanded2 === void 0 ? false : _props$expanded2;
+    expanded = _props$expanded2 === void 0 ? false : _props$expanded2,
+    _props$hasInfoRows = props.hasInfoRows,
+    hasInfoRows = _props$hasInfoRows === void 0 ? false : _props$hasInfoRows;
   var _row$selected = row.selected,
     selected = _row$selected === void 0 ? false : _row$selected,
     className = row.className;
@@ -6797,16 +7053,16 @@ var DataTableRow$1 = function DataTableRow(props) {
       cell: row[column.id],
       editable: editable || column.editable
     });
-  }), row.info ? /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }), hasInfoRows ? row.info ? /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: infoIcon,
     clickable: true,
     action: function action() {
       return toggleInfo(!isInfoOpen);
     }
-  })) : /*#__PURE__*/React__default["default"].createElement("td", null)), row.info && isInfoOpen ? /*#__PURE__*/React__default["default"].createElement("tr", {
+  })) : /*#__PURE__*/React__default["default"].createElement("td", null) : null), row.info && isInfoOpen ? /*#__PURE__*/React__default["default"].createElement("tr", {
     className: "table-row-info"
   }, /*#__PURE__*/React__default["default"].createElement("td", {
-    colSpan: columns.length + 1
+    colSpan: columns.length + (hasInfoRows ? 1 : 0)
   }, isFunction$2(row.info) ? row.info() : row.info)) : null);
 };
 
@@ -8353,7 +8609,6 @@ var DataTable2 = function DataTable2(props) {
 
   // Handle tool selection
   var handleToolSelect = React.useCallback(function (toolId) {
-    console.log('handleToolSelect called with toolId:', toolId);
     setActiveTool(function (prev) {
       var newTool = prev === toolId ? null : toolId;
       console.log('Tool changed from', prev, 'to', newTool);
@@ -8370,12 +8625,12 @@ var DataTable2 = function DataTable2(props) {
   var defaultTools = React.useMemo(function () {
     return [{
       id: 'columns',
-      icon: 'person',
+      icon: 'view_column',
       title: 'Configurar columnas',
       component: ColumnsPanel
     }, {
       id: 'export',
-      icon: 'person',
+      icon: 'ios_share',
       title: 'Exportar datos',
       component: ExportPanel
     }];
@@ -8456,12 +8711,19 @@ var DataTable2 = function DataTable2(props) {
     return ['datatable2', "datatable2--" + size, "datatable2--" + density, "datatable2--" + theme, readability && 'datatable2--readable', readability && "datatable2--readable-" + readability, striped && 'datatable2--striped', bordered && 'datatable2--bordered', !hover && 'datatable2--no-hover', loading && 'datatable2--loading', skeleton && 'datatable2--skeleton', className].filter(Boolean).join(' ');
   }, [size, density, theme, readability, striped, bordered, hover, loading, skeleton, className]);
 
-  // Check if any row has actions column
+  // Check if any row has actions column or if there's an actions column defined
   var hasActionsColumn = React.useMemo(function () {
-    return rows.some(function (row) {
+    var hasActionsColumnDefined = columns.some(function (col) {
+      return col.id === 'actions';
+    });
+    var hasRowsWithActions = rows.some(function (row) {
+      return row.actions && Array.isArray(row.actions);
+    });
+    var hasRowsWithInfo = rows.some(function (row) {
       return row.info;
-    }) || filterable;
-  }, [rows, filterable]);
+    });
+    return hasActionsColumnDefined || hasRowsWithActions || hasRowsWithInfo || filterable;
+  }, [columns, rows, filterable]);
 
   // Función de ordenamiento (similar a table.js)
   var multiSort = React.useCallback(function (array, sortObject) {
@@ -8940,7 +9202,9 @@ var DataTableSummaryRow = function DataTableSummaryRow(_ref5) {
     }, summary.formatted) :
     // Mostrar "Total" en la primera columna si no hay checkboxes ni números
     index === 0 && !shouldShowCheckboxes && !showRowNumbers ? /*#__PURE__*/React__default["default"].createElement("strong", null, "Total") : null);
-  }), hasActionsColumn && /*#__PURE__*/React__default["default"].createElement("td", {
+  }), hasActionsColumn && !columns.some(function (col) {
+    return col.id === 'actions';
+  }) && /*#__PURE__*/React__default["default"].createElement("td", {
     className: "datatable2__summary-cell datatable2__summary-cell--actions"
   }));
 };
@@ -9141,9 +9405,11 @@ var DataTableHeader = function DataTableHeader(_ref8) {
       width: columnWidths[column.id],
       onResize: onColumnResize
     });
-  }), hasActionsColumn && /*#__PURE__*/React__default["default"].createElement("th", {
+  }), hasActionsColumn && !columns.some(function (col) {
+    return col.id === 'actions';
+  }) && /*#__PURE__*/React__default["default"].createElement("th", {
     className: "datatable2__actions-header"
-  }, "Actions")), filterable && /*#__PURE__*/React__default["default"].createElement(DataTableFiltersRow, {
+  })), filterable && /*#__PURE__*/React__default["default"].createElement(DataTableFiltersRow, {
     columns: columns,
     onClear: onClearFilters,
     showRowNumbers: showRowNumbers,
@@ -9391,6 +9657,34 @@ var DataTableRow = function DataTableRow(_ref1) {
         }
       }));
     }
+
+    // Manejar columna "actions" de manera especial
+    if (column.id === 'actions') {
+      return /*#__PURE__*/React__default["default"].createElement("td", {
+        key: column.id,
+        className: "datatable2__actions-cell"
+      }, row.actions && Array.isArray(row.actions) && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "datatable2__actions-container"
+      }, row.actions.map(function (action, index) {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
+          key: index,
+          className: "datatable2__action-item"
+        }, action);
+      })), row.info && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: isExpanded ? "expand_less" : "expand_more",
+        size: "small",
+        clickable: true,
+        action: function action() {
+          if (row.info && typeof row.info === 'object' && row.info.action) {
+            row.info.action(row);
+          }
+          if (onRowExpand) {
+            onRowExpand(row.id);
+          }
+        },
+        className: "datatable2__expand-icon"
+      }));
+    }
     return /*#__PURE__*/React__default["default"].createElement(DataTableCell, {
       key: column.id,
       column: column,
@@ -9402,7 +9696,9 @@ var DataTableRow = function DataTableRow(_ref1) {
       onCellEdit: onCellEdit,
       cellClassName: cellClassName
     });
-  }), hasActionsColumn && /*#__PURE__*/React__default["default"].createElement("td", {
+  }), hasActionsColumn && !columns.some(function (col) {
+    return col.id === 'actions';
+  }) && /*#__PURE__*/React__default["default"].createElement("td", {
     className: "datatable2__actions-cell"
   }, row.info && /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: isExpanded ? "expand_less" : "expand_more",
@@ -9415,7 +9711,8 @@ var DataTableRow = function DataTableRow(_ref1) {
       if (onRowExpand) {
         onRowExpand(row.id);
       }
-    }
+    },
+    className: "datatable2__expand-icon"
   })));
 };
 
@@ -9578,7 +9875,9 @@ var DataTableFiltersRow = function DataTableFiltersRow(_ref11) {
       key: column.id,
       className: "datatable2__filter-cell"
     }, column.filterable ? renderFilterField(column) : null);
-  }), hasActionsColumn && /*#__PURE__*/React__default["default"].createElement("td", {
+  }), hasActionsColumn && !columns.some(function (col) {
+    return col.id === 'actions';
+  }) && /*#__PURE__*/React__default["default"].createElement("td", {
     className: "datatable2__filter-cell datatable2__filter-cell--actions"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: "close",
@@ -11350,10 +11649,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 +11674,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 +11701,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 +11725,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 +11801,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 +11868,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 +11894,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 +11940,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 +11985,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 +12069,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 +12108,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 +12150,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 +12171,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 +12251,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 +12298,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 */
@@ -23011,6 +23443,7 @@ var isFunction = function isFunction(value) {
 
 exports.Accordion = Accordion;
 exports.ActionButton = ActionButton;
+exports.ActionsCell = ActionsCell;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Calendar = Calendar;