@evergis/react 4.0.143 → 4.0.145

package/dist/index.js

@@ -8170,6 +8170,47 @@ const useProjectDashboardInit = () => {
     }, [projectInfo, updateProject]);
 };
 
+/**
+ * Перетаскивание границы: подписка на ручку, снимок на старте, предпросмотр на движении,
+ * запись результата на отпускании.
+ *
+ * Общий для сетки дашборда и колонок таблицы. Различаются они только тем, что именно меряют и
+ * куда пишут; сам жест обязан ощущаться одинаково — включая то, что мышь ведут по документу, а
+ * не по самой ручке, и отпускание за пределами окна тоже завершает жест.
+ */
+const useResizeDrag = ({ onStart, onMove, onEnd }) => {
+    const [handle, setHandle] = React.useState(null);
+    const [dragging, setDragging] = React.useState(false);
+    const stateRef = React.useRef(null);
+    const mouseDown = React.useCallback((event) => {
+        const state = onStart(event);
+        if (state === null) {
+            return;
+        }
+        // Гасим выделение текста: жест ведут мышью по документу, и без этого он выделял бы всё,
+        // над чем проходит курсор.
+        event.preventDefault();
+        stateRef.current = state;
+        setDragging(true);
+    }, [onStart]);
+    const mouseMove = React.useCallback((event) => {
+        if (stateRef.current !== null) {
+            onMove(stateRef.current, event);
+        }
+    }, [onMove]);
+    const mouseUp = React.useCallback((event) => {
+        const state = stateRef.current;
+        if (state === null) {
+            return;
+        }
+        stateRef.current = null;
+        setDragging(false);
+        onEnd(state, event);
+    }, [onEnd]);
+    uilibGl.useDragAndDropEffect(handle, { mouseDown, mouseMove, mouseUp });
+    return { setHandle, dragging };
+};
+
 const useRelatedDataSourceAttributes = ({ type = exports.WidgetType.Dashboard, elementConfig, dataSources, feature, }) => {
     const { layerInfos } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
@@ -9604,6 +9645,92 @@ const FiltersContainer = React.memo(({ elementConfig, config, type, renderElemen
     return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), 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 })] }));
 });
 
+/**
+ * Заход зоны захвата на содержимое с каждой стороны границы, px.
+ *
+ * Без него попасть курсором ровно в границу невозможно: у таблицы её толщина — один пиксель,
+ * а у сетки зазора может не быть вовсе. Ручка абсолютная и в раскладке не участвует, поэтому
+ * расширение ничего не сдвигает.
+ */
+const HANDLE_BLEED_PX = 3;
+/**
+ * Маркер ручки: нажатие на ней тянет границу, а не ячейку сетки.
+ *
+ * Ставит его сам компонент. Ручка колонки таблицы, оказавшейся внутри ячейки сетки, обязана
+ * помечаться так же — иначе нажатие на ней начинало бы перетаскивание всей ячейки.
+ */
+const RESIZE_HANDLE_ATTR = "data-grid-handle";
+
+/**
+ * Зона захвата = зазор плюс небольшой заход на содержимое с обеих сторон.
+ *
+ * Смещение уводит дальний край ручки за зазор ровно на `HANDLE_BLEED_PX`, поэтому вместе с
+ * шириной она оказывается симметрично «надета» на границу: от `-bleed` до `gap + bleed`.
+ */
+const handleSize = `calc(var(--grid-gap, 0px) + ${HANDLE_BLEED_PX * 2}px)`;
+const handleOffset = `calc(-1 * (var(--grid-gap, 0px) + ${HANDLE_BLEED_PX}px))`;
+/**
+ * Ручка перетаскивания границы. Общая для сетки дашборда и колонок таблицы: жест один и тот же,
+ * и выглядеть он обязан одинаково.
+ *
+ * Абсолютная и целиком лежит в зазоре, поэтому включение режима редактирования не сдвигает
+ * раскладку ни на пиксель. Сам ползунок (`::after`) появляется только при наведении и во время
+ * перетаскивания — в покое раскладка выглядит как обычно.
+ *
+ * Ширину зазора берёт из переменной: у сетки её объявляет тело сетки, у таблицы зазора нет вовсе,
+ * и зона захвата сжимается до одного захода на содержимое с каждой стороны.
+ */
+const ResizeHandle = styled.div.attrs({ [RESIZE_HANDLE_ATTR]: true }).withConfig({ displayName: "ResizeHandle", componentId: "sc-1n6ja5b" }) `
+  position: absolute;
+  z-index: 3;
+  touch-action: none;
+
+  ::after {
+    content: "";
+    position: absolute;
+    border-radius: 0.0625rem;
+    background: transparent;
+    transition: background-color 120ms ease;
+  }
+
+  :hover::after,
+  &[data-dragging="true"]::after {
+    background: ${({ theme: { palette } }) => palette.primary};
+  }
+
+  ${({ $axis }) => $axis === "column"
+    ? styled.css `
+          top: 0;
+          bottom: 0;
+          right: ${handleOffset};
+          width: ${handleSize};
+          cursor: col-resize;
+
+          ::after {
+            top: 20%;
+            bottom: 20%;
+            left: 50%;
+            width: 0.125rem;
+            transform: translateX(-50%);
+          }
+        `
+    : styled.css `
+          left: 0;
+          right: 0;
+          bottom: ${handleOffset};
+          height: ${handleSize};
+          cursor: row-resize;
+
+          ::after {
+            left: 20%;
+            right: 20%;
+            top: 50%;
+            height: 0.125rem;
+            transform: translateY(-50%);
+          }
+        `};
+`;
+
 /** Размер, при котором контейнер занимает всю ячейку родителя. */
 const FILL_SIZE = "100%";
 /** Собственные горизонтальные дефолты обёртки, мешающие контейнеру занять всю ширину ячейки. */
@@ -9683,6 +9810,7 @@ const getWrapperSizeStyle = ({ style, width: widthOption, height: heightOption,
     };
 };
 
+// Прямой импорт листового модуля, а не барреля components: тот тянет за собой контейнеры.
 /**
  * Минимальный размер трека, px. Ниже него ресайз не пускает — иначе ячейку не за что схватить.
  *
@@ -9718,14 +9846,6 @@ const GRID_AUTO_FILL_DEFAULTS = { ...CONTAINERS_GROUP_DEFAULTS, minHeight: FILL_
  * раскладки, поэтому задаётся явно через `options.gap`, а не навязывается всем сеткам.
  */
 const DEFAULT_GRID_GAP = 0;
-/**
- * Насколько ручка ресайза заходит на содержимое с каждой стороны, px.
- *
- * По умолчанию зазора нет вовсе, так что попасть курсором ровно в границу невозможно — зона
- * захвата всегда шире зазора на эту величину с каждой стороны. Ручка абсолютная и в раскладке
- * не участвует, поэтому расширение ничего не сдвигает.
- */
-const HANDLE_BLEED_PX = 3;
 /**
  * Сдвиг курсора, после которого нажатие на ячейке считается перетаскиванием, px.
  *
@@ -9735,17 +9855,13 @@ const HANDLE_BLEED_PX = 3;
 const DRAG_THRESHOLD_PX = 4;
 /** Маркер ячейки в DOM: по нему ищется цель перетаскивания под курсором. */
 const GRID_CELL_ATTR = "data-grid-cell";
-/** Маркер ручки ресайза: нажатие на ней тянет границу, а не ячейку. */
-const GRID_HANDLE_ATTR = "data-grid-handle";
-/** Тот же маркер пропсами: имя атрибута вычисляемое, а в JSX такое подставляется только спредом. */
-const GRID_HANDLE_PROPS = { [GRID_HANDLE_ATTR]: true };
 /**
  * Нажатия, которые перетаскиванием ячейки не считаются.
  *
  * Ручка тянет границу трека, а поля ввода живут своей жизнью: там нажатие ставит каретку и
  * выделяет текст, и подменять это перестановкой ячеек нельзя.
  */
-const NO_CELL_DRAG_SELECTOR = `[${GRID_HANDLE_ATTR}], input, textarea, select, [contenteditable="true"]`;
+const NO_CELL_DRAG_SELECTOR = `[${RESIZE_HANDLE_ATTR}], input, textarea, select, [contenteditable="true"]`;
 /**
  * Разметка идущего жеста: ячейка-источник, цель под курсором и сам факт перетаскивания.
  *
@@ -9766,72 +9882,6 @@ const FR_PRECISION = 1000;
 const GRID_ROW_ID_PREFIX = "gridRow_";
 const GRID_CELL_ID_PREFIX = "gridCell_";
 
-/**
- * Зона захвата = зазор плюс небольшой заход на содержимое с обеих сторон.
- *
- * Смещение уводит дальний край ручки за зазор ровно на `HANDLE_BLEED_PX`, поэтому вместе с
- * шириной она оказывается симметрично «надета» на границу: от `-bleed` до `gap + bleed`.
- */
-const handleSize = `calc(var(--grid-gap, 0px) + ${HANDLE_BLEED_PX * 2}px)`;
-const handleOffset = `calc(-1 * (var(--grid-gap, 0px) + ${HANDLE_BLEED_PX}px))`;
-/**
- * Ручка перетаскивания границы треков.
- *
- * Абсолютная и целиком лежит в зазоре, поэтому включение режима редактирования не сдвигает
- * раскладку ни на пиксель. Сам ползунок (`::after`) появляется только при наведении и во время
- * перетаскивания — в покое сетка выглядит как обычно.
- */
-const ResizeHandle = styled.div.withConfig({ displayName: "ResizeHandle", componentId: "sc-1dtcak4" }) `
-  position: absolute;
-  z-index: 3;
-  touch-action: none;
-
-  ::after {
-    content: "";
-    position: absolute;
-    border-radius: 0.0625rem;
-    background: transparent;
-    transition: background-color 120ms ease;
-  }
-
-  :hover::after,
-  &[data-dragging="true"]::after {
-    background: ${({ theme: { palette } }) => palette.primary};
-  }
-
-  ${({ $axis }) => $axis === "column"
-    ? styled.css `
-          top: 0;
-          bottom: 0;
-          right: ${handleOffset};
-          width: ${handleSize};
-          cursor: col-resize;
-
-          ::after {
-            top: 20%;
-            bottom: 20%;
-            left: 50%;
-            width: 0.125rem;
-            transform: translateX(-50%);
-          }
-        `
-    : styled.css `
-          left: 0;
-          right: 0;
-          bottom: ${handleOffset};
-          height: ${handleSize};
-          cursor: row-resize;
-
-          ::after {
-            left: 20%;
-            right: 20%;
-            top: 50%;
-            height: 0.125rem;
-            transform: translateY(-50%);
-          }
-        `};
-`;
-
 const getTemplateProperty = (axis) => axis === "row" ? "gridTemplateRows" : "gridTemplateColumns";
 /**
  * Пиксельные размеры треков отрисованной сетки.
@@ -9919,29 +9969,24 @@ const toShares = (pixels, total) => {
  * снова раздувалась содержимым.
  */
 const useGridHeightResize = ({ sizes, autoHeight, getGrid, onCommit, }) => {
-    const [handle, setHandle] = React.useState(null);
-    const [dragging, setDragging] = React.useState(false);
-    const dragRef = React.useRef(null);
     const sizesRef = React.useRef(sizes);
     sizesRef.current = sizes;
     /** Свойство корня, которым жест двигает нижнюю границу: жёсткая высота либо её минимум. */
     const heightProperty = autoHeight ? "minHeight" : "height";
-    const mouseDown = React.useCallback((event) => {
+    const onStart = React.useCallback((event) => {
         const grid = getGrid();
         const root = grid?.parentElement;
         if (!grid || !root)
-            return;
+            return null;
         const pixels = readTrackPixels(grid, "row");
         if (!pixels?.length || pixels.length !== sizesRef.current.length)
-            return;
-        event.preventDefault();
-        dragRef.current = {
+            return null;
+        return {
             start: event.clientY,
             pixels,
             root,
             rootHeight: root.getBoundingClientRect().height,
         };
-        setDragging(true);
     }, [getGrid]);
     /** Пиксели треков после сдвига: меняется только последний, минимум — текущий, если он уже мал. */
     const getNextPixels = React.useCallback((state, event) => {
@@ -9949,22 +9994,16 @@ const useGridHeightResize = ({ sizes, autoHeight, getGrid, onCommit, }) => {
         const min = Math.min(MIN_TRACK_PX, last);
         return [...state.pixels.slice(0, -1), Math.max(last + event.clientY - state.start, min)];
     }, []);
-    const mouseMove = React.useCallback((event) => {
-        const state = dragRef.current;
+    const onMove = React.useCallback((state, event) => {
         const grid = getGrid();
-        if (!state || !grid)
+        if (!grid)
             return;
         const pixels = getNextPixels(state, event);
         const delta = pixels[pixels.length - 1] - state.pixels[state.pixels.length - 1];
         state.root.style[heightProperty] = `${state.rootHeight + delta}px`;
         grid.style[getTemplateProperty("row")] = buildTrackTemplate(pixels.map(size => `${size}px`), autoHeight);
     }, [autoHeight, getGrid, getNextPixels, heightProperty]);
-    const mouseUp = React.useCallback((event) => {
-        const state = dragRef.current;
-        if (!state)
-            return;
-        dragRef.current = null;
-        setDragging(false);
+    const onEnd = React.useCallback((state, event) => {
         const grid = getGrid();
         if (grid)
             grid.style[getTemplateProperty("row")] = "";
@@ -9976,8 +10015,7 @@ const useGridHeightResize = ({ sizes, autoHeight, getGrid, onCommit, }) => {
         const total = sizesRef.current.reduce((value, size) => value + size, 0);
         onCommit(`${Math.round(state.rootHeight + delta)}px`, toShares(pixels, total));
     }, [getGrid, getNextPixels, heightProperty, onCommit]);
-    uilibGl.useDragAndDropEffect(handle, { mouseDown, mouseMove, mouseUp });
-    return { setHandle, dragging };
+    return useResizeDrag({ onStart, onMove, onEnd });
 };
 
 /**
@@ -9990,7 +10028,7 @@ const GridHeightResizer = React.memo(({ sizes, autoHeight, getGrid, onCommit })
     // Ручка лежит внутри трека: без остановки всплытия перетаскивание границы заканчивалось бы
     // кликом по ячейке, то есть меняло бы выделение.
     const stopPropagation = React.useCallback((event) => event.stopPropagation(), []);
-    return (jsxRuntime.jsx(ResizeHandle, { ...GRID_HANDLE_PROPS, ref: setHandle, "$axis": "row", "data-dragging": dragging, onClick: stopPropagation }));
+    return (jsxRuntime.jsx(ResizeHandle, { ref: setHandle, "$axis": "row", "data-dragging": dragging, onClick: stopPropagation }));
 });
 
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
@@ -10011,31 +10049,26 @@ const buildPreviewTemplate = (pixels, index, first, second) => buildTrackTemplat
 /**
  * Перетаскивание границы между двумя соседними треками.
  *
- * Во время жеста раскладка меняется ИНЛАЙН-стилем на самом гриде, без обновления состояния:
- * каждый `mousemove` иначе перерисовывал бы всё поддерево сетки. В конфиг доли уходят один раз,
- * на отпускание мыши.
+ * Сам жест — общий {@link useResizeDrag}: он же двигает и границы колонок таблицы, поэтому
+ * ощущаются они одинаково. Здесь остаётся только грид-специфичное: во время жеста раскладка
+ * меняется ИНЛАЙН-стилем на самом гриде, а в конфиг доли уходят один раз, на отпускание мыши.
  *
- * Пиксельный снимок треков берётся однократно на `mousedown` — если пересчитывать его на каждом
+ * Пиксельный снимок треков берётся однократно на нажатии — если пересчитывать его на каждом
  * шаге уже после применения новых долей, округление `fr → px → fr` даёт дрейф границы.
  */
 const useGridResize = ({ axis, index, sizes, getGrid, onCommit }) => {
-    const [handle, setHandle] = React.useState(null);
-    const [dragging, setDragging] = React.useState(false);
-    const dragRef = React.useRef(null);
     const sizesRef = React.useRef(sizes);
     sizesRef.current = sizes;
     const isRow = axis === "row";
     const getPosition = React.useCallback((event) => (isRow ? event.clientY : event.clientX), [isRow]);
-    const mouseDown = React.useCallback((event) => {
+    const onStart = React.useCallback((event) => {
         const grid = getGrid();
         if (!grid)
-            return;
+            return null;
         const pixels = readTrackPixels(grid, axis);
         if (!pixels || index + 1 >= pixels.length)
-            return;
-        event.preventDefault();
-        dragRef.current = { start: getPosition(event), pixels };
-        setDragging(true);
+            return null;
+        return { start: getPosition(event), pixels };
     }, [axis, getGrid, getPosition, index]);
     /** Новый пиксельный размер первого трека пары с учётом минимального размера обоих. */
     const getNextFirstSize = React.useCallback((state, event) => {
@@ -10046,10 +10079,9 @@ const useGridResize = ({ axis, index, sizes, getGrid, onCommit }) => {
         const min = getMinTrackSize(total);
         return clamp(first + getPosition(event) - state.start, min, total - min);
     }, [getPosition, index]);
-    const mouseMove = React.useCallback((event) => {
-        const state = dragRef.current;
+    const onMove = React.useCallback((state, event) => {
         const grid = getGrid();
-        if (!state || !grid)
+        if (!grid)
             return;
         const first = getNextFirstSize(state, event);
         if (first === null)
@@ -10057,12 +10089,7 @@ const useGridResize = ({ axis, index, sizes, getGrid, onCommit }) => {
         const total = state.pixels[index] + state.pixels[index + 1];
         grid.style[getTemplateProperty(axis)] = buildPreviewTemplate(state.pixels, index, first, total - first);
     }, [axis, getGrid, getNextFirstSize, index]);
-    const mouseUp = React.useCallback((event) => {
-        const state = dragRef.current;
-        if (!state)
-            return;
-        dragRef.current = null;
-        setDragging(false);
+    const onEnd = React.useCallback((state, event) => {
         const grid = getGrid();
         if (grid)
             grid.style[getTemplateProperty(axis)] = "";
@@ -10077,8 +10104,7 @@ const useGridResize = ({ axis, index, sizes, getGrid, onCommit }) => {
             return;
         onCommit(index, [nextFirst, roundFr(share - nextFirst)]);
     }, [axis, getGrid, getNextFirstSize, index, onCommit]);
-    uilibGl.useDragAndDropEffect(handle, { mouseDown, mouseMove, mouseUp });
-    return { setHandle, dragging };
+    return useResizeDrag({ onStart, onMove, onEnd });
 };
 
 const GridResizer = React.memo(({ axis, index, sizes, getGrid, onCommit }) => {
@@ -10086,7 +10112,7 @@ const GridResizer = React.memo(({ axis, index, sizes, getGrid, onCommit }) => {
     // Ручка лежит внутри трека, и без этого перетаскивание границы заканчивалось бы кликом
     // по ячейке — то есть меняло бы выделение.
     const stopPropagation = React.useCallback((event) => event.stopPropagation(), []);
-    return (jsxRuntime.jsx(ResizeHandle, { ...GRID_HANDLE_PROPS, ref: setHandle, "$axis": axis, "data-dragging": dragging, onClick: stopPropagation }));
+    return (jsxRuntime.jsx(ResizeHandle, { ref: setHandle, "$axis": axis, "data-dragging": dragging, onClick: stopPropagation }));
 });
 
 /**
@@ -11407,10 +11433,17 @@ const toSchemaAttribute = (params) => {
         attributeName,
         // Тип принадлежит источнику: конфиг задаёт его только там, где источника нет.
         type: source?.type ?? description?.type ?? DEFAULT_ATTRIBUTE_TYPE,
+        // Уточнение типа — целиком за конфигом: у атрибута источника поля `subType` нет.
+        subType: description?.subType,
         alias: description?.alias ?? source?.alias ?? attributeName,
         description: description?.description ?? source?.description,
         isEditable: resolveIsEditable(params),
         stringFormat: resolveStringFormat(description, source),
+        // Раскладка колонки живёт только в конфиге контейнера: источник о ширине таблицы не знает.
+        width: description?.width,
+        resizable: description?.resizable,
+        multiline: description?.multiline,
+        style: description?.style,
     };
 };
 /**
@@ -15441,6 +15474,8 @@ const TIME_FORMAT = /hh:mm/;
  * закрытие редактора по клику снаружи обязано этот контейнер пропускать.
  */
 const PORTAL_ROOT_SELECTOR = "#portal-root";
+/** Ниже этой ширины колонку не ужать мышью: уже неё в ячейке не остаётся места под значение. */
+const MIN_COLUMN_WIDTH = 48;
 
 /**
  * Собственный бокс таблицы. Без размеров в `options` представления узел ничего не меняет:
@@ -15497,10 +15532,13 @@ const TableHead = styled.thead.withConfig({ displayName: "TableHead", componentI
   z-index: 1;
 `;
 const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-1m6xil2" }) `
+  /* Относительное позиционирование держит захват границы колонки. */
+  position: relative;
   padding: 0.375rem 0.5rem;
   text-align: left;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
   color: ${({ theme }) => theme.palette.textSecondary};
   /* Рамка принадлежит ячейке (рамки раздельные), поэтому едет вместе с липкой шапкой. */
   border-bottom: 1px solid ${({ theme }) => theme.palette.elementDeep};
@@ -15511,10 +15549,17 @@ const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", compo
       user-select: none;
     `}
 `;
+/**
+ * Содержимое заголовка. Псевдоним обрезается многоточием, значок сортировки не сжимается:
+ * у колонки с заданной шириной длинный псевдоним иначе выдавил бы значок за край ячейки.
+ */
 const TableHeadContent = styled.span.withConfig({ displayName: "TableHeadContent", componentId: "sc-8hzcop" }) `
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 0.25rem;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 /**
  * Место под значок сортировки. Занято всегда, пока сортировка включена, а сам значок только
@@ -15554,13 +15599,31 @@ const TableActionsCell = styled(TableCellWrapper).withConfig({ displayName: "Tab
   width: 2rem;
   text-align: right;
 `;
+/**
+ * Как значение ведёт себя, когда не помещается в колонку: режется многоточием в одну строку
+ * или переносится по словам, растягивая строку таблицы вниз (`multiline` атрибута).
+ *
+ * Перенос разрешаем и посреди слова: колонка бывает уже одного длинного слова (ссылка, артикул),
+ * и без этого оно вылезло бы за заданную ширину, сделав её бессмысленной.
+ */
+const cellWrapMixin = styled.css `
+  ${({ $multiline }) => $multiline
+    ? styled.css `
+          white-space: normal;
+          overflow-wrap: anywhere;
+        `
+    : styled.css `
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        `}
+`;
 const CellText = styled.div.withConfig({ displayName: "CellText", componentId: "sc-ok630s" }) `
   padding: 0.375rem 0.25rem;
   /* Та же высота строки, что у редактора — иначе строка подпрыгивала бы по вертикали. */
   line-height: 1.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+  ${cellWrapMixin};
 `;
 /**
  * Редактируемая ячейка вне фокуса. Показывает значение по `stringFormat`, а редактор
@@ -15580,9 +15643,8 @@ const CellButton = styled.button.withConfig({ displayName: "CellButton", compone
   color: inherit;
   text-align: left;
   cursor: text;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+  ${cellWrapMixin};
 
   :hover {
     border-color: ${({ theme }) => theme.palette.elementDeep};
@@ -15607,8 +15669,9 @@ const CellGhost = styled.span.withConfig({ displayName: "CellGhost", componentId
   /* Рамка повторяет CellButton — с ней высота ячейки в правке совпадает с высотой на чтении. */
   border: 1px solid transparent;
   line-height: 1.25rem;
-  white-space: nowrap;
   visibility: hidden;
+
+  ${cellWrapMixin};
 `;
 const CellField = styled.div.withConfig({ displayName: "CellField", componentId: "sc-1ww3875" }) `
   position: absolute;
@@ -15625,11 +15688,97 @@ const CellField = styled.div.withConfig({ displayName: "CellField", componentId:
     min-width: 0;
   }
 `;
-const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-1vamijg" }) `
+/**
+ * Ячейка со вложениями. Список идёт колонкой, кнопка добавления — под ним, поэтому строка растёт
+ * ровно на столько, сколько файлов в ней лежит.
+ *
+ * Отступы те же, что у текстовой ячейки (`CellText`): в одном ряду с обычными колонками значения
+ * обязаны стоять на одной линии.
+ */
+const AttachmentsCellBox = styled.div.withConfig({ displayName: "AttachmentsCellBox", componentId: "sc-1ayq7sq" }) `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+  padding: 0.375rem 0.25rem;
+`;
+const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-dmdhrv" }) `
   padding: 0.75rem 0.25rem;
   color: ${({ theme }) => theme.palette.textSecondary};
 `;
 
+/**
+ * Ячейка с вложениями: разбор значения, просмотр, скачивание и правка списка.
+ *
+ * Значение атрибута — строка: файлы приезжают в ней списком JSON, поэтому и обратно в черновик
+ * кладём строку, а не массив — иначе тип ячейки менялся бы от самой правки.
+ *
+ * Добавление здесь только по ссылке. Загрузка с диска требует ресурса-родителя и файлового
+ * api контейнера вложений, а у колонки таблицы ни того, ни другого нет.
+ */
+const useAttachmentsCell = ({ attribute, row, canEdit, onChange }) => {
+    const [previewIndex, setPreviewIndex] = React.useState(null);
+    const [isLinkDialogOpen, setLinkDialogOpen] = React.useState(false);
+    const { attributeName, isEditable } = attribute;
+    const value = row.properties[attributeName];
+    const items = React.useMemo(() => parseAttachments(value), [value]);
+    const previewImages = useAttachmentPreviewImages({ items, active: previewIndex !== null });
+    const downloadByIndex = useAttachmentDownload(items);
+    // Те же два условия, что и у обычной ячейки: режим таблицы и разрешение самого атрибута.
+    const editable = canEdit && isEditable;
+    const persist = React.useCallback((next) => onChange(row.key, attributeName, JSON.stringify(next)), [attributeName, onChange, row.key]);
+    const onPreview = React.useCallback((link) => {
+        const index = items.findIndex(item => item.link === link);
+        if (index >= 0) {
+            setPreviewIndex(index);
+        }
+    }, [items]);
+    const onClosePreview = React.useCallback(() => setPreviewIndex(null), []);
+    const onDownload = React.useCallback((_image, index) => downloadByIndex(index), [downloadByIndex]);
+    const onDelete = React.useCallback((link) => persist(items.filter(item => item.link !== link)), [items, persist]);
+    const onOpenLinkDialog = React.useCallback(() => setLinkDialogOpen(true), []);
+    const onCloseLinkDialog = React.useCallback(() => setLinkDialogOpen(false), []);
+    const onAddByLink = React.useCallback((url) => persist([
+        ...items,
+        {
+            link: url,
+            name: getFileNameFromUrl(url),
+            mimeType: getMimeTypeFromUrl(url),
+            date: new Date().toISOString(),
+            isExternal: true,
+        },
+    ]), [items, persist]);
+    return {
+        items,
+        editable,
+        previewIndex,
+        previewImages,
+        isLinkDialogOpen,
+        onPreview,
+        onClosePreview,
+        onDownload,
+        onDelete,
+        onOpenLinkDialog,
+        onCloseLinkDialog,
+        onAddByLink,
+    };
+};
+
+/**
+ * Колонка со вложениями: список файлов прямо в ячейке.
+ *
+ * Тип у атрибута строковый, вложениями его делает `subType: "Attachments"` в схеме контейнера —
+ * поэтому ветка стоит раньше разбора типа и обычных редакторов ячейки.
+ */
+const AttachmentsCell = React.memo(({ attribute, row, canEdit, onChange }) => {
+    const { t } = useGlobalContext();
+    const { items, editable, previewIndex, previewImages, isLinkDialogOpen, onPreview, onClosePreview, onDownload, onDelete, onOpenLinkDialog, onCloseLinkDialog, onAddByLink, } = useAttachmentsCell({ attribute, row, canEdit, onChange });
+    return (jsxRuntime.jsxs(AttachmentsCellBox, { children: [!items.length && !editable && jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }), jsxRuntime.jsx(AttachmentsList, { items: items, isEdit: editable, onPreview: onPreview, onDelete: onDelete }), editable && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "link", tabIndex: 0, title: t("attachments.fromLink", { ns: "common", defaultValue: "По ссылке" }), onClick: onOpenLinkDialog })), jsxRuntime.jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: onCloseLinkDialog, onSubmit: onAddByLink }), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: true, onClose: onClosePreview, onDownload: onDownload, errorTitleText: t("attachments.resourceUnavailable", {
+                    ns: "common",
+                    defaultValue: "Ресурс недоступен",
+                }) }, previewIndex))] }));
+});
+
 /**
  * Значение ячейки не изменилось.
  *
@@ -15728,7 +15877,7 @@ const useCellEditing = () => {
 const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     const { t, language } = useGlobalContext();
     const { editing, buttonProps, editorProps } = useCellEditing();
-    const { attributeName, type, isEditable, stringFormat } = attribute;
+    const { attributeName, type, subType, isEditable, stringFormat, multiline } = attribute;
     const value = row.properties[attributeName];
     const handleChange = React.useCallback((next) => {
         // Пустые правки отбрасываем: иначе строка становилась бы «изменённой» от простого
@@ -15747,16 +15896,21 @@ const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     const withTime = React.useMemo(() => TIME_FORMAT.test(stringFormat?.format ?? ""), [stringFormat?.format]);
     // `canEdit` — режим таблицы, `isEditable` — разрешение конкретного атрибута: правка требует обоих.
     const editable = canEdit && isEditable && EDITABLE_ATTRIBUTE_TYPES.includes(type);
+    // Вложения — это строка с JSON, а не текст: разбирать и рисовать её нужно раньше любых
+    // редакторов по типу, иначе в ячейке оказался бы сырой список файлов.
+    if (subType === api.StringSubType.Attachments) {
+        return jsxRuntime.jsx(AttachmentsCell, { attribute: attribute, row: row, canEdit: canEdit, onChange: onChange });
+    }
     // Логическое значение и на чтение показываем галкой, а не словами «true»/«false» —
     // так же, как остальной дашборд рисует булевы атрибуты.
     if (type === api.AttributeType.Boolean) {
         return jsxRuntime.jsx(uilibGl.Checkbox, { checked: !!value, disabled: !editable, onChange: () => handleChange(!value) });
     }
     if (!editable) {
-        return jsxRuntime.jsx(CellText, { title: formatted, children: formatted || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) });
+        return (jsxRuntime.jsx(CellText, { "$multiline": multiline, title: formatted, children: formatted || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) }));
     }
     if (!editing) {
-        return (jsxRuntime.jsx(CellButton, { type: "button", ...buttonProps, children: formatted || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) }));
+        return (jsxRuntime.jsx(CellButton, { type: "button", "$multiline": multiline, ...buttonProps, children: formatted || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) }));
     }
     const renderEditor = () => {
         if (type === api.AttributeType.DateTime) {
@@ -15767,9 +15921,105 @@ const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
         }
         return (jsxRuntime.jsx(uilibGl.Input, { autoFocus: true, value: value === null || value === undefined ? "" : String(value), width: "100%", onChange: ({ target }) => handleChange(target.value) }));
     };
-    return (jsxRuntime.jsxs(CellEditor, { ...editorProps, children: [jsxRuntime.jsx(CellGhost, { children: formatted || "—" }), jsxRuntime.jsx(CellField, { children: renderEditor() })] }));
+    return (jsxRuntime.jsxs(CellEditor, { ...editorProps, children: [jsxRuntime.jsx(CellGhost, { "$multiline": multiline, children: formatted || "—" }), jsxRuntime.jsx(CellField, { children: renderEditor() })] }));
+});
+
+/**
+ * Имя переменной ширины колонки.
+ *
+ * Через неё идёт и предпросмотр перетаскивания, и итоговая ширина: пока переменная не задана,
+ * работает запасное значение из стиля ячейки, а жест на время перетаскивания объявляет её на
+ * самой таблице — одним свойством на один узел, как сетка меняет свой шаблон треков.
+ */
+const getColumnWidthVariable = (index) => `--table-col-${index}`;
+/**
+ * Инлайн-размер ячейки колонки с заданной или изменяемой шириной.
+ *
+ * Раскладка таблицы автоматическая (ширину колонок выбирает содержимое), и одной `width` ей мало —
+ * она для неё лишь пожелание. Жёстко колонку держат все три предела сразу, поэтому и ставим их
+ * втроём, на каждую ячейку колонки.
+ *
+ * Ни ширины, ни разрешения тянуть — стиля нет: колонка остаётся на попечении раскладки, как и была.
+ */
+const getColumnStyle = (index, width, resizable) => {
+    if (width == null && !resizable) {
+        return undefined;
+    }
+    const variable = getColumnWidthVariable(index);
+    const fixed = width == null ? null : `${width}px`;
+    return {
+        width: `var(${variable}, ${fixed ?? "auto"})`,
+        minWidth: `var(${variable}, ${fixed ?? "0"})`,
+        // Без заданной ширины предел остаётся общим для всех ячеек — тем, что задан стилем таблицы.
+        maxWidth: `var(${variable}, ${fixed ?? "var(--table-cell-max-width, 20rem)"})`,
+    };
+};
+
+/**
+ * Перетаскивание правой границы колонки.
+ *
+ * Жест — общий {@link useResizeDrag}, тот же, что двигает границы ячеек сетки дашборда. Здесь
+ * остаётся только табличное: во время жеста ширина рисуется переменной на самой таблице, а в
+ * состояние уходит один раз, на отпускание мыши. Так шаг жеста меняет одно свойство одного узла,
+ * а не перерисовывает таблицу целиком.
+ *
+ * Стартовая ширина берётся с самой ячейки заголовка: у колонки без `width` её выбрала раскладка
+ * таблицы, и тянуть надо от того, что видно.
+ */
+const useColumnResize = ({ index, onCommit }) => {
+    const variable = getColumnWidthVariable(index);
+    const onStart = React.useCallback((event) => {
+        // Обработчик нажатия висит на самой ручке, поэтому её ячейка и таблица достаются отсюда —
+        // отдельный ref на них не нужен.
+        const cell = event.currentTarget?.closest("th");
+        if (!cell) {
+            return null;
+        }
+        return {
+            start: event.clientX,
+            width: cell.getBoundingClientRect().width,
+            table: cell.closest("table"),
+        };
+    }, []);
+    const getNextWidth = React.useCallback((state, event) => Math.max(MIN_COLUMN_WIDTH, Math.round(state.width + event.clientX - state.start)), []);
+    const onMove = React.useCallback((state, event) => state.table?.style.setProperty(variable, `${getNextWidth(state, event)}px`), [getNextWidth, variable]);
+    const onEnd = React.useCallback((state, event) => {
+        state.table?.style.removeProperty(variable);
+        const next = getNextWidth(state, event);
+        // Клик по границе без перетаскивания ширину менять не должен.
+        if (next === Math.round(state.width)) {
+            return;
+        }
+        onCommit(next);
+    }, [getNextWidth, onCommit, variable]);
+    return useResizeDrag({ onStart, onMove, onEnd });
+};
+
+/**
+ * Ручка ширины колонки на правой границе заголовка.
+ *
+ * Тот же компонент и тот же жест, что двигают границы ячеек сетки дашборда: пользователю это одно
+ * и то же действие, и выглядеть оно обязано одинаково.
+ */
+const TableColumnResizer = React.memo(({ index, onCommit }) => {
+    const { setHandle, dragging } = useColumnResize({ index, onCommit });
+    // Ручка лежит внутри заголовка, и без остановки всплытия перетаскивание границы заканчивалось бы
+    // кликом по нему — то есть переключало бы сортировку.
+    const stopPropagation = React.useCallback((event) => event.stopPropagation(), []);
+    return jsxRuntime.jsx(ResizeHandle, { ref: setHandle, "$axis": "column", "data-dragging": dragging, onClick: stopPropagation });
 });
 
+/**
+ * Шапка таблицы: заголовки колонок, сортировка кликом и захват границы для ручной ширины.
+ *
+ * Захват рисуется по разрешению атрибута (`resizable`) и не смотрит на режим правки контейнера:
+ * ширина колонки — это вид, а не данные.
+ */
+const TableHeadRow = ({ columns, sort, sortEnabled, columnWidths, withActionsColumn, onSortToggle, onColumnResize, }) => (jsxRuntime.jsxs("tr", { children: [columns.map(({ attributeName, alias, description, resizable }, index) => {
+            const sorted = sort?.attributeName === attributeName;
+            return (jsxRuntime.jsxs(TableHeadCell, { title: description || alias, style: getColumnStyle(index, columnWidths[attributeName], resizable), "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: [jsxRuntime.jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsxRuntime.jsx(TableSortSlot, { "$active": sorted, children: jsxRuntime.jsx(uilibGl.Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }), resizable && (jsxRuntime.jsx(TableColumnResizer, { index: index, onCommit: nextWidth => onColumnResize(attributeName, nextWidth) }))] }, attributeName));
+        }), withActionsColumn && jsxRuntime.jsx(TableHeadCell, {})] }));
+
 const ContainerLoading = () => (jsxRuntime.jsx(uilibGl.Flex, { alignContent: "center", justifyContent: "center", width: "100%", children: jsxRuntime.jsx(uilibGl.CircularProgress, { diameter: 1.5, mono: true }) }));
 
 /**
@@ -15885,16 +16135,24 @@ const getTableBoxStyle = (width, height) => {
  *
  * `width`/`height` — размер собственного бокса таблицы: он ограничивает её саму и прокручивает
  * то, что не влезло. Место, отведённое контейнеру, задаётся его же опциями и живёт отдельно.
+ *
+ * Ширины колонок — тоже вид: конфиг задаёт стартовую, растянутая мышью живёт здесь и в конфиг
+ * не возвращается.
  */
 const useTableView = (elementConfig) => {
     const context = React.useContext(StructuredDataContext);
     const { sort: sortEnabled, width, height } = elementConfig?.options || {};
     const [sort, setSort] = React.useState(null);
+    const [widths, setWidths] = React.useState({});
     const schema = context?.schema;
     const rows = context?.rows;
     const columns = React.useMemo(() => schema ?? [], [schema]);
     const sortedRows = React.useMemo(() => sortRows(rows ?? [], sort, schema ?? []), [rows, schema, sort]);
     const sizeCss = React.useMemo(() => getTableBoxStyle(width, height), [height, width]);
+    // Растянутая мышью ширина живёт только в рантайме и перебивает конфигурационную: последнее
+    // слово за тем, кто тянул. Обратно в конфиг она не пишется.
+    const columnWidths = React.useMemo(() => columns.reduce((acc, attribute) => ({ ...acc, [attribute.attributeName]: widths[attribute.attributeName] ?? attribute.width }), {}), [columns, widths]);
+    const onColumnResize = React.useCallback((attributeName, nextWidth) => setWidths(current => ({ ...current, [attributeName]: nextWidth })), []);
     const onSortToggle = React.useCallback((attributeName) => setSort(current => getNextSort(current, attributeName)), []);
     return {
         context,
@@ -15905,7 +16163,9 @@ const useTableView = (elementConfig) => {
         sizeCss,
         // Ширина задана — колонки по содержимому: лишнее уходит в прокрутку бокса, а не в многоточие.
         contentWidth: width != null,
+        columnWidths,
         onSortToggle,
+        onColumnResize,
     };
 };
 
@@ -15917,7 +16177,7 @@ const useTableView = (elementConfig) => {
  */
 const ElementTable = React.memo(({ elementConfig }) => {
     const { t } = useGlobalContext();
-    const { context, columns, rows, sort, sortEnabled, sizeCss, contentWidth, onSortToggle } = useTableView(elementConfig);
+    const { context, columns, rows, sort, sortEnabled, sizeCss, contentWidth, columnWidths, onSortToggle, onColumnResize, } = useTableView(elementConfig);
     // Узел таблицы держим состоянием, а не ref: отсечка должна встать сразу, как он появится.
     const [table, setTable] = React.useState(null);
     useHeadOverlap(table);
@@ -15933,10 +16193,13 @@ const ElementTable = React.memo(({ elementConfig }) => {
                 defaultValue: "Схема данных не задана",
             }) }));
     }
-    return (jsxRuntime.jsx(TableBox, { "$sizeCss": sizeCss, children: jsxRuntime.jsxs(TableWrapper, { ref: setTable, "$contentWidth": contentWidth, children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsxs("tr", { children: [columns.map(({ attributeName, alias, description }) => {
-                                const sorted = sort?.attributeName === attributeName;
-                                return (jsxRuntime.jsx(TableHeadCell, { title: description || alias, "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: jsxRuntime.jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsxRuntime.jsx(TableSortSlot, { "$active": sorted, children: jsxRuntime.jsx(uilibGl.Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }) }, attributeName));
-                            }), context.canDelete && jsxRuntime.jsx(TableHeadCell, {})] }) }), jsxRuntime.jsx(TableBody, { children: rows.map(row => (jsxRuntime.jsxs(TableRow, { children: [columns.map(attribute => (jsxRuntime.jsx(TableCellWrapper, { children: jsxRuntime.jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }) }, attribute.attributeName))), context.canDelete && (jsxRuntime.jsx(TableActionsCell, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
+    return (jsxRuntime.jsx(TableBox, { "$sizeCss": sizeCss, children: jsxRuntime.jsxs(TableWrapper, { ref: setTable, "$contentWidth": contentWidth, children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsx(TableHeadRow, { columns: columns, sort: sort, sortEnabled: sortEnabled, columnWidths: columnWidths, withActionsColumn: context.canDelete, onSortToggle: onSortToggle, onColumnResize: onColumnResize }) }), jsxRuntime.jsx(TableBody, { children: rows.map(row => (jsxRuntime.jsxs(TableRow, { children: [columns.map((attribute, columnIndex) => (jsxRuntime.jsx(TableCellWrapper, { 
+                                // Стиль колонки из конфига идёт последним: шрифт задан для значений, и ширину
+                                // он не трогает — своих размеров у него нет.
+                                style: {
+                                    ...getColumnStyle(columnIndex, columnWidths[attribute.attributeName], attribute.resizable),
+                                    ...attribute.style,
+                                }, children: jsxRuntime.jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }) }, attribute.attributeName))), context.canDelete && (jsxRuntime.jsx(TableActionsCell, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
 });
 
 const TooltipIcon = styled(uilibGl.Icon).withConfig({ displayName: "TooltipIcon", componentId: "sc-1lkxudm" }) `
@@ -19405,8 +19668,6 @@ exports.GRID_DRAGGING_ATTR = GRID_DRAGGING_ATTR;
 exports.GRID_DRAG_SOURCE_ATTR = GRID_DRAG_SOURCE_ATTR;
 exports.GRID_DROP_TARGET_ATTR = GRID_DROP_TARGET_ATTR;
 exports.GRID_FILL_DEFAULTS = GRID_FILL_DEFAULTS;
-exports.GRID_HANDLE_ATTR = GRID_HANDLE_ATTR;
-exports.GRID_HANDLE_PROPS = GRID_HANDLE_PROPS;
 exports.GRID_ROW_ID_PREFIX = GRID_ROW_ID_PREFIX;
 exports.GlobalContext = GlobalContext;
 exports.GlobalProvider = GlobalProvider;
@@ -19470,6 +19731,8 @@ exports.PresentationPanelWrapper = PresentationPanelWrapper;
 exports.PresentationWrapper = PresentationWrapper;
 exports.ProgressContainer = ProgressContainer;
 exports.QUERY_DESCRIPTION_CACHE_TTL = QUERY_DESCRIPTION_CACHE_TTL;
+exports.RESIZE_HANDLE_ATTR = RESIZE_HANDLE_ATTR;
+exports.ResizeHandle = ResizeHandle;
 exports.RoundedBackgroundContainer = RoundedBackgroundContainer;
 exports.SAVE_HOOK_RESULT_DURATION = SAVE_HOOK_RESULT_DURATION;
 exports.SERVER_NOTIFICATION_EVENT = SERVER_NOTIFICATION_EVENT;
@@ -19700,6 +19963,7 @@ exports.useRelatedDataSourceAttributes = useRelatedDataSourceAttributes;
 exports.useRemoteTask = useRemoteTask;
 exports.useRenderElement = useRenderElement;
 exports.useResizeBox = useResizeBox;
+exports.useResizeDrag = useResizeDrag;
 exports.useSavePrototypeBuilder = useSavePrototypeBuilder;
 exports.useServerNotificationsContext = useServerNotificationsContext;
 exports.useShownOtherItems = useShownOtherItems;