shineout 3.9.2-beta.1 → 3.9.2-beta.2

package/cjs/index.js

@@ -522,5 +522,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.9.2-beta.1'
+  version: '3.9.2-beta.2'
 };

package/dist/shineout.js

@@ -12400,7 +12400,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.9.2-beta.1');
+/* harmony default export */ var version = ('3.9.2-beta.2');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -21325,17 +21325,21 @@ var menuStyle = {
     flexDirection: 'row'
   },
   wrapperHasOpen: {},
+  wrapperInlineAnimate: {},
   children: {
     padding: '0',
     margin: '0',
-    display: 'none',
     minWidth: '100%',
     whiteSpace: 'nowrap',
-    '$itemOpen > &, $childrenShow&': {
+    '$childrenShow&': {
       display: 'block'
+    },
+    '$childrenHidden&': {
+      display: 'none'
     }
   },
   childrenShow: {},
+  childrenHidden: {},
   childrenUp: {},
   item: {
     listStyle: 'none',
@@ -21344,6 +21348,7 @@ var menuStyle = {
   itemActive: {},
   itemDisabled: {},
   itemOpen: {},
+  itemClosing: {},
   itemInPath: {},
   itemHasChildren: {},
   childrenHasExpand: {},
@@ -21629,8 +21634,14 @@ var menuStyle = {
       alignItems: 'center',
       display: 'flex',
       minHeight: "calc(".concat(src.lineHeightDynamic, " + ").concat(src.menuTitlePaddingY, "*2)"),
+      '$wrapperInlineAnimate$wrapper:not($wrapperVertical) &': {
+        transition: 'transform 240ms cubic-bezier(.2,0,0,1)'
+      },
       '$wrapper:not($wrapperVertical) $itemOpen > $itemContent &': {
         transform: 'rotate(180deg)'
+      },
+      '$wrapper:not($wrapperVertical) $itemClosing > $itemContent &': {
+        transform: 'rotate(0deg)'
       }
     }
   },
@@ -50672,7 +50683,7 @@ var method = function method(type, jssStyle) {
     });
     if (!root) return;
     var destroyModal = function destroyModal() {
-      innerClose();
+      if (innerClose) innerClose();
       setTimeout(function () {
         destroy(root);
       }, 300);
@@ -60510,16 +60521,18 @@ var useMenuItem = function useMenuItem(props) {
 /* harmony default export */ var use_menu_item = (useMenuItem);
 ;// CONCATENATED MODULE: ../hooks/src/common/use-collapse-animation/use-collapse-animation.ts
 
+
 /**
  * 为元素添加折叠/展开动画的 Hook
  *
  * @example
  * ```tsx
  * const ref = useRef<HTMLDivElement>(null);
- * useCollapseAnimation(ref, { isOpen: true });
+ * const { shouldHide, shouldKeepOpen } = useCollapseAnimation(ref, { isOpen: true });
  *
- * return <div ref={ref}>Content</div>;
+ * return <div ref={ref} className={shouldHide ? 'hide' : ''}>Content</div>;
  * ```
+ * @returns 动画状态对象
  */
 function useCollapseAnimation(elementRef, options) {
   var isOpen = options.isOpen,
@@ -60528,8 +60541,17 @@ function useCollapseAnimation(elementRef, options) {
     _options$disabled = options.disabled,
     disabled = _options$disabled === void 0 ? false : _options$disabled,
     _options$timingFuncti = options.timingFunction,
-    timingFunction = _options$timingFuncti === void 0 ? 'cubic-bezier(.2,0,0,1)' : _options$timingFuncti;
+    timingFunction = _options$timingFuncti === void 0 ? 'cubic-bezier(.2,0,0,1)' : _options$timingFuncti,
+    parentOpenClassName = options.parentOpenClassName;
   var isFirstRenderRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(true);
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(!isOpen),
+    _useState2 = slicedToArray_default()(_useState, 2),
+    shouldHide = _useState2[0],
+    setShouldHide = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState4 = slicedToArray_default()(_useState3, 2),
+    isAnimating = _useState4[0],
+    setIsAnimating = _useState4[1];
 
   // 当 disabled 状态变化时，重置首次渲染标记
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
@@ -60537,6 +60559,8 @@ function useCollapseAnimation(elementRef, options) {
       isFirstRenderRef.current = true;
     }
   }, [disabled]);
+
+  // 使用 useLayoutEffect 确保动画状态在 DOM 更新前同步设置
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (!elementRef.current) return;
     var el = elementRef.current;
@@ -60551,9 +60575,6 @@ function useCollapseAnimation(elementRef, options) {
     }
     var timer = null;
 
-    // 设置 display: block，让元素始终可见，由高度控制折叠
-    el.style.display = 'block';
-
     // 首次渲染时，直接设置初始状态，不做动画
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
@@ -60564,9 +60585,13 @@ function useCollapseAnimation(elementRef, options) {
       return;
     }
     if (isOpen) {
-      // 展开动画
+      // 展开动画 - 先显示元素
+      setShouldHide(false);
+      setIsAnimating(true);
+      el.style.display = 'block';
       el.style.height = '0px';
       el.style.overflow = 'hidden';
+      el.style.opacity = '0';
 
       // 强制重绘
       void el.offsetHeight;
@@ -60576,8 +60601,9 @@ function useCollapseAnimation(elementRef, options) {
 
       // 启动动画
       requestAnimationFrame(function () {
-        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
+        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction, ", opacity ").concat(duration, "ms ").concat(timingFunction);
         el.style.height = "".concat(scrollHeight, "px");
+        el.style.opacity = '1';
 
         // 动画结束后恢复 auto
         timer = setTimeout(function () {
@@ -60585,20 +60611,45 @@ function useCollapseAnimation(elementRef, options) {
             el.style.height = '';
             el.style.overflow = '';
             el.style.transition = '';
+            el.style.opacity = '';
+            setIsAnimating(false);
           }
         }, duration);
       });
     } else {
       // 收起动画
+      setIsAnimating(true);
+
+      // 临时添加父元素的 open class,确保用户依赖此 class 的布局样式在获取高度时生效
+      var parentElement = el.parentElement;
+      var needTempClass = parentOpenClassName && parentElement;
+      if (needTempClass) {
+        parentElement.classList.add(parentOpenClassName);
+      }
+
+      // 强制重绘,确保临时 class 生效
+      void el.offsetHeight;
       var _scrollHeight = el.scrollHeight;
       el.style.height = "".concat(_scrollHeight, "px");
       el.style.overflow = 'hidden';
+      el.style.opacity = '1';
 
       // 强制重绘
       void el.offsetHeight;
       requestAnimationFrame(function () {
-        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
+        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction, ", opacity ").concat(duration, "ms ").concat(timingFunction);
         el.style.height = '0px';
+        el.style.opacity = '0';
+
+        // 动画结束后隐藏元素
+        timer = setTimeout(function () {
+          // 移除临时 class
+          if (needTempClass) {
+            parentElement.classList.remove(parentOpenClassName);
+          }
+          setShouldHide(true);
+          setIsAnimating(false);
+        }, duration);
       });
     }
 
@@ -60609,6 +60660,16 @@ function useCollapseAnimation(elementRef, options) {
       }
     };
   }, [isOpen, disabled, duration, timingFunction]);
+  if (disabled) {
+    return {
+      shouldHide: !isOpen,
+      shouldKeepOpen: false
+    };
+  }
+  return {
+    shouldHide: shouldHide,
+    shouldKeepOpen: isAnimating && !isOpen
+  };
 }
 ;// CONCATENATED MODULE: ../base/src/menu/item.tsx
 
@@ -60682,10 +60743,13 @@ var MenuItem = function MenuItem(props) {
     handleMouseLeave = _useMenuItem.handleMouseLeave;
 
   // 为 inline 模式添加折叠动画（仅当 inlineAnimate 为 true 时启用）
-  useCollapseAnimation(childrenRef, {
-    isOpen: isOpen,
-    disabled: !props.inlineAnimate || shoudPop || !children.length
-  });
+  var _useCollapseAnimation = useCollapseAnimation(childrenRef, {
+      isOpen: isOpen,
+      disabled: !props.inlineAnimate || shoudPop || !children.length,
+      parentOpenClassName: classes === null || classes === void 0 ? void 0 : classes.itemOpen
+    }),
+    shouldHideChildren = _useCollapseAnimation.shouldHide,
+    shouldKeepOpen = _useCollapseAnimation.shouldKeepOpen;
   var renderChildren = function renderChildren() {
     var _items;
     var items = children;
@@ -60700,8 +60764,8 @@ var MenuItem = function MenuItem(props) {
     }
     var content = function content(close) {
       return /*#__PURE__*/(0,jsx_runtime.jsx)("ul", {
-        ref: !shoudPop && props.inlineAnimate ? childrenRef : undefined,
-        className: 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))
+        ref: childrenRef,
+        className: 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), shouldHideChildren && (classes === null || classes === void 0 ? void 0 : classes.childrenHidden))
         // 子菜单点击弹出
         ,
         onClick: close,
@@ -60838,7 +60902,7 @@ var MenuItem = function MenuItem(props) {
     }
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("li", {
-    className: 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)),
+    className: 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 || shouldKeepOpen) && (classes === null || classes === void 0 ? void 0 : classes.itemOpen), shouldKeepOpen && (classes === null || classes === void 0 ? void 0 : classes.itemClosing), 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,
@@ -60927,7 +60991,7 @@ var Menu = function Menu(props) {
     }
   }, [data, openKeys]);
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
-    className: classnames_default()(props.className, classes === null || classes === void 0 ? void 0 : classes.rootClass, 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.wrapperCollapse), context.inTransition && (classes === null || classes === void 0 ? void 0 : classes.wrapperInTransition))
+    className: classnames_default()(props.className, classes === null || classes === void 0 ? void 0 : classes.rootClass, 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.wrapperCollapse), context.inTransition && (classes === null || classes === void 0 ? void 0 : classes.wrapperInTransition), props.inlineAnimate && (classes === null || classes === void 0 ? void 0 : classes.wrapperInlineAnimate))
   }, getDataAttribute({
     theme: theme,
     mode: isVertical ? 'vertical' : mode
@@ -74461,7 +74525,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.9.2-beta.1'
+  version: '3.9.2-beta.2'
 });
 }();
 /******/ 	return __webpack_exports__;