@topconsultnpm/sdkui-react 6.17.0-test10

package/lib/components/index.d.ts

@@ -0,0 +1,115 @@
+export { default as ShowAlert } from './base/TMAlert';
+export { default as TMButton } from './base/TMButton';
+export { default as TMClosableList } from './base/TMClosableList';
+export * from './base/TMContextMenu';
+export { default as TMDropDownMenu } from './base/TMDropDownMenu';
+export * from './base/TMListView';
+export { default as TMList } from './base/TMList';
+export { default as TMModal } from './base/TMModal';
+export * from './base/TMPopUp';
+export * from './base/TMLayout';
+export * from './base/Styled';
+export * from './base/TMWaitPanel';
+export * from './base/TMToolbarCard';
+export * from './base/TMRightSidebar';
+export * from './base/TMTreeView';
+export * from './base/TMPanel';
+export * from './base/TMResizableMenu';
+export { default as CounterBar } from './base/TMCounterBar';
+export { default as TMProgressBar } from './base/TMProgressBar';
+export { default as TMSpinner } from './base/TMSpinner';
+export { Spinner } from './base/TMSpinner';
+export { default as TMToggleButton } from './base/TMToggleButton';
+export { default as TMTooltip } from './base/TMTooltip';
+export { default as TMVilViewer } from './base/TMVilViewer';
+export { default as TMUserAvatar } from './base/TMUserAvatar';
+export { default as TMFloatingToolbar } from './base/TMFloatingToolbar';
+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';
+export { default as TMTextExpression } from './editors/TMTextExpression';
+export { default as TMCheckBox } from './editors/TMCheckBox';
+export { default as TMRadioButton } from './editors/TMRadioButton';
+export { default as TMDateBox } from './editors/TMDateBox';
+export { default as TMMetadataEditor } from './editors/TMMetadataEditor';
+export { default as TMHtmlContentDisplay } from './editors/TMHtmlContentDisplay';
+export { default as TMHtmlEditor } from './editors/TMHtmlEditor';
+export * from './editors/TMFormulaEditor';
+export * from './editors/TMMetadataValues';
+export { editorColorManager } from './editors/TMEditorStyled';
+export { default as TMLocalizedTextBox } from './editors/TMLocalizedTextBox';
+export * from './choosers/TMCultureIDPicker';
+export * from './choosers/TMDataListItemChooser';
+export * from './choosers/TMDistinctValues';
+export * from './choosers/TMDiskChooser';
+export * from './choosers/TMDynDataListItemChooser';
+export * from './choosers/TMDcmtTypeChooser';
+export * from './choosers/TMGroupChooser';
+export * from './choosers/TMInvoiceRetrieveFormats';
+export * from './choosers/TMMetadataChooser';
+export * from './choosers/TMOrderRetrieveFormats';
+export * from './choosers/TMUserChooser';
+export * from './choosers/TMPathChooser';
+export { default as TMValidationItemsList } from './grids/TMValidationItemsList';
+export { default as TMBlogsPost } from './grids/TMBlogsPost';
+export { default as TMBlogHeader } from './grids/TMBlogHeader';
+export { default as TMBlogAttachments } from './grids/TMBlogAttachments';
+export { default as TMBlogCommentForm } from './features/blog/TMBlogCommentForm';
+export * from './query/TMQueryEditor';
+export * from './query/TMQuerySummary';
+export * from './features/assistant/ToppyHelpCenter';
+export * from './features/documents/TMDcmtForm';
+export * from './features/documents/TMDcmtIcon';
+export * from './features/documents/TMDcmtPreview';
+export * from './features/documents/TMRelationViewer';
+export * from './features/archive/TMArchive';
+export * from './features/search/TMSearch';
+export * from './features/search/TMSearchResult';
+export { default as TMTaskForm } from './features/tasks/TMTaskForm';
+export { default as TMTasksAgenda } from './features/tasks/TMTasksAgenda';
+export { default as TMTasksCalendar } from './features/tasks/TMTasksCalendar';
+export { default as TMTasksHeader } from './features/tasks/TMTasksHeader';
+export { default as TMTasksPanelContent } from './features/tasks/TMTasksPanelContent';
+export { default as TMTasksView } from './features/tasks/TMTasksView';
+export * from './features/tasks/TMTasksUtils';
+export * from './features/tasks/TMTasksUtilsView';
+export { default as TMWGsCopyMoveForm } from './features/wg/TMWGsCopyMoveForm';
+export * from './base/TMTab';
+export { default as TMHeader } from "./sidebar/TMHeader";
+export { default as TMSidebar } from "./sidebar/TMSidebar";
+export { default as TMSidebarItem } from "./sidebar/TMSidebarItem";
+export { default as TMLoginForm } from "./forms/Login/TMLoginForm";
+export { default as TMChangePassword } from "./forms/Login/ChangePassword";
+export { default as TMSaveForm } from "./forms/TMSaveForm";
+export { default as TMApplyForm } from "./forms/TMApplyForm";
+export { default as TMChooserForm } from "./forms/TMChooserForm";
+export * from './forms/TMResultDialog';
+export { default as TMPage } from "./pages/TMPage";
+export { default as SettingsAppearance } from "./settings/SettingsAppearance";
+export * from "./viewers/TMTidViewer";
+export * from "./viewers/TMMidViewer";
+export * from "./viewers/TMDataListItemViewer";
+export * from "./base/TMDeviceProvider";
+export { default as TMDataGrid } from "./base/TMDataGrid";
+export { default as TMFileManager } from "./base/TMFileManager";
+export { default as TMFileManagerDataGridView } from "./base/TMFileManagerDataGridView";
+export { default as TMFileManagerThumbnailsView } from "./base/TMFileManagerThumbnailsView";
+export * from "./base/TMFileManagerUtils";
+export * from "./base/TMFileManagerUtils";
+export { default as TMCounterContainer } from "./base/TMCounterContainer";
+export * from "./base/TMCounterContainer";
+export { default as TMAreaManager } from "./base/TMAreaManager";
+export * from "./layout/panelManager/TMPanelManagerContainer";
+export * from "./layout/panelManager/TMPanelManagerContext";
+export * from "./layout/panelManager/TMPanelManagerToolbar";
+export * from "./layout/panelManager/TMPanelWrapper";
+export * from "./layout/panelManager/types";
+export * from "./layout/panelManager/utils";
+export * from "./features/workflow/diagram/WFDiagram";
+export * from "./features/workflow/diagram/workflowHelpers";
+export * from "./features/workflow/diagram/xmlParser";
+export * from "./features/workflow/diagram/interfaces";
+export { default as TMWizard } from './wizard/TMWizard';
+export * from './wizard/TMWizard';

package/lib/components/index.js

@@ -0,0 +1,137 @@
+// base
+export { default as ShowAlert } from './base/TMAlert';
+export { default as TMButton } from './base/TMButton';
+export { default as TMClosableList } from './base/TMClosableList';
+export * from './base/TMContextMenu';
+export { default as TMDropDownMenu } from './base/TMDropDownMenu';
+export * from './base/TMListView';
+export { default as TMList } from './base/TMList';
+export { default as TMModal } from './base/TMModal';
+export * from './base/TMPopUp';
+export * from './base/TMLayout';
+export * from './base/Styled';
+export * from './base/TMWaitPanel';
+export * from './base/TMToolbarCard';
+export * from './base/TMRightSidebar';
+export * from './base/TMTreeView';
+export * from './base/TMPanel';
+export * from './base/TMResizableMenu';
+export { default as CounterBar } from './base/TMCounterBar';
+export { default as TMProgressBar } from './base/TMProgressBar';
+export { default as TMSpinner } from './base/TMSpinner';
+export { Spinner } from './base/TMSpinner';
+export { default as TMToggleButton } from './base/TMToggleButton';
+export { default as TMTooltip } from './base/TMTooltip';
+export { default as TMVilViewer } from './base/TMVilViewer';
+export { default as TMUserAvatar } from './base/TMUserAvatar';
+export { default as TMFloatingToolbar } from './base/TMFloatingToolbar';
+//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';
+export { default as TMTextExpression } from './editors/TMTextExpression';
+export { default as TMCheckBox } from './editors/TMCheckBox';
+export { default as TMRadioButton } from './editors/TMRadioButton';
+export { default as TMDateBox } from './editors/TMDateBox';
+export { default as TMMetadataEditor } from './editors/TMMetadataEditor';
+export { default as TMHtmlContentDisplay } from './editors/TMHtmlContentDisplay';
+export { default as TMHtmlEditor } from './editors/TMHtmlEditor';
+export * from './editors/TMFormulaEditor';
+export * from './editors/TMMetadataValues';
+export { editorColorManager } from './editors/TMEditorStyled';
+export { default as TMLocalizedTextBox } from './editors/TMLocalizedTextBox';
+// chooserss
+export * from './choosers/TMCultureIDPicker';
+export * from './choosers/TMDataListItemChooser';
+export * from './choosers/TMDistinctValues';
+export * from './choosers/TMDiskChooser';
+export * from './choosers/TMDynDataListItemChooser';
+export * from './choosers/TMDcmtTypeChooser';
+export * from './choosers/TMGroupChooser';
+export * from './choosers/TMInvoiceRetrieveFormats';
+export * from './choosers/TMMetadataChooser';
+export * from './choosers/TMOrderRetrieveFormats';
+export * from './choosers/TMUserChooser';
+export * from './choosers/TMPathChooser';
+//grids
+export { default as TMValidationItemsList } from './grids/TMValidationItemsList';
+// blogs
+export { default as TMBlogsPost } from './grids/TMBlogsPost';
+export { default as TMBlogHeader } from './grids/TMBlogHeader';
+export { default as TMBlogAttachments } from './grids/TMBlogAttachments';
+export { default as TMBlogCommentForm } from './features/blog/TMBlogCommentForm';
+//query
+export * from './query/TMQueryEditor';
+export * from './query/TMQuerySummary';
+//assistant
+export * from './features/assistant/ToppyHelpCenter';
+//documents
+export * from './features/documents/TMDcmtForm';
+export * from './features/documents/TMDcmtIcon';
+export * from './features/documents/TMDcmtPreview';
+export * from './features/documents/TMRelationViewer';
+//archive
+export * from './features/archive/TMArchive';
+//search
+export * from './features/search/TMSearch';
+export * from './features/search/TMSearchResult';
+// tasks
+export { default as TMTaskForm } from './features/tasks/TMTaskForm';
+export { default as TMTasksAgenda } from './features/tasks/TMTasksAgenda';
+export { default as TMTasksCalendar } from './features/tasks/TMTasksCalendar';
+export { default as TMTasksHeader } from './features/tasks/TMTasksHeader';
+export { default as TMTasksPanelContent } from './features/tasks/TMTasksPanelContent';
+export { default as TMTasksView } from './features/tasks/TMTasksView';
+export * from './features/tasks/TMTasksUtils';
+export * from './features/tasks/TMTasksUtilsView';
+// wg
+export { default as TMWGsCopyMoveForm } from './features/wg/TMWGsCopyMoveForm';
+//tab
+export * from './base/TMTab';
+// others
+export { default as TMHeader } from "./sidebar/TMHeader";
+export { default as TMSidebar } from "./sidebar/TMSidebar";
+export { default as TMSidebarItem } from "./sidebar/TMSidebarItem";
+//form
+export { default as TMLoginForm } from "./forms/Login/TMLoginForm";
+export { default as TMChangePassword } from "./forms/Login/ChangePassword";
+export { default as TMSaveForm } from "./forms/TMSaveForm";
+export { default as TMApplyForm } from "./forms/TMApplyForm";
+export { default as TMChooserForm } from "./forms/TMChooserForm";
+export * from './forms/TMResultDialog';
+//page
+export { default as TMPage } from "./pages/TMPage";
+//settings
+export { default as SettingsAppearance } from "./settings/SettingsAppearance";
+//viewers
+export * from "./viewers/TMTidViewer";
+export * from "./viewers/TMMidViewer";
+export * from "./viewers/TMDataListItemViewer";
+//TMDeviceProvider
+export * from "./base/TMDeviceProvider";
+export { default as TMDataGrid } from "./base/TMDataGrid";
+export { default as TMFileManager } from "./base/TMFileManager";
+export { default as TMFileManagerDataGridView } from "./base/TMFileManagerDataGridView";
+export { default as TMFileManagerThumbnailsView } from "./base/TMFileManagerThumbnailsView";
+export * from "./base/TMFileManagerUtils";
+export * from "./base/TMFileManagerUtils";
+export { default as TMCounterContainer } from "./base/TMCounterContainer";
+export * from "./base/TMCounterContainer";
+export { default as TMAreaManager } from "./base/TMAreaManager";
+// panel manager
+export * from "./layout/panelManager/TMPanelManagerContainer";
+export * from "./layout/panelManager/TMPanelManagerContext";
+export * from "./layout/panelManager/TMPanelManagerToolbar";
+export * from "./layout/panelManager/TMPanelWrapper";
+export * from "./layout/panelManager/types";
+export * from "./layout/panelManager/utils";
+// workflow
+export * from "./features/workflow/diagram/WFDiagram";
+export * from "./features/workflow/diagram/workflowHelpers";
+export * from "./features/workflow/diagram/xmlParser";
+export * from "./features/workflow/diagram/interfaces";
+// wizard
+export { default as TMWizard } from './wizard/TMWizard';
+export * from './wizard/TMWizard';

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

@@ -0,0 +1,10 @@
+import { TMPanelDefinition, TMPanelDirection } from './types';
+interface TMPanelManagerContainerProps {
+    panels: Array<TMPanelDefinition>;
+    showToolbar: boolean;
+    direction: TMPanelDirection;
+    parentId?: string;
+    minPanelSizePx?: number;
+}
+declare const TMPanelManagerContainer: (props: TMPanelManagerContainerProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TMPanelManagerContainer;

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

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useMemo } from 'react';
+import styled from 'styled-components';
+import { useTMPanelManagerContext } from './TMPanelManagerContext';
+import TMPanelWrapper from './TMPanelWrapper';
+import TMPanelManagerToolbar from './TMPanelManagerToolbar';
+import { IconInfo, SDKUI_Localizator } from '../../../helper';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import { Gutters } from '../../../utils/theme';
+// Styled Component per il contenitore principale di PanelContainer
+const StyledPanelContainerWrapper = styled.div `
+  display: ${props => (props.$hasVisiblePanels ? 'flex' : 'none')};
+  flex-direction: ${props => (props.$direction === 'vertical' ? 'column' : 'row')};
+  height: 100%;
+  width: 100%;
+  // overflow: hidden;
+`;
+// Styled Component per il gutter (separatore)
+const StyledResizerGutter = styled.div `
+  cursor: ${props => (props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
+  ${props => (props.$direction === 'horizontal' ? `width: ${Gutters.getGutters()}px;` : `height: ${Gutters.getGutters()}px;`)}
+  flex-shrink: 0;
+  background-color: "transparent";
+  z-index: 10;
+`;
+const TMPanelManagerContainer = (props) => {
+    const { panels, showToolbar, direction, parentId, minPanelSizePx = 150 } = props;
+    const { panelVisibility, setPanelDimensionsById, hasVisiblePanels, maximizedPanels, updateIsResizingActive } = useTMPanelManagerContext();
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const gutters = Gutters.getGutters();
+    // References to store information related to resizing
+    // startMousePos: stores the mouse position when resizing starts (x or y coordinate)
+    const startMousePos = useRef(0);
+    // initialPanelSizesOnDragStart: stores width/height percentages of panels at drag start
+    const initialPanelSizesOnDragStart = useRef({});
+    // resizingPanelId: ID of the panel currently being resized
+    const resizingPanelId = useRef(null);
+    // nextPanelId: ID of the adjacent panel that is resized in tandem
+    const nextPanelId = useRef(null);
+    // Variable to track if a visible panel has been encountered yet during rendering
+    let hasSeenVisiblePanel = false;
+    // Ref to the container DOM element that holds all the panels; used for size calculations
+    const containerRef = useRef(null);
+    // Count how many child panels are currently visible (based on panelVisibility)
+    const currentlyVisibleChildrenCount = panels.filter(panel => panelVisibility[panel.id]).length;
+    // If this component has a parent panel, and the parent panel is visible,
+    // but none of the current child panels are visible, return null to avoid rendering empty container
+    if (parentId && panelVisibility[parentId] && currentlyVisibleChildrenCount === 0) {
+        return null;
+    }
+    // Handles mouse movement during panel resizing
+    const onMouseMove = (e) => {
+        e.preventDefault();
+        // Get the IDs of the panels being resized and the initial sizes saved at drag start
+        const currentId = resizingPanelId.current;
+        const nextId = nextPanelId.current;
+        const initialSizes = initialPanelSizesOnDragStart.current;
+        // If any info is missing, exit early
+        if (!currentId || !nextId || !initialSizes[currentId] || !initialSizes[nextId])
+            return;
+        // Get the container size (width or height depending on direction)
+        const containerSize = direction === 'horizontal' ? containerRef.current?.offsetWidth || 1 : containerRef.current?.offsetHeight || 1;
+        // Calculate how much the mouse moved in pixels and as a percentage relative to container size
+        const deltaPx = (direction === 'horizontal' ? e.clientX : e.clientY) - startMousePos.current;
+        const deltaPercent = (deltaPx / containerSize) * 100;
+        // Parse initial panel sizes (width or height) in percentage
+        const initialCurrent = parseFloat(direction === 'horizontal' ? initialSizes[currentId].width : initialSizes[currentId].height);
+        const initialNext = parseFloat(direction === 'horizontal' ? initialSizes[nextId].width : initialSizes[nextId].height);
+        // Calculate new sizes by adding/subtracting deltaPercent
+        let newCurrent = initialCurrent + deltaPercent;
+        let newNext = initialNext - deltaPercent;
+        // Set a minimum size threshold (to prevent panels from collapsing)
+        const minPercent = (minPanelSizePx / containerSize) * 100;
+        // Correct sizes if they go below the minimum
+        if (newCurrent < minPercent) {
+            newCurrent = minPercent;
+            newNext = initialCurrent + initialNext - minPercent;
+        }
+        else if (newNext < minPercent) {
+            newNext = minPercent;
+            newCurrent = initialCurrent + initialNext - minPercent;
+        }
+        // Update panel sizes (width or height depending on direction)
+        if (direction === 'horizontal') {
+            setPanelDimensionsById(currentId, `${newCurrent}%`, `100%`);
+            setPanelDimensionsById(nextId, `${newNext}%`, `100%`);
+        }
+        else {
+            setPanelDimensionsById(currentId, `100%`, `${newCurrent}%`);
+            setPanelDimensionsById(nextId, `100%`, `${newNext}%`);
+        }
+    };
+    // Handles mouse release (end of resizing)
+    const onMouseUp = (e) => {
+        e.preventDefault();
+        // Disable resizing state
+        updateIsResizingActive(false);
+        // Reset the refs controlling resizing
+        resizingPanelId.current = null;
+        nextPanelId.current = null;
+        initialPanelSizesOnDragStart.current = {};
+        // Remove the event listeners added during resizing
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+        // Reset cursor and text selection styles to defaults
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    };
+    // Starts the resizing process when mouse is pressed on the gutter
+    const startResizing = (e, currentId, nextId) => {
+        e.preventDefault();
+        const container = containerRef.current;
+        if (!container)
+            return;
+        // Find the two panel elements in the DOM by their data-panel-id attributes
+        const currentEl = container.querySelector(`[data-panel-id="${currentId}"]`);
+        const nextEl = container.querySelector(`[data-panel-id="${nextId}"]`);
+        if (!currentEl || !nextEl)
+            return;
+        // Set the refs for the panels currently resizing
+        resizingPanelId.current = currentId;
+        nextPanelId.current = nextId;
+        // Save the initial mouse position (X or Y based on direction)
+        startMousePos.current = direction === 'horizontal' ? e.clientX : e.clientY;
+        // Enable resizing state (for UI feedback if needed)
+        updateIsResizingActive(true);
+        // Calculate and save the initial panel sizes as percentages of container size
+        const containerWidth = container.offsetWidth;
+        const containerHeight = container.offsetHeight;
+        initialPanelSizesOnDragStart.current = {
+            [currentId]: {
+                width: `${(currentEl.offsetWidth / containerWidth) * 100}%`,
+                height: `${(currentEl.offsetHeight / containerHeight) * 100}%`,
+            },
+            [nextId]: {
+                width: `${(nextEl.offsetWidth / containerWidth) * 100}%`,
+                height: `${(nextEl.offsetHeight / containerHeight) * 100}%`,
+            },
+        };
+        // Attach global mousemove and mouseup listeners to track dragging anywhere on screen
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        // Change the cursor to indicate resizing
+        document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+        document.body.style.userSelect = 'none';
+    };
+    return (_jsxs("div", { style: { display: 'flex', height: '100%', width: '100%', flexDirection: isMobile ? 'column' : 'row', gap: gutters }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    width: (isMobile || maximizedPanels.length > 0) ? '100%' : showToolbar ? `calc(100% - 70px)` : '100%',
+                    height: isMobile ? (showToolbar ? `calc(100% - 55px)` : '100%') : '100%',
+                    flexDirection: 'row'
+                }, children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(StyledPanelContainerWrapper, { ref: containerRef, "$direction": direction, "$hasVisiblePanels": hasVisiblePanels(), children: panels.map((panel, index) => {
+                                // Check if current panel is visible according to context state
+                                const isVisible = panelVisibility[panel.id];
+                                // Find the closest previous visible panel's ID to place the resizer gutter between
+                                let prevPanelIdForGutter = null;
+                                for (let i = index - 1; i >= 0; i--) {
+                                    if (panelVisibility[panels[i].id]) {
+                                        prevPanelIdForGutter = panels[i].id;
+                                        break;
+                                    }
+                                }
+                                /*
+                                  Determine if we should show the gutter (resize handle) before this panel.
+                                  The gutter is shown only if:
+                                    - this panel is visible
+                                    - at least one visible panel was encountered before this one
+                                */
+                                const showGutter = isVisible && hasSeenVisiblePanel && maximizedPanels.length === 0;
+                                // Update the flag once a visible panel is found, so gutters after it are shown correctly
+                                if (isVisible) {
+                                    hasSeenVisiblePanel = true;
+                                }
+                                // If the panel has child panels, render a nested TMPanelManagerContainer or a component
+                                if (panel.children && panel.children.length > 0) {
+                                    const jsxComponent = panel.contentOptions?.component;
+                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { "$direction": direction, onMouseDown: (e) => startResizing(e, prevPanelIdForGutter, panel.id) })), _jsx(TMPanelWrapper, { panel: panel, children: jsxComponent
+                                                    ? React.isValidElement(jsxComponent)
+                                                        ? React.cloneElement(jsxComponent, { groupId: panel.id, mainDirection: panel.childrenGroupDirection || direction })
+                                                        : jsxComponent
+                                                    : _jsx(TMPanelManagerContainer, { panels: panel.children, direction: panel.childrenGroupDirection || direction, parentId: panel.id, showToolbar: false }) })] }, panel.id));
+                                }
+                                // If the panel has a component specified, render it with a possible gutter before it
+                                if (panel.contentOptions && panel.contentOptions.component) {
+                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { "$direction": direction, onMouseDown: (e) => startResizing(e, prevPanelIdForGutter, panel.id) })), _jsx(TMPanelWrapper, { panel: panel, children: panel.contentOptions.component })] }, panel.id));
+                                }
+                                // If no children or components, render nothing for this panel
+                                return null;
+                            }) }), _jsxs("div", { style: {
+                                display: hasVisiblePanels() ? 'none' : 'flex',
+                                flexDirection: 'column',
+                                width: '100%',
+                                height: '100%',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                fontSize: '1.5rem',
+                                color: 'rgb(37, 89, 165)',
+                                backgroundColor: '#fff',
+                                borderRadius: '10px'
+                            }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] })] }) }), (showToolbar && maximizedPanels.length === 0) && _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: isMobile ? 'row' : 'column',
+                    alignItems: 'center',
+                    width: isMobile ? '100%' : '50px',
+                    height: isMobile ? '50px' : 'max-content',
+                    background: 'transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box',
+                    borderRadius: isMobile ? '10px' : '10px 0px 0px 10px',
+                    padding: '10px',
+                    gap: '10px'
+                }, children: _jsx(TMPanelManagerToolbar, { panels: panels }) })] }));
+};
+export default TMPanelManagerContainer;

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

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import type { TMPanelDefinition, TMPanelDimensionsMap } from './types';
+interface TMPanelManagerContextType {
+    panelVisibility: {
+        [id: string]: boolean;
+    };
+    panelDimensions: TMPanelDimensionsMap;
+    togglePanelVisibility: (id: string) => void;
+    setPanelVisibilityById: (id: string, isVisible: boolean) => void;
+    setPanelDimensionsById: (id: string, width: string, height: string) => void;
+    hasVisiblePanels: () => boolean;
+    maximizedPanels: Array<string>;
+    toggleMaximize: (id: string) => void;
+    toolbarButtonsVisibility: {
+        [id: string]: boolean;
+    };
+    toolbarButtonsDisabled: {
+        [id: string]: boolean;
+    };
+    setToolbarButtonVisibility: (id: string, isVisible: boolean) => void;
+    setToolbarButtonDisabled: (id: string, isDisabled: boolean) => void;
+    isResizingActive: boolean;
+    updateIsResizingActive: (isActive: boolean) => void;
+    countVisibleLeafPanels: () => number;
+}
+interface TMPanelManagerProviderProps {
+    children: ReactNode;
+    panels: Array<TMPanelDefinition>;
+    initialVisibility: {
+        [id: string]: boolean;
+    };
+    defaultDimensions: TMPanelDimensionsMap;
+    initialDimensions: TMPanelDimensionsMap;
+    initialMobilePanelId: string;
+    isPersistenceEnabled?: boolean;
+}
+export declare const TMPanelManagerProvider: (props: TMPanelManagerProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useTMPanelManagerContext: () => TMPanelManagerContextType;
+export {};