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

package/@types/types.d.ts

@@ -38,7 +38,7 @@ import {
   TextFieldOwnerState,
   TextFieldSlotsType,
 } from '../components/mui_extended/TextField/types';
-type Theme = Omit<MuiTheme, 'components'>;
+// type Theme = Omit<MuiTheme, 'components'>;
 import {
   TooltipOwnerState,
   TooltipSlotsType,

package/components/AccountPopover/AccountPopover.js

@@ -1,11 +1,10 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useNetwork } from "@m4l/core";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { M as MenuPopover } from "./subcomponents/MenuPopover/MenuPopover.js";
 import { A as ACCOUNT_KEY_POPOVER } from "./constants.js";
 import { I as IconButtonRootStyled, A as AvatarStyled } from "./slots/AccountPopoverSlots.js";
 import { M as MyAvatar } from "./subcomponents/MyAvatar/MyAvatar.js";
-import { u as useStateRef } from "../../hooks/useStateRef/index.js";
 import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
 import { A as AccountPopoverSlots } from "./slots/AccountPopoverEnum.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
@@ -20,7 +19,7 @@ const AccountPopover = (props) => {
   } = props;
   const { avatarUrl, firstName = "firstname", lastName = "lastname" } = userData || {};
   const [asyncState, setAsyncState] = useState("unLoad");
-  const [open, setOpen] = useStateRef(null);
+  const [anchorEl, setAnchorEl] = useState(null);
   const [menuData, setMenuData] = useState([]);
   const { networkOperation } = useNetwork();
   const { currentSize } = useComponentSize(size);
@@ -50,13 +49,13 @@ const AccountPopover = (props) => {
     return function cleanUp() {
       mounted = false;
     };
-  }, [open]);
-  const handleClose = () => {
-    setOpen(null);
-  };
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
+  }, [anchorEl]);
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, [setAnchorEl]);
+  const handleOpen = useCallback((event) => {
+    setAnchorEl(event.currentTarget);
+  }, [setAnchorEl]);
   const classes = getComponentClasses(ACCOUNT_KEY_POPOVER, AccountPopoverSlots);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -66,11 +65,11 @@ const AccountPopover = (props) => {
         icon: /* @__PURE__ */ jsx(MyAvatar, { size: currentSize, avatarUrl, firstName, lastName, slotAvatar: AvatarStyled }),
         src: "",
         onClick: handleOpen,
-        selected: open ? true : false,
+        selected: anchorEl ? true : false,
         className: classes.iconButtonRoot
       }
     ),
-    /* @__PURE__ */ jsx(
+    !!anchorEl && /* @__PURE__ */ jsx(
       MenuPopover,
       {
         size: currentSize,
@@ -81,7 +80,7 @@ const AccountPopover = (props) => {
         handleLogOut,
         userData,
         settingsHandleOpen,
-        open,
+        anchorEl,
         handleClose
       }
     )

package/components/AccountPopover/subcomponents/MenuPopover/MenuPopover.d.ts

@@ -4,4 +4,4 @@ import { MenuPopoverProps } from './types';
  * Se debe refactorizar el componente PopOver para recibir la propr de size.
  * @param props
  */
-export declare const MenuPopover: (props: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuPopover: (props: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/AccountPopover/subcomponents/MenuPopover/MenuPopover.js

@@ -10,7 +10,7 @@ const MenuPopover = (props) => {
   const {
     version,
     handleClose,
-    open,
+    anchorEl,
     userData,
     settingsHandleOpen,
     handleLogOut,
@@ -29,19 +29,22 @@ const MenuPopover = (props) => {
     handleClose();
   };
   const handleClickSetting = () => {
-    settingsHandleOpen();
     handleClose();
+    settingsHandleOpen();
   };
   const handleLogout = () => {
     handleLogOut();
     handleClose();
   };
+  if (!anchorEl) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     PopoverStyled,
     {
       size,
-      open: Boolean(open),
-      anchorEl: open,
+      open: Boolean(anchorEl),
+      anchorEl,
       onClose: handleClose,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },

package/components/AccountPopover/subcomponents/MenuPopover/types.d.ts

@@ -5,6 +5,6 @@ import { AccountPopoverProps, AsyncTypes, RightMenuData } from '../../types';
 export interface MenuPopoverProps extends AccountPopoverProps {
     data: Array<RightMenuData> | [];
     asyncState: AsyncTypes;
-    open: HTMLElement | null;
+    anchorEl: HTMLElement | null;
     handleClose: () => void;
 }

package/components/Chip/Chip.js

@@ -23,6 +23,7 @@ const Chip = forwardRef((props, ref) => {
     className,
     dataTestId,
     disabledDeleteButton,
+    ellipsis = false,
     ...others
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -34,8 +35,9 @@ const Chip = forwardRef((props, ref) => {
     variant,
     color,
     opacity,
-    externalColor
-  }), [currentSize, variant, color, opacity, externalColor, onClick]);
+    externalColor,
+    ellipsis
+  }), [onClick, currentSize, variant, color, opacity, externalColor, ellipsis]);
   const renderIcon = useMemo(() => (icon, instaceDataTestId) => {
     if (!icon) {
       return null;
@@ -46,7 +48,7 @@ const Chip = forwardRef((props, ref) => {
       return /* @__PURE__ */ jsx(
         IconStyled,
         {
-          ownerState: { ...ownerState },
+          ownerState,
           src: icon,
           size: currentSize,
           instaceDataTestId
@@ -60,7 +62,7 @@ const Chip = forwardRef((props, ref) => {
       {
         "data-testid": "SkeletonButton",
         width: skeletonWidth,
-        ownerState: { ...ownerState }
+        ownerState
       }
     );
   }
@@ -75,7 +77,7 @@ const Chip = forwardRef((props, ref) => {
       role: "button-chip",
       size: currentSize,
       onClick,
-      ownerState: { ...ownerState },
+      ownerState,
       className: clsx(className, CHIP_CLASSES.root),
       ref,
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: dataTestId } : {},
@@ -83,7 +85,7 @@ const Chip = forwardRef((props, ref) => {
       ...others,
       children: [
         renderIcon(startIcon, "ChipStartIcon"),
-        /* @__PURE__ */ jsx(TextChipStyled, { size: currentSize, ownerState: { ...ownerState }, color, children: label }),
+        /* @__PURE__ */ jsx(TextChipStyled, { size: currentSize, ownerState: { ...ownerState }, color, ellipsis, children: label }),
         renderIcon(endIcon, "ChipEndIcon"),
         onDeleted && /* @__PURE__ */ jsx(
           IconButtonStyled,
@@ -91,7 +93,7 @@ const Chip = forwardRef((props, ref) => {
             ...iconButtonProps,
             src: iconClose,
             size: currentSize,
-            ownerState: { ...ownerState },
+            ownerState,
             onClick: handleDelete,
             disabled: disabledDeleteButton,
             className: CHIP_CLASSES.closeIcon

package/components/Chip/ChipStyles.js

@@ -1,35 +1,5 @@
 import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
-import { darken, lighten } from "@mui/material/styles";
-const getExternalColor = (externalColor) => {
-  try {
-    return {
-      color: externalColor.color,
-      backgroundColor: lighten(externalColor.backgroundColor, 0.5),
-      backgroundHover: lighten(externalColor.backgroundColor, 0.3),
-      backgroundActive: lighten(externalColor.backgroundColor, 0.7),
-      colorTone: lighten(externalColor.color, 1),
-      backgroundColorTone: externalColor.backgroundColor,
-      backgroundHoverTone: lighten(externalColor.backgroundColor, 0.2),
-      backgroundActiveTone: darken(externalColor.backgroundColor, 0.2)
-    };
-  } catch (_error) {
-    return {
-      color: "",
-      backgroundColor: "",
-      backgroundHover: "",
-      backgroundActive: "",
-      colorTone: "",
-      backgroundColorTone: "",
-      backgroundHoverTone: "",
-      backgroundActiveTone: ""
-    };
-  }
-};
-const getColors = (theme, ownerState) => {
-  const finalPalette = ownerState?.externalColor ? getExternalColor(ownerState?.externalColor) : theme.vars.palette.chips[ownerState?.color ?? "default"][ownerState?.variant || "contained"];
-  const color = ownerState?.opacity ? finalPalette.color : finalPalette.colorTone;
-  return { color, finalPalette };
-};
+import { g as getColors } from "./helpers.js";
 const chipStyles = {
   /**
    * Styles for the root element of the chip.
@@ -46,6 +16,9 @@ const chipStyles = {
       borderRadius: theme.vars.size.borderRadius["r1-5"],
       gap: theme.vars.size.baseSpacings["sp0-5"],
       width: "max-content",
+      ...ownerState?.ellipsis && {
+        maxWidth: "100%"
+      },
       cursor: "pointer",
       color,
       backgroundColor: !(ownerState?.variant === "outlined") ? bgColor : "transparent",

package/components/Chip/helpers.d.ts

@@ -0,0 +1,10 @@
+import { ChipColor } from '@m4l/styles';
+import { Theme } from '@mui/material/styles';
+import { ChipOwnerState } from './types';
+/**
+ * Obtiene los colores del chip
+ */
+export declare const getColors: (theme: Theme, ownerState: ChipOwnerState) => {
+    color: string;
+    finalPalette: ChipColor;
+};

package/components/Chip/helpers.js

@@ -0,0 +1,34 @@
+import { darken, lighten } from "@mui/material/styles";
+const getExternalColor = (externalColor) => {
+  try {
+    return {
+      color: externalColor.color,
+      backgroundColor: lighten(externalColor.backgroundColor, 0.5),
+      backgroundHover: lighten(externalColor.backgroundColor, 0.3),
+      backgroundActive: lighten(externalColor.backgroundColor, 0.7),
+      colorTone: lighten(externalColor.color, 1),
+      backgroundColorTone: externalColor.backgroundColor,
+      backgroundHoverTone: lighten(externalColor.backgroundColor, 0.2),
+      backgroundActiveTone: darken(externalColor.backgroundColor, 0.2)
+    };
+  } catch (_error) {
+    return {
+      color: "",
+      backgroundColor: "",
+      backgroundHover: "",
+      backgroundActive: "",
+      colorTone: "",
+      backgroundColorTone: "",
+      backgroundHoverTone: "",
+      backgroundActiveTone: ""
+    };
+  }
+};
+const getColors = (theme, ownerState) => {
+  const finalPalette = ownerState?.externalColor ? getExternalColor(ownerState?.externalColor) : theme.vars.palette.chips[ownerState?.color ?? "default"][ownerState?.variant || "contained"];
+  const color = ownerState?.opacity ? finalPalette.color : finalPalette.colorTone;
+  return { color, finalPalette };
+};
+export {
+  getColors as g
+};

package/components/Chip/types.d.ts

@@ -78,12 +78,18 @@ export interface ChipProps {
      * If the `Chip` delete button is disabled.
      */
     disabledDeleteButton?: boolean;
+    /**
+     * If the `Chip` is ellipsis.
+     */
+    ellipsis?: boolean;
 }
 /**
  * Owner state of the `Chip` used to define internal style and behavior properties.
  */
 export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'externalColor' | 'opacity' | 'size' | 'color'> {
     interactive: boolean;
+    ellipsis: boolean;
+    [key: string]: unknown;
 }
 /**
  * Defines the types of Slots available for the `Chip`.

package/components/DataGrid/DataGrid.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { T as Table } from "./subcomponents/Table/index.js";
 import { H as HeaderActions } from "./subcomponents/HeaderActions/index.js";
 import { F as FilterProvider } from "./contexts/FilterContext/index.js";
 import { D as DataGridProvider } from "./contexts/DataGridContext/index.js";
@@ -12,6 +11,7 @@ import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { useRef } from "react";
 import { C as ControlNavigate } from "./subcomponents/ControlNavigate/ControlNavigate.js";
 import { useModuleSkeleton } from "@m4l/core";
+import { R as RenderContent } from "./subcomponents/RenderContent/index.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 function DataGrid(props) {
   const {
@@ -37,7 +37,9 @@ function DataGrid(props) {
     onChangeUserColumns,
     size,
     externalSortSettings,
-    externalFilterSettings
+    externalFilterSettings,
+    defaultViewMode,
+    cardsViewConfig
   } = props;
   const {
     withSettings,
@@ -91,6 +93,8 @@ function DataGrid(props) {
           size: currentSize,
           externalSortSettings,
           externalFilterSettings,
+          defaultViewMode,
+          cardsViewConfig,
           children: /* @__PURE__ */ jsxs(FilterProvider, { initialActiveFilters: false, children: [
             withActions && actionsProps && /* @__PURE__ */ jsx(
               HeaderActions,
@@ -108,7 +112,7 @@ function DataGrid(props) {
             ),
             CustomHeader ? /* @__PURE__ */ jsx(CustomHeaderStyled, { ownerState, children: CustomHeader }) : null,
             /* @__PURE__ */ jsx(
-              Table,
+              RenderContent,
               {
                 id,
                 withActions,
@@ -117,7 +121,8 @@ function DataGrid(props) {
                 selectedRows,
                 onSelectedRowsChange,
                 rowKeyGetter,
-                onRowsChange
+                onRowsChange,
+                cardsViewConfig
               }
             ),
             withPager && /* @__PURE__ */ jsx(

package/components/DataGrid/Datagrid.styles.js

@@ -639,6 +639,276 @@ const dataGridStyles = {
       }
     };
   },
+  /**
+   * Estilos para el wrapper del CheckboxCellAdapter
+   * Aplica los mismos estilos que los checkboxes dentro de celdas rdg
+   */
+  checkboxCellWrapper: ({ theme, ownerState }) => ({
+    "& .checkbox-checked": {
+      "& path:first-of-type": {
+        fill: theme.vars.palette.primary.main
+      },
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+        minHeight: size,
+        height: size
+      }))
+    },
+    "& .checkbox-unChecked": {
+      "& path": {
+        fill: theme.vars.palette.text.primary
+      },
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+        minHeight: size,
+        height: size
+      }))
+    },
+    "& .MuiCheckbox-root": {
+      "& > svg": {
+        color: theme.vars.palette.text.secondary
+      }
+    }
+  }),
+  /**
+   * Contenedor de los cards
+   */
+  containerToggleCards: ({ theme }) => ({
+    display: "grid",
+    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+    gap: theme.vars.size.baseSpacings.sp3,
+    padding: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Botón de toggle de cards
+   */
+  cardToggleCardButton: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    cursor: "pointer",
+    height: theme.vars.size.baseSpacings.sp14,
+    width: theme.vars.size.baseSpacings.sp14,
+    gap: theme.vars.size.baseSpacings.sp2,
+    borderColor: ownerState?.isActive ? theme.vars.palette.primary.toneOpacity : theme.vars.palette.border.disabled
+  }),
+  /**
+   * Texto del botón de toggle de cards
+   */
+  textToggleCardButton: ({ theme, ownerState }) => ({
+    "&.M4LTypography-root": {
+      color: ownerState?.isActive ? theme.vars.palette.primary.semanticText : theme.vars.palette.text.secondary,
+      cursor: "pointer"
+    }
+  }),
+  /**
+   * Contenedor de los cards
+   */
+  cardsContainer: () => ({
+    height: "auto",
+    overflow: "auto"
+  }),
+  /**
+   * Card de la vista cards
+   */
+  card: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    minWidth: "280px",
+    maxWidth: "580px",
+    cursor: "pointer",
+    // Si está checked (pero no selected), border de checked
+    ...ownerState?.checked && !ownerState?.selected && {
+      borderColor: theme.vars.palette.primary.activeOpacity
+    },
+    // Si está selected, usar el color original del Card (primary.enabled)
+    // Este tiene prioridad sobre checked
+    ...ownerState?.selected && {
+      borderColor: theme.vars.palette.primary.selected
+    }
+  }),
+  /**
+   * Header de la card con checkbox y acciones
+   */
+  cardHeader: ({ theme, ownerState }) => ({
+    display: "flex",
+    justifyContent: ownerState?.hasCheckedRows ? "space-between" : "flex-end",
+    alignItems: "center",
+    width: "100%",
+    height: "24px",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Lado izquierdo del header (checkbox)
+   */
+  cardHeaderLeft: () => ({
+    display: "flex",
+    alignItems: "center"
+  }),
+  /**
+   * Lado derecho del header (botones de acción)
+   */
+  cardHeaderRight: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Contenedor de las columnas de la card
+   */
+  containerLabelValueColumn: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: ownerState?.hasActions ? "row" : "column",
+    justifyContent: ownerState?.hasActions ? "space-between" : "flex-start",
+    alignItems: ownerState?.hasActions ? "center" : "start",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    width: ownerState?.hasActions ? "100%" : "auto"
+  }),
+  /**
+   * Contenedor del contenido de la columna
+   */
+  contentWrapperColumn: ({ theme, ownerState }) => ({
+    flex: ownerState?.hasActions ? 1 : "none",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Contenedor del detalle de la card
+   */
+  cardDetailContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp3,
+    padding: theme.vars.size.baseSpacings.sp3,
+    height: "100%",
+    overflow: "auto"
+  }),
+  /**
+   * Etiqueta de la columna
+   */
+  labelHeaderColumn: () => ({}),
+  /**
+   * Valor de la columna
+   */
+  valueColumn: () => ({}),
+  /**
+   * Contenedor del editor en la card
+   */
+  editorCellWrapper: ({ theme, ownerState }) => ({
+    overflow: "clip",
+    outline: "none",
+    color: theme.vars.palette.text.primary,
+    paddingBlock: 0,
+    alignContent: "center",
+    backgroundColor: "inherit",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    inlineSize: "100%",
+    alignSelf: "stretch",
+    boxSizing: "border-box",
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "body"
+    ),
+    ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+      minHeight: size,
+      height: 24,
+      lineHeight: `${size} !important`
+    })),
+    "& input": {
+      width: "100%",
+      textAlign: "inherit",
+      color: theme.vars.palette.text.secondary,
+      padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp2}`,
+      border: theme.vars.size.baseSpacings.sp0,
+      borderTop: "0.5px solid",
+      borderBottom: theme.vars.size.borderStroke.container,
+      borderLeft: "0.5px solid",
+      borderRight: "0.5px solid",
+      borderColor: "transparent",
+      ...theme.colorSchemes.finalTheme.typography.body,
+      "&:focus": {
+        borderTop: "0.5px solid",
+        borderBottom: theme.vars.size.borderStroke.container,
+        borderLeft: "0.5px solid",
+        borderRight: "0.5px solid",
+        borderColor: `${theme.vars.palette.primary.focusVisible} !important`,
+        outline: "none",
+        boxShadow: "none"
+      },
+      "&:hover": {
+        borderTop: "0.5px solid",
+        borderBottom: theme.vars.size.borderStroke.container,
+        borderLeft: "0.5px solid",
+        borderRight: "0.5px solid",
+        borderColor: "transparent",
+        outline: "none"
+      }
+    }
+  }),
+  /**
+   * Header de la card personalizada (avatar + nombre + email)
+   */
+  customCardHeader: ({ theme }) => ({
+    display: "flex",
+    gap: theme.vars.size.baseSpacings.sp4,
+    alignItems: "center",
+    marginBottom: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Avatar con iniciales
+   */
+  customCardAvatar: ({ theme }) => ({
+    width: "32px",
+    height: "32px",
+    borderRadius: theme.vars.size.borderRadius.r3,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.primary.toneOpacity,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }),
+  /**
+   * Contenedor del nombre y email
+   */
+  customCardNameEmail: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Campo con icono (reutilizable para phone, IP, etc)
+   */
+  customCardFieldWithIcon: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Contenedor del contenido del campo (label + valor)
+   */
+  customCardFieldContent: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Contenedor del icono con border
+   */
+  customCardIconContainer: ({ theme }) => ({
+    width: "24px",
+    height: "24px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.vars.size.borderRadius.r2,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.primary.toneOpacity,
+    flexShrink: 0
+  }),
   /**
    * Estilos para el header del componente
    */

package/components/DataGrid/constants.js

@@ -35,7 +35,7 @@ export {
   DATAGRID_ROW_HEADER_HEIGHTS as b,
   DATAGRID_ID_DICTIONARY as c,
   DATAGRID_SELECT_COLUMN_KEY as d,
-  DATAGRID_SEMANTIC_WIDTHS as e,
-  DATAGRID_ACTIONS_COLUMN_KEY as f,
+  DATAGRID_ACTIONS_COLUMN_KEY as e,
+  DATAGRID_SEMANTIC_WIDTHS as f,
   DATAGRID_HEADER_RENDER_CLICK_KEY as g
 };