@pisell/materials 6.8.2 → 6.8.4

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 = rect.width;
-        const newHeight = rect.height;
-        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.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.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.js

@@ -33,13 +33,24 @@ var useSidebarHeight = (isSizeStable, sizeValues) => {
   (0, import_react.useEffect)(() => {
     sizeValuesRef.current = sizeValues;
   }, [sizeValues]);
+  const getBodyScaleY = (0, import_react.useCallback)(() => {
+    try {
+      if (typeof window === "undefined" || typeof document === "undefined") {
+        return 1;
+      }
+      const bodyTransform = getComputedStyle(document.body).transform;
+      let scaleY = 1;
+      if (bodyTransform !== "none") {
+        const matrix = new DOMMatrix(bodyTransform);
+        scaleY = matrix.d;
+      }
+      return scaleY;
+    } catch (error) {
+      return 1;
+    }
+  }, []);
   const calculateHeight = (0, import_react.useCallback)(() => {
-    const {
-      containerSelector,
-      containerHeight,
-      headerHeight,
-      footerHeight
-    } = sizeValuesRef.current;
+    const { containerSelector, containerHeight, headerHeight, footerHeight } = sizeValuesRef.current;
     let baseHeight;
     if (containerSelector && containerSelector.trim() && containerHeight && containerHeight > 0) {
       baseHeight = containerHeight;
@@ -49,8 +60,10 @@ var useSidebarHeight = (isSizeStable, sizeValues) => {
     const bodyPadding = 16 * 2;
     const headerHeightValue = headerHeight || 0;
     const calculatedHeight = baseHeight - headerHeightValue - footerHeight - bodyPadding;
-    return calculatedHeight;
-  }, []);
+    const scaleY = getBodyScaleY();
+    const scaledHeight = calculatedHeight / scaleY;
+    return Math.round(scaledHeight * 100) / 100;
+  }, [sizeValuesRef.current, getBodyScaleY]);
   (0, import_react.useEffect)(() => {
     if (typeof window === "undefined" || typeof document === "undefined") {
       return;

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

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

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

@@ -24,6 +24,41 @@ export interface StepChangeResult {
     /** 当前步骤数据 */
     currentItem: StepItem | null;
 }
+/**
+ * PisellProcedure Ref 暴露的方法
+ * @description 通过 ref 可以调用的组件方法
+ */
+export interface PisellProcedureRef {
+    /**
+     * 跳转到上一步
+     * @returns 步骤变化结果，如果无法跳转则返回 null
+     */
+    goPrev: () => StepChangeResult | null;
+    /**
+     * 跳转到下一步
+     * @returns 步骤变化结果，如果无法跳转则返回 null
+     */
+    goNext: () => StepChangeResult | null;
+    /**
+     * 跳转到指定步骤
+     * @param step - 目标步骤索引
+     * @returns 步骤变化结果，如果无法跳转则返回 null
+     */
+    goToStep: (step: number) => StepChangeResult | null;
+    /**
+     * 获取当前步骤索引
+     * @returns 当前步骤索引
+     */
+    getCurrentStep: () => number;
+    /**
+     * 打开移动端总结弹窗
+     */
+    openSummaryModal: () => void;
+    /**
+     * 关闭移动端总结弹窗
+     */
+    closeSummaryModal: () => void;
+}
 /**
  * 返回确认弹窗配置
  */

package/lib/components/PisellScrollView/components/Actions/index.d.ts

@@ -8,5 +8,5 @@ interface ActionsContainerProps {
     containerRef: React.RefObject<HTMLDivElement>;
     onClick: (direction: 'left' | 'right' | 'top' | 'bottom') => void;
 }
-declare const ActionsContainer: ({ containerRef, scrollState, overflow, scrollActionsConfig, onClick, }: ActionsContainerProps) => React.JSX.Element | null;
+declare const ActionsContainer: ({ containerRef, scrollState, overflow, scrollActionsConfig, onClick, }: ActionsContainerProps) => JSX.Element | null;
 export default ActionsContainer;

package/lib/components/PisellScrollView/hooks/useScrollState.d.ts

@@ -1,8 +1,12 @@
 import { RefObject } from 'react';
-import { ScrollEventData } from '../types';
-export declare const useScrollState: ({ containerRef, overflow }: {
+import { ScrollEventData, PisellScrollViewProps } from '../types';
+/**
+ * 滚动状态管理 Hook
+ * @description 管理滚动容器的状态，包括滚动位置、溢出检测等
+ */
+export declare const useScrollState: ({ containerRef, overflow, }: {
     containerRef: RefObject<HTMLElement>;
-    overflow: PisellScrollViewProps;
+    overflow: PisellScrollViewProps['overflow'];
 }) => {
     scrollState: ScrollEventData;
     updateScrollState: () => void;