All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
- New init config option
distanceCalculationMethod
that allows switching between edge-based, center-based and corner-based (default) distance calculations. - Support for a custom distance calculation function via the
customDistanceCalculationFunction
option, enabling custom logic for determining distances between focusable components. This will override thegetSecondaryAxisDistance
method. - Added
updateRTL
method to update the RTL behavior dynamically. This method allows toggling the Right-to-Left layout at runtime, updating the spatial navigation behavior without requiring reinitialization.
- new
init
config optiondomNodeFocusOptions
for passing FocusOptions when usingshouldFocusDOMNode
- new
init
config optionshouldUseNativeEvents
that enables the use of native events for triggering actions, such as clicks or key presses. - new
init
config optionrtl
that changes focus behavior for layouts in right-to-left (RTL) languages such as Arabic and Hebrew.
- Console warning when passing an empty
ref
touseFocusable
- Support for string names for Key Events. Now you can configure the key map with numbers or event names like
ArrowRight
.
- Restoring focus to the parent with
preferredChildFocusKey
set
- New property for
useFocusable
-focusBoundaryDirections
, array of directions to block whenisFocusBoundary
is enabled - New property
useFocusable
-forceFocus
to mark the component to be the target for auto-restore focus logic when focus is lost - New global method
doesFocusableExist
to check if the focusable component exists before setting focus on it. Safety feature
- [BREAKING] Top level exports
setFocus, getCurrentFocusKey, navigateByDirection, pause, resume, updateAllLayouts
are now exported fromSpatialNavigation
instead ofuseFocusable
hook.
- Context display name is now called
FocusContext
in React Devtools - Updating
lastFocusedChildKey
for newly added parent components
- Fixed the issue where component would have kept itself in the array of
parentsHavingFocusedChild
array after removal - Further improvements to
autoRestoreFocus
logic to trigger not only on Lead components, but also on Parents that had focused child when being removed. Edge case, normally children are removed first.
- Fixed a bug where parents were not updating their
hasFocusedChild
when new child is created and focused right away - Fixed a bug where
lastFocusedChild
was updated only on blur, but not on manual focus, resulting in a wrong key being stored
- Renamed
useFocusedContext
file touseFocusContext
to match the export name
- Extra debug logs, printing focusable components data in addition to DOM nodes.
- Extra call to set
focused
state tofalse
on unmount. This is to support "double-mount" in Strict mode in React 18.
- [Potentially Breaking] Auto restore focus when the item is removed is now happening with a slight debounced delay.
- Custom
useEffectOnce
hook that introduced issues with unmounted components being remained as focusable.
- new
init
config optionshouldFocusDOMNode
that focuses the underlying accessible DOM node too.
- new
init
config optionuseGetBoundingClientRect
that affects the measurements of sizes and coordinates.
- Add
setThrottle
to dynamically change throttle time.
- Remove event listeners for
unbindEventHandlers
regardless of throttle value
- Update
parentFocusKey
whenremoveFocusable
- Fix issue with
destroy
(addedbind
)
Reflect.deleteProperty
was replaced bydelete
to be es5 compliant.
- Param
focusDetails
infocusSelf
andsetFocus
methods.
- Output bundle is now targeting ES5.
- Support for React v18 StrictMode. Added
useEffectOnce
to avoid multiple effect runs on mount that was breaking the generation of thefocusKey
s.
- Few TS errors that somehow not being checked when the app is built and published ¯_(ツ)_/¯.
- Function (
getCurrentFocusKey
) for retrieving the currently focused component's focus key - Support for passing multiple key codes per direction in
setKeyMap
- Added generic P type for the props passed to
useFocusable
hook that is available in all callbacks that bounce props back.
- Changed all
lodash
imports to cherry-picked ones to avoid the wholelodash
lib to be bundled in the project.
- Eslint dependencies required by
eslint-config-airbnb
- Fixed issue in Node environment - Webpack global object is now
this
instead ofself
- Added focusable component callbacks to the effect that updates them in
SpatialNavigation
service. Otherwise only the first closure is assigned to the service and is always called with the initial props.
- Changed
measureLayout
back to calculate coords based onoffsetTop/Left/Width/Height
instead ofgetClientBoundRect
. The reason is thatgetClientBoundRect
is less performant and calculates coordinates AFTER all the CSS transformations, which is undesirable for scaled or transformed elements.
- Updated Github path in
package.json
- Migrated the old HOC library to Hooks.