@m4l/components 9.3.25 → 9.3.27

package/components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.d.ts

@@ -1,3 +1,3 @@
-export declare const ToggleIconButtonRootStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "placement" | "rotationAngle" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').ToggleIconButtonOwnerState> & Record<string, unknown> & {
+export declare const ToggleIconButtonRootStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "placement" | "rotationAngle" | "ariaLabel" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').ToggleIconButtonOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').ToggleIconButtonOwnerState> & Record<string, unknown>;
 }, {}, {}>;

package/components/mui_extended/Tooltip/Tooltip.styles.js

@@ -8,6 +8,7 @@ const tooltipStyles = {
    * Estilos del texto del componente Tooltip
    */
   text: ({ theme, ownerState }) => ({
+    color: theme.vars.palette.text.contrastText,
     ...getTypographyStyles(
       theme.generalSettings.isMobile,
       ownerState?.size || "medium",
@@ -18,14 +19,25 @@ const tooltipStyles = {
    * Estilos del componente Tooltip
    */
   tooltip: ({ theme }) => ({
-    background: theme.vars.palette.background.default,
+    background: theme.vars.palette.background.contrastDefault,
     padding: theme.vars.size.baseSpacings.sp2,
     borderRadius: theme.vars.size.borderRadius.r1,
     boxShadow: theme.vars.customShadows.z3,
-    ".MuiTooltip-arrow": {
+    "&.MuiTooltip-tooltipPlacementLeft .MuiTooltip-arrow": {
+      marginRight: "-0.6em"
+    },
+    "&.MuiTooltip-tooltipPlacementTop .MuiTooltip-arrow": {
+      marginBottom: "-0.6em"
+    },
+    "&&& .MuiTooltip-arrow": {
+      overflow: "visible",
       "&::before": {
-        backgroundColor: theme.vars.palette.background.default,
-        borderRadius: theme.vars.size.borderRadius["r0-5"]
+        backgroundColor: theme.vars.palette.background.contrastDefault,
+        borderRadius: theme.vars.size.borderRadius["r1"],
+        width: theme.vars.size.baseSpacings.sp3,
+        height: theme.vars.size.baseSpacings.sp3,
+        border: "unset",
+        margin: "unset"
       }
     }
   })

package/components/mui_extended/Tooltip/constants.d.ts

@@ -2,7 +2,7 @@ export declare const TOOLTIP_KEY_COMPONENT = "M4LTooltip";
 /**
  * Clases del componente Tooltip
  */
-export declare const TOOLTIP_CLASSES: Record<string, string>;
+export declare const TOOLTIP_CLASSES: Record<"text" | "tooltip" | "root", string>;
 /**
  * Desplazamiento predeterminado del tooltip (X, Y)
  */

package/components/mui_extended/Typography/constants.d.ts

@@ -10,7 +10,7 @@ export declare const TYPOGRAPHY_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
 /**
  * Inventario de clases CSS para el componente Typography.
  */
-export declare const TYPOGRAPHY_CLASSES: Record<string, string>;
+export declare const TYPOGRAPHY_CLASSES: Record<"skeleton" | "root", string>;
 export declare const TYPOGRAPHY_FONTS: {
     Inter: string;
     Jura: string;

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

@@ -3,6 +3,7 @@ import { Sizes, TypographyVariants } from '@m4l/styles';
 import { TypographySlots } from './slots/typographyEnum';
 import { TYPOGRAPHY_KEY_COMPONENT } from './constants';
 import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { DeepKeyOf } from '../../../utils/types';
 /**
  * Define los colores de tipografía disponibles para el componente.
  */
@@ -23,7 +24,7 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
     /**
      * Opción de color usada para pintar el componente.
      */
-    color?: TypographyColors;
+    color?: DeepKeyOf<Theme['vars']['palette']> | string;
     /**
      * Opciones de tamaño del componente.
      */

package/components/mui_extended/Typography/typography.styles.js

@@ -1,3 +1,4 @@
+import { getPropertyByString } from "@m4l/core";
 import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
 const typographyStyles = {
@@ -19,17 +20,11 @@ const typographyStyles = {
         flexDirection: "column"
       },
       // Override de estilos generales de MUI 🚫
-      // color text.primary 🎨
-      ...ownerState?.color === "text.primary" && {
-        color: theme.vars.palette.text.primary
-      },
-      // color text.secondary 🎨
-      ...ownerState?.color === "text.secondary" && {
-        color: theme.vars.palette.text.secondary
-      },
       // color text.disabled 🎨
-      ...(ownerState?.disabled || ownerState?.color === "text.disabled") && {
+      ...ownerState?.disabled || ownerState?.color === "text.disabled" ? {
         color: theme.vars.palette.text.disabled
+      } : {
+        color: getPropertyByString(theme.vars.palette, ownerState?.color || "text.primary", "text.primary")
       },
       ...getTypographyStyles(
         theme.generalSettings.isMobile,

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

@@ -262,10 +262,14 @@ const createPopupsStore = (initProps, storeDevtoolsEnabled = false) => {
           /**
            * closePopup: Cierra un popup
            */
-          close: (popupId) => {
+          close: (popupId, useFnQueryClose = true) => {
             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) => void;
+        close: (popupId: string, useFnQueryClose?: boolean) => void;
         /**
          * Modifica un popup espeficio
          */

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

@@ -5,9 +5,6 @@ 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";
@@ -17,7 +14,8 @@ export declare const usePopups: (popupId: string) => {
     iconUrl: string;
     selected: boolean;
     mfProps: import('../../../../MFLoader/types').MFBaseProps | undefined;
-    component: import('../../../../WindowBase').JSX_REACT_NODE;
+    component: import('../../../../WindowBase').JSX_REACT_NODE | undefined;
+    componentProps: Record<string, any> | undefined;
     loading: boolean | undefined;
     status: import('../../PopupsViewer/types').PopupStatus;
     version: string | undefined;

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

@@ -43,6 +43,10 @@ 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
@@ -65,16 +69,21 @@ const usePopups = (popupId) => {
       setActions: (newActions, newVersion, newBuildTime) => {
         setActions(popupId, newActions, newVersion, newBuildTime);
       },
+      /**
+       * TODO: Implementar
+       */
       getCookie: () => {
-        throw new Error("getCookie not implemented");
+        return void 0;
       },
+      /**
+       * TODO: Implementar
+       */
       getCookies: () => {
-        throw new Error("getCookies not implemented");
+        return {};
       },
-      setCookie: (key, value) => {
-        throw new Error(`setCookie not implemented: ${key}, ${value}`);
+      setCookie: (_key, _value) => {
       },
-      close: () => close(popupId),
+      close: (useFnQueryClose = true) => close(popupId, useFnQueryClose),
       startProgress: () => startProgress(popupId),
       stopProgress: () => stopProgress(popupId),
       setFnQueryClose: (fnQueryClose) => setFnQueryClose(popupId, fnQueryClose),
@@ -89,7 +98,6 @@ const usePopups = (popupId) => {
     }),
     [
       popupId,
-      buildTime,
       setActions,
       //getCookie,
       //getCookies,
@@ -97,7 +105,10 @@ const usePopups = (popupId) => {
       close,
       startProgress,
       stopProgress,
-      setFnQueryClose
+      setFnQueryClose,
+      update,
+      hide,
+      show
     ]
   );
   const memoizedActions = useHeaderActionsPopups({
@@ -112,6 +123,7 @@ 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: 1300, exit: 0 },
+        timeout: { appear: 0, enter: 0, 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 300ms"
+      transition: "opacity 30ms"
     },
     "&.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 } from "react";
+import { forwardRef, useRef, useEffect, useMemo } 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,10 +9,11 @@ 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], shallow);
+  const popup = usePopupsStore((state) => state.hashPopups[popupId], deepShallow);
   const { bringPopupOnFront } = usePopupsStore((state) => state.popupsActions, shallow);
   const { close } = usePopupsStore((state) => state.popupActions, shallow);
   const refHandler = useRef(null);
@@ -32,6 +33,7 @@ const Popup = forwardRef((props, ref) => {
     windowTools,
     mfProps,
     component,
+    componentProps,
     //onTouch,
     memoizedActions,
     loading,
@@ -75,6 +77,33 @@ 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;
   }
@@ -126,25 +155,7 @@ const Popup = forwardRef((props, ref) => {
               "root"
             )
           } : {},
-          children: winType === "microfrontend" ? /* @__PURE__ */ jsx(
-            MemonizedWindowBaseMicroFrontend,
-            {
-              emergeType: "popup",
-              moduleId,
-              dynamicMFStore,
-              windowTools,
-              loggedUser,
-              ...mfProps ?? { debugPort: 0, prefix: "" }
-            }
-          ) : /* @__PURE__ */ jsx(
-            WindowBaseComponent,
-            {
-              emergeType: "popup",
-              dynamicMFStore,
-              windowTools,
-              component
-            }
-          )
+          children: memoComponent
         }
       )
     }

package/contexts/AppearanceComponentContext/AppearanceComponentContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useRef } from "react";
+import { createContext, useRef, useEffect } from "react";
 import { DEFAULT_SIZE } from "@m4l/styles";
 import { c as createAppearanceComponentStore } from "./AppearanceComponentStore.js";
 const AppearanceComponentContext = createContext(null);
@@ -12,6 +12,14 @@ function AppearanceComponentProvider(props) {
       storeId
     }, storeDevtoolsEnabled);
   }
+  useEffect(() => {
+    if (appearanceComponentStoreRef.current && defaultSize) {
+      const currentStoreSize = appearanceComponentStoreRef.current.getState().defaultSize;
+      if (currentStoreSize !== defaultSize) {
+        appearanceComponentStoreRef.current.getState().actions.setDefaultSize(defaultSize);
+      }
+    }
+  }, [defaultSize]);
   return /* @__PURE__ */ jsx(AppearanceComponentContext.Provider, { value: appearanceComponentStoreRef.current, children });
 }
 export {

package/index.js

@@ -43,22 +43,23 @@ import { u as u3 } from "./components/DataGrid/formatters/ColumnConcatenatedValu
 import { C as C6 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
 import { u as u4 } from "./components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
 import { C as C7 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
+import { u as u5 } from "./components/DataGrid/formatters/ColumnIconFormatter/useColumnIcon.js";
 import { C as C8 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
-import { u as u5 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
+import { u as u6 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
 import { C as C9 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
-import { u as u6 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
+import { u as u7 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
 import { C as C10 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
-import { u as u7 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
+import { u as u8 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
 import { C as C11 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
-import { u as u8 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
+import { u as u9 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
 import { C as C12 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
-import { u as u9 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
+import { u as u10 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
 import { C as C13 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
-import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
+import { u as u11 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
 import { C as C14 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
-import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
+import { u as u12 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
 import { C as C15 } from "./components/DataGrid/formatters/ColumnTagsFormatter/formatter.js";
-import { u as u12 } from "./components/DataGrid/formatters/ColumnTagsFormatter/useColumnTags.js";
+import { u as u13 } from "./components/DataGrid/formatters/ColumnTagsFormatter/useColumnTags.js";
 import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
 import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
 import { W } from "./components/DragResizeWindowRND/constants.js";
@@ -119,13 +120,13 @@ import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFor
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
 import { C as C18, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
-import { P as P4, u as u13 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
+import { P as P4, u as u14 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
 import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
 import { T as T17 } from "./components/formatters/TagsFormatter/TagsFormatter.js";
 import { C as C19 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
-import { u as u14 } from "./components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js";
+import { u as u15 } from "./components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
 import { F as F2 } from "./components/FormContainer/FormContainer.js";
 import { G } from "./components/GridLayout/GridLayout.js";
@@ -168,7 +169,8 @@ import { g as g22 } from "./components/LoadingError/dictionary.js";
 import { g as g23 } from "./components/MenuActions/dictionary.js";
 import { a as a9, M as M3 } from "./components/MenuActions/MenuActions.js";
 import { M as M4 } from "./components/MFIsolationApp/MFIsolationApp.js";
-import { M as M5 } from "./components/MFLoader/MFLoader.js";
+import { M as M5 } from "./components/MFIsolationAppStorybook/MFIsolationAppStorybook.js";
+import { M as M6 } from "./components/MFLoader/MFLoader.js";
 import { g as g24 } from "./components/MFLoader/dictionary.js";
 import { I as I6 } from "./components/ImageText/ImageText.js";
 import { N as N4 } from "./components/NoItemSelected/NoItemSelected.js";
@@ -179,7 +181,7 @@ import { g as g27 } from "./components/ObjectLogs/dictionary.js";
 import { O } from "./components/ObjectLogs/ObjectLogs.js";
 import { P as P7 } from "./components/PaperForm/PaperForm.js";
 import { P as P8 } from "./components/PDFViewer/PDFViewer.js";
-import { u as u15 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore.js";
+import { u as u16 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore.js";
 import { a as a10, P as P9 } from "./components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
 import { P as P10 } from "./components/popups/components/PopupsViewer/PopupsViewer.js";
 import { P as P11 } from "./components/PrintingSystem/PrintingSystem.js";
@@ -189,17 +191,17 @@ import { S as S9 } from "./components/SideBar/SideBar.js";
 import { T as T18 } from "./components/ToastContainer/ToastContainer.js";
 import { T as T19 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
 import { W as W2 } from "./components/WindowBase/WindowBase.js";
-import { u as u16 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
-import { u as u17, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
-import { M as M6, W as W3, a as a12 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
+import { u as u17 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
+import { u as u18, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
+import { M as M7, W as W3, a as a12 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { c as c3 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
-import { D as D10, a as a13, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
+import { D as D10, a as a13, M as M8 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 import { W as W4 } from "./components/WindowConfirm/WindowConfirm.js";
 import { a as a14, g as g28 } from "./components/ModalDialog/dictionary.js";
-import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
+import { M as M9 } from "./components/ModalDialog/ModalDialog.js";
 import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
-import { u as u18 } from "./components/Stepper/hooks/useStepper/index.js";
+import { u as u19 } from "./components/Stepper/hooks/useStepper/index.js";
 import { S as S11 } from "./components/Stepper/Stepper.js";
 import { S as S12 } from "./components/Stepper/subcomponents/StepperContent/index.js";
 import { S as S13 } from "./components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js";
@@ -212,27 +214,27 @@ import { S as S19 } from "./components/Stepper/subcomponents/StepperButtons/Step
 import { S as S20 } from "./components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js";
 import { e as e2 } from "./components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
 import { g as g29 } from "./components/Stepper/dictionary.js";
-import { F as F3, R as R23, u as u19 } from "./components/hook-form/RHFormContext/index.js";
+import { F as F3, R as R23, u as u20 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g30 } from "./components/hook-form/RHFormContext/dictionary.js";
-import { u as u20 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
+import { u as u21 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
-import { a as a15, M as M9 } from "./contexts/ModalContext/index.js";
-import { u as u21 } from "./hooks/useFormAddEdit/index.js";
-import { u as u22 } from "./hooks/useModal/index.js";
-import { u as u23 } from "./hooks/useTab/index.js";
+import { a as a15, M as M10 } from "./contexts/ModalContext/index.js";
+import { u as u22 } from "./hooks/useFormAddEdit/index.js";
+import { u as u23 } from "./hooks/useModal/index.js";
+import { u as u24 } from "./hooks/useTab/index.js";
 import { g as g31 } from "./hooks/useFormAddEdit/dictionary.js";
-import { u as u24 } from "./hooks/useFormFocus/index.js";
-import { u as u25 } from "./hooks/useInterval/index.js";
-import { u as u26 } from "./hooks/useComponentSize/useComponentSize.js";
-import { u as u27 } from "./hooks/useFormReadyForUpdate/index.js";
-import { u as u28 } from "./hooks/useStateRef/index.js";
+import { u as u25 } from "./hooks/useFormFocus/index.js";
+import { u as u26 } from "./hooks/useInterval/index.js";
+import { u as u27 } from "./hooks/useComponentSize/useComponentSize.js";
+import { u as u28 } from "./hooks/useFormReadyForUpdate/index.js";
+import { u as u29 } from "./hooks/useStateRef/index.js";
 import { S as S21 } from "./hooks/useSvgColor/constants.js";
-import { u as u29 } from "./hooks/useSvgColor/useSvgColor.js";
-import { u as u30 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
-import { u as u31 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
-import { u as u32 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
-import { u as u33 } from "./hooks/useIsVisible/useIsVisible.js";
-import { u as u34 } from "./hooks/useSizeContainer/index.js";
+import { u as u30 } from "./hooks/useSvgColor/useSvgColor.js";
+import { u as u31 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
+import { u as u32 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
+import { u as u33 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
+import { u as u34 } from "./hooks/useIsVisible/useIsVisible.js";
+import { u as u35 } from "./hooks/useSizeContainer/index.js";
 import { c as c4 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
 import { g as g32 } from "./utils/getComponentUtilityClass.js";
@@ -329,14 +331,15 @@ export {
   L10 as LoadingError,
   L as LoadingScreen,
   M4 as MFIsolationApp,
-  M5 as MFLoader,
-  M7 as MemonizedDynamicMFParmsProvider,
+  M5 as MFIsolationAppStorybook,
+  M6 as MFLoader,
+  M8 as MemonizedDynamicMFParmsProvider,
   a9 as MemonizedMenuActions,
-  M6 as MemonizedWindowToolsMFContext,
+  M7 as MemonizedWindowToolsMFContext,
   M3 as MenuActions,
   a15 as ModalContext,
-  M8 as ModalDialog,
-  M9 as ModalProvider,
+  M9 as ModalDialog,
+  M10 as ModalProvider,
   M as MotionContainer,
   M2 as MotionLazyContainer,
   N2 as NavLink,
@@ -496,41 +499,42 @@ export {
   r as rhfPeriodStyles,
   t as toggleButtonStyles,
   t2 as toggleIconButtonStyles,
-  u20 as useAppearanceComponentStore,
+  u21 as useAppearanceComponentStore,
   u as useAreasStore,
   u2 as useColumnBoolean,
-  u11 as useColumnChipStatus,
+  u12 as useColumnChipStatus,
   u3 as useColumnConcatenatedValue,
   u4 as useColumnDate,
-  u5 as useColumnInteractiveCheck,
-  u6 as useColumnNestedValue,
-  u7 as useColumnPoints,
-  u8 as useColumnPrice,
-  u9 as useColumnSetCheck,
-  u12 as useColumnTags,
-  u10 as useColumnUncertanity,
-  u26 as useComponentSize,
-  u19 as useCustomForm,
-  u31 as useDataGridPersistence,
-  u14 as useDistanceToNowFormatter,
-  u30 as useDynamicFilterAndSort,
-  u17 as useDynamicMFParameters,
+  u5 as useColumnIcon,
+  u6 as useColumnInteractiveCheck,
+  u7 as useColumnNestedValue,
+  u8 as useColumnPoints,
+  u9 as useColumnPrice,
+  u10 as useColumnSetCheck,
+  u13 as useColumnTags,
+  u11 as useColumnUncertanity,
+  u27 as useComponentSize,
+  u20 as useCustomForm,
+  u32 as useDataGridPersistence,
+  u15 as useDistanceToNowFormatter,
+  u31 as useDynamicFilterAndSort,
+  u18 as useDynamicMFParameters,
   a11 as useDynamicMFParametersStore,
-  u21 as useFormAddEdit,
-  u24 as useFormFocus,
-  u27 as useFormReadyForUpdate,
-  u13 as useFormatPeriod,
-  u25 as useInterval,
-  u33 as useIsVisible,
-  u22 as useModal,
-  u32 as usePopoverContainer,
-  u15 as usePopupsStore,
-  u34 as useSizeContainer,
-  u28 as useStateRef,
-  u18 as useStepper,
-  u29 as useSvgColor,
-  u23 as useTab,
-  u16 as useWindowToolsMF,
+  u22 as useFormAddEdit,
+  u25 as useFormFocus,
+  u28 as useFormReadyForUpdate,
+  u14 as useFormatPeriod,
+  u26 as useInterval,
+  u34 as useIsVisible,
+  u23 as useModal,
+  u33 as usePopoverContainer,
+  u16 as usePopupsStore,
+  u35 as useSizeContainer,
+  u29 as useStateRef,
+  u19 as useStepper,
+  u30 as useSvgColor,
+  u24 as useTab,
+  u17 as useWindowToolsMF,
   v2 as varBounce,
   v3 as varContainer,
   v as varFade,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.25",
+  "version": "9.3.27",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {