@m4l/components 9.1.107 → 9.1.108

package/components/LanguagePopover/LanguagePopover.js

@@ -70,7 +70,7 @@ function LanguagePopover(props) {
                 height: 28,
                 ...open && { bgcolor: "action.selected" }
               },
-              src: currentLocale?.url_icon || "",
+              src: currentLocale?.urlIcon || "",
               width: "24px",
               dataTestId
             }
@@ -121,7 +121,7 @@ function LanguagePopover(props) {
                             Image,
                             {
                               alt: option.name,
-                              src: option.url_icon
+                              src: option.urlIcon
                             }
                           ) }),
                           /* @__PURE__ */ jsx(

package/components/NumberInput/NumberInput.styles.js

@@ -1,3 +1,4 @@
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
 import { g as getHeightSizeStyles } from "../../utils/getHeightSizeStyles.js";
 const numberInputStyles = {
   /**
@@ -64,7 +65,13 @@ const numberInputStyles = {
     width: "100%",
     ...ownerState.focusError && {
       color: theme.vars.palette.error.main
-    }
+    },
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "small",
+      "body"
+    ),
+    fontFamily: theme.typography.fontFamily
   }),
   /**
    * Estilos para envoltorio de boton y endAdornment

package/components/hook-form/RHFUpload/RHFUploaMultipleFile/components/UploadMultiple/index.d.ts

@@ -0,0 +1,5 @@
+import { UploadMultiFileProps } from '../../types';
+/**
+ * todo: document this component
+ */
+export default function UploadMultiFile({ error, showPreview, files, onRemove, onRemoveAll, helperText, sx, ...other }: UploadMultiFileProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { UploadMultiFileProps } from './types';
+export interface RHFUploadMultiFileProps extends Omit<UploadMultiFileProps, 'files'> {
+    name: string;
+}
+/**
+ * todo: document this component
+ */
+export declare function RHFUploadMultiFile({ name, ...other }: RHFUploadMultiFileProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,9 +2,10 @@ import { ReactNode } from 'react';
 import { DropzoneOptions } from 'react-dropzone';
 import { SxProps } from '@mui/material';
 import { Theme } from '@mui/material/styles';
+import { CustomFile } from '../components/UploadComponents/types';
 export interface UploadMultiFileProps extends DropzoneOptions {
     error?: boolean;
-    files: (File | string)[];
+    files: CustomFile[];
     showPreview: boolean;
     onRemove: (file: File | string) => void;
     onRemoveAll: VoidFunction;

package/components/hook-form/RHFUpload/RHFUploadFile/components/UploadSingleFile/index.d.ts

@@ -0,0 +1,13 @@
+import { DropzoneProps } from 'react-dropzone';
+interface UploadProps extends DropzoneProps {
+    error?: boolean;
+    file: any;
+    helperText?: React.ReactNode;
+    sx?: any;
+    onChange?: (...event: any[]) => void;
+}
+/**
+ * todo: document this component
+ */
+export default function UploadSingleFile({ error, file, helperText, sx, accept, onChange, ...other }: UploadProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/hook-form/RHFUpload/RHFUploadFile/components/UploadSingleFile/index.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import isString from "lodash-es/isString";
+import { useDropzone } from "react-dropzone";
+import { useState, useEffect } from "react";
+import { styled } from "@mui/material/styles";
+import { Box } from "@mui/material";
+import { B as BlockContent } from "../../../components/UploadComponents/BlockContent.js";
+import { R as RejectionFiles } from "../../../components/UploadComponents/RejectionFiles.js";
+import { I as Image } from "../../../../../Image/Image.js";
+const DropZoneStyle = styled("div")(({ theme }) => ({
+  outline: "none",
+  overflow: "hidden",
+  position: "relative",
+  padding: theme.spacing(5, 1),
+  borderRadius: theme.shape.borderRadius,
+  transition: theme.transitions.create("padding"),
+  backgroundColor: theme.vars.palette.background.neutral,
+  border: `1px dashed ${theme.vars.palette.grey[50032]}`,
+  "&:hover": { opacity: 0.72, cursor: "pointer" }
+}));
+function UploadSingleFile({
+  error = false,
+  file,
+  helperText,
+  sx,
+  accept,
+  onChange,
+  ...other
+}) {
+  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
+    multiple: false,
+    accept,
+    /**
+     * todo: document this component
+     */
+    onDrop: (acceptedFiles) => {
+      if (acceptedFiles.length > 0) {
+        onChange?.(acceptedFiles[0]);
+      }
+    },
+    ...other
+  });
+  const [preview, setPreview] = useState(null);
+  useEffect(() => {
+    if (file instanceof File) {
+      const objectUrl = URL.createObjectURL(file);
+      setPreview(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
+    } else if (isString(file)) {
+      setPreview(file);
+    } else {
+      setPreview(null);
+    }
+  }, [file]);
+  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...sx }, children: [
+    /* @__PURE__ */ jsxs(
+      DropZoneStyle,
+      {
+        ...getRootProps(),
+        sx: {
+          ...isDragActive && { opacity: 0.72 },
+          ...(isDragReject || error) && {
+            color: "error.main",
+            borderColor: "error.light",
+            bgcolor: "error.lighter"
+          },
+          ...file && {
+            padding: "12% 0"
+          }
+        },
+        children: [
+          !preview && /* @__PURE__ */ jsx(BlockContent, {}),
+          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+          preview && /* @__PURE__ */ jsx(Image, { alt: "file preview", src: preview })
+        ]
+      }
+    ),
+    fileRejections.length > 0 && /* @__PURE__ */ jsx(RejectionFiles, { fileRejections }),
+    helperText && helperText
+  ] });
+}
+export {
+  UploadSingleFile as U
+};

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

@@ -0,0 +1,9 @@
+interface Props {
+    name: string;
+    [key: string]: any;
+}
+/**
+ * todo: document this component
+ */
+export declare function RHFUploadFile({ name, ...other }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/hook-form/RHFUpload/RHFUploadFile/index.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { U as UploadSingleFile } from "./components/UploadSingleFile/index.js";
+import { FormHelperText } from "@mui/material";
+function RHFUploadFile({ name, ...other }) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field: { value, onChange }, fieldState: { error } }) => {
+        const checkError = !!error && !value;
+        return /* @__PURE__ */ jsx(
+          UploadSingleFile,
+          {
+            accept: { "image/png": [".png"] },
+            file: value,
+            error: checkError,
+            onChange,
+            helperText: checkError && /* @__PURE__ */ jsx(FormHelperText, { error: true, sx: { px: 2 }, children: error.message }),
+            ...other
+          }
+        );
+      }
+    }
+  );
+}
+export {
+  RHFUploadFile as R
+};

package/components/hook-form/RHFUpload/components/UploadComponents/BlockContent.d.ts

@@ -0,0 +1,4 @@
+/**
+ * todo: document this component
+ */
+export default function BlockContent(): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFUpload/components/UploadComponents/BlockContent.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Stack, Box, Typography } from "@mui/material";
+function BlockContent() {
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      spacing: 2,
+      alignItems: "center",
+      justifyContent: "center",
+      direction: { xs: "column", md: "row" },
+      sx: { width: 1, textAlign: { xs: "center", md: "left" } },
+      children: [
+        /* @__PURE__ */ jsx("img", { src: "\nhttps://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/sidebar/assets/icons/arrow_right.svg", alt: "upload" }),
+        /* @__PURE__ */ jsxs(Box, { sx: { p: 3 }, children: [
+          /* @__PURE__ */ jsx(Typography, { gutterBottom: true, variant: "h5", children: "Drop or Select file" }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: [
+            "Drop files here or click ",
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "body2",
+                component: "span",
+                sx: { color: "primary.main", textDecoration: "underline" },
+                children: "browse"
+              }
+            ),
+            " thorough your machine"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  BlockContent as B
+};

package/components/hook-form/RHFUpload/components/UploadComponents/MultiFilePreview.d.ts

@@ -0,0 +1,5 @@
+import { UploadMultiFileProps } from './types';
+/**
+ * todo: document this component
+ */
+export default function MultiFilePreview({ showPreview, files, onRemove, onRemoveAll, }: UploadMultiFileProps): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFUpload/components/UploadComponents/RejectionFiles.d.ts

@@ -0,0 +1,9 @@
+import { FileRejection } from 'react-dropzone';
+type Props = {
+    fileRejections: readonly FileRejection[];
+};
+/**
+ * todo: document this component
+ */
+export default function RejectionFiles({ fileRejections }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/hook-form/RHFUpload/components/UploadComponents/RejectionFiles.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { alpha } from "@mui/material/styles";
+import { Paper, Box, Typography } from "@mui/material";
+function RejectionFiles({ fileRejections }) {
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      variant: "outlined",
+      sx: {
+        py: 1,
+        px: 2,
+        mt: 3,
+        borderColor: "error.light",
+        bgcolor: (theme) => alpha(theme.colorSchemes.finalTheme.palette.error.main, 0.08)
+      },
+      children: fileRejections.map(({ file, errors }) => {
+        const { path } = file;
+        return /* @__PURE__ */ jsxs(Box, { sx: { my: 1 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", noWrap: true, children: path }),
+          errors.map((error) => /* @__PURE__ */ jsxs(Typography, { variant: "caption", component: "p", children: [
+            "- ",
+            error.message
+          ] }, error.code))
+        ] }, path);
+      })
+    }
+  );
+}
+export {
+  RejectionFiles as R
+};

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

@@ -0,0 +1,10 @@
+export type CustomFile = File & {
+    path?: string;
+    preview?: string;
+};
+export interface UploadMultiFileProps {
+    showPreview?: boolean;
+    files: CustomFile[];
+    onRemove: (file: CustomFile | string) => void;
+    onRemoveAll: () => void;
+}

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

@@ -13,4 +13,5 @@ export * from './RHFTextFieldPassword';
 export * from './RHFPeriod';
 export { RHFRadioGroup } from './RHFRadioGroup';
 export { RHFNumberInput } from './RHFNumberInput/RHFNumberInput';
+export { RHFUploadFile } from './RHFUpload/RHFUploadFile';
 export * from './RHFUpload';

package/index.js

@@ -35,17 +35,18 @@ import { R as R5 } from "./components/hook-form/RHFSelect/RHFSelect.js";
 import { R as R6 } from "./components/hook-form/RHFHelperError/index.js";
 import { R as R7 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
 import { R as R8 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
-import { R as R9 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
-import { R as R10 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
-import { R as R11 } from "./components/hook-form/RHFTextField/RHFTextField.js";
-import { R as R12 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
+import { R as R9 } from "./components/hook-form/RHFUpload/RHFUploadFile/index.js";
+import { R as R10 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
+import { R as R11 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
+import { R as R12 } from "./components/hook-form/RHFTextField/RHFTextField.js";
+import { R as R13 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
 import { g as g6 } from "./components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js";
 import { r } from "./components/hook-form/RHFPeriod/RHFPeriod.styles.js";
-import { R as R13 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
-import { R as R14 } from "./components/hook-form/RHFPeriod/constants.js";
-import { R as R15 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
-import { P as P2, R as R16, S as S2, T as T2 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
-import { R as R17 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
+import { R as R14 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
+import { R as R15 } from "./components/hook-form/RHFPeriod/constants.js";
+import { R as R16 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
+import { P as P2, R as R17, S as S2, T as T2 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
+import { R as R18 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
 import { B } from "./components/formatters/BooleanFormatter/BooleanFormatter.js";
 import { D as D2, u as u4 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g7 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
@@ -78,7 +79,7 @@ import { D as D5, d, g as g13 } from "./components/CommonActions/dictionary.js";
 import { D as D6 } from "./components/DragResizeWindow/DragResizeWindow.js";
 import { d as d2 } from "./components/DragResizeWindow/classes/index.js";
 import { G } from "./components/GridLayout/GridLayout.js";
-import { R as R18 } from "./components/GridLayout/subcomponents/Responsive/index.js";
+import { R as R19 } from "./components/GridLayout/subcomponents/Responsive/index.js";
 import { c as c3, d as d3, e } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { i, k } from "./components/GridLayout/utils.js";
 import { w } from "./components/GridLayout/subcomponents/withSizeProvider/index.js";
@@ -130,8 +131,8 @@ import { H as H4 } from "./components/HelmetPage/index.js";
 import { P as P11 } from "./components/PropertyValue/PropertyValue.js";
 import { a as a9 } from "./components/MenuActions/dictionary.js";
 import { a as a10, M as M11 } from "./components/MenuActions/MenuActions.js";
-import { R as R19 } from "./components/extended/React-Resizable/Resizable/Resizable.js";
-import { R as R20 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
+import { R as R20 } from "./components/extended/React-Resizable/Resizable/Resizable.js";
+import { R as R21 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
 import { S as S4 } from "./components/ScrollBar/ScrollBar.js";
 import { S as S5 } from "./components/extended/React-Splitter/SplitLayout/SplitLayout.js";
 import { T as T4 } from "./components/ToastContainer/ToastContainer.js";
@@ -185,12 +186,12 @@ import { T as T18 } from "./components/mui_extended/ToggleIconButton/constants.j
 import { T as T19 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonEnum.js";
 import { T as T20 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.js";
 import { a as a13, D as D7, M as M13 } from "./components/areas/contexts/DynamicMFParmsContext/index.js";
-import { F, R as R21, u as u9 } from "./components/hook-form/RHFormContext/index.js";
+import { F, R as R22, u as u9 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g25 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u10 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a14, M as M14 } from "./contexts/ModalContext/index.js";
-import { a as a15, R as R22 } from "./contexts/RealTimeContext/RealTimeContext.js";
+import { a as a15, R as R23 } from "./contexts/RealTimeContext/RealTimeContext.js";
 import { u as u11 } from "./hooks/useFormAddEdit/index.js";
 import { u as u12 } from "./hooks/useModal/index.js";
 import { u as u13 } from "./hooks/useTab/index.js";
@@ -314,27 +315,28 @@ export {
   P11 as PropertyValue,
   R as RHFAutocomplete,
   R2 as RHFAutocompleteAsync,
-  R10 as RHFCheckbox,
-  R9 as RHFColorPicker,
+  R11 as RHFCheckbox,
+  R10 as RHFColorPicker,
   R3 as RHFDateTime,
   R6 as RHFHelperError,
   R4 as RHFMultiCheckbox,
   R8 as RHFNumberInput,
-  R13 as RHFPeriod,
-  R16 as RHFPeriodRootStyled,
-  R15 as RHFPeriodSlots,
+  R14 as RHFPeriod,
+  R17 as RHFPeriodRootStyled,
+  R16 as RHFPeriodSlots,
   R7 as RHFRadioGroup,
   R5 as RHFSelect,
-  R11 as RHFTextField,
-  R12 as RHFTextFieldPassword,
-  R17 as RHFUploadImage,
-  R14 as RHF_PERIOD_KEY_COMPONENT,
-  R21 as RHFormProvider,
+  R12 as RHFTextField,
+  R13 as RHFTextFieldPassword,
+  R9 as RHFUploadFile,
+  R18 as RHFUploadImage,
+  R15 as RHF_PERIOD_KEY_COMPONENT,
+  R22 as RHFormProvider,
   a15 as RealTimeContext,
-  R22 as RealTimeProvider,
-  R19 as Resizable,
-  R20 as ResizableBox,
-  R18 as Responsive,
+  R23 as RealTimeProvider,
+  R20 as Resizable,
+  R21 as ResizableBox,
+  R19 as Responsive,
   S4 as ScrollBar,
   S as ScrollToTop,
   S7 as SectionCommercial,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.107",
+  "version": "9.1.108",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"