Merge branch 'develop' of github.com:heyjul3s/artifak into chore/bund…

…le-size-reduction

packages/useclickaway/README.md

@@ -0,0 +1,11 @@
+# `@artifak/useclickaway`
+
+> TODO: description
+
+## Usage
+
+```
+const useclickaway = require('@artifak/useclickaway');
+
+// TODO: DEMONSTRATE API
+```

packages/useclickaway/__tests__/useclickaway.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useClickAway } from '../src';
+
+describe('@artifak/useclickaway', () => {
+  const onClickAway = jest.fn();
+
+  const Dummy = () => {
+    const ref: React.RefObject<HTMLDivElement> = React.createRef();
+
+    useClickAway(ref, onClickAway);
+
+    const onClick = () => {
+      console.log('Clicked');
+    };
+
+    return (
+      <div>
+        Wrapper
+        <div ref={ref} onClick={onClick}>
+          Click Me
+        </div>
+      </div>
+    );
+  };
+
+  it('calls the clickAway callback when click event occurs on non-target ref', () => {
+    render(<Dummy />);
+
+    const Wrapper = screen.getByText('Wrapper');
+
+    Wrapper.focus();
+    Wrapper.click();
+
+    expect(onClickAway).toHaveBeenCalled();
+  });
+});

packages/useclickaway/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@artifak/useclickaway",
+  "version": "1.0.0",
+  "description": "A hook to handle click events when not occurring on targeted element.",
+  "keywords": [],
+  "author": "Julian Low",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "dist/useclickaway.cjs.js",
+  "module": "dist/useclickaway.esm.js",
+  "src": "src/index.ts",
+  "types": "dist/src/index.d.ts",
+  "directories": {
+    "src": "src",
+    "test": "__tests__"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heyjul3s/artifak.git"
+  },
+  "scripts": {
+    "build": "rimraf dist && builder",
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/heyjul3s/artifak/issues"
+  },
+  "homepage": "https://github.com/heyjul3s/artifak#readme",
+  "devDependencies": {
+    "@artifak/bundler": "^1.1.4"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1"
+  }
+}

packages/useclickaway/src/index.ts

@@ -0,0 +1,18 @@
+import { useEffect, RefObject } from 'react';
+
+export function useClickAway(
+  ref: RefObject<HTMLElement | null>,
+  onClickAway: (e: Event) => void
+) {
+  const handleClick = (e: Event) => {
+    ref.current && !ref.current.contains(e.target as Node) && onClickAway(e);
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+
+    return function unmountUseClickAway() {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [ref]);
+}

packages/useclickaway/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "."
+  },
+  "references": [],
+  "include": ["src"]
+}