@carlonicora/nextjs-jsonapi 6.27.0 → 6.28.0

package/src/components/containers/RoundPageContainer.tsx

@@ -119,6 +119,8 @@ type RoundPageContainerProps = {
    * navigation — an "info" icon actively misdescribes a conversation list.
    */
   detailsIcon?: ReactNode;
+  /** Paints the details panel on the recessed surface so cards inside it read as cards. Default "default" (unchanged). */
+  detailsSurface?: "default" | "muted";
   /**
    * Which element scrolls the page.
    * - `"document"` (default) — the shell's height only FLOORS at the viewport
@@ -187,6 +189,7 @@ export function RoundPageContainer({
   defaultDetailsOpen = false,
   detailsTitle,
   detailsIcon,
+  detailsSurface = "default",
   scroll = "fixed",
 }: RoundPageContainerProps) {
   const t = useTranslations();
@@ -702,7 +705,15 @@ export function RoundPageContainer({
                   <SheetHeader>
                     <SheetTitle>{detailsTitle ?? t("ui.labels.details")}</SheetTitle>
                   </SheetHeader>
-                  <div className="overflow-y-auto p-6 pt-0">{details}</div>
+                  <div
+                    data-slot="details-body"
+                    className={cn(
+                      "overflow-y-auto",
+                      detailsSurface === "muted" ? "bg-muted dark:bg-background p-3" : "p-6 pt-0",
+                    )}
+                  >
+                    {details}
+                  </div>
                 </SheetContent>
               </Sheet>
             ) : (
@@ -739,7 +750,15 @@ export function RoundPageContainer({
                     </div>
                   </div>
                 )}
-                <div className="min-h-0 flex-1 overflow-y-auto p-4">{details}</div>
+                <div
+                  data-slot="details-body"
+                  className={cn(
+                    "min-h-0 flex-1 overflow-y-auto",
+                    detailsSurface === "muted" ? "bg-muted dark:bg-background p-3" : "p-4",
+                  )}
+                >
+                  {details}
+                </div>
               </div>
             ))}
         </div>

package/src/components/containers/__tests__/RoundPageContainer.detailsSurface.spec.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { SharedProvider } from "../../../contexts/SharedContext";
+import { configureI18n } from "../../../i18n";
+import { RoundPageContainer } from "../../containers/RoundPageContainer";
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => "/",
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+  }),
+  useSearchParams: () => new URLSearchParams(),
+  useParams: () => ({}),
+  redirect: vi.fn(),
+  notFound: vi.fn(),
+}));
+
+beforeAll(() => {
+  configureI18n({
+    useRouter: () => ({
+      push: vi.fn(),
+      replace: vi.fn(),
+      back: vi.fn(),
+      forward: vi.fn(),
+      refresh: vi.fn(),
+      prefetch: vi.fn(),
+    }),
+    useTranslations: () => (key: string) => key,
+    usePathname: () => "/",
+    Link: ({ href, children, ...rest }: { href: string; children: React.ReactNode; [key: string]: any }) => (
+      <a href={href} {...rest}>
+        {children}
+      </a>
+    ),
+  });
+});
+
+function withShared(node: React.ReactNode) {
+  return <SharedProvider value={{ breadcrumbs: [], title: { type: "" } }}>{node}</SharedProvider>;
+}
+
+async function detailsBody(): Promise<HTMLElement> {
+  const content = await screen.findByText("d");
+  const body = content.closest<HTMLElement>('[data-slot="details-body"]');
+  if (!body) throw new Error("details body not found");
+  return body;
+}
+
+describe("RoundPageContainer details surface", () => {
+  it("default surface keeps the details body unpainted with p-4", async () => {
+    render(
+      withShared(
+        <RoundPageContainer testId="shell" details={<div>d</div>} defaultDetailsOpen>
+          content
+        </RoundPageContainer>,
+      ),
+    );
+    const body = await detailsBody();
+    expect(body.classList.contains("p-4")).toBe(true);
+    expect(body.classList.contains("bg-muted")).toBe(false);
+  });
+
+  it("muted surface paints the details body", async () => {
+    render(
+      withShared(
+        <RoundPageContainer testId="shell" details={<div>d</div>} defaultDetailsOpen detailsSurface="muted">
+          content
+        </RoundPageContainer>,
+      ),
+    );
+    const body = await detailsBody();
+    expect(body.classList.contains("bg-muted")).toBe(true);
+    expect(body.classList.contains("dark:bg-background")).toBe(true);
+    expect(body.classList.contains("p-3")).toBe(true);
+    expect(body.classList.contains("p-4")).toBe(false);
+  });
+});

package/src/components/typography/DetailField.tsx

@@ -6,6 +6,8 @@ type DetailFieldProps = React.ComponentProps<"div"> & {
   value?: React.ReactNode;
   horizontal?: boolean;
   labelWidth?: string;
+  /** Extra classes for the value element (e.g. "min-w-0 flex-1 break-words" so long values wrap in a horizontal row). */
+  valueClassName?: string;
 };
 
 function DetailField({
@@ -13,6 +15,7 @@ function DetailField({
   value,
   horizontal = false,
   labelWidth,
+  valueClassName,
   className,
   children,
   ...props
@@ -26,7 +29,7 @@ function DetailField({
       <span className={cn("text-muted-foreground text-xs", horizontal && labelWidth && cn("shrink-0", labelWidth))}>
         {label}
       </span>
-      <div className="text-sm">{value ?? children}</div>
+      <div className={cn("text-sm", valueClassName)}>{value ?? children}</div>
     </div>
   );
 }

package/src/components/typography/__tests__/DetailField.spec.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { DetailField } from "../DetailField";
+
+describe("DetailField", () => {
+  it("valueClassName lands on the value element", () => {
+    render(<DetailField horizontal label="L" value="V" valueClassName="min-w-0 flex-1" />);
+    const value = screen.getByText("V");
+    expect(value.classList.contains("text-sm")).toBe(true);
+    expect(value.classList.contains("min-w-0")).toBe(true);
+    expect(value.classList.contains("flex-1")).toBe(true);
+  });
+});