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

package/es/form/layouts/DrawerForm/index.js

@@ -1,13 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "trigger", "drawerProps", "onFinish", "submitTimeout", "title", "width", "resize", "onOpenChange", "open"];
-import { merge, useMergedState, warning } from '@rc-component/util';
+import { merge, useControlledState, warning } from '@rc-component/util';
 import { ConfigProvider, Drawer } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { isBrowser, omitUndefined, useRefFunction } from "../../../utils";
@@ -16,27 +9,28 @@ import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var noteOnce = warning.noteOnce;
-function DrawerForm(_ref) {
-  var _context$locale3, _context$locale4;
-  var children = _ref.children,
-    trigger = _ref.trigger,
-    drawerProps = _ref.drawerProps,
-    onFinish = _ref.onFinish,
-    submitTimeout = _ref.submitTimeout,
-    title = _ref.title,
-    width = _ref.width,
-    resize = _ref.resize,
-    onOpenChange = _ref.onOpenChange,
-    propsOpen = _ref.open,
-    rest = _objectWithoutProperties(_ref, _excluded);
+const {
+  noteOnce
+} = warning;
+function DrawerForm({
+  children,
+  trigger,
+  drawerProps,
+  onFinish,
+  submitTimeout,
+  title,
+  width,
+  resize,
+  onOpenChange,
+  open: propsOpen,
+  ...rest
+}) {
   noteOnce(
   // eslint-disable-next-line @typescript-eslint/dot-notation
-  !rest['footer'] || !(drawerProps !== null && drawerProps !== void 0 && drawerProps.footer), 'DrawerForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
-  var resizeInfo = React.useMemo(function () {
-    var _resize$onResize, _resize$maxWidth, _resize$minWidth;
-    var defaultResize = {
-      onResize: function onResize() {},
+  !rest['footer'] || !drawerProps?.footer, 'DrawerForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
+  const resizeInfo = React.useMemo(() => {
+    const defaultResize = {
+      onResize: () => {},
       maxWidth: isBrowser() ? window.innerWidth * 0.8 : undefined,
       minWidth: 300
     };
@@ -48,217 +42,148 @@ function DrawerForm(_ref) {
       }
     }
     return omitUndefined({
-      onResize: (_resize$onResize = resize === null || resize === void 0 ? void 0 : resize.onResize) !== null && _resize$onResize !== void 0 ? _resize$onResize : defaultResize.onResize,
-      maxWidth: (_resize$maxWidth = resize === null || resize === void 0 ? void 0 : resize.maxWidth) !== null && _resize$maxWidth !== void 0 ? _resize$maxWidth : defaultResize.maxWidth,
-      minWidth: (_resize$minWidth = resize === null || resize === void 0 ? void 0 : resize.minWidth) !== null && _resize$minWidth !== void 0 ? _resize$minWidth : defaultResize.minWidth
+      onResize: resize?.onResize ?? defaultResize.onResize,
+      maxWidth: resize?.maxWidth ?? defaultResize.maxWidth,
+      minWidth: resize?.minWidth ?? defaultResize.minWidth
     });
   }, [resize]);
-  var context = useContext(ConfigProvider.ConfigContext);
-  var baseClassName = context.getPrefixCls('pro-form-drawer');
-  var _useStyle = useStyle(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var getCls = function getCls(className) {
-    return "".concat(baseClassName, "-").concat(className, " ").concat(hashId);
-  };
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    forceUpdate = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    resizableDrawer = _useState6[0],
-    setResizableDrawer = _useState6[1];
-  var _useState7 = useState(width ? width : resize ? resizeInfo === null || resizeInfo === void 0 ? void 0 : resizeInfo.minWidth : 800),
-    _useState8 = _slicedToArray(_useState7, 2),
-    drawerWidth = _useState8[0],
-    setDrawerWidth = _useState8[1];
-  var _useMergedState = useMergedState(!!propsOpen, {
-      value: propsOpen,
-      onChange: onOpenChange
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    open = _useMergedState2[0],
-    setOpen = _useMergedState2[1];
-  var footerRef = useRef(null);
-  var footerDomRef = useCallback(function (element) {
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context.getPrefixCls('pro-form-drawer');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(baseClassName);
+  const getCls = className => `${baseClassName}-${className} ${hashId}`;
+  const [, forceUpdate] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [resizableDrawer, setResizableDrawer] = useState(false);
+  const [drawerWidth, setDrawerWidth] = useState(width ? width : resize ? resizeInfo?.minWidth : 800);
+  const [open, setOpenInner] = useControlledState(!!propsOpen, propsOpen);
+  const setOpen = useCallback(updater => {
+    setOpenInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onOpenChange?.(next);
+      return next;
+    });
+  }, [onOpenChange]);
+  const footerRef = useRef(null);
+  const footerDomRef = useCallback(element => {
     if (footerRef.current === null && element) {
       forceUpdate([]);
     }
     footerRef.current = element;
   }, []);
-  var formRef = useRef();
-  var resetFields = useCallback(function () {
-    var _ref2, _rest$formRef$current, _rest$formRef;
-    var form = (_ref2 = (_rest$formRef$current = (_rest$formRef = rest.formRef) === null || _rest$formRef === void 0 ? void 0 : _rest$formRef.current) !== null && _rest$formRef$current !== void 0 ? _rest$formRef$current : rest.form) !== null && _ref2 !== void 0 ? _ref2 : formRef.current;
+  const formRef = useRef();
+  const resetFields = useCallback(() => {
+    const form = rest.formRef?.current ?? rest.form ?? formRef.current;
     // 重置表单
     // issue: 8858 form.resetFields is not a function
-    if (form && drawerProps !== null && drawerProps !== void 0 && drawerProps.destroyOnHidden && typeof form.resetFields === 'function') {
+    if (form && drawerProps?.destroyOnHidden && typeof form.resetFields === 'function') {
       form.resetFields();
     }
-  }, [drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.destroyOnHidden, rest.form, rest.formRef]);
-  useEffect(function () {
+  }, [drawerProps?.destroyOnHidden, rest.form, rest.formRef]);
+  useEffect(() => {
     if (open && propsOpen) {
-      onOpenChange === null || onOpenChange === void 0 || onOpenChange(true);
+      onOpenChange?.(true);
     }
     if (resizableDrawer) {
-      setDrawerWidth(resizeInfo === null || resizeInfo === void 0 ? void 0 : resizeInfo.minWidth);
+      setDrawerWidth(resizeInfo?.minWidth);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [propsOpen, open, resizableDrawer]);
-  useImperativeHandle(rest.formRef, function () {
+  useImperativeHandle(rest.formRef, () => {
     return formRef.current;
   }, [formRef.current]);
-  var triggerDom = useMemo(function () {
+  const triggerDom = useMemo(() => {
     if (!trigger) {
       return null;
     }
-    return /*#__PURE__*/React.cloneElement(trigger, _objectSpread(_objectSpread({
-      key: 'trigger'
-    }, trigger.props), {}, {
-      onClick: function () {
-        var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
-          var _trigger$props, _trigger$props$onClic;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                setOpen(!open);
-                setResizableDrawer(!Object.keys(resizeInfo));
-                (_trigger$props = trigger.props) === null || _trigger$props === void 0 || (_trigger$props$onClic = _trigger$props.onClick) === null || _trigger$props$onClic === void 0 || _trigger$props$onClic.call(_trigger$props, e);
-              case 3:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        function onClick(_x) {
-          return _onClick.apply(this, arguments);
-        }
-        return onClick;
-      }()
-    }));
+    return /*#__PURE__*/React.cloneElement(trigger, {
+      key: 'trigger',
+      ...trigger.props,
+      onClick: async e => {
+        setOpen(!open);
+        setResizableDrawer(!Object.keys(resizeInfo));
+        trigger.props?.onClick?.(e);
+      }
+    });
   }, [setOpen, trigger, open, setResizableDrawer, resizableDrawer]);
-  var submitterConfig = useMemo(function () {
-    var _context$locale$Modal, _context$locale, _context$locale$Modal2, _context$locale2, _rest$submitter;
+  const submitterConfig = useMemo(() => {
     if (rest.submitter === false) {
       return false;
     }
     return merge({
       searchConfig: {
-        submitText: (_context$locale$Modal = (_context$locale = context.locale) === null || _context$locale === void 0 || (_context$locale = _context$locale.Modal) === null || _context$locale === void 0 ? void 0 : _context$locale.okText) !== null && _context$locale$Modal !== void 0 ? _context$locale$Modal : '确认',
-        resetText: (_context$locale$Modal2 = (_context$locale2 = context.locale) === null || _context$locale2 === void 0 || (_context$locale2 = _context$locale2.Modal) === null || _context$locale2 === void 0 ? void 0 : _context$locale2.cancelText) !== null && _context$locale$Modal2 !== void 0 ? _context$locale$Modal2 : '取消'
+        submitText: context.locale?.Modal?.okText ?? '确认',
+        resetText: context.locale?.Modal?.cancelText ?? '取消'
       },
       resetButtonProps: {
         preventDefault: true,
         disabled: submitTimeout && loading,
-        onClick: function onClick(e) {
-          var _drawerProps$onClose;
+        onClick: e => {
           setOpen(false);
-          drawerProps === null || drawerProps === void 0 || (_drawerProps$onClose = drawerProps.onClose) === null || _drawerProps$onClose === void 0 || _drawerProps$onClose.call(drawerProps, e);
+          drawerProps?.onClose?.(e);
         }
       }
-    }, (_rest$submitter = rest.submitter) !== null && _rest$submitter !== void 0 ? _rest$submitter : {});
-  }, [rest.submitter, (_context$locale3 = context.locale) === null || _context$locale3 === void 0 || (_context$locale3 = _context$locale3.Modal) === null || _context$locale3 === void 0 ? void 0 : _context$locale3.okText, (_context$locale4 = context.locale) === null || _context$locale4 === void 0 || (_context$locale4 = _context$locale4.Modal) === null || _context$locale4 === void 0 ? void 0 : _context$locale4.cancelText, submitTimeout, loading, setOpen, drawerProps]);
-  var contentRender = useCallback(function (formDom, submitter) {
+    }, rest.submitter ?? {});
+  }, [rest.submitter, context.locale?.Modal?.okText, context.locale?.Modal?.cancelText, submitTimeout, loading, setOpen, drawerProps]);
+  const contentRender = useCallback((formDom, submitter) => {
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [formDom, footerRef.current && submitter ? /*#__PURE__*/_jsx(React.Fragment, {
         children: /*#__PURE__*/createPortal(submitter, footerRef.current)
       }, "submitter") : submitter]
     });
   }, []);
-  var onFinishHandle = useRefFunction( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(values) {
-      var response, timer, _result, _timer, _result2, result;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            response = onFinish === null || onFinish === void 0 ? void 0 : onFinish(values);
-            if (!(submitTimeout && response instanceof Promise)) {
-              _context2.next = 21;
-              break;
-            }
-            setLoading(true);
-            timer = setTimeout(function () {
-              return setLoading(false);
-            }, submitTimeout);
-            _context2.prev = 4;
-            _context2.next = 7;
-            return response;
-          case 7:
-            _result = _context2.sent;
-            clearTimeout(timer);
-            setLoading(false);
-            // 返回真值，关闭弹框
-            if (_result) {
-              setOpen(false);
-            }
-            return _context2.abrupt("return", _result);
-          case 14:
-            _context2.prev = 14;
-            _context2.t0 = _context2["catch"](4);
-            clearTimeout(timer);
-            setLoading(false);
-            throw _context2.t0;
-          case 19:
-            _context2.next = 39;
-            break;
-          case 21:
-            if (!submitTimeout) {
-              _context2.next = 39;
-              break;
-            }
-            // 如果 submitTimeout 存在但 response 不是 Promise，也要设置 loading
-            setLoading(true);
-            _timer = setTimeout(function () {
-              return setLoading(false);
-            }, submitTimeout);
-            _context2.prev = 24;
-            _context2.next = 27;
-            return response;
-          case 27:
-            _result2 = _context2.sent;
-            clearTimeout(_timer);
-            setLoading(false);
-            // 返回真值，关闭弹框
-            if (_result2) {
-              setOpen(false);
-            }
-            return _context2.abrupt("return", _result2);
-          case 34:
-            _context2.prev = 34;
-            _context2.t1 = _context2["catch"](24);
-            clearTimeout(_timer);
-            setLoading(false);
-            throw _context2.t1;
-          case 39:
-            _context2.next = 41;
-            return response;
-          case 41:
-            result = _context2.sent;
-            // 返回真值，关闭弹框
-            if (result) {
-              setOpen(false);
-            }
-            return _context2.abrupt("return", result);
-          case 44:
-          case "end":
-            return _context2.stop();
+  const onFinishHandle = useRefFunction(async values => {
+    const response = onFinish?.(values);
+    if (submitTimeout && response instanceof Promise) {
+      setLoading(true);
+      const timer = setTimeout(() => setLoading(false), submitTimeout);
+      try {
+        const result = await response;
+        clearTimeout(timer);
+        setLoading(false);
+        // 返回真值，关闭弹框
+        if (result) {
+          setOpen(false);
         }
-      }, _callee2, null, [[4, 14], [24, 34]]);
-    }));
-    return function (_x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }());
-  var cbHandleMouseMove = useCallback(function (e) {
-    var _resizeInfo$minWidth, _resizeInfo$maxWidth;
-    var offsetRight = (document.body.offsetWidth || 1000) - (e.clientX - document.body.offsetLeft);
-    var minWidth = (_resizeInfo$minWidth = resizeInfo === null || resizeInfo === void 0 ? void 0 : resizeInfo.minWidth) !== null && _resizeInfo$minWidth !== void 0 ? _resizeInfo$minWidth : width || 800;
-    var maxWidth = (_resizeInfo$maxWidth = resizeInfo === null || resizeInfo === void 0 ? void 0 : resizeInfo.maxWidth) !== null && _resizeInfo$maxWidth !== void 0 ? _resizeInfo$maxWidth : window.innerWidth * 0.8;
+        return result;
+      } catch (error) {
+        clearTimeout(timer);
+        setLoading(false);
+        throw error;
+      }
+    } else if (submitTimeout) {
+      // 如果 submitTimeout 存在但 response 不是 Promise，也要设置 loading
+      setLoading(true);
+      const timer = setTimeout(() => setLoading(false), submitTimeout);
+      try {
+        const result = await response;
+        clearTimeout(timer);
+        setLoading(false);
+        // 返回真值，关闭弹框
+        if (result) {
+          setOpen(false);
+        }
+        return result;
+      } catch (error) {
+        clearTimeout(timer);
+        setLoading(false);
+        throw error;
+      }
+    }
+    const result = await response;
+    // 返回真值，关闭弹框
+    if (result) {
+      setOpen(false);
+    }
+    return result;
+  });
+  const cbHandleMouseMove = useCallback(e => {
+    const offsetRight = (document.body.offsetWidth || 1000) - (e.clientX - document.body.offsetLeft);
+    const minWidth = resizeInfo?.minWidth ?? (width || 800);
+    const maxWidth = resizeInfo?.maxWidth ?? window.innerWidth * 0.8;
     if (offsetRight < minWidth) {
       setDrawerWidth(minWidth);
       return;
@@ -268,31 +193,30 @@ function DrawerForm(_ref) {
       return;
     }
     setDrawerWidth(offsetRight);
-  }, [resizeInfo === null || resizeInfo === void 0 ? void 0 : resizeInfo.maxWidth, resizeInfo === null || resizeInfo === void 0 ? void 0 : resizeInfo.minWidth, width]);
-  var cbHandleMouseUp = useCallback(function () {
+  }, [resizeInfo?.maxWidth, resizeInfo?.minWidth, width]);
+  const cbHandleMouseUp = useCallback(() => {
     document.removeEventListener('mousemove', cbHandleMouseMove);
     document.removeEventListener('mouseup', cbHandleMouseUp);
   }, [cbHandleMouseMove]);
   return wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Drawer, _objectSpread(_objectSpread({}, drawerProps), {}, {
-      destroyOnHidden: drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.destroyOnHidden,
+    children: [/*#__PURE__*/_jsxs(Drawer, {
+      ...drawerProps,
+      destroyOnHidden: drawerProps?.destroyOnHidden,
       title: title,
       size: typeof drawerWidth === 'number' ? drawerWidth : drawerWidth,
       open: open,
-      afterOpenChange: function afterOpenChange(open) {
-        var _drawerProps$afterOpe;
-        if (!open && drawerProps !== null && drawerProps !== void 0 && drawerProps.destroyOnHidden) {
+      afterOpenChange: open => {
+        if (!open && drawerProps?.destroyOnHidden) {
           resetFields();
         }
-        drawerProps === null || drawerProps === void 0 || (_drawerProps$afterOpe = drawerProps.afterOpenChange) === null || _drawerProps$afterOpe === void 0 || _drawerProps$afterOpe.call(drawerProps, open);
-        onOpenChange === null || onOpenChange === void 0 || onOpenChange(open);
+        drawerProps?.afterOpenChange?.(open);
+        onOpenChange?.(open);
       },
-      onClose: function onClose(e) {
-        var _drawerProps$onClose2;
+      onClose: e => {
         // 提交表单loading时，阻止弹框关闭
         if (submitTimeout && loading) return;
         setOpen(false);
-        drawerProps === null || drawerProps === void 0 || (_drawerProps$onClose2 = drawerProps.onClose) === null || _drawerProps$onClose2 === void 0 || _drawerProps$onClose2.call(drawerProps, e);
+        drawerProps?.onClose?.(e);
       },
       footer: rest.submitter !== false && /*#__PURE__*/_jsx("div", {
         ref: footerDomRef,
@@ -302,10 +226,12 @@ function DrawerForm(_ref) {
         }
       }),
       children: [resize ? /*#__PURE__*/_jsx("div", {
-        className: classNames(getCls('sidebar-dragger'), hashId, _defineProperty(_defineProperty({}, getCls('sidebar-dragger-min-disabled'), drawerWidth === (resizeInfo === null || resizeInfo === void 0 ? void 0 : resizeInfo.minWidth)), getCls('sidebar-dragger-max-disabled'), drawerWidth === (resizeInfo === null || resizeInfo === void 0 ? void 0 : resizeInfo.maxWidth))),
-        onMouseDown: function onMouseDown(e) {
-          var _resizeInfo$onResize;
-          resizeInfo === null || resizeInfo === void 0 || (_resizeInfo$onResize = resizeInfo.onResize) === null || _resizeInfo$onResize === void 0 || _resizeInfo$onResize.call(resizeInfo);
+        className: clsx(getCls('sidebar-dragger'), hashId, {
+          [getCls('sidebar-dragger-min-disabled')]: drawerWidth === resizeInfo?.minWidth,
+          [getCls('sidebar-dragger-max-disabled')]: drawerWidth === resizeInfo?.maxWidth
+        }),
+        onMouseDown: e => {
+          resizeInfo?.onResize?.();
           e.stopPropagation();
           e.preventDefault();
           document.addEventListener('mousemove', cbHandleMouseMove);
@@ -313,46 +239,29 @@ function DrawerForm(_ref) {
           setResizableDrawer(true);
         }
       }) : null, /*#__PURE__*/_jsx(_Fragment, {
-        children: /*#__PURE__*/_jsx(BaseForm, _objectSpread(_objectSpread({
+        children: /*#__PURE__*/_jsx(BaseForm, {
           formComponentType: "DrawerForm",
-          layout: "vertical"
-        }, rest), {}, {
+          layout: "vertical",
+          ...rest,
           formRef: formRef,
-          onInit: function onInit(_, form) {
-            var _rest$onInit;
+          onInit: (_, form) => {
             if (rest.formRef) {
               rest.formRef.current = form;
             }
-            rest === null || rest === void 0 || (_rest$onInit = rest.onInit) === null || _rest$onInit === void 0 || _rest$onInit.call(rest, _, form);
+            rest?.onInit?.(_, form);
             formRef.current = form;
           },
           submitter: submitterConfig,
-          onFinish: ( /*#__PURE__*/function () {
-            var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(values) {
-              var result;
-              return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-                while (1) switch (_context3.prev = _context3.next) {
-                  case 0:
-                    _context3.next = 2;
-                    return onFinishHandle(values);
-                  case 2:
-                    result = _context3.sent;
-                    return _context3.abrupt("return", result);
-                  case 4:
-                  case "end":
-                    return _context3.stop();
-                }
-              }, _callee3);
-            }));
-            return function (_x3) {
-              return _ref4.apply(this, arguments);
-            };
-          }()),
+          onFinish: async values => {
+            const result = await onFinishHandle(values);
+            // fix: #6006 如果 result 为 true,那么必然会触发抽屉关闭，我们无需在 此处重置表单，只需在抽屉关闭时重置即可
+            return result;
+          },
           contentRender: contentRender,
           children: children
-        }))
+        })
       })]
-    })), triggerDom]
+    }), triggerDom]
   }));
 }
 export { DrawerForm };

package/es/form/layouts/DrawerForm/style.js

@@ -1,33 +1,34 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genDrawerFormStyle = function genDrawerFormStyle(token) {
-  return _defineProperty({}, token.componentCls, {
-    '&-sidebar-dragger': {
-      width: '5px',
-      cursor: 'ew-resize',
-      padding: '4px 0 0',
-      borderTop: '1px solid transparent',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      bottom: 0,
-      zIndex: 100,
-      backgroundColor: 'transparent',
-      '&-min-disabled': {
-        cursor: 'w-resize'
-      },
-      '&-max-disabled': {
-        cursor: 'e-resize'
+const genDrawerFormStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-sidebar-dragger': {
+        width: '5px',
+        cursor: 'ew-resize',
+        padding: '4px 0 0',
+        borderTop: '1px solid transparent',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        zIndex: 100,
+        backgroundColor: 'transparent',
+        '&-min-disabled': {
+          cursor: 'w-resize'
+        },
+        '&-max-disabled': {
+          cursor: 'e-resize'
+        }
       }
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('DrawerForm', function (token) {
-    var drawerFormToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('DrawerForm', token => {
+    const drawerFormToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genDrawerFormStyle(drawerFormToken)];
   });
 }

package/es/form/layouts/LightFilter/index.d.ts

@@ -1,4 +1,4 @@
-import type { FormProps } from 'antd';
+import type { FormProps, PopoverProps } from 'antd';
 import type { TooltipPlacement } from 'antd/lib/tooltip';
 import React from 'react';
 import type { CommonFormProps } from '../../BaseForm';
@@ -31,6 +31,17 @@ export type LightFilterProps<T, U = Record<string, any>> = {
      * @default bottomLeft
      */
     placement?: TooltipPlacement;
+    /**
+     * @name 透传给内部 Popover 的属性（折叠态弹层）
+     *
+     * @description
+     * LightFilter 在折叠态会使用 Popover 将筛选项渲染到 body 下；
+     * 可通过该属性为弹层根节点添加自定义类名（如 classNames.root）以便做样式覆盖。
+     *
+     * @example
+     * popoverProps={{ classNames: { root: 'my-lightfilter-popover' } } }
+     */
+    popoverProps?: Omit<PopoverProps, 'children' | 'content' | 'trigger' | 'open' | 'onOpenChange' | 'placement'>;
 } & Omit<FormProps<T>, 'onFinish'> & CommonFormProps<T, U>;
 declare function LightFilter<T = Record<string, any>>(props: LightFilterProps<T>): import("react/jsx-runtime").JSX.Element;
 export { LightFilter };