@m4l/components 9.2.51 → 9.2.53

package/.storybook/test-utils/index.d.ts

@@ -0,0 +1 @@
+export * from './waitForHelpers';

package/.storybook/test-utils/waitForHelpers.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Espera a que el componente esté completamente renderizado verificando la presencia de elementos críticos.
+ */
+export declare const waitForComponentReady: (document: Document) => Promise<void>;

package/.storybook/utils/getStylesColorsByMode.d.ts

@@ -53,6 +53,8 @@ export declare const colorsLight: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
+        readonly base: string;
+        readonly blur: string;
         readonly paper: "#000";
     };
     readonly chips: {
@@ -62,35 +64,40 @@ export declare const colorsLight: {
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
+        readonly dens: string;
         readonly default: string;
         readonly secondary: string;
-        readonly dens: string;
         readonly disabled: string;
         readonly error: string;
     };
@@ -238,6 +245,8 @@ export declare const colorsLight: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
+        readonly base: string;
+        readonly blur: string;
         readonly paper: "#000";
     };
     readonly chips: {
@@ -247,35 +256,40 @@ export declare const colorsLight: {
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
-        readonly default: string;
-        readonly secondary: string;
         readonly dens: string;
+        readonly default: string | undefined;
+        readonly secondary: string;
         readonly disabled: string;
         readonly error: string;
     };
@@ -424,6 +438,8 @@ export declare const colorsDark: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
+        readonly base: string;
+        readonly blur: string;
         readonly paper: "#000";
     };
     readonly chips: {
@@ -433,35 +449,40 @@ export declare const colorsDark: {
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
+        readonly dens: string;
         readonly default: string;
         readonly secondary: string;
-        readonly dens: string;
         readonly disabled: string;
         readonly error: string;
     };
@@ -609,6 +630,8 @@ export declare const colorsDark: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
+        readonly base: string;
+        readonly blur: string;
         readonly paper: "#000";
     };
     readonly chips: {
@@ -618,35 +641,40 @@ export declare const colorsDark: {
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
-        readonly default: string;
-        readonly secondary: string;
         readonly dens: string;
+        readonly default: string | undefined;
+        readonly secondary: string;
         readonly disabled: string;
         readonly error: string;
     };

package/components/Chip/Chip.js

@@ -22,6 +22,7 @@ const Chip = forwardRef((props, ref) => {
     iconButtonProps,
     className,
     dataTestId,
+    disabledDeleteButton,
     ...others
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -93,7 +94,8 @@ const Chip = forwardRef((props, ref) => {
             src: iconClose,
             size: adjustedSize,
             ownerState: { ...ownerState },
-            onClick: handleDelete
+            onClick: handleDelete,
+            disabled: disabledDeleteButton
           }
         )
       ]

package/components/Chip/types.d.ts

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

package/components/DataGrid/constants.d.ts

@@ -1,3 +1,24 @@
 export declare const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 export declare const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 export declare const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
+export declare enum DATAGRID_SEMANTIC_WIDTHS {
+    actions = 40,
+    bigChip = 190,
+    bigDescription = 350,
+    bigId = 200,
+    bigName = 290,
+    bigNumber = 150,
+    date = 180,
+    email = 300,
+    mediumChip = 140,
+    mediumDescription = 280,
+    mediumId = 130,
+    mediumName = 180,
+    mediumNumber = 150,
+    percentNumber = 90,
+    smallChip = 70,
+    smallDescription = 130,
+    smallId = 50,
+    smallName = 90,
+    smallNumber = 60
+}

package/components/DataGrid/constants.js

@@ -1,8 +1,31 @@
 const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
+var DATAGRID_SEMANTIC_WIDTHS = /* @__PURE__ */ ((DATAGRID_SEMANTIC_WIDTHS2) => {
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["actions"] = 40] = "actions";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigChip"] = 190] = "bigChip";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigDescription"] = 350] = "bigDescription";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigId"] = 200] = "bigId";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigName"] = 290] = "bigName";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigNumber"] = 150] = "bigNumber";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["date"] = 180] = "date";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["email"] = 300] = "email";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["mediumChip"] = 140] = "mediumChip";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["mediumDescription"] = 280] = "mediumDescription";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["mediumId"] = 130] = "mediumId";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["mediumName"] = 180] = "mediumName";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["mediumNumber"] = 150] = "mediumNumber";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["percentNumber"] = 90] = "percentNumber";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["smallChip"] = 70] = "smallChip";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["smallDescription"] = 130] = "smallDescription";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["smallId"] = 50] = "smallId";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["smallName"] = 90] = "smallName";
+  DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["smallNumber"] = 60] = "smallNumber";
+  return DATAGRID_SEMANTIC_WIDTHS2;
+})(DATAGRID_SEMANTIC_WIDTHS || {});
 export {
   DATAGRID_PREFIX_NAME as D,
   DATAGRID_SELECT_COLUMN_KEY as a,
-  DATAGRID_ACTIONS_COLUMN_KEY as b
+  DATAGRID_SEMANTIC_WIDTHS as b,
+  DATAGRID_ACTIONS_COLUMN_KEY as c
 };

package/components/DataGrid/index.d.ts

@@ -6,3 +6,4 @@ export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';
 export { getDataGridRowsFromSet } from './utils/getDataGridRowsFromSet';
 export type { IGridConfig, BaseConfigColumn } from './contexts/DataGridContext/types';
+export { DATAGRID_SEMANTIC_WIDTHS } from './constants';

package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useTheme } from "@mui/material";
-import { b as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
+import { b as DATAGRID_SEMANTIC_WIDTHS, c as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
 import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
   const { rowActionsGetter } = useDataGrid();
@@ -27,7 +27,7 @@ const ActionsColumn = {
   key: DATAGRID_ACTIONS_COLUMN_KEY,
   // name: getLabel(dictionary.LABEL_ACTIONS),
   name: getActionLabel(),
-  width: 32,
+  width: DATAGRID_SEMANTIC_WIDTHS.actions,
   minWidth: 32,
   isDraggable: false,
   withFilter: false,

package/components/DynamicFilter/subcomponents/FieldTypes/DateTimeFilter/helpers.js

@@ -2,6 +2,7 @@ import * as Yup from "yup";
 import { b as DATE_TIME_OPERATORS } from "../../../constants.js";
 import { D as DYNAMIC_FILTER_DICTIONARY_ID, a as DICCTIONARY } from "../../../dictionary.js";
 import { D as DateTimeFilter } from "./index.js";
+import { startOfDay, endOfDay } from "date-fns";
 import { i as isValidDate } from "../../../../../utils/isValidDate.js";
 class DateTimeFilterHelpers {
   getComponent() {
@@ -34,8 +35,8 @@ class DateTimeFilterHelpers {
   getFormValue(field, getLabel, filterValueDateTime) {
     const filterValue = filterValueDateTime;
     const operator = filterValue ? filterValue.operator : field.defaultOperator ?? "b";
-    const defaultStartDate = /* @__PURE__ */ new Date();
-    const defaultEndDate = /* @__PURE__ */ new Date();
+    const defaultStartDate = startOfDay(/* @__PURE__ */ new Date());
+    const defaultEndDate = endOfDay(/* @__PURE__ */ new Date());
     const defaultOperand1 = field.defaultOperand1 && field.defaultOperand1 instanceof Date ? field.defaultOperand1 : defaultStartDate;
     const defaultOperand2 = field.defaultOperand2 && field.defaultOperand2 instanceof Date ? field.defaultOperand2 : defaultEndDate;
     const formValueOperand1 = filterValue ? filterValue.operand1 : defaultOperand1;

package/components/DynamicFilter/types.d.ts

@@ -2,7 +2,7 @@ import { Maybe } from '@m4l/core';
 import { Sizes } from '@m4l/styles';
 import { Theme } from '@mui/material/styles';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
-import { RHFAutocompleteAsyncBaseProps } from '../hook-form/RHFAutocompleteAsync/types';
+import { RHFAutocompleteAsyncProps } from '../hook-form/RHFAutocompleteAsync/types';
 import { RHFSelectProps } from '../hook-form/RHFSelect';
 import { DynamicFilterSlots } from './slots';
 export type FieldType = 'number' | 'string' | 'boolean' | 'datetime' | 'select' | 'selectAsync';
@@ -27,7 +27,7 @@ export type OperandsSelectArray = Array<OperandSelect>;
 export type FieldTypeOperator<T extends FieldType> = T extends 'boolean' ? BooleanOperator : T extends 'datetime' ? DateTimeOperator : T extends 'number' ? NumberOperator : T extends 'select' ? SelectOperator : T extends 'selectAsync' ? SelectOperatorAsync : T extends 'string' ? StringOperator : T;
 export type FieldTypeOperand<T extends FieldType> = T extends 'boolean' ? boolean : T extends 'datetime' ? Date : T extends 'number' ? number : T extends 'string' ? string : T extends 'select' ? OperandSelect : T extends 'selectAsync' ? OperandSelectAsync : FieldType;
 export type FieldTypeOperandsArray<T extends FieldType> = T extends 'boolean' ? never : T extends 'datetime' ? never : T extends 'number' ? never : T extends 'string' ? never : T extends 'select' ? OperandsSelectArray : T extends 'selectAsync' ? OperandsArraySelectAsync : never;
-type SelectAsyncOptions<TOption = any> = Pick<RHFAutocompleteAsyncBaseProps<TOption>, 'type' | 'endPoint' | 'responseToCamelCase' | 'multiple' | 'autoComplete' | 'autoCapitalize' | 'parms' | 'timeout'> & {
+type SelectAsyncOptions<TOption = any> = Pick<RHFAutocompleteAsyncProps<TOption>, 'type' | 'endPoint' | 'responseToCamelCase' | 'multiple' | 'autoComplete' | 'autoCapitalize' | 'parms' | 'timeout'> & {
     getOptionLabel: (option: TOption) => string;
     isOptionEqualToValue: (options: TOption | TOption[], value: TOption) => boolean;
     getOptionId: (option: TOption) => string | number;

package/components/ObjectLogs/subcomponents/ObjectLogsByOthers/ObjectLogsByOthers.js

@@ -125,7 +125,7 @@ function ObjectLogsByOthers(props) {
                 columns,
                 rows,
                 rowKeyGetter: (row) => row.id,
-                withActions: false,
+                withActions: true,
                 actionsProps: {}
               },
               "users_list_logs"

package/components/hook-form/RHFAutocomplete/RHFAutocomplete.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useTheme } from "@mui/material";
-import { useState, useEffect } from "react";
+import { useId, useState, useCallback, useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { A as AutocompleteRootStyled, L as LabelStyled } from "./slots/RHFAutocompleteSlots.js";
 import { A as Autocomplete } from "../../mui_extended/Autocomplete/Autocomplete.js";
@@ -29,28 +29,36 @@ function RHFAutocomplete(props) {
     imageScale = true,
     imageRepeat,
     refresh
+    // onChange: onChangeRHF,
   } = props;
+  const htmlForId = useId();
   const theme = useTheme();
   const [open, setOpen] = useState(false);
   const isDesktop = !useIsMobile();
-  const onCloseLocal = (event, reason) => {
+  const onCloseLocal = useCallback((event, reason) => {
     setOpen(false);
     if (onClose) {
       onClose(event, reason);
     }
-  };
-  const onOpenLocal = (event) => {
-    setOpen((currentState) => !currentState);
-    if (onOpen) {
-      onOpen(event);
-    }
-  };
-  const getOptionLabelLocal = (option) => {
-    if (option === void 0 || option === null) {
-      return "";
-    }
-    return getOptionLabel(option);
-  };
+  }, [onClose]);
+  const onOpenLocal = useCallback(
+    (event) => {
+      setOpen((currentState) => !currentState);
+      if (onOpen) {
+        onOpen(event);
+      }
+    },
+    [onOpen]
+  );
+  const getOptionLabelLocal = useCallback(
+    (option) => {
+      if (option === void 0 || option === null) {
+        return "";
+      }
+      return getOptionLabel(option);
+    },
+    [getOptionLabel]
+  );
   const paletteColor = getPropertyByString(
     theme.vars.palette,
     disabled ? "default" : color || "default",
@@ -108,11 +116,11 @@ function RHFAutocomplete(props) {
                 {
                   ownerState: { ...ownerState },
                   label,
+                  htmlFor: htmlForId,
                   size,
                   mandatory,
                   mandatoryMessage,
                   helperMessage,
-                  htmlFor: `autocomplete-${nameRHF}`,
                   disabled
                 }
               ),
@@ -124,8 +132,10 @@ function RHFAutocomplete(props) {
                   options,
                   getOptionLabel,
                   isOptionEqualToValue,
-                  multiple: multiple ? true : void 0,
-                  onChange: (_e, newValue) => onChange(newValue),
+                  multiple,
+                  onChange: (_event, newValue, _reason) => {
+                    onChange(newValue);
+                  },
                   onChangeFilterParmsLocal,
                   refresh,
                   disabled,
@@ -133,7 +143,8 @@ function RHFAutocomplete(props) {
                   onOpen: onOpenLocal,
                   onClose: onCloseLocal,
                   size,
-                  value
+                  value,
+                  htmlFor: htmlForId
                 }
               ),
               currentVariant === "error" ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null

package/components/hook-form/RHFAutocomplete/tests/common.d.ts

@@ -0,0 +1,37 @@
+import { renderMaterialUI } from '../../../../test';
+import { FieldValues } from 'react-hook-form';
+import { RHFAutocompleteProps } from '../types';
+import * as Yup from 'yup';
+export declare const FIELD_NAME = "rhf-autocomplete";
+export declare const FIELD_NAME_REQUIRED = "rhf-autocomplete-required";
+export declare const FIELD_NAME_PRESELECTED = "rhf-autocomplete-preselected";
+export declare const FIELD_NAME_PRESELECTED_NOT_IN_OPTIONS = "rhf-autocomplete-preselected-not-in-options";
+export declare const FIELD_NAME_PRESELECTED_MULTIPLE = "rhf-autocomplete-preselected-multiple";
+export declare const FIELD_NAME_PRESELECTED_MULTIPLE_NOT_IN_OPTIONS = "rhf-autocomplete-preselected-multiple-not-in-options";
+export interface OptionsTests {
+    id: number;
+    name: string;
+}
+export declare const mockItems: OptionsTests[];
+export declare const mockItemPreselected: OptionsTests;
+export declare const mockItemPreselectedMultiple: OptionsTests[];
+export declare const mockItemPreselectedNotInOptions: OptionsTests;
+export declare const mockItemPreselectedMultipleNotInOptions: OptionsTests[];
+export declare const INITIAL_FORM_VALUES: FieldValues;
+export declare const DEFAULT_PROPS: RHFAutocompleteProps<OptionsTests>;
+export declare const errorMessage = "This field is required";
+export declare const VALIDATION_SCHEMA: Yup.ObjectSchema<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
+    "rhf-autocomplete-required": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+}>, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
+    "rhf-autocomplete-required": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+}>>, import('yup/lib/object').AssertsShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
+    "rhf-autocomplete-required": import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+}>>>;
+/**
+ * Renderiza el componente con el contexto de EnvironmentProvider y RHFormProvider.
+ */
+export declare const renderWithContexts: (ui: React.ReactElement, initialValuesFormContext?: FieldValues, validationSchema?: any) => ReturnType<typeof renderMaterialUI>;
+/**
+ * Renders the RHFAutocompleteAsync component with the provided props.
+ */
+export declare const renderRHFAutocomplete: (fieldName: string, overrideProps?: Partial<RHFAutocompleteProps<OptionsTests>>, withFormValidation?: boolean) => ReturnType<typeof renderMaterialUI>;

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -1,4 +1,4 @@
-import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteValue, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
+import { AutocompleteCloseReason, AutocompleteFreeSoloValueMapping, AutocompleteInputChangeReason, AutocompleteProps as MUIAutocompleteProps, Theme, PaletteColor, PopperProps } from '@mui/material';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { TextFieldProps } from '../../mui_extended/TextField/types';
 import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
@@ -12,7 +12,7 @@ export type RHFAutocompleteType = 'text' | 'image';
  * Props for the unified Autocomplete component.
  * Supports both single and multiple selection, and two types: `text` and `image`.
  */
-export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = true, FreeSolo extends boolean | undefined = false> extends Omit<MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'variant' | 'color' | 'size' | 'value' | 'classes' | 'defaultValue' | 'onBlur' | 'onFocus' | 'autoComplete' | 'renderInput'>, Omit<TextFieldProps, 'label' | 'variant' | 'defaultValue' | 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'ref' | 'onChange' | 'helperText'>, Omit<LabelProps, 'label'> {
+export interface RHFAutocompleteProps<T = any, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> extends Omit<MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'variant' | 'color' | 'size' | 'value' | 'classes' | 'defaultValue' | 'onBlur' | 'onFocus' | 'autoComplete' | 'renderInput' | 'onChange' | 'open' | 'value' | 'multiple'>, Omit<TextFieldProps, 'label' | 'variant' | 'defaultValue' | 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'ref' | 'onChange' | 'helperText' | 'value'>, Omit<LabelProps, 'label'> {
     name: string;
     /**
      * The label for the autocomplete field.
@@ -20,11 +20,6 @@ export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined =
     popperProps?: Omit<PopperProps, 'color'>;
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     autoComplete?: string;
-    /**
-     * The value of the autocomplete, supports single or multiple selection.
-     * Extended to include `null` for controlled components.
-     */
-    value?: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo> | null | undefined;
     size?: Extract<Sizes, 'small' | 'medium'>;
     variant?: RHFAutocompleteVariants;
     color?: Extract<ComponentPalletColor, 'primary'>;
@@ -42,7 +37,7 @@ export interface RHFAutocompleteProps<T, Multiple extends boolean | undefined =
     helperMessage?: string;
     onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
-    multiple?: Multiple;
+    multiple?: boolean;
     type?: RHFAutocompleteType;
     getOptionUrlImage?: (option: T) => string;
     imageScale?: boolean;