v2.2.0

Features

• use forwardRef, and allow custom as prop (af0e560)

60% Bundle Size decrease*

Major version?

React 16.8 is now required, nothing else changed, nothing else added

Features

No new features.

So why?

👉60% Bundle Size decrease*

if you want

After getting some complaints about the size of this library(almost 4kb), I've spent some time trying to solve named issue. And partially solved it - literally by splitting the code into to parts.

• 🎣everything was rewritten in hooks. That simplifies the logic, make code more compact, but now the minimal React version is 16.8+
• 🚗a sidecar pattern has been used to split library code into the UI part(1.5kb), and Effect part(2.6kb) part, which would be executed only after Lock activation.

Even if 2.6kb might be not enough to put sidecar into the separate chunk - the code with it, which may be bundled among the UI part, would not be executed before the time, reducing script execution time.

• UI, 1.5kb, import FocusLockUI from 'react-focus-lock/UI - a DOM part of a lock.
• Sidecar, 3.5kb, import Sidecar from 'react-focus-lock/sidecar - which is the real focus lock.

import FocusLockUI from "react-focus-lock/UI";
import {sidecar} from "use-sidecar";

// prefetch sidecar. data would be loaded, but js would not be executed
const FocusLockSidecar = sidecar(  
  () => import(/* webpackPrefetch: true */ "react-focus-lock/sidecar")
);

<FocusLockUI
    disabled={this.state.disabled}
    sideCar={FocusLockSidecar}
>
 {content}
</FocusLockUI> 

Probably that's not the easiest way to use this lib, but - just extract this code somewhere, thus abstract from the implementation details. 2.6kb here, 4kb there - that's how we are going to win.

Smaller bundle

Features

• now depends on @babel/runtime, thus 2kb smaller.

Life-cycle hooks

Features

• exposed onActivation and onDeactivation hooks to fine control autoFocus and returnFocus behavior.

ESM Exports

Feature

• focus-lock and react-focus-lock now contain CJS and ESM export. 1.5kb(7.5->6) lighter with moduleConcatenation enabled.

Focus White list

Features

• whiteList prop, to allow only specific areas to be focus-managed.

Focus wars

Fixes

• broken nested lock ordering, introduced in v1.11
• focus guards were focused if locks are nested

Features

• no more focus wars - focus-lock will break a loop in case of fight detected
• all components accepts className
• FocusLock produces only one div.

Bugfixes

• better old browsers support
• update d.ts
• react-side-effect got replaced by react-clientside-effect

Better Portals Support

No behavior changes

Bug fixes

• better portal detection, including autofocus in portals, which leaded to js error beforehand.

Scattered focus

Features:

• group - allow to scatter focus into several locks.