@m4l/components 0.2.35 → 1.0.0

package/components/mui_extended/Breadcrumbs/index.5e37d903.js

@@ -1,94 +0,0 @@
-import { useMemo } from "react";
-import { useModuleDictionary } from "@m4l/core";
-import { Link, Box, Typography, Breadcrumbs as Breadcrumbs$1 } from "@mui/material";
-import { Link as Link$1 } from "react-router-dom";
-import { jsxs, jsx } from "react/jsx-runtime";
-function LinkItem({
-  link
-}) {
-  const {
-    href,
-    name,
-    icon,
-    dictionaryField: dictionaryDescription
-  } = link;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  return /* @__PURE__ */ jsxs(Link, {
-    variant: "body2",
-    component: Link$1,
-    to: href || "#",
-    sx: {
-      lineHeight: 2,
-      display: "flex",
-      alignItems: "center",
-      color: "text.primary",
-      "& > div": {
-        display: "inherit"
-      }
-    },
-    children: [icon && /* @__PURE__ */ jsx(Box, {
-      sx: {
-        mr: 1,
-        "& svg": {
-          width: 20,
-          height: 20
-        }
-      },
-      children: icon
-    }), dictionaryDescription !== void 0 && getLabel ? getLabel(dictionaryDescription) : name]
-  }, name);
-}
-function Breadcrumbs(props) {
-  const {
-    links,
-    activeLast = false,
-    ...other
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const currentLink = useMemo(() => {
-    if (links.length === 0)
-      return "";
-    const {
-      dictionaryField
-    } = links[links.length - 1];
-    return getLabel(dictionaryField);
-  }, [getLabel, links]);
-  const listDefault = useMemo(() => links.map((link) => /* @__PURE__ */ jsx(LinkItem, {
-    link
-  }, link.name)), [links]);
-  const listActiveLast = useMemo(() => links.map((link) => link.name !== currentLink ? /* @__PURE__ */ jsx(LinkItem, {
-    link
-  }, link.name) : /* @__PURE__ */ jsx(Typography, {
-    variant: "body2",
-    sx: {
-      maxWidth: 260,
-      overflow: "hidden",
-      whiteSpace: "nowrap",
-      color: "text.disabled",
-      textOverflow: "ellipsis"
-    },
-    children: currentLink
-  }, link.name)), [currentLink, links]);
-  return /* @__PURE__ */ jsx(Breadcrumbs$1, {
-    id: "MUIBreadcrumbs",
-    separator: /* @__PURE__ */ jsx(Box, {
-      component: "span",
-      sx: {
-        width: 4,
-        height: 4,
-        mx: 0.5,
-        borderRadius: "50%",
-        bgcolor: "text.disabled"
-      }
-    }),
-    ...other,
-    children: activeLast ? listDefault : listActiveLast
-  });
-}
-export {
-  Breadcrumbs as B
-};

package/components/mui_extended/Button/index.c3084916.js

@@ -1,221 +0,0 @@
-import { useModuleSkeleton } from "@m4l/core";
-import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, IconButton, Tooltip } from "@mui/material";
-import MuiButton from "@mui/material/Button";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { I as Image } from "../../Image/index.b799c514.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { LoadingButton as LoadingButton$1 } from "@mui/lab";
-import { T as Typography } from "../Typography/index.379dd374.js";
-const ButtonRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LButton?.styleOverrides
-}));
-styled(Skeleton)(({
-  theme
-}) => ({
-  borderRadius: theme.spacing(0.5)
-}));
-const componentName$2 = "M4LButton";
-const buttonClasses = generateUtilityClasses(componentName$2, [
-  "root",
-  "skeleton",
-  "sizeSmall",
-  "sizeMedium",
-  "variantOutlined",
-  "variantContained",
-  "variantText",
-  "isDisabled",
-  "colorError",
-  "colorSuccess",
-  "colorWarning",
-  "togglePressed",
-  "toggleNotPressed"
-]);
-function getButtonUtilityClass(slot) {
-  return generateUtilityClass(componentName$2, slot);
-}
-const useUtilityClasses$2 = (onwerState) => {
-  const slots = {
-    root: ["root", onwerState.size === "small" && "sizeSmall", onwerState.size === "medium" && "sizeMedium", onwerState.variant === "outlined" && "variantOutlined", onwerState.variant === "contained" && "variantContained", onwerState.variant === "text" && "variantText", onwerState.isDisabled && "isDisabled", onwerState.colorState === "error" && "colorError", onwerState.colorState === "success" && "colorSuccess", onwerState.colorState === "warning" && "colorWarning"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getButtonUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const Button = (props) => {
-  const {
-    size = "small",
-    variant = "contained",
-    className,
-    disabled,
-    skeletonWidth = "100px",
-    skeletonHeight = "28px",
-    colorState,
-    ...others
-  } = props;
-  const isSkeleton = useModuleSkeleton();
-  const ownerState = {
-    size,
-    variant,
-    isDisabled: disabled,
-    colorState
-  };
-  const classes = useUtilityClasses$2(ownerState);
-  return /* @__PURE__ */ jsx(ButtonRoot, {
-    className: clsx(classes.root, className),
-    "data-testid": "ButtonRoot",
-    children: !isSkeleton ? /* @__PURE__ */ jsx(MuiButton, {
-      ...others,
-      variant,
-      size,
-      disableRipple: true,
-      disabled
-    }) : /* @__PURE__ */ jsx(Skeleton, {
-      className: classes.skeleton,
-      "data-testid": "MuiSkeleton",
-      variant: "rectangular",
-      width: skeletonWidth
-    })
-  });
-};
-const WrapperImageButton = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LImageButton?.styleOverrides
-}));
-const componentName$1 = "M4LImageButton";
-generateUtilityClasses(componentName$1, [
-  "root"
-]);
-function getImageButtonUtilityClass(slot) {
-  return generateUtilityClass(componentName$1, slot);
-}
-const useUtilityClasses$1 = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getImageButtonUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const IMAGEBUTTON_PREFIX = "ImageButton";
-const getNameDataTestId$1 = (KEY) => {
-  return `${IMAGEBUTTON_PREFIX}-${KEY}`;
-};
-function ImageButton({
-  src,
-  width,
-  height,
-  tooltip,
-  sx = {
-    width,
-    height
-  },
-  ...other
-}) {
-  const finalTooltip = tooltip;
-  const classes = useUtilityClasses$1();
-  const imageButton = useMemo(() => {
-    return /* @__PURE__ */ jsx(IconButton, {
-      sx,
-      ...other,
-      children: /* @__PURE__ */ jsx(Image, {
-        src
-      })
-    });
-  }, [src, width, height, sx]);
-  return /* @__PURE__ */ jsx(WrapperImageButton, {
-    className: classes.root,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId$1("root")
-    } : {},
-    children: finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
-      title: finalTooltip || "",
-      children: imageButton
-    }) : imageButton
-  });
-}
-const componentName = "M4LLoadingButton";
-generateUtilityClasses(componentName, [
-  "root",
-  "skeleton",
-  "sizeSmall",
-  "sizeMedium",
-  "variantOutlined",
-  "variantContained",
-  "variantText",
-  "isDisabled"
-]);
-function getLoadingButtonUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = (onwerState) => {
-  const slots = {
-    root: ["root", onwerState.size === "small" && "sizeSmall", onwerState.size === "medium" && "sizeMedium", onwerState.variant === "outlined" && "variantOutlined", onwerState.variant === "contained" && "variantContained", onwerState.variant === "text" && "variantText", onwerState.isDisabled && "isDisabled"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getLoadingButtonUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const LoadingButtonRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LLoadingButton?.styleOverrides
-}));
-const LOADINGBUTTON_PREFIX = "M4LoadingButton";
-const getNameDataTestId = (KEY) => {
-  return `${LOADINGBUTTON_PREFIX}-${KEY}`;
-};
-const LoadingButton = (props) => {
-  const {
-    children,
-    skeletonWidth = "100%",
-    size = "small",
-    variant = "contained",
-    disabled,
-    className,
-    ...other
-  } = props;
-  const isSkeleton = useModuleSkeleton();
-  const ownerState = {
-    size,
-    variant,
-    isDisabled: disabled
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(LoadingButtonRoot, {
-    className: clsx(classes.root, className),
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("root")
-    } : {},
-    children: !isSkeleton ? /* @__PURE__ */ jsx(LoadingButton$1, {
-      ...other,
-      variant,
-      size,
-      children: /* @__PURE__ */ jsx(Typography, {
-        variant: "action",
-        children
-      })
-    }) : /* @__PURE__ */ jsx(Skeleton, {
-      className: classes.skeleton,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("skeleton")
-      } : {},
-      variant: "rectangular",
-      width: skeletonWidth
-    })
-  });
-};
-export {
-  Button as B,
-  ImageButton as I,
-  LoadingButton as L,
-  buttonClasses as b
-};

package/components/mui_extended/CheckBox.2a3b86c5.js

@@ -1,86 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass, Skeleton, styled, Checkbox } from "@mui/material";
-import clsx from "clsx";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { unstable_composeClasses } from "@mui/base";
-import { useModuleSkeleton } from "@m4l/core";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { F as FieldLabel } from "../FieldLabel/index.0412576c.js";
-const COMPONENT_CLASS_NAME = "M4LCheckBox";
-generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  "root",
-  "skeleton",
-  "small",
-  "medium",
-  "stateDisabled"
-]);
-function getRHFCheckboxUtilityClass(slot) {
-  return generateUtilityClass(COMPONENT_CLASS_NAME, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.size === "small" && "small", ownerState.size === "medium" && "medium", ownerState.disabled && "stateDisabled"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const SkeletonCheckBox = (props) => {
-  const {
-    classes
-  } = props;
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsx("div", {
-      className: classes.skeleton,
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "rounded",
-        width: "18px",
-        height: "18px"
-      })
-    })
-  });
-};
-const CheckBoxRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LCheckBox?.styleOverrides
-}));
-const CheckBox = forwardRef((props, ref) => {
-  const {
-    className,
-    size = "small",
-    disabled,
-    label,
-    mandatory,
-    mandatoryMessage,
-    helperMessage,
-    htmlFor
-  } = props;
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const ownerState = {
-    size: !isDesktop ? "medium" : size,
-    disabled
-  };
-  const classes = useUtilityClasses(ownerState);
-  console.log("checkbox label props", props);
-  return /* @__PURE__ */ jsxs(CheckBoxRoot, {
-    className: clsx(classes.root, className),
-    ref,
-    children: [!isSkeleton ? /* @__PURE__ */ jsx(Checkbox, {
-      id: htmlFor,
-      ...props
-    }) : /* @__PURE__ */ jsx(SkeletonCheckBox, {
-      classes
-    }), label && /* @__PURE__ */ jsx(FieldLabel, {
-      label,
-      mandatory,
-      mandatoryMessage,
-      helperMessage,
-      htmlFor
-    })]
-  });
-});
-export {
-  CheckBox as C
-};

package/components/mui_extended/CircularProgress/index.ad569afd.js

@@ -1,10 +0,0 @@
-import { CircularProgress as CircularProgress$1 } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
-const CircularProgress = (props) => {
-  return /* @__PURE__ */ jsx(CircularProgress$1, {
-    ...props
-  });
-};
-export {
-  CircularProgress as C
-};

package/components/mui_extended/IconButton/index.f8a3021b.js

@@ -1,125 +0,0 @@
-import { useMemo, useState } from "react";
-import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { Skeleton, styled, generateUtilityClasses, generateUtilityClass, Tooltip, IconButton as IconButton$1 } from "@mui/material";
-import { I as Icon } from "../../Icon/index.ad330e78.js";
-import { jsx, Fragment } from "react/jsx-runtime";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
-import { useResponsiveDesktop } from "@m4l/graphics";
-const SkeletonIconButton = (props) => {
-  const {
-    classes
-  } = props;
-  return /* @__PURE__ */ jsx(Skeleton, {
-    variant: "rectangular",
-    className: classes.skeleton,
-    "data-testid": "SkeletonIconButton"
-  });
-};
-const IconButtonRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LIconButton?.styleOverrides
-}));
-const componentName = "M4LIconButton";
-const iconButtonClasses = generateUtilityClasses(componentName, [
-  "root",
-  "skeleton",
-  "sizemSall",
-  "sizeMedium",
-  "variantPrimary",
-  "variantSecondary",
-  "variantLine",
-  "isFocus",
-  "isDisabled",
-  "togglePressed",
-  "toggleNotPressed"
-]);
-function getIconButtonUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.variant === "primary" && ownerState.isSkeleton !== true && "variantPrimary", ownerState.variant === "secondary" && ownerState.isSkeleton !== true && "variantSecondary", ownerState.variant === "line" && ownerState.isSkeleton !== true && "variantLine", ownerState.isFocus && !ownerState.isDisabled && "isFocus", ownerState.isDisabled && "isDisabled"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getIconButtonUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const IconButton = (props) => {
-  const {
-    src,
-    tooltip,
-    size = "small",
-    dictionaryTooltipId,
-    rotationAngle,
-    variant = "line",
-    disabled,
-    className,
-    onClick,
-    ...other
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const finalTooltip = useMemo(() => {
-    if (disabled) {
-      return void 0;
-    }
-    if (tooltip && tooltip !== "") {
-      return tooltip;
-    }
-    if (dictionaryTooltipId && getLabel) {
-      return getLabel(dictionaryTooltipId);
-    }
-    return void 0;
-  }, [tooltip, dictionaryTooltipId, getLabel, disabled]);
-  const [isfocus] = useState(false);
-  const ownerState = {
-    variant,
-    size: isDesktop ? size : "medium",
-    isSkeleton,
-    isFocus: disabled ? false : isfocus,
-    isDisabled: disabled
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(IconButtonRoot, {
-    className: clsx(classes.root, className),
-    "data-testid": "IconButtonRoot",
-    children: !isSkeleton ? /* @__PURE__ */ jsx(Fragment, {
-      children: finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
-        title: finalTooltip || "",
-        children: /* @__PURE__ */ jsx(IconButton$1, {
-          ...other,
-          onClick,
-          disableRipple: true,
-          disabled,
-          children: /* @__PURE__ */ jsx(Icon, {
-            src,
-            size
-          })
-        })
-      }) : /* @__PURE__ */ jsx(IconButton$1, {
-        ...other,
-        onClick,
-        disableRipple: true,
-        disabled,
-        children: /* @__PURE__ */ jsx(Icon, {
-          src,
-          size: isDesktop ? size : "medium",
-          rotationAngle
-        })
-      })
-    }) : /* @__PURE__ */ jsx(SkeletonIconButton, {
-      classes
-    })
-  });
-};
-export {
-  IconButton as I,
-  iconButtonClasses as i
-};

package/components/mui_extended/LinearProgress/index.c92b9ba9.js

@@ -1,13 +0,0 @@
-import { LinearProgress as LinearProgress$1 } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
-const LinearProgress = (props) => {
-  const {
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx(LinearProgress$1, {
-    ...other
-  });
-};
-export {
-  LinearProgress as L
-};

package/components/mui_extended/LinkWithRoute/index.16436ab8.js

@@ -1,30 +0,0 @@
-import { Link as Link$1 } from "react-router-dom";
-import { Skeleton, Link } from "@mui/material";
-import { useModuleSkeleton } from "@m4l/core";
-import { jsx } from "react/jsx-runtime";
-const LinkWithRoute = (props) => {
-  const {
-    to,
-    children,
-    skeletonWidth = "100%",
-    skeletonHeight = "14px",
-    ...other
-  } = props;
-  const isSkeleton = useModuleSkeleton();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(Skeleton, {
-      variant: "text",
-      width: skeletonWidth,
-      height: skeletonHeight
-    });
-  }
-  return /* @__PURE__ */ jsx(Link, {
-    component: Link$1,
-    to,
-    ...other,
-    children
-  });
-};
-export {
-  LinkWithRoute as L
-};