@evergis/react 4.0.144 → 4.0.146

package/dist/index.js

@@ -8170,6 +8170,70 @@ const useProjectDashboardInit = () => {
     }, [projectInfo, updateProject]);
 };
 
+/**
+ * Съесть клик, которым закончилось перетаскивание.
+ *
+ * Мышь отпускают уже за пределами ручки, поэтому браузер шлёт `click` не ей, а общему предку —
+ * ячейке или заголовку. Без этого перетаскивание границы заканчивалось бы сортировкой таблицы
+ * по колонке или сменой выделения в сетке.
+ */
+const swallowNextClick = () => {
+    const swallow = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    window.addEventListener("click", swallow, { capture: true, once: true });
+    // Клика может и не быть — например, мышь отпустили за пределами окна. Тогда снимаем слушатель
+    // сами, иначе он съел бы следующий, уже осмысленный клик.
+    window.setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
+};
+/**
+ * Перетаскивание границы: подписка на ручку, снимок на старте, предпросмотр на движении,
+ * запись результата на отпускании.
+ *
+ * Общий для сетки дашборда и колонок таблицы. Различаются они только тем, что именно меряют и
+ * куда пишут; сам жест обязан ощущаться одинаково — включая то, что мышь ведут по документу, а
+ * не по самой ручке, и отпускание за пределами окна тоже завершает жест.
+ */
+const useResizeDrag = ({ onStart, onMove, onEnd }) => {
+    const [handle, setHandle] = React.useState(null);
+    const [dragging, setDragging] = React.useState(false);
+    const stateRef = React.useRef(null);
+    const movedRef = React.useRef(false);
+    const mouseDown = React.useCallback((event) => {
+        const state = onStart(event);
+        if (state === null) {
+            return;
+        }
+        // Гасим выделение текста: жест ведут мышью по документу, и без этого он выделял бы всё,
+        // над чем проходит курсор.
+        event.preventDefault();
+        stateRef.current = state;
+        movedRef.current = false;
+        setDragging(true);
+    }, [onStart]);
+    const mouseMove = React.useCallback((event) => {
+        if (stateRef.current !== null) {
+            movedRef.current = true;
+            onMove(stateRef.current, event);
+        }
+    }, [onMove]);
+    const mouseUp = React.useCallback((event) => {
+        const state = stateRef.current;
+        if (state === null) {
+            return;
+        }
+        stateRef.current = null;
+        setDragging(false);
+        if (movedRef.current) {
+            swallowNextClick();
+        }
+        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 +9668,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 +9833,7 @@ const getWrapperSizeStyle = ({ style, width: widthOption, height: heightOption,
     };
 };
 
+// Прямой импорт листового модуля, а не барреля components: тот тянет за собой контейнеры.
 /**
  * Минимальный размер трека, px. Ниже него ресайз не пускает — иначе ячейку не за что схватить.
  *
@@ -9718,14 +9869,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 +9878,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 +9905,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 +9992,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 +10017,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 +10038,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 +10051,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 +10072,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 +10102,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 +10112,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 +10127,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 +10135,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 }));
 });
 
 /**
@@ -15506,8 +15555,9 @@ const TableHead = styled.thead.withConfig({ displayName: "TableHead", componentI
   z-index: 1;
 `;
 const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-1m6xil2" }) `
-  /* Относительное позиционирование держит захват границы колонки (TableResizeHandle). */
+  /* Относительное позиционирование держит захват границы колонки. */
   position: relative;
+  box-sizing: border-box;
   padding: 0.375rem 0.5rem;
   text-align: left;
   font-weight: 600;
@@ -15535,33 +15585,13 @@ const TableHeadContent = styled.span.withConfig({ displayName: "TableHeadContent
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-/**
- * Захват правой границы колонки. Лежит поверх края ячейки и ловит указатель сам, поэтому
- * перетаскивание не доходит до заголовка и не переключает сортировку.
- *
- * Ширина в пикселах, а не в rem: это зона попадания курсора, и от размера шрифта она не зависит.
- */
-const TableResizeHandle = styled.span.withConfig({ displayName: "TableResizeHandle", componentId: "sc-1g0q105" }) `
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 8px;
-  cursor: col-resize;
-  touch-action: none;
-  user-select: none;
-
-  :hover {
-    background: ${({ theme }) => theme.palette.elementDeep};
-  }
-`;
 /**
  * Место под значок сортировки. Занято всегда, пока сортировка включена, а сам значок только
  * прячется: появляясь и исчезая, он менял бы ширину колонки — и таблицу дёргало бы на каждый
  * клик по заголовку, вместе с телом. Оба направления рисуются значком в 1rem, поэтому
  * переключение asc/des ширину тоже не трогает.
  */
-const TableSortSlot = styled.span.withConfig({ displayName: "TableSortSlot", componentId: "sc-1ceykgw" }) `
+const TableSortSlot = styled.span.withConfig({ displayName: "TableSortSlot", componentId: "sc-z378vf" }) `
   display: inline-flex;
   visibility: ${({ $active }) => ($active ? "visible" : "hidden")};
 `;
@@ -15570,26 +15600,30 @@ const TableSortSlot = styled.span.withConfig({ displayName: "TableSortSlot", com
  * её нижнюю кромку и сквозь прозрачную шапку не проступают. Величину пишет {@link useHeadOverlap},
  * без неё отсечка нулевая и разметка не меняется.
  */
-const TableBody = styled.tbody.withConfig({ displayName: "TableBody", componentId: "sc-c9drzt" }) `
+const TableBody = styled.tbody.withConfig({ displayName: "TableBody", componentId: "sc-1pxpl5v" }) `
   clip-path: inset(var(${HEAD_OVERLAP_VARIABLE}, 0px) 0 0 0);
 `;
 /**
  * Строка. Разделитель рисуют её ячейки: собственная рамка строки при раздельных рамках не
  * рисуется вовсе, а при схлопнутых её рисовала бы таблица — и отсечка тела её бы не резала.
  */
-const TableRow = styled.tr.withConfig({ displayName: "TableRow", componentId: "sc-155nkv8" }) `
+const TableRow = styled.tr.withConfig({ displayName: "TableRow", componentId: "sc-j62zvd" }) `
   td {
     border-bottom: 1px solid ${({ theme }) => theme.palette.elementDeep};
   }
 `;
-const TableCellWrapper = styled.td.withConfig({ displayName: "TableCellWrapper", componentId: "sc-7ueth1" }) `
+const TableCellWrapper = styled.td.withConfig({ displayName: "TableCellWrapper", componentId: "sc-ziu5rk" }) `
+  /* Относительное позиционирование держит захват границы колонки. */
+  position: relative;
+  /* Как и у заголовка: ширина колонки считается по внешнему краю ячейки. */
+  box-sizing: border-box;
   padding: 0.125rem 0.25rem;
   vertical-align: middle;
   /* Предел снимает заданная ширина: с колонками по содержимому обрезать значение незачем. */
   max-width: var(--table-cell-max-width, 20rem);
 `;
 /** Колонка действий: узкая, не растягивается содержимым. */
-const TableActionsCell = styled(TableCellWrapper).withConfig({ displayName: "TableActionsCell", componentId: "sc-1m7p53b" }) `
+const TableActionsCell = styled(TableCellWrapper).withConfig({ displayName: "TableActionsCell", componentId: "sc-18w13t3" }) `
   width: 2rem;
   text-align: right;
 `;
@@ -15612,7 +15646,7 @@ const cellWrapMixin = styled.css `
           white-space: nowrap;
         `}
 `;
-const CellText = styled.div.withConfig({ displayName: "CellText", componentId: "sc-19uakee" }) `
+const CellText = styled.div.withConfig({ displayName: "CellText", componentId: "sc-ok630s" }) `
   padding: 0.375rem 0.25rem;
   /* Та же высота строки, что у редактора — иначе строка подпрыгивала бы по вертикали. */
   line-height: 1.25rem;
@@ -15626,7 +15660,7 @@ const CellText = styled.div.withConfig({ displayName: "CellText", componentId: "
  * Кнопка, а не просто текст, именно ради фокуса: она — таб-стоп ячейки, и Tab по таблице
  * открывает редактор с курсором внутри.
  */
-const CellButton = styled.button.withConfig({ displayName: "CellButton", componentId: "sc-16lgve4" }) `
+const CellButton = styled.button.withConfig({ displayName: "CellButton", componentId: "sc-98k9cz" }) `
   width: 100%;
   padding: 0.375rem 0.25rem;
   line-height: 1.25rem;
@@ -15644,7 +15678,7 @@ const CellButton = styled.button.withConfig({ displayName: "CellButton", compone
     border-color: ${({ theme }) => theme.palette.elementDeep};
   }
 `;
-const CellPlaceholder = styled.span.withConfig({ displayName: "CellPlaceholder", componentId: "sc-1jnsjad" }) `
+const CellPlaceholder = styled.span.withConfig({ displayName: "CellPlaceholder", componentId: "sc-7tff41" }) `
   color: ${({ theme }) => theme.palette.textSecondary};
 `;
 /**
@@ -15653,11 +15687,11 @@ const CellPlaceholder = styled.span.withConfig({ displayName: "CellPlaceholder",
  * Копия остаётся в потоке и держит ширину колонки ровно такой, какой она была до клика, —
  * иначе таблица дёргалась бы на каждый вход в правку и выход из неё.
  */
-const CellEditor = styled.div.withConfig({ displayName: "CellEditor", componentId: "sc-ee08kh" }) `
+const CellEditor = styled.div.withConfig({ displayName: "CellEditor", componentId: "sc-qa22du" }) `
   position: relative;
   min-height: 2rem;
 `;
-const CellGhost = styled.span.withConfig({ displayName: "CellGhost", componentId: "sc-1p10qm6" }) `
+const CellGhost = styled.span.withConfig({ displayName: "CellGhost", componentId: "sc-1i1yvb2" }) `
   display: block;
   padding: 0.375rem 0.25rem;
   /* Рамка повторяет CellButton — с ней высота ячейки в правке совпадает с высотой на чтении. */
@@ -15667,7 +15701,7 @@ const CellGhost = styled.span.withConfig({ displayName: "CellGhost", componentId
 
   ${cellWrapMixin};
 `;
-const CellField = styled.div.withConfig({ displayName: "CellField", componentId: "sc-cnkcp6" }) `
+const CellField = styled.div.withConfig({ displayName: "CellField", componentId: "sc-1ww3875" }) `
   position: absolute;
   inset: 0;
   display: flex;
@@ -15689,14 +15723,14 @@ const CellField = styled.div.withConfig({ displayName: "CellField", componentId:
  * Отступы те же, что у текстовой ячейки (`CellText`): в одном ряду с обычными колонками значения
  * обязаны стоять на одной линии.
  */
-const AttachmentsCellBox = styled.div.withConfig({ displayName: "AttachmentsCellBox", componentId: "sc-9n5afp" }) `
+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-1c196zb" }) `
+const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-dmdhrv" }) `
   padding: 0.75rem 0.25rem;
   color: ${({ theme }) => theme.palette.textSecondary};
 `;
@@ -15919,15 +15953,91 @@ const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
 });
 
 /**
- * Инлайн-размер ячейки колонки с заданной шириной.
+ * Имя переменной ширины колонки.
+ *
+ * Через неё идёт и предпросмотр перетаскивания, и итоговая ширина: пока переменная не задана,
+ * работает запасное значение из стиля ячейки, а жест на время перетаскивания объявляет её на
+ * самой таблице — одним свойством на один узел, как сетка меняет свой шаблон треков.
+ */
+const getColumnWidthVariable = (index) => `--table-col-${index}`;
+/**
+ * Инлайн-размер ячейки колонки с заданной или изменяемой шириной.
  *
  * Раскладка таблицы автоматическая (ширину колонок выбирает содержимое), и одной `width` ей мало —
  * она для неё лишь пожелание. Жёстко колонку держат все три предела сразу, поэтому и ставим их
  * втроём, на каждую ячейку колонки.
  *
- * Ширины нет — стиля нет: колонка остаётся на попечении раскладки, как и была.
+ * Ни ширины, ни разрешения тянуть — стиля нет: колонка остаётся на попечении раскладки, как и была.
  */
-const getColumnStyle = (width) => width == null ? undefined : { width, minWidth: width, maxWidth: 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, td");
+        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, attributeName, onResize }) => {
+    const onCommit = React.useCallback((width) => onResize(attributeName, width), [attributeName, onResize]);
+    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 });
+});
 
 /**
  * Шапка таблицы: заголовки колонок, сортировка кликом и захват границы для ручной ширины.
@@ -15935,9 +16045,9 @@ const getColumnStyle = (width) => width == null ? undefined : { width, minWidth:
  * Захват рисуется по разрешению атрибута (`resizable`) и не смотрит на режим правки контейнера:
  * ширина колонки — это вид, а не данные.
  */
-const TableHeadRow = ({ columns, sort, sortEnabled, columnWidths, withActionsColumn, onSortToggle, onResizeStart, onResizeMove, onResizeEnd, }) => (jsxRuntime.jsxs("tr", { children: [columns.map(({ attributeName, alias, description, 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(columnWidths[attributeName]), "$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(TableResizeHandle, { onPointerDown: event => onResizeStart(attributeName, event), onPointerMove: onResizeMove, onPointerUp: onResizeEnd, onPointerCancel: onResizeEnd }))] }, 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, attributeName: attributeName, onResize: onColumnResize })] }, 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 }) }));
@@ -16043,53 +16153,6 @@ const getTableBoxStyle = (width, height) => {
     };
 };
 
-/**
- * Ручное изменение ширины колонок.
- *
- * Растянутые ширины живут только здесь: тянут их в рантайме, а `width` атрибута в конфиге задаёт
- * лишь стартовое значение — записывать растянутое обратно в конфиг незачем.
- *
- * Разрешение (`resizable`) от `options.editMode` не зависит: ширина колонки — это вид таблицы,
- * а не правка данных, и тянуть её должно быть можно и на таблице только для чтения.
- *
- * Стартовую ширину берём с самой ячейки, а не из конфига: у колонки без `width` её выбрала
- * раскладка таблицы, и тянуть надо ровно от того, что видно.
- */
-const useColumnResize = (columns) => {
-    const [widths, setWidths] = React.useState({});
-    const dragRef = React.useRef(null);
-    const onResizeStart = React.useCallback((attributeName, event) => {
-        const handle = event.currentTarget;
-        // Захват границы — не клик по заголовку: иначе каждое перетаскивание переключало бы сортировку.
-        event.preventDefault();
-        event.stopPropagation();
-        dragRef.current = {
-            attributeName,
-            startX: event.clientX,
-            startWidth: handle.closest("th")?.getBoundingClientRect().width ?? MIN_COLUMN_WIDTH,
-        };
-        handle.setPointerCapture(event.pointerId);
-    }, []);
-    const onResizeMove = React.useCallback((event) => {
-        const drag = dragRef.current;
-        if (!drag) {
-            return;
-        }
-        const next = Math.max(MIN_COLUMN_WIDTH, Math.round(drag.startWidth + event.clientX - drag.startX));
-        setWidths(current => current[drag.attributeName] === next ? current : { ...current, [drag.attributeName]: next });
-    }, []);
-    const onResizeEnd = React.useCallback((event) => {
-        const handle = event.currentTarget;
-        dragRef.current = null;
-        if (handle.hasPointerCapture(event.pointerId)) {
-            handle.releasePointerCapture(event.pointerId);
-        }
-    }, []);
-    // Растянутая ширина перебивает конфигурационную: последнее слово за тем, кто тянул.
-    const columnWidths = React.useMemo(() => columns.reduce((acc, { attributeName, width }) => ({ ...acc, [attributeName]: widths[attributeName] ?? width }), {}), [columns, widths]);
-    return { columnWidths, onResizeStart, onResizeMove, onResizeEnd };
-};
-
 /**
  * Вид таблицы: колонки плюс локальная сортировка.
  *
@@ -16103,19 +16166,23 @@ const useColumnResize = (columns) => {
  * `width`/`height` — размер собственного бокса таблицы: он ограничивает её саму и прокручивает
  * то, что не влезло. Место, отведённое контейнеру, задаётся его же опциями и живёт отдельно.
  *
- * Ширины колонок — тоже вид: конфиг задаёт стартовую, растянутая мышью живёт в
- * {@link useColumnResize} и в конфиг не возвращается.
+ * Ширины колонок — тоже вид: конфиг задаёт стартовую, растянутая мышью живёт здесь и в конфиг
+ * не возвращается.
  */
 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, onResizeStart, onResizeMove, onResizeEnd } = useColumnResize(columns);
+    // Растянутая мышью ширина живёт только в рантайме и перебивает конфигурационную: последнее
+    // слово за тем, кто тянул. Обратно в конфиг она не пишется.
+    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,
@@ -16128,9 +16195,7 @@ const useTableView = (elementConfig) => {
         contentWidth: width != null,
         columnWidths,
         onSortToggle,
-        onResizeStart,
-        onResizeMove,
-        onResizeEnd,
+        onColumnResize,
     };
 };
 
@@ -16142,7 +16207,7 @@ const useTableView = (elementConfig) => {
  */
 const ElementTable = React.memo(({ elementConfig }) => {
     const { t } = useGlobalContext();
-    const { context, columns, rows, sort, sortEnabled, sizeCss, contentWidth, columnWidths, onSortToggle, onResizeStart, onResizeMove, onResizeEnd, } = useTableView(elementConfig);
+    const { context, columns, rows, sort, sortEnabled, sizeCss, contentWidth, columnWidths, onSortToggle, onColumnResize, } = useTableView(elementConfig);
     // Узел таблицы держим состоянием, а не ref: отсечка должна встать сразу, как он появится.
     const [table, setTable] = React.useState(null);
     useHeadOverlap(table);
@@ -16158,10 +16223,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.jsx(TableHeadRow, { columns: columns, sort: sort, sortEnabled: sortEnabled, columnWidths: columnWidths, withActionsColumn: context.canDelete, onSortToggle: onSortToggle, onResizeStart: onResizeStart, onResizeMove: onResizeMove, onResizeEnd: onResizeEnd }) }), jsxRuntime.jsx(TableBody, { children: rows.map(row => (jsxRuntime.jsxs(TableRow, { children: [columns.map(attribute => (jsxRuntime.jsx(TableCellWrapper, { 
+    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.jsxs(TableCellWrapper, { 
                                 // Стиль колонки из конфига идёт последним: шрифт задан для значений, и ширину
                                 // он не трогает — своих размеров у него нет.
-                                style: { ...getColumnStyle(columnWidths[attribute.attributeName]), ...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))) })] }) }));
+                                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.resizable && (jsxRuntime.jsx(TableColumnResizer, { index: columnIndex, attributeName: attribute.attributeName, onResize: onColumnResize }))] }, 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" }) `
@@ -19630,8 +19698,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;
@@ -19695,6 +19761,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;
@@ -19925,6 +19993,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;