@pisell/materials 1.0.987 → 1.0.988

package/lib/components/PisellProcedure/PisellProcedure.less

@@ -105,17 +105,19 @@
 
     // ========== 布局模式：比例布局 ==========
     &--ratio {
-      // 移动端：比例模式下也隐藏信息区
-      @media (max-width: calc(@breakpoint-sm - 1px)) {
-        > .pisell-lowcode-layout,
-        > .ant-layout {
-          .@{procedure-prefix}-sidebar {
-            display: none !important;
-          }
-
-          .@{procedure-prefix}-content {
-            flex: 1 !important;
-            max-width: 100% !important;
+      // 移动端：比例模式下也隐藏信息区（弹窗模式下不执行）
+      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+        @media (max-width: calc(@breakpoint-sm - 1px)) {
+          > .pisell-lowcode-layout,
+          > .ant-layout {
+            .@{procedure-prefix}-sidebar {
+              display: none !important;
+            }
+
+            .@{procedure-prefix}-content {
+              flex: 1 !important;
+              max-width: 100% !important;
+            }
           }
         }
       }
@@ -132,30 +134,24 @@
 
     // 纵向排列时的样式
     .@{procedure-prefix}-body--vertical & {
-      width: 100%;
+      width: 100% !important;
       flex: 1 1 auto;
     }
   }
 
   // 信息区 - 高度自适应内容，sticky 定位
   &-sidebar {
-    width: @sidebar-width-xl !important;
-    max-width: @sidebar-width-xl !important;
-    min-width: @sidebar-width-xl !important;
-    flex: 0 0 @sidebar-width-xl !important;
+    width: initial !important;
+    max-width: initial !important;
+    min-width: initial !important;
     background-color: @color-bg-sidebar;
     border-radius: 4px;
-    position: sticky;
-    top: calc(64px + @gap-default * 2); // header 高度 + body padding + 额外间距
+    position: sticky!important;
     overflow-y: auto;
     align-self: flex-start; // 不拉伸高度
-    background: transparent;
+    background: transparent !important;
     height: fit-content;
 
-    .ant-layout-sider-children {
-      padding: @padding-default;
-    }
-
     .@{pisell-layout-prefix}-sider-content{
       overflow: hidden!important;
       display: flex;
@@ -181,32 +177,86 @@
       flex: 0 0 auto !important;
       position: relative;
       top: auto;
+
+      .@{procedure-prefix}-sider-content-top{
+        height: 100%;
+      }
     }
 
-    // 响应式宽度调整 - 渐进式变化
-    // 960px < width < 1133px: 376px ~ 405px 线性插值
-    // 公式: 376 + (viewport - 960) * (405 - 376) / (1133 - 960)
-    @media (max-width: calc(@breakpoint-lg - 1px)) and (min-width: @breakpoint-md) {
-      @sidebar-width-dynamic: calc(@sidebar-width-md + (100vw - @breakpoint-md) * (405 - 376) / (1133 - 960));
+    // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
+    // 使用 CSS 变量 --pisell-procedure-container-width（由 JavaScript 动态设置）
+    // 960px <= containerWidth < 1133px: 376px ~ 405px 线性插值
+    // 公式: 376 + (containerWidth - 960) * (405 - 376) / (1133 - 960)
+    &--responsive-md {
+      @sidebar-width-dynamic: calc(@sidebar-width-md + (var(--pisell-procedure-container-width, 100vw) - @breakpoint-md) * (405 - 376) / (1133 - 960));
       width: @sidebar-width-dynamic !important;
       max-width: @sidebar-width-xl !important;
       min-width: @sidebar-width-md !important;
       flex: 0 0 @sidebar-width-dynamic !important;
     }
 
-    // 744px < width < 960px: 290px ~ 376px 线性插值
-    // 公式: 290 + (viewport - 744) * (376 - 290) / (960 - 744)
-    @media (max-width: calc(@breakpoint-md - 1px)) and (min-width: @breakpoint-sm) {
-      @sidebar-width-dynamic: calc(@sidebar-width-sm + (100vw - @breakpoint-sm) * (376 - 290) / (960 - 744));
+    // 744px <= containerWidth < 960px: 290px ~ 376px 线性插值
+    // 公式: 290 + (containerWidth - 744) * (376 - 290) / (960 - 744)
+    &--responsive-sm {
+      @sidebar-width-dynamic: calc(@sidebar-width-sm + (var(--pisell-procedure-container-width, 100vw) - @breakpoint-sm) * (376 - 290) / (960 - 744));
       width: @sidebar-width-dynamic !important;
       max-width: @sidebar-width-md !important;
       min-width: @sidebar-width-sm !important;
       flex: 0 0 @sidebar-width-dynamic !important;
     }
 
-    // width < 744px: 隐藏
-    @media (max-width: calc(@breakpoint-sm - 1px)) {
-      display: none !important;
+    // containerWidth < 744px: 弹窗模式下使用最小宽度保持显示
+    // 注意：只有弹窗模式下才会添加响应式类名，页面模式下通过媒体查询隐藏
+    &--responsive-xs {
+      // 弹窗模式下不隐藏 sidebar，使用最小宽度
+      width: @sidebar-width-sm !important;
+      max-width: @sidebar-width-sm !important;
+      min-width: @sidebar-width-sm !important;
+      flex: 0 0 @sidebar-width-sm !important;
+      display: initial !important;
+    }
+
+    // 大于1133px: 405px（仅页面模式，弹窗模式下不执行媒体查询）
+    .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+      @media (min-width: @breakpoint-lg) {
+        width: @sidebar-width-xl !important;
+        max-width: @sidebar-width-xl !important;
+        min-width: @sidebar-width-xl !important;
+        flex: 0 0 @sidebar-width-xl !important;
+      }
+
+      // 保留媒体查询作为降级方案（当没有提供 containerSelector 时，即页面模式）
+      // 960px < viewportWidth < 1133px: 376px ~ 405px 线性插值
+      @media (max-width: calc(@breakpoint-lg - 1px)) and (min-width: @breakpoint-md) {
+        // 如果没有响应式类名，则应用媒体查询样式
+        &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
+          @sidebar-width-dynamic: calc(@sidebar-width-md + (100vw - @breakpoint-md) * (405 - 376) / (1133 - 960));
+          width: @sidebar-width-dynamic !important;
+          max-width: @sidebar-width-xl !important;
+          min-width: @sidebar-width-md !important;
+          flex: 0 0 @sidebar-width-dynamic !important;
+        }
+      }
+
+      // 744px < viewportWidth < 960px: 290px ~ 376px 线性插值
+      @media (max-width: calc(@breakpoint-md)) and (min-width: @breakpoint-sm) {
+        // 如果没有响应式类名，则应用媒体查询样式
+        &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
+          @sidebar-width-dynamic: calc(@sidebar-width-sm + (100vw - @breakpoint-sm) * (376 - 290) / (960 - 744));
+          width: @sidebar-width-dynamic !important;
+          max-width: @sidebar-width-md !important;
+          min-width: @sidebar-width-sm !important;
+          flex: 0 0 @sidebar-width-dynamic !important;
+        }
+      }
+
+      // viewportWidth < 744px: 隐藏（仅页面模式）
+      @media (max-width: calc(@breakpoint-sm - 1px)) {
+        // 如果没有响应式类名，则应用媒体查询样式
+        &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
+          display: none !important;
+        }
+      }
     }
 
     // ========== 比例模式样式（在基础样式内部，确保优先级） ==========
@@ -233,7 +283,7 @@
     z-index: 100;
     overflow: hidden; // 防止内容溢出
 
-    // 总结按钮插槽 - 仅移动端显示（< 744px）
+    // 总结按钮插槽 - 仅移动端显示（< 744px），弹窗模式下不执行媒体查询
     &__summary {
       flex-shrink: 0;
       margin-right: auto;
@@ -241,9 +291,11 @@
       display: none;
       cursor: pointer;
 
-      // 移动端显示
-      @media (max-width: calc(@breakpoint-sm - 1px)) {
-        display: block;
+      // 移动端显示（仅页面模式）
+      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+        @media (max-width: calc(@breakpoint-sm - 1px)) {
+          display: block;
+        }
       }
     }
 
@@ -427,81 +479,82 @@
           flex-shrink: 0;
           position: sticky;
           bottom: 0;
-          margin: @gap-default;
-          margin-top: auto; // 推到底部
+          margin: 0;
         }
       }
     }
   }
 
-  // ========== 小屏适配（744px-960px）：头部两行显示 ==========
-  @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
-    &-header {
-      flex-wrap: wrap;
-      min-height: auto;
-      padding: 12px @padding-default;
-
-      // 第一行：返回按钮
-      &__left {
-        order: 1;
-        flex: 0 0 auto;
-      }
+  // ========== 小屏适配（744px-960px）：头部两行显示（仅页面模式） ==========
+  &:not(&--modal) {
+    @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
+      .@{procedure-prefix}-header {
+        flex-wrap: wrap;
+        min-height: auto;
+        padding: 12px @padding-default;
+
+        // 第一行：返回按钮
+        .@{procedure-prefix}-header__left {
+          order: 1;
+          flex: 0 0 auto;
+        }
 
-      // 第一行：关闭按钮，推到右边
-      &__right {
-        order: 2;
-        flex: 0 0 auto;
-        margin-left: auto;
-      }
+        // 第一行：关闭按钮，推到右边
+        .@{procedure-prefix}-header__right {
+          order: 2;
+          flex: 0 0 auto;
+          margin-left: auto;
+        }
 
-      // 第二行：步骤条独占一行
-      &__center {
-        order: 3;
-        width: 100%;
-        flex: 0 0 100%;
-        padding: @gap-default 0 0;
-        justify-content: flex-start;
-        overflow-x: auto;
+        // 第二行：步骤条独占一行
+        .@{procedure-prefix}-header__center {
+          order: 3;
+          width: 100%;
+          flex: 0 0 100%;
+          padding: 0;
+          justify-content: flex-start;
+          overflow-x: auto;
+        }
       }
     }
-  }
 
-  // ========== 移动端适配（<744px）：头部一行显示 ==========
-  @media (max-width: calc(@breakpoint-sm - 1px)) {
-    &-header {
-      flex-wrap: nowrap;
-      min-height: auto;
-      padding: 12px @padding-default;
+    // ========== 移动端适配（<744px）：头部一行显示 ==========
+    @media (max-width: calc(@breakpoint-sm - 1px)) {
+      .@{procedure-prefix}-header {
+        flex-wrap: nowrap;
+        min-height: auto;
+        padding: 12px @padding-default;
+
+        // 左侧：返回按钮
+        .@{procedure-prefix}-header__left {
+          flex: 0 0 auto;
+        }
 
-      // 左侧：返回按钮
-      &__left {
-        flex: 0 0 auto;
-      }
+        // 中间：步骤条（简化显示当前步骤）
+        .@{procedure-prefix}-header__center {
+          flex: 1;
+          padding: 0 @gap-default;
+          overflow: hidden;
+        }
 
-      // 中间：步骤条（简化显示当前步骤）
-      &__center {
-        flex: 1;
-        padding: 0 @gap-default;
-        overflow: hidden;
+        // 右侧：关闭按钮
+        .@{procedure-prefix}-header__right {
+          flex: 0 0 auto;
+        }
       }
 
-      // 右侧：关闭按钮
-      &__right {
-        flex: 0 0 auto;
+      // 主体区域移动端
+      .@{procedure-prefix}-body {
+        > .pisell-lowcode-layout,
+        > .ant-layout {
+          padding: @gap-default;
+        }
       }
-    }
 
-    // 主体区域移动端
-    &-body {
-      > .pisell-lowcode-layout,
-      > .ant-layout {
-        padding: @gap-default;
+      // 内容区占满
+      .@{procedure-prefix}-content {
+        width: 100% !important;
       }
     }
-
-    // 内容区占满
-    &-content {
-      width: 100%;
-    }
   }
 }

package/lib/components/PisellProcedure/components/FooterActions.d.ts

@@ -16,7 +16,6 @@ export interface FooterActionsProps {
 }
 /**
  * FooterActions 底部操作区组件
- *
  * @description 实现底部操作区的左右布局：左侧自定义内容 + 右侧操作按钮（支持溢出收纳）
  * 收纳规则：从左到右依次收纳（优先级低的先收纳），保留右侧的主要操作按钮
  * @author Pisell Team

package/lib/components/PisellProcedure/components/FooterActions.js

@@ -54,7 +54,10 @@ var FooterActions = ({
     hasOverflow,
     moreMenuItems
   } = (0, import_useOverflowActions.useOverflowActions)({ children, gap, moreText });
-  const containerCls = (0, import_utils.mergeClassNames)("pisell-procedure-footer__content", className);
+  const containerCls = (0, import_utils.mergeClassNames)(
+    "pisell-procedure-footer__content",
+    className
+  );
   const hasLeftSlot = leftSlot !== void 0 && leftSlot !== null;
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     "div",
@@ -87,15 +90,7 @@ var FooterActions = ({
       "aria-hidden": "true"
     },
     /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_UpOutlined.default, null) }, moreText)
-  ), /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: containerCls, style: { gap } }, hasLeftSlot && /* @__PURE__ */ import_react.default.createElement("div", { ref: leftSlotRef, className: "pisell-procedure-footer__left" }, leftSlot), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__actions", style: { gap } }, hasOverflow && /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Dropdown,
-    {
-      menu: { items: moreMenuItems },
-      placement: "topLeft",
-      trigger: ["click"]
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_UpOutlined.default, null) }, moreText)
-  ), visibleActions)));
+  ), /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: containerCls, style: { gap } }, hasLeftSlot && /* @__PURE__ */ import_react.default.createElement("div", { ref: leftSlotRef, className: "pisell-procedure-footer__left" }, leftSlot), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__actions", style: { gap } }, hasOverflow && /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { menu: { items: moreMenuItems } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_UpOutlined.default, null) }, moreText)), visibleActions)));
 };
 FooterActions.displayName = "FooterActions";
 var FooterActions_default = FooterActions;

package/lib/components/PisellProcedure/components/ProcedureBody.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ProcedureBodyProps as BodyProps, ProcedureFooterProps, FooterPositionMode } from '../types';
+import type { ProcedureBodyProps as BodyProps, ProcedureFooterProps, FooterPositionMode, ProcedureMode } from '../types';
 /**
  * ProcedureBody 子组件 Props
  */
@@ -26,6 +26,8 @@ export interface ProcedureBodyProps {
     goPrev?: () => void;
     /** 下一步回调 */
     goNext?: () => void;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
 }
 /**
  * ProcedureBody 主体区域组件

package/lib/components/PisellProcedure/components/ProcedureBody.js

@@ -49,9 +49,11 @@ var ProcedureBody = ({
   onOpenSummaryModal,
   onCloseSummaryModal,
   goPrev,
-  goNext
+  goNext,
+  mode = "page"
 }) => {
   const direction = (bodyProps == null ? void 0 : bodyProps.direction) || "horizontal";
+  const contentOrder = (bodyProps == null ? void 0 : bodyProps.contentOrder) || "content-first";
   const layoutMode = (bodyProps == null ? void 0 : bodyProps.layoutMode) || "fixed";
   const layoutRatio = (bodyProps == null ? void 0 : bodyProps.layoutRatio) || "7:3";
   const bodyCls = (0, import_react.useMemo)(() => {
@@ -62,9 +64,11 @@ var ProcedureBody = ({
       // 添加排列方向类名
       `pisell-procedure-body--${direction}`,
       // 添加布局模式类名
-      `pisell-procedure-body--${layoutMode}`
+      `pisell-procedure-body--${layoutMode}`,
+      // 添加内容顺序类名
+      `pisell-procedure-body--${contentOrder}`
     );
-  }, [className, bodyProps == null ? void 0 : bodyProps.className, direction, layoutMode]);
+  }, [className, bodyProps == null ? void 0 : bodyProps.className, direction, layoutMode, contentOrder]);
   const ratioStyles = (0, import_react.useMemo)(() => {
     if (layoutMode !== "ratio") return null;
     return (0, import_utils.generateRatioStyles)(layoutRatio, 16);
@@ -94,10 +98,11 @@ var ProcedureBody = ({
         onOpenSummaryModal,
         onCloseSummaryModal,
         goPrev,
-        goNext
+        goNext,
+        mode
       }
     );
-  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext]);
+  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext, mode]);
   const sidebarFooter = (0, import_react.useMemo)(() => {
     if (!showFooter || !(0, import_utils.isFooterInSidebar)(footerPosition)) return null;
     return /* @__PURE__ */ import_react.default.createElement(
@@ -110,14 +115,15 @@ var ProcedureBody = ({
         onOpenSummaryModal,
         onCloseSummaryModal,
         goPrev,
-        goNext
+        goNext,
+        mode
       }
     );
-  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext]);
+  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext, mode]);
   const layoutStyle = (0, import_react.useMemo)(() => ({
     flexDirection: direction === "vertical" ? "column" : "row"
   }), [direction]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: bodyCls, style: bodyProps == null ? void 0 : bodyProps.style }, /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, { style: layoutStyle }, /* @__PURE__ */ import_react.default.createElement(
+  const contentComponent = /* @__PURE__ */ import_react.default.createElement(
     import_ProcedureContent.default,
     {
       className: bodyProps == null ? void 0 : bodyProps.contentClassName,
@@ -125,16 +131,27 @@ var ProcedureBody = ({
       extra: contentFooter
     },
     bodyProps == null ? void 0 : bodyProps.contentSlot
-  ), showSidebar && /* @__PURE__ */ import_react.default.createElement(
+  );
+  const sidebarComponent = showSidebar ? /* @__PURE__ */ import_react.default.createElement(
     import_ProcedureSidebar.default,
     {
       className: bodyProps == null ? void 0 : bodyProps.sidebarClassName,
       style: sidebarStyle,
       extra: sidebarFooter,
-      isRatioMode: layoutMode === "ratio"
+      isRatioMode: layoutMode === "ratio",
+      containerSelector: bodyProps == null ? void 0 : bodyProps.sidebarContainerSelector,
+      mode,
+      direction
     },
     bodyProps == null ? void 0 : bodyProps.sidebarSlot
-  )));
+  ) : null;
+  const orderedChildren = (0, import_react.useMemo)(() => {
+    if (contentOrder === "sidebar-first") {
+      return [sidebarComponent, contentComponent].filter(Boolean);
+    }
+    return [contentComponent, sidebarComponent].filter(Boolean);
+  }, [contentOrder, contentComponent, sidebarComponent]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: bodyCls, style: bodyProps == null ? void 0 : bodyProps.style }, /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, { style: layoutStyle }, orderedChildren));
 };
 ProcedureBody.displayName = "ProcedureBody";
 var ProcedureBody_default = ProcedureBody;

package/lib/components/PisellProcedure/components/ProcedureFooter.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ProcedureFooterProps as FooterProps, FooterPositionMode } from '../types';
+import type { ProcedureFooterProps as FooterProps, FooterPositionMode, ProcedureMode } from '../types';
 import type { ReactNode } from 'react';
 /**
  * ProcedureFooter 子组件 Props
@@ -25,6 +25,8 @@ export interface ProcedureFooterProps {
     goPrev?: () => void;
     /** 下一步回调 */
     goNext?: () => void;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
 }
 /**
  * ProcedureFooter 底部操作区组件

package/lib/components/PisellProcedure/components/ProcedureFooter.js

@@ -47,7 +47,8 @@ var ProcedureFooter = ({
   onOpenSummaryModal,
   onCloseSummaryModal,
   goPrev,
-  goNext
+  goNext,
+  mode = "page"
 }) => {
   const footerCls = (0, import_react.useMemo)(() => {
     return (0, import_utils.mergeClassNames)(
@@ -61,17 +62,23 @@ var ProcedureFooter = ({
     const actions = footerProps == null ? void 0 : footerProps.actions;
     if (!actions) return null;
     const childrenArray = import_react.Children.toArray(actions);
-    if (childrenArray.length === 0) return actions;
+    if (childrenArray.length === 0) return null;
     return import_react.Children.map(actions, (child, index) => {
-      var _a;
       if (!(0, import_react.isValidElement)(child)) return child;
-      const isLastButton = index === childrenArray.length - 1;
-      if (isLastButton) {
-        const originalOnClick = (_a = child.props) == null ? void 0 : _a.onClick;
+      const childProps = child.props;
+      const dataAction = childProps == null ? void 0 : childProps["data-action"];
+      const originalOnClick = childProps == null ? void 0 : childProps.onClick;
+      let injectedAction;
+      if (dataAction === "prev") {
+        injectedAction = goPrev;
+      } else if (dataAction === "next") {
+        injectedAction = goNext;
+      }
+      if (injectedAction) {
         return (0, import_react.cloneElement)(child, {
           onClick: (...args) => {
             originalOnClick == null ? void 0 : originalOnClick(...args);
-            goNext == null ? void 0 : goNext();
+            injectedAction == null ? void 0 : injectedAction();
           }
         });
       }
@@ -93,14 +100,23 @@ var ProcedureFooter = ({
       }
     });
   }, [footerProps == null ? void 0 : footerProps.summaryButton, onOpenSummaryModal]);
-  const footerContent = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, wrappedSummaryButton && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__summary" }, wrappedSummaryButton), (footerProps == null ? void 0 : footerProps.enableOverflow) !== false ? /* @__PURE__ */ import_react.default.createElement(
-    import_FooterActions.default,
-    {
-      leftSlot: footerProps == null ? void 0 : footerProps.leftSlot,
-      moreText: footerProps == null ? void 0 : footerProps.moreText
-    },
-    actionsContent
-  ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__content" }, (footerProps == null ? void 0 : footerProps.leftSlot) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__left" }, footerProps.leftSlot), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__actions" }, actionsContent))), [
+  const footerContent = (0, import_react.useMemo)(() => {
+    const hasSummaryButton = mode === "modal" ? false : !!wrappedSummaryButton;
+    const hasLeftSlot = (footerProps == null ? void 0 : footerProps.leftSlot) !== void 0 && (footerProps == null ? void 0 : footerProps.leftSlot) !== null;
+    const hasActions = actionsContent !== null && actionsContent !== void 0;
+    if (!hasSummaryButton && !hasLeftSlot && !hasActions) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, hasSummaryButton && wrappedSummaryButton && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__summary" }, wrappedSummaryButton), (hasLeftSlot || hasActions) && ((footerProps == null ? void 0 : footerProps.enableOverflow) !== false ? /* @__PURE__ */ import_react.default.createElement(
+      import_FooterActions.default,
+      {
+        leftSlot: footerProps == null ? void 0 : footerProps.leftSlot,
+        moreText: footerProps == null ? void 0 : footerProps.moreText
+      },
+      actionsContent
+    ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__content" }, (footerProps == null ? void 0 : footerProps.leftSlot) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__left" }, footerProps.leftSlot), hasActions && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__actions" }, actionsContent))));
+  }, [
+    mode,
     wrappedSummaryButton,
     footerProps == null ? void 0 : footerProps.enableOverflow,
     footerProps == null ? void 0 : footerProps.leftSlot,
@@ -128,6 +144,9 @@ var ProcedureFooter = ({
     summaryModalOpen,
     onCloseSummaryModal
   ]);
+  if (!footerContent) {
+    return null;
+  }
   if (isGlobal) {
     return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_footer.default, { className: footerCls, style: footerProps == null ? void 0 : footerProps.style }, footerContent), summaryModal);
   }