@m4l/components 0.2.35 → 1.0.0

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

@@ -1,156 +0,0 @@
-import { useState, useCallback, useEffect } from "react";
-import { useNetwork, getPropertyByString } from "@m4l/core";
-import debounce from "lodash/debounce";
-import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { jsx } from "react/jsx-runtime";
-import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.1f2afb6b.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.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.eca64469.js

@@ -1,143 +0,0 @@
-import { useFormContext, Controller } from "react-hook-form";
-import { styled, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useModuleSkeleton } from "@m4l/core";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useFormFocus } from "../../../index.js";
-import { C as CheckBox } from "../../mui_extended/CheckBox.2a3b86c5.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
-        }
-      }) => {
-        console.log("checkBox Field value", value);
-        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.dc13d5a3.js

@@ -1,204 +0,0 @@
-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.7d2afdb3.js";
-import { generateUtilityClasses, generateUtilityClass, styled, Skeleton } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { useTheme } from "@mui/material/styles";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.0412576c.js";
-import { P as Popover } from "../../mui_extended/Popover/index.d85de73b.js";
-import { I as Icon } from "../../Icon/index.ad330e78.js";
-import { B as Button } from "../../mui_extended/Button/index.c3084916.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) => {
-    console.log("react color pick", color.hex);
-    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);
-  console.log("isFocus", isFocus);
-  console.log("isTabSelected", isTabSelected);
-  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", {
-          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.e554b068.js

@@ -1,203 +0,0 @@
-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 { jsxs, Fragment, jsx } from "react/jsx-runtime";
-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.7d2afdb3.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.0412576c.js";
-import { I as Icon } from "../../Icon/index.ad330e78.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
-        }
-      }) => {
-        console.log("RHFDateTime value", typeof value);
-        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
-};