'use strict';

var clsx = require('clsx');
var React = require('react');
var CloseButton = require('../common/closeButton/CloseButton.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 jsxRuntime = require('react/jsx-runtime');
var logActionRequired = require('../utilities/logActionRequired.js');
var useLayout = require('../common/hooks/useLayout/useLayout.js');
var position = require('../common/propsValues/position.js');
var typography = require('../common/propsValues/typography.js');

function Drawer({
  children,
  className,
  footerContent,
  headerTitle,
  onClose,
  onUnmount,
  open = false,
  position: position$1 = 'right',
  role = 'dialog',
  'aria-labelledby': ariaLabelledBy
}) {
  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', {
            'np-drawer-header--withborder': headerTitle
          }),
          children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title, {
            id: titleId,
            type: typography.Typography.TITLE_BODY,
            children: headerTitle
          }), /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
            onClick: onClose
          })]
        }), 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
        })]
      })
    })
  });
}

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