tycho-components 0.19.13 → 0.19.14

package/dist/AppPagination/AppPagination.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MenuItem, Select } from '@mui/material';
 import classNames from 'classnames';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -111,7 +110,7 @@ export default function AppPagination({ totalElements, pagination, setPagination
     }, []);
     return (_jsxs("div", { className: classNames('app-table-pagination', {
             small: size === 'small',
-        }), 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: {
+        }), children: [_jsxs("div", { className: "itens-container", children: [!hideItensPage && (_jsxs("div", { className: "itens-page", children: [_jsx("span", { className: "itens-page-label", children: t('table.label.rows-page') }), _jsx("select", { className: "select-pages", value: pagination.pageSize, onChange: (e) => setPageSize(Number(e.target.value)), children: numItens.map((pageSizeOption) => (_jsx("option", { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))) })] })), _jsx("div", { className: "itens-total", children: _jsx("span", { children: _jsx(Trans, { t: t, i18nKey: "table.label.items", values: {
                                     first: getFirstElementNumber(),
                                     last: getLastElementNumber(),
                                     total: totalElements,
@@ -126,39 +125,8 @@ export default function AppPagination({ totalElements, pagination, setPagination
                                     }
                                     setPageIndex(index);
                                 }, "aria-current": isActive ? 'page' : undefined, children: pageNum }, pageNum));
-                        }) }), stripScrollEdges.overflow && (_jsx("button", { type: "button", className: "page-strip-nudge", disabled: !stripScrollEdges.canScrollRight, onClick: () => scrollPageStrip(1), "aria-label": t('table.pagination.scroll-strip-right'), title: t('table.pagination.scroll-strip-right'), children: _jsx(Icon, { name: "keyboard_double_arrow_right", size: "x-small" }) })), _jsx(IconButton, { size: size, mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex + 1), disabled: pagination.pageIndex >= numPages - 1, name: "chevron_forward" })] })] }));
+                        }) }), _jsx("div", { className: "pages-total-mobile", children: _jsx("select", { className: "select-pages", value: currentPage, onChange: (e) => setPageIndex(Number(e.target.value) - 1), children: Array.from({ length: numPages }, (_, index) => (_jsx("option", { value: index + 1, children: index + 1 }, index + 1))) }) }), stripScrollEdges.overflow && (_jsx("button", { type: "button", className: "page-strip-nudge", disabled: !stripScrollEdges.canScrollRight, onClick: () => scrollPageStrip(1), "aria-label": t('table.pagination.scroll-strip-right'), title: t('table.pagination.scroll-strip-right'), children: _jsx(Icon, { name: "keyboard_double_arrow_right", size: "x-small" }) })), _jsx(IconButton, { size: size, mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex + 1), disabled: pagination.pageIndex >= numPages - 1, name: "chevron_forward" })] })] }));
 }
-const menuProps = {
-    PaperProps: {
-        style: {
-            maxHeight: 200,
-        },
-    },
-    anchorOrigin: {
-        vertical: 'top',
-        horizontal: 'left',
-    },
-    transformOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left',
-    },
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error -- PopperProps is not typed but works at runtime
-    PopperProps: {
-        modifiers: [
-            {
-                name: 'flip',
-                enabled: false,
-            },
-            {
-                name: 'offset',
-                options: {
-                    offset: [0, -4],
-                },
-            },
-        ],
-    },
-};
 const initialDragRow = {
     pointerId: null,
     startX: 0,

package/dist/AppPagination/styles.scss

@@ -22,6 +22,10 @@
     }
   }
 
+  .pages-total-mobile {
+    display: none;
+  }
+
   .pages-total {
     display: flex;
     align-items: center;
@@ -91,6 +95,35 @@
     margin-left: auto;
   }
 
+  .select-pages {
+    box-sizing: border-box;
+    min-width: 56px;
+    height: 40px;
+    margin: 0;
+    padding: var(--spacing-0) 28px var(--spacing-0) var(--spacing-100);
+    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);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23222' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 4px center;
+    background-size: 20px 20px;
+    cursor: pointer;
+    appearance: none;
+
+    &:hover {
+      filter: brightness(1.05);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-focus);
+      outline-offset: 2px;
+    }
+  }
+
   .page-strip-nudge {
     flex-shrink: 0;
     display: inline-flex;
@@ -122,34 +155,6 @@
     }
   }
 
-  .MuiInputBase-root {
-    border-radius: 0px;
-    font-family: 'Work Sans' !important;
-
-    > .MuiSelect-select {
-      display: flex;
-      align-items: center;
-      padding: var(--spacing-0) var(--spacing-100);
-      height: 40px;
-      border-radius: 0px;
-      background-color: var(--button-secondary-default);
-      @include button-small;
-      color: var(--text-on-color-dark);
-    }
-
-    > .MuiSelect-icon {
-      position: relative;
-      width: 20px;
-      height: 40px;
-      background-color: var(--button-secondary-default);
-      margin-left: 8px;
-    }
-
-    > .MuiOutlinedInput-notchedOutline {
-      display: none;
-    }
-  }
-
   &.small {
     padding: var(--spacing-100);
 
@@ -170,14 +175,9 @@
       height: 32px;
     }
 
-    .MuiInputBase-root {
-      > .MuiSelect-select {
-        height: 32px;
-      }
-
-      > .MuiSelect-icon {
-        height: 32px;
-      }
+    .select-pages {
+      height: 32px;
+      background-position: right 2px center;
     }
   }
 }
@@ -199,3 +199,32 @@
     }
   }
 }
+
+@media (max-width: 767px) {
+  .app-table-pagination {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 12px 0px;
+
+    .itens-container {
+      .itens-page {
+        .itens-page-label {
+          display: none;
+        }
+      }
+    }
+
+    .pages-total-mobile {
+      display: block;
+    }
+
+    .pages-total {
+      display: none;
+    }
+
+    .pages-navigation {
+      justify-content: center;
+      margin: 0px;
+    }
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.19.13",
+  "version": "0.19.14",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {