@m4l/components 0.1.80 → 0.1.82

package/components/mui_extended/MenuActions/{index.43a2e1ae.js → index.f6bfdd40.js}

@@ -3,8 +3,8 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { IconButton, MenuItem, Badge } from "@mui/material";
 import { P as Popover } from "../Popover/index.9f35d0eb.js";
 import { styled } from "@mui/material/styles";
-import { I as Icon } from "../../Icon/index.9fcd1476.js";
-import { I as IconButton$1 } from "../IconButton/index.12f1a3c3.js";
+import { I as Icon } from "../../Icon/index.2414ff25.js";
+import { I as IconButton$1 } from "../IconButton/index.a318316e.js";
 import clsx from "clsx";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 styled(IconButton)(() => ({}));

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

@@ -2,9 +2,21 @@ import { PagerClassesType } from './types';
 export declare const pagerClasses: PagerClassesType;
 export declare function getPagerUtilityClass(slot: string): string;
 export declare const pagerUtilityClasses: () => {
+    select: string;
     root: string;
     skeletonRoot: string;
+    labelRowsPerPageContainer: string;
+    selectMenuPopover: string;
+    selectMenuItem: string;
+    labelDisplayRows: string;
+    pagerActions: string;
+    customTablePaginationRoot: string;
     skeletonRowsPerPage: string;
     skeletonButtonContainer: string;
     skeletonIconButton: string;
+    actionIconFirstPage: string;
+    actionIconPrevious: string;
+    actionIconNextPage: string;
+    actionIconLastPage: string;
+    labelRowsPager: string;
 };

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

@@ -1,10 +1,18 @@
 import { pagerUtilityClasses } from ".";
 export interface PagerClassesType {
     root: string;
-    skeletonRoot: string;
-    skeletonRowsPerPage: string;
-    skeletonButtonContainer: string;
-    skeletonIconButton: string;
+    labelRowsPerPageContainer: string;
+    labelRowsPager: string;
+    select: string;
+    selectMenuPopover: string;
+    selectMenuItem: string;
+    labelDisplayRows: string;
+    pagerActions: string;
+    customTablePaginationRoot: string;
+    actionIconFirstPage: string;
+    actionIconPrevious: string;
+    actionIconNextPage: string;
+    actionIconLastPage: string;
 }
 export declare type PagerClassesKey = keyof PagerClassesType;
 export declare type Classes = ReturnType<typeof pagerUtilityClasses>;

package/components/mui_extended/Pager/{index.82e89328.js → index.da26e9d4.js}

@@ -1,10 +1,11 @@
 import { useMemo } from "react";
-import { generateUtilityClasses, generateUtilityClass, TablePagination, Skeleton } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { I as IconButton } from "../IconButton/index.12f1a3c3.js";
+import { I as IconButton } from "../IconButton/index.a318316e.js";
 import { useEnvironment } from "@m4l/core";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
+import { T as Typography } from "../Typography/index.443590d6.js";
 const WrapperPagerActions = styled("div")(({ theme }) => ({
   width: "100%",
   justifyContent: "center",
@@ -21,7 +22,8 @@ function PagerActions(props) {
     count,
     page,
     rowsPerPage,
-    onPageChange
+    onPageChange,
+    classes
   } = props;
   const {
     host_static_assets,
@@ -40,31 +42,35 @@ function PagerActions(props) {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
   return /* @__PURE__ */ jsxs(WrapperPagerActions, {
-    id: "WrapperPagerActions",
+    className: classes.pagerActions,
     children: [/* @__PURE__ */ jsx(IconButton, {
       id: "test_bruce",
       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`
     })]
   });
@@ -105,10 +111,22 @@ styled("div")(({ theme }) => ({
 const componentName = "M4LPager";
 generateUtilityClasses(componentName, [
   "root",
+  "labelRowsPerPageContainer",
+  "labelRowsPager",
+  "select",
+  "selectMenuItem",
+  "selectMenuPopover",
+  "labelDisplayRows",
+  "pagerActions",
+  "customTablePaginationRoot",
   "skeletonRoot",
   "skeletonRowsPerPage",
   "skeletonButtonContainer",
-  "skeletonIconButton"
+  "skeletonIconButton",
+  "actionIconFirstPage",
+  "actionIconPrevious",
+  "actionIconNextPage",
+  "actionIconLastPage"
 ]);
 function getPagerUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
@@ -116,16 +134,101 @@ function getPagerUtilityClass(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"]
+    skeletonIconButton: ["skeletonIconButton"],
+    actionIconFirstPage: ["actionIconFirstPage"],
+    actionIconPrevious: ["actionIconPrevious"],
+    actionIconNextPage: ["actionIconNextPage"],
+    actionIconLastPage: ["actionIconLastPage"]
   };
   const composedClasses = unstable_composeClasses(slots, getPagerUtilityClass, {});
   return {
     ...composedClasses
   };
 };
+const CustomTablePagination = (props) => {
+  const {
+    count,
+    page,
+    rowsPerPage,
+    rowsPerPageOptions = [10, 25, 50, 100],
+    labelRowsPerPage,
+    classes,
+    onRowsPerPageChange,
+    onPageChange,
+    SelectProps,
+    labelDisplayedRows = defaultLabelDisplayedRows,
+    ActionsComponent
+  } = props;
+  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);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [rowsPerPageOptions?.length > 1 ? /* @__PURE__ */ jsxs("div", {
+      className: classes.labelRowsPerPageContainer,
+      children: [/* @__PURE__ */ jsx(Typography, {
+        variant: "body",
+        children: labelRowsPerPage
+      }), /* @__PURE__ */ jsx(Select, {
+        variant: "standard",
+        ...!SelectProps?.variant && {
+          input: /* @__PURE__ */ jsx(InputBase, {})
+        },
+        value: rowsPerPage,
+        onChange: onRowsPerPageChange,
+        className: classes.select,
+        MenuProps: {
+          className: classes.selectMenuPopover,
+          sx: {
+            ...theme.components?.M4LPagerMenuPopover?.styleOverrides
+          }
+        },
+        ...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(ActionsComponent, {
+      count,
+      page,
+      rowsPerPage,
+      onPageChange: () => onPageChange,
+      classes
+    })]
+  });
+};
 function Pager(props) {
   const {
     totalRecords,
@@ -136,7 +239,6 @@ function Pager(props) {
     onRowsPerPageChange,
     labelRows = "Rows per page",
     labelOf = "Of",
-    isSkeleton = "false",
     isDesktop
   } = props;
   const currentPage = useMemo(() => {
@@ -145,7 +247,7 @@ function Pager(props) {
     }
     return page;
   }, [page, rowsPerPage, totalRecords]);
-  const handleChangeRowsPerPage = (event) => {
+  const handleChangeRowsPerPage = (event, _child) => {
     onRowsPerPageChange(parseInt(event.target.value, 10));
     onPageChange(0);
   };
@@ -155,12 +257,12 @@ function Pager(props) {
   const classes = pagerUtilityClasses();
   return /* @__PURE__ */ jsx(PagerRoot, {
     className: classes.root,
-    children: !isSkeleton ? /* @__PURE__ */ jsx(TablePagination, {
-      id: "TablePagination",
+    children: /* @__PURE__ */ jsx(CustomTablePagination, {
       rowsPerPageOptions,
-      component: "div",
       count: totalRecords,
       rowsPerPage,
+      classes,
+      labelRowsPerPage: labelRows,
       page: currentPage,
       onPageChange: handleChangePage,
       onRowsPerPageChange: handleChangeRowsPerPage,
@@ -169,57 +271,7 @@ function Pager(props) {
         to,
         count
       }) => `${from}-${to} ${labelOf} ${count}` : () => ``,
-      labelRowsPerPage: isDesktop ? labelRows : "",
       ActionsComponent: PagerActions
-    }) : /* @__PURE__ */ jsxs("div", {
-      className: classes.skeletonRoot,
-      children: [/* @__PURE__ */ jsxs("div", {
-        className: classes.skeletonRowsPerPage,
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: "40px",
-          height: "16px"
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: "20px",
-          height: "16px"
-        })]
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: "50px",
-        height: "16px"
-      }), /* @__PURE__ */ jsxs("div", {
-        className: classes.skeletonButtonContainer,
-        children: [/* @__PURE__ */ jsx("div", {
-          className: classes.skeletonIconButton,
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: classes.skeletonIconButton,
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: classes.skeletonIconButton,
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: classes.skeletonIconButton,
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "circular",
-            width: 20,
-            height: 20
-          })
-        })]
-      })]
     })
   });
 }

package/components/mui_extended/Pager/subcomponents/CustomTablePagination/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CustomTablePaginationProps } from './types';
+export declare const CustomTablePagination: (props: CustomTablePaginationProps) => import("react").JSX.Element;

package/components/mui_extended/Pager/subcomponents/CustomTablePagination/types.d.ts

@@ -0,0 +1,12 @@
+import { SelectChangeEvent, TablePaginationProps } from "@mui/material";
+import { Classes } from "../../classes/types";
+import { PagerActionsProps } from "../PagerActions/types";
+import { ReactNode } from "react";
+export declare type CustomTablePaginationProps = {
+    rowsPerPageOptions: number[];
+    onPageChange: (_event: unknown, newPage: number) => void;
+    labelRowsPerPage: string;
+    classes: Classes;
+    onRowsPerPageChange: (event: SelectChangeEvent<unknown>, child: ReactNode) => void;
+    ActionsComponent: React.ElementType<PagerActionsProps>;
+} & Omit<TablePaginationProps, 'onPageChange' | 'onRowsPerPageChange' | 'classes' | 'ActionsComponent'>;

package/components/mui_extended/Pager/{components → subcomponents}/PagerActions/types.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { Classes } from "../../classes/types";
 export interface PagerActionsProps {
     count: number;
     page: number;
     rowsPerPage: number;
     onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
+    classes: Classes;
 }

package/components/mui_extended/Tab/{index.c39a6681.js → index.0d5f96e6.js}

@@ -4,7 +4,7 @@ import { styled } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../vendor.f57d47a7.js";
+import { g as getNameDataTestId } from "../../../vendor.88ed58a5.js";
 import { jsx } from "react/jsx-runtime";
 const TabRoot = styled("div")(({
   theme

package/components/mui_extended/{index.d78bde19.js → index.f6a356b9.js}

@@ -1,23 +1,23 @@
 import "@mui/material";
 import "react";
 import "@m4l/core";
-import "../Icon/index.9fcd1476.js";
+import "../Icon/index.2414ff25.js";
 import "clsx";
 import "react/jsx-runtime";
-import "./IconButton/index.12f1a3c3.js";
+import "./IconButton/index.a318316e.js";
 import "@m4l/graphics";
-import "./Accordion/index.a6447bf8.js";
+import "./Accordion/index.42cef1c7.js";
 import "./Typography/index.443590d6.js";
 import "./Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import "./Button/index.4288f9fc.js";
+import "./Button/index.40af964e.js";
 import "./CheckBox.5f6c78b0.js";
 import "./Badge/index.cad260fe.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "./MenuActions/index.43a2e1ae.js";
+import "./MenuActions/index.f6bfdd40.js";
 import "./Popover/index.9f35d0eb.js";
-import "./Pager/index.82e89328.js";
-import "./Tab/index.c39a6681.js";
+import "./Pager/index.da26e9d4.js";
+import "./Tab/index.0d5f96e6.js";
 import "./Tooltip/index.5a795dcd.js";

package/contexts/ModalContext/{index.89805978.js → index.efc1135a.js}

@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { M as ModalDialog } from "../../components/ModalDialog/index.fbc4cd71.js";
+import { M as ModalDialog } from "../../components/ModalDialog/index.4dc1c8ed.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 const ModalContext = createContext(null);
 function ModalProvider({

package/contexts/RHFormContext/{index.fe175bab.js → index.b9266262.js}

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { styled } from "@mui/material/styles";
-import { S as ScrollBar } from "../../components/ScrollBar/index.bbe48f4d.js";
+import { S as ScrollBar } from "../../components/ScrollBar/index.d4410cb5.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { jsx } from "react/jsx-runtime";

package/hooks/useModal/{index.e1c5c31e.js → index.9b0cc3fe.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as ModalContext } from "../../contexts/ModalContext/index.89805978.js";
+import { M as ModalContext } from "../../contexts/ModalContext/index.efc1135a.js";
 function useModal() {
   const context = useContext(ModalContext);
   if (!context)