@m4l/components 9.1.90 → 9.1.91

package/components/Pager/Pager.d.ts

@@ -48,7 +48,7 @@ import { PagerProps } from './types';
  * ```
  * @author cesar - automatic
  * @createdAt 2025-01-15 17:01:04 - automatic
- * @updatedAt 2025-01-21 15:32:35 - automatic
+ * @updatedAt 2025-01-29 08:56:53 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function Pager(props: PagerProps): import("react/jsx-runtime").JSX.Element;

package/components/Pager/Pager.js

@@ -13,8 +13,8 @@ function Pager(props) {
     page = 0,
     onPageChange,
     onRowsPerPageChange,
-    labelRows = "Filas por página",
-    labelOf = "de",
+    labelRows,
+    labelOf,
     size = "medium"
   } = props;
   const totalPages = useMemo(() => Math.max(1, Math.ceil(totalRecords / rowsPerPage)), [totalRecords, rowsPerPage]);
@@ -24,9 +24,12 @@ function Pager(props) {
   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 memoizedLabelOf = useMemo(() => {
+    return labelOf ?? getLabel(PAGER_DICTIONARY.of);
+  }, [labelOf, getLabel]);
+  const memoizedLabelTotalRows = useMemo(() => {
+    return labelRows ?? getLabel(PAGER_DICTIONARY.total_rows);
+  }, [labelRows, getLabel]);
   const handleChangeRowsPerPage = (option) => {
     if (onRowsPerPageChange && option.value !== void 0) {
       onRowsPerPageChange(option.value);
@@ -47,11 +50,11 @@ function Pager(props) {
       rowsPerPageOptions,
       count: totalRecords,
       rowsPerPage,
-      labelRowsPerPage: labelRows,
       page: currentPage,
       onPageChange: handleChangePage,
       onRowsPerPageChange: handleChangeRowsPerPage,
-      labelDisplayedRows: () => formattedLabelDisplayedRows
+      labelOf: memoizedLabelOf,
+      labelTotalRows: memoizedLabelTotalRows
     }
   ) });
 }

package/components/Pager/dicctionary.d.ts

@@ -8,5 +8,6 @@ export declare const PAGER_DICTIONARY: {
     readonly page: "pager.page";
     readonly no_records: "pager.no_records";
     readonly total_rows: "pager.total_rows";
+    readonly rows: "pager.rows";
 };
 export declare function getPagerComponentsDictionary(): string[];

package/components/Pager/dicctionary.js

@@ -7,7 +7,8 @@ const PAGER_DICTIONARY = {
   of: "pager.of",
   page: "pager.page",
   no_records: "pager.no_records",
-  total_rows: "pager.total_rows"
+  total_rows: "pager.total_rows",
+  rows: "pager.rows"
 };
 function getPagerComponentsDictionary() {
   return ["pager"];

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

@@ -3,7 +3,7 @@ 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
+ * @updatedAt 2025-01-28 14:04:43 - automatic
  * @updatedUser cesar - automatic
  */
 export declare const CustomTablePagination: (props: CustomTablePaginationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -13,7 +13,9 @@ const CustomTablePagination = (props) => {
     rowsPerPageOptions = [10, 25, 50, 100],
     onRowsPerPageChange,
     onPageChange,
-    size
+    size,
+    labelOf,
+    labelTotalRows
   } = props;
   const [localRowsPerPage, setLocalRowsPerPage] = useState(rowsPerPage);
   const [localPage, setLocalPage] = useState(Math.max(0, page));
@@ -32,13 +34,17 @@ const CustomTablePagination = (props) => {
   const currentPage = useMemo(() => {
     return Math.max(0, Math.min(localPage, totalPages - 1));
   }, [localPage, totalPages]);
+  const memoizedLabelPage = useMemo(() => getLabel(PAGER_DICTIONARY.page), [getLabel]);
+  const memoizedLabelRows = useMemo(() => getLabel(PAGER_DICTIONARY.rows), [getLabel]);
+  const memoizedLabelRowsPerPage = useMemo(() => getLabel(PAGER_DICTIONARY.rows_per_page), [getLabel]);
+  const memoizedLabelNoRecords = useMemo(() => getLabel(PAGER_DICTIONARY.no_records), [getLabel]);
   const formattedLabelDisplayedRows = useMemo(() => {
     if (countTotal === 0) {
-      return `${getLabel(PAGER_DICTIONARY.no_records)}`;
+      return memoizedLabelNoRecords;
     }
     const displayedPage = currentPage === 1 ? 1 : currentPage + 1;
-    return `${getLabel(PAGER_DICTIONARY.page)} ${displayedPage} ${getLabel(PAGER_DICTIONARY.of)} ${totalPages}`;
-  }, [currentPage, totalPages, countTotal, getLabel]);
+    return `${memoizedLabelPage} ${displayedPage} ${labelOf} ${totalPages}`;
+  }, [currentPage, totalPages, countTotal, labelOf, memoizedLabelPage, memoizedLabelNoRecords]);
   const handleChangeRowsPerPage = (option) => {
     const selectedValue = Number(option.id);
     const newTotalPages = Math.ceil(countTotal / selectedValue);
@@ -46,7 +52,7 @@ const CustomTablePagination = (props) => {
     setLocalRowsPerPage(selectedValue);
     setLocalPage(newPage);
     if (onRowsPerPageChange) {
-      onRowsPerPageChange({ id: selectedValue, value: selectedValue, label: `${selectedValue} filas` });
+      onRowsPerPageChange({ id: selectedValue, value: selectedValue, label: `${selectedValue} ${memoizedLabelRows}` });
     }
     if (onPageChange) {
       onPageChange(null, newPage);
@@ -54,9 +60,9 @@ const CustomTablePagination = (props) => {
   };
   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__ */ jsx(TotalRowStyled, { skeletonWidth: 50, size, variant: "body", children: `${labelTotalRows}: ${countTotal}` }),
       /* @__PURE__ */ jsxs(LabelSelectContainerStyled, { children: [
-        /* @__PURE__ */ jsx(RowsPerPageStyled, { skeletonWidth: 50, size, variant: "body", children: `${getLabel(PAGER_DICTIONARY.rows_per_page)}:` }),
+        /* @__PURE__ */ jsx(RowsPerPageStyled, { skeletonWidth: 50, size, variant: "body", children: `${memoizedLabelRowsPerPage}:` }),
         /* @__PURE__ */ jsx(
           Select,
           {

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

@@ -1,9 +1,46 @@
 import { LabelDisplayedRowsArgs, TablePaginationProps } from '@mui/material';
 import { selectOption } from '../../types';
 export type CustomTablePaginationProps = {
+    /**
+     * Label for the rows per page select.
+     * @deprecated Use `slotProps.select` instead.
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     */
+    labelOf: string;
+    /**
+     * List of rows per page options.
+     * @author cesar - automatic
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     * @updatedAt 2025-01-28 14:04:43 - automatic
+     * @updatedUser cesar - automatic
+     */
     rowsPerPageOptions: number[];
     onPageChange: (_event: unknown, newPage: number) => void;
-    labelRowsPerPage: string;
+    /**
+     * Label rows per page.
+     * @deprecated Use `slotProps.select` instead.
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     */
+    labelRowsPerPage?: string;
+    /**
+     * Label total rows.
+     * @createdAt 2025-01-27 17:28:22 - automatic
+     */
+    labelTotalRows?: string;
+    /**
+     * Total number of rows.
+     * @author cesar - automatic
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     * @updatedAt 2025-01-28 14:04:43 - automatic
+     * @updatedUser cesar - automatic
+     */
     onRowsPerPageChange: (option: selectOption<number>) => void;
+    /**
+     * Labe displayed rows.
+     * @author cesar - automatic
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     * @updatedAt 2025-01-28 14:04:43 - automatic
+     * @updatedUser cesar - automatic
+     */
     labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => string;
 } & Omit<TablePaginationProps, 'onPageChange' | 'onRowsPerPageChange' | 'ActionsComponent' | 'labelDisplayedRows'>;

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

@@ -1,9 +1,9 @@
 import { PagerActionsProps } from './types';
 /**
- * TODO: Documentar
+ * PagerActions component is a subcomponent of the Pager component that allows the user to navigate between different pages.
  * @author cesar - automatic
  * @createdAt 2025-01-15 17:13:29 - automatic
- * @updatedAt 2025-01-21 14:06:55 - automatic
+ * @updatedAt 2025-01-27 08:17:21 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function PagerActions(props: PagerActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/Pager/types.d.ts

@@ -12,7 +12,20 @@ export interface PagerProps {
     page: number;
     onPageChange: (newPage: number) => void;
     onRowsPerPageChange: (newRowsPerPage: number) => void;
+    /**
+     * Label rows per page.
+     * @deprecated Use `slotProps.select` instead.
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     * @author cesar - automatic
+     * @updatedAt 2025-01-27 15:51:21 - automatic
+     * @updatedUser cesar - automatic
+     */
     labelRows?: string;
+    /**
+     * Label for the rows per page select.
+     * @deprecated Use `slotProps.select` instead.
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     */
     labelOf?: string;
     size?: Extract<Sizes, 'small' | 'medium'>;
 }

package/package.json

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