"use strict";

exports.__esModule = true;
exports.default = void 0;

require("core-js/modules/web.dom.iterable");

require("core-js/modules/es6.array.iterator");

require("core-js/modules/es6.object.keys");

require("core-js/modules/es6.object.assign");

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ = require("./..");

var _lodash = require("lodash");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

/**
 * @category communication
 * @component popover
 * @variations collab-ui-react
 */
var Popover =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Popover, _React$Component);

  function Popover() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      isOpen: false,
      isHovering: false
    };

    _this.delayedHide = function (e) {
      var _this$props = _this.props,
          delay = _this$props.delay,
          hideDelay = _this$props.hideDelay,
          onClose = _this$props.onClose;
      var isHovering = _this.state.isHovering;
      if (isHovering) return;

      if (_this.showTimerId) {
        clearTimeout(_this.showTimerId);
        _this.showTimerId = null;
      }

      var popoverHideTime = hideDelay ? hideDelay : delay;
      _this.hideTimerId = setTimeout(function () {
        _this.hideTimerId = null;

        _this.setState({
          isOpen: false,
          isHovering: false
        }, onClose && onClose(e));
      }, popoverHideTime);
      e.stopPropagation();
    };

    _this.delayedShow = function (e) {
      var _this$props2 = _this.props,
          delay = _this$props2.delay,
          showDelay = _this$props2.showDelay;

      if (_this.hideTimerId) {
        clearTimeout(_this.hideTimerId);
        _this.hideTimerId = null;
      }

      var popoverShowTime = showDelay ? showDelay : delay;
      _this.showTimerId = setTimeout(function () {
        _this.showTimerId = null;

        _this.setState({
          isOpen: true,
          isHovering: true
        });
      }, popoverShowTime);
      e.stopPropagation();
    };

    _this.handleClose = function (e) {
      var onClose = _this.props.onClose;

      _this.setState({
        isOpen: false
      }, onClose && onClose(e));
    };

    _this.handleMouseEnter = function (e) {
      var children = _this.props.children;
      children.props.onMouseEnter && children.props.onMouseEnter(e);
      return !_this.showTimerId && !_this.state.isOpen && _this.delayedShow(e);
    };

    _this.delayCheckHover = function (e) {
      var hoverDelay = _this.props.hoverDelay;
      e.persist();

      _this.setState({
        isHovering: false
      }, function () {
        return setTimeout(function () {
          return _this.delayedHide(e);
        }, hoverDelay);
      });
    };

    _this.handleMouseLeave = function (e) {
      var children = _this.props.children;

      if (_this.hasFocus) {
        return false;
      }

      if (_this.showTimerId) {
        clearTimeout(_this.showTimerId);
        _this.showTimerId = null;
      }

      children.props.onMouseLeave && children.props.onMouseLeave(e);
      return !_this.hideTimerId && _this.state.isOpen && _this.delayCheckHover(e);
    };

    _this.handleBlur = function (e) {
      var children = _this.props.children;
      _this.hasFocus = false;
      children.props.onBlur && children.props.onBlur(e);

      _this.handleMouseLeave(e);
    };

    _this.handleClick = function (e) {
      var _this$props3 = _this.props,
          children = _this$props3.children,
          doesAnchorToggle = _this$props3.doesAnchorToggle;
      var isOpen = _this.state.isOpen;
      _this.hasFocus = true;
      children.props.onClick && children.props.onClick(e);

      if (!_this.showTimerId) {
        return !isOpen ? _this.delayedShow(e) : doesAnchorToggle && _this.handleBlur(e);
      }
    };

    _this.handleFocus = function (e) {
      var children = _this.props.children;
      var isOpen = _this.state.isOpen;
      _this.hasFocus = true;
      children.props.onFocus && children.props.onFocus(e);

      if (!_this.showTimerId) {
        return !isOpen ? _this.delayedShow(e) : _this.handleBlur(e);
      }
    };

    return _this;
  }

  var _proto = Popover.prototype;

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.hideTimerId && clearTimeout(this.hideTimerId);
    this.showTimerId && clearTimeout(this.showTimerId);
  };

  _proto.render = function render() {
    var _this2 = this;

    var isOpen = this.state.isOpen;

    var _this$props4 = this.props,
        children = _this$props4.children,
        className = _this$props4.className,
        content = _this$props4.content,
        overflowType = _this$props4.overflowType,
        popoverTrigger = _this$props4.popoverTrigger,
        showArrow = _this$props4.showArrow,
        props = _objectWithoutPropertiesLoose(_this$props4, ["children", "className", "content", "overflowType", "popoverTrigger", "showArrow"]);

    var otherProps = (0, _lodash.omit)(Object.assign({}, props), ['delay', 'doesAnchorToggle', 'hideDelay', 'hoverDelay', 'onClose', 'showDelay']);

    var getTriggers = function getTriggers() {
      var triggerProps = {};

      triggerProps.ref = function (ele) {
        return _this2.anchorRef = ele;
      };

      triggerProps.key = 'child-1';

      switch (popoverTrigger) {
        case 'MouseEnter':
          triggerProps.onMouseEnter = _this2.handleMouseEnter;
          triggerProps.onMouseLeave = _this2.handleMouseLeave;
          triggerProps.onFocus = _this2.handleFocus;
          triggerProps.onBlur = _this2.handleBlur;
          break;

        case 'Click':
          triggerProps.onClick = _this2.handleClick;
          triggerProps.onBlur = null;
          triggerProps.onFocus = null;
          triggerProps.onMouseEnter = null;
          triggerProps.onMouseLeave = null;
          break;

        case 'Focus':
          triggerProps.onFocus = _this2.handleFocus;
          triggerProps.onBlur = _this2.handleBlur;
          triggerProps.onMouseEnter = null;
          triggerProps.onMouseLeave = null;
          break;
      }

      return triggerProps;
    };

    var anchorWithTriggers = children && _react.default.cloneElement(children, getTriggers());

    return _react.default.createElement("span", null, anchorWithTriggers, _react.default.createElement(_.EventOverlay, _extends({
      anchorNode: this.anchorRef,
      className: className,
      close: this.handleClose,
      isOpen: isOpen,
      ref: function ref(_ref) {
        return _this2.overlay = _ref;
      },
      showArrow: showArrow,
      style: {
        overflow: overflowType
      }
    }, popoverTrigger === 'MouseEnter' && {
      onMouseEnter: function onMouseEnter() {
        _this2.setState({
          isHovering: true,
          isOpen: true
        });
      },
      onMouseLeave: function onMouseLeave(e) {
        e.persist();

        _this2.setState({
          isHovering: false
        }, function () {
          return _this2.delayedHide(e);
        });
      }
    }, otherProps), content));
  };

  return Popover;
}(_react.default.Component);

Popover.displayName = 'Popover';
Popover.defaultProps = {
  className: '',
  delay: 0,
  doesAnchorToggle: true,
  hideDelay: 0,
  hoverDelay: 500,
  onClose: null,
  overflowType: 'auto',
  popoverTrigger: 'MouseEnter',
  showArrow: true,
  showDelay: 0
};
Popover.propTypes = {
  /**
   * this should be the popover trigger(this should be a stateful component)
   */
  children: _propTypes.default.element.isRequired,

  /**
   * css class names which goes over popover container
   */
  className: _propTypes.default.string,

  /**
   * the content that goes into the popover
   */
  content: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.node]).isRequired,

  /**
   * the delay for popover on hover, click, focus (hide/show)
   */
  delay: _propTypes.default.number,

  /**
   * Boolean for whether the Anchor Toggles the Popover
   */
  doesAnchorToggle: _propTypes.default.bool,

  /**
   * the hide delay for popover on hover, click, focus
   */
  hideDelay: _propTypes.default.number,

  /**
   * the hover delay for checking whether we are still hovering before closing
   */
  hoverDelay: _propTypes.default.number,

  /**
   * optional function that will execute on close
   */
  onClose: _propTypes.default.func,

  /**
   * optional prop that controls overflow css style of EventOverlay
   */
  overflowType: _propTypes.default.string,

  /**
   * Event that will trigger popover appearance
   */
  popoverTrigger: _propTypes.default.oneOf(['MouseEnter', 'Click', 'Focus']),

  /**
  * Boolean for whether the Arrow should show
  */
  showArrow: _propTypes.default.bool,

  /**
   * the show delay for popover on hover, click, focus
   */
  showDelay: _propTypes.default.number
};
var _default = Popover;
/**
* @name Popover Default
*
* @category communication
* @component popover
* @section default
*
* @js

 import {
  Button
} from '@collab-ui/react';

 export default function Default() {

  const content = (
    <span key="1" style={{ padding: '10px' }}>Popover Top</span>
  );

  return (
    <div className='row'>
      <div className="docs-example docs-example--spacing">

        <h3>
          Props
          <p><code className="small">direction=(top-center)</code></p>
          <p><code className="small">{'targetOffset=({vertical: 10})'}</code></p>
        </h3>
        <Popover content={content} direction={'top-center'} targetOffset={{vertical: 10}}>
          <Button children='Hover' ariaLabel='Hover' />
        </Popover>

      </div>
      <div className="docs-example docs-example--spacing">

        <h3>
          Props
          <p><code className="small">delay=(500)</code></p>
          <p><code className="small">direction=(top-center)</code></p>
        </h3>
        <Popover content={content} delay={500} direction={'top-center'}>
          <Button children='Hover with Delay' ariaLabel='Hover with Delay' />
        </Popover>

      </div>
    </div>
  );
}
**/

/**
* @name Popover on Click
*
* @category communication
* @component popover
* @section onclick
*
* @js

 import {
  Button,
  Icon,
  List,
  ListItem,
  ListItemSection,
} from '@collab-ui/react';

 export default function PopOverClick() {

    const content = (
      <List>
        <ListItem>
          <ListItemSection position="left">
            <Icon name='edit_20'/>
          </ListItemSection>
          <ListItemSection position="center">
            Edit space settings
          </ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name='favorite_20'/>
          </ListItemSection>
          <ListItemSection position="center">
            Add to favorites
          </ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name='alert_20'/>
          </ListItemSection>
          <ListItemSection position="center">
            Notifications
          </ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name='accessories_20'/>
          </ListItemSection>
          <ListItemSection position="center">
            Add Integrations & Bots
          </ListItemSection>
        </ListItem>
        <ListItem>
        <ListItemSection position="left">
            <Icon name='stored-info_20'/>
          </ListItemSection>
          <ListItemSection position="center">
            View space policy
          </ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name='archive_20'/>
          </ListItemSection>
          <ListItemSection position="center">
            Archive space
          </ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name='cancel_20'/>
          </ListItemSection>
          <ListItemSection position="center">
            Remove space from team
          </ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name='exit-room_20'/>
          </ListItemSection>
          <ListItemSection position="center">
            Leave space
          </ListItemSection>
        </ListItem>
      </List>
    );

    return (
      <div className='row'>
        <div className="docs-example docs-example--spacing">

          <h3>
            Props
            <p><code className="small">direction=(bottom-center)</code></p>
            <p><code className="small">popoverTrigger=(Click)</code></p>
          </h3>
          <Popover
            content={content}
            direction={'bottom-center'}
            popoverTrigger={'Click'}
          >
            <Button
              children='Click'
              ariaLabel='Click'
            />
          </Popover>

        </div>
        <div className="docs-example docs-example--spacing">

          <h3>
            Props
            <p><code className="small">direction=(bottom-center)</code></p>
            <p><code className="small">popoverTrigger=(Click)</code></p>
            <p><code className="small">doesAnchorToggle(false)</code></p>
          </h3>
          <Popover
            content={content}
            direction={'bottom-center'}
            doesAnchorToggle={false}
            popoverTrigger={'Click'}
          >
            <Button
              children='Click No Toggle'
              ariaLabel='Click'
            />
          </Popover>

        </div>
      </div>
    );
}
**/

/**
* @name Popover on Focus
*
* @category communication
* @component popover
* @section onfocus
*
* @js

 import {
  Button
} from '@collab-ui/react';

 export default function PopOverFocus() {

  const contentLeft = (
    <span key="1" style={{ padding: '10px'}}>Popover Left</span>
  );

  const contentRight = (
    <span key="1" style={{ padding: '10px'}}>Popover Right</span>
  );

  return (
    <div className='row'>
      <div className="docs-example docs-example--spacing">

        <h3>
          Props
          <p><code className="small">direction=(right-center)</code></p>
          <p><code className="small">popoverTrigger=(Focus)</code></p>
        </h3>
        <Popover
          content={contentRight}
          direction={'right-center'}
          popoverTrigger={'Focus'}
        >
          <Button
            children='Focus Right'
            ariaLabel='Focus Right'
          />
        </Popover>

      </div>
      <div className="docs-example docs-example--spacing">

        <h3>
          Props
          <p><code className="small">direction=(left-center)</code></p>
          <p><code className="small">popoverTrigger=(Focus)</code></p>
        </h3>
        <Popover
          content={contentLeft}
          direction={'left-center'}
          popoverTrigger={'Focus'}
        >
          <Button
            children='Focus Left'
            ariaLabel='Focus Left'
          />
        </Popover>

      </div>
    </div>
  );
}
**/

/**
* @name Popover with Size Constraints
*
* @category communication
* @component popover
* @section sizing
*
* @js

 import {
  Button
} from '@collab-ui/react';

 export default function Default() {

  const medium = (
    <span key="1" style={{ height: '1800px' }}>Popover(height: 1800px)</span>
  );

  const short = (
    <span key="1" style={{ height: '500px' }}>Popover(height: 500px)</span>
  );

  const tall = (
    <span key="1" style={{ height: '3000px' }}>Popover(height: 3000px)</span>
  );

  const wide = (
    <span key="1" style={{ height: '1900px', width: '1600px' }}>Popover(height: 1900px, width: 1600px)</span>
  );

  return (
    <div className='row'>
      <div className="docs-example docs-example--spacing">

        <h3>
          Props
          <p><code className="small">direction=(top-center)</code></p>
          <p><code className="small">isContained=(true)</code></p>
          <p><code className="small">popoverTrigger=(Click)</code></p>
        </h3>
        <Popover
          isContained
          content={tall}
          direction={'top-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30 }}
        >
          <Button children='Tall' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={tall}
          direction={'top-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 0 }}
        >
          <Button children='Tall-NoOffset' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={tall}
          showArrow={false}
          direction={'top-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30 }}
        >
          <Button children='Tall-NoArrow' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={tall}
          showArrow={false}
          direction={'top-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 0 }}
        >
          <Button children='Tall-NoArrowNoOffset' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={wide}
          direction={'top-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30 }}
        >
          <Button children='Wide' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={short}
          direction={'top-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30 }}
        >
          <Button children='Short' ariaLabel='Click' />
        </Popover>

      </div>
      <div className="docs-example docs-example--spacing">

        <h3>
          Props
          <p><code className="small">direction=(right-center)</code></p>
          <p><code className="small">isContained=(true)</code></p>
          <p><code className="small">popoverTrigger=(Click)</code></p>
        </h3>
        <Popover
          isContained
          content={wide}
          direction={'right-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30, horizontal: 30 }}
        >
          <Button children='Tall' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={wide}
          direction={'right-center'}
          popoverTrigger={'Click'}
        >
          <Button children='Wide-NoOffset' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={wide}
          showArrow={false}
          direction={'right-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30, horizontal: 30 }}
        >
          <Button children='Wide-NoArrow' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={wide}
          showArrow={false}
          direction={'right-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 0 }}
        >
          <Button children='Wide-NoArrowNoOffset' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={wide}
          direction={'right-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30, horizontal: 30 }}
        >
          <Button children='Wide' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={tall}
          direction={'right-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30, horizontal: 30 }}
        >
          <Button children='Tall' ariaLabel='Click' />
        </Popover>

      </div>
      <div className="docs-example docs-example--spacing">

        <h3>
          Props
          <p><code className="small">direction=(left-center)</code></p>
          <p><code className="small">isContained=(true)</code></p>
          <p><code className="small">popoverTrigger=(Click)</code></p>
        </h3>
        <Popover
          isContained
          content={wide}
          direction={'left-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30, horizontal: 30 }}
        >
          <Button children='Tall' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={wide}
          direction={'left-center'}
          popoverTrigger={'Click'}
        >
          <Button children='Wide-NoOffset' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={wide}
          showArrow={false}
          direction={'left-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30, horizontal: 30 }}
        >
          <Button children='Wide-NoArrow' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={wide}
          showArrow={false}
          direction={'left-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 0 }}
        >
          <Button children='Wide-NoArrowNoOffset' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={wide}
          direction={'left-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30, horizontal: 30 }}
        >
          <Button children='Wide' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={tall}
          direction={'left-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30, horizontal: 30 }}
        >
          <Button children='Tall' ariaLabel='Click' />
        </Popover>

      </div>
      <div className="docs-example docs-example--spacing">

         <h3>
          Props
          <p><code className="small">direction=(bottom-center)</code></p>
          <p><code className="small">isContained=(true)</code></p>
          <p><code className="small">popoverTrigger=(Click)</code></p>
        </h3>
        <Popover
          isContained
          content={tall}
          direction={'bottom-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30 }}
        >
          <Button children='Tall' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={tall}
          direction={'bottom-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 0 }}
        >
          <Button children='Tall-NoOffset' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={tall}
          showArrow={false}
          direction={'bottom-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30 }}
        >
          <Button children='Tall-NoArrow' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={tall}
          showArrow={false}
          direction={'bottom-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 0 }}
        >
          <Button children='Tall-NoArrowNoOffset' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={wide}
          direction={'bottom-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30 }}
        >
          <Button children='Wide' ariaLabel='Click' />
        </Popover>
        <Popover
          isContained
          content={short}
          direction={'bottom-center'}
          popoverTrigger={'Click'}
          targetOffset={{ vertical: 30 }}
        >
          <Button children='Short' ariaLabel='Click' />
        </Popover>

      </div>


      <h3>Overflow Container</h3>
      <div
        className="docs-example docs-example--spacing"
        style={{
          border: '2px solid #666666',
          width: '100%',
          height: '500px',
          overflow: 'scroll',
          padding: '125px'
        }}
      >
        <div className="docs-example docs-example--spacing">

          <h3>
            Props
            <p><code className="small">direction=(top-center)</code></p>
            <p><code className="small">isContained=(true)</code></p>
            <p><code className="small">checkOverflow=(true)</code></p>
            <p><code className="small">popoverTrigger=(Click)</code></p>
          </h3>
          <Popover
            isContained
            checkOverflow
            content={tall}
            direction={'top-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30 }}
          >
            <Button children='Tall' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={tall}
            direction={'top-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 0 }}
          >
            <Button children='Tall-NoOffset' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={tall}
            showArrow={false}
            direction={'top-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30 }}
          >
            <Button children='Tall-NoArrow' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={tall}
            showArrow={false}
            direction={'top-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 0 }}
          >
            <Button children='Tall-NoArrowNoOffset' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={wide}
            direction={'top-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30 }}
          >
            <Button children='Wide' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={short}
            direction={'top-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30 }}
          >
            <Button children='Short' ariaLabel='Click' />
          </Popover>

        </div>
        <div className="docs-example docs-example--spacing">

          <h3>
            Props
            <p><code className="small">direction=(right-center)</code></p>
            <p><code className="small">isContained=(true)</code></p>
            <p><code className="small">checkOverflow=(true)</code></p>
            <p><code className="small">popoverTrigger=(Click)</code></p>
          </h3>
          <Popover
            isContained
            checkOverflow
            content={wide}
            direction={'right-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30, horizontal: 30 }}
          >
            <Button children='Tall' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={wide}
            direction={'right-center'}
            popoverTrigger={'Click'}
          >
            <Button children='Wide-NoOffset' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={wide}
            showArrow={false}
            direction={'right-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30, horizontal: 30 }}
          >
            <Button children='Wide-NoArrow' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={wide}
            showArrow={false}
            direction={'right-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 0 }}
          >
            <Button children='Wide-NoArrowNoOffset' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={wide}
            direction={'right-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30, horizontal: 30 }}
          >
            <Button children='Wide' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={tall}
            direction={'right-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30, horizontal: 30 }}
          >
            <Button children='Tall' ariaLabel='Click' />
          </Popover>

        </div>
        <div className="docs-example docs-example--spacing">

          <h3>
            Props
            <p><code className="small">direction=(left-center)</code></p>
            <p><code className="small">isContained=(true)</code></p>
            <p><code className="small">checkOverflow=(true)</code></p>
            <p><code className="small">popoverTrigger=(Click)</code></p>
          </h3>
          <Popover
            isContained
            checkOverflow
            content={wide}
            direction={'left-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30, horizontal: 30 }}
          >
            <Button children='Tall' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={wide}
            direction={'left-center'}
            popoverTrigger={'Click'}
          >
            <Button children='Wide-NoOffset' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={wide}
            showArrow={false}
            direction={'left-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30, horizontal: 30 }}
          >
            <Button children='Wide-NoArrow' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={wide}
            showArrow={false}
            direction={'left-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 0 }}
          >
            <Button children='Wide-NoArrowNoOffset' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={wide}
            direction={'left-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30, horizontal: 30 }}
          >
            <Button children='Wide' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={tall}
            direction={'left-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30, horizontal: 30 }}
          >
            <Button children='Tall' ariaLabel='Click' />
          </Popover>

        </div>
        <div className="docs-example docs-example--spacing">

          <h3>
            Props
            <p><code className="small">direction=(bottom-center)</code></p>
            <p><code className="small">isContained=(true)</code></p>
            <p><code className="small">checkOverflow=(true)</code></p>
            <p><code className="small">popoverTrigger=(Click)</code></p>
          </h3>
          <Popover
            isContained
            checkOverflow
            content={tall}
            direction={'bottom-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30 }}
          >
            <Button children='Tall' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={tall}
            direction={'bottom-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 0 }}
          >
            <Button children='Tall-NoOffset' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={tall}
            showArrow={false}
            direction={'bottom-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30 }}
          >
            <Button children='Tall-NoArrow' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={tall}
            showArrow={false}
            direction={'bottom-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 0 }}
          >
            <Button children='Tall-NoArrowNoOffset' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={wide}
            direction={'bottom-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30 }}
          >
            <Button children='Wide' ariaLabel='Click' />
          </Popover>
          <Popover
            isContained
            checkOverflow
            content={short}
            direction={'bottom-center'}
            popoverTrigger={'Click'}
            targetOffset={{ vertical: 30 }}
          >
            <Button children='Short' ariaLabel='Click' />
          </Popover>

        </div>
      </div>
    </div>
  );
}
**/

exports.default = _default;