@m4l/components 0.1.62 → 0.1.64

package/components/hook-form/RHFAutocompleteAsync/index.ba751be9.js

@@ -0,0 +1,156 @@
+import { useState, useCallback, useEffect } from "react";
+import { useNetwork, getPropertyByString } from "@m4l/core";
+import debounce from "lodash/debounce";
+import { styled } from "@mui/material/styles";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { T as TEST_PROP_ID } from "../../../vendor.a15d263e.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.083e23c1.js";
+import { jsx } from "react/jsx-runtime";
+styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  paddingRight: `${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    justifyContent: "flex-start"
+  }
+}));
+styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  height: `${theme.spacing(4.5)}`,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: `${theme.spacing(1)}`,
+  padding: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+const RHFAutocompleteAsyncRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LRHFAutocompleteAsync?.styleOverrides
+}));
+const componentName = "M4LRHFAutocompleteAsync";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getRHFAutocompleteAsyncClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteAsyncClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFAUTOCOMPLETEASYNC_PREFIX = "RHFAutocompleteAsync";
+const getNameDataTestId = (KEY) => {
+  return `${RHFAUTOCOMPLETEASYNC_PREFIX}-${KEY}`;
+};
+function RHFAutocompleteAsync(props) {
+  const {
+    name,
+    endPoint,
+    timeout = 5e3,
+    parms,
+    resultField = "data",
+    size,
+    isRemote = true,
+    onChangeFilterParms,
+    ...other
+  } = props;
+  const {
+    networkOperation
+  } = useNetwork();
+  const [options, setOptions] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setIsloading] = useState(false);
+  const [canLoadOptions, setCanLoadOptions] = useState(true);
+  const [filterParms, setFilterParms] = useState({});
+  const debouncedFilter = useCallback(debounce((newFilterParms) => {
+    setCanLoadOptions(true);
+    setFilterParms(newFilterParms);
+  }, 300), []);
+  const onChangeFilterParmsLocal = (newValue) => {
+    if (onChangeFilterParms) {
+      debouncedFilter(onChangeFilterParms(newValue));
+    }
+  };
+  useEffect(() => {
+    setCanLoadOptions(true);
+  }, [parms, endPoint]);
+  useEffect(() => {
+    if (!open || loading) {
+      return;
+    }
+    if (!canLoadOptions) {
+      return;
+    }
+    setIsloading(true);
+    setOptions([]);
+    setCanLoadOptions(false);
+    networkOperation({
+      method: "GET",
+      endPoint,
+      timeout,
+      parms: {
+        ...parms,
+        ...filterParms
+      },
+      isRemote
+    }).then((response) => {
+      const newOptions = getPropertyByString(response, resultField);
+      setOptions(newOptions);
+    }).catch(() => {
+      setCanLoadOptions(true);
+    }).finally(() => {
+      setIsloading(false);
+    });
+    return () => {
+    };
+  }, [open, parms, filterParms, endPoint]);
+  const classes = useUtilityClasses();
+  return /* @__PURE__ */ jsx(RHFAutocompleteAsyncRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: /* @__PURE__ */ jsx(RHFAutocomplete, {
+      name,
+      loading,
+      options,
+      onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
+      size,
+      onOpen: () => {
+        setOpen(true);
+      },
+      onClose: () => {
+        setOpen(false);
+      },
+      ...other
+    })
+  });
+}
+function getRHFAutocompleteAsyncComponentsDictionary() {
+  return getRHFAutocompleteComponentsDictionary();
+}
+export {
+  RHFAutocompleteAsync as R,
+  getRHFAutocompleteAsyncComponentsDictionary as g
+};

package/components/hook-form/RHFAutocompleteAsync/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const RHFAUTOCOMPLETEASYNC_PREFIX = "RHFAutocompleteAsync";

package/components/hook-form/RHFAutocompleteAsync/tests/utils.d.ts

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

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

@@ -1,7 +1,9 @@
 import { RHFCheckboxClassesType } from './types';
+import { OwnerState } from '../types';
 export declare const RHFCheckboxClasses: RHFCheckboxClassesType;
 export declare function getRHFCheckboxUtilityClass(slot: string): string;
-export declare const useUtilityClasses: () => {
+export declare const useUtilityClasses: (ownerState: OwnerState) => {
     root: string;
     skeleton: string;
+    checkTypography: string;
 };

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

@@ -1,5 +1,9 @@
 export interface RHFCheckboxClassesType {
     root: string;
+    checkTypography: string;
     skeleton: string;
+    small: string;
+    medium: string;
+    stateDisabled: string;
 }
 export declare type RHFCheckboxClassesKey = keyof RHFCheckboxClassesType;

package/components/hook-form/RHFCheckbox/index.c19393b1.js

@@ -0,0 +1,152 @@
+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.a15d263e.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.3c07ca2a.js";
+import { T as Typography } from "../../mui_extended/Typography/index.41b60a6b.js";
+const WrapperSkeletonCheckBox = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "36px",
+  height: "36px"
+}));
+const SkeletonRHFCheckBoxRoot = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  gap: "8px",
+  width: "100%"
+}));
+const RHFCHEKCBOX_PREFIX = "RHFCheckbox";
+const getNameDataTestId = (KEY) => {
+  return `${RHFCHEKCBOX_PREFIX}-${KEY}`;
+};
+const SkeletonRHFCheckBox = (props) => {
+  const {
+    classes,
+    hasLabel
+  } = props;
+  return /* @__PURE__ */ jsxs(SkeletonRHFCheckBoxRoot, {
+    children: [/* @__PURE__ */ jsx(WrapperSkeletonCheckBox, {
+      className: classes.skeleton,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("skeleton")
+      } : {},
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "rounded",
+        width: "18px",
+        height: "18px"
+      })
+    }), hasLabel && /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: "70px",
+      height: "18px"
+    })]
+  });
+};
+const RHFCheckboxRoot = styled$1("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LRHFCheckbox?.styleOverrides
+}));
+styled$1("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px"
+}));
+styled$1(Skeleton)(() => ({
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px"
+}));
+const ContainerCheckTypography = styled$1("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+generateUtilityClasses("M4LRHFCheckbox", [
+  "root",
+  "checkTypography",
+  "skeleton",
+  "small",
+  "medium",
+  "stateDisabled"
+]);
+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"],
+    skeleton: ["skeleton"],
+    checkTypography: ["checkTypography", ownerState.sizeCheck === "small" ? "small" : "medium", ownerState.disabled && "stateDisabled"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function RHFCheckbox(props) {
+  const {
+    name,
+    sizeCheck = "small",
+    label,
+    disabled = false
+  } = props;
+  const {
+    control
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    sizeCheck,
+    disabled
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(RHFCheckboxRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      render: ({
+        field,
+        fieldState: {
+          error
+        }
+      }) => {
+        return !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsxs(ContainerCheckTypography, {
+            className: classes.checkTypography,
+            ...process.env.NODE_ENV !== "production" ? {
+              [TEST_PROP_ID]: getNameDataTestId("checkTypography")
+            } : {},
+            children: [/* @__PURE__ */ jsx(Checkbox, {
+              size: sizeCheck,
+              ...field,
+              checked: field.value,
+              disabled: disabled ? true : false,
+              disableRipple: true
+            }), /* @__PURE__ */ jsx(Typography, {
+              skeletonWidth: "80px",
+              children: label
+            })]
+          }), error?.message && /* @__PURE__ */ jsx(HelperText, {
+            message: error?.message + ""
+          })]
+        }) : /* @__PURE__ */ jsx(SkeletonRHFCheckBox, {
+          classes,
+          hasLabel: !!label
+        });
+      }
+    })
+  });
+}
+export {
+  RHFCheckbox as R
+};

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

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

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

@@ -0,0 +1,4 @@
+export declare const RHFCHEKCBOX_ROOT_TEST_ID = "root";
+export declare const RHFCHEKCBOX_CHECKTYPOGRAPHY_TEST_ID = "checkTypography";
+export declare const RHFCHEKCBOX_SKELETON_TEST_ID = "skeleton";
+export declare const RHFCHEKCBOX_PREFIX = "RHFCheckbox";

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

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

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

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

package/components/hook-form/RHFPeriod/{index.c4944f9c.js → index.c0a80aeb.js}

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material";
 import { useFormContext, Controller } from "react-hook-form";
-import { E as ErrorLabel } from "../../ErrorLabel/index.e140421c.js";
-import { P as Period } from "../../Period/index.796b3af4.js";
+import { H as HelperText } from "../../HelperText/index.3c07ca2a.js";
+import { P as Period } from "../../Period/index.99feb99e.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const Wrapper = styled("div")(({
   theme
@@ -43,7 +43,7 @@ const RHFPeriod = (props) => {
           readOnly,
           skeletonWidth,
           skeletonHeight
-        }), error && /* @__PURE__ */ jsx(ErrorLabel, {
+        }), error && /* @__PURE__ */ jsx(HelperText, {
           message: error.message || ""
         })]
       });

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

@@ -5,4 +5,4 @@ import { RHFTextFieldProps } from './types';
  * @param props
  * @returns
  */
-export declare const RHFTextField: import("react").ForwardRefExoticComponent<(Omit<RHFTextFieldProps & import("@mui/material").StandardTextFieldProps, "ref"> | Omit<RHFTextFieldProps & import("@mui/material").FilledTextFieldProps, "ref"> | Omit<RHFTextFieldProps & import("@mui/material").OutlinedTextFieldProps, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
+export declare const RHFTextField: import("react").ForwardRefExoticComponent<Omit<RHFTextFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,6 +1,8 @@
-import { RHFTextFieldClassesType, RHFTextFieldState } from './types';
+import { RHFTextFieldClassesType } from './types';
+import { RHFTextFieldState } from '../types';
 export declare const RHFTextFieldClasses: RHFTextFieldClassesType;
 export declare const getRHFTextFieldClassesByState: (ownerState: RHFTextFieldState) => {
+    label: string;
     root: string;
     skeleton: string;
 };

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

@@ -1,10 +1,16 @@
 export interface RHFTextFieldClassesType {
     root: string;
+    label: string;
     skeleton: string;
     variantText: string;
     variantPassword: string;
-}
-export interface RHFTextFieldState {
-    variant: 'password' | 'text';
+    variantInfo: string;
+    variantSuccess: string;
+    variantWarning: string;
+    variantError: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    isFocus: string;
+    isDisabled: string;
 }
 export declare type RHFTextFieldClassesKey = keyof RHFTextFieldClassesType;