@chaoswise/ui 3.1.6 → 3.1.8

package/lib/Antd5/form/Form.js

@@ -15,10 +15,9 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { useMemo } from 'react';
 import classNames from 'classnames';
 import FieldForm, { List, useWatch } from 'rc-field-form';
-import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
 import DisabledContext, { DisabledContextProvider } from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
@@ -30,10 +29,14 @@ import useStyle from './style';
 import ValidateMessagesContext from './validateMessagesContext';
 var InternalForm = function InternalForm(props, ref) {
   var contextDisabled = React.useContext(DisabledContext);
-  var _React$useContext = React.useContext(ConfigContext),
-    getPrefixCls = _React$useContext.getPrefixCls,
-    direction = _React$useContext.direction,
-    contextForm = _React$useContext.form;
+  var _useComponentConfig = useComponentConfig('form'),
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    direction = _useComponentConfig.direction,
+    contextRequiredMark = _useComponentConfig.requiredMark,
+    contextColon = _useComponentConfig.colon,
+    contextScrollToFirstError = _useComponentConfig.scrollToFirstError,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style;
   var customizePrefixCls = props.prefixCls,
     className = props.className,
     rootClassName = props.rootClassName,
@@ -63,19 +66,19 @@ var InternalForm = function InternalForm(props, ref) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFormWarning(props);
   }
-  var mergedRequiredMark = useMemo(function () {
+  var mergedRequiredMark = React.useMemo(function () {
     if (requiredMark !== undefined) {
       return requiredMark;
     }
     if (hideRequiredMark) {
       return false;
     }
-    if (contextForm && contextForm.requiredMark !== undefined) {
-      return contextForm.requiredMark;
+    if (contextRequiredMark !== undefined) {
+      return contextRequiredMark;
     }
     return true;
-  }, [hideRequiredMark, requiredMark, contextForm]);
-  var mergedColon = colon !== null && colon !== void 0 ? colon : contextForm === null || contextForm === void 0 ? void 0 : contextForm.colon;
+  }, [hideRequiredMark, requiredMark, contextRequiredMark]);
+  var mergedColon = colon !== null && colon !== void 0 ? colon : contextColon;
   var prefixCls = getPrefixCls('form', customizePrefixCls);
   // Style
   var rootCls = useCSSVarCls(prefixCls);
@@ -84,13 +87,13 @@ var InternalForm = function InternalForm(props, ref) {
     wrapCSSVar = _useStyle2[0],
     hashId = _useStyle2[1],
     cssVarCls = _useStyle2[2];
-  var formClassName = classNames(prefixCls, "".concat(prefixCls, "-").concat(layout), _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-hide-required-mark"), mergedRequiredMark === false), "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-").concat(mergedSize), mergedSize), cssVarCls, rootCls, hashId, contextForm === null || contextForm === void 0 ? void 0 : contextForm.className, className, rootClassName);
+  var formClassName = classNames(prefixCls, "".concat(prefixCls, "-").concat(layout), _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-hide-required-mark"), mergedRequiredMark === false), "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-").concat(mergedSize), mergedSize), cssVarCls, rootCls, hashId, contextClassName, className, rootClassName);
   var _useForm = useForm(form),
     _useForm2 = _slicedToArray(_useForm, 1),
     wrapForm = _useForm2[0];
   var __INTERNAL__ = wrapForm.__INTERNAL__;
   __INTERNAL__.name = name;
-  var formContextValue = useMemo(function () {
+  var formContextValue = React.useMemo(function () {
     return {
       name: name,
       labelAlign: labelAlign,
@@ -121,9 +124,6 @@ var InternalForm = function InternalForm(props, ref) {
         defaultScrollToFirstError = _objectSpread(_objectSpread({}, defaultScrollToFirstError), options);
       }
       wrapForm.scrollToField(fieldName, defaultScrollToFirstError);
-      if (defaultScrollToFirstError.focus) {
-        wrapForm.focusField(fieldName);
-      }
     }
   };
   var onInternalFinishFailed = function onInternalFinishFailed(errorInfo) {
@@ -134,8 +134,8 @@ var InternalForm = function InternalForm(props, ref) {
         scrollToField(scrollToFirstError, fieldName);
         return;
       }
-      if (contextForm && contextForm.scrollToFirstError !== undefined) {
-        scrollToField(contextForm.scrollToFirstError, fieldName);
+      if (contextScrollToFirstError !== undefined) {
+        scrollToField(contextScrollToFirstError, fieldName);
       }
     }
   };
@@ -157,7 +157,7 @@ var InternalForm = function InternalForm(props, ref) {
               onFinishFailed: onInternalFinishFailed,
               form: wrapForm,
               ref: nativeElementRef,
-              style: _objectSpread(_objectSpread({}, contextForm === null || contextForm === void 0 ? void 0 : contextForm.style), style),
+              style: _objectSpread(_objectSpread({}, contextStyle), style),
               className: formClassName
             }))
           })

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

@@ -110,7 +110,7 @@ function InternalFormItem(props) {
   // ========================= MISC =========================
   // Get `noStyle` required info
   var listContext = React.useContext(ListContext);
-  var fieldKeyPathRef = React.useRef();
+  var fieldKeyPathRef = React.useRef(null);
   // ======================== Errors ========================
   // >>>>> Collect sub field errors
   var _useFrameState = useFrameState({}),

package/lib/Antd5/form/FormItemLabel.js

@@ -1,3 +1,4 @@
+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 = ["icon"];
 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; }
@@ -12,27 +13,16 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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 _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); }
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import QuestionCircleOutlined from '@ant-design/icons/QuestionCircleOutlined';
 import classNames from 'classnames';
+import convertToTooltipProps from '../_util/convertToTooltipProps';
 import Col from '../grid/col';
 import { useLocale } from '../locale';
 import defaultLocale from '../locale/en_US';
 import Tooltip from '../tooltip';
 import { FormContext } from './context';
-function toTooltipProps(tooltip) {
-  if (!tooltip) {
-    return null;
-  }
-  if (_typeof(tooltip) === 'object' && ! /*#__PURE__*/React.isValidElement(tooltip)) {
-    return tooltip;
-  }
-  return {
-    title: tooltip
-  };
-}
 var FormItemLabel = function FormItemLabel(_ref) {
   var prefixCls = _ref.prefixCls,
     label = _ref.label,
@@ -68,7 +58,7 @@ var FormItemLabel = function FormItemLabel(_ref) {
     labelChildren = label.replace(/[:|：]\s*$/, '');
   }
   // Tooltip
-  var tooltipProps = toTooltipProps(tooltip);
+  var tooltipProps = convertToTooltipProps(tooltip);
   if (tooltipProps) {
     var _tooltipProps$icon = tooltipProps.icon,
       icon = _tooltipProps$icon === void 0 ? _jsx(QuestionCircleOutlined, {}) : _tooltipProps$icon,
@@ -92,6 +82,7 @@ var FormItemLabel = function FormItemLabel(_ref) {
   // Required Mark
   var isOptionalMark = requiredMark === 'optional';
   var isRenderMark = typeof requiredMark === 'function';
+  var hideRequiredMark = requiredMark === false;
   if (isRenderMark) {
     labelChildren = requiredMark(labelChildren, {
       required: !!required
@@ -106,7 +97,14 @@ var FormItemLabel = function FormItemLabel(_ref) {
       })]
     });
   }
-  var labelClassName = classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-item-required"), required), "".concat(prefixCls, "-item-required-mark-optional"), isOptionalMark || isRenderMark), "".concat(prefixCls, "-item-no-colon"), !computedColon));
+  // https://github.com/ant-design/ant-design/pull/52950#discussion_r1980880316
+  var markType;
+  if (hideRequiredMark) {
+    markType = 'hidden';
+  } else if (isOptionalMark || isRenderMark) {
+    markType = 'optional';
+  }
+  var labelClassName = classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-item-required"), required), "".concat(prefixCls, "-item-required-mark-").concat(markType), markType), "".concat(prefixCls, "-item-no-colon"), !computedColon));
   return _jsx(Col, _objectSpread(_objectSpread({}, mergedLabelCol), {}, {
     className: labelColClassName,
     children: _jsx("label", {

package/lib/Antd5/form/context.js

@@ -6,7 +6,6 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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); }
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { createContext, useContext, useMemo } from 'react';
 import { FormProvider as RcFormProvider } from 'rc-field-form';
 import omit from 'rc-util/lib/omit';
 export var FormContext = /*#__PURE__*/React.createContext({
@@ -30,8 +29,8 @@ export var NoFormStyle = function NoFormStyle(_ref) {
   var children = _ref.children,
     status = _ref.status,
     override = _ref.override;
-  var formItemInputContext = useContext(FormItemInputContext);
-  var newFormItemInputContext = useMemo(function () {
+  var formItemInputContext = React.useContext(FormItemInputContext);
+  var newFormItemInputContext = React.useMemo(function () {
     var newContext = _objectSpread({}, formItemInputContext);
     if (override) {
       delete newContext.isFormItemInput;
@@ -48,4 +47,4 @@ export var NoFormStyle = function NoFormStyle(_ref) {
     children: children
   });
 };
-export var VariantContext = /*#__PURE__*/createContext(undefined);
+export var VariantContext = /*#__PURE__*/React.createContext(undefined);

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

@@ -1,4 +1,7 @@
 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 = ["focus"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 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; }
@@ -51,19 +54,27 @@ export default function useForm(form) {
       },
       scrollToField: function scrollToField(name) {
         var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        var focus = options.focus,
+          restOpt = _objectWithoutProperties(options, _excluded);
         var node = getFieldDOMNode(name, wrapForm);
         if (node) {
           scrollIntoView(node, _objectSpread({
             scrollMode: 'if-needed',
             block: 'nearest'
-          }, options));
+          }, restOpt));
+          // Focus if scroll success
+          if (focus) {
+            wrapForm.focusField(name);
+          }
         }
       },
       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);
+        var itemRef = wrapForm.getFieldInstance(name);
+        if (typeof (itemRef === null || itemRef === void 0 ? void 0 : itemRef.focus) === 'function') {
+          itemRef.focus();
+        } else {
+          var _getFieldDOMNode, _getFieldDOMNode$focu;
+          (_getFieldDOMNode = getFieldDOMNode(name, wrapForm)) === null || _getFieldDOMNode === void 0 || (_getFieldDOMNode$focu = _getFieldDOMNode.focus) === null || _getFieldDOMNode$focu === void 0 || _getFieldDOMNode$focu.call(_getFieldDOMNode);
         }
       },
       getFieldInstance: function getFieldInstance(name) {

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

@@ -1,7 +1,7 @@
-import { useContext } from 'react';
+import * as React from 'react';
 import { FormContext } from '../context';
 export default function useFormInstance() {
-  var _useContext = useContext(FormContext),
-    form = _useContext.form;
+  var _React$useContext = React.useContext(FormContext),
+    form = _React$useContext.form;
   return form;
 }

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

@@ -1,13 +1,13 @@
-import { useContext } from 'react';
+import * as React from 'react';
 import { devUseWarning } from '../../_util/warning';
 import { FormItemInputContext } from '../context';
 var useFormItemStatus = function useFormItemStatus() {
-  var _useContext = useContext(FormItemInputContext),
-    status = _useContext.status,
-    _useContext$errors = _useContext.errors,
-    errors = _useContext$errors === void 0 ? [] : _useContext$errors,
-    _useContext$warnings = _useContext.warnings,
-    warnings = _useContext$warnings === void 0 ? [] : _useContext$warnings;
+  var _React$useContext = React.useContext(FormItemInputContext),
+    status = _React$useContext.status,
+    _React$useContext$err = _React$useContext.errors,
+    errors = _React$useContext$err === void 0 ? [] : _React$useContext$err,
+    _React$useContext$war = _React$useContext.warnings,
+    warnings = _React$useContext$war === void 0 ? [] : _React$useContext$war;
   if (process.env.NODE_ENV !== 'production') {
     var warning = devUseWarning('Form.Item');
     warning(status !== undefined, 'usage', 'Form.Item.useStatus should be used under Form.Item component. For more information: https://u.ant.design/form-item-usestatus');

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

@@ -1,10 +1,10 @@
-import { useEffect } from 'react';
+import * as React from 'react';
 import { devUseWarning } from '../../_util/warning';
 var names = {};
 export default function useFormWarning(_ref) {
   var name = _ref.name;
   var warning = devUseWarning('Form');
-  useEffect(function () {
+  React.useEffect(function () {
     if (name) {
       names[name] = (names[name] || 0) + 1;
       warning(names[name] <= 1, 'usage', 'There exist multiple Form with same `name`.');

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

@@ -5,16 +5,15 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 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; }
 import * as React from 'react';
-import { useRef } from 'react';
 import raf from 'rc-util/lib/raf';
 export default function useFrameState(defaultValue) {
   var _React$useState = React.useState(defaultValue),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     value = _React$useState2[0],
     setValue = _React$useState2[1];
-  var frameRef = useRef(null);
-  var batchRef = useRef([]);
-  var destroyRef = useRef(false);
+  var frameRef = React.useRef(null);
+  var batchRef = React.useRef([]);
+  var destroyRef = React.useRef(false);
   React.useEffect(function () {
     destroyRef.current = false;
     return function () {

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

@@ -1,13 +1,14 @@
 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); }
 import * as React from 'react';
-import { composeRef } from 'rc-util/lib/ref';
+import { composeRef, getNodeRef } from 'rc-util/lib/ref';
 import { FormContext } from '../context';
 export default function useItemRef() {
   var _React$useContext = React.useContext(FormContext),
     itemRef = _React$useContext.itemRef;
   var cacheRef = React.useRef({});
   function getRef(name, children) {
-    var childrenRef = children && _typeof(children) === 'object' && children.ref;
+    // Outer caller already check the `supportRef`
+    var childrenRef = children && _typeof(children) === 'object' && getNodeRef(children);
     var nameStr = name.join('_');
     if (cacheRef.current.name !== nameStr || cacheRef.current.originRef !== childrenRef) {
       cacheRef.current.name = nameStr;

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

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import * as React from 'react';
 import { VariantContext } from '../context';
 import { ConfigContext, Variants } from '../../config-provider';
 /**
@@ -6,10 +6,10 @@ import { ConfigContext, Variants } from '../../config-provider';
  */
 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 _React$useContext = React.useContext(ConfigContext),
+    configVariant = _React$useContext.variant,
+    componentConfig = _React$useContext[component];
+  var ctxVariant = React.useContext(VariantContext);
   var configComponentVariant = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.variant;
   var mergedVariant;
   if (typeof variant !== 'undefined') {

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

@@ -70,7 +70,6 @@ var genFormStyle = function genFormStyle(token) {
 var genFormItemStyle = function genFormItemStyle(token) {
   var formItemCls = token.formItemCls,
     iconCls = token.iconCls,
-    componentCls = token.componentCls,
     rootPrefixCls = token.rootPrefixCls,
     antCls = token.antCls,
     labelRequiredMarkColor = token.labelRequiredMarkColor,
@@ -105,7 +104,11 @@ var genFormItemStyle = function genFormItemStyle(token) {
     '&-wrap': {
       overflow: 'unset',
       lineHeight: token.lineHeight,
-      whiteSpace: 'unset'
+      whiteSpace: 'unset',
+      '> label': {
+        verticalAlign: 'middle',
+        textWrap: 'balance'
+      }
     },
     '> label': _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
       position: 'relative',
@@ -118,21 +121,25 @@ var genFormItemStyle = function genFormItemStyle(token) {
     }, "> ".concat(iconCls), {
       fontSize: token.fontSize,
       verticalAlign: 'top'
-    }), "&".concat(formItemCls, "-required:not(").concat(formItemCls, "-required-mark-optional)::before"), _defineProperty({
-      display: 'inline-block',
-      marginInlineEnd: token.marginXXS,
-      color: labelRequiredMarkColor,
-      fontSize: token.fontSize,
-      fontFamily: 'SimSun, sans-serif',
-      lineHeight: 1,
-      content: '"*"'
-    }, "".concat(componentCls, "-hide-required-mark &"), {
-      display: 'none'
+    }), "&".concat(formItemCls, "-required"), _defineProperty({
+      '&::before': {
+        display: 'inline-block',
+        marginInlineEnd: token.marginXXS,
+        color: labelRequiredMarkColor,
+        fontSize: token.fontSize,
+        fontFamily: 'SimSun, sans-serif',
+        lineHeight: 1,
+        content: '"*"'
+      }
+    }, "&".concat(formItemCls, "-required-mark-hidden, &").concat(formItemCls, "-required-mark-optional"), {
+      '&::before': {
+        display: 'none'
+      }
     })), "".concat(formItemCls, "-optional"), _defineProperty({
       display: 'inline-block',
       marginInlineStart: token.marginXXS,
       color: token.colorTextDescription
-    }, "".concat(componentCls, "-hide-required-mark &"), {
+    }, "&".concat(formItemCls, "-required-mark-hidden"), {
       display: 'none'
     })), "".concat(formItemCls, "-tooltip"), {
       color: token.colorTextDescription,
@@ -319,8 +326,8 @@ export var prepareToken = function prepareToken(token, rootPrefixCls) {
   });
   return formToken;
 };
-export default genStyleHooks('Form', function (token, _ref12) {
-  var rootPrefixCls = _ref12.rootPrefixCls;
+export default genStyleHooks('Form', function (token, _ref10) {
+  var rootPrefixCls = _ref10.rootPrefixCls;
   var formToken = prepareToken(token, rootPrefixCls);
   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, {

package/lib/Antd5/grid/hooks/useBreakpoint.js

@@ -4,7 +4,8 @@ import useForceUpdate from '../../_util/hooks/useForceUpdate';
 import useResponsiveObserver from '../../_util/responsiveObserver';
 function useBreakpoint() {
   var refreshOnChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-  var screensRef = useRef({});
+  var defaultScreens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var screensRef = useRef(defaultScreens);
   var forceUpdate = useForceUpdate();
   var responsiveObserver = useResponsiveObserver();
   useLayoutEffect(function () {

package/lib/Antd5/grid/hooks/useGutter.js

@@ -0,0 +1,29 @@
+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); }
+import { responsiveArray } from '../../_util/responsiveObserver';
+export default function useGutter(gutter, screens) {
+  var results = [undefined, undefined];
+  var normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined];
+  // By default use as `xs`
+  var mergedScreens = screens || {
+    xs: true,
+    sm: true,
+    md: true,
+    lg: true,
+    xl: true,
+    xxl: true
+  };
+  normalizedGutter.forEach(function (g, index) {
+    if (_typeof(g) === 'object' && g !== null) {
+      for (var i = 0; i < responsiveArray.length; i++) {
+        var breakpoint = responsiveArray[i];
+        if (mergedScreens[breakpoint] && g[breakpoint] !== undefined) {
+          results[index] = g[breakpoint];
+          break;
+        }
+      }
+    } else {
+      results[index] = g;
+    }
+  });
+  return results;
+}

package/lib/Antd5/grid/row.js

@@ -16,8 +16,10 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import classNames from 'classnames';
-import useResponsiveObserver, { responsiveArray } from '../_util/responsiveObserver';
+import { responsiveArray } from '../_util/responsiveObserver';
 import { ConfigContext } from '../config-provider';
+import useBreakpoint from './hooks/useBreakpoint';
+import useGutter from './hooks/useGutter';
 import RowContext from './RowContext';
 import { useRowStyle } from './style';
 var _RowAligns = ['top', 'middle', 'bottom', 'stretch'];
@@ -37,7 +39,7 @@ function useMergedPropByScreen(oriProp, screen) {
     for (var i = 0; i < responsiveArray.length; i++) {
       var breakpoint = responsiveArray[i];
       // if do not match, do nothing
-      if (!screen[breakpoint]) {
+      if (!screen || !screen[breakpoint]) {
         continue;
       }
       var curVal = oriProp[breakpoint];
@@ -66,73 +68,16 @@ var Row = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     direction = _React$useContext.direction;
-  var _React$useState3 = React.useState({
-      xs: true,
-      sm: true,
-      md: true,
-      lg: true,
-      xl: true,
-      xxl: true
-    }),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    screens = _React$useState4[0],
-    setScreens = _React$useState4[1];
-  // to save screens info when responsiveObserve callback had been call
-  var _React$useState5 = React.useState({
-      xs: false,
-      sm: false,
-      md: false,
-      lg: false,
-      xl: false,
-      xxl: false
-    }),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    curScreens = _React$useState6[0],
-    setCurScreens = _React$useState6[1];
-  // ================================== calc responsive data ==================================
-  var mergedAlign = useMergedPropByScreen(align, curScreens);
-  var mergedJustify = useMergedPropByScreen(justify, curScreens);
-  var gutterRef = React.useRef(gutter);
-  var responsiveObserver = useResponsiveObserver();
-  // ================================== Effect ==================================
-  React.useEffect(function () {
-    var token = responsiveObserver.subscribe(function (screen) {
-      setCurScreens(screen);
-      var currentGutter = gutterRef.current || 0;
-      if (!Array.isArray(currentGutter) && _typeof(currentGutter) === 'object' || Array.isArray(currentGutter) && (_typeof(currentGutter[0]) === 'object' || _typeof(currentGutter[1]) === 'object')) {
-        setScreens(screen);
-      }
-    });
-    return function () {
-      return responsiveObserver.unsubscribe(token);
-    };
-  }, []);
-  // ================================== Render ==================================
-  var getGutter = function getGutter() {
-    var results = [undefined, undefined];
-    var normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined];
-    normalizedGutter.forEach(function (g, index) {
-      if (_typeof(g) === 'object') {
-        for (var i = 0; i < responsiveArray.length; i++) {
-          var breakpoint = responsiveArray[i];
-          if (screens[breakpoint] && g[breakpoint] !== undefined) {
-            results[index] = g[breakpoint];
-            break;
-          }
-        }
-      } else {
-        results[index] = g;
-      }
-    });
-    return results;
-  };
+  var screens = useBreakpoint(true, null);
+  var mergedAlign = useMergedPropByScreen(align, screens);
+  var mergedJustify = useMergedPropByScreen(justify, screens);
   var prefixCls = getPrefixCls('row', customizePrefixCls);
   var _useRowStyle = useRowStyle(prefixCls),
     _useRowStyle2 = _slicedToArray(_useRowStyle, 3),
     wrapCSSVar = _useRowStyle2[0],
     hashId = _useRowStyle2[1],
     cssVarCls = _useRowStyle2[2];
-  var gutters = getGutter();
+  var gutters = useGutter(gutter, screens);
   var classes = classNames(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-no-wrap"), wrap === false), "".concat(prefixCls, "-").concat(mergedJustify), mergedJustify), "".concat(prefixCls, "-").concat(mergedAlign), mergedAlign), "".concat(prefixCls, "-rtl"), direction === 'rtl'), className, hashId, cssVarCls);
   // Add gutter related style
   var rowStyle = {};

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

@@ -134,19 +134,25 @@ export var prepareColComponentToken = function prepareColComponentToken() {
 };
 // ============================== Export ==============================
 export var useRowStyle = genStyleHooks('Grid', genGridRowStyle, prepareRowComponentToken);
+export var getMediaSize = function getMediaSize(token) {
+  var mediaSizesMap = {
+    xs: token.screenXSMin,
+    sm: token.screenSMMin,
+    md: token.screenMDMin,
+    lg: token.screenLGMin,
+    xl: token.screenXLMin,
+    xxl: token.screenXXLMin
+  };
+  return mediaSizesMap;
+};
 export var useColStyle = genStyleHooks('Grid', function (token) {
   var gridToken = mergeToken(token, {
     gridColumns: 24 // Row is divided into 24 parts in Grid
   });
-  var gridMediaSizesMap = {
-    '-sm': gridToken.screenSMMin,
-    '-md': gridToken.screenMDMin,
-    '-lg': gridToken.screenLGMin,
-    '-xl': gridToken.screenXLMin,
-    '-xxl': gridToken.screenXXLMin
-  };
+  var gridMediaSizesMap = getMediaSize(gridToken);
+  delete gridMediaSizesMap.xs;
   return [genGridColStyle(gridToken), genGridStyle(gridToken, ''), genGridStyle(gridToken, '-xs'), Object.keys(gridMediaSizesMap).map(function (key) {
-    return genGridMediaStyle(gridToken, gridMediaSizesMap[key], key);
+    return genGridMediaStyle(gridToken, gridMediaSizesMap[key], "-".concat(key));
   }).reduce(function (pre, cur) {
     return _objectSpread(_objectSpread({}, pre), cur);
   }, {})];

package/lib/Antd5/image/PreviewGroup.js

@@ -48,7 +48,8 @@ var InternalPreviewGroup = function InternalPreviewGroup(_ref) {
     preview = _ref.preview,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var _React$useContext = React.useContext(ConfigContext),
-    getPrefixCls = _React$useContext.getPrefixCls;
+    getPrefixCls = _React$useContext.getPrefixCls,
+    direction = _React$useContext.direction;
   var prefixCls = getPrefixCls('image', customizePrefixCls);
   var previewPrefixCls = "".concat(prefixCls, "-preview");
   var rootPrefixCls = getPrefixCls();
@@ -61,6 +62,12 @@ var InternalPreviewGroup = function InternalPreviewGroup(_ref) {
   var _useZIndex = useZIndex('ImagePreview', _typeof(preview) === 'object' ? preview.zIndex : undefined),
     _useZIndex2 = _slicedToArray(_useZIndex, 1),
     zIndex = _useZIndex2[0];
+  var memoizedIcons = React.useMemo(function () {
+    return _objectSpread(_objectSpread({}, icons), {}, {
+      left: direction === 'rtl' ? _jsx(RightOutlined, {}) : _jsx(LeftOutlined, {}),
+      right: direction === 'rtl' ? _jsx(LeftOutlined, {}) : _jsx(RightOutlined, {})
+    });
+  }, [direction]);
   var mergedPreview = React.useMemo(function () {
     var _preview$rootClassNam;
     if (preview === false) {
@@ -78,7 +85,7 @@ var InternalPreviewGroup = function InternalPreviewGroup(_ref) {
   return wrapCSSVar(_jsx(RcImage.PreviewGroup, _objectSpread({
     preview: mergedPreview,
     previewPrefixCls: previewPrefixCls,
-    icons: icons
+    icons: memoizedIcons
   }, otherProps)));
 };
 export default InternalPreviewGroup;