@m4l/components 0.1.76 → 0.1.78

package/components/modal/{WindowConfirm.9b829837.js → WindowConfirm.6c063f2d.js}

@@ -1,40 +1,40 @@
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import "react";
-import { u as useModal } from "../../hooks/useModal/index.7b7d26ba.js";
-import { A as Actions } from "../CommonActions/components/Actions/index.e376a68e.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.453c2d24.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.c653a266.js";
+import { u as useModal } from "../../hooks/useModal/index.8e85f7ae.js";
+import { A as Actions } from "../CommonActions/components/Actions/index.52125041.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.d536ccfa.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.aa1648eb.js";
 import "react-hook-form";
 import { Typography } from "@mui/material";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.fdb5dcbd.js";
+import "../mui_extended/Button/index.4288f9fc.js";
 import "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import "../../react-draggable.6d7949a3.js";
-import "../ModalDialog/index.d9c5d400.js";
-import "../Resizeable/index.f6e48e56.js";
+import "../../react-draggable.7abb5d0a.js";
+import "../Resizeable/index.9a9c79a4.js";
 import "@m4l/graphics";
-import "../Icon/index.9dae8337.js";
-import { m as modalUtilityClasses } from "./index.1b25b61d.js";
+import "../Icon/index.9fcd1476.js";
+import { m as modalUtilityClasses } from "./index.00efea85.js";
 import { I as Image } from "../Image/index.c18ebf5a.js";
-import "../mui_extended/IconButton/index.1a9d4fa5.js";
-import "../mui_extended/Accordion/index.3faafd8b.js";
+import "../mui_extended/IconButton/index.12f1a3c3.js";
+import "../mui_extended/Accordion/index.9877f7bf.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
+import "../mui_extended/Badge/index.8c2b8b66.js";
 import "@mui/lab";
+import "../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/MenuActions/index.ba1da3b3.js";
-import "../mui_extended/Pager/index.67bda2c5.js";
-import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Pager/index.2f6d6d7d.js";
+import "../mui_extended/Tab/index.7c82e43d.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.f0397b7c.js";
-import "../areas/components/AreasAdmin/index.946eebb9.js";
+import "../areas/contexts/AreasContext/index.02c4e7be.js";
+import "../areas/components/AreasAdmin/index.43ecd998.js";
 import "zustand/shallow";
 import "../ScrollBar/index.bbe48f4d.js";
-import "../areas/components/AreasViewer/index.bf4191ea.js";
-import "../LinearProgressIndeterminate/index.d34d398f.js";
+import "../areas/components/AreasViewer/index.14e62059.js";
+import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
 const dictionary = {

package/components/modal/classes/index.d.ts

@@ -15,4 +15,5 @@ export declare const modalUtilityClasses: (ownerState: OwnerStateWindowConfim) =
     illustrationContainer: string;
     messageContainer: string;
     illustration: string;
+    windowConfirm: string;
 };

package/components/modal/classes/types.d.ts

@@ -12,6 +12,7 @@ export interface ModalClassesType {
     illustrationContainer: string;
     messageContainer: string;
     illustration: string;
+    windowConfirm: string;
     variantDelete: string;
     variantWarning: string;
     variantInfo: string;

package/components/modal/{index.1b25b61d.js → index.00efea85.js}

@@ -1,38 +1,38 @@
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import "../../react-draggable.6d7949a3.js";
+import "../../react-draggable.7abb5d0a.js";
 import "react";
-import "../../contexts/ModalContext/index.699f95fa.js";
-import "../ModalDialog/index.d9c5d400.js";
-import "../Resizeable/index.f6e48e56.js";
+import "../../contexts/ModalContext/index.e9a7ba4a.js";
+import "../Resizeable/index.9a9c79a4.js";
 import "react/jsx-runtime";
 import "@m4l/graphics";
-import "../Icon/index.9dae8337.js";
+import "../Icon/index.9fcd1476.js";
 import "clsx";
 import "@m4l/core";
 import { unstable_composeClasses } from "@mui/base";
-import "../CommonActions/components/Actions/index.e376a68e.js";
+import "../CommonActions/components/Actions/index.52125041.js";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.fdb5dcbd.js";
+import "../mui_extended/Button/index.4288f9fc.js";
 import "react-hook-form";
-import "../mui_extended/IconButton/index.1a9d4fa5.js";
-import "../mui_extended/Accordion/index.3faafd8b.js";
+import "../mui_extended/IconButton/index.12f1a3c3.js";
+import "../mui_extended/Accordion/index.9877f7bf.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
+import "../mui_extended/Badge/index.8c2b8b66.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
+import "../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/MenuActions/index.ba1da3b3.js";
-import "../mui_extended/Pager/index.67bda2c5.js";
-import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Pager/index.2f6d6d7d.js";
+import "../mui_extended/Tab/index.7c82e43d.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.f0397b7c.js";
-import "../areas/components/AreasAdmin/index.946eebb9.js";
+import "../areas/contexts/AreasContext/index.02c4e7be.js";
+import "../areas/components/AreasAdmin/index.43ecd998.js";
 import "zustand/shallow";
 import "../ScrollBar/index.bbe48f4d.js";
-import "../areas/components/AreasViewer/index.bf4191ea.js";
-import "../LinearProgressIndeterminate/index.d34d398f.js";
+import "../areas/components/AreasViewer/index.14e62059.js";
+import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
 const componentName = "M4LModal";
@@ -49,6 +49,7 @@ generateUtilityClasses(componentName, [
   "illustrationContainer",
   "messageContainer",
   "illustration",
+  "windowConfirm",
   "variantDelete",
   "variantWarning",
   "variantInfo",
@@ -70,7 +71,8 @@ const modalUtilityClasses = (ownerState) => {
     modalContent: ["modalContent"],
     illustrationContainer: ["illustrationContainer"],
     messageContainer: ["messageContainer"],
-    illustration: ["illustration"]
+    illustration: ["illustration"],
+    windowConfirm: ["windowConfirm"]
   };
   const composedClasses = unstable_composeClasses(slots, getModalUtilityClass, {});
   return {

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

@@ -0,0 +1 @@
+export declare const COMPONENT_PREFIX = "m4l-accordion";

package/components/mui_extended/Accordion/{index.3faafd8b.js → index.9877f7bf.js}

@@ -1,11 +1,12 @@
 import { generateUtilityClasses, generateUtilityClass, styled, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.1a9d4fa5.js";
+import { I as IconButton } from "../IconButton/index.12f1a3c3.js";
 import { useEnvironment } from "@m4l/core";
 import { unstable_composeClasses } from "@mui/base";
-import { I as Icon } from "../../Icon/index.9dae8337.js";
+import { I as Icon } from "../../Icon/index.9fcd1476.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.e353394b.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const componentName = "M4LAccordion";
 generateUtilityClasses(componentName, [
@@ -58,10 +59,7 @@ const AccordionRoot = styled("div")(({
 }) => ({
   ...theme.components?.M4LAccordion?.styleOverrides
 }));
-const ICON_PREFIX = "M4LAccordion";
-const getNameAccordionDataTestId = (KEY) => {
-  return `${ICON_PREFIX}-${KEY}`;
-};
+const COMPONENT_PREFIX = "m4l-accordion";
 function Accordion(props) {
   const {
     label,
@@ -71,7 +69,8 @@ function Accordion(props) {
     accordionProps,
     summaryProps,
     labelIcon,
-    className
+    className,
+    dataTestId = ""
   } = props;
   const {
     host_static_assets,
@@ -81,7 +80,7 @@ function Accordion(props) {
   return /* @__PURE__ */ jsx(AccordionRoot, {
     className: clsx(classes.root, className),
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameAccordionDataTestId("root")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
     } : {},
     children: /* @__PURE__ */ jsxs(Accordion$1, {
       variant: "outlined",
@@ -103,7 +102,7 @@ function Accordion(props) {
         children: /* @__PURE__ */ jsxs("div", {
           className: classes.labelIcon,
           ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameAccordionDataTestId("labelIcon")
+            [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "labelIcon", dataTestId)
           } : {},
           children: [labelIcon && /* @__PURE__ */ jsx(Icon, {
             src: labelIcon

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

@@ -7,6 +7,7 @@ export declare type AccordionProps = {
     accordionProps?: Omit<MUIAccordionProps, 'sx'>;
     summaryProps?: AccordionSummaryProps;
     labelIcon?: string;
+    dataTestId?: string;
     SKTWidht?: string | number;
     SKTHeight?: string | number;
 };

package/components/mui_extended/Badge/Badge.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BadgeProps } from "./types";
+export declare const Badge: (props: BadgeProps) => import("react").JSX.Element;

package/components/mui_extended/Badge/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LBadge";

package/components/mui_extended/Badge/classes/index.d.ts

@@ -0,0 +1,6 @@
+import { BabgeClassesType } from './types';
+export declare const badgeClasses: BabgeClassesType;
+export declare function getBadgeUtilityClass(slot: string): string;
+export declare const badgeUtilityClasses: () => {
+    root: string;
+};

package/components/mui_extended/Badge/classes/types.d.ts

@@ -0,0 +1,6 @@
+import { badgeUtilityClasses } from ".";
+export interface BabgeClassesType {
+    root: string;
+}
+export declare type BadgeClassesKey = keyof BabgeClassesType;
+export declare type Classes = ReturnType<typeof badgeUtilityClasses>;

package/components/mui_extended/Badge/index.8c2b8b66.js

@@ -0,0 +1,36 @@
+import { generateUtilityClasses, styled, Badge as Badge$1 } from "@mui/material";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { jsx } from "react/jsx-runtime";
+import "@mui/base";
+const componentName = "M4LBadge";
+const badgeClasses = generateUtilityClasses(componentName, [
+  "root"
+]);
+const BadgeRoot = styled("div")(({ theme }) => ({
+  display: "flex",
+  ...theme.components?.M4LBadge?.styleOverrides
+}));
+const BADGE_PREFIX = "M4LBadge";
+const getNameBadgeDataTestId = (ELEMENTKEY, ID) => {
+  return `${BADGE_PREFIX}-${ELEMENTKEY}-${ID}`;
+};
+const Badge = (props) => {
+  const {
+    children,
+    dataTestId,
+    ...others
+  } = props;
+  return /* @__PURE__ */ jsx(BadgeRoot, {
+    className: badgeClasses.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameBadgeDataTestId("root", dataTestId)
+    } : {},
+    children: /* @__PURE__ */ jsx(Badge$1, {
+      ...others,
+      children
+    })
+  });
+};
+export {
+  Badge as B
+};

package/components/mui_extended/Badge/index.d.ts

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

package/components/mui_extended/Badge/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const BADGE_PREFIX = "M4LBadge";

package/components/mui_extended/Badge/tests/utils.d.ts

@@ -0,0 +1,2 @@
+import { BadgeClassesKey } from '../classes/types';
+export declare const getNameBadgeDataTestId: (ELEMENTKEY: BadgeClassesKey, ID: string) => string;

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

@@ -0,0 +1,4 @@
+import { BadgeProps as MUIBadgeProps } from "@mui/material";
+export interface BadgeProps extends MUIBadgeProps {
+    dataTestId: string;
+}

package/components/mui_extended/Button/{index.fdb5dcbd.js → index.4288f9fc.js}

@@ -173,14 +173,17 @@ const LoadingButton = (props) => {
   const {
     children,
     skeletonWidth = "100%",
+    size = "small",
+    variant = "contained",
+    disabled,
     className,
     ...other
   } = props;
   const isSkeleton = useModuleSkeleton();
   const ownerState = {
-    size: other.size,
-    variant: other.variant,
-    isDisabled: other.disabled
+    size,
+    variant,
+    isDisabled: disabled
   };
   const classes = useUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(LoadingButtonRoot, {
@@ -190,6 +193,8 @@ const LoadingButton = (props) => {
     } : {},
     children: !isSkeleton ? /* @__PURE__ */ jsx(LoadingButton$1, {
       ...other,
+      variant,
+      size,
       children: /* @__PURE__ */ jsx(Typography, {
         variant: "action",
         children

package/components/mui_extended/IconButton/{index.1a9d4fa5.js → index.12f1a3c3.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.9dae8337.js";
+import { I as Icon } from "../../Icon/index.9fcd1476.js";
 import { jsx, Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useResponsiveDesktop } from "@m4l/graphics";
@@ -59,6 +59,7 @@ const IconButton = (props) => {
     variant = "line",
     disabled,
     className,
+    onClick,
     ...other
   } = props;
   const {
@@ -101,6 +102,7 @@ const IconButton = (props) => {
         title: finalTooltip || "",
         children: /* @__PURE__ */ jsx(IconButton$1, {
           ...other,
+          onClick,
           disableRipple: true,
           onFocusVisible: handlerOnFocus,
           onBlur: handlerOnBlur,
@@ -112,6 +114,7 @@ const IconButton = (props) => {
         })
       }) : /* @__PURE__ */ jsx(IconButton$1, {
         ...other,
+        onClick,
         disableRipple: true,
         onFocusVisible: handlerOnFocus,
         onBlur: handlerOnBlur,

package/components/mui_extended/MenuActions/{index.ba1da3b3.js → index.43a2e1ae.js}

@@ -1,10 +1,11 @@
-import { useState, useMemo } from "react";
+import React__default, { useState, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { IconButton, MenuItem } from "@mui/material";
+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.9dae8337.js";
-import { I as IconButton$1 } from "../IconButton/index.1a9d4fa5.js";
+import { I as Icon } from "../../Icon/index.9fcd1476.js";
+import { I as IconButton$1 } from "../IconButton/index.12f1a3c3.js";
+import clsx from "clsx";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 styled(IconButton)(() => ({}));
 const LabelMemuItem = styled("div")(({
@@ -23,6 +24,9 @@ const ICONS = {
 function MenuActions(props) {
   const {
     menuActions,
+    endListElement,
+    menuActionSx,
+    className,
     objItem = {},
     urlIcon,
     toolTip = "",
@@ -31,6 +35,8 @@ function MenuActions(props) {
     marginLeft,
     marginRight,
     width = 200,
+    withBadge = false,
+    badgeContent,
     arrowType = "right-top",
     ...other
   } = props;
@@ -43,7 +49,9 @@ function MenuActions(props) {
   } = useModuleDictionary();
   const [open, setOpen] = useState(null);
   const handleOpen = (event) => {
+    console.log("handleOpen");
     setOpen(event.currentTarget);
+    event.stopPropagation();
   };
   const urlFinalIcon = useMemo(() => {
     if (urlIcon)
@@ -53,9 +61,10 @@ function MenuActions(props) {
   const handleClose = () => {
     setOpen(null);
   };
-  const handleClick = (menuAction) => {
+  const handleClick = (e, menuAction) => {
     setOpen(null);
     menuAction.onClick();
+    e.stopPropagation();
   };
   const finalActions = useMemo(() => {
     let ret;
@@ -66,17 +75,30 @@ function MenuActions(props) {
     }
     return ret;
   }, [menuActions, objItem]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(IconButton$1, {
+  const IconButtonElement = /* @__PURE__ */ jsx(Fragment, {
+    children: withBadge ? /* @__PURE__ */ jsx(Badge, {
+      badgeContent,
+      color: "primary",
+      overlap: "circular",
+      children: /* @__PURE__ */ jsx(IconButton$1, {
+        src: urlFinalIcon,
+        onClick: handleOpen,
+        tooltip: toolTip
+      })
+    }) : /* @__PURE__ */ jsx(IconButton$1, {
       src: urlFinalIcon,
       onClick: handleOpen,
       tooltip: toolTip
-    }), /* @__PURE__ */ jsx(Popover, {
+    })
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [IconButtonElement, /* @__PURE__ */ jsxs(Popover, {
       id: "Popover",
       open: Boolean(open),
       anchorEl: open,
       onClose: handleClose,
       arrowType,
+      className,
       sx: {
         marginTop,
         marginBottom,
@@ -88,26 +110,32 @@ function MenuActions(props) {
           px: 1,
           typography: "body2",
           borderRadius: 0.75
-        }
+        },
+        ...menuActionSx
       },
       ...other,
-      children: finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(MenuItem, {
+      children: [finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(MenuItem, {
         dense: true,
-        onClick: () => handleClick(menuAction),
+        onClick: (e) => {
+          handleClick(e, menuAction);
+        },
         sx: {
           color: menuAction.color ?? "text.main"
         },
         disabled: menuAction.disabled,
+        className: clsx(menuAction?.className),
         children: [menuAction.urlIcon ? /* @__PURE__ */ jsx(Icon, {
           src: menuAction.urlIcon
         }) : null, /* @__PURE__ */ jsx(LabelMemuItem, {
           children: menuAction.label || menuAction.dictionaryId && getLabel(menuAction.dictionaryId)
         })]
-      }, `menu_action_${index}`))
+      }, `menu_action_${index}`)), endListElement ? endListElement : null]
     })]
   });
 }
+const MemonizedMenuActions = React__default.memo(MenuActions);
 export {
   LabelMemuItem as L,
-  MenuActions as M
+  MenuActions as M,
+  MemonizedMenuActions as a
 };

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

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { MenuActionsProps } from './types';
-export declare function MenuActions(props: MenuActionsProps): import("react").JSX.Element;
+export declare function MenuActions(props: MenuActionsProps): React.JSX.Element;
+export declare const MemonizedMenuActions: React.MemoExoticComponent<typeof MenuActions>;
 export default MenuActions;

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

@@ -1,4 +1,8 @@
+import { ReactElement } from 'react';
 import { PopoverProps } from '../Popover/types';
+import { ComponentNameToClassKey, SxProps } from '@mui/material';
+import { Theme } from '@mui/material';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
 export interface ComponentActionProps {
     description?: string;
     onClick: (props?: any) => void;
@@ -12,6 +16,7 @@ export declare type MenuAction = {
     color?: string;
     label?: string;
     dictionaryId?: string;
+    className?: string;
 };
 export interface MenuActionsProps extends Omit<PopoverProps, 'open'> {
     objItem?: any;
@@ -23,4 +28,8 @@ export interface MenuActionsProps extends Omit<PopoverProps, 'open'> {
     marginRight?: number | string;
     marginLeft?: number | string;
     width?: number;
+    endListElement?: ReactElement;
+    menuActionSx?: SxProps<Theme> | Partial<OverridesStyleRules<string, ComponentNameToClassKey, Theme>>;
+    withBadge?: boolean;
+    badgeContent?: string;
 }

package/components/mui_extended/Pager/{index.67bda2c5.js → index.2f6d6d7d.js}

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { Skeleton, TablePagination } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { I as IconButton } from "../IconButton/index.1a9d4fa5.js";
+import { I as IconButton } from "../IconButton/index.12f1a3c3.js";
 import { useEnvironment } from "@m4l/core";
 import { jsxs, jsx } from "react/jsx-runtime";
 const WrapperPagerActions = styled("div")(({ theme }) => ({

package/components/mui_extended/Tab/constant.d.ts

@@ -0,0 +1 @@
+export declare const COMPONENT_PREFIX = "m4l-tab";

package/components/mui_extended/Tab/{index.9e2f6e34.js → index.7c82e43d.js}

@@ -4,6 +4,7 @@ import { styled } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { g as getNameDataTestId } from "../../../vendor.e353394b.js";
 import { jsx } from "react/jsx-runtime";
 const TabRoot = styled("div")(({
   theme
@@ -33,15 +34,13 @@ const tabUtilityClasses = () => {
     ...composedClasses
   };
 };
-const ICON_PREFIX = "M4LTab";
-const getNameTabDataTestId = (KEY) => {
-  return `${ICON_PREFIX}-${KEY}`;
-};
+const COMPONENT_PREFIX = "m4l-tab";
 function Tab(props) {
   const {
     SKTWidth,
     SKTHeight,
     className,
+    dataTestId = "",
     ...other
   } = props;
   const isSkeleton = useModuleSkeleton();
@@ -49,14 +48,14 @@ function Tab(props) {
   return /* @__PURE__ */ jsx(TabRoot, {
     className: clsx(classes.root, className),
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameTabDataTestId("root")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
     } : {},
     children: !isSkeleton ? /* @__PURE__ */ jsx(Tab$1, {
       ...other
     }) : /* @__PURE__ */ jsx(SKTTabWrapper, {
       className: classes.skeleton,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameTabDataTestId("skeleton")
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "skeleton", dataTestId)
       } : {},
       children: /* @__PURE__ */ jsx(Skeleton, {
         variant: "text",

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

@@ -2,4 +2,5 @@ import { TabProps as MUITabProps } from '@mui/material';
 export interface TabProps extends MUITabProps {
     SKTWidth: string | number;
     SKTHeight: string | number;
+    dataTestId?: string;
 }

package/components/mui_extended/{index.73e536de.js → index.0e2ff642.js}

@@ -1,21 +1,22 @@
 import "@mui/material";
 import "react";
 import "@m4l/core";
-import "../Icon/index.9dae8337.js";
+import "../Icon/index.9fcd1476.js";
 import "clsx";
 import "react/jsx-runtime";
-import "./IconButton/index.1a9d4fa5.js";
+import "./IconButton/index.12f1a3c3.js";
 import "@m4l/graphics";
-import "./Accordion/index.3faafd8b.js";
+import "./Accordion/index.9877f7bf.js";
 import "./Typography/index.443590d6.js";
 import "./Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import "./Button/index.fdb5dcbd.js";
+import "./Button/index.4288f9fc.js";
+import "./Badge/index.8c2b8b66.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
+import "./MenuActions/index.43a2e1ae.js";
 import "./Popover/index.9f35d0eb.js";
-import "./MenuActions/index.ba1da3b3.js";
-import "./Pager/index.67bda2c5.js";
-import "./Tab/index.9e2f6e34.js";
+import "./Pager/index.2f6d6d7d.js";
+import "./Tab/index.7c82e43d.js";
 import "./Tooltip/index.5a795dcd.js";

package/components/mui_extended/index.d.ts

@@ -6,6 +6,7 @@ export { Breadcrumbs } from './Breadcrumbs';
 export type { TLink } from './Breadcrumbs/types';
 export * from './Button/Button';
 export { CircularProgress } from './CircularProgress';
+export { Badge } from './Badge';
 export * from './IconButton/IconButton';
 export * from './ImageButton/ImageButton';
 export { LinearProgress } from './LinearProgress';

package/contexts/ModalContext/{index.699f95fa.js → index.e9a7ba4a.js}

@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { M as ModalDialog } from "../../components/ModalDialog/index.d9c5d400.js";
+import { M as ModalDialog } from "../../components/ModalDialog/index.d9937d46.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 const ModalContext = createContext(null);
 function ModalProvider({

package/hooks/useModal/{index.7b7d26ba.js → index.8e85f7ae.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as ModalContext } from "../../contexts/ModalContext/index.699f95fa.js";
+import { M as ModalContext } from "../../contexts/ModalContext/index.e9a7ba4a.js";
 function useModal() {
   const context = useContext(ModalContext);
   if (!context)