@m4l/components 0.1.75 → 0.1.77

package/components/mui_extended/MenuActions/{index.ca5ce35a.js → index.f5b1c022.js}

@@ -1,10 +1,10 @@
 import { 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.f9119f5e.js";
-import { I as IconButton$1 } from "../IconButton/index.3b05af71.js";
+import { I as Icon } from "../../Icon/index.ecb63e65.js";
+import { I as IconButton$1 } from "../IconButton/index.fc5b7c2d.js";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 styled(IconButton)(() => ({}));
 const LabelMemuItem = styled("div")(({
@@ -23,6 +23,9 @@ const ICONS = {
 function MenuActions(props) {
   const {
     menuActions,
+    endListElement,
+    menuActionSx,
+    className,
     objItem = {},
     urlIcon,
     toolTip = "",
@@ -31,6 +34,8 @@ function MenuActions(props) {
     marginLeft,
     marginRight,
     width = 200,
+    withBadge = false,
+    badgeContent,
     arrowType = "right-top",
     ...other
   } = props;
@@ -66,17 +71,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,22 +106,23 @@ 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),
         sx: {
           color: menuAction.color ?? "text.main"
         },
         disabled: menuAction.disabled,
-        children: [/* @__PURE__ */ jsx(Icon, {
+        children: [menuAction.urlIcon ? /* @__PURE__ */ jsx(Icon, {
           src: menuAction.urlIcon
-        }), /* @__PURE__ */ jsx(LabelMemuItem, {
+        }) : null, /* @__PURE__ */ jsx(LabelMemuItem, {
           children: menuAction.label || menuAction.dictionaryId && getLabel(menuAction.dictionaryId)
         })]
-      }, `menu_action_${index}`))
+      }, `menu_action_${index}`)), endListElement ? endListElement : null]
     })]
   });
 }

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

@@ -1,14 +1,18 @@
+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;
 }
 export declare type MenuAction = {
-    urlIcon: string;
+    urlIcon?: string;
     iconWidth?: number;
     iconHeight?: number;
     onClick: (props?: any) => void;
-    disabled: boolean;
+    disabled?: boolean;
     color?: string;
     label?: string;
     dictionaryId?: string;
@@ -23,4 +27,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.80ec975a.js → index.435af0df.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.3b05af71.js";
+import { I as IconButton } from "../IconButton/index.fc5b7c2d.js";
 import { useEnvironment } from "@m4l/core";
 import { jsxs, jsx } from "react/jsx-runtime";
 const WrapperPagerActions = styled("div")(({ theme }) => ({

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

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

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

@@ -0,0 +1,7 @@
+import { TabClassesType } from './types';
+export declare const tabClasses: TabClassesType;
+export declare function getTabUtilityClass(slot: string): string;
+export declare const tabUtilityClasses: () => {
+    root: string;
+    skeleton: string;
+};

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

@@ -0,0 +1,7 @@
+import { tabUtilityClasses } from ".";
+export interface TabClassesType {
+    root: string;
+    skeleton: string;
+}
+export declare type TabClassesKey = keyof TabClassesType;
+export declare type Classes = ReturnType<typeof tabUtilityClasses>;

package/components/mui_extended/Tab/index.9e2f6e34.js

@@ -0,0 +1,71 @@
+import { useModuleSkeleton } from "@m4l/core";
+import { generateUtilityClasses, generateUtilityClass, Tab as Tab$1, Skeleton } from "@mui/material";
+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 { jsx } from "react/jsx-runtime";
+const TabRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LTab?.styleOverrides
+}));
+const SKTTabWrapper = styled("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(1.5, 2)
+}));
+const componentName = "M4LTab";
+generateUtilityClasses(componentName, [
+  "root",
+  "skeleton"
+]);
+function getTabUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const tabUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getTabUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const ICON_PREFIX = "M4LTab";
+const getNameTabDataTestId = (KEY) => {
+  return `${ICON_PREFIX}-${KEY}`;
+};
+function Tab(props) {
+  const {
+    SKTWidth,
+    SKTHeight,
+    className,
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const classes = tabUtilityClasses();
+  return /* @__PURE__ */ jsx(TabRoot, {
+    className: clsx(classes.root, className),
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameTabDataTestId("root")
+    } : {},
+    children: !isSkeleton ? /* @__PURE__ */ jsx(Tab$1, {
+      ...other
+    }) : /* @__PURE__ */ jsx(SKTTabWrapper, {
+      className: classes.skeleton,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameTabDataTestId("skeleton")
+      } : {},
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: SKTWidth,
+        height: SKTHeight
+      })
+    })
+  });
+}
+export {
+  Tab as T
+};

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

@@ -0,0 +1 @@
+export declare const ICON_PREFIX = "M4LTab";

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

@@ -0,0 +1,2 @@
+import type { TabClassesKey } from '../classes/types';
+export declare const getNameTabDataTestId: (KEY: TabClassesKey) => string;

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { TooltipClassesType } from './types';
+export declare const TooltipClasses: TooltipClassesType;
+export declare function getTooltipUtilityClass(slot: string): string;
+export declare const tooltipUtilityClasses: () => {
+    root: string;
+};

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

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

package/components/mui_extended/Tooltip/index.5a795dcd.js

@@ -0,0 +1,43 @@
+import { generateUtilityClasses, generateUtilityClass, useTheme, Tooltip as Tooltip$1 } from "@mui/material";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { unstable_composeClasses } from "@mui/base";
+const componentName = "M4LTooltip";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getTooltipUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const tooltipUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getTooltipUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const Tooltip = (props) => {
+  const {
+    children,
+    className,
+    ...others
+  } = props;
+  const classes = tooltipUtilityClasses();
+  const theme = useTheme();
+  const stylesoverrides = theme.components?.M4LTooltip?.styleOverrides;
+  return /* @__PURE__ */ jsx(Tooltip$1, {
+    PopperProps: {
+      sx: {
+        ...stylesoverrides
+      },
+      className: clsx(classes.root, className)
+    },
+    ...others,
+    children
+  });
+};
+export {
+  Tooltip as T
+};

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

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

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

@@ -0,0 +1,6 @@
+import { ComponentNameToClassKey, SxProps, Theme } from "@mui/material";
+import { TooltipProps as MUITooltipProps } from "@mui/material";
+import { OverridesStyleRules } from "@mui/material/styles/overrides";
+export interface TooltipProps extends Omit<MUITooltipProps, 'sx'> {
+    sx?: SxProps<Theme> | Partial<OverridesStyleRules<string, ComponentNameToClassKey, Theme>>;
+}

package/components/mui_extended/index.83979b6a.js

@@ -0,0 +1,22 @@
+import "@mui/material";
+import "react";
+import "@m4l/core";
+import "../Icon/index.ecb63e65.js";
+import "clsx";
+import "react/jsx-runtime";
+import "./IconButton/index.fc5b7c2d.js";
+import "@m4l/graphics";
+import "./Accordion/index.12b1339a.js";
+import "./Typography/index.443590d6.js";
+import "./Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "./Button/index.4288f9fc.js";
+import "./Badge/index.8c2b8b66.js";
+import "../Image/index.c18ebf5a.js";
+import "@mui/lab";
+import "./Popover/index.9f35d0eb.js";
+import "./MenuActions/index.f5b1c022.js";
+import "./Pager/index.435af0df.js";
+import "./Tab/index.9e2f6e34.js";
+import "./Tooltip/index.5a795dcd.js";

package/components/mui_extended/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion } from './Accordion';
+export { Accordion } from './Accordion/Accordion';
 export { Avatar } from './Avatar/Avatar';
 export { type AvatarProps } from './Avatar/types';
 export { BoxIcon } from './BoxIcon';
@@ -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';
@@ -18,4 +19,5 @@ export { Pager } from './Pager';
 export type { PagerProps } from './Pager/types';
 export { getPagerComponentsDictionary } from './Pager/dicctionary';
 export { Tab } from './Tab';
+export * from './Tooltip';
 export * from './Typography/Typography';

package/contexts/ModalContext/{index.a0de81f0.js → index.dee85a61.js}

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

package/contexts/ModalContext/types.d.ts

@@ -7,6 +7,7 @@ export interface StandarActions {
     onClickIntro?: () => void;
     onClickCancel?: () => void;
 }
+export declare type StateColors = 'warning' | 'delete' | 'info' | 'success' | undefined;
 export interface ModalOpenOptions {
     initialWidth?: number;
     initialHeigth?: number;
@@ -14,6 +15,7 @@ export interface ModalOpenOptions {
     maxHeigth?: number;
     fullScreen?: boolean;
     window?: ((props?: any) => JSX.Element) | ReactNode;
+    variant?: StateColors;
 }
 export interface ModalState extends ModalOpenOptions {
     open: boolean;

package/contexts/RHFormContext/classes/constants.d.ts

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

package/contexts/RHFormContext/classes/index.d.ts

@@ -0,0 +1,9 @@
+import { RHFormProivderClassesType } from './types';
+export declare const RHFormProviderClasses: RHFormProivderClassesType;
+export declare function getRHFormProviderUtilityClass(slot: string): string;
+export declare const RHFormProviderUtilityClasses: () => {
+    value: string;
+    root: string;
+    property: string;
+    skeletonProperty: string;
+};

package/contexts/RHFormContext/classes/types.d.ts

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

package/contexts/RHFormContext/{index.a7511399.js → index.fe175bab.js}

@@ -2,12 +2,35 @@ import { useEffect } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { styled } from "@mui/material/styles";
+import { S as ScrollBar } from "../../components/ScrollBar/index.bbe48f4d.js";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
 import { jsx } from "react/jsx-runtime";
-const WrapperFormProvider = styled("form")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  width: "100%"
+const FormProviderRoot = styled("form")(({
+  theme
+}) => ({
+  ...theme.components?.M4LRHFormProvider?.styleOverrides
 }));
+const componentName = "M4LRHFormProvider";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getRHFormProviderUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const RHFormProviderUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    property: ["property"],
+    value: ["value"],
+    skeletonProperty: ["skeletonProperty"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFormProviderUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const classes = RHFormProviderUtilityClasses();
 function RHFormProvider(props) {
   const {
     children,
@@ -45,11 +68,12 @@ function RHFormProvider(props) {
   }, [statusLoad]);
   return /* @__PURE__ */ jsx(FormProvider, {
     ...methods,
-    children: /* @__PURE__ */ jsx(WrapperFormProvider, {
-      className: "m4l_FormProvider",
-      id: "formProvider",
-      onSubmit: methods.handleSubmit(onSubmit),
-      children
+    children: /* @__PURE__ */ jsx(ScrollBar, {
+      children: /* @__PURE__ */ jsx(FormProviderRoot, {
+        className: classes.root,
+        onSubmit: methods.handleSubmit(onSubmit),
+        children
+      })
     })
   });
 }

package/hooks/useModal/{index.26075cdd.js → index.de522a10.js}

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