@m4l/components 0.2.1 → 0.2.2

package/components/DataGrid/{index.d5559a4d.js → index.e93a1a31.js}

@@ -1,20 +1,20 @@
-import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.89e26413.js";
-import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.9f0a2757.js";
+import { SvgIcon, Checkbox, InputBase, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.8c4fde10.js";
+import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.c6990cd4.js";
 import { styled } from "@mui/material/styles";
 import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect } from "react";
-import { S as SELECT_COLUMN_KEY, u as useRowSelection, a as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "../../react-data-grid.d46d625e.js";
+import { u as useRowSelection, S as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "../../react-data-grid.c5377916.js";
 import { useDrag, useDrop, DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { SvgIcon, Checkbox, InputBase, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.83e2be51.js";
+import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.bcf7a8d7.js";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../vendor.f577fced.js";
-import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.22761b39.js";
+import { g as getNameDataTestId } from "../../vendor.caaaf054.js";
+import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.5379222a.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
-import { C as ConcatenatedFormatter } from "../formatters/index.5c788afa.js";
+import { C as ConcatenatedFormatter } from "../formatters/index.d0a0800d.js";
 const DataGridRoot = styled("div")(({
   theme
 }) => ({
@@ -162,8 +162,8 @@ function DataGridProvider(props) {
     rows,
     rowsCount,
     rowActionsGetter,
-    rowHeights = [28, 32, 36],
-    rowHeaderHeights = [28, 32, 36],
+    rowHeights = [36, 52, 67],
+    rowHeaderHeights = [44, 63, 75],
     initialRowHeightVariant = "compact",
     checkedRows,
     onCheckedRowsChange,
@@ -272,6 +272,9 @@ function useDataGrid() {
     throw new Error("useDataGrid context must be use inside DataGridContext");
   return context;
 }
+const DATAGRID_PREFIX_NAME = "M4LDataGrid";
+const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
+const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectGroupFormatter(props) {
@@ -338,10 +341,11 @@ const SelectColumnHeaderRenderer = (props) => {
   });
 };
 const SelectColumn = {
-  key: SELECT_COLUMN_KEY,
+  key: DATAGRID_SELECT_COLUMN_KEY,
   name: "",
   width: 60,
   maxWidth: 60,
+  isDraggable: false,
   resizable: false,
   sortable: false,
   frozen: true,
@@ -596,6 +600,7 @@ const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths
   if (hasCheckedRows) {
     filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
   }
+  console.log("filteredSortedColumns", filteredSortedColumns);
   return filteredSortedColumns;
 };
 const getAligByType = (columnType) => {
@@ -647,13 +652,15 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
   }, [sourceColumns, columnsConfig, rowActionsGetter]);
   const finalColumns = useMemo(() => {
     const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
+    console.log("*****####finalColumns", columns);
     return columns.map((c) => {
       const newColumn = {
         ...c,
         cellClass: c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`
       };
-      if (newColumn.key === SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false)
+      if (newColumn.key === DATAGRID_SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
         return newColumn;
+      }
       if (isSkeleton) {
         newColumn.headerRenderer = SkeletonFormatter;
         newColumn.formatter = SkeletonFormatter;
@@ -776,6 +783,7 @@ function Table(props) {
   const onChangeSort = (newSortColumns) => {
     setSortColumns(newSortColumns);
   };
+  console.log("Table render", finalColumns);
   return /* @__PURE__ */ jsx("div", {
     className: classes.tableContaniner,
     id: "WrapperTable",
@@ -873,6 +881,26 @@ const dataGridUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
+function ColumnInteractiveCheckFormatterColumn(props) {
+  const {
+    row,
+    onRowChange,
+    column
+  } = props;
+  const handleChange = () => {
+    const newRow = {
+      ...row
+    };
+    newRow[column.key] = !row[column.key];
+    onRowChange(newRow);
+  };
+  return /* @__PURE__ */ jsx(Checkbox, {
+    size: "small",
+    checked: row[column.key] || false,
+    onChange: handleChange,
+    className: dataGridClasses.formatterColumn
+  });
+}
 function getDataGridComponentsDictionary() {
   return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
 }
@@ -884,7 +912,6 @@ const dictionary = {
 const DATAGRID_TEST_ID = "m4ldatagrid";
 const PREFIX_TEST_ATTRIBUTE = "data-testid";
 const TEST_PROP_COLUMNS = `${PREFIX_TEST_ATTRIBUTE}-${DATAGRID_TEST_ID}-columns`;
-const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 function DataGrid(props) {
   const {
     id,
@@ -904,6 +931,7 @@ function DataGrid(props) {
     onCheckedRowsChange,
     dataTestId = ""
   } = props;
+  console.log("test columns", columns);
   const ownerState = {
     actionsProps,
     withActions
@@ -1031,15 +1059,16 @@ const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
   return rowsFinded;
 };
 export {
-  DataGridRoot as D,
+  ColumnInteractiveCheckFormatterColumn as C,
+  DATAGRID_ACTIONS_COLUMN_KEY as D,
   useFilters as a,
-  dictionary as b,
+  DataGridRoot as b,
   DataGrid as c,
-  dataGridClasses as d,
-  getDataGridRowsFromSet as e,
-  columnBooleanFormatter as f,
+  dictionary as d,
+  columnDateFormatter as e,
+  getDataGridRowsFromSet as f,
   getDataGridComponentsDictionary as g,
-  columnDateFormatter as h,
+  columnBooleanFormatter as h,
   columnConcatenatedValuesFormatter as i,
   useDataGrid as u
 };

package/components/DataGrid/subcomponents/Actions/{index.83e2be51.js → index.bcf7a8d7.js}

@@ -1,20 +1,19 @@
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.e146c11b.js";
-import { u as useDataGrid, a as useFilters, d as dataGridClasses, D as DataGridRoot, b as dictionary } from "../../index.d5559a4d.js";
-import { useTheme, Checkbox, Skeleton } from "@mui/material";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.04d87c36.js";
+import { D as DATAGRID_ACTIONS_COLUMN_KEY, u as useDataGrid, a as useFilters, C as ColumnInteractiveCheckFormatterColumn, b as DataGridRoot, d as dictionary } from "../../index.e93a1a31.js";
+import { useTheme, Skeleton } from "@mui/material";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { P as Pager } from "../../../mui_extended/Pager/index.9f0a2757.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.f42fa68d.js";
+import { P as Pager } from "../../../mui_extended/Pager/index.c6990cd4.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.df52ae90.js";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect, useCallback } from "react";
-import { D as DataGrid$1 } from "../../../../react-data-grid.d46d625e.js";
+import { D as DataGrid$1 } from "../../../../react-data-grid.c5377916.js";
 import { styled } from "@mui/material/styles";
-import { u as useModal } from "../../../../hooks/useModal/index.abdc0962.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.bec75bdf.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.e0150cfc.js";
+import { u as useModal } from "../../../../hooks/useModal/index.b4b84d5d.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.6aa59730.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.33acdebb.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { W as WindowBase } from "../../../modal/WindowBase.444849a3.js";
-import { A as Actions$1 } from "../../../CommonActions/components/Actions/index.2f6286eb.js";
-const ACTIONS_COLUMN_KEY = "actions-row";
+import { W as WindowBase } from "../../../modal/WindowBase.38d4b8e7.js";
+import { A as Actions$1 } from "../../../CommonActions/components/Actions/index.f358ae72.js";
 function ActionsFormatter(props) {
   const {
     rowActionsGetter,
@@ -43,9 +42,10 @@ function ActionsFormatter(props) {
   });
 }
 const ActionsColumn = {
-  key: ACTIONS_COLUMN_KEY,
+  key: DATAGRID_ACTIONS_COLUMN_KEY,
   name: getActionLabel(),
   width: 60,
+  isDraggable: false,
   withFilter: false,
   resizable: true,
   sortable: false,
@@ -122,26 +122,6 @@ styled("div")(({ theme }) => ({
     marginLeft: "10px"
   }
 }));
-function FormatterColumn(props) {
-  const {
-    row,
-    onRowChange,
-    column
-  } = props;
-  const handleChange = () => {
-    const newRow = {
-      ...row
-    };
-    newRow[column.key] = !row[column.key];
-    onRowChange(newRow);
-  };
-  return /* @__PURE__ */ jsx(Checkbox, {
-    size: "small",
-    checked: row[column.key],
-    onChange: handleChange,
-    className: dataGridClasses.formatterColumn
-  });
-}
 function getRowsFromColumnsConfig(columnsConfig) {
   return columnsConfig.filter((column) => !column.hidden).map((column) => ({
     key: column.key,
@@ -193,14 +173,14 @@ const ColumnsConfig = forwardRef((props, ref) => {
     name: getLabel("data_grid.settings_column_visible"),
     width: 80,
     type: "boolean",
-    formatter: FormatterColumn,
+    formatter: ColumnInteractiveCheckFormatterColumn,
     cellClass: "rdg-cell-align-center"
   }, {
     key: "frozen",
     name: getLabel("data_grid.settings_column_frozen"),
     width: 80,
     type: "boolean",
-    formatter: FormatterColumn,
+    formatter: ColumnInteractiveCheckFormatterColumn,
     cellClass: "rdg-cell-align-center"
   }], [getLabel]);
   const checkAll = () => {

package/components/DataGrid/subcomponents/Actions/index.d.ts

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

package/components/DataGrid/subcomponents/Actions/subcomponents/Density/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function Density(): import("react").JSX.Element;
+export declare function Density(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Actions/subcomponents/Filter/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function Filter(): import("react").JSX.Element;
+export declare function Filter(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Actions/subcomponents/RowsCount/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function RowsCount(): import("react").JSX.Element;
+export declare function RowsCount(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Actions/subcomponents/Settings/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function Settings(): import("react").JSX.Element;
+export declare function Settings(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Table/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { GridProps } from '../../types';
-export declare function Table<TRow, TSummaryRow>(props: GridProps<TRow, TSummaryRow>): import("react").JSX.Element;
+import { GridProps, RowKey } from '../../types';
+export declare function Table<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Table/subcomponents/CustomIcons.d.ts

@@ -1,15 +1,14 @@
-/// <reference types="react" />
 import { SvgIconProps } from '@mui/material';
-export declare function CloseIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function StarIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function InfoIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function WarningIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function SuccessIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function ErrorIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function CheckboxIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function CheckboxCheckedIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function CheckboxIndeterminateIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function InputSelectIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function TreeViewCollapseIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function TreeViewExpandIcon(props: SvgIconProps): import("react").JSX.Element;
-export declare function TreeViewEndIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function CloseIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function StarIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function InfoIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function WarningIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function SuccessIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxCheckedIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxIndeterminateIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputSelectIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeViewCollapseIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeViewExpandIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeViewEndIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function SkeletonFormatter(): import("react").JSX.Element;
+export declare function SkeletonFormatter(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/types.d.ts

@@ -40,11 +40,8 @@ export declare interface PagerState {
 export declare const initialPagerState: PagerState;
 export declare type RowHeightVariants = 'standard' | 'compact' | 'confortable';
 export declare type RowHeights = number | number[];
-export interface GridProps<TRow, TSummaryRow> {
-    /**
-    * Define el tipo de dato que puede tener un identificador key en el grid.
-    */
-    id: RowKey;
+export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
+    id: string;
     withActions?: boolean;
     columns: readonly Column<TRow, TSummaryRow>[];
     rows: TRow[];
@@ -52,17 +49,17 @@ export interface GridProps<TRow, TSummaryRow> {
     rowHeaderHeights?: RowHeights;
     rowHeights?: RowHeights;
     rowActionsGetter?: (row: TRow) => MenuAction[];
-    rowKeyGetter: (row: TRow) => RowKey;
-    selectedRows?: ReadonlySet<RowKey>;
-    onSelectedRowsChange?: (mapRowsSelected: ReadonlySet<RowKey>) => void;
-    checkedRows?: ReadonlySet<RowKey>;
-    onCheckedRowsChange?: (mapRowsSelected: ReadonlySet<RowKey>) => void;
+    rowKeyGetter: (row: TRow) => TKey;
+    selectedRows?: ReadonlySet<TKey>;
+    onSelectedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
+    checkedRows?: ReadonlySet<TKey>;
+    onCheckedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, TSummaryRow>) => void>;
 }
 export declare const DATAGRID_TEST_ID = "m4ldatagrid";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
 export declare const TEST_PROP_COLUMNS: string;
-export declare interface DataGridProps<TRow, TSummaryRow> extends GridProps<TRow, TSummaryRow> {
+export declare interface DataGridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends GridProps<TRow, TSummaryRow, TKey> {
     actionsProps: ActionsProps;
     dataTestId?: string;
 }

package/components/DraggableWindow/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DraggableWindowProps } from './types';
-export declare const DraggableWindow: (props: DraggableWindowProps) => import("react").JSX.Element;
+export declare const DraggableWindow: (props: DraggableWindowProps) => import("react/jsx-runtime").JSX.Element;
 export default DraggableWindow;

package/components/DraggableWindow/{index.f9f067bd.js → index.ddc7327b.js}

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { c as cjs } from "../../react-draggable.ee21cb7e.js";
+import { c as cjs } from "../../react-draggable.cdce362f.js";
 import { jsx } from "react/jsx-runtime";
 const DraggableWindow = (props) => {
   const {

package/components/DynamicFilter/DynamicFilter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { DynamicFilterProps } from './types';
 /**
  * @description Punto de entrada del componente
@@ -6,4 +5,4 @@ import type { DynamicFilterProps } from './types';
  * @param inProps
  * @returns
  */
-export declare const DynamicFilter: (inProps: DynamicFilterProps) => import("react").JSX.Element | null;
+export declare const DynamicFilter: (inProps: DynamicFilterProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/DynamicFilter/classes/index.d.ts

@@ -1,5 +1,5 @@
 import { DynamicFilterClasses } from './types';
 import { OwnerState } from '../contexts/DynamicFilterContext/store';
 export declare const dynamicFilterClasses: DynamicFilterClasses;
-export declare const useUtilityClasses: (ownerState: OwnerState) => Record<"root" | "containerFistRow" | "filterButton" | "containerInputFilter" | "wrapperApplyedFilters" | "containerApplyedFilters" | "containerClearFilter" | "applyedFilter" | "clearFiltersButton" | "popoverMenuFields" | "popoverMenuFieldsPaper" | "popoverMenuFieldsItem" | "classesFilterButton" | "popoverFilter" | "popoverFilterPaper" | "popoverFilterHeader" | "popoverHeaderTitle" | "containerBooleanFilter" | "containerDateTimeFilter" | "containerNumberFilter" | "containerStringFilter" | "classespopoverLabelMemuItem" | "popoverContainerFields" | "inputFilter", string>;
+export declare const useUtilityClasses: (ownerState: OwnerState) => Record<"root" | "containerFistRow" | "filterButton" | "containerInputFilter" | "wrapperApplyedFilters" | "containerApplyedFilters" | "containerClearFilter" | "applyedFilter" | "clearFiltersButton" | "popoverMenuFields" | "popoverMenuFieldsPaper" | "popoverMenuFieldsItem" | "classesFilterButton" | "popoverFilter" | "popoverFilterPaper" | "popoverFilterHeader" | "popoverHeaderTitle" | "containerBooleanFilter" | "containerDateTimeFilter" | "containerNumberFilter" | "containerStringFilter" | "classespopoverLabelMemuItem" | "popoverContainerFields", string>;
 export declare type Classes = ReturnType<typeof useUtilityClasses>;

package/components/DynamicFilter/classes/types.d.ts

@@ -22,7 +22,6 @@ export interface DynamicFilterClasses {
     containerStringFilter: string;
     classespopoverLabelMemuItem: string;
     popoverContainerFields: string;
-    inputFilter: string;
     isSkeleton: string;
     inEdition: string;
     isInvalid: string;

package/components/DynamicFilter/contexts/DynamicFilterContext/index.d.ts

@@ -18,5 +18,5 @@ declare const DynamicFilterContext: import("react").Context<(Omit<Omit<import("z
  * @param props DynamicFilterProviderProps
  * @returns Proveedor de contexto, y el contexto
  */
-declare function DynamicFilterProvider(props: DynamicFilterProviderProps): import("react").JSX.Element;
+declare function DynamicFilterProvider(props: DynamicFilterProviderProps): import("react/jsx-runtime").JSX.Element;
 export { DynamicFilterProvider, DynamicFilterContext };

package/components/DynamicFilter/{index.e275fed2.js → index.6663cc83.js}

@@ -3,30 +3,30 @@ import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent
 import { useStore, createStore } from "zustand";
 import { generateUtilityClasses, alpha, styled as styled$1, Skeleton, MenuItem } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.de903261.js";
+import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.b22c4c1a.js";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.2f6286eb.js";
-import { g as getRHFAutocompleteComponentsDictionary, R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.f7145ff4.js";
-import { g as getNameDataTestId } from "../../vendor.f577fced.js";
+import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.f358ae72.js";
+import { g as getRHFAutocompleteComponentsDictionary, R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.09ff3d84.js";
+import { g as getNameDataTestId } from "../../vendor.caaaf054.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useFormContext, useWatch } from "react-hook-form";
 import { shallow } from "zustand/shallow";
-import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.30d6deb9.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.2f73c117.js";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.2b76899e.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.f546c18a.js";
 import * as Yup from "yup";
 import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
 import { styled, useTheme } from "@mui/material/styles";
-import { S as ScrollBar } from "../ScrollBar/index.010f1b9d.js";
+import { S as ScrollBar } from "../ScrollBar/index.65bb2930.js";
 import clsx from "clsx";
-import { I as IconButton } from "../mui_extended/IconButton/index.f42fa68d.js";
-import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.e146c11b.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.df52ae90.js";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.04d87c36.js";
 import { P as Popover } from "../mui_extended/Popover/index.b3eca6b1.js";
-import { I as Icon } from "../Icon/index.3e559a61.js";
-import { R as RHFormProvider } from "../../contexts/RHFormContext/index.1755b324.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.bec75bdf.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.e0150cfc.js";
+import { I as Icon } from "../Icon/index.6db034b5.js";
+import { R as RHFormProvider } from "../../contexts/RHFormContext/index.7769076a.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.6aa59730.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.33acdebb.js";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
 const COMPONENT_PREFIX = "M4LDynamicFilter";
 const COMPONENT_CLASS_NAME = "M4LDynamicFilter";
@@ -79,7 +79,6 @@ const dynamicFilterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "classespopoverLabelMemuItem",
   "popoverContainerFields",
   "classesFilterButton",
-  "inputFilter",
   "isSkeleton",
   "isMobile",
   "inEdition",
@@ -112,8 +111,7 @@ const useUtilityClasses = (ownerState) => {
     containerBooleanFilter: ["containerBooleanFilter"],
     containerDateTimeFilter: ["containerDateTimeFilter"],
     containerNumberFilter: ["containerNumberFilter"],
-    containerStringFilter: ["containerStringFilter"],
-    inputFilter: ["inputFilter"]
+    containerStringFilter: ["containerStringFilter"]
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(COMPONENT_CLASS_NAME), {});
 };
@@ -1463,7 +1461,6 @@ function InputFilter() {
   const availableFields = useDynamicFilter((state) => state.availableFields, shallow);
   const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesContainerInputFilter = useDynamicFilter((state) => state.classes.containerInputFilter, shallow);
-  const classesInputFilter = useDynamicFilter((state) => state.classes.inputFilter, shallow);
   const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton, shallow);
   const {
     showPopoverFilterForAdd,
@@ -1574,7 +1571,6 @@ function InputFilter() {
         value: inputData,
         placeholder: getLabel(getDynamicFilterDictionary(DICCTIONARY.input_placeholder)),
         onFocus: onFocusInputFilter,
-        className: classesInputFilter,
         onChange: onChangeInputFilter,
         onKeyDown: handleKeyDown
       })]

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

@@ -1,7 +1,6 @@
-/// <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(): import("react").JSX.Element;
+export declare function ApplyedFilters(): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

@@ -1,4 +1,3 @@
-/// <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
@@ -9,4 +8,4 @@
  *                    * El tooltip debe ser de actualizar
  * @returns JSX
  */
-export declare function FilterButton(): import("react").JSX.Element;
+export declare function FilterButton(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,5 @@
-/// <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: () => import("react").JSX.Element;
+export declare const InnerForHooks: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,7 @@
-/// <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(): import("react").JSX.Element | null;
+export declare function InputFilter(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @description
  * Subcomponente encargado de permitir agregar o modificar un filtro.
@@ -12,4 +11,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: () => import("react").JSX.Element | null;
+export declare const PopoverFilter: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PopoverMenuFieldsProps } from './types';
 /**
  * @description Subcomponente encargado de mostrar los campos disponibles don el esuario selecciona uno en especifico
@@ -9,4 +8,4 @@ import { PopoverMenuFieldsProps } from './types';
  *              fields: Field[]:  Listado de campos disponibles
  * @returns
  */
-export declare function PopoverMenuFields(props: PopoverMenuFieldsProps): import("react").JSX.Element;
+export declare function PopoverMenuFields(props: PopoverMenuFieldsProps): import("react/jsx-runtime").JSX.Element;

package/components/DynamicFilter/subcomponents/fieldstypes/BooleanFilter/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 /**
  * @description Subcomponente encargado de los filtros con el tipo de dato "boolean"
  * @returns
  */
-export declare function BooleanFilter(): import("react").JSX.Element;
+export declare function BooleanFilter(): import("react/jsx-runtime").JSX.Element;

package/components/DynamicFilter/subcomponents/fieldstypes/DateTimeFilter/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 /**
  * @description Subcomponente encargado de los filtros con el tipo de dato "datetime"
  * @returns JSX
  */
-export declare function DateTimeFilter(): import("react").JSX.Element;
+export declare function DateTimeFilter(): import("react/jsx-runtime").JSX.Element;

package/components/DynamicFilter/subcomponents/fieldstypes/NumberFilter/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 /**
  * @description Subcomponente encargado de los filtros con el tipo de dato "number"
  * @returns JSX
  */
-export declare function NumberFilter(): import("react").JSX.Element;
+export declare function NumberFilter(): import("react/jsx-runtime").JSX.Element;

package/components/DynamicFilter/subcomponents/fieldstypes/StringFilter/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 /**
  * @description Subcomponente encargado de los filtros con el tipo de dato "string"
  * @returns JSX
  */
-export declare function StringFilter(): import("react").JSX.Element;
+export declare function StringFilter(): import("react/jsx-runtime").JSX.Element;

package/components/DynamicFilter/subcomponents/fieldstypes/factory.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GetLabelType } from '@m4l/core';
 import { Formatters } from '@m4l/graphics';
 import type { FilterFieldApplyed, Field, DataTypeFilerLabels, FilterValue, FormFilterValue, FormFilterFieldApplyed } from '../../types';
@@ -13,7 +12,7 @@ import { FormStatusLoad } from '../../../../contexts';
 export declare const DataTypeComponent: (props: {
     formFilter: FormFilterFieldApplyed;
     statusLoad: FormStatusLoad;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * @description Funciona encargada de devolver los labels necesarios para visualizar un filtro
  * @param field Campo del filtro aplicado