@m4l/components 0.0.45 → 0.0.48

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
 import { Theme } from '@mui/material/styles';
-import { VariantModal } from '../contexts/ModalContext/types';
-export declare const getVariantColor: (variant: VariantModal | undefined) => "warning" | "info" | "primary" | "error";
-export declare const getThemeVariantColor: (theme: Theme, variant: VariantModal | undefined) => string;
+import { VariantColor } from './types';
+export declare const getVariantColor: (variant: VariantColor | undefined) => "warning" | "info" | "primary" | "error";
+export declare const getThemeVariantColor: (theme: Theme, variant: VariantColor | undefined) => string;

package/dist/utils/types.d.ts

@@ -0,0 +1 @@
+export declare type VariantColor = 'warning' | 'delete' | 'info' | 'primary';

package/dist/vendor.js

@@ -1,13 +1,15 @@
 import "./components/mui_extended/IconButton/index.js";
 import "framer-motion";
-import { Skeleton, Autocomplete, TextField } from "@mui/material";
+import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useModuleSkeleton, useModuleDictionary } from "@m4l/core";
+import MuiButton from "@mui/material/Button";
 import "react";
 import { useFormContext, Controller } from "react-hook-form";
 import "./components/hook-form/FormProvider/index.js";
 import "react-router-dom";
-import { useModuleDictionary } from "@m4l/core";
 import "@mui/lab";
+import "./components/CommonActions/components/Actions/index.js";
 import "./contexts/ModalContext/index.js";
 import "./components/hook-form/RHFAutocompleteAsync/index.js";
 import "./components/hook-form/RHFCheckbox/index.js";
@@ -15,17 +17,15 @@ import "./components/hook-form/RHFDateTime.js";
 import "@mui/x-date-pickers";
 import "./components/hook-form/RHFTextField/index.js";
 import "./lodash.js";
-import { styled } from "@mui/material/styles";
+import { styled as styled$1 } from "@mui/material/styles";
 import "./react-lazy-load-image-component.js";
 import "./components/Image/index.js";
 import "./components/hook-form/RHFUpload.js";
 import "./components/Icon/index.js";
 import "./components/mui_extended/LoadingButton/index.js";
 import "./components/mui_extended/MenuPopover/index.js";
-import "./components/mui_extended/MenuActions/index.js";
 import "./components/mui_extended/Pager/index.js";
 import "./components/mui_extended/Tab/index.js";
-import "date-fns";
 import "@m4l/graphics";
 import "./components/CompanyLogo/index.js";
 import "./components/DataGrid/index.js";
@@ -34,7 +34,6 @@ import "react-dnd-html5-backend";
 import "./components/ScrollBar/index.js";
 import "./components/DynamicFilter/index.js";
 import "./simplebar.js";
-import "./components/FormActions/index.js";
 import "./react-draggable.js";
 import "./components/ModalDialog/index.js";
 import "./components/Resizeable/index.js";
@@ -61,6 +60,10 @@ import "./components/mui_extended/LinkWithRoute/index.js";
 import "./components/mui_extended/Typography/index.js";
 import "./components/formatters/BooleanFormatter/index.js";
 import "./components/formatters/DateFormatter/index.js";
+import "./components/CommonActions/components/ActionCancel/index.js";
+import "./components/CommonActions/components/ActionIntro/index.js";
+import "./components/CommonActions/components/ActionFormCancel/index.js";
+import "./components/CommonActions/components/ActionFormIntro/index.js";
 import "./components/LanguagePopover/index.js";
 import "./components/Loadable/index.js";
 import "./hooks/useModal/index.js";
@@ -89,12 +92,30 @@ const getThemeVariantColor = (theme, variant) => {
   }
   return theme.palette.text.primary;
 };
-const SKTRHFAutocompleteWrapper = styled("div")(() => ({
+const SKTButton = styled(Skeleton)(({
+  theme
+}) => ({
+  borderRadius: theme.spacing(0.5)
+}));
+const Button = (props) => {
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTButton, {
+      variant: "rectangular",
+      width: "100px",
+      height: "36px"
+    });
+  }
+  return /* @__PURE__ */ jsx(MuiButton, {
+    ...props
+  });
+};
+const SKTRHFAutocompleteWrapper = styled$1("div")(() => ({
   display: "flex",
   width: "100%",
   flexDirection: "column"
 }));
-styled("div")(({
+styled$1("div")(({
   theme
 }) => ({
   display: "flex",
@@ -104,7 +125,7 @@ styled("div")(({
     justifyContent: "flex-start"
   }
 }));
-const SKTInputText = styled("div")(({
+const SKTInputText = styled$1("div")(({
   theme
 }) => ({
   width: "100%",
@@ -120,7 +141,7 @@ const SKTInputText = styled("div")(({
     width: "100%"
   }
 }));
-styled("div")(() => ({
+styled$1("div")(() => ({
   display: "flex",
   width: "100%",
   "& .MuiAutocomplete-root": {
@@ -222,4 +243,4 @@ function RHFAutocomplete(props) {
     }
   });
 }
-export { RHFAutocomplete as R, getThemeVariantColor as a, getVariantColor as g };
+export { Button as B, RHFAutocomplete as R, getVariantColor as a, getThemeVariantColor as g };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.45",
+  "version": "0.0.48",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,7 @@
     "format": "npm run prettier:fix && npm run lint:fix"
   },
   "dependencies": {
-    "@m4l/graphics": "^0.0.31",
+    "@m4l/graphics": "^0.0.33",
     "react": "^17.0.0 || 18.x",
     "react-dom": "^18.0.0",
     "react-draggable": "^4.4.5"
@@ -25,7 +25,6 @@
     "@mui/material": "^5.8.7",
     "@mui/x-date-pickers": "^5.0.0-beta.0",
     "clsx": "^1.2.1",
-    "date-fns": "^2.28.0",
     "framer-motion": "^6.5.0",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
@@ -56,8 +55,8 @@
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
     "@vitejs/plugin-react": "^1.3.2",
+    "base-64": "^1.0.0",
     "clsx": "^1.2.1",
-    "date-fns": "^2.28.0",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -76,7 +75,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-json-view": "^1.21.3",
-    "react-lazy-load-image-component": "^1.5.4",
+    "react-lazy-load-image-component": "^1.5.5",
     "react-resizable": "^3.0.4",
     "react-splitter-layout": "^4.0.0",
     "react-toastify": "^9.0.5",

package/dist/components/FormActions/index.d.ts

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

package/dist/components/FormActions/index.js

@@ -1,51 +0,0 @@
-import { useModuleDictionary } from "@m4l/core";
-import { Button } from "@mui/material";
-import { g as getVariantColor } from "../../vendor.js";
-import { styled } from "@mui/material/styles";
-import { jsxs, jsx } from "react/jsx-runtime";
-const WrapperActions = styled("div")(({
-  theme
-}) => ({
-  paddingTop: theme.spacing(3),
-  display: "flex",
-  flexDirection: "row",
-  justifyContent: "flex-end",
-  "& > button": {
-    marginLeft: "10px"
-  }
-}));
-const FormActions = (props) => {
-  const {
-    variant,
-    standardActions,
-    actionComponents,
-    onCloseModal
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  return /* @__PURE__ */ jsxs(WrapperActions, {
-    children: [actionComponents && actionComponents.map((action) => action), standardActions && standardActions.withCancel && /* @__PURE__ */ jsx(Button, {
-      variant: "outlined",
-      color: variant !== void 0 ? "inherit" : variant,
-      onClick: onCloseModal,
-      children: getLabel("actions.action_cancel")
-    }), standardActions && standardActions.onClickIntro && /* @__PURE__ */ jsx(Button, {
-      variant: "contained",
-      onClick: standardActions.onClickIntro,
-      type: "submit",
-      color: getVariantColor(variant),
-      children: getLabel("actions.action_accept")
-    })]
-  });
-};
-function getActionnsComponentsDictionary() {
-  return ["actions"];
-}
-const defaultActionsDictionary = {
-  actions: {
-    action_cancel: "Cancel",
-    action_accept: "Intro"
-  }
-};
-export { FormActions as F, defaultActionsDictionary as d, getActionnsComponentsDictionary as g };

package/dist/components/FormActions/styles.d.ts

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

package/dist/components/FormActions/types.d.ts

@@ -1,7 +0,0 @@
-import { ModalOpenOptions, VariantModal } from '../../contexts/ModalContext/types';
-declare type ImodalOpt = Pick<ModalOpenOptions, 'actionComponents' | 'standardActions'>;
-export interface ActionsProps extends ImodalOpt {
-    variant?: VariantModal;
-    onCloseModal?: () => void | undefined;
-}
-export {};

package/dist/components/mui_extended/MenuActions/index.js

@@ -1,111 +0,0 @@
-import { useState, useMemo } from "react";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { IconButton, Tooltip, MenuItem } from "@mui/material";
-import { M as MenuPopover } from "../MenuPopover/index.js";
-import { styled } from "@mui/material/styles";
-import { I as Icon } from "../../Icon/index.js";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-const WrapperMenuActions = styled(IconButton)(() => ({}));
-const LabelMemuItem = styled("div")(({
-  theme
-}) => ({
-  height: "22px",
-  marginLeft: theme.spacing(1.5),
-  display: "flex",
-  alignItems: "center"
-}));
-function MenuActions(props) {
-  const {
-    menuActions,
-    objItem = {},
-    urlIcon,
-    toolTip = "",
-    marginTop = -1,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    width = 200,
-    arrow = "right-top",
-    ...other
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const [open, setOpen] = useState(null);
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
-  const urlFinalIcon = useMemo(() => {
-    if (urlIcon)
-      return urlIcon;
-    return `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/more_vertical.svg`;
-  }, [urlIcon, host_static_assets, environment_assets]);
-  const handleClose = () => {
-    setOpen(null);
-  };
-  const handleClick = (menuAction) => {
-    setOpen(null);
-    menuAction.onClick();
-  };
-  const finalActions = useMemo(() => {
-    let ret;
-    if (typeof menuActions !== "function") {
-      ret = menuActions;
-    } else {
-      ret = menuActions(objItem);
-    }
-    return ret;
-  }, [menuActions, objItem]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Tooltip, {
-      title: toolTip,
-      children: /* @__PURE__ */ jsx(WrapperMenuActions, {
-        id: "WrapperMenuActions",
-        size: "small",
-        onClick: handleOpen,
-        children: /* @__PURE__ */ jsx(Icon, {
-          src: urlFinalIcon,
-          width: 16,
-          height: 16
-        })
-      })
-    }), /* @__PURE__ */ jsx(MenuPopover, {
-      id: "MenuPopover",
-      open: Boolean(open),
-      anchorEl: open,
-      onClose: handleClose,
-      arrow,
-      sx: {
-        marginTop,
-        marginBottom,
-        marginLeft,
-        marginRight,
-        width,
-        "& .MuiMenuItem-root": {
-          px: 1,
-          typography: "body2",
-          borderRadius: 0.75
-        }
-      },
-      ...other,
-      children: open && finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(MenuItem, {
-        dense: true,
-        onClick: () => handleClick(menuAction),
-        sx: {
-          color: menuAction.color ? menuAction.color : "text.main"
-        },
-        disabled: menuAction.disabled,
-        children: [/* @__PURE__ */ jsx(Icon, {
-          src: menuAction.urlIcon
-        }), /* @__PURE__ */ jsx(LabelMemuItem, {
-          children: getLabel(menuAction.dictionaryField)
-        })]
-      }, `menu_action_${index}`))
-    })]
-  });
-}
-export { LabelMemuItem as L, MenuActions as M };