react-focus-lock

react-focus-lock copied to clipboard

This PR migrates the code to TypeScript.

I kept Babel for compilation to keep it small.

There were a couple of type mismatches that I believe are bugs:

• https://github.com/theKashey/react-focus-lock/blob/master/src/Trap.js#L169 - moveFocusInside returns void?
• https://github.com/theKashey/react-focus-lock/blob/master/src/Lock.js#L141 - this call does not fit signature of useMergeRefs.

Type declarations coming from focus-lock need fixing too (focusSolver can accept arrays):

diff --git a/node_modules/focus-lock/dist/es5/moveFocusInside.d.ts b/node_modules/focus-lock/dist/es5/moveFocusInside.d.ts
index 2f28995..b173bfe 100644
--- a/node_modules/focus-lock/dist/es5/moveFocusInside.d.ts
+++ b/node_modules/focus-lock/dist/es5/moveFocusInside.d.ts
@@ -13,5 +13,5 @@ interface FocusLockFocusOptions {
  * HTML markers (see {@link import('./constants').FOCUS_AUTO} constants) can control autofocus
  * @see {@link focusSolver} for the same functionality without autofocus
  */
-export declare const moveFocusInside: (topNode: HTMLElement, lastNode: Element, options?: FocusLockFocusOptions) => void;
+export declare const moveFocusInside: (topNode: HTMLElement | HTMLElement[], lastNode: Element | null, options?: FocusLockFocusOptions) => void;
 export {};
diff --git a/node_modules/focus-lock/dist/es5/sibling.d.ts b/node_modules/focus-lock/dist/es5/sibling.d.ts
index d318b13..4a02d0f 100644
--- a/node_modules/focus-lock/dist/es5/sibling.d.ts
+++ b/node_modules/focus-lock/dist/es5/sibling.d.ts
@@ -42,13 +42,13 @@ interface FocusNextOptions {
  * @param fromElement - common parent to scope active element search or tab cycle order
  * @param {FocusNextOptions} [options] - focus options
  */
-export declare const focusNextElement: (fromElement: Element, options?: FocusNextOptions) => void;
+export declare const focusNextElement: (fromElement: Element | null, options?: FocusNextOptions) => void;
 /**
  * focuses prev element in the tab order
  * @param fromElement - common parent to scope active element search or tab cycle order
  * @param {FocusNextOptions} [options] - focus options
  */
-export declare const focusPrevElement: (fromElement: Element, options?: FocusNextOptions) => void;
+export declare const focusPrevElement: (fromElement: Element | null, options?: FocusNextOptions) => void;
 declare type FocusBoundaryOptions = Pick<FocusNextOptions, 'focusOptions' | 'onlyTabbable'>;
 /**
  * focuses first element in the tab-order

Anyway, in the current state it requires some minor polishing but I leave it to you to verify. Hopefully it saves you some work and could speed up introducing TS.