rsuite 5.50.0 → 5.51.0

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -243,8 +243,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       allUncheckable: (0, _utils2.isAllSiblingNodeUncheckable)(node, flattenNodes, uncheckableItemValues, valueKey),
       onSelect: handleSelect,
       onExpand: handleExpand,
-      onRenderTreeNode: renderTreeNode,
-      onRenderTreeIcon: renderTreeIcon
+      renderTreeNode: renderTreeNode,
+      renderTreeIcon: renderTreeIcon
     };
   };
   var focusActiveNode = function focusActiveNode() {
@@ -407,8 +407,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   });
   var handleClean = (0, _utils.useEventCallback)(function (event) {
     var target = event.target;
-    // exclude searchBar
-    if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
+    // exclude searchbox
+    if (target.matches('input[role="searchbox"]') || disabled || !cleanable) {
       return;
     }
     setActiveNode(null);
@@ -562,7 +562,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
           return saveTreeNodeRef(_ref, refKey);
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
-        className: checkTreePrefix('children')
+        className: checkTreePrefix('group'),
+        role: "group"
       }, nodes.map(function (child) {
         return renderNode(child, layer);
       }), showIndentLine && /*#__PURE__*/_react.default.createElement("span", {
@@ -614,21 +615,17 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         className: prefix('none')
       }, locale.noResultsText);
     }
-    var treeNodesClass = merge(checkTreePrefix('nodes'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge2));
-    var styles = inline ? (0, _extends2.default)({
-      height: height
-    }, style) : {};
-    return /*#__PURE__*/_react.default.createElement("div", {
-      id: id ? id + "-listbox" : undefined,
+    var treeNodesClass = merge(checkTreePrefix('root'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge2));
+    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, {
       ref: inline ? root : treeView,
-      role: "tree",
-      "aria-multiselectable": true,
+      multiselectable: true,
+      treeRootClassName: treeNodesClass,
       className: classes,
-      style: styles,
+      style: inline ? (0, _extends2.default)({
+        height: height
+      }, style) : {},
       onScroll: onScroll,
       onKeyDown: inline ? handleTreeKeydown : undefined
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: treeNodesClass
     }, virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
@@ -644,7 +641,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         itemCount: formattedNodes.length,
         itemData: formattedNodes
       }, listProps), renderVirtualListNode);
-    }) : formattedNodes));
+    }) : formattedNodes);
   };
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
@@ -655,7 +652,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       left: left,
       top: top
     });
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       autoWidth: menuAutoWidth,
       className: classes,
       style: mergedMenuStyle,
@@ -711,6 +708,9 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     return renderCheckTree();
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
+    multiple: true,
     pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
@@ -723,7 +723,6 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     style: style,
     ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
@@ -734,7 +733,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     hasValue: hasValidValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    focusItemValue: focusItemValue
   }), selectedElement || locale.placeholder)));
 });
 CheckTreePicker.displayName = 'CheckTreePicker';

package/cjs/DatePicker/DatePicker.js

@@ -25,7 +25,6 @@ var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _utils = require("../utils");
 var _dateUtils = require("../utils/dateUtils");
 var _Picker = require("../Picker");
-var _usePickerRef2 = _interopRequireDefault(require("../Picker/usePickerRef"));
 var _DateInput = _interopRequireDefault(require("../DateInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
 var _OverlayTrigger = require("../Overlay/OverlayTrigger");
@@ -103,8 +102,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick"]);
-  var id = (0, _utils.useUniqueId)(classPrefix + "-", idProp);
-  var _usePickerRef = (0, _usePickerRef2.default)(ref),
+  var id = (0, _utils.useUniqueId)('rs-', idProp);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
@@ -280,7 +279,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
     event.stopPropagation();
   });
-  var handlePickerOverlayKeyDown = (0, _utils.useEventCallback)(function (event) {
+  var handlePickerPopupKeyDown = (0, _utils.useEventCallback)(function (event) {
     var delta = 0;
     var step = showMonth ? 6 : 7;
     var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;
@@ -424,7 +423,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? id + "-label" : undefined,
       tabIndex: -1,
@@ -432,7 +431,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       style: styles,
       target: trigger,
-      onKeyDown: handlePickerOverlayKeyDown
+      onKeyDown: handlePickerPopupKeyDown
     }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {

package/cjs/DateRangePicker/DateRangePicker.js

@@ -30,7 +30,6 @@ var _deprecatePropType = require("../utils/deprecatePropType");
 var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerContext"));
 var _DateRangeInput = _interopRequireDefault(require("../DateRangeInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
-var _usePickerRef2 = _interopRequireDefault(require("../Picker/usePickerRef"));
 var _templateObject;
 /**
  * A date range picker allows you to select a date range from a calendar.
@@ -99,8 +98,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
     restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "size", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "onShortcutClick", "renderTitle"]);
-  var id = (0, _utils.useUniqueId)(classPrefix + "-", idProp);
-  var _usePickerRef = (0, _usePickerRef2.default)(ref),
+  var id = (0, _utils.useUniqueId)('rs-', idProp);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
@@ -604,7 +603,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
       return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
     });
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? id + "-label" : undefined,
       tabIndex: -1,

package/cjs/Form/Form.d.ts

@@ -32,6 +32,20 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
     disabled?: boolean;
     /** The error message comes from context */
     errorFromContext?: boolean;
+    /**
+     * The form data is nested.
+     * You may now nest fields with "dot syntax" (e.g. address.city).
+     *
+     * @default false
+     * @version v5.51.0
+     * @example
+     * ```jsx
+     * <Form formValue={{ address: { city: 'Shanghai' } }} nestedField>
+     *  <FormControl name="address.city" />
+     * </Form>
+     * ```
+     */
+    nestedField?: boolean;
     /** Callback fired when data changing */
     onChange?: (formValue: T, event?: React.SyntheticEvent) => void;
     /** Callback fired when error checking */

package/cjs/Form/Form.js

@@ -10,6 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
+var _set = _interopRequireDefault(require("lodash/set"));
 var _schemaTyped = require("schema-typed");
 var _FormContext = _interopRequireWildcard(require("./FormContext"));
 var _FormControl = _interopRequireDefault(require("../FormControl"));
@@ -36,6 +37,8 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     formValue = props.formValue,
     formError = props.formError,
     fluid = props.fluid,
+    _props$nestedField = props.nestedField,
+    nestedField = _props$nestedField === void 0 ? false : _props$nestedField,
     _props$layout = props.layout,
     layout = _props$layout === void 0 ? 'vertical' : _props$layout,
     _props$model = props.model,
@@ -49,7 +52,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onCheck = props.onCheck,
     onError = props.onError,
     onChange = props.onChange,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["checkTrigger", "classPrefix", "errorFromContext", "formDefaultValue", "formValue", "formError", "fluid", "layout", "model", "readOnly", "plaintext", "className", "children", "disabled", "onSubmit", "onCheck", "onError", "onChange"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["checkTrigger", "classPrefix", "errorFromContext", "formDefaultValue", "formValue", "formError", "fluid", "nestedField", "layout", "model", "readOnly", "plaintext", "className", "children", "disabled", "onSubmit", "onCheck", "onError", "onChange"]);
   var _useSchemaModel = (0, _useSchemaModel2.default)(formModel),
     getCombinedModel = _useSchemaModel.getCombinedModel,
     pushFieldRule = _useSchemaModel.pushFieldRule,
@@ -79,7 +82,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * The error message after verification is returned in the callback.
    * @param callback
    */
-  var check = (0, _react.useCallback)(function (callback) {
+  var check = (0, _utils.useEventCallback)(function (callback) {
     var formValue = realFormValue || {};
     var formError = {};
     var errorCount = 0;
@@ -99,14 +102,14 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return false;
     }
     return true;
-  }, [realFormValue, getCombinedModel, setFormError, onCheck, onError]);
+  });
 
   /**
    * Check the data field
    * @param fieldName
    * @param callback
    */
-  var checkForField = (0, _react.useCallback)(function (fieldName, callback) {
+  var checkForField = (0, _utils.useEventCallback)(function (fieldName, callback) {
     var _extends2;
     var formValue = realFormValue || {};
     var model = getCombinedModel();
@@ -119,12 +122,12 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onError === null || onError === void 0 ? void 0 : onError(formError);
     }
     return !checkResult.hasError;
-  }, [realFormValue, getCombinedModel, realFormError, setFormError, onCheck, onError]);
+  });
 
   /**
    * Check form data asynchronously and return a Promise
    */
-  var checkAsync = (0, _react.useCallback)(function () {
+  var checkAsync = (0, _utils.useEventCallback)(function () {
     var formValue = realFormValue || {};
     var promises = [];
     var keys = [];
@@ -152,13 +155,13 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         formError: formError
       };
     });
-  }, [realFormValue, getCombinedModel, onCheck, setFormError, onError]);
+  });
 
   /**
    * Asynchronously check form fields and return Promise
    * @param fieldName
    */
-  var checkForFieldAsync = (0, _react.useCallback)(function (fieldName) {
+  var checkForFieldAsync = (0, _utils.useEventCallback)(function (fieldName) {
     var formValue = realFormValue || {};
     var model = getCombinedModel();
     return model.checkForFieldAsync(fieldName, formValue).then(function (checkResult) {
@@ -171,19 +174,19 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }
       return checkResult;
     });
-  }, [realFormValue, getCombinedModel, realFormError, onCheck, setFormError, onError]);
-  var cleanErrors = (0, _react.useCallback)(function () {
+  });
+  var cleanErrors = (0, _utils.useEventCallback)(function () {
     setFormError({});
-  }, [setFormError]);
-  var cleanErrorForField = (0, _react.useCallback)(function (fieldName) {
+  });
+  var cleanErrorForField = (0, _utils.useEventCallback)(function (fieldName) {
     setFormError((0, _omit.default)(realFormError, [fieldName]));
-  }, [realFormError, setFormError]);
-  var resetErrors = (0, _react.useCallback)(function (formError) {
+  });
+  var resetErrors = (0, _utils.useEventCallback)(function (formError) {
     if (formError === void 0) {
       formError = {};
     }
     setFormError(formError);
-  }, [setFormError]);
+  });
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       root: rootRef.current,
@@ -196,7 +199,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       resetErrors: resetErrors
     };
   });
-  var removeFieldError = (0, _react.useCallback)(function (name) {
+  var removeFieldError = (0, _utils.useEventCallback)(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
@@ -205,8 +208,8 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     realFormErrorRef.current = formError;
     setFormError(formError);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
-  }, [onCheck, setFormError]);
-  var removeFieldValue = (0, _react.useCallback)(function (name) {
+  });
+  var removeFieldValue = (0, _utils.useEventCallback)(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
@@ -215,8 +218,8 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     realFormValueRef.current = formValue;
     setFormValue(formValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
-  }, [onChange, setFormValue]);
-  var handleSubmit = (0, _react.useCallback)(function (event) {
+  });
+  var handleSubmit = (0, _utils.useEventCallback)(function (event) {
     if (disabled || readOnly || plaintext) {
       return;
     }
@@ -224,24 +227,29 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     event.stopPropagation();
     var checkStatus = check();
     onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(checkStatus, event);
-  }, [disabled, readOnly, plaintext, check, onSubmit]);
-  var handleFieldError = (0, _react.useCallback)(function (name, errorMessage) {
+  });
+  var handleFieldError = (0, _utils.useEventCallback)(function (name, errorMessage) {
     var _extends4;
     var formError = (0, _extends6.default)({}, realFormError, (_extends4 = {}, _extends4[name] = errorMessage, _extends4));
     setFormError(formError);
     onError === null || onError === void 0 ? void 0 : onError(formError);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
-  }, [realFormError, setFormError, onError, onCheck]);
-  var handleFieldSuccess = (0, _react.useCallback)(function (name) {
+  });
+  var handleFieldSuccess = (0, _utils.useEventCallback)(function (name) {
     removeFieldError(name);
-  }, [removeFieldError]);
-  var handleFieldChange = (0, _react.useCallback)(function (name, value, event) {
+  });
+  var setFieldValue = function setFieldValue(formValue, fieldName, fieldValue) {
     var _extends5;
-    var formValue = realFormValue;
-    var nextFormValue = (0, _extends6.default)({}, formValue, (_extends5 = {}, _extends5[name] = value, _extends5));
+    if (nestedField) {
+      return (0, _set.default)((0, _extends6.default)({}, formValue), fieldName, fieldValue);
+    }
+    return (0, _extends6.default)({}, formValue, (_extends5 = {}, _extends5[fieldName] = fieldValue, _extends5));
+  };
+  var handleFieldChange = (0, _utils.useEventCallback)(function (name, value, event) {
+    var nextFormValue = setFieldValue(realFormValue, name, value);
     setFormValue(nextFormValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);
-  }, [realFormValue, setFormValue, onChange]);
+  });
   var rootRef = (0, _react.useRef)(null);
   var formContextValue = (0, _react.useMemo)(function () {
     return {
@@ -252,6 +260,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       plaintext: plaintext,
       disabled: disabled,
       formError: realFormError,
+      nestedField: nestedField,
       removeFieldValue: removeFieldValue,
       removeFieldError: removeFieldError,
       pushFieldRule: pushFieldRule,
@@ -260,7 +269,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onFieldError: handleFieldError,
       onFieldSuccess: handleFieldSuccess
     };
-  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, realFormError, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
+  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, realFormError, nestedField, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
   return /*#__PURE__*/_react.default.createElement("form", (0, _extends6.default)({}, rest, {
     ref: rootRef,
     onSubmit: handleSubmit,

package/cjs/Form/FormContext.d.ts

@@ -7,6 +7,7 @@ interface TrulyFormContextValue<T = Record<string, any>, errorMsgType = any, E =
 }> {
     getCombinedModel: () => Schema;
     formError: E;
+    nestedField: boolean;
     removeFieldValue: (name: string) => void;
     removeFieldError: (name: string) => void;
     pushFieldRule: (name: string, fieldRule: FieldRuleType) => void;

package/cjs/FormControl/FormControl.js

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 exports.__esModule = true;
 exports.default = void 0;
 var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends3 = _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"));
@@ -37,6 +37,7 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     disabledContext = _useContext.disabled,
     errorFromContext = _useContext.errorFromContext,
     formError = _useContext.formError,
+    nestedField = _useContext.nestedField,
     removeFieldValue = _useContext.removeFieldValue,
     removeFieldError = _useContext.removeFieldError,
     pushFieldRule = _useContext.pushFieldRule,
@@ -86,46 +87,67 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   });
   var trigger = checkTrigger || contextCheckTrigger;
   var formValue = (0, _react.useContext)(_FormContext.FormValueContext);
-  var val = (0, _isUndefined.default)(value) ? (0, _get.default)(formValue, name) : value;
+  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 _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
   var classes = withClassPrefix('wrapper');
-  var handleFieldChange = function handleFieldChange(value, event) {
+  var handleFieldChange = (0, _utils.useEventCallback)(function (value, event) {
     handleFieldCheck(value, trigger === 'change');
     onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(name, value, event);
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  };
-  var handleFieldBlur = function handleFieldBlur(event) {
-    handleFieldCheck(val, trigger === 'blur');
+  });
+  var handleFieldBlur = (0, _utils.useEventCallback)(function (event) {
+    handleFieldCheck(fieldValue, trigger === 'blur');
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-  };
-  var handleFieldCheck = function handleFieldCheck(value, isCheckTrigger) {
+  });
+  var handleFieldCheck = (0, _utils.useEventCallback)(function (value, isCheckTrigger) {
+    var checkFieldName = nestedField ? name.split('.')[0] : name;
     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(name, (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult);
+          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(name);
+          onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(checkFieldName);
         }
       }
       return checkResult;
     };
-    var nextFormValue = (0, _set.default)(formValue || {}, name, value);
+    var nextFormValue = setFieldValue(name, value);
     var model = getCombinedModel();
     if (checkAsync) {
-      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue).then(function (checkResult) {
+      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(checkFieldName, nextFormValue).then(function (checkResult) {
         return callbackEvents(checkResult);
       });
     }
-    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(name, nextFormValue)));
-  };
+    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(checkFieldName, nextFormValue)));
+  });
   var messageNode = null;
   if (!(0, _isUndefined.default)(errorMessage)) {
     messageNode = errorMessage;
   } else if (errorFromContext) {
-    var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];
+    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;
     }
@@ -139,12 +161,12 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   if (AccepterComponent === _Toggle.default) {
     valueKey = 'checked';
   }
-  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = val === undefined ? defaultValue : val, _accepterProps);
+  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, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends3.default)({
     id: controlId,
     "aria-labelledby": controlId ? controlId + "-control-label" : null,
     "aria-describedby": ariaDescribedby,
@@ -158,7 +180,7 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onChange: handleFieldChange,
     onBlur: handleFieldBlur
   })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {
-    id: controlId + "-error-message",
+    id: controlId ? controlId + "-error-message" : undefined,
     role: "alert",
     "aria-relevant": "all",
     show: !!messageNode,

package/cjs/FormGroup/FormGroup.js

@@ -22,13 +22,14 @@ var FormGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'form-group' : _props$classPrefix,
-    controlId = props.controlId,
+    controlIdProp = props.controlId,
     className = props.className,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "controlId", "className"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
+  var controlId = (0, _utils.useUniqueId)('rs-', controlIdProp);
   var contextValue = (0, _react.useMemo)(function () {
     return {
       controlId: controlId