@zat-design/sisyphus-react 4.6.4 → 4.6.5-beta.2

package/es/ProDrawerForm/index.js

@@ -1,50 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import {
-  createContext,
-  forwardRef,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useMemo
-} from "react";
+import { createContext, forwardRef, useContext, useImperativeHandle, useMemo } from "react";
 import { ProDrawer, ProModal } from "./components";
 import ProForm from "../ProForm";
 import { resolveDrawerSize } from "./utils";
 import locale from "../locale";
 const ProDrawerFormContext = createContext(null);
-const scrollLockClassName = "pro-drawer-form-scroll-lock";
-let openDrawerCount = 0;
-let lockedScrollLeft = 0;
-let lockedScrollTop = 0;
-const lockRootScroll = () => {
-  if (typeof document === "undefined") {
-    return void 0;
-  }
-  if (openDrawerCount === 0) {
-    const scrollingElement = document.scrollingElement ?? document.documentElement;
-    lockedScrollLeft = scrollingElement.scrollLeft;
-    lockedScrollTop = scrollingElement.scrollTop;
-    document.body.style.setProperty("--pro-drawer-form-scroll-top", `-${lockedScrollTop}px`);
-    document.body.style.setProperty("--pro-drawer-form-scroll-left", `-${lockedScrollLeft}px`);
-    document.documentElement.classList.add(scrollLockClassName);
-    document.body.classList.add(scrollLockClassName);
-  }
-  openDrawerCount += 1;
-  return () => {
-    openDrawerCount = Math.max(0, openDrawerCount - 1);
-    if (openDrawerCount === 0) {
-      document.documentElement.classList.remove(scrollLockClassName);
-      document.body.classList.remove(scrollLockClassName);
-      document.body.style.removeProperty("--pro-drawer-form-scroll-top");
-      document.body.style.removeProperty("--pro-drawer-form-scroll-left");
-      if (lockedScrollLeft !== 0 || lockedScrollTop !== 0) {
-        window.scrollTo(lockedScrollLeft, lockedScrollTop);
-      }
-      lockedScrollLeft = 0;
-      lockedScrollTop = 0;
-    }
-  };
-};
 const useProDrawerFormContext = () => useContext(ProDrawerFormContext);
 const ProDrawerForm = forwardRef((props, ref) => {
   var _a, _b, _c, _d, _e, _f;
@@ -67,12 +27,6 @@ const ProDrawerForm = forwardRef((props, ref) => {
   } = props;
   const nextIsView = isView || disabled;
   const nextOkText = okText ?? (mode === "Drawer" ? (_d = (_c = locale) == null ? void 0 : _c.ProDrawerForm) == null ? void 0 : _d.save : (_f = (_e = locale) == null ? void 0 : _e.ProDrawerForm) == null ? void 0 : _f.confirm);
-  useEffect(() => {
-    if (!open || mode !== "Drawer") {
-      return void 0;
-    }
-    return lockRootScroll();
-  }, [mode, open]);
   const { width: deprecatedWidth, ...restPropsWithoutWidth } = restProps;
   const width = resolveDrawerSize(size, deprecatedWidth);
   const [form] = ProForm.useForm(originalForm);

package/es/ProDrawerForm/style/index.less

@@ -1,17 +1,5 @@
 @import '../../style/variables.less';
 
-html.pro-drawer-form-scroll-lock {
-  overflow: hidden !important;
-}
-
-body.pro-drawer-form-scroll-lock {
-  position: fixed !important;
-  top: var(--pro-drawer-form-scroll-top, 0);
-  left: var(--pro-drawer-form-scroll-left, 0);
-  width: 100%;
-  overflow: hidden !important;
-}
-
 .pro-drawer {
   .original-value-tooltip {
     position: fixed;

package/es/ProEditTable/components/RenderField/index.js

@@ -35,7 +35,8 @@ import {
   OMIT_FORM_ITEM_AND_DOM_KEYS,
   arePropsEqual,
   hasRowFunctionDependency,
-  mergeOnFieldChangeRow
+  mergeOnFieldChangeRow,
+  stabilizeDatePickerValueProps
 } from "./tools";
 const RenderField = ({ text: value, record, index, column, config }) => {
   var _a, _b, _c;
@@ -573,6 +574,7 @@ const RenderField = ({ text: value, record, index, column, config }) => {
   if (["Select", "ProSelect", "ProEnum"].includes(type)) {
     componentProps.scrollFollowParent = false;
   }
+  const datePickerValueRef = useRef(void 0);
   const finalFormItemProps = useMemo(() => {
     const defaultTransformProps = defaultTransform();
     const namesTransformProps = namesTransform();
@@ -588,7 +590,7 @@ const RenderField = ({ text: value, record, index, column, config }) => {
       }
       return transformNormalize(value2, prevValue, allValues, isDiffMode);
     } : userNormalize || transformNormalize;
-    const finalGetValueProps = transformGetValueProps && userGetValueProps ? (value2, ...args) => {
+    const mergedGetValueProps = transformGetValueProps && userGetValueProps ? (value2, ...args) => {
       const transformValueProps = transformGetValueProps(value2, ...args) || {};
       const nextValue = Object.prototype.hasOwnProperty.call(transformValueProps, "value") ? transformValueProps.value : value2;
       const userValueProps = userGetValueProps(nextValue, ...args) || {};
@@ -597,6 +599,10 @@ const RenderField = ({ text: value, record, index, column, config }) => {
         ...userValueProps
       };
     } : userGetValueProps || transformGetValueProps;
+    const finalGetValueProps = type === "DatePicker" && transformGetValueProps && mergedGetValueProps ? (...args) => {
+      const valueProps = mergedGetValueProps(...args);
+      return valueProps ? stabilizeDatePickerValueProps(datePickerValueRef, valueProps) : valueProps;
+    } : mergedGetValueProps;
     return {
       ...lastFormItemProps,
       ...defaultTransformProps,

package/es/ProEditTable/components/RenderField/tools.d.ts

@@ -1,5 +1,9 @@
 import { InternalNamePath, NamePath } from 'antd/lib/form/interface';
 import { GetOriginalValueParams, RenderFieldComparableProps } from './propsType';
+/** 避免等值日期在表格重渲染时产生新引用，导致 DatePicker 面板状态被重置。 */
+export declare const stabilizeDatePickerValueProps: (valueRef: {
+    current: any;
+}, valueProps: Record<string, any>) => Record<string, any>;
 /** 判断列是否包含可能依赖整行数据的函数型配置。 */
 export declare const hasRowFunctionDependency: (column: Record<string, any> | null | undefined) => boolean;
 /**

package/es/ProEditTable/components/RenderField/tools.js

@@ -2,6 +2,7 @@ import get from "lodash/get";
 import isEqual from "lodash/isEqual";
 import isEqualWith from "lodash/isEqualWith";
 import isFunction from "lodash/isFunction";
+import dayjs from "dayjs";
 import { customEqualForFunction } from "../../../utils";
 import { getNamePath, isRecordShallowEqual } from "../../utils/tools";
 const ROW_FUNCTION_DEPENDENCY_KEYS = [
@@ -15,6 +16,18 @@ const ROW_FUNCTION_DEPENDENCY_KEYS = [
   "valueType",
   "viewRender"
 ];
+const stabilizeDatePickerValueProps = (valueRef, valueProps) => {
+  const previousValue = valueRef.current;
+  const nextValue = valueProps.value;
+  if (dayjs.isDayjs(previousValue) && dayjs.isDayjs(nextValue) && previousValue.valueOf() === nextValue.valueOf() && previousValue.utcOffset() === nextValue.utcOffset() && previousValue.locale() === nextValue.locale()) {
+    return {
+      ...valueProps,
+      value: previousValue
+    };
+  }
+  valueRef.current = nextValue;
+  return valueProps;
+};
 const hasRowFunctionDependency = (column) => ROW_FUNCTION_DEPENDENCY_KEYS.some((key) => isFunction(column == null ? void 0 : column[key]));
 const mergeOnFieldChangeRow = (beforeRow, mutatedRow, latestStoreRow) => {
   const before = beforeRow || {};
@@ -220,6 +233,7 @@ export {
   getOriginalValue,
   hasRowFunctionDependency,
   mergeOnFieldChangeRow,
+  stabilizeDatePickerValueProps,
   toNamePath,
   toNamePaths
 };

package/es/ProEditTable/style/index.less

@@ -239,6 +239,14 @@
     }
   }
 
+  .@{ant-prefix}-table-tbody
+    .is-editing:not(.@{ant-prefix}-table-measure-row):not(.@{ant-prefix}-table-row-extra)
+    .@{ant-prefix}-form-item-control {
+    min-height: calc(
+      var(--zaui-height-size-lg; 32px) * var(--zaui-size; 1)
+    ) !important;
+  }
+
   .@{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 {

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

@@ -10,6 +10,7 @@ import omit from "lodash/omit";
 import classNames from "classnames";
 import { useMemo } from "react";
 import {
+  CloseOutlined,
   CopyOutlined,
   PlusSquareOutlined,
   ArrowUpOutlined,
@@ -37,7 +38,7 @@ const getDefaultActions = (mode) => {
         remove(index);
       },
       label: locale.ProForm.formListActions[1],
-      icon: mode === "less" || mode === "tabs" ? /* @__PURE__ */ jsx(ProIcon, { component: close2Svg, size: 14, className: "single-delete" }) : /* @__PURE__ */ jsx(ProIcon, { component: deleteSvg, size: 18 })
+      icon: mode === "tabs" ? /* @__PURE__ */ jsx(CloseOutlined, {}) : mode === "less" ? /* @__PURE__ */ jsx(ProIcon, { component: close2Svg, size: 14, className: "single-delete" }) : /* @__PURE__ */ jsx(ProIcon, { component: deleteSvg, size: 18 })
     },
     copy: {
       onClick: (record, { namePath, index, operation }) => {
@@ -196,6 +197,8 @@ const ActionButton = (props) => {
           title: title ?? `${locale.ProForm.formListConfirmMessage}`,
           onCancel: (e) => e.stopPropagation(),
           onConfirm: (e) => {
+            if (mode === "tabs")
+              e == null ? void 0 : e.stopPropagation();
             if (type === "add") {
               handleAddClick();
             } else {
@@ -209,6 +212,7 @@ const ActionButton = (props) => {
               ...defaultRest,
               ...omit(rest, filterKeys),
               className: "pro-form-list-delete-icon",
+              "data-form-list-action": mode === "tabs" ? type : void 0,
               type: "text",
               onClick: (e) => e.stopPropagation(),
               children: label || defaultLabel
@@ -227,6 +231,7 @@ const ActionButton = (props) => {
           }),
           ...defaultRest,
           ...omit(rest, filterKeys),
+          "data-form-list-action": mode === "tabs" ? type : void 0,
           type: "text",
           onClick: (e) => {
             e.stopPropagation();

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

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Badge, Row, Tabs } from "antd";
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Badge, Row, Tabs, theme, Tooltip } 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 { DndContext, DragOverlay, useDraggable, useDroppable } from "@dnd-kit/core";
 import isFunction from "lodash/isFunction";
 import dragSvg from "../../../../../assets/drag.svg";
 import ProIcon from "../../../../../ProIcon";
@@ -21,6 +20,7 @@ import {
 } from "../toolbarActions";
 import { subscribeFormListTabsValidation } from "../tabsValidation";
 const MemoRenderFields = React.memo(RenderFields, memoWith);
+const MAX_TAB_TITLE_LENGTH = 10;
 const getTabErrorCounts = (errorFields, fields, namePath) => {
   const uniqueErrors = /* @__PURE__ */ new Map();
   errorFields.forEach((errorField) => {
@@ -48,27 +48,40 @@ const SortableTabLabel = ({
   draggable,
   fieldKey
 }) => {
+  const instanceId = useId();
+  const id = `${fieldKey}-${instanceId}`;
   const {
     attributes,
     listeners,
     setActivatorNodeRef,
-    setNodeRef,
-    transform,
-    transition,
+    setNodeRef: setDragNodeRef,
     isDragging
-  } = useSortable({
-    id: fieldKey,
+  } = useDraggable({
+    id,
+    data: { fieldKey },
     disabled: disabled || !draggable
   });
+  const { setNodeRef: setDropNodeRef, isOver } = useDroppable({
+    id,
+    data: { fieldKey },
+    disabled: disabled || !draggable
+  });
+  const setNodeRef = useCallback(
+    (node) => {
+      setDragNodeRef(node);
+      setDropNodeRef(node);
+    },
+    [setDragNodeRef, setDropNodeRef]
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: setNodeRef,
       className: "pro-form-list-tabs-label",
+      "data-drag-over": isOver || void 0,
+      "data-form-list-field-key": fieldKey,
       style: {
-        opacity: isDragging ? 0.4 : void 0,
-        transform: CSS.Translate.toString(transform),
-        transition
+        opacity: isDragging ? 0.4 : void 0
       },
       children: [
         !disabled && draggable && /* @__PURE__ */ jsx(
@@ -78,7 +91,7 @@ const SortableTabLabel = ({
             ...listeners,
             ref: setActivatorNodeRef,
             className: "pro-form-list-tabs-drag-handle",
-            children: /* @__PURE__ */ jsx(ProIcon, { component: dragSvg, size: 16, color: "#949599" })
+            children: /* @__PURE__ */ jsx(ProIcon, { component: dragSvg, size: 16 })
           }
         ),
         children
@@ -87,6 +100,20 @@ const SortableTabLabel = ({
   );
 };
 const TabsFields = (props) => {
+  var _a;
+  const { token } = theme.useToken();
+  const tabsStyle = {
+    "--pro-form-list-tabs-primary": token.colorPrimary,
+    "--pro-form-list-tabs-primary-hover": token.colorPrimaryHover,
+    "--pro-form-list-tabs-primary-bg": token.colorPrimaryBg,
+    "--pro-form-list-tabs-text": token.colorText,
+    "--pro-form-list-tabs-muted": token.colorTextDescription,
+    "--pro-form-list-tabs-close": token.colorTextQuaternary,
+    "--pro-form-list-tabs-border": token.colorBorder,
+    "--pro-form-list-tabs-bg": token.colorBgContainer,
+    "--pro-form-list-tabs-error": token.colorError,
+    "--pro-form-list-tabs-solid-text": token.colorTextLightSolid
+  };
   const {
     actionProps,
     diffConfig,
@@ -108,6 +135,7 @@ const TabsFields = (props) => {
   const fieldKeys = fields.map((field) => String(field.key));
   const fieldKeysSignature = fieldKeys.join("\0");
   const [activeKey, setActiveKey] = useState(fieldKeys[0]);
+  const [draggedKey, setDraggedKey] = useState();
   const [validationErrorFields, setValidationErrorFields] = useState([]);
   const activeIndexRef = useRef(0);
   const fieldKeysRef = useRef(fieldKeys);
@@ -136,21 +164,22 @@ const TabsFields = (props) => {
     const fallbackIndex = Math.min(activeIndexRef.current, fieldKeys.length - 1);
     setActiveKey(fallbackIndex >= 0 ? fieldKeys[fallbackIndex] : void 0);
   }, [activeKey, fieldKeysSignature]);
+  const activateFirstError = useCallback((errorFields) => {
+    const counts = getTabErrorCounts(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));
+  }, []);
   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));
+      activateFirstError(event.errorFields);
     }),
-    [form]
+    [form, activateFirstError]
   );
   const validateCurrent = useCallback(async () => {
     if (!activeKey)
@@ -165,13 +194,31 @@ const TabsFields = (props) => {
       return false;
     }
   }, [activeKey, fieldKeysSignature, form, namePath]);
+  const validateAllItems = useCallback(async () => {
+    if (!fieldsRef.current.length || !(form == null ? void 0 : form.validateFields))
+      return true;
+    try {
+      await form.validateFields(
+        fieldsRef.current.map((field) => [...namePathRef.current, field.name]),
+        { recursive: true }
+      );
+      setValidationErrorFields([]);
+      return true;
+    } catch (error) {
+      if (error && typeof error === "object" && "errorFields" in error && Array.isArray(error.errorFields) && !("outOfDate" in error && error.outOfDate)) {
+        setValidationErrorFields(error.errorFields);
+        activateFirstError(error.errorFields);
+      }
+      return false;
+    }
+  }, [form, activateFirstError]);
   const runAfterValidation = useCallback(
-    async (callback) => {
+    async (callback, validate = validateCurrent) => {
       if (validatingRef.current)
         return false;
       validatingRef.current = true;
       try {
-        if (!await validateCurrent())
+        if (!await validate())
           return false;
         return await callback();
       } finally {
@@ -199,7 +246,7 @@ const TabsFields = (props) => {
       if (!added)
         pendingAddKeysRef.current = null;
       return added;
-    });
+    }, validateAllItems);
   };
   const handleChange = (nextActiveKey) => {
     if (nextActiveKey === activeKey)
@@ -214,10 +261,14 @@ const TabsFields = (props) => {
     });
   };
   const handleDragEnd = ({ active, over }) => {
-    if (!over || active.id === over.id)
+    var _a2, _b;
+    setDraggedKey(void 0);
+    const sourceKey = (_a2 = active.data.current) == null ? void 0 : _a2.fieldKey;
+    const targetKey = (_b = over == null ? void 0 : over.data.current) == null ? void 0 : _b.fieldKey;
+    if (!over || sourceKey === targetKey)
       return;
-    const activeIndex = fieldKeys.indexOf(String(active.id));
-    const overIndex = fieldKeys.indexOf(String(over.id));
+    const activeIndex = fieldKeys.indexOf(sourceKey);
+    const overIndex = fieldKeys.indexOf(targetKey);
     if (activeIndex >= 0 && overIndex >= 0)
       operation.move(activeIndex, overIndex);
   };
@@ -233,7 +284,7 @@ const TabsFields = (props) => {
         const result = await runAfterValidation(() => {
           didRun = true;
           return callback ? callback(record, option) : item.type === "copy" ? true : void 0;
-        });
+        }, validateAllItems);
         return didRun ? result : FORM_LIST_ACTION_ABORT;
       }
     };
@@ -244,6 +295,9 @@ const TabsFields = (props) => {
     const record = form.getFieldValue(itemNamePath);
     const tabTitle = isFunction(title) ? title(record, index, form) : title;
     const renderedTitle = tabTitle ?? `Tab ${index + 1}`;
+    const titleChars = typeof renderedTitle === "string" || typeof renderedTitle === "number" ? Array.from(String(renderedTitle)) : void 0;
+    const isTitleOverflow = titleChars && titleChars.length > MAX_TAB_TITLE_LENGTH;
+    const displayTitle = isTitleOverflow ? `${titleChars.slice(0, MAX_TAB_TITLE_LENGTH).join("")}...` : renderedTitle;
     const tabActionProps = wrapValidatedActions(actionProps || void 0);
     const errorCount = errorCounts.get(fieldKey) || 0;
     return {
@@ -258,33 +312,27 @@ const TabsFields = (props) => {
           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__ */ jsxs("span", { className: "pro-form-list-tabs-title-content", children: [
+            isTitleOverflow ? /* @__PURE__ */ jsx(Tooltip, { title: renderedTitle, placement: "top", children: /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-title", children: displayTitle }) }) : /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-title", children: displayTitle }),
+            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(
@@ -300,16 +348,24 @@ const TabsFields = (props) => {
       ) }) })
     };
   });
-  return /* @__PURE__ */ jsx(DndContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs(
-    SortableContext,
+  const draggedLabel = (_a = items.find((item) => item.key === draggedKey)) == null ? void 0 : _a.label;
+  return /* @__PURE__ */ jsxs(
+    DndContext,
     {
-      items: fieldKeys.map((key) => ({ id: key })),
-      strategy: horizontalListSortingStrategy,
+      onDragStart: ({ active }) => {
+        var _a2;
+        return setDraggedKey((_a2 = active.data.current) == null ? void 0 : _a2.fieldKey);
+      },
+      onDragCancel: () => setDraggedKey(void 0),
+      onDragEnd: handleDragEnd,
       children: [
         /* @__PURE__ */ jsx(
           Tabs,
           {
             className: "pro-form-list-tabs",
+            style: tabsStyle,
+            classNames: { popup: { root: "pro-form-list-tabs-dropdown" } },
+            more: { overlayStyle: tabsStyle },
             type: "editable-card",
             size: "small",
             activeKey,
@@ -337,10 +393,26 @@ const TabsFields = (props) => {
             emptyBtnText,
             onAdd: handleAdd
           }
+        ),
+        typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, zIndex: token.zIndexPopupBase + 100, children: React.isValidElement(draggedLabel) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pro-form-list-tabs pro-form-list-tabs-drag-overlay",
+              style: tabsStyle,
+              "data-active": draggedKey === activeKey,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxs("div", { className: "pro-form-list-tabs-label", children: [
+                /* @__PURE__ */ jsx("span", { className: "pro-form-list-tabs-drag-handle", children: /* @__PURE__ */ jsx(ProIcon, { component: dragSvg, size: 16 }) }),
+                draggedLabel.props.children
+              ] })
+            }
+          ) }),
+          document.body
         )
       ]
     }
-  ) });
+  );
 };
 var TabsFields_default = TabsFields;
 export {