A JavaScript library to position floating elements and create interactions for them.
MIT License
Bot releases are visible (Hide)
Published by github-actions[bot] over 1 year ago
centerOffset
value when internal shifting is active (#2382)Published by github-actions[bot] over 1 year ago
Options
types (#2359)Published by github-actions[bot] over 1 year ago
fix: pass event
param as second argument to onOpenChange
(#2362)
fix(FloatingPortal): give root
prop priority and allow refs (#2363)
Published by github-actions[bot] over 1 year ago
core
/dom
1.3.0 (#2359)Published by github-actions[bot] over 1 year ago
feat: allow function types for all middleware options, including detectOverflow
, to allow derivation from state (#2359)
// Options
shift({mainAxis: true});
// Derived from state
shift((state) => ({mainAxis: state.rects.reference.width > 10}));
refactor(types): exported middleware Options
types (#2359)
Options
objects now include DetectOverflowOptions
in them, and are auto-Partial
where necessary. The types do not include the function type in them.Published by github-actions[bot] over 1 year ago
feat: allow function types for all middleware options, including detectOverflow
, to allow derivation from state (#2359)
// Options
shift({mainAxis: true});
// Derived from state
shift((state) => ({mainAxis: state.rects.reference.width > 10}));
refactor(types): exported middleware Options
types (#2359)
Options
objects now include DetectOverflowOptions
in them, and are auto-Partial
where necessary. The types do not include the function type in them.padding
option value does not cause incorrect centering (#2360)Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
left
/right
placements when stroke is specified (#2346)Published by github-actions[bot] over 1 year ago
fix: incorrect position of fixed
floating elements if container specifies filter
in latest Chromium versions (#2334)
fix: incorrect position of fixed
floating elements in Safari inside certain containing blocks (#2336)
Published by github-actions[bot] over 1 year ago
fix(safePolygon): measure offset bridge from smaller element (#2327)
fix: UMD build name (FloatingUIReact
, not FloatingUIReactDOM
) (#2325)
fix(FloatingArrow): render null
if floating element is not available (#2326)
Published by github-actions[bot] over 1 year ago
NaN
measurements in testing environments (#2326)Published by github-actions[bot] over 1 year ago
Default x
and y
coordinates to 0
instead of null
(#2300)
isPositioned
lets you know if the floating element has been positioned.
feat: floatingStyles
object (#2300)
Pre-configured positioning styles for the majority of cases:
const {floatingStyles} = useFloating(reference, floating);
<div ref="floating" :style="floatingStyles" />
Published by github-actions[bot] over 1 year ago
feat: floatingStyles
object (#2300)
Pre-configured positioning styles for the majority of cases:
const {refs, floatingStyles} = useFloating();
return <div ref={refs.setFloating} style={floatingStyles} />;
feat: external element synchronization in the hook (#2300)
Avoid using layout effects:
const {refs} = useFloating({
elements: {
// Any can be specified optionally
reference: referenceElement,
floating: floatingElement,
offsetParent: offsetParentElement,
}
});
// refs.setReference, refs.setFloating, refs.setOffsetParent can be mix and matched
Default x
and y
coordinates to 0
instead of null
(#2300)
Remove deprecated top-level reference
, floating
, offsetParent
ref setters (#2300)
These are in the refs
object:
reference
-> refs.setReference
floating
-> refs.setFloating
offsetParent
-> refs.setOffsetParent
Published by github-actions[bot] over 1 year ago
@floating-ui/react-dom
to v2 (#2300)View CHANGELOG for breaking changes
fix(useTypeahead): opening when typing a space on non-button reference with useClick
, and timing of onTypingChange
callback setting to false
(#2305)
fix(FloatingArrow): add ability to override internal style
s (#2308)
fix(FloatingFocusManager): better handle subtree changes (#2305)
Published by github-actions[bot] over 1 year ago
This release aims to simplify the API and remove some deprecated properties. If you've been using the refs.set*
functions since their addition in January (1.2.0
), then you can freely upgrade without changing any of your code.
Default x
and y
coordinates to 0
instead of null
(#2300)
isPositioned
lets you know if the floating element has been positioned.
Remove deprecated top-level reference
and floating
ref setters (#2300)
These are in the refs
object:
reference
-> refs.setReference
floating
-> refs.setFloating
whileElementsMounted
type requires cleanup function (#2300)
feat: floatingStyles
object (#2300)
Pre-configured positioning styles for the majority of cases:
const {refs, floatingStyles} = useFloating();
return <div ref={refs.setFloating} style={floatingStyles} />;
feat: external element synchronization in the hook (#2300)
Avoid using layout effects:
const {refs} = useFloating({
elements: {
// Either can be specified optionally
reference: referenceElement,
floating: floatingElement,
},
});
// refs.setReference / refs.setFloating can be mix and matched
null
for arrow
's element
option (#2300)Published by github-actions[bot] over 1 year ago
fix(getClippingRect): incorrect clipping rect calculation with position: fixed
ancestors (#2291)
fix(autoUpdate): prevent animationFrame: true
from disabling visualViewport scrolling updates (#2303)
Published by github-actions[bot] over 1 year ago
fix(FloatingList): properly update when list contains only one item (#2294)
fix(FloatingFocusManager): separate initialFocus and returnFocus effects (#2295)
Wait for unmount transition before returning focus
fix(FloatingFocusManager): ignore outside guards while transitioning out (#2295)
Published by github-actions[bot] over 1 year ago
feat(safePolygon): replace restMs
option with requireIntent
boolean option (#2284)
When multiple reference elements next to each other have hoverable floating elements, requireIntent
(true
by default) ensures the triangle polygon does not block hover events too aggressively compared to restMs
by calculating the cursor speed to determine intent.
feat: FloatingList
and useListItem
exports (#2269)
This enables easy creation of composable children APIs without needing to map children
and passing an index
as a prop — including the ability to nest items in another tag or component.
fix(useClick): ignore Space keyup
if Space keydown
on same element did not precede it (#2277)
fix(useDelayGroupContext): isInstantPhase
bool sometimes being incorrectly false
(#2286)
fix(FloatingPortal): adjust cleanup strategy to better work with React.StrictMode
and conditional rendering (#2286)
Published by github-actions[bot] over 1 year ago
position: fixed
clipping ancestors (#2280)Published by github-actions[bot] over 1 year ago
available
size if floating element resized using a center-aligned placement with shift()
in use (#2281)