baseui 0.0.0-next-831b4fe → 0.0.0-next-2aecb6f

package/a11y/a11y.js

@@ -182,7 +182,7 @@ function A11y(props) {
 
     return (
       /*#__PURE__*/
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       React.createElement(Violation, {
         target: node,
         violations: violations,

package/a11y/a11y.js.flow

@@ -136,7 +136,7 @@ export default function A11y(props: {children: React.Node}) {
       <span ref={child}>{props.children}</span>
       <div>
         {violationsByNode.map(([node, violations], index) => (
-          // eslint-disable-next-line flowtype/no-weak-types
+          // flowlint-next-line unclear-type:off
           <Violation target={node} violations={(violations: any)} key={index} />
         ))}
       </div>

package/accordion/accordion.js

@@ -92,7 +92,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
   _createClass(Accordion, [{
     key: "onPanelChange",
-    value: function onPanelChange(key, onChange) {
+    value: //flowlint-next-line unclear-type:off
+    function onPanelChange(key, onChange) {
       var activeKeys = this.state.expanded;
       var accordion = this.props.accordion;
 
@@ -144,7 +145,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           children = _this$props2.children,
           renderPanelContent = _this$props2.renderPanelContent,
           renderAll = _this$props2.renderAll,
-          overrides = _this$props2.overrides; // eslint-disable-next-line flowtype/no-weak-types
+          overrides = _this$props2.overrides; // flowlint-next-line unclear-type:off
 
       return React.Children.map(children, function (child, index) {
         if (!child) return; // If there is no key provided use the panel order as a default key

package/accordion/accordion.js.flow

@@ -38,7 +38,8 @@ export default class Accordion extends React.Component<
     ...this.props.initialState,
   };
 
-  onPanelChange(key: React.Key, onChange: () => {}, ...args: *) {
+  //flowlint-next-line unclear-type:off
+  onPanelChange(key: React.Key, onChange: () => {}, ...args: Array<any>) {
     let activeKeys = this.state.expanded;
     const {accordion} = this.props;
     if (accordion) {
@@ -77,8 +78,8 @@ export default class Accordion extends React.Component<
       renderAll,
       overrides,
     } = this.props;
-    // eslint-disable-next-line flowtype/no-weak-types
-    return React.Children.map(children, (child: *, index) => {
+    // flowlint-next-line unclear-type:off
+    return React.Children.map(children, (child: any, index) => {
       if (!child) return;
       // If there is no key provided use the panel order as a default key
       const key = child.key || String(index);

package/accordion/panel.js

@@ -116,7 +116,7 @@ var Panel = function Panel(_ref) {
     }
 
     typeof onKeyDown === 'function' && onKeyDown(e);
-  }, [expanded, disabled, onChange, onKeyDown]); // eslint-disable-next-line flowtype/no-weak-types
+  }, [expanded, disabled, onChange, onKeyDown]); // flowlint-next-line unclear-type:off
 
   var _animateRef = React.useRef(null);
 

package/accordion/panel.js.flow

@@ -84,7 +84,7 @@ const Panel = ({
     },
     [expanded, disabled, onChange, onKeyDown],
   );
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   const _animateRef = React.useRef<any>(null);
 
   React.useEffect(() => {

package/accordion/types.js.flow

@@ -57,7 +57,8 @@ export type AccordionOnChangeHandlerT = ({
   expanded: Array<React.Key>,
 }) => mixed;
 
-type ChildrenT = React.ChildrenArray<React.Element<*>>;
+//flowlint-next-line unclear-type:off
+type ChildrenT = React.ChildrenArray<React.Element<any>>;
 
 export type AccordionPropsT = {
   /** Determines how many panels may be expanded at a time. If set to

package/app-nav-bar/types.js.flow

@@ -35,13 +35,13 @@ export type OverridesT = {|
 
 export type NavItemT = {|
   active?: boolean,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   icon?: React.AbstractComponent<any>,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   info?: any,
   label: string,
   children?: NavItemT[],
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   navExitIcon?: React.AbstractComponent<any>,
   navPosition?: {
     desktop?: $Values<typeof POSITION>,

package/aspect-ratio-box/aspect-ratio-box.js

@@ -60,7 +60,7 @@ var AspectRatioBox = function AspectRatioBox(_ref2) {
   var blockOverrides = (0, _overrides.mergeOverrides)(aspectRatioBoxOverrides, overrides);
   return /*#__PURE__*/React.createElement(_index.Block // coerced to any because of how react components are typed.
   // cannot guarantee an html element
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   , _extends({
     ref: forwardedRef,
     overrides: blockOverrides,

package/aspect-ratio-box/aspect-ratio-box.js.flow

@@ -35,7 +35,7 @@ const AspectRatioBox = ({
   aspectRatio = 1,
   overrides = {},
   ...restProps
-}: // eslint-disable-next-line flowtype/no-weak-types
+}: // flowlint-next-line unclear-type:off
 AspectRatioBoxPropsT & {forwardedRef: any}): React.Node => {
   const aspectRatioBoxOverrides = {
     Block: {
@@ -47,7 +47,7 @@ AspectRatioBoxPropsT & {forwardedRef: any}): React.Node => {
     <Block
       // coerced to any because of how react components are typed.
       // cannot guarantee an html element
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       ref={(forwardedRef: any)}
       overrides={blockOverrides}
       $aspectRatio={aspectRatio}

package/block/block.js

@@ -116,7 +116,7 @@ function Block(_ref) {
 
   return /*#__PURE__*/React.createElement(BaseBlock // coerced to any because because of how react components are typed.
   // cannot guarantee an html element
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   , _extends({
     ref: forwardedRef,
     $as: as,

package/block/block.js.flow

@@ -93,7 +93,7 @@ function Block({
     <BaseBlock
       // coerced to any because because of how react components are typed.
       // cannot guarantee an html element
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       ref={(forwardedRef: any)}
       $as={as}
       $color={color}

package/block/styled-components.js.flow

@@ -22,8 +22,9 @@ function constrainToNull(value) {
 
 type ApplyParams = {
   property: string,
-  value?: * | Array<*>,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
+  value?: any | Array<any>,
+  // flowlint-next-line unclear-type:off
   transform?: Function,
 };
 

package/button/button.js.flow

@@ -17,17 +17,16 @@ import {defaultProps} from './default-props.js';
 import {getOverrides} from '../helpers/overrides.js';
 import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
 
-import type {ButtonPropsT, SharedStylePropsT} from './types.js';
+import type {ButtonPropsT, SharedStylePropsT, ReactRefT} from './types.js';
 
 class Button extends React.Component<
-  // eslint-disable-next-line flowtype/no-weak-types
-  ButtonPropsT & {forwardedRef: any},
+  ButtonPropsT & {forwardedRef: ReactRefT<HTMLElement>},
   {isFocusVisible: boolean},
 > {
   static defaultProps = defaultProps;
   state = {isFocusVisible: false};
 
-  internalOnClick = (...args: *) => {
+  internalOnClick = (...args) => {
     const {isLoading, onClick} = this.props;
     if (isLoading) {
       args[0].preventDefault();

package/button/types.js.flow

@@ -10,6 +10,8 @@ import * as React from 'react';
 import {KIND, SIZE, SHAPE} from './constants.js';
 import type {OverrideT} from '../helpers/overrides.js';
 
+export type ReactRefT<T> = {|current: null | T|};
+
 export type OverridesT = {
   Root?: OverrideT,
   BaseButton?: OverrideT,
@@ -29,7 +31,7 @@ export type ButtonPropsT = {
   colors?: CustomColorsT,
   disabled?: boolean,
   /** A helper rendered at the end of the button. */
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   endEnhancer?: React.Node | React.AbstractComponent<any>,
   /** Show loading button style and spinner. */
   isLoading?: boolean,
@@ -44,7 +46,7 @@ export type ButtonPropsT = {
   /** Defines the size of the button */
   size?: $Keys<typeof SIZE>,
   /** A helper rendered at the start of the button. */
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   startEnhancer?: React.Node | React.AbstractComponent<any>,
   type?: 'submit' | 'reset' | 'button',
 };

package/button-group/button-group.js.flow

@@ -29,7 +29,7 @@ function isIndexSelected(selected, index) {
 }
 
 export default class ButtonGroup extends React.Component<PropsT> {
-  childRefs: // eslint-disable-next-line flowtype/no-weak-types
+  childRefs: // flowlint-next-line unclear-type:off
   {[key: number]: React.ElementRef<any>} = {};
   static defaultProps = {
     disabled: false,

package/checkbox/stateful-checkbox-container.js.flow

@@ -81,9 +81,9 @@ class StatefulCheckboxContainer extends React.Component<
 
   render() {
     const {
-      children = (childProps: {}) => null, // eslint-disable-line no-unused-vars
-      initialState, // eslint-disable-line no-unused-vars
-      stateReducer, // eslint-disable-line no-unused-vars
+      children = (childProps: {}) => null,
+      initialState,
+      stateReducer,
       ...restProps
     } = this.props;
     const {onChange, onMouseEnter, onMouseLeave, onFocus, onBlur} = this;

package/checkbox/stateful-checkbox.js.flow

@@ -10,13 +10,16 @@ import * as React from 'react';
 import {default as StatefulContainer} from './stateful-checkbox-container.js';
 // eslint-disable-next-line import/no-named-default
 import {default as Checkbox} from './checkbox.js';
-import type {PropsT, StatefulCheckboxPropsT} from './types.js';
+import type {
+  StatefulContainerChildPropsT,
+  StatefulCheckboxPropsT,
+} from './types.js';
 // Styled elements
 
 const StatefulCheckbox = function (props: StatefulCheckboxPropsT) {
   return (
     <StatefulContainer {...props}>
-      {(childrenProps: PropsT) => (
+      {(childrenProps: StatefulContainerChildPropsT) => (
         <Checkbox {...childrenProps}>{props.children}</Checkbox>
       )}
     </StatefulContainer>

package/checkbox/types.js.flow

@@ -11,6 +11,7 @@ import {STYLE_TYPE} from './constants.js';
 
 export type LabelPlacementT = 'top' | 'right' | 'bottom' | 'left';
 export type StyleTypeT = $Keys<typeof STYLE_TYPE>;
+export type ReactRefT<T> = {|current: null | T|};
 
 export type OverridesT = {
   Checkmark?: OverrideT,
@@ -30,7 +31,7 @@ export type DefaultPropsT = {
   error: boolean,
   autoFocus: boolean,
   isIndeterminate: boolean,
-  inputRef: {current: HTMLInputElement | null},
+  inputRef: ReactRefT<HTMLInputElement>,
   checkmarkType: StyleTypeT,
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
   onMouseEnter: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
@@ -65,7 +66,7 @@ export type PropsT = {
   /** You should use error instead. */
   isError?: boolean,
   /** Used to get a ref to the input element. Useful for programmatically focusing the input */
-  inputRef: {current: HTMLInputElement | null},
+  inputRef: ReactRefT<HTMLInputElement>,
   /** Focus the checkbox on initial render. */
   autoFocus?: boolean,
   /** Passed to the input element type attribute */
@@ -117,9 +118,26 @@ export type StateReducerT = (
   event: SyntheticInputEvent<HTMLInputElement>,
 ) => StateT;
 
+export type StatefulContainerChildPropsT = {
+  ...StateT,
+  overrides?: OverridesT,
+  /** Handler for change events on trigger element. */
+  onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  /** Handler for mouseenter events on trigger element. */
+  onMouseEnter?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  /** Handler for mouseleave events on trigger element. */
+  onMouseLeave?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  /** Handler for focus events on trigger element. */
+  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  /** Handler for blur events on trigger element. */
+  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  /** Focus the checkbox on initial render. */
+  autoFocus?: boolean,
+};
+
 export type DefaultStatefulPropsT = {
   initialState: StateT,
-  children?: (*) => React$Node,
+  children?: (StatefulContainerChildPropsT) => React$Node,
   stateReducer: StateReducerT,
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
   onMouseEnter: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
@@ -131,7 +149,7 @@ export type DefaultStatefulPropsT = {
 export type StatefulContainerPropsT = {
   overrides?: OverridesT,
   /** Component or String value for label of checkbox. */
-  children?: (*) => React$Node,
+  children?: (StatefulContainerChildPropsT) => React$Node,
   /** Defines the components initial state value */
   initialState?: StateT,
   /** A state change handler. Used to override default state transitions. */

package/combobox/combobox.js

@@ -212,7 +212,7 @@ function Combobox(props) {
     if (listboxRef.current && event.relatedTarget && // NOTE(chase): Contains method expects a Node type, but relatedTarget is
     // EventTarget which is a super type of Node. Passing an EventTarget seems
     // to work fine, assuming the flow type is too strict.
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     listboxRef.current.contains(event.relatedTarget)) {
       return;
     }
@@ -304,7 +304,7 @@ function Combobox(props) {
       popoverOverrides = _getOverrides12$$over === void 0 ? {} : _getOverrides12$$over,
       restPopoverProps = _objectWithoutProperties(_getOverrides12$, ["overrides"]);
 
-  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
+  return /*#__PURE__*/React.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: rootRef
   }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
@@ -319,7 +319,7 @@ function Combobox(props) {
     content: /*#__PURE__*/React.createElement(ListBox // TabIndex attribute exists to exclude option clicks from triggering onBlur event actions.
     , _extends({
       tabIndex: "-1",
-      id: listboxId // eslint-disable-next-line flowtype/no-weak-types
+      id: listboxId // flowlint-next-line unclear-type:off
       ,
       ref: listboxRef,
       role: "listbox",
@@ -339,7 +339,7 @@ function Combobox(props) {
           key: index,
           onClick: function onClick() {
             return handleOptionClick(index);
-          } // eslint-disable-next-line flowtype/no-weak-types
+          } // flowlint-next-line unclear-type:off
           ,
           ref: isSelected ? selectedOptionRef : null,
           role: "option",

package/combobox/combobox.js.flow

@@ -174,7 +174,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
       // NOTE(chase): Contains method expects a Node type, but relatedTarget is
       // EventTarget which is a super type of Node. Passing an EventTarget seems
       // to work fine, assuming the flow type is too strict.
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       listboxRef.current.contains((event.relatedTarget: any))
     ) {
       return;
@@ -250,7 +250,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
 
   return (
     <Root
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       ref={(rootRef: any)}
       {...rootProps}
     >
@@ -268,7 +268,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             // TabIndex attribute exists to exclude option clicks from triggering onBlur event actions.
             tabIndex="-1"
             id={listboxId}
-            // eslint-disable-next-line flowtype/no-weak-types
+            // flowlint-next-line unclear-type:off
             ref={(listboxRef: any)}
             role="listbox"
             aria-label={listBoxLabel}
@@ -287,7 +287,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
                   id={isSelected ? activeDescendantId : null}
                   key={index}
                   onClick={() => handleOptionClick(index)}
-                  // eslint-disable-next-line flowtype/no-weak-types
+                  // flowlint-next-line unclear-type:off
                   ref={isSelected ? (selectedOptionRef: any) : null}
                   role="option"
                   $isSelected={isSelected}

package/combobox/types.js.flow

@@ -11,6 +11,8 @@ import * as React from 'react';
 import type {OverrideT} from '../helpers/overrides.js';
 import {SIZE} from '../input/index.js';
 
+export type ReactRefT<T> = {|current: null | T|};
+
 export type PropsT<OptionT = mixed> = {|
   // Controls if the input value will be updated while keyboard navigating. Defaults to true.
   autocomplete?: boolean,
@@ -31,7 +33,7 @@ export type PropsT<OptionT = mixed> = {|
   id?: string,
   name?: string,
   // A ref to access the inner Input component.
-  inputRef?: React.ElementRef<*>,
+  inputRef?: ReactRefT<HTMLElement>,
   // Called when input loses focus.
   onBlur?: (SyntheticInputEvent<HTMLInputElement>) => mixed,
   // Called when input value changes or option is selected. If user selects a

package/data-table/column-datetime.js

@@ -264,7 +264,7 @@ function DatetimeFilter(props) {
   var _React$useState7 = React.useState([initialState.categoricalOperator]),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       categoricalOperator = _React$useState8[0],
-      setCategoricalOperator = _React$useState8[1]; // eslint-disable-next-line flowtype/no-weak-types
+      setCategoricalOperator = _React$useState8[1]; // flowlint-next-line unclear-type:off
 
 
   var _React$useState9 = React.useState(initialState.rangeDates.length ? initialState.rangeDates : [new Date(datesSorted[0]), new Date(datesSorted[datesSorted.length - 1])]),
@@ -306,7 +306,7 @@ function DatetimeFilter(props) {
     },
     onApply: function onApply() {
       if (isRange) {
-        // eslint-disable-next-line flowtype/no-weak-types
+        // flowlint-next-line unclear-type:off
         var op = rangeOperator[0].id;
         var description = '';
 
@@ -338,7 +338,7 @@ function DatetimeFilter(props) {
       }
 
       if (isCategorical) {
-        // eslint-disable-next-line flowtype/no-weak-types
+        // flowlint-next-line unclear-type:off
         var _op = categoricalOperator[0].id;
         var selection = [];
         var operatorLocaleLabelKey = '';
@@ -431,7 +431,7 @@ function DatetimeFilter(props) {
     value: rangeOperator,
     onChange: function onChange(params) {
       return setRangeOperator(params.value);
-    } // eslint-disable-next-line flowtype/no-weak-types
+    } // flowlint-next-line unclear-type:off
     ,
     mountNode: mountNode.current,
     options: RANGE_OPERATIONS.map(function (op) {
@@ -446,7 +446,7 @@ function DatetimeFilter(props) {
     className: css({
       paddingTop: theme.sizing.scale600
     })
-  }, (rangeOperator[0].id === _constants.DATETIME_OPERATIONS.RANGE_DATETIME || rangeOperator[0].id === _constants.DATETIME_OPERATIONS.RANGE_DATE) && /*#__PURE__*/React.createElement(_index14.Datepicker // eslint-disable-next-line flowtype/no-weak-types
+  }, (rangeOperator[0].id === _constants.DATETIME_OPERATIONS.RANGE_DATETIME || rangeOperator[0].id === _constants.DATETIME_OPERATIONS.RANGE_DATE) && /*#__PURE__*/React.createElement(_index14.Datepicker // flowlint-next-line unclear-type:off
   , {
     mountNode: mountNode.current,
     value: rangeDates,
@@ -518,7 +518,7 @@ function DatetimeFilter(props) {
         label: locale.datatable[op.localeLabelKey],
         id: op.id
       };
-    }) // eslint-disable-next-line flowtype/no-weak-types
+    }) // flowlint-next-line unclear-type:off
     ,
     mountNode: mountNode.current,
     size: "compact",

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

@@ -43,7 +43,7 @@ import {LocaleContext} from '../locale/index.js';
 type OptionsT = {|
   ...SharedColumnOptionsT<Date>,
   formatString?: string,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   locale?: any,
 |};
 
@@ -241,7 +241,7 @@ function DatetimeFilter(props) {
   const [categoricalOperator, setCategoricalOperator] = React.useState<ValueT>([
     initialState.categoricalOperator,
   ]);
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   const [rangeDates, setRangeDates] = React.useState<any>(
     initialState.rangeDates.length
       ? initialState.rangeDates
@@ -270,7 +270,7 @@ function DatetimeFilter(props) {
       onExcludeChange={() => setExclude(!exclude)}
       onApply={() => {
         if (isRange) {
-          // eslint-disable-next-line flowtype/no-weak-types
+          // flowlint-next-line unclear-type:off
           const op: DatetimeOperationsT = (rangeOperator[0].id: any);
 
           let description = '';
@@ -298,7 +298,7 @@ function DatetimeFilter(props) {
         }
 
         if (isCategorical) {
-          // eslint-disable-next-line flowtype/no-weak-types
+          // flowlint-next-line unclear-type:off
           const op: DatetimeOperationsT = (categoricalOperator[0].id: any);
 
           let selection: number[] = [];
@@ -389,7 +389,7 @@ function DatetimeFilter(props) {
             <Select
               value={rangeOperator}
               onChange={(params) => setRangeOperator(params.value)}
-              // eslint-disable-next-line flowtype/no-weak-types
+              // flowlint-next-line unclear-type:off
               mountNode={(mountNode.current: any)}
               options={RANGE_OPERATIONS.map((op) => ({
                 label: locale.datatable[op.localeLabelKey],
@@ -403,7 +403,7 @@ function DatetimeFilter(props) {
               {(rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME ||
                 rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATE) && (
                 <Datepicker
-                  // eslint-disable-next-line flowtype/no-weak-types
+                  // flowlint-next-line unclear-type:off
                   mountNode={(mountNode.current: any)}
                   value={rangeDates}
                   onChange={({date}) => {
@@ -496,7 +496,7 @@ function DatetimeFilter(props) {
                 label: locale.datatable[op.localeLabelKey],
                 id: op.id,
               }))}
-              // eslint-disable-next-line flowtype/no-weak-types
+              // flowlint-next-line unclear-type:off
               mountNode={(mountNode.current: any)}
               size="compact"
               clearable={false}

package/data-table/data-table.js

@@ -86,7 +86,7 @@ function CellPlacement(_ref) {
 
   var backgroundColor = theme.colors.backgroundPrimary;
 
-  if (rowIndex % 2 && columnIndex === data.columnHighlightIndex || rowIndex === data.rowHighlightIndex) {
+  if (Boolean(rowIndex % 2) && columnIndex === data.columnHighlightIndex || rowIndex === data.rowHighlightIndex) {
     backgroundColor = theme.colors.backgroundTertiary;
   } else if (rowIndex % 2 || columnIndex === data.columnHighlightIndex) {
     backgroundColor = theme.colors.backgroundSecondary;
@@ -197,7 +197,7 @@ function Header(props) {
   var _React$useState3 = React.useState(0),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       endResizePos = _React$useState4[0],
-      setEndResizePos = _React$useState4[1]; // eslint-disable-next-line flowtype/no-weak-types
+      setEndResizePos = _React$useState4[1]; // flowlint-next-line unclear-type:off
 
 
   var headerCellRef = React.useRef(null);
@@ -569,7 +569,7 @@ function DataTable(_ref2) {
 
     return 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
 
   var _React$useState7 = React.useState(null),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
@@ -952,7 +952,7 @@ function DataTable(_ref2) {
         tableHeight: height,
         widths: normalizedWidths
       }
-    }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
+    }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // flowlint-next-line unclear-type:off
     , {
       ref: setGridRef,
       overscanRowCount: 10,

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

@@ -99,7 +99,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;
@@ -260,7 +260,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;
@@ -700,7 +700,7 @@ export function DataTable({
   );
 
   // 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),
@@ -1056,7 +1056,7 @@ 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}

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

@@ -201,9 +201,9 @@ 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,