baseui 12.2.0 → 13.0.0

package/esm/datepicker/calendar-header.js

@@ -63,6 +63,7 @@ import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import { forkBlur, forkFocus, isFocusVisible } from '../utils/focusVisible';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 var navBtnStyle = function navBtnStyle(_ref) {
   var $theme = _ref.$theme;
   return {
@@ -77,7 +78,24 @@ var MAX_MONTH = 11;
 var DIRECTION = {
   NEXT: 'next',
   PREVIOUS: 'previous'
-};
+}; // When multiple calendar months are rendered, the month selection dropdown
+// must account for which of the rendered calendar months it corresponds with
+
+function adjustForCalendarOrder(monthId, year, order) {
+  var adjustedMonth = Number(monthId) - order;
+  var adjustedYear = year;
+
+  if (adjustedMonth < 0) {
+    adjustedMonth = 11;
+    adjustedYear = adjustedYear - 1;
+  }
+
+  return {
+    adjustedMonthId: adjustedMonth.toString(),
+    adjustedYear: adjustedYear
+  };
+} // @ts-ignore
+
 
 function idToYearMonth(id) {
   return id.split('-').map(Number);
@@ -93,7 +111,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, CalendarHeader);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props); // @ts-ignore
 
     _defineProperty(_assertThisInitialized(_this), "dateHelpers", void 0);
 
@@ -187,7 +205,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       var maxMinYearMonthsIntersection = maxYearMonths.filter(function (year) {
         return minYearMonths.includes(year);
       });
-      var filterMonthsList = year === maxYear && year === minYear ? maxMinYearMonthsIntersection : year === maxYear ? maxYearMonths : year === minYear ? minYearMonths : null;
+      var filterMonthsList = year === maxYear && year === minYear ? maxMinYearMonthsIntersection : year === maxYear ? maxYearMonths : year === minYear ? minYearMonths : null; // @ts-ignore
 
       var formatMonthLabel = function formatMonthLabel(month) {
         return _this.dateHelpers.getMonthInLocale(month, _this.props.locale);
@@ -310,6 +328,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       var clickHandler = _this.decreaseMonth;
 
       if (allPrevDaysDisabled) {
+        // @ts-ignore
         clickHandler = null;
       }
 
@@ -321,7 +340,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: _this.state.isFocusVisible,
         type: "button",
         $disabled: isDisabled,
-        $order: _this.props.order
+        $order: _this.props.order,
+        $density: _this.props.density
       }, prevButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(PrevButtonIcon, _extends({
         size: density === DENSITY.high ? 24 : 36,
         overrides: {
@@ -382,6 +402,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       // on click or do nothing
 
       if (allNextDaysDisabled) {
+        // @ts-ignore
         clickHandler = null;
       }
 
@@ -393,7 +414,9 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         type: "button",
         $disabled: isDisabled,
         $isFocusVisible: _this.state.isFocusVisible,
-        $order: _this.props.order
+        $order: _this.props.order,
+        $density: _this.props.density,
+        $isTrailing: true
       }, nextButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(NextButtonIcon, _extends({
         size: density === DENSITY.high ? 24 : 36,
         overrides: {
@@ -421,6 +444,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var year = _this.dateHelpers.getYear(date);
 
+      var order = _this.props.order;
       var _this$props5 = _this.props,
           locale = _this$props5.locale,
           _this$props5$override = _this$props5.overrides,
@@ -466,7 +490,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var monthTitle = "".concat(_this.dateHelpers.getMonthInLocale(_this.dateHelpers.getMonth(date), locale));
       var yearTitle = "".concat(_this.dateHelpers.getYear(date));
-      return _this.isMultiMonthHorizontal() ? /*#__PURE__*/React.createElement("div", null, "".concat(monthTitle, " ").concat(yearTitle)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         autoFocus: true,
         focusLock: true,
@@ -494,16 +518,20 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               highlightedIndex: initialMonthIndex,
               isFocused: true
             },
-            items: _this.monthItems,
+            items: _this.monthItems // @ts-ignore
+            ,
             onItemSelect: function onItemSelect(_ref4) {
               var item = _ref4.item,
                   event = _ref4.event;
               event.preventDefault();
-              var month = idToYearMonth(item.id);
+
+              var _adjustForCalendarOrd = adjustForCalendarOrder(item.id, year, order),
+                  adjustedMonthId = _adjustForCalendarOrd.adjustedMonthId,
+                  adjustedYear = _adjustForCalendarOrd.adjustedYear;
 
               var updatedDate = _this.dateHelpers.set(date, {
-                year: year,
-                month: month
+                year: adjustedYear,
+                month: idToYearMonth(adjustedMonthId)
               });
 
               _this.props.onMonthChange && _this.props.onMonthChange({
@@ -520,14 +548,16 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: _this.state.isFocusVisible,
-        $density: density,
+        $density: density // @ts-ignore
+        ,
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
               isMonthDropdownOpen: true
             });
           }
-        },
+        } // @ts-ignore
+        ,
         onKeyDown: function onKeyDown(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             // disables page scroll
@@ -540,7 +570,9 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             });
           }
         }
-      }, monthYearSelectButtonProps), monthTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
+      }, monthYearSelectButtonProps, {
+        "aria-label": "Month, ".concat(monthTitle)
+      }), monthTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
         title: "",
         overrides: {
           Svg: {
@@ -577,7 +609,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               highlightedIndex: initialYearIndex,
               isFocused: true
             },
-            items: _this.yearItems,
+            items: _this.yearItems // @ts-ignore
+            ,
             onItemSelect: function onItemSelect(_ref5) {
               var item = _ref5.item,
                   event = _ref5.event;
@@ -603,14 +636,16 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: _this.state.isFocusVisible,
-        $density: density,
+        $density: density // @ts-ignore
+        ,
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
               isYearDropdownOpen: true
             });
           }
-        },
+        } // @ts-ignore
+        ,
         onKeyDown: function onKeyDown(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             // disables page scroll
@@ -622,7 +657,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               isYearDropdownOpen: false
             });
           }
-        }
+        },
+        "aria-label": "Year, ".concat(yearTitle)
       }, monthYearSelectButtonProps), yearTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
         title: "",
         overrides: {
@@ -708,11 +744,15 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             var day = _this2.dateHelpers.addDays(startOfWeek, offset);
 
             return /*#__PURE__*/React.createElement(WeekdayHeader, _extends({
-              key: offset,
-              alt: _this2.dateHelpers.getWeekdayInLocale(day, _this2.props.locale)
+              key: offset
             }, weekdayHeaderProps, {
               $density: density
-            }), _this2.dateHelpers.getWeekdayMinInLocale(day, _this2.props.locale));
+            }), /*#__PURE__*/React.createElement("abbr", {
+              style: {
+                textDecoration: 'none'
+              },
+              title: _this2.dateHelpers.getWeekdayInLocale(day, _this2.props.locale)
+            }, _this2.dateHelpers.getWeekdayMinInLocale(day, _this2.props.locale)));
           })));
         });
       });
@@ -724,8 +764,11 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(CalendarHeader, "defaultProps", {
   adapter: dateFnsAdapter,
+  // @ts-ignore
   locale: null,
+  // @ts-ignore
   maxDate: null,
+  // @ts-ignore
   minDate: null,
   onYearChange: function onYearChange() {},
   overrides: {}

package/esm/datepicker/calendar.js

@@ -68,12 +68,15 @@ import dateFnsAdapter from './utils/date-fns-adapter';
 import DateHelpers from './utils/date-helpers';
 import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import { DENSITY, ORIENTATION } from './constants';
+import { Button, KIND } from '../button';
+import { ButtonDock } from '../button-dock';
 
 var Calendar = /*#__PURE__*/function (_React$Component) {
   _inherits(Calendar, _React$Component);
 
   var _super = _createSuper(Calendar);
 
+  // @ts-ignore
   function Calendar(props) {
     var _this;
 
@@ -88,9 +91,10 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getDateInView", function () {
       var _this$props = _this.props,
           highlightedDate = _this$props.highlightedDate,
-          value = _this$props.value;
+          value = _this$props.value; // @ts-ignore
+
+      var minDate = _this.dateHelpers.getEffectiveMinDate(_this.props); // @ts-ignore
 
-      var minDate = _this.dateHelpers.getEffectiveMinDate(_this.props);
 
       var maxDate = _this.dateHelpers.getEffectiveMaxDate(_this.props);
 
@@ -412,10 +416,15 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
         var monthDate = _this.dateHelpers.addMonths(_this.state.date, i);
 
-        var monthKey = "month-".concat(i);
+        var monthKey = "month-".concat(i); // @ts-ignore
+
         monthSubComponents.push(_this.renderCalendarHeader(monthDate, i));
-        monthSubComponents.push( /*#__PURE__*/React.createElement(CalendarContainer, _extends({
-          key: monthKey,
+        monthSubComponents.push(
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement(CalendarContainer, _extends({
+          key: monthKey // @ts-ignore
+          ,
           ref: function ref(calendar) {
             _this.calendar = calendar;
           },
@@ -452,7 +461,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           fixedHeight: _this.props.fixedHeight,
           hasLockedBehavior: !!_this.props.hasLockedBehavior,
           selectedInput: _this.props.selectedInput
-        })));
+        }))); // @ts-ignore
+
         monthList.push( /*#__PURE__*/React.createElement("div", {
           key: "month-component-".concat(i)
         }, monthSubComponents));
@@ -528,7 +538,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           label: locale.datepicker.quickSelectLabel
         }, quickSelectFormControlProps), /*#__PURE__*/React.createElement(QuickSelect, _extends({
           "aria-label": locale.datepicker.quickSelectAriaLabel,
-          labelKey: "id",
+          labelKey: "id" // @ts-ignore
+          ,
           onChange: function onChange(params) {
             if (!params.option) {
               _this.setState({
@@ -594,19 +605,74 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    var _this$props3 = _this.props,
-        _highlightedDate = _this$props3.highlightedDate,
-        _value = _this$props3.value,
-        adapter = _this$props3.adapter;
+    _defineProperty(_assertThisInitialized(_this), "renderActionBar", function () {
+      var _this$props3 = _this.props,
+          _this$props3$override = _this$props3.overrides,
+          overrides = _this$props3$override === void 0 ? {} : _this$props3$override,
+          primaryButton = _this$props3.primaryButton,
+          secondaryButton = _this$props3.secondaryButton;
+
+      var _getOverrides17 = getOverrides(overrides.ButtonDock, ButtonDock),
+          _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+          ButtonDockComponent = _getOverrides18[0],
+          buttonDockProps = _getOverrides18[1];
+
+      var _getOverrides19 = getOverrides(overrides.PrimaryButton, Button),
+          _getOverrides20 = _slicedToArray(_getOverrides19, 2),
+          PrimaryButtonComponent = _getOverrides20[0],
+          primaryButtonProps = _getOverrides20[1];
+
+      var _getOverrides21 = getOverrides(overrides.SecondaryButton, Button),
+          _getOverrides22 = _slicedToArray(_getOverrides21, 2),
+          SecondaryButtonComponent = _getOverrides22[0],
+          secondaryButtonProps = _getOverrides22[1];
+
+      var primaryButtonComponent = primaryButton != null ? /*#__PURE__*/React.createElement(PrimaryButtonComponent, _extends({
+        onClick: function onClick() {
+          return primaryButton.onClick();
+        }
+      }, primaryButtonProps), primaryButton.label) : null;
+      var secondaryButtonComponent = secondaryButton != null ? /*#__PURE__*/React.createElement(SecondaryButtonComponent, _extends({
+        onClick: function onClick() {
+          return secondaryButton.onClick();
+        },
+        kind: KIND.tertiary
+      }, secondaryButtonProps), secondaryButton.label) : null;
+
+      if (primaryButtonComponent || secondaryButtonComponent) {
+        return /*#__PURE__*/React.createElement(ButtonDockComponent, _extends({
+          primaryAction: primaryButtonComponent,
+          dismissiveAction: secondaryButtonComponent,
+          overrides: mergeOverrides({
+            ActionSubContainer: {
+              style: {
+                flexDirection: 'row-reverse'
+              }
+            }
+          }, buttonDockProps.overrides)
+        }, buttonDockProps));
+      }
+
+      return null;
+    });
+
+    var _this$props4 = _this.props,
+        _highlightedDate = _this$props4.highlightedDate,
+        _value = _this$props4.value,
+        adapter = _this$props4.adapter; // @ts-ignore
+
     _this.dateHelpers = new DateHelpers(adapter);
 
-    var dateInView = _this.getDateInView();
+    var dateInView = _this.getDateInView(); // @ts-ignore
+
 
     var _time = [];
 
     if (Array.isArray(_value)) {
+      // @ts-ignore
       _time = _toConsumableArray(_value);
     } else if (_value) {
+      // @ts-ignore
       _time = [_value];
     }
 
@@ -616,6 +682,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       date: dateInView,
       quickSelectId: null,
       rootElement: null,
+      // @ts-ignore
       time: _time
     };
     return _this;
@@ -701,10 +768,11 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       var _this$props$overrides3 = this.props.overrides,
           overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
 
-      var _getOverrides17 = getOverrides(overrides.Root, StyledRoot),
-          _getOverrides18 = _slicedToArray(_getOverrides17, 2),
-          Root = _getOverrides18[0],
-          rootProps = _getOverrides18[1];
+      var _getOverrides23 = getOverrides(overrides.Root, StyledRoot),
+          _getOverrides24 = _slicedToArray(_getOverrides23, 2),
+          Root = _getOverrides24[0],
+          rootProps = _getOverrides24[1]; // @ts-ignore
+
 
       var _concat = [].concat(this.props.value),
           _concat2 = _slicedToArray(_concat, 2),
@@ -716,7 +784,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           $density: _this2.props.density,
           "data-baseweb": "calendar",
           role: "application",
-          "aria-roledescription": "datepicker",
+          "aria-roledescription": "date picker" // @ts-ignore
+          ,
           ref: function ref(root) {
             if (root && root instanceof HTMLElement && !_this2.state.rootElement) {
               _this2.setState({
@@ -728,11 +797,13 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           onKeyDown: _this2.props.trapTabbing ? _this2.handleTabbing : null
         }, rootProps), _this2.renderMonths({
           ariaRoleDescCalMonth: locale.datepicker.ariaRoleDescriptionCalendarMonth
-        }), _this2.props.timeSelectStart && _this2.renderTimeSelect(startDate, function (time) {
+        }), _this2.props.timeSelectStart && _this2.renderTimeSelect(startDate, // @ts-ignore
+        function (time) {
           return _this2.handleTimeChange(time, 0);
-        }, locale.datepicker.timeSelectStartLabel), _this2.props.timeSelectEnd && _this2.props.range && _this2.renderTimeSelect(endDate, function (time) {
+        }, locale.datepicker.timeSelectStartLabel), _this2.props.timeSelectEnd && _this2.props.range && _this2.renderTimeSelect(endDate, // @ts-ignore
+        function (time) {
           return _this2.handleTimeChange(time, 1);
-        }, locale.datepicker.timeSelectEndLabel), _this2.renderQuickSelect());
+        }, locale.datepicker.timeSelectEndLabel), _this2.renderQuickSelect(), _this2.renderActionBar());
       });
     }
   }]);
@@ -762,6 +833,7 @@ _defineProperty(Calendar, "defaultProps", {
   orientation: ORIENTATION.horizontal,
   overrides: {},
   peekNextMonth: false,
+  // @ts-ignore
   adapter: dateFnsAdapter,
   value: null,
   trapTabbing: false

package/esm/datepicker/datepicker.js

@@ -66,7 +66,7 @@ import DateHelpers from './utils/date-helpers';
 import dateFnsAdapter from './utils/date-fns-adapter';
 import { INPUT_ROLE, RANGED_CALENDAR_BEHAVIOR } from './constants';
 export var DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
-var INPUT_DELIMITER = '–';
+var INPUT_DELIMITER = '–'; // @ts-ignore
 
 var combineSeparatedInputs = function combineSeparatedInputs(newInputValue) {
   var prevCombinedInputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -101,7 +101,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, Datepicker);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props); // @ts-ignore
 
     _defineProperty(_assertThisInitialized(_this), "calendar", void 0);
 
@@ -148,7 +148,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       if (Array.isArray(nextDate) && _this.props.range) {
         if (!nextDate[0] || !nextDate[1]) {
           isOpen = true;
-          isPseudoFocused = true;
+          isPseudoFocused = true; // @ts-ignore
+
           calendarFocused = null;
         } else if (nextDate[0] && nextDate[1]) {
           var _nextDate = nextDate,
@@ -204,6 +205,12 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         if (onlyTimeChanged(prevValue, nextDate)) {
           isOpen = true;
         }
+      } // If nextDate is an array but the datepicker is not ranged, we assign
+      // nextDate directly to the Date value to avoid formatting issues
+
+
+      if (Array.isArray(nextDate) && !_this.props.range) {
+        nextDate = nextDate[0];
       }
 
       _this.setState(_objectSpread(_objectSpread({
@@ -222,7 +229,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
           displayValueAtRangeIndex = _this$props.displayValueAtRangeIndex,
           formatDisplayValue = _this$props.formatDisplayValue,
-          range = _this$props.range;
+          range = _this$props.range; // @ts-ignore
 
       var formatString = _this.normalizeDashes(_this.props.formatString);
 
@@ -314,7 +321,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (event, inputRole) {
       var inputValue = _this.props.range && _this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, _this.state.inputValue, inputRole) : event.currentTarget.value;
 
-      var mask = _this.getMask();
+      var mask = _this.getMask(); // @ts-ignore
+
 
       var formatString = _this.normalizeDashes(_this.props.formatString);
 
@@ -328,7 +336,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         inputValue: inputValue
-      });
+      }); // @ts-ignore
+
 
       var parseDateString = function parseDateString(dateString) {
         if (formatString === DEFAULT_DATE_FORMAT) {
@@ -368,8 +377,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
         var _formatString = _this.props.formatString; // Prevent early parsing of value.
         // Eg 25.12.2 will be transformed to 25.12.0002 formatted from date to string
+        // @ts-ignore
 
         if (dateString.replace(/(\s)*/g, '').length < _formatString.replace(/(\s)*/g, '').length) {
+          // @ts-ignore
           date = null;
         } else {
           date = parseDateString(dateString);
@@ -427,7 +438,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
       if (!_this.state.isOpen && event.keyCode === 40) {
         _this.open();
-      } else if (_this.state.isOpen && event.key === 'ArrowDown') {
+      } else if (_this.state.isOpen && (event.key === 'ArrowDown' || event.key === 'Enter')) {
         // next line prevents the page jump on the initial arrowDown
         event.preventDefault();
 
@@ -457,6 +468,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       return _this.props.rangedCalendarBehavior === RANGED_CALENDAR_BEHAVIOR.locked && _this.props.range && _this.props.separateRangeInputs;
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getPlaceholder", function () {
+      return _this.props.placeholder || _this.props.placeholder === '' ? _this.props.placeholder : _this.props.range && !_this.props.separateRangeInputs ? "YYYY/MM/DD ".concat(INPUT_DELIMITER, " YYYY/MM/DD") : 'YYYY/MM/DD';
+    });
+
     _this.dateHelpers = new DateHelpers(props.adapter);
     _this.state = {
       calendarFocused: false,
@@ -525,7 +540,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           InputComponent = _getOverrides2[0],
           inputProps = _getOverrides2[1];
 
-      var placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? "YYYY/MM/DD ".concat(INPUT_DELIMITER, " YYYY/MM/DD") : 'YYYY/MM/DD';
+      var inputLabel = this.props['aria-label'] || "".concat(this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel);
 
       var _split = (this.state.inputValue || '').split(" ".concat(INPUT_DELIMITER, " ")),
           _split2 = _slicedToArray(_split, 2),
@@ -537,7 +552,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var value = inputRole === INPUT_ROLE.startDate ? startDate : inputRole === INPUT_ROLE.endDate ? endDate : this.state.inputValue;
       return /*#__PURE__*/React.createElement(InputComponent, _extends({
         "aria-disabled": this.props.disabled,
-        "aria-label": this.props['aria-label'] || (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
+        "aria-label": inputLabel,
         error: this.props.error,
         positive: this.props.positive,
         "aria-describedby": this.props['aria-describedby'],
@@ -550,11 +565,12 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           return _this3.open(inputRole);
         },
         onBlur: this.handleInputBlur,
-        onKeyDown: this.handleKeyDown,
+        onKeyDown: this.handleKeyDown // @ts-ignore
+        ,
         onChange: function onChange(event) {
           return _this3.handleInputChange(event, inputRole);
         },
-        placeholder: placeholder,
+        placeholder: this.getPlaceholder(),
         mask: this.getMask(),
         required: this.props.required,
         clearable: this.props.clearable
@@ -598,6 +614,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           InputLabel = _getOverrides12[0],
           inputLabelProps = _getOverrides12[1];
 
+      var singleDateFormatString = this.props.formatString || DEFAULT_DATE_FORMAT;
+      var formatString = this.props.range && !this.props.separateRangeInputs ? "".concat(singleDateFormatString, " ").concat(INPUT_DELIMITER, " ").concat(singleDateFormatString) : singleDateFormatString;
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
           accessibilityType: ACCESSIBILITY_TYPE.none,
@@ -621,6 +639,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, _extends({}, inputWrapperProps, {
           $separateRangeInputs: _this4.props.range && _this4.props.separateRangeInputs
         }), _this4.props.range && _this4.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), _this4.renderInputComponent(locale, INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, _this4.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
+          // @ts-ignore
           id: _this4.props['aria-describedby'],
           style: {
             position: 'fixed',
@@ -635,7 +654,9 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             clip: 'rect(0, 0, 0, 0)',
             clipPath: 'inset(100%)'
           }
-        }, locale.datepicker.screenReaderMessageInput), /*#__PURE__*/React.createElement("p", {
+        }, getInterpolatedString(locale.datepicker.screenReaderMessageInput, {
+          formatString: formatString
+        })), /*#__PURE__*/React.createElement("p", {
           "aria-live": "assertive",
           style: {
             position: 'fixed',
@@ -671,6 +692,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(Datepicker, "defaultProps", {
   'aria-describedby': 'datepicker--screenreader--message--input',
+  // @ts-ignore
   value: null,
   formatString: DEFAULT_DATE_FORMAT,
   adapter: dateFnsAdapter

package/esm/datepicker/day.js

@@ -56,6 +56,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Day);
 
+  // @ts-ignore
   function Day(props) {
     var _this;
 
@@ -92,10 +93,14 @@ var Day = /*#__PURE__*/function (_React$Component) {
         var nextEndDate = null;
 
         if (_this.props.selectedInput === INPUT_ROLE.startDate) {
-          nextStartDate = selectedDate;
+          // @ts-ignore
+          nextStartDate = selectedDate; // @ts-ignore
+
           nextEndDate = Array.isArray(currentDate) && currentDate[1] ? currentDate[1] : null;
         } else if (_this.props.selectedInput === INPUT_ROLE.endDate) {
-          nextStartDate = Array.isArray(currentDate) && currentDate[0] ? currentDate[0] : null;
+          // @ts-ignore
+          nextStartDate = Array.isArray(currentDate) && currentDate[0] ? currentDate[0] : null; // @ts-ignore
+
           nextEndDate = selectedDate;
         }
 
@@ -446,7 +451,8 @@ var Day = /*#__PURE__*/function (_React$Component) {
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
       React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(_Day, _extends({
-          "aria-label": _this2.getAriaLabel(sharedProps, locale),
+          "aria-label": _this2.getAriaLabel(sharedProps, locale) // @ts-ignore
+          ,
           ref: function ref(dayElm) {
             _this2.dayElm = dayElm;
           },
@@ -485,6 +491,7 @@ _defineProperty(Day, "defaultProps", {
   onMouseLeave: function onMouseLeave() {},
   overrides: {},
   peekNextMonth: true,
+  // @ts-ignore
   value: null
 });
 

package/esm/datepicker/locale.js

@@ -17,7 +17,7 @@ var locale = {
   pastSixMonths: 'Past 6 Months',
   pastYear: 'Past Year',
   pastTwoYears: 'Past 2 Years',
-  screenReaderMessageInput: 'Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.',
+  screenReaderMessageInput: 'Date format is ${formatString}. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.',
   selectedDate: 'Selected date is ${date}.',
   selectedDateRange: 'Selected date range is from ${startDate} to ${endDate}.',
   selectSecondDatePrompt: 'Select the second date.',