tycho-components 0.19.9 → 0.19.10

package/dist/AppPagination/AppPagination.js

@@ -1,11 +1,43 @@
 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';
-import { IconButton } from 'tycho-storybook';
+import { Icon, IconButton } from 'tycho-storybook';
 import './styles.scss';
+const DRAG_THRESHOLD_PX = 6;
+/** 0-based index: center when page 4+ is active (after the 3rd page). */
+const CENTER_SCROLL_FROM_PAGE_INDEX = 3;
 export default function AppPagination({ totalElements, pagination, setPagination, hideItensPage, numItens = [10, 25, 50], size = 'medium', }) {
     const { t } = useTranslation('common');
+    const scrollContainerRef = useRef(null);
+    const activePageButtonRef = useRef(null);
+    const centerAfterClickRef = useRef(false);
+    const [stripScrollEdges, setStripScrollEdges] = useState({
+        overflow: false,
+        canScrollLeft: false,
+        canScrollRight: false,
+    });
+    const { isDraggingScroll, suppressPageClickRef, pagesTotalPointerHandlers } = useDragToScrollRow(scrollContainerRef, DRAG_THRESHOLD_PX);
+    const updateStripScrollEdgeState = useCallback(() => {
+        const el = scrollContainerRef.current;
+        if (!el)
+            return;
+        const maxScroll = el.scrollWidth - el.clientWidth;
+        const overflow = maxScroll > 1;
+        setStripScrollEdges({
+            overflow,
+            canScrollLeft: overflow && el.scrollLeft > 1,
+            canScrollRight: overflow && el.scrollLeft < maxScroll - 1,
+        });
+    }, []);
+    const scrollPageStrip = useCallback((direction) => {
+        const el = scrollContainerRef.current;
+        if (!el)
+            return;
+        const step = Math.max(72, Math.floor(el.clientWidth * 0.8));
+        el.scrollBy({ left: direction * step, behavior: 'smooth' });
+    }, []);
     const numPages = Math.ceil(totalElements / pagination.pageSize);
     const currentPage = pagination.pageIndex + 1;
     const getFirstElementNumber = () => pagination.pageIndex * pagination.pageSize + 1;
@@ -16,17 +48,86 @@ export default function AppPagination({ totalElements, pagination, setPagination
     const setPageIndex = (p) => {
         setPagination({ ...pagination, pageIndex: p });
     };
+    const scrollActivePageIntoCenter = useCallback(() => {
+        activePageButtonRef.current?.scrollIntoView({
+            inline: 'center',
+            block: 'nearest',
+            behavior: 'smooth',
+        });
+    }, []);
+    useLayoutEffect(() => {
+        if (centerAfterClickRef.current) {
+            centerAfterClickRef.current = false;
+            scrollActivePageIntoCenter();
+        }
+        else if (pagination.pageIndex >= CENTER_SCROLL_FROM_PAGE_INDEX) {
+            scrollActivePageIntoCenter();
+        }
+        requestAnimationFrame(() => updateStripScrollEdgeState());
+    }, [
+        numPages,
+        pagination.pageIndex,
+        pagination.pageSize,
+        scrollActivePageIntoCenter,
+        updateStripScrollEdgeState,
+    ]);
+    useEffect(() => {
+        const el = scrollContainerRef.current;
+        if (!el)
+            return;
+        const onScroll = () => updateStripScrollEdgeState();
+        el.addEventListener('scroll', onScroll, { passive: true });
+        const ro = new ResizeObserver(() => updateStripScrollEdgeState());
+        ro.observe(el);
+        return () => {
+            el.removeEventListener('scroll', onScroll);
+            ro.disconnect();
+        };
+    }, [updateStripScrollEdgeState]);
+    useEffect(() => {
+        const el = scrollContainerRef.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            if (el.scrollWidth <= el.clientWidth + 1)
+                return;
+            const dominantX = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+            const scrollDelta = dominantX ? e.deltaX : e.deltaY;
+            if (scrollDelta === 0)
+                return;
+            const maxScroll = el.scrollWidth - el.clientWidth;
+            const nextLeft = el.scrollLeft + scrollDelta;
+            const clamped = Math.max(0, Math.min(maxScroll, nextLeft));
+            const atStart = el.scrollLeft <= 0;
+            const atEnd = el.scrollLeft >= maxScroll - 1;
+            if ((scrollDelta < 0 && atStart) || (scrollDelta > 0 && atEnd)) {
+                return;
+            }
+            el.scrollLeft = clamped;
+            e.preventDefault();
+        };
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => el.removeEventListener('wheel', onWheel);
+    }, []);
     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: {
                                     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) => {
+                                } }) }) })] }), _jsxs("div", { className: "pages-navigation", children: [_jsx(IconButton, { size: size, mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex - 1), disabled: pagination.pageIndex === 0, name: "chevron_backward" }), stripScrollEdges.overflow && (_jsx("button", { type: "button", className: "page-strip-nudge", disabled: !stripScrollEdges.canScrollLeft, onClick: () => scrollPageStrip(-1), "aria-label": t('table.pagination.scroll-strip-left'), title: t('table.pagination.scroll-strip-left'), children: _jsx(Icon, { name: "keyboard_double_arrow_left", size: "x-small" }) })), _jsx("div", { ref: scrollContainerRef, className: classNames('pages-total', {
+                            'is-dragging': isDraggingScroll,
+                        }), ...pagesTotalPointerHandlers, 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" })] })] }));
+                            return (_jsx("button", { ref: isActive ? activePageButtonRef : undefined, type: "button", className: classNames('page-number', { active: isActive }), onClick: () => {
+                                    if (suppressPageClickRef.current) {
+                                        return;
+                                    }
+                                    centerAfterClickRef.current = true;
+                                    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" })] })] }));
 }
 const menuProps = {
     PaperProps: {
@@ -59,3 +160,86 @@ const menuProps = {
         ],
     },
 };
+const initialDragRow = {
+    pointerId: null,
+    startX: 0,
+    startScrollLeft: 0,
+    dragging: false,
+};
+/**
+ * Horizontal drag-to-scroll for an overflow-x container: hides reliance on
+ * the scrollbar (paired with CSS) while keeping click-vs-drag distinct.
+ */
+function useDragToScrollRow(containerRef, dragThresholdPx) {
+    const suppressPageClickRef = useRef(false);
+    const dragRef = useRef({ ...initialDragRow });
+    const [isDraggingScroll, setIsDraggingScroll] = useState(false);
+    const pagesTotalPointerHandlers = useMemo(() => {
+        const endPointer = (e) => {
+            const d = dragRef.current;
+            if (d.pointerId !== e.pointerId)
+                return;
+            const el = containerRef.current;
+            if (d.dragging) {
+                suppressPageClickRef.current = true;
+                window.setTimeout(() => {
+                    suppressPageClickRef.current = false;
+                }, 0);
+            }
+            dragRef.current = { ...initialDragRow };
+            setIsDraggingScroll(false);
+            if (el) {
+                try {
+                    el.releasePointerCapture(e.pointerId);
+                }
+                catch {
+                    /* capture may already be released */
+                }
+            }
+        };
+        return {
+            onPointerDown(e) {
+                if (e.button !== 0)
+                    return;
+                const target = e.target;
+                if (target?.closest('.page-number')) {
+                    return;
+                }
+                const el = containerRef.current;
+                if (!el)
+                    return;
+                dragRef.current = {
+                    pointerId: e.pointerId,
+                    startX: e.clientX,
+                    startScrollLeft: el.scrollLeft,
+                    dragging: false,
+                };
+                el.setPointerCapture(e.pointerId);
+            },
+            onPointerMove(e) {
+                const d = dragRef.current;
+                if (d.pointerId !== e.pointerId)
+                    return;
+                const el = containerRef.current;
+                if (!el)
+                    return;
+                const dx = e.clientX - d.startX;
+                if (!d.dragging && Math.abs(dx) > dragThresholdPx) {
+                    d.dragging = true;
+                    setIsDraggingScroll(true);
+                }
+                if (d.dragging) {
+                    el.scrollLeft = d.startScrollLeft - dx;
+                    e.preventDefault();
+                }
+            },
+            onPointerUp: endPointer,
+            onPointerCancel: endPointer,
+        };
+    }, [containerRef, dragThresholdPx]);
+    return {
+        isDraggingScroll,
+        suppressPageClickRef,
+        pagesTotalPointerHandlers,
+    };
+}

package/dist/AppPagination/styles.scss

@@ -27,19 +27,26 @@
     align-items: center;
     gap: 4px;
     flex-wrap: nowrap;
-    max-width: 200px;
+    max-width: 196px;
     overflow-x: auto;
     overflow-y: hidden;
-    padding-bottom: 2px;
-    scrollbar-width: thin;
+    cursor: grab;
+    touch-action: pan-x;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    user-select: none;
 
     &::-webkit-scrollbar {
-      height: 6px;
+      display: none;
     }
 
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--border-subtle-2);
-      border-radius: 3px;
+    &.is-dragging {
+      cursor: grabbing;
+
+      .page-number {
+        cursor: grabbing;
+      }
     }
 
     .page-number {
@@ -83,6 +90,37 @@
     margin-left: auto;
   }
 
+  .page-strip-nudge {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    min-width: 22px;
+    height: 40px;
+    padding: 0;
+    margin: 0;
+    border: none;
+    border-radius: 0;
+    background-color: var(--button-secondary-default);
+    color: var(--text-on-color-dark);
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      filter: brightness(1.05);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-focus);
+      outline-offset: 2px;
+    }
+  }
+
   .MuiInputBase-root {
     border-radius: 0px;
     font-family: 'Work Sans' !important;
@@ -127,6 +165,10 @@
       }
     }
 
+    .page-strip-nudge {
+      height: 32px;
+    }
+
     .MuiInputBase-root {
       > .MuiSelect-select {
         height: 32px;

package/dist/TreeView/cytoscape/SyntreesCytoscape.js

@@ -45,7 +45,7 @@ const init = ({ selector, tree, dagre = false, stylesheet = defaultStylesheet, w
             // @ts-ignore (no types)
             cy.nodeHtmlLabel([
                 {
-                    query: 'node',
+                    query: 'node.token',
                     halign: 'center',
                     valign: 'center',
                     halignBox: 'center',

package/dist/configs/Localization.d.ts

@@ -89,6 +89,8 @@ export declare const commonResources: {
             'internal.server.error': string;
             'table.label.rows-page': string;
             'table.label.items': string;
+            'table.pagination.scroll-strip-left': string;
+            'table.pagination.scroll-strip-right': string;
             'tooltip.copy': string;
             'tooltip.copied': string;
             'document.status.deleted': string;
@@ -410,6 +412,8 @@ export declare const commonResources: {
             'internal.server.error': string;
             'table.label.rows-page': string;
             'table.label.items': string;
+            'table.pagination.scroll-strip-left': string;
+            'table.pagination.scroll-strip-right': string;
             'tooltip.copy': string;
             'tooltip.copied': string;
             'document.status.deleted': string;
@@ -727,6 +731,8 @@ export declare const commonResources: {
             'internal.server.error': string;
             'table.label.rows-page': string;
             'table.label.items': string;
+            'table.pagination.scroll-strip-left': string;
+            'table.pagination.scroll-strip-right': string;
             'tooltip.copy': string;
             'tooltip.copied': string;
             'document.status.deleted': string;

package/dist/configs/localization/CommonTexts.d.ts

@@ -43,6 +43,8 @@ export declare const CommonTexts: {
         'internal.server.error': string;
         'table.label.rows-page': string;
         'table.label.items': string;
+        'table.pagination.scroll-strip-left': string;
+        'table.pagination.scroll-strip-right': string;
         'tooltip.copy': string;
         'tooltip.copied': string;
         'document.status.deleted': string;
@@ -111,6 +113,8 @@ export declare const CommonTexts: {
         'internal.server.error': string;
         'table.label.rows-page': string;
         'table.label.items': string;
+        'table.pagination.scroll-strip-left': string;
+        'table.pagination.scroll-strip-right': string;
         'tooltip.copy': string;
         'tooltip.copied': string;
         'document.status.deleted': string;
@@ -179,6 +183,8 @@ export declare const CommonTexts: {
         'internal.server.error': string;
         'table.label.rows-page': string;
         'table.label.items': string;
+        'table.pagination.scroll-strip-left': string;
+        'table.pagination.scroll-strip-right': string;
         'tooltip.copy': string;
         'tooltip.copied': string;
         'document.status.deleted': string;

package/dist/configs/localization/CommonTexts.js

@@ -43,6 +43,8 @@ export const CommonTexts = {
         'internal.server.error': 'An unexpected error occurred. Contact the administrator.',
         'table.label.rows-page': 'Items per page',
         'table.label.items': '{{first}} - {{last}} of {{total}} items',
+        'table.pagination.scroll-strip-left': 'Scroll page numbers left',
+        'table.pagination.scroll-strip-right': 'Scroll page numbers right',
         'tooltip.copy': 'Copy',
         'tooltip.copied': 'Copied!',
         'document.status.deleted': 'Deleted',
@@ -111,6 +113,8 @@ export const CommonTexts = {
         'internal.server.error': 'Ocorreu um erro inesperado. Entre em contato com o administrador.',
         'table.label.rows-page': 'Itens por página',
         'table.label.items': '{{first}} - {{last}} de {{total}} itens',
+        'table.pagination.scroll-strip-left': 'Rolar números das páginas à esquerda',
+        'table.pagination.scroll-strip-right': 'Rolar números das páginas à direita',
         'tooltip.copy': 'Copiar',
         'tooltip.copied': 'Copiado!',
         'document.status.deleted': 'Excluído',
@@ -179,6 +183,8 @@ export const CommonTexts = {
         'internal.server.error': "Si è verificato un errore inaspettato. Contatta l'amministratore.",
         'table.label.rows-page': 'Elementi per pagina',
         'table.label.items': '{{first}} - {{last}} di {{total}} elementi',
+        'table.pagination.scroll-strip-left': 'Scorri i numeri di pagina a sinistra',
+        'table.pagination.scroll-strip-right': 'Scorri i numeri di pagina a destra',
         'tooltip.copy': 'Copia',
         'tooltip.copied': 'Copiato!',
         'document.status.deleted': 'Eliminato',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.19.9",
+  "version": "0.19.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -49,7 +49,7 @@
     "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
-    "tycho-storybook": "0.7.1",
+    "tycho-storybook": "0.7.2",
     "yup": "^1.2.0"
   },
   "devDependencies": {