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

class ToolbarMenuRadioGroup extends UIComponent> {
  static displayName = 'ToolbarMenuRadioGroup'

  static create: ShorthandFactory

  static className = 'ui-toolbars' // FIXME: required by getComponentInfo/isConformant. But this is group inside a toolbar not a group of toolbars

  static slotClassNames: ToolbarMenuRadioGroupSlotClassNames = {
    wrapper: `${ToolbarMenuRadioGroup.className}__wrapper`,
  }

  static propTypes = {
    ...commonPropTypes.createCommon(),
    activeIndex: PropTypes.number,
    items: customPropTypes.collectionShorthand,
    onItemClick: PropTypes.func,
    wrapper: customPropTypes.itemShorthand,
  }

  static defaultProps = {
    as: 'ul',
    accessibility: toolbarMenuRadioGroupBehavior,
    wrapper: {},
  }

  handleItemOverrides = variables => (
    predefinedProps: ToolbarMenuItemProps,
  ): ToolbarMenuItemProps => ({
    onClick: (e, itemProps) => {
      _.invoke(predefinedProps, 'onClick', e, itemProps)
      _.invoke(this.props, 'onItemClick', e, itemProps)

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)) {
        return ''
      }

      // targets DropdownItem shorthand objects
      return (item as any).header || String(item)
    },

accessibility?: Accessibility

  /** The reactions contained inside the reaction group. */
  items?: ShorthandCollection
}

class ReactionGroup extends UIComponent> {
  static create: ShorthandFactory

  static displayName = 'ReactionGroup'

  static className = 'ui-reactions'

  static propTypes = {
    ...commonPropTypes.createCommon(),
    items: customPropTypes.collectionShorthand,
  }

  renderComponent({
    ElementType,
    classes,
    accessibility,
    styles,
    unhandledProps,
  }): React.ReactNode {
    const { children, items, content } = this.props
    if (_.isNil(items)) {
      return (

static className = 'ui-radiogroup'

  static slotClassNames: RadioGroupSlotClassNames = {
    item: `${RadioGroup.className}__item`,
  }

  static create: ShorthandFactory

  static propTypes = {
    ...commonPropTypes.createCommon({
      content: false,
    }),
    checkedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    defaultCheckedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    items: customPropTypes.collectionShorthand,
    checkedValueChanged: PropTypes.func,
    vertical: PropTypes.bool,
  }

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

  static autoControlledProps = ['checkedValue']

  static Item = RadioGroupItem

  renderComponent({ ElementType, classes, accessibility, unhandledProps }) {
    const { children, vertical } = this.props
    return (

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 = {
    accessibility: chatMessageBehavior,
    as: 'div',
    badgePosition: 'end',
    positionActionMenu: true,
    reactionGroupPosition: 'start',
  }

  updateActionsMenuPosition = () => {}

static className = 'ui-alert'

  static slotClassNames: AlertSlotClassNames = {
    content: `${Alert.className}__content`,
    actions: `${Alert.className}__actions`,
    dismissAction: `${Alert.className}__dismissAction`,
    icon: `${Alert.className}__icon`,
    header: `${Alert.className}__header`,
    body: `${Alert.className}__body`,
  }

  static propTypes = {
    ...commonPropTypes.createCommon({ content: 'shorthand' }),
    actions: PropTypes.oneOfType([
      customPropTypes.itemShorthand,
      customPropTypes.collectionShorthand,
    ]),
    icon: customPropTypes.itemShorthandWithoutJSX,
    header: customPropTypes.itemShorthand,
    attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
    fitted: PropTypes.bool,
    danger: PropTypes.bool,
    defaultVisible: PropTypes.bool,
    dismissible: PropTypes.bool,
    dismissAction: customPropTypes.itemShorthand,
    info: PropTypes.bool,
    onDismiss: PropTypes.func,
    onFocus: PropTypes.func,
    success: PropTypes.bool,
    visible: PropTypes.bool,
    warning: PropTypes.bool,
    body: customPropTypes.itemShorthand,

icon: customPropTypes.itemShorthandWithoutJSX,
    iconOnly: PropTypes.bool,
    index: PropTypes.number,
    itemPosition: PropTypes.number,
    itemsCount: PropTypes.number,
    onClick: PropTypes.func,
    onFocus: PropTypes.func,
    onBlur: PropTypes.func,
    pills: PropTypes.bool,
    pointing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['start', 'end'])]),
    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
    underlined: PropTypes.bool,
    vertical: PropTypes.bool,
    wrapper: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
    menu: PropTypes.oneOfType([customPropTypes.itemShorthand, customPropTypes.collectionShorthand]),
    menuOpen: PropTypes.bool,
    defaultMenuOpen: PropTypes.bool,
    onActiveChanged: PropTypes.func,
    inSubmenu: PropTypes.bool,
    indicator: customPropTypes.itemShorthandWithoutJSX,
    onMenuOpenChange: PropTypes.func,
  }

  static defaultProps = {
    as: 'a',
    accessibility: menuItemBehavior as Accessibility,
    wrapper: { as: 'li' },
  }

  static autoControlledProps = ['menuOpen']

buttons?: ShorthandCollection

  /** The buttons inside group can appear circular. */
  circular?: boolean
}

class ButtonGroup extends UIComponent, any> {
  static create: ShorthandFactory

  static displayName = 'ButtonGroup'

  static className = 'ui-buttons'

  static propTypes = {
    ...commonPropTypes.createCommon(),
    buttons: customPropTypes.collectionShorthand,
    circular: PropTypes.bool,
  }

  static defaultProps = {
    as: 'div',
  }

  renderComponent({
    ElementType,
    classes,
    accessibility,
    styles,
    unhandledProps,
  }): React.ReactNode {
    const { children, buttons, circular, content } = this.props
    if (_.isNil(buttons)) {

static className = 'ui-table__row'

  static create: ShorthandFactory

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

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

  renderCells(variables: ComponentVariablesObject) {
    const { items, header } = this.props

    return _.map(items, (item: TableCellProps, index: number) => {
      const cellProps = {
        ...(header && {
          accessibility: tableHeaderCellBehavior as Accessibility,

children: false,
      content: false,
    }),
    activeSelectedIndex: PropTypes.number,
    align: PropTypes.oneOf(ALIGNMENTS),
    checkable: PropTypes.bool,
    checkableIndicator: customPropTypes.itemShorthandWithoutJSX,
    clearable: PropTypes.bool,
    clearIndicator: customPropTypes.itemShorthand,
    defaultActiveSelectedIndex: PropTypes.number,
    defaultOpen: PropTypes.bool,
    defaultHighlightedIndex: PropTypes.number,
    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,