@m4l/components 0.0.46 → 0.0.49

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,14 +1,11 @@
 import "./components/mui_extended/IconButton/index.js";
 import "framer-motion";
-import { Skeleton, Autocomplete, TextField } from "@mui/material";
+import { Skeleton, Autocomplete, TextField, styled as styled$1 } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 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 "./contexts/ModalContext/index.js";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import "./components/hook-form/RHFAutocompleteAsync/index.js";
 import "./components/hook-form/RHFCheckbox/index.js";
 import "./components/hook-form/RHFDateTime.js";
@@ -20,21 +17,23 @@ import "./react-lazy-load-image-component.js";
 import "./components/Image/index.js";
 import "./components/hook-form/RHFUpload.js";
 import "./components/Icon/index.js";
+import "react-router-dom";
+import "@mui/lab";
 import "./components/mui_extended/LoadingButton/index.js";
 import "./components/mui_extended/MenuPopover/index.js";
-import "./components/mui_extended/MenuActions/index.js";
+import "./components/CommonActions/components/Actions/index.js";
 import "./components/mui_extended/Pager/index.js";
 import "./components/mui_extended/Tab/index.js";
-import "date-fns";
+import MuiButton from "@mui/material/Button";
 import "@m4l/graphics";
 import "./components/CompanyLogo/index.js";
 import "./components/DataGrid/index.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
+import "./contexts/ModalContext/index.js";
 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,34 +60,13 @@ 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";
-const getVariantColor = (variant) => {
-  switch (variant) {
-    case "warning":
-      return "warning";
-    case "delete":
-      return "error";
-    case "info":
-      return "info";
-  }
-  return "primary";
-};
-const getThemeVariantColor = (theme, variant) => {
-  switch (variant) {
-    case "warning":
-      theme.palette.warning.main;
-      break;
-    case "delete":
-      theme.palette.error.main;
-      break;
-    case "info":
-      theme.palette.info.main;
-      break;
-  }
-  return theme.palette.text.primary;
-};
 const SKTRHFAutocompleteWrapper = styled("div")(() => ({
   display: "flex",
   width: "100%",
@@ -222,4 +200,47 @@ function RHFAutocomplete(props) {
     }
   });
 }
-export { RHFAutocomplete as R, getThemeVariantColor as a, getVariantColor as g };
+const getVariantColor = (variant) => {
+  switch (variant) {
+    case "warning":
+      return "warning";
+    case "delete":
+      return "error";
+    case "info":
+      return "info";
+  }
+  return "primary";
+};
+const getThemeVariantColor = (theme, variant) => {
+  switch (variant) {
+    case "warning":
+      theme.palette.warning.main;
+      break;
+    case "delete":
+      theme.palette.error.main;
+      break;
+    case "info":
+      theme.palette.info.main;
+      break;
+  }
+  return theme.palette.text.primary;
+};
+const SKTButton = styled$1(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
+  });
+};
+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.46",
+  "version": "0.0.49",
   "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/hook-form/FormProvider/components/FormActions/index.d.ts

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

package/dist/components/hook-form/FormProvider/components/FormActions/skeleton.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function SKTFormActions(): JSX.Element;

package/dist/components/hook-form/FormProvider/components/FormActions/styles.d.ts

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

package/dist/components/hook-form/FormProvider/components/FormActions/types.d.ts

@@ -1,4 +0,0 @@
-export interface FormActionsProps {
-    withIntro?: boolean;
-    urlCancel?: string | number;
-}

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 };