/**
 * `useCompositeItem` — thin wrapper around `useCompositeListItem` that also
 * reads the composite root context so items can contribute `tabIndex`,
 * `onFocus` and `onMouseMove` that keep `highlightedIndex` in sync.
 *
 * Mirrors `packages/react/src/internals/composite/item/useCompositeItem.ts`
 * in Base UI React.
 */

import { useCompositeRootContext } from "./composite-context.jsx";
import { useCompositeListItem } from "./composite-list.jsx";
export function useCompositeItem(params = {}) {
  const root = useCompositeRootContext();
  const {
    ref: listItemRef,
    index
  } = useCompositeListItem(params);
  let itemEl = null;
  const ref = el => {
    itemEl = el;
    listItemRef(el);
  };
  const isHighlighted = () => root.highlightedIndex() === index();
  const props = Object.defineProperties(Object.create(null), {
    tabIndex: {
      enumerable: true,
      configurable: true,
      get: () => isHighlighted() ? 0 : -1
    },
    onFocus: {
      enumerable: true,
      configurable: true,
      value: () => {
        root.onHighlightedIndexChange(index());
      }
    },
    onMouseMove: {
      enumerable: true,
      configurable: true,
      value: () => {
        if (!root.highlightItemOnHover()) return;
        const el = itemEl;
        if (!el) return;
        const disabled = el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true";
        if (!isHighlighted() && !disabled) el.focus();
      }
    }
  });
  return {
    props,
    ref,
    index
  };
}
//# sourceMappingURL=composite-item.jsx.map