@base-ui-components/react/esm/composite/item/useCompositeItem.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

'use client';

import * as React from 'react';
import { useCompositeRootContext } from '../root/CompositeRootContext.js';
import { useCompositeListItem } from '../list/useCompositeListItem.js';
import { mergeReactProps } from '../../utils/mergeReactProps.js';
export function useCompositeItem(params = {}) {
  const {
    highlightedIndex,
    onHighlightedIndexChange
  } = useCompositeRootContext();
  const {
    ref,
    index
  } = useCompositeListItem(params);
  const isHighlighted = highlightedIndex === index;
  const getItemProps = React.useCallback((externalProps = {}) => mergeReactProps(externalProps, {
    tabIndex: isHighlighted ? 0 : -1,
    onFocus() {
      onHighlightedIndexChange(index);
    }
  }), [isHighlighted, index, onHighlightedIndexChange]);
  return React.useMemo(() => ({
    getItemProps,
    ref,
    index
  }), [getItemProps, ref, index]);
}