rsuite 5.59.1 → 5.59.3-alpha.1

package/esm/Form/hooks/useFormValidate.js

@@ -0,0 +1,152 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useRef, useCallback } from 'react';
+import omit from 'lodash/omit';
+import set from 'lodash/set';
+import { useControlled } from '../../utils';
+import { nameToPath } from '../../FormControl/utils';
+import useEventCallback from '../../utils/useEventCallback';
+import useFormRef from './useFormRef';
+export default 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 = useControlled(formError, {}),
+    realFormError = _useControlled[0],
+    setFormError = _useControlled[1];
+  var realFormErrorRef = 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 = useEventCallback(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 = useEventCallback(function (fieldName, callback) {
+    var _extends2;
+    var model = getCombinedModel();
+    var checkResult = model.checkForField(fieldName, formValue || {});
+    var nextFormError = _extends({}, 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 = useEventCallback(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 = useEventCallback(function (fieldName) {
+    var model = getCombinedModel();
+    return model.checkForFieldAsync(fieldName, formValue || {}).then(function (checkResult) {
+      var _extends3;
+      var nextFormError = _extends({}, 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 = 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 = omit(realFormErrorRef.current, [nestedField ? nameToPath(name) : name]);
+    realFormErrorRef.current = formError;
+    setFormError(formError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
+    return formError;
+  }, [nestedField, onCheck, setFormError]);
+  var setFieldError = useCallback(function (fieldName, checkResult) {
+    var _extends4;
+    var nextFormError = nestedField ? set(_extends({}, formError), nameToPath(fieldName), checkResult) : _extends({}, 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 = useFormRef(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/esm/Form/hooks/useFormValue.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="lodash" />
-export default function useFormValue(controlledValue: any, formDefaultValue: any): {
+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/esm/Form/hooks/useFormValue.js

@@ -1,13 +1,23 @@
 'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { useRef, useCallback } from 'react';
 import omit from 'lodash/omit';
+import set from 'lodash/set';
 import { useControlled } from '../../utils';
-export default function useFormValue(controlledValue, formDefaultValue) {
+export default function useFormValue(controlledValue, props) {
+  var formDefaultValue = props.formDefaultValue,
+    nestedField = props.nestedField;
   var _useControlled = useControlled(controlledValue, formDefaultValue),
     formValue = _useControlled[0],
     setFormValue = _useControlled[1];
   var realFormValueRef = useRef(formValue);
   realFormValueRef.current = formValue;
+  var setFieldValue = useCallback(function (fieldName, fieldValue) {
+    var _extends2;
+    var nextFormError = nestedField ? set(_extends({}, formValue), fieldName, fieldValue) : _extends({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
+    setFormValue(nextFormError);
+    return nextFormError;
+  }, [formValue, nestedField, setFormValue]);
   var onRemoveValue = useCallback(function (name) {
     /**
      * when this function is called when the children component is unmount,
@@ -21,6 +31,7 @@ export default function useFormValue(controlledValue, formDefaultValue) {
   return {
     formValue: formValue,
     setFormValue: setFormValue,
+    setFieldValue: setFieldValue,
     onRemoveValue: onRemoveValue
   };
 }

package/esm/Form/hooks/useSchemaModel.js

@@ -19,6 +19,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 SchemaModel.combine(formModel, SchemaModel(realSubRules.map(function (_ref) {
       var _ref2;
       var name = _ref.name,

package/esm/Form/index.d.ts

@@ -1,5 +1,6 @@
 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';

package/esm/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/esm/FormControl/FormControl.js

@@ -5,17 +5,15 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _templateObject;
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import isUndefined from 'lodash/isUndefined';
-import get from 'lodash/get';
-import set from 'lodash/set';
 import Input from '../Input';
 import FormErrorMessage from '../FormErrorMessage';
 import { useClassNames } from '../utils';
 import FormContext, { FormValueContext } from '../Form/FormContext';
-import { FormGroupContext } from '../FormGroup/FormGroup';
+import { useFormGroup } from '../FormGroup';
 import { useWillUnmount, useEventCallback } from '../utils';
 import { oneOf } from '../internals/propTypes';
-import useRegisterModel from './useRegisterModel';
+import useRegisterModel from './hooks/useRegisterModel';
+import useField from './hooks/useField';
 import Toggle from '../Toggle';
 
 /**
@@ -37,8 +35,6 @@ var FormControl = /*#__PURE__*/React.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,
@@ -69,13 +65,17 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$shouldResetWit = props.shouldResetWithUnmount,
     shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,
     rule = props.rule,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "accepter", "classPrefix", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule"]);
-  var _useContext2 = useContext(FormGroupContext),
-    controlId = _useContext2.controlId;
+    id = props.id,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "accepter", "classPrefix", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule", "id"]);
+  var _useFormGroup = 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    ");
   }
-  useRegisterModel(name, pushFieldRule, removeFieldRule, rule);
+  useRegisterModel(name, rule);
   useWillUnmount(function () {
     if (shouldResetWithUnmount) {
       removeFieldValue === null || removeFieldValue === void 0 ? void 0 : removeFieldValue(name);
@@ -84,80 +84,62 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var trigger = checkTrigger || contextCheckTrigger;
   var formValue = useContext(FormValueContext);
-  var getFieldValue = function getFieldValue(fieldName) {
-    if (!isUndefined(value)) {
-      return value;
-    }
-    return nestedField ? get(formValue, fieldName) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
-  };
-  var setFieldValue = function setFieldValue(fieldName, fieldValue) {
-    var _extends2;
-    if (nestedField) {
-      return set(_extends({}, formValue), fieldName, fieldValue);
-    }
-    return _extends({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
-  };
-  var getFieldError = function getFieldError(fieldName) {
-    if (nestedField) {
-      var _name = fieldName.includes('.') ? fieldName.replace('.', '.object.') + '.errorMessage' : fieldName;
-      return get(formError, _name);
-    }
-    return formError === null || formError === void 0 ? void 0 : formError[fieldName];
-  };
-  var fieldValue = getFieldValue(name);
+  var _useField = useField({
+      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 = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
   var classes = withClassPrefix('wrapper');
   var handleFieldChange = 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 = useEventCallback(function (event) {
-    handleFieldCheck(fieldValue, trigger === 'blur');
+    if (trigger === 'blur') {
+      handleFieldCheck(fieldValue);
+    }
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   });
-  var handleFieldCheck = useEventCallback(function (value, isCheckTrigger) {
-    var checkFieldName = nestedField ? name.split('.')[0] : name;
+  var handleFieldCheck = 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 (!isUndefined(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) {
-    valueKey = 'checked';
-  }
+  var valueKey = AccepterComponent === Toggle ? 'checked' : 'value';
   var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = fieldValue === undefined ? defaultValue : fieldValue, _accepterProps);
   return /*#__PURE__*/React.createElement(Component, {
     className: classes,
@@ -165,10 +147,10 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "data-testid": "form-control-wrapper"
   }, /*#__PURE__*/React.createElement(AccepterComponent, _extends({
     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,
@@ -177,13 +159,13 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange: handleFieldChange,
     onBlur: handleFieldBlur
   })), /*#__PURE__*/React.createElement(FormErrorMessage, {
-    id: controlId ? controlId + "-error-message" : undefined,
+    id: errorMessageId,
     role: "alert",
     "aria-relevant": "all",
     show: fieldHasError,
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["message-wrapper"]))),
     placement: errorPlacement
-  }, messageNode));
+  }, fieldError));
 });
 FormControl.displayName = 'FormControl';
 FormControl.propTypes = {

package/esm/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/esm/FormControl/hooks/useField.js

@@ -0,0 +1,48 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useCallback, useMemo } from 'react';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import { nameToPath } from '../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 = useMemo(function () {
+    if (typeof value !== 'undefined') {
+      return value;
+    }
+    return nestedField ? get(formValue, name) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
+  }, [formValue, name, nestedField, value]);
+  var fieldError = useMemo(function () {
+    if (typeof errorMessage !== 'undefined' || !errorFromContext) {
+      return errorMessage;
+    }
+    if (nestedField) {
+      var _get;
+      return (_get = get(formError, 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 = useCallback(function (fieldName, fieldValue) {
+    var _extends2;
+    if (nestedField) {
+      return set(_extends({}, formValue), fieldName, fieldValue);
+    }
+    return _extends({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
+  }, [formValue, nestedField]);
+  return {
+    fieldValue: fieldValue,
+    fieldError: fieldError,
+    setFieldValue: setFieldValue
+  };
+}
+export default useField;

package/esm/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/esm/FormControl/hooks/useRegisterModel.js

@@ -0,0 +1,17 @@
+'use client';
+import { useRef, useEffect } from 'react';
+import { useFormContext } from '../../Form/FormContext';
+function useRegisterModel(name, rule) {
+  var _ref = useFormContext() || {},
+    pushFieldRule = _ref.pushFieldRule,
+    removeFieldRule = _ref.removeFieldRule;
+  var refRule = useRef(rule);
+  refRule.current = rule;
+  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]);
+}
+export default useRegisterModel;

package/esm/FormControl/utils.d.ts

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

package/esm/FormControl/utils.js

@@ -0,0 +1,4 @@
+'use client';
+export function nameToPath(name) {
+  return name.includes('.') ? name.replace('.', '.object.') : name;
+}

package/esm/FormControlLabel/FormControlLabel.js

@@ -1,31 +1,35 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
-import { FormGroupContext } from '../FormGroup/FormGroup';
+import { useFormGroup } from '../FormGroup';
 /**
  * The `<Form.ControlLabel>` component renders a label with required indicator, for form controls.
  * @see https://rsuitejs.com/components/form/
  */
 var FormControlLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useFormGroup = 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 = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "htmlFor", "className"]);
-  var _useContext = useContext(FormGroupContext),
-    controlId = _useContext.controlId;
+    _props$id = props.id,
+    id = _props$id === void 0 ? labelId : _props$id,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "htmlFor", "className", "id"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({
-    id: controlId ? controlId + "-control-label" : null,
-    htmlFor: htmlFor || controlId
+    id: id,
+    htmlFor: htmlFor
   }, rest, {
     ref: ref,
     className: classes

package/esm/FormErrorMessage/FormErrorMessage.js

@@ -29,10 +29,7 @@ var FormErrorMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge;
   var classes = withClassPrefix('show');
   var wrapperClasses = merge(className, prefix('wrapper', (_prefix = {}, _prefix["placement-" + kebabCase(placementPolyfill(placement))] = placement, _prefix)));
-  if (!show) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return show ? /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: wrapperClasses
   }), /*#__PURE__*/React.createElement("span", {
@@ -41,7 +38,7 @@ var FormErrorMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["arrow"])))
   }), /*#__PURE__*/React.createElement("span", {
     className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["inner"])))
-  }, children)));
+  }, children))) : null;
 });
 FormErrorMessage.displayName = 'FormErrorMessage';
 FormErrorMessage.propTypes = {

package/esm/FormGroup/FormGroup.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface FormGroupProps extends WithAsProps {
     /**
@@ -7,9 +6,24 @@ export interface FormGroupProps extends WithAsProps {
      */
     controlId?: string;
 }
-export declare const FormGroupContext: React.Context<{
-    controlId?: string | undefined;
-}>;
+export declare const useFormGroup: (controlId?: string) => {
+    /**
+     * The `id` of the `<Form.Control>` component.
+     */
+    controlId: string;
+    /**
+     * The `id` of the `<Form.HelpText>` component.
+     */
+    helpTextId: string;
+    /**
+     * The `id` of the `<Form.ControlLabel>` component.
+     */
+    labelId: string;
+    /**
+     * The `id` of the `<Form.ErrorMessage>` component.
+     */
+    errorMessageId: string;
+};
 /**
  * The `<Form.Group>` component is the easiest way to add some structure to forms.
  * @see https://rsuitejs.com/components/form/

package/esm/FormGroup/FormGroup.js

@@ -4,7 +4,33 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useUniqueId } from '../utils';
-export var FormGroupContext = /*#__PURE__*/React.createContext({});
+var FormGroupContext = /*#__PURE__*/React.createContext({});
+export var useFormGroup = function useFormGroup(controlId) {
+  var context = React.useContext(FormGroupContext);
+  var fallbackId = useUniqueId('rs-');
+  var id = controlId || context.controlId || fallbackId;
+  var helpTextId = id + "-help-text";
+  var labelId = id + "-label";
+  var errorMessageId = id + "-error-message";
+  return {
+    /**
+     * The `id` of the `<Form.Control>` component.
+     */
+    controlId: id,
+    /**
+     * The `id` of the `<Form.HelpText>` component.
+     */
+    helpTextId: helpTextId,
+    /**
+     * The `id` of the `<Form.ControlLabel>` component.
+     */
+    labelId: labelId,
+    /**
+     * The `id` of the `<Form.ErrorMessage>` component.
+     */
+    errorMessageId: errorMessageId
+  };
+};
 
 /**
  * The `<Form.Group>` component is the easiest way to add some structure to forms.