Features

• thanks to @wojtekmaj React-Focus-Lock is now "ESM Compatible" (https://github.com/theKashey/react-focus-lock/pull/264)

• 🎉 React 18 support

Features

• tremendous job by @vbabel enabled more complete Shadow DOM support

Bug Fixes

• disable positive index guard by default; use hasPositiveIndices to control behavior, fixes #32 (6db9980)
• remove positive tab indices (a1f51e0)
• update focus-lock to support Shadow Dom (668a559)

Features

• allow removal of positive tab indices (b2a55a9)

Bug Fixes

• allow returnFocus to be garbage collected, fixes #173 (ad3a4a1)
• do not use capture phase for focus-in events, fixes #134 (d56f49e)
• React 17/18 support. The one above

Features

• allow programatic control over returnFocus prop, fixes #178 (d5ec48b)

Bug Fixes

• update underlying libraries to incorporate React 17 requirements (https://github.com/theKashey/react-focus-lock/pull/167)

Bug Fixes

• update focus-lock to speedup lock activation (0835485)

Features

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

Bug Fixes

• correct behavior for radio buttons at the edge of lock, fixes #103 (9dac851)

Features

• add crossFrame property to control iframe behaviour, fixes #104 (486a7e0)

Bug Fixes

• avoid crash on IE (1cbc9e5)
• tabIndex=-1 elements should be autofocusable if pointed, fixes #108 (258e6aa)
• update interfaces (7f977fb)

Bug Fixes

• Restore IE11 support without polyfills - https://github.com/theKashey/react-focus-lock/issues/111
• FocusLock components does not have name. Used named components inside forwardRefs (a2d781d)

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.

Features

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

Features

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

Feature

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

Features

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

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.

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

No behavior changes

Bug fixes

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

Features:

• group - allow to scatter focus into several locks.

Deprecation:

• enableTextSelection prop got deprecated, and is enabled by default(#10)

Features:

• autoFocus prop allows you do disable focusing-on-mount behaviour [#20]. Defaults to true
• persistentFocus prop allows to enable sticky, never bluring, focus. Defaults to false.

Changes:

• Lock is now wrapped by React 16 Fragment, falling back to div in case of React 15.