fix: Clean up whitespace in PortalToFollowElem component tests and improve controlled state handling

This commit is contained in:
twwu 2025-09-17 16:48:17 +08:00
parent eaf6a29efa
commit ba8bcf3a22
2 changed files with 17 additions and 16 deletions

View File

@ -14,7 +14,7 @@ describe('PortalToFollowElem', () => {
expect(() => {
render(
<PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>,
<PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>,
)
}).toThrow('PortalToFollowElem components must be wrapped in <PortalToFollowElem />')
@ -25,7 +25,7 @@ describe('PortalToFollowElem', () => {
expect(() => {
render(
<PortalToFollowElem>
<PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
<PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
</PortalToFollowElem>,
)
}).not.toThrow()
@ -36,7 +36,7 @@ describe('PortalToFollowElem', () => {
test('should render children correctly', () => {
const { getByText } = render(
<PortalToFollowElem>
<PortalToFollowElemTrigger>Trigger Text </PortalToFollowElemTrigger>
<PortalToFollowElemTrigger>Trigger Text</PortalToFollowElemTrigger>
</PortalToFollowElem>,
)
expect(getByText('Trigger Text')).toBeInTheDocument()
@ -46,7 +46,7 @@ describe('PortalToFollowElem', () => {
const { getByRole } = render(
<PortalToFollowElem>
<PortalToFollowElemTrigger asChild >
<button>Button Trigger </button>
<button>Button Trigger</button>
</PortalToFollowElemTrigger>
</PortalToFollowElem>,
)
@ -59,8 +59,8 @@ describe('PortalToFollowElem', () => {
test('should not render content when closed', () => {
const { queryByText } = render(
<PortalToFollowElem open={false} >
<PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
<PortalToFollowElemContent > Popup Content </PortalToFollowElemContent>
<PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
<PortalToFollowElemContent>Popup Content</PortalToFollowElemContent>
</PortalToFollowElem>,
)
@ -71,7 +71,7 @@ describe('PortalToFollowElem', () => {
const { getByText } = render(
<PortalToFollowElem open={true} >
<PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
<PortalToFollowElemContent > Popup Content </PortalToFollowElemContent>
<PortalToFollowElemContent>Popup Content</PortalToFollowElemContent>
</PortalToFollowElem>,
)
@ -85,8 +85,8 @@ describe('PortalToFollowElem', () => {
const { getByText } = render(
<PortalToFollowElem onOpenChange={handleOpenChange} >
<PortalToFollowElemTrigger>Hover Me </PortalToFollowElemTrigger>
<PortalToFollowElemContent > Content </PortalToFollowElemContent>
<PortalToFollowElemTrigger>Hover Me</PortalToFollowElemTrigger>
<PortalToFollowElemContent>Content</PortalToFollowElemContent>
</PortalToFollowElem>,
)
@ -104,8 +104,8 @@ describe('PortalToFollowElem', () => {
const useFloatingMock = jest.spyOn(require('@floating-ui/react'), 'useFloating')
render(
<PortalToFollowElem placement="top-start" >
<PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
<PortalToFollowElem placement='top-start' >
<PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
</PortalToFollowElem>,
)

View File

@ -41,6 +41,7 @@ export function usePortalToFollowElem({
}: PortalToFollowElemOptions = {}) {
const [localOpen, setLocalOpen] = useState(false)
const open = controlledOpen ?? localOpen
const isControlled = controlledOpen !== undefined
const handleOpenChange = useCallback((newOpen: boolean) => {
setLocalOpen(newOpen)
setControlledOpen?.(newOpen)
@ -72,10 +73,10 @@ export function usePortalToFollowElem({
const hover = useHover(context, {
move: false,
enabled: open == null,
enabled: !isControlled,
})
const focus = useFocus(context, {
enabled: open == null,
enabled: !isControlled,
})
const dismiss = useDismiss(context)
const role = useRole(context, { role: 'tooltip' })
@ -85,10 +86,10 @@ export function usePortalToFollowElem({
const interactionsArray = useMemo(() => {
const result = [hover, focus, dismiss, role]
if (!setControlledOpen)
if (!isControlled)
result.push(click)
return result
}, [setControlledOpen, hover, focus, dismiss, role, click])
}, [isControlled, hover, focus, dismiss, role, click])
const interactions = useInteractions(interactionsArray)
return React.useMemo(
@ -148,7 +149,7 @@ export const PortalToFollowElemTrigger = (
context.getReferenceProps({
ref,
...props,
...children.props,
...(children.props || {}),
'data-state': context.open ? 'open' : 'closed',
} as React.HTMLProps<HTMLElement>),
)