@ant-design/pro-components 3.1.4-0 → 3.1.6-0

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

@@ -87,7 +87,7 @@ function filerByItem(item, keyWords) {
 /**
  * 把 value 的枚举转化为数组
  *
- * @param valueEnum
+ * @param valueEnumParams
  */
 const proFieldParsingValueEnumToArray = valueEnumParams => {
   const enumArray = [];

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

@@ -12,9 +12,17 @@ var _provider = require("../../../provider");
 var _utils = require("../../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
- * 评分组件
+ * 开关组件
  *
- * @param
+ * @param text
+ * @param mode
+ * @param render
+ * @param light
+ * @param label
+ * @param formItemRender
+ * @param fieldProps
+ * @param propsVariant
+ * @param ref
  */
 const FieldSwitch = ({
   text,

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

@@ -12,7 +12,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 最基本的组件，就是个普通的 Input
  *
- * @param
+ * @param text
+ * @param mode
+ * @param render
+ * @param formItemRender
+ * @param fieldProps
+ * @param emptyText
+ * @param ref
  */
 const FieldText = ({
   text,

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

@@ -14,7 +14,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 最基本的组件，就是个普通的 Input.TextArea
  *
- * @param
+ * @param props
+ * @param ref
  */const FieldTextArea = (props, ref) => {
   const {
     text,
@@ -41,8 +42,10 @@ var _jsxRuntime = require("react/jsx-runtime");
     const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input.TextArea, {
       ref: ref,
       rows: 3,
-      onKeyPress: e => {
-        if (e.key === 'Enter') e.stopPropagation();
+      onKeyDown: e => {
+        if (e.key === 'Enter') {
+          e.stopPropagation();
+        }
       },
       placeholder: intl.getMessage('tableForm.inputPlaceholder', '请输入'),
       ...fieldProps

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

@@ -106,7 +106,16 @@ const FieldTimePicker = ({
 /**
  * 时间区间选择
  *
- * @param param0
+ * @param text
+ * @param light
+ * @param label
+ * @param mode
+ * @param lightLabel
+ * @param format
+ * @param render
+ * @param formItemRender
+ * @param fieldProps
+ * @param variant
  * @param ref
  */
 const FieldTimeRangePickerComponents = ({

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

@@ -1,12 +1,6 @@
-import type { RadioGroupProps, TreeSelectProps } from 'antd';
+import type { TreeSelectProps } from 'antd';
 import React from 'react';
-import type { FieldSelectProps } from '../Select';
-export type GroupProps = {
-    options?: RadioGroupProps['options'];
-    radioType?: 'button' | 'radio';
-    variant?: 'outlined' | 'borderless' | 'filled';
-} & FieldSelectProps;
-export type TreeSelectFieldProps = TreeSelectProps<any> & {
+export type TreeSelectFieldProps = TreeSelectProps & {
     /**
      * 当搜索关键词发生变化时是否请求远程数据
      *
@@ -15,10 +9,6 @@ export type TreeSelectFieldProps = TreeSelectProps<any> & {
     fetchDataOnSearch?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
-    options?: (string | number | import("antd").CheckboxOptionType<any>)[] | undefined;
-    radioType?: "button" | "radio" | undefined;
-    variant?: "outlined" | "filled" | "borderless" | undefined;
-} & {
     text: string;
     valueEnum?: import("src/utils/typing").ProFieldValueEnumType | undefined;
     debounceTime?: number | undefined;

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

@@ -16,10 +16,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Tree select
  * A function that returns a React component.
+
+ * @param formItemRender
+ * @param mode
+ * @param light
+ * @param label
+ * @param render
+ * @param propsVariant
+ * @param rest
  * @param ref
  */
 const FieldTreeSelect = ({
-  radioType,
   formItemRender,
   mode,
   light,
@@ -35,17 +42,22 @@ const FieldTreeSelect = ({
   const treeSelectRef = (0, _react.useRef)(null);
   const [open, setOpen] = (0, _react.useState)(false);
   const {
-    onSearch,
     onClear,
     onChange: propsOnChange,
     onBlur,
     showSearch,
-    autoClearSearchValue,
-    treeData,
     fetchDataOnSearch,
-    searchValue: propsSearchValue,
+    onSearch: propsOnSearch,
+    autoClearSearchValue: propsAutoClearSearchValue,
+    searchValue: propsSearchValueProp,
     ...fieldProps
-  } = rest.fieldProps;
+  } = (0, _util.omit)(rest.fieldProps, ['treeData']);
+  const showSearchConfig = typeof showSearch === 'object' ? showSearch : {};
+  const onSearch = showSearchConfig?.onSearch !== undefined ? showSearchConfig.onSearch : propsOnSearch;
+  //兼容过时API autoClearSearchValue
+  const autoClearSearchValue = showSearchConfig?.autoClearSearchValue !== undefined ? showSearchConfig.autoClearSearchValue : propsAutoClearSearchValue;
+  //兼容过时API searchValue
+  const propsSearchValue = showSearchConfig?.searchValue !== undefined ? showSearchConfig.searchValue : propsSearchValueProp;
   const variant = propsVariant ?? fieldProps?.variant;
   const intl = (0, _provider.useIntl)();
   const [loading, options, fetchData] = (0, _Select.useFieldFetchData)({
@@ -139,14 +151,23 @@ const FieldTreeSelect = ({
         } : undefined,
         ...fieldProps,
         treeData: options,
-        showSearch: showSearch,
+        showSearch: showSearch ? {
+          ...showSearchConfig,
+          searchValue: searchValue,
+          autoClearSearchValue: autoClearSearchValue,
+          onSearch: value => {
+            // fix 不支持请求的情况下不刷新options
+            if (fetchDataOnSearch && rest?.request) {
+              fetchData(value);
+            }
+            setSearchValue(value);
+          }
+        } : showSearch,
         style: {
           minWidth: 60,
           ...fieldProps.style
         },
         allowClear: fieldProps.allowClear !== false,
-        searchValue: searchValue,
-        autoClearSearchValue: autoClearSearchValue,
         onClear: () => {
           onClear?.();
           fetchData(undefined);
@@ -155,13 +176,6 @@ const FieldTreeSelect = ({
           }
         },
         onChange: onChange,
-        onSearch: value => {
-          // fix 不支持请求的情况下不刷新options
-          if (fetchDataOnSearch && rest?.request) {
-            fetchData(value);
-          }
-          setSearchValue(value);
-        },
         onBlur: event => {
           setSearchValue(undefined);
           fetchData(undefined);

package/lib/form/BaseForm/BaseForm.js

@@ -597,7 +597,7 @@ function BaseForm(props) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.FormListContext.Provider, {
           value: {},
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form, {
-            onKeyPress: event => {
+            onKeyDown: event => {
               if (!isKeyPressSubmit) return;
               if (event.key === 'Enter') {
                 formRef.current?.submit();
@@ -605,7 +605,7 @@ function BaseForm(props) {
             },
             autoComplete: "off",
             form: form,
-            ...(0, _util.omit)(propRest, ['ref', 'labelWidth', 'autoFocusFirstInput']),
+            ...(0, _util.omit)(propRest, ['ref', 'labelWidth', 'autoFocusFirstInput', 'rootClassName']),
             ref: instance => {
               if (!formRef.current) return;
               formRef.current.nativeElement = instance?.nativeElement;
@@ -629,7 +629,8 @@ function BaseForm(props) {
             onValuesChange: (changedValues, values) => {
               propRest?.onValuesChange?.(transformKey(changedValues, !!omitNil), transformKey(values, !!omitNil));
             },
-            className: (0, _clsx.clsx)(props.className, prefixCls, hashId),
+            className: props.className,
+            rootClassName: (0, _clsx.clsx)(prefixCls, hashId, props.rootClassName),
             onFinish: onFinish,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseFormComponents, {
               transformKey: transformKey,

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

@@ -26,7 +26,7 @@ export type SubmitterProps<T = Record<string, any>> = {
     render?: ((props: SubmitterProps & T & {
         submit: () => void;
         reset: () => void;
-    }, dom: JSX.Element[]) => React.ReactNode[] | React.ReactNode | false) | false;
+    }, dom: React.JSX.Element[]) => React.ReactNode[] | React.ReactNode | false) | false;
 };
 /**
  * FormFooter 的组件，可以自动进行一些配置

package/lib/form/components/Digit/DigitRange.js

@@ -11,9 +11,12 @@ var _provider = require("../../../provider");
 var _Field = _interopRequireDefault(require("../Field"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
- * 数组选择组件
+ * 数字范围输入组件
  *
- * @param
+ * @param fieldProps
+ * @param proFieldProps
+ * @param rest
+ * @param ref
  */
 const ProFormDigit = ({
   fieldProps,

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

@@ -11,9 +11,14 @@ var _provider = require("../../../provider");
 var _Field = _interopRequireDefault(require("../Field"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
- * 数组选择组件
+ * 数字输入组件
  *
- * @param
+ * @param fieldProps
+ * @param min
+ * @param proFieldProps
+ * @param max
+ * @param rest
+ * @param ref
  */
 const ProFormDigit = ({
   fieldProps,

package/lib/form/components/FormItem/FormItemRender/index.d.ts

@@ -62,7 +62,7 @@ export declare function pickControlProps(props: FormControlInjectProps): {
     onChange: (value: any) => void;
 };
 /**
- * 提取props中的 value、onChange 和 id 属性
+ * 提取 props 中的 value、onChange、id 及无障碍属性（aria-describedby、aria-invalid、aria-required）
  */
 export declare function pickControlPropsWithId(props: FormControlInjectProps): {
     id: string;

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

@@ -96,14 +96,22 @@ function pickControlProps(props) {
     onChange: value => props.onChange(value?.target ? value.target.value : value)
   };
 }
+const ARIA_CONTROL_ATTRS = ['aria-describedby', 'aria-invalid', 'aria-required'];
 
 /**
- * 提取props中的 value、onChange 和 id 属性
+ * 提取 props 中的 value、onChange、id 及无障碍属性（aria-describedby、aria-invalid、aria-required）
  */
 function pickControlPropsWithId(props) {
+  const ariaAttrs = ARIA_CONTROL_ATTRS.reduce((acc, key) => {
+    if (props[key] !== undefined) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
   return {
     ...pickControlProps(props),
-    id: props.id
+    id: props.id,
+    ...ariaAttrs
   };
 }
 

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

@@ -124,7 +124,7 @@ const Group = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         display: 'none'
       },
       children: hiddenChildren
-    }) : null];
+    }, "hidden") : null];
   }, [children, RowWrapper, Wrapper, autoFocus]);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(ColWrapper, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -134,11 +134,19 @@ const Group = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       style: style,
       ref: ref,
       children: [hiddenDoms, (title || tooltip || extra) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${className}-title ${hashId}`.trim(),
+        role: "button",
+        tabIndex: 0,
+        className: (0, _clsx.clsx)(`${className}-title`, hashId),
         style: titleStyle,
         onClick: () => {
           setCollapsed(!collapsed);
         },
+        onKeyDown: e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setCollapsed(!collapsed);
+          }
+        },
         children: extra ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           style: {
             display: 'flex',
@@ -147,7 +155,9 @@ const Group = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
             justifyContent: 'space-between'
           },
           children: [titleDom, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            role: "presentation",
             onClick: e => e.stopPropagation(),
+            onKeyDown: e => e.stopPropagation(),
             children: extra
           })]
         }) : titleDom

package/lib/form/components/List/ListContainer.js

@@ -7,6 +7,7 @@ exports.ProFormListContainer = void 0;
 var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = require("react");
 var _provider = require("../../../provider");
 var _utils = require("../../../utils");
@@ -100,7 +101,7 @@ const ProFormListContainer = props => {
       creatorButtonText = intl.getMessage('editableTable.action.add', '添加一行数据')
     } = creatorButtonProps || {};
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
-      className: `${prefixCls}-creator-button-${position} ${hashId || ''}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-creator-button-${position}`, hashId),
       type: "dashed",
       loading: loading,
       block: true,

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

@@ -16,7 +16,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 选择框
  *
- * @param
+ * @param fieldProps
+ * @param children
+ * @param params
+ * @param proFieldProps
+ * @param mode
+ * @param valueEnum
+ * @param request
+ * @param showSearch
+ * @param options
+ * @param rest
+ * @param ref
  */
 const ProFormSelectComponents = ({
   fieldProps,

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

@@ -3,8 +3,8 @@ import React from 'react';
 import type { CommonFormProps } from '../../BaseForm';
 export type CustomizeResizeType = {
     onResize?: () => void;
-    maxWidth?: DrawerProps['width'];
-    minWidth?: DrawerProps['width'];
+    maxWidth?: DrawerProps['size'];
+    minWidth?: DrawerProps['size'];
 };
 export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> = Omit<FormProps, 'onFinish' | 'title'> & CommonFormProps<T, U> & {
     /**
@@ -22,7 +22,7 @@ export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> =
     /** @name 提交数据时，禁用取消按钮的超时时间（毫秒）。 */
     submitTimeout?: number;
     /** @name 用于触发抽屉打开的 dom ，只能设置一个*/
-    trigger?: JSX.Element;
+    trigger?: React.JSX.Element;
     /** @name 受控的打开关闭 */
     open?: DrawerProps['open'];
     /** @name 打开关闭的事件 */
@@ -32,7 +32,7 @@ export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> =
     /** @name 抽屉的标题 */
     title?: DrawerProps['title'];
     /** @name 抽屉的宽度 */
-    width?: DrawerProps['width'];
+    width?: DrawerProps['size'];
     /**
      *
      * @name draggableDrawer

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

@@ -56,7 +56,7 @@ function DrawerForm({
     wrapSSR,
     hashId
   } = (0, _style.useStyle)(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`;
+  const getCls = className => `${baseClassName}-${className}`;
   const [, forceUpdate] = (0, _react.useState)([]);
   const [loading, setLoading] = (0, _react.useState)(false);
   const [resizableDrawer, setResizableDrawer] = (0, _react.useState)(false);

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

@@ -41,16 +41,22 @@ const LightFilterContainer = props => {
     hashId
   } = (0, _style.useStyle)(lightFilterClassName);
   const [open, setOpen] = (0, _react.useState)(false);
-  const [moreValues, setMoreValues] = (0, _react.useState)(() => {
-    return {
-      ...values
-    };
-  });
-  (0, _react.useEffect)(() => {
-    setMoreValues({
-      ...values
+  const [moreValues, setMoreValues] = (0, _react.useState)(() => ({
+    ...values
+  }));
+  const collapseLabelNode = (0, _react.useMemo)(() => {
+    if (collapseLabel) return collapseLabel;
+    if (collapse) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FilterOutlined, {
+        className: (0, _clsx.clsx)(`${lightFilterClassName}-collapse-icon`, hashId)
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.FieldLabel, {
+      variant: variant,
+      size: size,
+      label: intl.getMessage('form.lightFilter.more', '更多筛选')
     });
-  }, [values]);
+  }, [collapseLabel, collapse, lightFilterClassName, hashId, variant, size, intl]);
   const {
     collapseItems,
     outsideItems
@@ -72,27 +78,12 @@ const LightFilterContainer = props => {
       outsideItems: outsideItemsArr
     };
   }, [props.items]);
-  const renderCollapseLabelRender = () => {
-    if (collapseLabel) {
-      return collapseLabel;
-    }
-    if (collapse) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FilterOutlined, {
-        className: `${lightFilterClassName}-collapse-icon ${hashId}`.trim()
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.FieldLabel, {
-      variant: variant,
-      size: size,
-      label: intl.getMessage('form.lightFilter.more', '更多筛选')
-    });
-  };
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _clsx.clsx)(lightFilterClassName, hashId, `${lightFilterClassName}-${size}`, {
       [`${lightFilterClassName}-effective`]: Object.keys(values).some(key => Array.isArray(values[key]) ? values[key].length > 0 : values[key])
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${lightFilterClassName}-container ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${lightFilterClassName}-container`, hashId),
       children: [outsideItems.map((child, index) => {
         if (!child?.props) {
           return child;
@@ -105,7 +96,7 @@ const LightFilterContainer = props => {
         } = child?.props || {};
         const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${lightFilterClassName}-item ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${lightFilterClassName}-item`, hashId),
           children: /*#__PURE__*/_react.default.cloneElement(child, {
             fieldProps: {
               ...child.props.fieldProps,
@@ -123,7 +114,7 @@ const LightFilterContainer = props => {
           })
         }, key || index);
       }), collapseItems.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${lightFilterClassName}-item ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${lightFilterClassName}-item`, hashId),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.FilterDropdown, {
           padding: 24,
           open: open,
@@ -132,7 +123,7 @@ const LightFilterContainer = props => {
           },
           placement: placement,
           popoverProps: popoverProps,
-          label: renderCollapseLabelRender(),
+          label: collapseLabelNode,
           footerRender: footerRender,
           footer: {
             onConfirm: () => {
@@ -175,7 +166,7 @@ const LightFilterContainer = props => {
             }
             const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: `${lightFilterClassName}-line ${hashId}`.trim(),
+              className: (0, _clsx.clsx)(`${lightFilterClassName}-line`, hashId),
               children: /*#__PURE__*/_react.default.cloneElement(child, {
                 fieldProps: {
                   ...newFieldProps,
@@ -250,7 +241,7 @@ function LightFilter(props) {
             onValuesChange(newValues, newAllValues);
           }
         }
-      });
+      }, JSON.stringify(values || {}));
     },
     formRef: formRef,
     formItemProps: {

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

@@ -52,14 +52,15 @@ function LoginForm(props) {
     wrapSSR,
     hashId
   } = (0, _style.useStyle)(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`;
+  const getCls = className => `${baseClassName}-${className}`;
 
   /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
   const logoDom = (0, _react.useMemo)(() => {
     if (!logo) return null;
     if (typeof logo === 'string') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: logo
+        src: logo,
+        alt: ""
       });
     }
     return logo;
@@ -68,22 +69,22 @@ function LoginForm(props) {
     className: (0, _clsx.clsx)(getCls('container'), hashId),
     style: containerStyle,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${getCls('top')} ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(getCls('top'), hashId),
       children: [title || logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${getCls('header')}`,
+        className: (0, _clsx.clsx)(getCls('header'), hashId),
         children: [logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: getCls('logo'),
+          className: (0, _clsx.clsx)(getCls('logo'), hashId),
           children: logoDom
         }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: getCls('title'),
+          className: (0, _clsx.clsx)(getCls('title'), hashId),
           children: title
         }) : null]
       }) : null, subTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getCls('desc'),
+        className: (0, _clsx.clsx)(getCls('desc'), hashId),
         children: subTitle
       }) : null]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: getCls('main'),
+      className: (0, _clsx.clsx)(getCls('main'), hashId),
       style: {
         width: 328,
         ...contentStyle
@@ -94,7 +95,7 @@ function LoginForm(props) {
         submitter: submitter,
         children: [message, children]
       }), actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getCls('main-other'),
+        className: (0, _clsx.clsx)(getCls('main-other'), hashId),
         style: otherStyle,
         children: actions
       }) : null]