@atlaskit/drawer/dist/cjs/drawer.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Drawer = void 0;
var _react = _interopRequireWildcard(require("react"));
var _exenv = require("exenv");
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _layering = require("@atlaskit/layering/layering");
var _useCloseOnEscapePress = require("@atlaskit/layering/use-close-on-escape-press");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _portal = _interopRequireDefault(require("@atlaskit/portal/portal"));
var _blanket = _interopRequireDefault(require("./blanket"));
var _drawerPanel = require("./drawer-panel/drawer-panel");
var _drawerTopLayer = require("./drawer-panel/drawer-top-layer");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/// <reference types="node" />
/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */

// 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 = (0, _react.useCallback)(function (evt) {
    onClose && onClose(evt);
  }, [onClose]);
  (0, _useCloseOnEscapePress.useCloseOnEscapePress)({
    onClose: handleClose
  });
  return /*#__PURE__*/_react.default.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 = (0, _usePlatformLeafEventHandler.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 = (0, _react.useCallback)(function (evt) {
    onKeyDown && onKeyDown(evt);
  }, [onKeyDown]);
  (0, _react.useEffect)(function () {
    if (isOpen) {
      window.addEventListener('keydown', handleKeyDown);
    }
    return function () {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [handleKeyDown, isOpen]);
  var handleBlanketClick = (0, _usePlatformLeafEventHandler.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 = (0, _usePlatformLeafEventHandler.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 = _exenv.canUseDOM ? document.querySelector('body') : undefined;
  if (!body) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_portal.default, {
    zIndex: zIndex
  }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
    isOpen: isOpen,
    onBlanketClicked: handleBlanketClick,
    testId: testId && "".concat(testId, "--blanket")
  }), /*#__PURE__*/_react.default.createElement(_drawerPanel.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.default.createElement(_layering.Layering, {
    isDisabled: false
  }, children, /*#__PURE__*/_react.default.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)
 */
var Drawer = exports.default = exports.Drawer = function Drawer(props) {
  if ((0, _fg.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.default.createElement(_drawerTopLayer.DrawerTopLayer, props);
  }

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

// Public API aliases preserved from an eliminated entry-point (volt-migrate-package).