baseui 10.9.1 → 10.11.0

package/drawer/styled-components.js.flow

@@ -5,9 +5,9 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {styled} from '../styles/index.js';
-import {SIZE, SIZE_DIMENSION, ANCHOR} from './constants.js';
-import type {SharedStylePropsArgT, SizePropT, AnchorPropT} from './types.js';
+import { styled } from '../styles/index.js';
+import { SIZE, SIZE_DIMENSION, ANCHOR } from './constants.js';
+import type { SharedStylePropsArgT, SizePropT, AnchorPropT } from './types.js';
 
 function getSizeStyles($size: SizePropT, $anchor: AnchorPropT) {
   const styles = {
@@ -38,15 +38,13 @@ function getSizeStyles($size: SizePropT, $anchor: AnchorPropT) {
 }
 
 function getAnchorStyles(props: SharedStylePropsArgT) {
-  const {$anchor, $isVisible, $size} = props;
+  const { $anchor, $isVisible, $size } = props;
   const sizeStyles = getSizeStyles($size, $anchor);
-  const {left, right, top, bottom} = ANCHOR;
+  const { left, right, top, bottom } = ANCHOR;
   switch ($anchor) {
     case right: {
       return {
-        transform: $isVisible
-          ? 'translateX(0)'
-          : `translateX(${sizeStyles.width})`,
+        transform: $isVisible ? 'translateX(0)' : `translateX(${sizeStyles.width})`,
         right: $isVisible ? 0 : `-${sizeStyles.width}`,
         top: 0,
         ...sizeStyles,
@@ -54,9 +52,7 @@ function getAnchorStyles(props: SharedStylePropsArgT) {
     }
     case left: {
       return {
-        transform: $isVisible
-          ? 'translateX(0)'
-          : `translateX(-${sizeStyles.width})`,
+        transform: $isVisible ? 'translateX(0)' : `translateX(-${sizeStyles.width})`,
         left: $isVisible ? 0 : `-${sizeStyles.width}`,
         top: 0,
         ...sizeStyles,
@@ -64,9 +60,7 @@ function getAnchorStyles(props: SharedStylePropsArgT) {
     }
     case bottom: {
       return {
-        transform: $isVisible
-          ? 'translateY(0)'
-          : `translateY(${sizeStyles.height})`,
+        transform: $isVisible ? 'translateY(0)' : `translateY(${sizeStyles.height})`,
         left: 0,
         bottom: $isVisible ? '0' : `-${sizeStyles.height}`,
         ...sizeStyles,
@@ -74,9 +68,7 @@ function getAnchorStyles(props: SharedStylePropsArgT) {
     }
     case top: {
       return {
-        transform: $isVisible
-          ? 'translateY(0)'
-          : `translateY(-${sizeStyles.height})`,
+        transform: $isVisible ? 'translateY(0)' : `translateY(-${sizeStyles.height})`,
         left: 0,
         top: $isVisible ? '0' : `-${sizeStyles.height}`,
         ...sizeStyles,
@@ -88,7 +80,7 @@ function getAnchorStyles(props: SharedStylePropsArgT) {
   }
 }
 
-export const StyledRoot = styled<SharedStylePropsArgT>('div', props => {
+export const StyledRoot = styled<SharedStylePropsArgT>('div', (props) => {
   return {
     position: 'fixed',
     overflow: 'auto',
@@ -99,8 +91,8 @@ export const StyledRoot = styled<SharedStylePropsArgT>('div', props => {
   };
 });
 
-export const StyledBackdrop = styled<SharedStylePropsArgT>('div', props => {
-  const {$animating, $isOpen, $isVisible, $showBackdrop, $theme} = props;
+export const StyledBackdrop = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $animating, $isOpen, $isVisible, $showBackdrop, $theme } = props;
   return {
     position: 'fixed',
     right: 0,
@@ -123,33 +115,28 @@ export const StyledBackdrop = styled<SharedStylePropsArgT>('div', props => {
   };
 });
 
-export const StyledDrawerContainer = styled<SharedStylePropsArgT>(
-  'div',
-  props => {
-    const {$animating, $isOpen, $isVisible, $theme} = props;
-    return {
-      backgroundColor: $theme.colors.backgroundPrimary,
-      borderTopLeftRadius: $theme.borders.surfaceBorderRadius,
-      borderTopRightRadius: $theme.borders.surfaceBorderRadius,
-      borderBottomRightRadius: $theme.borders.surfaceBorderRadius,
-      borderBottomLeftRadius: $theme.borders.surfaceBorderRadius,
-      ...getAnchorStyles(props),
+export const StyledDrawerContainer = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $animating, $isOpen, $isVisible, $theme } = props;
+  return {
+    backgroundColor: $theme.colors.backgroundPrimary,
+    borderTopLeftRadius: $theme.borders.surfaceBorderRadius,
+    borderTopRightRadius: $theme.borders.surfaceBorderRadius,
+    borderBottomRightRadius: $theme.borders.surfaceBorderRadius,
+    borderBottomLeftRadius: $theme.borders.surfaceBorderRadius,
+    ...getAnchorStyles(props),
 
-      // Animation
-      opacity: $isVisible && $isOpen ? 1 : 0,
-      transitionProperty: $animating ? 'opacity, transform' : null,
-      transitionDuration: $animating ? $theme.animation.timing400 : null,
-      transitionTimingFunction: $animating
-        ? $theme.animation.easeOutCurve
-        : null,
-      display: 'flex',
-      position: 'fixed',
-    };
-  },
-);
+    // Animation
+    opacity: $isVisible && $isOpen ? 1 : 0,
+    transitionProperty: $animating ? 'opacity, transform' : null,
+    transitionDuration: $animating ? $theme.animation.timing400 : null,
+    transitionTimingFunction: $animating ? $theme.animation.easeOutCurve : null,
+    display: 'flex',
+    position: 'fixed',
+  };
+});
 
-export const StyledDrawerBody = styled<SharedStylePropsArgT>('div', props => {
-  const {$theme} = props;
+export const StyledDrawerBody = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $theme } = props;
   return {
     ...$theme.typography.font200,
     color: $theme.colors.contentPrimary,
@@ -162,8 +149,8 @@ export const StyledDrawerBody = styled<SharedStylePropsArgT>('div', props => {
   };
 });
 
-export const StyledClose = styled<SharedStylePropsArgT>('button', props => {
-  const {$theme, $isFocusVisible} = props;
+export const StyledClose = styled<SharedStylePropsArgT>('button', (props) => {
+  const { $theme, $isFocusVisible } = props;
   const dir: string = $theme.direction === 'rtl' ? 'left' : 'right';
   return {
     // Reset button styles

package/drawer/types.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import {SIZE, CLOSE_SOURCE, ANCHOR} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { SIZE, CLOSE_SOURCE, ANCHOR } from './constants.js';
 
 export type SizeT = $Keys<typeof SIZE>;
 export type SizePropT = SizeT | string;
@@ -26,8 +26,8 @@ export type OverridesT = {
   Close?: OverrideT,
 };
 
-// eslint-disable-next-line flowtype/no-weak-types
-export type ElementRefT = {current: React.ElementRef<any> | null};
+// flowlint-next-line unclear-type:off
+export type ElementRefT = { current: React.ElementRef<any> | null };
 
 // Props shared by all flavors of modal
 export type DrawerPropsT = {
@@ -66,10 +66,7 @@ export type DrawerPropsT = {
   onEscapeKeyDown?: (e: Event) => mixed,
 };
 
-export type DrawerPropsWithoutChildrenT = $Diff<
-  DrawerPropsT,
-  {children: ?React.Node},
->;
+export type DrawerPropsWithoutChildrenT = $Diff<DrawerPropsT, { children: ?React.Node }>;
 
 export type DrawerStateT = {
   isVisible: boolean,

package/es/a11y/a11y.js

@@ -122,7 +122,7 @@ export default function A11y(props) {
     ref: child
   }, props.children), /*#__PURE__*/React.createElement("div", null, violationsByNode.map(([node, violations], index) =>
   /*#__PURE__*/
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   React.createElement(Violation, {
     target: node,
     violations: violations,

package/es/accordion/accordion.js

@@ -24,6 +24,7 @@ export default class Accordion extends React.Component {
     });
   }
 
+  //flowlint-next-line unclear-type:off
   onPanelChange(key, onChange, ...args) {
     let activeKeys = this.state.expanded;
     const {
@@ -74,7 +75,7 @@ export default class Accordion extends React.Component {
       renderPanelContent,
       renderAll,
       overrides
-    } = this.props; // eslint-disable-next-line flowtype/no-weak-types
+    } = this.props; // flowlint-next-line unclear-type:off
 
     return React.Children.map(children, (child, index) => {
       if (!child) return; // If there is no key provided use the panel order as a default key

package/es/accordion/panel.js

@@ -74,7 +74,7 @@ const Panel = ({
     }
 
     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
 
   const _animateRef = React.useRef(null);
 

package/es/app-nav-bar/mobile-menu.js

@@ -19,7 +19,8 @@ import UserProfileTile from './user-profile-tile.js';
 import { defaultMapItemToNode } from './utils.js';
 const USER_TITLE_ITEM = 'USER_TITLE_ITEM';
 const USER_MENU_ITEM = 'USER_MENU_ITEM';
-const PARENT_MENU_ITEM = 'PARENT_MENU_ITEM';
+const PARENT_MENU_ITEM = 'PARENT_MENU_ITEM'; // eslint-disable-next-line react/display-name
+
 const MobileNavMenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     item,
@@ -81,16 +82,13 @@ export default function MobileMenu(props) {
     setIsOpen(!isOpen);
   };
 
-  const [SideMenuButton, sideMenuButtonProps] = getOverrides(overrides.SideMenuButton, Button); // $FlowFixMe
-
+  const [SideMenuButton, sideMenuButtonProps] = getOverrides(overrides.SideMenuButton, Button);
   sideMenuButtonProps.overrides = mergeOverrides({
     BaseButton: {
       component: StyledSideMenuButton
     }
-  }, // $FlowFixMe
-  sideMenuButtonProps.overrides);
-  const [MobileDrawer, drawerProps] = getOverrides(overrides.MobileDrawer, Drawer); // $FlowFixMe
-
+  }, sideMenuButtonProps.overrides);
+  const [MobileDrawer, drawerProps] = getOverrides(overrides.MobileDrawer, Drawer);
   drawerProps.overrides = mergeOverrides({
     DrawerBody: {
       style: ({
@@ -106,10 +104,8 @@ export default function MobileMenu(props) {
     },
     // Removes the close icon from the drawer
     Close: () => null
-  }, // $FlowFixMe
-  drawerProps.overrides);
-  const [MobileMenu, menuProps] = getOverrides(overrides.MobileMenu, StatefulMenu); // $FlowFixMe
-
+  }, drawerProps.overrides);
+  const [MobileMenu, menuProps] = getOverrides(overrides.MobileMenu, StatefulMenu);
   menuProps.overrides = mergeOverrides({
     List: {
       style: {
@@ -119,6 +115,7 @@ export default function MobileMenu(props) {
         boxShadow: 'none'
       }
     },
+    // eslint-disable-next-line react/display-name
     ListItem: /*#__PURE__*/React.forwardRef((listItemProps, ref) => {
       return /*#__PURE__*/React.createElement(MobileNavMenuItem, _extends({
         ref: ref
@@ -127,8 +124,7 @@ export default function MobileMenu(props) {
         overrides: overrides
       }));
     })
-  }, // $FlowFixMe
-  menuProps.overrides);
+  }, menuProps.overrides);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SideMenuButton, _extends({
     onClick: toggleMenu
   }, sideMenuButtonProps), /*#__PURE__*/React.createElement(MenuIcon, {

package/es/app-nav-bar/user-menu.js

@@ -18,7 +18,8 @@ import { StatefulPopover, PLACEMENT, TRIGGER_TYPE } from '../popover/index.js';
 import { StyledUserMenuButton, StyledUserMenuProfileListItem } from './styled-components.js';
 import UserProfileTile from './user-profile-tile.js';
 import { defaultMapItemToNode } from './utils.js';
-const MENU_ITEM_WIDTH = '275px';
+const MENU_ITEM_WIDTH = '275px'; // eslint-disable-next-line react/display-name
+
 const UserMenuListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     item,
@@ -48,18 +49,16 @@ export default function UserMenuComponent(props) {
     overrides = {}
   } = props;
   const [UserMenuProfileListItem, userMenuProfileListItemProps] = getOverrides(overrides.UserMenuProfileListItem, StyledUserMenuProfileListItem);
-  const [UserMenuButton, userMenuButtonProps] = getOverrides(overrides.UserMenuButton, Button); // $FlowFixMe
-
+  const [UserMenuButton, userMenuButtonProps] = getOverrides(overrides.UserMenuButton, Button);
   userMenuButtonProps.overrides = mergeOverrides({
     BaseButton: {
       component: StyledUserMenuButton
     }
-  }, // $FlowFixMe
-  userMenuButtonProps.overrides);
-  const [UserMenu, userMenuProps] = getOverrides(overrides.UserMenu, StatefulMenu); // $FlowFixMe
-
+  }, userMenuButtonProps.overrides);
+  const [UserMenu, userMenuProps] = getOverrides(overrides.UserMenu, StatefulMenu);
   userMenuProps.overrides = mergeOverrides({
     List: {
+      // eslint-disable-next-line react/display-name
       component: /*#__PURE__*/React.forwardRef(({
         children,
         ...restProps
@@ -75,6 +74,7 @@ export default function UserMenuComponent(props) {
         width: MENU_ITEM_WIDTH
       }
     },
+    // eslint-disable-next-line react/display-name
     ListItem: /*#__PURE__*/React.forwardRef((listItemProps, ref) => {
       return /*#__PURE__*/React.createElement(UserMenuListItem, _extends({
         ref: ref
@@ -82,8 +82,7 @@ export default function UserMenuComponent(props) {
         mapItemToNode: props.mapItemToNode
       }));
     })
-  }, // $FlowFixMe
-  userMenuProps.overrides);
+  }, userMenuProps.overrides);
   return /*#__PURE__*/React.createElement(StatefulPopover, {
     content: ({
       close

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

@@ -42,9 +42,9 @@ const AspectRatioBox = ({
     }
   };
   const blockOverrides = mergeOverrides(aspectRatioBoxOverrides, overrides);
-  return /*#__PURE__*/React.createElement(Block // coerced to any because because of how react components are typed.
+  return /*#__PURE__*/React.createElement(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/es/block/block.js

@@ -85,7 +85,7 @@ function Block({
   const [BaseBlock, baseBlockProps] = getOverrides(overrides.Block, StyledBlock);
   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/es/breadcrumbs/breadcrumbs.js

@@ -11,7 +11,7 @@ import { LocaleContext } from '../locale/index.js';
 import { ThemeContext } from '../styles/theme-provider.js';
 import ChevronRight from '../icon/chevron-right.js';
 import ChevronLeft from '../icon/chevron-left.js';
-import { StyledRoot, StyledSeparator, StyledList, StyledListItem } from './styled-components.js';
+import { StyledList, StyledListItem, StyledRoot, StyledSeparator } from './styled-components.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 export function Breadcrumbs(props) {
   const {
@@ -26,16 +26,13 @@ export function Breadcrumbs(props) {
   const [List, baseListProps] = getOverrides(overrides.List, StyledList);
   const [ListItem, baseListItemProps] = getOverrides(overrides.ListItem, StyledListItem);
   const [Separator, baseSeparatorProps] = getOverrides(overrides.Separator, StyledSeparator);
-  const iconOverrides = mergeOverrides({
+  baseIconProps.overrides = mergeOverrides({
     Svg: {
       style: {
         verticalAlign: 'text-bottom'
       }
     }
-  }, // $FlowFixMe
-  baseIconProps && baseIconProps.overrides); // $FlowFixMe
-
-  baseIconProps.overrides = iconOverrides;
+  }, baseIconProps && baseIconProps.overrides);
   childrenArray.forEach((child, index) => {
     childrenWithSeparators.push( /*#__PURE__*/React.createElement(ListItem, _extends({
       key: `breadcrumb-item-${index}`,
@@ -45,7 +42,7 @@ export function Breadcrumbs(props) {
     }), /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, baseIconProps) : /*#__PURE__*/React.createElement(Right, baseIconProps)))));
   });
   return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
-    "aria-label": props.ariaLabel || locale.breadcrumbs.ariaLabel,
+    "aria-label": props['aria-label'] || props.ariaLabel || locale.breadcrumbs.ariaLabel,
     "data-baseweb": "breadcrumbs"
   }, baseRootProps), /*#__PURE__*/React.createElement(List, baseListProps, childrenWithSeparators)));
 }

package/es/button/button.js

@@ -110,7 +110,8 @@ class Button extends React.Component {
 
 _defineProperty(Button, "defaultProps", defaultProps);
 
-const ForwardedButton = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Button, _extends({
+const ForwardedButton = /*#__PURE__*/React.forwardRef( //$FlowFixMe
+(props, ref) => /*#__PURE__*/React.createElement(Button, _extends({
   forwardedRef: ref
 }, props)));
 ForwardedButton.displayName = 'Button';

package/es/button/styled-components.js

@@ -9,12 +9,14 @@ import { KIND, SIZE, SHAPE } from './constants.js';
 export const BaseButton = styled('button', ({
   $theme,
   $size,
+  $colors,
   $kind,
   $shape,
   $isLoading,
   $isSelected,
   $disabled,
-  $isFocusVisible
+  $isFocusVisible //$FlowFixMe
+
 }) => ({
   display: 'inline-flex',
   // need to maintain button width while showing loading spinner
@@ -64,16 +66,15 @@ export const BaseButton = styled('button', ({
     $size,
     $shape
   }),
-  // Kind style override
-  ...getKindStyles({
+  ...getColorStyles({
     $theme,
+    $colors,
     $kind,
     $isLoading,
     $isSelected,
     $disabled
   }),
   ...getShapeStyles({
-    $theme,
     $shape,
     $size
   })
@@ -344,13 +345,27 @@ function getPaddingStyles({
   }
 }
 
-function getKindStyles({
+function getColorStyles({
   $theme,
+  $colors,
   $isLoading,
   $isSelected,
   $kind,
   $disabled
 }) {
+  if ($colors) {
+    return {
+      color: $colors.color,
+      backgroundColor: $colors.backgroundColor,
+      ':hover': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+      },
+      ':active': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+      }
+    };
+  }
+
   if ($disabled) {
     return Object.freeze({});
   }
@@ -438,7 +453,6 @@ function getKindStyles({
 }
 
 function getShapeStyles({
-  $theme,
   $shape,
   $size
 }) {

package/es/button/utils.js

@@ -5,6 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 export function getSharedProps({
+  colors,
   disabled,
   isLoading,
   isSelected,
@@ -13,6 +14,7 @@ export function getSharedProps({
   size
 }) {
   return {
+    $colors: colors,
     $disabled: disabled,
     $isLoading: isLoading,
     $isSelected: isSelected,

package/es/button-group/button-group.js

@@ -39,7 +39,6 @@ export default class ButtonGroup extends React.Component {
       overrides = {},
       mode = MODE.checkbox,
       children,
-      ariaLabel,
       selected,
       disabled,
       onClick,
@@ -48,6 +47,7 @@ export default class ButtonGroup extends React.Component {
       size
     } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+    const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
     const isRadio = mode === MODE.radio;
     const numItems = React.Children.count(children);
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({

package/es/button-group/stateful-button-group.js

@@ -18,5 +18,8 @@ export default function StatefulButtonGroup(props) {
   return /*#__PURE__*/React.createElement(StatefulContainer, _extends({
     initialState: initialState
   }, restProps), ({ ...containerProps
-  }) => /*#__PURE__*/React.createElement(ButtonGroup, containerProps, props.children));
+  }) =>
+  /*#__PURE__*/
+  //$FlowFixMe
+  React.createElement(ButtonGroup, containerProps, props.children));
 }

package/es/checkbox/checkbox.js

@@ -128,8 +128,7 @@ class StatelessCheckbox extends React.Component {
       checked,
       children,
       required,
-      title,
-      ariaLabel
+      title
     } = this.props;
     const {
       Root: RootOverride,
@@ -191,7 +190,7 @@ class StatelessCheckbox extends React.Component {
       name: name,
       checked: checked,
       required: required,
-      "aria-label": ariaLabel,
+      "aria-label": this.props['aria-label'] || this.props.ariaLabel,
       "aria-checked": isIndeterminate ? 'mixed' : checked,
       "aria-describedby": this.props['aria-describedby'],
       "aria-errormessage": this.props['aria-errormessage'],

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

@@ -79,11 +79,8 @@ 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
       ...restProps
     } = this.props;
     const {

package/es/combobox/combobox.js

@@ -163,7 +163,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;
     }
@@ -223,17 +223,15 @@ function Combobox(props) {
   const [InputContainer, inputContainerProps] = getOverrides(overrides.InputContainer, StyledInputContainer);
   const [ListBox, listBoxProps] = getOverrides(overrides.ListBox, StyledListBox);
   const [ListItem, listItemProps] = getOverrides(overrides.ListItem, StyledListItem);
-  const [OverriddenInput, // $FlowFixMe
-  {
+  const [OverriddenInput, {
     overrides: inputOverrides = {},
     ...restInputProps
   }] = getOverrides(overrides.Input, Input);
-  const [OverriddenPopover, // $FlowFixMe
-  {
+  const [OverriddenPopover, {
     overrides: popoverOverrides = {},
     ...restPopoverProps
   }] = getOverrides(overrides.Popover, Popover);
-  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
@@ -248,7 +246,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",
@@ -266,7 +264,7 @@ function Combobox(props) {
           "aria-selected": isSelected,
           id: isSelected ? activeDescendantId : null,
           key: index,
-          onClick: () => handleOptionClick(index) // eslint-disable-next-line flowtype/no-weak-types
+          onClick: () => handleOptionClick(index) // flowlint-next-line unclear-type:off
           ,
           ref: isSelected ? selectedOptionRef : null,
           role: "option",

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

@@ -8,6 +8,7 @@ import Column from './column.js';
 import { COLUMNS } from './constants.js';
 
 function CustomColumn(options) {
+  //$FlowFixMe
   return Column({
     kind: COLUMNS.CUSTOM,
     ...options

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

@@ -175,7 +175,7 @@ function DatetimeFilter(props) {
   const [exclude, setExclude] = React.useState(initialState.exclude);
   const [comparatorIndex, setComparatorIndex] = React.useState(initialState.comparatorIndex);
   const [rangeOperator, setRangeOperator] = React.useState([initialState.rangeOperator]);
-  const [categoricalOperator, setCategoricalOperator] = React.useState([initialState.categoricalOperator]); // eslint-disable-next-line flowtype/no-weak-types
+  const [categoricalOperator, setCategoricalOperator] = React.useState([initialState.categoricalOperator]); // flowlint-next-line unclear-type:off
 
   const [rangeDates, setRangeDates] = React.useState(initialState.rangeDates.length ? initialState.rangeDates : [new Date(datesSorted[0]), new Date(datesSorted[datesSorted.length - 1])]);
   const [years, setYears] = React.useState(initialState.years);
@@ -190,7 +190,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 = rangeOperator[0].id;
         let description = '';
 
@@ -218,7 +218,7 @@ function DatetimeFilter(props) {
       }
 
       if (isCategorical) {
-        // eslint-disable-next-line flowtype/no-weak-types
+        // flowlint-next-line unclear-type:off
         const op = categoricalOperator[0].id;
         let selection = [];
         let operatorLocaleLabelKey = '';
@@ -300,7 +300,7 @@ function DatetimeFilter(props) {
     }
   }, locale.datatable.datetimeFilterCategorical)), isRange && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
     value: rangeOperator,
-    onChange: params => setRangeOperator(params.value) // eslint-disable-next-line flowtype/no-weak-types
+    onChange: params => setRangeOperator(params.value) // flowlint-next-line unclear-type:off
     ,
     mountNode: mountNode.current,
     options: RANGE_OPERATIONS.map(op => ({
@@ -313,7 +313,7 @@ function DatetimeFilter(props) {
     className: css({
       paddingTop: theme.sizing.scale600
     })
-  }, (rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME || rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATE) && /*#__PURE__*/React.createElement(Datepicker // eslint-disable-next-line flowtype/no-weak-types
+  }, (rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATETIME || rangeOperator[0].id === DATETIME_OPERATIONS.RANGE_DATE) && /*#__PURE__*/React.createElement(Datepicker // flowlint-next-line unclear-type:off
   , {
     mountNode: mountNode.current,
     value: rangeDates,
@@ -375,7 +375,7 @@ function DatetimeFilter(props) {
     options: CATEGORICAL_OPERATIONS.map(op => ({
       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",