baseui 12.1.3 → 13.0.0

package/esm/data-table/column-numerical.js

@@ -32,14 +32,16 @@ import { useStyletron } from '../styles';
 import Column from './column';
 import { COLUMNS, NUMERICAL_FORMATS, MAX_BIN_COUNT, HISTOGRAM_SIZE } from './constants';
 import FilterShell from './filter-shell';
-import { LocaleContext } from '../locale';
+import { LocaleContext } from '../locale'; // @ts-ignore
+
 import { bin, max as maxFunc, extent, scaleLinear, median, bisector } from 'd3';
 import { Slider } from '../slider';
 
 function roundToFixed(value, precision) {
   var k = Math.pow(10, precision);
   return Math.round(value * k) / k;
-}
+} // @ts-ignore
+
 
 function format(value, options) {
   if (typeof options.format === 'function') {
@@ -75,11 +77,13 @@ function format(value, options) {
   }
 
   return formatted;
-}
+} // @ts-ignore
+
 
 function validateInput(input) {
   return Boolean(parseFloat(input)) || input === '' || input === '-';
-}
+} // @ts-ignore
+
 
 var bisect = bisector(function (d) {
   return d.x0;
@@ -101,7 +105,8 @@ var Histogram = /*#__PURE__*/React.memo(function Histogram(_ref) {
   var _React$useMemo = React.useMemo(function () {
     var bins = bin().thresholds(Math.min(data.length, MAX_BIN_COUNT))(data);
     var xScale = scaleLinear().domain([bins[0].x0, bins[bins.length - 1].x1]).range([0, HISTOGRAM_SIZE.width]).clamp(true);
-    var yScale = scaleLinear().domain([0, maxFunc(bins, function (d) {
+    var yScale = scaleLinear() // @ts-ignore
+    .domain([0, maxFunc(bins, function (d) {
       return d.length;
     })]).nice().range([HISTOGRAM_SIZE.height, 0]);
     return {
@@ -160,7 +165,7 @@ var Histogram = /*#__PURE__*/React.memo(function Histogram(_ref) {
       height: height
     });
   })));
-});
+}); // @ts-ignore
 
 function NumericalFilter(props) {
   var _useStyletron3 = useStyletron(),
@@ -497,7 +502,8 @@ function NumericalFilter(props) {
       return setFocus(false);
     }
   })));
-}
+} // @ts-ignore
+
 
 function NumericalCell(props) {
   var _useStyletron5 = useStyletron(),
@@ -509,6 +515,7 @@ function NumericalCell(props) {
     className: css(_objectSpread(_objectSpread({}, theme.typography.MonoParagraphXSmall), {}, {
       display: 'flex',
       justifyContent: theme.direction !== 'rtl' ? 'flex-end' : 'flex-start',
+      // @ts-ignore
       color: props.highlight(props.value) ? theme.colors.contentNegative : null,
       width: '100%'
     }))

package/esm/data-table/column-row-index.js

@@ -23,7 +23,8 @@ import { COLUMNS } from './constants';
 
 function RowIndexFilter() {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for row index column");
-}
+} // @ts-ignore
+
 
 function RowIndexCell(props) {
   var _useStyletron = useStyletron(),

package/esm/data-table/column-string.js

@@ -25,9 +25,11 @@ import { COLUMNS } from './constants';
 import { HighlightCellText } from './text-search';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 function StringFilter(props) {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for string column");
-}
+} // @ts-ignore
+
 
 function StringCell(props) {
   var _useStyletron = useStyletron(),

package/esm/data-table/column.js

@@ -65,12 +65,14 @@ function Column(options) {
         className: css(_objectSpread(_objectSpread({}, theme.typography.font100), {}, {
           boxSizing: 'border-box',
           color: theme.colors.contentPrimary,
+          // @ts-ignore
           display: props.isMeasured ? 'inline-block' : null,
           height: '100%',
           paddingTop: theme.sizing.scale300,
           paddingLeft: theme.sizing.scale500,
           paddingBottom: theme.sizing.scale300,
           paddingRight: theme.sizing.scale500,
+          // @ts-ignore
           width: props.isMeasured ? null : '100%'
         }))
       }, /*#__PURE__*/React.createElement("div", {

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

@@ -31,7 +31,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { VariableSizeGrid } from 'react-window';
+import { VariableSizeGrid } from 'react-window'; // @ts-ignore
+
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { Button, SHAPE as BUTTON_SHAPES, SIZE as BUTTON_SIZES, KIND as BUTTON_KINDS } from '../button';
 import { useStyletron } from '../styles';
@@ -43,6 +44,7 @@ import { LocaleContext } from '../locale'; // consider pulling this out to a pro
 
 var HEADER_ROW_HEIGHT = 48;
 
+// @ts-ignore
 var sum = function sum(ns) {
   return ns.reduce(function (s, n) {
     return s + n;
@@ -82,6 +84,7 @@ function CellPlacement(_ref) {
       borderBottom: 'none',
       borderLeft: 'none',
       // do not render a border on cells in the right-most column
+      // @ts-ignore
       borderRight: columnIndex === data.columns.length - 1 ? 'none' : null,
       boxSizing: 'border-box'
     })),
@@ -99,7 +102,8 @@ function CellPlacement(_ref) {
     x: columnIndex,
     y: rowIndex - 1
   }));
-}
+} // @ts-ignore
+
 
 function compareCellPlacement(prevProps, nextProps) {
   // header cells are not rendered through this component
@@ -158,6 +162,7 @@ var HeaderContext = /*#__PURE__*/React.createContext({
   rows: [],
   scrollLeft: 0,
   sortIndex: -1,
+  // @ts-ignore
   sortDirection: null,
   tableHeight: 0,
   widths: []
@@ -184,7 +189,7 @@ function Header(props) {
   var headerCellRef = React.useRef(null);
   var RULER_OFFSET = 2;
   var isResizingThisColumn = props.resizeIndex === props.index;
-  var isResizing = props.resizeIndex >= 0;
+  var isResizing = props.resizeIndex >= 0; // @ts-ignore
 
   function getPositionX(el) {
     if (typeof document !== 'undefined') {
@@ -267,7 +272,8 @@ function Header(props) {
     },
     onSelectAll: props.onSelectMany,
     onSelectNone: props.onSelectNone,
-    onSort: props.onSort,
+    onSort: props.onSort // @ts-ignore
+    ,
     sortDirection: props.sortIndex === props.index ? props.sortDirection : null,
     title: props.columnTitle
   }), props.resizableColumnWidths && /*#__PURE__*/React.createElement("div", {
@@ -285,6 +291,7 @@ function Header(props) {
       setEndResizePos(x);
     },
     className: css({
+      // @ts-ignore
       backgroundColor: isResizingThisColumn ? theme.colors.contentPrimary : null,
       cursor: 'ew-resize',
       position: 'absolute',
@@ -358,6 +365,7 @@ function Headers() {
         backgroundColor: theme.colors.backgroundPrimary,
         borderTop: 'none',
         borderLeft: 'none',
+        // @ts-ignore
         borderRight: columnIndex === ctx.columns.length - 1 ? 'none' : null,
         boxSizing: 'border-box',
         display: 'flex'
@@ -391,7 +399,8 @@ function Headers() {
       tableHeight: ctx.tableHeight
     }))));
   }));
-}
+} // @ts-ignore
+
 
 function LoadingOrEmptyMessage(props) {
   var _useStyletron7 = useStyletron(),
@@ -457,9 +466,7 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     var RowActionIcon = rowAction.renderIcon;
-    return /*#__PURE__*/React.createElement(Button // @ts-expect-error todo(flow->ts): alt on button?
-    , {
-      alt: rowAction.label,
+    return /*#__PURE__*/React.createElement(Button, {
       key: rowAction.label,
       onClick: function onClick(event) {
         return rowAction.onClick({
@@ -470,6 +477,7 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       size: BUTTON_SIZES.compact,
       kind: BUTTON_KINDS.tertiary,
       shape: BUTTON_SHAPES.round,
+      title: rowAction.label,
       overrides: {
         BaseButton: {
           style: {
@@ -486,7 +494,7 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }));
   })));
 });
-InnerTableElement.displayName = 'InnerTableElement';
+InnerTableElement.displayName = 'InnerTableElement'; // @ts-ignore
 
 function MeasureScrollbarWidth(props) {
   var _useStyletron11 = useStyletron(),
@@ -506,7 +514,8 @@ function MeasureScrollbarWidth(props) {
       height: 0,
       visibility: 'hidden',
       overflow: 'scroll'
-    }),
+    }) // @ts-ignore
+    ,
     ref: outerRef
   }, /*#__PURE__*/React.createElement("div", {
     ref: innerRef
@@ -646,7 +655,7 @@ export function DataTable(_ref2) {
     var index = sortIndex;
 
     if (index !== null && index !== undefined && index !== -1 && columns[index]) {
-      var sortFn = columns[index].sortFn;
+      var sortFn = columns[index].sortFn; // @ts-ignore
 
       var getValue = function getValue(row) {
         return columns[index].mapDataToValue(row.data);
@@ -670,7 +679,8 @@ export function DataTable(_ref2) {
   var filteredIndices = React.useMemo(function () {
     var set = new Set(allRows.map(function (_, idx) {
       return idx;
-    }));
+    })); // @ts-ignore
+
     Array.from(filters || new Set(), function (f) {
       return f;
     }).forEach(function (_ref3) {
@@ -696,15 +706,18 @@ export function DataTable(_ref2) {
     });
 
     if (textQuery) {
+      // @ts-ignore
       var stringishColumnIndices = [];
 
       for (var i = 0; i < columns.length; i++) {
         if (columns[i].textQueryFilter) {
+          // @ts-ignore
           stringishColumnIndices.push(i);
         }
       }
 
       Array.from(set).forEach(function (idx) {
+        // @ts-ignore
         var matches = stringishColumnIndices.some(function (cdx) {
           var column = columns[cdx];
           var textQueryFilter = column.textQueryFilter;
@@ -737,13 +750,6 @@ export function DataTable(_ref2) {
 
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
-  React.useImperativeHandle(controlRef, function () {
-    return {
-      getRows: function getRows() {
-        return rows;
-      }
-    };
-  }, [rows]);
 
   var _React$useState19 = React.useState(0),
       _React$useState20 = _slicedToArray(_React$useState19, 2),
@@ -780,11 +786,14 @@ export function DataTable(_ref2) {
 
         for (var i = 0; i < resizedWidths.length - 1; i++) {
           if (columns[i] && columns[i].fillWidth) {
+            // @ts-ignore
             result.push(resizedWidths[i] + padding);
           } else {
+            // @ts-ignore
             result.push(resizedWidths[i]);
           }
-        }
+        } // @ts-ignore
+
 
         result.push(gridProps.width - sum(result) - scrollbarWidth);
         return result;
@@ -838,6 +847,14 @@ export function DataTable(_ref2) {
       onSort(columnIndex);
     }
   }, [onSort]);
+  React.useImperativeHandle(controlRef, function () {
+    return {
+      clearSelection: handleSelectNone,
+      getRows: function getRows() {
+        return rows;
+      }
+    };
+  }, [handleSelectNone, rows]);
 
   var _React$useState21 = React.useState(-1),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
@@ -847,7 +864,8 @@ export function DataTable(_ref2) {
   var _React$useState23 = React.useState(-1),
       _React$useState24 = _slicedToArray(_React$useState23, 2),
       rowHighlightIndex = _React$useState24[0],
-      setRowHighlightIndex = _React$useState24[1];
+      setRowHighlightIndex = _React$useState24[1]; // @ts-ignore
+
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
@@ -871,7 +889,7 @@ export function DataTable(_ref2) {
     if (nextIndex !== rowHighlightIndex) {
       handleRowHighlightIndexChange(nextIndex);
     }
-  }, [rowHighlightIndex]);
+  }, [rowHighlightIndex]); // @ts-ignore
 
   function handleColumnHeaderMouseEnter(columnIndex) {
     setColumnHighlightIndex(columnIndex);
@@ -906,7 +924,8 @@ export function DataTable(_ref2) {
     widths: measuredWidths,
     isSelectable: isSelectable,
     onWidthsChange: handleWidthsChange
-  }), /*#__PURE__*/React.createElement(MeasureScrollbarWidth, {
+  }), /*#__PURE__*/React.createElement(MeasureScrollbarWidth // @ts-ignore
+  , {
     onWidthChange: function onWidthChange(w) {
       return setBrowserScrollbarWidth(w);
     }
@@ -938,6 +957,7 @@ export function DataTable(_ref2) {
         rowHighlightIndex: rowHighlightIndex,
         rows: rows,
         scrollLeft: scrollLeft,
+        // @ts-ignore
         sortDirection: sortDirection || null,
         sortIndex: typeof sortIndex === 'number' ? sortIndex : -1,
         tableHeight: height,

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
+    });
+  }));
 }