@m4l/components 9.2.52 → 9.2.53

package/components/LoadingError/slots/LoadingErrorSlots.js

@@ -2,8 +2,8 @@ import { styled } from "@mui/material/styles";
 import { L as LOADING_ERROR_KEY_COMPONENT } from "../constants.js";
 import { L as LoadingErrorSlots } from "./LoadingErrorEnum.js";
 import { l as loadingErrorStyles } from "../LoadingError.styles.js";
-import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { L as LinearProgressIndeterminate } from "../../LinearProgressIndeterminate/LinearProgressIndeterminate.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { I as Image } from "../../Image/Image.js";
 const LoadingErrorRootStyled = styled("div", {
   name: LOADING_ERROR_KEY_COMPONENT,

package/components/MFIsolationApp/subcomponents/MFAuthApp/MFAuthApp.js

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { format } from "date-fns";
 import { useAuth, DomainCountryProvider } from "@m4l/core";
 import { HostThemeProvider, FormatterProvider } from "@m4l/graphics";
-import { getUserThemeOptions, fnComponentsOverrides } from "@m4l/styles";
+import { fnComponentsOverrides, getUserThemeOptions } from "@m4l/styles";
 function MFAuthApp(props) {
   const { children, user, pwd } = props;
   const { isAuthenticated, isInitialized, login, user: authUser } = useAuth();

package/components/NoItemSelected/NoItemSelected.js

@@ -3,7 +3,7 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useMemo, useRef, useState, useEffect } from "react";
 import { W as WrapperNoItemSelectedStyled, N as NoItemSelectedContainer, I as ImgStyled, a as WrapperTpography, T as TypographyStyledTitle, b as TypographyStyledDetail, L as LabelDetail } from "./slots/NoItemSelectedSlots.js";
 import { clsx } from "clsx";
-import { N as NO_ITEM_SELECT_KEY_COMPONENT, c as classNoItemSelected } from "./constant.js";
+import { c as classNoItemSelected, N as NO_ITEM_SELECT_KEY_COMPONENT } from "./constant.js";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { N as NoItemSelectedSlots } from "./slots/NoItemSelectedEnum.js";
 import { D as DICTIONARY } from "./dictionary.js";

package/components/NumberInput/hooks/useNumberInput/NumberInputReducer.js

@@ -1,4 +1,4 @@
-import { c as clampStepwise, i as isNumber } from "../../utils.js";
+import { i as isNumber, c as clampStepwise } from "../../utils.js";
 import { N as NumberInputActionTypes } from "./NumberInputActions.js";
 function getClampedValues(rawValue, context) {
   const { min, max, step, withDecimal } = context;

package/components/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,9 +56,11 @@ const useNumberInput = (parameters) => {
     (event, field, fieldValue, reason) => {
       if (field === "value" && typeof fieldValue !== "string") {
         switch (reason) {
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:inputChange":
             onChange?.(event, fieldValue);
             break;
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:clamp":
             onChange?.(event, fieldValue);
             break;

package/components/ObjectLogs/dictionary.js

@@ -5,13 +5,10 @@ function getObjectLogsComponentsDictionary() {
   return [DICTIONARY_OBJECT_LOGS_ID].concat(getDataGridComponentsDictionary()).concat(getDynamicFilterComponentsDictionary());
 }
 const DICTIONARY = {
-  LABEL_RESOURCE_TYPE_ID: `${DICTIONARY_OBJECT_LOGS_ID}.resource_type_id`,
-  LABEL_RESOURCE_SERIAL_ID: `${DICTIONARY_OBJECT_LOGS_ID}.resource_serial_id`,
   LABEL_CREATED_AT: `${DICTIONARY_OBJECT_LOGS_ID}.created_at`,
   LABEL_USER: `${DICTIONARY_OBJECT_LOGS_ID}.email`,
   LABEL_RESOURCE_NAME: `${DICTIONARY_OBJECT_LOGS_ID}.resource_name`,
   LABEL_SERVICE_ID: `${DICTIONARY_OBJECT_LOGS_ID}.service_id`,
-  LABEL_PRIVILEGE_NAME: `${DICTIONARY_OBJECT_LOGS_ID}.privilege_name`,
   LABEL_LOG_PREVIEW: `${DICTIONARY_OBJECT_LOGS_ID}.log_preview`,
   LABEL_LOG_DETAIL: `${DICTIONARY_OBJECT_LOGS_ID}.log_detail`,
   LABEL_IP: `${DICTIONARY_OBJECT_LOGS_ID}.ip`

package/components/ObjectLogs/subcomponents/ObjectLogsByM4L/ObjectLogsByM4L.js

@@ -10,7 +10,7 @@ import { usePaginate } from "@m4l/graphics";
 import { u as useObjectLogsColumns } from "../../hooks/useObjectLogsColumns.js";
 import { a as OBJECT_LOGS_M4L_END_POINT, O as OBJECT_LOGS_KEY_COMPONENT } from "../../constants.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
-import { startOfMonth, endOfDay } from "date-fns";
+import { endOfDay, startOfMonth } from "date-fns";
 import { O as ObjectLogsSlots } from "../../slots/ObjectLogsEnum.js";
 function ObjectLogsByM4L(props) {
   const { resourceId, objectId, dataTestId = "" } = props;

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { startOfDay, endOfDay } from "date-fns";
+import { endOfDay, startOfDay } from "date-fns";
 import { D as DataGrid } from "../../../DataGrid/DataGrid.js";
 import { useEnvironment } from "@m4l/core";
 import { D as DynamicFilter } from "../../../DynamicFilter/DynamicFilter.js";
@@ -125,7 +125,7 @@ function ObjectLogsByOthers(props) {
                 columns,
                 rows,
                 rowKeyGetter: (row) => row.id,
-                withActions: false,
+                withActions: true,
                 actionsProps: {}
               },
               "users_list_logs"

package/components/Pager/Pager.styles.js

@@ -25,14 +25,6 @@ const pagerStyles = {
       height: theme.vars.size.baseSpacings.sp8
     }
   }),
-  /**
-   * Rows Per Page Container Styles
-   */
-  rowsPerPageContainer: () => ({
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  }),
   /**
    * Label Select Container Styles
    */

package/components/Pager/dicctionary.js

@@ -1,13 +1,8 @@
 const PAGER_DICTIONARY = {
   rows_per_page: "pager.rows_per_page",
-  first: "pager.first",
-  previous: "pager.previous",
-  before: "pager.before",
-  last: "pager.last",
   of: "pager.of",
   page: "pager.page",
   no_records: "pager.no_records",
-  total_rows: "pager.total_rows",
   rows: "pager.rows"
 };
 function getPagerComponentsDictionary() {

package/components/PrintingSystem/subcomponents/ChartNode/index.js

@@ -3,7 +3,7 @@ import { c as classes } from "../../classes/index.js";
 import clsx from "clsx";
 import { createRef, useEffect } from "react";
 import { Chart, registerables } from "chart.js";
-import { ScatterWithErrorBarsController, LineWithErrorBarsChart, PointWithErrorBar } from "chartjs-chart-error-bars";
+import { LineWithErrorBarsChart, ScatterWithErrorBarsController, PointWithErrorBar } from "chartjs-chart-error-bars";
 import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
 import { C as ChartNodeRootStyled } from "../../slots/PrintingSystemSlots.js";
 Chart.register(

package/components/PropertyValue/PropertyValue.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useId } from "react";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { P as PROPERTY_VALUE_KEY_COMPONENT, T as TEST_PROPS_DATA, C as COMPONENT_PREFIX } from "./constants.js";
-import { g as getPropDataTestId, a as getNameDataTestId } from "../../test/getNameDataTestId.js";
+import { T as TEST_PROPS_DATA, C as COMPONENT_PREFIX, P as PROPERTY_VALUE_KEY_COMPONENT } from "./constants.js";
+import { a as getNameDataTestId, g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { P as PropertyValueRootStyled, N as NameStyled, V as ValueStyled } from "./slots/PropertyValueSlots.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";

package/components/ScrollBar/ScrollBar.js

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { Box } from "@mui/material";
 import { useIsMobile } from "@m4l/graphics";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
-import { c as classScrollRoot, S as SCROLL_KEY_COMPONENT } from "./constants.js";
+import { S as SCROLL_KEY_COMPONENT, c as classScrollRoot } from "./constants.js";
 import { R as RootScrollBar, S as SimpleBarStyled } from "./slots/ScrollBarSlots.js";
 import { S as ScrollBarSlots } from "./slots/ScrollBarEnum.js";
 function ScrollBar(props) {

package/components/SideBar/slots/SideBarEnum.js

@@ -37,11 +37,11 @@ var ContainerMenuItemsMainSlots = /* @__PURE__ */ ((ContainerMenuItemsMainSlots2
   return ContainerMenuItemsMainSlots2;
 })(ContainerMenuItemsMainSlots || {});
 export {
-  ContentGroupsSlots as C,
+  ContentComponentSlots as C,
   HeaderSidebarSlots as H,
   SideBarDesktopSlots as S,
-  SideBarFooterSlots as a,
-  SideBarMobileSlots as b,
-  ContentComponentSlots as c,
+  SideBarMobileSlots as a,
+  SideBarFooterSlots as b,
+  ContentGroupsSlots as c,
   ContainerMenuItemsMainSlots as d
 };

package/components/SideBar/slots/SideBarSlots.js

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { S as SideBarDesktopSlots, C as ContentGroupsSlots, H as HeaderSidebarSlots, a as SideBarFooterSlots, b as SideBarMobileSlots, c as ContentComponentSlots, d as ContainerMenuItemsMainSlots } from "./SideBarEnum.js";
+import { S as SideBarDesktopSlots, a as SideBarMobileSlots, C as ContentComponentSlots, b as SideBarFooterSlots, H as HeaderSidebarSlots, c as ContentGroupsSlots, d as ContainerMenuItemsMainSlots } from "./SideBarEnum.js";
 import { S as SIDEBAR_KEY_COMPONENT } from "../constants.js";
 import { s as sideBarStyles } from "../styles.js";
 const ContainerDesktopRootStyled = styled("section", {

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js

@@ -1,5 +1,5 @@
 import { a as getHeightSizeStyles } from "../../../../../../utils/getSizeStyles/getSizeStyles.js";
-import { b as ITEM_IN_TREE_ACTIVE, I as ITEM_ACTIVE } from "../../../../constants.js";
+import { I as ITEM_ACTIVE, b as ITEM_IN_TREE_ACTIVE } from "../../../../constants.js";
 const containerMenuItemsMainStyles = {
   /**
    * Style aplicado al contenedor de los items del menú

package/components/ToastContainer/ToastContainer.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToastContainer as ToastContainer$1 } from "react-toastify";
-import { T as TOAST_KEY_COMPONENT, D as DEFAULT_CLOSE_TIME } from "./constants.js";
+import { D as DEFAULT_CLOSE_TIME, T as TOAST_KEY_COMPONENT } from "./constants.js";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { ModuleSkeletonProvider } from "@m4l/core";
 import "react-toastify/dist/ReactToastify.min.css";

package/components/WindowBase/slots/WindowBaseSlots.js

@@ -2,9 +2,9 @@ import { styled } from "@mui/material/styles";
 import { W as WINDOW_BASE_KEY_COMPONENT } from "../constants.js";
 import { W as WindowBaseSlots } from "./WindowBaseEnum.js";
 import { w as windowBaseStyles } from "../WindowBase.styles.js";
+import { L as LinearProgressIndeterminate } from "../../LinearProgressIndeterminate/LinearProgressIndeterminate.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { M as MenuActions } from "../../MenuActions/MenuActions.js";
-import { L as LinearProgressIndeterminate } from "../../LinearProgressIndeterminate/LinearProgressIndeterminate.js";
 import { I as Icon } from "../../Icon/Icon.js";
 const WindowBaseStyled = styled("div", {
   name: WINDOW_BASE_KEY_COMPONENT,

package/components/animate/variants/bounce.js

@@ -1,4 +1,4 @@
-import { v as varTranEnter, a as varTranExit } from "./transition.js";
+import { v as varTranExit, a as varTranEnter } from "./transition.js";
 const varBounce = (props) => {
   const durationIn = props?.durationIn;
   const durationOut = props?.durationOut;

package/components/animate/variants/fade.js

@@ -1,4 +1,4 @@
-import { v as varTranEnter, a as varTranExit } from "./transition.js";
+import { v as varTranExit, a as varTranEnter } from "./transition.js";
 const varFade = (props) => {
   const distance = props?.distance || 120;
   const durationIn = props?.durationIn;

package/components/animate/variants/transition.js

@@ -14,7 +14,7 @@ const varTranExit = (props) => {
   return { duration, ease };
 };
 export {
-  varTranExit as a,
+  varTranEnter as a,
   varTranHover as b,
-  varTranEnter as v
+  varTranExit as v
 };

package/components/areas/components/AreasAdmin/AreasAdmin.js

@@ -15,9 +15,9 @@ import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoo
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
-import { A as AreasAdminSlots } from "./slots/AreasAdminEnum.js";
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
 import { M as MenuActions } from "../../../MenuActions/MenuActions.js";
+import { A as AreasAdminSlots } from "./slots/AreasAdminEnum.js";
 const AreasAdmin = (props) => {
   const {
     color = "primary",

package/components/areas/components/AreasViewer/AreasViewer.js

@@ -4,7 +4,7 @@ import { u as useAreasStore } from "../../hooks/useAreas/index.js";
 import { A as AreaMemonizedWindowModal } from "./subcomponents/Area/subcomponents/WindowModal/WindowModal.js";
 import { shallow } from "zustand/shallow";
 import { L as LoadingError } from "../../../LoadingError/LoadingError.js";
-import { g as getPropDataTestId, a as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getNameDataTestId, g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { A as AREAS_VIEWER_CLASS_NAME } from "../../constants.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
 import { A as AreasViewerRootStyled } from "./slots/AreasViewerSlots.js";

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/AreaGridLayout.js

@@ -4,7 +4,7 @@ import { W as Window } from "../Window/Window.js";
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { a as areasViewerClasses } from "../../../../classes/index.js";
 import clsx from "clsx";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../../../../../contexts/AreasContext/helpers/helper.js";
+import { P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, R as RESPONSIVE_ROW_HEIGHTS, a as RESPONSIVE_COLAPSED_HEIGHTS } from "../../../../../../contexts/AreasContext/helpers/helper.js";
 import { M as MemonizePopupsViewer } from "../../../../../../../popups/components/PopupsViewer/PopupsViewer.js";
 import { useState } from "react";
 import { d as dragResizeWindowRNDClasses } from "../../../../../../../DragResizeWindowRND/classes/index.js";

package/components/areas/contexts/AreasContext/helpers/helper.js

@@ -192,23 +192,23 @@ function getSelectedAreaIdFromCookies(cookiesResponse) {
 }
 export {
   COOKIE_WINDOW_SELECTED as C,
-  DEFAULT_AREA as D,
+  DEBOUCED_SAVE_TIME as D,
   MARGIN_GRIDLAYOUT as M,
   NORMALIZED_COLS as N,
   PADDING_GRIDLAYOUT as P,
-  RESPONSIVE_COLAPSED_HEIGHTS as R,
-  RESPONSIVE_ROW_HEIGHTS as a,
-  COOKIE_AREAS_ADMIN_CONTAINER_ID as b,
-  COOKIE_AREAS_ADMIN_ID as c,
-  addArea as d,
+  RESPONSIVE_ROW_HEIGHTS as R,
+  RESPONSIVE_COLAPSED_HEIGHTS as a,
+  getDataFromResponse as b,
+  getParmsFromValue as c,
+  COOKIE_BREAKPOINT_LAYOUTS as d,
   DEFAULT_WINDOW as e,
-  deleteLayoutFromBreakPoints as f,
-  getSelectedAreaIdFromCookies as g,
-  COOKIE_WINDOWS as h,
-  COOKIE_BREAKPOINT_LAYOUTS as i,
-  DEBOUCED_SAVE_TIME as j,
-  getDataFromResponse as k,
-  getParmsFromValue as l,
-  getCookiesContainer as m,
+  COOKIE_WINDOWS as f,
+  getCookiesContainer as g,
+  deleteLayoutFromBreakPoints as h,
+  addArea as i,
+  DEFAULT_AREA as j,
+  getSelectedAreaIdFromCookies as k,
+  COOKIE_AREAS_ADMIN_CONTAINER_ID as l,
+  COOKIE_AREAS_ADMIN_ID as m,
   setColapsedLayoutBreakPoints as s
 };

package/components/areas/contexts/AreasContext/store.js

@@ -1,16 +1,16 @@
 import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { b as COOKIE_AREAS_ADMIN_CONTAINER_ID, c as COOKIE_AREAS_ADMIN_ID, D as DEFAULT_AREA, d as addArea, g as getSelectedAreaIdFromCookies, e as DEFAULT_WINDOW, a as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, N as NORMALIZED_COLS, f as deleteLayoutFromBreakPoints, h as COOKIE_WINDOWS, i as COOKIE_BREAKPOINT_LAYOUTS, j as DEBOUCED_SAVE_TIME, s as setColapsedLayoutBreakPoints, k as getDataFromResponse, l as getParmsFromValue, m as getCookiesContainer, C as COOKIE_WINDOW_SELECTED } from "./helpers/helper.js";
+import { g as getCookiesContainer, b as getDataFromResponse, c as getParmsFromValue, s as setColapsedLayoutBreakPoints, d as COOKIE_BREAKPOINT_LAYOUTS, D as DEBOUCED_SAVE_TIME, e as DEFAULT_WINDOW, M as MARGIN_GRIDLAYOUT, f as COOKIE_WINDOWS, h as deleteLayoutFromBreakPoints, R as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, N as NORMALIZED_COLS, i as addArea, j as DEFAULT_AREA, k as getSelectedAreaIdFromCookies, C as COOKIE_WINDOW_SELECTED, l as COOKIE_AREAS_ADMIN_CONTAINER_ID, m as COOKIE_AREAS_ADMIN_ID } from "./helpers/helper.js";
 import { c as createDynamicMFStore } from "../../../WindowBase/contexts/DynamicMFParmsContext/store.js";
 import cloneDeep from "lodash-es/cloneDeep";
 import debounce from "lodash-es/debounce";
 import { g as generateModuleCount } from "./helpers/generateModuleCount.js";
 import { a as AREAS_STORE_ID } from "../../constants.js";
 import { h as helperSelectLayout } from "./helpers/selectLayout.js";
-import { g as getCookie, d as deleteCookie, s as setCookie } from "../../../../helpers/cookies/cookies.js";
-import { d as addLayoutItemToBreakPoints, e as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
+import { d as deleteCookie, s as setCookie, g as getCookie } from "../../../../helpers/cookies/cookies.js";
 import { k as isEqualLayouts } from "../../../GridLayout/utils.js";
+import { d as cloneLayouts, e as addLayoutItemToBreakPoints } from "../../../GridLayout/subcomponents/Responsive/responsiveUtils.js";
 const createDevtools = (immerMiddlewere, config) => {
   const { enabled = false } = config;
   if (enabled && process.env.NODE_ENV === "development") {
@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -11,
+                    bottom: -11
                   }
                 });
               }

package/components/areas/icons.js

@@ -1,5 +1,4 @@
 const ICONS = {
-  CLOSE: "close.svg",
   MAXIMIZE: "maximize.svg",
   NORMALIZE: "normalize.svg",
   COLAPSE: "colapse.svg",
@@ -8,16 +7,9 @@ const ICONS = {
   SAVE_COOKIES: "save_cookies.svg",
   DELETE_AREA: "delete_area.svg",
   ADD_AREA: "add_area.svg",
-  LAYERS: "layers.svg",
-  NAVIGATE_ERROR: "navegate_error.svg",
   EDIT_AREA: "edit.svg",
   CHECK: "checkmarkInCircle.svg",
-  RESIZE: "controlSize.svg",
-  VERSION: "version.svg",
-  SHOW_OPTIONS: "showMoreVertical.svg",
   CHEVRON_DOWN: "chevronDown.svg",
-  MODULE: "module.svg",
-  POPUP: "popup.svg",
   PENDING_ORDER: "pending_order.svg",
   MORE_VERTICAL: "more_vertical.svg"
 };

package/components/commercial/HamburgerMenu/classes/index.js

@@ -1,4 +1,4 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { c as componentName } from "./constants.js";
 generateUtilityClasses(componentName, ["root", "ImageLogo"]);

package/components/formatters/BooleanFormatter/BooleanFormatter.js

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
-import { B as BooleanFormatterIconStyled, a as BooleanFormatterChipStyled, b as BooleanFormatterRootStyled } from "./slots/BooleanFormatterSlots.js";
+import { B as BooleanFormatterRootStyled, a as BooleanFormatterIconStyled, b as BooleanFormatterChipStyled } from "./slots/BooleanFormatterSlots.js";
 import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
 function getFormatBoolean(presentationType, value = false, getLabel) {
   if (presentationType === "string_yes_no") {

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.js

@@ -18,7 +18,7 @@ const BooleanFormatterChipStyled = styled(Chip, {
   slot: BooleanFormatterSlots.chip
 })(booleanFormatterStyles?.chip);
 export {
-  BooleanFormatterIconStyled as B,
-  BooleanFormatterChipStyled as a,
-  BooleanFormatterRootStyled as b
+  BooleanFormatterRootStyled as B,
+  BooleanFormatterIconStyled as a,
+  BooleanFormatterChipStyled as b
 };

package/components/formatters/PeriodFormatter/PeriodFormatter.js

@@ -6,8 +6,8 @@ import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { d as dictionary } from "./dictionary.js";
+import { P as PeriodFormatterRootStyled, a as PeriodFormatterSkeletonStyled } from "./slots/PeriodFormatterSlots.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { P as PeriodFormatterSkeletonStyled, a as PeriodFormatterRootStyled } from "./slots/PeriodFormatterSlots.js";
 import { P as PeriodFormatterSlots } from "./slots/PeriodFomatterEnum.js";
 function useFormatPeriod(years, months, days) {
   const { getLabel } = useModuleDictionary();

package/components/formatters/PeriodFormatter/slots/PeriodFormatterSlots.js

@@ -13,6 +13,6 @@ const PeriodFormatterSkeletonStyled = styled(Skeleton, {
   slot: PeriodFormatterSlots.skeleton
 })(periodFormatterStyles?.skeleton);
 export {
-  PeriodFormatterSkeletonStyled as P,
-  PeriodFormatterRootStyled as a
+  PeriodFormatterRootStyled as P,
+  PeriodFormatterSkeletonStyled as a
 };

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;