baseui 12.2.0 → 13.0.0

package/datepicker/calendar.js

@@ -31,6 +31,10 @@ var _overrides = require("../helpers/overrides");
 
 var _constants = require("./constants");
 
+var _button = require("../button");
+
+var _buttonDock = require("../button-dock");
+
 var _excluded = ["overrides"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -92,6 +96,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Calendar);
 
+  // @ts-ignore
   function Calendar(props) {
     var _this;
 
@@ -106,9 +111,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);
 
@@ -430,10 +436,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;
           },
@@ -470,7 +481,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));
@@ -546,7 +558,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({
@@ -612,19 +625,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 = (0, _overrides.getOverrides)(overrides.ButtonDock, _buttonDock.ButtonDock),
+          _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+          ButtonDockComponent = _getOverrides18[0],
+          buttonDockProps = _getOverrides18[1];
+
+      var _getOverrides19 = (0, _overrides.getOverrides)(overrides.PrimaryButton, _button.Button),
+          _getOverrides20 = _slicedToArray(_getOverrides19, 2),
+          PrimaryButtonComponent = _getOverrides20[0],
+          primaryButtonProps = _getOverrides20[1];
+
+      var _getOverrides21 = (0, _overrides.getOverrides)(overrides.SecondaryButton, _button.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: _button.KIND.tertiary
+      }, secondaryButtonProps), secondaryButton.label) : null;
+
+      if (primaryButtonComponent || secondaryButtonComponent) {
+        return /*#__PURE__*/React.createElement(ButtonDockComponent, _extends({
+          primaryAction: primaryButtonComponent,
+          dismissiveAction: secondaryButtonComponent,
+          overrides: (0, _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.default(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];
     }
 
@@ -634,6 +702,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       date: dateInView,
       quickSelectId: null,
       rootElement: null,
+      // @ts-ignore
       time: _time
     };
     return _this;
@@ -719,10 +788,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 = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
-          _getOverrides18 = _slicedToArray(_getOverrides17, 2),
-          Root = _getOverrides18[0],
-          rootProps = _getOverrides18[1];
+      var _getOverrides23 = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
+          _getOverrides24 = _slicedToArray(_getOverrides23, 2),
+          Root = _getOverrides24[0],
+          rootProps = _getOverrides24[1]; // @ts-ignore
+
 
       var _concat = [].concat(this.props.value),
           _concat2 = _slicedToArray(_concat, 2),
@@ -734,7 +804,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({
@@ -746,11 +817,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());
       });
     }
   }]);
@@ -782,6 +855,7 @@ _defineProperty(Calendar, "defaultProps", {
   orientation: _constants.ORIENTATION.horizontal,
   overrides: {},
   peekNextMonth: false,
+  // @ts-ignore
   adapter: _dateFnsAdapter.default,
   value: null,
   trapTabbing: false

package/datepicker/calendar.js.flow

@@ -24,6 +24,8 @@ import DateHelpers from './utils/date-helpers.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import type { CalendarPropsT, CalendarInternalState } from './types.js';
 import { DENSITY, ORIENTATION } from './constants.js';
+import { Button, KIND, SIZE } from '../button/index.js';
+import { ButtonDock } from '../button-dock/index.js';
 
 export default class Calendar<T = Date> extends React.Component<
   CalendarPropsT<T>,
@@ -619,6 +621,58 @@ export default class Calendar<T = Date> extends React.Component<
     );
   };
 
+  renderActionBar = () => {
+    const { overrides = {}, primaryButton, secondaryButton } = this.props;
+    const [ButtonDockComponent, buttonDockProps] = getOverrides(overrides.ButtonDock, ButtonDock);
+    const [PrimaryButtonComponent, primaryButtonProps] = getOverrides(
+      overrides.PrimaryButton,
+      Button
+    );
+    const [SecondaryButtonComponent, secondaryButtonProps] = getOverrides(
+      overrides.SecondaryButton,
+      Button
+    );
+
+    const primaryButtonComponent =
+    primaryButton != null ? (
+        <PrimaryButtonComponent
+          onClick={() => primaryButton.onClick()}
+          {...primaryButtonProps}
+        >
+          {primaryButton.label}
+        </PrimaryButtonComponent>
+      ) : null;
+    const secondaryButtonComponent =
+      secondaryButton != null ? (
+        <SecondaryButtonComponent
+          onClick={() => secondaryButton.onClick()}
+          kind={KIND.tertiary}
+          {...secondaryButtonProps}
+        >
+          {secondaryButton.label}
+        </SecondaryButtonComponent>
+      ) : null;
+
+    if (primaryButtonComponent || secondaryButtonComponent) {
+      return (
+        <ButtonDockComponent
+          primaryAction={primaryButtonComponent}
+          dismissiveAction={secondaryButtonComponent}
+          overrides={mergeOverrides({
+            ActionSubContainer: {
+              style: {
+                flexDirection: 'row-reverse',
+              },
+            },
+          }, buttonDockProps.overrides)}
+          {...buttonDockProps}
+        />
+      );
+    }
+
+    return null;
+  };
+
   render() {
     const { overrides = {} } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
@@ -631,7 +685,7 @@ export default class Calendar<T = Date> extends React.Component<
             $density={this.props.density}
             data-baseweb="calendar"
             role="application"
-            aria-roledescription="datepicker"
+            aria-roledescription="date picker"
             ref={(root) => {
               if (root && root instanceof HTMLElement && !this.state.rootElement) {
                 this.setState({
@@ -660,6 +714,7 @@ export default class Calendar<T = Date> extends React.Component<
                 locale.datepicker.timeSelectEndLabel
               )}
             {this.renderQuickSelect()}
+            {this.renderActionBar()}
           </Root>
         )}
       </LocaleContext.Consumer>

package/datepicker/datepicker.d.ts

@@ -4,7 +4,7 @@ import DateHelpers from './utils/date-helpers';
 import type { Locale } from '../locale';
 import type { ChangeEvent } from 'react';
 export declare const DEFAULT_DATE_FORMAT = "yyyy/MM/dd";
-declare type DatepickerState = {
+type DatepickerState = {
     calendarFocused: boolean;
     isOpen: boolean;
     selectedInput: InputRole | undefined | null;
@@ -40,6 +40,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     normalizeDashes: (inputValue: string) => string;
     hasLockedBehavior: () => boolean;
     componentDidUpdate(prevProps: DatepickerProps<T>): void;
+    getPlaceholder: () => string;
     renderInputComponent(locale: Locale, inputRole?: InputRole): JSX.Element;
     render(): JSX.Element;
 }

package/datepicker/datepicker.js

@@ -85,7 +85,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
 exports.DEFAULT_DATE_FORMAT = DEFAULT_DATE_FORMAT;
-var INPUT_DELIMITER = '–';
+var INPUT_DELIMITER = '–'; // @ts-ignore
 
 var combineSeparatedInputs = function combineSeparatedInputs(newInputValue) {
   var prevCombinedInputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -120,7 +120,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);
 
@@ -167,7 +167,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,
@@ -223,6 +224,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({
@@ -241,7 +248,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);
 
@@ -333,7 +340,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);
 
@@ -347,7 +355,8 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         inputValue: inputValue
-      });
+      }); // @ts-ignore
+
 
       var parseDateString = function parseDateString(dateString) {
         if (formatString === DEFAULT_DATE_FORMAT) {
@@ -387,8 +396,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);
@@ -446,7 +457,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();
 
@@ -476,6 +487,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       return _this.props.rangedCalendarBehavior === _constants.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.default(props.adapter);
     _this.state = {
       calendarFocused: false,
@@ -544,7 +559,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),
@@ -556,7 +571,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var value = inputRole === _constants.INPUT_ROLE.startDate ? startDate : inputRole === _constants.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'],
@@ -569,11 +584,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
@@ -617,6 +633,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(_locale.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
           accessibilityType: _popover.ACCESSIBILITY_TYPE.none,
@@ -640,6 +658,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, _constants.INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, _constants.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',
@@ -654,7 +673,9 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             clip: 'rect(0, 0, 0, 0)',
             clipPath: 'inset(100%)'
           }
-        }, locale.datepicker.screenReaderMessageInput), /*#__PURE__*/React.createElement("p", {
+        }, (0, _i18nInterpolation.default)(locale.datepicker.screenReaderMessageInput, {
+          formatString: formatString
+        })), /*#__PURE__*/React.createElement("p", {
           "aria-live": "assertive",
           style: {
             position: 'fixed',
@@ -692,6 +713,7 @@ exports.default = Datepicker;
 
 _defineProperty(Datepicker, "defaultProps", {
   'aria-describedby': 'datepicker--screenreader--message--input',
+  // @ts-ignore
   value: null,
   formatString: DEFAULT_DATE_FORMAT,
   adapter: _dateFnsAdapter.default

package/datepicker/day.js

@@ -70,6 +70,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Day);
 
+  // @ts-ignore
   function Day(props) {
     var _this;
 
@@ -106,10 +107,14 @@ var Day = /*#__PURE__*/function (_React$Component) {
         var nextEndDate = null;
 
         if (_this.props.selectedInput === _constants.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 === _constants.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;
         }
 
@@ -460,7 +465,8 @@ var Day = /*#__PURE__*/function (_React$Component) {
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
       React.createElement(_locale.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;
           },
@@ -501,5 +507,6 @@ _defineProperty(Day, "defaultProps", {
   onMouseLeave: function onMouseLeave() {},
   overrides: {},
   peekNextMonth: true,
+  // @ts-ignore
   value: null
 });

package/datepicker/index.d.ts

@@ -12,4 +12,4 @@ export * from '../timezonepicker';
 export * from './types';
 export type { DatepickerLocale } from './locale';
 /** @deprecated use SharedStyleProps instead. To be removed in future versions.*/
-export declare type SharedStylePropsT = SharedStyleProps;
+export type SharedStylePropsT = SharedStyleProps;

package/datepicker/index.js.flow

@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 export { default as StatefulContainer } from './stateful-container.js';
 export { default as Calendar } from './calendar.js';
 export { default as StatefulCalendar } from './stateful-calendar.js';
+//$FlowFixMe
 export { default as Datepicker, default as DatePicker } from './datepicker.js';
 export {
   default as StatefulDatepicker,

package/datepicker/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type DatepickerLocale = {
+export type DatepickerLocale = {
     ariaLabel: string;
     ariaLabelRange: string;
     ariaLabelCalendar: string;

package/datepicker/locale.js

@@ -24,7 +24,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.',

package/datepicker/month.js

@@ -62,15 +62,24 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var defaultProps = {
+  // @ts-ignore
   dateLabel: null,
   density: _constants.DENSITY.high,
+  // @ts-ignore
   excludeDates: null,
+  // @ts-ignore
   filterDate: null,
+  // @ts-ignore
   highlightDates: null,
+  // @ts-ignore
   includeDates: null,
+  // @ts-ignore
   locale: null,
+  // @ts-ignore
   maxDate: null,
+  // @ts-ignore
   minDate: null,
+  // @ts-ignore
   month: null,
   adapter: _dateFnsAdapter.default,
   onDayClick: function onDayClick() {},
@@ -80,6 +89,7 @@ var defaultProps = {
   onDayMouseLeave: function onDayMouseLeave() {},
   overrides: {},
   peekNextMonth: false,
+  // @ts-ignore
   value: null
 };
 var CALENDAR_MAX_ROWS = 6;
@@ -119,7 +129,10 @@ var CalendarMonth = /*#__PURE__*/function (_React$Component) {
       var isWithinMonth = true;
 
       while (isWithinMonth || _this.props.fixedHeight && _this.props.peekNextMonth && i < CALENDAR_MAX_ROWS) {
-        weeks.push( /*#__PURE__*/React.createElement(_week.default, {
+        weeks.push(
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement(_week.default, {
           adapter: _this.props.adapter,
           date: currentWeekStart,
           dateLabel: _this.props.dateLabel,

package/datepicker/stateful-calendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { CalendarProps, StatefulDatepickerProps } from './types';
-declare type DatepickerProps<T> = StatefulDatepickerProps<CalendarProps<T>> & Omit<CalendarProps<T>, keyof StatefulDatepickerProps<CalendarProps<T>>>;
+type DatepickerProps<T> = StatefulDatepickerProps<CalendarProps<T>> & Omit<CalendarProps<T>, keyof StatefulDatepickerProps<CalendarProps<T>>>;
 declare class StatefulComponent<T = Date> extends React.Component<DatepickerProps<T>> {
     static defaultProps: DatepickerProps<unknown>;
     render(): JSX.Element;

package/datepicker/stateful-container.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { CalendarProps, ContainerState, DatepickerProps, StatefulContainerProps, StateChangeType, StateReducer } from './types';
-declare type InputProps<T> = CalendarProps<T> | DatepickerProps<T>;
-declare type Props<T> = StatefulContainerProps<InputProps<T>, T>;
+type InputProps<T> = CalendarProps<T> | DatepickerProps<T>;
+type Props<T> = StatefulContainerProps<InputProps<T>, T>;
 declare class StatefulContainer<T = Date> extends React.Component<Props<T>, ContainerState<T>> {
     static defaultProps: {
         stateReducer: StateReducer<unknown>;

package/datepicker/stateful-container.js

@@ -57,7 +57,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, StatefulContainer);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props); // @ts-ignore
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (data) {
       var date = data.date;
@@ -102,7 +102,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
   _createClass(StatefulContainer, [{
     key: "internalSetState",
     value: function internalSetState(type, changes) {
-      var stateReducer = this.props.stateReducer;
+      var stateReducer = this.props.stateReducer; // @ts-ignore
+
       this.setState(function (prevState) {
         return stateReducer(type, changes, prevState);
       });

package/datepicker/stateful-datepicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { StatefulDatepickerProps, DatepickerProps } from './types';
-declare type Props<T> = StatefulDatepickerProps<DatepickerProps<T>, T> & Omit<DatepickerProps<T>, keyof StatefulDatepickerProps<DatepickerProps<T>, T>>;
+type Props<T> = StatefulDatepickerProps<DatepickerProps<T>, T> & Omit<DatepickerProps<T>, keyof StatefulDatepickerProps<DatepickerProps<T>, T>>;
 declare class StatefulComponent<T = Date> extends React.Component<Props<T>> {
     static defaultProps: Props<any>;
     render(): JSX.Element;

package/datepicker/styled-components.d.ts

@@ -21,8 +21,12 @@ export declare const StyledCalendarHeader: import("styletron-react").StyletronCo
 export declare const StyledMonthHeader: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const StyledMonthYearSelectButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps>;
 export declare const StyledMonthYearSelectIconContainer: import("styletron-react").StyletronComponent<"span", {}>;
-export declare const StyledPrevButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps>;
-export declare const StyledNextButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps>;
+export declare const StyledPrevButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps & {
+    $isTrailing: boolean;
+}>;
+export declare const StyledNextButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps & {
+    $isTrailing: boolean;
+}>;
 export declare const StyledMonth: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const StyledWeek: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const StyledDay: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;