@mapbox/mr-ui/drawer/drawer.js

UI components for Mapbox projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Drawer;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
var VisuallyHidden = _interopRequireWildcard(require("@radix-ui/react-visually-hidden"));
var _eventTrap = _interopRequireDefault(require("../modal/event-trap"));
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 && Object.prototype.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; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
/**
 * An accessible drawer implemented based on modal component.
 *
 * This drawer *traps focus within it*. You should be aware of that, because it
 * can sometimes introduce a hurdle when integrating the drawer with other
 * things, especially third-party libraries. But it's an essential UX feature.
 */

function Drawer(_ref) {
  let {
    children,
    side = 'left',
    allowEventBubbling = false,
    themeOverlay = '',
    themeContent = '',
    accessibleTitle = 'drawer',
    onExit
  } = _ref;
  const overlayProps = {
    className: (0, _classnames.default)(`fixed top bottom left right ${themeOverlay}`, {
      'bg-darken50': !themeOverlay?.includes('bg-')
    }),
    'data-testid': 'drawer-overlay'
  };
  const rootProps = {
    defaultOpen: true
  };
  const contentProps = {
    className: (0, _classnames.default)(`overflow-auto scroll-styled fixed top bottom ${themeContent}`, {
      left: side === 'left',
      right: side === 'right',
      // Default background color
      'bg-white': !themeContent?.includes('bg-')
    })
  };
  if (onExit) {
    rootProps.onOpenChange = onExit;
  }
  const drawer = /*#__PURE__*/_react.default.createElement(DialogPrimitive.Root, _extends({}, rootProps, {
    open: true
  }), /*#__PURE__*/_react.default.createElement(DialogPrimitive.Portal, null, /*#__PURE__*/_react.default.createElement(DialogPrimitive.Overlay, overlayProps, /*#__PURE__*/_react.default.createElement(DialogPrimitive.Content, contentProps, /*#__PURE__*/_react.default.createElement(VisuallyHidden.Root, null, /*#__PURE__*/_react.default.createElement(DialogPrimitive.Title, null, accessibleTitle)), children))));
  if (!allowEventBubbling) {
    return /*#__PURE__*/_react.default.createElement(_eventTrap.default, null, drawer);
  }
  return drawer;
}
Drawer.propTypes = {
  /**
   * The content of the drawer
   */
  children: _propTypes.default.node.isRequired,
  /**
   * The side of the drawer. Could be `left` or `right`
   */
  side: _propTypes.default.oneOf(['left', 'right']),
  /**
   * We stop propagation on clicks by default to enable more intuitive
   * operation with React Portals. If you need click events to bubble up
   * to parent components, set this prop to true
   */
  allowEventBubbling: _propTypes.default.bool,
  /**
   * Additional class name for the overlay,
   * along with the existing classes `fixed top bottom left right bg-darken50`
   */
  themeOverlay: _propTypes.default.string,
  /**
   * Additional class name for the content,
   * along with the existing classes `overflow-auto scroll-styled fixed top bottom`
   */
  themeContent: _propTypes.default.string,
  /**
   * The callback function when the drawer is exited by clicking the overlay
   */
  onExit: _propTypes.default.func
};