@m4l/components 0.1.41 → 0.1.44

package/components/DynamicFilter/{index.071aa795.js → index.4c43cc99.js}

@@ -4,40 +4,58 @@ import { useRef, useState, useMemo, useCallback, useEffect, createContext, useCo
 import { useModuleDictionary, voidFunction, useEnvironment, useHostTools, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
 import { useFormContext, useWatch } from "react-hook-form";
-import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.de93fe01.js";
+import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.74add0d0.js";
 import "lodash/debounce";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import "../hook-form/RHFCheckbox/index.6dcec9e2.js";
-import { alpha, styled as styled$1, Skeleton, MenuItem, useTheme, Popper, ClickAwayListener } from "@mui/material";
+import { generateUtilityClasses, generateUtilityClass, alpha, unstable_composeClasses as unstable_composeClasses$1, styled as styled$1, Skeleton, MenuItem, Popover as Popover$1, Popper, ClickAwayListener } from "@mui/material";
+import "../hook-form/RHFCheckbox/index.ebfe1e3c.js";
+import { I as Icon } from "../Icon/index.f6e8d810.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.1318a283.js";
+import "../mui_extended/Accordion/index.1d513477.js";
+import "../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.8406ed5b.js";
+import "../Image/index.aa24e982.js";
+import "@mui/lab";
+import { P as Popover } from "../mui_extended/Popover/index.58c49cc0.js";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.1261168c.js";
+import "../mui_extended/Pager/index.80ccec47.js";
+import "../mui_extended/Tab/index.e0653a0a.js";
+import "../mui_extended/Typography/index.be3a279a.js";
+import "../ErrorLabel/index.73f9362c.js";
 import "@mui/x-date-pickers";
 import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.7f1cbd85.js";
 import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.b17d68f4.js";
-import { I as Icon } from "../Icon/index.8d754623.js";
-import "../hook-form/RHFPeriod/index.3772295b.js";
-import "../ErrorLabel/index.c8615f16.js";
-import "../Period/index.abe445bd.js";
-import { A as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.d3e1f36e.js";
-import "@mui/material/Button";
-import "../../contexts/ModalContext/index.b90eec94.js";
-import "../../react-draggable.84d6b038.js";
-import "../ModalDialog/index.a684827f.js";
-import "../Resizeable/index.c96c0f09.js";
-import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
-import "../modal/WindowConfirm.0b8a6818.js";
-import "../modal/WindowBase.04439b8e.js";
-import "@mui/lab";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.57f138f7.js";
+import "../hook-form/RHFPeriod/index.3c5e5fb7.js";
+import "../Period/index.c439d1ed.js";
+import { A as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.c8754d33.js";
+import "../../contexts/ModalContext/index.4442afd9.js";
+import "../../react-draggable.0eef011c.js";
+import "../ModalDialog/index.d605b574.js";
+import "../Resizeable/index.8a442a8b.js";
+import "../modal/WindowConfirm.f2cc1072.js";
+import "../modal/WindowBase.ff74f597.js";
+import "../areas/components/index.4b828081.js";
+import "../areas/components/AreasAdmin/index.7a526b73.js";
+import "zustand";
+import "../areas/contexts/AreasContext/index.e65fd347.js";
+import "zustand/shallow";
+import "../areas/components/AreasContainer/index.ca690110.js";
+import "react-grid-layout/css/styles.css";
+import "../../react-resizable.bb58c8fc.js";
+import "../areas/contexts/index.137257b8.js";
+import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../Image/index.93d5f37f.js";
-import "../hook-form/RHFUpload/index.d5cc7c13.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.82f16572.js";
+import "../hook-form/RHFUpload/index.7fdff30f.js";
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
 import "simplebar/dist/simplebar.min.css";
-import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.ee17bddd.js";
-import { P as Popover } from "../mui_extended/Popover/index.53c77d23.js";
-import { R as RHFormProvider } from "../../contexts/RHFormContext/index.d88e6e27.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.9230c57b.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.a0a341c7.js";
+import { R as RHFormProvider } from "../../contexts/RHFormContext/index.828b60ad.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.a81752ef.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.d567aebb.js";
 const WrapperApplyedFilters = styled("div")(({
   theme
 }) => ({
@@ -119,7 +137,8 @@ function StringFilter() {
     },
     setPoupEditValidationSchema,
     setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
-    getLabelOperator
+    getLabelOperator,
+    classes
   } = useBase();
   const {
     getLabel
@@ -168,6 +187,7 @@ function StringFilter() {
     inputRef.current?.focus();
   }, [isLoaded]);
   return /* @__PURE__ */ jsx(WrapperStringFilter$1, {
+    className: classes.stringFilter,
     children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(WrapperAutoComplete$3, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
@@ -226,7 +246,8 @@ function BooleanFilter() {
   const {
     setPoupEditValidationSchema,
     setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
-    getLabelOperator
+    getLabelOperator,
+    classes
   } = useBase();
   const {
     getLabel
@@ -287,7 +308,7 @@ function BooleanFilter() {
     setIsLoaded(true);
   }, [getLabel]);
   return /* @__PURE__ */ jsx(WrapperAllFieldsFilter$1, {
-    id: "WrapperAllFieldsFilter",
+    className: classes.booleanFilter,
     children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(WrapperAutoComplete$2, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
@@ -444,7 +465,8 @@ function DateTimeFilter() {
     popupData: {
       filter,
       field
-    }
+    },
+    classes
   } = useBase();
   const {
     control,
@@ -506,6 +528,7 @@ function DateTimeFilter() {
     setIsLoaded(true);
   }, [getLabel, filter, field]);
   return /* @__PURE__ */ jsx(WrapperAllFieldsFilter, {
+    className: classes.dateTimeFilter,
     children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(WrapperAutoComplete$1, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
@@ -576,7 +599,8 @@ function NumberFilter() {
     },
     setPoupEditValidationSchema,
     setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
-    getLabelOperator
+    getLabelOperator,
+    classes
   } = useBase();
   const {
     getLabel
@@ -651,6 +675,7 @@ function NumberFilter() {
     inputRef.current?.focus();
   }, [isLoaded]);
   return /* @__PURE__ */ jsx(WrapperStringFilter, {
+    className: classes.numberFilter,
     children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(WrapperAutoComplete, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
@@ -704,6 +729,48 @@ const PopupEditFilterComponent = (props) => {
   const Component = strategiesEditFilterComponent[field.type] ?? strategiesEditFilterComponent.__default__;
   return /* @__PURE__ */ jsx(Component, {});
 };
+const DynamicFilterClassess = generateUtilityClasses("M4LDynamicFilter", [
+  "root",
+  "containerDesktop",
+  "containerMobile",
+  "containerFistRow",
+  "containerFilterButton",
+  "inputFilter",
+  "applyedFilters",
+  "applyedFilter",
+  "PopupEditFilter",
+  "booleanFilter",
+  "dateTimeFilter",
+  "numberFilter",
+  "inEdition",
+  "filterIsDirty",
+  "noSetted"
+]);
+function getDynamicFiltertUtilityClass(slot) {
+  return generateUtilityClass("M4LDynamicFilter", slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root"],
+    containerDesktop: ["containerDesktop", ownerState.inEdition && "inEdition"],
+    containerMobile: ["containerMobile", ownerState.inEdition && "inEdition"],
+    containerFistRow: ["containerFistRow"],
+    containerFilterButton: ["containerFilterButton", ownerState.isDirty && ownerState.isValid ? "filterIsDirty" : ""],
+    inputFilter: ["inputFilter"],
+    applyedFilters: ["applyedFilters"],
+    applyedFilter: ["applyedFilter"],
+    popupEditFilter: ["popupEditFilter"],
+    clearFilters: ["clearFilters"],
+    booleanFilter: ["booleanFilter"],
+    dateTimeFilter: ["dateTimeFilter"],
+    numberFilter: ["numberFilter"],
+    stringFilter: ["stringFilter"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getDynamicFiltertUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
 const initialState = {
   fields: [],
   withAllField: true,
@@ -735,7 +802,9 @@ const initialState = {
   setInEdition: voidFunction,
   inEdition: false,
   setFnTransformFormValuesIntoValues: voidFunction,
-  fnTransformFormValuesIntoRawValues: () => void 0
+  fnTransformFormValuesIntoRawValues: () => void 0,
+  ownerState: {},
+  classes: {}
 };
 const BaseContext = createContext(initialState);
 const getMaxId = (applyedFilters) => {
@@ -1008,6 +1077,12 @@ function BaseProvider(props) {
   const setFnTransformFormValuesIntoValues = useCallback((fn) => {
     setInternalfnTransormFormValuesIntoRawValues(() => fn);
   }, []);
+  const ownerState = {
+    inEdition,
+    isDirty,
+    isValid
+  };
+  const classes = useUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(BaseContext.Provider, {
     value: {
       isSkeleton,
@@ -1037,7 +1112,9 @@ function BaseProvider(props) {
       setInEdition,
       setPoupEditValidationSchema,
       fnTransformFormValuesIntoRawValues,
-      setFnTransformFormValuesIntoValues
+      setFnTransformFormValuesIntoValues,
+      ownerState,
+      classes: classes || ""
     },
     children
   });
@@ -1057,10 +1134,7 @@ const WrapperApplyedFilter = styled("div")(({
   border: "1px solid",
   borderColor: alpha(`${theme.palette.divider}`, 0.1),
   overflow: "visible",
-  borderRadius: theme.spacing(1),
-  "&.waf_no_setted": {
-    border: `1px solid ${theme.palette.error.main}`
-  }
+  borderRadius: theme.spacing(1)
 }));
 const AplyedFilterStyled = styled("div")(({
   theme
@@ -1106,7 +1180,8 @@ function ApplyedFilter(props) {
     removeFilter,
     showPopupForEditFilter,
     hidePopupEdit,
-    getFieldByName
+    getFieldByName,
+    classes
   } = useBase();
   const {
     host_static_assets,
@@ -1134,8 +1209,9 @@ function ApplyedFilter(props) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
-    id: "WrapperApplyedFilter",
-    className: !isSetted ? "waf_no_setted" : "",
+    className: clsx(classes.applyedFilter, !isSetted && unstable_composeClasses$1({
+      noSetted: ["noSetted"]
+    }, getDynamicFiltertUtilityClass, {})),
     children: [urlIcon && /* @__PURE__ */ jsx(IconButton, {
       src: urlIcon,
       onClick
@@ -1159,15 +1235,16 @@ function ApplyedFilter(props) {
 function ApplyedFilters() {
   const {
     applyedFilters,
-    isSkeleton
+    isSkeleton,
+    classes
   } = useBase();
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
-      id: "WrapperApplyedFilters"
+      className: classes.applyedFilters
     });
   }
   return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
-    className: "WrapperApplyedFilters",
+    className: classes.applyedFilters,
     children: /* @__PURE__ */ jsx(ScrollBar, {
       children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
         id: "WrapperApplyedFilters",
@@ -1201,7 +1278,8 @@ const ClearFilters = () => {
   const {
     clearFilters,
     isSkeleton,
-    applyedFilters
+    applyedFilters,
+    classes
   } = useBase();
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTClearFilters, {
@@ -1214,6 +1292,7 @@ const ClearFilters = () => {
   }
   if (applyedFilters.findIndex((f) => f.fixed == false) > -1) {
     return /* @__PURE__ */ jsx(WrapperClearFilters, {
+      className: classes.clearFilters,
       children: /* @__PURE__ */ jsx(IconButton, {
         src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
         onClick: clearFilters,
@@ -1234,25 +1313,7 @@ const SKTWrapperFilterButton = styled("div")(({
   background: alpha$1(theme.palette.primary.main, 0.3)
 }));
 const WrapperFilterButton = styled("div")(() => ({
-  "&.isDirty": {
-    animationName: "dirtyEffect",
-    animationDuration: "1s",
-    animationFillMode: "both",
-    animationIterationCount: "infinite",
-    transition: "all .3s",
-    "@keyframes dirtyEffect": {
-      "20%": {
-        opacity: 1
-      },
-      "50%": {
-        opacity: 0.5
-      },
-      "100%": {
-        opacity: 1
-      }
-    }
-  },
-  "&.isDirtyError": {}
+  display: "block"
 }));
 function FilterButton() {
   const {
@@ -1260,7 +1321,8 @@ function FilterButton() {
     fireOnChangeFilters,
     automatic,
     isDirty,
-    isValid
+    isValid,
+    classes
   } = useBase();
   const {
     host_static_assets,
@@ -1286,7 +1348,7 @@ function FilterButton() {
   }, [automatic, isValid, isDirty]);
   return /* @__PURE__ */ jsx(WrapperFilterButton, {
     id: "WrapperFilterButton",
-    className: isDirty && isValid ? "isDirty" : "",
+    className: classes.containerFilterButton,
     children: /* @__PURE__ */ jsx(IconButton, {
       bgColor: color,
       dictionaryTooltip: "dynamic_filter.filter_tooltip",
@@ -1320,10 +1382,8 @@ const StyledInputFilter = styled("input")(({
   alignItems: "center",
   minWidth: theme.spacing(3.75),
   width: "100%",
-  "&": {
-    outline: "none",
-    border: "none"
-  },
+  outline: "none",
+  border: "none",
   [theme.breakpoints.up("sm")]: {
     width: "auto"
   }
@@ -1338,7 +1398,8 @@ function InputFilter() {
     openAnchorEl,
     openMenuFields,
     closeMenuFields,
-    hidePopupEdit
+    hidePopupEdit,
+    classes
   } = useBase();
   const [valueFilter, setValueFilter] = useState("");
   const finalFields = useMemo(() => {
@@ -1398,7 +1459,7 @@ function InputFilter() {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   return /* @__PURE__ */ jsxs(WrapperInputFilter, {
-    id: "WrapperInputFilter",
+    className: classes.inputFilter,
     children: [/* @__PURE__ */ jsx(StyledInputFilter, {
       type: "text",
       value: valueFilter,
@@ -1432,6 +1493,12 @@ function InputFilter() {
     })]
   });
 }
+styled(Popover$1)(({
+  theme
+}) => ({
+  boxShadow: theme.customShadows.dropdown,
+  borderRadius: 1
+}));
 const WrapperPopupEditFilter = styled("div")(({
   theme
 }) => ({
@@ -1489,9 +1556,9 @@ const PopupEditFilter = () => {
     addFilter,
     updateFilter,
     getLabelOperator,
-    fnTransformFormValuesIntoRawValues
+    fnTransformFormValuesIntoRawValues,
+    classes
   } = useBase();
-  const theme = useTheme();
   const {
     getLabel
   } = useModuleDictionary();
@@ -1526,13 +1593,10 @@ const PopupEditFilter = () => {
   return /* @__PURE__ */ jsx(Popper, {
     open: Boolean(popupAnchorEl),
     anchorEl: popupAnchorEl,
-    sx: {
-      boxShadow: theme.customShadows.dropdown,
-      borderRadius: 1
-    },
     children: /* @__PURE__ */ jsx(ClickAwayListener, {
       onClickAway: onClose,
       children: /* @__PURE__ */ jsx(WrapperEditFilter, {
+        className: classes.popupEditFilter,
         children: filter && /* @__PURE__ */ jsx(RHFormProvider, {
           onSubmit,
           values,
@@ -1557,11 +1621,49 @@ const PopupEditFilter = () => {
     })
   });
 };
-const WrapperFilter = styled("div", {
-  shouldForwardProp: (prop) => prop !== "inEdition"
-})(({
+const WrapperDynamicFilter = styled("div", {})(({
   theme,
-  inEdition
+  ownerState
+}) => ({
+  [`&.${DynamicFilterClassess.root}`]: {
+    display: "flex",
+    width: "100%",
+    heigth: "100%"
+  },
+  [`&.${DynamicFilterClassess.root} .${DynamicFilterClassess.containerDesktop},
+          &.${DynamicFilterClassess.root} .${DynamicFilterClassess.containerMobile}`]: {
+    border: ownerState.inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
+  },
+  [`&.${DynamicFilterClassess.containerMobile} .${DynamicFilterClassess.applyedFilters}`]: {
+    margin: "0px",
+    padding: "0px",
+    border: "0px"
+  },
+  [`&.${DynamicFilterClassess.containerFilterButton}.${DynamicFilterClassess.filterIsDirty}`]: {
+    animationName: "dirtyEffect",
+    animationDuration: "1s",
+    animationFillMode: "both",
+    animationIterationCount: "infinite",
+    transition: "all .3s",
+    "@keyframes dirtyEffect": {
+      "20%": {
+        opacity: 1
+      },
+      "50%": {
+        opacity: 0.5
+      },
+      "100%": {
+        opacity: 1
+      }
+    }
+  },
+  [`&.${DynamicFilterClassess.containerFilterButton} .${DynamicFilterClassess.applyedFilter}.${DynamicFilterClassess.noSetted}`]: {
+    border: `1px solid ${theme.palette.error.main}`
+  },
+  ...theme.components?.M4LDynamicFilter?.styleOverrides
+}));
+const ContainerFilterDesktop = styled("div", {})(({
+  theme
 }) => ({
   display: "flex",
   alignItems: "center",
@@ -1569,14 +1671,10 @@ const WrapperFilter = styled("div", {
   height: "auto",
   width: "100%",
   padding: theme.spacing(0.5),
-  borderRadius: theme.spacing(1),
-  border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
+  borderRadius: theme.spacing(1)
 }));
-const WrapperFilterMobile = styled("div", {
-  shouldForwardProp: (prop) => prop !== "inEdition"
-})(({
-  theme,
-  inEdition
+const ContainerFilterMobile = styled("div")(({
+  theme
 }) => ({
   display: "flex",
   flexDirection: "column",
@@ -1587,42 +1685,41 @@ const WrapperFilterMobile = styled("div", {
   width: "100%",
   padding: theme.spacing(0.5),
   borderRadius: theme.spacing(1),
-  border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
-  gap: theme.spacing(0.75),
-  "& .WrapperApplyedFilters": {
-    margin: "0px",
-    padding: "0px",
-    border: "0px"
-  }
+  gap: theme.spacing(0.75)
 }));
 const ContainerFistRow = styled("div")(() => ({
   width: "100%",
   display: "flex",
   justifyContent: "space-between"
 }));
-const DynamicFilter = (props) => {
+const DynamicFilter = (inProps) => {
   const isDesktop = useResponsiveDesktop();
   const render = useFlagsPresent(["dictionary_loaded"]);
   if (!render) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   return /* @__PURE__ */ jsx(BaseProvider, {
-    ...props,
+    ...inProps,
     children: /* @__PURE__ */ jsx(BaseContext.Consumer, {
       children: ({
-        inEdition
-      }) => isDesktop ? /* @__PURE__ */ jsxs(WrapperFilter, {
-        id: "WrapperFilter",
-        inEdition,
-        children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopupEditFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
-      }) : /* @__PURE__ */ jsxs(WrapperFilterMobile, {
-        id: "WrapperFilterMobile",
-        inEdition,
-        children: [/* @__PURE__ */ jsxs(ContainerFistRow, {
-          id: "ContainerFistRow",
-          children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
-        }), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopupEditFilter, {})]
-      })
+        ownerState,
+        classes
+      }) => {
+        return /* @__PURE__ */ jsx(WrapperDynamicFilter, {
+          ownerState,
+          className: classes.root,
+          children: isDesktop ? /* @__PURE__ */ jsxs(ContainerFilterDesktop, {
+            className: classes.containerDesktop,
+            children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopupEditFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
+          }) : /* @__PURE__ */ jsxs(ContainerFilterMobile, {
+            className: classes.containerMobile,
+            children: [/* @__PURE__ */ jsxs(ContainerFistRow, {
+              className: classes.ContainerFistRow,
+              children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
+            }), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopupEditFilter, {})]
+          })
+        });
+      }
     })
   });
 };
@@ -1653,6 +1750,7 @@ const defaultDynamicFilterDictionary = {
 };
 export {
   DynamicFilter as D,
+  DynamicFilterClassess as a,
   defaultDynamicFilterDictionary as d,
   getDynamicFilterComponentsDictionary as g
 };

package/components/DynamicFilter/index.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import type { DynamicFilterProps } from './types';
-export declare const DynamicFilter: (props: DynamicFilterProps) => JSX.Element;
+import { DynamicFilterClasses } from './utils/Clases/types';
+export { DynamicFilterClassess } from './utils/Clases';
+export declare type DynamicFilterClassesKey = keyof DynamicFilterClasses;
+export declare const DynamicFilter: (inProps: DynamicFilterProps) => JSX.Element;

package/components/DynamicFilter/styles.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-interface WrapperProps {
-    inEdition: boolean;
-}
-export declare const WrapperFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const WrapperFilterMobile: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import { WrapperDynamicFilterProps } from './types';
+export declare const WrapperDynamicFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperDynamicFilterProps, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContainerFilterDesktop: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContainerFilterMobile: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContainerFistRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/components/DynamicFilter/subcomponents/PopupEditFilter/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const MUIPopover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WrapperPopupEditFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PopperActionsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperEditFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DynamicFilter/types.d.ts

@@ -1,4 +1,8 @@
 import { Maybe } from '@m4l/core';
+import { OwnerState } from './contexts/BaseContext/types';
+export interface WrapperDynamicFilterProps {
+    ownerState: OwnerState | Record<string, unknown>;
+}
 export declare type FieldType = 'number' | 'string' | 'boolean' | 'datetime';
 export declare type OperandType = number | string | boolean | Date | [] | object;
 export declare type Operator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte' | 'c' | 'nc';

package/components/DynamicFilter/utils/Clases/index.d.ts

@@ -0,0 +1,20 @@
+import { OwnerState } from '../../contexts/BaseContext/types';
+import { DynamicFilterClasses } from './types';
+export declare const DynamicFilterClassess: DynamicFilterClasses;
+export declare function getDynamicFiltertUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: OwnerState) => {
+    root: string;
+    containerDesktop: string;
+    containerMobile: string;
+    containerFistRow: string;
+    containerFilterButton: string;
+    inputFilter: string;
+    applyedFilters: string;
+    applyedFilter: string;
+    booleanFilter: string;
+    dateTimeFilter: string;
+    numberFilter: string;
+    popupEditFilter: string;
+    clearFilters: string;
+    stringFilter: string;
+};

package/components/DynamicFilter/utils/Clases/types.d.ts

@@ -0,0 +1,17 @@
+export interface DynamicFilterClasses {
+    root: string;
+    containerDesktop: string;
+    containerMobile: string;
+    containerFistRow: string;
+    containerFilterButton: string;
+    inputFilter: string;
+    applyedFilters: string;
+    applyedFilter: string;
+    PopupEditFilter: string;
+    booleanFilter: string;
+    dateTimeFilter: string;
+    numberFilter: string;
+    inEdition: string;
+    filterIsDirty: string;
+    noSetted: string;
+}