@sheinx/base 3.2.0-rc.4 → 3.2.0

package/cjs/menu/item.js

@@ -1,37 +1,59 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("@sheinx/hooks");
 var _icons = _interopRequireDefault(require("../icons"));
 var _config = require("../config");
+var _popover = _interopRequireDefault(require("../../src/popover"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var MenuItem = function MenuItem(props) {
   var _props$jssStyle, _props$jssStyle$menu;
   var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
   var children = props.dataItem.children || [];
-  var itemContentRef = (0, _react.useRef)(null);
-  var timer = (0, _react.useRef)(null);
   var _props$inlineIndent = props.inlineIndent,
     inlineIndent = _props$inlineIndent === void 0 ? 24 : _props$inlineIndent,
     _props$frontCaretType = props.frontCaretType,
     frontCaretType = _props$frontCaretType === void 0 ? 'solid' : _props$frontCaretType,
-    collapse = props.collapse;
+    mode = props.mode,
+    _props$toggleDuration = props.toggleDuration,
+    toggleDuration = _props$toggleDuration === void 0 ? 50 : _props$toggleDuration;
   var config = (0, _config.useConfig)();
+  var shoudPop = mode === 'vertical' || mode === 'vertical-auto' || mode === 'horizontal';
+  var isVertical = mode === 'vertical' || mode === 'vertical-auto';
+  var isSubHorizontal = mode === 'horizontal' && props.level > 0;
+  var isRootHorizontal = mode === 'horizontal' && props.level === 0;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    popOpen = _useState2[0],
+    setOpen = _useState2[1];
   var hasExpandAbleChildren = children.some(function (item) {
     return item && item.children && (props.looseChildren || item.children.length);
   });
+  var handleVisibleChange = (0, _hooks.usePersistFn)(function (visible) {
+    if (isRootHorizontal) {
+      setOpen(visible);
+    }
+  });
   var _useMenuItem = (0, _hooks.useMenuItem)({
       dataItem: props.dataItem,
       keyResult: props.keyResult,
@@ -44,7 +66,6 @@ var MenuItem = function MenuItem(props) {
       parentId: props.parentId,
       looseChildren: props.looseChildren,
       parentSelectable: props.parentSelectable,
-      toggleDuration: props.toggleDuration,
       disabled: props.disabled,
       mode: props.mode,
       scrollRef: props.scrollRef
@@ -60,41 +81,109 @@ var MenuItem = function MenuItem(props) {
     handleItemClick = _useMenuItem.handleItemClick,
     handleMouseEnter = _useMenuItem.handleMouseEnter,
     handleMouseLeave = _useMenuItem.handleMouseLeave;
+  var renderChildren = function renderChildren() {
+    var _items;
+    var items = children;
+    var isTitle = false;
+    if (!((_items = items) !== null && _items !== void 0 && _items.length)) {
+      if (props.level === 0 && props.collapse && shoudPop) {
+        items = [props.dataItem];
+        isTitle = true;
+      } else {
+        return null;
+      }
+    }
+    var content = function content(close) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: (0, _classnames.default)(shoudPop && (classes === null || classes === void 0 ? void 0 : classes.childrenShow), classes === null || classes === void 0 ? void 0 : classes.children, isUp && (classes === null || classes === void 0 ? void 0 : classes.childrenUp), hasExpandAbleChildren && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand))
+        // 子菜单点击弹出
+        ,
+        onClick: close,
+        dir: config.direction,
+        children: items.map(function (item, index) {
+          var key = _hooks.util.getKey(props.keygen, item, index);
+          return /*#__PURE__*/(0, _react.createElement)(MenuItem, _objectSpread(_objectSpread({}, props), {}, {
+            mode: mode,
+            parentId: id,
+            dataItem: item,
+            key: key,
+            index: index,
+            keyResult: key,
+            level: props.level + 1,
+            renderIcon: isTitle ? undefined : props.renderIcon
+          }));
+        })
+      });
+    };
+    if (shoudPop) {
+      var position = isVertical || isSubHorizontal ? isUp ? 'right-bottom' : 'right-top' : 'bottom';
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.default, {
+        mouseLeaveDelay: toggleDuration,
+        className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.popover),
+        attributes: _hooks.util.getDataAttribute({
+          theme: props.theme || 'light',
+          mode: isVertical ? 'vertical' : mode
+        }),
+        onVisibleChange: handleVisibleChange,
+        jssStyle: props.jssStyle,
+        arrowClass: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.popArrow, props.theme === 'dark' && (classes === null || classes === void 0 ? void 0 : classes.popArrowDark)),
+        showArrow: mode !== 'horizontal',
+        position: position,
+        lazy: false,
+        children: function children(close) {
+          return content(close);
+        }
+      });
+    }
+    return content();
+  };
   var renderItem = function renderItem() {
+    var icon = _hooks.util.isFunc(props.renderIcon) ? props.renderIcon(props.dataItem) : null;
+    var iconEl = icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes === null || classes === void 0 ? void 0 : classes.titleIcon,
+      children: icon
+    }) : null;
+    var indent = props.mode === 'inline' && props.level ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: props.level * inlineIndent,
+        flexShrink: 0
+      }
+    }) : null;
     var item = _hooks.util.render(props.renderItem, props.dataItem, props.index);
     var link = props.linkKey ? _hooks.util.getKey(props.linkKey, props.dataItem, props.index) : undefined;
     var title = null;
     if (_hooks.util.isLink(item)) {
       var mergeClass = (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.title, item.props && item.props.className);
       title = /*#__PURE__*/(0, _react.cloneElement)(item, {
-        className: mergeClass
+        className: mergeClass,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [indent, iconEl, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: classes === null || classes === void 0 ? void 0 : classes.titleContent,
+            children: item.props.children
+          })]
+        })
       });
     } else {
       var linkProps = {
         className: classes === null || classes === void 0 ? void 0 : classes.title,
         href: link
       };
-      title = /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
-        children: _hooks.util.wrapSpan(item)
+      title = /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+        children: [indent, iconEl, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes === null || classes === void 0 ? void 0 : classes.titleContent,
+          children: _hooks.util.wrapSpan(item)
+        })]
       }));
     }
-    var indent = props.mode === 'inline' && props.level ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        width: props.level * inlineIndent,
-        flexShrink: 0
-      }
-    }) : null;
-    var isFirstCollapseItem = collapse && props.level === 0;
     if (props.frontCaret) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        ref: itemContentRef,
-        className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentFront, isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.itemContentHide)),
+        className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentFront),
         onClick: handleItemClick,
-        children: [indent, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: {
             color: props.caretColor
           },
-          className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandFront, props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
+          className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandFront, (isVertical || isSubHorizontal) && (classes === null || classes === void 0 ? void 0 : classes.expandVertical), props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
           onClick: handleExpandClick,
           dir: config.direction,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -105,15 +194,14 @@ var MenuItem = function MenuItem(props) {
       });
     } else {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        ref: itemContentRef,
-        className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentBack, isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.itemContentHide)),
+        className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentBack),
         onClick: handleItemClick,
-        children: [indent, title, expandAble && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [title, expandAble && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           onClick: handleExpandClick,
           style: {
             color: props.caretColor
           },
-          className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandBack, props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
+          className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandBack, (isVertical || isSubHorizontal) && (classes === null || classes === void 0 ? void 0 : classes.expandVertical), props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
           dir: config.direction,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: classes === null || classes === void 0 ? void 0 : classes.icon,
@@ -123,50 +211,12 @@ var MenuItem = function MenuItem(props) {
       });
     }
   };
-  var renderCollapseItem = function renderCollapseItem() {
-    if (!props.renderCollapse) return null;
-    var isFirstCollapseItem = props.level === 0 && collapse;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.collapseItem, isInPath && (classes === null || classes === void 0 ? void 0 : classes.collapseItemInPath), !isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.collapseItemHide)),
-      onClick: handleItemClick,
-      children: props.renderCollapse(props.dataItem, props.index)
-    });
-  };
-  (0, _react.useEffect)(function () {
-    if (!itemContentRef.current) return;
-    if (collapse === undefined) return;
-    if (timer.current) clearTimeout(timer.current);
-    itemContentRef.current.style.overflow = 'hidden';
-    itemContentRef.current.style.whiteSpace = 'nowrap';
-    timer.current = setTimeout(function () {
-      if (!itemContentRef.current) return;
-      itemContentRef.current.style.overflow = '';
-      itemContentRef.current.style.whiteSpace = '';
-    }, 300);
-    return function () {
-      if (timer.current) clearTimeout(timer.current);
-    };
-  }, [collapse]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-    className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.item, isDisabled && (classes === null || classes === void 0 ? void 0 : classes.itemDisabled), isInPath && (classes === null || classes === void 0 ? void 0 : classes.itemInPath), isOpen && (classes === null || classes === void 0 ? void 0 : classes.itemOpen), isChecked && (classes === null || classes === void 0 ? void 0 : classes.itemActive), expandAble && (classes === null || classes === void 0 ? void 0 : classes.itemHasChildren)),
+    className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.item, isDisabled && (classes === null || classes === void 0 ? void 0 : classes.itemDisabled), isInPath && (classes === null || classes === void 0 ? void 0 : classes.itemInPath), (isOpen || popOpen) && (classes === null || classes === void 0 ? void 0 : classes.itemOpen), isChecked && (classes === null || classes === void 0 ? void 0 : classes.itemActive), expandAble && (classes === null || classes === void 0 ? void 0 : classes.itemHasChildren)),
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     dir: config.direction,
-    children: [renderItem(), renderCollapseItem(), children.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.children, isUp && (classes === null || classes === void 0 ? void 0 : classes.childrenUp), hasExpandAbleChildren && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand)),
-      dir: config.direction,
-      children: children.map(function (item, index) {
-        var key = _hooks.util.getKey(props.keygen, item, index);
-        return /*#__PURE__*/(0, _react.createElement)(MenuItem, _objectSpread(_objectSpread({}, props), {}, {
-          parentId: id,
-          dataItem: item,
-          key: key,
-          index: index,
-          keyResult: key,
-          level: props.level + 1
-        }));
-      })
-    })]
+    children: [renderItem(), renderChildren()]
   });
 };
 var _default = exports.default = MenuItem;

package/cjs/menu/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGlD,QAAA,MAAM,IAAI,sFAiHT,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGlD,QAAA,MAAM,IAAI,sFAqIT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/cjs/menu/menu.js

@@ -9,7 +9,6 @@ var _react = require("react");
 var _hooks = require("@sheinx/hooks");
 var _item = _interopRequireDefault(require("./item"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _scroll = _interopRequireDefault(require("./scroll"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -22,10 +21,10 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 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; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // import Scroll from './scroll';
 var emptyArray = [];
 var Menu = function Menu(props) {
-  var _props$jssStyle, _props$jssStyle$menu, _props$style;
+  var _props$jssStyle, _props$jssStyle$menu;
   var _props$data = props.data,
     data = _props$data === void 0 ? emptyArray : _props$data,
     _props$mode = props.mode,
@@ -33,24 +32,32 @@ var Menu = function Menu(props) {
     _props$theme = props.theme,
     theme = _props$theme === void 0 ? 'light' : _props$theme,
     collapse = props.collapse;
-  var mode = collapse ? 'vertical' : modeProps;
+  var render = (0, _hooks.useRender)();
+
+  // const [inTransition, setInTransition] = useState(false);
+  var mode = collapse ? 'vertical-auto' : modeProps;
+  var _useRef = (0, _react.useRef)({
+      inTransition: false,
+      lastCollapse: !!props.collapse
+    }),
+    context = _useRef.current;
+  if (props.mode !== 'horizontal' && !!context.lastCollapse !== !!collapse) {
+    context.inTransition = true;
+    context.lastCollapse = !!props.collapse;
+  }
   var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
   var isVertical = mode === 'vertical' || mode === 'vertical-auto';
-  var isHorizontal = mode === 'horizontal';
+  // const isHorizontal = mode === 'horizontal';
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasOpen = _useState2[0],
     setHasOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    collapseOpenKeys = _useState4[0],
-    setCollapseOpenKeys = _useState4[1];
   var _useMenu = (0, _hooks.useMenu)({
       data: data,
       active: props.active,
       defaultOpenKeys: props.defaultOpenKeys,
-      openKeys: props.collapse ? collapseOpenKeys : props.openKeys,
-      onOpenChange: props.collapse ? setCollapseOpenKeys : props.onOpenChange
+      openKeys: props.openKeys,
+      onOpenChange: props.onOpenChange
     }),
     openKeys = _useMenu.openKeys,
     onOpenChange = _useMenu.onOpenChange,
@@ -61,12 +68,19 @@ var Menu = function Menu(props) {
   var hasExpand = data.some(function (item) {
     return item && item.children && (props.looseChildren || item.children.length);
   });
-  var showScrollBar = isHorizontal || isVertical;
-  var style = _objectSpread({}, props.style);
-  if (collapse) delete style.width;
-  var listStyle = isVertical && !collapse ? {
-    width: (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.width
-  } : undefined;
+
+  // const showScrollBar = isHorizontal || isVertical;
+
+  var renderHeader = function renderHeader() {
+    if (modeProps === 'horizontal') return;
+    if (props.header) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes === null || classes === void 0 ? void 0 : classes.header,
+        children: props.header
+      });
+    }
+    return null;
+  };
   (0, _react.useEffect)(function () {
     var newOpen = (openKeys || []).filter(function (k) {
       return data.find(function (d, i) {
@@ -77,24 +91,32 @@ var Menu = function Menu(props) {
       setHasOpen(newOpen);
     }
   }, [data, openKeys]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)(props.className, classes === null || classes === void 0 ? void 0 : classes.wrapper, mode === 'inline' && (classes === null || classes === void 0 ? void 0 : classes.wrapperInline), (mode === 'vertical' || mode === 'vertical-auto') && (classes === null || classes === void 0 ? void 0 : classes.wrapperVertical), mode === 'horizontal' && (classes === null || classes === void 0 ? void 0 : classes.wrapperHorizontal), hasOpen && (classes === null || classes === void 0 ? void 0 : classes.wrapperHasOpen), theme === 'dark' ? classes === null || classes === void 0 ? void 0 : classes.wrapperDark : classes === null || classes === void 0 ? void 0 : classes.wrapperLight, collapse && (classes === null || classes === void 0 ? void 0 : classes.collapse)),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+    className: (0, _classnames.default)(props.className, classes === null || classes === void 0 ? void 0 : classes.wrapper, mode === 'inline' && (classes === null || classes === void 0 ? void 0 : classes.wrapperInline), (mode === 'vertical' || mode === 'vertical-auto') && (classes === null || classes === void 0 ? void 0 : classes.wrapperVertical), mode === 'horizontal' && (classes === null || classes === void 0 ? void 0 : classes.wrapperHorizontal), hasOpen && (classes === null || classes === void 0 ? void 0 : classes.wrapperHasOpen), theme === 'dark' ? classes === null || classes === void 0 ? void 0 : classes.wrapperDark : classes === null || classes === void 0 ? void 0 : classes.wrapperLight, collapse && (classes === null || classes === void 0 ? void 0 : classes.wrapperCollpase), context.inTransition && (classes === null || classes === void 0 ? void 0 : classes.wrapperInTransition))
+  }, _hooks.util.getDataAttribute({
+    theme: theme,
+    mode: isVertical ? 'vertical' : mode
+  })), {}, {
     style: _objectSpread({
       height: props.height
-    }, style),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }, props.style),
+    onTransitionEnd: function onTransitionEnd(e) {
+      if (e.target === e.currentTarget) {
+        context.inTransition = false;
+        render();
+      }
+    },
+    children: [renderHeader(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes === null || classes === void 0 ? void 0 : classes.scrollbox,
       ref: scrollRef,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
         className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.root, hasExpand && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand)),
-        style: listStyle,
         children: data.map(function (item, index) {
           var key = _hooks.util.getKey(props.keygen, item, index);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
             level: 0,
             index: index,
             parentId: "",
-            collapse: collapse,
             dataItem: item,
             keyResult: key,
             openKeys: openKeys,
@@ -109,7 +131,6 @@ var Menu = function Menu(props) {
             toggleDuration: props.toggleDuration,
             disabled: props.disabled,
             renderItem: props.renderItem,
-            renderCollapse: props.renderCollapse,
             keygen: props.keygen,
             jssStyle: props.jssStyle,
             linkKey: props.linkKey,
@@ -117,16 +138,14 @@ var Menu = function Menu(props) {
             frontCaretType: props.frontCaretType,
             caretColor: props.caretColor,
             inlineIndent: props.inlineIndent,
-            scrollRef: scrollRef
+            scrollRef: scrollRef,
+            theme: theme,
+            renderIcon: props.renderIcon,
+            collapse: collapse
           }, key);
         })
       })
-    }), showScrollBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_scroll.default, {
-      targetRef: scrollRef,
-      direction: mode === 'vertical' || mode === 'vertical-auto' ? 'y' : 'x',
-      data: data,
-      jssStyle: props.jssStyle
     })]
-  });
+  }));
 };
 var _default = exports.default = Menu;

package/cjs/menu/menu.type.d.ts

@@ -2,6 +2,7 @@
 import type { UseMenuItemProps } from '@sheinx/hooks';
 import { KeygenResult, KeygenType, ObjectKey } from '@sheinx/hooks';
 import { CommonType } from '../common/type';
+import { PopoverJssStyle } from '../popover/popover.type';
 export type MenuMode = 'inline' | 'vertical' | 'horizontal' | 'vertical-auto';
 export interface MenuClasses {
     wrapper: string;
@@ -11,28 +12,30 @@ export interface MenuClasses {
     wrapperHasOpen: string;
     wrapperLight: string;
     wrapperDark: string;
-    collapse: string;
+    wrapperCollpase: string;
+    wrapperInTransition: string;
+    header: string;
     root: string;
     children: string;
+    childrenShow: string;
     childrenUp: string;
     item: string;
-    collapseItem: string;
-    collapseItemInPath: string;
-    collapseItemHide: string;
     itemActive: string;
     itemDisabled: string;
     itemOpen: string;
     itemInPath: string;
     itemHasChildren: string;
     itemContent: string;
-    itemContentHide: string;
     itemContentFront: string;
     itemContentBack: string;
     title: string;
+    titleIcon: string;
+    titleContent: string;
     expand: string;
     expandFront: string;
     expandBack: string;
     expandHover: string;
+    expandVertical: string;
     scrollbar: string;
     scrollbarX: string;
     scrollbarY: string;
@@ -41,10 +44,13 @@ export interface MenuClasses {
     scrollbox: string;
     icon: string;
     childrenHasExpand: string;
+    popover?: string;
+    popArrow?: string;
+    popArrowDark?: string;
 }
-export type MenuJssStyle = {
+export interface MenuJssStyle extends PopoverJssStyle {
     menu?: () => MenuClasses;
-};
+}
 /**
  * @title Menu
  */
@@ -67,7 +73,7 @@ export interface MenuProps<DataItem, Key extends KeygenResult = KeygenResult> ex
      * @en theme of menu
      * @cn 主题
      */
-    theme?: 'dark';
+    theme?: 'dark' | 'light';
     /**
      * @en menu height
      * @cn 菜单高度
@@ -164,22 +170,25 @@ export interface MenuProps<DataItem, Key extends KeygenResult = KeygenResult> ex
      */
     renderItem?: ((data: DataItem, index: number) => React.ReactNode) | ObjectKey<DataItem>;
     /**
-     * @en Whether to collapse the menu horizontally
-     * @cn 是否水平折叠收起菜单
+     * @cn 渲染Icon
+     * @en Render Icon
+     */
+    renderIcon?: (data: DataItem) => React.ReactNode;
+    /**
+     * @cn 是否折叠
+     * @en Whether to collapse
      * @default false
      */
     collapse?: boolean;
     /**
-     *
-     * @cn 折叠时的渲染方式,如果为字符串,则会以对应的值作为显示内容;如果为函数,则以函数返回的结果作为显示内容,函数参数为对应的数据对象
-     * @en Element render mode when collapsed. If it is a string, the corresponding value is taken as the display content; If it is a function, the result returned by the function is taken as the display content.
-     * @default null
+     * @cn 头部内容， 仅在 mode为 'inline' 时生效
      */
-    renderCollapse?: (data: DataItem, index: number) => React.ReactNode;
+    header?: React.ReactNode;
 }
-export interface MenuItemProps extends UseMenuItemProps, Pick<MenuProps<any, any>, 'renderItem' | 'keygen' | 'linkKey' | 'frontCaret' | 'frontCaretType' | 'caretColor' | 'jssStyle' | 'inlineIndent' | 'collapse' | 'renderCollapse'> {
+export interface MenuItemProps extends UseMenuItemProps, Pick<MenuProps<any, any>, 'renderItem' | 'keygen' | 'linkKey' | 'frontCaret' | 'frontCaretType' | 'caretColor' | 'jssStyle' | 'inlineIndent' | 'theme' | 'renderIcon'> {
     index: number;
     level: number;
     scrollRef: React.MutableRefObject<HTMLDivElement | null>;
+    collapse?: boolean;
 }
 //# sourceMappingURL=menu.type.d.ts.map

package/cjs/menu/menu.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.type.d.ts","sourceRoot":"","sources":["menu.type.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu.type.d.ts","sourceRoot":"","sources":["menu.type.ts"],"names":[],"mappings":"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"}

package/cjs/menu/search.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { MenuSearchProps } from './search.type';
+declare const Search: (props: MenuSearchProps) => JSX.Element;
+export default Search;
+//# sourceMappingURL=search.d.ts.map

package/cjs/menu/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["search.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKhD,QAAA,MAAM,MAAM,UAAW,eAAe,gBAqCrC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/cjs/menu/search.js

@@ -0,0 +1,53 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _input = require("../input");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _icons = _interopRequireDefault(require("../icons"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["tip", "status", "innerTitle", "placeTitle", "onSearchClick", "collpase", "theme", "jssStyle", "className", "style"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Search = function Search(props) {
+  var _jssStyle$menuSearch;
+  var _tip = props.tip,
+    _status = props.status,
+    _innerTitle = props.innerTitle,
+    _placeTitle = props.placeTitle,
+    onSearchClick = props.onSearchClick,
+    collpase = props.collpase,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'light' : _props$theme,
+    jssStyle = props.jssStyle,
+    className = props.className,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var classes = jssStyle === null || jssStyle === void 0 || (_jssStyle$menuSearch = jssStyle.menuSearch) === null || _jssStyle$menuSearch === void 0 ? void 0 : _jssStyle$menuSearch.call(jssStyle);
+  var Search = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes === null || classes === void 0 ? void 0 : classes.search,
+    children: _icons.default.menu.Search
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.wrapper, theme === 'light' && (classes === null || classes === void 0 ? void 0 : classes.wrapperLight), theme === 'dark' && (classes === null || classes === void 0 ? void 0 : classes.wrapperDark), !!rest.disabled && (classes === null || classes === void 0 ? void 0 : classes.wrapperDisabled), collpase && (classes === null || classes === void 0 ? void 0 : classes.wrapperCollapsed), className),
+    style: style,
+    onClick: !props.disabled ? onSearchClick : undefined,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, _objectSpread(_objectSpread({
+      prefix: Search,
+      className: classes === null || classes === void 0 ? void 0 : classes.input
+    }, rest), {}, {
+      jssStyle: jssStyle
+    }))
+  });
+};
+var _default = exports.default = Search;