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

package/components/DataGrid/views/CardsView/subcomponents/CardDetails/types.d.ts

@@ -0,0 +1,38 @@
+import { Column, RowsChangeData } from 'react-data-grid';
+import { Maybe } from '@m4l/core';
+import { IViewConfig } from '../../../../contexts/DataGridContext/types';
+import { Sizes } from '@m4l/styles';
+/**
+ * Props para el componente CardDetails
+ */
+export interface CardDetailsProps<TRow> {
+    /**
+     * Fila que se mostrará en el detalle
+     */
+    row: TRow;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar)
+     */
+    rows: readonly TRow[];
+    /**
+     * Índice de la fila actual en el array de filas
+     */
+    rowIndex: number;
+    /**
+     * Columnas que se mostrarán en el detalle
+     */
+    columns: readonly Column<TRow, any>[];
+    /**
+     * Configuración de las columnas de la vista
+     */
+    viewColumnsConfig: IViewConfig<any, any>[];
+    /**
+     * Función para manejar cambios en las filas (para editores)
+     */
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Tamaño del componente
+     * @default 'medium'
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}

package/components/DataGrid/views/CardsView/subcomponents/CardDetails/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/CardRow/CardRow.d.ts

@@ -0,0 +1,11 @@
+import { RowKey } from '../../../../types';
+import { CardRowProps } from './types';
+/**
+ * Componente que muestra una fila de tarjetas.
+ */
+declare function CardRowComponent<TRow, TKey extends RowKey = RowKey>({ row, rows, rowIndex, columns, originalColumns, rowKeyGetter, selectedRows, onSelectedRowsChange, onRowsChange, customRender, minHeight, isChecked, checkedRows, showCheckbox, onCheckedRowsChange, onOpenDetail, }: CardRowProps<TRow, TKey>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Componente que muestra CardRow
+ */
+export declare const CardRow: typeof CardRowComponent;
+export {};

package/components/DataGrid/{subcomponents/Cards/subcomponents/CardRow/index.js → views/CardsView/subcomponents/CardRow/CardRow.js}

@@ -1,12 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useMemo } from "react";
-import { i as CardContentWrapperStyled, j as CardContentStyled, k as CardStyled } from "../../../../slots/DataGridSlot.js";
-import { L as LazyLoadCard } from "../LazyLoadCard/index.js";
-import { u as useCardContent } from "../../hooks/useCardContent.js";
-import { C as CardHeader } from "../CardHeader/index.js";
+import { p as CardContentWrapperStyled, q as CardContentStyled, r as CardStyled } from "../../../../slots/DataGridSlot.js";
 import { deepEqual } from "fast-equals";
+import { u as useCardContent } from "../../hooks/useCardContent/useCardContent.js";
+import { C as CardHeader } from "./subcomponents/CardHeader/CardHeader.js";
+import { L as LazyLoadCard } from "./subcomponents/LazyLoadCard/LazyLoadCard.js";
 function CardRowComponent({
   row,
+  rows,
+  rowIndex,
   columns,
   originalColumns,
   rowKeyGetter,
@@ -24,6 +26,8 @@ function CardRowComponent({
   const hasCustomRender = customRender !== void 0;
   const { cardContent } = useCardContent({
     row,
+    rows,
+    rowIndex,
     columns,
     onRowsChange
   });
@@ -71,29 +75,21 @@ function CardRowComponent({
       onSelectedRowsChange(mySet);
     }
   };
-  return /* @__PURE__ */ jsx(
-    LazyLoadCard,
+  return /* @__PURE__ */ jsx(LazyLoadCard, { threshold: 200, minHeight, rowKey: rowKeyGetter(row), children: /* @__PURE__ */ jsx(
+    CardStyled,
     {
-      threshold: 200,
-      minHeight,
-      rowKey: rowKeyGetter(row),
-      children: /* @__PURE__ */ jsx(
-        CardStyled,
-        {
-          variant: "outlined",
-          selected: selectedRows?.has(rowKeyGetter(row)),
-          ownerState: {
-            checked: isChecked,
-            selected: selectedRows?.has(rowKeyGetter(row))
-          },
-          onClick: onCardClick,
-          "data-testid": "data-grid-card",
-          "data-row-key": rowKeyGetter(row),
-          children: content
-        }
-      )
+      variant: "outlined",
+      selected: selectedRows?.has(rowKeyGetter(row)),
+      ownerState: {
+        checked: isChecked,
+        selected: selectedRows?.has(rowKeyGetter(row))
+      },
+      onClick: onCardClick,
+      "data-testid": "data-grid-card",
+      "data-row-key": rowKeyGetter(row),
+      children: content
     }
-  );
+  ) });
 }
 const CardRow = React.memo(CardRowComponent, (prevProps, nextProps) => {
   return deepEqual(prevProps, nextProps);

package/components/DataGrid/views/CardsView/subcomponents/CardRow/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardRow';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/CardRow/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/subcomponents/CardHeader/index.d.ts → views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/CardHeader.d.ts}

@@ -1,4 +1,4 @@
-import { CardHeaderProps } from '../../types';
+import { CardHeaderProps } from './types';
 /**
  * Componente CardHeader que renderiza el header de cada card con:
  * - Checkbox en el lado izquierdo (solo si existen checkedRows/onCheckedRowsChange)

package/components/DataGrid/{subcomponents/Cards/subcomponents/CardHeader/index.js → views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/CardHeader.js}

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
 import { useEnvironment } from "@m4l/core";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { f as CardHeaderStyled, g as CardHeaderLeftStyled, h as CardHeaderRightStyled } from "../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../icons.js";
-import { C as CheckboxCellAdapter } from "../../../CheckboxCellAdapter/index.js";
-import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
-import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
+import { s as CardHeaderStyled, t as CardHeaderLeftStyled, u as CardHeaderRightStyled } from "../../../../../../slots/DataGridSlot.js";
+import { p as pathIcons } from "../../../../../../icons.js";
+import { C as CheckboxCellAdapter } from "../../../../../adapters/CheckboxCellAdapter/CheckboxCellAdapter.js";
+import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
+import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { M as MenuActions } from "../../../../../../../MenuActions/MenuActions.js";
 function CardHeader({
   row,
   onOpenDetail,

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardHeader';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Props para el componente CardHeader
+ */
+export interface CardHeaderProps<TRow> {
+    row: TRow;
+    onOpenDetail: (row: TRow) => void;
+    isChecked?: boolean;
+    showCheckbox?: boolean;
+    checkedRows?: ReadonlySet<any>;
+    onCheckedRowsChange?: (rows: ReadonlySet<any>) => void;
+}

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/subcomponents/LazyLoadCard/index.d.ts → views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/LazyLoadCard.d.ts}

@@ -1,4 +1,4 @@
-import { LazyLoadCardProps } from '../../types';
+import { LazyLoadCardProps } from './types';
 /**
  * Componente wrapper que implementa lazy loading para cards del DataGrid.
  *

package/components/DataGrid/{subcomponents/Cards/subcomponents/LazyLoadCard/index.js → views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/LazyLoadCard.js}

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { I as IntersectCard } from "../IntersectCard/index.js";
+import { I as IntersectCard } from "./subcomponents/IntersectCard/IntersectCard.js";
 const isIntersectionObserverAvailable = () => {
   return typeof window !== "undefined" && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype;
 };

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LazyLoadCard';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/Cards/subcomponents/IntersectCard/index.d.ts → views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/IntersectCard.d.ts}

@@ -1,4 +1,4 @@
-import { IntersectCardProps } from '../../types';
+import { IntersectCardProps } from './types';
 /**
  * Componente centinela que detecta cuando una card debe ser renderizada.
  *

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './IntersectCard';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Props para el componente IntersectCard
+ */
+export interface IntersectCardProps {
+    /**
+     * Función callback que se ejecuta cuando el elemento entra en el viewport.
+     * Recibe true cuando el elemento es visible.
+     * @param visible - Estado de visibilidad del elemento
+     */
+    setIsVisible: (visible: boolean) => void;
+    /**
+     * Distancia en píxeles desde el borde del viewport donde se activa la detección.
+     * Un valor de 100 significa que el elemento se considerará visible cuando esté
+     * a 100px o menos del área visible de la pantalla.
+     * @default 100
+     */
+    threshold: number;
+    /**
+     * Altura mínima del placeholder en píxeles
+     * @default '120px'
+     */
+    minHeight?: number;
+    /**
+     * Clave de la fila
+     */
+    rowKey?: string | number;
+}
+/**
+ * Tipo extendido para el elemento div que incluye el método setIsVisible.
+ * Este método se adjunta dinámicamente al elemento DOM para que el Observer
+ * pueda comunicarse con el componente React.
+ */
+export type IntersectCardRef = HTMLDivElement & {
+    setIsVisible?: (visible: boolean) => void;
+};

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+/**
+ * Props para el componente LazyLoadCard
+ */
+export interface LazyLoadCardProps {
+    /**
+     * Contenido a renderizar cuando la card sea visible
+     */
+    children: ReactNode;
+    /**
+     * Habilita o deshabilita el IntersectionObserver.
+     * Si es false, el contenido se renderiza inmediatamente.
+     * @default true
+     */
+    enableIntersectionObserver?: boolean;
+    /**
+     * Distancia en píxeles desde el borde del viewport donde se activa la detección.
+     * @default 100
+     */
+    threshold?: number;
+    /**
+     * Altura mínima del placeholder en píxeles
+     * @default 120
+     */
+    minHeight?: number;
+    /**
+     * Clave de la fila
+     */
+    rowKey?: string | number;
+}

package/components/DataGrid/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/CardRow/types.d.ts

@@ -0,0 +1,72 @@
+import { Column, RowsChangeData } from 'react-data-grid';
+import { CardsViewConfig, RowKey } from '../../../../types';
+import { Maybe } from '@m4l/core';
+/**
+ * Props para el componente CardRow
+ */
+export interface CardRowProps<TRow, TKey extends RowKey = RowKey> {
+    /**
+     * Fila que se mostrará en la tarjeta
+     */
+    row: TRow;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar)
+     */
+    rows: readonly TRow[];
+    /**
+     * Índice de la fila actual en el array de filas
+     */
+    rowIndex: number;
+    /**
+     * Columnas que se mostrarán en la tarjeta (procesadas, filtradas por visibilidad)
+     */
+    columns: readonly Column<TRow, any>[];
+    /**
+     * Columnas originales sin filtrar (para el modal de detalle)
+     */
+    originalColumns: readonly Column<TRow, any>[];
+    /**
+     * Función que devuelve la clave de la fila
+     */
+    rowKeyGetter: (row: TRow) => TKey;
+    /**
+     * Filas seleccionadas actualmente
+     */
+    selectedRows?: ReadonlySet<TKey>;
+    /**
+     * Función para manejar el cambio de filas seleccionadas
+     */
+    onSelectedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
+    /**
+     * Función para manejar cambios en las filas (para editores)
+     */
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Indica si se debe renderizar el contenido personalizado de la tarjeta
+     */
+    customRender?: CardsViewConfig<TRow>['customRender'];
+    /**
+     * Altura mínima de la tarjeta
+     */
+    minHeight: number;
+    /**
+     * Indica si la fila está chequeada
+     */
+    isChecked: boolean;
+    /**
+     * Indica si se debe mostrar el checkbox para checkedRows
+     */
+    showCheckbox: boolean;
+    /**
+     * Filas chequeadas actualmente
+     */
+    checkedRows?: ReadonlySet<TKey>;
+    /**
+     * Función para manejar el cambio de filas chequeadas
+     */
+    onCheckedRowsChange?: (mapRowsChecked: ReadonlySet<TKey>) => void;
+    /**
+     * Función para abrir el modal de detalle de la fila
+     */
+    onOpenDetail: (row: TRow) => void;
+}

package/components/DataGrid/views/CardsView/subcomponents/CardRow/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/Settings/Settings.d.ts

@@ -0,0 +1,6 @@
+import { SettingsProps } from './types';
+/**
+ * Componente que renderiza el icono de configuración para CardsView.
+ * Abre el modal de configuración de columnas específico para la vista de cards.
+ */
+export declare function Settings(props: SettingsProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/{subcomponents/HeaderActions/subcomponents/Settings/index.js → views/CardsView/subcomponents/Settings/Settings.js}

@@ -1,23 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { u as useModalSettings } from "../hooks/useModalSettings/index.js";
 import { p as pathIcons } from "../../../../icons.js";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { u as useModalSettingsCards } from "../hooks/useModalSettingsCards/index.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { u as useModalSettings } from "./hooks/useModalSettings/useModalSettings.js";
 function Settings(props) {
   const { columns } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { size, viewMode } = useDataGrid();
+  const { size } = useDataGrid();
   const modalSettings = useModalSettings(size, columns);
-  const modalSettingsCards = useModalSettingsCards(size, columns);
   const { getLabel } = useModuleDictionary();
   const handleClick = () => {
-    if (viewMode === "table") {
-      modalSettings();
-    } else {
-      modalSettingsCards();
-    }
+    modalSettings();
   };
   return /* @__PURE__ */ jsx(
     IconButton,

package/components/DataGrid/views/CardsView/subcomponents/Settings/hooks/useModalSettings/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useModalSettings';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/Settings/hooks/useModalSettings/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/Settings/hooks/useModalSettings/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.d.ts

@@ -0,0 +1,7 @@
+import { GridProps } from '../../../../../../types';
+import { Column } from 'react-data-grid';
+/**
+ * Hook que renderiza el modal de configuración de las columnas
+ * de la vista de cards
+ */
+export declare const useModalSettings: (size: GridProps<unknown, unknown>["size"], columns: readonly Column<any, any>[]) => () => void;

package/components/DataGrid/{subcomponents/HeaderActions/subcomponents/hooks/useModalSettingsCards/index.js → views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js}

@@ -2,19 +2,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useRef, useCallback } from "react";
-import { u as useDataGrid } from "../../../../../hooks/useDataGrid.js";
-import { u as useModal } from "../../../../../../../hooks/useModal/index.js";
-import { a as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../../icons.js";
-import { C as ColumnsConfigCards } from "../../Settings/subcomponents/ColumnsConfigCards/index.js";
-import { A as ActionsContainer } from "../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
-import { W as WindowBase } from "../../../../../../WindowBase/WindowBase.js";
-import { A as ActionCancel } from "../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
-import { A as ActionIntro } from "../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
-const useModalSettingsCards = (size, columns) => {
+import { u as useModal } from "../../../../../../../../hooks/useModal/index.js";
+import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../../slots/DataGridSlot.js";
+import { p as pathIcons } from "../../../../../../icons.js";
+import { C as ColumnsConfig } from "../../subcomponents/ColumnsConfig/ColumnsConfig.js";
+import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { W as WindowBase } from "../../../../../../../WindowBase/WindowBase.js";
+import { A as ActionCancel } from "../../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { A as ActionIntro } from "../../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
+const useModalSettings = (size, columns) => {
   const { openModal, closeModal } = useModal();
   const { getConfigColumns, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
-  const columnsConfigCards = getConfigColumns("cards");
+  const columnsConfig = getConfigColumns("cards");
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
@@ -46,12 +46,12 @@ const useModalSettingsCards = (size, columns) => {
           emergeType: "modal",
           children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { classes: classes?.contentModalSetting, children: [
             /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(
-              ColumnsConfigCards,
+              ColumnsConfig,
               {
                 ref,
                 rowHeight: currentRowHeight,
-                columnsConfigCards,
-                onChangeColumnsConfigCards: handleColumnsSetting,
+                columnsConfig,
+                onChangeColumnsConfig: handleColumnsSetting,
                 onCloseSettings,
                 classes,
                 size,
@@ -70,5 +70,5 @@ const useModalSettingsCards = (size, columns) => {
   return onClickSettings;
 };
 export {
-  useModalSettingsCards as u
+  useModalSettings as u
 };

package/components/DataGrid/views/CardsView/subcomponents/Settings/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Settings';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/Settings/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.d.ts

@@ -0,0 +1,10 @@
+import { ColumnAlign } from '../../../../../../types';
+import { ColumnsConfigRef, ConfigProps } from './types';
+/**
+ * función encargada de definir la clase css de alineación
+ */
+export declare const getAlignClass: (align: ColumnAlign) => {
+    cellClass: string;
+    headerCellClass: string;
+};
+export declare const ColumnsConfig: import('react').ForwardRefExoticComponent<ConfigProps & import('react').RefAttributes<ColumnsConfigRef>>;

package/components/DataGrid/{subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfigCards/index.js → views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.js}

@@ -4,11 +4,11 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../../../icons.js";
-import { s as ColumnsConfigWrapperStyled, t as ColumnsConfigDataGridStyled, u as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, v as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { v as ColumnsConfigWrapperStyled, w as ColumnsConfigDataGridStyled, x as ColumnsConfigSelColumnsStyled, y as TableWrapperDataGridStyled, z as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
-function getRowsFromColumnsConfigCards(columnsConfigCards, columns) {
-  return columnsConfigCards.filter((cConfig) => !cConfig.hidden).map(
+function getRowsFromColumnsConfig(columnsConfig, columns) {
+  return columnsConfig.filter((cConfig) => !cConfig.hidden).map(
     (cConfig) => ({
       key: cConfig.key,
       name: columns?.find((c) => c.key === cConfig.key)?.name ?? "",
@@ -27,13 +27,13 @@ const getAlignClass = (align) => {
     headerCellClass: cellClass
   };
 };
-const ColumnsConfigCards = forwardRef(
+const ColumnsConfig = forwardRef(
   (props, ref) => {
     const refdata_grid = useRef(null);
     const {
       onCloseSettings,
-      columnsConfigCards,
-      onChangeColumnsConfigCards,
+      columnsConfig,
+      onChangeColumnsConfig,
       rowHeight,
       classes,
       size,
@@ -42,7 +42,7 @@ const ColumnsConfigCards = forwardRef(
     const { getLabel } = useModuleDictionary();
     const [isInit, setIsInit] = useState(true);
     const [rows, setRows] = useState(
-      getRowsFromColumnsConfigCards(columnsConfigCards, columns)
+      getRowsFromColumnsConfig(columnsConfig, columns)
     );
     const [selRows, setSelRows] = useState(
       () => /* @__PURE__ */ new Set()
@@ -100,10 +100,10 @@ const ColumnsConfigCards = forwardRef(
     };
     useEffect(() => {
       if (isInit === false) {
-        setRows(getRowsFromColumnsConfigCards(columnsConfigCards, columns));
+        setRows(getRowsFromColumnsConfig(columnsConfig, columns));
       }
       setIsInit(false);
-    }, [columnsConfigCards]);
+    }, [columnsConfig]);
     const rowSelectedIndex = useMemo(() => {
       let rowIndex = -1;
       if (selRows.size !== 1) {
@@ -163,21 +163,21 @@ const ColumnsConfigCards = forwardRef(
       if (rowIndexFinded > -1) {
         return rowIndexFinded;
       }
-      return columnsConfigCards.findIndex(
-        (columnConfigCards) => columnConfigCards.key === column.key
+      return columnsConfig.findIndex(
+        (columnConfig) => columnConfig.key === column.key
       );
     };
     const handleIntro = () => {
-      const newColumnsConfig = columnsConfigCards.map((columnConfigCards) => {
-        const newColumnConfig = { ...columnConfigCards };
-        if (!columnConfigCards.hidden) {
-          const columnConfigRow = getColumnConfigByKey(columnConfigCards.key);
+      const newColumnsConfig = columnsConfig.map((columnConfig) => {
+        const newColumnConfig = { ...columnConfig };
+        if (!columnConfig.hidden) {
+          const columnConfigRow = getColumnConfigByKey(columnConfig.key);
           if (columnConfigRow) {
             newColumnConfig.visible = columnConfigRow.visible;
             newColumnConfig.showTitle = columnConfigRow.showTitle;
           }
           const rowIndex = rows.findIndex(
-            (row) => row.key === columnConfigCards.key
+            (row) => row.key === columnConfig.key
           );
           if (rowIndex > -1) {
             newColumnConfig.index = rowIndex;
@@ -185,7 +185,7 @@ const ColumnsConfigCards = forwardRef(
         }
         return newColumnConfig;
       }).sort((a, b) => getRowIndex(a) - getRowIndex(b));
-      onChangeColumnsConfigCards(newColumnsConfig);
+      onChangeColumnsConfig(newColumnsConfig);
       onCloseSettings();
     };
     const onInternalSelectedRowsChange = () => {
@@ -298,7 +298,7 @@ const ColumnsConfigCards = forwardRef(
     ] });
   }
 );
-ColumnsConfigCards.displayName = "ColumnsConfigCards";
+ColumnsConfig.displayName = "ColumnsConfig";
 export {
-  ColumnsConfigCards as C
+  ColumnsConfig as C
 };

package/components/DataGrid/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ColumnsConfig';
+export * from './types';

package/components/DataGrid/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/{subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfigCards → views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig}/types.d.ts

@@ -19,8 +19,8 @@ export type ColumnsConfigRef = {
 export interface ConfigProps {
     onCloseSettings: () => void;
     columns: readonly Column<any, any>[];
-    columnsConfigCards: IViewConfig[];
-    onChangeColumnsConfigCards: (newColumnsConfigCards: IViewConfig[]) => void;
+    columnsConfig: IViewConfig[];
+    onChangeColumnsConfig: (newColumnsConfig: IViewConfig[]) => void;
     rowHeight: number;
     classes: DataGridContextProps<unknown, unknown>['classes'];
     size: GridProps<unknown, unknown>['size'];

package/components/DataGrid/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/views/CardsView/subcomponents/Settings/types.js

@@ -0,0 +1 @@
+