@topconsultnpm/sdkui-react-beta 6.16.69 → 6.16.71

package/lib/components/base/TMDataGrid.d.ts

@@ -49,6 +49,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     counterConfig?: ITMCounterContainerProps;
     /** Master Detail */
     masterDetail?: IMasterDetailProps;
+    /** On Has Filters Change */
+    onHasFiltersChange?: (hasFilters: boolean) => void;
 }
 declare const TMDataGrid: React.ForwardRefExoticComponent<TMDataGridProps<unknown> & React.RefAttributes<dxDataGrid<any, any>>>;
 export default TMDataGrid;

package/lib/components/base/TMDataGrid.js

@@ -16,7 +16,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // main properties
     keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
     // custom options
-    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, 
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, 
     // events and callbacks
     onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, columnChooser, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
     // other properties
@@ -28,6 +28,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     const [counterValues, setCounterValues] = useState(new Map());
     const [totalRecordCount, setTotalRecordCount] = useState(0);
     const [visibleItemsCount, setVisibleItemsCount] = useState(0);
+    const [hasFilters, setHasFilters] = useState(false);
     useEffect(() => {
         const count = getRecordCount(dataSource);
         setTotalRecordCount(count);
@@ -182,11 +183,19 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             }, 100);
         }
     }, [onContentReady]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: 'tm-datagrid', 
+    const onOptionChangedCallback = useCallback((e) => {
+        if (showFilterPanel && e.fullName === 'filterValue' || e.fullName?.startsWith('columns') && e.fullName.endsWith('filterValues')) {
+            const newHasFilters = Array.isArray(e.value) ? e.value.length > 0 : !!e.value;
+            setHasFilters(newHasFilters);
+            onHasFiltersChange?.(newHasFilters);
+        }
+        onOptionChanged?.(e);
+    }, [onOptionChanged]);
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
                     // main properties
                     keyExpr: keyExpr, dataSource: dataSource, selectedRowKeys: selectedRowKeys, focusedRowEnabled: focusedRowEnabled, hoverStateEnabled: hoverStateEnabled, 
                     // events and callbacks
-                    onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChanged, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
+                    onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChangedCallback, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
                     // other properties
                     disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, noDataText: noDataText, 
                     // styles

package/lib/components/base/TMDataGridExportForm.js

@@ -68,7 +68,7 @@ const TMDataGridExportForm = (props) => {
             // Create a Set from selectedRowKeys for efficient lookup
             const selectedSet = new Set(selectedRowKeys);
             // If exporting only selected rows, filter the dataSource accordingly; otherwise use the full dataSource
-            const rowsToExport = exportSelectedOnly ? dataSource.filter((_, idx) => selectedSet.has(idx)) : dataSource;
+            const rowsToExport = exportSelectedOnly ? dataSource.filter((item) => selectedSet.has(item.rowIndex)) : dataSource;
             // Filter columns to only those that are visible; optionally hide 'object' data types based on the `hideSelection` flag
             let visibleColumns = dataColumns.filter(col => {
                 if (!exportSelectedFormatColumns) {

package/lib/components/base/TMFloatingToolbar.js

@@ -64,6 +64,8 @@ const TMFloatingToolbar = ({ children, backgroundColor, initialLeft, initialTop
             isClicked.current = true;
             coords.current.startX = e.clientX;
             coords.current.startY = e.clientY;
+            coords.current.lastX = box.offsetLeft;
+            coords.current.lastY = box.offsetTop;
         };
         const onMouseUp = (e) => {
             isClicked.current = false;

package/lib/components/base/TMPopUp.d.ts

@@ -15,6 +15,7 @@ interface ITMMessageBox extends ITMPopup {
     onButtonClick?: (e: ButtonNames) => void;
     parentId?: string;
     onClose?: () => void;
+    confirmOnEnter?: boolean;
 }
 interface ITMExceptionBox extends ITMPopup {
     exception?: any;
@@ -23,6 +24,6 @@ declare class TMExceptionBoxManager {
     static show({ title, exception }: ITMExceptionBox): void;
 }
 declare class TMMessageBoxManager {
-    static show({ title, buttons, onButtonClick, message, parentId, resizable, onClose }: ITMMessageBox): void;
+    static show({ title, buttons, onButtonClick, message, parentId, resizable, onClose, confirmOnEnter }: ITMMessageBox): void;
 }
 export { TMExceptionBoxManager, TMMessageBoxManager };

package/lib/components/base/TMPopUp.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import TMButton from './TMButton';
 import { SDKUI_Localizator, calcResponsiveSizes, getExceptionMessage } from '../../helper';
 import styled from 'styled-components';
@@ -174,7 +174,7 @@ const ResponsiveButton = styled(TMButton) `
 const ResponsiveMessageBody = ({ message, isMobile, MessageToolbar }) => {
     return (_jsxs(ResponsiveMessageContainer, { children: [_jsxs(ResponsiveMessageContent, { "$isMobile": isMobile, children: [_jsx(ResponsiveToppyImage, { "$isMobile": isMobile, src: toppy, alt: "Toppy" }), _jsx(ResponsiveMessageText, { "$isMobile": isMobile, children: typeof message === 'string' ? _jsx(Message, { msg: message }) : message })] }), _jsx(MessageToolbar, {})] }));
 };
-const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons, onClose }) => {
+const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons, onClose, confirmOnEnter = false }) => {
     let deviceType = useDeviceType();
     const isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     const [initialWidth, setInitialWidth] = useState('clamp(100px, 90vw, 400px)');
@@ -190,6 +190,21 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
             setBtns(arr);
         }
     }, [buttons]);
+    const handleKeyDown = useCallback((e) => {
+        if (confirmOnEnter && e.key === 'Enter') {
+            e.preventDefault();
+            if (btns.includes(ButtonNames.YES)) {
+                onButtonClick?.(ButtonNames.YES);
+                setIsVisible(false);
+            }
+        }
+    }, [confirmOnEnter, btns, onButtonClick]);
+    useEffect(() => {
+        if (!confirmOnEnter)
+            return;
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [confirmOnEnter, handleKeyDown]);
     const MessageToolbar = () => {
         return (_jsxs(StyledMessageToolbar, { children: [(btns.includes(ButtonNames.OK) || btns.includes(ButtonNames.YES)) &&
                     _jsx(ResponsiveButton, { fontSize: 'clamp(12px, 2vw, 1.1rem)', color: 'primaryOutline', btnStyle: 'text', onClick: () => {
@@ -245,7 +260,7 @@ class TMExceptionBoxManager {
     }
 }
 class TMMessageBoxManager {
-    static show({ title, buttons, onButtonClick, message, parentId, resizable, onClose }) {
+    static show({ title, buttons, onButtonClick, message, parentId, resizable, onClose, confirmOnEnter = false }) {
         let container = document.createElement('div');
         if (parentId) {
             const parent = document.getElementById(parentId);
@@ -260,7 +275,7 @@ class TMMessageBoxManager {
             document.body.appendChild(container);
         }
         const root = ReactDOM.createRoot(container);
-        root.render(_jsx(TMDeviceProvider, { children: React.createElement(TMMessageBox, { title, buttons, onButtonClick, message, resizable, onClose }) }));
+        root.render(_jsx(TMDeviceProvider, { children: React.createElement(TMMessageBox, { title, buttons, onButtonClick, message, resizable, onClose, confirmOnEnter }) }));
     }
 }
 export { TMExceptionBoxManager, TMMessageBoxManager };

package/lib/components/features/search/TMSearchResult.js

@@ -37,6 +37,7 @@ import TMAccordion from '../../base/TMAccordion';
 import TMDataGridExportForm from '../../base/TMDataGridExportForm';
 import TMSearchResultFloatingActionButton from './TMSearchResultFloatingActionButton';
 import ShowAlert from '../../base/TMAlert';
+import TMSpinner from '../../base/TMSpinner';
 //#region Helper Methods
 export const getSearchResultCountersSingleCategory = (searchResults) => {
     // let totDcmtTypes = searchResults.length;
@@ -483,7 +484,6 @@ export default TMSearchResult;
 const renderDcmtIcon = (cellData, onDownloadDcmtsAsync, openInOffice) => _jsx(TMDcmtIcon, { tid: cellData.data.TID, did: cellData.data.DID, fileExtension: cellData.data.FILEEXT, fileCount: cellData.data.FILECOUNT, isLexProt: cellData.data.IsLexProt, isMail: cellData.data.ISMAIL, isShared: cellData.data.ISSHARED, isSigned: cellData.data.ISSIGNED, downloadMode: 'openInNewWindow', onDownloadDcmtsAsync: onDownloadDcmtsAsync, openInOffice: openInOffice });
 const TMSearchResultGrid = ({ openInOffice, inputFocusedItem, showSearch, allowMultipleSelection = true, showExportForm = false, onCloseExportForm, onFocusedItemChanged, onDownloadDcmtsAsync, onVisibleItemChanged, inputSelectedItems = [], lastUpdateSearchTime, searchResult, onContextMenuPreparing, onSelectionChanged, onDblClick }) => {
     const [dataSource, setDataSource] = useState();
-    const [showFilterPanel, setShowFilterPanel] = useState(false);
     const [columns, setColumns] = useState([]);
     // State to store selected row keys
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
@@ -501,14 +501,62 @@ const TMSearchResultGrid = ({ openInOffice, inputFocusedItem, showSearch, allowM
         setSelectedRowKeys(inputSelectedItemsRowIndex);
     }, [inputSelectedItems]);
     const onKeyDown = useCallback((e) => {
-        if (e.event?.key === 'Delete') {
-            if (selectedRowKeys.length === 0)
+        // Check if the pressed key is the "Delete" key.
+        if (e.event?.key === 'Delete' && !showExportForm) {
+            // Get the selected or focused documents/items from the grid.
+            const dcmts = getSelectedDcmtsOrFocused(inputSelectedItems, inputFocusedItem);
+            // If there are no selected or focused items, do nothing.
+            if (dcmts === undefined || dcmts.length === 0)
                 return;
-            setDataSource((prevDataSource = []) => prevDataSource.filter((data) => !selectedRowKeys.includes(data.rowIndex)));
-            setSelectedRowKeys([]);
-            setFocusedItem(undefined);
+            // --- CASE 1: Only one item selected ---
+            if (dcmts.length === 1) {
+                const current = dcmts[0];
+                // If the selected item has a row index (valid entry)
+                if (current.rowIndex !== undefined) {
+                    TMSpinner.show({ description: SDKUI_Localizator.RemovingFromList });
+                    const currentDataSource = dataSource ?? [];
+                    setTimeout(() => {
+                        // Remove the selected item from the data source by filtering it out.
+                        setDataSource(currentDataSource.filter((data) => data.rowIndex !== current.rowIndex));
+                        // Clear any selection, focused item, and update callbacks.
+                        onSelectionChanged?.([]);
+                        setSelectedRowKeys([]);
+                        onFocusedItemChanged?.(undefined);
+                        setFocusedItem(undefined);
+                        TMSpinner.hide();
+                    }, 500);
+                }
+                return;
+            }
+            // --- CASE 2: Multiple items selected ---
+            if (dcmts.length > 1) {
+                // Show a confirmation message box before deleting multiple items.
+                TMMessageBoxManager.show({
+                    buttons: [ButtonNames.YES, ButtonNames.NO],
+                    title: SDKUI_Localizator.RemoveFromList,
+                    message: `${SDKUI_Localizator.ConfirmSelectedDocumentsMessage.replaceParams(dcmts.length)}`,
+                    confirmOnEnter: true,
+                    onButtonClick(e) {
+                        // Only proceed if user clicks "YES"
+                        if (e !== ButtonNames.YES)
+                            return;
+                        TMSpinner.show({ description: SDKUI_Localizator.RemovingFromList });
+                        const currentDataSource = dataSource ?? [];
+                        setTimeout(() => {
+                            // Remove all selected items from the data source.
+                            setDataSource(currentDataSource.filter((data) => !dcmts.some((d) => d.rowIndex === data.rowIndex)));
+                            // Clear selections and focus after deletion.
+                            onSelectionChanged?.([]);
+                            setSelectedRowKeys([]);
+                            onFocusedItemChanged?.(undefined);
+                            setFocusedItem(undefined);
+                            TMSpinner.hide();
+                        }, 500);
+                    },
+                });
+            }
         }
-    }, [selectedRowKeys]);
+    }, [inputSelectedItems, inputFocusedItem, dataSource]);
     const cellRender = useCallback((cellData, dataDomain, dataListID, dataListViewMode) => {
         if (!cellData || cellData.value === undefined)
             return null;
@@ -652,14 +700,7 @@ const TMSearchResultGrid = ({ openInOffice, inputFocusedItem, showSearch, allowM
         setVisibleItems(visibleRows.map((row) => { return row.data; }));
     }, []);
     useEffect(() => { onVisibleItemChanged?.(visibleItems); }, [visibleItems]);
-    const onOptionChanged = useCallback((e) => {
-        if (e === undefined)
-            return;
-        if (e.fullName === "filterValue") {
-            setShowFilterPanel(!!e.value);
-        }
-    }, []);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearch, showFilterPanel: showFilterPanel, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: TMDataGridPageSize.Small, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, onOptionChanged: onOptionChanged, onContextMenuPreparing: onContextMenuPreparing, onKeyDown: onKeyDown, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearch, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: TMDataGridPageSize.Small, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, onContextMenuPreparing: onContextMenuPreparing, onKeyDown: onKeyDown, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
 };
 //#region TMSearchResultSelector
 const StyledItemTemplate = styled.div ` 

package/lib/components/features/search/TMSearchResultsMenuItems.js

@@ -17,10 +17,10 @@ export const getSelectedDcmtsOrFocused = (selectedItems, focusedItem, fileFormat
     if (selectedItems.length <= 0 && !focusedItem)
         return [];
     if (selectedItems.length > 0) {
-        return selectedItems.map((item) => { return { TID: item.TID, DID: item.DID, FILEEXT: item.FILEEXT, fileFormat: fileFormat }; });
+        return selectedItems.map((item) => { return { TID: item.TID, DID: item.DID, FILEEXT: item.FILEEXT, fileFormat: fileFormat, rowIndex: item.rowIndex }; });
     }
     else if (focusedItem !== undefined) {
-        return [{ TID: focusedItem.TID, DID: focusedItem.DID, FILEEXT: focusedItem.FILEEXT, fileFormat: fileFormat }];
+        return [{ TID: focusedItem.TID, DID: focusedItem.DID, FILEEXT: focusedItem.FILEEXT, fileFormat: fileFormat, rowIndex: focusedItem.rowIndex }];
     }
     return [];
 };

package/lib/components/grids/TMBlogs.js

@@ -621,49 +621,49 @@ const TMBlogs = (props) => {
         setShowDcmtForm(false);
         handleFocusedAttachment(undefined);
     }, []);
-    return _jsx("div", { style: { height: height ?? '100%', width: width ?? '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: localShowWaitPanel, showWaitPanelPrimary: localShowPrimary, waitPanelTitle: localWaitPanelTitle, waitPanelTextPrimary: localWaitPanelTextPrimary, waitPanelValuePrimary: localWaitPanelValuePrimary, waitPanelMaxValuePrimary: localWaitPanelMaxValuePrimary, isCancelable: true, abortController: localAbortController, children: [(currentHeader && !isHeaderHidden) && (_jsx("div", { style: { display: 'block', width: '100%', overflowX: 'auto', overflowY: 'hidden', whiteSpace: 'nowrap' }, onContextMenu: e => e.preventDefault(), children: _jsx(ScrollView, { width: "100%", height: "auto", direction: "horizontal", useNative: true, children: _jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                gap: '8px',
-                                alignItems: 'center',
-                                minWidth: 'max-content',
-                                padding: '10px 0',
-                            }, children: [currentHeader.showSearchBar && (_jsx("div", { style: {
-                                        minWidth: isMobile ? '120px' : '160px',
-                                        maxWidth: isMobile ? '120px' : '200px',
-                                        marginLeft: "10px"
-                                    }, children: _jsx(TMSearchBar, { marginLeft: "0px", maxWidth: "100%", searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })), currentHeader.showPostsDropDown && (_jsx("div", { style: {
-                                        minWidth: isMobile ? '90px' : '120px',
-                                        maxWidth: isMobile ? '90px' : '200px',
-                                    }, children: _jsx(TMDropDown, { value: postsToShow, dataSource: postsToShowDataSource, onValueChanged: handleFilterChange }) })), currentHeader.showFilters && (_jsx(TMTreeDropDown, { dataSource: treeDataSource, values: appliedGlobalFilters, setValues: setAppliedGlobalFilters, displayExpr: false, isValidKey: () => true, elementStyle: {
-                                        minWidth: isMobile ? '90px' : '120px',
-                                        width: isMobile ? '90px' : '150px',
-                                        height: '29px',
-                                    } }))] }) }) })), _jsxs("div", { style: { height: `calc(100% - ${currentHeader && !isHeaderHidden ? '50px' : '0px'})`, width: "100%", overflow: 'auto', display: 'block' }, onContextMenu: onBackgroundContextMenu, children: [_jsx("div", { style: { width: "100%", height: "100%" }, children: ThumbnailView() }), anchorEl && _jsx(ContextMenu, { ref: contextMenuRef, dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })] }), (showDcmtForm && focusedAttachment && focusedAttachment.TID && focusedAttachment.DID) && _jsx(TMDcmtForm, { TID: Number(focusedAttachment.TID), DID: Number(focusedAttachment.DID), layoutMode: LayoutModes.Update, onClose: onCloseDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + focusedAttachment.fileName, isModal: true, widthModal: "95%", heightModal: "95%" }), (showFloatingCommentButton && showCommentFormCallback && !(context?.engine === 'WorkingGroupEngine' && context?.object?.customData1 === 1)) && _jsx("button", { style: {
-                        position: 'absolute',
-                        bottom: '10px',
-                        right: '20px',
-                        width: '40px',
-                        height: '40px',
-                        borderRadius: "50%",
-                        backgroundColor: "#C2388B",
-                        color: '#fff',
-                        border: 'none',
-                        cursor: 'pointer',
-                        boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
-                        zIndex: 1000,
-                        transition: 'background-color 0.3s ease, transform 0.2s ease',
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }, onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor = '#D94A9F';
-                        e.currentTarget.style.transform = 'scale(1.1)';
-                        e.currentTarget.style.boxShadow = '0 4px 12px rgba(37, 89, 165, 0.6)';
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = "#C2388B";
-                        e.currentTarget.style.transform = 'scale(1)';
-                        e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';
-                    }, onClick: () => { showCommentFormCallback(); }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.AddNewComment, children: _jsx("i", { className: "dx-icon-chat", style: { fontSize: '25px' } }) }) })] }) });
+    return _jsxs("div", { style: { height: height ?? '100%', width: width ?? '100%' }, children: [_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: localShowWaitPanel, showWaitPanelPrimary: localShowPrimary, waitPanelTitle: localWaitPanelTitle, waitPanelTextPrimary: localWaitPanelTextPrimary, waitPanelValuePrimary: localWaitPanelValuePrimary, waitPanelMaxValuePrimary: localWaitPanelMaxValuePrimary, isCancelable: true, abortController: localAbortController, children: [(currentHeader && !isHeaderHidden) && (_jsx("div", { style: { display: 'block', width: '100%', overflowX: 'auto', overflowY: 'hidden', whiteSpace: 'nowrap' }, onContextMenu: e => e.preventDefault(), children: _jsx(ScrollView, { width: "100%", height: "auto", direction: "horizontal", useNative: true, children: _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    gap: '8px',
+                                    alignItems: 'center',
+                                    minWidth: 'max-content',
+                                    padding: '10px 0',
+                                }, children: [currentHeader.showSearchBar && (_jsx("div", { style: {
+                                            minWidth: isMobile ? '120px' : '160px',
+                                            maxWidth: isMobile ? '120px' : '200px',
+                                            marginLeft: "10px"
+                                        }, children: _jsx(TMSearchBar, { marginLeft: "0px", maxWidth: "100%", searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })), currentHeader.showPostsDropDown && (_jsx("div", { style: {
+                                            minWidth: isMobile ? '90px' : '120px',
+                                            maxWidth: isMobile ? '90px' : '200px',
+                                        }, children: _jsx(TMDropDown, { value: postsToShow, dataSource: postsToShowDataSource, onValueChanged: handleFilterChange }) })), currentHeader.showFilters && (_jsx(TMTreeDropDown, { dataSource: treeDataSource, values: appliedGlobalFilters, setValues: setAppliedGlobalFilters, displayExpr: false, isValidKey: () => true, elementStyle: {
+                                            minWidth: isMobile ? '90px' : '120px',
+                                            width: isMobile ? '90px' : '150px',
+                                            height: '29px',
+                                        } }))] }) }) })), _jsxs("div", { style: { height: `calc(100% - ${currentHeader && !isHeaderHidden ? '50px' : '0px'})`, width: "100%", overflow: 'auto', display: 'block' }, onContextMenu: onBackgroundContextMenu, children: [_jsx("div", { style: { width: "100%", height: "100%" }, children: ThumbnailView() }), anchorEl && _jsx(ContextMenu, { ref: contextMenuRef, dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })] }), (showDcmtForm && focusedAttachment && focusedAttachment.TID && focusedAttachment.DID) && _jsx(TMDcmtForm, { TID: Number(focusedAttachment.TID), DID: Number(focusedAttachment.DID), layoutMode: LayoutModes.Update, onClose: onCloseDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + focusedAttachment.fileName, isModal: true, widthModal: "95%", heightModal: "95%" })] }), (showFloatingCommentButton && showCommentFormCallback && !(context?.engine === 'WorkingGroupEngine' && context?.object?.customData1 === 1)) && _jsx("button", { style: {
+                    position: 'absolute',
+                    bottom: '18px',
+                    right: '20px',
+                    width: '40px',
+                    height: '40px',
+                    borderRadius: "50%",
+                    backgroundColor: "#C2388B",
+                    color: '#fff',
+                    border: 'none',
+                    cursor: 'pointer',
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
+                    zIndex: 1000,
+                    transition: 'background-color 0.3s ease, transform 0.2s ease',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = '#D94A9F';
+                    e.currentTarget.style.transform = 'scale(1.1)';
+                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(37, 89, 165, 0.6)';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "#C2388B";
+                    e.currentTarget.style.transform = 'scale(1)';
+                    e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';
+                }, onClick: () => { showCommentFormCallback(); }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.AddNewComment, children: _jsx("i", { className: "dx-icon-chat", style: { fontSize: '25px' } }) }) })] });
 };
 export default TMBlogs;

package/lib/helper/SDKUI_Localizator.d.ts

@@ -403,8 +403,10 @@ export declare class SDKUI_Localizator {
     static get RelationManyToMany(): "Folge viele mit vielen" | "Relation many to many" | "Correlación muchos a muchos" | "Corrélation plusieurs à plusieurs" | "Muitos para muitos relação" | "Correlazione molti a molti";
     static get RelationType(): "Art der Beziehung" | "Relation type" | "Tipo de relación" | "Type de relation" | "Tipo de relacionamento" | "Tipo di relazione";
     static get RemoveFromCache(): string;
+    static get RemoveFromList(): string;
     static get RemoveFromWorkgroup(): string;
     static get RemoveNamedPreferredCredentials(): "Möchten Sie die Anmeldedaten '{{0}}' entfernen, die als bevorzugt festgelegt wurden?" | "Do you want to remove the '{{0}}' credentials set as preferred?" | "¿Quieres eliminar las credenciales '{{0}}' configuradas como preferidas?" | "Voulez-vous supprimer les identifiants '{{0}}' définis comme préférés ?" | "Deseja remover as credenciais '{{0}}' definidas como preferidas?" | "Vuoi rimuovere le credenziali '{{0}}' impostate come preferite?";
+    static get RemovingFromList(): string;
     static get RememberCredentials(): "Anmeldedaten merken" | "Remember credentials" | "Recordar credenciales" | "Se souvenir des identifiants" | "Lembrar credenciais" | "Ricorda credenziali";
     static get ReopenDocument(): string;
     static get ReplaceDocument(): "Dokument ersetzen" | "Replace Document" | "Reemplazar Documento" | "Remplacer le Document" | "Substituir Documento" | "Sostituisci Documento";

package/lib/helper/SDKUI_Localizator.js

@@ -3988,6 +3988,16 @@ export class SDKUI_Localizator {
             default: return "Rimuovi elemento dalla cache";
         }
     }
+    static get RemoveFromList() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Aus der Liste entfernen";
+            case CultureIDs.En_US: return "Remove from list";
+            case CultureIDs.Es_ES: return "Eliminar de la lista";
+            case CultureIDs.Fr_FR: return "Supprimer de la liste";
+            case CultureIDs.Pt_PT: return "Remover da lista";
+            default: return "Rimuovere dalla lista";
+        }
+    }
     static get RemoveFromWorkgroup() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Aus der Arbeitsgruppe entfernen";
@@ -4014,6 +4024,16 @@ export class SDKUI_Localizator {
                 return "Vuoi rimuovere le credenziali '{{0}}' impostate come preferite?";
         }
     }
+    static get RemovingFromList() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Wird aus der Liste entfernt";
+            case CultureIDs.En_US: return "Removing from list";
+            case CultureIDs.Es_ES: return "Eliminando de la lista";
+            case CultureIDs.Fr_FR: return "Suppression de la liste en cours";
+            case CultureIDs.Pt_PT: return "Removendo da lista";
+            default: return "Rimozione dalla lista in corso";
+        }
+    }
     static get RememberCredentials() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Anmeldedaten merken";

package/lib/ts/types.d.ts

@@ -76,6 +76,7 @@ export type DcmtInfo = {
     metadataValues?: MetadataValueDescriptorEx[];
     fileName?: string;
     workingGroupId?: number;
+    rowIndex?: number;
 };
 export declare class MetadataValueDescriptorEx extends MetadataValueDescriptor {
     tid?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.16.69",
+    "version": "6.16.71",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",