tycho-components 0.19.0 → 0.19.1

package/dist/AppPagination/AppPagination.d.ts

@@ -5,9 +5,8 @@ type Props<TData> = {
     pagination: PaginationState;
     setPagination: (p: PaginationState) => void;
     hideItensPage?: boolean;
-    hidePageTotal?: boolean;
     numItens?: number[];
     size?: 'medium' | 'small';
 };
-export default function AppPagination<TData>({ totalElements, pagination, setPagination, hideItensPage, hidePageTotal, numItens, size, }: Props<TData>): import("react/jsx-runtime").JSX.Element;
+export default function AppPagination<TData>({ totalElements, pagination, setPagination, hideItensPage, numItens, size, }: Props<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppPagination/AppPagination.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem, Select } from '@mui/material';
-import { Trans, useTranslation } from 'react-i18next';
 import classNames from 'classnames';
+import { Trans, useTranslation } from 'react-i18next';
 import { IconButton } from 'tycho-storybook';
 import './styles.scss';
-export default function AppPagination({ totalElements, pagination, setPagination, hideItensPage, hidePageTotal, numItens = [10, 25, 50], size = 'medium', }) {
+export default function AppPagination({ totalElements, pagination, setPagination, hideItensPage, numItens = [10, 25, 50], size = 'medium', }) {
     const { t } = useTranslation('common');
     const numPages = Math.ceil(totalElements / pagination.pageSize);
     const currentPage = pagination.pageIndex + 1;
@@ -18,11 +18,15 @@ export default function AppPagination({ totalElements, pagination, setPagination
     };
     return (_jsxs("div", { className: classNames('app-table-pagination', {
             small: size === 'small',
-        }), children: [!hideItensPage && (_jsxs("div", { className: "itens-page", children: [_jsx("span", { children: t('table.label.rows-page') }), _jsx(Select, { value: pagination.pageSize, onChange: (e) => setPageSize(e.target.value), MenuProps: menuProps, size: size === 'small' ? 'small' : 'medium', children: numItens.map((size) => (_jsx(MenuItem, { value: size, children: size }, size))) })] })), _jsx("div", { className: "itens-total", children: _jsx("span", { children: _jsx(Trans, { t: t, i18nKey: "table.label.items", values: {
-                            first: getFirstElementNumber(),
-                            last: getLastElementNumber(),
-                            total: totalElements,
-                        } }) }) }), !hidePageTotal && (_jsxs("div", { className: "pages-total", children: [_jsx(Select, { value: currentPage, onChange: (e) => setPageIndex(e.target.value - 1), MenuProps: menuProps, size: size === 'small' ? 'small' : 'medium', children: Array.from({ length: numPages }, (_, index) => (_jsx(MenuItem, { value: index + 1, children: index + 1 }, index + 1))) }), _jsx("span", { children: _jsx(Trans, { t: t, i18nKey: "table.label.pages", values: { value: numPages } }) })] })), _jsxs("div", { className: "pages-navigation", children: [_jsx(IconButton, { size: size, mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex - 1), disabled: pagination.pageIndex === 0, name: "chevron_backward" }), _jsx(IconButton, { size: size, mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex + 1), disabled: pagination.pageIndex >= numPages - 1, name: "chevron_forward" })] })] }));
+        }), children: [_jsxs("div", { className: "itens-container", children: [!hideItensPage && (_jsxs("div", { className: "itens-page", children: [_jsx("span", { children: t('table.label.rows-page') }), _jsx(Select, { value: pagination.pageSize, onChange: (e) => setPageSize(e.target.value), MenuProps: menuProps, size: size === 'small' ? 'small' : 'medium', children: numItens.map((size) => (_jsx(MenuItem, { value: size, children: size }, size))) })] })), _jsx("div", { className: "itens-total", children: _jsx("span", { children: _jsx(Trans, { t: t, i18nKey: "table.label.items", values: {
+                                    first: getFirstElementNumber(),
+                                    last: getLastElementNumber(),
+                                    total: totalElements,
+                                } }) }) })] }), _jsxs("div", { className: "pages-navigation", children: [_jsx(IconButton, { size: size, mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex - 1), disabled: pagination.pageIndex === 0, name: "chevron_backward" }), _jsx("div", { className: "pages-total", children: Array.from({ length: numPages }, (_, index) => {
+                            const pageNum = index + 1;
+                            const isActive = pageNum === currentPage;
+                            return (_jsx("button", { type: "button", className: classNames('page-number', { active: isActive }), onClick: () => setPageIndex(index), "aria-current": isActive ? 'page' : undefined, children: pageNum }, pageNum));
+                        }) }), _jsx(IconButton, { size: size, mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex + 1), disabled: pagination.pageIndex >= numPages - 1, name: "chevron_forward" })] })] }));
 }
 const menuProps = {
     PaperProps: {

package/dist/AppPagination/styles.scss

@@ -1,28 +1,79 @@
 .app-table-pagination {
   display: flex;
-  justify-content: right;
   padding: var(--spacing-150) var(--spacing-100);
   border-top: 1px solid var(--border-subtle-2);
 
-  .itens-page {
+  .itens-container {
     display: flex;
     align-items: center;
-    margin-right: 16px;
     gap: 16px;
-  }
 
-  .itens-total {
-    display: flex;
-    align-items: center;
-    margin-right: auto;
+    .itens-page {
+      display: flex;
+      align-items: center;
+      margin-right: 16px;
+      gap: 16px;
+    }
+
+    .itens-total {
+      display: flex;
+      align-items: center;
+      margin-right: auto;
+    }
   }
 
   .pages-total {
     display: flex;
     align-items: center;
+    gap: 4px;
+    flex-wrap: nowrap;
+    width: 200px;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 2px;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--border-subtle-2);
+      border-radius: 3px;
+    }
+
+    .page-number {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 36px;
+      height: 40px;
+      padding: 0 var(--spacing-50);
+      margin: 0;
+      border: none;
+      border-radius: 0;
+      font-family: 'Work Sans', sans-serif;
+      @include button-small;
+      color: var(--text-on-color-dark);
+      background-color: var(--button-secondary-default);
+      cursor: pointer;
+
+      &:hover:not(.active) {
+        filter: brightness(1.05);
+      }
+
+      &.active {
+        background-color: var(--button-primary-default);
+        color: var(--text-on-color-light);
+        cursor: default;
+      }
 
-    > span {
-      padding: var(--spacing-100);
+      &:focus-visible {
+        outline: 2px solid var(--border-focus);
+        outline-offset: 2px;
+      }
     }
   }
 
@@ -30,11 +81,12 @@
     display: flex;
     align-items: center;
     gap: 4px;
+    margin-left: auto;
   }
 
   .MuiInputBase-root {
     border-radius: 0px;
-    font-family: "Work Sans" !important;
+    font-family: 'Work Sans' !important;
 
     > .MuiSelect-select {
       display: flex;
@@ -68,8 +120,11 @@
     }
 
     .pages-total {
-      > span {
-        padding: 0px 4px;
+      width: 160px;
+
+      .page-number {
+        min-width: 28px;
+        height: 32px;
       }
     }
 
@@ -84,3 +139,15 @@
     }
   }
 }
+
+@media (max-width: 768px) {
+  .app-table-pagination {
+    flex-direction: column;
+
+    .pages-navigation {
+      justify-content: center;
+      margin-top: 16px;
+      margin-right: auto;
+    }
+  }
+}

package/dist/AppTable/AppTable.d.ts

@@ -1,6 +1,6 @@
-import { PaginationState, SortingState } from "@tanstack/react-table";
-import "./styles.scss";
-import { AppPage } from "./types/AppPage";
+import { PaginationState, SortingState } from '@tanstack/react-table';
+import './styles.scss';
+import { AppPage } from './types/AppPage';
 type Props = {
     columns: any;
     data: AppPage<any>;

package/dist/AppTable/AppTable.js

@@ -1,16 +1,16 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import cx from "classnames";
-import { ThemeProvider } from "@emotion/react";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
-import AppPagination from "../AppPagination";
-import { tableTheme } from "./AppTableTheme";
-import "./styles.scss";
+import { ThemeProvider } from '@emotion/react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import cx from 'classnames';
+import AppPagination from '../AppPagination';
+import { tableTheme } from './AppTableTheme';
+import './styles.scss';
 export default function AppTable({ columns, data, pagination, setPagination, sorting, setSorting, className, onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, numItens, }) {
     const { content, totalPages, totalElements } = data;
     const columnVisibility = hiddenColumns?.reduce((acc, col) => {
@@ -31,7 +31,7 @@ export default function AppTable({ columns, data, pagination, setPagination, sor
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
         onSortingChange: (updaterOrValue) => {
-            const newSorting = typeof updaterOrValue === "function"
+            const newSorting = typeof updaterOrValue === 'function'
                 ? updaterOrValue(sorting)
                 : updaterOrValue;
             if (newSorting &&
@@ -41,8 +41,8 @@ export default function AppTable({ columns, data, pagination, setPagination, sor
             }
         },
     });
-    const tableClass = cx("ds-table", {
-        [className || ""]: className || "",
+    const tableClass = cx('ds-table', {
+        [className || '']: className || '',
     });
     return (_jsx(ThemeProvider, { theme: tableTheme, children: _jsxs("div", { className: tableClass, children: [_jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
                                         const toggleSortingHandler = header.column.getToggleSortingHandler();
@@ -51,12 +51,12 @@ export default function AppTable({ columns, data, pagination, setPagination, sor
                                                     toggleSortingHandler(event);
                                                 }
                                             }, style: {
-                                                cursor: "pointer",
+                                                cursor: 'pointer',
                                                 width: `${header.column.columnDef.size}%`,
                                             }, children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted()
-                                                    ? header.column.getIsSorted() === "desc"
-                                                        ? " 🔽"
-                                                        : " 🔼"
+                                                    ? header.column.getIsSorted() === 'desc'
+                                                        ? ' 🔽'
+                                                        : ' 🔼'
                                                     : null] }, header.id));
-                                    }) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { onMouseEnter: () => onMouseEnter && onMouseEnter(row), onMouseLeave: () => onMouseLeave && onMouseLeave(row), children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { onClick: () => onClickRow && onClickRow(row.original, cell.column), className: cell.id.includes("__") ? cell.id.split("__")[1] : "", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }), _jsx(AppPagination, { totalElements: totalElements, pagination: pagination, setPagination: setPagination, numItens: numItens })] }) }));
+                                    }) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { onMouseEnter: () => onMouseEnter && onMouseEnter(row), onMouseLeave: () => onMouseLeave && onMouseLeave(row), children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { onClick: () => onClickRow && onClickRow(row.original, cell.column), className: cell.id.includes('__') ? cell.id.split('__')[1] : '', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }), _jsx(AppPagination, { totalElements: totalElements, pagination: pagination, setPagination: setPagination, numItens: numItens })] }) }));
 }

package/dist/AppTable/styles.scss

@@ -50,3 +50,11 @@
     background-color: var(--layer-hover-1);
   }
 }
+
+@media (max-width: 768px) {
+  .ds-table {
+    .MuiTableContainer-root {
+      width: 100vw;
+    }
+  }
+}