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

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

@@ -0,0 +1,32 @@
+import type { PopoverProps } from 'antd';
+import React from 'react';
+export type ProHelpPopoverProps = Omit<PopoverProps, 'content'> & {
+    /**
+     * 悬浮提示文字的 CSS 类名
+     */
+    textClassName?: string;
+    /**
+     * Popover 内容的 content 的 CSS 类名
+     */
+    popoverContextClassName?: string;
+    /**
+     * 悬浮提示文字的 CSS 样式对象
+     */
+    textStyle?: React.CSSProperties;
+    /**
+     * 当前选中的帮助文档的 key 值
+     */
+    selectedKey: string;
+    /**
+     * 可选的悬浮提示 Popover 组件的 Props，用于自定义悬浮提示的样式和行为。
+     * 该属性可以传递 Ant Design Popover 组件的 props，如位置、大小、触发方式等等
+     * @see 注意，content 属性已经被从 PopoverProps 中删除，因为这个属性由 ProHelpPopover 内部控制。
+     */
+    popoverProps?: PopoverProps;
+};
+/**
+ * 渲染一个弹出式提示框，其中显示了一个ProHelpContentPanel，展示帮助文案的详情
+ * @param popoverProps 要传递给 Drawer 组件的属性。
+ * @param props 要传递给 ProHelpPanel 组件的属性。
+ */
+export declare const ProHelpPopover: React.FC<ProHelpPopoverProps>;

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

@@ -0,0 +1,67 @@
+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;
+};
+
+// src/layout/components/Help/ProHelpPopover.tsx
+import { ConfigProvider, Popover } from "antd";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import { ProProvider } from "../../../provider";
+import { ProHelpContentPanel } from "./ProHelpContentPanel";
+import { useStyle } from "./style";
+var ProHelpPopover = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const className = getPrefixCls("pro-help");
+  const { hashId } = useContext(ProProvider);
+  const { wrapSSR } = useStyle(className);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      Popover,
+      __spreadValues({
+        styles: {
+          body: {
+            padding: 0
+          }
+        },
+        content: /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(
+              `${className}-popover-content`,
+              hashId,
+              props.popoverContextClassName
+            )
+          },
+          /* @__PURE__ */ React.createElement(ProHelpContentPanel, { selectedKey: props.selectedKey })
+        )
+      }, props.popoverProps),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: classNames(
+            `${className}-popover-text`,
+            hashId,
+            props.textClassName
+          )
+        },
+        props.children
+      )
+    )
+  );
+};
+export {
+  ProHelpPopover
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ProHelpDataSourceChildren } from './HelpProvide';
+export declare const RenderContentPanel: React.FC<{
+    dataSourceChildren: ProHelpDataSourceChildren<any>[];
+    onInit?: (ref: HTMLDivElement) => void;
+}>;

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

@@ -0,0 +1,124 @@
+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;
+};
+
+// src/layout/components/Help/RenderContentPanel.tsx
+import { Image, Typography } from "antd";
+import React, { useContext, useEffect, useRef } from "react";
+import { ProHelpProvide } from "./HelpProvide";
+import { SelectKeyProvide } from "./ProHelpPanel";
+var HTMLRender = (props) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current)
+      ref.current.innerHTML = props.children;
+  }, [props.children]);
+  return /* @__PURE__ */ React.createElement("div", { ref, className: props.className || "inner-html" });
+};
+var NavigationSwitch = (props) => {
+  const context = useContext(SelectKeyProvide);
+  return /* @__PURE__ */ React.createElement(Typography.Text, null, /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      "data-testid": "navigation-switch",
+      onClick: () => {
+        context.setSelectedKey(props.selectKey);
+      }
+    },
+    props.children
+  ));
+};
+var RenderContentPanel = ({ dataSourceChildren, onInit }) => {
+  const { valueTypeMap } = useContext(ProHelpProvide);
+  const divRef = useRef(null);
+  useEffect(() => {
+    onInit == null ? void 0 : onInit(divRef.current);
+  }, [dataSourceChildren]);
+  const itemRender = (item, index) => {
+    var _a;
+    if (valueTypeMap.has(item.valueType)) {
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, (_a = valueTypeMap.get(item.valueType)) == null ? void 0 : _a(item, index));
+    }
+    if (item.valueType === "html") {
+      return /* @__PURE__ */ React.createElement(
+        HTMLRender,
+        __spreadValues({
+          key: index
+        }, item.children)
+      );
+    }
+    if (item.valueType === "h1") {
+      return /* @__PURE__ */ React.createElement(
+        Typography.Title,
+        {
+          key: index,
+          style: {
+            marginTop: 0
+          },
+          level: 3
+        },
+        item.children
+      );
+    }
+    if (item.valueType === "h2") {
+      return /* @__PURE__ */ React.createElement(
+        Typography.Title,
+        {
+          key: index,
+          style: {
+            marginTop: 20
+          },
+          level: 5
+        },
+        item.children
+      );
+    }
+    if (item.valueType === "image") {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: index,
+          style: {
+            marginBlock: 12
+          }
+        },
+        /* @__PURE__ */ React.createElement(Image, __spreadValues({}, item.children))
+      );
+    }
+    if (item.valueType === "inlineLink") {
+      return /* @__PURE__ */ React.createElement(Typography.Text, { key: index }, /* @__PURE__ */ React.createElement("a", __spreadValues({}, item.children)));
+    }
+    if (item.valueType === "link") {
+      return /* @__PURE__ */ React.createElement("div", { key: index }, /* @__PURE__ */ React.createElement(Typography.Text, { key: index }, /* @__PURE__ */ React.createElement(
+        "a",
+        __spreadValues({}, item.children)
+      )));
+    }
+    if (item.valueType === "navigationSwitch") {
+      return /* @__PURE__ */ React.createElement(
+        NavigationSwitch,
+        __spreadValues({
+          key: index
+        }, item.children)
+      );
+    }
+    return /* @__PURE__ */ React.createElement(Typography.Text, { key: index }, item.children);
+  };
+  return /* @__PURE__ */ React.createElement("div", { ref: divRef }, dataSourceChildren == null ? void 0 : dataSourceChildren.map(itemRender));
+};
+export {
+  RenderContentPanel
+};

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

@@ -0,0 +1,20 @@
+import type { SelectProps } from 'antd';
+import React from 'react';
+/**
+ * 在一段文本中高亮显示指定的关键词，将文本和匹配项分别处理并放入数组中，最终返回包含高亮文本的组件。
+ * 在组件中使用了正则表达式来匹配关键词。
+ * 在渲染文本时，使用了React.createElement来创建元素。
+ */
+export declare const Highlight: React.FC<{
+    /**
+     * 要高亮的文本
+     */
+    label: string;
+    /**
+     * 高亮的关键词数组
+     */
+    words: string[];
+}>;
+export declare const ProHelpSelect: React.FC<Omit<SelectProps, 'onSearch' | 'optionFilterProp' | 'options' | 'filterOption'> & {
+    iconClassName?: string;
+}>;

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

@@ -0,0 +1,198 @@
+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;
+};
+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/Search.tsx
+import { SearchOutlined } from "@ant-design/icons";
+import { ConfigProvider, Select } from "antd";
+import classNames from "classnames";
+import React, { useContext, useState } from "react";
+import { ProProvider, useStyle } from "../../../provider";
+import { useDebounceFn } from "../../../utils";
+import { ProHelpProvide } from "./HelpProvide";
+var Highlight = ({ label, words }) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const lightCls = getPrefixCls("pro-help-search-list-item-content-light");
+  const optionCls = getPrefixCls("pro-help-search-list-item-content");
+  const { wrapSSR } = useStyle("Highlight", (token) => {
+    return {
+      [`.${lightCls}`]: {
+        color: token.colorPrimary
+      },
+      [`.${optionCls}`]: {
+        flex: "auto",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis"
+      }
+    };
+  });
+  if (!words.length || !words[0]) {
+    return wrapSSR(
+      React.createElement(
+        "div",
+        {
+          title: label,
+          className: optionCls
+        },
+        label
+      )
+    );
+  }
+  const matchKeywordsRE = new RegExp(
+    words.map((word) => word.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&")).join("|"),
+    "gi"
+  );
+  let matchText = label;
+  const elements = [];
+  while (matchText.length) {
+    const match = matchKeywordsRE.exec(matchText);
+    if (!match) {
+      elements.push(matchText);
+      break;
+    }
+    const start = match.index;
+    const matchLength = match[0].length + start;
+    elements.push(
+      matchText.slice(0, start),
+      React.createElement(
+        "span",
+        {
+          className: lightCls
+        },
+        matchText.slice(start, matchLength)
+      )
+    );
+    matchText = matchText.slice(matchLength);
+  }
+  return wrapSSR(
+    React.createElement(
+      "div",
+      {
+        title: label,
+        className: optionCls
+      },
+      ...elements
+    )
+  );
+};
+var ProHelpSelect = (_a) => {
+  var _b = _a, { iconClassName } = _b, props = __objRest(_b, ["iconClassName"]);
+  var _a2;
+  const { dataSource } = useContext(ProHelpProvide);
+  const [keyWord, setKeyWork] = useState((_a2 = props.defaultValue) != null ? _a2 : "");
+  const { hashId } = useContext(ProProvider);
+  const debounceSetKeyWork = useDebounceFn((key) => __async(void 0, null, function* () {
+    return setKeyWork(key);
+  }), 20);
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !open ? /* @__PURE__ */ React.createElement("div", { className: classNames(iconClassName, hashId) }, /* @__PURE__ */ React.createElement(
+    SearchOutlined,
+    {
+      title: "search panel",
+      onClick: () => {
+        setOpen(true);
+      }
+    }
+  )) : null, open ? /* @__PURE__ */ React.createElement(
+    Select,
+    __spreadProps(__spreadValues({
+      placeholder: "please input search text",
+      showSearch: true,
+      onBlur: () => {
+        setOpen(false);
+      },
+      size: "small"
+    }, props), {
+      onSearch: (value) => {
+        debounceSetKeyWork.cancel();
+        debounceSetKeyWork.run(value);
+      },
+      filterOption: (input, option) => {
+        var _a3;
+        return ((_a3 = option == null ? void 0 : option.title) != null ? _a3 : "").toLowerCase().includes(input.toLowerCase());
+      },
+      popupMatchSelectWidth: false,
+      options: dataSource.map((item) => {
+        var _a3;
+        return {
+          label: /* @__PURE__ */ React.createElement(
+            Highlight,
+            {
+              label: item.title,
+              words: keyWord ? [keyWord] : []
+            }
+          ),
+          title: item.title,
+          value: item.key,
+          options: (_a3 = item.children) == null ? void 0 : _a3.map((sunItem) => {
+            return {
+              label: /* @__PURE__ */ React.createElement(
+                Highlight,
+                {
+                  label: sunItem.title,
+                  words: keyWord ? [keyWord] : []
+                }
+              ),
+              title: sunItem.title,
+              value: sunItem.key,
+              dataItemKey: item.key
+            };
+          })
+        };
+      })
+    })
+  ) : null);
+};
+export {
+  Highlight,
+  ProHelpSelect
+};

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import type { ProHelpDataSource, ProHelpDataSourceChildren } from './HelpProvide';
+import { ProHelpProvide } from './HelpProvide';
+import { ProHelpSelect } from './Search';
+export * from './ProHelpContentPanel';
+export * from './ProHelpDrawer';
+export * from './ProHelpModal';
+export * from './ProHelpPanel';
+export * from './ProHelpPopover';
+export * from './RenderContentPanel';
+export { ProHelpProvide, ProHelpSelect };
+export type { ProHelpDataSource, ProHelpDataSourceChildren };
+export type ProHelpProps<ValueType> = {
+    /**
+     * 帮助文档的数据源，包含一组帮助文档数据，每个数据包含标题和内容等信息。
+     */
+    dataSource: ProHelpDataSource<ValueType>[];
+    /**
+     * 帮助组件的子组件，用于渲染自定义的帮助内容。
+     * 是一个键值对结构的集合，其中：
+     * 键（key）为字符串类型；
+     * 值（value）为一个函数类型，该函数接受两个参数：一个名为 item 的 ProHelpDataSourceChildren 类型的对象，表示一个 ProHelp 数据源子项的子项；
+     * 一个名为 index 的数字类型参数，表示该子项在父级子项数组中的索引。
+     * 该函数返回一个 ReactNode 类型的元素，用于表示该 ProHelp 数据源子项子项应该渲染的 UI 元素。
+     * 这个 Map 的作用是将 ProHelp 数据源子项子项的 valueType 属性与对应的渲染函数进行映射，从而实现在渲染 ProHelp 数据源时动态地选择渲染方法。
+     * 在实际使用时，我们可以通过判断子项的 valueType 属性，从 valueTypeMap 中取出对应的渲染函数，再将该子项和渲染函数作为参数传入 renderDataSourceItem 函数中即可。
+     */
+    valueTypeMap?: Map<string, (item: ProHelpDataSourceChildren<ValueType>, index: number) => React.ReactNode>;
+    /**
+     * 帮助组件的子组件，用于渲染自定义的帮助内容。
+     */
+    children?: React.ReactNode;
+    /**
+     * 加载数据源的函数,如果把数据源设置为 async load就可以使用这个功能。
+     */
+    onLoadContext?: (key: React.Key, context: ProHelpDataSource<ValueType>['children'][number]) => Promise<ProHelpDataSourceChildren<ValueType>[]>;
+};
+export type ProHelpContentPanelProps = {
+    /**
+     * 控制当前选中的帮助文档
+     */
+    selectedKey: React.Key;
+    className?: string;
+    parentItem?: ProHelpDataSource<any>;
+    onScroll?: (key?: string) => void;
+};
+export declare const ProHelp: <ValueTypeMap = {
+    text: any;
+}>({ dataSource, valueTypeMap, onLoadContext, ...props }: ProHelpProps<ValueTypeMap>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+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/index.tsx
+import React from "react";
+import { ProHelpProvide } from "./HelpProvide";
+import { ProHelpSelect } from "./Search";
+export * from "./ProHelpContentPanel";
+export * from "./ProHelpDrawer";
+export * from "./ProHelpModal";
+export * from "./ProHelpPanel";
+export * from "./ProHelpPopover";
+export * from "./RenderContentPanel";
+var ProHelp = (_a) => {
+  var _b = _a, {
+    dataSource,
+    valueTypeMap = /* @__PURE__ */ new Map(),
+    onLoadContext
+  } = _b, props = __objRest(_b, [
+    "dataSource",
+    "valueTypeMap",
+    "onLoadContext"
+  ]);
+  return /* @__PURE__ */ React.createElement(
+    ProHelpProvide.Provider,
+    {
+      value: { onLoadContext, dataSource, valueTypeMap }
+    },
+    props.children
+  );
+};
+export {
+  ProHelp,
+  ProHelpProvide,
+  ProHelpSelect
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Keyframes } from '@ant-design/cssinjs';
+import type { ProAliasToken } from '../../../provider';
+export interface ProHelpToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare const actionsInputAnimal: Keyframes;
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

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

@@ -0,0 +1,125 @@
+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));
+
+// src/layout/components/Help/style.ts
+import { Keyframes } from "@ant-design/cssinjs";
+import { useStyle as useAntdStyle } from "../../../provider";
+var actionsInputAnimal = new Keyframes("actionsInputAnimal", {
+  "0%": { width: "0px" },
+  "30%": { width: "20px" },
+  "100%": { width: "120px" }
+});
+var genProHelpStyle = (token) => {
+  return {
+    [`${token.componentCls}-popover-text`]: {
+      color: token.colorPrimary,
+      cursor: "pointer",
+      boxSizing: "border-box"
+    },
+    [`${token.componentCls}-popover-content`]: {
+      maxWidth: 300,
+      height: "600px",
+      maxHeight: "calc(100vh - 200px)",
+      overflow: "auto",
+      paddingInline: 20,
+      paddingBlockStart: 24,
+      paddingBlockEnd: 32,
+      boxSizing: "border-box"
+    },
+    [`${token.componentCls}-left-panel`]: {
+      overflow: "auto",
+      boxSizing: "border-box",
+      borderInlineEnd: `${token == null ? void 0 : token.lineWidth}px solid ${token == null ? void 0 : token.colorBorderSecondary}`,
+      minHeight: "648px",
+      minWidth: 190,
+      maxWidth: 190,
+      "&-menu": {
+        width: 190,
+        boxSizing: "border-box",
+        minWidth: 190,
+        height: "calc(100% - 40px)",
+        marginBlock: 20
+      }
+    },
+    [`${token.componentCls}-content-panel`]: {
+      minWidth: "200px",
+      overflow: "auto",
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      boxSizing: "border-box",
+      minHeight: "648px",
+      img: {
+        width: "100%"
+      }
+    },
+    [`${token.componentCls}-content-render`]: {
+      paddingBlock: 20,
+      paddingInline: 24,
+      flex: 1
+    },
+    [`${token.componentCls}-content-footer`]: {
+      padding: 8
+    },
+    [`${token.componentCls}-actions`]: {
+      display: "flex",
+      boxSizing: "border-box",
+      gap: token.marginSM,
+      "&-item": {
+        display: "flex",
+        boxSizing: "border-box",
+        alignItems: "center",
+        justifyItems: "center",
+        padding: 4,
+        height: 24,
+        minWidth: 24,
+        cursor: "pointer",
+        borderRadius: token.borderRadius,
+        "&:hover": {
+          backgroundColor: token.colorBgTextHover
+        }
+      },
+      "&-input": {
+        margin: 0,
+        maxWidth: 120,
+        padding: 0,
+        width: "120px",
+        boxSizing: "border-box",
+        borderRadius: token.borderRadius,
+        backgroundColor: token.colorBgTextHover,
+        animationName: actionsInputAnimal,
+        animationDuration: "0.1s",
+        animationTimingFunction: "linear"
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("ProHelp", (token) => {
+    const ProLayoutHeaderToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genProHelpStyle(ProLayoutHeaderToken)];
+  });
+}
+export {
+  actionsInputAnimal,
+  useStyle
+};