How to use the @instructure/ui-prop-types.controllable function in @instructure/ui-prop-types

parent: Menu
id: Menu.Item
---
**/
@testable()
@themeable(theme, styles)
class MenuItem extends Component {
  static propTypes = {
    /* the menu item label */
    children: PropTypes.node.isRequired,
    /* whether to set the menu item state to selected or not on initial render */
    defaultSelected: PropTypes.bool,
    /**
    * whether the menu item is selected or not (must be accompanied by an `onSelect` prop)
    */
    selected: controllable(PropTypes.bool, 'onSelect', 'defaultSelected'),
    /**
    * when used with the `selected` prop, the component will not control its own state
    */
    onSelect: PropTypes.func,
    onClick: PropTypes.func,
    onKeyDown: PropTypes.func,
    onKeyUp: PropTypes.func,
    onMouseOver: PropTypes.func,
    /**
    * the id of the element that the menu item will act upon
    */
    controls: PropTypes.string,
    disabled: PropTypes.bool,
    /**
    * the element type to render as (will default to `<a>` if href is provided)
    */</a>

* Determines whether the user can type in the input
    */
    editable: PropTypes.bool,
    /**
    * Each children must be an option element.
    */
    children: Children.oneOf(['option', 'optgroup']),
    /**
    * a function that provides a reference to the internal input element
    */
    inputRef: PropTypes.func,
    value: PropTypes.string,
    /**
    * the selected value (must be accompanied by an `onChange` prop)
    */
    selectedOption: controllable(
      PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.shape({
          label: PropTypes.string.isRequired,
          value: PropTypes.string.isRequired,
          id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
          children: PropTypes.node,
          disabled: PropTypes.bool,
          icon: PropTypes.func,
          groupLabel: PropTypes.bool
        }),
        PropTypes.arrayOf(
          PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.shape({
              label: PropTypes.string.isRequired,

export default class Tabs extends Component {
  static propTypes = {
    /**
    * children of type `Tabs.Panel`
    */
    children: ChildrenPropTypes.oneOf([Panel, null]),

    variant: PropTypes.oneOf(['default', 'secondary']),
    /**
    * the index (zero based) of the panel that should be selected on initial render
    */
    defaultSelectedIndex: PropTypes.number,
    /**
    * the index (zero based) of the panel that should be selected (should be accompanied by `onChange`)
    */
    selectedIndex: controllable(PropTypes.number, 'onChange', 'defaultSelectedIndex'),
    /**
    * Call this function when the selected tab changes. When used with `selectedIndex`,
    * the component will not control its own state.
    */
    onChange: PropTypes.func,
    /**
    * the selected tab should be focused
    */
    focus: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
    margin: ThemeablePropTypes.spacing,

/**
     * 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
     */
    onSelect: PropTypes.func,
    /**
     * If a trigger is supplied, callback fired when the `<menu>` is closed
     */
    onDismiss: PropTypes.func,
    /**
     * If a trigger is supplied, callback fired when the `<menu>` trigger is blurred
     */</menu></menu></menu></menu></menu></menu></menu></menu>

class TabList extends Component {
  static propTypes = {
    /**
    * children of type `TabList.Panel`
    */
    children: Children.oneOf([TabPanel, null]),

    variant: PropTypes.oneOf(['simple', 'minimal']),
    /**
    * the index (zero based) of the panel that should be selected on initial render
    */
    defaultSelectedIndex: PropTypes.number,
    /**
    * the index (zero based) of the panel that should be selected (should be accompanied by `onChange`)
    */
    selectedIndex: controllable(PropTypes.number, 'onChange', 'defaultSelectedIndex'),
    /**
    * Call this function when the selected tab changes. When used with `selectedIndex`,
    * the component will not control its own state.
    */
    onChange: PropTypes.func,
    /**
    * the selected tab should be focused
    */
    focus: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via

* This format of the composite date-time when displayed in messages.
    * Valid formats are compatible with
    * [moment.js formats](https://momentjs.com/docs/#/displaying/format/),
    * including localized formats.
    **/
    messageFormat: PropTypes.string,
    /**
    * Vertically stacked, horizontally arranged in 2 columns, or inline.
    * See [FormFieldGroup](#FormFieldGroup) for details.
    **/
    layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
    /**
    * An ISO 8601 formatted date string representing the current date-time
    * (must be accompanied by an onChange prop).
    **/
    value: controllable(I18nPropTypes.iso8601, 'onChange'),
    /**
    * An ISO 8601 formatted date string to use if `value` isn't provided.
    **/
    defaultValue: I18nPropTypes.iso8601,
    required: PropTypes.bool,
    /**
     * Whether or not to disable the inputs
     */
    disabled: PropTypes.bool,
    /**
     * Works just like disabled but keeps the same styles as if it were active
     */
    readOnly: PropTypes.bool,
    /**
    * Called when the date-time value has changed.
    * The passed in parameters are

controllable (...args) {
    warnDeprecatedComponent('v5.45.0', 'controllable', changedPackageWarning(
      'ui-utils',
      'ui-prop-types'
    ))
    return controllable(...args)
  }

---
category: components
---
**/
@testable()
@themeable(theme, styles)
class Navigation extends Component {
  static propTypes = {
    /**
    * children of type Navigation.Item
    */
    children: ChildrenPropTypes.oneOf([NavigationItem]),
    /**
    * When minimized is set to true, the `` shows icons only while the text becomes a tooltip. When it is set to false, the `` shows text in addition to the icons
    */
    minimized: controllable(
      PropTypes.bool,
      'onMinimized',
      'defaultMinimized'
    ),
    /**
    * Whether the `` is initially minimized (uncontrolled)
    */
    defaultMinimized: PropTypes.bool,
    onMinimized: PropTypes.func,
    /**
    * Screen reader label for the main Navigation
    */
    label: PropTypes.string.isRequired,
    /**
    * Screen reader label for the toggle button expanded/minimized state
    */

/**
    * Determines whether the user can type in the input
    */
    editable: PropTypes.bool,
    /**
    * Each children must be an option element.
    */
    children: Children.oneOf(['option']),
    /**
    * a function that provides a reference to the internal input element
    */
    inputRef: PropTypes.func,
    /**
    * the selected value (must be accompanied by an `onChange` prop)
    */
    selectedOption: controllable(
      PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.shape({
          label: PropTypes.string.isRequired,
          value: PropTypes.string.isRequired,
          id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
          children: PropTypes.node
        }),
        PropTypes.arrayOf(
          PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.shape({
              label: PropTypes.string.isRequired,
              value: PropTypes.string.isRequired,
              id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
              children: PropTypes.node

* Works just like disabled but keeps the same styles as if it were active
     */
    readOnly: PropTypes.bool,
    required: PropTypes.bool,
    /**
    * a function that provides a reference to the actual textarea element
    */
    textareaRef: PropTypes.func,
    /**
    * value to set on initial render
    */
    defaultValue: PropTypes.string,
    /**
    * the selected value (must be accompanied by an `onChange` prop)
    */
    value: controllable(PropTypes.string),
    /**
    * when used with the `value` prop, the component will not control its own state
    */
    onChange: PropTypes.func
  }

  static defaultProps = {
    size: 'medium',
    autoGrow: true,
    resize: 'none',
    inline: false,
    messages: [],
    disabled: false,
    readOnly: false,
    textareaRef: function (textarea) {},
    layout: 'stacked',