@m4l/components 9.3.19-BE171025-beta.1 → 9.3.19-BE241025-beta.2

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfigCards/index.d.ts

@@ -0,0 +1,2 @@
+import { ColumnsConfigRef, ConfigProps } from './types';
+export declare const ColumnsConfigCards: import('react').ForwardRefExoticComponent<ConfigProps & import('react').RefAttributes<ColumnsConfigRef>>;

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

@@ -0,0 +1,304 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect } from "react";
+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 { r as ColumnsConfigWrapperStyled, s as ColumnsConfigDataGridStyled, t as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, u 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(
+    (cConfig) => ({
+      key: cConfig.key,
+      name: columns?.find((c) => c.key === cConfig.key)?.name ?? "",
+      visible: cConfig.visible === void 0 ? true : cConfig.visible,
+      showTitle: cConfig.showTitle === void 0 ? true : cConfig.showTitle,
+      originalIndex: cConfig.originalIndex,
+      originalVisible: cConfig.originalVisible,
+      originalShowTitle: cConfig.originalShowTitle
+    })
+  );
+}
+const getAlignClass = (align) => {
+  const cellClass = align !== void 0 ? `rdg-cell-align-${align}` : "";
+  return {
+    cellClass,
+    headerCellClass: cellClass
+  };
+};
+const ColumnsConfigCards = forwardRef(
+  (props, ref) => {
+    const refdata_grid = useRef(null);
+    const {
+      onCloseSettings,
+      columnsConfigCards,
+      onChangeColumnsConfigCards,
+      rowHeight,
+      classes,
+      size,
+      columns
+    } = props;
+    const { getLabel } = useModuleDictionary();
+    const [isInit, setIsInit] = useState(true);
+    const [rows, setRows] = useState(
+      getRowsFromColumnsConfigCards(columnsConfigCards, columns)
+    );
+    const [selRows, setSelRows] = useState(
+      () => /* @__PURE__ */ new Set()
+    );
+    const divRef = useRef(null);
+    const { host_static_assets, environment_assets } = useEnvironment();
+    useImperativeHandle(ref, () => ({
+      onClickIntro: handleIntro,
+      current: divRef.current
+    }));
+    const columnsdata_grid = useMemo(
+      () => [
+        {
+          key: "name",
+          name: getLabel(DICTIONARY.SETTINGS_COLUMN_NAME),
+          width: 220,
+          resizable: true,
+          type: "string",
+          ...getAlignClass("left")
+        },
+        {
+          key: "visible",
+          name: getLabel(DICTIONARY.SETTINGS_COLUMN_VISIBLE),
+          width: 80,
+          type: "boolean",
+          renderCell: ColumnInteractiveCheckFormatter,
+          ...getAlignClass("center")
+        },
+        {
+          key: "showTitle",
+          name: getLabel(DICTIONARY.SETTINGS_COLUMN_SHOW_TITLE),
+          width: 100,
+          type: "boolean",
+          renderCell: ColumnInteractiveCheckFormatter,
+          ...getAlignClass("center")
+        }
+      ],
+      [getLabel]
+    );
+    const checkAll = () => {
+      setRows(rows.map((row) => ({ ...row, visible: true })));
+    };
+    const unCheckAll = () => {
+      setRows(rows.map((row) => ({ ...row, visible: false })));
+    };
+    const restoreAll = () => {
+      setRows(
+        rows.map((row) => ({
+          ...row,
+          visible: row.originalVisible,
+          showTitle: row.originalShowTitle,
+          index: row.originalIndex
+        })).sort((a, b) => a.index - b.index)
+      );
+    };
+    useEffect(() => {
+      if (isInit === false) {
+        setRows(getRowsFromColumnsConfigCards(columnsConfigCards, columns));
+      }
+      setIsInit(false);
+    }, [columnsConfigCards]);
+    const rowSelectedIndex = useMemo(() => {
+      let rowIndex = -1;
+      if (selRows.size !== 1) {
+        return rowIndex;
+      }
+      const iterator = selRows.entries();
+      const entry = iterator.next().value?.[1];
+      rowIndex = rows.findIndex((row) => row.key === entry);
+      return rowIndex;
+    }, [rows, selRows]);
+    const handleMoveFirst = () => {
+      if (rowSelectedIndex === -1) {
+        return -1;
+      }
+      const newRows = [...rows];
+      newRows.splice(rowSelectedIndex, 1);
+      newRows.splice(0, 0, rows[rowSelectedIndex]);
+      refdata_grid.current?.selectCell({ idx: 0, rowIdx: 0 });
+      setRows(newRows);
+    };
+    const handleMoveLast = () => {
+      if (rowSelectedIndex === -1) {
+        return -1;
+      }
+      const newRows = [...rows];
+      newRows.splice(rowSelectedIndex, 1);
+      newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
+      refdata_grid.current?.selectCell({ idx: 0, rowIdx: newRows.length - 1 });
+      setRows(newRows);
+    };
+    const handleMoveUpDownd = (position) => {
+      if (rowSelectedIndex === -1) {
+        return -1;
+      }
+      const newRows = [...rows];
+      const element = newRows[rowSelectedIndex];
+      newRows.splice(rowSelectedIndex, 1);
+      newRows.splice(rowSelectedIndex + position, 0, element);
+      refdata_grid.current?.selectCell({
+        idx: 0,
+        rowIdx: rowSelectedIndex + position
+      });
+      setRows(newRows);
+    };
+    const getColumnConfigByKey = (key) => {
+      const rowIndexFinded = rows.findIndex((row) => row.key === key);
+      if (rowIndexFinded > -1) {
+        return {
+          visible: rows[rowIndexFinded].visible,
+          showTitle: rows[rowIndexFinded].showTitle
+        };
+      }
+      return void 0;
+    };
+    const getRowIndex = (column) => {
+      const rowIndexFinded = rows.findIndex((row) => row.key === column.key);
+      if (rowIndexFinded > -1) {
+        return rowIndexFinded;
+      }
+      return columnsConfigCards.findIndex(
+        (columnConfigCards) => columnConfigCards.key === column.key
+      );
+    };
+    const handleIntro = () => {
+      const newColumnsConfig = columnsConfigCards.map((columnConfigCards) => {
+        const newColumnConfig = { ...columnConfigCards };
+        if (!columnConfigCards.hidden) {
+          const columnConfigRow = getColumnConfigByKey(columnConfigCards.key);
+          if (columnConfigRow) {
+            newColumnConfig.visible = columnConfigRow.visible;
+            newColumnConfig.showTitle = columnConfigRow.showTitle;
+          }
+          const rowIndex = rows.findIndex(
+            (row) => row.key === columnConfigCards.key
+          );
+          if (rowIndex > -1) {
+            newColumnConfig.index = rowIndex;
+          }
+        }
+        return newColumnConfig;
+      }).sort((a, b) => getRowIndex(a) - getRowIndex(b));
+      onChangeColumnsConfigCards(newColumnsConfig);
+      onCloseSettings();
+    };
+    const onInternalSelectedRowsChange = () => {
+    };
+    const onInternalRowsChange = (newRows) => {
+      setRows(newRows);
+    };
+    const onCellClick = ({ row }) => {
+      if (selRows.has(row.key)) {
+        return;
+      }
+      const mySet = /* @__PURE__ */ new Set([row.key]);
+      setSelRows(mySet);
+    };
+    return /* @__PURE__ */ jsxs(ColumnsConfigWrapperStyled, { ref: divRef, children: [
+      /* @__PURE__ */ jsxs(ColumnsConfigDataGridStyled, { children: [
+        /* @__PURE__ */ jsx(ColumnsConfigSelColumnsStyled, { ownerState: { size }, children: getLabel(DICTIONARY.SETTINGS_SEL_COLUMNS) }),
+        /* @__PURE__ */ jsx(
+          TableWrapperDataGridStyled,
+          {
+            className: classes?.tableWrapperDataGrid,
+            ownerState: { size },
+            children: /* @__PURE__ */ jsx(
+              DataGrid,
+              {
+                ref: refdata_grid,
+                rowHeight,
+                columns: columnsdata_grid,
+                rows,
+                onRowsChange: onInternalRowsChange,
+                selectedRows: selRows,
+                onSelectedRowsChange: onInternalSelectedRowsChange,
+                onCellClick,
+                rowKeyGetter: (row) => row.key,
+                defaultColumnOptions: { resizable: true, sortable: true }
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(ColumnsConfigActiosStyled, { children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            tooltip: getLabel(DICTIONARY.SETTINGS_MOVE_FIRST),
+            onClick: handleMoveFirst,
+            "aria-label": "move first place",
+            disabled: rowSelectedIndex < 1,
+            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveFirstPlace}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            tooltip: getLabel(DICTIONARY.SETTINGS_MOVE_UP),
+            onClick: () => handleMoveUpDownd(-1),
+            "aria-label": "move up place",
+            disabled: rowSelectedIndex < 1,
+            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveUpPlace}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            tooltip: getLabel(DICTIONARY.SETTINGS_MOVE_LAST),
+            onClick: handleMoveLast,
+            "aria-label": "move last place",
+            disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
+            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveLastPlace}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            tooltip: getLabel(DICTIONARY.SETTINGS_MOVE_DOWN),
+            onClick: () => handleMoveUpDownd(1),
+            "aria-label": "move down place",
+            disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
+            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveDownPlace}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            tooltip: getLabel(DICTIONARY.SETTINGS_VISIBLE_ALL),
+            onClick: checkAll,
+            "aria-label": "check visible all",
+            icon: `${host_static_assets}/${environment_assets}/${pathIcons.checkAll}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            tooltip: getLabel(DICTIONARY.SETTINGS_NO_VISIBLE_ALL),
+            onClick: unCheckAll,
+            "aria-label": "un check all",
+            icon: `${host_static_assets}/${environment_assets}/${pathIcons.uncheckAll}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            tooltip: getLabel(DICTIONARY.SETTINGS_RESTORE),
+            onClick: restoreAll,
+            "aria-label": "Restore columns",
+            icon: `${host_static_assets}/${environment_assets}/${pathIcons.restoreColumns}`
+          }
+        )
+      ] })
+    ] });
+  }
+);
+ColumnsConfigCards.displayName = "ColumnsConfigCards";
+export {
+  ColumnsConfigCards as C
+};

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfigCards/types.d.ts

@@ -0,0 +1,31 @@
+import { DataGridContextProps, IViewConfig } from '../../../../../../contexts/DataGridContext/types';
+import { GridProps } from '../../../../../../types';
+import { Column } from 'react-data-grid';
+export interface Row {
+    key: string;
+    name: string;
+    visible: boolean;
+    showTitle: boolean;
+    width: number;
+    index: number;
+    originalIndex: number;
+    originalVisible: boolean;
+    originalShowTitle: boolean;
+}
+export type ColumnsConfigRef = {
+    onClickIntro: () => void;
+    current: HTMLDivElement | null;
+};
+export interface ConfigProps {
+    onCloseSettings: () => void;
+    columns: readonly Column<any, any>[];
+    columnsConfigCards: IViewConfig[];
+    onChangeColumnsConfigCards: (newColumnsConfigCards: IViewConfig[]) => void;
+    rowHeight: number;
+    classes: DataGridContextProps<unknown, unknown>['classes'];
+    size: GridProps<unknown, unknown>['size'];
+}
+export interface CheckFormatterProps {
+    key: string;
+    row: any;
+}

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/ViewMode/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que renderiza el botón de cambio de vista en el DataGrid
+ */
+export declare function ViewMode(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/ViewMode/index.js

@@ -0,0 +1,125 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
+import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
+import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
+import { v as ContainerToggleCardsStyled, w as CardToggleButtonStyled, x as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { I as Icon } from "../../../../../Icon/Icon.js";
+function ViewMode() {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { viewMode, onViewModeChange } = useDataGrid();
+  const { getLabel } = useModuleDictionary();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const ownerState = {
+    viewMode
+  };
+  const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
+  const handleClick = useCallback(
+    (event) => {
+      setAnchorEl(event.currentTarget);
+    },
+    []
+  );
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const handleViewModeChange = useCallback(
+    (newViewMode) => {
+      onViewModeChange?.(newViewMode);
+      handleClose();
+    },
+    [onViewModeChange, handleClose]
+  );
+  const renderIcon = useMemo(() => {
+    return viewMode === "table" ? pathIcons.viewTable : pathIcons.viewCards;
+  }, [viewMode]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        tooltip: getLabel(DICTIONARY.TOOLTIP_VIEW_MODE),
+        onClick: handleClick,
+        "aria-label": "view-mode",
+        icon: `${host_static_assets}/${environment_assets}/${renderIcon}`,
+        "data-testid": "view-mode-button"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+        slotProps: {
+          paper: {
+            sx: { mt: 0.6 }
+          }
+        },
+        children: /* @__PURE__ */ jsxs(ContainerToggleCardsStyled, { children: [
+          /* @__PURE__ */ jsxs(
+            CardToggleButtonStyled,
+            {
+              ownerState: { ...ownerState, isActive: viewMode === "table" },
+              variant: "outlined",
+              role: "button",
+              onClick: () => handleViewModeChange("table"),
+              "data-testid": "toggle-button-table",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/${pathIcons.viewTable}`,
+                    color: viewMode === "table" ? "primary.enabled" : "text.disabled"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextToggleCardButtonStyled,
+                  {
+                    ownerState: { ...ownerState, isActive: viewMode === "table" },
+                    variant: "body",
+                    children: getLabel(DICTIONARY.VIEW_MODE_TABLE)
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            CardToggleButtonStyled,
+            {
+              ownerState: { ...ownerState, isActive: viewMode === "cards" },
+              variant: "outlined",
+              role: "button",
+              onClick: () => handleViewModeChange("cards"),
+              "data-testid": "toggle-button-cards",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/${pathIcons.viewCards}`,
+                    color: viewMode === "cards" ? "primary.enabled" : "text.disabled"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextToggleCardButtonStyled,
+                  {
+                    ownerState: { ...ownerState, isActive: viewMode === "cards" },
+                    variant: "body",
+                    children: getLabel(DICTIONARY.VIEW_MODE_CARDS)
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  ViewMode as V
+};

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/hooks/useModalSettings/index.js

@@ -5,7 +5,7 @@ import { useRef, useCallback } from "react";
 import { u as useDataGrid } from "../../../../../hooks/useDataGrid.js";
 import { u as useModal } from "../../../../../../../hooks/useModal/index.js";
 import { C as ColumnsConfig } from "../../Settings/subcomponents/ColumnsConfig/index.js";
-import { l as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
+import { b as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../../icons.js";
 import { A as ActionsContainer } from "../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { W as WindowBase } from "../../../../../../WindowBase/WindowBase.js";
@@ -27,7 +27,7 @@ const useModalSettings = (size, columns) => {
     }
   }, []);
   const handleColumnsSetting = (config) => {
-    onChangeColumnsConfig(config);
+    onChangeColumnsConfig("table", config);
   };
   const onClickSettings = () => {
     openModal({

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/hooks/useModalSettingsCards/index.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 tabla
+ */
+export declare const useModalSettingsCards: (size: GridProps<unknown, unknown>["size"], columns: readonly Column<any, any>[]) => () => void;

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/hooks/useModalSettingsCards/index.js

@@ -0,0 +1,74 @@
+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 { b 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) => {
+  const { openModal, closeModal } = useModal();
+  const { getConfigColumns, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
+  const columnsConfigCards = getConfigColumns("cards");
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isMobile = useIsMobile();
+  const ref = useRef(null);
+  const onCloseSettings = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+  const onClickIntro = useCallback(() => {
+    if (ref.current?.onClickIntro) {
+      ref.current.onClickIntro();
+    }
+  }, []);
+  const handleColumnsSetting = (config) => {
+    onChangeColumnsConfig("cards", config);
+  };
+  const onClickSettings = () => {
+    openModal({
+      initialWidth: 500,
+      initialHeight: 680,
+      fullScreen: isMobile,
+      window: /* @__PURE__ */ jsx(
+        WindowBase,
+        {
+          title: getLabel("data_grid.settings_title"),
+          iconUrl: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+          onClose: closeModal,
+          className: "settings-modal",
+          variant: "outlined",
+          emergeType: "modal",
+          children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { classes: classes?.contentModalSetting, children: [
+            /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(
+              ColumnsConfigCards,
+              {
+                ref,
+                rowHeight: currentRowHeight,
+                columnsConfigCards,
+                onChangeColumnsConfigCards: handleColumnsSetting,
+                onCloseSettings,
+                classes,
+                size,
+                columns
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(ActionsContainer, { children: [
+              /* @__PURE__ */ jsx(ActionCancel, { onClick: closeModal }),
+              /* @__PURE__ */ jsx(ActionIntro, { onClick: onClickIntro })
+            ] })
+          ] })
+        }
+      )
+    });
+  };
+  return onClickSettings;
+};
+export {
+  useModalSettingsCards as u
+};

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/hooks/useModalSettingsCards/types.d.ts

@@ -0,0 +1,4 @@
+export type ColumnsConfigRef = {
+    onClickIntro: () => void;
+    current: HTMLDivElement | null;
+};

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

@@ -0,0 +1,5 @@
+import { GridProps, RowKey } from '../../types';
+/**
+ * Componente que renderiza el contenido del DataGrid en formato de tarjetas o tabla, depende del viewMode.
+ */
+export declare function RenderContent<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/RenderContent/index.js

@@ -0,0 +1,11 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { u as useDataGrid } from "../../hooks/useDataGrid.js";
+import { C as Cards } from "../Cards/index.js";
+import { T as Table } from "../Table/index.js";
+function RenderContent(props) {
+  const { viewMode } = useDataGrid();
+  return /* @__PURE__ */ jsx(Fragment, { children: viewMode === "table" ? /* @__PURE__ */ jsx(Table, { ...props }) : /* @__PURE__ */ jsx(Cards, { ...props }) });
+}
+export {
+  RenderContent as R
+};

package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js

@@ -86,7 +86,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
     const next = columnsConfig.map(
       (c) => c.key === columnKey ? { ...c, frozen: !c.frozen } : c
     );
-    onChangeColumnsConfig(next);
+    onChangeColumnsConfig("table", next);
   }, [columnKey, columnsConfig, onChangeColumnsConfig]);
   const toggleVisible = useCallback(() => {
     if (!columnKey) {
@@ -95,7 +95,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
     const next = columnsConfig.map(
       (c) => c.key === columnKey ? { ...c, visible: !c.visible } : c
     );
-    onChangeColumnsConfig(next);
+    onChangeColumnsConfig("table", next);
   }, [columnKey, columnsConfig, onChangeColumnsConfig]);
   const addExternalSort = useCallback(
     (direction) => {

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -123,7 +123,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
   }, [sourceColumns, columnsConfig, rowActionsGetter]);
   const finalColumns = useMemo(() => {
     const DragAndDropHeaderRenderer = getDragHeaderRenderer(
-      onChangeColumnsOrder,
+      (sourceKey, targetKey) => onChangeColumnsOrder("table", sourceKey, targetKey),
       {
         openPopover: popoverHandlers?.openPopover
       }

package/components/DataGrid/subcomponents/Table/index.js

@@ -8,7 +8,7 @@ import { a as filterHeight } from "./subcomponents/SelectColumn.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
 import { u as useFilters } from "../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { m as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { y as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
 function Table(props) {

package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useTheme } from "@mui/material";
-import { e as DATAGRID_SEMANTIC_WIDTHS, f as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
+import { f as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
 import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
   const { rowActionsGetter } = useDataGrid();

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js

@@ -5,7 +5,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { renderHeaderCell } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { N as NameColumnIconStyled, n as NameColumnStyled, I as IconColumnStyled, o as DraggableHeaderRootStyled, B as ButtonHeaderActionsStyled, p as DraggableWrapperInputBaseStyled, q as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { N as NameColumnIconStyled, z as NameColumnStyled, I as IconColumnStyled, B as DraggableHeaderRootStyled, F as ButtonHeaderActionsStyled, G as DraggableWrapperInputBaseStyled, H as IconSearchStyled, J as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../icons.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { I as Icon } from "../../../../Icon/Icon.js";

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { M as MenuListStyled, r as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { M as MenuListStyled, K as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";