baseui 10.10.0 → 10.12.0

package/data-table/data-table.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {VariableSizeGrid} from 'react-window';
+import { VariableSizeGrid } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import {
@@ -16,20 +16,14 @@ import {
   SIZE as BUTTON_SIZES,
   KIND as BUTTON_KINDS,
 } from '../button/index.js';
-import {useStyletron} from '../styles/index.js';
-import {Tooltip, PLACEMENT} from '../tooltip/index.js';
+import { useStyletron } from '../styles/index.js';
+import { Tooltip, PLACEMENT } from '../tooltip/index.js';
 
-import {SORT_DIRECTIONS} from './constants.js';
+import { SORT_DIRECTIONS } from './constants.js';
 import HeaderCell from './header-cell.js';
 import MeasureColumnWidths from './measure-column-widths.js';
-import type {
-  ColumnT,
-  DataTablePropsT,
-  RowT,
-  SortDirectionsT,
-  RowActionT,
-} from './types.js';
-import {LocaleContext} from '../locale/index.js';
+import type { ColumnT, DataTablePropsT, RowT, SortDirectionsT, RowActionT } from './types.js';
+import { LocaleContext } from '../locale/index.js';
 
 // consider pulling this out to a prop if useful.
 const HEADER_ROW_HEIGHT = 48;
@@ -46,14 +40,14 @@ type HeaderContextT = {|
   isSelectedAll: boolean,
   isSelectedIndeterminate: boolean,
   measuredWidths: number[],
-  onMouseEnter: number => void,
+  onMouseEnter: (number) => void,
   onMouseLeave: () => void,
   onResize: (columnIndex: number, delta: number) => void,
   onSelectMany: () => void,
   onSelectNone: () => void,
-  onSort: number => void,
+  onSort: (number) => void,
   resizableColumnWidths: boolean,
-  rowActions: RowActionT[] | (RowT => RowActionT[]),
+  rowActions: RowActionT[] | ((RowT) => RowActionT[]),
   rowHeight: number,
   rowHighlightIndex: number,
   rows: RowT[],
@@ -80,16 +74,16 @@ type CellPlacementPropsT = {
     isSelectable: boolean,
     isRowSelected: (string | number) => boolean,
     onRowMouseEnter: (number, RowT) => void,
-    onSelectOne: RowT => void,
+    onSelectOne: (RowT) => void,
     rowHighlightIndex: number,
     rows: RowT[],
     textQuery: string,
   },
 };
 
-const sum = ns => ns.reduce((s, n) => s + n, 0);
+const sum = (ns) => ns.reduce((s, n) => s + n, 0);
 
-function CellPlacement({columnIndex, rowIndex, data, style}) {
+function CellPlacement({ columnIndex, rowIndex, data, style }) {
   const [css, theme] = useStyletron();
 
   // ignores the table header row
@@ -99,7 +93,7 @@ function CellPlacement({columnIndex, rowIndex, data, style}) {
 
   let backgroundColor = theme.colors.backgroundPrimary;
   if (
-    (rowIndex % 2 && columnIndex === data.columnHighlightIndex) ||
+    (Boolean(rowIndex % 2) && columnIndex === data.columnHighlightIndex) ||
     rowIndex === data.rowHighlightIndex
   ) {
     backgroundColor = theme.colors.backgroundTertiary;
@@ -108,9 +102,7 @@ function CellPlacement({columnIndex, rowIndex, data, style}) {
   }
 
   const Cell = data.columns[columnIndex].renderCell;
-  const value = data.columns[columnIndex].mapDataToValue(
-    data.rows[rowIndex - 1].data,
-  );
+  const value = data.columns[columnIndex].mapDataToValue(data.rows[rowIndex - 1].data);
 
   return (
     <div
@@ -125,9 +117,7 @@ function CellPlacement({columnIndex, rowIndex, data, style}) {
         boxSizing: 'border-box',
       })}
       style={style}
-      onMouseEnter={() =>
-        data.onRowMouseEnter(rowIndex, data.rows[rowIndex - 1])
-      }
+      onMouseEnter={() => data.onRowMouseEnter(rowIndex, data.rows[rowIndex - 1])}
     >
       <Cell
         value={value}
@@ -161,8 +151,7 @@ function compareCellPlacement(prevProps, nextProps) {
 
   if (
     prevProps.data.isSelectable === nextProps.data.isSelectable &&
-    prevProps.data.columnHighlightIndex ===
-      nextProps.data.columnHighlightIndex &&
+    prevProps.data.columnHighlightIndex === nextProps.data.columnHighlightIndex &&
     prevProps.data.rowHighlightIndex === nextProps.data.rowHighlightIndex &&
     prevProps.data.textQuery === nextProps.data.textQuery &&
     prevProps.data.isRowSelected === nextProps.data.isRowSelected
@@ -176,8 +165,7 @@ function compareCellPlacement(prevProps, nextProps) {
   if (
     prevProps.rowIndex !== prevProps.data.rowHighlightIndex &&
     prevProps.rowIndex !== nextProps.data.rowHighlightIndex &&
-    prevProps.data.columnHighlightIndex ===
-      nextProps.data.columnHighlightIndex &&
+    prevProps.data.columnHighlightIndex === nextProps.data.columnHighlightIndex &&
     prevProps.data.isRowSelected === nextProps.data.isRowSelected
   ) {
     return true;
@@ -198,7 +186,7 @@ function compareCellPlacement(prevProps, nextProps) {
 }
 const CellPlacementMemo = React.memo<CellPlacementPropsT, mixed>(
   CellPlacement,
-  compareCellPlacement,
+  compareCellPlacement
 );
 CellPlacementMemo.displayName = 'CellPlacement';
 
@@ -241,7 +229,7 @@ type HeaderProps = {|
   isSelectable: boolean,
   isSelectedAll: boolean,
   isSelectedIndeterminate: boolean,
-  onMouseEnter: number => void,
+  onMouseEnter: (number) => void,
   onMouseLeave: () => void,
   onResize: (columnIndex: number, delta: number) => void,
   onResizeIndexChange: (columnIndex: number) => void,
@@ -260,7 +248,7 @@ function Header(props: HeaderProps) {
   const [css, theme] = useStyletron();
   const [startResizePos, setStartResizePos] = React.useState(0);
   const [endResizePos, setEndResizePos] = React.useState(0);
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   const headerCellRef = React.useRef<any>(null);
 
   const RULER_OFFSET = 2;
@@ -358,9 +346,7 @@ function Header(props: HeaderProps) {
         onSelectAll={props.onSelectMany}
         onSelectNone={props.onSelectNone}
         onSort={props.onSort}
-        sortDirection={
-          props.sortIndex === props.index ? props.sortDirection : null
-        }
+        sortDirection={props.sortIndex === props.index ? props.sortDirection : null}
         title={props.columnTitle}
       />
       {props.resizableColumnWidths && (
@@ -373,16 +359,14 @@ function Header(props: HeaderProps) {
         >
           <div
             role="presentation"
-            onMouseDown={event => {
+            onMouseDown={(event) => {
               props.onResizeIndexChange(props.index);
               const x = getPositionX(event.target);
               setStartResizePos(x);
               setEndResizePos(x);
             }}
             className={css({
-              backgroundColor: isResizingThisColumn
-                ? theme.colors.contentPrimary
-                : null,
+              backgroundColor: isResizingThisColumn ? theme.colors.contentPrimary : null,
               cursor: 'ew-resize',
               position: 'absolute',
               height: '100%',
@@ -441,10 +425,7 @@ function Headers() {
             <Tooltip
               key={columnIndex}
               placement={PLACEMENT.bottomLeft}
-              isOpen={
-                ctx.columnHighlightIndex === columnIndex &&
-                Boolean(activeFilter)
-              }
+              isOpen={ctx.columnHighlightIndex === columnIndex && Boolean(activeFilter)}
               content={() => {
                 return (
                   <div>
@@ -476,12 +457,11 @@ function Headers() {
                   backgroundColor: theme.colors.backgroundPrimary,
                   borderTop: 'none',
                   borderLeft: 'none',
-                  borderRight:
-                    columnIndex === ctx.columns.length - 1 ? 'none' : null,
+                  borderRight: columnIndex === ctx.columns.length - 1 ? 'none' : null,
                   boxSizing: 'border-box',
                   display: 'flex',
                 })}
-                style={{width: ctx.widths[columnIndex]}}
+                style={{ width: ctx.widths[columnIndex] }}
               >
                 <Header
                   columnTitle={column.title}
@@ -525,9 +505,7 @@ function LoadingOrEmptyMessage(props) {
         marginLeft: theme.sizing.scale500,
       })}
     >
-      {typeof props.children === 'function'
-        ? props.children()
-        : String(props.children)}
+      {typeof props.children === 'function' ? props.children() : String(props.children)}
     </p>
   );
 }
@@ -535,8 +513,8 @@ function LoadingOrEmptyMessage(props) {
 // replaces the content of the virtualized window with contents. in this case,
 // we are prepending a table header row before the table rows (children to the fn).
 const InnerTableElement = React.forwardRef<
-  {|children: React.Node, style: {[string]: mixed}|},
-  HTMLDivElement,
+  {| children: React.Node, style: { [string]: mixed } |},
+  HTMLDivElement
 >((props, ref) => {
   const [, theme] = useStyletron();
   const ctx = React.useContext(HeaderContext);
@@ -562,13 +540,9 @@ const InnerTableElement = React.forwardRef<
     <div ref={ref} data-baseweb="data-table" style={props.style}>
       <Headers />
 
-      {viewState === LOADING && (
-        <LoadingOrEmptyMessage>{ctx.loadingMessage}</LoadingOrEmptyMessage>
-      )}
+      {viewState === LOADING && <LoadingOrEmptyMessage>{ctx.loadingMessage}</LoadingOrEmptyMessage>}
 
-      {viewState === EMPTY && (
-        <LoadingOrEmptyMessage>{ctx.emptyMessage}</LoadingOrEmptyMessage>
-      )}
+      {viewState === EMPTY && <LoadingOrEmptyMessage>{ctx.emptyMessage}</LoadingOrEmptyMessage>}
 
       {viewState === RENDERING && props.children}
 
@@ -589,14 +563,13 @@ const InnerTableElement = React.forwardRef<
               position: 'absolute',
               right: theme.direction !== 'rtl' ? 0 - ctx.scrollLeft : 'initial',
               left: theme.direction === 'rtl' ? 0 : 'initial',
-              top:
-                (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT,
+              top: (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT,
             }}
           >
             {(typeof ctx.rowActions === 'function'
               ? ctx.rowActions(highlightedRow)
               : ctx.rowActions
-            ).map(rowAction => {
+            ).map((rowAction) => {
               if (rowAction.renderButton) {
                 const RowActionButton = rowAction.renderButton;
                 return <RowActionButton />;
@@ -607,7 +580,7 @@ const InnerTableElement = React.forwardRef<
                 <Button
                   alt={rowAction.label}
                   key={rowAction.label}
-                  onClick={event =>
+                  onClick={(event) =>
                     rowAction.onClick({
                       event,
                       row: ctx.rows[ctx.rowHighlightIndex - 1],
@@ -690,56 +663,54 @@ export function DataTable({
   const locale = React.useContext(LocaleContext);
 
   const rowHeightAtIndex = React.useCallback(
-    index => {
+    (index) => {
       if (index === 0) {
         return HEADER_ROW_HEIGHT;
       }
       return rowHeight;
     },
-    [rowHeight],
+    [rowHeight]
   );
 
   // We use state for our ref, to allow hooks to  update when the ref changes.
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
-  const [measuredWidths, setMeasuredWidths] = React.useState(
-    columns.map(() => 0),
-  );
+  const [measuredWidths, setMeasuredWidths] = React.useState(columns.map(() => 0));
   const [resizeDeltas, setResizeDeltas] = React.useState(columns.map(() => 0));
   React.useEffect(() => {
-    setMeasuredWidths(prev => {
+    setMeasuredWidths((prev) => {
       return columns.map((v, index) => prev[index] || 0);
     });
-    setResizeDeltas(prev => {
+    setResizeDeltas((prev) => {
       return columns.map((v, index) => prev[index] || 0);
     });
   }, [columns]);
 
   const resetAfterColumnIndex = React.useCallback(
-    columnIndex => {
+    (columnIndex) => {
       if (gridRef) {
         // $FlowFixMe trigger react-window to layout the elements again
         gridRef.resetAfterColumnIndex(columnIndex, true);
       }
     },
-    [gridRef],
+    [gridRef]
   );
   const handleWidthsChange = React.useCallback(
-    nextWidths => {
+    (nextWidths) => {
       setMeasuredWidths(nextWidths);
       resetAfterColumnIndex(0);
     },
-    [setMeasuredWidths, resetAfterColumnIndex],
+    [setMeasuredWidths, resetAfterColumnIndex]
   );
   const handleColumnResize = React.useCallback(
     (columnIndex, delta) => {
-      setResizeDeltas(prev => {
+      setResizeDeltas((prev) => {
         prev[columnIndex] = Math.max(prev[columnIndex] + delta, 0);
         return [...prev];
       });
       resetAfterColumnIndex(columnIndex);
     },
-    [setResizeDeltas, resetAfterColumnIndex],
+    [setResizeDeltas, resetAfterColumnIndex]
   );
 
   const [scrollLeft, setScrollLeft] = React.useState(0);
@@ -758,27 +729,22 @@ export function DataTable({
     }
   }, [recentlyScrolledX]);
   const handleScroll = React.useCallback(
-    params => {
+    (params) => {
       setScrollLeft(params.scrollLeft);
       if (params.scrollLeft !== scrollLeft) {
         setRecentlyScrolledX(true);
       }
     },
-    [scrollLeft, setScrollLeft, setRecentlyScrolledX],
+    [scrollLeft, setScrollLeft, setRecentlyScrolledX]
   );
 
   const sortedIndices = React.useMemo(() => {
     let toSort = allRows.map((r, i) => [r, i]);
     const index = sortIndex;
 
-    if (
-      index !== null &&
-      index !== undefined &&
-      index !== -1 &&
-      columns[index]
-    ) {
+    if (index !== null && index !== undefined && index !== -1 && columns[index]) {
       const sortFn = columns[index].sortFn;
-      const getValue = row => columns[index].mapDataToValue(row.data);
+      const getValue = (row) => columns[index].mapDataToValue(row.data);
       if (sortDirection === SORT_DIRECTIONS.ASC) {
         toSort.sort((a, b) => sortFn(getValue(a[0]), getValue(b[0])));
       } else if (sortDirection === SORT_DIRECTIONS.DESC) {
@@ -786,20 +752,20 @@ export function DataTable({
       }
     }
 
-    return toSort.map(el => el[1]);
+    return toSort.map((el) => el[1]);
   }, [sortIndex, sortDirection, columns, allRows]);
 
   const filteredIndices = React.useMemo(() => {
     const set = new Set(allRows.map((_, idx) => idx));
-    Array.from(filters || new Set(), f => f).forEach(([title, filter]) => {
-      const columnIndex = columns.findIndex(c => c.title === title);
+    Array.from(filters || new Set(), (f) => f).forEach(([title, filter]) => {
+      const columnIndex = columns.findIndex((c) => c.title === title);
       const column = columns[columnIndex];
       if (!column) {
         return;
       }
 
       const filterFn = column.buildFilter(filter);
-      Array.from(set).forEach(idx => {
+      Array.from(set).forEach((idx) => {
         if (!filterFn(column.mapDataToValue(allRows[idx].data))) {
           set.delete(idx);
         }
@@ -813,15 +779,12 @@ export function DataTable({
           stringishColumnIndices.push(i);
         }
       }
-      Array.from(set).forEach(idx => {
-        const matches = stringishColumnIndices.some(cdx => {
+      Array.from(set).forEach((idx) => {
+        const matches = stringishColumnIndices.some((cdx) => {
           const column = columns[cdx];
           const textQueryFilter = column.textQueryFilter;
           if (textQueryFilter) {
-            return textQueryFilter(
-              textQuery,
-              column.mapDataToValue(allRows[idx].data),
-            );
+            return textQueryFilter(textQuery, column.mapDataToValue(allRows[idx].data));
           }
           return false;
         });
@@ -837,8 +800,8 @@ export function DataTable({
 
   const rows = React.useMemo(() => {
     const result = sortedIndices
-      .filter(idx => filteredIndices.has(idx))
-      .map(idx => allRows[idx]);
+      .filter((idx) => filteredIndices.has(idx))
+      .map((idx) => allRows[idx]);
 
     if (onIncludedRowsChange) {
       onIncludedRowsChange(result);
@@ -848,9 +811,7 @@ export function DataTable({
 
   const [browserScrollbarWidth, setBrowserScrollbarWidth] = React.useState(0);
   const normalizedWidths = React.useMemo(() => {
-    const resizedWidths = measuredWidths.map(
-      (w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]),
-    );
+    const resizedWidths = measuredWidths.map((w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]));
     if (gridRef) {
       const gridProps = gridRef.props;
 
@@ -864,13 +825,11 @@ export function DataTable({
         }
       }
 
-      const scrollbarWidth = isContentTallerThanContainer
-        ? browserScrollbarWidth
-        : 0;
+      const scrollbarWidth = isContentTallerThanContainer ? browserScrollbarWidth : 0;
 
       const remainder = gridProps.width - sum(resizedWidths) - scrollbarWidth;
       const padding = Math.floor(
-        remainder / columns.filter(c => (c ? c.fillWidth : true)).length,
+        remainder / columns.filter((c) => (c ? c.fillWidth : true)).length
       );
       if (padding > 0) {
         const result = [];
@@ -888,14 +847,7 @@ export function DataTable({
       }
     }
     return resizedWidths;
-  }, [
-    gridRef,
-    measuredWidths,
-    resizeDeltas,
-    browserScrollbarWidth,
-    rows.length,
-    columns,
-  ]);
+  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
 
   const isSelectable = batchActions ? !!batchActions.length : false;
   const isSelectedAll = React.useMemo(() => {
@@ -911,13 +863,13 @@ export function DataTable({
     return !!selectedRowIds.size && selectedRowIds.size < rows.length;
   }, [selectedRowIds, rows.length]);
   const isRowSelected = React.useCallback(
-    id => {
+    (id) => {
       if (selectedRowIds) {
         return selectedRowIds.has(id);
       }
       return false;
     },
-    [selectedRowIds],
+    [selectedRowIds]
   );
   const handleSelectMany = React.useCallback(() => {
     if (onSelectMany) {
@@ -930,21 +882,21 @@ export function DataTable({
     }
   }, [onSelectNone]);
   const handleSelectOne = React.useCallback(
-    row => {
+    (row) => {
       if (onSelectOne) {
         onSelectOne(row);
       }
     },
-    [onSelectOne],
+    [onSelectOne]
   );
 
   const handleSort = React.useCallback(
-    columnIndex => {
+    (columnIndex) => {
       if (onSort) {
         onSort(columnIndex);
       }
     },
-    [onSort],
+    [onSort]
   );
 
   const [columnHighlightIndex, setColumnHighlightIndex] = React.useState(-1);
@@ -955,7 +907,7 @@ export function DataTable({
     if (gridRef) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.scrollToItem({rowIndex: nextIndex});
+        gridRef.scrollToItem({ rowIndex: nextIndex });
       }
       if (onRowHighlightChange) {
         onRowHighlightChange(nextIndex, rows[nextIndex - 1]);
@@ -964,13 +916,13 @@ export function DataTable({
   }
 
   const handleRowMouseEnter = React.useCallback(
-    nextIndex => {
+    (nextIndex) => {
       setColumnHighlightIndex(-1);
       if (nextIndex !== rowHighlightIndex) {
         handleRowHighlightIndexChange(nextIndex);
       }
     },
-    [rowHighlightIndex],
+    [rowHighlightIndex]
   );
   function handleColumnHeaderMouseEnter(columnIndex) {
     setColumnHighlightIndex(columnIndex);
@@ -1019,9 +971,9 @@ export function DataTable({
         isSelectable={isSelectable}
         onWidthsChange={handleWidthsChange}
       />
-      <MeasureScrollbarWidth onWidthChange={w => setBrowserScrollbarWidth(w)} />
+      <MeasureScrollbarWidth onWidthChange={(w) => setBrowserScrollbarWidth(w)} />
       <AutoSizer>
-        {({height, width}) => (
+        {({ height, width }) => (
           <HeaderContext.Provider
             value={{
               columns: columns,
@@ -1054,13 +1006,13 @@ export function DataTable({
             }}
           >
             <VariableSizeGrid
-              // eslint-disable-next-line flowtype/no-weak-types
+              // flowlint-next-line unclear-type:off
               ref={(setGridRef: any)}
               overscanRowCount={10}
               overscanColumnCount={5}
               innerElementType={InnerTableElement}
               columnCount={columns.length}
-              columnWidth={columnIndex => normalizedWidths[columnIndex]}
+              columnWidth={(columnIndex) => normalizedWidths[columnIndex]}
               height={height - 2}
               // plus one to account for additional header row
               rowCount={rows.length + 1}

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

@@ -7,21 +7,21 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import React from 'react';
-import {Button, SHAPE, SIZE} from '../button/index.js';
-import {Filter as FilterIcon} from '../icon/index.js';
-import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
-import {Popover, PLACEMENT} from '../popover/index.js';
-import {useStyletron} from '../styles/index.js';
-import {useUIDSeed} from 'react-uid';
+import { Button, SHAPE, SIZE } from '../button/index.js';
+import { Filter as FilterIcon } from '../icon/index.js';
+import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
+import { Popover, PLACEMENT } from '../popover/index.js';
+import { useStyletron } from '../styles/index.js';
+import { useUIDSeed } from 'react-uid';
 
-import {COLUMNS} from './constants.js';
-import {matchesQuery} from './text-search.js';
-import type {ColumnT} from './types.js';
-import {LocaleContext} from '../locale/index.js';
+import { COLUMNS } from './constants.js';
+import { matchesQuery } from './text-search.js';
+import type { ColumnT } from './types.js';
+import { LocaleContext } from '../locale/index.js';
 
-import {isFocusVisible} from '../utils/focusVisible.js';
+import { isFocusVisible } from '../utils/focusVisible.js';
 
-function ColumnIcon(props: {column: ColumnT<>}) {
+function ColumnIcon(props: { column: ColumnT<> }) {
   if (props.column.kind === COLUMNS.BOOLEAN) {
     return '01';
   }
@@ -45,9 +45,9 @@ type OptionsPropsT = {
   columns: ColumnT<>[],
   highlightIndex: number,
   onClick: (ColumnT<>) => void,
-  onKeyDown: KeyboardEvent => void,
-  onMouseEnter: number => void,
-  onQueryChange: string => void,
+  onKeyDown: (KeyboardEvent) => void,
+  onMouseEnter: (number) => void,
+  onQueryChange: (string) => void,
   query: string,
   searchable: boolean,
 };
@@ -64,7 +64,7 @@ function Options(props: OptionsPropsT) {
 
   const [focusVisible, setFocusVisible] = React.useState(false);
   const seed = useUIDSeed();
-  const buiRef = React.useRef(props.columns.map(col => seed(col)));
+  const buiRef = React.useRef(props.columns.map((col) => seed(col)));
 
   const handleFocus = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
@@ -110,7 +110,7 @@ function Options(props: OptionsPropsT) {
           <Input
             inputRef={inputRef}
             value={props.query}
-            onChange={event => props.onQueryChange(event.target.value)}
+            onChange={(event) => props.onQueryChange(event.target.value)}
             placeholder={locale.datatable.optionsSearch}
             size={INPUT_SIZE.compact}
             clearable
@@ -163,9 +163,7 @@ function Options(props: OptionsPropsT) {
               className={css({
                 ...theme.typography.font100,
                 alignItems: 'center',
-                backgroundColor: isHighlighted
-                  ? theme.colors.menuFillHover
-                  : null,
+                backgroundColor: isHighlighted ? theme.colors.menuFillHover : null,
                 cursor: 'pointer',
                 display: 'flex',
                 paddingTop: theme.sizing.scale100,
@@ -201,14 +199,11 @@ function Options(props: OptionsPropsT) {
 
 type PropsT = {
   columns: ColumnT<>[],
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   filters: Map<string, any>,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   rows: any[],
-  onSetFilter: (
-    columnTitle: string,
-    filterParams: {description: string},
-  ) => void,
+  onSetFilter: (columnTitle: string, filterParams: { description: string }) => void,
 };
 
 function FilterMenu(props: PropsT) {
@@ -228,15 +223,13 @@ function FilterMenu(props: PropsT) {
   }, []);
 
   const filterableColumns = React.useMemo(() => {
-    return props.columns.filter(column => {
+    return props.columns.filter((column) => {
       return column.filterable && !props.filters.has(column.title);
     });
   }, [props.columns, props.filters]);
 
   const columns = React.useMemo(() => {
-    return filterableColumns.filter(column =>
-      matchesQuery(column.title, query),
-    );
+    return filterableColumns.filter((column) => matchesQuery(column.title, query));
   }, [filterableColumns, query]);
 
   const Filter = React.useMemo(() => {
@@ -245,11 +238,9 @@ function FilterMenu(props: PropsT) {
   }, [activeColumn]);
 
   const activeColumnData = React.useMemo(() => {
-    const columnIndex = props.columns.findIndex(c => c === activeColumn);
+    const columnIndex = props.columns.findIndex((c) => c === activeColumn);
     if (columnIndex < 0) return [];
-    return props.rows.map(row =>
-      props.columns[columnIndex].mapDataToValue(row.data),
-    );
+    return props.rows.map((row) => props.columns[columnIndex].mapDataToValue(row.data));
   }, [props.columns, props.rows, activeColumn]);
 
   function handleKeyDown(event) {
@@ -282,9 +273,7 @@ function FilterMenu(props: PropsT) {
             <Filter
               data={activeColumnData}
               close={handleClose}
-              setFilter={filterParams =>
-                props.onSetFilter(activeColumn.title, filterParams)
-              }
+              setFilter={(filterParams) => props.onSetFilter(activeColumn.title, filterParams)}
             />
           );
         }