@m4l/components 1.0.14 → 1.0.16

package/components/DynamicFilter/subcomponents/index.f5d4a81d.js

@@ -1,787 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useMemo, useState, useEffect, useRef, useCallback } from "react";
-import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { B as BOOLEAN_OPERATORS, S as STRING_OPERATORS, D as DATE_TIME_OPERATORS, N as NUMBER_OPERATORS, a as SELECT_OPERATORS, A as ALL_FIELD } from "../constants.1dddd09c.js";
-import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../dictionary.ce375e8f.js";
-import { R as RHFAutocomplete } from "../../hook-form/RHFAutocomplete/index.4caa6e3d.js";
-import { R as RHFTextField } from "../../hook-form/RHFTextField/index.ea988842.js";
-import { useFormContext, useWatch } from "react-hook-form";
-import { R as RHFDateTime } from "../../hook-form/RHFDateTime/index.d3683024.js";
-import { u as useDynamicFilterStore } from "../store/index.6319d445.js";
-import { R as RHFAutocompleteAsync } from "../../hook-form/RHFAutocompleteAsync/index.21fe8f74.js";
-import { P as PopoverMenuStyled, a as PopoverMenuItemStyled, b as PopoverMenuItemIconStyled, c as PopoverMenuItemLabelStyled, I as InputFilterStyled, d as InputFilterIconStyled, e as InputFilterInputStyled, A as AppliedFilterChipStyled, f as AppliedFilterChipIconStyled, g as AppliedFilterChipInfoStyled, h as AppliedFilterChipInfoFieldNameStyled, i as AppliedFilterChipInfoOperatorStyled, j as AppliedFilterChipInfoOperandsStyled, k as AppliedFilterChipRemoveButtonStyled, l as AppliedFiltersStyled, m as AppliedFilterInnerContainerStyled, n as ActionsSkeletonButtonStyled, o as ActionsStyled, p as ActionsClearButtonStyled, q as ActionsSubmitButtonStyled, r as PopoverStyled, s as PopoverHeaderStyled, t as PopoverHeaderIconStyled, u as PopoverHeaderTitleStyled, v as PopoverContainerFieldsStyled, w as PopoverHeaderActionsStyled, R as RootStyled, D as DynamicFilterSlots, x as InnerContainerStyled } from "../slots/index.6f8fcccb.js";
-import { a as getPropDataTestId } from "../../../test/getNameDataTestId.0faeade8.js";
-import { Skeleton } from "@mui/material";
-import { S as ScrollBar } from "../../ScrollBar/index.21bc5025.js";
-import { useFormatter } from "@m4l/graphics";
-import { B as BooleanFilterHelpers, S as StringFilterHelpers, N as NumberFilterHelpers, D as DateTimeFilterHelpers, b as SelectFilterHelpers } from "../helpers/index.0eab89ef.js";
-import { R as RHFormProvider } from "../../../contexts/RHFormContext/index.bf3a2812.js";
-import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/index.609a78ca.js";
-import { A as ActionIntro } from "../../CommonActions/components/ActionIntro/index.ebac0bc1.js";
-function BooleanFilter() {
-  const { getLabel } = useModuleDictionary();
-  const operators = useMemo(
-    () => BOOLEAN_OPERATORS.map((o) => ({
-      id: o,
-      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
-    })),
-    [getLabel]
-  );
-  const optionsYesNo = useMemo(
-    () => [
-      {
-        value: true,
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.operand_true))
-      },
-      {
-        value: false,
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.operand_false))
-      }
-    ],
-    [getLabel]
-  );
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      RHFAutocomplete,
-      {
-        name: "formValueOperator",
-        autoComplete: "off",
-        options: operators,
-        getOptionLabel: (option) => option.label,
-        isOptionEqualToValue: (option, value) => option.id === value.id,
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_boolean_operator))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      RHFAutocomplete,
-      {
-        name: "formValueOperand1",
-        autoComplete: "off",
-        options: optionsYesNo,
-        getOptionLabel: (option) => option.label,
-        isOptionEqualToValue: (option, value) => option.value === value.value,
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_boolean_operand1))
-      }
-    )
-  ] });
-}
-function StringFilter() {
-  const { getLabel } = useModuleDictionary();
-  const operators = useMemo(
-    () => STRING_OPERATORS.map((o) => ({
-      id: o,
-      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
-    })),
-    [getLabel]
-  );
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      RHFAutocomplete,
-      {
-        name: "formValueOperator",
-        autoComplete: "off",
-        options: operators,
-        getOptionLabel: (option) => option.label,
-        isOptionEqualToValue: (option, value) => option.id === value.id,
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operator_string))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      RHFTextField,
-      {
-        name: "formValueOperand1",
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand1_string))
-      }
-    )
-  ] });
-}
-function DateTimeFilter() {
-  const { getLabel } = useModuleDictionary();
-  const { control } = useFormContext();
-  const operator = useWatch({
-    control,
-    name: "formValueOperator"
-  });
-  const operators = useMemo(
-    () => DATE_TIME_OPERATORS.map((o) => ({
-      id: o,
-      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
-    })),
-    [getLabel]
-  );
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      RHFAutocomplete,
-      {
-        name: "formValueOperator",
-        autoComplete: "off",
-        options: operators,
-        getOptionLabel: (option) => option.label,
-        isOptionEqualToValue: (option, value) => option.id === value.id,
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operator_date_time))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      RHFDateTime,
-      {
-        name: "formValueOperand1",
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand1_date_time))
-      }
-    ),
-    operator && operator.id === "b" && /* @__PURE__ */ jsx(
-      RHFDateTime,
-      {
-        name: "formValueOperand2",
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand2_date_time))
-      }
-    )
-  ] });
-}
-function NumberFilter() {
-  const { getLabel } = useModuleDictionary();
-  const { control } = useFormContext();
-  const operator = useWatch({
-    control,
-    name: "formValueOperator"
-  });
-  const operators = useMemo(
-    () => NUMBER_OPERATORS.map((o) => ({
-      id: o,
-      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
-    })),
-    [getLabel]
-  );
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      RHFAutocomplete,
-      {
-        name: "formValueOperator",
-        autoComplete: "off",
-        options: operators,
-        getOptionLabel: (option) => option.label,
-        isOptionEqualToValue: (option, value) => option.id === value.id,
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operator_number))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      RHFTextField,
-      {
-        name: "formValueOperand1",
-        type: "number",
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand1_number))
-      }
-    ),
-    operator && operator.id === "b" && /* @__PURE__ */ jsx(
-      RHFTextField,
-      {
-        name: "formValueOperand2",
-        type: "number",
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand2_number))
-      }
-    )
-  ] });
-}
-function SelectFilter() {
-  const { getLabel } = useModuleDictionary();
-  const field = useDynamicFilterStore((state) => state.popoverFilterData?.field);
-  if (!field?.selectOptions?.endPoint) {
-    throw new Error("El filtro tipo Select requiere la configuraci\xF3n del Endpoint");
-  }
-  const autocompleteProps = field?.selectOptions;
-  const operators = useMemo(
-    () => SELECT_OPERATORS.map((o) => ({
-      id: o,
-      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
-    })),
-    [getLabel]
-  );
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      RHFAutocomplete,
-      {
-        name: "formValueOperator",
-        autoComplete: "off",
-        options: operators,
-        getOptionLabel: (option) => option.label,
-        isOptionEqualToValue: (option, value) => option.id === value.id,
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_select_operator))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      RHFAutocompleteAsync,
-      {
-        ...autocompleteProps,
-        name: "formValueOperandsArray",
-        autoComplete: "off",
-        label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_select_operands_array))
-      }
-    )
-  ] });
-}
-const helpersStrategies = {
-  boolean: new BooleanFilterHelpers(),
-  string: new StringFilterHelpers(),
-  number: new NumberFilterHelpers(),
-  datetime: new DateTimeFilterHelpers(),
-  select: new SelectFilterHelpers(),
-  __default__: () => {
-    throw new Error("Type no defined");
-  }
-};
-function fieldFactory(type) {
-  const selectedHelper = helpersStrategies?.[type];
-  if (!selectedHelper) {
-    return helpersStrategies.__default__();
-  }
-  return selectedHelper;
-}
-function useDynamicFilterBase() {
-  const ownerState = useDynamicFilterStore((state) => state.ownerState);
-  const dataTestId = useDynamicFilterStore((state) => state.dataTestId);
-  return { ownerState, dataTestId };
-}
-function useInputFilter() {
-  const [selectedFieldIndex, setSelectedFieldIndex] = useState(-1);
-  const [filteredFields, setFilteredFields] = useState([]);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const anchorEl = useDynamicFilterStore((state) => state.fnAnchorEl);
-  const withAllField = useDynamicFilterStore((state) => state.withAllField);
-  const availableFields = useDynamicFilterStore((state) => state.availableFields);
-  const inputData = useDynamicFilterStore((state) => state.inputData);
-  const {
-    addFilter,
-    closePopoverMenuFields,
-    getFieldByName,
-    getNewId,
-    hidePopoverFilter,
-    openPopoverMenuFields,
-    setInEdition,
-    setInputData,
-    showPopoverFilterForAdd
-  } = useDynamicFilterStore((state) => state.actions);
-  useEffect(() => {
-    if (!anchorEl) {
-      setFilteredFields([]);
-    } else {
-      setFilteredFields(
-        availableFields.filter(
-          (field) => (field.label ?? getLabel(field.dictionaryId)).includes(inputData)
-        )
-      );
-      setSelectedFieldIndex(-1);
-    }
-  }, [anchorEl, inputData, availableFields, getLabel]);
-  function handleOpenPopUpClickItem(field) {
-    closePopoverMenuFields();
-    if (anchorEl)
-      showPopoverFilterForAdd(anchorEl(), field);
-  }
-  const inputHandlersProps = {
-    onFocus: (event) => {
-      openPopoverMenuFields(event.currentTarget);
-      setInEdition(true);
-    },
-    onChange: (event) => {
-      setInputData(event.target.value);
-      if (!anchorEl) {
-        openPopoverMenuFields(event.currentTarget);
-      }
-      hidePopoverFilter(true);
-    },
-    onKeyDown: (event) => {
-      if (event.key === "ArrowDown") {
-        let newIndex = -1;
-        if (filteredFields.length > 0) {
-          if (selectedFieldIndex < filteredFields.length - 1) {
-            newIndex = selectedFieldIndex + 1;
-          } else {
-            newIndex = filteredFields.length - 1;
-          }
-        }
-        setSelectedFieldIndex(newIndex);
-      }
-      if (event.key === "ArrowUp") {
-        let newIndex = -1;
-        if (filteredFields.length > 0) {
-          if (selectedFieldIndex > -1) {
-            newIndex = selectedFieldIndex - 1;
-          }
-        }
-        setSelectedFieldIndex(newIndex);
-      }
-      if (event.key === "Escape") {
-        closePopoverMenuFields();
-      }
-      if (event.key !== "Enter")
-        return;
-      if (selectedFieldIndex === -1) {
-        if (inputData.trim() === "") {
-          closePopoverMenuFields();
-          return;
-        }
-        if (withAllField) {
-          addFilter({
-            id: getNewId(),
-            fieldType: "string",
-            field: getFieldByName(ALL_FIELD.name),
-            isSet: true,
-            fixed: false,
-            operator: "c",
-            operand1: inputData
-          });
-          setInputData("");
-          closePopoverMenuFields();
-        }
-      } else {
-        handleOpenPopUpClickItem(filteredFields[selectedFieldIndex]);
-      }
-    }
-  };
-  return {
-    iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/filter.svg`,
-    isSkeleton,
-    inputPlaceHolder: getLabel(getDynamicFilterDictionary(DICCTIONARY.input_placeholder)),
-    inputData,
-    inputHandlersProps,
-    canRender: !(!withAllField && availableFields.length === 0),
-    filteredFields,
-    selectedFieldIndex
-  };
-}
-function InputFilterSkeleton() {
-  return /* @__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: "16px", sx: { minWidth: "80px" } })
-  ] });
-}
-function usePopoverMenuFields() {
-  const { getLabel } = useModuleDictionary();
-  const fnAnchorEl = useDynamicFilterStore((state) => state.fnAnchorEl);
-  const { showPopoverFilterForAdd, closePopoverMenuFields } = useDynamicFilterStore(
-    (state) => state.actions
-  );
-  function handleOpenPopUpClickItem(_event, field) {
-    if (fnAnchorEl) {
-      showPopoverFilterForAdd(fnAnchorEl(), field);
-    }
-  }
-  function handleClosePopover() {
-    closePopoverMenuFields(false);
-  }
-  function getItemLabel(field) {
-    return field.label ?? getLabel(field.dictionaryId);
-  }
-  return {
-    fnAnchorEl,
-    getItemLabel,
-    handleClosePopover,
-    handleOpenPopUpClickItem
-  };
-}
-function PopoverMenuFields(props) {
-  const { fields, selectFieldIndex } = props;
-  const { fnAnchorEl, handleOpenPopUpClickItem, handleClosePopover, getItemLabel } = usePopoverMenuFields();
-  return /* @__PURE__ */ jsx(
-    PopoverMenuStyled,
-    {
-      disableAutoFocus: true,
-      disableRestoreFocus: true,
-      arrowType: "top-left",
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      open: Boolean(fnAnchorEl),
-      onClose: handleClosePopover,
-      anchorEl: fnAnchorEl?.(),
-      ownerState: {},
-      children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ jsxs(
-        PopoverMenuItemStyled,
-        {
-          dense: true,
-          selected: index === selectFieldIndex,
-          onClick: (event) => handleOpenPopUpClickItem(event, field),
-          ownerState: {},
-          children: [
-            /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { src: field.urlIcon, ownerState: {} }),
-            /* @__PURE__ */ jsx(PopoverMenuItemLabelStyled, { ownerState: {}, children: getItemLabel(field) })
-          ]
-        },
-        `menu_action_${getItemLabel(field)}`
-      ))
-    }
-  );
-}
-const InputFilter = () => {
-  const {
-    iconUrl,
-    isSkeleton,
-    inputPlaceHolder,
-    inputData,
-    inputHandlersProps,
-    canRender,
-    filteredFields,
-    selectedFieldIndex
-  } = useInputFilter();
-  if (!canRender)
-    return null;
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(InputFilterStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(InputFilterSkeleton, {}) });
-  }
-  return /* @__PURE__ */ jsxs(InputFilterStyled, { ownerState: {}, children: [
-    /* @__PURE__ */ jsx(InputFilterIconStyled, { src: iconUrl, ownerState: {} }),
-    /* @__PURE__ */ jsx(
-      InputFilterInputStyled,
-      {
-        type: "text",
-        value: inputData,
-        placeholder: inputPlaceHolder,
-        ownerState: {},
-        ...inputHandlersProps
-      }
-    ),
-    /* @__PURE__ */ jsx(PopoverMenuFields, { fields: filteredFields, selectFieldIndex: selectedFieldIndex })
-  ] });
-};
-const InputFilter$1 = InputFilter;
-function useAppliedFilters() {
-  const appliedFilter = useDynamicFilterStore((state) => state.appliedFilters);
-  const isSkeleton = useDynamicFilterStore((state) => state.ownerState.isSkeleton);
-  const appliedFiltersSorted = [...appliedFilter].sort(
-    (filterA, filterB) => filterA.isSet !== filterB.isSet ? Number(filterA.isSet) - Number(filterB.isSet) : filterB.id - filterA.id
-  );
-  return {
-    appliedFiltersSorted,
-    isSkeleton
-  };
-}
-function useAppliedFilterChip(filter) {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const formatters = useFormatter();
-  const { hidePopoverFilter, removeFilter, showPopoverFilterForEdit } = useDynamicFilterStore(
-    (state) => state.actions
-  );
-  const removeIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`;
-  const labels = useMemo(() => {
-    return fieldFactory(filter.field.type).getLabels(filter, getLabel, formatters, filter.field);
-  }, [filter, getLabel]);
-  function onDelete() {
-    hidePopoverFilter(false);
-    removeFilter(filter.id);
-  }
-  function onEditFilter(event) {
-    hidePopoverFilter(false);
-    const currentTarget = event.currentTarget;
-    setTimeout(() => showPopoverFilterForEdit(currentTarget, filter), 10);
-  }
-  return {
-    onDelete,
-    onEditFilter,
-    removeIconUrl,
-    iconFieldUrl: filter.field?.urlIcon,
-    labels
-  };
-}
-function AppliedFilterChip(props) {
-  const { fixed } = props;
-  const { onEditFilter, onDelete, iconFieldUrl, removeIconUrl, labels } = useAppliedFilterChip(props);
-  return /* @__PURE__ */ jsxs(AppliedFilterChipStyled, { ownerState: {}, children: [
-    iconFieldUrl && /* @__PURE__ */ jsx(AppliedFilterChipIconStyled, { onClick: onEditFilter, src: iconFieldUrl, ownerState: {} }),
-    /* @__PURE__ */ jsxs(AppliedFilterChipInfoStyled, { onClick: onEditFilter, ownerState: {}, children: [
-      /* @__PURE__ */ jsx(AppliedFilterChipInfoFieldNameStyled, { ownerState: {}, children: labels.labelField }),
-      /* @__PURE__ */ jsx(AppliedFilterChipInfoOperatorStyled, { ownerState: {}, children: labels.labelOperator }),
-      /* @__PURE__ */ jsx(AppliedFilterChipInfoOperandsStyled, { ownerState: {}, children: labels.labelOperands })
-    ] }),
-    !fixed && /* @__PURE__ */ jsx(
-      AppliedFilterChipRemoveButtonStyled,
-      {
-        src: removeIconUrl,
-        size: "small",
-        dictionaryTooltipId: "dynamic_filter.tooltip_clear_filter",
-        onClick: onDelete,
-        ownerState: {}
-      }
-    )
-  ] });
-}
-function AppliedFilters() {
-  const { appliedFiltersSorted, isSkeleton } = useAppliedFilters();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(AppliedFiltersStyled, { ownerState: {} });
-  }
-  return /* @__PURE__ */ jsx(AppliedFiltersStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx(AppliedFilterInnerContainerStyled, { ownerState: {}, children: appliedFiltersSorted?.map((filter) => /* @__PURE__ */ jsx(AppliedFilterChip, { ...filter }, filter.id)) }) }) });
-}
-const ASSETS_URL = "frontend/components/dynamic_filter/assets/icons";
-const ASSETS = {
-  refresh: "restart.svg",
-  search: "search.svg"
-};
-function useFilterActions() {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const automatic = useDynamicFilterStore((state) => state.automatic);
-  const isSkeleton = useDynamicFilterStore((state) => state.ownerState.isSkeleton);
-  const isValid = useDynamicFilterStore((state) => state.ownerState.isValid);
-  const isDirty = useDynamicFilterStore((state) => state.ownerState.isDirty);
-  const appliedFilters = useDynamicFilterStore((state) => state.appliedFilters);
-  const { hidePopoverFilter, clearFilters, fireOnChangeFilters } = useDynamicFilterStore(
-    (state) => state.actions
-  );
-  function onClickClearFilters() {
-    hidePopoverFilter(false);
-    clearFilters();
-    fireOnChangeFilters();
-  }
-  const filterIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${automatic ? ASSETS.refresh : ASSETS.search}`;
-  const clearIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close.svg`;
-  const canShowRemoveAction = appliedFilters.findIndex((f) => !f.fixed) > -1;
-  const filterButtonDictionaryTooltip = getDynamicFilterDictionary(
-    isValid ? isDirty ? DICCTIONARY.filter_tooltip_dirty : DICCTIONARY.filter_tooltip_refresh : DICCTIONARY.filter_tooltip_invalid
-  );
-  return {
-    isSkeleton,
-    filterIconUrl,
-    clearIconUrl,
-    canShowRemoveAction,
-    onClickClearFilters,
-    onClickFilter: fireOnChangeFilters,
-    filterButtonDictionaryTooltip,
-    ownerState: { isValid }
-  };
-}
-function FilterActionsSkeleton() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ActionsSkeletonButtonStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" }) }),
-    /* @__PURE__ */ jsx(ActionsSkeletonButtonStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" }) })
-  ] });
-}
-function FilterActions() {
-  const {
-    isSkeleton,
-    filterIconUrl,
-    clearIconUrl,
-    canShowRemoveAction,
-    onClickClearFilters,
-    onClickFilter,
-    filterButtonDictionaryTooltip,
-    ownerState
-  } = useFilterActions();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(ActionsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(FilterActionsSkeleton, {}) });
-  }
-  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: {}, children: [
-    canShowRemoveAction && /* @__PURE__ */ jsx(
-      ActionsClearButtonStyled,
-      {
-        src: clearIconUrl,
-        onClick: onClickClearFilters,
-        dictionaryTooltipId: "dynamic_filter.tooltip_clear_filters",
-        ownerState: {}
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ActionsSubmitButtonStyled,
-      {
-        src: filterIconUrl,
-        "aria-label": "settings",
-        dictionaryTooltipId: filterButtonDictionaryTooltip,
-        onClick: onClickFilter,
-        ownerState: { ...ownerState }
-      }
-    )
-  ] });
-}
-function usePopoverFilter() {
-  let anchorEl;
-  let field;
-  let formFilter;
-  let filterFormValue;
-  let popupValidationSchema;
-  const { getLabel } = useModuleDictionary();
-  const popoverFilterData = useDynamicFilterStore((state) => state.popoverFilterData);
-  const { hidePopoverFilter, addFilter, updateFilter, getNewId } = useDynamicFilterStore(
-    (state) => state.actions
-  );
-  const refPreviousPopoverFilterData = useRef(popoverFilterData);
-  const statusLoad = useMemo(() => {
-    let returnStatus;
-    if (popoverFilterData && refPreviousPopoverFilterData.current === void 0) {
-      returnStatus = "ready";
-    } else if (!popoverFilterData) {
-      returnStatus = "initial";
-    } else {
-      returnStatus = "reload_values_provider";
-    }
-    refPreviousPopoverFilterData.current = popoverFilterData;
-    return returnStatus;
-  }, [popoverFilterData]);
-  if (popoverFilterData?.openFor === "add") {
-    anchorEl = popoverFilterData?.fnAnchorEl();
-    field = popoverFilterData.field;
-    const helperField = fieldFactory(field.type);
-    popupValidationSchema = helperField.getSchema(getLabel);
-    filterFormValue = helperField.getFormValue(field, getLabel);
-    formFilter = {
-      field,
-      id: getNewId(),
-      isSet: true,
-      fixed: false,
-      ...filterFormValue
-    };
-  } else if (popoverFilterData) {
-    anchorEl = popoverFilterData?.fnAnchorEl();
-    field = popoverFilterData?.filter.field;
-    const helperField = fieldFactory(field.type);
-    popupValidationSchema = helperField.getSchema(getLabel);
-    filterFormValue = helperField.getFormValue(field, getLabel, popoverFilterData.filter);
-    formFilter = { ...popoverFilterData?.filter, ...filterFormValue };
-  } else {
-    filterFormValue = {};
-    field = {};
-    formFilter = {};
-    anchorEl = {};
-  }
-  const onClose = useCallback(() => {
-    hidePopoverFilter(false);
-  }, []);
-  const handleKeyDownPopper = useCallback((event) => {
-    if (event.key === "Escape") {
-      onClose();
-    }
-  }, []);
-  function handleClosePopover() {
-    hidePopoverFilter(false);
-  }
-  async function onSubmit(dataFieldValues) {
-    const filterField = { ...filterFormValue, ...dataFieldValues };
-    const newFilter = {
-      ...formFilter,
-      ...fieldFactory(filterField.fieldType).getFilterFromFormValue(filterField),
-      isSet: true
-    };
-    if (popoverFilterData?.openFor === "add") {
-      addFilter(newFilter);
-    } else {
-      updateFilter(newFilter);
-    }
-    hidePopoverFilter(false);
-  }
-  const labelField = field?.label ?? getLabel(field?.dictionaryId ?? "");
-  return {
-    field,
-    labelField,
-    canRender: Boolean(popoverFilterData),
-    anchorEl,
-    handleKeyDownPopper,
-    handleClosePopover,
-    onSubmit,
-    onClose,
-    filterFormValue,
-    formFilter,
-    popupValidationSchema,
-    statusLoad
-  };
-}
-function DataTypeComponent(props) {
-  const { formFilter, statusLoad } = props;
-  const { setFocus } = useFormContext();
-  const Component = fieldFactory(formFilter.field.type).getComponent();
-  useEffect(() => {
-    setTimeout(() => setFocus("formValueOperand1"), 100);
-  }, [statusLoad]);
-  return /* @__PURE__ */ jsx(Component, {});
-}
-function PopoverFilter() {
-  const {
-    field,
-    labelField,
-    anchorEl,
-    handleKeyDownPopper,
-    handleClosePopover,
-    onSubmit,
-    onClose,
-    filterFormValue,
-    formFilter,
-    popupValidationSchema,
-    statusLoad,
-    canRender
-  } = usePopoverFilter();
-  if (!canRender) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    PopoverStyled,
-    {
-      open: true,
-      disableRestoreFocus: true,
-      transitionDuration: 0,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      arrowType: "top-left",
-      anchorEl,
-      onKeyDown: handleKeyDownPopper,
-      onClose: handleClosePopover,
-      ownerState: {},
-      children: /* @__PURE__ */ jsxs(
-        RHFormProvider,
-        {
-          onSubmit,
-          values: filterFormValue,
-          validationSchema: popupValidationSchema,
-          statusLoad,
-          children: [
-            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: {}, children: [
-              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, ownerState: {} }),
-              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", ownerState: {}, children: labelField })
-            ] }),
-            /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formFilter, statusLoad }) }),
-            /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
-              /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
-              /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
-function DynamicFilterBase() {
-  const { ownerState, dataTestId } = useDynamicFilterBase();
-  return /* @__PURE__ */ jsx(
-    RootStyled,
-    {
-      ownerState: { ...ownerState },
-      ...getPropDataTestId(dataTestId, DynamicFilterSlots.root),
-      children: /* @__PURE__ */ jsxs(
-        InnerContainerStyled,
-        {
-          ownerState: { ...ownerState },
-          ...getPropDataTestId(dataTestId, DynamicFilterSlots.innerContainer),
-          children: [
-            /* @__PURE__ */ jsx(InputFilter$1, {}),
-            /* @__PURE__ */ jsx(AppliedFilters, {}),
-            /* @__PURE__ */ jsx(FilterActions, {}),
-            /* @__PURE__ */ jsx(PopoverFilter, {})
-          ]
-        }
-      )
-    }
-  );
-}
-export {
-  BooleanFilter as B,
-  DateTimeFilter as D,
-  NumberFilter as N,
-  StringFilter as S,
-  SelectFilter as a,
-  DynamicFilterBase as b,
-  fieldFactory as f
-};