@m4l/components 3.0.0 → 3.0.2

package/components/hook-form/RHFTextField/index.80b98b98.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.7b6c1ee3.js";
-import { useFormContext, Controller } from "react-hook-form";
-import { ao as SkeletonTextFieldRoot, ap as WrapperSkeletonRHFTextField, aq as RHFTextFieldRoot, ar as RHFTextFieldPasswordRoot } from "../../../styles/index.db9e7ddb.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.f77cc2ab.js";
-import { H as HelperText } from "../../HelperText/index.6818980e.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.9a979def.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
-};

package/components/mui_extended/MenuActions/classes/constants.d.ts

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

package/components/mui_extended/MenuActions/classes/index.d.ts

@@ -1,7 +0,0 @@
-import { MenuActionsClassesType } from './types';
-export declare const menuActionsClasses: MenuActionsClassesType;
-export declare function getMenuActionsUtilityClass(slot: string): string;
-export declare const useMenuActionsUtilityClasses: () => {
-    root: string;
-    itemDelete: string;
-};

package/components/mui_extended/MenuActions/classes/types.d.ts

@@ -1,7 +0,0 @@
-import { useMenuActionsUtilityClasses } from '.';
-export interface MenuActionsClassesType {
-    root: string;
-    itemDelete: string;
-}
-export declare type StackClassesKey = keyof MenuActionsClassesType;
-export declare type Classes = ReturnType<typeof useMenuActionsUtilityClasses>;

package/components/mui_extended/MenuActions/icons.d.ts

@@ -1,3 +0,0 @@
-export declare const ICONS: {
-    MENU: string;
-};

package/components/mui_extended/MenuActions/index.11d777bb.js

@@ -1,167 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React__default, { useState, useEffect, useMemo } from "react";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { generateUtilityClasses, generateUtilityClass, useTheme, MenuItem } from "@mui/material";
-import { P as Popover } from "../Popover/index.a7da93f1.js";
-import { aF as LabelMemuItem } from "../../../styles/index.db9e7ddb.js";
-import { I as Icon } from "../../Icon/index.c06685f4.js";
-import clsx from "clsx";
-import { unstable_composeClasses } from "@mui/base";
-import { B as Badge } from "../Badge/index.48948839.js";
-import { I as IconButton } from "../IconButton/index.7b6c1ee3.js";
-const ICONS = {
-  MENU: "menu.svg"
-};
-const componentName = "M4LMenuActions";
-generateUtilityClasses(componentName, [
-  "root",
-  "itemDelete"
-]);
-function getMenuActionsUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useMenuActionsUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    itemDelete: ["itemDelete"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getMenuActionsUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function MenuActions(props) {
-  const {
-    menuActions,
-    endListElement,
-    menuActionSx,
-    className,
-    iconButtonClassName = "",
-    objItem = {},
-    urlIcon,
-    toolTip = "",
-    marginTop = -1,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    width = 200,
-    withBadge = false,
-    badgeContent,
-    arrowType = "right-top",
-    externalOpen = null,
-    externalClose,
-    ...other
-  } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const [open, setOpen] = useState(null);
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
-  const theme = useTheme();
-  const classes = useMenuActionsUtilityClasses();
-  useEffect(() => {
-    let mounted = true;
-    if (mounted) {
-      setOpen(externalOpen);
-    }
-    return function cleanUp() {
-      mounted = false;
-    };
-  }, [externalOpen]);
-  const urlFinalIcon = useMemo(() => {
-    if (urlIcon)
-      return urlIcon;
-    return `${host_static_assets}/${environment_assets}/frontend/components/menu_actions/assets/icons/${ICONS.MENU}`;
-  }, [urlIcon, host_static_assets, environment_assets]);
-  const handleClose = (e) => {
-    e.stopPropagation();
-    setOpen(null);
-    externalClose && externalClose(null);
-  };
-  const handleClick = (e, menuAction) => {
-    e.stopPropagation();
-    setOpen(null);
-    menuAction.onClick();
-  };
-  const finalActions = useMemo(() => {
-    let ret;
-    if (typeof menuActions !== "function") {
-      ret = menuActions;
-    } else {
-      ret = menuActions(objItem);
-    }
-    return ret;
-  }, [menuActions, objItem]);
-  const IconButtonElement = /* @__PURE__ */ jsx(Fragment, { children: withBadge ? /* @__PURE__ */ jsx(Badge, { badgeContent, children: /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      src: urlFinalIcon,
-      onClick: handleOpen,
-      tooltip: toolTip,
-      className: iconButtonClassName
-    }
-  ) }) : /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      src: urlFinalIcon,
-      onClick: handleOpen,
-      tooltip: toolTip,
-      className: iconButtonClassName
-    }
-  ) });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    IconButtonElement,
-    /* @__PURE__ */ jsxs(
-      Popover,
-      {
-        id: "Popover",
-        open: Boolean(open),
-        anchorEl: open,
-        onClose: handleClose,
-        arrowType,
-        className: clsx(classes.root, className),
-        sx: {
-          marginTop,
-          marginBottom,
-          marginLeft,
-          marginRight,
-          width,
-          maxWidth: 300,
-          "& .MuiMenuItem-root": { px: 1, typography: "body2", borderRadius: 0.75 },
-          ...theme.components?.M4LMenuActions?.styleOverrides,
-          ...menuActionSx
-        },
-        ...other,
-        children: [
-          finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(
-            MenuItem,
-            {
-              dense: true,
-              onClick: (e) => {
-                handleClick(e, menuAction);
-              },
-              sx: { color: menuAction.color ?? "text.main" },
-              disabled: menuAction.disabled,
-              className: clsx(
-                menuAction?.className,
-                menuAction.variant === "delete" && classes.itemDelete
-              ),
-              children: [
-                menuAction.urlIcon ? /* @__PURE__ */ jsx(Icon, { src: menuAction.urlIcon }) : null,
-                /* @__PURE__ */ jsx(LabelMemuItem, { children: menuAction.label || menuAction.dictionaryId && getLabel(menuAction.dictionaryId) })
-              ]
-            },
-            `menu_action_${index}`
-          )),
-          endListElement ? endListElement : null
-        ]
-      }
-    )
-  ] });
-}
-const MemonizedMenuActions = React__default.memo(MenuActions);
-export {
-  MenuActions as M,
-  MemonizedMenuActions as a
-};

package/components/mui_extended/MenuActions/styles.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const WrapperMenuActions: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "disabled" | "children" | "tabIndex" | "className" | "color" | "size" | "action" | "sx" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const LabelMemuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;