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

static slotClassNames: CheckboxSlotClassNames

  static create: ShorthandFactory

  static displayName = 'Checkbox'

  static className = 'ui-checkbox'

  static propTypes = {
    ...commonPropTypes.createCommon({
      content: false,
    }),
    checked: PropTypes.bool,
    defaultChecked: PropTypes.bool,
    disabled: PropTypes.bool,
    icon: customPropTypes.itemShorthandWithoutJSX,
    label: customPropTypes.itemShorthand,
    labelPosition: PropTypes.oneOf(['start', 'end']),
    onChange: PropTypes.func,
    onClick: PropTypes.func,
    toggle: PropTypes.bool,
  }

  static defaultProps = {
    accessibility: checkboxBehavior,
    icon: {},
    labelPosition: 'end',
  }

  static autoControlledProps = ['checked']

  actionHandlers = {

static displayName = 'Button'

  static className = 'ui-button'

  static propTypes = {
    ...commonPropTypes.createCommon({
      content: 'shorthand',
    }),
    circular: PropTypes.bool,
    disabled: PropTypes.bool,
    fluid: PropTypes.bool,
    icon: customPropTypes.itemShorthandWithoutJSX,
    iconOnly: PropTypes.bool,
    iconPosition: PropTypes.oneOf(['before', 'after']),
    loader: customPropTypes.itemShorthandWithoutJSX,
    loading: PropTypes.bool,
    onClick: PropTypes.func,
    onFocus: PropTypes.func,
    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
    text: PropTypes.bool,
    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
    size: customPropTypes.size,
  }

  static defaultProps = {
    as: 'button',
    accessibility: buttonBehavior as Accessibility,
    size: 'medium',
  }

  static Group = ButtonGroup

class Button extends UIComponent> {
  static create: ShorthandFactory

  static displayName = 'Button'

  static className = 'ui-button'

  static propTypes = {
    ...commonPropTypes.createCommon({
      content: 'shorthand',
    }),
    circular: PropTypes.bool,
    disabled: PropTypes.bool,
    fluid: PropTypes.bool,
    icon: customPropTypes.itemShorthandWithoutJSX,
    iconOnly: PropTypes.bool,
    iconPosition: PropTypes.oneOf(['before', 'after']),
    loader: customPropTypes.itemShorthandWithoutJSX,
    loading: PropTypes.bool,
    onClick: PropTypes.func,
    onFocus: PropTypes.func,
    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
    text: PropTypes.bool,
    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
    size: customPropTypes.size,
  }

  static defaultProps = {
    as: 'button',
    accessibility: buttonBehavior as Accessibility,
    size: 'medium',

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

  static className = 'ui-toolbar__item'

  static slotClassNames: ToolbarItemSlotClassNames = {
    wrapper: `${ToolbarItem.className}__wrapper`,
  }

  static create: ShorthandFactory

  static propTypes = {
    ...commonPropTypes.createCommon(),
    active: PropTypes.bool,
    disabled: PropTypes.bool,
    icon: customPropTypes.itemShorthandWithoutJSX,
    menu: PropTypes.oneOfType([
      customPropTypes.shorthandAllowingChildren,
      PropTypes.arrayOf(customPropTypes.shorthandAllowingChildren),
    ]),
    menuOpen: PropTypes.bool,
    onMenuOpenChange: PropTypes.func,
    onClick: PropTypes.func,
    onFocus: PropTypes.func,
    onBlur: PropTypes.func,
    popup: PropTypes.oneOfType([
      PropTypes.shape({
        ...Popup.propTypes,
        trigger: customPropTypes.never,
        children: customPropTypes.never,
      }),
      PropTypes.string,

/** A vertical carousel navigation displays elements vertically. */
  vertical?: boolean
}

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

  static className = 'ui-carousel__navigationitem'

  static create: ShorthandFactory

  static propTypes = {
    ...commonPropTypes.createCommon(),
    active: PropTypes.bool,
    icon: customPropTypes.itemShorthandWithoutJSX,
    iconOnly: PropTypes.bool,
    index: PropTypes.number,
    onClick: PropTypes.func,
    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
    vertical: PropTypes.bool,
  }

  static defaultProps = {
    accessibility: tabBehavior as Accessibility,
    as: 'li',
    icon: { name: 'icon-circle', size: 'smallest' as SizeValue },
  }

  renderComponent({ ElementType, classes, accessibility, styles, variables, unhandledProps }) {
    const { children, content, icon } = this.props

content: false,
    }),
    activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    fluid: PropTypes.bool,
    iconOnly: PropTypes.bool,
    items: customPropTypes.collectionShorthandWithKindProp(['divider', 'item']),
    onItemClick: 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,
    submenu: PropTypes.bool,
    indicator: customPropTypes.itemShorthandWithoutJSX,
  }

  static defaultProps = {
    as: 'ul',
    accessibility: menuBehavior as Accessibility,
  }

  static autoControlledProps = ['activeIndex']

  static Item = MenuItem
  static Divider = MenuDivider

  handleItemOverrides = variables => predefinedProps => ({
    onClick: (e, itemProps) => {
      const { index } = itemProps

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,
  }

  static defaultProps = {

static a11yStatusCleanupTime = 500
  static charKeyPressedCleanupTime = 500

  static slotClassNames: DropdownSlotClassNames

  static propTypes = {
    ...commonPropTypes.createCommon({
      accessibility: false,
      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,

static displayName = 'MenuItem'

  static className = 'ui-menu__item'

  static slotClassNames: MenuItemSlotClassNames = {
    submenu: `${MenuItem.className}__submenu`,
    wrapper: `${MenuItem.className}__wrapper`,
  }

  static create: ShorthandFactory

  static propTypes = {
    ...commonPropTypes.createCommon(),
    active: PropTypes.bool,
    disabled: PropTypes.bool,
    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,

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,
  }