nntc-ui 0.2.6 → 0.2.7

package/src/components/view/VirtualTable/VirtualTable.tsx

@@ -1,1159 +0,0 @@
-import { Header, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import { Range, defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
-import classnames from 'classnames';
-import dayjs from 'dayjs';
-import {
-  Fragment,
-  JSX,
-  ReactNode,
-  PointerEvent as ReactPointerEvent,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { v4 as uuidv4 } from 'uuid';
-
-import { Button } from '@components/common/Button';
-import { Tooltip } from '@components/view/Tooltip';
-import { ChipSize } from '@models/ChipSize';
-import { UiProps } from '@models/UiProps';
-import { toFirstLetterUpperCase } from '@utils/index';
-
-import { defaultRowHeight } from './constants/defaultRowHeight';
-import { AdditionalButton } from './models/AdditionalButton';
-import { FilterBy } from './models/FilterBy';
-import { SortBy } from './models/SortBy';
-import { TableCell } from './models/TableCell';
-import { TableColumn } from './models/TableColumn';
-import { TableRow } from './models/TableRow';
-import { VirtualTableBorders } from './models/VirtualTableBorders';
-import { VirtualTableRef } from './models/VirtualTableRef';
-import { DefaultColumn } from './ui/DefaultColumn';
-import { HeaderDropdown } from './ui/HeaderDropdown';
-import { dedupeFirstByColumnValue } from './utils/dedupeFirstByColumnValue';
-import { getColumns } from './utils/getColumns';
-import { getNextHorizontalHeaders } from './utils/getNextHorizontalHeaders';
-import { getNextVerticalHeaders } from './utils/getNextVerticalHeaders';
-import { getPrevHorizontalHeaders } from './utils/getPrevHorizontalHeaders';
-import { getPrevVerticalHeaders } from './utils/getPrevVerticalHeaders';
-import { recursiveFilter } from './utils/recursiveFilter';
-import { recursiveSort } from './utils/recursiveSort';
-import { rowMatchesFilter } from './utils/rowMatchesFilter';
-import {
-  computeRowSelection,
-  getSelectedIndexesByRows,
-  isInteractiveSelectionTarget,
-  isScrollbarPointerEvent,
-} from './utils/rowSelection';
-import * as styles from './virtualTable.module.css';
-
-const rowSelectionDragThresholdPx = 4;
-const rowSelectionScrollEdgePx = 32;
-const rowSelectionScrollStepPx = 20;
-
-type Size = ChipSize;
-
-interface Props {
-  /** Строки таблицы */
-  rows: TableRow[];
-  /** Описание колонок (заголовки, сортировка, фильтрация, форматирование) */
-  columns: TableColumn[];
-  /** Кастомный рендер ячеек: view — режим просмотра, edit — режим редактирования */
-  additionalColumnsViews?: (
-    id: string,
-    value: string | number | undefined,
-    payload: { [key: string]: string } | undefined,
-  ) => {
-    edit:
-      | ((onChange: (changeValue?: string, withBlur?: boolean) => void, onBlur: () => void) => JSX.Element | null)
-      | null;
-    view: JSX.Element | null;
-  };
-  /** Колбэк при изменении значения редактируемой ячейки */
-  onChangeCell?: (rowIndex: number, columnId: string, value: string | number | undefined, original?: TableRow) => void;
-  /** Функция расчёта ширины колонки по индексу; по умолчанию — meta.width колонки или 200 px */
-  cellWidth?: (columnIndex: number) => number;
-  /** Кнопки действий в правой части каждой строки */
-  rowButtons?: ((original: TableRow) => AdditionalButton[]) | undefined;
-  /** Количество левых колонок, закреплённых при горизонтальной прокрутке */
-  fixedColumnsCount?: number;
-  /** Высота строк заголовка в пикселях (по одному значению на уровень вложенности) */
-  headerRowHeight?: number[];
-  /** Высота строки тела таблицы в пикселях */
-  bodyRowHeight?: number;
-  /** Ширина колонки с кнопками действий строки */
-  rowActionWidth?: number;
-  /** Автоматически измерять высоту строк по содержимому (для многострочного текста) */
-  dynamicRowHeight?: boolean;
-  /** Фиксированная высота контейнера таблицы в пикселях */
-  height?: number;
-  /** Прокрутить таблицу к последней строке при монтировании/обновлении */
-  scrollToBottom?: boolean;
-  /** Рендерить попапы фильтрации/сортировки внутри контейнера таблицы (важно для overflow и вкладок) */
-  useTableContainerAsRootForPopup?: boolean;
-  /** Размер компонента: small | medium | large */
-  componentSize?: Size;
-  /** Стиль границ ячеек: all | horizontal | vertical | none */
-  borders?: VirtualTableBorders;
-  /** Показывать в заголовке количество уникальных значений столбца */
-  showUniqueValuesCount?: boolean;
-  /** Начальные фильтры (управляемый режим — через onFiltersChange) */
-  globalFilters?: FilterBy[];
-  /** Начальные сортировки (управляемый режим — через onSortsChange) */
-  globalSorts?: SortBy[];
-  /** Колбэк при изменении активных фильтров пользователем */
-  onFiltersChange?: (filters: FilterBy[]) => void;
-  /** Колбэк при изменении активных сортировок (без внутренней сортировки по isNew) */
-  onSortsChange?: (sorts: SortBy[]) => void;
-  /** Дополнительный контент слева от заголовка колонки (например, кнопка синхронизации с картой) */
-  leftAdditionalHeaderContent?: (headerName: string) => ReactNode;
-  /** Дополнительный контент справа от заголовка колонки, перед кнопкой фильтрации */
-  rightAdditionalHeaderContent?: (headerName: string) => ReactNode;
-  /** Добавить закреплённую колонку с порядковыми номерами строк */
-  showRowsNumbers?: boolean;
-  /** Чередовать фон строк (zebra); по умолчанию true */
-  stripedRows?: boolean;
-  /** Включить выделение строк мышью (Ctrl — точечно, Shift — диапазон, drag — несколько подряд) */
-  enableSelectRows?: boolean;
-  /** Колбэк при изменении набора выделенных строк; передаются полные данные строк в порядке отображения */
-  onSelectRowsChange?: (rows: TableRow[]) => void;
-  /** Начальное выделение строк (те же объекты, что в rows; управляемый режим — через onSelectRowsChange) */
-  globalSelectedRows?: TableRow[];
-}
-
-interface SelectionDragState {
-  pointerId: number;
-  startIndex: number;
-  startX: number;
-  startY: number;
-  baseIndexes: Set<number>;
-  ctrl: boolean;
-  shift: boolean;
-  anchorIndex: number | null;
-  isDragCapable: boolean;
-  hasDragged: boolean;
-}
-
-export const VirtualTable = forwardRef<VirtualTableRef, UiProps<Props>>((props, ref) => {
-  const {
-    rows,
-    columns,
-    additionalColumnsViews,
-    onChangeCell,
-    cellWidth,
-    rowButtons,
-    fixedColumnsCount = 0,
-    headerRowHeight = [defaultRowHeight],
-    bodyRowHeight = defaultRowHeight,
-    rowActionWidth = 77,
-    classes,
-    dynamicRowHeight = false,
-    height,
-    scrollToBottom,
-    useTableContainerAsRootForPopup,
-    componentSize = 'small',
-    borders = 'horizontal',
-    showUniqueValuesCount = false,
-    globalFilters,
-    globalSorts,
-    onFiltersChange,
-    onSortsChange,
-    leftAdditionalHeaderContent,
-    rightAdditionalHeaderContent,
-    showRowsNumbers,
-    stripedRows = true,
-    enableSelectRows = false,
-    onSelectRowsChange,
-    globalSelectedRows,
-  } = props;
-
-  const fixedWithNumbersCount = fixedColumnsCount + (showRowsNumbers ? 1 : 0);
-
-  const [filterBy, setFilterBy] = useState<FilterBy[]>(globalFilters ?? []);
-  const [sortBy, setSortBy] = useState<SortBy[]>([...(globalSorts ?? []), { columnName: 'isNew', direction: 'desc' }]);
-  const [selectedIndexes, setSelectedIndexes] = useState<Set<number>>(() => new Set());
-
-  const tableContainerRef = useRef<HTMLDivElement>(null);
-  const selectedIndexesRef = useRef(selectedIndexes);
-  const selectedRowsRef = useRef<TableRow[]>(enableSelectRows ? (globalSelectedRows ?? []) : []);
-  const processedRowsRef = useRef<TableRow[]>([]);
-  const lastSelectedIndexRef = useRef<number | null>(null);
-  const lastSelectedRowRef = useRef<TableRow | null>(null);
-  const selectionDragRef = useRef<SelectionDragState | null>(null);
-  const onSelectRowsChangeRef = useRef(onSelectRowsChange);
-  const enableSelectRowsRef = useRef(enableSelectRows);
-
-  selectedIndexesRef.current = selectedIndexes;
-  onSelectRowsChangeRef.current = onSelectRowsChange;
-  enableSelectRowsRef.current = enableSelectRows;
-
-  const rowNumberColumnId = useMemo(() => (showRowsNumbers ? `rowNumber_${uuidv4()}` : null), [showRowsNumbers]);
-
-  const memoizedColumns = useMemo(() => {
-    if (!rowNumberColumnId) {
-      return getColumns(columns);
-    }
-
-    const buildRowsNumbersColumn = (template?: TableColumn): TableColumn => ({
-      id: rowNumberColumnId,
-      ...(!template?.columns?.length ? { accessorKey: rowNumberColumnId } : undefined),
-      label: '#',
-      columns: template?.columns?.map((child) => buildRowsNumbersColumn(child)),
-    });
-
-    const nextColumns = [buildRowsNumbersColumn(columns[0]), ...columns];
-    const result = getColumns(nextColumns);
-
-    return result;
-  }, [columns, rowNumberColumnId]);
-
-  const processedRows = useMemo(() => {
-    const newRows = [...rows];
-    // При переключении объета может возникнуть случай, когда у
-    //  новых строк не будет ранее выбранных значений из фильтра
-    const nextFilterBy = filterBy.filter((filterByItem) => {
-      if (filterByItem.type === 'value' && filterByItem.uniqueFirstPerValue && filterByItem.values.length === 0) {
-        return true;
-      }
-
-      return rows.some((row) => rowMatchesFilter(row, filterByItem));
-    });
-    const filtered = nextFilterBy.length
-      ? recursiveFilter(newRows, nextFilterBy)
-      : filterBy.some(
-            (fb) =>
-              (fb.type === 'numberRange' && fb.values.some((v) => v !== Infinity && v !== -Infinity)) ||
-              (fb.type === 'dateRange' &&
-                fb.values.some((v) => !dayjs(v).isSame(dayjs(0)) && !dayjs(v).isSame(dayjs(Number.MAX_SAFE_INTEGER)))),
-          )
-        ? []
-        : newRows;
-    let sorted = sortBy.length ? recursiveSort(filtered, sortBy) : filtered;
-
-    for (const fb of nextFilterBy) {
-      if (fb.type === 'value' && fb.uniqueFirstPerValue) {
-        sorted = dedupeFirstByColumnValue(sorted, fb.columnName);
-      }
-    }
-
-    return sorted;
-  }, [rows, sortBy, filterBy]);
-
-  const memoizedData = useMemo(() => {
-    const result = rowNumberColumnId
-      ? processedRows.map((row, index) => ({
-          ...row,
-          [rowNumberColumnId]: {
-            value: index + 1,
-          },
-        }))
-      : processedRows;
-
-    window.dispatchEvent(
-      new CustomEvent('filteringRows', {
-        detail: result,
-      }),
-    );
-    return result;
-  }, [processedRows, rowNumberColumnId]);
-
-  processedRowsRef.current = processedRows;
-
-  const emitSelection = useCallback((indexes: Set<number>, anchorIndex: number | null) => {
-    const source = processedRowsRef.current;
-    const orderedIndexes = [...indexes].filter((index) => index >= 0 && index < source.length).sort((a, b) => a - b);
-    const nextIndexes = new Set(orderedIndexes);
-    const nextRows = orderedIndexes.map((index) => source[index]);
-    const previousIndexes = selectedIndexesRef.current;
-    const sameSelection =
-      nextIndexes.size === previousIndexes.size && orderedIndexes.every((index) => previousIndexes.has(index));
-
-    if (!sameSelection) {
-      setSelectedIndexes(nextIndexes);
-      selectedIndexesRef.current = nextIndexes;
-      selectedRowsRef.current = nextRows;
-      onSelectRowsChangeRef.current?.(nextRows);
-    }
-
-    if (anchorIndex !== null && source[anchorIndex]) {
-      lastSelectedIndexRef.current = anchorIndex;
-      lastSelectedRowRef.current = source[anchorIndex];
-    } else if (anchorIndex === null) {
-      lastSelectedIndexRef.current = null;
-      lastSelectedRowRef.current = null;
-    }
-  }, []);
-
-  useEffect(() => {
-    const lastSelectedRow = lastSelectedRowRef.current;
-    if (lastSelectedRow) {
-      const nextAnchorIndex = processedRows.indexOf(lastSelectedRow);
-      lastSelectedIndexRef.current = nextAnchorIndex === -1 ? null : nextAnchorIndex;
-      if (nextAnchorIndex === -1) {
-        lastSelectedRowRef.current = null;
-      }
-    }
-
-    if (selectedRowsRef.current.length === 0) {
-      if (selectedIndexesRef.current.size > 0) {
-        emitSelection(new Set(), lastSelectedIndexRef.current);
-      }
-      return;
-    }
-
-    const nextIndexes = getSelectedIndexesByRows(processedRows, selectedRowsRef.current);
-    const fallbackAnchor = nextIndexes.size > 0 ? Math.max(...nextIndexes) : null;
-
-    emitSelection(nextIndexes, lastSelectedIndexRef.current ?? fallbackAnchor);
-  }, [processedRows, emitSelection]);
-
-  useEffect(() => {
-    if (!enableSelectRows && selectedIndexesRef.current.size > 0) {
-      emitSelection(new Set(), null);
-    }
-  }, [enableSelectRows, emitSelection]);
-
-  const partialFiltered = useMemo(() => {
-    const newRows = [...rows];
-    return Array.from({ length: filterBy.length + 1 }, (_, i) => recursiveFilter(newRows, filterBy.slice(0, i)));
-  }, [rows, filterBy]);
-
-  const columnsEstimateSize = useMemo(
-    () =>
-      cellWidth ??
-      ((index: number) =>
-        rowNumberColumnId && index === 0
-          ? memoizedData.length.toString().length * 8 + 24
-          : (memoizedColumns[index]?.meta?.width ?? 200)),
-    [cellWidth, memoizedColumns, memoizedData, rowNumberColumnId],
-  );
-
-  const table = useReactTable({
-    data: memoizedData,
-    columns: memoizedColumns,
-    defaultColumn: DefaultColumn,
-    manualSorting: true,
-    enableColumnPinning: true,
-    getCoreRowModel: getCoreRowModel(),
-    initialState: {
-      columnPinning: {
-        left:
-          memoizedColumns
-            .filter((_, index) => index < fixedWithNumbersCount)
-            .map((mc) => mc.id)
-            .filter((id) => id)
-            .map((id) => id!) ?? [],
-      },
-    },
-    meta: {
-      updateData: (rowIndex: number, columnId: string, value: string | number | undefined, original?: TableRow) => {
-        onChangeCell?.(rowIndex, columnId, value, original);
-      },
-      tableContainerRef,
-      additionalColumnsViews,
-    },
-  });
-
-  const { rows: rowsFromTable } = table.getRowModel();
-  const headerGroups = table.getHeaderGroups();
-
-  const rowVirtualizer = useVirtualizer({
-    count: rowsFromTable.length,
-    getScrollElement: () => tableContainerRef?.current,
-    estimateSize: () => bodyRowHeight,
-    overscan: 5,
-  });
-
-  const columnVirtualizer = useVirtualizer({
-    horizontal: true,
-    count: headerGroups[0]?.headers.length ?? 1,
-    rangeExtractor: useCallback((range: Range) => {
-      const stickyIndexes = [...Array(fixedWithNumbersCount)].map((_, index) => index);
-      const next = new Set([...stickyIndexes, ...defaultRangeExtractor(range)]);
-      return [...next].sort((a, b) => a - b);
-    }, []),
-    getScrollElement: () => tableContainerRef?.current,
-    estimateSize: columnsEstimateSize,
-    overscan: 5,
-  });
-
-  const fixedColumnsWidth = useMemo(
-    () => [...Array(fixedWithNumbersCount)].reduce((sum: number, _, index) => sum + columnsEstimateSize(index), 0),
-    [fixedWithNumbersCount, columnsEstimateSize],
-  );
-
-  const headerGroupHeight = useMemo(() => {
-    const delta = headerGroups.length - headerRowHeight.length;
-    const result = [...headerRowHeight];
-    if (delta > 0) {
-      for (let i = 0; i < delta; i++) {
-        result.push(defaultRowHeight);
-      }
-    }
-
-    return result;
-  }, [headerRowHeight, headerGroups]);
-
-  const summaryHeaderHeight = useMemo(
-    () =>
-      headerGroupHeight.reduce(
-        (sum, current, currentIndex) => (currentIndex < headerGroups.length ? sum + current : sum),
-        0,
-      ),
-    [headerGroupHeight, headerGroups],
-  );
-
-  const headerGroupY = useCallback(
-    (headerIndex: number) =>
-      headerGroupHeight.reduce((sum, current, currentIndex) => (currentIndex < headerIndex ? sum + current : sum), 0),
-    [headerGroupHeight, headerGroups],
-  );
-
-  const rowsTotalSize = rowVirtualizer.getTotalSize();
-  const columnsTotalSize = columnVirtualizer.getTotalSize();
-
-  const resetFilters = () => {
-    setFilterBy([]);
-  };
-
-  const resetSorts = () => {
-    setSortBy([{ columnName: 'isNew', direction: 'desc' }]);
-  };
-
-  useImperativeHandle(ref, () => ({
-    resetFilters,
-    resetSorts,
-  }));
-
-  useEffect(() => {
-    if (tableContainerRef?.current) {
-      const container = tableContainerRef?.current;
-      const rightBorderElement = container.querySelector(`.${styles.rightBorder}`);
-      if (rightBorderElement) {
-        const containerWidth = container.clientWidth;
-        const tableWidth = columnsTotalSize + (!!rowButtons ? rowActionWidth : 0);
-        (rightBorderElement as HTMLElement).style.left =
-          `${containerWidth > tableWidth ? tableWidth : containerWidth}px`;
-      }
-    }
-  }, [tableContainerRef?.current?.clientWidth, columnsTotalSize, rowButtons, rowActionWidth]);
-
-  useEffect(() => {
-    if (tableContainerRef?.current) {
-      const container = tableContainerRef?.current;
-      const bottomBorderElement = container.querySelector(`.${styles.bottomBorder}`);
-      if (bottomBorderElement) {
-        const containerHeight = container.clientHeight;
-        const tableHeight = rowsTotalSize + summaryHeaderHeight;
-        (bottomBorderElement as HTMLElement).style.top =
-          `${containerHeight > tableHeight ? tableHeight : containerHeight}px`;
-      }
-    }
-  }, [tableContainerRef?.current?.clientHeight, rowsTotalSize]);
-
-  useEffect(() => {
-    const scrollListener = function (this: HTMLDivElement) {
-      const marginLeftChangingElements = this.querySelectorAll(`.${styles.marginLeftChanging}`);
-      marginLeftChangingElements?.forEach(
-        (element) => ((element as HTMLElement).style.marginLeft = `${this.scrollLeft}px`),
-      );
-    };
-
-    if (tableContainerRef?.current) {
-      tableContainerRef.current.addEventListener('scroll', scrollListener);
-      if (scrollToBottom) {
-        tableContainerRef.current.scrollTo(0, tableContainerRef.current.scrollHeight);
-      }
-    }
-
-    return () => {
-      if (tableContainerRef?.current) {
-        tableContainerRef.current.removeEventListener('scroll', scrollListener);
-      }
-    };
-  }, [tableContainerRef, scrollToBottom]);
-
-  const virtualRows = rowVirtualizer.getVirtualItems();
-  const virtualColumns = columnVirtualizer.getVirtualItems();
-  const lastVirtualColumnIndex = virtualColumns[virtualColumns.length - 1]?.index;
-  const virtualRowsSizeByIndex = useMemo(
-    () => new Map(virtualRows.map((item) => [item.index, item.size])),
-    [virtualRows],
-  );
-
-  const getRowSizeByIndex = useCallback(
-    (index: number) => virtualRowsSizeByIndex.get(index) ?? bodyRowHeight,
-    [bodyRowHeight, virtualRowsSizeByIndex],
-  );
-
-  const getRowspanHeight = useCallback(
-    (rowIndex: number, rowspan: number) => {
-      const clampedRowspan = Math.max(1, Math.floor(rowspan));
-      const lastRowIndex = Math.min(rowsFromTable.length - 1, rowIndex + clampedRowspan - 1);
-      const rowsInRange = lastRowIndex - rowIndex + 1;
-
-      let result = 0;
-
-      for (let index = rowIndex; index <= lastRowIndex; index += 1) {
-        result += getRowSizeByIndex(index);
-      }
-
-      const bordersCompensation = borders === 'all' || borders === 'horizontal' ? Math.max(0, rowsInRange - 1) : 0;
-
-      return Math.max(0, result - bordersCompensation);
-    },
-    [borders, getRowSizeByIndex, rowsFromTable.length],
-  );
-
-  const isCellCoveredByRowspan = useCallback(
-    (rowIndex: number, columnId: string) => {
-      for (let index = rowIndex - 1; index >= 0; index -= 1) {
-        const upperCell = rowsFromTable[index]?.original?.[columnId] as TableCell | undefined;
-        const upperRowspan = Math.max(1, upperCell?.rowspan ?? 1);
-
-        if (index + upperRowspan - 1 >= rowIndex) {
-          return true;
-        }
-      }
-
-      return false;
-    },
-    [rowsFromTable],
-  );
-
-  const getRowIndexFromTarget = (target: EventTarget | null): number | null => {
-    if (!(target instanceof Element)) {
-      return null;
-    }
-
-    const rowElement = target.closest(`.${styles.tr}`);
-    if (!rowElement) {
-      return null;
-    }
-
-    const index = Number(rowElement.getAttribute('data-index'));
-    return Number.isFinite(index) ? index : null;
-  };
-
-  const getRowIndexFromClientY = useCallback(
-    (clientY: number): number | null => {
-      const container = tableContainerRef.current;
-      const rowsCount = processedRowsRef.current.length;
-      if (!container || rowsCount === 0) {
-        return null;
-      }
-
-      const rect = container.getBoundingClientRect();
-      const offset = clientY - rect.top + container.scrollTop - summaryHeaderHeight;
-
-      if (offset < 0) {
-        return 0;
-      }
-
-      const totalSize = rowVirtualizer.getTotalSize();
-      if (offset >= totalSize) {
-        return rowsCount - 1;
-      }
-
-      const measurements = rowVirtualizer.measurementsCache;
-      if (measurements.length > 0) {
-        let low = 0;
-        let high = measurements.length - 1;
-
-        while (low <= high) {
-          const mid = (low + high) >> 1;
-          const item = measurements[mid];
-
-          if (offset < item.start) {
-            high = mid - 1;
-          } else if (offset >= item.end) {
-            low = mid + 1;
-          } else {
-            return Math.min(rowsCount - 1, item.index);
-          }
-        }
-      }
-
-      if (!dynamicRowHeight) {
-        return Math.max(0, Math.min(rowsCount - 1, Math.floor(offset / bodyRowHeight)));
-      }
-
-      const virtualItems = rowVirtualizer.getVirtualItems();
-      if (virtualItems.length === 0) {
-        return 0;
-      }
-
-      if (offset < virtualItems[0].start) {
-        return virtualItems[0].index;
-      }
-
-      return virtualItems[virtualItems.length - 1].index;
-    },
-    [bodyRowHeight, dynamicRowHeight, rowVirtualizer, summaryHeaderHeight],
-  );
-
-  const scrollContainerWhileSelecting = (clientY: number) => {
-    const container = tableContainerRef.current;
-    if (!container) {
-      return;
-    }
-
-    const rect = container.getBoundingClientRect();
-    const visibleY = clientY - rect.top;
-
-    if (visibleY < rowSelectionScrollEdgePx + summaryHeaderHeight) {
-      container.scrollTop -= rowSelectionScrollStepPx;
-    } else if (visibleY > rect.height - rowSelectionScrollEdgePx) {
-      container.scrollTop += rowSelectionScrollStepPx;
-    }
-  };
-
-  const applySelectionGesture = (currentIndex: number, isDrag: boolean) => {
-    const drag = selectionDragRef.current;
-    if (!drag) {
-      return;
-    }
-
-    const result = computeRowSelection({
-      startIndex: drag.startIndex,
-      currentIndex,
-      ctrl: drag.ctrl,
-      shift: drag.shift,
-      anchorIndex: drag.anchorIndex,
-      baseIndexes: drag.baseIndexes,
-      isDrag,
-    });
-
-    emitSelection(result.indexes, result.anchor);
-  };
-
-  const handleTablePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
-    if (!enableSelectRowsRef.current || event.button !== 0) {
-      return;
-    }
-
-    const rowIndex = getRowIndexFromTarget(event.target);
-    if (rowIndex === null) {
-      if (
-        isInteractiveSelectionTarget(event.target) ||
-        isScrollbarPointerEvent(event) ||
-        (event.target instanceof Element && Boolean(event.target.closest(`.${styles.th}`)))
-      ) {
-        return;
-      }
-
-      if (selectedIndexesRef.current.size > 0) {
-        emitSelection(new Set(), null);
-      }
-
-      return;
-    }
-
-    if (isInteractiveSelectionTarget(event.target)) {
-      return;
-    }
-
-    const isCellActionTarget =
-      event.target instanceof Element && event.target.closest('[data-vt-cell-action]') !== null;
-    const isModifierClick = event.ctrlKey || event.metaKey || event.shiftKey;
-
-    if (isCellActionTarget && !isModifierClick) {
-      return;
-    }
-
-    const isDragCapable = event.pointerType === 'mouse' || event.pointerType === 'pen';
-
-    selectionDragRef.current = {
-      pointerId: event.pointerId,
-      startIndex: rowIndex,
-      startX: event.clientX,
-      startY: event.clientY,
-      baseIndexes: new Set(selectedIndexesRef.current),
-      ctrl: event.ctrlKey || event.metaKey,
-      shift: event.shiftKey,
-      anchorIndex: lastSelectedIndexRef.current,
-      isDragCapable: isDragCapable && !isCellActionTarget,
-      hasDragged: false,
-    };
-
-    if (isCellActionTarget) {
-      applySelectionGesture(rowIndex, false);
-      return;
-    }
-
-    if (isDragCapable) {
-      event.currentTarget.setPointerCapture(event.pointerId);
-      applySelectionGesture(rowIndex, false);
-    }
-  };
-
-  const handleTablePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
-    const drag = selectionDragRef.current;
-    if (!drag || !drag.isDragCapable || event.pointerId !== drag.pointerId) {
-      return;
-    }
-
-    const deltaX = event.clientX - drag.startX;
-    const deltaY = event.clientY - drag.startY;
-    const distanceSquared = deltaX * deltaX + deltaY * deltaY;
-    if (!drag.hasDragged && distanceSquared < rowSelectionDragThresholdPx * rowSelectionDragThresholdPx) {
-      return;
-    }
-
-    drag.hasDragged = true;
-    event.preventDefault();
-    scrollContainerWhileSelecting(event.clientY);
-
-    const currentIndex = getRowIndexFromClientY(event.clientY);
-    if (currentIndex === null) {
-      return;
-    }
-
-    applySelectionGesture(currentIndex, true);
-  };
-
-  const clearSelectionDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
-    const drag = selectionDragRef.current;
-    if (!drag || event.pointerId !== drag.pointerId) {
-      return;
-    }
-
-    if (!drag.isDragCapable && !drag.hasDragged) {
-      applySelectionGesture(drag.startIndex, false);
-    }
-
-    selectionDragRef.current = null;
-
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-  };
-
-  const getRowBackgroundColor = useCallback(
-    (row: TableRow, rowIndex: number) => {
-      if (row?.isNew?.value === 1 || selectedIndexes.has(rowIndex)) {
-        return 'var(--theme-table-selected-row)';
-      }
-
-      return rowIndex % 2 !== 0 ? 'var(--theme-table-even-row)' : 'var(--theme-table-background)';
-    },
-    [selectedIndexes],
-  );
-  const rowZIndexByIndex = useMemo(() => {
-    const rowsCount = rowsFromTable.length;
-    const result = new Map<number, number>();
-
-    rowsFromTable.forEach((row, rowIndex) => {
-      const maxRowspan = row
-        .getAllCells()
-        .reduce(
-          (maxSpan, cell) =>
-            Math.max(maxSpan, Math.max(1, (row.original?.[cell.column.id] as TableCell | undefined)?.rowspan ?? 1)),
-          1,
-        );
-
-      const spanWeight = maxRowspan - 1;
-      const zIndex = spanWeight * (rowsCount + 1) + (rowsCount - rowIndex + 1);
-
-      result.set(rowIndex, zIndex);
-    });
-
-    return result;
-  }, [rowsFromTable]);
-  const headerBaseZIndex = useMemo(
-    () => rowsFromTable.length * rowsFromTable.length + rowsFromTable.length + 10,
-    [rowsFromTable.length],
-  );
-
-  const renderHeaderNode = (header: Header<TableRow, unknown>) => {
-    const metaLabel = (header.column.columnDef.meta as { label?: string } | undefined)?.label;
-
-    if (typeof metaLabel === 'string') {
-      const headerLines = metaLabel.split(/\r\n|\\r\\n|\n|\\n/);
-
-      if (headerLines.length > 1) {
-        return (
-          <>
-            {headerLines.map((line, index) => (
-              <Fragment key={`${header.id}_${index}`}>
-                {line}
-                {index < headerLines.length - 1 && <br />}
-              </Fragment>
-            ))}
-          </>
-        );
-      }
-    }
-
-    return flexRender(header.column.columnDef.header, header.getContext());
-  };
-
-  const [before, after] =
-    virtualColumns.length > 0
-      ? [
-          fixedWithNumbersCount && virtualColumns[fixedWithNumbersCount].index !== fixedWithNumbersCount
-            ? virtualColumns[fixedWithNumbersCount].start - fixedColumnsWidth
-            : virtualColumns[0].start,
-          columnsTotalSize - virtualColumns[virtualColumns.length - 1].end,
-        ]
-      : [0, 0];
-
-  useEffect(() => {
-    onFiltersChange?.(filterBy);
-  }, [filterBy]);
-
-  useEffect(() => {
-    onSortsChange?.(sortBy.filter((sb) => sb.columnName !== 'isNew'));
-  }, [sortBy]);
-
-  return (
-    <div
-      className={classnames(
-        styles.root,
-        styles[componentSize as keyof typeof styles],
-        styles[`borders${toFirstLetterUpperCase(borders)}` as keyof typeof styles],
-        classes?.root,
-      )}
-      style={height ? { height } : undefined}
-    >
-      <div
-        ref={tableContainerRef}
-        className={classnames(styles.tableContainer, 'styledScroll', enableSelectRows && styles.selectRows)}
-        onPointerDown={enableSelectRows ? handleTablePointerDown : undefined}
-        onPointerMove={enableSelectRows ? handleTablePointerMove : undefined}
-        onPointerUp={enableSelectRows ? clearSelectionDrag : undefined}
-        onPointerCancel={enableSelectRows ? clearSelectionDrag : undefined}
-        onDragStart={enableSelectRows ? (event) => event.preventDefault() : undefined}
-      >
-        <div
-          className={styles.table}
-          style={{
-            height: `${rowsTotalSize + summaryHeaderHeight}px`,
-          }}
-        >
-          <div
-            style={{
-              position: 'sticky',
-              top: 0,
-              zIndex: headerBaseZIndex,
-            }}
-          >
-            {headerGroups.map((headerGroup, hgi) => {
-              const innerCell = (header: Header<TableRow, unknown>) => {
-                const headerMeta = header.column.columnDef.meta;
-                const headerResultName =
-                  (headerMeta as { sortAnotherName?: string } | undefined)?.sortAnotherName ??
-                  header.column.columnDef.id ??
-                  header.id;
-                const columnFilterIndex = filterBy.findIndex((fb) => fb.columnName === headerResultName);
-                const rowsForChecklist = columnFilterIndex === -1 ? memoizedData : partialFiltered[columnFilterIndex];
-
-                return (
-                  <div className={classnames(styles.thCell)}>
-                    {header.column.columnDef.id ===
-                      header.column.columnDef['accessorKey' as keyof typeof header.column.columnDef] &&
-                    header.column.columnDef.id !== rowNumberColumnId &&
-                    (headerMeta?.sortable ||
-                      headerMeta?.selectUnique ||
-                      headerMeta?.filtrationByValue ||
-                      headerMeta?.filtrationByDate ||
-                      headerMeta?.filtrationByNumber ||
-                      (headerMeta && showUniqueValuesCount)) ? (
-                      <HeaderDropdown
-                        headerMeta={headerMeta}
-                        sortBy={sortBy}
-                        setSortBy={setSortBy}
-                        filterBy={filterBy}
-                        setFilterBy={setFilterBy}
-                        rows={rowsForChecklist}
-                        rowsForUniqueCount={memoizedData}
-                        headerName={header.column.columnDef.id ?? header.id}
-                        containerRef={useTableContainerAsRootForPopup ? tableContainerRef : undefined}
-                        showUniqueValuesCount={showUniqueValuesCount}
-                        leftAdditionalContent={leftAdditionalHeaderContent}
-                        rightAdditionalContent={rightAdditionalHeaderContent}
-                        children={(afterNode) => (
-                          <div
-                            className={classnames(
-                              styles.label,
-                              !!headerMeta?.headerAlign
-                                ? styles[`align${headerMeta?.headerAlign}` as keyof typeof styles]
-                                : styles.alignLeft,
-                            )}
-                          >
-                            {renderHeaderNode(header)}
-                            {afterNode}
-                          </div>
-                        )}
-                      ></HeaderDropdown>
-                    ) : (
-                      <div
-                        className={classnames(
-                          styles.label,
-                          !!headerMeta?.headerAlign
-                            ? styles[`align${headerMeta?.headerAlign}` as keyof typeof styles]
-                            : styles.alignLeft,
-                        )}
-                      >
-                        {renderHeaderNode(header)}
-                      </div>
-                    )}
-                  </div>
-                );
-              };
-
-              return (
-                <Fragment key={headerGroup.id}>
-                  {[...Array(fixedWithNumbersCount)].map((_a, index) => {
-                    const header = headerGroup.headers[index];
-
-                    const nextHorizontalHeaders = getNextHorizontalHeaders(
-                      headerGroup.headers,
-                      index,
-                      lastVirtualColumnIndex,
-                    );
-                    const nextVerticalHeaders = getNextVerticalHeaders(headerGroups, hgi, index);
-
-                    return (
-                      <div
-                        key={`${headerGroup.id}-${header.id}`}
-                        className={classnames(
-                          styles.th,
-                          hgi === 0 ? styles.firstThRow : undefined,
-                          !nextVerticalHeaders.length &&
-                            index !== headerGroup.headers.length - 1 &&
-                            styles.thRightBorder,
-                          index === 0 && styles.thLeftBorder,
-                          nextVerticalHeaders.length && !nextHorizontalHeaders.length && styles.thHiddenColumn,
-                          styles.marginLeftChanging,
-                        )}
-                        style={{
-                          zIndex: headerBaseZIndex + 1,
-                          width: `${columnsEstimateSize(index)}px`,
-                          height: `${headerGroupHeight[hgi]}px`,
-                          transform:
-                            `translateX(` +
-                            `${Array.from({ length: index }, (_, i) => columnsEstimateSize(i)).reduce(
-                              (sum, w) => sum + w,
-                              0,
-                            )}px` +
-                            `) ` +
-                            `translateY(${headerGroupY(hgi)}px)`,
-                        }}
-                      >
-                        {innerCell(header)}
-                      </div>
-                    );
-                  })}
-
-                  {virtualColumns.map((column) => {
-                    if (column.index > fixedWithNumbersCount - 1) {
-                      const header = headerGroup.headers[column.index];
-                      const nextHorizontalHeaders = getNextHorizontalHeaders(
-                        headerGroup.headers,
-                        column.index,
-                        lastVirtualColumnIndex,
-                      );
-                      const prevHorizontalHeaders = getPrevHorizontalHeaders(headerGroup.headers, column.index);
-                      const nextVerticalHeaders = getNextVerticalHeaders(headerGroups, hgi, column.index);
-                      const prevVerticalHeaders = getPrevVerticalHeaders(headerGroups, hgi, column.index);
-
-                      const thWidth =
-                        !nextHorizontalHeaders.length && !prevHorizontalHeaders.length
-                          ? column.size
-                          : column.size +
-                            nextHorizontalHeaders.reduce(
-                              (sum, current) => sum + (current.column.columnDef.meta?.width ?? 0),
-                              0,
-                            );
-                      const zIndex =
-                        !nextHorizontalHeaders.length && !prevHorizontalHeaders.length
-                          ? undefined
-                          : headerBaseZIndex + nextHorizontalHeaders.length + 2;
-                      const thHeight = !prevVerticalHeaders.length
-                        ? headerGroupHeight[hgi]
-                        : headerGroupHeight[hgi] +
-                          prevVerticalHeaders.reduce(
-                            (sum, _, index) => sum + (headerGroupHeight[hgi - index - 1] ?? 0),
-                            0,
-                          );
-                      const translateY = !prevVerticalHeaders.length
-                        ? headerGroupY(hgi)
-                        : headerGroupY(hgi) -
-                          prevVerticalHeaders.reduce(
-                            (sum, _, index) => sum + (headerGroupHeight[hgi - index - 1] ?? 0),
-                            0,
-                          );
-
-                      return (
-                        <div
-                          key={`${headerGroup.id}-${header.id}`}
-                          className={classnames(
-                            styles.th,
-                            hgi === 0 && styles.firstThRow,
-                            !nextVerticalHeaders.length &&
-                              column.index !== headerGroup.headers.length - 1 &&
-                              styles.thRightBorder,
-                            column.index === 0 && styles.thLeftBorder,
-                            nextVerticalHeaders.length && !nextHorizontalHeaders.length && styles.thHiddenColumn,
-                          )}
-                          style={{
-                            width: `${thWidth}px`,
-                            zIndex,
-                            height: `${thHeight}px`,
-                            transform:
-                              `translateX(${column.start + (!!fixedWithNumbersCount ? -1 : 0)}px)` +
-                              ` translateY(${translateY}px)`,
-                            borderTop:
-                              borders !== 'none' && translateY === 0 ? '1px solid var(--border-color)' : undefined,
-                          }}
-                        >
-                          {innerCell(header)}
-                        </div>
-                      );
-                    }
-                    return null;
-                  })}
-
-                  {!!rowButtons && (
-                    <div
-                      className={classnames(styles.th, hgi === 0 ? styles.firstThRow : undefined)}
-                      style={{
-                        width: `${rowActionWidth}px`,
-                        height: `${headerGroupHeight[hgi]}px`,
-                        transform:
-                          `translateX(${columnsTotalSize + (!!fixedWithNumbersCount ? -2 : 0)}px)` +
-                          ` translateY(${headerGroupY(hgi)}px)`,
-                      }}
-                    ></div>
-                  )}
-                </Fragment>
-              );
-            })}
-          </div>
-
-          {virtualRows.map((virtualRow) => {
-            const row = rowsFromTable[virtualRow.index];
-
-            return (
-              <div
-                key={`row-${virtualRow.key}`}
-                data-index={virtualRow.index}
-                ref={dynamicRowHeight ? rowVirtualizer.measureElement : undefined}
-                className={classnames(
-                  styles.tr,
-                  stripedRows && virtualRow.index % 2 !== 0 && styles.evenRow,
-                  (row.original?.isNew?.value === 1 || selectedIndexes.has(virtualRow.index)) && styles.selected,
-                )}
-                style={{
-                  zIndex: rowZIndexByIndex.get(virtualRow.index) ?? 1,
-                  ...(!dynamicRowHeight && {
-                    height: virtualRow.size,
-                  }),
-                  transform:
-                    `translateY(` +
-                    `${summaryHeaderHeight + virtualRow.start - rowVirtualizer.options.scrollMargin}` +
-                    `px)`,
-                }}
-              >
-                <div style={{ width: `${before}px` }} />
-
-                {virtualColumns.map((virtualCol) => {
-                  const cell = row.getAllCells()[virtualCol.index];
-                  const isSticky = cell.column.getIsPinned() === 'left';
-                  const currentCell = row.original?.[cell.column.id] as TableCell | undefined;
-                  const rowspan = Math.max(1, currentCell?.rowspan ?? 1);
-                  const isCoveredByRowspan = isCellCoveredByRowspan(virtualRow.index, cell.column.id);
-                  const hasRowspan = rowspan > 1 && !isCoveredByRowspan;
-
-                  return (
-                    <div
-                      key={`cell-${virtualRow.key}-${virtualCol.key}`}
-                      data-col-index={virtualCol.index}
-                      className={classnames(styles.td, isSticky && styles.sticky)}
-                      style={{
-                        ...(isSticky && {
-                          left: virtualCol.start,
-                          marginLeft: virtualCol.index === 0 ? -1 : 0, // чтобы появился левый бордер
-                        }),
-                        width: `${virtualCol.size}px`,
-                        ...(!dynamicRowHeight &&
-                          !hasRowspan && {
-                            overflow: 'hidden',
-                          }),
-                      }}
-                      data-index={virtualRow.index}
-                    >
-                      {!isCoveredByRowspan &&
-                        (hasRowspan ? (
-                          <div
-                            className={styles.rowspanContent}
-                            style={{
-                              height: `${getRowspanHeight(virtualRow.index, rowspan)}px`,
-                              backgroundColor: getRowBackgroundColor(row.original, virtualRow.index),
-                            }}
-                          >
-                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                          </div>
-                        ) : (
-                          flexRender(cell.column.columnDef.cell, cell.getContext())
-                        ))}
-                    </div>
-                  );
-                })}
-
-                {!!rowButtons && (
-                  <div
-                    className={classnames(styles.td)}
-                    style={{
-                      width: `${rowActionWidth}px`,
-                      justifyContent: 'flex-start',
-                      padding: '4px',
-                      ...(!dynamicRowHeight && {
-                        overflow: 'hidden',
-                      }),
-                    }}
-                  >
-                    {rowButtons?.(row.original)?.map((ab) => (
-                      <Fragment key={ab.title}>
-                        {ab.template ? (
-                          ab.template(ab)
-                        ) : (
-                          <Tooltip
-                            label={ab.title}
-                            placement="top"
-                            wrapTrigger
-                            classes={{ trigger: styles.rowButtonTrigger }}
-                          >
-                            <Button
-                              onClick={() => ab.onClick?.(virtualRow.index, row.original)}
-                              componentSize="small"
-                              variant="text"
-                              icon={ab.icon}
-                            ></Button>
-                          </Tooltip>
-                        )}
-                      </Fragment>
-                    ))}
-                  </div>
-                )}
-
-                <div style={{ width: `${after}px` }} />
-              </div>
-            );
-          })}
-        </div>
-        {borders !== 'none' && (
-          <>
-            <div className={styles.rightBorder} style={{ height: `${rowsTotalSize + summaryHeaderHeight}px` }} />
-            <div className={styles.bottomBorder} style={{ width: `${columnsTotalSize}px` }} />
-          </>
-        )}
-      </div>
-    </div>
-  );
-});