@evergis/react 4.0.148 → 4.0.150

package/dist/index.js

@@ -3849,7 +3849,7 @@ const hue2rgb = (p, q, t) => {
  */
 const toHex = (value) => {
     const hex = Math.round(value * 255).toString(16);
-    return hex.padStart(2, '0');
+    return hex.padStart(2, "0");
 };
 /**
  * Adjusts color brightness
@@ -3859,7 +3859,7 @@ const toHex = (value) => {
  */
 const adjustColor = (color, lightnessAdjustment = 5) => {
     // Convert hex to RGB
-    const hex = color.replace('#', '');
+    const hex = color.replace("#", "");
     const r = parseInt(hex.substring(0, 2), 16) / 255;
     const g = parseInt(hex.substring(2, 4), 16) / 255;
     const b = parseInt(hex.substring(4, 6), 16) / 255;
@@ -3901,6 +3901,17 @@ const adjustColor = (color, lightnessAdjustment = 5) => {
     }
     return `#${toHex(rNew)}${toHex(gNew)}${toHex(bNew)}`;
 };
+const OPAQUE_ALPHA = "ff";
+/**
+ * Цвет в hex: `#rrggbb`, а при неполной непрозрачности — `#rrggbbaa`.
+ *
+ * Полностью непрозрачная альфа отбрасывается: в значении она ничего не уточняет, а строку
+ * удлиняет — и в конфиге, и в данных удобнее короткая запись.
+ */
+const colorToHex = (color) => {
+    const hex = color.toString("hex");
+    return hex.slice(HEX_RRGGBB_LENGTH).toLowerCase() === OPAQUE_ALPHA ? hex.slice(0, HEX_RRGGBB_LENGTH) : hex;
+};
 
 const NO_CONTENT_VALUE = "—";
 exports.DateFormat = void 0;
@@ -5585,12 +5596,22 @@ const ServerNotificationsProvider = ({ url, initialized, apiClient, children })
         }, children: children }));
 };
 
+const INTERPOLATION_PATTERN = /\{\{\s*(\w+)\s*\}\}/g;
+/**
+ * Подставляет в строку перевода переменные вида `{{total}}` — так, как это делает i18next.
+ *
+ * Нужна запасному переводчику, когда хост не передал свой `t` (например, в Storybook): без неё
+ * `defaultValue` с переменными уходит в интерфейс как есть. Переменная без значения остаётся
+ * в тексте, чтобы пропуск был виден.
+ */
+const interpolateTranslation = (text, values = {}) => text.replace(INTERPOLATION_PATTERN, (match, name) => values[name] === undefined || values[name] === null ? match : String(values[name]));
+
 const useGlobalContext = () => {
     const { t, language, themeName, api, ewktGeometry, ewktExtent, zoomLevel, projectName, projectAlias, notification } = React.useContext(GlobalContext) || {};
     const translate = React.useCallback((value, options) => {
         if (t)
             return t(value, options);
-        return options?.defaultValue ?? value;
+        return interpolateTranslation(options?.defaultValue ?? value, options);
     }, [t]);
     return React.useMemo(() => ({
         t: translate,
@@ -6016,6 +6037,30 @@ const useAttachmentPreviewImages = ({ items, active, }) => {
     }), [items, blobUrls, failedLinks]);
 };
 
+/**
+ * Вид списка вложений: плитка или строки и сколько файлов из списка показано.
+ *
+ * Общий для контейнера вложений и колонки таблицы: список у них один и тот же, и считать
+ * видимое дважды незачем. Предел приходит числом, а не опциями конфига, — у колонки опций
+ * вида нет, он у неё зашит константой.
+ */
+const useAttachmentsView = ({ items, limit, initialViewMode = "grid", }) => {
+    const [viewMode, setViewMode] = React.useState(initialViewMode);
+    const [showMore, setShowMore] = React.useState(false);
+    const visibleItems = React.useMemo(() => (limit && !showMore ? items.slice(0, limit) : items), [items, limit, showMore]);
+    const hiddenCount = items.length - visibleItems.length;
+    const handleSetViewMode = React.useCallback((mode) => setViewMode(mode), []);
+    return {
+        visibleItems,
+        hiddenCount,
+        hasMore: hiddenCount > 0,
+        showMore,
+        setShowMore,
+        viewMode,
+        setViewMode: handleSetViewMode,
+    };
+};
+
 const useAutoCompleteControl = (items) => {
     const [value, setValue] = React.useState("");
     const [options, setOptions] = React.useState([]);
@@ -8556,9 +8601,23 @@ const AttachmentsViewControls = styled.div.withConfig({ displayName: "Attachment
     font-size: 1rem;
   }
 `;
+/**
+ * Счётчик файлов у подписи — плоский чип в строку подписи.
+ *
+ * Шрифт ставится на текст чипа, а не на корень: текст задаёт себе шрифт шорткатом `font` из темы,
+ * и размер с корня до цифры не доходит — чип выходил высоким, во весь шрифт описания.
+ */
 const AttachmentsCountChip = styled(uilibGl.Chip).withConfig({ displayName: "AttachmentsCountChip", componentId: "sc-117ib6u" }) `
-  padding: 2px 6px;
-  font-size: 0.625rem;
+  && {
+    padding: 0.0625rem 0.25rem;
+    border-radius: 0.75rem;
+  }
+
+  span {
+    font-size: 0.625rem;
+    line-height: 0.75rem;
+    font-weight: bold;
+  }
 `;
 const AttachmentsContent = styled.div.withConfig({ displayName: "AttachmentsContent", componentId: "sc-1j2thff" }) `
   width: 100%;
@@ -8751,22 +8810,31 @@ const LinkDialogContent = styled.div.withConfig({ displayName: "LinkDialogConten
   padding: 1rem 0;
 `;
 
+/**
+ * Заглушка недоступного изображения.
+ *
+ * Масштаб значка считается от размера самого превью: `font-size` контейнера приравнен к нему, а
+ * бокс значка и его глиф заданы одной долей от этого размера. Раньше бокс был долей превью, а
+ * глиф — фиксированным: в списке, где превью всего `1.5rem`, глиф выходил втрое крупнее своего
+ * бокса и съезжал относительно квадрата.
+ */
 const ImagePreviewError = styled.div.withConfig({ displayName: "ImagePreviewError", componentId: "sc-7cwrhm" }) `
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
+  font-size: ${({ $size = GRID_TILE_SIZE }) => $size};
   background-color: ${({ theme }) => theme.palette.elementDark};
   border-radius: ${({ theme: { borderRadius: themeBorder }, borderRadius }) => borderRadius || themeBorder.smallest};
 
   ${uilibGl.Icon} {
-    width: 37.5%;
-    height: 37.5%;
+    width: 0.375em;
+    height: 0.375em;
   }
 
   ${uilibGl.Icon}:after {
-    font-size: 1.5rem;
+    font-size: 0.375em;
     color: ${({ theme }) => theme.palette.textSecondary};
   }
 `;
@@ -8804,7 +8872,7 @@ const FileImagePreview = ({ link, isExternal, size, borderRadius, }) => {
                 URL.revokeObjectURL(objectUrl);
         };
     }, [api, link, isExternal]);
-    return (jsxRuntime.jsxs(ImagePreviewContainer, { size: size, children: [hasError && (jsxRuntime.jsx(ImagePreviewError, { borderRadius: borderRadius, children: jsxRuntime.jsx(uilibGl.Icon, { kind: "alert" }) })), !hasError && !imageSrc && (jsxRuntime.jsx(ImagePreviewLoaderContainer, { children: jsxRuntime.jsx(uilibGl.LinearProgress, {}) })), !hasError && imageSrc && (jsxRuntime.jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "", onError: () => setHasError(true) }))] }));
+    return (jsxRuntime.jsxs(ImagePreviewContainer, { size: size, children: [hasError && (jsxRuntime.jsx(ImagePreviewError, { borderRadius: borderRadius, "$size": size, children: jsxRuntime.jsx(uilibGl.Icon, { kind: "alert" }) })), !hasError && !imageSrc && (jsxRuntime.jsx(ImagePreviewLoaderContainer, { children: jsxRuntime.jsx(uilibGl.LinearProgress, {}) })), !hasError && imageSrc && (jsxRuntime.jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "", onError: () => setHasError(true) }))] }));
 };
 
 const AttachmentItem = ({ item, viewMode, isEdit, onPreview, onDelete, }) => {
@@ -8832,38 +8900,30 @@ const AttachmentsList = ({ items, isEdit, onPreview, onDelete, }) => {
     return (jsxRuntime.jsx(ListContainer, { children: items.map(item => (jsxRuntime.jsx(AttachmentItem, { item: item, viewMode: "list", isEdit: isEdit, onPreview: onPreview, onDelete: onDelete }, item.link))) }));
 };
 
-const ShowMoreButton = ({ hiddenCount, onClick, }) => {
+const ShowMoreButton = ({ hiddenCount, iconKind = "arrow_down", onClick, }) => {
     const { t } = useGlobalContext();
-    return (jsxRuntime.jsxs(ShowMoreButton$1, { onClick: onClick, children: [t("showMore", { ns: "dashboard", defaultValue: "Показать ещё" }), " ", hiddenCount, jsxRuntime.jsx(uilibGl.Icon, { kind: "arrow_down" })] }));
+    return (jsxRuntime.jsxs(ShowMoreButton$1, { onClick: onClick, children: [t("showMore", { ns: "dashboard", defaultValue: "Показать ещё" }), " ", hiddenCount, jsxRuntime.jsx(uilibGl.Icon, { kind: iconKind })] }));
 };
 
+/**
+ * Сколько элементов показывать сразу. Заданы обе опции — выигрывает меньшая, не задана ни одна —
+ * предела нет и список показывается целиком.
+ */
+const getShownItemsLimit = ({ shownItems, otherItems } = {}) => shownItems && otherItems ? Math.min(shownItems, otherItems) : shownItems || otherItems;
 const sliceShownOtherItems = (data, options = {}, showMore) => {
-    const { shownItems, otherItems } = options || {};
-    const limit = shownItems && otherItems ? Math.min(shownItems, otherItems) : shownItems || otherItems;
-    return (shownItems || otherItems) && !showMore ? (data?.slice(0, limit) || []) : data;
+    const limit = getShownItemsLimit(options);
+    return limit && !showMore ? (data?.slice(0, limit) || []) : data;
 };
 
 const useAttachmentContainer = ({ type, elementConfig, valueOverride, }) => {
     const { items, attributeName } = useAttachmentItems({ type, elementConfig, valueOverride });
     const { options } = elementConfig || {};
-    const initialViewMode = options?.viewMode === "list" ? "list" : "grid";
-    const [viewMode, setViewMode] = React.useState(initialViewMode);
-    const [showMore, setShowMore] = React.useState(false);
-    const visibleItems = React.useMemo(() => sliceShownOtherItems(items, options, showMore), [items, options, showMore]);
-    const hiddenCount = items.length - visibleItems.length;
-    const hasMore = hiddenCount > 0;
-    const handleSetViewMode = React.useCallback((mode) => setViewMode(mode), []);
-    return {
+    const view = useAttachmentsView({
         items,
-        visibleItems,
-        hiddenCount,
-        hasMore,
-        showMore,
-        setShowMore,
-        viewMode,
-        setViewMode: handleSetViewMode,
-        attributeName,
-    };
+        limit: getShownItemsLimit(options),
+        initialViewMode: options?.viewMode === "list" ? "list" : "grid",
+    });
+    return { ...view, items, attributeName };
 };
 
 const AttachmentContainer = React.memo(({ type, elementConfig, renderElement }) => {
@@ -11466,7 +11526,11 @@ const toSchemaAttribute = (params) => {
         width: description?.width,
         resizable: description?.resizable,
         multiline: description?.multiline,
+        colorPicker: description?.colorPicker,
         style: description?.style,
+        // Настройки загрузки файлов в колонку вложений: у источника их тоже нет.
+        parentResourceId: description?.parentResourceId,
+        fileExtensions: description?.fileExtensions,
     };
 };
 /**
@@ -13757,6 +13821,8 @@ const AddButton = ({ multiple = true, accept, onSelectFiles, onSelectFromCatalog
             value: AddAttachmentSource.Catalog,
             icon: "folder_outline",
             text: t("attachments.fromCatalog", { ns: "common", defaultValue: "Из каталога" }),
+            // Диалог каталога выдаёт виджету приложение: не выдан — и выбирать нечем.
+            disabled: !onSelectFromCatalog,
         },
         {
             value: AddAttachmentSource.Link,
@@ -13764,7 +13830,7 @@ const AddButton = ({ multiple = true, accept, onSelectFiles, onSelectFromCatalog
             text: t("attachments.fromLink", { ns: "common", defaultValue: "По ссылке" }),
             disabled: !onSelectFromLink,
         },
-    ], [t, onSelectFromLink]);
+    ], [t, onSelectFromCatalog, onSelectFromLink]);
     const handleMenuSelect = React.useCallback(([{ value }]) => {
         if (value === AddAttachmentSource.Pc) {
             inputRef.current?.click();
@@ -15479,6 +15545,92 @@ const ElementSvg = React.memo(({ type, elementConfig, ...rest }) => {
     return (jsxRuntime.jsx(SvgImage, { url: getSvgUrl({ elementConfig, layerInfo, attributes }), width: width, height: height, fontColor: fontColor }));
 });
 
+/**
+ * Вложения ячейки в поп-апе. Ширина своя, а не по ячейке: колонка таблицы бывает узкой,
+ * а внутри стоит полный список вложений с плиткой и кнопкой добавления.
+ *
+ * Список взят у контейнера вложений карточки, а величины у поп-апа свои, с макета: имя файла
+ * крупнее и ссылочного цвета, значок в строку имени, «Показать ещё» серое. Переопределены они
+ * здесь, а не в самих компонентах, чтобы вложения в карточке объекта остались как были.
+ */
+const AttachmentsPopupBox = styled.div.withConfig({ displayName: "AttachmentsPopupBox", componentId: "sc-1dv1wz6" }) `
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 19.5rem;
+  padding: 1.25rem;
+
+  ${AttachmentsLabel} {
+    gap: 0 0.25rem;
+    line-height: 0.875rem;
+  }
+
+  ${AttachmentsViewControls} {
+    gap: 0 0.5rem;
+
+    ${uilibGl.IconToggleButton}, ${uilibGl.Icon} {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+
+    ${uilibGl.Icon}:after {
+      font-size: 0.875rem;
+    }
+  }
+
+  ${ListItemMeta} {
+    ${ListIcon}, ${ImagePreviewContainer}, ${GridImagePreview} {
+      width: 1rem;
+      height: 1rem;
+      background-size: contain;
+    }
+  }
+
+  ${ListItemDescription} {
+    gap: 0;
+  }
+
+  ${ListItemName} {
+    font-size: 1rem;
+    line-height: 1.125rem;
+    color: ${({ theme }) => theme.palette.primary};
+  }
+
+  ${ListItemDate} {
+    font-size: 0.75rem;
+    line-height: 0.875rem;
+  }
+
+  ${ShowMoreButton$1} {
+    gap: 0 0.25rem;
+    margin-top: 0.5rem;
+    line-height: 0.875rem;
+    color: ${({ theme }) => theme.palette.textSecondary};
+
+    ${uilibGl.Icon} {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+
+    ${uilibGl.Icon}:after {
+      font-size: 0.875rem;
+      color: ${({ theme }) => theme.palette.textSecondary};
+    }
+  }
+`;
+
+/**
+ * Полный список вложений колонки — тот же набор, что у контейнера вложений в карточке объекта:
+ * шапка с подписью, счётчиком и переключателем вида, сам список, «Показать ещё» и добавление.
+ *
+ * Кнопка добавления и корзины у файлов появляются только на правку: на чтение поп-ап нужен
+ * ровно затем, чтобы развернуть свёрнутый счётчик.
+ */
+const AttachmentsCellPopup = React.memo(({ alias, state }) => {
+    const { items, visibleItems, editable, viewMode, setViewMode, hasMore, hiddenCount, onShowMore, accept, onPreview, onDelete, onUpload, onSelectFromCatalog, onOpenLinkDialog, } = state;
+    return (jsxRuntime.jsxs(AttachmentsPopupBox, { children: [jsxRuntime.jsx(AttachmentsHeader, { alias: alias, count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: editable, onPreview: onPreview, onDelete: onDelete })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: editable, onPreview: onPreview, onDelete: onDelete })) }), hasMore && jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, iconKind: "expand", onClick: onShowMore }), editable && (jsxRuntime.jsx(AddButton, { accept: accept, onSelectFiles: onUpload, onSelectFromCatalog: onSelectFromCatalog, onSelectFromLink: onOpenLinkDialog }))] }));
+});
+
 /**
  * Насколько тело таблицы заехало под липкую шапку. Пишется на таблицу при прокрутке, читается
  * стилем тела: ровно на эту величину тело и отсекается.
@@ -15499,6 +15651,23 @@ const TIME_FORMAT = /hh:mm/;
 const PORTAL_ROOT_SELECTOR = "#portal-root";
 /** Ниже этой ширины колонку не ужать мышью: уже неё в ячейке не остаётся места под значение. */
 const MIN_COLUMN_WIDTH = 48;
+/**
+ * Цвет, с которого палитра открывается у пустой ячейки. Своего значения там ещё нет, а `Color`
+ * без валидной строки не собрать.
+ */
+const DEFAULT_CELL_COLOR = "#000000";
+/**
+ * Сколько вложений ячейка показывает сама. Больше — все схлопываются в одну строку со значком
+ * ссылки и счётчиком: колонка в таблице узкая, и списком там помещается ровно один файл.
+ */
+const ATTACHMENTS_INLINE_LIMIT = 1;
+/**
+ * Сколько файлов видно в поп-апе вложений сразу, остальные прячутся за «Показать ещё N».
+ * Величина с макета и опцией не выносится: поп-ап у колонки один на все таблицы.
+ */
+const ATTACHMENTS_SHOWN_ITEMS = 3;
+/** Вид списка, с которого поп-ап вложений открывается. */
+const ATTACHMENTS_VIEW_MODE = "list";
 
 /**
  * Собственный бокс таблицы. Без размеров в `options` представления узел ничего не меняет:
@@ -15725,36 +15894,177 @@ const CellField = styled.div.withConfig({ displayName: "CellField", componentId:
  */
 const AttachmentsCellBox = styled.div.withConfig({ displayName: "AttachmentsCellBox", componentId: "sc-1ayq7sq" }) `
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.25rem;
+  align-items: center;
+  gap: 0.375rem;
   padding: 0.375rem 0.25rem;
+  min-width: 0;
+  line-height: 1.25rem;
+  /* Пустая ячейка на чтении не делает по клику ничего — и на указатель ей меняться незачем. */
+  cursor: ${({ $interactive }) => ($interactive ? "pointer" : "default")};
+`;
+/**
+ * Значок файла в ячейке. Тот же, что в списке вложений, только с макетную величину строки
+ * таблицы: в контейнере строка свободнее и значок там крупнее.
+ */
+const AttachmentsCellIcon = styled(ListIcon).withConfig({ displayName: "AttachmentsCellIcon", componentId: "sc-wf195o" }) `
+  width: 1rem;
+  height: 1rem;
+  background-size: contain;
+`;
+/**
+ * Подпись файла или счётчика свёрнутых. Ссылочная: по ней и кликают — одиночный файл открывает
+ * галерею, счётчик разворачивает список.
+ */
+const AttachmentsCellLabel = styled.div.withConfig({ displayName: "AttachmentsCellLabel", componentId: "sc-11wbjsl" }) `
+  color: ${({ theme }) => theme.palette.primary};
+
+  ${cellWrapMixin};
+`;
+/** Значок ссылки у счётчика свёрнутых файлов — в цвет подписи. */
+const AttachmentsCellLinkIcon = styled(uilibGl.Icon).withConfig({ displayName: "AttachmentsCellLinkIcon", componentId: "sc-oxcx2o" }) `
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+
+  &:after {
+    font-size: 1rem;
+    color: ${({ theme }) => theme.palette.primary};
+  }
+`;
+/**
+ * Ячейка цвета: плашка или палитра слева, значение справа.
+ *
+ * Отступы те же, что у текстовой ячейки: в одном ряду с обычными колонками значения обязаны
+ * стоять на одной линии.
+ */
+const ColorCellBox = styled.div.withConfig({ displayName: "ColorCellBox", componentId: "sc-1x8c5gd" }) `
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0 0.25rem;
+
+  ${CellText} {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+/**
+ * Плашка цвета. Повторяет маркер легенды графика: цвет всюду обозначается одинаково, где бы он
+ * ни показывался.
+ */
+const ColorSwatch = styled.div.withConfig({ displayName: "ColorSwatch", componentId: "sc-1h7m0yr" }) `
+  flex-shrink: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: ${({ $color }) => $color};
+  border-radius: ${({ theme: { borderRadius } }) => borderRadius.tiny};
 `;
-const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-dmdhrv" }) `
+const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-10hkdmv" }) `
   padding: 0.75rem 0.25rem;
   color: ${({ theme }) => theme.palette.textSecondary};
 `;
 
 /**
- * Ячейка с вложениями: разбор значения, просмотр, скачивание и правка списка.
+ * Добавление и удаление файлов в колонке вложений.
+ *
+ * Все три источника — диск, каталог ресурсов и ссылка — те же, что у контейнера вложений
+ * в карточке объекта: файловое api берётся из глобального контекста, диалог каталога выдаёт
+ * виджету приложение, а ссылка разбирается по адресу.
+ *
+ * Папку-приёмник загрузки задаёт сам атрибут: у колонки нет узла-элемента с опциями, зато
+ * колонок вложений в таблице может быть несколько, и складывать их файлы в одно место незачем.
+ */
+const useAttachmentsCellEdit = ({ attribute, items, persist }) => {
+    const { api } = useGlobalContext();
+    const { selectAttachmentsFromCatalog } = useWidgetContext();
+    const [isLinkDialogOpen, , setLinkDialogOpen] = useToggle(false);
+    const [uploading, setUploading] = React.useState(false);
+    const { parentResourceId, fileExtensions } = attribute;
+    const onDelete = React.useCallback((link) => persist(items.filter(item => item.link !== link)), [items, persist]);
+    const onUpload = React.useCallback(async (files) => {
+        if (!api?.file?.upload || uploading) {
+            return;
+        }
+        setUploading(true);
+        try {
+            const uploaded = await Promise.all(files.map(file => api.file.upload(file, true, parentResourceId || "", file.name)));
+            persist([
+                ...items,
+                ...uploaded.map((response, index) => ({
+                    link: response.resourceId,
+                    name: response.name ?? files[index].name,
+                    mimeType: files[index].type,
+                    date: new Date().toISOString(),
+                    isExternal: false,
+                })),
+            ]);
+        }
+        finally {
+            setUploading(false);
+        }
+    }, [api, items, parentResourceId, persist, uploading]);
+    const onAddFromCatalog = React.useCallback((resources) => persist([
+        ...items,
+        ...resources.map(({ resourceId, name, contentType }) => ({
+            link: resourceId ?? "",
+            name: name ?? "",
+            mimeType: contentType ?? "",
+            date: new Date().toISOString(),
+            isExternal: false,
+        })),
+    ]), [items, persist]);
+    const onSelectFromCatalog = React.useMemo(() => (selectAttachmentsFromCatalog ? () => selectAttachmentsFromCatalog(onAddFromCatalog) : undefined), [onAddFromCatalog, selectAttachmentsFromCatalog]);
+    const onOpenLinkDialog = React.useCallback(() => setLinkDialogOpen(true), [setLinkDialogOpen]);
+    const onCloseLinkDialog = React.useCallback(() => setLinkDialogOpen(false), [setLinkDialogOpen]);
+    const onAddByLink = React.useCallback((url) => persist([
+        ...items,
+        {
+            link: url,
+            name: getFileNameFromUrl(url),
+            mimeType: getMimeTypeFromUrl(url),
+            date: new Date().toISOString(),
+            isExternal: true,
+        },
+    ]), [items, persist]);
+    return {
+        accept: fileExtensions,
+        isLinkDialogOpen,
+        onDelete,
+        onUpload,
+        onSelectFromCatalog,
+        onOpenLinkDialog,
+        onCloseLinkDialog,
+        onAddByLink,
+    };
+};
+
+/**
+ * Колонка вложений: разбор значения, свёрнутый вид ячейки и полный список в поп-апе.
  *
  * Значение атрибута — строка: файлы приезжают в ней списком JSON, поэтому и обратно в черновик
  * кладём строку, а не массив — иначе тип ячейки менялся бы от самой правки.
  *
- * Добавление здесь только по ссылке. Загрузка с диска требует ресурса-родителя и файлового
- * api контейнера вложений, а у колонки таблицы ни того, ни другого нет.
+ * Ячейка показывает один файл, а несколько схлопывает в счётчик, и весь список с добавлением
+ * и удалением живёт в поп-апе — тот же набор, что у контейнера вложений в карточке объекта.
  */
-const useAttachmentsCell = ({ attribute, row, canEdit, onChange }) => {
+const useAttachmentsCell = ({ attribute, row, canEdit, onChange, }) => {
     const [previewIndex, setPreviewIndex] = React.useState(null);
-    const [isLinkDialogOpen, setLinkDialogOpen] = React.useState(false);
+    const [isPopupOpen, , setPopupOpen] = useToggle(false);
     const { attributeName, isEditable } = attribute;
     const value = row.properties[attributeName];
     const items = React.useMemo(() => parseAttachments(value), [value]);
+    const view = useAttachmentsView({
+        items,
+        limit: ATTACHMENTS_SHOWN_ITEMS,
+        initialViewMode: ATTACHMENTS_VIEW_MODE,
+    });
+    const { setShowMore } = view;
     const previewImages = useAttachmentPreviewImages({ items, active: previewIndex !== null });
     const downloadByIndex = useAttachmentDownload(items);
     // Те же два условия, что и у обычной ячейки: режим таблицы и разрешение самого атрибута.
     const editable = canEdit && isEditable;
     const persist = React.useCallback((next) => onChange(row.key, attributeName, JSON.stringify(next)), [attributeName, onChange, row.key]);
+    const edit = useAttachmentsCellEdit({ attribute, items, persist });
     const onPreview = React.useCallback((link) => {
         const index = items.findIndex(item => item.link === link);
         if (index >= 0) {
@@ -15763,48 +16073,99 @@ const useAttachmentsCell = ({ attribute, row, canEdit, onChange }) => {
     }, [items]);
     const onClosePreview = React.useCallback(() => setPreviewIndex(null), []);
     const onDownload = React.useCallback((_image, index) => downloadByIndex(index), [downloadByIndex]);
-    const onDelete = React.useCallback((link) => persist(items.filter(item => item.link !== link)), [items, persist]);
-    const onOpenLinkDialog = React.useCallback(() => setLinkDialogOpen(true), []);
-    const onCloseLinkDialog = React.useCallback(() => setLinkDialogOpen(false), []);
-    const onAddByLink = React.useCallback((url) => persist([
-        ...items,
-        {
-            link: url,
-            name: getFileNameFromUrl(url),
-            mimeType: getMimeTypeFromUrl(url),
-            date: new Date().toISOString(),
-            isExternal: true,
-        },
-    ]), [items, persist]);
+    const onShowMore = React.useCallback(() => setShowMore(true), [setShowMore]);
+    const onClosePopup = React.useCallback(() => setPopupOpen(false), [setPopupOpen]);
+    /**
+     * На правку поп-ап открывается всегда, даже у пустой ячейки: другого места, откуда добавить
+     * первый файл, у колонки нет. На чтение единственный файл ведёт прямо в галерею, а свёрнутый
+     * счётчик — в тот же поп-ап, только без кнопок.
+     */
+    const onCellClick = React.useCallback(() => {
+        if (!editable && items.length === ATTACHMENTS_INLINE_LIMIT) {
+            onPreview(items[0].link);
+            return;
+        }
+        if (editable || items.length) {
+            setPopupOpen(true);
+        }
+    }, [editable, items, onPreview, setPopupOpen]);
     return {
+        ...view,
+        ...edit,
         items,
         editable,
+        onShowMore,
+        isPopupOpen,
+        onClosePopup,
+        onCellClick,
         previewIndex,
         previewImages,
-        isLinkDialogOpen,
         onPreview,
         onClosePreview,
         onDownload,
-        onDelete,
-        onOpenLinkDialog,
-        onCloseLinkDialog,
-        onAddByLink,
     };
 };
 
 /**
- * Колонка со вложениями: список файлов прямо в ячейке.
+ * Колонка со вложениями.
  *
  * Тип у атрибута строковый, вложениями его делает `subType: "Attachments"` в схеме контейнера —
  * поэтому ветка стоит раньше разбора типа и обычных редакторов ячейки.
+ *
+ * Сама ячейка показывает один файл, а несколько схлопывает в строку со значком ссылки
+ * и счётчиком: в ширину колонки список файлов не помещается. Весь список живёт в поп-апе.
  */
 const AttachmentsCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     const { t } = useGlobalContext();
-    const { items, editable, previewIndex, previewImages, isLinkDialogOpen, onPreview, onClosePreview, onDownload, onDelete, onOpenLinkDialog, onCloseLinkDialog, onAddByLink, } = useAttachmentsCell({ attribute, row, canEdit, onChange });
-    return (jsxRuntime.jsxs(AttachmentsCellBox, { children: [!items.length && !editable && jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }), jsxRuntime.jsx(AttachmentsList, { items: items, isEdit: editable, onPreview: onPreview, onDelete: onDelete }), editable && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "link", tabIndex: 0, title: t("attachments.fromLink", { ns: "common", defaultValue: "По ссылке" }), onClick: onOpenLinkDialog })), jsxRuntime.jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: onCloseLinkDialog, onSubmit: onAddByLink }), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: true, onClose: onClosePreview, onDownload: onDownload, errorTitleText: t("attachments.resourceUnavailable", {
+    const state = useAttachmentsCell({ attribute, row, canEdit, onChange });
+    const { items, editable, isPopupOpen, onClosePopup, onCellClick } = state;
+    const [single] = items;
+    const isCollapsed = items.length > ATTACHMENTS_INLINE_LIMIT;
+    const fileType = React.useMemo(() => (single ? getFileType(single.mimeType, single.name) : undefined), [single]);
+    const isImage = React.useMemo(() => !!fileType && IMAGE_FILE_TYPES.includes(fileType), [fileType]);
+    // Удаление единственного файла — действие самой ячейки, поп-ап ради него открывать незачем.
+    const handleDelete = React.useCallback((event) => {
+        event.stopPropagation();
+        state.onDelete(single.link);
+    }, [single, state]);
+    const renderCell = () => {
+        if (isCollapsed) {
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AttachmentsCellLinkIcon, { kind: "link" }), jsxRuntime.jsx(AttachmentsCellLabel, { children: t("attachments.objectsCount", {
+                            ns: "common",
+                            total: items.length,
+                            defaultValue: "Объектов: {{total}}",
+                        }) })] }));
+        }
+        if (!single) {
+            return jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" });
+        }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isImage ? (jsxRuntime.jsx(FileImagePreview, { size: "1rem", isExternal: single.isExternal, link: single.link })) : (jsxRuntime.jsx(AttachmentsCellIcon, { fileType: fileType })), jsxRuntime.jsx(AttachmentsCellLabel, { title: single.name, children: single.name }), editable && jsxRuntime.jsx(uilibGl.IconButton, { kind: "delete", tabIndex: 0, onClick: handleDelete })] }));
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Popup, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, isVisible: isPopupOpen, onRequestClose: onClosePopup, placement: "bottom-start", anchor: ref => (jsxRuntime.jsx(AttachmentsCellBox, { ref: ref, "$interactive": editable || !!items.length, onClick: onCellClick, children: renderCell() })), children: jsxRuntime.jsx(AttachmentsCellPopup, { alias: attribute.alias, state: state }) }), jsxRuntime.jsx(AttachmentLinkDialog, { isOpen: state.isLinkDialogOpen, onClose: state.onCloseLinkDialog, onSubmit: state.onAddByLink }), state.previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: state.previewImages, initialIndex: state.previewIndex, isOpen: true, onClose: state.onClosePreview, onDownload: state.onDownload, errorTitleText: t("attachments.resourceUnavailable", {
                     ns: "common",
                     defaultValue: "Ресурс недоступен",
-                }) }, previewIndex))] }));
+                }) }, state.previewIndex))] }));
+});
+
+/**
+ * Колонка цвета (`colorPicker` у атрибута).
+ *
+ * Значение хранится строкой в любом из привычных видов — `hex`, `rgb`, `rgba`, — поэтому рядом со
+ * значением показывается плашка этого цвета, а на правку встаёт палитра.
+ *
+ * Неразбираемая строка остаётся просто текстом, без плашки: так видно, что в данных мусор, а не
+ * пустое значение.
+ */
+const ColorCell = React.memo(({ attribute, row, canEdit, onChange }) => {
+    const { attributeName, isEditable } = attribute;
+    const value = row.properties[attributeName];
+    const text = React.useMemo(() => (lodash.isNil(value) ? "" : String(value)), [value]);
+    const color = React.useMemo(() => (text ? new color$1.Color(text) : null), [text]);
+    const isValidColor = !!color?.isValid;
+    // Те же два условия, что и у обычной ячейки: режим таблицы и разрешение самого атрибута.
+    const editable = canEdit && isEditable;
+    const handleChange = React.useCallback((next) => onChange(row.key, attributeName, colorToHex(next)), [attributeName, onChange, row.key]);
+    return (jsxRuntime.jsxs(ColorCellBox, { children: [editable ? (jsxRuntime.jsx(uilibGl.ColorPicker, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, withOpacity: true, value: isValidColor ? color : new color$1.Color(DEFAULT_CELL_COLOR), onChange: handleChange })) : (isValidColor && jsxRuntime.jsx(ColorSwatch, { "$color": text })), jsxRuntime.jsx(CellText, { title: text, children: text || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) })] }));
 });
 
 /**
@@ -15905,7 +16266,7 @@ const useCellEditing = () => {
 const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     const { t, language } = useGlobalContext();
     const { editing, buttonProps, editorProps } = useCellEditing();
-    const { attributeName, type, subType, isEditable, stringFormat, multiline } = attribute;
+    const { attributeName, type, subType, isEditable, stringFormat, multiline, colorPicker } = attribute;
     const value = row.properties[attributeName];
     const handleChange = React.useCallback((next) => {
         // Пустые правки отбрасываем: иначе строка становилась бы «изменённой» от простого
@@ -15929,6 +16290,11 @@ const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     if (subType === api.StringSubType.Attachments) {
         return jsxRuntime.jsx(AttachmentsCell, { attribute: attribute, row: row, canEdit: canEdit, onChange: onChange });
     }
+    // Цвет — тоже строка, и по типу от обычной не отличается: что она значит, говорит только
+    // `colorPicker` в схеме.
+    if (colorPicker) {
+        return jsxRuntime.jsx(ColorCell, { attribute: attribute, row: row, canEdit: canEdit, onChange: onChange });
+    }
     // Логическое значение и на чтение показываем галкой, а не словами «true»/«false» —
     // так же, как остальной дашборд рисует булевы атрибуты.
     if (type === api.AttributeType.Boolean) {
@@ -19816,6 +20182,7 @@ exports.buildTrackTemplate = buildTrackTemplate;
 exports.checkEqualOrIncludes = checkEqualOrIncludes;
 exports.checkIsLoading = checkIsLoading;
 exports.collectConfigIds = collectConfigIds;
+exports.colorToHex = colorToHex;
 exports.containsNodeId = containsNodeId;
 exports.createConfigLayer = createConfigLayer;
 exports.createConfigPage = createConfigPage;
@@ -19890,6 +20257,7 @@ exports.getRenderElement = getRenderElement;
 exports.getResourceUrl = getResourceUrl;
 exports.getRootElementId = getRootElementId;
 exports.getSelectedFilterValue = getSelectedFilterValue;
+exports.getShownItemsLimit = getShownItemsLimit;
 exports.getSlideshowImages = getSlideshowImages;
 exports.getStyleAttributes = getStyleAttributes;
 exports.getSvgUrl = getSvgUrl;
@@ -19957,6 +20325,7 @@ exports.useAppHeight = useAppHeight;
 exports.useAttachmentDownload = useAttachmentDownload;
 exports.useAttachmentItems = useAttachmentItems;
 exports.useAttachmentPreviewImages = useAttachmentPreviewImages;
+exports.useAttachmentsView = useAttachmentsView;
 exports.useAutoCompleteControl = useAutoCompleteControl;
 exports.useBeforeSave = useBeforeSave;
 exports.useBgImageHost = useBgImageHost;