@clayui/shared
Version:
ClayShared component
166 lines (162 loc) • 6.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Overlay = Overlay;
var _ariaHidden = require("aria-hidden");
var _react = _interopRequireWildcard(require("react"));
var _Keys = require("./Keys");
var _Portal = require("./Portal");
var _useInteractOutside = require("./useInteractOutside");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
* SPDX-License-Identifier: BSD-3-Clause
*/
const overlayStack = [];
/**
* Overlay component is used for components like dialog and modal.
* For example, Autocomplete, DatePicker, ColorPicker, DropDown are components
* that can use and have the same consistent behavior.
*/
function Overlay(_ref) {
let {
children,
inert,
isCloseOnInteractOutside = false,
isKeyboardDismiss = false,
isModal = false,
isOpen = false,
menuClassName,
menuRef,
onClose,
portalRef,
suppress,
triggerRef
} = _ref;
const unsuppressCallbackRef = (0, _react.useRef)(null);
const isInert = (isModal || inert) && (0, _ariaHidden.supportsInert)();
const onHide = (0, _react.useCallback)(action => {
if (overlayStack[overlayStack.length - 1]?.menu === menuRef) {
onClose(action);
}
}, [onClose]);
useEvent('focus', (0, _react.useCallback)(event => {
if (portalRef && !portalRef.current?.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
onHide('blur');
}
}, [onHide]), isOpen, true, [isOpen, onHide]);
useEvent('keydown', (0, _react.useCallback)(event => {
if (event.key === _Keys.Keys.Esc && overlayStack[overlayStack.length - 1]?.menu === menuRef) {
event.stopImmediatePropagation();
event.preventDefault();
if (triggerRef.current) {
// When inert is used to suppress user interaction with the rest of
// the document, to retrieve the focus in the trigger we need to
// first undo and then move the focus.
if (unsuppressCallbackRef.current) {
unsuppressCallbackRef.current();
unsuppressCallbackRef.current = null;
}
triggerRef.current.focus();
}
onClose('escape');
}
}, [onClose]), isOpen && isKeyboardDismiss, true, [isOpen, onClose]);
(0, _useInteractOutside.useInteractOutside)({
isDisabled: isOpen ? !isCloseOnInteractOutside : true,
onInteract: event => {
// @ts-ignore
if (event.button === 0) {
onHide('blur');
}
},
onInteractStart: event => {
if (overlayStack[overlayStack.length - 1]?.menu === menuRef) {
if (unsuppressCallbackRef.current) {
unsuppressCallbackRef.current();
unsuppressCallbackRef.current = null;
}
if (isModal) {
event.stopPropagation();
event.preventDefault();
}
}
},
ref: portalRef ?? menuRef,
triggerRef
});
(0, _react.useEffect)(() => {
if (isOpen) {
overlayStack.push({
inert: isInert,
menu: menuRef
});
}
return () => {
const index = overlayStack.findIndex(object => object.menu === menuRef);
if (index >= 0) {
overlayStack.splice(index, 1);
}
};
}, [isOpen, menuRef]);
(0, _react.useEffect)(() => {
const currentMenuRef = menuRef?.current;
const previousOverlayStacks = overlayStack.slice(0, -1);
const previouslyHidden = previousOverlayStacks.findIndex(object => object.inert === undefined) >= 0;
const previouslyInert = previousOverlayStacks.findIndex(object => object.inert === true) >= 0;
if (currentMenuRef && isOpen) {
const elements = suppress ? suppress.map(ref => ref.current) : [currentMenuRef];
const hiddenElement = currentMenuRef.closest('[aria-hidden]') || currentMenuRef.closest('[inert]');
hiddenElement?.removeAttribute('data-suppressed');
hiddenElement?.removeAttribute('data-aria-hidden');
hiddenElement?.removeAttribute('aria-hidden');
hiddenElement?.removeAttribute('inert');
// Inert is a new native feature to better handle DOM arias that are not
// assertive to a SR or that should ignore any user interaction.
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
if (isInert) {
unsuppressCallbackRef.current = (0, _ariaHidden.suppressOthers)(elements);
} else {
unsuppressCallbackRef.current = (0, _ariaHidden.hideOthers)(elements);
}
return () => {
if (unsuppressCallbackRef.current) {
unsuppressCallbackRef.current();
}
if (isInert && !previouslyInert) {
document.querySelectorAll('[inert]').forEach(element => {
element.removeAttribute('inert');
});
} else if (!isInert && !previouslyHidden) {
document.querySelectorAll('[aria-hidden]').forEach(element => {
element.removeAttribute('aria-hidden');
});
}
unsuppressCallbackRef.current = null;
};
}
}, [isModal, inert, isOpen]);
return /*#__PURE__*/_react.default.createElement(_Portal.ClayPortal, {
className: menuClassName,
subPortalRef: portalRef
}, isModal && /*#__PURE__*/_react.default.createElement("span", {
"data-focus-scope-start": "true"
}), children, isModal && /*#__PURE__*/_react.default.createElement("span", {
"data-focus-scope-end": "true"
}));
}
function useEvent(name, onEvent, conditional, capture) {
let deps = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
(0, _react.useEffect)(() => {
// This check should go away when the Overlay is shown using conditional
// instead of class CSS.
if (conditional) {
document.addEventListener(name, onEvent, capture);
return () => {
document.removeEventListener(name, onEvent, capture);
};
}
}, deps);
}