@floating-ui/react-dom

Patch Changes

• Support explicit undefined for optional properties with exactOptionalPropertyTypes

Patch Changes

• react: Avoid duplicate options key warning in reactive middleware wrappers

Minor Changes

• Support dependency array as a second argument of all middleware. This ensures stateful options can be kept reactive when making them derived (passing a function that returns the options):

const [value, setValue] = React.useState(0);

const offset1 = offset(value); // reactive
const offset2 = offset(() => value); // NOT reactive
const offset3 = offset(() => value, [value]); // reactive

This also includes size's apply function:

size(
  {
    apply() {
      value; // reactive
    },
  },
  [value],
);

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

• breaking

  Default x and y coordinates to 0 instead of null

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

• breaking

  Remove deprecated top-level reference and floating ref setters

  These are in the refs object:

  • reference -> refs.setReference

  • floating -> refs.setFloating

• breaking

  whileElementsMounted type requires cleanup function

New Features

• floatingStyles object

  Pre-configured positioning styles for the majority of cases:

  const {refs, floatingStyles} = useFloating();
  return <div ref={refs.setFloating} style={floatingStyles} />;

• External element synchronization in the hook

  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

• types: Allow null for arrow's element option