@lobehub/ui 2.16.1 → 2.16.3

package/es/DraggableSideNav/DraggableSideNav.js

@@ -1,12 +1,7 @@
 'use client';
 
+var _excluded = ["body", "className", "classNames", "defaultExpand", "defaultWidth", "expand", "expandable", "footer", "header", "maxWidth", "minWidth", "onExpandChange", "onWidthChange", "onWidthDragging", "placement", "resizable", "showBorder", "showHandle", "showHandleWhenCollapsed", "showHandleHighlight", "backgroundColor", "styles", "width"];
 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); }
-var _excluded = ["animation", "children", "className", "classNames", "defaultExpand", "defaultWidth", "expand", "expandable", "footer", "header", "maxWidth", "minWidth", "onExpandChange", "onWidthChange", "onWidthDragging", "placement", "resizable", "showBorder", "showHandle", "showHandleWhenCollapsed", "showHandleHighlight", "backgroundColor", "styles", "width"];
-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); }
@@ -15,11 +10,15 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
+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); }
 import { useHover } from 'ahooks';
-import { AnimatePresence, motion } from 'framer-motion';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { Resizable } from 're-resizable';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 import Icon from "../Icon";
@@ -29,94 +28,120 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度
 var DEFAULT_EXPAND = true;
 var DEFAULT_EXPANDED_WIDTH = 280;
+var ANIMATION_DURATION = 300;
+var COLLAPSE_ANIMATION_DELAY = 200;
 
-// Animation variants generator based on fade and blur settings
-var getAnimationVariants = function getAnimationVariants(fade, blur) {
-  var enterProps = {
-    transition: {
-      duration: 0.3,
-      ease: [0.22, 1, 0.36, 1]
-    }
-  };
-  var exitProps = {
-    transition: {
-      duration: 0.2,
-      ease: [0.4, 0, 1, 1]
-    }
-  };
-  if (fade) {
-    enterProps.opacity = 1;
-    exitProps.opacity = 0;
-  }
-  if (blur) {
-    enterProps.filter = 'blur(0px)';
-    exitProps.filter = 'blur(4px)';
-  }
-  return {
-    enter: enterProps,
-    exit: exitProps
-  };
+// Pre-define static objects to avoid recreating
+var RESIZE_DISABLED = {
+  bottom: false,
+  bottomLeft: false,
+  bottomRight: false,
+  left: false,
+  right: false,
+  top: false,
+  topLeft: false,
+  topRight: false
 };
 
-// Wrapper component for content animation
-var AnimationWrapper = /*#__PURE__*/memo(function (_ref) {
-  var blur = _ref.blur,
-    children = _ref.children,
-    enabled = _ref.enabled,
+// State reducer for better state management
+
+function sideNavReducer(state, action) {
+  switch (action.type) {
+    case 'START_RESIZE':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isResizing: true
+        });
+      }
+    case 'STOP_RESIZE':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isResizing: false
+        });
+      }
+    case 'START_ANIMATION':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isAnimating: true
+        });
+      }
+    case 'STOP_ANIMATION':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isAnimating: false
+        });
+      }
+    case 'SET_WIDTH':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          internalWidth: action.payload
+        });
+      }
+    case 'SET_EXPANDED_WIDTH':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          expandedWidth: action.payload
+        });
+      }
+    case 'SET_RENDER_EXPAND':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          renderExpand: action.payload
+        });
+      }
+    case 'ANIMATE_EXPAND':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          internalWidth: action.payload,
+          renderExpand: true
+        });
+      }
+    case 'ANIMATE_COLLAPSE':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          internalWidth: action.payload
+        });
+      }
+    default:
+      {
+        return state;
+      }
+  }
+}
+var DraggableSideNav = /*#__PURE__*/memo(function (_ref) {
+  var body = _ref.body,
+    className = _ref.className,
+    classNames = _ref.classNames,
+    _ref$defaultExpand = _ref.defaultExpand,
+    defaultExpand = _ref$defaultExpand === void 0 ? DEFAULT_EXPAND : _ref$defaultExpand,
+    defaultWidth = _ref.defaultWidth,
     expand = _ref.expand,
-    fade = _ref.fade,
-    id = _ref.id;
-  if (!enabled) return children;
-  var variants = getAnimationVariants(fade, blur);
-  return /*#__PURE__*/_jsx(AnimatePresence, {
-    initial: false,
-    mode: "wait",
-    children: /*#__PURE__*/_jsx(motion.div, {
-      animate: "enter",
-      exit: "exit",
-      initial: "exit",
-      variants: variants,
-      children: children
-    }, "".concat(id, "-").concat(expand ? 'expanded' : 'collapsed'))
-  });
-});
-AnimationWrapper.displayName = 'AnimationWrapper';
-var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
-  var _animation$blur, _animation$fade, _animation$blur2, _animation$fade2, _animation$blur3, _animation$fade3;
-  var animation = _ref2.animation,
-    children = _ref2.children,
-    className = _ref2.className,
-    classNames = _ref2.classNames,
-    _ref2$defaultExpand = _ref2.defaultExpand,
-    defaultExpand = _ref2$defaultExpand === void 0 ? DEFAULT_EXPAND : _ref2$defaultExpand,
-    defaultWidth = _ref2.defaultWidth,
-    expand = _ref2.expand,
-    _ref2$expandable = _ref2.expandable,
-    expandable = _ref2$expandable === void 0 ? true : _ref2$expandable,
-    footer = _ref2.footer,
-    header = _ref2.header,
-    maxWidth = _ref2.maxWidth,
-    _ref2$minWidth = _ref2.minWidth,
-    minWidth = _ref2$minWidth === void 0 ? DEFAULT_MIN_WIDTH : _ref2$minWidth,
-    onExpandChange = _ref2.onExpandChange,
-    onWidthChange = _ref2.onWidthChange,
-    onWidthDragging = _ref2.onWidthDragging,
-    _ref2$placement = _ref2.placement,
-    placement = _ref2$placement === void 0 ? 'left' : _ref2$placement,
-    _ref2$resizable = _ref2.resizable,
-    resizable = _ref2$resizable === void 0 ? true : _ref2$resizable,
-    _ref2$showBorder = _ref2.showBorder,
-    showBorder = _ref2$showBorder === void 0 ? true : _ref2$showBorder,
-    _ref2$showHandle = _ref2.showHandle,
-    showHandle = _ref2$showHandle === void 0 ? true : _ref2$showHandle,
-    _ref2$showHandleWhenC = _ref2.showHandleWhenCollapsed,
-    showHandleWhenCollapsed = _ref2$showHandleWhenC === void 0 ? false : _ref2$showHandleWhenC,
-    _ref2$showHandleHighl = _ref2.showHandleHighlight,
-    showHandleHighlight = _ref2$showHandleHighl === void 0 ? false : _ref2$showHandleHighl,
-    backgroundColor = _ref2.backgroundColor,
-    customStyles = _ref2.styles,
-    width = _ref2.width,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+    _ref$expandable = _ref.expandable,
+    expandable = _ref$expandable === void 0 ? true : _ref$expandable,
+    footer = _ref.footer,
+    header = _ref.header,
+    maxWidth = _ref.maxWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? DEFAULT_MIN_WIDTH : _ref$minWidth,
+    onExpandChange = _ref.onExpandChange,
+    onWidthChange = _ref.onWidthChange,
+    onWidthDragging = _ref.onWidthDragging,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'left' : _ref$placement,
+    _ref$resizable = _ref.resizable,
+    resizable = _ref$resizable === void 0 ? true : _ref$resizable,
+    _ref$showBorder = _ref.showBorder,
+    showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder,
+    _ref$showHandle = _ref.showHandle,
+    showHandle = _ref$showHandle === void 0 ? true : _ref$showHandle,
+    _ref$showHandleWhenCo = _ref.showHandleWhenCollapsed,
+    showHandleWhenCollapsed = _ref$showHandleWhenCo === void 0 ? false : _ref$showHandleWhenCo,
+    _ref$showHandleHighli = _ref.showHandleHighlight,
+    showHandleHighlight = _ref$showHandleHighli === void 0 ? false : _ref$showHandleHighli,
+    backgroundColor = _ref.backgroundColor,
+    customStyles = _ref.styles,
+    width = _ref.width,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       backgroundColor: backgroundColor,
       showBorder: showBorder
@@ -134,52 +159,59 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     isExpand = _useControlledState2[0],
     setIsExpand = _useControlledState2[1];
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isResizing = _useState2[0],
-    setIsResizing = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isAnimating = _useState4[0],
-    setIsAnimating = _useState4[1];
-
-  // Compute default expanded width
-  var computedDefaultExpandedWidth = defaultWidth || DEFAULT_EXPANDED_WIDTH;
-
-  // 内部宽度状态，用于平滑动画
-  var _useState5 = useState(isExpand ? width !== null && width !== void 0 ? width : computedDefaultExpandedWidth : minWidth),
-    _useState6 = _slicedToArray(_useState5, 2),
-    internalWidth = _useState6[0],
-    setInternalWidth = _useState6[1];
-
-  // 记住展开时的宽度
-  var _useState7 = useState(width !== null && width !== void 0 ? width : computedDefaultExpandedWidth),
-    _useState8 = _slicedToArray(_useState7, 2),
-    expandedWidth = _useState8[0],
-    setExpandedWidth = _useState8[1];
-
-  // 用于渲染的 expand 状态 - 延迟切换以匹配动画时机
-  var _useState9 = useState(isExpand),
-    _useState10 = _slicedToArray(_useState9, 2),
-    renderExpand = _useState10[0],
-    setRenderExpand = _useState10[1];
+
+  // Use refs for animation timeouts to avoid memory leaks
+  var animationTimeoutRef = useRef(undefined);
+  var collapseTimeoutRef = useRef(undefined);
+
+  // Compute default expanded width - memoize to avoid recalculation
+  var computedDefaultExpandedWidth = useMemo(function () {
+    return defaultWidth || DEFAULT_EXPANDED_WIDTH;
+  }, [defaultWidth]);
+
+  // Initialize state with useReducer for better performance
+  var initialState = {
+    expandedWidth: width !== null && width !== void 0 ? width : computedDefaultExpandedWidth,
+    internalWidth: isExpand ? width !== null && width !== void 0 ? width : computedDefaultExpandedWidth : minWidth,
+    isAnimating: false,
+    isResizing: false,
+    renderExpand: isExpand
+  };
+  var _useReducer = useReducer(sideNavReducer, initialState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
 
   // 计算折叠阈值：展开最小宽度和折叠宽度的中间值
   var collapseThreshold = useMemo(function () {
-    return minWidth + (expandedWidth - minWidth) / 3;
-  }, [minWidth, expandedWidth]);
+    return minWidth + (state.expandedWidth - minWidth) / 3;
+  }, [minWidth, state.expandedWidth]);
 
   // Toggle expand state with smooth animation
-  var toggleExpand = function toggleExpand() {
+  var toggleExpand = useCallback(function () {
     if (!expandable) return;
-    setIsAnimating(true);
+
+    // 在动画或拖拽期间阻止新的切换操作，避免状态混乱
+    if (state.isAnimating || state.isResizing) return;
+
+    // 清除之前的动画
+    if (animationTimeoutRef.current) {
+      clearTimeout(animationTimeoutRef.current);
+    }
+
+    // 立即设置动画状态，避免其他 useEffect 干扰
+    dispatch({
+      type: 'START_ANIMATION'
+    });
     setIsExpand(!isExpand);
 
     // 动画完成后重置状态 - 与宽度动画时长一致
-    setTimeout(function () {
-      setIsAnimating(false);
-    }, 400);
-  };
+    animationTimeoutRef.current = setTimeout(function () {
+      dispatch({
+        type: 'STOP_ANIMATION'
+      });
+    }, ANIMATION_DURATION);
+  }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);
 
   // 用于跟踪上一次的 expand 状态，以检测外部变化
   var prevExpandRef = useRef(isExpand);
@@ -187,123 +219,189 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
   // 监听外部 expand prop 变化，触发动画
   useEffect(function () {
     // 检测到 expand 状态变化，且不在拖拽和动画中
-    if (prevExpandRef.current !== isExpand && !isResizing && !isAnimating) {
-      setIsAnimating(true);
-      setTimeout(function () {
-        setIsAnimating(false);
-      }, 400);
+    if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+      }
+
+      // 立即设置动画状态，避免其他 useEffect 干扰
+      dispatch({
+        type: 'START_ANIMATION'
+      });
+      animationTimeoutRef.current = setTimeout(function () {
+        dispatch({
+          type: 'STOP_ANIMATION'
+        });
+      }, ANIMATION_DURATION);
+      prevExpandRef.current = isExpand;
     }
-    prevExpandRef.current = isExpand;
-  }, [isExpand, isResizing, isAnimating]);
+  }, [isExpand, state.isResizing, state.isAnimating]);
 
   // 处理展开/折叠状态变化时的宽度动画和内容切换时机
   useEffect(function () {
-    if (isAnimating) {
+    if (state.isAnimating) {
       // 使用 requestAnimationFrame 确保动画平滑
-      requestAnimationFrame(function () {
+      var rafId = requestAnimationFrame(function () {
         if (isExpand) {
           // 展开动画：立即切换内容（先切换内容，再开始宽度动画）
-          setRenderExpand(true);
-          setInternalWidth(expandedWidth);
+          dispatch({
+            payload: state.expandedWidth,
+            type: 'ANIMATE_EXPAND'
+          });
         } else {
           // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）
-          setInternalWidth(minWidth);
-          setTimeout(function () {
-            setRenderExpand(false);
-          }, 300);
+          dispatch({
+            payload: minWidth,
+            type: 'ANIMATE_COLLAPSE'
+          });
+          if (collapseTimeoutRef.current) {
+            clearTimeout(collapseTimeoutRef.current);
+          }
+          collapseTimeoutRef.current = setTimeout(function () {
+            dispatch({
+              payload: false,
+              type: 'SET_RENDER_EXPAND'
+            });
+          }, COLLAPSE_ANIMATION_DELAY);
         }
       });
+      return function () {
+        cancelAnimationFrame(rafId);
+      };
     }
-  }, [isExpand, isAnimating, minWidth, expandedWidth]);
+  }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);
 
   // 同步非动画期间的 renderExpand 状态（如拖拽）
+  // 使用 ref 追踪上一次的 isResizing 状态，只在拖拽结束时同步
+  var prevIsResizingRef = useRef(state.isResizing);
   useEffect(function () {
-    if (!isAnimating && !isResizing) {
-      setRenderExpand(isExpand);
+    var wasResizing = prevIsResizingRef.current;
+    prevIsResizingRef.current = state.isResizing;
+
+    // 只在拖拽刚结束时同步 renderExpand，避免干扰正常的展开/折叠动画
+    if (wasResizing && !state.isResizing && !state.isAnimating) {
+      dispatch({
+        payload: isExpand,
+        type: 'SET_RENDER_EXPAND'
+      });
     }
-  }, [isExpand, isAnimating, isResizing]);
+  }, [isExpand, state.isAnimating, state.isResizing]);
 
   // 处理外部 width prop 变化
   // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定
   useEffect(function () {
-    if (width !== undefined && !isResizing && !isAnimating) {
+    if (width !== undefined && !state.isResizing && !state.isAnimating) {
       // 更新展开宽度记录
-      setExpandedWidth(width);
+      dispatch({
+        payload: width,
+        type: 'SET_EXPANDED_WIDTH'
+      });
       // 根据当前状态设置实际宽度
       if (isExpand) {
-        setInternalWidth(width);
+        dispatch({
+          payload: width,
+          type: 'SET_WIDTH'
+        });
       }
       // 如果是折叠状态，保持 minWidth，不改变 internalWidth
     }
-  }, [width, isResizing, isAnimating, isExpand]);
+  }, [width, state.isResizing, state.isAnimating, isExpand]);
 
-  // 计算当前的 children（支持函数和静态值）- 使用 renderExpand
-  var currentChildren = useMemo(function () {
-    return typeof children === 'function' ? children(renderExpand) : children;
-  }, [children, renderExpand]);
+  // 计算当前的 body 内容 - 使用 renderExpand
+  var currentBody = useMemo(function () {
+    return body(state.renderExpand);
+  }, [body, state.renderExpand]);
 
   // 计算当前的 header（支持函数和静态值）- 使用 renderExpand
   var currentHeader = useMemo(function () {
-    return typeof header === 'function' ? header(renderExpand) : header;
-  }, [header, renderExpand]);
+    return typeof header === 'function' ? header(state.renderExpand) : header;
+  }, [header, state.renderExpand]);
 
   // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand
   var currentFooter = useMemo(function () {
-    return typeof footer === 'function' ? footer(renderExpand) : footer;
-  }, [footer, renderExpand]);
+    return typeof footer === 'function' ? footer(state.renderExpand) : footer;
+  }, [footer, state.renderExpand]);
 
-  // Handle resize
-  var handleResize = function handleResize(_, _direction, reference_, delta) {
-    var currentWidth = reference_.offsetWidth;
-    setInternalWidth(currentWidth);
+  // Handle resize - memoize to prevent recreating on every render
+  var handleResize = useCallback(function (_, __, ref, delta) {
+    var currentWidth = ref.offsetWidth;
+    dispatch({
+      payload: currentWidth,
+      type: 'SET_WIDTH'
+    });
     onWidthDragging === null || onWidthDragging === void 0 || onWidthDragging(delta, currentWidth);
-  };
-  var handleResizeStart = function handleResizeStart() {
-    setIsResizing(true);
-  };
-  var handleResizeStop = function handleResizeStop(_, _direction, reference_, delta) {
-    setIsResizing(false);
-    var currentWidth = reference_.offsetWidth;
+  }, [onWidthDragging]);
+  var handleResizeStart = useCallback(function () {
+    dispatch({
+      type: 'START_RESIZE'
+    });
+  }, []);
+  var handleResizeStop = useCallback(function (_, __, ref, delta) {
+    dispatch({
+      type: 'STOP_RESIZE'
+    });
+    var currentWidth = ref.offsetWidth;
+
+    // 清除之前的动画
+    if (animationTimeoutRef.current) {
+      clearTimeout(animationTimeoutRef.current);
+    }
 
     // 根据拖拽后的宽度决定是折叠还是展开
     if (expandable) {
-      if (currentWidth <= minWidth) {
-        // 拖拽到最小宽度，保持折叠
-        setIsAnimating(true);
-        setIsExpand(false);
-        setInternalWidth(minWidth);
-        setTimeout(function () {
-          return setIsAnimating(false);
-        }, 400);
-      } else if (currentWidth < collapseThreshold) {
-        // 拖拽到阈值以下，自动折叠
-        setIsAnimating(true);
-        setIsExpand(false);
-        setInternalWidth(minWidth);
-        setTimeout(function () {
-          return setIsAnimating(false);
-        }, 400);
-      } else if (!isExpand && currentWidth > minWidth) {
-        // 从折叠状态拖拽出来，自动展开
-        setIsAnimating(true);
-        setIsExpand(true);
-        setExpandedWidth(currentWidth);
-        setInternalWidth(currentWidth);
-        setTimeout(function () {
-          return setIsAnimating(false);
-        }, 400);
+      var shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;
+      var shouldExpand = !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;
+      if (shouldCollapse || shouldExpand) {
+        // 立即设置动画状态
+        dispatch({
+          type: 'START_ANIMATION'
+        });
+        if (shouldCollapse) {
+          setIsExpand(false);
+          dispatch({
+            payload: minWidth,
+            type: 'SET_WIDTH'
+          });
+        } else {
+          setIsExpand(true);
+          dispatch({
+            payload: currentWidth,
+            type: 'SET_EXPANDED_WIDTH'
+          });
+          dispatch({
+            payload: currentWidth,
+            type: 'SET_WIDTH'
+          });
+        }
+        animationTimeoutRef.current = setTimeout(function () {
+          dispatch({
+            type: 'STOP_ANIMATION'
+          });
+        }, ANIMATION_DURATION);
       } else if (isExpand) {
         // 展开状态下正常拖拽，记住宽度
-        setExpandedWidth(currentWidth);
-        setInternalWidth(currentWidth);
+        dispatch({
+          payload: currentWidth,
+          type: 'SET_EXPANDED_WIDTH'
+        });
+        dispatch({
+          payload: currentWidth,
+          type: 'SET_WIDTH'
+        });
       }
     } else {
       // 如果不可折叠，仅更新宽度
-      setExpandedWidth(currentWidth);
-      setInternalWidth(currentWidth);
+      dispatch({
+        payload: currentWidth,
+        type: 'SET_EXPANDED_WIDTH'
+      });
+      dispatch({
+        payload: currentWidth,
+        type: 'SET_WIDTH'
+      });
     }
     onWidthChange === null || onWidthChange === void 0 || onWidthChange(delta, currentWidth);
-  };
+  }, [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand]);
 
   // Arrow icon based on placement and expand state
   var ArrowIcon = useMemo(function () {
@@ -315,47 +413,48 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
     return ChevronRight;
   }, [placement]);
 
-  // Toggle handle with smooth transitions
-  var handle = showHandle && expandable && /*#__PURE__*/_jsx(motion.div, {
-    animate: {
+  // Memoize handle styles to prevent recreation
+  var handleRootStyle = useMemo(function () {
+    return {
+      display: 'flex',
       opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,
-      scale: isHovering ? 1.05 : 1
-    },
-    className: cx(styles.toggleRoot, placement === 'left' ? styles.toggleLeft : styles.toggleRight),
-    style: {
-      display: 'flex'
-    },
-    transition: {
-      duration: 0.25,
-      ease: [0.22, 1, 0.36, 1]
-    },
-    children: /*#__PURE__*/_jsx(Center, {
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.handle,
-      onClick: toggleExpand,
-      style: _objectSpread(_objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.handle), {}, {
-        cursor: 'pointer',
-        transition: 'transform 0.2s ease-out'
-      }),
-      children: /*#__PURE__*/_jsx(motion.div, {
-        animate: {
-          rotate: isExpand ? 0 : 180
-        },
-        style: {
-          marginLeft: placement === 'right' ? 4 : 0,
-          marginRight: placement === 'left' ? 4 : 0
-        },
-        transition: {
-          duration: 0.3,
-          ease: [0.22, 1, 0.36, 1]
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          className: styles.handlerIcon,
-          icon: ArrowIcon,
-          size: 16
+      transition: 'opacity 0.25s ease'
+    };
+  }, [isExpand, showHandleWhenCollapsed, isHovering]);
+  var handleCenterStyle = useMemo(function () {
+    return _objectSpread(_objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.handle), {}, {
+      cursor: 'pointer'
+    });
+  }, [customStyles === null || customStyles === void 0 ? void 0 : customStyles.handle]);
+  var handleIconWrapperStyle = useMemo(function () {
+    return {
+      marginLeft: placement === 'right' ? 4 : 0,
+      marginRight: placement === 'left' ? 4 : 0,
+      transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',
+      transition: "transform ".concat(COLLAPSE_ANIMATION_DELAY, " ease")
+    };
+  }, [placement, isExpand]);
+
+  // Toggle handle with smooth transitions
+  var handle = useMemo(function () {
+    return showHandle && expandable && /*#__PURE__*/_jsx("div", {
+      className: cx(styles.toggleRoot, placement === 'left' ? styles.toggleLeft : styles.toggleRight),
+      style: handleRootStyle,
+      children: /*#__PURE__*/_jsx(Center, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.handle,
+        onClick: toggleExpand,
+        style: handleCenterStyle,
+        children: /*#__PURE__*/_jsx("div", {
+          style: handleIconWrapperStyle,
+          children: /*#__PURE__*/_jsx(Icon, {
+            className: styles.handlerIcon,
+            icon: ArrowIcon,
+            size: 16
+          })
         })
       })
-    })
-  });
+    });
+  }, [showHandle, expandable, styles.toggleRoot, styles.toggleLeft, styles.toggleRight, styles.handlerIcon, placement, handleRootStyle, classNames === null || classNames === void 0 ? void 0 : classNames.handle, toggleExpand, handleCenterStyle, handleIconWrapperStyle, ArrowIcon, cx]);
 
   // Size configuration - 使用内部宽度状态
   var sizeConfig = useMemo(function () {
@@ -364,24 +463,15 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
       minWidth: minWidth,
       size: {
         height: '100%',
-        width: internalWidth
+        width: state.internalWidth
       }
     };
-  }, [internalWidth, minWidth, maxWidth]);
+  }, [state.internalWidth, minWidth, maxWidth]);
 
   // Resize enable configuration - 始终允许拖拽
   var resizeEnable = useMemo(function () {
     if (!resizable) {
-      return {
-        bottom: false,
-        bottomLeft: false,
-        bottomRight: false,
-        left: false,
-        right: false,
-        top: false,
-        topLeft: false,
-        topRight: false
-      };
+      return RESIZE_DISABLED;
     }
     return {
       bottom: false,
@@ -394,55 +484,73 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
       topRight: false
     };
   }, [resizable, placement]);
+
+  // Memoize handle classes to prevent recreation
+  var handleClasses = useMemo(function () {
+    return _defineProperty({}, placement === 'left' ? 'right' : 'left', cx(styles.resizeHandle, showHandleHighlight && styles.resizeHandleHighlight, placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight));
+  }, [placement, styles, showHandleHighlight, cx]);
+
+  // Memoize container style to prevent recreation
+  var containerStyle = useMemo(function () {
+    return _objectSpread(_objectSpread(_objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container), rest.style), {}, {
+      // 拖拽时不要动画，点击 handle 时有流畅的弹性动画
+      transition: state.isResizing ? 'none' : state.isAnimating ? "width ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.22, 1, 0.36, 1)") : 'none'
+    });
+  }, [customStyles === null || customStyles === void 0 ? void 0 : customStyles.container, rest.style, state.isResizing, state.isAnimating]);
+
+  // Memoize class names
+  var containerClassName = useMemo(function () {
+    return cx(styles.container, classNames === null || classNames === void 0 ? void 0 : classNames.container, className);
+  }, [cx, styles.container, classNames === null || classNames === void 0 ? void 0 : classNames.container, className]);
+  var contentClassName = useMemo(function () {
+    return cx(styles.contentContainer, styles.menuOverride, classNames === null || classNames === void 0 ? void 0 : classNames.content);
+  }, [cx, styles.contentContainer, styles.menuOverride, classNames === null || classNames === void 0 ? void 0 : classNames.content]);
+  var headerClassName = useMemo(function () {
+    return cx(styles.header, classNames === null || classNames === void 0 ? void 0 : classNames.header);
+  }, [cx, styles.header, classNames === null || classNames === void 0 ? void 0 : classNames.header]);
+  var bodyClassName = useMemo(function () {
+    return cx(styles.body, classNames === null || classNames === void 0 ? void 0 : classNames.body);
+  }, [cx, styles.body, classNames === null || classNames === void 0 ? void 0 : classNames.body]);
+  var footerClassName = useMemo(function () {
+    return cx(styles.footer, classNames === null || classNames === void 0 ? void 0 : classNames.footer);
+  }, [cx, styles.footer, classNames === null || classNames === void 0 ? void 0 : classNames.footer]);
+
+  // Cleanup timeouts on unmount
+  useEffect(function () {
+    return function () {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+      }
+      if (collapseTimeoutRef.current) {
+        clearTimeout(collapseTimeoutRef.current);
+      }
+    };
+  }, []);
   return /*#__PURE__*/_jsx("aside", {
     ref: ref,
     children: /*#__PURE__*/_jsxs(Resizable, _objectSpread(_objectSpread({}, sizeConfig), {}, {
-      className: cx(styles.container, classNames === null || classNames === void 0 ? void 0 : classNames.container, className),
+      className: containerClassName,
       enable: resizeEnable,
-      handleClasses: _defineProperty({}, placement === 'left' ? 'right' : 'left', cx(styles.resizeHandle, showHandleHighlight && styles.resizeHandleHighlight, placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight)),
+      handleClasses: handleClasses,
       onResize: handleResize,
       onResizeStart: handleResizeStart,
       onResizeStop: handleResizeStop,
-      style: _objectSpread(_objectSpread(_objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container), rest.style), {}, {
-        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画
-        transition: isResizing ? 'none' : isAnimating ? 'width 0.4s cubic-bezier(0.22, 1, 0.36, 1)' : 'none'
-      }),
+      style: containerStyle,
       children: [handle, /*#__PURE__*/_jsxs(Flexbox, {
-        className: cx(styles.contentContainer, styles.menuOverride, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+        className: contentClassName,
         style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.content,
         children: [currentHeader && /*#__PURE__*/_jsx("div", {
-          className: cx(styles.header, classNames === null || classNames === void 0 ? void 0 : classNames.header),
+          className: headerClassName,
           style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.header,
-          children: animation === false || animation === undefined ? currentHeader : /*#__PURE__*/_jsx(AnimationWrapper, {
-            blur: (_animation$blur = animation.blur) !== null && _animation$blur !== void 0 ? _animation$blur : false,
-            enabled: animation.header,
-            expand: renderExpand,
-            fade: (_animation$fade = animation.fade) !== null && _animation$fade !== void 0 ? _animation$fade : true,
-            id: "header",
-            children: currentHeader
-          })
+          children: currentHeader
         }), /*#__PURE__*/_jsx("div", {
-          className: cx(styles.body, classNames === null || classNames === void 0 ? void 0 : classNames.body),
+          className: bodyClassName,
           style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.body,
-          children: animation === false || animation === undefined ? currentChildren : /*#__PURE__*/_jsx(AnimationWrapper, {
-            blur: (_animation$blur2 = animation.blur) !== null && _animation$blur2 !== void 0 ? _animation$blur2 : false,
-            enabled: animation.body,
-            expand: renderExpand,
-            fade: (_animation$fade2 = animation.fade) !== null && _animation$fade2 !== void 0 ? _animation$fade2 : true,
-            id: "body",
-            children: currentChildren
-          })
+          children: currentBody
         }), currentFooter && /*#__PURE__*/_jsx("div", {
-          className: cx(styles.footer, classNames === null || classNames === void 0 ? void 0 : classNames.footer),
+          className: footerClassName,
           style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.footer,
-          children: animation === false || animation === undefined ? currentFooter : /*#__PURE__*/_jsx(AnimationWrapper, {
-            blur: (_animation$blur3 = animation.blur) !== null && _animation$blur3 !== void 0 ? _animation$blur3 : false,
-            enabled: animation.footer,
-            expand: renderExpand,
-            fade: (_animation$fade3 = animation.fade) !== null && _animation$fade3 !== void 0 ? _animation$fade3 : true,
-            id: "footer",
-            children: currentFooter
-          })
+          children: currentFooter
         })]
       })]
     }))