@m4l/components 9.1.79 → 9.1.81

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`
       }
     )