@hi-ui/menu 4.0.0-alpha.1

package/lib/esm/styles/index.scss.js

@@ -0,0 +1,17 @@
+/** @LICENSE
+ * @hi-ui/menu
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-menu-fat-menu {\n  background-color: #fff;\n  background-color: var(--hi-v4-color-static-white, #fff);\n  margin: 0;\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  padding: 8px;\n  padding: var(--hi-v4-spacing-4, 8px);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  color: #1f2733;\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  border-radius: 4px;\n  border-radius: var(--hi-v4-border-radius-normal, 4px);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap; }\n.hi-v4-menu-fat-menu__group:not(:last-of-type) {\n    margin-right: 36px;\n    margin-right: var(--hi-v4-spacing-18, 36px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-group-item {\n    height: 40px;\n    margin: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    padding: 0 12px;\n    padding: 0 var(--hi-v4-spacing-6, 12px);\n    color: #929aa6;\n    color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item {\n    height: 40px;\n    margin: 0;\n    border-radius: 4px;\n    border-radius: var(--hi-v4-border-radius-normal, 4px);\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    padding: 0 12px;\n    padding: 0 var(--hi-v4-spacing-6, 12px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item--active {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa);\n      background-color: #e2f3fe;\n      background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {\n      background-color: #f2f4f7;\n      background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-fat-menu ul {\n    padding: 0;\n    margin: 0; }\n.hi-v4-menu-fat-menu ul li {\n      list-style-type: none; }\n.hi-v4-menu-popmenu {\n  background-color: #fff;\n  background-color: var(--hi-v4-color-static-white, #fff);\n  border-radius: 4px;\n  border-radius: var(--hi-v4-border-radius-normal, 4px);\n  margin: 0;\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  padding: 8px;\n  padding: var(--hi-v4-spacing-4, 8px);\n  color: #1f2733;\n  color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-menu-popmenu .hi-v4-menu-item {\n    height: 40px;\n    margin: 0; }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner {\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      height: 40px;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin-bottom: 8px;\n      margin-bottom: var(--hi-v4-spacing-4, 8px);\n      padding: 0 12px;\n      padding: 0 var(--hi-v4-spacing-6, 12px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n        background-color: #f2f4f7;\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__content {\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1;\n              flex: 1 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100px;\n      padding-right: 8px;\n      padding-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu {\n  background-color: #fff;\n  background-color: var(--hi-v4-color-static-white, #fff);\n  color: #1f2733;\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  line-height: 1.375rem;\n  line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n.hi-v4-menu ul {\n    margin: 0;\n    padding: 0; }\n.hi-v4-menu-item {\n    list-style: none;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    cursor: pointer;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-menu__wrapper {\n    padding: 0;\n    margin: 0; }\n.hi-v4-menu--horizontal {\n    width: 100%;\n    overflow: auto; }\n.hi-v4-menu--horizontal .hi-v4-menu__wrapper {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex; }\n.hi-v4-menu--horizontal .hi-v4-menu-item {\n      margin: 0 20px;\n      margin: 0 var(--hi-v4-spacing-10, 20px);\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      height: 56px;\n      border-bottom: 2px solid transparent;\n      font-size: 1rem;\n      font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        border-bottom: 2px solid #237ffa;\n        border-bottom: 2px solid var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        border-bottom: 2px solid #237ffa;\n        border-bottom: 2px solid var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner {\n        height: 100%;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center; }\n.hi-v4-menu--horizontal .hi-v4-menu-item__content {\n        -webkit-box-flex: 1;\n            -ms-flex: 1 1;\n                flex: 1 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        max-width: 100px;\n        margin-right: 8px;\n        margin-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu--vertical {\n    padding: 8px;\n    padding: var(--hi-v4-spacing-4, 8px);\n    width: 232px;\n    height: 100%;\n    overflow: auto;\n    -webkit-transition: width 0.3s;\n    transition: width 0.3s; }\n.hi-v4-menu--vertical.hi-v4-menu--mini {\n      width: 56px;\n      overflow-x: hidden; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle {\n      width: 40px;\n      cursor: pointer;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center;\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      height: 40px; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {\n        background-color: #f2f4f7;\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner {\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      height: 40px;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin-bottom: 8px;\n      margin-bottom: var(--hi-v4-spacing-4, 8px);\n      padding: 0 12px;\n      padding: 0 var(--hi-v4-spacing-6, 12px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--mini {\n        -webkit-box-pack: center;\n            -ms-flex-pack: center;\n                justify-content: center; }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n        background-color: #f2f4f7;\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__content {\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1;\n              flex: 1 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      text-indent: 0.5px; }\n";
+
+var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
+
+__styleInject__(css_248z);
+
+export default css_248z;
+//# sourceMappingURL=index.scss.js.map

package/lib/esm/styles/index.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/lib/esm/util.js

@@ -0,0 +1,42 @@
+/** @LICENSE
+ * @hi-ui/menu
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// 寻找某一节点的父节点
+var getParentId = function getParentId(id, data) {
+  var parentId = '';
+  data.forEach(function (item) {
+    if (item.children) {
+      if (item.children.some(function (item) {
+        return item.id === id;
+      })) {
+        parentId = item.id;
+      } else if (getParentId(id, item.children)) {
+        parentId = getParentId(id, item.children);
+      }
+    }
+  });
+  return parentId;
+}; // 寻找某一节点的所有祖先节点
+
+
+var getAncestorIds = function getAncestorIds(id, data, arr) {
+  if (arr === void 0) {
+    arr = [];
+  }
+
+  if (getParentId(id, data)) {
+    arr.push(getParentId(id, data));
+    getAncestorIds(getParentId(id, data), data, arr);
+  }
+
+  return arr;
+};
+
+export { getAncestorIds, getParentId };
+//# sourceMappingURL=util.js.map

package/lib/esm/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../src/util.ts"],"sourcesContent":[null],"names":["getParentId","id","data","parentId","forEach","item","children","some","getAncestorIds","arr","push"],"mappings":";;;;;;;;;AAAA;IACaA,WAAW,GAAG,SAAdA,WAAc,CAACC,EAAD,EAAsBC,IAAtB;MACrBC,QAAQ,GAAG;AACfD,EAAAA,IAAI,CAACE,OAALF,CAAa,UAACG,IAAD;QACPA,IAAI,CAACC,UAAU;UACbD,IAAI,CAACC,QAALD,CAAcE,IAAdF,CAAmB,UAACA,IAAD;eAA+BA,IAAI,CAACJ,EAALI,KAAYJ;AAA9D,OAAAI,GAAmE;AACrEF,QAAAA,QAAQ,GAAGE,IAAI,CAACJ,EAAhBE;AADF,aAEO,IAAIH,WAAW,CAACC,EAAD,EAAKI,IAAI,CAACC,QAAV,CAAf,EAAoC;AACzCH,QAAAA,QAAQ,GAAGH,WAAW,CAACC,EAAD,EAAKI,IAAI,CAACC,QAAV,CAAtBH;;;AALN,GAAAD;SASOC;;;;IAIIK,cAAc,GAAG,SAAjBA,cAAiB,CAC5BP,EAD4B,EAE5BC,IAF4B,EAG5BO,GAH4B;MAG5BA;AAAAA,IAAAA,MAA2B,EAA3BA;;;MAEIT,WAAW,CAACC,EAAD,EAAKC,IAAL,GAAY;AACzBO,IAAAA,GAAG,CAACC,IAAJD,CAAST,WAAW,CAACC,EAAD,EAAKC,IAAL,CAApBO;AACAD,IAAAA,cAAc,CAACR,WAAW,CAACC,EAAD,EAAKC,IAAL,CAAZ,EAAwBA,IAAxB,EAA8BO,GAA9B,CAAdD;;;SAEKC;;;"}

package/lib/types/Expander.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const Expander: React.FC<ExpanderProps>;
+interface ExpanderProps {
+    className?: string;
+    visible: boolean;
+}
+export {};

package/lib/types/Menu.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+/**
+ * TODO: What is Menu
+ */
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement | null>>;
+export declare type MenuItemProps = {
+    /**
+     * 组件默认的选择器类
+     */
+    prefixCls?: string;
+    content: React.ReactNode;
+    icon?: React.ReactNode;
+    id: string | number;
+    disabled?: boolean;
+    children?: MenuItemProps[];
+    level: number;
+    parentIds: React.ReactText[];
+};
+export interface MenuProps {
+    /**
+     * 组件默认的选择器类
+     */
+    prefixCls?: string;
+    /**
+     * 组件的语义化 Role 属性
+     */
+    role?: string;
+    /**
+     * 组件的注入选择器类
+     */
+    className?: string;
+    /**
+     * 组件的注入样式
+     */
+    data: MenuItemProps[];
+    activeId?: string | number;
+    placement?: 'horizontal' | 'vertical';
+    collapsed?: boolean;
+    showCollapse?: boolean;
+    showAllSubMenus?: boolean;
+    accordion?: boolean;
+    style?: React.CSSProperties;
+    onClick?: (menuId: React.ReactText) => void;
+    onClickSubMenu?: (subMenuId: React.ReactText) => void;
+    onCollapse?: (collapsed: boolean) => void;
+    overlayClassName?: string;
+    expandedType: 'default' | 'pop';
+    defaultExpandedIds: React.ReactText[];
+    defaultActiveId: React.ReactText;
+}

package/lib/types/MenuItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { MenuItemProps } from './Menu';
+export declare const MenuItem: React.FC<MenuItemProps>;

package/lib/types/context.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+declare const MenuContext: React.Context<{
+    placement?: "vertical" | "horizontal" | undefined;
+    expandedType?: "default" | "pop" | undefined;
+    showAllSubMenus?: boolean | undefined;
+    mini?: boolean | undefined;
+    expandedIds?: React.ReactText[] | undefined;
+    activeId?: React.ReactText | undefined;
+    activeParents?: React.ReactText[] | undefined;
+    clickMenu?: ((id: React.ReactText) => void) | undefined;
+    clickSubMenu?: ((id: React.ReactText) => void) | undefined;
+    closePopper?: ((id: React.ReactText) => void) | undefined;
+    closeAllPopper?: (() => void) | undefined;
+}>;
+export default MenuContext;

package/lib/types/index.d.ts

@@ -0,0 +1,3 @@
+import './styles/index.scss';
+export * from './Menu';
+export { Menu as default } from './Menu';

package/lib/types/types.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface MenuDataItem {
+    /**
+     * 节点唯一 id
+     */
+    id: React.ReactText;
+    /**
+     * 节点标题
+     */
+    title: React.ReactNode;
+}

package/lib/types/util.d.ts

@@ -0,0 +1,2 @@
+export declare const getParentId: (id: string | number, data: Record<string, any>[]) => string | number;
+export declare const getAncestorIds: (id: string | number, data: Record<string, any>[], arr?: (string | number)[]) => (string | number)[];

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@hi-ui/menu",
+  "version": "4.0.0-alpha.1",
+  "description": "A sub-package for @hi-ui/hiui.",
+  "keywords": [],
+  "author": "HIUI <mi-hiui@xiaomi.com>",
+  "homepage": "https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme",
+  "license": "MIT",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "types": "lib/types/index.d.ts",
+  "typings": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "default": "./lib/esm/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XiaoMi/hiui.git"
+  },
+  "scripts": {
+    "test": "jest",
+    "clean": "rimraf lib",
+    "prebuild": "yarn clean",
+    "build:esm": "hi-build ./src/index.ts --format esm -d ./lib/esm",
+    "build:cjs": "hi-build ./src/index.ts --format cjs -d ./lib/cjs",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
+    "build": "concurrently yarn:build:*"
+  },
+  "bugs": {
+    "url": "https://github.com/XiaoMi/hiui/issues"
+  },
+  "dependencies": {
+    "@hi-ui/classname": "^4.0.0-alpha.0",
+    "@hi-ui/core": "^4.0.0-alpha.8",
+    "@hi-ui/core-css": "^4.0.0-alpha.6",
+    "@hi-ui/env": "^4.0.0-alpha.0",
+    "@hi-ui/icons": "^4.0.0-alpha.13",
+    "@hi-ui/popper": "^4.0.0-alpha.11",
+    "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.8",
+    "react-transition-group": "^4.4.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "@hi-ui/hi-build": "^4.0.0-alpha.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "gitHead": "689ef7c6b19089bf0aa818978c70da1e27714e6b"
+}