@itwin/itwinui-react/esm/core/ComboBox/ComboBoxMenuItem.js

A react component library for iTwinUI

import * as React from 'react';
import {
  useSafeContext,
  useMergedRefs,
  SvgCheckmark,
} from '../../utils/index.js';
import { ComboBoxStateContext } from './helpers.js';
import { ListItem } from '../List/ListItem.js';
export const ComboBoxMenuItem = React.memo(
  React.forwardRef((props, forwardedRef) => {
    let {
      children,
      isSelected,
      disabled,
      value,
      onClick,
      sublabel,
      size = !!sublabel ? 'large' : 'default',
      startIcon,
      endIcon,
      role = 'option',
      index,
      ...rest
    } = props;
    let { focusedIndex, enableVirtualization } =
      useSafeContext(ComboBoxStateContext);
    let focusRef = (el) => {
      if (!enableVirtualization && focusedIndex === index)
        el?.scrollIntoView({
          block: 'nearest',
        });
    };
    let refs = useMergedRefs(forwardedRef, focusRef);
    return React.createElement(
      ListItem,
      {
        as: 'div',
        actionable: true,
        size: size,
        active: isSelected,
        disabled: disabled,
        focused: focusedIndex === index,
        ref: refs,
        onClick: () => onClick?.(),
        role: role,
        tabIndex: 'presentation' === role ? void 0 : -1,
        'aria-selected': isSelected,
        'aria-disabled': disabled,
        'data-iui-index': index,
        ...rest,
      },
      startIcon &&
        React.createElement(
          ListItem.Icon,
          {
            as: 'span',
            'aria-hidden': true,
          },
          startIcon,
        ),
      React.createElement(
        ListItem.Content,
        null,
        children,
        sublabel && React.createElement(ListItem.Description, null, sublabel),
      ),
      endIcon ||
        (isSelected &&
          React.createElement(
            ListItem.Icon,
            {
              as: 'span',
              'aria-hidden': true,
            },
            endIcon ?? React.createElement(SvgCheckmark, null),
          )),
    );
  }),
);
if ('development' === process.env.NODE_ENV)
  ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';