fix: disable positive index guard by default; use hasPositiveIndices …

…to control behavior, fixes #32

README.md

@@ -81,7 +81,7 @@ I've got a good [article about focus management, dialogs and  WAI-ARIA](https://
   - `whiteList=fn` you could _whitelist_ locations FocusLock should carry about. Everything outside it will ignore. For example - any modals.
   - `as='div'` if you need to change internal `div` element, to any other. Use ref forwarding to give FocusLock the node to work with.
   - `lockProps={}` to pass any extra props (except className) to the internal wrapper.
-  - `usePositiveIndices` to maintain a focus lock when elements exterior to the focus lock have a tabIndex greater than 0.
+  - `hasPositiveIndices=false` to support a focus lock behavior when any elements tabIndex greater than 0.
 
 ### Focusing in OSX (Safari/Firefox) is strange!
 By default `tabbing` in OSX `sees` only controls, but not links or anything else `tabbable`. This is system settings, and Safari/Firefox obey.

interfaces.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {Ref} from "react";
 
-export interface ReactFocusLockProps<ChildrenType = React.ReactNode, LockProps=Record<string, any>> {
+export interface ReactFocusLockProps<ChildrenType = React.ReactNode, LockProps = Record<string, any>> {
   disabled?: boolean;
 
   /**
@@ -12,7 +12,7 @@ export interface ReactFocusLockProps<ChildrenType = React.ReactNode, LockProps=R
    * can also accept a function with the first argument equals to element focus will be returned to
    * in order to provide full control to the user space
    */
-  returnFocus?: boolean | FocusOptions | ((returnTo: Element)=> boolean | FocusOptions);
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
 
   /**
    * used to control behavior or "returning focus back to the lock"
@@ -61,6 +61,13 @@ export interface ReactFocusLockProps<ChildrenType = React.ReactNode, LockProps=R
    */
   noFocusGuards?: boolean | "tail";
 
+  /**
+   * Controls support a focus lock behavior when any elements tabIndex greater than 0.
+   * @default false
+   * @see - https://github.com/theKashey/react-focus-lock/issues/32
+   */
+  hasPositiveIndices?: boolean;
+
   /**
    * named focus group for focus scattering aka combined lock targets
    */
@@ -83,7 +90,7 @@ export interface ReactFocusLockProps<ChildrenType = React.ReactNode, LockProps=R
   /**
    * Component to use, defaults to 'div'
    */
-  as?: string | React.ElementType<LockProps & {children: ChildrenType}>,
+  as?: string | React.ElementType<LockProps & { children: ChildrenType }>,
   lockProps?: LockProps,
 
   ref?: Ref<HTMLElement>;

src/Lock.js

@@ -28,7 +28,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
     group,
     className,
     whiteList,
-    usePositiveIndices,
+    hasPositiveIndices,
     shards = emptyArray,
     as: Container = 'div',
     lockProps: containerProps = {},
@@ -41,8 +41,6 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
     onDeactivation: onDeactivationCallback,
   } = props;
 
-  const maxTabIndex = usePositiveIndices ? 1 : 0;
-
   const [id] = React.useState({});
 
   // SIDE EFFECT CALLBACKS
@@ -65,7 +63,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
   }, [onDeactivationCallback]);
 
   useEffect(() => {
-    if(!disabled) {
+    if (!disabled) {
       // cleanup return focus on trap deactivation
       // sideEffect/returnFocus should happen by this time
       originalFocusedElement.current = null;
@@ -139,8 +137,13 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
   return (
     <React.Fragment>
       {hasLeadingGuards && [
-        <div key="guard-first" data-focus-guard tabIndex={disabled ? -1 : 0} style={hiddenGuard}/>, // nearest focus guard
-        <div key="guard-nearest" data-focus-guard tabIndex={disabled ? -1 : maxTabIndex} style={hiddenGuard}/>, // first tabbed element guard
+        // nearest focus guard
+        <div key="guard-first" data-focus-guard tabIndex={disabled ? -1 : 0} style={hiddenGuard}/>,
+
+        // first tabbed element guard
+        hasPositiveIndices
+          ? <div key="guard-nearest" data-focus-guard tabIndex={disabled ? -1 : 1} style={hiddenGuard}/>
+          : null,
       ]}
       {!disabled && (
         <SideCar