@evergis/react 4.0.156 → 4.0.158

package/dist/index.js

@@ -5294,8 +5294,7 @@ const DashboardWrapper = styled(uilibGl.Flex).withConfig({ displayName: "Dashboa
   width: calc(100% - 3rem);
   height: calc(100% - ${LEFT_PANEL_HEADER_HEIGHT});
 
-  ${({ hasImage, isPresentationMode }) => hasImage &&
-    !isPresentationMode &&
+  ${({ hasImage }) => hasImage &&
     styled.css `
       margin-top: -0.35rem;
     `}
@@ -5905,7 +5904,7 @@ const useAttachmentDownload = (items) => {
             return;
         inFlightRef.current.add(item.link);
         api.catalog
-            .getFile(item.link)
+            .getFile({ resourceId: item.link })
             .then(blob => saveBlobAsFile(blob, item.name))
             .catch(error => {
             notification?.add({
@@ -6188,7 +6187,7 @@ const useAttachmentPreviewImages = ({ items, active, }) => {
                 return;
             inFlightRef.current.add(item.link);
             api.catalog
-                .getFile(item.link)
+                .getFile({ resourceId: item.link })
                 .then(blob => {
                 const objectUrl = URL.createObjectURL(blob);
                 setBlobUrls(prev => ({ ...prev, [item.link]: objectUrl }));
@@ -6575,7 +6574,7 @@ const useMapImages = ({ images }) => {
         // Картинка из каталога
         if (!config.url.startsWith("data:image") && !config.url.startsWith("http")) {
             try {
-                const { data } = await loadSvgAsImage(URL.createObjectURL(await api.catalog.getFile(config.url)), size, pixelRatio);
+                const { data } = await loadSvgAsImage(URL.createObjectURL(await api.catalog.getFile({ resourceId: config.url })), size, pixelRatio);
                 map.current.addImage(config.name, data, {
                     sdf,
                     pixelRatio,
@@ -9128,7 +9127,7 @@ const FileImagePreview = ({ link, isExternal, size, borderRadius, }) => {
         let cancelled = false;
         let objectUrl;
         api.catalog
-            .getFile(link)
+            .getFile({ resourceId: link })
             .then(blob => {
             if (cancelled)
                 return;
@@ -11144,7 +11143,7 @@ const LayersContainerWrapper = styled(Container).withConfig({ displayName: "Laye
   }
 
   ${LayerGroupList} {
-    margin: ${({ isPresentationMode }) => (isPresentationMode ? 0 : "0 -1.25rem 0 -1rem")};
+    margin: 0 -1.25rem 0 -1rem;
     padding: 0;
   }
 `;
@@ -11735,6 +11734,8 @@ const NUMBER_EDITOR_TYPES = [
 const INTEGER_ATTRIBUTE_TYPES = [api.AttributeType.Int32, api.AttributeType.Int64];
 /** Тип атрибута, когда его не задали ни конфиг, ни источник. */
 const DEFAULT_ATTRIBUTE_TYPE = api.AttributeType.String;
+/** Контрол колонки со списком значений, когда `control` в описании атрибута не задан. */
+const DEFAULT_ATTRIBUTE_CONTROL = "dropdown";
 /** Сколько миллисекунд висит нотификация об ошибке записи. */
 const SAVE_ERROR_DURATION = 5000;
 
@@ -12014,6 +12015,53 @@ const buildStructuredDataSchema = ({ attributesDescription, attributesConfigurat
     return sourceAttributes.map(source => toSchemaAttribute({ source, idAttribute, canWriteToSource }));
 };
 
+/**
+ * Записи связанного источника → пункты списка.
+ *
+ * Пустые значения отбрасываются: выбрать «ничего» можно и без них, а пункт с пустым значением
+ * стёр бы ячейку под видом осмысленного выбора. Повторы схлопываются — у справочника по
+ * значению одна запись, а у сырого слоя их может быть сколько угодно.
+ */
+const featuresToListOptions = (features, valueAttribute, textAttribute) => lodash.uniqBy(features
+    .filter(({ properties }) => !lodash.isNil(properties?.[valueAttribute]))
+    .map(({ properties }) => ({
+    value: properties[valueAttribute],
+    text: String(properties[textAttribute] ?? properties[valueAttribute]),
+})), ({ value }) => String(value));
+/**
+ * Список допустимых значений колонки: варианты из конфига, а без них — записи связанного
+ * источника. `undefined` — списка нет, и значение вводится вручную.
+ *
+ * Источник, ещё не загруженный или не найденный, даёт пустой список, а не его отсутствие:
+ * колонка со списком не должна на время загрузки превращаться в свободный ввод.
+ */
+const getAttributeListOptions = (description, dataSources) => {
+    const { attributeName, variants, relatedDataSource, attributeValue, attributeAlias } = description || {};
+    if (variants?.length) {
+        return variants;
+    }
+    if (!relatedDataSource) {
+        return undefined;
+    }
+    const valueAttribute = attributeValue || attributeName;
+    const features = getDataSource(relatedDataSource, dataSources)?.features ?? [];
+    return featuresToListOptions(features, valueAttribute, attributeAlias || valueAttribute);
+};
+/**
+ * Схема представления: схема данных плюс списки значений и их контролы.
+ *
+ * Отдельно от схемы данных потому, что зависит от загруженных источников страницы: черновик
+ * пересобирает строки при каждой смене схемы, и загрузка справочника стирала бы в нём правки.
+ */
+const withListControls = (schema, attributesDescription, dataSources) => schema.map(attribute => {
+    const description = attributesDescription?.find(({ attributeName }) => attributeName === attribute.attributeName);
+    const listOptions = getAttributeListOptions(description, dataSources);
+    if (!listOptions) {
+        return attribute;
+    }
+    return { ...attribute, listOptions, control: description?.control ?? DEFAULT_ATTRIBUTE_CONTROL };
+});
+
 /**
  * Схема структурированных данных и источник, к которому она привязана.
  *
@@ -12026,6 +12074,9 @@ const buildStructuredDataSchema = ({ attributesDescription, attributesConfigurat
  *
  * Берётся из конфига страницы, а не из загруженного источника: от него зависит, какие ячейки
  * редактируемы, и до окончания загрузки схема не должна меняться.
+ *
+ * `viewSchema` — та же схема со списками значений для представления. Списки зависят от
+ * загруженных источников страницы, поэтому в схему данных (черновик, запись) они не входят.
  */
 const useStructuredDataSchema = (type, elementConfig) => {
     const { dataSources } = useWidgetContext(type);
@@ -12038,7 +12089,8 @@ const useStructuredDataSchema = (type, elementConfig) => {
     const layerName = React.useMemo(() => (saveToLayer ? configDataSource?.layerName : undefined), [configDataSource?.layerName, saveToLayer]);
     const attributesConfiguration = React.useMemo(() => (relatedDataSource ? getAttributesConfiguration(layerInfo) : undefined), [layerInfo, relatedDataSource]);
     const schema = React.useMemo(() => buildStructuredDataSchema({ attributesDescription, attributesConfiguration, canWriteToSource: !!layerName }), [attributesDescription, attributesConfiguration, layerName]);
-    return { schema, dataSource, layerName };
+    const viewSchema = React.useMemo(() => withListControls(schema, attributesDescription, dataSources), [attributesDescription, dataSources, schema]);
+    return { schema, viewSchema, dataSource, layerName };
 };
 
 /**
@@ -12060,7 +12112,7 @@ 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 { schema, viewSchema, dataSource, layerName } = useStructuredDataSchema(type, elementConfig);
     const hasDataSource = !!relatedDataSource;
     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]);
@@ -12102,14 +12154,14 @@ const useStructuredData = (type, elementConfig) => {
         setDeletingKey(null);
     }, [deleteRow, deletingKey]);
     const contextValue = React.useMemo(() => ({
-        schema,
+        schema: viewSchema,
         rows: visibleRows,
         loading,
         canEdit,
         canDelete: canChangeRows,
         onCellChange: changeCell,
         onRowDelete,
-    }), [canChangeRows, canEdit, changeCell, loading, onRowDelete, schema, visibleRows]);
+    }), [canChangeRows, canEdit, changeCell, loading, onRowDelete, viewSchema, visibleRows]);
     return {
         contextValue,
         dirty,
@@ -16170,6 +16222,12 @@ const ATTACHMENTS_INLINE_LIMIT = 1;
  * Величина с макета и опцией не выносится: поп-ап у колонки один на все таблицы.
  */
 const ATTACHMENTS_SHOWN_ITEMS = 3;
+/**
+ * Пустой пункт выпадающего списка в ячейке: выбор снимает значение. У `Dropdown` пункт с пустым
+ * значением показывается как плейсхолдер, поэтому и подпись у него — тот же прочерк, что у
+ * пустой ячейки.
+ */
+const EMPTY_LIST_OPTION = { text: "—", value: "" };
 /** Вид списка, с которого поп-ап вложений открывается. */
 const ATTACHMENTS_VIEW_MODE = "list";
 
@@ -16463,7 +16521,27 @@ const ColorSwatch = styled.div.withConfig({ displayName: "ColorSwatch", componen
   background-color: ${({ $color }) => $color};
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.tiny};
 `;
-const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-10hkdmv" }) `
+/**
+ * Ряд кнопок колонки со списком. Не влезает в ширину колонки — переносится, и строка таблицы
+ * растёт вниз: резать выбор многоточием, как текст, нельзя.
+ *
+ * Зазор между кнопками по горизонтали даёт их собственный правый отступ, поэтому здесь задан
+ * только межстрочный. Отступы ряда — как у текстовой ячейки, чтобы значения соседних колонок
+ * стояли на одной линии.
+ */
+const ChipsCellBox = styled.div.withConfig({ displayName: "ChipsCellBox", componentId: "sc-1qxeyw" }) `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: 0.25rem;
+  padding: 0.25rem;
+
+  /* Удвоенный класс перебивает собственный указатель кнопки-чипа. */
+  && > * {
+    cursor: ${({ $interactive }) => ($interactive ? "pointer" : "default")};
+  }
+`;
+const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-jwp9aw" }) `
   padding: 0.75rem 0.25rem;
   color: ${({ theme }) => theme.palette.textSecondary};
 `;
@@ -16651,6 +16729,175 @@ const AttachmentsCell = React.memo(({ attribute, row, canEdit, onChange }) => {
                 }) }, state.previewIndex))] }));
 });
 
+const FilterChip = styled.div.withConfig({ displayName: "FilterChip", componentId: "sc-17fod1d" }) `
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.3125rem 0.5rem;
+  height: 1.5rem;
+  border-radius: 0.25rem;
+  background-color: ${({ $isActive, $bgColor, theme }) => $bgColor
+    ? $bgColor
+    : $isActive
+        ? theme.palette?.primary
+        : theme.palette?.elementLight};
+  color: ${({ $isActive, $textColor, theme }) => $textColor
+    ? $textColor
+    : $isActive
+        ? theme.palette?.textContrast
+        : theme.palette?.textSecondary};
+  cursor: pointer;
+  font-size: 0.75rem;
+  line-height: 0.875rem;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: all 0.2s ease-in-out;
+  margin: 0 0.25rem 0 0;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: ${({ $isActive, $bgColor, theme }) => $isActive
+    ? $bgColor || 'inherit'
+    : $bgColor || theme.palette?.elementDark};
+  }
+`;
+const ChipIconWrapper = styled.span.withConfig({ displayName: "ChipIconWrapper", componentId: "sc-8j3rkq" }) `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+
+  svg, img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+const ChipText = styled.span.withConfig({ displayName: "ChipText", componentId: "sc-1saygd0" }) `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  ${({ $maxTextWidth }) => $maxTextWidth && `max-width: ${$maxTextWidth / 16}rem;`}
+`;
+
+const CustomChip = ({ text, icon, color, primary, secondary, error, disabled, isActive, maxTextWidth, fontColor: customFontColor, backgroundColor: customBackgroundColor, ...props }) => {
+    const theme = styled.useTheme();
+    const { palette } = theme;
+    // Helper to add transparency to hex color
+    const addTransparency = (hex, transparency = '1f') => {
+        // Ensure hex starts with #
+        const cleanHex = hex.startsWith('#') ? hex : `#${hex}`;
+        return `${cleanHex}${transparency}`;
+    };
+    // Calculate colors based on priority:
+    // 1. customFontColor / customBackgroundColor (highest, from options)
+    // 2. color (from attribute)
+    // 3. primary/secondary/error
+    // 4. default theme colors
+    let bgColor;
+    let textColor;
+    if (isActive) {
+        // Priority 1: Custom colors from options
+        if (customFontColor) {
+            textColor = customFontColor;
+            bgColor = customBackgroundColor || addTransparency(customFontColor); // 12% opacity
+        }
+        // Priority 2: Color from attribute
+        else if (color) {
+            textColor = palette.textPrimary; // White text for active chip
+            bgColor = color; // Full color without transparency
+        }
+        // Priority 3: Variant colors
+        else if (primary) {
+            bgColor = theme.message.color.success; // Green
+            textColor = palette.textContrast;
+        }
+        else if (secondary) {
+            bgColor = palette.primary;
+            textColor = palette.textContrast;
+        }
+        else if (error) {
+            bgColor = theme.message.color.warning; // Yellow
+            textColor = palette.textPrimary;
+        }
+        // Priority 4: Default - no colors specified
+        else {
+            textColor = palette.primary;
+            bgColor = addTransparency(palette.primary); // palette.primary + 12%
+        }
+    }
+    else {
+        // Inactive state
+        if (color) {
+            textColor = color; // Use color for text
+            bgColor = addTransparency(color); // Uses default 1f (12%) transparency
+        }
+        // else: No color attribute - leave bgColor and textColor undefined
+        // Styled component will use fallback for inactive: bg = rgba(0,0,0,0.06), text = palette.textSecondary
+    }
+    const renderIcon = React.useCallback((iconValue) => {
+        if (!iconValue) {
+            return null;
+        }
+        // If icon doesn't contain a dot and doesn't start with /sp/, it's a built-in icon from uilib-gl
+        if (!iconValue.includes(".") && !iconValue.startsWith("/sp/")) {
+            return jsxRuntime.jsx(uilibGl.Icon, { kind: iconValue });
+        }
+        // If it's an SVG file or resourceId path, use SvgImage component
+        const isSvg = iconValue.endsWith(".svg") || iconValue.startsWith("/sp/resources/file/");
+        if (isSvg) {
+            const iconColor = textColor
+                ? textColor
+                : isActive
+                    ? palette.textContrast
+                    : palette.textSecondary;
+            return (jsxRuntime.jsx(SvgImage, { url: iconValue, width: 14, height: 14, fontColor: iconColor }));
+        }
+        // Otherwise, it's a regular image
+        return jsxRuntime.jsx("img", { src: iconValue, alt: "" });
+    }, [isActive, textColor, palette.textContrast, palette.textSecondary]);
+    return (jsxRuntime.jsxs(FilterChip, { "$isActive": isActive, "$bgColor": bgColor, "$textColor": textColor, ...props, children: [icon && jsxRuntime.jsx(ChipIconWrapper, { children: renderIcon(icon) }), jsxRuntime.jsx(ChipText, { "$maxTextWidth": maxTextWidth, children: text })] }));
+};
+
+/**
+ * Значение ячейки совпадает со значением пункта списка.
+ *
+ * Сравниваем строками: у варианта из конфига значение бывает строкой, а в ячейке числового
+ * атрибута лежит число, и строгое сравнение не узнало бы собственный выбор.
+ */
+const isSameListValue = (left, right) => {
+    if (lodash.isNil(left) || lodash.isNil(right)) {
+        return lodash.isNil(left) && lodash.isNil(right);
+    }
+    return String(left) === String(right);
+};
+/** Пункт списка, выбранный в ячейке. Нет — значение в ячейке не из списка либо пусто. */
+const findListOption = (listOptions, value) => lodash.isNil(value) ? undefined : listOptions.find(({ value: optionValue }) => isSameListValue(optionValue, value));
+
+/**
+ * Колонка со списком значений в виде ряда кнопок (`control: "chips"`).
+ *
+ * Ряд виден всегда, как галка у логической колонки: выбор — один клик, без открытия редактора.
+ * Выбранный пункт подсвечен, клик по нему снимает выбор — иначе очистить ячейку было бы нечем.
+ * Без права правки ряд остаётся на месте и показывает выбор, но на клики не отвечает.
+ *
+ * Кнопки — те же, что у фильтра-чипсов: вариант со своим `color`/`icon` выглядит одинаково и там,
+ * и здесь.
+ */
+const ChipsCell = React.memo(({ attribute, row, canEdit, onChange }) => {
+    const { attributeName, isEditable, listOptions = [] } = attribute;
+    const value = row.properties[attributeName];
+    // Те же два условия, что и у обычной ячейки: режим таблицы и разрешение самого атрибута.
+    const editable = canEdit && isEditable;
+    const handleClick = React.useCallback((optionValue) => onChange(row.key, attributeName, isSameListValue(optionValue, value) ? null : optionValue), [attributeName, onChange, row.key, value]);
+    if (!listOptions.length) {
+        return (jsxRuntime.jsx(CellText, { children: jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) }));
+    }
+    return (jsxRuntime.jsx(ChipsCellBox, { "$interactive": editable, children: listOptions.map(({ text, value: optionValue, color, icon }) => (jsxRuntime.jsx(CustomChip, { text: text, title: text, color: color, icon: icon ? getResourceUrl(icon) : undefined, isActive: isSameListValue(optionValue, value), onClick: editable ? () => handleClick(optionValue) : undefined }, String(optionValue)))) }));
+});
+
 /**
  * Колонка цвета (`colorPicker` у атрибута).
  *
@@ -16672,20 +16919,6 @@ const ColorCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     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" }) })] }));
 });
 
-/**
- * Значение ячейки не изменилось.
- *
- * Даты сравниваем моментом времени, а не строкой: `DatePicker` отдаёт ISO с миллисекундами и
- * повторяет текущее значение на каждый уход фокуса из поля — без этой проверки строка
- * помечалась бы изменённой от одного лишь клика по иконке календаря.
- */
-const isSameCellValue = (next, current, type) => {
-    if (type === api.AttributeType.DateTime && next && current) {
-        return new Date(next).getTime() === new Date(current).getTime();
-    }
-    return next === current;
-};
-
 /**
  * Правка одной ячейки.
  *
@@ -16755,9 +16988,85 @@ const useCellEditing = () => {
         document.addEventListener("mousedown", onDocumentMouseDown);
         return () => document.removeEventListener("mousedown", onDocumentMouseDown);
     }, [editing]);
+    // Закрыть правку из самого редактора — так же, как Enter: выбор из списка завершает правку сразу,
+    // и держать открытым редактор с уже записанным значением незачем.
+    const close = React.useCallback(() => setMode("focused"), []);
     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 };
+    return { editing, buttonProps, editorProps, close };
+};
+
+/**
+ * Раскрывает `Dropdown` сразу, как ячейка перешла в правку.
+ *
+ * Правку открывает фокус ячейки, а своего «открыться сразу» у `Dropdown` нет: без этого список
+ * пришлось бы раскрывать вторым кликом, а с Tab-а — ещё и Enter-ом. Меню переключает клик по полю
+ * списка; поле — родитель скрытого `input`, которым `Dropdown` ловит клавиатуру (`FocusTrap`), и
+ * другого инпута внутри нет: поиск по пунктам живёт в портале.
+ */
+const useDropdownAutoOpen = (editing) => {
+    const fieldRef = React.useRef(null);
+    React.useEffect(() => {
+        if (editing) {
+            fieldRef.current?.querySelector("input")?.parentElement?.click();
+        }
+    }, [editing]);
+    return fieldRef;
+};
+
+/**
+ * Колонка со списком значений в виде выпадающего списка (`control: "dropdown"`).
+ *
+ * Вне фокуса показывает подпись выбранного пункта, а сам список встаёт на фокус — как редакторы
+ * остальных ячеек. Значение не из списка (справочник поменялся, строка пришла из источника)
+ * показывается как есть, по `stringFormat` колонки: так видно, что в данных, а не пустота.
+ */
+const DropdownCell = React.memo(({ attribute, row, canEdit, onChange }) => {
+    const { t } = useGlobalContext();
+    const { editing, buttonProps, editorProps, close } = useCellEditing();
+    const fieldRef = useDropdownAutoOpen(editing);
+    const { attributeName, type, isEditable, stringFormat, multiline, listOptions = [] } = attribute;
+    const value = row.properties[attributeName];
+    const text = React.useMemo(() => {
+        if (lodash.isNil(value)) {
+            return "";
+        }
+        return findListOption(listOptions, value)?.text ?? formatAttributeValue({ t, type, value, stringFormat });
+    }, [listOptions, stringFormat, t, type, value]);
+    // Значения пунктов `Dropdown` сравнивает строго и только строками — числовые варианты иначе
+    // не нашли бы себя в выбранном. Первым идёт пустой пункт: без него очистить ячейку нечем.
+    const dropdownOptions = React.useMemo(() => [EMPTY_LIST_OPTION, ...listOptions.map(({ text: optionText, value: optionValue }) => ({
+            text: optionText,
+            value: String(optionValue),
+        }))], [listOptions]);
+    const handleChange = React.useCallback(([selected]) => {
+        const next = findListOption(listOptions, selected?.value)?.value ?? null;
+        if (!isSameListValue(next, value)) {
+            onChange(row.key, attributeName, next);
+        }
+        close();
+    }, [attributeName, close, listOptions, onChange, row.key, value]);
+    if (!canEdit || !isEditable) {
+        return (jsxRuntime.jsx(CellText, { "$multiline": multiline, title: text, children: text || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) }));
+    }
+    if (!editing) {
+        return (jsxRuntime.jsx(CellButton, { type: "button", "$multiline": multiline, ...buttonProps, children: text || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) }));
+    }
+    return (jsxRuntime.jsxs(CellEditor, { ...editorProps, children: [jsxRuntime.jsx(CellGhost, { "$multiline": multiline, children: text || "—" }), jsxRuntime.jsx(CellField, { ref: fieldRef, children: jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, searchable: true, searchPlaceholder: t("structuredData.searchPlaceholder", { ns: "dashboard", defaultValue: "Найти" }), width: "100%", menuMinWidth: "12rem", options: dropdownOptions, value: lodash.isNil(value) ? "" : String(value), onChange: handleChange }) })] }));
+});
+
+/**
+ * Значение ячейки не изменилось.
+ *
+ * Даты сравниваем моментом времени, а не строкой: `DatePicker` отдаёт ISO с миллисекундами и
+ * повторяет текущее значение на каждый уход фокуса из поля — без этой проверки строка
+ * помечалась бы изменённой от одного лишь клика по иконке календаря.
+ */
+const isSameCellValue = (next, current, type) => {
+    if (type === api.AttributeType.DateTime && next && current) {
+        return new Date(next).getTime() === new Date(current).getTime();
+    }
+    return next === current;
 };
 
 /**
@@ -16770,7 +17079,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, colorPicker } = attribute;
+    const { attributeName, type, subType, isEditable, stringFormat, multiline, colorPicker, control, listOptions } = attribute;
     const value = row.properties[attributeName];
     const handleChange = React.useCallback((next) => {
         // Пустые правки отбрасываем: иначе строка становилась бы «изменённой» от простого
@@ -16799,6 +17108,11 @@ const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     if (colorPicker) {
         return jsxRuntime.jsx(ColorCell, { attribute: attribute, row: row, canEdit: canEdit, onChange: onChange });
     }
+    // Колонка со списком значений: вводить можно только то, что в списке, поэтому и редактор у неё
+    // свой — ряд кнопок либо выпадающий список, каким бы ни был тип атрибута.
+    if (listOptions) {
+        return control === "chips" ? (jsxRuntime.jsx(ChipsCell, { attribute: attribute, row: row, canEdit: canEdit, onChange: onChange })) : (jsxRuntime.jsx(DropdownCell, { attribute: attribute, row: row, canEdit: canEdit, onChange: onChange }));
+    }
     // Логическое значение и на чтение показываем галкой, а не словами «true»/«false» —
     // так же, как остальной дашборд рисует булевы атрибуты.
     if (type === api.AttributeType.Boolean) {
@@ -16967,6 +17281,14 @@ const compareValues = (left, right, type) => {
     // `numeric: true` держит строки с числами в человеческом порядке: «Дом 2» перед «Дом 10».
     return String(left).localeCompare(String(right), undefined, { numeric: true });
 };
+/**
+ * Значение, по которому строка встаёт в порядок. У колонки со списком это подпись пункта, а не
+ * записанное значение: пользователь видит подписи, и порядок по скрытым id выглядел бы случайным.
+ */
+const getSortValue = (row, attributeName, listOptions) => {
+    const value = row.properties[attributeName];
+    return listOptions ? findListOption(listOptions, value)?.text ?? value : value;
+};
 /**
  * Сортировка представления. Порядок строк в черновике не меняется — он же уходит в фильтр,
  * а сортировка остаётся видом.
@@ -16978,15 +17300,17 @@ const sortRows = (rows, sort, schema) => {
     if (!sort) {
         return rows;
     }
-    const { type } = schema.find(({ attributeName }) => attributeName === sort.attributeName) || {};
+    const { type, listOptions } = schema.find(({ attributeName }) => attributeName === sort.attributeName) || {};
     const direction = sort.direction === "asc" ? 1 : -1;
+    // Подписи списка сравниваются как строки, какого бы типа ни было само значение.
+    const compareType = listOptions ? api.AttributeType.String : type;
     return [...rows].sort((leftRow, rightRow) => {
-        const left = leftRow.properties[sort.attributeName];
-        const right = rightRow.properties[sort.attributeName];
+        const left = getSortValue(leftRow, sort.attributeName, listOptions);
+        const right = getSortValue(rightRow, sort.attributeName, listOptions);
         if (isEmptyValue(left) || isEmptyValue(right)) {
             return isEmptyValue(left) && isEmptyValue(right) ? 0 : isEmptyValue(left) ? 1 : -1;
         }
-        return compareValues(left, right, type) * direction;
+        return compareValues(left, right, compareType) * direction;
     });
 };
 /** Клик по заголовку: по возрастанию → по убыванию → исходный порядок. */
@@ -17635,11 +17959,22 @@ const ModalTitleText = styled(uilibGl.Flex).withConfig({ displayName: "ModalTitl
 const ModalCloseButton = styled(uilibGl.IconButton).withConfig({ displayName: "ModalCloseButton", componentId: "sc-7ns06w" }) `
   margin: -0.625rem -1rem 0 1rem;
 `;
+/**
+ * Каждого прямого ребёнка модалки `ContainerChildren` (`isMain`) оборачивает карточкой дашборда
+ * `ContainerWrapper`. `noBorders` снимает с неё тень и отступ, но не фон (90% белого) и не
+ * `backdrop-filter` — поверх шапки они легли бы белой размытой подложкой под каждым ребёнком.
+ * Селектор прямой: вложенные карточки страниц внутри содержимого остаются как есть.
+ */
 const ModalContent = styled(uilibGl.DialogContent).withConfig({ displayName: "ModalContent", componentId: "sc-1p8tdpb" }) `
   && {
     padding: 0 calc(${MODAL_PADDING} - ${MODAL_SCROLLBAR_WIDTH}) 0 ${MODAL_PADDING};
     scrollbar-gutter: stable;
   }
+
+  > ${Container} > ${ContainerWrapper} {
+    background: transparent;
+    backdrop-filter: none;
+  }
 `;
 
 const isHiddenEmptyValue = ({ value, children, hideEmpty, renderElement, }) => {
@@ -18503,138 +18838,6 @@ const ChipsContainer = styled(uilibGl.Flex).withConfig({ displayName: "ChipsCont
   justify-content: ${({ $align }) => getJustifyContent($align)};
 `;
 
-const FilterChip = styled.div.withConfig({ displayName: "FilterChip", componentId: "sc-17fod1d" }) `
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.3125rem 0.5rem;
-  height: 1.5rem;
-  border-radius: 0.25rem;
-  background-color: ${({ $isActive, $bgColor, theme }) => $bgColor
-    ? $bgColor
-    : $isActive
-        ? theme.palette?.primary
-        : theme.palette?.elementLight};
-  color: ${({ $isActive, $textColor, theme }) => $textColor
-    ? $textColor
-    : $isActive
-        ? theme.palette?.textContrast
-        : theme.palette?.textSecondary};
-  cursor: pointer;
-  font-size: 0.75rem;
-  line-height: 0.875rem;
-  white-space: nowrap;
-  flex-shrink: 0;
-  transition: all 0.2s ease-in-out;
-  margin: 0 0.25rem 0 0;
-  box-sizing: border-box;
-
-  &:hover {
-    background-color: ${({ $isActive, $bgColor, theme }) => $isActive
-    ? $bgColor || 'inherit'
-    : $bgColor || theme.palette?.elementDark};
-  }
-`;
-const ChipIconWrapper = styled.span.withConfig({ displayName: "ChipIconWrapper", componentId: "sc-8j3rkq" }) `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
-
-  svg, img {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-`;
-const ChipText = styled.span.withConfig({ displayName: "ChipText", componentId: "sc-1saygd0" }) `
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  ${({ $maxTextWidth }) => $maxTextWidth && `max-width: ${$maxTextWidth / 16}rem;`}
-`;
-
-const CustomChip = ({ text, icon, color, primary, secondary, error, disabled, isActive, maxTextWidth, fontColor: customFontColor, backgroundColor: customBackgroundColor, ...props }) => {
-    const theme = styled.useTheme();
-    const { palette } = theme;
-    // Helper to add transparency to hex color
-    const addTransparency = (hex, transparency = '1f') => {
-        // Ensure hex starts with #
-        const cleanHex = hex.startsWith('#') ? hex : `#${hex}`;
-        return `${cleanHex}${transparency}`;
-    };
-    // Calculate colors based on priority:
-    // 1. customFontColor / customBackgroundColor (highest, from options)
-    // 2. color (from attribute)
-    // 3. primary/secondary/error
-    // 4. default theme colors
-    let bgColor;
-    let textColor;
-    if (isActive) {
-        // Priority 1: Custom colors from options
-        if (customFontColor) {
-            textColor = customFontColor;
-            bgColor = customBackgroundColor || addTransparency(customFontColor); // 12% opacity
-        }
-        // Priority 2: Color from attribute
-        else if (color) {
-            textColor = palette.textPrimary; // White text for active chip
-            bgColor = color; // Full color without transparency
-        }
-        // Priority 3: Variant colors
-        else if (primary) {
-            bgColor = theme.message.color.success; // Green
-            textColor = palette.textContrast;
-        }
-        else if (secondary) {
-            bgColor = palette.primary;
-            textColor = palette.textContrast;
-        }
-        else if (error) {
-            bgColor = theme.message.color.warning; // Yellow
-            textColor = palette.textPrimary;
-        }
-        // Priority 4: Default - no colors specified
-        else {
-            textColor = palette.primary;
-            bgColor = addTransparency(palette.primary); // palette.primary + 12%
-        }
-    }
-    else {
-        // Inactive state
-        if (color) {
-            textColor = color; // Use color for text
-            bgColor = addTransparency(color); // Uses default 1f (12%) transparency
-        }
-        // else: No color attribute - leave bgColor and textColor undefined
-        // Styled component will use fallback for inactive: bg = rgba(0,0,0,0.06), text = palette.textSecondary
-    }
-    const renderIcon = React.useCallback((iconValue) => {
-        if (!iconValue) {
-            return null;
-        }
-        // If icon doesn't contain a dot and doesn't start with /sp/, it's a built-in icon from uilib-gl
-        if (!iconValue.includes(".") && !iconValue.startsWith("/sp/")) {
-            return jsxRuntime.jsx(uilibGl.Icon, { kind: iconValue });
-        }
-        // If it's an SVG file or resourceId path, use SvgImage component
-        const isSvg = iconValue.endsWith(".svg") || iconValue.startsWith("/sp/resources/file/");
-        if (isSvg) {
-            const iconColor = textColor
-                ? textColor
-                : isActive
-                    ? palette.textContrast
-                    : palette.textSecondary;
-            return (jsxRuntime.jsx(SvgImage, { url: iconValue, width: 14, height: 14, fontColor: iconColor }));
-        }
-        // Otherwise, it's a regular image
-        return jsxRuntime.jsx("img", { src: iconValue, alt: "" });
-    }, [isActive, textColor, palette.textContrast, palette.textSecondary]);
-    return (jsxRuntime.jsxs(FilterChip, { "$isActive": isActive, "$bgColor": bgColor, "$textColor": textColor, ...props, children: [icon && jsxRuntime.jsx(ChipIconWrapper, { children: renderIcon(icon) }), jsxRuntime.jsx(ChipText, { "$maxTextWidth": maxTextWidth, children: text })] }));
-};
-
 const ChipsFilter = ({ type, filter, elementConfig, }) => {
     const { filters, dataSources, changeFilters } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);