@hsu-react/ui 1.0.0 → 2.0.1

package/lib/layout/Menu/index.js

@@ -0,0 +1,158 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouter = require("react-router");
+var _antd = require("antd");
+var _lodash = require("lodash");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _semantic = require("../../utils/semantic");
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _formatMenu = require("./_utils/formatMenu");
+var _setActiveIcon = require("./_utils/setActiveIcon");
+var _useMenuPath = require("./_hooks/useMenuPath");
+var _SecondaryHeader = _interopRequireDefault(require("./_components/SecondaryHeader"));
+var _useOnlyLvOneMenu = require("./_hooks/useOnlyLvOneMenu");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 次级菜单根：进入它的子树后，整个侧栏换成那些子页。
+ * 由菜单表的 `cat=1` 显式标记，不靠前端推断。
+ */
+const isSecondaryRoot = route => !!route.path && !!route.children?.length && route.meta?.secondary === true;
+
+/** 把菜单项 key 里的路由参数按当前地址回填：/order/:id/detail → /order/1024/detail */
+const fillParams = (key, params) => key.replace(/:([^/]+)/g, (seg, name) => params[name] ?? seg);
+const Menu = props => {
+  const {
+    router,
+    collapsed = false,
+    className,
+    theme = "dark",
+    mode = "inline",
+    getCurrChildItems,
+    menuItems,
+    onlyLvOneMenu = false,
+    secondaryHeader,
+    secondaryItemFilter,
+    classNames: semanticClassNames,
+    ...menuConfig
+  } = props;
+  const navigate = (0, _reactRouter.useNavigate)();
+  const location = (0, _reactRouter.useLocation)();
+
+  // 当前地址落在某个次级菜单根之下时，侧栏整个换成那棵子树
+  const secondary = (0, _react.useMemo)(() => {
+    const find = routes => {
+      for (const r of routes ?? []) {
+        if (isSecondaryRoot(r) && (0, _reactRouter.matchPath)({
+          path: r.path,
+          end: false
+        }, location.pathname)) {
+          return r;
+        }
+        const hit = find(r.children);
+        if (hit) return hit;
+      }
+      return undefined;
+    };
+    return find(router);
+  }, [router, location.pathname]);
+  const items = (0, _react.useMemo)(() => {
+    if (secondary?.path) {
+      const rootLen = secondary.path.length;
+      // all=true：这些子页本就都不进主侧栏，按 menu 标记会被全部过滤掉
+      return (0, _formatMenu.formatMenu)(secondary.children ?? [], true)
+      // 自身那段还带参数的（detail/:id）点不进去，不列
+      .filter(i => !i.key.slice(rootLen).includes(":")).filter(i => secondaryItemFilter?.(i.key) ?? true);
+    }
+    return menuItems ? (0, _lodash.cloneDeep)(menuItems) : (0, _formatMenu.formatMenu)(router);
+  }, [router, menuItems, secondary, secondaryItemFilter]);
+  const allItems = (0, _react.useMemo)(() => {
+    return menuItems ? (0, _lodash.cloneDeep)(menuItems) : (0, _formatMenu.formatMenu)((0, _lodash.cloneDeep)(router), true);
+  }, [router, menuItems]);
+  const {
+    menuKey,
+    setMenuKey,
+    openKeys,
+    setOpenkeys
+  } = (0, _useMenuPath.useMenuPath)({
+    allItems,
+    collapsed,
+    mode
+  });
+  const _items = (0, _react.useMemo)(() => {
+    const _items = (0, _lodash.cloneDeep)(items);
+    (0, _setActiveIcon.setActiveIcon)(_items, menuKey);
+    return _items;
+  }, [items, menuKey]);
+  (0, _useOnlyLvOneMenu.useOnlyLvOneMenu)({
+    items,
+    onlyLvOneMenu,
+    getCurrChildItems,
+    setOpenkeys,
+    setMenuKey
+  });
+
+  // Cloudflare style: the sidebar (inline) renders top-level directories as non-collapsible "groups";
+  // level 1 = gray section title, level 2 = flat items; collapsible submenus are no longer used in expanded mode.
+  const cfGroupItems = (0, _react.useMemo)(() => {
+    return _items.map(it => it.children?.length && !collapsed ? {
+      type: "group",
+      key: it.key,
+      label: it.title ?? it.label,
+      children: it.children
+    } : it);
+  }, [_items, collapsed]);
+  const menu = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Menu, {
+    ...menuConfig,
+    mode: mode,
+    inlineCollapsed: collapsed,
+    items: onlyLvOneMenu ? _items?.map(i => ({
+      ...i,
+      children: undefined
+    })) : mode === "inline" ? cfGroupItems : _items,
+    onClick: v => {
+      if (onlyLvOneMenu) {
+        getCurrChildItems?.(items.find(i => i.key === v.key)?.children || []);
+        setOpenkeys([v.key]);
+        setMenuKey(v.key);
+      } else {
+        // 次级菜单的 key 是带参模式（/admin/order/:id/detail），按当前地址回填再跳
+        const params = secondary?.path ? (0, _reactRouter.matchPath)({
+          path: secondary.path,
+          end: false
+        }, location.pathname)?.params ?? {} : {};
+        navigate(fillParams(v.key, params));
+      }
+    },
+    selectedKeys: [menuKey],
+    openKeys: openKeys,
+    onOpenChange: keys => {
+      setOpenkeys(keys);
+    },
+    theme: theme,
+    className: (0, _classnames.default)(_indexModule.default.menu, className)
+    // 弹出的子菜单挂在 body 上，拿不到根节点的类名。给它挂一个自己的类，样式才有地方落
+    ,
+    classNames: (0, _semantic.mergeSemantic)(semanticClassNames, outer => ({
+      ...outer,
+      popup: [_indexModule.default.popup, typeof outer.popup === "string" ? outer.popup : outer.popup?.root].filter(Boolean).join(" ")
+    }))
+  });
+
+  // 次级菜单默认带一段头部（至少给出返回入口），调用方可用 secondaryHeader 整块换掉
+  return secondary ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _indexModule.default.secondaryWrap,
+    children: [secondaryHeader ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondaryHeader.default, {
+      collapsed: collapsed,
+      theme: theme
+    }), menu]
+  }) : menu;
+};
+var _default = exports.default = Menu;

package/lib/layout/Menu/index.module.scss

@@ -0,0 +1,50 @@
+// 注意：CSS Module 里的类名都会被哈希，antd 的类名必须写在 :global() 中，否则
+// `.ant-menu-horizontal` 会变成 `.ant-menu-horizontal___xxxxx`，静悄悄地永不生效。
+.menu {
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+
+  scrollbar-width: none;
+
+  // 顶部横向菜单：占满剩余宽度，背景交给外层的导航渐变
+  &:global(.ant-menu-horizontal) {
+    flex: 1;
+    min-width: 0px;
+
+    background-color: transparent;
+  }
+}
+
+// 弹出的子菜单挂在 body 上，够不到 .menu，所以由组件把这个类挂到 popup 上
+.popup {
+  &:global(.ant-menu-submenu-popup.ant-menu.ant-menu-dark) {
+    :global(.ant-menu-item),
+    :global(.ant-menu-submenu-title) {
+      color: var(--vita-foreground);
+
+      &:hover {
+        color: var(--vita-primary) !important;
+      }
+
+      &:global(.ant-menu-item-selected) {
+        background-color: color-mix(in srgb, var(--vita-primary) 8%, transparent);
+
+        color: var(--vita-primary) !important;
+      }
+    }
+  }
+}
+
+// 次级菜单：头部固定在上，菜单撑满剩余高度
+.secondaryWrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  :global(.ant-menu) {
+    flex: 1;
+    border-inline-end: none !important;
+  }
+}

package/lib/layout/NavTabBar/_components/SortableTab/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
+    "data-node-key": string;
+}
+/**
+ * Draggable tab node component
+ */
+declare const DraggableTabNode: React.FC<Readonly<DraggableTabPaneProps>>;
+export default DraggableTabNode;

package/lib/layout/NavTabBar/_components/SortableTab/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _sortable = require("@dnd-kit/sortable");
+var _utilities = require("@dnd-kit/utilities");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Draggable tab node component
+ */
+const DraggableTabNode = props => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, _sortable.useSortable)({
+    id: props["data-node-key"]
+  });
+  const style = {
+    ...props.style,
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0 : 1,
+    cursor: "pointer"
+  };
+  return /*#__PURE__*/_react.default.cloneElement(props.children, {
+    ref: setNodeRef,
+    style,
+    ...attributes,
+    ...listeners
+  });
+};
+var _default = exports.default = DraggableTabNode;

package/lib/layout/NavTabBar/_components/TabContextMenu/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { TabType } from "../..";
+interface TabContextMenuProps {
+    item: TabType;
+    index: number;
+    openKeys: TabType[];
+    basePath: string;
+    affixRouter: string[];
+    onReload: (key: string) => void;
+    refresh: (key: string) => void;
+    drop: (key: string) => void;
+    setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>;
+    setOpen: (key: string) => void;
+    navigate: (path: string) => void;
+}
+/**
+ * Tab context menu component
+ */
+declare const TabContextMenu: React.FC<TabContextMenuProps>;
+export default TabContextMenu;

package/lib/layout/NavTabBar/_components/TabContextMenu/index.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("../../../../components/Button"));
+var _Icon = _interopRequireDefault(require("../../../../components/Icon"));
+var _tabActions = require("../../_utils/tabActions");
+var _indexModule = _interopRequireDefault(require("../../index.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Tab context menu component
+ */
+const TabContextMenu = ({
+  item,
+  index,
+  openKeys,
+  basePath,
+  affixRouter,
+  onReload,
+  refresh,
+  drop,
+  setOpenkeys,
+  setOpen,
+  navigate
+}) => {
+  // Determine whether the current tab is affixed
+  const isAffixed = affixRouter.includes(item.key) || item.affix;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _indexModule.default.tabContextMenu,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _indexModule.default.part,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        type: "text",
+        onClick: () => {
+          onReload(item.key?.split("?")[0] || "");
+          refresh(item.key?.split("?")[0] || "");
+          setOpen("");
+        },
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: "ep:refresh"
+        }),
+        children: "\u91CD\u65B0\u52A0\u8F7D"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        type: "text",
+        disabled: isAffixed,
+        onClick: () => {
+          const newOpenKeys = (0, _tabActions.closeTab)(openKeys, index, drop, affixRouter);
+          setOpenkeys(newOpenKeys);
+          setOpen("");
+          // After closing the tab, select the previous one; fall back to the first one
+          const targetIndex = index > 0 ? index - 1 : 0;
+          navigate(newOpenKeys[targetIndex]?.key || basePath);
+        },
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: "ep:close"
+        }),
+        children: "\u5173\u95ED\u6807\u7B7E\u9875"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _indexModule.default.part,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        type: "text",
+        disabled: index === 0,
+        onClick: () => {
+          const newOpenKeys = (0, _tabActions.closeLeftTabs)(openKeys, index, drop, affixRouter);
+          setOpenkeys(newOpenKeys);
+          setOpen("");
+          navigate(item.key);
+        },
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: "ep:d-arrow-left"
+        }),
+        children: "\u5173\u95ED\u5DE6\u4FA7\u6807\u7B7E\u9875"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        type: "text",
+        disabled: index === openKeys.length - 1,
+        onClick: () => {
+          const newOpenKeys = (0, _tabActions.closeRightTabs)(openKeys, index, drop, affixRouter);
+          setOpenkeys(newOpenKeys);
+          setOpen("");
+          navigate(item.key);
+        },
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: "ep:d-arrow-right"
+        }),
+        children: "\u5173\u95ED\u53F3\u4FA7\u6807\u7B7E\u9875"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _indexModule.default.part,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        type: "text",
+        disabled: openKeys.length <= 1,
+        onClick: () => {
+          const newOpenKeys = (0, _tabActions.closeOtherTabs)(openKeys, item, drop, affixRouter);
+          setOpenkeys(newOpenKeys);
+          setOpen("");
+          navigate(item.key);
+        },
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: "ep:discount"
+        }),
+        children: "\u5173\u95ED\u5176\u4ED6\u6807\u7B7E\u9875"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        type: "text",
+        disabled: isAffixed && openKeys.length <= 1,
+        onClick: () => {
+          const newOpenKeys = (0, _tabActions.closeAllTabs)(openKeys, drop, affixRouter);
+          setOpenkeys(newOpenKeys);
+          setOpen("");
+          // If any affixed tabs remain, navigate to the first one
+          if (newOpenKeys.length > 0) {
+            navigate(newOpenKeys[0].key);
+          } else {
+            navigate(basePath);
+          }
+        },
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: "ep:minus"
+        }),
+        children: "\u5173\u95ED\u5168\u90E8\u6807\u7B7E\u9875"
+      })]
+    })]
+  });
+};
+var _default = exports.default = TabContextMenu;

package/lib/layout/NavTabBar/_components/TabDragOverlay/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { TabType } from "../..";
+interface TabDragOverlayProps {
+    activeId: string | null;
+    openKeys: TabType[];
+    basePath: string;
+    affixRouter: string[];
+    open: string;
+    onReload: (key: string) => void;
+    refresh: (key: string) => void;
+    drop: (key: string) => void;
+    setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>;
+    setOpen: (key: string) => void;
+    navigate: (path: string) => void;
+}
+/**
+ * Drag overlay component that renders the tab currently being dragged
+ */
+declare const TabDragOverlay: React.FC<TabDragOverlayProps>;
+export default TabDragOverlay;

package/lib/layout/NavTabBar/_components/TabDragOverlay/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@dnd-kit/core");
+var _TabLabel = _interopRequireDefault(require("../TabLabel"));
+var _indexModule = _interopRequireDefault(require("../../index.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Drag overlay component that renders the tab currently being dragged
+ */
+const TabDragOverlay = ({
+  activeId,
+  openKeys,
+  basePath,
+  affixRouter,
+  open,
+  onReload,
+  refresh,
+  drop,
+  setOpenkeys,
+  setOpen,
+  navigate
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_core.DragOverlay, {
+    adjustScale: false,
+    children: activeId ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.dragOverlay,
+      children: (() => {
+        const item = openKeys.find(item => item.key === activeId);
+        const idx = openKeys.findIndex(item => item.key === activeId);
+        return item ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLabel.default, {
+          item: item,
+          index: idx,
+          openKeys: openKeys,
+          basePath: basePath,
+          affixRouter: affixRouter,
+          open: open,
+          onReload: onReload,
+          refresh: refresh,
+          drop: drop,
+          setOpenkeys: setOpenkeys,
+          setOpen: setOpen,
+          navigate: navigate
+        }) : activeId;
+      })()
+    }) : null
+  });
+};
+var _default = exports.default = TabDragOverlay;

package/lib/layout/NavTabBar/_components/TabLabel/index.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { TabType } from "../..";
+interface TabLabelProps {
+    item: TabType;
+    index: number;
+    openKeys: TabType[];
+    basePath: string;
+    affixRouter: string[];
+    open: string;
+    onReload: (key: string) => void;
+    refresh: (key: string) => void;
+    drop: (key: string) => void;
+    setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>;
+    setOpen: (key: string) => void;
+    navigate: (path: string) => void;
+    className?: string;
+}
+/**
+ * Tab label component
+ */
+declare const TabLabel: React.FC<TabLabelProps>;
+export default TabLabel;

package/lib/layout/NavTabBar/_components/TabLabel/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _TabContextMenu = _interopRequireDefault(require("../TabContextMenu"));
+var _indexModule = _interopRequireDefault(require("../../index.module.scss"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Tab label component
+ */
+const TabLabel = ({
+  item,
+  index,
+  openKeys,
+  basePath,
+  affixRouter,
+  open,
+  onReload,
+  refresh,
+  drop,
+  setOpenkeys,
+  setOpen,
+  navigate,
+  className
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
+    open: item.key === open,
+    placement: "bottomLeft",
+    classNames: {
+      root: _indexModule.default.popover
+    },
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabContextMenu.default, {
+      item: item,
+      index: index,
+      openKeys: openKeys,
+      basePath: basePath,
+      affixRouter: affixRouter,
+      onReload: onReload,
+      refresh: refresh,
+      drop: drop,
+      setOpenkeys: setOpenkeys,
+      setOpen: setOpen,
+      navigate: navigate
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      onContextMenu: event => {
+        event.preventDefault();
+      },
+      onMouseDown: e => {
+        if (e.button === 2) {
+          setOpen(item.key === open ? "" : item.key);
+        } else {
+          setOpen("");
+          navigate(item.key);
+        }
+      },
+      className: (0, _classnames.default)(_indexModule.default.tabLabel, className),
+      children: [item.icon, item.label]
+    })
+  });
+};
+var _default = exports.default = TabLabel;

package/lib/layout/NavTabBar/_hooks/useDropTabKey.d.ts

@@ -0,0 +1,5 @@
+import { TabType } from "..";
+/**
+ * Hook that closes a tab via dropKey
+ */
+export declare const useDropTabKey: (setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>) => void;

package/lib/layout/NavTabBar/_hooks/useDropTabKey.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropTabKey = void 0;
+var _react = require("react");
+var _reactActivation = require("react-activation");
+var _useDropTab = require("../../_hooks/useDropTab");
+/**
+ * Hook that closes a tab via dropKey
+ */
+const useDropTabKey = setOpenkeys => {
+  const {
+    drop
+  } = (0, _reactActivation.useAliveController)();
+  const {
+    dropKey
+  } = (0, _react.useContext)(_useDropTab.NavTabBarContent);
+  (0, _react.useEffect)(() => {
+    setTimeout(() => {
+      if (dropKey) {
+        drop(dropKey);
+        setOpenkeys(prev => {
+          const newOpenKeys = prev.filter(item => item.key !== dropKey);
+          return newOpenKeys;
+        });
+      }
+    }, 0);
+  }, [drop, dropKey, setOpenkeys]);
+};
+exports.useDropTabKey = useDropTabKey;

package/lib/layout/NavTabBar/_hooks/useTabContextMenu.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Hook that handles the tab context menu
+ */
+export declare const useTabContextMenu: () => {
+    open: string;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<string>>;
+};

package/lib/layout/NavTabBar/_hooks/useTabContextMenu.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabContextMenu = void 0;
+var _react = require("react");
+var _ahooks = require("ahooks");
+/**
+ * Hook that handles the tab context menu
+ */
+const useTabContextMenu = () => {
+  const [open, setOpen] = (0, _react.useState)("");
+  (0, _ahooks.useDebounceEffect)(() => {
+    const close = () => {
+      setOpen("");
+    };
+    document.removeEventListener("click", close);
+    if (open) {
+      document.addEventListener("click", close);
+    }
+  }, [open]);
+  return {
+    open,
+    setOpen
+  };
+};
+exports.useTabContextMenu = useTabContextMenu;

package/lib/layout/NavTabBar/_hooks/useTabPath.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { TabType } from "..";
+interface UseTabPathOptions {
+    items: TabType[];
+    affixRouter: string[];
+}
+/**
+ * Hook that handles tab path matching and active state
+ */
+export declare const useTabPath: ({ items, affixRouter }: UseTabPathOptions) => {
+    tabKey: string;
+    setTabKey: import("react").Dispatch<import("react").SetStateAction<string>>;
+    openKeys: TabType[];
+    setOpenkeys: import("react").Dispatch<import("react").SetStateAction<TabType[]>>;
+};
+export {};