feat: modify pivot style & add operation menu to pivot item (#1726)

packages/component/src/ui/popper/PopoverArrow.tsx

@@ -11,7 +11,7 @@ export const PopperArrow = forwardRef<HTMLElement, PopperArrowProps>(
 );
 
 const getArrowStyle = (
-  placement: PopperArrowProps['placement'],
+  placement: PopperArrowProps['placement'] = 'bottom',
   backgroundColor: CSSProperties['backgroundColor']
 ) => {
   if (placement.indexOf('bottom') === 0) {
@@ -72,7 +72,7 @@ const getArrowStyle = (
 };
 
 const StyledArrow = styled('span')<{
-  placement: PopperArrowProps['placement'];
+  placement?: PopperArrowProps['placement'];
 }>(({ placement, theme }) => {
   return {
     position: 'absolute',

packages/component/src/ui/popper/Popper.tsx

@@ -1,6 +1,7 @@
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import Grow from '@mui/material/Grow';
+import type { CSSProperties, PointerEvent } from 'react';
 import {
   cloneElement,
   useEffect,
@@ -33,6 +34,8 @@ export const Popper = ({
   popperHandlerRef,
   onClick,
   onClickAway,
+  onPointerEnter,
+  onPointerLeave,
   ...popperProps
 }: PopperProps) => {
   const [anchorEl, setAnchorEl] = useState<VirtualElement>();
@@ -58,7 +61,8 @@ export const Popper = ({
     );
   }, [trigger]);
 
-  const onPointerEnterHandler = () => {
+  const onPointerEnterHandler = (e: PointerEvent<HTMLDivElement>) => {
+    onPointerEnter?.(e);
     if (!hasHoverTrigger || visibleControlledByParent) {
       return;
     }
@@ -69,7 +73,9 @@ export const Popper = ({
     }, pointerEnterDelay);
   };
 
-  const onPointerLeaveHandler = () => {
+  const onPointerLeaveHandler = (e: PointerEvent<HTMLDivElement>) => {
+    onPointerLeave?.(e);
+
     if (!hasHoverTrigger || visibleControlledByParent) {
       return;
     }
@@ -151,7 +157,7 @@ export const Popper = ({
                   onPointerLeave={onPointerLeaveHandler}
                   style={popoverStyle}
                   className={popoverClassName}
-                  onClick={e => {
+                  onClick={() => {
                     if (hasClickTrigger && !visibleControlledByParent) {
                       setVisible(false);
                     }
@@ -178,11 +184,11 @@ const Container = styled('div')({
   display: 'contents',
 });
 
-const BasicStyledPopper = styled(PopperUnstyled, {
+export const BasicStyledPopper = styled(PopperUnstyled, {
   shouldForwardProp: (propName: string) =>
     !['zIndex'].some(name => name === propName),
 })<{
-  zIndex?: number;
+  zIndex?: CSSProperties['zIndex'];
 }>(({ zIndex, theme }) => {
   return {
     zIndex: zIndex ?? theme.zIndex.popover,

packages/component/src/ui/popper/PurePopper.tsx

@@ -0,0 +1,67 @@
+import type { PopperUnstyledProps } from '@mui/base/PopperUnstyled';
+import Grow from '@mui/material/Grow';
+import type { CSSProperties, PropsWithChildren } from 'react';
+import { useState } from 'react';
+
+import { PopperArrow } from './PopoverArrow';
+import { BasicStyledPopper } from './Popper';
+import { PopperWrapper } from './styles';
+
+export type PurePopperProps = {
+  zIndex?: CSSProperties['zIndex'];
+
+  offset?: [number, number];
+
+  showArrow?: boolean;
+} & PopperUnstyledProps &
+  PropsWithChildren;
+
+export const PurePopper = (props: PurePopperProps) => {
+  const {
+    children,
+    zIndex,
+    offset,
+    showArrow = false,
+    modifiers = [],
+    placement,
+    ...otherProps
+  } = props;
+  const [arrowRef, setArrowRef] = useState<HTMLElement | null>();
+
+  // @ts-ignore
+  return (
+    <BasicStyledPopper
+      zIndex={zIndex}
+      transition
+      modifiers={[
+        {
+          name: 'offset',
+          options: {
+            offset,
+          },
+        },
+        {
+          name: 'arrow',
+          enabled: showArrow,
+          options: {
+            element: arrowRef,
+          },
+        },
+        ...modifiers,
+      ]}
+      placement={placement}
+      {...otherProps}
+    >
+      {({ TransitionProps }) => (
+        <Grow {...TransitionProps}>
+          <PopperWrapper>
+            {showArrow && (
+              <PopperArrow placement={placement} ref={setArrowRef} />
+            )}
+            {children}
+          </PopperWrapper>
+        </Grow>
+      )}
+    </BasicStyledPopper>
+  );
+};

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

@@ -1,2 +1,3 @@
 export * from './interface';
 export * from './Popper';
+export * from './PurePopper';

packages/component/src/ui/popper/interface.ts

@@ -13,7 +13,7 @@ export type PopperHandler = {
 };
 
 export type PopperArrowProps = {
-  placement: PopperPlacementType;
+  placement?: PopperPlacementType;
 };
 
 export type PopperProps = {

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

@@ -0,0 +1,7 @@
+import { styled } from '../../styles';
+
+export const PopperWrapper = styled('div')(() => {
+  return {
+    position: 'relative',
+  };
+});