fix: aria-hidden broken in v3, fixes #8

UI/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "main": "../dist/cjs/UI.js",
+  "main": "../dist/es5/UI.js",
   "jsnext:main": "../dist/es2015/UI.js",
   "module": "../dist/es2015/UI.js",
   "types": "UI.d.ts",

__tests__/UI.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {configure, mount} from 'enzyme';
+import {FocusOn} from '../src/UI';
+import {sidecar} from "use-sidecar";
+import * as Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+const tick = () => new Promise(resolve => setTimeout(resolve, 10));
+
+const car = sidecar(() => import ('../src/sidecar'));
+
+describe('UI', () => {
+  it('smoke', async () => {
+    const wrapper = mount(
+      <FocusOn sideCar={car}>content</FocusOn>
+    );
+    expect(wrapper.html()).toContain('content');
+    await tick();
+    expect(wrapper.html()).toContain('content');
+  });
+});

__tests__/combination.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {configure, mount} from 'enzyme';
+import {FocusOn} from '../src';
+import * as Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+const tick = () => new Promise(resolve => setTimeout(resolve, 10));
+
+describe('Endpoint UI', () => {
+  it('smoke', async () => {
+    const onActivation = jest.fn();
+    const onDeactivation = jest.fn();
+
+    const ref = React.createRef();
+    const wrapper = mount(
+      <div>
+        <FocusOn inert onActivation={onActivation} onDeactivation={onDeactivation}>content</FocusOn>
+        <div ref={ref}>outer</div>
+      </div>
+    );
+    expect(wrapper.html()).toContain('content');
+    expect(document.body.className).toBe('block-interactivity-0');
+    await tick();
+    expect(onActivation).toHaveBeenCalled();
+    expect(ref.current.outerHTML).toBe('<div>outer</div>');
+
+    wrapper.unmount();
+    expect(onDeactivation).toHaveBeenCalled();
+    expect(document.body.className).toBe('');
+  });
+});

__tests__/smoke.tsx

@@ -0,0 +1,6 @@
+describe('smoke', function () {
+   it('requires UI', () => {
+     debugger;
+     require('../src/UI');
+   })
+});

package.json

@@ -32,15 +32,17 @@
   "devDependencies": {
     "@types/react": "^16.8.19",
     "conventional-changelog-cli": "^2.0.12",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-powerplug": "^1.0.0",
     "ts-react-toolbox": "^0.2.2"
   },
   "dependencies": {
     "aria-hidden": "^1.1.1",
-    "react-focus-lock": "^2.0.1",
-    "react-remove-scroll": "^2.0.1",
+    "react-focus-lock": "^2.0.3",
+    "react-remove-scroll": "^2.0.3",
     "react-style-singleton": "^2.0.0",
     "use-sidecar": "^1.0.1"
   },

sidecar/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "main": "../dist/cjs/sidecar.js",
+  "main": "../dist/es5/sidecar.js",
   "jsnext:main": "../dist/es2015/sidecar.js",
   "module": "../dist/es2015/sidecar.js",
   "types": "sidecar.d.ts"

src/UI.tsx

@@ -4,15 +4,18 @@ import {SideCarComponent} from "use-sidecar";
 import {RemoveScroll} from 'react-remove-scroll/UI';
 import ReactFocusLock from 'react-focus-lock/UI'
 
-import {EffectProps, ReactFocusOnSideProps} from "./types";
+import {EffectProps, ReactFocusOnSideProps, LockProps} from "./types";
 import {effectCar} from "./medium";
 
 export function FocusOn(props: ReactFocusOnSideProps) {
-  const [lockProps, setLockProps] = React.useState({});
+  const [lockProps, setLockProps] = React.useState<LockProps>({});
 
   const {children, autoFocus, shards, enabled = true, scrollLock = true, focusLock = true, inert, sideCar, ...rest} = props;
 
   const SideCar: SideCarComponent<EffectProps> = sideCar;
+
+  const {onActivation, onDeactivation, ...restProps} = lockProps;
+
   return (
     <>
       <RemoveScroll
@@ -36,7 +39,9 @@ export function FocusOn(props: ReactFocusOnSideProps) {
 
           shards={shards}
 
-          lockProps={lockProps}
+          lockProps={restProps}
+          onActivation={onActivation}
+          onDeactivation={onDeactivation}
         >
           {children}
         </ReactFocusLock>

src/types.ts

@@ -1,5 +1,13 @@
 import * as React from "react";
 
+export interface LockProps {
+  onClick?(e: React.MouseEvent): void;
+
+  onActivation?(node: HTMLElement): void;
+
+  onDeactivation?(): void;
+}
+
 export interface CommonProps {
   onEscapeKey?: (event: Event) => void;
   onClickOutside?: () => void;
@@ -28,5 +36,5 @@ export interface ReactFocusOnSideProps extends ReactFocusOnProps {
 }
 
 export interface EffectProps extends CommonProps {
-  setLockProps(settings: object): void;
+  setLockProps(settings: LockProps): void;
 }