@m4l/components 9.4.5 → 9.4.6-JT19122025.beta.1

package/components/DataGrid/components/DataGrid/DataGrid.d.ts

@@ -0,0 +1,28 @@
+import { DataGridProps, RowKey } from '../../types';
+/**
+ * DataGrid es un componente para mostrar datos en formato tabla o cards.
+ *
+ * Características principales:
+ * - Vista de tabla con columnas configurables
+ * - Vista de cards para visualización compacta
+ * - Paginación integrada
+ * - Filtros locales y externos
+ * - Ordenamiento de columnas
+ * - Selección de filas (checkbox/radio)
+ * - Configuración de densidad (compact/standard/confortable)
+ * - Persistencia de configuración del usuario
+ * @example
+ * ```tsx
+ * <DataGrid
+ *   id="my-grid"
+ *   rows={data}
+ *   columns={columns}
+ *   rowKeyGetter={(row) => row.id}
+ *   actionsProps={{
+ *     withPager: true,
+ *     pagerOptions: { totalRecords: 100 }
+ *   }}
+ * />
+ * ```
+ */
+export declare function DataGrid<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: DataGridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/{DataGrid.js → components/DataGrid/DataGrid.js}

@@ -1,18 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { H as HeaderActions } from "./subcomponents/HeaderActions/index.js";
-import { F as FilterProvider } from "./contexts/FilterContext/index.js";
-import { D as DataGridProvider } from "./contexts/DataGridContext/index.js";
-import { T as TEST_PROP_COLUMNS } from "./types.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { g as getNameDataTestId } from "../../test/getNameDataTestId.js";
-import { T as TEST_SKELETON, D as DATAGRID_PREFIX_NAME } from "./constants.js";
-import { D as DataGridRootStyled, C as CustomHeaderStyled } from "./slots/DataGridSlot.js";
-import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { useRef } from "react";
-import { C as ControlNavigate } from "./subcomponents/ControlNavigate/ControlNavigate.js";
 import { useModuleSkeleton } from "@m4l/core";
-import { R as RenderContent } from "./subcomponents/RenderContent/index.js";
-import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import { T as TEST_PROP_COLUMNS } from "../../types.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
+import { a as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
+import { T as TEST_SKELETON, D as DATAGRID_PREFIX_NAME } from "../../constants.js";
+import { D as DataGridRootStyled, C as CustomHeaderStyled } from "../../slots/DataGridSlot.js";
+import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { D as DataGridProvider } from "../../contexts/DataGridContext/DataGridContext.js";
+import { F as FilterProvider } from "../../contexts/FilterContext/FilterContext.js";
+import { H as HeaderActions } from "../../subcomponents/HeaderActions/HeaderActions.js";
+import { R as RenderContent } from "../../views/adapters/RenderContent/RenderContent.js";
+import { C as ControlNavigate } from "../../subcomponents/ControlNavigate/ControlNavigate.js";
 function DataGrid(props) {
   const {
     id,
@@ -37,9 +37,7 @@ function DataGrid(props) {
     defaultConfig,
     onChangeConfig,
     defaultUserColumns,
-    // deprecated
     onChangeUserColumns,
-    // deprecated
     size,
     externalSortSettings,
     externalFilterSettings,
@@ -50,9 +48,7 @@ function DataGrid(props) {
   const {
     withSettings,
     settingsProps,
-    // TotalRecords
     withRowsCount,
-    // WithLocalFilters
     withLocalFilters,
     leftActions,
     rightActions,

package/components/DataGrid/components/DataGrid/index.d.ts

@@ -0,0 +1 @@
+export { DataGrid } from './DataGrid';

package/components/DataGrid/components/index.d.ts

@@ -0,0 +1 @@
+export { DataGrid } from './DataGrid';

package/components/DataGrid/contexts/DataGridContext/DataGridContext.d.ts

@@ -0,0 +1,9 @@
+import { RowKey } from '../../types';
+import { DataGridContextProps, DataGridProviderProps } from './types';
+declare const DataGridContext: import('react').Context<DataGridContextProps<any, any, any> | null>;
+/**
+ * Proveedor que se encarga de manejar el estado de las columnas y las filas
+ * del DataGrid.
+ */
+declare function DataGridProvider<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: DataGridProviderProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;
+export { DataGridProvider, DataGridContext };

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

@@ -0,0 +1,368 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, createContext } from "react";
+import { useFirstRender } from "@m4l/graphics";
+import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
+import { a as DATAGRID_ROW_HEIGHTS, b as DATAGRID_ROW_HEADER_HEIGHTS, D as DATAGRID_PREFIX_NAME } from "../../constants.js";
+import { C as ControlNavigateSlots, a as ColumnsConfigSlots, T as TextEditorSlots, b as TableSlots, R as RowsCountSlots, A as ActionsSlots, D as DataGridSlots } from "../../slots/DataGridEnum.js";
+import { deepEqual } from "fast-equals";
+import { u as useViewMode } from "../../hooks/useViewMode/useViewMode.js";
+import { u as useRowHeight } from "../../hooks/useRowHeight/useRowHeight.js";
+import { u as useColumnsWidth } from "../../hooks/useColumnsWidth/useColumnsWidth.js";
+import { u as useViewConfig } from "../../hooks/useViewConfig/useViewConfig.js";
+import { u as useChangeColumnsConfig } from "../../hooks/useChangeColumnsConfig/useChangeColumnsConfig.js";
+import { u as useChangeColumnsOrder } from "../../hooks/useChangeColumnsOrder/useChangeColumnsOrder.js";
+import { g as getColumnsWidth } from "../../helpers/persistence/getColumnsWidth/getColumnsWidth.js";
+import { g as getViewMode } from "../../helpers/persistence/getViewMode/getViewMode.js";
+import { g as getInitialColumnsConfig } from "../../helpers/shared/getInitialColumnsConfig/getInitialColumnsConfig.js";
+import { g as getAllViewModes } from "../../helpers/shared/getAllViewModes/getAllViewModes.js";
+import { g as getViewSpecificConfig } from "../../helpers/shared/getViewSpecificConfig/getViewSpecificConfig.js";
+const DataGridContext = createContext(null);
+function DataGridProvider(props) {
+  const {
+    id,
+    children,
+    columns,
+    defaultConfig,
+    onChangeConfig,
+    defaultUserColumns,
+    // deprecated
+    onChangeUserColumns,
+    // deprecated
+    rows,
+    rowsCount,
+    rowActionsGetter,
+    rowHeights = DATAGRID_ROW_HEIGHTS,
+    rowHeaderHeights = DATAGRID_ROW_HEADER_HEIGHTS,
+    initialRowHeightVariant = "standard",
+    checkedRows,
+    onCheckedRowsChange,
+    checkedRowsMultiple,
+    rowKeyGetter,
+    externalSortSettings: sortSettings,
+    externalFilterSettings: filterSettings,
+    size,
+    viewMode,
+    onViewModeChange,
+    defaultViewMode,
+    cardsViewConfig
+  } = 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 { currentRowHeightVariant, setRowHeightVariant } = useRowHeight({
+    rowHeights,
+    rowHeaderHeights,
+    initialRowHeightVariant
+  });
+  const { columnsWidths, setColumnsWidths, onChangeColumnWidth } = useColumnsWidth({
+    id,
+    onChangeConfig: resolvedOnChangeConfig
+  });
+  const { getConfigColumns, updateConfigColumns } = useViewConfig();
+  const { onChangeColumnsConfig } = useChangeColumnsConfig({
+    id,
+    onChangeConfig: resolvedOnChangeConfig,
+    updateConfigColumns
+  });
+  const { onChangeColumnsOrder } = useChangeColumnsOrder({
+    getConfigColumns,
+    onChangeColumnsConfig
+  });
+  const classes = getComponentClasses(DATAGRID_PREFIX_NAME, {
+    ...DataGridSlots,
+    ...ActionsSlots,
+    ...RowsCountSlots,
+    ...TableSlots,
+    ...TextEditorSlots,
+    ...ColumnsConfigSlots,
+    ...ControlNavigateSlots
+  });
+  const [rowsFilterCount, setRowFilterCount] = useState(rowsCount);
+  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)) {
+          throw new Error(
+            `DataGridProvider: Sorts incluye "${sort}", pero no existe ninguna columna con key="${sort}".`
+          );
+        }
+      }
+    }
+    if (filterSettings?.filterColumns) {
+      for (const filterField of filterSettings.filterColumns) {
+        if (!filterField.skipColumnValidation && !keys.has(filterField.name)) {
+          throw new Error(
+            `DataGridProvider: Fields incluye "${filterField.name}", pero no existe ninguna columna con key="${filterField.name}".`
+          );
+        }
+      }
+    }
+    if (cardsViewConfig !== void 0) {
+      const hasCustomRender = cardsViewConfig.customRender !== void 0;
+      const hasColumnsConfig = cardsViewConfig.columnsConfig !== void 0 && cardsViewConfig.columnsConfig.length > 0;
+      if (!hasCustomRender && !hasColumnsConfig) {
+        throw new Error(
+          `DataGridProvider: cardsViewConfig.enabled=true requiere configurar al menos una de estas opciones:
+          - cardsViewConfig.customRender (renderizado personalizado)
+          - cardsViewConfig.columnsConfig (configuración de columnas con al menos 1 elemento)
+
+          Configuración actual:
+          - customRender: ${hasCustomRender ? "definido" : "undefined"}
+          - columnsConfig: ${cardsViewConfig.columnsConfig?.length || 0} columnas
+
+          Ejemplo válido con columnsConfig:
+            cardsViewConfig={{
+              enabled: true,
+              columnsConfig: [
+                { columnKey: 'name', showTitle: false },
+                { columnKey: 'email', showTitle: true }
+              ]
+            }}
+
+          Ejemplo válido con customRender:
+            cardsViewConfig={{
+              enabled: true,
+              customRender: {
+                renderContent: (row) => <CustomCard row={row} />,
+                minHeight: 200
+              }
+            }}
+          `
+        );
+      }
+      if (hasColumnsConfig && cardsViewConfig.columnsConfig) {
+        for (const cardCol of cardsViewConfig.columnsConfig) {
+          if (!keys.has(cardCol.columnKey)) {
+            throw new Error(
+              `DataGridProvider: cardsViewConfig.columnsConfig incluye columnKey="${cardCol.columnKey}", pero no existe ninguna columna con key="${cardCol.columnKey}".`
+            );
+          }
+        }
+      }
+    }
+  }, [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(
+          id,
+          columns,
+          "table",
+          resolvedDefaultConfig?.columnsConfig,
+          { frozen: false },
+          { originalFrozen: false }
+        )
+      );
+      const finalCardsConfig = (() => {
+        if (resolvedDefaultConfig?.columnsConfigCards && resolvedDefaultConfig.columnsConfigCards.length > 0) {
+          return resolvedDefaultConfig.columnsConfigCards;
+        }
+        if (cardsViewConfig?.columnsConfig) {
+          return cardsViewConfig.columnsConfig.map((colConfig, index) => {
+            const originalColumn = columns.find(
+              (col) => col.key === colConfig.columnKey
+            );
+            return {
+              key: colConfig.columnKey,
+              visible: originalColumn?.visible === void 0 ? true : originalColumn?.visible,
+              index,
+              showTitle: colConfig.showTitle
+            };
+          });
+        }
+        return void 0;
+      })();
+      updateConfigColumns(
+        "cards",
+        getInitialColumnsConfig(
+          id,
+          columns,
+          "cards",
+          finalCardsConfig,
+          { showTitle: false },
+          { originalShowTitle: false }
+        )
+      );
+    }
+  }, [resolvedDefaultConfig]);
+  useEffect(() => {
+    if (!isFirstRender) {
+      const updatedConfigs = {
+        table: [],
+        cards: []
+      };
+      getAllViewModes().forEach((viewModeParam) => {
+        const currentConfig = getConfigColumns(viewModeParam);
+        const finalConfig = [];
+        for (let i = 0; i < currentConfig.length; i++) {
+          const columnIndex = columns.findIndex(
+            (c) => c.key === currentConfig[i]?.key
+          );
+          if (columnIndex !== -1) {
+            const column = columns[columnIndex];
+            finalConfig.push({
+              ...currentConfig[i],
+              originalIndex: columnIndex,
+              // Propiedades específicas por vista dinámicamente
+              ...getViewSpecificConfig(viewModeParam).dynamicOriginalProperty(
+                currentConfig[i] || column
+              ),
+              originalVisible: column.visible ?? true
+            });
+          }
+        }
+        updatedConfigs[viewModeParam] = finalConfig;
+      });
+      getAllViewModes().forEach((viewModeParam) => {
+        const currentConfig = updatedConfigs[viewModeParam];
+        const currentConfigKeys = new Set(
+          getConfigColumns(viewModeParam).map((c) => c.key)
+        );
+        const newColumnsForView = columns.filter(
+          (column) => !currentConfigKeys.has(column.key)
+        );
+        if (newColumnsForView.length > 0) {
+          const colLength = currentConfig.length;
+          const viewSpecificDefaults = viewModeParam === "cards" ? { showTitle: false } : {
+            frozen: false
+          };
+          const originalViewSpecificDefaults = viewModeParam === "cards" ? {
+            originalShowTitle: false
+          } : {
+            originalFrozen: false
+          };
+          const newColConfig = getInitialColumnsConfig(
+            id,
+            newColumnsForView,
+            viewModeParam,
+            void 0,
+            viewSpecificDefaults,
+            originalViewSpecificDefaults
+          ).map((columnConfig, index) => {
+            const columnIndex = columns.findIndex(
+              (c) => c.key === newColumnsForView[index].key
+            );
+            const column = newColumnsForView[index];
+            return {
+              ...columnConfig,
+              index: index + colLength,
+              name: column.name,
+              originalIndex: columnIndex,
+              originalVisible: column.visible ?? true,
+              // Propiedades específicas por vista dinámicamente
+              ...getViewSpecificConfig(viewModeParam).dynamicOriginalProperty(
+                column
+              )
+            };
+          });
+          updatedConfigs[viewModeParam].push(...newColConfig);
+        }
+      });
+      let hasChanges = false;
+      getAllViewModes().forEach((viewModeParam) => {
+        if (!deepEqual(
+          getConfigColumns(viewModeParam),
+          updatedConfigs[viewModeParam]
+        )) {
+          hasChanges = true;
+        }
+      });
+      if (!hasChanges) {
+        return;
+      }
+      console.log("useEffect viewConfigs changed", updatedConfigs);
+      getAllViewModes().forEach((viewModeParam) => {
+        updateConfigColumns(viewModeParam, updatedConfigs[viewModeParam]);
+      });
+    }
+  }, [columns, id]);
+  const setRowFilterCountInternal = (newRowsCount) => {
+    setRowFilterCount(newRowsCount);
+  };
+  return /* @__PURE__ */ jsx(
+    DataGridContext.Provider,
+    {
+      value: {
+        getConfigColumns,
+        onChangeColumnsConfig,
+        columnsConfig: getConfigColumns("table"),
+        columnsWidths,
+        rowsCount: rowsFilterCount,
+        currentRowHeightVariant: currentRowHeightVariant.rowHVariant,
+        currentRowHeight: currentRowHeightVariant.rowHeight,
+        currentRowHeaderHeight: currentRowHeightVariant.rowHeaderHeight,
+        rows,
+        rowHeights: finalRowHeights,
+        checkedRows,
+        onChangeColumnsOrder,
+        onChangeColumnWidth,
+        setRowsCount: setRowFilterCountInternal,
+        rowActionsGetter,
+        setRowHeightVariant,
+        onCheckedRowsChange,
+        checkedRowsMultiple,
+        rowKeyGetter,
+        onChangeConfig: resolvedOnChangeConfig,
+        onChangeUserColumns: resolvedOnChangeConfig,
+        // deprecated alias
+        sortColumns,
+        setSortColumns,
+        externalSortSettings: sortSettings,
+        externalFilterSettings: filterSettings,
+        classes,
+        size,
+        viewMode: viewModeState,
+        onViewModeChange: handleViewModeChange,
+        cardsViewConfig
+      },
+      children
+    }
+  );
+}
+export {
+  DataGridProvider as D,
+  DataGridContext as a
+};

package/components/DataGrid/contexts/DataGridContext/index.d.ts

@@ -1,9 +1,2 @@
-import { RowKey } from '../../types';
-import { DataGridContextProps, DataGridProviderProps } from './types';
-declare const DataGridContext: import('react').Context<DataGridContextProps<any, any, any> | null>;
-/**
- * Proveedor que se encarga de manejar el estado de las columnas y las filas
- * del DataGrid.
- */
-declare function DataGridProvider<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: DataGridProviderProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;
-export { DataGridProvider, DataGridContext };
+export { DataGridProvider, DataGridContext } from './DataGridContext';
+export * from './types';