initial code

.babelrc

@@ -1,9 +1,9 @@
 {
   "presets": [
-    ["env", {
+    ["@babel/preset-env", {
       "modules": false
     }],
-    "stage-0",
-    "react"
-  ]
-}
+    "@babel/preset-react"
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

.docz/app/db.json

@@ -0,0 +1,89 @@
+{
+  "config": {
+    "title": "react-trap",
+    "description": "Detect dom events inside or outside an element",
+    "themeConfig": {
+      "mode": "light",
+      "codemirrorTheme": "dracula",
+      "styles": {
+        "body": {
+          "fontFamily": "'Source Sans Pro', Helvetica, sans-serif",
+          "fontSize": 16,
+          "lineHeight": 1.6
+        },
+        "container": {
+          "width": "100%",
+          "padding": [
+            "20px 40px"
+          ]
+        }
+      }
+    },
+    "menu": [],
+    "ordering": "ascending",
+    "version": "1.0.0",
+    "repository": "https://github.com/sag1v/react-trap",
+    "native": false,
+    "src": "./src/docs",
+    "dest": "./demo",
+    "port": 8888,
+    "hashRouter": true,
+    "base": "/react-trap/",
+    "htmlContext": {
+      "head": {
+        "scripts": [
+          {
+            "async": "async",
+            "src": "https://www.googletagmanager.com/gtag/js?id=UA-127217040-1"
+          }
+        ],
+        "raw": "<script>\n              window.dataLayer = window.dataLayer || [];\n              function gtag(){dataLayer.push(arguments);}\n              gtag('js', new Date());\n              gtag('config', 'UA-127217040-1');\n            </script>",
+        "links": [
+          {
+            "rel": "stylesheet",
+            "href": "//codemirror.net/theme/dracula.css"
+          }
+        ]
+      }
+    }
+  },
+  "entries": {
+    "mdx/index.mdx": {
+      "name": "Getting started",
+      "route": "/",
+      "id": "feecdcc77eed3427ff64d13decdfea87",
+      "filepath": "mdx/index.mdx",
+      "link": "https://github.com/sag1v/react-trap\\edit\\master\\src\\docs\\mdx/index.mdx",
+      "slug": "mdx-index",
+      "order": 0,
+      "menu": null,
+      "headings": [
+        {
+          "depth": 1,
+          "slug": "getting-started",
+          "value": "Getting started"
+        },
+        {
+          "depth": 2,
+          "slug": "install",
+          "value": "Install"
+        },
+        {
+          "depth": 2,
+          "slug": "import",
+          "value": "Import"
+        },
+        {
+          "depth": 2,
+          "slug": "usage",
+          "value": "Usage"
+        },
+        {
+          "depth": 2,
+          "slug": "props",
+          "value": "Props"
+        }
+      ]
+    }
+  }
+}

.docz/app/imports.js

@@ -0,0 +1,4 @@
+export const imports = {
+  'mdx/index.mdx': () =>
+    import(/* webpackPrefetch: true, webpackChunkName: "mdx-index" */ 'mdx/index.mdx'),
+}

.docz/app/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Root from './root'
+
+const _onPreRenders = []
+const _onPostRenders = []
+
+const onPreRender = () => _onPreRenders.forEach(f => f && f())
+const onPostRender = () => _onPostRenders.forEach(f => f && f())
+
+const root = document.querySelector('#root')
+const render = (Component = Root) => {
+  onPreRender()
+  ReactDOM.render(<Component />, root, onPostRender)
+}
+
+render(Root)

.docz/app/root.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { hot } from 'react-hot-loader'
+import Theme from 'docz-theme-default'
+
+import { imports } from './imports'
+import db from './db.json'
+
+const Root = () => <Theme db={db} imports={imports} hashRouter={true} />
+
+export default hot(module)(Root)

.docz/cache/0864fe23a0d27db25648909a01a7e19b.json

@@ -0,0 +1 @@
+{"remainingRequest":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\node_modules\\docz-core\\node_modules\\babel-loader\\lib\\index.js?{\"presets\":[[\"@babel/preset-env\",{\"modules\":false}],\"@babel/preset-react\",[\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-trap\\\\node_modules\\\\babel-preset-docz\\\\dist\\\\index.js\",{\"flow\":true,\"typescript\":false,\"parseProps\":true}]],\"plugins\":[\"@babel/plugin-proposal-class-properties\",[\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-trap\\\\node_modules\\\\docz-utils\\\\lib\\\\named-asset-import.js\",{\"loaderMap\":{\"svg\":{\"ReactComponent\":\"@svgr/webpack?-prettier,-svgo![path]\"}}}]],\"cacheDirectory\":true,\"babelrc\":false}!C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\.docz\\app\\imports.js","dependencies":[{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\.docz\\app\\imports.js","mtime":1539519638353},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1539514478174},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\node_modules\\docz-core\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["export var imports = {\n  'mdx/index.mdx': function mdxIndexMdx() {\n    return import(\n    /* webpackPrefetch: true, webpackChunkName: \"mdx-index\" */\n    'mdx/index.mdx');\n  }\n};",{"version":3,"sources":["C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\.docz\\app\\imports.js"],"names":["imports"],"mappings":"AAAA,OAAO,IAAMA,OAAO,GAAG;AACrB,mBAAiB;AAAA,WACf;AAAO;AAA2D,mBAAlE,CADe;AAAA;AADI,CAAhB","sourcesContent":["export const imports = {\n  'mdx/index.mdx': () =>\n    import(/* webpackPrefetch: true, webpackChunkName: \"mdx-index\" */ 'mdx/index.mdx'),\n}\n"]}]}

.docz/cache/296dd51d2a30e32d883fdfd4f6a2c47e.json

@@ -0,0 +1 @@
+{"remainingRequest":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\node_modules\\docz-core\\node_modules\\babel-loader\\lib\\index.js?{\"presets\":[[\"@babel/preset-env\",{\"modules\":false}],\"@babel/preset-react\",[\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-trap\\\\node_modules\\\\babel-preset-docz\\\\dist\\\\index.js\",{\"flow\":true,\"typescript\":false,\"parseProps\":true}]],\"plugins\":[\"@babel/plugin-proposal-class-properties\",[\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-trap\\\\node_modules\\\\docz-utils\\\\lib\\\\named-asset-import.js\",{\"loaderMap\":{\"svg\":{\"ReactComponent\":\"@svgr/webpack?-prettier,-svgo![path]\"}}}]],\"cacheDirectory\":true,\"babelrc\":false}!C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\.docz\\app\\root.jsx","dependencies":[{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\.docz\\app\\root.jsx","mtime":1539519638297},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1539514478174},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\node_modules\\docz-core\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import React from 'react';\nimport { hot } from 'react-hot-loader';\nimport Theme from 'docz-theme-default';\nimport { imports } from './imports';\nimport db from './db.json';\n\nvar Root = function Root() {\n  return React.createElement(Theme, {\n    db: db,\n    imports: imports,\n    hashRouter: true\n  });\n};\n\nexport default hot(module)(Root);\nRoot.__docgenInfo = {\n  \"description\": \"\",\n  \"methods\": [],\n  \"displayName\": \"Root\"\n};",{"version":3,"sources":["C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\.docz\\app\\root.jsx"],"names":["React","hot","Theme","imports","db","Root","module"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAoB,kBAApB;AACA,OAAOC,KAAP,MAAkB,oBAAlB;AAEA,SAASC,OAAT,QAAwB,WAAxB;AACA,OAAOC,EAAP,MAAe,WAAf;;AAEA,IAAMC,IAAI,GAAG,SAAPA,IAAO;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,EAAE,EAAED,EAAX;AAAe,IAAA,OAAO,EAAED,OAAxB;AAAiC,IAAA,UAAU,EAAE;AAA7C,IAAN;AAAA,CAAb;;AAEA,eAAeF,GAAG,CAACK,MAAD,CAAH,CAAYD,IAAZ,CAAf","sourcesContent":["import React from 'react'\nimport { hot } from 'react-hot-loader'\nimport Theme from 'docz-theme-default'\n\nimport { imports } from './imports'\nimport db from './db.json'\n\nconst Root = () => <Theme db={db} imports={imports} hashRouter={true} />\n\nexport default hot(module)(Root)\n"]}]}

.docz/cache/32137dd6abdd4c7b7a3da9c4004ee203.json

@@ -0,0 +1 @@
+{"remainingRequest":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\node_modules\\docz-core\\node_modules\\babel-loader\\lib\\index.js?{\"presets\":[[\"@babel/preset-env\",{\"modules\":false}],\"@babel/preset-react\",[\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-trap\\\\node_modules\\\\babel-preset-docz\\\\dist\\\\index.js\",{\"flow\":true,\"typescript\":false,\"parseProps\":true}]],\"plugins\":[\"@babel/plugin-proposal-class-properties\",[\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-trap\\\\node_modules\\\\docz-utils\\\\lib\\\\named-asset-import.js\",{\"loaderMap\":{\"svg\":{\"ReactComponent\":\"@svgr/webpack?-prettier,-svgo![path]\"}}}],\"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-trap\\\\node_modules\\\\react-hot-loader\\\\babel.js\"],\"cacheDirectory\":true,\"babelrc\":false}!C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\src\\docs\\mdx\\index.mdx","dependencies":[{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\src\\docs\\mdx\\index.mdx","mtime":1539518581980},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1539514478174},{"path":"C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\node_modules\\docz-core\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["var _jsxFileName = \"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-trap\\\\src\\\\docs\\\\mdx\\\\index.mdx\";\n\n(function () {\n  var enterModule = require('react-hot-loader').enterModule;\n\n  enterModule && enterModule(module);\n})();\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from 'react';\nimport { MDXTag } from '@mdx-js/tag';\nimport { Playground, PropsTable } from 'docz';\nimport Trap from 'react-trap';\nimport Box from '../components/Box';\n\nvar _default = function _default(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return React.createElement(MDXTag, {\n    name: \"wrapper\",\n    components: components,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 8\n    },\n    __self: this\n  }, React.createElement(MDXTag, {\n    name: \"h1\",\n    components: components,\n    props: {\n      \"id\": \"getting-started\"\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 9\n    },\n    __self: this\n  }, \"Getting started\"), React.createElement(MDXTag, {\n    name: \"h2\",\n    components: components,\n    props: {\n      \"id\": \"install\"\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 10\n    },\n    __self: this\n  }, \"Install\"), React.createElement(MDXTag, {\n    name: \"pre\",\n    components: components,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 11\n    },\n    __self: this\n  }, React.createElement(MDXTag, {\n    name: \"code\",\n    components: components,\n    parentName: \"pre\",\n    props: {\n      \"metaString\": null\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 11\n    },\n    __self: this\n  }, \"npm install react-trap\\n\")), React.createElement(MDXTag, {\n    name: \"h2\",\n    components: components,\n    props: {\n      \"id\": \"import\"\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 13\n    },\n    __self: this\n  }, \"Import\"), React.createElement(MDXTag, {\n    name: \"pre\",\n    components: components,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 14\n    },\n    __self: this\n  }, React.createElement(MDXTag, {\n    name: \"code\",\n    components: components,\n    parentName: \"pre\",\n    props: {\n      \"metaString\": null\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 14\n    },\n    __self: this\n  }, \"import Trap from 'react-trap'\\n\")), React.createElement(MDXTag, {\n    name: \"h2\",\n    components: components,\n    props: {\n      \"id\": \"usage\"\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 16\n    },\n    __self: this\n  }, \"Usage\"), React.createElement(Playground, {\n    __position: 0,\n    __codesandbox: \"undefined\",\n    __code: \"<Trap event=\\\"click\\\">\\n  {(trapped, ref) => <Box innerRef={ref} isFocused={trapped} />}\\n</Trap>\",\n    __scope: {\n      props: props,\n      Trap: Trap,\n      Box: Box\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 17\n    },\n    __self: this\n  }, React.createElement(Trap, {\n    event: \"click\",\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 20\n    },\n    __self: this\n  }, function (trapped, ref) {\n    return React.createElement(Box, {\n      innerRef: ref,\n      isFocused: trapped,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 21\n      },\n      __self: this\n    });\n  })), React.createElement(MDXTag, {\n    name: \"h2\",\n    components: components,\n    props: {\n      \"id\": \"props\"\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 24\n    },\n    __self: this\n  }, \"Props\"), React.createElement(PropsTable, {\n    of: Carousel,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 25\n    },\n    __self: this\n  }));\n};\n\nexport default _default;\n;\n\n(function () {\n  var reactHotLoader = require('react-hot-loader').default;\n\n  var leaveModule = require('react-hot-loader').leaveModule;\n\n  if (!reactHotLoader) {\n    return;\n  }\n\n  reactHotLoader.register(_default, \"default\", \"C:\\\\Users\\\\sagiv\\\\github_cloned_projects\\\\react-trap\\\\src\\\\docs\\\\mdx\\\\index.mdx\");\n  leaveModule(module);\n})();\n\n;",{"version":3,"sources":["C:\\Users\\sagiv\\github_cloned_projects\\react-trap\\src\\docs\\mdx\\index.mdx"],"names":["React","MDXTag","Playground","PropsTable","Trap","Box","components","props","trapped","ref","Carousel"],"mappings":"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","sourcesContent":["\n  import React from 'react'\n  import { MDXTag } from '@mdx-js/tag'\n  import {Playground, PropsTable } from 'docz';\nimport Trap from 'react-trap';\nimport Box from '../components/Box';\n\nexport default ({components, ...props}) => <MDXTag name=\"wrapper\"  components={components}>\n<MDXTag name=\"h1\" components={components} props={{\"id\":\"getting-started\"}}>{`Getting started`}</MDXTag>\n<MDXTag name=\"h2\" components={components} props={{\"id\":\"install\"}}>{`Install`}</MDXTag>\n<MDXTag name=\"pre\" components={components}><MDXTag name=\"code\" components={components} parentName=\"pre\" props={{\"metaString\":null}}>{`npm install react-trap\n`}</MDXTag></MDXTag>\n<MDXTag name=\"h2\" components={components} props={{\"id\":\"import\"}}>{`Import`}</MDXTag>\n<MDXTag name=\"pre\" components={components}><MDXTag name=\"code\" components={components} parentName=\"pre\" props={{\"metaString\":null}}>{`import Trap from 'react-trap'\n`}</MDXTag></MDXTag>\n<MDXTag name=\"h2\" components={components} props={{\"id\":\"usage\"}}>{`Usage`}</MDXTag>\n<Playground __position={0} __codesandbox={`undefined`} __code={`<Trap event=\"click\">\n  {(trapped, ref) => <Box innerRef={ref} isFocused={trapped} />}\n</Trap>`} __scope={{props,Trap,Box}} >\n  <Trap event=\"click\">\n    {(trapped, ref) => <Box innerRef={ref} isFocused={trapped} />}\n  </Trap>\n</Playground>\n<MDXTag name=\"h2\" components={components} props={{\"id\":\"props\"}}>{`Props`}</MDXTag>\n<PropsTable of={Carousel} /></MDXTag>\n  "]}]}