@topconsultnpm/sdkui-react-beta 6.7.84 → 6.7.86

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

@@ -0,0 +1,16 @@
+import React from 'react';
+interface TMTreeDropDownProps {
+    dataSource: Array<{
+        id: number;
+        label: string;
+        value: string;
+        categoryId?: number;
+        expanded?: boolean;
+    }>;
+    values: Array<number>;
+    setValues: React.Dispatch<React.SetStateAction<Array<number>>>;
+    isValidKey?: (key: number) => boolean;
+    elementStyle?: React.CSSProperties | undefined;
+}
+declare const TMTreeDropDown: (props: TMTreeDropDownProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTreeDropDown;

package/lib/components/editors/{TMTreeDropdownBox.js → TMTreeDropDown.js}

@@ -4,16 +4,20 @@ import DropDownBox from 'devextreme-react/drop-down-box';
 import TreeView from 'devextreme-react/tree-view';
 import { TMTooltip } from '@topconsultnpm/sdkui-react-beta/lib';
 import { SDKUI_Localizator } from '../../helper';
-// The TMTreeDropDownBox functional component
-const TMTreeDropDownBox = (props) => {
+// The TMTreeDropDown functional component
+const TMTreeDropDown = (props) => {
     // Destructure props for easy access
     const { dataSource, values, setValues, isValidKey, elementStyle } = props;
     // Reference to the TreeView component for programmatic control
     const treeViewRef = useRef(null);
     // Helper function to get a comma-separated string of labels for the selected IDs
-    const getLabelsByIds = (ids) => {
-        const labels = dataSource.filter(item => ids.includes(item.id)).map(item => item.label);
-        return labels.join(', ');
+    const getLabelsByIds = (ids, outputFormat) => {
+        const filteredLabels = dataSource.filter(item => ids.includes(item.id));
+        if (outputFormat === 'text') {
+            const labels = filteredLabels.map(item => item.label).join(', ');
+            return _jsx("p", { children: labels });
+        }
+        return (_jsx("div", { style: { textAlign: 'left' }, children: filteredLabels.map(item => (_jsx("p", { children: item.label }, item.id))) }));
     };
     // Synchronizes the selection in the TreeView when the dropdown value changes
     const syncTreeViewSelection = useCallback((e) => {
@@ -43,6 +47,6 @@ const TMTreeDropDownBox = (props) => {
             filteredKeys = selectedKeys.filter(isValidKey); // If a validation function is provided, filter the selected keys
         setValues(filteredKeys);
     }, []);
-    return _jsx(TMTooltip, { content: getLabelsByIds(values), children: _jsx(DropDownBox, { width: "100%", style: elementStyle, valueExpr: "id", displayExpr: "label", value: values, dataSource: dataSource, placeholder: SDKUI_Localizator.SelectDesiredFilters, onContentReady: syncTreeViewSelection, focusStateEnabled: true, contentRender: () => _jsx(TreeView, { ref: treeViewRef, keyExpr: "id", dataSource: dataSource, selectByClick: true, selectNodesRecursive: true, selectionMode: "multiple", displayExpr: "label", parentIdExpr: "categoryId", dataStructure: "plain", showCheckBoxesMode: "normal", onContentReady: syncTreeViewSelection, onItemSelectionChanged: (e) => treeViewItemSelectionChanged(e) }) }) });
+    return _jsx(TMTooltip, { content: getLabelsByIds(values, 'formatted'), children: _jsx(DropDownBox, { width: "100%", style: elementStyle, valueExpr: "id", displayExpr: "label", value: values, dataSource: dataSource, placeholder: SDKUI_Localizator.SelectDesiredFilters, onContentReady: syncTreeViewSelection, focusStateEnabled: true, contentRender: () => _jsx(TreeView, { ref: treeViewRef, keyExpr: "id", dataSource: dataSource, selectByClick: true, selectNodesRecursive: true, selectionMode: "multiple", displayExpr: "label", parentIdExpr: "categoryId", dataStructure: "plain", showCheckBoxesMode: "normal", onContentReady: syncTreeViewSelection, onItemSelectionChanged: (e) => treeViewItemSelectionChanged(e) }) }) });
 };
-export default TMTreeDropDownBox;
+export default TMTreeDropDown;

package/lib/components/index.d.ts

@@ -17,6 +17,7 @@ export { default as TMToggleButton } from './base/TMToggleButton';
 export { default as TMTooltip } from './base/TMTooltip';
 export { default as TMVilViewer } from './base/TMVilViewer';
 export { default as TMDropDown } from './editors/TMDropDown';
+export { default as TMTreeDropDown } from './editors/TMTreeDropDown';
 export { default as TMSummary } from './editors/TMSummary';
 export { default as TMTextBox } from './editors/TMTextBox';
 export { default as TMTextArea } from './editors/TMTextArea';

package/lib/components/index.js

@@ -21,6 +21,7 @@ export { default as TMTooltip } from './base/TMTooltip';
 export { default as TMVilViewer } from './base/TMVilViewer';
 //editors
 export { default as TMDropDown } from './editors/TMDropDown';
+export { default as TMTreeDropDown } from './editors/TMTreeDropDown';
 export { default as TMSummary } from './editors/TMSummary';
 export { default as TMTextBox } from './editors/TMTextBox';
 export { default as TMTextArea } from './editors/TMTextArea';

package/package.json

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

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

@@ -1,17 +0,0 @@
-import React from 'react';
-export interface ITMTreeDataSource {
-    id: number;
-    label: string;
-    value: string;
-    categoryId?: number;
-    expanded?: boolean;
-}
-interface TMTreeDropDownBoxProps {
-    dataSource: Array<ITMTreeDataSource>;
-    values: Array<number>;
-    setValues: React.Dispatch<React.SetStateAction<Array<number>>>;
-    isValidKey?: (key: number) => boolean;
-    elementStyle?: React.CSSProperties | undefined;
-}
-declare const TMTreeDropDownBox: (props: TMTreeDropDownBoxProps) => import("react/jsx-runtime").JSX.Element;
-export default TMTreeDropDownBox;