@evergis/react 4.0.143 → 4.0.145

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/containers/StructuredDataContainer/types.d.ts

@@ -1,4 +1,5 @@
-import { AttributeType } from '@evergis/api';
+import { CSSProperties } from 'react';
+import { AttributeType, StringSubType } from '@evergis/api';
 import { FeatureAttributeValue } from '../../../../types';
 import { ConfigAttributeDescription } from '../../types';
 /** Состояние строки черновика относительно последнего сохранения. */
@@ -22,10 +23,20 @@ export interface DraftRow {
 export interface StructuredDataAttribute {
     attributeName: string;
     type: AttributeType;
+    /** Уточнение строкового типа из конфига: у источника такого поля нет. */
+    subType?: StringSubType;
     alias: string;
     description?: string;
     isEditable: boolean;
     stringFormat?: ConfigAttributeDescription["stringFormat"];
+    /** Ширина колонки в пикселах из конфига. Ниже её колонку не ужимает и раскладка таблицы. */
+    width?: number;
+    /** Ширину колонки разрешено тянуть мышью. */
+    resizable?: boolean;
+    /** Значение переносится по словам, а не режется многоточием. */
+    multiline?: boolean;
+    /** Стиль значений колонки из конфига. */
+    style?: CSSProperties;
 }
 /**
  * Значение {@link StructuredDataContext} — всё, что нужно представлению (`ElementTable`)

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { TableCellProps } from '../types';
+/**
+ * Колонка со вложениями: список файлов прямо в ячейке.
+ *
+ * Тип у атрибута строковый, вложениями его делает `subType: "Attachments"` в схеме контейнера —
+ * поэтому ветка стоит раньше разбора типа и обычных редакторов ячейки.
+ */
+export declare const AttachmentsCell: FC<TableCellProps>;

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

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

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { TableHeadRowProps } from '../types';
+/**
+ * Шапка таблицы: заголовки колонок, сортировка кликом и захват границы для ручной ширины.
+ *
+ * Захват рисуется по разрешению атрибута (`resizable`) и не смотрит на режим правки контейнера:
+ * ширина колонки — это вид, а не данные.
+ */
+export declare const TableHeadRow: FC<TableHeadRowProps>;

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

@@ -16,3 +16,5 @@ export declare const TIME_FORMAT: RegExp;
  * закрытие редактора по клику снаружи обязано этот контейнер пропускать.
  */
 export declare const PORTAL_ROOT_SELECTOR = "#portal-root";
+/** Ниже этой ширины колонку не ужать мышью: уже неё в ячейке не остаётся места под значение. */
+export declare const MIN_COLUMN_WIDTH = 48;

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

@@ -0,0 +1,26 @@
+import { IPreviewImage } from '@evergis/uilib-gl';
+import { Attachment } from '../../../containers/AttachmentContainer/types';
+import { TableCellProps } from '../types';
+/**
+ * Ячейка с вложениями: разбор значения, просмотр, скачивание и правка списка.
+ *
+ * Значение атрибута — строка: файлы приезжают в ней списком JSON, поэтому и обратно в черновик
+ * кладём строку, а не массив — иначе тип ячейки менялся бы от самой правки.
+ *
+ * Добавление здесь только по ссылке. Загрузка с диска требует ресурса-родителя и файлового
+ * api контейнера вложений, а у колонки таблицы ни того, ни другого нет.
+ */
+export declare const useAttachmentsCell: ({ attribute, row, canEdit, onChange }: TableCellProps) => {
+    items: Attachment[];
+    editable: boolean;
+    previewIndex: number;
+    previewImages: IPreviewImage[];
+    isLinkDialogOpen: boolean;
+    onPreview: (link: string) => void;
+    onClosePreview: () => void;
+    onDownload: (_image: IPreviewImage, index: number) => void;
+    onDelete: (link: string) => void;
+    onOpenLinkDialog: () => void;
+    onCloseLinkDialog: () => void;
+    onAddByLink: (url: string) => void;
+};

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

@@ -0,0 +1,19 @@
+import { ResizeDrag } from '../../../hooks/useResizeDrag';
+interface UseColumnResizeParams {
+    /** Позиция колонки: по ней собрано имя переменной, которой колонка задаёт свою ширину. */
+    index: number;
+    onCommit: (width: number) => void;
+}
+/**
+ * Перетаскивание правой границы колонки.
+ *
+ * Жест — общий {@link useResizeDrag}, тот же, что двигает границы ячеек сетки дашборда. Здесь
+ * остаётся только табличное: во время жеста ширина рисуется переменной на самой таблице, а в
+ * состояние уходит один раз, на отпускание мыши. Так шаг жеста меняет одно свойство одного узла,
+ * а не перерисовывает таблицу целиком.
+ *
+ * Стартовая ширина берётся с самой ячейки заголовка: у колонки без `width` её выбрала раскладка
+ * таблицы, и тянуть надо от того, что видно.
+ */
+export declare const useColumnResize: ({ index, onCommit }: UseColumnResizeParams) => ResizeDrag;
+export {};

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

@@ -12,6 +12,9 @@ import { TableSort } from '../types';
  *
  * `width`/`height` — размер собственного бокса таблицы: он ограничивает её саму и прокручивает
  * то, что не влезло. Место, отведённое контейнеру, задаётся его же опциями и живёт отдельно.
+ *
+ * Ширины колонок — тоже вид: конфиг задаёт стартовую, растянутая мышью живёт здесь и в конфиг
+ * не возвращается.
  */
 export declare const useTableView: (elementConfig?: ElementTableConfig) => {
     context: import('../../../containers/StructuredDataContainer/types').StructuredDataContextValue;
@@ -21,5 +24,7 @@ export declare const useTableView: (elementConfig?: ElementTableConfig) => {
     sortEnabled: boolean;
     sizeCss: import('styled-components').CSSObject;
     contentWidth: boolean;
+    columnWidths: Record<string, number>;
     onSortToggle: (attributeName: string) => void;
+    onColumnResize: (attributeName: string, nextWidth: number) => void;
 };

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

@@ -34,6 +34,10 @@ export declare const TableHead: import('styled-components').StyledComponent<"the
 export declare const TableHeadCell: import('styled-components').StyledComponent<"th", any, {
     $sortable?: boolean;
 }, never>;
+/**
+ * Содержимое заголовка. Псевдоним обрезается многоточием, значок сортировки не сжимается:
+ * у колонки с заданной шириной длинный псевдоним иначе выдавил бы значок за край ячейки.
+ */
 export declare const TableHeadContent: import('styled-components').StyledComponent<"span", any, {}, never>;
 /**
  * Место под значок сортировки. Занято всегда, пока сортировка включена, а сам значок только
@@ -58,7 +62,19 @@ export declare const TableRow: import('styled-components').StyledComponent<"tr",
 export declare const TableCellWrapper: import('styled-components').StyledComponent<"td", any, {}, never>;
 /** Колонка действий: узкая, не растягивается содержимым. */
 export declare const TableActionsCell: import('styled-components').StyledComponent<"td", any, {}, never>;
-export declare const CellText: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * Как значение ведёт себя, когда не помещается в колонку: режется многоточием в одну строку
+ * или переносится по словам, растягивая строку таблицы вниз (`multiline` атрибута).
+ *
+ * Перенос разрешаем и посреди слова: колонка бывает уже одного длинного слова (ссылка, артикул),
+ * и без этого оно вылезло бы за заданную ширину, сделав её бессмысленной.
+ */
+export declare const cellWrapMixin: import('styled-components').FlattenInterpolation<import('styled-components').ThemedStyledProps<{
+    $multiline?: boolean;
+}, any>>;
+export declare const CellText: import('styled-components').StyledComponent<"div", any, {
+    $multiline?: boolean;
+}, never>;
 /**
  * Редактируемая ячейка вне фокуса. Показывает значение по `stringFormat`, а редактор
  * подставляется на фокус — иначе форматирование пришлось бы дублировать внутри инпута.
@@ -66,7 +82,9 @@ export declare const CellText: import('styled-components').StyledComponent<"div"
  * Кнопка, а не просто текст, именно ради фокуса: она — таб-стоп ячейки, и Tab по таблице
  * открывает редактор с курсором внутри.
  */
-export declare const CellButton: import('styled-components').StyledComponent<"button", any, {}, never>;
+export declare const CellButton: import('styled-components').StyledComponent<"button", any, {
+    $multiline?: boolean;
+}, never>;
 export declare const CellPlaceholder: import('styled-components').StyledComponent<"span", any, {}, never>;
 /**
  * Ячейка в режиме правки: редактор лежит поверх невидимой копии значения.
@@ -75,6 +93,16 @@ export declare const CellPlaceholder: import('styled-components').StyledComponen
  * иначе таблица дёргалась бы на каждый вход в правку и выход из неё.
  */
 export declare const CellEditor: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const CellGhost: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CellGhost: import('styled-components').StyledComponent<"span", any, {
+    $multiline?: boolean;
+}, never>;
 export declare const CellField: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * Ячейка со вложениями. Список идёт колонкой, кнопка добавления — под ним, поэтому строка растёт
+ * ровно на столько, сколько файлов в ней лежит.
+ *
+ * Отступы те же, что у текстовой ячейки (`CellText`): в одном ряду с обычными колонками значения
+ * обязаны стоять на одной линии.
+ */
+export declare const AttachmentsCellBox: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const TableEmpty: import('styled-components').StyledComponent<"div", any, {}, never>;

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

@@ -18,3 +18,19 @@ export interface TableCellProps {
     canEdit: boolean;
     onChange: (key: string, attributeName: string, value: FeatureAttributeValue) => void;
 }
+export interface TableColumnResizerProps {
+    /** Позиция колонки: по ней собрано имя переменной, которой колонка задаёт свою ширину. */
+    index: number;
+    onCommit: (width: number) => void;
+}
+export interface TableHeadRowProps {
+    columns: StructuredDataAttribute[];
+    sort: TableSort | null;
+    sortEnabled: boolean;
+    /** Ширина каждой колонки: растянутая мышью, иначе из конфига. `undefined` — на усмотрение раскладки. */
+    columnWidths: Record<string, number | undefined>;
+    /** У таблицы есть колонка действий — шапке нужна пустая ячейка над ней. */
+    withActionsColumn: boolean;
+    onSortToggle: (attributeName: string) => void;
+    onColumnResize: (attributeName: string, width: number) => void;
+}

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

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

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

@@ -499,11 +499,30 @@ export interface ConfigDataSourceAttribute {
 export interface ConfigAttributeDescription {
     attributeName: string;
     type?: AttributeType;
+    /**
+     * Уточнение строкового типа. Отдельного `AttributeType` под вложения нет: файлы приходят
+     * строкой, и разбирать её как список вложений велит именно `subType: "Attachments"`.
+     */
+    subType?: StringSubType;
     alias?: string;
     description?: string;
     /** Значение атрибута правится в ячейке. `false` — только чтение, в features-API не передаётся. */
     isEditable?: boolean;
     stringFormat?: AttributeFormatConfiguration;
+    /**
+     * Ширина колонки в пикселах. Задана — колонка её и занимает; не задана — ширину выбирает
+     * раскладка таблицы по содержимому.
+     */
+    width?: number;
+    /** Ширину колонки можно тянуть мышью. Не зависит от `options.editMode` контейнера. */
+    resizable?: boolean;
+    /** Значение переносится на следующую строку вместо обрезки многоточием, высота строки растёт. */
+    multiline?: boolean;
+    /**
+     * Стиль значений колонки: семейство, размер, цвет и начертание шрифта. Своего узла-элемента
+     * у колонки нет, поэтому стиль живёт прямо у описания атрибута.
+     */
+    style?: CSSProperties;
 }
 export interface ConfigDataSource {
     name: string;