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

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

/* drawer-panel.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DrawerPanel = void 0;
require("./drawer-panel.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
var _slideIn = _interopRequireDefault(require("@atlaskit/motion/slide-in"));
var _ensureIsInsideDrawerContext = require("../ensure-is-inside-drawer-context");
var _onCloseContext = require("../on-close-context");
var _focusLock = _interopRequireDefault(require("./focus-lock"));
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); }
var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
var styles = {
  root: "_1reo15vq _18m915vq _1e0c1txw _4t3i1kxc _kqsw1n9t _1pbybfng _bfhk1bhr _1q1l1bhr _152tze3t _1e02ze3t _ect4ttxp",
  full: "_1bsbauwl",
  extended: "_1bsb1mwr",
  narrow: "_1bsb1gwv",
  medium: "_1bsb1y37",
  wide: "_1bsb1ogm"
};

/**
 * This wrapper is used to specify separate durations for enter and exit.
 */
var CustomSlideIn = function CustomSlideIn(_ref) {
  var children = _ref.children,
    onFinish = _ref.onFinish,
    enterFrom = _ref.enterFrom;
  return /*#__PURE__*/React.createElement(_slideIn.default, {
    animationTimingFunction: "ease-out",
    duration: "small",
    enterFrom: enterFrom,
    exitTo: enterFrom,
    fade: "none",
    onFinish: onFinish
  }, children);
};

/**
 * __Drawer panel__
 */
var DrawerPanel = exports.DrawerPanel = function DrawerPanel(_ref2) {
  var children = _ref2.children,
    onClose = _ref2.onClose,
    onCloseComplete = _ref2.onCloseComplete,
    onOpenComplete = _ref2.onOpenComplete,
    testId = _ref2.testId,
    isOpen = _ref2.isOpen,
    shouldReturnFocus = _ref2.shouldReturnFocus,
    autoFocusFirstElem = _ref2.autoFocusFirstElem,
    isFocusLockEnabled = _ref2.isFocusLockEnabled,
    _ref2$width = _ref2.width,
    width = _ref2$width === void 0 ? 'narrow' : _ref2$width,
    label = _ref2.label,
    titleId = _ref2.titleId,
    _ref2$enterFrom = _ref2.enterFrom,
    enterFrom = _ref2$enterFrom === void 0 ? 'left' : _ref2$enterFrom;
  /**
   * A ref to point to our wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
   */
  var drawerRef = (0, _react.useRef)(null);
  var onFinish = (0, _react.useCallback)(function (state) {
    if (state === 'entering') {
      onOpenComplete === null || onOpenComplete === void 0 || onOpenComplete(drawerRef.current);
    } else if (state === 'exiting') {
      onCloseComplete === null || onCloseComplete === void 0 || onCloseComplete(drawerRef.current);
    }
  }, [onCloseComplete, onOpenComplete]);
  return /*#__PURE__*/React.createElement(_exitingPersistence.default, {
    appear: true
  }, isOpen && /*#__PURE__*/React.createElement(CustomSlideIn, {
    onFinish: onFinish,
    enterFrom: enterFrom
  }, function (_ref3) {
    var className = _ref3.className;
    return /*#__PURE__*/React.createElement(_focusLock.default, {
      autoFocusFirstElem: autoFocusFirstElem,
      isFocusLockEnabled: isFocusLockEnabled,
      shouldReturnFocus: shouldReturnFocus
    }, /*#__PURE__*/React.createElement("div", {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      className: (0, _runtime.ax)([styles.root, styles[width], className]),
      "data-testid": testId,
      ref: drawerRef,
      "aria-modal": true,
      role: "dialog",
      "aria-label": label,
      "aria-labelledby": titleId
    }, /*#__PURE__*/React.createElement(_ensureIsInsideDrawerContext.EnsureIsInsideDrawerContext.Provider, {
      value: true
    }, /*#__PURE__*/React.createElement(_onCloseContext.OnCloseContext.Provider, {
      value: onClose
    }, children))));
  }));
};