mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-11-21 13:39:22 +01:00
Code Issues Releases Activity

fix(lemon-ui): Restore Popover's appearance animation (#14248)

Browse Source 
* `fix(lemon-ui): Restore `Popover`'s appearance animation

* Use `CSSTransition` after all

* Update react-transition-group

* Change approach with `CSSTransition`

* Remove meaningless change
This commit is contained in:
Michael Matloka 2023-02-23 14:16:34 +01:00 committed by GitHub
parent 8bd68dc293
commit 2e2c3a6038
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 106 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx
View File

@ -21,7 +21,7 @@ import { CSSTransition } from 'react-transition-group'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { humanFriendlyNumber } from 'lib/utils'
import { TitleWithIcon } from '../TitleWithIcon'
import { UseFloatingReturn } from '@floating-ui/react-dom-interactions'
import { UseFloatingReturn } from '@floating-ui/react'
import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
export const ThirtyDayVolumeTitle = ({ tooltipPlacement }: { tooltipPlacement?: 'top' | 'bottom' }): JSX.Element => (

2
frontend/src/lib/components/HelpButton/HelpButton.tsx
View File

@ -17,7 +17,7 @@ import {
IconTrendingUp,
} from 'lib/lemon-ui/icons'
import clsx from 'clsx'
import { Placement } from '@floating-ui/react-dom-interactions'
import { Placement } from '@floating-ui/react'
import { DefaultAction, inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'
import { hedgehogbuddyLogic } from '../HedgehogBuddy/hedgehogbuddyLogic'
import { HedgehogBuddyWithLogic } from '../HedgehogBuddy/HedgehogBuddy'

4
frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx
View File

@ -21,7 +21,7 @@ import clsx from 'clsx'
import { definitionPopoverLogic } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
import { ControlledDefinitionPopoverContents } from 'lib/components/DefinitionPopover/DefinitionPopoverContents'
import { pluralize } from 'lib/utils'
import { flip, offset, shift, size, useFloating } from '@floating-ui/react-dom-interactions'
import { flip, offset, shift, size, useFloating } from '@floating-ui/react'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
enum ListTooltip {
@ -308,7 +308,7 @@ export function InfiniteList(): JSX.Element {
{isActiveTab &&
selectedItemInView &&
selectedItemHasPopover(selectedItem, listGroupType, group) &&
tooltipDesiredState(referenceRef.current) !== ListTooltip.None &&
tooltipDesiredState(referenceRef.current as HTMLElement | null) !== ListTooltip.None &&
showPopover
? ReactDOM.createPortal(
selectedItem && group ? (

2
frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.tsx
View File

@ -1,4 +1,4 @@
import { Placement } from '@floating-ui/react-dom-interactions'
import { Placement } from '@floating-ui/react'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
import { IconOpenInNew } from 'lib/lemon-ui/icons'
import { IconClose, IconChevronLeft, IconChevronRight } from 'lib/lemon-ui/icons'

46
frontend/src/lib/lemon-ui/Popover/Popover.scss
View File

@ -29,31 +29,47 @@
padding: 0.5rem;
border-radius: var(--radius);
border: 1px solid var(--border);
overflow: auto;
[data-floating-placement^='top'] & {
transform-origin: bottom;
}
opacity: 0;
.Popover--actionable & {
border-color: var(--primary);
}
.Popover--enter &,
.Popover--exit.Popover--exit-active & {
opacity: 0;
.Popover[data-placement^='bottom'] & {
transform-origin: top;
}
.Popover[data-placement^='top'] & {
transform-origin: bottom;
}
.Popover[data-placement^='left'] & {
transform-origin: right;
}
.Popover[data-placement^='right'] & {
transform-origin: left;
}
.Popover[data-placement^='bottom'] & {
transform: rotateX(-12deg);
}
.Popover--enter[data-floating-placement^='top'] &,
.Popover--exit.Popover--exit-active[data-floating-placement^='top'] & {
.Popover[data-placement^='top'] & {
transform: rotateX(12deg);
}
.Popover--enter.Popover--enter-active &,
.Popover--exit & {
.Popover[data-placement^='left'] & {
transform: rotateY(-12deg);
}
.Popover[data-placement^='right'] & {
transform: rotateY(12deg);
}
.Popover.Popover--enter-done & {
opacity: 1;
transform: rotateX(0);
transform: none;
}
.Popover--max-content-width & {
@ -92,3 +108,7 @@
border-color: var(--primary);
}
}
.Popover__content {
overflow: auto;
}

64
frontend/src/lib/lemon-ui/Popover/Popover.tsx
View File

@ -9,10 +9,8 @@ import React, {
useMemo,
useRef,
} from 'react'
import ReactDOM from 'react-dom'
import { useOutsideClickHandler } from 'lib/hooks/useOutsideClickHandler'
import clsx from 'clsx'
import { CSSTransition } from 'react-transition-group'
import {
offset,
useFloating,
@ -23,7 +21,9 @@ import {
flip,
size,
arrow,
} from '@floating-ui/react-dom-interactions'
FloatingPortal,
} from '@floating-ui/react'
import { CSSTransition } from 'react-transition-group'
export interface PopoverProps {
ref?: React.MutableRefObject<HTMLDivElement | null> | React.Ref<HTMLDivElement> | null
@ -89,9 +89,9 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
closeParentPopoverOnClickInside = false,
style,
getPopupContainer,
showArrow,
showArrow = false,
},
ref
contentRef
): JSX.Element {
const popoverId = useMemo(() => uniqueMemoizedIndex++, [])
const parentPopoverId = useContext(PopoverContext)
@ -101,12 +101,14 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
x,
y,
reference,
floating,
refs: { reference: referenceRef, floating: floatingRef },
strategy,
placement: floatingPlacement,
placement: effectivePlacement,
update,
middlewareData,
} = useFloating<HTMLElement>({
open: visible,
placement,
strategy: 'fixed',
middleware: [
@ -133,7 +135,7 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
right: 'left',
bottom: 'top',
left: 'right',
}[floatingPlacement.split('-')[0]] as string
}[effectivePlacement.split('-')[0]] as string
const arrowStyle = middlewareData.arrow
? {
@ -171,10 +173,8 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
const clonedChildren = children
? typeof children === 'function'
? children({ ref: referenceRef })
: React.Children.toArray(children).map((child) =>
React.cloneElement(child as ReactElement, { ref: referenceRef })
)
? children({ ref: referenceRef as React.MutableRefObject<HTMLElement | null> })
: React.cloneElement(children as ReactElement, { ref: referenceRef })
: null
const isAttached = clonedChildren || referenceElement
@ -195,8 +195,8 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
return (
<>
{clonedChildren}
{ReactDOM.createPortal(
<CSSTransition in={visible} timeout={100} classNames="Popover-" mountOnEnter unmountOnExit>
<FloatingPortal root={getPopupContainer?.()}>
<CSSTransition in={visible} timeout={100} classNames="Popover-" appear mountOnEnter unmountOnExit>
<PopoverContext.Provider value={popoverId}>
<div
className={clsx(
@ -206,30 +206,32 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
!isAttached && 'Popover--top-centered',
className
)}
data-floating-placement={floatingPlacement}
ref={floatingRef as MutableRefObject<HTMLDivElement>}
data-placement={effectivePlacement}
ref={floating}
style={{ position: strategy, top, left, ...style }}
onClick={_onClickInside}
>
<div ref={ref} className="Popover__box">
{overlay}
<div className="Popover__box">
{showArrow && isAttached && (
// Arrow is outside of .Popover__content to avoid affecting :nth-child for content
<div
ref={arrowRef}
className={clsx(
'Popover__arrow',
`Popover__arrow--${arrowStaticSide}`,
actionable && 'Popover--actionable'
)}
style={arrowStyle}
/>
)}
<div className="Popover__content" ref={contentRef}>
{overlay}
</div>
</div>
{showArrow && isAttached && (
<div
ref={arrowRef}
className={clsx(
'Popover__arrow',
`Popover__arrow--${arrowStaticSide}`,
actionable && 'Popover--actionable'
)}
style={arrowStyle}
/>
)}
</div>
</PopoverContext.Provider>
</CSSTransition>,
getPopupContainer ? getPopupContainer() : document.body
)}
</CSSTransition>
</FloatingPortal>
</>
)
})

2
frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.tsx
View File

@ -1,5 +1,5 @@
import ReactDOM from 'react-dom'
import { Placement } from '@floating-ui/react-dom-interactions'
import { Placement } from '@floating-ui/react'
import { kea, path, actions, reducers, listeners, selectors, connect, afterMount, beforeUnmount } from 'kea'
import type { inAppPromptLogicType } from './inAppPromptLogicType'
import { router, urlToAction } from 'kea-router'

2
frontend/src/scenes/data-management/ingestion-warnings/WarningEventsGraph.tsx
View File

@ -6,7 +6,7 @@ import { dayjs, dayjsUtcToTimezone } from 'lib/dayjs'
import { teamLogic } from '../../teamLogic'
import { IngestionWarningSummary } from './ingestionWarningsLogic'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
import { offset } from '@floating-ui/react-dom-interactions'
import { offset } from '@floating-ui/react'
import './WarningEventsGraph.scss'

2
frontend/src/scenes/plugins/source/types/packages.json
View File

File diff suppressed because one or more lines are too long

6
package.json
View File

@ -60,7 +60,7 @@
},
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@floating-ui/react-dom-interactions": "^0.6.6",
"@floating-ui/react": "^0.16.0",
"@lottiefiles/react-lottie-player": "^3.4.7",
"@medv/finder": "^2.1.0",
"@monaco-editor/react": "^4.1.3",
@ -72,7 +72,7 @@
"@types/md5": "^2.3.0",
"@types/react-input-autosize": "^2.2.1",
"@types/react-textfit": "^1.1.0",
"@types/react-transition-group": "^4.4.4",
"@types/react-transition-group": "^4.4.5",
"@types/react-virtualized": "^9.21.14",
"antd": "^4.17.1",
"antd-dayjs-webpack-plugin": "^1.0.6",
@ -133,7 +133,7 @@
"react-textarea-autosize": "^8.3.3",
"react-textfit": "^1.1.1",
"react-toastify": "^8.2.0",
"react-transition-group": "^4.4.2",
"react-transition-group": "^4.4.5",
"react-virtualized": "^9.22.3",
"require-from-string": "^2.0.2",
"resize-observer-polyfill": "^1.5.1",

57
pnpm-lock.yaml
View File

@ -13,7 +13,7 @@ specifiers:
'@babel/preset-typescript': ^7.16.7
'@babel/runtime': ^7.17.9
'@cypress/webpack-preprocessor': ^5.15.4
'@floating-ui/react-dom-interactions': ^0.6.6
'@floating-ui/react': ^0.16.0
'@hot-loader/react-dom': ^16.14.0
'@lottiefiles/react-lottie-player': ^3.4.7
'@medv/finder': ^2.1.0
@ -59,7 +59,7 @@ specifiers:
'@types/react-resizable': ^1.7.2
'@types/react-syntax-highlighter': ^11.0.4
'@types/react-textfit': ^1.1.0
'@types/react-transition-group': ^4.4.4
'@types/react-transition-group': ^4.4.5
'@types/react-virtualized': ^9.21.14
'@types/testing-library__jest-dom': ^5.14.5
'@types/zxcvbn': ^4.4.0
@ -166,7 +166,7 @@ specifiers:
react-textarea-autosize: ^8.3.3
react-textfit: ^1.1.1
react-toastify: ^8.2.0
react-transition-group: ^4.4.2
react-transition-group: ^4.4.5
react-virtualized: ^9.22.3
require-from-string: ^2.0.2
resize-observer-polyfill: ^1.5.1
@ -191,7 +191,7 @@ specifiers:
dependencies:
'@ant-design/icons': 4.7.0_wcqkhtmu7mswc6yz4uyexck3ty
'@floating-ui/react-dom-interactions': 0.6.6_aim5hlwjfste3kpjq4dvdszx7u
'@floating-ui/react': 0.16.0_aim5hlwjfste3kpjq4dvdszx7u
'@lottiefiles/react-lottie-player': 3.4.7_react@16.14.0
'@medv/finder': 2.1.0
'@monaco-editor/react': 4.4.6_vtctfwvicljpcdx2mjoqbo4tly
@ -1997,41 +1997,38 @@ packages:
- supports-color
dev: true
/@floating-ui/core/0.7.3:
resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==}
/@floating-ui/core/1.2.1:
resolution: {integrity: sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg==}
dev: false
/@floating-ui/dom/0.5.4:
resolution: {integrity: sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==}
/@floating-ui/dom/1.2.1:
resolution: {integrity: sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==}
dependencies:
'@floating-ui/core': 0.7.3
'@floating-ui/core': 1.2.1
dev: false
/@floating-ui/react-dom-interactions/0.6.6_aim5hlwjfste3kpjq4dvdszx7u:
resolution: {integrity: sha512-qnao6UPjSZNHnXrF+u4/n92qVroQkx0Umlhy3Avk1oIebm/5ee6yvDm4xbHob0OjY7ya8WmUnV3rQlPwX3Atwg==}
/@floating-ui/react-dom/1.3.0_wcqkhtmu7mswc6yz4uyexck3ty:
resolution: {integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
dependencies:
'@floating-ui/react-dom': 0.7.2_aim5hlwjfste3kpjq4dvdszx7u
'@floating-ui/dom': 1.2.1
react: 16.14.0
react-dom: 16.14.0_react@16.14.0
dev: false
/@floating-ui/react/0.16.0_aim5hlwjfste3kpjq4dvdszx7u:
resolution: {integrity: sha512-h+69TJSAY2R/k5rw+az56RzzDFc/Tg7EHn/qEgwkIVz56Zg9LlaRMMUvxkcvd+iN3CNFDLtEnDlsXnpshjsRsQ==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
dependencies:
'@floating-ui/react-dom': 1.3.0_wcqkhtmu7mswc6yz4uyexck3ty
aria-hidden: 1.2.1_edij4neeagymnxmr7qklvezyj4
react: 16.14.0
react-dom: 16.14.0_react@16.14.0
use-isomorphic-layout-effect: 1.1.2_edij4neeagymnxmr7qklvezyj4
transitivePeerDependencies:
- '@types/react'
dev: false
/@floating-ui/react-dom/0.7.2_aim5hlwjfste3kpjq4dvdszx7u:
resolution: {integrity: sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
dependencies:
'@floating-ui/dom': 0.5.4
react: 16.14.0
react-dom: 16.14.0_react@16.14.0
use-isomorphic-layout-effect: 1.1.2_edij4neeagymnxmr7qklvezyj4
tabbable: 6.0.1
transitivePeerDependencies:
- '@types/react'
dev: false
@ -4818,7 +4815,7 @@ packages:
/@types/react-transition-group/4.4.5:
resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==}
dependencies:
'@types/react': 16.14.34
'@types/react': 17.0.52
dev: false
/@types/react-virtualized/9.21.21:
@ -17352,6 +17349,10 @@ packages:
resolution: {integrity: sha512-qImOD23aDfnIDNqlG1NOehdB9IYsn1V9oByPjKY1nakv2MQYCEMyX033/q+aEtYCpmYK1cv2+NTmlH+ra6GA5A==}
dev: true
/tabbable/6.0.1:
resolution: {integrity: sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==}
dev: false
/table/6.8.1:
resolution: {integrity: sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==}
engines: {node: '>=10.0.0'}