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

package/lib/components/choosers/TMCultureIDPicker.js

@@ -15,44 +15,44 @@ const CULTUREIDs_DATASOURCE = [
     { value: CultureIDs.Es_ES, display: "Español", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Es_ES), alt: "Lang", width: 16, height: 16 }) },
     { value: CultureIDs.De_DE, display: "Deutsch", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.De_DE), alt: "Lang", width: 16, height: 16 }) },
 ];
-const PickerContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 20px;
+const PickerContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
 `;
-const ItemsContainer = styled.div `
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;
-    justify-content: center;
+const ItemsContainer = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    justify-content: center;
 `;
-const CultureItem = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    text-align: center;
-    font-size: 0.9em;
-    padding: 10px 15px;
-    border-radius: 8px;
-    border: 2px solid transparent;
-    transition: all 0.2s ease-in-out;
-    width: 120px;
-
-    &:hover {
-        background-color: #f0f0f0;
-    }
-
-    ${props => props.$isSelected && `
-        border-color: #007bff;
-        background-color: #e6f2ff;
-    `}
+const CultureItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    text-align: center;
+    font-size: 0.9em;
+    padding: 10px 15px;
+    border-radius: 8px;
+    border: 2px solid transparent;
+    transition: all 0.2s ease-in-out;
+    width: 120px;
+
+    &:hover {
+        background-color: #f0f0f0;
+    }
+
+    ${props => props.$isSelected && `
+        border-color: #007bff;
+        background-color: #e6f2ff;
+    `}
 `;
-const FlagIcon = styled.div `
-    margin-bottom: 5px;
-    font-size: 2em;
+const FlagIcon = styled.div `
+    margin-bottom: 5px;
+    font-size: 2em;
 `;
 const TMCultureIDPicker = ({ selectedValue, onSelectCultureID, placeHolder, width = '100%', icon, backgroundColor, readOnly = false, openChooserBySingleClick = false, buttons = [], elementStyle, isModifiedWhen, label, showClearButton = false, validationItems = [], onValueChanged }) => {
     const [showPicker, setShowPicker] = useState(false);

package/lib/components/choosers/TMDataListItemChooser.js

@@ -33,7 +33,7 @@ export const TMDataListItemChooserForm = (props) => {
         if (!props.dataListId)
             return [];
         if (refreshCache)
-            DataListCacheService.RemoveAll();
+            DataListCacheService.Remove();
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
         let dataList = await DataListCacheService.GetAsync(props.dataListId);
         TMSpinner.hide();

package/lib/components/choosers/TMDataListItemPicker.js

@@ -3,64 +3,64 @@ import { useEffect, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { DataListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { SDKUI_Localizator, TMImageLibrary } from '../../helper';
-const PickerContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 5px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+const PickerContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 `;
-const ItemsContainer = styled.div `
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 3px;
-  align-items: center;
-  overflow-x: auto;
-  padding: 10px;
+const ItemsContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 3px;
+  align-items: center;
+  overflow-x: auto;
+  padding: 10px;
 `;
-const slideIn = keyframes `
-  from {
-    opacity: 0;
-    transform: translateX(-50px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+const slideIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 `;
-const StatusItem = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  text-align: center;
-  font-size: 0.8em;
-  padding: 5px 10px;
-  border-radius: 8px;
-  border: 2px solid transparent;
-  transition: all 0.2s ease-in-out;
-  flex-shrink: 0;
-  
-  // Aggiungi l'animazione con un ritardo basato sull'indice
-  animation: ${slideIn} 0.5s ease-out forwards;
-  animation-delay: ${props => props.$index * 0.1}s;
-  opacity: 0; // Inizialmente l'elemento è invisibile
-
-  &:hover {
-    background-color: #f0f0f0;
-  }
-
-  ${props => props.$isSelected && `
-    border-color: #007bff;
-    background-color: #e6f2ff;
-  `}
+const StatusItem = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-align: center;
+  font-size: 0.8em;
+  padding: 5px 10px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  transition: all 0.2s ease-in-out;
+  flex-shrink: 0;
+  
+  // Aggiungi l'animazione con un ritardo basato sull'indice
+  animation: ${slideIn} 0.5s ease-out forwards;
+  animation-delay: ${props => props.$index * 0.1}s;
+  opacity: 0; // Inizialmente l'elemento è invisibile
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  ${props => props.$isSelected && `
+    border-color: #007bff;
+    background-color: #e6f2ff;
+  `}
 `;
-const Label = styled.div `
-  font-weight: bold;
-  margin-bottom: 5px;
+const Label = styled.div `
+  font-weight: bold;
+  margin-bottom: 5px;
 `;
 const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect }) => {
     const [dataList, setDataList] = useState(undefined);

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -23,7 +23,7 @@ const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, f
 export default TMDcmtTypeChooser;
 const cellRenderIcon = (data) => _jsx(TMDcmtTypeIcon, { dtd: data.data });
 const cellRenderNameAndDesc = (data) => _jsx("p", { style: { textAlign: 'left', color: data.data.isView ? 'red' : '' }, children: data.value });
-export const TMDcmtTypeChooserForm = ({ tmSession, allowMultipleSelection, width, height, selectedIDs, dataSource, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, accessFilter = 'all', filter, onClose, onChoose }) => {
+export const TMDcmtTypeChooserForm = ({ tmSession, allowMultipleSelection, width, height, selectedIDs, dataSource, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, accessFilter = 'all', startWithShowOnlySelectedItems = true, filter, onClose, onChoose }) => {
     const isPermitted = (accessLevel) => accessLevel === AccessLevelsEx.Yes || accessLevel === AccessLevelsEx.Mixed;
     const getItems = async (refreshCache) => {
         let tms = tmSession ?? SDK_Globals.tmSession;
@@ -57,5 +57,5 @@ export const TMDcmtTypeChooserForm = ({ tmSession, allowMultipleSelection, width
             return false;
         return true;
     };
-    return (_jsx(TMChooserForm, { title: SDK_Localizator.ListDcmtTypeOrView, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, width: width, height: height, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: dataSource, getItems: getItems, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.ListDcmtTypeOrView, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, startWithShowOnlySelectedItems: startWithShowOnlySelectedItems, width: width, height: height, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: dataSource, getItems: getItems, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
 };

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

@@ -2,6 +2,9 @@ import React from 'react';
 import { MetadataDescriptor, QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { ITMChooserFormProps, ITMChooserProps, TID_MID } from '../../ts';
 import { TID_Alias } from '../../helper/queryHelper';
+type MetadataDescriptorWithKey = MetadataDescriptor & {
+    uniqueKey: string;
+};
 interface ITMMetadataChooserProps extends ITMChooserProps {
     /** Allows you to view system metadata  */
     allowSysMetadata?: boolean;
@@ -32,7 +35,7 @@ interface ITMMetadataChooserProps extends ITMChooserProps {
 }
 declare const TMMetadataChooser: React.FunctionComponent<ITMMetadataChooserProps>;
 export default TMMetadataChooser;
-interface ITMMetadataChooserFormProps extends ITMChooserFormProps<MetadataDescriptor> {
+interface ITMMetadataChooserFormProps extends ITMChooserFormProps<MetadataDescriptorWithKey> {
     /** Allows you to view system metadata  */
     allowSysMetadata?: boolean;
     /** TIDs of document types to retrieve metadata from */

package/lib/components/choosers/TMMetadataChooser.js

@@ -38,7 +38,18 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
         if (checkProps)
             throw Error('Le props qd | tids | dataSource devono essere in alternativa');
         try {
-            if (qd) {
+            if (dataSource) {
+                // Se ho dataSource, aggiungo tutti i suoi metadati con uniqueKey
+                dataSource.forEach((md) => {
+                    const mdWithKey = md;
+                    mdWithKey.uniqueKey = `${mdWithKey.customData1 ?? 0}_${md.id}_${mdWithKey.customData2 ?? ''}`;
+                    metadata.push(mdWithKey);
+                });
+                setDcmtTypes(dtdList);
+                setHasSysMetadata(allowSysMetadata && metadata.findIndex(md => md.isSystem == 1) >= 0);
+                return showSysMetadata ? metadata : metadata.filter(o => o.isSystem != 1);
+            }
+            else if (qd) {
                 let tids = getTIDsByQd(qd);
                 let inputTIDs = tids.map((item) => item.tid);
                 TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DcmtType} ...` });
@@ -48,20 +59,26 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
                     dtd.init({ ...dtds[i] });
                     const alias = tids?.[i].alias ?? '';
                     dtd.customData2 = alias;
+                    let mds;
                     if (!qdShowOnlySelectItems) {
                         dtd.metadata?.forEach((md) => {
-                            md.customData1 = dtd.id;
-                            md.customData2 = alias;
+                            const mdWithKey = md;
+                            mdWithKey.customData1 = dtd.id;
+                            mdWithKey.customData2 = alias;
+                            mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${alias}`;
                         });
+                        mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
                     }
                     else {
                         let newMetadata = dtd.metadata?.filter(o => qd.select?.some(s => s.tid == dtd.id && s.mid == o.id && ((s.alias ?? '') == alias)));
                         newMetadata?.forEach((md) => {
-                            md.customData1 = dtd.id;
-                            md.customData2 = alias;
+                            const mdWithKey = md;
+                            mdWithKey.customData1 = dtd.id;
+                            mdWithKey.customData2 = alias;
+                            mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${alias}`;
                         });
+                        mds = filterMetadata ? newMetadata?.filter(filterMetadata) : newMetadata;
                     }
-                    let mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
                     dtdList.push({ ...dtd, metadata: mds });
                 }
             }
@@ -81,7 +98,11 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
                         continue;
                     }
                     let mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
-                    mds?.forEach((md) => { md.customData1 = dtd?.id; });
+                    mds?.forEach((md) => {
+                        const mdWithKey = md;
+                        mdWithKey.customData1 = dtd?.id;
+                        mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${md.customData2 ?? ''}`;
+                    });
                     dtdList.push({ ...dtd, metadata: mds });
                 }
             }
@@ -130,5 +151,7 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
     const cellRenderNameAndDesc = useCallback((data) => {
         return _jsx("p", { style: { textAlign: 'left', color: data.data.isRequired == 1 ? 'red' : '' }, children: data.value });
     }, []);
-    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: cellRenderNameAndDesc, dataSource: dataSource, getItems: getItems, customButtons: renderCustomButtons(), columns: dataColumns, summaryItems: renderSummaryItems, onClose: onClose, onChoose: (IDs) => { onChoose?.(IDs); } }));
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Metadatas, allowMultipleSelection: allowMultipleSelection, allowSorting: false, allowGrouping: dcmtTypes.length > 1, width: width, height: height, keyName: 'uniqueKey', selectedIDs: selectedIDs?.map((item) => `${item.tid}_${item.mid}_${item.aliasTID ?? ''}`), convertID: convertID, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, 
+        // dataSource={dataSource}
+        getItems: getItems, customButtons: renderCustomButtons(), columns: dataColumns, summaryItems: renderSummaryItems, onClose: onClose, onChoose: (IDs) => { onChoose?.(IDs); } }));
 };

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

@@ -14,6 +14,8 @@ interface ITMUserChooserProps extends ITMChooserProps {
     hideShowId?: boolean;
     /** Initial value for showChooser */
     initialShowChooser?: boolean;
+    /** Allow showing all users with toggle button */
+    allowShowAllUsers?: boolean;
 }
 declare const TMUserChooser: React.FunctionComponent<ITMUserChooserProps>;
 export default TMUserChooser;
@@ -24,6 +26,8 @@ interface ITMUserChooserFormProps extends ITMChooserFormProps<UserDescriptor> {
     hideRefresh?: boolean;
     /** Nascondi pulsante mostra ID */
     hideShowId?: boolean;
+    /** Allow showing all users with toggle button */
+    allowShowAllUsers?: boolean;
 }
 export declare const TMUserChooserForm: React.FunctionComponent<ITMUserChooserFormProps>;
 export declare const TMUserIdViewer: ({ userId, showIcon, noneSelectionText }: {

package/lib/components/choosers/TMUserChooser.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { OwnershipLevels, SDK_Localizator, UserLevels, UserListCacheService } from '@topconsultnpm/sdk-ts';
-import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconWarning, LocalizeOwnershipLevels, LocalizeUserLevels } from '../../helper';
+import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconWarning, LocalizeOwnershipLevels, LocalizeUserLevels, IconShowAllUsersOff, IconShowAllUsers } from '../../helper';
 import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipSeparatorItem } from '../base/Styled';
 import TMSpinner from '../base/TMSpinner';
 import TMTooltip from '../base/TMTooltip';
@@ -9,7 +9,8 @@ import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import { TMColors } from '../../utils/theme';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
-const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon, width, dataSource, backgroundColor, openChooserBySingleClick, buttons = [], disabled = false, showBorder = true, hideRefresh = false, hideShowId = false, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton, initialShowChooser = false }) => {
+import TMButton from '../base/TMButton';
+const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon, width, dataSource, backgroundColor, openChooserBySingleClick, buttons = [], disabled = false, showBorder = true, hideRefresh = false, hideShowId = false, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton, initialShowChooser = false, allowShowAllUsers = false }) => {
     const [showChooser, setShowChooser] = useState(initialShowChooser);
     useEffect(() => {
         setShowChooser(initialShowChooser);
@@ -20,13 +21,15 @@ const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon,
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true, noneSelectionText: '' }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, width: width, disabled: disabled, placeHolder: placeHolder, readOnly: readOnly, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
-                _jsx(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, onClose: () => {
+                _jsx(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, allowShowAllUsers: allowShowAllUsers, onClose: () => {
                         setShowChooser(false);
                         summaryInputRef.current?.focus();
                     }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMUserChooser;
-export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh = false, hideShowId = false, startWithShowOnlySelectedItems = true, filter, title, hasShowOnlySelectedItems, width, height, selectedIDs, dataSource, onClose, onChoose }) => {
+export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh = false, hideShowId = false, startWithShowOnlySelectedItems = true, filter, title, hasShowOnlySelectedItems, width, height, selectedIDs, dataSource, onClose, onChoose, allowShowAllUsers = false }) => {
+    const [currentDataSource, setCurrentDataSource] = useState(dataSource);
+    const [showingAllUsers, setShowingAllUsers] = useState(false);
     const dataColumns = useMemo(() => {
         return [
             { dataField: 'domain', caption: SDKUI_Localizator.Domain, dataType: 'string' },
@@ -42,6 +45,18 @@ export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh
         TMSpinner.hide();
         return users;
     };
+    const handleToggleAllUsers = () => {
+        if (showingAllUsers) {
+            // Torna indietro: ripristina il dataSource originale
+            setCurrentDataSource(dataSource);
+            setShowingAllUsers(false);
+        }
+        else {
+            // Mostra tutti: rimuove il dataSource per usare getItems
+            setCurrentDataSource(undefined);
+            setShowingAllUsers(true);
+        }
+    };
     const getTitle = () => {
         let title = SDK_Localizator.Users;
         if (title)
@@ -49,7 +64,8 @@ export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh
         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, columns: columns ?? dataColumns, showDefaultColumns: false, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: dataSource, getItems: getItems, hasShowId: !hideShowId, hideRefresh: hideRefresh, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
+    const customButton = (allowShowAllUsers && dataSource) ? (_jsx(TMButton, { btnStyle: 'toolbar', caption: showingAllUsers ? SDKUI_Localizator.HideAll : SDKUI_Localizator.ShowAll, onClick: handleToggleAllUsers, icon: showingAllUsers ? _jsx(IconShowAllUsersOff, {}) : _jsx(IconShowAllUsers, {}) })) : undefined;
+    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: allowMultipleSelection, startWithShowOnlySelectedItems: startWithShowOnlySelectedItems, hasShowOnlySelectedItems: hasShowOnlySelectedItems, width: width, height: height, manageUseLocalizedName: false, columns: columns ?? dataColumns, showDefaultColumns: false, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: currentDataSource, getItems: getItems, hasShowId: !hideShowId, hideRefresh: hideRefresh, customButtons: customButton, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
 };
 export const TMUserIdViewer = ({ userId, showIcon = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
     const [ud, setUd] = useState();

package/lib/components/editors/TMCheckBox.js

@@ -2,32 +2,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { FontSize, TMColors } from '../../utils/theme';
 import styled from 'styled-components';
-const StyledCheckBoxContainer = styled.div `
-    display: flex;
-    flex-direction: ${props => props.$labelPosition === 'right' ? 'row-reverse' : 'row'} ;
-    justify-content: flex-start;
-    align-items: center;
-    width: fit-content;
-    cursor: ${props => !props.$disabled && 'pointer'};
+const StyledCheckBoxContainer = styled.div `
+    display: flex;
+    flex-direction: ${props => props.$labelPosition === 'right' ? 'row-reverse' : 'row'} ;
+    justify-content: flex-start;
+    align-items: center;
+    width: fit-content;
+    cursor: ${props => !props.$disabled && 'pointer'};
 `;
-const StyledCheckBoxLabel = styled.div `
-    margin-right:  ${props => props.$labelPosition === 'left' ? '5px' : '0'};
-    margin-left:  ${props => props.$labelPosition === 'right' ? '5px' : '0'};
-    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : props.$labelColor ? props.$labelColor : TMColors.text_normal : TMColors.disabled};
-    font-size: ${props => props.$fontSize};
-    user-select: none;
-    &:focus{
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border-bottom: 2px solid;
-        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
-    }
+const StyledCheckBoxLabel = styled.div `
+    margin-right:  ${props => props.$labelPosition === 'left' ? '5px' : '0'};
+    margin-left:  ${props => props.$labelPosition === 'right' ? '5px' : '0'};
+    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : props.$labelColor ? props.$labelColor : TMColors.text_normal : TMColors.disabled};
+    font-size: ${props => props.$fontSize};
+    user-select: none;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
+    }
 `;
-const StyledCheckbox = styled.input `
-    accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled};
-    width: 14px;
-    height: 14px;
-    cursor: ${props => !props.$disabled && 'pointer'};
+const StyledCheckbox = styled.input `
+    accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled};
+    width: 14px;
+    height: 14px;
+    cursor: ${props => !props.$disabled && 'pointer'};
 `;
 const TMCheckBox = ({ labelColor, isModifiedWhen, elementStyle, disabled = false, label, value, labelPosition = 'right', fontSize = FontSize.defaultFontSize, onValueChanged }) => {
     const [initialValue, setInitialValue] = useState(value);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
-import { IDateBoxOptions } from 'devextreme-react/cjs/date-box';
+import { IDateBoxOptions } from 'devextreme-react/date-box';
 import { DateDisplayTypes } from '../../helper';
 interface ITMDateBoxProps extends IDateBoxOptions {
     dateDisplayType?: DateDisplayTypes;

package/lib/components/editors/TMDropDown.js

@@ -6,53 +6,53 @@ import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDe
 import TMLayoutContainer, { TMLayoutItem } from "../base/TMLayout";
 import TMVilViewer from "../base/TMVilViewer";
 import TMTooltip from "../base/TMTooltip";
-const StyledDropDownWrapper = styled.div `
-  position: relative;
-  width: ${props => props.$width};
-  display: flex;
-  align-items: center;
+const StyledDropDownWrapper = styled.div `
+  position: relative;
+  width: ${props => props.$width};
+  display: flex;
+  align-items: center;
 `;
-const StyledDropDown = styled.select `
-    width: 100%;
-    padding: 5px 35px 3px 9px; /* padding-right leaves space for buttons + custom arrow */
-    border: 1px solid;
-    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
-    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
-    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
-    color: ${props => !props.$disabled ? (props.$vil.length === 0 ? (!props.$isModified ? TMColors.text_normal : TMColors.isModified) : editorColorManager(props.$vil)) : TMColors.disabled};
-    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
-    font-size: ${props => props.$fontSize};
-    appearance: none; /* remove native arrow */
-    background-color: white;
-
-    &:focus {
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
-        border-bottom: 2px solid;
-        border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
-    }
+const StyledDropDown = styled.select `
+    width: 100%;
+    padding: 5px 35px 3px 9px; /* padding-right leaves space for buttons + custom arrow */
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => !props.$disabled ? (props.$vil.length === 0 ? (!props.$isModified ? TMColors.text_normal : TMColors.isModified) : editorColorManager(props.$vil)) : TMColors.disabled};
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
+    font-size: ${props => props.$fontSize};
+    appearance: none; /* remove native arrow */
+    background-color: white;
+
+    &:focus {
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
 `;
-const ButtonsContainer = styled.div `
-    position: absolute;
-    right: 20px; /* adjust depending on arrow size */
-    display: flex;
-    align-items: center;
-    gap: 5px; /* spacing between buttons */
+const ButtonsContainer = styled.div `
+    position: absolute;
+    right: 20px; /* adjust depending on arrow size */
+    display: flex;
+    align-items: center;
+    gap: 5px; /* spacing between buttons */
 `;
-const CustomArrow = styled.div `
-    position: absolute;
-    right: 5px;
-    pointer-events: none;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 5px solid ${TMColors.text_normal};
+const CustomArrow = styled.div `
+    position: absolute;
+    right: 5px;
+    pointer-events: none;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid ${TMColors.text_normal};
 `;
-const StyledDropDownEditorButton = styled.div `
-    color: ${TMColors.button_icon};
-    display: flex;
-    align-items: center;
-    cursor: pointer;
+const StyledDropDownEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 `;
 const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged, buttons = [], }) => {
     const [isFocused, setIsFocused] = useState(false);