@m4l/components 0.1.40 → 0.1.41

package/components/mui_extended/Popover/index.53c77d23.js

@@ -0,0 +1,137 @@
+import { styled } from "@mui/material/styles";
+import { Popover as Popover$1 } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+const ArrowStyle = styled("span")(({
+  arrowType,
+  theme
+}) => {
+  const SIZE = 12;
+  const POSITION = -(SIZE / 2);
+  const borderStyle = `solid 1px ${theme.palette.grey[50012]}`;
+  const topStyle = {
+    borderRadius: "0 0 3px 0",
+    top: POSITION,
+    borderBottom: borderStyle,
+    borderRight: borderStyle
+  };
+  const bottomStyle = {
+    borderRadius: "3px 0 0 0",
+    bottom: POSITION,
+    borderTop: borderStyle,
+    borderLeft: borderStyle
+  };
+  const leftStyle = {
+    borderRadius: "0 3px 0 0",
+    left: POSITION,
+    borderTop: borderStyle,
+    borderRight: borderStyle
+  };
+  const rightStyle = {
+    borderRadius: "0 0 0 3px",
+    right: POSITION,
+    borderBottom: borderStyle,
+    borderLeft: borderStyle
+  };
+  return {
+    display: "none",
+    [theme.breakpoints.up("sm")]: {
+      zIndex: 1,
+      width: SIZE,
+      height: SIZE,
+      content: "''",
+      position: "absolute",
+      display: "block",
+      transform: "rotate(-135deg)",
+      background: theme.palette.background.paper
+    },
+    ...arrowType === "top-left" && {
+      ...topStyle,
+      left: 20
+    },
+    ...arrowType === "top-center" && {
+      ...topStyle,
+      left: 0,
+      right: 0,
+      margin: "auto"
+    },
+    ...arrowType === "top-right" && {
+      ...topStyle,
+      right: 20
+    },
+    ...arrowType === "bottom-left" && {
+      ...bottomStyle,
+      left: 20
+    },
+    ...arrowType === "bottom-center" && {
+      ...bottomStyle,
+      left: 0,
+      right: 0,
+      margin: "auto"
+    },
+    ...arrowType === "bottom-right" && {
+      ...bottomStyle,
+      right: 20
+    },
+    ...arrowType === "left-top" && {
+      ...leftStyle,
+      top: 20
+    },
+    ...arrowType === "left-center" && {
+      ...leftStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto"
+    },
+    ...arrowType === "left-bottom" && {
+      ...leftStyle,
+      bottom: 20
+    },
+    ...arrowType === "right-top" && {
+      ...rightStyle,
+      top: 20
+    },
+    ...arrowType === "right-center" && {
+      ...rightStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto"
+    },
+    ...arrowType === "right-bottom" && {
+      ...rightStyle,
+      bottom: 20
+    }
+  };
+});
+function Popover({
+  children,
+  arrowType = "top-right",
+  sx,
+  className,
+  ...other
+}) {
+  return /* @__PURE__ */ jsxs(Popover$1, {
+    className: `m4l_popover ${className ? className : ""}`,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    PaperProps: {
+      sx: {
+        p: 1,
+        overflow: "inherit",
+        ...sx
+      }
+    },
+    ...other,
+    children: [arrowType !== "no-arrow" && /* @__PURE__ */ jsx(ArrowStyle, {
+      arrowType
+    }), children]
+  });
+}
+export {
+  Popover as P
+};

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PopoverProps } from './types';
+export declare function Popover({ children, arrowType, sx, className, ...other }: PopoverProps): JSX.Element;
+export default Popover;

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

@@ -0,0 +1,9 @@
+import { PopoverProps as MUIPopeverProps } from '@mui/material';
+export declare type ArrowType = 'no-arrow' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'right-top' | 'right-center' | 'right-bottom';
+export declare type ArrowStyleProps = {
+    arrowType: ArrowType;
+};
+export interface PopoverProps extends MUIPopeverProps {
+    className?: string;
+    arrowType?: ArrowType;
+}

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

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

package/components/mui_extended/Tab/index.e0653a0a.js

@@ -0,0 +1,32 @@
+import { useModuleSkeleton } from "@m4l/core";
+import { Skeleton, Tab as Tab$1 } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const SKTTabWrapper = styled("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(1.5, 2)
+}));
+function Tab(props) {
+  const {
+    SKTWidth,
+    SKTHeight,
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTTabWrapper, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: SKTWidth,
+        height: SKTHeight
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Tab$1, {
+    ...other
+  });
+}
+export {
+  Tab as T
+};

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { useModuleSkeleton } from "@m4l/core";
+import { Skeleton, Typography as Typography$1 } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const SkeletonTypography = (props) => {
+  const {
+    skeletonWidth,
+    skeletongHeight
+  } = props;
+  return /* @__PURE__ */ jsx(Skeleton, {
+    variant: "text",
+    width: skeletonWidth,
+    height: skeletongHeight
+  });
+};
+function Typography(props) {
+  const {
+    skeletonWidth = "100%",
+    skeletongHeight = "18px",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonTypography, {
+      skeletonWidth,
+      skeletongHeight
+    });
+  }
+  return /* @__PURE__ */ jsx(Typography$1, {
+    className: "m4l_typography",
+    ...other
+  });
+}
+export {
+  Typography as T
+};

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

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

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

@@ -0,0 +1,2 @@
+import { SkeletonProps } from '../types';
+export declare type SkeletonTypographyProps = SkeletonProps;

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

@@ -0,0 +1,7 @@
+import { TypographyProps as MUITypographyProps } from '@mui/material';
+export interface SkeletonProps {
+    skeletonWidth?: string | number;
+    skeletongHeight?: string | number;
+}
+export interface TypographyProps extends MUITypographyProps, SkeletonProps {
+}

package/components/mui_extended/index.85dfadf1.js

@@ -0,0 +1,16 @@
+import "@mui/material";
+import "react";
+import "@m4l/core";
+import "../Icon/index.8d754623.js";
+import "@mui/material/styles";
+import "react/jsx-runtime";
+import "./Accordion/index.a541c71c.js";
+import "./Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "@mui/lab";
+import "./Button/index.86a155a2.js";
+import "./Popover/index.53c77d23.js";
+import "./MenuActions/index.ee17bddd.js";
+import "./Pager/index.74d3f5fc.js";
+import "./Tab/index.e0653a0a.js";

package/components/mui_extended/index.d.ts

@@ -0,0 +1,20 @@
+export { Accordion } from './Accordion';
+export { Avatar } from './Avatar';
+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 { CircularProgress } from './CircularProgress';
+export { IconButton } from './IconButton';
+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 { Pager } from './Pager';
+export type { PagerProps } from './Pager/types';
+export { getPagerComponentsDictionary } from './Pager/dicctionary';
+export { Tab } from './Tab';
+export { Typography } from './Typography';

package/contexts/ModalContext/index.b90eec94.js

@@ -0,0 +1,36 @@
+import { createContext, useState } from "react";
+import { M as ModalDialog } from "../../components/ModalDialog/index.a684827f.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+const ModalContext = createContext(null);
+function ModalProvider({
+  children
+}) {
+  const [modalOptions, setModalOptions] = useState({
+    open: false,
+    fullScreen: false
+  });
+  const openModal = (modalOpenProps) => {
+    setModalOptions({
+      open: true,
+      ...modalOpenProps
+    });
+  };
+  const closeModal = () => {
+    setModalOptions((last) => ({
+      ...last,
+      open: false
+    }));
+  };
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, {
+    value: {
+      ...modalOptions,
+      openModal,
+      closeModal
+    },
+    children: [children, /* @__PURE__ */ jsx(ModalDialog, {})]
+  });
+}
+export {
+  ModalContext as M,
+  ModalProvider as a
+};

package/contexts/ModalContext/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ModalContextProps, ModalProviderProps } from './types';
+declare const ModalContext: import("react").Context<ModalContextProps | null>;
+declare function ModalProvider({ children }: ModalProviderProps): JSX.Element;
+export { ModalProvider, ModalContext };

package/contexts/ModalContext/types.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export declare type ModalProviderProps = {
+    children: ReactNode;
+};
+export interface StandarActions {
+    withCancel?: boolean;
+    onClickIntro?: () => void;
+    onClickCancel?: () => void;
+}
+export interface ModalOpenOptions {
+    initialWidth?: number;
+    initialHeigth?: number;
+    maxWidth?: number;
+    maxHeigth?: number;
+    fullScreen?: boolean;
+    window?: ((props?: any) => JSX.Element) | ReactNode;
+}
+export interface ModalState extends ModalOpenOptions {
+    open: boolean;
+}
+export interface ModalContextProps extends ModalState {
+    openModal: (modalProps: ModalOpenOptions) => void;
+    closeModal: () => void;
+}

package/contexts/RHFormContext/index.d.ts

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

package/contexts/RHFormContext/index.d88e6e27.js

@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+import { useForm, FormProvider } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const WrapperFormProvider = styled("form")(({
+  theme
+}) => ({
+  display: "flex",
+  marginBottom: theme.spacing(1),
+  flexDirection: "column",
+  width: "100%",
+  overflow: "auto",
+  maxWidth: theme.stretch ? "unset" : "900px",
+  padding: theme.spacing(3)
+}));
+function RHFormProvider(props) {
+  const {
+    children,
+    onSubmit,
+    values,
+    validationSchema,
+    statusLoad = "ready"
+  } = props;
+  const methods = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues: values
+  });
+  useEffect(() => {
+    if (statusLoad === "reload_values_provider") {
+      const keys = Object.keys(values);
+      keys.forEach((key) => {
+        methods.setValue(key, values[key], {
+          shouldValidate: false,
+          shouldDirty: false,
+          shouldTouch: false
+        });
+      });
+      return;
+    }
+  }, [methods, statusLoad, values]);
+  useEffect(() => {
+    if (statusLoad === "ready") {
+      methods.setValue("statusLoad", "ready", {
+        shouldValidate: false,
+        shouldDirty: false,
+        shouldTouch: false
+      });
+    }
+  }, [statusLoad]);
+  return /* @__PURE__ */ jsx(FormProvider, {
+    ...methods,
+    children: /* @__PURE__ */ jsx(WrapperFormProvider, {
+      className: "m4l_FormProvider",
+      id: "formProvider",
+      onSubmit: methods.handleSubmit(onSubmit),
+      children
+    })
+  });
+}
+export {
+  RHFormProvider as R
+};

package/contexts/RHFormContext/styles.d.ts

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

package/contexts/RHFormContext/types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { FieldValues } from 'react-hook-form';
+export declare type FormStatusLoad = 'initial' | 'new' | 'edit' | 'reload_values_provider' | 'ready' | 'error';
+export declare type FormInitialValues = FieldValues;
+export interface FormProviderProps {
+    children: ReactNode;
+    onSubmit: (data: FieldValues) => void;
+    values: FormInitialValues;
+    validationSchema: any;
+    statusLoad?: FormStatusLoad;
+}

package/contexts/index.d.ts

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

package/hooks/useFormAddEdit/index.d.ts

@@ -0,0 +1,6 @@
+import { FormStatusLoad } from '../../contexts/RHFormContext/types';
+import { UseFormAddEditProps } from './types';
+export declare const useFormAddEdit: (props: UseFormAddEditProps) => {
+    formValues: import("react-hook-form").FieldValues;
+    statusLoad: FormStatusLoad;
+};

package/hooks/useFormAddEdit/index.d4845f1a.js

@@ -0,0 +1,44 @@
+import { useNetwork, useFlags } from "@m4l/core";
+import { useState, useEffect } from "react";
+const useFormAddEdit = (props) => {
+  const { initialValues, objectId, endPoint, formatDataEnpoint } = props;
+  const [formValues, setFormValues] = useState(initialValues);
+  const [statusLoad, setStatusLoad] = useState(
+    objectId === void 0 ? "new" : "edit"
+  );
+  const { networkOperation } = useNetwork();
+  const { addFlag } = useFlags();
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit") {
+      networkOperation({
+        method: "GET",
+        endPoint: `${endPoint}/${objectId}`
+      }).then(
+        (response) => {
+          if (mounted) {
+            if (formatDataEnpoint) {
+              setFormValues(formatDataEnpoint(response));
+            } else {
+              setFormValues(response);
+            }
+            setStatusLoad("reload_values_provider");
+          }
+        },
+        () => {
+          setStatusLoad("error");
+        }
+      );
+    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
+      addFlag("form_loaded");
+      setStatusLoad("ready");
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [statusLoad]);
+  return { formValues, statusLoad };
+};
+export {
+  useFormAddEdit as u
+};

package/hooks/useFormAddEdit/types.d.ts

@@ -0,0 +1,8 @@
+import { FieldValues } from 'react-hook-form';
+import { FormInitialValues } from '../../contexts/RHFormContext/types';
+export interface UseFormAddEditProps {
+    objectId?: number;
+    endPoint: string;
+    initialValues: FormInitialValues;
+    formatDataEnpoint?: (data: FieldValues) => FormInitialValues;
+}

package/hooks/useModal/index.d.ts

@@ -0,0 +1,2 @@
+export declare function useModal(): import("../..").ModalContextProps;
+export default useModal;

package/hooks/useModal/index.d14edee3.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { M as ModalContext } from "../../contexts/ModalContext/index.b90eec94.js";
+function useModal() {
+  const context = useContext(ModalContext);
+  if (!context)
+    throw new Error("useModal context must be use inside ModalContext");
+  return context;
+}
+export {
+  useModal as u
+};

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './contexts';
+export * from './hooks';
+export { Logo } from './assets/Logo';