'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var clsx = require('clsx');
var React = require('react');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.js');
require('../common/propsValues/size.js');
var typography = require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
var position = require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
var icons = require('@transferwise/icons');
var reactIntl = require('react-intl');
var CloseButton_messages = require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
require('@transferwise/neptune-validation');
require('../provider/direction/DirectionProvider.js');
var useLayout = require('../common/hooks/useLayout/useLayout.js');
var Dimmer = require('../dimmer/Dimmer.js');
var OverlayIdProvider = require('../provider/overlay/OverlayIdProvider.js');
var SlidingPanel = require('../slidingPanel/SlidingPanel.js');
var Title = require('../title/Title.js');
var logActionRequired = require('../utilities/logActionRequired.js');
var IconButton = require('../iconButton/IconButton.js');

function Drawer({
  children,
  className,
  footerContent,
  headerTitle,
  onClose,
  onUnmount,
  open = false,
  position: position$1 = 'right',
  role = 'dialog',
  'aria-labelledby': ariaLabelledBy
}) {
  const intl = reactIntl.useIntl();
  logActionRequired.logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
  const {
    isMobile
  } = useLayout.useLayout();
  const titleId = React.useId();
  const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
  return /*#__PURE__*/jsxRuntime.jsx(Dimmer.default, {
    open: open,
    onClose: onClose,
    onExited: onUnmount,
    children: /*#__PURE__*/jsxRuntime.jsx(SlidingPanel.default, {
      open: open,
      position: isMobile ? position.Position.BOTTOM : position$1,
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        id: overlayId,
        role: role,
        "aria-modal": true,
        "aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
        className: clsx.clsx('np-drawer', className),
        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
          className: clsx.clsx('np-drawer-header', 'd-flex', 'align-items-center', headerTitle ? 'justify-content-between' : 'justify-content-end', 'flex-wrap'),
          children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title.default, {
            id: titleId,
            type: typography.Typography.TITLE_SUBSECTION,
            className: "np-drawer-title",
            children: headerTitle
          }), /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
            size: 40,
            priority: "tertiary",
            "aria-label": intl.formatMessage(CloseButton_messages.default.ariaLabel),
            onClick: onClose,
            children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
          })]
        }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
          className: clsx.clsx('np-drawer-content'),
          children: children
        }), footerContent ? /*#__PURE__*/jsxRuntime.jsx("div", {
          className: clsx.clsx('np-drawer-footer'),
          children: footerContent
        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "m-t-3"
        })]
      })
    })
  });
}

exports.default = Drawer;
//# sourceMappingURL=Drawer.js.map
