@carlonicora/nextjs-jsonapi 3.20.1 → 3.22.0

package/src/components/containers/RoundPageContainer.tsx

@@ -24,6 +24,7 @@ import { MicroLabel } from "@/components/typography";
 import { useHeaderChildren, useHeaderLeftContent, useHeaderLogo, useHeaderMobileChildren } from "@/contexts";
 import { useUrlRewriter } from "@/hooks";
 import { cn, useIsMobile } from "@/index";
+import { useOptionalSidebar } from "@/shadcnui";
 import { ModuleWithPermissions } from "@/permissions";
 import { useSearchParams } from "next/navigation";
 import { Fragment, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
@@ -186,6 +187,9 @@ export function RoundPageContainer({
   const headerMobileChildren = useHeaderMobileChildren();
   const [showDetails, setShowDetailsState] = useState(defaultDetailsOpen);
   const isMobile = useIsMobile();
+  // The desktop shell drops its start padding only where a sidebar sits against it. A page
+  // without one (the customer portal) keeps the padding on both sides.
+  const hasSidebar = useOptionalSidebar() !== null;
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
@@ -323,7 +327,7 @@ export function RoundPageContainer({
             // render 78px tall; below the bar it became a visible gap. The
             // swipe-up gesture region is unaffected either way — it is a gesture
             // area, not painted chrome.
-            isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 ps-0",
+            isMobile ? "gap-1 p-1 pt-0" : cn("p-2 pt-0", hasSidebar && "ps-0"),
           )}
         >
           {/* `min-h-0 flex-1`, NOT `h-full`: the bar below is an in-flow sibling in
@@ -367,7 +371,7 @@ export function RoundPageContainer({
           // render 78px tall; below the bar it became a visible gap. The
           // swipe-up gesture region is unaffected either way — it is a gesture
           // area, not painted chrome.
-          isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 ps-0",
+          isMobile ? "gap-1 p-1 pt-0" : cn("p-2 pt-0", hasSidebar && "ps-0"),
         )}
       >
         {/* `min-h-0 flex-1`, NOT `h-full`: MobileNavigationBar below is an in-flow

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

@@ -0,0 +1,64 @@
+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 { SidebarProvider } from "../../../shadcnui";
+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(() => {
+  // The package Link resolves its inner component at runtime and throws if i18n
+  // was never configured (src/i18n/config.ts).
+  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>;
+}
+
+describe("RoundPageContainer shell padding", () => {
+  it("drops the start padding next to a sidebar", async () => {
+    render(
+      withShared(<SidebarProvider>{<RoundPageContainer testId="shell">content</RoundPageContainer>}</SidebarProvider>),
+    );
+    expect((await screen.findByTestId("shell")).classList.contains("ps-0")).toBe(true);
+  });
+
+  it("keeps the start padding when the page has no sidebar", async () => {
+    render(withShared(<RoundPageContainer testId="shell">content</RoundPageContainer>));
+    const shell = await screen.findByTestId("shell");
+    expect(shell.classList.contains("p-2")).toBe(true);
+    expect(shell.classList.contains("ps-0")).toBe(false);
+  });
+});

package/src/components/navigations/Header.tsx

@@ -4,7 +4,7 @@ import { useIsMobile } from "@/utils";
 import { useIsBreadcrumbRootHidden } from "../../contexts/BreadcrumbRootContext";
 import { useHeaderRootLabel } from "../../contexts/HeaderChildrenContext";
 import { useSharedContext } from "../../contexts/SharedContext";
-import { SidebarTrigger } from "../../shadcnui";
+import { SidebarTrigger, useOptionalSidebar } from "../../shadcnui";
 import { BreadcrumbNavigation } from "./Breadcrumb";
 
 type HeaderProps = {
@@ -22,6 +22,7 @@ export function Header({ children, mobileChildren, leftContent, logo, className
   const rootLabel = useHeaderRootLabel();
   const isRootHidden = useIsBreadcrumbRootHidden();
   const isMobile = useIsMobile();
+  const sidebar = useOptionalSidebar();
 
   return (
     // Outer element owns the safe-area inset; the inner row keeps h-12 so the
@@ -41,7 +42,7 @@ export function Header({ children, mobileChildren, leftContent, logo, className
     >
       <div className="bg-sidebar flex h-12 w-full flex-row items-center justify-between ps-2 pe-4">
         {isMobile && logo && <div className="flex shrink-0 flex-row items-center pe-1">{logo}</div>}
-        <SidebarTrigger aria-label="Toggle sidebar" id="sidebar-trigger" />
+        {sidebar && <SidebarTrigger aria-label="Toggle sidebar" id="sidebar-trigger" />}
         {leftContent}
         <div className="flex w-full flex-row items-center justify-start">
           <BreadcrumbNavigation items={breadcrumbs} rootLabel={rootLabel ?? undefined} showRoot={!isRootHidden} />

package/src/components/navigations/__tests__/Header.spec.tsx

@@ -0,0 +1,60 @@
+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 { SidebarProvider } from "../../../shadcnui";
+import { Header } from "../Header";
+
+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(() => {
+  // The package Link resolves its inner component at runtime and throws if i18n
+  // was never configured (src/i18n/config.ts).
+  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>;
+}
+
+describe("Header", () => {
+  it("renders the sidebar toggle inside a SidebarProvider", () => {
+    render(withShared(<SidebarProvider>{<Header />}</SidebarProvider>));
+    expect(screen.queryByRole("button", { name: "Toggle sidebar" })).not.toBeNull();
+  });
+
+  it("renders without a SidebarProvider and shows no sidebar toggle", () => {
+    expect(() => render(withShared(<Header />))).not.toThrow();
+    expect(screen.queryByRole("button", { name: "Toggle sidebar" })).toBeNull();
+  });
+});

package/src/components/tables/ContentListTable.tsx

@@ -69,6 +69,12 @@ type ContentListTableProps = {
    */
   hidePagination?: boolean;
   onRowClick?: (rowData: any) => void;
+  /**
+   * Renders a full-width detail row under an expanded row. Receives the row's
+   * `jsonApiData`. Setting it makes every row expandable; the row's own cell
+   * toggles it via `row.getToggleExpandedHandler()`.
+   */
+  renderExpandedRow?: (rowData: any) => ReactNode;
 };
 
 type CellRenderer = (context: unknown) => ReactNode;
@@ -140,6 +146,14 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
     data: tableData,
     columns: tableColumns,
     getCoreRowModel: getCoreRowModel(),
+    ...(props.renderExpandedRow && {
+      getExpandedRowModel: getExpandedRowModel(),
+      // Key rows by record id so an expansion stays with its record when a search or filter reorders the rows.
+      getRowId: (row: TableContent<any>, index: number) => row.jsonApiData?.id ?? String(index),
+      getRowCanExpand: () => true,
+      onExpandedChange: setExpanded,
+      state: { expanded },
+    }),
     ...(props.expandable && {
       getExpandedRowModel: getExpandedRowModel(),
       getSubRows: props.getSubRows,
@@ -272,39 +286,55 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
                       </TableCell>
                     </TableRow>
                     {group.rows.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        onClick={() => onRowClick?.(row.original.jsonApiData)}
-                        className={`group ${onRowClick ? "hover:bg-muted/50 cursor-pointer" : ""}`}
-                      >
-                        {row.getVisibleCells().map((cell) => {
-                          const meta = cell.column.columnDef.meta as { className?: string } | undefined;
-                          return (
-                            <TableCell key={cell.id} className={meta?.className}>
-                              {renderCell(cell.column.columnDef.cell, cell.getContext())}
+                      <React.Fragment key={row.id}>
+                        <TableRow
+                          onClick={() => onRowClick?.(row.original.jsonApiData)}
+                          className={`group ${onRowClick ? "hover:bg-muted/50 cursor-pointer" : ""}`}
+                        >
+                          {row.getVisibleCells().map((cell) => {
+                            const meta = cell.column.columnDef.meta as { className?: string } | undefined;
+                            return (
+                              <TableCell key={cell.id} className={meta?.className}>
+                                {renderCell(cell.column.columnDef.cell, cell.getContext())}
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                        {props.renderExpandedRow && row.getIsExpanded() && (
+                          <TableRow data-testid="content-list-table-expanded-row">
+                            <TableCell colSpan={tableColumns.length} className="bg-muted/30 px-4 py-3">
+                              {props.renderExpandedRow(row.original.jsonApiData)}
                             </TableCell>
-                          );
-                        })}
-                      </TableRow>
+                          </TableRow>
+                        )}
+                      </React.Fragment>
                     ))}
                   </React.Fragment>
                 ))
               ) : (
                 rowModel.rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    onClick={() => onRowClick?.(row.original.jsonApiData)}
-                    className={`group ${onRowClick ? "hover:bg-muted/50 cursor-pointer" : ""}`}
-                  >
-                    {row.getVisibleCells().map((cell) => {
-                      const meta = cell.column.columnDef.meta as { className?: string } | undefined;
-                      return (
-                        <TableCell key={cell.id} className={meta?.className}>
-                          {renderCell(cell.column.columnDef.cell, cell.getContext())}
+                  <React.Fragment key={row.id}>
+                    <TableRow
+                      onClick={() => onRowClick?.(row.original.jsonApiData)}
+                      className={`group ${onRowClick ? "hover:bg-muted/50 cursor-pointer" : ""}`}
+                    >
+                      {row.getVisibleCells().map((cell) => {
+                        const meta = cell.column.columnDef.meta as { className?: string } | undefined;
+                        return (
+                          <TableCell key={cell.id} className={meta?.className}>
+                            {renderCell(cell.column.columnDef.cell, cell.getContext())}
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                    {props.renderExpandedRow && row.getIsExpanded() && (
+                      <TableRow data-testid="content-list-table-expanded-row">
+                        <TableCell colSpan={tableColumns.length} className="bg-muted/30 px-4 py-3">
+                          {props.renderExpandedRow(row.original.jsonApiData)}
                         </TableCell>
-                      );
-                    })}
-                  </TableRow>
+                      </TableRow>
+                    )}
+                  </React.Fragment>
                 ))
               )
             ) : (

package/src/components/tables/__tests__/ContentListTable.spec.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ContentListTable } from "../ContentListTable";
 
 // `ContentListTable` imports `useTableGenerator` from the `../../hooks` barrel,
@@ -7,20 +7,40 @@ import { ContentListTable } from "../ContentListTable";
 // barrel (spreading the actual module so the other exports survive) is the same
 // approach the sibling `ContentListTable.test.tsx` in this folder uses; one
 // plain column is enough here.
+// `mockColumns.expandToggle` switches the mocked name cell to a button that
+// toggles row expansion (the `renderExpandedRow` suite), plus a second column so
+// the detail row's colSpan is checked against more than one column.
+const mockColumns = vi.hoisted(() => ({ expandToggle: false }));
+
 vi.mock("../../../hooks", async () => {
   const actual = await vi.importActual("../../../hooks");
   return {
     ...actual,
     useTableGenerator: vi.fn((_type: any, params: any) => ({
       data: params.data.map((item: any) => ({ ...item, jsonApiData: item })),
-      columns: [
-        {
-          id: "name",
-          header: "Name",
-          accessorKey: "name",
-          cell: ({ row }: any) => row.original.name,
-        },
-      ],
+      columns: mockColumns.expandToggle
+        ? [
+            {
+              id: "name",
+              header: "Name",
+              accessorKey: "name",
+              cell: ({ row }: any) => <button onClick={row.getToggleExpandedHandler()}>{row.original.name}</button>,
+            },
+            {
+              id: "id",
+              header: "Id",
+              accessorKey: "id",
+              cell: ({ row }: any) => row.original.id,
+            },
+          ]
+        : [
+            {
+              id: "name",
+              header: "Name",
+              accessorKey: "name",
+              cell: ({ row }: any) => row.original.name,
+            },
+          ],
     })),
   };
 });
@@ -60,3 +80,106 @@ describe("ContentListTable pagination footer", () => {
     expect(screen.getByText("Row one")).toBeInTheDocument();
   });
 });
+
+describe("ContentListTable renderExpandedRow", () => {
+  beforeEach(() => {
+    mockColumns.expandToggle = true;
+  });
+
+  afterEach(() => {
+    mockColumns.expandToggle = false;
+  });
+
+  // The callback receives `row.original.jsonApiData`; the mocked generator sets
+  // that to the raw data item, so `d` is `{ id, name }`.
+  const renderExpandedRow = (d: any) => `Detail for ${d.name}`;
+
+  it("renders no detail row until a row is expanded", () => {
+    render(
+      <ContentListTable
+        data={baseData}
+        fields={["name", "id"]}
+        tableGeneratorType={mockModule}
+        renderExpandedRow={renderExpandedRow}
+      />,
+    );
+    expect(screen.queryByTestId("content-list-table-expanded-row")).toBeNull();
+  });
+
+  it("renders the callback output in a full-width row after toggling", () => {
+    render(
+      <ContentListTable
+        data={baseData}
+        fields={["name", "id"]}
+        tableGeneratorType={mockModule}
+        renderExpandedRow={renderExpandedRow}
+      />,
+    );
+    fireEvent.click(screen.getByText("Row one"));
+    const detailRow = screen.getByTestId("content-list-table-expanded-row");
+    expect(detailRow).toHaveTextContent("Detail for Row one");
+    const cells = detailRow.querySelectorAll("td");
+    expect(cells).toHaveLength(1);
+    expect(cells[0].getAttribute("colspan")).toBe("2");
+
+    fireEvent.click(screen.getByText("Row one"));
+    expect(screen.queryByTestId("content-list-table-expanded-row")).toBeNull();
+  });
+
+  it("keeps the expansion on the record, not on the row position, when the rows change", () => {
+    const twoRows = {
+      ...baseData,
+      data: [
+        { id: "1", name: "Row one" },
+        { id: "2", name: "Row two" },
+      ],
+    };
+    const { rerender } = render(
+      <ContentListTable
+        data={twoRows}
+        fields={["name", "id"]}
+        tableGeneratorType={mockModule}
+        renderExpandedRow={renderExpandedRow}
+      />,
+    );
+    fireEvent.click(screen.getByText("Row one"));
+    expect(screen.getByTestId("content-list-table-expanded-row")).toHaveTextContent("Detail for Row one");
+
+    // A search narrows the list: "Row two" now sits where "Row one" was.
+    rerender(
+      <ContentListTable
+        data={{ ...baseData, data: [{ id: "2", name: "Row two" }] }}
+        fields={["name", "id"]}
+        tableGeneratorType={mockModule}
+        renderExpandedRow={renderExpandedRow}
+      />,
+    );
+    expect(screen.queryByTestId("content-list-table-expanded-row")).toBeNull();
+  });
+
+  it("rows cannot expand without the prop", () => {
+    render(<ContentListTable data={baseData} fields={["name", "id"]} tableGeneratorType={mockModule} />);
+    fireEvent.click(screen.getByText("Row one"));
+    expect(screen.queryByTestId("content-list-table-expanded-row")).toBeNull();
+    expect(screen.queryByText("Detail for Row one")).toBeNull();
+  });
+
+  it("grouped rows also expand", () => {
+    render(
+      <ContentListTable
+        data={baseData}
+        fields={["name", "id"]}
+        tableGeneratorType={mockModule}
+        groupBy="name"
+        renderExpandedRow={renderExpandedRow}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Row one" }));
+    const detailRow = screen.getByTestId("content-list-table-expanded-row");
+    expect(detailRow).toHaveTextContent("Detail for Row one");
+    // The detail row sits directly under the grouped data row, after the group header.
+    const dataRow = screen.getByRole("button", { name: "Row one" }).closest("tr")!;
+    expect(dataRow.nextElementSibling).toBe(detailRow);
+    expect(dataRow.previousElementSibling).toHaveTextContent("Row one");
+  });
+});

package/src/shadcnui/ui/badge.tsx

@@ -25,6 +25,8 @@ const badgeVariants = cva(
         softGray: "bg-gray-500/10 text-gray-700 dark:bg-gray-500/15 dark:text-gray-400",
         softOrange: "bg-orange-500/10 text-orange-700 dark:bg-orange-500/15 dark:text-orange-400",
         softAmber: "bg-amber-500/10 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400",
+        softEmerald: "bg-emerald-500/10 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400",
+        softPurple: "bg-purple-500/10 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
         blue: "bg-sky-500 text-primary-foreground [a]:hover:bg-sky-500/80",
         green: "bg-emerald-500 text-primary-foreground [a]:hover:bg-emerald-500/80",
         red: "bg-red-500 text-primary-foreground [a]:hover:bg-red-500/80",

package/src/shadcnui/ui/sidebar.tsx

@@ -45,6 +45,11 @@ function useSidebar() {
   return context;
 }
 
+/** Like `useSidebar`, but returns null outside a `SidebarProvider` instead of throwing. */
+function useOptionalSidebar(): SidebarContextProps | null {
+  return React.useContext(SidebarContext);
+}
+
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -688,5 +693,6 @@ export {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
+  useOptionalSidebar,
   useSidebar,
 };