@m4l/components 9.4.2 → 9.4.4

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -49,13 +49,15 @@ function DataGridProvider(props) {
   const resolvedDefaultConfig = defaultConfig ?? defaultUserColumns;
   const resolvedOnChangeConfig = onChangeConfig ?? onChangeUserColumns;
   const isFirstRender = useFirstRender([columns, id]);
-  const { viewModeState, setViewModeState, handleViewModeChange } = useViewMode({
-    id,
-    viewMode,
-    defaultViewMode,
-    onViewModeChange,
-    onChangeConfig: resolvedOnChangeConfig
-  });
+  const { viewModeState, setViewModeState, handleViewModeChange } = useViewMode(
+    {
+      id,
+      viewMode,
+      defaultViewMode,
+      onViewModeChange,
+      onChangeConfig: resolvedOnChangeConfig
+    }
+  );
   const { currentRowHeightVariant, setRowHeightVariant } = useRowHeight({
     rowHeights,
     rowHeaderHeights,
@@ -88,6 +90,29 @@ function DataGridProvider(props) {
   const [sortColumns, setSortColumns] = useState([]);
   useEffect(() => {
     const keys = new Set(columns.map((c) => c.key));
+    if (defaultViewMode === "cards" && cardsViewConfig === void 0) {
+      throw new Error(
+        `DataGridProvider: Cuando defaultViewMode="cards", es obligatorio proporcionar cardsViewConfig.
+
+        Ejemplo válido con columnsConfig:
+          defaultViewMode="cards"
+          cardsViewConfig={{
+            columnsConfig: [
+              { columnKey: 'name', showTitle: false },
+              { columnKey: 'email', showTitle: true }
+            ]
+          }}
+
+        Ejemplo válido con customRender:
+          defaultViewMode="cards"
+          cardsViewConfig={{
+            customRender: {
+              renderContent: (row) => <CustomCard row={row} />,
+              minHeight: 200
+            }
+          }}`
+      );
+    }
     if (sortSettings?.sortsColumns) {
       for (const sort of sortSettings.sortsColumns) {
         if (!keys.has(sort)) {
@@ -149,12 +174,14 @@ function DataGridProvider(props) {
         }
       }
     }
-  }, [columns, sortSettings, filterSettings, cardsViewConfig]);
+  }, [columns, sortSettings, filterSettings, cardsViewConfig, defaultViewMode]);
   const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
   useEffect(() => {
     if (isFirstRender) {
       setColumnsWidths(getColumnsWidth(id, columns, resolvedDefaultConfig));
-      setViewModeState(getViewMode(id, resolvedDefaultConfig, defaultViewMode) ?? "table");
+      setViewModeState(
+        getViewMode(id, resolvedDefaultConfig, defaultViewMode) ?? "table"
+      );
       updateConfigColumns(
         "table",
         getInitialColumnsConfig(
@@ -167,7 +194,7 @@ function DataGridProvider(props) {
         )
       );
       const finalCardsConfig = (() => {
-        if (resolvedDefaultConfig?.columnsConfigCards) {
+        if (resolvedDefaultConfig?.columnsConfigCards && resolvedDefaultConfig.columnsConfigCards.length > 0) {
           return resolvedDefaultConfig.columnsConfigCards;
         }
         if (cardsViewConfig?.columnsConfig) {
@@ -228,8 +255,11 @@ function DataGridProvider(props) {
       });
       getAllViewModes().forEach((viewModeParam) => {
         const currentConfig = updatedConfigs[viewModeParam];
+        const currentConfigKeys = new Set(
+          getConfigColumns(viewModeParam).map((c) => c.key)
+        );
         const newColumnsForView = columns.filter(
-          (column, index) => column.key !== getConfigColumns(viewModeParam)[index]?.key
+          (column) => !currentConfigKeys.has(column.key)
         );
         if (newColumnsForView.length > 0) {
           const colLength = currentConfig.length;

package/components/DataGrid/hooks/useChangeColumnsOrder/useChangeColumnsOrder.js

@@ -21,7 +21,11 @@ const useChangeColumnsOrder = ({
         0,
         reorderedConfig.splice(sourceColumnIndex, 1)[0]
       );
-      onChangeColumnsConfig(viewModeParam, reorderedConfig);
+      const configWithUpdatedIndexes = reorderedConfig.map((col, idx) => ({
+        ...col,
+        index: idx
+      }));
+      onChangeColumnsConfig(viewModeParam, configWithUpdatedIndexes);
     },
     [getConfigColumns, onChangeColumnsConfig]
   );

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -165,6 +165,10 @@ const ColumnsConfig = forwardRef((props, ref) => {
           newColumnConfig.visible = columnConfigRow.visible;
           newColumnConfig.frozen = columnConfigRow.frozen;
         }
+        const rowIndex = rows.findIndex((row) => row.key === columnConfig.key);
+        if (rowIndex > -1) {
+          newColumnConfig.index = rowIndex;
+        }
       }
       return newColumnConfig;
     }).sort((a, b) => getRowIndex(a) - getRowIndex(b));

package/components/DataGrid/types.d.ts

@@ -184,12 +184,16 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
     /**
-     * Modo por defecto de visualización
+     * Modo por defecto de visualización.
+     *
+     * IMPORTANTE: Si se especifica 'cards', es obligatorio proporcionar `cardsViewConfig`.
      */
     defaultViewMode?: ViewMode;
     /**
      * Configuración de la vista de "cards"
-     * Incluye habilitación, configuración de columnas y renderizado personalizado
+     * Incluye habilitación, configuración de columnas y renderizado personalizado.
+     *
+     * IMPORTANTE: Es obligatorio si `defaultViewMode` es 'cards'.
      */
     cardsViewConfig?: CardsViewConfig<TRow>;
     /**

package/components/formatters/IconsFormatter/constants.d.ts

@@ -1 +1,2 @@
 export declare const ICONS_FORMATTER_KEY_COMPONENT = "M4LIconsFormatter";
+export declare const ICONS_FORMATTER_CLASSES: Record<"icon" | "iconsContainer" | "iconClickeable", string>;

package/components/formatters/IconsFormatter/constants.js

@@ -1,4 +1,11 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { I as IconsFormatterSlots } from "./slots/IconsFormatterEnum.js";
 const ICONS_FORMATTER_KEY_COMPONENT = "M4LIconsFormatter";
+const ICONS_FORMATTER_CLASSES = getComponentClasses(
+  ICONS_FORMATTER_KEY_COMPONENT,
+  IconsFormatterSlots
+);
 export {
-  ICONS_FORMATTER_KEY_COMPONENT as I
+  ICONS_FORMATTER_CLASSES as I,
+  ICONS_FORMATTER_KEY_COMPONENT as a
 };

package/components/formatters/IconsFormatter/helpers/renderIcon.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { I as ICONS_FORMATTER_CLASSES } from "../constants.js";
 import { I as IconClickeableStyled, a as IconStyled } from "../slots/IconsFormatterSlots.js";
 function renderIcon(iconConfig, key) {
   const { iconUrl, onClick, tooltip, dataTestId, color, visible, size } = iconConfig;
@@ -13,6 +14,7 @@ function renderIcon(iconConfig, key) {
       onClick,
       tooltipContent: tooltip,
       instaceDataTestId: dataTestId,
+      className: onClick ? ICONS_FORMATTER_CLASSES.iconClickeable : ICONS_FORMATTER_CLASSES.icon,
       color,
       size
     },

package/components/formatters/IconsFormatter/slots/IconsFormatterSlots.js

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material";
-import { I as ICONS_FORMATTER_KEY_COMPONENT } from "../constants.js";
+import { a as ICONS_FORMATTER_KEY_COMPONENT } from "../constants.js";
 import { I as IconsFormatterSlots } from "./IconsFormatterEnum.js";
 import { i as iconsFormatterStyles } from "../IconsFormatter.styles.js";
 import { I as Icon } from "../../../Icon/Icon.js";

package/hooks/useDataGridPersistence/useDataGridPersistence.d.ts

@@ -6,8 +6,8 @@ import { ChangeConfig, IGridConfigExtended } from '../../components/DataGrid';
  * Retorna:
  * - `defaultConfig`: Configuración inicial cargada desde cookies
  * - `onChangeConfig`: Callback para persistir cambios en cookies
- * - `defaultUserColumns`: @deprecated Alias de defaultConfig
- * - `onChangeUserColumns`: @deprecated Alias de onChangeConfig
+ * - `defaultUserColumns`: (deprecated) Alias de defaultConfig
+ * - `onChangeUserColumns`: (deprecated) Alias de onChangeConfig
  */
 export declare const useDataGridPersistence: (props: UseDataGridPersistenceProps) => {
     defaultConfig: IGridConfigExtended;

package/hooks/useDataGridPersistence/useDataGridPersistence.js

@@ -2,34 +2,47 @@ import { useState, useCallback } from "react";
 import { g as getColumnsConfigCardsCookie, a as getColumnsConfigCookie } from "./helpers.js";
 import { C as COOKIE_VIEW_MODE, a as COOKIE_COLUMNS_CONFIG_CARDS, b as COOKIE_COLUMNS_CONFIG, c as COOKIE_COLUMNS_WIDTHS } from "./constants.js";
 import { u as useWindowToolsMF } from "../../components/WindowBase/hooks/useWindowToolsMF/index.js";
+const REASON_TO_COOKIE_MAP = {
+  columnsConfig: COOKIE_COLUMNS_CONFIG,
+  columnsConfigCards: COOKIE_COLUMNS_CONFIG_CARDS,
+  columnsWidths: COOKIE_COLUMNS_WIDTHS,
+  viewMode: COOKIE_VIEW_MODE
+};
 const useDataGridPersistence = (props) => {
   const { prefixCookie } = props;
   const { setCookie, getCookie } = useWindowToolsMF();
   const [defaultConfig] = useState(() => {
     return {
-      columnsWidths: getCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_WIDTHS}` : COOKIE_COLUMNS_WIDTHS) || {},
-      columnsConfig: getColumnsConfigCookie(getCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_CONFIG}` : COOKIE_COLUMNS_CONFIG)) || [],
-      columnsConfigCards: getColumnsConfigCardsCookie(getCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_CONFIG_CARDS}` : COOKIE_COLUMNS_CONFIG_CARDS)) || [],
-      viewMode: getCookie(prefixCookie ? `${prefixCookie}_${COOKIE_VIEW_MODE}` : COOKIE_VIEW_MODE) || "table"
+      columnsWidths: getCookie(
+        prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_WIDTHS}` : COOKIE_COLUMNS_WIDTHS
+      ) || {},
+      columnsConfig: getColumnsConfigCookie(
+        getCookie(
+          prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_CONFIG}` : COOKIE_COLUMNS_CONFIG
+        )
+      ) || [],
+      columnsConfigCards: getColumnsConfigCardsCookie(
+        getCookie(
+          prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_CONFIG_CARDS}` : COOKIE_COLUMNS_CONFIG_CARDS
+        )
+      ) || [],
+      viewMode: getCookie(
+        prefixCookie ? `${prefixCookie}_${COOKIE_VIEW_MODE}` : COOKIE_VIEW_MODE
+      )
     };
   });
-  const onChangeConfig = useCallback((newProps) => {
-    const { reason, userConfig } = newProps;
-    if (userConfig === void 0) {
-      return;
-    }
-    if (reason === "columnsConfig") {
-      setCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_CONFIG}` : COOKIE_COLUMNS_CONFIG, "window", userConfig);
-    } else if (reason === "columnsConfigCards") {
-      setCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_CONFIG_CARDS}` : COOKIE_COLUMNS_CONFIG_CARDS, "window", userConfig);
-    } else if (reason === "columnsWidths") {
-      setCookie(prefixCookie ? `${prefixCookie}_${COOKIE_COLUMNS_WIDTHS}` : COOKIE_COLUMNS_WIDTHS, "window", userConfig);
-    } else if (reason === "viewMode") {
-      setCookie(prefixCookie ? `${prefixCookie}_${COOKIE_VIEW_MODE}` : COOKIE_VIEW_MODE, "window", userConfig);
-    } else {
-      setCookie(prefixCookie ? `${prefixCookie}_${reason}` : reason, "window", userConfig);
-    }
-  }, [setCookie, prefixCookie]);
+  const onChangeConfig = useCallback(
+    (newProps) => {
+      const { reason, userConfig } = newProps;
+      if (userConfig === void 0) {
+        return;
+      }
+      const cookieName = REASON_TO_COOKIE_MAP[reason] ?? reason;
+      const fullCookieName = prefixCookie ? `${prefixCookie}_${cookieName}` : cookieName;
+      setCookie(fullCookieName, "window", userConfig);
+    },
+    [setCookie, prefixCookie]
+  );
   return {
     // Nuevos nombres
     defaultConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.2",
+  "version": "9.4.4",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {