@evergis/react 4.0.167 → 4.0.168

package/dist/react.esm.js

@@ -5152,7 +5152,7 @@ const FeatureControls = styled(Flex).withConfig({ displayName: "FeatureControls"
 const FiltersContainerWrapper = styled(Flex).withConfig({ displayName: "FiltersContainerWrapper", componentId: "sc-1a6ru74" }) `
   flex-direction: column;
   padding: ${({ $padding }) => $padding ?? `${DEFAULT_FILTER_PADDING}px`};
-  background-color: ${({ $bgColor, $fontColor, theme: { palette } }) => $bgColor || ($fontColor ? transparentizeColor($fontColor, 6) : palette.element)};
+  background: ${({ $bgColor, $fontColor, theme: { palette } }) => $bgColor || ($fontColor ? transparentizeColor($fontColor, 6) : palette.element)};
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
 
   ${DropdownField}, input {
@@ -8946,7 +8946,7 @@ const POLL_SUBTASK_INTERVAL_MS = 500;
 const POLL_SUBTASK_TIMEOUT_MS = 15_000;
 
 const StatusBadge = styled(Chip).withConfig({ displayName: "StatusBadge", componentId: "sc-1xmfl10" }) `
-  background-color: ${({ bgColor }) => bgColor};
+  background: ${({ bgColor }) => bgColor};
   color: ${({ theme }) => theme.palette.iconContrast};
 `;
 
@@ -11291,7 +11291,7 @@ const FilterChip = styled.div.withConfig({ displayName: "FilterChip", componentI
   padding: 0.3125rem 0.5rem;
   height: 1.5rem;
   border-radius: 0.25rem;
-  background-color: ${({ $isActive, $bgColor, theme }) => $bgColor
+  background: ${({ $isActive, $bgColor, theme }) => $bgColor
     ? $bgColor
     : $isActive
         ? theme.palette?.primary
@@ -11311,7 +11311,7 @@ const FilterChip = styled.div.withConfig({ displayName: "FilterChip", componentI
   box-sizing: border-box;
 
   &:hover {
-    background-color: ${({ $isActive, $bgColor, theme }) => $isActive
+    background: ${({ $isActive, $bgColor, theme }) => $isActive
     ? $bgColor || 'inherit'
     : $bgColor || theme.palette?.elementDark};
   }
@@ -14556,12 +14556,21 @@ const ContainerBackground = memo(({ elementConfig, renderElement }) => {
     return (jsx(ContainerBackgroundLayer, { "$outflow": elementConfig?.options?.outflow, children: renderElement({ id: BG_IMAGE_SLOT_ID, wrap: false }) }));
 });
 
-const AddFeatureContainer = memo(({ elementConfig, renderElement }) => {
+/** Кнопка нативного действия контейнера со стандартными подстановками дочернего конфига. */
+const ContainerButton = memo(({ type = WidgetType.Dashboard, elementConfig, ...props }) => {
+    const sources = useConfigStringSources(type);
+    const node = useActionNode();
+    const attributes = props.attributes ?? node.attributes ?? sources.attributes;
+    const resolvedConfig = useMemo(() => resolveElementStrings(elementConfig, { ...sources, attributes }), [elementConfig, sources, attributes]);
+    return jsx(ElementButton, { ...props, type: type, attributes: attributes, elementConfig: resolvedConfig });
+});
+
+const AddFeatureContainer = memo(({ type, elementConfig, renderElement }) => {
     const { id, children, style } = elementConfig || {};
     const bgHost = useBgImageHost(elementConfig);
-    return (jsxs(Container, { id: id, style: style, ...bgHost, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), children
-                .filter(({ type }) => type === "button")
-                .map(({ options }, index) => (jsx(AddFeatureButton, { icon: options?.icon, title: options?.title, layerName: options?.layerName, geometryType: options?.geometryType }, index)))] }));
+    const handleAddFeature = useCallback(() => undefined, []);
+    return (jsxs(Container, { id: id, style: style, ...bgHost, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), children?.filter(({ type: childType }) => childType === "button")
+                .map((button, index) => (jsx(ContainerButton, { type: type, elementConfig: button, onClick: handleAddFeature }, button.id ?? index)))] }));
 });
 
 /**
@@ -16495,7 +16504,7 @@ const RoundedBackgroundContainerWrapper = styled(Flex).withConfig({ displayName:
    * иначе фон тонируется цветом иконки, а без неё — цветом текста (colorAttribute/fontColor);
    * если не задан ни один цвет, остаётся токен темы.
    */
-  background-color: ${({ $bgColor, $iconColor, $color, theme: { palette } }) => $bgColor || tintedBackground($iconColor || $color) || palette.element};
+  background: ${({ $bgColor, $iconColor, $color, theme: { palette } }) => $bgColor || tintedBackground($iconColor || $color) || palette.element};
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.large};
   flex-wrap: nowrap;
 
@@ -16566,11 +16575,6 @@ const RoundedBackgroundContainerWrapper = styled(Flex).withConfig({ displayName:
         > * {
           text-align: left;
         }
-
-        /* Зазор наружу даёт обёртка иконки, здесь — отступ внутри её бокса. */
-        span[kind] {
-          margin-right: 0.5rem;
-        }
         
         ${ContainerValue} {
           width: auto;
@@ -17284,7 +17288,7 @@ const TabContainer = styled.a.withConfig({ displayName: "TabContainer", componen
   justify-content: center;
   flex-wrap: nowrap;
   padding: ${({ onlyIcon }) => (onlyIcon ? 1 : 0.5)}rem 1rem;
-  background-color: ${({ active, bgColor, theme: { palette } }) => active ? bgColor || palette.primary : palette.element};
+  background: ${({ active, bgColor, theme: { palette } }) => active ? bgColor || palette.primary : palette.element};
   border-radius: ${({ column, radius, theme: { borderRadius } }) => radius ? `${radius}px` : column ? borderRadius.medium : borderRadius.xLarge};
   text-decoration: none;
 
@@ -17750,22 +17754,22 @@ const useVoteForm = (initialValues) => {
     };
 };
 
-const VoteCreateForm = ({ categories, initialValues, isEditing, canDelete, submitting, onSubmit, onDelete, onCancel, }) => {
+const VoteCreateForm = ({ type, buttonConfigs, categories, initialValues, isEditing, canDelete, submitting, onSubmit, onDelete, onCancel, }) => {
     const { t } = useGlobalContext();
     const form = useVoteForm(initialValues);
     const { categoryId, setCategoryId, text, setText, multiSelect, setMultiSelect, variants, addVariant, removeVariant, draft, setDraft, isValid, values, } = form;
     const categoryOptions = useMemo(() => categories.map(({ id, name }) => ({ text: name, value: id })), [categories]);
+    const submitButton = useMemo(() => isEditing ? buttonConfigs.saveButton : buttonConfigs.createButton, [buttonConfigs, isEditing]);
+    const handleSubmit = useCallback(() => onSubmit(values), [onSubmit, values]);
     return (jsxs(VoteWrapper, { children: [!isEditing && jsx(VoteHeading, { children: t("vote.newVote", { ns: VOTE_NS, defaultValue: "Новое голосование" }) }), jsx(Dropdown, { zIndex: 110000, label: t("vote.category", { ns: VOTE_NS, defaultValue: "Категория" }), width: "100%", placeholder: t("vote.categoryPlaceholder", { ns: VOTE_NS, defaultValue: "Выберите категорию" }), options: categoryOptions, value: categoryId, onChange: items => setCategoryId(String(items[0]?.value ?? "")) }), jsx(Input, { label: t("vote.question", { ns: VOTE_NS, defaultValue: "Вопрос" }), width: "100%", placeholder: t("vote.questionPlaceholder", { ns: VOTE_NS, defaultValue: "Текст вопроса" }), value: text, onChange: ({ target }) => setText(target.value) }), jsx(VoteSectionLabel, { children: t("vote.variants", { ns: VOTE_NS, defaultValue: "Варианты ответов" }) }), !!variants.length && (jsx(VoteChipList, { children: variants.map(({ text: variantText }, index) => (jsxs(VoteChip, { children: [jsx(VoteVariantText, { children: variantText }), jsx(IconButton, { kind: "close", onClick: () => removeVariant(index) })] }, `${variantText}:${index}`))) })), jsx(Input, { width: "100%", placeholder: t("vote.variantPlaceholder", { ns: VOTE_NS, defaultValue: "Введите вариант и нажмите Enter" }), value: draft, onChange: ({ target }) => setDraft(target.value), onKeyDown: event => {
                     if (event.key === "Enter") {
                         event.preventDefault();
                         addVariant();
                     }
-                } }), jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [jsx(VoteSectionLabel, { children: t("vote.multiSelect", { ns: VOTE_NS, defaultValue: "Множественный выбор" }) }), jsx(Switch, { checked: multiSelect, onChange: () => setMultiSelect(prev => !prev) })] }), jsx(RaisedButton, { primary: true, disabled: !isValid || submitting, onClick: () => onSubmit(values), children: isEditing
-                    ? t("vote.save", { ns: VOTE_NS, defaultValue: "Сохранить" })
-                    : t("vote.create", { ns: VOTE_NS, defaultValue: "Создать голосование" }) }), !isValid && (jsx(VoteHint, { children: t("vote.formHint", {
+                } }), jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [jsx(VoteSectionLabel, { children: t("vote.multiSelect", { ns: VOTE_NS, defaultValue: "Множественный выбор" }) }), jsx(Switch, { checked: multiSelect, onChange: () => setMultiSelect(prev => !prev) })] }), submitButton && (jsx(ContainerButton, { type: type, elementConfig: submitButton, disabled: !isValid || submitting, onClick: handleSubmit })), !isValid && (jsx(VoteHint, { children: t("vote.formHint", {
                     ns: VOTE_NS,
                     defaultValue: "Нужны категория, вопрос и минимум два варианта ответа",
-                }) })), isEditing && (jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [onCancel && (jsx(VoteEditLink, { onClick: onCancel, children: t("vote.cancel", { ns: VOTE_NS, defaultValue: "Отмена" }) })), canDelete && onDelete && (jsx(RaisedButton, { error: true, disabled: submitting, onClick: onDelete, children: t("vote.delete", { ns: VOTE_NS, defaultValue: "Удалить голосование" }) }))] }))] }));
+                }) })), isEditing && (jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [onCancel && (jsx(VoteEditLink, { onClick: onCancel, children: t("vote.cancel", { ns: VOTE_NS, defaultValue: "Отмена" }) })), canDelete && onDelete && buttonConfigs.deleteButton && (jsx(ContainerButton, { type: type, elementConfig: buttonConfigs.deleteButton, disabled: submitting, onClick: onDelete }))] }))] }));
 };
 
 /** Блок «Поделиться в соцсетях» — пока только вёрстка, без рабочих ссылок. */
@@ -17774,7 +17778,7 @@ const VoteShare = () => {
     return (jsxs(VoteShareBlock, { children: [jsx(VoteSectionLabel, { children: t("vote.share", { ns: VOTE_NS, defaultValue: "Поделиться в соцсетях" }) }), jsx(VoteShareChips, { children: VOTE_SOCIALS.map(name => (jsx(VoteShareChip, { children: name }, name))) })] }));
 };
 
-const VoteResults = ({ question, category, results, screen, isOwner, hasAnswers, submitting, onSubmit, onEdit, }) => {
+const VoteResults = ({ type, buttonConfigs, question, category, results, screen, isOwner, hasAnswers, submitting, onSubmit, onEdit, }) => {
     const { t } = useGlobalContext();
     const [selected, setSelected] = useState([]);
     const showControls = screen === "voting";
@@ -17788,8 +17792,9 @@ const VoteResults = ({ question, category, results, screen, isOwner, hasAnswers,
         });
     }, [question.multiSelect]);
     const canSubmit = useMemo(() => selected.length > 0 && !submitting, [selected.length, submitting]);
+    const handleSubmit = useCallback(() => onSubmit(selected), [onSubmit, selected]);
     return (jsxs(VoteWrapper, { children: [category && jsx(VoteCategoryLabel, { children: category.name }), jsx(VoteQuestionText, { children: question.text }), jsx(VoteVariantList, { column: true, value: selected[0] ?? "", children: results.map(({ id, text, count, percent }) => (jsxs(VoteVariantRow, { children: [jsxs(VoteVariantHead, { children: [showControls &&
-                                    (question.multiSelect ? (jsx(Checkbox, { checked: selected.includes(id), onChange: () => toggle(id) })) : (jsx(Radio, { value: id, checked: selected.includes(id), onChange: () => toggle(id) }))), jsx(VoteVariantText, { children: text }), jsx(VoteVariantCount, { children: count })] }), jsx(LinearProgress, { done: percent })] }, id))) }), screen === "unauthenticated" && (jsx(VoteHint, { children: t("vote.authHint", { ns: VOTE_NS, defaultValue: "Чтобы проголосовать, пожалуйста, авторизуйтесь" }) })), screen === "voted" && (jsxs(VoteAcceptedBadge, { children: [jsx(Icon, { kind: "success" }), t("vote.accepted", { ns: VOTE_NS, defaultValue: "Ваш ответ принят" })] })), showControls && (jsx(RaisedButton, { primary: true, disabled: !canSubmit, onClick: () => onSubmit(selected), children: t("vote.submit", { ns: VOTE_NS, defaultValue: "Отправить ответ" }) })), canEdit && onEdit && (jsx(Flex, { children: jsx(VoteEditLink, { onClick: onEdit, children: t("vote.edit", { ns: VOTE_NS, defaultValue: "Редактировать" }) }) })), showShare && jsx(VoteShare, {})] }));
+                                    (question.multiSelect ? (jsx(Checkbox, { checked: selected.includes(id), onChange: () => toggle(id) })) : (jsx(Radio, { value: id, checked: selected.includes(id), onChange: () => toggle(id) }))), jsx(VoteVariantText, { children: text }), jsx(VoteVariantCount, { children: count })] }), jsx(LinearProgress, { done: percent })] }, id))) }), screen === "unauthenticated" && (jsx(VoteHint, { children: t("vote.authHint", { ns: VOTE_NS, defaultValue: "Чтобы проголосовать, пожалуйста, авторизуйтесь" }) })), screen === "voted" && (jsxs(VoteAcceptedBadge, { children: [jsx(Icon, { kind: "success" }), t("vote.accepted", { ns: VOTE_NS, defaultValue: "Ваш ответ принят" })] })), showControls && buttonConfigs.submitButton && (jsx(ContainerButton, { type: type, elementConfig: buttonConfigs.submitButton, disabled: !canSubmit, onClick: handleSubmit })), canEdit && onEdit && (jsx(Flex, { children: jsx(VoteEditLink, { onClick: onEdit, children: t("vote.edit", { ns: VOTE_NS, defaultValue: "Редактировать" }) }) })), showShare && jsx(VoteShare, {})] }));
 };
 
 /**
@@ -17798,7 +17803,7 @@ const VoteResults = ({ question, category, results, screen, isOwner, hasAnswers,
  * Живёт отдельно от `VoteContainer`, потому что тот отвечает за корень контейнера — размеры,
  * фон и заголовок — и не должен раздуваться ветвлением по состояниям.
  */
-const VoteScreen = ({ screen, categories, question, category, results, totalVotes, isOwner, hasAnswers, isEditing, setIsEditing, editInitialValues, submitting, createVote, submitAnswer, editVote, deleteVote, }) => {
+const VoteScreen = ({ type, buttonConfigs, screen, categories, question, category, results, totalVotes, isOwner, hasAnswers, isEditing, setIsEditing, editInitialValues, submitting, createVote, submitAnswer, editVote, deleteVote, }) => {
     const handleCreate = useCallback((values) => void createVote(values), [createVote]);
     const handleEdit = useCallback((values) => void editVote(values).then(() => setIsEditing(false)), [editVote, setIsEditing]);
     const handleDelete = useCallback(() => void deleteVote().then(() => setIsEditing(false)), [deleteVote, setIsEditing]);
@@ -17808,14 +17813,14 @@ const VoteScreen = ({ screen, categories, question, category, results, totalVote
     if (screen === "loading")
         return jsx(ContainerLoading, {});
     if (isEditing && question) {
-        return (jsx(VoteCreateForm, { categories: categories, initialValues: editInitialValues, isEditing: true, canDelete: !hasAnswers, submitting: submitting, onSubmit: handleEdit, onDelete: handleDelete, onCancel: handleCancel }));
+        return (jsx(VoteCreateForm, { type: type, buttonConfigs: buttonConfigs, categories: categories, initialValues: editInitialValues, isEditing: true, canDelete: !hasAnswers, submitting: submitting, onSubmit: handleEdit, onDelete: handleDelete, onCancel: handleCancel }));
     }
     if (screen === "create") {
-        return (jsx(VoteCreateForm, { categories: categories, isEditing: false, canDelete: false, submitting: submitting, onSubmit: handleCreate }));
+        return (jsx(VoteCreateForm, { type: type, buttonConfigs: buttonConfigs, categories: categories, isEditing: false, canDelete: false, submitting: submitting, onSubmit: handleCreate }));
     }
     if (!question)
         return null;
-    return (jsx(VoteResults, { question: question, category: category, results: results, totalVotes: totalVotes, screen: screen, isOwner: isOwner, hasAnswers: hasAnswers, submitting: submitting, onSubmit: handleSubmitAnswer, onEdit: handleEditOpen }));
+    return (jsx(VoteResults, { type: type, buttonConfigs: buttonConfigs, question: question, category: category, results: results, totalVotes: totalVotes, screen: screen, isOwner: isOwner, hasAnswers: hasAnswers, submitting: submitting, onSubmit: handleSubmitAnswer, onEdit: handleEditOpen }));
 };
 
 /** Приводит значение атрибута к строке-идентификатору (id приходят числами/строками). */
@@ -18242,6 +18247,9 @@ const useVoteContainer = (elementConfig) => {
     };
 };
 
+/** Слот кнопки существует только при совпадении id и явном type: "button". */
+const getButtonSlot = (children, id) => children?.find((child) => child.id === id && child.type === "button");
+
 /**
  * Контейнер «Голосование»: привязывает опрос к объекту карты через `attributeName`
  * и показывает один из экранов — создание, голосование, после голосования
@@ -18253,6 +18261,13 @@ const useVoteContainer = (elementConfig) => {
 const VoteContainer = memo(({ type, elementConfig, isVisible, renderElement }) => {
     const { root, body } = useContainerRoot({ elementConfig });
     const { configured, ...vote } = useVoteContainer(elementConfig);
+    const children = elementConfig?.children;
+    const buttonConfigs = useMemo(() => ({
+        submitButton: getButtonSlot(children, "submitButton"),
+        createButton: getButtonSlot(children, "createButton"),
+        saveButton: getButtonSlot(children, "saveButton"),
+        deleteButton: getButtonSlot(children, "deleteButton"),
+    }), [children]);
     // Без имени атрибута или хотя бы одного источника контейнеру не с чем работать. Ошибка вместо
     // пустоты: молчаливый `null` выдавал бы опечатку в конфиге за «блока просто нет».
     if (!configured) {
@@ -18262,7 +18277,7 @@ const VoteContainer = memo(({ type, elementConfig, isVisible, renderElement }) =
     // в карточке в этом случае тоже не нужен, поэтому не рисуем и корень.
     if (!vote.screen)
         return null;
-    return (jsxs(ContainerRoot, { ...root, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(Container, { ...body, isColumn: true, children: jsx(VoteScreen, { ...vote, screen: vote.screen }) }))] }));
+    return (jsxs(ContainerRoot, { ...root, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(Container, { ...body, isColumn: true, children: jsx(VoteScreen, { ...vote, screen: vote.screen, type: type, buttonConfigs: buttonConfigs }) }))] }));
 });
 
 const ExpandableTitle = memo(({ elementConfig, type, renderElement }) => {
@@ -18878,12 +18893,11 @@ const ContainersGroupContainer = memo(props => {
 });
 
 const ExportPdfContainer = memo(({ type, elementConfig, renderElement }) => {
-    const { t } = useGlobalContext();
     const { loading, onExport } = useExportPdf(getRootElementId(type));
-    const { id, style, options } = elementConfig || {};
-    const { icon, title } = options || {};
+    const { id, style, children } = elementConfig || {};
+    const buttonConfig = useMemo(() => getButtonSlot(children, "button"), [children]);
     const bgHost = useBgImageHost(elementConfig);
-    return (jsxs(Container, { id: id, style: style, ...bgHost, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsx(IconButton, { kind: icon || "download", primary: true, disabled: loading, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) })] }));
+    return (jsxs(Container, { id: id, style: style, ...bgHost, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), buttonConfig && jsx(ContainerButton, { type: type, elementConfig: buttonConfig, disabled: loading, onClick: onExport })] }));
 });
 
 var ThemeName;