@evergis/react 4.0.114 → 4.0.116

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

@@ -43,3 +43,17 @@ export declare const DEFAULT_DROPDOWN_WIDTH = 312;
 export declare const DEFAULT_FILTER_PADDING = 12;
 /** Базовый отступ обёртки контейнера. Снимается, когда контейнер занимает ячейку целиком. */
 export declare const BASE_CONTAINER_STYLE: CSSObject;
+/**
+ * Маркер тела контейнера внутри `ContainerRoot` — содержимое без заголовка.
+ *
+ * Нужен, чтобы находить тело по DOM снаружи: `#<id контейнера>` теперь указывает на корень,
+ * то есть на пару «заголовок + тело».
+ */
+export declare const CONTAINER_BODY_ATTRIBUTE = "data-container-body";
+/**
+ * Заданная высота контейнера достаётся телу — за вычетом заголовка.
+ *
+ * Сама высота остаётся на корне, поэтому тело забирает остаток ячейки, а заголовок сохраняет
+ * `flex-shrink: 0` и не сжимается.
+ */
+export declare const CONTAINER_BODY_FILL_STYLE: CSSObject;

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

@@ -2,6 +2,7 @@ export * from './useAttachmentItems';
 export * from './useAttachmentPreviewImages';
 export * from './useAutoCompleteControl';
 export * from './useContainerAttributes';
+export * from './useContainerRoot';
 export * from './useEditGroupAttributes';
 export * from './useFetchImageWithAuth';
 export * from './useFetchWithAuth';

package/dist/components/Dashboard/hooks/useContainerRoot.d.ts

@@ -0,0 +1,29 @@
+import { CSSObject } from 'styled-components';
+import { CONTAINER_BODY_ATTRIBUTE } from '../constants';
+import { WrapperRootProps } from './useWrapperSize';
+import { ConfigContainerChild } from '../types';
+interface UseContainerRootParams {
+    elementConfig?: ConfigContainerChild;
+    /** Внутренние дефолты корневой обёртки. Ссылка должна быть стабильной (константа или useMemo). */
+    defaults?: CSSObject;
+}
+/** Пропсы тела контейнера — узла с содержимым, соседнего с заголовком внутри `ContainerRoot`. */
+export interface ContainerBodyProps {
+    [CONTAINER_BODY_ATTRIBUTE]?: string;
+    $sizeCss?: CSSObject;
+}
+export interface ContainerRootParts {
+    /** Пропсы корневого узла: идентификаторы, авторский `style`, размеры. */
+    root: WrapperRootProps;
+    /** Пропсы тела: маркер для поиска по DOM и доля высоты, оставшаяся от корня. */
+    body: ContainerBodyProps;
+}
+/**
+ * Пропсы двух узлов контейнера с заголовком: корня (`ContainerRoot`) и тела.
+ *
+ * Контейнер обязан иметь ОДИН корневой узел — иначе в строке (`options.column: false`) заголовок
+ * и тело становятся двумя ячейками родительского flex-row. Размеры из конфига поэтому уходят на
+ * корень, а тело получает лишь остаток высоты под заголовком.
+ */
+export declare const useContainerRoot: ({ elementConfig, defaults }: UseContainerRootParams) => ContainerRootParts;
+export {};

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

@@ -18,6 +18,18 @@ export declare const ElementValueWrapper: import('styled-components').StyledComp
     noMargin?: boolean;
     $sizeTransparent?: boolean;
 }, never>;
+/**
+ * Единственный корневой узел контейнера: внутри — заголовок (`ExpandableTitle`) и тело.
+ *
+ * Два корня (фрагмент из заголовка и тела) ломают раскладку родителя: в строке
+ * (`options.column: false`) они становятся ДВУМЯ ячейками flex-row и делят её ширину между собой,
+ * а доля из `options.width` достаётся только телу. Поэтому `id`, `data-templatename`, авторский
+ * `style` и `$sizeCss` живут здесь, а не на теле — см. `useContainerRoot`.
+ *
+ * Всегда flex-колонка: заголовок и тело раньше были flex-элементами родительского `Container`,
+ * и блочная обёртка вернула бы схлопывание вертикальных отступов между ними.
+ */
+export declare const ContainerRoot: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & ContainerRootProps, never>;
 export declare const Container: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & ContainerRootProps & {
     isTitle?: boolean;
     isColumn?: boolean;

package/dist/index.js

@@ -3534,6 +3534,24 @@ const DEFAULT_FILTER_PADDING = 12;
 const BASE_CONTAINER_STYLE = {
     marginBottom: "1rem",
 };
+/**
+ * Маркер тела контейнера внутри `ContainerRoot` — содержимое без заголовка.
+ *
+ * Нужен, чтобы находить тело по DOM снаружи: `#<id контейнера>` теперь указывает на корень,
+ * то есть на пару «заголовок + тело».
+ */
+const CONTAINER_BODY_ATTRIBUTE = "data-container-body";
+/**
+ * Заданная высота контейнера достаётся телу — за вычетом заголовка.
+ *
+ * Сама высота остаётся на корне, поэтому тело забирает остаток ячейки, а заголовок сохраняет
+ * `flex-shrink: 0` и не сжимается.
+ */
+const CONTAINER_BODY_FILL_STYLE = {
+    flex: "1 1 auto",
+    minHeight: 0,
+    minWidth: 0,
+};
 
 const StackBarContainer = styled(uilibGl.Flex).withConfig({ displayName: "StackBarContainer", componentId: "sc-stc97k" }) `
   flex-wrap: nowrap;
@@ -3809,15 +3827,16 @@ const debounce = (callback, delay) => {
 const MILLION = 1000000;
 const TEN_THOUSANDS = 10000;
 const THOUSAND = 1000;
-const FRACTION_DIGITS = 1;
-const roundTotalSum = (value) => {
+const COMPACT_FRACTION_DIGITS = 1;
+const roundTotalSum = (value, fractionDigits) => {
     if (!value)
         return "";
+    const digits = fractionDigits ?? COMPACT_FRACTION_DIGITS;
     if (value >= MILLION) {
-        return `${(value / MILLION).toFixed(FRACTION_DIGITS)}M`;
+        return `${(value / MILLION).toFixed(digits)}M`;
     }
     if (value >= TEN_THOUSANDS) {
-        return `${(value / THOUSAND).toFixed(FRACTION_DIGITS)}K`;
+        return `${(value / THOUSAND).toFixed(digits)}K`;
     }
     return value;
 };
@@ -3962,11 +3981,14 @@ const formatNumberValue = (stringFormat, value, type, noUnits = false) => {
     if (scalingFactor) {
         currentValue *= scalingFactor;
     }
-    const compactValue = roundDigitGroup ? roundTotalSum(Number(currentValue)) : null;
+    const hasRounding = !lodash.isNil(rounding);
+    const compactValue = roundDigitGroup
+        ? roundTotalSum(Number(currentValue), hasRounding ? rounding : undefined)
+        : null;
     if (typeof compactValue === "string" && compactValue) {
         return appendUnitsLabel(compactValue, unitsLabel, noUnits);
     }
-    if ((rounding || rounding === 0) && (!isIntValue || (isIntValue && !isDefaultScaling))) {
+    if (hasRounding && (!isIntValue || !isDefaultScaling)) {
         currentValue = currentValue && Number(currentValue).toFixed(rounding);
     }
     if (splitDigitGroup) {
@@ -4587,7 +4609,24 @@ const ElementValueWrapper = styled.div.withConfig({ displayName: "ElementValueWr
       }
     `};
 `;
-const Container = styled(uilibGl.Flex).withConfig({ displayName: "Container", componentId: "sc-1gpmkbq" }) `
+/**
+ * Единственный корневой узел контейнера: внутри — заголовок (`ExpandableTitle`) и тело.
+ *
+ * Два корня (фрагмент из заголовка и тела) ломают раскладку родителя: в строке
+ * (`options.column: false`) они становятся ДВУМЯ ячейками flex-row и делят её ширину между собой,
+ * а доля из `options.width` достаётся только телу. Поэтому `id`, `data-templatename`, авторский
+ * `style` и `$sizeCss` живут здесь, а не на теле — см. `useContainerRoot`.
+ *
+ * Всегда flex-колонка: заголовок и тело раньше были flex-элементами родительского `Container`,
+ * и блочная обёртка вернула бы схлопывание вертикальных отступов между ними.
+ */
+const ContainerRoot = styled(uilibGl.Flex).withConfig({ displayName: "ContainerRoot", componentId: "sc-2j6lbd" }) `
+  flex-direction: column;
+  min-width: 0;
+
+  ${sizeCssMixin};
+`;
+const Container = styled(uilibGl.Flex).withConfig({ displayName: "Container", componentId: "sc-1o8dsu2" }) `
   flex-direction: column;
   width: 100%;
 
@@ -4641,7 +4680,7 @@ const Container = styled(uilibGl.Flex).withConfig({ displayName: "Container", co
 
   ${sizeCssMixin};
 `;
-const ContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName: "ContainerWrapper", componentId: "sc-4nlisz" }) `
+const ContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName: "ContainerWrapper", componentId: "sc-16tb6s0" }) `
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -4662,7 +4701,7 @@ const ContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName: "Contain
       }
     `}
 `;
-const DashboardChip = styled(uilibGl.Chip).withConfig({ displayName: "DashboardChip", componentId: "sc-8os072" }) `
+const DashboardChip = styled(uilibGl.Chip).withConfig({ displayName: "DashboardChip", componentId: "sc-19j7obx" }) `
   margin: 0 0.25rem 0.25rem 0;
   background: ${({ $isDefault, $bgColor, theme: { palette } }) => $isDefault ? palette.element : $bgColor || palette.primary};
   border-radius: ${({ $radius, theme: { borderRadius } }) => $radius || borderRadius.medium};
@@ -4678,7 +4717,7 @@ const DashboardChip = styled(uilibGl.Chip).withConfig({ displayName: "DashboardC
     color: ${({ $isDefault, $fontColor, theme: { palette } }) => $isDefault ? palette.icon : $fontColor || "#fff"};
   }
 `;
-const DashboardPlaceholderWrap = styled(uilibGl.Flex).withConfig({ displayName: "DashboardPlaceholderWrap", componentId: "sc-1qpd82p" }) `
+const DashboardPlaceholderWrap = styled(uilibGl.Flex).withConfig({ displayName: "DashboardPlaceholderWrap", componentId: "sc-anwihw" }) `
   flex-grow: 1;
   flex-direction: column;
   justify-content: center;
@@ -4686,7 +4725,7 @@ const DashboardPlaceholderWrap = styled(uilibGl.Flex).withConfig({ displayName:
   width: 100%;
   margin-bottom: 2rem;
 `;
-const DashboardPlaceholder = styled(uilibGl.Flex).withConfig({ displayName: "DashboardPlaceholder", componentId: "sc-1ls3oxv" }) `
+const DashboardPlaceholder = styled(uilibGl.Flex).withConfig({ displayName: "DashboardPlaceholder", componentId: "sc-jry8vp" }) `
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -4719,7 +4758,7 @@ const DashboardPlaceholder = styled(uilibGl.Flex).withConfig({ displayName: "Das
     }
   }
 `;
-const DashboardWrapper = styled(uilibGl.Flex).withConfig({ displayName: "DashboardWrapper", componentId: "sc-bx93vz" }) `
+const DashboardWrapper = styled(uilibGl.Flex).withConfig({ displayName: "DashboardWrapper", componentId: "sc-100ipup" }) `
   flex-direction: column;
   flex-wrap: nowrap;
   flex-grow: 1;
@@ -4732,7 +4771,7 @@ const DashboardWrapper = styled(uilibGl.Flex).withConfig({ displayName: "Dashboa
       margin-top: -0.35rem;
     `}
 `;
-const DashboardContent = styled(uilibGl.Flex).withConfig({ displayName: "DashboardContent", componentId: "sc-mslago" }) `
+const DashboardContent = styled(uilibGl.Flex).withConfig({ displayName: "DashboardContent", componentId: "sc-77il9k" }) `
   flex-grow: 1;
   width: 100%;
   padding: 1.5rem 1.5rem 2rem;
@@ -4747,16 +4786,16 @@ const PresentationWrapperCss = styled.css `
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
   box-shadow: ${uilibGl.shadows.raised};
 `;
-const PresentationWrapper = styled.div.withConfig({ displayName: "PresentationWrapper", componentId: "sc-1aajdp8" }) `
+const PresentationWrapper = styled.div.withConfig({ displayName: "PresentationWrapper", componentId: "sc-891z9z" }) `
   ${PresentationWrapperCss};
   position: relative;
   z-index: 1;
 `;
-const PresentationPanelWrapper = styled(PresentationWrapper).withConfig({ displayName: "PresentationPanelWrapper", componentId: "sc-9w36pj" }) `
+const PresentationPanelWrapper = styled(PresentationWrapper).withConfig({ displayName: "PresentationPanelWrapper", componentId: "sc-1ptpbt9" }) `
   margin-top: 0.75rem;
   transition: background-color ${uilibGl.transition.toggle};
 `;
-const PresentationHeader = styled.div.withConfig({ displayName: "PresentationHeader", componentId: "sc-xe6ev3" }) `
+const PresentationHeader = styled.div.withConfig({ displayName: "PresentationHeader", componentId: "sc-182b7wg" }) `
   margin: -1.5rem -1.5rem 0 -1.5rem;
   padding: 1.5rem;
   // background: url(images.presentationHeader) 0 0 no-repeat;
@@ -4768,7 +4807,7 @@ const PresentationHeader = styled.div.withConfig({ displayName: "PresentationHea
       padding-top: 7rem;
     `};
 `;
-const PresentationHeaderTools = styled(uilibGl.Flex).withConfig({ displayName: "PresentationHeaderTools", componentId: "sc-13dyz78" }) `
+const PresentationHeaderTools = styled(uilibGl.Flex).withConfig({ displayName: "PresentationHeaderTools", componentId: "sc-dms7fm" }) `
   justify-content: space-between;
   align-items: center;
   margin-bottom: -0.5rem;
@@ -4786,7 +4825,7 @@ const PresentationHeaderTools = styled(uilibGl.Flex).withConfig({ displayName: "
     }
   }
 `;
-const LayerGroupList = styled(uilibGl.Flex).withConfig({ displayName: "LayerGroupList", componentId: "sc-110h1r0" }) `
+const LayerGroupList = styled(uilibGl.Flex).withConfig({ displayName: "LayerGroupList", componentId: "sc-19uothl" }) `
   flex-direction: column;
   height: 100%;
   flex-wrap: nowrap;
@@ -4799,8 +4838,8 @@ const LayerGroupList = styled(uilibGl.Flex).withConfig({ displayName: "LayerGrou
     flex-grow: 1;
   }
 `;
-const PresentationHeaderButtons = styled(uilibGl.Flex).withConfig({ displayName: "PresentationHeaderButtons", componentId: "sc-5xerc" }) ``;
-const PresentationPanelContainer = styled.div.withConfig({ displayName: "PresentationPanelContainer", componentId: "sc-ok1jzl" }) `
+const PresentationHeaderButtons = styled(uilibGl.Flex).withConfig({ displayName: "PresentationHeaderButtons", componentId: "sc-c24t7n" }) ``;
+const PresentationPanelContainer = styled.div.withConfig({ displayName: "PresentationPanelContainer", componentId: "sc-17q0jzw" }) `
   position: absolute;
   top: 0;
   left: calc(${({ left }) => left || 0}px + 0.75rem);
@@ -4869,7 +4908,7 @@ const PresentationPanelContainer = styled.div.withConfig({ displayName: "Present
     }
   }
 `;
-const DataSourceErrorContainer = styled(uilibGl.Flex).withConfig({ displayName: "DataSourceErrorContainer", componentId: "sc-16x60eq" }) `
+const DataSourceErrorContainer = styled(uilibGl.Flex).withConfig({ displayName: "DataSourceErrorContainer", componentId: "sc-nh93ry" }) `
   align-items: center;
   justify-content: center;
   flex-wrap: nowrap;
@@ -4888,12 +4927,12 @@ const DataSourceErrorContainer = styled(uilibGl.Flex).withConfig({ displayName:
     }
   }
 `;
-const AttributeLabel = styled(uilibGl.Description).withConfig({ displayName: "AttributeLabel", componentId: "sc-1bou1dd" }) `
+const AttributeLabel = styled(uilibGl.Description).withConfig({ displayName: "AttributeLabel", componentId: "sc-9u3noy" }) `
   margin-top: 0 !important;
   margin-bottom: ${({ forCheckbox }) => forCheckbox ? "0.75rem" : "0.25rem"} !important;
   padding-left: ${({ isEdit }) => (isEdit ? "0.5rem" : "0")};
 `;
-const FeatureControls = styled(uilibGl.Flex).withConfig({ displayName: "FeatureControls", componentId: "sc-fpl3fy" }) `
+const FeatureControls = styled(uilibGl.Flex).withConfig({ displayName: "FeatureControls", componentId: "sc-1wenq0r" }) `
   align-items: center;
   gap: 1rem;
   flex-wrap: nowrap;
@@ -6534,6 +6573,45 @@ const useContainerAttributes = ({ elementConfig, type, renderElement }) => {
     return { getRenderContainerItem, attributesToRender };
 };
 
+/**
+ * Пропсы корневой обёртки контейнера: идентификаторы для внешних селекторов, авторский `style`
+ * из конфига и css-объект размеров.
+ *
+ * Размеры уходят styled-пропом (класс), а не inline-стилем, поэтому перебиваются снаружи
+ * без `!important`. Авторский `style` остаётся inline — у него приоритет по замыслу автора конфига.
+ */
+const useWrapperSize = ({ elementConfig, defaults }) => {
+    const { id, style, templateName, options } = elementConfig || {};
+    const { width, height, overflow } = options || {};
+    return React.useMemo(() => ({
+        id,
+        "data-templatename": templateName,
+        style,
+        $sizeCss: getWrapperSizeStyle({ style, width, height, overflow, defaults, defaultWidth: FILL_SIZE }),
+    }), [id, templateName, style, width, height, overflow, defaults]);
+};
+
+/**
+ * Пропсы двух узлов контейнера с заголовком: корня (`ContainerRoot`) и тела.
+ *
+ * Контейнер обязан иметь ОДИН корневой узел — иначе в строке (`options.column: false`) заголовок
+ * и тело становятся двумя ячейками родительского flex-row. Размеры из конфига поэтому уходят на
+ * корень, а тело получает лишь остаток высоты под заголовком.
+ */
+const useContainerRoot = ({ elementConfig, defaults }) => {
+    const root = useWrapperSize({ elementConfig, defaults });
+    // Гейт по РЕЗУЛЬТИРУЮЩЕЙ высоте, а не по `options.height`: высоту задаёт ещё и авторский `style`,
+    // и внутренние `defaults` контейнера. `auto` высотой не считаем — делить нечего.
+    const fillsHeight = !!root.$sizeCss?.height && root.$sizeCss.height !== "auto";
+    return React.useMemo(() => ({
+        root,
+        body: {
+            [CONTAINER_BODY_ATTRIBUTE]: "",
+            $sizeCss: fillsHeight ? CONTAINER_BODY_FILL_STYLE : undefined,
+        },
+    }), [root, fillsHeight]);
+};
+
 const useEditGroupAttributes = ({ elementConfig, type }) => {
     const { options } = elementConfig || {};
     const { controls, useProjectHiddenAttributes } = options || {};
@@ -7479,7 +7557,11 @@ const useExportPdf = (id, margin = 20) => {
             return;
         }
         setLoading(true);
-        const container = document.querySelector(`#${id}`);
+        const target = document.querySelector(`#${id}`);
+        // `#id` — корень контейнера, то есть пара «заголовок + тело». Постранично режем содержимое
+        // тела: у самого корня детей всего два, и длинное тело уехало бы одной картинкой на первую
+        // страницу. Fallback — для одноузловых целей вроде корня дашборда.
+        const container = target?.querySelector(`:scope > [${CONTAINER_BODY_ATTRIBUTE}]`) ?? target;
         if (!container) {
             setLoading(false);
             return;
@@ -7863,32 +7945,14 @@ const useUpdateDataSource = ({ dataSource, config, filters, attributes, layerPar
     }, [dataSource, getDataSourcePromises, getUpdatedDataSources, dataSources]);
 };
 
-/**
- * Пропсы корневой обёртки контейнера: идентификаторы для внешних селекторов, авторский `style`
- * из конфига и css-объект размеров.
- *
- * Размеры уходят styled-пропом (класс), а не inline-стилем, поэтому перебиваются снаружи
- * без `!important`. Авторский `style` остаётся inline — у него приоритет по замыслу автора конфига.
- */
-const useWrapperSize = ({ elementConfig, defaults }) => {
-    const { id, style, templateName, options } = elementConfig || {};
-    const { width, height, overflow } = options || {};
-    return React.useMemo(() => ({
-        id,
-        "data-templatename": templateName,
-        style,
-        $sizeCss: getWrapperSizeStyle({ style, width, height, overflow, defaults, defaultWidth: FILL_SIZE }),
-    }), [id, templateName, style, width, height, overflow, defaults]);
-};
-
 const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { id, children, options } = elementConfig || {};
     const { column, expandable, expanded, alignItems } = options || {};
     const isColumn = column === undefined || column;
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const root = useWrapperSize({ elementConfig });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { ...root, isColumn: isColumn, "$alignItems": alignItems, children: jsxRuntime.jsx(ContainerChildren, { type: type, items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
+    const { root, body } = useContainerRoot({ elementConfig });
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { ...body, isColumn: isColumn, "$alignItems": alignItems, children: jsxRuntime.jsx(ContainerChildren, { type: type, items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
 });
 
 const ChartLegendContainer = styled(uilibGl.Flex).withConfig({ displayName: "ChartLegendContainer", componentId: "sc-1di1zl9" }) `
@@ -8309,7 +8373,7 @@ const DataSourceProgressContainer = React.memo(({ config, elementConfig, type, i
     const { maxValue, showTotal, relatedDataSource, expandable, expanded } = options || {};
     const valueElement = children?.find(item => item.id === "value");
     const unitsElement = children?.find(item => item.id === "units");
-    const root = useWrapperSize({ elementConfig });
+    const { root, body } = useContainerRoot({ elementConfig });
     const { sliceItems, checkIsSliced, showMore, onShowMore } = useShownOtherItems(options);
     const totalUnits = React.useMemo(() => unitsElement?.type === "attributeUnits"
         ? attributes?.find(({ attributeName }) => attributeName === unitsElement.attributeName)?.stringFormat
@@ -8340,7 +8404,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, { ...root, 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", {
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(DataSourceProgressContainerWrapper, { ...body, 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 })] }));
@@ -8601,7 +8665,7 @@ const FiltersContainer = React.memo(({ elementConfig, config, type, renderElemen
     const { filters: configFilters } = currentPage;
     const { id, options } = elementConfig || {};
     const { padding, bgColor, fontColor, fontSize, expandable, expanded } = options || {};
-    const root = useWrapperSize({ elementConfig });
+    const { root, body } = useContainerRoot({ elementConfig });
     const isLoading = React.useMemo(() => checkIsLoading(dataSources, config, configFilters), [configFilters, config, dataSources]);
     const filterItems = React.useMemo(() => elementConfig?.children?.filter(child => child.options?.filterName), [elementConfig?.children]);
     const renderFilter = React.useCallback((filter, index) => {
@@ -8610,7 +8674,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, { ...root, "$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(ContainerRoot, { ...root, 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, { ...body, "$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 }) => {
@@ -8618,26 +8682,6 @@ const DefaultAttributesContainer = React.memo(({ type, renderElement }) => {
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: attributes?.map(({ attributeName }) => (jsxRuntime.jsx(Container, { isColumn: true, children: renderElement({ id: attributeName }) }, attributeName))) }));
 });
 
-const ChartContainerWrapper = styled(uilibGl.FlexSpan).withConfig({ displayName: "ChartContainerWrapper", componentId: "sc-17oj4lo" }) `
-  flex-direction: column;
-  min-width: 0;
-
-  /* Заданная высота контейнера достаётся телу графика — за вычетом заголовка. */
-  ${({ $sizeCss }) => !!$sizeCss?.height &&
-    styled.css `
-      /* Раздача высоты требует, чтобы обёртка была flex-колонкой (FlexSpan сам по себе не flex),
-         иначе Container с flex:1 1 auto не растянется на заданную высоту, а fill-график не впишется по высоте. */
-      display: flex;
-
-      > ${Container} {
-        flex: 1 1 auto;
-        min-height: 0;
-      }
-    `}
-
-  ${sizeCssMixin};
-`;
-
 /**
  * Контекст вписывания графика (`options.fill` контейнера Chart).
  *
@@ -8655,7 +8699,7 @@ const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderEleme
     const aliasElement = children.find(child => child.id === "alias");
     const chartElement = children.find(child => child.id === "chart");
     const legendElement = children.find(child => child.id === "legend");
-    const root = useWrapperSize({ elementConfig });
+    const { root, body } = useContainerRoot({ elementConfig });
     const { data, loading } = useChartData({
         element: chartElement,
         type,
@@ -8666,7 +8710,7 @@ const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderEleme
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(ChartContainerWrapper, { ...root, 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: twoColumns && fill ? "stretch" : "center", "$fill": !!fill, children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { "$fill": !!fill, children: jsxRuntime.jsx(FillContext.Provider, { value: fillContextValue, 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(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: twoColumns && fill ? "stretch" : "center", "$fill": !!fill, children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { "$fill": !!fill, children: jsxRuntime.jsx(FillContext.Provider, { value: fillContextValue, 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 }) => {
@@ -8892,13 +8936,13 @@ const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComp
         gap: gap ?? DEFAULT_TILE_GAP,
     });
     const defaults = React.useMemo(() => ({ height: isLoading ? "3rem" : "auto" }), [isLoading]);
-    const root = useWrapperSize({ elementConfig, defaults });
+    const { root, body } = useContainerRoot({ elementConfig, defaults });
     if (!relatedDataSource)
         return null;
     if (dataSource && !dataSource.features) {
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DataSourceContainerWrapper, { ...root, ref: tilesRef, isColumn: column, "$isRow": !column, "$columns": columns, "$gap": gap, "$align": align, "$stretch": stretch, "$tileWidth": tileWidth, children: sliceItems(dataSource.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) }), checkIsSliced(dataSource.features) && (jsxRuntime.jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DataSourceContainerWrapper, { ...body, ref: tilesRef, isColumn: column, "$isRow": !column, "$columns": columns, "$gap": gap, "$align": align, "$stretch": stretch, "$tileWidth": tileWidth, children: sliceItems(dataSource.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, 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: "Показать все" }) }))] })) : (jsxRuntime.jsx(ContainerLoading, {}))] }));
 });
@@ -9058,7 +9102,7 @@ const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
     const { id, options } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const root = useWrapperSize({ elementConfig });
+    const { root, body } = useContainerRoot({ elementConfig });
     const render = React.useMemo(() => getRenderElement({
         config,
         elementConfig,
@@ -9084,11 +9128,11 @@ const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
     // Подпись `alias` не задают почти всегда — тогда обёртку не рендерим, чтобы в DOM не оставался
     // пустой блок, который вдобавок отъедал бы половину ширины у галереи (см. isColumn ниже).
     const aliasNode = render({ id: "alias" });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (
             // `isColumn`: подпись над галереей, а сама галерея на всю ширину. Без него Container
             // раскладывает alias и slideshow в ряд, и оба (Flex с `width: 100%`) сжимаются пополам —
             // картинка занимала лишь половину доступной ширины.
-            jsxRuntime.jsxs(Container, { ...root, isColumn: true, children: [aliasNode && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: aliasNode }), jsxRuntime.jsx(ContainerValue, { children: render({
+            jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [aliasNode && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: aliasNode }), jsxRuntime.jsx(ContainerValue, { children: render({
                             id: "slideshow",
                             wrap: false,
                         }) })] }))] }));
@@ -9099,8 +9143,8 @@ const CameraContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { id, options } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const root = useWrapperSize({ elementConfig });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...root, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
+    const { root, body } = useContainerRoot({ elementConfig });
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
 });
 
 const TabAnchor = styled.div.withConfig({ displayName: "TabAnchor", componentId: "sc-emqf31" }) `
@@ -9520,7 +9564,7 @@ const LayersContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { id, options } = elementConfig || {};
     const { layerNames, expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const root = useWrapperSize({ elementConfig });
+    const { root, body } = useContainerRoot({ elementConfig });
     const layers = React.useMemo(() => {
         if (!currentPage?.layers)
             return [];
@@ -9528,7 +9572,7 @@ 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, { ...root, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { ...body, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
 const ExportPdfContainer = React.memo(({ type, elementConfig }) => {
@@ -9564,8 +9608,8 @@ const UploadContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { id, options } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const root = useWrapperSize({ elementConfig });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(UploadContainerWrapper, { ...root, children: renderElement({ id: "uploader", wrap: false }) }))] }));
+    const { root, body } = useContainerRoot({ elementConfig });
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(UploadContainerWrapper, { ...body, children: renderElement({ id: "uploader", wrap: false }) }))] }));
 });
 
 const StatusBadge = styled(uilibGl.Chip).withConfig({ displayName: "StatusBadge", componentId: "sc-1xmfl10" }) `
@@ -9785,7 +9829,7 @@ const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { taskId, runTask, stopTask, status, openLog, loading, isLogDialogOpen, closeLog, log, lastMessage, result, } = usePythonTask();
     const { options } = elementConfig || {};
     const { title, relatedResources, center, icon, statusColors, responseFilters, useNotifications, } = options || {};
-    const root = useWrapperSize({ elementConfig });
+    const { root, body } = useContainerRoot({ elementConfig });
     const { setNotificationDismissed } = useTaskNotifications({
         enabled: !!useNotifications,
         suppressed: isLogDialogOpen,
@@ -9825,12 +9869,12 @@ const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
             return runTask({ resourceId, parameters: newParams, script, fileName, methodName });
         }));
     }, [attributes, currentPage.filters, dataSources, ewktGeometry, layerInfo, projectDataSources, relatedResources, runTask, selectedFilters, stopTask, taskId]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(TaskContainerWrapper, { ...root, justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(TaskContainerWrapper, { ...body, justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
 });
 
 const EditContainer = ({ type, elementConfig, renderElement }) => {
-    const { id, style } = elementConfig || {};
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value" }) })] })] }));
+    const { root, body } = useContainerRoot({ elementConfig });
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value" }) })] })] }));
 };
 
 const getControlTemplateName = (type) => {
@@ -10567,7 +10611,7 @@ const AttachmentContainer = React.memo(({ type, elementConfig, renderElement })
     const { items, visibleItems, viewMode, setViewMode, showMore, setShowMore, hasMore, hiddenCount } = useAttachmentContainer({ type, elementConfig });
     const { id, options } = elementConfig || {};
     const { expandable, expanded } = options || {};
-    const root = useWrapperSize({ elementConfig, defaults: BASE_CONTAINER_STYLE });
+    const { root, body } = useContainerRoot({ elementConfig, defaults: BASE_CONTAINER_STYLE });
     const [previewIndex, setPreviewIndex] = React.useState(null);
     const previewImages = useAttachmentPreviewImages({ items, active: previewIndex !== null });
     const handlePreview = React.useCallback((link) => {
@@ -10578,7 +10622,7 @@ const AttachmentContainer = React.memo(({ type, elementConfig, renderElement })
     const handleClosePreview = React.useCallback(() => setPreviewIndex(null), []);
     const handleShowMore = React.useCallback(() => setShowMore(true), [setShowMore]);
     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, { ...root, children: jsxRuntime.jsxs(uilibGl.Flex, { column: true, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { ...body, children: jsxRuntime.jsxs(uilibGl.Flex, { column: true, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
                                 ns: "common",
                                 defaultValue: "Ресурс недоступен",
                             }) }, previewIndex))] }) }))] }));
@@ -15218,8 +15262,11 @@ exports.AttributeGalleryContainer = AttributeGalleryContainer;
 exports.AttributeLabel = AttributeLabel;
 exports.BASE_CONTAINER_STYLE = BASE_CONTAINER_STYLE;
 exports.CHART_TYPES = CHART_TYPES;
+exports.COMPACT_FRACTION_DIGITS = COMPACT_FRACTION_DIGITS;
 exports.CONFIG_PAGES_ID = CONFIG_PAGES_ID;
 exports.CONFIG_PAGE_ID = CONFIG_PAGE_ID;
+exports.CONTAINER_BODY_ATTRIBUTE = CONTAINER_BODY_ATTRIBUTE;
+exports.CONTAINER_BODY_FILL_STYLE = CONTAINER_BODY_FILL_STYLE;
 exports.CameraContainer = CameraContainer;
 exports.Chart = Chart;
 exports.ChartContainer = ChartContainer;
@@ -15228,6 +15275,7 @@ exports.ChartLoading = ChartLoading;
 exports.Container = Container;
 exports.ContainerChildren = ContainerChildren;
 exports.ContainerLoading = ContainerLoading;
+exports.ContainerRoot = ContainerRoot;
 exports.ContainerWrapper = ContainerWrapper;
 exports.ContainersGroupContainer = ContainersGroupContainer;
 exports.DEFAULT_ATTRIBUTE_NAME = DEFAULT_ATTRIBUTE_NAME;
@@ -15521,6 +15569,7 @@ exports.useBeforeSave = useBeforeSave;
 exports.useChartChange = useChartChange;
 exports.useChartData = useChartData;
 exports.useContainerAttributes = useContainerAttributes;
+exports.useContainerRoot = useContainerRoot;
 exports.useCurrentPageLayers = useCurrentPageLayers;
 exports.useCustomFeatureSelect = useCustomFeatureSelect;
 exports.useDashboardHeader = useDashboardHeader;