rsuite 5.48.1 → 5.50.0

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -111,12 +111,16 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     rest = (0, _objectWithoutPropertiesLoose2.default)(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", "onSelectItem", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
   var _useContext = (0, _react.useContext)(_TreeContext.default),
     inline = _useContext.inline;
-  var triggerRef = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var listRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var searchInputRef = (0, _react.useRef)(null);
-  var treeViewRef = (0, _react.useRef)(null);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref, {
+      inline: inline
+    }),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list,
+    searchInput = _usePickerRef.searchInput,
+    treeView = _usePickerRef.treeView;
   var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
     rtl = _useCustom.rtl,
     locale = _useCustom.locale;
@@ -197,7 +201,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * get formatted nodes for render tree
    * @params render - renderNode function. only used when virtualized setting false
    */
-  var getFormattedNodes = (0, _react.useCallback)(function (render) {
+  var getFormattedNodes = function getFormattedNodes(render) {
     if (virtualized) {
       return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
         cascade: cascade,
@@ -212,7 +216,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }).map(function (node) {
       return render === null || render === void 0 ? void 0 : render(node, 1);
     });
-  }, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized, childrenKey, cascade]);
+  };
   var getTreeNodeProps = function getTreeNodeProps(node, layer) {
     return {
       as: Component,
@@ -243,19 +247,19 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onRenderTreeIcon: renderTreeIcon
     };
   };
-  var focusActiveNode = (0, _react.useCallback)(function () {
-    if (listRef.current) {
+  var focusActiveNode = function focusActiveNode() {
+    if (list.current) {
       (0, _treeUtils.focusToActiveTreeNode)({
-        list: listRef.current,
+        list: list.current,
         valueKey: valueKey,
         selector: "." + checkTreePrefix('node-active'),
         activeNode: activeNode,
         virtualized: virtualized,
-        container: treeViewRef.current,
+        container: treeView.current,
         formattedNodes: getFormattedNodes()
       });
     }
-  }, [checkTreePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);
+  };
   (0, _react.useEffect)(function () {
     setValue((0, _utils2.getCheckTreePickerDefaultValue)(value, uncheckableItemValues));
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -285,7 +289,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
     forceUpdate();
   }, [cascade, value, uncheckableItemValues, unSerializeList, flattenNodes, forceUpdate]);
-  var toggleUpChecked = (0, _react.useCallback)(function (nodes, node, checked) {
+  var toggleUpChecked = (0, _utils.useEventCallback)(function (nodes, node, checked) {
     var currentNode = node.refKey ? nodes[node.refKey] : null;
     if (cascade && currentNode) {
       if (!checked) {
@@ -304,8 +308,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         toggleUpChecked(nodes, currentNode.parent, checked);
       }
     }
-  }, [cascade]);
-  var toggleDownChecked = (0, _react.useCallback)(function (nodes, node, isChecked) {
+  });
+  var toggleDownChecked = (0, _utils.useEventCallback)(function (nodes, node, isChecked) {
     var currentNode = node.refKey ? nodes[node.refKey] : null;
     if (!currentNode) {
       return;
@@ -319,8 +323,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         toggleDownChecked(nodes, child, isChecked);
       });
     }
-  }, [cascade, childrenKey]);
-  var toggleChecked = (0, _react.useCallback)(function (node, isChecked) {
+  });
+  var toggleChecked = (0, _utils.useEventCallback)(function (node, isChecked) {
     var nodes = (0, _cloneDeep2.default)(flattenNodes);
     toggleDownChecked(nodes, node, isChecked);
     node.parent && toggleUpChecked(nodes, node.parent, isChecked);
@@ -329,7 +333,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     return values.filter(function (v) {
       return !uncheckableItemValues.includes(v);
     });
-  }, [flattenNodes, uncheckableItemValues, serializeListOnlyParent, toggleDownChecked, toggleUpChecked]);
+  });
 
   // TODO-Doma
   // Replace `getKeyParentMap` with `getParentMap`
@@ -340,7 +344,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return node[childrenKey];
     });
   }, [childrenKey, data, valueKey]);
-  var handleSelect = (0, _react.useCallback)(function (node, event) {
+  var handleSelect = (0, _utils.useEventCallback)(function (node, event) {
     var currentNode = node.refKey ? flattenNodes[node.refKey] : null;
     if (!node || !currentNode) {
       return;
@@ -363,18 +367,18 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(node, (0, _treeUtils.getPathTowardsItem)(node, function (item) {
       return itemParentMap.get(item[valueKey]);
     }));
-  }, [flattenNodes, toggleChecked, isControlled, valueKey, onChange, onSelect, onSelectItem, unSerializeList, cascade, uncheckableItemValues, setValue, itemParentMap]);
-  var handleOpen = (0, _react.useCallback)(function () {
-    var _triggerRef$current, _triggerRef$current$o;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$o = _triggerRef$current.open) === null || _triggerRef$current$o === void 0 ? void 0 : _triggerRef$current$o.call(_triggerRef$current);
+  });
+  var handleOpen = (0, _utils.useEventCallback)(function () {
+    var _trigger$current, _trigger$current$open;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$open = _trigger$current.open) === null || _trigger$current$open === void 0 ? void 0 : _trigger$current$open.call(_trigger$current);
     setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);
     focusActiveNode();
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
-  }, [activeNode, focusActiveNode, onOpen, valueKey]);
-  var handleClose = (0, _react.useCallback)(function () {
-    var _triggerRef$current2, _triggerRef$current2$, _targetRef$current;
-    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.close) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
+  });
+  var handleClose = (0, _utils.useEventCallback)(function () {
+    var _trigger$current2, _trigger$current2$clo, _target$current;
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$clo = _trigger$current2.close) === null || _trigger$current2$clo === void 0 ? void 0 : _trigger$current2$clo.call(_trigger$current2);
     setSearchKeyword('');
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setFocusItemValue(null);
@@ -383,9 +387,9 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     /**
      * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu
      */
-    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
-  }, [onClose, setSearchKeyword]);
-  var handleExpand = (0, _react.useCallback)(function (node) {
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var handleExpand = (0, _utils.useEventCallback)(function (node) {
     var nextExpandItemValues = (0, _treeUtils.toggleExpand)({
       node: node,
       isExpand: !node.expand,
@@ -400,16 +404,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
       loadChildren(node, getChildren);
     }
-  }, [childrenKey, expandItemValues, getChildren, loadChildren, onExpand, setExpandItemValues, valueKey]);
-  (0, _Picker.usePublicMethods)(ref, {
-    rootRef: inline ? treeViewRef : undefined,
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef,
-    inline: inline
   });
-  var handleClean = (0, _react.useCallback)(function (event) {
+  var handleClean = (0, _utils.useEventCallback)(function (event) {
     var target = event.target;
     // exclude searchBar
     if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
@@ -428,8 +424,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       });
     }
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
-  }, [cascade, cleanable, disabled, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues, isControlled]);
-  var handleFocusItem = (0, _react.useCallback)(function (key) {
+  });
+  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {
     var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
@@ -454,8 +450,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (key === _utils.KEY_VALUES.UP) {
       (0, _treeUtils.focusPreviousItem)(focusProps);
     }
-  }, [searchKeywordState, checkTreePrefix, expandItemValues, filteredData, focusItemValue, treeNodesRefs, childrenKey, valueKey, disabledItemValues]);
-  var handleLeftArrow = (0, _react.useCallback)(function () {
+  });
+  var handleLeftArrow = (0, _utils.useEventCallback)(function () {
     if ((0, _isNil2.default)(focusItemValue)) return;
     var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     (0, _treeUtils.leftArrowHandler)({
@@ -469,8 +465,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         (0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, "." + checkTreePrefix('node-label'));
       }
     });
-  }, [checkTreePrefix, expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, valueKey, childrenKey]);
-  var handleRightArrow = (0, _react.useCallback)(function () {
+  });
+  var handleRightArrow = (0, _utils.useEventCallback)(function () {
     if ((0, _isNil2.default)(focusItemValue)) return;
     var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     (0, _treeUtils.rightArrowHandler)({
@@ -482,8 +478,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         handleFocusItem(_utils.KEY_VALUES.DOWN);
       }
     });
-  }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);
-  var selectActiveItem = (0, _react.useCallback)(function (event) {
+  });
+  var selectActiveItem = function selectActiveItem(event) {
     if ((0, _isNil2.default)(focusItemValue)) return;
     var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     if (!(0, _utils2.isNodeUncheckable)(activeItem, {
@@ -492,13 +488,13 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }) && activeItem !== null) {
       handleSelect(activeItem, event);
     }
-  }, [flattenNodes, focusItemValue, handleSelect, uncheckableItemValues, valueKey]);
+  };
   var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     toggle: !focusItemValue || !active,
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    searchInputRef: searchInputRef,
+    trigger: trigger,
+    target: target,
+    overlay: overlay,
+    searchInput: searchInput,
     active: active,
     onExit: handleClean,
     onClose: handleClose,
@@ -517,8 +513,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       });
     }
   }, rest));
-  var handleTreeKeydown = (0, _react.useCallback)(function (event) {
-    if (!treeViewRef.current) {
+  var handleTreeKeydown = (0, _utils.useEventCallback)(function (event) {
+    if (!treeView.current) {
       return;
     }
     (0, _Picker.onMenuKeyDown)(event, {
@@ -532,7 +528,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       right: rtl ? handleLeftArrow : handleRightArrow,
       enter: selectActiveItem
     });
-  }, [handleFocusItem, handleLeftArrow, handleRightArrow, rtl, selectActiveItem]);
+  });
   var renderNode = function renderNode(node, layer) {
     var visible = node.visible,
       refKey = node.refKey; // when searching, all nodes should be expand
@@ -624,7 +620,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }, style) : {};
     return /*#__PURE__*/_react.default.createElement("div", {
       id: id ? id + "-listbox" : undefined,
-      ref: treeViewRef,
+      ref: inline ? root : treeView,
       role: "tree",
       "aria-multiselectable": true,
       className: classes,
@@ -642,7 +638,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }, function (_ref5) {
       var height = _ref5.height;
       return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({
-        ref: listRef,
+        ref: list,
         height: height,
         itemSize: itemSize,
         itemCount: formattedNodes.length,
@@ -663,14 +659,14 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       autoWidth: menuAutoWidth,
       className: classes,
       style: mergedMenuStyle,
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       onKeyDown: onPickerKeydown,
-      target: triggerRef
+      target: trigger
     }, searchable ? /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {
       placeholder: locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeywordState,
-      inputRef: searchInputRef
+      inputRef: searchInput
     }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   var selectedItems = (0, _react.useMemo)(function () {
@@ -716,7 +712,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: handleOpen,
     onEntered: onEntered,
@@ -724,10 +720,11 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     speaker: renderDropdownMenu
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -67,6 +67,19 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         more: string;
         prev: string;
         next: string;
+        /**
+         * Return the date parsed from string using the given format string.
+         *
+         * Example:
+         *
+         *  import parse from 'date-fns/parse';
+         *  import eo from 'date-fns/locale/eo'
+         *
+         *  function parseDate(date, formatStr) {
+         *    return parse(date, formatStr, new Date(), { locale: eo });
+         *  }
+         *
+         * */
         first: string;
         last: string;
         limit: string;

package/cjs/CustomProvider/CustomProvider.js

@@ -7,7 +7,7 @@ exports.__esModule = true;
 exports.default = exports.CustomContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _prefix = require("../utils/prefix");
 var _DOMHelper = require("../DOMHelper");
 var _ToastContainer = _interopRequireWildcard(require("../toaster/ToastContainer"));
@@ -43,7 +43,7 @@ var CustomProvider = function CustomProvider(props) {
       disableRipple: disableRipple
     }, rest);
   }, [classPrefix, theme, disableRipple, rest]);
-  (0, _react.useEffect)(function () {
+  (0, _utils.useIsomorphicLayoutEffect)(function () {
     if (_DOMHelper.canUseDOM && theme) {
       (0, _DOMHelper.addClass)(document.body, (0, _prefix.prefix)(classPrefix, "theme-" + theme));
 

package/cjs/DateInput/DateField.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type Locale } from 'date-fns';
+import type { Locale } from 'date-fns';
 export declare const patternMap: {
     y: string;
     M: string;
@@ -22,9 +22,12 @@ export declare class DateField extends Object {
     hour: number | null;
     minute: number | null;
     second: number | null;
-    meridian: 'AM' | 'PM' | null;
     constructor(format: string, value?: Date | null);
 }
+interface Action {
+    type: string;
+    value: any;
+}
 export declare const useDateField: (format: string, localize: Locale['localize'], date?: Date | null) => {
     dateField: {
         year: any;
@@ -38,7 +41,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: 'AM' | 'PM' | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -59,7 +61,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: 'AM' | 'PM' | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -80,7 +81,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: 'AM' | 'PM' | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -101,7 +101,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         day: number | null;
         minute: number | null;
         second: number | null;
-        meridian: 'AM' | 'PM' | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -122,7 +121,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         day: number | null;
         hour: number | null;
         second: number | null;
-        meridian: 'AM' | 'PM' | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -143,28 +141,6 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         day: number | null;
         hour: number | null;
         minute: number | null;
-        meridian: 'AM' | 'PM' | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        meridian: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        day: number | null;
-        hour: number | null;
-        minute: number | null;
-        second: number | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -174,7 +150,9 @@ export declare const useDateField: (format: string, localize: Locale['localize']
         propertyIsEnumerable(v: PropertyKey): boolean;
         should: Chai.Assertion;
     };
-    dispatch: import("react").Dispatch<any>;
-    toDate: (type: string, value: number | null) => Date;
+    dispatch: import("react").Dispatch<Action>;
+    toDate: (type?: string, value?: number | null) => Date | null;
     toDateString: () => string;
+    isEmptyValue: (type?: string, value?: number | null) => boolean | undefined;
 };
+export {};

package/cjs/DateInput/DateField.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
 var _react = require("react");
+var _isValid = _interopRequireDefault(require("date-fns/isValid"));
 var _utils = require("./utils");
 var patternMap = {
   y: 'year',
@@ -33,7 +34,6 @@ var DateField = /*#__PURE__*/function (_Object) {
     _this.hour = null;
     _this.minute = null;
     _this.second = null;
-    _this.meridian = null;
     _this.format = format;
     var formatArray = format.match(new RegExp('([y|d|M|H|h|m|s|a])+', 'ig')) || [];
     _this.patternArray = formatArray.map(function (pattern) {
@@ -42,14 +42,13 @@ var DateField = /*#__PURE__*/function (_Object) {
         key: patternMap[pattern[0]]
       };
     });
-    if (value) {
+    if (value && (0, _isValid.default)(value)) {
       _this.year = value.getFullYear();
       _this.month = value.getMonth() + 1;
       _this.day = value.getDate();
       _this.hour = value.getHours();
       _this.minute = value.getMinutes();
       _this.second = value.getSeconds();
-      _this.meridian = value.getHours() > 12 ? 'PM' : 'AM';
     }
     return _this;
   }
@@ -97,10 +96,8 @@ var useDateField = function useDateField(format, localize, date) {
           return (0, _extends2.default)({}, state, {
             second: action.value
           });
-        case 'setMeridian':
-          return (0, _extends2.default)({}, state, {
-            meridian: action.value
-          });
+        case 'setNewDate':
+          return new DateField(format, action.value);
         default:
           return state;
       }
@@ -112,6 +109,7 @@ var useDateField = function useDateField(format, localize, date) {
     dateField.patternArray.forEach(function (item) {
       var key = item.key,
         pattern = item.pattern;
+      var hour = dateField.hour;
       var value = dateField[key];
       if (value !== null) {
         if (pattern === 'MMM' && typeof value === 'number') {
@@ -122,8 +120,12 @@ var useDateField = function useDateField(format, localize, date) {
           value = localize === null || localize === void 0 ? void 0 : localize.month(value - 1, {
             width: 'wide'
           });
-        } else if (pattern === 'aa' && typeof value === 'number') {
-          value = value === 0 ? 'AM' : 'PM';
+        } else if (pattern === 'aa') {
+          if (typeof hour === 'number') {
+            value = hour > 12 ? 'PM' : 'AM';
+          } else {
+            value = 'aa';
+          }
         } else if (pattern === 'hh' && typeof value === 'number') {
           value = value === 0 ? 12 : value > 12 ? value - 12 : value;
         }
@@ -135,17 +137,64 @@ var useDateField = function useDateField(format, localize, date) {
     });
     return str;
   };
+
+  // Check if the field value is valid.
+  var validFieldValue = function validFieldValue(type, value) {
+    var _format$match;
+    var isValid = true;
+    (_format$match = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match === void 0 ? void 0 : _format$match.forEach(function (pattern) {
+      var key = patternMap[pattern[0]];
+      var fieldValue = type === key ? value : dateField[key];
+      if (fieldValue === null) {
+        isValid = false;
+        return;
+      }
+    });
+    return isValid;
+  };
+  var isEmptyValue = function isEmptyValue(type, value) {
+    var _format$match2;
+    var checkValueArray = (_format$match2 = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match2 === void 0 ? void 0 : _format$match2.map(function (pattern) {
+      var key = patternMap[pattern[0]];
+      var fieldValue = type === key ? value : dateField[key];
+      return fieldValue !== null;
+    });
+    return checkValueArray === null || checkValueArray === void 0 ? void 0 : checkValueArray.every(function (item) {
+      return item === false;
+    });
+  };
   var toDate = function toDate(type, value) {
-    if (value === null) {
+    var year = dateField.year,
+      month = dateField.month,
+      day = dateField.day,
+      hour = dateField.hour,
+      minute = dateField.minute,
+      second = dateField.second;
+    var date = new Date(year || 0, typeof month === 'number' ? month - 1 : 0,
+    // The default day is 1 when the value is null, otherwise it becomes the last day of the month.
+    day || 1, hour || 0, minute || 0, second || 0);
+    if (typeof type === 'undefined' || typeof value === 'undefined') {
+      return date;
+    }
+    if (value === null || !validFieldValue(type, value)) {
+      if (isEmptyValue(type, value)) {
+        return null;
+      }
       return new Date('');
     }
-    return (0, _utils.modifyDate)(new Date(dateField.year, dateField.month ? dateField.month - 1 : 0, dateField.day, dateField.hour, dateField.minute, dateField.second), type, value);
+    if (type === 'meridian' && typeof hour === 'number') {
+      var newHour = hour > 12 ? hour - 12 : hour + 12;
+      type = 'hour';
+      value = newHour;
+    }
+    return (0, _utils.modifyDate)(date, type, value);
   };
   return {
     dateField: dateField,
     dispatch: dispatch,
     toDate: toDate,
-    toDateString: toDateString
+    toDateString: toDateString,
+    isEmptyValue: isEmptyValue
   };
 };
 exports.useDateField = useDateField;

package/cjs/DateInput/DateInput.d.ts

@@ -3,11 +3,16 @@ import { InputProps } from '../Input';
 import { FormControlBaseProps } from '../@types/common';
 export interface DateInputProps extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>, FormControlBaseProps<Date | null> {
     /**
-     * Format of the date when rendered in the input.
-     * Format of the string is based on Unicode Technical Standard: https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+     * Format of the date when rendered in the input. Format of the string is based on Unicode Technical Standard.
+     *
+     * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
      * @default 'yyyy-MM-dd'
      **/
     format?: string;
+    /**
+     * The `placeholder` prop defines the text displayed in a form control when the control has no value.
+     */
+    placeholder?: string;
 }
 /**
  * The DateInput component lets users select a date with the keyboard.