import { clsx } from 'clsx';
import { useId, useContext } from 'react';
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
import Dimmer from '../dimmer/Dimmer.mjs';
import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider.mjs';
import SlidingPanel from '../slidingPanel/SlidingPanel.mjs';
import Title from '../title/Title.mjs';
import { logActionRequiredIf } from '../utilities/logActionRequired.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useLayout } from '../common/hooks/useLayout/useLayout.mjs';
import { Position } from '../common/propsValues/position.mjs';
import { Typography } from '../common/propsValues/typography.mjs';

function Drawer({
  children,
  className,
  footerContent,
  headerTitle,
  onClose,
  onUnmount,
  open = false,
  position = 'right',
  role = 'dialog',
  'aria-labelledby': ariaLabelledBy
}) {
  logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
  const {
    isMobile
  } = useLayout();
  const titleId = useId();
  const overlayId = useContext(OverlayIdContext);
  return /*#__PURE__*/jsx(Dimmer, {
    open: open,
    onClose: onClose,
    onExited: onUnmount,
    children: /*#__PURE__*/jsx(SlidingPanel, {
      open: open,
      position: isMobile ? Position.BOTTOM : position,
      children: /*#__PURE__*/jsxs("div", {
        id: overlayId,
        role: role,
        "aria-modal": true,
        "aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
        className: clsx('np-drawer', className),
        children: [/*#__PURE__*/jsxs("div", {
          className: clsx('np-drawer-header', {
            'np-drawer-header--withborder': headerTitle
          }),
          children: [headerTitle && /*#__PURE__*/jsx(Title, {
            id: titleId,
            type: Typography.TITLE_BODY,
            children: headerTitle
          }), /*#__PURE__*/jsx(CloseButton, {
            onClick: onClose
          })]
        }), children && /*#__PURE__*/jsx("div", {
          className: clsx('np-drawer-content'),
          children: children
        }), footerContent && /*#__PURE__*/jsx("div", {
          className: clsx('np-drawer-footer'),
          children: footerContent
        })]
      })
    })
  });
}

export { Drawer as default };
//# sourceMappingURL=Drawer.mjs.map
