@primer/components/lib/hooks/useDetails.js

Primer react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = require("react");

function useDetails({
  ref,
  closeOnOutsideClick,
  defaultOpen,
  onClickOutside
}) {
  const [open, setOpen] = (0, _react.useState)(defaultOpen);
  const backupRef = (0, _react.useRef)(null);
  const customRef = ref !== null && ref !== void 0 ? ref : backupRef;
  const onClickOutsideInternal = (0, _react.useCallback)(event => {
    const {
      current
    } = customRef;
    const eventTarget = event.target;
    const closest = eventTarget.closest('details');

    if (closest !== current) {
      onClickOutside && onClickOutside(event);

      if (!event.defaultPrevented) {
        setOpen(false);
      }
    }
  }, [customRef, setOpen, onClickOutside]); // handles the overlay behavior - closing the menu when clicking outside of it

  (0, _react.useEffect)(() => {
    if (open && closeOnOutsideClick) {
      document.addEventListener('click', onClickOutsideInternal);
      return () => {
        document.removeEventListener('click', onClickOutsideInternal);
      };
    }
  }, [open, closeOnOutsideClick, onClickOutsideInternal]);

  const handleToggle = e => {
    if (!e.defaultPrevented) {
      const eventTarget = e.target;
      setOpen(eventTarget.open);
    }
  };

  const getDetailsProps = () => {
    return {
      onToggle: handleToggle,
      open,
      ref: customRef
    };
  };

  return {
    open,
    setOpen,
    getDetailsProps
  };
}

var _default = useDetails;
exports.default = _default;