@pisell/materials 1.0.989 → 1.0.991

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { ProcedureMode, BodyDirection } from '../types';
+/**
+ * ProcedureSidebar 子组件 Props
+ */
+export interface ProcedureSidebarProps {
+    /** 信息区类名 */
+    className?: string;
+    /** 信息区样式 */
+    style?: CSSProperties;
+    /** 信息区插槽 */
+    children?: ReactNode;
+    /** 额外内容（如底部操作区） */
+    extra?: ReactNode;
+    /** 是否为比例布局模式 */
+    isRatioMode?: boolean;
+    /**
+     * 容器元素选择器（类名或 ID）
+     * @description 用于计算高度的容器元素，支持类名（如 '.modal-container'）或 ID（如 '#dialog-container'）
+     * @description 如果不提供，则使用 window.innerHeight 作为基准
+     */
+    containerSelector?: string;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
+    /** 排列方向 */
+    direction?: BodyDirection;
+    containerSize?: any;
+    responsiveClsComputed?: string;
+}
+/**
+ * ProcedureSidebar 信息区组件
+ *
+ * @description 流程容器的信息区（侧边栏），用于展示摘要信息
+ * @author Pisell Team
+ */
+declare const ProcedureSidebar: React.FC<ProcedureSidebarProps>;
+export default 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,28 +103,27 @@ 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)(
       "pisell-procedure-sidebar",
       className,
-      isRatioMode && "pisell-procedure-sidebar--ratio",
-      responsiveCls
+      isRatioMode && "pisell-procedure-sidebar--ratio"
+      // 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,
     {
-      className: sidebarCls,
-      style: {
-        ...style,
-        overflow: "hidden",
-        ...siderHeight && siderHeight > 0 ? {
-          height: `${siderHeight}px`
-        } : {},
-        top: mode === "modal" ? 0 : `${(headerSize == null ? void 0 : headerSize.height) + 32}px`
-      }
+      className: sidebarCls
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-sider-content-top" }, children),
     extra

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

@@ -0,0 +1,12 @@
+export { default as FooterActions } from './FooterActions';
+export type { FooterActionsProps } from './FooterActions';
+export { default as ProcedureHeader } from './ProcedureHeader';
+export type { ProcedureHeaderProps } from './ProcedureHeader';
+export { default as ProcedureBody } from './ProcedureBody';
+export type { ProcedureBodyProps } from './ProcedureBody';
+export { default as ProcedureContent } from './ProcedureContent';
+export type { ProcedureContentProps } from './ProcedureContent';
+export { default as ProcedureSidebar } from './ProcedureSidebar';
+export type { ProcedureSidebarProps } from './ProcedureSidebar';
+export { default as ProcedureFooter } from './ProcedureFooter';
+export type { ProcedureFooterProps } from './ProcedureFooter';

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

@@ -0,0 +1,8 @@
+export { useStepManager } from './useStepManager';
+export type { UseStepManagerOptions, UseStepManagerReturn, } from './useStepManager';
+export { useElementSize } from './useElementSize';
+export type { UseElementSizeOptions, ElementSize, } from './useElementSize';
+export { useOverflowActions } from './useOverflowActions';
+export type { UseOverflowActionsOptions, UseOverflowActionsReturn, } from './useOverflowActions';
+export { useSidebarHeight } from './useSidebarHeight';
+export { useResponsiveClass } from './useResponsiveClass';

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

@@ -0,0 +1,38 @@
+/**
+ * useElementSize Hook 配置
+ */
+export interface UseElementSizeOptions {
+    /** 元素选择器（类名、ID 或其他 CSS 选择器） */
+    selector: string;
+    /** 是否启用监听（默认 true） */
+    enabled?: boolean;
+    /** 默认宽度（元素不存在时使用） */
+    defaultWidth?: number;
+    /** 默认高度（元素不存在时使用） */
+    defaultHeight?: number;
+    /** 尺寸变化阈值（像素），只有变化超过此值才更新（默认 1px） */
+    threshold?: number;
+    /** 防抖延迟时间（毫秒），默认 100ms */
+    debounceMs?: number;
+}
+/**
+ * 元素尺寸信息
+ */
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * 元素尺寸计算 Hook（宽度和高度）
+ *
+ * @description 计算指定元素的宽度和高度，并监听尺寸变化自动更新
+ * 使用 ResizeObserver 和防抖机制优化性能，减少不必要的更新
+ *
+ * @example
+ * const { width, height } = useElementSize({
+ *   selector: '.modal-container',
+ *   defaultWidth: 0,
+ *   defaultHeight: 0
+ * });
+ */
+export declare const useElementSize: ({ selector, enabled, defaultWidth, defaultHeight, debounceMs, }: UseElementSizeOptions) => ElementSize;

package/lib/components/PisellProcedure/hooks/useElementSize.js

@@ -28,145 +28,58 @@ var useElementSize = ({
   enabled = true,
   defaultWidth = 0,
   defaultHeight = 0,
-  threshold = 1,
   debounceMs = 100
 }) => {
   const [size, setSize] = (0, import_react.useState)({
     width: defaultWidth,
     height: defaultHeight
   });
-  const previousSizeRef = (0, import_react.useRef)({
-    width: defaultWidth,
-    height: defaultHeight
-  });
-  const debounceTimerRef = (0, import_react.useRef)(null);
-  const resizeObserverRef = (0, import_react.useRef)(null);
-  const elementRef = (0, import_react.useRef)(null);
-  const calculateSize = (0, import_react.useCallback)(() => {
-    if (!enabled || typeof window === "undefined" || typeof document === "undefined") {
-      setSize({ width: defaultWidth, height: defaultHeight });
-      return;
+  const handScale = () => {
+    var _a;
+    const bodyTransform = (_a = getComputedStyle(document.body)) == null ? void 0 : _a.transform;
+    let scaleY = 1;
+    let scaleX = 1;
+    if (bodyTransform !== "none") {
+      const matrix = new DOMMatrix(bodyTransform);
+      scaleX = matrix.a;
+      scaleY = matrix.d;
     }
-    if (!selector || !selector.trim()) {
-      setSize({ width: defaultWidth, height: defaultHeight });
-      return;
-    }
-    try {
-      const element = document.querySelector(selector);
-      if (element) {
-        const rect = element.getBoundingClientRect();
-        const newWidth = Math.round(rect.width * 100) / 100;
-        const newHeight = Math.round(rect.height * 100) / 100;
-        const previousSize = previousSizeRef.current;
-        const widthDiff = Math.abs(newWidth - previousSize.width);
-        const heightDiff = Math.abs(newHeight - previousSize.height);
-        if (widthDiff >= threshold || heightDiff >= threshold) {
-          const newSize = {
-            width: newWidth,
-            height: newHeight
-          };
-          previousSizeRef.current = newSize;
-          setSize(newSize);
-        }
-      } else {
-        if (previousSizeRef.current.width !== defaultWidth || previousSizeRef.current.height !== defaultHeight) {
-          const newSize = {
-            width: defaultWidth,
-            height: defaultHeight
-          };
-          previousSizeRef.current = newSize;
-          setSize(newSize);
-        }
-      }
-    } catch (error) {
-      console.warn(`Invalid selector in useElementSize: ${selector}`, error);
-      if (previousSizeRef.current.width !== defaultWidth || previousSizeRef.current.height !== defaultHeight) {
-        const newSize = {
-          width: defaultWidth,
-          height: defaultHeight
-        };
-        previousSizeRef.current = newSize;
-        setSize(newSize);
-      }
-    }
-  }, [selector, enabled, defaultWidth, defaultHeight, threshold]);
-  const debouncedCalculateSize = (0, import_react.useCallback)(() => {
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
-    debounceTimerRef.current = setTimeout(() => {
-      calculateSize();
-    }, debounceMs);
-  }, [calculateSize, debounceMs]);
-  (0, import_react.useEffect)(() => {
+    return { scaleX, scaleY };
+  };
+  (0, import_react.useLayoutEffect)(() => {
     if (!enabled || typeof window === "undefined" || typeof document === "undefined") {
       return;
     }
     if (!selector || !selector.trim()) {
       setSize({ width: defaultWidth, height: defaultHeight });
-      previousSizeRef.current = { width: defaultWidth, height: defaultHeight };
-      return;
-    }
-    let element = null;
-    try {
-      element = document.querySelector(selector);
-    } catch (error) {
-      console.warn(`Invalid selector in useElementSize: ${selector}`, error);
-      setSize({ width: defaultWidth, height: defaultHeight });
-      previousSizeRef.current = { width: defaultWidth, height: defaultHeight };
       return;
     }
-    if (!element) {
-      setSize({ width: defaultWidth, height: defaultHeight });
-      previousSizeRef.current = { width: defaultWidth, height: defaultHeight };
-      return;
-    }
-    elementRef.current = element;
-    calculateSize();
-    const initialTimer = setTimeout(() => {
-      debouncedCalculateSize();
-    }, 200);
-    if (typeof ResizeObserver !== "undefined") {
-      resizeObserverRef.current = new ResizeObserver(() => {
-        debouncedCalculateSize();
-      });
-      resizeObserverRef.current.observe(element);
-    } else {
-      const mutationObserver = new MutationObserver(() => {
-        debouncedCalculateSize();
-      });
-      mutationObserver.observe(element, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ["style", "class"]
-      });
-      const handleResize = () => {
-        debouncedCalculateSize();
-      };
-      window.addEventListener("resize", handleResize);
-      return () => {
-        clearTimeout(initialTimer);
-        if (debounceTimerRef.current) {
-          clearTimeout(debounceTimerRef.current);
-        }
-        mutationObserver.disconnect();
-        if (typeof window !== "undefined") {
-          window.removeEventListener("resize", handleResize);
+    const handleResize = () => {
+      setTimeout(() => {
+        let element = null;
+        try {
+          element = document.querySelector(selector);
+          const rect = element == null ? void 0 : element.getBoundingClientRect();
+          if (rect) {
+            const { scaleX } = handScale();
+            const elementWidth = (element == null ? void 0 : element.clientWidth) || 0;
+            const scaledWidth = elementWidth * scaleX;
+            const width = Math.round(scaledWidth * 100) / 100;
+            const height = Math.round((rect == null ? void 0 : rect.height) * 100) / 100;
+            setSize({ width, height });
+          }
+        } catch (error) {
+          setSize({ width: defaultWidth, height: defaultHeight });
+          return;
         }
-      };
-    }
+      }, debounceMs);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
     return () => {
-      clearTimeout(initialTimer);
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-      if (resizeObserverRef.current && elementRef.current) {
-        resizeObserverRef.current.unobserve(elementRef.current);
-        resizeObserverRef.current.disconnect();
-      }
+      window.removeEventListener("resize", handleResize);
     };
-  }, [selector, enabled, defaultWidth, defaultHeight, calculateSize, debouncedCalculateSize]);
+  }, [selector, enabled, defaultWidth, defaultHeight, debounceMs]);
   return size;
 };
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { MenuProps } from 'antd';
+/**
+ * useOverflowActions Hook 配置
+ */
+export interface UseOverflowActionsOptions {
+    /** 操作按钮子元素 */
+    children?: React.ReactNode;
+    /** 按钮间距 */
+    gap?: number;
+    /** More 按钮文案 */
+    moreText?: string;
+}
+/**
+ * useOverflowActions Hook 返回值
+ */
+export interface UseOverflowActionsReturn {
+    /** 容器 ref */
+    containerRef: React.RefObject<HTMLDivElement>;
+    /** 测量容器 ref */
+    measureRef: React.RefObject<HTMLDivElement>;
+    /** More 按钮测量 ref */
+    moreButtonRef: React.RefObject<HTMLDivElement>;
+    /** 左侧插槽 ref（用于测量宽度） */
+    leftSlotRef: React.RefObject<HTMLDivElement>;
+    /** 所有操作项 */
+    actionItems: React.ReactNode[];
+    /** 可见的操作项 */
+    visibleActions: React.ReactNode[];
+    /** 溢出的操作项 */
+    overflowActions: React.ReactNode[];
+    /** 是否有溢出 */
+    hasOverflow: boolean;
+    /** More 菜单项 */
+    moreMenuItems: MenuProps['items'];
+    /** 可用宽度（用于调试） */
+    availableWidth: number;
+}
+/**
+ * 溢出收纳 Hook
+ * @description 处理操作按钮的溢出收纳逻辑，支持左侧自定义内容
+ */
+export declare const useOverflowActions: (options: UseOverflowActionsOptions) => UseOverflowActionsReturn;

package/lib/components/PisellProcedure/hooks/useOverflowActions.js

@@ -24,8 +24,47 @@ __export(useOverflowActions_exports, {
 module.exports = __toCommonJS(useOverflowActions_exports);
 var import_react = require("react");
 var import_extractText = require("../utils/extractText");
+var isButtonElement = (element) => {
+  const props = element.props || {};
+  const className = props.className;
+  if (typeof className === "string" && className.includes("btn")) {
+    return true;
+  }
+  if (Array.isArray(className)) {
+    return className.some((cls) => typeof cls === "string" && cls.includes("btn"));
+  }
+  return false;
+};
+var extractButtons = (node, index = 0) => {
+  const buttons = [];
+  if (!node) {
+    return buttons;
+  }
+  if (Array.isArray(node)) {
+    node.forEach((item, i) => {
+      buttons.push(...extractButtons(item, i));
+    });
+    return buttons;
+  }
+  if ((0, import_react.isValidElement)(node)) {
+    const element = node;
+    if (isButtonElement(element)) {
+      buttons.push(
+        (0, import_react.cloneElement)(element, {
+          key: element.key ?? `btn-${index}`
+        })
+      );
+      return buttons;
+    }
+    if (element.props && element.props.children) {
+      const childButtons = extractButtons(element.props.children, index);
+      buttons.push(...childButtons);
+    }
+  }
+  return buttons;
+};
 var useOverflowActions = (options) => {
-  const { children, gap = 16, moreText = "More" } = options;
+  const { children, gap = 16 } = options;
   const containerRef = (0, import_react.useRef)(null);
   const measureRef = (0, import_react.useRef)(null);
   const moreButtonRef = (0, import_react.useRef)(null);
@@ -34,17 +73,7 @@ var useOverflowActions = (options) => {
   const [moreButtonWidth, setMoreButtonWidth] = (0, import_react.useState)(80);
   const [availableWidth, setAvailableWidth] = (0, import_react.useState)(0);
   const actionItems = (0, import_react.useMemo)(() => {
-    const items = [];
-    import_react.Children.forEach(children, (child, index) => {
-      if ((0, import_react.isValidElement)(child)) {
-        items.push(
-          (0, import_react.cloneElement)(child, {
-            key: child.key ?? index
-          })
-        );
-      }
-    });
-    return items;
+    return extractButtons(children);
   }, [children]);
   const measureWidths = (0, import_react.useCallback)(() => {
     if (typeof window === "undefined" || !measureRef.current || !moreButtonRef.current) return;

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

@@ -0,0 +1,6 @@
+/**
+ * 使用响应式类名的 Hook
+ *
+ * @description 根据容器宽度计算响应式类名，延迟应用以避免宽度抖动
+ */
+export declare const useResponsiveClass: (containerWidth: number) => string;

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

@@ -22,7 +22,6 @@ __export(useResponsiveClass_exports, {
   useResponsiveClass: () => useResponsiveClass
 });
 module.exports = __toCommonJS(useResponsiveClass_exports);
-var import_react = require("react");
 var RESPONSIVE_BREAKPOINTS = {
   lg: 1133,
   // ≥1133px: 默认样式（405px）
@@ -38,7 +37,7 @@ var RESPONSIVE_CLASSES = {
   // 最小宽度（< 744px）
 };
 var getResponsiveClass = (width) => {
-  if (width === 0) return "";
+  if (width === 0 || !width) return "";
   if (width >= RESPONSIVE_BREAKPOINTS.lg) {
     return "";
   }
@@ -51,49 +50,7 @@ var getResponsiveClass = (width) => {
   return RESPONSIVE_CLASSES.xs;
 };
 var useResponsiveClass = (containerWidth) => {
-  const [responsiveCls, setResponsiveCls] = (0, import_react.useState)("");
-  const previousWidthRef = (0, import_react.useRef)(0);
-  const rafIdRef = (0, import_react.useRef)(null);
-  const stableCheckCountRef = (0, import_react.useRef)(0);
-  (0, import_react.useEffect)(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    if (containerWidth === 0) {
-      setResponsiveCls("");
-      previousWidthRef.current = 0;
-      stableCheckCountRef.current = 0;
-      return;
-    }
-    if (rafIdRef.current !== null) {
-      cancelAnimationFrame(rafIdRef.current);
-    }
-    const checkStability = () => {
-      const currentWidth = containerWidth;
-      const previousWidth = previousWidthRef.current;
-      if (Math.abs(currentWidth - previousWidth) >= 5) {
-        stableCheckCountRef.current = 0;
-        previousWidthRef.current = currentWidth;
-      }
-      stableCheckCountRef.current += 1;
-      if (stableCheckCountRef.current >= 3) {
-        const newCls = getResponsiveClass(currentWidth);
-        setResponsiveCls(newCls);
-        previousWidthRef.current = currentWidth;
-        stableCheckCountRef.current = 0;
-      } else {
-        rafIdRef.current = requestAnimationFrame(checkStability);
-      }
-    };
-    rafIdRef.current = requestAnimationFrame(checkStability);
-    return () => {
-      if (rafIdRef.current !== null) {
-        cancelAnimationFrame(rafIdRef.current);
-        rafIdRef.current = null;
-      }
-    };
-  }, [containerWidth]);
-  return responsiveCls;
+  return getResponsiveClass(containerWidth);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -0,0 +1,16 @@
+/**
+ * 尺寸值接口
+ */
+interface SizeValues {
+    containerSelector?: string;
+    containerHeight?: number;
+    headerHeight?: number;
+    footerHeight: number;
+}
+/**
+ * 使用 Sidebar 高度的 Hook
+ *
+ * @description 计算并管理 Sidebar 的高度，确保在尺寸稳定后才应用
+ */
+export declare const useSidebarHeight: (isSizeStable: boolean, sizeValues: SizeValues) => number | undefined;
+export {};

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

@@ -0,0 +1,50 @@
+import type { StepChangeResult } from '../types';
+import type { PisellStepsProps } from '../../PisellSteps/types';
+/**
+ * useStepManager Hook 配置
+ */
+export interface UseStepManagerOptions {
+    /** 步骤条配置 */
+    stepsProps?: PisellStepsProps;
+    /** 初始步骤索引 */
+    defaultCurrent?: number;
+    /** 上一步事件回调 */
+    onPrev?: (current: number) => boolean | void;
+    /** 下一步事件回调 */
+    onNext?: (current: number) => boolean | void;
+    /** 步骤变化回调 */
+    onStepsChange?: (result: StepChangeResult) => void;
+    /** 跳转到指定步骤 */
+    goToStep?: (step: number) => void;
+}
+/**
+ * useStepManager Hook 返回值
+ */
+export interface UseStepManagerReturn {
+    /** 当前步骤索引 */
+    currentStep: number;
+    /** 步骤列表 */
+    items: any[];
+    /** 步骤总数 */
+    totalSteps: number;
+    /** 上一步 */
+    goPrev: () => StepChangeResult | null;
+    /** 下一步 */
+    goNext: () => StepChangeResult | null;
+    /** 跳转到指定步骤 */
+    goToStep: (step: number) => StepChangeResult | null;
+}
+/**
+ * 步骤管理 Hook
+ *
+ * @description 管理多步骤流程的状态和操作
+ * @example
+ * const { currentStep, goPrev, goNext } = useStepManager({
+ *   stepsProps: { items: [...] },
+ *   defaultCurrent: 0,
+ *   onPrev: (current) => { ... },
+ *   onNext: (current) => { ... },
+ *   onStepsChange: (result) => { ... },
+ * });
+ */
+export declare const useStepManager: ({ stepsProps, defaultCurrent, onPrev, onNext, onStepsChange, }: UseStepManagerOptions) => UseStepManagerReturn;

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

@@ -0,0 +1,5 @@
+/**
+ * PisellProcedure 组件导出
+ */
+export { default } from './PisellProcedure';
+export type { PisellProcedureProps, PisellProcedureRef, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, FooterPositionMode, BackConfirmModalConfig, BodyLayoutMode, BodyLayoutRatio, BodyDirection, StepItem, StepChangeResult, } from './types';