@topconsultnpm/sdkui-react 6.20.0-dev1.15 → 6.20.0-dev1.16

package/lib/components/editors/TMTextBox.js

@@ -0,0 +1,279 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { StyledEditor, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
+import { FontSize, TMColors } from '../../utils/theme';
+import { genUniqueId, IconClearButton, IconDataList, IconHide, IconShow, SDKUI_Localizator } from '../../helper';
+import ShowAlert from '../base/TMAlert';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
+import TMVilViewer from '../base/TMVilViewer';
+import TMTooltip from '../base/TMTooltip';
+import { ContextMenu } from 'devextreme-react';
+import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
+import TMChooserForm from '../forms/TMChooserForm';
+import { FormulaItemHelper } from './TMTextExpression';
+const StyledShowPasswordIcon = styled.div `
+    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    position: absolute;
+    right: 10px;
+    font-size: 18px;
+    transform: translateY(-25px);
+    cursor: pointer;
+`;
+const StyledTextBoxEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${TMColors.primary};
+     }
+`;
+const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = false, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, minValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur, borderRadius, allowedPattern }) => {
+    const [initialType, setInitialType] = useState(type);
+    const [currentType, setCurrentType] = useState(type);
+    const [currentValue, setCurrentValue] = useState(value);
+    const [formulaMenuItems, setFormulaMenuItems] = useState([]);
+    const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const deviceType = useDeviceType();
+    const [id, setID] = useState('');
+    useEffect(() => { setID(genUniqueId()); }, []);
+    useEffect(() => { setCurrentType(type); setInitialType(type); }, [type]);
+    useEffect(() => { setCurrentValue(value); }, [value]);
+    useEffect(() => {
+        if (initialType === 'password' && !value) {
+            setCurrentType('password');
+        }
+    }, [value]);
+    useEffect(() => {
+        if (currentType === 'number') {
+            if (currentValue) {
+                const numericValue = parseFloat(currentValue);
+                // Check maxValue
+                if (maxValue !== undefined && numericValue > maxValue) {
+                    setCurrentValue(maxValue.toString());
+                    ShowAlert({
+                        mode: 'warning',
+                        message: SDKUI_Localizator.Max_Value.replaceParams(maxValue.toString()),
+                        duration: 3000,
+                        title: SDKUI_Localizator.Warning,
+                    });
+                }
+                // Check minValue
+                if (minValue !== undefined && numericValue < minValue) {
+                    setCurrentValue(minValue.toString());
+                    ShowAlert({
+                        mode: 'warning',
+                        message: SDKUI_Localizator.Min_Value.replaceParams(minValue.toString()),
+                        duration: 3000,
+                        title: SDKUI_Localizator.Warning,
+                    });
+                }
+            }
+        }
+    }, [maxValue, minValue, currentValue, currentType]);
+    // Handle autofocus behavior on mount
+    useEffect(() => {
+        if (autoFocus && inputRef.current) {
+            if (fromModal) // utilizzato per i textBox derivanti da una Modal che non riescono a utilizzare l'autofocus
+                setTimeout(() => {
+                    inputRef.current && inputRef.current.focus(); // Focus the input field
+                }, 100);
+            else
+                inputRef.current.focus(); // Focus the input field
+        }
+    }, [autoFocus]); // This effect runs when the autoFocus prop changes
+    useEffect(() => {
+        if (formulaItems && formulaItems.length > 0) {
+            let menuItems = [];
+            for (const formula of formulaItems) {
+                menuItems.push({ text: formula });
+            }
+            setFormulaMenuItems(menuItems);
+        }
+    }, [formulaItems]);
+    const showPasswordIcon = () => {
+        if (initialType === 'secureText' && currentType === 'secureText')
+            return _jsx(IconShow, {});
+        if (initialType === 'secureText' && currentType === 'text')
+            return _jsx(IconHide, {});
+        if (initialType === 'password' && currentType === 'password') {
+            return _jsx(IconShow, {});
+        }
+        else if (initialType === 'password' && currentType === 'text') {
+            return _jsx(IconHide, {});
+        }
+        else {
+            return _jsx(_Fragment, {});
+        }
+    };
+    const toggleShowPassword = () => {
+        if (initialType === 'secureText') {
+            setCurrentType(currentType === 'secureText' ? 'text' : 'secureText');
+        }
+        else if (initialType === 'password') {
+            setCurrentType(currentType === 'password' ? 'text' : 'password');
+        }
+    };
+    const insertText = (textToInsert) => {
+        if (inputRef?.current == null)
+            return;
+        try {
+            let cursorposition = inputRef.current?.selectionStart;
+            let textbeforecursorposition = inputRef.current?.value.substring(0, cursorposition);
+            let textaftercursorposition = inputRef.current?.value.substring(cursorposition, inputRef.current?.value.length);
+            let newValue = textbeforecursorposition + textToInsert + textaftercursorposition;
+            inputRef.current.value = newValue;
+            onValueChanged?.({ target: { value: newValue } });
+            onBlur?.(newValue);
+            inputRef.current.focus();
+            inputRef.current.selectionStart = inputRef.current.selectionEnd = cursorposition + textToInsert.length;
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+    };
+    const getMaxValue = (curValue) => {
+        if (maxValue)
+            return maxValue;
+        if (precision || scale)
+            return Number("9".repeat((precision ?? 0) - (scale ?? 0)) + '.' + "9".repeat(scale ?? 0));
+        return Number(curValue);
+    };
+    const handleInputChange = (e) => {
+        let inputValue = e.target.value;
+        // Validazione generica con RegEx
+        if (allowedPattern) {
+            // Soluzione 1: Confronto diretto (preferibile per un singolo carattere)
+            // const allowedChar = allowedPattern.source.replace(/\\(.)/g, '$1'); // Estrae il carattere dalla RegEx (es. '\(' -> '(')
+            // inputValue = inputValue.split('').filter(char => char === allowedChar).join('');
+            // Soluzione 2: Creare una nuova istanza di RegExp ad ogni iterazione (meno efficiente ma funziona per pattern più complessi)
+            inputValue = inputValue.split('').filter(char => new RegExp(allowedPattern).test(char)).join('');
+        }
+        // se è mascherato (secureText) → l’utente non può digitare "•"
+        if (currentType === 'secureText') {
+            // Mantieni currentValue reale senza bullet
+            if (inputRef.current) {
+                const realValueLength = currentValue.length;
+                const newLength = inputValue.length;
+                if (newLength < realValueLength) {
+                    // Delete o backspace
+                    inputValue = currentValue.slice(0, newLength);
+                }
+                else {
+                    // Nuovi caratteri
+                    const addedText = inputValue.slice(realValueLength);
+                    inputValue = currentValue + addedText;
+                }
+            }
+        }
+        if (currentType === 'number') {
+            let number = Number(inputValue);
+            let max = getMaxValue(inputValue);
+            // Check maxValue
+            if (number > max) {
+                ShowAlert({
+                    mode: 'warning',
+                    message: `Max value is ${max}`,
+                    duration: 3000,
+                    title: SDKUI_Localizator.Warning,
+                });
+                // Non aggiornare lo stato con il valore non valido
+                return;
+            }
+            // Check minValue
+            if (minValue && number < minValue) {
+                ShowAlert({
+                    mode: 'warning',
+                    message: `Min value is ${minValue}`,
+                    duration: 3000,
+                    title: SDKUI_Localizator.Warning,
+                });
+                // Non aggiornare lo stato con il valore non valido
+                return;
+            }
+            let decimalSeparatorIndex = number
+                .toString()
+                .indexOf('.');
+            if (!scale && decimalSeparatorIndex >= 0) {
+                // Se non ci sono decimali consentiti e l'utente ne inserisce uno, non aggiornare
+                return;
+            }
+            // Controllo lunghezza decimali
+            if (scale) {
+                if (decimalSeparatorIndex >= 0) {
+                    let result = Number(number
+                        .toString()
+                        .substring(decimalSeparatorIndex + 1));
+                    if (result > Number('9'.repeat(scale ?? 0))) {
+                        // Se i decimali superano la scala consentita, non aggiornare
+                        return;
+                    }
+                }
+            }
+        }
+        setCurrentValue(inputValue);
+        onValueChanged?.({ target: { value: inputValue } }); // Passa il valore filtrato
+    };
+    function getFormulaDataSorce() {
+        let fiarray = [];
+        if (!formulaItems)
+            return [];
+        let i = 0;
+        for (const f of formulaItems) {
+            let fi = new FormulaItemHelper();
+            fi.id = i;
+            fi.paramName = f;
+            fiarray.push(fi);
+            i++;
+        }
+        return fiarray;
+    }
+    const openFormulaItemsChooser = () => {
+        return (showFormulaItemsChooser ?
+            _jsx(TMChooserForm, { title: SDKUI_Localizator.Parameters, height: '350', width: '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: true, columns: [
+                    { dataField: 'paramName', caption: SDKUI_Localizator.Name, dataType: 'string', sortOrder: 'asc', alignment: 'left' }
+                ], dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaItemsChooser(false); }, onChoose: (IDs) => {
+                    let expr = value?.toString() ?? '';
+                    IDs.map(i => expr += formulaItems[i]);
+                    onValueChanged?.({ target: { value: expr } });
+                } }) : _jsx(_Fragment, {}));
+    };
+    const renderInputField = () => {
+        const bulletEntity = '\u2022'; // &#8226;
+        const displayedValue = initialType === 'secureText'
+            ? (currentType === 'secureText'
+                ? bulletEntity.repeat(currentValue?.length ?? 0)
+                : currentValue ?? '')
+            : currentValue ?? '';
+        return (_jsxs("div", { style: { width: '100%', height: 'fit-content' }, id: `text-${id}`, children: [_jsx(StyledEditor, { ref: inputRef, id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: 'off', spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: handleInputChange, onKeyDown: (e) => {
+                        if (currentType === 'number') {
+                            if (!scale && (e.key == "." || e.key == ","))
+                                e.preventDefault();
+                        }
+                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
+                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : '6px', top: label.length > 0 ? '20px' : '3px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+                                _jsx(StyledTextBoxEditorButton, { onClick: () => {
+                                        setShowFormulaItemsChooser(true);
+                                    }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
+                                _jsx(StyledTextBoxEditorButton, { onClick: () => {
+                                        onValueChanged?.({ target: { value: undefined } });
+                                        onBlur?.(undefined);
+                                    }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
+                                return (_jsx(StyledTextBoxEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
+                            })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
+    };
+    const renderedLeftLabelTextBox = () => {
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), renderInputField()] }) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
+};
+export default TMTextBox;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
+import { ITMEditorBase } from '../base/TMEditorBase';
+interface ITMTextExpression extends ITMEditorBase {
+    value: string | undefined;
+    valueOrig: string | undefined;
+    qd?: QueryDescriptor;
+    tid?: number;
+    formulaItems?: string[];
+    label?: string;
+    titleChooser?: string;
+    captionColumnChooser?: string;
+    higthChooser?: string;
+    widthChooser?: string;
+    disableMultipleSelection?: boolean;
+    validationItems?: ValidationItem[];
+    rows?: number;
+    onValueChanged?: (newText: string | undefined) => void;
+}
+declare const TMTextExpression: React.FunctionComponent<ITMTextExpression>;
+export declare class FormulaItemHelper {
+    id: number;
+    paramName: string;
+}
+export default TMTextExpression;

package/lib/components/editors/TMTextExpression.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts';
+import { IconClear, IconColumns, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import { TMMetadataChooserForm } from '../choosers/TMMetadataChooser';
+import TMTextBox from './TMTextBox';
+import TMTextArea from './TMTextArea';
+const TMTextExpression = (props) => {
+    const [metadatas_Info_Source, setMetadatas_Info_Source] = useState([]);
+    const [showMetadataChooser, setShowMetadataChooser] = useState(false);
+    const [showFormulaChooser, setShowFormulaChooser] = useState(false);
+    useEffect(() => { MetadataInfos_Source_Get_Async(); }, [props.qd]);
+    useEffect(() => { MetadataInfos_Source_GetByTID_Async(); }, [props.tid]);
+    async function MetadataInfos_Source_Get_Async() {
+        if (!props.qd?.select)
+            return;
+        let mhs_source = [];
+        try {
+            let dtd_source;
+            let md_source;
+            let tid_source = -1;
+            let si;
+            let sis = props.qd?.select?.slice();
+            sis = sis.slice().sort((a, b) => a.tid - b.tid);
+            for (si of sis) {
+                if (si.tid == undefined || si.mid == undefined)
+                    continue;
+                if (tid_source != si.tid) {
+                    dtd_source = await DcmtTypeListCacheService.GetAsync(si.tid, true);
+                    if (dtd_source == undefined)
+                        continue;
+                    tid_source = si.tid;
+                }
+                if (dtd_source?.metadata == undefined)
+                    continue;
+                md_source = dtd_source.metadata.find(o => o.id == si.mid);
+                if (md_source?.name == undefined)
+                    continue;
+                if (tid_source == undefined)
+                    continue;
+                mhs_source.push(new MetatadaHelper(si.mid, md_source.name));
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e, title: 'MetadataInfos_Source_Get_Async' });
+        }
+        setMetadatas_Info_Source(mhs_source);
+    }
+    async function MetadataInfos_Source_GetByTID_Async() {
+        if (!props.tid)
+            return;
+        let mhs_source = [];
+        try {
+            let dtd_source = await DcmtTypeListCacheService.GetAsync(props.tid, true);
+            if (dtd_source == undefined)
+                return;
+            if (dtd_source?.metadata == undefined)
+                return;
+            for (let md_source of dtd_source?.metadata) {
+                if (md_source?.name == undefined)
+                    continue;
+                if (md_source?.id == undefined)
+                    continue;
+                mhs_source.push(new MetatadaHelper(md_source.id, md_source.name));
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e, title: 'MetadataInfos_Source_GetByTID_Async' });
+        }
+        setMetadatas_Info_Source(mhs_source);
+    }
+    function Expression_IDs2Names(expression) {
+        if (expression == undefined)
+            return expression;
+        let temp = expression.slice();
+        let mh;
+        for (mh of metadatas_Info_Source) {
+            temp = temp.replaceAll(`{@${mh.Mid}}`, `{@${mh.MetadataName}}`);
+        }
+        temp = temp.replaceAll("{@1}", "{@DID}");
+        return temp;
+    }
+    function Expression_Names2IDs(expression) {
+        if (expression == undefined)
+            return expression;
+        let temp = expression.slice();
+        let mh;
+        for (mh of metadatas_Info_Source)
+            temp = temp.replaceAll(`{@${mh.MetadataName}}`, `{@${mh.Mid}}`);
+        temp = temp.replaceAll("{@DID}", "{@1}");
+        return temp;
+    }
+    const renderButtons = () => {
+        let buttons = [];
+        if (props.qd || props.tid)
+            buttons.push({ icon: _jsx(IconColumns, {}), text: SDKUI_Localizator.MetadataReferenceInsert, onClick: () => { setShowMetadataChooser(true); } });
+        // if (props.formulaItems && props.formulaItems.length > 0) buttons.push({ icon: <IconDataList />, text: SDKUI_Localizator.Parameters, onClick: () => setShowFormulaChooser(true) })
+        buttons.push({ icon: _jsx(IconClear, {}), text: SDKUI_Localizator.Clear, onClick: () => props.onValueChanged?.('') });
+        return buttons;
+    };
+    function mdList(tids_mids) {
+        let output = props.value ?? '';
+        if (tids_mids == undefined)
+            return output;
+        let isAll = (tids_mids.length == props.qd?.select?.length);
+        if (isAll)
+            output = '';
+        for (let si of tids_mids) {
+            if (si.tid == undefined)
+                continue;
+            if (si.mid == undefined)
+                continue;
+            if (stringIsNullOrEmpty(output))
+                output = `{@${si.mid}}`;
+            else
+                output += (isAll ? '_' : '') + `{@${si.mid}}`;
+        }
+        return output;
+    }
+    // function getFormulaDataSorce() {
+    //     let fiarray: FormulaItemHelper[] = []
+    //     if (!props.formulaItems) return []
+    //     let i: number = 0;
+    //     for (const f of props.formulaItems!) {
+    //         let fi = new FormulaItemHelper();
+    //         fi.id = i; fi.paramName = f;
+    //         fiarray.push(fi);
+    //         i++;
+    //     }
+    //     return fiarray;
+    // }
+    const openMetadataChooseForm = () => {
+        return (showMetadataChooser ?
+            _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, qd: props.qd, tids: props.tid ? [props.tid] : undefined, qdShowOnlySelectItems: true, allowSysMetadata: true, onClose: () => setShowMetadataChooser(false), onChoose: (tid_mid) => {
+                    let list = mdList(tid_mid);
+                    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 ?
+    //         <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: number[]) => {
+    //                 let expr: string = props.value ?? '';
+    //                 IDs.map(i => expr += props.formulaItems![i]);
+    //                 props.onValueChanged?.(expr)
+    //             }}
+    //         /> : <></>
+    //     )
+    // }
+    return (_jsxs(_Fragment, { children: [props.rows === undefined ?
+                _jsx(TMTextBox, { buttons: renderButtons(), formulaItems: props.formulaItems, isModifiedWhen: props.value != props.valueOrig, label: props.label, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } })
+                :
+                    _jsx(TMTextArea, { buttons: renderButtons(), formulaItems: props.formulaItems, isModifiedWhen: props.value != props.valueOrig, label: props.label, rows: props.rows, resize: false, placeHolder: props.placeHolder, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } }), openMetadataChooseForm(), " "] }));
+};
+class MetatadaHelper {
+    constructor(mid, metadataName) {
+        this.Mid = mid;
+        this.MetadataName = metadataName;
+    }
+}
+export class FormulaItemHelper {
+    constructor() {
+        this.id = 0;
+        this.paramName = '';
+    }
+}
+export default TMTextExpression;

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

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

package/lib/components/editors/TMTreeDropDown.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import DropDownBox from 'devextreme-react/drop-down-box';
+import TreeView from 'devextreme-react/tree-view';
+import { SDKUI_Localizator } from '../../helper';
+import TMTooltip from '../base/TMTooltip';
+import { SDK_Localizator } from '@topconsultnpm/sdk-ts';
+// The TMTreeDropDown functional component
+const TMTreeDropDown = (props) => {
+    // Destructure props for easy access
+    const { dataSource, values, setValues, displayExpr, 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, outputFormat) => {
+        if (ids.length === 0)
+            return _jsx("p", { children: SDKUI_Localizator.SelectDesiredFilters });
+        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) => {
+        setTimeout(() => {
+            const treeView = (e.component.selectItem && e.component) || (treeViewRef.current && treeViewRef.current.instance());
+            if (treeView) {
+                // If the value is null, unselect all items in the tree view
+                if (e.value === null) {
+                    treeView.unselectAll();
+                }
+                else {
+                    // Otherwise, select the items corresponding to the selected values
+                    const treeValues = e.value || values;
+                    treeValues && treeValues.forEach((value) => { treeView.selectItem(value); });
+                }
+            }
+            // Update the selected values in the state if the event contains a value
+            if (e.value !== undefined) {
+                setValues(e.value);
+            }
+        });
+    }, [values]); // Dependency on 'values' state to update selection
+    // Event handler for when item selection changes in the TreeView
+    const treeViewItemSelectionChanged = useCallback((e) => {
+        // Get the selected node keys (IDs) from the TreeView
+        const selectedKeys = e.component.getSelectedNodeKeys();
+        let filteredKeys = selectedKeys;
+        if (isValidKey)
+            filteredKeys = selectedKeys.filter(isValidKey); // If a validation function is provided, filter the selected keys
+        setValues(filteredKeys);
+    }, []);
+    const displayValueFormatter = useCallback((value) => {
+        if (displayExpr)
+            return value.toString();
+        return SDK_Localizator.Filters + " (" + value.length + " " + SDKUI_Localizator.Applied + ")";
+    }, []);
+    const renderTreeViewItem = (item) => {
+        // Customize how tree view items are rendered with a tooltip
+        return (item.tooltipContent ? _jsx(TMTooltip, { content: item.tooltipContent, children: item.label }) : item.label);
+    };
+    return _jsx(TMTooltip, { content: getLabelsByIds(values, 'formatted'), children: _jsx(DropDownBox, { style: { minWidth: "230px", ...(elementStyle || {}), ...(elementStyle?.minWidth ? {} : { width: "230px" }) }, valueExpr: "id", displayExpr: "label", displayValueFormatter: displayValueFormatter, 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), itemRender: renderTreeViewItem }) }) });
+};
+export default TMTreeDropDown;

package/lib/components/features/archive/TMArchive.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
+interface ITMArchiveProps {
+    inputFile?: File | null;
+    inputMids?: Array<{
+        mid: number;
+        value: string;
+    }>;
+    inputTID?: number;
+    inputDID?: number;
+    onDcmtTypeSelect?: (tid: number | undefined) => void;
+    connectorFileSave?: () => Promise<File>;
+    onSavedAsyncCallback?: (tid: number | undefined, did: number | undefined) => Promise<void>;
+    enableDragDropOverlay?: boolean;
+    passToSearch?: (tid: number | undefined, outputMids: Array<{
+        mid: number;
+        value: string;
+    }>) => void;
+    isSharedArchive?: boolean;
+    allTasks?: Array<TaskDescriptor>;
+    getAllTasks?: () => Promise<void>;
+    deleteTaskByIdsCallback?: (deletedTaskIds: Array<number>) => Promise<void>;
+    addTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    editTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
+    handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
+}
+declare const TMArchive: React.FunctionComponent<ITMArchiveProps>;
+export default TMArchive;