rsuite 5.59.0 → 5.59.2

package/cjs/Form/hooks/useFormValidate.js

@@ -0,0 +1,157 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = useFormValidate;
+var _extends5 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("react");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _set = _interopRequireDefault(require("lodash/set"));
+var _utils = require("../../utils");
+var _utils2 = require("../../FormControl/utils");
+var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
+var _useFormRef = _interopRequireDefault(require("./useFormRef"));
+function useFormValidate(formError, props) {
+  var ref = props.ref,
+    formValue = props.formValue,
+    getCombinedModel = props.getCombinedModel,
+    onCheck = props.onCheck,
+    onError = props.onError,
+    nestedField = props.nestedField;
+  var _useControlled = (0, _utils.useControlled)(formError, {}),
+    realFormError = _useControlled[0],
+    setFormError = _useControlled[1];
+  var realFormErrorRef = (0, _react.useRef)(realFormError);
+  realFormErrorRef.current = realFormError;
+
+  /**
+   * Validate the form data and return a boolean.
+   * The error message after verification is returned in the callback.
+   * @param callback
+   */
+  var check = (0, _useEventCallback.default)(function (callback) {
+    var formError = {};
+    var errorCount = 0;
+    var model = getCombinedModel();
+    Object.keys(model.getSchemaSpec()).forEach(function (key) {
+      var checkResult = model.checkForField(key, formValue || {});
+      if (checkResult.hasError === true) {
+        errorCount += 1;
+        formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;
+      }
+    });
+    setFormError(formError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
+    callback === null || callback === void 0 ? void 0 : callback(formError);
+    if (errorCount > 0) {
+      onError === null || onError === void 0 ? void 0 : onError(formError);
+      return false;
+    }
+    return true;
+  });
+
+  /**
+   * Check the data field
+   * @param fieldName
+   * @param callback
+   */
+  var checkForField = (0, _useEventCallback.default)(function (fieldName, callback) {
+    var _extends2;
+    var model = getCombinedModel();
+    var checkResult = model.checkForField(fieldName, formValue || {});
+    var nextFormError = (0, _extends5.default)({}, formError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
+    setFormError(nextFormError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
+    callback === null || callback === void 0 ? void 0 : callback(checkResult);
+    if (checkResult.hasError) {
+      onError === null || onError === void 0 ? void 0 : onError(nextFormError);
+    }
+    return !checkResult.hasError;
+  });
+
+  /**
+   * Check form data asynchronously and return a Promise
+   */
+  var checkAsync = (0, _useEventCallback.default)(function () {
+    var promises = [];
+    var keys = [];
+    var model = getCombinedModel();
+    Object.keys(model.getSchemaSpec()).forEach(function (key) {
+      keys.push(key);
+      promises.push(model.checkForFieldAsync(key, formValue || {}));
+    });
+    return Promise.all(promises).then(function (values) {
+      var formError = {};
+      var errorCount = 0;
+      for (var i = 0; i < values.length; i++) {
+        if (values[i].hasError) {
+          errorCount += 1;
+          formError[keys[i]] = values[i].errorMessage;
+        }
+      }
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
+      setFormError(formError);
+      if (errorCount > 0) {
+        onError === null || onError === void 0 ? void 0 : onError(formError);
+      }
+      return {
+        hasError: errorCount > 0,
+        formError: formError
+      };
+    });
+  });
+
+  /**
+   * Asynchronously check form fields and return Promise
+   * @param fieldName
+   */
+  var checkForFieldAsync = (0, _useEventCallback.default)(function (fieldName) {
+    var model = getCombinedModel();
+    return model.checkForFieldAsync(fieldName, formValue || {}).then(function (checkResult) {
+      var _extends3;
+      var nextFormError = (0, _extends5.default)({}, formError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
+      setFormError(nextFormError);
+      if (checkResult.hasError) {
+        onError === null || onError === void 0 ? void 0 : onError(nextFormError);
+      }
+      return checkResult;
+    });
+  });
+  var onRemoveError = (0, _react.useCallback)(function (name) {
+    /**
+     * when this function is called when the children component is unmount,
+     * it's an old render frame so use Ref to get future error
+     */
+    var formError = (0, _omit.default)(realFormErrorRef.current, [nestedField ? (0, _utils2.nameToPath)(name) : name]);
+    realFormErrorRef.current = formError;
+    setFormError(formError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
+    return formError;
+  }, [nestedField, onCheck, setFormError]);
+  var setFieldError = (0, _react.useCallback)(function (fieldName, checkResult) {
+    var _extends4;
+    var nextFormError = nestedField ? (0, _set.default)((0, _extends5.default)({}, formError), (0, _utils2.nameToPath)(fieldName), checkResult) : (0, _extends5.default)({}, formError, (_extends4 = {}, _extends4[fieldName] = checkResult, _extends4));
+    setFormError(nextFormError);
+    onError === null || onError === void 0 ? void 0 : onError(nextFormError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
+    return nextFormError;
+  }, [formError, nestedField, onCheck, onError, setFormError]);
+  var formRef = (0, _useFormRef.default)(ref, {
+    check: check,
+    checkForField: checkForField,
+    checkAsync: checkAsync,
+    checkForFieldAsync: checkForFieldAsync,
+    formError: formError,
+    setFormError: setFormError,
+    nestedField: nestedField
+  });
+  return {
+    formRef: formRef,
+    formError: realFormError,
+    check: check,
+    setFieldError: setFieldError,
+    onRemoveError: onRemoveError
+  };
+}

package/cjs/Form/hooks/useFormValue.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="lodash" />
+export default function useFormValue(controlledValue: any, props: any): {
+    formValue: any;
+    setFormValue: (value: any) => void;
+    setFieldValue: (fieldName: string, fieldValue: any) => any;
+    onRemoveValue: (name: string) => import("lodash").Omit<any, string>;
+};

package/cjs/Form/hooks/useFormValue.js

@@ -0,0 +1,42 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = useFormValue;
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("react");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _set = _interopRequireDefault(require("lodash/set"));
+var _utils = require("../../utils");
+function useFormValue(controlledValue, props) {
+  var formDefaultValue = props.formDefaultValue,
+    nestedField = props.nestedField;
+  var _useControlled = (0, _utils.useControlled)(controlledValue, formDefaultValue),
+    formValue = _useControlled[0],
+    setFormValue = _useControlled[1];
+  var realFormValueRef = (0, _react.useRef)(formValue);
+  realFormValueRef.current = formValue;
+  var setFieldValue = (0, _react.useCallback)(function (fieldName, fieldValue) {
+    var _extends2;
+    var nextFormError = nestedField ? (0, _set.default)((0, _extends3.default)({}, formValue), fieldName, fieldValue) : (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
+    setFormValue(nextFormError);
+    return nextFormError;
+  }, [formValue, nestedField, setFormValue]);
+  var onRemoveValue = (0, _react.useCallback)(function (name) {
+    /**
+     * when this function is called when the children component is unmount,
+     * it's an old render frame so use Ref to get future value
+     */
+    var formValue = (0, _omit.default)(realFormValueRef.current, [name]);
+    realFormValueRef.current = formValue;
+    setFormValue(formValue);
+    return formValue;
+  }, [setFormValue]);
+  return {
+    formValue: formValue,
+    setFormValue: setFormValue,
+    setFieldValue: setFieldValue,
+    onRemoveValue: onRemoveValue
+  };
+}

package/cjs/Form/{useSchemaModel.js → hooks/useSchemaModel.js}

@@ -23,6 +23,11 @@ function useSchemaModel(formModel) {
     var realSubRules = subRulesRef.current.filter(function (v) {
       return Boolean(v.fieldRule.current);
     });
+
+    // If there is no sub rule, return the original form model
+    if (realSubRules.length === 0) {
+      return formModel;
+    }
     return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(realSubRules.map(function (_ref) {
       var _ref2;
       var name = _ref.name,

package/cjs/Form/index.d.ts

@@ -1,9 +1,10 @@
 import Form from './Form';
-export type { FormInstance, FormProps } from './Form';
+export type { FormProps } from './Form';
+export type { FormInstance } from './hooks/useFormRef';
 export type { FormGroupProps } from '../FormGroup';
 export type { FormErrorMessageProps } from '../FormErrorMessage';
 export type { FormControlLabelProps } from '../FormControlLabel';
 export type { FormHelpTextProps } from '../FormHelpText';
 export type { FormControlProps } from '../FormControl';
-export * from './useFormClassNames';
+export { default as useFormClassNames } from './hooks/useFormClassNames';
 export default Form;

package/cjs/Form/index.js

@@ -3,15 +3,9 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-var _exportNames = {};
-exports.default = void 0;
+exports.default = exports.useFormClassNames = void 0;
 var _Form = _interopRequireDefault(require("./Form"));
-var _useFormClassNames = require("./useFormClassNames");
-Object.keys(_useFormClassNames).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useFormClassNames[key]) return;
-  exports[key] = _useFormClassNames[key];
-});
+var _useFormClassNames = _interopRequireDefault(require("./hooks/useFormClassNames"));
+exports.useFormClassNames = _useFormClassNames.default;
 var _default = _Form.default;
 exports.default = _default;

package/cjs/FormControl/FormControl.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
+import type { CheckType } from 'schema-typed';
 import Input from '../Input';
 import { TypeAttributes, FormControlBaseProps, WithAsProps } from '../@types/common';
-import type { CheckType } from 'schema-typed';
 /**
  * Props that FormControl passes to its accepter
  */

package/cjs/FormControl/FormControl.js

@@ -6,20 +6,18 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 exports.__esModule = true;
 exports.default = void 0;
 var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
-var _get = _interopRequireDefault(require("lodash/get"));
-var _set = _interopRequireDefault(require("lodash/set"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _FormErrorMessage = _interopRequireDefault(require("../FormErrorMessage"));
 var _utils = require("../utils");
 var _FormContext = _interopRequireWildcard(require("../Form/FormContext"));
-var _FormGroup = require("../FormGroup/FormGroup");
+var _FormGroup = require("../FormGroup");
 var _propTypes2 = require("../internals/propTypes");
-var _useRegisterModel = _interopRequireDefault(require("./useRegisterModel"));
+var _useRegisterModel = _interopRequireDefault(require("./hooks/useRegisterModel"));
+var _useField2 = _interopRequireDefault(require("./hooks/useField"));
 var _Toggle = _interopRequireDefault(require("../Toggle"));
 var _templateObject;
 /**
@@ -41,8 +39,6 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     nestedField = _useContext.nestedField,
     removeFieldValue = _useContext.removeFieldValue,
     removeFieldError = _useContext.removeFieldError,
-    pushFieldRule = _useContext.pushFieldRule,
-    removeFieldRule = _useContext.removeFieldRule,
     onFieldChange = _useContext.onFieldChange,
     onFieldError = _useContext.onFieldError,
     onFieldSuccess = _useContext.onFieldSuccess,
@@ -73,13 +69,17 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     _props$shouldResetWit = props.shouldResetWithUnmount,
     shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,
     rule = props.rule,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "accepter", "classPrefix", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule"]);
-  var _useContext2 = (0, _react.useContext)(_FormGroup.FormGroupContext),
-    controlId = _useContext2.controlId;
+    id = props.id,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "accepter", "classPrefix", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule", "id"]);
+  var _useFormGroup = (0, _FormGroup.useFormGroup)(id),
+    controlId = _useFormGroup.controlId,
+    helpTextId = _useFormGroup.helpTextId,
+    labelId = _useFormGroup.labelId,
+    errorMessageId = _useFormGroup.errorMessageId;
   if (!onFieldChange) {
     throw new Error("\n      <FormControl> must be inside a component decorated with <Form>.\n      And need to update React to 16.6.0 +.\n    ");
   }
-  (0, _useRegisterModel.default)(name, pushFieldRule, removeFieldRule, rule);
+  (0, _useRegisterModel.default)(name, rule);
   (0, _utils.useWillUnmount)(function () {
     if (shouldResetWithUnmount) {
       removeFieldValue === null || removeFieldValue === void 0 ? void 0 : removeFieldValue(name);
@@ -88,91 +88,73 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   });
   var trigger = checkTrigger || contextCheckTrigger;
   var formValue = (0, _react.useContext)(_FormContext.FormValueContext);
-  var getFieldValue = function getFieldValue(fieldName) {
-    if (!(0, _isUndefined.default)(value)) {
-      return value;
-    }
-    return nestedField ? (0, _get.default)(formValue, fieldName) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
-  };
-  var setFieldValue = function setFieldValue(fieldName, fieldValue) {
-    var _extends2;
-    if (nestedField) {
-      return (0, _set.default)((0, _extends3.default)({}, formValue), fieldName, fieldValue);
-    }
-    return (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
-  };
-  var getFieldError = function getFieldError(fieldName) {
-    if (nestedField) {
-      var _name = fieldName.includes('.') ? fieldName.replace('.', '.object.') + '.errorMessage' : fieldName;
-      return (0, _get.default)(formError, _name);
-    }
-    return formError === null || formError === void 0 ? void 0 : formError[fieldName];
-  };
-  var fieldValue = getFieldValue(name);
+  var _useField = (0, _useField2.default)({
+      name: name,
+      errorMessage: errorMessage,
+      formValue: formValue,
+      formError: formError,
+      value: value,
+      nestedField: nestedField,
+      errorFromContext: errorFromContext
+    }),
+    fieldValue = _useField.fieldValue,
+    fieldError = _useField.fieldError,
+    setFieldValue = _useField.setFieldValue;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
   var classes = withClassPrefix('wrapper');
   var handleFieldChange = (0, _utils.useEventCallback)(function (value, event) {
-    handleFieldCheck(value, trigger === 'change');
+    if (trigger === 'change') {
+      handleFieldCheck(value);
+    }
     onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(name, value, event);
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
   });
   var handleFieldBlur = (0, _utils.useEventCallback)(function (event) {
-    handleFieldCheck(fieldValue, trigger === 'blur');
+    if (trigger === 'blur') {
+      handleFieldCheck(fieldValue);
+    }
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   });
-  var handleFieldCheck = (0, _utils.useEventCallback)(function (value, isCheckTrigger) {
-    var checkFieldName = nestedField ? name.split('.')[0] : name;
+  var handleFieldCheck = (0, _utils.useEventCallback)(function (value) {
     var callbackEvents = function callbackEvents(checkResult) {
-      // The relevant event is triggered only when the inspection is allowed.
-      if (isCheckTrigger) {
-        if (checkResult.hasError) {
-          onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(checkFieldName, (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult);
-        } else {
-          onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(checkFieldName);
-        }
+      if (checkResult.hasError) {
+        var _errorMessage = checkResult.errorMessage;
+        var _fieldError = nestedField ? checkResult : _errorMessage || checkResult;
+        onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(name, _fieldError);
+      } else {
+        onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(name);
       }
       return checkResult;
     };
     var nextFormValue = setFieldValue(name, value);
     var model = getCombinedModel();
+    var checkOptions = {
+      nestedObject: nestedField
+    };
     if (checkAsync) {
-      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(checkFieldName, nextFormValue).then(function (checkResult) {
+      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue, checkOptions).then(function (checkResult) {
         return callbackEvents(checkResult);
       });
     }
-    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(checkFieldName, nextFormValue)));
+    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(name, nextFormValue, checkOptions)));
   });
-  var messageNode = null;
-  if (!(0, _isUndefined.default)(errorMessage)) {
-    messageNode = errorMessage;
-  } else if (errorFromContext) {
-    var fieldError = getFieldError(name);
-    if (typeof fieldError === 'string' || !(fieldError !== null && fieldError !== void 0 && fieldError.array) && !(fieldError !== null && fieldError !== void 0 && fieldError.object) && fieldError !== null && fieldError !== void 0 && fieldError.hasError) {
-      messageNode = fieldError;
-    }
-  }
-  var ariaDescribedby = controlId ? controlId + "-help-text" : null;
-  var fieldHasError = Boolean(messageNode);
-  var ariaErrormessage = fieldHasError && controlId ? controlId + "-error-message" : undefined;
-  var valueKey = 'value';
+  var fieldHasError = Boolean(fieldError);
 
   // Toggle component is a special case that uses `checked` and `defaultChecked` instead of `value` and `defaultValue` props.
-  if (AccepterComponent === _Toggle.default) {
-    valueKey = 'checked';
-  }
+  var valueKey = AccepterComponent === _Toggle.default ? 'checked' : 'value';
   var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = fieldValue === undefined ? defaultValue : fieldValue, _accepterProps);
   return /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
     ref: ref,
     "data-testid": "form-control-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends3.default)({
+  }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends2.default)({
     id: controlId,
-    "aria-labelledby": controlId ? controlId + "-control-label" : null,
-    "aria-describedby": ariaDescribedby,
+    "aria-labelledby": labelId,
+    "aria-describedby": helpTextId,
     "aria-invalid": fieldHasError || undefined,
-    "aria-errormessage": ariaErrormessage
+    "aria-errormessage": fieldHasError ? errorMessageId : undefined
   }, accepterProps, rest, {
     readOnly: readOnly,
     plaintext: plaintext,
@@ -181,13 +163,13 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onChange: handleFieldChange,
     onBlur: handleFieldBlur
   })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {
-    id: controlId ? controlId + "-error-message" : undefined,
+    id: errorMessageId,
     role: "alert",
     "aria-relevant": "all",
-    show: !!messageNode,
+    show: fieldHasError,
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["message-wrapper"]))),
     placement: errorPlacement
-  }, messageNode));
+  }, fieldError));
 });
 FormControl.displayName = 'FormControl';
 FormControl.propTypes = {

package/cjs/FormControl/hooks/useField.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+interface FieldProps {
+    name: string;
+    formValue?: Record<string, any>;
+    formError?: Record<string, any>;
+    value: any;
+    nestedField: boolean;
+    errorMessage: React.ReactNode;
+    errorFromContext?: boolean;
+}
+declare function useField(props: FieldProps): {
+    fieldValue: any;
+    fieldError: any;
+    setFieldValue: (fieldName: string, fieldValue: any) => {
+        [x: string]: any;
+    };
+};
+export default useField;

package/cjs/FormControl/hooks/useField.js

@@ -0,0 +1,54 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("react");
+var _get2 = _interopRequireDefault(require("lodash/get"));
+var _set = _interopRequireDefault(require("lodash/set"));
+var _utils = require("../utils");
+function useField(props) {
+  var name = props.name,
+    formValue = props.formValue,
+    formError = props.formError,
+    value = props.value,
+    nestedField = props.nestedField,
+    errorMessage = props.errorMessage,
+    errorFromContext = props.errorFromContext;
+  var fieldValue = (0, _react.useMemo)(function () {
+    if (typeof value !== 'undefined') {
+      return value;
+    }
+    return nestedField ? (0, _get2.default)(formValue, name) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
+  }, [formValue, name, nestedField, value]);
+  var fieldError = (0, _react.useMemo)(function () {
+    if (typeof errorMessage !== 'undefined' || !errorFromContext) {
+      return errorMessage;
+    }
+    if (nestedField) {
+      var _get;
+      return (_get = (0, _get2.default)(formError, (0, _utils.nameToPath)(name))) === null || _get === void 0 ? void 0 : _get.errorMessage;
+    }
+    var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];
+    if (typeof fieldError === 'string') {
+      return fieldError;
+    }
+    return fieldError === null || fieldError === void 0 ? void 0 : fieldError.errorMessage;
+  }, [errorFromContext, errorMessage, formError, name, nestedField]);
+  var setFieldValue = (0, _react.useCallback)(function (fieldName, fieldValue) {
+    var _extends2;
+    if (nestedField) {
+      return (0, _set.default)((0, _extends3.default)({}, formValue), fieldName, fieldValue);
+    }
+    return (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
+  }, [formValue, nestedField]);
+  return {
+    fieldValue: fieldValue,
+    fieldError: fieldError,
+    setFieldValue: setFieldValue
+  };
+}
+var _default = useField;
+exports.default = _default;

package/cjs/FormControl/hooks/useRegisterModel.d.ts

@@ -0,0 +1,3 @@
+import type { CheckType } from 'schema-typed';
+declare function useRegisterModel(name: string, rule?: CheckType<unknown, any>): void;
+export default useRegisterModel;

package/cjs/FormControl/hooks/useRegisterModel.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _FormContext = require("../../Form/FormContext");
+function useRegisterModel(name, rule) {
+  var _ref = (0, _FormContext.useFormContext)() || {},
+    pushFieldRule = _ref.pushFieldRule,
+    removeFieldRule = _ref.removeFieldRule;
+  var refRule = (0, _react.useRef)(rule);
+  refRule.current = rule;
+  (0, _react.useEffect)(function () {
+    pushFieldRule === null || pushFieldRule === void 0 ? void 0 : pushFieldRule(name, refRule);
+    return function () {
+      removeFieldRule === null || removeFieldRule === void 0 ? void 0 : removeFieldRule(name);
+    };
+  }, [name, pushFieldRule, removeFieldRule]);
+}
+var _default = useRegisterModel;
+exports.default = _default;

package/cjs/FormControl/utils.d.ts

@@ -0,0 +1 @@
+export declare function nameToPath(name: string): string;

package/cjs/FormControl/utils.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.nameToPath = nameToPath;
+function nameToPath(name) {
+  return name.includes('.') ? name.replace('.', '.object.') : name;
+}

package/cjs/FormControlLabel/FormControlLabel.js

@@ -1,37 +1,40 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
-var _FormGroup = require("../FormGroup/FormGroup");
+var _FormGroup = require("../FormGroup");
 /**
  * The `<Form.ControlLabel>` component renders a label with required indicator, for form controls.
  * @see https://rsuitejs.com/components/form/
  */
 var FormControlLabel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useFormGroup = (0, _FormGroup.useFormGroup)(),
+    labelId = _useFormGroup.labelId,
+    controlId = _useFormGroup.controlId;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'label' : _props$as,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'form-control-label' : _props$classPrefix,
-    htmlFor = props.htmlFor,
+    _props$htmlFor = props.htmlFor,
+    htmlFor = _props$htmlFor === void 0 ? controlId : _props$htmlFor,
     className = props.className,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "htmlFor", "className"]);
-  var _useContext = (0, _react.useContext)(_FormGroup.FormGroupContext),
-    controlId = _useContext.controlId;
+    _props$id = props.id,
+    id = _props$id === void 0 ? labelId : _props$id,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "htmlFor", "className", "id"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    id: controlId ? controlId + "-control-label" : null,
-    htmlFor: htmlFor || controlId
+    id: id,
+    htmlFor: htmlFor
   }, rest, {
     ref: ref,
     className: classes

package/cjs/FormErrorMessage/FormErrorMessage.js

@@ -34,10 +34,7 @@ var FormErrorMessage = /*#__PURE__*/_react.default.forwardRef(function (props, r
     merge = _useClassNames.merge;
   var classes = withClassPrefix('show');
   var wrapperClasses = merge(className, prefix('wrapper', (_prefix = {}, _prefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _prefix)));
-  if (!show) {
-    return null;
-  }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return show ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: wrapperClasses
   }), /*#__PURE__*/_react.default.createElement("span", {
@@ -46,7 +43,7 @@ var FormErrorMessage = /*#__PURE__*/_react.default.forwardRef(function (props, r
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["arrow"])))
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["inner"])))
-  }, children)));
+  }, children))) : null;
 });
 FormErrorMessage.displayName = 'FormErrorMessage';
 FormErrorMessage.propTypes = {