piral-hooks-utils 0.15.0-alpha.3537

package/lib/hooks/asyncReplace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asyncReplace.js","sourceRoot":"","sources":["../../src/hooks/asyncReplace.ts"],"names":[],"mappings":";;;AAAA,iCAA4C;AAE5C;;;;;GAKG;AACH,SAAgB,eAAe,CAC7B,MAAwB,EACxB,UAA+B,GAAG,EAAE,GAAE,CAAC;IAEvC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAkB,KAAK,CAAC,CAAC;IACnE,MAAM,KAAK,GAAG,SAAS,YAAY,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAEjE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,SAAS,KAAK,IAAI,EAAE;YACtB,IAAI,MAAM,GAAG,IAAI,CAAC;YAElB,MAAM,EAAE,CAAC,IAAI,CACX,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,EACrC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,IAAI,YAAY,CAAC,GAAG,CAAC,CACrC,CAAC;YAEF,OAAO,GAAG,EAAE,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;SAC/B;QAED,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CAAC,SAAS,KAAK,IAAI,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;AAC/D,CAAC;AAvBD,0CAuBC"}

package/lib/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './afterVisible';
+export * from './asyncReplace';
+export * from './lockBodyScroll';
+export * from './onClickOutside';
+export * from './onScreenVisible';
+export * from './piletApi';
+export * from './prompt';

package/lib/hooks/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./afterVisible"), exports);
+__exportStar(require("./asyncReplace"), exports);
+__exportStar(require("./lockBodyScroll"), exports);
+__exportStar(require("./onClickOutside"), exports);
+__exportStar(require("./onScreenVisible"), exports);
+__exportStar(require("./piletApi"), exports);
+__exportStar(require("./prompt"), exports);
+//# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iDAA+B;AAC/B,iDAA+B;AAC/B,mDAAiC;AACjC,mDAAiC;AACjC,oDAAkC;AAClC,6CAA2B;AAC3B,2CAAyB"}

package/lib/hooks/lockBodyScroll.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook that locks scrolling on the main document.
+ * Useful for preventing the standard scrolling in context of
+ * a modal dialog.
+ */
+export declare function useLockBodyScroll(): void;

package/lib/hooks/lockBodyScroll.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLockBodyScroll = void 0;
+const react_1 = require("react");
+/**
+ * Hook that locks scrolling on the main document.
+ * Useful for preventing the standard scrolling in context of
+ * a modal dialog.
+ */
+function useLockBodyScroll() {
+    (0, react_1.useLayoutEffect)(() => {
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = 'visible';
+        };
+    }, []);
+}
+exports.useLockBodyScroll = useLockBodyScroll;
+//# sourceMappingURL=lockBodyScroll.js.map

package/lib/hooks/lockBodyScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lockBodyScroll.js","sourceRoot":"","sources":["../../src/hooks/lockBodyScroll.ts"],"names":[],"mappings":";;;AAAA,iCAAwC;AAExC;;;;GAIG;AACH,SAAgB,iBAAiB;IAC/B,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC3C,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAPD,8CAOC"}

package/lib/hooks/onClickOutside.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * Hook that detects if a click outside the given reference
+ * has been performed.
+ * @param ref The reference to the element.
+ * @param handler The callback to invoke when an outside click happened.
+ */
+export declare function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T>, handler: (event: MouseEvent) => void): void;

package/lib/hooks/onClickOutside.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnClickOutside = void 0;
+const react_1 = require("react");
+/**
+ * Hook that detects if a click outside the given reference
+ * has been performed.
+ * @param ref The reference to the element.
+ * @param handler The callback to invoke when an outside click happened.
+ */
+function useOnClickOutside(ref, handler) {
+    (0, react_1.useEffect)(() => {
+        const listener = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                handler(event);
+            }
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [handler]);
+}
+exports.useOnClickOutside = useOnClickOutside;
+//# sourceMappingURL=onClickOutside.js.map

package/lib/hooks/onClickOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onClickOutside.js","sourceRoot":"","sources":["../../src/hooks/onClickOutside.ts"],"names":[],"mappings":";;;AAAA,iCAA6C;AAE7C;;;;;GAKG;AACH,SAAgB,iBAAiB,CAAwB,GAAiB,EAAE,OAAoC;IAC9G,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrC,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC9D,OAAO,CAAC,KAAK,CAAC,CAAC;aAChB;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACjD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;YACpD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAChB,CAAC;AAhBD,8CAgBC"}

package/lib/hooks/onScreenVisible.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+/**
+ * Hook that detects if a reference element within the main document is
+ * visible.
+ * Useful for performing some animation or triggering certain actions (e.g.,
+ * loading data for infinity scrolling) when an element appears or is close
+ * to appear on screen.
+ * @param ref The reference element to be visible.
+ * @param rootMargin The tolerance level to the reference element.
+ */
+export declare function useOnScreenVisible<T extends HTMLElement>(ref: RefObject<T>, rootMargin?: string): boolean;

package/lib/hooks/onScreenVisible.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnScreenVisible = void 0;
+const react_1 = require("react");
+/**
+ * Hook that detects if a reference element within the main document is
+ * visible.
+ * Useful for performing some animation or triggering certain actions (e.g.,
+ * loading data for infinity scrolling) when an element appears or is close
+ * to appear on screen.
+ * @param ref The reference element to be visible.
+ * @param rootMargin The tolerance level to the reference element.
+ */
+function useOnScreenVisible(ref, rootMargin = '0px') {
+    const [isIntersecting, setIntersecting] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting), {
+            rootMargin,
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => observer.unobserve(ref.current);
+    }, []);
+    return isIntersecting;
+}
+exports.useOnScreenVisible = useOnScreenVisible;
+//# sourceMappingURL=onScreenVisible.js.map

package/lib/hooks/onScreenVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onScreenVisible.js","sourceRoot":"","sources":["../../src/hooks/onScreenVisible.ts"],"names":[],"mappings":";;;AAAA,iCAAuD;AAEvD;;;;;;;;GAQG;AACH,SAAgB,kBAAkB,CAAwB,GAAiB,EAAE,UAAU,GAAG,KAAK;IAC7F,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE1D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE;YAC5F,UAAU;SACX,CAAC,CAAC;QAEH,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,cAAc,CAAC;AACxB,CAAC;AAhBD,gDAgBC"}

package/lib/hooks/piletApi.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Retrieves the Pilet API stored in the provider.
+ * The component must be somewhat wrapped in the
+ * PiletApiProvider, e.g., via withPiletApi wrapper.
+ * @returns The Pilet API for this component.
+ */
+export declare function usePiletApi<TPiletApi = any>(): TPiletApi;

package/lib/hooks/piletApi.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePiletApi = void 0;
+const react_1 = require("react");
+const contexts_1 = require("../contexts");
+/**
+ * Retrieves the Pilet API stored in the provider.
+ * The component must be somewhat wrapped in the
+ * PiletApiProvider, e.g., via withPiletApi wrapper.
+ * @returns The Pilet API for this component.
+ */
+function usePiletApi() {
+    return (0, react_1.useContext)(contexts_1.PiletApiProvider);
+}
+exports.usePiletApi = usePiletApi;
+//# sourceMappingURL=piletApi.js.map

package/lib/hooks/piletApi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"piletApi.js","sourceRoot":"","sources":["../../src/hooks/piletApi.ts"],"names":[],"mappings":";;;AAAA,iCAAmC;AACnC,0CAA+C;AAE/C;;;;;GAKG;AACH,SAAgB,WAAW;IACzB,OAAO,IAAA,kBAAU,EAAC,2BAAgB,CAAC,CAAC;AACtC,CAAC;AAFD,kCAEC"}

package/lib/hooks/prompt.d.ts

@@ -0,0 +1,9 @@
+import type { History, Location } from 'history';
+/**
+ * Hook to notify the user in case of potential data loss when
+ * performing a page transition (internal or external).
+ * @param active True if the prompt should be shown, otherwise false.
+ * @param history The history of the currently used router.
+ * @param message The message to display when the prompt is shown.
+ */
+export declare function usePrompt(active: boolean, history: History, message: string, onTransition?: (location: Location) => void): void;

package/lib/hooks/prompt.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrompt = void 0;
+const react_1 = require("react");
+/**
+ * Hook to notify the user in case of potential data loss when
+ * performing a page transition (internal or external).
+ * @param active True if the prompt should be shown, otherwise false.
+ * @param history The history of the currently used router.
+ * @param message The message to display when the prompt is shown.
+ */
+function usePrompt(active, history, message, onTransition) {
+    (0, react_1.useEffect)(() => {
+        if (active) {
+            const beforeUnload = (ev) => {
+                ev.returnValue = message;
+                return message;
+            };
+            const unlisten = onTransition && history.listen(onTransition);
+            const unblock = message && history.block(message);
+            window.addEventListener('beforeunload', beforeUnload);
+            return () => {
+                unlisten && unlisten();
+                unblock && unblock();
+                window.removeEventListener('beforeunload', beforeUnload);
+            };
+        }
+        return () => { };
+    }, [active, message]);
+}
+exports.usePrompt = usePrompt;
+//# sourceMappingURL=prompt.js.map

package/lib/hooks/prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt.js","sourceRoot":"","sources":["../../src/hooks/prompt.ts"],"names":[],"mappings":";;;AAAA,iCAAkC;AAGlC;;;;;;GAMG;AACF,SAAgB,SAAS,CACxB,MAAe,EACf,OAAgB,EAChB,OAAe,EACf,YAA2C;IAE3C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,MAAM,YAAY,GAAG,CAAC,EAAqB,EAAE,EAAE;gBAC7C,EAAE,CAAC,WAAW,GAAG,OAAO,CAAC;gBACzB,OAAO,OAAO,CAAC;YACjB,CAAC,CAAC;YACF,MAAM,QAAQ,GAAG,YAAY,IAAI,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC9D,MAAM,OAAO,GAAG,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAClD,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YACtD,OAAO,GAAG,EAAE;gBACV,QAAQ,IAAI,QAAQ,EAAE,CAAC;gBACvB,OAAO,IAAI,OAAO,EAAE,CAAC;gBACrB,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YAC3D,CAAC,CAAC;SACH;QAED,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AACxB,CAAC;AAxBA,8BAwBA"}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from './contexts';
+export * from './hooks';
+export * from './hocs';

package/lib/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./contexts"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./hocs"), exports);
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAA2B;AAC3B,0CAAwB;AACxB,yCAAuB"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "piral-hooks-utils",
+  "version": "0.15.0-alpha.3537",
+  "description": "Hooks and HOC for pilets and Piral instances.",
+  "keywords": [
+    "piral",
+    "smapiot",
+    "pilet",
+    "modules",
+    "hoc",
+    "react",
+    "microfrontends",
+    "hooks",
+    "providers"
+  ],
+  "author": "smapiot",
+  "homepage": "https://piral.io",
+  "license": "MIT",
+  "module": "esm/index.js",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "esm",
+    "lib",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smapiot/piral.git"
+  },
+  "bugs": {
+    "url": "https://github.com/smapiot/piral/issues"
+  },
+  "scripts": {
+    "build": "yarn build:commonjs && yarn build:esnext",
+    "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
+    "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
+    "typedoc": "typedoc --json ../../../docs/types/piral-hooks-utils.json src --exclude \"src/**/*.test.*\"",
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "gitHead": "5da9d7fe4793668e956e96470aef95b41f2805d7"
+}

package/src/contexts/PiletApiProvider.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export const PiletApiProvider = React.createContext<any>(undefined);

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './PiletApiProvider';

package/src/hocs/index.ts

@@ -0,0 +1 @@
+export * from './withProvider';

package/src/hocs/withProvider.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { PiletApiProvider } from '../contexts';
+
+interface BaseComponentProps {
+  /**
+   * The currently used pilet API.
+   */
+  piral: any;
+}
+
+/**
+ * Wraps the component in a Pilet API provider allowing to make use of
+ * the `usePilet` hook.
+ * @param Component The component that should be wrapped in a provider.
+ * @returns The wrapped component.
+ */
+export function withPiletApi<T>(Component: React.FC<T>): React.FC<T & BaseComponentProps> {
+  return (props) => (
+    <PiletApiProvider.Provider value={props.piral}>
+      <Component {...props} />
+    </PiletApiProvider.Provider>
+  );
+}

package/src/hooks/afterVisible.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * A hook to indicate something was suddenly visible.
+ * @param time The time after which it should be triggered.
+ * @param cb The callback to use when the part was visible.
+ * @returns The reference to the element which should be watched.
+ */
+export function useAfterVisible(time: number, cb: () => void) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [intersecting, setIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((ev) => {
+      setIntersecting(ev.some((m) => m.isIntersecting));
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref.current]);
+
+  useEffect(() => {
+    if (intersecting) {
+      const tid = setTimeout(cb, time);
+      return () => clearTimeout(tid);
+    }
+  }, [intersecting, cb]);
+
+  return ref;
+}

package/src/hooks/asyncReplace.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Gives a full async lifecycle in a hook.
+ * @param action The lazy loader.
+ * @param resolve The resolve function getting the result from the promise.
+ * @returns The current executing state, and the trigger to start the async operation.
+ */
+export function useAsyncReplace<T = void>(
+  action: () => Promise<T>,
+  resolve: (result: T) => void = () => {},
+): [boolean, () => void, Error | undefined] {
+  const [executing, setExecuting] = useState<boolean | Error>(false);
+  const error = executing instanceof Error ? executing : undefined;
+
+  useEffect(() => {
+    if (executing === true) {
+      let active = true;
+
+      action().then(
+        (result) => active && resolve(result),
+        (err) => active && setExecuting(err),
+      );
+
+      return () => (active = false);
+    }
+
+    return () => {};
+  }, [executing]);
+
+  return [executing === true, () => setExecuting(true), error];
+}

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from './afterVisible';
+export * from './asyncReplace';
+export * from './lockBodyScroll';
+export * from './onClickOutside';
+export * from './onScreenVisible';
+export * from './piletApi';
+export * from './prompt';

package/src/hooks/lockBodyScroll.test.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useLockBodyScroll } from './lockBodyScroll';
+
+jest.mock('react');
+
+describe('LockBodyScroll Hook Module', () => {
+  it('sets the body overflow to hidden on being initiated', () => {
+    const usedEffect = jest.fn();
+    (React as any).useLayoutEffect = usedEffect;
+    useLockBodyScroll();
+    expect(usedEffect).toHaveBeenCalled();
+    usedEffect.mock.calls[0][0]();
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('sets the body overflow to visible on cleanup', () => {
+    const usedEffect = jest.fn();
+    (React as any).useLayoutEffect = usedEffect;
+    useLockBodyScroll();
+    const cleanup = usedEffect.mock.calls[0][0]();
+    cleanup();
+    expect(document.body.style.overflow).toBe('visible');
+  });
+});

package/src/hooks/lockBodyScroll.ts

@@ -0,0 +1,15 @@
+import { useLayoutEffect } from 'react';
+
+/**
+ * Hook that locks scrolling on the main document.
+ * Useful for preventing the standard scrolling in context of
+ * a modal dialog.
+ */
+export function useLockBodyScroll() {
+  useLayoutEffect(() => {
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = 'visible';
+    };
+  }, []);
+}

package/src/hooks/onClickOutside.test.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { useOnClickOutside } from './onClickOutside';
+
+jest.mock('react');
+
+describe('OnClickOutside Module', () => {
+  it('is properly hooked on when initiating the effect', () => {
+    const usedEffect = jest.fn();
+    const originalAdd = document.addEventListener;
+    const originalRemove = document.addEventListener;
+    document.addEventListener = jest.fn();
+    document.removeEventListener = jest.fn();
+    (React as any).useEffect = usedEffect;
+    useOnClickOutside({ current: {} as any }, jest.fn());
+    expect(usedEffect).toHaveBeenCalled();
+    const cleanup = usedEffect.mock.calls[0][0]();
+    cleanup();
+    expect(document.addEventListener).toHaveBeenCalledTimes(2);
+    document.addEventListener = originalAdd;
+    document.removeEventListener = originalRemove;
+  });
+
+  it('is properly cleaned up when leaving the effect', () => {
+    const usedEffect = jest.fn();
+    const originalAdd = document.addEventListener;
+    const originalRemove = document.addEventListener;
+    document.addEventListener = jest.fn();
+    document.removeEventListener = jest.fn();
+    (React as any).useEffect = usedEffect;
+    useOnClickOutside({ current: {} as any }, jest.fn());
+    expect(usedEffect).toHaveBeenCalled();
+    const cleanup = usedEffect.mock.calls[0][0]();
+    cleanup();
+    expect(document.removeEventListener).toHaveBeenCalledTimes(2);
+    document.addEventListener = originalAdd;
+    document.removeEventListener = originalRemove;
+  });
+
+  it('not calling the handler on mousedown if no ref is available', () => {
+    const usedEffect = jest.fn();
+    const handler = jest.fn();
+    (React as any).useEffect = usedEffect;
+    useOnClickOutside({ current: undefined }, handler);
+    const cleanup = usedEffect.mock.calls[0][0]();
+    const event = new Event('mousedown', { bubbles: true });
+    document.body.dispatchEvent(event);
+    cleanup();
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('not calling the handler on mousedown if ref is available, but contains the node', () => {
+    const usedEffect = jest.fn();
+    const handler = jest.fn();
+    (React as any).useEffect = usedEffect;
+    useOnClickOutside(
+      {
+        current: {
+          contains() {
+            return true;
+          },
+        } as any,
+      },
+      handler,
+    );
+    const cleanup = usedEffect.mock.calls[0][0]();
+    const event = new Event('mousedown', { bubbles: true });
+    document.body.dispatchEvent(event);
+    cleanup();
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('called the handler on mousedown if ref is available and does not contain node', () => {
+    const usedEffect = jest.fn();
+    const handler = jest.fn();
+    (React as any).useEffect = usedEffect;
+    useOnClickOutside(
+      {
+        current: {
+          contains() {
+            return false;
+          },
+        } as any,
+      },
+      handler,
+    );
+    const cleanup = usedEffect.mock.calls[0][0]();
+    const event = new Event('mousedown', { bubbles: true });
+    document.body.dispatchEvent(event);
+    cleanup();
+    expect(handler).toHaveBeenCalledWith(event);
+  });
+
+  it('called the handler on touchstart if ref is available and does not contain node', () => {
+    const usedEffect = jest.fn();
+    const handler = jest.fn();
+    (React as any).useEffect = usedEffect;
+    useOnClickOutside(
+      {
+        current: {
+          contains() {
+            return false;
+          },
+        } as any,
+      },
+      handler,
+    );
+    const cleanup = usedEffect.mock.calls[0][0]();
+    const event = new Event('touchstart', { bubbles: true });
+    document.body.dispatchEvent(event);
+    cleanup();
+    expect(handler).toHaveBeenCalledWith(event);
+  });
+});

package/src/hooks/onClickOutside.ts

@@ -0,0 +1,25 @@
+import { useEffect, RefObject } from 'react';
+
+/**
+ * Hook that detects if a click outside the given reference
+ * has been performed.
+ * @param ref The reference to the element.
+ * @param handler The callback to invoke when an outside click happened.
+ */
+export function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T>, handler: (event: MouseEvent) => void) {
+  useEffect(() => {
+    const listener = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        handler(event);
+      }
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [handler]);
+}