@pisell/materials 2.2.79 → 2.2.81

package/lib/components/pisellDraggable/index.js

@@ -37,6 +37,7 @@ var import_core = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
+var import_ahooks = require("ahooks");
 var import_utilities = require("@dnd-kit/utilities");
 var import_components = require("./components");
 var import_utilities2 = require("./utilities");
@@ -103,7 +104,8 @@ function SortableTree({
   onChange,
   onRemoveBefore,
   __designMode,
-  maxLevel = 3
+  maxLevel = 3,
+  canDrop
 }) {
   const [items, setItems] = (0, import_react.useState)([]);
   const [activeId, setActiveId] = (0, import_react.useState)(null);
@@ -143,7 +145,9 @@ function SortableTree({
     () => flattenedItems.map(({ id }) => id),
     [flattenedItems]
   );
-  const activeItem = activeId ? flattenedItems.find(({ id }) => id === activeId) : null;
+  const activeItem = (0, import_react.useMemo)(() => {
+    return activeId ? flattenedItems.find(({ id }) => id === activeId) : null;
+  }, [activeId, flattenedItems]);
   (0, import_react.useEffect)(() => {
     sensorContext.current = {
       items: flattenedItems,
@@ -164,68 +168,25 @@ function SortableTree({
       return childNewDepth >= maxLevel || checkSubtreeDepth(items2, child.id, childNewDepth);
     });
   }
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_core.DndContext,
-    {
-      sensors,
-      collisionDetection: import_core.closestCenter,
-      measuring,
-      onDragStart: handleDragStart,
-      onDragMove: handleDragMove,
-      onDragOver: handleDragOver,
-      onDragEnd: handleDragEnd,
-      onDragCancel: handleDragCancel
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_sortable.SortableContext, { items: sortedIds, strategy: import_sortable.verticalListSortingStrategy }, flattenedItems.map((item) => {
-      const { id, children, collapsed, depth } = item;
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_components.SortableTreeItem,
-        {
-          key: id,
-          id,
-          item,
-          depth: id === activeId && projected ? projected.depth : depth,
-          indentationWidth,
-          indicator,
-          collapsed: Boolean(collapsed && (children == null ? void 0 : children.length)),
-          onCollapse: collapsible && (children == null ? void 0 : children.length) ? () => handleCollapse(id) : void 0,
-          onRemove: removable ? () => handleRemove(item) : void 0,
-          renderItem,
-          __designMode
-        }
-      );
-    }), (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ import_react.default.createElement(
-        import_core.DragOverlay,
-        {
-          dropAnimation: dropAnimationConfig,
-          modifiers: indicator ? [adjustTranslate] : void 0
-        },
-        activeId && activeItem ? /* @__PURE__ */ import_react.default.createElement(
-          import_components.SortableTreeItem,
-          {
-            id: activeId,
-            depth: activeItem.depth,
-            clone: true,
-            childCount: (0, import_utilities2.getChildCount)(items, activeId) + 1,
-            item: activeItem,
-            indentationWidth,
-            renderItem
-          }
-        ) : null
-      ),
-      document.body
-    ))
-  );
-  function handleDragStart({ active: { id: activeId2 } }) {
+  const handleRemove = (0, import_ahooks.useMemoizedFn)(async (item) => {
+    if (onRemoveBefore) {
+      let res = await (onRemoveBefore == null ? void 0 : onRemoveBefore(item));
+      if (!res) {
+        return;
+      }
+    }
+    setItems((items2) => (0, import_utilities2.removeItem)(items2, item.id));
+    onChange == null ? void 0 : onChange(items);
+  });
+  const handleDragStart = (0, import_ahooks.useMemoizedFn)(({ active: { id: activeId2 } }) => {
     setActiveId(activeId2);
     setOverId(activeId2);
     document.body.style.setProperty("cursor", "grabbing");
-  }
-  function handleDragMove({ delta }) {
+  });
+  const handleDragMove = (0, import_ahooks.useMemoizedFn)(({ delta }) => {
     setOffsetLeft(delta.x);
-  }
-  function handleDragOver({ over }) {
+  });
+  const handleDragOver = (0, import_ahooks.useMemoizedFn)(({ over }) => {
     if (!projected || !over) {
       setOverId((over == null ? void 0 : over.id) ?? null);
       return;
@@ -246,8 +207,11 @@ function SortableTree({
       return;
     }
     setOverId(over.id);
-  }
-  function handleDragEnd({ active, over }) {
+  });
+  const parentNode = (0, import_react.useMemo)(() => {
+    return (projected == null ? void 0 : projected.parentId) ? flattenedItems.find((item) => item.id === projected.parentId) : null;
+  }, [flattenedItems, projected == null ? void 0 : projected.parentId]);
+  const handleDragEnd = (0, import_ahooks.useMemoizedFn)(({ active, over }) => {
     resetState();
     if (projected && over) {
       const { depth, parentId } = projected;
@@ -255,6 +219,14 @@ function SortableTree({
       if (targetParent == null ? void 0 : targetParent.disabledDrop) {
         return;
       }
+      const dragItem = flattenedItems.find((item) => item.id === active.id);
+      const dropTarget = flattenedItems.find((item) => item.id === over.id);
+      if (canDrop && dragItem && dropTarget) {
+        const canDropResult = canDrop(dragItem, dropTarget, parentId, targetParent);
+        if (!canDropResult) {
+          return;
+        }
+      }
       if (depth >= maxLevel) {
         return;
       }
@@ -278,7 +250,86 @@ function SortableTree({
       setItems(newItems);
       onChange == null ? void 0 : onChange(newItems);
     }
-  }
+  });
+  const handleCollapse = (0, import_ahooks.useMemoizedFn)((id) => {
+    setItems((items2) => {
+      const newVal = (0, import_utilities2.setProperty)(items2, id, "collapsed", (value2) => {
+        return !value2;
+      });
+      onChange == null ? void 0 : onChange(items2);
+      return newVal;
+    });
+  });
+  const isError = (0, import_react.useMemo)(() => {
+    return !(canDrop == null ? void 0 : canDrop(activeItem || {}, {}, projected == null ? void 0 : projected.parentId, parentNode));
+  }, [projected, activeItem, canDrop, parentNode]);
+  const renderTreeItems = (0, import_react.useMemo)(() => {
+    return flattenedItems.map((item) => {
+      const { id, children, collapsed, depth } = item;
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.SortableTreeItem,
+        {
+          key: id,
+          id,
+          item,
+          depth: id === activeId && projected ? projected.depth : depth,
+          indentationWidth,
+          indicator,
+          collapsed: Boolean(collapsed && (children == null ? void 0 : children.length)),
+          onCollapse: collapsible && (children == null ? void 0 : children.length) ? () => handleCollapse(id) : void 0,
+          onRemove: removable ? () => handleRemove(item) : void 0,
+          renderItem,
+          __designMode
+        }
+      );
+    });
+  }, [
+    flattenedItems,
+    activeId,
+    projected == null ? void 0 : projected.depth,
+    indentationWidth,
+    indicator,
+    collapsible,
+    handleCollapse,
+    handleRemove,
+    renderItem,
+    __designMode
+  ]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_core.DndContext,
+    {
+      sensors,
+      collisionDetection: import_core.closestCenter,
+      measuring,
+      onDragStart: handleDragStart,
+      onDragMove: handleDragMove,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_sortable.SortableContext, { items: sortedIds, strategy: import_sortable.verticalListSortingStrategy }, renderTreeItems, (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ import_react.default.createElement(
+        import_core.DragOverlay,
+        {
+          dropAnimation: dropAnimationConfig,
+          modifiers: indicator ? [adjustTranslate] : void 0
+        },
+        activeId && activeItem ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.SortableTreeItem,
+          {
+            id: activeId,
+            depth: activeItem.depth,
+            clone: true,
+            childCount: (0, import_utilities2.getChildCount)(items, activeId) + 1,
+            item: activeItem,
+            indentationWidth,
+            renderItem: (props, ref) => renderItem == null ? void 0 : renderItem({ ...props, isError }, ref)
+          }
+        ) : null
+      ),
+      document.body
+    ))
+  );
   function handleDragCancel() {
     resetState();
   }
@@ -288,23 +339,6 @@ function SortableTree({
     setOffsetLeft(0);
     document.body.style.setProperty("cursor", "");
   }
-  async function handleRemove(item) {
-    if (onRemoveBefore) {
-      let res = await (onRemoveBefore == null ? void 0 : onRemoveBefore(item));
-      if (!res) {
-        return;
-      }
-    }
-    setItems((items2) => (0, import_utilities2.removeItem)(items2, item.id));
-    onChange == null ? void 0 : onChange(items);
-  }
-  function handleCollapse(id) {
-    setItems(
-      (items2) => (0, import_utilities2.setProperty)(items2, id, "collapsed", (value2) => {
-        return !value2;
-      })
-    );
-  }
 }
 var adjustTranslate = ({ transform }) => {
   return {

package/lib/components/pisellDropSort/PisellDropSort.js

@@ -46,6 +46,7 @@ var PisellDropSort = ({
   allowDelete = true,
   allowAddChild = true,
   allowAddRoot = true,
+  allowIsShow = false,
   disabled = false,
   spacing = 8,
   maxLevel = 3,
@@ -62,7 +63,9 @@ var PisellDropSort = ({
   __designMode,
   isCustomAction,
   emptyContent,
-  getItemStyle
+  getItemStyle,
+  canDrop,
+  indentationWidth
 }) => {
   const renderItem = (0, import_react.useCallback)(
     (itemProps, ref) => {
@@ -75,6 +78,7 @@ var PisellDropSort = ({
           allowAddChild,
           allowDelete,
           allowDrag,
+          allowIsShow,
           disabled,
           onAdd,
           onDelete,
@@ -132,10 +136,12 @@ var PisellDropSort = ({
         value,
         collapsible: true,
         indicator: false,
-        indentationWidth: 24,
+        indentationWidth,
         removable: allowDelete,
         renderItem,
-        onChange: handleChange
+        onChange: handleChange,
+        canDrop,
+        maxLevel
       }
     )
   ));

package/lib/components/pisellDropSort/components/SortableItem/index.d.ts

@@ -7,6 +7,7 @@ interface SortableItemProps {
     domRef: React.RefObject<HTMLDivElement>;
     allowAddChild?: boolean;
     allowDelete?: boolean;
+    allowIsShow?: boolean;
     allowDrag?: boolean;
     disabled?: boolean;
     onAdd?: (itemProps: TreeItem) => void;

package/lib/components/pisellDropSort/components/SortableItem/index.js

@@ -46,6 +46,7 @@ var SortableItem = (props) => {
     allowAddChild,
     allowDelete,
     allowDrag,
+    allowIsShow,
     disabled,
     onAdd,
     onDelete,
@@ -72,6 +73,7 @@ var SortableItem = (props) => {
     indentationWidth,
     handleProps,
     collapsed,
+    isError,
     ...otherProps
   } = itemProps;
   const itemStyle = (getItemStyle == null ? void 0 : getItemStyle(itemProps)) || {};
@@ -79,6 +81,9 @@ var SortableItem = (props) => {
     ...itemStyle,
     ...style
   };
+  if (isError) {
+    mergedStyle.backgroundColor = "#FECDCA";
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     "li",
     {

package/lib/components/pisellDropSort/components/SortableItem/index.less

@@ -81,7 +81,6 @@
 
   .pisell-lowcode-drop-sort-item-content {
     flex: 1;
-    height: 48px;
   }
 
   .pisell-lowcode-drop-sort-item-button {

package/lib/components/pisellDropSort/types.d.ts

@@ -15,6 +15,8 @@ export interface PisellDropSortProps {
     allowAddChild?: boolean;
     /** 允许添加根节点 */
     allowAddRoot?: boolean;
+    /** 是否允许显示隐藏 */
+    allowIsShow?: boolean;
     /** 是否禁用 */
     disabled?: boolean;
     /** 节点间距 */
@@ -49,4 +51,8 @@ export interface PisellDropSortProps {
     isCustomAction?: boolean;
     /** 获取item样式 */
     getItemStyle?: (itemProps: TreeItem) => React.CSSProperties;
+    /** 自定义拖拽判断函数，返回false时阻止拖拽 */
+    canDrop?: (dragItem: DropSortItem, dropTarget: DropSortItem, parentId: string | number | null) => boolean;
+    /** 节点缩进宽度 */
+    indentationWidth?: number;
 }

package/lib/components/pisellInformationEntry/Scan/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 export interface ScanProps {
     onChange: (val: string) => void;

package/lib/components/pisellInput/components/BankCard/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'antd';
 import { PisellContextType } from "../../../pisell-config-provider/context";
 import './index.less';

package/lib/components/pisellInput/components/Copy/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps, ButtonProps } from 'antd';
 import { PisellContextType } from "../../../pisell-config-provider/context";
 export interface CopyProps extends InputProps {

package/lib/components/pisellInput/components/SecurityCode/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'antd';
 import './index.less';
 import { PisellContextType } from "../../../pisell-config-provider/context";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'antd';
 import { PisellContextType } from '../pisell-config-provider/context';
 declare const PisellInput: {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SpinProps } from 'antd';
 import './index.less';
 declare type MaskType = {

package/lib/components/pisellMenu/PisellMenu.d.ts

@@ -1,9 +1,11 @@
+import { Menu as AntdMenu } from 'antd';
 import React from 'react';
 import './PisellMenu.less';
 import type { PisellMenuProps } from './types';
-declare const PisellMenu: {
-    ({ className, style, mode, theme, defaultOpenKeys, defaultSelectedKeys, inlineCollapsed, openKeys, selectedKeys, onOpenChange, onSelect, dataSource, __designMode, children, other, ...restProps }: PisellMenuProps): JSX.Element;
-    Item: Omit<React.FunctionComponent<import("antd").MenuItemProps>, ""> & (<T extends import("antd").MenuItemProps>(props: T extends infer U extends import("antd").MenuItemProps ? unknown extends U ? import("antd").MenuItemProps : U : import("antd").MenuItemProps, context?: any) => React.ReactElement<any, any> | null);
-    SubMenu: React.FC<import("antd").SubMenuProps>;
+declare type PisellMenuComponent = React.FC<PisellMenuProps> & {
+    Item: typeof AntdMenu.Item;
+    SubMenu: typeof AntdMenu.SubMenu;
+    ItemGroup: typeof AntdMenu.ItemGroup;
 };
+declare const PisellMenu: PisellMenuComponent;
 export default PisellMenu;

package/lib/components/pisellMenu/PisellMenu.js

@@ -96,4 +96,5 @@ var PisellMenu = ({
 };
 PisellMenu.Item = import_antd.Menu.Item;
 PisellMenu.SubMenu = import_antd.Menu.SubMenu;
+PisellMenu.ItemGroup = import_antd.Menu.ItemGroup;
 var PisellMenu_default = PisellMenu;

package/lib/components/pisellMenu/types.d.ts

@@ -23,4 +23,5 @@ export interface MenuItemType {
     icon?: string | React.ReactNode;
     hide?: boolean;
     type?: 'group' | 'divider';
+    isGroup?: boolean;
 }

package/lib/components/pisellModal/components/IpadModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PcModalProps } from '../PcModal';
 export interface IpadModalProps extends PcModalProps {
 }

package/lib/components/pisellModal/components/MobileModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PcModalProps } from '../PcModal';
 import './index.less';
 export interface MobileModalProps extends PcModalProps {

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

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

package/lib/components/pisellNavigationMenu/PisellNavigationMenu.js

@@ -33,6 +33,8 @@ __export(PisellNavigationMenu_exports, {
 });
 module.exports = __toCommonJS(PisellNavigationMenu_exports);
 var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_classnames = __toESM(require("classnames"));
 var import_pisellDropSort = __toESM(require("../pisellDropSort"));
 var import_pisellTags = __toESM(require("../pisellTags"));
 var import_icon = __toESM(require("../icon"));
@@ -40,7 +42,7 @@ var import_button = __toESM(require("../button"));
 var import_locales = require("../../locales");
 var import_antd = require("antd");
 var import_pisellEmpty = __toESM(require("../pisellEmpty"));
-var import_utils = require("./utils");
+var import_utils2 = require("./utils");
 var import_PisellNavigationMenu = require("./PisellNavigationMenu.less");
 var PisellNavigationMenu = ({
   value = [],
@@ -48,6 +50,7 @@ var PisellNavigationMenu = ({
   allowDelete = true,
   allowAddChild = true,
   allowAddRoot = true,
+  allowIsShow = true,
   disabled = false,
   spacing = 8,
   maxLevel = 3,
@@ -58,14 +61,23 @@ var PisellNavigationMenu = ({
   onAddPage,
   onEdit,
   onDelete,
+  onIsShow,
   __designMode,
-  title
+  title,
+  rightContent: propsRightContent,
+  getItemStyle: propsGetItemStyle,
+  canDrop,
+  indentationWidth = 24,
+  hideDescription,
+  showActionOnHover,
+  showTitleTags
 }) => {
   const convertToNavigationItems = (items2) => {
     return items2.map((item) => ({
       id: String(item.id),
       title: String(item.title || ""),
       path: String(item.path || "/"),
+      collapsed: item.collapsed,
       children: item.children ? convertToNavigationItems(item.children) : []
     }));
   };
@@ -94,25 +106,58 @@ var PisellNavigationMenu = ({
         text: (0, import_locales.getText)("pisell-lowcode-navigation-menu-tag-base"),
         color: "#7f56d9"
       },
+      proCode: {
+        text: (0, import_locales.getText)("pisell-lowcode-navigation-menu-tag-proCode"),
+        color: "#1677ff"
+      },
       pisellV1: {
         text: (0, import_locales.getText)("pisell-lowcode-navigation-menu-tag-pisell1"),
         color: "#ee837a"
+      },
+      group: {
+        text: (0, import_locales.getText)("pisell-lowcode-navigation-menu-tag-group"),
+        color: "#7f56d9"
+      },
+      subMenu: {
+        text: (0, import_locales.getText)("pisell-lowcode-navigation-menu-tag-sub-menu"),
+        color: "#067647"
+      },
+      custom: {
+        text: (0, import_locales.getText)("pisell-lowcode-navigation-menu-tag-custom"),
+        color: "#B54708"
       }
     };
   }, []);
   const renderMenuItem = (0, import_react.useCallback)(
     (itemProps) => {
-      var _a, _b;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       const { item } = itemProps;
       const {
         allowEdit = true,
         allowDelete: allowDelete2 = true,
         allowAddChild: allowAddChild2 = true,
         allowAddSubmenu = true,
-        allowAddPage = true
+        allowAddPage = true,
+        allowIsShow: allowIsShow2 = true
       } = item;
       const isShowAddButton = item.isGroup && allowAddChild2 && (allowAddSubmenu || allowAddPage);
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content-icon" }, /* @__PURE__ */ import_react.default.createElement(import_icon.default, { type: item.icon })), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content-text" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-title" }, item.title), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-description" }, item.description, item.source && /* @__PURE__ */ import_react.default.createElement(import_pisellTags.default, { type: "pill_color", color: (_a = tagTextMap[item.source]) == null ? void 0 : _a.color }, ((_b = tagTextMap[item.source]) == null ? void 0 : _b.text) || ""), !item.isGroup && item.version && /* @__PURE__ */ import_react.default.createElement(import_pisellTags.default, { type: "pill_color", color: "success" }, "v", item.version)))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-action-wrap" }, allowEdit && /* @__PURE__ */ import_react.default.createElement(
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content" }, item.icon && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content-icon" }, /* @__PURE__ */ import_react.default.createElement(import_icon.default, { type: item.icon })), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content-text" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-title" }, item.title, showTitleTags && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, item.isGroup && item.is_top && /* @__PURE__ */ import_react.default.createElement(import_pisellTags.default, { type: "pill_color", color: (_a = tagTextMap["group"]) == null ? void 0 : _a.color }, ((_b = tagTextMap["group"]) == null ? void 0 : _b.text) || ""), item.isGroup && !item.is_top && /* @__PURE__ */ import_react.default.createElement(import_pisellTags.default, { type: "pill_color", color: (_c = tagTextMap["subMenu"]) == null ? void 0 : _c.color }, ((_d = tagTextMap["subMenu"]) == null ? void 0 : _d.text) || ""), item.isCustom && /* @__PURE__ */ import_react.default.createElement(import_pisellTags.default, { type: "pill_color", color: (_e = tagTextMap["custom"]) == null ? void 0 : _e.color }, ((_f = tagTextMap["custom"]) == null ? void 0 : _f.text) || ""))), hideDescription ? null : /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-description", style: { display: hideDescription ? "none" : "flex" } }, item.description, item.source && /* @__PURE__ */ import_react.default.createElement(import_pisellTags.default, { type: "pill_color", color: (_g = tagTextMap[item.source]) == null ? void 0 : _g.color }, ((_h = tagTextMap[item.source]) == null ? void 0 : _h.text) || ""), !item.isGroup && item.version && /* @__PURE__ */ import_react.default.createElement(import_pisellTags.default, { type: "pill_color", color: "success" }, "v", item.version)))), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-lowcode-navigation-menu-item-action-wrap", {
+        "pisell-lowcode-navigation-menu-item-action-wrap-hover": showActionOnHover
+      }) }, allowIsShow2 && /* @__PURE__ */ import_react.default.createElement(
+        import_button.default,
+        {
+          type: "text",
+          onClick: () => onIsShow == null ? void 0 : onIsShow(item),
+          className: "pisell-lowcode-navigation-menu-item-action-button",
+          icon: /* @__PURE__ */ import_react.default.createElement(
+            import_icon.default,
+            {
+              type: item.is_show === false ? "pisell2-eye-off" : "pisell2-eye",
+              className: "pisell-lowcode-navigation-menu-item-action-button-icon"
+            }
+          )
+        }
+      ), allowEdit && /* @__PURE__ */ import_react.default.createElement(
         import_button.default,
         {
           type: "text",
@@ -129,6 +174,7 @@ var PisellNavigationMenu = ({
       ), isShowAddButton && /* @__PURE__ */ import_react.default.createElement(
         import_antd.Dropdown,
         {
+          getPopupContainer: (triggerNode) => triggerNode,
           menu: {
             items: [
               allowAddSubmenu && {
@@ -188,6 +234,9 @@ var PisellNavigationMenu = ({
     return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-left-content" }, title);
   }, [title]);
   const rightContent = (0, import_react.useMemo)(() => {
+    if (propsRightContent) {
+      return propsRightContent;
+    }
     return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-right-content" }, /* @__PURE__ */ import_react.default.createElement(
       import_button.default,
       {
@@ -206,27 +255,32 @@ var PisellNavigationMenu = ({
       },
       (0, import_locales.getText)("pisell-lowcode-navigation-menu-add-page")
     ));
-  }, [title]);
+  }, [propsRightContent]);
   const formatValue = (0, import_react.useMemo)(() => {
-    return (0, import_utils.formatTree)(value, (item) => ({
+    return (0, import_utils2.formatTree)(value, (item) => ({
       ...item,
       disabledDrop: !item.isGroup
     }));
   }, [value]);
   const getItemStyle = (0, import_react.useCallback)((itemProps) => {
     const { item } = itemProps;
+    if ((0, import_utils.isFunction)(propsGetItemStyle)) {
+      return (propsGetItemStyle == null ? void 0 : propsGetItemStyle(item)) || {};
+    }
     return {
       backgroundColor: item.isGroup ? "#fff" : "var(--Gray-50, #F9FAFB)"
     };
-  }, []);
+  }, [propsGetItemStyle]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_pisellDropSort.default,
     {
+      indentationWidth,
       value: formatValue,
       allowDrag,
       allowDelete,
       allowAddChild,
       allowAddRoot,
+      allowIsShow,
       disabled,
       spacing,
       maxLevel,
@@ -245,7 +299,8 @@ var PisellNavigationMenu = ({
           maxWidth: 400,
           description: (0, import_locales.getText)("pisell-lowcode-navigation-menu-add-page-tip")
         }
-      )
+      ),
+      canDrop
     }
   );
 };

package/lib/components/pisellNavigationMenu/PisellNavigationMenu.less

@@ -1,3 +1,10 @@
+.pisell-lowcode-drop-sort-item-tree-item {
+  &:hover {
+    .pisell-lowcode-navigation-menu-item-action-wrap {
+      opacity: 1 !important;
+    }
+  }
+}
 .pisell-lowcode-navigation-menu-item {
   display: flex;
   justify-content: space-between;
@@ -26,6 +33,9 @@
       font-size: 14px;
       font-weight: 600;
       line-height: 20px; /* 142.857% */
+      display: flex;
+      gap: 10px;
+      align-items: center;
     }
     .pisell-lowcode-navigation-menu-item-description {
       color: var(--Gray-500, #667085);
@@ -40,6 +50,10 @@
   .pisell-lowcode-navigation-menu-item-action-wrap {
     display: flex;
     gap: 8px;
+    transition: opacity 0.3s ease-in-out;
+    &.pisell-lowcode-navigation-menu-item-action-wrap-hover {
+      opacity: 0;
+    }
     .pisell-lowcode-navigation-menu-item-action-button {
       &:hover {
         background: var(--Gray-300, #D0D5DD);