@pisell/materials 6.8.3 → 6.8.4

package/lib/components/PisellProcedure/PisellProcedure.js

@@ -39,112 +39,151 @@ var import_hooks = require("./hooks");
 var import_utils = require("./utils");
 var import_useMobile = require("../../hooks/useMobile");
 var import_PisellProcedure = require("./PisellProcedure.less");
-var PisellProcedure = (props) => {
-  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), []);
-  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);
+    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
+        }
+      ), 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

@@ -11,6 +11,7 @@
 @sidebar-width-xl: 405px;  // ≥1133px
 @sidebar-width-md: 376px;  // 960px-1133px
 @sidebar-width-sm: 290px;  // 744px-960px
+@sidebar-width-880: 344px;  // 880px-960px
 
 // 间距
 @gap-default: 16px;
@@ -87,6 +88,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    overflow-y: auto;
 
     // 主体区域内部的 Layout
     > .pisell-lowcode-layout,
@@ -100,9 +102,6 @@
       padding: @gap-default;
     }
 
-    // ========== 布局模式：固定宽度（默认） ==========
-    // &--fixed 使用默认的固定宽度布局，无需额外样式
-
     // ========== 布局模式：比例布局 ==========
     &--ratio {
       // 移动端：比例模式下也隐藏信息区（弹窗模式下不执行）
@@ -141,122 +140,47 @@
 
   // 信息区 - 高度自适应内容，sticky 定位
   &-sidebar {
-    width: initial !important;
+    width: auto !important;
     max-width: initial !important;
     min-width: initial !important;
+    flex: 0 0 auto !important;
     background-color: @color-bg-sidebar;
     border-radius: 4px;
     position: sticky!important;
     overflow-y: auto;
     align-self: flex-start; // 不拉伸高度
     background: transparent !important;
-    height: fit-content;
+    height: 100% !important;
 
     .@{pisell-layout-prefix}-sider-content{
-      overflow: hidden!important;
+      overflow: hidden !important;
       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%;
-      }
+    // ≥1133px: 固定宽度 405px
+    @media (min-width: @breakpoint-xl) {
+      width: @sidebar-width-xl;
     }
-
-    // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
-    // 使用 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 <= 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;
+    // 960px <= viewportWidth < 1133px: 376px ~ 405px
+    @media (min-width: @breakpoint-md) and (max-width: calc(@breakpoint-lg - 1px)) {
+      max-width: @sidebar-width-xl;
+      min-width: @sidebar-width-md;
     }
 
-    // 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;
+    // 744px <= viewportWidth < 960px: 290px ~ 376px
+    @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
+      max-width: @sidebar-width-md;
+      min-width: @sidebar-width-sm;
     }
 
-    // 大于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;
-        }
-      }
+    // viewportWidth < 744px: slider区域隐藏  
+    @media (max-width: calc(@breakpoint-sm - 1px)) {
+        display: none;
     }
 
     // ========== 比例模式样式（在基础样式内部，确保优先级） ==========
@@ -269,6 +193,49 @@
     }
   }
 
+  .@{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%;
+    }
+  }
+
+  .@{procedure-prefix}--modal & {
+    background: red;
+    &-sidebar {
+      // >= 880px: 固定宽度 344px
+    @media (min-width: 880px) {
+      width: @sidebar-width-880 !important;
+    }
+
+    // 744px <= viewportWidth < 880px: 290px ~ 344px
+    @media (min-width: @breakpoint-sm) and (max-width: calc(880px - 1px)) {
+      max-width: @sidebar-width-880 !important;
+      min-width: @sidebar-width-sm !important;
+    }
+
+    // viewportWidth < 744px: 290px
+    @media (max-width: calc(@breakpoint-sm - 1px)) {
+      width: @sidebar-width-sm !important;
+      display: block !important;
+    }
+    }
+  }
+
   // ========== 底部区域基础样式 ==========
   &-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,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/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;