ywana-core8 0.1.84 → 0.1.86

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",
@@ -23137,6 +23436,7 @@
 
     exports.Accordion = Accordion;
     exports.ActionButton = ActionButton;
+    exports.ActionsCell = ActionsCell;
     exports.Avatar = Avatar;
     exports.Button = Button;
     exports.Calendar = Calendar;