baseui 0.0.0-next-2aecb6f → 0.0.0-next-aad2baf

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

@@ -8,12 +8,12 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
-import {Cell, Grid} from '../layout-grid/index.js';
-import {useStyletron} from '../styles/index.js';
-import {isFocusVisible} from '../utils/focusVisible.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Cell, Grid } from '../layout-grid/index.js';
+import { useStyletron } from '../styles/index.js';
+import { isFocusVisible } from '../utils/focusVisible.js';
 
-import {KIND, POSITION} from './constants.js';
+import { KIND, POSITION } from './constants.js';
 import MobileNav from './mobile-menu.js';
 import UserMenu from './user-menu.js';
 import {
@@ -25,17 +25,11 @@ import {
   StyledAppName,
   StyledMainMenuItem,
 } from './styled-components.js';
-import type {AppNavBarPropsT} from './types.js';
-import {defaultMapItemToNode, mapItemsActive} from './utils.js';
+import type { AppNavBarPropsT } from './types.js';
+import { defaultMapItemToNode, mapItemsActive } from './utils.js';
 
 function MainMenuItem(props) {
-  const {
-    item,
-    kind = KIND.primary,
-    mapItemToNode,
-    onSelect,
-    overrides = {},
-  } = props;
+  const { item, kind = KIND.primary, mapItemToNode, onSelect, overrides = {} } = props;
   const [focusVisible, setFocusVisible] = React.useState(false);
 
   function handleFocus(event) {
@@ -64,7 +58,7 @@ function MainMenuItem(props) {
 
   const [MainMenuItemElement, mainMenuItemElementProps] = getOverrides(
     overrides.MainMenuItem,
-    StyledMainMenuItem,
+    StyledMainMenuItem
   );
 
   return (
@@ -86,15 +80,15 @@ function MainMenuItem(props) {
 }
 
 function SecondaryMenu(props) {
-  const {items = [], mapItemToNode, onSelect, overrides = {}} = props;
+  const { items = [], mapItemToNode, onSelect, overrides = {} } = props;
 
   const [SubnavContainer, subnavContainerProps] = getOverrides(
     overrides.SubnavContainer,
-    StyledSubnavContainer,
+    StyledSubnavContainer
   );
   const [SecondaryMenuContainer, secondaryMenuContainerProps] = getOverrides(
     overrides.SecondaryMenuContainer,
-    StyledSecondaryMenuContainer,
+    StyledSecondaryMenuContainer
   );
 
   return (
@@ -146,17 +140,11 @@ export default function AppNavBar(props: AppNavBarPropsT) {
   }, [props.mainItems, props.isMainItemActive]);
 
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
-  const [Spacing, spacingProps] = getOverrides(
-    overrides.Spacing,
-    StyledSpacing,
-  );
-  const [AppName, appNameProps] = getOverrides(
-    overrides.AppName,
-    StyledAppName,
-  );
+  const [Spacing, spacingProps] = getOverrides(overrides.Spacing, StyledSpacing);
+  const [AppName, appNameProps] = getOverrides(overrides.AppName, StyledAppName);
   const [PrimaryMenuContainer, primaryMenuContainerProps] = getOverrides(
     overrides.PrimaryMenuContainer,
-    StyledPrimaryMenuContainer,
+    StyledPrimaryMenuContainer
   );
 
   let secondaryMenu;
@@ -176,9 +164,7 @@ export default function AppNavBar(props: AppNavBarPropsT) {
         <Grid>
           <Cell span={[4, 8, 0]}>
             <Spacing {...spacingProps}>
-              {mainItems.length || userItems.length ? (
-                <MobileNav {...props} />
-              ) : null}
+              {mainItems.length || userItems.length ? <MobileNav {...props} /> : null}
               <AppName {...appNameProps}>{title}</AppName>
             </Spacing>
           </Cell>
@@ -220,10 +206,8 @@ export default function AppNavBar(props: AppNavBarPropsT) {
                 if (item.active && item.children && item.children.length) {
                   secondaryMenu = item.children;
                   if (item.navPosition) {
-                    desktopSubNavPosition =
-                      item.navPosition.desktop || desktopSubNavPosition;
-                    mobileSubNavPosition =
-                      item.navPosition.mobile || mobileSubNavPosition;
+                    desktopSubNavPosition = item.navPosition.desktop || desktopSubNavPosition;
+                    mobileSubNavPosition = item.navPosition.mobile || mobileSubNavPosition;
                   }
                 }
                 return (

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

@@ -6,12 +6,12 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as AppNavBar} from './app-nav-bar.js';
-export {POSITION} from './constants.js';
+export { default as AppNavBar } from './app-nav-bar.js';
+export { POSITION } from './constants.js';
 export * from './styled-components.js';
 export * from './types.js';
 
-export {setItemActive} from './utils.js';
+export { setItemActive } from './utils.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

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

@@ -8,21 +8,18 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Button} from '../button/index.js';
-import {Drawer, ANCHOR} from '../drawer/index.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { Button } from '../button/index.js';
+import { Drawer, ANCHOR } from '../drawer/index.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import ArrowLeft from '../icon/arrow-left.js';
 import MenuIcon from '../icon/menu.js';
-import {MenuAdapter, ListItemLabel, ARTWORK_SIZES} from '../list/index.js';
-import {StatefulMenu} from '../menu/index.js';
-
-import {
-  StyledSideMenuButton,
-  StyledUserMenuProfileListItem,
-} from './styled-components.js';
-import type {AppNavBarPropsT} from './types.js';
+import { MenuAdapter, ListItemLabel, ARTWORK_SIZES } from '../list/index.js';
+import { StatefulMenu } from '../menu/index.js';
+
+import { StyledSideMenuButton, StyledUserMenuProfileListItem } from './styled-components.js';
+import type { AppNavBarPropsT } from './types.js';
 import UserProfileTile from './user-profile-tile.js';
-import {defaultMapItemToNode} from './utils.js';
+import { defaultMapItemToNode } from './utils.js';
 
 const USER_TITLE_ITEM = 'USER_TITLE_ITEM';
 const USER_MENU_ITEM = 'USER_MENU_ITEM';
@@ -30,16 +27,11 @@ const PARENT_MENU_ITEM = 'PARENT_MENU_ITEM';
 
 // eslint-disable-next-line react/display-name
 const MobileNavMenuItem = React.forwardRef((props, ref) => {
-  const {
-    item,
-    mapItemToNode = defaultMapItemToNode,
-    overrides = {},
-    ...restProps
-  } = props;
+  const { item, mapItemToNode = defaultMapItemToNode, overrides = {}, ...restProps } = props;
 
   const [UserMenuProfileListItem, userMenuProfileListItemProps] = getOverrides(
     overrides.UserMenuProfileListItem,
-    StyledUserMenuProfileListItem,
+    StyledUserMenuProfileListItem
   );
 
   if (item.PARENT_MENU_ITEM) {
@@ -57,11 +49,7 @@ const MobileNavMenuItem = React.forwardRef((props, ref) => {
   if (item.USER_TITLE_ITEM) {
     // Replace with a user menu item renderer
     return (
-      <UserMenuProfileListItem
-        {...restProps}
-        {...userMenuProfileListItemProps}
-        ref={ref}
-      >
+      <UserMenuProfileListItem {...restProps} {...userMenuProfileListItemProps} ref={ref}>
         <UserProfileTile {...item.item} />
       </UserMenuProfileListItem>
     );
@@ -80,19 +68,13 @@ const MobileNavMenuItem = React.forwardRef((props, ref) => {
 });
 
 export default function MobileMenu(props: AppNavBarPropsT) {
-  const {
-    mainItems = [],
-    userItems = [],
-    mapItemToNode,
-    overrides = {},
-    ...rest
-  } = props;
+  const { mainItems = [], userItems = [], mapItemToNode, overrides = {}, ...rest } = props;
 
   const items = [
     ...(userItems.length
       ? [
           {
-            item: {...rest},
+            item: { ...rest },
             label: props.username,
             [USER_TITLE_ITEM]: true,
             children: userItems.map((item) => {
@@ -115,23 +97,17 @@ export default function MobileMenu(props: AppNavBarPropsT) {
     setIsOpen(!isOpen);
   };
 
-  const [SideMenuButton, sideMenuButtonProps] = getOverrides(
-    overrides.SideMenuButton,
-    Button,
-  );
+  const [SideMenuButton, sideMenuButtonProps] = getOverrides(overrides.SideMenuButton, Button);
   sideMenuButtonProps.overrides = mergeOverrides(
-    {BaseButton: {component: StyledSideMenuButton}},
-    sideMenuButtonProps.overrides,
+    { BaseButton: { component: StyledSideMenuButton } },
+    sideMenuButtonProps.overrides
   );
 
-  const [MobileDrawer, drawerProps] = getOverrides(
-    overrides.MobileDrawer,
-    Drawer,
-  );
+  const [MobileDrawer, drawerProps] = getOverrides(overrides.MobileDrawer, Drawer);
   drawerProps.overrides = mergeOverrides(
     {
       DrawerBody: {
-        style: ({$theme}) => {
+        style: ({ $theme }) => {
           return {
             marginTop: '0px',
             marginBottom: '0px',
@@ -143,13 +119,10 @@ export default function MobileMenu(props: AppNavBarPropsT) {
       // Removes the close icon from the drawer
       Close: () => null,
     },
-    drawerProps.overrides,
+    drawerProps.overrides
   );
 
-  const [MobileMenu, menuProps] = getOverrides(
-    overrides.MobileMenu,
-    StatefulMenu,
-  );
+  const [MobileMenu, menuProps] = getOverrides(overrides.MobileMenu, StatefulMenu);
   menuProps.overrides = mergeOverrides(
     {
       List: {
@@ -172,7 +145,7 @@ export default function MobileMenu(props: AppNavBarPropsT) {
         );
       }),
     },
-    menuProps.overrides,
+    menuProps.overrides
   );
 
   return (
@@ -189,13 +162,13 @@ export default function MobileMenu(props: AppNavBarPropsT) {
       >
         <MobileMenu
           items={currentNavItems}
-          onItemSelect={({item}) => {
+          onItemSelect={({ item }) => {
             if (item.PARENT_MENU_ITEM) {
               // Remove current parent item selected to return to
               // from the ancestors list (`ancestorNavItems[ancestorArrLength - 1]`)
               const updatedAncestorNavItems = ancestorNavItems.slice(
                 0,
-                ancestorNavItems.length - 1,
+                ancestorNavItems.length - 1
               );
               const isTopLevel = !updatedAncestorNavItems.length;
               if (isTopLevel) {
@@ -203,9 +176,7 @@ export default function MobileMenu(props: AppNavBarPropsT) {
                 setCurrentNavItems(items);
               } else {
                 const newParentItem = {
-                  ...updatedAncestorNavItems[
-                    updatedAncestorNavItems.length - 1
-                  ],
+                  ...updatedAncestorNavItems[updatedAncestorNavItems.length - 1],
                   [PARENT_MENU_ITEM]: true,
                 };
                 setCurrentNavItems([newParentItem, ...newParentItem.children]);
@@ -221,7 +192,7 @@ export default function MobileMenu(props: AppNavBarPropsT) {
             }
 
             if (item.children && item.children.length) {
-              const parentItem = {...item, [PARENT_MENU_ITEM]: true};
+              const parentItem = { ...item, [PARENT_MENU_ITEM]: true };
               setAncestorNavItems([...ancestorNavItems, item]);
               setCurrentNavItems([parentItem, ...item.children]);
               return;

package/app-nav-bar/styled-components.js.flow

@@ -6,13 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled, withStyle} from '../styles/index.js';
-import {StyledListItem} from '../menu/index.js';
-import {KIND} from './constants.js';
+import { styled, withStyle } from '../styles/index.js';
+import { StyledListItem } from '../menu/index.js';
+import { KIND } from './constants.js';
 
-const StyledButton = styled<{$isFocusVisible: boolean}>(
+const StyledButton = styled<{ $isFocusVisible: boolean }>(
   'button',
-  ({$theme, $isFocusVisible}) => ({
+  ({ $theme, $isFocusVisible }) => ({
     boxSizing: 'border-box',
     display: 'flex',
     flexDirection: 'row',
@@ -37,11 +37,11 @@ const StyledButton = styled<{$isFocusVisible: boolean}>(
     outlineOffset: '-3px',
     WebkitAppearance: 'none',
     cursor: 'pointer',
-  }),
+  })
 );
 
 export const StyledRoot = styled<{}>('div', (props) => {
-  const {$theme} = props;
+  const { $theme } = props;
   return {
     ...$theme.typography.font300,
     boxSizing: 'border-box',
@@ -51,7 +51,7 @@ export const StyledRoot = styled<{}>('div', (props) => {
   };
 });
 
-export const StyledSubnavContainer = styled<{}>('div', ({$theme}) => {
+export const StyledSubnavContainer = styled<{}>('div', ({ $theme }) => {
   return {
     boxSizing: 'border-box',
     boxShadow: '0px -1px 0px rgba(0, 0, 0, 0.08)',
@@ -59,7 +59,7 @@ export const StyledSubnavContainer = styled<{}>('div', ({$theme}) => {
 });
 
 export const StyledSpacing = styled<{}>('div', (props) => {
-  const {$theme} = props;
+  const { $theme } = props;
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -74,7 +74,7 @@ export const StyledSpacing = styled<{}>('div', (props) => {
   };
 });
 
-export const StyledAppName = styled<{}>('div', ({$theme}) => ({
+export const StyledAppName = styled<{}>('div', ({ $theme }) => ({
   ...$theme.typography.font550,
   color: $theme.colors.primary,
   textDecoration: 'none',
@@ -85,18 +85,18 @@ export const StyledAppName = styled<{}>('div', ({$theme}) => ({
 
 export const StyledSideMenuButton = withStyle<typeof StyledButton, {}>(
   StyledButton,
-  ({$theme}) => ({
+  ({ $theme }) => ({
     ...($theme.direction === 'rtl'
-      ? {marginLeft: $theme.sizing.scale600}
-      : {marginRight: $theme.sizing.scale600}),
+      ? { marginLeft: $theme.sizing.scale600 }
+      : { marginRight: $theme.sizing.scale600 }),
     paddingTop: $theme.sizing.scale100,
     paddingBottom: $theme.sizing.scale100,
     paddingLeft: $theme.sizing.scale100,
     paddingRight: $theme.sizing.scale100,
-  }),
+  })
 );
 
-export const StyledPrimaryMenuContainer = styled<{}>('div', ({$theme}) => {
+export const StyledPrimaryMenuContainer = styled<{}>('div', ({ $theme }) => {
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -117,7 +117,7 @@ export const StyledMainMenuItem = styled<{
     $active,
     $isFocusVisible,
     $kind,
-    $theme: {colors, sizing, direction},
+    $theme: { colors, sizing, direction },
   } = props;
   return {
     boxSizing: 'border-box',
@@ -132,15 +132,14 @@ export const StyledMainMenuItem = styled<{
     outlineOffset: '-3px',
     borderBottomWidth: '2px',
     borderBottomStyle: 'solid',
-    borderBottomColor:
-      $active && !$isFocusVisible ? colors.primary : 'transparent',
+    borderBottomColor: $active && !$isFocusVisible ? colors.primary : 'transparent',
     cursor: $active ? 'default' : 'pointer',
     whiteSpace: $kind === KIND.secondary ? 'nowrap' : 'initial',
     ':first-child': {
-      ...(direction === 'rtl' ? {marginRight: '0'} : {marginLeft: '0'}),
+      ...(direction === 'rtl' ? { marginRight: '0' } : { marginLeft: '0' }),
     },
     ':last-child': {
-      ...(direction === 'rtl' ? {marginLeft: '0'} : {marginRight: '0'}),
+      ...(direction === 'rtl' ? { marginLeft: '0' } : { marginRight: '0' }),
     },
     ':hover': {
       color: colors.primary,
@@ -148,7 +147,7 @@ export const StyledMainMenuItem = styled<{
   };
 });
 
-export const StyledSecondaryMenuContainer = styled<{}>('div', ({$theme}) => {
+export const StyledSecondaryMenuContainer = styled<{}>('div', ({ $theme }) => {
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -163,16 +162,16 @@ export const StyledSecondaryMenuContainer = styled<{}>('div', ({$theme}) => {
 
 export const StyledUserMenuButton = StyledButton;
 
-export const StyledUserMenuProfileListItem = withStyle<
-  typeof StyledListItem,
-  {},
->(StyledListItem, ({$theme}) => ({
-  paddingTop: '0',
-  paddingBottom: '0',
-  ...($theme.direction === 'rtl' ? {paddingLeft: '0'} : {paddingRight: '0'}),
-}));
+export const StyledUserMenuProfileListItem = withStyle<typeof StyledListItem, {}>(
+  StyledListItem,
+  ({ $theme }) => ({
+    paddingTop: '0',
+    paddingBottom: '0',
+    ...($theme.direction === 'rtl' ? { paddingLeft: '0' } : { paddingRight: '0' }),
+  })
+);
 
-export const StyledUserProfileTileContainer = styled<{}>('div', ({$theme}) => {
+export const StyledUserProfileTileContainer = styled<{}>('div', ({ $theme }) => {
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -185,18 +184,15 @@ export const StyledUserProfileTileContainer = styled<{}>('div', ({$theme}) => {
   };
 });
 
-export const StyledUserProfilePictureContainer = styled<{}>(
-  'div',
-  ({$theme}) => {
-    return {
-      ...($theme.direction === 'rtl'
-        ? {marginLeft: $theme.sizing.scale600}
-        : {marginRight: $theme.sizing.scale600}),
-    };
-  },
-);
+export const StyledUserProfilePictureContainer = styled<{}>('div', ({ $theme }) => {
+  return {
+    ...($theme.direction === 'rtl'
+      ? { marginLeft: $theme.sizing.scale600 }
+      : { marginRight: $theme.sizing.scale600 }),
+  };
+});
 
-export const StyledUserProfileInfoContainer = styled<{}>('div', ({$theme}) => {
+export const StyledUserProfileInfoContainer = styled<{}>('div', ({ $theme }) => {
   return {
     boxSizing: 'border-box',
     alignSelf: 'center',

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

@@ -7,9 +7,9 @@ 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 = {|
   Root?: OverrideT,

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

@@ -8,42 +8,34 @@ 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,
@@ -53,31 +45,25 @@ export default function UserMenuComponent(props: {|
 |}) {
   // 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,
-  );
+  const [UserMenuButton, userMenuButtonProps] = getOverrides(overrides.UserMenuButton, Button);
   userMenuButtonProps.overrides = mergeOverrides(
-    {BaseButton: {component: StyledUserMenuButton}},
-    userMenuButtonProps.overrides,
+    { BaseButton: { component: StyledUserMenuButton } },
+    userMenuButtonProps.overrides
   );
 
-  const [UserMenu, userMenuProps] = getOverrides(
-    overrides.UserMenu,
-    StatefulMenu,
-  );
+  const [UserMenu, userMenuProps] = getOverrides(overrides.UserMenu, StatefulMenu);
   userMenuProps.overrides = mergeOverrides(
     {
       List: {
         // eslint-disable-next-line react/display-name
-        component: React.forwardRef(({children, ...restProps}, ref) => (
+        component: React.forwardRef(({ children, ...restProps }, ref) => (
           <StyledList {...restProps} ref={ref}>
             <UserMenuProfileListItem {...userMenuProfileListItemProps}>
               {/* Replace with a renderer: renderUserProfileTile() */}
@@ -91,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} />
         );
       }),
     },
-    userMenuProps.overrides,
+    userMenuProps.overrides
   );
 
   return (
     <StatefulPopover
-      content={({close}) => (
+      content={({ close }) => (
         <UserMenu
           items={userItems}
-          onItemSelect={({item}) => {
+          onItemSelect={({ item }) => {
             props.onItemSelect(item);
             close();
           }}
@@ -125,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>