feat: add tooltip & popover

packages/app/package.json

@@ -17,6 +17,8 @@
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.4",
+    "@mui/base": "^5.0.0-alpha.87",
+    "@mui/material": "^5.8.6",
     "css-spring": "^4.1.0",
     "lit": "^2.3.1",
     "next": "12.3.1",

packages/app/src/components/popper/PopoverArrow.tsx

@@ -0,0 +1,93 @@
+import { forwardRef } from 'react';
+import { styled } from '@/styles';
+import { PopperArrowProps } from './interface';
+
+// eslint-disable-next-line react/display-name
+export const PopperArrow = forwardRef<HTMLElement, PopperArrowProps>(
+  ({ placement }, ref) => {
+    return <StyledArrow placement={placement} ref={ref} />;
+  }
+);
+
+const getArrowStyle = (placement: PopperArrowProps['placement']) => {
+  if (placement.indexOf('bottom') === 0) {
+    return {
+      top: 0,
+      left: 0,
+      marginTop: '-0.9em',
+      width: '3em',
+      height: '1em',
+      '&::before': {
+        borderWidth: '0 1em 1em 1em',
+        borderColor: `transparent transparent #98ACBD transparent`,
+      },
+    };
+  }
+
+  if (placement.indexOf('top') === 0) {
+    return {
+      bottom: 0,
+      left: 0,
+      marginBottom: '-0.9em',
+      width: '3em',
+      height: '1em',
+      '&::before': {
+        borderWidth: '1em 1em 0 1em',
+        borderColor: `#98ACBD transparent transparent transparent`,
+      },
+    };
+  }
+  if (placement.indexOf('left') === 0) {
+    return {
+      right: 0,
+      marginRight: '-0.9em',
+      height: '3em',
+      width: '1em',
+      '&::before': {
+        borderWidth: '1em 0 1em 1em',
+        borderColor: `transparent transparent transparent #98ACBD`,
+      },
+    };
+  }
+  if (placement.indexOf('right') === 0) {
+    return {
+      left: 0,
+      marginLeft: '-0.9em',
+      height: '3em',
+      width: '1em',
+      '&::before': {
+        borderWidth: '1em 1em 1em 0',
+        borderColor: `transparent #98ACBD transparent transparent`,
+      },
+    };
+  }
+
+  return {
+    display: 'none',
+  };
+};
+
+const StyledArrow = styled('span')<{
+  placement: PopperArrowProps['placement'];
+}>(({ placement }) => {
+  return {
+    position: 'absolute',
+    fontSize: '7px',
+    width: '3em',
+    '::before': {
+      content: '""',
+      margin: 'auto',
+      display: 'block',
+      width: 0,
+      height: 0,
+      borderStyle: 'solid',
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+    },
+
+    ...getArrowStyle(placement),
+  };
+});

packages/app/src/components/popper/Popper.tsx

@@ -0,0 +1,190 @@
+import {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import PopperUnstyled from '@mui/base/PopperUnstyled';
+import ClickAwayListener from '@mui/base/ClickAwayListener';
+import Grow from '@mui/material/Grow';
+
+import { styled } from '@/styles';
+
+import { PopperProps, VirtualElement } from './interface';
+import { PopperArrow } from './PopoverArrow';
+export const Popper = ({
+  children,
+  content,
+  anchorEl: propsAnchorEl,
+  placement = 'top-start',
+  defaultVisible = false,
+  visible: propsVisible,
+  trigger = 'hover',
+  pointerEnterDelay = 100,
+  pointerLeaveDelay = 100,
+  onVisibleChange,
+  popoverStyle,
+  popoverClassName,
+  anchorStyle,
+  anchorClassName,
+  zIndex,
+  offset = [0, 5],
+  showArrow = false,
+  popperHandlerRef,
+  onClick,
+  onClickAway,
+  ...popperProps
+}: PopperProps) => {
+  // @ts-ignore
+  const [anchorEl, setAnchorEl] = useState<VirtualElement>(null);
+  const [visible, setVisible] = useState(defaultVisible);
+  // @ts-ignore
+  const [arrowRef, setArrowRef] = useState<HTMLElement>(null);
+  const popperRef = useRef();
+  const pointerLeaveTimer = useRef<number>();
+  const pointerEnterTimer = useRef<number>();
+
+  const visibleControlledByParent = typeof propsVisible !== 'undefined';
+  const isAnchorCustom = typeof propsAnchorEl !== 'undefined';
+
+  const hasHoverTrigger = useMemo(() => {
+    return (
+      trigger === 'hover' ||
+      (Array.isArray(trigger) && trigger.includes('hover'))
+    );
+  }, [trigger]);
+
+  const hasClickTrigger = useMemo(() => {
+    return (
+      trigger === 'click' ||
+      (Array.isArray(trigger) && trigger.includes('click'))
+    );
+  }, [trigger]);
+
+  const onPointerEnterHandler = () => {
+    if (!hasHoverTrigger || visibleControlledByParent) {
+      return;
+    }
+    window.clearTimeout(pointerLeaveTimer.current);
+
+    pointerEnterTimer.current = window.setTimeout(() => {
+      setVisible(true);
+    }, pointerEnterDelay);
+  };
+
+  const onPointerLeaveHandler = () => {
+    if (!hasHoverTrigger || visibleControlledByParent) {
+      return;
+    }
+    window.clearTimeout(pointerEnterTimer.current);
+    pointerLeaveTimer.current = window.setTimeout(() => {
+      setVisible(false);
+    }, pointerLeaveDelay);
+  };
+
+  useEffect(() => {
+    onVisibleChange?.(visible);
+  }, [visible, onVisibleChange]);
+
+  useImperativeHandle(popperHandlerRef, () => {
+    return {
+      setVisible: (visible: boolean) => {
+        !visibleControlledByParent && setVisible(visible);
+      },
+    };
+  });
+
+  // @ts-ignore
+  // @ts-ignore
+  return (
+    <ClickAwayListener
+      onClickAway={() => {
+        if (visibleControlledByParent) {
+          onClickAway?.();
+        } else {
+          setVisible(false);
+        }
+      }}
+    >
+      <Container>
+        {isAnchorCustom ? null : (
+          <div
+            ref={(dom: HTMLDivElement) => setAnchorEl(dom)}
+            onClick={e => {
+              if (!hasClickTrigger || visibleControlledByParent) {
+                onClick?.(e);
+                return;
+              }
+              setVisible(!visible);
+            }}
+            onPointerEnter={onPointerEnterHandler}
+            onPointerLeave={onPointerLeaveHandler}
+            style={anchorStyle}
+            className={anchorClassName}
+          >
+            {children}
+          </div>
+        )}
+        <BasicStyledPopper
+          // @ts-ignore
+          popperRef={popperRef}
+          open={visibleControlledByParent ? propsVisible : visible}
+          zIndex={zIndex}
+          anchorEl={isAnchorCustom ? propsAnchorEl : anchorEl}
+          placement={placement}
+          transition
+          modifiers={[
+            {
+              name: 'offset',
+              options: {
+                offset,
+              },
+            },
+            {
+              name: 'arrow',
+              enabled: showArrow,
+              options: {
+                element: arrowRef,
+              },
+            },
+          ]}
+          {...popperProps}
+        >
+          {({ TransitionProps }) => (
+            <Grow {...TransitionProps}>
+              <div
+                onPointerEnter={onPointerEnterHandler}
+                onPointerLeave={onPointerLeaveHandler}
+                style={popoverStyle}
+                className={popoverClassName}
+              >
+                {showArrow && (
+                  // @ts-ignore
+                  <PopperArrow placement={placement} ref={setArrowRef} />
+                )}
+                {content}
+              </div>
+            </Grow>
+          )}
+        </BasicStyledPopper>
+      </Container>
+    </ClickAwayListener>
+  );
+};
+
+// The children of ClickAwayListener must be a DOM Node to judge whether the click is outside, use node.contains
+const Container = styled('div')({
+  display: 'contents',
+});
+
+const BasicStyledPopper = styled(PopperUnstyled, {
+  shouldForwardProp: (propName: string) =>
+    !['zIndex'].some(name => name === propName),
+})<{
+  zIndex?: number;
+}>(({ zIndex, theme }) => {
+  return {
+    zIndex: zIndex,
+  };
+});

packages/app/src/components/popper/index.ts

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

packages/app/src/components/popper/interface.ts

@@ -0,0 +1,66 @@
+import type { CSSProperties, ReactNode, Ref } from 'react';
+import {
+  type PopperPlacementType,
+  type PopperUnstyledProps,
+} from '@mui/base/PopperUnstyled';
+export type VirtualElement = {
+  getBoundingClientRect: () => ClientRect | DOMRect;
+  contextElement?: Element;
+};
+
+export type PopperHandler = {
+  setVisible: (visible: boolean) => void;
+};
+
+export type PopperArrowProps = {
+  placement: PopperPlacementType;
+};
+
+export type PopperProps = {
+  // Popover content
+  content: ReactNode;
+
+  // Popover trigger
+  children?: ReactNode;
+
+  // Whether the default is implicit
+  defaultVisible?: boolean;
+
+  // Used to manually control the visibility of the Popover
+  visible?: boolean;
+
+  // TODO: support focus
+  trigger?: 'hover' | 'click' | 'focus' | ('click' | 'hover' | 'focus')[];
+
+  // How long does it take for the mouse to display the Popover, in milliseconds
+  pointerEnterDelay?: number;
+
+  // How long does it take to hide the Popover after the mouse moves out, in milliseconds
+  pointerLeaveDelay?: number;
+
+  // Callback fired when the component closed or open
+  onVisibleChange?: (visible: boolean) => void;
+
+  // Popover container style
+  popoverStyle?: CSSProperties;
+
+  // Popover container class name
+  popoverClassName?: string;
+
+  // Anchor style
+  anchorStyle?: CSSProperties;
+
+  // Anchor class name
+  anchorClassName?: string;
+
+  // Popover z-index
+  zIndex?: number;
+
+  offset?: [number, number];
+
+  showArrow?: boolean;
+
+  popperHandlerRef?: Ref<PopperHandler>;
+
+  onClickAway?: () => void;
+} & Omit<PopperUnstyledProps, 'open' | 'ref'>;

packages/app/src/components/tooltip/Container.tsx

@@ -0,0 +1,36 @@
+import { styled } from '@/styles';
+import type { ReactNode, CSSProperties } from 'react';
+import type { PopoverDirection } from './interface';
+export interface PopoverContainerProps {
+  children?: ReactNode;
+  /**
+   * The pop-up window points to. The pop-up window has three rounded corners, one is a right angle, and the right angle is the direction of the pop-up window.
+   */
+  direction: PopoverDirection;
+  style?: CSSProperties;
+}
+const border_radius_map: Record<PopoverContainerProps['direction'], string> = {
+  none: '10px',
+  'left-top': '0 10px 10px 10px',
+  'left-bottom': '10px 10px 10px 0',
+  'right-top': '10px 0 10px 10px',
+  'right-bottom': '10px 10px 0 10px',
+};
+
+export const PopoverContainer = styled('div')<
+  Pick<PopoverContainerProps, 'direction'>
+>(({ theme, direction, style }) => {
+  return '';
+  // const shadow = theme.affine.shadows.shadow1;
+  // const white = theme.affine.palette.white;
+  //
+  // const borderRadius =
+  //   border_radius_map[direction] || border_radius_map['left-top'];
+  // return {
+  //   boxShadow: shadow,
+  //   borderRadius: borderRadius,
+  //   padding: '8px 4px',
+  //   backgroundColor: white,
+  //   ...style,
+  // };
+});

packages/app/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,62 @@
+import { type CSSProperties, type PropsWithChildren } from 'react';
+import { PopoverContainer } from './Container';
+import { Popper, type PopperProps } from '../popper';
+import { useTheme } from '@/styles';
+import type { PopperPlacementType, TooltipProps } from '@mui/material';
+import type { PopoverDirection } from './interface';
+export const placementToContainerDirection: Record<
+  PopperPlacementType,
+  PopoverDirection
+> = {
+  top: 'none',
+  'top-start': 'left-bottom',
+  'top-end': 'right-bottom',
+  right: 'none',
+  'right-start': 'left-top',
+  'right-end': 'left-bottom',
+  bottom: 'none',
+  'bottom-start': 'left-top',
+  'bottom-end': 'right-top',
+  left: 'none',
+  'left-start': 'right-top',
+  'left-end': 'right-bottom',
+  auto: 'none',
+  'auto-start': 'none',
+  'auto-end': 'none',
+};
+
+const useTooltipStyle = (): CSSProperties => {
+  const theme = useTheme();
+  return {};
+  // return {
+  //     backgroundColor: theme.affine.palette.icons,
+  //     color: theme.affine.palette.white,
+  //     ...theme.affine.typography.tooltip,
+  //     padding: '4px 8px',
+  // };
+};
+
+export const Tooltip = (
+  props: PropsWithChildren<PopperProps & Omit<TooltipProps, 'title'>>
+) => {
+  const { content, placement = 'top-start' } = props;
+  const style = useTooltipStyle();
+  // If there is no content, hide forever
+  const visibleProp = content ? {} : { visible: false };
+  return (
+    <Popper
+      {...visibleProp}
+      placement="top"
+      {...props}
+      showArrow={false}
+      content={
+        <PopoverContainer
+          style={style}
+          direction={placementToContainerDirection[placement]}
+        >
+          {content}
+        </PopoverContainer>
+      }
+    />
+  );
+};

packages/app/src/components/tooltip/index.tsx

@@ -0,0 +1 @@
+export * from './Tooltip';

packages/app/src/components/tooltip/interface.ts

@@ -0,0 +1,9 @@
+export type TooltipProps = {
+  showArrow?: boolean;
+};
+export type PopoverDirection =
+  | 'none'
+  | 'left-top'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-bottom';

pnpm-lock.yaml

@@ -25,6 +25,8 @@ importers:
       '@emotion/react': ^11.10.4
       '@emotion/server': ^11.10.0
       '@emotion/styled': ^11.10.4
+      '@mui/base': ^5.0.0-alpha.87
+      '@mui/material': ^5.8.6
       '@types/node': 18.7.18
       '@types/react': 18.0.20
       '@types/react-dom': 18.0.6
@@ -49,6 +51,8 @@ importers:
       '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
       '@emotion/server': 11.10.0_@emotion+css@11.10.0
       '@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y
+      '@mui/base': 5.0.0-alpha.101_7ey2zzynotv32rpkwno45fsx4e
+      '@mui/material': 5.10.9_af5ln35zuaotaffazii6n6bke4
       css-spring: 4.1.0
       lit: 2.4.0
       next: 12.3.1_biqbaboplfbrettd7655fr4n2y
@@ -375,6 +379,164 @@ packages:
     resolution: {integrity: sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw==}
     dev: false
 
+  /@mui/base/5.0.0-alpha.101_7ey2zzynotv32rpkwno45fsx4e:
+    resolution: {integrity: sha512-a54BcXvArGOKUZ2zyS/7B9GNhAGgfomEQSkfEZ88Nc9jKvXA+Mppenfz5o4JCAnD8c4VlePmz9rKOYvvum1bZw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@emotion/is-prop-valid': 1.2.0
+      '@mui/types': 7.2.0_@types+react@18.0.20
+      '@mui/utils': 5.10.9_react@18.2.0
+      '@popperjs/core': 2.11.6
+      '@types/react': 18.0.20
+      clsx: 1.2.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-is: 18.2.0
+    dev: false
+
+  /@mui/core-downloads-tracker/5.10.9:
+    resolution: {integrity: sha512-rqoFu4qww6KJBbXYhyRd9YXjwBHa3ylnBPSWbGf1bdfG0AYMKmVzg8zxkWvxAWOp97kvx3M2kNPb0xMIDZiogQ==}
+    dev: false
+
+  /@mui/material/5.10.9_af5ln35zuaotaffazii6n6bke4:
+    resolution: {integrity: sha512-sdOzlgpCmyw48je+E7o9UGGJpgBaF+60FlTRpVpcd/z+LUhnuzzuis891yPI5dPPXLBDL/bO4SsGg51lgNeLBw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
+      '@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y
+      '@mui/base': 5.0.0-alpha.101_7ey2zzynotv32rpkwno45fsx4e
+      '@mui/core-downloads-tracker': 5.10.9
+      '@mui/system': 5.10.9_4mv32nu4vciambuqqzuu4gtvj4
+      '@mui/types': 7.2.0_@types+react@18.0.20
+      '@mui/utils': 5.10.9_react@18.2.0
+      '@types/react': 18.0.20
+      '@types/react-transition-group': 4.4.5
+      clsx: 1.2.1
+      csstype: 3.1.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-is: 18.2.0
+      react-transition-group: 4.4.5_biqbaboplfbrettd7655fr4n2y
+    dev: false
+
+  /@mui/private-theming/5.10.9_w5j4k42lgipnm43s3brx6h3c34:
+    resolution: {integrity: sha512-BN7/CnsVPVyBaQpDTij4uV2xGYHHHhOgpdxeYLlIu+TqnsVM7wUeF+37kXvHovxM6xmL5qoaVUD98gDC0IZnHg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@mui/utils': 5.10.9_react@18.2.0
+      '@types/react': 18.0.20
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
+  /@mui/styled-engine/5.10.8_hfzxdiydbrbhhfpkwuv3jhvwmq:
+    resolution: {integrity: sha512-w+y8WI18EJV6zM/q41ug19cE70JTeO6sWFsQ7tgePQFpy6ToCVPh0YLrtqxUZXSoMStW5FMw0t9fHTFAqPbngw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.4.1
+      '@emotion/styled': ^11.3.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@emotion/cache': 11.10.3
+      '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
+      '@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y
+      csstype: 3.1.1
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
+  /@mui/system/5.10.9_4mv32nu4vciambuqqzuu4gtvj4:
+    resolution: {integrity: sha512-B6fFC0sK06hNmqY7fAUfwShQv594+u/DT1YEFHPtK4laouTu7V4vSGQWi1WJT9Bjs9Db5D1bRDJ+Yy+tc3QOYA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
+      '@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y
+      '@mui/private-theming': 5.10.9_w5j4k42lgipnm43s3brx6h3c34
+      '@mui/styled-engine': 5.10.8_hfzxdiydbrbhhfpkwuv3jhvwmq
+      '@mui/types': 7.2.0_@types+react@18.0.20
+      '@mui/utils': 5.10.9_react@18.2.0
+      '@types/react': 18.0.20
+      clsx: 1.2.1
+      csstype: 3.1.1
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
+  /@mui/types/7.2.0_@types+react@18.0.20:
+    resolution: {integrity: sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA==}
+    peerDependencies:
+      '@types/react': '*'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.20
+    dev: false
+
+  /@mui/utils/5.10.9_react@18.2.0:
+    resolution: {integrity: sha512-2tdHWrq3+WCy+G6TIIaFx3cg7PorXZ71P375ExuX61od1NOAJP1mK90VxQ8N4aqnj2vmO3AQDkV4oV2Ktvt4bA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@types/prop-types': 15.7.5
+      '@types/react-is': 17.0.3
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-is: 18.2.0
+    dev: false
+
   /@next/env/12.3.1:
     resolution: {integrity: sha512-9P9THmRFVKGKt9DYqeC2aKIxm8rlvkK38V1P1sRE7qyoPBIs8l9oo79QoSdPtOWfzkbDAVUqvbQGgTMsb8BtJg==}
     dev: false
@@ -523,6 +685,10 @@ packages:
       fastq: 1.13.0
     dev: true
 
+  /@popperjs/core/2.11.6:
+    resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
+    dev: false
+
   /@rushstack/eslint-patch/1.2.0:
     resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
     dev: true
@@ -554,6 +720,18 @@ packages:
       '@types/react': 18.0.20
     dev: true
 
+  /@types/react-is/17.0.3:
+    resolution: {integrity: sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==}
+    dependencies:
+      '@types/react': 18.0.20
+    dev: false
+
+  /@types/react-transition-group/4.4.5:
+    resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==}
+    dependencies:
+      '@types/react': 18.0.20
+    dev: false
+
   /@types/react/18.0.20:
     resolution: {integrity: sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==}
     dependencies:
@@ -850,6 +1028,11 @@ packages:
     engines: {node: '>=0.8'}
     dev: false
 
+  /clsx/1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -997,6 +1180,13 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /dom-helpers/5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+    dependencies:
+      '@babel/runtime': 7.19.0
+      csstype: 3.1.1
+    dev: false
+
   /domino/2.1.6:
     resolution: {integrity: sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==}
     dev: false
@@ -1180,7 +1370,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
+      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
       debug: 3.2.7
       eslint: 8.22.0
       eslint-import-resolver-node: 0.3.6
@@ -1199,7 +1389,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
+      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
       debug: 2.6.9
@@ -2204,7 +2394,6 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
-    dev: true
 
   /punycode/2.1.1:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
@@ -2257,6 +2446,24 @@ packages:
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  /react-is/18.2.0:
+    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
+    dev: false
+
+  /react-transition-group/4.4.5_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+    dependencies:
+      '@babel/runtime': 7.19.0
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /react/18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}