baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/esm/data-table/filter-menu.js

@@ -64,6 +64,7 @@ function Options(props) {
   var inputRef = React.useRef(null);
   React.useEffect(function () {
     if (inputRef.current) {
+      // @ts-ignore
       inputRef.current.focus();
     }
   }, [inputRef.current]);
@@ -77,6 +78,8 @@ function Options(props) {
   var buiRef = React.useRef(props.columns.map(function (col) {
     return seed(col);
   }));
+  var activeDescendant = buiRef.current[props.highlightIndex] ? "bui-".concat(buiRef.current[props.highlightIndex]) : undefined;
+  var optionsLabelId = seed('options-label');
 
   var handleFocus = function handleFocus(event) {
     if (isFocusVisible(event)) {
@@ -100,6 +103,7 @@ function Options(props) {
       paddingBottom: theme.sizing.scale600
     })
   }, /*#__PURE__*/React.createElement("p", {
+    id: optionsLabelId,
     className: css(_objectSpread(_objectSpread({}, theme.typography.font100), {}, {
       marginTop: 'unset',
       paddingRight: theme.sizing.scale600,
@@ -131,7 +135,8 @@ function Options(props) {
     onBlur: handleBlur,
     tabIndex: 0,
     role: "listbox",
-    "aria-activedescendant": "bui-".concat(buiRef.current[props.highlightIndex]),
+    "aria-activedescendant": activeDescendant,
+    "aria-labelledby": optionsLabelId,
     className: css({
       listStyleType: 'none',
       marginBlockStart: 'unset',
@@ -160,6 +165,7 @@ function Options(props) {
         key: column.title,
         className: css(_objectSpread(_objectSpread({}, theme.typography.font100), {}, {
           alignItems: 'center',
+          // @ts-ignore
           backgroundColor: isHighlighted ? theme.colors.menuFillHover : null,
           cursor: 'pointer',
           display: 'flex',
@@ -232,7 +238,8 @@ function FilterMenu(props) {
     });
   }, [filterableColumns, query]);
   var Filter = React.useMemo(function () {
-    if (!activeColumn) return null;
+    if (!activeColumn) return null; // @ts-ignore
+
     return activeColumn.renderFilter;
   }, [activeColumn]);
   var activeColumnData = React.useMemo(function () {
@@ -243,11 +250,12 @@ function FilterMenu(props) {
     return props.rows.map(function (row) {
       return props.columns[columnIndex].mapDataToValue(row.data);
     });
-  }, [props.columns, props.rows, activeColumn]);
+  }, [props.columns, props.rows, activeColumn]); // @ts-ignore
 
   function handleKeyDown(event) {
     if (event.keyCode === 13) {
-      event.preventDefault();
+      event.preventDefault(); // @ts-ignore
+
       setActiveColumn(columns[highlightIndex]);
     }
 
@@ -275,7 +283,8 @@ function FilterMenu(props) {
       if (Filter && activeColumn) {
         return /*#__PURE__*/React.createElement(Filter, {
           data: activeColumnData,
-          close: handleClose,
+          close: handleClose // @ts-ignore
+          ,
           setFilter: function setFilter(filterParams) {
             return props.onSetFilter(activeColumn.title, filterParams);
           }
@@ -284,7 +293,8 @@ function FilterMenu(props) {
 
       return /*#__PURE__*/React.createElement(Options, {
         columns: columns,
-        highlightIndex: highlightIndex,
+        highlightIndex: highlightIndex // @ts-ignore
+        ,
         onClick: handleOptionClick,
         onKeyDown: handleKeyDown,
         onMouseEnter: setHighlightIndex,

package/esm/data-table/header-cell.js

@@ -86,11 +86,13 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     checked: props.isSelectedAll || props.isSelectedIndeterminate,
     isIndeterminate: props.isSelectedIndeterminate
   })), /*#__PURE__*/React.createElement("div", {
+    "aria-label": locale.datatable.sortColumn,
     className: css({
       alignItems: 'center',
       backgroundColor: 'transparent',
       border: 'none',
       boxSizing: 'border-box',
+      // @ts-ignore
       cursor: props.sortable ? 'pointer' : null,
       display: 'flex',
       flexGrow: 1,

package/esm/data-table/locale.js

@@ -17,6 +17,7 @@ var locale = {
   optionsLabel: 'Select column to filter by',
   optionsSearch: 'Search for a column to filter by...',
   optionsEmpty: 'No columns available.',
+  categoricalFilterSearchLabel: 'Search categories',
   categoricalFilterSelectAll: 'Select All',
   categoricalFilterSelectClear: 'Clear',
   categoricalFilterEmpty: 'No categories found',
@@ -39,6 +40,7 @@ var locale = {
   booleanColumnTrueShort: 'T',
   booleanColumnFalseShort: 'F',
   selectRow: 'Select row',
-  selectAllRows: 'Select all rows'
+  selectAllRows: 'Select all rows',
+  sortColumn: 'Sort column'
 };
 export default locale;

package/esm/data-table/measure-column-widths.js

@@ -20,6 +20,7 @@ import * as React from 'react';
 import { useStyletron } from '../styles';
 import HeaderCell from './header-cell';
 import { useRef } from 'react'; // Measures the column header + sampled data
+// @ts-ignore
 
 function MeasureColumn(_ref) {
   var sampleIndexes = _ref.sampleIndexes,
@@ -42,6 +43,7 @@ function MeasureColumn(_ref) {
     }
   }, [onLayout]);
   return /*#__PURE__*/React.createElement("div", {
+    // @ts-ignore
     ref: ref,
     className: css({
       display: 'flex',
@@ -60,7 +62,8 @@ function MeasureColumn(_ref) {
     onSelectNone: function onSelectNone() {} // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ,
     onSort: function onSort(i) {},
-    sortable: column.sortable,
+    sortable: column.sortable // @ts-ignore
+    ,
     sortDirection: null,
     title: column.title,
     isSelectable: isSelectable
@@ -78,20 +81,22 @@ function MeasureColumn(_ref) {
   }));
 }
 
-var MAX_SAMPLE_SIZE = 50;
+var MAX_SAMPLE_SIZE = 50; // @ts-ignore
 
 function generateSampleIndices(inputMin, inputMax, maxSamples) {
   var indices = [];
   var queue = [[inputMin, inputMax]];
 
   while (queue.length > 0) {
+    // @ts-ignore
     var _queue$shift = queue.shift(),
         _queue$shift2 = _slicedToArray(_queue$shift, 2),
         min = _queue$shift2[0],
         max = _queue$shift2[1];
 
     if (indices.length < maxSamples) {
-      var pivot = Math.floor((min + max) / 2);
+      var pivot = Math.floor((min + max) / 2); // @ts-ignore
+
       indices.push(pivot);
       var left = pivot - 1;
       var right = pivot + 1;
@@ -152,23 +157,19 @@ export default function MeasureColumnWidths(_ref2) {
     return null;
   }
 
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    React.createElement("div", {
-      className: hiddenStyle,
-      "aria-hidden": true,
-      role: "none"
-    }, columns.map(function (column, i) {
-      return /*#__PURE__*/React.createElement(MeasureColumn, {
-        key: column.title + i,
-        column: column,
-        rows: rows,
-        isSelectable: isSelectable,
-        onLayout: handleDimensionsChange,
-        columnIndex: i,
-        sampleIndexes: sampleIndexes
-      });
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: hiddenStyle,
+    "aria-hidden": "true",
+    role: "none"
+  }, columns.map(function (column, i) {
+    return /*#__PURE__*/React.createElement(MeasureColumn, {
+      key: column.title + i,
+      column: column,
+      rows: rows,
+      isSelectable: isSelectable,
+      onLayout: handleDimensionsChange,
+      columnIndex: i,
+      sampleIndexes: sampleIndexes
+    });
+  }));
 }

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

@@ -67,7 +67,8 @@ export 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;
@@ -92,7 +93,8 @@ export var StatefulContainer = function StatefulContainer(props) {
     if (props.onSort) {
       props.onSort(nextSortIndex, nextSortDirection);
     }
-  }
+  } // @ts-ignore
+
 
   function handleTextQueryChange(nextTextQuery) {
     setTextQuery(nextTextQuery);
@@ -100,7 +102,8 @@ export var StatefulContainer = function StatefulContainer(props) {
     if (props.onTextQueryChange) {
       props.onTextQueryChange(nextTextQuery);
     }
-  }
+  } // @ts-ignore
+
 
   function handleFilterAdd(title, filterParams) {
     filters.set(title, filterParams);
@@ -110,7 +113,8 @@ export var StatefulContainer = function StatefulContainer(props) {
     }
 
     setFilters(new Map(filters));
-  }
+  } // @ts-ignore
+
 
   function handleFilterRemove(title) {
     filters.delete(title);
@@ -120,7 +124,8 @@ export var StatefulContainer = function StatefulContainer(props) {
     }
 
     setFilters(new Map(filters));
-  }
+  } // @ts-ignore
+
 
   function handleSelectChange(next) {
     setSelectedRowIds(next);
@@ -131,10 +136,12 @@ export 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;
     })))));
@@ -142,7 +149,8 @@ export var StatefulContainer = function StatefulContainer(props) {
 
   function handleSelectNone() {
     handleSelectChange(new Set());
-  }
+  } // @ts-ignore
+
 
   function handleSelectOne(row) {
     if (selectedRowIds.has(row.id)) {
@@ -179,6 +187,7 @@ export 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/esm/data-table/stateful-data-table.js

@@ -41,7 +41,8 @@ function useResizeObserver(ref, callback) {
       }
     }
   }, [ref]);
-}
+} // @ts-ignore
+
 
 function QueryInput(props) {
   var _useStyletron = useStyletron(),
@@ -91,7 +92,8 @@ function QueryInput(props) {
     value: value,
     clearable: true
   }));
-}
+} // @ts-ignore
+
 
 function FilterTag(props) {
   var _useStyletron3 = useStyletron(),
@@ -101,7 +103,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;
@@ -110,7 +113,8 @@ function FilterTag(props) {
 
   if (!column) {
     return null;
-  }
+  } // @ts-ignore
+
 
   var data = props.rows.map(function (r) {
     return column.mapDataToValue(r.data);
@@ -121,6 +125,9 @@ function FilterTag(props) {
     returnFocus: true,
     key: props.title,
     isOpen: isOpen,
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    },
     onClickOutside: function onClickOutside() {
       return setIsOpen(false);
     },
@@ -130,16 +137,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, {
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    },
+  }, /*#__PURE__*/React.createElement(Tag, {
     onActionClick: function onActionClick() {
       return props.onFilterRemove(props.title);
     },
@@ -168,7 +173,7 @@ function FilterTag(props) {
         }
       }
     }
-  }, props.title, ": ", props.filter.description)));
+  }, props.title, ": ", props.filter.description));
 }
 
 export function StatefulDataTable(props) {
@@ -266,6 +271,7 @@ export function StatefulDataTable(props) {
         paddingBottom: theme.sizing.scale300
       })
     }, props.batchActions.map(function (action) {
+      // @ts-ignore
       function onClick(event) {
         action.onClick({
           clearSelection: onSelectNone,

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

@@ -48,6 +48,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/esm/datepicker/calendar-header.js

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