@m4l/components 9.2.60-24062025.beta.1 → 9.2.60-J18062025.beta.1

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -2,59 +2,50 @@ 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: Estilos del contenedor principal del componente.
-   */
-  root: ({ theme, ownerState }) => ({
+  root: {
     containerName: CONTAINER_QUERY_NAME,
     containerType: "inline-size",
     width: "100%",
     height: "auto",
-    padding: 0,
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "container",
-      (size) => ({
-        height: size,
-        maxHeight: size,
-        minHeight: size
-      })
-    )
-  }),
+    padding: 0
+  },
   /**
    * innerContainer: Estilos del contenedor interno del componente.
    */
   innerContainer: ({ theme, ownerState }) => ({
-    display: "flex",
+    display: "grid",
+    gridTemplateColumns: "auto 1fr auto",
+    gridTemplateAreas: '"input-filter applied-filters actions-filter"',
     alignItems: "center",
     justifyContent: "flex-start",
     width: "100%",
     height: "fit-content",
-    borderRadius: theme.vars.size.borderRadius.r2,
+    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,
-    boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1px ${theme.vars.palette.border.default}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`,
-    overflow: "hidden",
     '&:has([aria-expanded="true"])': {
-      boxShadow: ownerState?.isValid ? `inset 0px 0px 0px 1.3px ${theme.vars.palette.border.main}` : `inset 0px 0px 0px 1px ${theme.vars.palette.error.enabled}`
+      borderColor: ownerState?.isValid ? theme.vars.palette.primary.active : theme.vars.palette.error.enabled
     }
   }),
   /**
    * inputFilter: Estilos del contenedor del campo de entrada de filtrado.
    */
   inputFilter: ({ theme, ownerState }) => ({
+    gridArea: "input-filter",
     display: "flex",
     flexDirection: "row",
-    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
     paddingRight: theme.vars.size.baseSpacings.sp1,
     height: "100%",
     overflow: "hidden",
-    maxWidth: "120px",
+    maxWidth: "135px",
     width: "100%",
     alignItems: "center",
     borderTopLeftRadius: theme.vars.size.borderRadius.r1,
     borderBottomLeftRadius: theme.vars.size.borderRadius.r1,
-    background: "#ffffff00",
+    borderRight: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border?.default,
     ...getSizeStyles(
       theme,
       ownerState?.size || "medium",
@@ -68,8 +59,6 @@ const dynamicFilterStyles = {
    * inputFilterInput: Estilos del campo de entrada de filtrado.
    */
   inputFilterInput: ({ theme, ownerState }) => ({
-    width: "100%",
-    background: "#ffffff00",
     ...getSizeStyles(
       theme,
       ownerState?.size || "medium",
@@ -80,12 +69,12 @@ const dynamicFilterStyles = {
         maxHeight: size
       })
     ),
-    fontFamily: "inherit",
     ...getTypographyStyles(
       theme.generalSettings.isMobile,
       ownerState?.size || "medium",
       "body"
     ),
+    background: theme.vars.palette.background.default,
     color: theme.vars.palette.text.secondary,
     border: 0,
     borderColor: "transparent",
@@ -97,40 +86,33 @@ const dynamicFilterStyles = {
     },
     "&:focus-visible": {
       color: theme.vars.palette.text.secondary,
-      border: "unset",
+      border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette.primary.opacity,
+      background: theme.vars.palette.primary.opacity,
       BorderRadius: theme.vars.size.borderRadius["r0-5"],
       outline: "none!important"
+    },
+    "&:hover": {
+      borderColor: theme.vars.palette.primary?.toneOpacity,
+      background: theme.vars.palette.background?.hover
     }
   }),
   /**
    * appliedFilters: Estilos del contenedor de los filtros aplicados.
    */
-  appliedFilters: ({ theme, ownerState }) => ({
+  appliedFilters: ({ theme }) => ({
+    gridArea: "applied-filters",
     width: "100%",
     height: "fit-content",
-    display: "flex",
-    alignItems: "center",
+    overflow: "hidden",
     borderLeft: "none",
     margin: "0px",
-    padding: `0px ${theme.vars.size.baseSpacings.sp1}`,
-    flex: 1,
-    overflow: "hidden",
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "container",
-      (size) => ({
-        height: size,
-        maxHeight: size,
-        minHeight: size
-      })
-    )
+    padding: `0px ${theme.vars.size.baseSpacings.sp1}`
   }),
   /**
    * appliedFilterInnerContainer: Estilos del contenedor interno de los filtros aplicados.
    */
-  appliedFilterInnerContainer: ({ theme, ownerState }) => ({
+  appliedFilterInnerContainer: ({ theme }) => ({
     padding: theme.vars.size.baseSpacings["sp0-5"],
     gap: theme.vars.size.baseSpacings.sp1,
     height: "fit-content",
@@ -140,24 +122,7 @@ const dynamicFilterStyles = {
     justifyContent: "flex-start",
     alignItems: "center",
     overflow: "auto hidden",
-    position: "relative",
-    "& .M4LChip-root": {
-      borderRadius: theme.vars.size.borderRadius.r1,
-      ...getSizeStyles(
-        theme,
-        ownerState?.size || "medium",
-        "action",
-        (size) => ({
-          height: size
-        })
-      ),
-      "& .M4LIconButton-styledMUIIconButton:hover": {
-        backgroundColor: `${theme.vars.palette.chips.error.contained.backgroundHover} !important`,
-        "& .M4LIcon-icon": {
-          backgroundColor: `${theme.vars.palette.chips.error.contained.backgroundColorTone} !important`
-        }
-      }
-    }
+    position: "relative"
   }),
   /**
    * actions: Estilos del contenedor de los botones de acción.
@@ -173,32 +138,19 @@ const dynamicFilterStyles = {
     alignItems: "center",
     borderTopRightRadius: theme.vars.size.borderRadius.r1,
     borderBottomRightRadius: theme.vars.size.borderRadius.r1,
-    boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.default}`,
-    ...!ownerState?.visibleRefresh && !ownerState?.isDirty && {
-      display: "none"
-    },
-    ...ownerState?.inEdition && ownerState?.isValid && {
-      boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.main}`
-    },
-    ...!ownerState?.isValid && {
-      boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.error.enabled}`
-    }
-  }),
-  /**
-   * actionsClearButton: Estilos del botón de acción de limpiar.
-   */
-  actionsClearButton: ({ theme }) => ({
-    "&:hover": {
-      backgroundColor: `${theme.vars.palette.chips.error.contained.backgroundHover} !important`,
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.chips.error.contained.backgroundColorTone} !important`
-      }
-    }
+    borderLeft: !ownerState?.visibleRefresh && !ownerState?.isDirty ? "none" : theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border?.default
   }),
+  actionsClearButton: {
+    visibility: "visible"
+  },
   /**
    * actionsSubmitButton: Estilos del botón de acción de filtrado.
    */
   actionsSubmitButton: ({ theme, ownerState }) => ({
+    ...ownerState?.isValid === false ? { border: `1px dashed ${theme.vars.palette.error.enabled}` } : {
+      visibility: "visible"
+    },
     ...ownerState?.isDirty ? {
       animation: "changeBgColor 0.9s ease infinite",
       "& .M4LIcon-icon": {
@@ -250,19 +202,66 @@ const dynamicFilterStyles = {
         minWidth: "220px",
         maxWidth: "420px",
         height: "fit-content"
-      },
-      "& .M4LWindowBase-root": {
-        border: "unset!important",
-        "& .M4LWindowBase-headerWindowComponent": {
-          cursor: "unset"
-        }
       }
     }
   }),
+  /**
+   * popoverFilterHeader: Estilos del encabezado del menú emergente de filtro.
+   */
+  popoverFilterHeader: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    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
+      })
+    )
+  }),
+  /**
+   * popoverFilterHeaderTitle: Estilos del título del menú emergente de filtro.
+   */
+  popoverFilterHeaderTitle: ({ theme }) => ({
+    color: `${theme.vars.palette.primary.main} !important`
+  }),
+  /**
+   * popoverFilterContainerFields: Estilos del contenedor de campos del menú emergente de filtro.
+   */
+  popoverFilterContainerFields: ({ theme }) => ({
+    height: "fit-content",
+    "& > div": {
+      display: "flex",
+      flexDirection: "column",
+      gap: theme.vars.size.baseSpacings.sp2
+    }
+  }),
+  /**
+   * contentFilter: Estilos del contenedor entre el change filter y actions
+   */
+  contentFilter: ({ theme }) => ({
+    display: "flex",
+    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: {},
+  popoverFilterActions: ({ theme }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp3} 0px`
+  }),
   /**
    * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
    */
@@ -281,14 +280,6 @@ const dynamicFilterStyles = {
         maxHeight: size
       })
     )
-  }),
-  /**
-   * popoverFilterContainerFields: Estilos del contenedor de los campos del menú emergente de filtro.
-   */
-  popoverFilterContainerFields: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp4
   })
 };
 export {

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

@@ -11,6 +11,9 @@ export declare enum DynamicFilterSlots {
     popoverMenu = "popoverMenu",
     popoverFilter = "popoverFilter",
     popoverFilterContainerFields = "popoverFilterContainerFields",
+    popoverFilterHeader = "popoverFilterHeader",
+    contentFilter = "contentFilter",
+    popoverFilterHeaderTitle = "popoverFilterHeaderTitle",
     popoverFilterActions = "popoverFilterActions",
     inputFilterInputSkeleton = "inputFilterInputSkeleton"
 }

package/components/DynamicFilter/slots/SlotsEnum.js

@@ -11,6 +11,9 @@ var DynamicFilterSlots = /* @__PURE__ */ ((DynamicFilterSlots2) => {
   DynamicFilterSlots2["popoverMenu"] = "popoverMenu";
   DynamicFilterSlots2["popoverFilter"] = "popoverFilter";
   DynamicFilterSlots2["popoverFilterContainerFields"] = "popoverFilterContainerFields";
+  DynamicFilterSlots2["popoverFilterHeader"] = "popoverFilterHeader";
+  DynamicFilterSlots2["contentFilter"] = "contentFilter";
+  DynamicFilterSlots2["popoverFilterHeaderTitle"] = "popoverFilterHeaderTitle";
   DynamicFilterSlots2["popoverFilterActions"] = "popoverFilterActions";
   DynamicFilterSlots2["inputFilterInputSkeleton"] = "inputFilterInputSkeleton";
   return DynamicFilterSlots2;

package/components/DynamicFilter/slots/dynamicFilterSlots.d.ts

@@ -34,6 +34,15 @@ export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pi
 export declare const PopoverContainerFieldsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PopoverHeaderStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContentFilterStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PopoverHeaderTitleStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
 export declare const PopoverHeaderActionsStyled: import('@emotion/styled').StyledComponent<Pick<import('../../CommonActions/components/ActionsContainer').ActionsContainerProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../CommonActions/components/ActionsContainer').ActionsContainerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/DynamicFilter/slots/dynamicFilterSlots.js

@@ -4,6 +4,7 @@ import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../constants.js";
 import { d as dynamicFilterStyles } from "../DynamicFilter.styles.js";
 import { D as DynamicFilterSlots } from "./SlotsEnum.js";
 import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { P as Popover } from "../../mui_extended/Popover/Popover.js";
 const RootStyled = styled("div", {
@@ -54,6 +55,18 @@ const PopoverContainerFieldsStyled = styled("div", {
   name: DYNAMIC_FILTER_KEY_COMPONENT,
   slot: DynamicFilterSlots.popoverFilterContainerFields
 })(dynamicFilterStyles?.popoverFilterContainerFields);
+const PopoverHeaderStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterHeader
+})(dynamicFilterStyles?.popoverFilterHeader);
+const ContentFilterStyled = styled("div", {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.contentFilter
+})(dynamicFilterStyles?.contentFilter);
+const PopoverHeaderTitleStyled = styled(Typography, {
+  name: DYNAMIC_FILTER_KEY_COMPONENT,
+  slot: DynamicFilterSlots.popoverFilterHeaderTitle
+})(dynamicFilterStyles?.popoverFilterHeaderTitle);
 const PopoverHeaderActionsStyled = styled(ActionsContainer, {
   name: DYNAMIC_FILTER_KEY_COMPONENT,
   slot: DynamicFilterSlots.popoverFilterActions
@@ -64,6 +77,7 @@ const InputFilterInputSkeletonStyled = styled(Skeleton, {
 })(dynamicFilterStyles?.inputFilterInputSkeleton);
 export {
   AppliedFiltersStyled as A,
+  ContentFilterStyled as C,
   InnerContainerStyled as I,
   PopoverStyled as P,
   RootStyled as R,
@@ -74,7 +88,9 @@ export {
   InputFilterStyled as e,
   InputFilterInputSkeletonStyled as f,
   InputFilterInputStyled as g,
-  PopoverContainerFieldsStyled as h,
-  PopoverHeaderActionsStyled as i,
-  PopoverMenuStyled as j
+  PopoverHeaderStyled as h,
+  PopoverHeaderTitleStyled as i,
+  PopoverContainerFieldsStyled as j,
+  PopoverHeaderActionsStyled as k,
+  PopoverMenuStyled as l
 };

package/components/DynamicFilter/store/DynamicFilterContext.js

@@ -25,6 +25,7 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
     visibleRefresh = true
   } = props;
   const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const { getLabel } = useModuleDictionary();
   const dynamicFilterStoreRef = useRef();
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -32,29 +33,32 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
   const isSkeleton = useModuleSkeleton();
   const isFirstRender = useFirstRender([isDesktop, isSkeleton]);
   if (!dynamicFilterStoreRef.current) {
-    dynamicFilterStoreRef.current = createDynamicFilterStore({
-      allField: {
-        ...ALL_FIELD,
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
+    dynamicFilterStoreRef.current = createDynamicFilterStore(
+      {
+        allField: {
+          ...ALL_FIELD,
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
+        },
+        withAllField,
+        fields,
+        automatic,
+        getLabel,
+        dataTestId,
+        size,
+        storeId,
+        visibleRefresh,
+        ownerState: {
+          isSkeleton,
+          isDirty: false,
+          inEdition: false,
+          isValid: true,
+          isMobile: !isDesktop,
+          isEmpty: true,
+          size
+        }
       },
-      withAllField,
-      fields,
-      automatic,
-      getLabel,
-      dataTestId,
-      size: currentSize,
-      storeId,
-      visibleRefresh,
-      ownerState: {
-        isSkeleton,
-        isDirty: false,
-        inEdition: false,
-        isValid: true,
-        isMobile: !isDesktop,
-        isEmpty: true,
-        size: currentSize
-      }
-    }, storeDevtoolsEnabled);
+      storeDevtoolsEnabled
+    );
     dynamicFilterStoreRef.current.getState().actions.init(initialAppliedFilters);
   }
   const fireOnChangeFilters = useStore(
@@ -62,8 +66,45 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
     (state) => state.actions.fireOnChangeFilters,
     shallow
   );
+  const openPopoverMenuFields = useStore(
+    dynamicFilterStoreRef.current,
+    (state) => state.actions.openPopoverMenuFields,
+    shallow
+  );
+  const showPopoverFilterForAdd = useStore(
+    dynamicFilterStoreRef.current,
+    (state) => state.actions.showPopoverFilterForAdd,
+    shallow
+  );
+  const addExternalFilter = (columnKey) => {
+    try {
+      const state = dynamicFilterStoreRef.current?.getState();
+      if (!state) {
+        return;
+      }
+      const field = state.actions.getFieldByName(columnKey);
+      const isFilterApplied = state.appliedFilters.some(
+        (filter) => filter.field.name === columnKey && filter.isSet
+      );
+      const isFilterMultiple = field.multiple;
+      if (isFilterApplied && !isFilterMultiple) {
+        return;
+      }
+      showPopoverFilterForAdd(field);
+    } catch (error) {
+      throw new Error(`Error al agregar el filtro externo: ${error}`);
+    }
+  };
+  const getCurrentFilters = useStore(
+    dynamicFilterStoreRef.current,
+    (state) => () => state.appliedFilters,
+    shallow
+  );
   useImperativeHandle(ref, () => ({
-    fireOnChangeFilter: fireOnChangeFilters
+    fireOnChangeFilter: fireOnChangeFilters,
+    openPopoverMenuFields,
+    addExternalFilter,
+    getCurrentFilters
   }));
   const countOnChangeFiltersApplied = useStore(
     dynamicFilterStoreRef.current,
@@ -95,13 +136,13 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
     }
   }, []);
   useEffect(() => {
-    if (dynamicFilterStoreRef.current?.getState().size !== currentSize) {
-      dynamicFilterStoreRef.current?.getState().actions.setSize(currentSize);
+    if (dynamicFilterStoreRef.current?.getState().size !== adjustedSize) {
+      dynamicFilterStoreRef.current?.getState().actions.setSize(adjustedSize);
     }
     if (dynamicFilterStoreRef.current?.getState().visibleRefresh !== visibleRefresh) {
       dynamicFilterStoreRef.current?.getState().actions.setVisibleRefresh(visibleRefresh);
     }
-  }, [currentSize, visibleRefresh]);
+  }, [adjustedSize, visibleRefresh]);
   return /* @__PURE__ */ jsx(DynamicFilterContext.Provider, { value: dynamicFilterStoreRef.current, children });
 });
 export {

package/components/DynamicFilter/subcomponents/FieldTypes/BooleanFilter/index.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
 import { useMemo } from "react";
 import { B as BOOLEAN_OPERATORS } from "../../../constants.js";
@@ -29,7 +29,7 @@ function BooleanFilter() {
     ],
     [getLabel]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       RHFAutocomplete,
       {

package/components/DynamicFilter/subcomponents/FieldTypes/DateTimeFilter/index.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
 import { useMemo } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
@@ -23,7 +23,7 @@ function DateTimeFilter() {
     })).filter((o) => restritcOperatorsTo ? restritcOperatorsTo.includes(o.id) : true),
     [getLabel, restritcOperatorsTo]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       RHFAutocomplete,
       {

package/components/DynamicFilter/subcomponents/FieldTypes/NumberFilter/index.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
 import { useMemo } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
@@ -24,7 +24,7 @@ function NumberFilter() {
     })).filter((o) => restritcOperatorsTo ? restritcOperatorsTo.includes(o.id) : true),
     [getLabel, restritcOperatorsTo]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       RHFAutocomplete,
       {

package/components/DynamicFilter/subcomponents/FieldTypes/SelectAsyncFilter/index.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
 import { useMemo } from "react";
 import { S as SELECT_ASYNC_OPERATORS_MULTIPLE, c as SELECT_ASYNC_OPERATORS_SINGLE } from "../../../constants.js";
@@ -22,7 +22,7 @@ function SelectAsyncFilter() {
     })).filter((o) => restritcOperatorsTo ? restritcOperatorsTo.includes(o.id) : true),
     [getLabel, isMultiple, restritcOperatorsTo]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       RHFAutocomplete,
       {

package/components/DynamicFilter/subcomponents/FieldTypes/SelectFilter/index.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
 import { useMemo } from "react";
 import { d as SELECT_OPERATORS_MULTIPLE, e as SELECT_OPERATORS_SINGLE } from "../../../constants.js";
@@ -19,7 +19,7 @@ function SelectFilter() {
     })).filter((o) => restritcOperatorsTo ? restritcOperatorsTo.includes(o.id) : true),
     [getLabel, isMultiple, restritcOperatorsTo]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       RHFAutocomplete,
       {

package/components/DynamicFilter/subcomponents/FieldTypes/StringFilter/index.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
 import { useMemo } from "react";
 import { f as STRING_OPERATORS } from "../../../constants.js";
@@ -17,7 +17,7 @@ function StringFilter() {
     })).filter((o) => restritcOperatorsTo ? restritcOperatorsTo.includes(o.id) : true),
     [getLabel, restritcOperatorsTo]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       RHFAutocomplete,
       {

package/components/DynamicFilter/subcomponents/FilterActions/FilterActions.js

@@ -16,7 +16,7 @@ function FilterActions() {
   } = useFilterActions();
   const { size, ownerState: { isDirty }, visibleRefresh } = useDynamicFilterBase();
   const { getLabel } = useModuleDictionary();
-  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { isDirty: canShowRemoveAction, visibleRefresh, isValid: ownerState?.isValid, inEdition: ownerState?.inEdition }, children: [
+  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { isDirty: canShowRemoveAction, visibleRefresh }, children: [
     canShowRemoveAction && /* @__PURE__ */ jsx(
       ActionsClearButtonStyled,
       {

package/components/DynamicFilter/subcomponents/FilterActions/useFilterActions.d.ts

@@ -15,7 +15,6 @@ declare function useFilterActions(): {
     filterButtonDictionaryTooltip: "dynamic_filter.filter_tooltip_refresh" | "dynamic_filter.filter_tooltip_dirty" | "dynamic_filter.filter_tooltip_invalid";
     ownerState: {
         isValid: boolean;
-        inEdition: boolean;
     };
 };
 export default useFilterActions;

package/components/DynamicFilter/subcomponents/FilterActions/useFilterActions.js

@@ -11,7 +11,6 @@ function useFilterActions() {
   const automatic = useDynamicFilterStore((state) => state.automatic);
   const isValid = useDynamicFilterStore((state) => state.ownerState?.isValid);
   const isDirty = useDynamicFilterStore((state) => state.ownerState?.isDirty);
-  const inEdition = useDynamicFilterStore((state) => state.ownerState?.inEdition);
   const appliedFilters = useDynamicFilterStore((state) => state.appliedFilters);
   const { clearFilters, fireOnChangeFilters } = useDynamicFilterStore(
     (state) => state.actions
@@ -30,7 +29,7 @@ function useFilterActions() {
     onClickClearFilters,
     onClickFilter: fireOnChangeFilters,
     filterButtonDictionaryTooltip,
-    ownerState: { isValid, inEdition }
+    ownerState: { isValid }
   };
 }
 export {

package/components/DynamicFilter/subcomponents/InputFilter/InputFilter.js

@@ -42,8 +42,6 @@ const InputFilter = () => {
             value: inputData,
             placeholder: inputPlaceHolder,
             ownerState: { ...ownerState },
-            role: "searchbox",
-            "aria-label": "searchbox",
             ...inputHandlersProps
           }
         ),