@evergis/react 4.0.145 → 4.0.147

package/dist/react.esm.js

@@ -8168,6 +8168,23 @@ 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);
+};
 /**
  * Перетаскивание границы: подписка на ручку, снимок на старте, предпросмотр на движении,
  * запись результата на отпускании.
@@ -8180,6 +8197,7 @@ const useResizeDrag = ({ onStart, onMove, onEnd }) => {
     const [handle, setHandle] = useState(null);
     const [dragging, setDragging] = useState(false);
     const stateRef = useRef(null);
+    const movedRef = useRef(false);
     const mouseDown = useCallback((event) => {
         const state = onStart(event);
         if (state === null) {
@@ -8189,10 +8207,12 @@ const useResizeDrag = ({ onStart, onMove, onEnd }) => {
         // над чем проходит курсор.
         event.preventDefault();
         stateRef.current = state;
+        movedRef.current = false;
         setDragging(true);
     }, [onStart]);
     const mouseMove = useCallback((event) => {
         if (stateRef.current !== null) {
+            movedRef.current = true;
             onMove(stateRef.current, event);
         }
     }, [onMove]);
@@ -8203,6 +8223,9 @@ const useResizeDrag = ({ onStart, onMove, onEnd }) => {
         }
         stateRef.current = null;
         setDragging(false);
+        if (movedRef.current) {
+            swallowNextClick();
+        }
         onEnd(state, event);
     }, [onEnd]);
     useDragAndDropEffect(handle, { mouseDown, mouseMove, mouseUp });
@@ -15529,14 +15552,26 @@ const TableHead = styled.thead.withConfig({ displayName: "TableHead", componentI
   top: 0;
   z-index: 1;
 `;
-const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-1m6xil2" }) `
+/**
+ * Содержимое заголовка: псевдоним и место под значок сортировки.
+ *
+ * Само по себе не сжимается и ничего не обрезает — иначе перестало бы задавать минимальную
+ * ширину колонки, и раскладка считала бы её по одному лишь телу таблицы. Обрезку включает
+ * заголовок, и только когда ширина колонки задана явно (см. `TableHeadCell`).
+ */
+const TableHeadContent = styled.span.withConfig({ displayName: "TableHeadContent", componentId: "sc-19t325s" }) `
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-19bpg7s" }) `
   /* Относительное позиционирование держит захват границы колонки. */
   position: relative;
+  box-sizing: border-box;
   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};
@@ -15546,18 +15581,22 @@ const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", compo
       cursor: pointer;
       user-select: none;
     `}
-`;
-/**
- * Содержимое заголовка. Псевдоним обрезается многоточием, значок сортировки не сжимается:
- * у колонки с заданной шириной длинный псевдоним иначе выдавил бы значок за край ячейки.
- */
-const TableHeadContent = styled.span.withConfig({ displayName: "TableHeadContent", componentId: "sc-8hzcop" }) `
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+  /*
+   * Обрезка только у колонки с заданной шириной: там длинный псевдоним иначе выдавил бы значок
+   * сортировки за край. У колонки без ширины обрезать нечего — её ширину и задаёт заголовок,
+   * а сжатое содержимое отдало бы этот расчёт телу таблицы, и заголовок схлопнулся бы в ноль.
+   */
+  ${({ $fixedWidth }) => $fixedWidth &&
+    css `
+      overflow: hidden;
+
+      ${TableHeadContent} {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    `}
 `;
 /**
  * Место под значок сортировки. Занято всегда, пока сортировка включена, а сам значок только
@@ -15587,6 +15626,10 @@ const TableRow = styled.tr.withConfig({ displayName: "TableRow", componentId: "s
   }
 `;
 const TableCellWrapper = styled.td.withConfig({ displayName: "TableCellWrapper", componentId: "sc-ziu5rk" }) `
+  /* Относительное позиционирование держит захват границы колонки. */
+  position: relative;
+  /* Как и у заголовка: ширина колонки считается по внешнему краю ячейки. */
+  box-sizing: border-box;
   padding: 0.125rem 0.25rem;
   vertical-align: middle;
   /* Предел снимает заданная ширина: с колонками по содержимому обрезать значение незачем. */
@@ -15926,30 +15969,30 @@ const TableCell = memo(({ attribute, row, canEdit, onChange }) => {
  * Имя переменной ширины колонки.
  *
  * Через неё идёт и предпросмотр перетаскивания, и итоговая ширина: пока переменная не задана,
- * работает запасное значение из стиля ячейки, а жест на время перетаскивания объявляет её на
- * самой таблице — одним свойством на один узел, как сетка меняет свой шаблон треков.
+ * работает запасное значение, а жест на время перетаскивания объявляет её на самой таблице —
+ * одним свойством на один узел, как сетка меняет свой шаблон треков.
  */
 const getColumnWidthVariable = (index) => `--table-col-${index}`;
 /**
- * Инлайн-размер ячейки колонки с заданной или изменяемой шириной.
+ * Инлайн-размер ячейки колонки.
  *
- * Раскладка таблицы автоматическая (ширину колонок выбирает содержимое), и одной `width` ей мало —
- * она для неё лишь пожелание. Жёстко колонку держат все три предела сразу, поэтому и ставим их
- * втроём, на каждую ячейку колонки.
+ * Ставится всем колонкам, а не только тем, у кого ширина задана: жест фиксирует на время
+ * перетаскивания ВСЕ колонки, иначе соседние перераспределялись бы на первом же шаге и таблицу
+ * дёргало бы. Пока переменной нет, каждый предел падает на своё запасное значение и колонка
+ * ведёт себя ровно так, как вела бы без инлайн-стиля вовсе.
  *
- * Ни ширины, ни разрешения тянуть — стиля нет: колонка остаётся на попечении раскладки, как и была.
+ * Раскладка таблицы автоматическая (ширину колонок выбирает содержимое), и одной `width` ей мало —
+ * она для неё лишь пожелание. Жёстко колонку держат все три предела сразу.
  */
-const getColumnStyle = (index, width, resizable) => {
-    if (width == null && !resizable) {
-        return undefined;
-    }
+const getColumnStyle = (index, width, isHead) => {
     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)"})`,
+        // Без заданной ширины предел остаётся тем, что задан стилем: у ячейки тела — общий предел
+        // таблицы, у заголовка его нет вовсе.
+        maxWidth: `var(${variable}, ${fixed ?? (isHead ? "none" : "var(--table-cell-max-width, 20rem)")})`,
     };
 };
 
@@ -15957,52 +16000,55 @@ const getColumnStyle = (index, width, resizable) => {
  * Перетаскивание правой границы колонки.
  *
  * Жест — общий {@link useResizeDrag}, тот же, что двигает границы ячеек сетки дашборда. Здесь
- * остаётся только табличное: во время жеста ширина рисуется переменной на самой таблице, а в
- * состояние уходит один раз, на отпускание мыши. Так шаг жеста меняет одно свойство одного узла,
- * а не перерисовывает таблицу целиком.
+ * остаётся только табличное: во время жеста ширины рисуются переменными на самой таблице, а в
+ * состояние уходят один раз, на отпускание мыши.
  *
- * Стартовая ширина берётся с самой ячейки заголовка: у колонки без `width` её выбрала раскладка
- * таблицы, и тянуть надо от того, что видно.
+ * Снимок берётся по ВСЕМ колонкам, и все они на время жеста фиксируются — так же, как сетка
+ * фиксирует все треки. Иначе автоматическая раскладка перераспределяла бы соседние колонки на
+ * первом же шаге, и таблицу дёргало бы в самом начале перетаскивания. По той же причине в
+ * состояние уходят ширины всех колонок: без этого соседи прыгнули бы обратно на отпускании.
+ *
+ * Ширины снимаются с ячеек шапки: колонка одна на всю таблицу, а строк в ней сколько угодно.
  */
-const useColumnResize = ({ index, onCommit }) => {
-    const variable = getColumnWidthVariable(index);
+const useColumnResize = ({ index, onResize }) => {
     const onStart = useCallback((event) => {
-        // Обработчик нажатия висит на самой ручке, поэтому её ячейка и таблица достаются отсюда —
-        // отдельный ref на них не нужен.
-        const cell = event.currentTarget?.closest("th");
-        if (!cell) {
+        // Обработчик нажатия висит на самой ручке, поэтому таблица достаётся отсюда — отдельный
+        // ref на неё не нужен.
+        const table = event.currentTarget?.closest("table");
+        const head = table?.querySelector("thead tr");
+        if (!head) {
             return null;
         }
-        return {
-            start: event.clientX,
-            width: cell.getBoundingClientRect().width,
-            table: cell.closest("table"),
-        };
-    }, []);
-    const getNextWidth = useCallback((state, event) => Math.max(MIN_COLUMN_WIDTH, Math.round(state.width + event.clientX - state.start)), []);
-    const onMove = useCallback((state, event) => state.table?.style.setProperty(variable, `${getNextWidth(state, event)}px`), [getNextWidth, variable]);
+        const widths = Array.from(head.children).map(cell => cell.getBoundingClientRect().width);
+        return widths[index] === undefined ? null : { start: event.clientX, widths, table };
+    }, [index]);
+    const getNextWidths = useCallback((state, event) => state.widths.map((width, position) => position === index
+        ? Math.max(MIN_COLUMN_WIDTH, Math.round(width + event.clientX - state.start))
+        : Math.round(width)), [index]);
+    const onMove = useCallback((state, event) => getNextWidths(state, event).forEach((width, position) => state.table?.style.setProperty(getColumnWidthVariable(position), `${width}px`)), [getNextWidths]);
     const onEnd = useCallback((state, event) => {
-        state.table?.style.removeProperty(variable);
-        const next = getNextWidth(state, event);
+        state.widths.forEach((_width, position) => state.table?.style.removeProperty(getColumnWidthVariable(position)));
+        const widths = getNextWidths(state, event);
         // Клик по границе без перетаскивания ширину менять не должен.
-        if (next === Math.round(state.width)) {
+        if (widths[index] === Math.round(state.widths[index])) {
             return;
         }
-        onCommit(next);
-    }, [getNextWidth, onCommit, variable]);
+        onResize(widths);
+    }, [getNextWidths, index, onResize]);
     return useResizeDrag({ onStart, onMove, onEnd });
 };
 
 /**
- * Ручка ширины колонки на правой границе заголовка.
+ * Ручка ширины колонки на правой границе ячейки.
  *
  * Тот же компонент и тот же жест, что двигают границы ячеек сетки дашборда: пользователю это одно
- * и то же действие, и выглядеть оно обязано одинаково.
+ * и то же действие, и выглядеть оно обязано одинаково. Поэтому и стоит она у КАЖДОЙ ячейки
+ * колонки, как в сетке, — тянуть границу можно на любой строке, а не только в шапке.
  */
-const TableColumnResizer = memo(({ index, onCommit }) => {
-    const { setHandle, dragging } = useColumnResize({ index, onCommit });
-    // Ручка лежит внутри заголовка, и без остановки всплытия перетаскивание границы заканчивалось бы
-    // кликом по нему — то есть переключало бы сортировку.
+const TableColumnResizer = memo(({ index, onResize }) => {
+    const { setHandle, dragging } = useColumnResize({ index, onResize });
+    // Ручка лежит внутри ячейки, и без остановки всплытия перетаскивание границы заканчивалось бы
+    // кликом по ней — то есть переключало бы сортировку в шапке и открывало бы правку в теле.
     const stopPropagation = useCallback((event) => event.stopPropagation(), []);
     return jsx(ResizeHandle, { ref: setHandle, "$axis": "column", "data-dragging": dragging, onClick: stopPropagation });
 });
@@ -16015,7 +16061,7 @@ const TableColumnResizer = memo(({ index, onCommit }) => {
  */
 const TableHeadRow = ({ columns, sort, sortEnabled, columnWidths, withActionsColumn, onSortToggle, onColumnResize, }) => (jsxs("tr", { children: [columns.map(({ attributeName, alias, description, resizable }, index) => {
             const sorted = sort?.attributeName === attributeName;
-            return (jsxs(TableHeadCell, { title: description || alias, style: getColumnStyle(index, columnWidths[attributeName], resizable), "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: [jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsx(TableSortSlot, { "$active": sorted, children: jsx(Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }), resizable && (jsx(TableColumnResizer, { index: index, onCommit: nextWidth => onColumnResize(attributeName, nextWidth) }))] }, attributeName));
+            return (jsxs(TableHeadCell, { title: description || alias, style: getColumnStyle(index, columnWidths[attributeName], true), "$sortable": sortEnabled, "$fixedWidth": columnWidths[attributeName] != null, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: [jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsx(TableSortSlot, { "$active": sorted, children: jsx(Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }), resizable && jsx(TableColumnResizer, { index: index, onResize: onColumnResize })] }, attributeName));
         }), withActionsColumn && jsx(TableHeadCell, {})] }));
 
 const ContainerLoading = () => (jsx(Flex, { alignContent: "center", justifyContent: "center", width: "100%", children: jsx(CircularProgress, { diameter: 1.5, mono: true }) }));
@@ -16150,7 +16196,9 @@ const useTableView = (elementConfig) => {
     // Растянутая мышью ширина живёт только в рантайме и перебивает конфигурационную: последнее
     // слово за тем, кто тянул. Обратно в конфиг она не пишется.
     const columnWidths = useMemo(() => columns.reduce((acc, attribute) => ({ ...acc, [attribute.attributeName]: widths[attribute.attributeName] ?? attribute.width }), {}), [columns, widths]);
-    const onColumnResize = useCallback((attributeName, nextWidth) => setWidths(current => ({ ...current, [attributeName]: nextWidth })), []);
+    // Жест отдаёт ширины всех колонок разом: соседние он тоже фиксировал, и вернуть их к
+    // автоподбору значило бы дёрнуть таблицу сразу после отпускания.
+    const onColumnResize = useCallback((next) => setWidths(columns.reduce((acc, { attributeName }, position) => next[position] === undefined ? acc : { ...acc, [attributeName]: next[position] }, {})), [columns]);
     const onSortToggle = useCallback((attributeName) => setSort(current => getNextSort(current, attributeName)), []);
     return {
         context,
@@ -16191,13 +16239,13 @@ const ElementTable = memo(({ elementConfig }) => {
                 defaultValue: "Схема данных не задана",
             }) }));
     }
-    return (jsx(TableBox, { "$sizeCss": sizeCss, children: jsxs(TableWrapper, { ref: setTable, "$contentWidth": contentWidth, children: [jsx(TableHead, { children: jsx(TableHeadRow, { columns: columns, sort: sort, sortEnabled: sortEnabled, columnWidths: columnWidths, withActionsColumn: context.canDelete, onSortToggle: onSortToggle, onColumnResize: onColumnResize }) }), jsx(TableBody, { children: rows.map(row => (jsxs(TableRow, { children: [columns.map((attribute, columnIndex) => (jsx(TableCellWrapper, { 
+    return (jsx(TableBox, { "$sizeCss": sizeCss, children: jsxs(TableWrapper, { ref: setTable, "$contentWidth": contentWidth, children: [jsx(TableHead, { children: jsx(TableHeadRow, { columns: columns, sort: sort, sortEnabled: sortEnabled, columnWidths: columnWidths, withActionsColumn: context.canDelete, onSortToggle: onSortToggle, onColumnResize: onColumnResize }) }), jsx(TableBody, { children: rows.map(row => (jsxs(TableRow, { children: [columns.map((attribute, columnIndex) => (jsxs(TableCellWrapper, { 
                                 // Стиль колонки из конфига идёт последним: шрифт задан для значений, и ширину
                                 // он не трогает — своих размеров у него нет.
                                 style: {
-                                    ...getColumnStyle(columnIndex, columnWidths[attribute.attributeName], attribute.resizable),
+                                    ...getColumnStyle(columnIndex, columnWidths[attribute.attributeName]),
                                     ...attribute.style,
-                                }, children: jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }) }, attribute.attributeName))), context.canDelete && (jsx(TableActionsCell, { children: jsx(IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
+                                }, children: [jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }), attribute.resizable && (jsx(TableColumnResizer, { index: columnIndex, onResize: onColumnResize }))] }, attribute.attributeName))), context.canDelete && (jsx(TableActionsCell, { children: jsx(IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
 });
 
 const TooltipIcon = styled(Icon).withConfig({ displayName: "TooltipIcon", componentId: "sc-1lkxudm" }) `