rsuite 5.58.1 → 5.59.1

package/cjs/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/cjs/Avatar/AvatarIcon.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var AvatarIcon = function AvatarIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    role: "img",
+    "aria-label": "Avatar",
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 448 512",
+    height: "60%",
+    width: "60%"
+  }, props), /*#__PURE__*/_react.default.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"
+  }));
+};
+var _default = AvatarIcon;
+exports.default = _default;

package/cjs/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/cjs/Avatar/useImage.js

@@ -0,0 +1,74 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("../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 = (0, _react.useState)('pending'),
+    status = _useState[0],
+    setStatus = _useState[1];
+  var imgRef = (0, _react.useRef)(null);
+  var flush = function flush() {
+    if (imgRef.current) {
+      imgRef.current.onload = null;
+      imgRef.current.onerror = null;
+      imgRef.current = null;
+    }
+  };
+  var handleLoad = (0, _react.useCallback)(function () {
+    setStatus('loaded');
+    flush();
+  }, []);
+  var handleError = (0, _react.useCallback)(function (event) {
+    setStatus('error');
+    flush();
+    onError === null || onError === void 0 ? void 0 : onError(event);
+  }, [onError]);
+  (0, _react.useEffect)(function () {
+    setStatus(src ? 'loading' : 'pending');
+  }, [src]);
+  var loadImge = (0, _react.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]);
+  (0, _utils.useIsomorphicLayoutEffect)(function () {
+    if (status === 'loading') {
+      loadImge();
+    }
+  }, [loadImge, status]);
+  (0, _react.useEffect)(function () {
+    return flush;
+  }, []);
+  return {
+    loaded: status === 'loaded',
+    status: status
+  };
+};
+var _default = useImage;
+exports.default = _default;

package/cjs/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/cjs/AvatarGroup/AvatarGroup.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = exports.AvatarGroupContext = void 0;
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -28,9 +28,8 @@ var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     children = props.children,
     stack = props.stack,
     size = props.size,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size"]);
-  var _useCustom = (0, _utils.useCustom)('AvatarGroup'),
-    rtl = _useCustom.rtl;
+    style = props.style,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size", "style"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
@@ -42,17 +41,18 @@ var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       size: size
     };
   }, [size]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({}, rest, {
+  var styles = (0, _utils.isIE)() ? style : (0, _extends2.default)({}, style, {
+    gap: spacing
+  });
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    role: "group"
+  }, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    style: styles
   }), /*#__PURE__*/_react.default.createElement(AvatarGroupContext.Provider, {
     value: contextValue
-  }, spacing ? _react.default.Children.map(children, function (child) {
-    var _extends2;
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      style: (0, _extends3.default)((_extends2 = {}, _extends2[rtl ? 'marginLeft' : 'marginRight'] = spacing, _extends2), child.props.style)
-    });
-  }) : children));
+  }, children));
 });
 AvatarGroup.displayName = 'AvatarGroup';
 AvatarGroup.propTypes = {

package/cjs/Checkbox/Checkbox.js

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

package/cjs/DateInput/DateField.js

@@ -180,6 +180,11 @@ 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/cjs/Form/Form.js

@@ -18,10 +18,12 @@ var _FormControlLabel = _interopRequireDefault(require("../FormControlLabel"));
 var _FormErrorMessage = _interopRequireDefault(require("../FormErrorMessage"));
 var _FormGroup = _interopRequireDefault(require("../FormGroup"));
 var _FormHelpText = _interopRequireDefault(require("../FormHelpText"));
-var _useFormClassNames = require("./useFormClassNames");
-var _useSchemaModel2 = _interopRequireDefault(require("./useSchemaModel"));
 var _utils = require("../utils");
 var _propTypes2 = require("../internals/propTypes");
+var _useSchemaModel2 = _interopRequireDefault(require("./hooks/useSchemaModel"));
+var _useFormError2 = _interopRequireDefault(require("./hooks/useFormError"));
+var _useFormValue2 = _interopRequireDefault(require("./hooks/useFormValue"));
+var _useFormClassNames = _interopRequireDefault(require("./hooks/useFormClassNames"));
 /**
  * The `Form` component is a form interface for collecting and validating user input.
  * @see https://rsuitejs.com/components/form
@@ -35,8 +37,8 @@ var Form = /*#__PURE__*/_react.default.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,
@@ -58,7 +60,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     getCombinedModel = _useSchemaModel.getCombinedModel,
     pushFieldRule = _useSchemaModel.pushFieldRule,
     removeFieldRule = _useSchemaModel.removeFieldRule;
-  var classes = (0, _useFormClassNames.useFormClassNames)({
+  var classes = (0, _useFormClassNames.default)({
     classPrefix: classPrefix,
     className: className,
     fluid: fluid,
@@ -67,29 +69,25 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     plaintext: plaintext,
     disabled: disabled
   });
-  var _useControlled = (0, _utils.useControlled)(formValue, formDefaultValue),
-    realFormValue = _useControlled[0],
-    setFormValue = _useControlled[1];
-  var _useControlled2 = (0, _utils.useControlled)(formError, {}),
-    realFormError = _useControlled2[0],
-    setFormError = _useControlled2[1];
-  var realFormValueRef = (0, _react.useRef)(realFormValue);
-  realFormValueRef.current = realFormValue;
-  var realFormErrorRef = (0, _react.useRef)(realFormError);
-  realFormErrorRef.current = realFormError;
-
+  var _useFormValue = (0, _useFormValue2.default)(formValueProp, formDefaultValue),
+    formValue = _useFormValue.formValue,
+    setFormValue = _useFormValue.setFormValue,
+    onRemoveValue = _useFormValue.onRemoveValue;
+  var _useFormError = (0, _useFormError2.default)(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 = (0, _utils.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;
@@ -112,15 +110,14 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    */
   var checkForField = (0, _utils.useEventCallback)(function (fieldName, callback) {
     var _extends2;
-    var formValue = realFormValue || {};
     var model = getCombinedModel();
-    var checkResult = model.checkForField(fieldName, formValue);
-    var formError = (0, _extends6.default)({}, 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 = (0, _extends6.default)({}, formError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
+    setFormError(nextFormError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
     callback === null || callback === void 0 ? void 0 : callback(checkResult);
     if (checkResult.hasError) {
-      onError === null || onError === void 0 ? void 0 : onError(formError);
+      onError === null || onError === void 0 ? void 0 : onError(nextFormError);
     }
     return !checkResult.hasError;
   });
@@ -129,13 +126,12 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * Check form data asynchronously and return a Promise
    */
   var checkAsync = (0, _utils.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 = {};
@@ -163,15 +159,14 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * @param fieldName
    */
   var checkForFieldAsync = (0, _utils.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 = (0, _extends6.default)({}, realFormError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
-      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
-      setFormError(formError);
+      var nextFormError = (0, _extends6.default)({}, formError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
+      setFormError(nextFormError);
       if (checkResult.hasError) {
-        onError === null || onError === void 0 ? void 0 : onError(formError);
+        onError === null || onError === void 0 ? void 0 : onError(nextFormError);
       }
       return checkResult;
     });
@@ -180,7 +175,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setFormError({});
   });
   var cleanErrorForField = (0, _utils.useEventCallback)(function (fieldName) {
-    setFormError((0, _omit.default)(realFormError, [fieldName]));
+    setFormError((0, _omit.default)(formError, [fieldName]));
   });
   var resetErrors = (0, _utils.useEventCallback)(function (formError) {
     if (formError === void 0) {
@@ -201,23 +196,12 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     };
   });
   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
-     */
-    var formError = (0, _omit.default)(realFormErrorRef.current, [name]);
-    realFormErrorRef.current = formError;
+    var formError = onRemoveError(name);
     setFormError(formError);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
   });
   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
-     */
-    var formValue = (0, _omit.default)(realFormValueRef.current, [name]);
-    realFormValueRef.current = formValue;
-    setFormValue(formValue);
+    var formValue = onRemoveValue(name);
     onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
   });
   var handleSubmit = (0, _utils.useEventCallback)(function (event) {
@@ -231,10 +215,10 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   });
   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);
+    var nextFormError = (0, _extends6.default)({}, 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 = (0, _utils.useEventCallback)(function (name) {
     removeFieldError(name);
@@ -247,7 +231,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     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);
+    var nextFormValue = setFieldValue(formValue, name, value);
     setFormValue(nextFormValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);
   });
@@ -260,7 +244,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       readOnly: readOnly,
       plaintext: plaintext,
       disabled: disabled,
-      formError: realFormError,
+      formError: formError,
       nestedField: nestedField,
       removeFieldValue: removeFieldValue,
       removeFieldError: removeFieldError,
@@ -270,7 +254,7 @@ var Form = /*#__PURE__*/_react.default.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.default.createElement("form", (0, _extends6.default)({}, rest, {
     ref: rootRef,
     onSubmit: handleSubmit,
@@ -278,7 +262,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), /*#__PURE__*/_react.default.createElement(_FormContext.default.Provider, {
     value: formContextValue
   }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueContext.Provider, {
-    value: realFormValue
+    value: formValue
   }, children)));
 });
 Form.Control = _FormControl.default;

package/cjs/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/cjs/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/cjs/Form/{useFormClassNames.js → hooks/useFormClassNames.js}

@@ -2,8 +2,8 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useFormClassNames = useFormClassNames;
-var _utils = require("../utils");
+exports.default = useFormClassNames;
+var _utils = require("../../utils");
 /**
  * Take <Form> props and return className for <Form> styles
  */

package/cjs/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>;
+};

package/cjs/Form/hooks/useFormError.js

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = useFormError;
+var _react = require("react");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _utils = require("../../utils");
+function useFormError(formError) {
+  var _useControlled = (0, _utils.useControlled)(formError, {}),
+    realFormError = _useControlled[0],
+    setFormError = _useControlled[1];
+  var realFormErrorRef = (0, _react.useRef)(realFormError);
+  realFormErrorRef.current = realFormError;
+  var onRemoveError = (0, _react.useCallback)(function (name) {
+    /**
+     * when this function is called when the children component is unmount,
+     * it's an old render frame so use Ref to get future error
+     */
+    var formError = (0, _omit.default)(realFormErrorRef.current, [name]);
+    realFormErrorRef.current = formError;
+    setFormError(formError);
+    return formError;
+  }, [setFormError]);
+  return {
+    formError: realFormError,
+    setFormError: setFormError,
+    onRemoveError: onRemoveError
+  };
+}

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

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

package/cjs/Form/hooks/useFormValue.js

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

package/cjs/Form/index.d.ts

@@ -5,5 +5,5 @@ export type { FormErrorMessageProps } from '../FormErrorMessage';
 export type { FormControlLabelProps } from '../FormControlLabel';
 export type { FormHelpTextProps } from '../FormHelpText';
 export type { FormControlProps } from '../FormControl';
-export * from './useFormClassNames';
+export { default as useFormClassNames } from './hooks/useFormClassNames';
 export default Form;

package/cjs/Form/index.js

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

package/cjs/FormControl/FormControl.js

@@ -184,7 +184,7 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     id: controlId ? controlId + "-error-message" : undefined,
     role: "alert",
     "aria-relevant": "all",
-    show: !!messageNode,
+    show: fieldHasError,
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["message-wrapper"]))),
     placement: errorPlacement
   }, messageNode));

package/cjs/FormControl/useRegisterModel.d.ts

@@ -1,4 +1,4 @@
-import type { FieldRuleType } from '../Form/useSchemaModel';
+import type { FieldRuleType } from '../Form/hooks/useSchemaModel';
 import type { CheckType } from 'schema-typed';
 declare function useRegisterModel(name: string, pushFieldRule: (n: string, r: FieldRuleType) => void, removeFieldRule: (n: string) => void, rule?: CheckType<unknown, any>): void;
 export default useRegisterModel;