floating-ui

Bug Fixes

• 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)

Bug Fixes

• fix(getClippingRect): ignore body as a clipping element (#1961)

Bug Fixes

• fix: support falsy values in middleware option for conditionals (#1954)

New Features

• 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.

Bug Fixes

• 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)

Bug Fixes

• fix: support falsy values in middleware option for conditionals (#1954)

Bug Fixes

• 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)

Bug Fixes

• 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 }),
  ]
  

Bug Fixes

• 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)

Bug Fixes

• fix(autoUpdate): add event listeners to a VirtualElement's contextElement if present (#1925)

Bug Fixes

• 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

Bug Fixes

• 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)

Performance Improvements

• 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.

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.

Refactors

• 🚨 BREAKING(FloatingFocusManager): remove preventTabbing prop (#1891)

  Due to confusion on how this prop should be used, it has been removed. To replicate this behavior:

  • Set tabIndex={-1} on all tabbable elements inside the floating element.
  • Set initialFocus={-1} or initialFocus={selectedIndex} if the selectedIndex should initially be focused (<Select /> CodeSandbox component).
  • Set 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.

Bug Fixes

• 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)

Bug Fixes

• fix: position in Safari when pinch-zooming using fixed strategy

  • Adapted from https://github.com/floating-ui https://github.com/floating-ui/floating-ui/issues/1121

• fix: avoid Chrome DevTools warning about userAgent usage

Bug Fixes

• 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)

Shadow DOM fixes

Bug 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)

Bug Fixes

• fix(types): allow Partial SideObject for detectOverflow padding (#1846)

Bug Fixes

• fix(useDismiss): check if event.target is scrollable (#1822)

• fix(useHover): add once to mousemove listener back (#1823)

  Prevent continually clearing delays

• fix(useHover): move: false failing to open on Firefox for first open (#1824)

• fix(useFocus): improve event blocking (#1825)

New Features

• 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)

Refactors

• 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.

Bug Fixes

• fix(useTypeahead): improve ignore logic (ignore modifier keys) (#1818)

• fix(useDismiss): prevent closing floating element on pointerdown when clicking scrollbar (#1820)

Performance Improvements

• perf(useHover): prevent non-primitive delay prop from re-running the event listeners registration effect (#1816)