baseui 12.2.0 → 13.0.0

package/es/data-table/stateful-data-table.js

@@ -27,7 +27,8 @@ function useResizeObserver(ref, callback) {
       }
     }
   }, [ref]);
-}
+} // @ts-ignore
+
 
 function QueryInput(props) {
   const [css, theme] = useStyletron();
@@ -62,17 +63,20 @@ function QueryInput(props) {
     value: value,
     clearable: true
   }));
-}
+} // @ts-ignore
+
 
 function FilterTag(props) {
   const [, theme] = useStyletron();
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false); // @ts-ignore
+
   const columnIndex = props.columns.findIndex(c => c.title === props.title);
   const column = props.columns[columnIndex];
 
   if (!column) {
     return null;
-  }
+  } // @ts-ignore
+
 
   const data = props.rows.map(r => column.mapDataToValue(r.data));
   const Filter = column.renderFilter;
@@ -81,15 +85,16 @@ function FilterTag(props) {
     returnFocus: true,
     key: props.title,
     isOpen: isOpen,
+    onClick: () => setIsOpen(!isOpen),
     onClickOutside: () => setIsOpen(false),
     content: () => /*#__PURE__*/React.createElement(Filter, {
       close: () => setIsOpen(false),
       data: data,
-      filterParams: props.filter,
+      filterParams: props.filter // @ts-ignore
+      ,
       setFilter: filterParams => props.onFilterAdd(props.title, filterParams)
     })
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
-    onClick: () => setIsOpen(!isOpen),
+  }, /*#__PURE__*/React.createElement(Tag, {
     onActionClick: () => props.onFilterRemove(props.title),
     overrides: {
       Root: {
@@ -116,7 +121,7 @@ function FilterTag(props) {
         }
       }
     }
-  }, props.title, ": ", props.filter.description)));
+  }, props.title, ": ", props.filter.description));
 }
 
 export function StatefulDataTable(props) {
@@ -199,6 +204,7 @@ export function StatefulDataTable(props) {
       paddingBottom: theme.sizing.scale300
     })
   }, props.batchActions.map(action => {
+    // @ts-ignore
     function onClick(event) {
       action.onClick({
         clearSelection: onSelectNone,

package/es/data-table/text-search.js

@@ -30,6 +30,7 @@ export function splitByQuery(text, query) {
     i === start - 1 || // query
     i === start + query.length - 1 || // suffix
     i === text.length - 1) {
+      // @ts-ignore
       substrings.push(substring);
       substring = '';
     }

package/es/datepicker/calendar-header.js

@@ -25,6 +25,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
 const navBtnStyle = ({
   $theme
 }) => ({
@@ -38,7 +39,24 @@ const MAX_MONTH = 11;
 const 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) {
+  let adjustedMonth = Number(monthId) - order;
+  let 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);
@@ -46,7 +64,7 @@ function idToYearMonth(id) {
 
 export default class CalendarHeader extends React.Component {
   constructor(props) {
-    super(props);
+    super(props); // @ts-ignore
 
     _defineProperty(this, "dateHelpers", void 0);
 
@@ -121,7 +139,7 @@ export default class CalendarHeader extends React.Component {
         length: 12 - monthOfMinDate
       }, (x, i) => i + monthOfMinDate);
       const maxMinYearMonthsIntersection = maxYearMonths.filter(year => minYearMonths.includes(year));
-      const filterMonthsList = year === maxYear && year === minYear ? maxMinYearMonthsIntersection : year === maxYear ? maxYearMonths : year === minYear ? minYearMonths : null;
+      const filterMonthsList = year === maxYear && year === minYear ? maxMinYearMonthsIntersection : year === maxYear ? maxYearMonths : year === minYear ? minYearMonths : null; // @ts-ignore
 
       const formatMonthLabel = month => this.dateHelpers.getMonthInLocale(month, this.props.locale);
 
@@ -232,6 +250,7 @@ export default class CalendarHeader extends React.Component {
       let clickHandler = this.decreaseMonth;
 
       if (allPrevDaysDisabled) {
+        // @ts-ignore
         clickHandler = null;
       }
 
@@ -243,7 +262,8 @@ export default class CalendarHeader extends 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: {
@@ -292,6 +312,7 @@ export default class CalendarHeader extends React.Component {
       // on click or do nothing
 
       if (allNextDaysDisabled) {
+        // @ts-ignore
         clickHandler = null;
       }
 
@@ -303,7 +324,9 @@ export default class CalendarHeader extends 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: {
@@ -328,6 +351,7 @@ export default class CalendarHeader extends React.Component {
       const date = this.getDateProp();
       const month = this.dateHelpers.getMonth(date);
       const year = this.dateHelpers.getYear(date);
+      const order = this.props.order;
       const {
         locale,
         overrides = {},
@@ -349,7 +373,7 @@ export default class CalendarHeader extends React.Component {
       const initialYearIndex = this.yearItems.findIndex(year => year.id === this.dateHelpers.getYear(date).toString());
       const monthTitle = `${this.dateHelpers.getMonthInLocale(this.dateHelpers.getMonth(date), locale)}`;
       const yearTitle = `${this.dateHelpers.getYear(date)}`;
-      return this.isMultiMonthHorizontal() ? /*#__PURE__*/React.createElement("div", null, `${monthTitle} ${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,
@@ -370,16 +394,20 @@ export default class CalendarHeader extends React.Component {
             highlightedIndex: initialMonthIndex,
             isFocused: true
           },
-          items: this.monthItems,
+          items: this.monthItems // @ts-ignore
+          ,
           onItemSelect: ({
             item,
             event
           }) => {
             event.preventDefault();
-            const month = idToYearMonth(item.id);
+            const {
+              adjustedMonthId,
+              adjustedYear
+            } = adjustForCalendarOrder(item.id, year, order);
             const updatedDate = this.dateHelpers.set(date, {
-              year,
-              month
+              year: adjustedYear,
+              month: idToYearMonth(adjustedMonthId)
             });
             this.props.onMonthChange && this.props.onMonthChange({
               date: updatedDate
@@ -393,14 +421,16 @@ export default class CalendarHeader extends React.Component {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: this.state.isFocusVisible,
-        $density: density,
+        $density: density // @ts-ignore
+        ,
         onKeyUp: event => {
           if (this.canArrowsOpenDropdown(event)) {
             this.setState({
               isMonthDropdownOpen: true
             });
           }
-        },
+        } // @ts-ignore
+        ,
         onKeyDown: event => {
           if (this.canArrowsOpenDropdown(event)) {
             // disables page scroll
@@ -413,7 +443,9 @@ export default class CalendarHeader extends React.Component {
             });
           }
         }
-      }, monthYearSelectButtonProps), monthTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
+      }, monthYearSelectButtonProps, {
+        "aria-label": `Month, ${monthTitle}`
+      }), monthTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
         title: "",
         overrides: {
           Svg: {
@@ -443,7 +475,8 @@ export default class CalendarHeader extends React.Component {
             highlightedIndex: initialYearIndex,
             isFocused: true
           },
-          items: this.yearItems,
+          items: this.yearItems // @ts-ignore
+          ,
           onItemSelect: ({
             item,
             event
@@ -466,14 +499,16 @@ export default class CalendarHeader extends React.Component {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: this.state.isFocusVisible,
-        $density: density,
+        $density: density // @ts-ignore
+        ,
         onKeyUp: event => {
           if (this.canArrowsOpenDropdown(event)) {
             this.setState({
               isYearDropdownOpen: true
             });
           }
-        },
+        } // @ts-ignore
+        ,
         onKeyDown: event => {
           if (this.canArrowsOpenDropdown(event)) {
             // disables page scroll
@@ -485,7 +520,8 @@ export default class CalendarHeader extends React.Component {
               isYearDropdownOpen: false
             });
           }
-        }
+        },
+        "aria-label": `Year, ${yearTitle}`
       }, monthYearSelectButtonProps), yearTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
         title: "",
         overrides: {
@@ -548,11 +584,15 @@ export default class CalendarHeader extends React.Component {
     }, monthHeaderProps), WEEKDAYS.map(offset => {
       const day = this.dateHelpers.addDays(startOfWeek, offset);
       return /*#__PURE__*/React.createElement(WeekdayHeader, _extends({
-        key: offset,
-        alt: this.dateHelpers.getWeekdayInLocale(day, this.props.locale)
+        key: offset
       }, weekdayHeaderProps, {
         $density: density
-      }), this.dateHelpers.getWeekdayMinInLocale(day, this.props.locale));
+      }), /*#__PURE__*/React.createElement("abbr", {
+        style: {
+          textDecoration: 'none'
+        },
+        title: this.dateHelpers.getWeekdayInLocale(day, this.props.locale)
+      }, this.dateHelpers.getWeekdayMinInLocale(day, this.props.locale)));
     })))));
   }
 
@@ -560,8 +600,11 @@ export default class CalendarHeader extends React.Component {
 
 _defineProperty(CalendarHeader, "defaultProps", {
   adapter: dateFnsAdapter,
+  // @ts-ignore
   locale: null,
+  // @ts-ignore
   maxDate: null,
+  // @ts-ignore
   minDate: null,
   onYearChange: () => {},
   overrides: {}

package/es/datepicker/calendar.js

@@ -20,7 +20,10 @@ 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';
 export default class Calendar extends React.Component {
+  // @ts-ignore
   constructor(props) {
     super(props);
 
@@ -32,8 +35,10 @@ export default class Calendar extends React.Component {
       const {
         highlightedDate,
         value
-      } = this.props;
-      const minDate = this.dateHelpers.getEffectiveMinDate(this.props);
+      } = this.props; // @ts-ignore
+
+      const minDate = this.dateHelpers.getEffectiveMinDate(this.props); // @ts-ignore
+
       const maxDate = this.dateHelpers.getEffectiveMaxDate(this.props);
       const current = this.dateHelpers.date();
       const initialDate = this.getSingleDate(value) || highlightedDate;
@@ -331,10 +336,15 @@ export default class Calendar extends React.Component {
       for (let i = 0; i < (this.props.monthsShown || 1); ++i) {
         const monthSubComponents = [];
         const monthDate = this.dateHelpers.addMonths(this.state.date, i);
-        const monthKey = `month-${i}`;
+        const monthKey = `month-${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: calendar => {
             this.calendar = calendar;
           },
@@ -371,7 +381,8 @@ export default class Calendar extends 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-${i}`
         }, monthSubComponents));
@@ -423,7 +434,8 @@ export default class Calendar extends React.Component {
         label: locale.datepicker.quickSelectLabel
       }, quickSelectFormControlProps), /*#__PURE__*/React.createElement(QuickSelect, _extends({
         "aria-label": locale.datepicker.quickSelectAriaLabel,
-        labelKey: "id",
+        labelKey: "id" // @ts-ignore
+        ,
         onChange: params => {
           if (!params.option) {
             this.setState({
@@ -487,18 +499,56 @@ export default class Calendar extends React.Component {
       }, restQuickSelectProps)))));
     });
 
+    _defineProperty(this, "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 ? /*#__PURE__*/React.createElement(PrimaryButtonComponent, _extends({
+        onClick: () => primaryButton.onClick()
+      }, primaryButtonProps), primaryButton.label) : null;
+      const secondaryButtonComponent = secondaryButton != null ? /*#__PURE__*/React.createElement(SecondaryButtonComponent, _extends({
+        onClick: () => 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;
+    });
+
     const {
       highlightedDate: _highlightedDate,
       value: _value,
       adapter
-    } = this.props;
+    } = this.props; // @ts-ignore
+
     this.dateHelpers = new DateHelpers(adapter);
-    const dateInView = this.getDateInView();
+    const dateInView = this.getDateInView(); // @ts-ignore
+
     let _time = [];
 
     if (Array.isArray(_value)) {
+      // @ts-ignore
       _time = [..._value];
     } else if (_value) {
+      // @ts-ignore
       _time = [_value];
     }
 
@@ -508,6 +558,7 @@ export default class Calendar extends React.Component {
       date: dateInView,
       quickSelectId: null,
       rootElement: null,
+      // @ts-ignore
       time: _time
     };
   }
@@ -585,13 +636,15 @@ export default class Calendar extends React.Component {
     const {
       overrides = {}
     } = this.props;
-    const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+    const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot); // @ts-ignore
+
     const [startDate, endDate] = [].concat(this.props.value);
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
       $density: this.props.density,
       "data-baseweb": "calendar",
       role: "application",
-      "aria-roledescription": "datepicker",
+      "aria-roledescription": "date picker" // @ts-ignore
+      ,
       ref: root => {
         if (root && root instanceof HTMLElement && !this.state.rootElement) {
           this.setState({
@@ -603,7 +656,9 @@ export default class Calendar extends React.Component {
       onKeyDown: this.props.trapTabbing ? this.handleTabbing : null
     }, rootProps), this.renderMonths({
       ariaRoleDescCalMonth: locale.datepicker.ariaRoleDescriptionCalendarMonth
-    }), this.props.timeSelectStart && this.renderTimeSelect(startDate, time => this.handleTimeChange(time, 0), locale.datepicker.timeSelectStartLabel), this.props.timeSelectEnd && this.props.range && this.renderTimeSelect(endDate, time => this.handleTimeChange(time, 1), locale.datepicker.timeSelectEndLabel), this.renderQuickSelect()));
+    }), this.props.timeSelectStart && this.renderTimeSelect(startDate, // @ts-ignore
+    time => this.handleTimeChange(time, 0), locale.datepicker.timeSelectStartLabel), this.props.timeSelectEnd && this.props.range && this.renderTimeSelect(endDate, // @ts-ignore
+    time => this.handleTimeChange(time, 1), locale.datepicker.timeSelectEndLabel), this.renderQuickSelect(), this.renderActionBar()));
   }
 
 }
@@ -630,6 +685,7 @@ _defineProperty(Calendar, "defaultProps", {
   orientation: ORIENTATION.horizontal,
   overrides: {},
   peekNextMonth: false,
+  // @ts-ignore
   adapter: dateFnsAdapter,
   value: null,
   trapTabbing: false

package/es/datepicker/datepicker.js

@@ -20,7 +20,7 @@ import DateHelpers from './utils/date-helpers';
 import dateFnsAdapter from './utils/date-fns-adapter';
 import { INPUT_ROLE, RANGED_CALENDAR_BEHAVIOR } from './constants';
 export const DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
-const INPUT_DELIMITER = '–';
+const INPUT_DELIMITER = '–'; // @ts-ignore
 
 const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', inputRole) => {
   let inputValue = newInputValue;
@@ -39,7 +39,7 @@ const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', inpu
 
 export default class Datepicker extends React.Component {
   constructor(props) {
-    super(props);
+    super(props); // @ts-ignore
 
     _defineProperty(this, "calendar", void 0);
 
@@ -86,7 +86,8 @@ export default class Datepicker extends 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]) {
           const [start, end] = nextDate;
@@ -135,6 +136,12 @@ export default class Datepicker extends 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({
@@ -153,7 +160,8 @@ export default class Datepicker extends React.Component {
         displayValueAtRangeIndex,
         formatDisplayValue,
         range
-      } = this.props;
+      } = this.props; // @ts-ignore
+
       const formatString = this.normalizeDashes(this.props.formatString);
 
       if (typeof displayValueAtRangeIndex === 'number') {
@@ -243,7 +251,8 @@ export default class Datepicker extends React.Component {
 
     _defineProperty(this, "handleInputChange", (event, inputRole) => {
       const inputValue = this.props.range && this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, inputRole) : event.currentTarget.value;
-      const mask = this.getMask();
+      const mask = this.getMask(); // @ts-ignore
+
       const formatString = this.normalizeDashes(this.props.formatString);
 
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
@@ -256,7 +265,7 @@ export default class Datepicker extends React.Component {
 
       this.setState({
         inputValue
-      });
+      }); // @ts-ignore
 
       const parseDateString = dateString => {
         if (formatString === DEFAULT_DATE_FORMAT) {
@@ -288,8 +297,10 @@ export default class Datepicker extends React.Component {
         let date = this.dateHelpers.date(dateString);
         const 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);
@@ -346,7 +357,7 @@ export default class Datepicker extends React.Component {
     _defineProperty(this, "handleKeyDown", 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();
         this.focusCalendar();
@@ -374,6 +385,8 @@ export default class Datepicker extends React.Component {
       return this.props.rangedCalendarBehavior === RANGED_CALENDAR_BEHAVIOR.locked && this.props.range && this.props.separateRangeInputs;
     });
 
+    _defineProperty(this, "getPlaceholder", () => this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? `YYYY/MM/DD ${INPUT_DELIMITER} YYYY/MM/DD` : 'YYYY/MM/DD');
+
     this.dateHelpers = new DateHelpers(props.adapter);
     this.state = {
       calendarFocused: false,
@@ -426,12 +439,12 @@ export default class Datepicker extends React.Component {
       overrides = {}
     } = this.props;
     const [InputComponent, inputProps] = getOverrides(overrides.Input, MaskedInput);
-    const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? `YYYY/MM/DD ${INPUT_DELIMITER} YYYY/MM/DD` : 'YYYY/MM/DD';
+    const inputLabel = this.props['aria-label'] || `${this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel}`;
     const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(` ${INPUT_DELIMITER} `);
     const 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'],
@@ -442,9 +455,10 @@ export default class Datepicker extends React.Component {
       value: value,
       onFocus: () => this.open(inputRole),
       onBlur: this.handleInputBlur,
-      onKeyDown: this.handleKeyDown,
+      onKeyDown: this.handleKeyDown // @ts-ignore
+      ,
       onChange: event => this.handleInputChange(event, inputRole),
-      placeholder: placeholder,
+      placeholder: this.getPlaceholder(),
       mask: this.getMask(),
       required: this.props.required,
       clearable: this.props.clearable
@@ -462,6 +476,8 @@ export default class Datepicker extends React.Component {
     const [StartDate, startDateProps] = getOverrides(overrides.StartDate, StyledStartDate);
     const [EndDate, endDateProps] = getOverrides(overrides.EndDate, StyledEndDate);
     const [InputLabel, inputLabelProps] = getOverrides(overrides.InputLabel, StyledInputLabel);
+    const singleDateFormatString = this.props.formatString || DEFAULT_DATE_FORMAT;
+    const formatString = this.props.range && !this.props.separateRangeInputs ? `${singleDateFormatString} ${INPUT_DELIMITER} ${singleDateFormatString}` : singleDateFormatString;
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
       accessibilityType: ACCESSIBILITY_TYPE.none,
       focusLock: false,
@@ -484,6 +500,7 @@ export default class Datepicker extends React.Component {
     }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, _extends({}, inputWrapperProps, {
       $separateRangeInputs: this.props.range && this.props.separateRangeInputs
     }), this.props.range && this.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), this.renderInputComponent(locale, INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), this.renderInputComponent(locale, INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, this.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
+      // @ts-ignore
       id: this.props['aria-describedby'],
       style: {
         position: 'fixed',
@@ -498,7 +515,9 @@ export default class Datepicker extends 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',
@@ -531,6 +550,7 @@ export default class Datepicker extends React.Component {
 
 _defineProperty(Datepicker, "defaultProps", {
   'aria-describedby': 'datepicker--screenreader--message--input',
+  // @ts-ignore
   value: null,
   formatString: DEFAULT_DATE_FORMAT,
   adapter: dateFnsAdapter

package/es/datepicker/day.js

@@ -17,6 +17,7 @@ import { LocaleContext } from '../locale';
 import { isFocusVisible } from '../utils/focusVisible';
 import { INPUT_ROLE } from './constants';
 export default class Day extends React.Component {
+  // @ts-ignore
   constructor(props) {
     super(props);
 
@@ -50,10 +51,14 @@ export default class Day extends React.Component {
         let 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;
         }
 
@@ -373,7 +378,8 @@ export default class Day extends React.Component {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Day, _extends({
-      "aria-label": this.getAriaLabel(sharedProps, locale),
+      "aria-label": this.getAriaLabel(sharedProps, locale) // @ts-ignore
+      ,
       ref: dayElm => {
         this.dayElm = dayElm;
       },
@@ -409,5 +415,6 @@ _defineProperty(Day, "defaultProps", {
   onMouseLeave: () => {},
   overrides: {},
   peekNextMonth: true,
+  // @ts-ignore
   value: null
 });