UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

38 lines (37 loc) 1.63 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.useCloseOnEscape = void 0; const react_1 = __importDefault(require("react")); const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack"); const common_1 = require("@workday/canvas-kit-react/common"); const usePopupModel_1 = require("./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. */ exports.useCloseOnEscape = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(model => { const onKeyDown = react_1.default.useCallback((event) => { if ((event.key === 'Esc' || event.key === 'Escape') && canvas_kit_popup_stack_1.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_1.default.useLayoutEffect(() => { if (!visible) { return; } document.addEventListener('keydown', onKeyDown); return () => { document.removeEventListener('keydown', onKeyDown); }; }, [onKeyDown, visible]); return {}; });