@m4l/components 9.2.11 → 9.2.12

package/components/DynamicFilter/DynamicFIlter.styles.js

@@ -1,5 +1,5 @@
-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 dynamicFilterStyles = {
   root: {
@@ -10,7 +10,7 @@ const dynamicFilterStyles = {
     padding: 0
   },
   /**
-   * TODO: Documentar
+   * innerContainer: Estilos del contenedor interno del componente.
    */
   innerContainer: ({ theme, ownerState }) => ({
     display: "grid",
@@ -20,62 +20,66 @@ const dynamicFilterStyles = {
     justifyContent: "flex-start",
     width: "100%",
     height: "fit-content",
-    border: "1px solid",
-    borderRadius: "4px",
-    borderColor: theme.vars.palette.border?.default,
+    border: theme.vars.size.borderStroke.container,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    borderColor: ownerState.isValid ? theme.vars.palette.border?.default : theme.vars.palette.error.enabled,
     background: theme.vars.palette.background.default,
-    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      minHeight: "auto",
-      height: "auto",
-      gridTemplateColumns: "1fr auto",
-      gridTemplateAreas: `"input-filter  actions-filter"
-                          "applied-filters applied-filters"`
-    },
-    "&:focus-within": {
-      borderColor: !ownerState.isValid ? theme.vars.palette.error.enabled : theme.vars.palette.primary.active
-    },
-    ...ownerState.isValid === false ? {
-      borderColor: theme.vars.palette.error.enabled
-    } : {}
+    '&:has([aria-expanded="true"])': {
+      borderColor: ownerState.isValid ? theme.vars.palette.primary.active : theme.vars.palette.error.enabled
+    }
   }),
   /**
-   * TODO: Documentar
+   * inputFilter: Estilos del contenedor del campo de entrada de filtrado.
    */
-  inputFilter: ({ theme }) => ({
+  inputFilter: ({ theme, ownerState }) => ({
     gridArea: "input-filter",
     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",
+    maxWidth: "135px",
     width: "100%",
     alignItems: "center",
-    borderTopLeftRadius: "4px",
-    borderBottomLeftRadius: "4px",
-    borderRight: "1px solid",
+    borderTopLeftRadius: theme.vars.size.borderRadius.r1,
+    borderBottomLeftRadius: theme.vars.size.borderRadius.r1,
+    borderRight: theme.vars.size.borderStroke.container,
     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"
-    }
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "container",
+      (size) => ({
+        height: size
+      })
+    )
   }),
   /**
-   * TODO: Documentar
+   * inputFilterInput: Estilos del campo de entrada de filtrado.
    */
-  inputFilterInput: ({ theme }) => ({
-    ...theme.typography.body,
+  inputFilterInput: ({ 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": {
@@ -83,10 +87,10 @@ const dynamicFilterStyles = {
     },
     "&:focus-visible": {
       color: theme.vars.palette.text.secondary,
-      border: "1px solid",
+      border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette.primary.opacity,
       background: theme.vars.palette.primary.opacity,
-      BorderRadius: "2px",
+      BorderRadius: theme.vars.size.borderRadius["r0-5"],
       outline: "none!important"
     },
     "&:hover": {
@@ -94,151 +98,55 @@ const dynamicFilterStyles = {
       background: theme.vars.palette.background?.hover
     }
   }),
-  inputFilterIcon: {
-    visibility: "visible"
-  },
   /**
-   * TODO: Documentar
+   * appliedFilters: Estilos del contenedor de los filtros aplicados.
    */
   appliedFilters: ({ theme }) => ({
     gridArea: "applied-filters",
     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,
-      "&:has(div[class*=appliedFilterInnerContainer]:empty), &:empty": {
-        display: "none"
-      }
-    }
+    padding: `0px ${theme.vars.size.baseSpacings.sp1}`
   }),
   /**
-   * TODO: Documentar
+   * appliedFilterInnerContainer: Estilos del contenedor interno de los filtros aplicados.
    */
   appliedFilterInnerContainer: ({ theme }) => ({
-    padding: "2px",
-    gap: "4px",
+    overflow: "overlay",
+    overflowY: "hidden",
+    padding: theme.vars.size.baseSpacings["sp0-5"],
+    gap: theme.vars.size.baseSpacings.sp1,
     height: "fit-content",
     display: "flex",
     flexWrap: "nowrap",
     width: "100%",
     justifyContent: "flex-start",
-    alignItems: "center",
-    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      height: "32px",
-      padding: 0,
-      margin: 0,
-      border: 0
-    },
-    [theme.breakpoints.down("sm")]: {
-      padding: 0,
-      height: "44px"
-    }
-  }),
-  /**
-   * TODO: Documentar
-   */
-  appliedFilterChip: ({ 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"
-    }
-  }),
-  appliedFilterChipIcon: {
-    visibility: "visible"
-  },
-  /**
-   * TODO: Documentar
-   */
-  appliedFilterChipInfo: ({ 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
-   */
-  appliedFilterChipInfoFieldName: ({ theme }) => ({
-    ...theme.typography.subtitle2,
-    color: theme.vars.palette.text.secondary
-  }),
-  /**
-   * TODO: Documentar
-   */
-  appliedFilterChipInfoOperator: ({ theme }) => ({
-    ...theme.typography.body2,
-    marginLeft: theme.spacing(1.5),
-    fontStyle: "italic",
-    color: theme.vars.palette.text.secondary
+    alignItems: "center"
   }),
   /**
-   * TODO: Documentar
-   */
-  appliedFilterChipInfoOperands: ({ theme }) => ({
-    ...theme.typography.body2,
-    marginLeft: theme.spacing(1.5),
-    color: theme.vars.palette.text.secondary
-  }),
-  appliedFilterChipRemoveButton: {
-    visibility: "visible"
-  },
-  /**
-   * TODO: Documentar
+   * actions: Estilos del contenedor de los botones de acción.
    */
   actions: ({ theme }) => ({
     gridArea: "actions-filter",
+    overflow: "hidden",
     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"
   },
   /**
-   * TODO: Documentar
+   * actionsSubmitButton: Estilos del botón de acción de filtrado.
    */
   actionsSubmitButton: ({ theme, ownerState }) => ({
     ...ownerState.isValid === false ? { border: `1px dashed ${theme.vars.palette.error.enabled}` } : {
@@ -246,39 +154,19 @@ const dynamicFilterStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * popoverMenu: Estilos del menú emergente.
    */
   popoverMenu: ({ theme }) => ({
     "& .MuiPaper-root": {
       display: "flex",
       flexDirection: "column",
-      padding: "8px 0 !important",
-      gap: "4px",
-      borderRadius: "6px",
-      [theme.breakpoints.down("md")]: {
-        gap: "4px"
-      },
-      "& .M4LPopover-arrowStyle": {
-        display: "none"
-      }
+      padding: theme.vars.size.baseSpacings.sp3,
+      gap: theme.vars.size.baseSpacings.sp1,
+      borderRadius: theme.vars.size.borderRadius.r1
     }
   }),
   /**
-   * TODO: Documentar
-   */
-  popoverMenuItem: {},
-  /**
-   * TODO: Documentar
-   */
-  popoverMenuItemLabel: ({ theme }) => ({
-    ...theme.typography.body,
-    color: theme.vars.palette.text.primary
-  }),
-  popoverMenuItemIcon: {
-    visibility: "visible"
-  },
-  /**
-   * TODO: Documentar
+   * popoverFilter: Estilos del menú emergente de filtro.
    */
   popoverFilter: ({ theme }) => ({
     width: "auto",
@@ -287,7 +175,7 @@ const dynamicFilterStyles = {
       minWidth: "220px",
       maxWidth: "100%",
       minHeight: "auto",
-      boxShadow: theme.vars.customShadows?.z3,
+      boxShadow: theme.customShadows?.z3,
       "& .M4LPopover-arrowStyle": {
         display: "none"
       },
@@ -301,67 +189,80 @@ const dynamicFilterStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * popoverFilterHeader: Estilos del encabezado del menú emergente de filtro.
    */
-  popoverFilterHeader: ({ theme }) => ({
-    backgroundColor: theme.vars.palette.background?.surface,
+  popoverFilterHeader: ({ theme, ownerState }) => ({
     display: "flex",
     alignItems: "center",
-    gap: "8px",
-    padding: "4px 4px 4px 8px",
-    borderTopLeftRadius: "4px",
-    borderTopRightRadius: "4px",
-    borderBottom: "0px",
-    height: "28px",
-    [theme.breakpoints.down("sm")]: {
-      height: "36px"
-    }
+    gap: theme.vars.size.baseSpacings.sp2,
+    padding: theme.vars.size.baseSpacings.sp1,
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    borderTopLeftRadius: theme.vars.size.borderRadius.r1,
+    borderTopRightRadius: theme.vars.size.borderRadius.r1,
+    borderBottom: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border.secondary,
+    "& .M4LIcon-icon": {
+      backgroundColor: theme.vars.palette.primary.main
+    },
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "container",
+      (size) => ({
+        height: size
+      })
+    )
   }),
-  popoverFilterHeaderIcon: {
-    visibility: "visible"
-  },
   /**
-   * TODO: Documentar
+   * popoverFilterHeaderTitle: Estilos del título del menú emergente de filtro.
    */
   popoverFilterHeaderTitle: ({ theme }) => ({
-    ...theme.typography.paragraphDens,
-    color: theme.vars.palette.text.primary
+    color: `${theme.vars.palette.primary.main} !important`
   }),
   /**
-   * TODO: Documentar
+   * popoverFilterContainerFields: Estilos del contenedor de campos del menú emergente de filtro.
    */
   popoverFilterContainerFields: ({ theme }) => ({
     height: "fit-content",
     "& > div": {
       display: "flex",
-      height: "auto",
       flexDirection: "column",
-      padding: "12px 12px 0 12px",
-      gap: "8px",
-      [theme.breakpoints.down("sm")]: {
-        padding: "16px 16px 0 16px",
-        gap: "12px"
-      }
+      gap: theme.vars.size.baseSpacings.sp2
     }
   }),
   /**
-   * TODO: Documentar
+   * contentFilter: Estilos del contenedor entre el change filter y actions
    */
-  popoverFilterActions: ({ theme }) => ({
+  contentFilter: ({ theme }) => ({
     display: "flex",
-    flexDirection: "row",
-    gap: "16px",
-    padding: "16px 12px 12px 12px !important",
-    [theme.breakpoints.down("sm")]: {
-      padding: "24px 16px 16px 16px !important"
-    },
-    "& > .M4LButton-root": {
-      height: "24px",
-      minHeight: "24px",
-      [theme.breakpoints.down("sm")]: {
-        height: "36px"
-      }
-    }
+    flexDirection: "column",
+    padding: theme.vars.size.baseSpacings.sp3,
+    gap: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * popoverFilterActions: Estilos del contenedor de acciones del menú emergente de filtro.
+   */
+  popoverFilterActions: ({ theme }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp3} 0px`
+  }),
+  /**
+   * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
+   */
+  inputFilterInputSkeleton: ({ 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/DynamicFilter/slots/SlotsEnum.d.ts

@@ -3,28 +3,17 @@ export declare enum DynamicFilterSlots {
     innerContainer = "innerContainer",
     inputFilter = "inputFilter",
     inputFilterInput = "inputFilterInput",
-    inputFilterIcon = "inputFilterIcon",
     appliedFilters = "appliedFilters",
     appliedFilterInnerContainer = "appliedFilterInnerContainer",
-    appliedFilterChip = "appliedFilterChip",
-    appliedFilterChipIcon = "appliedFilterChipIcon",
-    appliedFilterChipInfo = "appliedFilterChipInfo",
-    appliedFilterChipInfoFieldName = "appliedFilterChipInfoFieldName",
-    appliedFilterChipInfoOperator = "appliedFilterChipInfoOperator",
-    appliedFilterChipInfoOperands = "appliedFilterChipInfoOperands",
-    appliedFilterChipRemoveButton = "appliedFilterChipRemoveButton",
     actions = "actions",
-    actionsSkeletonButton = "actionsSkeletonButton",
     actionsClearButton = "actionsClearButton",
     actionsSubmitButton = "actionsSubmitButton",
     popoverMenu = "popoverMenu",
-    popoverMenuItem = "popoverMenuItem",
-    popoverMenuItemIcon = "popoverMenuItemIcon",
-    popoverMenuItemLabel = "popoverMenuItemLabel",
     popoverFilter = "popoverFilter",
     popoverFilterContainerFields = "popoverFilterContainerFields",
     popoverFilterHeader = "popoverFilterHeader",
-    popoverFilterHeaderIcon = "popoverFilterHeaderIcon",
+    contentFilter = "contentFilter",
     popoverFilterHeaderTitle = "popoverFilterHeaderTitle",
-    popoverFilterActions = "popoverFilterActions"
+    popoverFilterActions = "popoverFilterActions",
+    inputFilterInputSkeleton = "inputFilterInputSkeleton"
 }

package/components/DynamicFilter/slots/SlotsEnum.js

@@ -3,30 +3,19 @@ var DynamicFilterSlots = /* @__PURE__ */ ((DynamicFilterSlots2) => {
   DynamicFilterSlots2["innerContainer"] = "innerContainer";
   DynamicFilterSlots2["inputFilter"] = "inputFilter";
   DynamicFilterSlots2["inputFilterInput"] = "inputFilterInput";
-  DynamicFilterSlots2["inputFilterIcon"] = "inputFilterIcon";
   DynamicFilterSlots2["appliedFilters"] = "appliedFilters";
   DynamicFilterSlots2["appliedFilterInnerContainer"] = "appliedFilterInnerContainer";
-  DynamicFilterSlots2["appliedFilterChip"] = "appliedFilterChip";
-  DynamicFilterSlots2["appliedFilterChipIcon"] = "appliedFilterChipIcon";
-  DynamicFilterSlots2["appliedFilterChipInfo"] = "appliedFilterChipInfo";
-  DynamicFilterSlots2["appliedFilterChipInfoFieldName"] = "appliedFilterChipInfoFieldName";
-  DynamicFilterSlots2["appliedFilterChipInfoOperator"] = "appliedFilterChipInfoOperator";
-  DynamicFilterSlots2["appliedFilterChipInfoOperands"] = "appliedFilterChipInfoOperands";
-  DynamicFilterSlots2["appliedFilterChipRemoveButton"] = "appliedFilterChipRemoveButton";
   DynamicFilterSlots2["actions"] = "actions";
-  DynamicFilterSlots2["actionsSkeletonButton"] = "actionsSkeletonButton";
   DynamicFilterSlots2["actionsClearButton"] = "actionsClearButton";
   DynamicFilterSlots2["actionsSubmitButton"] = "actionsSubmitButton";
   DynamicFilterSlots2["popoverMenu"] = "popoverMenu";
-  DynamicFilterSlots2["popoverMenuItem"] = "popoverMenuItem";
-  DynamicFilterSlots2["popoverMenuItemIcon"] = "popoverMenuItemIcon";
-  DynamicFilterSlots2["popoverMenuItemLabel"] = "popoverMenuItemLabel";
   DynamicFilterSlots2["popoverFilter"] = "popoverFilter";
   DynamicFilterSlots2["popoverFilterContainerFields"] = "popoverFilterContainerFields";
   DynamicFilterSlots2["popoverFilterHeader"] = "popoverFilterHeader";
-  DynamicFilterSlots2["popoverFilterHeaderIcon"] = "popoverFilterHeaderIcon";
+  DynamicFilterSlots2["contentFilter"] = "contentFilter";
   DynamicFilterSlots2["popoverFilterHeaderTitle"] = "popoverFilterHeaderTitle";
   DynamicFilterSlots2["popoverFilterActions"] = "popoverFilterActions";
+  DynamicFilterSlots2["inputFilterInputSkeleton"] = "inputFilterInputSkeleton";
   return DynamicFilterSlots2;
 })(DynamicFilterSlots || {});
 export {