@topconsultnpm/sdkui-react 6.20.0-dev3.19 → 6.20.0-dev3.20

package/lib/components/base/TMTreeView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { IconChevronDown, IconChevronRight, SDKUI_Localizator } from '../../helper';
+import { IconArrowLeft, IconArrowRight, IconChevronDown, IconChevronRight, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
 const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, autoSelectChildren = true, itemsPerPage = 100, showLoadMoreButton = true }) => {
     useEffect(() => {
@@ -350,7 +350,7 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                                 if (input) {
                                     input.indeterminate = isIndeterminate(node);
                                 }
-                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsPagination(node) && (_jsxs(StyledStickyPaginator, { children: [_jsx(TMButton, { onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) - 1), showTooltip: false, caption: "\u25C4", disabled: (node.currentPage ?? 0) <= 0 }), _jsx("span", { style: { fontSize: '12px', whiteSpace: 'nowrap', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0, color: 'white' }, children: SDKUI_Localizator.PaginationInfo.replaceParams((node.currentPage ?? 0) + 1, getTotalPages(node), node.items?.length ?? 0) }), _jsx(TMButton, { onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) + 1), showTooltip: false, caption: "\u25BA", disabled: (node.currentPage ?? 0) >= getTotalPages(node) - 1 })] }))] }))] }, node.key)));
+                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsPagination(node) && (_jsxs(StyledStickyPaginator, { children: [_jsx(TMButton, { btnStyle: 'icon', onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) - 1), showTooltip: false, caption: "\u25C4", icon: _jsx(IconArrowLeft, { color: 'white' }), disabled: (node.currentPage ?? 0) <= 0 }), _jsx("span", { style: { fontSize: '11px', whiteSpace: 'nowrap', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0, color: 'white' }, children: SDKUI_Localizator.PaginationInfo.replaceParams((node.currentPage ?? 0) + 1, getTotalPages(node), node.items?.length ?? 0) }), _jsx(TMButton, { btnStyle: 'icon', onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) + 1), showTooltip: false, caption: "\u25BA", icon: _jsx(IconArrowRight, { color: 'white' }), disabled: (node.currentPage ?? 0) >= getTotalPages(node) - 1 })] }))] }))] }, node.key)));
     }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, focusedItem, selectedItems, allowMultipleSelection, getVisibleItems, needsPagination, handlePageChange, getTotalPages]);
     return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', overflowX: 'hidden', padding: '0px 5px 2px 2px' }, children: renderTree(dataSource) }));
 };
@@ -378,19 +378,23 @@ export const StyledStickyPaginator = styled.div `
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	gap: 8px;
-	margin: 8px 0;
-	padding: 8px 12px;
+	width: fit-content;
+	margin: 3px auto;
+	gap: 15px;
+	padding: 4px 10px;
 	background: oklch(from var(--dx-color-primary) l c h / .85);
 	border: 1px solid oklch(from var(--dx-color-primary) l c h / .9);
-	border-radius: 6px;
-	box-shadow: 0 -2px 8px oklch(from var(--dx-color-primary) l c h / .15);
+	border-radius: 3px;
+	box-shadow: 0 -1px 4px oklch(from var(--dx-color-primary) l c h / .15);
 	transition: all 0.2s ease;
 	min-width: 0;
 	z-index: 10;
 
 	& > button {
 		flex-shrink: 0;
+		min-width: 24px !important;
+		min-height: 20px !important;
+		padding: 2px 6px !important;
 	}
 
 	& > span {
@@ -401,6 +405,6 @@ export const StyledStickyPaginator = styled.div `
 	&:hover {
 		background: oklch(from var(--dx-color-primary) l c h / .95);
 		border-color: oklch(from var(--dx-color-primary) l c h / 1);
-		box-shadow: 0 -2px 12px oklch(from var(--dx-color-primary) l c h / .2);
+		box-shadow: 0 -1px 6px oklch(from var(--dx-color-primary) l c h / .2);
 	}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.20.0-dev3.19",
+    "version": "6.20.0-dev3.20",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",