@m4l/components 9.2.38 → 9.2.39

package/components/Chip/Chip.js

@@ -3,6 +3,7 @@ import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import clsx from "clsx";
 import { forwardRef, useMemo } from "react";
 import { C as CHIP_CLASSES } from "./constants.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 import { I as IconStyled, S as SkeletonChipStyled, C as ChipRootStyled, T as TextChipStyled, a as IconButtonStyled } from "./slots/ChipSlots.js";
 const Chip = forwardRef((props, ref) => {
@@ -20,6 +21,7 @@ const Chip = forwardRef((props, ref) => {
     onDeleted,
     iconButtonProps,
     className,
+    dataTestId,
     ...others
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -77,6 +79,7 @@ const Chip = forwardRef((props, ref) => {
       ownerState: { ...ownerState },
       className: clsx(className, CHIP_CLASSES.root),
       ref,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: dataTestId } : {},
       ...onClick ? { tabIndex: 0 } : {},
       ...others,
       children: [

package/components/Chip/types.d.ts

@@ -69,6 +69,10 @@ export interface ChipProps {
      * If the `Chip` is focusable.
      */
     focusable?: boolean;
+    /**
+     * Test id for the `Chip`.
+     */
+    dataTestId?: string;
 }
 /**
  * Owner state of the `Chip` used to define internal style and behavior properties.

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

@@ -1,16 +1,17 @@
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { useFormatter } from "@m4l/graphics";
 import { getPropertyByString } from "@m4l/core";
 import { deepEqual } from "fast-equals";
 import { g as getFormatPrice } from "../../../formatters/PriceFormatter/PriceFormatter.js";
 import { g as getColumnKey } from "../../helpers/getColumnKey.js";
 import { C as ColumnPriceFormatter } from "./formatter.js";
-const getCustomPriceFilter = (props) => {
+const useCustomPriceFilter = (props) => {
   const { currencyFormatter } = useFormatter();
-  return (row, value) => {
+  const customFilter = useCallback((row, value) => {
     const fieldValue = getColumnKey(props.fieldValue);
     return getFormatPrice(row, fieldValue, currencyFormatter.code, currencyFormatter.decimalDigits).includes(value);
-  };
+  }, [props.fieldValue, currencyFormatter]);
+  return customFilter;
 };
 const getCustomPriceSort = (props) => {
   return (a, b) => {
@@ -41,6 +42,7 @@ const getCustomPriceSort = (props) => {
 const useColumnPrice = (props) => {
   const [stateProps, setStateProps] = useState(props);
   const refProps = useRef({ ...props });
+  const customFilter = useCustomPriceFilter(stateProps);
   useEffect(() => {
     if (!deepEqual(refProps.current, props)) {
       refProps.current = props;
@@ -49,9 +51,9 @@ const useColumnPrice = (props) => {
   }, [props]);
   return useMemo(() => ({
     formatter: ColumnPriceFormatter(stateProps),
-    customFilter: getCustomPriceFilter(stateProps),
+    customFilter,
     customSort: getCustomPriceSort(stateProps)
-  }), [stateProps]);
+  }), [stateProps, customFilter]);
 };
 export {
   useColumnPrice as u

package/components/MenuActions/MenuActions.js

@@ -139,7 +139,6 @@ function MenuActions(props) {
         className: iconButtonClassName,
         selected: open,
         disabled,
-        componentPaletteColor: "default",
         badgeContent,
         "aria-label": "menu-actions"
       }

package/components/Pager/subcomponents/PagerActions/PagerActions.js

@@ -29,7 +29,6 @@ function PagerActions(props) {
       IconButton,
       {
         size,
-        dictionaryTooltipId: "pager.first",
         onClick: handleFirstPageButtonClick,
         disabled: page === 0,
         "aria-label": "first page",
@@ -40,7 +39,6 @@ function PagerActions(props) {
       IconButton,
       {
         size,
-        dictionaryTooltipId: "pager.previous",
         onClick: handleBackButtonClick,
         disabled: page === 0,
         "aria-label": "first page",
@@ -51,7 +49,6 @@ function PagerActions(props) {
       IconButton,
       {
         size,
-        dictionaryTooltipId: "pager.next",
         onClick: handleNextButtonClick,
         disabled: page >= Math.ceil(count / rowsPerPage) - 1,
         "aria-label": "next page",
@@ -62,7 +59,6 @@ function PagerActions(props) {
       IconButton,
       {
         size,
-        dictionaryTooltipId: "pager.last",
         onClick: handleLastPageButtonClick,
         disabled: page >= Math.ceil(count / rowsPerPage) - 1,
         "aria-label": "last page",

package/components/formatters/ChipStatusFormatter/ChipStatusFormatter.js

@@ -28,7 +28,7 @@ const ChipStatusFormatter = (props) => {
       color,
       opacity,
       size: adjustedSize,
-      dataTestid
+      dataTestId: dataTestid
     }
   ) });
 };

package/components/mui_extended/IconButton/types.d.ts

@@ -15,7 +15,10 @@ export type IconButtonSize = 'small' | 'medium';
 export interface IconButtonProps extends Omit<IconProps, 'size' | 'color' | 'src' | 'selected' | 'enabledSelected'>, Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled' | 'src'>, Pick<BadgeProps, 'badgeContent'>, Pick<TooltipProps, 'placement'> {
     /** Define el uso de tooltip en IconButton */
     tooltip?: string;
-    /** Representa la identificación del tooltip en el diccionario para que designe internamente el getLabel */
+    /**
+     * @deprecated
+     * Representa la identificación del tooltip en el diccionario para que designe internamente el getLabel
+     */
     dictionaryTooltipId?: string;
     /** Variante del componente, modifica la apariencia gráfica */
     variant?: IconButtonVariants;

package/package.json

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