@m4l/components 2.0.7 → 3.0.1

package/components/LanguagePopover/index.6ac2473a.js

@@ -1,168 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { generateUtilityClasses, generateUtilityClass, Stack, MenuItem } from "@mui/material";
-import { I as Image } from "../Image/index.32b58ce4.js";
-import { useLocales } from "@m4l/graphics";
-import { L as LanguagePopoverRoot, h as ContainerMenuItems, i as ContainerProgress, j as ContainerImage, k as LabelItem } from "../../styles/index.ccd8acc4.js";
-import { I as ImageButton } from "../mui_extended/Button/index.ca15c36e.js";
-import { useEnvironment, useNetwork } from "@m4l/core";
-import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { C as CircularProgress } from "../mui_extended/CircularProgress/index.967e70b7.js";
-import { P as Popover } from "../mui_extended/Popover/index.1fafd106.js";
-const componentName = "M4LanguagePopover";
-generateUtilityClasses(
-  componentName,
-  [
-    "root",
-    "containerItems",
-    "containerProgress",
-    "labelItem",
-    "imageButton"
-  ]
-);
-function getM4LanguagePopoverClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    containerItems: ["containerItems"],
-    containerProgress: ["containerProgress"],
-    labelItem: ["labelItem"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getM4LanguagePopoverClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const LANGUAGEPOPOVER_PREFIX = "LanguagePopover";
-const getNameDataTestId = (KEY) => {
-  return `${LANGUAGEPOPOVER_PREFIX}-${KEY}`;
-};
-function LanguagePopover(props) {
-  const { testingProps } = props;
-  const { currentLocale, onChangeLocale } = useLocales();
-  const { domain_token } = useEnvironment();
-  const { networkOperation } = useNetwork();
-  const [open, setOpen] = useState(testingProps?.open || null);
-  const [loading, setLoading] = useState(testingProps?.loading || false);
-  const [allLocales, setAllLocales] = useState(
-    testingProps?.allLocales || []
-  );
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
-  const handleClose = () => {
-    setOpen(null);
-  };
-  useEffect(() => {
-    let mounted = true;
-    if (open === null || loading || allLocales.length > 0) {
-      return;
-    }
-    setLoading(true);
-    networkOperation({
-      method: "GET",
-      endPoint: `na/locales`,
-      parms: { domain_token }
-    }).then((response) => {
-      if (mounted) {
-        !testingProps && setAllLocales(response.data);
-      }
-    }).finally(() => {
-      setLoading(false);
-    });
-    return function cleanUp() {
-      mounted = false;
-    };
-  }, [open]);
-  const classes = useUtilityClasses();
-  return /* @__PURE__ */ jsxs(
-    LanguagePopoverRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: [
-        /* @__PURE__ */ jsx(
-          ImageButton,
-          {
-            className: classes.imageButton,
-            onClick: handleOpen,
-            sx: {
-              width: 28,
-              height: 28,
-              ...open && { bgcolor: "action.selected" }
-            },
-            src: currentLocale?.url_icon || "",
-            alt: currentLocale?.name,
-            width: "24px",
-            height: "24px",
-            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("imageButton") } : {}
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Popover,
-          {
-            arrowType: "top-right",
-            open: Boolean(open),
-            anchorEl: open,
-            anchorOrigin: { vertical: "bottom", horizontal: "right" },
-            onClose: handleClose,
-            sx: {
-              mt: 1.5,
-              ml: 0.75,
-              width: 180,
-              rowGap: "100px",
-              "& .MuiMenuItem-root": { px: 1, typography: "body2", borderRadius: 0.75 }
-            },
-            children: /* @__PURE__ */ jsxs(
-              ContainerMenuItems,
-              {
-                className: classes.containerItems,
-                ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerItems") } : {},
-                children: [
-                  allLocales.length === 0 && /* @__PURE__ */ jsx(
-                    ContainerProgress,
-                    {
-                      className: classes.containerProgress,
-                      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerProgress") } : {},
-                      children: /* @__PURE__ */ jsx(CircularProgress, { size: "20px" })
-                    }
-                  ),
-                  allLocales.length > 0 && /* @__PURE__ */ jsx(Stack, { spacing: 0.75, children: allLocales.map((option) => /* @__PURE__ */ jsxs(
-                    MenuItem,
-                    {
-                      selected: option.lang === currentLocale?.lang && option?.script === currentLocale?.script && option?.region === currentLocale?.region,
-                      onClick: () => {
-                        onChangeLocale(option);
-                        handleClose();
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(ContainerImage, { children: /* @__PURE__ */ jsx(Image, { alt: option.name, src: option.url_icon, ratio: "1:1" }) }),
-                        /* @__PURE__ */ jsx(
-                          LabelItem,
-                          {
-                            className: classes.labelItem,
-                            ...process.env.NODE_ENV !== "production" ? {
-                              [TEST_PROP_ID]: getNameDataTestId("labelItem")
-                            } : {},
-                            children: option.name
-                          }
-                        )
-                      ]
-                    },
-                    option.lang || option.script || option.region
-                  )) })
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  LanguagePopover as L
-};

package/components/ToastContainer/classes/constants.d.ts

@@ -1 +0,0 @@
-export declare const componentName = "M4LToastContainer";

package/components/ToastContainer/classes/index.d.ts

@@ -1,8 +0,0 @@
-import { ToastClassesType } from './types';
-export declare const toastClasses: ToastClassesType;
-export declare const getToastClassesByState: () => {
-    root: string;
-    toastMessageContainer: string;
-    toastMessageIcon: string;
-    toastMessageInfo: string;
-};

package/components/ToastContainer/classes/types.d.ts

@@ -1,9 +0,0 @@
-import { getToastClassesByState } from '.';
-export interface ToastClassesType {
-    root: string;
-    toastMessageContainer: string;
-    toastMessageIcon: string;
-    toastMessageInfo: string;
-}
-export declare type ToastClassesKey = keyof ToastClassesType;
-export declare type Classes = ReturnType<typeof getToastClassesByState>;

package/components/ToastContainer/index.ed566312.js

@@ -1,69 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { a3 as ToastContainerRoot } from "../../styles/index.ccd8acc4.js";
-import { ToastContainer as ToastContainer$1 } from "react-toastify";
-import { generateUtilityClasses } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.ebfbb70f.js";
-import { useEnvironment } from "@m4l/core";
-import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.0f315ccd.js";
-const componentName = "M4LToastContainer";
-const toastClasses = generateUtilityClasses(
-  componentName,
-  [
-    "root",
-    "toastMessageContainer",
-    "toastMessageIcon",
-    "toastMessageInfo"
-  ]
-);
-const getToastClassesByState = () => {
-  const slots = {
-    root: ["root"],
-    toastMessageContainer: ["toastMessageContainer"],
-    toastMessageIcon: ["toastMessageIcon"],
-    toastMessageInfo: ["toastMessageInfo"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
-  return {
-    ...composedClasses
-  };
-};
-const ToastContainer = (props) => {
-  const { children } = props;
-  const classes = getToastClassesByState();
-  return /* @__PURE__ */ jsxs(ToastContainerRoot, { className: classes.root, children: [
-    /* @__PURE__ */ jsx(ToastContainer$1, {}),
-    children
-  ] });
-};
-const ToastMessage = (props) => {
-  const { messageType, children } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const iconSuccess = `${host_static_assets}/${environment_assets}/frontend/components/toast/assets/icons/success.svg`;
-  const iconInfo = `${host_static_assets}/${environment_assets}/frontend/components/toast/assets/icons/info.svg`;
-  const iconWarning = `${host_static_assets}/${environment_assets}/frontend/components/toast/assets/icons/warning.svg`;
-  const iconError = `${host_static_assets}/${environment_assets}/frontend/components/toast/assets/icons/error.svg`;
-  const finalIcon = useMemo(() => {
-    switch (messageType) {
-      case "info":
-        return iconInfo;
-      case "success":
-        return iconSuccess;
-      case "warning":
-        return iconWarning;
-      case "error":
-        return iconError;
-      default:
-        return "";
-    }
-  }, [messageType]);
-  return /* @__PURE__ */ jsxs("div", { className: toastClasses.toastMessageContainer, children: [
-    /* @__PURE__ */ jsx("div", { className: toastClasses.toastMessageIcon, children: /* @__PURE__ */ jsx(Icon, { src: finalIcon }) }),
-    /* @__PURE__ */ jsx("div", { className: toastClasses.toastMessageInfo, children })
-  ] });
-};
-export {
-  ToastContainer as T,
-  ToastMessage as a
-};

package/components/ToastContainer/styles.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const ToastContainerRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/ToastContainer/subcomponents/ToastMessage/types.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-export interface ToastMessageProps {
-    messageType: 'info' | 'success' | 'warning' | 'error' | 'default';
-    children: ReactNode;
-}

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Toasties/index.d.ts

@@ -1,5 +0,0 @@
-declare type ToastiesProps = {
-    windowId: string;
-};
-export declare function Toasties(props: ToastiesProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Toasties/subcomponents/Toasty/index.d.ts

@@ -1,6 +0,0 @@
-declare type ToastyProps = {
-    windowId: string;
-    toastyId: number;
-};
-export declare function Toasty(props: ToastyProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/components/hook-form/RHFTextField/index.5b124af3.js

@@ -1,296 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
-import { forwardRef, useState, useEffect } from "react";
-import { I as IconButton } from "../../mui_extended/IconButton/index.caf17392.js";
-import { useFormContext, Controller } from "react-hook-form";
-import { ao as SkeletonTextFieldRoot, ap as WrapperSkeletonRHFTextField, aq as RHFTextFieldRoot, ar as RHFTextFieldPasswordRoot } from "../../../styles/index.ccd8acc4.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.ebfbb70f.js";
-import { H as HelperText } from "../../HelperText/index.2f4c6655.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.972f989e.js";
-const RHFTEXTFIELD_ROOT_TEST_ID = "RHFTextFieldRoot";
-const RHFTEXTFIELD_INPUT_TEST_ID = "RHFTextFieldInput";
-const RHFTEXTFIELD_PREFIX = "RHFTextField";
-const getNameDataTestId$1 = (KEY) => {
-  return `${RHFTEXTFIELD_PREFIX}-${KEY}`;
-};
-const SkeletonTextField = (props) => {
-  const { skeletonWidth, skeletonHeight, ownerState, classes, hasLabel } = props;
-  const { type: variant } = ownerState;
-  return /* @__PURE__ */ jsxs(SkeletonTextFieldRoot, { children: [
-    (hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "16px" }),
-    /* @__PURE__ */ jsx(
-      WrapperSkeletonRHFTextField,
-      {
-        className: classes.skeleton,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1("skeleton") } : {},
-        children: variant === "text" ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" })
-        ] })
-      }
-    )
-  ] });
-};
-const componentName = "M4LRHFTextField";
-generateUtilityClasses(
-  componentName,
-  [
-    "root",
-    "label",
-    "skeleton",
-    "variantText",
-    "variantPassword",
-    "variantInfo",
-    "isDisabled",
-    "variantSuccess",
-    "variantWarning",
-    "variantError",
-    "sizeSmall",
-    "sizeMedium",
-    "isFocus",
-    "isTabSelected"
-  ]
-);
-const getRHFTextFieldClassesByState = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.type === "password" ? "variantPassword" : "variantText",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      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"
-    ],
-    label: ["label"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFTextField = forwardRef((props, ref) => {
-  const {
-    name: nameRHF,
-    autoComplete = "off",
-    skeletonWidth = "100%",
-    skeletonHeight = "18px",
-    type,
-    label,
-    size = "small",
-    startIcon,
-    endIcon,
-    variant,
-    helperMessage = "",
-    disabled,
-    mandatory,
-    mandatoryMessage,
-    helperText,
-    ...other
-  } = props;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext();
-  const [currentVariant, setCurrentVariant] = useState(null);
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  useEffect(() => {
-    if (errors[nameRHF]) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(null);
-    }
-  }, [errors[nameRHF], variant, control]);
-  const ownerState = {
-    type: type === "password" ? "password" : "text",
-    size: !isDesktop ? "medium" : size,
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    variant: currentVariant,
-    disabled
-  };
-  const classes = getRHFTextFieldClassesByState(ownerState);
-  return /* @__PURE__ */ jsx(
-    RHFTextFieldRoot,
-    {
-      className: classes.root,
-      tabIndex: 0,
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      role: "textbox",
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `${RHFTEXTFIELD_ROOT_TEST_ID}_${nameRHF}` } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(
-        Controller,
-        {
-          name: nameRHF,
-          control,
-          render: ({ field: { onChange, value, name, ref: inputRef }, fieldState: { error } }) => {
-            const onInternalChange = (event) => {
-              if (type === "number") {
-                if (event.target.value) {
-                  onChange(Number(event.target.value));
-                  return;
-                }
-              }
-              onChange(event);
-            };
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              label && /* @__PURE__ */ jsx(
-                FieldLabel,
-                {
-                  label,
-                  mandatory,
-                  mandatoryMessage,
-                  helperMessage
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                TextField,
-                {
-                  variant: "outlined",
-                  disabled,
-                  ref,
-                  inputRef,
-                  InputLabelProps: { shrink: true },
-                  autoComplete,
-                  onChange: onInternalChange,
-                  value: type === "number" ? isNaN(value) ? 0 : value : value || "",
-                  name,
-                  inputProps: {
-                    ...process.env.NODE_ENV !== "production" ? {
-                      [TEST_PROP_ID]: `${RHFTEXTFIELD_INPUT_TEST_ID}_${name}`
-                    } : {}
-                  },
-                  fullWidth: true,
-                  error: !!error,
-                  type,
-                  ...startIcon || endIcon ? {
-                    InputProps: {
-                      ...{
-                        ...startIcon ? {
-                          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startIcon })
-                        } : {},
-                        ...endIcon ? {
-                          endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endIcon })
-                        } : {}
-                      }
-                    }
-                  } : {},
-                  ...other
-                }
-              ),
-              currentVariant ? /* @__PURE__ */ jsx(
-                HelperText,
-                {
-                  variant: currentVariant,
-                  message: currentVariant !== "error" ? helperMessage : error?.message
-                }
-              ) : null
-            ] });
-          }
-        }
-      ) : /* @__PURE__ */ jsx(
-        SkeletonTextField,
-        {
-          classes,
-          skeletonWidth,
-          skeletonHeight,
-          ownerState,
-          hasLabel: label
-        }
-      )
-    }
-  );
-});
-RHFTextField.displayName = "RHFTextField";
-generateUtilityClasses(
-  "M4LRHFTextFieldPassword",
-  [
-    "root"
-  ]
-);
-function getRHFTextFieldPasswordUtilityClass(slot) {
-  return generateUtilityClass("M4LRHFTextFieldPassword", slot);
-}
-const useUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFTextFieldPasswordUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFTEXTFIELDPASSWORD_PREFIX = "RHFTextFieldPassword";
-const getNameDataTestId = (KEY) => {
-  return `${RHFTEXTFIELDPASSWORD_PREFIX}-${KEY}`;
-};
-const RHFTextFieldPassword = (props) => {
-  const {
-    name,
-    label,
-    skeletonWidth,
-    skeletonHeight,
-    size,
-    mandatory,
-    mandatoryMessage,
-    helperMessage
-  } = props;
-  const [showPassword, setShowPassword] = useState(false);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const classes = useUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    RHFTextFieldPasswordRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: /* @__PURE__ */ jsx(
-        RHFTextField,
-        {
-          name,
-          label,
-          type: showPassword ? "text" : "password",
-          autoComplete: "on",
-          skeletonWidth,
-          skeletonHeight,
-          size,
-          mandatory,
-          mandatoryMessage,
-          helperMessage,
-          InputProps: {
-            endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                onClick: () => setShowPassword(!showPassword),
-                variant: "line",
-                src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
-              }
-            ) })
-          }
-        }
-      )
-    }
-  );
-};
-export {
-  RHFTextField as R,
-  RHFTEXTFIELD_ROOT_TEST_ID as a,
-  RHFTEXTFIELD_INPUT_TEST_ID as b,
-  RHFTEXTFIELD_PREFIX as c,
-  RHFTextFieldPassword as d
-};