@shopify/polaris/dist/esm/components/Sheet/Sheet.js

Shopify’s product component library

import { Key } from '../../types.js';
import React$1, { useRef } from 'react';
import { durationSlow } from '@shopify/polaris-tokens';
import { useMediaQuery } from '../../utilities/media-query/hooks.js';
import { layer, overlay } from '../shared.js';
import { classNames } from '../../utilities/css.js';
import { Portal as Portal$1 } from '../Portal/Portal.js';
import { KeypressListener as KeypressListener$1 } from '../KeypressListener/KeypressListener.js';
import { Backdrop as Backdrop$1 } from '../Backdrop/Backdrop.js';
import { CSSTransition } from 'react-transition-group';
import { TrapFocus as TrapFocus$1 } from '../TrapFocus/TrapFocus.js';
import styles from './Sheet.scss.js';

var BOTTOM_CLASS_NAMES = {
  enter: classNames(styles.Bottom, styles.enterBottom),
  enterActive: classNames(styles.Bottom, styles.enterBottomActive),
  exit: classNames(styles.Bottom, styles.exitBottom),
  exitActive: classNames(styles.Bottom, styles.exitBottomActive)
};
var RIGHT_CLASS_NAMES = {
  enter: classNames(styles.Right, styles.enterRight),
  enterActive: classNames(styles.Right, styles.enterRightActive),
  exit: classNames(styles.Right, styles.exitRight),
  exitActive: classNames(styles.Right, styles.exitRightActive)
};
function Sheet({
  children,
  open,
  onClose,
  onEntered,
  onExit
}) {
  var {
    isNavigationCollapsed
  } = useMediaQuery();
  var container = useRef(null);
  return /*#__PURE__*/React$1.createElement(Portal$1, {
    idPrefix: "sheet"
  }, /*#__PURE__*/React$1.createElement(CSSTransition, {
    nodeRef: container,
    classNames: isNavigationCollapsed ? BOTTOM_CLASS_NAMES : RIGHT_CLASS_NAMES,
    timeout: durationSlow,
    in: open,
    mountOnEnter: true,
    unmountOnExit: true,
    onEntered: onEntered,
    onExit: onExit
  }, /*#__PURE__*/React$1.createElement("div", Object.assign({
    className: styles.Container
  }, layer.props, overlay.props, {
    ref: container
  }), /*#__PURE__*/React$1.createElement(TrapFocus$1, {
    trapping: open
  }, /*#__PURE__*/React$1.createElement("div", {
    role: "dialog",
    tabIndex: -1,
    className: styles.Sheet
  }, children)))), /*#__PURE__*/React$1.createElement(KeypressListener$1, {
    keyCode: Key.Escape,
    handler: onClose
  }), open && /*#__PURE__*/React$1.createElement(Backdrop$1, {
    transparent: true,
    onClick: onClose
  }));
}

export { Sheet };