frontend-plus-react 0.1.8 → 0.1.10

package/dist/index.d.cts

@@ -0,0 +1,200 @@
+import React$1, { ReactNode } from 'react';
+import { FieldDefinition, TableDefinition, MenuInfoBase, ProcedureDef, AppConfigClientSetup, DetailTable } from 'backend-plus';
+export { FieldDefinition, TableDefinition } from 'backend-plus';
+import { Details } from 'express-useragent';
+import { RenderCellProps, Column, RenderHeaderCellProps } from 'react-data-grid';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface WScreenProps {
+    screenName: string;
+}
+declare let wScreens: Record<string, React$1.FC<WScreenProps>>;
+
+interface ClientSideProps extends RenderCellProps<any, any> {
+    fieldDefinition: FieldDefinition;
+    tableDefinition: TableDefinition;
+    primaryKey: string[];
+}
+declare let clientSides: Record<string, React$1.FC<ClientSideProps>>;
+declare const extendClientSides: (newRenderers: Record<string, React$1.FC<ClientSideProps>>) => void;
+
+interface ResultOkProps {
+    data: any;
+}
+type ResultComponentMap = {
+    [key: string]: React$1.FC<ResultOkProps>;
+};
+declare let resultsOk: ResultComponentMap;
+
+interface FrontendPlusReactRoutesProps {
+    myRoutes?: React$1.ReactNode;
+}
+declare function FrontendPlusReactRoutes({ myRoutes }: FrontendPlusReactRoutesProps): react_jsx_runtime.JSX.Element;
+interface AppProps {
+    myRoutes?: React$1.ReactNode;
+    myWScreens?: Record<string, React$1.FC<WScreenProps>>;
+    myClientSides?: Record<string, React$1.FC<ClientSideProps>>;
+    myResultsOk?: Record<string, React$1.FC<ResultOkProps>>;
+}
+declare const App: ({ myRoutes, myWScreens, myClientSides, myResultsOk }: AppProps) => react_jsx_runtime.JSX.Element;
+
+interface GenericDataGridProps$1 {
+}
+interface FixedField {
+    fieldName: string;
+    value: any;
+    until?: any;
+}
+interface CellFeedback {
+    rowId: string;
+    columnKey: string;
+    type: 'success' | 'error';
+    message?: 'string';
+}
+interface ConfirmDialogProps {
+    open: boolean;
+    onClose: (confirm: boolean) => void;
+    title: string;
+    message: string;
+}
+interface InputRendererProps<R extends Record<string, any>, S> {
+    column: Column<R, S>;
+    row: R;
+    rowIdx: number;
+    onRowChange: (row: R, commitChanges?: boolean) => void;
+    onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
+    tableDefinition: TableDefinition;
+    cellFeedback: CellFeedback | null;
+    setCellFeedback: (feedback: CellFeedback | null) => void;
+    onKeyPress?: (rowIndex: number, columnKey: string, event: React.KeyboardEvent) => void;
+    setTableData: React.Dispatch<React.SetStateAction<any[]>>;
+    setLocalCellChanges: React.Dispatch<React.SetStateAction<Map<string, Set<string>>>>;
+    localCellChanges: Map<string, Set<string>>;
+    primaryKey: string[];
+}
+interface FilterRendererProps<R extends Record<string, any>, S> {
+    column: Column<R, S>;
+    filters: Record<string, string>;
+    setFilters: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}
+interface GenericDataGridForDetailProps {
+    parentRow: any;
+    detailTableDefinition: DetailTable;
+    parentTableName: string;
+}
+interface SideMenuProps {
+    onMenuItemClick?: () => void;
+}
+interface MenuListItemProps {
+    item: MenuInfoBase;
+    level: number;
+    onMenuItemClick?: () => void;
+}
+interface CustomCellProps<R extends Record<string, any>, SR> extends RenderCellProps<R, SR> {
+    column: RenderCellProps<R, SR>['column'] & {
+        isPK?: boolean;
+    };
+}
+interface CustomHeaderCellProps<R, SR> extends RenderHeaderCellProps<R, SR> {
+    column: RenderHeaderCellProps<R, SR>['column'] & {
+        isPK?: boolean;
+    };
+}
+interface AppContextType {
+    isLoggedIn: boolean;
+    setIsLoggedIn: (loggedIn: boolean) => void;
+    checkSession: () => Promise<void>;
+    showSessionExpiredMessage: boolean;
+    setShowSessionExpiredMessage: (show: boolean) => void;
+}
+interface AppProviderProps {
+    children: ReactNode;
+}
+interface PrivateRouteProps {
+    children: ReactNode;
+}
+interface SnackbarState {
+    open: boolean;
+    message: string;
+    severity: 'success' | 'error' | 'info' | 'warning';
+    duration?: number | null;
+}
+interface SnackbarContextType {
+    showSnackbar: (message: string, severity: 'success' | 'error' | 'info' | 'warning', duration?: number | null) => void;
+    showSuccess: (message: string, duration?: number | null) => void;
+    showError: (message: string, duration?: number | null) => void;
+    showWarning: (message: string, duration?: number | null) => void;
+    showInfo: (message: string, duration?: number | null) => void;
+}
+interface SnackbarProviderProps {
+    children: ReactNode;
+}
+interface UseApiCallResult<T> {
+    callApi: (procedureName: string, params: Record<string, any>, opts?: {
+        reportOnSnackbar: boolean;
+    }) => Promise<T | undefined>;
+    loading: boolean;
+    error: Error | null;
+}
+interface ClientContextState {
+    menu: MenuInfoBase[];
+    procedure: {
+        [key: string]: ProcedureDef;
+    };
+    procedures: ProcedureDef[];
+    config: AppConfigClientSetup;
+    useragent: Details;
+    username: string;
+    status: 'idle' | 'loading' | 'succeeded' | 'failed';
+    error: string | null;
+}
+interface MenuUiState {
+    isDrawerOpen: boolean;
+    subMenuOpenStates: {
+        [key: string]: boolean;
+    };
+}
+interface RouterState {
+    currentPath: string;
+    previousPath: string | null;
+    redirectPath: string | null;
+}
+interface FetchApiOptions extends RequestInit {
+}
+
+interface GenericDataGridProps {
+    tableName: string;
+    fixedFields?: FixedField[];
+    gridStyles?: React$1.CSSProperties;
+}
+declare const GenericDataGrid: React$1.FC<GenericDataGridProps>;
+
+declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+
+declare const MainLayout: React$1.FC;
+
+declare const SnackbarProvider: React$1.FC<SnackbarProviderProps>;
+declare const useSnackbar: () => SnackbarContextType;
+
+declare const useApp: () => {
+    clientContext: ClientContextState;
+    isLoggedIn: boolean;
+    setIsLoggedIn: (loggedIn: boolean) => void;
+    checkSession: () => Promise<void>;
+    showSessionExpiredMessage: boolean;
+    setShowSessionExpiredMessage: (show: boolean) => void;
+};
+declare const AppProvider: React$1.FC<AppProviderProps>;
+
+declare const useApiCall: <T = any>() => UseApiCallResult<T>;
+
+/**
+ * Hook personalizado para manejar la lógica de cierre de sesión.
+ * Limpia el estado del frontend y realiza la petición al backend.
+ * @returns Una función 'logout' que, al ser llamada, cierra la sesión.
+ */
+declare const useLogout: () => () => Promise<void>;
+
+declare const cambiarGuionesBajosPorEspacios: (texto: string) => string;
+
+export { App, type AppContextType, type AppProps, AppProvider, type AppProviderProps, type CellFeedback, type ClientContextState, ConfirmDialog, type ConfirmDialogProps, type CustomCellProps, type CustomHeaderCellProps, type FetchApiOptions, type FilterRendererProps, type FixedField, FrontendPlusReactRoutes, GenericDataGrid, type GenericDataGridForDetailProps, type GenericDataGridProps$1 as GenericDataGridProps, type InputRendererProps, MainLayout, type MenuListItemProps, type MenuUiState, type PrivateRouteProps, type RouterState, type SideMenuProps, type SnackbarContextType, SnackbarProvider, type SnackbarProviderProps, type SnackbarState, type UseApiCallResult, cambiarGuionesBajosPorEspacios, clientSides, extendClientSides, resultsOk as resultComponents, useApiCall, useApp, useLogout, useSnackbar, wScreens };

package/dist/index.d.ts

@@ -0,0 +1,200 @@
+import React$1, { ReactNode } from 'react';
+import { FieldDefinition, TableDefinition, MenuInfoBase, ProcedureDef, AppConfigClientSetup, DetailTable } from 'backend-plus';
+export { FieldDefinition, TableDefinition } from 'backend-plus';
+import { Details } from 'express-useragent';
+import { RenderCellProps, Column, RenderHeaderCellProps } from 'react-data-grid';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface WScreenProps {
+    screenName: string;
+}
+declare let wScreens: Record<string, React$1.FC<WScreenProps>>;
+
+interface ClientSideProps extends RenderCellProps<any, any> {
+    fieldDefinition: FieldDefinition;
+    tableDefinition: TableDefinition;
+    primaryKey: string[];
+}
+declare let clientSides: Record<string, React$1.FC<ClientSideProps>>;
+declare const extendClientSides: (newRenderers: Record<string, React$1.FC<ClientSideProps>>) => void;
+
+interface ResultOkProps {
+    data: any;
+}
+type ResultComponentMap = {
+    [key: string]: React$1.FC<ResultOkProps>;
+};
+declare let resultsOk: ResultComponentMap;
+
+interface FrontendPlusReactRoutesProps {
+    myRoutes?: React$1.ReactNode;
+}
+declare function FrontendPlusReactRoutes({ myRoutes }: FrontendPlusReactRoutesProps): react_jsx_runtime.JSX.Element;
+interface AppProps {
+    myRoutes?: React$1.ReactNode;
+    myWScreens?: Record<string, React$1.FC<WScreenProps>>;
+    myClientSides?: Record<string, React$1.FC<ClientSideProps>>;
+    myResultsOk?: Record<string, React$1.FC<ResultOkProps>>;
+}
+declare const App: ({ myRoutes, myWScreens, myClientSides, myResultsOk }: AppProps) => react_jsx_runtime.JSX.Element;
+
+interface GenericDataGridProps$1 {
+}
+interface FixedField {
+    fieldName: string;
+    value: any;
+    until?: any;
+}
+interface CellFeedback {
+    rowId: string;
+    columnKey: string;
+    type: 'success' | 'error';
+    message?: 'string';
+}
+interface ConfirmDialogProps {
+    open: boolean;
+    onClose: (confirm: boolean) => void;
+    title: string;
+    message: string;
+}
+interface InputRendererProps<R extends Record<string, any>, S> {
+    column: Column<R, S>;
+    row: R;
+    rowIdx: number;
+    onRowChange: (row: R, commitChanges?: boolean) => void;
+    onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
+    tableDefinition: TableDefinition;
+    cellFeedback: CellFeedback | null;
+    setCellFeedback: (feedback: CellFeedback | null) => void;
+    onKeyPress?: (rowIndex: number, columnKey: string, event: React.KeyboardEvent) => void;
+    setTableData: React.Dispatch<React.SetStateAction<any[]>>;
+    setLocalCellChanges: React.Dispatch<React.SetStateAction<Map<string, Set<string>>>>;
+    localCellChanges: Map<string, Set<string>>;
+    primaryKey: string[];
+}
+interface FilterRendererProps<R extends Record<string, any>, S> {
+    column: Column<R, S>;
+    filters: Record<string, string>;
+    setFilters: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}
+interface GenericDataGridForDetailProps {
+    parentRow: any;
+    detailTableDefinition: DetailTable;
+    parentTableName: string;
+}
+interface SideMenuProps {
+    onMenuItemClick?: () => void;
+}
+interface MenuListItemProps {
+    item: MenuInfoBase;
+    level: number;
+    onMenuItemClick?: () => void;
+}
+interface CustomCellProps<R extends Record<string, any>, SR> extends RenderCellProps<R, SR> {
+    column: RenderCellProps<R, SR>['column'] & {
+        isPK?: boolean;
+    };
+}
+interface CustomHeaderCellProps<R, SR> extends RenderHeaderCellProps<R, SR> {
+    column: RenderHeaderCellProps<R, SR>['column'] & {
+        isPK?: boolean;
+    };
+}
+interface AppContextType {
+    isLoggedIn: boolean;
+    setIsLoggedIn: (loggedIn: boolean) => void;
+    checkSession: () => Promise<void>;
+    showSessionExpiredMessage: boolean;
+    setShowSessionExpiredMessage: (show: boolean) => void;
+}
+interface AppProviderProps {
+    children: ReactNode;
+}
+interface PrivateRouteProps {
+    children: ReactNode;
+}
+interface SnackbarState {
+    open: boolean;
+    message: string;
+    severity: 'success' | 'error' | 'info' | 'warning';
+    duration?: number | null;
+}
+interface SnackbarContextType {
+    showSnackbar: (message: string, severity: 'success' | 'error' | 'info' | 'warning', duration?: number | null) => void;
+    showSuccess: (message: string, duration?: number | null) => void;
+    showError: (message: string, duration?: number | null) => void;
+    showWarning: (message: string, duration?: number | null) => void;
+    showInfo: (message: string, duration?: number | null) => void;
+}
+interface SnackbarProviderProps {
+    children: ReactNode;
+}
+interface UseApiCallResult<T> {
+    callApi: (procedureName: string, params: Record<string, any>, opts?: {
+        reportOnSnackbar: boolean;
+    }) => Promise<T | undefined>;
+    loading: boolean;
+    error: Error | null;
+}
+interface ClientContextState {
+    menu: MenuInfoBase[];
+    procedure: {
+        [key: string]: ProcedureDef;
+    };
+    procedures: ProcedureDef[];
+    config: AppConfigClientSetup;
+    useragent: Details;
+    username: string;
+    status: 'idle' | 'loading' | 'succeeded' | 'failed';
+    error: string | null;
+}
+interface MenuUiState {
+    isDrawerOpen: boolean;
+    subMenuOpenStates: {
+        [key: string]: boolean;
+    };
+}
+interface RouterState {
+    currentPath: string;
+    previousPath: string | null;
+    redirectPath: string | null;
+}
+interface FetchApiOptions extends RequestInit {
+}
+
+interface GenericDataGridProps {
+    tableName: string;
+    fixedFields?: FixedField[];
+    gridStyles?: React$1.CSSProperties;
+}
+declare const GenericDataGrid: React$1.FC<GenericDataGridProps>;
+
+declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+
+declare const MainLayout: React$1.FC;
+
+declare const SnackbarProvider: React$1.FC<SnackbarProviderProps>;
+declare const useSnackbar: () => SnackbarContextType;
+
+declare const useApp: () => {
+    clientContext: ClientContextState;
+    isLoggedIn: boolean;
+    setIsLoggedIn: (loggedIn: boolean) => void;
+    checkSession: () => Promise<void>;
+    showSessionExpiredMessage: boolean;
+    setShowSessionExpiredMessage: (show: boolean) => void;
+};
+declare const AppProvider: React$1.FC<AppProviderProps>;
+
+declare const useApiCall: <T = any>() => UseApiCallResult<T>;
+
+/**
+ * Hook personalizado para manejar la lógica de cierre de sesión.
+ * Limpia el estado del frontend y realiza la petición al backend.
+ * @returns Una función 'logout' que, al ser llamada, cierra la sesión.
+ */
+declare const useLogout: () => () => Promise<void>;
+
+declare const cambiarGuionesBajosPorEspacios: (texto: string) => string;
+
+export { App, type AppContextType, type AppProps, AppProvider, type AppProviderProps, type CellFeedback, type ClientContextState, ConfirmDialog, type ConfirmDialogProps, type CustomCellProps, type CustomHeaderCellProps, type FetchApiOptions, type FilterRendererProps, type FixedField, FrontendPlusReactRoutes, GenericDataGrid, type GenericDataGridForDetailProps, type GenericDataGridProps$1 as GenericDataGridProps, type InputRendererProps, MainLayout, type MenuListItemProps, type MenuUiState, type PrivateRouteProps, type RouterState, type SideMenuProps, type SnackbarContextType, SnackbarProvider, type SnackbarProviderProps, type SnackbarState, type UseApiCallResult, cambiarGuionesBajosPorEspacios, clientSides, extendClientSides, resultsOk as resultComponents, useApiCall, useApp, useLogout, useSnackbar, wScreens };

package/dist/index.js

@@ -1384,7 +1384,7 @@ function InputRenderer({
   onClose,
   cellFeedback,
   setCellFeedback,
-  onEnterPress,
+  onKeyPress,
   setTableData,
   setLocalCellChanges,
   localCellChanges,
@@ -1536,14 +1536,13 @@ function InputRenderer({
     initialRowId
   ]);
   const handleKeyDown = useCallback3((event) => {
-    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight"].includes(event.key)) {
+    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(event.key)) {
       handleCommit(editingValue, true, true);
-      event.preventDefault();
-      if (onEnterPress) {
-        onEnterPress(rowIdx, column.key, event.key);
+      if (onKeyPress) {
+        onKeyPress(rowIdx, column.key, event);
       }
     }
-  }, [handleCommit, editingValue, column.key, rowIdx, onEnterPress]);
+  }, [handleCommit, editingValue, column.key, rowIdx, onKeyPress]);
   const handleBlur = useCallback3(() => {
     handleCommit(editingValue, true, false);
   }, [handleCommit, editingValue]);
@@ -1590,7 +1589,7 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
         setTableData,
         cellFeedback,
         setCellFeedback,
-        handleEnterKeyPressInEditor,
+        handleKeyPressInEditor,
         localCellChanges,
         setLocalCellChanges
       } = defaultColumn;
@@ -1609,7 +1608,7 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
             tableDefinition,
             setCellFeedback,
             cellFeedback,
-            onEnterPress: (rowIndex, columnKey, key) => handleEnterKeyPressInEditor(rowIndex, columnKey, key, allColumns),
+            onKeyPress: (rowIndex, columnKey, event) => handleKeyPressInEditor(rowIndex, columnKey, event, allColumns),
             setTableData,
             setLocalCellChanges,
             localCellChanges,
@@ -1882,22 +1881,27 @@ var GenericDataGrid = ({
     }
     return rows;
   }, [tableData, filters, isFilterRowVisible]);
-  const handleEnterKeyPressInEditor = useCallback4((rowIndex, columnKey, key, currentColumns) => {
+  const handleKeyPressInEditor = useCallback4((rowIndex, columnKey, event, currentColumns) => {
     if (dataGridRef.current && tableDefinition) {
       const currentColumnIndex = currentColumns.findIndex((col) => col.key === columnKey);
       const editableColumns = currentColumns.filter((col) => {
         const fieldDefinition = tableDefinition.fields.find((f) => f.name === col.key);
         return col.key !== "actionsColumn" && col.customType != "detail" && (fieldDefinition?.editable !== false && !fieldDefinition?.clientSide);
       });
+      const { key, currentTarget } = event;
+      const input = currentTarget;
       if (currentColumnIndex !== -1 && editableColumns.length > 0) {
         const editableColumnKeys = editableColumns.map((col) => col.key);
         let currentEditableColumnIndex = editableColumnKeys.indexOf(columnKey);
-        if (currentEditableColumnIndex !== -1) {
+        const calcularColumnaSiguienteYHacerFoco = () => {
           let nextEditableColumnIndex = currentEditableColumnIndex + 1;
           let nextRowIndex = rowIndex;
           if (nextEditableColumnIndex >= editableColumns.length) {
             nextEditableColumnIndex = 0;
             nextRowIndex++;
+            while (filteredRows[nextRowIndex] && filteredRows[nextRowIndex][DETAIL_ROW_INDICATOR]) {
+              nextRowIndex++;
+            }
             if (nextRowIndex >= filteredRows.length) {
               nextRowIndex = 0;
             }
@@ -1905,6 +1909,71 @@ var GenericDataGrid = ({
           const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
           const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
           dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+        };
+        const calcularColumnaAnteriorYHacerFoco = () => {
+          let nextEditableColumnIndex = currentEditableColumnIndex - 1;
+          let nextRowIndex = rowIndex;
+          if (nextEditableColumnIndex <= 0) {
+            nextEditableColumnIndex = 0;
+          }
+          const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
+          const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
+          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+        };
+        const calcularFilaSiguienteYHacerFoco = () => {
+          let nextRowIndex = rowIndex;
+          nextRowIndex++;
+          while (filteredRows[nextRowIndex] && filteredRows[nextRowIndex][DETAIL_ROW_INDICATOR]) {
+            nextRowIndex++;
+          }
+          if (nextRowIndex >= filteredRows.length) {
+            return;
+          }
+          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: currentColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+        };
+        const calcularFilaAnteriorYHacerFoco = () => {
+          let nextRowIndex = rowIndex;
+          nextRowIndex--;
+          while (filteredRows[nextRowIndex] && filteredRows[nextRowIndex][DETAIL_ROW_INDICATOR]) {
+            nextRowIndex--;
+          }
+          if (nextRowIndex < 0) {
+            return;
+          }
+          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: currentColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+        };
+        if (currentEditableColumnIndex !== -1) {
+          switch (true) {
+            case ["Enter", "Tab"].includes(key): {
+              calcularColumnaSiguienteYHacerFoco();
+              break;
+            }
+            case key == "ArrowRight": {
+              const cursorPosition = input.selectionStart;
+              const inputValueLength = input.value.length;
+              if (cursorPosition === inputValueLength) {
+                calcularColumnaSiguienteYHacerFoco();
+              }
+              break;
+            }
+            case key == "ArrowLeft": {
+              const cursorPosition = input.selectionStart;
+              if (cursorPosition === 0) {
+                calcularColumnaAnteriorYHacerFoco();
+              }
+              break;
+            }
+            case key == "ArrowUp": {
+              calcularFilaAnteriorYHacerFoco();
+              break;
+            }
+            case key == "ArrowDown": {
+              calcularFilaSiguienteYHacerFoco();
+              break;
+            }
+            default:
+              break;
+          }
         }
       }
     }
@@ -1937,7 +2006,7 @@ var GenericDataGrid = ({
         resizable: true,
         sortable: true,
         editable: isFieldEditable,
-        handleEnterKeyPressInEditor,
+        handleKeyPressInEditor,
         flexGrow: 1,
         minWidth: 60,
         renderHeaderCell: (props) => defaultColumnHeaderCellRenderer(props, fieldDef),
@@ -2020,7 +2089,7 @@ var GenericDataGrid = ({
     theme.palette.error.light,
     theme.palette.info.light,
     theme.palette.action.selected,
-    handleEnterKeyPressInEditor,
+    handleKeyPressInEditor,
     setTableData,
     localCellChanges,
     handleDeleteRow,
@@ -2041,16 +2110,24 @@ var GenericDataGrid = ({
     });
   };
   const handleCellKeyDown = (args, event) => {
-    if (["Tab", "Enter"].includes(event.key)) {
+    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(event.key)) {
       event.preventGridDefault();
     }
   };
-  const handleCellClick = useCallback4((args) => {
-    deselectAllOtherGrids(dataGridRef.current?.element);
-    args.selectCell(true);
+  const handleCellMouseDown = useCallback4((_args, event) => {
+    event.preventGridDefault();
+  }, []);
+  const handlCellDoubleClick = useCallback4((_args, event) => {
+    event.preventGridDefault();
+  }, []);
+  const handleCellClick = useCallback4((args, _event) => {
     const fieldDefinition = tableDefinition?.fields.find((f) => f.name === args.column.key);
     const isFixedField = fixedFields?.some((f) => f.fieldName === args.column.key);
     const isEditable = fieldDefinition?.editable !== false && !isFixedField;
+    if (isEditable) {
+      deselectAllOtherGrids(dataGridRef.current?.element);
+      args.selectCell(true);
+    }
     console.log("Clicked column index:", args.column.idx);
     console.log("Clicked row index:", args.rowIdx);
     console.log("Is editable:", isEditable);
@@ -2124,6 +2201,8 @@ var GenericDataGrid = ({
             topSummaryRows: isFilterRowVisible ? [{ id: "filterRow" }] : void 0,
             summaryRowHeight: isFilterRowVisible ? 30 : 0,
             renderers: { noRowsFallback: /* @__PURE__ */ jsx12(EmptyRowsRenderer, {}) },
+            onCellMouseDown: handleCellMouseDown,
+            onCellDoubleClick: handlCellDoubleClick,
             onCellClick: handleCellClick,
             onCellKeyDown: handleCellKeyDown
           }
@@ -3454,6 +3533,7 @@ var MenuTablePage = () => {
 var MenuTablePage_default = MenuTablePage;
 
 // src/App.tsx
+import { Box as Box19 } from "@mui/material";
 import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var LocationTracker = () => {
   const location = useLocation4();
@@ -3480,7 +3560,13 @@ function FrontendPlusReactRoutes({ myRoutes }) {
         Route,
         {
           path: `/wScreens/${screenName}`,
-          element: React11.createElement(wScreens[screenName], { screenName })
+          element: React11.createElement(
+            Box19,
+            {
+              sx: { pt: 3, pl: 4 }
+            },
+            React11.createElement(wScreens[screenName], { screenName })
+          )
         },
         screenName
       )),
@@ -3488,7 +3574,7 @@ function FrontendPlusReactRoutes({ myRoutes }) {
         Route,
         {
           path: "/wScreens-fallback/:screenName",
-          element: /* @__PURE__ */ jsx26(FallbackWScreen, { screenName: ":screenName" })
+          element: /* @__PURE__ */ jsx26(Box19, { sx: { p: 3 }, children: /* @__PURE__ */ jsx26(FallbackWScreen, { screenName: ":screenName" }) })
         }
       ),
       /* @__PURE__ */ jsx26(Route, { path: "*", element: /* @__PURE__ */ jsx26("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
@@ -3520,8 +3606,7 @@ var App = ({
       /* @__PURE__ */ jsx26(
         FrontendPlusReactRoutes,
         {
-          myRoutes,
-          allWScreens: myWScreens
+          myRoutes
         }
       ),
       /* @__PURE__ */ jsx26(SessionExpiredMessage_default, {})