"use client";
import * as React from "react";
import { useRenderElement } from "../../utils/useRenderElement.js";
import { ComboboxChipsContext } from "./ComboboxChipsContext.js";
import { CompositeList } from "../../composite/list/CompositeList.js";
import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
import { selectors } from "../store.js";
import { jsx } from "react/jsx-runtime";
import { useStore } from "../../../../utils/esm/store/useStore.js";
const ComboboxChips = /* @__PURE__ */ React.forwardRef(function ComboboxChips2(componentProps, forwardedRef) {
  const {
    render,
    className,
    ...elementProps
  } = componentProps;
  const store = useComboboxRootContext();
  const open = useStore(store, selectors.open);
  const [highlightedChipIndex, setHighlightedChipIndex] = React.useState(void 0);
  if (open && highlightedChipIndex !== void 0) {
    setHighlightedChipIndex(void 0);
  }
  const chipsRef = React.useRef([]);
  const element = useRenderElement("div", componentProps, {
    ref: [forwardedRef, store.state.chipsContainerRef],
    props: elementProps
  });
  const contextValue = React.useMemo(() => ({
    highlightedChipIndex,
    setHighlightedChipIndex,
    chipsRef
  }), [highlightedChipIndex, setHighlightedChipIndex, chipsRef]);
  return /* @__PURE__ */ jsx(ComboboxChipsContext.Provider, {
    value: contextValue,
    children: /* @__PURE__ */ jsx(CompositeList, {
      elementsRef: chipsRef,
      children: element
    })
  });
});
if (process.env.NODE_ENV !== "production") ComboboxChips.displayName = "ComboboxChips";
export {
  ComboboxChips
};
//# sourceMappingURL=ComboboxChips.js.map
