@m4l/components 9.1.80 → 9.1.82

package/components/DataGrid/dictionary.d.ts

@@ -2,7 +2,7 @@
  * TODO: Documentar
  * @author cesar - automatic
  * @createdAt 2024-11-24 17:06:31 - automatic
- * @updatedAt 2024-11-24 17:07:48 - automatic
+ * @updatedAt 2025-01-21 14:06:55 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function getDataGridComponentsDictionary(): string[];

package/components/DataGrid/dictionary.js

@@ -1,5 +1,5 @@
 import { g as getModalDialogComponentsDictionary } from "../mui_extended/Dialog/dictionary.js";
-import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/dicctionary.js";
+import { g as getPagerComponentsDictionary } from "../Pager/dicctionary.js";
 function getDataGridComponentsDictionary() {
   return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
 }

package/components/DataGrid/styles.js

@@ -6,6 +6,7 @@ const DataGridRoot = styled("div")(({ theme }) => ({
   padding: "0px",
   inset: "0px",
   overflow: "hidden",
+  container: "container / inline-size",
   ...theme.components?.M4LDataGrid?.styleOverrides || {}
 }));
 export {

package/components/DataGrid/subcomponents/Actions/index.d.ts

@@ -1,5 +1,9 @@
 import { InternalActionsProps } from './types';
 /**
  * TODO: Documentar
+ * @author cesar - automatic
+ * @createdAt 2025-01-15 17:01:04 - automatic
+ * @updatedAt 2025-01-21 15:33:55 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare function Actions(props: InternalActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Actions/index.js

@@ -1,19 +1,18 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { P as Pager } from "../../../mui_extended/Pager/index.js";
+import { P as Pager } from "../../../Pager/Pager.js";
 import { F as Filter } from "./subcomponents/Filter/index.js";
 import { S as Settings } from "./subcomponents/Settings/index.js";
 import { R as RowsCount } from "./subcomponents/RowsCount/index.js";
 import { D as Density } from "./subcomponents/Density/index.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
 import { useResponsiveContainerStore } from "@m4l/graphics";
-import { useModuleSkeleton, useModuleDictionary } from "@m4l/core";
+import { useModuleDictionary } from "@m4l/core";
 import { d as dictionary } from "../../dictionary.js";
 import { shallow } from "zustand/shallow";
 import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/index.js";
 function Actions(props) {
   const isXs = useResponsiveContainerStore((state) => state.isXs, shallow);
   const { rowHeights, classes } = useDataGrid();
-  const isSkeleton = useModuleSkeleton();
   const { getLabel } = useModuleDictionary();
   const {
     withRowsCount = true,
@@ -30,8 +29,6 @@ function Actions(props) {
       {
         ...pagerOptions,
         totalRecords: pagerOptions.totalRecords,
-        isSkeleton,
-        isXs,
         labelRows: getLabel(dictionary.LABEL_ROWS_PER_PAGE),
         labelOf: getLabel(dictionary.LABEL_OF)
       }

package/components/DataGrid/subcomponents/Actions/types.d.ts

@@ -1,4 +1,4 @@
-import { PagerProps } from '../../../mui_extended/Pager/types';
+import { PagerProps } from '../../../Pager/types';
 import { SettingsProps } from './subcomponents/Settings/types';
 export interface ActionsProps {
     withSettings?: boolean;

package/components/Pager/Pager.d.ts

@@ -0,0 +1,55 @@
+import { PagerProps } from './types';
+/**
+ * El componente `Pager` es un componente de paginación que permite navegar entre diferentes páginas
+ * y controlar la cantidad de filas mostradas por página en una tabla o lista de registros.
+ * ### Funcionalidades principales:
+ * - Permite cambiar la página actual mediante el evento `onPageChange`.
+ * - Ofrece un menú desplegable para seleccionar la cantidad de filas mostradas por página.
+ * - Muestra el total de registros y la página actual de forma descriptiva.
+ *
+ * ### Propiedades:
+ * - **`totalRecords`**: Número total de registros disponibles para paginar.
+ * - **`rowsPerPageOptions`**: Opciones disponibles para la cantidad de filas por página (e.g., [5, 10, 25]).
+ * - **`rowsPerPage`**: Cantidad actual de filas por página.
+ * - **`page`**: Página actualmente seleccionada (índice basado en cero).
+ * - **`onPageChange`**: Función que se invoca cuando el usuario cambia de página.
+ * - **`onRowsPerPageChange`**: Función que se invoca cuando el usuario selecciona una nueva cantidad de filas por página.
+ * - **`labelRows`**: Etiqueta para el selector de filas por página.
+ * - **`labelOf`**: Etiqueta utilizada entre la página actual y el total de páginas.
+ * - **`size`**: Tamaño del componente (`small` o `medium`).
+ *
+ * ### Dependencias:
+ * - **`useComponentSize:`** Hook para determinar el tamaño del componente basado en el entorno o configuración.
+ * @param {PagerProps} props - Propiedades del componente.
+ * @param {number} props.totalRecords - Número total de registros disponibles.
+ * @param {number[]} props.rowsPerPageOptions - Opciones de filas por página disponibles.
+ * @param {number} props.rowsPerPage - Cantidad actual de filas por página.
+ * @param {number} props.page - Página actualmente seleccionada.
+ * @param {Function} props.onPageChange - Función que se invoca cuando el usuario cambia de página.
+ * @param {Function} props.onRowsPerPageChange - Función que se invoca cuando el usuario cambia la cantidad de filas por página.
+ * @param {string} props.labelRows - Etiqueta para el selector de filas por página.
+ * @param {string} props.labelOf - Etiqueta para mostrar entre la página actual y el total de páginas.
+ * @param {'small' | 'medium'} props.size - Tamaño del componente.
+ * @returns {JSX.Element} Elemento JSX que representa el componente de paginación.
+ *
+ * ### Ejemplo de uso:
+ * ```tsx
+ * <Pager
+ *   totalRecords={100}
+ *   rowsPerPageOptions={[5, 10, 20]}
+ *   rowsPerPage={10}
+ *   page={0}
+ *   onPageChange={(newPage) => console.log('Nueva página:', newPage)}
+ *   onRowsPerPageChange={(newRows) => console.log('Filas por página:', newRows)}
+ *   labelRows="Filas por página"
+ *   labelOf="de"
+ *   size="medium"
+ * />
+ * ```
+ * @author cesar - automatic
+ * @createdAt 2025-01-15 17:01:04 - automatic
+ * @updatedAt 2025-01-21 15:32:35 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare function Pager(props: PagerProps): import("react/jsx-runtime").JSX.Element;
+export default Pager;

package/components/Pager/Pager.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { C as CustomTablePagination } from "./subcomponents/CustomTablePagination/CustomTablePagination.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import { useModuleDictionary } from "@m4l/core";
+import { P as PAGER_DICTIONARY } from "./dicctionary.js";
+import { P as PagerRootStyled } from "./slots/PagerSlots.js";
+function Pager(props) {
+  const {
+    totalRecords = 0,
+    rowsPerPageOptions = [5, 10, 25],
+    rowsPerPage = 25,
+    page = 0,
+    onPageChange,
+    onRowsPerPageChange,
+    labelRows = "Filas por página",
+    labelOf = "de",
+    size = "medium"
+  } = props;
+  const totalPages = useMemo(() => Math.max(1, Math.ceil(totalRecords / rowsPerPage)), [totalRecords, rowsPerPage]);
+  const { currentSize } = useComponentSize(size);
+  const { getLabel } = useModuleDictionary();
+  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
+  const currentPage = useMemo(() => {
+    return Math.max(0, Math.min(page, totalPages - 1));
+  }, [page, totalPages]);
+  const formattedLabelDisplayedRows = useMemo(() => {
+    return totalRecords === 0 ? `${getLabel(PAGER_DICTIONARY.no_records)}` : `${getLabel(PAGER_DICTIONARY.page)}  ${currentPage + 1} ${labelOf} ${totalPages}`;
+  }, [currentPage, totalPages, labelOf, totalRecords, getLabel]);
+  const handleChangeRowsPerPage = (option) => {
+    if (onRowsPerPageChange && option.value !== void 0) {
+      onRowsPerPageChange(option.value);
+    }
+    if (onPageChange) {
+      onPageChange(0);
+    }
+  };
+  const handleChangePage = (_event, newPage) => {
+    if (onPageChange) {
+      onPageChange(newPage);
+    }
+  };
+  return /* @__PURE__ */ jsx(PagerRootStyled, { size: normalizedSize, role: "Pager-root", children: /* @__PURE__ */ jsx(
+    CustomTablePagination,
+    {
+      size,
+      rowsPerPageOptions,
+      count: totalRecords,
+      rowsPerPage,
+      labelRowsPerPage: labelRows,
+      page: currentPage,
+      onPageChange: handleChangePage,
+      onRowsPerPageChange: handleChangeRowsPerPage,
+      labelDisplayedRows: () => formattedLabelDisplayedRows
+    }
+  ) });
+}
+export {
+  Pager as P
+};

package/components/Pager/Pager.styles.d.ts

@@ -0,0 +1,2 @@
+import { PagerStyles } from './types';
+export declare const pagerStyles: PagerStyles;

package/components/Pager/Pager.styles.js

@@ -0,0 +1,129 @@
+const CONTAINER_QUERY_NAME = "container";
+const pagerStyles = {
+  /**
+   * Root Pager Styles
+   * @author cesar - automatic
+   * @createdAt 2025-01-15 16:56:00 - automatic
+   * @updatedAt 2025-01-22 15:38:32 - automatic
+   * @updatedUser cesar - automatic
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "baseline",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    flexShrink: 0,
+    gap: theme.vars.size.baseSpacings.sp2,
+    [`@container ${CONTAINER_QUERY_NAME} (max-width: 400px)`]: {
+      overflowX: "auto",
+      whiteSpace: "nowrap",
+      flexWrap: "nowrap",
+      WebkitOverflowScrolling: "touch"
+    },
+    "& .M4LSelect-skeletonSelect": {
+      width: theme.vars.size.baseSpacings.sp14
+    },
+    "& .M4LTypography-skeleton": {
+      height: theme.vars.size.baseSpacings.sp8
+    }
+  }),
+  /**
+   * Rows Per Page Container Styles
+   * @author cesar - automatic
+   * @createdAt 2025-01-16 15:54:48 - automatic
+   * @updatedAt 2025-01-22 15:38:32 - automatic
+   * @updatedUser cesar - automatic
+   */
+  rowsPerPageContainer: () => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }),
+  /**
+   * Label Select Container Styles
+   * @author cesar - automatic
+   * @createdAt 2025-01-16 16:41:03 - automatic
+   * @updatedAt 2025-01-22 15:38:32 - automatic
+   * @updatedUser cesar - automatic
+   */
+  labelSelectContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Actions Container Styles
+   * @author cesar - automatic
+   * @createdAt 2025-01-16 16:22:21 - automatic
+   * @updatedAt 2025-01-22 15:38:32 - automatic
+   * @updatedUser cesar - automatic
+   */
+  actionsContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Pager Icons Container Styles
+   * @author cesar - automatic
+   * @createdAt 2025-01-16 16:41:03 - automatic
+   * @updatedAt 2025-01-22 15:38:32 - automatic
+   * @updatedUser cesar - automatic
+   */
+  pagerIcons: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Total Filas elipsis Styles
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 08:53:24 - automatic
+   * @updatedAt 2025-01-22 15:38:32 - automatic
+   * @updatedUser cesar - automatic
+   */
+  totalRow: () => ({
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    [`@container ${CONTAINER_QUERY_NAME} (max-width: 400px)`]: {
+      display: "none"
+    }
+  }),
+  /**
+   * Rows Per Page Styles
+   * @author cesar - automatic
+   * @createdAt 2025-01-22 12:52:40 - automatic
+   * @updatedAt 2025-01-22 15:38:32 - automatic
+   * @updatedUser cesar - automatic
+   */
+  rowsPerPage: () => ({
+    [`@container ${CONTAINER_QUERY_NAME} (max-width: 400px)`]: {
+      display: "none"
+    }
+  }),
+  /**
+   * Page Counter Styles
+   * @author cesar - automatic
+   * @createdAt 2025-01-22 12:52:40 - automatic
+   * @updatedAt 2025-01-22 15:38:32 - automatic
+   * @updatedUser cesar - automatic
+   */
+  pageCounter: () => ({
+    [`& @container ${CONTAINER_QUERY_NAME} (max-width: 200px)`]: {
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      maxWidth: "100%",
+      display: "inline-block"
+    }
+  })
+};
+export {
+  pagerStyles as p
+};

package/components/Pager/constants.d.ts

@@ -0,0 +1 @@
+export declare const PAGER_KEY_COMPONENT = "M4LPager";

package/components/Pager/constants.js

@@ -0,0 +1,4 @@
+const PAGER_KEY_COMPONENT = "M4LPager";
+export {
+  PAGER_KEY_COMPONENT as P
+};

package/components/Pager/dicctionary.d.ts

@@ -0,0 +1,12 @@
+export declare const PAGER_DICTIONARY: {
+    readonly rows_per_page: "pager.rows_per_page";
+    readonly first: "pager.first";
+    readonly previous: "pager.previous";
+    readonly before: "pager.before";
+    readonly last: "pager.last";
+    readonly of: "pager.of";
+    readonly page: "pager.page";
+    readonly no_records: "pager.no_records";
+    readonly total_rows: "pager.total_rows";
+};
+export declare function getPagerComponentsDictionary(): string[];

package/components/Pager/dicctionary.js

@@ -0,0 +1,18 @@
+const PAGER_DICTIONARY = {
+  rows_per_page: "pager.rows_per_page",
+  first: "pager.first",
+  previous: "pager.previous",
+  before: "pager.before",
+  last: "pager.last",
+  of: "pager.of",
+  page: "pager.page",
+  no_records: "pager.no_records",
+  total_rows: "pager.total_rows"
+};
+function getPagerComponentsDictionary() {
+  return ["pager"];
+}
+export {
+  PAGER_DICTIONARY as P,
+  getPagerComponentsDictionary as g
+};

package/components/Pager/slots/PagerEnum.d.ts

@@ -0,0 +1,10 @@
+export declare enum PagerSlots {
+    root = "root",
+    rowsPerPageContainer = "rowsPerPageContainer",
+    actionsContainer = "actionsContainer",
+    labelSelectContainer = "labelSelectContainer",
+    pagerIcons = "pagerIcons",
+    totalRow = "totalRow",
+    rowsPerPage = "rowsPerPage",
+    pageCounter = "pageCounter"
+}

package/components/Pager/slots/PagerEnum.js

@@ -0,0 +1,14 @@
+var PagerSlots = /* @__PURE__ */ ((PagerSlots2) => {
+  PagerSlots2["root"] = "root";
+  PagerSlots2["rowsPerPageContainer"] = "rowsPerPageContainer";
+  PagerSlots2["actionsContainer"] = "actionsContainer";
+  PagerSlots2["labelSelectContainer"] = "labelSelectContainer";
+  PagerSlots2["pagerIcons"] = "pagerIcons";
+  PagerSlots2["totalRow"] = "totalRow";
+  PagerSlots2["rowsPerPage"] = "rowsPerPage";
+  PagerSlots2["pageCounter"] = "pageCounter";
+  return PagerSlots2;
+})(PagerSlots || {});
+export {
+  PagerSlots as P
+};

package/components/Pager/slots/PagerSlots.d.ts

@@ -0,0 +1,7 @@
+export declare const PagerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const ActionsContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LabelSelectContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const PagerIconsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const TotalRowStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const RowsPerPageStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const PageCounterStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/Pager/slots/PagerSlots.js

@@ -0,0 +1,42 @@
+import { styled } from "@mui/material/styles";
+import { P as PAGER_KEY_COMPONENT } from "../constants.js";
+import { p as pagerStyles } from "../Pager.styles.js";
+import { P as PagerSlots } from "./PagerEnum.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+const PagerRootStyled = styled("div", {
+  name: PAGER_KEY_COMPONENT,
+  slot: PagerSlots.root
+})(pagerStyles?.root);
+const ActionsContainerStyled = styled("div", {
+  name: PAGER_KEY_COMPONENT,
+  slot: PagerSlots.actionsContainer
+})(pagerStyles?.actionsContainer);
+const LabelSelectContainerStyled = styled("div", {
+  name: PAGER_KEY_COMPONENT,
+  slot: PagerSlots.labelSelectContainer
+})(pagerStyles?.labelSelectContainer);
+const PagerIconsStyled = styled("div", {
+  name: PAGER_KEY_COMPONENT,
+  slot: PagerSlots.pagerIcons
+})(pagerStyles?.pagerIcons);
+const TotalRowStyled = styled(Typography, {
+  name: PAGER_KEY_COMPONENT,
+  slot: PagerSlots.totalRow
+})(pagerStyles?.totalRow);
+const RowsPerPageStyled = styled(Typography, {
+  name: PAGER_KEY_COMPONENT,
+  slot: PagerSlots.rowsPerPage
+})(pagerStyles?.rowsPerPage);
+const PageCounterStyled = styled(Typography, {
+  name: PAGER_KEY_COMPONENT,
+  slot: PagerSlots.pageCounter
+})(pagerStyles?.pageCounter);
+export {
+  ActionsContainerStyled as A,
+  LabelSelectContainerStyled as L,
+  PagerRootStyled as P,
+  RowsPerPageStyled as R,
+  TotalRowStyled as T,
+  PageCounterStyled as a,
+  PagerIconsStyled as b
+};

package/components/Pager/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PagerEnum';
+export * from './PagerSlots';

package/components/Pager/slots/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,9 @@
+import { CustomTablePaginationProps } from './types';
+/**
+ * CustomTablePagination component
+ * @author cesar - automatic
+ * @createdAt 2025-01-15 17:13:29 - automatic
+ * @updatedAt 2025-01-22 12:52:40 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare const CustomTablePagination: (props: CustomTablePaginationProps) => import("react/jsx-runtime").JSX.Element;

package/components/Pager/subcomponents/CustomTablePagination/CustomTablePagination.js

@@ -0,0 +1,92 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { P as PagerActions } from "../PagerActions/PagerActions.js";
+import { useState, useMemo, useEffect } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { P as PAGER_DICTIONARY } from "../../dicctionary.js";
+import { T as TotalRowStyled, L as LabelSelectContainerStyled, R as RowsPerPageStyled, A as ActionsContainerStyled, a as PageCounterStyled } from "../../slots/PagerSlots.js";
+import { S as Select } from "../../../mui_extended/Select/Select.js";
+const CustomTablePagination = (props) => {
+  const {
+    count: countTotal,
+    page,
+    rowsPerPage = 25,
+    rowsPerPageOptions = [10, 25, 50, 100],
+    onRowsPerPageChange,
+    onPageChange,
+    size
+  } = props;
+  const [localRowsPerPage, setLocalRowsPerPage] = useState(rowsPerPage);
+  const [localPage, setLocalPage] = useState(Math.max(0, page));
+  const { getLabel } = useModuleDictionary();
+  const totalPages = useMemo(() => {
+    return Math.max(1, Math.ceil(countTotal / localRowsPerPage));
+  }, [countTotal, localRowsPerPage]);
+  useEffect(() => {
+    setLocalPage(Math.max(0, Math.min(page, totalPages - 1)));
+  }, [page, totalPages]);
+  useEffect(() => {
+    if (rowsPerPageOptions.includes(rowsPerPage)) {
+      setLocalRowsPerPage(rowsPerPage);
+    }
+  }, [rowsPerPage, rowsPerPageOptions]);
+  const currentPage = useMemo(() => {
+    return Math.max(0, Math.min(localPage, totalPages - 1));
+  }, [localPage, totalPages]);
+  const formattedLabelDisplayedRows = useMemo(() => {
+    if (countTotal === 0) {
+      return `${getLabel(PAGER_DICTIONARY.no_records)}`;
+    }
+    const displayedPage = currentPage === 1 ? 1 : currentPage + 1;
+    return `${getLabel(PAGER_DICTIONARY.page)} ${displayedPage} ${getLabel(PAGER_DICTIONARY.of)} ${totalPages}`;
+  }, [currentPage, totalPages, countTotal, getLabel]);
+  const handleChangeRowsPerPage = (option) => {
+    const selectedValue = Number(option.id);
+    const newTotalPages = Math.ceil(countTotal / selectedValue);
+    const newPage = Math.min(currentPage, newTotalPages - 1);
+    setLocalRowsPerPage(selectedValue);
+    setLocalPage(newPage);
+    if (onRowsPerPageChange) {
+      onRowsPerPageChange({ id: selectedValue, value: selectedValue, label: `${selectedValue} filas` });
+    }
+    if (onPageChange) {
+      onPageChange(null, newPage);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    rowsPerPageOptions?.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(TotalRowStyled, { skeletonWidth: 50, size, variant: "body", children: `${getLabel(PAGER_DICTIONARY.total_rows)}: ${countTotal}` }),
+      /* @__PURE__ */ jsxs(LabelSelectContainerStyled, { children: [
+        /* @__PURE__ */ jsx(RowsPerPageStyled, { skeletonWidth: 50, size, variant: "body", children: `${getLabel(PAGER_DICTIONARY.rows_per_page)}:` }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            size,
+            value: rowsPerPageOptions.includes(localRowsPerPage) ? localRowsPerPage.toString() : rowsPerPageOptions[0].toString(),
+            onChange: (option) => handleChangeRowsPerPage(option),
+            options: rowsPerPageOptions.map((item) => ({
+              id: item.toString(),
+              value: item.toString(),
+              label: item.toString()
+            }))
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs(ActionsContainerStyled, { children: [
+      /* @__PURE__ */ jsx(PageCounterStyled, { skeletonWidth: 50, size, variant: "body", children: formattedLabelDisplayedRows }),
+      /* @__PURE__ */ jsx(
+        PagerActions,
+        {
+          size,
+          count: countTotal,
+          page: currentPage,
+          rowsPerPage: localRowsPerPage,
+          onPageChange: (_, newPage) => setLocalPage(newPage)
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  CustomTablePagination as C
+};

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

@@ -1,10 +1,9 @@
-import { LabelDisplayedRowsArgs, SelectChangeEvent, TablePaginationProps } from '@mui/material';
-import { Classes } from '../../classes/types';
+import { LabelDisplayedRowsArgs, TablePaginationProps } from '@mui/material';
+import { selectOption } from '../../types';
 export type CustomTablePaginationProps = {
     rowsPerPageOptions: number[];
     onPageChange: (_event: unknown, newPage: number) => void;
     labelRowsPerPage: string;
-    classes: Classes;
-    onRowsPerPageChange: (event: SelectChangeEvent<unknown>) => void;
+    onRowsPerPageChange: (option: selectOption<number>) => void;
     labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => string;
-} & Omit<TablePaginationProps, 'onPageChange' | 'onRowsPerPageChange' | 'classes' | 'ActionsComponent' | 'labelDisplayedRows'>;
+} & Omit<TablePaginationProps, 'onPageChange' | 'onRowsPerPageChange' | 'ActionsComponent' | 'labelDisplayedRows'>;

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

@@ -1,5 +1,9 @@
 import { PagerActionsProps } from './types';
 /**
  * TODO: Documentar
+ * @author cesar - automatic
+ * @createdAt 2025-01-15 17:13:29 - automatic
+ * @updatedAt 2025-01-21 14:06:55 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare function PagerActions(props: PagerActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/{mui_extended/Pager/subcomponents/PagerActions/index.js → Pager/subcomponents/PagerActions/PagerActions.js}

@@ -1,8 +1,16 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { I as IconButton } from "../../../IconButton/IconButton.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 import { useEnvironment } from "@m4l/core";
+import { b as PagerIconsStyled } from "../../slots/PagerSlots.js";
 function PagerActions(props) {
-  const { count, page, rowsPerPage, onPageChange, classes } = props;
+  const {
+    size,
+    count,
+    page,
+    rowsPerPage,
+    onPageChange
+    //classes
+  } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const handleFirstPageButtonClick = (event) => {
     onPageChange(event, 0);
@@ -16,48 +24,48 @@ function PagerActions(props) {
   const handleLastPageButtonClick = (event) => {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
-  return /* @__PURE__ */ jsxs("div", { className: classes.pagerActions, children: [
+  return /* @__PURE__ */ jsxs(PagerIconsStyled, { children: [
     /* @__PURE__ */ jsx(
       IconButton,
       {
+        size,
         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,
       {
+        size,
         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,
       {
+        size,
         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,
       {
+        size,
         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`
       }
     )

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

@@ -1,8 +1,8 @@
-import { Classes } from '../../classes/types';
+import { Sizes } from '@m4l/styles';
 export interface PagerActionsProps {
     count: number;
     page: number;
     rowsPerPage: number;
     onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
-    classes: Classes;
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }

package/components/Pager/tests/Pager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Pager/types.d.ts

@@ -0,0 +1,25 @@
+import { Theme } from '@mui/material';
+import { PAGER_KEY_COMPONENT } from './constants';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { PagerSlots } from './slots/PagerEnum';
+import { Sizes } from '@m4l/styles';
+export type PagerType = keyof typeof PagerSlots;
+export interface PagerProps {
+    records: number;
+    totalRecords: number;
+    rowsPerPageOptions?: number[];
+    rowsPerPage?: number;
+    page: number;
+    onPageChange: (newPage: number) => void;
+    onRowsPerPageChange: (newRowsPerPage: number) => void;
+    labelRows?: string;
+    labelOf?: string;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+export type selectOption<T = unknown> = {
+    id: T;
+    label: string;
+    value?: T;
+    startAdornment?: React.ReactNode;
+};
+export type PagerStyles = OverridesStyleRules<PagerType, typeof PAGER_KEY_COMPONENT, Theme>;

package/components/ToastContainer/ToastContainer.js

@@ -1,15 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { ToastContainer as ToastContainer$1 } from "react-toastify";
 import { T as TOAST_KEY_COMPONENT, D as DEFAULT_CLOSE_TIME } from "./constants.js";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import "react-toastify/dist/ReactToastify.min.css";
-import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { R as RootStyled } from "./slots/toastContainerSlots.js";
 import { T as ToastContainerSlots } from "./slots/ToastContainerEnum.js";
 const ToastContainer = (props) => {
   const { children, fixed = true, dataTestId, ...restProps } = props;
   const ownerState = { fixed };
-  return /* @__PURE__ */ jsx(AppearanceComponentProvider, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     RootStyled,
     {
       ownerState,
@@ -29,7 +28,7 @@ const ToastContainer = (props) => {
         children
       ]
     }
-  ) });
+  );
 };
 export {
   ToastContainer as T

package/components/hook-form/RHFSelect/slots/RHFSlots.js

@@ -3,8 +3,8 @@ import { a as RHFSELECT_COMPONENT_KEY } from "../constants.js";
 import { R as RHFSelectEnum } from "./RHFSelectEnum.js";
 import { r as rhfSelectStyles } from "../RHFSelect.styles.js";
 import { L as Label } from "../../../Label/Label.js";
-import { S as Select } from "../../../mui_extended/Select/Select.js";
 import { H as HelperError } from "../../../HelperError/HelperError.js";
+import { S as Select } from "../../../mui_extended/Select/Select.js";
 const RootStyled = styled("div", {
   name: RHFSELECT_COMPONENT_KEY,
   slot: RHFSelectEnum.root

package/components/mui_extended/Select/Select.styles.js

@@ -5,8 +5,8 @@ const selectStyles = {
    * Estilos para el componente Select
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 10:30:26 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedUser cesar - automatic
    */
   root: ({ theme, ownerState }) => ({
     [`&.${SELECT_CLASSES.root}`]: {
@@ -67,6 +67,13 @@ const selectStyles = {
       "&:focus-within": {
         borderColor: ownerState.paletteColor?.focus
       },
+      '&[aria-hidden="true"]': {
+        pointerEvents: "none"
+      },
+      "&[inert]": {
+        pointerEvents: "none",
+        opacity: 0.5
+      },
       ...ownerState.error && {
         borderColor: ownerState.paletteColor?.enabled,
         "&:hover": {
@@ -100,8 +107,8 @@ const selectStyles = {
    * @returns {object} The styles for the render option container
    * @author SebastianM - automatic
    * @createdAt 2024-12-18 15:11:13 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedUser cesar - automatic
    */
   renderValueContainer: ({ theme }) => ({
     display: "flex",
@@ -116,8 +123,8 @@ const selectStyles = {
    * Styles for the label option
    * @author SebastianM - automatic
    * @createdAt 2024-12-23 10:47:53 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedUser cesar - automatic
    */
   labelOption: ({ theme }) => ({
     paddingLeft: theme.vars.size.baseSpacings.sp1,
@@ -128,8 +135,8 @@ const selectStyles = {
    * @returns {object} The styles for the label placeholder
    * @author SebastianM - automatic
    * @createdAt 2024-12-26 14:16:33 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedUser cesar - automatic
    */
   labelPlaceholer: ({ theme }) => ({
     paddingLeft: theme.vars.size.baseSpacings.sp1
@@ -158,8 +165,8 @@ const selectStyles = {
    * Styles for the skeleton select component
    * @author SebastianM - automatic
    * @createdAt 2024-12-17 15:54:22 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedUser cesar - automatic
    */
   skeletonSelect: ({ theme, ownerState }) => ({
     width: "100%",

package/components/mui_extended/index.d.ts

@@ -19,9 +19,9 @@ export * from './Skeleton';
 export * from './Stack';
 export * from './Tabs';
 export * from './TabContent';
-export { Pager } from './Pager';
-export type { PagerProps } from './Pager/types';
-export { getPagerComponentsDictionary } from './Pager/dicctionary';
+export { Pager } from '../Pager/Pager';
+export type { PagerProps } from '../Pager/types';
+export { getPagerComponentsDictionary } from '../Pager/dicctionary';
 export { Tab } from './Tab/Tab';
 export * from './TabContext';
 export * from './Typography/Typography';

package/index.js

@@ -157,8 +157,8 @@ import { B as B5 } from "./components/mui_extended/Badge/Badge.js";
 import { L as L9 } from "./components/mui_extended/LinearProgress/index.js";
 import { L as L10 } from "./components/mui_extended/LinkWithRoute/index.js";
 import { L as L11 } from "./components/mui_extended/LoadingButton/LoadingButton.js";
-import { P as P14 } from "./components/mui_extended/Pager/index.js";
-import { g as g25 } from "./components/mui_extended/Pager/dicctionary.js";
+import { P as P14 } from "./components/Pager/Pager.js";
+import { g as g25 } from "./components/Pager/dicctionary.js";
 import { T as T6 } from "./components/mui_extended/Tab/Tab.js";
 import { T as T7 } from "./components/mui_extended/Tooltip/Tooltip.js";
 import { I as I6 } from "./components/mui_extended/IconButton/IconButton.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.80",
+  "version": "9.1.82",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

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

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

package/components/mui_extended/Pager/classes/constants.js

@@ -1,4 +0,0 @@
-const componentName = "M4LPager";
-export {
-  componentName as c
-};

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

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

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

@@ -1,55 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root",
-  "labelRowsPerPageContainer",
-  "labelRowsPager",
-  "select",
-  "selectMenuItem",
-  "selectMenuPopover",
-  "labelDisplayRows",
-  "pagerActions",
-  "customTablePaginationRoot",
-  "skeletonRoot",
-  "skeletonRowsPerPage",
-  "skeletonButtonContainer",
-  "skeletonIconButton",
-  "actionIconFirstPage",
-  "actionIconPrevious",
-  "actionIconNextPage",
-  "actionIconLastPage"
-  /* states or variants of elements */
-]);
-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
-  };
-};
-export {
-  pagerUtilityClasses as p
-};

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

@@ -1,18 +0,0 @@
-import { pagerUtilityClasses } from '.';
-export interface PagerClassesType {
-    root: 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 type PagerClassesKey = keyof PagerClassesType;
-export type Classes = ReturnType<typeof pagerUtilityClasses>;

package/components/mui_extended/Pager/dicctionary.d.ts

@@ -1,3 +0,0 @@
-import { Dictionary } from '@m4l/core';
-export declare function getPagerComponentsDictionary(): string[];
-export declare const defaultPagerDictionary: Dictionary;

package/components/mui_extended/Pager/dicctionary.js

@@ -1,6 +0,0 @@
-function getPagerComponentsDictionary() {
-  return ["pager"];
-}
-export {
-  getPagerComponentsDictionary as g
-};

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

@@ -1,6 +0,0 @@
-import { PagerProps } from './types';
-/**
- * TODO: Documentar
- */
-export declare function Pager(props: PagerProps): import("react/jsx-runtime").JSX.Element;
-export default Pager;

package/components/mui_extended/Pager/index.js

@@ -1,49 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { P as PagerRoot } from "./styles.js";
-import { p as pagerUtilityClasses } from "./classes/index.js";
-import { C as CustomTablePagination } from "./subcomponents/CustomTablePagination/index.js";
-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}` : () => ``
-    }
-  ) });
-}
-export {
-  Pager as P
-};

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

@@ -1 +0,0 @@
-export declare const PagerRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/mui_extended/Pager/styles.js

@@ -1,7 +0,0 @@
-import { styled } from "@mui/material/styles";
-const PagerRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LPager?.styleOverrides || {}
-}));
-export {
-  PagerRoot as P
-};

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

@@ -1,5 +0,0 @@
-import { CustomTablePaginationProps } from './types';
-/**
- * TODO: Documentar
- */
-export declare const CustomTablePagination: (props: CustomTablePaginationProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Pager/subcomponents/CustomTablePagination/index.js

@@ -1,96 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useTheme, Select, InputBase, MenuItem } from "@mui/material";
-import { P as PagerActions } from "../PagerActions/index.js";
-import { useResponsiveContainerStore } from "@m4l/graphics";
-import { shallow } from "zustand/shallow";
-import { useEnvironment } from "@m4l/core";
-import { T as Typography } from "../../../Typography/Typography.js";
-import { I as Icon } from "../../../../Icon/Icon.js";
-const CustomTablePagination = (props) => {
-  const {
-    count: countTotal,
-    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
-  }) {
-    return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  }
-  const getLabelDisplayedRowsTo = () => {
-    if (countTotal === -1) {
-      return (page + 1) * rowsPerPage;
-    }
-    return rowsPerPage === -1 ? countTotal : Math.min(countTotal, (page + 1) * rowsPerPage);
-  };
-  const CustomIconComponent = (CustomIconComponentProps) => /* @__PURE__ */ jsx(
-    Icon,
-    {
-      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/chevronDown.svg`,
-      ...CustomIconComponentProps
-    }
-  );
-  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: countTotal === 0 ? 0 : page * rowsPerPage + 1,
-      to: getLabelDisplayedRowsTo(),
-      count: countTotal === -1 ? -1 : countTotal,
-      page
-    }) }),
-    /* @__PURE__ */ jsx(
-      PagerActions,
-      {
-        count: countTotal,
-        page,
-        rowsPerPage,
-        onPageChange,
-        classes
-      }
-    )
-  ] });
-};
-export {
-  CustomTablePagination as C
-};

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

@@ -1,13 +0,0 @@
-export interface PagerProps {
-    records: number;
-    totalRecords: number;
-    rowsPerPageOptions?: number[];
-    rowsPerPage?: number;
-    page: number;
-    onPageChange: (newPage: number) => void;
-    onRowsPerPageChange: (newRowsPerPage: number) => void;
-    labelRows?: string;
-    labelOf?: string;
-    isSkeleton?: boolean;
-    isXs?: boolean;
-}