@ant-design/pro-components 2.8.9 → 3.0.0-beta.1

package/es/layout/components/Help/ProHelpContentPanel.js

@@ -0,0 +1,154 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/layout/components/Help/ProHelpContentPanel.tsx
+import classNames from "classnames";
+import React, { useContext, useEffect, useMemo, useRef } from "react";
+import { ProProvider } from "../../../provider";
+import { useDebounceFn } from "../../../utils";
+import { AsyncContentPanel } from "./AsyncContentPanel";
+import { ProHelpProvide } from "./HelpProvide";
+import { RenderContentPanel } from "./RenderContentPanel";
+var ProHelpContentPanel = ({
+  className,
+  parentItem,
+  selectedKey,
+  onScroll
+}) => {
+  var _a;
+  const { dataSource } = useContext(ProHelpProvide);
+  const { hashId } = useContext(ProProvider);
+  const scrollHeightMap = useRef(/* @__PURE__ */ new Map());
+  const divRef = useRef(null);
+  useEffect(() => {
+    if (!selectedKey || !(parentItem == null ? void 0 : parentItem.infiniteScrollFull))
+      return;
+    const div = scrollHeightMap.current.get(selectedKey);
+    if ((div == null ? void 0 : div.offsetTop) && divRef.current) {
+      if (Math.abs(divRef.current.scrollTop - (div == null ? void 0 : div.offsetTop) + 40) > (div == null ? void 0 : div.clientHeight)) {
+        divRef.current.scrollTop = (div == null ? void 0 : div.offsetTop) - 40;
+      }
+    }
+  }, [selectedKey]);
+  const onScrollEvent = useDebounceFn((e) => __async(void 0, null, function* () {
+    const dom = e == null ? void 0 : e.target;
+    const list = Array.from(scrollHeightMap.current.entries()).find(
+      ([, value]) => {
+        if ((dom == null ? void 0 : dom.scrollTop) < value.offsetTop) {
+          return true;
+        }
+        return false;
+      }
+    );
+    if (!list) {
+      return;
+    }
+    if (list.at(0) !== selectedKey) {
+      onScroll == null ? void 0 : onScroll(list.at(0));
+    }
+  }), 200);
+  useEffect(() => {
+    var _a2;
+    if (!(parentItem == null ? void 0 : parentItem.infiniteScrollFull))
+      return;
+    onScrollEvent.cancel();
+    (_a2 = divRef.current) == null ? void 0 : _a2.addEventListener("scroll", onScrollEvent.run, false);
+    return () => {
+      var _a3;
+      onScrollEvent.cancel();
+      (_a3 = divRef.current) == null ? void 0 : _a3.removeEventListener("scroll", onScrollEvent.run, false);
+    };
+  }, [parentItem == null ? void 0 : parentItem.infiniteScrollFull, selectedKey]);
+  const dataSourceMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    dataSource.forEach((page) => {
+      page.children.forEach((item) => {
+        map.set(item.key || item.title, __spreadProps(__spreadValues({}, item), { parentKey: page.key }));
+      });
+    });
+    return map;
+  }, [dataSource]);
+  const renderItem = (item) => {
+    if (item == null ? void 0 : item.asyncLoad) {
+      return /* @__PURE__ */ React.createElement("div", { className: classNames(className, hashId), id: item.title }, /* @__PURE__ */ React.createElement(
+        AsyncContentPanel,
+        {
+          key: item == null ? void 0 : item.key,
+          item,
+          onInit: (ref) => {
+            if (!scrollHeightMap.current)
+              return;
+            scrollHeightMap.current.set(item.key, ref);
+          }
+        }
+      ));
+    }
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(className, hashId), id: item.title }, /* @__PURE__ */ React.createElement(
+      RenderContentPanel,
+      {
+        onInit: (ref) => {
+          if (!scrollHeightMap.current)
+            return;
+          scrollHeightMap.current.set(item.key, ref);
+        },
+        dataSourceChildren: (item == null ? void 0 : item.children) || []
+      }
+    ));
+  };
+  if (parentItem && parentItem.infiniteScrollFull) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: divRef,
+        className: classNames(`${className}-infinite-scroll`, hashId),
+        style: {
+          overflow: "auto"
+        }
+      },
+      (_a = parentItem.children) == null ? void 0 : _a.map((item) => {
+        return /* @__PURE__ */ React.createElement(React.Fragment, { key: item.key }, renderItem(item));
+      })
+    );
+  }
+  return renderItem(dataSourceMap.get(selectedKey));
+};
+export {
+  ProHelpContentPanel
+};

package/es/layout/components/Help/ProHelpDrawer.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { DrawerProps } from 'antd';
+import type { ProHelpPanelProps } from './ProHelpPanel';
+export type ProHelpDrawerProps = {
+    /**
+     * Ant Design Drawer 组件的 Props，可以传递一些选项，如位置、大小、关闭方式等等。
+     */
+    drawerProps: DrawerProps;
+} & Omit<ProHelpPanelProps, 'onClose'>;
+/**
+ * 渲染一个抽屉，其中显示了一个 ProHelpPanel。
+ * @param drawerProps 要传递给 Drawer 组件的属性。
+ * @param props 要传递给 ProHelpPanel 组件的属性。
+ */
+export declare const ProHelpDrawer: React.FC<ProHelpDrawerProps>;

package/es/layout/components/Help/ProHelpDrawer.js

@@ -0,0 +1,79 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/layout/components/Help/ProHelpDrawer.tsx
+import { Drawer } from "antd";
+import useMergedState from "rc-util/lib/hooks/useMergedState";
+import { ProHelpPanel } from "./ProHelpPanel";
+var ProHelpDrawer = (_a) => {
+  var _b = _a, {
+    drawerProps
+  } = _b, props = __objRest(_b, [
+    "drawerProps"
+  ]);
+  const [drawerOpen, setDrawerOpen] = useMergedState(false, {
+    value: drawerProps.open,
+    onChange: drawerProps.afterOpenChange
+  });
+  return /* @__PURE__ */ React.createElement(
+    Drawer,
+    __spreadProps(__spreadValues({
+      width: 720,
+      closeIcon: null,
+      styles: {
+        header: {
+          display: "none"
+        },
+        body: {
+          padding: 0
+        }
+      },
+      maskClosable: true
+    }, drawerProps), {
+      open: drawerOpen,
+      onClose: () => setDrawerOpen(false),
+      afterOpenChange: (open) => {
+        setDrawerOpen(open);
+      }
+    }),
+    /* @__PURE__ */ React.createElement(
+      ProHelpPanel,
+      __spreadProps(__spreadValues({}, props), {
+        onClose: () => setDrawerOpen(false),
+        variant: "borderless"
+      })
+    )
+  );
+};
+export {
+  ProHelpDrawer
+};

package/es/layout/components/Help/ProHelpModal.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ModalProps } from 'antd';
+import type { ProHelpPanelProps } from './ProHelpPanel';
+export type ProHelpModalProps = {
+    /**
+     * Ant Design Modal 组件的 props，可以传递一些选项，如位置、大小、关闭方式等等。
+     */
+    modalProps?: ModalProps;
+} & Omit<ProHelpPanelProps, 'onClose'>;
+/**
+ * 渲染一个模态对话框，其中显示了一个 ProHelpPanel。
+ * @param modalProps 要传递给 Modal 组件的属性。
+ * @param props 要传递给 ProHelpPanel 组件的属性。
+ */
+export declare const ProHelpModal: React.FC<ProHelpModalProps>;

package/es/layout/components/Help/ProHelpModal.js

@@ -0,0 +1,77 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/layout/components/Help/ProHelpModal.tsx
+import { Modal } from "antd";
+import useMergedState from "rc-util/lib/hooks/useMergedState";
+import { ProHelpPanel } from "./ProHelpPanel";
+var ProHelpModal = (_a) => {
+  var _b = _a, {
+    modalProps
+  } = _b, props = __objRest(_b, [
+    "modalProps"
+  ]);
+  const [modalOpen, setModalOpen] = useMergedState(false, {
+    value: modalProps == null ? void 0 : modalProps.open,
+    onChange: modalProps == null ? void 0 : modalProps.afterClose
+  });
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    __spreadValues({
+      onCancel: () => {
+        setModalOpen(false);
+      },
+      styles: {
+        body: {
+          margin: -24
+        }
+      },
+      centered: true,
+      closable: false,
+      footer: null,
+      width: 720,
+      open: modalOpen,
+      maskClosable: true
+    }, modalProps),
+    /* @__PURE__ */ React.createElement(
+      ProHelpPanel,
+      __spreadProps(__spreadValues({
+        height: 648
+      }, props), {
+        onClose: () => setModalOpen(false)
+      })
+    )
+  );
+};
+export {
+  ProHelpModal
+};

package/es/layout/components/Help/ProHelpPanel.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+export declare const SelectKeyProvide: React.Context<{
+    selectedKey: string | undefined;
+    setSelectedKey: (key: string | undefined) => void;
+}>;
+export type ProHelpPanelProps = {
+    /**
+     * 帮助面板的标题
+     */
+    title?: string;
+    /**
+     * 帮助面板首次打开时的默认选中文档的键名
+     */
+    defaultSelectedKey?: string;
+    /**
+     * 当前选中的帮助文档的键名。如果提供了这个 prop，那么该组件将是一个受控组件，其状态将由父组件管理。如果未提供，那么该组件将是一个非受控组件，其状态将在组件内部管理。
+     */
+    selectedKey?: string;
+    /**
+     * 当选中的文档键名发生变化时调用的回调函数。新的键名将作为参数传递给该函数。
+     */
+    onSelectedKeyChange?: (key: string | undefined) => void;
+    /**
+     *控制左侧面板是否能够打开
+     */
+    showLeftPanel?: boolean;
+    /**
+     * 当左侧面板打开状态发生变化时调用的回调函数。新的打开状态将作为参数传递给该函数。
+     */
+    onShowLeftPanelChange?: (show: boolean) => void;
+    /**
+     * 卡片的变体类型
+     */
+    variant?: 'outlined' | 'borderless';
+    /**
+     * 当帮助面板关闭时调用的回调函数。
+     */
+    onClose?: () => void;
+    /**
+     * 帮助面板的高度，可以是数字或字符串类型。
+     */
+    height?: number | string;
+    /**
+     * 帮助面板的页脚
+     */
+    footer?: React.ReactNode;
+    /**
+     * 在一页内加载所有的 children 内容
+     */
+    infiniteScrollFull?: boolean;
+    /**
+     * 自定义渲染 extra 部分的内容
+     *
+     * @param {React.ReactNode} collapsePannelAction - 折叠收起的左侧按钮
+     * @param {React.ReactNode} helpSelectAction - 默认的帮助筛选按钮
+     * @param {React.ReactNode} closeAction - 关闭操作按钮
+     * @returns {React.ReactNode} - 返回自定义渲染的 extra 操作按钮
+     *
+     */
+    extraRender?: (collapsePannelAction: React.ReactNode, helpSelectAction: React.ReactNode, closeAction: React.ReactNode) => React.ReactNode;
+};
+/**
+ * ProHelpPanel 组件是一个帮助中心面板组件，具有可折叠的左侧菜单和右侧帮助内容区域。
+ * 左侧菜单显示了帮助文档的目录结构，右侧帮助内容区域显示了用户选中的帮助文档内容。
+ * 在左侧菜单中，用户可以通过点击目录来选择并显示相应的文档内容。
+ * @param param0
+ * @returns
+ */
+export declare const ProHelpPanel: React.FC<ProHelpPanelProps>;

package/es/layout/components/Help/ProHelpPanel.js

@@ -0,0 +1,257 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/layout/components/Help/ProHelpPanel.tsx
+import { CloseOutlined, ProfileOutlined } from "@ant-design/icons";
+import { Card, ConfigProvider, Menu } from "antd";
+import useMergedState from "rc-util/lib/hooks/useMergedState";
+import React, { useContext, useMemo, useState } from "react";
+import { ProProvider, isNeedOpenHash } from "../../../provider";
+import { coverToNewToken } from "../../../utils";
+import { ProHelpProvide } from "./HelpProvide";
+import { ProHelpContentPanel } from "./ProHelpContentPanel";
+import { ProHelpSelect } from "./Search";
+import { useStyle } from "./style";
+var SelectKeyProvide = React.createContext({
+  selectedKey: void 0,
+  setSelectedKey: () => {
+  }
+});
+var ProHelpPanel = (_a) => {
+  var _b = _a, {
+    title = "帮助中心",
+    variant = "outlined",
+    onClose,
+    footer,
+    height,
+    extraRender
+  } = _b, props = __objRest(_b, [
+    "title",
+    "variant",
+    "onClose",
+    "footer",
+    "height",
+    "extraRender"
+  ]);
+  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const className = getPrefixCls("pro-help");
+  const { wrapSSR, hashId } = useStyle(className);
+  const { dataSource } = useContext(ProHelpProvide);
+  const [selectedKey, setSelectedKey] = useMergedState(
+    void 0,
+    {
+      defaultValue: props.defaultSelectedKey,
+      value: props.selectedKey,
+      onChange: props.onSelectedKeyChange
+    }
+  );
+  const [openKey, setOpenKey] = useState("");
+  const { token } = useContext(ProProvider);
+  const [showLeftPanel, setShowLeftPanel] = useMergedState(true, {
+    value: props.showLeftPanel,
+    onChange: props.onShowLeftPanelChange
+  });
+  const dataSourceKeyMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    dataSource.forEach((page) => {
+      var _a3;
+      map.set(page.key, page);
+      (_a3 = page.children) == null ? void 0 : _a3.forEach((item) => {
+        map.set(item.key || item.title, __spreadValues({
+          parentKey: page.key
+        }, item));
+      });
+    });
+    return map;
+  }, [dataSource]);
+  const parentKey = useMemo(
+    () => {
+      var _a3;
+      return (_a3 = dataSourceKeyMap.get(selectedKey)) == null ? void 0 : _a3.parentKey;
+    },
+    [dataSourceKeyMap, selectedKey]
+  );
+  const defaultExtraActions = {
+    collapsePanelAction: /* @__PURE__ */ React.createElement("div", { className: `${className}-actions-item ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(
+      ProfileOutlined,
+      {
+        title: "collapse panel",
+        onClick: () => {
+          setShowLeftPanel(!showLeftPanel);
+        }
+      }
+    )),
+    helpSelectAction: /* @__PURE__ */ React.createElement(
+      ProHelpSelect,
+      {
+        iconClassName: `${className}-actions-item`,
+        className: `${hashId} ${className}-actions-input`,
+        value: selectedKey,
+        onChange: (value, item) => {
+          setSelectedKey(value);
+          setOpenKey(item == null ? void 0 : item.dataItemKey);
+        }
+      }
+    ),
+    closeAction: /* @__PURE__ */ React.createElement("div", { className: `${className}-actions-item ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(
+      CloseOutlined,
+      {
+        title: "close panel",
+        onClick: () => {
+          onClose == null ? void 0 : onClose();
+        }
+      }
+    ))
+  };
+  const extraDomList = () => {
+    return /* @__PURE__ */ React.createElement("div", { className: `${className}-actions ${hashId}`.trim() }, extraRender ? extraRender(
+      defaultExtraActions.collapsePanelAction,
+      defaultExtraActions.helpSelectAction,
+      defaultExtraActions.closeAction
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, onClose ? defaultExtraActions.closeAction : null));
+  };
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      SelectKeyProvide.Provider,
+      {
+        value: {
+          selectedKey,
+          setSelectedKey
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Card,
+        {
+          variant,
+          title,
+          styles: {
+            body: {
+              display: "flex",
+              padding: 0,
+              margin: 0,
+              height: "100%",
+              width: "100%"
+            }
+          },
+          size: "small",
+          extra: extraDomList()
+        },
+        showLeftPanel ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${hashId} ${className}-left-panel `,
+            style: {
+              height
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            ConfigProvider,
+            {
+              theme: {
+                hashed: isNeedOpenHash(),
+                token: {
+                  lineHeight: 1.2,
+                  fontSize: 12,
+                  controlHeightLG: 26
+                },
+                components: {
+                  Menu: coverToNewToken({
+                    radiusItem: token.borderRadius,
+                    colorActiveBarWidth: 0,
+                    colorActiveBarBorderSize: 0,
+                    colorItemBgSelected: ((_b2 = (_a2 = token.layout) == null ? void 0 : _a2.sider) == null ? void 0 : _b2.colorBgMenuItemSelected) || "rgba(0, 0, 0, 0.04)",
+                    colorItemBgActive: ((_d = (_c = token.layout) == null ? void 0 : _c.sider) == null ? void 0 : _d.colorBgMenuItemHover) || "rgba(0, 0, 0, 0.04)",
+                    colorItemText: ((_f = (_e = token.layout) == null ? void 0 : _e.sider) == null ? void 0 : _f.colorTextMenu) || "rgba(0, 0, 0, 0.65)",
+                    colorItemTextHover: ((_h = (_g = token.layout) == null ? void 0 : _g.sider) == null ? void 0 : _h.colorTextMenuActive) || "rgba(0, 0, 0, 0.85)",
+                    colorItemTextSelected: ((_j = (_i = token.layout) == null ? void 0 : _i.sider) == null ? void 0 : _j.colorTextMenuSelected) || "rgba(0, 0, 0, 1)",
+                    colorItemBg: "transparent",
+                    colorSubItemBg: "transparent",
+                    popupBg: token == null ? void 0 : token.colorBgElevated,
+                    darkPopupBg: token == null ? void 0 : token.colorBgElevated
+                  })
+                }
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              Menu,
+              {
+                className: `${hashId} ${className}-left-panel-menu`,
+                openKeys: [parentKey, openKey],
+                onOpenChange: (keys) => {
+                  setOpenKey(keys.at(-1) || "");
+                },
+                selectedKeys: selectedKey ? [selectedKey] : [],
+                onSelect: ({ selectedKeys }) => {
+                  setSelectedKey(selectedKeys.at(-1) || "");
+                },
+                mode: "inline",
+                items: dataSource.map((item) => {
+                  return {
+                    key: item.key,
+                    label: item.title,
+                    children: item.children.map((child) => {
+                      return {
+                        key: child.key,
+                        label: child.title
+                      };
+                    })
+                  };
+                })
+              }
+            )
+          )
+        ) : null,
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${hashId} ${className}-content-panel`,
+            style: {
+              height
+            }
+          },
+          selectedKey ? /* @__PURE__ */ React.createElement(
+            ProHelpContentPanel,
+            {
+              parentItem: dataSourceKeyMap.get(parentKey),
+              className: `${className}-content-render`,
+              selectedKey,
+              onScroll: (key) => setSelectedKey(key)
+            }
+          ) : null,
+          footer ? /* @__PURE__ */ React.createElement("div", { className: `${hashId} ${className}-footer` }, footer) : null
+        )
+      )
+    )
+  );
+};
+export {
+  ProHelpPanel,
+  SelectKeyProvide
+};