baseui 12.1.3 → 13.0.0

package/data-table/types.d.ts

@@ -1,8 +1,8 @@
 import type * as React from 'react';
 import type { COLUMNS, SORT_DIRECTIONS } from './constants';
-export declare type SortDirections = typeof SORT_DIRECTIONS[keyof typeof SORT_DIRECTIONS];
-export declare type Columns = typeof COLUMNS[keyof typeof COLUMNS];
-export declare type SharedColumnOptions<Value> = {
+export type SortDirections = (typeof SORT_DIRECTIONS)[keyof typeof SORT_DIRECTIONS];
+export type Columns = (typeof COLUMNS)[keyof typeof COLUMNS];
+export type SharedColumnOptions<Value> = {
     cellBlockAlign?: 'start' | 'center' | 'end';
     fillWidth?: boolean;
     filterable?: boolean;
@@ -12,7 +12,7 @@ export declare type SharedColumnOptions<Value> = {
     sortable?: boolean;
     title: string;
 };
-export declare type RenderCell<Value> = React.ComponentType<{
+export type RenderCell<Value> = React.ComponentType<{
     value: Value;
     isMeasured?: boolean;
     isSelected?: boolean;
@@ -21,13 +21,13 @@ export declare type RenderCell<Value> = React.ComponentType<{
     x: number;
     y: number;
 }>;
-export declare type RenderFilter<Value, FilterParams> = React.ComponentType<{
+export type RenderFilter<Value, FilterParams> = React.ComponentType<{
     close: () => void;
     data: Value[];
     filterParams?: FilterParams;
     setFilter: (a: FilterParams) => void;
 }>;
-export declare type ColumnOptions<Value = any, FilterParams = any> = {
+export type ColumnOptions<Value = any, FilterParams = any> = {
     kind: Columns;
     sortable: boolean;
     renderCell: RenderCell<Value>;
@@ -36,11 +36,11 @@ export declare type ColumnOptions<Value = any, FilterParams = any> = {
     textQueryFilter?: (b: string, a: Value) => boolean;
     sortFn: (b: Value, a: Value) => number;
 } & SharedColumnOptions<Value>;
-export declare type Row = {
+export type Row = {
     id: number | string;
     data: any;
 };
-export declare type BatchAction = {
+export type BatchAction = {
     label: string;
     onClick: (a: {
         clearSelection: () => unknown;
@@ -51,7 +51,7 @@ export declare type BatchAction = {
         size: number;
     } & any>;
 };
-export declare type RowAction = {
+export type RowAction = {
     label: string;
     onClick: (a: {
         event: React.SyntheticEvent<HTMLButtonElement>;
@@ -62,13 +62,14 @@ export declare type RowAction = {
     } & any>;
     renderButton?: React.ComponentType<{}>;
 };
-export declare type ImperativeMethods = {
+export type ImperativeMethods = {
     getRows: () => Row[];
+    clearSelection: () => void;
 };
-export declare type ControlRef = {
+export type ControlRef = {
     current: ImperativeMethods | null;
 };
-export declare type StatefulDataTableProps = {
+export type StatefulDataTableProps = {
     batchActions?: BatchAction[];
     columns: ColumnOptions[];
     emptyMessage?: string | React.ComponentType<{}>;
@@ -88,6 +89,8 @@ export declare type StatefulDataTableProps = {
     onIncludedRowsChange?: (rows: Row[]) => void;
     onRowHighlightChange?: (rowIndex: number, row: Row) => void;
     onSelectionChange?: (a: Row[]) => unknown;
+    onSort?: (columnIndex: number, sortDirection: SortDirections) => void;
+    onTextQueryChange?: (textQuery: string) => void;
     resizableColumnWidths?: boolean;
     rows: Row[];
     rowActions?: RowAction[] | ((a: Row) => RowAction[]);
@@ -96,7 +99,7 @@ export declare type StatefulDataTableProps = {
     searchable?: boolean;
     controlRef?: ControlRef;
 };
-export declare type DataTableProps = {
+export type DataTableProps = {
     emptyMessage?: string | React.ComponentType<{}>;
     filters?: Map<string, {
         description: string;
@@ -116,7 +119,7 @@ export declare type DataTableProps = {
     sortDirection?: SortDirections;
     textQuery?: string;
 } & StatefulDataTableProps;
-export declare type StatefulContainerProps = {
+export type StatefulContainerProps = {
     children: (a: {
         filters: Map<string, {
             description: string;

package/data-table/types.js.flow

@@ -89,6 +89,7 @@ export type RowActionT = {|
 
 type ImperativeMethodsT = {|
   getRows: () => RowT[],
+  clearSelection: () => mixed,
 |};
 export type ControlRefT = {
   current: ImperativeMethodsT | null,
@@ -110,6 +111,7 @@ export type StatefulDataTablePropsT = {|
   onIncludedRowsChange?: (rows: RowT[]) => void,
   onRowHighlightChange?: (rowIndex: number, row: RowT) => void,
   onSelectionChange?: (RowT[]) => mixed,
+  onSort?: (columnIndex: number, sortDirection: SortDirectionsT) => void,
   resizableColumnWidths?: boolean,
   rows: RowT[],
   rowActions?: RowActionT[] | ((RowT) => RowActionT[]),

package/datepicker/calendar-header.js

@@ -84,6 +84,7 @@ 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; }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 var navBtnStyle = function navBtnStyle(_ref) {
   var $theme = _ref.$theme;
   return {
@@ -98,7 +99,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);
@@ -114,7 +132,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);
 
@@ -208,7 +226,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);
@@ -331,6 +349,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       var clickHandler = _this.decreaseMonth;
 
       if (allPrevDaysDisabled) {
+        // @ts-ignore
         clickHandler = null;
       }
 
@@ -342,7 +361,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 === _constants.DENSITY.high ? 24 : 36,
         overrides: {
@@ -403,6 +423,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       // on click or do nothing
 
       if (allNextDaysDisabled) {
+        // @ts-ignore
         clickHandler = null;
       }
 
@@ -414,7 +435,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 === _constants.DENSITY.high ? 24 : 36,
         overrides: {
@@ -442,6 +465,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,
@@ -487,7 +511,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,
@@ -515,16 +539,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({
@@ -541,14 +569,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
@@ -561,7 +591,9 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             });
           }
         }
-      }, monthYearSelectButtonProps), monthTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(_chevronDown.default, {
+      }, monthYearSelectButtonProps, {
+        "aria-label": "Month, ".concat(monthTitle)
+      }), monthTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(_chevronDown.default, {
         title: "",
         overrides: {
           Svg: {
@@ -598,7 +630,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;
@@ -624,14 +657,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
@@ -643,7 +678,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.default, {
         title: "",
         overrides: {
@@ -729,11 +765,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)));
           })));
         });
       });
@@ -747,8 +787,11 @@ exports.default = CalendarHeader;
 
 _defineProperty(CalendarHeader, "defaultProps", {
   adapter: _dateFnsAdapter.default,
+  // @ts-ignore
   locale: null,
+  // @ts-ignore
   maxDate: null,
+  // @ts-ignore
   minDate: null,
   onYearChange: function onYearChange() {},
   overrides: {}

package/datepicker/calendar-header.js.flow

@@ -460,6 +460,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
                 this.setState({ isMonthDropdownOpen: false });
               }
             }}
+            aria-label={`Month, ${monthTitle}`}
             {...monthYearSelectButtonProps}
           >
             {monthTitle}
@@ -527,6 +528,7 @@ export default class CalendarHeader<T = Date> extends React.Component<
                 this.setState({ isYearDropdownOpen: false });
               }
             }}
+            aria-label={`Year, ${yearTitle}`}
             {...monthYearSelectButtonProps}
           >
             {yearTitle}
@@ -579,13 +581,13 @@ export default class CalendarHeader<T = Date> extends React.Component<
                   {WEEKDAYS.map((offset) => {
                     const day = this.dateHelpers.addDays(startOfWeek, offset);
                     return (
-                      <WeekdayHeader
-                        key={offset}
-                        alt={this.dateHelpers.getWeekdayInLocale(day, this.props.locale)}
-                        {...weekdayHeaderProps}
-                        $density={density}
-                      >
-                        {this.dateHelpers.getWeekdayMinInLocale(day, this.props.locale)}
+                      <WeekdayHeader key={offset} {...weekdayHeaderProps} $density={density}>
+                        <abbr
+                          style={{ textDecoration: 'none' }}
+                          title={this.dateHelpers.getWeekdayInLocale(day, this.props.locale)}
+                        >
+                          {this.dateHelpers.getWeekdayMinInLocale(day, this.props.locale)}
+                        </abbr>
                       </WeekdayHeader>
                     );
                   })}

package/datepicker/calendar.d.ts

@@ -52,5 +52,6 @@ export default class Calendar<T = Date> extends React.Component<CalendarProps<T>
     }) => JSX.Element;
     renderTimeSelect: (c: T | undefined | null, b: Function, a: string) => React.ReactNode;
     renderQuickSelect: () => JSX.Element;
+    renderActionBar: () => JSX.Element;
     render(): JSX.Element;
 }

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>