@pisell/materials 1.0.988 → 1.0.990

package/es/components/PisellProcedure/hooks/useResponsiveClass.js

@@ -1,11 +1,3 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useState, useEffect, useRef } from 'react';
-
 /**
  * 响应式断点常量
  */
@@ -30,7 +22,7 @@ var RESPONSIVE_CLASSES = {
  * 根据容器宽度获取响应式类名
  */
 var getResponsiveClass = function getResponsiveClass(width) {
-  if (width === 0) return '';
+  if (width === 0 || !width) return '';
   if (width >= RESPONSIVE_BREAKPOINTS.lg) {
     return ''; // 使用默认样式
   }
@@ -51,68 +43,5 @@ var getResponsiveClass = function getResponsiveClass(width) {
  * @description 根据容器宽度计算响应式类名，延迟应用以避免宽度抖动
  */
 export var useResponsiveClass = function useResponsiveClass(containerWidth) {
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    responsiveCls = _useState2[0],
-    setResponsiveCls = _useState2[1];
-  var previousWidthRef = useRef(0);
-  var rafIdRef = useRef(null);
-  var stableCheckCountRef = useRef(0);
-  useEffect(function () {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    // 如果宽度为0，重置类名
-    if (containerWidth === 0) {
-      setResponsiveCls('');
-      previousWidthRef.current = 0;
-      stableCheckCountRef.current = 0;
-      return;
-    }
-
-    // 清除之前的动画帧
-    if (rafIdRef.current !== null) {
-      cancelAnimationFrame(rafIdRef.current);
-    }
-
-    /**
-     * 稳定性检查函数：连续3次检查宽度都稳定才应用类名
-     */
-    var checkStability = function checkStability() {
-      var currentWidth = containerWidth;
-      var previousWidth = previousWidthRef.current;
-
-      // 如果宽度变化超过5px，重置计数
-      if (Math.abs(currentWidth - previousWidth) >= 5) {
-        stableCheckCountRef.current = 0;
-        previousWidthRef.current = currentWidth;
-      }
-
-      // 连续3次检查宽度都相同（或变化很小），才应用类名
-      stableCheckCountRef.current += 1;
-      if (stableCheckCountRef.current >= 3) {
-        // 稳定了，应用类名
-        var newCls = getResponsiveClass(currentWidth);
-        setResponsiveCls(newCls);
-        previousWidthRef.current = currentWidth;
-        stableCheckCountRef.current = 0; // 重置计数
-      } else {
-        // 还未稳定，继续等待下一次重绘
-        rafIdRef.current = requestAnimationFrame(checkStability);
-      }
-    };
-
-    // 使用 requestAnimationFrame 确保在浏览器重绘后检查
-    rafIdRef.current = requestAnimationFrame(checkStability);
-
-    // 清理函数
-    return function () {
-      if (rafIdRef.current !== null) {
-        cancelAnimationFrame(rafIdRef.current);
-        rafIdRef.current = null;
-      }
-    };
-  }, [containerWidth]);
-  return responsiveCls;
+  return getResponsiveClass(containerWidth);
 };

package/es/locales/en-US.d.ts

@@ -351,5 +351,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/es/locales/en-US.js

@@ -429,5 +429,6 @@ export default {
   'pisell-procedure-header-close-confirm-title': 'Confirm exit?',
   'pisell-procedure-header-close-confirm-desc': 'All entered information will be lost. Are you sure you want to exit?',
   'pisell-procedure-header-close-confirm-no': 'Continue',
-  'pisell-procedure-header-close-confirm-yes': 'Exit'
+  'pisell-procedure-header-close-confirm-yes': 'Exit',
+  'pisell-procedure-footer-more': 'More'
 };

package/es/locales/zh-CN.d.ts

@@ -346,5 +346,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/es/locales/zh-CN.js

@@ -420,5 +420,6 @@ export default {
   'pisell-procedure-header-close-confirm-title': '确认退出？',
   'pisell-procedure-header-close-confirm-desc': '退出后将丢失所有已填写的信息，确定要退出吗？',
   'pisell-procedure-header-close-confirm-no': '继续',
-  'pisell-procedure-header-close-confirm-yes': '退出'
+  'pisell-procedure-header-close-confirm-yes': '退出',
+  'pisell-procedure-footer-more': '更多'
 };

package/es/locales/zh-TW.d.ts

@@ -346,5 +346,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/es/locales/zh-TW.js

@@ -422,5 +422,6 @@ export default {
   'pisell-procedure-header-close-confirm-title': '確認退出？',
   'pisell-procedure-header-close-confirm-desc': '退出後將丟失所有已填寫的信息，確定要退出嗎？',
   'pisell-procedure-header-close-confirm-no': '繼續',
-  'pisell-procedure-header-close-confirm-yes': '退出'
+  'pisell-procedure-header-close-confirm-yes': '退出',
+  'pisell-procedure-footer-more': '更多'
 };

package/lib/components/PisellProcedure/PisellProcedure.js

@@ -39,142 +39,159 @@ var import_hooks = require("./hooks");
 var import_utils = require("./utils");
 var import_useMobile = require("../../hooks/useMobile");
 var import_PisellProcedure = require("./PisellProcedure.less");
-var PisellProcedure = (0, import_react.forwardRef)((props, ref) => {
-  const {
-    // 通用属性
-    className,
-    style,
-    mode = "page",
-    showHeader = true,
-    showSidebar = true,
-    showFooter = true,
-    // 步骤控制
-    defaultCurrent = 0,
-    onStepsChange,
-    // 区域配置
-    headerProps,
-    bodyProps,
-    footerProps,
-    // 事件回调
-    onClose,
-    onPrev,
-    onNext,
-    onFirstStepBack,
-    onBackConfirm,
-    onCloseConfirm,
-    // 低代码属性
-    __designMode,
-    __id,
-    ...other
-  } = props;
-  const isMobileDetected = (0, import_useMobile.useMobile)(744);
-  const isMobile = mode === "modal" ? false : isMobileDetected;
-  const { currentStep, goPrev, goNext, goToStep } = (0, import_hooks.useStepManager)({
-    stepsProps: headerProps == null ? void 0 : headerProps.stepsProps,
-    defaultCurrent,
-    onPrev,
-    onNext,
-    onStepsChange
-  });
-  const [summaryModalOpen, setSummaryModalOpen] = (0, import_react.useState)(false);
-  const openSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(true), []);
-  const closeSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(false), []);
-  (0, import_react.useImperativeHandle)(
-    ref,
-    () => ({
-      /**
-       * 跳转到上一步
-       */
-      goPrev: () => goPrev(),
-      /**
-       * 跳转到下一步
-       */
-      goNext: () => goNext(),
-      /**
-       * 跳转到指定步骤
-       */
-      goToStep: (step) => goToStep(step),
-      /**
-       * 获取当前步骤索引
-       */
-      getCurrentStep: () => currentStep,
-      /**
-       * 打开移动端总结弹窗
-       */
-      openSummaryModal,
-      /**
-       * 关闭移动端总结弹窗
-       */
-      closeSummaryModal
-    }),
-    [goPrev, goNext, goToStep, currentStep, openSummaryModal, closeSummaryModal]
-  );
-  const footerPosition = (0, import_react.useMemo)(() => {
-    if (isMobile && mode !== "modal") return "float-all";
-    return (footerProps == null ? void 0 : footerProps.position) || "float-sidebar";
-  }, [mode, isMobile, footerProps == null ? void 0 : footerProps.position]);
-  const containerCls = (0, import_react.useMemo)(() => {
-    return (0, import_utils.mergeClassNames)(
-      "pisell-procedure",
+var PisellProcedure = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const {
+      // 通用属性
       className,
-      // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
-      mode === "modal" && "pisell-procedure--modal",
-      (0, import_utils.modifierClassName)("pisell-procedure", `footer-${footerPosition}`)
-    );
-  }, [className, mode, footerPosition]);
-  const footerIsGlobal = (0, import_utils.isFooterGlobal)(footerPosition);
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: containerCls,
       style,
-      "data-component": "pisell-procedure",
-      "data-id": __id,
+      mode = "page",
+      showHeader = true,
+      showSidebar = true,
+      showFooter = true,
+      // 步骤控制
+      defaultCurrent = 0,
+      onStepsChange,
+      // 区域配置
+      headerProps,
+      bodyProps,
+      footerProps,
+      // 事件回调
+      onClose,
+      onPrev,
+      onNext,
+      onFirstStepBack,
+      onBackConfirm,
+      onCloseConfirm,
+      // 低代码属性
+      __designMode,
+      __id,
       ...other
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, null, showHeader && /* @__PURE__ */ import_react.default.createElement(
-      import_components.ProcedureHeader,
-      {
-        headerProps,
-        currentStep,
-        goPrev,
-        onClose,
-        onFirstStepBack,
-        onBackConfirm,
-        onCloseConfirm,
-        goToStep
-      }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_components.ProcedureBody,
-      {
-        bodyProps,
-        footerProps,
-        footerPosition,
-        showFooter: showFooter && !footerIsGlobal,
-        showSidebar,
-        summaryModalOpen,
-        onOpenSummaryModal: openSummaryModal,
-        onCloseSummaryModal: closeSummaryModal,
+    } = props;
+    const isMobileDetected = (0, import_useMobile.useMobile)(744);
+    const isMobile = mode === "modal" ? false : isMobileDetected;
+    const { currentStep, goPrev, goNext, goToStep } = (0, import_hooks.useStepManager)({
+      stepsProps: headerProps == null ? void 0 : headerProps.stepsProps,
+      defaultCurrent,
+      onPrev,
+      onNext,
+      onStepsChange
+    });
+    const [summaryModalOpen, setSummaryModalOpen] = (0, import_react.useState)(false);
+    const openSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(true), []);
+    const closeSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(false), []);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        /**
+         * 跳转到上一步
+         */
+        goPrev: () => goPrev(),
+        /**
+         * 跳转到下一步
+         */
+        goNext: () => goNext(),
+        /**
+         * 跳转到指定步骤
+         */
+        goToStep: (step) => goToStep(step),
+        /**
+         * 获取当前步骤索引
+         */
+        getCurrentStep: () => currentStep,
+        /**
+         * 打开移动端总结弹窗
+         */
+        openSummaryModal,
+        /**
+         * 关闭移动端总结弹窗
+         */
+        closeSummaryModal
+      }),
+      [
         goPrev,
         goNext,
-        mode
-      }
-    ), showFooter && footerIsGlobal && /* @__PURE__ */ import_react.default.createElement(
-      import_components.ProcedureFooter,
+        goToStep,
+        currentStep,
+        openSummaryModal,
+        closeSummaryModal
+      ]
+    );
+    const footerPosition = (0, import_react.useMemo)(() => {
+      if (isMobile && mode !== "modal") return "float-all";
+      return (footerProps == null ? void 0 : footerProps.position) || "float-sidebar";
+    }, [mode, isMobile, footerProps == null ? void 0 : footerProps.position]);
+    const containerCls = (0, import_react.useMemo)(() => {
+      return (0, import_utils.mergeClassNames)(
+        "pisell-procedure",
+        className,
+        // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
+        mode === "modal" && "pisell-procedure--modal",
+        (0, import_utils.modifierClassName)("pisell-procedure", `footer-${footerPosition}`)
+      );
+    }, [className, mode, footerPosition]);
+    const footerIsGlobal = (0, import_utils.isFooterGlobal)(footerPosition);
+    const containerSize = (0, import_hooks.useElementSize)({
+      selector: (bodyProps == null ? void 0 : bodyProps.sidebarContainerSelector) || "",
+      enabled: (bodyProps == null ? void 0 : bodyProps.direction) !== "vertical" && !!(bodyProps == null ? void 0 : bodyProps.sidebarContainerSelector)
+    });
+    const responsiveClsComputed = mode === "modal" ? (0, import_hooks.useResponsiveClass)((containerSize == null ? void 0 : containerSize.width) || 0) : "";
+    if (!responsiveClsComputed && mode === "modal") return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        footerProps,
-        position: footerPosition,
-        isGlobal: true,
-        sidebarContent: bodyProps == null ? void 0 : bodyProps.sidebarSlot,
-        summaryModalOpen,
-        onOpenSummaryModal: openSummaryModal,
-        onCloseSummaryModal: closeSummaryModal,
-        goPrev,
-        goNext,
-        mode
-      }
-    ))
-  );
-});
+        className: containerCls,
+        style,
+        "data-component": "pisell-procedure",
+        "data-id": __id,
+        ...other
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, null, showHeader && /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureHeader,
+        {
+          headerProps,
+          currentStep,
+          goPrev,
+          onClose,
+          onFirstStepBack,
+          onBackConfirm,
+          onCloseConfirm,
+          goToStep
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureBody,
+        {
+          bodyProps,
+          footerProps,
+          footerPosition,
+          showFooter: showFooter && !footerIsGlobal,
+          showSidebar,
+          summaryModalOpen,
+          onOpenSummaryModal: openSummaryModal,
+          onCloseSummaryModal: closeSummaryModal,
+          goPrev,
+          goNext,
+          mode,
+          containerSize,
+          responsiveClsComputed
+        }
+      ), showFooter && footerIsGlobal && /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureFooter,
+        {
+          footerProps,
+          position: footerPosition,
+          isGlobal: true,
+          sidebarContent: bodyProps == null ? void 0 : bodyProps.sidebarSlot,
+          summaryModalOpen,
+          onOpenSummaryModal: openSummaryModal,
+          onCloseSummaryModal: closeSummaryModal,
+          goPrev,
+          goNext,
+          mode
+        }
+      ))
+    );
+  }
+);
 PisellProcedure.displayName = "PisellProcedure";
 var PisellProcedure_default = PisellProcedure;

package/lib/components/PisellProcedure/PisellProcedure.less

@@ -157,32 +157,11 @@
       display: flex;
       flex-direction: column;
 
-      .@{procedure-prefix}-sider-content-top{
-        height: auto;
-        max-height: 100%;
-        overflow-y: auto;
-        background-color: #ffffff;
-      }
-
       .@{procedure-prefix}-footer{
         flex-shrink: 0;
       }
     }
 
-    // 纵向排列时的样式
-    .@{procedure-prefix}-body--vertical & {
-      width: 100% !important;
-      max-width: 100% !important;
-      min-width: 0 !important;
-      flex: 0 0 auto !important;
-      position: relative;
-      top: auto;
-
-      .@{procedure-prefix}-sider-content-top{
-        height: 100%;
-      }
-    }
-
     // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
     // 使用 CSS 变量 --pisell-procedure-container-width（由 JavaScript 动态设置）
     // 960px <= containerWidth < 1133px: 376px ~ 405px 线性插值
@@ -269,6 +248,27 @@
     }
   }
 
+  .@{procedure-prefix}-sider-content-top{
+    height: auto;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: #ffffff;
+  }
+
+  // 纵向排列时的样式
+  .@{procedure-prefix}-body--vertical & {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    flex: 0 0 auto !important;
+    position: relative;
+    top: auto;
+
+    .@{procedure-prefix}-sider-content-top{
+      height: 100%;
+    }
+  }
+
   // ========== 底部区域基础样式 ==========
   &-footer {
     display: flex;

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

@@ -37,11 +37,12 @@ var import_antd = require("antd");
 var import_UpOutlined = __toESM(require("@ant-design/icons/UpOutlined"));
 var import_useOverflowActions = require("../hooks/useOverflowActions");
 var import_utils = require("../utils");
+var import_locales = require("../../../locales");
 var FooterActions = ({
   leftSlot,
   children,
   className,
-  moreText = "More",
+  moreText,
   gap = 16
 }) => {
   const {
@@ -90,7 +91,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 } }, /* @__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 || (0, import_locales.getText)("pisell-procedure-footer-more"))), visibleActions)));
 };
 FooterActions.displayName = "FooterActions";
 var FooterActions_default = FooterActions;

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

@@ -28,6 +28,8 @@ export interface ProcedureBodyProps {
     goNext?: () => void;
     /** 组件使用模式 */
     mode?: ProcedureMode;
+    containerSize?: any;
+    responsiveClsComputed?: string;
 }
 /**
  * ProcedureBody 主体区域组件

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

@@ -50,7 +50,9 @@ var ProcedureBody = ({
   onCloseSummaryModal,
   goPrev,
   goNext,
-  mode = "page"
+  mode = "page",
+  containerSize,
+  responsiveClsComputed
 }) => {
   const direction = (bodyProps == null ? void 0 : bodyProps.direction) || "horizontal";
   const contentOrder = (bodyProps == null ? void 0 : bodyProps.contentOrder) || "content-first";
@@ -141,7 +143,9 @@ var ProcedureBody = ({
       isRatioMode: layoutMode === "ratio",
       containerSelector: bodyProps == null ? void 0 : bodyProps.sidebarContainerSelector,
       mode,
-      direction
+      direction,
+      containerSize,
+      responsiveClsComputed
     },
     bodyProps == null ? void 0 : bodyProps.sidebarSlot
   ) : null;

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

@@ -25,6 +25,8 @@ export interface ProcedureSidebarProps {
     mode?: ProcedureMode;
     /** 排列方向 */
     direction?: BodyDirection;
+    containerSize?: any;
+    responsiveClsComputed?: string;
 }
 /**
  * ProcedureSidebar 信息区组件

package/lib/components/PisellProcedure/components/ProcedureSidebar.js

@@ -44,7 +44,9 @@ var ProcedureSidebar = ({
   isRatioMode = false,
   containerSelector,
   mode = "page",
-  direction = "horizontal"
+  direction = "horizontal",
+  containerSize,
+  responsiveClsComputed
 }) => {
   const isVertical = direction === "vertical";
   const headerSize = (0, import_hooks.useElementSize)({
@@ -63,14 +65,8 @@ var ProcedureSidebar = ({
     (floatAllFooterSize == null ? void 0 : floatAllFooterSize.height) || 0,
     (fixedBottomFooterSize == null ? void 0 : fixedBottomFooterSize.height) || 0
   );
-  const containerSize = (0, import_hooks.useElementSize)({
-    selector: containerSelector || "",
-    enabled: !isVertical && !!containerSelector,
-    threshold: 5,
-    debounceMs: 200
-  });
   const containerWidth = (containerSize == null ? void 0 : containerSize.width) || 0;
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     if (containerWidth > 0) {
@@ -107,7 +103,6 @@ var ProcedureSidebar = ({
     headerHeight: headerSize == null ? void 0 : headerSize.height,
     footerHeight
   });
-  const responsiveClsComputed = (0, import_hooks.useResponsiveClass)(containerWidth);
   const responsiveCls = mode === "modal" ? responsiveClsComputed : "";
   const sidebarCls = (0, import_react.useMemo)(() => {
     return (0, import_utils.mergeClassNames)(
@@ -117,6 +112,14 @@ var ProcedureSidebar = ({
       responsiveCls
     );
   }, [className, isRatioMode, responsiveCls]);
+  const _height = (0, import_react.useMemo)(() => {
+    if (mode === "modal") {
+      return "100%";
+    }
+    if (siderHeight && siderHeight > 0) {
+      return `${siderHeight}px`;
+    }
+  }, [mode, siderHeight]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_sider.default,
     {
@@ -124,10 +127,7 @@ var ProcedureSidebar = ({
       style: {
         ...style,
         overflow: "hidden",
-        ...siderHeight && siderHeight > 0 ? {
-          height: `${siderHeight}px`
-        } : {},
-        top: mode === "modal" ? 0 : `${(headerSize == null ? void 0 : headerSize.height) + 32}px`
+        ..._height && { height: _height }
       }
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-sider-content-top" }, children),

package/lib/components/PisellProcedure/hooks/useElementSize.d.ts

@@ -35,4 +35,4 @@ export interface ElementSize {
  *   defaultHeight: 0
  * });
  */
-export declare const useElementSize: ({ selector, enabled, defaultWidth, defaultHeight, threshold, debounceMs, }: UseElementSizeOptions) => ElementSize;
+export declare const useElementSize: ({ selector, enabled, defaultWidth, defaultHeight, debounceMs, }: UseElementSizeOptions) => ElementSize;