@m4l/components 9.4.26 → 9.4.27

package/components/datagrids/slots/DataGridSlot.js

@@ -1,12 +1,12 @@
 import { styled } from "@mui/material/styles";
 import { MenuList, InputBase } from "@mui/material";
-import { b as DATAGRID_PREFIX_NAME } from "../constants.js";
+import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
 import { T as TextEditorSlots, D as DataGridSlots, b as TableSlots, A as ActionsSlots, C as ControlNavigateSlots, R as RowsCountSlots, a as ColumnsConfigSlots, c as ColumnIconFormatterSlots } from "./DataGridEnum.js";
 import { d as dataGridStyles } from "../Datagrid.styles.js";
 import { I as Icon } from "../../Icon/Icon.js";
 import { C as Card } from "../../Card/Card.js";
-import { T as Typography } from "../../mui_extended/Typography/Typography.js";
-import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
+import { T as Typography } from "../../extended/mui/Typography/Typography.js";
+import { I as IconButton } from "../../extended/mui/IconButton/IconButton.js";
 const DataGridRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: DataGridSlots.datagridRoot
@@ -245,54 +245,54 @@ const CellBackgroundWrapperStyled = styled("span", {
 })(dataGridStyles.cellBackgroundWrapper);
 export {
   ActionsRootStyled as A,
-  NameColumnStyled as B,
-  ContainerToggleCardsStyled as C,
+  TableContainerStyled as B,
+  CustomHeaderStyled as C,
   DataGridRootStyled as D,
   EditorCellWrapperStyled as E,
-  IconColumnStyled as F,
-  DraggableHeaderRootStyled as G,
-  ButtonHeaderActionsStyled as H,
-  IconButtonEditStyled as I,
-  DraggableWrapperInputBaseStyled as J,
-  IconSearchStyled as K,
+  CellBackgroundWrapperStyled as F,
+  NameColumnStyled as G,
+  IconColumnStyled as H,
+  InputTextEditorStyled as I,
+  DraggableHeaderRootStyled as J,
+  ButtonHeaderActionsStyled as K,
   LabelHeaderColumnStyled as L,
-  HeaderInputBaseStyled as M,
+  DraggableWrapperInputBaseStyled as M,
   NameColumnIconStyled as N,
-  CellBackgroundWrapperStyled as O,
-  DefaultRenderGroupCellRootStyled as P,
-  DefaultRenderGroupCellTextStyled as Q,
+  IconSearchStyled as O,
+  HeaderInputBaseStyled as P,
+  MenuListStyled as Q,
   RowsCountRootStyled as R,
-  MenuListStyled as S,
+  HeaderRenderClickStyled as S,
   TextToggleCardButtonStyled as T,
-  HeaderRenderClickStyled as U,
+  DefaultRenderGroupCellRootStyled as U,
   ValueColumnStyled as V,
-  WrapperSkeletonStyled as W,
-  TableContainerStyled as X,
-  InputTextEditorStyled as Y,
-  CardToggleButtonStyled as a,
-  CheckboxCellWrapperStyled as b,
-  ColumnsConfigWrapperStyled as c,
-  ColumnsConfigDataGridStyled as d,
-  ColumnsConfigSelColumnsStyled as e,
-  TableWrapperDataGridStyled as f,
-  ColumnsConfigActiosStyled as g,
-  ContentModalSettingStyled as h,
-  ActionsConfigContainerStyled as i,
-  ContainerLeftActionsStyled as j,
-  ContainerRightActionsStyled as k,
-  RowsCountLabelStyled as l,
-  RowsCountValueStyled as m,
-  ControlNavigateStyled as n,
-  CustomHeaderStyled as o,
-  ContainerLabelValueColumnStyled as p,
-  ContentWrapperColumnStyled as q,
-  EditablePlaceholderStyled as r,
+  DefaultRenderGroupCellTextStyled as W,
+  WrapperSkeletonStyled as X,
+  CheckboxCellWrapperStyled as Y,
+  ControlNavigateStyled as a,
+  RowsCountLabelStyled as b,
+  RowsCountValueStyled as c,
+  ActionsConfigContainerStyled as d,
+  ContainerLeftActionsStyled as e,
+  ContainerRightActionsStyled as f,
+  ContainerToggleCardsStyled as g,
+  CardToggleButtonStyled as h,
+  CardsContainerStyled as i,
+  ContainerLabelValueColumnStyled as j,
+  ContentWrapperColumnStyled as k,
+  EditablePlaceholderStyled as l,
+  IconButtonEditStyled as m,
+  ContentModalSettingStyled as n,
+  CardDetailContainerStyled as o,
+  CardContentWrapperStyled as p,
+  CardContentStyled as q,
+  CardStyled as r,
   CardHeaderStyled as s,
   CardHeaderLeftStyled as t,
   CardHeaderRightStyled as u,
-  CardContentWrapperStyled as v,
-  CardContentStyled as w,
-  CardStyled as x,
-  CardDetailContainerStyled as y,
-  CardsContainerStyled as z
+  ColumnsConfigWrapperStyled as v,
+  ColumnsConfigDataGridStyled as w,
+  ColumnsConfigSelColumnsStyled as x,
+  TableWrapperDataGridStyled as y,
+  ColumnsConfigActiosStyled as z
 };

package/components/datagrids/subcomponents/ControlNavigate/ControlNavigate.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { n as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
+import { a as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { R as RowsCount } from "./subcomponents/RowsCount/RowsCount.js";
 import { P as Pager } from "../../../Pager/Pager.js";

package/components/datagrids/subcomponents/ControlNavigate/subcomponents/RowsCount/RowsCount.js

@@ -1,18 +1,18 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { R as RowsCountRootStyled, l as RowsCountLabelStyled, m as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, b as RowsCountLabelStyled, c as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function RowsCount() {
   const { rowsCount, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(RowsCountRootStyled, { children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(RowsCountRootStyled, { ownerState: { size }, children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(RowsCountLabelStyled, { ownerState: { size }, children: getLabel("data_grid.rows") }),
     /* @__PURE__ */ jsx(RowsCountValueStyled, { ownerState: { size }, children: rowsCount })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RowsCountLabelStyled, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40px", height: "16px" }) }),
-    /* @__PURE__ */ jsx(RowsCountValueStyled, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "20px", height: "16px" }) })
+    /* @__PURE__ */ jsx(RowsCountLabelStyled, { ownerState: { size }, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40px", height: "16px" }) }),
+    /* @__PURE__ */ jsx(RowsCountValueStyled, { ownerState: { size }, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "20px", height: "16px" }) })
   ] }) });
 }
 export {

package/components/datagrids/subcomponents/HeaderActions/HeaderActions.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { A as ActionsRootStyled, i as ActionsConfigContainerStyled, j as ContainerLeftActionsStyled, k as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { A as ActionsRootStyled, d as ActionsConfigContainerStyled, e as ContainerLeftActionsStyled, f as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/MobileMenuActions.js";
 import { D as Density } from "./subcomponents/Density/Density.js";
@@ -40,14 +40,14 @@ function HeaderActions(props) {
     /* @__PURE__ */ jsx(MobileMenuActions, { columns }),
     rightActions
   ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { ownerState: { withPager }, children: [
-    /* @__PURE__ */ jsxs(ContainerLeftActionsStyled, { children: [
+    /* @__PURE__ */ jsxs(ContainerLeftActionsStyled, { ownerState: { size: currentSize }, children: [
       leftActions,
       typeof rowHeights !== "number" && viewMode !== "cards" && /* @__PURE__ */ jsx(Density, {}),
       withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
       renderSettings(),
       cardsViewConfig !== void 0 && /* @__PURE__ */ jsx(ViewMode, {})
     ] }),
-    rightActions && /* @__PURE__ */ jsx(ContainerRightActionsStyled, { children: rightActions })
+    rightActions && /* @__PURE__ */ jsx(ContainerRightActionsStyled, { ownerState: { size: currentSize }, children: rightActions })
   ] }) });
 }
 export {

package/components/datagrids/subcomponents/HeaderActions/subcomponents/Filter/Filter.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { I as IconButton } from "../../../../../extended/mui/IconButton/IconButton.js";
 function Filter() {
   const { activeFilters, setActiveFilters } = useFilters();
   const { host_static_assets, environment_assets } = useEnvironment();

package/components/datagrids/subcomponents/HeaderActions/subcomponents/ViewMode/ViewMode.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
-import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
-import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { C as ContainerToggleCardsStyled, a as CardToggleButtonStyled, T as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { g as ContainerToggleCardsStyled, h as CardToggleButtonStyled, T as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
 import { LayoutTableOutlined, LayoutCardOutlined } from "@m4l/icons";
+import { I as IconButton } from "../../../../../extended/mui/IconButton/IconButton.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { P as Popover } from "../../../../../extended/mui/Popover/Popover.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";
 function ViewMode() {
   const { viewMode, onViewModeChange } = useDataGrid();
@@ -59,7 +59,7 @@ function ViewMode() {
             sx: { mt: 0.6 }
           }
         },
-        children: /* @__PURE__ */ jsxs(ContainerToggleCardsStyled, { children: [
+        children: /* @__PURE__ */ jsxs(ContainerToggleCardsStyled, { ownerState: { ownerState }, children: [
           /* @__PURE__ */ jsxs(
             CardToggleButtonStyled,
             {

package/components/datagrids/subcomponents/editors/TextEditor/TextEditor.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Y as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { I as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();
@@ -13,6 +13,7 @@ function TextEditor({
   return /* @__PURE__ */ jsx(
     InputTextEditorStyled,
     {
+      ownerState: {},
       ref: autoFocusAndSelect,
       value: row[column.key],
       onChange: (event) => onRowChange({ ...row, [column.key]: event.target.value }),
@@ -37,6 +38,7 @@ function NumberEditor({
   return /* @__PURE__ */ jsx(
     InputTextEditorStyled,
     {
+      ownerState: {},
       ref: autoFocusAndSelect,
       type: "number",
       value: row[column.key],

package/components/datagrids/views/CardsView/CardsView.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect } from "react";
-import { z as CardsContainerStyled } from "../../slots/DataGridSlot.js";
+import { i as CardsContainerStyled } from "../../slots/DataGridSlot.js";
 import { u as useProcessedColumns } from "./hooks/useProcessedColumns/useProcessedColumns.js";
 import { u as useModalDetail } from "./hooks/useModalDetail/useModalDetail.js";
 import { c as calculateCardHeight } from "./helpers/calculateCardHeight/calculateCardHeight.js";
@@ -77,7 +77,7 @@ function CardsView(props) {
   if (processedColumns.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(CardsContainerStyled, { "data-testid": "cards-container", ref: containerRef, children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "grid-layout", minWidth: 280, children: rows.map((row, rowIndex) => {
+  return /* @__PURE__ */ jsx(CardsContainerStyled, { ownerState: {}, "data-testid": "cards-container", ref: containerRef, children: /* @__PURE__ */ jsx(ContainerFlow, { variant: "grid-layout", minWidth: 280, children: rows.map((row, rowIndex) => {
     const rowKey = rowKeyGetter(row);
     const isChecked = checkedRows?.has(rowKey) || false;
     const showCheckbox = checkedRows !== void 0 && onCheckedRowsChange !== void 0;

package/components/datagrids/views/CardsView/hooks/useCardContent/useCardContent.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { p as ContainerLabelValueColumnStyled, q as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, r as EditablePlaceholderStyled, I as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
+import { j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
 import { ActionsEditOutlined } from "@m4l/icons";
@@ -23,14 +23,15 @@ function useCardContent({
       (config) => config.key === column.key
     );
     const shouldShowTitle = configColumn?.showTitle !== false;
-    return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { ownerState: {}, children: /* @__PURE__ */ jsxs(
       ContentWrapperColumnStyled,
       {
+        ownerState: {},
         onDoubleClick: column.renderEditCell && editingColumnKey !== column.key ? () => {
           setEditingColumnKey(column.key);
         } : void 0,
         children: [
-          shouldShowTitle && /* @__PURE__ */ jsx(LabelHeaderColumnStyled, { variant: "body", color: "text.secondary", children: column.name }),
+          shouldShowTitle && /* @__PURE__ */ jsx(LabelHeaderColumnStyled, { ownerState: {}, variant: "body", color: "text.secondary", children: column.name }),
           (() => {
             if (column.renderEditCell && editingColumnKey === column.key) {
               return /* @__PURE__ */ jsx(EditorCellWrapperStyled, { ownerState: { size }, children: column.renderEditCell({
@@ -76,16 +77,17 @@ function useCardContent({
                   }
                 }
               });
-              return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
+              return /* @__PURE__ */ jsx(ValueColumnStyled, { ownerState: {}, variant: "body", color: "text.primary", children: cellContent });
             }
             const rawValue = row[column.key];
             const isEmpty = rawValue === null || rawValue === void 0 || rawValue === "";
             const isEditable = !!column.renderEditCell;
             if (isEditable) {
-              return /* @__PURE__ */ jsxs(EditablePlaceholderStyled, { children: [
+              return /* @__PURE__ */ jsxs(EditablePlaceholderStyled, { ownerState: {}, children: [
                 /* @__PURE__ */ jsx(
                   ValueColumnStyled,
                   {
+                    ownerState: {},
                     variant: "body",
                     color: isEmpty ? "text.secondary" : "text.primary",
                     children: isEmpty ? getLabel(DICTIONARY.EDIT_PLACEHOLDER) : rawValue
@@ -94,6 +96,7 @@ function useCardContent({
                 /* @__PURE__ */ jsx(
                   IconButtonEditStyled,
                   {
+                    ownerState: {},
                     src: /* @__PURE__ */ jsx(ActionsEditOutlined, {}),
                     onClick: () => {
                       setEditingColumnKey(column.key);
@@ -105,7 +108,7 @@ function useCardContent({
                 )
               ] });
             }
-            return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: row[column.key] ?? "-" });
+            return /* @__PURE__ */ jsx(ValueColumnStyled, { ownerState: {}, variant: "body", color: "text.primary", children: row[column.key] ?? "-" });
           })()
         ]
       }

package/components/datagrids/views/CardsView/hooks/useModalDetail/useModalDetail.js

@@ -3,7 +3,7 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useCallback } from "react";
 import { u as useModal } from "../../../../../../hooks/useModal/index.js";
-import { h as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../slots/DataGridSlot.js";
+import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { C as CardDetails } from "../../subcomponents/CardDetails/CardDetails.js";
@@ -38,8 +38,8 @@ const useModalDetail = ({
             className: "detail-modal",
             variant: "outlined",
             emergeType: "modal",
-            children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { children: [
-              /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { ownerState: {}, children: [
+              /* @__PURE__ */ jsx(DataGridRootStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(
                 CardDetails,
                 {
                   row,

package/components/datagrids/views/CardsView/subcomponents/CardDetails/CardDetails.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { y as CardDetailContainerStyled, p as ContainerLabelValueColumnStyled, q as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, r as EditablePlaceholderStyled, I as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
+import { o as CardDetailContainerStyled, j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
 import { ActionsEditOutlined } from "@m4l/icons";
@@ -32,7 +32,7 @@ function CardDetails({
     }
     return column;
   });
-  return /* @__PURE__ */ jsx(CardDetailContainerStyled, { children: columnsWithRefresh.map((modifiedColumn, index) => {
+  return /* @__PURE__ */ jsx(CardDetailContainerStyled, { ownerState: {}, children: columnsWithRefresh.map((modifiedColumn, index) => {
     const configColumn = viewColumnsConfig.find(
       (config) => config.key === modifiedColumn.key
     );
@@ -40,15 +40,16 @@ function CardDetails({
     const hasInteractiveFormatter = !!modifiedColumn.onAfterChange;
     const columnKey = hasInteractiveFormatter ? `${originalColumn.key}-${refreshCounter}` : `${originalColumn.key}`;
     const shouldShowTitle = configColumn?.showTitle !== false;
-    return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(ContainerLabelValueColumnStyled, { ownerState: {}, children: /* @__PURE__ */ jsxs(
       ContentWrapperColumnStyled,
       {
+        ownerState: {},
         "data-testid": `card-detail-column-${originalColumn.key}`,
         onDoubleClick: modifiedColumn.renderEditCell && editingColumnKey !== modifiedColumn.key ? () => {
           setEditingColumnKey(modifiedColumn.key);
         } : void 0,
         children: [
-          shouldShowTitle && /* @__PURE__ */ jsxs(LabelHeaderColumnStyled, { variant: "body", color: "text.secondary", children: [
+          shouldShowTitle && /* @__PURE__ */ jsxs(LabelHeaderColumnStyled, { ownerState: {}, variant: "body", color: "text.secondary", children: [
             modifiedColumn.name,
             ":"
           ] }),
@@ -97,16 +98,17 @@ function CardDetails({
                   }
                 }
               });
-              return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: cellContent });
+              return /* @__PURE__ */ jsx(ValueColumnStyled, { ownerState: {}, variant: "body", color: "text.primary", children: cellContent });
             }
             const rawValue = currentRow[modifiedColumn.key];
             const isEmpty = rawValue === null || rawValue === void 0 || rawValue === "";
             const isEditable = !!modifiedColumn.renderEditCell;
             if (isEditable) {
-              return /* @__PURE__ */ jsxs(EditablePlaceholderStyled, { children: [
+              return /* @__PURE__ */ jsxs(EditablePlaceholderStyled, { ownerState: {}, children: [
                 /* @__PURE__ */ jsx(
                   ValueColumnStyled,
                   {
+                    ownerState: {},
                     variant: "body",
                     color: isEmpty ? "text.secondary" : "text.primary",
                     children: isEmpty ? getLabel(DICTIONARY.EDIT_PLACEHOLDER) : rawValue
@@ -115,6 +117,7 @@ function CardDetails({
                 /* @__PURE__ */ jsx(
                   IconButtonEditStyled,
                   {
+                    ownerState: {},
                     src: /* @__PURE__ */ jsx(ActionsEditOutlined, {}),
                     onClick: () => {
                       setEditingColumnKey(modifiedColumn.key);
@@ -126,7 +129,7 @@ function CardDetails({
                 )
               ] });
             }
-            return /* @__PURE__ */ jsx(ValueColumnStyled, { variant: "body", color: "text.primary", children: rawValue ?? "-" });
+            return /* @__PURE__ */ jsx(ValueColumnStyled, { ownerState: {}, variant: "body", color: "text.primary", children: rawValue ?? "-" });
           })()
         ]
       }

package/components/datagrids/views/CardsView/subcomponents/CardRow/CardRow.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useMemo } from "react";
-import { v as CardContentWrapperStyled, w as CardContentStyled, x as CardStyled } from "../../../../slots/DataGridSlot.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";
@@ -38,7 +38,7 @@ function CardRowComponent({
     if (hasCustomRender) {
       return customRender.renderContent(row);
     }
-    return /* @__PURE__ */ jsxs(CardContentWrapperStyled, { children: [
+    return /* @__PURE__ */ jsxs(CardContentWrapperStyled, { ownerState: {}, children: [
       /* @__PURE__ */ jsx(
         CardHeader,
         {
@@ -50,7 +50,7 @@ function CardRowComponent({
           onCheckedRowsChange
         }
       ),
-      /* @__PURE__ */ jsx(CardContentStyled, { children: cardContent })
+      /* @__PURE__ */ jsx(CardContentStyled, { ownerState: {}, children: cardContent })
     ] });
   }, [
     hasCustomRender,

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/CardHeader.js

@@ -3,7 +3,7 @@ import { useMemo, useCallback } from "react";
 import { s as CardHeaderStyled, t as CardHeaderLeftStyled, u as CardHeaderRightStyled } from "../../../../../../slots/DataGridSlot.js";
 import { LayoutExpandOutlined } from "@m4l/icons";
 import { C as CheckboxCellAdapter } from "../../../../../adapters/CheckboxCellAdapter/CheckboxCellAdapter.js";
-import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
+import { I as IconButton } from "../../../../../../../extended/mui/IconButton/IconButton.js";
 import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { M as MenuActions } from "../../../../../../../MenuActions/MenuActions.js";
 function CardHeader({
@@ -54,7 +54,7 @@ function CardHeader({
     []
   );
   return /* @__PURE__ */ jsxs(CardHeaderStyled, { ownerState: { hasCheckedRows: showCheckbox }, children: [
-    showCheckbox && /* @__PURE__ */ jsx(CardHeaderLeftStyled, { children: /* @__PURE__ */ jsx(
+    showCheckbox && /* @__PURE__ */ jsx(CardHeaderLeftStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(
       CheckboxCellAdapter,
       {
         value: isChecked ?? false,
@@ -63,7 +63,7 @@ function CardHeader({
         "aria-label": "Select"
       }
     ) }),
-    /* @__PURE__ */ jsxs(CardHeaderRightStyled, { children: [
+    /* @__PURE__ */ jsxs(CardHeaderRightStyled, { ownerState: {}, children: [
       /* @__PURE__ */ jsx(
         IconButton,
         {

package/components/datagrids/views/CardsView/subcomponents/Settings/Settings.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { useModuleDictionary } from "@m4l/core";
 import { SettingsConfigOutlined } from "@m4l/icons";
+import { I as IconButton } from "../../../../../extended/mui/IconButton/IconButton.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { u as useModalSettings } from "./hooks/useModalSettings/useModalSettings.js";
 function Settings(props) {

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

@@ -3,7 +3,7 @@ import { useModuleDictionary } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useRef, useCallback } from "react";
 import { u as useModal } from "../../../../../../../../hooks/useModal/index.js";
-import { h as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../../slots/DataGridSlot.js";
+import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../../slots/DataGridSlot.js";
 import { SettingsConfigOutlined } from "@m4l/icons";
 import { C as ColumnsConfig } from "../../subcomponents/ColumnsConfig/ColumnsConfig.js";
 import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
@@ -43,8 +43,8 @@ const useModalSettings = (size, columns) => {
           className: "settings-modal",
           variant: "outlined",
           emergeType: "modal",
-          children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { classes: classes?.contentModalSetting, children: [
-            /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { ownerState: {}, classes: classes?.contentModalSetting, children: [
+            /* @__PURE__ */ jsx(DataGridRootStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(
               ColumnsConfig,
               {
                 ref,

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

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import DataGrid from "react-data-grid";
-import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
-import { c as ColumnsConfigWrapperStyled, d as ColumnsConfigDataGridStyled, e as ColumnsConfigSelColumnsStyled, f as TableWrapperDataGridStyled, g 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 { ArrowChevronUpOutlined, ArrowChevronMdUpOutlined, ArrowChevronDownOutlined, ArrowChevronMdDownOutlined, ActionsMultiCheckOutlined, ActionsCheckIndeterminateOutlined, ArrowRestoreOutlined } from "@m4l/icons";
+import { I as IconButton } from "../../../../../../../extended/mui/IconButton/IconButton.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {
   return columnsConfig.filter((cConfig) => !cConfig.hidden).map(
@@ -199,8 +199,8 @@ const ColumnsConfig = forwardRef(
       const mySet = /* @__PURE__ */ new Set([row.key]);
       setSelRows(mySet);
     };
-    return /* @__PURE__ */ jsxs(ColumnsConfigWrapperStyled, { ref: divRef, children: [
-      /* @__PURE__ */ jsxs(ColumnsConfigDataGridStyled, { children: [
+    return /* @__PURE__ */ jsxs(ColumnsConfigWrapperStyled, { ownerState: {}, ref: divRef, children: [
+      /* @__PURE__ */ jsxs(ColumnsConfigDataGridStyled, { ownerState: {}, children: [
         /* @__PURE__ */ jsx(ColumnsConfigSelColumnsStyled, { ownerState: { size }, children: getLabel(DICTIONARY.SETTINGS_SEL_COLUMNS) }),
         /* @__PURE__ */ jsx(
           TableWrapperDataGridStyled,
@@ -225,7 +225,7 @@ const ColumnsConfig = forwardRef(
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(ColumnsConfigActiosStyled, { children: [
+      /* @__PURE__ */ jsxs(ColumnsConfigActiosStyled, { ownerState: {}, children: [
         /* @__PURE__ */ jsx(
           IconButton,
           {

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

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState, useEffect } from "react";
+import { useMemo, useState, useRef, useEffect } from "react";
 import DataGrid, { TreeDataGrid } from "react-data-grid";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { X as TableContainerStyled, f as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { B as TableContainerStyled, y as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows/useSortColumnsRows.js";
 import { g as getGroupBy } from "./helpers/getGroupBy/getGroupBy.js";
 import { d as defaultRowGrouper } from "./helpers/defaultRowGrouper/defaultRowGrouper.js";
 import { c as createRowCellsBackgroundMap, p as processColumnsWithRowCellsBackground } from "./helpers/rowCellsBackground/rowCellsBackground.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions/useHeaderMenuActions.js";
-import { a as filterHeight } from "./subcomponents/SelectColumn/SelectColumn.js";
+import { f as filterHeight } from "./subcomponents/SelectColumn/SelectColumn.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
 import { g as getDefaultAction } from "../../helpers/shared/getDefaultAction/getDefaultAction.js";
 import { u as useFilters } from "../../hooks/shared/useFilters/useFilters.js";
@@ -188,7 +188,7 @@ function TableView(props) {
     Boolean(defaultColumnOptions.sortable),
     handleSortFromPopover
   );
-  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(TableContainerStyled, { ownerState: {}, id: "WrapperTable", children: /* @__PURE__ */ jsxs(
     TableWrapperDataGridStyled,
     {
       ownerState: { size, currentRowHeightVariant, currentRowHeight },

package/components/datagrids/views/TableView/helpers/rowCellsBackground/rowCellsBackground.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { O as CellBackgroundWrapperStyled } from "../../../../slots/DataGridSlot.js";
+import { F as CellBackgroundWrapperStyled } from "../../../../slots/DataGridSlot.js";
 const getCellColor = (colorGetter, rowKey, columnKey) => {
   if (colorGetter instanceof Map) {
     return colorGetter.get(`${rowKey}|${columnKey}`);

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

@@ -4,7 +4,7 @@ import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { SELECT_COLUMN_KEY } from "react-data-grid";
 import { g as getDragHeaderRenderer } from "../../helpers/getDragHeaderRenderer/getDragHeaderRenderer.js";
 import { S as SkeletonFormatter } from "../../subcomponents/SkeletonFormatter/SkeletonFormatter.js";
-import { f as filterColumnClassName, S as SelectColumn } from "../../subcomponents/SelectColumn/SelectColumn.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";
@@ -20,6 +20,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 +29,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {