@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0

package/lib/components/features/workflow/diagram/WorkitemRecipientsEditor.js

@@ -3,10 +3,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import RecipientList, { WorkItemActorTypes } from './RecipientList';
 import { SDKUI_Localizator } from '../../../../helper';
-export const RecipientsContainer = styled.div `
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
+export const RecipientsContainer = styled.div `
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
 `;
 export const tosToActors = (tosString) => {
     const andRecipients = [];

package/lib/components/forms/Login/Chooser.js

@@ -6,44 +6,44 @@ import TextBox from "./TextBox";
 import { createPortal } from 'react-dom';
 import { IconSearch, SDKUI_Localizator, IconArrowLeft, IconApply } from "../../../helper";
 import TMButton from "../../base/TMButton";
-const PopupContainer = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 100;
+const PopupContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
 `;
-const PopupHeaderContainer = styled.div `
-    display: flex;
-    padding: 10px;
-    align-items: center;
-    justify-content: space-between;
+const PopupHeaderContainer = styled.div `
+    display: flex;
+    padding: 10px;
+    align-items: center;
+    justify-content: space-between;
 `;
-const DropdownContainer = styled.div `
-  position: fixed;
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-  max-height: 35vh;
-  overflow-y: auto;
-  z-index: 9999;
-  width: fit-content;
-  resize: both;
+const DropdownContainer = styled.div `
+  position: fixed;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  max-height: 35vh;
+  overflow-y: auto;
+  z-index: 9999;
+  width: fit-content;
+  resize: both;
 `;
-const PopupContent = styled.div `
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+const PopupContent = styled.div `
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 `;
 const Chooser = ({ dataSource, columns, value, additionalIcons = [], validationItems = [], title, label = '', icon, placeHolder, disabled, selectedRow, onChooserClick, onSelectionChanged, onClose, isDropDown = false }) => {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);

package/lib/components/forms/Login/Menu.js

@@ -1,29 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import styled, { keyframes } from "styled-components";
-const fadeIn = keyframes `
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 `;
-const MenuContainer = styled.div `
-  position: absolute;
-  top: ${(props) => (typeof props.$y === "number" ? `${props.$y}px` : props.$y)};
-  left: ${(props) => (typeof props.$x === "number" ? `${props.$x}px` : props.$x)};
-  background: #2559A5 0% 0% no-repeat padding-box;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-  padding: 10px;
-  opacity: ${(props) => (props.$visible ? 1 : 0)};
-  transform-origin: top left;
-  animation: ${(props) => (props.$visible ? fadeIn : "none")} 0.3s ease-out;
-  transition: opacity 0.2s ease-out;
-  z-index:1000;
+const MenuContainer = styled.div `
+  position: absolute;
+  top: ${(props) => (typeof props.$y === "number" ? `${props.$y}px` : props.$y)};
+  left: ${(props) => (typeof props.$x === "number" ? `${props.$x}px` : props.$x)};
+  background: #2559A5 0% 0% no-repeat padding-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  opacity: ${(props) => (props.$visible ? 1 : 0)};
+  transform-origin: top left;
+  animation: ${(props) => (props.$visible ? fadeIn : "none")} 0.3s ease-out;
+  transition: opacity 0.2s ease-out;
+  z-index:1000;
 `;
 const Menu = ({ visible = false, children, x, y, onClose }) => {
     const menuRef = useRef(null);

package/lib/components/forms/Login/SelectBox.js

@@ -4,58 +4,58 @@ import styled from "styled-components";
 import { ResultTypes } from '@topconsultnpm/sdk-ts';
 import { TMColors } from "../../../utils/theme";
 import { SDKUI_Globals } from "../../../helper";
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  width: 100%;
-  position: relative;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  position: relative;
 `;
-const Label = styled.label `
-  font-size: 12px;
-  font-weight: 500;
-  color: #313131;
+const Label = styled.label `
+  font-size: 12px;
+  font-weight: 500;
+  color: #313131;
 `;
-const SelectContainer = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid #99999A;
-  border-radius: 5px;
-  background: ${(props) => (props.$disabled ? "#f0f0f0" : "white")};
-  opacity: ${(props) => (props.$disabled ? 0.6 : 1)};
-  cursor: ${(props) => (props.$disabled ? "not-allowed" : "pointer")};
-  position: relative;
-  border-bottom: ${(props) => (props.$focused ? "2px" : props.$borderThickness)} solid ${(props) => props.$borderColor};
+const SelectContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #99999A;
+  border-radius: 5px;
+  background: ${(props) => (props.$disabled ? "#f0f0f0" : "white")};
+  opacity: ${(props) => (props.$disabled ? 0.6 : 1)};
+  cursor: ${(props) => (props.$disabled ? "not-allowed" : "pointer")};
+  position: relative;
+  border-bottom: ${(props) => (props.$focused ? "2px" : props.$borderThickness)} solid ${(props) => props.$borderColor};
 `;
-const Select = styled.select `
-  flex: 1;
-  border: none;
-  outline: none;
-  font-size: ${SDKUI_Globals.userSettings?.themeSettings.fontSize ?? '12px'};
-  padding: 6px 0;
-  background: transparent;
-  color: ${props => props.$color ?? '#313131'};
-  ${(props) => props.$readOnly && "pointer-events: none; background: #f8f8f8;"}
-  cursor: ${props => props.$cursor};
+const Select = styled.select `
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: ${SDKUI_Globals.userSettings?.themeSettings.fontSize ?? '12px'};
+  padding: 6px 0;
+  background: transparent;
+  color: ${props => props.$color ?? '#313131'};
+  ${(props) => props.$readOnly && "pointer-events: none; background: #f8f8f8;"}
+  cursor: ${props => props.$cursor};
 `;
-const IconWrapper = styled.div `
-  color: ${(props) => props.$color};
-  display: flex;
-  align-items: center;
-  position: absolute;
-  left: -30px;
-  cursor: default;
+const IconWrapper = styled.div `
+  color: ${(props) => props.$color};
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: -30px;
+  cursor: default;
 `;
-const ValidationMessageContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-top: 2px;
+const ValidationMessageContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 2px;
 `;
-const ValidationMessage = styled.span `
-  font-size: 12px;
-  color: ${(props) => props.$color};
+const ValidationMessage = styled.span `
+  font-size: 12px;
+  color: ${(props) => props.$color};
 `;
 const SelectBox = ({ cursor = 'pointer', onClick, value, onValueChanged, label, icon, additionalIcons = [], options, placeHolder, validationItems = [], disabled, readOnly }) => {
     const [isFocused, setIsFocused] = useState(false);

package/lib/components/forms/Login/TMLoginForm.js

@@ -708,21 +708,21 @@ const StyledForgetPassword = styled.div ` position: absolute; bottom: ${props =>
 const StyledBackButton = styled.div ` position: absolute; top: 20px; left: 20px; `;
 const StyledLanguageChooser = styled.button ` border: none; border-radius: 50px; background-color: transparent; cursor: pointer; `;
 const StyledLangChooser = styled.img ` cursor: pointer; border: 3px solid white; border-radius: 50px; `;
-const StyledSummaryContainer = styled.div ` 
-    display: flex; 
-    align-items: center; 
-    gap: 10px;
+const StyledSummaryContainer = styled.div ` 
+    display: flex; 
+    align-items: center; 
+    gap: 10px;
 `;
-const StyledCredentialContainer = styled.div ` 
-    width: 100%; 
-    display: flex; 
-    flex-direction: ${props => getFlexDirection(props.$isMobile, props.$authMode)}; 
-    gap: 10px; 
-    
-    & > * {
-        flex: ${props => props.$authMode === AuthenticationModes.TopMediaOnBehalfOf && !props.$isMobile ? '1' : 'unset'};
-        min-width: 0;
-    }
+const StyledCredentialContainer = styled.div ` 
+    width: 100%; 
+    display: flex; 
+    flex-direction: ${props => getFlexDirection(props.$isMobile, props.$authMode)}; 
+    gap: 10px; 
+    
+    & > * {
+        flex: ${props => props.$authMode === AuthenticationModes.TopMediaOnBehalfOf && !props.$isMobile ? '1' : 'unset'};
+        min-width: 0;
+    }
 `;
 const StyledCredentialWrapper = styled.div ` width: 100%; display: flex; flex-direction: column; gap: 10px; `;
 const StyledToolbarContainer = styled.div ` display: flex; gap: 10px; align-items: center; position: absolute; top: 20px; right: 20px; `;

package/lib/components/forms/Login/TextBox.js

@@ -5,71 +5,71 @@ import { ResultTypes } from '@topconsultnpm/sdk-ts';
 import { IconShow, IconHide, SDKUI_Globals } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
 import TMTooltip from "../../base/TMTooltip";
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-  gap: 2px;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  gap: 2px;
 `;
-const Label = styled.label `
-  font-size: 12px;
-  font-weight: 500;
-  color: #313131;
+const Label = styled.label `
+  font-size: 12px;
+  font-weight: 500;
+  color: #313131;
 `;
-const InputContainer = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid #99999A;
-  border-radius: 5px;
-  background: ${(props) => (props.$disabled ? "#f0f0f0" : "white")};
-  opacity: ${(props) => (props.$disabled ? 0.6 : 1)};
-  cursor: ${(props) => (props.$disabled ? "not-allowed" : "text")};
-  position: relative;
-  border-bottom: ${(props) => (props.$focused ? "2px" : props.$borderThickness)} solid ${(props) => props.$borderColor};
+const InputContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #99999A;
+  border-radius: 5px;
+  background: ${(props) => (props.$disabled ? "#f0f0f0" : "white")};
+  opacity: ${(props) => (props.$disabled ? 0.6 : 1)};
+  cursor: ${(props) => (props.$disabled ? "not-allowed" : "text")};
+  position: relative;
+  border-bottom: ${(props) => (props.$focused ? "2px" : props.$borderThickness)} solid ${(props) => props.$borderColor};
 `;
-const Input = styled.input `
-  flex: 1;
-  border: none;
-  outline: none;
-  font-size: ${SDKUI_Globals.userSettings?.themeSettings.fontSize ?? '12px'};
-  padding: 6px 30px 6px 10px;
-  background: transparent;
-  color: ${props => props.$color ?? '#313131'};
-  ${(props) => props.$readOnly && "pointer-events: none; background: #f8f8f8;"}
-  cursor: ${props => props.$cursor};
+const Input = styled.input `
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: ${SDKUI_Globals.userSettings?.themeSettings.fontSize ?? '12px'};
+  padding: 6px 30px 6px 10px;
+  background: transparent;
+  color: ${props => props.$color ?? '#313131'};
+  ${(props) => props.$readOnly && "pointer-events: none; background: #f8f8f8;"}
+  cursor: ${props => props.$cursor};
 `;
-const ValidationMessageContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-top: 2px;
+const ValidationMessageContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 2px;
 `;
-const ValidationMessage = styled.span `
-  font-size: 12px;
-  color: ${(props) => props.$color};
+const ValidationMessage = styled.span `
+  font-size: 12px;
+  color: ${(props) => props.$color};
 `;
-const IconWrapper = styled.div `
-  color: ${(props) => props.$color};
-  display: flex;
-  align-items: center;
-  position: absolute;
-  left: -30px;
-  cursor: default;
+const IconWrapper = styled.div `
+  color: ${(props) => props.$color};
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: -30px;
+  cursor: default;
 `;
-const IconsRow = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  position: absolute;
-  right: 10px;
+const IconsRow = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  position: absolute;
+  right: 10px;
 `;
-const IconButton = styled.div `
-  color: ${(props) => props.$color};
-  display: flex;
-  align-items: center;
-  cursor: ${props => !props.$disabled ? 'pointer' : 'default'};
+const IconButton = styled.div `
+  color: ${(props) => props.$color};
+  display: flex;
+  align-items: center;
+  cursor: ${props => !props.$disabled ? 'pointer' : 'default'};
 `;
 const TextBox = forwardRef(({ label, type, additionalIcons = [], cursor = 'text', disabled, icon, onClick, onKeyDown, onValueChanged, placeHolder, readOnly, showSuccess, validationItems = [], value }, ref) => {
     const [showPassword, setShowPassword] = useState(false);

package/lib/components/forms/TMResultDialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ResultTypes } from '@topconsultnpm/sdk-ts';
-import DataGrid, { Column, HeaderFilter, Pager, Paging, Scrolling } from 'devextreme-react/cjs/data-grid';
+import DataGrid, { Column, HeaderFilter, Pager, Paging, Scrolling } from 'devextreme-react/data-grid';
 import ReactDOM from 'react-dom/client';
 import { IconSuccessCirlce, IconWarning, IconCloseCircle, IconInfo, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import { TMColors } from '../../utils/theme';
@@ -8,6 +8,7 @@ import ShowAlert from '../base/TMAlert';
 import { TMDeviceProvider } from '../base/TMDeviceProvider';
 import TMLayoutContainer from '../base/TMLayout';
 import TMModal from '../base/TMModal';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
 const cellRender = (cellData) => {
     const resultType = cellData.data.resultType;
     switch (resultType) {
@@ -19,7 +20,12 @@ const cellRender = (cellData) => {
     }
 };
 const TMResultDialog = ({ title, result, id1Caption, id2Caption }) => {
-    return (_jsx(TMModal, { height: '65%', width: '75%', title: `${SDKUI_Localizator.OperationResult} - ${title}`, children: _jsxs(TMLayoutContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '5px', padding: '5px', justifyContent: 'center', alignItems: 'center' }, children: [_jsx("p", { children: `${SDKUI_Localizator.ProcessedItems}: ${result.length}` }), _jsx(IconSuccessCirlce, { fontSize: 22, color: TMColors.success }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.SUCCESS).length ?? 0 }), _jsx(IconWarning, { fontSize: 22, color: TMColors.warning }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.WARNING).length ?? 0 }), _jsx(IconCloseCircle, { fontSize: 22, color: TMColors.error }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.ERROR).length ?? 0 })] }), _jsxs(DataGrid, { dataSource: result.filter(o => o.resultType != ResultTypes.SUCCESS), showColumnLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines) === 1, showRowLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines) === 1, keyExpr: "rowIndex", width: "100%", height: "100%", columnResizingMode: "widget", allowColumnResizing: true, focusedRowEnabled: true, hoverStateEnabled: true, rowAlternationEnabled: true, children: [_jsx(Column, { dataField: 'resultType', caption: '', width: "5%", allowResizing: true, allowSorting: true, cellRender: cellRender }), _jsx(Column, { dataField: 'id1', caption: id1Caption, width: "10%" }), id2Caption && _jsx(Column, { dataField: 'id2', caption: id2Caption, width: "10%" }), _jsx(Column, { dataField: 'description', allowResizing: true, caption: SDKUI_Localizator.Description, allowSorting: true, width: id2Caption ? "75%" : "85%" }), _jsx(HeaderFilter, { visible: true }), _jsx(Paging, { enabled: true, pageSize: 30 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(Scrolling, { mode: 'standard', useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 })] })] }) }));
+    const handleRowDblClick = (e) => {
+        if (e.data && e.data.description) {
+            TMExceptionBoxManager.show({ exception: e.data.description });
+        }
+    };
+    return (_jsx(TMModal, { height: '65%', width: '75%', title: `${SDKUI_Localizator.OperationResult} - ${title}`, children: _jsxs(TMLayoutContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '5px', padding: '5px', justifyContent: 'center', alignItems: 'center' }, children: [_jsx("p", { children: `${SDKUI_Localizator.ProcessedItems}: ${result.length}` }), _jsx(IconSuccessCirlce, { fontSize: 22, color: TMColors.success }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.SUCCESS).length ?? 0 }), _jsx(IconWarning, { fontSize: 22, color: TMColors.warning }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.WARNING).length ?? 0 }), _jsx(IconCloseCircle, { fontSize: 22, color: TMColors.error }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.ERROR).length ?? 0 })] }), _jsxs(DataGrid, { dataSource: result.filter(o => o.resultType != ResultTypes.SUCCESS), showColumnLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines) === 1, showRowLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines) === 1, keyExpr: "rowIndex", width: "100%", height: "100%", columnResizingMode: "widget", allowColumnResizing: true, focusedRowEnabled: true, hoverStateEnabled: true, rowAlternationEnabled: true, onRowDblClick: handleRowDblClick, children: [_jsx(Column, { dataField: 'resultType', caption: '', width: "5%", allowResizing: true, allowSorting: true, cellRender: cellRender }), _jsx(Column, { dataField: 'id1', caption: id1Caption, width: "10%" }), id2Caption && _jsx(Column, { dataField: 'id2', caption: id2Caption, width: "10%" }), _jsx(Column, { dataField: 'description', allowResizing: true, caption: SDKUI_Localizator.Description, allowSorting: true, width: id2Caption ? "75%" : "85%" }), _jsx(HeaderFilter, { visible: true }), _jsx(Paging, { enabled: true, pageSize: 30 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(Scrolling, { mode: 'standard', useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 })] })] }) }));
 };
 export default TMResultDialog;
 export class TMResultManager {

package/lib/components/forms/TMSaveForm.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { ResultTypes } from '@topconsultnpm/sdk-ts';
 import { FormModes } from '../../ts/types';
 import { IconArrowDown, IconArrowLeft, IconArrowUp, IconCloseCircle, IconHide, IconSave, IconShow, IconUndo, IconWarning, LocalizeFormModes, SDKUI_Localizator, getColor } from '../../helper';
@@ -11,7 +11,7 @@ import { TMColors } from '../../utils/theme';
 import TMValidationItemsList from '../grids/TMValidationItemsList';
 import TMModal from '../base/TMModal';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
-const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showSaveButton = true, customSaveButton, customTooltipSaveButton, showBackButton, showWarningsCount = true, showErrorCount = true, showUndoButton = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height, askClosingConfirm = false, showTitleFormMode = true }) => {
+const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showSaveButton = true, customSaveButton, customTooltipSaveButton, showBackButton, showWarningsCount = true, showErrorCount = true, showUndoButton = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height, askClosingConfirm = false, showTitleFormMode = true, showCloseButton = true }) => {
     const [showList, setShowList] = useState(true);
     const [showErrorGrid, setShowErrorGrid] = useState(false);
     const deviceType = useDeviceType();
@@ -90,14 +90,6 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipI
             }
         });
     };
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape')
-                doClose();
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [doClose]);
     const warningsCount = validationItems.filter(o => o.ResultType == ResultTypes.WARNING).length;
     const errorsCount = validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length;
     const renderSaveForm = () => {
@@ -110,7 +102,7 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipI
                                         _jsx("div", { style: { width: '100%', height: '100%', marginTop: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: getColor('error') }, children: 'Si è verificato un errore' })
                                     : _jsx(_Fragment, { children: children }) }), showErrorGrid && validationItems.length > 0 ? _jsx(TMCard, { scrollY: true, padding: false, showBorder: false, children: _jsx(TMValidationItemsList, { validationItems: validationItems }) }) : _jsx(_Fragment, {})] }) }), (isModal && onClose) && _jsx("div", { id: "TMSaveFormShowConfirmForClose-" + id })] }));
     };
-    return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: `${title}${showTitleFormMode ? ` - ${LocalizeFormModes(formMode)}` : ''}`, onClose: doClose, width: width ?? '100%', height: height ?? '100%', hidePopup: false, askClosingConfirm: askClosingConfirm, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block' }, children: renderSaveForm() }) }) })
+    return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: `${title}${showTitleFormMode ? ` - ${LocalizeFormModes(formMode)}` : ''}`, onClose: doClose, width: width ?? '100%', height: height ?? '100%', hidePopup: false, askClosingConfirm: askClosingConfirm, showCloseButton: showCloseButton, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block' }, children: renderSaveForm() }) }) })
             : renderSaveForm() }));
 };
 export default TMSaveForm;

package/lib/components/grids/TMBlogAttachments.d.ts

@@ -1,20 +1,7 @@
 import { BlogPostAttachment, DcmtTypeDescriptor } from "@topconsultnpm/sdk-ts";
-import { TMBlogContextDescriptor } from "./TMBlogsPostUtils";
 import { DcmtInfo } from "../../ts";
 import { FileItem } from "../base/TMFileManagerUtils";
 interface TMBlogAttachmentsProps {
-    contextMenuParams?: {
-        isShowHideFilterEnabled: boolean;
-        isShowHideIDEnaled: boolean;
-        isCommentEnabled: boolean;
-        isDownloadAttachmentEnabled: boolean;
-        isViewEditMetadata: boolean;
-        isDeleteEnabled: boolean;
-        isCopyToClipboardEnabled: boolean;
-        isRestoreEnabled: boolean;
-        isRefreshEnabled: boolean;
-        isCreateContextualTask: boolean;
-    };
     layoutMode: "compact" | "extended";
     attachments: Array<BlogPostAttachment>;
     isSelected: boolean;
@@ -34,7 +21,6 @@ interface TMBlogAttachmentsProps {
         fileExt: string;
         fileSize: string;
     }> | undefined;
-    context?: TMBlogContextDescriptor;
     handleAttachmentFocus: (attachment: DcmtInfo | undefined) => void;
     openDcmtForm: (dcmtInfo: DcmtInfo) => void;
 }

package/lib/components/grids/TMBlogAttachments.js

@@ -4,7 +4,7 @@ import { getAttachmentInfo, lightenColor, removeFileExtension } from "./TMBlogsP
 import TMDcmtIcon from "../features/documents/TMDcmtIcon";
 import { IconAttachment } from "../../helper";
 const TMBlogAttachments = (props) => {
-    const { attachments, isSelected, searchText, dcmtTypeDescriptors, treeFs, draftLatestInfoMap, archivedDocumentMap, handleAttachmentFocus, openDcmtForm } = props;
+    const { layoutMode, attachments, isSelected, searchText, dcmtTypeDescriptors, treeFs, draftLatestInfoMap, archivedDocumentMap, handleAttachmentFocus, openDcmtForm } = props;
     const handleMouseEnter = (e, blogPostAttachment, name, fileExt) => {
         e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.15)';
         e.currentTarget.style.backgroundColor = isSelected ? lightenColor("#135596", 40) : '#cfcfcf';
@@ -25,7 +25,7 @@ const TMBlogAttachments = (props) => {
     return _jsx("div", { style: { width: "100%", marginTop: "5px", overflow: "hidden" }, children: attachments.map((blogPostAttachment, index) => {
             const { name, nameElement, tooltipContent, fileExt, archivedDocumentsExist, draftExist } = getAttachmentInfo(blogPostAttachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText);
             return _jsx("div", { onDoubleClick: (e) => onDoubleClick(e, blogPostAttachment, name, fileExt), onMouseEnter: (e) => handleMouseEnter(e, blogPostAttachment, name, fileExt), onMouseLeave: (e) => handleMouseLeave(e), style: {
-                    display: 'inline-flex',
+                    display: layoutMode === "extended" ? "inline-flex" : "flex",
                     padding: '4px 8px',
                     margin: '4px',
                     border: '1px solid #ddd',
@@ -35,9 +35,14 @@ const TMBlogAttachments = (props) => {
                     cursor: "pointer",
                     fontSize: '0.9rem',
                     color: isSelected ? "#ffffff" : "#000000",
-                }, children: _jsxs("div", { style: { alignItems: 'center', display: 'flex' }, children: [(!archivedDocumentsExist && !draftExist) ?
-                            _jsx(IconAttachment, { style: { marginRight: "5px" } }) :
-                            _jsx("div", { style: { marginRight: "10px" }, children: _jsx(TMDcmtIcon, { tid: blogPostAttachment.tid, did: blogPostAttachment.did, fileExtension: fileExt, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }) }), _jsx("span", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: nameElement })] }) }, blogPostAttachment.did + "_" + index);
+                }, children: _jsxs("div", { style: { alignItems: 'center', display: 'flex', minWidth: 0 }, children: [(!archivedDocumentsExist && !draftExist) ?
+                            _jsx(IconAttachment, { style: { marginRight: "5px", flexShrink: 0 } }) :
+                            _jsx("div", { style: { marginRight: "10px", flexShrink: 0 }, children: _jsx(TMDcmtIcon, { tid: blogPostAttachment.tid, did: blogPostAttachment.did, fileExtension: fileExt, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }) }), _jsx("span", { title: layoutMode === 'compact' ? name + " (DID: " + blogPostAttachment.did + ")" : undefined, style: {
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                minWidth: 0,
+                            }, children: nameElement })] }) }, blogPostAttachment.did + "_" + index);
         }) });
 };
 export default TMBlogAttachments;

package/lib/components/grids/TMBlogsPost.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { BlogPost, HomeBlogPost, TaskDescriptor } from "@topconsultnpm/sdk-ts";
-import { DcmtInfo } from "../../ts";
+import { BlogPost, HomeBlogPost, TaskDescriptor, UserDescriptor } from "@topconsultnpm/sdk-ts";
+import { DcmtInfo, FormModes } from "../../ts";
 import { FileItem } from "../base/TMFileManagerUtils";
 import { TMBlogsPostHeader, TMBlogContextDescriptor } from "./TMBlogsPostUtils";
 interface TMBlogsPostProps {
@@ -41,6 +41,10 @@ interface TMBlogsPostProps {
     }>;
     /** Context descriptor for the blog component */
     context?: TMBlogContextDescriptor;
+    /** Array of participants */
+    participants?: Array<UserDescriptor>;
+    /** Callback function to be executed when a task is saved */
+    afterTaskSaved?: (task: TaskDescriptor | undefined, formMode: FormModes | undefined, forceRefresh?: boolean) => Promise<void>;
     /** Optional context menu params */
     contextMenuParams?: {
         isShowHideFilterEnabled: boolean;
@@ -74,11 +78,12 @@ interface TMBlogsPostProps {
     externalBlogPost?: BlogPost;
     /** Optional function to reset the external blog post */
     resetExternalBlogPost?: () => void;
+    visible?: boolean;
     allTasks?: Array<TaskDescriptor>;
     getAllTasks?: () => Promise<void>;
     deleteTaskByIdsCallback?: (deletedTaskIds: Array<number>) => Promise<void>;
-    addTaskCallback?: (task: TaskDescriptor) => Promise<void>;
     editTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    addTaskCallback?: (task: TaskDescriptor) => Promise<void>;
     handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
 }