@floating-ui/core

Minor Changes

• Add 'layoutViewport' string option to rootBoundary. Unlike the visual 'viewport' boundary, it remains stable while pinch-zooming or when a mobile software keyboard is open, and unlike a manually passed Rect of the documentElement's client size, it accounts for space reserved by scrollbar-gutter: stable.

Patch Changes

• inline: no-op on empty client rects and detect RTL disjoined line rects

• Support explicit undefined for optional properties with exactOptionalPropertyTypes

• size: Correctly compute available size for centered elements overflowing both sides

• core: Reduce bundle size with behavior-identical middleware simplifications

Patch Changes

• Bundle and runtime improvements

Patch Changes

• Reduce memory allocations

Patch Changes

• size: Fill viewport along an axis if shift is enabled on that axis

• offset: Avoid NaN when mainAxis or crossAxis is undefined

Patch Changes

• flip: Adjust bestFit algorithm to only use initialPlacement or y side axis with fallbackAxisSideDirection

Patch Changes

• arrow: Perform a reset if internal shifting is performed

  This allows shift() to continue taking action when the arrow's internal
  shifting of the floating element is performed (preventing potential
  overflow/clipping of the floating element in certain scenarios), while still
  allowing the arrow to point toward the reference when it is small if possible.

New Features

• Allow function types for all middleware options, including detectOverflow, to allow derivation from state

  // Options
  shift({mainAxis: true});
  // Derived from state
  shift((state) => ({mainAxis: state.rects.reference.width > 10}));

Bug Fixes

• arrow: Ensure large padding option value does not cause incorrect centering

New Features

• autoPlacement: crossAxis option

  By default, aligned placements like top-start/top-end use a "fallback" strategy for the crossAxis to ensure different axes' placements can be chosen, and to keep the preferred alignment as much as possible.

  However, if you only have placements along one axis you can now use a "most space" strategy for the alignment as well, e.g.:

  autoPlacement({
    allowedPlacements: [
      'top-start', 
      'top-end', 
      'bottom-start', 
      'bottom-end'
    ],
    crossAxis: true,
  });

• detectOverflow: Accept virtual Rect boundaries

Bug Fixes

• size: Consider case where shift() is in the middleware array before size() for center aligned placements

• autoPlacement: Prevent resetting placement unexpectedly to opposite alignment when it overflows on all sides

• flip: When no placements fit, but before fallbackStrategy phase, if multiple placements fit on the mainAxis of overflow, choose the placement that fits best on the main crossAxis side of overflow

• autoPlacement: General algorithm improvements

• size: General algorithm improvements

New Features

• flip: fallbackAxisSideDirection option

  This option adds the ability to compute placements on the opposite axis of the preferred placement without needing to use an explicit fallbackPlacements list, meaning you no longer need to manage a custom map of fallbackPlacements and instead use this option to leverage automatic computing of the array.

  This option determines whether to allow fallback to the opposite axis if no placements along the preferred placement axis fit, and if so, which side direction along that axis to choose. If necessary, it will fallback to the other direction.

  • 'none' signals that no fallback to the opposite axis should take place. (default)

  • 'start' represents 'top' or 'left'.

  • 'end' represents 'bottom' or 'right'.

  ---

  Note:
  In RTL writing direction, the x-axis directions are reversed.

  For instance, by default, if the initial placement is set to 'right', then the placements to try (in order) are:

  ['right', 'left']

  On a narrow viewport, it's possible or even likely that neither of these will fit.

  By specifying a string other than 'none', you allow placements along the opposite axis of the initial placement to be tried. The direction determines which side of placement is tried first:

  flip({
    fallbackAxisSideDirection: 'start',
  });

  The above results in: ['right', 'left', 'top', 'bottom'].

  flip({
    fallbackAxisSideDirection: 'end',
  });

  The above results in: ['right', 'left', 'bottom', 'top'].

  As an example, if you'd like a tooltip that has a placement of 'right' to be placed on top on mobile (assuming it doesn't fit), then you'd use 'start'. For an interactive popover, you likely want to use 'end' so it's placed on the bottom, closer to the user's fingers.

Combining with shift

If shift() is in use in the middleware array, you may desire to disable crossAxis overflow checking, which will allow shift() to perform its work without falling back to the opposite axis (therefore preserving the original axis as best as possible):

const middleware = [
  flip({
    fallbackAxisSideDirection: 'start',
    crossAxis: false,
  }),
  shift(),
];

This will depend on the desired positioning you want to achieve, e.g. if the placement has an explicit alignment specified or not.

Changelog:

• Importing into universal apps (#166) (thank @HHogg)

Don't ask where v1.0.3 gone, no idea.

By the way, here's the changelog for this version:

• Fixed #143

• You can't no longer access Tooltip.js builds from the Popper.js npm package, install both the packages if you need them!

We also released Tooltip.js v1.0.3:

• Fixed #144

• You can't no longer access Popper.js builds from the Tooltip.js npm package, install both the packages if you need them!

• Fixed positioning problem when popper had not any positioned parent (#136, thank @nadiam84)

• Minor perf improvement of arrow modifier

Read the introduction post about Popper.js v1 at medium.com/@FezVrasta/popper-js-v1-5e8b3acd888c

Changelog:

• breaking

  Removed all the underscores _ prefixes from properties

• Converted source code to ES6

• Build now uses Rollup

• Moved from JSHint to ESLint

• Moved from Uglify to Babili

• Get rid of Grunt

• Updated npm dependencies

• breaking

  Removed parse method from core library, you can't automatically create popper's markup using Popper.js core. If you need the feature, here you can find a custom modifier that reintroduces the feature. gist.github.com/FezVrasta/075d228ffb855688c75a6…

• Added Tooltip.js library to replace the parse method

• breaking

  Simplified modifiers API, see #62 for migration instructions

• breaking

  Modifiers options are now stored inside the modifiers configurations, see #62

• Full support for HTML5 shadow root and HTML5 components (#88) (thanks @nadiam84)

• Improved flip detection strategy (#82) (thanks @nadiam84)

• breaking

  boundariesElement has been deprecated in favor to new options of preventOverflow and flip modifiers

• You can now set attributes defining them in data.attributes, properties with false values will be removed

• breaking

  onCreate and onUpdate methods have been converted to properties of the options object
  you can now use them with new Popper(a, b, { ...otherOptions, onCreate: () => {}, onUpdate: () => {} })

• breaking

  gpuAcceleration is now an option of the applyStyle modifier (modifiers.applyStyle.gpuAcceleration)

• Added auto placement, it will automatically get converted to the placement with more free space available (addresses #1)

• Added inner modifier, it allows to make the popper flow toward the inner of the reference element (addresses #83)

• From now on, the changelog will be posted in the GitHub releases and not in the CHANGELOG.md file

New Features

• Added "browser" export conditions

  BREAKING: removed the previous "production" and "development" export conditions. The new "browser" key is a replacement for this. See Package entry points.

Refactors

• breaking

  In both the size() and offset() middleware, the reference and floating top-level parameters are now namespaced under rects — rects.reference and rects.floating.

  The entire MiddlewareArguments object gets spread in, so there's more data to access if needed.

Bug Fixes

• arrow: Fallback to the floating element as the offsetParent

  React Native / other platforms that do not implement getOffsetParent