@evergis/react 3.1.46 → 3.1.47

package/dist/components/Dashboard/containers/index.d.ts

@@ -19,4 +19,3 @@ export * from './SlideshowContainer';
 export * from './TabsContainer';
 export * from './TitleContainer';
 export * from './TwoColumnContainer';
-export * from './TwoColumnsInnerContainer';

package/dist/components/Dashboard/containers/registry.d.ts

@@ -14,7 +14,6 @@ export declare const containerComponents: {
     readonly RoundedBackground: import('react').FC<import('./DataSourceInnerContainer/types').InnerContainerProps>;
     readonly OneColumn: import('react').FC<import('../types').ContainerProps>;
     readonly TwoColumn: import('react').FC<import('../types').ContainerProps>;
-    readonly TwoColumnsInner: import('react').FC<import('../types').ContainerProps>;
     readonly DataSource: import('react').FC<import('../types').ContainerProps>;
     readonly DataSourceProgress: import('react').FC<import('../types').ContainerProps>;
     readonly Progress: import('react').FC<import('./DataSourceInnerContainer/types').InnerContainerProps>;

package/dist/components/Dashboard/styled.d.ts

@@ -1,5 +1,4 @@
 export declare const ElementValueWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const InnerContainerWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const ContainerWrapper: any;
 export declare const DashboardChip: import('styled-components').StyledComponent<any, any, any, any>;
 export declare const DashboardPlaceholderWrap: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;

package/dist/index.js

@@ -5132,9 +5132,6 @@ const LayerListContainer = styled(uilibGl.Flex) `
 const ElementValueWrapper = styled.div `
   transition: background-color ${uilibGl.transition.toggle};
 `;
-const InnerContainerWrapper$1 = styled.div `
-  width: 100%;
-`;
 const ContainerWrapper = styled(uilibGl.Flex) `
   position: relative;
   min-height: 1rem;
@@ -5477,24 +5474,24 @@ const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElemen
     const { column, expandable, expanded } = options || {};
     const isColumn = column === undefined || column;
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { style: style, isColumn: isColumn, children: jsxRuntime.jsx(ContainerChildren, { items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { id: id, style: style, isColumn: isColumn, children: jsxRuntime.jsx(ContainerChildren, { items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
 });
 
 const OneColumnContainer = React.memo(({ elementConfig, renderElement }) => {
-    const { options, style } = elementConfig || {};
+    const { id, options, style } = elementConfig || {};
     const { innerTemplateStyle, hideEmpty } = options || {};
     const value = renderElement({ id: "value" });
     const hasUnits = elementConfig?.children?.some(({ id }) => id === "units");
     if (!value && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(Container, { style: innerTemplateStyle || style, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && jsxRuntime.jsx(ContainerUnits, { children: renderElement({ id: "units" }) })] })] }));
+    return (jsxRuntime.jsxs(Container, { id: id, style: innerTemplateStyle || style, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && jsxRuntime.jsx(ContainerUnits, { children: renderElement({ id: "units" }) })] })] }));
 });
 
 const TwoColumnContainer = React.memo(({ config, elementConfig, type, renderElement }) => {
     const { selectedTabId, layerInfo, attributes } = useWidgetContext(type);
     const { attributes: renderAttributes } = elementConfig?.options || {};
     const renderContainer = React.useCallback((element, attribute) => {
-        const { options, style, children } = element || {};
+        const { id, options, style, children } = element || {};
         const { hideEmpty, innerTemplateStyle } = options || {};
         const hasUnits = children?.some(({ id }) => id === "units");
         const iconIndex = children?.findIndex(({ id }) => id === "icon");
@@ -5532,7 +5529,7 @@ const TwoColumnContainer = React.memo(({ config, elementConfig, type, renderElem
         const value = render({ id: "value" });
         if (!value && hideEmpty)
             return null;
-        return (jsxRuntime.jsxs(TwoColumnContainerWrapper, { style: innerTemplateStyle || style, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
+        return (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: innerTemplateStyle || style, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
     }, [attributes, config, getRenderElement, layerInfo, renderElement, selectedTabId, type]);
     return renderAttributes?.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderAttributes.map(attribute => renderContainer(elementConfig, attribute)) })) : (renderContainer(elementConfig));
 });
@@ -5723,7 +5720,7 @@ const DataSourceProgressContainer = React.memo(({ config, elementConfig, type, i
         dataSources
     });
     const { attributes } = layerInfo?.configuration?.attributesConfiguration || {};
-    const { id, options, children } = elementConfig || {};
+    const { id, options, children, style } = elementConfig || {};
     const { maxValue, showTotal, relatedDataSource, expandable, expanded } = options || {};
     const valueElement = children?.find(item => item.id === "value");
     const unitsElement = children?.find(item => item.id === "units");
@@ -5751,7 +5748,7 @@ const DataSourceProgressContainer = React.memo(({ config, elementConfig, type, i
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(DataSourceProgressContainerWrapper, { children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsxRuntime.jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) })), showTotal && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Divider, {}), jsxRuntime.jsxs(ProgressTotal, { children: [jsxRuntime.jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxRuntime.jsxs(ProgressValue, { children: [totalValue, jsxRuntime.jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsxRuntime.jsx(ContainerLoading, {})), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(DataSourceProgressContainerWrapper, { id: id, style: style, children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsxRuntime.jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) })), showTotal && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Divider, {}), jsxRuntime.jsxs(ProgressTotal, { children: [jsxRuntime.jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxRuntime.jsxs(ProgressValue, { children: [totalValue, jsxRuntime.jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsxRuntime.jsx(ContainerLoading, {})), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
 });
 
 const ProgressContainer = React.memo(({ type, elementConfig, feature, maxValue, index, renderElement }) => {
@@ -5763,7 +5760,7 @@ const ProgressContainer = React.memo(({ type, elementConfig, feature, maxValue,
         dataSources,
         feature
     });
-    const { children, options, style } = elementConfig || {};
+    const { id, children, options, style } = elementConfig || {};
     const { bgColor, innerTemplateStyle, maxValue: optionMaxValue, hideTitle, innerValue, colors, colorAttribute } = options;
     const valueElement = children?.find(({ id }) => id === "value");
     const unitsElement = children?.find(({ id }) => id === "units");
@@ -5790,7 +5787,7 @@ const ProgressContainer = React.memo(({ type, elementConfig, feature, maxValue,
     const color = React.useMemo(() => colorAttribute
         ? attributes?.find(({ name }) => name === colorAttribute)?.value
         : colors?.[index] || bgColor, [attributes, bgColor, colorAttribute, colors, index]);
-    return (jsxRuntime.jsx(uilibGl.Tooltip, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxRuntime.jsxs(ProgressContainerWrapper, { ref: ref, style: innerTemplateStyle || style, children: [renderIcon && jsxRuntime.jsx(ProgressIcon, { children: renderIcon }), jsxRuntime.jsxs(ProgressContent, { children: [!hideTitle && (jsxRuntime.jsxs(ProgressAlias, { children: [jsxRuntime.jsx("div", { children: renderAlias }), jsxRuntime.jsxs(ProgressValue, { children: [renderValue, unitsElement && jsxRuntime.jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxRuntime.jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsxRuntime.jsx(ProgressBarWrapper, { children: jsxRuntime.jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsxRuntime.jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
+    return (jsxRuntime.jsx(uilibGl.Tooltip, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxRuntime.jsxs(ProgressContainerWrapper, { ref: ref, id: id, style: innerTemplateStyle || style, children: [renderIcon && jsxRuntime.jsx(ProgressIcon, { children: renderIcon }), jsxRuntime.jsxs(ProgressContent, { children: [!hideTitle && (jsxRuntime.jsxs(ProgressAlias, { children: [jsxRuntime.jsx("div", { children: renderAlias }), jsxRuntime.jsxs(ProgressValue, { children: [renderValue, unitsElement && jsxRuntime.jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxRuntime.jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsxRuntime.jsx(ProgressBarWrapper, { children: jsxRuntime.jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsxRuntime.jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
 });
 
 const RANGE_MIN_VALUE = 0;
@@ -5984,7 +5981,7 @@ const FiltersContainer = React.memo(({ elementConfig, config, type, renderElemen
     }, [config, type]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const selectedItems = React.useMemo(() => getFilterSelectedItems(filterItems, filters, configFilters), [configFilters, filters, filterItems]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Flex, { mb: !isVisible && selectedItems.length ? "2rem" : 0, children: jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }) }), isLoading && jsxRuntime.jsx(ContainerLoading, {}), !isLoading && isVisible && (jsxRuntime.jsx(FiltersContainerWrapper, { style: style, "$padding": padding, "$bgColor": bgColor, "$fontSize": fontSize, "$fontColor": fontColor, children: filterItems?.map(renderFilter) })), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type, filter: filterItems[0].options?.filterName })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Flex, { mb: !isVisible && selectedItems.length ? "2rem" : 0, children: jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }) }), isLoading && jsxRuntime.jsx(ContainerLoading, {}), !isLoading && isVisible && (jsxRuntime.jsx(FiltersContainerWrapper, { id: id, style: style, "$padding": padding, "$bgColor": bgColor, "$fontSize": fontSize, "$fontColor": fontColor, children: filterItems?.map(renderFilter) })), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type, filter: filterItems[0].options?.filterName })] }));
 });
 
 const DefaultAttributesContainer = React.memo(({ type, renderElement }) => {
@@ -5993,7 +5990,7 @@ const DefaultAttributesContainer = React.memo(({ type, renderElement }) => {
 });
 
 const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderElement }) => {
-    const { options, children } = elementConfig || {};
+    const { id, style, options, children } = elementConfig || {};
     const { twoColumns, hideEmpty } = options || {};
     const aliasElement = children.find(({ id }) => id === "alias");
     const chartElement = children.find(({ id }) => id === "chart");
@@ -6008,7 +6005,7 @@ const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderEleme
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(uilibGl.FlexSpan, { flexDirection: "column", children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsxRuntime.jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { id: id, style: style, isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsxRuntime.jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
 });
 
 const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBorders }) => {
@@ -6044,10 +6041,6 @@ const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBord
     return (jsxRuntime.jsx(Container, { id: getRootElementId(type), style: { width }, isMain: true, isColumn: isColumn, noBorders: noBorders, children: jsxRuntime.jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) }));
 });
 
-const TwoColumnsInnerContainer = React.memo(({ renderElement }) => {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TwoColumnContainerWrapper, { children: [jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(ContainerAlias, { children: renderElement({ id: "firstAlias" }) }), jsxRuntime.jsx(ContainerValue, { big: true, children: renderElement({ id: "firstValue" }) })] }), jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(ContainerAlias, { children: renderElement({ id: "secondAlias" }) }), jsxRuntime.jsx(ContainerValue, { big: true, children: renderElement({ id: "secondValue" }) })] })] }), renderElement({ id: "thirdContainer" })] }));
-});
-
 const ImageContainerBg$1 = styled.div `
   position: absolute;
   top: 0;
@@ -6109,8 +6102,8 @@ const ImageContainerWrapper = styled(uilibGl.Flex) `
 `;
 
 const ImageContainer = React.memo(({ elementConfig, renderElement }) => {
-    const { style } = elementConfig || {};
-    return (jsxRuntime.jsxs(ImageContainerWrapper, { style: style, children: [jsxRuntime.jsx(ImageContainerTitle, { children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ImageContainerText, { children: renderElement({ id: "text" }) }), renderElement({ id: "button" }), jsxRuntime.jsx(ImageContainerBg$1, { children: renderElement({ id: "image" }) })] }));
+    const { id, style } = elementConfig || {};
+    return (jsxRuntime.jsxs(ImageContainerWrapper, { id: id, style: style, children: [jsxRuntime.jsx(ImageContainerTitle, { children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ImageContainerText, { children: renderElement({ id: "text" }) }), renderElement({ id: "button" }), jsxRuntime.jsx(ImageContainerBg$1, { children: renderElement({ id: "image" }) })] }));
 });
 
 const IconContainerWrapper = styled(uilibGl.Flex) `
@@ -6162,7 +6155,8 @@ const IconContainerText = styled.div `
 `;
 
 const IconContainer = React.memo(({ elementConfig, renderElement }) => {
-    return (jsxRuntime.jsxs(IconContainerWrapper, { style: elementConfig?.style, children: [jsxRuntime.jsxs(IconContainerHeaderWrapper, { children: [jsxRuntime.jsxs(IconContainerHeader, { children: [renderElement({ id: "icon" }), jsxRuntime.jsx(IconContainerTitle, { children: renderElement({ id: "alias" }) })] }), renderElement({ id: "link" })] }), jsxRuntime.jsx(IconContainerText, { children: renderElement({ id: "text" }) })] }));
+    const { id, style } = elementConfig || {};
+    return (jsxRuntime.jsxs(IconContainerWrapper, { id: id, style: style, children: [jsxRuntime.jsxs(IconContainerHeaderWrapper, { children: [jsxRuntime.jsxs(IconContainerHeader, { children: [renderElement({ id: "icon" }), jsxRuntime.jsx(IconContainerTitle, { children: renderElement({ id: "alias" }) })] }), renderElement({ id: "link" })] }), jsxRuntime.jsx(IconContainerText, { children: renderElement({ id: "text" }) })] }));
 });
 
 const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
@@ -6177,7 +6171,7 @@ const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComp
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isLoading = !dataSource?.features;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsx(Container, { isColumn: column, style: { height: isLoading ? "3rem" : "auto", ...style }, children: dataSource.features?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) })) : (jsxRuntime.jsx(ContainerLoading, {}))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsx(Container, { id: id, isColumn: column, style: { height: isLoading ? "3rem" : "auto", ...style }, children: dataSource.features?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) })) : (jsxRuntime.jsx(ContainerLoading, {}))] }));
 });
 
 const SvgContainerColorMixin = styled.css `
@@ -6218,10 +6212,6 @@ const ContainerIconTitle = styled(uilibGl.Flex) `
     flex-grow: 0;
     margin-right: 0.5rem;
   }
-
-  > * {
-    width: auto;
-  }
   
   svg,
   img,
@@ -6291,7 +6281,7 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     const { expandContainer, expandedContainers, setDashboardLayer } = useWidgetContext(type);
     const [layersVisibility, toggleVisibility] = useToggle(true);
     const { palette } = styled.useTheme();
-    const { style, options } = elementConfig || {};
+    const { id, style, options } = elementConfig || {};
     const { simple, downloadById } = options || {};
     const isLayers = templateName === exports.ContainerTemplate.Layers;
     const { onExport } = useExportPdf(downloadById);
@@ -6309,7 +6299,7 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     const renderVisibility = React.useMemo(() => isLayers && (jsxRuntime.jsx(uilibGl.FlexSpan, { mr: "-1rem", children: jsxRuntime.jsx(uilibGl.IconToggle, { kind: layersVisibility ? "password_show" : "password_hide", className: "feature-visible", isSelected: layersVisibility, onClick: onToggleVisibility }) })), [isLayers, layersVisibility, onToggleVisibility]);
     const renderToggler = React.useMemo(() => !!containerId &&
         expandable && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(uilibGl.LegendToggler, { color: palette.icon, toggled: expandedContainers?.[containerId] !== undefined ? expandedContainers[containerId] : expanded, onClick: onClick }) })), [containerId, expandable, expanded, expandedContainers, onClick, palette.icon]);
-    return (jsxRuntime.jsx(Container, { isTitle: isVisible, style: style, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
+    return (jsxRuntime.jsx(Container, { id: id, style: style, isTitle: isVisible, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
 });
 
 const ContainerDivider = styled(uilibGl.Divider) `
@@ -6318,7 +6308,8 @@ const ContainerDivider = styled(uilibGl.Divider) `
 `;
 
 const DividerContainer = React.memo(({ elementConfig, config }) => {
-    return (jsxRuntime.jsx(Container, { style: elementConfig?.style, children: jsxRuntime.jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
+    const { id, style } = elementConfig || {};
+    return (jsxRuntime.jsx(Container, { id: id, style: style, children: jsxRuntime.jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
 });
 
 const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
@@ -6328,7 +6319,7 @@ const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
         elementConfig,
         dataSources,
     });
-    const { id, options } = elementConfig || {};
+    const { id, style, options } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const render = React.useMemo(() => getRenderElement({
@@ -6353,7 +6344,7 @@ const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
         pageIndex,
         type,
     ]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (jsxRuntime.jsxs(Container, { style: elementConfig?.style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: render({
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (jsxRuntime.jsxs(Container, { style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: render({
                             id: "slideshow",
                             wrap: false,
                         }) })] }))] }));
@@ -6364,7 +6355,7 @@ const CameraContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { id, options, style } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { id: id, style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
 });
 
 const TabAnchor = styled.div `
@@ -6448,7 +6439,7 @@ const SwiperContainer = styled.div `
 const TabsContainer = React.memo(({ elementConfig, type }) => {
     const { palette } = styled.useTheme();
     const { selectedTabId, setSelectedTabId } = useWidgetContext(type);
-    const { options, style, children: tabs } = elementConfig || {};
+    const { id, options, style, children: tabs } = elementConfig || {};
     const { radius, column, bgColor, noBg, onlyIcon, shownItems, maxLength = 12 } = options || {};
     const renderIcon = React.useCallback((icon, active) => {
         if (!icon)
@@ -6466,7 +6457,7 @@ const TabsContainer = React.memo(({ elementConfig, type }) => {
             setSelectedTabId(tabs[0].id);
         }
     }, []);
-    return (jsxRuntime.jsx(SwiperContainer, { style: style, children: jsxRuntime.jsx(react.Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id, value, options: tabOptions }) => (jsxRuntime.jsxs(react.SwiperSlide, { children: [jsxRuntime.jsxs(TabContainer, { href: `#${id}`, active: selectedTabId === id, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(id), children: [renderIcon(tabOptions?.icon, selectedTabId === id), !onlyIcon && (jsxRuntime.jsx(TabValue, { children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength, children: value }) }))] }), jsxRuntime.jsx(TabAnchor, { id: id })] }, id))) }) }));
+    return (jsxRuntime.jsx(SwiperContainer, { id: id, style: style, children: jsxRuntime.jsx(react.Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id, value, options: tabOptions }) => (jsxRuntime.jsxs(react.SwiperSlide, { children: [jsxRuntime.jsxs(TabContainer, { href: `#${id}`, active: selectedTabId === id, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(id), children: [renderIcon(tabOptions?.icon, selectedTabId === id), !onlyIcon && (jsxRuntime.jsx(TabValue, { children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength, children: value }) }))] }), jsxRuntime.jsx(TabAnchor, { id: id })] }, id))) }) }));
 });
 
 const ContainerIconValue = styled(uilibGl.Flex) ``;
@@ -6572,7 +6563,7 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
         dataSources,
         feature
     });
-    const { options, style, children } = elementConfig || {};
+    const { id, options, style, children } = elementConfig || {};
     const { maxLength, center, fontColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute } = options || {};
     const iconElement = children?.find(({ id }) => id === "icon");
     const aliasElement = children?.find(({ id }) => id === "alias");
@@ -6596,12 +6587,12 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
     const renderValue = React.useMemo(() => lodash.isNil(value) ? null : (jsxRuntime.jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsxRuntime.jsx(ContainerUnits, { style: unitsElement?.style, children: renderElement({ id: "units" }) }))] })), [valueElement?.style, value, unitsElement, renderElement]);
     if (lodash.isNil(value) && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxRuntime.jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
+    return (jsxRuntime.jsxs(RoundedBackgroundContainerWrapper, { id: id, style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxRuntime.jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
 });
 
 const AddFeatureContainer = React.memo(({ elementConfig }) => {
-    const { children, style } = elementConfig || {};
-    return (jsxRuntime.jsx(Container, { style: style, children: children
+    const { id, children, style } = elementConfig || {};
+    return (jsxRuntime.jsx(Container, { id: id, style: style, children: children
             .filter(({ type }) => type === "button")
             .map(({ options }, index) => (jsxRuntime.jsx(AddFeatureButton, { icon: options?.icon, title: options?.title, layerName: options?.layerName, geometryType: options?.geometryType }, index))) }));
 });
@@ -6635,15 +6626,15 @@ const LayersContainer = React.memo(({ type, elementConfig, renderElement }) => {
             return currentPage.layers;
         return currentPage.layers.filter(({ name }) => layerNames.includes(name));
     }, [currentPage?.layers, layerNames]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { style: style, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { id: id, style: style, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
 const ExportPdfContainer = React.memo(({ type, elementConfig }) => {
     const { t } = useGlobalContext();
     const { loading, onExport } = useExportPdf(getRootElementId(type));
-    const { style, options } = elementConfig || {};
+    const { id, style, options } = elementConfig || {};
     const { icon, title } = options || {};
-    return (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: icon || "download", primary: true, disabled: loading, style: style, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
+    return (jsxRuntime.jsx(Container, { id: id, style: style, children: jsxRuntime.jsx(uilibGl.IconButton, { kind: icon || "download", primary: true, disabled: loading, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
 });
 
 const containerComponents = {
@@ -6654,7 +6645,6 @@ const containerComponents = {
     [exports.ContainerTemplate.RoundedBackground]: RoundedBackgroundContainer,
     [exports.ContainerTemplate.OneColumn]: OneColumnContainer,
     [exports.ContainerTemplate.TwoColumn]: TwoColumnContainer,
-    [exports.ContainerTemplate.TwoColumnsInner]: TwoColumnsInnerContainer,
     [exports.ContainerTemplate.DataSource]: DataSourceContainer,
     [exports.ContainerTemplate.DataSourceProgress]: DataSourceProgressContainer,
     [exports.ContainerTemplate.Progress]: ProgressContainer,
@@ -10094,7 +10084,7 @@ const ContainerChildren = React.memo(({ items, isColumn, isMain, renderElement }
                 index,
                 wrap: isColumn || isMain,
             });
-            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(InnerContainerWrapper$1, { id: item.id, children: render }, index));
+            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(React.Fragment, { children: render }, index));
         }) }));
 });
 
@@ -10677,7 +10667,6 @@ exports.HeaderTitleContainer = HeaderTitleContainer;
 exports.HiddenTitleItems = HiddenTitleItems;
 exports.IconContainer = IconContainer;
 exports.ImageContainer = ImageContainer;
-exports.InnerContainerWrapper = InnerContainerWrapper$1;
 exports.LEFT_PANEL_HEADER_HEIGHT = LEFT_PANEL_HEADER_HEIGHT;
 exports.Layer = Layer;
 exports.LayerDescription = LayerDescription;
@@ -10728,7 +10717,6 @@ exports.TitleContainer = TitleContainer;
 exports.TopContainer = TopContainer;
 exports.TopContainerButtons = TopContainerButtons;
 exports.TwoColumnContainer = TwoColumnContainer;
-exports.TwoColumnsInnerContainer = TwoColumnsInnerContainer;
 exports.addDataSource = addDataSource;
 exports.addDataSources = addDataSources;
 exports.applyFiltersToCondition = applyFiltersToCondition;