@m4l/components 9.1.130 → 9.1.132

package/components/Chip/Chip.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import clsx from "clsx";
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import { C as CHIP_CLASSES } from "./constants.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
-import { S as SkeletonChipStyled, C as ChipRootStyled, T as TextChipStyled, I as IconButtonStyled, a as IconStyled } from "./slots/ChipSlots.js";
+import { I as IconStyled, S as SkeletonChipStyled, C as ChipRootStyled, T as TextChipStyled, a as IconButtonStyled } from "./slots/ChipSlots.js";
 const Chip = forwardRef((props, ref) => {
   const {
     endIcon,
@@ -26,30 +26,16 @@ const Chip = forwardRef((props, ref) => {
   const isSkeleton = useModuleSkeleton();
   const { host_static_assets, environment_assets } = useEnvironment();
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const ownerState = {
+  const ownerState = useMemo(() => ({
     interactive: !!onClick,
     size: adjustedSize,
+    chipSize: adjustedSize,
     variant,
     color,
     opacity,
     externalColor
-  };
-  const handleDelete = (e) => {
-    e.stopPropagation();
-    onDeleted?.(e);
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(
-      SkeletonChipStyled,
-      {
-        "data-testid": "SkeletonButton",
-        width: skeletonWidth,
-        ownerState: { ...ownerState }
-      }
-    );
-  }
-  const iconClose = `${host_static_assets}/${environment_assets}/frontend/components/chip/assets/icons/closeSmall.svg`;
-  const renderIcon = (icon, instaceDataTestId) => {
+  }), [adjustedSize, variant, color, opacity, externalColor, onClick]);
+  const renderIcon = useMemo(() => (icon, instaceDataTestId) => {
     if (!icon) {
       return null;
     }
@@ -59,7 +45,6 @@ const Chip = forwardRef((props, ref) => {
       return /* @__PURE__ */ jsx(
         IconStyled,
         {
-          color,
           ownerState: { ...ownerState },
           src: icon,
           size: adjustedSize,
@@ -67,6 +52,21 @@ const Chip = forwardRef((props, ref) => {
         }
       );
     }
+  }, [ownerState, adjustedSize]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      SkeletonChipStyled,
+      {
+        "data-testid": "SkeletonButton",
+        width: skeletonWidth,
+        ownerState: { ...ownerState }
+      }
+    );
+  }
+  const iconClose = `${host_static_assets}/${environment_assets}/frontend/components/chip/assets/icons/closeSmall.svg`;
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    onDeleted?.(e);
   };
   return /* @__PURE__ */ jsxs(
     ChipRootStyled,

package/components/Chip/ChipStyles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const getColors = (theme, ownerState) => {
   const keyColor = ownerState.variant === "contained" ? ownerState.color + "Contained" : ownerState.color + "Outlined";
   const finalPalette = ownerState.externalColor ? ownerState.externalColor : theme.vars.palette.chips[keyColor ?? "default"];
@@ -24,11 +24,8 @@ const chipStyles = {
       cursor: "pointer",
       color,
       backgroundColor: !(ownerState.variant === "outlined") ? bgColor : "transparent",
-      // '& .M4LIcon-icon': {
-      //   backgroundColor: `${color} !important`,
-      // },
-      ...getHeightSizeStyles(
-        theme.generalSettings.isMobile,
+      ...getSizeStyles(
+        theme,
         ownerState.size || "medium",
         "base"
       ),
@@ -81,30 +78,16 @@ const chipStyles = {
       "& .M4LIcon-icon": {
         backgroundColor: `${color} !important`
       },
-      // Estilos específicos para el tamaño small
-      ...ownerState.size === "small" && {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.small.base,
-          width: theme.vars.size.mobile.small.base,
-          minHeight: theme.vars.size.mobile.small.base
-        } : {
-          height: theme.vars.size.desktop.small.base,
-          width: theme.vars.size.desktop.small.base,
-          minHeight: theme.vars.size.desktop.small.base
-        }
-      },
-      // Estilos específicos para el tamaño medium
-      ...ownerState.size === "medium" && {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.medium.base,
-          width: theme.vars.size.mobile.medium.base,
-          minHeight: theme.vars.size.mobile.medium.base
-        } : {
-          height: theme.vars.size.desktop.medium.base,
-          width: theme.vars.size.desktop.medium.base,
-          minHeight: theme.vars.size.desktop.medium.base
-        }
-      }
+      ...getSizeStyles(
+        theme,
+        ownerState.size || "medium",
+        "base",
+        (size) => ({
+          height: size,
+          width: size,
+          minHeight: size
+        })
+      )
     };
   },
   /**
@@ -113,26 +96,15 @@ const chipStyles = {
   skeletonChip: ({ theme, ownerState }) => ({
     width: "100%",
     background: theme.vars.palette.skeleton.transition,
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.base,
-        minHeight: theme.vars.size.mobile.small.base
-      } : {
-        height: theme.vars.size.desktop.small.base,
-        minHeight: theme.vars.size.desktop.small.base
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.base,
-        minHeight: theme.vars.size.mobile.medium.base
-      } : {
-        height: theme.vars.size.desktop.medium.base,
-        minHeight: theme.vars.size.desktop.medium.base
-      }
-    }
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "base",
+      (size) => ({
+        height: size,
+        minHeight: size
+      })
+    )
   })
 };
 export {

package/components/Chip/slots/ChipSlots.js

@@ -28,8 +28,8 @@ const IconButtonStyled = styled(IconButton, {
 })(chipStyles?.iconButton);
 export {
   ChipRootStyled as C,
-  IconButtonStyled as I,
+  IconStyled as I,
   SkeletonChipStyled as S,
   TextChipStyled as T,
-  IconStyled as a
+  IconButtonStyled as a
 };

package/components/Chip/types.d.ts

@@ -29,7 +29,7 @@ export interface ChipProps {
     /**
      * Defines the variant of the `Chip` (default 'contained').
      */
-    variant?: ChipVariants;
+    variant?: ChipVariants | string;
     /**
      * Defines the color of the `Chip`.
      */
@@ -49,7 +49,7 @@ export interface ChipProps {
     /**
      * Function to be executed when the `Chip` is clicked.
      */
-    onClick?: () => void;
+    onClick?: (() => void) | ((event: any) => void);
     /**
      * Props for the close icon button.
      */
@@ -63,7 +63,7 @@ export interface ChipProps {
      */
     className?: string;
     /**
-     * Focusable `Chip`.
+     * If the `Chip` is focusable.
      */
     focusable?: boolean;
 }

package/components/DynamicSort/DynamicSort.d.ts

@@ -1,5 +1,8 @@
 import { DynamicSortProps } from './types';
 /**
- * TODO: Documentar
+ * El DynamicSort es un componente que permite ordenar de manera acendentente o descendente una lista de elementos.
+ *
+ * ### Dependecias:
+ *- **`useFlagsPresent:`** Hook que permite verificar si una lista de flags se encuentran presentes.
  */
 export declare function DynamicSort(props: DynamicSortProps): import("react/jsx-runtime").JSX.Element | null;

package/components/DynamicSort/DynamicSort.styles.js

@@ -1,16 +1,20 @@
-import { alpha } from "@mui/material";
 import { c as containerQuery } from "../../utils/containerQuery.js";
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const CONTAINER_QUERY_NAME = "dynamic";
 const dynamicSortStyles = {
-  root: {
+  /**
+   * Root: Estilos del contenedor principal del componente.
+   */
+  root: () => ({
     containerName: CONTAINER_QUERY_NAME,
     containerType: "inline-size",
     width: "100%",
     height: "auto",
     padding: 0
-  },
+  }),
   /**
-   * TODO: Documentar
+   * innerContainer: Estilos del contenedor interno del componente.
    */
   innerContainer: ({ theme, ownerState }) => ({
     display: "grid",
@@ -39,15 +43,26 @@ const dynamicSortStyles = {
     } : {}
   }),
   /**
-   * TODO: Documentar
+   * inputSort: Estilos del contenedor del campo de entrada de ordenamiento.
    */
-  inputSort: ({ theme }) => ({
+  inputSort: ({ theme, ownerState }) => ({
     gridArea: "input-sort",
     display: "flex",
     flexDirection: "row",
-    gap: "8px",
-    padding: "4px 6px 4px 4px",
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    paddingRight: theme.vars.size.baseSpacings.sp1,
     height: "100%",
+    overflow: "hidden",
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "container",
+      (size) => ({
+        height: size,
+        minHeight: size,
+        maxHeight: size
+      })
+    ),
     maxWidth: "135px",
     width: "100%",
     alignItems: "center",
@@ -56,26 +71,34 @@ const dynamicSortStyles = {
     borderRight: "1px solid",
     borderColor: theme.vars.palette.border?.default,
     [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      height: "32px",
-      width: "100%",
-      maxWidth: "100%",
       borderRight: "none"
-    },
-    [theme.breakpoints.down("sm")]: {
-      height: "44px",
-      justifyContent: "center"
     }
   }),
   /**
-   * TODO: Documentar
+   * inputSortInput: Estilos del campo de entrada de ordenamiento.
    */
-  inputSortInput: ({ theme }) => ({
-    ...theme.typography.body,
+  inputSortInput: ({ theme, ownerState }) => ({
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "action",
+      (size) => ({
+        height: size,
+        minHeight: size,
+        maxHeight: size
+      })
+    ),
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "body"
+    ),
     background: theme.vars.palette.background.default,
     color: theme.vars.palette.text.secondary,
-    border: "1px solid",
+    border: 0,
     borderColor: "transparent",
-    padding: "4px 8px",
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    paddingRight: theme.vars.size.baseSpacings.sp2,
     width: "100%",
     height: "100%",
     "&::placeholder": {
@@ -96,19 +119,19 @@ const dynamicSortStyles = {
   }),
   inputSortIcon: {},
   /**
-   * TODO: Documentar
+   * appliedSorts: Estilos del contenedor de los campos de ordenamiento aplicados.
    */
   appliedSorts: ({ theme }) => ({
     gridArea: "applied-sorts",
     width: "100%",
     height: "fit-content",
+    overflow: "hidden",
     paddingLeft: theme.spacing(1),
     borderLeft: "none",
     margin: "0px",
     padding: "0px 4px",
     [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
       height: "auto",
-      padding: "4px",
       display: "flex",
       borderTop: "1px solid ",
       borderColor: theme.vars.palette.border?.secondary,
@@ -118,7 +141,7 @@ const dynamicSortStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * appliedSortInnerContainer: Estilos del contenedor interno de los campos de ordenamiento aplicados.
    */
   appliedSortInnerContainer: ({ theme }) => ({
     padding: "2px",
@@ -141,107 +164,48 @@ const dynamicSortStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * appliedSortChip: Estilos del chip de ordenamiento aplicado.
    */
   appliedSortChip: ({ theme }) => ({
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    overflow: "visible",
-    width: "auto",
-    height: "24px",
-    minHeight: theme.spacing(3),
-    paddingLeft: theme.spacing(1),
-    borderColor: alpha(`${theme.colorSchemes.finalTheme.palette.divider}`, 0.1),
-    border: "none",
-    borderRadius: "4px",
-    backgroundColor: theme.vars.palette.background?.surface,
-    color: theme.vars.palette.text.secondary,
-    ...theme.typography.body,
-    [theme.breakpoints.down("sm")]: {
-      height: "fit-content"
-    }
-  }),
-  appliedSortChipIcon: {},
-  /**
-   * TODO: Documentar
-   */
-  appliedSortChipInfo: ({ theme }) => ({
-    ...theme.typography.body2,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    width: "auto",
-    height: "100%",
-    marginRight: theme.spacing(1),
-    marginLeft: theme.spacing(1),
-    whiteSpace: "nowrap",
-    border: "none",
-    backgroundColor: "transparent"
-  }),
-  /**
-   * TODO: Documentar
-   */
-  appliedSortChipInfoFieldName: ({ theme }) => ({
-    ...theme.typography.subtitle2,
-    color: theme.vars.palette.text.secondary
-  }),
-  /**
-   * TODO: Documentar
-   */
-  appliedSortChipInfoOperator: ({ theme }) => ({
-    ...theme.typography.body2,
-    marginLeft: theme.spacing(1.5),
-    fontStyle: "italic",
-    color: theme.vars.palette.text.secondary
-  }),
-  /**
-   * TODO: Documentar
-   */
-  appliedSortChipInfoOperands: ({ theme }) => ({
-    ...theme.typography.body2,
-    marginLeft: theme.spacing(1.5),
+    backgroundColor: theme.vars.palette.chips?.defaultContained.backgroundColor,
     color: theme.vars.palette.text.secondary
   }),
-  appliedSortChipRemoveButton: {},
   /**
-   * TODO: Documentar
+   * actions: Estilos del contenedor de los botones de acción.
    */
   actions: ({ theme }) => ({
+    overflow: "hidden",
     gridArea: "actions-sort",
     display: "flex",
     flexDirection: "row",
-    gap: "8px",
-    padding: "4px",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    padding: theme.vars.size.baseSpacings.sp1,
     height: "100%",
     alignItems: "center",
-    borderTopRightRadius: "4px",
-    borderBottomRightRadius: "4px",
-    borderLeft: "1px solid",
+    borderTopRightRadius: theme.vars.size.borderRadius.r1,
+    borderBottomRightRadius: theme.vars.size.borderRadius.r1,
+    borderLeft: theme.vars.size.borderStroke.container,
     borderColor: theme.vars.palette.border?.default
   }),
-  actionsSkeletonButton: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    width: "24px",
-    height: "24px"
+  actionsClearButton: {
+    visibility: "visible"
   },
-  actionsClearButton: {},
   /**
-   * TODO: Documentar
+   * actionsSubmitButton: Estilos del botón de acción de envío de formulario.
    */
   actionsSubmitButton: ({ theme, ownerState }) => ({
-    ...ownerState.isValid === false ? { border: `1px dashed ${theme.vars.palette.error.main}` } : {}
+    ...ownerState.isValid === false ? { border: `1px dashed ${theme.vars.palette.error.main}` } : {
+      visibility: "visible"
+    }
   }),
   /**
-   * TODO: Documentar
+   * popoverMenu: Estilos del menú emergente.
    */
   popoverMenu: ({ theme }) => ({
     "& .MuiPaper-root": {
       display: "flex",
       flexDirection: "column",
-      padding: "8px !important",
+      padding: "8px 0 !important",
       gap: "4px",
       borderRadius: "6px",
       [theme.breakpoints.down("md")]: {
@@ -252,31 +216,10 @@ const dynamicSortStyles = {
       }
     }
   }),
-  /**
-   * TODO: Documentar
-   */
-  popoverMenuItem: ({ theme }) => ({
-    paddingLeft: "4px",
-    paddingRight: "4px",
-    borderRadius: "4px",
-    "&:hover": {
-      ...theme.typography.body,
-      color: theme.vars.palette.primary?.hover,
-      background: theme.vars.palette.background?.surface,
-      borderRadius: "4px",
-      padding: "4px 12px 4px 8px"
-    }
-  }),
-  /**
-   * TODO: Documentar
-   */
-  popoverMenuItemLabel: ({ theme }) => ({
-    ...theme.typography.body,
-    color: theme.vars.palette.text.primary
-  }),
+  popoverMenuItem: {},
   popoverMenuItemIcon: {},
   /**
-   * TODO: Documentar
+   * popoverSort: Estilos del menú emergente de ordenamiento.
    */
   popoverSort: ({ theme }) => ({
     width: "auto",
@@ -299,7 +242,7 @@ const dynamicSortStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * popoverSortHeader: Estilos del encabezado del menú emergente de ordenamiento.
    */
   popoverSortHeader: ({ theme }) => ({
     backgroundColor: theme.vars.palette.background?.surface,
@@ -317,14 +260,14 @@ const dynamicSortStyles = {
   }),
   popoverSortHeaderIcon: {},
   /**
-   * TODO: Documentar
+   * popoverSortHeaderTitle: Estilos del título del menú emergente de ordenamiento.
    */
   popoverSortHeaderTitle: ({ theme }) => ({
     ...theme.typography.paragraphDens,
     color: theme.vars.palette.text.primary
   }),
   /**
-   * TODO: Documentar
+   * popoverSortContainerFields: Estilos del contenedor de campos del menú emergente de ordenamiento.
    */
   popoverSortContainerFields: ({ theme }) => ({
     height: "fit-content",
@@ -341,7 +284,7 @@ const dynamicSortStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.
    */
   popoverSortActions: ({ theme }) => ({
     display: "flex",
@@ -358,6 +301,25 @@ const dynamicSortStyles = {
         height: "36px"
       }
     }
+  }),
+  /**
+   * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
+   */
+  inputSortInputSkeleton: ({ theme, ownerState }) => ({
+    width: "100%",
+    minWidth: "80px",
+    marginLeft: theme.vars.size.baseSpacings.sp2,
+    marginRight: theme.vars.size.baseSpacings.sp2,
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "base",
+      (size) => ({
+        height: size,
+        minHeight: size,
+        maxHeight: size
+      })
+    )
   })
 };
 export {

package/components/DynamicSort/constants.d.ts

@@ -4,7 +4,6 @@ export declare const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons
 export declare const ASSETS: {
     readonly refresh: "restart.svg";
     readonly sort: "sort.svg";
-    readonly close: "close.svg";
     readonly list_bulleted: "list_bulleted.svg";
     readonly clean: "clean.svg";
 };

package/components/DynamicSort/constants.js

@@ -3,7 +3,6 @@ const ASSETS_URL = "frontend/components/Dynamic_sort/assets/icons";
 const ASSETS = {
   refresh: "restart.svg",
   sort: "sort.svg",
-  close: "close.svg",
   list_bulleted: "list_bulleted.svg",
   clean: "clean.svg"
 };

package/components/DynamicSort/icons.d.ts

@@ -0,0 +1,2 @@
+export declare const ascending = "frontend/components/Dynamic_sort/assets/icons/ascending.svg";
+export declare const descending = "frontend/components/Dynamic_sort/assets/icons/descending.svg";

package/components/DynamicSort/icons.js

@@ -0,0 +1,6 @@
+const ascending = "frontend/components/Dynamic_sort/assets/icons/ascending.svg";
+const descending = "frontend/components/Dynamic_sort/assets/icons/descending.svg";
+export {
+  ascending as a,
+  descending as d
+};