feat: support pivots menu (#1755)

packages/component/src/ui/menu/MenuItem.tsx

@@ -1,31 +1,28 @@
 import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
-import { cloneElement, forwardRef } from 'react';
+import { forwardRef } from 'react';
+
+import {
+  StyledContent,
+  StyledEndIconWrapper,
+  StyledMenuItem,
+  StyledStartIconWrapper,
+} from './styles';
 
-import { StyledArrow, StyledMenuItem } from './styles';
 export type IconMenuProps = PropsWithChildren<{
-  isDir?: boolean;
   icon?: ReactElement;
+  endIcon?: ReactElement;
   iconSize?: [number, number];
   disabled?: boolean;
 }> &
   HTMLAttributes<HTMLButtonElement>;
 
 export const MenuItem = forwardRef<HTMLButtonElement, IconMenuProps>(
-  ({ isDir = false, icon, iconSize, children, ...props }, ref) => {
-    const [iconWidth, iconHeight] = iconSize || [20, 20];
+  ({ endIcon, icon, iconSize, children, ...props }, ref) => {
     return (
       <StyledMenuItem ref={ref} {...props}>
-        {icon &&
-          cloneElement(icon, {
-            width: iconWidth,
-            height: iconHeight,
-            style: {
-              marginRight: 12,
-              ...icon.props?.style,
-            },
-          })}
-        {children}
-        {isDir ? <StyledArrow /> : null}
+        {icon && <StyledStartIconWrapper>{icon}</StyledStartIconWrapper>}
+        <StyledContent>{children}</StyledContent>
+        {endIcon && <StyledEndIconWrapper>{endIcon}</StyledEndIconWrapper>}
       </StyledMenuItem>
     );
   }

packages/component/src/ui/menu/PureMenu.tsx

@@ -4,12 +4,17 @@ import type { PurePopperProps } from '../popper';
 import { PurePopper } from '../popper';
 import { StyledMenuWrapper } from './styles';
 
+export type PureMenuProps = PurePopperProps & {
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+};
 export const PureMenu = ({
   children,
   placement,
   width,
+  height,
   ...otherProps
-}: PurePopperProps & { width?: CSSProperties['width'] }) => {
+}: PureMenuProps) => {
   return (
     <PurePopper placement={placement} {...otherProps}>
       <StyledMenuWrapper width={width} placement={placement}>

packages/component/src/ui/menu/styles.ts

@@ -1,14 +1,15 @@
-import { ArrowRightSmallIcon } from '@blocksuite/icons';
 import type { CSSProperties } from 'react';
 
-import { displayFlex, styled } from '../../styles';
+import { displayFlex, styled, textEllipsis } from '../../styles';
 import StyledPopperContainer from '../shared/Container';
 
 export const StyledMenuWrapper = styled(StyledPopperContainer)<{
   width?: CSSProperties['width'];
-}>(({ theme, width }) => {
+  height?: CSSProperties['height'];
+}>(({ theme, width, height }) => {
   return {
     width,
+    height,
     background: theme.colors.popoverBackground,
     padding: '8px 4px',
     fontSize: '14px',
@@ -17,13 +18,28 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)<{
   };
 });
 
-export const StyledArrow = styled(ArrowRightSmallIcon)({
-  position: 'absolute',
-  right: '12px',
-  top: 0,
-  bottom: 0,
-  margin: 'auto',
-  fontSize: '20px',
+export const StyledStartIconWrapper = styled('div')(({ theme }) => {
+  return {
+    marginRight: '12px',
+    fontSize: '20px',
+    color: theme.colors.iconColor,
+  };
+});
+export const StyledEndIconWrapper = styled('div')(({ theme }) => {
+  return {
+    marginLeft: '12px',
+    fontSize: '20px',
+    color: theme.colors.iconColor,
+  };
+});
+
+export const StyledContent = styled('div')(({ theme }) => {
+  return {
+    textAlign: 'left',
+    flexGrow: 1,
+    fontSize: theme.font.base,
+    ...textEllipsis(1),
+  };
 });
 
 export const StyledMenuItem = styled('button')<{