@m4l/components 0.0.27 → 0.0.32

package/dist/components/hook-form/RHFUpload/RHFUploadImage/components/UploadImage/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { UploadImageProps } from './types';
+export default function UploadImage({ error, file, helperText, sx, ...other }: UploadImageProps): JSX.Element;

package/dist/components/hook-form/RHFUpload/RHFUploadImage/components/UploadImage/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const RootStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropZoneStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PlaceholderStyle: 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/RHFUpload/RHFUploadImage/components/UploadImage/types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { DropzoneOptions } from 'react-dropzone';
+import type { SxProps } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import { CustomFile } from '../../../types';
+export interface UploadImageProps extends DropzoneOptions {
+    error?: boolean;
+    file: CustomFile | string | null;
+    helperText?: ReactNode;
+    sx?: SxProps<Theme>;
+}

package/dist/components/hook-form/RHFUpload/RHFUploadImage/index.d.ts

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

package/dist/components/hook-form/RHFUpload/RHFUploadImage/types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { DropzoneOptions } from 'react-dropzone';
+import { CustomFile } from '../types';
+import type { SxProps } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+export interface UploadImageProps extends DropzoneOptions {
+    error?: boolean;
+    file: CustomFile | string | null;
+    helperText?: ReactNode;
+    sx?: SxProps<Theme>;
+}
+export interface RHFUploadImageProps extends Omit<UploadImageProps, 'file' | 'onDrop'> {
+    name: string;
+}

package/dist/components/hook-form/RHFUpload/index.d.ts

@@ -0,0 +1 @@
+export { RHFUploadImage } from './RHFUploadImage/';

package/dist/components/hook-form/RHFUpload/types.d.ts

@@ -0,0 +1,4 @@
+export interface CustomFile extends File {
+    path?: string;
+    preview?: string;
+}

package/dist/components/hook-form/RHFUpload.js

@@ -0,0 +1,182 @@
+import { Typography, FormHelperText } from "@mui/material";
+import { useCallback } from "react";
+import { useFormContext, Controller } from "react-hook-form";
+import { i as isString_1 } from "../../lodash.js";
+import { u as useDropzone } from "../../node_modules.js";
+import { I as Image } from "../Image/index.js";
+import { useEnvironment } from "@m4l/core";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "../../react-lazy-load-image-component.js";
+import { styled } from "@mui/material/styles";
+const RootStyle = styled("div")(({
+  theme
+}) => ({
+  width: 144,
+  height: 144,
+  margin: "auto",
+  borderRadius: theme.spacing(1),
+  padding: theme.spacing(1),
+  border: `1px dashed ${theme.palette.grey[50032]}`
+}));
+const DropZoneStyle = styled("div")(({
+  theme
+}) => ({
+  zIndex: 0,
+  width: "100%",
+  height: "100%",
+  outline: "none",
+  display: "flex",
+  overflow: "hidden",
+  borderRadius: theme.spacing(1),
+  position: "relative",
+  alignItems: "center",
+  justifyContent: "center",
+  "& > *": {
+    width: "100%",
+    height: "100%"
+  },
+  "&:hover": {
+    cursor: "pointer",
+    "& .placeholder": {
+      zIndex: 9
+    }
+  }
+}));
+const PlaceholderStyle = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  position: "absolute",
+  alignItems: "center",
+  flexDirection: "column",
+  justifyContent: "center",
+  color: theme.palette.text.secondary,
+  backgroundColor: theme.palette.background.neutral,
+  transition: theme.transitions.create("opacity", {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.shorter
+  }),
+  "&:hover": {
+    opacity: 0.72
+  }
+}));
+function UploadImage({
+  error,
+  file,
+  helperText,
+  sx,
+  ...other
+}) {
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragReject
+  } = useDropzone({
+    multiple: false,
+    ...other
+  });
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(RootStyle, {
+      sx: {
+        ...(isDragReject || error) && {
+          borderColor: "error.light"
+        },
+        ...sx
+      },
+      children: /* @__PURE__ */ jsxs(DropZoneStyle, {
+        ...getRootProps(),
+        sx: {
+          ...isDragActive && {
+            opacity: 0.72
+          }
+        },
+        children: [/* @__PURE__ */ jsx("input", {
+          ...getInputProps()
+        }), file && /* @__PURE__ */ jsx(Image, {
+          alt: "avatar",
+          src: isString_1(file) ? file : file.preview,
+          sx: {
+            zIndex: 8
+          }
+        }), /* @__PURE__ */ jsxs(PlaceholderStyle, {
+          className: "placeholder",
+          sx: {
+            ...file && {
+              opacity: 0,
+              color: "common.white",
+              bgcolor: "grey.900",
+              "&:hover": {
+                opacity: 0.72
+              }
+            },
+            ...(isDragReject || error) && {
+              bgcolor: "error.lighter"
+            }
+          },
+          children: [/* @__PURE__ */ jsx(Image, {
+            src: `${host_static_assets}/${environment}/frontend/commons/assets/icons/more_vertical.svg`,
+            effect: "opacity",
+            width: "24",
+            height: "24",
+            mb: 1
+          }), /* @__PURE__ */ jsx(Typography, {
+            variant: "caption",
+            children: file ? "Update photo" : "Upload photo"
+          })]
+        })]
+      })
+    }), helperText && helperText]
+  });
+}
+function RHFUploadImage({
+  name,
+  ...other
+}) {
+  const {
+    control,
+    setValue
+  } = useFormContext();
+  const handleDrop = useCallback((acceptedFiles) => {
+    const file = acceptedFiles[0];
+    console.log("handleDrop**", URL.createObjectURL(file));
+    if (file) {
+      setValue(name, {
+        ...file,
+        preview: URL.createObjectURL(file)
+      });
+    }
+  }, [setValue]);
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => {
+      const checkError = !!error && !field.value;
+      return /* @__PURE__ */ jsxs("div", {
+        children: [/* @__PURE__ */ jsx(UploadImage, {
+          onDrop: handleDrop,
+          error: checkError,
+          ...other,
+          file: field.value
+        }), checkError && /* @__PURE__ */ jsx(FormHelperText, {
+          error: true,
+          sx: {
+            px: 2,
+            textAlign: "center"
+          },
+          children: error.message
+        })]
+      });
+    }
+  });
+}
+export { RHFUploadImage as R };

package/dist/components/hook-form/index.d.ts

@@ -1,7 +1,10 @@
 export { FormProvider } from './FormProvider';
+export { RHFAutocomplete } from './RHFAutocomplete';
 export { RHFAutocompleteAsync } from './RHFAutocompleteAsync';
 export { RHFCheckbox } from './RHFCheckbox';
+export { RHFDateTime } from './RHFDateTime';
 export { RHFMultiCheckbox } from './RHFMultiCheckbox';
 export { RHFSelect } from './RHFSelect';
 export { RHFTextField } from './RHFTextField';
 export { RHFRadioGroup } from './RHFRadioGroup';
+export * from './RHFUpload';

package/dist/components/index.d.ts

@@ -7,6 +7,8 @@ export { DateFormatter, BooleanFormatter } from '../components/DataGrid/formatte
 export type { Column } from 'react-data-grid';
 export type { RowKey } from '../components/DataGrid/types';
 export { getGridComponentsDictionary } from '../components/DataGrid/dictionary';
+export * from '../components/DynamicFilter';
+export type { FilterFieldApply, RawFilterFieldApply } from '../components/DynamicFilter/types';
 export * from '../components/FormActions';
 export * from '../components/FormActions/dictionary';
 export * from '../components/Icon';

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

@@ -110,4 +110,4 @@ function MenuActions(props) {
     })]
   });
 }
-export { MenuActions as M };
+export { LabelMemuItem as L, MenuActions as M };

package/dist/index.js

@@ -6,12 +6,15 @@ export { I as IconButton, a as IconButtonAnimate } from "./components/mui_extend
 export { M as MotionContainer } from "./components/animate/MotionContainer/index.js";
 export { M as MotionLazyContainer } from "./components/animate/MotionLazyContainer/index.js";
 export { F as FormProvider } from "./components/hook-form/FormProvider/index.js";
+export { R as RHFAutocomplete } from "./vendor.js";
 export { R as RHFAutocompleteAsync } from "./components/hook-form/RHFAutocompleteAsync/index.js";
 export { R as RHFCheckbox } from "./components/hook-form/RHFCheckbox/index.js";
+export { R as RHFDateTime } from "./components/hook-form/RHFDateTime.js";
 export { R as RHFMultiCheckbox } from "./components/hook-form/RHFMultiCheckbox/index.js";
 export { R as RHFSelect } from "./components/hook-form/RHFSelect.js";
 export { R as RHFTextField } from "./components/hook-form/RHFTextField/index.js";
 export { R as RHFRadioGroup } from "./components/hook-form/RHFRadioGroup.js";
+export { R as RHFUploadImage } from "./components/hook-form/RHFUpload.js";
 export { A as Accordion } from "./components/mui_extended/Accordion/index.js";
 export { B as BoxIcon } from "./components/mui_extended/BoxIcon/index.js";
 export { B as Breadcrumbs } from "./components/mui_extended/Breadcrumbs/index.js";
@@ -26,6 +29,7 @@ export { C as CompanyLogo } from "./components/CompanyLogo/index.js";
 export { D as DataGrid, g as getGridComponentsDictionary } from "./components/DataGrid/index.js";
 export { B as BooleanFormatter } from "./components/DataGrid/formatters/BooleanFormatter/index.js";
 export { D as DateFormatter } from "./components/DataGrid/formatters/DateFormatter/index.js";
+export { D as DynamicFilter } from "./components/DynamicFilter/index.js";
 export { F as FormActions, d as defaultActionsDictionary, g as getActionnsComponentsDictionary } from "./components/FormActions/index.js";
 export { I as Icon } from "./components/Icon/index.js";
 export { I as Image } from "./components/Image/index.js";
@@ -37,7 +41,7 @@ export { O as ObjectLogs, d as defaultObjectLogDictionary, g as getObjectLogsCom
 export { P as PaperForm } from "./components/PaperForm/index.js";
 export { P as PropertyValue } from "./components/PropertyValue/index.js";
 export { R as Resizeable } from "./components/Resizeable/index.js";
-export { S as ScrollBar } from "./components/ScrollBar/index.js";
+export { S as Scrollbar } from "./components/ScrollBar/index.js";
 export { S as SplitLayout } from "./components/SplitLayout/index.js";
 export { M as ModalContext, a as ModalProvider } from "./contexts/ModalContext/index.js";
 export { u as useModal } from "./hooks/useModal/index.js";
@@ -48,27 +52,27 @@ import "react/jsx-runtime";
 import "@m4l/core";
 import "react-hook-form";
 import "./node_modules.js";
+import "prop-types";
 import "@mui/material/styles";
 import "react-router-dom";
 import "@mui/lab";
-import "@m4l/graphics";
-import "./react-data-grid.js";
+import "@mui/x-date-pickers";
+import "./lodash.js";
+import "./commonjs.js";
+import "react-dom";
 import "clsx";
+import "./react-lazy-load-image-component.js";
+import "@m4l/graphics";
 import "react-dnd";
 import "react-dnd-html5-backend";
 import "date-fns";
-import "./vendor.js";
-import "./react-lazy-load-image-component.js";
-import "react-dom";
-import "./react-draggable.js";
-import "prop-types";
-import "@mui/x-date-pickers";
-import "./react-json-view.js";
-import "./commonjs.js";
-import "./react-splitter-layout.js";
-import "./react-resizable.js";
 import "./simplebar.js";
 import "./core-js.js";
-import "./lodash.js";
 import "./juggle.js";
 import "./can-use-dom.js";
+import "yup";
+import "./react-draggable.js";
+import "./react-json-view.js";
+import "./react-splitter-layout.js";
+import "./react-data-grid.js";
+import "./react-resizable.js";

package/dist/lodash.js

@@ -1,4 +1,64 @@
 import { c as commonjsGlobal } from "./commonjs.js";
+var freeGlobal$4 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+var _freeGlobal = freeGlobal$4;
+var freeGlobal$3 = _freeGlobal;
+var freeSelf$3 = typeof self == "object" && self && self.Object === Object && self;
+var root$4 = freeGlobal$3 || freeSelf$3 || Function("return this")();
+var _root = root$4;
+var root$3 = _root;
+var Symbol$3 = root$3.Symbol;
+var _Symbol = Symbol$3;
+var Symbol$2 = _Symbol;
+var objectProto$4 = Object.prototype;
+var hasOwnProperty$1 = objectProto$4.hasOwnProperty;
+var nativeObjectToString$1 = objectProto$4.toString;
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : void 0;
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty$1.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+  try {
+    value[symToStringTag$1] = void 0;
+    var unmasked = true;
+  } catch (e) {
+  }
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+var _getRawTag = getRawTag$1;
+var objectProto$3 = Object.prototype;
+var nativeObjectToString = objectProto$3.toString;
+function objectToString$4(value) {
+  return nativeObjectToString.call(value);
+}
+var _objectToString = objectToString$4;
+var Symbol$1 = _Symbol, getRawTag = _getRawTag, objectToString$3 = _objectToString;
+var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : void 0;
+function baseGetTag$1(value) {
+  if (value == null) {
+    return value === void 0 ? undefinedTag : nullTag;
+  }
+  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString$3(value);
+}
+var _baseGetTag = baseGetTag$1;
+var isArray$1 = Array.isArray;
+var isArray_1 = isArray$1;
+function isObjectLike$3(value) {
+  return value != null && typeof value == "object";
+}
+var isObjectLike_1 = isObjectLike$3;
+var baseGetTag = _baseGetTag, isArray = isArray_1, isObjectLike$2 = isObjectLike_1;
+var stringTag = "[object String]";
+function isString(value) {
+  return typeof value == "string" || !isArray(value) && isObjectLike$2(value) && baseGetTag(value) == stringTag;
+}
+var isString_1 = isString;
 var FUNC_ERROR_TEXT$2 = "Expected a function";
 var NAN$1 = 0 / 0;
 var symbolTag$1 = "[object Symbol]";
@@ -486,4 +546,4 @@ function isObject(value) {
   return !!value && (type == "object" || type == "function");
 }
 var lodash_memoize = memoize;
-export { lodash_debounce as a, lodash_memoize as b, lodash_throttle as l };
+export { lodash_debounce as a, lodash_memoize as b, isString_1 as i, lodash_throttle as l };