How to use the @instructure/ui-position.PositionPropTypes.placement function in @instructure/ui-position

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.