How to use @instructure/ui-options - 3 common examples

const { getOptionProps, getDisabledOptionProps } = data
    const {
      id,
      isDisabled,
      isHighlighted,
      isSelected,
      renderBeforeLabel,
      renderAfterLabel,
      children
    } = option.props

    let optionProps = {
      // passthrough props
      ...omitProps(option.props, {
        ...Option.propTypes,
        ...Options.Item.propTypes
      }),
      // props from selectable
      ...getOptionProps({ id }),
      // Options.Item props
      renderBeforeLabel,
      renderAfterLabel
    }
    // should option be treated as highlighted or selected
    if (isSelected) {
      optionProps.variant = 'selected'
    } else if (isHighlighted) {
      optionProps.variant = 'highlighted'
    }
    // should option be treated as disabled
    if (isDisabled) {
      optionProps.variant = 'disabled'

const groupChildren = []
    // add a separator above
    if (!isFirstChild && !afterGroup) {
      groupChildren.push()
    }
    // create a sublist as a group
    // a wrapping listitem will be created by Options
    groupChildren.push(
      
        {Children.map(children, (child) => {
          return this.renderOption(child, {
            getOptionProps,
            getDisabledOptionProps
          })
        })}
      
    )
    // add a separator below
    if (!isLastChild) {
      groupChildren.push()
    }

findOptionsList: async (element, ...args) => {
    const content = await PopoverLocator.findContent(element, ...args)
    return content ? OptionsLocator.find(content.getDOMNode()) : null
  }
})