rsuite 5.19.0 → 5.20.0

package/esm/Animation/Transition.d.ts

@@ -36,7 +36,7 @@ interface TransitionState {
 }
 export declare const transitionPropTypes: {
     animation: PropTypes.Requireable<boolean>;
-    children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    children: PropTypes.Requireable<string | number | boolean | ((...args: any[]) => any) | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     className: PropTypes.Requireable<string>;
     in: PropTypes.Requireable<boolean>;
     unmountOnExit: PropTypes.Requireable<boolean>;
@@ -59,7 +59,7 @@ declare type EventToken = {
 declare class Transition extends React.Component<TransitionProps, TransitionState> {
     static propTypes: {
         animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<string | number | boolean | ((...args: any[]) => any) | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         className: PropTypes.Requireable<string>;
         in: PropTypes.Requireable<boolean>;
         unmountOnExit: PropTypes.Requireable<boolean>;

package/esm/Cascader/Cascader.js

@@ -94,6 +94,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       valueToPaths = _usePaths.valueToPaths,
       columnData = _usePaths.columnData,
       addColumn = _usePaths.addColumn,
+      romoveColumnByIndex = _usePaths.romoveColumnByIndex,
       setValueToPaths = _usePaths.setValueToPaths,
       setColumnData = _usePaths.setColumnData,
       setSelectedPaths = _usePaths.setSelectedPaths,
@@ -257,9 +258,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleSelect = function handleSelect(node, cascadePaths, isLeafNode, event) {
     var _node$childrenKey, _node$childrenKey2, _triggerRef$current2;
 
-    var nextValue = node[valueKey];
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
-    setSelectedPaths(cascadePaths); // Lazy load node's children
+    setSelectedPaths(cascadePaths);
+    var nextValue = node[valueKey];
+    var columnIndex = cascadePaths.length; // Lazy load node's children
 
     if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {
       node.loading = true;
@@ -271,16 +273,19 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
           node[childrenKey] = data;
 
           if (targetRef.current) {
-            addColumn(data, cascadePaths.length);
+            addColumn(data, columnIndex);
           }
         });
       } else {
         node.loading = false;
         node[childrenKey] = children;
-        addColumn(children, cascadePaths.length);
+        addColumn(children, columnIndex);
       }
     } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {
-      addColumn(node[childrenKey], cascadePaths.length);
+      addColumn(node[childrenKey], columnIndex);
+    } else {
+      // Removes subsequent columns of the current column when the clicked node is a leaf node.
+      romoveColumnByIndex(columnIndex);
     }
 
     if (isLeafNode) {

package/esm/Cascader/utils.d.ts

@@ -14,4 +14,5 @@ export declare function usePaths(props: CascaderProps): {
     setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
     setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
     addColumn: (column: ItemDataType[], index: number) => void;
+    romoveColumnByIndex: (index: number) => void;
 };

package/esm/Cascader/utils.js

@@ -111,6 +111,15 @@ export function usePaths(props) {
   function addColumn(column, index) {
     setColumnData([].concat(slice(columnData, 0, index), [column]));
   }
+  /**
+   * Remove subsequent columns of the specified column
+   * @param index
+   */
+
+
+  function romoveColumnByIndex(index) {
+    setColumnData([].concat(slice(columnData, 0, index)));
+  }
   /**
    * Enforce update of columns and paths.
    * @param nextValue  Selected value
@@ -146,6 +155,7 @@ export function usePaths(props) {
     setValueToPaths: setValueToPaths,
     setColumnData: setColumnData,
     setSelectedPaths: setSelectedPaths,
-    addColumn: addColumn
+    addColumn: addColumn,
+    romoveColumnByIndex: romoveColumnByIndex
   };
 }

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -6,18 +6,17 @@ import _omit from "lodash/omit";
 import _isFunction from "lodash/isFunction";
 import _pick from "lodash/pick";
 import _isNil from "lodash/isNil";
-import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { List, AutoSizer } from '../Picker/VirtualizedList';
 import CheckTreeNode from './CheckTreeNode';
 import TreeContext from '../Tree/TreeContext';
 import { getTreeNodeIndent } from '../utils/treeUtils';
-import { createChainedFunction, useCustom, useClassNames, useControlled, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
+import { createChainedFunction, useCustom, useClassNames, useControlled, KEY_VALUES, mergeRefs } from '../utils';
 import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePublicMethods, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes, useToggleKeyDownEvent } from '../Picker';
 import { isEveryChildChecked, isSomeNodeHasChildren, isAllSiblingNodeUncheckable, isEveryFirstLevelNodeUncheckable, getFormattedTree, getDisabledState, getCheckTreePickerDefaultValue, getSelectedItems, isNodeUncheckable } from './utils';
 import { hasVisibleChildren, getExpandWhenSearching, useTreeSearch, useTreeNodeRefs, getDefaultExpandItemValues, useFlattenTreeData, focusNextItem, getFocusableItems, focusPreviousItem, toggleExpand, getActiveItem, useGetTreeNodeChildren, focusToActiveTreeNode, focusTreeNode, leftArrowHandler, rightArrowHandler, isSearching } from '../utils/treeUtils';
-import { maxTreeHeight } from '../TreePicker/TreePicker';
 var emptyArray = [];
 var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
@@ -60,6 +59,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
       _props$height = props.height,
       height = _props$height === void 0 ? 360 : _props$height,
+      _props$menuMaxHeight = props.menuMaxHeight,
+      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
       menuStyle = props.menuStyle,
       _props$searchable = props.searchable,
       searchable = _props$searchable === void 0 ? true : _props$searchable,
@@ -91,7 +92,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderValue = props.renderValue,
       renderTreeIcon = props.renderTreeIcon,
       renderTreeNode = props.renderTreeNode,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuMaxHeight", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
 
   var _useContext = useContext(TreeContext),
       inline = _useContext.inline;
@@ -221,11 +222,11 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value: node[valueKey],
       label: node[labelKey],
       layer: layer,
-      focus: shallowEqual(focusItemValue, node[valueKey]),
+      focus: focusItemValue === node[valueKey],
       expand: node.expand,
       visible: node.visible,
       loading: loadingNodeValues.some(function (item) {
-        return shallowEqual(item, node[valueKey]);
+        return item === node[valueKey];
       }),
       disabled: getDisabledState(flattenNodes, node, {
         disabledItemValues: disabledItemValues,
@@ -363,18 +364,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(selectedValues, event);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, selectedValues, event);
   }, [cascade, valueKey, flattenNodes, isControlled, uncheckableItemValues, setValue, onChange, onSelect, toggleChecked, unSerializeList]);
-
-  var hasValue = function hasValue() {
-    var selectedValues = Object.keys(flattenNodes).map(function (refKey) {
-      return flattenNodes[refKey][valueKey];
-    }).filter(function (item) {
-      return value.some(function (v) {
-        return shallowEqual(v, item);
-      });
-    });
-    return !!selectedValues.length;
-  };
-
   var handleOpen = useCallback(function () {
     var _triggerRef$current, _triggerRef$current$o;
 
@@ -426,22 +415,26 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleClean = useCallback(function (event) {
     var target = event.target; // exclude searchBar
 
-    if (target.matches('div[role="searchbox"] > input')) {
+    if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
       return;
     }
 
     setActiveNode(null);
-    setValue([]);
     setFocusItemValue(null);
-    unSerializeList({
-      nodes: flattenNodes,
-      key: 'check',
-      value: [],
-      cascade: cascade,
-      uncheckableItemValues: uncheckableItemValues
-    });
+
+    if (!isControlled) {
+      setValue([]);
+      unSerializeList({
+        nodes: flattenNodes,
+        key: 'check',
+        value: [],
+        cascade: cascade,
+        uncheckableItemValues: uncheckableItemValues
+      });
+    }
+
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
-  }, [cascade, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues]);
+  }, [cascade, cleanable, disabled, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues, isControlled]);
   var handleFocusItem = useCallback(function (key) {
     var focusableItems = getFocusableItems(filteredData, {
       disabledItemValues: disabledItemValues,
@@ -567,7 +560,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
       /**
-       * spread operator dont copy unenumerable properties
+       * spread operator don't copy unenumerable properties
        * so we need to copy them manually
        */
       parent: node.parent,
@@ -620,6 +613,11 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var expand = getExpandWhenSearching(searchKeywordState, expandItemValues.includes(node[valueKey]));
 
       var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
+        /**
+         * spread operator don't copy unenumerable properties
+         * so we need to copy them manually
+         */
+        parent: node.parent,
         expand: expand
       }), layer), {
         hasChildren: node.hasChildren
@@ -665,7 +663,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: treeNodesClass
     }, virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
-      defaultHeight: inline ? height : maxTreeHeight,
+      defaultHeight: inline ? height : menuMaxHeight,
       style: {
         width: 'auto',
         height: 'auto'
@@ -696,13 +694,10 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       top: top
     });
 
-    var styles = virtualized ? _extends({
-      height: height
-    }, mergedMenuStyle) : _extends({}, mergedMenuStyle);
     return /*#__PURE__*/React.createElement(PickerOverlay, {
       autoWidth: menuAutoWidth,
       className: classes,
-      style: styles,
+      style: mergedMenuStyle,
       ref: mergeRefs(overlayRef, speakerRef),
       onKeyDown: onPickerKeydown,
       target: triggerRef
@@ -713,16 +708,18 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inputRef: searchInputRef
     }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
+
+  var selectedItems = useMemo(function () {
+    return getSelectedItems(flattenNodes, value);
+  }, [flattenNodes, value]);
   /**
    * 1.Have a value and the value is valid.
    * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
    */
 
-
-  var hasValidValue = hasValue() || value.length > 0 && _isFunction(renderValue);
+  var hasValidValue = selectedItems.length > 0 || value.length > 0 && _isFunction(renderValue);
 
   var selectedElement = placeholder;
-  var selectedItems = getSelectedItems(flattenNodes, value, valueKey);
 
   if (hasValidValue) {
     selectedElement = /*#__PURE__*/React.createElement(SelectedElement, {

package/esm/CheckTreePicker/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CheckTreePickerProps } from './CheckTreePicker';
+import { CheckTreePickerProps, ValueType } from './CheckTreePicker';
 import { CheckStateType } from '../utils';
 export interface TreeNodeType {
     uncheckable?: boolean;
@@ -40,5 +40,5 @@ export declare function isNodeUncheckable(node: any, props: Required<Pick<CheckT
 export declare function getFormattedTree(data: any[], nodes: TreeNodesType, props: Required<Pick<CheckTreePickerProps, 'childrenKey' | 'cascade'>>): any[];
 export declare function getDisabledState(nodes: TreeNodesType, node: TreeNodeType, props: Required<Pick<CheckTreePickerProps, 'disabledItemValues' | 'valueKey'>>): boolean;
 export declare function getCheckTreePickerDefaultValue(value: any[], uncheckableItemValues: any[]): any[];
-export declare function getSelectedItems(nodes: TreeNodesType, value: (string | number)[], valueKey: string): TreeNodeType[];
+export declare function getSelectedItems(nodes: TreeNodesType, values: ValueType): TreeNodeType[];
 export declare function getNodeCheckState({ nodes, node, cascade, childrenKey }: any): CheckStateType;

package/esm/CheckTreePicker/utils.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _isUndefined from "lodash/isUndefined";
 import _isNil from "lodash/isNil";
-import { shallowEqual, CHECK_STATE } from '../utils';
-import { getChildrenByFlattenNodes } from '../utils/treeUtils';
+import { CHECK_STATE } from '../utils';
+import { getChildrenByFlattenNodes, getNodeFormattedRefKey } from '../utils/treeUtils';
 import { attachParent } from '../utils/attachParent';
 export function isEveryChildChecked(nodes, parent) {
   if (_isNil(parent.refKey) || _isNil(nodes[parent.refKey])) {
@@ -98,7 +98,7 @@ export function isNodeUncheckable(node, props) {
       uncheckableItemValues = _props$uncheckableIte === void 0 ? [] : _props$uncheckableIte,
       valueKey = props.valueKey;
   return uncheckableItemValues.some(function (value) {
-    return shallowEqual(node[valueKey], value);
+    return node[valueKey] === value;
   });
 }
 export function getFormattedTree(data, nodes, props) {
@@ -142,7 +142,7 @@ export function getDisabledState(nodes, node, props) {
   }
 
   return disabledItemValues.some(function (value) {
-    return node.refKey && shallowEqual(nodes[node.refKey][valueKey], value);
+    return node.refKey && nodes[node.refKey][valueKey] === value;
   });
 }
 export function getCheckTreePickerDefaultValue(value, uncheckableItemValues) {
@@ -154,18 +154,17 @@ export function getCheckTreePickerDefaultValue(value, uncheckableItemValues) {
 
   return [];
 }
-export function getSelectedItems(nodes, value, valueKey) {
-  var checkItems = [];
-  Object.keys(nodes).map(function (refKey) {
+export function getSelectedItems(nodes, values) {
+  var checkedItems = [];
+  values.forEach(function (value) {
+    var refKey = getNodeFormattedRefKey(value);
     var node = nodes[refKey];
 
-    if (value.some(function (value) {
-      return shallowEqual(node[valueKey], value);
-    })) {
-      checkItems.push(node);
+    if (!_isNil(node)) {
+      checkedItems.push(node);
     }
   });
-  return checkItems;
+  return checkedItems;
 }
 export function getNodeCheckState(_ref) {
   var nodes = _ref.nodes,

package/esm/DOMHelper/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import * as helpers from 'dom-lib';
 export * from 'dom-lib';
 declare const DOMHelper: {
@@ -10,8 +11,8 @@ declare const DOMHelper: {
     removeClass: (target: Element, className: string) => Element;
     hasClass: (target: Element, className: string) => boolean;
     toggleClass: (target: Element, className: string) => Element;
-    cancelAnimationFramePolyfill: typeof clearTimeout;
-    requestAnimationFramePolyfill: typeof requestAnimationFrame;
+    cancelAnimationFramePolyfill: typeof cancelAnimationFrame | typeof clearTimeout;
+    requestAnimationFramePolyfill: typeof requestAnimationFrame | ((callback: (t: number) => void) => NodeJS.Timeout);
     getAnimationEnd: typeof helpers.getAnimationEnd;
     ownerDocument: (node: Element | null) => Document;
     ownerWindow: (componentOrElement: Element) => Window;

package/esm/DatePicker/DatePicker.js

@@ -12,6 +12,7 @@ import useCalendarDate from '../Calendar/useCalendarDate';
 import Toolbar from './Toolbar';
 import { composeFunctions, createChainedFunction, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
 import { PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
+import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
 var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -390,6 +391,13 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: triggerRef,
     placement: placement,
+    onClose: function onClose(cause) {
+      // Unless overlay is closing on user clicking "OK" button,
+      // reset the selected date on calendar panel
+      if (cause !== OverlayCloseCause.ImperativeHandle) {
+        resetCalendarDate();
+      }
+    },
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
     speaker: renderDropdownMenu

package/esm/DatePicker/PredefinedRanges.js

@@ -29,6 +29,11 @@ var PredefinedRanges = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return item.label === key;
     });
   }, [calendarDate]);
+
+  if (ranges.length === 0) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement(Stack, _extends({
     className: className,
     ref: ref,

package/esm/DateRangePicker/DateRangePicker.js

@@ -573,6 +573,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onToggleMeridian: handleToggleMeridian,
       renderTitle: renderTitle
     };
+    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+    })) || [];
+    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.createElement(PickerOverlay, {
       role: "dialog",
       className: classes,
@@ -583,13 +589,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: panelClasses
     }, /*#__PURE__*/React.createElement(Stack, {
       alignItems: "flex-start"
-    }, /*#__PURE__*/React.createElement(PredefinedRanges, {
+    }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
       direction: "column",
       spacing: 0,
       className: prefix('daterange-predefined'),
-      ranges: (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
-        return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
-      })) || [],
+      ranges: sideRanges,
       calendarDate: calendarDate,
       locale: locale,
       disabledShortcut: disabledShortcutButton,
@@ -612,9 +616,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hideOkBtn: oneTap,
       onOk: handleOK,
       onClickShortcut: handleShortcutPageDate,
-      ranges: 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;
-      })
+      ranges: bottomRanges
     })))));
   };
 

package/esm/Form/Form.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useMemo, useCallback, useState, useImperativeHandle, useRef } from 'react';
+import React, { useMemo, useCallback, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import isUndefined from 'lodash/isUndefined';
 import omit from 'lodash/omit';
 import { SchemaModel } from 'schema-typed';
 import FormContext, { FormValueContext } from './FormContext';
@@ -13,6 +12,7 @@ import FormGroup from '../FormGroup';
 import FormHelpText from '../FormHelpText';
 import { useFormClassNames } from './useFormClassNames';
 import useSchemaModel from './useSchemaModel';
+import { useControlled } from '../utils';
 var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$checkTrigger = props.checkTrigger,
       checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,
@@ -55,20 +55,18 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disabled
   });
 
-  var _useState = useState(formDefaultValue),
-      _formValue = _useState[0],
-      setFormValue = _useState[1];
+  var _useControlled = useControlled(formValue, formDefaultValue),
+      realFormValue = _useControlled[0],
+      setFormValue = _useControlled[1];
 
-  var _useState2 = useState(formError || {}),
-      _formError = _useState2[0],
-      setFormError = _useState2[1];
+  var _useControlled2 = useControlled(formError, {}),
+      realFormError = _useControlled2[0],
+      setFormError = _useControlled2[1];
 
-  var getFormValue = useCallback(function () {
-    return isUndefined(formValue) ? _formValue : formValue;
-  }, [_formValue, formValue]);
-  var getFormError = useCallback(function () {
-    return isUndefined(formError) ? _formError : formError;
-  }, [formError, _formError]);
+  var realFormValueRef = useRef(realFormValue);
+  realFormValueRef.current = realFormValue;
+  var realFormErrorRef = useRef(realFormError);
+  realFormErrorRef.current = realFormError;
   /**
    * Validate the form data and return a boolean.
    * The error message after verification is returned in the callback.
@@ -76,7 +74,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
 
   var check = useCallback(function (callback) {
-    var formValue = getFormValue() || {};
+    var formValue = realFormValue || {};
     var formError = {};
     var errorCount = 0;
     var model = getCombinedModel();
@@ -98,7 +96,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     return true;
-  }, [getFormValue, getCombinedModel, onCheck, onError]);
+  }, [realFormValue, getCombinedModel, setFormError, onCheck, onError]);
   /**
    * Check the data field
    * @param fieldName
@@ -108,11 +106,11 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var checkForField = useCallback(function (fieldName, callback) {
     var _extends2;
 
-    var formValue = getFormValue() || {};
+    var formValue = realFormValue || {};
     var model = getCombinedModel();
     var checkResult = model.checkForField(fieldName, formValue);
 
-    var formError = _extends({}, getFormError(), (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
+    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);
@@ -123,13 +121,13 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     return !checkResult.hasError;
-  }, [getFormValue, getCombinedModel, getFormError, onCheck, onError]);
+  }, [realFormValue, getCombinedModel, realFormError, setFormError, onCheck, onError]);
   /**
    * Check form data asynchronously and return a Promise
    */
 
   var checkAsync = useCallback(function () {
-    var formValue = getFormValue() || {};
+    var formValue = realFormValue || {};
     var promises = [];
     var keys = [];
     var model = getCombinedModel();
@@ -160,19 +158,19 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
         formError: formError
       };
     });
-  }, [getFormValue, getCombinedModel, onCheck, onError]);
+  }, [realFormValue, getCombinedModel, onCheck, setFormError, onError]);
   /**
    * Asynchronously check form fields and return Promise
    * @param fieldName
    */
 
   var checkForFieldAsync = useCallback(function (fieldName) {
-    var formValue = getFormValue() || {};
+    var formValue = realFormValue || {};
     var model = getCombinedModel();
     return model.checkForFieldAsync(fieldName, formValue).then(function (checkResult) {
       var _extends3;
 
-      var formError = _extends({}, getFormError(), (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
+      var formError = _extends({}, realFormError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
 
       onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
       setFormError(formError);
@@ -183,20 +181,20 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
       return checkResult;
     });
-  }, [getFormValue, getCombinedModel, getFormError, onCheck, onError]);
+  }, [realFormValue, getCombinedModel, realFormError, onCheck, setFormError, onError]);
   var cleanErrors = useCallback(function () {
     setFormError({});
-  }, []);
+  }, [setFormError]);
   var cleanErrorForField = useCallback(function (fieldName) {
-    setFormError(omit(_formError, [fieldName]));
-  }, [_formError]);
+    setFormError(omit(realFormError, [fieldName]));
+  }, [realFormError, setFormError]);
   var resetErrors = useCallback(function (formError) {
     if (formError === void 0) {
       formError = {};
     }
 
     setFormError(formError);
-  }, []);
+  }, [setFormError]);
   useImperativeHandle(ref, function () {
     return {
       root: rootRef.current,
@@ -210,15 +208,23 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   });
   var removeFieldError = useCallback(function (name) {
-    var formError = omit(getFormError(), [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]);
     setFormError(formError);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
-  }, [getFormError, onCheck]);
+  }, [onCheck, setFormError]);
   var removeFieldValue = useCallback(function (name) {
-    var formValue = omit(getFormValue(), [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]);
     setFormValue(formValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
-  }, [getFormValue, onChange]);
+  }, [onChange, setFormValue]);
   var handleSubmit = useCallback(function (event) {
     if (disabled || readOnly || plaintext) {
       return;
@@ -232,25 +238,25 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleFieldError = useCallback(function (name, errorMessage) {
     var _extends4;
 
-    var formError = _extends({}, getFormError(), (_extends4 = {}, _extends4[name] = errorMessage, _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);
-  }, [onError, onCheck, getFormError]);
+  }, [realFormError, setFormError, onError, onCheck]);
   var handleFieldSuccess = useCallback(function (name) {
     removeFieldError(name);
   }, [removeFieldError]);
   var handleFieldChange = useCallback(function (name, value, event) {
     var _extends5;
 
-    var formValue = getFormValue();
+    var formValue = realFormValue;
 
     var nextFormValue = _extends({}, formValue, (_extends5 = {}, _extends5[name] = value, _extends5));
 
     setFormValue(nextFormValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);
-  }, [onChange, getFormValue]);
+  }, [realFormValue, setFormValue, onChange]);
   var rootRef = useRef(null);
   var formContextValue = useMemo(function () {
     return {
@@ -261,7 +267,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       readOnly: readOnly,
       plaintext: plaintext,
       disabled: disabled,
-      formError: getFormError(),
+      formError: realFormError,
       removeFieldValue: removeFieldValue,
       removeFieldError: removeFieldError,
       pushFieldRule: pushFieldRule,
@@ -270,7 +276,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onFieldError: handleFieldError,
       onFieldSuccess: handleFieldSuccess
     };
-  }, [getCombinedModel, checkTrigger, formDefaultValue, errorFromContext, readOnly, plaintext, disabled, getFormError, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
+  }, [getCombinedModel, checkTrigger, formDefaultValue, errorFromContext, readOnly, plaintext, disabled, realFormError, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
   return /*#__PURE__*/React.createElement("form", _extends({}, rest, {
     ref: rootRef,
     onSubmit: handleSubmit,