@atlaskit/drawer/dist/esm/drawer.js

A drawer is a panel that slides in from the left side of the screen.

/// <reference types="node" />
/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
import React, { useCallback, useEffect } from 'react';
import { canUseDOM } from 'exenv';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import { Layering } from '@atlaskit/layering/layering';
import { useCloseOnEscapePress } from '@atlaskit/layering/use-close-on-escape-press';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import Portal from '@atlaskit/portal/portal';
import Blanket from './blanket';
import { DrawerPanel } from './drawer-panel/drawer-panel';
import { DrawerTopLayer } from './drawer-panel/drawer-top-layer';
// escape close manager for layering
var EscapeCloseManager = function EscapeCloseManager(_ref) {
  var onClose = _ref.onClose;
  // wrap so that we can cast the event to a React.KeyboardEvent
  var handleClose = useCallback(function (evt) {
    onClose && onClose(evt);
  }, [onClose]);
  useCloseOnEscapePress({
    onClose: handleClose
  });
  return /*#__PURE__*/React.createElement("span", null);
};
var DrawerBase = function DrawerBase(_ref2) {
  var _ref2$width = _ref2.width,
    width = _ref2$width === void 0 ? 'narrow' : _ref2$width,
    isOpen = _ref2.isOpen,
    _ref2$isFocusLockEnab = _ref2.isFocusLockEnabled,
    isFocusLockEnabled = _ref2$isFocusLockEnab === void 0 ? true : _ref2$isFocusLockEnab,
    _ref2$shouldReturnFoc = _ref2.shouldReturnFocus,
    shouldReturnFocus = _ref2$shouldReturnFoc === void 0 ? true : _ref2$shouldReturnFoc,
    _ref2$autoFocusFirstE = _ref2.autoFocusFirstElem,
    autoFocusFirstElem = _ref2$autoFocusFirstE === void 0 ? true : _ref2$autoFocusFirstE,
    onKeyDown = _ref2.onKeyDown,
    testId = _ref2.testId,
    children = _ref2.children,
    onClose = _ref2.onClose,
    onCloseComplete = _ref2.onCloseComplete,
    onOpenComplete = _ref2.onOpenComplete,
    _ref2$zIndex = _ref2.zIndex,
    zIndex = _ref2$zIndex === void 0 ? 'unset' : _ref2$zIndex,
    label = _ref2.label,
    titleId = _ref2.titleId,
    enterFrom = _ref2.enterFrom;
  var handleClose = usePlatformLeafEventHandler({
    fn: function fn(evt, analyticsEvent) {
      return onClose === null || onClose === void 0 ? void 0 : onClose(evt, analyticsEvent);
    },
    action: 'dismissed',
    componentName: 'drawer',
    packageName: "@atlaskit/drawer",
    packageVersion: "14.3.5",
    analyticsData: {
      trigger: 'escKey'
    }
  });
  var handleKeyDown = useCallback(function (evt) {
    onKeyDown && onKeyDown(evt);
  }, [onKeyDown]);
  useEffect(function () {
    if (isOpen) {
      window.addEventListener('keydown', handleKeyDown);
    }
    return function () {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [handleKeyDown, isOpen]);
  var handleBlanketClick = usePlatformLeafEventHandler({
    fn: function fn(evt, analyticsEvent) {
      return onClose === null || onClose === void 0 ? void 0 : onClose(evt, analyticsEvent);
    },
    action: 'dismissed',
    componentName: 'drawer',
    packageName: "@atlaskit/drawer",
    packageVersion: "14.3.5",
    analyticsData: {
      trigger: 'blanket'
    }
  });
  var handleBackButtonClick = usePlatformLeafEventHandler({
    fn: function fn(evt, analyticsEvent) {
      return onClose === null || onClose === void 0 ? void 0 : onClose(evt, analyticsEvent);
    },
    action: 'dismissed',
    componentName: 'drawer',
    packageName: "@atlaskit/drawer",
    packageVersion: "14.3.5",
    analyticsData: {
      trigger: 'backButton'
    }
  });
  var body = canUseDOM ? document.querySelector('body') : undefined;
  if (!body) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Portal, {
    zIndex: zIndex
  }, /*#__PURE__*/React.createElement(Blanket, {
    isOpen: isOpen,
    onBlanketClicked: handleBlanketClick,
    testId: testId && "".concat(testId, "--blanket")
  }), /*#__PURE__*/React.createElement(DrawerPanel, {
    testId: testId,
    isOpen: isOpen,
    onClose: handleBackButtonClick,
    onCloseComplete: onCloseComplete,
    onOpenComplete: onOpenComplete,
    width: width,
    enterFrom: enterFrom,
    label: label,
    titleId: titleId,
    autoFocusFirstElem: autoFocusFirstElem,
    isFocusLockEnabled: isFocusLockEnabled,
    shouldReturnFocus: shouldReturnFocus
  }, isOpen ? /*#__PURE__*/React.createElement(Layering, {
    isDisabled: false
  }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
    onClose: handleClose
  })) : children));
};

/**
 * __Drawer__
 *
 * A drawer is a panel that slides in from the left side of the screen.
 *
 * - [Examples](https://atlassian.design/components/drawer/examples)
 * - [Code](https://atlassian.design/components/drawer/code)
 * - [Usage](https://atlassian.design/components/drawer/usage)
 */
export var Drawer = function Drawer(props) {
  if (fg('platform-dst-top-layer')) {
    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- internal implementation component takes the same DrawerProps
    return /*#__PURE__*/React.createElement(DrawerTopLayer, props);
  }

  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- internal implementation component takes the same DrawerProps
  return /*#__PURE__*/React.createElement(DrawerBase, props);
};

// Public API aliases preserved from an eliminated entry-point (volt-migrate-package).
export { Drawer as default };