@atlaskit/drawer/dist/es2019/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';
const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
const 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.
 */
const CustomSlideIn = ({
  children,
  onFinish,
  enterFrom
}) => {
  return /*#__PURE__*/React.createElement(SlideIn, {
    animationTimingFunction: "ease-out",
    duration: "small",
    enterFrom: enterFrom,
    exitTo: enterFrom,
    fade: "none",
    onFinish: onFinish
  }, children);
};

/**
 * __Drawer panel__
 */
export const DrawerPanel = ({
  children,
  onClose,
  onCloseComplete,
  onOpenComplete,
  testId,
  isOpen,
  shouldReturnFocus,
  autoFocusFirstElem,
  isFocusLockEnabled,
  width = 'narrow',
  label,
  titleId,
  enterFrom = 'left'
}) => {
  /**
   * A ref to point to our wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
   */
  const drawerRef = useRef(null);
  const onFinish = useCallback(state => {
    if (state === 'entering') {
      onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete(drawerRef.current);
    } else if (state === 'exiting') {
      onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete(drawerRef.current);
    }
  }, [onCloseComplete, onOpenComplete]);
  return /*#__PURE__*/React.createElement(ExitingPersistence, {
    appear: true
  }, isOpen && /*#__PURE__*/React.createElement(CustomSlideIn, {
    onFinish: onFinish,
    enterFrom: enterFrom
  }, ({
    className
  }) => /*#__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))))));
};