react-focus-on 3.5.2 → 3.6.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [3.6.0](https://github.com/theKashey/react-focus-on/compare/v3.5.4...v3.6.0) (2022-05-01)
+
+
+### Bug Fixes
+
+* update underlaying packages; brings React 18 and Shadow DOM support ([5bd7b5c](https://github.com/theKashey/react-focus-on/commit/5bd7b5c))
+
+
+
+## [3.5.4](https://github.com/theKashey/react-focus-on/compare/v3.5.3...v3.5.4) (2021-11-09)
+
+
+
+## [3.5.3](https://github.com/theKashey/react-focus-on/compare/v3.5.2...v3.5.3) (2021-11-09)
+
+
+### Bug Fixes
+
+* add tslib as dependency, fixes [#54](https://github.com/theKashey/react-focus-on/issues/54) ([ce204cd](https://github.com/theKashey/react-focus-on/commit/ce204cd))
+
+
+
 ## [3.5.2](https://github.com/theKashey/react-focus-on/compare/v3.5.1...v3.5.2) (2021-03-28)
 
 

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, style = props.style, as = props.as, rest = __rest(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "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, 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

@@ -1,89 +1,91 @@
 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?: boolean | FocusOptions;
+    returnFocus?: ComponentProps<typeof ReactFocusLock>['returnFocus'] | 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");
@@ -10,13 +11,14 @@ exports.FocusOn = React.forwardRef(function (props, parentRef) {
     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 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, 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

@@ -1,89 +1,91 @@
 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?: boolean | FocusOptions;
+    returnFocus?: ComponentProps<typeof ReactFocusLock>['returnFocus'] | 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.2",
+  "version": "3.6.0",
   "description": "The final solution for WAI ARIA compatible modal dialogs or full-screen tasks.",
   "main": "dist/es5/index.js",
   "scripts": {
@@ -24,13 +24,17 @@
     "link:ss": "rsync -av ../react-remove-scroll-bar/node_modules/react-style-singleton node_modules/ --exclude node_modules --exclude .git",
     "link:all": "yarn link:fl & yarn link:rfl & yarn link:ss & yarn link:rf & yarn link:sb"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/theKashey/react-focus-on.git"
+  },
   "sideEffects": [
     "**/sidecar.js"
   ],
   "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",
@@ -40,19 +44,20 @@
     "ts-react-toolbox": "^0.2.10"
   },
   "dependencies": {
-    "aria-hidden": "^1.1.2",
-    "react-focus-lock": "^2.5.0",
-    "react-remove-scroll": "^2.4.1",
-    "react-style-singleton": "^2.1.1",
-    "use-callback-ref": "^1.2.5",
-    "use-sidecar": "^1.0.5"
+    "aria-hidden": "^1.1.3",
+    "react-focus-lock": "^2.9.0",
+    "react-remove-scroll": "^2.5.2",
+    "react-style-singleton": "^2.2.0",
+    "tslib": "^2.3.1",
+    "use-callback-ref": "^1.3.0",
+    "use-sidecar": "^1.1.2"
   },
   "engines": {
     "node": ">=8.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "@types/react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -75,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;

package/dist/es2015/component.d.ts

@@ -1,2 +0,0 @@
-import { ReactFocusOnSideProps } from "./types";
-export declare function ReactFocusOn(props: ReactFocusOnSideProps): JSX.Element;

package/dist/es2015/component.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { RemoveScroll } from 'react-remove-scroll/UI';
-import ReactFocusLock from 'react-focus-lock/UI';
-var extractRef = function (ref) { return (('current' in ref) ? ref.current : ref); };
-export function ReactFocusOn(props) {
-    var _a = React.useState(null), lockProps = _a[0], setLockProps = _a[1];
-    var _b = this.props, children = _b.children, autoFocus = _b.autoFocus, shards = _b.shards, _c = _b.enabled, enabled = _c === void 0 ? true : _c, _d = _b.scrollLock, scrollLock = _d === void 0 ? true : _d, _e = _b.focusLock, focusLock = _e === void 0 ? true : _e, sideCar = _b.sideCar;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(RemoveScroll, { sideCar: enabled && sideCar, enabled: enabled && scrollLock, shards: shards },
-            enabled && React.createElement(Effect, null),
-            React.createElement(ReactFocusLock, { sideCar: enabled && sideCar, disabled: !(this.state.lockProps && enabled && focusLock), returnFocus: true, autoFocus: autoFocus, onActivation: this.onActivation, onDeactivation: this.onDeactivation, shards: shards, lockProps: lockProps }, children))));
-}

package/dist/es5/component.d.ts

@@ -1,2 +0,0 @@
-import { ReactFocusOnSideProps } from "./types";
-export declare function ReactFocusOn(props: ReactFocusOnSideProps): JSX.Element;

package/dist/es5/component.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var UI_1 = require("react-remove-scroll/UI");
-var UI_2 = require("react-focus-lock/UI");
-var InteractivityDisabler_1 = require("./InteractivityDisabler");
-var extractRef = function (ref) { return (('current' in ref) ? ref.current : ref); };
-function ReactFocusOn(props) {
-    var _a = React.useState(null), lockProps = _a[0], setLockProps = _a[1];
-    var _b = this.props, children = _b.children, autoFocus = _b.autoFocus, shards = _b.shards, _c = _b.enabled, enabled = _c === void 0 ? true : _c, _d = _b.scrollLock, scrollLock = _d === void 0 ? true : _d, _e = _b.focusLock, focusLock = _e === void 0 ? true : _e, sideCar = _b.sideCar;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(UI_1.RemoveScroll, { sideCar: enabled && sideCar, enabled: enabled && scrollLock, shards: shards },
-            enabled && React.createElement(InteractivityDisabler_1.InteractivityDisabler, null),
-            React.createElement(UI_2.default, { sideCar: enabled && sideCar, disabled: !(this.state.lockProps && enabled && focusLock), returnFocus: true, autoFocus: autoFocus, onActivation: this.onActivation, onDeactivation: this.onDeactivation, shards: shards, lockProps: lockProps }, children))));
-}
-exports.ReactFocusOn = ReactFocusOn;