@topconsultnpm/sdkui-react 6.22.0-dev2.8 → 6.22.0-dev3.2

package/lib/components/layout/panelManager/TMPanelManagerContext.js

@@ -14,12 +14,14 @@ export const TMPanelManagerProvider = (props) => {
     const defaultPanelDimensionsRef = useRef(defaultDimensions);
     // Memoize the panel hierarchy map to avoid re-generating it on every render unless `panels` change
     const hierarchyMap = useMemo(() => generatePanelHierarchyMap(panels), [panels]);
-    // State to track the dimensions (width and height) of each panel, initialized with props
-    const [panelDimensions, setPanelDimensions] = useState(initialDimensions);
+    // State to track the visibility and the dimensions (width and height) of each panel, initialized with props
+    const [panelLayout, setPanelLayout] = useState({ visibility: {}, dimensions: initialDimensions });
+    // Visibility of each panel, keyed by panel ID
+    const panelVisibility = panelLayout.visibility;
+    // Dimensions of each panel, keyed by panel ID
+    const panelDimensions = panelLayout.dimensions;
     // IDs of maximized panels, including their parents if present
     const [maximizedPanels, setMaximizedPanels] = useState([]);
-    // State to track the visibility of each panel, keyed by panel ID
-    const [panelVisibility, setPanelVisibility] = useState({});
     // State to track visibility of toolbar buttons, keyed by panel ID
     const [toolbarButtonsVisibility, setToolbarButtonsVisibility] = useState({});
     // State to track disabled status of toolbar buttons, keyed by panel ID
@@ -31,94 +33,73 @@ export const TMPanelManagerProvider = (props) => {
         setToolbarButtonsVisibility(visibilityMap);
         setToolbarButtonsDisabled(disabledMap);
     }, []);
-    // Callback to update the visibility state of a specific panel and its related hierarchy
-    const adjustPanelVisibilityAndSize = useCallback((id, isVisible, prevVisibility) => {
+    // Callback to update the visibility state of a specific panel and its related hierarchy, redistributing the dimensions accordingly
+    const adjustPanelVisibilityAndSize = useCallback((id, isVisible, prevLayout) => {
         // Clone previous visibility state to work with
-        let updatedVisibility = { ...prevVisibility };
-        if (isMobile) {
-            if (isVisible) {
-                // On mobile, showing one panel hides all others first
-                updatedVisibility = Object.keys(prevVisibility).reduce((acc, key) => { acc[key] = false; return acc; }, {});
-                // Recursively determine and show parent panels
-                const parentsToShow = showParentRecursively(id, hierarchyMap);
-                parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Show the target panel
-                updatedVisibility[id] = true;
-                // Redistribute dimensions to account for newly shown panel
-                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility));
-            }
-            else {
-                // Hide the panel
-                updatedVisibility[id] = false;
-                // Recursively hide parents
-                const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
-                parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                4;
-                // Redistribute dimensions after hiding
-                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updatedVisibility));
+        let updatedVisibility = { ...prevLayout.visibility };
+        let updatedDimensions;
+        if (isVisible) {
+            // On mobile, showing one panel hides all others first
+            if (isMobile) {
+                updatedVisibility = Object.keys(prevLayout.visibility).reduce((acc, key) => { acc[key] = false; return acc; }, {});
             }
+            // Recursively determine and show parent panels
+            const parentsToShow = showParentRecursively(id, hierarchyMap);
+            parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
+            // Show the target panel
+            updatedVisibility[id] = true;
+            // Redistribute dimensions to account for newly shown panel
+            updatedDimensions = redistributeDimensionsOnShow(id, prevLayout.dimensions, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
         }
         else {
-            if (isVisible) {
-                // On desktop, show panel and its parents without hiding others
-                const parentsToShow = showParentRecursively(id, hierarchyMap);
-                parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Show the panel
-                updatedVisibility[id] = true;
-                // Adjust panel dimensions accordingly
-                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility));
-            }
-            else {
-                // Hide the panel
-                updatedVisibility[id] = false;
-                // Recursively hide parent panels
-                const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
-                parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Adjust dimensions after hiding
-                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updatedVisibility));
-            }
+            // Hide the panel
+            updatedVisibility[id] = false;
+            // Recursively hide parents
+            const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
+            parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
+            // Redistribute dimensions after hiding
+            updatedDimensions = redistributeDimensionsOnHide(id, prevLayout.dimensions, hierarchyMap, updatedVisibility);
         }
-        return updatedVisibility;
+        return { visibility: updatedVisibility, dimensions: updatedDimensions };
     }, [hierarchyMap, isMobile]);
     // On initial mount: initialize panel visibility using the provided `initialVisibility` config
     // Each panel's visibility is processed through `updatePanelVisibility` to ensure hierarchy logic is applied
     useEffect(() => {
         if (isPersistenceEnabled) {
             // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
-            setPanelVisibility(initialVisibility);
-            setPanelDimensions(initialDimensions);
+            setPanelLayout({ visibility: initialVisibility, dimensions: initialDimensions });
         }
         else {
             // If persistence is not enabled, recalculate visibility and dimensions based on the initial visibility, applying the hierarchy logic
-            let updated = { ...initialVisibility };
-            Object.entries(initialVisibility).forEach(([id, isVisible]) => {
-                updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+            setPanelLayout(prev => {
+                let updated = { visibility: { ...initialVisibility }, dimensions: prev.dimensions };
+                Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                    updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                });
+                return updated;
             });
-            // Update panel visibility state with recalculated values
-            setPanelVisibility(updated);
         }
     }, []);
     // On mobile devices: automatically show the initial mobile panel when layout switches to mobile
     // This ensures the correct panel is visible by default on smaller screens
     useEffect(() => {
         if (isMobile) {
-            setPanelVisibility(prev => {
-                return adjustPanelVisibilityAndSize(initialMobilePanelId, true, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(initialMobilePanelId, true, prev));
         }
         else {
             if (isPersistenceEnabled) {
                 // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
-                setPanelVisibility(initialVisibility);
+                setPanelLayout(prev => ({ ...prev, visibility: initialVisibility }));
             }
             else {
                 // If persistence is not enabled, recalculate visibility and dimensions based on the initial visibility, applying the hierarchy logic
-                let updated = { ...initialVisibility };
-                Object.entries(initialVisibility).forEach(([id, isVisible]) => {
-                    updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                setPanelLayout(prev => {
+                    let updated = { visibility: { ...initialVisibility }, dimensions: prev.dimensions };
+                    Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                        updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                    });
+                    return updated;
                 });
-                // Update panel visibility state with recalculated values
-                setPanelVisibility(updated);
             }
         }
     }, [isMobile]);
@@ -131,9 +112,9 @@ export const TMPanelManagerProvider = (props) => {
         // Update state to track which panels are maximized
         setMaximizedPanels(toMaximize);
         // Update panel dimensions accordingly
-        setPanelDimensions(prev => {
+        setPanelLayout(prev => {
             const newDimensions = {};
-            Object.keys(prev).forEach(pid => {
+            Object.keys(prev.dimensions).forEach(pid => {
                 if (toMaximize.includes(pid)) {
                     // For maximized panels (target + parents), set width and height to 100%
                     newDimensions[pid] = { width: '100%', height: '100%' };
@@ -143,31 +124,31 @@ export const TMPanelManagerProvider = (props) => {
                     newDimensions[pid] = { width: '0%', height: '0%' };
                 }
             });
-            return newDimensions;
+            return { ...prev, dimensions: newDimensions };
         });
     }, [hierarchyMap]);
     // Restore all panels to their original dimensions
     const resetMaximization = useCallback(() => {
         // Clear the list of maximized panels to exit maximize mode
         setMaximizedPanels([]);
-        // Clone the current visibility state of panels
-        let updatedVisibility = { ...panelVisibility };
         // Start with the initial panel dimensions as the base for restoration
-        let nextDimensions = { ...defaultPanelDimensionsRef.current };
-        nextDimensions = Object.entries(updatedVisibility).reduce((acc, [id, isVisible]) => {
-            if (isVisible) {
-                // If the panel is visible, adjust dimensions to show it properly
-                acc = redistributeDimensionsOnShow(id, acc, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
-            }
-            else {
-                // If the panel is hidden, adjust dimensions to hide it
-                acc = redistributeDimensionsOnHide(id, acc, hierarchyMap, updatedVisibility);
-            }
-            return acc;
-        }, defaultPanelDimensionsRef.current);
-        // Apply the recalculated dimensions to the panel state
-        setPanelDimensions(nextDimensions);
-    }, [panelVisibility, hierarchyMap]);
+        setPanelLayout(prev => {
+            const updatedVisibility = prev.visibility;
+            const nextDimensions = Object.entries(updatedVisibility).reduce((acc, [id, isVisible]) => {
+                if (isVisible) {
+                    // If the panel is visible, adjust dimensions to show it properly
+                    acc = redistributeDimensionsOnShow(id, acc, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
+                }
+                else {
+                    // If the panel is hidden, adjust dimensions to hide it
+                    acc = redistributeDimensionsOnHide(id, acc, hierarchyMap, updatedVisibility);
+                }
+                return acc;
+            }, defaultPanelDimensionsRef.current);
+            // Apply the recalculated dimensions to the panel state
+            return { ...prev, dimensions: nextDimensions };
+        });
+    }, [hierarchyMap]);
     // Toggle the maximized state of a panel by its ID
     const toggleMaximize = useCallback((id) => {
         if (maximizedPanels.includes(id)) {
@@ -186,17 +167,11 @@ export const TMPanelManagerProvider = (props) => {
             // If it is maximized, first reset all maximized panels to their original state
             resetMaximization();
             // Then update the visibility of the panel, toggling its current state
-            setPanelVisibility(prev => {
-                const isCurrentlyVisible = prev[id];
-                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(id, !prev.visibility[id], prev));
         }
         else {
             // If the panel is not maximized, simply toggle its visibility
-            setPanelVisibility(prev => {
-                const isCurrentlyVisible = prev[id];
-                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(id, !prev.visibility[id], prev));
         }
     }, [maximizedPanels, resetMaximization, adjustPanelVisibilityAndSize]);
     // Sets the visibility of a panel by its ID to a specific value (true = show, false = hide)
@@ -206,14 +181,14 @@ export const TMPanelManagerProvider = (props) => {
             resetMaximization();
         }
         // Then update the visibility state of the panel to the given value
-        setPanelVisibility(prev => adjustPanelVisibilityAndSize(id, isVisible, prev));
+        setPanelLayout(prev => adjustPanelVisibilityAndSize(id, isVisible, prev));
     }, [maximizedPanels, resetMaximization, adjustPanelVisibilityAndSize]);
     // Sets the dimensions (width and height) of a specific panel by its ID
     const setPanelDimensionsById = useCallback((id, width, height) => {
         // Update the ref holding the initial dimensions
         defaultPanelDimensionsRef.current = { ...defaultPanelDimensionsRef.current, [id]: { width, height } };
         // Update the panel dimensions state
-        setPanelDimensions(prev => ({ ...prev, [id]: { width, height } }));
+        setPanelLayout(prev => ({ ...prev, dimensions: { ...prev.dimensions, [id]: { width, height } } }));
     }, []);
     // Checks if there is at least one panel currently visible
     const hasVisiblePanels = useCallback(() => {

package/lib/components/layout/panelManager/TMPanelManagerToolbar.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
 import { TMPanelDefinition } from './types';
-export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isDisabled" | "$isActive"> & {
+export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $isActive?: boolean;
     $isDisabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isDisabled" | "$isActive"> & {
-    $isActive?: boolean;
-    $isDisabled?: boolean;
-}, never>>> & string;
+}>> & string;
 interface TMPanelManagerToolbarProps {
     panels: Array<TMPanelDefinition>;
 }
-declare const TMPanelManagerToolbar: (props: TMPanelManagerToolbarProps) => React.JSX.Element;
+declare const TMPanelManagerToolbar: (props: TMPanelManagerToolbarProps) => import("react/jsx-runtime").JSX.Element;
 export default TMPanelManagerToolbar;

package/lib/components/layout/panelManager/TMPanelManagerToolbar.js

@@ -77,7 +77,7 @@ const TMPanelManagerToolbar = (props) => {
             const isDisabled = toolbarButtonsDisabled[visibleLeafPanel.id];
             const count = visibleLeafPanel.toolbarOptions?.count ?? 0;
             const tooltip = visibleLeafPanel.toolbarOptions?.tooltip ?? '';
-            return _jsx(TMTooltip, { content: tooltip || (visibleLeafPanel.name + (count > 0 ? ": " + count : '')), position: isMobile ? 'top' : 'left', children: _jsxs(StyledToolbarButton, { disabled: isDisabled, "$isDisabled": isDisabled, onClick: () => onClickCallback(visibleLeafPanel.id, isActive), "$isActive": isActive || visibleLeafPanel.toolbarOptions?.alwaysActiveColor, children: [typeof visibleLeafPanel.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${visibleLeafPanel.toolbarOptions?.icon}` })) : (visibleLeafPanel.toolbarOptions?.icon), (!isActive && count > 0) && _jsxs(Badge, { "$background": visibleLeafPanel.toolbarOptions?.countBackgroundColor, children: [" ", formatCount(count), " "] })] }, visibleLeafPanel.id) }, visibleLeafPanel.id);
+            return _jsx(TMTooltip, { content: tooltip || (visibleLeafPanel.name + (count > 0 ? ": " + count : '')), position: isMobile ? 'top' : 'left', children: _jsxs(StyledToolbarButton, { disabled: isDisabled, $isDisabled: isDisabled, onClick: () => onClickCallback(visibleLeafPanel.id, isActive), $isActive: isActive || visibleLeafPanel.toolbarOptions?.alwaysActiveColor, children: [typeof visibleLeafPanel.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${visibleLeafPanel.toolbarOptions?.icon}` })) : (visibleLeafPanel.toolbarOptions?.icon), (!isActive && count > 0) && _jsxs(Badge, { $background: visibleLeafPanel.toolbarOptions?.countBackgroundColor, children: [" ", formatCount(count), " "] })] }, visibleLeafPanel.id) }, visibleLeafPanel.id);
         }) }));
 };
 export default TMPanelManagerToolbar;

package/lib/components/layout/panelManager/TMPanelManagerWithPersistenceProvider.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import type { TMPanelDefinition, TMPanelDimensionsMap } from './types';
 interface TMPanelManagerWithPersistenceProps {
     children: ReactNode;
@@ -17,5 +17,5 @@ interface TMPanelManagerWithPersistenceProps {
     }>) => void;
     persistedPanelStates?: Record<string, any>;
 }
-export declare const TMPanelManagerWithPersistenceProvider: (props: TMPanelManagerWithPersistenceProps) => React.JSX.Element | null;
+export declare const TMPanelManagerWithPersistenceProvider: (props: TMPanelManagerWithPersistenceProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/lib/components/layout/panelManager/TMPanelWrapper.d.ts

@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { TMPanelDefinition } from './types';
 interface TMPanelWrapperProps {
     panel: TMPanelDefinition;
     children: ReactNode;
 }
-declare const TMPanelWrapper: (props: TMPanelWrapperProps) => React.JSX.Element | null;
+declare const TMPanelWrapper: (props: TMPanelWrapperProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TMPanelWrapper;

package/lib/components/layout/panelManager/TMPanelWrapper.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useState, useEffect } from 'react';
 import { useTMPanelManagerContext } from './TMPanelManagerContext';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
@@ -34,8 +34,8 @@ const TMPanelWrapper = (props) => {
         // Applica 'flex' o 'none' solo se è già stato reso visibile almeno una volta
         display: isCurrentlyVisible ? 'flex' : 'none',
         flexDirection: 'column',
-        minWidth: '50px',
-        minHeight: '50px',
+        minWidth: panel.contentOptions?.minWidth ?? '50px',
+        minHeight: panel.contentOptions?.minHeight ?? '50px',
         width: width,
         height: height,
         pointerEvents: 'auto',

package/lib/components/layout/panelManager/types.d.ts

@@ -12,6 +12,9 @@ export interface TMPanelDefinition {
         isClosable?: boolean;
         isMaximizable?: boolean;
         panelContainer?: ITMPanelProps;
+        minWidth?: string;
+        minHeight?: string;
+        isCollapsed?: boolean;
     };
     toolbarOptions?: {
         icon: string | JSX.Element;

package/lib/components/layout/panelManager/utils.js

@@ -97,18 +97,20 @@ export const redistributeDimensionsOnHide = (hiddenPanelId, currentDimensions, h
     const hiddenWidthNum = parseFloat(hiddenDims.width);
     const hiddenHeightNum = parseFloat(hiddenDims.height);
     const visibleSiblings = siblings.filter(siblingId => panelVisibility[siblingId]);
-    const widthIncrement = hiddenWidthNum / visibleSiblings.length;
-    const heightIncrement = hiddenHeightNum / visibleSiblings.length;
     let newDimensions = { ...currentDimensions };
-    visibleSiblings.forEach(siblingId => {
-        const siblingDims = newDimensions[siblingId] || { width: '0%', height: '0%' };
-        const siblingWidthNum = parseFloat(siblingDims.width) || 0;
-        const siblingHeightNum = parseFloat(siblingDims.height) || 0;
-        const newWidthNum = Math.min(siblingWidthNum + widthIncrement, 100);
-        const newHeightNum = Math.min(siblingHeightNum + heightIncrement, 100);
-        newDimensions[siblingId] = { width: `${newWidthNum}%`, height: `${newHeightNum}%` };
-    });
-    newDimensions[hiddenPanelId] = { width: '0%', height: '0%' };
+    if (visibleSiblings.length > 0) {
+        const widthIncrement = hiddenWidthNum / visibleSiblings.length;
+        const heightIncrement = hiddenHeightNum / visibleSiblings.length;
+        visibleSiblings.forEach(siblingId => {
+            const siblingDims = newDimensions[siblingId] || { width: '0%', height: '0%' };
+            const siblingWidthNum = parseFloat(siblingDims.width) || 0;
+            const siblingHeightNum = parseFloat(siblingDims.height) || 0;
+            const newWidthNum = Math.min(siblingWidthNum + widthIncrement, 100);
+            const newHeightNum = Math.min(siblingHeightNum + heightIncrement, 100);
+            newDimensions[siblingId] = { width: `${newWidthNum}%`, height: `${newHeightNum}%` };
+        });
+        newDimensions[hiddenPanelId] = { width: '0%', height: '0%' };
+    }
     // Ora controllo se il parent non ha più figli visibili e chiamo ricorsivamente
     if (parentId) {
         const parentInfo = hierarchyMap.get(parentId);

package/lib/components/pages/TMPage.d.ts

@@ -34,5 +34,5 @@ interface ITMPage<T> {
     /** Indica il cambiamento dei contatori della lista (totali, selezionati e visibili) */
     onCountersChanged?: (totalItemsCount: number, selectedItemsCount: number, visibleItemsCount: number) => void;
 }
-declare const TMPage: <T>({ id, objClass, listDisabled, lastRefreshTime, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, onSelectionChanged, onCountersChanged }: ITMPage<T>) => React.JSX.Element;
+declare const TMPage: <T>({ id, objClass, listDisabled, lastRefreshTime, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, onSelectionChanged, onCountersChanged }: ITMPage<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMPage;

package/lib/components/pages/TMPage.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from "react";
 import { SDK_Globals, ObjectClasses, ResultTypes } from "@topconsultnpm/sdk-ts";
 import DataGrid, { Column, GroupPanel, Grouping, HeaderFilter, LoadPanel, Pager, Paging, Scrolling, SearchPanel, Selection } from "devextreme-react/data-grid";

package/lib/components/query/TMQueryCountButton.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TMButton from '../base/TMButton';
 import { getQueryCountAsync, IconCount, IsParametricQuery, SDKUI_Localizator } from '../../helper';
 import { useQueryParametersDialog } from '../../hooks/useQueryParametersDialog';

package/lib/components/query/TMQueryEditor.d.ts

@@ -2,18 +2,14 @@ import React from 'react';
 import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { ITMApplyFormProps, FormModes } from '../../ts';
 import type { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
-export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$borderRadius"> & {
+export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $borderRadius?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$borderRadius"> & {
-    $borderRadius?: string;
-}, never>>> & string;
-export declare const StyledAccordionItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledAccordionItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
-    $disabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
+}>> & string;
+export declare const StyledAccordionItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAccordionItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled?: boolean;
-}, never>>> & string;
+}>> & string;
 export declare const colorValue = "rgba(224,224,224,.5)";
 export declare const colorBrackets = "rgba(209,52,56,.3)";
 export declare const colorOperator = "rgba(16,124,16,.3)";

package/lib/components/query/TMQueryEditor.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import { SDK_Localizator, AccessLevels, OnJoinItem, JoinTypes, PlatformObjectValidator, MetadataDataDomains, DcmtTypeListCacheService, JoinItem, MetadataDataTypes, OrderByItem, QueryFunctions, QueryOperators, ResultTypes, SelectItem, SDK_Globals, UserListCacheService, WhereItem, SearchEngine, SelectItemVisibilities, DataListCacheService, QueryValidatorOptions, TMPropertyNames, AppModules, LayoutModes } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
@@ -744,7 +744,7 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                     }
                                 }
                             }
-                        }, children: [(!isReadOnly || fromCount > 0) && _jsx(Item, { title: SDKUI_Localizator.Source, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, fromCount, validationItems.filter((o) => [TMPropertyNames.fromTid, TMPropertyNames.join].includes(o.PropertyName))), children: _jsx(StyledAccordionItemContainer, { style: { maxHeight: fromCount > 0 ? '330px' : '100%' }, children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, style: { height: '100%' }, children: [_jsxs(StyledRowItem, { children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => { let qd = SearchEngine.NewQueryDescriptor(); setFormData({ ...qd }); } }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', elementStyle: { opacity: !formData?.from?.tid ? 0.4 : 1 }, disabled: !formData?.from?.tid, icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: onAdd_JoinItem }), _jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMQdDropDownMenu, { content: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }), items: [
+                        }, children: [(!isReadOnly || fromCount > 0) && _jsx(Item, { title: SDKUI_Localizator.Source, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, fromCount, validationItems.filter((o) => [TMPropertyNames.fromTid, TMPropertyNames.join].includes(o.PropertyName))), children: _jsx(StyledAccordionItemContainer, { style: { maxHeight: fromCount > 0 ? '330px' : '100%' }, children: _jsxs(StyledAccordionItemContent, { $disabled: isReadOnly, style: { height: '100%' }, children: [_jsxs(StyledRowItem, { children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => { let qd = SearchEngine.NewQueryDescriptor(); setFormData({ ...qd }); } }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', elementStyle: { opacity: !formData?.from?.tid ? 0.4 : 1 }, disabled: !formData?.from?.tid, icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: onAdd_JoinItem }), _jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMQdDropDownMenu, { content: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }), items: [
                                                                 { icon: showId ? _jsx(IconHide, { color: TMColors.button_icon }) : _jsx(IconShow, { color: TMColors.button_icon }), name: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, onClick: () => setShowId(!showId) },
                                                                 { icon: showCompleteMetadataName ? _jsx(IconHide, { color: TMColors.primary }) : _jsx(IconShow, { color: TMColors.primary }), name: showCompleteMetadataName ? SDKUI_Localizator.Hide_CompleteName : SDKUI_Localizator.Show_CompleteName, onClick: () => setShowCompleteMetadataName(!showCompleteMetadataName) }
                                                             ] }) }), _jsx(TMDcmtTypeChooser, { disabled: isReadOnly, showEditButton: false, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, ShowOnlySAP: ShowOnlySAP, openEditorOnSummaryClick: true, showBorder: false, showId: showId, backgroundColor: getColorIndex({ tid: formData.from?.tid, alias: undefined }), values: [formData.from?.tid], validationItems: validationItems.filter((o) => o.PropertyName === TMPropertyNames.fromTid), onValueChanged: (tids) => { let qd = SearchEngine.NewQueryDescriptor(); qd.from.tid = tids[0]; setFormData({ ...qd }); onFromTIDChanged?.(tids[0]); }, updateIsModalOpen: updateIsModalOpen })] }), formData?.join?.map((ji, index) => {
@@ -774,12 +774,12 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                                                             { name: 'OR', onClick: () => onChange_OnJoinItem_Or(true, index, indexOn) }
                                                                         ] }), _jsx(TMQdEditableItem, { value: onItem.leftBrackets, allowedPattern: /\(/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_OnJoinItem_Brackets(value, true, index, indexOn); } }), _jsx(TMMetadataChooser, { disabled: isReadOnly, showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: onItem.leftTID, alias: onItem.leftAlias }), qd: formData, values: onItem.leftTID ? [{ tid: onItem.leftTID, mid: onItem.leftMID, aliasTID: onItem.leftAlias }] : [], onValueChanged: (values) => { values.length > 0 && onChange_OnJoinMetadatoLeft(values[0], index, indexOn); }, updateIsModalOpen: updateIsModalOpen }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(onItem.operator) }), items: [] }), _jsx(TMMetadataChooser, { disabled: isReadOnly, showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: onItem.rightTID, alias: onItem.rightAlias }), qd: formData, values: onItem.rightTID ? [{ tid: onItem.rightTID, mid: onItem.rightMID, aliasTID: onItem.rightAlias }] : [], onValueChanged: (values) => { values.length > 0 && onChange_OnJoinMetadatoRight(values[0], index, indexOn); }, updateIsModalOpen: updateIsModalOpen }), _jsx(TMQdEditableItem, { value: onItem.rightBrackets, allowedPattern: /\)/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_OnJoinItem_Brackets(value, false, index, indexOn); } })] }, indexOn));
                                                         })] }, `${ji.tid}_${index}`));
-                                            }), _jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.join) })] }) }) }), canShowSelect && _jsx(Item, { title: SDK_Localizator.QuerySelect, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, selectCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.select)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.select) }), (!formData?.select || formData?.select.length <= 0) && !isReadOnly &&
+                                            }), _jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.join) })] }) }) }), canShowSelect && _jsx(Item, { title: SDK_Localizator.QuerySelect, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, selectCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.select)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { $disabled: isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.select) }), (!formData?.select || formData?.select.length <= 0) && !isReadOnly &&
                                                 _jsxs(StyledRowItem, { children: [_jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_SelectItem }), dcmtTypesList.length == 1
                                                             ? _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls, onClick: () => { onAddAll_SelectItem(qdTIDs[0]); } })
                                                             : _jsx(TMQdDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls }), items: qdTIDs.map((tid_alias) => ({ name: `${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)}`, onClick: () => { onAddAll_SelectItem(tid_alias); } })) })] }), formData?.select?.map((si, index) => {
                                                 return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropSelect(e, si), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, si), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: getSelectMenuItems(index) }), (!isReadOnly || (si.function && si.function != QueryFunctions.None)) && _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: si.function === QueryFunctions.None ? "..." : LocalizeQueryFunctions(si.function) }), items: getQueryFunctionsMenuItems(si, index) }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: si.tid, alias: si.alias }), qd: formData, values: [{ tid: si.tid, mid: si.mid, aliasTID: si.alias }], onValueChanged: (values) => { values.length > 0 && onChange_SelectItem_MID(values[0], index); }, updateIsModalOpen: updateIsModalOpen }), (!isReadOnly || si.as) && _jsx(TMQdEditableItem, { value: si.as, backgroundColor: colorValue, placeHolder: `<${SDKUI_Localizator.Query_EnterAlias}...>`, width: '100%', onValueChanged: (value) => { onChange_SelectItem_As(value, index); } })] }, `${si.tid}_${si.mid}_${index}`));
-                                            })] }) }) }), fromCount > 0 && (!isReadOnly || whereCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryWhere, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, whereCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.where)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.where) }), (!formData?.where || formData?.where.length <= 0) && !isReadOnly &&
+                                            })] }) }) }), fromCount > 0 && (!isReadOnly || whereCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryWhere, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, whereCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.where)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { $disabled: isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.where) }), (!formData?.where || formData?.where.length <= 0) && !isReadOnly &&
                                                 _jsx(StyledRowItem, { children: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_WhereItem }) }), formData?.where?.map((wi, index) => {
                                                 return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropWhere(e, wi), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, wi), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
                                                                 { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_WhereItem(index) },
@@ -797,7 +797,7 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                                                 { name: 'AND', onClick: () => onChange_WhereItem_Or(false, index) },
                                                                 { name: 'OR', onClick: () => onChange_WhereItem_Or(true, index) }
                                                             ] }), _jsx(TMQdEditableItem, { value: wi.leftBrackets, allowedPattern: /\(/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, true, index); } }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canSearch === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: wi.tid, alias: wi.alias }), qd: formData, values: [{ tid: wi.tid, mid: wi.mid, aliasTID: wi.alias }], onValueChanged: (values) => { values.length > 0 && onChange_WhereItem_Metadato(values[0], index); }, updateIsModalOpen: updateIsModalOpen }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledDivHorizontal, { children: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(wi.operator) }) }), items: getQueryOperatorsMenuItems(wi, index) }), _jsx(TMQdWhereItemValue, { whereItem: wi, index: index, onValueChanged: (values) => { onChange_WhereItem_Values(values[0], values[1], index); }, updateIsModalOpen: updateIsModalOpen }), _jsx(TMQdEditableItem, { value: wi.rightBrackets, allowedPattern: /\)/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, false, index); } })] }, `${wi.tid}_${wi.mid}_${index}`));
-                                            })] }) }) }), fromCount > 0 && (!isReadOnly || orderByCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryOrderBy, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, orderByCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.orderBy)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [(!formData?.orderBy || formData?.orderBy.length <= 0) && !isReadOnly &&
+                                            })] }) }) }), fromCount > 0 && (!isReadOnly || orderByCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryOrderBy, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, orderByCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.orderBy)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { $disabled: isReadOnly, children: [(!formData?.orderBy || formData?.orderBy.length <= 0) && !isReadOnly &&
                                                 _jsx(StyledRowItem, { children: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_OrderByItem }) }), formData?.orderBy?.map((oi, index) => {
                                                 return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropOrderBy(e, oi), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, oi), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
                                                                 { name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OrderByItem(index) },
@@ -808,7 +808,7 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
                                                                 { name: 'ASC', onClick: () => onChange_OrderByItem_Asc(true, oi, index) },
                                                                 { name: 'DESC', onClick: () => onChange_OrderByItem_Asc(false, oi, index) }
                                                             ] })] }, `${oi.tid}_${oi.mid}_${index}`));
-                                            })] }) }) }), fromCount > 0 && _jsx(Item, { title: SDKUI_Localizator.Options, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, undefined, []), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [showDistinct && _jsx(TMCheckBox, { label: SDK_Localizator.QueryDistinct, value: formData.isDistinct, onValueChanged: () => { setFormData({ ...formData, isDistinct: !formData.isDistinct }); } }), _jsx(TMTextBox, { type: 'number', width: '200px', label: SDKUI_Localizator.MaxDcmtsToBeReturned, validationItems: validationItems.filter((o) => o.PropertyName == TMPropertyNames.maxDcmtsToBeReturned), value: formData.maxDcmtsToBeReturned, onBlur: (newValue) => setFormData({ ...formData, maxDcmtsToBeReturned: Number(newValue) }) })] }) }) })] }), _jsx(ConfirmQueryParamsDialog, {})] }), showResultSearch && _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [" ", renderResultSearchForm, " "] })] }));
+                                            })] }) }) }), fromCount > 0 && _jsx(Item, { title: SDKUI_Localizator.Options, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, undefined, []), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { $disabled: isReadOnly, children: [showDistinct && _jsx(TMCheckBox, { label: SDK_Localizator.QueryDistinct, value: formData.isDistinct, onValueChanged: () => { setFormData({ ...formData, isDistinct: !formData.isDistinct }); } }), _jsx(TMTextBox, { type: 'number', width: '200px', label: SDKUI_Localizator.MaxDcmtsToBeReturned, validationItems: validationItems.filter((o) => o.PropertyName == TMPropertyNames.maxDcmtsToBeReturned), value: formData.maxDcmtsToBeReturned, onBlur: (newValue) => setFormData({ ...formData, maxDcmtsToBeReturned: Number(newValue) }) })] }) }) })] }), _jsx(ConfirmQueryParamsDialog, {})] }), showResultSearch && _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [" ", renderResultSearchForm, " "] })] }));
 };
 export default TMQueryEditor;
 const TMQdEditableItem = ({ value, placeHolder, width, backgroundColor, allowedPattern, onValueChanged }) => {
@@ -1038,5 +1038,5 @@ const StyledContent = styled.div `
 const TMQdDropDownMenu = ({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius }) => {
     const [id, setID] = useState('');
     useEffect(() => { setID(genUniqueId()); }, [content]);
-    return (_jsx(ContextMenu, { target: `#idContainer${id}`, items: items || [], trigger: "left", children: _jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }) }));
+    return (_jsx(ContextMenu, { target: `#idContainer${id}`, items: items || [], trigger: "left", children: _jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, $disabled: disabled, $color: color, $backgroundColor: backgroundColor, $borderRadius: borderRadius, children: content }) }));
 };

package/lib/components/settings/SettingsAppearance.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare const SettingsAppearance: ({ landingPagesOptions, permissions, showConfirmPopup }: {
     landingPagesOptions?: {
         display: string;
@@ -12,5 +11,5 @@ declare const SettingsAppearance: ({ landingPagesOptions, permissions, showConfi
         workFlowLicense: boolean;
     };
     showConfirmPopup?: (title: string, onConfirm: () => void) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SettingsAppearance;

package/lib/components/sidebar/TMAboutApp.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 interface TMAboutAppProps {
     app: boolean;
     skdui: boolean;
     sdk: boolean;
     websdk: boolean;
 }
-export declare const TMAboutApp: (props: TMAboutAppProps) => React.JSX.Element;
+export declare const TMAboutApp: (props: TMAboutAppProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/sidebar/TMCommandsPanel.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-export declare const StyledCommandsPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & {
+export declare const StyledCommandsPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isMobile?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & {
-    $isMobile?: boolean;
-}, never>>> & string;
+}>> & string;
 export interface TMCommandItemProps {
     icon: React.ReactNode;
     selected?: boolean;

package/lib/components/sidebar/TMCommandsPanel.js

@@ -11,7 +11,7 @@ export const StyledCommandsPanel = styled.div `
     padding: 10px;
     gap: 10px;
 `;
-const TMCommandsPanel = ({ isMobile, items }) => (_jsx(StyledCommandsPanel, { "$isMobile": isMobile, children: items.map((iconProps, idx) => (_jsx("span", { style: {
+const TMCommandsPanel = ({ isMobile, items }) => (_jsx(StyledCommandsPanel, { $isMobile: isMobile, children: items.map((iconProps, idx) => (_jsx("span", { style: {
             background: iconProps.selected ? 'white' : 'transparent',
             borderRadius: '6px',
             color: iconProps.selected ? '#005B97' : 'white',

package/lib/components/sidebar/TMHeader.d.ts

@@ -36,8 +36,8 @@ export declare const TMSearchBar: ({ searchValue, onSearchValueChanged, maxWidth
     marginLeft?: string;
     searchValue: string;
     onSearchValueChanged: (value: string) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 declare const TMHeader: React.FC<ITMHeader>;
 export default TMHeader;
-export declare function IconHeaderNotifications(props: Readonly<React.SVGProps<SVGSVGElement>>): React.JSX.Element;
-export declare function IconHeaderSettings(props: Readonly<React.SVGProps<SVGSVGElement>>): React.JSX.Element;
+export declare function IconHeaderNotifications(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;
+export declare function IconHeaderSettings(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;