@evergis/react 4.0.104 → 4.0.105

package/dist/index.js

@@ -3402,6 +3402,11 @@ const asResourceId = (value) => value;
 const CHART_TYPES = ["bar", "line", "pie", "stack"];
 /** Выравнивание текста/блоков. */
 const ALIGNMENTS = ["left", "center", "right"];
+/**
+ * Выравнивание плиток контейнера DataSource+RoundedBackground: к базовым `left/center/right`
+ * добавлен режим `stretch` — плитки строки растягиваются на всю ширину (ТЗ 9.4/9.5).
+ */
+const TILE_ALIGNMENTS = ["left", "center", "right", "stretch"];
 /** Выравнивание детей контейнера по поперечной оси (CSS `align-items`). */
 const ALIGN_ITEMS = ["flex-start", "center", "flex-end", "stretch", "baseline"];
 /** Масштабирование изображения внутри своего бокса (CSS `object-fit`). */
@@ -7219,6 +7224,56 @@ const useDiffPage = (type) => {
     return React.useMemo(() => isDiffPage, [isDiffPage]);
 };
 
+/**
+ * Уравнивает ширину всех плиток контейнера по самой широкой.
+ *
+ * Натуральная ширина каждой плитки измеряется через временное inline `width: max-content`
+ * (снимает применённое ограничение `--tile-width`, поэтому замер устойчив к динамике данных и не
+ * зацикливает ResizeObserver — итоговый максимум совпадает с уже применённым). Возвращаемое число
+ * контейнер прокидывает в CSS-переменную `--tile-width`, которую читает каждая плитка.
+ *
+ * `enabled: false` (режим «Растянуть», «В столбец» или старые конфиги без `columns`) полностью
+ * отключает измерение — ширина берётся из grid-ячейки.
+ */
+const useEqualTileWidth = (enabled, itemsCount) => {
+    const ref = React.useRef(null);
+    const [width, setWidth] = React.useState();
+    const measure = React.useCallback(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        const tiles = Array.from(node.querySelectorAll("[data-tile]"));
+        if (!tiles.length)
+            return;
+        tiles.forEach(tile => {
+            tile.style.width = "max-content";
+        });
+        let max = 0;
+        tiles.forEach(tile => {
+            max = Math.max(max, tile.getBoundingClientRect().width);
+        });
+        tiles.forEach(tile => {
+            tile.style.width = "";
+        });
+        const next = Math.ceil(max);
+        setWidth(previous => (max && previous !== next ? next : previous));
+    }, []);
+    React.useEffect(() => {
+        if (!enabled) {
+            setWidth(undefined);
+            return;
+        }
+        const node = ref.current;
+        if (!node)
+            return;
+        measure();
+        const observer = new ResizeObserver(() => measure());
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [enabled, itemsCount, measure]);
+    return [ref, enabled ? width : undefined];
+};
+
 const SAVE_HOOK_RESULT_DURATION = 4000;
 const NOTIFICATION_ID_RADIX = 36;
 const NOTIFICATION_ID_LENGTH = 8;
@@ -8686,33 +8741,70 @@ const IconContainer = React.memo(({ elementConfig, renderElement }) => {
     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" }) })] }));
 });
 
-/**
- * Обёртка записей источника.
- *
- * В ряду (`column: false`) записи переносятся на новую строку. Без переноса они дрались бы за
- * одну строку: обёртка каждой записи — flex-элемент и ужимается, а внутренний шаблон (плашка
- * RoundedBackground имеет жёсткие 9rem) — нет, поэтому записи наезжали бы друг на друга.
- *
- * `flex-wrap` намеренно не вынесен в row-ветку самого `Container`: там дети — карточки
- * контейнеров шириной 100%, и перенос уложил бы их по одной на строку, сломав ряд у
- * ContainersGroup.
- */
+/** Дефолтный внутренний отступ между плитками, px (ТЗ §11). */
+const DEFAULT_TILE_GAP = 8;
+/** Раскладка ряда плиток (grid `justify-content`) для не-`stretch` выравнивания. */
+const ROW_JUSTIFY = {
+    left: "start",
+    center: "center",
+    right: "end",
+    stretch: "stretch",
+};
+/** Горизонтальное положение плитки в режиме «В столбец» (CSS `align-items`). */
+const COLUMN_ALIGN_ITEMS = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end",
+    stretch: "stretch",
+};
+
 const DataSourceContainerWrapper = styled(Container).withConfig({ displayName: "DataSourceContainerWrapper", componentId: "sc-1xnd27m" }) `
-  ${({ $isRow }) => $isRow &&
-    styled.css `
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      column-gap: 0.5rem;
-    `};
+  ${({ $tileWidth }) => $tileWidth != null && `--tile-width: ${$tileWidth}px;`}
+
+  ${({ $isRow, $columns, $gap, $align, $stretch }) => {
+    if ($isRow) {
+        if ($columns) {
+            return styled.css `
+          display: grid;
+          grid-template-columns: repeat(${$columns}, ${$stretch ? "minmax(0, 1fr)" : "auto"});
+          justify-content: ${$stretch ? "stretch" : ROW_JUSTIFY[$align ?? "left"]};
+          align-items: stretch;
+          gap: ${$gap ?? DEFAULT_TILE_GAP}px;
+        `;
+        }
+        return styled.css `
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: ${$gap != null ? `${$gap}px` : "0.5rem"};
+      `;
+    }
+    return styled.css `
+      align-items: ${$stretch ? "stretch" : COLUMN_ALIGN_ITEMS[$align ?? "left"]};
+
+      > * {
+        width: ${$stretch ? "100%" : "auto"};
+      }
+
+      /* Вертикальный отступ между плитками в столбце — настраиваемый gap (ТЗ §7): переопределяем
+         фикс. margin-bottom 0.5rem, который навешивает детям база Container(isColumn). */
+      && > *:not(:last-child) {
+        margin-bottom: ${$gap != null ? `${$gap}px` : `${DEFAULT_TILE_GAP}px`};
+      }
+    `;
+}};
 `;
 
 const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
+    const { t } = useGlobalContext();
     const { dataSources, expandedContainers } = useWidgetContext(type);
     const { id, options } = elementConfig || {};
-    const { column = true, relatedDataSource, expandable, expanded } = options || {};
+    const { column = true, relatedDataSource, expandable, expanded, columns, gap, align } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
+    const { sliceItems, checkIsSliced, showMore, onShowMore } = useShownOtherItems(options);
     const dataSource = React.useMemo(() => dataSources?.find(({ name }) => name === relatedDataSource), [dataSources, relatedDataSource]);
     const isLoading = !dataSource?.features;
+    const stretch = align === "stretch";
+    const [tilesRef, tileWidth] = useEqualTileWidth(!column && !!columns && !stretch, dataSource?.features?.length ?? 0);
     const defaults = React.useMemo(() => ({ height: isLoading ? "3rem" : "auto" }), [isLoading]);
     const root = useWrapperSize({ elementConfig, defaults });
     if (!relatedDataSource)
@@ -8720,7 +8812,9 @@ const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComp
     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.jsx(DataSourceContainerWrapper, { ...root, isColumn: column, "$isRow": !column, 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.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
+                            ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" })
+                            : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) }))] })) : (jsxRuntime.jsx(ContainerLoading, {}))] }));
 });
 
 const SvgContainerColorMixin = styled.css `
@@ -8743,11 +8837,11 @@ const SvgContainer = styled.div.withConfig({ displayName: "SvgContainer", compon
   }
 `;
 
-/** Выравнивание заголовка по горизонтали — в терминах flex-раскладки. */
 const ALIGN_TO_JUSTIFY = {
     left: "flex-start",
     center: "center",
     right: "flex-end",
+    stretch: "flex-start",
 };
 const ContainerIconTitle = styled(uilibGl.Flex).withConfig({ displayName: "ContainerIconTitle", componentId: "sc-1jfnkqo" }) `
   /* inline-flex, а не блочный flex во всю ширину: иначе text-align родителя игнорируется. */
@@ -9025,16 +9119,14 @@ const ContainerIconValue = styled(uilibGl.Flex).withConfig({ displayName: "Conta
 const RoundedBackgroundContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName: "RoundedBackgroundContainerWrapper", componentId: "sc-a1l8h3" }) `
   position: relative;
   flex-direction: ${({ $bigIcon }) => ($bigIcon ? "row" : "column")};
-  width: 9rem;
+  width: ${({ $fillWidth }) => ($fillWidth ? "var(--tile-width, 100%)" : "9rem")};
+  height: 100%;
+  box-sizing: border-box;
   padding: 0.75rem 0.75rem 0.5rem;
   background-color: ${({ theme: { palette } }) => palette.element};
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.large};
   flex-wrap: nowrap;
 
-  && {
-    margin-bottom: 0.5rem;
-  }
-
   ${({ $center }) => $center &&
     styled.css `
       align-items: center;
@@ -9051,7 +9143,7 @@ const RoundedBackgroundContainerWrapper = styled(uilibGl.Flex).withConfig({ disp
     styled.css `
       background-color: ${transparentizeColor($color, 6)};
 
-      * {
+      ${ContainerValue}, ${ContainerUnits}, ${ContainerAlias} {
         color: ${$color};
         fill: ${$color};
       }
@@ -9111,11 +9203,13 @@ const RoundedBackgroundContainerWrapper = styled(uilibGl.Flex).withConfig({ disp
   }
 
   ${ContainerAlias} {
-    margin-top: 0.25rem;
+    margin-top: auto;
+    padding-top: 0.25rem;
   }
 `;
 
 const ALIAS_DEFAULT_MAX_LENGTH = 28;
+const DESCRIPTION_DEFAULT_MAX_LINES = 2;
 const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, renderElement, }) => {
     const { t } = useGlobalContext();
     const { dataSources, attributes: ctxAttributes } = useWidgetContext(type);
@@ -9127,7 +9221,7 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
     });
     const attributes = lodash.isEmpty(dsAttributes) ? ctxAttributes : dsAttributes;
     const { id, options, style, children } = elementConfig || {};
-    const { maxLength, wordBreak, center, fontColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute } = options || {};
+    const { maxLength, maxLines, wordBreak, center, fontColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute, columns } = options || {};
     const iconElement = children?.find(item => item.id === "icon");
     const aliasElement = children?.find(item => item.id === "alias");
     const unitsElement = children?.find(item => item.id === "units");
@@ -9146,11 +9240,35 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
             return null;
         return (jsxRuntime.jsx(uilibGl.FlexSpan, { width: iconElement.options?.width || "1rem", alignItems: "center", mr: "0.5rem", children: renderElement({ id: "icon", wrap: false }) }));
     }, [iconElement, renderElement]);
-    const renderAlias = React.useMemo(() => (jsxRuntime.jsx(ContainerAlias, { style: aliasElement?.style, children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength || ALIAS_DEFAULT_MAX_LENGTH, wordBreak: wordBreak, children: renderElement({ id: "alias", wrap: false }) }) })), [aliasElement?.style, maxLength, renderElement, wordBreak]);
-    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]);
+    const aliasAttribute = React.useMemo(() => aliasElement && !aliasElement.type && aliasElement.attributeName
+        ? attributes.find(({ attributeName }) => attributeName === aliasElement.attributeName)
+        : undefined, [attributes, aliasElement]);
+    const aliasContent = React.useMemo(() => aliasAttribute
+        ? formatAttributeValue({
+            t,
+            type: aliasAttribute.type,
+            value: aliasAttribute.value,
+            stringFormat: aliasAttribute.stringFormat,
+            noUnits: true,
+        })
+        : renderElement({ id: "alias", wrap: false }), [aliasAttribute, t, renderElement]);
+    const renderAlias = React.useMemo(() => (jsxRuntime.jsx(ContainerAlias, { style: aliasElement?.style, children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength || ALIAS_DEFAULT_MAX_LENGTH, maxLines: maxLines ?? (columns ? DESCRIPTION_DEFAULT_MAX_LINES : undefined), wordBreak: wordBreak, children: aliasContent }) })), [aliasElement?.style, maxLength, maxLines, columns, aliasContent, wordBreak]);
+    const unitsAttribute = React.useMemo(() => unitsElement && !unitsElement.type && unitsElement.attributeName
+        ? attributes.find(({ attributeName }) => attributeName === unitsElement.attributeName)
+        : undefined, [attributes, unitsElement]);
+    const unitsContent = React.useMemo(() => unitsAttribute
+        ? formatAttributeValue({
+            t,
+            type: unitsAttribute.type,
+            value: unitsAttribute.value,
+            stringFormat: unitsAttribute.stringFormat,
+            noUnits: true,
+        })
+        : renderElement({ id: "units" }), [unitsAttribute, t, renderElement]);
+    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: unitsContent }))] })), [valueElement?.style, value, unitsElement, unitsContent]);
     if (lodash.isNil(value) && hideEmpty)
         return null;
-    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] }));
+    return (jsxRuntime.jsxs(RoundedBackgroundContainerWrapper, { id: id, "data-tile": true, style: innerTemplateStyle || style, "$center": center !== false, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, "$fillWidth": !!columns, children: [jsxRuntime.jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
 });
 
 const AddFeatureContainer = React.memo(({ elementConfig }) => {
@@ -9425,23 +9543,16 @@ exports.EditGeometryType = void 0;
 
 exports.StyligClassificationTypes = void 0;
 (function (StyligClassificationTypes) {
-    StyligClassificationTypes["FillColor"] = "fill";
-    StyligClassificationTypes["CircleColor"] = "circle";
-    StyligClassificationTypes["LineColor"] = "line";
-    StyligClassificationTypes["CircleStroke"] = "circle-stroke";
-    StyligClassificationTypes["PolygonStroke"] = "polygon-stroke";
+    StyligClassificationTypes["FillColor"] = "fill-color";
+    StyligClassificationTypes["FillExtrusionColor"] = "fill-extrusion-color";
+    StyligClassificationTypes["CircleColor"] = "circle-color";
+    StyligClassificationTypes["LineColor"] = "line-color";
+    StyligClassificationTypes["CircleStrokeColor"] = "circle-stroke-color";
     StyligClassificationTypes["CircleRadius"] = "circle-radius";
     StyligClassificationTypes["CircleStrokeWidth"] = "circle-stroke-width";
     StyligClassificationTypes["LineWidth"] = "line-width";
-    StyligClassificationTypes["PolygonStrokeWidth"] = "polygon-stroke-width";
     StyligClassificationTypes["CircleBlur"] = "circle-blur";
     StyligClassificationTypes["LineBlur"] = "line-blur";
-    StyligClassificationTypes["PolygonStrokeBlur"] = "polygon-stroke-blur";
-    StyligClassificationTypes["FillOpacity"] = "fill-opacity";
-    StyligClassificationTypes["CircleOpacity"] = "circle-opacity";
-    StyligClassificationTypes["LineOpacity"] = "line-opacity";
-    StyligClassificationTypes["PolygonStrokeOpacity"] = "polygon-stroke-opacity";
-    StyligClassificationTypes["CircleTranslate"] = "circle-translate";
 })(exports.StyligClassificationTypes || (exports.StyligClassificationTypes = {}));
 
 const StyledButton = styled(uilibGl.FlatButton).withConfig({ displayName: "StyledButton", componentId: "sc-13r9ztd" }) `
@@ -9497,7 +9608,7 @@ const buildFiltersFromResponse = (responseFilters, result) => {
     return Object.keys(filters).length ? filters : null;
 };
 
-const ClampedText = styled.div.withConfig({ displayName: "ClampedText", componentId: "sc-138git7" }) `
+const ClampedText$1 = styled.div.withConfig({ displayName: "ClampedText", componentId: "sc-138git7" }) `
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -9505,7 +9616,7 @@ const ClampedText = styled.div.withConfig({ displayName: "ClampedText", componen
   text-overflow: ellipsis;
   word-break: break-word;
 `;
-const clampDescription = (text) => React.createElement(ClampedText, null, text);
+const clampDescription = (text) => React.createElement(ClampedText$1, null, text);
 
 const RUN_ID_RADIX = 36;
 const RUN_ID_LENGTH = 8;
@@ -14420,6 +14531,13 @@ const ExpandableTitle = React.memo(({ elementConfig, type, renderElement }) => {
     const titleElement = children?.find(item => item.id === "title");
     if (!titleElement)
         return null;
+    const titleIconElement = children?.find(item => item.id === "titleIcon");
+    const isLayers = templateName === exports.ContainerTemplate.Layers;
+    const hasTitleText = !!titleElement.value?.toString().trim() || !!titleElement.attributeName;
+    const hasTitleIcon = !!titleIconElement?.value;
+    const hasControls = !!expandable || !!titleElement.options?.downloadById || isLayers;
+    if (!hasTitleText && !hasTitleIcon && !hasControls)
+        return null;
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     return (jsxRuntime.jsx(TitleContainer, { containerId: id, elementConfig: titleElement, templateName: templateName, layerNames: layerNames, fontColor: fontColor, expandable: expandable, expanded: expanded, type: type, isVisible: isVisible, renderElement: renderElement }));
 });
@@ -14745,8 +14863,40 @@ const TextTrimValue = styled.div.withConfig({ displayName: "TextTrimValue", comp
   word-break: ${({ wordBreak }) => wordBreak ?? "break-word"};
   overflow: hidden;
 `;
+const ClampedText = styled.div.withConfig({ displayName: "ClampedText", componentId: "sc-asq1h5" }) `
+  display: -webkit-box;
+  -webkit-line-clamp: ${({ $maxLines }) => $maxLines};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  word-break: ${({ wordBreak }) => wordBreak ?? "break-word"};
+`;
 
-const TextTrim = React.memo(({ maxLength, expandable, lineBreak, wordBreak, children }) => {
+/**
+ * Обрезка описания по числу строк (line-clamp). Тултип с полным текстом показывается ТОЛЬКО при
+ * реальном переполнении (`scrollHeight > clientHeight`), отслеживаемом через ResizeObserver, —
+ * у необрезанного текста тултипа нет (ТЗ 9.7).
+ */
+const TextTrimLineClamp = React.memo(({ maxLines, wordBreak, children }) => {
+    const ref = React.useRef(null);
+    const [isOverflow, setIsOverflow] = React.useState(false);
+    React.useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        const check = () => setIsOverflow(node.scrollHeight > node.clientHeight);
+        check();
+        const observer = new ResizeObserver(check);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [children, maxLines]);
+    const clamped = (jsxRuntime.jsx(ClampedText, { ref: ref, "$maxLines": maxLines, wordBreak: wordBreak, children: children }));
+    if (!isOverflow)
+        return clamped;
+    return (jsxRuntime.jsx(uilibGl.Tooltip, { placement: "top", arrow: true, content: children, children: tooltipRef => jsxRuntime.jsx("div", { ref: tooltipRef, children: clamped }) }));
+});
+const TextTrim = React.memo(({ maxLength, maxLines, expandable, lineBreak, wordBreak, children }) => {
     const { t } = useGlobalContext();
     const [expanded, toggleExpanded] = useToggle();
     const text = children?.toString();
@@ -14755,6 +14905,9 @@ const TextTrim = React.memo(({ maxLength, expandable, lineBreak, wordBreak, chil
             return jsxRuntime.jsx(TextTrimValue, { wordBreak: wordBreak, children: value });
         return jsxRuntime.jsx(TextTrimValue, { wordBreak: wordBreak, dangerouslySetInnerHTML: { __html: lodash.unescape(value).split(lineBreak).join("<br />") } });
     }, [lineBreak, wordBreak]);
+    if (maxLines && text?.length) {
+        return jsxRuntime.jsx(TextTrimLineClamp, { maxLines: maxLines, wordBreak: wordBreak, children: text });
+    }
     if (!text?.length || !maxLength || text.length <= maxLength)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: formatValue(text) });
     const substring = `${text.substring(0, maxLength)}...`;
@@ -14801,41 +14954,6 @@ const RasterLayer = ({ layer, tileUrl, visible, beforeId, }) => {
     return (jsxRuntime.jsx(MapGL.Source, { id: layer.name, type: "raster", tiles: tiles, children: jsxRuntime.jsx(MapGL.Layer, { id: layer.name, type: "raster", "source-layer": "default", beforeId: beforeId, layout: { visibility: visible ? "visible" : "none" } }) }, `${layer.name}-${tileUrl}`));
 };
 
-const getClientStyleItemPrefixSuffix = (geometryType, itemType) => {
-    switch (geometryType) {
-        case api.OgcGeometryType.Point:
-        case api.OgcGeometryType.MultiPoint:
-            switch (itemType) {
-                case "symbol":
-                    return ["point-label-layer-", "-label"];
-                default:
-                    return ["point-layer-", ""];
-            }
-        case api.OgcGeometryType.LineString:
-        case api.OgcGeometryType.MultiLineString:
-            switch (itemType) {
-                case "symbol":
-                    return ["polyline-label-layer-", "-label"];
-                default:
-                    return ["polyline-layer-", ""];
-            }
-        case api.OgcGeometryType.Polygon:
-        case api.OgcGeometryType.MultiPolygon:
-            switch (itemType) {
-                case "line":
-                    return ["polygon-stroke-layer-", "-stroke"];
-                case "fill-extrusion":
-                    return ["polygon-extrusion-layer-", "-extrusion"];
-                case "symbol":
-                    return ["polygon-label-layer-", "-label"];
-                default:
-                    return ["polygon-layer-", ""];
-            }
-        default:
-            return ["", ""];
-    }
-};
-
 const findAttributeInExpression = (expression) => {
     if (Array.isArray(expression) && expression.length === 2 && expression[0] === "get") {
         return [expression[1]];
@@ -14857,6 +14975,14 @@ const getActualExtrusionHeight = (paint) => {
         : paint?.["fill-extrusion-height"];
 };
 
+const getLayerClientStyle = (layer) => {
+    const clientStyle = layer?.configuration?.clientStyle;
+    return {
+        ...clientStyle,
+        items: clientStyle?.items ?? [],
+    };
+};
+
 const extractAttributesFromObject = (obj) => {
     if (!obj || lodash.isEmpty(obj)) {
         return [];
@@ -14886,7 +15012,6 @@ const VectorLayer = ({ layer, tileUrl, visible, beforeId, getLayerTempStyle, })
     const layerConfiguration = layer?.configuration;
     const clientStyle = layerConfiguration?.clientStyle;
     const idAttribute = layerConfiguration?.attributesConfiguration?.idAttribute;
-    const geometryType = layerConfiguration?.geometryType;
     const tiles = React.useMemo(() => [tileUrl], [tileUrl]);
     // Собираем конфигурации иконок для загрузки из clientStyle
     const iconConfigs = React.useMemo(() => {
@@ -14913,121 +15038,28 @@ const VectorLayer = ({ layer, tileUrl, visible, beforeId, getLayerTempStyle, })
         }).filter((config) => config !== null);
     }, [clientStyle]);
     useMapImages({ images: iconConfigs });
-    const renderLayerByGeometryType = React.useCallback(() => {
-        const visibility = visible ? "visible" : "none";
-        switch (geometryType) {
-            case api.OgcGeometryType.Point:
-            case api.OgcGeometryType.MultiPoint:
-                return (jsxRuntime.jsx(MapGL.Layer, { id: layer.name, type: "circle", "source-layer": "default", beforeId: beforeId, layout: {
-                        ...getLayerTempStyle?.(layer.name, "circle")?.layout,
-                        visibility,
-                    }, paint: {
-                        ...DEFAULT_CIRCLE_PAINT,
-                        ...getLayerTempStyle?.(layer.name, "circle")?.paint,
-                    } }));
-            case api.OgcGeometryType.Polygon:
-            case api.OgcGeometryType.MultiPolygon:
-                return [
-                    jsxRuntime.jsx(MapGL.Layer, { id: layer.name, type: "fill", "source-layer": "default", beforeId: beforeId, layout: {
-                            ...getLayerTempStyle?.(layer.name, "fill")?.layout,
-                            visibility: visible &&
-                                getLayerTempStyle?.(layer.name, "fill-extrusion")?.settings?.fill?.showBottomSurface !== false &&
-                                Boolean(getActualExtrusionHeight({
-                                    ...DEFAULT_FILL_EXTRUSION_PAINT,
-                                    ...getLayerTempStyle?.(layer.name, "fill-extrusion")?.paint,
-                                }))
-                                ? "visible"
-                                : "none",
-                        }, paint: {
-                            ...DEFAULT_FILL_PAINT,
-                            ...getLayerTempStyle?.(layer.name, "fill")?.paint,
-                        } }, `polygon-layer-${layer.name}`),
-                    jsxRuntime.jsx(MapGL.Layer, { id: `${layer.name}-stroke`, type: "line", "source-layer": "default", beforeId: beforeId, layout: {
-                            ...getLayerTempStyle?.(layer.name, "line")?.layout,
-                            visibility: visible &&
-                                getLayerTempStyle?.(layer.name, "fill-extrusion")?.settings?.fill?.showBottomSurface !== false &&
-                                Boolean(getActualExtrusionHeight({
-                                    ...DEFAULT_FILL_EXTRUSION_PAINT,
-                                    ...getLayerTempStyle?.(layer.name, "fill-extrusion")?.paint,
-                                }))
-                                ? "visible"
-                                : "none",
-                        }, paint: {
-                            ...DEFAULT_LINE_PAINT,
-                            ...getLayerTempStyle?.(layer.name, "line")?.paint,
-                        } }, `polygon-stroke-layer-${layer.name}`),
-                    jsxRuntime.jsx(MapGL.Layer, { id: `${layer.name}-extrusion`, type: "fill-extrusion", "source-layer": "default", beforeId: beforeId, minzoom: 0, maxzoom: 23, layout: {
-                            ...getLayerTempStyle?.(layer.name, "fill-extrusion")?.layout,
-                            visibility,
-                        }, paint: {
-                            ...DEFAULT_FILL_EXTRUSION_PAINT,
-                            ...getLayerTempStyle?.(layer.name, "fill-extrusion")?.paint,
-                        } }, `polygon-extrusion-layer-${layer.name}`),
-                ];
-            case api.OgcGeometryType.LineString:
-            case api.OgcGeometryType.MultiLineString:
-                return (jsxRuntime.jsx(MapGL.Layer, { id: layer.name, type: "line", "source-layer": "default", beforeId: beforeId, layout: {
-                        ...getLayerTempStyle?.(layer.name, "line")?.layout,
-                        visibility,
-                    }, paint: {
-                        ...DEFAULT_LINE_PAINT,
-                        ...getLayerTempStyle?.(layer.name, "line")?.paint,
-                    } }));
-            default:
-                return null;
-        }
-    }, [
-        geometryType,
-        layer,
-        beforeId,
-        visible,
-        getLayerTempStyle,
-    ]);
     const renderClientStyle = React.useCallback(() => {
-        return clientStyle.items.map((mockItem, index) => {
-            const [prefix, suffix] = getClientStyleItemPrefixSuffix(geometryType, mockItem.type);
-            const isExtrusionItem = mockItem.type === "fill-extrusion";
-            const isPolygonPart = clientStyle.items.some(item => item.type === "fill-extrusion") &&
-                (mockItem.type === "fill" || mockItem.type === "line");
-            const fillExtrusionPaint = isPolygonPart || isExtrusionItem
-                ? {
-                    ...clientStyle.items?.find(item => item.type === "fill-extrusion")?.paint,
-                    ...getLayerTempStyle?.(layer.name, "fill-extrusion")?.paint,
-                }
-                : undefined;
-            const currentSettings = {
-                ...clientStyle?.settings,
-                ...getLayerTempStyle?.(layer.name, mockItem.type)?.settings,
-            };
-            const processedExtrusionHeight = getActualExtrusionHeight(fillExtrusionPaint);
-            const hasExtrusion = Boolean(processedExtrusionHeight);
-            const visibility = visible &&
-                ((isExtrusionItem && hasExtrusion) ||
-                    (!isPolygonPart && !isExtrusionItem) ||
-                    (isPolygonPart && (!hasExtrusion || (currentSettings?.fill?.showBottomSurface ?? true))))
-                ? "visible"
-                : "none";
-            return (jsxRuntime.jsx(MapGL.Layer, { id: `${layer.name}${suffix}`, type: mockItem.type, "source-layer": "default", beforeId: beforeId, ...(mockItem.filter && { filter: mockItem.filter }), minzoom: mockItem.minzoom ?? clientStyle?.minzoom ?? 0, maxzoom: mockItem.maxzoom ?? clientStyle?.maxzoom ?? 23, layout: {
+        const items = [...(getLayerTempStyle(layer.name)?.items ?? clientStyle?.items ?? [])];
+        let currentBeforeId = beforeId;
+        return items.map((mockItem, mockItemIndex) => {
+            const visibility = visible ? "visible" : "none";
+            if (mockItemIndex > 0) {
+                currentBeforeId = `${layer.name}-${items[mockItemIndex - 1].id}`;
+            }
+            return (jsxRuntime.jsx(MapGL.Layer, { id: `${layer.name}-${mockItem.id}`, type: mockItem.type, "source-layer": "default", beforeId: currentBeforeId, ...(mockItem.filter && { filter: mockItem.filter }), minzoom: mockItem.minzoom ?? clientStyle?.minzoom ?? 0, maxzoom: mockItem.maxzoom ?? clientStyle?.maxzoom ?? 23, layout: {
                     ...mockItem.layout,
-                    ...getLayerTempStyle?.(layer.name, mockItem.type)?.layout,
+                    ...getLayerTempStyle(layer.name)?.items?.find(item => item.id === mockItem.id)?.layout,
                     visibility,
                 }, paint: {
                     ...mockItem.paint,
-                    ...getLayerTempStyle?.(layer.name, mockItem.type)?.paint,
-                } }, `${prefix}${layer.name}-${index}`));
+                    ...getLayerTempStyle(layer.name)?.items?.find(item => item.id === mockItem.id)?.paint,
+                } }, `${layer.name}-${mockItem.id}`));
         });
-    }, [
-        beforeId,
-        clientStyle,
-        geometryType,
-        layer.name,
-        visible,
-        getLayerTempStyle,
-    ]);
+    }, [beforeId, clientStyle, layer.name, visible, getLayerTempStyle]);
     if (!layer) {
         return null;
     }
-    return (jsxRuntime.jsx(MapGL.Source, { promoteId: idAttribute, id: layer.name, type: "vector", tiles: tiles, children: clientStyle?.items ? renderClientStyle() : renderLayerByGeometryType() }, `${layer.name}-${tileUrl}`));
+    return (jsxRuntime.jsx(MapGL.Source, { promoteId: idAttribute, id: layer.name, type: "vector", tiles: tiles, children: renderClientStyle() }, `${layer.name}-${tileUrl}`));
 };
 
 const Layer = ({ layer, layerType, visible, beforeId, tileUrl, getLayerTempStyle, onMount = () => { }, }) => {
@@ -15234,6 +15266,7 @@ exports.SmallPreviewLeft = SmallPreviewLeft;
 exports.SmallPreviewRight = SmallPreviewRight;
 exports.StackBar = StackBar;
 exports.SvgImage = SvgImage;
+exports.TILE_ALIGNMENTS = TILE_ALIGNMENTS;
 exports.TIME_ZONE_FORMAT = TIME_ZONE_FORMAT;
 exports.TabsContainer = TabsContainer;
 exports.TextTrim = TextTrim;
@@ -15309,6 +15342,7 @@ exports.getFilterSelectedItems = getFilterSelectedItems;
 exports.getFilterValue = getFilterValue;
 exports.getFormattedAttributes = getFormattedAttributes;
 exports.getGradientColors = getGradientColors;
+exports.getLayerClientStyle = getLayerClientStyle;
 exports.getLayerInfo = getLayerInfo;
 exports.getLayerInfoAttribute = getLayerInfoAttribute;
 exports.getLayerInfoFromDataSources = getLayerInfoFromDataSources;
@@ -15381,6 +15415,7 @@ exports.useDataSources = useDataSources;
 exports.useDebouncedCallback = useDebouncedCallback;
 exports.useDiffPage = useDiffPage;
 exports.useEditGroupAttributes = useEditGroupAttributes;
+exports.useEqualTileWidth = useEqualTileWidth;
 exports.useExpandableContainers = useExpandableContainers;
 exports.useExportPdf = useExportPdf;
 exports.useFeatureSaveHooks = useFeatureSaveHooks;