@shelf/react-outside-click 0.1.0

package/.husky/_/husky.sh

@@ -0,0 +1,31 @@
+#!/bin/sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    if [ "$HUSKY_DEBUG" = "1" ]; then
+      echo "husky (debug) - $1"
+    fi
+  }
+
+  readonly hook_name="$(basename "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  export readonly husky_skip_init=1
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+  fi
+
+  exit $exitCode
+fi

package/README.md

@@ -0,0 +1,134 @@
+# @shelf/react-outside-click
+
+React library for handling outside clicks of a specified element.
+
+## Installation
+
+Install the library using npm:
+
+```shell
+$ npm install @shelf/react-outside-click
+```
+
+Install the library using yarn:
+
+```shell
+$ yarn add @shelf/react-outside-click
+```
+
+## Usage
+### ClickOutsideProvider
+`ClickOutsideProvider` is a component that wraps its children and detects clicks outside of its container element.
+
+```js
+import { ClickOutsideProvider } from '@shelf/react-outside-click';
+
+const App = () => {
+  const onOutsideClick = () => {
+    console.log('Clicked outside')
+  };
+
+  return (
+    <ClickOutsideProvider onOutsideClick={onOutsideClick}>
+      <span>Shelf.io</span>
+    </ClickOutsideProvider>
+  );
+};
+```
+
+#### Props
+
+**onOutsideClick**
+
+Type: `function  (required)`
+
+A function that will be called when an outside click is detected.
+
+**disabled**
+
+Type: `boolean  (optional)`
+
+If set to true, the outside click detection will be disabled.
+
+**mouseEvent**
+
+Type: `string  (optional)`
+
+The mouse event to listen for. Defaults to 'mousedown'
+
+**listenerOptions**
+
+Type: `boolean | AddEventListenerOptions  (optional)`
+
+Additional options for the event listener. By default, it uses capture phase.This behavior ensures that the click outside event is captured before any click events on the descendants, even if stopPropagation is used.
+See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture
+
+
+
+### useClickOutside
+`useClickOutside` is a custom hook that attaches an outside click event listener to a specified element.
+
+```js
+import { useRef } from 'react'
+import { useClickOutside } from '@shelf/react-outside-click';
+
+const Component() {
+  const ref = useRef(null)
+
+  const handleClickInside = () => {
+    console.log('Clicked outside')
+  }
+
+  useOnClickOutside(ref, handleClickOutside, {mouseEvent: 'mouseup'})
+
+  return <span ref={ref}>Shelf.io</span>
+}
+```
+
+#### Props
+
+**ref**
+
+Type: `RefObject<T>  (required)`
+
+A ref object that points to the target element.
+
+**onOutsideClick**
+
+Type: `function  (required)`
+
+A function that will be called when an outside click is detected.
+
+**options:**
+
+> **disabled**
+
+Type: `boolean  (optional)`
+
+If set to true, the outside click detection will be disabled.
+
+> **mouseEvent**
+
+Type: `string  (optional)`
+
+The mouse event to listen for. Defaults to 'mousedown'
+
+> **listenerOptions**
+
+Type: `boolean | AddEventListenerOptions  (optional)`
+
+Additional options for the event listener. By default, it uses capture phase.This behavior ensures that the click outside event is captured before any click events on the descendants, even if stopPropagation is used.
+See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture
+
+## Publish
+
+```sh
+$ git checkout master
+$ yarn version
+$ yarn publish
+$ git push origin master --tags
+```
+
+## License
+
+MIT © [Shelf](https://shelf.io)

package/lib/components/ClickOutsideProvider.d.ts

@@ -0,0 +1,2 @@
+import type { ClickOutsideProviderProps } from '../types';
+export declare const ClickOutsideProvider: ({ children, onOutsideClick, ...options }: ClickOutsideProviderProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/ClickOutsideProvider.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useClickOutside } from './useClickOutside';
+export const ClickOutsideProvider = ({ children, onOutsideClick, ...options }) => {
+    const ref = useRef(null);
+    useClickOutside(ref, onOutsideClick, options);
+    return _jsx("div", { ref: ref, children: children });
+};

package/lib/components/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import type { ClickOutsideHandler, Options, Ref } from '../types';
+export declare const useClickOutside: (ref: Ref, onOutsideClick: ClickOutsideHandler, options?: Options) => void;

package/lib/components/useClickOutside.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+export const useClickOutside = (ref, onOutsideClick, options) => {
+    const { mouseEvent = 'mousedown', disabled, listenerOptions = true } = options || {};
+    const savedHandler = useRef(onOutsideClick);
+    useEffect(() => {
+        savedHandler.current = onOutsideClick;
+    }, [onOutsideClick]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                savedHandler.current(event);
+            }
+        };
+        if (!disabled) {
+            // `useCapture` for `options` is set to true by default to handle the capture phase of the event.
+            // It ensures that the click outside event will be captured before any click events on the descendants,
+            // even if `stopPropagation` is used.
+            document.addEventListener(mouseEvent, handleClickOutside, listenerOptions);
+        }
+        return () => {
+            document.removeEventListener(mouseEvent, handleClickOutside, listenerOptions);
+        };
+    }, [mouseEvent, disabled, listenerOptions, ref]);
+};

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+import { ClickOutsideProvider } from './components/ClickOutsideProvider';
+import { useClickOutside } from './components/useClickOutside';
+export { ClickOutsideProvider, useClickOutside };

package/lib/index.js

@@ -0,0 +1,3 @@
+import { ClickOutsideProvider } from './components/ClickOutsideProvider';
+import { useClickOutside } from './components/useClickOutside';
+export { ClickOutsideProvider, useClickOutside };

package/lib/types.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode, RefObject } from 'react';
+export type ClickOutsideHandler = (event: MouseEvent) => void;
+export type Ref<T extends HTMLElement = HTMLElement> = RefObject<T>;
+export type Options = {
+    disabled?: boolean;
+    mouseEvent?: 'mousedown' | 'mouseup';
+    listenerOptions?: boolean | AddEventListenerOptions;
+};
+export type ClickOutsideProviderProps = {
+    children: ReactNode;
+    onOutsideClick: ClickOutsideHandler;
+} & Options;

package/lib/types.js

@@ -0,0 +1 @@
+export {};

package/license

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Gemshelf Inc. (shelf.io)
+
+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.

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@shelf/react-outside-click",
+  "version": "0.1.0",
+  "description": "React library for handling outside clicks of a specified element",
+  "license": "MIT",
+  "author": {
+    "name": "Andrii Butsa",
+    "email": "andrii.butsa@shelf.io",
+    "url": "https://shelf.io"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": "./lib/index.js",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "rm -rf lib/ && tsc",
+    "coverage": "yarn test --coverage",
+    "lint": "yarn lint:ci --fix",
+    "lint:ci": "eslint . --ext .js,.ts,.tsx,.json",
+    "prepack": "yarn build",
+    "size": "size-limit",
+    "test": "TZ=UTC jest src",
+    "type-check": "tsc --noEmit"
+  },
+  "lint-staged": {
+    "*.{html,md,yml}": "prettier --write",
+    "*.{ts,js,json,tsx,jsx}": "eslint --fix",
+    ".circleci/config.yml": ".husky/validate-circleci-config.sh"
+  },
+  "prettier": "@shelf/prettier-config",
+  "dependencies": {},
+  "devDependencies": {
+    "@shelf/eslint-config": "2.29.3",
+    "@shelf/prettier-config": "1.0.0",
+    "@shelf/tsconfig": "0.0.11",
+    "@size-limit/esbuild-why": "8.2.4",
+    "@size-limit/preset-small-lib": "8.2.4",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
+    "@types/jest": "29.5.2",
+    "@types/node": "16",
+    "@types/react": "18.2.13",
+    "eslint": "8.43.0",
+    "husky": "8.0.3",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "lint-staged": "13.2.2",
+    "prettier": "2.8.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "size-limit": "8.2.4",
+    "ts-jest": "29.1.0",
+    "typescript": "5.1.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "size-limit": [
+    {
+      "path": "lib/index.js",
+      "limit": "425 B"
+    }
+  ]
+}