@primer/react/lib/hooks/useDialog.js

An implementation of GitHub's Primer Design System using React

'use strict';

var reactCompilerRuntime = require('react-compiler-runtime');
var React = require('react');
var useOnEscapePress = require('./useOnEscapePress.js');

const noop = () => null;
function visible(el) {
  return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0);
}
function focusable(el) {
  const inputEl = el;
  return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
}
function useDialog(t0) {
  const $ = reactCompilerRuntime.c(27);
  const {
    modalRef,
    overlayRef,
    isOpen,
    onDismiss: t1,
    initialFocusRef,
    closeButtonRef
  } = t0;
  const onDismiss = t1 === undefined ? noop : t1;
  let t2;
  if ($[0] !== modalRef || $[1] !== onDismiss || $[2] !== overlayRef) {
    t2 = e => {
      if (modalRef.current && overlayRef.current && e.target instanceof Node && !modalRef.current.contains(e.target) && overlayRef.current.contains(e.target)) {
        onDismiss();
      }
    };
    $[0] = modalRef;
    $[1] = onDismiss;
    $[2] = overlayRef;
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  const onClickOutside = t2;
  let t3;
  let t4;
  if ($[4] !== isOpen || $[5] !== onClickOutside) {
    t3 = () => {
      if (isOpen) {
        document.addEventListener("click", onClickOutside);
        return () => {
          document.removeEventListener("click", onClickOutside);
        };
      }
    };
    t4 = [isOpen, onClickOutside];
    $[4] = isOpen;
    $[5] = onClickOutside;
    $[6] = t3;
    $[7] = t4;
  } else {
    t3 = $[6];
    t4 = $[7];
  }
  React.useEffect(t3, t4);
  let t5;
  let t6;
  if ($[8] !== closeButtonRef || $[9] !== initialFocusRef || $[10] !== isOpen) {
    t5 = () => {
      if (isOpen) {
        if (initialFocusRef && initialFocusRef.current) {
          initialFocusRef.current.focus();
        } else {
          if (closeButtonRef && closeButtonRef.current) {
            closeButtonRef.current.focus();
          }
        }
      }
    };
    t6 = [isOpen, initialFocusRef, closeButtonRef];
    $[8] = closeButtonRef;
    $[9] = initialFocusRef;
    $[10] = isOpen;
    $[11] = t5;
    $[12] = t6;
  } else {
    t5 = $[11];
    t6 = $[12];
  }
  React.useEffect(t5, t6);
  let t7;
  if ($[13] !== modalRef) {
    t7 = (e_0, movement) => {
      if (modalRef.current) {
        const items = Array.from(modalRef.current.querySelectorAll("*")).filter(focusable);
        if (items.length === 0) {
          return;
        }
        e_0.preventDefault();
        const focusedElement = document.activeElement;
        if (!focusedElement) {
          return;
        }
        const index = items.indexOf(focusedElement);
        const offsetIndex = index + movement;
        const fallbackIndex = movement === 1 ? 0 : items.length - 1;
        const focusableItem = items[offsetIndex] || items[fallbackIndex];
        return focusableItem;
      }
    };
    $[13] = modalRef;
    $[14] = t7;
  } else {
    t7 = $[14];
  }
  const getFocusableItem = t7;
  let t8;
  if ($[15] !== getFocusableItem) {
    t8 = e_1 => {
      const movement_0 = e_1.shiftKey ? -1 : 1;
      const focusableItem_0 = getFocusableItem(e_1, movement_0);
      if (!focusableItem_0) {
        return;
      }
      focusableItem_0.focus();
    };
    $[15] = getFocusableItem;
    $[16] = t8;
  } else {
    t8 = $[16];
  }
  const handleTab = t8;
  let t9;
  if ($[17] !== handleTab) {
    t9 = event => {
      switch (event.key) {
        case "Tab":
          {
            handleTab(event);
          }
      }
    };
    $[17] = handleTab;
    $[18] = t9;
  } else {
    t9 = $[18];
  }
  const onKeyDown = t9;
  let t10;
  if ($[19] !== onKeyDown) {
    t10 = () => ({
      onKeyDown
    });
    $[19] = onKeyDown;
    $[20] = t10;
  } else {
    t10 = $[20];
  }
  const getDialogProps = t10;
  let t11;
  let t12;
  if ($[21] !== isOpen || $[22] !== onDismiss) {
    t11 = event_0 => {
      if (isOpen) {
        onDismiss();
        event_0.preventDefault();
      }
    };
    t12 = [isOpen, onDismiss];
    $[21] = isOpen;
    $[22] = onDismiss;
    $[23] = t11;
    $[24] = t12;
  } else {
    t11 = $[23];
    t12 = $[24];
  }
  useOnEscapePress.useOnEscapePress(t11, t12);
  let t13;
  if ($[25] !== getDialogProps) {
    t13 = {
      getDialogProps
    };
    $[25] = getDialogProps;
    $[26] = t13;
  } else {
    t13 = $[26];
  }
  return t13;
}

module.exports = useDialog;