@m4l/components 0.0.28 → 0.0.31

package/dist/components/DynamicFilter/index.js

@@ -0,0 +1,1392 @@
+import { styled } from "@mui/material/styles";
+import { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
+import { useModuleDictionary, voidFunction, useHostTools, useEnvironment, useFlagsPresent } from "@m4l/core";
+import * as Yup from "yup";
+import { useFormContext, useWatch } from "react-hook-form";
+import { F as FormProvider } from "../hook-form/FormProvider/index.js";
+import "react-router-dom";
+import "@mui/lab";
+import { styled as styled$1, Skeleton, MenuItem, Popper, Button } from "@mui/material";
+import "../../contexts/ModalContext/index.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { R as RHFAutocomplete } from "../../vendor.js";
+import "../hook-form/RHFAutocompleteAsync/index.js";
+import "../hook-form/RHFCheckbox/index.js";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime.js";
+import "@mui/x-date-pickers";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.js";
+import "../../lodash.js";
+import "../../react-lazy-load-image-component.js";
+import "../Image/index.js";
+import "../hook-form/RHFUpload.js";
+import { format } from "date-fns";
+import { I as IconButton } from "../mui_extended/IconButton/index.js";
+import { I as Icon } from "../Icon/index.js";
+import "../../simplebar.js";
+import { S as Scrollbar } from "../ScrollBar/index.js";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.js";
+import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+const WrapperApplyedFilters = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  height: theme.spacing(3.75),
+  gap: theme.spacing(1.5)
+}));
+const STRING_OPERATORS = ["c", "nc"];
+const BOOLEAN_OPERATORS = ["e", "ne"];
+const DATE_TIME_OPERATORS = [
+  "b",
+  "e",
+  "ne",
+  "gt",
+  "gte",
+  "lt",
+  "lte"
+];
+const ALL_FIELDS = {
+  name: "all",
+  label: "filter.all_fields",
+  urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg",
+  type: "string",
+  multiple: true,
+  fixed: false
+};
+const WrapperStringFilter = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  minWidth: theme.spacing(3.75),
+  padding: theme.spacing(3, 0),
+  gap: theme.spacing(3)
+}));
+const WrapperAutoComplete$2 = styled("div")(() => ({
+  width: "100%"
+}));
+function StringFilter() {
+  const {
+    popupData: {
+      filter,
+      field
+    },
+    setPoupEditValidationSchema,
+    setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
+    getLabelOperator
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const inputRef = useRef(null);
+  const {
+    setValue
+  } = useFormContext();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const options = useMemo(() => STRING_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabelOperator(o)
+  })), [getLabelOperator]);
+  const transformFunctionFormValuesToValues = useCallback((data) => {
+    if (!filter || !field)
+      return void 0;
+    const newFilter = {
+      id: filter.id,
+      fieldName: field.name,
+      fixed: filter.fixed,
+      isSetted: true,
+      operator: data.valueOperator.id,
+      labelOperator: data.valueOperator.label,
+      operand1: data.valueOperand1,
+      labelOperands: data.valueOperand1
+    };
+    return newFilter;
+  }, []);
+  useEffect(() => {
+    if (!isLoaded) {
+      setPoupEditValidationSchema({
+        valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
+        valueOperand1: Yup.string().required(getLabel(`operand_required`))
+      });
+    }
+    setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
+    if (filter && field) {
+      setValue("valueOperand1", filter.operand1, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+    }
+    setIsLoaded(true);
+  }, [getLabel, filter, field]);
+  useEffect(() => {
+    console.debug("InputRef", inputRef);
+    inputRef.current?.focus();
+  }, [isLoaded]);
+  return /* @__PURE__ */ jsx(WrapperStringFilter, {
+    children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$2, {
+        children: /* @__PURE__ */ jsx(RHFAutocomplete, {
+          name: "valueOperator",
+          autoComplete: "off",
+          options,
+          getOptionLabel: (option) => option.label,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          label: ""
+        })
+      }), /* @__PURE__ */ jsx(RHFTextField, {
+        name: "valueOperand1",
+        ref: inputRef,
+        focused: true
+      })]
+    })
+  });
+}
+const WrapperAllFieldsFilter$1 = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  minWidth: theme.spacing(3.75),
+  height: "100%",
+  padding: theme.spacing(3, 0),
+  gap: theme.spacing(3)
+}));
+const WrapperAutoComplete$1 = styled("div")(() => ({
+  width: "100%"
+}));
+function BooleanFilter() {
+  const {
+    setPoupEditValidationSchema,
+    setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
+    getLabelOperator
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    popupData: {
+      filter,
+      field
+    }
+  } = useBase();
+  const {
+    setValue
+  } = useFormContext();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const operators = useMemo(() => BOOLEAN_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabelOperator(o)
+  })), [getLabelOperator]);
+  const optionsYesNo = useMemo(() => [{
+    value: true,
+    label: getLabel("filter.operand_true")
+  }, {
+    value: false,
+    label: getLabel("filter.operand_false")
+  }], [getLabel]);
+  const transformFunctionFormValuesToValues = useCallback((data) => {
+    if (!filter || !field)
+      return void 0;
+    const newFilter = {
+      id: filter.id,
+      fieldName: field.name,
+      fixed: filter.fixed,
+      isSetted: true,
+      operator: data.valueOperator.id,
+      labelOperator: data.valueOperator.label,
+      operand1: data.valueOperand1.value,
+      labelOperands: data.valueOperand1.label
+    };
+    return newFilter;
+  }, []);
+  useEffect(() => {
+    if (!isLoaded) {
+      setPoupEditValidationSchema({
+        valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
+        valueOperand1: Yup.object().nullable().required(getLabel(`operand_required`))
+      });
+    }
+    setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
+    if (filter && field) {
+      setValue("valueOperand1", {
+        value: filter.operand1,
+        label: getLabel(`filter.operand_${filter.operand1}`)
+      }, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+    }
+    setIsLoaded(true);
+  }, [getLabel]);
+  return /* @__PURE__ */ jsx(WrapperAllFieldsFilter$1, {
+    id: "WrapperAllFieldsFilter",
+    children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$1, {
+        children: /* @__PURE__ */ jsx(RHFAutocomplete, {
+          name: "valueOperator",
+          autoComplete: "off",
+          options: operators,
+          getOptionLabel: (option) => option.label,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          label: ""
+        })
+      }), /* @__PURE__ */ jsx(WrapperAutoComplete$1, {
+        children: /* @__PURE__ */ jsx(RHFAutocomplete, {
+          name: "valueOperand1",
+          autoComplete: "off",
+          options: optionsYesNo,
+          getOptionLabel: (option) => option.label,
+          isOptionEqualToValue: (option, value) => option.value === value.value,
+          label: ""
+        })
+      })]
+    })
+  });
+}
+const WrapperAllFieldsFilter = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  minWidth: theme.spacing(3.75),
+  padding: theme.spacing(3, 0),
+  gap: theme.spacing(3)
+}));
+const WrapperAutoComplete = styled("div")(() => ({
+  width: "100%"
+}));
+function DateTimeFilter() {
+  const {
+    setPoupEditValidationSchema,
+    setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
+    getLabelOperator
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    popupData: {
+      filter,
+      field
+    }
+  } = useBase();
+  const {
+    control,
+    setValue
+  } = useFormContext();
+  const operator = useWatch({
+    control,
+    name: "valueOperator"
+  });
+  const [isLoaded, setIsLoaded] = useState(false);
+  const options = useMemo(() => DATE_TIME_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabelOperator(o)
+  })), [getLabelOperator]);
+  const transformFunctionFormValuesToValues = useCallback((data) => {
+    if (!filter || !field)
+      return void 0;
+    const newFilter = {
+      id: filter.id,
+      fieldName: field.name,
+      fixed: filter.fixed,
+      isSetted: true,
+      operator: data.valueOperator.id,
+      operand1: data.valueOperand1.toISOString(),
+      labelOperator: data.valueOperator.label,
+      labelOperands: ""
+    };
+    if (data.valueOperator.id === "b") {
+      newFilter.operand2 = data.valueOperand2.toISOString();
+      newFilter.labelOperands = `${format(data.valueOperand1, "yyyy-MM-dd HH:mm:ss")} - ${format(data.valueOperand2, "yyyy-MM-dd HH:mm:ss")}`;
+    } else {
+      newFilter.operand2 = newFilter.operand2 ? newFilter.operand2 : newFilter.operand1;
+      newFilter.labelOperands = format(data.valueOperand1, "yyyy-MM-dd HH:mm:ss");
+    }
+    return newFilter;
+  }, []);
+  useEffect(() => {
+    console.debug("useEffect Datetime", isLoaded, filter?.operand1, filter?.operand2);
+    if (!isLoaded) {
+      setPoupEditValidationSchema({
+        valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
+        valueOperand1: Yup.date().test("valueOperand1", getLabel(`filter.error_invalid_date1`), (value) => {
+          return Boolean(value);
+        }),
+        valueOperand2: Yup.date().when(["valueOperator.id"], {
+          is: "b",
+          then: Yup.date().test("DOB", getLabel(`filter.error_invalid_date2`), (value) => {
+            return Boolean(value);
+          })
+        })
+      });
+    }
+    if (filter && field) {
+      setValue("valueOperand1", new Date(filter.operand1), {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+      setValue("valueOperand2", new Date(filter.operand2), {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+    }
+    setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
+    setIsLoaded(true);
+  }, [getLabel, filter, field]);
+  return /* @__PURE__ */ jsx(WrapperAllFieldsFilter, {
+    children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete, {
+        children: /* @__PURE__ */ jsx(RHFAutocomplete, {
+          name: "valueOperator",
+          autoComplete: "off",
+          options,
+          getOptionLabel: (option) => option.label,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          label: ""
+        })
+      }), /* @__PURE__ */ jsx(RHFDateTime, {
+        name: "valueOperand1",
+        autoComplete: "off",
+        label: ""
+      }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFDateTime, {
+        name: "valueOperand2",
+        autoComplete: "off",
+        label: ""
+      })]
+    })
+  });
+}
+function isValidDate(d) {
+  return d && d instanceof Date;
+}
+const verifyStringFilter = (filter) => {
+  if (typeof filter.operator !== "string") {
+    return false;
+  }
+  if (STRING_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+    return false;
+  }
+  if (typeof filter.operand1 !== "string") {
+    return false;
+  }
+  return true;
+};
+const verifyBooleanFilter = (filter) => {
+  if (typeof filter.operator !== "string") {
+    return false;
+  }
+  if (BOOLEAN_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+    return false;
+  }
+  if (typeof filter.operand1 !== "boolean") {
+    return false;
+  }
+  return true;
+};
+const verifyDateTime = (filter) => {
+  if (typeof filter.operator !== "string") {
+    return false;
+  }
+  if (DATE_TIME_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+    return false;
+  }
+  if (typeof filter.operand1 !== "string") {
+    return false;
+  }
+  if (filter.operator === "b" && typeof filter.operand2 !== "string") {
+    return false;
+  }
+  return true;
+};
+const getDefaultFilterValues = (field, fixed, getLabelOperator) => {
+  const defaultStartDate = new Date();
+  const defaultEndDate = new Date();
+  let dfop1 = field.defaultOperand1;
+  let dfop2 = field.defaultOperand2;
+  const defaultFilter = {
+    id: 0,
+    fieldName: field.name,
+    fixed,
+    isSetted: false,
+    operator: "c",
+    labelOperator: "",
+    operand1: "",
+    labelOperands: ""
+  };
+  switch (field.type) {
+    case "string":
+      break;
+    case "number":
+    case "boolean":
+      defaultFilter.operator = "e";
+      if (dfop1 !== void 0 && typeof dfop1 === "boolean") {
+        defaultFilter.operand1 = dfop1;
+      } else {
+        defaultFilter.operand1 = true;
+      }
+      break;
+    case "time":
+    case "date":
+    case "datetime":
+      if (dfop1) {
+        if (isValidDate(dfop1)) {
+          defaultStartDate.setDate(dfop1.getDate());
+        } else {
+          dfop1 = void 0;
+        }
+      }
+      if (dfop1 === void 0) {
+        defaultStartDate.setHours(0, 0, 0, 0);
+      }
+      if (dfop2) {
+        if (isValidDate(dfop2)) {
+          defaultEndDate.setDate(dfop2.getDate());
+        } else {
+          dfop2 = void 0;
+        }
+      }
+      if (dfop2 === void 0) {
+        defaultEndDate.setHours(23, 59, 59, 999);
+      }
+      defaultFilter.operator = "b";
+      defaultFilter.operand1 = defaultStartDate.toISOString();
+      defaultFilter.operand2 = defaultEndDate.toISOString();
+      defaultFilter.labelOperands = `${format(defaultStartDate, "yyyy-MM-dd HH:mm:ss")} - ${format(defaultEndDate, "yyyy-MM-dd HH:mm:ss")}`;
+      defaultFilter.isSetted = true;
+      break;
+  }
+  defaultFilter.labelOperator = getLabelOperator(defaultFilter.operator);
+  console.log("operator", defaultFilter);
+  return defaultFilter;
+};
+const PopupEditFilterComponent = (props) => {
+  const {
+    getFieldByName
+  } = useBase();
+  const field = getFieldByName(props.filter.fieldName);
+  if (!field)
+    return /* @__PURE__ */ jsx(Fragment, {});
+  switch (field.type) {
+    case "string":
+      return /* @__PURE__ */ jsx(StringFilter, {});
+    case "boolean":
+      return /* @__PURE__ */ jsx(BooleanFilter, {});
+    case "datetime":
+      return /* @__PURE__ */ jsx(DateTimeFilter, {});
+    default:
+      return /* @__PURE__ */ jsx(Fragment, {});
+  }
+};
+const initialState = {
+  fields: [],
+  withAllField: true,
+  isDirty: false,
+  isValid: true,
+  automatic: false,
+  availableFields: [],
+  getFieldByName: () => void 0,
+  getLabelOperator: () => "",
+  applyedFilters: [],
+  addFilter: voidFunction,
+  updateFilter: voidFunction,
+  removeFilter: voidFunction,
+  clearFilters: voidFunction,
+  fireOnChangeFilters: voidFunction,
+  openAnchorEl: null,
+  openMenuFields: voidFunction,
+  closeMenuFields: voidFunction,
+  popupData: {
+    popupAnchorEl: null,
+    filter: null,
+    field: null
+  },
+  popupValidationSchema: {},
+  setPoupEditValidationSchema: voidFunction,
+  showPopupForAddFilter: voidFunction,
+  showPopupForEditFilter: voidFunction,
+  hidePopupEdit: voidFunction,
+  setInEdition: voidFunction,
+  inEdition: false,
+  setFnTransformFormValuesIntoValues: voidFunction,
+  fnTransformFormValuesIntoRawValues: () => void 0
+};
+const BaseContext = createContext(initialState);
+const getMaxId = (applyedFilters) => {
+  return applyedFilters.reduce((prev, n) => {
+    return n.id > prev ? n.id : prev;
+  }, 0);
+};
+const getFilterById = (id, applyedFilters) => {
+  return applyedFilters.findIndex((f) => f.id === id);
+};
+const getRawFilter = (applyedFilter) => {
+  return applyedFilter.map((af) => ({
+    n: af.fieldName,
+    o: af.operator,
+    o1: af.operand1,
+    o2: af.operand2
+  }));
+};
+const getInitialFilters = (fields, filters, getFieldByName, getLabelOperator) => {
+  const newFilters = [];
+  const fixedFields = [];
+  for (let index = 0; index < filters.length; index++) {
+    let add;
+    const filter = {
+      ...filters[index],
+      id: 0,
+      isSetted: true,
+      fixed: false
+    };
+    const field = getFieldByName(filter.fieldName);
+    if (!field)
+      continue;
+    switch (field.type) {
+      case "string":
+        add = verifyStringFilter(filter);
+        break;
+      case "boolean":
+        add = verifyBooleanFilter(filter);
+        break;
+      case "datetime":
+        add = verifyDateTime(filter);
+        break;
+      default:
+        add = false;
+    }
+    if (add) {
+      if (field.fixed) {
+        if (fixedFields.findIndex((f) => f === field.name) === -1) {
+          filter.fixed = true;
+          fixedFields.push(field.name);
+        } else {
+          filter.fixed = false;
+        }
+      }
+      filter.isSetted = true;
+      filter.id = newFilters.length + 1;
+      newFilters.push(filter);
+    }
+  }
+  for (let index = 0; index < fields.length; index++) {
+    const field = fields[index];
+    if (field.fixed) {
+      if (!filters.find((f) => f.fieldName === field.name)) {
+        const newFilter = getDefaultFilterValues(field, true, getLabelOperator);
+        newFilter.id = newFilters.length + 1;
+        newFilters.push(newFilter);
+      }
+    }
+  }
+  return newFilters;
+};
+function BaseProvider(props) {
+  const {
+    isSkeleton = false,
+    fields,
+    initialFilters = [],
+    withAllField = true,
+    onChangeFilter,
+    automatic = true,
+    children
+  } = props;
+  const [openAnchorEl, setOpenAnchorEl] = useState(null);
+  const [popupData, setPopupData] = useState({
+    popupAnchorEl: null,
+    filter: null,
+    field: null
+  });
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [popupValidationSchema, setInternalPopupValidationSchema] = useState(Yup.object().shape({}));
+  const [fnTransformFormValuesIntoRawValues, setInternalfnTransormFormValuesIntoRawValues] = useState(() => void 0);
+  const all_fields = useMemo(() => {
+    return {
+      ...ALL_FIELDS,
+      label: getLabel("filter.all_fields")
+    };
+  }, [getLabel]);
+  const [inEdition, setInEdition] = useState(false);
+  const [isDirty, setIsDirty] = useState(!automatic);
+  const [isValid, setIsValid] = useState(false);
+  const {
+    toast
+  } = useHostTools();
+  const getFieldByName = useCallback((name) => {
+    return fields.concat(all_fields).find((f) => {
+      return f.name === name;
+    });
+  }, [fields, all_fields]);
+  const getLabelOperator = useCallback((operator) => {
+    return getLabel(`filter.operator_${operator}`);
+  }, [getLabel]);
+  const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabelOperator));
+  const availableFields = useMemo(() => {
+    const newFields = [];
+    for (let index = 0; index < fields.length; index++) {
+      let add;
+      const field = fields[index];
+      add = true;
+      if (field.multiple !== void 0 && field.multiple === false) {
+        const fIndx = applyedFilters.findIndex((f) => f.fieldName === field.name);
+        if (fIndx > -1) {
+          add = false;
+        }
+      }
+      if (add) {
+        newFields.push(field);
+      }
+    }
+    return newFields;
+  }, [fields, applyedFilters]);
+  const fireOnChangeFilters = useCallback(() => {
+    if (isValid) {
+      if (!automatic)
+        setIsDirty(false);
+      onChangeFilter(applyedFilters, getRawFilter(applyedFilters));
+    } else {
+      toast(getLabel("filter.error_filters_no_setted"), {
+        type: "error",
+        autoClose: 1e4
+      });
+    }
+  }, [isValid, applyedFilters]);
+  useEffect(() => {
+    const NoValid = applyedFilters.findIndex((f) => !f.isSetted) > -1;
+    if (NoValid) {
+      setIsValid(false);
+    } else {
+      setIsValid(true);
+    }
+    if (!automatic) {
+      setIsDirty(true);
+      return;
+    }
+    if (!NoValid) {
+      console.log("Ingrese");
+      setIsDirty(false);
+      onChangeFilter(applyedFilters, getRawFilter(applyedFilters));
+    }
+  }, [applyedFilters]);
+  const addFilter = useCallback((newFilter) => {
+    setApplyedFilters((lastApplyedFilters) => {
+      const newArray = [...lastApplyedFilters];
+      const newFilterFull = {
+        ...newFilter,
+        id: getMaxId(lastApplyedFilters) + 1,
+        labelOperator: getLabelOperator(newFilter.operator)
+      };
+      newArray.push(newFilterFull);
+      return newArray;
+    });
+  }, []);
+  const updateFilter = useCallback((newFilter) => {
+    setApplyedFilters((lastApplyedFilters) => {
+      const newArray = [...lastApplyedFilters];
+      const findedFilter = getFilterById(newFilter.id, newArray);
+      if (findedFilter > -1) {
+        newArray.splice(findedFilter, 1, {
+          ...newFilter,
+          labelOperator: getLabelOperator(newFilter.operator)
+        });
+      }
+      return newArray;
+    });
+  }, []);
+  const clearFilters = useCallback(() => {
+    setApplyedFilters((lastFilters) => {
+      const newFilters = [];
+      for (let index = 0; index < lastFilters.length; index++) {
+        const filter = lastFilters[index];
+        if (filter.fixed) {
+          newFilters.push(filter);
+        }
+      }
+      return newFilters;
+    });
+  }, []);
+  const openMenuFields = useCallback((anchorEl) => {
+    setOpenAnchorEl(anchorEl);
+    setInEdition(true);
+  }, [applyedFilters]);
+  const closeMenuFields = useCallback(() => {
+    setOpenAnchorEl(null);
+    setInEdition(false);
+  }, []);
+  const hidePopupEdit = useCallback((stayInEditon) => {
+    if (popupData.popupAnchorEl) {
+      setPopupData({
+        popupAnchorEl: null,
+        filter: null,
+        field: null
+      });
+    }
+    if (!stayInEditon && inEdition) {
+      setInEdition(false);
+    }
+  }, [popupData, inEdition]);
+  const showPopupForAddFilter = useCallback((anchorEl, field) => {
+    setPopupData({
+      popupAnchorEl: anchorEl,
+      filter: getDefaultFilterValues(field, false, getLabelOperator),
+      field
+    });
+    setInEdition(true);
+  }, []);
+  const showPopupForEditFilter = useCallback((anchorEl, filterToEdit) => {
+    setPopupData({
+      popupAnchorEl: anchorEl,
+      filter: filterToEdit,
+      field: getFieldByName(filterToEdit.fieldName)
+    });
+    setInEdition(true);
+  }, []);
+  const removeFilter = useCallback((id) => {
+    setApplyedFilters((lastApplyedFilters) => {
+      const newArray = [...lastApplyedFilters];
+      const index_to_remove = lastApplyedFilters.findIndex((filter) => id === filter.id);
+      if (index_to_remove > -1) {
+        if (!newArray[index_to_remove].fixed) {
+          newArray.splice(index_to_remove, 1);
+        }
+      }
+      return newArray;
+    });
+  }, []);
+  const setPoupEditValidationSchema = useCallback((validationSchema) => {
+    setInternalPopupValidationSchema(Yup.object().shape({
+      ...validationSchema
+    }));
+  }, []);
+  const setFnTransformFormValuesIntoValues = useCallback((fn) => {
+    setInternalfnTransormFormValuesIntoRawValues(() => fn);
+  }, []);
+  console.log("popupData value", popupData);
+  return /* @__PURE__ */ jsx(BaseContext.Provider, {
+    value: {
+      isSkeleton,
+      inEdition,
+      automatic,
+      isDirty,
+      isValid,
+      withAllField,
+      fields,
+      availableFields,
+      getFieldByName,
+      getLabelOperator,
+      applyedFilters,
+      addFilter,
+      updateFilter,
+      removeFilter,
+      clearFilters,
+      fireOnChangeFilters,
+      openAnchorEl,
+      openMenuFields,
+      closeMenuFields,
+      popupData,
+      popupValidationSchema,
+      showPopupForAddFilter,
+      showPopupForEditFilter,
+      hidePopupEdit,
+      setInEdition,
+      setPoupEditValidationSchema,
+      fnTransformFormValuesIntoRawValues,
+      setFnTransformFormValuesIntoValues
+    },
+    children
+  });
+}
+const useBase = () => useContext(BaseContext);
+const WrapperApplyedFilter = styled("div")(({
+  theme
+}) => ({
+  width: "auto",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: theme.spacing(3.75),
+  padding: theme.spacing(1),
+  backgroundColor: theme.palette.action.disabledBackground,
+  borderRadius: theme.spacing(1),
+  "&.waf_no_setted": {
+    border: `1px solid ${theme.palette.error.main}`
+  }
+}));
+const AplyedFilterStyled = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "auto",
+  height: theme.spacing(3.75),
+  marginRight: theme.spacing(1),
+  marginLeft: theme.spacing(1),
+  whiteSpace: "nowrap"
+}));
+const ContainerField = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.subtitle2
+}));
+const ContainerOperator = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  marginLeft: theme.spacing(1.5),
+  fontStyle: "italic"
+}));
+const ContainerOperands = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  marginLeft: theme.spacing(1.5)
+}));
+function ApplyedFilter(props) {
+  const {
+    fieldName,
+    id,
+    isSetted,
+    fixed,
+    labelOperator,
+    labelOperands
+  } = props;
+  console.log("props ApplyedFilter ", props);
+  const {
+    removeFilter,
+    showPopupForEditFilter,
+    hidePopupEdit,
+    getFieldByName,
+    isSkeleton
+  } = useBase();
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  console.log("fieldName by ApplyedFilter 1", getFieldByName(fieldName));
+  const field = useMemo(() => {
+    return getFieldByName(fieldName);
+  }, [getFieldByName]);
+  console.log("fieldName by ApplyedFilter 2", field);
+  const urlIcon = useMemo(() => {
+    if (!field)
+      return;
+    if (field && field.urlIcon !== "") {
+      return field.urlIcon;
+    }
+    return "";
+  }, [field]);
+  console.log("urlIcon value", urlIcon);
+  const onDelete = () => {
+    hidePopupEdit(false);
+    removeFilter(id);
+  };
+  const onClick = (event) => {
+    showPopupForEditFilter(event.currentTarget, props);
+  };
+  if (!field) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
+    id: "WrapperApplyedFilter",
+    className: !isSetted ? "waf_no_setted" : "",
+    children: [/* @__PURE__ */ jsx(Icon, {
+      src: urlIcon,
+      onClick
+    }), /* @__PURE__ */ jsxs(AplyedFilterStyled, {
+      onClick,
+      children: [/* @__PURE__ */ jsx(ContainerField, {
+        children: field.label
+      }), /* @__PURE__ */ jsx(ContainerOperator, {
+        children: labelOperator
+      }), /* @__PURE__ */ jsx(ContainerOperands, {
+        children: labelOperands
+      })]
+    }), !fixed && /* @__PURE__ */ jsx(IconButton, {
+      src: `${host_static_assets}/${environment}/frontend/components/dynamic_filter/assets/icons/close.svg`,
+      onClick: onDelete
+    })]
+  });
+}
+function ApplyedFilters() {
+  const {
+    applyedFilters,
+    isSkeleton
+  } = useBase();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
+      id: "WrapperApplyedFilters"
+    });
+  }
+  return /* @__PURE__ */ jsx("div", {
+    style: {
+      width: "100%"
+    },
+    children: /* @__PURE__ */ jsx(Scrollbar, {
+      children: /* @__PURE__ */ jsx(WrapperApplyedFilters, {
+        id: "WrapperApplyedFilters",
+        children: [...applyedFilters].sort((a, b) => a.isSetted === b.isSetted ? 0 : a.isSetted ? -1 : 1).reverse().map((filter) => /* @__PURE__ */ jsx(ApplyedFilter, {
+          ...filter
+        }, filter.id))
+      })
+    })
+  });
+}
+const SKTClearFilters = styled$1("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75)
+}));
+const WrapperClearFilters = styled$1("div")(({
+  theme
+}) => ({
+  [theme.breakpoints.up("sm")]: {
+    paddingLeft: theme.spacing(1.5),
+    marginLeft: theme.spacing(1.5),
+    borderLeft: `1px solid ${theme.palette.divider}`
+  }
+}));
+const ClearFilters = () => {
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const {
+    clearFilters,
+    isSkeleton
+  } = useBase();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTClearFilters, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "20px",
+        height: "20px"
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(WrapperClearFilters, {
+    children: /* @__PURE__ */ jsx(IconButton, {
+      src: `${host_static_assets}/${environment}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
+      onClick: clearFilters
+    })
+  });
+};
+const SKTWrapperFilterButton = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75)
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75)
+}));
+const WrapperFilterButton = styled("div")(() => ({
+  "&.isDirty": {
+    "@keyframes dirtyEffect": {
+      from: {
+        opacity: 1
+      },
+      to: {
+        opacity: 0
+      }
+    },
+    animation: "dirtyEffect 2s infinite ease"
+  },
+  "&.isDirtyError": {}
+}));
+function FilterButton() {
+  const {
+    isSkeleton,
+    fireOnChangeFilters,
+    automatic,
+    isDirty,
+    isValid
+  } = useBase();
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  console.log("Render isDirty", isDirty, automatic);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTWrapperFilterButton, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        height: 20
+      })
+    });
+  }
+  const color = useMemo(() => {
+    if (automatic) {
+      return "default";
+    }
+    if (!isValid) {
+      return "error";
+    }
+    return "primary";
+  }, [automatic, isValid]);
+  return /* @__PURE__ */ jsx(WrapperFilterButton, {
+    className: isDirty && isValid ? "isDirty" : "",
+    children: /* @__PURE__ */ jsx(IconButton, {
+      color,
+      dictionaryTooltip: "filter.filter_tooltip",
+      onClick: () => fireOnChangeFilters(),
+      "aria-label": "settings",
+      src: `${host_static_assets}/${environment}/frontend/components/dynamic_filter/assets/icons/${automatic ? "refresh" : "search"}.svg`
+    })
+  });
+}
+const WrapperInputFilter = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  height: theme.spacing(3.75),
+  margin: theme.spacing(0, 1.5),
+  padding: theme.spacing(0, 1.5),
+  borderRight: `1px solid ${theme.palette.divider}`,
+  borderLeft: `1px solid ${theme.palette.divider}`,
+  [theme.breakpoints.up("sm")]: {
+    width: theme.spacing(25)
+  }
+}));
+const StyledInputFilter = styled("input")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75),
+  width: "100%",
+  "&": {
+    outline: "none",
+    border: "none"
+  },
+  [theme.breakpoints.up("sm")]: {
+    width: "auto"
+  }
+}));
+function InputFilter() {
+  const {
+    isSkeleton,
+    withAllField,
+    availableFields,
+    showPopupForAddFilter,
+    addFilter,
+    openAnchorEl,
+    openMenuFields,
+    closeMenuFields,
+    hidePopupEdit
+  } = useBase();
+  useModuleDictionary();
+  const [valueFilter, setValueFilter] = useState("");
+  const finalFields = useMemo(() => {
+    if (!openAnchorEl) {
+      return [];
+    }
+    return availableFields.filter((field) => field.label.includes(valueFilter));
+  }, [valueFilter, openAnchorEl]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(WrapperInputFilter, {
+      id: "SKTWrapperInputFilter",
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "100%",
+        height: 24
+      })
+    });
+  }
+  const handleClose = () => {
+    closeMenuFields();
+  };
+  const handleClickItem = (field) => {
+    closeMenuFields();
+    showPopupForAddFilter(openAnchorEl, field);
+  };
+  const onClickFilter = (event) => {
+    openMenuFields(event.currentTarget);
+  };
+  const onChangeFilter = (event) => {
+    setValueFilter(event.target.value);
+    if (!openAnchorEl) {
+      openMenuFields(event.currentTarget);
+    }
+    hidePopupEdit(true);
+  };
+  const handleKeyPressMenu = (event) => {
+    if (event.key !== "Enter")
+      return;
+    if (valueFilter.trim() === "") {
+      closeMenuFields();
+      return;
+    }
+    if (withAllField) {
+      addFilter({
+        fieldName: ALL_FIELDS.name,
+        isSetted: true,
+        fixed: false,
+        operator: "c",
+        operand1: valueFilter,
+        labelOperands: valueFilter
+      });
+      setValueFilter("");
+      closeMenuFields();
+    }
+  };
+  console.log("Render InputFilter");
+  return /* @__PURE__ */ jsxs(WrapperInputFilter, {
+    id: "WrapperInputFilter",
+    children: [/* @__PURE__ */ jsx(StyledInputFilter, {
+      type: "text",
+      value: valueFilter,
+      placeholder: "filter",
+      onClick: onClickFilter,
+      onChange: onChangeFilter,
+      onKeyPress: handleKeyPressMenu
+    }), /* @__PURE__ */ jsx(MenuPopover, {
+      id: "MenuPopover",
+      open: Boolean(openAnchorEl),
+      anchorEl: openAnchorEl,
+      onClose: handleClose,
+      disableAutoFocus: true,
+      arrow: "right-top",
+      sx: {
+        "& .MuiMenuItem-root": {
+          px: 1,
+          typography: "body2",
+          borderRadius: 0.75
+        }
+      },
+      children: Boolean(openAnchorEl) && finalFields.map((field, index) => /* @__PURE__ */ jsxs(MenuItem, {
+        dense: true,
+        onClick: () => handleClickItem(field),
+        children: [/* @__PURE__ */ jsx(Icon, {
+          src: field.urlIcon
+        }), /* @__PURE__ */ jsx(LabelMemuItem, {
+          children: field.label
+        })]
+      }, `menu_action_${index}`))
+    })]
+  });
+}
+const WrapperPopupEditFilter = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: theme.spacing(1.4, 3, 3, 3),
+  backgroundColor: theme.palette.background.default,
+  borderRadius: theme.spacing(1)
+}));
+const PopperActionsContainer = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  gap: theme.spacing(3),
+  paddingTop: theme.spacing(3)
+}));
+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 HeaderContainer = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  borderBottom: `1px solid ${theme.palette.divider}`
+}));
+const PopupEditFilter = () => {
+  const {
+    popupValidationSchema,
+    popupData: {
+      popupAnchorEl,
+      filter,
+      field
+    },
+    hidePopupEdit,
+    addFilter,
+    updateFilter,
+    getLabelOperator,
+    fnTransformFormValuesIntoRawValues
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const values = useMemo(() => {
+    if (!filter || !field)
+      return {};
+    const valuesFilter = {
+      ...filter,
+      valueOperator: {
+        id: filter.operator,
+        label: getLabelOperator(filter.operator)
+      }
+    };
+    return valuesFilter;
+  }, [filter, field, getLabelOperator, getLabel]);
+  const onSubmit = async (data) => {
+    if (!filter || !field)
+      return;
+    const newFilter = fnTransformFormValuesIntoRawValues(data);
+    if (!newFilter)
+      return;
+    if (filter.id === 0) {
+      addFilter(newFilter);
+    } else {
+      updateFilter(newFilter);
+    }
+    hidePopupEdit(false);
+  };
+  const onClose = () => {
+    hidePopupEdit(false);
+  };
+  console.log("Render PopupEditFilter");
+  return /* @__PURE__ */ jsx(Popper, {
+    id: "MenuPopover",
+    open: Boolean(popupAnchorEl),
+    anchorEl: popupAnchorEl,
+    sx: {
+      boxShadow: "0 8px 16px 0 rgb(0 0 0 / 12%)",
+      borderRadius: 1
+    },
+    children: /* @__PURE__ */ jsx(Fragment, {
+      children: filter && /* @__PURE__ */ jsx(FormProvider, {
+        onSubmit,
+        values,
+        validationSchema: popupValidationSchema,
+        urlCancel: -1,
+        children: /* @__PURE__ */ jsxs(WrapperPopupEditFilter, {
+          children: [/* @__PURE__ */ jsxs(HeaderContainer, {
+            children: [/* @__PURE__ */ jsx(Icon, {
+              src: field?.urlIcon
+            }), /* @__PURE__ */ jsx(TitleContainer, {
+              children: field?.label
+            })]
+          }), /* @__PURE__ */ jsx(PopupEditFilterComponent, {
+            filter
+          }), /* @__PURE__ */ jsxs(PopperActionsContainer, {
+            children: [/* @__PURE__ */ jsx(Button, {
+              variant: "outlined",
+              color: "inherit",
+              onClick: onClose,
+              children: `Cerrar`
+            }), /* @__PURE__ */ jsx(Button, {
+              variant: "contained",
+              color: "primary",
+              type: "submit",
+              children: `Agregar ${filter.id}`
+            })]
+          })]
+        })
+      })
+    })
+  });
+};
+const WrapperFilter = styled("div", {
+  shouldForwardProp: (prop) => prop !== "inEdition"
+})(({
+  theme,
+  inEdition
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  height: "auto",
+  padding: theme.spacing(1.5),
+  borderRadius: theme.spacing(1),
+  border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
+}));
+const WrapperFilterMobile = styled("div", {
+  shouldForwardProp: (prop) => prop !== "inEdition"
+})(({
+  theme,
+  inEdition
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "space-between",
+  minWidth: theme.spacing(25),
+  height: "auto",
+  padding: theme.spacing(1.5),
+  borderRadius: theme.spacing(1),
+  border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
+  gap: theme.spacing(1.5)
+}));
+const ContainerFistRow = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%"
+}));
+const DynamicFilter = (props) => {
+  const isDesktop = useResponsiveDesktop();
+  const render = useFlagsPresent(["dictionary_loaded"]);
+  if (!render) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsx(BaseProvider, {
+    ...props,
+    children: /* @__PURE__ */ jsx(BaseContext.Consumer, {
+      children: ({
+        inEdition
+      }) => isDesktop ? /* @__PURE__ */ jsxs(WrapperFilter, {
+        id: "WrapperDynamicFilter",
+        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, {})]
+      })
+    })
+  });
+};
+export { DynamicFilter as D };