@helpscout/hsds-react/hooks/useClickOutside.js

React component library for Help Scout's Design System

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = require("react");

/**
 * Custom hook that adds a click event listener on the document that gets
 * executed when clicking outside a given DOM Node passed as a ref.
 *
 * @param {Object} ref The Ref to the DOM node to detect clicking outside of
 * @param {*} callback The callback to execute on clicking
 */
var useClickOutside = function useClickOutside(ref, callback) {
  var handleClick = function handleClick(e) {
    if (ref && ref.current && !ref.current.contains(e.target) && isVisible(e.target)) {
      callback(e);
    }
  };

  (0, _react.useEffect)(function () {
    if (ref) {
      document.addEventListener('click', handleClick);
    }

    return function () {
      if (ref) {
        document.removeEventListener('click', handleClick);
      }
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
};

function isVisible(elem) {
  return !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
}

var _default = useClickOutside;
exports.default = _default;