A JavaScript library to position floating elements and create interactions for them.
MIT License
Bot releases are visible (Hide)
Published by github-actions[bot] almost 2 years ago
fix(getClippingRect): remove regression introduced in 1.0.5
where clipping ancestors for a fixed
floating element would be incorrectly determined — an ancestor would be marked as clipping even if the floating element could appear outside of it (#1972)
fix(platform/getElementRects): ensure that getOffsetParent
and getDimensions
are both referenced from the current platform
object (if adding custom methods) (#1973)
Published by github-actions[bot] almost 2 years ago
body
as a clipping element (#1961)Published by github-actions[bot] almost 2 years ago
middleware
option for conditionals (#1954)Published by github-actions[bot] almost 2 years ago
feat(inner): allow custom scrollRef
(#1957)
The floating element itself was required to be the scrolling container - however, it can be useful to use an inner element as the scrolling container instead.
This allows you to position inner elements relative to the floating element (e.g. scroll arrows that are direct children, not inside the scrolling container) more easily using standard CSS layout instead of needing to take into account the scroll offsets.
fix(FloatingFocusManager): ignore focusout
event for returnFocus
(#1955)
With non-modal focus management, generally it is still desirable to keep returnFocus
enabled for things like dismissal or closing the element via a button. If the user tabs out of the floating element, it will now focus the next/prev natural element in the DOM order, not the reference element.
fix: support falsy values in middleware
option for conditionals (#1954)
Published by github-actions[bot] almost 2 years ago
middleware
option for conditionals (#1954)Published by github-actions[bot] almost 2 years ago
fix: additional cases where clippingAncestors
would return invalid elements (#1956)
fix: rewrite logic to detect clipping element ancestors (#1959)
fix(isContainingBlock): check for backdrop-filter
(#1959)
fix: support falsy values in middleware
option for conditionals (#1954)
Published by github-actions[bot] almost 2 years ago
fix: if the reference
or floating
elements are falsy/null
when computePosition()
is called there's an unhelpful error about getComputedStyle
; there is now a proper error message in dev mode. (#1954)
fix: the middleware
array can now contain false
, null
, or undefined
values. This enables you to pass conditional middleware inline without needing a verbose spread ...(cond ? [m()] : [])
or separate statements like .push()
— at least for TypeScript, as you could already filter it manually externally. (#1954)
middleware: [
shouldFlip && flip(),
arrowElement && arrow({ element: arrowElement }),
]
Published by github-actions[bot] almost 2 years ago
fix: memoize prop getters returned from useInteractions
(#1930)
fix(useDismiss): reset insideReactTree
check when outsidePress
options change (#1931)
fix(useDismiss): attach ancestorScroll
listeners to refs.domReference
and contextElement
(#1931)
Published by github-actions[bot] almost 2 years ago
VirtualElement
's contextElement
if present (#1925)Published by github-actions[bot] about 2 years ago
fix(safePolygon): useHover
open-close loop with overlapping (#1914)
Fixes issue when the floating element overlaps the reference element, it gets stuck in an infinite open-close loop unless adding delay: {close: 1}
as a workaround
Published by github-actions[bot] about 2 years ago
fix: do not treat elements with display: inline
or display: contents
as overflow ancestors (#1847)
fix(autoUpdate): retain ancestorResize
option when enabling animationFrame
option (#1915)
fix(isContainingBlock): position: fixed
positioning when ancestor has contain: paint|layout|strict|content
(plus multiple values) (#1922)
fix: clippingAncestors
rect detection when reference ancestor has position: absolute
, allowing it to escape a clipping ancestor (e.g. commonly encountered with hide()
middleware) (#1923)
fix(isContainingBlock): position: fixed
positioning when ancestor has multiple will-change
values when one of them will create a containing block (#1922)
Published by github-actions[bot] about 2 years ago
perf: revert custom composedOffsetParent
polyfill (#1894)
Unfortunately, the platform provides no composedOffsetParent()
method and this internal polyfill was causing a performance degradation. As a result, it is now opt-in.
Ideally, the DOM layout where the issue arises should be avoided to begin with. However, if it can't be avoided, the default platform
object is now exported so you can spread in all the other methods then write your own single getOffsetParent
hook that has the polyfill. You might want to add your own custom flags to turn it on/off when it's considered acceptable in a given scenario perf-wise.
Published by github-actions[bot] about 2 years ago
This release introduces some breaking changes to allow for better configuration and reduce confusion during usage.
Note:
v0.10.0
was skipped as it had previously been released and deprecated a couple of months ago.
🚨 BREAKING(FloatingFocusManager): remove preventTabbing
prop (#1891)
Due to confusion on how this prop should be used, it has been removed. To replicate this behavior:
tabIndex={-1}
on all tabbable elements inside the floating element.initialFocus={-1}
or initialFocus={selectedIndex}
if the selectedIndex
should initially be focused (<Select />
CodeSandbox component).returnFocus={!nested}
for nested submenus (<Menu />
CodeSandbox component).🚨 BREAKING(useDismiss): change outsidePointerDown
and referencePointerDown
options to outsidePress
and referencePress
, respectively. (#1881)
You can now configure the events for these, so the pointerDown
terminology has been removed.
Two more options have been added to enable this:
outsidePressEvent: 'pointerdown' | 'mousedown' | 'click'
referencePressEvent: 'pointerdown' | 'mousedown' | 'click'
pointerdown
will be eager across both mouse and touch input. mousedown
will be eager with mouse input but lazy with touch input. click
will be lazy across both mouse and touch input.
🚨 BREAKING(useClick): change pointerDown
to event: 'click' | 'mousedown'
(#1881)
pointerdown
event was discovered to be unsuitable for touch devices, and was changed to mousedown
already in an earlier version, so it was not matching the actual configuration.
Published by github-actions[bot] about 2 years ago
fix(useInteractions): prevent breaking props that start with on
passed through a prop getter when not using TypeScript (#1862)
fix(FloatingFocusManager): in modal=false
mode, prevent click toggling from failing in Safari (#1863)
fix(useClick): prevent incorrectly identifying button targets in keyboard event handlers (#1866)
https://codesandbox.io/s/serene-noether-bqk39m?file=/src/App.tsx
feat(useClick): add keyboardHandlers
option (#1861)
fix: position in Safari when pinch-zooming using fixed strategy
fix: avoid Chrome DevTools warning about userAgent usage
Published by github-actions[bot] about 2 years ago
fix: add useEvent
hook internally. Passing an inlined/unstable onOpenChange
callback will no longer break memoization of the context
object (#1848)
fix(useTypeahead): correctly scope typeahead for non-portaled nested floating elements (#1849)
fix(useHover): allow reference element to be conditionally rendered (#1850)
fix(useDismiss): prevent closing parent upon pointerdown
inside of a portaled child (#1852)
For example, a Menu inside of a Dialog, that is portaled outside of it
feat(safePolygon): add blockPointerEvents
option as a cleaner solution to the workaround to disable the default pointer-events
blocking (#1853)
fix(useTypeahead): prevent failing matches if caps lock key is on (#1849)
Published by github-actions[bot] about 2 years ago
Shadow DOM fixes
fix: incorrect position when starting offset parent element is nested inside shadow DOM (#1827)
fix: add composedOffsetParent
internal polyfill for shadow DOM offsetParents (#1835)
Published by github-actions[bot] about 2 years ago
SideObject
for detectOverflow
padding (#1846)Published by github-actions[bot] about 2 years ago
fix(useDismiss): check if event.target
is scrollable (#1822)
fix(useHover): add once
to mousemove listener back (#1823)
Prevent continually clearing delay
s
fix(useHover): move: false
failing to open on Firefox for first open (#1824)
fix(useFocus): improve event blocking (#1825)
Published by github-actions[bot] about 2 years ago
feat(useListNavigation): grid navigation (#1793)
By specifying cols: number
in the options to determine how many columns the grid has, the navigation will enter grid mode.
Use orientation: 'horizontal'
for listbox-like grids, where pressing the ArrowRight/ArrowLeft keys can move to the next or previous row (e.g. datepicker, emoji picker, and so on).
Use orientation: 'both'
for true grids, where focus is locked to the current row when pressing ArrowRight/ArrowLeft. ArrowDown/ArrowUp must be used to move to a new row.
feat(useHover): move
prop (#1817)
feat(useRole): allow alertdialog
(#1819)
fix(useListNavigation): disabledIndices
is no longer conditional based on openOnArrowKeyDown
. (#1793)
For Windows-style select menus, where pressing the up/down arrow keys navigates through the items without opening the menu, specify disabledIndices: []
as an option explicitly.
fix(useTypeahead): improve ignore logic (ignore modifier keys) (#1818)
fix(useDismiss): prevent closing floating element on pointerdown
when clicking scrollbar (#1820)
delay
prop from re-running the event listeners registration effect (#1816)