ywana-core8 0.1.84 → 0.1.86

package/dist/index.modern.js

@@ -6,7 +6,7 @@ import { Store, ReactNotifications } from 'react-notifications-component';
 import 'react-notifications-component/dist/theme.css';
 import moment$1 from 'moment';
 import { extendMoment } from 'moment-range';
-import 'moment/locale/es';
+import 'moment/locale/es.js';
 import axios from 'axios';
 import equal from 'deep-equal';
 
@@ -1348,7 +1348,7 @@ var PropTypes = propTypes;
  */
 var SiteContext = React.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();
@@ -1419,7 +1419,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 = useContext(SiteContext);
 
   // Memoize formatted value for performance
@@ -1805,7 +1805,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"];
 
 /**
@@ -1825,7 +1825,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 = useState([]),
     openSections = _useState[0],
     setOpenSections = _useState[1];
@@ -2071,6 +2071,340 @@ Accordion.defaultProps = {
   animated: true
 };
 
+/**
+ * Page Context
+ */
+var MenuContext = React.createContext({});
+
+/** 
+ * Menu 
+ **/
+var Menu = function Menu(props) {
+  var children = props.children;
+  return /*#__PURE__*/React.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 = 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.createElement(MenuContext.Provider, {
+    value: [open, setOpen]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "menu-icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: size,
+    clickable: true,
+    action: toggle
+  }), open ? /*#__PURE__*/React.createElement("menu", {
+    className: getAlignClass(align)
+  }, children) : null, open ? /*#__PURE__*/React.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 = useContext(MenuContext),
+    setOpen = _useContext[1];
+  function select() {
+    if (!disabled) {
+      if (onSelect) onSelect();
+      setOpen(false);
+    }
+  }
+  var style = disabled ? "disabled" : "";
+  var labelTxt = label ? /*#__PURE__*/React.createElement(Text, {
+    format: TEXTFORMATS.STRING
+  }, label) : null;
+  return /*#__PURE__*/React.createElement("li", {
+    className: "menu-item " + style,
+    onClick: select
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: size
+  }) : null, /*#__PURE__*/React.createElement("label", null, labelTxt), meta ? /*#__PURE__*/React.createElement("div", {
+    className: "meta"
+  }, meta) : null);
+};
+
+/**
+ * Menu Separator
+ */
+var MenuSeparator = function MenuSeparator(props) {
+  return /*#__PURE__*/React.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 = useState(false),
+    isOverflowing = _useState[0],
+    setIsOverflowing = _useState[1];
+  var _useState2 = useState(false),
+    isReady = _useState2[0],
+    setIsReady = _useState2[1];
+  var actionsRef = useRef(null);
+  var containerRef = useRef(null);
+
+  // Check if actions overflow the max width
+  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.createElement("div", _extends({
+    ref: containerRef,
+    className: containerClasses,
+    style: containerStyles
+  }, restProps), !isReady ?
+  /*#__PURE__*/
+  // Loading state - show a minimal placeholder
+  React.createElement("div", {
+    className: "actions-cell__loading",
+    style: {
+      width: '48px',
+      height: '32px'
+    }
+  }) : !isOverflowing ?
+  /*#__PURE__*/
+  // Show actions normally
+  React.createElement("div", {
+    ref: actionsRef,
+    className: "actions-cell__content",
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: gap,
+      flexWrap: 'nowrap'
+    }
+  }, actions) :
+  /*#__PURE__*/
+  // Show menu when overflowing
+  React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: actionsRef,
+    style: {
+      position: 'absolute',
+      visibility: 'hidden',
+      whiteSpace: 'nowrap',
+      display: 'flex',
+      alignItems: 'center',
+      gap: gap,
+      pointerEvents: 'none',
+      zIndex: -1000
+    }
+  }, actions), /*#__PURE__*/React.createElement(MenuIcon, {
+    icon: menuIcon,
+    size: menuSize,
+    align: menuAlign
+  }, extractActionItems(actions).map(function (item) {
+    return /*#__PURE__*/React.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) {
@@ -4863,96 +5197,6 @@ List.defaultProps = {
   role: 'list'
 };
 
-/**
- * Page Context
- */
-var MenuContext = React.createContext({});
-
-/** 
- * Menu 
- **/
-var Menu = function Menu(props) {
-  var children = props.children;
-  return /*#__PURE__*/React.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 = useState(false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  function toggle() {
-    setOpen(!open);
-  }
-  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
-    value: [open, setOpen]
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "menu-icon"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    size: size,
-    clickable: true,
-    action: toggle
-  }), open ? /*#__PURE__*/React.createElement("menu", {
-    className: "" + align
-  }, children) : null, open ? /*#__PURE__*/React.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 = useContext(MenuContext),
-    setOpen = _useContext[1];
-  function select() {
-    if (!disabled) {
-      if (onSelect) onSelect();
-      setOpen(false);
-    }
-  }
-  var style = disabled ? "disabled" : "";
-  var labelTxt = label ? /*#__PURE__*/React.createElement(Text, {
-    format: TEXTFORMATS.STRING
-  }, label) : null;
-  return /*#__PURE__*/React.createElement("li", {
-    className: "menu-item " + style,
-    onClick: select
-  }, icon ? /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    size: size
-  }) : null, /*#__PURE__*/React.createElement("label", null, labelTxt), meta ? /*#__PURE__*/React.createElement("div", {
-    className: "meta"
-  }, meta) : null);
-};
-
-/**
- * Menu Separator
- */
-var MenuSeparator = function MenuSeparator(props) {
-  return /*#__PURE__*/React.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 {
@@ -6561,6 +6805,11 @@ var DataTable = function DataTable(props) {
   var _useState2 = 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;
@@ -6641,15 +6890,16 @@ var DataTable = function DataTable(props) {
       }).length] : [2, 1],
       rowspan = _ref2[0],
       colspan = _ref2[1];
+    var headerClasses = (resizableStyle + " " + id).trim();
     return /*#__PURE__*/React.createElement("th", {
       key: id,
-      className: resizableStyle,
+      className: headerClasses,
       rowSpan: rowspan,
       colSpan: colspan
     }, /*#__PURE__*/React.createElement("div", null, id === "checked" && onCheckAll ? /*#__PURE__*/React.createElement(CheckBox, {
       onChange: checkAll,
       value: allChecked
-    }) : /*#__PURE__*/React.createElement(Text, {
+    }) : id === "actions" ? null : /*#__PURE__*/React.createElement(Text, {
       key: "th_" + id
     }, label), sortable ? /*#__PURE__*/React.createElement(SortIcon, {
       sortDir: sortDir[id],
@@ -6657,10 +6907,13 @@ var DataTable = function DataTable(props) {
         return changeSort(id);
       }
     }) : null));
-  }), /*#__PURE__*/React.createElement("th", {
+  }), hasInfoRows ? /*#__PURE__*/React.createElement("th", {
     rowSpan: 2,
-    colSpan: 1
-  })), /*#__PURE__*/React.createElement("tr", null, columns.filter(function (_ref3) {
+    colSpan: 1,
+    style: {
+      width: '3rem'
+    }
+  }) : null), /*#__PURE__*/React.createElement("tr", null, columns.filter(function (_ref3) {
     var type = _ref3.type;
     return type === TYPES$1.ENTITY;
   }).map(function (column) {
@@ -6683,7 +6936,8 @@ var DataTable = function DataTable(props) {
       onSelect: select,
       onDrop: moveRow,
       editable: editable,
-      expanded: expanded
+      expanded: expanded,
+      hasInfoRows: hasInfoRows
     });
   }) : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     colSpan: 1000
@@ -6764,7 +7018,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;
@@ -6788,16 +7044,16 @@ var DataTableRow$1 = function DataTableRow(props) {
       cell: row[column.id],
       editable: editable || column.editable
     });
-  }), row.info ? /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
+  }), hasInfoRows ? row.info ? /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
     icon: infoIcon,
     clickable: true,
     action: function action() {
       return toggleInfo(!isInfoOpen);
     }
-  })) : /*#__PURE__*/React.createElement("td", null)), row.info && isInfoOpen ? /*#__PURE__*/React.createElement("tr", {
+  })) : /*#__PURE__*/React.createElement("td", null) : null), row.info && isInfoOpen ? /*#__PURE__*/React.createElement("tr", {
     className: "table-row-info"
   }, /*#__PURE__*/React.createElement("td", {
-    colSpan: columns.length + 1
+    colSpan: columns.length + (hasInfoRows ? 1 : 0)
   }, isFunction$2(row.info) ? row.info() : row.info)) : null);
 };
 
@@ -8344,7 +8600,6 @@ var DataTable2 = function DataTable2(props) {
 
   // Handle tool selection
   var handleToolSelect = 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);
@@ -8361,12 +8616,12 @@ var DataTable2 = function DataTable2(props) {
   var defaultTools = 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
     }];
@@ -8447,12 +8702,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 = 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 = useCallback(function (array, sortObject) {
@@ -8931,7 +9193,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.createElement("strong", null, "Total") : null);
-  }), hasActionsColumn && /*#__PURE__*/React.createElement("td", {
+  }), hasActionsColumn && !columns.some(function (col) {
+    return col.id === 'actions';
+  }) && /*#__PURE__*/React.createElement("td", {
     className: "datatable2__summary-cell datatable2__summary-cell--actions"
   }));
 };
@@ -9132,9 +9396,11 @@ var DataTableHeader = function DataTableHeader(_ref8) {
       width: columnWidths[column.id],
       onResize: onColumnResize
     });
-  }), hasActionsColumn && /*#__PURE__*/React.createElement("th", {
+  }), hasActionsColumn && !columns.some(function (col) {
+    return col.id === 'actions';
+  }) && /*#__PURE__*/React.createElement("th", {
     className: "datatable2__actions-header"
-  }, "Actions")), filterable && /*#__PURE__*/React.createElement(DataTableFiltersRow, {
+  })), filterable && /*#__PURE__*/React.createElement(DataTableFiltersRow, {
     columns: columns,
     onClear: onClearFilters,
     showRowNumbers: showRowNumbers,
@@ -9382,6 +9648,34 @@ var DataTableRow = function DataTableRow(_ref1) {
         }
       }));
     }
+
+    // Manejar columna "actions" de manera especial
+    if (column.id === 'actions') {
+      return /*#__PURE__*/React.createElement("td", {
+        key: column.id,
+        className: "datatable2__actions-cell"
+      }, row.actions && Array.isArray(row.actions) && /*#__PURE__*/React.createElement("div", {
+        className: "datatable2__actions-container"
+      }, row.actions.map(function (action, index) {
+        return /*#__PURE__*/React.createElement("span", {
+          key: index,
+          className: "datatable2__action-item"
+        }, action);
+      })), row.info && /*#__PURE__*/React.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.createElement(DataTableCell, {
       key: column.id,
       column: column,
@@ -9393,7 +9687,9 @@ var DataTableRow = function DataTableRow(_ref1) {
       onCellEdit: onCellEdit,
       cellClassName: cellClassName
     });
-  }), hasActionsColumn && /*#__PURE__*/React.createElement("td", {
+  }), hasActionsColumn && !columns.some(function (col) {
+    return col.id === 'actions';
+  }) && /*#__PURE__*/React.createElement("td", {
     className: "datatable2__actions-cell"
   }, row.info && /*#__PURE__*/React.createElement(Icon, {
     icon: isExpanded ? "expand_less" : "expand_more",
@@ -9406,7 +9702,8 @@ var DataTableRow = function DataTableRow(_ref1) {
       if (onRowExpand) {
         onRowExpand(row.id);
       }
-    }
+    },
+    className: "datatable2__expand-icon"
   })));
 };
 
@@ -9569,7 +9866,9 @@ var DataTableFiltersRow = function DataTableFiltersRow(_ref11) {
       key: column.id,
       className: "datatable2__filter-cell"
     }, column.filterable ? renderFilterField(column) : null);
-  }), hasActionsColumn && /*#__PURE__*/React.createElement("td", {
+  }), hasActionsColumn && !columns.some(function (col) {
+    return col.id === 'actions';
+  }) && /*#__PURE__*/React.createElement("td", {
     className: "datatable2__filter-cell datatable2__filter-cell--actions"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: "close",
@@ -23133,5 +23432,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Accordion, ActionButton, Avatar, Button, Calendar, ChangeUserPasswordAction, ChangeUserPasswordDialog, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DataTable2, DateRange, DateRange2, Dialog, DropDown, DropDown2, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, _FoldersTreeView as FoldersTreeView, ForgetUserPasswordAction, Form, HTTPClient, Header, Header2, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane, LOGIN_API, LOGIN_CONTEXT, LOGIN_DICTIONARY, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MonthCalendar, MultiSelector, Page, PageContext, PageLink, PageProvider, PasswordEditor, PasswordField, PasswordField2, Planner, Planner2, Property, RadioButton, RadioGroup, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextArea2, TextField, TextField2, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UnlockUserAction, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction, useHashPage, validatePassword };
+export { Accordion, ActionButton, ActionsCell, Avatar, Button, Calendar, ChangeUserPasswordAction, ChangeUserPasswordDialog, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DataTable2, DateRange, DateRange2, Dialog, DropDown, DropDown2, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, _FoldersTreeView as FoldersTreeView, ForgetUserPasswordAction, Form, HTTPClient, Header, Header2, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane, LOGIN_API, LOGIN_CONTEXT, LOGIN_DICTIONARY, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MonthCalendar, MultiSelector, Page, PageContext, PageLink, PageProvider, PasswordEditor, PasswordField, PasswordField2, Planner, Planner2, Property, RadioButton, RadioGroup, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextArea2, TextField, TextField2, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UnlockUserAction, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction, useHashPage, validatePassword };
 //# sourceMappingURL=index.modern.js.map