@m4l/components 9.2.10 → 9.2.11

package/components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js

@@ -1,6 +1,8 @@
 import { g as getFormatBoolean } from "../../../formatters/BooleanFormatter/BooleanFormatter.js";
 import { C as ColumnBooleanFormatter } from "./index.js";
 import { useModuleDictionary, getPropertyByString } from "@m4l/core";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { deepEqual } from "fast-equals";
 const getCustomBooleanFilter = (props, getLabel) => {
   return (row, value) => {
     const valueMaybeString = getPropertyByString(row, props.fieldValue);
@@ -54,11 +56,19 @@ const getCustomBooleanSort = (props, getLabel) => {
 };
 const useColumnBoolean = (props) => {
   const { getLabel } = useModuleDictionary();
-  return {
-    formatter: ColumnBooleanFormatter(props),
-    customFilter: getCustomBooleanFilter(props, getLabel),
-    customSort: getCustomBooleanSort(props, getLabel)
-  };
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(() => ({
+    formatter: ColumnBooleanFormatter(stateProps),
+    customFilter: getCustomBooleanFilter(stateProps, getLabel),
+    customSort: getCustomBooleanSort(stateProps, getLabel)
+  }), [stateProps, getLabel]);
 };
 export {
   useColumnBoolean as u

package/components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatusFormatter.js

@@ -1,6 +1,8 @@
 import { getPropertyByString } from "@m4l/core";
 import { C as ColumnChipStatusFormatter } from "./ColumnChipStatusFormatter.js";
 import { g as getColumnKey } from "../../helpers/getColumnKey.js";
+import { deepEqual } from "fast-equals";
+import { useState, useRef, useEffect, useMemo } from "react";
 const getCustomChipStatusFilter = (props) => {
   const { uriLabel } = props;
   return (row, value) => {
@@ -16,11 +18,19 @@ const getCustomChipStatusSort = (props) => {
   };
 };
 const useColumnChipStatus = (props) => {
-  return {
-    formatter: ColumnChipStatusFormatter(props),
-    customFilter: getCustomChipStatusFilter(props),
-    customSort: getCustomChipStatusSort(props)
-  };
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(() => ({
+    formatter: ColumnChipStatusFormatter(stateProps),
+    customFilter: getCustomChipStatusFilter(stateProps),
+    customSort: getCustomChipStatusSort(stateProps)
+  }), [stateProps]);
 };
 export {
   useColumnChipStatus as u

package/components/DataGrid/formatters/ColumnConcatenatedValueFormatter/useColumnConcatenatedValue.js

@@ -1,7 +1,9 @@
 import { getPropertyByString } from "@m4l/core";
+import { deepEqual } from "fast-equals";
 import { C as ColumnConcatenatedValueFormatter } from "./index.js";
 import { g as getColumnKey } from "../../helpers/getColumnKey.js";
 import { g as getFormatConcatenated } from "../../../formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
+import { useState, useRef, useEffect, useMemo } from "react";
 const getArrayValuesWithFieldValue = (row, fieldValue) => {
   const values = fieldValue.map((element) => {
     const keyWiouthRow = getColumnKey(element);
@@ -38,11 +40,19 @@ const getCustomConcatenatedValueSort = (props) => {
   };
 };
 const useColumnConcatenatedValue = (props) => {
-  return {
-    formatter: ColumnConcatenatedValueFormatter(props),
-    customFilter: getCustomContatenatedValueFilter(props),
-    customSort: getCustomConcatenatedValueSort(props)
-  };
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(() => ({
+    formatter: ColumnConcatenatedValueFormatter(stateProps),
+    customFilter: getCustomContatenatedValueFilter(stateProps),
+    customSort: getCustomConcatenatedValueSort(stateProps)
+  }), [stateProps]);
 };
 export {
   useColumnConcatenatedValue as u

package/components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js

@@ -4,9 +4,11 @@ import { C as ColumnDateFormatter } from "./index.js";
 import { g as getColumnKey } from "../../helpers/getColumnKey.js";
 import { useFormatter } from "@m4l/graphics";
 import { g as getValidDate } from "../../../../utils/getValidDate.js";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { deepEqual } from "fast-equals";
 const useCustomDateFilter = (props) => {
   const { dateFormatter } = useFormatter();
-  return (row, value) => {
+  const ret = useCallback((row, value) => {
     const fieldValue = getColumnKey(props.fieldValue);
     const rawValue = getPropertyByString(row, fieldValue);
     let dateValue = null;
@@ -20,7 +22,8 @@ const useCustomDateFilter = (props) => {
     }
     const formattedDate = getFormatDate(props.presentationType, dateValue, dateFormatter, props.format);
     return formattedDate.includes(value);
-  };
+  }, [props.presentationType, props.format, dateFormatter]);
+  return ret;
 };
 const getCustomDateSort = (props) => {
   return (a, b) => {
@@ -42,12 +45,20 @@ const getCustomDateSort = (props) => {
   };
 };
 const useColumnDate = (props) => {
-  const customFilter = useCustomDateFilter(props);
-  return {
-    formatter: ColumnDateFormatter(props),
+  const [stateProps, setStateProps] = useState(props);
+  const customFilter = useCustomDateFilter(stateProps);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(() => ({
+    formatter: ColumnDateFormatter(stateProps),
     customFilter,
-    customSort: getCustomDateSort(props)
-  };
+    customSort: getCustomDateSort(stateProps)
+  }), [stateProps, customFilter]);
 };
 export {
   useColumnDate as u

package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.d.ts

@@ -7,6 +7,6 @@ import { ColumnInteractiveCheckFormatterProps } from './types';
  */
 export declare const useColumnInteractiveCheck: <TRow>(props: ColumnInteractiveCheckFormatterProps<TRow>) => {
     formatter: import("react/jsx-runtime").JSX.Element;
-    filter: (row: TRow, value: boolean) => boolean;
+    customFilter: (row: TRow, value: boolean) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js

@@ -1,3 +1,5 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { deepEqual } from "fast-equals";
 import { C as ColumnInteractiveCheckFormatter } from "./index.js";
 const getCustomInteractiveCheckFilter = (props) => {
   return (row, value) => {
@@ -18,11 +20,19 @@ const getCustomInteractiveCheckSort = (props) => {
   };
 };
 const useColumnInteractiveCheck = (props) => {
-  return {
-    formatter: ColumnInteractiveCheckFormatter(props),
-    filter: getCustomInteractiveCheckFilter(props),
-    customSort: getCustomInteractiveCheckSort(props)
-  };
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(() => ({
+    formatter: ColumnInteractiveCheckFormatter(stateProps),
+    customFilter: getCustomInteractiveCheckFilter(stateProps),
+    customSort: getCustomInteractiveCheckSort(stateProps)
+  }), [stateProps]);
 };
 export {
   useColumnInteractiveCheck as u

package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js

@@ -1,5 +1,7 @@
 import { getPropertyByString } from "@m4l/core";
 import { C as ColumnNestedValueFormatter } from "./index.js";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { deepEqual } from "fast-equals";
 const getCustomNestedValueFilter = (props) => {
   return (row, value) => {
     const property = getPropertyByString(row, props.fieldValue) ?? "";
@@ -26,11 +28,19 @@ const getCustomNestedValueSort = (props) => {
   };
 };
 const useColumnNestedValue = (props) => {
-  return {
-    formatter: ColumnNestedValueFormatter(props),
-    customFilter: getCustomNestedValueFilter(props),
-    customSort: getCustomNestedValueSort(props)
-  };
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(() => ({
+    formatter: ColumnNestedValueFormatter(stateProps),
+    customFilter: getCustomNestedValueFilter(stateProps),
+    customSort: getCustomNestedValueSort(stateProps)
+  }), [stateProps]);
 };
 export {
   useColumnNestedValue as u

package/components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js

@@ -1,3 +1,5 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { deepEqual } from "fast-equals";
 import { C as ColumnPointsFormatter } from "./index.js";
 import { g as getColumnKey } from "../../helpers/getColumnKey.js";
 import { g as getFormatPoints } from "../../../formatters/PointsFormatter/PointsFormatter.js";
@@ -24,11 +26,19 @@ const getCustomPointsSort = (props) => {
   };
 };
 const useColumnPoints = (props) => {
-  return {
-    formatter: ColumnPointsFormatter(props),
-    customFilter: getCustomPointsFilter(props),
-    customSort: getCustomPointsSort(props)
-  };
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(() => ({
+    formatter: ColumnPointsFormatter(stateProps),
+    customFilter: getCustomPointsFilter(stateProps),
+    customSort: getCustomPointsSort(stateProps)
+  }), [stateProps]);
 };
 export {
   useColumnPoints as u

package/components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js

@@ -1,8 +1,10 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { useFormatter } from "@m4l/graphics";
 import { getPropertyByString } from "@m4l/core";
-import { C as ColumnPriceFormatter } from "./index.js";
-import { g as getColumnKey } from "../../helpers/getColumnKey.js";
+import { deepEqual } from "fast-equals";
 import { g as getFormatPrice } from "../../../formatters/PriceFormatter/PriceFormatter.js";
-import { useFormatter } from "@m4l/graphics";
+import { g as getColumnKey } from "../../helpers/getColumnKey.js";
+import { C as ColumnPriceFormatter } from "./index.js";
 const getCustomPriceFilter = (props) => {
   const { currencyFormatter } = useFormatter();
   return (row, value) => {
@@ -37,11 +39,19 @@ const getCustomPriceSort = (props) => {
   };
 };
 const useColumnPrice = (props) => {
-  return {
-    formatter: ColumnPriceFormatter(props),
-    customFilter: getCustomPriceFilter(props),
-    customSort: getCustomPriceSort(props)
-  };
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(() => ({
+    formatter: ColumnPriceFormatter(stateProps),
+    customFilter: getCustomPriceFilter(stateProps),
+    customSort: getCustomPriceSort(stateProps)
+  }), [stateProps]);
 };
 export {
   useColumnPrice as u

package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.d.ts

@@ -1,5 +1,5 @@
-import { ColumnSetCheckFormatterProps } from './types';
 import { RowKey } from '../../types';
+import { ColumnSetCheckFormatterProps } from './types';
 /**
  * Funcion helper que retorna el formatter, customFilter y customSort
  * de la columna de selección de elementos.

package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js

@@ -1,5 +1,7 @@
-import { C as ColumnSetCheckFormatter } from "./index.js";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { getPropertyByString } from "@m4l/core";
+import { deepEqual } from "fast-equals";
+import { C as ColumnSetCheckFormatter } from "./index.js";
 const getCustomFilter = (props) => {
   return (row, value) => {
     const valueCheck = getPropertyByString(row, props.field);
@@ -21,11 +23,19 @@ const getCustomSort = (props) => {
   };
 };
 const useColumnSetCheck = (props) => {
-  return {
-    formatter: ColumnSetCheckFormatter(props),
-    customFilter: getCustomFilter(props),
-    customSort: getCustomSort(props)
-  };
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(() => ({
+    formatter: ColumnSetCheckFormatter(stateProps),
+    customFilter: getCustomFilter(stateProps),
+    customSort: getCustomSort(stateProps)
+  }), [stateProps]);
 };
 export {
   useColumnSetCheck as u

package/components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js

@@ -1,6 +1,8 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { deepEqual } from "fast-equals";
 import { g as getUncertaintyFormat } from "../../../formatters/UncertaintyFormatter/UncertaintyFormatter.js";
-import { C as ColumnUncertaintyFormatter } from "./index.js";
 import { g as getColumnKey } from "../../helpers/getColumnKey.js";
+import { C as ColumnUncertaintyFormatter } from "./index.js";
 const getCustomUncertaintyFilter = (props) => {
   return (row, value) => {
     const fieldValue = getColumnKey(props.fieldValue);
@@ -32,11 +34,19 @@ const getCustomUncertaintySort = (props) => {
   };
 };
 const useColumnCertanity = (props) => {
-  return {
-    formatter: ColumnUncertaintyFormatter(props),
-    customFilter: getCustomUncertaintyFilter(props),
-    customSort: getCustomUncertaintySort(props)
-  };
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(() => ({
+    formatter: ColumnUncertaintyFormatter(stateProps),
+    customFilter: getCustomUncertaintyFilter(stateProps),
+    customSort: getCustomUncertaintySort(stateProps)
+  }), [stateProps]);
 };
 export {
   useColumnCertanity as u

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.10",
+  "version": "9.2.11",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"