@m4l/components 0.2.36 → 1.0.0

package/components/mui_extended/Breadcrumbs/index.4a44883c.js

@@ -1,87 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-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";
-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.5395d101.js

@@ -1,213 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-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 { useMemo } from "react";
-import { I as Image } from "../../Image/index.8cc036b1.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.a1e774a2.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.256169f0.js

@@ -1,76 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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 { forwardRef } from "react";
-import { F as FieldLabel } from "../FieldLabel/index.2622ee40.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("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);
-  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.967e70b7.js

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

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

@@ -1,119 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-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.ee7b85c9.js";
-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.4092bb69.js

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

package/components/mui_extended/LinkWithRoute/index.288c51f3.js

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Link as Link$1 } from "react-router-dom";
-import { Skeleton, Link } from "@mui/material";
-import { useModuleSkeleton } from "@m4l/core";
-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
-};