@ant-design/pro-components 3.0.1-0 → 3.1.0-0

package/lib/field/components/Select/SearchSelect/index.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -49,7 +51,7 @@ var SearchSelect = function SearchSelect(props, ref) {
     fieldNames = props.fieldNames,
     defaultSearchValue = props.defaultSearchValue,
     _props$preserveOrigin = props.preserveOriginalLabel,
-    preserveOriginalLabel = _props$preserveOrigin === void 0 ? false : _props$preserveOrigin,
+    _preserveOriginalLabel = _props$preserveOrigin === void 0 ? false : _props$preserveOrigin,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _ref = fieldNames || {},
     _ref$label = _ref.label,
@@ -82,6 +84,40 @@ var SearchSelect = function SearchSelect(props, ref) {
   // 兼容 renderXXX API。
 
   var classString = (0, _classnames.default)(prefixCls, className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-disabled"), disabled));
+
+  // 获取原始 label 的辅助函数
+  var getOriginalLabel = function getOriginalLabel(item, fallbackValue) {
+    // 优先使用 dataItem.label（原始字符串），避免使用 value.label（可能是 optionItemRender 渲染的组件）
+    if (item && typeof item.label === 'string' && item.label) {
+      return item.label;
+    }
+    if (item && item.text && typeof item.text === 'string') {
+      return item.text;
+    }
+    if (item && item.label) {
+      return String(item.label);
+    }
+    if (item && item.text) {
+      return String(item.text);
+    }
+    // 如果 dataItem 不存在，尝试从 value 中提取原始 label
+    // 但 value.label 可能是组件，需要从组件中提取原始 label
+    if (fallbackValue && fallbackValue.label) {
+      // 如果是 React 元素（Highlight 组件），尝试提取其 props.label
+      // 检查多种可能的 React 元素格式
+      var labelValue = fallbackValue.label;
+      if (( /*#__PURE__*/_react.default.isValidElement(labelValue) || labelValue && (0, _typeof2.default)(labelValue) === 'object' && 'props' in labelValue) && labelValue.props && labelValue.props.label) {
+        return String(labelValue.props.label);
+      }
+      // 如果是字符串，直接返回
+      if (typeof labelValue === 'string') {
+        return labelValue;
+      }
+      // 最后尝试转换为字符串
+      return String(labelValue);
+    }
+    return '';
+  };
   var getMergeValue = function getMergeValue(value, option) {
     if (Array.isArray(value) && Array.isArray(option) && value.length > 0) {
       // 多选情况且用户有选择
@@ -89,8 +125,9 @@ var SearchSelect = function SearchSelect(props, ref) {
       return value.map(function (item, index) {
         var optionItem = option === null || option === void 0 ? void 0 : option[index];
         var dataItem = optionItem === null || optionItem === void 0 ? void 0 : optionItem['data-item'];
+        var originalLabel = getOriginalLabel(dataItem, item);
         return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, dataItem || {}), item), {}, {
-          label: preserveOriginalLabel && dataItem ? dataItem.label : item.label
+          label: originalLabel || item.label
         });
       });
     }
@@ -98,12 +135,14 @@ var SearchSelect = function SearchSelect(props, ref) {
   };
   var genOptions = function genOptions(mapOptions) {
     return mapOptions.map(function (item, index) {
-      var _item$optionsPropsNam;
+      var _item$labelPropsName, _item$optionsPropsNam;
       var _ref2 = item,
         itemClassName = _ref2.className,
         optionType = _ref2.optionType,
         resetItem = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-      var label = item[labelPropsName];
+
+      // 获取 label，优先使用 labelPropsName，如果没有则使用 text（valueEnum 的情况）
+      var label = (_item$labelPropsName = item[labelPropsName]) !== null && _item$labelPropsName !== void 0 ? _item$labelPropsName : item.text;
       var value = item[valuePropsName];
       var itemOptions = (_item$optionsPropsNam = item[optionsPropsName]) !== null && _item$optionsPropsNam !== void 0 ? _item$optionsPropsNam : [];
       if (optionType === 'optGroup' || item.options) {
@@ -144,18 +183,25 @@ var SearchSelect = function SearchSelect(props, ref) {
       _onClear === null || _onClear === void 0 || _onClear();
       fetchData(undefined);
       if (showSearch) {
-        setSearchValue(undefined);
+        onSearch === null || onSearch === void 0 || onSearch('');
+        setSearchValue('');
       }
     }
   }, restProps), {}, {
     filterOption: restProps.filterOption == false ? false : function (inputValue, option) {
-      var _option$data_title, _option$optionFilterP;
+      var _option$data_title, _option;
+      // 当 inputValue 为空或 searchValue 为空时，显示所有选项
+      // 这样可以确保 searchOnFocus 时能够显示所有选项
+      var effectiveSearchValue = searchValue === '' ? '' : inputValue || searchValue;
+      if (!effectiveSearchValue) {
+        return true;
+      }
       if (restProps.filterOption && typeof restProps.filterOption === 'function') {
-        return restProps.filterOption(inputValue, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
+        return restProps.filterOption(effectiveSearchValue, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
           label: option === null || option === void 0 ? void 0 : option.data_title
         }));
       }
-      return !!(option !== null && option !== void 0 && (_option$data_title = option.data_title) !== null && _option$data_title !== void 0 && _option$data_title.toString().toLowerCase().includes(inputValue.toLowerCase()) || option !== null && option !== void 0 && (_option$optionFilterP = option[optionFilterProp]) !== null && _option$optionFilterP !== void 0 && _option$optionFilterP.toString().toLowerCase().includes(inputValue.toLowerCase()));
+      return !!(option !== null && option !== void 0 && (_option$data_title = option.data_title) !== null && _option$data_title !== void 0 && _option$data_title.toString().toLowerCase().includes(effectiveSearchValue.toLowerCase()) || option !== null && option !== void 0 && (_option = option[optionFilterProp]) !== null && _option !== void 0 && _option.toString().toLowerCase().includes(effectiveSearchValue.toLowerCase()));
     } // 这里使用pro-components的过滤逻辑
     ,
     onSearch: showSearch ? function (value) {
@@ -170,7 +216,7 @@ var SearchSelect = function SearchSelect(props, ref) {
       if (showSearch && autoClearSearchValue) {
         fetchData(undefined);
         onSearch === null || onSearch === void 0 || onSearch('');
-        setSearchValue(undefined);
+        setSearchValue('');
       } else if (showSearch && !autoClearSearchValue) {
         // 当 autoClearSearchValue 为 false 时，保持搜索值不变
         // 但是需要确保我们的状态与 Ant Design 的内部状态同步
@@ -191,16 +237,50 @@ var SearchSelect = function SearchSelect(props, ref) {
       if (mode !== 'multiple' && !Array.isArray(optionList)) {
         // 单选情况且用户选择了选项
         var dataItem = optionList && optionList['data-item'];
+
+        // 如果 dataItem 不存在，尝试从 options 中查找对应的原始数据
+        var foundDataItem = dataItem;
+        if (!foundDataItem && value && options) {
+          var _value$valuePropsName;
+          var optionValue = (_value$valuePropsName = value[valuePropsName]) !== null && _value$valuePropsName !== void 0 ? _value$valuePropsName : value.value;
+          var findDataItem = function findDataItem(opts) {
+            var _iterator = (0, _createForOfIteratorHelper2.default)(opts),
+              _step;
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                var _opt$valuePropsName;
+                var opt = _step.value;
+                var optValue = (_opt$valuePropsName = opt[valuePropsName]) !== null && _opt$valuePropsName !== void 0 ? _opt$valuePropsName : opt.value;
+                if (optValue === optionValue) {
+                  return opt;
+                }
+                if (opt[optionsPropsName] || opt.options) {
+                  var found = findDataItem(opt[optionsPropsName] || opt.options || []);
+                  if (found) return found;
+                }
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+            return null;
+          };
+          foundDataItem = findDataItem(options);
+        }
+
         // 如果value值为空则是清空时产生的回调,直接传值就可以了
-        if (!value || !dataItem) {
+        if (!value || !foundDataItem) {
+          var originalLabel = getOriginalLabel(foundDataItem, value);
           var changedValue = value ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
-            // 这里有一种情况，如果用户使用了 request和labelInValue，保存之后，刷新页面，正常回显，但是再次添加会出现 label 丢失的情况。所以需要兼容
-            label: preserveOriginalLabel && dataItem ? (dataItem === null || dataItem === void 0 ? void 0 : dataItem.label) || value.label : value.label
+            label: originalLabel
           }) : value;
           _onChange === null || _onChange === void 0 || _onChange.apply(void 0, [changedValue, optionList].concat(rest));
         } else {
-          _onChange === null || _onChange === void 0 || _onChange.apply(void 0, [(0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), dataItem), {}, {
-            label: preserveOriginalLabel && dataItem ? dataItem.label : value.label
+          // 确保使用 dataItem.label（原始字符串），避免使用 value.label（可能是 optionItemRender 渲染的组件）
+          var _originalLabel = getOriginalLabel(foundDataItem, value);
+          _onChange === null || _onChange === void 0 || _onChange.apply(void 0, [(0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), foundDataItem), {}, {
+            label: _originalLabel
           }), optionList].concat(rest));
         }
         return;
@@ -214,7 +294,13 @@ var SearchSelect = function SearchSelect(props, ref) {
     },
     onFocus: function onFocus(e) {
       if (searchOnFocus) {
-        fetchData(searchValue);
+        // 当 searchOnFocus 为 true 时，应该清空搜索关键词以显示所有选项
+        fetchData(undefined);
+        // 同时清空搜索值
+        if (showSearch) {
+          onSearch === null || onSearch === void 0 || onSearch('');
+          setSearchValue('');
+        }
       }
       _onFocus === null || _onFocus === void 0 || _onFocus(e);
     },

package/lib/field/components/Select/index.d.ts

@@ -1,5 +1,4 @@
 import type { SelectProps } from 'antd';
-import type { ReactNode } from 'react';
 import React from 'react';
 import { ProFieldRequestData, ProFieldValueEnumType, RequestOptionsType } from '../../../utils';
 import type { ProFieldLightProps } from '../../PureProField';
@@ -18,7 +17,6 @@ export type FieldSelectProps<FieldProps = any> = {
     fieldProps?: FieldProps;
     variant?: 'outlined' | 'filled' | 'borderless';
     id?: string;
-    children?: ReactNode;
     /** 默认搜素条件 */
     defaultKeyWords?: string;
 } & ProFieldLightProps;
@@ -47,7 +45,6 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     fieldProps?: any;
     variant?: "filled" | "outlined" | "borderless" | undefined;
     id?: string | undefined;
-    children?: ReactNode;
     /** 默认搜素条件 */
     defaultKeyWords?: string | undefined;
 } & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "style" | "className" | "fieldNames"> & React.RefAttributes<any>>;

package/lib/field/components/Select/index.js

@@ -21,7 +21,7 @@ var _LightSelect = _interopRequireDefault(require("./LightSelect"));
 var _SearchSelect = _interopRequireDefault(require("./SearchSelect"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["value", "text"],
-  _excluded2 = ["mode", "valueEnum", "render", "formItemRender", "request", "fieldProps", "plain", "children", "light", "proFieldKey", "params", "label", "variant", "id", "lightLabel", "labelTrigger"];
+  _excluded2 = ["mode", "valueEnum", "render", "formItemRender", "request", "fieldProps", "light", "proFieldKey", "params", "label", "variant", "id", "lightLabel", "labelTrigger"];
 var Highlight = function Highlight(_ref) {
   var label = _ref.label,
     words = _ref.words;
@@ -268,8 +268,6 @@ var FieldSelect = function FieldSelect(props, ref) {
     formItemRender = props.formItemRender,
     request = props.request,
     fieldProps = props.fieldProps,
-    plain = props.plain,
-    children = props.children,
     light = props.light,
     proFieldKey = props.proFieldKey,
     params = props.params,
@@ -375,6 +373,10 @@ var FieldSelect = function FieldSelect(props, ref) {
         fetchData: function fetchData(keyWord) {
           keyWordsRef.current = keyWord !== null && keyWord !== void 0 ? keyWord : '';
           _fetchData(keyWord);
+          // 当 keyWord 为 undefined 时，清空 keyWordsRef 以确保 filterOption 不进行过滤
+          if (keyWord === undefined) {
+            keyWordsRef.current = '';
+          }
         },
         resetData: resetData,
         optionItemRender: function optionItemRender(item) {

package/lib/field/components/TreeSelect/index.d.ts

@@ -27,7 +27,6 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     fieldProps?: any;
     variant?: "filled" | "outlined" | "borderless" | undefined;
     id?: string | undefined;
-    children?: React.ReactNode;
     defaultKeyWords?: string | undefined;
 } & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/lib/form/BaseForm/BaseForm.d.ts

@@ -6,7 +6,10 @@ import type { FieldProps, ProFormGridConfig, ProFormGroupProps } from '../typing
 import type { SubmitterProps } from './Submitter';
 export type ProFormInstance<T = any> = FormInstance<T> & ProFormInstanceType<T>;
 type ProFormRef<T> = ProFormInstance<T> & {
+    /** 原生 DOM 元素引用 */
     nativeElement?: HTMLElement;
+    /** 聚焦方法 */
+    focus?: () => void;
 };
 export type CommonFormProps<T = Record<string, any>, U = Record<string, any>> = {
     /**

package/lib/form/BaseForm/BaseForm.js

@@ -54,6 +54,7 @@ var covertFormName = function covertFormName(name) {
   if (Array.isArray(name)) return name;
   return [name];
 };
+var defaultExtraUrlParams = {};
 function BaseFormComponents(props) {
   var _ConfigProvider$useCo;
   var children = props.children,
@@ -69,7 +70,7 @@ function BaseFormComponents(props) {
     loading = props.loading,
     formComponentType = props.formComponentType,
     _props$extraUrlParams = props.extraUrlParams,
-    extraUrlParams = _props$extraUrlParams === void 0 ? {} : _props$extraUrlParams,
+    extraUrlParams = _props$extraUrlParams === void 0 ? defaultExtraUrlParams : _props$extraUrlParams,
     syncToUrl = props.syncToUrl,
     onUrlSearchChange = props.onUrlSearchChange,
     _onReset = props.onReset,
@@ -405,7 +406,7 @@ function BaseFormComponents(props) {
 var requestFormCacheId = 0;
 function BaseForm(props) {
   var _props$extraUrlParams2 = props.extraUrlParams,
-    extraUrlParams = _props$extraUrlParams2 === void 0 ? {} : _props$extraUrlParams2,
+    extraUrlParams = _props$extraUrlParams2 === void 0 ? defaultExtraUrlParams : _props$extraUrlParams2,
     syncToUrl = props.syncToUrl,
     isKeyPressSubmit = props.isKeyPressSubmit,
     _props$syncToUrlAsImp = props.syncToUrlAsImportant,
@@ -693,6 +694,12 @@ function BaseForm(props) {
             ref: function ref(instance) {
               if (!formRef.current) return;
               formRef.current.nativeElement = instance === null || instance === void 0 ? void 0 : instance.nativeElement;
+              formRef.current.focus = function () {
+                var _instance$nativeEleme;
+                // 聚焦到表单的第一个输入框
+                var firstInput = instance === null || instance === void 0 || (_instance$nativeEleme = instance.nativeElement) === null || _instance$nativeEleme === void 0 ? void 0 : _instance$nativeEleme.querySelector('input, textarea, select');
+                firstInput === null || firstInput === void 0 || firstInput.focus();
+              };
             }
             // 组合 urlSearch 和 initialValues
             ,

package/lib/form/BaseForm/LightWrapper/style.d.ts

@@ -4,6 +4,6 @@ export interface ProToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/lib/form/components/Captcha/index.d.ts

@@ -19,8 +19,14 @@ export type ProFormCaptchaProps = ProFormFieldItemProps<InputProps> & {
     onChange?: any;
 };
 export type CaptFieldRef = {
-    startTiming: () => never;
-    endTiming: () => never;
+    /** 原生 DOM 元素引用 */
+    nativeElement: HTMLDivElement;
+    /** 聚焦方法 */
+    focus: () => void;
+    /** 开始计时 */
+    startTiming: () => void;
+    /** 结束计时 */
+    endTiming: () => void;
 };
 declare const ProFormCaptcha: React.FC<ProFormCaptchaProps>;
 export default ProFormCaptcha;

package/lib/form/components/Captcha/index.js

@@ -30,6 +30,8 @@ var BaseProFormCaptcha = /*#__PURE__*/_react.default.forwardRef(function (props,
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     loading = _useState6[0],
     setLoading = _useState6[1];
+  var containerRef = _react.default.useRef(null);
+  var inputRef = _react.default.useRef(null);
   // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props tabUtil
   var rules = props.rules,
     name = props.name,
@@ -78,6 +80,11 @@ var BaseProFormCaptcha = /*#__PURE__*/_react.default.forwardRef(function (props,
    */
   (0, _react.useImperativeHandle)(ref, function () {
     return {
+      nativeElement: containerRef.current,
+      focus: function focus() {
+        var _inputRef$current;
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      },
       startTiming: function startTiming() {
         return setTiming(true);
       },
@@ -113,12 +120,13 @@ var BaseProFormCaptcha = /*#__PURE__*/_react.default.forwardRef(function (props,
     }
   }, [count, onTiming]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style), {}, {
       display: 'flex',
       alignItems: 'center'
     }),
-    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fieldProps), {}, {
+      ref: inputRef,
       style: (0, _objectSpread2.default)({
         flex: 1,
         transition: 'width .3s',

package/lib/form/components/DatePicker/BaseDatePicker.js

@@ -27,24 +27,32 @@ var BaseDatePicker = exports.BaseDatePicker = /*#__PURE__*/_react.default.forwar
     valueType = _ref.valueType,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var context = (0, _react.useContext)(_FieldContext.default);
+  var mergedFieldProps = (0, _react.useMemo)(function () {
+    var nextFieldProps = fieldProps ? (0, _objectSpread2.default)({}, fieldProps) : {};
+    if (valueType === 'dateTime' && nextFieldProps.showTime === undefined) {
+      nextFieldProps.showTime = true;
+    }
+    return nextFieldProps;
+  }, [fieldProps, valueType]);
+  var renderFieldDatePicker = (0, _react.useCallback)(function (text, props) {
+    var _ref2, _fieldPropsFromContex;
+    var fieldPropsFromContext = (_ref2 = props.fieldProps) !== null && _ref2 !== void 0 ? _ref2 : mergedFieldProps;
+    var format = valueType === 'dateTime' ? (_fieldPropsFromContex = fieldPropsFromContext === null || fieldPropsFromContext === void 0 ? void 0 : fieldPropsFromContext.format) !== null && _fieldPropsFromContex !== void 0 ? _fieldPropsFromContex : 'YYYY-MM-DD HH:mm:ss' : fieldPropsFromContext === null || fieldPropsFromContext === void 0 ? void 0 : fieldPropsFromContext.format;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.FieldDatePicker, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      format: format,
+      text: text
+    }));
+  }, [mergedFieldProps, valueType]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
     valueTypeMap: (0, _defineProperty2.default)({}, valueType, {
-      render: function render(text, props) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.FieldDatePicker, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-          text: text
-        }));
-      },
-      formItemRender: function formItemRender(text, props) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.FieldDatePicker, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-          text: text
-        }));
-      }
+      render: renderFieldDatePicker,
+      formItemRender: renderFieldDatePicker
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
       valueType: valueType,
       fieldProps: (0, _objectSpread2.default)({
         getPopupContainer: context.getPopupContainer
-      }, fieldProps),
+      }, mergedFieldProps),
       proFieldProps: proFieldProps,
       fieldConfig: {
         valueType: valueType,

package/lib/form/components/DateRangePicker/BaseDateRanger.js

@@ -23,30 +23,55 @@ var BaseDateRanger = exports.BaseDateRanger = /*#__PURE__*/_react.default.forwar
     valueType = _ref.valueType,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var context = (0, _react.useContext)(_FieldContext.default);
+  var mergedFieldProps = (0, _react.useMemo)(function () {
+    var nextFieldProps = fieldProps ? (0, _objectSpread2.default)({}, fieldProps) : {};
+    if (valueType === 'dateTimeRange' && nextFieldProps.showTime === undefined) {
+      nextFieldProps.showTime = true;
+    }
+    return nextFieldProps;
+  }, [fieldProps, valueType]);
+  var lightFilterFormat = (0, _react.useMemo)(function () {
+    if (mergedFieldProps.format) return mergedFieldProps.format;
+    switch (valueType) {
+      case 'dateTimeRange':
+        return 'YYYY-MM-DD HH:mm:ss';
+      case 'dateWeekRange':
+        return 'YYYY-wo';
+      case 'dateMonthRange':
+        return 'YYYY-MM';
+      case 'dateQuarterRange':
+        return 'YYYY-[Q]Q';
+      case 'dateYearRange':
+        return 'YYYY';
+      default:
+        return 'YYYY-MM-DD';
+    }
+  }, [mergedFieldProps.format, valueType]);
+  var renderFieldRangePicker = (0, _react.useCallback)(function (text, props) {
+    var _ref2, _fieldPropsFromContex;
+    var fieldPropsFromContext = (_ref2 = props.fieldProps) !== null && _ref2 !== void 0 ? _ref2 : mergedFieldProps;
+    var format = valueType === 'dateTimeRange' ? (_fieldPropsFromContex = fieldPropsFromContext === null || fieldPropsFromContext === void 0 ? void 0 : fieldPropsFromContext.format) !== null && _fieldPropsFromContex !== void 0 ? _fieldPropsFromContex : 'YYYY-MM-DD HH:mm:ss' : fieldPropsFromContext === null || fieldPropsFromContext === void 0 ? void 0 : fieldPropsFromContext.format;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.FieldRangePicker, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      format: format,
+      text: text
+    }));
+  }, [mergedFieldProps, valueType]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
     valueTypeMap: (0, _defineProperty2.default)({}, valueType, {
-      render: function render(text, props) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.FieldRangePicker, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-          text: text
-        }));
-      },
-      formItemRender: function formItemRender(text, props) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.FieldRangePicker, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-          text: text
-        }));
-      }
+      render: renderFieldRangePicker,
+      formItemRender: renderFieldRangePicker
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
       fieldProps: (0, _objectSpread2.default)({
         getPopupContainer: context.getPopupContainer
-      }, fieldProps),
+      }, mergedFieldProps),
       valueType: valueType,
       proFieldProps: proFieldProps,
       fieldConfig: {
         valueType: valueType,
         customLightMode: true,
         lightFilterLabelFormatter: function lightFilterLabelFormatter(value) {
-          return (0, _utils.dateArrayFormatter)(value, (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.format) || 'YYYY-MM');
+          return (0, _utils.dateArrayFormatter)(value, lightFilterFormat);
         }
       }
     }, rest), {}, {

package/lib/form/components/Digit/DigitRange.d.ts

@@ -13,7 +13,7 @@ export type ProFormDigitRangeProps = ProFormFieldItemProps<RangeInputNumberProps
     separatorWidth?: number;
 };
 declare const ForwardRefProFormDigit: React.ForwardRefExoticComponent<{
-    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<InputNumberProps<number>, "defaultValue" | "onChange" | "placeholder" | "value"> & {
+    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<InputNumberProps<number>, "value" | "defaultValue" | "onChange" | "placeholder"> & {
         value?: ValuePair | undefined;
         defaultValue?: ValuePair | undefined;
         onChange?: ((value?: ValuePair) => void) | undefined;

package/lib/form/components/FormItem/Group/index.js

@@ -76,7 +76,7 @@ var Group = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       className: (0, _classnames.default)("".concat(className, "-container ").concat(hashId), spaceProps === null || spaceProps === void 0 ? void 0 : spaceProps.className),
       size: size,
       align: align,
-      direction: direction,
+      orientation: direction,
       style: (0, _objectSpread2.default)({
         rowGap: 0
       }, spaceProps === null || spaceProps === void 0 ? void 0 : spaceProps.style),

package/lib/form/components/FormItem/Group/style.d.ts

@@ -4,6 +4,6 @@ export interface ProToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/lib/form/components/List/index.d.ts

@@ -78,5 +78,5 @@ export type ProFormListProps<T> = Omit<FormListProps, 'children' | 'rules'> & Pr
     className?: string;
     readonly?: boolean;
 } & Pick<ProFormGridConfig, 'colProps' | 'rowProps'>;
-declare function ProFormList<T>(props: ProFormListProps<T>): React.JSX.Element | null;
+declare function ProFormList<T>(props: ProFormListProps<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export { FormListContext, ProFormList };

package/lib/form/components/List/style.d.ts

@@ -4,6 +4,6 @@ export interface ProToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/lib/form/components/SchemaForm/index.js

@@ -160,12 +160,11 @@ function BetaSchemaForm(props) {
     propsOnValuesChange === null || propsOnValuesChange === void 0 || propsOnValuesChange(changedValues, values);
   }, [propsRef, shouldUpdate]);
   var formChildrenDoms = (0, _utils.useDeepCompareMemo)(function () {
-    if (!formRef.current) return;
     // like StepsForm's columns but not only for StepsForm
     if (columns.length && Array.isArray(columns[0])) return;
     return genItems(columns);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columns, restProps === null || restProps === void 0 ? void 0 : restProps.open, action, type, formDomsDeps]);
+  }, [columns, restProps === null || restProps === void 0 ? void 0 : restProps.open, action, type, formDomsDeps, formRef.current]);
 
   /**
    * Append layoutType component specific props

package/lib/form/components/Text/index.js

@@ -75,8 +75,10 @@ var PassWordStrength = function PassWordStrength(props) {
             })
           }) : null]
         }),
-        overlayStyle: {
-          width: 240
+        styles: {
+          root: {
+            width: 240
+          }
         },
         placement: "rightTop"
       }, props.popoverProps), {}, {

package/lib/form/components/UploadButton/index.d.ts

@@ -48,5 +48,5 @@ export type ProFormUploadButtonProps = ProFormFieldItemProps<UploadProps<any>, H
      */
     imageProps?: Omit<ImageProps, 'src'>;
 } & PickUploadProps;
-declare const ProFormUploadButton: React.ForwardRefRenderFunction<any, ProFormUploadButtonProps>;
+declare const ProFormUploadButton: React.FC<ProFormUploadButtonProps>;
 export default ProFormUploadButton;

package/lib/form/components/UploadButton/index.js

@@ -36,7 +36,7 @@ var getBase64 = function getBase64(file) {
  *
  * @param
  */
-var BaseProFormUploadButton = function BaseProFormUploadButton(_ref, ref) {
+var BaseProFormUploadButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _fieldProps$name;
   var fieldProps = _ref.fieldProps,
     action = _ref.action,
@@ -134,8 +134,8 @@ var BaseProFormUploadButton = function BaseProFormUploadButton(_ref, ref) {
       src: previewImage
     }))]
   });
-};
-var ProFormUploadButton = (_ref3 = _warpField.default) === null || _ref3 === void 0 ? void 0 : _ref3( /*#__PURE__*/_react.default.forwardRef(BaseProFormUploadButton), {
+});
+var ProFormUploadButton = (_ref3 = _warpField.default) === null || _ref3 === void 0 ? void 0 : _ref3(BaseProFormUploadButton, {
   getValueFromEvent: function getValueFromEvent(value) {
     return value.fileList;
   }

package/lib/form/index.d.ts

@@ -4,6 +4,7 @@ import type { ProFormGroupProps } from './typing';
 export { ProFormContext } from '../utils';
 export { LightWrapper } from './BaseForm';
 export type { LightWrapperProps, ProFormInstance } from './BaseForm';
+export type { SubmitterProps } from './BaseForm/Submitter';
 export * from './components';
 export type { FormListActionType, ProFormCaptchaProps, ProFormCheckboxGroupProps, ProFormCheckboxProps, ProFormColorPickerProps, ProFormColumnsType, ProFormDependencyProps, ProFormDigitProps, ProFormDigitRangeProps, ProFormFieldProps, ProFormFieldSetProps, ProFormLayoutType, ProFormListProps, ProFormMoneyProps, ProFormRadioGroupProps, ProFormSelectProps, ProFormSliderProps, ProFormSwitchProps, ProFormTreeSelectProps, ProFormUploadButtonProps, ProFormUploadDraggerProps, } from './components';
 export { FormListContext } from './components/List';

package/lib/form/layouts/DrawerForm/index.d.ts

@@ -39,5 +39,5 @@ export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> =
      */
     resize?: CustomizeResizeType | boolean;
 };
-declare function DrawerForm<T = Record<string, any>, U = Record<string, any>>({ children, trigger, drawerProps, onFinish, submitTimeout, title, width, resize, onOpenChange, open: propsOpen, ...rest }: DrawerFormProps<T, U>): React.JSX.Element;
+declare function DrawerForm<T = Record<string, any>, U = Record<string, any>>({ children, trigger, drawerProps, onFinish, submitTimeout, title, width, resize, onOpenChange, open: propsOpen, ...rest }: DrawerFormProps<T, U>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export { DrawerForm };

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

@@ -101,7 +101,8 @@ function DrawerForm(_ref) {
     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;
     // 重置表单
-    if (form && drawerProps !== null && drawerProps !== void 0 && drawerProps.destroyOnHidden) {
+    // issue: 8858 form.resetFields is not a function
+    if (form && drawerProps !== null && drawerProps !== void 0 && drawerProps.destroyOnHidden && typeof form.resetFields === 'function') {
       form.resetFields();
     }
   }, [drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.destroyOnHidden, rest.form, rest.formRef]);
@@ -282,7 +283,7 @@ function DrawerForm(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Drawer, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, drawerProps), {}, {
       destroyOnHidden: drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.destroyOnHidden,
       title: title,
-      width: drawerWidth,
+      size: typeof drawerWidth === 'number' ? drawerWidth : drawerWidth,
       open: open,
       afterOpenChange: function afterOpenChange(open) {
         var _drawerProps$afterOpe;

package/lib/form/layouts/DrawerForm/style.d.ts

@@ -4,6 +4,6 @@ export interface DrawerFormToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };