@m4l/components 9.5.13 → 9.5.14-beta-pkg-670-dynamicfilter-mejoras.0

package/@types/types.d.ts

@@ -19,6 +19,8 @@ import {
   PopupViewerSlotsType,
   PopupsViewerOwnerState,
 } from '../components/popups/components/PopupsViewer/types';
+import { IconOwnerState, IconSlotsType } from '../components/Icon';
+
 import {
   DragResizeWindowOwnerState,
   DragResizeWindowRNDSlotsType,
@@ -53,6 +55,10 @@ import {
   SkeletonOwnerState,
   SkeletonSlotsType,
 } from '../components/extended/mui/Skeleton/types';
+import {
+  TypographyOwnerState,
+  TypographySlotsType,
+} from '../components/extended/mui/Typography';
 import { ColorOwnerState, ColorSlotsType } from '../components/Color/types';
 import {
   RHFColorPickerOwnerState,

package/components/Chip/types.d.ts

@@ -24,9 +24,11 @@ export interface ChipProps {
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
     /**
-     * Text describing the `Chip`.
+     * Text describing the `Chip`. Accepts a plain string or a React node
+     * (for example a `Typography` element) when callers need to style parts
+     * of the label independently while keeping the chip's layout intact.
      */
-    label?: Maybe<string>;
+    label?: Maybe<string> | ReactNode;
     /**
      * Secondary text shown below the chip label.
      */

package/components/Chip/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAG,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,MAAM,MAAM,YAAY,GAAI,WAAW,GAAG,UAAU,CAAC;AACrD;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAE;QAAC,eAAe,EAAE,MAAM,CAAA;KAAC,CAAC;IAC3D;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAC,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IAC/C;;OAEG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC,CAAC;IAClF;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IACjH,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AACD;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,SAAS,CAAC;AACnD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,sBAAsB,CAAC,aAAa,EAAE,OAAO,kBAAkB,EAAE,KAAK,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAG,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,MAAM,MAAM,YAAY,GAAI,WAAW,GAAG,UAAU,CAAC;AACrD;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAE;QAAC,eAAe,EAAE,MAAM,CAAA;KAAC,CAAC;IAC3D;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAC,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IAC/C;;OAEG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC,CAAC;IAClF;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IACjH,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AACD;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,SAAS,CAAC;AACnD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,sBAAsB,CAAC,aAAa,EAAE,OAAO,kBAAkB,EAAE,KAAK,CAAC,CAAA"}

package/components/DynamicFilter/DynamicFilter.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicFilter.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicFilter/DynamicFilter.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,mBAAmB,EAAE,mBA+SjC,CAAC"}
+{"version":3,"file":"DynamicFilter.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicFilter/DynamicFilter.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,mBAAmB,EAAE,mBAmdjC,CAAC"}

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -4,245 +4,276 @@ const n = "dynamic", d = {
   /**
    * root: Estilos del contenedor principal del componente.
    */
-  root: ({ theme: i, ownerState: r }) => ({
+  root: ({ theme: r, ownerState: a }) => ({
     containerName: n,
     containerType: "inline-size",
     width: "100%",
     height: "auto",
     padding: 0,
     ...o(
-      i,
-      r?.size || "medium",
+      r,
+      a?.size || "medium",
       "container",
-      (a) => ({
-        height: a,
-        maxHeight: a,
-        minHeight: a
+      (i) => ({
+        height: i,
+        maxHeight: i,
+        minHeight: i
       })
     )
   }),
   /**
    * innerContainer: Estilos del contenedor interno del componente.
    */
-  innerContainer: ({ theme: i, ownerState: r }) => ({
+  innerContainer: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-start",
+    gap: r.vars.size.baseSpacings["sp1-5"],
     width: "100%",
     height: "fit-content",
-    borderRadius: i.vars.size.borderRadius.r2,
-    background: i.vars.palette.background.default,
-    boxShadow: r?.isValid ? `inset 0px 0px 0px 1px ${i.vars.palette.border.secondary}` : `inset 0px 0px 0px 1px ${i.vars.palette.error.enabled}`,
-    overflow: "hidden",
-    '&:has([aria-expanded="true"])': {
-      boxShadow: r?.isValid ? `inset 0px 0px 0px 1.3px ${i.vars.palette.border.main}` : `inset 0px 0px 0px 1px ${i.vars.palette.error.enabled}`
-    }
+    borderRadius: r.vars.size.borderRadius.r2,
+    background: r.vars.palette.background.default,
+    overflow: "hidden"
   }),
   /**
    * inputFilter: Estilos del contenedor del campo de entrada de filtrado.
+   * Ahora se usa como header dentro del `PopoverMenuFields`, donde el icono
+   * queda a la izquierda y el input "Filtrar por" se alinea a continuación.
    */
-  inputFilter: ({ theme: i, ownerState: r }) => ({
+  inputFilter: ({ theme: r, ownerState: a }) => ({
     display: "flex",
     flexDirection: "row",
-    paddingLeft: i.vars.size.baseSpacings.sp2,
-    paddingRight: i.vars.size.baseSpacings.sp1,
-    height: "100%",
+    paddingLeft: r.vars.size.baseSpacings.sp2,
+    paddingRight: r.vars.size.baseSpacings.sp1,
     overflow: "hidden",
-    maxWidth: "120px",
     width: "100%",
     alignItems: "center",
-    borderTopLeftRadius: i.vars.size.borderRadius.r1,
-    borderBottomLeftRadius: i.vars.size.borderRadius.r1,
-    background: "#ffffff00",
+    borderRadius: r.vars.size.borderRadius["r1-5"],
+    backgroundColor: r.vars.palette.default.enabledOpacity,
     ...o(
-      i,
-      r?.size || "medium",
+      r,
+      a?.size || "medium",
       "container",
-      (a) => ({
-        height: a
+      (i) => ({
+        height: i
       })
     )
   }),
+  /**
+   * inputFilterTriggerButton: IconButton que sustituye al input en el header
+   * principal. Al hacerle clic abre el `PopoverMenuFields`. Cuando el popover
+   * está abierto (`ownerState.selected`) se pinta con los mismos tokens que
+   * el chip "Más" activo — fondo `info.contained.backgroundColor` y border
+   * `info.semanticText` — para mantener consistencia visual.
+   */
+  inputFilterTriggerButton: ({ theme: r, ownerState: a }) => ({
+    flexShrink: 0,
+    cursor: "pointer",
+    borderRadius: r.vars.size.borderRadius.r1,
+    ...a?.selected && {
+      backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
+      border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
+      outline: "none !important",
+      "&:hover, &:focus, &:focus-visible": {
+        backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
+        border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
+        outline: "none !important"
+      }
+    }
+  }),
   /**
    * inputFilterInput: Estilos del campo de entrada de filtrado.
    */
-  inputFilterInput: ({ theme: i, ownerState: r }) => ({
+  inputFilterInput: ({ theme: r, ownerState: a }) => ({
     width: "100%",
     background: "#ffffff00",
     ...o(
-      i,
-      r?.size || "medium",
+      r,
+      a?.size || "medium",
       "action",
-      (a) => ({
-        height: a,
-        minHeight: a,
-        maxHeight: a
+      (i) => ({
+        height: i,
+        minHeight: i,
+        maxHeight: i
       })
     ),
     fontFamily: "inherit",
     ...e(
-      i.generalSettings.isMobile,
-      r?.size || "medium",
+      r.generalSettings.isMobile,
+      a?.size || "medium",
       "bodyStandard"
     ),
-    color: i.vars.palette.text.secondary,
+    color: r.vars.palette.text.secondary,
     border: 0,
     borderColor: "transparent",
-    paddingLeft: i.vars.size.baseSpacings.sp2,
-    paddingRight: i.vars.size.baseSpacings.sp2,
+    paddingLeft: r.vars.size.baseSpacings.sp1,
+    paddingRight: r.vars.size.baseSpacings.sp1,
     height: "100%",
     "&::placeholder": {
-      color: i.vars.palette.text.secondary
+      color: r.vars.palette.text.secondary
     },
     "&:focus-visible": {
-      color: i.vars.palette.text.secondary,
+      color: r.vars.palette.text.secondary,
       border: "unset",
-      borderColor: i.vars.palette.primary.opacity,
-      BorderRadius: i.vars.size.borderRadius["r0-5"],
+      borderColor: r.vars.palette.primary.opacity,
+      BorderRadius: r.vars.size.borderRadius["r0-5"],
       outline: "none!important"
     }
   }),
   /**
    * appliedFilters: Estilos del contenedor de los filtros aplicados.
    */
-  appliedFilters: ({ theme: i, ownerState: r }) => ({
+  appliedFilters: ({ theme: r, ownerState: a }) => ({
     width: "100%",
     height: "fit-content",
     display: "flex",
     alignItems: "center",
     borderLeft: "none",
     margin: "0px",
-    padding: `0px ${i.vars.size.baseSpacings.sp1}`,
+    padding: "0px",
     flex: 1,
     overflow: "hidden",
     ...o(
-      i,
-      r?.size || "medium",
+      r,
+      a?.size || "medium",
       "container",
-      (a) => ({
-        height: a,
-        maxHeight: a,
-        minHeight: a
+      (i) => ({
+        height: i,
+        maxHeight: i,
+        minHeight: i
       })
     )
   }),
   /**
    * appliedFilterInnerContainer: Estilos del contenedor interno de los filtros aplicados.
    */
-  appliedFilterInnerContainer: ({ theme: i, ownerState: r }) => ({
-    padding: i.vars.size.baseSpacings["sp0-5"],
-    gap: i.vars.size.baseSpacings.sp1,
+  appliedFilterInnerContainer: ({ theme: r, ownerState: a }) => ({
+    padding: r.vars.size.baseSpacings["sp0-5"],
+    gap: r.vars.size.baseSpacings.sp1,
     height: "fit-content",
     display: "flex",
     flexWrap: "nowrap",
-    width: "100%",
+    // Only take the space the visible chips need (do not grow). Shrinks
+    // when content overflows to leave room for the sibling "More" chip.
+    // The "More" chip then sits flush against the last visible chip with
+    // any leftover space appearing AFTER it.
+    flex: "0 1 auto",
+    minWidth: 0,
     justifyContent: "flex-start",
     alignItems: "center",
-    overflow: "auto hidden",
+    overflow: "hidden",
     position: "relative",
     "& .M4LChip-root": {
-      borderRadius: i.vars.size.borderRadius.r1,
+      borderRadius: r.vars.size.borderRadius.r1,
       ...o(
-        i,
-        r?.size || "medium",
+        r,
+        a?.size || "medium",
         "action",
-        (a) => ({
-          height: a
+        (i) => ({
+          height: i
         })
       ),
       "& .M4LIconButton-styledMUIIconButton:hover": {
-        backgroundColor: `${i.vars.palette.chips.error.contained.backgroundHover} !important`,
+        backgroundColor: `${r.vars.palette.chips.error.contained.backgroundHover} !important`,
         "& .M4LIcon-icon": {
-          backgroundColor: `${i.vars.palette.chips.error.contained.backgroundColorTone} !important`
+          backgroundColor: `${r.vars.palette.chips.error.contained.backgroundColorTone} !important`
         }
       }
     }
   }),
+  /**
+   * emptyStateLabel: Texto mostrado dentro de `AppliedFilters` cuando no
+   * hay filtros aplicados ("Sin filtros aplicados"). Usa `text.secondary`
+   * para desaturar el mensaje y no competir visualmente con los chips.
+   */
+  emptyStateLabel: ({ theme: r }) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    color: r.vars.palette.text.secondary
+  }),
   /**
    * actions: Estilos del contenedor de los botones de acción.
    */
-  actions: ({ theme: i, ownerState: r }) => ({
+  actions: ({ theme: r, ownerState: a }) => ({
     gridArea: "actions-filter",
     overflow: "hidden",
     display: "flex",
     flexDirection: "row",
-    gap: i.vars.size.baseSpacings["sp0-5"],
-    padding: i.vars.size.baseSpacings.sp1,
+    gap: r.vars.size.baseSpacings["sp0-5"],
+    padding: r.vars.size.baseSpacings.sp1,
     height: "100%",
     alignItems: "center",
-    borderTopRightRadius: i.vars.size.borderRadius.r1,
-    borderBottomRightRadius: i.vars.size.borderRadius.r1,
-    boxShadow: `inset 1px 0px 0px 0px ${i.vars.palette.border.secondary}`,
-    ...!r?.visibleRefresh && !r?.isDirty && {
+    borderTopRightRadius: r.vars.size.borderRadius.r1,
+    borderBottomRightRadius: r.vars.size.borderRadius.r1,
+    ...!a?.visibleRefresh && !a?.isDirty && {
       display: "none"
-    },
-    ...r?.inEdition && r?.isValid && {
-      boxShadow: `inset 1px 0px 0px 0px ${i.vars.palette.border.main}`
-    },
-    ...!r?.isValid && {
-      boxShadow: `inset 1px 0px 0px 0px ${i.vars.palette.error.enabled}`
     }
   }),
   /**
    * actionsClearButton: Estilos del botón de acción de limpiar.
    */
-  actionsClearButton: ({ theme: i }) => ({
+  actionsClearButton: ({ theme: r }) => ({
     "&:hover": {
-      backgroundColor: `${i.vars.palette.chips.error.contained.backgroundHover} !important`,
+      backgroundColor: `${r.vars.palette.chips.error.contained.backgroundHover} !important`,
+      // mask strategy icons: color via backgroundColor
       "& .M4LIcon-icon": {
-        backgroundColor: `${i.vars.palette.chips.error.contained.backgroundColorTone} !important`
+        backgroundColor: `${r.vars.palette.error.semanticText} !important`
+      },
+      // component strategy icons (createSvgIcon): color via fill on SVG paths
+      "& .MuiSvgIcon-root svg path, & .MuiSvgIcon-root path": {
+        fill: `${r.vars.palette.error.semanticText} !important`
       }
     }
   }),
   /**
    * actionsSubmitButton: Estilos del botón de acción de filtrado.
    */
-  actionsSubmitButton: ({ theme: i, ownerState: r }) => ({
-    ...r?.isDirty ? {
+  actionsSubmitButton: ({ theme: r, ownerState: a }) => ({
+    ...a?.isDirty ? {
       animation: "changeBgColor 0.9s ease infinite",
       "& .M4LIcon-icon": {
-        background: `${i.vars.palette.primary.main} !important`
+        background: `${r.vars.palette.primary.main} !important`
       }
     } : null,
     //Create and apply animation with change background color red and green
     "@keyframes changeBgColor": {
       "0%": {
-        background: i.vars.palette.primary.hoverOpacity
+        background: r.vars.palette.primary.hoverOpacity
       },
       "50%": {
-        background: i.vars.palette.primary.activeOpacity
+        background: r.vars.palette.primary.activeOpacity
       },
       "100%": {
-        background: i.vars.palette.primary.hoverOpacity
+        background: r.vars.palette.primary.hoverOpacity
       }
     }
   }),
   /**
    * popoverMenu: Estilos del menú emergente.
    */
-  popoverMenu: ({ theme: i }) => ({
+  popoverMenu: ({ theme: r }) => ({
     "& .MuiPaper-root": {
       display: "flex",
       flexDirection: "column",
-      padding: i.vars.size.baseSpacings.sp3,
-      gap: i.vars.size.baseSpacings.sp1,
-      borderRadius: i.vars.size.borderRadius.r1,
-      backgroundColor: i.vars.palette.background.default
+      padding: r.vars.size.baseSpacings.sp3,
+      gap: r.vars.size.baseSpacings.sp1,
+      borderRadius: r.vars.size.borderRadius.r1,
+      backgroundColor: r.vars.palette.background.default
     }
   }),
   /**
    * popoverFilter: Estilos del menú emergente de filtro.
    */
-  popoverFilter: ({ theme: i }) => ({
+  popoverFilter: ({ theme: r }) => ({
     width: "auto",
     "& .MuiPaper-root": {
-      borderRadius: `${i.vars.size.borderRadius.r3}!important`,
+      borderRadius: `${r.vars.size.borderRadius.r3}!important`,
       padding: "0 !important",
       minWidth: "220px",
       maxWidth: "100%",
       minHeight: "auto",
-      backgroundColor: i.vars.palette.background.default,
-      boxShadow: i.customShadows?.z3,
+      backgroundColor: r.vars.palette.background.default,
+      boxShadow: r.customShadows?.z3,
       "& .M4LPopover-arrowStyle": {
         display: "none"
       },
@@ -255,7 +286,7 @@ const n = "dynamic", d = {
         overflow: "visible"
       },
       "& .M4LWindowBase-root": {
-        borderRadius: `${i.vars.size.borderRadius.r3}!important`,
+        borderRadius: `${r.vars.size.borderRadius.r3}!important`,
         border: "unset!important",
         "& .M4LWindowBase-headerWindowComponent": {
           cursor: "unset"
@@ -266,35 +297,170 @@ const n = "dynamic", d = {
   /**
    * popoverFilterActions: Estilos del contenedor de acciones del menú emergente de filtro.
    */
-  popoverFilterActions: ({ theme: i }) => ({
-    paddingTop: i.vars.size.baseSpacings.sp6
+  popoverFilterActions: ({ theme: r }) => ({
+    paddingTop: r.vars.size.baseSpacings.sp6
   }),
   /**
    * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
    */
-  inputFilterInputSkeleton: ({ theme: i, ownerState: r }) => ({
+  inputFilterInputSkeleton: ({ theme: r, ownerState: a }) => ({
     width: "100%",
     minWidth: "80px",
-    marginLeft: i.vars.size.baseSpacings.sp2,
-    marginRight: i.vars.size.baseSpacings.sp2,
+    marginLeft: r.vars.size.baseSpacings.sp2,
+    marginRight: r.vars.size.baseSpacings.sp2,
     ...o(
-      i,
-      r?.size || "medium",
+      r,
+      a?.size || "medium",
       "base",
-      (a) => ({
-        height: a,
-        minHeight: a,
-        maxHeight: a
+      (i) => ({
+        height: i,
+        minHeight: i,
+        maxHeight: i
       })
     )
   }),
   /**
    * popoverFilterContainerFields: Estilos del contenedor de los campos del menú emergente de filtro.
    */
-  popoverFilterContainerFields: ({ theme: i }) => ({
+  popoverFilterContainerFields: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: i.vars.size.baseSpacings.sp3
+    gap: r.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * chipWrapper: Wrapper for each chip used for overflow measurement.
+   */
+  chipWrapper: ({ theme: r, ownerState: a }) => ({
+    display: "inline-flex",
+    flexShrink: 0,
+    ...a?.isWarning && {
+      "@keyframes m4lDynamicFilterWarningPulse": {
+        "0%, 100%": {
+          backgroundColor: r.vars.palette.chips.warning.contained.backgroundColor
+        },
+        "50%": {
+          backgroundColor: r.vars.palette.chips.warning.contained.backgroundHover
+        }
+      },
+      '& .MuiChip-root, & [class*="M4LChip-root"]': {
+        animation: "m4lDynamicFilterWarningPulse 1.6s ease-in-out infinite"
+      }
+    }
+  }),
+  /**
+   * overflowMoreChip: Styles for the "More (N)..." chip button that appears when filters overflow.
+   */
+  overflowMoreChip: ({ theme: r, ownerState: a }) => ({
+    flexShrink: 0,
+    cursor: "pointer",
+    borderRadius: r.vars.size.borderRadius.r1,
+    ...o(
+      r,
+      a?.size || "medium",
+      "action",
+      (i) => ({
+        height: i
+      })
+    ),
+    // While the overflow popover is open, lock the chip to the info palette's
+    // background and add the container border in `info.semanticText` so the
+    // chip visually stays active regardless of hover/focus transitions.
+    ...a?.selected && {
+      backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
+      border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
+      outline: "none !important",
+      "&:hover, &:focus, &:focus-visible": {
+        backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
+        border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
+        outline: "none !important"
+      }
+    }
+  }),
+  /**
+   * overflowPopover: Styles for the popover that shows hidden overflow filters.
+   */
+  overflowPopover: ({ theme: r }) => ({
+    "& .MuiPaper-root": {
+      display: "flex",
+      flexDirection: "column",
+      padding: `${r.vars.size.baseSpacings.sp3} ${r.vars.size.baseSpacings.sp2}`,
+      gap: r.vars.size.baseSpacings.sp1,
+      borderRadius: r.vars.size.borderRadius.r2,
+      backgroundColor: r.vars.palette.background.default,
+      boxShadow: r.customShadows?.z3,
+      width: "280px"
+    }
+  }),
+  /**
+   * overflowPopoverList: Styles for the list container inside the overflow popover.
+   */
+  overflowPopoverList: ({ theme: r }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: r.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * overflowPopoverItem: Styles for each filter item inside the overflow popover.
+   * Row layout: icon | text column | close button, all vertically centered.
+   */
+  overflowPopoverItem: ({ theme: r, ownerState: a }) => ({
+    display: "flex",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: r.vars.size.baseSpacings.sp2,
+    padding: r.vars.size.baseSpacings.sp2,
+    borderBottom: `1px solid ${r.vars.palette.border.disabled}`,
+    background: r.vars.palette.background.default,
+    borderRadius: r.vars.size.borderRadius["r1-5"],
+    cursor: "pointer",
+    transition: "background-color 0.3s ease",
+    "&:hover": {
+      backgroundColor: `${r.vars.palette.default.hoverOpacity} !important`
+    },
+    ...a?.selected && {
+      backgroundColor: `${r.vars.palette.default.hoverOpacity} !important`
+    },
+    "&:last-child": {
+      borderBottom: "none"
+    }
+  }),
+  /**
+   * overflowPopoverItemHeader: Column container for label and value text.
+   */
+  overflowPopoverItemHeader: ({ theme: r }) => ({
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    flex: 1,
+    minWidth: 0,
+    rowGap: r.vars.size.baseSpacings["sp0-5"],
+    columnGap: r.vars.size.baseSpacings.sp1,
+    // The label occupies the full first row so the value chips wrap below it.
+    "& > span:first-of-type": {
+      flexBasis: "100%"
+    },
+    "& .M4LChip-root": {
+      height: "auto",
+      minHeight: "auto",
+      maxWidth: "100%"
+    },
+    "& .M4LChip-root .M4LTypography-root": {
+      whiteSpace: "normal",
+      wordBreak: "break-word",
+      overflow: "visible",
+      textOverflow: "clip"
+    }
+  }),
+  /**
+   * overflowPopoverItemLabel: Label text for the filter field name inside the overflow item.
+   */
+  overflowPopoverItemLabel: ({ theme: r }) => ({
+    ...e(!1, "medium", "body"),
+    color: r.vars.palette.text.primary,
+    flex: 1,
+    whiteSpace: "normal",
+    wordBreak: "break-word"
   })
 };
 export {

package/components/DynamicFilter/dictionary.d.ts

@@ -40,6 +40,8 @@ export declare const DICCTIONARY: {
     readonly label_select_async_operand1: "dynamic_filter.label_select_async_operand1";
     readonly label_select_async_operands_array: "dynamic_filter.label_select_async_operands_array";
     readonly label_no_fields_available: "dynamic_filter.label_no_fields_available";
+    readonly label_no_filters_applied: "dynamic_filter.label_no_filters_applied";
+    readonly label_more: "dynamic_filter.label_more";
     readonly error_operand_required: "dynamic_filter.error_operand_required";
     readonly error_operator_required: "dynamic_filter.error_operator_required";
     readonly error_invalid_date: "dynamic_filter.error_invalid_date";

package/components/DynamicFilter/dictionary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicFilter/dictionary.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B,mBAAmB,CAAC;AAC7D;;;GAGG;AACH,wBAAgB,oCAAoC,aAInD;AACD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDd,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,OAAO,WAAW,CAAC"}
+{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicFilter/dictionary.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B,mBAAmB,CAAC;AAC7D;;;GAGG;AACH,wBAAgB,oCAAoC,aAInD;AACD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Dd,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,OAAO,WAAW,CAAC"}

package/components/DynamicFilter/dictionary.js

@@ -31,6 +31,8 @@ const t = {
   label_select_async_operand1: `${e}.label_select_async_operand1`,
   label_select_async_operands_array: `${e}.label_select_async_operands_array`,
   label_no_fields_available: `${e}.label_no_fields_available`,
+  label_no_filters_applied: `${e}.label_no_filters_applied`,
+  label_more: `${e}.label_more`,
   //Validations
   error_operand_required: `${e}.error_operand_required`,
   error_operator_required: `${e}.error_operator_required`,

package/components/DynamicFilter/helpers/calculateVisibleChipsCount.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Calculates how many chips fit within a given available width.
+ * Pure function — all measurements are passed in by the caller.
+ * @param availableWidth - Total width available for the chips (already
+ *                         excluding any sibling element such as the
+ *                         "More" chip and any padding).
+ * @param gap            - Gap between chips in pixels.
+ * @param chipWidths     - Natural width of each chip in display order.
+ * @returns The number of chips that fit within the available width.
+ */
+export declare function calculateVisibleChipsCount(availableWidth: number, gap: number, chipWidths: number[]): number;
+//# sourceMappingURL=calculateVisibleChipsCount.d.ts.map

package/components/DynamicFilter/helpers/calculateVisibleChipsCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculateVisibleChipsCount.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DynamicFilter/helpers/calculateVisibleChipsCount.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,EAAE,GACnB,MAAM,CAsBR"}