@m4l/components 9.3.28 → 9.3.29

package/components/Color/Color.js

@@ -1,156 +1,57 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useState, useMemo } from "react";
-import { useTheme } from "@mui/material";
+import { useMemo } from "react";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
 import { C as COLOR_KEY_COMPONENT } from "./constants.js";
 import { C as ColorSlots } from "./slots/ColorEnum.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
-import { C as ColorPickerStyled, I as IconButtonRootStyled, P as PopoverStyled, S as SketchPickerStyled } from "./slots/ColorSlots.js";
-import { A as ActionsContainer } from "../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { C as ColorStyled, R as RootStyled } from "./slots/ColorSlots.js";
 import { I as Icon } from "../Icon/Icon.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/ActionCancel.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/ActionIntro.js";
 const Color = (props) => {
   const {
-    className,
     size,
-    disabled,
+    className,
     value,
-    role,
     error = false,
-    onChange,
-    dataTestId,
-    ...other
+    dataTestId = "m4l_color_test"
   } = props;
-  const theme = useTheme();
   const { host_static_assets, environment_assets } = useEnvironment();
   const classes = getComponentClasses(COLOR_KEY_COMPONENT, ColorSlots);
   const urlIcon = `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/out_of.svg`;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [tempColor, setTempColor] = useState(value ?? void 0);
-  const handleIntro = () => {
-    setAnchorEl(null);
-    if (tempColor !== value) {
-      onChange(tempColor ?? null);
-      setTempColor(tempColor);
-    }
-  };
-  const handleColorChange = (color) => {
-    setTempColor(color.hex);
-  };
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const isSkeleton = useModuleSkeleton();
-  const { color: _, ...otherWithoutColor } = other;
-  const ownerState = useMemo(() => ({
-    size: adjustedSize,
-    disabled,
-    value,
-    error
-  }), [adjustedSize, disabled, value, error]);
-  const icon = useMemo(() => value ? /* @__PURE__ */ jsx(
-    ColorPickerStyled,
-    {
-      role: "status",
-      "aria-live": "polite",
-      ownerState: { ...ownerState },
-      disabled,
-      size: adjustedSize
-    }
-  ) : /* @__PURE__ */ jsx(
-    Icon,
-    {
-      src: urlIcon,
-      disabled,
-      size: adjustedSize
-    }
-  ), [value, ownerState, disabled, adjustedSize, urlIcon]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      IconButtonRootStyled,
-      {
-        ...otherWithoutColor,
-        className: clsx(className, classes.root),
-        onClick: (event) => setAnchorEl(event.currentTarget),
-        "aria-busy": isSkeleton,
-        disabled: isSkeleton || disabled,
-        ownerState: { ...ownerState },
-        size: adjustedSize,
-        icon
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      PopoverStyled,
+  const ownerState = useMemo(
+    () => ({
+      size: adjustedSize,
+      value,
+      error
+    }),
+    [adjustedSize, value, error]
+  );
+  const content = useMemo(
+    () => value ? /* @__PURE__ */ jsx(
+      ColorStyled,
       {
-        className: clsx(classes.popover, className),
-        size,
+        role: "status",
+        "aria-live": "polite",
         ownerState: { ...ownerState },
-        open: Boolean(anchorEl),
-        arrowType: "no-arrow",
-        anchorEl,
-        onClose: () => setAnchorEl(null),
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "left"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "left"
-        },
-        sx: {
-          mt: error ? theme.vars.size.baseSpacings.sp7 : 0
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            SketchPickerStyled,
-            {
-              ownerState: { ownerState },
-              color: tempColor ?? void 0,
-              onChange: handleColorChange,
-              disableAlpha: true,
-              presetColors: [
-                "#D0021B",
-                "#F5A623",
-                "#F8E71C",
-                "#8B572A",
-                "#7ED321",
-                "#417505",
-                "#BD10E0",
-                "#9013FE",
-                "#4A90E2",
-                "#50E3C2",
-                "#B8E986",
-                "#000000",
-                "#4A4A4A",
-                "#9B9B9B",
-                "#FFFFFF"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(ActionsContainer, { children: [
-            /* @__PURE__ */ jsx(
-              ActionCancel,
-              {
-                onClick: () => setAnchorEl(null),
-                size
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ActionIntro,
-              {
-                ...getPropDataTestId(COLOR_KEY_COMPONENT, ColorSlots.root, dataTestId),
-                onClick: handleIntro,
-                size
-              }
-            )
-          ] })
-        ]
+        size: adjustedSize
       }
-    )
-  ] });
+    ) : /* @__PURE__ */ jsx(Icon, { src: urlIcon, size: adjustedSize }),
+    [value, ownerState, adjustedSize, urlIcon]
+  );
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      className: clsx(className, classes.root),
+      "aria-busy": isSkeleton,
+      "data-testid": dataTestId,
+      ownerState,
+      children: content
+    }
+  );
 };
 export {
   Color as C

package/components/Color/Color.styles.js

@@ -4,31 +4,15 @@ const colorStyles = {
    */
   root: ({ theme, ownerState }) => ({
     // Estructura y layout básico
-    display: "flex",
+    display: "inline-flex",
+    alignItems: "center",
     justifyContent: "center",
-    width: "fit-content",
-    height: "fit-content",
-    cursor: ownerState?.disabled ? "not-allowed" : "pointer",
-    color: theme.vars.palette.text.primary,
-    pointerEvents: ownerState?.disabled ? "none" : "auto",
     //Espaciado
     padding: 0,
     // Radio de borde
-    borderRadius: theme.size.borderRadius.r1,
+    borderRadius: theme.size.borderRadius["r1-5"],
+    backgroundColor: theme.vars.palette.default.enabled,
     border: ownerState?.error ? `1px solid ${theme.vars.palette.error.enabled}` : void 0,
-    /**
-     *Pseudoclases**:
-     */
-    "&:hover": {
-      background: ownerState?.error ? theme.vars.palette.error.hoverOpacity : theme.vars.palette.default.hoverOpacity
-    },
-    "&:active": {
-      background: ownerState?.error ? theme.vars.palette.error.activeOpacity : theme.vars.palette.default.activeOpacity
-    },
-    "&:focus-visible": {
-      outline: `1px solid ${theme.vars.palette.primary.focusVisible}`,
-      outlineOffset: 2
-    },
     // Sizes medium
     ...ownerState?.size === "medium" && {
       ...theme.generalSettings.isMobile ? {
@@ -53,14 +37,13 @@ const colorStyles = {
   /**
    * Estilos para el selector de color.
    */
-  colorPicker: ({ theme, ownerState }) => ({
+  color: ({ theme, ownerState }) => ({
     //Estilos generales
-    right: 0,
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
     backgroundColor: ownerState?.value,
-    borderRadius: theme.size.borderRadius["r0-5"],
+    borderRadius: theme.size.borderRadius.r1,
     // Sizes medium
     ...ownerState?.size === "medium" && {
       ...theme.generalSettings.isMobile ? {
@@ -82,107 +65,6 @@ const colorStyles = {
       }
     },
     variants: []
-  }),
-  /**
-   * Popover
-   */
-  popover: ({ theme, ownerState }) => ({
-    "& .MuiPaper-root": {
-      padding: 0,
-      border: theme.vars.size.borderStroke.container,
-      borderColor: ownerState?.error ? theme.vars.palette.border.error : theme.vars.palette.border.default,
-      borderRadius: theme.vars.size.borderRadius.r1,
-      "& .MuiButtonBase-root": {
-        // Ajuste específico de estilo para el contenido de los botones
-        justifyContent: "center"
-      }
-    }
-  }),
-  /**
-   * estilos en picker
-   */
-  sketchPicker: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp3,
-    boxShadow: "none !important",
-    background: `${theme.vars.palette.background.default} !important`,
-    "& > div": {
-      // Caja de selección de color
-      "&:nth-of-type(1)": {
-        borderRadius: theme.vars.size.borderRadius.r1
-      },
-      // Caja de selección horizontal de color
-      "&:nth-of-type(2)": {
-        display: "flex !important",
-        justifyContent: "center !important",
-        alignItems: "center !important",
-        gap: theme.vars.size.baseSpacings.sp3,
-        "& > div:nth-of-type(1)": {
-          padding: "0px !important",
-          "& > div:nth-of-type(1)": {
-            height: `${theme.vars.size.baseSpacings.sp3}!important`,
-            borderRadius: `${theme.vars.size.borderRadius["r0-5"]} !important`,
-            "& > div > div > div > div": {
-              height: "10px !important"
-            }
-          }
-        },
-        "& > div:nth-of-type(2)": {
-          margin: "0px !important",
-          borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
-          height: `${theme.vars.size.desktop.medium.base} !important`,
-          width: `${theme.vars.size.desktop.medium.base} !important`,
-          "& div": {
-            borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
-            boxShadow: "none !important"
-          }
-        }
-      },
-      // Inputs para el cambio de color mediante a texto( hexadecimal o rgb )
-      "&:nth-of-type(3)": {
-        padding: "0px !important",
-        "& > div": {
-          // Estilos compartidos para las cajas de color
-          "&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)": {
-            padding: "0px !important",
-            "& div": {
-              display: "flex !important",
-              flexDirection: "column-reverse !important",
-              "& label": {
-                textAlign: "left !important",
-                color: `${theme.vars.palette.text.secondary} !important`,
-                textTransform: "uppercase !important",
-                padding: "0px !important"
-              },
-              "& input": {
-                outline: `1px solid ${theme.vars.palette.border.default}`,
-                borderRadius: theme.vars.size.borderRadius.r1,
-                background: theme.vars.palette.background.default,
-                color: theme.vars.palette.text.primary,
-                boxShadow: "none !important",
-                "&:hover": {
-                  background: theme.vars.palette.primary.hoverOpacity
-                },
-                "&:focus-visible": {
-                  outlineColor: theme.vars.palette.primary.focusVisible
-                },
-                "&:active": {
-                  outlineColor: theme.vars.palette.primary.active
-                }
-              }
-            }
-          }
-        }
-      },
-      //Colores en grid varios del componente de react-color
-      "&:nth-of-type(4)": {
-        paddingTop: "0px !important"
-      }
-    },
-    "& .flexbox-fix": {
-      border: "0px !important"
-    }
   })
 };
 export {

package/components/Color/slots/ColorEnum.d.ts

@@ -1,6 +1,4 @@
 export declare enum ColorSlots {
     root = "root",
-    colorPicker = "colorPicker",
-    popover = "popover",
-    sketchPicker = "sketchPicker"
+    color = "color"
 }

package/components/Color/slots/ColorEnum.js

@@ -1,8 +1,6 @@
 var ColorSlots = /* @__PURE__ */ ((ColorSlots2) => {
   ColorSlots2["root"] = "root";
-  ColorSlots2["colorPicker"] = "colorPicker";
-  ColorSlots2["popover"] = "popover";
-  ColorSlots2["sketchPicker"] = "sketchPicker";
+  ColorSlots2["color"] = "color";
   return ColorSlots2;
 })(ColorSlots || {});
 export {

package/components/Color/slots/ColorSlots.d.ts

@@ -1,27 +1,12 @@
-import { SketchPicker } from 'react-color';
 /**
  * Componente estilizado de IconButton como el contenedor raíz del componente de color.
  */
-export declare const IconButtonRootStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "placement" | "rotationAngle" | "ariaLabel" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').ColorOwnerState> & Record<string, unknown>) | undefined;
-}, {}, {}>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * Componente envoltorio `div` que representa el color que recibe por la prop `value`.
  */
-export declare const ColorPickerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ColorStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').ColorOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-/**
- * Componente `Popover` de M4L.
- */
-export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Popover/types').PopoverProps, keyof import('../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState?: (Partial<import('../types').ColorOwnerState> & Record<string, unknown>) | undefined;
-}, {}, {}>;
-/**
- * Componente `SketchPicker` que viene de la libreria de react color.
- */
-export declare const SketchPickerStyled: import('@emotion/styled').StyledComponent<Pick<import('react-color').SketchPickerProps, keyof import('react-color').SketchPickerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState?: (Partial<import('../types').ColorOwnerState> & Record<string, unknown>) | undefined;
-}, {}, {
-    ref?: import('react').Ref<SketchPicker> | undefined;
-}>;

package/components/Color/slots/ColorSlots.js

@@ -1,29 +1,16 @@
-import { SketchPicker } from "react-color";
 import { styled } from "@mui/material/styles";
 import { C as COLOR_KEY_COMPONENT } from "../constants.js";
 import { c as colorStyles } from "../Color.styles.js";
 import { C as ColorSlots } from "./ColorEnum.js";
-import { P as Popover } from "../../mui_extended/Popover/Popover.js";
-import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
-const IconButtonRootStyled = styled(IconButton, {
+const RootStyled = styled("div", {
   name: COLOR_KEY_COMPONENT,
   slot: ColorSlots.root
 })(colorStyles?.root);
-const ColorPickerStyled = styled("div", {
+const ColorStyled = styled("div", {
   name: COLOR_KEY_COMPONENT,
-  slot: ColorSlots.colorPicker
-})(colorStyles?.colorPicker);
-const PopoverStyled = styled(Popover, {
-  name: COLOR_KEY_COMPONENT,
-  slot: ColorSlots.popover
-})(colorStyles?.popover);
-const SketchPickerStyled = styled(SketchPicker, {
-  name: COLOR_KEY_COMPONENT,
-  slot: ColorSlots.sketchPicker
-})(colorStyles?.sketchPicker);
+  slot: ColorSlots.color
+})(colorStyles?.color);
 export {
-  ColorPickerStyled as C,
-  IconButtonRootStyled as I,
-  PopoverStyled as P,
-  SketchPickerStyled as S
+  ColorStyled as C,
+  RootStyled as R
 };

package/components/Color/types.d.ts

@@ -1,5 +1,4 @@
 import { Theme } from '@mui/material/styles';
-import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
 import { Sizes } from '@m4l/styles';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { COLOR_KEY_COMPONENT } from './constants';
@@ -9,7 +8,7 @@ import { ColorSlots } from './slots';
  *
  * Esta interfaz define las propiedades que el componente `Color` acepta. Se basa en las propiedades de `MUIIconButtonProps`.
  */
-export interface ColorProps extends Omit<MUIIconButtonProps, 'size' | 'value' | 'onChange'> {
+export interface ColorProps {
     /**
      * Define el color que tendrá el componente.
      * Puede ser un color en formato de string o `null`/`undefined` para mostrar un ícono predeterminado.
@@ -24,14 +23,14 @@ export interface ColorProps extends Omit<MUIIconButtonProps, 'size' | 'value' |
      * Indica si el componente está en estado de error
      */
     error?: boolean;
-    /**
-     * Evento que se dispara cuando el color del componente cambia.
-     */
-    onChange: (color: string | null) => void;
     /**
      * testId
      */
     dataTestId?: string;
+    /**
+     * Clases personalizadas
+     */
+    className?: string;
 }
 /**
  * Tipo para las ranuras del componente `Color`.
@@ -44,7 +43,7 @@ export type ColorSlotsType = keyof typeof ColorSlots;
  * Este tipo se utiliza para describir el estado completo del componente `Color`, incluyendo
  * las propiedades pasadas al componente y el estado calculado como el color de la paleta y el estado de esqueleto.
  */
-export type ColorOwnerState = Pick<ColorProps, 'size' | 'value' | 'error' | 'disabled'>;
+export type ColorOwnerState = Pick<ColorProps, 'size' | 'value' | 'error'>;
 /**
  * Tipos de estilos para el componente `Color`.
  * Esta interfaz extiende las reglas de estilo personalizadas para las ranuras del componente (`ColorSlots`)

package/components/DataGrid/DataGrid.js

@@ -4,7 +4,7 @@ import { F as FilterProvider } from "./contexts/FilterContext/index.js";
 import { D as DataGridProvider } from "./contexts/DataGridContext/index.js";
 import { T as TEST_PROP_COLUMNS } from "./types.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../test/getNameDataTestId.js";
 import { T as TEST_SKELETON, D as DATAGRID_PREFIX_NAME } from "./constants.js";
 import { D as DataGridRootStyled, C as CustomHeaderStyled } from "./slots/DataGridSlot.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";

package/components/DataGrid/formatters/ColumnColorFormatter/formatter.d.ts

@@ -0,0 +1,6 @@
+import { RenderCellProps } from 'react-data-grid';
+import { ColumnColorFormatterProps } from './types';
+/**
+ * Función para formatear un color en una columna de un DataGrid
+ */
+export declare function ColumnColorFormatter<TRow>(props: ColumnColorFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnColorFormatter/formatter.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { C as ColorFormatter } from "../../../formatters/ColorFormatter/ColorFormatter.js";
+function ColumnColorFormatter(props) {
+  const { fieldValue, size = "medium" } = props;
+  return (renderProps) => {
+    const colorValue = getPropertyByString(renderProps.row, fieldValue);
+    let fixedValue;
+    if (typeof colorValue === "string") {
+      fixedValue = colorValue;
+    } else {
+      fixedValue = null;
+    }
+    return /* @__PURE__ */ jsx(ColorFormatter, { value: fixedValue, size });
+  };
+}
+export {
+  ColumnColorFormatter as C
+};

package/components/DataGrid/formatters/ColumnColorFormatter/index.d.ts

@@ -0,0 +1,3 @@
+export * from './formatter';
+export * from './types';
+export * from './useColumnColor';

package/components/DataGrid/formatters/ColumnColorFormatter/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/formatters/ColumnColorFormatter/types.d.ts

@@ -0,0 +1,12 @@
+import { DeepKeyOf } from '../../../../utils/types';
+import { ColorFormatterProps } from '../../../formatters/ColorFormatter/types';
+/**
+ * Props para el ColumnColorFormatter
+ */
+export interface ColumnColorFormatterProps<TRow> extends Pick<ColorFormatterProps, 'size' | 'className'> {
+    /**
+     * Campo de la fila que contiene el valor del color.
+     * Soporta acceso a propiedades anidadas (ej: 'user.profile.color')
+     */
+    fieldValue: DeepKeyOf<TRow>;
+}

package/components/DataGrid/formatters/ColumnColorFormatter/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/formatters/ColumnColorFormatter/useColumnColor.d.ts

@@ -0,0 +1,14 @@
+import { ColumnColorFormatterProps } from './types';
+/**
+ * Hook que retorna el formatter para una columna de color en el DataGrid.
+ *
+ * Este hook gestiona el estado del formatter y se asegura de que las props
+ * se actualicen correctamente cuando cambian, utilizando deepEqual para
+ * comparación profunda de objetos.
+ * @template TRow - Tipo de la fila del DataGrid
+ * @param {ColumnColorFormatterProps<TRow>} props - Propiedades del formatter
+ * @returns {object} Objeto con el formatter configurado
+ */
+export declare const useColumnColor: <TRow>(props: ColumnColorFormatterProps<TRow>) => {
+    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+};

package/components/DataGrid/formatters/ColumnColorFormatter/useColumnColor.js

@@ -0,0 +1,22 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { deepEqual } from "fast-equals";
+import { C as ColumnColorFormatter } from "./formatter.js";
+const useColumnColor = (props) => {
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(
+    () => ({
+      formatter: ColumnColorFormatter(stateProps)
+    }),
+    [stateProps]
+  );
+};
+export {
+  useColumnColor as u
+};

package/components/DataGrid/formatters/index.d.ts

@@ -10,3 +10,4 @@ export * from './ColumnSetCheckFormatter';
 export * from './ColumnUncertaintyFormatter';
 export * from './ColumnChipStatusFormatter';
 export * from './ColumnTagsFormatter';
+export * from './ColumnColorFormatter';

package/components/DataGrid/tests/helpers/generators.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Generadores de datos aleatorios para el DataGrid
+ */
+/**
+ * Función para generar un estado aleatorio
+ */
+export declare const getStatus: (index: number) => string;
+/**
+ * Función para generar un tipo de usuario aleatorio
+ */
+export declare const getUserType: (index: number) => "superadmin" | "admin" | "user";
+/**
+ * Función para obtener código de carácter desde el índice
+ */
+export declare const getCharCode: (index: number) => string;
+/**
+ * Función para generar un color aleatorio en formato hexadecimal
+ */
+export declare const getRandomColor: (index: number) => string;
+/**
+ * Función para generar tags aleatorios
+ */
+export declare const getTags: (index: number) => {
+    label: string;
+    backgroundColor: string;
+}[];

package/components/DataGrid/tests/helpers/types.d.ts

@@ -28,6 +28,7 @@ export interface SeedProps {
     aligns?: Record<string, ColumnAlign>;
     names?: Record<string, string>;
     visibleColumns?: string[];
+    withColor?: boolean;
 }
 export type GetColumnsProps = Omit<SeedProps, 'quantity'>;
 export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';
@@ -67,6 +68,7 @@ export interface RowType {
         label: string;
         currentStatus: 'superadmin' | 'admin' | 'user';
     };
+    color?: string;
 }
 interface RangesUncertainty {
     cmcMin: number;

package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicFilterBase } from "./useDynamicFilterBase.js";