react-focus-lock - npm Package Compare versions

Comparing version 2.7.1 to 2.8.0

dist/cjs/Lock.js

@@ -58,2 +58,3 @@ "use strict";
       whiteList = props.whiteList,
+      hasPositiveIndices = props.hasPositiveIndices,
       _props$shards = props.shards,
@@ -105,3 +106,3 @@ shards = _props$shards === void 0 ? emptyArray : _props$shards,
 
-      if (Boolean(howToReturnFocus)) {
+      if (howToReturnFocus) {
         var returnFocusOptions = (0, _typeof2["default"])(howToReturnFocus) === 'object' ? howToReturnFocus : undefined;
@@ -157,3 +158,6 @@ originalFocusedElement.current = null;
   var mergedRef = (0, _useCallbackRef.useMergeRefs)([parentRef, setObserveNode]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [/*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [
+  /*#__PURE__*/
+  // nearest focus guard
+  React.createElement("div", {
     key: "guard-first",
@@ -163,6 +167,4 @@ "data-focus-guard": true,
     style: _FocusGuard.hiddenGuard
-  }),
-  /*#__PURE__*/
-  // nearest focus guard
-  React.createElement("div", {
+  }), // first tabbed element guard
+  hasPositiveIndices ? /*#__PURE__*/React.createElement("div", {
     key: "guard-nearest",
@@ -172,4 +174,3 @@ "data-focus-guard": true,
     style: _FocusGuard.hiddenGuard
-  }) // first tabbed element guard
-  ], !disabled && /*#__PURE__*/React.createElement(SideCar, {
+  }) : null], !disabled && /*#__PURE__*/React.createElement(SideCar, {
     id: id,
@@ -206,2 +207,3 @@ sideCar: _medium.mediumSidecar,
   noFocusGuards: _propTypes.bool,
+  hasPositiveIndices: _propTypes.bool,
   allowTextSelection: _propTypes.bool,
@@ -230,2 +232,3 @@ autoFocus: _propTypes.bool,
   crossFrame: true,
+  hasPositiveIndices: undefined,
   allowTextSelection: undefined,
@@ -232,0 +235,0 @@ group: undefined,

dist/es2015/Lock.js

@@ -6,5 +6,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useMergeRefs } from 'use-callback-ref';
+import { useEffect } from 'react';
 import { hiddenGuard } from './FocusGuard';
 import { mediumFocus, mediumBlur, mediumSidecar } from './medium';
-import { useEffect } from "react";
 var emptyArray = [];
@@ -31,2 +31,3 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parentRef) {
       whiteList = props.whiteList,
+      hasPositiveIndices = props.hasPositiveIndices,
       _props$shards = props.shards,
@@ -77,3 +78,3 @@ shards = _props$shards === void 0 ? emptyArray : _props$shards,
 
-      if (Boolean(howToReturnFocus)) {
+      if (howToReturnFocus) {
         var returnFocusOptions = typeof howToReturnFocus === 'object' ? howToReturnFocus : undefined;
@@ -129,3 +130,6 @@ originalFocusedElement.current = null;
   var mergedRef = useMergeRefs([parentRef, setObserveNode]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [/*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [
+  /*#__PURE__*/
+  // nearest focus guard
+  React.createElement("div", {
     key: "guard-first",
@@ -135,6 +139,4 @@ "data-focus-guard": true,
     style: hiddenGuard
-  }),
-  /*#__PURE__*/
-  // nearest focus guard
-  React.createElement("div", {
+  }), // first tabbed element guard
+  hasPositiveIndices ? /*#__PURE__*/React.createElement("div", {
     key: "guard-nearest",
@@ -144,4 +146,3 @@ "data-focus-guard": true,
     style: hiddenGuard
-  }) // first tabbed element guard
-  ], !disabled && /*#__PURE__*/React.createElement(SideCar, {
+  }) : null], !disabled && /*#__PURE__*/React.createElement(SideCar, {
     id: id,
@@ -178,2 +179,3 @@ sideCar: mediumSidecar,
   noFocusGuards: bool,
+  hasPositiveIndices: bool,
   allowTextSelection: bool,
@@ -202,2 +204,3 @@ autoFocus: bool,
   crossFrame: true,
+  hasPositiveIndices: undefined,
   allowTextSelection: undefined,
@@ -204,0 +207,0 @@ group: undefined,

interfaces.d.ts

 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;
@@ -15,3 +15,3 @@
    */
-  returnFocus?: boolean | FocusOptions | ((returnTo: Element)=> boolean | FocusOptions);
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
 
@@ -66,2 +66,9 @@ /**
   /**
+   * 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
@@ -88,3 +95,3 @@ */
    */
-  as?: string | React.ElementType<LockProps & {children: ChildrenType}>,
+  as?: string | React.ElementType<LockProps & { children: ChildrenType }>,
   lockProps?: LockProps,
@@ -91,0 +98,0 @@

package.json

 {
   "name": "react-focus-lock",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "It is a trap! (for a focus)",
@@ -97,3 +97,3 @@ "main": "dist/cjs/index.js",
     "@babel/runtime": "^7.0.0",
-    "focus-lock": "^0.10.1",
+    "focus-lock": "^0.10.2",
     "prop-types": "^15.6.2",
@@ -100,0 +100,0 @@ "react-clientside-effect": "^1.2.5",

README.md

@@ -84,2 +84,3 @@ <div align="left">
   - `lockProps={}` to pass any extra props (except className) to the internal wrapper.
+  - `hasPositiveIndices=false` to support a focus lock behavior when any elements tabIndex greater than 0.
 
@@ -86,0 +87,0 @@ ### Focusing in OSX (Safari/Firefox) is strange!

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75572

increased by0.81%

Lines of code

1569

increased by0.77%

Number of lines in readme file

334

increased by0.3%

Dependency changes

• Updatedfocus-lock@^0.10.2