@m4l/components 0.1.82 → 0.1.84

package/components/hook-form/RHFCheckbox/{index.c6c3933b.js → index.9bf6edb0.js}

@@ -2,29 +2,29 @@ import { useFormContext, Controller } from "react-hook-form";
 import { styled } from "@mui/material/styles";
 import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.6c3adb40.js";
+import { H as HelperText } from "../../HelperText/index.a47ff233.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import "react";
 import "@m4l/core";
-import "../../Icon/index.2414ff25.js";
+import "../../Icon/index.d1402200.js";
 import "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import "../../mui_extended/IconButton/index.a318316e.js";
-import "../../mui_extended/Accordion/index.42cef1c7.js";
+import "../../mui_extended/IconButton/index.62aea582.js";
+import "../../mui_extended/Accordion/index.46771196.js";
 import "../../mui_extended/Typography/index.443590d6.js";
 import "../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../../mui_extended/Button/index.40af964e.js";
-import { C as CheckBox } from "../../mui_extended/CheckBox.5f6c78b0.js";
+import { C as CheckBox } from "../../mui_extended/CheckBox.38abccd8.js";
 import "../../mui_extended/Badge/index.cad260fe.js";
 import "../../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../../mui_extended/MenuActions/index.2493b1b1.js";
 import "../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../mui_extended/Pager/index.da26e9d4.js";
-import "../../mui_extended/Tab/index.0d5f96e6.js";
+import "../../mui_extended/Pager/index.a7f87c96.js";
+import "../../mui_extended/Tab/index.756fe693.js";
 import "../../mui_extended/Tooltip/index.5a795dcd.js";
 const RHFCheckboxRoot = styled("div")(({
   theme

package/components/hook-form/RHFDateTime/{index.3add0fa4.js → index.a2c1ed2c.js}

@@ -6,25 +6,25 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
 import { useState, useEffect } from "react";
 import clsx from "clsx";
-import "../../Icon/index.2414ff25.js";
+import "../../Icon/index.d1402200.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import "../../mui_extended/IconButton/index.a318316e.js";
-import "../../mui_extended/Accordion/index.42cef1c7.js";
+import "../../mui_extended/IconButton/index.62aea582.js";
+import "../../mui_extended/Accordion/index.46771196.js";
 import { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
 import "../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../../mui_extended/Button/index.40af964e.js";
-import "../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../mui_extended/CheckBox.38abccd8.js";
 import "../../mui_extended/Badge/index.cad260fe.js";
 import "../../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../../mui_extended/MenuActions/index.2493b1b1.js";
 import "../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../mui_extended/Pager/index.da26e9d4.js";
-import "../../mui_extended/Tab/index.0d5f96e6.js";
+import "../../mui_extended/Pager/index.a7f87c96.js";
+import "../../mui_extended/Tab/index.756fe693.js";
 import "../../mui_extended/Tooltip/index.5a795dcd.js";
-import { H as HelperText } from "../../HelperText/index.6c3adb40.js";
+import { H as HelperText } from "../../HelperText/index.a47ff233.js";
 import { styled } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 const SKTRHFWrapperTextField = styled("div")(({

package/components/hook-form/RHFPeriod/{index.72edef4d.js → index.b5204ce2.js}

@@ -1,7 +1,7 @@
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { useFormContext, Controller } from "react-hook-form";
-import { H as HelperText } from "../../HelperText/index.6c3adb40.js";
-import { P as Period } from "../../Period/index.4fd9df2a.js";
+import { H as HelperText } from "../../HelperText/index.a47ff233.js";
+import { P as Period } from "../../Period/index.e129cdec.js";
 import { unstable_composeClasses } from "@mui/base";
 import { jsx, jsxs } from "react/jsx-runtime";
 const RHFPeriodRoot = styled("div")(({

package/components/hook-form/RHFTextField/{index.20daa95e.js → index.5a0fa776.js}

@@ -1,10 +1,10 @@
 import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
 import { forwardRef, useState, useEffect } from "react";
-import { I as IconButton } from "../../mui_extended/IconButton/index.a318316e.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.62aea582.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import "../../Icon/index.2414ff25.js";
+import "../../Icon/index.d1402200.js";
 import "clsx";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useFormContext, Controller } from "react-hook-form";
@@ -12,7 +12,7 @@ import { styled as styled$1 } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../utils/index.c43a95f4.js";
 import { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
-import { H as HelperText } from "../../HelperText/index.6c3adb40.js";
+import { H as HelperText } from "../../HelperText/index.a47ff233.js";
 const SkeletonTextFieldRoot = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",

package/components/hook-form/RHFUpload/{index.cc5adc15.js → index.b36539d6.js}

@@ -9,24 +9,24 @@ import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { B as Button } from "../../mui_extended/Button/index.40af964e.js";
 import { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
-import { H as HelperText } from "../../HelperText/index.6c3adb40.js";
+import { H as HelperText } from "../../HelperText/index.a47ff233.js";
 import "clsx";
 import { styled } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 import "@mui/material/Button";
-import "../../Icon/index.2414ff25.js";
-import "../../mui_extended/IconButton/index.a318316e.js";
+import "../../Icon/index.d1402200.js";
+import "../../mui_extended/IconButton/index.62aea582.js";
 import "@m4l/graphics";
-import "../../mui_extended/Accordion/index.42cef1c7.js";
+import "../../mui_extended/Accordion/index.46771196.js";
 import "../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
-import "../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../mui_extended/CheckBox.38abccd8.js";
 import "../../mui_extended/Badge/index.cad260fe.js";
 import "@mui/lab";
-import "../../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../../mui_extended/MenuActions/index.2493b1b1.js";
 import "../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../mui_extended/Pager/index.da26e9d4.js";
-import "../../mui_extended/Tab/index.0d5f96e6.js";
+import "../../mui_extended/Pager/index.a7f87c96.js";
+import "../../mui_extended/Tab/index.756fe693.js";
 import "../../mui_extended/Tooltip/index.5a795dcd.js";
 const UploadImageRoot = styled("div")(({
   theme

package/components/modal/{WindowBase.4016485b.js → WindowBase.37158e8d.js}

@@ -1,11 +1,11 @@
 import { useEnvironment } from "@m4l/core";
 import "react";
-import { u as useModal } from "../../hooks/useModal/index.9b0cc3fe.js";
-import { m as modalUtilityClasses } from "./index.e9fece72.js";
-import { I as Icon } from "../Icon/index.2414ff25.js";
+import { u as useModal } from "../../hooks/useModal/index.7611bf21.js";
+import { m as modalUtilityClasses } from "./index.6f281ef8.js";
+import { I as Icon } from "../Icon/index.d1402200.js";
 import "@mui/material";
-import { I as IconButton } from "../mui_extended/IconButton/index.a318316e.js";
-import "../mui_extended/Accordion/index.42cef1c7.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.62aea582.js";
+import "../mui_extended/Accordion/index.46771196.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -13,15 +13,15 @@ import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.40af964e.js";
-import "@m4l/graphics";
-import "../mui_extended/CheckBox.5f6c78b0.js";
+import "../mui_extended/CheckBox.38abccd8.js";
 import "../mui_extended/Badge/index.cad260fe.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../mui_extended/MenuActions/index.2493b1b1.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.da26e9d4.js";
-import "../mui_extended/Tab/index.0d5f96e6.js";
+import "../mui_extended/Pager/index.a7f87c96.js";
+import "@m4l/graphics";
+import "../mui_extended/Tab/index.756fe693.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 const Header = (props) => {
   const {
@@ -34,6 +34,10 @@ const Header = (props) => {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  const handlerClick = (e) => {
+    e.stopPropagation();
+    onClickCancel && onClickCancel();
+  };
   return /* @__PURE__ */ jsxs("div", {
     id: "Header",
     className: clsx(classes.headerContainer, "m4l_draggable_handle"),
@@ -48,7 +52,7 @@ const Header = (props) => {
     }), /* @__PURE__ */ jsx(IconButton, {
       className: classes.iconCloseHeader,
       src: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/close.svg`,
-      onClick: onClickCancel,
+      onClick: (e) => handlerClick(e),
       "aria-label": "click"
     })]
   });

package/components/modal/{WindowConfirm.f148e495.js → WindowConfirm.a68aa0f1.js}

@@ -1,9 +1,9 @@
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import "react";
-import { u as useModal } from "../../hooks/useModal/index.9b0cc3fe.js";
-import { A as Actions } from "../CommonActions/components/Actions/index.5abb6ac4.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.6cf96d04.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.856df8ef.js";
+import { u as useModal } from "../../hooks/useModal/index.7611bf21.js";
+import { A as Actions } from "../CommonActions/components/Actions/index.e70e8779.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.29517521.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.a9420126.js";
 import "react-hook-form";
 import { Typography } from "@mui/material";
 import "@mui/material/Button";
@@ -13,28 +13,28 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import "../../react-draggable.7abb5d0a.js";
 import "../Resizeable/index.9a9c79a4.js";
 import "@m4l/graphics";
-import "../Icon/index.2414ff25.js";
-import { m as modalUtilityClasses } from "./index.e9fece72.js";
+import "../Icon/index.d1402200.js";
+import { m as modalUtilityClasses } from "./index.6f281ef8.js";
 import { I as Image } from "../Image/index.c18ebf5a.js";
-import "../mui_extended/IconButton/index.a318316e.js";
-import "../mui_extended/Accordion/index.42cef1c7.js";
+import "../mui_extended/IconButton/index.62aea582.js";
+import "../mui_extended/Accordion/index.46771196.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
-import "../mui_extended/CheckBox.5f6c78b0.js";
+import "../mui_extended/CheckBox.38abccd8.js";
 import "../mui_extended/Badge/index.cad260fe.js";
 import "@mui/lab";
-import "../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../mui_extended/MenuActions/index.2493b1b1.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.da26e9d4.js";
-import "../mui_extended/Tab/index.0d5f96e6.js";
+import "../mui_extended/Pager/index.a7f87c96.js";
+import "../mui_extended/Tab/index.756fe693.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.9820bc7f.js";
-import "../areas/components/AreasAdmin/index.f011d49d.js";
+import "../areas/contexts/AreasContext/index.230d1584.js";
+import "../areas/components/AreasAdmin/index.8ab71eb9.js";
 import "zustand/shallow";
 import "../ScrollBar/index.d4410cb5.js";
-import "../areas/components/AreasViewer/index.51a52736.js";
+import "../areas/components/AreasViewer/index.933e506b.js";
 import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";

package/components/modal/{index.e9fece72.js → index.6f281ef8.js}

@@ -1,38 +1,38 @@
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import "../../react-draggable.7abb5d0a.js";
 import "react";
-import "../../contexts/ModalContext/index.efc1135a.js";
+import "../../contexts/ModalContext/index.51da83de.js";
 import "../Resizeable/index.9a9c79a4.js";
 import "react/jsx-runtime";
 import "@m4l/graphics";
-import "../Icon/index.2414ff25.js";
+import "../Icon/index.d1402200.js";
 import "clsx";
 import "@m4l/core";
 import { unstable_composeClasses } from "@mui/base";
-import "../CommonActions/components/Actions/index.5abb6ac4.js";
+import "../CommonActions/components/Actions/index.e70e8779.js";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.40af964e.js";
 import "react-hook-form";
-import "../mui_extended/IconButton/index.a318316e.js";
-import "../mui_extended/Accordion/index.42cef1c7.js";
+import "../mui_extended/IconButton/index.62aea582.js";
+import "../mui_extended/Accordion/index.46771196.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
-import "../mui_extended/CheckBox.5f6c78b0.js";
+import "../mui_extended/CheckBox.38abccd8.js";
 import "../mui_extended/Badge/index.cad260fe.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../mui_extended/MenuActions/index.2493b1b1.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.da26e9d4.js";
-import "../mui_extended/Tab/index.0d5f96e6.js";
+import "../mui_extended/Pager/index.a7f87c96.js";
+import "../mui_extended/Tab/index.756fe693.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.9820bc7f.js";
-import "../areas/components/AreasAdmin/index.f011d49d.js";
+import "../areas/contexts/AreasContext/index.230d1584.js";
+import "../areas/components/AreasAdmin/index.8ab71eb9.js";
 import "zustand/shallow";
 import "../ScrollBar/index.d4410cb5.js";
-import "../areas/components/AreasViewer/index.51a52736.js";
+import "../areas/components/AreasViewer/index.933e506b.js";
 import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";

package/components/mui_extended/Accordion/{index.42cef1c7.js → index.46771196.js}

@@ -1,12 +1,12 @@
 import { generateUtilityClasses, generateUtilityClass, styled, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.a318316e.js";
+import { I as IconButton } from "../IconButton/index.62aea582.js";
 import { useEnvironment } from "@m4l/core";
 import { unstable_composeClasses } from "@mui/base";
-import { I as Icon } from "../../Icon/index.2414ff25.js";
+import { I as Icon } from "../../Icon/index.d1402200.js";
 import { T as Typography } from "../Typography/index.443590d6.js";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../vendor.88ed58a5.js";
+import { g as getNameDataTestId } from "../../../vendor.1af105d6.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const componentName = "M4LAccordion";
 generateUtilityClasses(componentName, [

package/components/mui_extended/CheckBox/CheckBox.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CheckboxProps } from './types';
-export declare const CheckBox: (props: CheckboxProps) => import("react").JSX.Element;
+export declare const CheckBox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/components/mui_extended/{CheckBox.5f6c78b0.js → CheckBox.38abccd8.js}

@@ -1,10 +1,11 @@
 import { generateUtilityClasses, generateUtilityClass, styled, Skeleton, Checkbox } from "@mui/material";
 import clsx from "clsx";
 import { useResponsiveDesktop } from "@m4l/graphics";
+import { unstable_composeClasses } from "@mui/base";
 import { useModuleSkeleton } from "@m4l/core";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { T as Typography } from "./Typography/index.443590d6.js";
-import { unstable_composeClasses } from "@mui/base";
+import { forwardRef } from "react";
 const COMPONENT_CLASS_NAME = "M4LCheckBox";
 generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",
@@ -55,7 +56,7 @@ const SkeletonCheckBox = (props) => {
     })
   });
 };
-const CheckBox = (props) => {
+const CheckBox = forwardRef((props, ref) => {
   const {
     className,
     size = "small",
@@ -71,6 +72,7 @@ const CheckBox = (props) => {
   const classes = useUtilityClasses(ownerState);
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(classes.root, className),
+    ref,
     children: [!isSkeleton ? /* @__PURE__ */ jsx(Checkbox, {
       ...props
     }) : /* @__PURE__ */ jsx(SkeletonCheckBox, {
@@ -80,7 +82,7 @@ const CheckBox = (props) => {
       children: label
     }) : null]
   });
-};
+});
 export {
   CheckBox as C
 };

package/components/mui_extended/IconButton/{index.a318316e.js → index.62aea582.js}

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton, styled, generateUtilityClasses, generateUtilityClass, Tooltip, IconButton as IconButton$1 } from "@mui/material";
-import { I as Icon } from "../../Icon/index.2414ff25.js";
+import { I as Icon } from "../../Icon/index.d1402200.js";
 import { jsx, Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useResponsiveDesktop } from "@m4l/graphics";
@@ -79,13 +79,7 @@ const IconButton = (props) => {
     }
     return void 0;
   }, [tooltip, dictionaryTooltipId, getLabel]);
-  const [isfocus, setIsFocus] = useState(false);
-  const handlerOnFocus = () => {
-    setIsFocus(true);
-  };
-  const handlerOnBlur = () => {
-    setIsFocus(false);
-  };
+  const [isfocus] = useState(false);
   const ownerState = {
     variant,
     size: isDesktop ? size : "medium",
@@ -104,8 +98,6 @@ const IconButton = (props) => {
           ...other,
           onClick,
           disableRipple: true,
-          onFocusVisible: handlerOnFocus,
-          onBlur: handlerOnBlur,
           disabled,
           children: /* @__PURE__ */ jsx(Icon, {
             src,
@@ -116,8 +108,6 @@ const IconButton = (props) => {
         ...other,
         onClick,
         disableRipple: true,
-        onFocusVisible: handlerOnFocus,
-        onBlur: handlerOnBlur,
         disabled,
         children: /* @__PURE__ */ jsx(Icon, {
           src,

package/components/mui_extended/MenuActions/{index.f6bfdd40.js → index.2493b1b1.js}

@@ -1,10 +1,10 @@
-import React__default, { useState, useMemo } from "react";
+import React__default, { useState, useEffect, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { IconButton, MenuItem, Badge } from "@mui/material";
 import { P as Popover } from "../Popover/index.9f35d0eb.js";
 import { styled } from "@mui/material/styles";
-import { I as Icon } from "../../Icon/index.2414ff25.js";
-import { I as IconButton$1 } from "../IconButton/index.a318316e.js";
+import { I as Icon } from "../../Icon/index.d1402200.js";
+import { I as IconButton$1 } from "../IconButton/index.62aea582.js";
 import clsx from "clsx";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 styled(IconButton)(() => ({}));
@@ -38,6 +38,8 @@ function MenuActions(props) {
     withBadge = false,
     badgeContent,
     arrowType = "right-top",
+    externalOpen = null,
+    externalClose,
     ...other
   } = props;
   const {
@@ -49,22 +51,35 @@ function MenuActions(props) {
   } = useModuleDictionary();
   const [open, setOpen] = useState(null);
   const handleOpen = (event) => {
+    console.log("MenuActions event", event);
     console.log("handleOpen");
     setOpen(event.currentTarget);
-    event.stopPropagation();
   };
+  useEffect(() => {
+    let mounted = true;
+    if (mounted) {
+      setOpen(externalOpen);
+    }
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [externalOpen]);
   const urlFinalIcon = useMemo(() => {
     if (urlIcon)
       return urlIcon;
     return `${host_static_assets}/${environment_assets}/frontend/components/menu_actions/assets/icons/${ICONS.MENU}`;
   }, [urlIcon, host_static_assets, environment_assets]);
-  const handleClose = () => {
+  const handleClose = (e) => {
+    e.stopPropagation();
     setOpen(null);
+    externalClose && externalClose(null);
+    console.log("Se ejecut\xF3 el handle close");
+    console.log("externalClose value", externalClose);
   };
   const handleClick = (e, menuAction) => {
+    e.stopPropagation();
     setOpen(null);
     menuAction.onClick();
-    e.stopPropagation();
   };
   const finalActions = useMemo(() => {
     let ret;

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

@@ -32,4 +32,6 @@ export interface MenuActionsProps extends Omit<PopoverProps, 'open'> {
     menuActionSx?: SxProps<Theme> | Partial<OverridesStyleRules<string, ComponentNameToClassKey, Theme>>;
     withBadge?: boolean;
     badgeContent?: string;
+    externalOpen?: HTMLDivElement | null;
+    externalClose?: (element: null | HTMLDivElement) => void;
 }