baseui 10.9.2 → 10.11.1

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

@@ -7,11 +7,11 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {POSITION} from './constants.js';
+import { POSITION } from './constants.js';
 
-import type {OverrideT} from '../helpers/overrides.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
-export type OverridesT = {|
+export type OverridesT = {
   Root?: OverrideT,
   AppName?: OverrideT,
   MainMenuItem?: OverrideT,
@@ -31,17 +31,17 @@ export type OverridesT = {|
   SideMenuButton?: OverrideT,
   UserMenuButton?: OverrideT,
   UserMenu?: OverrideT,
-|};
+};
 
 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>,
@@ -54,15 +54,15 @@ export type UserMenuPropsT = {|
   username?: string,
   usernameSubtitle?: React.Node,
   userImgUrl?: string,
-  onUserItemSelect?: NavItemT => mixed,
+  onUserItemSelect?: (NavItemT) => mixed,
 |};
 
 export type AppNavBarPropsT = {|
   ...UserMenuPropsT,
-  isMainItemActive?: NavItemT => boolean,
+  isMainItemActive?: (NavItemT) => boolean,
   mainItems?: NavItemT[],
-  mapItemToNode?: NavItemT => React.Node,
-  onMainItemSelect?: NavItemT => mixed,
+  mapItemToNode?: (NavItemT) => React.Node,
+  onMainItemSelect?: (NavItemT) => mixed,
   overrides?: OverridesT,
   title?: React.Node,
 |};

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

@@ -55,7 +55,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var MENU_ITEM_WIDTH = '275px';
+var MENU_ITEM_WIDTH = '275px'; // eslint-disable-next-line react/display-name
+
 var UserMenuListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var item = props.item,
       _props$mapItemToNode = props.mapItemToNode,
@@ -97,24 +98,22 @@ function UserMenuComponent(props) {
   var _getOverrides3 = (0, _overrides.getOverrides)(overrides.UserMenuButton, _index2.Button),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
       UserMenuButton = _getOverrides4[0],
-      userMenuButtonProps = _getOverrides4[1]; // $FlowFixMe
-
+      userMenuButtonProps = _getOverrides4[1];
 
   userMenuButtonProps.overrides = (0, _overrides.mergeOverrides)({
     BaseButton: {
       component: _styledComponents.StyledUserMenuButton
     }
-  }, // $FlowFixMe
-  userMenuButtonProps.overrides);
+  }, userMenuButtonProps.overrides);
 
   var _getOverrides5 = (0, _overrides.getOverrides)(overrides.UserMenu, _index4.StatefulMenu),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
       UserMenu = _getOverrides6[0],
-      userMenuProps = _getOverrides6[1]; // $FlowFixMe
-
+      userMenuProps = _getOverrides6[1];
 
   userMenuProps.overrides = (0, _overrides.mergeOverrides)({
     List: {
+      // eslint-disable-next-line react/display-name
       component: /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         var children = _ref2.children,
             restProps = _objectWithoutProperties(_ref2, ["children"]);
@@ -132,6 +131,7 @@ function UserMenuComponent(props) {
         width: MENU_ITEM_WIDTH
       }
     },
+    // eslint-disable-next-line react/display-name
     ListItem: /*#__PURE__*/React.forwardRef(function (listItemProps, ref) {
       return /*#__PURE__*/React.createElement(UserMenuListItem, _extends({
         ref: ref
@@ -139,8 +139,7 @@ function UserMenuComponent(props) {
         mapItemToNode: props.mapItemToNode
       }));
     })
-  }, // $FlowFixMe
-  userMenuProps.overrides);
+  }, userMenuProps.overrides);
   return /*#__PURE__*/React.createElement(_index5.StatefulPopover, {
     content: function content(_ref3) {
       var close = _ref3.close;

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

@@ -8,77 +8,62 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Avatar} from '../avatar/index.js';
-import {Button} from '../button/index.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { Avatar } from '../avatar/index.js';
+import { Button } from '../button/index.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import ChevronDownSmallFilled from '../icon/chevron-down.js';
 import ChevronUpSmallFilled from '../icon/chevron-up.js';
-import {MenuAdapter, ListItemLabel, ARTWORK_SIZES} from '../list/index.js';
-import {StatefulMenu, StyledList} from '../menu/index.js';
-import {StatefulPopover, PLACEMENT, TRIGGER_TYPE} from '../popover/index.js';
+import { MenuAdapter, ListItemLabel, ARTWORK_SIZES } from '../list/index.js';
+import { StatefulMenu, StyledList } from '../menu/index.js';
+import { StatefulPopover, PLACEMENT, TRIGGER_TYPE } from '../popover/index.js';
 
-import {
-  StyledUserMenuButton,
-  StyledUserMenuProfileListItem,
-} from './styled-components.js';
-import type {UserMenuPropsT, NavItemT, OverridesT} from './types.js';
+import { StyledUserMenuButton, StyledUserMenuProfileListItem } from './styled-components.js';
+import type { UserMenuPropsT, NavItemT, OverridesT } from './types.js';
 import UserProfileTile from './user-profile-tile.js';
-import {defaultMapItemToNode} from './utils.js';
+import { defaultMapItemToNode } from './utils.js';
 
 const MENU_ITEM_WIDTH = '275px';
 
+// eslint-disable-next-line react/display-name
 const UserMenuListItem = React.forwardRef((props, ref) => {
-  const {item, mapItemToNode = defaultMapItemToNode} = props;
+  const { item, mapItemToNode = defaultMapItemToNode } = props;
   // Replace with a user menu item renderer
   return (
-    <MenuAdapter
-      {...props}
-      ref={ref}
-      artwork={item.icon || null}
-      artworkSize={ARTWORK_SIZES.LARGE}
-    >
+    <MenuAdapter {...props} ref={ref} artwork={item.icon || null} artworkSize={ARTWORK_SIZES.LARGE}>
       <ListItemLabel>{mapItemToNode(item)}</ListItemLabel>
     </MenuAdapter>
   );
 });
 
-const svgStyleOverride = ({$theme}) => ({paddingLeft: $theme.sizing.scale200});
+const svgStyleOverride = ({ $theme }) => ({ paddingLeft: $theme.sizing.scale200 });
 
 export default function UserMenuComponent(props: {|
   ...UserMenuPropsT,
-  mapItemToNode: NavItemT => React.Node,
-  onItemSelect: NavItemT => mixed,
+  mapItemToNode: (NavItemT) => React.Node,
+  onItemSelect: (NavItemT) => mixed,
   overrides: OverridesT,
 |}) {
   // isOpen is used for displaying different arrow icons in open or closed state
   const [isOpen, setIsOpen] = React.useState(false);
-  const {userItems = [], username, userImgUrl, overrides = {}} = props;
+  const { userItems = [], username, userImgUrl, overrides = {} } = props;
 
   const [UserMenuProfileListItem, userMenuProfileListItemProps] = getOverrides(
     overrides.UserMenuProfileListItem,
-    StyledUserMenuProfileListItem,
+    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,
+    { BaseButton: { component: StyledUserMenuButton } },
+    userMenuButtonProps.overrides
   );
 
-  const [UserMenu, userMenuProps] = getOverrides(
-    overrides.UserMenu,
-    StatefulMenu,
-  );
-  // $FlowFixMe
+  const [UserMenu, userMenuProps] = getOverrides(overrides.UserMenu, StatefulMenu);
   userMenuProps.overrides = mergeOverrides(
     {
       List: {
-        component: React.forwardRef(({children, ...restProps}, ref) => (
+        // eslint-disable-next-line react/display-name
+        component: React.forwardRef(({ children, ...restProps }, ref) => (
           <StyledList {...restProps} ref={ref}>
             <UserMenuProfileListItem {...userMenuProfileListItemProps}>
               {/* Replace with a renderer: renderUserProfileTile() */}
@@ -92,28 +77,24 @@ export default function UserMenuComponent(props: {|
             {children}
           </StyledList>
         )),
-        style: {width: MENU_ITEM_WIDTH},
+        style: { width: MENU_ITEM_WIDTH },
       },
+      // eslint-disable-next-line react/display-name
       ListItem: React.forwardRef((listItemProps, ref) => {
         return (
-          <UserMenuListItem
-            ref={ref}
-            {...listItemProps}
-            mapItemToNode={props.mapItemToNode}
-          />
+          <UserMenuListItem ref={ref} {...listItemProps} mapItemToNode={props.mapItemToNode} />
         );
       }),
     },
-    // $FlowFixMe
-    userMenuProps.overrides,
+    userMenuProps.overrides
   );
 
   return (
     <StatefulPopover
-      content={({close}) => (
+      content={({ close }) => (
         <UserMenu
           items={userItems}
-          onItemSelect={({item}) => {
+          onItemSelect={({ item }) => {
             props.onItemSelect(item);
             close();
           }}
@@ -126,21 +107,15 @@ export default function UserMenuComponent(props: {|
       onOpen={() => setIsOpen(true)}
       onClose={() => setIsOpen(false)}
       placement={PLACEMENT.bottomRight}
-      popperOptions={{modifiers: {flip: {enabled: false}}}}
+      popperOptions={{ modifiers: { flip: { enabled: false } } }}
       triggerType={TRIGGER_TYPE.click}
     >
       <UserMenuButton {...userMenuButtonProps}>
         <Avatar name={username || ''} src={userImgUrl} size={'32px'} />
         {isOpen ? (
-          <ChevronUpSmallFilled
-            size={28}
-            overrides={{Svg: {style: svgStyleOverride}}}
-          />
+          <ChevronUpSmallFilled size={28} overrides={{ Svg: { style: svgStyleOverride } }} />
         ) : (
-          <ChevronDownSmallFilled
-            size={28}
-            overrides={{Svg: {style: svgStyleOverride}}}
-          />
+          <ChevronDownSmallFilled size={28} overrides={{ Svg: { style: svgStyleOverride } }} />
         )}
       </UserMenuButton>
     </StatefulPopover>

package/app-nav-bar/user-profile-tile.js.flow

@@ -7,45 +7,33 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {Avatar} from '../avatar/index.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {LabelMedium, ParagraphSmall} from '../typography/index.js';
+import { Avatar } from '../avatar/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { LabelMedium, ParagraphSmall } from '../typography/index.js';
 
 import {
   StyledUserProfileTileContainer,
   StyledUserProfilePictureContainer,
   StyledUserProfileInfoContainer,
 } from './styled-components.js';
-import type {OverridesT, UserMenuPropsT} from './types.js';
+import type { OverridesT, UserMenuPropsT } from './types.js';
 
-export default function UserProfileTile(props: {|
-  ...UserMenuPropsT,
-  overrides: OverridesT,
-|}) {
-  const {overrides = {}, username, usernameSubtitle, userImgUrl} = props;
+export default function UserProfileTile(props: {| ...UserMenuPropsT, overrides: OverridesT |}) {
+  const { overrides = {}, username, usernameSubtitle, userImgUrl } = props;
 
-  const [
-    UserProfileTileContainer,
-    userProfileTileContainerProps,
-  ] = getOverrides(
+  const [UserProfileTileContainer, userProfileTileContainerProps] = getOverrides(
     overrides.UserProfileTileContainer,
-    StyledUserProfileTileContainer,
+    StyledUserProfileTileContainer
   );
 
-  const [
-    UserProfilePictureContainer,
-    userProfilePictureContainerProps,
-  ] = getOverrides(
+  const [UserProfilePictureContainer, userProfilePictureContainerProps] = getOverrides(
     overrides.UserProfilePictureContainer,
-    StyledUserProfilePictureContainer,
+    StyledUserProfilePictureContainer
   );
 
-  const [
-    UserProfileInfoContainer,
-    userProfileInfoContainerProps,
-  ] = getOverrides(
+  const [UserProfileInfoContainer, userProfileInfoContainerProps] = getOverrides(
     overrides.UserProfileInfoContainer,
-    StyledUserProfileInfoContainer,
+    StyledUserProfileInfoContainer
   );
 
   return (

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

@@ -7,15 +7,15 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import type {NavItemT} from './types.js';
+import type { NavItemT } from './types.js';
 
-type GetUniqueIdentifierT = NavItemT => string | number;
+type GetUniqueIdentifierT = (NavItemT) => string | number;
 
 export function defaultMapItemToNode(item: NavItemT) {
   if (__DEV__) {
     if (!item.label) {
       throw Error(
-        'There needs to be an unique item.label. You can implement a custom mapping with the mapItemToNode prop.',
+        'There needs to be an unique item.label. You can implement a custom mapping with the mapItemToNode prop.'
       );
     }
   }
@@ -26,18 +26,15 @@ function defaultGetUniqueIdentifier(item: NavItemT) {
   if (__DEV__) {
     if (!item.label) {
       throw Error(
-        'There needs to be an unique item.label. You can implement a custom mapping with the getUniqueIdentifier argument to setItemActive.',
+        'There needs to be an unique item.label. You can implement a custom mapping with the getUniqueIdentifier argument to setItemActive.'
       );
     }
   }
   return item.label;
 }
 
-export function mapItemsActive(
-  items: NavItemT[],
-  predicate: NavItemT => boolean,
-) {
-  return items.map<NavItemT>(current => {
+export function mapItemsActive(items: NavItemT[], predicate: (NavItemT) => boolean) {
+  return items.map<NavItemT>((current) => {
     if (predicate(current)) {
       current.active = true;
     } else {
@@ -46,7 +43,7 @@ export function mapItemsActive(
 
     if (current.children) {
       current.children = mapItemsActive(current.children, predicate);
-      if (current.children.some(child => child.active)) {
+      if (current.children.some((child) => child.active)) {
         current.active = true;
       }
     }
@@ -58,11 +55,11 @@ export function mapItemsActive(
 export function setItemActive(
   items: NavItemT[],
   item: NavItemT,
-  getUniqueIdentifier?: GetUniqueIdentifierT = defaultGetUniqueIdentifier,
+  getUniqueIdentifier?: GetUniqueIdentifierT = defaultGetUniqueIdentifier
 ) {
   return mapItemsActive(
     items,
-    current => getUniqueIdentifier(current) === getUniqueIdentifier(item),
+    (current) => getUniqueIdentifier(current) === getUniqueIdentifier(item)
   );
 }
 

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

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 
 import Block from '../block/block.js';
-import type {BlockPropsT} from '../block/types.js';
+import type { BlockPropsT } from '../block/types.js';
 
 export const AspectRatioBoxBody = ({
   position,
@@ -17,7 +17,7 @@ export const AspectRatioBoxBody = ({
   bottom,
   width,
   ...restProps
-}: BlockPropsT): React.Node => (
+}: $Exact<BlockPropsT>): React.Node => (
   <Block
     data-baseweb="aspect-ratio-box-body"
     position={position || 'absolute'}

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

@@ -58,9 +58,9 @@ var AspectRatioBox = function AspectRatioBox(_ref2) {
     }
   };
   var blockOverrides = (0, _overrides.mergeOverrides)(aspectRatioBoxOverrides, overrides);
-  return /*#__PURE__*/React.createElement(_index.Block // coerced to any because because of how react components are typed.
+  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

@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Block} from '../block/index.js';
-import {mergeOverrides} from '../helpers/overrides.js';
-import type {AspectRatioBoxPropsT} from './types.js';
+import { Block } from '../block/index.js';
+import { mergeOverrides } from '../helpers/overrides.js';
+import type { AspectRatioBoxPropsT } from './types.js';
 
-const aspectRatioBoxStyle = ({$aspectRatio}) => ({
+const aspectRatioBoxStyle = ({ $aspectRatio }) => ({
   position: 'relative',
   '::before': {
     content: '""',
@@ -35,7 +35,8 @@ const AspectRatioBox = ({
   aspectRatio = 1,
   overrides = {},
   ...restProps
-}): React.Node => {
+}: // flowlint-next-line unclear-type:off
+AspectRatioBoxPropsT & { forwardedRef: any }): React.Node => {
   const aspectRatioBoxOverrides = {
     Block: {
       style: aspectRatioBoxStyle,
@@ -44,9 +45,9 @@ const AspectRatioBox = ({
   const blockOverrides = mergeOverrides(aspectRatioBoxOverrides, overrides);
   return (
     <Block
-      // coerced to any because because of how react components are typed.
+      // 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}
@@ -56,12 +57,9 @@ const AspectRatioBox = ({
   );
 };
 
-const AspectRatioBoxComponent = React.forwardRef<
-  AspectRatioBoxPropsT,
-  HTMLElement,
->((props: AspectRatioBoxPropsT, ref) => (
-  <AspectRatioBox {...props} forwardedRef={ref} />
-));
+const AspectRatioBoxComponent = React.forwardRef<AspectRatioBoxPropsT, HTMLElement>(
+  (props: AspectRatioBoxPropsT, ref) => <AspectRatioBox {...props} forwardedRef={ref} />
+);
 AspectRatioBoxComponent.displayName = 'AspectRatioBox';
 export default AspectRatioBoxComponent;
 

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

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as AspectRatioBox} from './aspect-ratio-box.js';
-export {default as AspectRatioBoxBody} from './aspect-ratio-box-body.js';
+export { default as AspectRatioBox } from './aspect-ratio-box.js';
+export { default as AspectRatioBoxBody } from './aspect-ratio-box-body.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

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

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {BlockPropsT} from '../block/types.js';
+import type { BlockPropsT } from '../block/types.js';
 
 export type AspectRatioBoxPropsT = {
   /** Aspect ratio is width divided by height. */

package/avatar/avatar.js.flow

@@ -8,22 +8,19 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 
 import {
   Avatar as StyledAvatar,
   Initials as StyledInitials,
   Root as StyledRoot,
 } from './styled-components.js';
-import type {PropsT} from './types.js';
+import type { PropsT } from './types.js';
 
 function getInitials(name) {
   const words = name.split(' ');
-  const initials = words.map(word => word[0]);
-  return initials
-    .slice(0, 2)
-    .join('')
-    .toUpperCase();
+  const initials = words.map((word) => word[0]);
+  return initials.slice(0, 2).join('').toUpperCase();
 }
 
 export default function Avatar({
@@ -65,10 +62,7 @@ export default function Avatar({
   }, [src]);
 
   const [Avatar, avatarProps] = getOverrides(overrides.Avatar, StyledAvatar);
-  const [Initials, initialsProps] = getOverrides(
-    overrides.Initials,
-    StyledInitials,
-  );
+  const [Initials, initialsProps] = getOverrides(overrides.Initials, StyledInitials);
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
 
   return (
@@ -80,17 +74,9 @@ export default function Avatar({
       data-baseweb="avatar"
       {...rootProps}
     >
-      <Avatar
-        ref={imageRef}
-        alt={name}
-        $imageLoaded={imageLoaded}
-        $size={size}
-        {...avatarProps}
-      />
+      <Avatar ref={imageRef} alt={name} $imageLoaded={imageLoaded} $size={size} {...avatarProps} />
 
-      {!imageLoaded && (
-        <Initials {...initialsProps}>{initials || getInitials(name)}</Initials>
-      )}
+      {!imageLoaded && <Initials {...initialsProps}>{initials || getInitials(name)}</Initials>}
     </Root>
   );
 }

package/avatar/index.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as Avatar} from './avatar.js';
+export { default as Avatar } from './avatar.js';
 
 // Styled elements
 export {

package/avatar/styled-components.js.flow

@@ -6,22 +6,18 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled} from '../styles/index.js';
-import type {
-  AvatarStylePropsT,
-  RootStylePropsT,
-  InitialsStylePropsT,
-} from './types.js';
+import { styled } from '../styles/index.js';
+import type { AvatarStylePropsT, RootStylePropsT, InitialsStylePropsT } from './types.js';
 
 function getSize(props) {
-  const {$size, $theme} = props;
+  const { $size, $theme } = props;
 
   const defaultSize = $theme.sizing.scale1000;
   const size = $size || defaultSize;
   return $theme.sizing[size] || size;
 }
 
-export const Avatar = styled<AvatarStylePropsT>('img', props => {
+export const Avatar = styled<AvatarStylePropsT>('img', (props) => {
   const themedSize = getSize(props);
 
   return {
@@ -37,7 +33,7 @@ export const Avatar = styled<AvatarStylePropsT>('img', props => {
   };
 });
 
-export const Initials = styled<InitialsStylePropsT>('div', props => ({
+export const Initials = styled<InitialsStylePropsT>('div', (props) => ({
   ...props.$theme.typography.font300,
   color: props.$theme.colors.mono100,
   alignItems: 'center',
@@ -46,8 +42,8 @@ export const Initials = styled<InitialsStylePropsT>('div', props => ({
   height: '100%',
 }));
 
-export const Root = styled<RootStylePropsT>('div', props => {
-  const {$didImageFailToLoad} = props;
+export const Root = styled<RootStylePropsT>('div', (props) => {
+  const { $didImageFailToLoad } = props;
   const themedSize = getSize(props);
 
   return ({

package/avatar/types.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {OverrideT} from '../helpers/overrides.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type InitialsStylePropsT = {};
 export type AvatarStylePropsT = {
@@ -20,11 +20,11 @@ export type RootStylePropsT = {
 };
 export type StylePropsT = RootStylePropsT;
 
-export type OverridesT = {|
+export type OverridesT = {
   Avatar?: OverrideT,
   Initials?: OverrideT,
   Root?: OverrideT,
-|};
+};
 
 export type PropsT = {|
   /** Bypasses initial generation from provided name with this value. */

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,