@m4l/components 0.1.68 → 0.1.70

package/components/DynamicFilter/{index.2485b282.js → index.789ab474.js}

@@ -4,61 +4,63 @@ import { useContext, useMemo, useEffect, createContext, useRef, createElement, u
 import clsx from "clsx";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
 import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
-import { I as IconButton } from "../mui_extended/IconButton/index.06b5c4a8.js";
-import { T as TEST_PROP_ID } from "../../vendor.659fcc31.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.57824447.js";
+import { T as TEST_PROP_ID } from "../../vendor.8edaef93.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { generateUtilityClasses, alpha, styled as styled$1, Skeleton, MenuItem } from "@mui/material";
-import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.e05e6158.js";
-import { P as Popover } from "../mui_extended/Popover/index.e271e4f0.js";
-import { I as Icon } from "../Icon/index.f0a7d42d.js";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.37043326.js";
+import { P as Popover } from "../mui_extended/Popover/index.226f247e.js";
+import { I as Icon } from "../Icon/index.caaed284.js";
 import { R as RHFormProvider } from "../../contexts/RHFormContext/index.a7511399.js";
-import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.377c342e.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.49e5c8b2.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.6605ee21.js";
+import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.154d7cb6.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.9d521b2a.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.1ba5b02b.js";
 import { useFormContext, useWatch } from "react-hook-form";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.4d13dbda.js";
-import "../../contexts/ModalContext/index.fcb7d228.js";
-import "../../react-draggable.26a0b105.js";
-import "../ModalDialog/index.20a9b77a.js";
-import "../Resizeable/index.18a50191.js";
-import "../modal/WindowConfirm.fcc6d9f8.js";
-import "../modal/WindowBase.77a5aeb2.js";
-import { useStore, createStore } from "zustand";
-import "../areas/contexts/AreasContext/index.ded4e1bd.js";
-import "../areas/components/index.b21d60d8.js";
-import "@mui/lab";
-import "../mui_extended/Typography/index.ab4ee376.js";
-import "../mui_extended/Accordion/index.5370ebbf.js";
+import "../mui_extended/Button/index.f8ce9ccd.js";
+import "../../contexts/ModalContext/index.8e3cd7a8.js";
+import "../../react-draggable.0d64c8b1.js";
+import "../ModalDialog/index.cdfd1ae8.js";
+import "../Resizeable/index.aafda79e.js";
+import "../modal/WindowConfirm.e21763cb.js";
+import "../modal/WindowBase.6a40a945.js";
+import "../mui_extended/Accordion/index.437bb3f8.js";
 import "../mui_extended/Avatar/index.fe06afd7.js";
 import "react-router-dom";
-import "../Image/index.b216f30c.js";
-import "../mui_extended/Pager/index.b9db40bc.js";
+import "../Image/index.82a6cd46.js";
+import "@mui/lab";
+import { T as Typography } from "../mui_extended/Typography/index.b3c6e71c.js";
+import "../mui_extended/Pager/index.eeed3bd5.js";
 import "../mui_extended/Tab/index.e0653a0a.js";
+import { useStore, createStore } from "zustand";
+import "../areas/contexts/AreasContext/index.de8b4e78.js";
+import "../areas/components/index.359c2b18.js";
+import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.d4755e7e.js";
+import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.a2312a73.js";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.6f0823fb.js";
+import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.09c400c3.js";
 import "lodash/debounce";
-import "../hook-form/RHFAutocompleteAsync/index.dec5535b.js";
-import "../hook-form/RHFCheckbox/index.7ae098fb.js";
-import "../HelperText/index.dba051a9.js";
+import "../hook-form/RHFAutocompleteAsync/index.e8acff04.js";
+import "../hook-form/RHFCheckbox/index.70310f35.js";
+import "../HelperText/index.a69e9509.js";
 import "@mui/x-date-pickers";
-import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.6c129ce4.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.ef829e80.js";
-import "../hook-form/RHFPeriod/index.81da23cf.js";
-import "../Period/index.41358ce0.js";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.7b815072.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.d4c39859.js";
+import "../hook-form/RHFPeriod/index.3c7d393c.js";
+import "../Period/index.fbf074d3.js";
 import "lodash/isString";
 import "react-dropzone";
-import { styled, alpha as alpha$1 } from "@mui/material/styles";
-import "../hook-form/RHFUpload/index.0b97dc3c.js";
+import { styled } from "@mui/material/styles";
+import "../hook-form/RHFUpload/index.31044674.js";
 import * as Yup from "yup";
 import "@hookform/resolvers/yup";
 const COMPONENT_CLASS_NAME = "M4LDynamicFilter";
-const ASSETS_URL = "/frontend/components/dynamic_filter/assets/icons/";
+const ASSETS_URL = "frontend/components/dynamic_filter/assets/icons";
 const ASSETS = {
-  refresh: "refresh.svg",
+  refresh: "restart.svg",
   search: "search.svg"
 };
 const ALL_FIELDS = {
@@ -88,18 +90,23 @@ const dynamicFilterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "containerInputFilter",
   "wrapperApplyedFilters",
   "containerApplyedFilters",
-  "applyedFilter",
+  "containerClearFilter",
   "clearFiltersButton",
+  "applyedFilter",
   "popoverMenuFields",
   "popoverMenuFieldsPaper",
   "popoverMenuFieldsItem",
   "popoverFilter",
   "popoverFilterPaper",
   "popoverFilterHeader",
+  "popoverHeaderTitle",
   "containerBooleanFilter",
   "containerDateTimeFilter",
   "containerNumberFilter",
   "containerStringFilter",
+  "classespopoverLabelMemuItem",
+  "popoverContainerFields",
+  "classesFilterButton",
   "isSkeleton",
   "isMobile",
   "inEdition",
@@ -113,16 +120,21 @@ const useUtilityClasses = (ownerState) => {
     filterButton: ["filterButton"],
     containerFistRow: ["containerFistRow"],
     containerInputFilter: ["containerInputFilter"],
+    classesFilterButton: ["classesFilterButton"],
     wrapperApplyedFilters: ["wrapperApplyedFilters"],
     containerApplyedFilters: ["containerApplyedFilters"],
+    containerClearFilter: ["containerClearFilter"],
     applyedFilter: ["applyedFilter"],
     clearFiltersButton: ["clearFiltersButton"],
+    popoverContainerFields: ["popoverContainerFields"],
     popoverMenuFields: ["popoverMenuFields"],
     popoverMenuFieldsPaper: ["popoverMenuFieldsPaper"],
     popoverMenuFieldsItem: ["popoverMenuFieldsItem"],
     popoverFilter: ["popoverFilter"],
+    classespopoverLabelMemuItem: ["classespopoverLabelMemuItem"],
     popoverFilterPaper: ["popoverFilterPaper"],
     popoverFilterHeader: ["popoverFilterHeader"],
+    popoverHeaderTitle: ["popoverHeaderTitle"],
     containerBooleanFilter: ["containerBooleanFilter"],
     containerDateTimeFilter: ["containerDateTimeFilter"],
     containerNumberFilter: ["containerNumberFilter"],
@@ -174,7 +186,17 @@ const DICCTIONARY = {
   operator_lt: "operator_lt",
   operator_lte: "operator_lte",
   operator_c: "operator_c",
-  operator_nc: "operator_nc"
+  operator_nc: "operator_nc",
+  label_boolean_operator: "label_boolean_operator",
+  label_boolean_operand1: "label_boolean_operand1",
+  label_operator_date_time: "label_operator_date_time",
+  label_operand1_date_time: "label_operand1_date_time",
+  label_operand2_date_time: "label_operand2_date_time",
+  label_operator_number: "label_operator_number",
+  label_operand1_number: "label_operand1_number",
+  label_operand2_number: "label_operand2_number",
+  label_operator_string: "label_operator_string",
+  label_operand1_string: "label_operand1_string"
 };
 const getDynamicFilterDictionary = (key) => {
   return `${DYNAMICFILTER_DICTIONARY_ID}.${key}`;
@@ -206,14 +228,14 @@ function BooleanFilter() {
       options: operators,
       getOptionLabel: (option) => option.label,
       isOptionEqualToValue: (option, value) => option.id === value.id,
-      label: ""
+      label: getLabel(getDynamicFilterDictionary(`label_boolean_operator`))
     }), /* @__PURE__ */ jsx(RHFAutocomplete, {
       name: "formValueOperand1",
       autoComplete: "off",
       options: optionsYesNo,
       getOptionLabel: (option) => option.label,
       isOptionEqualToValue: (option, value) => option.value === value.value,
-      label: ""
+      label: getLabel(getDynamicFilterDictionary(`label_boolean_operand1`))
     })]
   });
 }
@@ -253,15 +275,13 @@ function DateTimeFilter() {
       options: operators,
       getOptionLabel: (option) => option.label,
       isOptionEqualToValue: (option, value) => option.id === value.id,
-      label: ""
+      label: getLabel(getDynamicFilterDictionary(`label_operator_date_time`))
     }), /* @__PURE__ */ jsx(RHFDateTime, {
       name: "formValueOperand1",
-      autoComplete: "off",
-      label: ""
+      label: getLabel(getDynamicFilterDictionary(`label_operand1_date_time`))
     }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFDateTime, {
       name: "formValueOperand2",
-      autoComplete: "off",
-      label: ""
+      label: getLabel(getDynamicFilterDictionary(`label_operand2_date_time`))
     })]
   });
 }
@@ -301,13 +321,15 @@ function NumberFilter() {
       options: operators,
       getOptionLabel: (option) => option.label,
       isOptionEqualToValue: (option, value) => option.id === value.id,
-      label: ""
+      label: getLabel(getDynamicFilterDictionary(`label_operator_number`))
     }), /* @__PURE__ */ jsx(RHFTextField, {
       name: "formValueOperand1",
-      type: "number"
+      type: "number",
+      label: getLabel(getDynamicFilterDictionary(`label_operand1_number`))
     }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFTextField, {
       name: "formValueOperand2",
-      type: "number"
+      type: "number",
+      label: getLabel(getDynamicFilterDictionary(`label_operand2_number`))
     })]
   });
 }
@@ -340,9 +362,10 @@ function StringFilter() {
       options: operators,
       getOptionLabel: (option) => option.label,
       isOptionEqualToValue: (option, value) => option.id === value.id,
-      label: ""
+      label: getLabel(getDynamicFilterDictionary(`label_operator_string`))
     }), /* @__PURE__ */ jsx(RHFTextField, {
-      name: "formValueOperand1"
+      name: "formValueOperand1",
+      label: getLabel(getDynamicFilterDictionary(`label_operand1_string`))
     })]
   });
 }
@@ -893,7 +916,6 @@ const updateOwnerStateClasses = (state) => {
 const updateAutomatic = (state) => {
   updateOwnerStateIsValid(state);
   updateAvailableFields(state);
-  console.log("updateAutomatic", state.ownerState.isValid);
   if (state.ownerState.isValid) {
     if (state.automatic) {
       state.ownerState.isDirty = false;
@@ -1096,10 +1118,6 @@ function DynamicFilterProvider(props) {
     }
     const state = dynamicFilterStoreRef.current?.getState();
     if (state) {
-      dynamicFilterStoreRef.current?.getState().actions.setExternalState({
-        isMobile: !isDesktop,
-        isSkeleton
-      });
       onChangeFilters(formatToInitialFilters(state.applyedFilters), formatToRawFilter(state.applyedFilters));
     }
   }, [countOnChangeFiltersApplyed]);
@@ -1176,8 +1194,7 @@ const DynamicFilterRoot = styled("div", {})(({
 }));
 const ContainerFistRow = styled("div")(() => ({
   width: "100%",
-  display: "flex",
-  justifyContent: "space-between"
+  display: "flex"
 }));
 const WrapperApplyedFilter = styled("div")(({
   theme
@@ -1333,14 +1350,12 @@ function ApplyedFilters() {
     })
   });
 }
-const SKTClearFilters = styled$1("div")(({
-  theme
-}) => ({
+const SKTClearFilters = styled$1("div")(() => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
+  width: "24px",
+  height: "24px"
 }));
 styled$1("div")(({
   theme
@@ -1365,8 +1380,8 @@ const ClearFiltersButton = () => {
       className: clearFiltersButtonClasses,
       children: /* @__PURE__ */ jsx(Skeleton, {
         variant: "circular",
-        width: "20px",
-        height: "20px"
+        width: "16px",
+        height: "16px"
       })
     });
   }
@@ -1377,22 +1392,19 @@ const ClearFiltersButton = () => {
   if (applyedFilters.findIndex((f) => f.fixed == false) > -1) {
     return /* @__PURE__ */ jsx(IconButton, {
       className: clearFiltersButtonClasses,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close.svg`,
       onClick: onClickClearFilters,
       dictionaryTooltipId: "dynamic_filter.tooltip_clear_filters"
     });
   }
   return null;
 };
-const SKTWrapperFilterButton = styled("div")(({
-  theme
-}) => ({
+const SKTWrapperFilterButton = styled("div")(() => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75),
-  background: alpha$1(theme.palette.primary.main, 0.3)
+  width: "24px",
+  height: "24px"
 }));
 styled("div")(() => ({
   display: "block"
@@ -1410,22 +1422,25 @@ function FilterButton() {
     host_static_assets,
     environment_assets
   } = useEnvironment();
-  console.log("FilterButton", isSkeleton);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTWrapperFilterButton, {
       className: classesFilterButton,
       children: /* @__PURE__ */ jsx(Skeleton, {
         variant: "circular",
-        width: 20,
-        height: 20
+        width: 16,
+        height: 16
       })
     });
   }
   return /* @__PURE__ */ jsx(IconButton, {
     className: classesFilterButton,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getTestIdByClass("classesFilterButton")
+    } : {},
     dictionaryTooltipId: getDynamicFilterDictionary(isValid ? isDirty ? DICCTIONARY.filter_tooltip_dirty : DICCTIONARY.filter_tooltip_refresh : DICCTIONARY.filter_tooltip_invalid),
     onClick: fireOnChangeFilters,
     "aria-label": "settings",
+    variant: "primary",
     src: `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${automatic ? ASSETS.refresh : ASSETS.search}`
   });
 }
@@ -1438,6 +1453,7 @@ function PopoverMenuFields(props) {
   const classesPopUpMenuFields = useDynamicFilter((state) => state.classes.popoverMenuFields, shallow);
   const classesPopUpMenuFieldsPaper = useDynamicFilter((state) => state.classes.popoverMenuFieldsPaper, shallow);
   const classespopoverMenuFieldsItem = useDynamicFilter((state) => state.classes.popoverMenuFieldsItem, shallow);
+  const classespopoverLabelMemuItem = useDynamicFilter((state) => state.classes.classespopoverLabelMemuItem, shallow);
   const {
     showPopoverFilterForAdd,
     closePopoverMenuFields
@@ -1457,6 +1473,7 @@ function PopoverMenuFields(props) {
     className: classesPopUpMenuFields,
     disableRestoreFocus: true,
     open: Boolean(fnAnchorEl),
+    disablePortal: true,
     anchorEl: fnAnchorEl && fnAnchorEl(),
     onClose: handleClosePopover,
     anchorOrigin: {
@@ -1495,38 +1512,11 @@ function PopoverMenuFields(props) {
     }, /* @__PURE__ */ jsx(Icon, {
       src: field.urlIcon
     }), /* @__PURE__ */ jsx(LabelMemuItem, {
+      className: classespopoverLabelMemuItem,
       children: field.label ?? getLabel(field.dictionaryId)
     })))
   });
 }
-const ContainerInputFilter = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: "100%",
-  height: theme.spacing(3),
-  borderLeft: `1px solid ${theme.palette.divider}`,
-  paddingLeft: theme.spacing(1),
-  marginLeft: theme.spacing(1),
-  [theme.breakpoints.up("sm")]: {
-    width: theme.spacing(25)
-  },
-  "& > input": {
-    background: "transparent",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    minWidth: theme.spacing(3.75),
-    width: "100%",
-    outline: "none",
-    border: "none",
-    [theme.breakpoints.up("sm")]: {
-      width: "auto"
-    }
-  }
-}));
 function InputFilter() {
   const anchorEl = useDynamicFilter((state) => state.fnAnchorEl, shallow);
   const withAllField = useDynamicFilter((state) => state.withAllField);
@@ -1548,6 +1538,10 @@ function InputFilter() {
   const {
     getLabel
   } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const [selectFieldIndex, setSelectFieldIndex] = useState(-1);
   const [finalFields, setFinalFields] = useState([]);
   useEffect(() => {
@@ -1622,47 +1616,46 @@ function InputFilter() {
       handleOpenPopUpClickItem(finalFields[selectFieldIndex]);
     }
   };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(ContainerInputFilter, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: "100%",
-        height: 24
-      })
-    });
-  }
   if (!withAllField && availableFields.length == 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(ContainerInputFilter, {
+  return /* @__PURE__ */ jsxs("div", {
     className: classesContainerInputFilter,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getTestIdByClass("containerInputFilter")
     } : {},
-    children: [/* @__PURE__ */ jsx("input", {
-      type: "text",
-      value: inputData,
-      placeholder: getLabel(getDynamicFilterDictionary("input_placeholder")),
-      onFocus: onFocusInputFilter,
-      onChange: onChangeInputFilter,
-      onKeyDown: handleKeyDown
+    children: [!isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/filter.svg`,
+        size: "small"
+      }), /* @__PURE__ */ jsx("input", {
+        type: "text",
+        value: inputData,
+        placeholder: getLabel(getDynamicFilterDictionary("input_placeholder")),
+        onFocus: onFocusInputFilter,
+        onChange: onChangeInputFilter,
+        onKeyDown: handleKeyDown
+      })]
+    }) : /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "16px",
+        height: "16px",
+        sx: {
+          minWidth: "16px",
+          minHeight: "16px"
+        }
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "100%",
+        height: 24
+      })]
     }), /* @__PURE__ */ jsx(PopoverMenuFields, {
       selectFieldIndex,
       fields: finalFields
     })]
   });
 }
-const TitleContainer = styled("div")(({
-  theme
-}) => ({
-  ...theme.typography.subtitle2,
-  width: "100%",
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  padding: theme.spacing(2, 0),
-  marginLeft: theme.spacing(1.5)
-}));
 const StyledHeaderFilter = styled("div")(({
   theme
 }) => ({
@@ -1683,6 +1676,8 @@ const PopoverFilter = () => {
   const classesPopoverFilter = useDynamicFilter((state) => state.classes.popoverFilter, shallow);
   const classesPopoverFilterPapper = useDynamicFilter((state) => state.classes.popoverFilterPaper, shallow);
   const classesPopoverFilterHeader = useDynamicFilter((state) => state.classes.popoverFilterHeader, shallow);
+  const classesPopoverHeaderTitle = useDynamicFilter((state) => state.classes.popoverHeaderTitle, shallow);
+  const classesPopoverContainerFields = useDynamicFilter((state) => state.classes.popoverContainerFields, shallow);
   const {
     hidePopoverFilter,
     addFilter,
@@ -1760,6 +1755,7 @@ const PopoverFilter = () => {
     className: classesPopoverFilter,
     transitionDuration: 0,
     open: true,
+    disablePortal: true,
     anchorEl,
     disableRestoreFocus: true,
     onKeyDown: handleKeyDownPopper,
@@ -1791,12 +1787,17 @@ const PopoverFilter = () => {
         className: classesPopoverFilterHeader,
         children: [field.urlIcon && /* @__PURE__ */ jsx(Icon, {
           src: field.urlIcon
-        }), /* @__PURE__ */ jsx(TitleContainer, {
+        }), /* @__PURE__ */ jsx(Typography, {
+          variant: "paragraphDens",
+          className: classesPopoverHeaderTitle,
           children: field.label ?? getLabel(field.dictionaryId)
         })]
-      }), /* @__PURE__ */ jsx(DataTypeComponent, {
-        formFilter,
-        statusLoad
+      }), /* @__PURE__ */ jsx("div", {
+        className: classesPopoverContainerFields,
+        children: /* @__PURE__ */ jsx(DataTypeComponent, {
+          formFilter,
+          statusLoad
+        })
       }), /* @__PURE__ */ jsxs(Actions, {
         children: [/* @__PURE__ */ jsx(ActionCancel, {
           onClick: onClose
@@ -1808,6 +1809,7 @@ const PopoverFilter = () => {
 const InnerForHooks = () => {
   const isMobile = useDynamicFilter((state) => state.ownerState.isMobile, shallow);
   const classesRoot = useDynamicFilter((state) => state.classes.root, shallow);
+  const containerClearFilter = useDynamicFilter((state) => state.classes.containerClearFilter, shallow);
   const classesContainerFistRow = useDynamicFilter((state) => state.classes.containerFistRow, shallow);
   const fields = useDynamicFilter((state) => state.fields, shallow);
   return /* @__PURE__ */ jsx(DynamicFilterRoot, {
@@ -1817,11 +1819,17 @@ const InnerForHooks = () => {
       "data-testid": DYNAMICFILTER_TEST_ID
     } : {},
     children: !isMobile ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {}), /* @__PURE__ */ jsx(ClearFiltersButton, {})]
+      children: [/* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {}), /* @__PURE__ */ jsxs("div", {
+        className: containerClearFilter,
+        children: [/* @__PURE__ */ jsx(ClearFiltersButton, {}), /* @__PURE__ */ jsx(FilterButton, {})]
+      })]
     }) : /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsxs(ContainerFistRow, {
         className: classesContainerFistRow,
-        children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ClearFiltersButton, {})]
+        children: [/* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsxs("div", {
+          className: containerClearFilter,
+          children: [/* @__PURE__ */ jsx(ClearFiltersButton, {}), /* @__PURE__ */ jsx(FilterButton, {})]
+        })]
       }), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {})]
     })
   });

package/components/DynamicFilter/subcomponents/ApplyedFilters/index.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 /**
  * @description Subcomponente que muestra los filtros actualmente Aplicados,
  * Alguno(s) pueden estar en estado Invalido, debido a que puede(n) ser obligatorios y no se han establecido.
  * @returns
  */
-export declare function ApplyedFilters(): JSX.Element;
+export declare function ApplyedFilters(): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WrapperApplyedFilters: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerApplyedFilters: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DynamicFilter/subcomponents/ApplyedFilters/subcomponents/ApplyedFilter/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { FilterFieldApplyed } from '../../../../types';
-export declare function ApplyedFilter(props: FilterFieldApplyed): JSX.Element;
+export declare function ApplyedFilter(props: FilterFieldApplyed): import("react").JSX.Element;

package/components/DynamicFilter/subcomponents/ApplyedFilters/subcomponents/ApplyedFilter/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const WrapperApplyedFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AplyedFilterStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ContainerOperator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ContainerOperands: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/components/DynamicFilter/subcomponents/ClearFilters/index.d.ts

@@ -1 +1,2 @@
-export declare const ClearFiltersButton: () => JSX.Element | null;
+/// <reference types="react" />
+export declare const ClearFiltersButton: () => import("react").JSX.Element | null;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SKTClearFilters: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperClearFilters: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DynamicFilter/subcomponents/FilterButton/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @description Boton para aplicar los filtros
  * Si es invalido, debe tener un borde que lo indique, y el tooltip debe ser de tooltip de error
@@ -8,4 +9,4 @@
  *                    * El tooltip debe ser de actualizar
  * @returns JSX
  */
-export declare function FilterButton(): JSX.Element;
+export declare function FilterButton(): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SKTWrapperFilterButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperFilterButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DynamicFilter/subcomponents/InnerForHooks/index.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 /**
  * @description InnerForHooks es una estrategia de mover el componente a nivel interno para poder acceder a los hooks que acceden al contexto DynamicFilterProvider
  * @returns Componente DynamicFilter
  */
-export declare const InnerForHooks: () => JSX.Element;
+export declare const InnerForHooks: () => import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const DynamicFilterRoot: 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 ContainerFistRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DynamicFilter/subcomponents/InputFilter/index.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 /**
  * @description Subcomponente encargado de cargar los campos que pueden ser filtrados
  *              Si el componente permite filtrar por todos los campos, al digita algun texto y luego se presiona anter, se aplica un filtro ALL_FIELD
  *              Permite mover la seleccion de campo en el popup a traves del KeyDown, KeyPress, Escape y si está seleccionado un item con Enter se abre el Popover de Menú de campos
  * @returns
  */
-export declare function InputFilter(): JSX.Element | null;
+export declare function InputFilter(): import("react").JSX.Element | null;

package/components/DynamicFilter/subcomponents/PopoverFilter/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @description
  * Subcomponente encargado de permitir agregar o modificar un filtro.
@@ -11,4 +12,4 @@
  *      Este componente se puede cargar desde: El PopoverMenuFields (openFor: Add),  o cuando se presiona click en un filtro aplicado (openFor: Edit)
  * @returns JSX
  */
-export declare const PopoverFilter: () => JSX.Element | null;
+export declare const PopoverFilter: () => import("react").JSX.Element | null;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledHeaderFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;