baseui 12.1.3 → 13.0.0

package/es/data-table/column-anchor.js

@@ -13,9 +13,11 @@ import Column from './column';
 import { COLUMNS } from './constants';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 function AnchorFilter(props) {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for anchor column");
-}
+} // @ts-ignore
+
 
 function AnchorCell(props) {
   const [css] = useStyletron();

package/es/data-table/column-boolean.js

@@ -15,7 +15,8 @@ function mapSelection(selection, transform) {
   const coercedSelection = new Set();
   selection.forEach(item => coercedSelection.add(transform(item)));
   return coercedSelection;
-}
+} // @ts-ignore
+
 
 function BooleanFilter(props) {
   const locale = React.useContext(LocaleContext);
@@ -41,7 +42,8 @@ function BooleanFilter(props) {
       });
     }
   });
-}
+} // @ts-ignore
+
 
 function BooleanCell(props) {
   const [css, theme] = useStyletron();

package/es/data-table/column-categorical.js

@@ -54,11 +54,13 @@ const StyledHighlightLabel = withStyle(StyledLabel, props => {
   };
 
   if (!props.$isFirst) {
+    // @ts-ignore
     style.paddingLeft = null;
   }
 
   return style;
-});
+}); // @ts-ignore
+
 StyledHighlightLabel.displayName = "StyledHighlightLabel";
 
 function HighlightCheckboxLabel(props) {
@@ -113,6 +115,7 @@ export function CategoricalFilter(props) {
       props.close();
     }
   }, showQuery && /*#__PURE__*/React.createElement(Input, {
+    "aria-label": locale.datatable.categoricalFilterSearchLabel,
     size: INPUT_SIZE.compact,
     overrides: {
       Before: InputBefore
@@ -122,6 +125,7 @@ export function CategoricalFilter(props) {
     clearable: true
   }), !query && /*#__PURE__*/React.createElement("div", {
     style: {
+      // @ts-ignore
       marginTop: showQuery ? theme.sizing.scale600 : null
     }
   }, /*#__PURE__*/React.createElement(FilterQuickControls, {
@@ -153,7 +157,7 @@ export function CategoricalFilter(props) {
       setSelection(new Set(selection));
     },
     overrides: {
-      // @ts-expect-error
+      // @ts-ignore
       Label: {
         component: HighlightCheckboxLabel,
         props: {
@@ -162,7 +166,7 @@ export function CategoricalFilter(props) {
       }
     }
   }, category)))));
-}
+} // @ts-ignore
 
 function CategoricalCell(props) {
   const [css] = useStyletron();

package/es/data-table/column-datetime.js

@@ -32,7 +32,7 @@ import { LocaleContext } from '../locale'; // eslint-disable-next-line @typescri
 const DATE_FORMAT = 'MM-dd-yyyy';
 const MASK = '99-99-9999 - 99-99-9999';
 const TIME_FORMAT = 'HH:mm ss:SS';
-const FORMAT_STRING = `${DATE_FORMAT} ${TIME_FORMAT}`;
+const FORMAT_STRING = `${DATE_FORMAT} ${TIME_FORMAT}`; // @ts-ignore
 
 function sortDates(a, b) {
   return a - b;
@@ -66,7 +66,7 @@ const CATEGORICAL_OPERATIONS = [{
 }];
 const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
 const MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-const QUARTERS = [0, 1, 2, 3];
+const QUARTERS = [0, 1, 2, 3]; // @ts-ignore
 
 function Checks(props) {
   const [css, theme] = useStyletron();
@@ -86,14 +86,17 @@ function Checks(props) {
       checked: checked,
       onChange: () => {
         if (checked) {
+          // @ts-ignore
           props.setValue(prev => prev.filter(i => i !== item.id));
         } else {
+          // @ts-ignore
           props.setValue(prev => [...prev, item.id]);
         }
       }
     }, item.label));
   }));
-}
+} // @ts-ignore
+
 
 function filterParamsToInitialState(input) {
   const output = {
@@ -101,11 +104,17 @@ function filterParamsToInitialState(input) {
     comparatorIndex: 0,
     rangeOperator: RANGE_OPERATIONS[0],
     categoricalOperator: CATEGORICAL_OPERATIONS[0],
+    // @ts-ignore
     rangeDates: [],
+    // @ts-ignore
     years: [],
+    // @ts-ignore
     halves: [],
+    // @ts-ignore
     quarters: [],
+    // @ts-ignore
     months: [],
+    // @ts-ignore
     weekdays: []
   };
 
@@ -150,7 +159,8 @@ function filterParamsToInitialState(input) {
   }
 
   return output;
-}
+} // @ts-ignore
+
 
 function DatetimeFilter(props) {
   const [css, theme] = useStyletron();
@@ -161,8 +171,10 @@ function DatetimeFilter(props) {
     return props.data.sort(sortDates);
   }, [props.data]);
   const presentYears = React.useMemo(() => {
-    const dict = {};
+    const dict = {}; // @ts-ignore
+
     props.data.forEach(date => {
+      // @ts-ignore
       dict[getYear(date)] = true;
     });
     return Object.keys(dict).map(n => parseInt(n));
@@ -251,6 +263,7 @@ function DatetimeFilter(props) {
         }
 
         if (operatorLocaleLabelKey) {
+          // @ts-ignore
           description = `${locale.datatable[operatorLocaleLabelKey]} - ${description}`;
         }
 
@@ -305,6 +318,7 @@ function DatetimeFilter(props) {
     ,
     mountNode: mountNode.current,
     options: RANGE_OPERATIONS.map(op => ({
+      // @ts-ignore
       label: locale.datatable[op.localeLabelKey],
       id: op.id
     })),
@@ -374,6 +388,7 @@ function DatetimeFilter(props) {
     value: categoricalOperator,
     onChange: params => setCategoricalOperator(params.value),
     options: CATEGORICAL_OPERATIONS.map(op => ({
+      // @ts-ignore
       label: locale.datatable[op.localeLabelKey],
       id: op.id
     })) // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -428,7 +443,8 @@ function DatetimeFilter(props) {
       id: year
     }))
   })))));
-}
+} // @ts-ignore
+
 
 function DatetimeCell(props) {
   const [css, theme] = useStyletron();

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

@@ -14,14 +14,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) {
   const k = Math.pow(10, precision);
   return Math.round(value * k) / k;
-}
+} // @ts-ignore
+
 
 function format(value, options) {
   if (typeof options.format === 'function') {
@@ -57,11 +59,13 @@ function format(value, options) {
   }
 
   return formatted;
-}
+} // @ts-ignore
+
 
 function validateInput(input) {
   return Boolean(parseFloat(input)) || input === '' || input === '-';
-}
+} // @ts-ignore
+
 
 const bisect = bisector(d => d.x0);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -82,7 +86,8 @@ const Histogram = /*#__PURE__*/React.memo(function Histogram({
   } = React.useMemo(() => {
     const bins = bin().thresholds(Math.min(data.length, MAX_BIN_COUNT))(data);
     const xScale = scaleLinear().domain([bins[0].x0, bins[bins.length - 1].x1]).range([0, HISTOGRAM_SIZE.width]).clamp(true);
-    const yScale = scaleLinear().domain([0, maxFunc(bins, d => d.length)]).nice().range([HISTOGRAM_SIZE.height, 0]);
+    const yScale = scaleLinear() // @ts-ignore
+    .domain([0, maxFunc(bins, d => d.length)]).nice().range([HISTOGRAM_SIZE.height, 0]);
     return {
       bins,
       xScale,
@@ -135,7 +140,7 @@ const Histogram = /*#__PURE__*/React.memo(function Histogram({
       height: height
     });
   })));
-});
+}); // @ts-ignore
 
 function NumericalFilter(props) {
   const [css, theme] = useStyletron();
@@ -400,7 +405,8 @@ function NumericalFilter(props) {
     onFocus: () => setFocus(true),
     onBlur: () => setFocus(false)
   })));
-}
+} // @ts-ignore
+
 
 function NumericalCell(props) {
   const [css, theme] = useStyletron();
@@ -408,6 +414,7 @@ function NumericalCell(props) {
     className: css({ ...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/es/data-table/column-row-index.js

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

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

@@ -13,9 +13,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) {
   const [css] = useStyletron();

package/es/data-table/column.js

@@ -38,12 +38,14 @@ function Column(options) {
         className: css({ ...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/es/data-table/data-table.js

@@ -5,7 +5,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';
@@ -17,6 +18,7 @@ import { LocaleContext } from '../locale'; // consider pulling this out to a pro
 
 const HEADER_ROW_HEIGHT = 48;
 
+// @ts-ignore
 const sum = ns => ns.reduce((s, n) => s + n, 0);
 
 function CellPlacement({
@@ -48,6 +50,7 @@ function CellPlacement({
       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'
     }),
@@ -61,7 +64,8 @@ function CellPlacement({
     x: columnIndex,
     y: rowIndex - 1
   }));
-}
+} // @ts-ignore
+
 
 function compareCellPlacement(prevProps, nextProps) {
   // header cells are not rendered through this component
@@ -120,6 +124,7 @@ const HeaderContext = /*#__PURE__*/React.createContext({
   rows: [],
   scrollLeft: 0,
   sortIndex: -1,
+  // @ts-ignore
   sortDirection: null,
   tableHeight: 0,
   widths: []
@@ -134,7 +139,7 @@ function Header(props) {
   const headerCellRef = React.useRef(null);
   const RULER_OFFSET = 2;
   const isResizingThisColumn = props.resizeIndex === props.index;
-  const isResizing = props.resizeIndex >= 0;
+  const isResizing = props.resizeIndex >= 0; // @ts-ignore
 
   function getPositionX(el) {
     if (typeof document !== 'undefined') {
@@ -217,7 +222,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", {
@@ -235,6 +241,7 @@ function Header(props) {
       setEndResizePos(x);
     },
     className: css({
+      // @ts-ignore
       backgroundColor: isResizingThisColumn ? theme.colors.contentPrimary : null,
       cursor: 'ew-resize',
       position: 'absolute',
@@ -299,6 +306,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'
@@ -330,7 +338,8 @@ function Headers() {
       tableHeight: ctx.tableHeight
     }))));
   }));
-}
+} // @ts-ignore
+
 
 function LoadingOrEmptyMessage(props) {
   const [css, theme] = useStyletron();
@@ -389,9 +398,7 @@ const InnerTableElement = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
 
     const 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: event => rowAction.onClick({
         event,
@@ -400,6 +407,7 @@ const InnerTableElement = /*#__PURE__*/React.forwardRef((props, ref) => {
       size: BUTTON_SIZES.compact,
       kind: BUTTON_KINDS.tertiary,
       shape: BUTTON_SHAPES.round,
+      title: rowAction.label,
       overrides: {
         BaseButton: {
           style: {
@@ -416,7 +424,7 @@ const InnerTableElement = /*#__PURE__*/React.forwardRef((props, ref) => {
     }));
   })));
 });
-InnerTableElement.displayName = 'InnerTableElement';
+InnerTableElement.displayName = 'InnerTableElement'; // @ts-ignore
 
 function MeasureScrollbarWidth(props) {
   const [css] = useStyletron();
@@ -433,7 +441,8 @@ function MeasureScrollbarWidth(props) {
       height: 0,
       visibility: 'hidden',
       overflow: 'scroll'
-    }),
+    }) // @ts-ignore
+    ,
     ref: outerRef
   }, /*#__PURE__*/React.createElement("div", {
     ref: innerRef
@@ -529,7 +538,7 @@ export function DataTable({
     const index = sortIndex;
 
     if (index !== null && index !== undefined && index !== -1 && columns[index]) {
-      const sortFn = columns[index].sortFn;
+      const sortFn = columns[index].sortFn; // @ts-ignore
 
       const getValue = row => columns[index].mapDataToValue(row.data);
 
@@ -543,7 +552,8 @@ export function DataTable({
     return toSort.map(el => el[1]);
   }, [sortIndex, sortDirection, columns, allRows]);
   const filteredIndices = React.useMemo(() => {
-    const set = new Set(allRows.map((_, idx) => idx));
+    const set = new Set(allRows.map((_, idx) => idx)); // @ts-ignore
+
     Array.from(filters || new Set(), f => f).forEach(([title, filter]) => {
       const columnIndex = columns.findIndex(c => c.title === title);
       const column = columns[columnIndex];
@@ -561,15 +571,18 @@ export function DataTable({
     });
 
     if (textQuery) {
+      // @ts-ignore
       const stringishColumnIndices = [];
 
       for (let i = 0; i < columns.length; i++) {
         if (columns[i].textQueryFilter) {
+          // @ts-ignore
           stringishColumnIndices.push(i);
         }
       }
 
       Array.from(set).forEach(idx => {
+        // @ts-ignore
         const matches = stringishColumnIndices.some(cdx => {
           const column = columns[cdx];
           const textQueryFilter = column.textQueryFilter;
@@ -598,9 +611,6 @@ export function DataTable({
 
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
-  React.useImperativeHandle(controlRef, () => ({
-    getRows: () => rows
-  }), [rows]);
   const [browserScrollbarWidth, setBrowserScrollbarWidth] = React.useState(0);
   const normalizedWidths = React.useMemo(() => {
     const resizedWidths = measuredWidths.map((w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]));
@@ -628,11 +638,14 @@ export function DataTable({
 
         for (let 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;
@@ -686,8 +699,12 @@ export function DataTable({
       onSort(columnIndex);
     }
   }, [onSort]);
+  React.useImperativeHandle(controlRef, () => ({
+    clearSelection: handleSelectNone,
+    getRows: () => rows
+  }), [handleSelectNone, rows]);
   const [columnHighlightIndex, setColumnHighlightIndex] = React.useState(-1);
-  const [rowHighlightIndex, setRowHighlightIndex] = React.useState(-1);
+  const [rowHighlightIndex, setRowHighlightIndex] = React.useState(-1); // @ts-ignore
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
@@ -711,7 +728,7 @@ export function DataTable({
     if (nextIndex !== rowHighlightIndex) {
       handleRowHighlightIndexChange(nextIndex);
     }
-  }, [rowHighlightIndex]);
+  }, [rowHighlightIndex]); // @ts-ignore
 
   function handleColumnHeaderMouseEnter(columnIndex) {
     setColumnHighlightIndex(columnIndex);
@@ -746,7 +763,8 @@ export function DataTable({
     widths: measuredWidths,
     isSelectable: isSelectable,
     onWidthsChange: handleWidthsChange
-  }), /*#__PURE__*/React.createElement(MeasureScrollbarWidth, {
+  }), /*#__PURE__*/React.createElement(MeasureScrollbarWidth // @ts-ignore
+  , {
     onWidthChange: w => setBrowserScrollbarWidth(w)
   }), /*#__PURE__*/React.createElement(AutoSizer, null, ({
     height,
@@ -776,6 +794,7 @@ export function DataTable({
       rowHighlightIndex,
       rows,
       scrollLeft,
+      // @ts-ignore
       sortDirection: sortDirection || null,
       sortIndex: typeof sortIndex === 'number' ? sortIndex : -1,
       tableHeight: height,

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

@@ -42,12 +42,15 @@ function Options(props) {
   const inputRef = React.useRef(null);
   React.useEffect(() => {
     if (inputRef.current) {
+      // @ts-ignore
       inputRef.current.focus();
     }
   }, [inputRef.current]);
   const [focusVisible, setFocusVisible] = React.useState(false);
   const seed = useUIDSeed();
   const buiRef = React.useRef(props.columns.map(col => seed(col)));
+  const activeDescendant = buiRef.current[props.highlightIndex] ? `bui-${buiRef.current[props.highlightIndex]}` : undefined;
+  const optionsLabelId = seed('options-label');
 
   const handleFocus = event => {
     if (isFocusVisible(event)) {
@@ -71,6 +74,7 @@ function Options(props) {
       paddingBottom: theme.sizing.scale600
     })
   }, /*#__PURE__*/React.createElement("p", {
+    id: optionsLabelId,
     className: css({ ...theme.typography.font100,
       marginTop: 'unset',
       paddingRight: theme.sizing.scale600,
@@ -100,7 +104,8 @@ function Options(props) {
     onBlur: handleBlur,
     tabIndex: 0,
     role: "listbox",
-    "aria-activedescendant": `bui-${buiRef.current[props.highlightIndex]}`,
+    "aria-activedescendant": activeDescendant,
+    "aria-labelledby": optionsLabelId,
     className: css({
       listStyleType: 'none',
       marginBlockStart: 'unset',
@@ -125,6 +130,7 @@ function Options(props) {
         key: column.title,
         className: css({ ...theme.typography.font100,
           alignItems: 'center',
+          // @ts-ignore
           backgroundColor: isHighlighted ? theme.colors.menuFillHover : null,
           cursor: 'pointer',
           display: 'flex',
@@ -175,18 +181,20 @@ function FilterMenu(props) {
     return filterableColumns.filter(column => matchesQuery(column.title, query));
   }, [filterableColumns, query]);
   const Filter = React.useMemo(() => {
-    if (!activeColumn) return null;
+    if (!activeColumn) return null; // @ts-ignore
+
     return activeColumn.renderFilter;
   }, [activeColumn]);
   const activeColumnData = React.useMemo(() => {
     const columnIndex = props.columns.findIndex(c => c === activeColumn);
     if (columnIndex < 0) return [];
     return props.rows.map(row => 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]);
     }
 
@@ -214,14 +222,16 @@ function FilterMenu(props) {
       if (Filter && activeColumn) {
         return /*#__PURE__*/React.createElement(Filter, {
           data: activeColumnData,
-          close: handleClose,
+          close: handleClose // @ts-ignore
+          ,
           setFilter: filterParams => props.onSetFilter(activeColumn.title, filterParams)
         });
       }
 
       return /*#__PURE__*/React.createElement(Options, {
         columns: columns,
-        highlightIndex: highlightIndex,
+        highlightIndex: highlightIndex // @ts-ignore
+        ,
         onClick: handleOptionClick,
         onKeyDown: handleKeyDown,
         onMouseEnter: setHighlightIndex,

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

@@ -59,11 +59,13 @@ const HeaderCell = /*#__PURE__*/React.forwardRef((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/es/data-table/locale.js

@@ -17,6 +17,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',
@@ -39,6 +40,7 @@ const locale = {
   booleanColumnTrueShort: 'T',
   booleanColumnFalseShort: 'F',
   selectRow: 'Select row',
-  selectAllRows: 'Select all rows'
+  selectAllRows: 'Select all rows',
+  sortColumn: 'Sort column'
 };
 export default locale;