Make FocusManager unstable (#177)

Author: TrySound

.size-snapshot.json

@@ -1,18 +1,18 @@
 {
   "dist/react-powerplug.umd.js": {
-    "bundled": 21934,
-    "minified": 8685,
-    "gzipped": 2348
+    "bundled": 21943,
+    "minified": 8694,
+    "gzipped": 2355
   },
   "dist/react-powerplug.cjs.js": {
-    "bundled": 19793,
-    "minified": 9876,
-    "gzipped": 2373
+    "bundled": 19802,
+    "minified": 9885,
+    "gzipped": 2380
   },
   "dist/react-powerplug.esm.js": {
-    "bundled": 19172,
-    "minified": 9347,
-    "gzipped": 2235,
+    "bundled": 19197,
+    "minified": 9372,
+    "gzipped": 2246,
     "treeshaked": {
       "rollup": {
         "code": 197,

README.md

@@ -83,7 +83,6 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
 | **\<Active>**                | `{ onChange }`          | `{ active, bind }`                             | [:point_down:](#active) [:books:](docs/components/Active.md)                |
 | **\<Focus>**                 | `{ onChange }`          | `{ focused, bind }`                            | [:point_down:](#focus) [:books:](docs/components/Focus.md)                  |
 | **\<Touch>**                 | `{ onChange }`          | `{ touched, bind }`                            | [:point_down:](#touch) [:books:](docs/components/Touch.md)                  |
-| **\<FocusManager>**          | `{ onChange }`          | `{ focused, blur, bind }`                      | [:point_down:](#focusmanager) [:books:](docs/components/FocusManager.md)    |
 | <h6>FORM CONTAINERS</h6>     |
 | **\<Input>**                 | `{ initial, onChange }` | `{ set, value, bind }`                         | [:point_down:](#input) [:books:](docs/components/Input.md)                  |
 | **\<Form>**                  | `{ initial, onChange }` | `{ input, values }`                            | [:point_down:](#form) [:books:](docs/components/Form.md)                    |
@@ -180,9 +179,7 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
   {({ values, remove, add }) => (
     <TagManager>
       <FormInput onSubmit={add} />
-      {values.map(tag => (
-        <Tag onRemove={() => remove(tag)}>{tag}</Tag>
-      ))}
+      {values.map(tag => <Tag onRemove={() => remove(tag)}>{tag}</Tag>)}
     </TagManager>
   )}
 </Set>
@@ -196,9 +193,7 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
     <Todo>
       <TodoFormInput onSubmit={push} />
       {list.map(todo => (
-        <TodoItem onDelete={() => pull(i => i === todo)}>
-          {todo}
-        </TodoItem>
+        <TodoItem onDelete={() => pull(i => i === todo)}>{todo}</TodoItem>
       ))}
     </Todo>
   )}

src/index.js

@@ -3,7 +3,7 @@ export { default as Compose } from './components/Compose'
 export { default as Counter } from './components/Counter'
 export { default as Field } from './components/Field'
 export { default as Focus } from './components/Focus'
-export { default as FocusManager } from './components/FocusManager'
+export { default as unstable_FocusManager } from './components/FocusManager'
 export { default as Form } from './components/Form'
 export { default as Hover } from './components/Hover'
 export { default as Interval } from './components/Interval'

src/index.js.flow

@@ -74,7 +74,7 @@ type FocusManagerRender = ({|
   |},
 |}) => React.Node
 
-declare export var FocusManager: React.ComponentType<
+declare export var unstable_FocusManager: React.ComponentType<
   | {| onChange?: FocusManagerChange, render: FocusManagerRender |}
   | {| onChange?: FocusManagerChange, children: FocusManagerRender |}
 >
@@ -131,7 +131,7 @@ type FieldRender<T> = ({|
   value: T,
   set: Updater<T>,
   reset: Reset,
-  bind: {| value: T, onChange: (SyntheticFieldEvent<*>) => void |},
+  bind: {| value: T, onChange: (SyntheticInputEvent<*>) => void |},
 |}) => React.Node
 
 type FieldProps<T> =

tests/components/FocusManager.test.js

@@ -43,7 +43,7 @@ test('keep focus when click on menu', async () => {
 
   await page.evaluate(() => {
     const React = window.React
-    const FocusManager = window.ReactPowerPlug.FocusManager
+    const FocusManager = window.ReactPowerPlug.unstable_FocusManager
 
     const style = { width: 100, height: 100 }
     const App = () => (
@@ -81,7 +81,7 @@ test('remove focus and state after calling blur', async () => {
 
   await page.evaluate(() => {
     const React = window.React
-    const { FocusManager } = window.ReactPowerPlug
+    const FocusManager = window.ReactPowerPlug.unstable_FocusManager
 
     const App = () => (
       <FocusManager>