@m4l/components 4.1.0 → 4.1.2

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

@@ -1,44 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,7 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-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

@@ -1 +0,0 @@
-

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

@@ -1,7 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1 +0,0 @@
-

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

@@ -1,29 +0,0 @@
-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
-};