@m4l/components 9.2.54-beta.1 → 9.2.54

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/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/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/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/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/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,