@chaoswise/ui 3.0.22 → 3.1.0

package/lib/Antd5/form/Form.js

@@ -1,7 +1,7 @@
 var _excluded = ["prefixCls", "className", "rootClassName", "size", "disabled", "form", "colon", "labelAlign", "labelWrap", "labelCol", "wrapperCol", "hideRequiredMark", "layout", "scrollToFirstError", "requiredMark", "onFinishFailed", "name", "style", "feedbackIcons", "variant"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -105,8 +105,12 @@ var InternalForm = function InternalForm(props, ref) {
       feedbackIcons: feedbackIcons
     };
   }, [name, labelAlign, labelCol, wrapperCol, layout, mergedColon, mergedRequiredMark, wrapForm, feedbackIcons]);
+  var nativeElementRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
-    return wrapForm;
+    var _nativeElementRef$cur;
+    return _objectSpread(_objectSpread({}, wrapForm), {}, {
+      nativeElement: (_nativeElementRef$cur = nativeElementRef.current) === null || _nativeElementRef$cur === void 0 ? void 0 : _nativeElementRef$cur.nativeElement
+    });
   });
   var scrollToField = function scrollToField(options, fieldName) {
     if (options) {
@@ -114,9 +118,12 @@ var InternalForm = function InternalForm(props, ref) {
         block: 'nearest'
       };
       if (_typeof(options) === 'object') {
-        defaultScrollToFirstError = options;
+        defaultScrollToFirstError = _objectSpread(_objectSpread({}, defaultScrollToFirstError), options);
       }
       wrapForm.scrollToField(fieldName, defaultScrollToFirstError);
+      if (defaultScrollToFirstError.focus) {
+        wrapForm.focusField(fieldName);
+      }
     }
   };
   var onInternalFinishFailed = function onInternalFinishFailed(errorInfo) {
@@ -149,6 +156,7 @@ var InternalForm = function InternalForm(props, ref) {
               name: name,
               onFinishFailed: onInternalFinishFailed,
               form: wrapForm,
+              ref: nativeElementRef,
               style: _objectSpread(_objectSpread({}, contextForm === null || contextForm === void 0 ? void 0 : contextForm.style), style),
               className: formClassName
             }))

package/lib/Antd5/form/FormItem/ItemHolder.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "className", "rootClassName", "style", "help", "errors", "warnings", "validateStatus", "meta", "hasFeedback", "hidden", "children", "fieldId", "required", "isRequired", "onSubItemMetaChange"];
+var _excluded = ["prefixCls", "className", "rootClassName", "style", "help", "errors", "warnings", "validateStatus", "meta", "hasFeedback", "hidden", "children", "fieldId", "required", "isRequired", "onSubItemMetaChange", "layout"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -43,10 +43,13 @@ export default function ItemHolder(props) {
     required = props.required,
     isRequired = props.isRequired,
     onSubItemMetaChange = props.onSubItemMetaChange,
+    layout = props.layout,
     restProps = _objectWithoutProperties(props, _excluded);
   var itemPrefixCls = "".concat(prefixCls, "-item");
   var _React$useContext = React.useContext(FormContext),
-    requiredMark = _React$useContext.requiredMark;
+    requiredMark = _React$useContext.requiredMark,
+    formVertical = _React$useContext.vertical;
+  var vertical = formVertical || layout === 'vertical';
   // ======================== Margin ========================
   var itemRef = React.useRef(null);
   var debounceErrors = useDebounce(errors);
@@ -80,7 +83,7 @@ export default function ItemHolder(props) {
   };
   var mergedValidateStatus = getValidateState();
   // ======================== Render ========================
-  var itemClassName = classNames(itemPrefixCls, className, rootClassName, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(itemPrefixCls, "-with-help"), hasHelp || debounceErrors.length || debounceWarnings.length), "".concat(itemPrefixCls, "-has-feedback"), mergedValidateStatus && hasFeedback), "".concat(itemPrefixCls, "-has-success"), mergedValidateStatus === 'success'), "".concat(itemPrefixCls, "-has-warning"), mergedValidateStatus === 'warning'), "".concat(itemPrefixCls, "-has-error"), mergedValidateStatus === 'error'), "".concat(itemPrefixCls, "-is-validating"), mergedValidateStatus === 'validating'), "".concat(itemPrefixCls, "-hidden"), hidden));
+  var itemClassName = classNames(itemPrefixCls, className, rootClassName, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(itemPrefixCls, "-with-help"), hasHelp || debounceErrors.length || debounceWarnings.length), "".concat(itemPrefixCls, "-has-feedback"), mergedValidateStatus && hasFeedback), "".concat(itemPrefixCls, "-has-success"), mergedValidateStatus === 'success'), "".concat(itemPrefixCls, "-has-warning"), mergedValidateStatus === 'warning'), "".concat(itemPrefixCls, "-has-error"), mergedValidateStatus === 'error'), "".concat(itemPrefixCls, "-is-validating"), mergedValidateStatus === 'validating'), "".concat(itemPrefixCls, "-hidden"), hidden), "".concat(itemPrefixCls, "-").concat(layout), layout));
   return _jsxs("div", {
     className: itemClassName,
     style: style,
@@ -95,7 +98,8 @@ export default function ItemHolder(props) {
       }, props), {}, {
         requiredMark: requiredMark,
         required: required !== null && required !== void 0 ? required : isRequired,
-        prefixCls: prefixCls
+        prefixCls: prefixCls,
+        vertical: vertical
       })), _jsx(FormItemInput, _objectSpread(_objectSpread(_objectSpread({}, props), meta), {}, {
         errors: debounceErrors,
         warnings: debounceWarnings,

package/lib/Antd5/form/FormItem/index.js

@@ -34,7 +34,7 @@ import { getFieldId, toArray } from '../util';
 import ItemHolder from './ItemHolder';
 import StatusProvider from './StatusProvider';
 var NAME_SPLIT = '__SPLIT__';
-var ValidateStatuses = ['success', 'warning', 'error', 'validating', ''];
+var _ValidateStatuses = ['success', 'warning', 'error', 'validating', ''];
 // https://github.com/ant-design/ant-design/issues/46417
 // `getValueProps` may modify the value props name,
 // we should check if the control is similar.
@@ -81,7 +81,8 @@ function InternalFormItem(props) {
     trigger = _props$trigger === void 0 ? 'onChange' : _props$trigger,
     validateTrigger = props.validateTrigger,
     hidden = props.hidden,
-    help = props.help;
+    help = props.help,
+    layout = props.layout;
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls;
   var _React$useContext2 = React.useContext(FormContext),
@@ -204,6 +205,7 @@ function InternalFormItem(props) {
       warnings: mergedWarnings,
       meta: meta,
       onSubItemMetaChange: onSubItemMetaChange,
+      layout: layout,
       children: baseChildren
     }), "row");
   }
@@ -228,13 +230,13 @@ function InternalFormItem(props) {
     children: function children(control, renderMeta, context) {
       var mergedName = toArray(name).length && renderMeta ? renderMeta.name : [];
       var fieldId = getFieldId(mergedName, formName);
-      var isRequired = required !== undefined ? required : !!(rules && rules.some(function (rule) {
+      var isRequired = required !== undefined ? required : !!(rules !== null && rules !== void 0 && rules.some(function (rule) {
         if (rule && _typeof(rule) === 'object' && rule.required && !rule.warningOnly) {
           return true;
         }
         if (typeof rule === 'function') {
           var ruleEntity = rule(context);
-          return ruleEntity && ruleEntity.required && !ruleEntity.warningOnly;
+          return (ruleEntity === null || ruleEntity === void 0 ? void 0 : ruleEntity.required) && !(ruleEntity !== null && ruleEntity !== void 0 && ruleEntity.warningOnly);
         }
         return false;
       }));

package/lib/Antd5/form/FormItemInput.js

@@ -1,3 +1,12 @@
+var _excluded = ["labelCol", "wrapperCol"];
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -7,13 +16,17 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import classNames from 'classnames';
+import { get, set } from 'rc-util';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import Col from '../grid/col';
 import { FormContext, FormItemPrefixContext } from './context';
 import ErrorList from './ErrorList';
 import FallbackCmp from './style/fallbackCmp';
+var GRID_MAX = 24;
 var FormItemInput = function FormItemInput(props) {
   var prefixCls = props.prefixCls,
     status = props.status,
+    labelCol = props.labelCol,
     wrapperCol = props.wrapperCol,
     children = props.children,
     errors = props.errors,
@@ -23,17 +36,47 @@ var FormItemInput = function FormItemInput(props) {
     help = props.help,
     fieldId = props.fieldId,
     marginBottom = props.marginBottom,
-    onErrorVisibleChanged = props.onErrorVisibleChanged;
+    onErrorVisibleChanged = props.onErrorVisibleChanged,
+    label = props.label;
   var baseClassName = "".concat(prefixCls, "-item");
   var formContext = React.useContext(FormContext);
-  var mergedWrapperCol = wrapperCol || formContext.wrapperCol || {};
+  var mergedWrapperCol = React.useMemo(function () {
+    var mergedWrapper = _objectSpread({}, wrapperCol || formContext.wrapperCol || {});
+    if (label === null && !labelCol && !wrapperCol && formContext.labelCol) {
+      var list = [undefined, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+      list.forEach(function (size) {
+        var _size = size ? [size] : [];
+        var formLabel = get(formContext.labelCol, _size);
+        var formLabelObj = _typeof(formLabel) === 'object' ? formLabel : {};
+        var wrapper = get(mergedWrapper, _size);
+        var wrapperObj = _typeof(wrapper) === 'object' ? wrapper : {};
+        if ('span' in formLabelObj && !('offset' in wrapperObj) && formLabelObj.span < GRID_MAX) {
+          mergedWrapper = set(mergedWrapper, [].concat(_size, ['offset']), formLabelObj.span);
+        }
+      });
+    }
+    return mergedWrapper;
+  }, [wrapperCol, formContext]);
   var className = classNames("".concat(baseClassName, "-control"), mergedWrapperCol.className);
   // Pass to sub FormItem should not with col info
   var subFormContext = React.useMemo(function () {
-    return _objectSpread({}, formContext);
+    var labelCol = formContext.labelCol,
+      wrapperCol = formContext.wrapperCol,
+      rest = _objectWithoutProperties(formContext, _excluded);
+    return rest;
   }, [formContext]);
-  delete subFormContext.labelCol;
-  delete subFormContext.wrapperCol;
+  var extraRef = React.useRef(null);
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    extraHeight = _React$useState2[0],
+    setExtraHeight = _React$useState2[1];
+  useLayoutEffect(function () {
+    if (extra && extraRef.current) {
+      setExtraHeight(extraRef.current.clientHeight);
+    } else {
+      setExtraHeight(0);
+    }
+  }, [extra]);
   var inputDom = _jsx("div", {
     className: "".concat(baseClassName, "-control-input"),
     children: _jsx("div", {
@@ -47,28 +90,17 @@ var FormItemInput = function FormItemInput(props) {
       status: status
     };
   }, [prefixCls, status]);
-  var errorListDom = marginBottom !== null || errors.length || warnings.length ? _jsxs("div", {
-    style: {
-      display: 'flex',
-      flexWrap: 'nowrap'
-    },
-    children: [_jsx(FormItemPrefixContext.Provider, {
-      value: formItemContext,
-      children: _jsx(ErrorList, {
-        fieldId: fieldId,
-        errors: errors,
-        warnings: warnings,
-        help: help,
-        helpStatus: status,
-        className: "".concat(baseClassName, "-explain-connected"),
-        onVisibleChanged: onErrorVisibleChanged
-      })
-    }), !!marginBottom && _jsx("div", {
-      style: {
-        width: 0,
-        height: marginBottom
-      }
-    })]
+  var errorListDom = marginBottom !== null || errors.length || warnings.length ? _jsx(FormItemPrefixContext.Provider, {
+    value: formItemContext,
+    children: _jsx(ErrorList, {
+      fieldId: fieldId,
+      errors: errors,
+      warnings: warnings,
+      help: help,
+      helpStatus: status,
+      className: "".concat(baseClassName, "-explain-connected"),
+      onVisibleChanged: onErrorVisibleChanged
+    })
   }) : null;
   var extraProps = {};
   if (fieldId) {
@@ -78,14 +110,22 @@ var FormItemInput = function FormItemInput(props) {
   // 0&&error -> 0
   var extraDom = extra ? _jsx("div", _objectSpread(_objectSpread({}, extraProps), {}, {
     className: "".concat(baseClassName, "-extra"),
+    ref: extraRef,
     children: extra
   })) : null;
+  var additionalDom = errorListDom || extraDom ? _jsxs("div", {
+    className: "".concat(baseClassName, "-additional"),
+    style: marginBottom ? {
+      minHeight: marginBottom + extraHeight
+    } : {},
+    children: [errorListDom, extraDom]
+  }) : null;
   var dom = formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? formItemRender.render(props, {
     input: inputDom,
     errorList: errorListDom,
     extra: extraDom
   }) : _jsxs(_Fragment, {
-    children: [inputDom, errorListDom, extraDom]
+    children: [inputDom, additionalDom]
   });
   return _jsxs(FormContext.Provider, {
     value: subFormContext,

package/lib/Antd5/form/FormItemLabel.js

@@ -42,12 +42,12 @@ var FormItemLabel = function FormItemLabel(_ref) {
     colon = _ref.colon,
     required = _ref.required,
     requiredMark = _ref.requiredMark,
-    tooltip = _ref.tooltip;
+    tooltip = _ref.tooltip,
+    vertical = _ref.vertical;
   var _useLocale = useLocale('Form'),
     _useLocale2 = _slicedToArray(_useLocale, 1),
     formLocale = _useLocale2[0];
   var _React$useContext = React.useContext(FormContext),
-    vertical = _React$useContext.vertical,
     contextLabelAlign = _React$useContext.labelAlign,
     contextLabelCol = _React$useContext.labelCol,
     labelWrap = _React$useContext.labelWrap,
@@ -64,7 +64,7 @@ var FormItemLabel = function FormItemLabel(_ref) {
   var computedColon = colon === true || contextColon !== false && colon !== false;
   var haveColon = computedColon && !vertical;
   // Remove duplicated user input colon
-  if (haveColon && typeof label === 'string' && label.trim() !== '') {
+  if (haveColon && typeof label === 'string' && label.trim()) {
     labelChildren = label.replace(/[:|：]\s*$/, '');
   }
   // Tooltip

package/lib/Antd5/form/hooks/useForm.js

@@ -12,8 +12,8 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import * as React from 'react';
 import { useForm as useRcForm } from 'rc-field-form';
-import scrollIntoView from 'scroll-into-view-if-needed';
 import { getDOM } from 'rc-util/lib/Dom/findDOMNode';
+import scrollIntoView from 'scroll-into-view-if-needed';
 import { getFieldId, toArray } from '../util';
 function toNamePathStr(name) {
   var namePath = toArray(name);
@@ -59,6 +59,13 @@ export default function useForm(form) {
           }, options));
         }
       },
+      focusField: function focusField(name) {
+        var node = getFieldDOMNode(name, wrapForm);
+        if (node) {
+          var _node$focus;
+          (_node$focus = node.focus) === null || _node$focus === void 0 || _node$focus.call(node);
+        }
+      },
       getFieldInstance: function getFieldInstance(name) {
         var namePathStr = toNamePathStr(name);
         return itemsRef.current[namePathStr];

package/lib/Antd5/form/hooks/useVariants.js

@@ -1,19 +1,25 @@
 import { useContext } from 'react';
 import { VariantContext } from '../context';
-export var Variants = ['outlined', 'borderless', 'filled'];
+import { ConfigContext, Variants } from '../../config-provider';
 /**
  * Compatible for legacy `bordered` prop.
  */
-var useVariant = function useVariant(variant) {
-  var legacyBordered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+var useVariant = function useVariant(component, variant) {
+  var legacyBordered = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  var _useContext = useContext(ConfigContext),
+    configVariant = _useContext.variant,
+    componentConfig = _useContext[component];
   var ctxVariant = useContext(VariantContext);
+  var configComponentVariant = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.variant;
   var mergedVariant;
   if (typeof variant !== 'undefined') {
     mergedVariant = variant;
   } else if (legacyBordered === false) {
     mergedVariant = 'borderless';
   } else {
-    mergedVariant = ctxVariant !== null && ctxVariant !== void 0 ? ctxVariant : 'outlined';
+    var _ref, _ref2;
+    // form variant > component global variant > global variant
+    mergedVariant = (_ref = (_ref2 = ctxVariant !== null && ctxVariant !== void 0 ? ctxVariant : configComponentVariant) !== null && _ref2 !== void 0 ? _ref2 : configVariant) !== null && _ref !== void 0 ? _ref : 'outlined';
   }
   var enableVariantCls = Variants.includes(mergedVariant);
   return [mergedVariant, enableVariantCls];

package/lib/Antd5/form/style/explain.js

@@ -8,7 +8,7 @@ var genFormValidateMotionStyle = function genFormValidateMotionStyle(token) {
   var helpItemCls = "".concat(componentCls, "-show-help-item");
   return _defineProperty({}, helpCls, _defineProperty({
     // Explain holder
-    transition: "opacity ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut),
+    transition: "opacity ".concat(token.motionDurationFast, " ").concat(token.motionEaseInOut),
     '&-appear, &-enter': {
       opacity: 0,
       '&-active': {
@@ -23,14 +23,15 @@ var genFormValidateMotionStyle = function genFormValidateMotionStyle(token) {
     }
   }, helpItemCls, _defineProperty(_defineProperty({
     overflow: 'hidden',
-    transition: "height ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut, ",\n                     opacity ").concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut, ",\n                     transform ").concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut, " !important")
-  }, "&".concat(helpItemCls, "-appear, &").concat(helpItemCls, "-enter"), _defineProperty({
+    transition: "height ".concat(token.motionDurationFast, " ").concat(token.motionEaseInOut, ",\n                     opacity ").concat(token.motionDurationFast, " ").concat(token.motionEaseInOut, ",\n                     transform ").concat(token.motionDurationFast, " ").concat(token.motionEaseInOut, " !important")
+  }, "&".concat(helpItemCls, "-appear, &").concat(helpItemCls, "-enter"), {
     transform: "translateY(-5px)",
-    opacity: 0
-  }, "&-active", {
-    transform: 'translateY(0)',
-    opacity: 1
-  })), "&".concat(helpItemCls, "-leave-active"), {
+    opacity: 0,
+    '&-active': {
+      transform: 'translateY(0)',
+      opacity: 1
+    }
+  }), "&".concat(helpItemCls, "-leave-active"), {
     transform: "translateY(-5px)"
   })));
 };

package/lib/Antd5/form/style/index.js

@@ -72,6 +72,7 @@ var genFormItemStyle = function genFormItemStyle(token) {
     iconCls = token.iconCls,
     componentCls = token.componentCls,
     rootPrefixCls = token.rootPrefixCls,
+    antCls = token.antCls,
     labelRequiredMarkColor = token.labelRequiredMarkColor,
     labelColor = token.labelColor,
     labelFontSize = token.labelFontSize,
@@ -85,7 +86,7 @@ var genFormItemStyle = function genFormItemStyle(token) {
     '&-with-help': {
       transition: 'none'
     }
-  }, "&-hidden,\n        &-hidden.".concat(rootPrefixCls, "-row"), {
+  }, "&-hidden,\n        &-hidden".concat(antCls, "-row"), {
     // https://github.com/ant-design/ant-design/issues/26141
     display: 'none'
   }), '&-has-warning', _defineProperty({}, "".concat(formItemCls, "-split"), {
@@ -159,6 +160,10 @@ var genFormItemStyle = function genFormItemStyle(token) {
       maxWidth: '100%'
     }
   })), formItemCls, {
+    '&-additional': {
+      display: 'flex',
+      flexDirection: 'column'
+    },
     '&-explain, &-extra': {
       clear: 'both',
       color: token.colorTextDescription,
@@ -205,10 +210,9 @@ var genFormItemStyle = function genFormItemStyle(token) {
     }
   })));
 };
-var genHorizontalStyle = function genHorizontalStyle(token) {
-  var componentCls = token.componentCls,
-    formItemCls = token.formItemCls;
-  return _defineProperty({}, "".concat(componentCls, "-horizontal"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(formItemCls, "-label"), {
+var genHorizontalStyle = function genHorizontalStyle(token, className) {
+  var formItemCls = token.formItemCls;
+  return _defineProperty({}, "".concat(className, "-horizontal"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(formItemCls, "-label"), {
     flexGrow: 0
   }), "".concat(formItemCls, "-control"), {
     flex: '1 1 0',
@@ -273,17 +277,25 @@ var makeVerticalLayout = function makeVerticalLayout(token) {
 var genVerticalStyle = function genVerticalStyle(token) {
   var componentCls = token.componentCls,
     formItemCls = token.formItemCls,
-    rootPrefixCls = token.rootPrefixCls;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-vertical"), _defineProperty({}, formItemCls, _defineProperty({
-    '&-row': {
-      flexDirection: 'column'
-    },
-    '&-label > label': {
-      height: 'auto'
-    }
-  }, "".concat(componentCls, "-item-control"), {
+    antCls = token.antCls;
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-vertical"), _defineProperty({}, "".concat(formItemCls, ":not(").concat(formItemCls, "-horizontal)"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(formItemCls, "-row"), {
+    flexDirection: 'column'
+  }), "".concat(formItemCls, "-label > label"), {
+    height: 'auto'
+  }), "".concat(formItemCls, "-control"), {
+    width: '100%'
+  }), "".concat(formItemCls, "-label,\n        ").concat(antCls, "-col-24").concat(formItemCls, "-label,\n        ").concat(antCls, "-col-xl-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))), "@media (max-width: ".concat(unit(token.screenXSMax), ")"), [makeVerticalLayout(token), _defineProperty({}, componentCls, _defineProperty({}, "".concat(formItemCls, ":not(").concat(formItemCls, "-horizontal)"), _defineProperty({}, "".concat(antCls, "-col-xs-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token))))]), "@media (max-width: ".concat(unit(token.screenSMMax), ")"), _defineProperty({}, componentCls, _defineProperty({}, "".concat(formItemCls, ":not(").concat(formItemCls, "-horizontal)"), _defineProperty({}, "".concat(antCls, "-col-sm-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token))))), "@media (max-width: ".concat(unit(token.screenMDMax), ")"), _defineProperty({}, componentCls, _defineProperty({}, "".concat(formItemCls, ":not(").concat(formItemCls, "-horizontal)"), _defineProperty({}, "".concat(antCls, "-col-md-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token))))), "@media (max-width: ".concat(unit(token.screenLGMax), ")"), _defineProperty({}, componentCls, _defineProperty({}, "".concat(formItemCls, ":not(").concat(formItemCls, "-horizontal)"), _defineProperty({}, "".concat(antCls, "-col-lg-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))));
+};
+var genItemVerticalStyle = function genItemVerticalStyle(token) {
+  var formItemCls = token.formItemCls,
+    antCls = token.antCls;
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(formItemCls, "-vertical"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(formItemCls, "-row"), {
+    flexDirection: 'column'
+  }), "".concat(formItemCls, "-label > label"), {
+    height: 'auto'
+  }), "".concat(formItemCls, "-control"), {
     width: '100%'
-  }))), "".concat(componentCls, "-vertical ").concat(formItemCls, "-label,\n      .").concat(rootPrefixCls, "-col-24").concat(formItemCls, "-label,\n      .").concat(rootPrefixCls, "-col-xl-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)), "@media (max-width: ".concat(unit(token.screenXSMax), ")"), [makeVerticalLayout(token), _defineProperty({}, componentCls, _defineProperty({}, ".".concat(rootPrefixCls, "-col-xs-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))]), "@media (max-width: ".concat(unit(token.screenSMMax), ")"), _defineProperty({}, componentCls, _defineProperty({}, ".".concat(rootPrefixCls, "-col-sm-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))), "@media (max-width: ".concat(unit(token.screenMDMax), ")"), _defineProperty({}, componentCls, _defineProperty({}, ".".concat(rootPrefixCls, "-col-md-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))), "@media (max-width: ".concat(unit(token.screenLGMax), ")"), _defineProperty({}, componentCls, _defineProperty({}, ".".concat(rootPrefixCls, "-col-lg-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token))));
+  })), "".concat(formItemCls, "-vertical ").concat(formItemCls, "-label,\n      ").concat(antCls, "-col-24").concat(formItemCls, "-label,\n      ").concat(antCls, "-col-xl-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)), "@media (max-width: ".concat(unit(token.screenXSMax), ")"), [makeVerticalLayout(token), _defineProperty({}, formItemCls, _defineProperty({}, "".concat(antCls, "-col-xs-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))]), "@media (max-width: ".concat(unit(token.screenSMMax), ")"), _defineProperty({}, formItemCls, _defineProperty({}, "".concat(antCls, "-col-sm-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))), "@media (max-width: ".concat(unit(token.screenMDMax), ")"), _defineProperty({}, formItemCls, _defineProperty({}, "".concat(antCls, "-col-md-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))), "@media (max-width: ".concat(unit(token.screenLGMax), ")"), _defineProperty({}, formItemCls, _defineProperty({}, "".concat(antCls, "-col-lg-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token))));
 };
 // ============================== Export ==============================
 export var prepareComponentToken = function prepareComponentToken(token) {
@@ -307,10 +319,10 @@ export var prepareToken = function prepareToken(token, rootPrefixCls) {
   });
   return formToken;
 };
-export default genStyleHooks('Form', function (token, _ref10) {
-  var rootPrefixCls = _ref10.rootPrefixCls;
+export default genStyleHooks('Form', function (token, _ref12) {
+  var rootPrefixCls = _ref12.rootPrefixCls;
   var formToken = prepareToken(token, rootPrefixCls);
-  return [genFormStyle(formToken), genFormItemStyle(formToken), genFormValidateMotionStyle(formToken), genHorizontalStyle(formToken), genInlineStyle(formToken), genVerticalStyle(formToken), genCollapseMotion(formToken), zoomIn];
+  return [genFormStyle(formToken), genFormItemStyle(formToken), genFormValidateMotionStyle(formToken), genHorizontalStyle(formToken, formToken.componentCls), genHorizontalStyle(formToken, formToken.formItemCls), genInlineStyle(formToken), genVerticalStyle(formToken), genItemVerticalStyle(formToken), genCollapseMotion(formToken), zoomIn];
 }, prepareComponentToken, {
   // Let From style before the Grid
   // ref https://github.com/ant-design/ant-design/issues/44386

package/lib/Antd5/grid/row.js

@@ -20,8 +20,8 @@ import useResponsiveObserver, { responsiveArray } from '../_util/responsiveObser
 import { ConfigContext } from '../config-provider';
 import RowContext from './RowContext';
 import { useRowStyle } from './style';
-var RowAligns = ['top', 'middle', 'bottom', 'stretch'];
-var RowJustify = ['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly'];
+var _RowAligns = ['top', 'middle', 'bottom', 'stretch'];
+var _RowJustify = ['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly'];
 function useMergedPropByScreen(oriProp, screen) {
   var _React$useState = React.useState(typeof oriProp === 'string' ? oriProp : ''),
     _React$useState2 = _slicedToArray(_React$useState, 2),

package/lib/Antd5/image/index.js

@@ -1,5 +1,5 @@
 var _excluded = ["prefixCls", "preview", "className", "rootClassName", "style"],
-  _excluded2 = ["getContainer", "closeIcon"];
+  _excluded2 = ["getContainer", "closeIcon", "rootClassName"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -63,6 +63,7 @@ var Image = function Image(props) {
     var _preview = _typeof(preview) === 'object' ? preview : {};
     var getContainer = _preview.getContainer,
       closeIcon = _preview.closeIcon,
+      rootClassName = _preview.rootClassName,
       restPreviewProps = _objectWithoutProperties(_preview, _excluded2);
     return _objectSpread(_objectSpread({
       mask: _jsxs("div", {
@@ -71,6 +72,7 @@ var Image = function Image(props) {
       }),
       icons: icons
     }, restPreviewProps), {}, {
+      rootClassName: classNames(mergedRootClassName, rootClassName),
       getContainer: getContainer !== null && getContainer !== void 0 ? getContainer : getContextPopupContainer,
       transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
       maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),

package/lib/Antd5/image/style/index.js

@@ -62,13 +62,13 @@ export var genPreviewOperationsStyle = function genPreviewOperationsStyle(token)
     bottom: marginXL,
     left: {
       _skip_check_: true,
-      value: 0
+      value: '50%'
     },
-    width: '100%',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    color: token.previewOperationColor
+    color: token.previewOperationColor,
+    transform: 'translateX(-50%)'
   }), "".concat(previewCls, "-progress"), {
     marginBottom: margin
   }), "".concat(previewCls, "-close"), _defineProperty({
@@ -125,12 +125,10 @@ export var genPreviewSwitchStyle = function genPreviewSwitchStyle(token) {
     motionDurationSlow = token.motionDurationSlow;
   var operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
   var operationBgHover = operationBg.clone().setAlpha(0.2);
-  return _defineProperty(_defineProperty(_defineProperty({}, "".concat(previewCls, "-switch-left, ").concat(previewCls, "-switch-right"), _defineProperty(_defineProperty({
+  return _defineProperty(_defineProperty(_defineProperty({}, "".concat(previewCls, "-switch-left, ").concat(previewCls, "-switch-right"), _defineProperty({
     position: 'fixed',
     insetBlockStart: '50%',
-    zIndex: token.calc(zIndexPopup).add(1).equal({
-      unit: false
-    }),
+    zIndex: token.calc(zIndexPopup).add(1).equal(),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -146,16 +144,17 @@ export var genPreviewSwitchStyle = function genPreviewSwitchStyle(token) {
     userSelect: 'none',
     '&:hover': {
       background: operationBgHover.toRgbString()
+    },
+    '&-disabled': {
+      '&, &:hover': _defineProperty({
+        color: previewOperationColorDisabled,
+        background: 'transparent',
+        cursor: 'not-allowed'
+      }, "> ".concat(iconCls), {
+        cursor: 'not-allowed'
+      })
     }
-  }, "&-disabled", {
-    '&, &:hover': _defineProperty({
-      color: previewOperationColorDisabled,
-      background: 'transparent',
-      cursor: 'not-allowed'
-    }, "> ".concat(iconCls), {
-      cursor: 'not-allowed'
-    })
-  }), "> ".concat(iconCls), {
+  }, "> ".concat(iconCls), {
     fontSize: token.previewOperationSize
   })), "".concat(previewCls, "-switch-left"), {
     insetInlineStart: token.marginSM
@@ -212,9 +211,7 @@ export var genImagePreviewStyle = function genImagePreviewStyle(token) {
   })), // Preview operations & switch
   _defineProperty(_defineProperty({}, "".concat(componentCls, "-preview-operations-wrapper"), {
     position: 'fixed',
-    zIndex: token.calc(token.zIndexPopup).add(1).equal({
-      unit: false
-    })
+    zIndex: token.calc(token.zIndexPopup).add(1).equal()
   }), '&', [genPreviewOperationsStyle(token), genPreviewSwitchStyle(token)])];
 };
 var genImageStyle = function genImageStyle(token) {
@@ -238,7 +235,7 @@ var genImageStyle = function genImageStyle(token) {
 };
 var genPreviewMotion = function genPreviewMotion(token) {
   var previewCls = token.previewCls;
-  return _defineProperty(_defineProperty({}, "".concat(previewCls, "-root"), initZoomMotion(token, 'zoom')), "&", initFadeMotion(token, true));
+  return _defineProperty(_defineProperty({}, "".concat(previewCls, "-root"), initZoomMotion(token, 'zoom')), '&', initFadeMotion(token, true));
 };
 // ============================== Export ==============================
 export var prepareComponentToken = function prepareComponentToken(token) {

package/lib/Antd5/index.js

@@ -69,4 +69,5 @@ export { default as TreeSelect } from './tree-select';
 export { default as Typography } from './typography';
 export { default as Upload } from './upload';
 export { default as version } from './version';
-export { default as Watermark } from './watermark';
+export { default as Watermark } from './watermark';
+export { default as Splitter } from './splitter';