@m4l/components 9.3.20 → 9.3.21-JAEBeta.1

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

@@ -30,7 +30,8 @@ const Window = (props) => {
     dynamicMFStore,
     windowTools,
     onTouch,
-    memoizedActions
+    memoizedActions,
+    loggedUser
   } = useWindow(windowId, areaId);
   const maximizedId = useAreasStore(
     (state) => areaId ? state.hashAreas[areaId]?.maximizedId : void 0,
@@ -67,7 +68,7 @@ const Window = (props) => {
       selected,
       maximized: !!maximizedId,
       onMouseDown: onTouch,
-      type: emergeType,
+      emergeType,
       collapsed,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId(
@@ -79,14 +80,17 @@ const Window = (props) => {
       children: status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(
         MemonizedWindowBaseMicroFrontend,
         {
+          emergeType,
           moduleId,
           dynamicMFStore,
           windowTools,
+          loggedUser,
           ...mfProps
         }
       ) : /* @__PURE__ */ jsx(
         WindowBaseComponent,
         {
+          emergeType,
           dynamicMFStore,
           windowTools,
           component

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

@@ -31,4 +31,5 @@ export declare const useWindow: (windowId: string, areaId?: string) => {
     windowTools: WindowToolsMF;
     onTouch: () => void;
     memoizedActions: import('../../../../../../../../WindowBase/types').WindowBaseAction[];
+    loggedUser: import('@m4l/core').Maybe<import('@m4l/core').UserAuth>;
 };

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

@@ -3,9 +3,25 @@ import { shallow } from "zustand/shallow";
 import { u as useAreasStore } from "../../../../../../../hooks/useAreas/index.js";
 import { u as useHeaderActions } from "./useHeaderActions.js";
 import { u as usePopupsStore } from "../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore.js";
+import { useAuth } from "@m4l/core";
 import { c as createToaster } from "../../../../../../../../ToastContainer/helpers/toaster.js";
 const useWindow = (windowId, areaId) => {
-  const [emergeType, moduleId, winType, title, subTitle, editionInfo, iconUrl, version, buildTime, moduleCount, selected, loading, status, dynamicMFStore] = useAreasStore((state) => {
+  const [
+    emergeType,
+    moduleId,
+    winType,
+    title,
+    subTitle,
+    editionInfo,
+    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 [
@@ -26,6 +42,7 @@ const useWindow = (windowId, areaId) => {
     ];
   }, shallow);
   const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
+  const { user: loggedUser } = useAuth();
   const component = useAreasStore(
     (state) => state.hashWindows[windowId]?.component,
     shallow
@@ -66,7 +83,7 @@ const useWindow = (windowId, areaId) => {
         throw new Error("show not implemented");
       }
     }),
-    [windowId, version, setActions, getCookie, getCookies, setCookie, close, startProgress, stopProgress, setFnQueryClose, setWindowTitle]
+    [windowId, setActions, getCookie, getCookies, setCookie, close, startProgress, stopProgress, setFnQueryClose, setWindowTitle]
   );
   useEffect(() => {
     if (status === "init") {
@@ -100,7 +117,8 @@ const useWindow = (windowId, areaId) => {
     dynamicMFStore,
     windowTools,
     onTouch,
-    memoizedActions
+    memoizedActions,
+    loggedUser
   };
 };
 export {

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

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }

package/components/areas/index.d.ts

@@ -1,5 +1,5 @@
 export * from './components';
 export * from './contexts';
 export * from './hooks';
-export type { CookieType } from './types';
+export type { CookieType, EmergeType } from './types';
 export * from './dictionary';

package/components/areas/types.d.ts

@@ -148,7 +148,7 @@ export type AreaLayoutStateProps = AreaLayoutProps & WindowState;
 export type EmmitNewLayoutProps = Omit<AreaLayoutMFProps, 'windowId' | 'onClose' | 'areaId'> | Omit<AreaLayoutComponentProps, 'windowId' | 'onClose' | 'areaId'> & {
     winType: string;
     emergeType: string;
-    layoutProps: any;
+    layoutProps: Omit<LayoutItem, 'i'>;
     moduleId: string;
     dynamicParams: Record<string, any>;
     iconUrl: string;

package/components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js

@@ -1,46 +1,15 @@
 import { jsx } from "react/jsx-runtime";
-import React, { useMemo, useState, useCallback } from "react";
+import React from "react";
 import clsx from "clsx";
-import { useModuleDictionary } from "@m4l/core";
 import { R as RootStyled } from "./slots/DistanceToNowFormatterSlots.js";
-import { u as useInterval } from "../../../hooks/useInterval/index.js";
-import { D as DTNF_DICCTIONARY } from "./dictionary.js";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { C as COMPONET_KEY_COMPONENT } from "./constants.js";
 import { D as DistanceToNowFormatterSlots } from "./slots/slots.js";
-import { f as formatDistanceToNow } from "../../../utils/formatDistanceToNow/formatDistanteToNow.js";
+import { u as useDistanceToNowFormatter } from "./hooks/useDistanceToNowFormatter.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 function DistanceToNowFormatter(props) {
   const { presentationTime = "present", date, dataTestId, delay, className, Component = RootStyled, componentProps } = props;
-  const { getLabel } = useModuleDictionary();
-  const dictionary = useMemo(() => {
-    const ret = {
-      label_sentence_past_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PAST_SECONDS),
-      label_sentence_past_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PAST_OTHERS),
-      label_sentence_present_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PRESENT_SECONDS),
-      label_sentence_present_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PRESENT_OTHERS),
-      label_sentence_future_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_FUTURE_SECONDS),
-      label_sentence_future_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_FUTURE_OTHERS),
-      label_unit_time_second: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECOND),
-      label_unit_time_seconds: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECONDS),
-      label_unit_time_minute: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTE),
-      label_unit_time_minutes: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTES),
-      label_unit_time_hour: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOUR),
-      label_unit_time_hours: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOURS),
-      label_unit_time_day: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAY),
-      label_unit_time_days: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAYS),
-      label_unit_time_month: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTH),
-      label_unit_time_months: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTHS),
-      label_unit_time_year: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEAR),
-      label_unit_time_years: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEARS)
-    };
-    return ret;
-  }, [getLabel]);
-  const [time, setTime] = useState(formatDistanceToNow(presentationTime, date, dictionary));
-  const updateTime = useCallback(() => {
-    setTime(formatDistanceToNow(presentationTime, date, dictionary));
-  }, [date, dictionary, presentationTime]);
-  useInterval(updateTime, delay);
+  const { time } = useDistanceToNowFormatter({ presentationTime, date, delay });
   if (Component === React.Fragment) {
     return time;
   }

package/components/formatters/DistanceToNowFormatter/dictionary.d.ts

@@ -19,4 +19,12 @@ export declare const DTNF_DICCTIONARY: {
     readonly LABEL_UNIT_TIME_MONTHS: "distance_to_now_formmater.label_unit_time_months";
     readonly LABEL_UNIT_TIME_YEAR: "distance_to_now_formmater.label_unit_time_year";
     readonly LABEL_UNIT_TIME_YEARS: "distance_to_now_formmater.label_unit_time_years";
+    readonly LABEL_UNIT_TIME_SECONDS_SHORT: "distance_to_now_formmater.label_unit_time_seconds_short";
+    readonly LABEL_UNIT_TIME_MINUTES_SHORT: "distance_to_now_formmater.label_unit_time_minutes_short";
+    readonly LABEL_UNIT_TIME_HOURS_SHORT: "distance_to_now_formmater.label_unit_time_hours_short";
+    readonly LABEL_UNIT_TIME_DAYS_SHORT: "distance_to_now_formmater.label_unit_time_days_short";
+    readonly LABEL_UNIT_TIME_MONTHS_SHORT: "distance_to_now_formmater.label_unit_time_months_short";
+    readonly LABEL_UNIT_TIME_YEARS_SHORT: "distance_to_now_formmater.label_unit_time_years_short";
+    readonly LABEL_SEPARATOR_TIME: "distance_to_now_formmater.label_separator_time";
+    readonly LABEL_SEPARATOR_DATE: "distance_to_now_formmater.label_separator_date";
 };

package/components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { DistanceToNowFormatterProps } from '../types';
+import { FormatDistanceToNowReturn } from '../../../../utils/formatDistanceToNow/types';
+/**
+ * "useDistanceToNowFormatter" que se encarga de retornar el tiempo transcurrido desde una fecha hasta la fecha actual.
+ * Actualizando cada delay configurable a través de props
+ * Tiene 3 tipos de presentaciones:
+ * En tiempo pasado
+ * En tiempo presente
+ * En tiempo futuro
+ *
+ */
+export declare function useDistanceToNowFormatter<T extends React.ElementType>(props: DistanceToNowFormatterProps<T>): FormatDistanceToNowReturn;

package/components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js

@@ -0,0 +1,65 @@
+import { useMemo, useState, useRef, useCallback, useEffect } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { u as useInterval } from "../../../../hooks/useInterval/index.js";
+import { D as DTNF_DICCTIONARY } from "../dictionary.js";
+import { f as formatDistanceToNow } from "../../../../utils/formatDistanceToNow/formatDistanteToNow.js";
+function useDistanceToNowFormatter(props) {
+  const { presentationTime = "present", date, delay } = props;
+  const { getLabel } = useModuleDictionary();
+  const dictionary = useMemo(() => {
+    const ret = {
+      label_sentence_past_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PAST_SECONDS),
+      label_sentence_past_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PAST_OTHERS),
+      label_sentence_present_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PRESENT_SECONDS),
+      label_sentence_present_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PRESENT_OTHERS),
+      label_sentence_future_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_FUTURE_SECONDS),
+      label_sentence_future_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_FUTURE_OTHERS),
+      label_unit_time_second: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECOND),
+      label_unit_time_seconds: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECONDS),
+      label_unit_time_minute: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTE),
+      label_unit_time_minutes: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTES),
+      label_unit_time_hour: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOUR),
+      label_unit_time_hours: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOURS),
+      label_unit_time_day: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAY),
+      label_unit_time_days: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAYS),
+      label_unit_time_month: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTH),
+      label_unit_time_months: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTHS),
+      label_unit_time_year: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEAR),
+      label_unit_time_years: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEARS),
+      label_unit_time_seconds_short: "ss",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECONDS_SHORT),
+      label_unit_time_minutes_short: "mm",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTES_SHORT),
+      label_unit_time_hours_short: "hh",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOURS_SHORT),
+      label_unit_time_days_short: "DD",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAYS_SHORT),
+      label_unit_time_months_short: "MM",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTHS_SHORT),
+      label_unit_time_years_short: "YY",
+      // getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEARS_SHORT),
+      label_separator_time: ":",
+      // getLabel(DTNF_DICCTIONARY.LABEL_SEPARATOR_TIME),
+      label_separator_date: "-"
+      // getLabel(DTNF_DICCTIONARY.LABEL_SEPARATOR_DATE),
+    };
+    return ret;
+  }, [getLabel]);
+  const [time, setTime] = useState(formatDistanceToNow(presentationTime, new Date(date), dictionary));
+  const refTime = useRef({ ...time });
+  const updateTime = useCallback(() => {
+    const newTime = formatDistanceToNow(presentationTime, new Date(date), dictionary);
+    if (refTime.current.value !== newTime.value || refTime.current.unit !== newTime.unit) {
+      refTime.current = newTime;
+      setTime(newTime);
+    }
+  }, [date, dictionary, presentationTime]);
+  useEffect(() => {
+    updateTime();
+  }, [updateTime]);
+  useInterval(updateTime, delay);
+  return time;
+}
+export {
+  useDistanceToNowFormatter as u
+};

package/components/formatters/DistanceToNowFormatter/index.d.ts

@@ -1,2 +1,3 @@
 export * from './DistanceToNowFormatter';
+export * from './hooks/useDistanceToNowFormatter';
 export { getDistanceToNowFormatterComponentsDictionary } from './dictionary';

package/components/formatters/DistanceToNowFormatter/types.d.ts

@@ -11,7 +11,10 @@ export type DistanceToNowFormatterProps<T extends React.ElementType = typeof Roo
      */
     componentProps?: React.ComponentPropsWithoutRef<T>;
     presentationTime: PresentationTimeType;
-    date: Date;
+    /**
+     * Se maneja en string, para evitar re-renderizaciones innecesarias debido a que Date es un objeto y se crea un nuevo objeto cada vez que se pasa como prop.
+     */
+    date: string;
     delay?: number;
     dataTestId?: string;
     className?: string;

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

@@ -1,6 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useId, useState, useCallback, useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
+import { r as rhfAutocompleteClasses } from "./constants.js";
+import clsx from "clsx";
 import { A as AutocompleteRootStyled, L as LabelStyled } from "./slots/RHFAutocompleteSlots.js";
 import { A as Autocomplete } from "../../mui_extended/Autocomplete/Autocomplete.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
@@ -21,7 +23,8 @@ function RHFAutocomplete(props) {
     mandatory,
     mandatoryMessage,
     multiple,
-    refresh
+    refresh,
+    className
     // onChange: onChangeRHF,
   } = props;
   const htmlForId = useId();
@@ -59,6 +62,7 @@ function RHFAutocomplete(props) {
   return /* @__PURE__ */ jsx(
     AutocompleteRootStyled,
     {
+      className: clsx(className, rhfAutocompleteClasses.autocompleteRoot),
       ownerState: { ...ownerState },
       size,
       children: /* @__PURE__ */ jsx(

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

@@ -7,3 +7,4 @@
  */
 export declare const RFHAUTOCOMPLETE_KEY_COMPONENT = "RHFM4LAutocomplete";
 export declare const RFHAUTOCOMPLETE_CLASS_NAME_SPECIFY = "RHFM4LclasssAutocompleCssSpecificity";
+export declare const rhfAutocompleteClasses: Record<string, string>;

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

@@ -1,4 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { R as RFHAutocompleteSlots } from "./slots/RHFAutocompleteEnum.js";
 const RFHAUTOCOMPLETE_KEY_COMPONENT = "RHFM4LAutocomplete";
+const rhfAutocompleteClasses = getComponentClasses(RFHAUTOCOMPLETE_KEY_COMPONENT, RFHAutocompleteSlots);
 export {
-  RFHAUTOCOMPLETE_KEY_COMPONENT as R
+  RFHAUTOCOMPLETE_KEY_COMPONENT as R,
+  rhfAutocompleteClasses as r
 };

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

@@ -22,7 +22,8 @@ function RHFAutocompleteAsync(props) {
     multiple,
     disabled,
     skeletonWidth,
-    responseToCamelCase
+    responseToCamelCase,
+    className
   } = props;
   const [state, dispatch] = useReducer(
     RHFAutocompleteAsyncReducer(onChangeFilterParms),
@@ -74,6 +75,7 @@ function RHFAutocompleteAsync(props) {
   return /* @__PURE__ */ jsx(
     RHFAutocomplete,
     {
+      className,
       name,
       loading: state.loading,
       label,

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

@@ -41,6 +41,10 @@ export interface RHFAutocompleteAsyncProps<T extends any = unknown> extends Omit
      * Whether the autocomplete is multiple
      */
     multiple?: boolean;
+    /**
+     * Class name for the autocomplete
+     */
+    className?: string;
 }
 /**
  * Defines the types of Slots available for the Autocomplete.

package/components/hook-form/RHFormContext/index.d.ts

@@ -3,7 +3,7 @@ import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from
 /**
  * TODO: Documentar
  */
-export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
+export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, undefined>;
 /**
  * TODO: Documentar
  */

package/components/mui_extended/ToggleIconButton/ToggleIconButton.js

@@ -14,20 +14,24 @@ const ToggleAbleIconButton = ({
   variant = "text",
   color,
   badgeProps,
+  disabled,
+  className,
   ...props
 }) => {
   const ownerState = {
     isToggled,
-    variant
+    variant,
+    disabled
   };
   return /* @__PURE__ */ jsx(
     ToggleIconButtonRootStyled,
     {
       ...props,
       variant,
+      disabled,
       color,
       badgeProps,
-      className: clsx(getComponentSlotRoot(TOGGLE_ICON_BUTTON_KEY_COMPONENT), TOGGLE_ICON_BUTTON_CLASS_NAME_SPECIFY),
+      className: clsx(className, getComponentSlotRoot(TOGGLE_ICON_BUTTON_KEY_COMPONENT), TOGGLE_ICON_BUTTON_CLASS_NAME_SPECIFY),
       ...getPropDataTestId(TOGGLE_ICON_BUTTON_KEY_COMPONENT, ToggleIconButtonSlots.toggleIconButtonRoot, dataTestId),
       role: "toggle-iconButton",
       ownerState,

package/components/mui_extended/ToggleIconButton/ToggleIconButton.styles.js

@@ -24,6 +24,15 @@ const toggleIconButtonStyles = {
         },
         "&:focus-visible": {
           backgroundColor: theme.vars.palette.primary.enabledOpacity
+        },
+        ...ownerState?.disabled && {
+          backgroundColor: theme.vars.palette.default.opacity,
+          "& .M4LIcon-root .M4LIcon-icon": {
+            backgroundColor: `${theme.vars.palette.text.disabled} !important`
+          },
+          ...ownerState?.variant === "outline" && {
+            backgroundColor: theme.vars.palette.border.disabled
+          }
         }
       }
     }

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

@@ -22,6 +22,7 @@ export interface ToggleIconButtonProps extends Omit<IconButtonProps, 'onClick' |
  * Estado del propietario del componente ToggleIconButton.
  */
 export interface ToggleIconButtonOwnerState extends Record<string, unknown> {
+    disabled?: boolean;
     /** Indica si el valor es verdadero o falso. */
     isToggled?: boolean;
     /** Valor de la variante del componente. */

package/components/mui_extended/index.d.ts

@@ -23,7 +23,7 @@ export * from './Tabs';
 export * from './TabContent';
 export * from './TabContext';
 export { getPagerComponentsDictionary } from '../Pager/dicctionary';
-export * from './Typography/Typography';
+export * from './Typography';
 export * from './ToggleButton';
 export * from './ToggleIconButton';
 export * from './NavLink';

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

@@ -17,7 +17,7 @@ export declare const usePopups: (popupId: string) => {
     iconUrl: string;
     selected: boolean;
     mfProps: import('../../../../MFLoader/types').MFBaseProps | undefined;
-    component: import('../../../../WindowBase/types').JSX_REACT_NODE;
+    component: import('../../../../WindowBase').JSX_REACT_NODE;
     loading: boolean | undefined;
     status: import('../../PopupsViewer/types').PopupStatus;
     version: string | undefined;
@@ -32,7 +32,7 @@ export declare const usePopups: (popupId: string) => {
     variant: import('../contexts/PopupsContext/types').PopupVariantType;
     draggable: boolean;
     resizable: boolean;
-    defaultPosition: import('../../../../DragResizeWindowRND/types').DefaultPosition | undefined;
+    defaultPosition: import('../../../..').RNDDefaultPosition | undefined;
     bounds: import('../../../../DragResizeWindowRND/types').DraggableWindowBounds | undefined;
     onMouseDown: ((e: MouseEvent) => void) | undefined;
     allowHeightResizeContainer: boolean | undefined;

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

@@ -89,7 +89,6 @@ const usePopups = (popupId) => {
     }),
     [
       popupId,
-      version,
       buildTime,
       setActions,
       //getCookie,

package/components/popups/components/PopupsViewer/PopupsViewer.js

@@ -7,7 +7,7 @@ import { u as useSizeContainer } from "../../../../hooks/useSizeContainer/index.
 import { R as RootStyled } from "./slots/popupsViewerSlots.js";
 import { useRef, createRef, useEffect, memo } from "react";
 const PopupsViewer = (props) => {
-  const { groupId = "global", onResizeStart, onResizeStop, onDragStart, onDragStop, containerElement } = props;
+  const { groupId = "global", onResizeStart, onResizeStop, onDragStart, onDragStop, containerElement, className, loggedUser } = props;
   const popupsIds = usePopupsStore(
     (state) => state.popupsIds.filter((pId) => groupId === state.hashPopups[pId].groupId && state.hashPopups[pId].status !== "closing"),
     shallow
@@ -29,7 +29,7 @@ const PopupsViewer = (props) => {
   if (!containerElement || !containerSize) {
     return null;
   }
-  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { baseZindex }, children: /* @__PURE__ */ jsx(TransitionGroup, { children: popupsIds.map((id) => {
+  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { baseZindex }, className, children: /* @__PURE__ */ jsx(TransitionGroup, { children: popupsIds.map((id) => {
     return /* @__PURE__ */ jsx(
       CSSTransition,
       {
@@ -57,7 +57,8 @@ const PopupsViewer = (props) => {
             "data-testid": "popup",
             popupId: id,
             containerElement,
-            containerSize
+            containerSize,
+            loggedUser
           },
           id
         )

package/components/popups/components/PopupsViewer/subcomponents/Popup/Popup.js

@@ -11,7 +11,7 @@ import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../WindowBase
 import { W as WindowBaseComponent } from "../../../../../WindowBase/subcomponents/Component/index.js";
 import { W as WindowBase } from "../../../../../WindowBase/WindowBase.js";
 const Popup = forwardRef((props, ref) => {
-  const { popupId, containerElement, containerSize, style, onResizeStart, onResizeStop, onDragStart, onDragStop } = props;
+  const { popupId, containerElement, containerSize, style, onResizeStart, onResizeStop, onDragStart, onDragStop, loggedUser } = props;
   const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
   const { bringPopupOnFront } = usePopupsStore((state) => state.popupsActions, shallow);
   const { close } = usePopupsStore((state) => state.popupActions, shallow);
@@ -118,7 +118,7 @@ const Popup = forwardRef((props, ref) => {
           isLoading: loading,
           windowId: popupId,
           selected,
-          type: "popup",
+          emergeType: "popup",
           variant: "outlined",
           ...process.env.NODE_ENV !== "production" ? {
             [TEST_PROP_ID]: getNameDataTestId(
@@ -129,14 +129,17 @@ const Popup = forwardRef((props, ref) => {
           children: winType === "microfrontend" ? /* @__PURE__ */ jsx(
             MemonizedWindowBaseMicroFrontend,
             {
+              emergeType: "popup",
               moduleId,
               dynamicMFStore,
               windowTools,
+              loggedUser,
               ...mfProps ?? { debugPort: 0, prefix: "" }
             }
           ) : /* @__PURE__ */ jsx(
             WindowBaseComponent,
             {
+              emergeType: "popup",
               dynamicMFStore,
               windowTools,
               component

package/components/popups/components/PopupsViewer/subcomponents/Popup/types.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties } from 'react';
 import { ContainerSize } from '../../../../../../utils/types';
+import { AuthUserType } from '@m4l/core';
 export type ResizeReason = 'start' | 'resize' | 'stop';
 export interface PopupProps {
     /**
@@ -34,4 +35,8 @@ export interface PopupProps {
      * "onDragStop" Función que se ejecuta cuando se termina de arrastrar el popup
      */
     onDragStop?: () => void;
+    /**
+     * "loggedUser" Usuario logueado
+     */
+    loggedUser?: AuthUserType;
 }

package/components/popups/components/PopupsViewer/types.d.ts

@@ -3,14 +3,17 @@ import { PopupViewerSlots } from './slots/slots';
 import { POPUPS_VIEWER_KEY_COMPONENT } from './constants';
 import { PopupStoreProps, PopupsProviderStoreState } from '../PopupsProvider/contexts/PopupsContext/types';
 import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
+import { AuthUserType } from '@m4l/core';
 export type PopupViewerSlotsType = keyof typeof PopupViewerSlots;
 export type PopupsViewerProps = {
+    className?: string;
     containerElement?: HTMLElement;
     groupId?: string;
     onResizeStart?: () => void;
     onResizeStop?: () => void;
     onDragStart?: () => void;
     onDragStop?: () => void;
+    loggedUser?: AuthUserType;
 };
 export type PopupStatus = 'init' | 'closing' | 'hidden';
 export interface PopupOwnerState extends Pick<PopupStoreProps, 'status' | 'subTitle' | 'editionInfo' | 'zIndex' | 'variant'> {

package/hooks/index.d.ts

@@ -12,3 +12,4 @@ export * from './useDynamicFilterAndSort';
 export * from './useDataGridPersistence';
 export * from './usePopoverContainer';
 export * from './useIsVisible';
+export * from './useSizeContainer';

package/hooks/useSizeContainer/index.d.ts

@@ -1,8 +1,9 @@
 import { ContainerSize } from '../../utils/types';
+import { UseSizeContainerOptions } from './types';
 /**
  * useSizeContainer: hook encargado de obtener el tamaño de un elemento contenedor
  * TODO: Usar throttle para evitar llamadas innecesarias
  * @param containerElement
  * @returns un objeto con el ancho y alto del contenedor
  */
-export declare function useSizeContainer(containerElement?: HTMLElement | undefined | null): ContainerSize | undefined;
+export declare function useSizeContainer(containerElement?: HTMLElement | undefined | null, options?: UseSizeContainerOptions): ContainerSize | undefined;