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

package/components/Chip/types.d.ts

@@ -24,11 +24,9 @@ export interface ChipProps {
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
     /**
-     * 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.
+     * Text describing the `Chip`.
      */
-    label?: Maybe<string> | ReactNode;
+    label?: Maybe<string>;
     /**
      * 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;;;;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"}
+{"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"}

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,mBAwdjC,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,mBA+SjC,CAAC"}

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -1,284 +1,248 @@
 import { getTypographyStyles as e } from "../../utils/getTypographyStyles.js";
 import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
-const n = "dynamic", p = {
+const s = "dynamic", d = {
   /**
    * root: Estilos del contenedor principal del componente.
    */
-  root: ({ theme: r, ownerState: a }) => ({
-    containerName: n,
+  root: ({ theme: i, ownerState: r }) => ({
+    containerName: s,
     containerType: "inline-size",
     width: "100%",
     height: "auto",
     padding: 0,
     ...o(
-      r,
-      a?.size || "medium",
+      i,
+      r?.size || "medium",
       "container",
-      (i) => ({
-        height: i,
-        maxHeight: i,
-        minHeight: i
+      (a) => ({
+        height: a,
+        maxHeight: a,
+        minHeight: a
       })
     )
   }),
   /**
    * innerContainer: Estilos del contenedor interno del componente.
    */
-  innerContainer: ({ theme: r, ownerState: a }) => ({
+  innerContainer: ({ theme: i, ownerState: r }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-start",
-    gap: r.vars.size.baseSpacings["sp1-5"],
     width: "100%",
     height: "fit-content",
-    borderRadius: r.vars.size.borderRadius.r2,
-    background: r.vars.palette.background.default,
-    // Keep the error outline when the filter is invalid; otherwise the
-    // container has no visible border per the latest design.
-    ...!a?.isValid && {
-      boxShadow: `inset 0px 0px 0px 1px ${r.vars.palette.error.enabled}`
-    },
-    overflow: "hidden"
+    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}`
+    }
   }),
   /**
    * 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: r, ownerState: a }) => ({
+  inputFilter: ({ theme: i, ownerState: r }) => ({
     display: "flex",
     flexDirection: "row",
-    paddingLeft: r.vars.size.baseSpacings.sp2,
-    paddingRight: r.vars.size.baseSpacings.sp1,
+    paddingLeft: i.vars.size.baseSpacings.sp2,
+    paddingRight: i.vars.size.baseSpacings.sp1,
+    height: "100%",
     overflow: "hidden",
+    maxWidth: "120px",
     width: "100%",
     alignItems: "center",
-    borderRadius: r.vars.size.borderRadius["r1-5"],
-    backgroundColor: r.vars.palette.default.enabledOpacity,
+    borderTopLeftRadius: i.vars.size.borderRadius.r1,
+    borderBottomLeftRadius: i.vars.size.borderRadius.r1,
+    background: "#ffffff00",
     ...o(
-      r,
-      a?.size || "medium",
+      i,
+      r?.size || "medium",
       "container",
-      (i) => ({
-        height: i
+      (a) => ({
+        height: a
       })
     )
   }),
-  /**
-   * 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: r, ownerState: a }) => ({
+  inputFilterInput: ({ theme: i, ownerState: r }) => ({
     width: "100%",
     background: "#ffffff00",
     ...o(
-      r,
-      a?.size || "medium",
+      i,
+      r?.size || "medium",
       "action",
-      (i) => ({
-        height: i,
-        minHeight: i,
-        maxHeight: i
+      (a) => ({
+        height: a,
+        minHeight: a,
+        maxHeight: a
       })
     ),
     fontFamily: "inherit",
     ...e(
-      r.generalSettings.isMobile,
-      a?.size || "medium",
+      i.generalSettings.isMobile,
+      r?.size || "medium",
       "body"
     ),
-    color: r.vars.palette.text.secondary,
+    color: i.vars.palette.text.secondary,
     border: 0,
     borderColor: "transparent",
-    paddingLeft: r.vars.size.baseSpacings.sp1,
-    paddingRight: r.vars.size.baseSpacings.sp1,
+    paddingLeft: i.vars.size.baseSpacings.sp2,
+    paddingRight: i.vars.size.baseSpacings.sp2,
     height: "100%",
     "&::placeholder": {
-      color: r.vars.palette.text.secondary
+      color: i.vars.palette.text.secondary
     },
     "&:focus-visible": {
-      color: r.vars.palette.text.secondary,
+      color: i.vars.palette.text.secondary,
       border: "unset",
-      borderColor: r.vars.palette.primary.opacity,
-      BorderRadius: r.vars.size.borderRadius["r0-5"],
+      borderColor: i.vars.palette.primary.opacity,
+      BorderRadius: i.vars.size.borderRadius["r0-5"],
       outline: "none!important"
     }
   }),
   /**
    * appliedFilters: Estilos del contenedor de los filtros aplicados.
    */
-  appliedFilters: ({ theme: r, ownerState: a }) => ({
+  appliedFilters: ({ theme: i, ownerState: r }) => ({
     width: "100%",
     height: "fit-content",
     display: "flex",
     alignItems: "center",
     borderLeft: "none",
     margin: "0px",
-    padding: "0px",
+    padding: `0px ${i.vars.size.baseSpacings.sp1}`,
     flex: 1,
     overflow: "hidden",
     ...o(
-      r,
-      a?.size || "medium",
+      i,
+      r?.size || "medium",
       "container",
-      (i) => ({
-        height: i,
-        maxHeight: i,
-        minHeight: i
+      (a) => ({
+        height: a,
+        maxHeight: a,
+        minHeight: a
       })
     )
   }),
   /**
    * appliedFilterInnerContainer: Estilos del contenedor interno de los filtros aplicados.
    */
-  appliedFilterInnerContainer: ({ theme: r, ownerState: a }) => ({
-    padding: r.vars.size.baseSpacings["sp0-5"],
-    gap: r.vars.size.baseSpacings.sp1,
+  appliedFilterInnerContainer: ({ theme: i, ownerState: r }) => ({
+    padding: i.vars.size.baseSpacings["sp0-5"],
+    gap: i.vars.size.baseSpacings.sp1,
     height: "fit-content",
     display: "flex",
     flexWrap: "nowrap",
-    // 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,
+    width: "100%",
     justifyContent: "flex-start",
     alignItems: "center",
-    overflow: "hidden",
+    overflow: "auto hidden",
     position: "relative",
     "& .M4LChip-root": {
-      borderRadius: r.vars.size.borderRadius.r1,
+      borderRadius: i.vars.size.borderRadius.r1,
       ...o(
-        r,
-        a?.size || "medium",
+        i,
+        r?.size || "medium",
         "action",
-        (i) => ({
-          height: i
+        (a) => ({
+          height: a
         })
       ),
       "& .M4LIconButton-styledMUIIconButton:hover": {
-        backgroundColor: `${r.vars.palette.chips.error.contained.backgroundHover} !important`,
+        backgroundColor: `${i.vars.palette.chips.error.contained.backgroundHover} !important`,
         "& .M4LIcon-icon": {
-          backgroundColor: `${r.vars.palette.chips.error.contained.backgroundColorTone} !important`
+          backgroundColor: `${i.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: r, ownerState: a }) => ({
+  actions: ({ theme: i, ownerState: r }) => ({
     gridArea: "actions-filter",
     overflow: "hidden",
     display: "flex",
     flexDirection: "row",
-    gap: r.vars.size.baseSpacings["sp0-5"],
-    padding: r.vars.size.baseSpacings.sp1,
+    gap: i.vars.size.baseSpacings["sp0-5"],
+    padding: i.vars.size.baseSpacings.sp1,
     height: "100%",
     alignItems: "center",
-    borderTopRightRadius: r.vars.size.borderRadius.r1,
-    borderBottomRightRadius: r.vars.size.borderRadius.r1,
-    ...!a?.visibleRefresh && !a?.isDirty && {
+    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 && {
       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: r }) => ({
+  actionsClearButton: ({ theme: i }) => ({
     "&:hover": {
-      backgroundColor: `${r.vars.palette.chips.error.contained.backgroundHover} !important`,
-      // mask strategy icons: color via backgroundColor
+      backgroundColor: `${i.vars.palette.chips.error.contained.backgroundHover} !important`,
       "& .M4LIcon-icon": {
-        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`
+        backgroundColor: `${i.vars.palette.chips.error.contained.backgroundColorTone} !important`
       }
     }
   }),
   /**
    * actionsSubmitButton: Estilos del botón de acción de filtrado.
    */
-  actionsSubmitButton: ({ theme: r, ownerState: a }) => ({
-    ...a?.isDirty ? {
+  actionsSubmitButton: ({ theme: i, ownerState: r }) => ({
+    ...r?.isDirty ? {
       animation: "changeBgColor 0.9s ease infinite",
       "& .M4LIcon-icon": {
-        background: `${r.vars.palette.primary.main} !important`
+        background: `${i.vars.palette.primary.main} !important`
       }
     } : null,
     //Create and apply animation with change background color red and green
     "@keyframes changeBgColor": {
       "0%": {
-        background: r.vars.palette.primary.hoverOpacity
+        background: i.vars.palette.primary.hoverOpacity
       },
       "50%": {
-        background: r.vars.palette.primary.activeOpacity
+        background: i.vars.palette.primary.activeOpacity
       },
       "100%": {
-        background: r.vars.palette.primary.hoverOpacity
+        background: i.vars.palette.primary.hoverOpacity
       }
     }
   }),
   /**
    * popoverMenu: Estilos del menú emergente.
    */
-  popoverMenu: ({ theme: r }) => ({
+  popoverMenu: ({ theme: i }) => ({
     "& .MuiPaper-root": {
       display: "flex",
       flexDirection: "column",
-      padding: r.vars.size.baseSpacings.sp3,
-      gap: r.vars.size.baseSpacings.sp1,
-      borderRadius: r.vars.size.borderRadius.r1,
-      backgroundColor: r.vars.palette.background.default
+      padding: i.vars.size.baseSpacings.sp3,
+      gap: i.vars.size.baseSpacings.sp1,
+      borderRadius: i.vars.size.borderRadius.r1,
+      backgroundColor: i.vars.palette.background.default
     }
   }),
   /**
    * popoverFilter: Estilos del menú emergente de filtro.
    */
-  popoverFilter: ({ theme: r }) => ({
+  popoverFilter: ({ theme: i }) => ({
     width: "auto",
     "& .MuiPaper-root": {
-      borderRadius: `${r.vars.size.borderRadius.r3}!important`,
+      borderRadius: `${i.vars.size.borderRadius.r3}!important`,
       padding: "0 !important",
       minWidth: "220px",
       maxWidth: "100%",
       minHeight: "auto",
-      backgroundColor: r.vars.palette.background.default,
-      boxShadow: r.customShadows?.z3,
+      backgroundColor: i.vars.palette.background.default,
+      boxShadow: i.customShadows?.z3,
       "& .M4LPopover-arrowStyle": {
         display: "none"
       },
@@ -291,7 +255,7 @@ const n = "dynamic", p = {
         overflow: "visible"
       },
       "& .M4LWindowBase-root": {
-        borderRadius: `${r.vars.size.borderRadius.r3}!important`,
+        borderRadius: `${i.vars.size.borderRadius.r3}!important`,
         border: "unset!important",
         "& .M4LWindowBase-headerWindowComponent": {
           cursor: "unset"
@@ -302,172 +266,37 @@ const n = "dynamic", p = {
   /**
    * popoverFilterActions: Estilos del contenedor de acciones del menú emergente de filtro.
    */
-  popoverFilterActions: ({ theme: r }) => ({
-    paddingTop: r.vars.size.baseSpacings.sp6
+  popoverFilterActions: ({ theme: i }) => ({
+    paddingTop: i.vars.size.baseSpacings.sp6
   }),
   /**
    * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
    */
-  inputFilterInputSkeleton: ({ theme: r, ownerState: a }) => ({
+  inputFilterInputSkeleton: ({ theme: i, ownerState: r }) => ({
     width: "100%",
     minWidth: "80px",
-    marginLeft: r.vars.size.baseSpacings.sp2,
-    marginRight: r.vars.size.baseSpacings.sp2,
+    marginLeft: i.vars.size.baseSpacings.sp2,
+    marginRight: i.vars.size.baseSpacings.sp2,
     ...o(
-      r,
-      a?.size || "medium",
+      i,
+      r?.size || "medium",
       "base",
-      (i) => ({
-        height: i,
-        minHeight: i,
-        maxHeight: i
+      (a) => ({
+        height: a,
+        minHeight: a,
+        maxHeight: a
       })
     )
   }),
   /**
    * popoverFilterContainerFields: Estilos del contenedor de los campos del menú emergente de filtro.
    */
-  popoverFilterContainerFields: ({ theme: r }) => ({
-    display: "flex",
-    flexDirection: "column",
-    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 }) => ({
+  popoverFilterContainerFields: ({ theme: i }) => ({
     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"
+    gap: i.vars.size.baseSpacings.sp3
   })
 };
 export {
-  p as dynamicFilterStyles
+  d as dynamicFilterStyles
 };

package/components/DynamicFilter/dictionary.d.ts

@@ -40,8 +40,6 @@ 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Dd,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDd,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,OAAO,WAAW,CAAC"}

package/components/DynamicFilter/dictionary.js

@@ -31,8 +31,6 @@ 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/slots/SlotsEnum.d.ts

@@ -2,11 +2,9 @@ export declare enum DynamicFilterSlots {
     root = "root",
     innerContainer = "innerContainer",
     inputFilter = "inputFilter",
-    inputFilterTriggerButton = "inputFilterTriggerButton",
     inputFilterInput = "inputFilterInput",
     appliedFilters = "appliedFilters",
     appliedFilterInnerContainer = "appliedFilterInnerContainer",
-    emptyStateLabel = "emptyStateLabel",
     actions = "actions",
     actionsClearButton = "actionsClearButton",
     actionsSubmitButton = "actionsSubmitButton",
@@ -14,13 +12,6 @@ export declare enum DynamicFilterSlots {
     popoverFilter = "popoverFilter",
     popoverFilterContainerFields = "popoverFilterContainerFields",
     popoverFilterActions = "popoverFilterActions",
-    inputFilterInputSkeleton = "inputFilterInputSkeleton",
-    chipWrapper = "chipWrapper",
-    overflowMoreChip = "overflowMoreChip",
-    overflowPopover = "overflowPopover",
-    overflowPopoverList = "overflowPopoverList",
-    overflowPopoverItem = "overflowPopoverItem",
-    overflowPopoverItemHeader = "overflowPopoverItemHeader",
-    overflowPopoverItemLabel = "overflowPopoverItemLabel"
+    inputFilterInputSkeleton = "inputFilterInputSkeleton"
 }
 //# sourceMappingURL=SlotsEnum.d.ts.map

package/components/DynamicFilter/slots/SlotsEnum.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlotsEnum.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DynamicFilter/slots/SlotsEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,WAAW,gBAAgB;IAC3B,wBAAwB,6BAA6B;IACrD,gBAAgB,qBAAqB;IACrC,cAAc,mBAAmB;IACjC,2BAA2B,gCAAgC;IAC3D,eAAe,oBAAoB;IACnC,OAAO,YAAY;IACnB,kBAAkB,uBAAuB;IACzC,mBAAmB,wBAAwB;IAC3C,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;IAC/B,4BAA4B,iCAAiC;IAC7D,oBAAoB,yBAAyB;IAC7C,wBAAwB,6BAA4B;IACpD,WAAW,gBAAgB;IAC3B,gBAAgB,qBAAqB;IACrC,eAAe,oBAAoB;IACnC,mBAAmB,wBAAwB;IAC3C,mBAAmB,wBAAwB;IAC3C,yBAAyB,8BAA8B;IACvD,wBAAwB,6BAA6B;CACtD"}
+{"version":3,"file":"SlotsEnum.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/DynamicFilter/slots/SlotsEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,WAAW,gBAAgB;IAC3B,gBAAgB,qBAAqB;IACrC,cAAc,mBAAmB;IACjC,2BAA2B,gCAAgC;IAC3D,OAAO,YAAY;IACnB,kBAAkB,uBAAuB;IACzC,mBAAmB,wBAAwB;IAC3C,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;IAC/B,4BAA4B,iCAAiC;IAC7D,oBAAoB,yBAAyB;IAC7C,wBAAwB,6BAA4B;CACrD"}