Function ComboBoxItem

packages/@react-spectrum/s2/src/ComboBox.tsx:469–533

(props: ComboBoxItemProps)

} as const;

export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
  let ref = useRef(null);
  let isLink = props.href != null;
  let {size} = useContext(InternalComboboxContext);
  return (
    <ListBoxItem
      {...props}
      ref={ref}
      textValue={
        props.textValue ||
        (typeof props.children === 'string' ? (props.children as string) : undefined)
      }
      style={pressScale(ref, props.UNSAFE_style)}
      className={renderProps =>
        (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)
      }>
      {renderProps => {
        let {children} = props;
        return (
          <>
            <Provider
              values={[
                [
                  IconContext,
                  {
                    slots: {
                      icon: {
                        render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
                        styles: icon
                      }
                    }
                  }
                ],
                [
                  AvatarContext,
                  {
                    slots: {
                      avatar: {size: avatarSize[size], styles: avatar}
                    }
                  }
                ],
                [
                  TextContext,
                  {
                    slots: {
                      label: {styles: label({size})},
                      description: {styles: description({...renderProps, size})}
                    }
                  }
                ]
              ]}>
              {!isLink && !props.onAction && (
                <CheckmarkIcon
                  size={checkmarkIconSize[size]}
                  className={checkmark({...renderProps, size})}
                />
              )}
              {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}