@m4l/components 0.2.35 → 1.0.0

package/components/mui_extended/MenuActions/index.90f53670.js

@@ -1,175 +0,0 @@
-import React__default, { useState, useEffect, useMemo } from "react";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { styled, IconButton, generateUtilityClasses, generateUtilityClass, useTheme, MenuItem } from "@mui/material";
-import { P as Popover } from "../Popover/index.d85de73b.js";
-import { I as Icon } from "../../Icon/index.ad330e78.js";
-import clsx from "clsx";
-import { unstable_composeClasses } from "@mui/base";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { B as Badge } from "../Badge/index.09f5aee5.js";
-import { I as IconButton$1 } from "../IconButton/index.f8a3021b.js";
-styled(IconButton)(() => ({}));
-const LabelMemuItem = styled("div")(({
-  theme
-}) => ({
-  height: "22px",
-  overflow: "hidden",
-  wordBreak: "break-all",
-  marginLeft: theme.spacing(1.5),
-  display: "flex",
-  alignItems: "center"
-}));
-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$1, {
-        src: urlFinalIcon,
-        onClick: handleOpen,
-        tooltip: toolTip,
-        className: iconButtonClassName
-      })
-    }) : /* @__PURE__ */ jsx(IconButton$1, {
-      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 {
-  LabelMemuItem as L,
-  MenuActions as M,
-  MemonizedMenuActions as a
-};

package/components/mui_extended/Pager/index.ea2a4f3e.js

@@ -1,254 +0,0 @@
-import { useMemo } from "react";
-import { styled, generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { I as IconButton } from "../IconButton/index.f8a3021b.js";
-import { useEnvironment } from "@m4l/core";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useResponsiveContainerStore } from "@m4l/graphics";
-import { shallow } from "zustand/shallow";
-import { T as Typography } from "../Typography/index.379dd374.js";
-import { I as Icon } from "../../Icon/index.ad330e78.js";
-const PagerRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LPager?.styleOverrides
-}));
-const componentName = "M4LPager";
-generateUtilityClasses(componentName, [
-  "root",
-  "labelRowsPerPageContainer",
-  "labelRowsPager",
-  "select",
-  "selectMenuItem",
-  "selectMenuPopover",
-  "labelDisplayRows",
-  "pagerActions",
-  "customTablePaginationRoot",
-  "skeletonRoot",
-  "skeletonRowsPerPage",
-  "skeletonButtonContainer",
-  "skeletonIconButton",
-  "actionIconFirstPage",
-  "actionIconPrevious",
-  "actionIconNextPage",
-  "actionIconLastPage"
-]);
-function getPagerUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const pagerUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    labelRowsPerPageContainer: ["labelRowsPerPageContainer"],
-    labelRowsPager: ["labelRowsBager"],
-    select: ["select"],
-    selectMenuPopover: ["selectMenuPopover"],
-    selectMenuItem: ["selectMenuItem"],
-    labelDisplayRows: ["labelDisplayRows"],
-    pagerActions: ["pagerActions"],
-    customTablePaginationRoot: ["customTablePaginationRoot"],
-    skeletonRoot: ["skeletonRoot"],
-    skeletonRowsPerPage: ["skeletonRowsPerPage"],
-    skeletonButtonContainer: ["skeletonButtonContainer"],
-    skeletonIconButton: ["skeletonIconButton"],
-    actionIconFirstPage: ["actionIconFirstPage"],
-    actionIconPrevious: ["actionIconPrevious"],
-    actionIconNextPage: ["actionIconNextPage"],
-    actionIconLastPage: ["actionIconLastPage"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getPagerUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function PagerActions(props) {
-  const {
-    count,
-    page,
-    rowsPerPage,
-    onPageChange,
-    classes
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const handleFirstPageButtonClick = (event) => {
-    onPageChange(event, 0);
-  };
-  const handleBackButtonClick = (event) => {
-    onPageChange(event, page - 1);
-  };
-  const handleNextButtonClick = (event) => {
-    onPageChange(event, page + 1);
-  };
-  const handleLastPageButtonClick = (event) => {
-    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes.pagerActions,
-    children: [/* @__PURE__ */ jsx(IconButton, {
-      dictionaryTooltipId: "pager.first",
-      onClick: handleFirstPageButtonClick,
-      disabled: page === 0,
-      "aria-label": "first page",
-      className: classes.actionIconFirstPage,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`
-    }), /* @__PURE__ */ jsx(IconButton, {
-      dictionaryTooltipId: "pager.previous",
-      onClick: handleBackButtonClick,
-      disabled: page === 0,
-      "aria-label": "first page",
-      className: classes.actionIconPrevious,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`
-    }), /* @__PURE__ */ jsx(IconButton, {
-      dictionaryTooltipId: "pager.next",
-      onClick: handleNextButtonClick,
-      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
-      "aria-label": "next page",
-      className: classes.actionIconNextPage,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`
-    }), /* @__PURE__ */ jsx(IconButton, {
-      dictionaryTooltipId: "pager.last",
-      onClick: handleLastPageButtonClick,
-      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
-      "aria-label": "last page",
-      className: classes.actionIconLastPage,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`
-    })]
-  });
-}
-const CustomTablePagination = (props) => {
-  const {
-    count,
-    page,
-    rowsPerPage,
-    rowsPerPageOptions = [10, 25, 50, 100],
-    labelRowsPerPage,
-    classes,
-    onRowsPerPageChange,
-    onPageChange,
-    SelectProps,
-    labelDisplayedRows = defaultLabelDisplayedRows
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const isUpSm = useResponsiveContainerStore((state) => state.isUpSm, shallow);
-  const theme = useTheme();
-  function defaultLabelDisplayedRows({
-    from,
-    to,
-    count: count2
-  }) {
-    return `${from}\u2013${to} of ${count2 !== -1 ? count2 : `more than ${to}`}`;
-  }
-  const getLabelDisplayedRowsTo = () => {
-    if (count === -1) {
-      return (page + 1) * rowsPerPage;
-    }
-    return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
-  };
-  const CustomIconComponent = (props2) => /* @__PURE__ */ jsx(Icon, {
-    src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/chevronDown.svg`,
-    ...props2
-  });
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [rowsPerPageOptions?.length > 1 ? /* @__PURE__ */ jsxs("div", {
-      className: classes.labelRowsPerPageContainer,
-      children: [isUpSm ? /* @__PURE__ */ jsx(Typography, {
-        variant: "body",
-        children: labelRowsPerPage
-      }) : null, /* @__PURE__ */ jsx(Select, {
-        variant: "standard",
-        ...!SelectProps?.variant && {
-          input: /* @__PURE__ */ jsx(InputBase, {})
-        },
-        value: rowsPerPage,
-        onChange: (e) => {
-          onRowsPerPageChange(e);
-        },
-        className: classes.select,
-        MenuProps: {
-          className: classes.selectMenuPopover,
-          sx: {
-            ...theme.components?.M4LPagerMenuPopover?.styleOverrides
-          }
-        },
-        IconComponent: CustomIconComponent,
-        ...SelectProps,
-        children: rowsPerPageOptions.map((item, idx) => /* @__PURE__ */ jsx(MenuItem, {
-          className: classes.selectMenuItem,
-          value: item,
-          children: item
-        }, `${classes.selectMenuItem}-${idx}`))
-      })]
-    }) : null, /* @__PURE__ */ jsx(Typography, {
-      variant: "body",
-      className: classes.labelDisplayRows,
-      children: labelDisplayedRows({
-        from: count === 0 ? 0 : page * rowsPerPage + 1,
-        to: getLabelDisplayedRowsTo(),
-        count: count === -1 ? -1 : count,
-        page
-      })
-    }), /* @__PURE__ */ jsx(PagerActions, {
-      count,
-      page,
-      rowsPerPage,
-      onPageChange,
-      classes
-    })]
-  });
-};
-function Pager(props) {
-  const {
-    totalRecords,
-    rowsPerPageOptions = [5, 10, 2],
-    rowsPerPage = 25,
-    page,
-    onPageChange,
-    onRowsPerPageChange,
-    labelRows = "Rows per page",
-    labelOf = "Of",
-    isXs
-  } = props;
-  const currentPage = useMemo(() => {
-    if (rowsPerPage * page > totalRecords) {
-      return Math.floor(totalRecords / rowsPerPage);
-    }
-    return page;
-  }, [page, rowsPerPage, totalRecords]);
-  const handleChangeRowsPerPage = (event) => {
-    onRowsPerPageChange(parseInt(event.target.value, 10));
-    onPageChange(0);
-  };
-  const handleChangePage = (_event, newPage) => {
-    onPageChange(newPage);
-  };
-  const classes = pagerUtilityClasses();
-  return /* @__PURE__ */ jsx(PagerRoot, {
-    className: classes.root,
-    children: /* @__PURE__ */ jsx(CustomTablePagination, {
-      rowsPerPageOptions,
-      count: totalRecords,
-      rowsPerPage,
-      classes,
-      labelRowsPerPage: labelRows,
-      page: currentPage,
-      onPageChange: handleChangePage,
-      onRowsPerPageChange: handleChangeRowsPerPage,
-      labelDisplayedRows: !isXs ? ({
-        from,
-        to,
-        count
-      }) => `${from}-${to} ${labelOf} ${count}` : () => ``
-    })
-  });
-}
-function getPagerComponentsDictionary() {
-  return ["pager"];
-}
-export {
-  Pager as P,
-  getPagerComponentsDictionary as g
-};

package/components/mui_extended/Popover/index.d85de73b.js

@@ -1,179 +0,0 @@
-import { styled, Popover as Popover$1, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
-import { jsxs, jsx } from "react/jsx-runtime";
-const PopoverRoot = styled(Popover$1)(({
-  theme
-}) => ({
-  ...theme.components?.M4LPopover?.styleOverrides
-}));
-generateUtilityClasses("M4LPopover", [
-  "root",
-  "arrowStyle",
-  "noArrow",
-  "topLeft",
-  "topCenter",
-  "topRight",
-  "bottomLeft",
-  "bottomCenter",
-  "bottomRight",
-  "leftTop",
-  "leftCenter",
-  "leftBottom",
-  "rightTop",
-  "rightCenter",
-  "rightBottom"
-]);
-function getPopoverClassesUtilityClass(slot) {
-  return generateUtilityClass("M4LPopover", slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root"],
-    arrowStyle: ["arrowStyle", ownerState.arrowType === "top-left" && "topLeft", ownerState.arrowType === "top-center" && "topCenter", ownerState.arrowType === "top-right" && "topRight", ownerState.arrowType === "bottom-left" && "bottomLeft", ownerState.arrowType === "bottom-center" && "bottomCenter", ownerState.arrowType === "bottom-right" && "bottomRight", ownerState.arrowType === "left-top" && "leftTop", ownerState.arrowType === "left-center" && "leftCenter", ownerState.arrowType === "left-bottom" && "leftBottom", ownerState.arrowType === "right-top" && "rightTop", ownerState.arrowType === "right-center" && "rightCenter", ownerState.arrowType === "right-bottom" && "rightBottom"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getPopoverClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const ArrowStyle = styled("span")(({
-  arrowType,
-  theme
-}) => {
-  const SIZE = 12;
-  const POSITION = -(SIZE / 2);
-  const borderStyle = `solid 1px ${theme.palette.grey[50012]}`;
-  const topStyle = {
-    borderRadius: "0 0 3px 0",
-    top: POSITION,
-    borderBottom: borderStyle,
-    borderRight: borderStyle
-  };
-  const bottomStyle = {
-    borderRadius: "3px 0 0 0",
-    bottom: POSITION,
-    borderTop: borderStyle,
-    borderLeft: borderStyle
-  };
-  const leftStyle = {
-    borderRadius: "0 3px 0 0",
-    left: POSITION,
-    borderTop: borderStyle,
-    borderRight: borderStyle
-  };
-  const rightStyle = {
-    borderRadius: "0 0 0 3px",
-    right: POSITION,
-    borderBottom: borderStyle,
-    borderLeft: borderStyle
-  };
-  return {
-    display: "none",
-    [theme.breakpoints.up("sm")]: {
-      width: SIZE,
-      height: SIZE,
-      content: "''",
-      position: "absolute",
-      display: "block",
-      transform: "rotate(-135deg)",
-      background: theme.palette.background.default
-    },
-    ...arrowType === "top-left" && {
-      ...topStyle,
-      left: 20
-    },
-    ...arrowType === "top-center" && {
-      ...topStyle,
-      left: 0,
-      right: 0,
-      margin: "auto"
-    },
-    ...arrowType === "top-right" && {
-      ...topStyle,
-      right: 20
-    },
-    ...arrowType === "bottom-left" && {
-      ...bottomStyle,
-      left: 20
-    },
-    ...arrowType === "bottom-center" && {
-      ...bottomStyle,
-      left: 0,
-      right: 0,
-      margin: "auto"
-    },
-    ...arrowType === "bottom-right" && {
-      ...bottomStyle,
-      right: 20
-    },
-    ...arrowType === "left-top" && {
-      ...leftStyle,
-      top: 20
-    },
-    ...arrowType === "left-center" && {
-      ...leftStyle,
-      top: 0,
-      bottom: 0,
-      margin: "auto"
-    },
-    ...arrowType === "left-bottom" && {
-      ...leftStyle,
-      bottom: 20
-    },
-    ...arrowType === "right-top" && {
-      ...rightStyle,
-      top: 20
-    },
-    ...arrowType === "right-center" && {
-      ...rightStyle,
-      top: 0,
-      bottom: 0,
-      margin: "auto"
-    },
-    ...arrowType === "right-bottom" && {
-      ...rightStyle,
-      bottom: 20
-    }
-  };
-});
-const Popover = (props) => {
-  const {
-    children,
-    arrowType = "top-right",
-    className,
-    ...other
-  } = props;
-  const ownerState = {
-    arrowType
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsxs(PopoverRoot, {
-    className: clsx(classes.root, className),
-    "data-testid": "PopoverRoot",
-    anchorOrigin: {
-      vertical: "bottom",
-      horizontal: "right"
-    },
-    transformOrigin: {
-      vertical: "top",
-      horizontal: "right"
-    },
-    transitionDuration: 0,
-    PaperProps: {
-      sx: {
-        p: 1,
-        overflow: "inherit"
-      }
-    },
-    ...other,
-    children: [/* @__PURE__ */ jsx(ArrowStyle, {
-      className: classes.arrowStyle,
-      "data-testid": "ArrowStyle",
-      arrowType
-    }), children]
-  });
-};
-export {
-  Popover as P
-};

package/components/mui_extended/Stack/index.0e53197c.js

@@ -1,39 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass, styled, Stack as Stack$1 } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-const componentName = "M4LStack";
-generateUtilityClasses(componentName, [
-  "root"
-]);
-function getStackUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useStackUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getStackUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const MUISTack = styled(Stack$1)(({ theme }) => ({
-  ...theme.components?.M4LStack?.styleOverrides
-}));
-const classes = useStackUtilityClasses();
-const Stack = (props) => {
-  const {
-    children,
-    className,
-    ...others
-  } = props;
-  return /* @__PURE__ */ jsx(MUISTack, {
-    ...others,
-    className: clsx(classes.root, className),
-    children
-  });
-};
-export {
-  Stack as S
-};