@evergis/react 4.0.145 → 4.0.146

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 });
@@ -15532,6 +15555,7 @@ const TableHead = styled.thead.withConfig({ displayName: "TableHead", componentI
 const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-1m6xil2" }) `
   /* Относительное позиционирование держит захват границы колонки. */
   position: relative;
+  box-sizing: border-box;
   padding: 0.375rem 0.5rem;
   text-align: left;
   font-weight: 600;
@@ -15587,6 +15611,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;
   /* Предел снимает заданная ширина: с колонками по содержимому обрезать значение незачем. */
@@ -15961,15 +15989,15 @@ const getColumnStyle = (index, width, resizable) => {
  * состояние уходит один раз, на отпускание мыши. Так шаг жеста меняет одно свойство одного узла,
  * а не перерисовывает таблицу целиком.
  *
- * Стартовая ширина берётся с самой ячейки заголовка: у колонки без `width` её выбрала раскладка
- * таблицы, и тянуть надо от того, что видно.
+ * Стартовая ширина берётся с той ячейки, за границу которой потянули: у колонки без `width` её
+ * выбрала раскладка таблицы, и тянуть надо от того, что видно.
  */
 const useColumnResize = ({ index, onCommit }) => {
     const variable = getColumnWidthVariable(index);
     const onStart = useCallback((event) => {
         // Обработчик нажатия висит на самой ручке, поэтому её ячейка и таблица достаются отсюда —
-        // отдельный ref на них не нужен.
-        const cell = event.currentTarget?.closest("th");
+        // отдельный ref на них не нужен. Ячейка любая: ручки стоят и в шапке, и в каждой строке.
+        const cell = event.currentTarget?.closest("th, td");
         if (!cell) {
             return null;
         }
@@ -15994,15 +16022,17 @@ const useColumnResize = ({ index, onCommit }) => {
 };
 
 /**
- * Ручка ширины колонки на правой границе заголовка.
+ * Ручка ширины колонки на правой границе ячейки.
  *
  * Тот же компонент и тот же жест, что двигают границы ячеек сетки дашборда: пользователю это одно
- * и то же действие, и выглядеть оно обязано одинаково.
+ * и то же действие, и выглядеть оно обязано одинаково. Поэтому и стоит она у КАЖДОЙ ячейки
+ * колонки, как в сетке, — тянуть границу можно на любой строке, а не только в шапке.
  */
-const TableColumnResizer = memo(({ index, onCommit }) => {
+const TableColumnResizer = memo(({ index, attributeName, onResize }) => {
+    const onCommit = useCallback((width) => onResize(attributeName, width), [attributeName, onResize]);
     const { setHandle, dragging } = useColumnResize({ index, onCommit });
-    // Ручка лежит внутри заголовка, и без остановки всплытия перетаскивание границы заканчивалось бы
-    // кликом по нему — то есть переключало бы сортировку.
+    // Ручка лежит внутри ячейки, и без остановки всплытия перетаскивание границы заканчивалось бы
+    // кликом по ней — то есть переключало бы сортировку в шапке и открывало бы правку в теле.
     const stopPropagation = useCallback((event) => event.stopPropagation(), []);
     return jsx(ResizeHandle, { ref: setHandle, "$axis": "column", "data-dragging": dragging, onClick: stopPropagation });
 });
@@ -16015,7 +16045,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], 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, attributeName: attributeName, onResize: onColumnResize })] }, attributeName));
         }), withActionsColumn && jsx(TableHeadCell, {})] }));
 
 const ContainerLoading = () => (jsx(Flex, { alignContent: "center", justifyContent: "center", width: "100%", children: jsx(CircularProgress, { diameter: 1.5, mono: true }) }));
@@ -16191,13 +16221,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),
                                     ...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, attributeName: attribute.attributeName, 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" }) `