@hi-ui/menu 5.0.0-canary.2 → 5.0.0-canary.21

package/lib/esm/util.js

@@ -8,7 +8,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { cloneTree, filterTree, getTreeNodesWithChildren } from '@hi-ui/tree-utils';
-
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
 // 寻找某一节点的父节点
 var getParentId = function getParentId(id, data) {
   var parentId = '';
@@ -85,4 +117,65 @@ var transformTreeData = function transformTreeData(data, fieldNames) {
   };
   return data.map(traverseTreeNode);
 };
-export { filterTreeData, getAncestorIds, getIdsWithChildren, getParentId, transformTreeData };
+/**
+ * 增强版搜索函数，返回包含路径信息的结果
+ */
+function searchMenuWithPath(data, keyword) {
+  if (!keyword || !data || data.length === 0) {
+    return [];
+  }
+  var results = [];
+  var processedIds = new Set();
+  function searchInTree(nodes, currentPath) {
+    if (currentPath === void 0) {
+      currentPath = [];
+    }
+    var _a;
+    for (var _iterator3 = _createForOfIteratorHelperLoose(nodes), _step3; !(_step3 = _iterator3()).done;) {
+      var node = _step3.value;
+      var nodePath = [].concat(currentPath, [node]);
+      var isMatched = (_a = node.title) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().includes(keyword.toLowerCase());
+      if (isMatched) {
+        if (!node.children || node.children.length === 0) {
+          // 叶子节点
+          if (!processedIds.has(node.id)) {
+            results.push({
+              node: node,
+              path: nodePath,
+              level: nodePath.length - 1
+            });
+            processedIds.add(node.id);
+          }
+        } else {
+          // 父节点，添加所有子节点
+          addAllDescendantsWithPath(node.children, nodePath);
+        }
+      } else {
+        // 继续搜索子节点
+        if (node.children && node.children.length > 0) {
+          searchInTree(node.children, nodePath);
+        }
+      }
+    }
+  }
+  function addAllDescendantsWithPath(children, parentPath) {
+    for (var _iterator4 = _createForOfIteratorHelperLoose(children), _step4; !(_step4 = _iterator4()).done;) {
+      var child = _step4.value;
+      var childPath = [].concat(parentPath, [child]);
+      if (!processedIds.has(child.id)) {
+        results.push({
+          node: child,
+          path: childPath,
+          level: childPath.length - 1
+        });
+        processedIds.add(child.id);
+      }
+      if (child.children && child.children.length > 0) {
+        addAllDescendantsWithPath(child.children, childPath);
+      }
+    }
+  }
+  searchInTree(data);
+  return results;
+}
+export { filterTreeData, getAncestorIds, getIdsWithChildren, getParentId, searchMenuWithPath, transformTreeData };

package/lib/types/EnterIcon.d.ts

@@ -0,0 +1 @@
+export declare const EnterIcon: () => JSX.Element;

package/lib/types/GroupMenu.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
+import { MenuDataItem } from './types';
+/**
+ * 分组菜单
+ */
+export declare const GroupMenu: React.ForwardRefExoticComponent<GroupMenuProps & React.RefAttributes<HTMLDivElement | null>>;
+export declare type GroupMenuSemanticName = 'root' | 'wrapper' | 'item' | 'itemContent' | 'itemIcon' | 'itemTitle';
+export declare type GroupMenuSemanticClassNames = SemanticClassNamesType<GroupMenuProps, GroupMenuSemanticName>;
+export declare type GroupMenuSemanticStyles = SemanticStylesType<GroupMenuProps, GroupMenuSemanticName>;
+export declare type GroupMenuSemantic = ComponentSemantic<GroupMenuSemanticClassNames, GroupMenuSemanticStyles>;
+export interface GroupMenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>, GroupMenuSemantic {
+    /**
+     * 菜单项数据列表
+     */
+    data: MenuDataItem[];
+    /**
+     * 默认激活的菜单项 id
+     */
+    defaultActiveId?: React.ReactText;
+    /**
+     * 激活的菜单项 id
+     */
+    activeId?: React.ReactText;
+    /**
+     * 点击菜单选项时的回调
+     */
+    onClick?: (evt: React.MouseEvent<HTMLDivElement>, menuId: React.ReactText, menuItem: MenuDataItem) => void;
+    /**
+     * 自定义渲染菜单项标题
+     */
+    titleRender?: (menuItem: MenuDataItem) => React.ReactNode;
+}

package/lib/types/Menu.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { HiBaseFieldNames, HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
 import { MenuDataItem, MenuFooterRenderProps } from './types';
 /**
  * 菜单
  */
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
+export declare type MenuSemanticName = 'root' | 'wrapper' | 'footer' | 'toggle' | 'item' | 'itemInner' | 'itemIcon' | 'itemContent' | 'itemArrow' | 'submenu' | 'popmenu';
+export declare type MenuSemanticClassNames = SemanticClassNamesType<MenuProps, MenuSemanticName>;
+export declare type MenuSemanticStyles = SemanticStylesType<MenuProps, MenuSemanticName>;
+export declare type MenuSemantic = ComponentSemantic<MenuSemanticClassNames, MenuSemanticStyles>;
+export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>, MenuSemantic {
     /**
      * 菜单项数据列表
      */
@@ -97,5 +102,9 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
     /**
      * 设置菜单项的尺寸
      */
-    size?: HiBaseSizeEnum;
+    size?: Omit<HiBaseSizeEnum, 'xs'>;
+    /**
+     * 是否在 mini 模式下显示菜单项的标题
+     */
+    showTitleOnMini?: boolean;
 }

package/lib/types/MenuItem.d.ts

@@ -12,5 +12,5 @@ export interface MenuItemProps extends Omit<HiBaseHTMLProps<'li'>, 'id'> {
     parentIds?: React.ReactText[];
     render?: (node: MenuDataItem, level?: number) => React.ReactNode;
     raw?: MenuDataItem;
-    size?: HiBaseSizeEnum;
+    size?: Omit<HiBaseSizeEnum, 'xs'>;
 }

package/lib/types/MenuSearch.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
+import { MenuDataItem } from './types';
+export declare const MenuSearch: React.ForwardRefExoticComponent<MenuSearchProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface MenuSearchHelper {
+    show: () => void;
+    hide: () => void;
+    focus: () => void;
+}
+export declare type MenuSearchSemanticName = 'root' | 'inputWrapper' | 'input' | 'inputClear' | 'close' | 'content' | 'header' | 'list' | 'listItem' | 'listItemTitle' | 'empty' | 'footer' | 'footerItem' | 'footerItemIcon' | 'footerItemText';
+export declare type MenuSearchSemanticClassNames = SemanticClassNamesType<MenuSearchProps, MenuSearchSemanticName>;
+export declare type MenuSearchSemanticStyles = SemanticStylesType<MenuSearchProps, MenuSearchSemanticName>;
+export declare type MenuSearchSemantic = ComponentSemantic<MenuSearchSemanticClassNames, MenuSearchSemanticStyles>;
+export interface MenuSearchProps extends HiBaseHTMLProps<'div'>, MenuSearchSemantic {
+    innerRef?: React.RefObject<MenuSearchHelper>;
+    clearText?: React.ReactNode;
+    placeholder?: string;
+    notFoundContent?: React.ReactNode;
+    width?: React.CSSProperties['width'];
+    visible?: boolean;
+    data?: MenuDataItem[];
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onSelect?: (id: React.ReactText, item: MenuDataItem) => void;
+    onClear?: () => void;
+    onClose?: () => void;
+    onEsc?: () => void;
+}
+export declare const MenuSearchInput: React.ForwardRefExoticComponent<{
+    prefixCls: string;
+    placeholder?: string | undefined;
+    inputRef?: React.Dispatch<React.SetStateAction<HTMLInputElement | null>> | undefined;
+    width?: React.CSSProperties['width'];
+    value?: string | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onClear?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    onKeyDown?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    semanticClassNames?: Record<string, string | undefined> | undefined;
+    semanticStyles?: Record<string, React.CSSProperties | undefined> | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/lib/types/SideMenu.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
+import { MenuDataItem } from './types';
+/**
+ * 侧边菜单组件
+ */
+export declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLDivElement | null>>;
+export declare type SideMenuSemanticName = 'root' | 'wrapper' | 'itemWrapper' | 'item' | 'itemIcon' | 'itemTitle';
+export declare type SideMenuSemanticClassNames = SemanticClassNamesType<SideMenuProps, SideMenuSemanticName>;
+export declare type SideMenuSemanticStyles = SemanticStylesType<SideMenuProps, SideMenuSemanticName>;
+export declare type SideMenuSemantic = ComponentSemantic<SideMenuSemanticClassNames, SideMenuSemanticStyles>;
+export interface SideMenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'>, SideMenuSemantic {
+    /**
+     * 侧边菜单宽度
+     */
+    width?: number;
+    /**
+     * 是否为迷你模式
+     */
+    mini?: boolean;
+    /**
+     * 默认激活的菜单项
+     */
+    defaultActiveId?: React.ReactText | null;
+    /**
+     * 激活的菜单项
+     */
+    activeId?: React.ReactText | null;
+    /**
+     * 选中的菜单项
+     */
+    selectedId?: React.ReactText | null;
+    /**
+     * 侧边菜单数据
+     */
+    data: MenuDataItem[];
+    /**
+     * 子菜单容器引用
+     */
+    childrenContainerRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * 点击侧边菜单项
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, id: React.ReactText, item: MenuDataItem) => void;
+    /**
+     * 鼠标移入侧边菜单项
+     */
+    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>, id: React.ReactText, item: MenuDataItem) => void;
+    /**
+     * 鼠标移出侧边菜单项
+     */
+    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>, id: React.ReactText, item: MenuDataItem) => void;
+}
+export declare const useSideMenuCascade: ({ data, selectId, activeId, }: {
+    data: MenuDataItem[];
+    selectId: React.ReactText;
+    activeId: React.ReactText;
+}) => {
+    submenuData: MenuDataItem[];
+    selectParentId: string | number;
+    activeParentId: string | number;
+};

package/lib/types/context.d.ts

@@ -1,10 +1,16 @@
 import React from 'react';
 import { MenuDataItem } from './types';
+/** 供 MenuItem 使用的语义化 classNames/styles，由 Menu 通过 useMergeSemantic 合并后注入 */
+export interface MenuSemanticContext {
+    semanticClassNames?: Record<string, string | undefined>;
+    semanticStyles?: Record<string, React.CSSProperties | undefined>;
+}
 declare const MenuContext: React.Context<{
-    placement?: "vertical" | "horizontal" | undefined;
+    placement?: "horizontal" | "vertical" | undefined;
     expandedType?: "collapse" | "pop" | undefined;
     showAllSubMenus?: boolean | undefined;
     mini?: boolean | undefined;
+    showTitleOnMini?: boolean | undefined;
     expandedIds?: React.ReactText[] | undefined;
     activeId?: React.ReactText | undefined;
     activeParents?: React.ReactText[] | undefined;
@@ -13,5 +19,5 @@ declare const MenuContext: React.Context<{
     clickSubMenu?: ((id: React.ReactText) => void) | undefined;
     closePopper?: ((id: React.ReactText) => void) | undefined;
     closeAllPopper?: (() => void) | undefined;
-}>;
+} & MenuSemanticContext>;
 export default MenuContext;

package/lib/types/index.d.ts

@@ -2,5 +2,8 @@ import './styles/index.scss';
 export * from './Menu';
 export { Menu as default } from './Menu';
 export * from './Sidebar';
+export * from './MenuSearch';
+export * from './GroupMenu';
+export * from './SideMenu';
 export { filterTreeData, getParentId, getAncestorIds } from './util';
 export * from './types';

package/lib/types/util.d.ts

@@ -6,3 +6,19 @@ export declare const getAncestorIds: (id: string | number, data: Record<string,
 export declare const getIdsWithChildren: (treeData: MenuDataItem[]) => React.ReactText[];
 export declare const filterTreeData: (treeData: MenuDataItem[], searchKey: string, activeId: string | number) => MenuDataItem[];
 export declare const transformTreeData: (data: MenuDataItem[], fieldNames?: HiBaseFieldNames | undefined) => MenuDataItem[];
+/**
+ * 根据关键字匹配菜单数据的算法
+ * @param data 菜单数据数组
+ * @param keyword 搜索关键字
+ * @returns 匹配结果数组
+ */
+export declare function searchMenuByKeyword(data: MenuDataItem[], keyword: string): MenuDataItem[];
+export interface MenuSearchResult {
+    node: MenuDataItem;
+    path: MenuDataItem[];
+    level: number;
+}
+/**
+ * 增强版搜索函数，返回包含路径信息的结果
+ */
+export declare function searchMenuWithPath(data: MenuDataItem[], keyword: string): MenuSearchResult[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/menu",
-  "version": "5.0.0-canary.2",
+  "version": "5.0.0-canary.21",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -44,31 +44,40 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/array-utils": "^5.0.0-canary.1",
-    "@hi-ui/classname": "^5.0.0-canary.1",
-    "@hi-ui/env": "^5.0.0-canary.1",
-    "@hi-ui/icons": "^5.0.0-canary.1",
-    "@hi-ui/popper": "^5.0.0-canary.2",
-    "@hi-ui/scrollbar": "^5.0.0-canary.1",
-    "@hi-ui/times": "^5.0.0-canary.1",
-    "@hi-ui/tooltip": "^5.0.0-canary.2",
-    "@hi-ui/tree-utils": "^5.0.0-canary.1",
-    "@hi-ui/type-assertion": "^5.0.0-canary.1",
-    "@hi-ui/use-id": "^5.0.0-canary.1",
-    "@hi-ui/use-merge-refs": "^5.0.0-canary.1",
-    "@hi-ui/use-resize-observer": "^5.0.0-canary.1",
-    "@hi-ui/use-toggle": "^5.0.0-canary.1",
-    "@hi-ui/use-uncontrolled-state": "^5.0.0-canary.1",
-    "react-transition-group": "^4.4.2"
+    "@hi-ui/array-utils": "^5.0.0-canary.2",
+    "@hi-ui/button": "^5.0.0-canary.14",
+    "@hi-ui/classname": "^5.0.0-canary.2",
+    "@hi-ui/ellipsis-tooltip": "^5.0.0-canary.7",
+    "@hi-ui/env": "^5.0.0-canary.2",
+    "@hi-ui/highlighter": "^5.0.0-canary.5",
+    "@hi-ui/icon-button": "^5.0.0-canary.9",
+    "@hi-ui/icons": "^5.0.0-canary.10",
+    "@hi-ui/input": "^5.0.0-canary.19",
+    "@hi-ui/picker": "^5.0.0-canary.16",
+    "@hi-ui/popper": "^5.0.0-canary.13",
+    "@hi-ui/scrollbar": "^5.0.0-canary.8",
+    "@hi-ui/times": "^5.0.0-canary.2",
+    "@hi-ui/tooltip": "^5.0.0-canary.11",
+    "@hi-ui/tree-utils": "^5.0.0-canary.2",
+    "@hi-ui/type-assertion": "^5.0.0-canary.2",
+    "@hi-ui/use-id": "^5.0.0-canary.2",
+    "@hi-ui/use-latest": "^5.0.0-canary.2",
+    "@hi-ui/use-merge-refs": "^5.0.0-canary.2",
+    "@hi-ui/use-merge-semantic": "^5.0.0-canary.1",
+    "@hi-ui/use-outside-click": "^5.0.0-canary.2",
+    "@hi-ui/use-resize-observer": "^5.0.0-canary.2",
+    "@hi-ui/use-toggle": "^5.0.0-canary.2",
+    "@hi-ui/use-uncontrolled-state": "^5.0.0-canary.2",
+    "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=5.0.0-canary.1",
+    "@hi-ui/core": ">=5.0.0-canary.7",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^5.0.0-canary.1",
-    "@hi-ui/core-css": "^5.0.0-canary.5",
+    "@hi-ui/core": "^5.0.0-canary.7",
+    "@hi-ui/core-css": "^5.0.0-canary.11",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }