import { createMemo } from "solid-js";
import { stringifyAsLabel } from "../internals/resolve-value-label.jsx";
import { useComboboxRootContext } from "../root/combobox-root-context.jsx";
/**
 * Displays the stringified selected value. When a render-function child
 * is supplied, it's called with the current selected value and may return
 * custom JSX (e.g. for badge / icon rendering).
 *
 * Doesn't render its own HTML element.
 */
export function ComboboxValue(props) {
  const root = useComboboxRootContext();
  const resolved = createMemo(() => {
    const sv = root.selectedValue();
    const child = props.children;
    if (typeof child === "function") {
      // `selectedValue()` is `unknown` at runtime; the `Value` generic is a
      // typed convenience for callers, so cast at this boundary.
      return child({
        value: sv
      });
    }
    if (child != null) return child;
    // No selected value → placeholder wins when supplied.
    const hasValue = Array.isArray(sv) ? sv.length > 0 : sv != null;
    if (!hasValue && props.placeholder != null) {
      return props.placeholder;
    }
    const itv = root.itemToStringLabel();
    if (Array.isArray(sv)) {
      return sv.map(v => stringifyAsLabel(v, itv)).join(", ");
    }
    return stringifyAsLabel(sv, itv);
  });
  return <>{resolved()}</>;
}
//# sourceMappingURL=combobox-value.jsx.map