@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
191 lines (152 loc) • 8.5 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 _SidePanel = require("./SidePanel.css");
var _Icon = _interopRequireDefault(require("../Icon"));
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() {}
function SidePanel(_ref) {
var _ref$ariaLabelledBy = _ref.ariaLabelledBy,
ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? '' : _ref$ariaLabelledBy,
_ref$blocksGlobalHotk = _ref.blocksGlobalHotkeys,
blocksGlobalHotkeys = _ref$blocksGlobalHotk === void 0 ? false : _ref$blocksGlobalHotk,
children = _ref.children,
className = _ref.className,
_ref$closeOnClickOuts = _ref.closeOnClickOutside,
closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? false : _ref$closeOnClickOuts,
_ref$dataCy = _ref['data-cy'],
dataCy = _ref$dataCy === void 0 ? 'SidePanel' : _ref$dataCy,
_ref$focusPanelOnShow = _ref.focusPanelOnShow,
focusPanelOnShow = _ref$focusPanelOnShow === void 0 ? true : _ref$focusPanelOnShow,
_ref$onClose = _ref.onClose,
onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
_ref$panelWidth = _ref.panelWidth,
panelWidth = _ref$panelWidth === void 0 ? '400px' : _ref$panelWidth,
_ref$show = _ref.show,
show = _ref$show === void 0 ? false : _ref$show,
_ref$side = _ref.side,
side = _ref$side === void 0 ? 'right' : _ref$side,
_ref$trapFocus = _ref.trapFocus,
trapFocus = _ref$trapFocus === void 0 ? false : _ref$trapFocus,
_ref$withHeader = _ref.withHeader,
withHeader = _ref$withHeader === void 0 ? true : _ref$withHeader,
_ref$withFooter = _ref.withFooter,
withFooter = _ref$withFooter === void 0 ? true : _ref$withFooter,
_ref$withOverlay = _ref.withOverlay,
withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
_ref$zIndex = _ref.zIndex,
zIndex = _ref$zIndex === void 0 ? 999 : _ref$zIndex,
rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["ariaLabelledBy", "blocksGlobalHotkeys", "children", "className", "closeOnClickOutside", "data-cy", "focusPanelOnShow", "onClose", "panelWidth", "show", "side", "trapFocus", "withHeader", "withFooter", "withOverlay", "zIndex"]);
var panelRef = (0, _react.useRef)(null);
var overlayRef = (0, _react.useRef)(null);
var _useAnimatedRender = (0, _useAnimatedRender2.default)(show, overlayRef, focusPanelOnShow && panelRef),
shouldRender = _useAnimatedRender[0],
onAnimationEnd = _useAnimatedRender[1];
(0, _useClickOutside.default)(getClickOutsideRef(), function () {
onClose();
});
function getClickOutsideRef() {
if (closeOnClickOutside === 'panel') {
return panelRef;
}
if (closeOnClickOutside === 'overlay') {
return overlayRef;
}
return null;
}
function handleOverlayKeyDown(e) {
if (shouldRender && e.key === 'Escape') {
e.stopPropagation();
onClose();
} else if (e.key === 'Tab' && trapFocus && panelRef.current) {
(0, _focus.manageTrappedFocus)(panelRef.current, e);
}
}
return shouldRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidePanel.OverlayUI, {
className: (0, _classnames.default)('SidePanel-Overlay', show && 'element-in', !withOverlay && 'no-overlay', side, className),
"data-cy": "sidepanel-overlay",
"data-testid": "sidepanel-overlay",
onAnimationStart: function onAnimationStart(e) {
if (e.target === overlayRef.current) {
setTimeout(function () {
panelRef.current.classList.add('element-in');
}, 100);
}
},
onAnimationEnd: onAnimationEnd,
onKeyDown: handleOverlayKeyDown,
ref: overlayRef,
zIndex: zIndex,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SidePanel.SidePanelUI, (0, _extends2.default)({
"aria-modal": "true",
"aria-labelledby": ariaLabelledBy,
className: "SidePanel",
dataCy: dataCy,
"data-blocks-global-hotkeys": blocksGlobalHotkeys,
"data-testid": "sidepanel",
id: "sidepanel",
panelWidth: panelWidth,
ref: panelRef,
role: "dialog",
tabIndex: "0"
}, rest, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SidePanel.ClosePanelButtonUI, {
"aria-label": "close side panel button",
className: "SidePanel__CloseButton",
onClick: onClose,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
size: 24,
name: "cross"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidePanel.ContentUI, {
className: "SidePanel__Content",
children: children
})]
}))
}) : null;
}
SidePanel.propTypes = {
/** If you include a Heading in the SidePanel, 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 panel body */
children: _propTypes.default.any,
/** Custom classname on this component */
className: _propTypes.default.string,
/** Whether to close the Panel when clicking outside of it, pass a string with value "panel" if clicking ouside the actual Panel, or "overlay" if clicking outside the overlay should close it (in case of "contained panels") */
closeOnClickOutside: _propTypes.default.oneOf([null, undefined, 'panel', 'overlay']),
/** Data attr applied for Cypress tests */
'data-cy': _propTypes.default.string,
/** If you don't want the focus to be moved to the Panel when it enters */
focusPanelOnShow: _propTypes.default.bool,
/** Function that gets called when clicking the `x` button and when pressing `esc`, use this to close the panel in your app */
onClose: _propTypes.default.func,
/** How wide the panel should be */
panelWidth: _propTypes.default.string,
/** Control whether the panel is open or close */
show: _propTypes.default.bool,
/** Which side of the screen to render the panel in */
side: _propTypes.default.oneOf(['left', 'right']),
/** Whether to restrict focus to elements inside the modal */
trapFocus: _propTypes.default.bool,
/** Enable a default footer that includes a big CTA button */
withFooter: _propTypes.default.bool,
/** In case you don't want the "overlay" */
withOverlay: _propTypes.default.bool,
/** Customize the z-index */
zIndex: _propTypes.default.number
};
var _default = SidePanel;
exports.default = _default;