rsuite 5.50.0 → 5.52.0

package/cjs/Dropdown/DropdownItem.js

@@ -10,8 +10,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _pick2 = _interopRequireDefault(require("lodash/pick"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _deprecatePropType = _interopRequireWildcard(require("../utils/deprecatePropType"));
-var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
+var _propTypes2 = require("../internals/propTypes");
+var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
 var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _utils = require("../utils");
@@ -22,6 +22,7 @@ var _useRenderDropdownItem = require("./useRenderDropdownItem");
 var _warnOnce = _interopRequireDefault(require("../utils/warnOnce"));
 var _Nav = _interopRequireDefault(require("../Nav"));
 var _DropdownSeparator = _interopRequireDefault(require("./DropdownSeparator"));
+var _classnames = _interopRequireDefault(require("classnames"));
 /**
  * The `<Dropdown.Item>` API
  * - When used inside `<Sidenav>`, renders a `<TreeviewItem>`
@@ -124,7 +125,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       className: classes
     }, menuitem, dataAttributes, restProps, {
       children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
-        className: prefix('menu-icon')
+        className: (0, _classnames.default)(prefix('menu-icon'), icon.props.className)
       }), children)
     }));
   });
@@ -132,13 +133,13 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 DropdownItem.displayName = 'Dropdown.Item';
 DropdownItem.propTypes = {
   as: _propTypes.default.elementType,
-  divider: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.bool, 'Use Dropdown.Separator component instead.'),
+  divider: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.bool, 'Use Dropdown.Separator component instead.'),
   panel: _propTypes.default.bool,
-  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),
-  open: (0, _deprecatePropType.default)(_propTypes.default.bool),
+  trigger: _propTypes.default.oneOfType([_propTypes.default.array, (0, _propTypes2.oneOf)(['click', 'hover'])]),
+  open: (0, _propTypes2.deprecatePropType)(_propTypes.default.bool),
   active: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  pullLeft: (0, _deprecatePropType.default)(_propTypes.default.bool),
+  pullLeft: (0, _propTypes2.deprecatePropType)(_propTypes.default.bool),
   submenu: _propTypes.default.element,
   onSelect: _propTypes.default.func,
   onClick: _propTypes.default.func,

package/cjs/Dropdown/DropdownMenu.js

@@ -10,15 +10,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _omit2 = _interopRequireDefault(require("lodash/omit"));
-var _Menu = _interopRequireDefault(require("../Menu/Menu"));
-var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
+var _Menu = _interopRequireDefault(require("../internals/Menu/Menu"));
+var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
+var _Menubar = _interopRequireDefault(require("../internals/Menu/Menubar"));
+var _propTypes = require("../internals/propTypes");
 var _utils = require("../utils");
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));
 var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
 var _useCustom2 = _interopRequireDefault(require("../utils/useCustom"));
 var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
-var _Menubar = _interopRequireDefault(require("../Menu/Menubar"));
 var _Nav = _interopRequireDefault(require("../Nav"));
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _warnOnce = _interopRequireDefault(require("../utils/warnOnce"));
@@ -166,21 +167,21 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 });
 DropdownMenu.displayName = 'Dropdown.Menu';
 DropdownMenu.propTypes = {
-  active: _propTypes.default.bool,
-  activeKey: _propTypes.default.any,
-  className: _propTypes.default.string,
-  children: _propTypes.default.node,
-  icon: _propTypes.default.any,
-  classPrefix: _propTypes.default.string,
-  pullLeft: _propTypes.default.bool,
-  title: _propTypes.default.node,
-  open: _propTypes.default.bool,
-  trigger: _propTypes.default.oneOf(['click', 'hover']),
-  eventKey: _propTypes.default.any,
-  expanded: _propTypes.default.bool,
-  collapsible: _propTypes.default.bool,
-  onSelect: _propTypes.default.func,
-  onToggle: _propTypes.default.func
+  active: _propTypes2.default.bool,
+  activeKey: _propTypes2.default.any,
+  className: _propTypes2.default.string,
+  children: _propTypes2.default.node,
+  icon: _propTypes2.default.any,
+  classPrefix: _propTypes2.default.string,
+  pullLeft: _propTypes2.default.bool,
+  title: _propTypes2.default.node,
+  open: _propTypes2.default.bool,
+  trigger: (0, _propTypes.oneOf)(['click', 'hover']),
+  eventKey: _propTypes2.default.any,
+  expanded: _propTypes2.default.bool,
+  collapsible: _propTypes2.default.bool,
+  onSelect: _propTypes2.default.func,
+  onToggle: _propTypes2.default.func
 };
 var _default = DropdownMenu;
 exports.default = _default;

package/cjs/Dropdown/DropdownToggle.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _utils = require("../utils");
 var _useToggleCaret = _interopRequireDefault(require("../utils/useToggleCaret"));
+var _propTypes2 = require("../internals/propTypes");
 var DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? _Button.default : _props$as,
@@ -53,7 +54,7 @@ DropdownToggle.propTypes = {
   noCaret: _propTypes.default.bool,
   as: _propTypes.default.elementType,
   renderToggle: _propTypes.default.func,
-  placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
+  placement: (0, _propTypes2.oneOf)(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
 };
 var _default = DropdownToggle;
 exports.default = _default;

package/cjs/FlexboxGrid/FlexboxGrid.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _FlexboxGridItem = _interopRequireDefault(require("./FlexboxGridItem"));
+var _propTypes2 = require("../internals/propTypes");
 /**
  * The FlexboxGrid component is a box that can be used to layout other components.
  * @see https://rsuitejs.com/components/flexbox-grid
@@ -39,8 +40,8 @@ FlexboxGrid.displayName = 'FlexboxGrid';
 FlexboxGrid.propTypes = {
   className: _propTypes.default.string,
   classPrefix: _propTypes.default.string,
-  align: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
-  justify: _propTypes.default.oneOf(['start', 'end', 'center', 'space-around', 'space-between'])
+  align: (0, _propTypes2.oneOf)(['top', 'middle', 'bottom']),
+  justify: (0, _propTypes2.oneOf)(['start', 'end', 'center', 'space-around', 'space-between'])
 };
 var _default = FlexboxGrid;
 exports.default = _default;

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"));
@@ -20,6 +21,7 @@ var _FormHelpText = _interopRequireDefault(require("../FormHelpText"));
 var _useFormClassNames = require("./useFormClassNames");
 var _useSchemaModel2 = _interopRequireDefault(require("./useSchemaModel"));
 var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
 /**
  * The `Form` component is a form interface for collecting and validating user input.
  * @see https://rsuitejs.com/components/form
@@ -36,6 +38,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 +53,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 +83,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 +103,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 +123,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 +156,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 +175,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 +200,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 +209,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 +219,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 +228,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 +261,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 +270,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,
@@ -283,12 +293,12 @@ Form.propTypes = {
   classPrefix: _propTypes.default.string,
   children: _propTypes.default.node,
   errorFromContext: _propTypes.default.bool,
-  layout: _propTypes.default.oneOf(['horizontal', 'vertical', 'inline']),
+  layout: (0, _propTypes2.oneOf)(['horizontal', 'vertical', 'inline']),
   fluid: _propTypes.default.bool,
   formValue: _propTypes.default.object,
   formDefaultValue: _propTypes.default.object,
   formError: _propTypes.default.object,
-  checkTrigger: _propTypes.default.oneOf(['change', 'blur', 'none']),
+  checkTrigger: (0, _propTypes2.oneOf)(['change', 'blur', 'none']),
   onChange: _propTypes.default.func,
   onError: _propTypes.default.func,
   onCheck: _propTypes.default.func,

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"));
@@ -18,6 +18,7 @@ var _FormErrorMessage = _interopRequireDefault(require("../FormErrorMessage"));
 var _utils = require("../utils");
 var _FormContext = _interopRequireWildcard(require("../Form/FormContext"));
 var _FormGroup = require("../FormGroup/FormGroup");
+var _propTypes2 = require("../internals/propTypes");
 var _useRegisterModel = _interopRequireDefault(require("./useRegisterModel"));
 var _Toggle = _interopRequireDefault(require("../Toggle"));
 var _templateObject;
@@ -37,6 +38,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 +88,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 +162,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 +181,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,
@@ -169,14 +192,14 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 FormControl.displayName = 'FormControl';
 FormControl.propTypes = {
   name: _propTypes.default.string.isRequired,
-  checkTrigger: _propTypes.default.oneOf(['change', 'blur', 'none']),
+  checkTrigger: (0, _propTypes2.oneOf)(['change', 'blur', 'none']),
   checkAsync: _propTypes.default.bool,
   accepter: _propTypes.default.any,
   onChange: _propTypes.default.func,
   onBlur: _propTypes.default.func,
   classPrefix: _propTypes.default.string,
   errorMessage: _propTypes.default.node,
-  errorPlacement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd']),
+  errorPlacement: (0, _propTypes2.oneOf)(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd']),
   value: _propTypes.default.any
 };
 var _default = FormControl;

package/cjs/FormErrorMessage/FormErrorMessage.js

@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
 var _templateObject, _templateObject2;
 /**
  * The `<Form.ErrorMessage>` component is used to display error messages in the form.
@@ -53,7 +54,7 @@ FormErrorMessage.propTypes = {
   classPrefix: _propTypes.default.string,
   children: _propTypes.default.node,
   className: _propTypes.default.string,
-  placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
+  placement: (0, _propTypes2.oneOf)(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
 };
 var _default = FormErrorMessage;
 exports.default = _default;

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

package/cjs/IconButton/IconButton.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = require("../internals/propTypes");
 var _utils = require("../utils");
 var _Button = _interopRequireDefault(require("../Button"));
 /**
@@ -43,7 +44,7 @@ IconButton.propTypes = {
   classPrefix: _propTypes.default.string,
   circle: _propTypes.default.bool,
   children: _propTypes.default.node,
-  placement: _propTypes.default.oneOf(['left', 'right'])
+  placement: (0, _propTypes2.oneOf)(['left', 'right'])
 };
 var _default = IconButton;
 exports.default = _default;

package/cjs/Input/Input.js

@@ -11,8 +11,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _FormGroup = require("../FormGroup/FormGroup");
 var _InputGroup = require("../InputGroup/InputGroup");
-var _Plaintext = _interopRequireDefault(require("../Plaintext"));
+var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
 var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
 /**
  * The `<Input>` component is used to get user input in a text field.
  *
@@ -98,8 +99,8 @@ Input.propTypes = {
   disabled: _propTypes.default.bool,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  size: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xs']),
-  inputRef: _utils.TypeChecker.refType,
+  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),
+  inputRef: _propTypes2.refType,
   onChange: _propTypes.default.func,
   onFocus: _propTypes.default.func,
   onBlur: _propTypes.default.func,

package/cjs/InputGroup/InputGroup.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _InputGroupAddon = _interopRequireDefault(require("./InputGroupAddon"));
 var _InputGroupButton = _interopRequireDefault(require("./InputGroupButton"));
 var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
 var InputGroupContext = /*#__PURE__*/_react.default.createContext(null);
 exports.InputGroupContext = InputGroupContext;
 /**
@@ -79,7 +80,7 @@ InputGroup.propTypes = {
   children: _propTypes.default.node,
   disabled: _propTypes.default.bool,
   inside: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xs'])
+  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs'])
 };
 InputGroup.Addon = _InputGroupAddon.default;
 InputGroup.Button = _InputGroupButton.default;