@evergis/react 4.0.63 → 4.0.65

package/dist/components/Dashboard/containers/TaskContainer/components/LogDialog/types.d.ts

@@ -2,6 +2,7 @@ import { RemoteTaskStatus } from '@evergis/api';
 export interface LogDialogProps {
     isOpen: boolean;
     onClose: () => void;
+    onMinimize?: () => void;
     logs: string | null;
     status: RemoteTaskStatus;
     statusColors?: Record<RemoteTaskStatus, string>;

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

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

package/dist/components/Dashboard/containers/TaskContainer/utils/clampDescription.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const clampDescription: (text: string) => ReactNode;

package/dist/index.js

@@ -5631,7 +5631,6 @@ const usePythonTask = () => {
     const [subscriptionId, setSubscriptionId] = React.useState(null);
     const [isLogDialogOpen, setIsLogDialogOpen] = React.useState(false);
     const [result, setResult] = React.useState(null);
-    const logRef = React.useRef(null);
     const reset = React.useCallback(() => {
         setStatus(api.RemoteTaskStatus.Unknown);
         setError(null);
@@ -5685,7 +5684,7 @@ const usePythonTask = () => {
             if (data?.taskId === newTaskId) {
                 const isFinished = [api.RemoteTaskStatus.Completed, api.RemoteTaskStatus.Error].includes(data.status);
                 setStatus(data.status);
-                setLog([logRef.current, data.log].filter(Boolean).join("\n"));
+                setLog(prev => [prev, data.log].filter(Boolean).join(""));
                 if (data.log)
                     setLastMessage(data.log);
                 setExecutionTime(Date.now() - start);
@@ -5731,9 +5730,6 @@ const usePythonTask = () => {
     const closeLog = React.useCallback(() => {
         setIsLogDialogOpen(false);
     }, []);
-    React.useEffect(() => {
-        logRef.current = log;
-    }, [log]);
     return {
         taskId,
         runTask,
@@ -6218,6 +6214,8 @@ const getAttributeByName = (name, attributes) => {
             : null;
 };
 
+const isEmptyElementValue = (value) => value === "" || value === null || value === undefined;
+
 /**
  * Returns a value safe to render as a React child.
  *
@@ -6242,7 +6240,7 @@ const formatElementValue = ({ t, value, elementConfig, attributes, wrap, }) => {
         ? getAttributeByName(attributeName, attributes)
         : null;
     const { fontColor, fontSize, noUnits, tagView, bgColor, withDivider, radius, noMargin, } = options || {};
-    const valueOrDefault = value || defaultValue;
+    const valueOrDefault = isEmptyElementValue(value) ? defaultValue : value;
     const resultValue = type === "attributeValue" && attribute?.type && attribute?.stringFormat
         ? formatAttributeValue({
             t,
@@ -6266,14 +6264,14 @@ const getAttributeValue = (element, attributes) => {
         return jsxRuntime.jsx(DashboardCheckbox, { title: attribute.alias || attribute.attributeName, checked: attribute.value });
     }
     if (Array.isArray(element?.attributeName)) {
-        const concatAttributes = element.attributeName.map((name) => attributes?.find(({ attributeName }) => attributeName === name)?.value || "");
+        const concatAttributes = element.attributeName.map((name) => attributes?.find(({ attributeName }) => attributeName === name)?.value ?? "");
         value = concatAttributes.join(separator || ", ");
     }
     else {
         const rawValue = attribute?.value;
-        value = rawValue && typeof rawValue === "object"
+        value = rawValue !== null && rawValue !== undefined && typeof rawValue === "object"
             ? JSON.stringify(rawValue)
-            : (rawValue || "");
+            : (rawValue ?? "");
     }
     return typeof value === "string" && maxLength && maxLength < value.length ? (jsxRuntime.jsx(TextTrim, { maxLength: maxLength, wordBreak: wordBreak, expandable: expandable, lineBreak: lineBreak, children: value })) : (value);
 };
@@ -6482,7 +6480,7 @@ const useRenderContainer = ({ elementConfig, type, renderElement, renderBody, })
                 return (jsxRuntime.jsx(OverrideContainer, { type: type, elementConfig: itemConfig, renderElement: item.render }, attribute));
             }
         }
-        if (!item.value && item.hideEmpty)
+        if (isEmptyElementValue(item.value) && item.hideEmpty)
             return null;
         return renderBody(item, attribute);
     }, [getRenderContainerItem, elementConfig, attributes, type, renderBody]);
@@ -7641,17 +7639,17 @@ const STATUS_ICONS = {
     [api.RemoteTaskStatus.Unknown]: "play",
 };
 
-const LogDialog = ({ isOpen, onClose, logs, status, statusColors }) => {
+const LogDialog = ({ isOpen, onClose, onMinimize, logs, status, statusColors }) => {
     const { t } = useGlobalContext();
-    const getStatusTitle = React.useCallback((status) => {
-        const translationKey = STATUS_TRANSLATION_KEYS[status] || STATUS_TRANSLATION_KEYS[api.RemoteTaskStatus.Unknown];
-        const defaultValue = STATUS_TITLES[status] || STATUS_TITLES[api.RemoteTaskStatus.Unknown];
+    const getStatusTitle = React.useCallback((currentStatus) => {
+        const translationKey = STATUS_TRANSLATION_KEYS[currentStatus] || STATUS_TRANSLATION_KEYS[api.RemoteTaskStatus.Unknown];
+        const defaultValue = STATUS_TITLES[currentStatus] || STATUS_TITLES[api.RemoteTaskStatus.Unknown];
         return t(translationKey, { ns: "dashboard", defaultValue });
     }, [t]);
-    const getStatusColor = React.useCallback((status) => {
-        return statusColors?.[status] || STATUS_COLORS[status] || STATUS_COLORS[api.RemoteTaskStatus.Unknown];
+    const getStatusColor = React.useCallback((currentStatus) => {
+        return statusColors?.[currentStatus] || STATUS_COLORS[currentStatus] || STATUS_COLORS[api.RemoteTaskStatus.Unknown];
     }, [statusColors]);
-    return (jsxRuntime.jsxs(uilibGl.Dialog, { isOpen: isOpen, onCloseRequest: onClose, modal: true, maxWidth: "800px", minWidth: "600px", minHeight: "600px", children: [jsxRuntime.jsx(uilibGl.DialogTitle, { children: jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { marginRight: "1rem", children: t("taskLogs", { ns: "dashboard", defaultValue: "Логи выполнения задачи" }) }), jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.darkTheme, children: jsxRuntime.jsx(StatusBadge, { text: getStatusTitle(status), bgColor: getStatusColor(status) }) })] }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: onClose })] }) }), jsxRuntime.jsx(uilibGl.DialogContent, { children: jsxRuntime.jsx(uilibGl.Flex, { flexDirection: "column", height: "100%", marginBottom: "2rem", children: jsxRuntime.jsx(LogTerminal, { log: logs || t("taskLogsEmpty", { ns: "dashboard", defaultValue: "Логи отсутствуют" }) }) }) })] }));
+    return (jsxRuntime.jsxs(uilibGl.Dialog, { isOpen: isOpen, onCloseRequest: onClose, modal: true, maxWidth: "800px", minWidth: "600px", minHeight: "600px", children: [jsxRuntime.jsx(uilibGl.DialogTitle, { children: jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { marginRight: "1rem", children: t("taskLogs", { ns: "dashboard", defaultValue: "Логи выполнения задачи" }) }), jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.darkTheme, children: jsxRuntime.jsx(StatusBadge, { text: getStatusTitle(status), bgColor: getStatusColor(status) }) })] }), jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", width: "auto", children: [onMinimize && jsxRuntime.jsx(uilibGl.IconButton, { kind: "rollup", onClick: onMinimize }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: onClose })] })] }) }), jsxRuntime.jsx(uilibGl.DialogContent, { children: jsxRuntime.jsx(uilibGl.Flex, { flexDirection: "column", height: "100%", marginBottom: "2rem", children: jsxRuntime.jsx(LogTerminal, { log: logs || t("taskLogsEmpty", { ns: "dashboard", defaultValue: "Логи отсутствуют" }) }) }) })] }));
 };
 
 exports.ThemeName = void 0;
@@ -7714,19 +7712,32 @@ const buildFiltersFromResponse = (responseFilters, result) => {
     return Object.keys(filters).length ? filters : null;
 };
 
+const ClampedText = styled.div `
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+`;
+const clampDescription = (text) => React.createElement(ClampedText, null, text);
+
 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 useTaskNotifications = ({ enabled, suppressed, status, lastMessage, openLog, }) => {
     const { t, notification } = useGlobalContext();
     const runIdRef = React.useRef(null);
     const prevStatusRef = React.useRef(api.RemoteTaskStatus.Unknown);
+    const isVisibleRef = React.useRef(false);
+    const [dismissed, setDismissed] = React.useState(false);
     React.useEffect(() => {
         if (!enabled) {
             if (runIdRef.current) {
                 notification?.close(runIdRef.current);
                 runIdRef.current = null;
             }
+            isVisibleRef.current = false;
             prevStatusRef.current = status;
             return;
         }
@@ -7737,54 +7748,70 @@ const useTaskNotifications = ({ enabled, status, lastMessage, openLog, }) => {
         const isFreshRun = status === api.RemoteTaskStatus.Process && prevStatusRef.current !== api.RemoteTaskStatus.Process;
         if (isFreshRun) {
             runIdRef.current = generateRunId();
+            isVisibleRef.current = false;
+            setDismissed(false);
         }
         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 description = clampDescription(lastMessage || t("taskStarted", { ns: "dashboard", defaultValue: "Запуск задачи…" }));
         const base = {
             id,
             title: "",
             description,
             duration: Number.MAX_SAFE_INTEGER,
-            button,
-            buttonIcon: "info",
-            buttonColor: "primary",
-            onButtonClick: openLog,
+            ...(lastMessage ? {
+                button: t("details", { ns: "dashboard", defaultValue: "Подробнее" }),
+                buttonIcon: "info",
+                buttonColor: "primary",
+                onButtonClick: openLog,
+            } : {}),
         };
+        let item = null;
         if (status === api.RemoteTaskStatus.Process) {
-            const item = {
+            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({
+            item = {
                 ...base,
                 title: t("taskCompleted", { ns: "dashboard", defaultValue: "Выполнено" }),
                 success: true,
                 progress: false,
-            });
+            };
         }
         else if (status === api.RemoteTaskStatus.Error) {
-            notification?.update({
+            item = {
                 ...base,
                 title: t("taskError", { ns: "dashboard", defaultValue: "Ошибка" }),
                 error: true,
                 progress: false,
-            });
+            };
+        }
+        if (!item) {
+            prevStatusRef.current = status;
+            return;
+        }
+        if (suppressed || dismissed) {
+            if (isVisibleRef.current) {
+                notification?.close(id);
+                isVisibleRef.current = false;
+            }
+        }
+        else if (isVisibleRef.current) {
+            notification?.update(item);
+        }
+        else {
+            notification?.add(item);
+            isVisibleRef.current = true;
         }
         prevStatusRef.current = status;
-    }, [enabled, status, lastMessage, openLog, t, notification]);
+    }, [enabled, suppressed, dismissed, status, lastMessage, openLog, t, notification]);
+    return { setNotificationDismissed: setDismissed };
 };
 
 const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
@@ -7795,12 +7822,21 @@ const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { taskId, runTask, stopTask, status, openLog, loading, isLogDialogOpen, closeLog, log, lastMessage, result, } = usePythonTask();
     const { options } = elementConfig || {};
     const { title, relatedResources, center, icon, statusColors, responseFilters, useNotifications, } = options || {};
-    useTaskNotifications({
+    const { setNotificationDismissed } = useTaskNotifications({
         enabled: !!useNotifications,
+        suppressed: isLogDialogOpen,
         status,
         lastMessage,
         openLog,
     });
+    const onCloseLog = React.useCallback(() => {
+        setNotificationDismissed(true);
+        closeLog();
+    }, [closeLog, setNotificationDismissed]);
+    const onMinimizeLog = React.useCallback(() => {
+        setNotificationDismissed(false);
+        closeLog();
+    }, [closeLog, setNotificationDismissed]);
     React.useEffect(() => {
         const filtersToApply = buildFiltersFromResponse(responseFilters, result);
         if (filtersToApply)
@@ -7825,7 +7861,7 @@ const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
             return runTask({ resourceId, parameters: newParams, script, fileName, methodName });
         }));
     }, [attributes, currentPage.filters, dataSources, ewktGeometry, layerInfo, projectDataSources, relatedResources, runTask, selectedFilters, stopTask, taskId]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: closeLog })] }))] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
 });
 
 const EditContainer = ({ type, elementConfig, renderElement }) => {
@@ -9004,115 +9040,6 @@ const FeatureCardDefaultHeader = ({ noFeature }) => {
     return (jsxRuntime.jsx(DefaultHeaderWrapper, { withPadding: withPadding, height: height, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsx(Header, { "$overlay": overlay, "$isRow": !column, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: !column, children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
 };
 
-const HeaderWrapperMixin = styled.css `
-  ${Header} {
-    min-height: 5.25rem;
-  }
-
-  ${HeaderContainer} {
-    max-width: 100%;
-    width: 100%;
-  }
-
-  ${FeatureControls} {
-    max-width: calc(100% - 2rem);
-    width: calc(100% - 2rem);
-    margin-top: -0.5rem;
-    padding-top: 1rem;
-    border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
-  }
-
-  ${({ $fontColor }) => !!$fontColor && HeaderFontColorMixin};
-`;
-const HeaderIcon = styled(uilibGl.Flex) `
-  position: absolute;
-  top: 0;
-  right: 0;
-  align-items: center;
-  justify-content: center;
-  width: 7.625rem;
-  height: 100%;
-
-  span[kind] {
-    width: 4rem;
-    
-    :after {
-      font-size: 4rem;
-      color: rgba(255, 255, 255, 0.36);
-    }
-  }
-
-  span[kind]:after,
-  path,
-  line,
-  circle {
-    fill: rgba(255, 255, 255, 0.36);
-  }
-
-  && > * {
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
-`;
-const BigIconHeaderMixin = styled.css `
-  ${HeaderIcon} {
-    min-width: 14rem;
-    right: -3rem;
-
-    span[kind]:after {
-      font-size: 14rem;
-    }
-  }
-`;
-const WithPaddingHeaderMixin = styled.css `
-  ${Header} {
-    width: 100%;
-    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
-  }
-`;
-const BottomBlurHeaderMixin = styled.css `
-  ${Header} {
-    margin-bottom: 0;
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 11;
-      pointer-events: none;
-      background: ${({ theme: { palette } }) => palette.background};
-      mask-image: linear-gradient(to top, #000 0%, transparent 100%);
-      -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
-    }
-  }
-
-  ${HeaderFrontView} {
-    z-index: 12;
-  }
-`;
-const BackgroundHeaderWrapper = styled.div `
-  ${Header} {
-    width: calc(100% + 1rem);
-    height: ${({ $height }) => $height ? `${$height}px` : "auto"};
-    margin: -1rem -1rem 1rem -1rem;
-    border-radius: 0.5rem;
-    background: ${({ $bgColor }) => $bgColor || "linear-gradient(96.55deg, #FFFCD3 0%, #B4DC47 100%)"};
-    overflow: hidden;
-  }
-
-  ${HeaderWrapperMixin};
-
-  ${({ $bigIcon }) => $bigIcon && BigIconHeaderMixin};
-
-  ${({ $withPadding }) => $withPadding && WithPaddingHeaderMixin};
-  
-  ${({ $bottomBlur }) => $bottomBlur && BottomBlurHeaderMixin};
-`;
-
 const ImageContainerButton = styled(uilibGl.FlatButton) `
   min-height: 1.5rem;
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.large};
@@ -10031,6 +9958,121 @@ const HeaderSlideshow = styled.div `
   }
 `;
 
+const HeaderWrapperMixin = styled.css `
+  ${Header} {
+    min-height: 5.25rem;
+  }
+
+  ${HeaderContainer} {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  ${FeatureControls} {
+    max-width: calc(100% - 2rem);
+    width: calc(100% - 2rem);
+    margin-top: -0.5rem;
+    padding-top: 1rem;
+    border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
+  }
+
+  ${({ $fontColor }) => !!$fontColor && HeaderFontColorMixin};
+`;
+const HeaderIcon = styled(uilibGl.Flex) `
+  position: absolute;
+  top: 0;
+  right: 0;
+  align-items: center;
+  justify-content: center;
+  width: 7.625rem;
+  height: 100%;
+
+  span[kind] {
+    width: 4rem;
+    
+    :after {
+      font-size: 4rem;
+      color: rgba(255, 255, 255, 0.36);
+    }
+  }
+
+  span[kind]:after,
+  path,
+  line,
+  circle {
+    fill: rgba(255, 255, 255, 0.36);
+  }
+
+  && > * {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+`;
+const BigIconHeaderMixin = styled.css `
+  ${HeaderIcon} {
+    min-width: 14rem;
+    right: -3rem;
+
+    span[kind]:after {
+      font-size: 14rem;
+    }
+  }
+`;
+const WithPaddingHeaderMixin = styled.css `
+  ${Header} {
+    width: 100%;
+    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
+  }
+`;
+const BottomBlurHeaderMixin = styled.css `
+  ${Header} {
+    margin-bottom: 0;
+
+    &::before {
+      -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
+      mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
+    }
+  }
+
+  ${ImageContainerBg} {
+    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
+  }
+
+  ${HeaderFrontView} {
+    z-index: 12;
+  }
+`;
+const BackgroundHeaderWrapper = styled.div `
+  ${Header} {
+    position: relative;
+    width: calc(100% + 1rem);
+    height: ${({ $height }) => $height ? `${$height}px` : "auto"};
+    margin: -1rem -1rem 1rem -1rem;
+    border-radius: 0.5rem;
+    background: transparent;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      pointer-events: none;
+      background: ${({ $bgColor }) => $bgColor || "linear-gradient(96.55deg, #FFFCD3 0%, #B4DC47 100%)"};
+    }
+  }
+
+  ${HeaderWrapperMixin};
+
+  ${({ $bigIcon }) => $bigIcon && BigIconHeaderMixin};
+
+  ${({ $withPadding }) => $withPadding && WithPaddingHeaderMixin};
+  
+  ${({ $bottomBlur }) => $bottomBlur && BottomBlurHeaderMixin};
+`;
+
 const FeatureCardBackgroundHeader = () => {
     const { themeName: pageThemeName } = useGlobalContext();
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
@@ -10286,8 +10328,6 @@ const ModalIcon = styled(uilibGl.IconButton) `
   }
 `;
 
-const isEmptyElementValue = (value) => value === "" || value === null || value === undefined;
-
 const isHiddenEmptyValue = ({ value, children, hideEmpty, renderElement, }) => {
     const valueElement = children?.find(item => item.id === "value");
     const renderedValue = valueElement ? renderElement({ id: "value" }) : null;