baseui 12.2.0 → 13.0.0

package/data-table/stateful-container.js

@@ -75,7 +75,8 @@ var StatefulContainer = function StatefulContainer(props) {
   var _React$useState9 = React.useState(props.initialSelectedRowIds || new Set()),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       selectedRowIds = _React$useState10[0],
-      setSelectedRowIds = _React$useState10[1];
+      setSelectedRowIds = _React$useState10[1]; // @ts-ignore
+
 
   function handleSort(columnIndex) {
     var nextSortIndex;
@@ -100,7 +101,8 @@ var StatefulContainer = function StatefulContainer(props) {
     if (props.onSort) {
       props.onSort(nextSortIndex, nextSortDirection);
     }
-  }
+  } // @ts-ignore
+
 
   function handleTextQueryChange(nextTextQuery) {
     setTextQuery(nextTextQuery);
@@ -108,7 +110,8 @@ var StatefulContainer = function StatefulContainer(props) {
     if (props.onTextQueryChange) {
       props.onTextQueryChange(nextTextQuery);
     }
-  }
+  } // @ts-ignore
+
 
   function handleFilterAdd(title, filterParams) {
     filters.set(title, filterParams);
@@ -118,7 +121,8 @@ var StatefulContainer = function StatefulContainer(props) {
     }
 
     setFilters(new Map(filters));
-  }
+  } // @ts-ignore
+
 
   function handleFilterRemove(title) {
     filters.delete(title);
@@ -128,7 +132,8 @@ var StatefulContainer = function StatefulContainer(props) {
     }
 
     setFilters(new Map(filters));
-  }
+  } // @ts-ignore
+
 
   function handleSelectChange(next) {
     setSelectedRowIds(next);
@@ -139,10 +144,12 @@ var StatefulContainer = function StatefulContainer(props) {
         return next.has(r.id);
       }));
     }
-  }
+  } // @ts-ignore
+
 
   function handleSelectMany(incomingRows) {
     // only adds rows that are visible in the table
+    // @ts-ignore
     handleSelectChange(new Set([].concat(_toConsumableArray(selectedRowIds), _toConsumableArray(incomingRows.map(function (r) {
       return r.id;
     })))));
@@ -150,7 +157,8 @@ var StatefulContainer = function StatefulContainer(props) {
 
   function handleSelectNone() {
     handleSelectChange(new Set());
-  }
+  } // @ts-ignore
+
 
   function handleSelectOne(row) {
     if (selectedRowIds.has(row.id)) {
@@ -187,6 +195,7 @@ var StatefulContainer = function StatefulContainer(props) {
     rowHighlightIndex: props.rowHighlightIndex,
     selectedRowIds: selectedRowIds,
     sortIndex: sortIndex,
+    // @ts-ignore
     sortDirection: sortDirection,
     textQuery: textQuery // eslint-disable-next-line @typescript-eslint/no-explicit-any
 

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

@@ -61,7 +61,8 @@ function useResizeObserver(ref, callback) {
       }
     }
   }, [ref]);
-}
+} // @ts-ignore
+
 
 function QueryInput(props) {
   var _useStyletron = (0, _styles.useStyletron)(),
@@ -111,7 +112,8 @@ function QueryInput(props) {
     value: value,
     clearable: true
   }));
-}
+} // @ts-ignore
+
 
 function FilterTag(props) {
   var _useStyletron3 = (0, _styles.useStyletron)(),
@@ -121,7 +123,8 @@ function FilterTag(props) {
   var _React$useState3 = React.useState(false),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       isOpen = _React$useState4[0],
-      setIsOpen = _React$useState4[1];
+      setIsOpen = _React$useState4[1]; // @ts-ignore
+
 
   var columnIndex = props.columns.findIndex(function (c) {
     return c.title === props.title;
@@ -130,7 +133,8 @@ function FilterTag(props) {
 
   if (!column) {
     return null;
-  }
+  } // @ts-ignore
+
 
   var data = props.rows.map(function (r) {
     return column.mapDataToValue(r.data);
@@ -141,6 +145,9 @@ function FilterTag(props) {
     returnFocus: true,
     key: props.title,
     isOpen: isOpen,
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    },
     onClickOutside: function onClickOutside() {
       return setIsOpen(false);
     },
@@ -150,16 +157,14 @@ function FilterTag(props) {
           return setIsOpen(false);
         },
         data: data,
-        filterParams: props.filter,
+        filterParams: props.filter // @ts-ignore
+        ,
         setFilter: function setFilter(filterParams) {
           return props.onFilterAdd(props.title, filterParams);
         }
       });
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_tag.Tag, {
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    },
+  }, /*#__PURE__*/React.createElement(_tag.Tag, {
     onActionClick: function onActionClick() {
       return props.onFilterRemove(props.title);
     },
@@ -188,7 +193,7 @@ function FilterTag(props) {
         }
       }
     }
-  }, props.title, ": ", props.filter.description)));
+  }, props.title, ": ", props.filter.description));
 }
 
 function StatefulDataTable(props) {
@@ -286,6 +291,7 @@ function StatefulDataTable(props) {
         paddingBottom: theme.sizing.scale300
       })
     }, props.batchActions.map(function (action) {
+      // @ts-ignore
       function onClick(event) {
         action.onClick({
           clearSelection: onSelectNone,

package/data-table/text-search.js

@@ -56,6 +56,7 @@ 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/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,14 +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<{}>;
@@ -99,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;
@@ -119,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/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;
 }