@m4l/components 0.1.42 → 0.1.44

package/components/mui_extended/Popover/{index.53c77d23.js → index.58c49cc0.js}

@@ -1,6 +1,41 @@
-import { styled } from "@mui/material/styles";
-import { Popover as Popover$1 } from "@mui/material";
+import { styled, Popover as Popover$1, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
 import { jsxs, jsx } from "react/jsx-runtime";
+const PopoverRoot = styled(Popover$1)(({
+  theme
+}) => ({
+  ...theme.components?.M4LPopover?.styleOverrides
+}));
+generateUtilityClasses("M4LPopover", [
+  "root",
+  "arrowStyle",
+  "noArrow",
+  "topLeft",
+  "topCenter",
+  "topRight",
+  "bottomLeft",
+  "bottomCenter",
+  "bottomRight",
+  "leftTop",
+  "leftCenter",
+  "leftBottom",
+  "rightTop",
+  "rightCenter",
+  "rightBottom"
+]);
+function getPopoverClassesUtilityClass(slot) {
+  return generateUtilityClass("M4LPopover", slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root"],
+    arrowStyle: ["arrowStyle", ownerState.arrowType === "top-left" && "topLeft", ownerState.arrowType === "top-center" && "topCenter", ownerState.arrowType === "top-right" && "topRight", ownerState.arrowType === "bottom-left" && "bottomLeft", ownerState.arrowType === "bottom-center" && "bottomCenter", ownerState.arrowType === "bottom-right" && "bottomRight", ownerState.arrowType === "left-top" && "leftTop", ownerState.arrowType === "left-center" && "leftCenter", ownerState.arrowType === "left-bottom" && "leftBottom", ownerState.arrowType === "right-top" && "rightTop", ownerState.arrowType === "right-center" && "rightCenter", ownerState.arrowType === "right-bottom" && "rightBottom"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPopoverClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
 const ArrowStyle = styled("span")(({
   arrowType,
   theme
@@ -102,15 +137,20 @@ const ArrowStyle = styled("span")(({
     }
   };
 });
-function Popover({
-  children,
-  arrowType = "top-right",
-  sx,
-  className,
-  ...other
-}) {
-  return /* @__PURE__ */ jsxs(Popover$1, {
-    className: `m4l_popover ${className ? className : ""}`,
+const Popover = (props) => {
+  const {
+    children,
+    arrowType = "top-right",
+    sx,
+    ...other
+  } = props;
+  const ownerState = {
+    arrowType
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsxs(PopoverRoot, {
+    className: classes.root,
+    "data-testid": "PopoverRoot",
     anchorOrigin: {
       vertical: "bottom",
       horizontal: "right"
@@ -127,11 +167,13 @@ function Popover({
       }
     },
     ...other,
-    children: [arrowType !== "no-arrow" && /* @__PURE__ */ jsx(ArrowStyle, {
+    children: [/* @__PURE__ */ jsx(ArrowStyle, {
+      className: classes.arrowStyle,
+      "data-testid": "ArrowStyle",
       arrowType
     }), children]
   });
-}
+};
 export {
   Popover as P
 };

package/components/mui_extended/Popover/styles.d.ts

@@ -0,0 +1 @@
+export declare const PopoverRoot: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/mui_extended/Popover/subcomponts/ArrowIcon/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ArrowStyleProps } from '../../types';
+export declare const ArrowStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ArrowStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -3,7 +3,7 @@ export declare type ArrowType = 'no-arrow' | 'top-left' | 'top-center' | 'top-ri
 export declare type ArrowStyleProps = {
     arrowType: ArrowType;
 };
+export declare type OwnerState = ArrowStyleProps;
 export interface PopoverProps extends MUIPopeverProps {
-    className?: string;
     arrowType?: ArrowType;
 }

package/components/mui_extended/Typography/index.be3a279a.js

@@ -0,0 +1,63 @@
+import { useModuleSkeleton } from "@m4l/core";
+import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, Typography as Typography$1 } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { unstable_composeClasses } from "@mui/base";
+const WarpperTypography = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LTypography?.styleOverrides
+}));
+const SkeletonTypography = (props) => {
+  const {
+    skeletonWidth,
+    skeletongHeight
+  } = props;
+  return /* @__PURE__ */ jsx(Skeleton, {
+    variant: "text",
+    width: skeletonWidth,
+    height: skeletongHeight
+  });
+};
+const typographyClasses = generateUtilityClasses("M4LTypography", [
+  "root"
+]);
+function getTypographyClassesUtilityClass(slot) {
+  return generateUtilityClass("M4LTypography", slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getTypographyClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function Typography(props) {
+  const {
+    skeletonWidth = "100%",
+    skeletongHeight = "18px",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const classes = useUtilityClasses();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(WarpperTypography, {
+      className: classes.root,
+      children: /* @__PURE__ */ jsx(SkeletonTypography, {
+        skeletonWidth,
+        skeletongHeight
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(WarpperTypography, {
+    className: classes.root,
+    children: /* @__PURE__ */ jsx(Typography$1, {
+      ...other
+    })
+  });
+}
+export {
+  Typography as T,
+  typographyClasses as t
+};

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

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { TypographyProps } from './types';
+import { TypographyClassesType } from './utils/Clases/types';
+export { typographyClasses } from './utils/Clases/index';
+export declare type TypographyClassesKey = TypographyClassesType;
 export declare function Typography(props: TypographyProps): JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WarpperTypography: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/mui_extended/Typography/utils/Clases/index.d.ts

@@ -0,0 +1,6 @@
+import { TypographyClassesType } from './types';
+export declare const typographyClasses: TypographyClassesType;
+export declare function getTypographyClassesUtilityClass(slot: string): string;
+export declare const useUtilityClasses: () => {
+    root: string;
+};

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

@@ -0,0 +1,3 @@
+export interface TypographyClassesType {
+    root: string;
+}

package/components/mui_extended/index.3106c913.js

@@ -0,0 +1,19 @@
+import "@mui/material";
+import "react";
+import "@m4l/core";
+import "../Icon/index.f6e8d810.js";
+import "@mui/material/styles";
+import "react/jsx-runtime";
+import "./IconButton/index.1318a283.js";
+import "./Accordion/index.1d513477.js";
+import "./Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "./Button/index.8406ed5b.js";
+import "../Image/index.aa24e982.js";
+import "@mui/lab";
+import "./Popover/index.58c49cc0.js";
+import "./MenuActions/index.1261168c.js";
+import "./Pager/index.80ccec47.js";
+import "./Tab/index.e0653a0a.js";
+import "./Typography/index.be3a279a.js";

package/components/mui_extended/index.d.ts

@@ -4,17 +4,18 @@ export { type AvatarProps } from './Avatar/types';
 export { BoxIcon } from './BoxIcon';
 export { Breadcrumbs } from './Breadcrumbs';
 export type { TLink } from './Breadcrumbs/types';
-export { Button } from './Button';
+export * from './Button/Button';
 export { CircularProgress } from './CircularProgress';
-export { IconButton } from './IconButton';
+export * from './IconButton/IconButton';
+export * from './ImageButton/ImageButton';
 export { LinearProgress } from './LinearProgress';
 export { LinkWithRoute } from './LinkWithRoute';
 export { LoadingButton } from './LoadingButton';
 export { MenuActions } from './MenuActions';
 export type { MenuAction, ComponentActionProps } from './MenuActions/types';
-export { Popover } from './Popover';
+export * from './Popover/Popover';
 export { Pager } from './Pager';
 export type { PagerProps } from './Pager/types';
 export { getPagerComponentsDictionary } from './Pager/dicctionary';
 export { Tab } from './Tab';
-export { Typography } from './Typography';
+export * from './Typography';

package/contexts/ModalContext/{index.b90eec94.js → index.4442afd9.js}

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

package/contexts/RHFormContext/{index.d88e6e27.js → index.828b60ad.js}

@@ -11,7 +11,7 @@ const WrapperFormProvider = styled("form")(({
   flexDirection: "column",
   width: "100%",
   overflow: "auto",
-  maxWidth: theme.stretch ? "unset" : "900px",
+  maxWidth: "900px",
   padding: theme.spacing(3)
 }));
 function RHFormProvider(props) {

package/contexts/index.d.ts

@@ -1,4 +1,4 @@
-export { DynamicMFParmsProvider, DynamicMFParmsContext, } from '../components/areas/contexts/DynamicMFParmsContext';
+export { DynamicMFParmsProvider, DynamicMFParmsContext, MemonizedDynamicMFParmsProvider, } from '../components/areas/contexts/DynamicMFParmsContext';
 export * from './ModalContext/index';
 export * from './ModalContext/types';
 export type { FormInitialValues, FormStatusLoad } from './RHFormContext/types';

package/hooks/index.d.ts

@@ -1,3 +1,2 @@
 export { useFormAddEdit } from './useFormAddEdit';
 export { useModal } from './useModal';
-export { useDynamicMFParameters } from '../components/areas/hooks/useDynamicMFParameters';

package/hooks/useFormAddEdit/{index.d4845f1a.js → index.15de3ba8.js}

@@ -37,6 +37,11 @@ const useFormAddEdit = (props) => {
       mounted = false;
     };
   }, [statusLoad]);
+  useEffect(() => {
+    if (statusLoad === "ready" && objectId !== void 0) {
+      setStatusLoad("edit");
+    }
+  }, [objectId]);
   return { formValues, statusLoad };
 };
 export {

package/hooks/useModal/{index.d14edee3.js → index.2f5abe84.js}

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