mirror of
https://github.com/langgenius/dify.git
synced 2026-05-04 01:18:05 +08:00
fix: remove portal-to-follow-elem-plus shim
This commit is contained in:
yyh
@ -1,16 +0,0 @@
|
||||
'use client'
|
||||
|
||||
/**
|
||||
* Re-exports the legacy portal / floating positioning API without using the
|
||||
* restricted `@/app/components/base/portal-to-follow-elem` import path at call sites.
|
||||
* Prefer migrating to `@/app/components/base/ui/*` overlays when touching UI.
|
||||
*/
|
||||
export {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
usePortalToFollowElem,
|
||||
usePortalToFollowElemContext,
|
||||
} from '../portal-to-follow-elem'
|
||||
|
||||
export type { PortalToFollowElemOptions } from '../portal-to-follow-elem'
|
||||
@ -1,9 +0,0 @@
|
||||
/**
|
||||
* Re-exports context-menu floating hook without importing from the restricted
|
||||
* `portal-to-follow-elem/use-context-menu-floating` path at call sites.
|
||||
*/
|
||||
export {
|
||||
type Position,
|
||||
useContextMenuFloating,
|
||||
type UseContextMenuFloatingOptions,
|
||||
} from '../portal-to-follow-elem/use-context-menu-floating'
|
||||
@ -1,183 +0,0 @@
|
||||
import { FloatingPortal } from '@floating-ui/react'
|
||||
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
|
||||
import * as React from 'react'
|
||||
import { useContextMenuFloating } from './use-context-menu-floating'
|
||||
|
||||
afterEach(cleanup)
|
||||
|
||||
function TestContextMenu({
|
||||
open,
|
||||
onOpenChange,
|
||||
position,
|
||||
placement,
|
||||
offset: offsetValue,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
position: { x: number, y: number }
|
||||
placement?: Parameters<typeof useContextMenuFloating>[0]['placement']
|
||||
offset?: Parameters<typeof useContextMenuFloating>[0]['offset']
|
||||
}) {
|
||||
const { refs, floatingStyles, getFloatingProps, isPositioned } = useContextMenuFloating({
|
||||
open,
|
||||
onOpenChange,
|
||||
position,
|
||||
placement,
|
||||
offset: offsetValue,
|
||||
})
|
||||
|
||||
if (!open)
|
||||
return null
|
||||
|
||||
return (
|
||||
<FloatingPortal>
|
||||
<div
|
||||
ref={refs.setFloating}
|
||||
style={{
|
||||
...floatingStyles,
|
||||
visibility: isPositioned ? 'visible' : 'hidden',
|
||||
}}
|
||||
{...getFloatingProps()}
|
||||
data-testid="context-menu"
|
||||
>
|
||||
<button onClick={() => onOpenChange(false)}>Action</button>
|
||||
</div>
|
||||
</FloatingPortal>
|
||||
)
|
||||
}
|
||||
|
||||
describe('useContextMenuFloating', () => {
|
||||
it('should render menu when open', () => {
|
||||
render(
|
||||
<TestContextMenu
|
||||
open={true}
|
||||
onOpenChange={vi.fn()}
|
||||
position={{ x: 100, y: 200 }}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByTestId('context-menu')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should not render menu when closed', () => {
|
||||
render(
|
||||
<TestContextMenu
|
||||
open={false}
|
||||
onOpenChange={vi.fn()}
|
||||
position={{ x: 100, y: 200 }}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.queryByTestId('context-menu')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply ARIA role="menu" to floating element', () => {
|
||||
render(
|
||||
<TestContextMenu
|
||||
open={true}
|
||||
onOpenChange={vi.fn()}
|
||||
position={{ x: 100, y: 200 }}
|
||||
/>,
|
||||
)
|
||||
|
||||
const menu = screen.getByTestId('context-menu')
|
||||
expect(menu).toHaveAttribute('role', 'menu')
|
||||
})
|
||||
|
||||
it('should call onOpenChange(false) on Escape key', () => {
|
||||
const handleOpenChange = vi.fn()
|
||||
|
||||
render(
|
||||
<TestContextMenu
|
||||
open={true}
|
||||
onOpenChange={handleOpenChange}
|
||||
position={{ x: 100, y: 200 }}
|
||||
/>,
|
||||
)
|
||||
|
||||
fireEvent.keyDown(document, { key: 'Escape' })
|
||||
expect(handleOpenChange).toHaveBeenCalled()
|
||||
expect(handleOpenChange.mock.calls[0][0]).toBe(false)
|
||||
})
|
||||
|
||||
it('should call onOpenChange(false) on outside click', () => {
|
||||
const handleOpenChange = vi.fn()
|
||||
|
||||
render(
|
||||
<div>
|
||||
<div data-testid="outside">Outside</div>
|
||||
<TestContextMenu
|
||||
open={true}
|
||||
onOpenChange={handleOpenChange}
|
||||
position={{ x: 100, y: 200 }}
|
||||
/>
|
||||
</div>,
|
||||
)
|
||||
|
||||
fireEvent.pointerDown(screen.getByTestId('outside'))
|
||||
expect(handleOpenChange).toHaveBeenCalled()
|
||||
expect(handleOpenChange.mock.calls[0][0]).toBe(false)
|
||||
})
|
||||
|
||||
it('should accept custom placement', () => {
|
||||
render(
|
||||
<TestContextMenu
|
||||
open={true}
|
||||
onOpenChange={vi.fn()}
|
||||
position={{ x: 100, y: 200 }}
|
||||
placement="top-end"
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByTestId('context-menu')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should accept custom offset', () => {
|
||||
render(
|
||||
<TestContextMenu
|
||||
open={true}
|
||||
onOpenChange={vi.fn()}
|
||||
position={{ x: 100, y: 200 }}
|
||||
offset={8}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByTestId('context-menu')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should accept offset as object', () => {
|
||||
render(
|
||||
<TestContextMenu
|
||||
open={true}
|
||||
onOpenChange={vi.fn()}
|
||||
position={{ x: 100, y: 200 }}
|
||||
offset={{ mainAxis: 4, crossAxis: 2 }}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByTestId('context-menu')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should update position when coordinates change', () => {
|
||||
const { rerender } = render(
|
||||
<TestContextMenu
|
||||
open={true}
|
||||
onOpenChange={vi.fn()}
|
||||
position={{ x: 100, y: 200 }}
|
||||
/>,
|
||||
)
|
||||
|
||||
const menu = screen.getByTestId('context-menu')
|
||||
expect(menu).toBeInTheDocument()
|
||||
|
||||
rerender(
|
||||
<TestContextMenu
|
||||
open={true}
|
||||
onOpenChange={vi.fn()}
|
||||
position={{ x: 300, y: 400 }}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByTestId('context-menu')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@ -1,92 +0,0 @@
|
||||
import type { OffsetOptions, Placement } from '@floating-ui/react'
|
||||
import {
|
||||
flip,
|
||||
offset,
|
||||
shift,
|
||||
useDismiss,
|
||||
useFloating,
|
||||
useInteractions,
|
||||
useRole,
|
||||
} from '@floating-ui/react'
|
||||
import { useEffect, useMemo, useRef } from 'react'
|
||||
|
||||
export type Position = {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
export type UseContextMenuFloatingOptions = {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
position: Position
|
||||
placement?: Placement
|
||||
offset?: number | OffsetOptions
|
||||
}
|
||||
|
||||
export function useContextMenuFloating({
|
||||
open,
|
||||
onOpenChange,
|
||||
position,
|
||||
placement = 'bottom-start',
|
||||
offset: offsetValue = 0,
|
||||
}: UseContextMenuFloatingOptions) {
|
||||
const onOpenChangeRef = useRef(onOpenChange)
|
||||
onOpenChangeRef.current = onOpenChange
|
||||
|
||||
const data = useFloating({
|
||||
placement,
|
||||
open,
|
||||
onOpenChange,
|
||||
middleware: [
|
||||
offset(offsetValue),
|
||||
flip({
|
||||
crossAxis: placement.includes('-'),
|
||||
fallbackAxisSideDirection: 'start',
|
||||
padding: 5,
|
||||
}),
|
||||
shift({ padding: 5 }),
|
||||
],
|
||||
})
|
||||
|
||||
const { context, refs, floatingStyles, isPositioned } = data
|
||||
|
||||
useEffect(() => {
|
||||
refs.setPositionReference({
|
||||
getBoundingClientRect: () => ({
|
||||
width: 0,
|
||||
height: 0,
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
top: position.y,
|
||||
left: position.x,
|
||||
right: position.x,
|
||||
bottom: position.y,
|
||||
}),
|
||||
})
|
||||
}, [position.x, position.y, refs])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open)
|
||||
return
|
||||
const handler = () => onOpenChangeRef.current(false)
|
||||
window.addEventListener('scroll', handler, { capture: true, passive: true })
|
||||
return () => window.removeEventListener('scroll', handler, { capture: true })
|
||||
}, [open])
|
||||
|
||||
const dismiss = useDismiss(context)
|
||||
const role = useRole(context, { role: 'menu' })
|
||||
const interactions = useInteractions([dismiss, role])
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
refs: {
|
||||
setFloating: refs.setFloating,
|
||||
},
|
||||
floatingStyles,
|
||||
getFloatingProps: interactions.getFloatingProps,
|
||||
context,
|
||||
isPositioned,
|
||||
}),
|
||||
[context, floatingStyles, isPositioned, refs.setFloating, interactions.getFloatingProps],
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user