Function PropertyRow

packages/react/src/components/schema-explorer.tsx:212–311

(props: {
  name: string;
  schema: JsonSchema;
  root: JsonSchema;
  required: boolean;
  depth: number;
  isLast?: boolean;
  /** Hide the required/optional badge entirely (e.g. for union variants) */
  hideRequiredBadge?: boolean;
})

// ---------------------------------------------------------------------------

function PropertyRow(props: {
  name: string;
  schema: JsonSchema;
  root: JsonSchema;
  required: boolean;
  depth: number;
  isLast?: boolean;
  /** Hide the required/optional badge entirely (e.g. for union variants) */
  hideRequiredBadge?: boolean;
}) {
  const { name, schema, root, required, depth, hideRequiredBadge } = props;
  const [open, setOpen] = useState(false);
  const [resolved, setResolved] = useState<JsonSchema | null>(null);

  const expandable = isExpandable(schema, root);
  const typeLabel = getTypeLabel(schema, root);
  const description =
    schemaText(schema.description) ??
    (schema.$ref ? schemaText(resolveRef(schema.$ref, root)?.description) : undefined);

  const handleToggle = useCallback(() => {
    if (!open && !resolved && schema.$ref) {
      setResolved(resolveRef(schema.$ref, root));
    }
    setOpen((v) => !v);
  }, [open, resolved, schema, root]);

  const childSchema = schema.$ref ? (resolved ?? resolveRef(schema.$ref, root) ?? schema) : schema;

  return (
    <div>
      <div
        role={expandable ? "button" : undefined}
        tabIndex={expandable ? 0 : undefined}
        onClick={expandable ? handleToggle : undefined}
        onKeyDown={
          expandable
            ? (e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  handleToggle();
                }
              }
            : undefined
        }
        className={[
          "flex items-start gap-2 py-2.5 px-4",
          expandable ? "cursor-pointer hover:bg-accent/40 transition-colors" : "",
        ].join(" ")}
        style={depth > 0 ? { paddingLeft: `${depth * 16 + 16}px` } : undefined}
      >
        {/* Chevron or dot */}
        <div className="mt-0.5 flex size-4 shrink-0 items-center justify-center">
          {expandable ? (
            <ChevronRight
              className="size-3.5 shrink-0 text-muted-foreground transition-transform duration-150"
              style={open ? { transform: "rotate(90deg)" } : undefined}
            />