bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: Fix floating elements position

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-10-04 00:29:50 +02:00
parent 93e0311984
commit 3fdd22e900
7 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/pl-fe/src/components/account-hover-card.tsx
View file

@ -1,4 +1,4 @@
import { shift, useFloating, useTransitionStyles } from '@floating-ui/react'; import { autoUpdate, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
import clsx from 'clsx'; import clsx from 'clsx';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useIntl, FormattedMessage } from 'react-intl'; import { useIntl, FormattedMessage } from 'react-intl';
@ -74,6 +74,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
padding: 8, padding: 8,
}), }),
], ],
whileElementsMounted: autoUpdate,
}); });
const { styles } = useTransitionStyles(context, { const { styles } = useTransitionStyles(context, {

3
packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
View file

@ -1,4 +1,4 @@
import { offset, Placement, useFloating, flip, arrow, shift } from '@floating-ui/react'; import { offset, Placement, useFloating, flip, arrow, shift, autoUpdate } from '@floating-ui/react';
import clsx from 'clsx'; import clsx from 'clsx';
import { supportsPassiveEvents } from 'detect-passive-events'; import { supportsPassiveEvents } from 'detect-passive-events';
import React, { useEffect, useMemo, useRef, useState } from 'react'; import React, { useEffect, useMemo, useRef, useState } from 'react';
@ -207,6 +207,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
element: arrowRef, element: arrowRef,
}), }),
], ],
whileElementsMounted: autoUpdate,
}); });
const handleClick: React.EventHandler< const handleClick: React.EventHandler<

3
packages/pl-fe/src/components/status-hover-card.tsx
View file

@ -1,4 +1,4 @@
import { shift, useFloating, useTransitionStyles } from '@floating-ui/react'; import { autoUpdate, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
import clsx from 'clsx'; import clsx from 'clsx';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
@ -54,6 +54,7 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
padding: 8, padding: 8,
}), }),
], ],
whileElementsMounted: autoUpdate,
}); });
const { styles } = useTransitionStyles(context, { const { styles } = useTransitionStyles(context, {

5
packages/pl-fe/src/components/ui/popover/popover.tsx
View file

@ -1,6 +1,7 @@
import { import {
arrow, arrow,
autoPlacement, autoPlacement,
autoUpdate,
FloatingArrow, FloatingArrow,
offset, offset,
shift, shift,
@ -57,6 +58,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
element: arrowRef, element: arrowRef,
}), }),
], ],
whileElementsMounted: autoUpdate,
}); });
const { isMounted, styles } = useTransitionStyles(context, { const { isMounted, styles } = useTransitionStyles(context, {
@ -94,6 +96,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
<Portal> <Portal>
<div <div
ref={refs.setFloating} ref={refs.setFloating}
className='z-40'
style={{ style={{
position: strategy, position: strategy,
top: y ?? 0, top: y ?? 0,
@ -104,7 +107,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
<div <div
className={ className={
clsx( clsx(
'z-40 overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', 'overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700',
{ 'p-6': !isFlush }, { 'p-6': !isFlush },
) )
} }

2
packages/pl-fe/src/components/ui/tooltip/tooltip.tsx
View file

@ -1,5 +1,6 @@
import { import {
arrow, arrow,
autoUpdate,
FloatingArrow, FloatingArrow,
FloatingPortal, FloatingPortal,
offset, offset,
@ -39,6 +40,7 @@ const Tooltip: React.FC<ITooltip> = (props) => {
element: arrowRef, element: arrowRef,
}), }),
], ],
whileElementsMounted: autoUpdate,
}); });
const hover = useHover(context); const hover = useHover(context);

3
packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
View file

@ -1,4 +1,4 @@
import { useFloating, shift, flip } from '@floating-ui/react'; import { useFloating, shift, flip, autoUpdate } from '@floating-ui/react';
import clsx from 'clsx'; import clsx from 'clsx';
import React, { KeyboardEvent, useState } from 'react'; import React, { KeyboardEvent, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
@ -24,6 +24,7 @@ const EmojiPickerDropdownContainer: React.FC<IEmojiPickerDropdownContainer> = ({
const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({ const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({
middleware: [flip(), shift()], middleware: [flip(), shift()],
whileElementsMounted: autoUpdate,
}); });
useClickOutside(refs, () => { useClickOutside(refs, () => {

3
packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
View file

@ -1,4 +1,4 @@
import { useFloating, shift } from '@floating-ui/react'; import { useFloating, shift, autoUpdate } from '@floating-ui/react';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@ -33,6 +33,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({ const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({
middleware: [shift()], middleware: [shift()],
whileElementsMounted: autoUpdate,
}); });
useClickOutside(refs, () => { useClickOutside(refs, () => {