UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

47 lines (46 loc) 2.24 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.useAlwaysCloseOnOutsideClick = 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 listener for all clicks. It will only call the PopupModel's `hide` event if the * click happened outside the `stackRef` element and its children regardless of the position in the * stack. This is useful for Tooltips or hierarchical menus. Adds a * `data-behavior-click-outside-close="always"` attribute to ensure proper functionality. * * This should be used with popup elements that should close no matter their position in the stack * (i.e. Tooltips). */ exports.useAlwaysCloseOnOutsideClick = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(model => { const onClick = react_1.default.useCallback((event) => { if (!model.state.stackRef.current) { return; } if ( // Use `PopupStack.contains` instead of `ref.current.contains` so that the application can // decide if clicking the target should toggle the popup rather than it toggling implicitly // because the target is outside `ref.current` !canvas_kit_popup_stack_1.PopupStack.contains(model.state.stackRef.current, event.target)) { model.events.hide(); } }, [model.events, model.state.stackRef]); const visible = model.state.visibility !== 'hidden'; react_1.default.useLayoutEffect(() => { var _a; if (!visible) { return; } document.addEventListener('mousedown', onClick); (_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('data-behavior-click-outside-close', 'always'); return () => { document.removeEventListener('mousedown', onClick); }; }, [model.state.stackRef, visible, onClick]); return {}; });