text: import _extends from "@babel/runtime/helpers/esm/extends";
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  import React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import Modal from '../Modal';
  import Backdrop from '../Backdrop';
  import withStyles from '../styles/withStyles';
  import Slide from '../Slide';
  import Paper from '../Paper';
  import { capitalize } from '../utils/helpers';
  import { duration } from '../styles/transitions';
  import useTheme from '../styles/useTheme';
  export var styles = function styles(theme) {
    return {
      /* Styles applied to the root element. */
      root: {},
  
      /* Styles applied to the root element if `variant="permanent or persistent"`. */
      docked: {
        flex: '0 0 auto'
      },
  
      /* Styles applied to the `Paper` component. */
      paper: {
        overflowY: 'auto',
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        flex: '1 0 auto',
        zIndex: theme.zIndex.drawer,
        WebkitOverflowScrolling: 'touch',
        // Add iOS momentum scrolling.
        // temporary style
        position: 'fixed',
        top: 0,
        // We disable the focus ring for mouse, touch and keyboard users.
        // At some point, it would be better to keep it for keyboard users.
        // :focus-ring CSS pseudo-class will help.
        outline: 0
      },
  
      /* Styles applied to the `Paper` component if `anchor="left"`. */
      paperAnchorLeft: {
        left: 0,
        right: 'auto'
      },
  
      /* Styles applied to the `Paper` component if `anchor="right"`. */
      paperAnchorRight: {
        left: 'auto',
        right: 0
      },
  
      /* Styles applied to the `Paper` component if `anchor="top"`. */
      paperAnchorTop: {
        top: 0,
        left: 0,
        bottom: 'auto',
        right: 0,
        height: 'auto',
        maxHeight: '100%'
      },
  
      /* Styles applied to the `Paper` component if `anchor="bottom"`. */
      paperAnchorBottom: {
        top: 'auto',
        left: 0,
        bottom: 0,
        right: 0,
        height: 'auto',
        maxHeight: '100%'
      },
  
      /* Styles applied to the `Paper` component if `anchor="left"` & `variant` is not "temporary". */
      paperAnchorDockedLeft: {
        borderRight: "1px solid ".concat(theme.palette.divider)
      },
  
      /* Styles applied to the `Paper` component if `anchor="top"` & `variant` is not "temporary". */
      paperAnchorDockedTop: {
        borderBottom: "1px solid ".concat(theme.palette.divider)
      },
  
      /* Styles applied to the `Paper` component if `anchor="right"` & `variant` is not "temporary". */
      paperAnchorDockedRight: {
        borderLeft: "1px solid ".concat(theme.palette.divider)
      },
  
      /* Styles applied to the `Paper` component if `anchor="bottom"` & `variant` is not "temporary". */
      paperAnchorDockedBottom: {
        borderTop: "1px solid ".concat(theme.palette.divider)
      },
  
      /* Styles applied to the `Modal` component. */
      modal: {}
    };
  };
  var oppositeDirection = {
    left: 'right',
    right: 'left',
    top: 'down',
    bottom: 'up'
  };
  export function isHorizontal(anchor) {
    return ['left', 'right'].indexOf(anchor) !== -1;
  }
  export function getAnchor(theme, anchor) {
    return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
  }
  var defaultTransitionDuration = {
    enter: duration.enteringScreen,
    exit: duration.leavingScreen
  };
  /**
   * The props of the [Modal](/api/modal/) component are available
   * when `variant="temporary"` is set.
   */
  
  var Drawer = React.forwardRef(function Drawer(props, ref) {
    var _props$anchor = props.anchor,
        anchorProp = _props$anchor === void 0 ? 'left' : _props$anchor,
        BackdropProps = props.BackdropProps,
        children = props.children,
        classes = props.classes,
        className = props.className,
        _props$elevation = props.elevation,
        elevation = _props$elevation === void 0 ? 16 : _props$elevation,
        _props$ModalProps = props.ModalProps;
    _props$ModalProps = _props$ModalProps === void 0 ? {} : _props$ModalProps;
  
    var BackdropPropsProp = _props$ModalProps.BackdropProps,
        ModalProps = _objectWithoutProperties(_props$ModalProps, ["BackdropProps"]),
        onClose = props.onClose,
        _props$open = props.open,
        open = _props$open === void 0 ? false : _props$open,
        PaperProps = props.PaperProps,
        SlideProps = props.SlideProps,
        _props$transitionDura = props.transitionDuration,
        transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
        _props$variant = props.variant,
        variant = _props$variant === void 0 ? 'temporary' : _props$variant,
        other = _objectWithoutProperties(props, ["anchor", "BackdropProps", "children", "classes", "className", "elevation", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "transitionDuration", "variant"]);
  
    var theme = useTheme(); // Let's assume that the Drawer will always be rendered on user space.
    // We use this state is order to skip the appear transition during the
    // initial mount of the component.
  
    var mounted = React.useRef(false);
    React.useEffect(function () {
      mounted.current = true;
    }, []);
    var anchor = getAnchor(theme, anchorProp);
    var drawer = React.createElement(Paper, _extends({
      elevation: variant === 'temporary' ? elevation : 0,
      square: true,
      className: clsx(classes.paper, classes["paperAnchor".concat(capitalize(anchor))], variant !== 'temporary' && classes["paperAnchorDocked".concat(capitalize(anchor))])
    }, PaperProps), children);
  
    if (variant === 'permanent') {
      return React.createElement("div", _extends({
        className: clsx(classes.root, classes.docked, className),
        ref: ref
      }, other), drawer);
    }
  
    var slidingDrawer = React.createElement(Slide, _extends({
      in: open,
      direction: oppositeDirection[anchor],
      timeout: transitionDuration,
      appear: mounted.current
    }, SlideProps), drawer);
  
    if (variant === 'persistent') {
      return React.createElement("div", _extends({
        className: clsx(classes.root, classes.docked, className)
      }, other), slidingDrawer);
    } // variant === temporary
  
  
    return React.createElement(Modal, _extends({
      BackdropProps: _extends({}, BackdropProps, {}, BackdropPropsProp, {
        transitionDuration: transitionDuration
      }),
      BackdropComponent: Backdrop,
      className: clsx(classes.root, classes.modal, className),
      open: open,
      onClose: onClose,
      ref: ref
    }, other, ModalProps), slidingDrawer);
  });
  process.env.NODE_ENV !== "production" ? Drawer.propTypes = {
    /**
     * Side from which the drawer will appear.
     */
    anchor: PropTypes.oneOf(['left', 'top', 'right', 'bottom']),
  
    /**
     * @ignore
     */
    BackdropProps: PropTypes.object,
  
    /**
     * The contents of the drawer.
     */
    children: PropTypes.node,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object.isRequired,
  
    /**
     * @ignore
     */
    className: PropTypes.string,
  
    /**
     * The elevation of the drawer.
     */
    elevation: PropTypes.number,
  
    /**
     * Props applied to the [`Modal`](/api/modal/) element.
     */
    ModalProps: PropTypes.object,
  
    /**
     * Callback fired when the component requests to be closed.
     *
     * @param {object} event The event source of the callback
     */
    onClose: PropTypes.func,
  
    /**
     * If `true`, the drawer is open.
     */
    open: PropTypes.bool,
  
    /**
     * Props applied to the [`Paper`](/api/paper/) element.
     */
    PaperProps: PropTypes.object,
  
    /**
     * Props applied to the [`Slide`](/api/slide/) element.
     */
    SlideProps: PropTypes.object,
  
    /**
     * The duration for the transition, in milliseconds.
     * You may specify a single timeout for all transitions, or individually with an object.
     */
    transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
      enter: PropTypes.number,
      exit: PropTypes.number
    })]),
  
    /**
     * The variant to use.
     */
    variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
  } : void 0;
  export default withStyles(styles, {
    name: 'MuiDrawer',
    flip: false
  })(Drawer);