@topconsultnpm/sdkui-react-beta 6.11.48 → 6.11.50

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

@@ -78,6 +78,8 @@ export interface TMFileManagerProps {
     handleDropFileCallback?: (files: Array<File>) => void;
     /** JSX element representing the thumbnail view item for a file or folder */
     thumbnailsViewItemComponent?: (props: TMWGsDraftThumbViewItemProps) => JSX.Element;
+    /** Number of total founded */
+    dcmtsFound?: number;
 }
 declare const TMFileManager: (props: TMFileManagerProps) => import("react/jsx-runtime").JSX.Element;
 export default TMFileManager;

package/lib/components/base/TMFileManager.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import Toolbar, { Item as ToolbarItem } from 'devextreme-react/cjs/toolbar';
 import TreeView from 'devextreme-react/cjs/tree-view';
 import ScrollView from 'devextreme-react/cjs/scroll-view';
@@ -9,6 +9,8 @@ import { TMSearchBar } from '../sidebar/TMHeader';
 import TMButton from './TMButton';
 import TMDataGrid from './TMDataGrid';
 import { TMSplitterLayout } from './TMLayout';
+import { DeviceType, useDeviceType } from './TMDeviceProvider';
+import TMToolbarCard from './TMToolbarCard';
 export var TMFileManagerPageSize;
 (function (TMFileManagerPageSize) {
     TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";
@@ -17,7 +19,7 @@ export var TMFileManagerPageSize;
 })(TMFileManagerPageSize || (TMFileManagerPageSize = {}));
 const TMFileManager = (props) => {
     // Destructure the treeFs prop to get the root file system
-    const { treeFs, selectedFolder, selectedFiles, focusedFile, handleSelectedFiles, handleFocusedFile, handleSelectedFolder, viewMode: initialViewMode, contextMenuItems, onDoubleClickHandler, thumbnailsViewItemComponent, handleDropFileCallback } = props;
+    const { treeFs, selectedFolder, selectedFiles, focusedFile, handleSelectedFiles, handleFocusedFile, handleSelectedFolder, viewMode: initialViewMode, contextMenuItems, onDoubleClickHandler, thumbnailsViewItemComponent, handleDropFileCallback, dcmtsFound } = props;
     // State to manage the current view mode ('thumbnails' or 'details')
     const [viewMode, setViewMode] = useState(initialViewMode ?? 'thumbnails');
     // State to store the search text entered by the user
@@ -34,9 +36,15 @@ const TMFileManager = (props) => {
     const [isDragging, setIsDragging] = useState(false);
     // State to store context menu items for file manager actions
     const [menuItems, setMenuItems] = useState({ folder: [], file: [] });
-    // State to manage the anchor element for context menu positioning
+    // State to store the anchor element for the tree view context menu.
     const [treeViewAnchor, setTreeViewAnchor] = useState(null);
+    // State to store the anchor element for another view-related menu
     const [viewAnchor, setViewAnchor] = useState(null);
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const [openDraftList, setOpenDraftList] = useState(false);
     useEffect(() => {
         setMenuItems(contextMenuItems ?? { folder: [], file: [] });
     }, [contextMenuItems]);
@@ -158,6 +166,8 @@ const TMFileManager = (props) => {
             return;
         const clickedItemId = e.itemData.id;
         const item = clickedItemId === treeFs.id ? treeFs : findFileItems(treeFs.items, clickedItemId);
+        if (isMobile)
+            setOpenDraftList(true);
         handleSelectedFolder?.(item);
         handleFocusedFile?.(undefined);
         handleSelectedFiles?.([]);
@@ -186,12 +196,15 @@ const TMFileManager = (props) => {
         e.preventDefault();
         setIsDragging(false);
     };
+    const onBackCallback = () => {
+        setOpenDraftList(false);
+    };
     // Main render of the file manager component with a split layout
-    return _jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", width: "100%" }, children: [_jsx(Toolbar, { style: { backgroundColor: '#f4f4f4', border: '2px solid #ccc', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', height: "40px" }, children: _jsx(ToolbarItem, { location: "before", children: _jsx("div", { style: { paddingLeft: "5px", paddingRight: "5px" }, children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }) }) }), _jsx("div", { style: {
-                    display: "flex",
-                    flexGrow: 1,
-                    height: "calc(100% - 40px)"
-                }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { items: filteredFileItems, selectedFiles: selectedFiles, contextMenuItems: contextMenuItems?.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, thumbnailsViewItemComponent: thumbnailsViewItemComponent }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: contextMenuItems?.file, selectedFiles: selectedFiles, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") })] });
+    return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [!isMobile && _jsxs("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: [_jsx(Toolbar, { style: { backgroundColor: '#f4f4f4', border: '2px solid #ccc', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', height: "40px" }, children: _jsx(ToolbarItem, { location: "before", children: _jsx("div", { style: { paddingLeft: "5px", paddingRight: "5px" }, children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }) }) }), _jsx("div", { style: {
+                            display: "flex",
+                            flexGrow: 1,
+                            height: "calc(100% - 40px)"
+                        }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { items: filteredFileItems, selectedFiles: selectedFiles, contextMenuItems: menuItems.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, thumbnailsViewItemComponent: thumbnailsViewItemComponent }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: menuItems.file, selectedFiles: selectedFiles, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") })] }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMToolbarCard, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out' }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { items: filteredFileItems, selectedFiles: selectedFiles, contextMenuItems: contextMenuItems?.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, thumbnailsViewItemComponent: thumbnailsViewItemComponent }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: contextMenuItems?.file, selectedFiles: selectedFiles, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
 };
 export default TMFileManager;
 const DetailsView = (props) => {
@@ -200,6 +213,23 @@ const DetailsView = (props) => {
         const data = cellData.data;
         return _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: getFileIcon(data.ext, data.version) });
     };
+    const cellDatetimeRender = useCallback((cellData) => {
+        const { value } = cellData;
+        const formattedDate = value ? new Date(value).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
+        return _jsx("div", { children: formattedDate });
+    }, []);
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: "id", caption: "ID", dataType: 'string', visible: false },
+            { dataField: "ext", caption: SDKUI_Localizator.Extension, cellRender: cellExtRender },
+            { dataField: "name", caption: SDKUI_Localizator.Name },
+            { dataField: "version", caption: SDKUI_Localizator.Version },
+            { dataField: "size", caption: SDKUI_Localizator.Size, cellRender: (cellData) => formatBytes(cellData.data.size ?? 0) },
+            { dataField: "updaterName", caption: SDKUI_Localizator.Author },
+            { dataField: "lastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
+            { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
+        ];
+    }, []);
     // Handles selection change in the data grid
     const onSelectionChanged = useCallback((e) => {
         if (handleSelectedFiles) {
@@ -225,21 +255,7 @@ const DetailsView = (props) => {
             e.items = contextMenuItems ? [...contextMenuItems] : [];
         }
     };
-    const cellDatetimeRender = useCallback((cellData) => {
-        const { value } = cellData;
-        const formattedDate = value ? new Date(value).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
-        return _jsx("div", { children: formattedDate });
-    }, []);
-    return (items && items.length > 0) ? (_jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: [
-            { dataField: "id", caption: "ID", dataType: 'string', visible: false },
-            { dataField: "ext", caption: SDKUI_Localizator.Extension, cellRender: cellExtRender },
-            { dataField: "name", caption: SDKUI_Localizator.Name },
-            { dataField: "version", caption: SDKUI_Localizator.Version },
-            { dataField: "size", caption: SDKUI_Localizator.Size, cellRender: (cellData) => formatBytes(cellData.data.size ?? 0) },
-            { dataField: "updaterName", caption: SDKUI_Localizator.Author },
-            { dataField: "lastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
-            { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
-        ], focusedRowKey: focusedFile?.id, selectedRowKeys: selectedFiles?.map(file => file.id), onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
+    return (items && items.length > 0) ? (_jsx(TMDataGrid, { dataSource: items, dataColumns: dataColumns, focusedRowKey: focusedFile?.id, selectedRowKeys: selectedFiles?.map(file => file.id), onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
 };
 const ThumbnailsView = (props) => {
     const { items, selectedFiles, handleSelectedFiles, handleFocusedFile, onDoubleClickHandler, thumbnailsViewItemComponent } = props;

package/lib/helper/SDKUI_Localizator.d.ts

@@ -89,6 +89,7 @@ export declare class SDKUI_Localizator {
     static get Disabled(): "Deaktiviert" | "Disabled" | "Deshabilitado" | "Désactivé" | "Desabilitado" | "Disabilitato";
     static get Domain(): "Domäne" | "Domain" | "Dominio" | "Domaine";
     static get Download_in_Process(): "Download läuft" | "Download in progress" | "Descarga en curso" | "Téléchargement en cours" | "Download em progresso" | "Download in corso";
+    static get Drafts(): string;
     static get Duplicate(): "Duplikat" | "Duplicate" | "Duplicar" | "Dupliquer" | "Duplicado" | "Duplica";
     static get Duplicate_ConfirmFor1(): "Möchten Sie '{{0}}' duplizieren?" | "Are you sure you want to duplicate '{{0}}'?" | "¿Estás seguro de que deseas duplicar '{{0}}'?" | "Êtes-vous sûr de vouloir dupliquer '{{0}}'?" | "Você tem certeza que deseja duplicar '{{0}}'?" | "Sei sicuro di voler duplicare '{{0}}'?";
     static get Duplicate_ConfirmForN(): "{{0}} ausgewählte Objekte. Alle duplizieren?" | "{{0}} selected objects. Duplicate them all?" | "{{0}} objetos seleccionados. ¿Duplicar todos?" | "{{0}} objets sélectionnés. Voulez-vous tous les dupliquer?" | "{{0}} objetos selecionados. Duplicá-los todos?" | "{{0}} oggetti selezionati. Duplicare tutti?";
@@ -137,7 +138,7 @@ export declare class SDKUI_Localizator {
     static get FormulaEditor_Functions(): "Funktionen" | "Functions" | "Funciones" | "Fonctions" | "Funções" | "Funzioni";
     static get FormulaEditor_FunctionString(): "Funktionen für Zeichenkettenwerte" | "String values functions" | "Funciones para los valores de cadena" | "Fonctions pour les valeurs de chaîne" | "Funções para valores de cadeia" | "Funzioni per i valori stringa";
     static get FormulaEditor_Instructions(): "Anweisungen" | "Instructions" | "Instrucciones" | "Instruções" | "Istruzioni";
-    static get FormulaEditor_Variables(): "Variablen @" | "Variables @" | "Variáveis @" | "Variabili @";
+    static get FormulaEditor_Variables(): "Variablen" | "Variables" | "Variáveis" | "Variabili";
     static get FormulaEditor_ValidateOK(): "Erfolgreich validierte Formel" | "Formula successfully validated" | "Fórmula validada correctamente" | "La formule est valide" | "Fórmula utilizada com sucesso" | "Formula validata con successo";
     static get File_Downloading(): "Datei wird heruntergeladen" | "File is downloading..." | "El archivo se está descargando" | "Le fichier est en cours de téléchargement" | "O arquivo está sendo baixado" | "Il file è in fase di download";
     static get File_Size(): "Dateigröße" | "File size" | "Tamaño del archivo" | "Taille du fichier" | "Tamanho do arquivo" | "Dimensione del file";

package/lib/helper/SDKUI_Localizator.js

@@ -839,6 +839,16 @@ export class SDKUI_Localizator {
             default: return "Download in corso";
         }
     }
+    static get Drafts() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Entwürfe";
+            case CultureIDs.En_US: return "Drafts";
+            case CultureIDs.Es_ES: return "Borradores";
+            case CultureIDs.Fr_FR: return "Brouillons";
+            case CultureIDs.Pt_PT: return "Rascunhos";
+            default: return "Bozze";
+        }
+    }
     static get Duplicate() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Duplikat";
@@ -1333,12 +1343,12 @@ export class SDKUI_Localizator {
     }
     static get FormulaEditor_Variables() {
         switch (this._cultureID) {
-            case CultureIDs.De_DE: return "Variablen @";
-            case CultureIDs.En_US: return "Variables @";
-            case CultureIDs.Es_ES: return "Variables @";
-            case CultureIDs.Fr_FR: return "Variables @";
-            case CultureIDs.Pt_PT: return "Variáveis @";
-            default: return "Variabili @";
+            case CultureIDs.De_DE: return "Variablen";
+            case CultureIDs.En_US: return "Variables";
+            case CultureIDs.Es_ES: return "Variables";
+            case CultureIDs.Fr_FR: return "Variables";
+            case CultureIDs.Pt_PT: return "Variáveis";
+            default: return "Variabili";
         }
     }
     static get FormulaEditor_ValidateOK() {

package/lib/stories/TMFileManager.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import TMFileManager from '../components/base/TMFileManager';
 import { TMDeviceProvider } from '../components/base/TMDeviceProvider';
@@ -11,54 +12,60 @@ export default {
 // Default Story
 export const DefaultTMFileManager = (args) => {
     // Sample file items to mock the data structure
-    const sampleFiles = [
-        {
-            id: 1,
-            name: 'Folder 1',
-            isDirectory: true,
-            items: [
-                {
-                    id: 3,
-                    name: 'File 1',
-                    isDirectory: false,
-                    items: [],
-                    size: 2048,
-                    ext: 'txt',
-                    creationTime: new Date(),
-                    lastUpdateTime: new Date(),
-                    version: 1
-                }
-            ],
-            size: 1024,
-            ext: 'txt',
-            creationTime: new Date(),
-            lastUpdateTime: new Date(),
-            version: 1
-        },
-        {
-            id: 2,
-            name: 'Folder 2',
-            isDirectory: true,
-            items: [
-                {
-                    id: 3,
-                    name: 'File 2',
-                    isDirectory: false,
-                    items: [],
-                    size: 2048,
-                    ext: 'pdf',
-                    creationTime: new Date(),
-                    lastUpdateTime: new Date(),
-                    version: 1
-                }
-            ],
-            size: 0,
-            ext: 'folder',
-            creationTime: new Date(),
-            lastUpdateTime: new Date(),
-            version: 1
-        }
-    ];
+    const sampleFiles = useMemo(() => {
+        return [{
+                id: 1,
+                name: 'Folder 1',
+                isDirectory: true,
+                items: [
+                    {
+                        id: 3,
+                        name: 'File 1',
+                        isDirectory: false,
+                        items: [],
+                        size: 2048,
+                        ext: 'txt',
+                        creationTime: new Date(),
+                        lastUpdateTime: new Date(),
+                        version: 1
+                    }
+                ],
+                size: 1024,
+                ext: 'txt',
+                creationTime: new Date(),
+                lastUpdateTime: new Date(),
+                version: 1
+            },
+            {
+                id: 2,
+                name: 'Folder 2',
+                isDirectory: true,
+                items: [
+                    {
+                        id: 3,
+                        name: 'File 2',
+                        isDirectory: false,
+                        items: [],
+                        size: 2048,
+                        ext: 'pdf',
+                        creationTime: new Date(),
+                        lastUpdateTime: new Date(),
+                        version: 1
+                    }
+                ],
+                size: 0,
+                ext: 'folder',
+                creationTime: new Date(),
+                lastUpdateTime: new Date(),
+                version: 1
+            }
+        ];
+    }, []);
+    const [selectedFolder, setSelectedFolder] = useState(undefined);
+    // Handle selected folder
+    const handleSelectedFolder = (folderItem) => {
+        setSelectedFolder(folderItem);
+    };
     // Example context menu items
     const contextMenuItems = {
         folder: [
@@ -86,5 +93,5 @@ export const DefaultTMFileManager = (args) => {
             name: 'Root Directory',
             isDirectory: true,
             items: sampleFiles,
-        }, contextMenuItems: contextMenuItems });
+        }, contextMenuItems: contextMenuItems, selectedFolder: selectedFolder, handleSelectedFolder: handleSelectedFolder });
 };

package/package.json

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