@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/es/utils/useEditableMap/index.d.ts

@@ -15,7 +15,7 @@ export declare function useEditableMap<RecordType>(props: RowEditableConfig<Reco
     setDataSource: (dataSource: RecordType) => void;
 }): {
     editableKeys: React.Key[];
-    setEditableRowKeys: (updater: React.Key[] | ((origin: React.Key[]) => React.Key[]), ignoreDestroy?: boolean | undefined) => void;
+    setEditableRowKeys: (updater: React.Key[] | ((prev: React.Key[]) => React.Key[])) => void;
     isEditable: (recordKey: RecordKey) => boolean;
     actionRender: (key: RecordKey, config?: ActionTypeText<RecordType>) => React.ReactNode[] | (import("react/jsx-runtime").JSX.Element | undefined)[];
     startEditable: (recordKey: RecordKey, recordValue?: any) => boolean;

package/es/utils/useEditableMap/index.js

@@ -1,9 +1,4 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-/* eslint-disable react-hooks/exhaustive-deps */import { get, useMergedState } from '@rc-component/util';
+/* eslint-disable react-hooks/exhaustive-deps */import { get, useControlledState } from '@rc-component/util';
 import { message } from 'antd';
 import { useCallback, useMemo, useRef } from 'react';
 import { useRefFunction } from '..';
@@ -14,7 +9,7 @@ import { defaultActionRender, recordKeyToString } from "../useEditableArray";
  * 显示警告信息
  * @param messageStr
  */
-var warning = function warning(messageStr) {
+const warning = messageStr => {
   return message.warning(messageStr);
 };
 /**
@@ -23,10 +18,14 @@ var warning = function warning(messageStr) {
  * @param params
  * @param action
  */
-function editableRowByKey(_ref) {
-  var data = _ref.data,
-    row = _ref.row;
-  return _objectSpread(_objectSpread({}, data), row);
+function editableRowByKey({
+  data,
+  row
+}) {
+  return {
+    ...data,
+    ...row
+  };
 }
 /**
  * 一个方便的hooks 用于维护编辑的状态
@@ -37,50 +36,45 @@ export function useEditableMap(props) {
   /**
    * 点击开始编辑之前的保存数据用的
    */
-  var preEditRowRef = useRef(null);
-  var editableType = props.type || 'single';
+  const preEditRowRef = useRef(null);
+  const preEditRowRefs = useRef(new Map());
+  const editableType = props.type || 'single';
 
   // Internationalization
-  var intl = useIntl();
-  var _useMergedState = useMergedState([], {
-      value: props.editableKeys,
-      onChange: props.onChange ? function (keys) {
-        var _props$onChange;
-        props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props,
-        // 计算编辑的key
-        keys, props.dataSource);
-      } : undefined
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    editableKeys = _useMergedState2[0],
-    setEditableRowKeys = _useMergedState2[1];
+  const intl = useIntl();
+  const [editableKeys, setEditableRowKeysInner] = useControlledState([], props.editableKeys);
+  const setEditableRowKeys = useCallback(updater => {
+    setEditableRowKeysInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props?.onChange?.(next, props.dataSource);
+      return next;
+    });
+  }, [props.onChange, props.dataSource]);
 
   /** 一个用来标志的set 提供了方便的 api 来去重什么的 */
-  var editableKeysSet = useMemo(function () {
-    var keys = editableType === 'single' ? (editableKeys === null || editableKeys === void 0 ? void 0 : editableKeys.slice(0, 1)) || [] : editableKeys || [];
-    return new Set(keys.map(function (key) {
-      return String(key);
-    }));
+  const editableKeysSet = useMemo(() => {
+    const keys = editableType === 'single' ? editableKeys?.slice(0, 1) || [] : editableKeys || [];
+    return new Set(keys.map(key => String(key)));
   }, [editableKeys, editableType]);
 
   /**
    * 检查 key 是否在编辑列表中
    * 使用 editableKeysSet 进行快速查找，性能更好
    */
-  var checkKeyInEditableList = useRefFunction(function (recordKey) {
-    var keyStr = String(recordKeyToString(recordKey));
+  const checkKeyInEditableList = useRefFunction(recordKey => {
+    const keyStr = String(recordKeyToString(recordKey));
     return editableKeysSet.has(keyStr);
   });
 
   /** 这行是不是编辑状态 */
-  var isEditable = useCallback(function (recordKey) {
+  const isEditable = useCallback(recordKey => {
     return checkKeyInEditableList(recordKey);
   }, [checkKeyInEditableList]);
 
   /**
    * 验证是否可以开始编辑
    */
-  var validateCanStartEdit = useRefFunction(function () {
+  const validateCanStartEdit = useRefFunction(() => {
     // 如果是单行模式，检查是否已有编辑中的行
     if (editableType === 'single' && editableKeys && editableKeys.length > 0) {
       warning(props.onlyOneLineEditorAlertMessage || intl.getMessage('editableTable.onlyOneLineEditor', '只能同时编辑一行'));
@@ -95,13 +89,12 @@ export function useEditableMap(props) {
    * @param recordKey
    * @param recordValue
    */
-  var startEditable = useRefFunction(function (recordKey, recordValue) {
-    var _ref2;
+  const startEditable = useRefFunction((recordKey, recordValue) => {
     // 验证是否可以开始编辑
     if (!validateCanStartEdit()) {
       return false;
     }
-    var keyStr = String(recordKeyToString(recordKey));
+    const keyStr = String(recordKeyToString(recordKey));
 
     // 检查是否已经在编辑列表中，避免重复添加
     if (checkKeyInEditableList(recordKey)) {
@@ -109,10 +102,11 @@ export function useEditableMap(props) {
     }
 
     // 保存编辑前的数据
-    preEditRowRef.current = (_ref2 = recordValue !== null && recordValue !== void 0 ? recordValue : get(props.dataSource, Array.isArray(recordKey) ? recordKey : [recordKey])) !== null && _ref2 !== void 0 ? _ref2 : null;
+    preEditRowRef.current = recordValue ?? get(props.dataSource, Array.isArray(recordKey) ? recordKey : [recordKey]) ?? null;
+    preEditRowRefs.current.set(String(recordKeyToString(recordKey)), preEditRowRef.current);
 
     // 更新编辑 keys（不直接修改 editableKeysSet）
-    var newKeys = editableType === 'single' ? [keyStr] : [].concat(_toConsumableArray(editableKeys || []), [keyStr]);
+    const newKeys = editableType === 'single' ? [keyStr] : [...(editableKeys || []), keyStr];
     setEditableRowKeys(newKeys);
     return true;
   });
@@ -122,8 +116,8 @@ export function useEditableMap(props) {
    *
    * @param recordKey
    */
-  var cancelEditable = useRefFunction(function (recordKey) {
-    var keyStr = String(recordKeyToString(recordKey));
+  const cancelEditable = useRefFunction(recordKey => {
+    const keyStr = String(recordKeyToString(recordKey));
 
     // 检查是否在编辑列表中
     if (!checkKeyInEditableList(recordKey)) {
@@ -131,9 +125,7 @@ export function useEditableMap(props) {
     }
 
     // 更新编辑 keys（不直接修改 editableKeysSet）
-    var newKeys = (editableKeys || []).filter(function (key) {
-      return String(key) !== keyStr;
-    });
+    const newKeys = (editableKeys || []).filter(key => String(key) !== keyStr);
     setEditableRowKeys(newKeys);
     return true;
   });
@@ -141,100 +133,62 @@ export function useEditableMap(props) {
   /**
    * 取消编辑的回调
    */
-  var onCancel = useRefFunction( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(recordKey, editRow, originRow, newLine) {
-      var _props$onCancel;
-      var success;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return props === null || props === void 0 || (_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 ? void 0 : _props$onCancel.call(props, recordKey, editRow, originRow, newLine);
-          case 2:
-            success = _context.sent;
-            if (!(success === false)) {
-              _context.next = 5;
-              break;
-            }
-            return _context.abrupt("return", false);
-          case 5:
-            return _context.abrupt("return", true);
-          case 6:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x, _x2, _x3, _x4) {
-      return _ref3.apply(this, arguments);
-    };
-  }());
+  const onCancel = useRefFunction(async (recordKey, editRow, originRow, newLine) => {
+    const success = await props?.onCancel?.(recordKey, editRow, originRow, newLine);
+    if (success === false) {
+      return false;
+    }
+    return true;
+  });
 
   /**
    * 保存编辑的回调
    */
-  var onSave = useRefFunction( /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(recordKey, editRow, originRow) {
-      var _props$onSave;
-      var success, actionProps;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return props === null || props === void 0 || (_props$onSave = props.onSave) === null || _props$onSave === void 0 ? void 0 : _props$onSave.call(props, recordKey, editRow, originRow);
-          case 2:
-            success = _context2.sent;
-            if (!(success === false)) {
-              _context2.next = 5;
-              break;
-            }
-            return _context2.abrupt("return", false);
-          case 5:
-            _context2.next = 7;
-            return cancelEditable(recordKey);
-          case 7:
-            // 更新数据源
-            actionProps = {
-              data: props.dataSource,
-              row: editRow,
-              key: recordKey,
-              childrenColumnName: props.childrenColumnName || 'children'
-            };
-            props.setDataSource(editableRowByKey(actionProps));
-            return _context2.abrupt("return", true);
-          case 10:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function (_x5, _x6, _x7) {
-      return _ref4.apply(this, arguments);
+  const onSave = useRefFunction(async (recordKey, editRow, originRow) => {
+    const success = await props?.onSave?.(recordKey, editRow, originRow);
+    if (success === false) {
+      return false;
+    }
+
+    // 先退出编辑状态
+    await cancelEditable(recordKey);
+    preEditRowRefs.current.delete(String(recordKeyToString(recordKey)));
+
+    // 更新数据源
+    const actionProps = {
+      data: props.dataSource,
+      row: editRow,
+      key: recordKey,
+      childrenColumnName: props.childrenColumnName || 'children'
     };
-  }());
-  var saveText = intl.getMessage('editableTable.action.save', '保存');
-  var deleteText = intl.getMessage('editableTable.action.delete', '删除');
-  var cancelText = intl.getMessage('editableTable.action.cancel', '取消');
+    props.setDataSource(editableRowByKey(actionProps));
+    return true;
+  });
+  const saveText = intl.getMessage('editableTable.action.save', '保存');
+  const deleteText = intl.getMessage('editableTable.action.delete', '删除');
+  const cancelText = intl.getMessage('editableTable.action.cancel', '取消');
 
   /**
    * 渲染操作按钮
    */
-  var actionRender = useCallback(function (key, config) {
-    var renderConfig = _objectSpread({
+  const actionRender = useCallback((key, config) => {
+    const renderConfig = {
       recordKey: key,
-      cancelEditable: cancelEditable,
-      onCancel: onCancel,
-      onSave: onSave,
-      editableKeys: editableKeys,
-      setEditableRowKeys: setEditableRowKeys,
-      saveText: saveText,
-      cancelText: cancelText,
-      preEditRowRef: preEditRowRef,
-      deleteText: deleteText,
-      deletePopconfirmMessage: "".concat(intl.getMessage('deleteThisLine', '删除此项'), "?"),
-      editorType: 'Map'
-    }, config);
-    var renderResult = defaultActionRender(props.dataSource, renderConfig);
+      cancelEditable,
+      onCancel,
+      onSave,
+      editableKeys,
+      setEditableRowKeys,
+      saveText,
+      cancelText,
+      preEditRowRef,
+      preEditRowRefs,
+      deleteText,
+      deletePopconfirmMessage: `${intl.getMessage('deleteThisLine', '删除此项')}?`,
+      editorType: 'Map',
+      ...config
+    };
+    const renderResult = defaultActionRender(props.dataSource, renderConfig);
     if (props.actionRender) {
       return props.actionRender(props.dataSource, renderConfig, {
         save: renderResult.save,
@@ -245,11 +199,11 @@ export function useEditableMap(props) {
     return [renderResult.save, renderResult.delete, renderResult.cancel];
   }, [editableKeys, props.dataSource, cancelEditable, onCancel, onSave]);
   return {
-    editableKeys: editableKeys,
-    setEditableRowKeys: setEditableRowKeys,
-    isEditable: isEditable,
-    actionRender: actionRender,
-    startEditable: startEditable,
-    cancelEditable: cancelEditable
+    editableKeys,
+    setEditableRowKeys,
+    isEditable,
+    actionRender,
+    startEditable,
+    cancelEditable
   };
 }

package/es/utils/useMediaQuery/index.d.ts

@@ -35,6 +35,6 @@ export type MediaQueryKey = keyof typeof MediaQueryEnum;
  * `Rendered more hooks than during the previous render.`
  * So should use Array.forEach
  */
-export declare const getScreenClassName: () => "xxl" | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
-declare const useBreakpoint: () => "xxl" | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
+export declare const getScreenClassName: () => "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined;
+declare const useBreakpoint: () => "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined;
 export { useBreakpoint };

package/es/utils/useMediaQuery/index.js

@@ -1,34 +1,38 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { theme } from 'antd';
 import { useEffect, useState } from 'react';
 import useMediaQuery from "./query";
-export var MediaQueryEnum = {
+const {
+  getDesignToken
+} = theme;
+const token = getDesignToken();
+export const MediaQueryEnum = {
   xs: {
-    maxWidth: 575,
-    matchMedia: '(max-width: 575px)'
+    maxWidth: token.screenXSMax,
+    matchMedia: `(max-width: ${token.screenXSMax}px)`
   },
   sm: {
-    minWidth: 576,
-    maxWidth: 767,
-    matchMedia: '(min-width: 576px) and (max-width: 767px)'
+    minWidth: token.screenSMMin,
+    maxWidth: token.screenSMMax,
+    matchMedia: `(min-width: ${token.screenSMMin}px) and (max-width: ${token.screenSMMax}px)`
   },
   md: {
-    minWidth: 768,
-    maxWidth: 991,
-    matchMedia: '(min-width: 768px) and (max-width: 991px)'
+    minWidth: token.screenMDMin,
+    maxWidth: token.screenMDMax,
+    matchMedia: `(min-width: ${token.screenMDMin}px) and (max-width: ${token.screenMDMax}px)`
   },
   lg: {
-    minWidth: 992,
-    maxWidth: 1199,
-    matchMedia: '(min-width: 992px) and (max-width: 1199px)'
+    minWidth: token.screenLGMin,
+    maxWidth: token.screenLGMax,
+    matchMedia: `(min-width: ${token.screenLGMin}px) and (max-width: ${token.screenLGMax}px)`
   },
   xl: {
-    minWidth: 1200,
-    maxWidth: 1599,
-    matchMedia: '(min-width: 1200px) and (max-width: 1599px)'
+    minWidth: token.screenXLMin,
+    maxWidth: token.screenXLMax,
+    matchMedia: `(min-width: ${token.screenXLMin}px) and (max-width: ${token.screenXLMax}px)`
   },
   xxl: {
-    minWidth: 1600,
-    matchMedia: '(min-width: 1600px)'
+    minWidth: token.screenXXLMin,
+    matchMedia: `(min-width: ${token.screenXXLMin}px)`
   }
 };
 /**
@@ -37,14 +41,16 @@ export var MediaQueryEnum = {
  * `Rendered more hooks than during the previous render.`
  * So should use Array.forEach
  */
-export var getScreenClassName = function getScreenClassName() {
-  var queryKey = undefined;
+export const getScreenClassName = () => {
+  let queryKey = undefined;
   // support ssr
   if (typeof window === 'undefined') {
     return queryKey;
   }
-  var mediaQueryKey = Object.keys(MediaQueryEnum).find(function (key) {
-    var matchMedia = MediaQueryEnum[key].matchMedia;
+  const mediaQueryKey = Object.keys(MediaQueryEnum).find(key => {
+    const {
+      matchMedia
+    } = MediaQueryEnum[key];
     if (window.matchMedia(matchMedia).matches) {
       return true;
     }
@@ -53,18 +59,15 @@ export var getScreenClassName = function getScreenClassName() {
   queryKey = mediaQueryKey;
   return queryKey;
 };
-var useBreakpoint = function useBreakpoint() {
-  var isMd = useMediaQuery(MediaQueryEnum.md.matchMedia);
-  var isLg = useMediaQuery(MediaQueryEnum.lg.matchMedia);
-  var isXxl = useMediaQuery(MediaQueryEnum.xxl.matchMedia);
-  var isXl = useMediaQuery(MediaQueryEnum.xl.matchMedia);
-  var isSm = useMediaQuery(MediaQueryEnum.sm.matchMedia);
-  var isXs = useMediaQuery(MediaQueryEnum.xs.matchMedia);
-  var _useState = useState(getScreenClassName()),
-    _useState2 = _slicedToArray(_useState, 2),
-    colSpan = _useState2[0],
-    setColSpan = _useState2[1];
-  useEffect(function () {
+const useBreakpoint = () => {
+  const isMd = useMediaQuery(MediaQueryEnum.md.matchMedia);
+  const isLg = useMediaQuery(MediaQueryEnum.lg.matchMedia);
+  const isXxl = useMediaQuery(MediaQueryEnum.xxl.matchMedia);
+  const isXl = useMediaQuery(MediaQueryEnum.xl.matchMedia);
+  const isSm = useMediaQuery(MediaQueryEnum.sm.matchMedia);
+  const isXs = useMediaQuery(MediaQueryEnum.xs.matchMedia);
+  const [colSpan, setColSpan] = useState(getScreenClassName());
+  useEffect(() => {
     if (process.env.NODE_ENV === 'TEST') {
       setColSpan(process.env.USE_MEDIA || 'md');
       return;

package/es/utils/useMediaQuery/query.js

@@ -1,31 +1,21 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useEffect, useLayoutEffect, useState } from 'react';
 export default function useMediaQuery(mediaQuery) {
-  var isSsr = typeof window === 'undefined';
-  var _useState = useState(function () {
-      return isSsr ? false : window.matchMedia(mediaQuery).matches;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    matches = _useState2[0],
-    setMatches = _useState2[1];
+  const isSsr = typeof window === 'undefined';
+  const [matches, setMatches] = useState(() => isSsr ? false : window.matchMedia(mediaQuery).matches);
 
   // 在 SSR 环境中使用 useEffect，在客户端使用 useLayoutEffect
   // 这样可以避免 SSR 警告，同时在客户端保持同步更新
   // 使用条件表达式确保 hooks 调用顺序一致
-  var EffectHook = isSsr ? useEffect : useLayoutEffect;
-  EffectHook(function () {
+  const EffectHook = isSsr ? useEffect : useLayoutEffect;
+  EffectHook(() => {
     if (isSsr) {
       return;
     }
-    var mediaQueryList = window.matchMedia(mediaQuery);
-    var listener = function listener(e) {
-      return setMatches(e.matches);
-    };
+    const mediaQueryList = window.matchMedia(mediaQuery);
+    const listener = e => setMatches(e.matches);
     // 使用最新的 addEventListener API
     mediaQueryList.addEventListener('change', listener);
-    return function () {
-      return mediaQueryList.removeEventListener('change', listener);
-    };
+    return () => mediaQueryList.removeEventListener('change', listener);
   }, [mediaQuery, isSsr]);
   return matches;
 }

package/es/version.js

@@ -1,3 +1,3 @@
-export var version = {
+export const version = {
   '@ant-design/pro-components': '3.0.0'
 };

package/guidelines/Guidelines.md

@@ -0,0 +1,33 @@
+This project contains the source code for `@ant-design/pro-components`, a heavy-duty component library based on Ant Design. Files in the `guidelines` directory show how to use ProComponents properly.
+
+Always read:
+
+- All files with a name that starts `overview-`
+- All files in the `design-tokens` folder
+
+Read the files in the `guidelines/components` directory when you want to use the component with that name. For example, if you want to use ProTable, read `guidelines/components/pro-table.md`. Additional context can be found by reading the code for the corresponding component in `src/`.
+
+## Component Usage Guidelines - READ THIS FIRST
+
+IMPORTANT: Always prefer to use components from `@ant-design/pro-components` if they exist and fit the use case (e.g. for heavy-duty tables, layouts, forms). For basic UI elements (buttons, inputs), use `antd`.
+
+IMPORTANT: Follow these steps IN ORDER before writing any code:
+
+Step 1: Read Overview Files (REQUIRED)
+Read ALL files with a name that starts with "overview-" in the guidelines directory:
+`overview-components.md`
+`overview-icons.md`
+(And any other overview-\*.md files)
+
+Step 2: Read Design Tokens (REQUIRED)
+Read ALL files in the `design-tokens/` folder. Do NOT skip this step.
+
+Step 3: Plan what components you need to use (REQUIRED)
+
+Step 4: Read Component Guidelines BEFORE Using Components (REQUIRED)
+BEFORE using ANY component, you MUST read its guidelines file first if it exists.
+
+Step 5: Plan what icons you need to use (REQUIRED)
+Before using ANY icon, you must check to see if that icon exists in the `@ant-design/icons` package.
+
+DO NOT write code using a component until you have read its specific guidelines.

package/guidelines/components/drawer-form.md

@@ -0,0 +1,90 @@
+### DrawerForm
+
+**Purpose**: A form wrapped in a Drawer, sliding from the side.
+
+**When to use**:
+
+- For creating or editing complex data that requires more vertical space than a Modal.
+- When you want to keep the user in context but offer a larger workspace.
+- For side-panel configuration or details editing.
+
+**Semantic**:
+
+- Combines `antd` Drawer and `ProForm`.
+- Handles `visible` and `loading` states automatically.
+
+**API Overview**:
+
+- `trigger`: ReactNode. The element that opens the drawer.
+- `title`: Drawer title.
+- `width`: Drawer width (default is usually enough, but can be customized).
+- `onFinish`: Async function. Drawer closes if returns `true`.
+- `drawerProps`: Props passed to underlying `antd` Drawer.
+
+**Usage Pattern**:
+
+```tsx
+import {
+  DrawerForm,
+  ProFormText,
+  ProFormDatePicker,
+  ProFormSelect,
+} from '@ant-design/pro-components';
+import { Button, message } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+
+export default () => {
+  return (
+    <DrawerForm<{
+      name: string;
+      company: string;
+    }>
+      title="New Project"
+      resize={{
+        onResize: (e) => {
+          console.log(e);
+        },
+      }}
+      trigger={
+        <Button type="primary">
+          <PlusOutlined />
+          New Project
+        </Button>
+      }
+      autoFocusFirstInput
+      drawerProps={{
+        destroyOnClose: true,
+      }}
+      onFinish={async (values) => {
+        await waitTime(2000);
+        console.log(values.name);
+        message.success('Submitted successfully');
+        return true;
+      }}
+    >
+      <ProFormText
+        name="name"
+        width="md"
+        label="Project Name"
+        tooltip="The name of the project"
+        rules={[{ required: true, message: 'Please enter a name' }]}
+      />
+      <ProFormDatePicker name="date" label="Date" />
+      <ProFormSelect
+        name="status"
+        label="Status"
+        options={[
+          { value: 'active', label: 'Active' },
+          { value: 'inactive', label: 'Inactive' },
+        ]}
+      />
+    </DrawerForm>
+  );
+};
+```
+
+**Best Practices**:
+
+- Similar to `ModalForm`, use `trigger` to avoid state management.
+- Use for longer forms where a Modal would require scrolling or feel cramped.
+- Consider `drawerProps={{ destroyOnClose: true }}` to clean up state.