floating-ui

Bug Fixes

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

Bug Fixes

• fix(useHover): check pointerType for contains check (#2255)

Bug Fixes

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

Bug Fixes

• fix: remove DEV warnings (process.env) (#2251)

Bug Fixes

• fix: Use correct window to get the devicePixelRatio #2229

Refactors

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

Bug Fixes

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

Bug Fixes

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

Bug Fixes

• fix: remove timeouts for focus guards on Safari (#2227)

Bug Fixes

• fix(inline): correct merging of rects by line (#2226)

New Features

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

Refactors

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

  ⚠️ strokeWidths 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)

Bug Fixes

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

  • Reset timeout from a non-match
  • Don't require a role be set and stop propagation/prevent default if typeahead is in use

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

Bug Fixes

• fix(getDimensions): measure <svg> arrows with CSS sizes instead of getBoundingClientRect() to avoid reading transformations (#2223)

Bug Fixes

• fix(inline): merge rects on the same line (y coord) (#2220)

Bug Fixes

• fix(FloatingArrow): ignore SSR hydration warnings (#2198)

Bug Fixes

• fix(getOffsetParent): always return window for SVG elements (#2198)

New Features

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

Bug Fixes

• fix(arrow): correctly take into account floating element border for <svg> arrows (#2195)

Bug Fixes

• fix(arrow): correctly take into account floating element border for <svg> arrows (#2195)

Bug Fixes

• fix(types): re-export middleware options types (#2175)

Bug Fixes

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

New Features

• feat: allow platform object to be passed to the useFloating hook (#2176)

Bug Fixes

• fix(types): re-export middleware options types (#2175)

• fix(types): add @deprecation notice to non-ref nested element setters (#2175)