@ant-design/pro-components 3.1.0-0 → 3.1.1-0

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

@@ -1,8 +1,4 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import { ProProvider } from "../../../provider";
 import { useDebounceFn } from "../../../utils";
@@ -16,24 +12,27 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param ProHelpContentPanelProps
  * @returns
  */
-export var ProHelpContentPanel = function ProHelpContentPanel(_ref) {
-  var className = _ref.className,
-    parentItem = _ref.parentItem,
-    selectedKey = _ref.selectedKey,
-    onScroll = _ref.onScroll;
-  var _useContext = useContext(ProHelpProvide),
-    dataSource = _useContext.dataSource;
-  var _useContext2 = useContext(ProProvider),
-    hashId = _useContext2.hashId;
+export const ProHelpContentPanel = ({
+  className,
+  parentItem,
+  selectedKey,
+  onScroll
+}) => {
+  const {
+    dataSource
+  } = useContext(ProHelpProvide);
+  const {
+    hashId
+  } = useContext(ProProvider);
   // 记录每个面板的滚动高度
-  var scrollHeightMap = useRef(new Map());
-  var divRef = useRef(null);
-  useEffect(function () {
-    if (!selectedKey || !(parentItem !== null && parentItem !== void 0 && parentItem.infiniteScrollFull)) return;
-    var div = scrollHeightMap.current.get(selectedKey);
-    if (div !== null && div !== void 0 && div.offsetTop && divRef.current) {
-      if (Math.abs(divRef.current.scrollTop - (div === null || div === void 0 ? void 0 : div.offsetTop) + 40) > (div === null || div === void 0 ? void 0 : div.clientHeight)) {
-        divRef.current.scrollTop = (div === null || div === void 0 ? void 0 : div.offsetTop) - 40;
+  const scrollHeightMap = useRef(new Map());
+  const divRef = useRef(null);
+  useEffect(() => {
+    if (!selectedKey || !parentItem?.infiniteScrollFull) return;
+    const div = scrollHeightMap.current.get(selectedKey);
+    if (div?.offsetTop && divRef.current) {
+      if (Math.abs(divRef.current.scrollTop - div?.offsetTop + 40) > div?.clientHeight) {
+        divRef.current.scrollTop = div?.offsetTop - 40;
       }
     }
   }, [selectedKey]);
@@ -41,42 +40,26 @@ export var ProHelpContentPanel = function ProHelpContentPanel(_ref) {
   /**
    * debounce（防抖）处理滚动事件，并根据滚动位置来实现找到当前列表的 key
    */
-  var onScrollEvent = useDebounceFn( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
-      var dom, list;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            dom = e === null || e === void 0 ? void 0 : e.target; // 根据滚动位置来找到当前列表的 key
-            list = Array.from(scrollHeightMap.current.entries()).find(function (_ref3) {
-              var _ref4 = _slicedToArray(_ref3, 2),
-                value = _ref4[1];
-              if ((dom === null || dom === void 0 ? void 0 : dom.scrollTop) < value.offsetTop) {
-                return true;
-              }
-              return false;
-            });
-            if (list) {
-              _context.next = 4;
-              break;
-            }
-            return _context.abrupt("return");
-          case 4:
-            // 如果获取的 key 和当前 key 不同丢弃掉
-            if (list.at(0) !== selectedKey) {
-              // 如果不同，则触发 onScroll 事件
-              onScroll === null || onScroll === void 0 || onScroll(list.at(0));
-            }
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), 200);
+  const onScrollEvent = useDebounceFn(async e => {
+    const dom = e?.target;
+
+    // 根据滚动位置来找到当前列表的 key
+    const list = Array.from(scrollHeightMap.current.entries()).find(([, value]) => {
+      if (dom?.scrollTop < value.offsetTop) {
+        return true;
+      }
+      return false;
+    });
+    if (!list) {
+      return;
+    }
+
+    // 如果获取的 key 和当前 key 不同丢弃掉
+    if (list.at(0) !== selectedKey) {
+      // 如果不同，则触发 onScroll 事件
+      onScroll?.(list.at(0));
+    }
+  }, 200);
 
   /**
    * 当 parentItem 组件中的 infiniteScrollFull 属性变化时
@@ -84,67 +67,65 @@ export var ProHelpContentPanel = function ProHelpContentPanel(_ref) {
    * 如果为假值，则停止监听滚动事件并取消防抖处理。
    * 在监听滚动事件时，可以实现分页（瀑布流）效果。同时，该代码还会根据 selectedKey 的变化来触发跳转
    */
-  useEffect(function () {
-    var _divRef$current;
-    if (!(parentItem !== null && parentItem !== void 0 && parentItem.infiniteScrollFull)) return;
+  useEffect(() => {
+    if (!parentItem?.infiniteScrollFull) return;
     onScrollEvent.cancel();
-    (_divRef$current = divRef.current) === null || _divRef$current === void 0 || _divRef$current.addEventListener('scroll', onScrollEvent.run, false);
-    return function () {
-      var _divRef$current2;
+    divRef.current?.addEventListener('scroll', onScrollEvent.run, false);
+    return () => {
       onScrollEvent.cancel();
-      (_divRef$current2 = divRef.current) === null || _divRef$current2 === void 0 || _divRef$current2.removeEventListener('scroll', onScrollEvent.run, false);
+      divRef.current?.removeEventListener('scroll', onScrollEvent.run, false);
     };
-  }, [parentItem === null || parentItem === void 0 ? void 0 : parentItem.infiniteScrollFull, selectedKey]);
+  }, [parentItem?.infiniteScrollFull, selectedKey]);
 
   /**
    * 生成一个  Map  能根据 key 找到所有的 index
    */
-  var dataSourceMap = useMemo(function () {
-    var map = new Map();
-    dataSource.forEach(function (page) {
-      page.children.forEach(function (item) {
-        map.set(item.key || item.title, _objectSpread(_objectSpread({}, item), {}, {
+  const dataSourceMap = useMemo(() => {
+    const map = new Map();
+    dataSource.forEach(page => {
+      page.children.forEach(item => {
+        map.set(item.key || item.title, {
+          ...item,
           parentKey: page.key
-        }));
+        });
       });
     });
     return map;
   }, [dataSource]);
-  var renderItem = function renderItem(item) {
-    if (item !== null && item !== void 0 && item.asyncLoad) {
+  const renderItem = item => {
+    if (item?.asyncLoad) {
       return /*#__PURE__*/_jsx("div", {
-        className: classNames(className, hashId),
+        className: clsx(className, hashId),
         id: item.title,
         children: /*#__PURE__*/_jsx(AsyncContentPanel, {
           item: item,
-          onInit: function onInit(ref) {
+          onInit: ref => {
             if (!scrollHeightMap.current) return;
             scrollHeightMap.current.set(item.key, ref);
           }
-        }, item === null || item === void 0 ? void 0 : item.key)
+        }, item?.key)
       });
     }
     return /*#__PURE__*/_jsx("div", {
-      className: classNames(className, hashId),
+      className: clsx(className, hashId),
       id: item.title,
       children: /*#__PURE__*/_jsx(RenderContentPanel, {
-        onInit: function onInit(ref) {
+        onInit: ref => {
           if (!scrollHeightMap.current) return;
           scrollHeightMap.current.set(item.key, ref);
         },
-        dataSourceChildren: (item === null || item === void 0 ? void 0 : item.children) || []
+        dataSourceChildren: item?.children || []
       })
     });
   };
   if (parentItem && parentItem.infiniteScrollFull) {
-    var _parentItem$children;
     return /*#__PURE__*/_jsx("div", {
       ref: divRef,
-      className: classNames("".concat(className, "-infinite-scroll"), hashId),
+      className: clsx(`${className}-infinite-scroll`, hashId),
       style: {
         overflow: 'auto'
       },
-      children: (_parentItem$children = parentItem.children) === null || _parentItem$children === void 0 ? void 0 : _parentItem$children.map(function (item) {
+      children: parentItem.children?.map(item => {
         return /*#__PURE__*/_jsx(React.Fragment, {
           children: renderItem(item)
         }, item.key);

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

@@ -1,10 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["drawerProps"];
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import { Drawer } from 'antd';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { ProHelpPanel } from "./ProHelpPanel";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -12,18 +8,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param drawerProps 要传递给 Drawer 组件的属性。
  * @param props 要传递给 ProHelpPanel 组件的属性。
  */
-export var ProHelpDrawer = function ProHelpDrawer(_ref) {
-  var _drawerProps$size;
-  var drawerProps = _ref.drawerProps,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useMergedState = useMergedState(false, {
-      value: drawerProps.open,
-      onChange: drawerProps.afterOpenChange
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    drawerOpen = _useMergedState2[0],
-    setDrawerOpen = _useMergedState2[1];
-  return /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
+export const ProHelpDrawer = ({
+  drawerProps,
+  ...props
+}) => {
+  const [drawerOpen, setDrawerOpenInner] = useControlledState(false, drawerProps.open);
+  const setDrawerOpen = useCallback(updater => {
+    setDrawerOpenInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      drawerProps.afterOpenChange?.(next);
+      return next;
+    });
+  }, [drawerProps.afterOpenChange]);
+  return /*#__PURE__*/_jsx(Drawer, {
     closeIcon: null,
     styles: {
       header: {
@@ -33,21 +30,18 @@ export var ProHelpDrawer = function ProHelpDrawer(_ref) {
         padding: 0
       }
     },
-    maskClosable: true
-  }, drawerProps), {}, {
-    size: (_drawerProps$size = drawerProps.size) !== null && _drawerProps$size !== void 0 ? _drawerProps$size : 720,
+    maskClosable: true,
+    ...drawerProps,
+    size: drawerProps.size ?? 720,
     open: drawerOpen,
-    onClose: function onClose() {
-      return setDrawerOpen(false);
-    },
-    afterOpenChange: function afterOpenChange(open) {
+    onClose: () => setDrawerOpen(false),
+    afterOpenChange: open => {
       setDrawerOpen(open);
     },
-    children: /*#__PURE__*/_jsx(ProHelpPanel, _objectSpread(_objectSpread({}, props), {}, {
-      onClose: function onClose() {
-        return setDrawerOpen(false);
-      },
+    children: /*#__PURE__*/_jsx(ProHelpPanel, {
+      ...props,
+      onClose: () => setDrawerOpen(false),
       variant: "borderless"
-    }))
-  }));
+    })
+  });
 };

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { ModalProps } from 'antd';
+import React from 'react';
 import type { ProHelpPanelProps } from './ProHelpPanel';
 export type ProHelpModalProps = {
     /**

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

@@ -1,9 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["modalProps"];
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import { Modal } from 'antd';
+import React, { useCallback } from 'react';
 import { ProHelpPanel } from "./ProHelpPanel";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -11,18 +8,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param modalProps 要传递给 Modal 组件的属性。
  * @param props 要传递给 ProHelpPanel 组件的属性。
  */
-export var ProHelpModal = function ProHelpModal(_ref) {
-  var modalProps = _ref.modalProps,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useMergedState = useMergedState(false, {
-      value: modalProps === null || modalProps === void 0 ? void 0 : modalProps.open,
-      onChange: modalProps === null || modalProps === void 0 ? void 0 : modalProps.afterClose
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    modalOpen = _useMergedState2[0],
-    setModalOpen = _useMergedState2[1];
-  return /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
-    onCancel: function onCancel() {
+export const ProHelpModal = ({
+  modalProps,
+  ...props
+}) => {
+  const [modalOpen, setModalOpenInner] = useControlledState(false, modalProps?.open);
+  const setModalOpen = useCallback(updater => {
+    setModalOpenInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      modalProps?.afterClose?.();
+      return next;
+    });
+  }, [modalProps?.afterClose]);
+  return /*#__PURE__*/_jsx(Modal, {
+    onCancel: () => {
       setModalOpen(false);
     },
     styles: {
@@ -35,14 +34,12 @@ export var ProHelpModal = function ProHelpModal(_ref) {
     footer: null,
     width: 720,
     open: modalOpen,
-    maskClosable: true
-  }, modalProps), {}, {
-    children: /*#__PURE__*/_jsx(ProHelpPanel, _objectSpread(_objectSpread({
-      height: 648
-    }, props), {}, {
-      onClose: function onClose() {
-        return setModalOpen(false);
-      }
-    }))
-  }));
+    maskClosable: true,
+    ...modalProps,
+    children: /*#__PURE__*/_jsx(ProHelpPanel, {
+      height: 648,
+      ...props,
+      onClose: () => setModalOpen(false)
+    })
+  });
 };

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

@@ -1,11 +1,7 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["title", "variant", "onClose", "footer", "height", "extraRender"];
 import { CloseOutlined, ProfileOutlined } from '@ant-design/icons';
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import { Card, ConfigProvider, Menu } from 'antd';
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { ProProvider, isNeedOpenHash } from "../../../provider";
 import { ProHelpProvide } from "./HelpProvide";
 import { ProHelpContentPanel } from "./ProHelpContentPanel";
@@ -14,9 +10,9 @@ import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var SelectKeyProvide = /*#__PURE__*/React.createContext({
+export const SelectKeyProvide = /*#__PURE__*/React.createContext({
   selectedKey: undefined,
-  setSelectedKey: function setSelectedKey() {}
+  setSelectedKey: () => {}
 });
 /**
  * ProHelpPanel 组件是一个帮助中心面板组件，具有可折叠的左侧菜单和右侧帮助内容区域。
@@ -25,95 +21,92 @@ export var SelectKeyProvide = /*#__PURE__*/React.createContext({
  * @param param0
  * @returns
  */
-export var ProHelpPanel = function ProHelpPanel(_ref) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5;
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? '帮助中心' : _ref$title,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
-    onClose = _ref.onClose,
-    footer = _ref.footer,
-    height = _ref.height,
-    extraRender = _ref.extraRender,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var className = getPrefixCls('pro-help');
-  var _useStyle = useStyle(className),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var _useContext2 = useContext(ProHelpProvide),
-    dataSource = _useContext2.dataSource;
-  var _useMergedState = useMergedState(undefined, {
-      defaultValue: props.defaultSelectedKey,
-      value: props.selectedKey,
-      onChange: props.onSelectedKeyChange
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    selectedKey = _useMergedState2[0],
-    setSelectedKey = _useMergedState2[1];
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    openKey = _useState2[0],
-    setOpenKey = _useState2[1];
-  var _useContext3 = useContext(ProProvider),
-    token = _useContext3.token;
-  var _useMergedState3 = useMergedState(true, {
-      value: props.showLeftPanel,
-      onChange: props.onShowLeftPanelChange
-    }),
-    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
-    showLeftPanel = _useMergedState4[0],
-    setShowLeftPanel = _useMergedState4[1];
-  var dataSourceKeyMap = useMemo(function () {
-    var map = new Map();
-    dataSource.forEach(function (page) {
-      var _page$children;
+export const ProHelpPanel = ({
+  title = '帮助中心',
+  variant = 'outlined',
+  onClose,
+  footer,
+  height,
+  extraRender,
+  ...props
+}) => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const className = getPrefixCls('pro-help');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(className);
+  const {
+    dataSource
+  } = useContext(ProHelpProvide);
+  const [selectedKey, setSelectedKeyInner] = useControlledState(props.defaultSelectedKey ?? undefined, props.selectedKey);
+  const setSelectedKey = useCallback(updater => {
+    setSelectedKeyInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onSelectedKeyChange?.(next);
+      return next;
+    });
+  }, [props.onSelectedKeyChange]);
+  const [openKey, setOpenKey] = useState('');
+  const {
+    token
+  } = useContext(ProProvider);
+  const [showLeftPanel, setShowLeftPanelInner] = useControlledState(true, props.showLeftPanel);
+  const setShowLeftPanel = useCallback(updater => {
+    setShowLeftPanelInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onShowLeftPanelChange?.(next);
+      return next;
+    });
+  }, [props.onShowLeftPanelChange]);
+  const dataSourceKeyMap = useMemo(() => {
+    const map = new Map();
+    dataSource.forEach(page => {
       map.set(page.key, page);
-      (_page$children = page.children) === null || _page$children === void 0 || _page$children.forEach(function (item) {
-        map.set(item.key || item.title, _objectSpread({
-          parentKey: page.key
-        }, item));
+      page.children?.forEach(item => {
+        map.set(item.key || item.title, {
+          parentKey: page.key,
+          ...item
+        });
       });
     });
     return map;
   }, [dataSource]);
-  var parentKey = useMemo(function () {
-    var _dataSourceKeyMap$get;
-    return (_dataSourceKeyMap$get = dataSourceKeyMap.get(selectedKey)) === null || _dataSourceKeyMap$get === void 0 ? void 0 : _dataSourceKeyMap$get.parentKey;
-  }, [dataSourceKeyMap, selectedKey]);
-  var defaultExtraActions = {
+  const parentKey = useMemo(() => dataSourceKeyMap.get(selectedKey)?.parentKey, [dataSourceKeyMap, selectedKey]);
+  const defaultExtraActions = {
     collapsePanelAction: /*#__PURE__*/_jsx("div", {
-      className: "".concat(className, "-actions-item ").concat(hashId).trim(),
+      className: `${className}-actions-item ${hashId}`.trim(),
       children: /*#__PURE__*/_jsx(ProfileOutlined, {
         title: "collapse panel",
-        onClick: function onClick() {
+        onClick: () => {
           setShowLeftPanel(!showLeftPanel);
         }
       })
     }),
     helpSelectAction: /*#__PURE__*/_jsx(ProHelpSelect, {
-      iconClassName: "".concat(className, "-actions-item"),
-      className: "".concat(hashId, " ").concat(className, "-actions-input"),
+      iconClassName: `${className}-actions-item`,
+      className: `${hashId} ${className}-actions-input`,
       value: selectedKey,
-      onChange: function onChange(value, item) {
+      onChange: (value, item) => {
         setSelectedKey(value);
-        setOpenKey(item === null || item === void 0 ? void 0 : item.dataItemKey);
+        setOpenKey(item?.dataItemKey);
       }
     }),
     closeAction: /*#__PURE__*/_jsx("div", {
-      className: "".concat(className, "-actions-item ").concat(hashId).trim(),
+      className: `${className}-actions-item ${hashId}`.trim(),
       children: /*#__PURE__*/_jsx(CloseOutlined, {
         title: "close panel",
-        onClick: function onClick() {
-          onClose === null || onClose === void 0 || onClose();
+        onClick: () => {
+          onClose?.();
         }
       })
     })
   };
-  var extraDomList = function extraDomList() {
+  const extraDomList = () => {
     return /*#__PURE__*/_jsx("div", {
-      className: "".concat(className, "-actions ").concat(hashId).trim(),
+      className: `${className}-actions ${hashId}`.trim(),
       children: extraRender ? extraRender(defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, defaultExtraActions.closeAction) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, onClose ? defaultExtraActions.closeAction : null]
       })
@@ -139,9 +132,9 @@ export var ProHelpPanel = function ProHelpPanel(_ref) {
       size: "small",
       extra: extraDomList(),
       children: [showLeftPanel ? /*#__PURE__*/_jsx("div", {
-        className: "".concat(hashId, " ").concat(className, "-left-panel "),
+        className: `${hashId} ${className}-left-panel `,
         style: {
-          height: height
+          height
         },
         children: /*#__PURE__*/_jsx(ConfigProvider, {
           theme: {
@@ -156,35 +149,36 @@ export var ProHelpPanel = function ProHelpPanel(_ref) {
                 itemBorderRadius: token.borderRadius,
                 activeBarWidth: 0,
                 activeBarBorderWidth: 0,
-                itemSelectedBg: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorBgMenuItemSelected) || 'rgba(0, 0, 0, 0.04)',
-                itemActiveBg: ((_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorBgMenuItemHover) || 'rgba(0, 0, 0, 0.04)',
-                itemColor: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorTextMenu) || 'rgba(0, 0, 0, 0.65)',
-                itemHoverColor: ((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.sider) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextMenuActive) || 'rgba(0, 0, 0, 0.85)',
-                itemSelectedColor: ((_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.sider) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorTextMenuSelected) || 'rgba(0, 0, 0, 1)',
+                itemSelectedBg: token.layout?.sider?.colorBgMenuItemSelected || 'rgba(0, 0, 0, 0.04)',
+                itemActiveBg: token.layout?.sider?.colorBgMenuItemHover || 'rgba(0, 0, 0, 0.04)',
+                itemColor: token.layout?.sider?.colorTextMenu || 'rgba(0, 0, 0, 0.65)',
+                itemHoverColor: token.layout?.sider?.colorTextMenuActive || 'rgba(0, 0, 0, 0.85)',
+                itemSelectedColor: token.layout?.sider?.colorTextMenuSelected || 'rgba(0, 0, 0, 1)',
                 itemBg: 'transparent',
                 subMenuItemBg: 'transparent',
-                popupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated,
-                darkPopupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated
+                popupBg: token?.colorBgElevated,
+                darkPopupBg: token?.colorBgElevated
               }
             }
           },
           children: /*#__PURE__*/_jsx(Menu, {
-            className: "".concat(hashId, " ").concat(className, "-left-panel-menu"),
+            className: `${hashId} ${className}-left-panel-menu`,
             openKeys: [parentKey, openKey],
-            onOpenChange: function onOpenChange(keys) {
+            onOpenChange: keys => {
               setOpenKey(keys.at(-1) || '');
             },
             selectedKeys: selectedKey ? [selectedKey] : [],
-            onSelect: function onSelect(_ref2) {
-              var selectedKeys = _ref2.selectedKeys;
+            onSelect: ({
+              selectedKeys
+            }) => {
               setSelectedKey(selectedKeys.at(-1) || '');
             },
             mode: "inline",
-            items: dataSource.map(function (item) {
+            items: dataSource.map(item => {
               return {
                 key: item.key,
                 label: item.title,
-                children: item.children.map(function (child) {
+                children: item.children.map(child => {
                   return {
                     key: child.key,
                     label: child.title
@@ -195,19 +189,17 @@ export var ProHelpPanel = function ProHelpPanel(_ref) {
           })
         })
       }) : null, /*#__PURE__*/_jsxs("div", {
-        className: "".concat(hashId, " ").concat(className, "-content-panel"),
+        className: `${hashId} ${className}-content-panel`,
         style: {
-          height: height
+          height
         },
         children: [selectedKey ? /*#__PURE__*/_jsx(ProHelpContentPanel, {
           parentItem: dataSourceKeyMap.get(parentKey),
-          className: "".concat(className, "-content-render"),
+          className: `${className}-content-render`,
           selectedKey: selectedKey,
-          onScroll: function onScroll(key) {
-            return setSelectedKey(key);
-          }
+          onScroll: key => setSelectedKey(key)
         }) : null, footer ? /*#__PURE__*/_jsx("div", {
-          className: "".concat(hashId, " ").concat(className, "-footer"),
+          className: `${hashId} ${className}-footer`,
           children: footer
         }) : null]
       })]