How to use the @fluentui/react-proptypes.itemShorthand function in @fluentui/react-proptypes

static slotClassNames: TableSlotClassNames = {
    header: `${Table.className}__header`,
  }

  static propTypes = {
    ...commonPropTypes.createCommon({
      content: false,
    }),
    content: customPropTypes.every([
      customPropTypes.disallow(['children']),
      PropTypes.oneOfType([
        PropTypes.arrayOf(customPropTypes.nodeContent),
        customPropTypes.nodeContent,
      ]),
    ]),
    header: customPropTypes.itemShorthand,
    rows: customPropTypes.collectionShorthand,
    compact: PropTypes.bool,
  }

  static defaultProps = {
    as: 'div',
    accessibility: tableBehavior as Accessibility,
  }

  renderRows(accessibility: ReactAccessibilityBehavior, variables: ComponentVariablesObject) {
    const { rows, compact } = this.props

    return _.map(rows, (row: TableRowProps, index: number) => {
      const props = {
        role: accessibility.attributes.row.role,
        compact,

defaultSearchQuery: PropTypes.string,
    defaultValue: PropTypes.oneOfType([
      customPropTypes.itemShorthand,
      customPropTypes.collectionShorthand,
    ]),
    fluid: PropTypes.bool,
    getA11ySelectionMessage: PropTypes.object,
    getA11yStatusMessage: PropTypes.func,
    highlightFirstItemOnOpen: PropTypes.bool,
    highlightedIndex: PropTypes.number,
    inline: PropTypes.bool,
    items: customPropTypes.collectionShorthand,
    itemToString: PropTypes.func,
    itemToValue: PropTypes.func,
    loading: PropTypes.bool,
    loadingMessage: customPropTypes.itemShorthand,
    moveFocusOnTab: PropTypes.bool,
    multiple: PropTypes.bool,
    noResultsMessage: customPropTypes.itemShorthand,
    offset: PropTypes.string,
    onOpenChange: PropTypes.func,
    onSearchQueryChange: PropTypes.func,
    onSelectedChange: PropTypes.func,
    open: PropTypes.bool,
    placeholder: PropTypes.string,
    position: PropTypes.oneOf(POSITIONS),
    renderItem: PropTypes.func,
    renderSelectedItem: PropTypes.func,
    search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
    searchQuery: PropTypes.string,
    searchInput: customPropTypes.itemShorthand,
    toggleIndicator: customPropTypes.itemShorthandWithoutJSX,

static slotClassNames: ToolbarMenuItemSlotClassNames = {
    activeIndicator: `${ToolbarMenuItem.className}__activeIndicator`,
    wrapper: `${ToolbarMenuItem.className}__wrapper`,
    submenu: `${ToolbarMenuItem.className}__submenu`,
  }

  static create: ShorthandFactory

  static propTypes = {
    ...commonPropTypes.createCommon(),
    active: PropTypes.bool,
    activeIndicator: customPropTypes.itemShorthandWithoutJSX,
    defaultMenuOpen: PropTypes.bool,
    disabled: PropTypes.bool,
    icon: customPropTypes.itemShorthand,
    index: PropTypes.number,
    submenuIndicator: customPropTypes.itemShorthandWithoutJSX,
    inSubmenu: PropTypes.bool,
    menu: PropTypes.oneOfType([customPropTypes.itemShorthand, customPropTypes.collectionShorthand]),
    menuOpen: PropTypes.bool,
    onClick: PropTypes.func,
    popup: PropTypes.oneOfType([
      PropTypes.shape({
        ...Popup.propTypes,
        trigger: customPropTypes.never,
        children: customPropTypes.never,
      }),
      PropTypes.string,
    ]),
    wrapper: customPropTypes.itemShorthand,
  }

class FormField extends UIComponent, any> {
  static displayName = 'FormField'

  static className = 'ui-form__field'

  static create: ShorthandFactory

  static propTypes = {
    ...commonPropTypes.createCommon({
      content: false,
    }),
    control: customPropTypes.itemShorthand,
    id: PropTypes.string,
    inline: PropTypes.bool,
    label: customPropTypes.itemShorthand,
    message: customPropTypes.itemShorthand,
    name: PropTypes.string,
    required: PropTypes.bool,
    type: PropTypes.string,
  }

  static defaultProps = {
    as: 'div',
    control: { as: Input },
  }

  renderComponent({
    ElementType,
    classes,
    accessibility,
    styles,

loadingMessage: customPropTypes.itemShorthand,
    moveFocusOnTab: PropTypes.bool,
    multiple: PropTypes.bool,
    noResultsMessage: customPropTypes.itemShorthand,
    offset: PropTypes.string,
    onOpenChange: PropTypes.func,
    onSearchQueryChange: PropTypes.func,
    onSelectedChange: PropTypes.func,
    open: PropTypes.bool,
    placeholder: PropTypes.string,
    position: PropTypes.oneOf(POSITIONS),
    renderItem: PropTypes.func,
    renderSelectedItem: PropTypes.func,
    search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
    searchQuery: PropTypes.string,
    searchInput: customPropTypes.itemShorthand,
    toggleIndicator: customPropTypes.itemShorthandWithoutJSX,
    triggerButton: customPropTypes.itemShorthand,
    unstable_pinned: PropTypes.bool,
    value: PropTypes.oneOfType([
      customPropTypes.itemShorthand,
      customPropTypes.collectionShorthand,
    ]),
  }

  static defaultProps = {
    align: 'start',
    as: 'div',
    checkableIndicator: 'stardust-checkmark',
    clearIndicator: 'stardust-close',
    itemToString: item => {
      if (!item || React.isValidElement(item)) {

static displayName = 'SplitButton'

  static className = 'ui-splitbutton'

  static slotClassNames: SplitButtonSlotClassNames = {
    toggleButton: `${SplitButton.className}__toggleButton`,
  }

  static propTypes = {
    ...commonPropTypes.createCommon({
      content: false,
    }),
    button: customPropTypes.itemShorthand,
    defaultOpen: PropTypes.bool,
    menu: PropTypes.oneOfType([
      customPropTypes.itemShorthand,
      PropTypes.arrayOf(customPropTypes.itemShorthandWithoutJSX),
    ]),
    onMainButtonClick: PropTypes.func,
    onMenuItemClick: PropTypes.func,
    onOpenChange: PropTypes.func,
    open: PropTypes.bool,
    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
    toggleButton: customPropTypes.itemShorthand,
  }

  static defaultProps = {
    accessibility: splitButtonBehavior,
    as: 'span',
    toggleButton: {},
  }

static create: ShorthandFactory

  static slotClassNames: ChatMessageSlotClassNames

  static displayName = 'ChatMessage'

  static __isChatMessage = true

  static isTypeOfElement = element => _.get(element, `type.__isChatMessage`)

  static propTypes = {
    ...commonPropTypes.createCommon({ content: 'shorthand' }),
    actionMenu: customPropTypes.itemShorthand,
    attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
    author: customPropTypes.itemShorthand,
    badge: customPropTypes.itemShorthand,
    badgePosition: PropTypes.oneOf(['start', 'end']),
    mine: PropTypes.bool,
    timestamp: customPropTypes.itemShorthand,
    onBlur: PropTypes.func,
    onFocus: PropTypes.func,
    onMouseEnter: PropTypes.func,
    positionActionMenu: PropTypes.bool,
    reactionGroup: PropTypes.oneOfType([
      customPropTypes.collectionShorthand,
      customPropTypes.itemShorthand,
    ]),
    reactionGroupPosition: PropTypes.oneOf(['start', 'end']),
    unstable_overflow: PropTypes.bool,
  }

  static defaultProps = {

customPropTypes.collectionShorthand,
    ]),
    fluid: PropTypes.bool,
    getA11ySelectionMessage: PropTypes.object,
    getA11yStatusMessage: PropTypes.func,
    highlightFirstItemOnOpen: PropTypes.bool,
    highlightedIndex: PropTypes.number,
    inline: PropTypes.bool,
    items: customPropTypes.collectionShorthand,
    itemToString: PropTypes.func,
    itemToValue: PropTypes.func,
    loading: PropTypes.bool,
    loadingMessage: customPropTypes.itemShorthand,
    moveFocusOnTab: PropTypes.bool,
    multiple: PropTypes.bool,
    noResultsMessage: customPropTypes.itemShorthand,
    offset: PropTypes.string,
    onOpenChange: PropTypes.func,
    onSearchQueryChange: PropTypes.func,
    onSelectedChange: PropTypes.func,
    open: PropTypes.bool,
    placeholder: PropTypes.string,
    position: PropTypes.oneOf(POSITIONS),
    renderItem: PropTypes.func,
    renderSelectedItem: PropTypes.func,
    search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
    searchQuery: PropTypes.string,
    searchInput: customPropTypes.itemShorthand,
    toggleIndicator: customPropTypes.itemShorthandWithoutJSX,
    triggerButton: customPropTypes.itemShorthand,
    unstable_pinned: PropTypes.bool,
    value: PropTypes.oneOfType([

customPropTypes.disallow(['children']),
      PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
    ]),
    defaultActiveIndex: customPropTypes.every([
      customPropTypes.disallow(['children']),
      PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
    ]),
    exclusive: PropTypes.bool,
    expanded: PropTypes.bool,
    onTitleClick: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.func]),
    panels: customPropTypes.every([
      customPropTypes.disallow(['children']),
      PropTypes.arrayOf(
        PropTypes.shape({
          content: customPropTypes.itemShorthand,
          title: customPropTypes.itemShorthand,
        }),
      ),
    ]),

    renderPanelTitle: PropTypes.func,
    renderPanelContent: PropTypes.func,
  }

  static defaultProps = {
    accessibility: accordionBehavior,
    as: 'dl',
  }

  static autoControlledProps = ['activeIndex']

  static Title = AccordionTitle

static className = 'ui-embed'

  static displayName = 'Embed'

  static propTypes = {
    ...commonPropTypes.createCommon({
      children: false,
      content: false,
    }),
    active: PropTypes.bool,
    defaultActive: PropTypes.bool,
    control: customPropTypes.itemShorthand,
    iframe: customPropTypes.every([
      customPropTypes.disallow(['video']),
      customPropTypes.itemShorthand,
    ]),
    onActiveChanged: PropTypes.func,
    onClick: PropTypes.func,
    placeholder: PropTypes.string,
    video: customPropTypes.every([
      customPropTypes.disallow(['iframe']),
      customPropTypes.itemShorthand,
    ]),
  }

  static defaultProps = {
    as: 'span',
    accessibility: embedBehavior as Accessibility,
    control: {},
  }