@evergis/react 4.0.61 → 4.0.63

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

@@ -403,7 +403,7 @@ export interface SlideshowContainerConfig extends Omit<ConfigContainerChild, "op
 export interface SlideshowContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: SlideshowContainerConfig;
 }
-export type TabsContainerOptions = Pick<ConfigOptions, "radius" | "column" | "bgColor" | "noBg" | "onlyIcon" | "shownItems" | "maxLength">;
+export type TabsContainerOptions = Pick<ConfigOptions, "radius" | "column" | "bgColor" | "noBg" | "onlyIcon" | "shownItems" | "maxLength" | "wordBreak">;
 export type TabOptions = Pick<ConfigOptions, "icon">;
 export interface TabChild extends Omit<ConfigContainerChild, "options" | "type" | "children"> {
     options?: TabOptions;
@@ -416,7 +416,7 @@ export interface TabsContainerConfig extends Omit<ConfigContainerChild, "options
 export interface TabsContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: TabsContainerConfig;
 }
-export type TaskContainerOptions = Pick<ConfigOptions, "title" | "relatedResources" | "center" | "icon" | "statusColors" | "responseFilters">;
+export type TaskContainerOptions = Pick<ConfigOptions, "title" | "relatedResources" | "center" | "icon" | "statusColors" | "responseFilters" | "useNotifications">;
 export interface TaskContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.Task;
     options?: TaskContainerOptions;

package/dist/components/Dashboard/components/TextTrim/index.d.ts

@@ -1,5 +1,7 @@
 import { FC } from 'react';
+import { ConfigTextDisplayOptions } from '../../types';
 type TextTrimProps = {
+    wordBreak?: ConfigTextDisplayOptions["wordBreak"];
     maxLength?: number;
     expandable?: boolean;
     lineBreak?: string;

package/dist/components/Dashboard/components/TextTrim/styled.d.ts

@@ -0,0 +1,4 @@
+import { ConfigTextDisplayOptions } from '../../types';
+export declare const TextTrimValue: import('styled-components').StyledComponent<"div", any, {
+    wordBreak?: ConfigTextDisplayOptions["wordBreak"];
+}, never>;

package/dist/components/Dashboard/containers/TaskContainer/useTaskNotifications.d.ts

@@ -0,0 +1,9 @@
+import { RemoteTaskStatus } from '@evergis/api';
+interface UseTaskNotificationsParams {
+    enabled: boolean;
+    status: RemoteTaskStatus;
+    lastMessage: string | null;
+    openLog: () => void;
+}
+export declare const useTaskNotifications: ({ enabled, status, lastMessage, openLog, }: UseTaskNotificationsParams) => void;
+export {};

package/dist/components/Dashboard/elements/ElementImage/useElementImage.d.ts

@@ -0,0 +1,11 @@
+import { ConfigContainerChild, WidgetType } from '../../types';
+interface UseElementImageProps {
+    type?: WidgetType;
+    elementConfig?: ConfigContainerChild;
+}
+interface UseElementImageResult {
+    src: string | null;
+    alt: string;
+}
+export declare const useElementImage: ({ type, elementConfig, }: UseElementImageProps) => UseElementImageResult;
+export {};

package/dist/components/Dashboard/hooks/useGlobalContext.d.ts

@@ -5,4 +5,11 @@ export declare const useGlobalContext: () => {
     themeName: import('../../..').ThemeName;
     api: import('@evergis/api').Api;
     ewktGeometry: string;
+    notification: {
+        add: (item: import('@evergis/uilib-gl').INotificationItem) => void;
+        update: (patch: Partial<import('@evergis/uilib-gl').INotificationItem> & {
+            id: string;
+        }) => void;
+        close: (id: string) => void;
+    };
 };

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

@@ -184,6 +184,7 @@ export interface ConfigTextDisplayOptions {
     hideTitle?: boolean;
     simple?: boolean;
     maxLength?: number;
+    wordBreak?: "break-word" | "break-all";
     separator?: string;
     lineBreak?: string;
 }
@@ -261,6 +262,7 @@ export interface ConfigMiscOptions {
     tabId?: string;
     downloadById?: string;
     parentResourceId?: string;
+    useNotifications?: boolean;
 }
 /**
  * Flat-объединение всех доменных миксинов. Существующие места, использующие

package/dist/contexts/GlobalContext/types.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { i18n } from 'i18next';
 import { Api } from '@evergis/api';
+import { INotificationItem } from '@evergis/uilib-gl';
 import { ThemeName } from '../../types';
 export type GlobalContextProps = PropsWithChildren<{
     t?: i18n["t"];
@@ -8,4 +9,11 @@ export type GlobalContextProps = PropsWithChildren<{
     ewktGeometry?: string;
     themeName?: ThemeName;
     api?: Api;
+    notification?: {
+        add: (item: INotificationItem) => void;
+        update: (patch: Partial<INotificationItem> & {
+            id: string;
+        }) => void;
+        close: (id: string) => void;
+    };
 }>;

package/dist/hooks/task/usePythonTask.d.ts

@@ -11,6 +11,7 @@ export declare const usePythonTask: () => {
     stopTask: () => Promise<void>;
     openLog: () => void;
     log: string;
+    lastMessage: string;
     error: Error;
     status: RemoteTaskStatus;
     loading: boolean;

package/dist/index.js

@@ -4217,7 +4217,7 @@ const useAttachmentItems = ({ type, elementConfig, valueOverride, }) => {
 };
 
 const useGlobalContext = () => {
-    const { t, language, themeName, api, ewktGeometry } = React.useContext(GlobalContext) || {};
+    const { t, language, themeName, api, ewktGeometry, notification } = React.useContext(GlobalContext) || {};
     const translate = React.useCallback((value, options) => {
         if (t)
             return t(value, options);
@@ -4229,7 +4229,8 @@ const useGlobalContext = () => {
         themeName,
         api,
         ewktGeometry,
-    }), [language, translate, api, ewktGeometry, themeName]);
+        notification,
+    }), [language, translate, api, ewktGeometry, themeName, notification]);
 };
 
 const GRID_TILE_SIZE = "4.5rem";
@@ -5622,6 +5623,7 @@ const usePythonTask = () => {
     const { preparePythonSandbox } = usePythonSandbox();
     const [status, setStatus] = React.useState(api.RemoteTaskStatus.Unknown);
     const [log, setLog] = React.useState(null);
+    const [lastMessage, setLastMessage] = React.useState(null);
     const [error, setError] = React.useState(null);
     const [loading, setLoading] = React.useState(false);
     const [executionTime, setExecutionTime] = React.useState(null);
@@ -5643,6 +5645,7 @@ const usePythonTask = () => {
         reset();
         setStatus(api.RemoteTaskStatus.Process);
         setLog(null);
+        setLastMessage(null);
         setLoading(true);
         const start = Date.now();
         let prototypeId = await api$1.remoteTaskManager.createTaskPrototype({
@@ -5683,6 +5686,8 @@ const usePythonTask = () => {
                 const isFinished = [api.RemoteTaskStatus.Completed, api.RemoteTaskStatus.Error].includes(data.status);
                 setStatus(data.status);
                 setLog([logRef.current, data.log].filter(Boolean).join("\n"));
+                if (data.log)
+                    setLastMessage(data.log);
                 setExecutionTime(Date.now() - start);
                 setLoading(false);
                 setTaskId(isFinished ? null : newTaskId);
@@ -5735,6 +5740,7 @@ const usePythonTask = () => {
         stopTask,
         openLog,
         log,
+        lastMessage,
         error,
         status,
         loading,
@@ -6254,7 +6260,7 @@ const formatElementValue = ({ t, value, elementConfig, attributes, wrap, }) => {
 
 const getAttributeValue = (element, attributes) => {
     const attribute = getAttributeByName(element?.attributeName, attributes);
-    const { maxLength, separator, expandable, lineBreak } = element.options || {};
+    const { maxLength, wordBreak, separator, expandable, lineBreak } = element.options || {};
     let value;
     if (attribute?.type === api.AttributeType.Boolean && typeof attribute.value === "boolean") {
         return jsxRuntime.jsx(DashboardCheckbox, { title: attribute.alias || attribute.attributeName, checked: attribute.value });
@@ -6269,7 +6275,7 @@ const getAttributeValue = (element, attributes) => {
             ? JSON.stringify(rawValue)
             : (rawValue || "");
     }
-    return typeof value === "string" && maxLength && maxLength < value.length ? (jsxRuntime.jsx(TextTrim, { maxLength: maxLength, expandable: expandable, lineBreak: lineBreak, children: value })) : (value);
+    return typeof value === "string" && maxLength && maxLength < value.length ? (jsxRuntime.jsx(TextTrim, { maxLength: maxLength, wordBreak: wordBreak, expandable: expandable, lineBreak: lineBreak, children: value })) : (value);
 };
 
 const getChartAxes = (chartElement) => chartElement?.options?.relatedDataSources?.filter(({ chartAxis }) => chartAxis === "y");
@@ -7399,7 +7405,7 @@ const TabsContainer = React.memo(({ elementConfig, type }) => {
     const { palette } = styled.useTheme();
     const { selectedTabId, setSelectedTabId } = useWidgetContext(type);
     const { id, options, style, children: tabs } = elementConfig || {};
-    const { radius, column, bgColor, noBg, onlyIcon, shownItems, maxLength = 12 } = options || {};
+    const { radius, column, bgColor, noBg, onlyIcon, shownItems, maxLength = 12, wordBreak } = options || {};
     const renderIcon = React.useCallback((icon, active) => {
         if (!icon)
             return null;
@@ -7407,16 +7413,16 @@ const TabsContainer = React.memo(({ elementConfig, type }) => {
             return jsxRuntime.jsx(uilibGl.Icon, { kind: icon });
         return icon.endsWith(".svg") ? (jsxRuntime.jsx(SvgImage, { url: icon, width: 16, fontColor: active ? palette.textContrast : palette.textSecondary })) : (jsxRuntime.jsx("img", { src: icon, alt: "" }));
     }, [palette.textContrast, palette.textSecondary]);
-    const onClick = React.useCallback((id) => {
-        setSelectedTabId(id);
-        window.location.hash = `#${id}`;
+    const onClick = React.useCallback((tabId) => {
+        setSelectedTabId(tabId);
+        window.location.hash = `#${tabId}`;
     }, [setSelectedTabId]);
     React.useEffect(() => {
         if (!selectedTabId) {
             setSelectedTabId(tabs[0].id);
         }
     }, []);
-    return (jsxRuntime.jsx(SwiperContainer, { id: id, style: style, children: jsxRuntime.jsx(react.Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id, value, options: tabOptions }) => (jsxRuntime.jsxs(react.SwiperSlide, { children: [jsxRuntime.jsxs(TabContainer, { href: `#${id}`, active: selectedTabId === id, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(id), children: [renderIcon(tabOptions?.icon, selectedTabId === id), !onlyIcon && (jsxRuntime.jsx(TabValue, { children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength, children: value }) }))] }), jsxRuntime.jsx(TabAnchor, { id: id })] }, id))) }) }));
+    return (jsxRuntime.jsx(SwiperContainer, { id: id, style: style, children: jsxRuntime.jsx(react.Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id: tabId, value, options: tabOptions }) => (jsxRuntime.jsxs(react.SwiperSlide, { children: [jsxRuntime.jsxs(TabContainer, { href: `#${tabId}`, active: selectedTabId === tabId, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(tabId), children: [renderIcon(tabOptions?.icon, selectedTabId === tabId), !onlyIcon && (jsxRuntime.jsx(TabValue, { children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength, wordBreak: wordBreak, children: value }) }))] }), jsxRuntime.jsx(TabAnchor, { id: tabId })] }, tabId))) }) }));
 });
 
 const ContainerIconValue = styled(uilibGl.Flex) ``;
@@ -7524,7 +7530,7 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
         feature,
     });
     const { id, options, style, children } = elementConfig || {};
-    const { maxLength, center, fontColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute } = options || {};
+    const { maxLength, wordBreak, center, fontColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute } = options || {};
     const iconElement = children?.find(item => item.id === "icon");
     const aliasElement = children?.find(item => item.id === "alias");
     const unitsElement = children?.find(item => item.id === "units");
@@ -7543,7 +7549,7 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
             return null;
         return (jsxRuntime.jsx(uilibGl.FlexSpan, { width: iconElement.options?.width || "1rem", alignItems: "center", mr: "0.5rem", children: renderElement({ id: "icon", wrap: false }) }));
     }, [iconElement, renderElement]);
-    const renderAlias = React.useMemo(() => (jsxRuntime.jsx(ContainerAlias, { style: aliasElement?.style, children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength || ALIAS_DEFAULT_MAX_LENGTH, children: renderElement({ id: "alias", wrap: false }) }) })), [aliasElement?.style, maxLength, renderElement]);
+    const renderAlias = React.useMemo(() => (jsxRuntime.jsx(ContainerAlias, { style: aliasElement?.style, children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength || ALIAS_DEFAULT_MAX_LENGTH, wordBreak: wordBreak, children: renderElement({ id: "alias", wrap: false }) }) })), [aliasElement?.style, maxLength, renderElement, wordBreak]);
     const renderValue = React.useMemo(() => lodash.isNil(value) ? null : (jsxRuntime.jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsxRuntime.jsx(ContainerUnits, { style: unitsElement?.style, children: renderElement({ id: "units" }) }))] })), [valueElement?.style, value, unitsElement, renderElement]);
     if (lodash.isNil(value) && hideEmpty)
         return null;
@@ -7708,14 +7714,93 @@ const buildFiltersFromResponse = (responseFilters, result) => {
     return Object.keys(filters).length ? filters : null;
 };
 
+const RUN_ID_RADIX = 36;
+const RUN_ID_LENGTH = 8;
+const generateRunId = () => `task-${Date.now()}-${Math.random().toString(RUN_ID_RADIX).slice(2, RUN_ID_LENGTH)}`;
+const useTaskNotifications = ({ enabled, status, lastMessage, openLog, }) => {
+    const { t, notification } = useGlobalContext();
+    const runIdRef = React.useRef(null);
+    const prevStatusRef = React.useRef(api.RemoteTaskStatus.Unknown);
+    React.useEffect(() => {
+        if (!enabled) {
+            if (runIdRef.current) {
+                notification?.close(runIdRef.current);
+                runIdRef.current = null;
+            }
+            prevStatusRef.current = status;
+            return;
+        }
+        if (status === api.RemoteTaskStatus.Unknown) {
+            prevStatusRef.current = status;
+            return;
+        }
+        const isFreshRun = status === api.RemoteTaskStatus.Process && prevStatusRef.current !== api.RemoteTaskStatus.Process;
+        if (isFreshRun) {
+            runIdRef.current = generateRunId();
+        }
+        if (!runIdRef.current) {
+            runIdRef.current = generateRunId();
+        }
+        const id = runIdRef.current;
+        const description = lastMessage || t("taskStarted", { ns: "dashboard", defaultValue: "Запуск задачи…" });
+        const button = t("details", { ns: "dashboard", defaultValue: "Подробнее" });
+        const base = {
+            id,
+            title: "",
+            description,
+            duration: Number.MAX_SAFE_INTEGER,
+            button,
+            buttonIcon: "info",
+            buttonColor: "primary",
+            onButtonClick: openLog,
+        };
+        if (status === api.RemoteTaskStatus.Process) {
+            const item = {
+                ...base,
+                title: t("taskInProgress", { ns: "dashboard", defaultValue: "Выполняется" }),
+                progress: true,
+            };
+            if (isFreshRun) {
+                notification?.add(item);
+            }
+            else {
+                notification?.update(item);
+            }
+        }
+        else if (status === api.RemoteTaskStatus.Completed) {
+            notification?.update({
+                ...base,
+                title: t("taskCompleted", { ns: "dashboard", defaultValue: "Выполнено" }),
+                success: true,
+                progress: false,
+            });
+        }
+        else if (status === api.RemoteTaskStatus.Error) {
+            notification?.update({
+                ...base,
+                title: t("taskError", { ns: "dashboard", defaultValue: "Ошибка" }),
+                error: true,
+                progress: false,
+            });
+        }
+        prevStatusRef.current = status;
+    }, [enabled, status, lastMessage, openLog, t, notification]);
+};
+
 const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { t, ewktGeometry } = useGlobalContext();
     const { dataSources, filters: selectedFilters, attributes, layerInfo, changeFilters, } = useWidgetContext(type);
     const { dataSources: projectDataSources } = useWidgetContext(exports.WidgetType.Dashboard);
     const { currentPage } = useWidgetPage(type);
-    const { taskId, runTask, stopTask, status, openLog, loading, isLogDialogOpen, closeLog, log, result, } = usePythonTask();
+    const { taskId, runTask, stopTask, status, openLog, loading, isLogDialogOpen, closeLog, log, lastMessage, result, } = usePythonTask();
     const { options } = elementConfig || {};
-    const { title, relatedResources, center, icon, statusColors, responseFilters } = options || {};
+    const { title, relatedResources, center, icon, statusColors, responseFilters, useNotifications, } = options || {};
+    useTaskNotifications({
+        enabled: !!useNotifications,
+        status,
+        lastMessage,
+        openLog,
+    });
     React.useEffect(() => {
         const filtersToApply = buildFiltersFromResponse(responseFilters, result);
         if (filtersToApply)
@@ -8787,15 +8872,7 @@ const RowHeaderMixin = styled.css `
 const OverlayHeaderMixin = (overlay) => styled.css `
   &&& {
     :after {
-      content: "";
-      z-index: 2;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
       background: ${overlay};
-      pointer-events: none;
     }
   }
 `;
@@ -8851,8 +8928,10 @@ const LayerIconContainer = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 2rem;
-  margin-right: 0.5rem;
+  min-width: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 1rem;
 `;
 const AlertIconContainer = styled(uilibGl.Flex) `
   align-items: center;
@@ -9484,29 +9563,49 @@ const ElementIcon = React.memo(({ type, elementConfig }) => {
     return (jsxRuntime.jsx(StyledIcon, { kind: iconValue, fontSize: fontSize, fontColor: fontColor, style: style }));
 });
 
-const ElementImage = React.memo(({ type, elementConfig }) => {
+const useElementImage = ({ type, elementConfig, }) => {
     const { attributes } = useWidgetContext(type);
-    const { value, attributeName, options, style } = elementConfig || {};
-    const { width } = options || {};
-    const firstImage = React.useMemo(() => {
-        if (value) {
+    const { value, attributeName } = elementConfig || {};
+    const attribute = React.useMemo(() => {
+        if (!attributeName || Array.isArray(attributeName))
+            return undefined;
+        return attributes?.find(item => item.attributeName === attributeName);
+    }, [attributeName, attributes]);
+    const isAttachmentAttribute = attribute?.subType === api.StringSubType.Attachments;
+    const { items } = useAttachmentItems({ type, elementConfig });
+    const imageItems = React.useMemo(() => items
+        .filter(item => IMAGE_FILE_TYPES.includes(getFileType(item.mimeType, item.name)))
+        .slice(0, 1), [items]);
+    const attachmentImages = useAttachmentPreviewImages({
+        items: imageItems,
+        active: isAttachmentAttribute,
+    });
+    const stringUrl = React.useMemo(() => {
+        if (value)
             return getResourceUrl(value.toString());
-        }
-        if (!attributeName || Array.isArray(attributeName)) {
+        if (isAttachmentAttribute)
+            return null;
+        if (!attributeName || Array.isArray(attributeName))
             return null;
-        }
-        const attribute = attributes?.find(item => item.attributeName === attributeName);
         const imageUrl = attribute?.value?.split(";")?.[0];
-        if (!imageUrl) {
+        if (!imageUrl)
             return null;
-        }
         return getResourceUrl(imageUrl);
-    }, [attributeName, attributes, value]);
-    const blobUrl = useFetchImageWithAuth(firstImage);
-    if (!blobUrl) {
+    }, [value, isAttachmentAttribute, attributeName, attribute]);
+    const stringBlobUrl = useFetchImageWithAuth(stringUrl);
+    const attachmentSrc = attachmentImages[0]?.src || null;
+    const src = isAttachmentAttribute ? attachmentSrc : stringBlobUrl;
+    const alt = isAttachmentAttribute ? attachmentImages[0]?.fileName ?? "" : stringUrl ?? "";
+    return { src, alt };
+};
+
+const ElementImage = React.memo(({ type, elementConfig }) => {
+    const { options, style } = elementConfig || {};
+    const { width } = options || {};
+    const { src, alt } = useElementImage({ type, elementConfig });
+    if (!src)
         return null;
-    }
-    return (jsxRuntime.jsx("img", { src: blobUrl, alt: firstImage ?? "", width: width, style: style }));
+    return jsxRuntime.jsx("img", { src: src, alt: alt, width: width, style: style });
 });
 
 const ElementLegend = React.memo(({ type, element, elementConfig }) => {
@@ -9874,7 +9973,8 @@ const SlideshowHeaderWrapper = styled.div `
       position: absolute;
       top: 0;
       left: 0;
-      right: 0;
+      width: 100%;
+      height: 100%;
       pointer-events: none;
     }
 
@@ -9884,8 +9984,7 @@ const SlideshowHeaderWrapper = styled.div `
     }
 
     :after {
-      height: 4.5rem;
-      background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+      background: linear-gradient(180deg, rgba(17, 37, 47, 0.75) 0%, rgba(17, 37, 47, 0.00) 100%);
     }
 
     :hover {
@@ -9933,12 +10032,13 @@ const HeaderSlideshow = styled.div `
 `;
 
 const FeatureCardBackgroundHeader = () => {
+    const { themeName: pageThemeName } = useGlobalContext();
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
     const { fontColor, bgColor, height, overlay, bigIcon, withPadding, bottomBlur, themeName, column } = options || {};
     const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(BackgroundHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$height": height, "$bigIcon": bigIcon, "$withPadding": withPadding, "$bottomBlur": bottomBlur, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsxs(Header, { "$overlay": overlay, "$isRow": !column, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: column, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+    return (jsxRuntime.jsx(BackgroundHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$height": height, "$bigIcon": bigIcon, "$withPadding": withPadding, "$bottomBlur": bottomBlur, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName ?? pageThemeName), children: jsxRuntime.jsxs(Header, { "$overlay": overlay, "$isRow": !column, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: column, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -10324,8 +10424,8 @@ const getElementValue = ({ getDefaultContainer, ...props }) => {
             return "";
         }
         const alias = attribute?.alias || attributeName || "";
-        const { maxLength, lineBreak, expandable } = options || {};
-        return alias && maxLength && maxLength < alias.length ? (jsxRuntime.jsx(TextTrim, { maxLength: maxLength, expandable: expandable, lineBreak: lineBreak, children: alias })) : (alias);
+        const { maxLength, wordBreak, lineBreak, expandable } = options || {};
+        return alias && maxLength && maxLength < alias.length ? (jsxRuntime.jsx(TextTrim, { maxLength: maxLength, wordBreak: wordBreak, expandable: expandable, lineBreak: lineBreak, children: alias })) : (alias);
     }
     if (type === "attributeValue") {
         /* return isHandbookAttribute(attribute?.name, layerInfo) ? (
@@ -13187,15 +13287,20 @@ const SvgImage = React.memo(({ url, width, height, fontColor }) => {
     return (jsxRuntime.jsx(StyledSvg, { "$width": width, "$height": height, "$fontColor": fontColor, dangerouslySetInnerHTML: { __html: svg } }));
 });
 
-const TextTrim = React.memo(({ maxLength, expandable, lineBreak, children }) => {
+const TextTrimValue = styled.div `
+  word-break: ${({ wordBreak }) => wordBreak ?? "break-word"};
+  overflow: hidden;
+`;
+
+const TextTrim = React.memo(({ maxLength, expandable, lineBreak, wordBreak, children }) => {
     const { t } = useGlobalContext();
     const [expanded, toggleExpanded] = useToggle();
     const text = children?.toString();
     const formatValue = React.useCallback((value) => {
         if (!lineBreak)
-            return value;
-        return jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: lodash.unescape(value).split(lineBreak).join("<br />") } });
-    }, [lineBreak]);
+            return jsxRuntime.jsx(TextTrimValue, { wordBreak: wordBreak, children: value });
+        return jsxRuntime.jsx(TextTrimValue, { wordBreak: wordBreak, dangerouslySetInnerHTML: { __html: lodash.unescape(value).split(lineBreak).join("<br />") } });
+    }, [lineBreak, wordBreak]);
     if (!text?.length || !maxLength || text.length <= maxLength)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: formatValue(text) });
     const substring = `${text.substring(0, maxLength)}...`;