import { dynamic } from "@solidjs/web";
import { createMemo, omit } from "solid-js";
import { composeRefs, userRef } from "../../internals/compose-refs.jsx";
import { CompositeList } from "../../internals/composite/composite-list.jsx";
import { mergeRootProps } from "../../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../../internals/resolve-class-style.jsx";
import { useComboboxRootContext } from "../root/combobox-root-context.jsx";
/**
 * A list container for the items. Renders a `<div>` element with
 * `role="listbox"` and wires `<CompositeList>` so items auto-register
 * their DOM order + labels for typeahead.
 */
export function ComboboxList(props) {
  const root = useComboboxRootContext();
  const state = createMemo(() => ({
    empty: root.flatFilteredItems().length === 0
  }));
  const setListRef = el => {
    root.setListElement(el);
  };
  function onKeyDown(event) {
    if (root.disabled() || root.readOnly()) return;
    if (event.key === "Enter") {
      const ai = root.activeIndex();
      if (ai == null) return;
      event.preventDefault();
      const li = root.listRef.current[ai];
      if (li) li.click();
    }
  }
  const internal = {
    role: "listbox",
    tabIndex: -1,
    get id() {
      return root.floatingRootContext.useState("floatingId") ?? undefined;
    },
    onKeyDown,
    onKeyDownCapture() {
      root.keyboardActiveRef.current = true;
    },
    onPointerMoveCapture() {
      root.keyboardActiveRef.current = false;
    },
    get "data-empty"() {
      return state().empty ? "" : undefined;
    }
  };
  const userClassStyle = resolveClassStyle(props, () => state());
  const userProps = omit(props, "as", "class", "style", "attrs");
  let merged = mergeRootProps(root.interactions.getFloatingProps(), internal);
  merged = mergeRootProps(merged, userClassStyle);
  merged = mergeRootProps(merged, userProps);
  const Tag = dynamic(() => props.as ?? "div");
  const element = () => <Tag {...merged} ref={composeRefs(setListRef, userRef(props))} />;
  const hasItems = () => root.items() !== undefined;

  // In static-children mode the `dynamic()` element (and therefore the
  // `<Combobox.Item>` children it renders) MUST be created *inside* the
  // `<CompositeList>` provider so the items resolve the real
  // `CompositeListContext` and register their DOM order. If the element were
  // built in this component's own owner (e.g. `const element = <Tag/>`)
  // the item children would execute under ComboboxList's owner — outside the
  // provider — and silently fall back to the no-op context, so they would
  // never register, `index()` would stay `-1`, `listRef` would stay empty,
  // and keyboard navigation would be dead. Mirror `<Select.Positioner>`,
  // which inlines its `dynamic()` element inside `<CompositeList>` for the same
  // reason. (items-mode has no item-registration dependency, so the plain
  // element is fine there.)
  return <>
			{hasItems() ? element() : <CompositeList elementsRef={root.listRef.current} labelsRef={root.labelsRef.current}>
					{element()}
				</CompositeList>}
		</>;
}
//# sourceMappingURL=combobox-list.jsx.map