@m4l/components 9.4.10-JT14012026.beta.1 → 9.4.11

package/components/datagrids/views/TableView/hooks/useSortColumnsRows/useSortColumnsRows.js

@@ -1,11 +1,9 @@
-import { jsx } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { SELECT_COLUMN_KEY } from "react-data-grid";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../../constants.js";
 import { g as getDragHeaderRenderer } from "../../helpers/getDragHeaderRenderer/getDragHeaderRenderer.js";
 import { S as SkeletonFormatter } from "../../subcomponents/SkeletonFormatter/SkeletonFormatter.js";
 import { a as filterColumnClassName, S as SelectColumn } from "../../subcomponents/SelectColumn/SelectColumn.js";
-import { R as RenderGroupCell } from "../../subcomponents/RenderGroupCell/RenderGroupCell.js";
 import { A as ActionsColumn } from "../../subcomponents/ActionsColumn/ActionsColumn.js";
 import { R as RadioSelectColumn } from "../../subcomponents/RadioSelectColumn/RadioSelectColumn.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -20,6 +18,7 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
+    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -28,6 +27,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {
@@ -39,12 +39,6 @@ function getComparator(columns, sortColumn) {
   }
 }
 const getColumIndex = (key, columnsConfig) => columnsConfig.findIndex((columnConfig) => columnConfig.key === key);
-const findKeyInColumns = (key, columns) => {
-  const index = columns.findIndex(
-    (column) => key === column.key && column.hidden === false
-  );
-  return index !== -1;
-};
 const getInOrderColumns = (columns, hasCheckedRows, checkedRowsMultiple, columnsConfig, columnsWidths, rowActionsGetter) => {
   let filteredSortedColumns = columns.filter((column) => {
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
@@ -106,6 +100,12 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
   );
   const isSkeleton = useModuleSkeleton();
   const { activeFilters, filters } = useFilters();
+  const findKeyInColumns = (key, cols) => {
+    const index = cols.findIndex(
+      (column) => key === column.key && column.hidden === false
+    );
+    return index !== -1;
+  };
   useEffect(() => {
     setColumns(
       getInOrderColumns(
@@ -124,17 +124,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
     if (JSON.stringify(finalSortedColumns) !== JSON.stringify(sortColumns)) {
       setSortColumns(finalSortedColumns);
     }
-  }, [
-    sourceColumns,
-    columnsConfig,
-    rowActionsGetter,
-    checkedRows,
-    onCheckedRowsChange,
-    checkedRowsMultiple,
-    columnsWidths,
-    sortColumns,
-    setSortColumns
-  ]);
+  }, [sourceColumns, columnsConfig, rowActionsGetter]);
   const finalColumns = useMemo(() => {
     const DragAndDropHeaderRenderer = getDragHeaderRenderer(
       (sourceKey, targetKey) => onChangeColumnsOrder("table", sourceKey, targetKey),
@@ -149,7 +139,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         cellClass,
         headerCellClass: cellClass
       };
-      if (newColumn.key === SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
+      if (newColumn.key === DATAGRID_SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
         return newColumn;
       }
       if (isSkeleton) {
@@ -171,20 +161,6 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         newColumn.headerCellClass = `${newColumn.headerCellClass} ${filterColumnClassName}`.trim();
       }
       newColumn.renderHeaderCell = DragAndDropHeaderRenderer;
-      const columnConfig = columnsConfig.find((cfg) => cfg.key === c.key);
-      const isGroupedInConfig = columnConfig?.grouped === true;
-      const originalColumn = sourceColumns.find((col) => col.key === c.key);
-      const hasCustomGroupCell = originalColumn?.renderGroupCell !== void 0;
-      if (isGroupedInConfig) {
-        const customGroupCell = hasCustomGroupCell ? originalColumn?.renderGroupCell : void 0;
-        newColumn.renderGroupCell = (cellProps) => /* @__PURE__ */ jsx(
-          RenderGroupCell,
-          {
-            ...cellProps,
-            customRenderGroupCell: customGroupCell
-          }
-        );
-      }
       return newColumn;
     });
   }, [
@@ -192,9 +168,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
     columns,
     activeFilters,
     onChangeColumnsOrder,
-    popoverHandlers,
-    columnsConfig,
-    sourceColumns
+    popoverHandlers
   ]);
   const finalRows = useMemo(() => {
     const nextRows = sourceRows.filter((r) => {
@@ -252,7 +226,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
       return 0;
     });
     return nextRows;
-  }, [sourceRows, sortColumns, filters, columns]);
+  }, [sourceRows, sortColumns, filters]);
   return { finalColumns, sortColumns, setSortColumns, finalRows };
 };
 export {

package/components/datagrids/views/TableView/subcomponents/ActionsColumn/ActionsColumn.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { e as DATAGRID_SEMANTIC_WIDTHS, d as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
+import { f as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {

package/components/datagrids/views/TableView/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -6,7 +6,7 @@ import { P as MenuListStyled, Q as HeaderRenderClickStyled } from "../../../../s
 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";
-import { f as DATAGRID_HEADER_RENDER_CLICK_KEY } from "../../../../constants.js";
+import { g as DATAGRID_HEADER_RENDER_CLICK_KEY } from "../../../../constants.js";
 import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
 function HeaderRenderClick(props) {
   const {

package/components/datagrids/views/TableView/subcomponents/RadioSelectColumn/RadioSelectColumn.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { SELECT_COLUMN_KEY } from "react-data-grid";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../../constants.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { R as RadioFormatter } from "./subcomponents/RadioFormatter/RadioFormatter.js";
 function RadioSelectGroupFormatter(_props) {
@@ -28,7 +28,7 @@ function RadioSelectColumnHeaderRenderer(_props) {
   return null;
 }
 const RadioSelectColumn = {
-  key: SELECT_COLUMN_KEY,
+  key: DATAGRID_SELECT_COLUMN_KEY,
   name: "",
   width: 32,
   minWidth: 32,

package/components/datagrids/views/TableView/subcomponents/SelectColumn/SelectColumn.js

@@ -1,49 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import { SELECT_COLUMN_KEY, SelectCellFormatter } from "react-data-grid";
+import { useRowSelection, SelectCellFormatter } from "react-data-grid";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../../constants.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
-function getAllChildRowIds(childRows, rowKeyGetter) {
-  const ids = [];
-  for (const row of childRows) {
-    if ("childRows" in row && Array.isArray(row.childRows)) {
-      ids.push(...getAllChildRowIds(row.childRows, rowKeyGetter));
-    } else {
-      ids.push(rowKeyGetter(row));
-    }
-  }
-  return ids;
-}
 function SelectGroupFormatter(props) {
-  const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
-  const { childRows } = props;
-  const childRowIds = getAllChildRowIds(childRows, rowKeyGetter);
-  const selectedCount = childRowIds.filter((id) => checkedRows?.has(id)).length;
-  const totalCount = childRowIds.length;
-  const allChildrenChecked = totalCount > 0 && selectedCount === totalCount;
-  const someChildrenChecked = selectedCount > 0 && selectedCount < totalCount;
+  const { isRowSelected, onRowSelectionChange } = useRowSelection();
   const onChange = (checked) => {
-    if (!onCheckedRowsChange) {
-      return;
-    }
-    const newCheckedRows = new Set(checkedRows);
-    if (checked) {
-      childRowIds.forEach((id) => newCheckedRows.add(id));
-    } else {
-      childRowIds.forEach((id) => newCheckedRows.delete(id));
-    }
-    onCheckedRowsChange(newCheckedRows);
+    onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
   };
-  return /* @__PURE__ */ jsx(
-    SelectCellFormatter,
-    {
-      value: allChildrenChecked,
-      indeterminate: someChildrenChecked,
-      tabIndex: props.tabIndex,
-      onChange,
-      "aria-label": "Select Group"
-    }
-  );
+  const cellFormater = SelectCellFormatter({
+    value: isRowSelected,
+    tabIndex: props.tabIndex,
+    onChange,
+    "aria-label": "Select Group"
+  });
+  return cellFormater;
 }
 function SelectFormatter(props) {
   const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
@@ -68,30 +40,26 @@ function SelectFormatter(props) {
 }
 const SelectColumnHeaderRenderer = (props) => {
   const { rows, rowKeyGetter, onCheckedRowsChange, checkedRows } = useDataGrid();
-  const selectedCount = checkedRows?.size ?? 0;
-  const totalCount = rows.length;
-  const allRowsChecked = totalCount > 0 && selectedCount === totalCount;
-  const someRowsChecked = selectedCount > 0 && selectedCount < totalCount;
   const onAllRowsCheckedChange = (checked) => {
     if (!onCheckedRowsChange) {
       return;
     }
     if (checked) {
-      onCheckedRowsChange(new Set(rows.map((row) => rowKeyGetter(row))));
+      onCheckedRowsChange(new Set(rows.map((r) => rowKeyGetter(r))));
     } else {
       onCheckedRowsChange(/* @__PURE__ */ new Set());
     }
   };
+  const allRowsChecked = rows.length === checkedRows?.size;
   return SelectCellFormatter({
     "aria-label": "Select All",
     tabIndex: props.tabIndex,
     value: allRowsChecked,
-    indeterminate: someRowsChecked,
     onChange: onAllRowsCheckedChange
   });
 };
 const SelectColumn = {
-  key: SELECT_COLUMN_KEY,
+  key: DATAGRID_SELECT_COLUMN_KEY,
   name: "",
   width: 32,
   minWidth: 32,

package/components/datagrids/views/TableView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js

@@ -11,24 +11,13 @@ import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/use
 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 BASE_MODAL_WIDTH = 520;
-const GROUP_COLUMN_WIDTH = 80;
 const useModalSettings = (size, columns) => {
   const { openModal, closeModal } = useModal();
-  const {
-    columnsConfig,
-    onChangeColumnsConfig,
-    currentRowHeight,
-    classes
-  } = useDataGrid();
+  const { columnsConfig, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
   const ref = useRef(null);
-  const hasGroupableColumns = columns.some(
-    (col) => col.groupable === true || col.grouped === true
-  );
-  const modalWidth = hasGroupableColumns ? BASE_MODAL_WIDTH + GROUP_COLUMN_WIDTH : BASE_MODAL_WIDTH;
   const onCloseSettings = useCallback(() => {
     closeModal();
   }, [closeModal]);
@@ -42,7 +31,7 @@ const useModalSettings = (size, columns) => {
   };
   const onClickSettings = () => {
     openModal({
-      initialWidth: modalWidth,
+      initialWidth: 500,
       initialHeight: 680,
       fullScreen: isMobile,
       window: /* @__PURE__ */ jsx(

package/components/datagrids/views/TableView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.js

@@ -8,24 +8,17 @@ import { v as ColumnsConfigWrapperStyled, w as ColumnsConfigDataGridStyled, x as
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {
-  return columnsConfig.filter((cConfig) => !cConfig.hidden).map((cConfig) => {
-    const originalColumn = columns.find((c) => c.key === cConfig.key);
-    const isGroupable = originalColumn?.groupable === true;
-    const isGroupedNow = cConfig.grouped === true;
-    return {
+  return columnsConfig.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,
       frozen: cConfig.frozen === void 0 ? false : cConfig.frozen,
-      grouped: isGroupedNow,
-      // Checkbox habilitado solo si groupable=true
-      groupable: isGroupable,
       originalIndex: cConfig.originalIndex,
       originalFrozen: cConfig.originalFrozen,
-      originalVisible: cConfig.originalVisible,
-      originalGrouped: cConfig.originalGrouped ?? false
-    };
-  });
+      originalVisible: cConfig.originalVisible
+    })
+  );
 }
 const getAlignClass = (align) => {
   const cellClass = align !== void 0 ? `rdg-cell-align-${align}` : "";
@@ -58,8 +51,8 @@ const ColumnsConfig = forwardRef(
       onClickIntro: handleIntro,
       current: divRef.current
     }));
-    const columnsdata_grid = useMemo(() => {
-      const baseColumns = [
+    const columnsdata_grid = useMemo(
+      () => [
         {
           key: "name",
           name: getLabel(DICTIONARY.SETTINGS_COLUMN_NAME),
@@ -71,7 +64,7 @@ const ColumnsConfig = forwardRef(
         {
           key: "originalIndex",
           name: getLabel(DICTIONARY.SETTINGS_COLUMN_POSITION),
-          width: 70,
+          width: 50,
           type: "number",
           ...getAlignClass("center")
         },
@@ -91,24 +84,9 @@ const ColumnsConfig = forwardRef(
           renderCell: ColumnInteractiveCheckFormatter,
           ...getAlignClass("center")
         }
-      ];
-      const hasGroupableColumns = columns.some(
-        (col) => col.groupable === true || col.grouped === true
-      );
-      if (hasGroupableColumns) {
-        baseColumns.push({
-          key: "grouped",
-          name: getLabel(DICTIONARY.SETTINGS_COLUMN_GROUP),
-          width: 80,
-          type: "boolean",
-          renderCell: ColumnInteractiveCheckFormatter,
-          // disabledKey hace que el checkbox esté deshabilitado cuando groupable=false
-          disabledKey: "groupable",
-          ...getAlignClass("center")
-        });
-      }
-      return baseColumns;
-    }, [getLabel, columns]);
+      ],
+      [getLabel]
+    );
     const checkAll = () => {
       setRows(rows.map((row) => ({ ...row, visible: true })));
     };
@@ -121,16 +99,13 @@ const ColumnsConfig = forwardRef(
           ...row,
           visible: row.originalVisible,
           frozen: row.originalFrozen,
-          grouped: row.originalGrouped,
           index: row.originalIndex
         })).sort((a, b) => a.index - b.index)
       );
     };
     useEffect(() => {
       if (isInit === false) {
-        setRows(
-          getRowsFromColumnsConfig(columnsConfig, columns)
-        );
+        setRows(getRowsFromColumnsConfig(columnsConfig, columns));
       }
       setIsInit(false);
     }, [columnsConfig]);
@@ -198,7 +173,6 @@ const ColumnsConfig = forwardRef(
       );
     };
     const handleIntro = () => {
-      const groupedRows = rows.filter((row) => row.grouped);
       const newColumnsConfig = columnsConfig.map((columnConfig) => {
         const newColumnConfig = { ...columnConfig };
         if (!columnConfig.hidden) {
@@ -208,19 +182,11 @@ const ColumnsConfig = forwardRef(
             newColumnConfig.frozen = columnConfigRow.frozen;
           }
           const rowIndex = rows.findIndex(
-            (currentRow) => currentRow.key === columnConfig.key
+            (row) => row.key === columnConfig.key
           );
           if (rowIndex > -1) {
             newColumnConfig.index = rowIndex;
           }
-          const rowWithGroupConfig = rows.find((currentRow) => currentRow.key === columnConfig.key);
-          if (rowWithGroupConfig) {
-            newColumnConfig.grouped = rowWithGroupConfig.grouped;
-            const groupOrderIndex = groupedRows.findIndex(
-              (groupedRow) => groupedRow.key === columnConfig.key
-            );
-            newColumnConfig.groupOrder = groupOrderIndex > -1 ? groupOrderIndex : rowIndex;
-          }
         }
         return newColumnConfig;
       }).sort((a, b) => getRowIndex(a) - getRowIndex(b));

package/components/datagrids/views/TableView/subcomponents/Settings/subcomponents/ColumnsConfig/types.d.ts

@@ -2,49 +2,27 @@ import { DataGridContextProps, IConfigColumn } from '../../../../../../contexts/
 import { GridProps } from '../../../../../../types';
 import { Column } from 'react-data-grid';
 export interface Row {
-    /** Key única de la columna */
     key: string;
-    /** Nombre visible de la columna */
     name: string;
-    /** Si la columna está visible */
     visible: boolean;
-    /** Si la columna está congelada */
     frozen: boolean;
-    /** Si la columna está agrupada actualmente */
-    grouped: boolean;
-    /** Si la columna PUEDE ser agrupada (está en groupColumns) */
-    groupable: boolean;
-    /** Ancho de la columna */
     width: number;
-    /** Índice actual de la columna */
     index: number;
-    /** Índice original de la columna */
     originalIndex: number;
-    /** Visibilidad original de la columna */
     originalVisible: boolean;
-    /** Estado congelado original de la columna */
     originalFrozen: boolean;
-    /** Estado agrupado original de la columna */
-    originalGrouped: boolean;
 }
 export type ColumnsConfigRef = {
     onClickIntro: () => void;
     current: HTMLDivElement | null;
 };
 export interface ConfigProps {
-    /** Función para cerrar el modal de configuración */
     onCloseSettings: () => void;
-    /** Columnas del DataGrid */
     columns: readonly Column<any, any>[];
-    /** Configuración actual de las columnas */
     columnsConfig: IConfigColumn[];
-    /** Callback para cambiar la configuración de columnas */
     onChangeColumnsConfig: (newColumnsConfig: IConfigColumn[]) => void;
-    /** Altura de las filas en el grid interno del modal */
     rowHeight: number;
-    /** Clases CSS personalizadas */
     classes: DataGridContextProps<unknown, unknown>['classes'];
-    /** Tamaño del componente */
     size: GridProps<unknown, unknown>['size'];
 }
 export interface CheckFormatterProps {

package/components/datagrids/views/adapters/CheckboxCellAdapter/CheckboxCellAdapter.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import { SelectCellFormatter } from "react-data-grid";
-import { X as CheckboxCellWrapperStyled } from "../../../slots/DataGridSlot.js";
+import { S as CheckboxCellWrapperStyled } from "../../../slots/DataGridSlot.js";
 import { a as DataGridContext } from "../../../contexts/DataGridContext/DataGridContext.js";
 import { R as RadioFormatter } from "../../TableView/subcomponents/RadioSelectColumn/subcomponents/RadioFormatter/RadioFormatter.js";
 import { C as CheckboxFormatter } from "../../TableView/subcomponents/CheckboxFormatter/CheckboxFormatter.js";

package/components/extended/React-Resizable/Resizable/slots/ResizableSlots.d.ts

@@ -1,4 +1,4 @@
 import { Resizable } from 'react-resizable';
-export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableProps, "children" | "resizeHandles" | "height" | "width" | "className" | "onResize" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableProps, "height" | "width" | "className" | "children" | "onResize" | "resizeHandles" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
     ref?: import('react').Ref<Resizable> | undefined;
 }>;

package/components/extended/React-Resizable/ResizableBox/slots/ResizableBoxSlots.d.ts

@@ -1,4 +1,4 @@
 import { ResizableBox } from 'react-resizable';
-export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableBoxProps, "children" | "resizeHandles" | "height" | "width" | "className" | "style" | "onResize" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableBoxProps, "height" | "width" | "className" | "style" | "children" | "onResize" | "resizeHandles" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
     ref?: import('react').Ref<ResizableBox> | undefined;
 }>;