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
fix(FloatingFocusManager): respect autoFocus
prop on children (#2264)
fix(FloatingFocusManager): wait for tree nodes context to be updated (#2265)
fix(FloatingFocusManager): wait for microtask before selecting tabbable elements for initial focus (#2270)
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
fix(useInteractions): merging function props that return values (#2244)
fix(useClientPoint): keep anchored to reference on autoUpdate
in applicable scenarios (#2249)
fix(useHover): touch interactivity of floating element without safePolygon
(#2253)
fix(useTransitionStyles): reduce initial re-renders (#2254)
Published by github-actions[bot] over 1 year ago
process.env
) (#2251)Published by FezVrasta over 1 year ago
Published by github-actions[bot] over 1 year ago
refactor(FloatingPortal): preserve subroot structure (#2240)
When specifying a custom root
or id
, the floating element is always injected into a new subroot inside of it. The subroot has a unique id to ensure aria-owns
is referenced correctly when multiple floating elements are rendered at the same time. This makes portal container behavior consistent whether props are specified or not.
If you don't want the subroot node always in the DOM, the library now supports conditionally rendering FloatingPortal
based on the open/mounted state.
refactor(useFloatingPortalNode): remove enabled
prop (#2240)
fix(useListNavigation): allow scheduled/async list population on arrow keydown open (#2236)
fix(useDismiss): close when outside press dismissing on an inline element in Firefox (#2238)
fix: allow FloatingPortal
to be conditionally rendered based on open state (#2239)
Published by github-actions[bot] over 1 year ago
fix: don't skip initial ResizeObserver
callback update in autoUpdate
(#2232)
This runs two updates on mount instead of one when elementResize
is enabled. When dealing with frameworks that use inside-out (down-up) initialization of effects/rendering, like React, children are positioned before their parent positioned which meant they were positioned relative to the (0, 0) coordinates, which is incorrect. This problem only presents itself when the child and parent both try to position themselves at the same time on mount — for example, opening a menu and its submenu simultaneously.
By not skipping this update, this issue isn't present since children reposition themselves after their parents have been positioned.
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
feat: useClientPoint
interaction hook (#2179)
This hook provides the ability to position the floating element relative to a client "point" reference. By default, "client" means mouse event coordinates since they possess clientX/Y
values, so it follows the cursor when open. You can also use explicit x
and y
client coordinates.
If you've used Tippy.js, it provides similar functionality to followCursor
while being a bit more general.
const clientPoint = useClientPoint(context, {
enabled?: boolean,
// Restrict the client point to an axis, use the DOM
// reference as the other axis
axis?: 'both' | 'x' | 'y',
// Position explicitly at these client coordinates
x?: number | null,
y?: number | null,
});
refactor(useDismiss): default bubbles.escapeKey
option to false
, and allow bubbling prevention to work without using FloatingTree
(#2207)
refactor(useTypeahead): reduce default resetMs
to 750
from 1000
(#2213)
refactor(FloatingArrow): internally double strokeWidth
so it matches borderWidth
values (#2223)
⚠️ strokeWidth
s larger than the floating element's borderWidth
are not supported.
refactor(useTypeahead): add onTypingChange
callback to allow setting a local ref and deprecate context.dataRef.current.typing
value (#2213)
fix(useFloating): return extended elements
from hook (#2209)
fix(useListNavigation): use mounted rather than open state to focus parent floating in tree (#2210)
fix(FloatingFocusManager): make initialFocus
and returnFocus
non-reactive (#2211)
fix: share floatingId
via context
object (#2203)
fix(FloatingFocusManager): reset preventing returnFocus
with closeOnFocusOut={false}
when tabbing out then back in (#2214)
fix(FloatingFocusManager): mutate internal preventReturnFocusRef instead of returnFocusRef (#2215)
fix(useTypeahead): improve logic (#2213)
role
be set and stop propagation/prevent default if typeahead is in usefix(FloatingFocusManager): ensure returnFocus
of a nested floating element can return to a root reference if it wasn't focused upon open (such as with a pointer) (#2221)
fix(FloatingArrow): prevent transparency overlap if the floating element border and stroke are both partially transparent (#2223)
fix(FloatingFocusManager): ensure initialFocus
works if re-opening floating element while it was transitioning out (#2221)
fix(FloatingArrow): ensure correct vertical size with larger stroke widths (#2223)
fix(FloatingArrow): allow height
> width
(#2223)
Published by github-actions[bot] over 1 year ago
<svg>
arrows with CSS sizes instead of getBoundingClientRect()
to avoid reading transformations (#2223)Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
window
for SVG elements (#2198)Published by github-actions[bot] over 1 year ago
feat: FloatingArrow
component (#2195)
Provides the ability to render a customizable <svg>
arrow element within a floating element that is automatically positioned, without needing to setup complex styles.
Published by github-actions[bot] over 1 year ago
border
for <svg>
arrows (#2195)Published by github-actions[bot] over 1 year ago
border
for <svg>
arrows (#2195)Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
fix(useTypeahead): allow typeahead when currentTarget
contains target
(#2173)
fix(types): re-export middleware options types (#2175)
fix(useTransitionStyles): apply initial styles in unmounted
status (#2177)
This allows a transition-delay
prop style to work correctly on the first/initial render.
fix(useHover): ensure scrolling away from reference after hovering it closes floating element when safePolygon
is being used with a close delay
and the cursor did not move (#2178)
fix(useHover): prevent floating element from closing when it overlaps the reference element when using safePolygon
(#2180)
fix: allow platform
object to be passed to the useFloating
hook (#2176)
fix(types): add @deprecation
notice to non-ref nested element setters (#2175)
Published by github-actions[bot] over 1 year ago
platform
object to be passed to the useFloating
hook (#2176)fix(types): re-export middleware options types (#2175)
fix(types): add @deprecation
notice to non-ref nested element setters (#2175)