How to use @instructure/ui-position - 10 common examples

elementRef: this.props.contentRef,
        background: color,
        stacking: this.props.stacking,
        shadow: this.props.shadow,
        display: 'block'
      }

      const { placement } = this.state

      if (this.props.withArrow) {
        ViewElement = ContextView
        viewProps = {
          ...viewProps,
          // TODO: remove background override after contextview is updated
          background: color === 'primary' ? 'default' : 'inverse',
          placement: this.rtl ? mirrorHorizontalPlacement(placement, ' ') : placement
        }
      } else {
        ViewElement = View
        viewProps = {
          ...viewProps,
          borderWidth: 'small',
          borderRadius: 'medium'
        }
      }

      return (
        
          {content}
        
      )
    } else {

import styles from './styles.css'
import theme from './theme'

@testable()
class PositionTarget extends ComponentIdentifier {
  static displayName = 'PositionTarget'
  static locatorAttribute = 'data-position-target'
}

@testable()
class PositionContent extends ComponentIdentifier {
  static displayName = 'PositionContent'
  static propTypes = {
    children: PropTypes.node,
    placement: PositionPropTypes.placement
  }
  static locatorAttribute = 'data-position-content'
}

/**
---
category: components/utilities/deprecated
id: DeprecatedPosition
---
**/
@deprecated('7.0.0', null, 'Use @instructure/ui-position instead')
@testable()
@themeable(theme, styles)
class Position extends Component {
  static Target = PositionTarget
  static Content = PositionContent

/**
     * Description of the `<menu>`
     */
    label: PropTypes.string,
    /**
     * Is the `<menu>` disabled
     */
    disabled: PropTypes.bool,
    /**
     * The trigger element, if the `<menu>` is to render as a popover
     */
    trigger: PropTypes.node,
    /**
     * If a trigger is supplied, where should the `<menu>` be placed (relative to the trigger)
     */
    placement: PositionPropTypes.placement,
    /**
     * Should the `<menu>` be open for the initial render
     */
    defaultShow: PropTypes.bool,
    /**
     * Is the `<menu>` open (should be accompanied by `onToggle`)
     */
    show: controllable(PropTypes.bool, 'onToggle', 'defaultShow'),
    /**
     * Callback fired when the `<menu>` is toggled open/closed. When used with `show`,
     * the component will not control its own state.
     */
    onToggle: PropTypes.func,
    /**
     * Callback fired when an item within the `<menu>` is selected
     */</menu></menu></menu></menu></menu></menu></menu></menu>

on: PropTypes.oneOfType([
      PropTypes.oneOf(['click', 'hover', 'focus']),
      PropTypes.arrayOf(PropTypes.oneOf(['click', 'hover', 'focus']))
    ]),
    /**
    * Whether or not an arrow pointing to the trigger should be rendered
    */
    withArrow: PropTypes.bool,
    /**
    * Color variant of the popover content
    */
    color: PropTypes.oneOf(['primary', 'primary-inverse']),
    /**
     * The placement of the content in relation to the trigger
     */
    placement: PositionPropTypes.placement,
    /**
    * Controls the shadow depth for the ``
    */
    shadow: ThemeablePropTypes.shadow,
    /**
    * Controls the z-index depth for the `` content
    */
    stacking: ThemeablePropTypes.stacking,
    /**
     * A function that returns a reference to the content element
     */
    contentRef: PropTypes.func,
    /**
     * An element or a function returning an element to focus by default
     */
    defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),

* The number of options that should be visible before having to scroll.
    */
    visibleOptionsCount: PropTypes.number,
    /**
    * Displays messages and validation for the input. It should be an object
    * with the following shape:
    * `{
    *   text: PropTypes.string,
    *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    * }`
    */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
    * The placement of the options list.
    */
    placement: PositionPropTypes.placement,
    /**
    * The parent in which to constrain the placement.
    */
    constrain: PositionPropTypes.constrain,
    /**
    * Callback fired when text input receives focus.
    */
    onFocus: PropTypes.func,
    /**
    * Callback fired when text input loses focus.
    */
    onBlur: PropTypes.func,
    /**
    * Callback fired when text input value changes.
    */
    onInputChange: PropTypes.func,

children: PropTypes.node,

    /**
     * The target to be used when not using ``
     */
    target: PropTypes.oneOfType([element, PropTypes.func]),

    /**
     * Whether or not you want the content to position over the ``
     */
    over: PropTypes.bool,

    /**
     * The placement of the content in relation to the trigger
     */
    placement: PositionPropTypes.placement,

    /**
     * The horizontal offset for the positioned content
     */
    offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

    /**
     * The vertical offset for the positioned content
     */
    offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

    /**
     * Callback fired when the position changes
     */
    onPositionChanged: PropTypes.func,

* Provides a ref to the underlying input element.
    */
    inputRef: PropTypes.func,
    /**
    * Displays messages and validation for the input. It should be an object
    * with the following shape:
    * `{
    *   text: PropTypes.string,
    *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    * }`
    */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
    * The placement of the calendar in relation to the input.
    */
    placement: PositionPropTypes.placement,
    /**
    * Controls whether or not the calendar is showing.
    */
    isShowingCalendar: PropTypes.bool,
    /**
    * Callback fired when the input is blurred. Feedback should be provided
    * to the user when this function is called if the selected date or input
    * value is not valid.
    */
    onRequestValidateDate: PropTypes.func,
    /**
    * Callback fired requesting the calendar be shown.
    */
    onRequestShowCalendar: PropTypes.func,
    /**
    * Callback fired requesting the calendar be hidden.

* An element or a function returning an element to use as the mount node
     * for the `` (defaults to `document.body`)
     */
    mountNode: PositionPropTypes.mountNode,

    /**
     * Insert the element at the 'top' of the mountNode or at the 'bottom'
     */
    insertAt: PropTypes.oneOf(['bottom', 'top']),

    /**
     * The parent in which to constrain the placement.
     * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
     * or a function returning an element
     */
    constrain: PositionPropTypes.constrain,
    id: PropTypes.string
  }

  static defaultProps = {
    trackPosition: true,
    placement: 'bottom center',
    offsetX: 0,
    offsetY: 0,
    mountNode: null,
    target: null,
    insertAt: 'bottom',
    over: false,
    onPositioned: position => {},
    onPositionChanged: position => {},
    constrain: 'window',
    children: null,

*/
    screenReaderLabel: PropTypes.string,
    /**
     * The horizontal offset for the positioned content
     */
    offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /**
     * The vertical offset for the positioned content
     */
    offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /**
     * The parent in which to constrain the popover.
     * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
     * or a function returning an element
     */
    constrain: PositionPropTypes.constrain,
    /**
     * Target element for positioning the Popover (if it differs from the trigger)
     */
    positionTarget: PropTypes.oneOfType([element, PropTypes.func]),
    /**
     * An element or a function returning an element to use as the mount node
     * for the `` (defaults to `document.body`)
     */
    mountNode: PositionPropTypes.mountNode,
    /**
     * Insert the element at the 'top' of the mountNode or at the 'bottom'
     */
    insertAt: PropTypes.oneOf(['bottom', 'top']),
    /**
     * An element, function returning an element, or array of elements that will
     * not be hidden from the screen reader when the `` is open

menuRef: PropTypes.func,
    /**
     * A function that returns a reference to the ``
     */
    popoverRef: PropTypes.func,
    /**
     * If a trigger is supplied, an element or a function returning an element to use as the mount node
     * for the `<menu>` (defaults to `document.body`)
     */
    mountNode: PositionPropTypes.mountNode,
    /**
     * The parent in which to constrain the menu.
     * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
     * or a function returning an element
     */
    constrain: PositionPropTypes.constrain,
    /**
     * If a trigger is supplied, an element, function returning an element, or array of elements that will not
     * be hidden from the screen reader when the `<menu>` is open
     */
    liveRegion: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
    /**
     * If a trigger is supplied, should the `<menu>` hide when an item is selected
     */
    shouldHideOnSelect: PropTypes.bool,
    /**
     * If a trigger is supplied, should the `<menu>` focus the trigger on after closing
     */
    shouldFocusTriggerOnClose: PropTypes.bool,
    /**
     * The type of `<menu>`
     */</menu></menu></menu></menu></menu>