refactor: move component into a single package (#898)

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

@@ -0,0 +1,20 @@
+import { Popper, type PopperProps } from '../popper';
+import { TooltipProps } from '@mui/material';
+import { StyledMenuWrapper } from './styles';
+
+export const Menu = (props: PopperProps & Omit<TooltipProps, 'title'>) => {
+  const { content, placement = 'bottom-start', children } = props;
+  return content ? (
+    <Popper
+      {...props}
+      showArrow={false}
+      content={
+        <StyledMenuWrapper placement={placement}>{content}</StyledMenuWrapper>
+      }
+    >
+      {children}
+    </Popper>
+  ) : null;
+};
+
+export default Menu;

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

@@ -0,0 +1,35 @@
+import {
+  cloneElement,
+  forwardRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
+import { StyledMenuItem, StyledArrow } from './styles';
+
+export type IconMenuProps = PropsWithChildren<{
+  isDir?: boolean;
+  icon?: ReactElement;
+}> &
+  HTMLAttributes<HTMLButtonElement>;
+
+export const MenuItem = forwardRef<HTMLButtonElement, IconMenuProps>(
+  ({ isDir = false, icon, children, ...props }, ref) => {
+    return (
+      <StyledMenuItem ref={ref} {...props}>
+        {icon &&
+          cloneElement(icon, {
+            width: 16,
+            height: 16,
+            style: {
+              marginRight: 14,
+            },
+          })}
+        {children}
+        {isDir ? <StyledArrow /> : null}
+      </StyledMenuItem>
+    );
+  }
+);
+MenuItem.displayName = 'MenuItem';
+export default MenuItem;

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

@@ -0,0 +1,3 @@
+export * from './Menu';
+// export { StyledMenuItem as MenuItem } from './styles';
+export * from './MenuItem';

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

@@ -0,0 +1,44 @@
+import { displayFlex, styled } from '../../styles';
+import StyledPopperContainer from '../shared/Container';
+import { ArrowRightIcon } from '@blocksuite/icons';
+
+export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
+  return {
+    background: theme.colors.popoverBackground,
+    padding: '8px 4px',
+    fontSize: '14px',
+    backgroundColor: theme.colors.popoverBackground,
+    boxShadow: theme.shadow.popover,
+    color: theme.colors.popoverColor,
+  };
+});
+
+export const StyledArrow = styled(ArrowRightIcon)({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  bottom: 0,
+  margin: 'auto',
+});
+
+export const StyledMenuItem = styled.button<{
+  isDir?: boolean;
+}>(({ theme, isDir = false }) => {
+  return {
+    width: '100%',
+    borderRadius: '5px',
+    padding: '0 14px',
+    fontSize: '14px',
+    height: '32px',
+    ...displayFlex('flex-start', 'center'),
+    cursor: isDir ? 'pointer' : '',
+    position: 'relative',
+    color: theme.colors.popoverColor,
+    backgroundColor: 'transparent',
+
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});