@rc-component/drawer 1.0.0 → 1.2.0

package/README.md

@@ -49,6 +49,8 @@ ReactDom.render(
 | prefixCls          | string                                                                      | 'drawer'                               | prefix class                                                                  |
 | width              | string \| number                                                            | null                                   | drawer content wrapper width, drawer level transition width                   |
 | height             | string \| number                                                            | null                                   | drawer content wrapper height, drawer level transition height                 |
+| defaultWidth       | string \| number                                                            | null                                   | default width for uncontrolled resizable drawer                               |
+| defaultHeight      | string \| number                                                            | null                                   | default height for uncontrolled resizable drawer                              |
 | open               | boolean                                                                     | false                                  | open or close menu                                                            |
 | defaultOpen        | boolean                                                                     | false                                  | default open menu                                                             |
 | placement          | string                                                                      | `left`                                 | `left` `top` `right` `bottom`                                                 |
@@ -64,6 +66,7 @@ ReactDom.render(
 | onClose            | func                                                                        | null                                   | close click function                                                          |
 | keyboard           | boolean                                                                     | true                                   | Whether support press esc to close                                            |
 | autoFocus          | boolean                                                                     | true                                   | Whether focusing on the drawer after it opened                                |
+| resizable          | { onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void; } | -                                      | Resizable configuration with optional callbacks                                |
 | onMouseEnter       | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse enter drawer panel                                         |
 | onMouseOver        | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse over drawer panel                                          |
 | onMouseLeave       | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse leave drawer panel                                         |

package/assets/index.css

@@ -17,7 +17,6 @@
 .rc-drawer-content-wrapper {
   position: absolute;
   z-index: 1050;
-  overflow: hidden;
   transition: transform 0.3s;
 }
 .rc-drawer-content-wrapper-hidden {
@@ -40,3 +39,234 @@
   background: #fff;
   pointer-events: auto;
 }
+.rc-drawer-resizable-dragger {
+  position: absolute;
+  z-index: 2;
+  pointer-events: auto;
+}
+.rc-drawer-resizable-dragger:hover {
+  background-color: #1890ff !important;
+}
+.rc-drawer-resizable-dragger-dragging {
+  background-color: #1890ff !important;
+}
+.rc-drawer-resizable-dragger-left {
+  top: 0;
+  bottom: 0;
+  right: -3px;
+  width: 6px;
+  cursor: ew-resize;
+}
+.rc-drawer-resizable-dragger-right {
+  top: 0;
+  bottom: 0;
+  left: -3px;
+  width: 6px;
+  cursor: ew-resize;
+}
+.rc-drawer-resizable-dragger-top {
+  left: 0;
+  right: 0;
+  bottom: -3px;
+  height: 6px;
+  cursor: ns-resize;
+}
+.rc-drawer-resizable-dragger-bottom {
+  left: 0;
+  right: 0;
+  top: -3px;
+  height: 6px;
+  cursor: ns-resize;
+}
+.rc-drawer {
+  overflow: hidden;
+  z-index: 9999;
+  transition: width 0s ease 0.3s, height 0s ease 0.3s, transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.rc-drawer > * {
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shadow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.rc-drawer.rc-drawer-open {
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.rc-drawer .rc-drawer-mask {
+  background: #000;
+  opacity: 0;
+  width: 100%;
+  height: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), height 0s ease 0.3s;
+}
+.rc-drawer-content-wrapper {
+  position: absolute;
+  background: #fff;
+}
+.rc-drawer-content {
+  overflow: auto;
+  z-index: 1;
+  position: relative;
+}
+.rc-drawer-handle {
+  position: absolute;
+  top: 72px;
+  width: 41px;
+  height: 40px;
+  cursor: pointer;
+  z-index: 0;
+  text-align: center;
+  line-height: 40px;
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+}
+.rc-drawer-handle-icon {
+  width: 14px;
+  height: 2px;
+  background: #333;
+  position: relative;
+  transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.rc-drawer-handle-icon::before,
+.rc-drawer-handle-icon::after {
+  content: '';
+  display: block;
+  position: absolute;
+  background: #333;
+  width: 100%;
+  height: 2px;
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.rc-drawer-handle-icon::before {
+  top: -5px;
+}
+.rc-drawer-handle-icon::after {
+  top: 5px;
+}
+.rc-drawer-left,
+.rc-drawer-right {
+  width: 0%;
+  height: 100%;
+}
+.rc-drawer-left .rc-drawer-content-wrapper,
+.rc-drawer-right .rc-drawer-content-wrapper,
+.rc-drawer-left .rc-drawer-content,
+.rc-drawer-right .rc-drawer-content {
+  height: 100%;
+}
+.rc-drawer-left.rc-drawer-open,
+.rc-drawer-right.rc-drawer-open {
+  width: 100%;
+}
+.rc-drawer-left.rc-drawer-open.no-mask,
+.rc-drawer-right.rc-drawer-open.no-mask {
+  width: 0%;
+}
+.rc-drawer-left {
+  top: 0;
+  left: 0;
+}
+.rc-drawer-left .rc-drawer-handle {
+  right: -40px;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+  border-radius: 0 4px 4px 0;
+}
+.rc-drawer-left.rc-drawer-open .rc-drawer-content-wrapper {
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+}
+.rc-drawer-right {
+  top: 0;
+  right: 0;
+}
+.rc-drawer-right .rc-drawer-content-wrapper {
+  right: 0;
+}
+.rc-drawer-right .rc-drawer-handle {
+  left: -40px;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  border-radius: 4px 0 0 4px;
+}
+.rc-drawer-right.rc-drawer-open .rc-drawer-content-wrapper {
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+}
+.rc-drawer-right.rc-drawer-open.no-mask {
+  right: 1px;
+  transform: translateX(1px);
+}
+.rc-drawer-top,
+.rc-drawer-bottom {
+  width: 100%;
+  height: 0%;
+}
+.rc-drawer-top .rc-drawer-content-wrapper,
+.rc-drawer-bottom .rc-drawer-content-wrapper,
+.rc-drawer-top .rc-drawer-content,
+.rc-drawer-bottom .rc-drawer-content {
+  width: 100%;
+}
+.rc-drawer-top .rc-drawer-content,
+.rc-drawer-bottom .rc-drawer-content {
+  height: 100%;
+}
+.rc-drawer-top.rc-drawer-open,
+.rc-drawer-bottom.rc-drawer-open {
+  height: 100%;
+}
+.rc-drawer-top.rc-drawer-open.no-mask,
+.rc-drawer-bottom.rc-drawer-open.no-mask {
+  height: 0%;
+}
+.rc-drawer-top .rc-drawer-handle,
+.rc-drawer-bottom .rc-drawer-handle {
+  left: 50%;
+  margin-left: -20px;
+}
+.rc-drawer-top {
+  top: 0;
+  left: 0;
+}
+.rc-drawer-top .rc-drawer-handle {
+  top: auto;
+  bottom: -40px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 0 0 4px 4px;
+}
+.rc-drawer-top.rc-drawer-open .rc-drawer-content-wrapper {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.rc-drawer-bottom {
+  bottom: 0;
+  left: 0;
+}
+.rc-drawer-bottom .rc-drawer-content-wrapper {
+  bottom: 0;
+}
+.rc-drawer-bottom .rc-drawer-handle {
+  top: -40px;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 4px 4px 0 0;
+}
+.rc-drawer-bottom.rc-drawer-open .rc-drawer-content-wrapper {
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
+}
+.rc-drawer-bottom.rc-drawer-open.no-mask {
+  bottom: 1px;
+  transform: translateY(1px);
+}
+.rc-drawer.rc-drawer-open .rc-drawer-mask {
+  opacity: 0.3;
+  height: 100%;
+  transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.rc-drawer.rc-drawer-open .rc-drawer-handle-icon {
+  background: transparent;
+}
+.rc-drawer.rc-drawer-open .rc-drawer-handle-icon::before {
+  transform: translateY(5px) rotate(45deg);
+}
+.rc-drawer.rc-drawer-open .rc-drawer-handle-icon::after {
+  transform: translateY(-5px) rotate(-45deg);
+}

package/es/Drawer.d.ts

@@ -8,11 +8,31 @@ export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inlin
     prefixCls?: string;
     open?: boolean;
     onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-    destroyOnClose?: boolean;
+    destroyOnHidden?: boolean;
     getContainer?: PortalProps['getContainer'];
     panelRef?: React.Ref<HTMLDivElement>;
     classNames?: DrawerClassNames;
     styles?: DrawerStyles;
+    /**
+     * @deprecated Use `size` instead. Will be removed in next major version.
+     */
+    width?: number | string;
+    /**
+     * @deprecated Use `size` instead. Will be removed in next major version.
+     */
+    height?: number | string;
+    /** Size of the drawer (width for left/right placement, height for top/bottom placement) */
+    size?: number | string;
+    /** Maximum size of the drawer */
+    maxSize?: number;
+    /** Default size for uncontrolled resizable drawer */
+    defaultSize?: number | string;
+    /** Resizable configuration - object with optional callbacks */
+    resizable?: {
+        onResize?: (size: number) => void;
+        onResizeStart?: () => void;
+        onResizeEnd?: () => void;
+    };
 }
 declare const Drawer: React.FC<DrawerProps>;
 export default Drawer;

package/es/Drawer.js

@@ -11,19 +11,24 @@ const Drawer = props => {
     placement = 'right',
     autoFocus = true,
     keyboard = true,
-    width = 378,
+    width,
+    height,
+    size,
+    maxSize,
     mask = true,
     maskClosable = true,
     getContainer,
     forceRender,
     afterOpenChange,
-    destroyOnClose,
+    destroyOnHidden,
     onMouseEnter,
     onMouseOver,
     onMouseLeave,
     onClick,
     onKeyDown,
     onKeyUp,
+    resizable,
+    defaultSize,
     // Refs
     panelRef
   } = props;
@@ -67,7 +72,7 @@ const Drawer = props => {
   }), [panelRef]);
 
   // ============================ Render ============================
-  if (!forceRender && !animatedVisible && !mergedOpen && destroyOnClose) {
+  if (!forceRender && !animatedVisible && !mergedOpen && destroyOnHidden) {
     return null;
   }
   const eventHandlers = {
@@ -86,11 +91,16 @@ const Drawer = props => {
     autoFocus,
     keyboard,
     width,
+    height,
+    size,
+    maxSize,
+    defaultSize,
     mask,
     maskClosable,
     inline: getContainer === false,
     afterOpenChange: internalAfterOpenChange,
     ref: popupRef,
+    resizable,
     ...eventHandlers
   };
   return /*#__PURE__*/React.createElement(RefContext.Provider, {

package/es/DrawerPanel.d.ts

@@ -19,8 +19,5 @@ export interface DrawerPanelProps extends DrawerPanelEvents, DrawerPanelAccessib
     children?: React.ReactNode;
     containerRef?: React.Ref<HTMLDivElement>;
 }
-declare const DrawerPanel: {
-    (props: DrawerPanelProps): React.JSX.Element;
-    displayName: string;
-};
+declare const DrawerPanel: React.FC<Readonly<DrawerPanelProps>>;
 export default DrawerPanel;

package/es/DrawerPopup.d.ts

@@ -24,6 +24,10 @@ export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessib
     children?: React.ReactNode;
     width?: number | string;
     height?: number | string;
+    /** Size of the drawer (width for left/right placement, height for top/bottom placement) */
+    size?: number | string;
+    /** Maximum size of the drawer */
+    maxSize?: number;
     mask?: boolean;
     maskClosable?: boolean;
     maskClassName?: string;
@@ -35,6 +39,13 @@ export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessib
     classNames?: DrawerClassNames;
     styles?: DrawerStyles;
     drawerRender?: (node: React.ReactNode) => React.ReactNode;
+    /** Default size for uncontrolled resizable drawer */
+    defaultSize?: number | string;
+    resizable?: {
+        onResize?: (size: number) => void;
+        onResizeStart?: () => void;
+        onResizeEnd?: () => void;
+    };
 }
 declare const RefDrawerPopup: React.ForwardRefExoticComponent<DrawerPopupProps & React.RefAttributes<HTMLDivElement>>;
 export default RefDrawerPopup;

package/es/DrawerPopup.js

@@ -6,7 +6,9 @@ import pickAttrs from "@rc-component/util/es/pickAttrs";
 import * as React from 'react';
 import DrawerContext from "./context";
 import DrawerPanel from "./DrawerPanel";
+import useDrag from "./hooks/useDrag";
 import { parseWidthHeight } from "./util";
+import { useEvent } from '@rc-component/util';
 const sentinelStyle = {
   width: 0,
   height: 0,
@@ -14,7 +16,7 @@ const sentinelStyle = {
   outline: 'none',
   position: 'absolute'
 };
-function DrawerPopup(props, ref) {
+const DrawerPopup = (props, ref) => {
   const {
     prefixCls,
     open,
@@ -37,6 +39,8 @@ function DrawerPopup(props, ref) {
     motion,
     width,
     height,
+    size,
+    maxSize,
     children,
     // Mask
     mask,
@@ -54,7 +58,9 @@ function DrawerPopup(props, ref) {
     onKeyDown,
     onKeyUp,
     styles,
-    drawerRender
+    drawerRender,
+    resizable,
+    defaultSize
   } = props;
 
   // ================================ Refs ================================
@@ -147,10 +153,10 @@ function DrawerPopup(props, ref) {
   }, []);
 
   // ============================ Mask ============================
-  const maskNode = mask && /*#__PURE__*/React.createElement(CSSMotion, _extends({
+  const maskNode = /*#__PURE__*/React.createElement(CSSMotion, _extends({
     key: "mask"
   }, maskMotion, {
-    visible: open
+    visible: mask && open
   }), ({
     className: motionMaskClassName,
     style: motionMaskStyle
@@ -167,28 +173,68 @@ function DrawerPopup(props, ref) {
 
   // =========================== Panel ============================
   const motionProps = typeof motion === 'function' ? motion(placement) : motion;
-  const wrapperStyle = {};
-  if (pushed && pushDistance) {
-    switch (placement) {
-      case 'top':
-        wrapperStyle.transform = `translateY(${pushDistance}px)`;
-        break;
-      case 'bottom':
-        wrapperStyle.transform = `translateY(${-pushDistance}px)`;
-        break;
-      case 'left':
-        wrapperStyle.transform = `translateX(${pushDistance}px)`;
-        break;
-      default:
-        wrapperStyle.transform = `translateX(${-pushDistance}px)`;
-        break;
+
+  // ============================ Size ============================
+  const [currentSize, setCurrentSize] = React.useState();
+  const isHorizontal = placement === 'left' || placement === 'right';
+
+  // Aggregate size logic with backward compatibility using useMemo
+  const mergedSize = React.useMemo(() => {
+    const legacySize = isHorizontal ? width : height;
+    const nextMergedSize = size ?? legacySize ?? currentSize ?? defaultSize ?? (isHorizontal ? 378 : undefined);
+    return parseWidthHeight(nextMergedSize);
+  }, [size, width, height, defaultSize, isHorizontal, currentSize]);
+
+  // >>> Style
+  const wrapperStyle = React.useMemo(() => {
+    const nextWrapperStyle = {};
+    if (pushed && pushDistance) {
+      switch (placement) {
+        case 'top':
+          nextWrapperStyle.transform = `translateY(${pushDistance}px)`;
+          break;
+        case 'bottom':
+          nextWrapperStyle.transform = `translateY(${-pushDistance}px)`;
+          break;
+        case 'left':
+          nextWrapperStyle.transform = `translateX(${pushDistance}px)`;
+          break;
+        default:
+          nextWrapperStyle.transform = `translateX(${-pushDistance}px)`;
+          break;
+      }
     }
-  }
-  if (placement === 'left' || placement === 'right') {
-    wrapperStyle.width = parseWidthHeight(width);
-  } else {
-    wrapperStyle.height = parseWidthHeight(height);
-  }
+    if (isHorizontal) {
+      nextWrapperStyle.width = parseWidthHeight(mergedSize);
+    } else {
+      nextWrapperStyle.height = parseWidthHeight(mergedSize);
+    }
+    return nextWrapperStyle;
+  }, [pushed, pushDistance, placement, isHorizontal, mergedSize]);
+
+  // =========================== Resize ===========================
+  const wrapperRef = React.useRef(null);
+  const onInternalResize = useEvent(size => {
+    setCurrentSize(size);
+    resizable?.onResize?.(size);
+  });
+  const {
+    dragElementProps,
+    isDragging
+  } = useDrag({
+    prefixCls: `${prefixCls}-resizable`,
+    direction: placement,
+    className: drawerClassNames?.dragger,
+    style: styles?.dragger,
+    maxSize,
+    containerRef: wrapperRef,
+    currentSize: mergedSize,
+    onResize: onInternalResize,
+    onResizeStart: resizable?.onResizeStart,
+    onResizeEnd: resizable?.onResizeEnd
+  });
+
+  // =========================== Events ===========================
   const eventHandlers = {
     onMouseEnter,
     onMouseOver,
@@ -197,6 +243,9 @@ function DrawerPopup(props, ref) {
     onKeyDown,
     onKeyUp
   };
+
+  // =========================== Render ==========================
+  // >>>>> Panel
   const panelNode = /*#__PURE__*/React.createElement(CSSMotion, _extends({
     key: "panel"
   }, motionProps, {
@@ -224,18 +273,19 @@ function DrawerPopup(props, ref) {
       aria: true
     }), eventHandlers), children);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: classNames(`${prefixCls}-content-wrapper`, drawerClassNames?.wrapper, motionClassName),
+      ref: wrapperRef,
+      className: classNames(`${prefixCls}-content-wrapper`, isDragging && `${prefixCls}-content-wrapper-dragging`, drawerClassNames?.wrapper, !isDragging && motionClassName),
       style: {
-        ...wrapperStyle,
         ...motionStyle,
+        ...wrapperStyle,
         ...styles?.wrapper
       }
     }, pickAttrs(props, {
       data: true
-    })), drawerRender ? drawerRender(content) : content);
+    })), resizable && /*#__PURE__*/React.createElement("div", dragElementProps), drawerRender ? drawerRender(content) : content);
   });
 
-  // =========================== Render ===========================
+  // >>>>> Container
   const containerStyle = {
     ...rootStyle
   };
@@ -266,7 +316,7 @@ function DrawerPopup(props, ref) {
     "aria-hidden": "true",
     "data-sentinel": "end"
   })));
-}
+};
 const RefDrawerPopup = /*#__PURE__*/React.forwardRef(DrawerPopup);
 if (process.env.NODE_ENV !== 'production') {
   RefDrawerPopup.displayName = 'DrawerPopup';

package/es/hooks/useDrag.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { Placement } from '../Drawer';
+export interface UseDragOptions {
+    prefixCls: string;
+    direction: Placement;
+    className?: string;
+    style?: React.CSSProperties;
+    maxSize?: number;
+    containerRef?: React.RefObject<HTMLElement>;
+    currentSize?: number | string;
+    onResize?: (size: number) => void;
+    onResizeEnd?: (size: number) => void;
+    onResizeStart?: (size: number) => void;
+}
+export interface UseDragReturn {
+    dragElementProps: {
+        className: string;
+        style: React.CSSProperties;
+        onMouseDown: (e: React.MouseEvent) => void;
+    };
+    isDragging: boolean;
+}
+export default function useDrag(options: UseDragOptions): UseDragReturn;

package/es/hooks/useDrag.js

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useEvent } from '@rc-component/util';
+export default function useDrag(options) {
+  const {
+    prefixCls,
+    direction,
+    className,
+    style,
+    maxSize,
+    containerRef,
+    currentSize,
+    onResize,
+    onResizeEnd,
+    onResizeStart
+  } = options;
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [startPos, setStartPos] = React.useState(0);
+  const [startSize, setStartSize] = React.useState(0);
+  const isHorizontal = direction === 'left' || direction === 'right';
+  const handleMouseDown = useEvent(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    if (isHorizontal) {
+      setStartPos(e.clientX);
+    } else {
+      setStartPos(e.clientY);
+    }
+
+    // Use provided currentSize, or fallback to container size
+    let startSize;
+    if (typeof currentSize === 'number') {
+      startSize = currentSize;
+    } else if (containerRef?.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      startSize = isHorizontal ? rect.width : rect.height;
+    }
+    setStartSize(startSize);
+    onResizeStart?.(startSize);
+  });
+  const handleMouseMove = useEvent(e => {
+    if (!isDragging) return;
+    const currentPos = isHorizontal ? e.clientX : e.clientY;
+    let delta = currentPos - startPos;
+
+    // Adjust delta direction based on placement
+    if (direction === 'right' || direction === 'bottom') {
+      delta = -delta;
+    }
+    let newSize = startSize + delta;
+
+    // Apply min/max size limits
+    if (newSize < 0) {
+      newSize = 0;
+    }
+    // Only apply maxSize if it's a valid positive number
+    if (maxSize && newSize > maxSize) {
+      newSize = maxSize;
+    }
+    onResize?.(newSize);
+  });
+  const handleMouseUp = React.useCallback(() => {
+    if (isDragging) {
+      setIsDragging(false);
+
+      // Get the final size after resize
+      if (containerRef?.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        const finalSize = isHorizontal ? rect.width : rect.height;
+        onResizeEnd?.(finalSize);
+      }
+    }
+  }, [isDragging, containerRef, onResizeEnd, isHorizontal]);
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const dragElementClassName = classNames(`${prefixCls}-dragger`, `${prefixCls}-dragger-${direction}`, {
+    [`${prefixCls}-dragger-dragging`]: isDragging,
+    [`${prefixCls}-dragger-horizontal`]: isHorizontal,
+    [`${prefixCls}-dragger-vertical`]: !isHorizontal
+  }, className);
+  return {
+    dragElementProps: {
+      className: dragElementClassName,
+      style,
+      onMouseDown: handleMouseDown
+    },
+    isDragging
+  };
+}

package/es/index.d.ts

@@ -1,4 +1,4 @@
 import Drawer from './Drawer';
-import type { DrawerProps } from './Drawer';
-export type { DrawerProps };
+import type { DrawerProps, Placement } from './Drawer';
+export type { DrawerProps, Placement };
 export default Drawer;

package/es/inter.d.ts

@@ -3,9 +3,11 @@ export interface DrawerClassNames {
     mask?: string;
     wrapper?: string;
     section?: string;
+    dragger?: string;
 }
 export interface DrawerStyles {
     mask?: React.CSSProperties;
     wrapper?: React.CSSProperties;
     section?: React.CSSProperties;
+    dragger?: React.CSSProperties;
 }

package/es/util.js

@@ -1,9 +1,15 @@
 import warning from "@rc-component/util/es/warning";
 import canUseDom from "@rc-component/util/es/Dom/canUseDom";
 export function parseWidthHeight(value) {
-  if (typeof value === 'string' && String(Number(value)) === value) {
-    warning(false, 'Invalid value type of `width` or `height` which should be number type instead.');
-    return Number(value);
+  if (typeof value === 'string') {
+    const num = Number(value.replace(/px$/i, ''));
+    const floatNum = parseFloat(value);
+    if (floatNum === num) {
+      warning(false, 'Invalid value type of `width` or `height` which should be number type instead.');
+    }
+    if (!Number.isNaN(num)) {
+      return num;
+    }
   }
   return value;
 }

package/lib/Drawer.d.ts

@@ -8,11 +8,31 @@ export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inlin
     prefixCls?: string;
     open?: boolean;
     onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-    destroyOnClose?: boolean;
+    destroyOnHidden?: boolean;
     getContainer?: PortalProps['getContainer'];
     panelRef?: React.Ref<HTMLDivElement>;
     classNames?: DrawerClassNames;
     styles?: DrawerStyles;
+    /**
+     * @deprecated Use `size` instead. Will be removed in next major version.
+     */
+    width?: number | string;
+    /**
+     * @deprecated Use `size` instead. Will be removed in next major version.
+     */
+    height?: number | string;
+    /** Size of the drawer (width for left/right placement, height for top/bottom placement) */
+    size?: number | string;
+    /** Maximum size of the drawer */
+    maxSize?: number;
+    /** Default size for uncontrolled resizable drawer */
+    defaultSize?: number | string;
+    /** Resizable configuration - object with optional callbacks */
+    resizable?: {
+        onResize?: (size: number) => void;
+        onResizeStart?: () => void;
+        onResizeEnd?: () => void;
+    };
 }
 declare const Drawer: React.FC<DrawerProps>;
 export default Drawer;

package/lib/Drawer.js

@@ -20,19 +20,24 @@ const Drawer = props => {
     placement = 'right',
     autoFocus = true,
     keyboard = true,
-    width = 378,
+    width,
+    height,
+    size,
+    maxSize,
     mask = true,
     maskClosable = true,
     getContainer,
     forceRender,
     afterOpenChange,
-    destroyOnClose,
+    destroyOnHidden,
     onMouseEnter,
     onMouseOver,
     onMouseLeave,
     onClick,
     onKeyDown,
     onKeyUp,
+    resizable,
+    defaultSize,
     // Refs
     panelRef
   } = props;
@@ -76,7 +81,7 @@ const Drawer = props => {
   }), [panelRef]);
 
   // ============================ Render ============================
-  if (!forceRender && !animatedVisible && !mergedOpen && destroyOnClose) {
+  if (!forceRender && !animatedVisible && !mergedOpen && destroyOnHidden) {
     return null;
   }
   const eventHandlers = {
@@ -95,11 +100,16 @@ const Drawer = props => {
     autoFocus,
     keyboard,
     width,
+    height,
+    size,
+    maxSize,
+    defaultSize,
     mask,
     maskClosable,
     inline: getContainer === false,
     afterOpenChange: internalAfterOpenChange,
     ref: popupRef,
+    resizable,
     ...eventHandlers
   };
   return /*#__PURE__*/React.createElement(_context.RefContext.Provider, {

package/lib/DrawerPanel.d.ts

@@ -19,8 +19,5 @@ export interface DrawerPanelProps extends DrawerPanelEvents, DrawerPanelAccessib
     children?: React.ReactNode;
     containerRef?: React.Ref<HTMLDivElement>;
 }
-declare const DrawerPanel: {
-    (props: DrawerPanelProps): React.JSX.Element;
-    displayName: string;
-};
+declare const DrawerPanel: React.FC<Readonly<DrawerPanelProps>>;
 export default DrawerPanel;

package/lib/DrawerPopup.d.ts

@@ -24,6 +24,10 @@ export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessib
     children?: React.ReactNode;
     width?: number | string;
     height?: number | string;
+    /** Size of the drawer (width for left/right placement, height for top/bottom placement) */
+    size?: number | string;
+    /** Maximum size of the drawer */
+    maxSize?: number;
     mask?: boolean;
     maskClosable?: boolean;
     maskClassName?: string;
@@ -35,6 +39,13 @@ export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessib
     classNames?: DrawerClassNames;
     styles?: DrawerStyles;
     drawerRender?: (node: React.ReactNode) => React.ReactNode;
+    /** Default size for uncontrolled resizable drawer */
+    defaultSize?: number | string;
+    resizable?: {
+        onResize?: (size: number) => void;
+        onResizeStart?: () => void;
+        onResizeEnd?: () => void;
+    };
 }
 declare const RefDrawerPopup: React.ForwardRefExoticComponent<DrawerPopupProps & React.RefAttributes<HTMLDivElement>>;
 export default RefDrawerPopup;

package/lib/DrawerPopup.js

@@ -11,7 +11,9 @@ var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttr
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("./context"));
 var _DrawerPanel = _interopRequireDefault(require("./DrawerPanel"));
+var _useDrag = _interopRequireDefault(require("./hooks/useDrag"));
 var _util = require("./util");
+var _util2 = require("@rc-component/util");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,7 +25,7 @@ const sentinelStyle = {
   outline: 'none',
   position: 'absolute'
 };
-function DrawerPopup(props, ref) {
+const DrawerPopup = (props, ref) => {
   const {
     prefixCls,
     open,
@@ -46,6 +48,8 @@ function DrawerPopup(props, ref) {
     motion,
     width,
     height,
+    size,
+    maxSize,
     children,
     // Mask
     mask,
@@ -63,7 +67,9 @@ function DrawerPopup(props, ref) {
     onKeyDown,
     onKeyUp,
     styles,
-    drawerRender
+    drawerRender,
+    resizable,
+    defaultSize
   } = props;
 
   // ================================ Refs ================================
@@ -156,10 +162,10 @@ function DrawerPopup(props, ref) {
   }, []);
 
   // ============================ Mask ============================
-  const maskNode = mask && /*#__PURE__*/React.createElement(_motion.default, _extends({
+  const maskNode = /*#__PURE__*/React.createElement(_motion.default, _extends({
     key: "mask"
   }, maskMotion, {
-    visible: open
+    visible: mask && open
   }), ({
     className: motionMaskClassName,
     style: motionMaskStyle
@@ -176,28 +182,68 @@ function DrawerPopup(props, ref) {
 
   // =========================== Panel ============================
   const motionProps = typeof motion === 'function' ? motion(placement) : motion;
-  const wrapperStyle = {};
-  if (pushed && pushDistance) {
-    switch (placement) {
-      case 'top':
-        wrapperStyle.transform = `translateY(${pushDistance}px)`;
-        break;
-      case 'bottom':
-        wrapperStyle.transform = `translateY(${-pushDistance}px)`;
-        break;
-      case 'left':
-        wrapperStyle.transform = `translateX(${pushDistance}px)`;
-        break;
-      default:
-        wrapperStyle.transform = `translateX(${-pushDistance}px)`;
-        break;
+
+  // ============================ Size ============================
+  const [currentSize, setCurrentSize] = React.useState();
+  const isHorizontal = placement === 'left' || placement === 'right';
+
+  // Aggregate size logic with backward compatibility using useMemo
+  const mergedSize = React.useMemo(() => {
+    const legacySize = isHorizontal ? width : height;
+    const nextMergedSize = size ?? legacySize ?? currentSize ?? defaultSize ?? (isHorizontal ? 378 : undefined);
+    return (0, _util.parseWidthHeight)(nextMergedSize);
+  }, [size, width, height, defaultSize, isHorizontal, currentSize]);
+
+  // >>> Style
+  const wrapperStyle = React.useMemo(() => {
+    const nextWrapperStyle = {};
+    if (pushed && pushDistance) {
+      switch (placement) {
+        case 'top':
+          nextWrapperStyle.transform = `translateY(${pushDistance}px)`;
+          break;
+        case 'bottom':
+          nextWrapperStyle.transform = `translateY(${-pushDistance}px)`;
+          break;
+        case 'left':
+          nextWrapperStyle.transform = `translateX(${pushDistance}px)`;
+          break;
+        default:
+          nextWrapperStyle.transform = `translateX(${-pushDistance}px)`;
+          break;
+      }
     }
-  }
-  if (placement === 'left' || placement === 'right') {
-    wrapperStyle.width = (0, _util.parseWidthHeight)(width);
-  } else {
-    wrapperStyle.height = (0, _util.parseWidthHeight)(height);
-  }
+    if (isHorizontal) {
+      nextWrapperStyle.width = (0, _util.parseWidthHeight)(mergedSize);
+    } else {
+      nextWrapperStyle.height = (0, _util.parseWidthHeight)(mergedSize);
+    }
+    return nextWrapperStyle;
+  }, [pushed, pushDistance, placement, isHorizontal, mergedSize]);
+
+  // =========================== Resize ===========================
+  const wrapperRef = React.useRef(null);
+  const onInternalResize = (0, _util2.useEvent)(size => {
+    setCurrentSize(size);
+    resizable?.onResize?.(size);
+  });
+  const {
+    dragElementProps,
+    isDragging
+  } = (0, _useDrag.default)({
+    prefixCls: `${prefixCls}-resizable`,
+    direction: placement,
+    className: drawerClassNames?.dragger,
+    style: styles?.dragger,
+    maxSize,
+    containerRef: wrapperRef,
+    currentSize: mergedSize,
+    onResize: onInternalResize,
+    onResizeStart: resizable?.onResizeStart,
+    onResizeEnd: resizable?.onResizeEnd
+  });
+
+  // =========================== Events ===========================
   const eventHandlers = {
     onMouseEnter,
     onMouseOver,
@@ -206,6 +252,9 @@ function DrawerPopup(props, ref) {
     onKeyDown,
     onKeyUp
   };
+
+  // =========================== Render ==========================
+  // >>>>> Panel
   const panelNode = /*#__PURE__*/React.createElement(_motion.default, _extends({
     key: "panel"
   }, motionProps, {
@@ -233,18 +282,19 @@ function DrawerPopup(props, ref) {
       aria: true
     }), eventHandlers), children);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: (0, _classnames.default)(`${prefixCls}-content-wrapper`, drawerClassNames?.wrapper, motionClassName),
+      ref: wrapperRef,
+      className: (0, _classnames.default)(`${prefixCls}-content-wrapper`, isDragging && `${prefixCls}-content-wrapper-dragging`, drawerClassNames?.wrapper, !isDragging && motionClassName),
       style: {
-        ...wrapperStyle,
         ...motionStyle,
+        ...wrapperStyle,
         ...styles?.wrapper
       }
     }, (0, _pickAttrs.default)(props, {
       data: true
-    })), drawerRender ? drawerRender(content) : content);
+    })), resizable && /*#__PURE__*/React.createElement("div", dragElementProps), drawerRender ? drawerRender(content) : content);
   });
 
-  // =========================== Render ===========================
+  // >>>>> Container
   const containerStyle = {
     ...rootStyle
   };
@@ -275,7 +325,7 @@ function DrawerPopup(props, ref) {
     "aria-hidden": "true",
     "data-sentinel": "end"
   })));
-}
+};
 const RefDrawerPopup = /*#__PURE__*/React.forwardRef(DrawerPopup);
 if (process.env.NODE_ENV !== 'production') {
   RefDrawerPopup.displayName = 'DrawerPopup';

package/lib/hooks/useDrag.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { Placement } from '../Drawer';
+export interface UseDragOptions {
+    prefixCls: string;
+    direction: Placement;
+    className?: string;
+    style?: React.CSSProperties;
+    maxSize?: number;
+    containerRef?: React.RefObject<HTMLElement>;
+    currentSize?: number | string;
+    onResize?: (size: number) => void;
+    onResizeEnd?: (size: number) => void;
+    onResizeStart?: (size: number) => void;
+}
+export interface UseDragReturn {
+    dragElementProps: {
+        className: string;
+        style: React.CSSProperties;
+        onMouseDown: (e: React.MouseEvent) => void;
+    };
+    isDragging: boolean;
+}
+export default function useDrag(options: UseDragOptions): UseDragReturn;

package/lib/hooks/useDrag.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDrag;
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _util = require("@rc-component/util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function useDrag(options) {
+  const {
+    prefixCls,
+    direction,
+    className,
+    style,
+    maxSize,
+    containerRef,
+    currentSize,
+    onResize,
+    onResizeEnd,
+    onResizeStart
+  } = options;
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [startPos, setStartPos] = React.useState(0);
+  const [startSize, setStartSize] = React.useState(0);
+  const isHorizontal = direction === 'left' || direction === 'right';
+  const handleMouseDown = (0, _util.useEvent)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    if (isHorizontal) {
+      setStartPos(e.clientX);
+    } else {
+      setStartPos(e.clientY);
+    }
+
+    // Use provided currentSize, or fallback to container size
+    let startSize;
+    if (typeof currentSize === 'number') {
+      startSize = currentSize;
+    } else if (containerRef?.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      startSize = isHorizontal ? rect.width : rect.height;
+    }
+    setStartSize(startSize);
+    onResizeStart?.(startSize);
+  });
+  const handleMouseMove = (0, _util.useEvent)(e => {
+    if (!isDragging) return;
+    const currentPos = isHorizontal ? e.clientX : e.clientY;
+    let delta = currentPos - startPos;
+
+    // Adjust delta direction based on placement
+    if (direction === 'right' || direction === 'bottom') {
+      delta = -delta;
+    }
+    let newSize = startSize + delta;
+
+    // Apply min/max size limits
+    if (newSize < 0) {
+      newSize = 0;
+    }
+    // Only apply maxSize if it's a valid positive number
+    if (maxSize && newSize > maxSize) {
+      newSize = maxSize;
+    }
+    onResize?.(newSize);
+  });
+  const handleMouseUp = React.useCallback(() => {
+    if (isDragging) {
+      setIsDragging(false);
+
+      // Get the final size after resize
+      if (containerRef?.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        const finalSize = isHorizontal ? rect.width : rect.height;
+        onResizeEnd?.(finalSize);
+      }
+    }
+  }, [isDragging, containerRef, onResizeEnd, isHorizontal]);
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const dragElementClassName = (0, _classnames.default)(`${prefixCls}-dragger`, `${prefixCls}-dragger-${direction}`, {
+    [`${prefixCls}-dragger-dragging`]: isDragging,
+    [`${prefixCls}-dragger-horizontal`]: isHorizontal,
+    [`${prefixCls}-dragger-vertical`]: !isHorizontal
+  }, className);
+  return {
+    dragElementProps: {
+      className: dragElementClassName,
+      style,
+      onMouseDown: handleMouseDown
+    },
+    isDragging
+  };
+}

package/lib/index.d.ts

@@ -1,4 +1,4 @@
 import Drawer from './Drawer';
-import type { DrawerProps } from './Drawer';
-export type { DrawerProps };
+import type { DrawerProps, Placement } from './Drawer';
+export type { DrawerProps, Placement };
 export default Drawer;

package/lib/inter.d.ts

@@ -3,9 +3,11 @@ export interface DrawerClassNames {
     mask?: string;
     wrapper?: string;
     section?: string;
+    dragger?: string;
 }
 export interface DrawerStyles {
     mask?: React.CSSProperties;
     wrapper?: React.CSSProperties;
     section?: React.CSSProperties;
+    dragger?: React.CSSProperties;
 }

package/lib/util.js

@@ -9,9 +9,15 @@ var _warning = _interopRequireDefault(require("@rc-component/util/lib/warning"))
 var _canUseDom = _interopRequireDefault(require("@rc-component/util/lib/Dom/canUseDom"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function parseWidthHeight(value) {
-  if (typeof value === 'string' && String(Number(value)) === value) {
-    (0, _warning.default)(false, 'Invalid value type of `width` or `height` which should be number type instead.');
-    return Number(value);
+  if (typeof value === 'string') {
+    const num = Number(value.replace(/px$/i, ''));
+    const floatNum = parseFloat(value);
+    if (floatNum === num) {
+      (0, _warning.default)(false, 'Invalid value type of `width` or `height` which should be number type instead.');
+    }
+    if (!Number.isNaN(num)) {
+      return num;
+    }
   }
   return value;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/drawer",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "drawer component for react",
   "keywords": [
     "react",
@@ -53,9 +53,10 @@
     "@rc-component/father-plugin": "^2.0.2",
     "@rc-component/np": "^1.0.0",
     "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.3.0",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^29.5.11",
+    "@types/node": "^24.3.0",
     "@types/raf": "^3.4.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
@@ -69,7 +70,7 @@
     "glob": "^10.3.10",
     "husky": "^9.0.10",
     "less": "^4.2.0",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^16.1.5",
     "prettier": "^3.0.0",
     "rc-test": "^7.0.9",
     "react": "^19.0.0",