@topconsultnpm/sdkui-react-beta 6.12.15 → 6.12.16

package/lib/components/choosers/TMDataListItemChooser.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { SDK_Localizator, DataListCacheService } from '@topconsultnpm/sdk-ts-beta';
-import { Column } from 'devextreme-react/cjs/data-grid';
 import { StyledDivHorizontal } from '../base/Styled';
 import { IconSearch, SDKUI_Localizator, TMImageLibrary } from '../../helper';
 import TMSpinner from '../base/TMSpinner';
@@ -19,10 +18,12 @@ const TMDataListItemChooser = ({ labelColor, dataListId, icon, backgroundColor,
 export default TMDataListItemChooser;
 const cellRenderIcon = (data) => _jsx(TMImageLibrary, { imageID: data.data?.imageID });
 export const TMDataListItemChooserForm = (props) => {
-    const renderDataGridColumns = [
-        _jsx(Column, { dataField: "value", caption: SDKUI_Localizator.Value }, 0),
-        _jsx(Column, { dataField: "name", caption: SDKUI_Localizator.Description }, 1)
-    ];
+    const dataColumns = useMemo(() => {
+        return [
+            { key: 0, dataField: 'value', caption: SDKUI_Localizator.Value },
+            { key: 1, dataField: 'name', caption: SDKUI_Localizator.Description }
+        ];
+    }, []);
     const getItems = async (refreshCache) => {
         if (!props.dataListId)
             return [];
@@ -39,5 +40,5 @@ export const TMDataListItemChooserForm = (props) => {
             title += `: ${props.title}`;
         return title;
     };
-    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, keyName: 'value', showDefaultColumns: false, hasShowId: false, columns: renderDataGridColumns, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, keyName: 'value', showDefaultColumns: false, hasShowId: false, columns: dataColumns, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
 };

package/lib/components/choosers/TMDiskChooser.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Column } from 'devextreme-react/cjs/data-grid';
+import { useEffect, useMemo, useState } from 'react';
 import { SDK_Localizator, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
 import { StyledDivHorizontal } from '../base/Styled';
 import TMSummary from '../editors/TMSummary';
@@ -25,6 +24,7 @@ const TMDiskChooser = ({ backgroundColor, elementStyle, values, dataSource, isMo
                 _jsx(TMDiskChooserForm, { selectedIDs: values, dataSource: dataSource, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMDiskChooser;
+const cellRenderIcon = () => _jsx(IconDisk, { color: '#767676' });
 export const TMDiskChooserForm = (props) => {
     const getItems = async (refreshCache) => {
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Disks} ...` });
@@ -32,8 +32,10 @@ export const TMDiskChooserForm = (props) => {
         TMSpinner.hide();
         return items ?? [];
     };
-    const renderDataGridColumns = [
-        _jsx(Column, { dataField: "uncPath", caption: 'Percorso UNC' }, 3),
-    ];
-    return (_jsx(TMChooserForm, { title: SDK_Localizator.Disks, allowMultipleSelection: false, hasShowId: true, showDefaultColumns: true, cellRenderIcon: () => _jsx(IconDisk, { color: '#767676' }), columns: renderDataGridColumns, manageUseLocalizedName: false, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => { props.onChoose?.(IDs); } }));
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: 'uncPath', caption: 'Percorso UNC' }
+        ];
+    }, []);
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Disks, allowMultipleSelection: false, hasShowId: true, showDefaultColumns: true, cellRenderIcon: cellRenderIcon, columns: dataColumns, manageUseLocalizedName: false, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => { props.onChoose?.(IDs); } }));
 };

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { DataColumnTypes, SDK_Localizator, DataListCacheService, SDK_Globals, LayoutModes } from '@topconsultnpm/sdk-ts-beta';
-import { Column } from 'devextreme-react/cjs/data-grid';
 import { IconDetails, IconSearch, getDataColumnName, Globalization, SDKUI_Localizator, searchResultDescriptorToSimpleArray, IsParametricQuery, IconWarning } from '../../helper';
 import { StyledDivHorizontal } from '../base/Styled';
 import TMSpinner from '../base/TMSpinner';
@@ -116,8 +115,9 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
                     } })] }));
 };
 export default TMDynDataListItemChooser;
+const cellRenderIcon = () => _jsx(IconDetails, {});
 export const TMDynDataListItemChooserForm = (props) => {
-    const renderDataGridColumns = props.searchResult?.dtdResult?.columns?.map((col, index) => {
+    const dataColumns = props.searchResult?.dtdResult?.columns?.map((col, index) => {
         let keyField = getDataColumnName(props.searchResult?.fromTID, col);
         const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
         const dataType = () => {
@@ -128,7 +128,7 @@ export const TMDynDataListItemChooserForm = (props) => {
                 default: return "string";
             }
         };
-        return (_jsx(Column, { dataField: keyField, caption: col.caption, visible: isVisible, dataType: dataType(), format: col.dataType === DataColumnTypes.DateTime ? Globalization.getDateDisplayFormat() : "" }, col.caption + index.toString()));
+        return { key: col.caption + index.toString(), dataField: keyField, caption: col.caption, visible: isVisible, dataType: dataType(), format: col.dataType === DataColumnTypes.DateTime ? Globalization.getDateDisplayFormat() : "" };
     });
     const keyValue = props.searchResult ? getDataColumnName(props.searchResult?.fromTID, props.searchResult?.dtdResult?.columns?.[props.dynDL?.selectItemForValue ?? 0]) : '';
     const getItems = async (refreshCache) => {
@@ -147,5 +147,5 @@ export const TMDynDataListItemChooserForm = (props) => {
             title += `: ${props.title}`;
         return title;
     };
-    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, keyName: keyValue ?? '', showDefaultColumns: false, hasShowId: false, columns: renderDataGridColumns, selectedIDs: props.selectedIDs, cellRenderIcon: () => { return (_jsx(IconDetails, {})); }, dataSource: searchResultDescriptorToSimpleArray(props.searchResult) ?? [], getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, keyName: keyValue ?? '', showDefaultColumns: false, hasShowId: false, columns: dataColumns, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: searchResultDescriptorToSimpleArray(props.searchResult) ?? [], getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
 };

package/lib/components/choosers/TMMetadataChooser.d.ts

@@ -3,39 +3,45 @@ import { MetadataDescriptor, QueryDescriptor, ValidationItem } from '@topconsult
 import { ITMChooserFormProps, ITMChooserProps, TID_MID } from '../../ts';
 import { TID_Alias } from '../../helper/queryHelper';
 interface ITMMetadataChooserProps extends ITMChooserProps {
-    /** Consente di visualizzare anche i metadati di sistema  */
+    /** Allows you to view system metadata  */
     allowSysMetadata?: boolean;
-    /** TIDs dei tipi documento da cui recuperare i metadati */
+    /** TIDs of document types to retrieve metadata from */
     tids?: number[];
-    /** Qd da cui recuperare i metadati */
+    /** Qd to retrieve metadata from */
     qd?: QueryDescriptor;
-    /** Contiene i TID / MID selezionati  */
+    /** List of selected TIDs / MIDs  */
     values?: TID_MID[];
-    /** Visualizza anche il nome del tipo documento  */
+    /** Displays the document type name  */
     showCompleteMetadataName?: boolean;
-    /** Se input è qd, visualizza solo i metadati presenti nella clausola Select */
+    /** Valid only if input is "qd". Displays only metadata present in the Select clause */
     qdShowOnlySelectItems?: boolean;
-    /** predicate function per filtrare i metadati. Significativo per un solo tid (tids)  */
-    filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown;
-    getColorIndex?: (tid: TID_Alias) => string;
+    /** show component border edge */
     showBorder?: boolean;
+    /** rounds the corners of border edge */
     borderRadius?: string;
+    /** if true, opens the form with a single click */
     openEditorOnSummaryClick?: boolean;
+    /** list of validation items */
     validationItems?: ValidationItem[];
+    /** predicate function to filter metadata. Meaningful for only one tid (tids)  */
+    filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown;
+    /** Gets the color related to the document type */
+    getColorIndex?: (tid: TID_Alias) => string;
 }
 declare const TMMetadataChooser: React.FunctionComponent<ITMMetadataChooserProps>;
 export default TMMetadataChooser;
 interface ITMMetadataChooserFormProps extends ITMChooserFormProps<MetadataDescriptor> {
-    /** Consente di visualizzare anche i metadati di sistema  */
+    /** Allows you to view system metadata  */
     allowSysMetadata?: boolean;
-    /** TIDs dei tipi documento da cui recuperare i metadati */
+    /** TIDs of document types to retrieve metadata from */
     tids?: number[];
-    /** predicate function per filtrare i metadati. Significativo per un solo tid (tids)  */
-    filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown;
-    /** Qd da cui recuperare i metadati */
+    /** Query to retrieve metadata from */
     qd?: QueryDescriptor;
-    /** Se input è qd, visualizza solo i metadati presenti nella clausola Select */
+    /** Valid only if input is "qd". Displays only metadata present in the Select clause  */
     qdShowOnlySelectItems?: boolean;
+    /** predicate function to filter metadata. Meaningful for only one tid (tids)  */
+    filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown;
+    /** Gets the color related to the document type */
     getColorIndex?: (tid: TID_Alias) => string;
 }
 export declare const TMMetadataChooserForm: React.FunctionComponent<ITMMetadataChooserFormProps>;

package/lib/components/choosers/TMMetadataChooser.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { DcmtTypeDescriptor, DcmtTypeListCacheService, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
-import { Column, GroupItem } from 'devextreme-react/cjs/data-grid';
 import { TMMetadataIcon, TMMidViewer, getDisplayAlias } from '../viewers/TMMidViewer';
 import { getTIDsByQd } from '../../helper/queryHelper';
 import { TMDcmtTypeIcon } from '../viewers/TMTidViewer';
@@ -22,10 +21,10 @@ const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, butto
 };
 export default TMMetadataChooser;
 export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdShowOnlySelectItems, selectedIDs, dataSource, allowMultipleSelection, allowSysMetadata = true, width, height, getColorIndex, onClose, onChoose }) => {
-    const [showSysMetadata, setShowSysMetadata] = useState(false);
+    const [showSysMetadata, setShowSysMetadata] = useState(allowSysMetadata && selectedIDs != undefined && selectedIDs.findIndex(o => o.mid < 150) >= 0);
     const [hasSysMetadata, setHasSysMetadata] = useState(false);
     const [dcmtTypes, setDcmtTypes] = useState([]);
-    const getItems = async (refreshCache) => {
+    const getItems = useCallback(async (refreshCache) => {
         let dtdList = [];
         let metadata = [];
         let checkProps = qd != undefined ? dataSource != undefined || tids != undefined : dataSource != undefined && tids != undefined;
@@ -85,9 +84,8 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
         }
         setDcmtTypes(dtdList);
         setHasSysMetadata(allowSysMetadata && metadata.findIndex(md => md.isSystem == 1) >= 0);
-        setShowSysMetadata(allowSysMetadata && selectedIDs != undefined && selectedIDs.findIndex(o => o.mid < 150) >= 0);
-        return metadata;
-    };
+        return showSysMetadata ? metadata : metadata.filter(o => o.isSystem != 1);
+    }, [showSysMetadata]);
     const cellRenderIcon = (data) => {
         let md = data.data;
         return (_jsx(TMMetadataIcon, { tid: md.customData1 ?? 0, md: md }));
@@ -97,20 +95,22 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
         let dtd = dcmtTypes?.find(o => o.id == tid_alias.tid);
         return _jsxs(StyledDxGridGroupHeader, { "$backgroundColor": getColorIndex?.(tid_alias), children: [_jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { children: getDisplayAlias(SDK_Globals.useLocalizedName ? dtd?.nameLoc : dtd?.name, tid_alias.alias) }), data.summaryItems && data.summaryItems.length > 0 && _jsx(StyledBadge, { "$backgroundColor": TMColors.info, children: data.summaryItems[0].value })] });
     };
-    const renderDataGridColumns = [
-        _jsx(Column, { dataField: 'isSystem', visible: false, width: 30 }, 0),
-        _jsx(Column, { dataField: 'customData2', visible: false, groupIndex: dcmtTypes.length > 1 ? 0 : undefined, calculateCellValue: (rowData) => {
-                let tid_alias = { tid: rowData.customData1, alias: rowData.customData2 };
-                return JSON.stringify(tid_alias);
-            }, groupCellRender: groupCellRender }, 1)
-    ];
-    const renderSummaryItems = [
-        _jsx(GroupItem, { column: "id", summaryType: "count" }, 2)
-    ];
-    const renderCustomButtons = () => {
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: 'isSystem', visible: false },
+            {
+                dataField: 'customData2', visible: false, groupIndex: dcmtTypes.length > 1 ? 0 : undefined, groupCellRender: groupCellRender,
+                calculateCellValue: (rowData) => {
+                    let tid_alias = { tid: rowData.customData1, alias: rowData.customData2 };
+                    return JSON.stringify(tid_alias);
+                }
+            }
+        ];
+    }, [dcmtTypes, groupCellRender]);
+    const renderSummaryItems = { groupItems: [{ column: 'id', summaryType: 'count' }] };
+    const renderCustomButtons = useCallback(() => {
         return (_jsx(StyledDivHorizontal, { children: hasSysMetadata && _jsx(TMButton, { caption: SDKUI_Localizator.ShowHideMetadataSystemDesc, icon: _jsx(IconSettings, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => setShowSysMetadata(!showSysMetadata) }) }));
-    };
-    const convertID = (md) => { return { tid: md.customData1, mid: md.id, aliasTID: md.customData2 }; };
-    const customFilter = (items) => { return showSysMetadata ? items : items.filter(o => o.isSystem != 1); };
-    return (_jsx(TMChooserForm, { title: SDK_Localizator.Metadatas, allowMultipleSelection: allowMultipleSelection, allowSorting: false, allowGrouping: dcmtTypes.length > 1, width: width, height: height, selectedIDs: selectedIDs?.map((item) => item.mid), convertID: convertID, customFilter: customFilter, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: (data) => { return _jsx("p", { style: { textAlign: 'left', color: data.data.isRequired == 1 ? 'red' : '' }, children: data.value }); }, dataSource: dataSource, getItems: getItems, customButtons: renderCustomButtons(), columns: renderDataGridColumns, summaryItems: renderSummaryItems, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
+    }, [hasSysMetadata, showSysMetadata]);
+    const convertID = useCallback((md) => { return { tid: md.customData1, mid: md.id, aliasTID: md.customData2 }; }, []);
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Metadatas, allowMultipleSelection: allowMultipleSelection, allowSorting: false, allowGrouping: dcmtTypes.length > 1, width: width, height: height, selectedIDs: selectedIDs?.map((item) => item.mid), convertID: convertID, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: (data) => { return _jsx("p", { style: { textAlign: 'left', color: data.data.isRequired == 1 ? 'red' : '' }, children: data.value }); }, dataSource: dataSource, getItems: getItems, customButtons: renderCustomButtons(), columns: dataColumns, summaryItems: renderSummaryItems, onClose: onClose, onChoose: (IDs) => { onChoose?.(IDs); } }));
 };

package/lib/components/choosers/TMRelationChooser.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { SDK_Globals, RelationTypes, RelationCacheService, DcmtTypeListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
 import { IconSearch, IconRelationManyToMany, IconRelationOneToMany, SDKUI_Localizator } from '../../helper';
 import TMChooserForm from '../forms/TMChooserForm';
 import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
-import { Column } from 'devextreme-react/cjs/data-grid';
 import TMSpinner from '../base/TMSpinner';
 import TMSummary from '../editors/TMSummary';
 import TMTooltip from '../base/TMTooltip';
@@ -24,6 +23,12 @@ const TMRelationChooser = ({ tmSession, icon, dataSource, disabled, backgroundCo
 };
 export default TMRelationChooser;
 export const TMRelationChooserForm = (props) => {
+    // const [showId, setShowId] = useState<boolean>(false);
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: 'name', width: 'max' }
+        ];
+    }, []);
     const getItems = async (refreshCache) => {
         let tms = SDK_Globals.tmSession;
         if (refreshCache)
@@ -37,15 +42,8 @@ export const TMRelationChooserForm = (props) => {
         rels = rels.filter((r) => r.relationType == props.relationType).slice();
         return rels;
     };
-    const [showId, setShowId] = useState(false);
-    const handleShowIdChanged = () => { setShowId(!showId); };
-    return (_jsx(TMChooserForm, { title: SDKUI_Localizator.Relations, allowMultipleSelection: props.allowMultipleSelection, hasShowOnlySelectedItems: true, width: props.width, height: props.height, selectedIDs: props.selectedIDs, 
-        //cellRenderIcon={(data: any) => { return props.relationType ==  RelationTypes.ManyToMany ? <IconRelationManyToMany /> : <IconRelationOneToMany /> }}
-        cellRenderIcon: (data) => { return _jsx(TMRelationIcon, { rd: data.data, relationType: props.relationType }); }, showDefaultColumns: false, 
-        //cellRenderNameAndDesc={in questo caso utilizzare data.data ==> es.: data.data.name}
-        columns: showId ?
-            [_jsx(Column, { dataField: 'id', visible: true, width: 'auto' }, 1), _jsx(Column, { dataField: 'name', visible: true, width: 'max' }, 2)] :
-            [_jsx(Column, { dataField: 'name', visible: true, width: 'max' }, 2)], dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs), onShowIdChanged: handleShowIdChanged, showId: props.showId }));
+    // const handleShowIdChanged = () => { setShowId(!showId); };
+    return (_jsx(TMChooserForm, { title: SDKUI_Localizator.Relations, allowMultipleSelection: props.allowMultipleSelection, hasShowOnlySelectedItems: true, width: props.width, height: props.height, selectedIDs: props.selectedIDs, cellRenderIcon: (data) => { return _jsx(TMRelationIcon, { rd: data.data, relationType: props.relationType }); }, showDefaultColumns: false, hasShowId: true, columns: dataColumns, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
 };
 export const TMRelationIdViewer = ({ relationType, relationId, showIcon = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
     const [rel, setRel] = useState();

package/lib/components/choosers/TMUserChooser.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { OwnershipLevels, SDK_Localizator, UserLevels, UserListCacheService } from '@topconsultnpm/sdk-ts-beta';
-import { Column } from 'devextreme-react/cjs/data-grid';
 import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconWarning, LocalizeOwnershipLevels, LocalizeUserLevels } from '../../helper';
 import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipSeparatorItem } from '../base/Styled';
 import TMSpinner from '../base/TMSpinner';
@@ -20,10 +19,12 @@ const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon,
 };
 export default TMUserChooser;
 export const TMUserChooserForm = ({ allowMultipleSelection, hideRefresh = false, hideShowId = false, startWithShowOnlySelectedItems = true, filter, title, hasShowOnlySelectedItems, width, height, selectedIDs, dataSource, onClose, onChoose }) => {
-    const renderDataGridColumns = [
-        _jsx(Column, { dataField: "domain", caption: SDKUI_Localizator.Domain, dataType: 'string' }, 2),
-        _jsx(Column, { dataField: "name", caption: SDKUI_Localizator.UserName, dataType: 'string' }, 3)
-    ];
+    const dataColumns = useMemo(() => {
+        return [
+            { key: 2, dataField: 'domain', caption: SDKUI_Localizator.Domain, dataType: 'string' },
+            { key: 2, dataField: 'name', caption: SDKUI_Localizator.UserName, dataType: 'string' }
+        ];
+    }, []);
     const getItems = async (refreshCache) => {
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
         if (refreshCache)
@@ -40,7 +41,7 @@ export const TMUserChooserForm = ({ allowMultipleSelection, hideRefresh = false,
         return title;
     };
     const cellRenderIcon = (data) => _jsx(TMUserIcon, { ud: data.data });
-    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: allowMultipleSelection, startWithShowOnlySelectedItems: startWithShowOnlySelectedItems, hasShowOnlySelectedItems: hasShowOnlySelectedItems, width: width, height: height, manageUseLocalizedName: false, showDefaultColumns: false, columns: renderDataGridColumns, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: dataSource, getItems: getItems, hasShowId: !hideShowId, hideRefresh: hideRefresh, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
+    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: allowMultipleSelection, startWithShowOnlySelectedItems: startWithShowOnlySelectedItems, hasShowOnlySelectedItems: hasShowOnlySelectedItems, width: width, height: height, manageUseLocalizedName: false, showDefaultColumns: false, columns: dataColumns, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: dataSource, getItems: getItems, hasShowId: !hideShowId, hideRefresh: hideRefresh, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
 };
 export const TMUserIdViewer = ({ userId, showIcon = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
     const [ud, setUd] = useState();
@@ -102,19 +103,17 @@ const getUserIcon = (userLevel, level, isExpired) => {
     let ownershipColor = "";
     if (isExpired)
         ownershipColor = "grey";
-    else {
-        if (level) {
-            switch (level) {
-                case OwnershipLevels.DirectOwner:
-                    ownershipColor = "green";
-                    break;
-                case OwnershipLevels.IndirectOwner:
-                    ownershipColor = "gold";
-                    break;
-                case OwnershipLevels.NotOwner:
-                    ownershipColor = "red";
-                    break;
-            }
+    else if (level) {
+        switch (level) {
+            case OwnershipLevels.DirectOwner:
+                ownershipColor = "green";
+                break;
+            case OwnershipLevels.IndirectOwner:
+                ownershipColor = "gold";
+                break;
+            case OwnershipLevels.NotOwner:
+                ownershipColor = "red";
+                break;
         }
     }
     switch (userLevel) {

package/lib/components/editors/TMHtmlEditor.d.ts

@@ -25,5 +25,3 @@ export interface ITMHtmlEditor {
     /** If true, enables rich text editing mode */
     isEditorEnabled?: boolean;
 }
-declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
-export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -23,6 +23,5 @@ const TMHtmlEditor = (props) => {
     const hasValidationErrors = useMemo(() => {
         return validationItems && validationItems.length > 0;
     }, [validationItems]);
-    return (_jsxs("div", { style: { height: validationItems.length > 0 ? `calc(${height} - 30px)` : "100%", width: width }, children: [_jsx("div", { style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", width: "100%", height: "100%" }, children: _jsx(HtmlEditor, { placeholder: SDKUI_Localizator.TypeAMessage + "...", ref: editorRef, width: "100%", height: "100%", value: markup, onValueChange: onValueChangeCallback, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none" }, children: isEditorEnabled && (_jsxs(Toolbar, { multiline: false, children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" })] })) }) }), _jsx("div", { style: { width: "100%", height: validationItems.length > 0 ? "30px" : '0px' }, children: _jsx(TMVilViewer, { vil: validationItems }) })] }));
+    return (_jsxs("div", { style: { height: validationItems.length > 0 ? `calc(${height} - 30px)` : "100%", width: width }, children: [_jsx("div", { style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", width: "100%", height: "100%" }, children: _jsx(HtmlEditor, { placeholder: SDKUI_Localizator.TypeAMessage + "...", ref: editorRef, width: "100%", height: "100%", value: markup, onValueChange: onValueChangeCallback, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none" }, children: isEditorEnabled && (_jsxs(Toolbar, { multiline: false, children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" })] })) }) }), _jsx("div", { style: { width: "100%", height: validationItems.length > 0 ? "30px" : '0px' }, children: _jsx(TMVilViewer, { vil: validationItems }) })] }));
 };
-export default TMHtmlEditor;

package/lib/components/editors/TMTextExpression.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts-beta';
-import { Column } from 'devextreme-react/cjs/data-grid';
 import { IconClear, IconColumns, IconDataList, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import { TMMetadataChooserForm } from '../choosers/TMMetadataChooser';
@@ -117,9 +116,14 @@ const TMTextExpression = (props) => {
                     props.onValueChanged?.(list);
                 } }) : _jsx(_Fragment, {}));
     };
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: 'paramName', caption: props.captionColumnChooser ?? SDKUI_Localizator.Name, dataType: 'string', sortOrder: 'asc', alignment: 'left' }
+        ];
+    }, []);
     const openFormulaChooseForm = () => {
         return (showFormulaChooser ?
-            _jsx(TMChooserForm, { title: props.titleChooser ? props.titleChooser : SDKUI_Localizator.Parameters, height: props.higthChooser ? props.higthChooser : '350', width: props.widthChooser ? props.widthChooser : '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: props.disableMultipleSelection === true ? false : true, columns: [_jsx(Column, { caption: props.captionColumnChooser ? props.captionColumnChooser : SDKUI_Localizator.Name, dataField: "paramName", sortOrder: 'asc', alignment: 'left' }, 0)], dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaChooser(false); }, onChoose: (IDs) => {
+            _jsx(TMChooserForm, { title: props.titleChooser ?? SDKUI_Localizator.Parameters, height: props.higthChooser ?? '350', width: props.widthChooser ?? '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: props.disableMultipleSelection !== true, columns: dataColumns, dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaChooser(false); }, onChoose: (IDs) => {
                     let expr = props.value ?? '';
                     IDs.map(i => expr += props.formulaItems[i]);
                     props.onValueChanged?.(expr);

package/lib/components/forms/TMChooserForm.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import DataGrid, { Column, Paging, Scrolling, Selection, LoadPanel, SearchPanel, Summary, TotalItem, HeaderFilter, Grouping, Pager } from 'devextreme-react/cjs/data-grid';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
 import { IconApply, IconHide, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMButton from '../base/TMButton';
@@ -8,53 +7,70 @@ import TMToggleButton from '../base/TMToggleButton';
 import TMModal from '../base/TMModal';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import { TMColors } from '../../utils/theme';
-const TMChooserForm = ({ children, title, allowMultipleSelection, startWithShowOnlySelectedItems = true, hasShowOnlySelectedItems = false, allowGrouping, allowSorting = true, width, height, dataSource, selectedIDs, manageUseLocalizedName = true, hasShowId = true, hideRefresh = false, keyName = "id", customButtons, showDefaultColumns = true, columns, summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }) => {
+import TMDataGrid from '../base/TMDataGrid';
+const TMChooserForm = ({ children, title, allowMultipleSelection, startWithShowOnlySelectedItems = true, hasShowOnlySelectedItems = false, allowGrouping, allowSorting = true, width, height, dataSource, selectedIDs, manageUseLocalizedName = true, hasShowId = true, hideRefresh = false, keyName = "id", customButtons, showDefaultColumns = true, columns = [], summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }) => {
     const [showId, setShowId] = useState(false);
-    const [showOnlySelectedItems, setShowOnlySelectedItems] = useState(startWithShowOnlySelectedItems && selectedIDs != undefined && selectedIDs.length > 0);
-    const [selectedItems, setSelectedItems] = useState([]);
-    const [items, setItems] = useState([]);
-    const [isInitialized, setIsInitialized] = useState(false);
-    let gridInstance;
-    const getDataSource = () => { return (allowMultipleSelection && hasShowOnlySelectedItems && showOnlySelectedItems && selectedItems.length > 0) ? selectedItems : customFilter ? customFilter(items) : items; };
-    const getSelectedIDs = () => { return selectedItems.map((item) => { return convertID ? convertID(item) : item[keyName]; }); };
-    const renderTitle = () => { return title ? `${title}  (${selectedItems.length}/${customFilter ? customFilter(items).length : items.length})` : SDKUI_Localizator.Select; };
+    const [showOnlySelectedItems, setShowOnlySelectedItems] = useState(hasShowOnlySelectedItems && startWithShowOnlySelectedItems && selectedIDs != undefined && selectedIDs.length > 0);
+    const [allItems, setAllItems] = useState([]);
+    const [filteredItems, setFilteredItems] = useState([]);
+    const [selectedRowKeys, setSelectedRowKeys] = useState(selectedIDs ?? []);
+    const [focusedRowKey, setFocusedRowKey] = useState(undefined);
+    useEffect(() => { doGetItems(false); }, [getItems]);
+    useEffect(() => {
+        if (showOnlySelectedItems)
+            setFilteredItems(allItems.filter((o) => selectedRowKeys?.includes(o[keyName])));
+        else
+            setFilteredItems(allItems);
+    }, [showOnlySelectedItems, allItems, selectedRowKeys, keyName]);
+    const getSelectedIDs = () => { return filteredItems.filter((o) => selectedRowKeys?.includes(o[keyName])).map((item) => { return convertID ? convertID(item) : item[keyName]; }); };
+    const getFocusedIDs = () => { return filteredItems.filter((o) => o[keyName] == focusedRowKey).map((item) => { return convertID ? convertID(item) : item[keyName]; }); };
+    const renderTitle = () => { return title ? `${title}  (${selectedRowKeys.length}/${filteredItems.length})` : SDKUI_Localizator.Select; };
     const doGetItems = (refreshCache) => {
         if (dataSource) {
-            setItems(dataSource);
-            setSelectedItems(dataSource.filter((o) => selectedIDs?.includes(o[keyName])));
+            setAllItems(dataSource);
             return;
         }
         getItems?.(refreshCache).then((result) => {
-            setItems(result);
-            if (!refreshCache) {
-                setSelectedItems(result.filter((o) => selectedIDs?.includes(o[keyName])));
-            }
+            setAllItems(result);
         });
     };
     const ToolbarButtons = () => {
-        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: '2px' }, children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Apply, disabled: selectedItems.length <= 0, icon: _jsx(IconApply, {}), color: 'success', fontSize: '1.3rem', onClick: () => { onChoose?.(getSelectedIDs()); onClose?.(); } }), hasShowId ? _jsx(TMButton, { btnStyle: 'toolbar', caption: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, icon: showId ? _jsx(IconHide, {}) : _jsx(IconShow, {}), fontSize: '1.3rem', onClick: () => { setShowId(!showId); onShowIdChanged?.(); } }) : _jsx(_Fragment, {}), !hideRefresh && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Refresh, icon: _jsx(IconRefresh, {}), fontSize: '1.3rem', onClick: () => { doGetItems(true); } }), customButtons, hasShowOnlySelectedItems && allowMultipleSelection && _jsx(TMToggleButton, { value: showOnlySelectedItems, elementStyle: { marginLeft: '10px' }, label: 'Mostra solo selezionati', onValueChanged: () => setShowOnlySelectedItems(!showOnlySelectedItems) })] }));
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: '2px' }, children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Apply, disabled: selectedRowKeys.length <= 0, icon: _jsx(IconApply, {}), color: 'success', fontSize: '1.3rem', onClick: () => { onChoose?.(getSelectedIDs()); onClose?.(); } }), hasShowId ? _jsx(TMButton, { btnStyle: 'toolbar', caption: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, icon: showId ? _jsx(IconHide, {}) : _jsx(IconShow, {}), fontSize: '1.3rem', onClick: () => { setShowId(!showId); onShowIdChanged?.(); } }) : _jsx(_Fragment, {}), !hideRefresh && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Refresh, icon: _jsx(IconRefresh, {}), fontSize: '1.3rem', onClick: () => { doGetItems(true); } }), customButtons, hasShowOnlySelectedItems && allowMultipleSelection && _jsx(TMToggleButton, { value: showOnlySelectedItems, elementStyle: { marginLeft: '10px' }, label: 'Mostra solo selezionati', onValueChanged: () => setShowOnlySelectedItems(!showOnlySelectedItems) })] }));
     };
-    useEffect(() => { doGetItems(false); }, []);
+    const handleSelectionChanged = useCallback((e) => {
+        const selectedKeys = e.component.getSelectedRowKeys() ?? [];
+        setSelectedRowKeys(selectedKeys);
+    }, []);
+    const handleRowDoubleClick = () => {
+        if (allowMultipleSelection && selectedRowKeys.length > 1)
+            return;
+        onChoose?.(getFocusedIDs());
+        onClose?.();
+    };
+    const handleFocusedRowChange = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+    }, []);
+    const dataColumns = useMemo(() => {
+        let dtColumns = [];
+        if (cellRenderIcon)
+            dtColumns.push({ width: 30, allowResizing: false, allowFiltering: false, allowSorting: false, cellRender: cellRenderIcon });
+        if (hasShowId)
+            dtColumns.push({ dataField: "id", visible: showId, dataType: 'number' });
+        if (showDefaultColumns)
+            dtColumns.push({ dataField: SDK_Globals.useLocalizedName && manageUseLocalizedName ? "nameLoc" : "name", caption: SDKUI_Localizator.Name, dataType: 'string', defaultSortOrder: allowSorting ? "asc" : undefined, cellRender: cellRenderNameAndDesc });
+        if (showDefaultColumns)
+            dtColumns.push({ dataField: "description", caption: SDKUI_Localizator.Description, dataType: 'string', cellRender: cellRenderNameAndDesc });
+        return dtColumns.concat(columns);
+    }, [columns, showId, cellRenderIcon, cellRenderNameAndDesc]);
+    const customSummary = useMemo(() => {
+        return ({
+            totalItems: [{ column: SDK_Globals.useLocalizedName && manageUseLocalizedName ? "nameLoc" : "name", summaryType: 'count' }],
+            ...summaryItems ?? {}
+        });
+    }, [manageUseLocalizedName, summaryItems]);
     return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: (children ??
-            items.length > 0) ?
-            _jsxs(DataGrid, { ref: (grid) => (gridInstance = grid), dataSource: getDataSource(), keyExpr: keyName, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, height: "100%", 
-                // selectedRowKeys={selectedItems.map((item: any) => { return item.id })}
-                onContentReady: (e) => {
-                    if (!isInitialized && items && items.length > 0) {
-                        let selection = selectedItems.map((item) => { return item[keyName]; }) ?? [];
-                        if (selection.length > 0) {
-                            gridInstance?.instance().selectRows(selection, false);
-                            if (!allowMultipleSelection)
-                                gridInstance?.instance().navigateToRow(selection[0]);
-                            setIsInitialized(true);
-                        }
-                    }
-                }, onRowDblClick: () => {
-                    onChoose?.(getSelectedIDs());
-                    onClose?.();
-                }, onSelectionChanged: (e) => { setSelectedItems(e.selectedRowsData); }, onToolbarPreparing: (e) => { e.toolbarOptions.items.forEach((item) => { if (item.name === "searchPanel")
-                    item.location = "before"; }); }, children: [cellRenderIcon && _jsx(Column, { width: 30, allowResizing: false, allowFiltering: false, allowSorting: false, cellRender: cellRenderIcon }, 0), hasShowId && _jsx(Column, { dataField: "id", visible: showId, dataType: 'number' }, 1), showDefaultColumns && _jsx(Column, { dataField: SDK_Globals.useLocalizedName && manageUseLocalizedName ? "nameLoc" : "name", caption: SDKUI_Localizator.Name, dataType: 'string', defaultSortOrder: allowSorting ? "asc" : undefined, cellRender: cellRenderNameAndDesc }, 2), showDefaultColumns && _jsx(Column, { dataField: "description", dataType: 'string', caption: SDKUI_Localizator.Description, cellRender: cellRenderNameAndDesc }, 3), columns, allowGrouping && _jsx(Grouping, { autoExpandAll: false, expandMode: 'rowClick' }), _jsx(HeaderFilter, { visible: true }), _jsx(Selection, { mode: allowMultipleSelection ? "multiple" : "single", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(Scrolling, { mode: "standard", useNative: SDKUI_Globals.dataGridUseNativeScrollbar }), _jsx(LoadPanel, { enabled: true }), _jsx(SearchPanel, { visible: true }), _jsx(Paging, { pageSize: 100 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsxs(Summary, { children: [_jsx(TotalItem, { column: SDK_Globals.useLocalizedName && manageUseLocalizedName ? "nameLoc" : "name", summaryType: "count" }), summaryItems] })] })
-            :
-                _jsx(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: _jsx(TMLayoutItem, { children: _jsx("p", { style: { height: "100%", color: TMColors.primaryColor, fontSize: "1.5rem", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: SDKUI_Localizator.NoDataToDisplay }) }) }) }));
+            filteredItems.length > 0)
+            ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: [...selectedRowKeys], showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
+            : _jsx(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: _jsx(TMLayoutItem, { children: _jsx("p", { style: { height: "100%", color: TMColors.primaryColor, fontSize: "1.5rem", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: SDKUI_Localizator.NoDataToDisplay }) }) }) }));
 };
 export default TMChooserForm;

package/lib/stories/TMHtmlContentDisplay.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import TMHtmlContentDisplay from '../components/editors/TMHtmlContentDisplay';
+declare const meta: Meta<typeof TMHtmlContentDisplay>;
+export default meta;
+type Story = StoryObj<typeof TMHtmlContentDisplay>;
+export declare const Default: Story;

package/lib/stories/TMHtmlContentDisplay.stories.js

@@ -0,0 +1,25 @@
+import TMHtmlContentDisplay from '../components/editors/TMHtmlContentDisplay';
+const sampleMarkup = `
+  <p>This is a <strong>sample</strong> paragraph with <a target="_blank" href="https://www.google.com/">a link</a>.</p>
+  <p>Another paragraph with the word</p>
+  <ul>
+    <li>First item</li>
+    <li>Second item</li>
+  </ul>
+`;
+const meta = {
+    title: 'Components/TMHtmlContentDisplay',
+    component: TMHtmlContentDisplay,
+    args: {
+        markup: sampleMarkup,
+        isSelected: false,
+        searchText: '',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        isSelected: false,
+        searchText: 'sample',
+    },
+};

package/lib/ts/types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { ITopMediaSession, ValidationItem } from "@topconsultnpm/sdk-ts-beta";
 import { ITMEditorBase } from "../components/base/TMEditorBase";
+import { IColumnProps } from "devextreme-react/cjs/data-grid";
 export declare enum FormModes {
     None = 0,
     Create = 1,
@@ -119,7 +120,6 @@ export interface ITMChooserFormProps<T> {
     children?: React.ReactNode;
     dataSource?: T[];
     selectedIDs?: any[];
-    getItems?: (refreshCache: boolean) => Promise<T[]>;
     width?: string;
     height?: string;
     allowSorting?: boolean;
@@ -129,15 +129,15 @@ export interface ITMChooserFormProps<T> {
     startWithShowOnlySelectedItems?: boolean;
     keyName?: string;
     customButtons?: React.ReactNode;
-    columns?: JSX.Element[];
-    summaryItems?: JSX.Element[];
+    columns?: IColumnProps[];
+    summaryItems?: any;
     showDefaultColumns?: boolean;
     hasShowId?: boolean;
-    showId?: boolean;
     hideRefresh?: boolean;
     title?: any;
     manageUseLocalizedName?: boolean;
     tmSession?: ITopMediaSession;
+    getItems?: (refreshCache: boolean) => Promise<T[]>;
     convertID?: (item: T) => any;
     customFilter?: (items: T[]) => T[];
     cellRenderIcon?: (data: any) => JSX.Element | null;

package/package.json

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