@m4l/components 3.1.9 → 4.0.0

package/components/hook-form/RHFColorPicker/classes/index-RGuHpPSk.js

@@ -0,0 +1,44 @@
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { c as componentName } from "./constants-CyffuaRF.js";
+const colorPickerClasses = generateUtilityClasses(componentName, [
+  /* elements */
+  "root",
+  "popoverRoot",
+  "containerFieldColor",
+  "fieldColor",
+  "containerPicker",
+  "skeleton",
+  /* states or variants of elements */
+  "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
+  };
+};
+export {
+  colorPickerClasses as c,
+  useUtilityClasses as u
+};

package/components/hook-form/RHFColorPicker/dictionary-D6kRH-6k.js

@@ -0,0 +1,6 @@
+function getRHFColorPickerComponentsDictionary() {
+  return ["rhfcolorpicker"];
+}
+export {
+  getRHFColorPickerComponentsDictionary as g
+};

package/components/hook-form/RHFColorPicker/index-l0sNRNKZ.js

@@ -0,0 +1 @@
+

package/components/hook-form/RHFColorPicker/styles-Drw8N4oO.js

@@ -0,0 +1,7 @@
+import { styled } from "@mui/material";
+const RHFColorPickerRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFColorPicker?.styleOverrides
+}));
+export {
+  RHFColorPickerRoot as R
+};

package/components/hook-form/RHFColorPicker/subcomponents/Skeleton/indext-BasQE4Nq.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Skeleton } from "@mui/material";
+import { c as colorPickerClasses } from "../../classes/index-RGuHpPSk.js";
+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
+      }
+    )
+  ] });
+};
+export {
+  RHFColorPickerSkeleton as R
+};

package/components/hook-form/RHFDateTime/RHFDateTime-B3neDyBy.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs, Fragment } 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 { S as SkeletonRHFDateTime } from "./subcomponents/Skeleton/index-BvRhzX7g.js";
+import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
+import { useState, useEffect } from "react";
+import { u as useUtilityClasses } from "./classes/index-BFb3xSvy.js";
+import clsx from "clsx";
+import { R as RHFDateTimeRoot } from "./styles-LccnWyQx.js";
+import { H as HelperText } from "../../HelperText/index-DZCj76Dl.js";
+import { g as getNameRHFDateTimeDataTestId } from "./test/utils-GZSfgD8t.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
+import { u as useFormFocus } from "../../../hooks/useFormFocus/index-B1F2sySJ.js";
+import { F as FieldLabel } from "../../FieldLabel/FieldLabel-B85v09Pe.js";
+import { I as Icon } from "../../Icon/Icon-_wceDYwV.js";
+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
+};

package/components/hook-form/RHFDateTime/classes/constants-B6JI2ChT.js

@@ -0,0 +1,4 @@
+const componentName = "M4LRHFDateTime";
+export {
+  componentName as c
+};

package/components/hook-form/RHFDateTime/classes/index-BFb3xSvy.js

@@ -0,0 +1,45 @@
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { c as componentName } from "./constants-B6JI2ChT.js";
+generateUtilityClasses(componentName, [
+  /* elements */
+  "root",
+  "skeleton",
+  /* states or variants of elements */
+  "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
+  };
+};
+export {
+  useUtilityClasses as u
+};

package/components/hook-form/RHFDateTime/index-l0sNRNKZ.js

@@ -0,0 +1 @@
+

package/components/hook-form/RHFDateTime/styles-LccnWyQx.js

@@ -0,0 +1,7 @@
+import { styled } from "@mui/material";
+const RHFDateTimeRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFDateTime?.styleOverrides
+}));
+export {
+  RHFDateTimeRoot as R
+};

package/components/hook-form/RHFDateTime/subcomponents/Skeleton/index-BvRhzX7g.js

@@ -0,0 +1,15 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Skeleton } from "@mui/material";
+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" })
+    ] })
+  ] });
+};
+export {
+  SkeletonRHFDateTime as S
+};

package/components/hook-form/RHFDateTime/test/constants-BBsdSHVf.js

@@ -0,0 +1,4 @@
+const RHFDATETIME_PREFIX = "RHFDateTime";
+export {
+  RHFDATETIME_PREFIX as R
+};

package/components/hook-form/RHFDateTime/test/utils-GZSfgD8t.js

@@ -0,0 +1,7 @@
+import { R as RHFDATETIME_PREFIX } from "./constants-BBsdSHVf.js";
+const getNameRHFDateTimeDataTestId = (KEY) => {
+  return `${RHFDATETIME_PREFIX}-${KEY}`;
+};
+export {
+  getNameRHFDateTimeDataTestId as g
+};

package/components/hook-form/RHFHelperError/index-BEgm7Q1Q.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, useController } from "react-hook-form";
+import { H as HelperText } from "../../HelperText/index-DZCj76Dl.js";
+function HelperError(props) {
+  const { name } = props;
+  const { control } = useFormContext();
+  const { fieldState } = useController({
+    name,
+    control,
+    rules: { required: true }
+  });
+  if (fieldState?.error?.message) {
+    return /* @__PURE__ */ jsx(HelperText, { variant: "error", message: fieldState?.error?.message });
+  }
+  return null;
+}
+export {
+  HelperError as H
+};

package/components/hook-form/RHFMultiCheckbox/index-BARudV1A.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { FormGroup, FormControlLabel, Checkbox } from "@mui/material";
+function RHFMultiCheckbox({ name, options, ...other }) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => {
+        const onSelected = (option) => field.value.includes(option) ? field.value.filter((value) => value !== option) : [...field.value, option];
+        return /* @__PURE__ */ jsx(FormGroup, { children: options.map((option) => /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            control: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: field.value.includes(option),
+                onChange: () => field.onChange(onSelected(option))
+              }
+            ),
+            label: option,
+            ...other
+          },
+          option
+        )) });
+      }
+    }
+  );
+}
+export {
+  RHFMultiCheckbox as R
+};

package/components/hook-form/RHFPeriod/classes/constants-Bg-k42kR.js

@@ -0,0 +1,4 @@
+const componentName = "M4LRHFPeriod";
+export {
+  componentName as c
+};

package/components/hook-form/RHFPeriod/classes/index-BxD4YD0r.js

@@ -0,0 +1,25 @@
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { c as componentName } from "./constants-Bg-k42kR.js";
+generateUtilityClasses(componentName, [
+  /* elements */
+  "root",
+  /* states or variants of elements */
+  "isFocus",
+  "isTabSelected"
+]);
+function getRHFPeriodUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const RHFPeriodUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFPeriodUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+export {
+  RHFPeriodUtilityClasses as R
+};

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

@@ -0,0 +1,77 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { R as RHFPeriodRoot } from "./styles-CG-W_sFO.js";
+import { useFormContext, Controller } from "react-hook-form";
+import { H as HelperText } from "../../HelperText/index-DZCj76Dl.js";
+import { R as RHFPeriodUtilityClasses } from "./classes/index-BxD4YD0r.js";
+import { useModuleSkeleton } from "@m4l/core";
+import { u as useFormFocus } from "../../../hooks/useFormFocus/index-B1F2sySJ.js";
+import { F as FieldLabel } from "../../FieldLabel/FieldLabel-B85v09Pe.js";
+import { P as Period } from "../../Period/Period-DaRcVvl_.js";
+const RHFPeriod = (props) => {
+  const {
+    name,
+    readOnly,
+    skeletonWidth,
+    skeletonHeight,
+    state,
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    size
+  } = props;
+  const { control } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false
+  };
+  const classes = RHFPeriodUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFPeriodRoot,
+    {
+      className: classes.root,
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Period,
+                {
+                  value,
+                  onChange,
+                  state: !!error === true ? "error" : state,
+                  readOnly,
+                  skeletonWidth,
+                  skeletonHeight,
+                  size
+                }
+              ),
+              error && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error.message || "" })
+            ] });
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  RHFPeriod as R
+};

package/components/hook-form/RHFPeriod/styles-CG-W_sFO.js

@@ -0,0 +1,13 @@
+import { styled } from "@mui/material/styles";
+const RHFPeriodRoot = styled("div")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1),
+  ...theme.components?.M4LRHFPeriod?.styleOverrides
+}));
+export {
+  RHFPeriodRoot as R
+};

package/components/hook-form/RHFRadioGroup/RHFRadioGroup-B77oI0Yo.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { RadioGroup, FormControlLabel, FormHelperText, Radio } from "@mui/material";
+import { O as OptionIconLabelFormatter } from "./formatters/OptionIconLabelFormatter/index-Dl2Tm7Io.js";
+function RHFRadioGroup({
+  name,
+  options,
+  getOptionLabel,
+  getOptionValue,
+  getOptionIconUrl,
+  renderOptionLabel = OptionIconLabelFormatter,
+  ControlLabel = Radio,
+  ...other
+}) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(RadioGroup, { ...field, row: true, ...other, children: options.map((option) => {
+          return /* @__PURE__ */ jsx(
+            FormControlLabel,
+            {
+              defaultValue: field.value,
+              value: getOptionValue(option),
+              control: /* @__PURE__ */ jsx(ControlLabel, { ...option }),
+              label: renderOptionLabel(option, getOptionLabel, getOptionIconUrl)
+            },
+            getOptionValue(option)
+          );
+        }) }),
+        !!error && /* @__PURE__ */ jsx(FormHelperText, { error: true, sx: { px: 2 }, children: error.message })
+      ] })
+    }
+  );
+}
+export {
+  RHFRadioGroup as R
+};

package/components/hook-form/RHFRadioGroup/formatters/OptionIconLabelFormatter/index-Dl2Tm7Io.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { I as Icon } from "../../../../Icon/Icon-_wceDYwV.js";
+function OptionIconLabelFormatter(option, getOptionLabel, getOptionIconUrl) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        src: `${getOptionIconUrl(option)}`
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: getOptionLabel(option) })
+  ] });
+}
+export {
+  OptionIconLabelFormatter as O
+};

package/components/hook-form/RHFRadioGroup/index-l0sNRNKZ.js

@@ -0,0 +1 @@
+

package/components/hook-form/RHFSelect-LdwRuFz-.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { TextField } from "@mui/material";
+function RHFSelect({ name, children, ...other }) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...field,
+          select: true,
+          fullWidth: true,
+          SelectProps: { native: true },
+          error: !!error,
+          helperText: error?.message,
+          ...other,
+          children
+        }
+      )
+    }
+  );
+}
+export {
+  RHFSelect as R
+};