rsuite 5.48.1 → 5.49.0

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.

package/cjs/DateInput/DateInput.js

@@ -8,11 +8,13 @@ exports.default = void 0;
 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"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _utils = require("../utils");
 var _utils2 = require("./utils");
 var _useDateInputState2 = _interopRequireDefault(require("./useDateInputState"));
-var isTestEnvironment = undefined === 'test';
+var _useKeyboardInputEvent = _interopRequireDefault(require("./useKeyboardInputEvent"));
+var _useIsFocused2 = _interopRequireDefault(require("./useIsFocused"));
 /**
  * The DateInput component lets users select a date with the keyboard.
  * @version 5.58.0
@@ -23,9 +25,12 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
     valueProp = props.value,
     defaultValue = props.defaultValue,
+    placeholder = props.placeholder,
     onChange = props.onChange,
     onKeyDown = props.onKeyDown,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["format", "value", "defaultValue", "onChange", "onKeyDown"]);
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"]);
   var inputRef = (0, _react.useRef)();
   var _useState = (0, _react.useState)({
       selectedPattern: 'y',
@@ -36,14 +41,14 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setSelectedState = _useState[1];
   var _useCustom = (0, _utils.useCustom)('Calendar'),
     locale = _useCustom.locale;
-  var localize = locale.dateLocale.localize;
+  var dateLocale = locale.dateLocale;
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1],
     isControlled = _useControlled[2];
   var _useDateInputState = (0, _useDateInputState2.default)({
       formatStr: formatStr,
-      localize: localize,
+      locale: dateLocale,
       date: value,
       isControlledDate: isControlled
     }),
@@ -51,49 +56,36 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setDateOffset = _useDateInputState.setDateOffset,
     setDateField = _useDateInputState.setDateField,
     getDateField = _useDateInputState.getDateField,
-    toDateString = _useDateInputState.toDateString;
+    toDateString = _useDateInputState.toDateString,
+    isEmptyValue = _useDateInputState.isEmptyValue;
   var dateString = toDateString();
   var keyPressOptions = (0, _react.useMemo)(function () {
     return {
       formatStr: formatStr,
-      localize: localize,
+      localize: dateLocale.localize,
       selectedMonth: dateField.month,
       dateString: dateString
     };
-  }, [dateField, dateString, formatStr, localize]);
-  var setSelectionRange = (0, _react.useCallback)(function (selectionStart, selectionEnd) {
-    if (selectionStart === void 0) {
-      selectionStart = selectedState.selectionStart;
-    }
-    if (selectionEnd === void 0) {
-      selectionEnd = selectedState.selectionEnd;
-    }
-    var input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-    if (isTestEnvironment) {
-      (0, _utils.safeSetSelection)(input, selectionStart, selectionEnd);
-      return;
-    }
-    requestAnimationFrame(function () {
-      (0, _utils.safeSetSelection)(input, selectionStart, selectionEnd);
-    });
-  }, [selectedState]);
-  var handleChange = (0, _react.useCallback)(function (value, event) {
-    setValue(value);
+  }, [dateField, dateString, formatStr, dateLocale]);
+  var handleChange = (0, _utils.useEventCallback)(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange, setValue]);
-  var handleChangeField = (0, _react.useCallback)(function (event, nextDirection) {
+    setValue(value);
+  });
+  var setSelectionRange = (0, _utils2.useInputSelection)(inputRef);
+  var onSegmentChange = (0, _utils.useEventCallback)(function (event, nextDirection) {
     var input = event.target;
-    var direction = nextDirection || (event.key === 'ArrowRight' ? 'right' : 'left');
+    var key = event.key;
+    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
     var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
       input: input,
       direction: direction
     }));
     setSelectionRange(state.selectionStart, state.selectionEnd);
     setSelectedState(state);
-  }, [keyPressOptions, setSelectionRange]);
-  var handleChangeFieldValue = (0, _react.useCallback)(function (event) {
-    var key = event.key;
+  });
+  var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {
     var input = event.target;
+    var key = event.key;
     var offset = key === 'ArrowUp' ? 1 : -1;
     var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
       input: input,
@@ -104,31 +96,10 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return handleChange(date, event);
     });
     setSelectionRange(state.selectionStart, state.selectionEnd);
-  }, [handleChange, keyPressOptions, setDateOffset, setSelectionRange]);
-  var isFieldFullValue = (0, _react.useCallback)(function (value, pattern) {
-    var patternGroup = (0, _utils2.getPatternGroups)(formatStr, pattern);
-    if (value.toString().length === patternGroup.length) {
-      return true;
-    }
-    switch (pattern) {
-      case 'M':
-        return parseInt(value + "0") > 12;
-      case 'd':
-        return parseInt(value + "0") > 31;
-      case 'H':
-        return parseInt(value + "0") > 23;
-      case 'h':
-        return parseInt(value + "0") > 12;
-      case 'm':
-      case 's':
-        return parseInt(value + "0") > 59;
-      default:
-        return false;
-    }
-  }, [formatStr]);
-  var handleChangeFieldValueWithNumericKeys = (0, _react.useCallback)(function (event) {
-    var key = event.key;
+  });
+  var onSegmentValueChangeWithNumericKeys = (0, _utils.useEventCallback)(function (event) {
     var input = event.target;
+    var key = event.key;
     var pattern = selectedState.selectedPattern;
     if (!pattern) {
       return;
@@ -161,62 +132,73 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
 
     // If the field is full value, move the cursor to the next field
-    if (isFieldFullValue(newValue, pattern) && input.selectionEnd !== input.value.length) {
-      handleChangeField(event, 'right');
+    if ((0, _utils2.isFieldFullValue)(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+      onSegmentChange(event, 'right');
     }
-  }, [dateField, getDateField, handleChange, handleChangeField, isFieldFullValue, keyPressOptions, selectedState.selectedPattern, setDateField, setSelectionRange]);
-  var handleRemoveFieldValue = (0, _react.useCallback)(function (event) {
+  });
+  var onSegmentValueRemove = (0, _utils.useEventCallback)(function (event) {
+    var input = event.target;
     if (selectedState.selectedPattern) {
+      var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+        input: input,
+        valueOffset: null
+      }));
+      setSelectedState(nextState);
+      setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
       setDateField(selectedState.selectedPattern, null, function (date) {
         return handleChange(date, event);
       });
-      setSelectionRange();
     }
-  }, [handleChange, selectedState, setDateField, setSelectionRange]);
-  var handleKeyDown = function handleKeyDown(event) {
-    var _key$match;
-    var key = event.key;
-    switch (key) {
-      case 'ArrowRight':
-      case 'ArrowLeft':
-        handleChangeField(event);
-        event.preventDefault();
-        break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-        handleChangeFieldValue(event);
-        event.preventDefault();
-        break;
-      case 'Backspace':
-        handleRemoveFieldValue(event);
-        event.preventDefault();
-        break;
-      case (_key$match = key.match(/\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:
-        handleChangeFieldValueWithNumericKeys(event);
-        event.preventDefault();
-        break;
-    }
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  };
-  var handleClick = (0, _react.useCallback)(function (event) {
+  });
+  var handleClick = (0, _utils.useEventCallback)(function (event) {
     var input = event.target;
     var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
       input: input
     }));
     setSelectedState(state);
     setSelectionRange(state.selectionStart, state.selectionEnd);
-  }, [keyPressOptions, setSelectionRange]);
+  });
+  var onKeyboardInput = (0, _useKeyboardInputEvent.default)({
+    onSegmentChange: onSegmentChange,
+    onSegmentValueChange: onSegmentValueChange,
+    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,
+    onSegmentValueRemove: onSegmentValueRemove,
+    onKeyDown: onKeyDown
+  });
+  var _useIsFocused = (0, _useIsFocused2.default)({
+      onBlur: onBlur,
+      onFocus: onFocus
+    }),
+    focused = _useIsFocused[0],
+    focusEventProps = _useIsFocused[1];
+  var renderedValue = (0, _react.useMemo)(function () {
+    if (!isEmptyValue()) {
+      return dateString;
+    }
+    return !focused ? '' : dateString;
+  }, [dateString, focused, isEmptyValue]);
   return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
-    inputMode: "text",
+    inputMode: focused ? 'numeric' : 'text',
     autoComplete: "off",
     autoCorrect: "off",
     spellCheck: false,
     ref: (0, _utils.mergeRefs)(inputRef, ref),
-    onKeyDown: handleKeyDown,
+    onKeyDown: onKeyboardInput,
     onClick: handleClick,
-    value: dateString
-  }, rest));
+    value: renderedValue,
+    placeholder: placeholder || formatStr
+  }, focusEventProps, rest));
 });
 DateInput.displayName = 'DateInput';
+DateInput.propTypes = {
+  defaultValue: _propTypes.default.instanceOf(Date),
+  format: _propTypes.default.string,
+  value: _propTypes.default.instanceOf(Date),
+  placeholder: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func
+};
 var _default = DateInput;
 exports.default = _default;

package/cjs/DateInput/index.d.ts

@@ -1,3 +1,7 @@
 import DateInput from './DateInput';
+export { useDateInputState } from './useDateInputState';
+export { useKeyboardInputEvent } from './useKeyboardInputEvent';
+export { useIsFocused } from './useIsFocused';
+export * from './utils';
 export type { DateInputProps } from './DateInput';
 export default DateInput;

package/cjs/DateInput/index.js

@@ -3,7 +3,25 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = void 0;
+var _exportNames = {
+  useDateInputState: true,
+  useKeyboardInputEvent: true,
+  useIsFocused: true
+};
+exports.default = exports.useIsFocused = exports.useKeyboardInputEvent = exports.useDateInputState = void 0;
 var _DateInput = _interopRequireDefault(require("./DateInput"));
+var _useDateInputState = require("./useDateInputState");
+exports.useDateInputState = _useDateInputState.useDateInputState;
+var _useKeyboardInputEvent = require("./useKeyboardInputEvent");
+exports.useKeyboardInputEvent = _useKeyboardInputEvent.useKeyboardInputEvent;
+var _useIsFocused = require("./useIsFocused");
+exports.useIsFocused = _useIsFocused.useIsFocused;
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  exports[key] = _utils[key];
+});
 var _default = _DateInput.default;
 exports.default = _default;

package/cjs/DateInput/useDateInputState.d.ts

@@ -1,11 +1,13 @@
+import { format } from '../utils/dateUtils';
 import type { Locale } from 'date-fns';
 interface DateInputState {
     formatStr: string;
-    localize: Locale['localize'];
+    formatDate?: typeof format;
+    locale: Locale;
     date?: Date | null;
     isControlledDate?: boolean;
 }
-declare function useDateInputState({ formatStr, localize, date, isControlledDate }: DateInputState): {
+export declare function useDateInputState({ formatStr, locale, date, isControlledDate }: DateInputState): {
     dateField: {
         year: any;
         format: string;
@@ -18,7 +20,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: "AM" | "PM" | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -39,7 +40,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: "AM" | "PM" | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -60,7 +60,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         hour: number | null;
         minute: number | null;
         second: number | null;
-        meridian: "AM" | "PM" | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -81,7 +80,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         day: number | null;
         minute: number | null;
         second: number | null;
-        meridian: "AM" | "PM" | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -102,7 +100,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         day: number | null;
         hour: number | null;
         second: number | null;
-        meridian: "AM" | "PM" | null;
         constructor: Function;
         toString(): string;
         toLocaleString(): string;
@@ -123,28 +120,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         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;
@@ -154,12 +129,13 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
         propertyIsEnumerable(v: PropertyKey): boolean;
         should: Chai.Assertion;
     };
-    setDateOffset: (pattern: string, offset: number, callback?: ((newDate: Date) => void) | undefined) => void;
-    setDateField: (pattern: string, value: number | null, callback?: ((newDate: Date) => void) | undefined) => void;
+    setDateOffset: (pattern: string, offset: number, callback?: ((newDate: Date | null) => void) | undefined) => void;
+    setDateField: (pattern: string, value: number | null, callback?: ((newDate: Date | null) => void) | undefined) => void;
     getDateField: (pattern: string) => {
         name: any;
         value: any;
     };
     toDateString: () => string;
+    isEmptyValue: (type?: string | undefined, value?: number | null | undefined) => boolean | undefined;
 };
 export default useDateInputState;

package/cjs/DateInput/useDateInputState.js

@@ -3,6 +3,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
+exports.useDateInputState = useDateInputState;
 exports.default = void 0;
 var _react = require("react");
 var _startCase = _interopRequireDefault(require("lodash/startCase"));
@@ -10,15 +11,16 @@ var _dateUtils = require("../utils/dateUtils");
 var _DateField = require("./DateField");
 function useDateInputState(_ref) {
   var formatStr = _ref.formatStr,
-    localize = _ref.localize,
+    locale = _ref.locale,
     date = _ref.date,
     isControlledDate = _ref.isControlledDate;
-  var _useDateField = (0, _DateField.useDateField)(formatStr, localize, date),
+  var _useDateField = (0, _DateField.useDateField)(formatStr, locale.localize, date),
     dateField = _useDateField.dateField,
     dispatch = _useDateField.dispatch,
     toDateString = _useDateField.toDateString,
-    toDate = _useDateField.toDate;
-  var setDateOffset = (0, _react.useCallback)(function (pattern, offset, callback) {
+    toDate = _useDateField.toDate,
+    isEmptyValue = _useDateField.isEmptyValue;
+  var setDateOffset = function setDateOffset(pattern, offset, callback) {
     var currentDate = new Date();
     var year = dateField.year || currentDate.getFullYear();
     var month = dateField.month ? dateField.month - 1 : currentDate.getMonth();
@@ -61,8 +63,8 @@ function useDateInputState(_ref) {
         value = (0, _dateUtils.addSeconds)(new Date(year, month, day, hour, minute, second), offset).getSeconds();
         break;
       case 'a':
-        actionName = 'setMeridian';
-        value = dateField.meridian === 'AM' ? 'PM' : 'AM';
+        actionName = 'setHour';
+        value = hour >= 12 ? hour - 12 : hour + 12;
         break;
     }
     if (actionName && value) {
@@ -73,8 +75,8 @@ function useDateInputState(_ref) {
       var field = _DateField.patternMap[pattern];
       callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));
     }
-  }, [dateField, toDate, dispatch]);
-  var setDateField = (0, _react.useCallback)(function (pattern, value, callback) {
+  };
+  var setDateField = function setDateField(pattern, value, callback) {
     var field = _DateField.patternMap[pattern];
     var actionName = "set" + (0, _startCase.default)(field);
     dispatch({
@@ -82,23 +84,45 @@ function useDateInputState(_ref) {
       value: value
     });
     callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));
-  }, [toDate, dispatch]);
-  var getDateField = (0, _react.useCallback)(function (pattern) {
+  };
+  var getDateField = function getDateField(pattern) {
     var fieldName = _DateField.patternMap[pattern];
     return {
       name: fieldName,
       value: dateField[fieldName]
     };
-  }, [dateField]);
-  var toControlledDateString = (0, _react.useCallback)(function () {
-    return (0, _dateUtils.format)(date || new Date(), formatStr);
-  }, [date, formatStr]);
+  };
+  var toControlledDateString = function toControlledDateString() {
+    if (date && (0, _dateUtils.isValid)(date)) {
+      return (0, _dateUtils.format)(date, formatStr, {
+        locale: locale
+      });
+    }
+    // if date is not valid, return uncontrolled date string
+    return toDateString();
+  };
+  (0, _react.useEffect)(function () {
+    if (isControlledDate) {
+      if (date && (0, _dateUtils.isValid)(date)) {
+        dispatch({
+          type: 'setNewDate',
+          value: date
+        });
+      } else if (date === null) {
+        dispatch({
+          type: 'setNewDate',
+          value: null
+        });
+      }
+    }
+  }, [date, dispatch, isControlledDate]);
   return {
     dateField: dateField,
     setDateOffset: setDateOffset,
     setDateField: setDateField,
     getDateField: getDateField,
-    toDateString: isControlledDate ? toControlledDateString : toDateString
+    toDateString: isControlledDate ? toControlledDateString : toDateString,
+    isEmptyValue: isEmptyValue
   };
 }
 var _default = useDateInputState;

package/cjs/DateInput/useIsFocused.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FocusEventOptions {
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+export declare function useIsFocused({ onFocus: onFocusProp, onBlur: onBlurProp }: FocusEventOptions): [boolean, FocusEventOptions];
+export default useIsFocused;