@pisell/materials 6.8.1 → 6.8.3

package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts

@@ -19,7 +19,7 @@ interface UseTablePropsProps {
  */
 declare const useTableProps: (props: UseTablePropsProps) => {
     currentComponentId: any;
-    title: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
+    title: string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
     pagination: {
         total: number;
         current: number;
@@ -28,7 +28,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         showSizeChanger: boolean;
     };
     columns: import("./useColumns").Column[];
-    subTitle: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
+    subTitle: string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
     buttons: any[] | null;
     filter: {
         dom: any;
@@ -54,7 +54,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         width: number;
         align: "center" | "left" | "right";
         fixed: false | "left" | "right";
-        type: "link" | "button";
+        type: "button" | "link";
         items: OperationItem[];
     } | undefined;
     operationContent?: {
@@ -72,7 +72,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         useCustomAction: boolean;
         actionType: string;
         openMode: "modal" | "drawer";
-        openContentSize: "small" | "large" | "middle";
+        openContentSize: "small" | "middle" | "large";
         openTitle: string;
         key: string;
     } | undefined;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableQuery.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataSourceTableProps } from '../type';
 declare type Params = {
     pagination?: {

package/es/components/dataSourceComponents/fields/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const formFieldMap: {
     FormItemCheckbox: import("react").FC<{}> & {
         Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;

package/es/components/date-picker/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const DatePicker: (props: any) => import("react").JSX.Element;
 export default DatePicker;

package/es/components/filter/components/items/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const fieldMaps: {
     text: {
         field: {

package/es/components/filter/components/items/text/Editor/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Text: () => import("react").JSX.Element;
 export default Text;

package/es/components/filter/components/items/text/Preview/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Text: (props: any) => import("react").JSX.Element;
 export default Text;

package/es/components/filter/components/items/text/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     field: {
         field_icon: string;

package/es/components/pisellDatePicker/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const PisellDatePicker: (props: any) => import("react").JSX.Element;
 export default PisellDatePicker;

package/es/components/pisellModal/components/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import IpadModal from './IpadModal';
 import MobileModal from './MobileModal';
 import PcModal from './PcModal';

package/es/components/productCard/cartSkuCard/components/packages/utils.d.ts

@@ -17,4 +17,4 @@ export declare const minusSign: (item: any, type?: string) => "" | "-";
  * @Author: WangHan
  * @Date: 2024-11-22 10:58
  */
-export declare const _formatAmount: (price?: number, amountSymbol?: string, digit?: number) => string | number;
+export declare const _formatAmount: (price?: number, amountSymbol?: string, digit?: number) => any;

package/es/components/productCard/components/Packages/utils.d.ts

@@ -17,4 +17,4 @@ export declare const minusSign: (item: any, type?: string) => "" | "-";
  * @Author: WangHan
  * @Date: 2024-11-22 10:58
  */
-export declare const _formatAmount: (price?: number, amountSymbol?: string, digit?: number) => string | number;
+export declare const _formatAmount: (price?: number, amountSymbol?: string, digit?: number) => any;

package/es/components/radio/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Radio: (props: any) => import("react").JSX.Element;
 export default Radio;

package/es/components/skeleton/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Skeleton: (props: any) => import("react").JSX.Element;
 export default Skeleton;

package/es/components/table/Gallery/components/VirtualGrid/useGapSize.d.ts

@@ -1,5 +1,5 @@
 declare const useGapSize: (gap: number | number[]) => {
-    horizontal: number;
-    vertical: number;
+    horizontal: any;
+    vertical: any;
 };
 export default useGapSize;

package/es/components/table/Table/fields/date/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/es/components/table/Table/fields/image/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     field: {
         field_icon: string;

package/es/components/table/Table/fields/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const fieldMaps: {
     text: {
         field: {

package/es/components/table/Table/fields/link/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     field: {
         field_icon: string;

package/es/components/table/Table/fields/number/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/es/components/table/Table/fields/numberRange/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/es/components/table/Table/fields/oldRangePicker/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/es/components/table/Table/fields/pSwitch/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     field: {
         field_icon: string;

package/es/components/table/Table/fields/rangePicker/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/es/components/table/Table/fields/search/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/es/components/table/Table/fields/select/filterUtil/index.d.ts

@@ -2,4 +2,4 @@ export default function ({ value, key, item, }: {
     value: string | string[];
     key: string | string[];
     item: Record<string, any>;
-}): boolean;
+}): any;

package/es/components/table/Table/fields/select/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/es/components/table/Table/fields/text/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/es/components/table/Table/fields/treeSelect/filterUtil/index.d.ts

@@ -2,4 +2,4 @@ export default function ({ value, key, item, }: {
     value: string | string[] | Record<string, any>[];
     key: string | string[];
     item: Record<string, any>;
-}): boolean;
+}): any;

package/es/components/table/Table/fields/treeSelect/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/es/components/table/Table/utils.d.ts

@@ -155,7 +155,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("view_mode" | "filter_setting" | "group_by" | "order_by" | "column_setting" | "gallery_setting" | "filters")[];
+}) => ("filters" | "filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

package/es/components/time-picker/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const TimePicker: (props: any) => import("react").JSX.Element;
 export default TimePicker;

package/es/components/upload/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Upload: (props: any) => import("react").JSX.Element;
 export default Upload;

package/es/components/virtual-keyboard/Time/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const formatStringToTime: (value: string) => {
     valueArray: string[];
     valueString: string;

package/es/utils/index.d.ts

@@ -1,4 +1,4 @@
 export declare const isBrowser: boolean;
-export declare const getCssNumber: (val: string | number) => string;
+export declare const getCssNumber: (val: string | number) => string | number;
 export declare function uuid(): string;
 export * from './mergeWith';

package/es/utils/platform.d.ts

@@ -1 +1 @@
-export declare const isMobile: () => boolean;
+export declare const isMobile: () => any;

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

@@ -5,7 +5,7 @@ export declare const paginationConfig: {
     className: string;
     defaultCurrent: number;
     showTotal: (total: number, range: [number, number]) => string;
-    itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
+    itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
     responsive: boolean;
     size: string;
 };

package/lib/components/PisellCards/components/MultilevelCard/hooks/useMultilevelCardExpand.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MultilevelCardTrigger } from '../types';
 /**
  * 管理 MultilevelCard 的展开/收起状态

package/lib/components/PisellCards/components/PisellImageCard/hooks/useImageLoad.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * 图片加载状态管理 Hook
  * @param src - 图片地址

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const PisellCards: {
     TabCard: (props: any) => import("react").JSX.Element;
     TextCard: (props: any) => import("react").JSX.Element;

package/lib/components/PisellProcedure/PisellProcedure.js

@@ -67,7 +67,8 @@ var PisellProcedure = (props) => {
     __id,
     ...other
   } = props;
-  const isMobile = mode === "modal" ? false : (0, import_useMobile.useMobile)(744);
+  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,
@@ -86,9 +87,11 @@ var PisellProcedure = (props) => {
     return (0, import_utils.mergeClassNames)(
       "pisell-procedure",
       className,
+      // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
+      mode === "modal" && "pisell-procedure--modal",
       (0, import_utils.modifierClassName)("pisell-procedure", `footer-${footerPosition}`)
     );
-  }, [className, footerPosition]);
+  }, [className, mode, footerPosition]);
   const footerIsGlobal = (0, import_utils.isFooterGlobal)(footerPosition);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",

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,21 +134,19 @@
 
     // 纵向排列时的样式
     .@{procedure-prefix}-body--vertical & {
-      width: 100%;
+      width: 100% !important;
       flex: 1 1 auto;
     }
   }
 
   // 信息区 - 高度自适应内容，sticky 定位
   &-sidebar {
-    width: @sidebar-width-xl;
-    max-width: @sidebar-width-xl;
-    min-width: @sidebar-width-xl;
-    flex: 0 0 @sidebar-width-xl;
+    width: initial !important;
+    max-width: initial !important;
+    min-width: initial !important;
     background-color: @color-bg-sidebar;
     border-radius: 4px;
     position: sticky!important;
-    top: calc(64px + @gap-default * 2); // header 高度 + body padding + 额外间距
     overflow-y: auto;
     align-self: flex-start; // 不拉伸高度
     background: transparent !important;
@@ -177,6 +177,10 @@
       flex: 0 0 auto !important;
       position: relative;
       top: auto;
+
+      .@{procedure-prefix}-sider-content-top{
+        height: 100%;
+      }
     }
 
     // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
@@ -212,37 +216,46 @@
       display: initial !important;
     }
 
-    // 保留媒体查询作为降级方案（当没有提供 containerSelector 时，即页面模式）
-    // 弹窗模式下会添加 responsive-xs 类名，所以媒体查询不会生效
-    // 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;
+    // 大于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-md !important;
-        flex: 0 0 @sidebar-width-dynamic !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;
+      // 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: 隐藏（仅页面模式，弹窗模式有 responsive-xs 类名不会隐藏）
-    @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: 隐藏（仅页面模式）
+      @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;
+        }
       }
     }
 
@@ -270,7 +283,7 @@
     z-index: 100;
     overflow: hidden; // 防止内容溢出
 
-    // 总结按钮插槽 - 仅移动端显示（< 744px）
+    // 总结按钮插槽 - 仅移动端显示（< 744px），弹窗模式下不执行媒体查询
     &__summary {
       flex-shrink: 0;
       margin-right: auto;
@@ -278,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;
+        }
       }
     }
 
@@ -464,80 +479,82 @@
           flex-shrink: 0;
           position: sticky;
           bottom: 0;
-          margin:auto 0;
+          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: 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% !important;
-    }
   }
 }

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

@@ -140,7 +140,8 @@ var ProcedureBody = ({
       extra: sidebarFooter,
       isRatioMode: layoutMode === "ratio",
       containerSelector: bodyProps == null ? void 0 : bodyProps.sidebarContainerSelector,
-      mode
+      mode,
+      direction
     },
     bodyProps == null ? void 0 : bodyProps.sidebarSlot
   ) : null;