ywana-core8 0.1.83 → 0.1.85

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('resumablejs'), require('react-switch'), require('react-notifications-component'), require('react-notifications-component/dist/theme.css'), require('moment'), require('moment-range'), require('moment/locale/es'), require('axios'), require('deep-equal')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'resumablejs', 'react-switch', 'react-notifications-component', 'react-notifications-component/dist/theme.css', 'moment', 'moment-range', 'moment/locale/es', 'axios', 'deep-equal'], factory) :
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('resumablejs'), require('react-switch'), require('react-notifications-component'), require('react-notifications-component/dist/theme.css'), require('moment'), require('moment-range'), require('moment/locale/es.js'), require('axios'), require('deep-equal')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'resumablejs', 'react-switch', 'react-notifications-component', 'react-notifications-component/dist/theme.css', 'moment', 'moment-range', 'moment/locale/es.js', 'axios', 'deep-equal'], factory) :
     (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.resumablejs, global.reactSwitch, global.reactNotificationsComponent, null, global.moment, global.momentRange, null, global.axios, global.deepEqual));
-})(this, (function (exports, materialDesignIcons_css, React, ResumableJS, RSwitch, reactNotificationsComponent, theme_css, moment$1, momentRange, es, axios, equal) {
+})(this, (function (exports, materialDesignIcons_css, React, ResumableJS, RSwitch, reactNotificationsComponent, theme_css, moment$1, momentRange, es_js, axios, equal) {
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -1350,7 +1350,7 @@
      */
     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();
@@ -1421,7 +1421,7 @@
         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
@@ -1807,7 +1807,7 @@
       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"];
 
     /**
@@ -1827,7 +1827,7 @@
         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];
@@ -2073,6 +2073,340 @@
       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) {
@@ -4865,96 +5199,6 @@
       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 {
@@ -6563,6 +6807,11 @@
       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;
@@ -6643,15 +6892,16 @@
           }).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],
@@ -6659,10 +6909,13 @@
             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) {
@@ -6685,7 +6938,8 @@
           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
@@ -6766,7 +7020,9 @@
         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;
@@ -6790,16 +7046,16 @@
           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);
     };
 
@@ -8346,7 +8602,6 @@
 
       // 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);
@@ -8363,12 +8618,12 @@
       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
         }];
@@ -8449,12 +8704,19 @@
         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) {
@@ -8933,7 +9195,9 @@
         }, 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"
       }));
     };
@@ -9134,9 +9398,11 @@
           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,
@@ -9384,6 +9650,34 @@
             }
           }));
         }
+
+        // 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,
@@ -9395,7 +9689,9 @@
           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",
@@ -9408,7 +9704,8 @@
           if (onRowExpand) {
             onRowExpand(row.id);
           }
-        }
+        },
+        className: "datatable2__expand-icon"
       })));
     };
 
@@ -9571,7 +9868,9 @@
           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",
@@ -11343,10 +11642,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 +11667,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 +11694,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 +11718,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 +11794,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 +11861,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 +11887,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 +11933,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 +11978,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 +12062,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 +12101,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 +12143,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 +12164,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 +12244,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 +12291,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 */
@@ -23004,6 +23436,7 @@
 
     exports.Accordion = Accordion;
     exports.ActionButton = ActionButton;
+    exports.ActionsCell = ActionsCell;
     exports.Avatar = Avatar;
     exports.Button = Button;
     exports.Calendar = Calendar;