@lobehub/ui 2.16.2 → 2.16.3

package/es/Accordion/AccordionItem.js

@@ -115,7 +115,7 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
         height: 'auto',
         opacity: 1,
         transition: {
-          duration: 0.3,
+          duration: 0.2,
           ease: [0.4, 0, 0.2, 1]
         }
       },
@@ -123,7 +123,7 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
         height: 0,
         opacity: 0,
         transition: {
-          duration: 0.3,
+          duration: 0.2,
           ease: [0.4, 0, 0.2, 1]
         }
       }

package/es/DraggablePanel/DraggablePanel.js

@@ -1,23 +1,23 @@
 'use client';
 
 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 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; }
+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 { ConfigProvider } from 'antd';
 import { cva } from 'class-variance-authority';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
 import { Resizable } from 're-resizable';
-import { memo, use, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, use, useCallback, useEffect, useMemo, useReducer, useRef, useTransition } from 'react';
 import { Center } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 import Icon from "../Icon";
@@ -35,6 +35,37 @@ var DEFAULT_MODE = 'fixed';
 var DEFAULT_EXPANDABLE = true;
 var DEFAULT_EXPAND = true;
 var DEFAULT_SHOW_HANDLE_WIDE_AREA = true;
+
+// State reducer for better state management
+
+function draggablePanelReducer(state, action) {
+  switch (action.type) {
+    case 'START_RESIZE':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isResizing: true,
+          showExpand: false
+        });
+      }
+    case 'STOP_RESIZE':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isResizing: false,
+          showExpand: true
+        });
+      }
+    case 'SET_SHOW_EXPAND':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          showExpand: action.payload
+        });
+      }
+    default:
+      {
+        return state;
+      }
+  }
+}
 var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   var _ref$headerHeight = _ref.headerHeight,
     headerHeight = _ref$headerHeight === void 0 ? DEFAULT_HEADER_HEIGHT : _ref$headerHeight,
@@ -78,6 +109,13 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   var ref = useRef(null);
   var isHovering = useHover(ref);
   var isVertical = placement === 'top' || placement === 'bottom';
+  var _useTransition = useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    isPending = _useTransition2[0],
+    startTransition = _useTransition2[1];
+
+  // Use ref for hover timeout to avoid memory leaks
+  var hoverTimeoutRef = useRef(undefined);
 
   // inherit direction from Ant Design ConfigProvider
   var _use = use(ConfigProvider.ConfigContext),
@@ -104,23 +142,46 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     isExpand = _useControlledState2[0],
     setIsExpand = _useControlledState2[1];
 
-  // Auto-expand on hover if not pinned
+  // Initialize state with useReducer for better performance
+  var initialState = {
+    isResizing: false,
+    showExpand: true
+  };
+  var _useReducer = useReducer(draggablePanelReducer, initialState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+
+  // Auto-expand on hover if not pinned with optimized transition
   useEffect(function () {
     if (pin) return;
+
+    // Clear previous timeout
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
     if (isHovering && !isExpand) {
-      setIsExpand(true);
+      startTransition(function () {
+        setIsExpand(true);
+      });
     } else if (!isHovering && isExpand) {
-      setIsExpand(false);
+      // Add a small delay before collapsing to prevent flickering
+      hoverTimeoutRef.current = setTimeout(function () {
+        startTransition(function () {
+          setIsExpand(false);
+        });
+      }, 150);
     }
   }, [pin, isHovering, isExpand, setIsExpand]);
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    showExpand = _useState2[0],
-    setShowExpand = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isResizing = _useState4[0],
-    setIsResizing = _useState4[1];
+
+  // Cleanup timeout on unmount
+  useEffect(function () {
+    return function () {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, []);
   var canResizing = resize !== false && isExpand;
 
   // Style variants for the panel
@@ -265,70 +326,84 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     }
   }, [internalPlacement]);
 
+  // Toggle expand state with transition for better performance
+  var toggleExpand = useCallback(function () {
+    if (!expandable) return;
+    startTransition(function () {
+      setIsExpand(!isExpand);
+    });
+  }, [expandable, isExpand, setIsExpand]);
+
   // Toggle handle component
-  var handle = /*#__PURE__*/_jsx(Center, {
-    className: toggleVariants({
-      placement: internalPlacement
-    }),
-    style: {
-      opacity: isExpand ? pin ? undefined : 0 : showHandleWhenCollapsed ? 1 : 0
-    },
-    children: /*#__PURE__*/_jsx(Center, {
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.handle,
-      onClick: function onClick() {
-        return setIsExpand(!isExpand);
+  var handle = useMemo(function () {
+    return /*#__PURE__*/_jsx(Center, {
+      className: toggleVariants({
+        placement: internalPlacement
+      }),
+      style: {
+        opacity: isExpand ? pin ? undefined : 0 : showHandleWhenCollapsed ? 1 : 0
       },
-      style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.handle,
-      children: /*#__PURE__*/_jsx(Icon, {
-        className: styles.handlerIcon,
-        icon: Arrow,
-        size: 16,
-        style: {
-          marginBottom: internalPlacement === 'top' ? 4 : 0,
-          marginLeft: internalPlacement === 'right' ? 4 : 0,
-          marginRight: internalPlacement === 'left' ? 4 : 0,
-          marginTop: internalPlacement === 'bottom' ? 4 : 0,
-          transform: "rotate(".concat(isExpand ? 180 : 0, "deg)")
-        }
+      children: /*#__PURE__*/_jsx(Center, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.handle,
+        onClick: toggleExpand,
+        style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.handle,
+        children: /*#__PURE__*/_jsx(Icon, {
+          className: styles.handlerIcon,
+          icon: Arrow,
+          size: 16,
+          style: {
+            marginBottom: internalPlacement === 'top' ? 4 : 0,
+            marginLeft: internalPlacement === 'right' ? 4 : 0,
+            marginRight: internalPlacement === 'left' ? 4 : 0,
+            marginTop: internalPlacement === 'bottom' ? 4 : 0,
+            transform: "rotate(".concat(isExpand ? 180 : 0, "deg)"),
+            transition: 'transform 0.3s ease'
+          }
+        })
       })
-    })
-  });
+    });
+  }, [toggleVariants, internalPlacement, isExpand, pin, showHandleWhenCollapsed, classNames === null || classNames === void 0 ? void 0 : classNames.handle, toggleExpand, customStyles === null || customStyles === void 0 ? void 0 : customStyles.handle, styles.handlerIcon, Arrow]);
 
-  // Handle resize events
-  var handleResize = function handleResize(_, _direction, reference_, delta) {
+  // Handle resize events with memoization
+  var handleResize = useCallback(function (_, _direction, reference_, delta) {
     onSizeDragging === null || onSizeDragging === void 0 || onSizeDragging(delta, {
       height: reference_.style.height,
       width: reference_.style.width
     });
-  };
-  var handleResizeStart = function handleResizeStart() {
-    setIsResizing(true);
-    setShowExpand(false);
-  };
-  var handleResizeStop = function handleResizeStop(e, direction, reference_, delta) {
-    setIsResizing(false);
-    setShowExpand(true);
+  }, [onSizeDragging]);
+  var handleResizeStart = useCallback(function () {
+    dispatch({
+      type: 'START_RESIZE'
+    });
+  }, []);
+  var handleResizeStop = useCallback(function (e, direction, reference_, delta) {
+    dispatch({
+      type: 'STOP_RESIZE'
+    });
     onSizeChange === null || onSizeChange === void 0 || onSizeChange(delta, {
       height: reference_.style.height,
       width: reference_.style.width
     });
-  };
+  }, [onSizeChange]);
 
   // Main panel content
-  var inner = /*#__PURE__*/_jsx(Resizable, _objectSpread(_objectSpread({}, sizeProps), {}, {
-    className: cx(styles.panel, classNames === null || classNames === void 0 ? void 0 : classNames.content),
-    enable: canResizing ? resizing : undefined,
-    handleClasses: canResizing ? _defineProperty({}, reversePlacement(internalPlacement), cx(handleVariants({
-      placement: reversePlacement(internalPlacement)
-    }), showHandleHighlight && styles.handleHighlight)) : {},
-    onResize: handleResize,
-    onResizeStart: handleResizeStart,
-    onResizeStop: handleResizeStop,
-    style: _objectSpread({
-      transition: isResizing ? 'unset' : undefined
-    }, style),
-    children: children
-  }));
+  var inner = useMemo(function () {
+    return /*#__PURE__*/_jsx(Resizable, _objectSpread(_objectSpread({}, sizeProps), {}, {
+      className: cx(styles.panel, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+      enable: canResizing ? resizing : undefined,
+      handleClasses: canResizing ? _defineProperty({}, reversePlacement(internalPlacement), cx(handleVariants({
+        placement: reversePlacement(internalPlacement)
+      }), showHandleHighlight && styles.handleHighlight)) : {},
+      onResize: handleResize,
+      onResizeStart: handleResizeStart,
+      onResizeStop: handleResizeStop,
+      style: _objectSpread({
+        opacity: isPending ? 0.95 : 1,
+        transition: state.isResizing ? 'unset' : undefined
+      }, style),
+      children: children
+    }));
+  }, [sizeProps, styles.panel, classNames === null || classNames === void 0 ? void 0 : classNames.content, canResizing, resizing, internalPlacement, handleVariants, showHandleHighlight, styles.handleHighlight, handleResize, handleResizeStart, handleResizeStop, state.isResizing, isPending, style, children, cx]);
 
   // For fullscreen mode, return a simpler layout
   if (fullscreen) {
@@ -344,8 +419,13 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     }), className),
     dir: dir,
     ref: ref,
-    children: [expandable && showExpand && handle, destroyOnClose ? isExpand && inner : inner]
+    children: [expandable && state.showExpand && handle, destroyOnClose ? isExpand && inner : inner]
   });
+},
+// Custom comparison function to avoid unnecessary re-renders
+function (prevProps, nextProps) {
+  // Only re-render if critical props change
+  return prevProps.placement === nextProps.placement && prevProps.mode === nextProps.mode && prevProps.expand === nextProps.expand && prevProps.pin === nextProps.pin && prevProps.fullscreen === nextProps.fullscreen && prevProps.size === nextProps.size && prevProps.defaultSize === nextProps.defaultSize && prevProps.minWidth === nextProps.minWidth && prevProps.minHeight === nextProps.minHeight && prevProps.maxWidth === nextProps.maxWidth && prevProps.maxHeight === nextProps.maxHeight && prevProps.expandable === nextProps.expandable && prevProps.resize === nextProps.resize && prevProps.showHandleWhenCollapsed === nextProps.showHandleWhenCollapsed && prevProps.destroyOnClose === nextProps.destroyOnClose && prevProps.showBorder === nextProps.showBorder && prevProps.showHandleHighlight === nextProps.showHandleHighlight && prevProps.showHandleWideArea === nextProps.showHandleWideArea && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.className === nextProps.className && prevProps.dir === nextProps.dir && prevProps.headerHeight === nextProps.headerHeight && prevProps.onSizeChange === nextProps.onSizeChange && prevProps.onSizeDragging === nextProps.onSizeDragging && prevProps.onExpandChange === nextProps.onExpandChange && prevProps.children === nextProps.children;
 });
 DraggablePanel.displayName = 'DraggablePanel';
 export default DraggablePanel;

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
         })]
       })]
     }))

package/es/DraggableSideNav/style.js

@@ -26,8 +26,8 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     resizeHandleHighlight: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      &:hover {\n        &::after {\n          width: 3px;\n          background: ", ";\n          box-shadow: 0 0 8px ", "40;\n        }\n      }\n\n      &:active {\n        &::after {\n          background: ", ";\n        }\n      }\n    "])), token.colorPrimary, token.colorPrimary, token.colorPrimaryActive),
     resizeHandleLeft: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      inset-inline-end: -4px;\n    "]))),
     resizeHandleRight: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      inset-inline-start: -4px;\n    "]))),
-    toggleLeft: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      inset-inline-end: -", "px;\n      width: ", "px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        border-inline-start-width: 0;\n        border-radius: 0 ", "px ", "px 0;\n      }\n    "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleLength / 2, token.borderRadiusLG, token.borderRadiusLG),
-    toggleRight: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      inset-inline-start: -", "px;\n      width: ", "px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        border-inline-end-width: 0;\n        border-radius: ", "px 0 0 ", "px; /* \u53F3\u4FA7\u9762\u677F\uFF0Chandle \u5728\u5DE6\u8FB9\uFF0C\u5DE6\u4FA7\u5706\u89D2 */\n      }\n    "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleLength / 2, token.borderRadiusLG, token.borderRadiusLG),
+    toggleLeft: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      inset-inline-end: -", "px;\n      width: ", "px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        margin-inline-start: -1px;\n        border-inline-start-width: 0;\n        border-radius: 0 ", "px ", "px 0;\n      }\n    "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleLength / 2, token.borderRadiusLG, token.borderRadiusLG),
+    toggleRight: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      inset-inline-start: -", "px;\n      width: ", "px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        margin-inline-end: -1px;\n        border-inline-end-width: 0;\n        border-radius: ", "px 0 0 ", "px; /* \u53F3\u4FA7\u9762\u677F\uFF0Chandle \u5728\u5DE6\u8FB9\uFF0C\u5DE6\u4FA7\u5706\u89D2 */\n      }\n    "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleLength / 2, token.borderRadiusLG, token.borderRadiusLG),
     toggleRoot: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      pointer-events: none;\n      position: absolute;\n      z-index: 50;\n\n      /* Smooth transitions for all states */\n      transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n      &:has(> div) {\n        pointer-events: all;\n      }\n\n      > div {\n        pointer-events: all;\n        cursor: pointer;\n\n        position: absolute;\n\n        border: 1px solid ", ";\n\n        color: ", ";\n\n        background: ", ";\n        backdrop-filter: blur(8px);\n\n        /* Enhanced transitions with backdrop blur */\n        transition:\n          color 0.2s ", ",\n          transform 0.2s ", ",\n          box-shadow 0.2s ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          transform: scale(0.95);\n          color: ", ";\n        }\n      }\n    "])), token.colorBorder, token.colorTextTertiary, backgroundColor || token.colorBgLayout, token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorTextSecondary, token.colorText)
   };
 });

package/es/DraggableSideNav/type.d.ts

@@ -2,44 +2,12 @@ import type { NumberSize } from 're-resizable';
 import type { CSSProperties, ReactNode } from 'react';
 import type { DivProps } from "../types";
 export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSelect'> {
-    /**
-     * Animation configuration for content transitions
-     * Set to false to disable all animations
-     * @default undefined
-     */
-    animation?: false | {
-        /**
-         * Enable blur effect during transitions
-         * @default false
-         */
-        blur?: boolean;
-        /**
-         * Enable animation for body section
-         * @default false
-         */
-        body?: boolean;
-        /**
-         * Enable fade effect during transitions
-         * @default true
-         */
-        fade?: boolean;
-        /**
-         * Enable animation for footer section
-         * @default false
-         */
-        footer?: boolean;
-        /**
-         * Enable animation for header section
-         * @default false
-         */
-        header?: boolean;
-    };
     backgroundColor?: string;
     /**
      * Body content (main content area)
-     * Can be a static element or a function that receives expand state
+     * Function that receives expand state
      */
-    children: ReactNode | ((expand: boolean) => ReactNode);
+    body: (expand: boolean) => ReactNode;
     /**
      * Classnames for internal components
      */
@@ -84,7 +52,8 @@ export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSe
      */
     maxWidth?: number;
     /**
-     * Minimum width (also the collapsed width)
+     * Minimum width when expanded (does not affect collapsed width which is always 64px)
+     * Only applies when the panel is in expanded state
      * @default 64
      */
     minWidth?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "2.16.2",
+  "version": "2.16.3",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",