@m4l/components 1.0.0 → 1.0.2

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

@@ -0,0 +1,160 @@
+import { jsx } from "react/jsx-runtime";
+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 "../../areas/constants.630a4f42.js";
+import { R as RHFAutocomplete } from "../../../vendor.3eadfa16.js";
+import { e as getRHFAutocompleteComponentsDictionary } from "../../areas/dictionary.19b25583.js";
+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.vars.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 valueMaybeArray = getPropertyByString(response, resultField);
+      const newOptions = Array.isArray(valueMaybeArray) ? valueMaybeArray : [];
+      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/RHFCheckbox/index.9ac452cc.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { styled } from "@mui/material/styles";
+import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { H as HelperText } from "../../HelperText/index.651a9b4b.js";
+import { T as TEST_PROP_ID } from "../../areas/constants.630a4f42.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useModuleSkeleton } from "@m4l/core";
+import { c as useFormFocus } from "../../../vendor.3eadfa16.js";
+import { C as CheckBox } from "../../mui_extended/CheckBox/index.c5c8721c.js";
+const RHFCheckboxRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFCheckbox?.styleOverrides
+}));
+styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px"
+}));
+styled(Skeleton)(() => ({
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px"
+}));
+const ContainerCheckTypography = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+generateUtilityClasses("M4LRHFCheckbox", [
+  "root",
+  "checkTypography",
+  "skeleton",
+  "small",
+  "medium",
+  "stateDisabled",
+  "stateError",
+  "isFocus",
+  "isTabSelected"
+]);
+function getRHFCheckboxUtilityClass(slot) {
+  return generateUtilityClass("M4LRHFCheckbox", slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.isFocus && "isFocus",
+      ownerState.isTabSelected && "isTabSelected",
+      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"
+    ]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFCHEKCBOX_PREFIX = "RHFCheckbox";
+const getNameDataTestId = (KEY, NAME) => {
+  return `${RHFCHEKCBOX_PREFIX}-${NAME}-${KEY}`;
+};
+function RHFCheckbox(props) {
+  const {
+    name,
+    sizeCheck = "small",
+    label,
+    disabled = false,
+    mandatory,
+    mandatoryMessage,
+    helperMessage
+  } = props;
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const isDesktop = useResponsiveDesktop();
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    sizeCheck: !isDesktop ? "medium" : sizeCheck,
+    disabled,
+    error: errors[name] ? true : false
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFCheckboxRoot,
+    {
+      className: classes.root,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root", name) } : {},
+      children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                ContainerCheckTypography,
+                {
+                  className: classes.checkTypography,
+                  ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("checkTypography", name) } : {},
+                  children: /* @__PURE__ */ jsx(
+                    CheckBox,
+                    {
+                      size: sizeCheck,
+                      onChange,
+                      checked: value,
+                      disabled: disabled ? true : false,
+                      disableRipple: true,
+                      label,
+                      mandatory,
+                      mandatoryMessage,
+                      helperMessage,
+                      htmlFor: name
+                    }
+                  )
+                }
+              ),
+              error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" })
+            ] });
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  RHFCheckbox as R
+};

package/components/hook-form/RHFColorPicker/index.25e4e643.js

@@ -0,0 +1,191 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useFormContext, useWatch, Controller } from "react-hook-form";
+import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
+import { SketchPicker } from "react-color";
+import { H as HelperText } from "../../HelperText/index.651a9b4b.js";
+import { generateUtilityClasses, generateUtilityClass, styled, Skeleton } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { useTheme } from "@mui/material/styles";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { c as useFormFocus } from "../../../vendor.3eadfa16.js";
+import { F as FieldLabel } from "../../FieldLabel/index.400a46e0.js";
+import { P as Popover } from "../../mui_extended/Popover/index.8e5ac765.js";
+import { I as Icon } from "../../Icon/index.2e8ec5a1.js";
+import { B as Button } from "../../mui_extended/Button/index.a7dc6ef0.js";
+const componentName = "M4LRHFColorPicker";
+const colorPickerClasses = generateUtilityClasses(componentName, [
+  "root",
+  "popoverRoot",
+  "containerFieldColor",
+  "fieldColor",
+  "containerPicker",
+  "skeleton",
+  "sizeSmall",
+  "sizeMedium",
+  "isFocus",
+  "isTabSelected"
+]);
+function getRHFColorPickerUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (owmerState) => {
+  const slots = {
+    root: [
+      "root",
+      owmerState.isFocus && "isFocus",
+      owmerState.isTabSelected && "isTabSelected",
+      owmerState.size === "small" && "sizeSmall",
+      owmerState.size === "medium" && "sizeMedium"
+    ],
+    popoverRoot: ["popoverRoot"],
+    containerFieldColor: ["containerFieldColor"],
+    fieldColor: ["boxColor"],
+    containerPicker: ["containerPicker"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFColorPickerUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFColorPickerRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFColorPicker?.styleOverrides
+}));
+const RHFColorPickerSkeleton = (props) => {
+  const { label } = props;
+  return /* @__PURE__ */ jsxs("div", { className: colorPickerClasses.skeleton, children: [
+    label && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "14px" }),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        className: colorPickerClasses.skeleton,
+        variant: "rectangular",
+        width: 20,
+        height: 20
+      }
+    )
+  ] });
+};
+const RHFColorPicker = (props) => {
+  const { name, size = "small", label, mandatory, mandatoryMessage, helperMessage } = props;
+  const { control, setValue, trigger } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const theme = useTheme();
+  const currentColor = useWatch({
+    name,
+    control
+  });
+  const isDesktop = useResponsiveDesktop();
+  const [tempColor, setTempColor] = useState(() => currentColor || "#ffffff");
+  const [anchorEl, setAnchorEl] = useState(null);
+  const { getLabel } = useModuleDictionary();
+  const handleColorChange = (color) => {
+    setTempColor(color.hex);
+  };
+  const handleApprove = () => {
+    setAnchorEl(null);
+    if (tempColor !== currentColor) {
+      setValue(name, tempColor);
+      trigger(name);
+    }
+  };
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    size: isDesktop ? size : "medium"
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFColorPickerRoot,
+    {
+      className: classes.root,
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      children: !isSkeleton ? /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          defaultValue: "",
+          render: ({ field: { value }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            label && /* @__PURE__ */ jsx(
+              FieldLabel,
+              {
+                label,
+                mandatory,
+                mandatoryMessage,
+                helperMessage
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                className: classes.containerFieldColor,
+                onClick: (event) => setAnchorEl(event.currentTarget),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classes.fieldColor,
+                      style: {
+                        backgroundColor: value
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      src: `${host_static_assets}/${environment_assets}/frontend/components/rhfcolorpicker/assets/icons/chevron_right.svg`
+                    }
+                  )
+                ]
+              }
+            ),
+            error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" }),
+            /* @__PURE__ */ jsx(
+              Popover,
+              {
+                open: Boolean(anchorEl),
+                arrowType: "top-center",
+                className: classes.popoverRoot,
+                anchorEl,
+                onClose: () => setAnchorEl(null),
+                anchorOrigin: {
+                  vertical: "bottom",
+                  horizontal: "center"
+                },
+                transformOrigin: {
+                  vertical: "top",
+                  horizontal: "center"
+                },
+                sx: {
+                  mt: "12px",
+                  ml: -1.25,
+                  ...theme.components?.M4LRHFColorPickerPopoverRoot?.styleOverrides
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: classes.containerPicker, children: [
+                  /* @__PURE__ */ jsx(SketchPicker, { color: tempColor, onChange: handleColorChange, disableAlpha: true }),
+                  /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleApprove, children: getLabel("rhfcolorpicker.accept") })
+                ] })
+              }
+            )
+          ] })
+        }
+      ) : /* @__PURE__ */ jsx(RHFColorPickerSkeleton, { label })
+    }
+  );
+};
+function getRHFColorPickerComponentsDictionary() {
+  return ["rhfcolorpicker"];
+}
+export {
+  RHFColorPicker as R,
+  getRHFColorPickerComponentsDictionary as g
+};

package/components/hook-form/RHFDateTime/index.31a0537d.js

@@ -0,0 +1,190 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { DateTimePicker } from "@mui/x-date-pickers";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { Skeleton, generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
+import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
+import { useState, useEffect } from "react";
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+import { H as HelperText } from "../../HelperText/index.651a9b4b.js";
+import { T as TEST_PROP_ID } from "../../areas/constants.630a4f42.js";
+import { c as useFormFocus } from "../../../vendor.3eadfa16.js";
+import { F as FieldLabel } from "../../FieldLabel/index.400a46e0.js";
+import { I as Icon } from "../../Icon/index.2e8ec5a1.js";
+const SkeletonRHFDateTime = (props) => {
+  const { skeletonWidth, skeletonHeight, className, label } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(Skeleton, { variant: "text", height: "14px", width: "30%" }),
+    /* @__PURE__ */ jsxs("div", { className: className.skeleton, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "circular" })
+    ] })
+  ] });
+};
+const componentName = "M4LRHFDateTime";
+generateUtilityClasses(componentName, [
+  "root",
+  "skeleton",
+  "small",
+  "medium",
+  "isFocus",
+  "isTabSelected",
+  "isDisabled",
+  "variantInfo",
+  "variantSuccess",
+  "variantWarning",
+  "variantError"
+]);
+function getRHFCheckboxUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.size === "small" && "small",
+      ownerState.size === "medium" && "medium",
+      ownerState.isFocus && "isFocus",
+      ownerState.isTabSelected && "isTabSelected",
+      ownerState.disabled && "isDisabled",
+      ownerState.variant === "info" && "variantInfo",
+      ownerState.variant === "success" && "variantSuccess",
+      ownerState.variant === "warning" && "variantWarning",
+      ownerState.variant === "error" && "variantError"
+    ],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFDateTimeRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFDateTime?.styleOverrides
+}));
+const RHFDATETIME_PREFIX = "RHFDateTime";
+const getNameRHFDateTimeDataTestId = (KEY) => {
+  return `${RHFDATETIME_PREFIX}-${KEY}`;
+};
+function RHFDateTime(props) {
+  const {
+    name: nameRHF,
+    disabled,
+    size = "small",
+    variant,
+    skeletonWidth = "50%",
+    skeletonHeight = 14,
+    className,
+    label,
+    helperMessage,
+    mandatory,
+    mandatoryMessage
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const resourceIcon = () => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/rhfdate/ended_at.svg`
+      }
+    );
+  };
+  const [currentVariant, setCurrentVariant] = useState(void 0);
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext();
+  useEffect(() => {
+    if (errors[nameRHF]) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(void 0);
+    }
+  }, [errors[nameRHF], variant, control]);
+  const isSkeleton = useModuleSkeleton();
+  const {
+    dateFormatter: { datetimeFormat }
+  } = useFormatter();
+  const isDesktop = useResponsiveDesktop();
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    disabled,
+    size: isDesktop ? size : "medium",
+    variant: currentVariant
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFDateTimeRoot,
+    {
+      className: clsx(classes.root, className),
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameRHFDateTimeDataTestId("root") } : {},
+      children: !isSkeleton ? /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name: nameRHF,
+          control,
+          render: ({ field: { value, onChange, ref }, fieldState: { error } }) => {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DateTimePicker,
+                {
+                  sx: {
+                    "& .MuiTouchRipple-root": {
+                      display: "none"
+                    }
+                  },
+                  inputRef: ref,
+                  ampm: true,
+                  value,
+                  onChange: (newValue) => {
+                    onChange(newValue);
+                  },
+                  slots: {
+                    openPickerIcon: resourceIcon
+                  },
+                  slotProps: {
+                    textField: {
+                      onFocus: handlerFocus,
+                      onBlur: handlerOnBlur
+                    },
+                    field: { format: datetimeFormat }
+                  }
+                }
+              ),
+              error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" })
+            ] });
+          }
+        }
+      ) : /* @__PURE__ */ jsx(
+        SkeletonRHFDateTime,
+        {
+          skeletonWidth,
+          skeletonHeight,
+          className: classes,
+          label
+        }
+      )
+    }
+  );
+}
+export {
+  RHFDateTime as R
+};