@m4l/components 0.1.35 → 0.1.37

package/components/mui_extended/Pager/index.74f16fe0.js

@@ -1,141 +0,0 @@
-import { useMemo } from "react";
-import { Skeleton, TablePagination } from "@mui/material";
-import { P as PagerActions } from "../../CommonActions/components/Actions/index.4b0d3293.js";
-import { styled } from "@mui/material/styles";
-import { jsxs, jsx } from "react/jsx-runtime";
-styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  overflow: "hidden"
-}));
-const SKTWrapperPagerActions = styled("div")(({ theme }) => ({
-  width: "100%",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  marginLeft: theme.spacing(3)
-}));
-const SKTSvgIconButtonContainer = styled("div")(({ theme }) => ({
-  display: "flex",
-  marginLeft: theme.spacing(3)
-}));
-const SKTSvgIconButton = styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: theme.spacing(3.75),
-  height: theme.spacing(3.75)
-}));
-const SKTWrapperRowsPerPage = styled("div")(({ theme }) => ({
-  display: "grid",
-  gridTemplateColumns: "auto auto",
-  gridGap: theme.spacing(1),
-  marginRight: theme.spacing(3)
-}));
-function Pager(props) {
-  const {
-    totalRecords,
-    rowsPerPageOptions = [5, 10, 2],
-    rowsPerPage = 25,
-    page,
-    onPageChange,
-    onRowsPerPageChange,
-    labelRows = "Rows per page",
-    labelOf = "Of",
-    isSkeleton = "false",
-    isDesktop
-  } = props;
-  const currentPage = useMemo(() => {
-    if (rowsPerPage * page > totalRecords) {
-      return Math.floor(totalRecords / rowsPerPage);
-    }
-    return page;
-  }, [page, rowsPerPage, totalRecords]);
-  const handleChangeRowsPerPage = (event) => {
-    onRowsPerPageChange(parseInt(event.target.value, 10));
-    onPageChange(0);
-  };
-  const handleChangePage = (_event, newPage) => {
-    onPageChange(newPage);
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsxs(SKTWrapperPagerActions, {
-      children: [/* @__PURE__ */ jsxs(SKTWrapperRowsPerPage, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: "40px",
-          height: "16px"
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: "20px",
-          height: "16px"
-        })]
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: "50px",
-        height: "16px"
-      }), /* @__PURE__ */ jsxs(SKTSvgIconButtonContainer, {
-        children: [/* @__PURE__ */ jsx(SKTSvgIconButton, {
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        })]
-      })]
-    });
-  }
-  return /* @__PURE__ */ jsx(TablePagination, {
-    id: "TablePagination",
-    rowsPerPageOptions,
-    component: "div",
-    count: totalRecords,
-    rowsPerPage,
-    page: currentPage,
-    onPageChange: handleChangePage,
-    onRowsPerPageChange: handleChangeRowsPerPage,
-    labelDisplayedRows: isDesktop ? ({
-      from,
-      to,
-      count
-    }) => `${from}-${to} ${labelOf} ${count}` : () => ``,
-    labelRowsPerPage: isDesktop ? labelRows : "",
-    ActionsComponent: PagerActions
-  });
-}
-function getPagerComponentsDictionary() {
-  return ["pager"];
-}
-const defaultPagerDictionary = {
-  pager: {
-    first: "First",
-    previous: "Previous",
-    before: "Before",
-    last: "Last",
-    of: "of"
-  }
-};
-export {
-  Pager as P,
-  defaultPagerDictionary as d,
-  getPagerComponentsDictionary as g
-};

package/components/mui_extended/Popover/index.2a084d8a.js

@@ -1,275 +0,0 @@
-import { useState, useEffect } from "react";
-import { Popover as Popover$1, styled as styled$1, Stack, MenuItem } from "@mui/material";
-import { I as Image } from "../../Image/index.93d5f37f.js";
-import { useLocales } from "@m4l/graphics";
-import { useEnvironment, useNetwork } from "@m4l/core";
-import "../../Icon/index.619fa9ad.js";
-import { styled } from "@mui/material/styles";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import "../Accordion/index.86b97783.js";
-import "../Avatar/index.fe06afd7.js";
-import "react-router-dom";
-import "@mui/material/Button";
-import { C as CircularProgress } from "../CircularProgress/index.ad569afd.js";
-import "@mui/lab";
-import { I as ImageButton } from "../Button/index.44282241.js";
-import "../../CommonActions/components/Actions/index.4b0d3293.js";
-import "../Pager/index.74f16fe0.js";
-import "../Tab/index.e0653a0a.js";
-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]
-  });
-}
-const LabelItem = styled$1("span")(({
-  theme
-}) => ({
-  marginLeft: theme.spacing(1)
-}));
-const ContainerProgress = styled$1("div")(({
-  theme
-}) => ({
-  padding: theme.spacing(0.75, 0),
-  margin: theme.spacing(0, 1.25)
-}));
-const ContainerMenuItems = styled$1("div")(() => ({
-  display: "flex",
-  flexDirection: "column"
-}));
-function LanguagePopover() {
-  const {
-    currentLocale,
-    onChangeLocale
-  } = useLocales();
-  const {
-    domain_token
-  } = useEnvironment();
-  const {
-    networkOperation
-  } = useNetwork();
-  const [open, setOpen] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [allLocales, setAllLocales] = useState([]);
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
-  const handleClose = () => {
-    setOpen(null);
-  };
-  useEffect(() => {
-    let mounted = true;
-    if (open === null || loading || allLocales.length > 0) {
-      return;
-    }
-    setLoading(true);
-    networkOperation({
-      method: "GET",
-      endPoint: `na/locales`,
-      parms: {
-        domain_token
-      }
-    }).then((response) => {
-      if (mounted) {
-        setAllLocales(response.data);
-      }
-    }).finally(() => {
-      setLoading(false);
-    });
-    return function cleanUp() {
-      mounted = false;
-    };
-  }, [open]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(ImageButton, {
-      className: "m4l_language_popover",
-      onClick: handleOpen,
-      sx: {
-        width: 40,
-        height: 40,
-        ...open && {
-          bgcolor: "action.selected"
-        }
-      },
-      src: currentLocale?.url_icon || "",
-      alt: currentLocale?.name,
-      width: "24px",
-      height: "24px",
-      skeletonVariant: "circle",
-      tooltip: "dddd"
-    }), /* @__PURE__ */ jsx(Popover, {
-      arrowType: "top-right",
-      open: Boolean(open),
-      anchorEl: open,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      onClose: handleClose,
-      sx: {
-        mt: 1.5,
-        ml: 0.75,
-        width: 180,
-        rowGap: "100px",
-        "& .MuiMenuItem-root": {
-          px: 1,
-          typography: "body2",
-          borderRadius: 0.75
-        }
-      },
-      children: /* @__PURE__ */ jsxs(ContainerMenuItems, {
-        children: [allLocales.length === 0 && /* @__PURE__ */ jsx(ContainerProgress, {
-          children: /* @__PURE__ */ jsx(CircularProgress, {
-            size: "20px"
-          })
-        }), allLocales.length > 0 && /* @__PURE__ */ jsx(Stack, {
-          spacing: 0.75,
-          children: allLocales.map((option) => /* @__PURE__ */ jsxs(MenuItem, {
-            selected: option.lang === currentLocale?.lang && option?.script === currentLocale?.script && option?.region === currentLocale?.region,
-            onClick: () => {
-              onChangeLocale(option);
-              handleClose();
-            },
-            children: [/* @__PURE__ */ jsx(Image, {
-              alt: option.name,
-              src: option.url_icon,
-              width: "24px",
-              height: "24px"
-            }), /* @__PURE__ */ jsx(LabelItem, {
-              children: option.name
-            })]
-          }, option.lang || option.script || option.region))
-        })]
-      })
-    })]
-  });
-}
-export {
-  LanguagePopover as L,
-  Popover as P
-};

package/components/mui_extended/index.d.ts

@@ -1,56 +0,0 @@
-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';
-declare module '@mui/material/styles/createPalette' {
-    interface TypeBackground {
-        neutral: string;
-        autofill: string;
-        header: string;
-    }
-    interface SimplePaletteColorOptions {
-        lighter?: string;
-        darker?: string;
-        LightSelected?: string;
-        LightSelectedHover?: string;
-        DarkSelected?: string;
-        DarkSelectedHover?: string;
-    }
-    interface PaletteColor {
-        lighter?: string;
-        darker?: string;
-        LightSelected?: string;
-        LightSelectedHover?: string;
-        DarkSelected?: string;
-        DarkSelectedHover?: string;
-    }
-}
-declare module '@mui/material' {
-    interface Color {
-        0: string;
-        500_8: string;
-        500_12: string;
-        500_16: string;
-        500_24: string;
-        500_32: string;
-        500_48: string;
-        500_56: string;
-        500_80: string;
-    }
-}

package/contexts/ModalContext/index.92ae296c.js

@@ -1,147 +0,0 @@
-import { createContext, useState } from "react";
-import { useEnvironment, voidFunction } from "@m4l/core";
-import { Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { B as BoxIcon } from "../../components/mui_extended/BoxIcon/index.e638ecc8.js";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { M as ModalDialog } from "../../components/ModalDialog/index.d50c4a9d.js";
-import { A as ActionIntro } from "../../components/CommonActions/components/ActionIntro/index.808a2cd1.js";
-import { A as ActionCancel } from "../../components/CommonActions/components/ActionCancel/index.a1fe59a4.js";
-import { b as getVariantColor } from "../../utils/index.f3bfdc22.js";
-const WrapperContentConfirm = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%"
-}));
-const ModalContent = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
-  gridGap: theme.spacing(5),
-  flexGrow: 1,
-  [theme.breakpoints.up("sm")]: {
-    display: "grid",
-    flexDirection: "row",
-    gridTemplateColumns: "1fr 1fr"
-  }
-}));
-const IllustrationContainer = styled("div")(({
-  theme,
-  variant
-}) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  "& > span": {
-    background: variant === "warning" ? theme.palette.warning.main : variant === "delete" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : "theme.palette.text.primary"
-  }
-}));
-const MessageContainer = styled("div")(() => ({
-  display: "flex",
-  alignItems: "center"
-}));
-const ContentConfirm = (props) => {
-  const {
-    variant = "info",
-    msg = "Are you sure you want to perform this action? Once complete, the information will be deleted."
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
-  const illustrationError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
-  const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
-  return /* @__PURE__ */ jsx(WrapperContentConfirm, {
-    children: /* @__PURE__ */ jsxs(ModalContent, {
-      children: [/* @__PURE__ */ jsx(IllustrationContainer, {
-        variant,
-        children: /* @__PURE__ */ jsx(BoxIcon, {
-          src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationError : illustrationInfo,
-          sx: {
-            width: "230px",
-            height: "194px"
-          }
-        })
-      }), /* @__PURE__ */ jsx(MessageContainer, {
-        children: /* @__PURE__ */ jsx(Typography, {
-          variant: "body1",
-          children: msg
-        })
-      })]
-    })
-  });
-};
-const ModalContext = createContext(null);
-function ModalProvider({
-  children
-}) {
-  const [modalOptions, setModalOptions] = useState({
-    open: false,
-    withClose: true,
-    onQueryClose: voidFunction,
-    title: "",
-    iconComponent: void 0,
-    contentComponent: void 0,
-    variant: void 0,
-    fullScreen: false
-  });
-  const openModal = (modalOpenProps) => {
-    setModalOptions({
-      open: true,
-      ...modalOpenProps
-    });
-  };
-  const openModalConfirm = (modalOpenConfirmProps) => {
-    const {
-      variant = "warning",
-      title,
-      msg,
-      onClickIntro,
-      onClickCancel = closeModal
-    } = modalOpenConfirmProps;
-    const onClickIntroClose = () => {
-      onClickIntro && onClickIntro();
-      closeModal();
-    };
-    setModalOptions({
-      open: true,
-      title,
-      variant,
-      contentComponent: /* @__PURE__ */ jsx(ContentConfirm, {
-        variant,
-        msg
-      }),
-      actions: /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(ActionCancel, {
-          onClick: onClickCancel
-        }), " ", /* @__PURE__ */ jsx(ActionIntro, {
-          onClick: onClickIntroClose,
-          color: getVariantColor(variant)
-        })]
-      })
-    });
-  };
-  const closeModal = () => {
-    setModalOptions((last) => ({
-      ...last,
-      open: false
-    }));
-  };
-  return /* @__PURE__ */ jsxs(ModalContext.Provider, {
-    value: {
-      ...modalOptions,
-      openModal,
-      openModalConfirm,
-      closeModal
-    },
-    children: [children, /* @__PURE__ */ jsx(ModalDialog, {})]
-  });
-}
-export {
-  ModalContext as M,
-  ModalProvider as a
-};

package/contexts/ModalContext/index.d.ts

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

package/contexts/ModalContext/subcomponents/ContentConfirm/index.d.ts

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

package/contexts/ModalContext/subcomponents/ContentConfirm/styles.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { VariantProps } from './types';
-export declare const WrapperContentConfirm: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ModalContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IllustrationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MessageContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/contexts/ModalContext/subcomponents/ContentConfirm/types.d.ts

@@ -1,8 +0,0 @@
-import { VariantColor } from '../../../../utils/types';
-export interface ModalConfirmProps {
-    variant?: VariantColor;
-    msg?: string;
-}
-export interface VariantProps {
-    variant?: VariantColor;
-}

package/contexts/ModalContext/types.d.ts

@@ -1,41 +0,0 @@
-import { ReactNode } from 'react';
-import { VariantColor } from '../../utils/types';
-export declare type TProps = {
-    children: ReactNode;
-};
-export interface StandarActions {
-    withCancel?: boolean;
-    onClickIntro?: () => void;
-    onClickCancel?: () => void;
-}
-export interface ModalOpenOptions {
-    initialWidth?: number;
-    initialHeigth?: number;
-    maxWidth?: number;
-    maxHeigth?: number;
-    withClose?: boolean;
-    variant?: VariantColor;
-    onQueryClose?: () => void;
-    fullScreen?: boolean;
-    title: string;
-    iconComponent?: ReactNode;
-    contentComponent?: ((props?: any) => JSX.Element) | ReactNode;
-    actions?: ReactNode;
-}
-export interface OpenModalConfirmProps {
-    title: string;
-    variant?: VariantColor;
-    titleAccept?: string;
-    msg: string;
-    onClickIntro?: () => void;
-    onClickCancel?: () => void;
-}
-export interface ModalState extends ModalOpenOptions {
-    open: boolean;
-    variant?: VariantColor;
-}
-export interface ModalContextProps extends ModalState {
-    openModal: (modalProps: ModalOpenOptions) => void;
-    openModalConfirm: (modalOpenProps: OpenModalConfirmProps) => void;
-    closeModal: () => void;
-}

package/contexts/index.d.ts

@@ -1,4 +0,0 @@
-export * from './ModalContext/index';
-export * from './ModalContext/types';
-export type { FormInitialValues, FormStatusLoad } from './RHFormContext/types';
-export { RHFormProvider } from './RHFormContext';

package/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export { useFormAddEdit } from './useFormAddEdit';
-export { useModal } from './useModal';