@m4l/components 0.0.23 → 0.0.26

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

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

package/dist/components/Icon/index.js

@@ -0,0 +1,26 @@
+import { styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const MaskIcon = styled("div", {
+  shouldForwardProp: (props) => props !== "src" && props !== "width" && props !== "height" && props !== "bgColor"
+})((props) => ({
+  WebkitMask: `url(${props.src}) no-repeat`,
+  mask: `url(${props.src}) no-repeat`,
+  width: props.width === void 0 ? "20px" : props.width,
+  height: props.height === void 0 ? "20px" : props.height,
+  backgroundColor: props.bgColor === "active" ? props.theme.palette.action.active : props.bgColor === "selected" ? props.theme.palette.primary.main : props.bgColor === "info" ? props.theme.palette.info.main : props.bgColor === "warning" ? props.theme.palette.warning.main : props.bgColor === "error" ? props.theme.palette.error.main : props.bgColor
+}));
+function Icon(props) {
+  const {
+    src = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/commons/assets/icons/default.svg",
+    width = "20px",
+    height = "20px",
+    bgColor = "active"
+  } = props;
+  return /* @__PURE__ */ jsx(MaskIcon, {
+    src,
+    width,
+    height,
+    bgColor
+  });
+}
+export { Icon as I };

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

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

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

@@ -0,0 +1,6 @@
+export interface IconProps {
+    src: string;
+    width?: number | string;
+    height?: number | string;
+    bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'disabled';
+}

package/dist/components/ObjectLogs/index.js

@@ -1,8 +1,7 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, usePaginate } from "@m4l/core";
 import { Tooltip, IconButton, TextField } from "@mui/material";
-import { LocalizationProvider, DateTimePicker } from "@mui/x-date-pickers";
-import AdapterDateFns from "@mui/lab/AdapterDateFns";
+import { DateTimePicker } from "@mui/x-date-pickers";
 import { styled, useTheme } from "@mui/material/styles";
 import { startOfMonth, endOfDay } from "date-fns";
 import { D as DataGrid } from "../DataGrid/index.js";
@@ -225,25 +224,22 @@ function ObjectLogs(props) {
   return /* @__PURE__ */ jsxs(Container$1, {
     children: [/* @__PURE__ */ jsxs(Actions, {
       id: "objectLogsActions",
-      children: [/* @__PURE__ */ jsxs(LocalizationProvider, {
-        dateAdapter: AdapterDateFns,
-        children: [/* @__PURE__ */ jsx(DateTimePicker, {
-          value: startValue,
-          onChange: (newValue) => {
-            onChangeDate(newValue, "start");
-          },
-          renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
-            ...params
-          })
-        }), /* @__PURE__ */ jsx(DateTimePicker, {
-          value: endValue,
-          onChange: (newValue) => {
-            onChangeDate(newValue, "end");
-          },
-          renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
-            ...params
-          })
-        })]
+      children: [/* @__PURE__ */ jsx(DateTimePicker, {
+        value: startValue,
+        onChange: (newValue) => {
+          onChangeDate(newValue, "start");
+        },
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+          ...params
+        })
+      }), /* @__PURE__ */ jsx(DateTimePicker, {
+        value: endValue,
+        onChange: (newValue) => {
+          onChangeDate(newValue, "end");
+        },
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+          ...params
+        })
       }), /* @__PURE__ */ jsx(IconButton$1, {
         dictionaryTooltip: "object_logs.search",
         onClick: onClickFilter,

package/dist/components/animate/MotionContainer/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MotionProps } from 'framer-motion';
+import { BoxProps } from '@mui/material';
+declare type IProps = BoxProps & MotionProps;
+export interface Props extends IProps {
+    animate?: boolean;
+    action?: boolean;
+}
+export declare function MotionContainer({ animate, action, children, ...other }: Props): JSX.Element;
+export {};

package/dist/components/animate/MotionContainer/index.js

@@ -0,0 +1,31 @@
+import { m } from "framer-motion";
+import { Box } from "@mui/material";
+import { v as varContainer } from "../variants/container.js";
+import { jsx } from "react/jsx-runtime";
+function MotionContainer({
+  animate,
+  action = false,
+  children,
+  ...other
+}) {
+  if (action) {
+    return /* @__PURE__ */ jsx(Box, {
+      component: m.div,
+      initial: false,
+      animate: animate ? "animate" : "exit",
+      variants: varContainer(),
+      ...other,
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx(Box, {
+    component: m.div,
+    initial: "initial",
+    animate: "animate",
+    exit: "exit",
+    variants: varContainer(),
+    ...other,
+    children
+  });
+}
+export { MotionContainer as M };

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

@@ -1,3 +1,4 @@
 export * from './variants';
 export { IconButtonAnimate } from './IconButtonAnimate';
+export { MotionContainer } from './MotionContainer';
 export { MotionLazyContainer } from './MotionLazyContainer';

package/dist/components/animate/variants/bounce.d.ts

@@ -0,0 +1,136 @@
+import { VariantsType } from '../type';
+export declare const varBounce: (props?: VariantsType | undefined) => {
+    in: {
+        initial: {};
+        animate: {
+            scale: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+        exit: {
+            scale: number[];
+            opacity: number[];
+        };
+    };
+    inUp: {
+        initial: {};
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+        exit: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+    };
+    inDown: {
+        initial: {};
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+        exit: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+    };
+    inLeft: {
+        initial: {};
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+        exit: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+    };
+    inRight: {
+        initial: {};
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+        exit: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+    };
+    out: {
+        animate: {
+            scale: number[];
+            opacity: number[];
+        };
+    };
+    outUp: {
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+        };
+    };
+    outDown: {
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+        };
+    };
+    outLeft: {
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+        };
+    };
+    outRight: {
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+        };
+    };
+};

package/dist/components/animate/variants/bounce.js

@@ -0,0 +1,97 @@
+import { v as varTranEnter, a as varTranExit } from "./transition.js";
+const varBounce = (props) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+  return {
+    in: {
+      initial: {},
+      animate: {
+        scale: [0.3, 1.1, 0.9, 1.03, 0.97, 1],
+        opacity: [0, 1, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn })
+      },
+      exit: {
+        scale: [0.9, 1.1, 0.3],
+        opacity: [1, 1, 0]
+      }
+    },
+    inUp: {
+      initial: {},
+      animate: {
+        y: [720, -24, 12, -4, 0],
+        scaleY: [4, 0.9, 0.95, 0.985, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: { ...varTranEnter({ durationIn, easeIn }) }
+      },
+      exit: {
+        y: [12, -24, 720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut })
+      }
+    },
+    inDown: {
+      initial: {},
+      animate: {
+        y: [-720, 24, -12, 4, 0],
+        scaleY: [4, 0.9, 0.95, 0.985, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn })
+      },
+      exit: {
+        y: [-12, 24, -720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut })
+      }
+    },
+    inLeft: {
+      initial: {},
+      animate: {
+        x: [-720, 24, -12, 4, 0],
+        scaleX: [3, 1, 0.98, 0.995, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn })
+      },
+      exit: {
+        x: [0, 24, -720],
+        scaleX: [1, 0.9, 2],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut })
+      }
+    },
+    inRight: {
+      initial: {},
+      animate: {
+        x: [720, -24, 12, -4, 0],
+        scaleX: [3, 1, 0.98, 0.995, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn })
+      },
+      exit: {
+        x: [0, -24, 720],
+        scaleX: [1, 0.9, 2],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut })
+      }
+    },
+    out: {
+      animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] }
+    },
+    outUp: {
+      animate: { y: [-12, 24, -720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] }
+    },
+    outDown: {
+      animate: { y: [12, -24, 720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] }
+    },
+    outLeft: {
+      animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] }
+    },
+    outRight: {
+      animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] }
+    }
+  };
+};
+export { varBounce as v };

package/dist/components/animate/variants/container.d.ts

@@ -0,0 +1,19 @@
+export declare type Props = {
+    staggerIn?: number;
+    delayIn?: number;
+    staggerOut?: number;
+};
+export declare const varContainer: (props?: Props | undefined) => {
+    animate: {
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+    exit: {
+        transition: {
+            staggerChildren: number;
+            staggerDirection: number;
+        };
+    };
+};

package/dist/components/animate/variants/container.js

@@ -0,0 +1,20 @@
+const varContainer = (props) => {
+  const staggerIn = props?.staggerIn || 0.05;
+  const delayIn = props?.staggerIn || 0.05;
+  const staggerOut = props?.staggerIn || 0.05;
+  return {
+    animate: {
+      transition: {
+        staggerChildren: staggerIn,
+        delayChildren: delayIn
+      }
+    },
+    exit: {
+      transition: {
+        staggerChildren: staggerOut,
+        staggerDirection: -1
+      }
+    }
+  };
+};
+export { varContainer as v };

package/dist/components/animate/variants/index.d.ts

@@ -1,2 +1,4 @@
 export * from './fade';
+export * from './bounce';
+export * from './container';
 export * from './transition';

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export type { RowKey } from '../components/DataGrid/types';
 export { getGridComponentsDictionary } from '../components/DataGrid/dictionary';
 export * from '../components/FormActions';
 export * from '../components/FormActions/dictionary';
+export * from '../components/Icon';
 export * from '../components/Image';
 export * from '../components/LanguagePopover';
 export * from '../components/Loadable';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { I as IconButton, a as IconButtonAnimate } from "./components/mui_extended/IconButton/index.js";
 import "framer-motion";
+import "@mui/material";
 import "react/jsx-runtime";
 import "react";
 import "react-hook-form";
@@ -7,7 +8,6 @@ export { F as FormProvider } from "./components/hook-form/FormProvider/index.js"
 import "react-router-dom";
 import "@m4l/core";
 import "@mui/lab";
-import "@mui/material";
 export { M as ModalContext, a as ModalProvider } from "./contexts/ModalContext/index.js";
 export { R as RHFAutocompleteAsync } from "./components/hook-form/RHFAutocompleteAsync/index.js";
 export { R as RHFCheckbox } from "./components/hook-form/RHFCheckbox/index.js";
@@ -27,12 +27,12 @@ import "react-dnd";
 import "react-dnd-html5-backend";
 import "date-fns";
 export { F as FormActions, d as defaultActionsDictionary, g as getActionnsComponentsDictionary } from "./components/FormActions/index.js";
+export { I as Icon } from "./components/Icon/index.js";
 import "./react-draggable.js";
 export { M as ModalDialog, d as defaultModalDialogDictionary, g as getModalDialogComponentsDictionary } from "./components/ModalDialog/index.js";
 export { R as Resizeable } from "./components/Resizeable/index.js";
 export { N as NoItemSelected, d as defaultNoItemSelectedDictionary, g as getNoItemSelectedComponentsDictionary } from "./components/NoItemSelected/index.js";
 import "@mui/x-date-pickers";
-import "@mui/lab/AdapterDateFns";
 export { O as ObjectLogs, d as defaultObjectLogDictionary, g as getObjectLogsComponentsDictionary } from "./components/ObjectLogs/index.js";
 import "./react-json-view.js";
 export { P as PaperForm } from "./components/PaperForm/index.js";
@@ -41,7 +41,10 @@ export { S as ScrollBar } from "./components/ScrollBar/index.js";
 import "./react-splitter-layout.js";
 export { S as SplitLayout } from "./components/SplitLayout/index.js";
 export { v as varFade } from "./components/animate/variants/fade.js";
+export { v as varBounce } from "./components/animate/variants/bounce.js";
+export { v as varContainer } from "./components/animate/variants/container.js";
 export { v as varTranEnter, a as varTranExit, b as varTranHover } from "./components/animate/variants/transition.js";
+export { M as MotionContainer } from "./components/animate/MotionContainer/index.js";
 export { M as MotionLazyContainer } from "./components/animate/MotionLazyContainer/index.js";
 export { R as RHFMultiCheckbox } from "./components/hook-form/RHFMultiCheckbox/index.js";
 export { R as RHFSelect } from "./components/hook-form/RHFSelect.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.23",
+  "version": "0.0.26",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",
@@ -21,7 +21,7 @@
   "peerDependencies": {
     "@hookform/resolvers": "^2.9.5",
     "@m4l/core": "^0.0.27",
-    "@m4l/graphics": "^0.0.20",
+    "@m4l/graphics": "^0.0.21",
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
     "@mui/x-date-pickers": "^5.0.0-beta.0",
@@ -42,7 +42,8 @@
     "@emotion/styled": "^11.9.3",
     "@hookform/resolvers": "^2.9.5",
     "@m4l/core": "^0.0.27",
-    "@m4l/graphics": "^0.0.20",
+    "@m4l/graphics": "^0.0.21",
+    "@m4l/layouts": "^0.0.9",
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
     "@mui/x-date-pickers": "^5.0.0-beta.0",
@@ -81,6 +82,7 @@
     "react-lazy-load-image-component": "^1.5.4",
     "react-resizable": "^3.0.4",
     "react-splitter-layout": "^4.0.0",
+    "react-toastify": "^9.0.5",
     "rollup-plugin-terser": "^7.0.2",
     "simplebar-react": "^2.4.1",
     "typescript": "^4.6.3",