react-focus-on 3.5.4 → 3.7.0

package/README.md

@@ -61,6 +61,7 @@ import {FocusOn} from 'react-focus-on';
  - `[noIsolation]` - disables aria-hidden isolation
  - `[inert]` - enables pointer-events isolation (☠️ dangerous, use to disable "parent scrollbars", refer to [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) documentation)
  - `[allowPinchZoom]` - enables "pinch-n-zoom" behavior. By default it might be prevented, refer to [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) documentation
+ - `[preventScrollOnFocus]` - prevents a [side effect of a programatic page scroll](https://github.com/theKashey/react-focus-on/issues/62) caused by focusing elements. Especially useful to address modal animations.
 ---
  - `[onActivation]` - on activation callback
  - `[onDeactivation]` - on deactivation callback

package/dist/es2015/Combination.js

@@ -1,8 +1,8 @@
-import * as tslib_1 from "tslib";
+import { __assign } from "tslib";
 import * as React from 'react';
 import { FocusOn as ReactFocusOn } from './UI';
 import SideCar from './sidecar';
 var RequireSideCar = function (props) {
-    return React.createElement(SideCar, tslib_1.__assign({}, props));
+    return React.createElement(SideCar, __assign({}, props));
 };
-export var FocusOn = React.forwardRef(function (props, ref) { return React.createElement(ReactFocusOn, tslib_1.__assign({}, props, { ref: ref, sideCar: RequireSideCar })); });
+export var FocusOn = React.forwardRef(function (props, ref) { return React.createElement(ReactFocusOn, __assign({}, props, { ref: ref, sideCar: RequireSideCar })); });

package/dist/es2015/Effect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { EffectProps } from './types';
 export declare function Effect({ setLockProps, onEscapeKey, onClickOutside, shards, onActivation, onDeactivation, noIsolation }: EffectProps): JSX.Element;

package/dist/es2015/Effect.js

@@ -1,3 +1,4 @@
+import { __spreadArrays } from "tslib";
 import * as React from 'react';
 import { hideOthers } from 'aria-hidden';
 import { InteractivityDisabler } from './InteractivityDisabler';
@@ -77,7 +78,9 @@ export function Effect(_a) {
         var _undo = function () { return null; };
         var unmounted = false;
         var onNodeActivation = function (node) {
-            _undo = hideOthers([node].concat((shards || []).map(extractRef)), document.body, noIsolation ? undefined : focusHiddenMarker);
+            if (!noIsolation) {
+                _undo = hideOthers(__spreadArrays([node], (shards || []).map(extractRef)), document.body, focusHiddenMarker);
+            }
             setActiveNode(function () { return node; });
         };
         var onNodeDeactivation = function () {

package/dist/es2015/InteractivityDisabler.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const InteractivityDisabler: React.SFC;
+export declare const InteractivityDisabler: React.FC;

package/dist/es2015/UI.js

@@ -1,20 +1,21 @@
-import * as tslib_1 from "tslib";
+import { __assign, __rest } from "tslib";
 import * as React from 'react';
 import { RemoveScroll } from 'react-remove-scroll/UI';
 import ReactFocusLock from 'react-focus-lock/UI';
 import { effectCar } from './medium';
 export var FocusOn = React.forwardRef(function (props, parentRef) {
     var _a = React.useState(false), lockProps = _a[0], setLockProps = _a[1];
-    var children = props.children, autoFocus = props.autoFocus, shards = props.shards, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, inert = props.inert, allowPinchZoom = props.allowPinchZoom, sideCar = props.sideCar, className = props.className, shouldIgnore = props.shouldIgnore, style = props.style, as = props.as, rest = tslib_1.__rest(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "style", "as"]);
+    var children = props.children, autoFocus = props.autoFocus, shards = props.shards, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, inert = props.inert, allowPinchZoom = props.allowPinchZoom, sideCar = props.sideCar, className = props.className, shouldIgnore = props.shouldIgnore, preventScrollOnFocus = props.preventScrollOnFocus, style = props.style, as = props.as, rest = __rest(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "preventScrollOnFocus", "style", "as"]);
     var SideCar = sideCar;
-    var onActivation = lockProps.onActivation, onDeactivation = lockProps.onDeactivation, restProps = tslib_1.__rest(lockProps, ["onActivation", "onDeactivation"]);
+    var onActivation = lockProps.onActivation, onDeactivation = lockProps.onDeactivation, restProps = __rest(lockProps, ["onActivation", "onDeactivation"]);
+    var appliedLockProps = __assign(__assign({}, restProps), { sideCar: sideCar,
+        shards: shards,
+        allowPinchZoom: allowPinchZoom,
+        as: as,
+        inert: inert,
+        style: style, enabled: enabled && scrollLock });
     return (React.createElement(React.Fragment, null,
-        React.createElement(ReactFocusLock, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, onActivation: onActivation, onDeactivation: onDeactivation, className: className, as: RemoveScroll, whiteList: shouldIgnore, lockProps: tslib_1.__assign({}, restProps, { sideCar: sideCar,
-                shards: shards,
-                allowPinchZoom: allowPinchZoom,
-                as: as,
-                inert: inert,
-                style: style, enabled: enabled && scrollLock }) }, children),
-        enabled && (React.createElement(SideCar, tslib_1.__assign({}, rest, { sideCar: effectCar, setLockProps: setLockProps, shards: shards })))));
+        React.createElement(ReactFocusLock, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, focusOptions: preventScrollOnFocus ? { preventScroll: true } : undefined, as: RemoveScroll }, children),
+        enabled && (React.createElement(SideCar, __assign({}, rest, { sideCar: effectCar, setLockProps: setLockProps, shards: shards })))));
 });
 export * from './reExports';

package/dist/es2015/medium.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const effectCar: Readonly<import("use-sidecar/dist/es5/types").SideMedium<import("react").ComponentType<{}>>>;
+import { EffectProps } from "./types";
+export declare const effectCar: Readonly<import("use-sidecar/dist/es5/types").SideCarMedium<EffectProps>>;
 export declare const focusHiddenMarker = "data-focus-on-hidden";

package/dist/es2015/reExports.js

@@ -1,4 +1,4 @@
-import * as tslib_1 from "tslib";
+import { __assign } from "tslib";
 import { RemoveScroll } from 'react-remove-scroll/UI';
 export { AutoFocusInside, MoveFocusInside, InFocusGuard } from 'react-focus-lock/UI';
-export var classNames = tslib_1.__assign({}, RemoveScroll.classNames);
+export var classNames = __assign({}, RemoveScroll.classNames);

package/dist/es2015/sidecar.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import 'react-focus-lock/sidecar';
 import 'react-remove-scroll/sidecar';
-declare const _default: import("react").FunctionComponent<import("./types").EffectProps & import("use-sidecar/dist/es5/types").SideCarHOC>;
+declare const _default: import("use-sidecar").SideCarComponent<import("./types").EffectProps>;
 export default _default;

package/dist/es2015/types.d.ts

@@ -2,90 +2,95 @@ import * as React from 'react';
 import ReactFocusLock from 'react-focus-lock/UI';
 import { ComponentProps } from "react";
 export interface LockProps {
-    onMouseDown?(e: React.MouseEvent): void;
-    onTouchStart?(e: React.TouchEvent): void;
-    onActivation?(node: HTMLElement): void;
-    onDeactivation?(): void;
+    onMouseDown?: ((e: React.MouseEvent) => void) | undefined;
+    onTouchStart?: ((e: React.TouchEvent) => void) | undefined;
+    onActivation?: ((node: HTMLElement) => void) | undefined;
+    onDeactivation?: (() => void) | undefined;
 }
 export interface CommonProps {
     /**
      * action to perform on Esc key press
      */
-    onEscapeKey?: (event: Event) => void;
+    onEscapeKey?: ((event: Event) => void) | undefined;
     /**
      * action to perform on click outside
      */
-    onClickOutside?: (event: MouseEvent | TouchEvent) => void;
+    onClickOutside?: ((event: MouseEvent | TouchEvent) => void) | undefined;
     /**
      * callback on lock activation
      * @param node the main node
      */
-    onActivation?: (node: HTMLElement) => void;
+    onActivation?: ((node: HTMLElement) => void) | undefined;
     /**
      * callback on lock deactivation
      */
-    onDeactivation?: () => void;
+    onDeactivation?: (() => void) | undefined;
     /**
      * [scroll-lock] control isolation
      * @see {@link https://github.com/theKashey/react-remove-scroll#usage}
      */
-    noIsolation?: boolean;
+    noIsolation?: boolean | undefined;
     /**
      * [scroll-lock] full page inert (event suppression)
      * @default false
      * @see {@link https://github.com/theKashey/react-remove-scroll#usage}
      */
-    inert?: boolean;
+    inert?: boolean | undefined;
     /**
      * [scroll-lock] allows scroll based zoom
      * @default false
      * @see https://github.com/theKashey/react-remove-scroll#usage
      */
-    allowPinchZoom?: boolean;
+    allowPinchZoom?: boolean | undefined;
     /**
      * a list of elements which should be considered as a part of the lock
      */
-    shards?: Array<React.RefObject<any> | HTMLElement>;
+    shards?: (Array<React.RefObject<any> | HTMLElement>) | undefined;
 }
 export interface ReactFocusOnProps extends CommonProps {
     /**
      * The main switch
      */
-    enabled?: boolean;
+    enabled?: boolean | undefined;
     /**
      * Controls scroll lock behavior
      */
-    scrollLock?: boolean;
+    scrollLock?: boolean | undefined;
     /**
      * Controls focus lock behavior
      */
-    focusLock?: boolean;
+    focusLock?: boolean | undefined;
     /**
      * [focus-lock] control autofocus
      * @default true
      */
-    autoFocus?: boolean;
+    autoFocus?: boolean | undefined;
     /**
      * [focus-lock] control returnFocus
      * @default true
      */
-    returnFocus?: ComponentProps<typeof ReactFocusLock>['returnFocus'];
+    returnFocus?: ComponentProps<typeof ReactFocusLock>['returnFocus'] | undefined;
+    /**
+     * [focus-lock] prevents scroll on focus via focusOptions
+     * @default false
+     */
+    preventScrollOnFocus?: boolean | undefined;
     /**
      * [focus-lock] allows "ignoring" focus on some elements
      * @see {@link https://github.com/theKashey/react-focus-lock#api}
      */
-    shouldIgnore?: (candidate: HTMLElement) => boolean;
+    shouldIgnore?: ((candidate: HTMLElement) => boolean) | undefined;
     /**
      * allows replacement of the host node
      * @default div
      */
-    as?: string | React.ElementType;
-    style?: React.CSSProperties;
-    className?: string;
+    as?: string | React.ElementType | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
     children: React.ReactNode;
 }
 export interface ReactFocusOnSideProps extends ReactFocusOnProps {
-    sideCar: React.SFC<any>;
+    sideCar: React.FC<any>;
 }
 export interface EffectProps extends CommonProps {
     setLockProps(settings: LockProps): void;

package/dist/es5/Combination.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusOn = void 0;
 var tslib_1 = require("tslib");
 var React = require("react");
 var UI_1 = require("./UI");

package/dist/es5/Effect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { EffectProps } from './types';
 export declare function Effect({ setLockProps, onEscapeKey, onClickOutside, shards, onActivation, onDeactivation, noIsolation }: EffectProps): JSX.Element;

package/dist/es5/Effect.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Effect = void 0;
+var tslib_1 = require("tslib");
 var React = require("react");
 var aria_hidden_1 = require("aria-hidden");
 var InteractivityDisabler_1 = require("./InteractivityDisabler");
@@ -79,7 +81,9 @@ function Effect(_a) {
         var _undo = function () { return null; };
         var unmounted = false;
         var onNodeActivation = function (node) {
-            _undo = aria_hidden_1.hideOthers([node].concat((shards || []).map(extractRef)), document.body, noIsolation ? undefined : medium_1.focusHiddenMarker);
+            if (!noIsolation) {
+                _undo = aria_hidden_1.hideOthers(tslib_1.__spreadArrays([node], (shards || []).map(extractRef)), document.body, medium_1.focusHiddenMarker);
+            }
             setActiveNode(function () { return node; });
         };
         var onNodeDeactivation = function () {

package/dist/es5/InteractivityDisabler.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const InteractivityDisabler: React.SFC;
+export declare const InteractivityDisabler: React.FC;

package/dist/es5/InteractivityDisabler.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractivityDisabler = void 0;
 var React = require("react");
 var react_style_singleton_1 = require("react-style-singleton");
 var medium_1 = require("./medium");

package/dist/es5/UI.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusOn = void 0;
 var tslib_1 = require("tslib");
 var React = require("react");
 var UI_1 = require("react-remove-scroll/UI");
@@ -7,16 +8,17 @@ var UI_2 = require("react-focus-lock/UI");
 var medium_1 = require("./medium");
 exports.FocusOn = React.forwardRef(function (props, parentRef) {
     var _a = React.useState(false), lockProps = _a[0], setLockProps = _a[1];
-    var children = props.children, autoFocus = props.autoFocus, shards = props.shards, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, inert = props.inert, allowPinchZoom = props.allowPinchZoom, sideCar = props.sideCar, className = props.className, shouldIgnore = props.shouldIgnore, style = props.style, as = props.as, rest = tslib_1.__rest(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "style", "as"]);
+    var children = props.children, autoFocus = props.autoFocus, shards = props.shards, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, inert = props.inert, allowPinchZoom = props.allowPinchZoom, sideCar = props.sideCar, className = props.className, shouldIgnore = props.shouldIgnore, preventScrollOnFocus = props.preventScrollOnFocus, style = props.style, as = props.as, rest = tslib_1.__rest(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "preventScrollOnFocus", "style", "as"]);
     var SideCar = sideCar;
     var onActivation = lockProps.onActivation, onDeactivation = lockProps.onDeactivation, restProps = tslib_1.__rest(lockProps, ["onActivation", "onDeactivation"]);
+    var appliedLockProps = tslib_1.__assign(tslib_1.__assign({}, restProps), { sideCar: sideCar,
+        shards: shards,
+        allowPinchZoom: allowPinchZoom,
+        as: as,
+        inert: inert,
+        style: style, enabled: enabled && scrollLock });
     return (React.createElement(React.Fragment, null,
-        React.createElement(UI_2.default, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, onActivation: onActivation, onDeactivation: onDeactivation, className: className, as: UI_1.RemoveScroll, whiteList: shouldIgnore, lockProps: tslib_1.__assign({}, restProps, { sideCar: sideCar,
-                shards: shards,
-                allowPinchZoom: allowPinchZoom,
-                as: as,
-                inert: inert,
-                style: style, enabled: enabled && scrollLock }) }, children),
+        React.createElement(UI_2.default, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, focusOptions: preventScrollOnFocus ? { preventScroll: true } : undefined, as: UI_1.RemoveScroll }, children),
         enabled && (React.createElement(SideCar, tslib_1.__assign({}, rest, { sideCar: medium_1.effectCar, setLockProps: setLockProps, shards: shards })))));
 });
 tslib_1.__exportStar(require("./reExports"), exports);

package/dist/es5/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var Combination_1 = require("./Combination");
-exports.FocusOn = Combination_1.FocusOn;
+Object.defineProperty(exports, "FocusOn", { enumerable: true, get: function () { return Combination_1.FocusOn; } });
 tslib_1.__exportStar(require("./reExports"), exports);

package/dist/es5/medium.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const effectCar: Readonly<import("use-sidecar/dist/es5/types").SideMedium<import("react").ComponentType<{}>>>;
+import { EffectProps } from "./types";
+export declare const effectCar: Readonly<import("use-sidecar/dist/es5/types").SideCarMedium<EffectProps>>;
 export declare const focusHiddenMarker = "data-focus-on-hidden";

package/dist/es5/medium.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusHiddenMarker = exports.effectCar = void 0;
 var use_sidecar_1 = require("use-sidecar");
 exports.effectCar = use_sidecar_1.createSidecarMedium();
 exports.focusHiddenMarker = 'data-focus-on-hidden';

package/dist/es5/reExports.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.classNames = void 0;
 var tslib_1 = require("tslib");
 var UI_1 = require("react-remove-scroll/UI");
 var UI_2 = require("react-focus-lock/UI");
-exports.AutoFocusInside = UI_2.AutoFocusInside;
-exports.MoveFocusInside = UI_2.MoveFocusInside;
-exports.InFocusGuard = UI_2.InFocusGuard;
+Object.defineProperty(exports, "AutoFocusInside", { enumerable: true, get: function () { return UI_2.AutoFocusInside; } });
+Object.defineProperty(exports, "MoveFocusInside", { enumerable: true, get: function () { return UI_2.MoveFocusInside; } });
+Object.defineProperty(exports, "InFocusGuard", { enumerable: true, get: function () { return UI_2.InFocusGuard; } });
 exports.classNames = tslib_1.__assign({}, UI_1.RemoveScroll.classNames);

package/dist/es5/sidecar.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import 'react-focus-lock/sidecar';
 import 'react-remove-scroll/sidecar';
-declare const _default: import("react").FunctionComponent<import("./types").EffectProps & import("use-sidecar/dist/es5/types").SideCarHOC>;
+declare const _default: import("use-sidecar").SideCarComponent<import("./types").EffectProps>;
 export default _default;

package/dist/es5/types.d.ts

@@ -2,90 +2,95 @@ import * as React from 'react';
 import ReactFocusLock from 'react-focus-lock/UI';
 import { ComponentProps } from "react";
 export interface LockProps {
-    onMouseDown?(e: React.MouseEvent): void;
-    onTouchStart?(e: React.TouchEvent): void;
-    onActivation?(node: HTMLElement): void;
-    onDeactivation?(): void;
+    onMouseDown?: ((e: React.MouseEvent) => void) | undefined;
+    onTouchStart?: ((e: React.TouchEvent) => void) | undefined;
+    onActivation?: ((node: HTMLElement) => void) | undefined;
+    onDeactivation?: (() => void) | undefined;
 }
 export interface CommonProps {
     /**
      * action to perform on Esc key press
      */
-    onEscapeKey?: (event: Event) => void;
+    onEscapeKey?: ((event: Event) => void) | undefined;
     /**
      * action to perform on click outside
      */
-    onClickOutside?: (event: MouseEvent | TouchEvent) => void;
+    onClickOutside?: ((event: MouseEvent | TouchEvent) => void) | undefined;
     /**
      * callback on lock activation
      * @param node the main node
      */
-    onActivation?: (node: HTMLElement) => void;
+    onActivation?: ((node: HTMLElement) => void) | undefined;
     /**
      * callback on lock deactivation
      */
-    onDeactivation?: () => void;
+    onDeactivation?: (() => void) | undefined;
     /**
      * [scroll-lock] control isolation
      * @see {@link https://github.com/theKashey/react-remove-scroll#usage}
      */
-    noIsolation?: boolean;
+    noIsolation?: boolean | undefined;
     /**
      * [scroll-lock] full page inert (event suppression)
      * @default false
      * @see {@link https://github.com/theKashey/react-remove-scroll#usage}
      */
-    inert?: boolean;
+    inert?: boolean | undefined;
     /**
      * [scroll-lock] allows scroll based zoom
      * @default false
      * @see https://github.com/theKashey/react-remove-scroll#usage
      */
-    allowPinchZoom?: boolean;
+    allowPinchZoom?: boolean | undefined;
     /**
      * a list of elements which should be considered as a part of the lock
      */
-    shards?: Array<React.RefObject<any> | HTMLElement>;
+    shards?: (Array<React.RefObject<any> | HTMLElement>) | undefined;
 }
 export interface ReactFocusOnProps extends CommonProps {
     /**
      * The main switch
      */
-    enabled?: boolean;
+    enabled?: boolean | undefined;
     /**
      * Controls scroll lock behavior
      */
-    scrollLock?: boolean;
+    scrollLock?: boolean | undefined;
     /**
      * Controls focus lock behavior
      */
-    focusLock?: boolean;
+    focusLock?: boolean | undefined;
     /**
      * [focus-lock] control autofocus
      * @default true
      */
-    autoFocus?: boolean;
+    autoFocus?: boolean | undefined;
     /**
      * [focus-lock] control returnFocus
      * @default true
      */
-    returnFocus?: ComponentProps<typeof ReactFocusLock>['returnFocus'];
+    returnFocus?: ComponentProps<typeof ReactFocusLock>['returnFocus'] | undefined;
+    /**
+     * [focus-lock] prevents scroll on focus via focusOptions
+     * @default false
+     */
+    preventScrollOnFocus?: boolean | undefined;
     /**
      * [focus-lock] allows "ignoring" focus on some elements
      * @see {@link https://github.com/theKashey/react-focus-lock#api}
      */
-    shouldIgnore?: (candidate: HTMLElement) => boolean;
+    shouldIgnore?: ((candidate: HTMLElement) => boolean) | undefined;
     /**
      * allows replacement of the host node
      * @default div
      */
-    as?: string | React.ElementType;
-    style?: React.CSSProperties;
-    className?: string;
+    as?: string | React.ElementType | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
     children: React.ReactNode;
 }
 export interface ReactFocusOnSideProps extends ReactFocusOnProps {
-    sideCar: React.SFC<any>;
+    sideCar: React.FC<any>;
 }
 export interface EffectProps extends CommonProps {
     setLockProps(settings: LockProps): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-focus-on",
-  "version": "3.5.4",
+  "version": "3.7.0",
   "description": "The final solution for WAI ARIA compatible modal dialogs or full-screen tasks.",
   "main": "dist/es5/index.js",
   "scripts": {
@@ -34,7 +34,7 @@
   "author": "Anton Korzunov <thekashey@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@types/react": "^16.8.19",
+    "@types/react": "^18.0.8",
     "conventional-changelog-cli": "^2.0.12",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
@@ -44,13 +44,13 @@
     "ts-react-toolbox": "^0.2.10"
   },
   "dependencies": {
-    "aria-hidden": "^1.1.3",
-    "react-focus-lock": "^2.6.0",
-    "react-remove-scroll": "^2.4.1",
-    "react-style-singleton": "^2.1.1",
+    "aria-hidden": "^1.2.2",
+    "react-focus-lock": "^2.9.2",
+    "react-remove-scroll": "^2.5.5",
+    "react-style-singleton": "^2.2.0",
     "tslib": "^2.3.1",
-    "use-callback-ref": "^1.2.5",
-    "use-sidecar": "^1.0.5"
+    "use-callback-ref": "^1.3.0",
+    "use-sidecar": "^1.1.2"
   },
   "engines": {
     "node": ">=8.5.0"
@@ -80,7 +80,7 @@
     "isolation"
   ],
   "resolutions": {
-    "typescript": "^3.0.0"
+    "typescript": "^3.8.0"
   },
   "homepage": "https://github.com/theKashey/react-focus-on#readme"
 }

package/sidecar/sidecar.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 
-declare var sidecar: React.SFC;
+declare var sidecar: React.FC;
 
 export default sidecar;