@atlaskit/drawer/dist/esm/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 */
import "./drawer-panel.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useCallback, useRef } from 'react';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import SlideIn from '@atlaskit/motion/slide-in';
import { EnsureIsInsideDrawerContext } from '../ensure-is-inside-drawer-context';
import { OnCloseContext } from '../on-close-context';
import FocusLock from './focus-lock';
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, {
    animationTimingFunction: "ease-out",
    duration: "small",
    enterFrom: enterFrom,
    exitTo: enterFrom,
    fade: "none",
    onFinish: onFinish
  }, children);
};

/**
 * __Drawer panel__
 */
export var 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 = useRef(null);
  var onFinish = 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, {
    appear: true
  }, isOpen && /*#__PURE__*/React.createElement(CustomSlideIn, {
    onFinish: onFinish,
    enterFrom: enterFrom
  }, function (_ref3) {
    var className = _ref3.className;
    return /*#__PURE__*/React.createElement(FocusLock, {
      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: 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.Provider, {
      value: true
    }, /*#__PURE__*/React.createElement(OnCloseContext.Provider, {
      value: onClose
    }, children))));
  }));
};