initial release

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+/dist/
+.DS_Store
+coverage/

.npmignore

@@ -0,0 +1,4 @@
+node_modules/
+npm-debug.log
+.DS_Store
+example

.nvmrc

@@ -0,0 +1 @@
+8.5.0

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - '8'
+cache: yarn
+script:
+  - yarn
+  - yarn test:ci
+notifications:
+  email: false

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Anton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,33 @@
+👁 React-Focus-On 
+=======
+[![NPM version](https://img.shields.io/npm/v/react-focus-on.svg)](https://www.npmjs.com/package/react-focus-on)
+
+The final solution for WAI ARIA compatible modal dialogs or full-screen tasks.
+- locks __focus__ inside. Using [react-focus-lock](https://github.com/theKashey/react-focus-lock)
+- disabled page __scroll__ and user interactions. Using [react-scroll-locky](https://github.com/theKashey/react-scroll-locky)
+- hides rest of a page from screen-readers. Using [aria-hidden](https://github.com/theKashey/aria-hidden)
+
+Now you could __focus on__ a single task.
+
+> This is basically `inert` 
+
+# API
+### FocusOn
+`FocusOn` - the focus on component
+ - `enabled`(true) - controls behaviour
+ - `[autoFocus]` - enables of disabled auto focus management (see [react-focus-lock documentation])
+ - `[onActivation]` - on activation callback
+ - `[onDeactivation]` - on deactivation callback
+
+## Additional API
+### Exposed from React-Focus-Lock
+ - `AutoFocusInside` - to mark autofocusable element
+ - `MoveFocusInside` - to move focus inside or a component mount
+
+### Exposed from React-Scroll-Locky
+ - `FocusPane` - to create a container with proper dimensions (it's more about right coordinate) set.  
+
+
+# Licence
+ MIT
+

__tests__/index.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {shallow} from 'enzyme';
+
+describe('Specs', () => {
+  const setup = () => {
+    return {
+
+    };
+  };
+
+  it('Foo', () => {
+    expect(1).toEqual(1);
+  });
+});

custom-typings/atlaskit.d.ts

@@ -0,0 +1 @@
+declare module '@atlaskit/*';

example/app.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import {Component} from 'react';
+import {GHCorner} from 'react-gh-corner';
+import {AppWrapper} from './styled';
+import {FocusOn, FocusPane, AutoFocusInside, MoveFocusInside} from "../src";
+
+export interface AppState {
+  enabled: boolean;
+}
+
+const repoUrl = 'https://github.com/zzarcon/';
+export default class App extends Component <{}, AppState> {
+  state: AppState = {
+    enabled: false
+  };
+
+  render() {
+    return (
+      <AppWrapper>
+        <FocusPane>
+          <GHCorner openInNewTab href={repoUrl}/>
+          <button>outside</button>
+          outside
+          <FocusOn enabled={this.state.enabled}>
+            inside
+            <button>inside</button>
+
+            <button onClick={() => this.setState({enabled: !this.state.enabled})}>toggle</button>
+            <MoveFocusInside key={`k-${this.state.enabled}`}>
+              <button>inside</button>
+            </MoveFocusInside>
+            <button>inside</button>
+          </FocusOn>
+          <button>outside</button>
+          Example!
+          {
+            Array(100).fill(1).map((_, x) => <div key={`k${x}`}>{Array(100).fill(1).map((_, x) => <span
+              key={`k${x}`}> *{x}</span>}</div>)
+          }
+        </FocusPane>
+      </AppWrapper>
+    )
+  }
+}

example/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example</title>
+  <style>
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="../example-bundle.js"></script>
+</body>
+</html>

example/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './app';
+
+ReactDOM.render(<App />, document.getElementById('app'));

example/styled.ts

@@ -0,0 +1,16 @@
+import styled, {injectGlobal} from 'styled-components';
+
+injectGlobal`
+  body {
+    font-family: Helvetica;
+    background-color: #D8D1F5;
+  }
+
+  * {
+    box-sizing: content-box;
+  }
+`;
+
+export const AppWrapper = styled.div`
+
+`;

example/utils.ts

@@ -0,0 +1,16 @@
+import {Component} from 'react';
+
+export class ToolboxApp<P, S> extends Component<P, S> {
+  onCheckboxChange = (propName: any) => () => {
+    const currentValue = (this.state as any)[propName];
+    this.setState({ [propName]: !currentValue } as any);
+  }
+
+  onFieldTextChange = (propName: any) => (e: any) => {
+    const value = e.target.value;
+
+    (this as any).setState({
+      [propName]: value
+    });
+  }
+}

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-focus-on",
+  "version": "1.0.0",
+  "description": "The final solution for WAI ARIA compatible modal dialogs or full-screen tasks.",
+  "main": "dist/es5/index.js",
+  "scripts": {
+    "test": "ts-react-toolbox test",
+    "bootstrap": "ts-react-toolbox init",
+    "dev": "ts-react-toolbox dev",
+    "test:ci": "ts-react-toolbox test --runInBand --coverage",
+    "build": "ts-react-toolbox build",
+    "release": "ts-react-toolbox release",
+    "lint": "ts-react-toolbox lint",
+    "static": "ts-react-toolbox publish",
+    "format": "ts-react-toolbox format",
+    "analyze": "ts-react-toolbox analyze"
+  },
+  "author": "Anton Korzunov <thekashey@gmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "ts-react-toolbox": "^0.1.22"
+  },
+  "dependencies": {
+    "aria-hidden": "^1.0.0",
+    "react-focus-lock": "^1.16.0",
+    "react-scroll-locky": "^1.1.5"
+  },
+  "engines": {
+    "node": ">=8.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0"
+  },
+  "jsnext:main": "dist/es2015/index.js",
+  "module": "dist/es2015/index.js",
+  "types": "dist/es5/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": ["react", "modal", "focus-management", "scroll", "isolation"],
+  "homepage": "https://github.com/theKashey/react-focus-on#readme"
+}

src/component.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {Component} from 'react';
+import {ScrollLocky} from 'react-scroll-locky';
+import ReactFocusLock from 'react-focus-lock'
+import {hideOthers} from 'aria-hidden';
+
+export interface ReactFocusOnProps {
+  enabled?: boolean;
+  autoFocus?: boolean;
+  onActivation?: (node: HTMLElement) => void;
+  onDeactivation?: () => void;
+}
+
+export class ReactFocusOn extends Component<ReactFocusOnProps> {
+  private _undo?: () => void;
+
+  onActivation = (node: HTMLElement) => {
+    this._undo = hideOthers(node);
+    const {onActivation} = this.props;
+    if (onActivation) {
+      onActivation(node);
+    }
+  };
+
+  onDeactivation = () => {
+    this._undo!();
+    const {onDeactivation} = this.props;
+    if (onDeactivation) {
+      onDeactivation();
+    }
+  };
+
+  render() {
+    const {children, autoFocus, enabled = true} = this.props;
+    return (
+      <ScrollLocky
+        enabled={enabled}
+      >
+        <ReactFocusLock
+          autoFocus={autoFocus}
+          onActivation={this.onActivation}
+          onDeactivation={this.onDeactivation}
+          disabled={!enabled}
+        >
+          {children}
+        </ReactFocusLock>
+      </ScrollLocky>
+    );
+  }
+}

src/index.ts

@@ -0,0 +1,3 @@
+export {ReactFocusOn as FocusOn} from './component';
+export {ScrollLockyPane as FocusPane} from 'react-scroll-locky';
+export {AutoFocusInside, MoveFocusInside} from 'react-focus-lock';

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "removeComments": true,
+    "target": "es5",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015.collection",
+      "es2015.symbol",
+      "es2015.iterable",
+      "es2015.promise"
+    ],
+    "jsx": "react"
+  },
+  "files": [
+    "./custom-typings/atlaskit.d.ts"
+  ]
+}