rsuite 5.58.1 → 5.59.1

package/esm/Avatar/Avatar.d.ts

@@ -1,8 +1,14 @@
 import React from 'react';
-import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../@types/common';
+import { type Size } from '../AvatarGroup/AvatarGroup';
 export interface AvatarProps extends WithAsProps {
-    /** A avatar can have different sizes */
-    size?: TypeAttributes.Size;
+    /**
+     * A avatar can have different sizes.
+     *
+     * @default 'md'
+     * @version xxl and xs added in v5.59.0
+     */
+    size?: Size;
     /**
      * The `src` attribute for the `img` element.
      */
@@ -21,10 +27,29 @@ export interface AvatarProps extends WithAsProps {
      * It can be used to listen for the loading error event.
      */
     imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
-    /** Set avatar shape to circle  */
+    /**
+     * Set avatar shape to circle
+     */
     circle?: boolean;
-    /** This attribute defines an alternative text description of the image */
+    /**
+     * This attribute defines an alternative text description of the image
+     */
     alt?: string;
+    /**
+     * Show a border around the avatar.
+     * @version 5.59.0
+     */
+    bordered?: boolean;
+    /**
+     * Sets the avatar background color.
+     * @version 5.59.0
+     */
+    color?: TypeAttributes.Color;
+    /**
+     * Callback fired when the image failed to load.
+     * @version 5.59.0
+     */
+    onError?: OnErrorEventHandler;
 }
 /**
  * The Avatar component is used to represent user or brand.

package/esm/Avatar/Avatar.js

@@ -1,51 +1,85 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject;
-import React, { useContext } from 'react';
+var _templateObject, _templateObject2;
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames } from '../utils';
+import { useClassNames, useCustom, isIE } from '../utils';
 import { AvatarGroupContext } from '../AvatarGroup/AvatarGroup';
 import { oneOf } from '../internals/propTypes';
+import AvatarIcon from './AvatarIcon';
+import useImage from './useImage';
 /**
  * The Avatar component is used to represent user or brand.
  * @see https://rsuitejs.com/components/avatar
  */
 var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'avatar' : _props$classPrefix,
-    _props$as = props.as,
+  var _extends2;
+  var _useContext = useContext(AvatarGroupContext),
+    groupSize = _useContext.size,
+    spacing = _useContext.spacing;
+  var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
-    sizeProp = props.size,
+    bordered = props.bordered,
+    alt = props.alt,
     className = props.className,
     children = props.children,
+    circle = props.circle,
+    color = props.color,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'avatar' : _props$classPrefix,
+    _props$size = props.size,
+    size = _props$size === void 0 ? groupSize : _props$size,
     src = props.src,
     srcSet = props.srcSet,
     sizes = props.sizes,
+    style = props.style,
     imgProps = props.imgProps,
-    circle = props.circle,
-    alt = props.alt,
-    rest = _objectWithoutPropertiesLoose(props, ["classPrefix", "as", "size", "className", "children", "src", "srcSet", "sizes", "imgProps", "circle", "alt"]);
-  var _useContext = useContext(AvatarGroupContext),
-    size = _useContext.size;
+    onError = props.onError,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "alt", "className", "children", "circle", "color", "classPrefix", "size", "src", "srcSet", "sizes", "style", "imgProps", "onError"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix(sizeProp || size, {
-    circle: circle
+  var classes = merge(className, withClassPrefix(size, color, {
+    circle: circle,
+    bordered: bordered
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
-    ref: ref,
-    className: classes
-  }), src || srcSet ? /*#__PURE__*/React.createElement("img", _extends({}, imgProps, {
-    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["image"]))),
+  var imageProps = _extends({}, imgProps, {
+    alt: alt,
     src: src,
-    sizes: sizes,
     srcSet: srcSet,
-    alt: alt
-  })) : children);
+    sizes: sizes
+  });
+  var _useImage = useImage(_extends({}, imageProps, {
+      onError: onError
+    })),
+    loaded = _useImage.loaded;
+  var _useCustom = useCustom('Avatar'),
+    rtl = _useCustom.rtl;
+  var altComponent = useMemo(function () {
+    if (alt) {
+      return /*#__PURE__*/React.createElement("span", {
+        role: "img",
+        "aria-label": alt
+      }, alt);
+    }
+    return null;
+  }, [alt]);
+  var placeholder = children || altComponent || /*#__PURE__*/React.createElement(AvatarIcon, {
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["icon"])))
+  });
+  var image = loaded ? /*#__PURE__*/React.createElement("img", _extends({}, imageProps, {
+    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["image"])))
+  })) : placeholder;
+  var margin = rtl ? 'marginLeft' : 'marginRight';
+  var insertStyles = isIE() && spacing ? _extends((_extends2 = {}, _extends2[margin] = spacing, _extends2), style) : style;
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    ref: ref,
+    className: classes,
+    style: insertStyles
+  }), src ? image : placeholder);
 });
 Avatar.displayName = 'Avatar';
 Avatar.propTypes = {
@@ -53,7 +87,7 @@ Avatar.propTypes = {
   classPrefix: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.node,
-  size: oneOf(['lg', 'md', 'sm', 'xs']),
+  size: oneOf(['xxl', 'xl', 'lg', 'md', 'sm', 'xs']),
   src: PropTypes.string,
   sizes: PropTypes.string,
   srcSet: PropTypes.string,

package/esm/Avatar/AvatarIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AvatarIcon: (props: React.HTMLAttributes<SVGElement>) => JSX.Element;
+export default AvatarIcon;

package/esm/Avatar/AvatarIcon.js

@@ -0,0 +1,18 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+var AvatarIcon = function AvatarIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    role: "img",
+    "aria-label": "Avatar",
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 448 512",
+    height: "60%",
+    width: "60%"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"
+  }));
+};
+export default AvatarIcon;

package/esm/Avatar/useImage.d.ts

@@ -0,0 +1,39 @@
+import { ImgHTMLAttributes } from 'react';
+interface UseImageProps {
+    /**
+     * The image `src` attribute
+     */
+    src?: string;
+    /**
+     * The image `srcSet` attribute
+     */
+    srcSet?: string;
+    /**
+     * The image `sizes` attribute
+     */
+    sizes?: string;
+    /**
+     * The image `crossOrigin` attribute
+     */
+    crossOrigin?: ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
+    /**
+     * Callback fired when the image failed to load.
+     */
+    onError?: OnErrorEventHandler;
+}
+declare type Status = 'pending' | 'loading' | 'error' | 'loaded';
+/**
+ * A hook that loads an image and returns the status of the image.
+ *
+ * @example
+ * ```jsx
+ * const { loaded } = useImage({ src:'https://example.com/image.jpg' });
+ *
+ * return loaded ? <img src="https://example.com/image.jpg" /> : <Placeholder />;
+ * ```
+ */
+declare const useImage: (props: UseImageProps) => {
+    loaded: boolean;
+    status: Status;
+};
+export default useImage;

package/esm/Avatar/useImage.js

@@ -0,0 +1,69 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../utils';
+/**
+ * A hook that loads an image and returns the status of the image.
+ *
+ * @example
+ * ```jsx
+ * const { loaded } = useImage({ src:'https://example.com/image.jpg' });
+ *
+ * return loaded ? <img src="https://example.com/image.jpg" /> : <Placeholder />;
+ * ```
+ */
+var useImage = function useImage(props) {
+  var src = props.src,
+    srcSet = props.srcSet,
+    sizes = props.sizes,
+    crossOrigin = props.crossOrigin,
+    onError = props.onError;
+  var _useState = useState('pending'),
+    status = _useState[0],
+    setStatus = _useState[1];
+  var imgRef = useRef(null);
+  var flush = function flush() {
+    if (imgRef.current) {
+      imgRef.current.onload = null;
+      imgRef.current.onerror = null;
+      imgRef.current = null;
+    }
+  };
+  var handleLoad = useCallback(function () {
+    setStatus('loaded');
+    flush();
+  }, []);
+  var handleError = useCallback(function (event) {
+    setStatus('error');
+    flush();
+    onError === null || onError === void 0 ? void 0 : onError(event);
+  }, [onError]);
+  useEffect(function () {
+    setStatus(src ? 'loading' : 'pending');
+  }, [src]);
+  var loadImge = useCallback(function () {
+    if (!src) {
+      return;
+    }
+    var img = new Image();
+    img.onload = handleLoad;
+    img.onerror = handleError;
+    if (src) img.src = src;
+    if (srcSet) img.srcset = srcSet;
+    if (sizes) img.sizes = sizes;
+    if (crossOrigin) img.crossOrigin = crossOrigin;
+    imgRef.current = img;
+  }, [crossOrigin, handleError, handleLoad, sizes, src, srcSet]);
+  useIsomorphicLayoutEffect(function () {
+    if (status === 'loading') {
+      loadImge();
+    }
+  }, [loadImge, status]);
+  useEffect(function () {
+    return flush;
+  }, []);
+  return {
+    loaded: status === 'loaded',
+    status: status
+  };
+};
+export default useImage;

package/esm/AvatarGroup/AvatarGroup.d.ts

@@ -1,15 +1,24 @@
 import React from 'react';
-import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+export declare type Size = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export interface AvatarGroupProps extends WithAsProps {
-    /** Render all avatars as stacks */
+    /**
+     * Render all avatars as stacks
+     */
     stack?: boolean;
-    /** Set the spacing of the avatar */
+    /**
+     * Set the spacing of the avatar
+     */
     spacing?: number;
-    /** Set the size of all avatars. */
-    size?: TypeAttributes.Size;
+    /**
+     * Set the size of all avatars.
+     * @version xxl and xs added in v5.59.0
+     */
+    size?: Size;
 }
 export declare const AvatarGroupContext: React.Context<{
-    size?: TypeAttributes.Size | undefined;
+    size?: Size | undefined;
+    spacing?: number | undefined;
 }>;
 /**
  * The AvatarGroup component is used to represent a collection of avatars.

package/esm/AvatarGroup/AvatarGroup.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames, useCustom } from '../utils';
+import { useClassNames, isIE } from '../utils';
 import { oneOf } from '../internals/propTypes';
 export var AvatarGroupContext = /*#__PURE__*/React.createContext({});
 
@@ -21,9 +21,8 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     children = props.children,
     stack = props.stack,
     size = props.size,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size"]);
-  var _useCustom = useCustom('AvatarGroup'),
-    rtl = _useCustom.rtl;
+    style = props.style,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size", "style"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
@@ -35,17 +34,18 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       size: size
     };
   }, [size]);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  var styles = isIE() ? style : _extends({}, style, {
+    gap: spacing
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    role: "group"
+  }, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    style: styles
   }), /*#__PURE__*/React.createElement(AvatarGroupContext.Provider, {
     value: contextValue
-  }, spacing ? React.Children.map(children, function (child) {
-    var _extends2;
-    return /*#__PURE__*/React.cloneElement(child, {
-      style: _extends((_extends2 = {}, _extends2[rtl ? 'marginLeft' : 'marginRight'] = spacing, _extends2), child.props.style)
-    });
-  }) : children));
+  }, children));
 });
 AvatarGroup.displayName = 'AvatarGroup';
 AvatarGroup.propTypes = {

package/esm/Checkbox/Checkbox.js

@@ -131,7 +131,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })), /*#__PURE__*/React.createElement("span", {
     className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["inner"]))),
     "aria-hidden": true,
-    role: "presentation"
+    "data-testid": "checkbox-control-inner"
   }));
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     ref: ref,

package/esm/DateInput/DateField.js

@@ -174,6 +174,11 @@ export var useDateField = function useDateField(format, localize, date) {
       if (isEmptyValue(type, value)) {
         return null;
       }
+
+      // Invalid Date
+      return new Date('');
+    } else if (type === 'day' && value === 0) {
+      // Invalid Date. If the type is day and the value is 0, it is considered an invalid date.
       return new Date('');
     }
     if (type === 'meridian' && typeof hour === 'number') {

package/esm/Form/Form.js

@@ -12,10 +12,12 @@ import FormControlLabel from '../FormControlLabel';
 import FormErrorMessage from '../FormErrorMessage';
 import FormGroup from '../FormGroup';
 import FormHelpText from '../FormHelpText';
-import { useFormClassNames } from './useFormClassNames';
-import useSchemaModel from './useSchemaModel';
-import { useControlled, useEventCallback } from '../utils';
+import { useEventCallback } from '../utils';
 import { oneOf } from '../internals/propTypes';
+import useSchemaModel from './hooks/useSchemaModel';
+import useFormError from './hooks/useFormError';
+import useFormValue from './hooks/useFormValue';
+import useFormClassNames from './hooks/useFormClassNames';
 /**
  * The `Form` component is a form interface for collecting and validating user input.
  * @see https://rsuitejs.com/components/form
@@ -29,8 +31,8 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,
     _props$formDefaultVal = props.formDefaultValue,
     formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,
-    formValue = props.formValue,
-    formError = props.formError,
+    formValueProp = props.formValue,
+    formErrorProp = props.formError,
     fluid = props.fluid,
     _props$nestedField = props.nestedField,
     nestedField = _props$nestedField === void 0 ? false : _props$nestedField,
@@ -61,29 +63,25 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     plaintext: plaintext,
     disabled: disabled
   });
-  var _useControlled = useControlled(formValue, formDefaultValue),
-    realFormValue = _useControlled[0],
-    setFormValue = _useControlled[1];
-  var _useControlled2 = useControlled(formError, {}),
-    realFormError = _useControlled2[0],
-    setFormError = _useControlled2[1];
-  var realFormValueRef = useRef(realFormValue);
-  realFormValueRef.current = realFormValue;
-  var realFormErrorRef = useRef(realFormError);
-  realFormErrorRef.current = realFormError;
-
+  var _useFormValue = useFormValue(formValueProp, formDefaultValue),
+    formValue = _useFormValue.formValue,
+    setFormValue = _useFormValue.setFormValue,
+    onRemoveValue = _useFormValue.onRemoveValue;
+  var _useFormError = useFormError(formErrorProp),
+    formError = _useFormError.formError,
+    setFormError = _useFormError.setFormError,
+    onRemoveError = _useFormError.onRemoveError;
   /**
    * 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 formValue = realFormValue || {};
     var formError = {};
     var errorCount = 0;
     var model = getCombinedModel();
-    Object.keys(model.spec).forEach(function (key) {
-      var checkResult = model.checkForField(key, formValue);
+    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;
@@ -106,15 +104,14 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
   var checkForField = useEventCallback(function (fieldName, callback) {
     var _extends2;
-    var formValue = realFormValue || {};
     var model = getCombinedModel();
-    var checkResult = model.checkForField(fieldName, formValue);
-    var formError = _extends({}, realFormError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
-    setFormError(formError);
-    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
+    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(formError);
+      onError === null || onError === void 0 ? void 0 : onError(nextFormError);
     }
     return !checkResult.hasError;
   });
@@ -123,13 +120,12 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * Check form data asynchronously and return a Promise
    */
   var checkAsync = useEventCallback(function () {
-    var formValue = realFormValue || {};
     var promises = [];
     var keys = [];
     var model = getCombinedModel();
-    Object.keys(model.spec).forEach(function (key) {
+    Object.keys(model.getSchemaSpec()).forEach(function (key) {
       keys.push(key);
-      promises.push(model.checkForFieldAsync(key, formValue));
+      promises.push(model.checkForFieldAsync(key, formValue || {}));
     });
     return Promise.all(promises).then(function (values) {
       var formError = {};
@@ -157,15 +153,14 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * @param fieldName
    */
   var checkForFieldAsync = useEventCallback(function (fieldName) {
-    var formValue = realFormValue || {};
     var model = getCombinedModel();
-    return model.checkForFieldAsync(fieldName, formValue).then(function (checkResult) {
+    return model.checkForFieldAsync(fieldName, formValue || {}).then(function (checkResult) {
       var _extends3;
-      var formError = _extends({}, realFormError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
-      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
-      setFormError(formError);
+      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(formError);
+        onError === null || onError === void 0 ? void 0 : onError(nextFormError);
       }
       return checkResult;
     });
@@ -174,7 +169,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFormError({});
   });
   var cleanErrorForField = useEventCallback(function (fieldName) {
-    setFormError(omit(realFormError, [fieldName]));
+    setFormError(omit(formError, [fieldName]));
   });
   var resetErrors = useEventCallback(function (formError) {
     if (formError === void 0) {
@@ -195,23 +190,12 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   });
   var removeFieldError = 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
-     */
-    var formError = omit(realFormErrorRef.current, [name]);
-    realFormErrorRef.current = formError;
+    var formError = onRemoveError(name);
     setFormError(formError);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
   });
   var removeFieldValue = 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
-     */
-    var formValue = omit(realFormValueRef.current, [name]);
-    realFormValueRef.current = formValue;
-    setFormValue(formValue);
+    var formValue = onRemoveValue(name);
     onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
   });
   var handleSubmit = useEventCallback(function (event) {
@@ -225,10 +209,10 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var handleFieldError = useEventCallback(function (name, errorMessage) {
     var _extends4;
-    var formError = _extends({}, 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);
+    var nextFormError = _extends({}, formError, (_extends4 = {}, _extends4[name] = errorMessage, _extends4));
+    setFormError(nextFormError);
+    onError === null || onError === void 0 ? void 0 : onError(nextFormError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
   });
   var handleFieldSuccess = useEventCallback(function (name) {
     removeFieldError(name);
@@ -241,7 +225,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return _extends({}, formValue, (_extends5 = {}, _extends5[fieldName] = fieldValue, _extends5));
   };
   var handleFieldChange = useEventCallback(function (name, value, event) {
-    var nextFormValue = setFieldValue(realFormValue, name, value);
+    var nextFormValue = setFieldValue(formValue, name, value);
     setFormValue(nextFormValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);
   });
@@ -254,7 +238,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       readOnly: readOnly,
       plaintext: plaintext,
       disabled: disabled,
-      formError: realFormError,
+      formError: formError,
       nestedField: nestedField,
       removeFieldValue: removeFieldValue,
       removeFieldError: removeFieldError,
@@ -264,7 +248,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onFieldError: handleFieldError,
       onFieldSuccess: handleFieldSuccess
     };
-  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, realFormError, nestedField, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
+  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, formError, nestedField, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
   return /*#__PURE__*/React.createElement("form", _extends({}, rest, {
     ref: rootRef,
     onSubmit: handleSubmit,
@@ -272,7 +256,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: formContextValue
   }, /*#__PURE__*/React.createElement(FormValueContext.Provider, {
-    value: realFormValue
+    value: formValue
   }, children)));
 });
 Form.Control = FormControl;

package/esm/Form/FormContext.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TypeAttributes } from '../@types/common';
 import type { Schema } from 'schema-typed';
-import type { FieldRuleType } from './useSchemaModel';
+import type { FieldRuleType } from './hooks/useSchemaModel';
 interface TrulyFormContextValue<T = Record<string, any>, errorMsgType = any, E = {
     [P in keyof T]?: errorMsgType;
 }> {

package/esm/Form/{useFormClassNames.d.ts → hooks/useFormClassNames.d.ts}

@@ -1,5 +1,5 @@
-import type { FormProps } from './Form';
+import type { FormProps } from '../Form';
 /**
  * Take <Form> props and return className for <Form> styles
  */
-export declare function useFormClassNames({ classPrefix, className, fluid, layout, readOnly, plaintext, disabled }: Pick<FormProps, 'classPrefix' | 'className' | 'fluid' | 'layout' | 'readOnly' | 'plaintext' | 'disabled'>): string;
+export default function useFormClassNames({ classPrefix, className, fluid, layout, readOnly, plaintext, disabled }: Pick<FormProps, 'classPrefix' | 'className' | 'fluid' | 'layout' | 'readOnly' | 'plaintext' | 'disabled'>): string;

package/esm/Form/{useFormClassNames.js → hooks/useFormClassNames.js}

@@ -1,9 +1,9 @@
 'use client';
-import { useClassNames } from '../utils';
+import { useClassNames } from '../../utils';
 /**
  * Take <Form> props and return className for <Form> styles
  */
-export function useFormClassNames(_ref) {
+export default function useFormClassNames(_ref) {
   var _ref$classPrefix = _ref.classPrefix,
     classPrefix = _ref$classPrefix === void 0 ? 'form' : _ref$classPrefix,
     className = _ref.className,

package/esm/Form/hooks/useFormError.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="lodash" />
+export default function useFormError(formError: any): {
+    formError: any;
+    setFormError: (value: any) => void;
+    onRemoveError: (name: string) => import("lodash").Omit<any, string>;
+};