How to use the @instructure/ui-i18n.bidirectional function in @instructure/ui-i18n

import { passthroughProps } from '@instructure/ui-react-utils'
import { bidirectional } from '@instructure/ui-i18n'
import { element } from '@instructure/ui-prop-types'
import { shallowEqual } from '@instructure/ui-utils'

/* istanbul ignore file */


/**
---
private: true
---
@module SubtreePortal
**/
@bidirectional()
class SubtreePortal extends Component {
  static propTypes = {
    /**
     * Wheter or not the `` is open
     */
    open: PropTypes.bool,

    /**
     * Callback fired when `` content has been mounted in the DOM
     */
    onOpen: PropTypes.func,

    /**
     * Callback fired when `` has been unmounted from the DOM
     */
    onClose: PropTypes.func,

category: components
---
**/
@deprecated('8.0.0', {
  show: 'isShowingContent',
  defaultShow: 'defaultIsShowingContent',
  variant: 'color',
  label: 'screenReaderLabel',
  trackPosition: 'shouldTrackPosition',
  alignArrow: 'shouldAlignArrow',
  onShow: 'onShowContent',
  onDismiss: 'onHideContent',
  onToggle: 'onShowContent/onHideContent'
})
@testable()
@bidirectional()
class Popover extends Component {
  static Trigger = PopoverTrigger
  static Content = PopoverContent

  static propTypes = {
    /**
    * Whether or not the `` content is shown
    */
    isShowingContent: PropTypes.bool,
    /**
     * Whether or not to show the content by default, when uncontrolled
     */
    defaultIsShowingContent: PropTypes.bool,
    /**
     * The action that causes the content to display (`click`, `hover`, `focus`)
     */

import { testable } from '@instructure/ui-testable'

import { mirrorHorizontalPlacement } from '@instructure/ui-position'
import { DrawerContent } from './DrawerContent'
import { DrawerTray } from './DrawerTray'

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

/**
---
category: components
---
**/
@testable()
@bidirectional()
@themeable(theme, styles)
class DrawerLayout extends Component {
  static locatorAttribute = 'data-drawer-layout'
  static propTypes = {
    /**
     * Exactly one of each of the following child types: `DrawerLayout.Content`, `DrawerLayout.Tray`
     */
    children: ChildrenPropTypes.oneOfEach([DrawerContent, DrawerTray]),
    /**
     * Min width for the ``
     */
    minWidth: PropTypes.string,
    /**
     * Function called when the `` is resized and hits the `minWidth` breakpoint
     * Called with a boolean value, `true` if the tray is now overlaying the content or `false` if
     * it is side by side

import { mirrorHorizontalPlacement } from '../mirrorHorizontalPlacement'
import { DrawerContent } from './DrawerContent'
import { DrawerTray } from './DrawerTray'

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

/**
---
category: components/deprecated
id: DeprecatedDrawerLayout
---
**/
@deprecated('7.0.0', null, 'Use DrawerLayout from ui-drawer-layout instead.')
@testable()
@bidirectional()
@themeable(theme, styles)
class DrawerLayout extends Component {
  static locatorAttribute = 'data-drawer-layout'
  static propTypes = {
    /**
     * Exactly one of each of the following child types: `DrawerLayout.Content`, `DrawerLayout.Tray`
     */
    children: ChildrenPropTypes.oneOfEach([DrawerContent, DrawerTray]),
    /**
     * Min width for the ``
     */
    minWidth: PropTypes.string,
    /**
     * Function called when the `` is resized and hits the `minWidth` breakpoint
     * Called with a boolean value, `true` if the tray is now overlaying the content or `false` if
     * it is side by side

import { Portal } from '@instructure/ui-portal'
import { mirrorHorizontalPlacement } from '@instructure/ui-layout'
import { Transition } from '@instructure/ui-motion'

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

/**
---
category: components/deprecated
id: DeprecatedTray
---
**/
@deprecated('7.0.0', null, 'Use Tray from ui-tray instead.')
@testable()
@bidirectional()
@themeable(theme, styles)
class Tray extends Component {
  static propTypes = {
    label: PropTypes.string.isRequired,
    children: PropTypes.node,

    /*
     * The size (width) of the `` when placement is `start` or `end`
     */
    size: PropTypes.oneOf(['x-small', 'small', 'regular', 'medium', 'large']),

    /**
    * Placement to determine where the `` should display in the viewport
    */
    placement: PropTypes.oneOf(['top', 'bottom', 'start', 'end']),

import { Dialog } from '@instructure/ui-dialog'
import { Portal } from '@instructure/ui-portal'

import { mirrorHorizontalPlacement } from '../../mirrorHorizontalPlacement'

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

/**
---
parent: DeprecatedDrawerLayout
id: DeprecatedDrawerLayout.Tray
---
**/
@testable()
@bidirectional()
@themeable(theme, styles)
class DrawerTray extends Component {
  static locatorAttribute = 'data-drawer-tray'
  static propTypes = {
    label: PropTypes.string.isRequired,
    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
    render: PropTypes.func,
    /**
     * Placement of the ``
     */
    placement: PropTypes.oneOf(['start', 'end']),

    /**
     * If the tray is open or closed.
     */
    open: PropTypes.bool,

*/
import React from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'

import { passthroughProps } from '@instructure/ui-react-utils'
import { bidirectional } from '@instructure/ui-i18n'
import { element } from '@instructure/ui-prop-types'

/**
---
private: true
---
@module ReactPortal
**/
@bidirectional()
class ReactPortal extends React.Component {
  static propTypes = {
    /**
     * Wheter or not the `` is open
     */
    open: PropTypes.bool,

    /**
     * Callback fired when `` content has been mounted in the DOM
     */
    onOpen: PropTypes.func,

    /**
     * Callback fired when `` has been unmounted from the DOM
     */
    onClose: PropTypes.func,

import {
  getElementType,
  omitProps,
  pickProps
} from '@instructure/ui-react-utils'

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

/**
---
category: components/deprecated
id: DeprecatedView
---
**/
@bidirectional()
@themeable(theme, styles)
class View extends Component {
  static propTypes = {
    /**
    * The element to render as the component root, `span` by default
    */
    as: PropTypes.elementType,

    /**
    * provides a reference to the underlying html element
    */
    elementRef: PropTypes.func,

    /**
    * By default the display prop is 'auto', meaning it takes on the
    * display rules of the html element it's rendered as (see `as` prop).

import styles from './styles.css'
import theme from './theme'
import { themeAdapter } from './themeAdapter'

/**
---
category: components
---
@module View
**/
@deprecated('8.0.0', {
  focused: 'withFocusOutline',
  visualDebug: 'withVisualDebug'
})
@bidirectional()
@themeable(theme, styles, themeAdapter)
class View extends Component {
  static propTypes = {
    /**
    * The element to render as the component root, `span` by default
    */
    as: PropTypes.elementType,

    /**
    * provides a reference to the underlying html element
    */
    elementRef: PropTypes.func,

    /**
    * By default the display prop is 'auto', meaning it takes on the
    * display rules of the html element it's rendered as (see `as` prop).

}

@testable()
class PopoverContent extends ComponentIdentifier {
  static displayName = 'PopoverContent'
}

/**
---
category: components/deprecated
id: DeprecatedPopover
---
**/
@deprecated('7.0.0', null, 'Use @instructure/ui-popover instead')
@testable()
@bidirectional()
class Popover extends Component {
  static Trigger = PopoverTrigger
  static Content = PopoverContent

  static propTypes = {
    /**
     * Children of the ``
     */
    children: Children.oneOf([PopoverTrigger, PopoverContent]),

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

    /**