diff --git a/packages/app/package.json b/packages/app/package.json index 0470ef952..168fcfab5 100644 --- a/packages/app/package.json +++ b/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", diff --git a/packages/app/src/components/popper/PopoverArrow.tsx b/packages/app/src/components/popper/PopoverArrow.tsx new file mode 100644 index 000000000..4a99f5082 --- /dev/null +++ b/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( + ({ placement }, ref) => { + return ; + } +); + +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), + }; +}); diff --git a/packages/app/src/components/popper/Popper.tsx b/packages/app/src/components/popper/Popper.tsx new file mode 100644 index 000000000..68ea64197 --- /dev/null +++ b/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(null); + const [visible, setVisible] = useState(defaultVisible); + // @ts-ignore + const [arrowRef, setArrowRef] = useState(null); + const popperRef = useRef(); + const pointerLeaveTimer = useRef(); + const pointerEnterTimer = useRef(); + + 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 ( + { + if (visibleControlledByParent) { + onClickAway?.(); + } else { + setVisible(false); + } + }} + > + + {isAnchorCustom ? null : ( +
setAnchorEl(dom)} + onClick={e => { + if (!hasClickTrigger || visibleControlledByParent) { + onClick?.(e); + return; + } + setVisible(!visible); + }} + onPointerEnter={onPointerEnterHandler} + onPointerLeave={onPointerLeaveHandler} + style={anchorStyle} + className={anchorClassName} + > + {children} +
+ )} + + {({ TransitionProps }) => ( + +
+ {showArrow && ( + // @ts-ignore + + )} + {content} +
+ + )} + + + + ); +}; + +// 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, + }; +}); diff --git a/packages/app/src/components/popper/index.ts b/packages/app/src/components/popper/index.ts new file mode 100644 index 000000000..88fac6707 --- /dev/null +++ b/packages/app/src/components/popper/index.ts @@ -0,0 +1,2 @@ +export * from './interface'; +export * from './Popper'; diff --git a/packages/app/src/components/popper/interface.ts b/packages/app/src/components/popper/interface.ts new file mode 100644 index 000000000..bbb676c4c --- /dev/null +++ b/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; + + onClickAway?: () => void; +} & Omit; diff --git a/packages/app/src/components/tooltip/Container.tsx b/packages/app/src/components/tooltip/Container.tsx new file mode 100644 index 000000000..4c8615008 --- /dev/null +++ b/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 = { + 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 +>(({ 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, + // }; +}); diff --git a/packages/app/src/components/tooltip/Tooltip.tsx b/packages/app/src/components/tooltip/Tooltip.tsx new file mode 100644 index 000000000..0bbe560f9 --- /dev/null +++ b/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> +) => { + const { content, placement = 'top-start' } = props; + const style = useTooltipStyle(); + // If there is no content, hide forever + const visibleProp = content ? {} : { visible: false }; + return ( + + {content} + + } + /> + ); +}; diff --git a/packages/app/src/components/tooltip/index.tsx b/packages/app/src/components/tooltip/index.tsx new file mode 100644 index 000000000..7594a8f06 --- /dev/null +++ b/packages/app/src/components/tooltip/index.tsx @@ -0,0 +1 @@ +export * from './Tooltip'; diff --git a/packages/app/src/components/tooltip/interface.ts b/packages/app/src/components/tooltip/interface.ts new file mode 100644 index 000000000..73e08c5ad --- /dev/null +++ b/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'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9fada691b..f79935224 100644 --- a/pnpm-lock.yaml +++ b/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'}