@evergis/react 4.0.144 → 4.0.146

package/dist/components/Dashboard/components/ResizeHandle/constants.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Заход зоны захвата на содержимое с каждой стороны границы, px.
+ *
+ * Без него попасть курсором ровно в границу невозможно: у таблицы её толщина — один пиксель,
+ * а у сетки зазора может не быть вовсе. Ручка абсолютная и в раскладке не участвует, поэтому
+ * расширение ничего не сдвигает.
+ */
+export declare const HANDLE_BLEED_PX = 3;
+/**
+ * Маркер ручки: нажатие на ней тянет границу, а не ячейку сетки.
+ *
+ * Ставит его сам компонент. Ручка колонки таблицы, оказавшейся внутри ячейки сетки, обязана
+ * помечаться так же — иначе нажатие на ней начинало бы перетаскивание всей ячейки.
+ */
+export declare const RESIZE_HANDLE_ATTR = "data-grid-handle";

package/dist/components/Dashboard/components/ResizeHandle/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './styled';
+export * from './types';

package/dist/components/Dashboard/components/ResizeHandle/styled.d.ts

@@ -0,0 +1,17 @@
+import { ResizeAxis } from './types';
+/**
+ * Ручка перетаскивания границы. Общая для сетки дашборда и колонок таблицы: жест один и тот же,
+ * и выглядеть он обязан одинаково.
+ *
+ * Абсолютная и целиком лежит в зазоре, поэтому включение режима редактирования не сдвигает
+ * раскладку ни на пиксель. Сам ползунок (`::after`) появляется только при наведении и во время
+ * перетаскивания — в покое раскладка выглядит как обычно.
+ *
+ * Ширину зазора берёт из переменной: у сетки её объявляет тело сетки, у таблицы зазора нет вовсе,
+ * и зона захвата сжимается до одного захода на содержимое с каждой стороны.
+ */
+export declare const ResizeHandle: import('styled-components').StyledComponent<"div", any, {
+    "data-grid-handle": boolean;
+} & {
+    $axis: ResizeAxis;
+}, "data-grid-handle">;

package/dist/components/Dashboard/components/ResizeHandle/types.d.ts

@@ -0,0 +1,2 @@
+/** Ось перетаскивания: колонка тянется по горизонтали, строка — по вертикали. */
+export type ResizeAxis = "row" | "column";

package/dist/components/Dashboard/components/index.d.ts

@@ -17,6 +17,7 @@ export * from './HiddenTitleItems';
 export * from './Loading';
 export * from './LogTerminal';
 export * from './Pagination';
+export * from './ResizeHandle';
 export * from './Pagination/styled';
 export * from './StackBar';
 export * from './SvgImage';

package/dist/components/Dashboard/elements/ElementTable/components/TableColumnResizer.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { TableColumnResizerProps } from '../types';
+/**
+ * Ручка ширины колонки на правой границе ячейки.
+ *
+ * Тот же компонент и тот же жест, что двигают границы ячеек сетки дашборда: пользователю это одно
+ * и то же действие, и выглядеть оно обязано одинаково. Поэтому и стоит она у КАЖДОЙ ячейки
+ * колонки, как в сетке, — тянуть границу можно на любой строке, а не только в шапке.
+ */
+export declare const TableColumnResizer: FC<TableColumnResizerProps>;

package/dist/components/Dashboard/elements/ElementTable/hooks/useColumnResize.d.ts

@@ -1,20 +1,19 @@
-import { PointerEvent } from 'react';
-import { StructuredDataAttribute } from '../../../containers/StructuredDataContainer/types';
+import { ResizeDrag } from '../../../hooks/useResizeDrag';
+interface UseColumnResizeParams {
+    /** Позиция колонки: по ней собрано имя переменной, которой колонка задаёт свою ширину. */
+    index: number;
+    onCommit: (width: number) => void;
+}
 /**
- * Ручное изменение ширины колонок.
+ * Перетаскивание правой границы колонки.
  *
- * Растянутые ширины живут только здесь: тянут их в рантайме, а `width` атрибута в конфиге задаёт
- * лишь стартовое значение — записывать растянутое обратно в конфиг незачем.
+ * Жест — общий {@link useResizeDrag}, тот же, что двигает границы ячеек сетки дашборда. Здесь
+ * остаётся только табличное: во время жеста ширина рисуется переменной на самой таблице, а в
+ * состояние уходит один раз, на отпускание мыши. Так шаг жеста меняет одно свойство одного узла,
+ * а не перерисовывает таблицу целиком.
  *
- * Разрешение (`resizable`) от `options.editMode` не зависит: ширина колонки — это вид таблицы,
- * а не правка данных, и тянуть её должно быть можно и на таблице только для чтения.
- *
- * Стартовую ширину берём с самой ячейки, а не из конфига: у колонки без `width` её выбрала
- * раскладка таблицы, и тянуть надо ровно от того, что видно.
+ * Стартовая ширина берётся с той ячейки, за границу которой потянули: у колонки без `width` её
+ * выбрала раскладка таблицы, и тянуть надо от того, что видно.
  */
-export declare const useColumnResize: (columns: StructuredDataAttribute[]) => {
-    columnWidths: Record<string, number>;
-    onResizeStart: (attributeName: string, event: PointerEvent<HTMLElement>) => void;
-    onResizeMove: (event: PointerEvent<HTMLElement>) => void;
-    onResizeEnd: (event: PointerEvent<HTMLElement>) => void;
-};
+export declare const useColumnResize: ({ index, onCommit }: UseColumnResizeParams) => ResizeDrag;
+export {};

package/dist/components/Dashboard/elements/ElementTable/hooks/useTableView.d.ts

@@ -13,8 +13,8 @@ import { TableSort } from '../types';
  * `width`/`height` — размер собственного бокса таблицы: он ограничивает её саму и прокручивает
  * то, что не влезло. Место, отведённое контейнеру, задаётся его же опциями и живёт отдельно.
  *
- * Ширины колонок — тоже вид: конфиг задаёт стартовую, растянутая мышью живёт в
- * {@link useColumnResize} и в конфиг не возвращается.
+ * Ширины колонок — тоже вид: конфиг задаёт стартовую, растянутая мышью живёт здесь и в конфиг
+ * не возвращается.
  */
 export declare const useTableView: (elementConfig?: ElementTableConfig) => {
     context: import('../../../containers/StructuredDataContainer/types').StructuredDataContextValue;
@@ -26,7 +26,5 @@ export declare const useTableView: (elementConfig?: ElementTableConfig) => {
     contentWidth: boolean;
     columnWidths: Record<string, number>;
     onSortToggle: (attributeName: string) => void;
-    onResizeStart: (attributeName: string, event: import('react').PointerEvent<HTMLElement>) => void;
-    onResizeMove: (event: import('react').PointerEvent<HTMLElement>) => void;
-    onResizeEnd: (event: import('react').PointerEvent<HTMLElement>) => void;
+    onColumnResize: (attributeName: string, nextWidth: number) => void;
 };

package/dist/components/Dashboard/elements/ElementTable/styled.d.ts

@@ -39,13 +39,6 @@ export declare const TableHeadCell: import('styled-components').StyledComponent<
  * у колонки с заданной шириной длинный псевдоним иначе выдавил бы значок за край ячейки.
  */
 export declare const TableHeadContent: import('styled-components').StyledComponent<"span", any, {}, never>;
-/**
- * Захват правой границы колонки. Лежит поверх края ячейки и ловит указатель сам, поэтому
- * перетаскивание не доходит до заголовка и не переключает сортировку.
- *
- * Ширина в пикселах, а не в rem: это зона попадания курсора, и от размера шрифта она не зависит.
- */
-export declare const TableResizeHandle: import('styled-components').StyledComponent<"span", any, {}, never>;
 /**
  * Место под значок сортировки. Занято всегда, пока сортировка включена, а сам значок только
  * прячется: появляясь и исчезая, он менял бы ширину колонки — и таблицу дёргало бы на каждый

package/dist/components/Dashboard/elements/ElementTable/types.d.ts

@@ -1,4 +1,3 @@
-import { PointerEvent } from 'react';
 import { FeatureAttributeValue } from '../../../../types';
 import { DraftRow, StructuredDataAttribute } from '../../containers/StructuredDataContainer/types';
 export type SortDirection = "asc" | "desc";
@@ -19,6 +18,12 @@ export interface TableCellProps {
     canEdit: boolean;
     onChange: (key: string, attributeName: string, value: FeatureAttributeValue) => void;
 }
+export interface TableColumnResizerProps {
+    /** Позиция колонки: по ней собрано имя переменной, которой колонка задаёт свою ширину. */
+    index: number;
+    attributeName: string;
+    onResize: (attributeName: string, width: number) => void;
+}
 export interface TableHeadRowProps {
     columns: StructuredDataAttribute[];
     sort: TableSort | null;
@@ -28,7 +33,5 @@ export interface TableHeadRowProps {
     /** У таблицы есть колонка действий — шапке нужна пустая ячейка над ней. */
     withActionsColumn: boolean;
     onSortToggle: (attributeName: string) => void;
-    onResizeStart: (attributeName: string, event: PointerEvent<HTMLElement>) => void;
-    onResizeMove: (event: PointerEvent<HTMLElement>) => void;
-    onResizeEnd: (event: PointerEvent<HTMLElement>) => void;
+    onColumnResize: (attributeName: string, width: number) => void;
 }

package/dist/components/Dashboard/elements/ElementTable/utils/columnStyle.d.ts

@@ -1,11 +1,19 @@
 import { CSSProperties } from 'react';
 /**
- * Инлайн-размер ячейки колонки с заданной шириной.
+ * Имя переменной ширины колонки.
+ *
+ * Через неё идёт и предпросмотр перетаскивания, и итоговая ширина: пока переменная не задана,
+ * работает запасное значение из стиля ячейки, а жест на время перетаскивания объявляет её на
+ * самой таблице — одним свойством на один узел, как сетка меняет свой шаблон треков.
+ */
+export declare const getColumnWidthVariable: (index: number) => string;
+/**
+ * Инлайн-размер ячейки колонки с заданной или изменяемой шириной.
  *
  * Раскладка таблицы автоматическая (ширину колонок выбирает содержимое), и одной `width` ей мало —
  * она для неё лишь пожелание. Жёстко колонку держат все три предела сразу, поэтому и ставим их
  * втроём, на каждую ячейку колонки.
  *
- * Ширины нет — стиля нет: колонка остаётся на попечении раскладки, как и была.
+ * Ни ширины, ни разрешения тянуть — стиля нет: колонка остаётся на попечении раскладки, как и была.
  */
-export declare const getColumnStyle: (width?: number) => CSSProperties | undefined;
+export declare const getColumnStyle: (index: number, width?: number, resizable?: boolean) => CSSProperties | undefined;

package/dist/components/Dashboard/grid/constants.d.ts

@@ -34,14 +34,6 @@ export declare const GRID_AUTO_FILL_DEFAULTS: CSSObject;
  * раскладки, поэтому задаётся явно через `options.gap`, а не навязывается всем сеткам.
  */
 export declare const DEFAULT_GRID_GAP = 0;
-/**
- * Насколько ручка ресайза заходит на содержимое с каждой стороны, px.
- *
- * По умолчанию зазора нет вовсе, так что попасть курсором ровно в границу невозможно — зона
- * захвата всегда шире зазора на эту величину с каждой стороны. Ручка абсолютная и в раскладке
- * не участвует, поэтому расширение ничего не сдвигает.
- */
-export declare const HANDLE_BLEED_PX = 3;
 /**
  * Сдвиг курсора, после которого нажатие на ячейке считается перетаскиванием, px.
  *
@@ -51,12 +43,6 @@ export declare const HANDLE_BLEED_PX = 3;
 export declare const DRAG_THRESHOLD_PX = 4;
 /** Маркер ячейки в DOM: по нему ищется цель перетаскивания под курсором. */
 export declare const GRID_CELL_ATTR = "data-grid-cell";
-/** Маркер ручки ресайза: нажатие на ней тянет границу, а не ячейку. */
-export declare const GRID_HANDLE_ATTR = "data-grid-handle";
-/** Тот же маркер пропсами: имя атрибута вычисляемое, а в JSX такое подставляется только спредом. */
-export declare const GRID_HANDLE_PROPS: {
-    "data-grid-handle": boolean;
-};
 /**
  * Нажатия, которые перетаскиванием ячейки не считаются.
  *

package/dist/components/Dashboard/grid/hooks/useGridHeightResize.d.ts

@@ -1,4 +1,4 @@
-import { GridResize } from './useGridResize';
+import { ResizeDrag } from '../../hooks/useResizeDrag';
 interface UseGridHeightResizeParams {
     /** Доли всех строк сетки — их сумма сохраняется при пересчёте. */
     sizes: number[];
@@ -23,5 +23,5 @@ interface UseGridHeightResizeParams {
  * ради чего режим включают: под курсором сетка садилась бы на заданные пиксели, а после отпускания
  * снова раздувалась содержимым.
  */
-export declare const useGridHeightResize: ({ sizes, autoHeight, getGrid, onCommit, }: UseGridHeightResizeParams) => GridResize;
+export declare const useGridHeightResize: ({ sizes, autoHeight, getGrid, onCommit, }: UseGridHeightResizeParams) => ResizeDrag;
 export {};

package/dist/components/Dashboard/grid/hooks/useGridResize.d.ts

@@ -1,3 +1,4 @@
+import { ResizeDrag } from '../../hooks/useResizeDrag';
 import { GridAxis } from '../types';
 interface UseGridResizeParams {
     axis: GridAxis;
@@ -8,20 +9,15 @@ interface UseGridResizeParams {
     getGrid: () => HTMLElement | null;
     onCommit: (index: number, sizes: [number, number]) => void;
 }
-export interface GridResize {
-    /** Callback-ref для ручки: `useDragAndDropEffect` принимает элемент, а не ref. */
-    setHandle: (element: HTMLElement | null) => void;
-    dragging: boolean;
-}
 /**
  * Перетаскивание границы между двумя соседними треками.
  *
- * Во время жеста раскладка меняется ИНЛАЙН-стилем на самом гриде, без обновления состояния:
- * каждый `mousemove` иначе перерисовывал бы всё поддерево сетки. В конфиг доли уходят один раз,
- * на отпускание мыши.
+ * Сам жест — общий {@link useResizeDrag}: он же двигает и границы колонок таблицы, поэтому
+ * ощущаются они одинаково. Здесь остаётся только грид-специфичное: во время жеста раскладка
+ * меняется ИНЛАЙН-стилем на самом гриде, а в конфиг доли уходят один раз, на отпускание мыши.
  *
- * Пиксельный снимок треков берётся однократно на `mousedown` — если пересчитывать его на каждом
+ * Пиксельный снимок треков берётся однократно на нажатии — если пересчитывать его на каждом
  * шаге уже после применения новых долей, округление `fr → px → fr` даёт дрейф границы.
  */
-export declare const useGridResize: ({ axis, index, sizes, getGrid, onCommit }: UseGridResizeParams) => GridResize;
+export declare const useGridResize: ({ axis, index, sizes, getGrid, onCommit }: UseGridResizeParams) => ResizeDrag;
 export {};

package/dist/components/Dashboard/hooks/index.d.ts

@@ -28,6 +28,7 @@ export * from './useGlobalContext';
 export * from './useHeaderRender';
 export * from './useHideIfEmptyDataSource';
 export * from './useProjectDashboardInit';
+export * from './useResizeDrag';
 export * from './useRelatedDataSourceAttributes';
 export * from './useRenderElement';
 export * from './useResizeBox';

package/dist/components/Dashboard/hooks/useResizeDrag.d.ts

@@ -0,0 +1,29 @@
+interface UseResizeDragParams<TState> {
+    /**
+     * Снимок на нажатии: всё, от чего считается жест. Возвращает `null` — жест не начинается
+     * (например, тянуть нечего).
+     *
+     * Снимок берётся один раз именно здесь: пересчёт на каждом шаге уже по применённым размерам
+     * копит округление и уводит границу от курсора.
+     */
+    onStart: (event: MouseEvent) => TState | null;
+    /** Шаг жеста. Рисует предпросмотр прямо в DOM — состояние на каждое движение не трогаем. */
+    onMove: (state: TState, event: MouseEvent) => void;
+    /** Конец жеста: снять предпросмотр и записать результат один раз. */
+    onEnd: (state: TState, event: MouseEvent) => void;
+}
+export interface ResizeDrag {
+    /** Callback-ref для ручки: `useDragAndDropEffect` принимает элемент, а не ref. */
+    setHandle: (element: HTMLElement | null) => void;
+    dragging: boolean;
+}
+/**
+ * Перетаскивание границы: подписка на ручку, снимок на старте, предпросмотр на движении,
+ * запись результата на отпускании.
+ *
+ * Общий для сетки дашборда и колонок таблицы. Различаются они только тем, что именно меряют и
+ * куда пишут; сам жест обязан ощущаться одинаково — включая то, что мышь ведут по документу, а
+ * не по самой ручке, и отпускание за пределами окна тоже завершает жест.
+ */
+export declare const useResizeDrag: <TState>({ onStart, onMove, onEnd }: UseResizeDragParams<TState>) => ResizeDrag;
+export {};