floating-ui

Bug Fixes

• fix(arrow): report correct centerOffset value when internal shifting is active (#2382)

Bug Fixes

• fix: re-export middleware Options types (#2359)

Bug Fixes

• fix: pass event param as second argument to onOpenChange (#2362)

• fix(FloatingPortal): give root prop priority and allow refs (#2363)

Bug Fixes

• fix: adjust types for new function options feature in core/dom 1.3.0 (#2359)

New Features

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

Refactors

• refactor(types): exported middleware Options types (#2359)

  • The Options objects now include DetectOverflowOptions in them, and are auto-Partial where necessary. The types do not include the function type in them.

New Features

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

Refactors

• refactor(types): exported middleware Options types (#2359)

  • The Options objects now include DetectOverflowOptions in them, and are auto-Partial where necessary. The types do not include the function type in them.

Bug Fixes

• fix(arrow): ensure large padding option value does not cause incorrect centering (#2360)

Bug Fixes

• fix: package.json dependency metadata (#2347)

Bug Fixes

• fix(FloatingArrow): off-center offset for left/right placements when stroke is specified (#2346)

Bug Fixes

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

Bug Fixes

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

Bug Fixes

• fix: SVG elements returning NaN measurements in testing environments (#2326)

Breaking Changes

• Default x and y coordinates to 0 instead of null (#2300)

  isPositioned lets you know if the floating element has been positioned.

New Features

• feat: floatingStyles object (#2300)

  Pre-configured positioning styles for the majority of cases:

  const {floatingStyles} = useFloating(reference, floating);
  

  <div ref="floating" :style="floatingStyles" />
  

New Features

• 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
  

Refactors

• 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

Refactors

• Bump @floating-ui/react-dom to v2 (#2300)

View CHANGELOG for breaking changes

Bug Fixes

• 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 styles (#2308)

• fix(FloatingFocusManager): better handle subtree changes (#2305)

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.

Breaking Changes

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

New Features

• 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
  

Bug Fixes

• fix(types): allow null for arrow's element option (#2300)

Bug Fixes

• fix(getClippingRect): incorrect clipping rect calculation with position: fixed ancestors (#2291)

• fix(autoUpdate): prevent animationFrame: true from disabling visualViewport scrolling updates (#2303)

Bug Fixes

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

New Features

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

Bug Fixes

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

Bug Fixes

• fix(getClippingRect): incorrect calculation of position: fixed clipping ancestors (#2280)

Bug Fixes

• fix(size): unresponsive available size if floating element resized using a center-aligned placement with shift() in use (#2281)