@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/lib/form/ErrorList.js

@@ -15,26 +15,28 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _rcMotion = _interopRequireWildcard(require("rc-motion"));
 
 var React = _interopRequireWildcard(require("react"));
 
-var _configProvider = require("../config-provider");
-
 var _motion = _interopRequireDefault(require("../_util/motion"));
 
 var _context = require("./context");
 
 var _useDebounce = _interopRequireDefault(require("./hooks/useDebounce"));
 
+var _style = _interopRequireDefault(require("./style"));
+
 var EMPTY_LIST = [];
 
 function toErrorEntity(error, errorStatus, prefix) {
   var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   return {
-    key: typeof error === 'string' ? error : "".concat(prefix, "-").concat(index),
+    key: typeof error === 'string' ? error : prefix + "-" + index,
     error: error,
     errorStatus: errorStatus
   };
@@ -54,11 +56,15 @@ function ErrorList(_ref) {
   var _React$useContext = React.useContext(_context.FormItemPrefixContext),
       prefixCls = _React$useContext.prefixCls;
 
-  var _React$useContext2 = React.useContext(_configProvider.ConfigContext),
-      getPrefixCls = _React$useContext2.getPrefixCls;
+  var baseClassName = prefixCls + "-item-explain";
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      hashId = _useStyle2[1];
 
-  var baseClassName = "".concat(prefixCls, "-item-explain");
-  var rootPrefixCls = getPrefixCls(); // We have to debounce here again since somewhere use ErrorList directly still need no shaking
+  var collapseMotion = (0, React.useMemo)(function () {
+    return (0, _motion["default"])(prefixCls);
+  }, [prefixCls]); // We have to debounce here again since somewhere use ErrorList directly still need no shaking
   // ref: https://github.com/ant-design/ant-design/issues/36336
 
   var debounceErrors = (0, _useDebounce["default"])(errors);
@@ -77,25 +83,25 @@ function ErrorList(_ref) {
   var helpProps = {};
 
   if (fieldId) {
-    helpProps.id = "".concat(fieldId, "_help");
+    helpProps.id = fieldId + "_help";
   }
 
   return /*#__PURE__*/React.createElement(_rcMotion["default"], {
-    motionDeadline: _motion["default"].motionDeadline,
-    motionName: "".concat(rootPrefixCls, "-show-help"),
+    motionDeadline: collapseMotion.motionDeadline,
+    motionName: prefixCls + "-show-help",
     visible: !!fullKeyList.length,
     onVisibleChanged: onVisibleChanged
   }, function (holderProps) {
     var holderClassName = holderProps.className,
         holderStyle = holderProps.style;
     return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, helpProps, {
-      className: (0, _classnames["default"])(baseClassName, holderClassName, rootClassName),
+      className: (0, _classnames["default"])(baseClassName, holderClassName, rootClassName, hashId),
       style: holderStyle,
       role: "alert"
     }), /*#__PURE__*/React.createElement(_rcMotion.CSSMotionList, (0, _extends2["default"])({
       keys: fullKeyList
-    }, _motion["default"], {
-      motionName: "".concat(rootPrefixCls, "-show-help-item"),
+    }, (0, _motion["default"])(prefixCls), {
+      motionName: prefixCls + "-show-help-item",
       component: false
     }), function (itemProps) {
       var key = itemProps.key,
@@ -105,7 +111,7 @@ function ErrorList(_ref) {
           itemStyle = itemProps.style;
       return /*#__PURE__*/React.createElement("div", {
         key: key,
-        className: (0, _classnames["default"])(itemClassName, (0, _defineProperty2["default"])({}, "".concat(baseClassName, "-").concat(errorStatus), errorStatus)),
+        className: (0, _classnames["default"])(itemClassName, (0, _defineProperty2["default"])({}, baseClassName + "-" + errorStatus, errorStatus)),
         style: itemStyle
       }, error);
     }));

package/lib/form/Form.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import type { Options } from 'scroll-into-view-if-needed';
 import type { SizeType } from '../config-provider/SizeContext';
 import type { ColProps } from '../grid/col';
-import useForm, { FormInstance } from './hooks/useForm';
+import useForm, { type FormInstance } from './hooks/useForm';
 import type { FormLabelAlign } from './interface';
 export type RequiredMark = boolean | 'optional';
 export type FormLayout = 'horizontal' | 'inline' | 'vertical';
@@ -30,5 +30,5 @@ declare const Form: <Values = any>(props: FormProps<Values> & {
 } & {
     ref?: React.Ref<FormInstance<Values>> | undefined;
 }) => React.ReactElement;
-export { useForm, List, FormInstance, useWatch };
+export { useForm, List, type FormInstance, useWatch };
 export default Form;

package/lib/form/Form.js

@@ -31,10 +31,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _rcFieldForm = _interopRequireWildcard(require("rc-field-form"));
@@ -51,6 +51,8 @@ var _context = require("./context");
 
 var _useForm3 = _interopRequireDefault(require("./hooks/useForm"));
 
+var _style = _interopRequireDefault(require("./style"));
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -113,8 +115,14 @@ var InternalForm = function InternalForm(props, ref) {
     return true;
   }, [hideRequiredMark, requiredMark, contextForm]);
   var mergedColon = colon !== null && colon !== void 0 ? colon : contextForm === null || contextForm === void 0 ? void 0 : contextForm.colon;
-  var prefixCls = getPrefixCls('form', customizePrefixCls);
-  var formClassName = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(layout), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-hide-required-mark"), mergedRequiredMark === false), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(size), size), _classNames), className);
+  var prefixCls = getPrefixCls('form', customizePrefixCls); // Style
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var formClassName = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, prefixCls + "-" + layout, true), (0, _defineProperty2["default"])(_classNames, prefixCls + "-hide-required-mark", mergedRequiredMark === false), (0, _defineProperty2["default"])(_classNames, prefixCls + "-rtl", direction === 'rtl'), (0, _defineProperty2["default"])(_classNames, prefixCls + "-" + size, size), _classNames), hashId, className);
 
   var _useForm = (0, _useForm3["default"])(form),
       _useForm2 = (0, _slicedToArray2["default"])(_useForm, 1),
@@ -155,7 +163,7 @@ var InternalForm = function InternalForm(props, ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(_DisabledContext.DisabledContextProvider, {
+  return wrapSSR( /*#__PURE__*/React.createElement(_DisabledContext.DisabledContextProvider, {
     disabled: disabled
   }, /*#__PURE__*/React.createElement(_SizeContext.SizeContextProvider, {
     size: size
@@ -168,7 +176,7 @@ var InternalForm = function InternalForm(props, ref) {
     onFinishFailed: onInternalFinishFailed,
     form: wrapForm,
     className: formClassName
-  })))));
+  }))))));
 };
 
 var Form = /*#__PURE__*/React.forwardRef(InternalForm);

package/lib/form/FormItem/ItemHolder.js

@@ -80,7 +80,7 @@ function ItemHolder(props) {
       onSubItemMetaChange = props.onSubItemMetaChange,
       restProps = __rest(props, ["prefixCls", "className", "style", "help", "errors", "warnings", "validateStatus", "meta", "hasFeedback", "hidden", "children", "fieldId", "isRequired", "onSubItemMetaChange"]);
 
-  var itemPrefixCls = "".concat(prefixCls, "-item");
+  var itemPrefixCls = prefixCls + "-item";
 
   var _React$useContext = React.useContext(_context.FormContext),
       requiredMark = _React$useContext.requiredMark; // ======================== Margin ========================
@@ -131,7 +131,7 @@ function ItemHolder(props) {
     if (hasFeedback) {
       var IconNode = mergedValidateStatus && iconMap[mergedValidateStatus];
       feedbackIcon = IconNode ? /*#__PURE__*/React.createElement("span", {
-        className: (0, _classnames["default"])("".concat(itemPrefixCls, "-feedback-icon"), "".concat(itemPrefixCls, "-feedback-icon-").concat(mergedValidateStatus))
+        className: (0, _classnames["default"])(itemPrefixCls + "-feedback-icon", itemPrefixCls + "-feedback-icon-" + mergedValidateStatus)
       }, /*#__PURE__*/React.createElement(IconNode, null)) : null;
     }
 
@@ -143,13 +143,13 @@ function ItemHolder(props) {
     };
   }, [mergedValidateStatus, hasFeedback]); // ======================== Render ========================
 
-  var itemClassName = (_itemClassName = {}, (0, _defineProperty2["default"])(_itemClassName, itemPrefixCls, true), (0, _defineProperty2["default"])(_itemClassName, "".concat(itemPrefixCls, "-with-help"), hasHelp || debounceErrors.length || debounceWarnings.length), (0, _defineProperty2["default"])(_itemClassName, "".concat(className), !!className), (0, _defineProperty2["default"])(_itemClassName, "".concat(itemPrefixCls, "-has-feedback"), mergedValidateStatus && hasFeedback), (0, _defineProperty2["default"])(_itemClassName, "".concat(itemPrefixCls, "-has-success"), mergedValidateStatus === 'success'), (0, _defineProperty2["default"])(_itemClassName, "".concat(itemPrefixCls, "-has-warning"), mergedValidateStatus === 'warning'), (0, _defineProperty2["default"])(_itemClassName, "".concat(itemPrefixCls, "-has-error"), mergedValidateStatus === 'error'), (0, _defineProperty2["default"])(_itemClassName, "".concat(itemPrefixCls, "-is-validating"), mergedValidateStatus === 'validating'), (0, _defineProperty2["default"])(_itemClassName, "".concat(itemPrefixCls, "-hidden"), hidden), _itemClassName);
+  var itemClassName = (_itemClassName = {}, (0, _defineProperty2["default"])(_itemClassName, itemPrefixCls, true), (0, _defineProperty2["default"])(_itemClassName, itemPrefixCls + "-with-help", hasHelp || debounceErrors.length || debounceWarnings.length), (0, _defineProperty2["default"])(_itemClassName, "" + className, !!className), (0, _defineProperty2["default"])(_itemClassName, itemPrefixCls + "-has-feedback", mergedValidateStatus && hasFeedback), (0, _defineProperty2["default"])(_itemClassName, itemPrefixCls + "-has-success", mergedValidateStatus === 'success'), (0, _defineProperty2["default"])(_itemClassName, itemPrefixCls + "-has-warning", mergedValidateStatus === 'warning'), (0, _defineProperty2["default"])(_itemClassName, itemPrefixCls + "-has-error", mergedValidateStatus === 'error'), (0, _defineProperty2["default"])(_itemClassName, itemPrefixCls + "-is-validating", mergedValidateStatus === 'validating'), (0, _defineProperty2["default"])(_itemClassName, itemPrefixCls + "-hidden", hidden), _itemClassName);
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames["default"])(itemClassName),
     style: style,
     ref: itemRef
   }, /*#__PURE__*/React.createElement(_grid.Row, (0, _extends2["default"])({
-    className: "".concat(itemPrefixCls, "-row")
+    className: itemPrefixCls + "-row"
   }, (0, _omit["default"])(restProps, ['_internalItemRender', 'colon', 'dependencies', 'extra', 'fieldKey', 'getValueFromEvent', 'getValueProps', 'htmlFor', 'id', 'initialValue', 'isListField', 'label', 'labelAlign', 'labelCol', 'labelWrap', 'messageVariables', 'name', 'normalize', 'noStyle', 'preserve', 'required', 'requiredMark', 'rules', 'shouldUpdate', 'trigger', 'tooltip', 'validateFirst', 'validateTrigger', 'valuePropName', 'wrapperCol'])), /*#__PURE__*/React.createElement(_FormItemLabel["default"], (0, _extends2["default"])({
     htmlFor: fieldId,
     required: isRequired,
@@ -169,7 +169,7 @@ function ItemHolder(props) {
   }, /*#__PURE__*/React.createElement(_context.FormItemInputContext.Provider, {
     value: formItemStatusContext
   }, children)))), !!marginBottom && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(itemPrefixCls, "-margin-offset"),
+    className: itemPrefixCls + "-margin-offset",
     style: {
       marginBottom: -marginBottom
     }

package/lib/form/FormItem/index.d.ts

@@ -28,8 +28,8 @@ export interface FormItemProps<Values = any> extends FormItemLabelProps, FormIte
 }
 declare function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.ReactElement;
 type InternalFormItemType = typeof InternalFormItem;
-interface FormItemInterface extends InternalFormItemType {
+type CompoundedComponent = InternalFormItemType & {
     useStatus: typeof useFormItemStatus;
-}
-declare const FormItem: FormItemInterface;
+};
+declare const FormItem: CompoundedComponent;
 export default FormItem;

package/lib/form/FormItem/index.js

@@ -17,6 +17,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _rcFieldForm = require("rc-field-form");
 
 var _useState3 = _interopRequireDefault(require("rc-util/lib/hooks/useState"));
@@ -45,6 +47,8 @@ var _util = require("../util");
 
 var _ItemHolder = _interopRequireDefault(require("./ItemHolder"));
 
+var _style = _interopRequireDefault(require("../style"));
+
 var NAME_SPLIT = '__SPLIT__';
 var ValidateStatuses = (0, _type.tuple)('success', 'warning', 'error', 'validating', '');
 var MemoInput = /*#__PURE__*/React.memo(function (_ref) {
@@ -77,6 +81,7 @@ function genEmptyMeta() {
 function InternalFormItem(props) {
   var name = props.name,
       noStyle = props.noStyle,
+      className = props.className,
       dependencies = props.dependencies,
       customizePrefixCls = props.prefixCls,
       shouldUpdate = props.shouldUpdate,
@@ -104,9 +109,15 @@ function InternalFormItem(props) {
 
   var mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
   var hasName = hasValidName(name);
-  var prefixCls = getPrefixCls('form', customizePrefixCls); // ========================= MISC =========================
+  var prefixCls = getPrefixCls('form', customizePrefixCls); // Style
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1]; // ========================= MISC =========================
   // Get `noStyle` required info
 
+
   var listContext = React.useContext(_rcFieldForm.ListContext);
   var fieldKeyPathRef = React.useRef(); // ======================== Errors ========================
   // >>>>> Collect sub field errors
@@ -199,6 +210,7 @@ function InternalFormItem(props) {
     return /*#__PURE__*/React.createElement(_ItemHolder["default"], (0, _extends2["default"])({
       key: "row"
     }, props, {
+      className: (0, _classnames["default"])(className, hashId),
       prefixCls: prefixCls,
       fieldId: fieldId,
       isRequired: isRequired,
@@ -210,7 +222,7 @@ function InternalFormItem(props) {
   }
 
   if (!hasName && !isRenderProps && !dependencies) {
-    return renderLayout(children);
+    return wrapSSR(renderLayout(children));
   }
 
   var variables = {};
@@ -226,7 +238,7 @@ function InternalFormItem(props) {
   } // >>>>> With Field
 
 
-  return /*#__PURE__*/React.createElement(_rcFieldForm.Field, (0, _extends2["default"])({}, props, {
+  return wrapSSR( /*#__PURE__*/React.createElement(_rcFieldForm.Field, (0, _extends2["default"])({}, props, {
     messageVariables: variables,
     trigger: trigger,
     validateTrigger: mergedValidateTrigger,
@@ -256,7 +268,7 @@ function InternalFormItem(props) {
       childNode = children;
     } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
       process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!!(shouldUpdate || dependencies), 'Form.Item', 'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.') : void 0;
-      process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!hasName, 'Form.Item', "A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.") : void 0;
+      process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!hasName, 'Form.Item', 'A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.') : void 0;
     } else if (dependencies && !isRenderProps && !hasName) {
       process.env.NODE_ENV !== "production" ? (0, _warning["default"])(false, 'Form.Item', 'Must set `name` or use a render function when `dependencies` is set.') : void 0;
     } else if ((0, _reactNode.isValidElement)(children)) {
@@ -271,11 +283,11 @@ function InternalFormItem(props) {
         var describedbyArr = [];
 
         if (props.help || mergedErrors.length > 0) {
-          describedbyArr.push("".concat(fieldId, "_help"));
+          describedbyArr.push(fieldId + "_help");
         }
 
         if (props.extra) {
-          describedbyArr.push("".concat(fieldId, "_extra"));
+          describedbyArr.push(fieldId + "_extra");
         }
 
         childProps['aria-describedby'] = describedbyArr.join(' ');
@@ -324,7 +336,7 @@ function InternalFormItem(props) {
     }
 
     return renderLayout(childNode, fieldId, isRequired);
-  });
+  }));
 }
 
 var FormItem = InternalFormItem;

package/lib/form/FormItemInput.js

@@ -34,10 +34,10 @@ var FormItemInput = function FormItemInput(props) {
       fieldId = props.fieldId,
       marginBottom = props.marginBottom,
       onErrorVisibleChanged = props.onErrorVisibleChanged;
-  var baseClassName = "".concat(prefixCls, "-item");
+  var baseClassName = prefixCls + "-item";
   var formContext = React.useContext(_context.FormContext);
   var mergedWrapperCol = wrapperCol || formContext.wrapperCol || {};
-  var className = (0, _classnames["default"])("".concat(baseClassName, "-control"), mergedWrapperCol.className); // Pass to sub FormItem should not with col info
+  var className = (0, _classnames["default"])(baseClassName + "-control", mergedWrapperCol.className); // Pass to sub FormItem should not with col info
 
   var subFormContext = React.useMemo(function () {
     return (0, _extends2["default"])({}, formContext);
@@ -45,9 +45,9 @@ var FormItemInput = function FormItemInput(props) {
   delete subFormContext.labelCol;
   delete subFormContext.wrapperCol;
   var inputDom = /*#__PURE__*/React.createElement("div", {
-    className: "".concat(baseClassName, "-control-input")
+    className: baseClassName + "-control-input"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(baseClassName, "-control-input-content")
+    className: baseClassName + "-control-input-content"
   }, children));
   var formItemContext = React.useMemo(function () {
     return {
@@ -68,7 +68,7 @@ var FormItemInput = function FormItemInput(props) {
     warnings: warnings,
     help: help,
     helpStatus: status,
-    className: "".concat(baseClassName, "-explain-connected"),
+    className: baseClassName + "-explain-connected",
     onVisibleChanged: onErrorVisibleChanged
   })), !!marginBottom && /*#__PURE__*/React.createElement("div", {
     style: {
@@ -79,13 +79,13 @@ var FormItemInput = function FormItemInput(props) {
   var extraProps = {};
 
   if (fieldId) {
-    extraProps.id = "".concat(fieldId, "_extra");
+    extraProps.id = fieldId + "_extra";
   } // If extra = 0, && will goes wrong
   // 0&&error -> 0
 
 
   var extraDom = extra ? /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, extraProps, {
-    className: "".concat(baseClassName, "-extra")
+    className: baseClassName + "-extra"
   }), extra) : null;
   var dom = formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? formItemRender.render(props, {
     input: inputDom,

package/lib/form/FormItemLabel.js

@@ -27,7 +27,7 @@ var _col = _interopRequireDefault(require("../grid/col"));
 
 var _LocaleReceiver = require("../locale-provider/LocaleReceiver");
 
-var _default2 = _interopRequireDefault(require("../locale/default"));
+var _en_US = _interopRequireDefault(require("../locale/en_US"));
 
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 
@@ -91,8 +91,8 @@ var FormItemLabel = function FormItemLabel(_ref) {
 
     var mergedLabelCol = labelCol || contextLabelCol || {};
     var mergedLabelAlign = labelAlign || contextLabelAlign;
-    var labelClsBasic = "".concat(prefixCls, "-item-label");
-    var labelColClassName = (0, _classnames["default"])(labelClsBasic, mergedLabelAlign === 'left' && "".concat(labelClsBasic, "-left"), mergedLabelCol.className, (0, _defineProperty2["default"])({}, "".concat(labelClsBasic, "-wrap"), !!labelWrap));
+    var labelClsBasic = prefixCls + "-item-label";
+    var labelColClassName = (0, _classnames["default"])(labelClsBasic, mergedLabelAlign === 'left' && labelClsBasic + "-left", mergedLabelCol.className, (0, _defineProperty2["default"])({}, labelClsBasic + "-wrap", !!labelWrap));
     var labelChildren = label; // Keep label is original where there should have no colon
 
     var computedColon = colon === true || contextColon !== false && colon !== false;
@@ -111,7 +111,7 @@ var FormItemLabel = function FormItemLabel(_ref) {
           restTooltipProps = __rest(tooltipProps, ["icon"]);
 
       var tooltipNode = /*#__PURE__*/React.createElement(_tooltip["default"], (0, _extends2["default"])({}, restTooltipProps), /*#__PURE__*/React.cloneElement(icon, {
-        className: "".concat(prefixCls, "-item-tooltip"),
+        className: prefixCls + "-item-tooltip",
         title: ''
       }));
       labelChildren = /*#__PURE__*/React.createElement(React.Fragment, null, labelChildren, tooltipNode);
@@ -120,12 +120,12 @@ var FormItemLabel = function FormItemLabel(_ref) {
 
     if (requiredMark === 'optional' && !required) {
       labelChildren = /*#__PURE__*/React.createElement(React.Fragment, null, labelChildren, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-item-optional"),
+        className: prefixCls + "-item-optional",
         title: ""
-      }, (formLocale === null || formLocale === void 0 ? void 0 : formLocale.optional) || ((_a = _default2["default"].Form) === null || _a === void 0 ? void 0 : _a.optional)));
+      }, (formLocale === null || formLocale === void 0 ? void 0 : formLocale.optional) || ((_a = _en_US["default"].Form) === null || _a === void 0 ? void 0 : _a.optional)));
     }
 
-    var labelClassName = (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-item-required"), required), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-item-required-mark-optional"), requiredMark === 'optional'), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-item-no-colon"), !computedColon), _classNames2));
+    var labelClassName = (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, prefixCls + "-item-required", required), (0, _defineProperty2["default"])(_classNames2, prefixCls + "-item-required-mark-optional", requiredMark === 'optional'), (0, _defineProperty2["default"])(_classNames2, prefixCls + "-item-no-colon", !computedColon), _classNames2));
     return /*#__PURE__*/React.createElement(_col["default"], (0, _extends2["default"])({}, mergedLabelCol, {
       className: labelColClassName
     }), /*#__PURE__*/React.createElement("label", {

package/lib/form/hooks/useFormItemStatus.js

@@ -17,11 +17,13 @@ var useFormItemStatus = function useFormItemStatus() {
   var _useContext = (0, _react.useContext)(_context.FormItemInputContext),
       status = _useContext.status;
 
-  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(status !== undefined, 'Form.Item', "Form.Item.useStatus should be used under Form.Item component. For more information: ".concat(window.location.protocol, "//").concat(window.location.host, "/components/form-cn/#Form.Item.useStatus")) : void 0;
+  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(status !== undefined, 'Form.Item', "Form.Item.useStatus should be used under Form.Item component. For more information: " + window.location.protocol + "//" + window.location.host + "/components/form-cn/#Form.Item.useStatus") : void 0;
   return {
     status: status
   };
-};
+}; // Only used for compatible package. Not promise this will work on future version.
 
+
+useFormItemStatus.Context = _context.FormItemInputContext;
 var _default = useFormItemStatus;
 exports["default"] = _default;

package/lib/form/index.d.ts

@@ -1,12 +1,12 @@
-import { Rule, RuleObject, RuleRender } from 'rc-field-form/lib/interface';
+import type { Rule, RuleObject, RuleRender } from 'rc-field-form/lib/interface';
 import { FormProvider } from './context';
-import ErrorList, { ErrorListProps } from './ErrorList';
-import InternalForm, { FormInstance, FormProps, useForm, useWatch } from './Form';
-import Item, { FormItemProps } from './FormItem';
-import List, { FormListFieldData, FormListOperation, FormListProps } from './FormList';
+import ErrorList, { type ErrorListProps } from './ErrorList';
+import InternalForm, { type FormInstance, type FormProps, useForm, useWatch } from './Form';
+import Item, { type FormItemProps } from './FormItem';
+import List, { type FormListFieldData, type FormListOperation, type FormListProps } from './FormList';
 import useFormInstance from './hooks/useFormInstance';
 type InternalFormType = typeof InternalForm;
-interface FormInterface extends InternalFormType {
+type CompoundedComponent = InternalFormType & {
     useForm: typeof useForm;
     useFormInstance: typeof useFormInstance;
     useWatch: typeof useWatch;
@@ -16,7 +16,7 @@ interface FormInterface extends InternalFormType {
     Provider: typeof FormProvider;
     /** @deprecated Only for warning usage. Do not use. */
     create: () => void;
-}
-declare const Form: FormInterface;
-export { FormInstance, FormProps, FormItemProps, ErrorListProps, Rule, RuleObject, RuleRender, FormListProps, FormListFieldData, FormListOperation, };
+};
+declare const Form: CompoundedComponent;
+export type { FormInstance, FormProps, FormItemProps, ErrorListProps, Rule, RuleObject, RuleRender, FormListProps, FormListFieldData, FormListOperation, };
 export default Form;

package/lib/form/style/explain.d.ts

@@ -0,0 +1,4 @@
+import type { FormToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const genFormValidateMotionStyle: GenerateStyle<FormToken>;
+export default genFormValidateMotionStyle;

package/lib/form/style/explain.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var genFormValidateMotionStyle = function genFormValidateMotionStyle(token) {
+  var _helpItemCls;
+
+  var componentCls = token.componentCls;
+  var helpCls = componentCls + "-show-help";
+  var helpItemCls = componentCls + "-show-help-item";
+  return (0, _defineProperty2["default"])({}, helpCls, (0, _defineProperty2["default"])({
+    // Explain holder
+    transition: "opacity " + token.motionDurationSlow + " " + token.motionEaseInOut,
+    '&-appear, &-enter': {
+      opacity: 0,
+      '&-active': {
+        opacity: 1
+      }
+    },
+    '&-leave': {
+      opacity: 1,
+      '&-active': {
+        opacity: 0
+      }
+    }
+  }, helpItemCls, (_helpItemCls = {
+    overflow: 'hidden',
+    transition: "height " + token.motionDurationSlow + " " + token.motionEaseInOut + ",\n                     opacity " + token.motionDurationSlow + " " + token.motionEaseInOut + ",\n                     transform " + token.motionDurationSlow + " " + token.motionEaseInOut + " !important"
+  }, (0, _defineProperty2["default"])(_helpItemCls, "&" + helpItemCls + "-appear, &" + helpItemCls + "-enter", (0, _defineProperty2["default"])({
+    transform: "translateY(-5px)",
+    opacity: 0
+  }, "&-active", {
+    transform: 'translateY(0)',
+    opacity: 1
+  })), (0, _defineProperty2["default"])(_helpItemCls, "&" + helpItemCls + "-leave-active", {
+    transform: "translateY(-5px)"
+  }), _helpItemCls)));
+};
+
+var _default = genFormValidateMotionStyle;
+exports["default"] = _default;

package/lib/form/style/index.d.ts

@@ -1,4 +1,7 @@
-import '../../style/default.less';
-import './index.less';
-import '../../grid/style';
-import '../../tooltip/style';
+import type { FullToken } from '../../theme/internal';
+export interface FormToken extends FullToken<'Form'> {
+    formItemCls: string;
+    rootPrefixCls: string;
+}
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;