@evergis/react 4.0.129 → 4.0.130

package/dist/index.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
 var uilibGl = require('@evergis/uilib-gl');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var styled = require('styled-components');
 var charts = require('@evergis/charts');
 var api = require('@evergis/api');
 var lodash = require('lodash');
@@ -30,6 +30,45 @@ var xterm = require('@xterm/xterm');
 var addonFit = require('@xterm/addon-fit');
 require('@xterm/xterm/css/xterm.css');
 
+/**
+ * Кнопка «добавить»: серая скруглённая, со значком и подписью. Общая на весь дашборд — вложения
+ * и таблица структурированных данных добавляют одинаковой кнопкой, разница только в значке.
+ *
+ * Размеры сняты с макета (все — в половину его пикселей, макет снят на удвоенной плотности):
+ * высота 24, поля 10, просвет между значком и подписью 6, значок 14, подпись 14.
+ *
+ * Скругление и ширина по содержимому — от самого `IconButton`: он скруглён по умолчанию, а с
+ * подписью в детях перестаёт держать фиксированную ширину. Значок ужат до 0.875rem: свой 1rem
+ * он заполняет краями, и на макете кружок мельче подписи, а не вровень с ней.
+ *
+ * Подпись темнее значка: `IconButton` красит и то и другое цветом иконки, но в макете подпись —
+ * обычный текст (`textPrimary`), а приглушён только значок.
+ */
+const AddButtonRow = styled(uilibGl.IconButton).withConfig({ displayName: "AddButtonRow", componentId: "sc-3ytj1o" }) `
+  padding: 0 0.625rem;
+  height: 1.5rem;
+  background-color: ${({ theme }) => theme.palette.elementDark};
+  font-size: 0.875rem;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.elementDeep};
+  }
+
+  ${uilibGl.Icon} {
+    width: 0.875rem;
+    height: 0.875rem;
+
+    &:after {
+      font-size: 0.875rem;
+    }
+  }
+
+  ${uilibGl.IconButtonInnerChild} {
+    margin-left: 0.375rem;
+    color: ${({ theme }) => theme.palette.textPrimary};
+  }
+`;
+
 const AddFeatureButton = ({ title, icon = "feature_add" /* , layerName, geometryType*/ }) => {
     // const [, handleAddFeature] = useFeatureCreator(layerName, geometryType);
     const handleAddFeature = () => { };
@@ -8735,19 +8774,10 @@ const ShowMoreButton$1 = styled.div.withConfig({ displayName: "ShowMoreButton",
 const AddButtonContainer = styled.div.withConfig({ displayName: "AddButtonContainer", componentId: "sc-1yphz1r" }) `
   margin-top: 0.75rem;
 `;
-const AddButtonRow = styled(uilibGl.IconButton).withConfig({ displayName: "AddButtonRow", componentId: "sc-b7dwfu" }) `
-  padding: 0 0.75rem;
-  height: 1.5rem;
-  background-color: ${({ theme }) => theme.palette.elementDark};
-
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.elementDeep};
-  }
-`;
-const HiddenFileInput = styled.input.withConfig({ displayName: "HiddenFileInput", componentId: "sc-kgi0m7" }) `
+const HiddenFileInput = styled.input.withConfig({ displayName: "HiddenFileInput", componentId: "sc-3apzla" }) `
   display: none;
 `;
-const LinkDialogContent = styled.div.withConfig({ displayName: "LinkDialogContent", componentId: "sc-vrozu8" }) `
+const LinkDialogContent = styled.div.withConfig({ displayName: "LinkDialogContent", componentId: "sc-1kihzpg" }) `
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -10938,6 +10968,9 @@ const StructuredDataActions = styled(uilibGl.Flex).withConfig({ displayName: "St
 /**
  * Область представления. Прокручивается внутри себя, чтобы длинная таблица не растягивала
  * контейнер за пределы отведённой ему ячейки; `min-height: 0` разрешает flex-ребёнку сжиматься.
+ *
+ * Собственный бокс таблицы (`options.width`/`height` представления) живёт внутри и на эту
+ * прокрутку не влияет: он ограничивает саму таблицу, а не отведённое контейнером место.
  */
 const StructuredDataView = styled(uilibGl.Flex).withConfig({ displayName: "StructuredDataView", componentId: "sc-1ws3t0d" }) `
   flex-direction: column;
@@ -10954,6 +10987,33 @@ const StructuredDataView = styled(uilibGl.Flex).withConfig({ displayName: "Struc
  */
 const StructuredDataContext = React.createContext(null);
 
+/** Слот представления: единственный ребёнок контейнера, рисующий данные (элемент `table`). */
+const STRUCTURED_DATA_VIEW_SLOT = "data";
+/**
+ * Типы атрибутов с редактором ячейки. Атрибут любого другого типа показывается только на чтение,
+ * даже если помечен `isEditable: true` — редактора для него нет.
+ */
+const EDITABLE_ATTRIBUTE_TYPES = [
+    api.AttributeType.String,
+    api.AttributeType.Int32,
+    api.AttributeType.Int64,
+    api.AttributeType.Double,
+    api.AttributeType.Boolean,
+    api.AttributeType.DateTime,
+];
+/** Типы, для которых ячейка редактируется числовым инпутом. */
+const NUMBER_EDITOR_TYPES = [
+    api.AttributeType.Int32,
+    api.AttributeType.Int64,
+    api.AttributeType.Double,
+];
+/** Типы, значение которых хранится целым числом — дробную часть в них не пускаем. */
+const INTEGER_ATTRIBUTE_TYPES = [api.AttributeType.Int32, api.AttributeType.Int64];
+/** Тип атрибута, когда его не задали ни конфиг, ни источник. */
+const DEFAULT_ATTRIBUTE_TYPE = api.AttributeType.String;
+/** Сколько миллисекунд висит нотификация об ошибке записи. */
+const SAVE_ERROR_DURATION = 5000;
+
 /**
  * Оставляет от произвольного набора свойств только атрибуты схемы. Отсутствующие добавляет
  * как `null`: строка всегда имеет одинаковый набор ключей, иначе представление и
@@ -10991,8 +11051,9 @@ const getEditableProperties = (row, schema) => schema
 /**
  * Строки черновика → значение фильтра `valueType: "features"`.
  *
- * В `properties` попадают ВСЕ атрибуты схемы, а не только показанные колонками: схема и вид
- * разделены, и вид не должен резать данные. Геометрия не поддерживается — `geometry: null`.
+ * В `properties` попадает ровно схема: значения по её атрибутам, включая незаполненные. Лишние
+ * ключи черновика (пришли из источника, остались от прежней схемы) наружу не уходят, а объявленный
+ * атрибут уходит всегда. Геометрия не поддерживается — `geometry: null`.
  */
 const toFeaturesFilterValue = (rows, schema) => ({
     type: "FeatureCollection",
@@ -11041,14 +11102,17 @@ const useStructuredDataDraft = ({ schema, dataSource, hasDataSource, filterValue
     }, [applyBaseline, features, hasDataSource, schema]);
     // Ручная структура гидратируется из фильтра один раз: дальше значение фильтра пишем мы сами,
     // и повторная гидратация только пересоздавала бы ключи строк.
+    //
+    // Флаг взводится по факту гидратации, а не авансом: значение может приехать позже схемы
+    // (восстановленный выбор пользователя — асинхронно, в отличие от `defaultValue` из конфига),
+    // и окно не должно сгорать на пустом первом рендере. Грязный черновик значение не затирает.
     React.useEffect(() => {
-        if (hasDataSource || hydrated.current || !schema.length) {
+        const canHydrate = !hasDataSource && !hydrated.current && !dirtyRef.current && !!schema.length;
+        if (!canHydrate || !isFeaturesFilterValue(filterValue)) {
             return;
         }
         hydrated.current = true;
-        if (isFeaturesFilterValue(filterValue)) {
-            applyBaseline(fromFeaturesFilterValue(filterValue, schema));
-        }
+        applyBaseline(fromFeaturesFilterValue(filterValue, schema));
     }, [applyBaseline, filterValue, hasDataSource, schema]);
     const changeCell = React.useCallback((key, attributeName, value) => {
         setRows(current => current.map(row => row.key === key
@@ -11071,36 +11135,16 @@ const useStructuredDataDraft = ({ schema, dataSource, hasDataSource, filterValue
         }, []));
     }, []);
     const reset = React.useCallback(() => setRows(baseline.current), []);
-    const commitSaved = React.useCallback((next) => applyBaseline(next), [applyBaseline]);
+    const commitSaved = React.useCallback((next) => {
+        // Сохранённое состояние — наше: значение фильтра теперь пишем мы, и вернувшееся из него
+        // обновление не должно пересоздавать ключи уже показанных строк.
+        hydrated.current = true;
+        applyBaseline(next);
+    }, [applyBaseline]);
     const visibleRows = React.useMemo(() => rows.filter(({ state }) => state !== "deleted"), [rows]);
     return { rows, visibleRows, dirty, changeCell, addRow, deleteRow, reset, commitSaved };
 };
 
-/**
- * Типы атрибутов с редактором ячейки. Атрибут любого другого типа показывается только на чтение,
- * даже если помечен `isEditable: true` — редактора для него нет.
- */
-const EDITABLE_ATTRIBUTE_TYPES = [
-    api.AttributeType.String,
-    api.AttributeType.Int32,
-    api.AttributeType.Int64,
-    api.AttributeType.Double,
-    api.AttributeType.Boolean,
-    api.AttributeType.DateTime,
-];
-/** Типы, для которых ячейка редактируется числовым инпутом. */
-const NUMBER_EDITOR_TYPES = [
-    api.AttributeType.Int32,
-    api.AttributeType.Int64,
-    api.AttributeType.Double,
-];
-/** Типы, значение которых хранится целым числом — дробную часть в них не пускаем. */
-const INTEGER_ATTRIBUTE_TYPES = [api.AttributeType.Int32, api.AttributeType.Int64];
-/** Тип атрибута, когда его не задали ни конфиг, ни источник. */
-const DEFAULT_ATTRIBUTE_TYPE = api.AttributeType.String;
-/** Сколько миллисекунд висит нотификация об ошибке записи. */
-const SAVE_ERROR_DURATION = 5000;
-
 /**
  * Применяет черновик к слою источника: удаление → обновление → создание.
  *
@@ -11267,13 +11311,19 @@ const useStructuredDataSchema = (type, elementConfig) => {
  * Вид источника на права правки не влияет — от него зависит только адресат «Сохранить». Слой
  * принимает запись через features-API, источник без `layerName` (EQL, python-скрипт, внешний
  * url) не принимает ничего, и правка такой таблицы уходит только в фильтр.
+ *
+ * Значение фильтра читается так же, как его читают остальные потребители дашборда: выбор
+ * пользователя, а пока его нет — `defaultValue` из конфига фильтра. Общего стейта, залитого
+ * дефолтами, в дашборде нет, поэтому фолбэк делает каждый потребитель сам.
  */
 const useStructuredData = (type, elementConfig) => {
     const { filters } = useWidgetContext(type);
+    const { currentPage } = useWidgetPage(type);
     const { relatedDataSource, filterName, editMode } = elementConfig?.options || {};
     const { schema, dataSource, layerName } = useStructuredDataSchema(type, elementConfig);
     const hasDataSource = !!relatedDataSource;
-    const filterValue = filterName ? filters?.[filterName]?.value : undefined;
+    const configFilter = React.useMemo(() => getConfigFilter(filterName, currentPage?.filters), [currentPage?.filters, filterName]);
+    const filterValue = React.useMemo(() => (filterName ? filters?.[filterName]?.value ?? configFilter?.defaultValue : undefined), [configFilter?.defaultValue, filterName, filters]);
     const { rows, visibleRows, dirty, changeCell, addRow, deleteRow, reset, commitSaved } = useStructuredDataDraft({
         schema,
         dataSource,
@@ -11346,7 +11396,7 @@ const StructuredDataContainer = React.memo(({ type, elementConfig, isVisible, re
     if (hasError) {
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig?.templateName });
     }
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [jsxRuntime.jsx(StructuredDataView, { children: jsxRuntime.jsx(StructuredDataContext.Provider, { value: contextValue, children: renderElement({ id: "data" }) }) }), canEdit && (jsxRuntime.jsxs(StructuredDataToolbar, { children: [jsxRuntime.jsx(StructuredDataActions, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "plus", primary: true, disabled: saving, onClick: onAddRow, children: t("structuredData.addRow", { ns: "dashboard", defaultValue: "Добавить строку" }) }) }), dirty && (jsxRuntime.jsxs(StructuredDataActions, { children: [jsxRuntime.jsx(uilibGl.FlatButton, { disabled: saving, onClick: onCancel, children: t("actions.cancel", { ns: "common", defaultValue: "Отменить" }) }), jsxRuntime.jsx(uilibGl.RaisedButton, { primary: true, disabled: saving, onClick: onSave, children: t("actions.save", { ns: "common", defaultValue: "Сохранить" }) })] }))] }))] })), jsxRuntime.jsx(DeleteRowDialog, { isOpen: isDeleteConfirmOpen, isSourceRow: isDeletingSourceRow, onConfirm: onDeleteConfirm, onCancel: onDeleteCancel })] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [jsxRuntime.jsx(StructuredDataView, { children: jsxRuntime.jsx(StructuredDataContext.Provider, { value: contextValue, children: renderElement({ id: STRUCTURED_DATA_VIEW_SLOT }) }) }), canEdit && (jsxRuntime.jsxs(StructuredDataToolbar, { children: [jsxRuntime.jsx(StructuredDataActions, { children: jsxRuntime.jsx(AddButtonRow, { kind: "feature_add", tabIndex: 0, disabled: saving, onClick: onAddRow, children: t("actions.add", { ns: "common", defaultValue: "Добавить" }) }) }), dirty && (jsxRuntime.jsxs(StructuredDataActions, { children: [jsxRuntime.jsx(uilibGl.IconButton, { error: true, kind: "close", tabIndex: 0, disabled: saving, title: t("actions.cancel", { ns: "common", defaultValue: "Отменить" }), onClick: onCancel }), jsxRuntime.jsx(uilibGl.IconButton, { primary: true, kind: "success", tabIndex: 0, disabled: saving, title: t("actions.save", { ns: "common", defaultValue: "Сохранить" }), onClick: onSave })] }))] }))] })), jsxRuntime.jsx(DeleteRowDialog, { isOpen: isDeleteConfirmOpen, isSourceRow: isDeletingSourceRow, onConfirm: onDeleteConfirm, onCancel: onDeleteCancel })] }));
 });
 
 const TabAnchor = styled.div.withConfig({ displayName: "TabAnchor", componentId: "sc-emqf31" }) `
@@ -14297,28 +14347,86 @@ const ElementSvg = React.memo(({ type, elementConfig, ...rest }) => {
     return (jsxRuntime.jsx(SvgImage, { url: getSvgUrl({ elementConfig, layerInfo, attributes }), width: width, height: height, fontColor: fontColor }));
 });
 
-const TableWrapper = styled.table.withConfig({ displayName: "TableWrapper", componentId: "sc-ymycsi" }) `
-  width: 100%;
-  border-collapse: collapse;
+/**
+ * Насколько тело таблицы заехало под липкую шапку. Пишется на таблицу при прокрутке, читается
+ * стилем тела: ровно на эту величину тело и отсекается.
+ */
+const HEAD_OVERLAP_VARIABLE = "--table-head-overlap";
+/**
+ * Признак времени в шаблоне `stringFormat.format`.
+ *
+ * Варианты времени в конфигурации атрибута — `hh:mm`, `hh:mm tt`, `hh:mm:ss`, `hh:mm:ss tt`
+ * (см. `timeOptions` в `utils/format`), поэтому достаточно найти часы с минутами.
+ */
+const TIME_FORMAT = /hh:mm/;
+/**
+ * Контейнер порталов `@evergis/uilib-gl` — в него попадают выпадающие слои контролов,
+ * в том числе календарь `DatePicker`. Клик по ним DOM-деревом лежит вне ячейки, поэтому
+ * закрытие редактора по клику снаружи обязано этот контейнер пропускать.
+ */
+const PORTAL_ROOT_SELECTOR = "#portal-root";
+
+/**
+ * Собственный бокс таблицы. Без размеров в `options` представления узел ничего не меняет:
+ * таблица растёт под содержимое, а прокручивает лишнее область представления контейнера.
+ *
+ * С размерами бокс становится её скролл-контейнером — и липкая шапка липнет уже к нему.
+ */
+const TableBox = styled.div.withConfig({ displayName: "TableBox", componentId: "sc-19vtvuq" }) `
+  min-width: 0;
+
+  ${sizeCssMixin};
+`;
+/**
+ * Таблица. По умолчанию втискивается в ширину, которую ей дали: колонкам достаётся то, что есть,
+ * а длинные значения режутся многоточием внутри ячейки.
+ *
+ * `$contentWidth` (ширина бокса задана в `options`) переводит её на ширину по содержимому:
+ * колонки встают по своим значениям, предел ячейки снимается, и всё, что не влезло, уходит
+ * в горизонтальную прокрутку бокса. Иначе вышла бы бессмыслица — бокс с прокруткой, а значения
+ * всё равно с многоточием. `min-width` оставляет таблицу растянутой на весь бокс, когда
+ * содержимого на его ширину не набирается.
+ *
+ * Снятый предел ширины ячейки едет вниз css-переменной, а не правилом по `TableCellWrapper`:
+ * ячейка объявлена ниже по файлу, и селектор по ней отсюда попал бы в TDZ.
+ */
+const TableWrapper = styled.table.withConfig({ displayName: "TableWrapper", componentId: "sc-ih9qqq" }) `
+  width: ${({ $contentWidth }) => ($contentWidth ? "max-content" : "100%")};
+  min-width: 100%;
+  /*
+   * Рамки раздельные (со схлопнутым интервалом, поэтому выглядят как схлопнутые). Схлопнутые
+   * рисует сама таблица, а не ячейки, и отсечка тела их не режет: линия строки, уехавшей под
+   * шапку, продолжала бы рисоваться поверх заголовков.
+   */
+  border-collapse: separate;
+  border-spacing: 0;
   font-size: 0.875rem;
+
+  ${({ $contentWidth }) => !!$contentWidth &&
+    styled.css `
+      --table-cell-max-width: none;
+    `};
 `;
 /**
  * Шапка липнет к верху области прокрутки — при длинной таблице заголовки остаются видны.
  *
- * Собственного фона у шапки нет: цвет из палитры не следовал за подложкой контейнера
- * и выделялся белым прямоугольником на любом фоне, отличном от базового.
+ * Своего фона у неё нет и не должно быть: контейнер дашборда красится цветом из конфига, и любой
+ * назначенный шапке цвет остался бы прямоугольником чужого цвета, как только фон контейнера
+ * поменяли. Под шапкой виден фон контейнера, а строки под неё не заезжают — тело отсечено
+ * (см. TableBody и useHeadOverlap).
  */
-const TableHead = styled.thead.withConfig({ displayName: "TableHead", componentId: "sc-pa89d3" }) `
+const TableHead = styled.thead.withConfig({ displayName: "TableHead", componentId: "sc-m8fpi" }) `
   position: sticky;
   top: 0;
   z-index: 1;
 `;
-const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-1f151xj" }) `
+const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-1m6xil2" }) `
   padding: 0.375rem 0.5rem;
   text-align: left;
   font-weight: 600;
   white-space: nowrap;
   color: ${({ theme }) => theme.palette.textSecondary};
+  /* Рамка принадлежит ячейке (рамки раздельные), поэтому едет вместе с липкой шапкой. */
   border-bottom: 1px solid ${({ theme }) => theme.palette.elementDeep};
 
   ${({ $sortable }) => $sortable &&
@@ -14327,25 +14435,50 @@ const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", compo
       user-select: none;
     `}
 `;
-const TableHeadContent = styled.span.withConfig({ displayName: "TableHeadContent", componentId: "sc-19t325s" }) `
+const TableHeadContent = styled.span.withConfig({ displayName: "TableHeadContent", componentId: "sc-8hzcop" }) `
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
 `;
-const TableRow = styled.tr.withConfig({ displayName: "TableRow", componentId: "sc-ios7ko" }) `
-  border-bottom: 1px solid ${({ theme }) => theme.palette.elementDeep};
+/**
+ * Место под значок сортировки. Занято всегда, пока сортировка включена, а сам значок только
+ * прячется: появляясь и исчезая, он менял бы ширину колонки — и таблицу дёргало бы на каждый
+ * клик по заголовку, вместе с телом. Оба направления рисуются значком в 1rem, поэтому
+ * переключение asc/des ширину тоже не трогает.
+ */
+const TableSortSlot = styled.span.withConfig({ displayName: "TableSortSlot", componentId: "sc-z378vf" }) `
+  display: inline-flex;
+  visibility: ${({ $active }) => ($active ? "visible" : "hidden")};
+`;
+/**
+ * Тело таблицы. Отсекается ровно на то, на сколько его накрыла липкая шапка: строки уходят под
+ * её нижнюю кромку и сквозь прозрачную шапку не проступают. Величину пишет {@link useHeadOverlap},
+ * без неё отсечка нулевая и разметка не меняется.
+ */
+const TableBody = styled.tbody.withConfig({ displayName: "TableBody", componentId: "sc-1pxpl5v" }) `
+  clip-path: inset(var(${HEAD_OVERLAP_VARIABLE}, 0px) 0 0 0);
 `;
-const TableCellWrapper = styled.td.withConfig({ displayName: "TableCellWrapper", componentId: "sc-6nb6ny" }) `
+/**
+ * Строка. Разделитель рисуют её ячейки: собственная рамка строки при раздельных рамках не
+ * рисуется вовсе, а при схлопнутых её рисовала бы таблица — и отсечка тела её бы не резала.
+ */
+const TableRow = styled.tr.withConfig({ displayName: "TableRow", componentId: "sc-j62zvd" }) `
+  td {
+    border-bottom: 1px solid ${({ theme }) => theme.palette.elementDeep};
+  }
+`;
+const TableCellWrapper = styled.td.withConfig({ displayName: "TableCellWrapper", componentId: "sc-ziu5rk" }) `
   padding: 0.125rem 0.25rem;
   vertical-align: middle;
-  max-width: 20rem;
+  /* Предел снимает заданная ширина: с колонками по содержимому обрезать значение незачем. */
+  max-width: var(--table-cell-max-width, 20rem);
 `;
 /** Колонка действий: узкая, не растягивается содержимым. */
-const TableActionsCell = styled(TableCellWrapper).withConfig({ displayName: "TableActionsCell", componentId: "sc-1txos2k" }) `
+const TableActionsCell = styled(TableCellWrapper).withConfig({ displayName: "TableActionsCell", componentId: "sc-18w13t3" }) `
   width: 2rem;
   text-align: right;
 `;
-const CellText = styled.div.withConfig({ displayName: "CellText", componentId: "sc-1a95gqm" }) `
+const CellText = styled.div.withConfig({ displayName: "CellText", componentId: "sc-ok630s" }) `
   padding: 0.375rem 0.25rem;
   /* Та же высота строки, что у редактора — иначе строка подпрыгивала бы по вертикали. */
   line-height: 1.25rem;
@@ -14355,9 +14488,12 @@ const CellText = styled.div.withConfig({ displayName: "CellText", componentId: "
 `;
 /**
  * Редактируемая ячейка вне фокуса. Показывает значение по `stringFormat`, а редактор
- * подставляется по клику — иначе форматирование пришлось бы дублировать внутри инпута.
+ * подставляется на фокус — иначе форматирование пришлось бы дублировать внутри инпута.
+ *
+ * Кнопка, а не просто текст, именно ради фокуса: она — таб-стоп ячейки, и Tab по таблице
+ * открывает редактор с курсором внутри.
  */
-const CellButton = styled.button.withConfig({ displayName: "CellButton", componentId: "sc-1rr68am" }) `
+const CellButton = styled.button.withConfig({ displayName: "CellButton", componentId: "sc-98k9cz" }) `
   width: 100%;
   padding: 0.375rem 0.25rem;
   line-height: 1.25rem;
@@ -14376,7 +14512,7 @@ const CellButton = styled.button.withConfig({ displayName: "CellButton", compone
     border-color: ${({ theme }) => theme.palette.elementDeep};
   }
 `;
-const CellPlaceholder = styled.span.withConfig({ displayName: "CellPlaceholder", componentId: "sc-1uhse2n" }) `
+const CellPlaceholder = styled.span.withConfig({ displayName: "CellPlaceholder", componentId: "sc-7tff41" }) `
   color: ${({ theme }) => theme.palette.textSecondary};
 `;
 /**
@@ -14385,11 +14521,11 @@ const CellPlaceholder = styled.span.withConfig({ displayName: "CellPlaceholder",
  * Копия остаётся в потоке и держит ширину колонки ровно такой, какой она была до клика, —
  * иначе таблица дёргалась бы на каждый вход в правку и выход из неё.
  */
-const CellEditor = styled.div.withConfig({ displayName: "CellEditor", componentId: "sc-2pfo4f" }) `
+const CellEditor = styled.div.withConfig({ displayName: "CellEditor", componentId: "sc-qa22du" }) `
   position: relative;
   min-height: 2rem;
 `;
-const CellGhost = styled.span.withConfig({ displayName: "CellGhost", componentId: "sc-16p1jcy" }) `
+const CellGhost = styled.span.withConfig({ displayName: "CellGhost", componentId: "sc-1i1yvb2" }) `
   display: block;
   padding: 0.375rem 0.25rem;
   /* Рамка повторяет CellButton — с ней высота ячейки в правке совпадает с высотой на чтении. */
@@ -14398,7 +14534,7 @@ const CellGhost = styled.span.withConfig({ displayName: "CellGhost", componentId
   white-space: nowrap;
   visibility: hidden;
 `;
-const CellField = styled.div.withConfig({ displayName: "CellField", componentId: "sc-1wuahyj" }) `
+const CellField = styled.div.withConfig({ displayName: "CellField", componentId: "sc-1ww3875" }) `
   position: absolute;
   inset: 0;
   display: flex;
@@ -14413,7 +14549,7 @@ const CellField = styled.div.withConfig({ displayName: "CellField", componentId:
     min-width: 0;
   }
 `;
-const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-g64r9u" }) `
+const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-1vamijg" }) `
   padding: 0.75rem 0.25rem;
   color: ${({ theme }) => theme.palette.textSecondary};
 `;
@@ -14433,38 +14569,60 @@ const isSameCellValue = (next, current, type) => {
 };
 
 /**
- * Признак времени в шаблоне `stringFormat.format`.
+ * Правка одной ячейки.
  *
- * Варианты времени в конфигурации атрибута — `hh:mm`, `hh:mm tt`, `hh:mm:ss`, `hh:mm:ss tt`
- * (см. `timeOptions` в `utils/format`), поэтому достаточно найти часы с минутами.
- */
-const TIME_FORMAT = /hh:mm/;
-/**
- * Контейнер порталов `@evergis/uilib-gl` — в него попадают выпадающие слои контролов,
- * в том числе календарь `DatePicker`. Клик по ним DOM-деревом лежит вне ячейки, поэтому
- * закрытие редактора по клику снаружи обязано этот контейнер пропускать.
- */
-const PORTAL_ROOT_SELECTOR = "#portal-root";
-
-/**
- * Режим правки одной ячейки: открывается кликом по значению, закрывается кликом снаружи.
+ * Открывает её фокус, а не клик: по таблице ходят Tab-ом, и на каждой ячейке сразу нужно поле
+ * с курсором — кнопка, требующая ещё и Enter, ломала бы весь проход.
  *
- * Закрывать по `blur` нельзя: `DatePicker` уводит фокус из поля уже на клике по иконке
- * календаря — редактор исчезал бы раньше, чем календарь успевал открыться. Поэтому слушаем
- * `mousedown` на документе, а клики внутри портала (`#portal-root`) считаем «своими»:
- * выпадающие слои контролов uilib живут именно там, вне DOM-поддерева ячейки.
+ * Поэтому состояний три. `focused` — ячейка под фокусом с закрытым редактором, состояние после
+ * Enter/Escape: фокус возвращается на кнопку, но правку заново не открывает (иначе выйти из неё
+ * было бы нечем), а Tab с неё идёт дальше по таблице.
+ *
+ * Закрывать правку по любому уходу фокуса нельзя: DatePicker уводит его из поля уже на клике по
+ * иконке календаря — редактор исчезал бы раньше, чем календарь успевал открыться. Клавиатурный
+ * уход видно по `relatedTarget` (фокус ушёл на соседнюю ячейку), мышиный ловит `mousedown`
+ * снаружи. Клики внутри портала (`#portal-root`) считаем «своими»: выпадающие слои контролов
+ * uilib живут именно там, вне DOM-поддерева ячейки.
  */
 const useCellEditing = () => {
-    const [editing, setEditing] = React.useState(false);
+    const [mode, setMode] = React.useState("idle");
+    const buttonRef = React.useRef(null);
     const editorRef = React.useRef(null);
-    const startEditing = React.useCallback(() => setEditing(true), []);
-    // С клавиатуры правка закрывается там же, где и мышью: Enter подтверждает, Escape уходит
-    // из поля. Значение уже записано в черновик на каждый ввод, отдельного «применить» нет.
-    const onKeyDown = React.useCallback(({ key }) => {
-        if (key === "Enter" || key === "Escape") {
-            setEditing(false);
+    const editing = mode === "editing";
+    // Фокус на закрытой ячейке — это уже правка. Из `focused` не открываем: фокус туда только что
+    // вернули из редактора, и Escape перестал бы работать.
+    const onFocus = React.useCallback(() => setMode(current => (current === "idle" ? "editing" : current)), []);
+    // Переход в правку убирает саму кнопку — её прощальный blur эту правку закрывать не должен.
+    const onBlur = React.useCallback(() => setMode(current => (current === "editing" ? current : "idle")), []);
+    // Клик открывает правку и тогда, когда фокус на ячейке уже стоит — то есть после Enter/Escape.
+    const onClick = React.useCallback(() => setMode("editing"), []);
+    // Enter и Escape закрывают редактор, оставляя фокус на ячейке: значение записано в черновик
+    // на каждый ввод, отдельного «применить» нет.
+    const onEditorKeyDown = React.useCallback((event) => {
+        if (event.key !== "Enter" && event.key !== "Escape") {
+            return;
+        }
+        // Гасим действие по умолчанию: у Enter это «нажать то, что в фокусе», а фокус браузер смотрит
+        // уже после обработчиков — к тому моменту он вернулся на кнопку ячейки, и правка открылась бы
+        // заново тем же нажатием.
+        event.preventDefault();
+        setMode("focused");
+    }, []);
+    const onEditorBlur = React.useCallback(({ relatedTarget }) => {
+        const inside = editorRef.current?.contains(relatedTarget) || !!relatedTarget?.closest(PORTAL_ROOT_SELECTOR);
+        // Фокус «в никуда» уходом не считаем: так ведут себя внутренности DatePicker.
+        if (!relatedTarget || inside) {
+            return;
         }
+        setMode("idle");
     }, []);
+    // Выход из редактора возвращает фокус ячейке: иначе он падал бы в body, и следующий Tab пошёл
+    // бы с начала страницы.
+    React.useEffect(() => {
+        if (mode === "focused") {
+            buttonRef.current?.focus();
+        }
+    }, [mode]);
     React.useEffect(() => {
         if (!editing) {
             return undefined;
@@ -14474,24 +14632,26 @@ const useCellEditing = () => {
             if (editorRef.current?.contains(node) || node?.closest?.(PORTAL_ROOT_SELECTOR)) {
                 return;
             }
-            setEditing(false);
+            setMode("idle");
         };
         document.addEventListener("mousedown", onDocumentMouseDown);
         return () => document.removeEventListener("mousedown", onDocumentMouseDown);
     }, [editing]);
-    return { editing, editorRef, startEditing, onKeyDown };
+    const buttonProps = React.useMemo(() => ({ ref: buttonRef, onFocus, onBlur, onClick }), [onBlur, onClick, onFocus]);
+    const editorProps = React.useMemo(() => ({ ref: editorRef, onBlur: onEditorBlur, onKeyDown: onEditorKeyDown }), [onEditorBlur, onEditorKeyDown]);
+    return { editing, buttonProps, editorProps };
 };
 
 /**
  * Ячейка таблицы.
  *
- * Вне фокуса значение всегда показано через `stringFormat` — редактор подставляется по клику.
+ * Вне фокуса значение всегда показано через `stringFormat`, редактор подставляется на фокус.
  * Иначе форматирование (округление, разряды, единицы) пришлось бы дублировать внутри инпута,
  * а вводить в отформатированное поле нельзя.
  */
 const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     const { t, language } = useGlobalContext();
-    const { editing, editorRef, startEditing, onKeyDown } = useCellEditing();
+    const { editing, buttonProps, editorProps } = useCellEditing();
     const { attributeName, type, isEditable, stringFormat } = attribute;
     const value = row.properties[attributeName];
     const handleChange = React.useCallback((next) => {
@@ -14520,22 +14680,53 @@ const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
         return jsxRuntime.jsx(CellText, { title: formatted, children: formatted || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) });
     }
     if (!editing) {
-        return (jsxRuntime.jsx(CellButton, { type: "button", onClick: startEditing, children: formatted || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) }));
+        return (jsxRuntime.jsx(CellButton, { type: "button", ...buttonProps, children: formatted || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) }));
     }
     const renderEditor = () => {
         if (type === api.AttributeType.DateTime) {
-            return (jsxRuntime.jsx(uilibGl.DatePicker, { value: dateValue, locale: uilibGl.getLocale(language), withTime: withTime, withHeader: true, width: "100%", onChange: date => handleChange(date.toISOString()) }));
+            return (jsxRuntime.jsx(uilibGl.DatePicker, { focus: true, value: dateValue, locale: uilibGl.getLocale(language), withTime: withTime, withHeader: true, width: "100%", onChange: date => handleChange(date.toISOString()) }));
         }
         if (NUMBER_EDITOR_TYPES.includes(type)) {
             return (jsxRuntime.jsx(uilibGl.NumberInput, { autoFocus: true, value: value === null || value === undefined ? null : Number(value), width: "100%", numeralDecimalScale: INTEGER_ATTRIBUTE_TYPES.includes(type) ? 0 : undefined, onChange: next => handleChange(next) }));
         }
         return (jsxRuntime.jsx(uilibGl.Input, { autoFocus: true, value: value === null || value === undefined ? "" : String(value), width: "100%", onChange: ({ target }) => handleChange(target.value) }));
     };
-    return (jsxRuntime.jsxs(CellEditor, { ref: editorRef, onKeyDown: onKeyDown, children: [jsxRuntime.jsx(CellGhost, { children: formatted || "—" }), jsxRuntime.jsx(CellField, { children: renderEditor() })] }));
+    return (jsxRuntime.jsxs(CellEditor, { ...editorProps, children: [jsxRuntime.jsx(CellGhost, { children: formatted || "—" }), jsxRuntime.jsx(CellField, { children: renderEditor() })] }));
 });
 
 const ContainerLoading = () => (jsxRuntime.jsx(uilibGl.Flex, { alignContent: "center", justifyContent: "center", width: "100%", children: jsxRuntime.jsx(uilibGl.CircularProgress, { diameter: 1.5, mono: true }) }));
 
+/**
+ * Отсечка тела таблицы по нижней кромке липкой шапки.
+ *
+ * Шапка прозрачная — фон контейнера виден сквозь неё, и красить её нечем: цвет контейнера задаётся
+ * конфигом и меняется. Значит, строки не должны под неё заезжать в принципе. Тело для этого
+ * отсекается (`clip-path`) ровно на то, на сколько шапка его накрыла: низ шапки минус верх тела.
+ *
+ * Разница считается по факту, а не по величине прокрутки: она одинаково верна и когда прокручивает
+ * собственный бокс таблицы, и когда её прокручивает область представления контейнера. Пока
+ * не прокручено, низ шапки совпадает с верхом тела — отсекать нечего.
+ *
+ * Прокрутка не всплывает, но проходит фазу перехвата, поэтому слушаем документ: какой именно
+ * предок прокручивается, знать не нужно.
+ */
+const useHeadOverlap = (table) => {
+    React.useLayoutEffect(() => {
+        if (!table) {
+            return undefined;
+        }
+        const update = () => {
+            const head = table.tHead?.getBoundingClientRect();
+            const body = table.tBodies[0]?.getBoundingClientRect();
+            const overlap = head && body ? Math.max(0, head.bottom - body.top) : 0;
+            table.style.setProperty(HEAD_OVERLAP_VARIABLE, `${overlap}px`);
+        };
+        update();
+        document.addEventListener("scroll", update, { capture: true, passive: true });
+        return () => document.removeEventListener("scroll", update, { capture: true });
+    }, [table]);
+};
+
 const compareValues = (left, right, type) => {
     if (NUMERIC_ATTRIBUTE_TYPES.includes(type)) {
         return Number(left) - Number(right);
@@ -14580,28 +14771,66 @@ const getNextSort = (current, attributeName) => {
 };
 
 /**
- * Вид таблицы: набор и порядок колонок из `columnNames` плюс локальная сортировка.
+ * Css собственного бокса таблицы: размер из `options` представления плюс прокрутка того,
+ * что в этот размер не влез.
+ *
+ * Размеров нет — нет и бокса: таблица занимает столько, сколько просит содержимое, а лишнее,
+ * как и раньше, уходит в прокрутку области представления контейнера.
+ *
+ * Проценты работают только по ширине. Между областью представления и таблицей стоит блочная
+ * обёртка элемента (`ElementValueWrapper`) с высотой `auto`, и `height: "100%"` в ней не
+ * разрешается — вертикальный предел задают конкретные единицы (`240`, `"20rem"`, `"50vh"`),
+ * а «занять всю выданную высоту» остаётся за `options.height` контейнера.
+ *
+ * `contain: inline-size` идёт в пару к fill-ширине: сама по себе она предком не ограничена
+ * (процент от раскладки, которая меряет себя содержимым, вырождается в `auto`), и таблица
+ * распирала бы ряд плиток или трек `auto` изнутри. С containment вклад бокса в ширину предка
+ * обнуляется: ширину он берёт снаружи, а внутрь по ней не смотрят.
+ */
+const getTableBoxStyle = (width, height) => {
+    if (width == null && height == null) {
+        return undefined;
+    }
+    return {
+        ...getWrapperSizeStyle({ width, height, overflow: "auto" }),
+        ...(isFillSize(width) && { contain: "inline-size" }),
+    };
+};
+
+/**
+ * Вид таблицы: колонки плюс локальная сортировка.
+ *
+ * Набор и порядок колонок — это схема контейнера (`attributesDescription`) как есть: показываем
+ * ровно то, что описано, и в том же порядке. Своего отбора у представления нет — иначе описанный
+ * атрибут и видимая колонка расходились бы, а в фильтр всё равно уходят все атрибуты схемы.
  *
  * Сортировка живёт здесь, а не в контейнере: она ничего не меняет в данных и не должна
  * влиять на порядок строк, уходящих в фильтр.
+ *
+ * `width`/`height` — размер собственного бокса таблицы: он ограничивает её саму и прокручивает
+ * то, что не влезло. Место, отведённое контейнеру, задаётся его же опциями и живёт отдельно.
  */
 const useTableView = (elementConfig) => {
     const context = React.useContext(StructuredDataContext);
-    const { columnNames, sort: sortEnabled } = elementConfig?.options || {};
+    const { sort: sortEnabled, width, height } = elementConfig?.options || {};
     const [sort, setSort] = React.useState(null);
     const schema = context?.schema;
     const rows = context?.rows;
-    const columns = React.useMemo(() => {
-        if (!columnNames?.length) {
-            return schema ?? [];
-        }
-        return columnNames
-            .map(columnName => schema?.find(({ attributeName }) => attributeName === columnName))
-            .filter(Boolean);
-    }, [columnNames, schema]);
+    const columns = React.useMemo(() => schema ?? [], [schema]);
     const sortedRows = React.useMemo(() => sortRows(rows ?? [], sort, schema ?? []), [rows, schema, sort]);
+    const sizeCss = React.useMemo(() => getTableBoxStyle(width, height), [height, width]);
     const onSortToggle = React.useCallback((attributeName) => setSort(current => getNextSort(current, attributeName)), []);
-    return { context, columns, rows: sortedRows, sort, sortEnabled: !!sortEnabled, onSortToggle };
+    return {
+        context,
+        columns,
+        rows: sortedRows,
+        sort,
+        sortEnabled: !!sortEnabled,
+        sizeCss,
+        // Ширина задана — колонки по содержимому: лишнее уходит в прокрутку бокса, а не в многоточие.
+        contentWidth: width != null,
+        onSortToggle,
+    };
 };
 
 /**
@@ -14612,7 +14841,10 @@ const useTableView = (elementConfig) => {
  */
 const ElementTable = React.memo(({ elementConfig }) => {
     const { t } = useGlobalContext();
-    const { context, columns, rows, sort, sortEnabled, onSortToggle } = useTableView(elementConfig);
+    const { context, columns, rows, sort, sortEnabled, sizeCss, contentWidth, onSortToggle } = useTableView(elementConfig);
+    // Узел таблицы держим состоянием, а не ref: отсечка должна встать сразу, как он появится.
+    const [table, setTable] = React.useState(null);
+    useHeadOverlap(table);
     if (!context) {
         return null;
     }
@@ -14625,7 +14857,10 @@ const ElementTable = React.memo(({ elementConfig }) => {
                 defaultValue: "Схема данных не задана",
             }) }));
     }
-    return (jsxRuntime.jsxs(TableWrapper, { children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsxs("tr", { children: [columns.map(({ attributeName, alias, description }) => (jsxRuntime.jsx(TableHeadCell, { title: description || alias, "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: jsxRuntime.jsxs(TableHeadContent, { children: [alias, sort?.attributeName === attributeName && (jsxRuntime.jsx(uilibGl.Icon, { kind: sort.direction === "asc" ? "sorting_asc" : "sorting_des" }))] }) }, attributeName))), context.canEdit && jsxRuntime.jsx(TableHeadCell, {})] }) }), jsxRuntime.jsx("tbody", { children: rows.map(row => (jsxRuntime.jsxs(TableRow, { children: [columns.map(attribute => (jsxRuntime.jsx(TableCellWrapper, { children: jsxRuntime.jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }) }, attribute.attributeName))), context.canEdit && (jsxRuntime.jsx(TableActionsCell, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }));
+    return (jsxRuntime.jsx(TableBox, { "$sizeCss": sizeCss, children: jsxRuntime.jsxs(TableWrapper, { ref: setTable, "$contentWidth": contentWidth, children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsxs("tr", { children: [columns.map(({ attributeName, alias, description }) => {
+                                const sorted = sort?.attributeName === attributeName;
+                                return (jsxRuntime.jsx(TableHeadCell, { title: description || alias, "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: jsxRuntime.jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsxRuntime.jsx(TableSortSlot, { "$active": sorted, children: jsxRuntime.jsx(uilibGl.Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }) }, attributeName));
+                            }), context.canEdit && jsxRuntime.jsx(TableHeadCell, {})] }) }), jsxRuntime.jsx(TableBody, { children: rows.map(row => (jsxRuntime.jsxs(TableRow, { children: [columns.map(attribute => (jsxRuntime.jsx(TableCellWrapper, { children: jsxRuntime.jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }) }, attribute.attributeName))), context.canEdit && (jsxRuntime.jsx(TableActionsCell, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
 });
 
 const TooltipIcon = styled(uilibGl.Icon).withConfig({ displayName: "TooltipIcon", componentId: "sc-1lkxudm" }) `
@@ -17819,6 +18054,7 @@ const DEFAULT_HEATMAP_STYLE = {
 exports.ALIGNMENTS = ALIGNMENTS;
 exports.ALIGN_ITEMS = ALIGN_ITEMS;
 exports.ATTRIBUTE_ICON_ELEMENT_TYPES = ATTRIBUTE_ICON_ELEMENT_TYPES;
+exports.AddButtonRow = AddButtonRow;
 exports.AddFeatureButton = AddFeatureButton;
 exports.AddFeatureContainer = AddFeatureContainer;
 exports.AlertIconContainer = AlertIconContainer;