@zat-design/sisyphus-react 4.6.1 → 4.6.3-beta.1

package/es/ProEditTable/style/index.less

@@ -239,6 +239,12 @@
     }
   }
 
+  .@{ant-prefix}-table-tbody
+    .is-editing:not(.@{ant-prefix}-table-measure-row):not(.@{ant-prefix}-table-row-extra)
+    .@{ant-prefix}-form-item.@{ant-prefix}-form-item-has-error {
+    margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1)) !important;
+  }
+
   .@{ant-prefix}-table.@{ant-prefix}-table-bordered > .@{ant-prefix}-table-container {
     border: 0;
   }

package/es/ProForm/components/combination/FormList/components/ActionButton.js

@@ -19,6 +19,7 @@ import ProIcon from "../../../../../ProIcon";
 import locale from "../../../../../locale";
 import deleteSvg from "../../../../../assets/delete.svg";
 import close2Svg from "../../../../../assets/close2.svg";
+import { FORM_LIST_ACTION_ABORT } from "../toolbarActions";
 const filterKeys = ["actionType"];
 const getDefaultActions = (mode) => {
   const originActions = {
@@ -36,7 +37,7 @@ const getDefaultActions = (mode) => {
         remove(index);
       },
       label: locale.ProForm.formListActions[1],
-      icon: mode === "less" ? /* @__PURE__ */ jsx(ProIcon, { component: close2Svg, size: 14, className: "single-delete" }) : /* @__PURE__ */ jsx(ProIcon, { component: deleteSvg, size: 18 })
+      icon: mode === "less" || mode === "tabs" ? /* @__PURE__ */ jsx(ProIcon, { component: close2Svg, size: 14, className: "single-delete" }) : /* @__PURE__ */ jsx(ProIcon, { component: deleteSvg, size: 18 })
     },
     copy: {
       onClick: (record, { namePath, index, operation }) => {
@@ -69,12 +70,7 @@ const getDefaultActions = (mode) => {
       originActions[key].className = "pro-form-list-tool-btn";
     });
   }
-  if (mode === "line") {
-    Object.keys(originActions).forEach((key) => {
-      delete originActions[key].label;
-    });
-  }
-  if (mode === "less") {
+  if (mode === "line" || mode === "less" || mode === "tabs") {
     Object.keys(originActions).forEach((key) => {
       delete originActions[key].label;
     });
@@ -115,6 +111,8 @@ const ActionButton = (props) => {
   const handleClick = async (defaultCallback, callback, index2, item) => {
     const value = form.getFieldValue(namePath);
     const data = await (callback == null ? void 0 : callback(value, { namePath, index: index2, operation, form }));
+    if (data === FORM_LIST_ACTION_ABORT)
+      return;
     if (!callback || data === true) {
       defaultCallback == null ? void 0 : defaultCallback(value, { namePath, index: index2, operation, form });
       return;
@@ -172,6 +170,8 @@ const ActionButton = (props) => {
       const handleAddClick = async () => {
         const value = form.getFieldValue(namePath);
         const data = await (_onClick == null ? void 0 : _onClick(value, { namePath, index, operation, form }));
+        if (data === FORM_LIST_ACTION_ABORT)
+          return;
         if (!_onClick || data === true) {
           if (item.addIndex !== void 0) {
             const insertIndex = typeof item.addIndex === "function" ? item.addIndex(value, { index, namePath, form, operation }) : item.addIndex;
@@ -208,6 +208,7 @@ const ActionButton = (props) => {
             {
               ...defaultRest,
               ...omit(rest, filterKeys),
+              className: "pro-form-list-delete-icon",
               type: "text",
               onClick: (e) => e.stopPropagation(),
               children: label || defaultLabel
@@ -221,7 +222,8 @@ const ActionButton = (props) => {
           className: classNames({
             "pro-form-list-tool-btn": mode === "line",
             "pro-form-list-tool-btn-block": mode === "block",
-            "pro-form-list-tool-btn-less": mode === "less"
+            "pro-form-list-tool-btn-less": mode === "less",
+            "pro-form-list-tool-btn-tabs": mode === "tabs"
           }),
           ...defaultRest,
           ...omit(rest, filterKeys),

package/es/ProForm/components/combination/FormList/components/Empty.d.ts

@@ -8,6 +8,7 @@ interface EmptyProps {
     form?: FormInstance;
     namePath?: InternalNamePath;
     emptyBtnText?: string;
+    onAdd?: () => unknown | Promise<unknown>;
 }
-declare const Empty: ({ disabled, toolbarProps, operation, form, namePath, emptyBtnText }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
+declare const Empty: ({ disabled, toolbarProps, operation, form, namePath, emptyBtnText, onAdd, }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
 export default Empty;

package/es/ProForm/components/combination/FormList/components/Empty.js

@@ -3,12 +3,24 @@ import { Button } from "antd";
 import isFunction from "lodash/isFunction";
 import EmptyImg from "../../../../../assets/empty.png";
 import locale from "../../../../../locale";
-const Empty = ({ disabled, toolbarProps, operation, form, namePath, emptyBtnText }) => {
+const Empty = ({
+  disabled,
+  toolbarProps,
+  operation,
+  form,
+  namePath,
+  emptyBtnText,
+  onAdd
+}) => {
   const addConfig = Array.isArray(toolbarProps) ? toolbarProps.find((item) => item.type === "add") : null;
   const handleAddClick = async () => {
     var _a;
     if (!operation || !form || !namePath)
       return;
+    if (onAdd) {
+      await onAdd();
+      return;
+    }
     const value = form.getFieldValue(namePath);
     const data = await ((_a = addConfig == null ? void 0 : addConfig.onClick) == null ? void 0 : _a.call(addConfig, value, { operation, form, namePath, index: 0 }));
     if (!(addConfig == null ? void 0 : addConfig.onClick) || data === true) {

package/es/ProForm/components/combination/FormList/components/TabsFields.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { FormInstance, FormListFieldData } from 'antd';
+import type { InternalNamePath } from 'antd/es/form/interface';
+import type { DiffConfigType } from '../../../../propsType';
+import type { FormListType } from '../propsType';
+interface Props extends Omit<FormListType, 'fields' | 'form'> {
+    diffConfig?: DiffConfigType;
+    fields: FormListFieldData[];
+    form: FormInstance;
+    isView?: boolean;
+    namePath: InternalNamePath;
+    processColumns: (index: number, namePath: InternalNamePath) => FormListType['columns'];
+}
+declare const TabsFields: React.FC<Props>;
+export default TabsFields;

package/es/ProForm/components/combination/FormList/components/TabsFields.js

@@ -0,0 +1,346 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Badge, Row, Tabs } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+import { DndContext } from "@dnd-kit/core";
+import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import isFunction from "lodash/isFunction";
+import dragSvg from "../../../../../assets/drag.svg";
+import ProIcon from "../../../../../ProIcon";
+import locale from "../../../../../locale";
+import RenderFields from "../../../render/RenderFields";
+import ActionButton from "./ActionButton";
+import Empty from "./Empty";
+import { memoWith } from "../utils";
+import {
+  executeToolbarAdd,
+  FORM_LIST_ACTION_ABORT,
+  isToolbarActionVisible,
+  normalizeToolbarActions
+} from "../toolbarActions";
+import { subscribeFormListTabsValidation } from "../tabsValidation";
+const MemoRenderFields = React.memo(RenderFields, memoWith);
+const getTabErrorCounts = (errorFields, fields, namePath) => {
+  const uniqueErrors = /* @__PURE__ */ new Map();
+  errorFields.forEach((errorField) => {
+    var _a;
+    if (!((_a = errorField.errors) == null ? void 0 : _a.length) || errorField.name.length <= namePath.length + 1)
+      return;
+    const matchesList = namePath.every((name, index) => errorField.name[index] === name);
+    if (!matchesList)
+      return;
+    const fieldName = errorField.name[namePath.length];
+    const field = fields.find((item) => item.name === fieldName);
+    if (!field)
+      return;
+    const fieldKey = String(field.key);
+    const errorPath = JSON.stringify(errorField.name.slice(namePath.length + 1));
+    const paths = uniqueErrors.get(fieldKey) || /* @__PURE__ */ new Set();
+    paths.add(errorPath);
+    uniqueErrors.set(fieldKey, paths);
+  });
+  return new Map(Array.from(uniqueErrors, ([fieldKey, paths]) => [fieldKey, paths.size]));
+};
+const SortableTabLabel = ({
+  children,
+  disabled,
+  draggable,
+  fieldKey
+}) => {
+  const {
+    attributes,
+    listeners,
+    setActivatorNodeRef,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: fieldKey,
+    disabled: disabled || !draggable
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: "pro-form-list-tabs-label",
+      style: {
+        opacity: isDragging ? 0.4 : void 0,
+        transform: CSS.Translate.toString(transform),
+        transition
+      },
+      children: [
+        !disabled && draggable && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...attributes,
+            ...listeners,
+            ref: setActivatorNodeRef,
+            className: "pro-form-list-tabs-drag-handle",
+            children: /* @__PURE__ */ jsx(ProIcon, { component: dragSvg, size: 16, color: "#949599" })
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+const TabsFields = (props) => {
+  const {
+    actionProps,
+    diffConfig,
+    disabled,
+    draggable,
+    emptyBtnText,
+    fields,
+    form,
+    isView,
+    max,
+    min,
+    namePath,
+    operation,
+    processColumns,
+    span = 8,
+    title,
+    toolbarProps
+  } = props;
+  const fieldKeys = fields.map((field) => String(field.key));
+  const fieldKeysSignature = fieldKeys.join("\0");
+  const [activeKey, setActiveKey] = useState(fieldKeys[0]);
+  const [validationErrorFields, setValidationErrorFields] = useState([]);
+  const activeIndexRef = useRef(0);
+  const fieldKeysRef = useRef(fieldKeys);
+  const fieldsRef = useRef(fields);
+  const namePathRef = useRef(namePath);
+  const pendingAddKeysRef = useRef(null);
+  const validatingRef = useRef(false);
+  fieldKeysRef.current = fieldKeys;
+  fieldsRef.current = fields;
+  namePathRef.current = namePath;
+  const errorCounts = getTabErrorCounts(validationErrorFields, fields, namePath);
+  const currentIndex = activeKey ? fieldKeys.indexOf(activeKey) : -1;
+  if (currentIndex >= 0)
+    activeIndexRef.current = currentIndex;
+  useEffect(() => {
+    const pendingKeys = pendingAddKeysRef.current;
+    const addedKey = pendingKeys && fieldKeys.find((key) => !pendingKeys.has(key));
+    if (addedKey) {
+      pendingAddKeysRef.current = null;
+      activeIndexRef.current = fieldKeys.indexOf(addedKey);
+      setActiveKey(addedKey);
+      return;
+    }
+    if (activeKey && fieldKeys.includes(activeKey))
+      return;
+    const fallbackIndex = Math.min(activeIndexRef.current, fieldKeys.length - 1);
+    setActiveKey(fallbackIndex >= 0 ? fieldKeys[fallbackIndex] : void 0);
+  }, [activeKey, fieldKeysSignature]);
+  useEffect(
+    () => subscribeFormListTabsValidation(form, (event) => {
+      setValidationErrorFields(event.errorFields);
+      if (event.reason !== "submitFailed")
+        return;
+      const counts = getTabErrorCounts(event.errorFields, fieldsRef.current, namePathRef.current);
+      const firstErrorIndex = fieldsRef.current.findIndex(
+        (field) => counts.has(String(field.key))
+      );
+      if (firstErrorIndex < 0)
+        return;
+      activeIndexRef.current = firstErrorIndex;
+      setActiveKey(String(fieldsRef.current[firstErrorIndex].key));
+    }),
+    [form]
+  );
+  const validateCurrent = useCallback(async () => {
+    if (!activeKey)
+      return true;
+    const activeField = fields.find((field) => String(field.key) === activeKey);
+    if (!activeField || !(form == null ? void 0 : form.validateFields))
+      return true;
+    try {
+      await form.validateFields([[...namePath, activeField.name]], { recursive: true });
+      return true;
+    } catch {
+      return false;
+    }
+  }, [activeKey, fieldKeysSignature, form, namePath]);
+  const runAfterValidation = useCallback(
+    async (callback) => {
+      if (validatingRef.current)
+        return false;
+      validatingRef.current = true;
+      try {
+        if (!await validateCurrent())
+          return false;
+        return await callback();
+      } finally {
+        validatingRef.current = false;
+      }
+    },
+    [validateCurrent]
+  );
+  const normalizedToolbarProps = useMemo(
+    () => toolbarProps === false ? [] : normalizeToolbarActions(toolbarProps),
+    [toolbarProps]
+  );
+  const addAction = normalizedToolbarProps.find(
+    (item) => item.type === "add" && isToolbarActionVisible(item, form, namePath)
+  );
+  const addLabel = (addAction == null ? void 0 : addAction.label) ?? locale.ProForm.formListTabsAdd;
+  const hasReachedMax = max !== void 0 && max <= fields.length;
+  const hideAdd = !addAction || addAction.disabled || disabled || isView || hasReachedMax;
+  const handleAdd = async () => {
+    if (!addAction || hideAdd)
+      return;
+    await runAfterValidation(async () => {
+      pendingAddKeysRef.current = new Set(fieldKeysRef.current);
+      const added = await executeToolbarAdd({ action: addAction, form, namePath, operation });
+      if (!added)
+        pendingAddKeysRef.current = null;
+      return added;
+    });
+  };
+  const handleChange = (nextActiveKey) => {
+    if (nextActiveKey === activeKey)
+      return;
+    void runAfterValidation(() => {
+      const nextIndex = fieldKeysRef.current.indexOf(nextActiveKey);
+      if (nextIndex < 0)
+        return false;
+      activeIndexRef.current = nextIndex;
+      setActiveKey(nextActiveKey);
+      return true;
+    });
+  };
+  const handleDragEnd = ({ active, over }) => {
+    if (!over || active.id === over.id)
+      return;
+    const activeIndex = fieldKeys.indexOf(String(active.id));
+    const overIndex = fieldKeys.indexOf(String(over.id));
+    if (activeIndex >= 0 && overIndex >= 0)
+      operation.move(activeIndex, overIndex);
+  };
+  const wrapValidatedActions = (items2) => items2 == null ? void 0 : items2.filter((item) => item.type !== "moveUp" && item.type !== "moveDown").map((item) => {
+    if (item.type !== "add" && item.type !== "copy")
+      return item;
+    const callback = item.onClick || item.onHandle;
+    return {
+      ...item,
+      onHandle: void 0,
+      onClick: async (record, option) => {
+        let didRun = false;
+        const result = await runAfterValidation(() => {
+          didRun = true;
+          return callback ? callback(record, option) : item.type === "copy" ? true : void 0;
+        });
+        return didRun ? result : FORM_LIST_ACTION_ABORT;
+      }
+    };
+  });
+  const items = fields.map((field, index) => {
+    const fieldKey = String(field.key);
+    const itemNamePath = [...namePath, field.name];
+    const record = form.getFieldValue(itemNamePath);
+    const tabTitle = isFunction(title) ? title(record, index, form) : title;
+    const renderedTitle = tabTitle ?? `Tab ${index + 1}`;
+    const tabActionProps = wrapValidatedActions(actionProps || void 0);
+    const errorCount = errorCounts.get(fieldKey) || 0;
+    return {
+      key: fieldKey,
+      closable: false,
+      label: /* @__PURE__ */ jsx(SortableTabLabel, { fieldKey, draggable, disabled: disabled || isView, children: /* @__PURE__ */ jsx(
+        Badge,
+        {
+          className: "pro-form-list-tabs-error-badge",
+          count: errorCount,
+          overflowCount: 99,
+          size: "small",
+          children: /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: `pro-form-list-tabs-title-content${errorCount ? " pro-form-list-tabs-title-content-error" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-title", children: renderedTitle }),
+                actionProps !== false && /* @__PURE__ */ jsx(
+                  ActionButton,
+                  {
+                    min,
+                    max,
+                    index,
+                    length: fields.length,
+                    operation,
+                    namePath: itemNamePath,
+                    form,
+                    field: { ...field, key: fieldKey },
+                    fields,
+                    actionProps: tabActionProps,
+                    mode: "tabs",
+                    disabled,
+                    isView
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ) }),
+      children: /* @__PURE__ */ jsx("div", { className: "pro-form-list-tabs-content", children: /* @__PURE__ */ jsx(Row, { gutter: 16, className: "pro-form-list-fields", children: /* @__PURE__ */ jsx(
+        MemoRenderFields,
+        {
+          columns: processColumns(index, itemNamePath),
+          form,
+          colProps: { span },
+          disabled,
+          isView,
+          diffConfig
+        }
+      ) }) })
+    };
+  });
+  return /* @__PURE__ */ jsx(DndContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs(
+    SortableContext,
+    {
+      items: fieldKeys.map((key) => ({ id: key })),
+      strategy: horizontalListSortingStrategy,
+      children: [
+        /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            className: "pro-form-list-tabs",
+            type: "editable-card",
+            size: "small",
+            activeKey,
+            addIcon: /* @__PURE__ */ jsxs("span", { className: "pro-form-list-tabs-add", children: [
+              /* @__PURE__ */ jsx(PlusOutlined, {}),
+              /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-add-label", children: addLabel })
+            ] }),
+            hideAdd,
+            items,
+            onChange: handleChange,
+            onEdit: (_, action) => {
+              if (action === "add")
+                void handleAdd();
+            }
+          }
+        ),
+        fields.length === 0 && /* @__PURE__ */ jsx(
+          Empty,
+          {
+            disabled: hideAdd,
+            toolbarProps: addAction ? [{ ...addAction, show: true }] : false,
+            operation,
+            form,
+            namePath,
+            emptyBtnText,
+            onAdd: handleAdd
+          }
+        )
+      ]
+    }
+  ) });
+};
+var TabsFields_default = TabsFields;
+export {
+  TabsFields_default as default
+};

package/es/ProForm/components/combination/FormList/components/ToolbarButton.js

@@ -1,10 +1,14 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { Space, Button } from "antd";
 import { PlusOutlined } from "@ant-design/icons";
-import isFunction from "lodash/isFunction";
 import omit from "lodash/omit";
 import { useMemo } from "react";
 import locale from "../../../../../locale";
+import {
+  executeToolbarAdd,
+  isToolbarActionVisible,
+  normalizeToolbarActions
+} from "../toolbarActions";
 const actions = {
   add: {
     onClick: (value, { operation }) => {
@@ -15,65 +19,27 @@ const actions = {
     icon: /* @__PURE__ */ jsx(PlusOutlined, {})
   }
 };
-const defaultActionProps = [{ type: "add" }];
 const filterKeys = ["actionType", "addIndex", "show"];
 const ToolbarButton = (props) => {
   const { namePath, form, operation, length, fields, min, max, disabled, isView } = props;
-  const toolbarProps = useMemo(() => {
-    var _a;
-    const _toolbarProps = (_a = props.toolbarProps) == null ? void 0 : _a.map((item) => {
-      return {
-        ...item,
-        type: item.actionType || item.type
-      };
-    });
-    if (!(_toolbarProps == null ? void 0 : _toolbarProps.find((item) => item.type === "add"))) {
-      return _toolbarProps ? [..._toolbarProps, ...defaultActionProps] : defaultActionProps;
-    }
-    return _toolbarProps;
-  }, [props.toolbarProps]);
-  const handleClick = async (defaultCallback, callback, item) => {
-    const value = form.getFieldValue(namePath);
-    const data = await (callback == null ? void 0 : callback(value, { operation, form, namePath, index: (value == null ? void 0 : value.length) || 0 }));
-    if (!callback || data === true) {
-      if ((item == null ? void 0 : item.type) === "add") {
-        if (item.addIndex !== void 0) {
-          const insertIndex = typeof item.addIndex === "function" ? item.addIndex(value, { namePath, form, operation, index: (value == null ? void 0 : value.length) || 0 }) : item.addIndex;
-          operation.add(data, insertIndex);
-        } else {
-          operation.add(data);
-        }
-      } else {
-        defaultCallback == null ? void 0 : defaultCallback(value, { operation, form, namePath, index: (value == null ? void 0 : value.length) || 0 });
-      }
-      return;
-    }
-    if ((item == null ? void 0 : item.type) === "add" && data) {
-      if (item.addIndex !== void 0) {
-        const insertIndex = typeof item.addIndex === "function" ? item.addIndex(value, { namePath, form, operation, index: (value == null ? void 0 : value.length) || 0 }) : item.addIndex;
-        operation.add(data, insertIndex);
-      } else {
-        operation.add(data);
-      }
-    }
-  };
+  const toolbarProps = useMemo(
+    () => normalizeToolbarActions(props.toolbarProps),
+    [props.toolbarProps]
+  );
   const customClick = (callback, item) => {
     const value = form.getFieldValue(namePath);
     callback == null ? void 0 : callback(value, { operation, form, namePath, index: 0 });
   };
   return /* @__PURE__ */ jsx(Space, { align: "start", className: "pro-form-list-toolbar", children: toolbarProps == null ? void 0 : toolbarProps.map((item) => {
-    if (item.show === false)
+    if (!isToolbarActionVisible(item, form, namePath))
       return /* @__PURE__ */ jsx(Fragment, {});
-    if (isFunction(item.show) && !item.show(form.getFieldValue(namePath), { namePath, form })) {
-      return /* @__PURE__ */ jsx(Fragment, {});
-    }
     const { label, onClick, onHandle, type, ...rest } = item;
     const toolbarKey = `${namePath.join(".")}-${type ?? "custom"}-${label ?? ""}`;
     const _onClick = onClick || onHandle;
     if (type === "add") {
       if (disabled || isView)
         return /* @__PURE__ */ jsx(Fragment, {});
-      const { onClick: internalOnClick, label: defaultLabel, ...defaultRest } = actions[type];
+      const { label: defaultLabel, ...defaultRest } = actions[type];
       if (max && max <= fields.length && type === "add") {
         return false;
       }
@@ -83,7 +49,7 @@ const ToolbarButton = (props) => {
           ...actions[type],
           ...omit(rest, filterKeys),
           type: "link",
-          onClick: () => handleClick(internalOnClick, _onClick, item),
+          onClick: () => executeToolbarAdd({ action: item, form, namePath, operation }),
           children: label || defaultLabel
         },
         toolbarKey

package/es/ProForm/components/combination/FormList/index.js

@@ -10,6 +10,7 @@ import ToolbarButton from "./components/ToolbarButton";
 import BlockFields from "./components/BlockFields";
 import LineFields from "./components/LineFields";
 import Empty from "./components/Empty";
+import TabsFields from "./components/TabsFields";
 import ProForm from "../../../../ProForm";
 import { useProConfig } from "../../../../ProConfigProvider";
 const FormList = (props, ref) => {
@@ -108,6 +109,24 @@ const FormList = (props, ref) => {
       props.operation.move(activeIndex, overIndex);
     }
   };
+  if (mode === "tabs") {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      /* @__PURE__ */ jsx(
+        TabsFields,
+        {
+          ...props,
+          mode: "tabs",
+          fields,
+          form,
+          isView,
+          namePath: _namePath,
+          processColumns,
+          diffConfig: _diffConfig
+        }
+      ),
+      /* @__PURE__ */ jsx(Form.ErrorList, { errors })
+    ] });
+  }
   return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(DndContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs(
     SortableContext,
     {

package/es/ProForm/components/combination/FormList/propsType.d.ts

@@ -34,7 +34,7 @@ export interface ToolbarActionType extends Omit<ActionType, 'actionType' | 'onHa
     show?: boolean | ((record: any, option: Pick<Option, 'form' | 'namePath'>) => boolean);
     addIndex?: number | ((record: any, option: Pick<Option, 'index' | 'form' | 'namePath' | 'operation'>) => number);
 }
-export type FormListMode = 'block' | 'line' | 'less';
+export type FormListMode = 'block' | 'line' | 'less' | 'tabs';
 export interface FormListType {
     columns: ProFormColumnType[];
     otherProps?: ProFormOtherType;