baseui 12.1.3 → 13.0.0

package/data-table/filter-menu.js

@@ -79,6 +79,7 @@ function Options(props) {
 
   _react.default.useEffect(function () {
     if (inputRef.current) {
+      // @ts-ignore
       inputRef.current.focus();
     }
   }, [inputRef.current]);
@@ -94,6 +95,9 @@ function Options(props) {
     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 ((0, _focusVisible.isFocusVisible)(event)) {
       setFocusVisible(true);
@@ -116,6 +120,7 @@ function Options(props) {
       paddingBottom: theme.sizing.scale600
     })
   }, /*#__PURE__*/_react.default.createElement("p", {
+    id: optionsLabelId,
     className: css(_objectSpread(_objectSpread({}, theme.typography.font100), {}, {
       marginTop: 'unset',
       paddingRight: theme.sizing.scale600,
@@ -147,7 +152,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',
@@ -176,6 +182,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',
@@ -252,7 +259,8 @@ function FilterMenu(props) {
   }, [filterableColumns, query]);
 
   var Filter = _react.default.useMemo(function () {
-    if (!activeColumn) return null;
+    if (!activeColumn) return null; // @ts-ignore
+
     return activeColumn.renderFilter;
   }, [activeColumn]);
 
@@ -264,11 +272,13 @@ 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]);
     }
 
@@ -296,7 +306,8 @@ function FilterMenu(props) {
       if (Filter && activeColumn) {
         return /*#__PURE__*/_react.default.createElement(Filter, {
           data: activeColumnData,
-          close: handleClose,
+          close: handleClose // @ts-ignore
+          ,
           setFilter: function setFilter(filterParams) {
             return props.onSetFilter(activeColumn.title, filterParams);
           }
@@ -305,7 +316,8 @@ function FilterMenu(props) {
 
       return /*#__PURE__*/_react.default.createElement(Options, {
         columns: columns,
-        highlightIndex: highlightIndex,
+        highlightIndex: highlightIndex // @ts-ignore
+        ,
         onClick: handleOptionClick,
         onKeyDown: handleKeyDown,
         onMouseEnter: setHighlightIndex,

package/data-table/filter-shell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type ExcludeKind = 'value' | 'range';
-declare type Props = {
+export type ExcludeKind = 'value' | 'range';
+type Props = {
     children: React.ReactNode;
     exclude: boolean;
     excludeKind?: ExcludeKind;

package/data-table/header-cell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SortDirections } from './types';
-declare type HeaderCellProps = {
+type HeaderCellProps = {
     index: number;
     isHovered: boolean;
     isMeasured?: boolean;

package/data-table/header-cell.js

@@ -103,11 +103,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/data-table/index.d.ts

@@ -17,12 +17,12 @@ export { COLUMNS, DATETIME_OPERATIONS, NUMERICAL_FORMATS, SORT_DIRECTIONS } from
 export * from './types';
 export type { DataTableLocale } from './locale';
 /** @deprecated use SortDirections instead. To be removed in future versions.*/
-export declare type SortDirectionsT = SortDirections;
+export type SortDirectionsT = SortDirections;
 /** @deprecated use ColumnOptions instead. To be removed in future versions.*/
-export declare type ColumnT = ColumnOptions;
+export type ColumnT = ColumnOptions;
 /** @deprecated use Row instead. To be removed in future versions.*/
-export declare type RowT = Row;
+export type RowT = Row;
 /** @deprecated use BatchAction instead. To be removed in future versions.*/
-export declare type BatchActionT = BatchAction;
+export type BatchActionT = BatchAction;
 /** @deprecated use RowAction instead. To be removed in future versions.*/
-export declare type RowActionT = RowAction;
+export type RowActionT = RowAction;

package/data-table/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type DataTableLocale = {
+export type DataTableLocale = {
     emptyState: string;
     loadingState: string;
     searchAriaLabel: string;
@@ -11,6 +11,7 @@ export declare type DataTableLocale = {
     optionsLabel: string;
     optionsSearch: string;
     optionsEmpty: string;
+    categoricalFilterSearchLabel: string;
     categoricalFilterSelectAll: string;
     categoricalFilterSelectClear: string;
     categoricalFilterEmpty: string;
@@ -34,6 +35,7 @@ export declare type DataTableLocale = {
     booleanColumnFalseShort: string;
     selectRow: string;
     selectAllRows: string;
+    sortColumn: string;
 };
 declare const locale: {
     emptyState: string;
@@ -48,6 +50,7 @@ declare const locale: {
     optionsLabel: string;
     optionsSearch: string;
     optionsEmpty: string;
+    categoricalFilterSearchLabel: string;
     categoricalFilterSelectAll: string;
     categoricalFilterSelectClear: string;
     categoricalFilterEmpty: string;
@@ -71,5 +74,6 @@ declare const locale: {
     booleanColumnFalseShort: string;
     selectRow: string;
     selectAllRows: string;
+    sortColumn: string;
 };
 export default locale;

package/data-table/locale.js

@@ -24,6 +24,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',
@@ -46,7 +47,8 @@ var locale = {
   booleanColumnTrueShort: 'T',
   booleanColumnFalseShort: 'F',
   selectRow: 'Select row',
-  selectAllRows: 'Select all rows'
+  selectAllRows: 'Select all rows',
+  sortColumn: 'Sort column'
 };
 var _default = locale;
 exports.default = _default;

package/data-table/locale.js.flow

@@ -19,6 +19,7 @@ export type DataTableLocaleT = {|
   optionsLabel: string,
   optionsSearch: string,
   optionsEmpty: string,
+  categoricalFilterSearchLabel: string,
   categoricalFilterSelectAll: string,
   categoricalFilterSelectClear: string,
   categoricalFilterEmpty: string,
@@ -42,6 +43,7 @@ export type DataTableLocaleT = {|
   booleanColumnFalseShort: string,
   selectRow: string,
   selectAllRows: string,
+  sortColumn: string,
 |};
 
 const locale = {
@@ -58,6 +60,7 @@ const 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',
@@ -81,7 +84,7 @@ const locale = {
   booleanColumnFalseShort: 'F',
   selectRow: 'Select row',
   selectAllRows: 'Select all rows',
-
+  sortColumn: 'Sort column',
 };
 
 export default locale;

package/data-table/measure-column-widths.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ColumnOptions, Row } from './types';
-declare type MeasureColumnWidthsProps = {
+type MeasureColumnWidthsProps = {
     columns: ColumnOptions[];
     isSelectable: boolean;
     onWidthsChange: (a: number[]) => void;

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

@@ -32,6 +32,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 // Measures the column header + sampled data
+// @ts-ignore
 function MeasureColumn(_ref) {
   var sampleIndexes = _ref.sampleIndexes,
       column = _ref.column,
@@ -53,6 +54,7 @@ function MeasureColumn(_ref) {
     }
   }, [onLayout]);
   return /*#__PURE__*/React.createElement("div", {
+    // @ts-ignore
     ref: ref,
     className: css({
       display: 'flex',
@@ -71,7 +73,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
@@ -89,20 +92,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;
@@ -163,23 +168,19 @@ 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/data-table/measure-column-widths.js.flow

@@ -164,8 +164,7 @@ export default function MeasureColumnWidths({
   }
 
   return (
-    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    <div className={hiddenStyle} aria-hidden role="none">
+    <div className={hiddenStyle} aria-hidden="true" role="none">
       {columns.map((column, i) => {
         return (
           <MeasureColumn

package/data-table/stateful-container.js

@@ -49,55 +49,69 @@ function useDuplicateColumnTitleWarning(columns) {
   }, [columns]);
 }
 
-function useSortParameters() {
-  var initialSortIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-  var initialSortDirection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+var StatefulContainer = function StatefulContainer(props) {
+  useDuplicateColumnTitleWarning(props.columns);
 
-  var _React$useState = React.useState(initialSortIndex),
+  var _React$useState = React.useState(typeof props.initialSortIndex === 'number' ? props.initialSortIndex : -1),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       sortIndex = _React$useState2[0],
       setSortIndex = _React$useState2[1];
 
-  var _React$useState3 = React.useState(initialSortDirection),
+  var _React$useState3 = React.useState(props.initialSortDirection),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       sortDirection = _React$useState4[0],
       setSortDirection = _React$useState4[1];
 
+  var _React$useState5 = React.useState(props.initialFilters || new Map()),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      filters = _React$useState6[0],
+      setFilters = _React$useState6[1];
+
+  var _React$useState7 = React.useState(''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      textQuery = _React$useState8[0],
+      setTextQuery = _React$useState8[1];
+
+  var _React$useState9 = React.useState(props.initialSelectedRowIds || new Set()),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      selectedRowIds = _React$useState10[0],
+      setSelectedRowIds = _React$useState10[1]; // @ts-ignore
+
+
   function handleSort(columnIndex) {
+    var nextSortIndex;
+    var nextSortDirection;
+
     if (columnIndex === sortIndex) {
       if (sortDirection === _constants.SORT_DIRECTIONS.DESC) {
-        setSortIndex(-1);
-        setSortDirection(_constants.SORT_DIRECTIONS.ASC);
+        nextSortIndex = -1;
+        nextSortDirection = _constants.SORT_DIRECTIONS.ASC;
       } else {
-        setSortDirection(_constants.SORT_DIRECTIONS.DESC);
+        nextSortIndex = columnIndex;
+        nextSortDirection = _constants.SORT_DIRECTIONS.DESC;
       }
     } else {
-      setSortIndex(columnIndex);
-      setSortDirection(_constants.SORT_DIRECTIONS.ASC);
+      nextSortIndex = columnIndex;
+      nextSortDirection = _constants.SORT_DIRECTIONS.ASC;
     }
-  }
 
-  return [sortIndex, sortDirection, handleSort];
-}
+    setSortIndex(nextSortIndex);
+    setSortDirection(nextSortDirection);
 
-var StatefulContainer = function StatefulContainer(props) {
-  useDuplicateColumnTitleWarning(props.columns);
+    if (props.onSort) {
+      props.onSort(nextSortIndex, nextSortDirection);
+    }
+  } // @ts-ignore
 
-  var _useSortParameters = useSortParameters(props.initialSortIndex, props.initialSortDirection),
-      _useSortParameters2 = _slicedToArray(_useSortParameters, 3),
-      sortIndex = _useSortParameters2[0],
-      sortDirection = _useSortParameters2[1],
-      handleSort = _useSortParameters2[2];
 
-  var _React$useState5 = React.useState(props.initialFilters || new Map()),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      filters = _React$useState6[0],
-      setFilters = _React$useState6[1];
+  function handleTextQueryChange(nextTextQuery) {
+    setTextQuery(nextTextQuery);
+
+    if (props.onTextQueryChange) {
+      props.onTextQueryChange(nextTextQuery);
+    }
+  } // @ts-ignore
 
-  var _React$useState7 = React.useState(''),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      textQuery = _React$useState8[0],
-      setTextQuery = _React$useState8[1];
 
   function handleFilterAdd(title, filterParams) {
     filters.set(title, filterParams);
@@ -107,7 +121,8 @@ var StatefulContainer = function StatefulContainer(props) {
     }
 
     setFilters(new Map(filters));
-  }
+  } // @ts-ignore
+
 
   function handleFilterRemove(title) {
     filters.delete(title);
@@ -117,12 +132,8 @@ var StatefulContainer = function StatefulContainer(props) {
     }
 
     setFilters(new Map(filters));
-  }
+  } // @ts-ignore
 
-  var _React$useState9 = React.useState(props.initialSelectedRowIds || new Set()),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      selectedRowIds = _React$useState10[0],
-      setSelectedRowIds = _React$useState10[1];
 
   function handleSelectChange(next) {
     setSelectedRowIds(next);
@@ -133,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;
     })))));
@@ -144,7 +157,8 @@ var StatefulContainer = function StatefulContainer(props) {
 
   function handleSelectNone() {
     handleSelectChange(new Set());
-  }
+  } // @ts-ignore
+
 
   function handleSelectOne(row) {
     if (selectedRowIds.has(row.id)) {
@@ -176,11 +190,12 @@ var StatefulContainer = function StatefulContainer(props) {
     onSelectNone: handleSelectNone,
     onSelectOne: handleSelectOne,
     onSort: handleSort,
-    onTextQueryChange: setTextQuery,
+    onTextQueryChange: handleTextQueryChange,
     resizableColumnWidths: Boolean(props.resizableColumnWidths),
     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) {
@@ -221,6 +226,8 @@ function StatefulDataTable(props) {
     onIncludedRowsChange: props.onIncludedRowsChange,
     onRowHighlightChange: props.onRowHighlightChange,
     onSelectionChange: props.onSelectionChange,
+    onSort: props.onSort,
+    onTextQueryChange: props.onTextQueryChange,
     resizableColumnWidths: props.resizableColumnWidths,
     rows: props.rows,
     rowActions: props.rowActions,
@@ -284,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 = '';
     }