@m4l/components 0.1.74 → 0.1.76

package/components/hook-form/RHFCheckbox/{index.6e6389e7.js → index.7e7f220b.js}

@@ -1,12 +1,12 @@
 import { useFormContext, Controller } from "react-hook-form";
 import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, Checkbox } from "@mui/material";
 import { useModuleSkeleton } from "@m4l/core";
-import { T as TEST_PROP_ID } from "../../../vendor.99e0c856.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { styled as styled$1 } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.d449d124.js";
-import { T as Typography } from "../../mui_extended/Typography/index.e2d9e3f2.js";
+import { H as HelperText } from "../../HelperText/index.9864f773.js";
+import { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
 const WrapperSkeletonCheckBox = styled("div")(() => ({
   display: "flex",
   justifyContent: "center",
@@ -22,19 +22,20 @@ const SkeletonRHFCheckBoxRoot = styled("div")(() => ({
   width: "100%"
 }));
 const RHFCHEKCBOX_PREFIX = "RHFCheckbox";
-const getNameDataTestId = (KEY) => {
-  return `${RHFCHEKCBOX_PREFIX}-${KEY}`;
+const getNameDataTestId = (KEY, NAME) => {
+  return `${RHFCHEKCBOX_PREFIX}-${NAME}-${KEY}`;
 };
 const SkeletonRHFCheckBox = (props) => {
   const {
     classes,
-    hasLabel
+    hasLabel,
+    fieldName
   } = props;
   return /* @__PURE__ */ jsxs(SkeletonRHFCheckBoxRoot, {
     children: [/* @__PURE__ */ jsx(WrapperSkeletonCheckBox, {
       className: classes.skeleton,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("skeleton")
+        [TEST_PROP_ID]: getNameDataTestId("skeleton", fieldName)
       } : {},
       children: /* @__PURE__ */ jsx(Skeleton, {
         variant: "rounded",
@@ -74,14 +75,15 @@ generateUtilityClasses("M4LRHFCheckbox", [
   "skeleton",
   "small",
   "medium",
-  "stateDisabled"
+  "stateDisabled",
+  "stateError"
 ]);
 function getRHFCheckboxUtilityClass(slot) {
   return generateUtilityClass("M4LRHFCheckbox", slot);
 }
 const useUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.sizeCheck === "small" && "small", ownerState.sizeCheck === "medium" && "medium", ownerState.disabled && "stateDisabled"],
+    root: ["root", ownerState.sizeCheck === "small" && "small", ownerState.sizeCheck === "medium" && "medium", ownerState.disabled && "stateDisabled", ownerState.error && "stateError"],
     skeleton: ["skeleton"],
     checkTypography: ["checkTypography", ownerState.sizeCheck === "small" ? "small" : "medium", ownerState.disabled && "stateDisabled"]
   };
@@ -97,19 +99,23 @@ function RHFCheckbox(props) {
     label,
     disabled = false
   } = props;
+  const isSkeleton = useModuleSkeleton();
   const {
-    control
+    control,
+    formState: {
+      errors
+    }
   } = useFormContext();
-  const isSkeleton = useModuleSkeleton();
   const ownerState = {
     sizeCheck,
-    disabled
+    disabled,
+    error: errors[name] ? true : false
   };
   const classes = useUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(RHFCheckboxRoot, {
     className: classes.root,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("root")
+      [TEST_PROP_ID]: getNameDataTestId("root", name)
     } : {},
     children: /* @__PURE__ */ jsx(Controller, {
       name,
@@ -124,7 +130,7 @@ function RHFCheckbox(props) {
           children: [/* @__PURE__ */ jsxs(ContainerCheckTypography, {
             className: classes.checkTypography,
             ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROP_ID]: getNameDataTestId("checkTypography")
+              [TEST_PROP_ID]: getNameDataTestId("checkTypography", name)
             } : {},
             children: [/* @__PURE__ */ jsx(Checkbox, {
               size: sizeCheck,
@@ -141,7 +147,8 @@ function RHFCheckbox(props) {
           })]
         }) : /* @__PURE__ */ jsx(SkeletonRHFCheckBox, {
           classes,
-          hasLabel: !!label
+          hasLabel: !!label,
+          fieldName: name
         });
       }
     })

package/components/hook-form/RHFCheckbox/subcomponents/Skeleton/types.d.ts

@@ -1,4 +1,5 @@
 export interface SkeletonRHFCheckBoxProps {
     classes: any;
     hasLabel: boolean;
+    fieldName: string;
 }

package/components/hook-form/RHFCheckbox/test/utils.d.ts

@@ -1,2 +1,2 @@
 import { RHFCheckboxClassesKey } from "../classes/types";
-export declare const getNameDataTestId: (KEY: RHFCheckboxClassesKey) => string;
+export declare const getNameDataTestId: (KEY: RHFCheckboxClassesKey, NAME: string) => string;

package/components/hook-form/RHFCheckbox/types.d.ts

@@ -7,4 +7,6 @@ export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'cont
     name: string;
     options: string[];
 }
-export declare type OwnerState = Pick<RHFCheckboxProps, 'sizeCheck' | 'disabled'>;
+export interface OwnerState extends Pick<RHFCheckboxProps, 'sizeCheck' | 'disabled'> {
+    error: boolean;
+}

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

@@ -1,6 +1,6 @@
 import { RHFDateTimeClassesType } from './types';
 import { OwnerState } from '../types';
-export declare const RHFDateTimeClasses: RHFDateTimeClassesType;
+export declare const dateTimeClasses: RHFDateTimeClassesType;
 export declare function getRHFCheckboxUtilityClass(slot: string): string;
 export declare const useUtilityClasses: (ownerState: OwnerState) => {
     root: string;

package/components/hook-form/RHFDateTime/{index.745b101b.js → index.d330709b.js}

@@ -2,25 +2,27 @@ import { useFormContext, Controller } from "react-hook-form";
 import { DateTimePicker } from "@mui/x-date-pickers";
 import { useModuleSkeleton } from "@m4l/core";
 import { Skeleton, generateUtilityClasses, generateUtilityClass, styled as styled$1 } from "@mui/material";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useFormatter } from "@m4l/graphics";
 import { useState, useEffect } from "react";
 import clsx from "clsx";
-import "../../Icon/index.d214a74d.js";
-import "../../mui_extended/IconButton/index.822cdaac.js";
-import "../../mui_extended/Accordion/index.09a89d3d.js";
-import "../../mui_extended/Avatar/index.fe06afd7.js";
+import "../../Icon/index.9dae8337.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import "../../mui_extended/IconButton/index.1a9d4fa5.js";
+import "../../mui_extended/Accordion/index.3faafd8b.js";
+import { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
+import "../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import "../../mui_extended/Button/index.f9d54780.js";
-import "../../Image/index.1af119da.js";
+import "../../mui_extended/Button/index.fdb5dcbd.js";
+import "../../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import { T as Typography } from "../../mui_extended/Typography/index.e2d9e3f2.js";
 import "../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../mui_extended/MenuActions/index.03403529.js";
-import "../../mui_extended/Pager/index.6428b07c.js";
-import "../../mui_extended/Tab/index.e0653a0a.js";
-import { H as HelperText } from "../../HelperText/index.d449d124.js";
+import "../../mui_extended/MenuActions/index.ba1da3b3.js";
+import "../../mui_extended/Pager/index.67bda2c5.js";
+import "../../mui_extended/Tab/index.9e2f6e34.js";
+import "../../mui_extended/Tooltip/index.5a795dcd.js";
+import { H as HelperText } from "../../HelperText/index.9864f773.js";
 import { styled } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 const SKTRHFWrapperTextField = styled("div")(({
@@ -83,6 +85,10 @@ const useUtilityClasses = (ownerState) => {
 const RHFDateTimeRoot = styled$1("div")(({ theme }) => ({
   ...theme.components?.M4LRHFDateTime?.styleOverrides
 }));
+const RHFDATETIME_PREFIX = "RHFDateTime";
+const getNameRHFDateTimeDataTestId = (KEY) => {
+  return `${RHFDATETIME_PREFIX}-${KEY}`;
+};
 function RHFDateTime(props) {
   const {
     name: nameRHF,
@@ -131,55 +137,58 @@ function RHFDateTime(props) {
     variant: currentVariant
   };
   const classes = useUtilityClasses(ownerState);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SkeletonRHFDateTime, {
-      skeletonWidth,
-      skeletonHeight,
-      className: classes.skeleton
-    });
-  }
-  return /* @__PURE__ */ jsx(Controller, {
-    name: nameRHF,
-    control,
-    render: ({
-      field: {
-        value,
-        onChange,
-        ref
-      },
-      fieldState: {
-        error
-      }
-    }) => {
-      return /* @__PURE__ */ jsxs(RHFDateTimeRoot, {
-        className: clsx(classes.root, className),
-        children: [label && /* @__PURE__ */ jsx(Typography, {
-          variant: "body",
-          children: label
-        }), /* @__PURE__ */ jsx(DateTimePicker, {
-          inputRef: ref,
-          ampm: false,
+  return /* @__PURE__ */ jsx(RHFDateTimeRoot, {
+    className: clsx(classes.root, className),
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameRHFDateTimeDataTestId("root")
+    } : {},
+    children: !isSkeleton ? /* @__PURE__ */ jsx(Controller, {
+      name: nameRHF,
+      control,
+      render: ({
+        field: {
           value,
-          onChange: (newValue) => {
-            onChange(newValue);
-          },
-          slotProps: {
-            textField: {
-              error: !!error,
-              helperText: error?.message,
-              onFocus: handlerFocus,
-              onBlur: handlerBlur
+          onChange,
+          ref
+        },
+        fieldState: {
+          error
+        }
+      }) => {
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [label && /* @__PURE__ */ jsx(Typography, {
+            variant: "body",
+            children: label
+          }), /* @__PURE__ */ jsx(DateTimePicker, {
+            inputRef: ref,
+            ampm: false,
+            value,
+            onChange: (newValue) => {
+              onChange(newValue);
             },
-            field: {
-              format: datetimeFormat
+            slots: {},
+            slotProps: {
+              textField: {
+                error: !!error,
+                helperText: error?.message,
+                onFocus: handlerFocus,
+                onBlur: handlerBlur
+              },
+              field: {
+                format: datetimeFormat
+              }
             }
-          }
-        }), currentVariant ? /* @__PURE__ */ jsx(HelperText, {
-          variant: currentVariant,
-          message: currentVariant !== "error" ? helperMessage : error?.message
-        }) : null]
-      });
-    }
+          }), currentVariant ? /* @__PURE__ */ jsx(HelperText, {
+            variant: currentVariant,
+            message: currentVariant !== "error" ? helperMessage : error?.message
+          }) : null]
+        });
+      }
+    }) : /* @__PURE__ */ jsx(SkeletonRHFDateTime, {
+      skeletonWidth,
+      skeletonHeight,
+      className: classes.skeleton
+    })
   });
 }
 export {

package/components/hook-form/RHFDateTime/test/constants.d.ts

@@ -0,0 +1 @@
+export declare const RHFDATETIME_PREFIX = "RHFDateTime";

package/components/hook-form/RHFDateTime/test/utils.d.ts

@@ -0,0 +1,2 @@
+import { RHFDateTimeClassesKey } from '../classes/types';
+export declare const getNameRHFDateTimeDataTestId: (KEY: RHFDateTimeClassesKey) => string;

package/components/hook-form/RHFPeriod/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LRHFPeriod";

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

@@ -0,0 +1,6 @@
+import { RHFPeriodClassesType } from './types';
+export declare const RHFPeriodClasses: RHFPeriodClassesType;
+export declare function getRHFPeriodUtilityClass(slot: string): string;
+export declare const RHFPeriodUtilityClasses: () => {
+    root: string;
+};

package/components/hook-form/RHFPeriod/classes/types.d.ts

@@ -0,0 +1,6 @@
+import { RHFPeriodUtilityClasses } from ".";
+export interface RHFPeriodClassesType {
+    root: string;
+}
+export declare type RHFPeriodClassesKey = keyof RHFPeriodClassesType;
+export declare type Classes = ReturnType<typeof RHFPeriodUtilityClasses>;

package/components/hook-form/RHFPeriod/index.e2b1293b.js

@@ -0,0 +1,77 @@
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { useFormContext, Controller } from "react-hook-form";
+import { H as HelperText } from "../../HelperText/index.9864f773.js";
+import { P as Period } from "../../Period/index.526791a3.js";
+import { unstable_composeClasses } from "@mui/base";
+import { jsx, jsxs } from "react/jsx-runtime";
+const RHFPeriodRoot = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1),
+  ...theme.components?.M4LRHFPeriod?.styleOverrides
+}));
+const componentName = "M4LRHFPeriod";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getRHFPeriodUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const RHFPeriodUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFPeriodUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFPeriod = (props) => {
+  const {
+    name,
+    readOnly,
+    skeletonWidth,
+    skeletonHeight,
+    state
+  } = props;
+  const {
+    control
+  } = useFormContext();
+  const classes = RHFPeriodUtilityClasses();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      console.log("value RHFPeriod", value);
+      return /* @__PURE__ */ jsxs(RHFPeriodRoot, {
+        className: classes.root,
+        children: [/* @__PURE__ */ jsx(Period, {
+          value,
+          onChange,
+          state: !!error === true ? "error" : state,
+          readOnly,
+          skeletonWidth,
+          skeletonHeight
+        }), error && /* @__PURE__ */ jsx(HelperText, {
+          message: error.message || ""
+        })]
+      });
+    }
+  });
+};
+export {
+  RHFPeriod as R
+};

package/components/hook-form/RHFPeriod/types.d.ts

@@ -1,5 +1,6 @@
-import { PeriodProps, PeriodVariant } from '../../../components/Period/types';
+import { PeriodProps, PeriodState, PeriodVariant } from '../../../components/Period/types';
 export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly' | 'skeletonWidth' | 'skeletonHeight'> {
     name: string;
     variant?: PeriodVariant;
+    state?: PeriodState;
 }

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

@@ -1,2 +1,3 @@
 export * from './RHFTextField';
 export * from './types';
+export * from './tests/constants';

package/components/hook-form/RHFTextField/{index.ca7393a7.js → index.e5336d09.js}

@@ -1,18 +1,18 @@
 import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
 import { forwardRef, useState, useEffect } from "react";
-import { I as IconButton } from "../../mui_extended/IconButton/index.822cdaac.js";
-import { T as TEST_PROP_ID } from "../../../vendor.99e0c856.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.1a9d4fa5.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import "../../Icon/index.d214a74d.js";
+import "../../Icon/index.9dae8337.js";
 import "clsx";
 import "@m4l/graphics";
 import { useFormContext, Controller } from "react-hook-form";
 import { styled as styled$1 } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.aca80f3a.js";
-import { T as Typography } from "../../mui_extended/Typography/index.e2d9e3f2.js";
-import { H as HelperText } from "../../HelperText/index.d449d124.js";
+import { g as getComponentUtilityClass } from "../../../utils/index.008b4c2a.js";
+import { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
+import { H as HelperText } from "../../HelperText/index.9864f773.js";
 const SkeletonTextFieldRoot = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
@@ -226,7 +226,7 @@ const RHFTextField = forwardRef((props, ref) => {
             onChange: onInternalChange,
             onFocus: handleFocus,
             onBlur: handleBlur,
-            value: value || "",
+            value: type === "number" ? value || "0" : value || "",
             name,
             inputProps: {
               ...process.env.NODE_ENV !== "production" ? {
@@ -337,5 +337,8 @@ const RHFTextFieldPassword = (props) => {
 };
 export {
   RHFTextField as R,
-  RHFTextFieldPassword as a
+  RHFTEXTFIELD_ROOT_TEST_ID as a,
+  RHFTEXTFIELD_INPUT_TEST_ID as b,
+  RHFTEXTFIELD_PREFIX as c,
+  RHFTextFieldPassword as d
 };

package/components/hook-form/RHFUpload/RHFUploadImage/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LRHFUploadImage";

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

@@ -0,0 +1,19 @@
+import { RHFUploadImageClassesType } from './types';
+import { OwnerState } from '../subcomponents/UploadImage/types';
+export declare const RHFUploadImageClasses: RHFUploadImageClassesType;
+export declare function getRHFUploadImagebUtilityClass(slot: string): string;
+export declare const RHFUploadImageUtilityClasses: (ownerState: OwnerState) => {
+    root: string;
+    skeleton: string;
+    dropZoneStyle: string;
+    containerFileImage: string;
+    placeHolder: string;
+    containerUploadBoddy: string;
+    containerBodyImage: string;
+    containerMessage: string;
+    containerTitle: string;
+    containerDescription: string;
+    containerConditions: string;
+    containerUploadImage: string;
+    inputDropZone: string;
+};

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

@@ -0,0 +1,18 @@
+import { RHFUploadImageUtilityClasses } from ".";
+export interface RHFUploadImageClassesType {
+    root: string;
+    dropZoneStyle: string;
+    containerFileImage: string;
+    placeHolder: string;
+    containerUploadBoddy: string;
+    containerBodyImage: string;
+    containerMessage: string;
+    containerTitle: string;
+    containerDescription: string;
+    containerConditions: string;
+    containerUploadImage: string;
+    skeleton: string;
+    inputDropZone: string;
+}
+export declare type RHFUploadImageClassesKey = keyof RHFUploadImageClassesType;
+export declare type Classes = ReturnType<typeof RHFUploadImageUtilityClasses>;

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

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

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/subcomponents/Skeleton/types.d.ts

@@ -0,0 +1,3 @@
+export interface SkeletonUploadImageProps {
+    classes: string;
+}

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

@@ -9,3 +9,8 @@ export interface UploadImageProps extends DropzoneOptions {
     helperText?: ReactNode;
     sx?: SxProps<Theme>;
 }
+export interface OwnerState {
+    isDragReject?: boolean;
+    isDragActive?: boolean;
+    hasFile: string | CustomFile | null;
+}

package/components/hook-form/RHFUpload/RHFUploadImage/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const ICON_PREFIX = "M4LRHFUploadImage";

package/components/hook-form/RHFUpload/RHFUploadImage/tests/utils.d.ts

@@ -0,0 +1,2 @@
+import type { RHFUploadImageClassesKey } from '../classes/types';
+export declare const getNameRHFUploadImageDataTestId: (KEY: RHFUploadImageClassesKey) => string;