@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

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

@@ -1,137 +1,165 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/form/components/FormItem/FormItemRender/index.tsx
-var FormItemRender_exports = {};
-__export(FormItemRender_exports, {
-  FormControlRender: () => FormControlRender,
-  FormItemRender: () => FormItemRender,
-  ProFormItemRender: () => ProFormItemRender,
-  pickControlProps: () => pickControlProps,
-  pickControlPropsWithId: () => pickControlPropsWithId,
-  useControlModel: () => useControlModel,
-  withFormItemRender: () => withFormItemRender
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(FormItemRender_exports);
-var import_antd = require("antd");
-var import_react = __toESM(require("react"));
-var import__ = __toESM(require("../index"));
-function getControlConfigProps(props = {}) {
-  const valuePropName = props.valuePropName || "value";
-  const trigger = props.trigger || "onChange";
-  const name = props.name;
+exports.FormControlRender = FormControlRender;
+exports.ProFormItemRender = exports.FormItemRender = void 0;
+exports.pickControlProps = pickControlProps;
+exports.pickControlPropsWithId = pickControlPropsWithId;
+exports.useControlModel = useControlModel;
+exports.withFormItemRender = withFormItemRender;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _antd = require("antd");
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../index"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children"],
+  _excluded2 = ["children"];
+function getControlConfigProps() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var valuePropName = props.valuePropName || 'value';
+  var trigger = props.trigger || 'onChange';
+  var name = props.name;
   return {
-    valuePropName,
-    trigger,
-    name
+    valuePropName: valuePropName,
+    trigger: trigger,
+    name: name
   };
 }
-function useControlModel({ value, onChange }, model) {
+function useControlModel(_ref, model) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
   if (!Array.isArray(model)) {
-    const p = getControlConfigProps(model);
-    return {
-      [p.valuePropName]: value,
-      [p.trigger]: (e) => {
-        onChange == null ? void 0 : onChange((e == null ? void 0 : e.target) ? e.target[p.valuePropName] : e);
-      }
-    };
+    var p = getControlConfigProps(model);
+    return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, p.valuePropName, value), p.trigger, function (e) {
+      onChange === null || onChange === void 0 || onChange(e !== null && e !== void 0 && e.target ? e.target[p.valuePropName] : e);
+    });
   }
-  return model.reduce(
-    (acc, k) => {
-      const p = getControlConfigProps(k);
-      const name = p.name || k;
-      acc[name] = {
-        [p.valuePropName]: value == null ? void 0 : value[name],
-        [p.trigger]: (v) => {
-          onChange == null ? void 0 : onChange(__spreadProps(__spreadValues({}, value), {
-            [name]: (v == null ? void 0 : v.target) ? v.target[p.valuePropName] : v
-          }));
-        }
-      };
-      return acc;
-    },
-    {}
-  );
+  return model.reduce(function (acc, k) {
+    var p = getControlConfigProps(k);
+    var name = p.name || k;
+    acc[name] = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, p.valuePropName, value === null || value === void 0 ? void 0 : value[name]), p.trigger, function (v) {
+      onChange === null || onChange === void 0 || onChange((0, _objectSpread3.default)((0, _objectSpread3.default)({}, value), {}, (0, _defineProperty2.default)({}, name, v !== null && v !== void 0 && v.target ? v.target[p.valuePropName] : v)));
+    });
+    return acc;
+  }, {});
 }
+/**
+ * 用在 ProForm.Item 或 Form.Item 于 表单项之间的，用于劫持渲染的函数
+ * ``` tsx
+ * <Form.Item name='name' label='名称'>
+ *   <FormControlRender>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <span>prefix</span>
+ *         <Input {...formItemProps} />
+ *       </div>
+ *     )
+ *   }
+ *   </FormControlRender>
+ * </Form.Item>
+ * ```
+ */
 function FormControlRender(props) {
-  const _a = props, { children } = _a, restProps = __objRest(_a, ["children"]);
-  const { status, errors, warnings } = import_antd.Form.Item.useStatus();
-  return children(__spreadValues({
-    status,
-    errors,
-    warnings
+  var children = props.children,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _Form$Item$useStatus = _antd.Form.Item.useStatus(),
+    status = _Form$Item$useStatus.status,
+    errors = _Form$Item$useStatus.errors,
+    warnings = _Form$Item$useStatus.warnings;
+  return children((0, _objectSpread3.default)({
+    status: status,
+    errors: errors,
+    warnings: warnings
   }, restProps));
 }
+
+/**
+ * 提取props中的 value 和 onChange 属性
+ */
 function pickControlProps(props) {
   return {
     value: props.value,
-    onChange: (value) => props.onChange((value == null ? void 0 : value.target) ? value.target.value : value)
+    onChange: function onChange(value) {
+      return props.onChange(value !== null && value !== void 0 && value.target ? value.target.value : value);
+    }
   };
 }
+
+/**
+ * 提取props中的 value、onChange 和 id 属性
+ */
 function pickControlPropsWithId(props) {
-  return __spreadProps(__spreadValues({}, pickControlProps(props)), {
+  return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, pickControlProps(props)), {}, {
     id: props.id
   });
 }
+
+/**
+ * 用于包裹ProForm.Item Form.Item，使其可以使用render props的形式
+ * @description 用法
+ * const FormItem = withFormItemRender(用于包裹ProForm.Item)
+ * ``` tsx
+ * <FormItem name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <span>prefix</span>
+ *         <Input {...formItemProps} />
+ *       </div>
+ *     )
+ *   }
+ * </FormItem>
+ * ```
+ */
 function withFormItemRender(Comp) {
-  return function(props) {
-    const _a = props, { children } = _a, restProps = __objRest(_a, ["children"]);
-    return /* @__PURE__ */ import_react.default.createElement(Comp, __spreadValues({}, restProps), /* @__PURE__ */ import_react.default.createElement(FormControlRender, null, children));
+  return function (props) {
+    var children = props.children,
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, restProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlRender, {
+        children: children
+      })
+    }));
   };
 }
-var FormItemRender = withFormItemRender(import_antd.Form.Item);
-var ProFormItemRender = withFormItemRender(import__.default);
+
+/**
+ * 用 withFormItemRender 加工Form.Item，使其拥有render props能力，同时暴露出 status 属性方便自定义组件校验使用
+ *
+ * ``` tsx
+ *   <FormItemRender name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <h3>prefix</h3>
+ *         <textarea {...formItemProps} style={{ borderColor: formItemProps.status === 'error' ? 'red' : undefined }} />
+ *       </div>
+ *     )
+ *   }
+ *   </FormItemRender>
+ * ```
+ */
+var FormItemRender = exports.FormItemRender = withFormItemRender(_antd.Form.Item);
+
+/**
+ * 用 withFormItemRender 加工 ProForm.Item，使其拥有render props能力，同时暴露出 status 属性方便自定义组件校验使用
+ * ``` tsx
+ *   <ProFormItemRender name='name' label='名称'>
+ *   {
+ *     formItemProps => (
+ *       <div>
+ *         <h3>prefix</h3>
+ *         <textarea {...formItemProps} style={{ borderColor: formItemProps.status === 'error' ? 'red' : undefined }} />
+ *       </div>
+ *     )
+ *   }
+ *   </ProFormItemRender>
+ * ```
+ */
+var ProFormItemRender = exports.ProFormItemRender = withFormItemRender(_index.default);

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

@@ -1,205 +1,150 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/form/components/FormItem/Group/index.tsx
-var Group_exports = {};
-__export(Group_exports, {
-  default: () => Group_default
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Group_exports);
-var import_icons = require("@ant-design/icons");
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_utils = require("../../../../utils");
-var import_FieldContext = __toESM(require("../../../FieldContext"));
-var import_grid = require("../../../helpers/grid");
-var import_style = require("./style");
-var Group = import_react.default.forwardRef(
-  (props, ref) => {
-    const { groupProps } = import_react.default.useContext(import_FieldContext.default);
-    const {
-      children,
-      collapsible,
-      defaultCollapsed,
-      style,
-      labelLayout,
-      title = props.label,
-      tooltip,
-      align = "start",
-      direction,
-      size = 32,
-      titleStyle,
-      titleRender,
-      spaceProps,
-      extra,
-      autoFocus
-    } = __spreadValues(__spreadValues({}, groupProps), props);
-    const [collapsed, setCollapsed] = (0, import_utils.useMountMergeState)(
-      () => defaultCollapsed || false,
-      {
-        value: props.collapsed,
-        onChange: props.onCollapse
-      }
-    );
-    const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
-    const { ColWrapper, RowWrapper } = (0, import_grid.useGridHelpers)(props);
-    const className = getPrefixCls("pro-form-group");
-    const { wrapSSR, hashId } = (0, import_style.useStyle)(className);
-    const collapsibleButton = collapsible && /* @__PURE__ */ import_react.default.createElement(
-      import_icons.RightOutlined,
-      {
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../../../utils");
+var _FieldContext = _interopRequireDefault(require("../../../FieldContext"));
+var _grid = require("../../../helpers/grid");
+var _style = require("./style");
+var _jsxRuntime = require("react/jsx-runtime");
+var Group = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _React$useContext = _react.default.useContext(_FieldContext.default),
+    groupProps = _React$useContext.groupProps;
+  var _groupProps$props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, groupProps), props),
+    children = _groupProps$props.children,
+    collapsible = _groupProps$props.collapsible,
+    defaultCollapsed = _groupProps$props.defaultCollapsed,
+    style = _groupProps$props.style,
+    labelLayout = _groupProps$props.labelLayout,
+    _groupProps$props$tit = _groupProps$props.title,
+    title = _groupProps$props$tit === void 0 ? props.label : _groupProps$props$tit,
+    tooltip = _groupProps$props.tooltip,
+    _groupProps$props$ali = _groupProps$props.align,
+    align = _groupProps$props$ali === void 0 ? 'start' : _groupProps$props$ali,
+    direction = _groupProps$props.direction,
+    _groupProps$props$siz = _groupProps$props.size,
+    size = _groupProps$props$siz === void 0 ? 32 : _groupProps$props$siz,
+    titleStyle = _groupProps$props.titleStyle,
+    titleRender = _groupProps$props.titleRender,
+    spaceProps = _groupProps$props.spaceProps,
+    extra = _groupProps$props.extra,
+    autoFocus = _groupProps$props.autoFocus;
+  var _useMountMergeState = (0, _utils.useMountMergeState)(function () {
+      return defaultCollapsed || false;
+    }, {
+      value: props.collapsed,
+      onChange: props.onCollapse
+    }),
+    _useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
+    collapsed = _useMountMergeState2[0],
+    setCollapsed = _useMountMergeState2[1];
+  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var _useGridHelpers = (0, _grid.useGridHelpers)(props),
+    ColWrapper = _useGridHelpers.ColWrapper,
+    RowWrapper = _useGridHelpers.RowWrapper;
+  var className = getPrefixCls('pro-form-group');
+  var _useStyle = (0, _style.useStyle)(className),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var collapsibleButton = collapsible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {
+    style: {
+      marginInlineEnd: 8
+    },
+    rotate: !collapsed ? 90 : undefined
+  });
+  var label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.LabelIconTip, {
+    label: collapsibleButton ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [collapsibleButton, title]
+    }) : title,
+    tooltip: tooltip
+  });
+  var Wrapper = (0, _react.useCallback)(function (_ref) {
+    var dom = _ref.children;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, spaceProps), {}, {
+      className: (0, _classnames.default)("".concat(className, "-container ").concat(hashId), spaceProps === null || spaceProps === void 0 ? void 0 : spaceProps.className),
+      size: size,
+      align: align,
+      direction: direction,
+      style: (0, _objectSpread2.default)({
+        rowGap: 0
+      }, spaceProps === null || spaceProps === void 0 ? void 0 : spaceProps.style),
+      children: dom
+    }));
+  }, [align, className, direction, hashId, size, spaceProps]);
+  var titleDom = titleRender ? titleRender(label, props) : label;
+  var _useMemo = (0, _react.useMemo)(function () {
+      var hiddenChildren = [];
+      var childrenList = _react.default.Children.toArray(children).map(function (element, index) {
+        var _element$props;
+        if ( /*#__PURE__*/_react.default.isValidElement(element) && element !== null && element !== void 0 && (_element$props = element.props) !== null && _element$props !== void 0 && _element$props.hidden) {
+          hiddenChildren.push(element);
+          return null;
+        }
+        if (index === 0 && /*#__PURE__*/_react.default.isValidElement(element) && autoFocus) {
+          return /*#__PURE__*/_react.default.cloneElement(element, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, element.props), {}, {
+            autoFocus: autoFocus
+          }));
+        }
+        return element;
+      });
+      return [/*#__PURE__*/(0, _jsxRuntime.jsx)(RowWrapper, {
+        Wrapper: Wrapper,
+        children: childrenList
+      }, "children"), hiddenChildren.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
-          marginInlineEnd: 8
+          display: 'none'
         },
-        rotate: !collapsed ? 90 : void 0
-      }
-    );
-    const label = /* @__PURE__ */ import_react.default.createElement(
-      import_utils.LabelIconTip,
-      {
-        label: collapsibleButton ? /* @__PURE__ */ import_react.default.createElement("div", null, collapsibleButton, title) : title,
-        tooltip
-      }
-    );
-    const Wrapper = (0, import_react.useCallback)(
-      ({ children: dom }) => /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Space,
-        __spreadProps(__spreadValues({}, spaceProps), {
-          className: (0, import_classnames.default)(
-            `${className}-container ${hashId}`,
-            spaceProps == null ? void 0 : spaceProps.className
-          ),
-          size,
-          align,
-          direction,
-          style: __spreadValues({
-            rowGap: 0
-          }, spaceProps == null ? void 0 : spaceProps.style)
-        }),
-        dom
-      ),
-      [align, className, direction, hashId, size, spaceProps]
-    );
-    const titleDom = titleRender ? titleRender(label, props) : label;
-    const [childrenDoms, hiddenDoms] = (0, import_react.useMemo)(() => {
-      const hiddenChildren = [];
-      const childrenList = import_react.default.Children.toArray(children).map(
-        (element, index) => {
-          var _a;
-          if (import_react.default.isValidElement(element) && ((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.hidden)) {
-            hiddenChildren.push(element);
-            return null;
-          }
-          if (index === 0 && import_react.default.isValidElement(element) && autoFocus) {
-            return import_react.default.cloneElement(element, __spreadProps(__spreadValues({}, element.props), {
-              autoFocus
-            }));
-          }
-          return element;
-        }
-      );
-      return [
-        /* @__PURE__ */ import_react.default.createElement(RowWrapper, { key: "children", Wrapper }, childrenList),
-        hiddenChildren.length > 0 ? /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            style: {
-              display: "none"
-            }
-          },
-          hiddenChildren
-        ) : null
-      ];
-    }, [children, RowWrapper, Wrapper, autoFocus]);
-    return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(ColWrapper, null, /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)(className, hashId, {
-            [`${className}-twoLine`]: labelLayout === "twoLine"
-          }),
-          style,
-          ref
+        children: hiddenChildren
+      }) : null];
+    }, [children, RowWrapper, Wrapper, autoFocus]),
+    _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
+    childrenDoms = _useMemo2[0],
+    hiddenDoms = _useMemo2[1];
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(ColWrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(className, hashId, (0, _defineProperty2.default)({}, "".concat(className, "-twoLine"), labelLayout === 'twoLine')),
+      style: style,
+      ref: ref,
+      children: [hiddenDoms, (title || tooltip || extra) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(className, "-title ").concat(hashId).trim(),
+        style: titleStyle,
+        onClick: function onClick() {
+          setCollapsed(!collapsed);
         },
-        hiddenDoms,
-        (title || tooltip || extra) && /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: `${className}-title ${hashId}`.trim(),
-            style: titleStyle,
-            onClick: () => {
-              setCollapsed(!collapsed);
-            }
+        children: extra ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            display: 'flex',
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: 'space-between'
           },
-          extra ? /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              style: {
-                display: "flex",
-                width: "100%",
-                alignItems: "center",
-                justifyContent: "space-between"
-              }
+          children: [titleDom, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            onClick: function onClick(e) {
+              return e.stopPropagation();
             },
-            titleDom,
-            /* @__PURE__ */ import_react.default.createElement("span", { onClick: (e) => e.stopPropagation() }, extra)
-          ) : titleDom
-        ),
-        /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            style: {
-              display: collapsible && collapsed ? "none" : void 0
-            }
-          },
-          childrenDoms
-        )
-      ))
-    );
-  }
-);
-Group.displayName = "ProForm-Group";
-var Group_default = Group;
+            children: extra
+          })]
+        }) : titleDom
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: collapsible && collapsed ? 'none' : undefined
+        },
+        children: childrenDoms
+      })]
+    })
+  }));
+});
+Group.displayName = 'ProForm-Group';
+var _default = exports.default = Group;