@m4l/components 9.2.53 → 9.2.54-beta.2

package/components/ToastContainer/ToastContainer.styles.js

@@ -1,4 +1,3 @@
-import { a as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const toastStyles = {
   /** Root del componente ToastContainer */
   root: ({ theme, ownerState }) => ({
@@ -139,16 +138,11 @@ const toastStyles = {
     gap: theme.vars.size.baseSpacings.sp1
   }),
   /** 🗣️ Header del ToastContainer 🗣️ */
-  messageHeader: ({ theme, ownerState }) => ({
+  messageHeader: ({ theme }) => ({
     width: "100%",
     display: "flex",
     gap: theme.vars.size.baseSpacings.sp1,
-    alignItems: "center",
-    ...getHeightSizeStyles(
-      theme.generalSettings.isMobile,
-      ownerState.size || "medium",
-      "container"
-    )
+    alignItems: "center"
   }),
   /** 🔠 Titulo del Header 🔠 */
   messageTitle: () => ({

package/components/WindowBase/WindowBase.js

@@ -17,6 +17,7 @@ const WindowBase = (props) => {
     selected = false,
     variant = "outlined",
     version,
+    buildTime,
     dataTestId,
     onClose,
     className,
@@ -46,6 +47,7 @@ const WindowBase = (props) => {
           {
             ...getPropDataTestId(WINDOW_BASE_KEY_COMPONENT, WindowBaseSlots.headerContentWindowBase, dataTestId),
             version,
+            buildTime,
             size,
             selected,
             onClose,

package/components/WindowBase/contexts/WindowToolsMFContext/types.d.ts

@@ -27,8 +27,9 @@ export interface WindowToolsMF {
      * Método para establecer las acciones de ventana para el área actual.
      * @param newActions Las nuevas acciones de ventana que se desean establecer.
      * @param version (Opcional) La versión de las acciones de ventana.
+     * @param buildTime (Opcional) El buildTime del Microfrontend.
      */
-    setActions: (newActions: ModuleAction[], version?: string) => void;
+    setActions: (newActions: ModuleAction[], version?: string, buildTime?: string) => void;
     /**
      * Método para establecer una cookie específica.
      * @param id El ID de la cookie que se desea establecer.

package/components/WindowBase/index.d.ts

@@ -4,4 +4,4 @@ export * from './hooks/useDynamicMFParameters';
 export * from './contexts/WindowToolsMFContext';
 export * from './contexts/DynamicMFParmsContext';
 export type { WindowToolsMFContextProps } from './contexts/WindowToolsMFContext/types';
-export type { ModuleAction } from './types';
+export type { ModuleAction, GroupActionMenuItem, ModuleActionGroup } from './types';

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.d.ts

@@ -11,31 +11,5 @@ import { WindowBaseOwnerState } from '../../types';
  * - Display the header for a `WindowBase` component.
  * - Provides flexibility to add a title, subtitle, icon, version label, and menu actions.
  * - Visually supports a selected state (`selected`) for a distinct appearance when the window is active.
- *
- * ### Props:
- * - `title` (string): The title to be displayed in the header.
- * - `subTitle` (string, optional): The subtitle displayed below the title.
- * - `onClose` (VoidFunction, optional): Callback executed when the close button is clicked.
- * - `urlIcon` (string, optional): The URL for the icon to be shown in the header.
- * - `menuActions` (MenuAction[], optional): List of actions for the header's dropdown menu.
- * - `size` ('small' | 'medium' | 'large', optional): Defines the header size, default is `medium`.
- * - `color` ('default', optional): Base color of the header, default is `default`.
- * - `selected` (boolean, optional): Indicates if the window is selected. Modifies visual appearance when active.
- * - `version` (string, optional): Version label to be displayed in the header.
- *
- * ### Example Usage:
- * ```tsx
- * <HeaderWindowBase
- *   title="My Window"
- *   subTitle="Additional Details"
- *   onClose={() => console.log('Closing window')}
- *   iconUrl="https://example.com/icon.png"
- *   menuActions={[
- *     { label: 'Action 1', onClick: () => console.log('Action 1 selected') },
- *     { label: 'Action 2', onClick: () => console.log('Action 2 selected') },
- *   ]}
- *   selected={true}
- * />
- * ```
  */
 export declare const HeaderWindowBase: (props: HeaderProps & WindowBaseOwnerState) => import("react/jsx-runtime").JSX.Element;

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.js

@@ -1,11 +1,12 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
 import { useState, useEffect, useMemo } from "react";
 import { I as ICONS } from "../../icons.js";
 import { d as dragResizeWindowRNDClasses } from "../../../DragResizeWindowRND/classes/index.js";
 import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 import { deepEqual } from "fast-equals";
-import { M as MemoizedIconButton } from "../MemoizedIconButton/MemoizedIconButton.js";
+import { useFormatter } from "@m4l/graphics";
+import { u as useButtonActions } from "./useButtonActions.js";
 import { H as HeaderWindowComponentStyled, c as HeaderContentStyled, I as IconWindowStyled, T as TitleWindowStyled, S as SubtitleContainerStyled, P as PointStyled, d as PointIconStyled, e as SubtitleWindowStyled, f as IconsWrapperStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
 const HeaderWindowBase = (props) => {
   const {
@@ -16,10 +17,12 @@ const HeaderWindowBase = (props) => {
     size,
     selected,
     version,
+    buildTime,
     variant,
     actions = []
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
+  const { dateFormatter } = useFormatter();
   const [leftActions, setLeftActions] = useState(() => actions.filter((action) => action.place === "left"));
   const [rightActions, setRightActions] = useState(() => actions.filter((action) => action.place === "right"));
   const [insideActions, setInsideActions] = useState(() => actions.filter((action) => action.place === "inside"));
@@ -52,58 +55,46 @@ const HeaderWindowBase = (props) => {
   }, [actions]);
   const menuActions = useMemo(() => {
     const memoizedActions = [
-      ...insideActions.map((action) => ({
-        type: "menuItem",
-        startIcon: action.iconUrl,
-        label: action.label,
-        onClick: action.onClick,
-        disabled: action.disabled
-      }))
+      ...insideActions.map((action) => {
+        if (action.type === "groupActions") {
+          return action.actions.map((groupAction) => ({
+            type: "menuItem",
+            startIcon: groupAction.iconUrl,
+            label: groupAction.label,
+            onClick: groupAction.onClick,
+            disabled: groupAction.disabled,
+            checkable: true,
+            checked: groupAction.key === action.selectedActionKey
+          }));
+        }
+        return {
+          type: "menuItem",
+          startIcon: action.iconUrl,
+          label: action.label,
+          onClick: action.onClick,
+          disabled: action.disabled
+        };
+      }).flat()
     ];
     if (version) {
       memoizedActions.push({
         type: "menuItem",
         startIcon: `${host_static_assets}/${environment_assets}/frontend/components/menu_actions/assets/icons/${ICONS.VERSION}`,
-        label: version,
+        label: buildTime ? `${version} - ${dateFormatter.formatDate(new Date(buildTime), dateFormatter.datetimeFormat)}` : version,
         onClick: () => {
         },
         disabled: true
       });
     }
     return memoizedActions;
-  }, [insideActions, version, host_static_assets, environment_assets]);
+  }, [insideActions, version, host_static_assets, environment_assets, buildTime, dateFormatter]);
   const ownerState = {
     selected,
     variant,
     size
   };
-  const IconButtonLeftActions = useMemo(() => /* @__PURE__ */ jsx(Fragment, { children: leftActions.map((action) => /* @__PURE__ */ jsx(
-    MemoizedIconButton,
-    {
-      iconUrl: action.iconUrl,
-      label: action.label,
-      disabled: action.disabled,
-      onClick: action.onClick || (() => {
-      })
-    },
-    action.key
-  )) }), [leftActions]);
-  const IconButtonRightActions = useMemo(() => {
-    if (rightActions.length === 0) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children: rightActions.map((action) => /* @__PURE__ */ jsx(
-      MemoizedIconButton,
-      {
-        iconUrl: action.iconUrl,
-        label: action.label,
-        disabled: action.disabled,
-        onClick: action.onClick || (() => {
-        })
-      },
-      action.key
-    )) });
-  }, [rightActions]);
+  const IconButtonLeftActions = useButtonActions(leftActions);
+  const IconButtonRightActions = useButtonActions(rightActions);
   return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: dragResizeWindowRNDClasses.draggableHandle, ownerState, children: [
     /* @__PURE__ */ jsxs(HeaderContentStyled, { ownerState, children: [
       iconUrl && /* @__PURE__ */ jsx(IconWindowStyled, { size, ownerState, src: iconUrl, "aria-label": "main icon" }),

package/components/WindowBase/subcomponents/Header/types.d.ts

@@ -32,7 +32,7 @@ import { WindowBaseAction, WindowBaseProps } from '../../types';
  * - `selected` modifies the visual appearance to indicate the selected state.
  * @see WindowBaseProps - General properties for the window base.
  */
-export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant'> & {
+export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant' | 'buildTime'> & {
     actions?: WindowBaseAction[];
 };
 /**

package/components/WindowBase/subcomponents/Header/useButtonActions.d.ts

@@ -0,0 +1,5 @@
+import { WindowBaseAction } from '../../types';
+/**
+ * `useButtonActions` Devuelve un componente de iconos para los botones de la cabecera, manejando los grupos de iconos
+ */
+export declare const useButtonActions: (actions: WindowBaseAction[]) => import("react/jsx-runtime").JSX.Element;

package/components/WindowBase/subcomponents/Header/useButtonActions.js

@@ -0,0 +1,36 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { M as MemoizedIconButton } from "../MemoizedIconButton/MemoizedIconButton.js";
+const useButtonActions = (actions) => {
+  const MemoActions = useMemo(() => /* @__PURE__ */ jsx(Fragment, { children: actions.map((action) => {
+    if (action.type === "groupActions") {
+      return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "row", gap: "8px" }, children: action.actions.map((groupAction) => /* @__PURE__ */ jsx(
+        MemoizedIconButton,
+        {
+          iconUrl: groupAction.iconUrl,
+          label: groupAction.label,
+          disabled: groupAction.disabled,
+          selected: groupAction.key === action.selectedActionKey,
+          onClick: groupAction.onClick || (() => {
+          })
+        },
+        groupAction.key
+      )) }, action.key);
+    }
+    return /* @__PURE__ */ jsx(
+      MemoizedIconButton,
+      {
+        iconUrl: action.iconUrl,
+        label: action.label,
+        disabled: action.disabled,
+        onClick: action.onClick || (() => {
+        })
+      },
+      action.key
+    );
+  }) }), [actions]);
+  return MemoActions;
+};
+export {
+  useButtonActions as u
+};

package/components/WindowBase/subcomponents/MemoizedIconButton/MemoizedIconButton.d.ts

@@ -6,5 +6,5 @@ import { MemoizedIconButtonProps } from './types';
  * This component renders an `IconButton` with an icon and tooltip.
  * It is memoized to avoid unnecessary re-renders when the props do not change.
  */
-declare const MemoizedIconButton: React.MemoExoticComponent<({ iconUrl, label, disabled, onClick }: MemoizedIconButtonProps) => import("react/jsx-runtime").JSX.Element>;
+declare const MemoizedIconButton: React.MemoExoticComponent<({ iconUrl, label, disabled, onClick, selected }: MemoizedIconButtonProps) => import("react/jsx-runtime").JSX.Element>;
 export default MemoizedIconButton;

package/components/WindowBase/subcomponents/MemoizedIconButton/MemoizedIconButton.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 const MemoizedIconButton = React.memo(
-  ({ iconUrl, label, disabled, onClick }) => /* @__PURE__ */ jsx(IconButton, { role: "button", "aria-label": label, tooltip: label, icon: iconUrl, disabled, onClick })
+  ({ iconUrl, label, disabled, onClick, selected }) => /* @__PURE__ */ jsx(IconButton, { role: "button", "aria-label": label, tooltip: label, icon: iconUrl, disabled, onClick, selected })
 );
 export {
   MemoizedIconButton as M

package/components/WindowBase/subcomponents/MemoizedIconButton/types.d.ts

@@ -18,4 +18,8 @@ export interface MemoizedIconButtonProps {
      * Callback function executed when the button is clicked.
      */
     onClick: () => void;
+    /**
+     * Whether the button is selected.
+     */
+    selected?: boolean;
 }

package/components/WindowBase/types.d.ts

@@ -26,7 +26,8 @@ export type WinType = 'microfrontend' | 'component';
  * normal: Se muestra inside del menu.
  */
 export type WindowActionType = 'main' | 'allways' | 'normal';
-export interface ModuleAction extends Pick<MenuItemAction, 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked' | 'onClick'> {
+export interface BaseModuleAction {
+    type?: 'menuItem' | 'groupActions';
     /**
      * Tipo de visibilidad de la acción de ventana.
      *
@@ -40,55 +41,44 @@ export interface ModuleAction extends Pick<MenuItemAction, 'label' | 'selected'
      * Etiqueta opcional para la acción de ventana.
      */
     tag?: any;
+}
+export type ModuleMenuItemAction = Pick<MenuItemAction, 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked' | 'onClick'> & {
+    /**
+     * Icono opcional para la acción de ventana.
+     */
+    iconUrl: string;
     /**
      * Clase CSS opcional para la acción de ventana.
      */
     className?: string;
+};
+export interface ModuleActionMenuItem extends BaseModuleAction, ModuleMenuItemAction {
+    type?: 'menuItem';
+}
+export type GroupActionMenuItem<T extends string = string> = ModuleMenuItemAction & {
+    key: T;
+};
+export interface ModuleActionGroup<T extends string = string> extends BaseModuleAction {
+    type: 'groupActions';
     /**
-     * Icono opcional para la acción de ventana.
+     * Clave de la acción seleccionada.
      */
-    iconUrl: string;
+    selectedActionKey: T;
+    /**
+     * Lista de acciones del grupo.
+     */
+    actions: Array<GroupActionMenuItem<T>>;
 }
+export type ModuleAction = ModuleActionMenuItem | ModuleActionGroup;
+export type WindowBaseModuleAction = Omit<ModuleActionMenuItem, 'visibility'> | Omit<ModuleActionGroup, 'visibility'>;
 /**
  * Type representing a single action in the `WindowBase` component.
  */
-export interface WindowBaseAction extends Pick<ModuleAction, 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked' | 'onClick' | 'key' | 'iconUrl'> {
+export type WindowBaseAction = WindowBaseModuleAction & {
     place: 'left' | 'right' | 'inside';
-}
+};
 /**
  * Interface representing the main properties of the `WindowBase` component.
- *
- * Defines the structure and functionality of the component, including its title, subtitle, content,
- * icon URL, menu actions, visual configurations, and other related attributes.
- * title (required) - The main title of the window.
- * subTitle (optional) - Subtitle for the window.
- * children (required) - Content to be rendered inside the window.
- * urlIcon (optional) - URL for the icon displayed in the header.
- * variant (optional) - Visual style of the window, with values `'outlined'` or `'text'`.
- * size (optional) - Size of the window: `'small'` or `'medium'`.
- * color (optional) - Theme color of the window, restricted to `'default'`.
- * selected (optional) - Indicates if the window is selected.
- * version (optional) - Component version (e.g., `1.0.0`).
- * dataTestId (optional) - Identifier for automated testing.
- * onClose (optional) - Function executed when the window is closed.
- *
- * ### Example:
- * ```typescript
- * const windowProps: WindowBaseProps = {
- *   title: 'Main Window',
- *   subTitle: 'Details',
- *   children: <div>Window Content</div>,
- *   urlIcon: 'https://example.com/icon.png',
- *   variant: 'outlined',
- *   menuActions: [{ label: 'Action 1', onClick: () => console.log('Action 1') }],
- *   size: 'medium',
- *   color: 'default',
- *   selected: true,
- *   version: '1.0.0',
- *   dataTestId: 'main-window',
- *   onClose: () => console.log('Cancel Clicked'),
- * };
- * ```
  */
 export interface WindowBaseProps {
     /**
@@ -135,6 +125,11 @@ export interface WindowBaseProps {
      * Useful for displaying version information (e.g., `1.0.0`) in the header or footer.
      */
     version?: string;
+    /**
+     * The build time for the window. si se proporcionana mostrá la versión y la fecha de compilación.
+     *
+     */
+    buildTime?: string;
     /**
      * A unique identifier for automated testing.
      * Provides a `data-testid` attribute for querying this component in tests.

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

@@ -16,6 +16,7 @@ const Window = (props) => {
     title,
     iconUrl,
     version,
+    buildTime,
     moduleCount,
     selected,
     mfProps,
@@ -39,6 +40,7 @@ const Window = (props) => {
       isLoading: loading,
       onClose: () => windowTools.close(),
       version,
+      buildTime,
       actions: memoizedActions,
       windowId,
       selected,

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useWindow.d.ts

@@ -16,6 +16,7 @@ export declare const useWindow: (windowId: string, areaId?: string) => {
     title: string;
     iconUrl: string;
     version: string | undefined;
+    buildTime: string | undefined;
     moduleCount: number | undefined;
     selected: boolean;
     mfProps: any;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useWindow.js

@@ -5,7 +5,7 @@ import { u as useHeaderActions } from "./useHeaderActions.js";
 import { u as usePopupsStore } from "../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore.js";
 import { c as createToaster } from "../../../../../../../../ToastContainer/helpers/toaster.js";
 const useWindow = (windowId, areaId) => {
-  const [emergeType, moduleId, winType, title, iconUrl, version, moduleCount, selected, loading, status, dynamicMFStore] = useAreasStore((state) => {
+  const [emergeType, moduleId, winType, title, iconUrl, version, buildTime, moduleCount, selected, loading, status, dynamicMFStore] = useAreasStore((state) => {
     const window = state.hashWindows[windowId];
     const selected2 = areaId ? state.hashAreas[areaId]?.currentLayoutId === windowId : false;
     return [
@@ -15,6 +15,7 @@ const useWindow = (windowId, areaId) => {
       window?.title,
       window?.iconUrl,
       window?.version,
+      window?.buildTime,
       window?.moduleCount,
       selected2,
       window?.loading,
@@ -39,8 +40,11 @@ const useWindow = (windowId, areaId) => {
   const windowTools = useMemo(
     () => ({
       getWindowId: () => windowId,
-      setActions: (newActions, newVersion) => {
-        setActions(windowId, newActions, newVersion);
+      /**
+       * Actualizar las acciones de la ventana
+       */
+      setActions: (newActions, newVersion, newBuildTime) => {
+        setActions(windowId, newActions, newVersion, newBuildTime);
       },
       getCookie: (id) => getCookie(windowId, id),
       getCookies: (type) => getCookies(windowId, type),
@@ -82,6 +86,7 @@ const useWindow = (windowId, areaId) => {
     title,
     iconUrl,
     version,
+    buildTime,
     moduleCount,
     selected,
     mfProps,

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

@@ -667,11 +667,12 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
           /**
            * setActions
            */
-          setActions: (windowId, newActions, version) => {
+          setActions: (windowId, newActions, version, buildTime) => {
             set((state) => {
               if (state.hashWindows[windowId]) {
                 state.hashWindows[windowId].moduleActions = cloneDeep(newActions);
                 state.hashWindows[windowId].version = version;
+                state.hashWindows[windowId].buildTime = buildTime;
               }
             });
           },

package/components/areas/contexts/AreasContext/types.d.ts

@@ -281,7 +281,7 @@ export interface AreasStoreStateWithActions extends AreasStoreState {
         loadWindowsFromApi: (areaId: string) => void;
     };
     windowActions: {
-        setActions: (windowId: string, newActions: ModuleAction[], version?: string) => void;
+        setActions: (windowId: string, newActions: ModuleAction[], version?: string, buildTime?: string) => void;
         getCookie: (windowId: string, id: string) => Record<string, any> | undefined;
         getCookies: (windowId: string, type: CookieType) => Record<string, any>;
         setCookie: (windowId: string, id: string, type: CookieType, cookie: Record<string, any>) => void;

package/components/areas/types.d.ts

@@ -43,6 +43,10 @@ export type WindowState = {
      * version del Microfrontend, esta version es actualizada normalmente por el ModuleLayout del microfrontend
      */
     version?: string;
+    /**
+     * buildTime del Microfrontend, esta buildTime es actualizada normalmente por el ModuleLayout del microfrontend
+     */
+    buildTime?: string;
     /**
      * Acciones del módulo.
      */

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

@@ -2,6 +2,7 @@ import { RHFAutocompleteAsyncProps } from '../types';
 import { renderMaterialUI } from '../../../../test';
 import { FieldValues } from 'react-hook-form';
 export declare const FIELD_NAME = "rhf-autocomplete-async";
+export declare const FIELD_NAME_AFTER_TIME_SELECTED = "rhf-autocomplete-async-after-time-selected";
 export declare const FIELD_NAME_PRESELECTED = "rhf-autocomplete-async-preselected";
 export declare const FIELD_NAME_PRESELECTED_NOT_IN_OPTIONS = "rhf-autocomplete-async-preselected-not-in-options";
 export declare const FIELD_NAME_PRESELECTED_MULTIPLE = "rhf-autocomplete-async-preselected-multiple";
@@ -11,6 +12,7 @@ export interface OptionsTests {
     name: string;
 }
 export declare const mockItems: OptionsTests[];
+export declare const mockItemAfterTimeSelected: OptionsTests;
 export declare const mockItemPreselected: OptionsTests;
 export declare const mockItemPreselectedMultiple: OptionsTests[];
 export declare const mockItemPreselectedNotInOptions: OptionsTests;
@@ -34,8 +36,8 @@ export declare const onChangeFilterParms: (newValue: string) => {
 /**
  * Renderiza el componente con el contexto de EnvironmentProvider y RHFormProvider.
  */
-export declare const renderWithContexts: (ui: React.ReactElement, initialValuesFormContext?: FieldValues, validationSchema?: any) => ReturnType<typeof renderMaterialUI>;
+export declare const renderWithContexts: (ui: React.ReactElement, initialValuesFormContext?: FieldValues, validationSchema?: any, withFormChangeAuto?: boolean) => ReturnType<typeof renderMaterialUI>;
 /**
  * Renders the RHFAutocompleteAsync component with the provided props.
  */
-export declare const renderRHFAutocompleteAsync: (fieldName: string, overrideProps?: Partial<RHFAutocompleteAsyncProps<OptionsTests>>) => ReturnType<typeof renderMaterialUI>;
+export declare const renderRHFAutocompleteAsync: (fieldName: string, overrideProps?: Partial<RHFAutocompleteAsyncProps<OptionsTests>>, initialValuesFormContext?: FieldValues, validationSchema?: any, withFormChangeAuto?: boolean) => ReturnType<typeof renderMaterialUI>;

package/components/mui_extended/Autocomplete/hooks/useValuesAndHandlers.js

@@ -1,4 +1,5 @@
-import { useState, useRef, useCallback, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { deepEqual } from "fast-equals";
 function useValuesAndHandlers(props) {
   const {
     getOptionLabel,
@@ -19,6 +20,15 @@ function useValuesAndHandlers(props) {
   const [selectedValue, setSelectedValue] = useState(
     value || (multiple ? [] : null)
   );
+  const refValue = useRef(selectedValue);
+  useEffect(() => {
+    if (deepEqual(refValue.current, value)) {
+      return;
+    }
+    const newValue = value || (multiple ? [] : null);
+    refValue.current = newValue;
+    setSelectedValue(newValue);
+  }, [multiple, value]);
   const isOptionEqualToValueLocal = useCallback(
     (option, val) => {
       if (val === null || val === void 0) {

package/components/popups/components/PopupsProvider/contexts/PopupsContext/store.js

@@ -273,11 +273,12 @@ const createPopupsStore = (initProps, storeDevtoolsEnabled = false) => {
           /**
            * setActions: Establece las acciones del popup
            */
-          setActions: (popupId, actions, version) => {
+          setActions: (popupId, actions, version, buildTime) => {
             set((state) => {
               if (state.hashPopups[popupId]) {
                 state.hashPopups[popupId].moduleActions = actions;
                 state.hashPopups[popupId].version = version;
+                state.hashPopups[popupId].buildTime = buildTime;
               }
             });
           },

package/components/popups/components/PopupsProvider/contexts/PopupsContext/types.d.ts

@@ -73,9 +73,13 @@ export interface PopupStorePropsBase extends PartialExcept<Pick<DragResizeWindow
      */
     moduleActions?: ModuleAction[];
     /**
-     * "version" Versión de la ventana
+     * "version" Versión del Microfrontend
      */
     version?: string;
+    /**
+     * "buildTime" BuildTime del Microfrontend
+     */
+    buildTime?: string;
     /**
      * "fnQueryClose" Función de cierre de la consulta
      */
@@ -312,7 +316,7 @@ export interface PopupsProviderStoreStateWithActions extends PopupsProviderStore
         /**
          * setActions: Establece las acciones del popup
          */
-        setActions: (popupId: string, actions: ModuleAction[], version?: string) => void;
+        setActions: (popupId: string, actions: ModuleAction[], version?: string, buildTime?: string) => void;
     };
 }
 export type DefaultPopupsStoreProps = PopupsProviderStoreState;

package/components/popups/components/PopupsProvider/hooks/useHeaderActionsPopups.js

@@ -18,9 +18,7 @@ const useHeaderActionsPopups = ({
   const leftActions = useMemo(() => {
     return getLeftActions(isMobile, moduleActions).map((action) => ({
       ...action,
-      place: "left",
-      iconUrl: action.iconUrl || "",
-      label: action.label || ""
+      place: "left"
     }));
   }, [isMobile, moduleActions]);
   const windowOptions = usePopupsStore(

package/components/popups/components/PopupsProvider/hooks/usePopups.d.ts

@@ -21,6 +21,7 @@ export declare const usePopups: (popupId: string) => {
     loading: boolean | undefined;
     status: import('../../PopupsViewer/types').PopupStatus;
     version: string | undefined;
+    buildTime: string | undefined;
     dynamicMFStore: Omit<import('zustand').StoreApi<import('../../../../WindowBase/contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>, "setState"> & {
         setState(nextStateOrUpdater: import('../../../../WindowBase/contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions | Partial<import('../../../../WindowBase/contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('../../../../WindowBase/contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
     };

package/components/popups/components/PopupsProvider/hooks/usePopups.js

@@ -13,6 +13,7 @@ const usePopups = (popupId) => {
     dynamicMFStore,
     loading,
     version,
+    buildTime,
     subTitle,
     editionInfo,
     zIndex,
@@ -61,8 +62,8 @@ const usePopups = (popupId) => {
   const windowTools = useMemo(
     () => ({
       getWindowId: () => popupId,
-      setActions: (newActions, newVersion) => {
-        setActions(popupId, newActions, newVersion);
+      setActions: (newActions, newVersion, newBuildTime) => {
+        setActions(popupId, newActions, newVersion, newBuildTime);
       },
       getCookie: () => {
         throw new Error("getCookie not implemented");
@@ -88,6 +89,7 @@ const usePopups = (popupId) => {
     [
       popupId,
       version,
+      buildTime,
       setActions,
       //getCookie,
       //getCookies,
@@ -113,6 +115,7 @@ const usePopups = (popupId) => {
     loading,
     status,
     version,
+    buildTime,
     dynamicMFStore,
     windowTools,
     //onTouch,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.53",
+  "version": "9.2.54-beta.2",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {