import { dynamic } from "@solidjs/web";
import { createEffect, createSignal, omit } from "solid-js";
import { composeRefs, userRef } from "../../internals/compose-refs.jsx";
import { mergeRootProps } from "../../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../../internals/resolve-class-style.jsx";
import { useScrollAreaRootContext } from "../root/scroll-area-root-context.jsx";
import { scrollAreaDataAttrs } from "../utils/state-attrs.jsx";
import { useScrollAreaViewportContext } from "../viewport/scroll-area-viewport-context.jsx";
/**
 * Container for the scrollable content. Renders a `<div>` element (or `as`
 * override). Runs a `ResizeObserver` on its own wrapper so size changes within
 * the content re-trigger the viewport's thumb recompute.
 *
 * §1 wave 3: replaces `renderElement` with `dynamic(() => props.as ?? "div")`.
 */
export function ScrollAreaContent(props) {
  const root = useScrollAreaRootContext();
  const viewport = useScrollAreaViewportContext();
  const [contentWrapper, setContentWrapper] = createSignal(null, {
    ownedWrite: true
  });
  createEffect(() => contentWrapper(), el => {
    if (typeof ResizeObserver === "undefined" || !el) return;
    let hasInitialized = false;
    const ro = new ResizeObserver(() => {
      // Skip the initial delivery to avoid double-counting the mount
      // pass which the viewport already performed.
      if (!hasInitialized) {
        hasInitialized = true;
        return;
      }
      viewport.computeThumbPosition();
    });
    ro.observe(el);
    return () => {
      ro.disconnect();
    };
  });
  const userStyling = resolveClassStyle(props, () => root.viewportState());
  const userProps = omit(props, "class", "style", "attrs", "as");
  const localRef = el => {
    setContentWrapper(el);
  };
  const internalSlot = {
    role: "presentation",
    style: {
      "min-width": "fit-content"
    }
  };
  const styledUserProps = mergeRootProps(userStyling, userProps);
  let merged = mergeRootProps(internalSlot, scrollAreaDataAttrs(root.viewportState));
  merged = mergeRootProps(merged, styledUserProps);
  const Tag = dynamic(() => props.as ?? "div");
  return <Tag {...merged} ref={composeRefs(localRef, userRef(props))} />;
}
//# sourceMappingURL=scroll-area-content.jsx.map