floating-ui/floating-ui @floating-ui/react@0.16.0

on GitHub

New Features

• feat: useTransitionStatus and useTransitionStyles hooks (#2089)

  These hooks make it easy to add CSS transitions to your floating elements, namely if you aren't using a spring library already like framer-motion/react-spring etc, but especially makes "placement-aware" transitions straightforward.

  A basic symmetric scale transition looks like:

  const {isMounted, styles} = useTransitionStyles(context, {
    initial: {
      opacity: 0,
      transform: 'scale(0.8)',
    },
  });
  
  return isMounted && <div style={styles} />;

  A placement/side-aware transition looks like:

  const {isMounted, styles} = useTransitionStyles(context, {
    initial: ({side}) => ({
      opacity: 0,
      transform: {
        top: 'translateY(5px)',
        bottom: 'translateY(-5px)',
        right: 'translateX(-5px)',
        left: 'translateX(5px)',
      }[side],
    }),
  });
  
  return isMounted && <div style={styles} />;

Bug Fixes

• fix: preserve backwards-compatibility for multiple reference() calls for old virtual element position technique (#2092)

  Going forward, the new positionReference callback ref is recommended instead, this is only to ensure upgrading does not break your old code.

• fix(FloatingFocusManager): make return focus calls sync under certain conditions (#2092)

  Only in Strict Mode, Safari would not navigate via arrow down keys due to sync navigation (<Menu> example)