@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
248 lines (193 loc) • 10.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _useAnimatedRender2 = _interopRequireDefault(require("../../hooks/useAnimatedRender"));
var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
var _focus = require("../../utilities/focus");
var _SimpleModal = require("./SimpleModal.css");
var _SimpleModal2 = require("./SimpleModal.utils");
var _lodash = _interopRequireDefault(require("lodash.isnil"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function noop() {}
var DATA_COMPONENTS_ID = {
OVERLAY: 'simple-modal-overlay',
MODAL: 'simple-modal'
};
function SimpleModal(_ref) {
var _children$type;
var _ref$ariaLabelledBy = _ref.ariaLabelledBy,
ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? '' : _ref$ariaLabelledBy,
_ref$blocksGlobalHotk = _ref.blocksGlobalHotkeys,
blocksGlobalHotkeys = _ref$blocksGlobalHotk === void 0 ? true : _ref$blocksGlobalHotk,
children = _ref.children,
className = _ref.className,
customCloseButton = _ref.customCloseButton,
_ref$closeOnClickOuts = _ref.closeOnClickOutside,
closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? false : _ref$closeOnClickOuts,
_ref$dataCy = _ref['data-cy'],
dataCy = _ref$dataCy === void 0 ? 'SimpleModal' : _ref$dataCy,
_ref$focusModalOnShow = _ref.focusModalOnShow,
focusModalOnShow = _ref$focusModalOnShow === void 0 ? true : _ref$focusModalOnShow,
_ref$onClose = _ref.onClose,
onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
_ref$show = _ref.show,
show = _ref$show === void 0 ? false : _ref$show,
_ref$trapFocus = _ref.trapFocus,
trapFocus = _ref$trapFocus === void 0 ? true : _ref$trapFocus,
_ref$width = _ref.width,
width = _ref$width === void 0 ? '360px' : _ref$width,
_ref$height = _ref.height,
height = _ref$height === void 0 ? '390px' : _ref$height,
_ref$unsetDimensions = _ref.unsetDimensions,
unsetDimensions = _ref$unsetDimensions === void 0 ? false : _ref$unsetDimensions,
_ref$withCloseButton = _ref.withCloseButton,
withCloseButton = _ref$withCloseButton === void 0 ? true : _ref$withCloseButton,
_ref$zIndex = _ref.zIndex,
zIndex = _ref$zIndex === void 0 ? 999 : _ref$zIndex,
_ref$zIndexCloseButto = _ref.zIndexCloseButton,
zIndexCloseButton = _ref$zIndexCloseButto === void 0 ? 5 : _ref$zIndexCloseButto,
rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["ariaLabelledBy", "blocksGlobalHotkeys", "children", "className", "customCloseButton", "closeOnClickOutside", "data-cy", "focusModalOnShow", "onClose", "show", "trapFocus", "width", "height", "unsetDimensions", "withCloseButton", "zIndex", "zIndexCloseButton"]);
var modalRef = (0, _react.useRef)(null);
var overlayRef = (0, _react.useRef)(null);
var _useAnimatedRender = (0, _useAnimatedRender2.default)(show, overlayRef, focusModalOnShow && modalRef),
shouldRender = _useAnimatedRender[0],
onAnimationEnd = _useAnimatedRender[1];
(0, _useClickOutside.default)(getClickOutsideRef(), function (e) {
var target = e.target; // If there is another modal around don't fire onClose under these scenarios:
/**
* a) if the clicked element is a modal, but not _this_ modal
*/
if (target.dataset.componentId === DATA_COMPONENTS_ID.MODAL && target !== modalRef.current) {
return;
}
/**
* b) if the clicked element is a modal overlay, but not the one containing _this_ modal
*/
if (target.dataset.componentId === DATA_COMPONENTS_ID.OVERLAY && target.firstChild !== modalRef.current) {
return;
}
var targetParentModal = target.closest("[data-component-id=\"" + DATA_COMPONENTS_ID.MODAL + "\"]");
/**
* c) if the clicked element is inside a modal, but not inside _this_ modal
*/
if (targetParentModal && targetParentModal !== modalRef.current) {
return;
}
onClose(e);
});
function getClickOutsideRef() {
if (closeOnClickOutside === 'modal') {
return modalRef;
}
if (closeOnClickOutside === 'overlay') {
return overlayRef;
}
return null;
}
function handleOverlayKeyDown(e) {
// Prevent keyboard events originating from the modal from leaking out onto the page.
e.stopPropagation();
if (shouldRender && e.key === 'Escape') {
onClose(e);
} else if (e.key === 'Tab' && trapFocus && modalRef.current) {
(0, _focus.manageTrappedFocus)(modalRef.current, e);
}
}
function renderCloseButton() {
if (withCloseButton) {
if (customCloseButton && /*#__PURE__*/_react.default.isValidElement(customCloseButton)) {
var clickHandler = customCloseButton.props.onClick || onClose;
return /*#__PURE__*/_react.default.cloneElement(customCloseButton, {
onClick: clickHandler
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleModal.CloseModalButtonUI, {
"aria-label": "close modal button",
className: "SimpleModal__CloseButton",
onClick: function onClick(e) {
e.stopPropagation();
onClose(e);
},
$zIndex: zIndexCloseButton,
icon: "cross-small",
size: "lg",
seamless: true
});
}
return null;
}
var clearDimensions = (0, _SimpleModal2.shouldUnsetDimensions)(unsetDimensions, children == null ? void 0 : (_children$type = children.type) == null ? void 0 : _children$type.name);
return shouldRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleModal.SimpleModalOverlayUI, {
className: (0, _classnames.default)('SimpleModal__Overlay', show && 'element-in', className),
"data-component-id": DATA_COMPONENTS_ID.OVERLAY,
"data-testid": DATA_COMPONENTS_ID.OVERLAY,
onAnimationEnd: onAnimationEnd,
onKeyDown: handleOverlayKeyDown,
ref: overlayRef,
$zIndex: zIndex,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SimpleModal.SimpleModalUI, (0, _extends2.default)({
"aria-modal": "true",
"aria-hidden": !(0, _lodash.default)(rest.ariaHidden) ? rest.ariaHidden : !show,
"aria-labelledby": ariaLabelledBy,
className: "SimpleModal",
dataCy: dataCy,
"data-component-id": DATA_COMPONENTS_ID.MODAL,
"data-testid": DATA_COMPONENTS_ID.MODAL,
"data-blocks-global-hotkeys": blocksGlobalHotkeys,
id: DATA_COMPONENTS_ID.MODAL,
role: "dialog",
ref: modalRef,
height: clearDimensions ? null : height,
width: clearDimensions ? null : width,
tabIndex: "0"
}, rest, {
children: [renderCloseButton(), children]
}))
}) : null;
}
SimpleModal.propTypes = {
/** If you include a Heading in the modal, give it the same ID as the value you put here. Otherwise add a `aria-label` with a description */
ariaLabelledBy: _propTypes.default.string,
/** Adds a data-blocks-global-hotkeys="true" to the modal element in case you want to signal that no global hotkeys should be allowed when the modal is on screen */
blocksGlobalHotkeys: _propTypes.default.bool,
/** Content to be rendered inside the modal */
children: _propTypes.default.any,
/** Custom classname on this component */
className: _propTypes.default.string,
/** Pass your own close button, don't forget to style it and position it. Your `onClose` handler will be attached to it automatically, or you can add your own click handler directly on it */
customCloseButton: _propTypes.default.element,
/** Whether to close the Modal when clicking outside, pass a string with value "modal" if clicking ouside the Modal, or "overlay" if clicking outside the overlay should close it (in case of "contained modals") */
closeOnClickOutside: _propTypes.default.oneOf([null, undefined, 'modal', 'overlay']),
/** Data attr applied for Cypress tests */
'data-cy': _propTypes.default.string,
/** If you don't want the focus to be moved to the Modal when it enters */
focusModalOnShow: _propTypes.default.bool,
/** Customize the modal's height */
height: _propTypes.default.string,
/** Function that gets called when clicking the `x` button and when pressing `esc`, use this to close the modal in your app */
onClose: _propTypes.default.func,
/** Control whether the modal is open or close */
show: _propTypes.default.bool,
/** Whether to restrict focus to elements inside the modal */
trapFocus: _propTypes.default.bool,
/** Explicitily remove the height and width values so they depend on the content instead */
unsetDimensions: _propTypes.default.bool,
/** Customize the modal's width */
width: _propTypes.default.string,
/** Whether to include a close button */
withCloseButton: _propTypes.default.bool,
/** Customize the z-index for the modal */
zIndex: _propTypes.default.number,
/** Customize the z-index specifically for the close modal button */
zIndexCloseButton: _propTypes.default.number
};
var _default = SimpleModal;
exports.default = _default;