@m4l/components 9.1.63 → 9.1.65

package/components/Color/Color.js

@@ -1,57 +1,155 @@
-import { jsx } from "react/jsx-runtime";
-import { useModuleSkeleton } from "@m4l/core";
-import { N as NOTCOLOR } from "./constants.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useState, useMemo } from "react";
+import { useTheme } from "@mui/material";
+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 { R as RootStyled, C as ColorPickerStyled, I as IconStyled } from "./slots/ColorSlots.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 { 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 {
-    onClick,
+    className,
     size,
     disabled,
     value,
     role,
-    color = "default",
-    ["aria-errormessage"]: ariaErrorMessage
+    error = false,
+    onChange,
+    dataTestId,
+    ...other
   } = 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 ownerState = {
+  const ownerState = useMemo(() => ({
     size: adjustedSize,
     disabled,
-    color,
-    value
-  };
-  return /* @__PURE__ */ jsx(
-    RootStyled,
+    value,
+    error
+  }), [adjustedSize, disabled, value, error]);
+  const icon = useMemo(() => value ? /* @__PURE__ */ jsx(
+    ColorPickerStyled,
     {
-      role,
-      "aria-busy": isSkeleton,
-      "aria-errormessage": ariaErrorMessage,
-      disabled: isSkeleton || disabled,
-      onClick,
+      role: "status",
+      "aria-live": "polite",
       ownerState: { ...ownerState },
-      disableRipple: true,
-      children: value ? /* @__PURE__ */ jsx(
-        ColorPickerStyled,
-        {
-          role: "status",
-          "aria-live": "polite",
-          ownerState: { ...ownerState },
-          disabled,
-          size: adjustedSize
-        }
-      ) : /* @__PURE__ */ jsx(
-        IconStyled,
-        {
-          ownerState: { ownerState },
-          src: NOTCOLOR,
-          disabled,
-          size: adjustedSize
-        }
-      )
+      disabled,
+      size: adjustedSize
+    }
+  ) : /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: urlIcon,
+      disabled,
+      size: adjustedSize
     }
-  );
+  ), [value, ownerState, disabled, adjustedSize, urlIcon]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButtonRootStyled,
+      {
+        ...other,
+        className: clsx(className, classes.root),
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        "aria-busy": isSkeleton,
+        disabled: isSkeleton || disabled,
+        ownerState: { ...ownerState },
+        size: adjustedSize,
+        icon
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PopoverStyled,
+      {
+        className: clsx(classes.popover, className),
+        size,
+        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
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
 };
 export {
   Color as C

package/components/Color/Color.styles.d.ts

@@ -1,9 +1,5 @@
 import { ColorStyles } from './types';
 /**
  * Definición de los estilos para los diferentes componentes relacionados con el selector de color.
- *
- * El objeto `colorStyles` contiene tres funciones principales para estilizar diferentes partes del componente:
- * `root`, `icon`, y `colorPicker`. Cada función utiliza un estilo dinámico basado en el estado y el tema del componente.
- * @createdAt 2025-01-08 10:36:39 - automatic
  */
 export declare const colorStyles: ColorStyles;

package/components/Color/Color.styles.js

@@ -1,6 +1,5 @@
 const colorStyles = {
   /**
-   * Estilos para el contenedor raíz del componente de color.
    * Establece los estilos para el contenedor raíz del selector de color.
    * @author Andrés Quintero - automatic
    * @createdAt 2025-01-08 10:36:39 - automatic
@@ -20,53 +19,19 @@ const colorStyles = {
     padding: 0,
     // Radio de borde
     borderRadius: theme.size.borderRadius.r1,
+    border: ownerState.error ? `1px solid ${theme.vars.palette.error.main}` : void 0,
     /**
-     * **Pseudoclases**:
-     * - Estilos para los estados hover, focus-visible y active.
-     * @createdAt 2025-01-08 10:36:39 - automatic
+     *Pseudoclases**:
      */
     "&:hover": {
-      display: "flex",
-      background: theme.vars.palette[ownerState.color || "default"].hoverOpacity
+      background: ownerState.error ? theme.vars.palette.error.hoverOpacity : theme.vars.palette.default.hoverOpacity
     },
     "&:active": {
-      background: theme.vars.palette[ownerState.color || "default"].active
+      background: ownerState.error ? theme.vars.palette.error.activeOpacity : theme.vars.palette.default.activeOpacity
     },
     "&:focus-visible": {
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        inset: "-2px",
-        boxSizing: "border-box",
-        border: theme.vars.size.borderStroke.container,
-        borderColor: theme.vars.palette.border.main,
-        borderRadius: theme.vars.size.borderRadius["r1-5"]
-      }
-    },
-    // //Estilos para Error
-    ...ownerState.color !== "default" && {
-      // Borde
-      border: `1px solid ${theme.vars.palette[ownerState.color || "primary"].main}`,
-      /**
-       * **Pseudoclases**:
-       * - Estilos para los estados hover, focus-visible y active.
-       * @createdAt 2025-01-08 10:36:39 - automatic
-       */
-      "&:active": {
-        border: `1px solid ${theme.vars.palette[ownerState.color || "primary"].active}`,
-        background: theme.vars.palette[ownerState.color || "primary"].hoverOpacity
-      },
-      "&:focus-visible": {
-        "&::before": {
-          content: '""',
-          position: "absolute",
-          inset: "-4px",
-          boxSizing: "border-box",
-          border: theme.vars.size.borderStroke.container,
-          borderColor: theme.vars.palette.border.main,
-          borderRadius: theme.vars.size.borderRadius["r1-5"]
-        }
-      }
+      outline: `1px solid ${theme.vars.palette.primary.focusVisible}`,
+      outlineOffset: 2
     },
     // Sizes medium
     ...ownerState.size === "medium" && {
@@ -89,21 +54,8 @@ const colorStyles = {
       }
     }
   }),
-  /**
-   * Estilos para el icono dentro del componente de color.
-   * Actualmente no se aplican estilos al icono. Este espacio está reservado para futuros estilos si es necesario.
-   * @createdAt 2025-01-08 10:36:39 - automatic
-   */
-  icon: {},
   /**
    * Estilos para el selector de color.
-   * Establece los estilos para el selector de color, incluyendo su tamaño, posición y color de fondo.
-   * El tamaño del selector puede cambiar dependiendo de la propiedad `size` en el estado del componente.
-   * Además, el color de fondo se ajusta con base en el valor seleccionado.
-   * @author Andrés Quintero - automatic
-   * @createdAt 2025-01-08 10:36:39 - automatic
-   * @updatedAt 2025-01-08 10:36:40 - automatic
-   * @updatedUser Andrés Quintero - automatic
    */
   colorPicker: ({ theme, ownerState }) => ({
     //Estilos generales
@@ -134,6 +86,107 @@ 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/constants.d.ts

@@ -1,3 +1,2 @@
 export declare const COLOR_KEY_COMPONENT = "M4LColor";
-export declare const NOTCOLOR = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/commons/assets/icons/out_of.svg";
 export declare const COLOR_PREFIX = "Color";

package/components/Color/constants.js

@@ -1,6 +1,4 @@
 const COLOR_KEY_COMPONENT = "M4LColor";
-const NOTCOLOR = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/commons/assets/icons/out_of.svg";
 export {
-  COLOR_KEY_COMPONENT as C,
-  NOTCOLOR as N
+  COLOR_KEY_COMPONENT as C
 };

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

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

package/components/Color/slots/ColorEnum.js

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

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

@@ -1,23 +1,27 @@
+import { SketchPicker } from 'react-color';
 /**
  * Componente estilizado de IconButton como el contenedor raíz del componente de color.
- * Este componente es utilizado como el contenedor principal del IconButton de materialUI.
  */
-export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').IconButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
-}, "children" | "size" | "action" | "color" | "style" | "disabled" | "sx" | "classes" | "className" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge">, "children" | "value" | "ref" | "title" | "size" | "name" | "id" | "type" | "action" | "hidden" | "color" | "content" | "style" | "disabled" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "form" | "key" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ColorOwnerState> & Record<string, unknown> & {
+export declare const IconButtonRootStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').ColorOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 /**
- * Componente estilizado para representar el selector de color.
- * Este componente se utiliza para mostrar el área del picker de color.
+ * 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').Theme> & Partial<import('../types').ColorOwnerState> & Record<string, unknown> & {
+export declare const ColorPickerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').ColorOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
 /**
- * Componente estilizado para representar el icono dentro del componente de color.
- * Este es el área del componente donde se coloca el icono de selección de color.
+ * Componente `Popover` de M4L.
  */
-export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ColorOwnerState> & Record<string, unknown> & {
+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>;
 }, {}, {}>;
+/**
+ * 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>;
+}, {}, {
+    ref?: import('react').Ref<SketchPicker> | undefined;
+}>;

package/components/Color/slots/ColorSlots.js

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

package/components/Color/types.d.ts

@@ -1,18 +1,15 @@
 import { Theme } from '@mui/material/styles';
 import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
-import { ComponentPalletColor, Sizes } from '@m4l/styles';
-import { IconProps } from '../Icon/types';
+import { Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from 'src/@types/augmentations';
 import { COLOR_KEY_COMPONENT } from './constants';
 import { ColorSlots } from './slots';
 /**
  * Propiedades del componente `Color`
  *
- * Esta interfaz define las propiedades que el componente `Color` acepta. Se basa en las propiedades de `IconProps`
- * y `MUIIconButtonProps`, pero omite algunas propiedades para ajustarse a los requisitos específicos del componente `Color`.
+ * Esta interfaz define las propiedades que el componente `Color` acepta. Se basa en las propiedades de `MUIIconButtonProps`.
  */
-export interface ColorProps extends Omit<IconProps, 'size' | 'color' | 'src'>, // Se omiten las propiedades 'size', 'color' y 'src' de IconProps
-Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled' | 'value'> {
+export interface ColorProps extends Omit<MUIIconButtonProps, 'size' | 'value' | 'onChange'> {
     /**
      * Define el color que tendrá el componente.
      * Puede ser un color en formato de string o `null`/`undefined` para mostrar un ícono predeterminado.
@@ -24,15 +21,17 @@ Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled' | 'value'> {
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
     /**
-     * Representa si el componente está deshabilitado.
-     * Si es `true`, el componente no será interactivo.
+     * Indica si el componente está en estado de error
      */
-    disabled?: boolean;
+    error?: boolean;
     /**
-     * Opciones de color personalizadas del componente.
-     * Define el color de la paleta a utilizar para el componente.
+     * Evento que se dispara cuando el color del componente cambia.
      */
-    color?: ComponentPalletColor;
+    onChange: (color: string | null) => void;
+    /**
+     * testId
+     */
+    dataTestId?: string;
 }
 /**
  * Tipo para las ranuras del componente `Color`.
@@ -45,20 +44,10 @@ 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 interface ColorOwnerState extends Pick<ColorProps, 'size' | 'color' | 'value'> {
-    /**
-     * Define si el componente está deshabilitado.
-     */
-    disabled?: boolean;
-    /**
-     * El color de la paleta basado en el tema de MUI.
-     * Se usa para aplicar el color al componente.
-     */
-    color?: ComponentPalletColor;
-}
+export type ColorOwnerState = Pick<ColorProps, 'size' | 'value' | 'error' | 'disabled'>;
 /**
  * Tipos de estilos para el componente `Color`.
  * Esta interfaz extiende las reglas de estilo personalizadas para las ranuras del componente (`ColorSlots`)
  * y permite su sobrescritura.
  */
-export type ColorStyles = Partial<OverridesStyleRules<ColorSlots, typeof COLOR_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type ColorStyles = M4LOverridesStyleRules<ColorSlots, typeof COLOR_KEY_COMPONENT, Theme>;

package/components/DataGrid/index.js

@@ -7,7 +7,7 @@ import { a as DataGridProvider } from "./contexts/DataGridContext/index.js";
 import { T as TEST_PROP_COLUMNS } from "./types.js";
 import { a as dataGridUtilityClasses } from "./classes/index.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { g as getNameDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getNameDataTestId } from "../../test/getNameDataTestId.js";
 import { D as DATAGRID_PREFIX_NAME } from "./constants.js";
 function DataGrid(props) {
   const {

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { u as useDynamicFilterBase } from "./useDynamicFilterBase.js";
-import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/dynamicFilterSlots.js";
 import { D as DynamicFilterSlots } from "../../slots/SlotsEnum.js";
 import { I as InputFilter } from "../InputFilter/InputFilter.js";

package/components/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
 import clsx from "clsx";
-import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { I as ICON_PREFIX, a as ICON_KEY_COMPONENT } from "./constants.js";
 import { g as getComponentClasses, a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";