@m4l/components 9.1.130 → 9.1.131

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.
      */

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 { a 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,27 @@ 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,
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "container",
+      (height) => ({
+        height,
+        minHeight: height,
+        maxHeight: height
+      })
+    ),
     maxWidth: "135px",
     width: "100%",
     alignItems: "center",
@@ -56,26 +72,35 @@ 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,
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action",
+      (height) => ({
+        height,
+        minHeight: height,
+        maxHeight: height
+      })
+    ),
+    ...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 +121,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 +143,7 @@ const dynamicSortStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * appliedSortInnerContainer: Estilos del contenedor interno de los campos de ordenamiento aplicados.
    */
   appliedSortInnerContainer: ({ theme }) => ({
     padding: "2px",
@@ -141,107 +166,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 +218,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 +244,7 @@ const dynamicSortStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * popoverSortHeader: Estilos del encabezado del menú emergente de ordenamiento.
    */
   popoverSortHeader: ({ theme }) => ({
     backgroundColor: theme.vars.palette.background?.surface,
@@ -317,14 +262,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 +286,7 @@ const dynamicSortStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.
    */
   popoverSortActions: ({ theme }) => ({
     display: "flex",
@@ -358,6 +303,26 @@ 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,
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "base",
+      (height) => ({
+        height,
+        minHeight: height,
+        maxHeight: height
+      })
+    )
   })
 };
 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
+};