How to use terra-popup - 10 common examples

import React, { useState } from 'react';
import Button from 'terra-button';
import Popup from 'terra-popup';
import Placeholder from 'terra-doc-template/lib/Placeholder';

const HEIGHT_KEYS = Object.keys(Popup.Opts.heights);
const WIDTH_KEYS = Object.keys(Popup.Opts.widths);

function PopupDimensions() {
  const [open, setOpen] = useState(false);
  const [popupContentHeight, setPopupContentHeight] = useState('Default');
  const [popupContentWidth, setPopupContentWidth] = useState('Default');
  /* eslint-disable */
  const PopupContent = ({ contentStyle, isHeightBounded, isWidthBounded }) => {
    let title = 'Popup Content';
    if (isHeightBounded) {
      title += ' HeightBounded';
    }
    if (isWidthBounded) {
      title += ' WidthBounded';
    }
    return ;

const slides = this.state.stack.map((item, index) => (
      
        {item.props.children || item.props.subMenuItems}
      
    ));

import React, { useState } from 'react';
import Button from 'terra-button';
import Popup from 'terra-popup';
import Placeholder from 'terra-doc-template/lib/Placeholder';

const HEIGHT_KEYS = Object.keys(Popup.Opts.heights);
const WIDTH_KEYS = Object.keys(Popup.Opts.widths);

function PopupDimensions() {
  const [open, setOpen] = useState(false);
  const [popupContentHeight, setPopupContentHeight] = useState('Default');
  const [popupContentWidth, setPopupContentWidth] = useState('Default');
  /* eslint-disable */
  const PopupContent = ({ contentStyle, isHeightBounded, isWidthBounded }) => {
    let title = 'Popup Content';
    if (isHeightBounded) {
      title += ' HeightBounded';
    }
    if (isWidthBounded) {
      title += ' WidthBounded';
    }
    return ;
  };

const slides = this.state.stack.map((item, index) => (
      
        {item.props.children || item.props.subMenuItems}
      
    ));

isHeaderDisabled
        isContentFocusDisabled
      >
        {slides}
      
    );
  }
}

Menu.propTypes = propTypes;
Menu.defaultProps = defaultProps;
Menu.Item = MenuItem;
Menu.ItemGroup = MenuItemGroup;
Menu.Divider = MenuDivider;
Menu.Opts = {
  widths: Popup.Opts.widths,
};

export default Menu;

isHeaderDisabled
        isContentFocusDisabled
      >
        {slides}
      
    );
  }
}

Menu.propTypes = propTypes;
Menu.defaultProps = defaultProps;
Menu.Item = MenuItem;
Menu.ItemGroup = MenuItemGroup;
Menu.Divider = MenuDivider;
Menu.Opts = {
  widths: Popup.Opts.widths,
};

export default Menu;

import React from 'react';
import Popup from 'terra-popup';
import Button from 'terra-button';
import ExamplePopupContent from './ExamplePopupContent';

const HEIGHT_KEYS = Object.keys(Popup.Opts.heights);
const WIDTH_KEYS = Object.keys(Popup.Opts.widths);

class PopupDimensions extends React.Component {
  static generateOptions(values) {
    return values.map((currentValue, index) => {
      const keyValue = index;
      return <option value="{currentValue}">{currentValue}</option>;
    });
  }

  constructor(props) {
    super(props);
    this.handleButtonClick = this.handleButtonClick.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.handleOnChange = this.handleOnChange.bind(this);
    this.handleSelectChange = this.handleSelectChange.bind(this);
    this.getId = this.getId.bind(this);

import React from 'react';
import Popup from 'terra-popup';
import Button from 'terra-button';
import ExamplePopupContent from './ExamplePopupContent';

const HEIGHT_KEYS = Object.keys(Popup.Opts.heights);
const WIDTH_KEYS = Object.keys(Popup.Opts.widths);

class PopupDimensions extends React.Component {
  static generateOptions(values) {
    return values.map((currentValue, index) => {
      const keyValue = index;
      return <option value="{currentValue}">{currentValue}</option>;
    });
  }

  constructor(props) {
    super(props);
    this.handleButtonClick = this.handleButtonClick.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.handleOnChange = this.handleOnChange.bind(this);
    this.handleSelectChange = this.handleSelectChange.bind(this);

* CSS classnames that are append to the menu content inner.
   */
  classNameContent: PropTypes.string,
  /**
   * CSS classnames that are append to the overlay.
   */
  classNameOverlay: PropTypes.string,
  /**
   * Should the menu be presented as open.
   */
  isOpen: PropTypes.bool,
  /**
   * A string representation of the width in px, limited to:
   * 160, 240, 320, 640, 960, 1280, 1760 or auto
   */
  contentWidth: PropTypes.oneOf(Object.keys(Popup.Opts.widths)),
  /**
   * Indicates if the menu should have an center aligned arrow displayed on dropdown.
   * Otherwise, the menu will display without an arrow and right aligned.
   */
  isArrowDisplayed: PropTypes.bool,
};

const defaultProps = {
  isArrowDisplayed: false,
  isOpen: false,
  contentWidth: '240',
};

class Menu extends React.Component {
  constructor(props) {
    super(props);

* CSS classnames that are append to the menu content inner.
   */
  classNameContent: PropTypes.string,
  /**
   * CSS classnames that are append to the overlay.
   */
  classNameOverlay: PropTypes.string,
  /**
   * Should the menu be presented as open.
   */
  isOpen: PropTypes.bool,
  /**
   * A string representation of the width in px, limited to:
   * 160, 240, 320, 640, 960, 1280, 1760 or auto
   */
  contentWidth: PropTypes.oneOf(Object.keys(Popup.Opts.widths)),
  /**
   * Indicates if the menu should have an center aligned arrow displayed on dropdown.
   * Otherwise, the menu will display without an arrow and right aligned.
   */
  isArrowDisplayed: PropTypes.bool,
};

const defaultProps = {
  isArrowDisplayed: false,
  isOpen: false,
  contentWidth: '240',
};

class Menu extends React.Component {
  constructor(props) {
    super(props);