@lobehub/ui 5.6.5 → 5.7.1

package/es/DraggablePanel/DraggablePanel.mjs

@@ -3,7 +3,7 @@ import Center from "../Flex/Center.mjs";
 import Icon from "../Icon/Icon.mjs";
 import { handleVariants, panelVariants, styles, toggleVariants } from "./style.mjs";
 import { reversePlacement } from "./utils.mjs";
-import { memo, use, useCallback, useEffect, useMemo, useReducer, useRef, useTransition } from "react";
+import { memo, startTransition, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ConfigProvider } from "antd";
 import { cx } from "antd-style";
@@ -13,66 +13,65 @@ import { useHover } from "ahooks";
 import isEqual from "fast-deep-equal";
 import { Resizable } from "re-resizable";
 //#region src/DraggablePanel/DraggablePanel.tsx
-const DEFAULT_HEIGHT = 180;
-const DEFAULT_WIDTH = 280;
-const DEFAULT_HEADER_HEIGHT = 0;
-const DEFAULT_PIN = true;
-const DEFAULT_MODE = "fixed";
-const DEFAULT_EXPANDABLE = true;
-const DEFAULT_EXPAND = true;
-const DEFAULT_SHOW_HANDLE_WIDE_AREA = true;
-function draggablePanelReducer(state, action) {
-	switch (action.type) {
-		case "START_RESIZE": return {
-			...state,
-			isResizing: true,
-			showExpand: false
-		};
-		case "STOP_RESIZE": return {
-			...state,
-			isResizing: false,
-			showExpand: true
-		};
-		case "SET_SHOW_EXPAND": return {
-			...state,
-			showExpand: action.payload
-		};
-		default: return state;
-	}
-}
-const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen, maxHeight, pin = DEFAULT_PIN, mode = DEFAULT_MODE, children, placement = "right", resize, style, showBorder = true, showHandleHighlight = false, showHandleWideArea = DEFAULT_SHOW_HANDLE_WIDE_AREA, backgroundColor, size, defaultSize: customizeDefaultSize, minWidth, minHeight, maxWidth, onSizeChange, onSizeDragging, expandable = DEFAULT_EXPANDABLE, expand, defaultExpand = DEFAULT_EXPAND, onExpandChange, className, showHandleWhenCollapsed, destroyOnClose, styles: customStyles, classNames, dir }) => {
+const ARROW_MAP = {
+	bottom: ChevronUp,
+	left: ChevronRight,
+	right: ChevronLeft,
+	top: ChevronDown
+};
+const MARGIN_MAP = {
+	bottom: { marginTop: 4 },
+	left: { marginRight: 4 },
+	right: { marginLeft: 4 },
+	top: { marginBottom: 4 }
+};
+const DISABLED_RESIZING = {
+	bottom: false,
+	bottomLeft: false,
+	bottomRight: false,
+	left: false,
+	right: false,
+	top: false,
+	topLeft: false,
+	topRight: false
+};
+const toCssSize = (value, fallback) => {
+	if (typeof value === "number") return `${Math.max(value, 0)}px`;
+	if (typeof value === "string" && value.length > 0) return value;
+	return fallback;
+};
+const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = true, mode = "fixed", children, placement = "right", resize, style, showBorder = true, showHandleHighlight = false, showHandleWideArea = true, backgroundColor, size, stableLayout = false, defaultSize: customizeDefaultSize, minWidth, minHeight, maxWidth, onSizeChange, onSizeDragging, expandable = true, expand, defaultExpand = true, onExpandChange, className, showHandleWhenCollapsed, destroyOnClose, styles: customStyles, classNames, dir }) => {
 	const ref = useRef(null);
 	const isHovering = useHover(ref);
 	const isVertical = placement === "top" || placement === "bottom";
-	const [isPending, startTransition] = useTransition();
 	const hoverTimeoutRef = useRef(void 0);
+	const resetTransitionTimeoutRef = useRef(void 0);
+	const resizableRef = useRef(null);
+	const initialExpandedSizeRef = useRef(void 0);
 	const { direction: antdDirection } = use(ConfigProvider.ConfigContext);
 	const direction = dir ?? antdDirection;
 	const internalPlacement = useMemo(() => {
-		return direction === "rtl" && ["left", "right"].includes(placement) ? placement === "left" ? "right" : "left" : placement;
+		if (direction !== "rtl") return placement;
+		if (placement === "left") return "right";
+		if (placement === "right") return "left";
+		return placement;
 	}, [direction, placement]);
-	const cssVariables = useMemo(() => ({
+	const cssVariables = {
 		"--draggable-panel-bg": backgroundColor || "",
 		"--draggable-panel-header-height": `${headerHeight}px`
-	}), [backgroundColor, headerHeight]);
+	};
 	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
 		onChange: onExpandChange,
 		value: expand
 	});
-	const [state, dispatch] = useReducer(draggablePanelReducer, {
-		isResizing: false,
-		showExpand: true
-	});
+	const [shouldTransition, setShouldTransition] = useState(true);
+	const [showExpand, setShowExpand] = useState(true);
 	useEffect(() => {
 		if (pin) return;
 		if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
-		if (isHovering && !isExpand) startTransition(() => {
-			setIsExpand(true);
-		});
+		if (isHovering && !isExpand) startTransition(() => setIsExpand(true));
 		else if (!isHovering && isExpand) hoverTimeoutRef.current = setTimeout(() => {
-			startTransition(() => {
-				setIsExpand(false);
-			});
+			startTransition(() => setIsExpand(false));
 		}, 150);
 	}, [
 		pin,
@@ -83,8 +82,13 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 	useEffect(() => {
 		return () => {
 			if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+			if (resetTransitionTimeoutRef.current) clearTimeout(resetTransitionTimeoutRef.current);
 		};
 	}, []);
+	useEffect(() => {
+		initialExpandedSizeRef.current = void 0;
+	}, [internalPlacement]);
+	const reversed = reversePlacement(internalPlacement);
 	const canResizing = resize !== false && isExpand;
 	const resizing = useMemo(() => ({
 		bottom: false,
@@ -95,23 +99,27 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 		top: false,
 		topLeft: false,
 		topRight: false,
-		[reversePlacement(internalPlacement)]: true,
+		[reversed]: true,
 		...resize
-	}), [internalPlacement, resize]);
+	}), [reversed, resize]);
 	const defaultSize = useMemo(() => {
 		if (isVertical) return {
-			height: DEFAULT_HEIGHT,
+			height: 180,
 			width: "100%",
 			...customizeDefaultSize
 		};
 		return {
 			height: "100%",
-			width: DEFAULT_WIDTH,
+			width: 280,
 			...customizeDefaultSize
 		};
 	}, [isVertical, customizeDefaultSize]);
+	const normalizedMaxHeight = typeof maxHeight === "number" ? Math.max(maxHeight, 0) : void 0;
+	const normalizedMaxWidth = typeof maxWidth === "number" ? Math.max(maxWidth, 0) : void 0;
+	const normalizedMinHeight = typeof minHeight === "number" ? Math.max(minHeight, 0) : void 0;
+	const normalizedMinWidth = typeof minWidth === "number" ? Math.max(minWidth, 0) : void 0;
 	const sizeProps = useMemo(() => {
-		if (!isExpand) return isVertical ? {
+		if (!stableLayout && !isExpand) return isVertical ? {
 			minHeight: 0,
 			size: { height: 0 }
 		} : {
@@ -120,143 +128,294 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 		};
 		return {
 			defaultSize,
-			maxHeight: typeof maxHeight === "number" ? Math.max(maxHeight, 0) : maxHeight,
-			maxWidth: typeof maxWidth === "number" ? Math.max(maxWidth, 0) : maxWidth,
-			minHeight: typeof minHeight === "number" ? Math.max(minHeight, 0) : minHeight,
-			minWidth: typeof minWidth === "number" ? Math.max(minWidth, 0) : minWidth,
+			maxHeight: normalizedMaxHeight,
+			maxWidth: normalizedMaxWidth,
+			minHeight: normalizedMinHeight,
+			minWidth: normalizedMinWidth,
 			size
 		};
 	}, [
+		stableLayout,
 		isExpand,
 		isVertical,
 		defaultSize,
-		maxHeight,
-		maxWidth,
-		minHeight,
-		minWidth,
+		normalizedMaxHeight,
+		normalizedMaxWidth,
+		normalizedMinHeight,
+		normalizedMinWidth,
 		size
 	]);
-	const Arrow = useMemo(() => {
-		switch (internalPlacement) {
-			case "top": return ChevronDown;
-			case "bottom": return ChevronUp;
-			case "right": return ChevronLeft;
-			case "left": return ChevronRight;
-			default: return ChevronLeft;
-		}
-	}, [internalPlacement]);
-	const toggleExpand = useCallback(() => {
-		if (!expandable) return;
-		startTransition(() => {
-			setIsExpand(!isExpand);
+	const fallbackExpandedSize = isVertical ? "180px" : "280px";
+	const controlledExpandedSize = useMemo(() => {
+		const controlledSize = isVertical ? size?.height : size?.width;
+		if (controlledSize === void 0) return void 0;
+		return toCssSize(controlledSize, fallbackExpandedSize);
+	}, [
+		isVertical,
+		size?.height,
+		size?.width,
+		fallbackExpandedSize
+	]);
+	const defaultExpandedSize = useMemo(() => {
+		return toCssSize(isVertical ? defaultSize.height : defaultSize.width, fallbackExpandedSize);
+	}, [
+		isVertical,
+		defaultSize.height,
+		defaultSize.width,
+		fallbackExpandedSize
+	]);
+	const [resizedExpandedSize, setResizedExpandedSize] = useState({});
+	const expandedOuterSize = controlledExpandedSize ?? (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ?? defaultExpandedSize;
+	const setExpandedMainSize = useCallback((nextSize) => {
+		if (!stableLayout) return;
+		const currentSize = isVertical ? nextSize.height : nextSize.width;
+		if (!currentSize) return;
+		const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);
+		setResizedExpandedSize((state) => isVertical ? {
+			...state,
+			vertical: normalizedSize
+		} : {
+			...state,
+			horizontal: normalizedSize
 		});
+	}, [
+		fallbackExpandedSize,
+		isVertical,
+		stableLayout
+	]);
+	const captureInitialExpandedSize = useCallback(() => {
+		if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;
+		const rect = resizableRef.current?.resizable?.getBoundingClientRect();
+		if (!rect) return void 0;
+		const nextInitialSize = isVertical ? {
+			height: rect.height,
+			width: "100%"
+		} : {
+			height: "100%",
+			width: rect.width
+		};
+		initialExpandedSizeRef.current = nextInitialSize;
+		return nextInitialSize;
+	}, [isVertical]);
+	useEffect(() => {
+		if (!isExpand) return;
+		captureInitialExpandedSize();
+	}, [captureInitialExpandedSize, isExpand]);
+	const toggleExpand = useCallback(() => {
+		if (expandable) setIsExpand(!isExpand);
 	}, [
 		expandable,
 		isExpand,
 		setIsExpand
 	]);
-	const handle = useMemo(() => /* @__PURE__ */ jsx(Center, {
-		className: toggleVariants({
-			placement: internalPlacement,
-			showHandleWideArea
-		}),
-		style: { opacity: isExpand ? pin ? void 0 : 0 : showHandleWhenCollapsed ? 1 : 0 },
-		children: /* @__PURE__ */ jsx(Center, {
-			className: classNames?.handle,
-			style: customStyles?.handle,
-			onClick: toggleExpand,
-			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(${isExpand ? 180 : 0}deg)`,
-					transition: "transform 0.3s ease"
-				}
-			})
-		})
-	}), [
-		toggleVariants,
-		internalPlacement,
-		isExpand,
-		pin,
-		showHandleWhenCollapsed,
-		classNames?.handle,
-		toggleExpand,
-		customStyles?.handle,
-		styles.handlerIcon,
-		Arrow
-	]);
-	const handleResize = useCallback((_, _direction, reference_, delta) => {
-		onSizeDragging?.(delta, {
-			height: reference_.style.height,
-			width: reference_.style.width
+	const clampResizeSize = useCallback((el) => {
+		const rect = el.getBoundingClientRect();
+		const currentMainSize = isVertical ? rect.height : rect.width;
+		const minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;
+		const maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;
+		let clampedMainSize = currentMainSize;
+		if (typeof minMainSize === "number") clampedMainSize = Math.max(clampedMainSize, minMainSize);
+		if (typeof maxMainSize === "number") clampedMainSize = Math.min(clampedMainSize, maxMainSize);
+		if (!Number.isFinite(clampedMainSize) || Math.abs(clampedMainSize - currentMainSize) < .5) return {
+			height: el.style.height,
+			width: el.style.width
+		};
+		const width = isVertical ? el.style.width || "100%" : `${clampedMainSize}px`;
+		const height = isVertical ? `${clampedMainSize}px` : el.style.height || "100%";
+		resizableRef.current?.updateSize({
+			height,
+			width
 		});
-	}, [onSizeDragging]);
-	const handleResizeStart = useCallback(() => {
-		dispatch({ type: "START_RESIZE" });
+		return {
+			height,
+			width
+		};
+	}, [
+		isVertical,
+		normalizedMaxHeight,
+		normalizedMaxWidth,
+		normalizedMinHeight,
+		normalizedMinWidth
+	]);
+	const handleResize = useCallback((_event, _direction, el, delta) => {
+		const nextSize = clampResizeSize(el);
+		setExpandedMainSize(nextSize);
+		onSizeDragging?.(delta, nextSize);
+	}, [
+		clampResizeSize,
+		onSizeDragging,
+		setExpandedMainSize
+	]);
+	const triggerResetWithoutTransition = useCallback(() => {
+		if (resetTransitionTimeoutRef.current) clearTimeout(resetTransitionTimeoutRef.current);
+		setShouldTransition(false);
+		resetTransitionTimeoutRef.current = setTimeout(() => {
+			setShouldTransition(true);
+		}, 0);
 	}, []);
-	const handleResizeStop = useCallback((e, direction, reference_, delta) => {
-		dispatch({ type: "STOP_RESIZE" });
-		onSizeChange?.(delta, {
-			height: reference_.style.height,
-			width: reference_.style.width
-		});
-	}, [onSizeChange]);
-	const inner = useMemo(() => /* @__PURE__ */ jsx(Resizable, {
+	const handleResetSize = useCallback(() => {
+		if (!canResizing) return;
+		const resetSize = captureInitialExpandedSize();
+		if (!resetSize) return;
+		triggerResetWithoutTransition();
+		const rect = resizableRef.current?.resizable?.getBoundingClientRect();
+		const prevMainSize = rect ? isVertical ? rect.height : rect.width : 0;
+		const resetMainSize = isVertical ? resetSize.height : resetSize.width;
+		const nextMainSize = typeof resetMainSize === "number" ? resetMainSize : prevMainSize;
+		resizableRef.current?.updateSize(resetSize);
+		setExpandedMainSize(resetSize);
+		onSizeChange?.(isVertical ? {
+			height: nextMainSize - prevMainSize,
+			width: 0
+		} : {
+			height: 0,
+			width: nextMainSize - prevMainSize
+		}, resetSize);
+	}, [
+		canResizing,
+		captureInitialExpandedSize,
+		isVertical,
+		onSizeChange,
+		setExpandedMainSize,
+		triggerResetWithoutTransition
+	]);
+	const handleResizeStart = useCallback((event) => {
+		if (event.detail === 2) {
+			handleResetSize();
+			return false;
+		}
+		if (resetTransitionTimeoutRef.current) {
+			clearTimeout(resetTransitionTimeoutRef.current);
+			resetTransitionTimeoutRef.current = void 0;
+		}
+		setShouldTransition(false);
+		setShowExpand(false);
+	}, [handleResetSize]);
+	const handleResizeStop = useCallback((_event, _direction, el, delta) => {
+		const nextSize = clampResizeSize(el);
+		setExpandedMainSize(nextSize);
+		setShouldTransition(true);
+		setShowExpand(true);
+		onSizeChange?.(delta, nextSize);
+	}, [
+		clampResizeSize,
+		onSizeChange,
+		setExpandedMainSize
+	]);
+	const resizeHandleClassName = useMemo(() => cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight), [reversed, showHandleHighlight]);
+	if (fullscreen) return /* @__PURE__ */ jsx("div", {
+		className: cx(styles.fullscreen, className),
+		style: cssVariables,
+		children
+	});
+	const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;
+	const stableOuterFlex = stableLayout ? {
+		display: "flex",
+		flexDirection: "column",
+		minHeight: 0
+	} : {};
+	const sidebarOuterStyle = isVertical ? {
+		height: isExpand ? expandedOuterSize : 0,
+		overflow: "hidden",
+		transition: shouldTransition ? "height 0.2s var(--ant-motion-ease-out, ease)" : "none",
+		width: "100%",
+		...stableOuterFlex
+	} : {
+		overflow: "hidden",
+		transition: shouldTransition ? "width 0.2s var(--ant-motion-ease-out, ease)" : "none",
+		width: isExpand ? expandedOuterSize : 0,
+		...stableLayout ? {
+			...stableOuterFlex,
+			flex: 1,
+			minWidth: 0,
+			height: "100%"
+		} : {}
+	};
+	const sidebarInnerStyle = stableLayout ? {
+		display: "flex",
+		flex: 1,
+		flexDirection: "column",
+		height: "100%",
+		minHeight: 0,
+		minWidth: 0,
+		width: "100%"
+	} : isVertical ? {
+		height: "100%",
+		width: "100%"
+	} : { width: "100%" };
+	const stableAsideStyle = stableLayout ? {
+		display: "flex",
+		flexDirection: "column",
+		minHeight: 0,
+		...mode === "fixed" ? { height: "100%" } : {}
+	} : {};
+	const stableResizableStyle = {
+		display: "flex",
+		flex: 1,
+		flexDirection: "column",
+		height: "100%",
+		minHeight: 0,
+		minWidth: 0,
+		width: "100%"
+	};
+	const panelNode = (!destroyOnClose || isExpand) && /* @__PURE__ */ jsx(Resizable, {
+		ref: resizableRef,
 		...sizeProps,
 		className: cx(styles.panel, classNames?.content),
-		enable: canResizing ? resizing : void 0,
-		handleClasses: canResizing ? { [reversePlacement(internalPlacement)]: cx(handleVariants({ placement: reversePlacement(internalPlacement) }), showHandleHighlight && styles.handleHighlight) } : {},
+		enable: canResizing ? resizing : DISABLED_RESIZING,
+		handleClasses: canResizing ? { [reversed]: resizeHandleClassName } : {},
 		style: {
 			...cssVariables,
-			opacity: isPending ? .95 : 1,
-			transition: state.isResizing ? "unset" : void 0,
+			transition: shouldTransition ? void 0 : "none",
+			...stableLayout ? stableResizableStyle : {},
 			...style
 		},
 		onResize: handleResize,
 		onResizeStart: handleResizeStart,
 		onResizeStop: handleResizeStop,
-		children
-	}), [
-		sizeProps,
-		styles.panel,
-		classNames?.content,
-		canResizing,
-		resizing,
-		internalPlacement,
-		handleVariants,
-		showHandleHighlight,
-		styles.handleHighlight,
-		handleResize,
-		handleResizeStart,
-		handleResizeStop,
-		state.isResizing,
-		isPending,
-		style,
-		children,
-		cx
-	]);
-	if (fullscreen) return /* @__PURE__ */ jsx("div", {
-		className: cx(styles.fullscreen, className),
-		style: cssVariables,
-		children
+		children: stableLayout ? /* @__PURE__ */ jsx("div", {
+			style: sidebarInnerStyle,
+			children
+		}) : children
 	});
 	return /* @__PURE__ */ jsxs("aside", {
 		dir,
 		ref,
-		style: cssVariables,
+		style: {
+			...cssVariables,
+			...stableAsideStyle
+		},
 		className: cx(panelVariants({
 			isExpand,
 			mode,
 			placement: internalPlacement,
 			showBorder
 		}), className),
-		children: [expandable && state.showExpand && handle, destroyOnClose ? isExpand && inner : inner]
+		children: [expandable && showExpand && /* @__PURE__ */ jsx(Center, {
+			className: toggleVariants({
+				placement: internalPlacement,
+				showHandleWideArea
+			}),
+			style: { opacity: isExpand ? pin ? void 0 : 0 : showHandleWhenCollapsed ? 1 : 0 },
+			children: /* @__PURE__ */ jsx(Center, {
+				className: classNames?.handle,
+				style: customStyles?.handle,
+				onClick: toggleExpand,
+				children: /* @__PURE__ */ jsx(Icon, {
+					className: styles.handlerIcon,
+					icon: Arrow,
+					size: 16,
+					style: {
+						...MARGIN_MAP[internalPlacement],
+						transform: `rotate(${isExpand ? 180 : 0}deg)`,
+						transition: "transform 0.3s ease"
+					}
+				})
+			})
+		}), stableLayout ? /* @__PURE__ */ jsx("div", {
+			style: sidebarOuterStyle,
+			children: panelNode
+		}) : panelNode]
 	});
 }, isEqual);
 DraggablePanel.displayName = "DraggablePanel";

package/es/DraggablePanel/DraggablePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n  memo,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useTransition,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { handleVariants, panelVariants, styles, toggleVariants } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { reversePlacement } from './utils';\n\n// Constants\nconst DEFAULT_HEIGHT = 180;\nconst DEFAULT_WIDTH = 280;\nconst DEFAULT_HEADER_HEIGHT = 0;\nconst DEFAULT_PIN = true;\nconst DEFAULT_MODE = 'fixed';\nconst DEFAULT_EXPANDABLE = true;\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_SHOW_HANDLE_WIDE_AREA = true;\n\n// State reducer for better state management\ninterface DraggablePanelState {\n  isResizing: boolean;\n  showExpand: boolean;\n}\n\ntype DraggablePanelAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { payload: boolean; type: 'SET_SHOW_EXPAND' };\n\nfunction draggablePanelReducer(\n  state: DraggablePanelState,\n  action: DraggablePanelAction,\n): DraggablePanelState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true, showExpand: false };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false, showExpand: true };\n    }\n    case 'SET_SHOW_EXPAND': {\n      return { ...state, showExpand: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n  ({\n    headerHeight = DEFAULT_HEADER_HEIGHT,\n    fullscreen,\n    maxHeight,\n    pin = DEFAULT_PIN,\n    mode = DEFAULT_MODE,\n    children,\n    placement = 'right',\n    resize,\n    style,\n    showBorder = true,\n    showHandleHighlight = false,\n    showHandleWideArea = DEFAULT_SHOW_HANDLE_WIDE_AREA,\n    backgroundColor,\n    size,\n    defaultSize: customizeDefaultSize,\n    minWidth,\n    minHeight,\n    maxWidth,\n    onSizeChange,\n    onSizeDragging,\n    expandable = DEFAULT_EXPANDABLE,\n    expand,\n    defaultExpand = DEFAULT_EXPAND,\n    onExpandChange,\n    className,\n    showHandleWhenCollapsed,\n    destroyOnClose,\n    styles: customStyles,\n    classNames,\n    dir,\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n    const isVertical = placement === 'top' || placement === 'bottom';\n    const [isPending, startTransition] = useTransition();\n\n    // Use ref for hover timeout to avoid memory leaks\n    const hoverTimeoutRef = useRef<any>(undefined);\n\n    // inherit direction from Ant Design ConfigProvider\n    const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n    const direction = dir ?? antdDirection;\n\n    // Handle RTL direction\n    const internalPlacement = useMemo(() => {\n      return direction === 'rtl' && ['left', 'right'].includes(placement)\n        ? placement === 'left'\n          ? 'right'\n          : 'left'\n        : placement;\n    }, [direction, placement]);\n\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-panel-bg': backgroundColor || '',\n        '--draggable-panel-header-height': `${headerHeight}px`,\n      }),\n      [backgroundColor, headerHeight],\n    );\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Initialize state with useReducer for better performance\n    const initialState: DraggablePanelState = {\n      isResizing: false,\n      showExpand: true,\n    };\n\n    const [state, dispatch] = useReducer(draggablePanelReducer, initialState);\n\n    // Auto-expand on hover if not pinned with optimized transition\n    useEffect(() => {\n      if (pin) return;\n\n      // Clear previous timeout\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current);\n      }\n\n      if (isHovering && !isExpand) {\n        startTransition(() => {\n          setIsExpand(true);\n        });\n      } else if (!isHovering && isExpand) {\n        // Add a small delay before collapsing to prevent flickering\n        hoverTimeoutRef.current = setTimeout(() => {\n          startTransition(() => {\n            setIsExpand(false);\n          });\n        }, 150);\n      }\n    }, [pin, isHovering, isExpand, setIsExpand]);\n\n    // Cleanup timeout on unmount\n    useEffect(() => {\n      return () => {\n        if (hoverTimeoutRef.current) {\n          clearTimeout(hoverTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    const canResizing = resize !== false && isExpand;\n\n    // Configure resizing handles\n    const resizing = useMemo(\n      () => ({\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: false,\n        right: false,\n        top: false,\n        topLeft: false,\n        topRight: false,\n        [reversePlacement(internalPlacement)]: true,\n        ...(resize as Enable),\n      }),\n      [internalPlacement, resize],\n    );\n\n    // Calculate default size based on orientation\n    const defaultSize: Size = useMemo(() => {\n      if (isVertical)\n        return {\n          height: DEFAULT_HEIGHT,\n          width: '100%',\n          ...customizeDefaultSize,\n        };\n\n      return {\n        height: '100%',\n        width: DEFAULT_WIDTH,\n        ...customizeDefaultSize,\n      };\n    }, [isVertical, customizeDefaultSize]);\n\n    // Determine appropriate size props based on expand state\n    const sizeProps = useMemo(() => {\n      if (!isExpand) {\n        return isVertical\n          ? { minHeight: 0, size: { height: 0 } }\n          : { minWidth: 0, size: { width: 0 } };\n      }\n\n      return {\n        defaultSize,\n        maxHeight: typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : maxHeight,\n        maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : maxWidth,\n        minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : minHeight,\n        minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : minWidth,\n        size: size as Size,\n      };\n    }, [isExpand, isVertical, defaultSize, maxHeight, maxWidth, minHeight, minWidth, size]);\n\n    // Determine the appropriate arrow icon based on placement\n    const Arrow = useMemo(() => {\n      switch (internalPlacement) {\n        case 'top': {\n          return ChevronDown;\n        }\n        case 'bottom': {\n          return ChevronUp;\n        }\n        case 'right': {\n          return ChevronLeft;\n        }\n        case 'left': {\n          return ChevronRight;\n        }\n        default: {\n          return ChevronLeft;\n        }\n      }\n    }, [internalPlacement]);\n\n    // Toggle expand state with transition for better performance\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      startTransition(() => {\n        setIsExpand(!isExpand);\n      });\n    }, [expandable, isExpand, setIsExpand]);\n\n    // Toggle handle component\n    const handle = useMemo(\n      () => (\n        <Center\n          className={toggleVariants({ placement: internalPlacement, showHandleWideArea })}\n          style={{ opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0 }}\n        >\n          <Center\n            className={classNames?.handle}\n            style={customStyles?.handle}\n            onClick={toggleExpand}\n          >\n            <Icon\n              className={styles.handlerIcon}\n              icon={Arrow}\n              size={16}\n              style={{\n                marginBottom: internalPlacement === 'top' ? 4 : 0,\n                marginLeft: internalPlacement === 'right' ? 4 : 0,\n                marginRight: internalPlacement === 'left' ? 4 : 0,\n                marginTop: internalPlacement === 'bottom' ? 4 : 0,\n                transform: `rotate(${isExpand ? 180 : 0}deg)`,\n                transition: 'transform 0.3s ease',\n              }}\n            />\n          </Center>\n        </Center>\n      ),\n      [\n        toggleVariants,\n        internalPlacement,\n        isExpand,\n        pin,\n        showHandleWhenCollapsed,\n        classNames?.handle,\n        toggleExpand,\n        customStyles?.handle,\n        styles.handlerIcon,\n        Arrow,\n      ],\n    );\n\n    // Handle resize events with memoization\n    const handleResize = useCallback(\n      (_: unknown, _direction: unknown, reference_: HTMLElement, delta: NumberSize) => {\n        onSizeDragging?.(delta, {\n          height: reference_.style.height,\n          width: reference_.style.width,\n        });\n      },\n      [onSizeDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop = useCallback(\n      (e: unknown, direction: unknown, reference_: HTMLElement, delta: NumberSize) => {\n        dispatch({ type: 'STOP_RESIZE' });\n        onSizeChange?.(delta, {\n          height: reference_.style.height,\n          width: reference_.style.width,\n        });\n      },\n      [onSizeChange],\n    );\n\n    // Main panel content\n    const inner = useMemo(\n      () => (\n        <Resizable\n          {...sizeProps}\n          className={cx(styles.panel, classNames?.content)}\n          enable={canResizing ? (resizing as Enable) : undefined}\n          handleClasses={\n            canResizing\n              ? {\n                  [reversePlacement(internalPlacement)]: cx(\n                    handleVariants({\n                      placement: reversePlacement(internalPlacement),\n                    }),\n                    showHandleHighlight && styles.handleHighlight,\n                  ),\n                }\n              : {}\n          }\n          style={{\n            ...cssVariables,\n            opacity: isPending ? 0.95 : 1,\n            transition: state.isResizing ? 'unset' : undefined,\n            ...style,\n          }}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n        >\n          {children}\n        </Resizable>\n      ),\n      [\n        sizeProps,\n        styles.panel,\n        classNames?.content,\n        canResizing,\n        resizing,\n        internalPlacement,\n        handleVariants,\n        showHandleHighlight,\n        styles.handleHighlight,\n        handleResize,\n        handleResizeStart,\n        handleResizeStop,\n        state.isResizing,\n        isPending,\n        style,\n        children,\n        cx,\n      ],\n    );\n\n    // For fullscreen mode, return a simpler layout\n    if (fullscreen) {\n      return (\n        <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n          {children}\n        </div>\n      );\n    }\n\n    return (\n      <aside\n        dir={dir}\n        ref={ref}\n        style={cssVariables}\n        className={cx(\n          panelVariants({\n            isExpand,\n            mode,\n            placement: internalPlacement,\n            showBorder,\n          }),\n          className,\n        )}\n      >\n        {expandable && state.showExpand && handle}\n        {destroyOnClose ? isExpand && inner : inner}\n      </aside>\n    );\n  },\n  isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}
+{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  startTransition,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { handleVariants, panelVariants, styles, toggleVariants } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { reversePlacement } from './utils';\n\nconst ARROW_MAP = {\n  bottom: ChevronUp,\n  left: ChevronRight,\n  right: ChevronLeft,\n  top: ChevronDown,\n} as const;\n\nconst MARGIN_MAP = {\n  bottom: { marginTop: 4 },\n  left: { marginRight: 4 },\n  right: { marginLeft: 4 },\n  top: { marginBottom: 4 },\n} as const;\n\nconst DISABLED_RESIZING: Enable = {\n  bottom: false,\n  bottomLeft: false,\n  bottomRight: false,\n  left: false,\n  right: false,\n  top: false,\n  topLeft: false,\n  topRight: false,\n};\n\nconst toCssSize = (value: string | number | undefined, fallback: string) => {\n  if (typeof value === 'number') return `${Math.max(value, 0)}px`;\n  if (typeof value === 'string' && value.length > 0) return value;\n  return fallback;\n};\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n  ({\n    headerHeight = 0,\n    fullscreen,\n    maxHeight,\n    pin = true,\n    mode = 'fixed',\n    children,\n    placement = 'right',\n    resize,\n    style,\n    showBorder = true,\n    showHandleHighlight = false,\n    showHandleWideArea = true,\n    backgroundColor,\n    size,\n    stableLayout = false,\n    defaultSize: customizeDefaultSize,\n    minWidth,\n    minHeight,\n    maxWidth,\n    onSizeChange,\n    onSizeDragging,\n    expandable = true,\n    expand,\n    defaultExpand = true,\n    onExpandChange,\n    className,\n    showHandleWhenCollapsed,\n    destroyOnClose,\n    styles: customStyles,\n    classNames,\n    dir,\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n    const isVertical = placement === 'top' || placement === 'bottom';\n    const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n    const resetTransitionTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n    const resizableRef = useRef<Resizable>(null);\n    const initialExpandedSizeRef = useRef<Size | undefined>(undefined);\n\n    const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n    const direction = dir ?? antdDirection;\n\n    const internalPlacement = useMemo(() => {\n      if (direction !== 'rtl') return placement;\n      if (placement === 'left') return 'right';\n      if (placement === 'right') return 'left';\n      return placement;\n    }, [direction, placement]);\n\n    const cssVariables = {\n      '--draggable-panel-bg': backgroundColor || '',\n      '--draggable-panel-header-height': `${headerHeight}px`,\n    } as Record<string, string>;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    const [shouldTransition, setShouldTransition] = useState(true);\n    const [showExpand, setShowExpand] = useState(true);\n\n    useEffect(() => {\n      if (pin) return;\n\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current);\n      }\n\n      if (isHovering && !isExpand) {\n        startTransition(() => setIsExpand(true));\n      } else if (!isHovering && isExpand) {\n        hoverTimeoutRef.current = setTimeout(() => {\n          startTransition(() => setIsExpand(false));\n        }, 150);\n      }\n    }, [pin, isHovering, isExpand, setIsExpand]);\n\n    useEffect(() => {\n      return () => {\n        if (hoverTimeoutRef.current) {\n          clearTimeout(hoverTimeoutRef.current);\n        }\n        if (resetTransitionTimeoutRef.current) {\n          clearTimeout(resetTransitionTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      initialExpandedSizeRef.current = undefined;\n    }, [internalPlacement]);\n\n    const reversed = reversePlacement(internalPlacement);\n    const canResizing = resize !== false && isExpand;\n\n    const resizing = useMemo(\n      () => ({\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: false,\n        right: false,\n        top: false,\n        topLeft: false,\n        topRight: false,\n        [reversed]: true,\n        ...(resize as Enable),\n      }),\n      [reversed, resize],\n    );\n\n    const defaultSize: Size = useMemo(() => {\n      if (isVertical) return { height: 180, width: '100%', ...customizeDefaultSize };\n      return { height: '100%', width: 280, ...customizeDefaultSize };\n    }, [isVertical, customizeDefaultSize]);\n    const normalizedMaxHeight = typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined;\n    const normalizedMaxWidth = typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined;\n    const normalizedMinHeight = typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined;\n    const normalizedMinWidth = typeof minWidth === 'number' ? Math.max(minWidth, 0) : undefined;\n\n    const sizeProps = useMemo(() => {\n      if (!stableLayout && !isExpand) {\n        return isVertical\n          ? { minHeight: 0, size: { height: 0 } }\n          : { minWidth: 0, size: { width: 0 } };\n      }\n\n      return {\n        defaultSize,\n        maxHeight: normalizedMaxHeight,\n        maxWidth: normalizedMaxWidth,\n        minHeight: normalizedMinHeight,\n        minWidth: normalizedMinWidth,\n        size: size as Size,\n      };\n    }, [\n      stableLayout,\n      isExpand,\n      isVertical,\n      defaultSize,\n      normalizedMaxHeight,\n      normalizedMaxWidth,\n      normalizedMinHeight,\n      normalizedMinWidth,\n      size,\n    ]);\n\n    const fallbackExpandedSize = isVertical ? '180px' : '280px';\n    const controlledExpandedSize = useMemo(() => {\n      const controlledSize = isVertical ? size?.height : size?.width;\n      if (controlledSize === undefined) return undefined;\n      return toCssSize(controlledSize, fallbackExpandedSize);\n    }, [isVertical, size?.height, size?.width, fallbackExpandedSize]);\n    const defaultExpandedSize = useMemo(() => {\n      const initialSize = isVertical ? defaultSize.height : defaultSize.width;\n      return toCssSize(initialSize, fallbackExpandedSize);\n    }, [isVertical, defaultSize.height, defaultSize.width, fallbackExpandedSize]);\n    const [resizedExpandedSize, setResizedExpandedSize] = useState<{\n      horizontal?: string;\n      vertical?: string;\n    }>({});\n    const expandedOuterSize =\n      controlledExpandedSize ??\n      (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ??\n      defaultExpandedSize;\n\n    const setExpandedMainSize = useCallback(\n      (nextSize: Size) => {\n        if (!stableLayout) return;\n\n        const currentSize = isVertical ? nextSize.height : nextSize.width;\n        if (!currentSize) return;\n\n        const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);\n        setResizedExpandedSize((state) =>\n          isVertical\n            ? { ...state, vertical: normalizedSize }\n            : { ...state, horizontal: normalizedSize },\n        );\n      },\n      [fallbackExpandedSize, isVertical, stableLayout],\n    );\n\n    const captureInitialExpandedSize = useCallback(() => {\n      if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;\n\n      const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n      if (!rect) return undefined;\n\n      const nextInitialSize = isVertical\n        ? ({ height: rect.height, width: '100%' } as Size)\n        : ({ height: '100%', width: rect.width } as Size);\n\n      initialExpandedSizeRef.current = nextInitialSize;\n      return nextInitialSize;\n    }, [isVertical]);\n\n    useEffect(() => {\n      if (!isExpand) return;\n      captureInitialExpandedSize();\n    }, [captureInitialExpandedSize, isExpand]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const clampResizeSize = useCallback(\n      (el: HTMLElement) => {\n        const rect = el.getBoundingClientRect();\n        const currentMainSize = isVertical ? rect.height : rect.width;\n        const minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;\n        const maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;\n\n        let clampedMainSize = currentMainSize;\n        if (typeof minMainSize === 'number')\n          clampedMainSize = Math.max(clampedMainSize, minMainSize);\n        if (typeof maxMainSize === 'number')\n          clampedMainSize = Math.min(clampedMainSize, maxMainSize);\n\n        if (\n          !Number.isFinite(clampedMainSize) ||\n          Math.abs(clampedMainSize - currentMainSize) < 0.5\n        ) {\n          return { height: el.style.height, width: el.style.width };\n        }\n\n        const width = isVertical ? el.style.width || '100%' : `${clampedMainSize}px`;\n        const height = isVertical ? `${clampedMainSize}px` : el.style.height || '100%';\n        resizableRef.current?.updateSize({ height, width });\n\n        return { height, width };\n      },\n      [\n        isVertical,\n        normalizedMaxHeight,\n        normalizedMaxWidth,\n        normalizedMinHeight,\n        normalizedMinWidth,\n      ],\n    );\n\n    const handleResize = useCallback(\n      (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n        const nextSize = clampResizeSize(el);\n        setExpandedMainSize(nextSize);\n        onSizeDragging?.(delta, nextSize);\n      },\n      [clampResizeSize, onSizeDragging, setExpandedMainSize],\n    );\n\n    const triggerResetWithoutTransition = useCallback(() => {\n      if (resetTransitionTimeoutRef.current) {\n        clearTimeout(resetTransitionTimeoutRef.current);\n      }\n\n      setShouldTransition(false);\n      resetTransitionTimeoutRef.current = setTimeout(() => {\n        setShouldTransition(true);\n      }, 0);\n    }, []);\n\n    const handleResetSize = useCallback(() => {\n      if (!canResizing) return;\n\n      const resetSize = captureInitialExpandedSize();\n      if (!resetSize) return;\n\n      triggerResetWithoutTransition();\n\n      const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n      const prevMainSize = rect ? (isVertical ? rect.height : rect.width) : 0;\n      const resetMainSize = isVertical ? resetSize.height : resetSize.width;\n      const nextMainSize = typeof resetMainSize === 'number' ? resetMainSize : prevMainSize;\n\n      resizableRef.current?.updateSize(resetSize);\n      setExpandedMainSize(resetSize);\n\n      onSizeChange?.(\n        isVertical\n          ? { height: nextMainSize - prevMainSize, width: 0 }\n          : { height: 0, width: nextMainSize - prevMainSize },\n        resetSize,\n      );\n    }, [\n      canResizing,\n      captureInitialExpandedSize,\n      isVertical,\n      onSizeChange,\n      setExpandedMainSize,\n      triggerResetWithoutTransition,\n    ]);\n\n    const handleResizeStart = useCallback(\n      (event: { detail?: number }) => {\n        if (event.detail === 2) {\n          handleResetSize();\n          return false;\n        }\n\n        if (resetTransitionTimeoutRef.current) {\n          clearTimeout(resetTransitionTimeoutRef.current);\n          resetTransitionTimeoutRef.current = undefined;\n        }\n\n        setShouldTransition(false);\n        setShowExpand(false);\n      },\n      [handleResetSize],\n    );\n\n    const handleResizeStop = useCallback(\n      (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n        const nextSize = clampResizeSize(el);\n        setExpandedMainSize(nextSize);\n        setShouldTransition(true);\n        setShowExpand(true);\n        onSizeChange?.(delta, nextSize);\n      },\n      [clampResizeSize, onSizeChange, setExpandedMainSize],\n    );\n\n    const resizeHandleClassName = useMemo(\n      () =>\n        cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight),\n      [reversed, showHandleHighlight],\n    );\n\n    if (fullscreen) {\n      return (\n        <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n          {children}\n        </div>\n      );\n    }\n\n    const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;\n    const stableOuterFlex = stableLayout\n      ? ({\n          display: 'flex',\n          flexDirection: 'column',\n          minHeight: 0,\n        } as const)\n      : {};\n\n    const sidebarOuterStyle = isVertical\n      ? {\n          height: isExpand ? expandedOuterSize : 0,\n          overflow: 'hidden',\n          transition: shouldTransition ? 'height 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n          width: '100%',\n          ...stableOuterFlex,\n        }\n      : {\n          overflow: 'hidden',\n          transition: shouldTransition ? 'width 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n          width: isExpand ? expandedOuterSize : 0,\n          ...(stableLayout\n            ? {\n                ...stableOuterFlex,\n                flex: 1,\n                minWidth: 0,\n                height: '100%',\n              }\n            : {}),\n        };\n\n    const stableInnerStyle: CSSProperties = {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      height: '100%',\n      minHeight: 0,\n      minWidth: 0,\n      width: '100%',\n    };\n    const sidebarInnerStyle: CSSProperties = stableLayout\n      ? stableInnerStyle\n      : isVertical\n        ? { height: '100%', width: '100%' }\n        : { width: '100%' };\n\n    const stableAsideStyle: CSSProperties = stableLayout\n      ? {\n          display: 'flex',\n          flexDirection: 'column',\n          minHeight: 0,\n          ...(mode === 'fixed' ? { height: '100%' } : {}),\n        }\n      : {};\n\n    const stableResizableStyle: CSSProperties = {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      height: '100%',\n      minHeight: 0,\n      minWidth: 0,\n      width: '100%',\n    };\n\n    const panelNode = (!destroyOnClose || isExpand) && (\n      <Resizable\n        ref={resizableRef}\n        {...sizeProps}\n        className={cx(styles.panel, classNames?.content)}\n        enable={canResizing ? (resizing as Enable) : DISABLED_RESIZING}\n        handleClasses={\n          canResizing\n            ? {\n                [reversed]: resizeHandleClassName,\n              }\n            : {}\n        }\n        style={{\n          ...cssVariables,\n          transition: shouldTransition ? undefined : 'none',\n          ...(stableLayout ? stableResizableStyle : {}),\n          ...style,\n        }}\n        onResize={handleResize}\n        onResizeStart={handleResizeStart}\n        onResizeStop={handleResizeStop}\n      >\n        {stableLayout ? <div style={sidebarInnerStyle}>{children}</div> : children}\n      </Resizable>\n    );\n\n    return (\n      <aside\n        dir={dir}\n        ref={ref}\n        style={{ ...cssVariables, ...stableAsideStyle }}\n        className={cx(\n          panelVariants({ isExpand, mode, placement: internalPlacement, showBorder }),\n          className,\n        )}\n      >\n        {expandable && showExpand && (\n          <Center\n            className={toggleVariants({ placement: internalPlacement, showHandleWideArea })}\n            style={{\n              opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0,\n            }}\n          >\n            <Center\n              className={classNames?.handle}\n              style={customStyles?.handle}\n              onClick={toggleExpand}\n            >\n              <Icon\n                className={styles.handlerIcon}\n                icon={Arrow}\n                size={16}\n                style={{\n                  ...MARGIN_MAP[internalPlacement],\n                  transform: `rotate(${isExpand ? 180 : 0}deg)`,\n                  transition: 'transform 0.3s ease',\n                }}\n              />\n            </Center>\n          </Center>\n        )}\n        {stableLayout ? <div style={sidebarOuterStyle}>{panelNode}</div> : panelNode}\n      </aside>\n    );\n  },\n  isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}