@m4l/components 9.3.25-beta.0 → 9.3.25

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

@@ -0,0 +1,57 @@
+import { Theme } from '@mui/material';
+import { DeepKeyOf } from '../../../utils/types';
+import { Sizes } from '@m4l/styles';
+import { IconsFormatterSlots } from './slots/IconsFormatterEnum';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { ICONS_FORMATTER_KEY_COMPONENT } from './constants';
+export type IconColorDeep = DeepKeyOf<Theme['vars']['palette']> | string;
+/**
+ * Configuración para un solo icono
+ */
+export interface IconConfig {
+    /**
+     * URL o ruta de la imagen del icono
+     */
+    iconUrl: string;
+    /**
+     * Tooltip que se mostrará al pasar el cursor sobre el icono
+     */
+    tooltip?: string;
+    /**
+     * Función que se ejecuta al hacer clic en el icono
+     */
+    onClick?: () => void;
+    /**
+     * Data test id para testing
+     */
+    dataTestId?: string;
+    /**
+     * Controla la visibilidad del icono
+     */
+    visible?: boolean;
+    /**
+     * Color del icono
+     */
+    color?: IconColorDeep;
+    /**
+     * Tamaño del icono
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+/**
+ * Props para el IconsFormatter
+ */
+export interface IconsFormatterProps {
+    /**
+     * Array de configuraciones de iconos (puede ser uno o varios)
+     */
+    icons: IconConfig | IconConfig[];
+}
+/**
+ * Tipos de slots disponibles para el TagFormatter
+ */
+export type IconsFormatterSlotsType = IconsFormatterSlots;
+/**
+ * Estilos aplicables al TagFormatter
+ */
+export type IconsFormatterStyles = M4LOverridesStyleRules<IconsFormatterSlotsType, typeof ICONS_FORMATTER_KEY_COMPONENT, Theme>;

package/components/formatters/IconsFormatter/types.js

@@ -0,0 +1 @@
+

package/components/formatters/TagsFormatter/TagsFormatter.d.ts

@@ -0,0 +1,5 @@
+import { TagsFormatterProps } from './types';
+/**
+ * Formatter para mostrar uno o múltiples tags
+ */
+export declare const TagsFormatter: (props: TagsFormatterProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/formatters/TagsFormatter/TagsFormatter.js

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { r as renderTag } from "./helpers/renderTag.js";
+import { r as renderMultipleTags } from "./helpers/renderMultipleTag.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+const TagsFormatter = (props) => {
+  const { tags, className, size } = props;
+  const { currentSize } = useComponentSize(size);
+  const tagsArray = useMemo(() => {
+    if (!tags) {
+      return null;
+    }
+    return Array.isArray(tags) ? tags : [tags];
+  }, [tags]);
+  if (!tagsArray || tagsArray.length === 0) {
+    return null;
+  }
+  if (tagsArray.length === 1) {
+    return renderTag({
+      tag: tagsArray[0],
+      size: currentSize,
+      className
+    });
+  }
+  return renderMultipleTags(tagsArray, currentSize, className);
+};
+export {
+  TagsFormatter as T
+};

package/components/formatters/TagsFormatter/TagsFormatter.styles.d.ts

@@ -0,0 +1,2 @@
+import { TagsFormatterStyles } from './types';
+export declare const tagsFormatterStyles: TagsFormatterStyles;

package/components/formatters/TagsFormatter/TagsFormatter.styles.js

@@ -0,0 +1,41 @@
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { getContrastTextColor } from "@m4l/graphics";
+const tagsFormatterStyles = {
+  /**
+   * Contenedor de multiple tags
+   */
+  tagsContainer: ({ theme }) => ({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: theme.vars.size.baseSpacings.sp1,
+    maxHeight: "100%",
+    overflow: "hidden"
+  }),
+  /**
+   * Estilos del tag individual
+   */
+  tag: ({ theme, ownerState }) => {
+    const backgroundColor = ownerState?.backgroundColor || "#000000";
+    const textColor = getContrastTextColor(backgroundColor);
+    return {
+      display: "inline-block",
+      paddingLeft: theme.vars.size.baseSpacings.sp2,
+      paddingRight: theme.vars.size.baseSpacings.sp2,
+      borderRadius: theme.vars.size.borderRadius.r1,
+      cursor: "default",
+      maxWidth: "200px",
+      whiteSpace: "nowrap",
+      overflowY: "hidden",
+      overflowX: "auto",
+      verticalAlign: "middle",
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base"),
+      ...theme.typography.body,
+      lineHeight: getSizeStyles(theme, ownerState?.size || "medium", "base").height,
+      backgroundColor,
+      color: textColor
+    };
+  }
+};
+export {
+  tagsFormatterStyles as t
+};

package/components/formatters/TagsFormatter/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Clave del componente TagsFormatter
+ */
+export declare const TAGS_FORMATTER_KEY_COMPONENT = "M4LTagsFormatter";
+export declare const TAGS_FORMATTER_CLASSES: Record<string, string>;

package/components/formatters/TagsFormatter/constants.js

@@ -0,0 +1,11 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { T as TagsFormatterSlots } from "./slots/TagsFormatterEnum.js";
+const TAGS_FORMATTER_KEY_COMPONENT = "M4LTagsFormatter";
+const TAGS_FORMATTER_CLASSES = getComponentClasses(
+  TAGS_FORMATTER_KEY_COMPONENT,
+  TagsFormatterSlots
+);
+export {
+  TAGS_FORMATTER_KEY_COMPONENT as T,
+  TAGS_FORMATTER_CLASSES as a
+};

package/components/formatters/TagsFormatter/helpers/renderMultipleTag.d.ts

@@ -0,0 +1,8 @@
+import { TagConfig } from '../types';
+/**
+ * Helper que renderiza múltiples tags
+ * @param tags - Array de tags
+ * @param size - Tamaño de los chips
+ * @returns Array de componentes de tags renderizados
+ */
+export declare const renderMultipleTags: (tags: TagConfig[], size: "small" | "medium", className?: string) => import("react/jsx-runtime").JSX.Element;

package/components/formatters/TagsFormatter/helpers/renderMultipleTag.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { T as TagsContainerStyled } from "../slots/TagsFormatterSlots.js";
+import { r as renderTag } from "./renderTag.js";
+const renderMultipleTags = (tags, size, className) => {
+  return /* @__PURE__ */ jsx(TagsContainerStyled, { children: tags.map((tag, index) => {
+    const tagWithKey = {
+      ...tag,
+      key: tag.key || `${tag.label}-${index}`
+    };
+    return renderTag({
+      tag: tagWithKey,
+      size,
+      className
+    });
+  }) });
+};
+export {
+  renderMultipleTags as r
+};

package/components/formatters/TagsFormatter/helpers/renderTag.d.ts

@@ -0,0 +1,7 @@
+import { RenderTagProps } from '../types';
+/**
+ * Helper que renderiza un tag
+ * @param props - Props del tag
+ * @returns Componente de tag renderizado
+ */
+export declare const renderTag: (props: RenderTagProps) => import("react/jsx-runtime").JSX.Element;

package/components/formatters/TagsFormatter/helpers/renderTag.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { T as Tag } from "../subcomponents/Tag/Tag.js";
+const renderTag = (props) => {
+  const { tag, size, className } = props;
+  return /* @__PURE__ */ jsx(Tag, { ...tag, size, className });
+};
+export {
+  renderTag as r
+};

package/components/formatters/TagsFormatter/helpers/validateHexColor.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Valida que un color sea hexadecimal válido
+ * - Debe existir
+ * - Debe empezar con #
+ * @param backgroundColor - Color a validar
+ * @returns true si el color es válido, false en caso contrario
+ */
+export declare const validateHexColor: (backgroundColor: string) => boolean;

package/components/formatters/TagsFormatter/helpers/validateHexColor.js

@@ -0,0 +1,9 @@
+const validateHexColor = (backgroundColor) => {
+  if (!backgroundColor) {
+    return false;
+  }
+  return backgroundColor.startsWith("#");
+};
+export {
+  validateHexColor as v
+};

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

@@ -0,0 +1,2 @@
+export { TagsFormatter } from './TagsFormatter';
+export type { TagsFormatterProps } from './types';

package/components/formatters/TagsFormatter/index.js

@@ -0,0 +1 @@
+

package/components/formatters/TagsFormatter/slots/TagsFormatterEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum TagsFormatterSlots {
+    root = "root",
+    tagsContainer = "tagsContainer",
+    tag = "tag"
+}

package/components/formatters/TagsFormatter/slots/TagsFormatterEnum.js

@@ -0,0 +1,9 @@
+var TagsFormatterSlots = /* @__PURE__ */ ((TagsFormatterSlots2) => {
+  TagsFormatterSlots2["root"] = "root";
+  TagsFormatterSlots2["tagsContainer"] = "tagsContainer";
+  TagsFormatterSlots2["tag"] = "tag";
+  return TagsFormatterSlots2;
+})(TagsFormatterSlots || {});
+export {
+  TagsFormatterSlots as T
+};

package/components/formatters/TagsFormatter/slots/TagsFormatterSlots.d.ts

@@ -0,0 +1,6 @@
+export declare const TagsContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TagStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/formatters/TagsFormatter/slots/TagsFormatterSlots.js

@@ -0,0 +1,16 @@
+import { styled } from "@mui/material";
+import { T as TAGS_FORMATTER_KEY_COMPONENT } from "../constants.js";
+import { T as TagsFormatterSlots } from "./TagsFormatterEnum.js";
+import { t as tagsFormatterStyles } from "../TagsFormatter.styles.js";
+const TagsContainerStyled = styled("div", {
+  name: TAGS_FORMATTER_KEY_COMPONENT,
+  slot: TagsFormatterSlots.tagsContainer
+})(tagsFormatterStyles.tagsContainer);
+const TagStyled = styled("div", {
+  name: TAGS_FORMATTER_KEY_COMPONENT,
+  slot: TagsFormatterSlots.tag
+})(tagsFormatterStyles.tag);
+export {
+  TagsContainerStyled as T,
+  TagStyled as a
+};

package/components/formatters/TagsFormatter/subcomponents/Tag/Tag.d.ts

@@ -0,0 +1,5 @@
+import { TagConfig } from '../../types';
+/**
+ * Componente Tag que muestra un tag con color hexadecimal
+ */
+export declare const Tag: (props: TagConfig) => import("react/jsx-runtime").JSX.Element | null;

package/components/formatters/TagsFormatter/subcomponents/Tag/Tag.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { v as validateHexColor } from "../../helpers/validateHexColor.js";
+import { a as TagStyled } from "../../slots/TagsFormatterSlots.js";
+import clsx from "clsx";
+import { a as TAGS_FORMATTER_CLASSES } from "../../constants.js";
+import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
+const Tag = (props) => {
+  const { label, backgroundColor, size, className } = props;
+  const { currentSize } = useComponentSize(size);
+  const ownerState = useMemo(
+    () => ({
+      size: currentSize,
+      backgroundColor
+    }),
+    [currentSize, backgroundColor]
+  );
+  if (!validateHexColor(backgroundColor)) {
+    console.error(
+      `backgroundColor no válido: "${backgroundColor}". backgroundColor debe ser un color hexadecimal.`
+    );
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    TagStyled,
+    {
+      ownerState,
+      className: clsx(className, TAGS_FORMATTER_CLASSES.root),
+      children: label
+    }
+  );
+};
+export {
+  Tag as T
+};

package/components/formatters/TagsFormatter/subcomponents/Tag/index.d.ts

@@ -0,0 +1 @@
+export { Tag } from './Tag';

package/components/formatters/TagsFormatter/subcomponents/Tag/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,47 @@
+import { Maybe } from '@m4l/core';
+import { Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { Theme } from '@mui/material';
+import { TAGS_FORMATTER_KEY_COMPONENT } from './constants';
+import { TagsFormatterSlots } from './slots/TagsFormatterEnum';
+/**
+ * Props de configuración de un tag
+ */
+export interface TagConfig {
+    key?: number | string;
+    label: string;
+    backgroundColor: string;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    className?: string;
+}
+/**
+ * Props del TagFormatter
+ */
+export interface TagsFormatterProps {
+    tags: Maybe<TagConfig | TagConfig[]>;
+    className?: string;
+    dataTestId?: string;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+/**
+ * Props del renderTag
+ */
+export interface RenderTagProps {
+    tag: TagConfig;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    className?: string;
+}
+/**
+ * Owner state del TagFormatter
+ */
+export interface TagFormatterOwnerState extends Pick<TagConfig, 'size'> {
+    backgroundColor?: string;
+}
+/**
+ * Tipos de slots disponibles para el TagFormatter
+ */
+export type TagsFormatterSlotsType = TagsFormatterSlots;
+/**
+ * Estilos aplicables al TagFormatter
+ */
+export type TagsFormatterStyles = M4LOverridesStyleRules<TagsFormatterSlotsType, typeof TAGS_FORMATTER_KEY_COMPONENT, Theme>;

package/components/formatters/index.d.ts

@@ -1,10 +1,11 @@
 export { BooleanFormatter } from './BooleanFormatter/BooleanFormatter';
 export * from './ChipStatusFormatter';
 export { getFormatDate, DateFormatter } from './DateFormatter/DateFormatter';
-export { UncertaintyFormatter, getUncertaintyFormat } from './UncertaintyFormatter/UncertaintyFormatter';
-export { PointsFormatter, getFormatPoints } from './PointsFormatter/PointsFormatter';
-export { getFormatConcatenated, ConcatenatedFormatter } from './ConcatenatedFormatter/ConcatenatedFormatter';
-export { useFormatPeriod, PeriodFormatter } from './PeriodFormatter/PeriodFormatter';
-export { PriceFormatter, getFormatPrice } from './PriceFormatter/PriceFormatter';
+export { UncertaintyFormatter, getUncertaintyFormat, } from './UncertaintyFormatter/UncertaintyFormatter';
+export { PointsFormatter, getFormatPoints, } from './PointsFormatter/PointsFormatter';
+export { getFormatConcatenated, ConcatenatedFormatter, } from './ConcatenatedFormatter/ConcatenatedFormatter';
+export { useFormatPeriod, PeriodFormatter, } from './PeriodFormatter/PeriodFormatter';
+export { PriceFormatter, getFormatPrice, } from './PriceFormatter/PriceFormatter';
 export * from './DistanceToNowFormatter';
 export type { UncertaintyRange } from './UncertaintyFormatter/types';
+export { TagsFormatter } from './TagsFormatter';

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, undefined>;
+export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
 /**
  * TODO: Documentar
  */

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

@@ -17,7 +17,7 @@ export interface CircularProgressProps extends Omit<MUICircularProgressProps, 'c
      * Este debe ser un valor de la paleta de colores personalizada (`ComponentPalletColor`),
      * restringido actualmente al color `primary`.
      */
-    color?: ComponentPalletColor;
+    color?: Extract<ComponentPalletColor, 'primary'>;
     /**
      * Tamaño del componente.
      * Solo se aceptan los valores `small` y `medium`, que representan tamaños predefinidos.

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

@@ -262,14 +262,10 @@ const createPopupsStore = (initProps, storeDevtoolsEnabled = false) => {
           /**
            * closePopup: Cierra un popup
            */
-          close: (popupId, useFnQueryClose = true) => {
+          close: (popupId) => {
             if (!get().hashPopups[popupId]) {
               return;
             }
-            if (get().hashPopups[popupId].fnQueryClose && useFnQueryClose) {
-              get().hashPopups[popupId].fnQueryClose?.();
-              return;
-            }
             set((state) => {
               state.hashPopups[popupId].status = "closing";
             });

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

@@ -296,7 +296,7 @@ export interface PopupsProviderStoreStateWithActions extends PopupsProviderStore
         /**
          * pasa el status a closing para que las las transiciones se ejecuten.
          */
-        close: (popupId: string, useFnQueryClose?: boolean) => void;
+        close: (popupId: string) => void;
         /**
          * Modifica un popup espeficio
          */

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

@@ -5,6 +5,9 @@ import { WindowToolsMF } from '../../../../WindowBase/contexts';
  * Este hook encapsula la lógica relacionada con el estado y las funciones necesarias
  * para el componente Popup. Retorna un objeto con el estado, las acciones y las herramientas
  * de la ventana popup.
+ * @param {string} areaId - Identificador del área.
+ * @param {string} popupId - Identificador del popup.
+ * @returns {Object} Objeto con estado, acciones y herramientas del popup.
  */
 export declare const usePopups: (popupId: string) => {
     winType: "component" | "microfrontend";
@@ -14,8 +17,7 @@ export declare const usePopups: (popupId: string) => {
     iconUrl: string;
     selected: boolean;
     mfProps: import('../../../../MFLoader/types').MFBaseProps | undefined;
-    component: import('../../../../WindowBase').JSX_REACT_NODE | undefined;
-    componentProps: Record<string, any> | undefined;
+    component: import('../../../../WindowBase').JSX_REACT_NODE;
     loading: boolean | undefined;
     status: import('../../PopupsViewer/types').PopupStatus;
     version: string | undefined;

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

@@ -43,10 +43,6 @@ const usePopups = (popupId) => {
     (state) => state.hashPopups[popupId].winType === "component" ? state.hashPopups[popupId].component : void 0,
     shallow
   );
-  const componentProps = usePopupsStore(
-    (state) => state.hashPopups[popupId].winType === "component" ? state.hashPopups[popupId].componentProps : void 0,
-    shallow
-  );
   const selectedPopupId = usePopupsStore(
     (state) => state.hashGroups[state.hashPopups[popupId].groupId].selectedPopupId,
     shallow
@@ -69,21 +65,16 @@ const usePopups = (popupId) => {
       setActions: (newActions, newVersion, newBuildTime) => {
         setActions(popupId, newActions, newVersion, newBuildTime);
       },
-      /**
-       * TODO: Implementar
-       */
       getCookie: () => {
-        return void 0;
+        throw new Error("getCookie not implemented");
       },
-      /**
-       * TODO: Implementar
-       */
       getCookies: () => {
-        return {};
+        throw new Error("getCookies not implemented");
       },
-      setCookie: (_key, _value) => {
+      setCookie: (key, value) => {
+        throw new Error(`setCookie not implemented: ${key}, ${value}`);
       },
-      close: (useFnQueryClose = true) => close(popupId, useFnQueryClose),
+      close: () => close(popupId),
       startProgress: () => startProgress(popupId),
       stopProgress: () => stopProgress(popupId),
       setFnQueryClose: (fnQueryClose) => setFnQueryClose(popupId, fnQueryClose),
@@ -98,6 +89,7 @@ const usePopups = (popupId) => {
     }),
     [
       popupId,
+      buildTime,
       setActions,
       //getCookie,
       //getCookies,
@@ -105,10 +97,7 @@ const usePopups = (popupId) => {
       close,
       startProgress,
       stopProgress,
-      setFnQueryClose,
-      update,
-      hide,
-      show
+      setFnQueryClose
     ]
   );
   const memoizedActions = useHeaderActionsPopups({
@@ -123,7 +112,6 @@ const usePopups = (popupId) => {
     selected: selectedPopupId === popupId,
     mfProps,
     component,
-    componentProps,
     loading,
     status,
     version,

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

@@ -33,7 +33,7 @@ const PopupsViewer = (props) => {
     return /* @__PURE__ */ jsx(
       CSSTransition,
       {
-        timeout: { appear: 0, enter: 0, exit: 0 },
+        timeout: { appear: 0, enter: 1300, exit: 0 },
         nodeRef: popupRefsMap.current[id],
         unmountOnExit: true,
         onEntered: () => {

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

@@ -32,7 +32,7 @@ const popupsViewerStyles = {
     },
     "&.fade-enter-active": {
       opacity: 1,
-      transition: "opacity 30ms"
+      transition: "opacity 300ms"
     },
     "&.fade-enter-done": {
       opacity: 1

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect, useMemo } from "react";
+import { forwardRef, useRef, useEffect } from "react";
 import { shallow } from "zustand/shallow";
 import { u as usePopupsStore } from "../../../PopupsProvider/hooks/usePopupsStore.js";
 import { P as PopupDragWindowRootStyled } from "../../slots/popupsViewerSlots.js";
@@ -9,11 +9,10 @@ import { a as POPUPS_VIEWER_CLASS_NAME } from "../../constants.js";
 import { a as getNameDataTestId } from "../../../../../../test/getNameDataTestId.js";
 import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../WindowBase/subcomponents/MicroFrontend/MicroFrontend.js";
 import { W as WindowBaseComponent } from "../../../../../WindowBase/subcomponents/Component/index.js";
-import { d as deepShallow } from "../../../../../../utils/deepShallow.js";
 import { W as WindowBase } from "../../../../../WindowBase/WindowBase.js";
 const Popup = forwardRef((props, ref) => {
   const { popupId, containerElement, containerSize, style, onResizeStart, onResizeStop, onDragStart, onDragStop, loggedUser } = props;
-  const popup = usePopupsStore((state) => state.hashPopups[popupId], deepShallow);
+  const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
   const { bringPopupOnFront } = usePopupsStore((state) => state.popupsActions, shallow);
   const { close } = usePopupsStore((state) => state.popupActions, shallow);
   const refHandler = useRef(null);
@@ -33,7 +32,6 @@ const Popup = forwardRef((props, ref) => {
     windowTools,
     mfProps,
     component,
-    componentProps,
     //onTouch,
     memoizedActions,
     loading,
@@ -77,33 +75,6 @@ const Popup = forwardRef((props, ref) => {
       refHandler.current?.ensureVisible();
     }
   }, [popup.enforceVisibleCount, popupId]);
-  const memoComponent = useMemo(() => {
-    if (winType === "microfrontend") {
-      return /* @__PURE__ */ jsx(
-        MemonizedWindowBaseMicroFrontend,
-        {
-          emergeType: "popup",
-          moduleId,
-          dynamicMFStore,
-          windowTools,
-          loggedUser,
-          ...mfProps ?? { debugPort: 0, prefix: "" }
-        }
-      );
-    } else {
-      return /* @__PURE__ */ jsx(
-        WindowBaseComponent,
-        {
-          id: popupId,
-          emergeType: "popup",
-          dynamicMFStore,
-          windowTools,
-          component,
-          componentProps
-        }
-      );
-    }
-  }, [winType, component, componentProps, moduleId, dynamicMFStore, windowTools, loggedUser, mfProps, popupId]);
   if (!popup) {
     return null;
   }
@@ -155,7 +126,25 @@ const Popup = forwardRef((props, ref) => {
               "root"
             )
           } : {},
-          children: memoComponent
+          children: winType === "microfrontend" ? /* @__PURE__ */ jsx(
+            MemonizedWindowBaseMicroFrontend,
+            {
+              emergeType: "popup",
+              moduleId,
+              dynamicMFStore,
+              windowTools,
+              loggedUser,
+              ...mfProps ?? { debugPort: 0, prefix: "" }
+            }
+          ) : /* @__PURE__ */ jsx(
+            WindowBaseComponent,
+            {
+              emergeType: "popup",
+              dynamicMFStore,
+              windowTools,
+              component
+            }
+          )
         }
       )
     }