@workday/canvas-kit-react/popup/lib/hooks/useCloseOnEscape.ts

The parent module that contains all Workday Canvas Kit React components

import React from 'react';

import {PopupStack} from '@workday/canvas-kit-popup-stack';
import {createElemPropsHook} from '@workday/canvas-kit-react/common';

import {usePopupModel} from './usePopupModel';

/**
 * Registers global detection of the Escape key. It will only call the {@link PopupModel}'s `hide`
 * event if the provided model's `state.stackRef` element is the topmost in the stack.
 *
 * This should be used with popup elements that are dismissible like Tooltips, Modals, non-modal
 * dialogs, dropdown menus, etc.
 */
export const useCloseOnEscape = createElemPropsHook(usePopupModel)(model => {
  const onKeyDown = React.useCallback(
    (event: KeyboardEvent) => {
      if (
        (event.key === 'Esc' || event.key === 'Escape') &&
        PopupStack.isTopmost(model.state.stackRef.current!)
      ) {
        model.events.hide(event);
      }
    },
    [model.state.stackRef, model.events]
  );

  const visible = model.state.visibility !== 'hidden';

  // `useLayoutEffect` for automation
  React.useLayoutEffect(() => {
    if (!visible) {
      return;
    }
    document.addEventListener('keydown', onKeyDown);
    return () => {
      document.removeEventListener('keydown', onKeyDown);
    };
  }, [onKeyDown, visible]);

  return {};
});